{"version":3,"file":"Pattern.5ryeuUqO.mjs","names":[],"sources":["https:/framerusercontent.com/modules/10RVm2iJ7fT4ZsQMFlbp/7xCwilJoRM24EdBZrFmP/Pattern.js"],"sourcesContent":["import{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                  --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                .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);\n                  background-size: var(--space) var(--space);\n                  transform: 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);\n                  background-size: var(--space) var(--space);\n                  transform: rotate(-150deg) scale(4);\n                }\n            `})});}Pattern.displayName=\"Pattern Generator\";addPropertyControls(Pattern,{pattern:{type:ControlType.Enum,defaultValue:\"isometric\",displaySegmentedControl:false,segmentedControlDirection:\"vertical\",options:[\"dots\",\"cross\",\"cross2\",\"diagonal\",\"diagonal2\",\"isometric\"],optionTitles:[\"Dots\",\"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\":{\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerDisableUnlink\":\"\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Pattern.map"],"mappings":"uJAOG,SAAwB,EAAQ,EAAM,CAEzC,IAAI,EAAG,KAAK,KAAK,OAAO,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,OAAoB,EAAK,MAAM,CAAC,GAAG,WAAW,UAAU,EAAM,QAAQ,KAAK,EAAG,SAAsB,EAAK,QAAQ,CAAC,SAAS;wBACnJ,EAAG;kCACO,EAAM,WAAW;kCACjB,EAAM,WAAW;mCAChB,EAAM,YAAY;8BACvB,EAAM,OAAO;6BACd,EAAM,MAAM;;+BAEV,EAAM,QAAQ;;;iCAGZ,EAAG;;;;;;;;;sCASE,EAAG;;;;;uCAKF,EAAG;;;;;;uCAMH,EAAG;;;;;;wCAMF,EAAG;;;;;;0CAMD,EAAG;;;;;2CAKF,EAAG;;;;;2CAKH,EAAG;4CACF,EAAG;;;;;;;;;;;2CAWJ,EAAG;4CACF,EAAG;;;;;;;;;;aAUlC,CAAC,CAAC,CAAC,CAAE,iBArFwB,IAAoD,EAqF3E,EAAQ,YAAY,oBAAoB,EAAoB,EAAQ,CAAC,QAAQ,CAAC,KAAK,EAAY,KAAK,aAAa,YAAY,wBAAwB,GAAM,0BAA0B,WAAW,QAAQ,CAAC,OAAO,QAAQ,SAAS,WAAW,YAAY,WAAW,EAAE,aAAa,CAAC,OAAO,QAAQ,UAAU,WAAW,mBAAmB,WAAW,CAAC,EAAE,OAAO,CAAC,KAAK,EAAY,OAAO,aAAa,GAAG,KAAK,EAAE,EAAE,MAAM,CAAC,KAAK,EAAY,OAAO,aAAa,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAY,OAAO,aAAa,EAAE,KAAK,GAAG,IAAI,EAAE,IAAI,CAAC,EAAE,WAAW,CAAC,KAAK,EAAY,MAAM,aAAa,SAAS,OAAO,SAAS,EAAM,CAAwE,MAAvE,EAAG,EAAM,SAAS,SAAS,EAAM,SAAS,SAA0C,CAAC,EAAE,WAAW,CAAC,KAAK,EAAY,MAAM,aAAa,QAAQ,EAAE,YAAY,CAAC,MAAM,IAAI,KAAK,EAAY,MAAM,aAAa,SAAS,OAAO,SAAS,EAAM,CAAC,GAAG,EAAM,UAAU,QAAS,MAAO,EAAM,CAAC,CAAC,CAAC"}