{"version":3,"file":"Eyebrow.DITo7Tl4.mjs","names":["useRef","useState","_Fragment"],"sources":["https:/framerusercontent.com/modules/8FSPrEOjcS7au2bIVhSX/brg6g2mByUFxbscRHzl9/Eyebrow.js"],"sourcesContent":["// Welcome to Code in Framer\n// Get Started: https://www.framer.com/developers/\nimport{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useEffect,useRef,useState}from\"react\";import{useInView}from\"framer-motion\";var eyebrowMode;/**\n * These annotations control how your component sizes\n * Learn more: https://www.framer.com/developers/components/auto-sizing\n *\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n */(function(eyebrowMode){eyebrowMode[\"DARK\"]=\"dark\";eyebrowMode[\"LIGHT\"]=\"light\";})(eyebrowMode||(eyebrowMode={}));export default function Eyebrow({label,mode,isGradientLine}){const buttonTransitionRef=useRef(null);const[lineHeight,setLineHeight]=useState(\"h-[calc(100%+22px)]\");const isInView=useInView(buttonTransitionRef,{margin:\"0px 0px -25% 0px\",once:true});useEffect(()=>{if(isInView){setTimeout(()=>{setLineHeight(\"complete-height\");},500);}else{setLineHeight(\"calculated-height\");}},[isInView]);return /*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"style\",{dangerouslySetInnerHTML:{__html:innerStyles}}),/*#__PURE__*/_jsxs(\"div\",{ref:buttonTransitionRef,className:`button-transition ${mode===\"light\"?\"light-mode\":\"\"}`,children:[/*#__PURE__*/_jsx(\"div\",{className:\"line-container\",children:/*#__PURE__*/_jsx(\"span\",{className:`line ${isInView?lineHeight:\"active\"} ${isGradientLine?\"gradient\":\"\"}`})}),/*#__PURE__*/_jsxs(\"div\",{className:\"button-container\",children:[/*#__PURE__*/_jsx(\"span\",{className:`dot-element ${isInView?\"active\":\"\"}`}),/*#__PURE__*/_jsx(\"span\",{className:\"button-label-container\",children:/*#__PURE__*/_jsx(\"span\",{className:\"wrapper\",children:/*#__PURE__*/_jsx(\"p\",{className:`text-cta font-weight-medium label ${isInView?\"active\":\"\"}`,children:label})})})]})]})]});}addPropertyControls(Eyebrow,{label:{type:ControlType.String,defaultValue:\"Benefits\"},mode:{type:ControlType.Enum,defaultValue:\"dark\",options:[\"light\",\"dark\"],optionTitles:[\"Light Mode\",\"Dark Mode\"]},isGradientLine:{type:ControlType.Boolean,title:\"Is Gradient Line\",defaultValue:false,enabledTitle:\"Yes\",disabledTitle:\"No\"}});const innerStyles=`\n    .button-transition {\n        width: 100%;\n        display: flex; \n        flex-direction: column;\n        align-items: center;\n        font-family: \"Graphik Medium\";\n        font-weight: 500;\n    }\n\n    .button-transition .button-container {\n        height: 45px;\n        display: flex;\n        position: relative;\n        width: fit-content;\n        align-items: center;\n    }\n\n    .button-transition .button-container .dot-element {\n        left: 50%;\n        width: 4px;\n        height: 4px;\n        min-width: 0;\n        position: absolute;\n        border-radius: 8px;\n        border: 4px solid #261F2E;\n        transform: translateX(-50%);\n        transition: all 0.5s cubic-bezier(.7,.31,.46,.97) 0.5s;\n    }\n\n    .button-transition.light-mode .button-container .dot-element {\n        border-color: #FFFFFF;\n    }\n\n    .button-transition .button-container .dot-element.active {\n        width: 100%;\n        height: 100%;\n        min-width: 120px;\n        border: 2px solid #261F2E;\n    }\n\n    .button-transition.light-mode .button-container .dot-element.active {\n        border-color: #FFFFFF;\n    }\n\n    .button-transition .button-container .button-label-container {\n        width: 100%;\n        overflow: hidden;\n        padding: 16px 24px;\n        text-align: center;\n    }\n\n    .button-transition .button-container .button-label-container .wrapper {\n        display: block;\n        overflow: hidden;\n    }\n\n    .button-transition .button-container .button-label-container .wrapper .label {\n        top: -16px;\n        opacity: 0;\n        color: #261F2E;\n        position: relative;\n        transition: all 0.3s cubic-bezier(.7,.31,.46,.97) 1s;\n    }\n\n    .button-transition.light-mode .button-container .button-label-container .wrapper .label {\n        color: #FFFFFF;\n    }\n\n    .button-transition .button-container .button-label-container .wrapper .label.active {\n        top: 0;\n        opacity: 1;\n    }\n\n    .button-transition .line-container {\n        height: 80px;\n        display: flex;\n        justify-content: center;\n    }\n\n    .button-transition .line-container .line {\n        width: 2px;\n        background-color: #261F2E;\n        transition: height 0.5s cubic-bezier(.7,.31,.46,.97);\n    }\n\n    .button-transition .line-container .line.gradient {\n        background-color: transparent;\n        background-image: linear-gradient(rgba(255, 255, 255, 0), rgb(38, 31, 46));\n    }\n\n    .button-transition.light-mode .line-container .line {\n        background-color: #FFFFFF;\n    }\n\n    .button-transition.light-mode .line-container .line.gradient {\n        background-color: transparent;\n        background-image: linear-gradient(rgba(38, 31, 46, 0), rgb(255, 255, 255));\n    }\n\n    .button-transition .line-container .line.active {\n        height: 0 !important;\n    }\n\n    .button-transition .line-container .line.calculated-height {\n        height: calc(100% + 22px);\n    }\n\n    .button-transition .line-container .line.complete-height {\n        height: 100%;\n    }\n`;\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Eyebrow\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Eyebrow.map"],"mappings":"mXAQoH,SAAwB,EAAQ,CAAC,QAAM,OAAK,kBAAgB,CAAC,IAAM,EAAoBA,EAAO,KAAK,CAAM,CAAC,EAAW,GAAeC,EAAS,sBAAsB,CAAO,EAAS,EAAU,EAAoB,CAAC,OAAO,mBAAmB,KAAK,GAAK,CAAC,CAA6I,OAA5I,MAAc,CAAI,EAAU,eAAe,CAAC,EAAc,kBAAkB,EAAG,IAAI,CAAO,EAAc,oBAAoB,EAAI,CAAC,EAAS,CAAC,CAAqB,EAAMC,EAAU,CAAC,SAAS,CAAc,EAAK,QAAQ,CAAC,wBAAwB,CAAC,OAAO,EAAY,CAAC,CAAC,CAAc,EAAM,MAAM,CAAC,IAAI,EAAoB,UAAU,qBAAqB,IAAO,QAAQ,aAAa,KAAK,SAAS,CAAc,EAAK,MAAM,CAAC,UAAU,iBAAiB,SAAsB,EAAK,OAAO,CAAC,UAAU,QAAQ,EAAS,EAAW,SAAS,GAAG,EAAe,WAAW,KAAK,CAAC,CAAC,CAAC,CAAc,EAAM,MAAM,CAAC,UAAU,mBAAmB,SAAS,CAAc,EAAK,OAAO,CAAC,UAAU,eAAe,EAAS,SAAS,KAAK,CAAC,CAAc,EAAK,OAAO,CAAC,UAAU,yBAAyB,SAAsB,EAAK,OAAO,CAAC,UAAU,UAAU,SAAsB,EAAK,IAAI,CAAC,UAAU,qCAAqC,EAAS,SAAS,KAAK,SAAS,EAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,sBAN9sC,IAAoD,IAA6C,IAAqC,EAMjN,SAAS,EAAY,CAAC,EAAY,KAAQ,OAAO,EAAY,MAAS,UAAW,AAAc,IAAY,EAAE,CAAE,CAA4qC,EAAoB,EAAQ,CAAC,MAAM,CAAC,KAAK,EAAY,OAAO,aAAa,WAAW,CAAC,KAAK,CAAC,KAAK,EAAY,KAAK,aAAa,OAAO,QAAQ,CAAC,QAAQ,OAAO,CAAC,aAAa,CAAC,aAAa,YAAY,CAAC,CAAC,eAAe,CAAC,KAAK,EAAY,QAAQ,MAAM,mBAAmB,aAAa,GAAM,aAAa,MAAM,cAAc,KAAK,CAAC,CAAC,CAAO,EAAY"}