{"version":3,"file":"Pattern_1.DY5d48U4.mjs","names":[],"sources":["https:/framerusercontent.com/modules/sQ78fUz1uJEvEcr9wAv4/B8Cd4ZhiTsQvAJIQHbZX/Pattern_1.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerIntrinsicWidth 320\n * @framerIntrinsicHeight 240\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */ export function MyComponent(props){const stroke=.5*40/props.scale;console.log(props.diagonal);let colorOutline=\"\";let colorDiagonal=\"\";let colorPlus=\"\";let colorCenter=\"\";let colorStroke=\"\";if(props.dropDown===\"a\"){colorOutline=\"%23E6E6E6\";colorDiagonal=\"%23FAFAFA\";colorPlus=\"%23FAFAFA\";colorCenter=\"%23E6E6E6\";colorStroke=\"#E6E6E6\";}else if(props.dropDown===\"b\"){colorOutline=\"%234F469C\";colorDiagonal=\"%236258BB\";colorPlus=\"%236258BB\";colorCenter=\"%234F469C\";colorStroke=\"#4F469C\";}else{colorOutline=props.right;colorDiagonal=props.diagonal;colorPlus=props.plus;colorCenter=props.center;colorStroke=props.borderColor;}return /*#__PURE__*/ _jsx(\"div\",{style:{width:\"100%\",height:\"100%\",position:\"relative\",borderRadius:props.borderRadius,border:` solid ${props.borderWidth}px  ${colorStroke}`,overflow:\"hidden\"},children:/*#__PURE__*/ _jsx(\"div\",{style:{left:\"-1px\",right:\"-1px\",top:\"-1px\",bottom:\"-1px\",position:\"absolute\",backgroundImage:`\n                    \n                    url(\"data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg stroke='${colorCenter}' stroke-width='${stroke}px' %3E%3Cpath d='M20 16L24 20L20 24L16 20L20 16Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\"),\n\n                    url(\"data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='none' stroke='${colorOutline}' stroke-width='${stroke}px' %3E%3Cpath d='M20 0V16M20 40V24M0 20H16M40 20H24'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\"),\n\n                    url(\"data:image/svg+xml,%3Csvg width='40' height='40' viewBox='1 1 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='none' stroke='${colorDiagonal}' stroke-width='${stroke}px' %3E%3Cpath d='M1 1L19 19M41 1L23 19M41 41L23 23M1 41L19 23'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\"),\n                    \n                    url(\"data:image/svg+xml,%3Csvg width='40' height='40' viewBox='1 1 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg stroke='${colorDiagonal}' stroke-width='${stroke}px' %3E%3Cpath d='M41 1H1V41H41V1Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")\n                    \n                    `,backgroundSize:`${props.scale}px`}})});}console.log(\"hello world\");MyComponent.defaultProps={scale:40,borderRadius:8,borderWidth:5,dropDown:\"a\"};addPropertyControls(MyComponent,{scale:{title:\"Size\",type:ControlType.Number,min:24,max:64,step:4},dropDown:{title:\"Color\",type:ControlType.Enum,displaySegmentedControl:true,segmentedControlDirection:\"horizontal\",options:[\"a\",\"b\",\"c\"],optionTitles:[\"Grey\",\"Purple\",\"Custom\"]},right:{title:\"Outline\",type:ControlType.Color,defaultValue:\"#E6E6E6\",hidden(props){return props.dropDown!=\"c\";}},diagonal:{title:\"X Lines\",type:ControlType.Color,defaultValue:\"#FAFAFA\",hidden(props){return props.dropDown!=\"c\";}},plus:{title:\"+ Lines\",type:ControlType.Color,defaultValue:\"#FAFAFA\",hidden(props){return props.dropDown!=\"c\";}},center:{title:\"\\u25C7\",type:ControlType.Color,defaultValue:\"E6E6E6\",hidden(props){return props.dropDown!=\"c\";}},borderColor:{title:\"Border\",type:ControlType.Color,defaultValue:\"#E6E6E6\",hidden(props){return props.dropDown!=\"c\";}},borderRadius:{title:\"Radius\",type:ControlType.Number,min:0,max:2e3,unit:\"px\",step:4,displayStepper:true},borderWidth:{title:\"Width\",type:ControlType.Number,defaultValue:1,min:0,max:100,step:.5,displayStepper:true}});\nexport const __FramerMetadata__ = {\"exports\":{\"MyComponent\":{\"type\":\"reactComponent\",\"name\":\"MyComponent\",\"slots\":[],\"annotations\":{\"framerIntrinsicHeight\":\"240\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerIntrinsicWidth\":\"320\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Pattern_1.map"],"mappings":"4JAMI,SAAgB,EAAY,EAAM,CAAC,IAAM,EAAO,GAAG,GAAG,EAAM,MAAM,QAAQ,IAAI,EAAM,QAAQ,EAAE,IAAI,EAAa,GAAO,EAAc,GAAwB,EAAY,GAAO,EAAY,GAAkb,OAA5a,EAAM,WAAW,KAAK,EAAa,YAAY,EAAc,YAAkC,EAAY,YAAY,EAAY,WAAmB,EAAM,WAAW,KAAK,EAAa,YAAY,EAAc,YAAkC,EAAY,YAAY,EAAY,YAAgB,EAAa,EAAM,MAAM,EAAc,EAAM,SAAS,EAAgB,KAAK,EAAY,EAAM,OAAO,EAAY,EAAM,aAAkC,EAAK,MAAM,CAAC,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,SAAS,WAAW,aAAa,EAAM,aAAa,OAAO,UAAU,EAAM,YAAY,MAAM,IAAc,SAAS,QAAQ,EAAE,SAAuB,EAAK,MAAM,CAAC,MAAM,CAAC,KAAK,OAAO,MAAM,OAAO,IAAI,OAAO,OAAO,OAAO,SAAS,WAAW,gBAAgB;;yLAEzvB,EAAY,kBAAkB,EAAO;;qMAEzB,EAAa,kBAAkB,EAAO;;qMAEtC,EAAc,kBAAkB,EAAO;;yLAEnD,EAAc,kBAAkB,EAAO;;sBAE1M,eAAe,GAAG,EAAM,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAE,iBAhBnB,IAAoD,EAgBhC,QAAQ,IAAI,aAAa,EAAE,EAAY,aAAa,CAAC,MAAM,GAAG,aAAa,EAAE,YAAY,EAAE,SAAS,GAAG,EAAE,EAAoB,EAAY,CAAC,MAAM,CAAC,MAAM,OAAO,KAAK,EAAY,OAAO,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC,EAAE,SAAS,CAAC,MAAM,QAAQ,KAAK,EAAY,KAAK,wBAAwB,GAAK,0BAA0B,aAAa,QAAQ,CAAC,IAAI,IAAI,GAAG,EAAE,aAAa,CAAC,OAAO,SAAS,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,UAAU,KAAK,EAAY,MAAM,aAAa,UAAU,OAAO,EAAM,CAAC,OAAO,EAAM,UAAU,GAAI,CAAC,EAAE,SAAS,CAAC,MAAM,UAAU,KAAK,EAAY,MAAM,aAAa,UAAU,OAAO,EAAM,CAAC,OAAO,EAAM,UAAU,GAAI,CAAC,EAAE,KAAK,CAAC,MAAM,UAAU,KAAK,EAAY,MAAM,aAAa,UAAU,OAAO,EAAM,CAAC,OAAO,EAAM,UAAU,GAAI,CAAC,EAAE,OAAO,CAAC,MAAM,IAAS,KAAK,EAAY,MAAM,aAAa,SAAS,OAAO,EAAM,CAAC,OAAO,EAAM,UAAU,GAAI,CAAC,EAAE,YAAY,CAAC,MAAM,SAAS,KAAK,EAAY,MAAM,aAAa,UAAU,OAAO,EAAM,CAAC,OAAO,EAAM,UAAU,GAAI,CAAC,EAAE,aAAa,CAAC,MAAM,SAAS,KAAK,EAAY,OAAO,IAAI,EAAE,IAAI,IAAI,KAAK,KAAK,KAAK,EAAE,eAAe,EAAI,EAAE,YAAY,CAAC,MAAM,QAAQ,KAAK,EAAY,OAAO,aAAa,EAAE,IAAI,EAAE,IAAI,IAAI,KAAK,GAAG,eAAe,EAAI,CAAC,CAAC"}