{"version":3,"file":"HighlightedText.fbL_LIZK.mjs","names":[],"sources":["https:/framerusercontent.com/modules/pKqqK3jdNFnNSHh9ipWk/xxQhLk1lsAB7x7MYgztE/HighlightedText.js"],"sourcesContent":["// User instructions: Make a component where i can highlight a part of text like in the image provided\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";/**\n * Highlighted Text\n *\n * @framerIntrinsicWidth 720\n * @framerIntrinsicHeight 140\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */export default function HighlightedText(props){const{before,highlight,after,textColor,highlightBackground,highlightTextColor,highlightPaddingX,highlightPaddingY,highlightRadius,gap,font,highlightFont,style}=props;const isFixedWidth=!!(style&&style.width===\"100%\");// Ensure natural sizing in auto layout while still allowing full-width layouts.\nconst containerStyle={position:\"relative\",width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"flex-start\",justifyContent:\"flex-start\",...isFixedWidth?null:{minWidth:\"max-content\"},...style};const textStyle={margin:0,color:textColor,whiteSpace:\"pre-wrap\",overflowWrap:\"anywhere\",...font};const highlightStyle={display:\"inline-flex\",alignItems:\"center\",background:highlightBackground,color:highlightTextColor,padding:`${highlightPaddingY}px ${highlightPaddingX}px`,borderRadius:highlightRadius,verticalAlign:\"baseline\",// Make the pill sit nicely on the text baseline.\ntransform:\"translateY(-0.03em)\",...highlightFont};const spacerStyle={display:\"inline-block\",width:gap};return /*#__PURE__*/_jsx(\"div\",{style:containerStyle,\"aria-label\":\"Highlighted text\",children:/*#__PURE__*/_jsxs(\"p\",{style:textStyle,children:[before,before&&highlight?/*#__PURE__*/_jsx(\"span\",{style:spacerStyle}):null,highlight?/*#__PURE__*/_jsx(\"span\",{style:highlightStyle,children:highlight}):null,highlight&&after?/*#__PURE__*/_jsx(\"span\",{style:spacerStyle}):null,after]})});}addPropertyControls(HighlightedText,{before:{type:ControlType.String,title:\"Before\",defaultValue:\"No other\"},highlight:{type:ControlType.String,title:\"Highlight\",defaultValue:\"Cosmeceutical distributor\"},after:{type:ControlType.String,title:\"After\",defaultValue:\"in the region\\nowns both channels. This is our moat.\",displayTextArea:true},textColor:{type:ControlType.Color,title:\"Text\",defaultValue:\"#000000\"},highlightBackground:{type:ControlType.Color,title:\"Pill BG\",defaultValue:\"#B03B8F\"},highlightTextColor:{type:ControlType.Color,title:\"Pill Text\",defaultValue:\"#FFFFFF\"},gap:{type:ControlType.Number,title:\"Gap\",defaultValue:10,min:0,max:40,step:1,unit:\"px\"},highlightPaddingX:{type:ControlType.Number,title:\"Pad X\",defaultValue:26,min:0,max:80,step:1,unit:\"px\"},highlightPaddingY:{type:ControlType.Number,title:\"Pad Y\",defaultValue:14,min:0,max:60,step:1,unit:\"px\"},highlightRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:999,min:0,max:999,step:1,unit:\"px\"},font:{type:ControlType.Font,title:\"Text Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"48px\",variant:\"Semibold\",letterSpacing:\"-0.03em\",lineHeight:\"1.1em\"}},highlightFont:{type:ControlType.Font,title:\"Pill Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"48px\",variant:\"Semibold\",letterSpacing:\"-0.03em\",lineHeight:\"1.1em\"}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"HighlightedText\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"auto\",\"framerIntrinsicHeight\":\"140\",\"framerIntrinsicWidth\":\"720\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./HighlightedText.map"],"mappings":"8JASG,SAAwB,EAAgB,EAAM,CAAC,GAAK,CAAC,SAAO,YAAU,QAAM,YAAU,sBAAoB,qBAAmB,oBAAkB,oBAAkB,kBAAgB,MAAI,OAAK,gBAAc,SAAO,EAC5M,EAAe,CAAC,SAAS,WAAW,MAAM,OAAO,OAAO,OAAO,QAAQ,OAAO,WAAW,aAAa,eAAe,aAAa,GADsG,GAAO,EAAM,QAAQ,OAC3G,KAAK,CAAC,SAAS,aAAa,EAAE,GAAG,CAAK,EAAQ,EAAU,CAAC,OAAO,EAAE,MAAM,EAAU,WAAW,WAAW,aAAa,WAAW,GAAG,CAAI,EAAQ,EAAe,CAAC,QAAQ,cAAc,WAAW,SAAS,WAAW,EAAoB,MAAM,EAAmB,QAAQ,GAAG,EAAkB,KAAK,EAAkB,IAAI,aAAa,EAAgB,cAAc,WAC5f,UAAU,sBAAsB,GAAG,CAAa,EAAQ,EAAY,CAAC,QAAQ,eAAe,MAAM,CAAG,EAAE,OAAoB,EAAK,MAAM,CAAC,MAAM,EAAe,aAAa,mBAAmB,SAAsB,EAAM,IAAI,CAAC,MAAM,EAAU,SAAS,CAAC,EAAO,GAAQ,EAAuB,EAAK,OAAO,CAAC,MAAM,CAAW,CAAC,EAAE,KAAK,EAAuB,EAAK,OAAO,CAAC,MAAM,EAAe,SAAS,CAAS,CAAC,EAAE,KAAK,GAAW,EAAmB,EAAK,OAAO,CAAC,MAAM,CAAW,CAAC,EAAE,KAAK,CAAK,CAAC,CAAC,CAAC,CAAC,CAAE,iBAV7a,IAAoD,EAU0X,EAAoB,EAAgB,CAAC,OAAO,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,aAAa,UAAU,EAAE,UAAU,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,aAAa,2BAA2B,EAAE,MAAM,CAAC,KAAK,EAAY,OAAO,MAAM,QAAQ,aAAa;uCAAuD,gBAAgB,EAAI,EAAE,UAAU,CAAC,KAAK,EAAY,MAAM,MAAM,OAAO,aAAa,SAAS,EAAE,oBAAoB,CAAC,KAAK,EAAY,MAAM,MAAM,UAAU,aAAa,SAAS,EAAE,mBAAmB,CAAC,KAAK,EAAY,MAAM,MAAM,YAAY,aAAa,SAAS,EAAE,IAAI,CAAC,KAAK,EAAY,OAAO,MAAM,MAAM,aAAa,GAAG,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,IAAI,EAAE,kBAAkB,CAAC,KAAK,EAAY,OAAO,MAAM,QAAQ,aAAa,GAAG,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,IAAI,EAAE,kBAAkB,CAAC,KAAK,EAAY,OAAO,MAAM,QAAQ,aAAa,GAAG,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,IAAI,EAAE,gBAAgB,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,aAAa,IAAI,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,KAAK,IAAI,EAAE,KAAK,CAAC,KAAK,EAAY,KAAK,MAAM,YAAY,SAAS,WAAW,gBAAgB,aAAa,aAAa,CAAC,SAAS,OAAO,QAAQ,WAAW,cAAc,UAAU,WAAW,OAAO,CAAC,EAAE,cAAc,CAAC,KAAK,EAAY,KAAK,MAAM,YAAY,SAAS,WAAW,gBAAgB,aAAa,aAAa,CAAC,SAAS,OAAO,QAAQ,WAAW,cAAc,UAAU,WAAW,OAAO,CAAC,CAAC,CAAC"}