{"version":3,"file":"TimelineElement.DI3ew_pi.mjs","names":["useRef","useState","_Fragment","CallToAction"],"sources":["https:/framerusercontent.com/modules/putxWoCvayNGZa4jgWvR/b31jLmWZnkGIwiO1Mtfd/TimelineElement.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,useInView}from\"framer\";import{useRef,useState}from\"react\";import CallToAction from\"https://framer.com/m/CallToAction-Dbzh.js@91RYL00gEaBr0MC5QynB\";export default function TimelineElement({title,copy,date,controlClass,isActive,isHeadlineComponent,customTag,link,isDarkMode,openInNewTab}){const timelineElementRef=useRef(null);const[lineHeight,setLineHeight]=useState(\"h-[calc(100%+22px)]\");const isInView=useInView(timelineElementRef,{margin:\"0px 0px -25% 0px\",once:true});return /*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"style\",{dangerouslySetInnerHTML:{__html:innerStyles}}),/*#__PURE__*/_jsxs(\"div\",{ref:timelineElementRef,className:`time-element ${isHeadlineComponent?\"headline-component\":controlClass} ${isDarkMode?\"dark-mode\":\"\"}`,children:[date&&!customTag&&/*#__PURE__*/_jsx(\"p\",{className:\"date-container font-weight-regular\",children:/*#__PURE__*/_jsx(\"span\",{className:\"year\",children:date})}),customTag&&/*#__PURE__*/_jsx(\"p\",{className:\"date-container font-weight-regular\",children:/*#__PURE__*/_jsx(\"span\",{className:\"year\",children:customTag})}),/*#__PURE__*/_jsxs(\"div\",{children:[/*#__PURE__*/_jsx(\"div\",{className:\"heading-4 font-weight-regular\",children:title}),/*#__PURE__*/_jsxs(\"div\",{className:\"heading-4 font-weight-regular\",children:[isHeadlineComponent?/*#__PURE__*/_jsxs(\"span\",{className:`arrow-animation ${isInView?\"active\":\"\"}`,children:[/*#__PURE__*/_jsx(\"span\",{className:\"line\"}),/*#__PURE__*/_jsx(\"span\",{className:\"dot top\"}),/*#__PURE__*/_jsx(\"span\",{className:\"dot bottom\"}),/*#__PURE__*/_jsx(\"span\",{className:\"dot middle\"})]}):/*#__PURE__*/_jsxs(\"span\",{className:`arrow-animation ${isActive?\"active\":\"\"}`,children:[/*#__PURE__*/_jsx(\"span\",{className:\"line\"}),/*#__PURE__*/_jsx(\"span\",{className:\"dot top\"}),/*#__PURE__*/_jsx(\"span\",{className:\"dot bottom\"}),/*#__PURE__*/_jsx(\"span\",{className:\"dot middle\"})]}),copy]})]}),link&&/*#__PURE__*/_jsx(CallToAction,{variant:\"Link Primary\",label:\"Learn more\",newTab:openInNewTab??false,link:link})]})]});}addPropertyControls(TimelineElement,{date:{type:ControlType.Date},title:{type:ControlType.String,defaultValue:\"Wing launches drone delivery in Australia\",displayTextArea:true},copy:{type:ControlType.String,defaultValue:\"After several years of successful test flights in the US and Australia, we opened a first-of-its-kind service to the public, delivering hot coffee, fresh food, over-the-counter medicine, and rotisserie chickens, or “hot chooks.”\",displayTextArea:true},controlClass:{type:ControlType.String,defaultValue:\"new\"},isHeadlineComponent:{type:ControlType.Boolean,defaultValue:false},customTag:{type:ControlType.String},link:{type:ControlType.Link},openInNewTab:{type:ControlType.Boolean,defaultValue:false},isDarkMode:{type:ControlType.Boolean,defaultValue:false}});const innerStyles=`\n    .font-weight-medium {\n        font-weight: 500;\n        font-family: \"Graphik Medium\", \"Graphik Medium Placeholder\", sans-serif;\n    }\n\n    .font-weight-regular {\n        font-weight: 400;\n        font-family: \"Graphik Regular\", \"Graphik Regular Placeholder\", sans-serif;\n    }\n\n    .heading-4 {\n        font-size: 32px;\n        line-height: 1.2;\n        letter-spacing: -1.28px;\n    }\n\n     @media (max-width: 1199px) {\n        .heading-4 {\n            font-size: 24px;\n            line-height: 1.25;\n            letter-spacing: -0.96px;\n        }\n    }\n\n    .time-element {\n        gap: 8px;\n        width: 100%;\n        display: flex;\n        max-width: 50%;\n        position: absolute;\n        flex-direction: column;\n        transition: all 0.7s cubic-bezier(.36,.15,0,.99);\n    }\n\n    @media (max-width: 1199px) {\n        .time-element {\n            left: 16px;\n            max-width: calc(100% - 32px);\n        }\n    }\n\n    .time-element .date-container {\n        height: 37px;\n        display: flex;\n        color: #130B19;\n        font-size: 18px;\n        padding: 7px 16px;\n        width: fit-content;\n        line-height: 1.3px;\n        align-items: center;\n        border-radius: 100px;\n        background: #FFFFFF80;\n    }\n\n    .time-element.first-element {\n        opacity: 1;\n        bottom: 10%;\n        left: calc(8.3% + 30px);\n        transform: translate(0, 0) scale(1);\n    }\n\n    @media (max-width: 1199px) {\n        .time-element.first-element {\n            left: 16px;\n            bottom: 80px;\n            padding-left: 0;\n            padding-right: 0;\n        }\n    }\n\n    .time-element.second-element {\n        left: 58%;\n        opacity: 1;\n        bottom: 40%;\n        filter: blur(7px);\n        transform: translate(0, 0) scale(0.7);\n\n        @media (max-width: 1199px) {\n            left: 16px;\n            bottom: calc(50% + 40px);\n            padding-right: 0;\n            padding-left: 38px;\n            transform: translate(0, 0) scale(1);\n        }\n\n        @media (max-width: 810px) {\n            left: 79%;\n            padding-left: 0;\n        }\n        \n    }\n\n    .time-element.third-element {\n        opacity: 1;\n        bottom: 65%;\n        filter: blur(10px);\n        left: calc(41% + 30px);\n        transform: translate(0, 0) scale(0.45);\n    }\n\n    @media (max-width: 1199px) {\n        .time-element.third-element {\n            opacity: 0;\n            bottom: 80%;\n            left: -32px;\n            padding-left: 0;\n            padding-right: 0;\n            transform: translate(0, 0) scale(0.8);\n        }\n    }\n\n    .time-element.out {\n        left: -20%;\n        opacity: 0;\n        bottom: 45%;\n        filter: blur(10px);\n        transform: translate(0, 0) scale(2);\n    }\n\n    @media (max-width: 1199px) {\n        .time-element.out {\n            transform: translate(0, 0) scale(1.5);\n        }\n    }\n\n    .time-element.new {\n        opacity: 0;\n        bottom: 80%;\n        filter: blur(10px);\n        left: calc(25% + 30px);\n        transform: translate(0, 0) scale(0.3);   \n    }\n\n    @media (max-width: 1199px) {\n        .time-element.new {\n            left: -32px;\n            padding-left: 0;\n            padding-right: 0;\n            transform: translate(0, 0) scale(0.8);\n        }\n    }\n\n    .time-element.headline-component {\n        gap: 16px;\n        left: unset;\n        max-width: 781px;\n        position: relative;\n    }\n\n    .time-element.headline-component .date-container {\n        margin-top: 0;\n        background-color: #E6E6E6;\n    }\n\n    .time-element.dark-mode .date-container, .time-element.dark-mode .arrow-animation {\n        color: #FFFFFF;\n        backdrop-filter: blur(35px);\n        background-color: rgba(255,255,255, 0.1);\n    }\n\n    .time-element.dark-mode .heading-4 {\n        color: #FFFFFF;\n    }\n\n    .time-element.dark-mode .arrow-animation.active .line {\n        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);\n    }\n\n    .time-element.dark-mode .arrow-animation .dot {\n        background-color: #FFFFFF;\n    }\n\n    .time-element .arrow-animation {\n        width: 31px;\n        height: 31px;\n        margin-right: 7px;\n        border-radius: 100px;\n        display: inline-block;\n        transform: translateY(5px);\n        background-color: #130B191A;\n        transition: all 0.5s cubic-bezier(.36,.15,0,.99) 0.5s;\n    }\n\n    .time-element .arrow-animation.active {\n        width: 67px;\n    }\n\n    .time-element .arrow-animation .line, .time-element .arrow-animation .dot {\n        top: 50%;\n        left: 14px;\n        width: 3px;\n        height: 3px;\n        display: block;\n        position: absolute;\n        border-radius: 100%;\n        transform: translateY(-50%);\n        transition: all 0.5s cubic-bezier(.36,.15,0,.99) 0.5s;\n    }\n    \n    .time-element .arrow-animation .line {\n        border-radius: 100px;\n        background-blend-mode: multiply;\n        background: linear-gradient(-90deg, #5D5D5D 0%, #BDBDBD 100%);\n    }\n\n    .time-element .arrow-animation.active .line {\n        width: 39px;\n        background: linear-gradient(-90deg, #5D5D5D 0%, #BDBDBD 80%);\n    }\n\n    .time-element .arrow-animation .dot {\n        border-radius: 100%;\n        background-color: #625943;\n    }\n\n    .time-element .arrow-animation.active .dot.top {\n        top: calc(50% - 6px);\n        left: calc(100% - 21px);\n    }\n\n    .time-element .arrow-animation.active .dot.bottom {\n        top: calc(50% + 6px);\n        left: calc(100% - 21px);\n    }\n\n    .time-element .arrow-animation.active .dot.middle {\n        left: calc(100% - 17px);\n    }\n\n   `;\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TimelineElement\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TimelineElement.map"],"mappings":"qSAAyQ,SAAwB,EAAgB,CAAC,QAAM,OAAK,OAAK,eAAa,WAAS,sBAAoB,YAAU,OAAK,aAAW,gBAAc,CAAC,IAAM,EAAmBA,EAAO,KAAK,CAAM,CAAC,EAAW,GAAeC,EAAS,sBAAsB,CAAO,EAAS,EAAU,EAAmB,CAAC,OAAO,mBAAmB,KAAK,GAAK,CAAC,CAAC,OAAoB,EAAMC,EAAU,CAAC,SAAS,CAAc,EAAK,QAAQ,CAAC,wBAAwB,CAAC,OAAO,EAAY,CAAC,CAAC,CAAc,EAAM,MAAM,CAAC,IAAI,EAAmB,UAAU,gBAAgB,EAAoB,qBAAqB,EAAa,GAAG,EAAW,YAAY,KAAK,SAAS,CAAC,GAAM,CAAC,GAAwB,EAAK,IAAI,CAAC,UAAU,qCAAqC,SAAsB,EAAK,OAAO,CAAC,UAAU,OAAO,SAAS,EAAK,CAAC,CAAC,CAAC,CAAC,GAAwB,EAAK,IAAI,CAAC,UAAU,qCAAqC,SAAsB,EAAK,OAAO,CAAC,UAAU,OAAO,SAAS,EAAU,CAAC,CAAC,CAAC,CAAc,EAAM,MAAM,CAAC,SAAS,CAAc,EAAK,MAAM,CAAC,UAAU,gCAAgC,SAAS,EAAM,CAAC,CAAc,EAAM,MAAM,CAAC,UAAU,gCAAgC,SAAS,CAAC,EAAiC,EAAM,OAAO,CAAC,UAAU,mBAAmB,EAAS,SAAS,KAAK,SAAS,CAAc,EAAK,OAAO,CAAC,UAAU,OAAO,CAAC,CAAc,EAAK,OAAO,CAAC,UAAU,UAAU,CAAC,CAAc,EAAK,OAAO,CAAC,UAAU,aAAa,CAAC,CAAc,EAAK,OAAO,CAAC,UAAU,aAAa,CAAC,CAAC,CAAC,CAAC,CAAc,EAAM,OAAO,CAAC,UAAU,mBAAmB,EAAS,SAAS,KAAK,SAAS,CAAc,EAAK,OAAO,CAAC,UAAU,OAAO,CAAC,CAAc,EAAK,OAAO,CAAC,UAAU,UAAU,CAAC,CAAc,EAAK,OAAO,CAAC,UAAU,aAAa,CAAC,CAAc,EAAK,OAAO,CAAC,UAAU,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,EAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAmB,EAAKC,EAAa,CAAC,QAAQ,eAAe,MAAM,aAAa,OAAO,GAAc,GAAW,OAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,oBAA3/D,IAA8D,IAAmC,IAAyF,CAAm0D,EAAoB,EAAgB,CAAC,KAAK,CAAC,KAAK,EAAY,KAAK,CAAC,MAAM,CAAC,KAAK,EAAY,OAAO,aAAa,4CAA4C,gBAAgB,GAAK,CAAC,KAAK,CAAC,KAAK,EAAY,OAAO,aAAa,uOAAuO,gBAAgB,GAAK,CAAC,aAAa,CAAC,KAAK,EAAY,OAAO,aAAa,MAAM,CAAC,oBAAoB,CAAC,KAAK,EAAY,QAAQ,aAAa,GAAM,CAAC,UAAU,CAAC,KAAK,EAAY,OAAO,CAAC,KAAK,CAAC,KAAK,EAAY,KAAK,CAAC,aAAa,CAAC,KAAK,EAAY,QAAQ,aAAa,GAAM,CAAC,WAAW,CAAC,KAAK,EAAY,QAAQ,aAAa,GAAM,CAAC,CAAC,CAAO,EAAY"}