{"version":3,"file":"ColorDisplay.B0b8KfCP.mjs","names":[],"sources":["https:/framerusercontent.com/modules/QoqJEAcwOCdGYGMS1AWh/3Pr7zTe6pm7Kuwkc2MzM/ColorDisplay.js"],"sourcesContent":["// Component that displays hex code of assigned color from CMS\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";// Function to convert any color format to hex\nfunction colorToHex(color){// Create a temporary element to let the browser parse the color\nconst tempElement=document.createElement(\"div\");tempElement.style.color=color;document.body.appendChild(tempElement);// Get the computed color (will be in rgb format)\nconst computedColor=window.getComputedStyle(tempElement).color;document.body.removeChild(tempElement);// Extract RGB values from rgb(r, g, b) format\nconst rgbMatch=computedColor.match(/rgb\\((\\d+),\\s*(\\d+),\\s*(\\d+)\\)/);if(rgbMatch){const r=parseInt(rgbMatch[1]);const g=parseInt(rgbMatch[2]);const b=parseInt(rgbMatch[3]);// Convert to hex\nconst toHex=n=>n.toString(16).padStart(2,\"0\");return`#${toHex(r)}${toHex(g)}${toHex(b)}`;}// If already in hex format, return as is\nif(color.startsWith(\"#\")){return color;}// Fallback\nreturn\"#000000\";}/**\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n */export default function ColorDisplay(props){const{color,showPrefix,textColor,backgroundColor,font,borderRadius,padding}=props;const hexColor=colorToHex(color);const displayText=showPrefix?hexColor.toUpperCase():hexColor.replace(\"#\",\"\").toUpperCase();const isFixedWidth=props?.style&&props.style.width===\"100%\";return /*#__PURE__*/_jsx(\"div\",{style:{...props.style,...isFixedWidth?{...props?.style}:{minWidth:\"max-content\"},backgroundColor,color:textColor,borderRadius,padding,display:\"inline-flex\",alignItems:\"center\",justifyContent:\"center\",...font},children:displayText});}addPropertyControls(ColorDisplay,{color:{type:ControlType.Color,title:\"Color\",defaultValue:\"#000000\"},showPrefix:{type:ControlType.Boolean,title:\"Show # Prefix\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#FFFFFF\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#F5F5F5\"},font:{type:ControlType.Font,title:\"Font\",defaultValue:{fontSize:\"14px\",variant:\"Medium\",letterSpacing:\"-0.01em\",lineHeight:\"1em\"},controls:\"extended\",defaultFontType:\"sans-serif\"},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:4,min:0,max:20,unit:\"px\"},padding:{type:ControlType.Number,title:\"Padding\",defaultValue:8,min:0,max:32,unit:\"px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ColorDisplay\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"auto\",\"framerSupportedLayoutWidth\":\"auto\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ColorDisplay.map"],"mappings":"0KAEA,SAAS,EAAW,EAAM,CAC1B,IAAM,EAAY,SAAS,cAAc,MAAM,CAAC,EAAY,MAAM,MAAM,EAAM,SAAS,KAAK,YAAY,EAAY,CACpH,IAAM,EAAc,EAAO,iBAAiB,EAAY,CAAC,MAAM,SAAS,KAAK,YAAY,EAAY,CACrG,IAAM,EAAS,EAAc,MAAM,iCAAiC,CAAC,GAAG,EAAS,CAAC,IAAM,EAAE,SAAS,EAAS,GAAG,CAAO,EAAE,SAAS,EAAS,GAAG,CAAO,EAAE,SAAS,EAAS,GAAG,CACrK,EAAM,GAAG,EAAE,SAAS,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,MAAM,IAAI,EAAM,EAAE,GAAG,EAAM,EAAE,GAAG,EAAM,EAAE,GAEtF,OADG,EAAM,WAAW,IAAI,CAAS,EAC3B,UAGH,SAAwB,EAAa,EAAM,CAAC,GAAK,CAAC,QAAM,aAAW,YAAU,kBAAgB,OAAK,eAAa,WAAS,EAAY,EAAS,EAAW,EAAM,CAAO,EAAY,EAAW,EAAS,aAAa,CAAC,EAAS,QAAQ,IAAI,GAAG,CAAC,aAAa,CAAO,EAAa,GAAO,OAAO,EAAM,MAAM,QAAQ,OAAO,OAAoB,EAAK,MAAM,CAAC,MAAM,CAAC,GAAG,EAAM,MAAM,GAAG,EAAa,CAAC,GAAG,GAAO,MAAM,CAAC,CAAC,SAAS,cAAc,CAAC,kBAAgB,MAAM,EAAU,eAAa,UAAQ,QAAQ,cAAc,WAAW,SAAS,eAAe,SAAS,GAAG,EAAK,CAAC,SAAS,EAAY,CAAC,sBAVrhB,IAAoD,CAUme,EAAoB,EAAa,CAAC,MAAM,CAAC,KAAK,EAAY,MAAM,MAAM,QAAQ,aAAa,UAAU,CAAC,WAAW,CAAC,KAAK,EAAY,QAAQ,MAAM,gBAAgB,aAAa,GAAK,aAAa,OAAO,cAAc,OAAO,CAAC,UAAU,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,UAAU,CAAC,gBAAgB,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,UAAU,CAAC,KAAK,CAAC,KAAK,EAAY,KAAK,MAAM,OAAO,aAAa,CAAC,SAAS,OAAO,QAAQ,SAAS,cAAc,UAAU,WAAW,MAAM,CAAC,SAAS,WAAW,gBAAgB,aAAa,CAAC,aAAa,CAAC,KAAK,EAAY,OAAO,MAAM,gBAAgB,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAY,OAAO,MAAM,UAAU,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,KAAK,CAAC,CAAC"}