{"version":3,"file":"Pattern.BZP4vEt6.mjs","names":[],"sources":["https:/framerusercontent.com/modules/10RVm2iJ7fT4ZsQMFlbp/gMfoHKwMpdlIUHQ3nwkb/Pattern.js"],"sourcesContent":["// Welcome to Code in Framer\n// Get Started: https://www.framer.com/developers/\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";/**\n * These annotations control how your component sizes\n * Learn more: https://www.framer.com/developers/components/auto-sizing\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n * @framerDisableUnlink\n */export default function Pattern(props){// This is a React component containing an Example component\n// Replace <Example /> with your own code\nvar id=\"id\"+Math.random().toString(16).slice(2);return /*#__PURE__*/_jsx(\"div\",{id:\"patterns\",className:props.pattern,aydi:id,children:/*#__PURE__*/_jsx(\"style\",{children:`\n[aydi=${id}] {\n  --background: ${props.background};\n  --foreground: ${props.foreground};\n  --foreground2: ${props.foreground2};\n  --weight: ${props.weight}px;\n  /* max 10 */\n  /* min 0.2 for iso */\n  --space: ${props.space}px;\n  --blend: screen;\n  --opacity: ${props.opacity};\n}\n\n#patterns[aydi=${id}] {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  display: block;\n  overflow: hidden;\n  opacity: var(--opacity);\n}\n\n.dots#patterns[aydi=${id}] {\n  background-image: radial-gradient(var(--foreground) var(--weight), transparent var(--weight));\n  background-size: var(--space) var(--space);\n}\n\n.dots2#patterns[aydi=${id}] {\n  background-image: radial-gradient(var(--foreground) var(--weight), transparent var(--weight)), radial-gradient(var(--foreground2) var(--weight), transparent var(--weight));\n  background-position: 0 0, var(--space) var(--space);\n  background-size: calc(var(--space) * 2) calc(var(--space) * 2);\n}\n\n.cross#patterns[aydi=${id}] {\n  background: radial-gradient(circle, transparent 20%, var(--background) 20%, var(--background) 80%, transparent 80%, transparent) 0% 0% / calc(var(--space) * 2) calc(var(--space) * 2), radial-gradient(circle, transparent 20%, var(--background) 20%, var(--background) 80%, transparent 80%, transparent) var(--space) var(--space) / calc(var(--space) * 2) calc(var(--space) * 2), linear-gradient(var(--foreground) var(--weight), transparent var(--weight)) 0px calc(0px - (var(--weight) / 2)) / var(--space) var(--space), linear-gradient(90deg, var(--foreground) var(--weight), var(--background) var(--weight)) calc(0px - (var(--weight) / 2)) 0px / var(--space) var(--space) var(--background);\n  background-size: calc(var(--space) * 2) calc(var(--space) * 2), calc(var(--space) * 2) calc(var(--space) * 2);\n  background-color: var(--background);\n}\n\n\n\n.cross2#patterns[aydi=${id}] {\n  background: radial-gradient(circle, transparent 20%, var(--background) 20%, var(--background) 80%, transparent 80%, transparent) 0% 0% / calc(var(--space) * 2) calc(var(--space) * 2), radial-gradient(circle, transparent 20%, var(--background) 20%, var(--background) 80%, transparent 80%, transparent) var(--space) var(--space) / calc(var(--space) * 2) calc(var(--space) * 2), linear-gradient(var(--foreground) var(--weight), transparent var(--weight)) 0px calc(0px - (var(--weight) / 2)) / var(--space) var(--space), linear-gradient(90deg, var(--foreground) var(--weight), var(--background) var(--weight)) calc(0px - (var(--weight) / 2)) 0px / var(--space) var(--space) var(--background);\n  background-size: calc(var(--space) * 2) calc(var(--space) * 2), calc(var(--space) * 2) calc(var(--space) * 2), var(--space) var(--space), var(--space) var(--space);\n  background-color: var(--background);\n}\n\n.diagonal#patterns[aydi=${id}] {\n  background-image: repeating-linear-gradient(45deg, var(--foreground) 0, var(--foreground) var(--weight), transparent 0, transparent 50%);\n  background-size: var(--space) var(--space);\n}\n\n.diagonal2#patterns[aydi=${id}] {\n  background-image: repeating-linear-gradient(-45deg, var(--foreground) 0, var(--foreground) var(--weight), transparent 0, transparent 50%);\n  background-size: var(--space) var(--space);\n}\n\n.isometric#patterns[aydi=${id}]:before,\n.isometric2#patterns[aydi=${id}]:before{\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  display: block;\n  position: absolute;\n  background-image: repeating-linear-gradient(0deg, var(--foreground), var(--foreground) var(--weight), transparent var(--weight), transparent);\nbackground-size: var(--space) var(--space);\ntransform: rotate(150deg) scale(4);\n}\n\n.isometric#patterns[aydi=${id}]:after,\n.isometric2#patterns[aydi=${id}]:after{\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  display: block;\n  position: absolute;\n  background-image: repeating-linear-gradient(0deg, var(--foreground), var(--foreground) var(--weight), transparent var(--weight), transparent);\nbackground-size: var(--space) var(--space);\ntransform: rotate(-150deg) scale(4);\n}\n        `})});}addPropertyControls(Pattern,{pattern:{type:ControlType.Enum,defaultValue:\"isometric\",displaySegmentedControl:false,segmentedControlDirection:\"vertical\",options:[\"dots\",\"dots2\",\"cross\",\"cross2\",\"diagonal\",\"diagonal2\",\"isometric\"],optionTitles:[\"Dots\",\"Dots 2\",\"Cross\",\"Cross 2\",\"Diagonal\",\"Diagonal Reverse\",\"Isometric\"]},weight:{type:ControlType.Number,defaultValue:.2,step:.1},space:{type:ControlType.Number,defaultValue:7,step:1,min:1},opacity:{type:ControlType.Number,defaultValue:1,step:.1,min:0,max:1},background:{type:ControlType.Color,defaultValue:\"000000\",hidden:function(props){if(props.pattern==\"cross\"||props.pattern==\"cross2\"){return false;}else{return true;}}},foreground:{type:ControlType.Color,defaultValue:\"00FFFF\"},foreground2:{title:\" \",type:ControlType.Color,defaultValue:\"FF0000\",hidden:function(props){if(props.pattern!==\"dots2\"){return true;}}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Pattern\",\"slots\":[],\"annotations\":{\"framerDisableUnlink\":\"\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Pattern.map"],"mappings":"iOASG,SAAwB,EAAQ,EAAM,CAEzC,IAAI,EAAG,KAAK,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,MAAM,EAAE,CAAC,MAAoB,GAAK,MAAM,CAAC,GAAG,WAAW,UAAU,EAAM,QAAQ,KAAK,EAAG,SAAsB,EAAK,QAAQ,CAAC,UAAU;QACpK,EAAG;kBACO,EAAM,WAAW;kBACjB,EAAM,WAAW;mBAChB,EAAM,YAAY;cACvB,EAAM,OAAO;;;aAGd,EAAM,MAAM;;eAEV,EAAM,QAAQ;;;iBAGZ,EAAG;;;;;;;;;sBASE,EAAG;;;;;uBAKF,EAAG;;;;;;uBAMH,EAAG;;;;;;;;wBAQF,EAAG;;;;;;0BAMD,EAAG;;;;;2BAKF,EAAG;;;;;2BAKH,EAAG;4BACF,EAAG;;;;;;;;;;;2BAWJ,EAAG;4BACF,EAAG;;;;;;;;;;SAUrB,EAAC,AAAC,EAAC,AAAE,cAAA,AAzFf,GAA2C,IAAoD,CAyFhF,EAAoB,EAAQ,CAAC,QAAQ,CAAC,KAAK,EAAY,KAAK,aAAa,YAAY,yBAAwB,EAAM,0BAA0B,WAAW,QAAQ,CAAC,OAAO,QAAQ,QAAQ,SAAS,WAAW,YAAY,WAAY,EAAC,aAAa,CAAC,OAAO,SAAS,QAAQ,UAAU,WAAW,mBAAmB,WAAY,CAAC,EAAC,OAAO,CAAC,KAAK,EAAY,OAAO,aAAa,GAAG,KAAK,EAAG,EAAC,MAAM,CAAC,KAAK,EAAY,OAAO,aAAa,EAAE,KAAK,EAAE,IAAI,CAAE,EAAC,QAAQ,CAAC,KAAK,EAAY,OAAO,aAAa,EAAE,KAAK,GAAG,IAAI,EAAE,IAAI,CAAE,EAAC,WAAW,CAAC,KAAK,EAAY,MAAM,aAAa,SAAS,OAAO,SAAS,EAAM,CAAwE,QAApE,EAAM,SAAS,SAAS,EAAM,SAAS,SAA2C,CAAC,EAAC,WAAW,CAAC,KAAK,EAAY,MAAM,aAAa,QAAS,EAAC,YAAY,CAAC,MAAM,IAAI,KAAK,EAAY,MAAM,aAAa,SAAS,OAAO,SAAS,EAAM,CAAC,GAAG,EAAM,UAAU,QAAS,OAAO,CAAO,CAAC,CAAC,EAAC"}