{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/8FSPrEOjcS7au2bIVhSX/LJpkeqcLcagmQ3ErSstx/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    }\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": "mGAEqN,IAAIA,GAMrN,SAASA,EAAY,CAACA,EAAY,KAAQ,OAAOA,EAAY,MAAS,OAAQ,GAAGA,IAAcA,EAAY,CAAC,EAAE,EAAiB,SAARC,EAAyB,CAAC,MAAAC,EAAM,KAAAC,EAAK,eAAAC,CAAc,EAAE,CAAC,IAAMC,EAAoBC,EAAO,IAAI,EAAO,CAACC,EAAWC,CAAa,EAAEC,EAAS,qBAAqB,EAAQC,EAASC,EAAUN,EAAoB,CAAC,OAAO,mBAAmB,KAAK,EAAI,CAAC,EAAE,OAAAO,EAAU,IAAI,CAAIF,EAAU,WAAW,IAAI,CAACF,EAAc,iBAAiB,CAAE,EAAE,GAAG,EAAQA,EAAc,mBAAmB,CAAG,EAAE,CAACE,CAAQ,CAAC,EAAsBG,EAAMC,EAAU,CAAC,SAAS,CAAcC,EAAK,QAAQ,CAAC,wBAAwB,CAAC,OAAOC,CAAW,CAAC,CAAC,EAAeH,EAAM,MAAM,CAAC,IAAIR,EAAoB,UAAU,qBAAqBF,IAAO,QAAQ,aAAa,KAAK,SAAS,CAAcY,EAAK,MAAM,CAAC,UAAU,iBAAiB,SAAsBA,EAAK,OAAO,CAAC,UAAU,QAAQL,EAASH,EAAW,YAAYH,EAAe,WAAW,IAAI,CAAC,CAAC,CAAC,EAAeS,EAAM,MAAM,CAAC,UAAU,mBAAmB,SAAS,CAAcE,EAAK,OAAO,CAAC,UAAU,eAAeL,EAAS,SAAS,IAAI,CAAC,EAAeK,EAAK,OAAO,CAAC,UAAU,yBAAyB,SAAsBA,EAAK,OAAO,CAAC,UAAU,UAAU,SAAsBA,EAAK,IAAI,CAAC,UAAU,qCAAqCL,EAAS,SAAS,KAAK,SAASR,CAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,CAACe,EAAoBhB,EAAQ,CAAC,MAAM,CAAC,KAAKiB,EAAY,OAAO,aAAa,UAAU,EAAE,KAAK,CAAC,KAAKA,EAAY,KAAK,aAAa,OAAO,QAAQ,CAAC,QAAQ,MAAM,EAAE,aAAa,CAAC,aAAa,WAAW,CAAC,EAAE,eAAe,CAAC,KAAKA,EAAY,QAAQ,MAAM,mBAAmB,aAAa,GAAM,aAAa,MAAM,cAAc,IAAI,CAAC,CAAC,EAAE,IAAMF,EAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
  "names": ["eyebrowMode", "Eyebrow", "label", "mode", "isGradientLine", "buttonTransitionRef", "pe", "lineHeight", "setLineHeight", "ye", "isInView", "useInView", "ue", "u", "l", "p", "innerStyles", "addPropertyControls", "ControlType"]
}