{"version":3,"file":"GradientBorder.2ZAzHza3.mjs","names":["_Fragment"],"sources":["https:/framerusercontent.com/modules/JyX3pCI5SUgGkMnkI1xo/wo5HBUFKXB5Bb7QDSAIP/GradientBorder.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import supportsCSSProperty from\"https://framerusercontent.com/modules/17QdXAWmhGmRMFnEtQWY/reF2RDBHSqOuZgxKhllA/SupportsCSSProperty.js\";/**\n * These annotations control how your component sizes\n * Learn more: https://www.framer.com/developers/#code-components-auto-sizing\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n *\n * @framerIntrinsicWidth 200\n * @framerIntrinsicHeight 200\n */export default function GradientBorder(props){const{style,border,gradient,borderRadius}=props;const classList={gradientBorder:`gradient-border`};const fallback=`\n        mask-composite: unset !important;\n        -webkit-mask-composite: unset !important;\n        mask: unset !important;\n        -webkit-mask: unset !important;\n        background: transparent !important;\n        border-width: ${border.borderWidth}px !important;\n        border-style: ${border.borderStyle} !important;\n        border-color: ${border.borderColor} !important;\n    `;return /*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"div\",{className:classList.gradientBorder,\"aria-hidden\":\"true\",style:{...style,borderWidth:`${border.borderWidth}px`,borderStyle:`${border.borderStyle}`,borderRadius:`${borderRadius}`,color:`${border.borderColor}`,background:`linear-gradient(${gradient.direction}deg, ${gradient.startColor} ${gradient.startPosition}%, ${gradient.endColor} ${gradient.endPosition}%) border-box`}}),/*#__PURE__*/_jsx(\"style\",{children:`\n                .${classList.gradientBorder} {\n                    position: absolute;\n                    top: 0;\n                    left: 0;\n                    right: 0;\n                    bottom: 0;\n\n                    border-color: transparent;\n                    \n                    -webkit-mask: linear-gradient(#fff 0 0) padding-box,\n                        linear-gradient(#fff 0 0);\n                    mask: linear-gradient(#fff 0 0) padding-box,\n                        linear-gradient(#fff 0 0);\n                    -webkit-mask-composite: destination-out;\n                    mask-composite: exclude;\n\n                    @supports (not (-webkit-mask: linear-gradient(#fff 0 0) padding-box,\n                        linear-gradient(#fff 0 0))) and (not (mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0))) {\n                        ${fallback}\n                    };\n\n                    @supports (not (-webkit-mask-composite: destination-out)) and (not (mask-composite: exclude)) {\n                        ${fallback}\n                    };\n\n                    ${supportsCSSProperty({property:\"background-image\",value:\"linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 100%)\"})?``:fallback}\n\n                    // @supports (not (background: linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 100%) border-box border-box)) {\n                    //     ${fallback}\n                    // };\n                    \n                }\n            `})]});}const styles={border:{}};addPropertyControls(GradientBorder,{gradient:{type:ControlType.Object,controls:{direction:{type:ControlType.Number,title:\"Direction\",defaultValue:180,min:0,max:360,unit:\"deg\",step:1},startColor:{type:ControlType.Color,title:\"Start Color\",defaultValue:\"#fff\"},startPosition:{type:ControlType.Number,title:\"Start Position\",defaultValue:0,min:0,max:100,unit:\"%\",step:1},endColor:{type:ControlType.Color,title:\"End Color\",defaultValue:\"#000\"},endPosition:{type:ControlType.Number,title:\"End Position\",defaultValue:100,min:0,max:100,unit:\"%\",step:1}}},border:{title:\"Border\",type:ControlType.Border,description:\"Border Color serves as a fallback\",defaultValue:{borderWidth:1,borderStyle:\"solid\",borderColor:\"rgba(0, 0, 0, 0.5)\"}},borderRadius:{type:ControlType.BorderRadius,title:\"Border Radius\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"GradientBorder\",\"slots\":[],\"annotations\":{\"framerIntrinsicHeight\":\"200\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"200\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./GradientBorder.map"],"mappings":"0NASG,SAAwB,EAAe,EAAM,CAAC,GAAK,CAAC,QAAM,SAAO,WAAS,gBAAc,EAAY,EAAU,CAAC,eAAe,kBAAkB,CAAO,EAAS;;;;;;wBAM3I,EAAO,YAAY;wBACnB,EAAO,YAAY;wBACnB,EAAO,YAAY;MACrC,OAAoB,EAAMA,EAAU,CAAC,SAAS,CAAc,EAAK,MAAM,CAAC,UAAU,EAAU,eAAe,cAAc,OAAO,MAAM,CAAC,GAAG,EAAM,YAAY,GAAG,EAAO,YAAY,IAAI,YAAY,GAAG,EAAO,cAAc,aAAa,GAAG,IAAe,MAAM,GAAG,EAAO,cAAc,WAAW,mBAAmB,EAAS,UAAU,OAAO,EAAS,WAAW,GAAG,EAAS,cAAc,KAAK,EAAS,SAAS,GAAG,EAAS,YAAY,eAAe,CAAC,CAAC,CAAc,EAAK,QAAQ,CAAC,SAAS;mBACrd,EAAU,eAAe;;;;;;;;;;;;;;;;;;0BAkBlB,EAAS;;;;0BAIT,EAAS;;;sBAGb,EAAoB,CAAC,SAAS,mBAAmB,MAAM,oFAAoF,CAAC,CAAC,GAAG,EAAS;;;6BAGlJ,EAAS;;;;cAIxB,CAAC,CAAC,CAAC,CAAC,kBAnD6D,IAAoD,IAAwI,CAmD9N,EAAoB,EAAe,CAAC,SAAS,CAAC,KAAK,EAAY,OAAO,SAAS,CAAC,UAAU,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,aAAa,IAAI,IAAI,EAAE,IAAI,IAAI,KAAK,MAAM,KAAK,EAAE,CAAC,WAAW,CAAC,KAAK,EAAY,MAAM,MAAM,cAAc,aAAa,OAAO,CAAC,cAAc,CAAC,KAAK,EAAY,OAAO,MAAM,iBAAiB,aAAa,EAAE,IAAI,EAAE,IAAI,IAAI,KAAK,IAAI,KAAK,EAAE,CAAC,SAAS,CAAC,KAAK,EAAY,MAAM,MAAM,YAAY,aAAa,OAAO,CAAC,YAAY,CAAC,KAAK,EAAY,OAAO,MAAM,eAAe,aAAa,IAAI,IAAI,EAAE,IAAI,IAAI,KAAK,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,SAAS,KAAK,EAAY,OAAO,YAAY,oCAAoC,aAAa,CAAC,YAAY,EAAE,YAAY,QAAQ,YAAY,qBAAqB,CAAC,CAAC,aAAa,CAAC,KAAK,EAAY,aAAa,MAAM,gBAAgB,CAAC,CAAC"}