{"version":3,"file":"ModulesAnimation.CCkfb5m2.mjs","names":["useLayoutEffect","useEffect","React.useState","e","React","e"],"sources":["https:/framerusercontent.com/modules/5sD1L34Nn4AzaFRyCPrW/BT9HMtTDsUFnXFBXXei7/useIsomorphicLayoutEffect.js","https:/framer.com/m/framer/useIsomorphicLayoutEffect.js@^0.2.0","https:/framerusercontent.com/modules/GBoYA6hnuFwSZZCbht26/cguAGhuQfx1BXbfShe7V/useMeasuredSize.js","https:/framer.com/m/framer/useMeasuredSize.js","https:/framerusercontent.com/modules/TncTT3vuRsYP3s9djgJx/gfhAGsk6ssnFSiLGUK21/ModulesAnimation.js"],"sourcesContent":["import{useLayoutEffect,useEffect}from\"react\";/**\n * Swaps `useLayoutEffect` for `useEffect` on the server to avoid React warnings.\n * NOTE! The effect won't run on the server.\n */ export const useIsomorphicLayoutEffect=typeof document!==\"undefined\"?useLayoutEffect:useEffect;\nexport const __FramerMetadata__ = {\"exports\":{\"useIsomorphicLayoutEffect\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}}}}\n//# sourceMappingURL=./useIsomorphicLayoutEffect.map","/*\n * useIsomorphicLayoutEffect (framer/useIsomorphicLayoutEffect@0.2.0)\n *\n * Learn More: https://www.framer.com/asset-urls\n */\n\nexport * from \"https://framerusercontent.com/modules/5sD1L34Nn4AzaFRyCPrW/BT9HMtTDsUFnXFBXXei7/useIsomorphicLayoutEffect.js\"\n","import*as React from\"react\";import{useIsomorphicLayoutEffect}from\"https://framer.com/m/framer/useIsomorphicLayoutEffect.js@^0.2.0\";let safeResizeObserver=undefined;try{if(typeof window!==undefined){safeResizeObserver=window.ResizeObserver;}}catch(e){// happy linting!\n}class SharedObserver{//@ts-ignore\nupdateResizedElements(entries){for(const entry of entries){const callbackForElement=this.callbacks.get(entry.target);if(callbackForElement)callbackForElement(entry.contentRect);}}observeElementWithCallback(element,callback){if(!this.sharedResizeObserver)return;this.sharedResizeObserver.observe(element);this.callbacks.set(element,callback);}unobserve(element){if(!this.sharedResizeObserver)return;this.sharedResizeObserver.unobserve(element);this.callbacks.delete(element);}constructor(){this.callbacks=new WeakMap();const ResizeObserver1=safeResizeObserver;if(!ResizeObserver1)return;this.sharedResizeObserver=new ResizeObserver1(this.updateResizedElements.bind(this));}}const sharedResizeObserver=new SharedObserver();/**\n * Uses a globally shared resize observer, and returns an updated\n * size object when the element's size changes. This is the recommended way to\n * use a Resize Observer: https://github.com/WICG/resize-observer/issues/59.\n */ export function useMeasuredSize(ref,callback){const[size,setSize]=React.useState(null);function updateSize(newSize){if(!size||newSize.height!==size.height||newSize.width!==size.width){if(callback)callback(newSize);setSize({width:newSize.width,height:newSize.height});}}// On mount, immediately measure and set a size. This will defer paint until\n// no more updates are scheduled. Additionally add our element to the shared\n// ResizeObserver with a callback to perform when the element resizes.\n// Finally, remove the element from the observer when the component is unmounted.\nuseIsomorphicLayoutEffect(()=>{if(!ref.current)return;const{offsetWidth,offsetHeight}=ref.current;// Defer paint until initial size is added.\nupdateSize({width:offsetWidth,height:offsetHeight});// Resize observer will race to add the initial size, but since the size\n// is set above, it won't trigger a render on mount since it should\n// match the measured size. Future executions of the callback will\n// trigger renders if the size changes.\nsharedResizeObserver.observeElementWithCallback(ref.current,updateSize);return()=>{if(!ref.current)return;sharedResizeObserver.unobserve(ref.current);};},[]);return size;}export function useSizeChange(ref,callback){const size=React.useRef(null);const updateSize=React.useCallback(newSize=>{if(!size.current||newSize.height!==size.current.height||newSize.width!==size.current.width){size.current={width:newSize.width,height:newSize.height};if(callback)callback(size.current);}},[callback]);// On mount, immediately measure and set a size. This will defer paint until\n// no more updates are scheduled. Additionally add our element to the shared\n// ResizeObserver with a callback to perform when the element resizes.\n// Finally, remove the element from the observer when the component is unmounted.\nuseIsomorphicLayoutEffect(()=>{if(!ref.current)return;const{offsetWidth,offsetHeight}=ref.current;// Defer paint until initial size is added.\nupdateSize({width:offsetWidth,height:offsetHeight});// Resize observer will race to add the initial size, but since the size\n// is set above, it won't trigger a render on mount since it should\n// match the measured size. Future executions of the callback will\n// trigger renders if the size changes.\nsharedResizeObserver.observeElementWithCallback(ref.current,updateSize);return()=>{if(!ref.current)return;sharedResizeObserver.unobserve(ref.current);};},[callback]);return null;}\nexport const __FramerMetadata__ = {\"exports\":{\"useSizeChange\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"useMeasuredSize\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}}}}\n//# sourceMappingURL=./useMeasuredSize.map","/*\n * useMeasuredSize (framer/useMeasuredSize@0.13.0)\n *\n * Learn More: https://www.framer.com/asset-urls\n */\n\nexport * from \"https://framerusercontent.com/modules/GBoYA6hnuFwSZZCbht26/cguAGhuQfx1BXbfShe7V/useMeasuredSize.js\"\n","// Get Started: https://www.framer.com/developers\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useMeasuredSize}from\"https://framer.com/m/framer/useMeasuredSize.js\";import{motion}from\"framer-motion\";import React from\"react\";/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export function CornerCube3DSide(props){return /*#__PURE__*/_jsx(motion.div,{className:`cube-side cube-side-${props.side}`,children:props.children});}/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export function CornerCube3D(props){const contentFor=React.useCallback(side=>{if(Array.isArray(props.children)){return props.children.filter(e=>{if(e?.props[\"data-for\"]===side){return e;}});}else if(props.children!==null){const e=props.children;if(e?.props[\"data-for\"]===side){return e;}}},[props,props.children]);return /*#__PURE__*/_jsxs(React.Fragment,{children:[/*#__PURE__*/_jsxs(motion.div,{className:`cube ${props.className}`,onClick:props.onClick,children:[/*#__PURE__*/_jsx(CornerCube3DSide,{side:\"front\",children:contentFor(\"front\")}),/*#__PURE__*/_jsx(CornerCube3DSide,{side:\"back\",children:contentFor(\"back\")}),/*#__PURE__*/_jsx(CornerCube3DSide,{side:\"top\",children:contentFor(\"top\")}),/*#__PURE__*/_jsx(CornerCube3DSide,{side:\"bottom\",children:contentFor(\"bottom\")}),/*#__PURE__*/_jsx(CornerCube3DSide,{side:\"left\",children:contentFor(\"left\")}),/*#__PURE__*/_jsx(CornerCube3DSide,{side:\"right\",children:contentFor(\"right\")})]}),/*#__PURE__*/_jsx(\"style\",{type:\"text/css\",children:props.css})]});}/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export function ModulesAnimation(props){const{tint,archPercent,dataPercent,procPercent,sysPercent,rotation,aspectRatio,sceneHeightMax,textColor,gridColor,backgroundColor,alignItems}=props;const refElem=React.useRef(null);const size=useMeasuredSize(refElem);const sceneWidth=size?.width??600;const sceneWidthMax=React.useMemo(()=>{return sceneHeightMax/aspectRatio*1.25;},[aspectRatio,sceneHeightMax]);const effectiveSceneWidth=React.useMemo(()=>{return sceneWidth?Math.min(sceneWidth,sceneWidthMax):600;},[sceneWidth,sceneWidthMax]);const effectiveSceneHeight=React.useMemo(()=>{return effectiveSceneWidth*aspectRatio;},[effectiveSceneWidth,aspectRatio]);const mainStyle=React.useMemo(()=>{return`\n            .cubes-wrapper {\n                --grid-color: ${gridColor};\n                --border-width: max(1px, calc(var(--scene-height) / 300));\n                --outline-width: calc(var(--border-width) * 1.25);\n                --rotation: 45deg;\n                position: relative;\n                width: calc(var(--scene-width));\n                height: calc(var(--scene-height));\n                overflow: hidden;\n                transform-style: preserve-3d;\n                backface-visibility: visible;\n                pointer-events: none;\n\n                font-family: var(--framer-blockquote-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif));\n                color: ${textColor};\n            }\n\n            .cubes-scene, .background-scene {\n                --height: var(--scene-height);\n                --width: var(--scene-height);\n                --base-size: calc(var(--scene-height) / 2);\n                --base-height: calc(var(--scene-height) * 0.2);\n                --cube-size: calc(var(--scene-height) * 0.165);\n                font-size: calc(var(--base-size) * 0.08);\n                position: absolute;\n                left: calc((var(--scene-width) - var(--width)) / 2);\n                top: calc((var(--scene-height) - var(--height)) / 2);\n                width: var(--width);\n                height: var(--height);\n                transform-style: preserve-3d;\n                backface-visibility: visible;\n                perspective: calc(var(--scene-height) * 3);\n                perspective-origin: center calc(${effectiveSceneHeight}px / 4 * -3);\n                pointer-events: none;\n            }\n\n            .cubes-scene {\n                opacity: 0.8;\n            }\n\n            .cubes {\n                width: var(--base-size);\n                height: calc(var(--base-height) + var(--cube-size) / 2);\n                transform-style: preserve-3d;\n                backface-visibility: visible;\n                rotate: y var(--rotation);\n                translate: calc(var(--base-size)) calc(var(--base-height) * 3) calc(var(--base-size) / -2);\n                transition: rotate 1s ease;\n                transform-origin: 0 0 calc(var(--base-size) / -2);\n                --color: #c5b4f8;\n                pointer-events: none;\n            }\n\n            .cube {\n                outline-offset: calc(var(--outline-width) * -1) !important;\n                transition: \n                    all 0.5s ease-out;\n            }\n\n            .cube:hover .cube-side {\n                outline: var(--outline-width) solid ${textColor};\n            }\n\n            .cube-side {\n                --background-deg: -60deg;\n                position: absolute;\n                transform-style: preserve-3d;\n                backface-visibility: visible;\n                background: linear-gradient(var(--background-deg), color-mix(in srgb, var(--color) 80%, #FFFFFF 20%) 0%, color-mix(in srgb, var(--color) 20%, ${backgroundColor} 80%) 100%);\n                box-shadow: inset 0px 0px 0.5px var(--border-width) var(--color);\n                box-sizing: border-box;\n                outline: inherit;\n                outline-offset: inherit;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                cursor: pointer;\n                pointer-events: all;\n                transition: \n                    height 0.5s ease-out, \n                    translate 0.5s ease-out, \n                    outline 0.5s ease-out;\n            }\n\n            .cube-side label {\n                pointer-events: none;\n                user-select: none;\n            }\n\n            .cube-side-front {\n                --background-deg: 60deg;\n                left: 0;\n                top: 0;\n                width: var(--width);\n                height: var(--height);\n                transform-origin: center center;\n                rotate: y 0deg;\n                outline: var(--outline-width) solid #ffffff00;\n            }\n\n            .cube-side-back {\n                --background-deg: 60deg;\n                left: 0;\n                top: 0;\n                width: var(--width);\n                height: var(--height);\n                transform-origin: center center;\n                rotate: y 180deg;\n                translate: 0 0 calc(-1 * var(--depth));\n                outline: var(--outline-width) solid #ffffff00;\n            }\n\n            .cube-side-bottom {\n                --background-deg: 60deg;\n                left: 0;\n                top: 0;\n                width: var(--width);\n                height: var(--depth);\n                transform-origin: bottom left;\n                rotate: x 90deg;\n                translate: 0 calc(-1 * var(--depth) + var(--height)) 0;\n                outline: var(--outline-width) solid #ffffff00;\n            }\n\n            .cube-side-top {\n                --background-deg: 60deg;\n                left: 0;\n                top: 0;\n                width: var(--width);\n                height: var(--depth);\n                transform-origin: bottom left;\n                rotate: x 90deg;\n                translate: 0 calc(-1 * var(--depth)) 0;\n                outline: var(--outline-width) solid #ffffff00;\n            }\n\n            .cube-side-right {\n                --background-deg: 60deg;\n                left: 0;\n                top: 0;\n                width: var(--depth);\n                height: var(--height);\n                transform-origin: bottom right;\n                rotate: y 90deg;\n                translate: 0 0 calc(-1 * var(--depth));\n                outline: var(--outline-width) solid #ffffff00;\n            }\n\n            .cube-side-left {\n                --background-deg: 60deg;\n                left: 0;\n                top: 0;\n                width: var(--depth);\n                height: var(--height);\n                transform-origin: top left;\n                rotate: y -90deg;\n                translate: 0 0 calc(-1 * var(--depth));\n                outline: var(--outline-width) solid #ffffff00;\n            }\n\n            .background {\n                width: var(--scene-width);\n                height: var(--scene-height);\n                mask-image: radial-gradient(ellipse, black 25%, rgba(0, 0, 0, 0) 66%);\n            }\n\n            .background-wrapper {\n                --background-size: calc(var(--base-size) * 4);\n                position: absolute;\n                top: 0;\n                left: 0;\n                transform-origin: calc(var(--background-size) / 4 * 3) calc(var(--background-size) / 4 * 3) calc(var(--base-size) * 2);\n                rotate: x -90deg;\n                translate: calc(var(--background-size) / -4) calc(var(--background-size) / -4) 0;\n            }\n\n            .background-grid {\n                opacity: 20%;\n                width: var(--background-size);\n                height: var(--background-size);\n                transform-origin: center center;\n                rotate: z var(--rotation);\n                transition: rotate 1s ease;\n                background-size: calc(var(--base-size) / 10) calc(var(--base-size) / 10);\n                background-image:\n                    linear-gradient(to right, var(--grid-color) 1px, transparent 1px),\n                    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);\n            }\n        `;},[aspectRatio,textColor,gridColor,backgroundColor,effectiveSceneHeight]);return /*#__PURE__*/_jsxs(motion.div,{style:{width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:alignItems,marginTop:\"-7.5%\",marginBottom:\"-2.5%\"},ref:refElem,children:[/*#__PURE__*/_jsxs(motion.div,{className:\"cubes-wrapper\",style:{\"--rotation\":`${rotation}deg`,\"--scene-width\":`${effectiveSceneWidth}px`,\"--scene-height\":`${effectiveSceneHeight}px`},children:[/*#__PURE__*/_jsx(motion.div,{className:\"background\",children:/*#__PURE__*/_jsx(motion.div,{className:\"background-scene\",children:/*#__PURE__*/_jsx(motion.div,{className:\"background-wrapper\",children:/*#__PURE__*/_jsx(motion.div,{className:\"background-grid\"})})})}),/*#__PURE__*/_jsx(motion.div,{className:\"cubes-scene\",children:/*#__PURE__*/_jsxs(motion.div,{className:\"cubes\",children:[/*#__PURE__*/_jsxs(CornerCube3D,{className:\"cube-base\",onClick:props.onClickBusinessConfig,css:`\n                            .cube-base {\n                                --width: var(--base-size);\n                                --height: var(--base-height);\n                                --depth: var(--base-size);\n                                translate: -50% 0;\n                                --color: #39D2E4;\n                                cursor: pointer;\n                                transform-style: preserve-3d;\n                                backface-visibility: visible;\n                            }\n\n                            .cube-base label {\n                                width: 100%;\n                                height: 100%;\n                                font-size: calc(var(--base-height) / 5);\n                                display: flex;\n                                align-items: flex-end;\n                                justify-content: flex-end;\n                                padding: 2.5%;\n                            }\n\n                            .cube-base label.bold {\n                                font-weight: 800;\n                            }\n\n                            .cube-base label.align-left {\n                                align-items: flex-end;\n                                justify-content: flex-start;\n                                text-align: left;\n                            }\n\n                            .cube-base label.align-right {\n                                align-items: flex-end;\n                                justify-content: flex-end;\n                                text-align: right;\n                            }\n                        `,children:[/*#__PURE__*/_jsxs(\"label\",{\"data-for\":\"front\",className:\"bold align-right\",children:[\"Business\",/*#__PURE__*/_jsx(\"br\",{}),\"Configuration\"]}),/*#__PURE__*/_jsxs(\"label\",{\"data-for\":\"back\",className:\"bold align-right\",children:[\"Business\",/*#__PURE__*/_jsx(\"br\",{}),\"Configuration\"]}),/*#__PURE__*/_jsxs(\"label\",{\"data-for\":\"left\",className:\"align-left\",children:[\"Align technology\",/*#__PURE__*/_jsx(\"br\",{}),\"with strategy\"]}),/*#__PURE__*/_jsxs(\"label\",{\"data-for\":\"right\",className:\"align-left\",children:[\"Align technology\",/*#__PURE__*/_jsx(\"br\",{}),\"with strategy\"]})]}),/*#__PURE__*/_jsxs(CornerCube3D,{className:\"cube-base-2\",onClick:props.onClickTechFoundation,css:`\n                            .cube-base-2 {\n                                --width: var(--base-size);\n                                --height: calc(var(--base-height) / 4 * 3);\n                                --depth: var(--base-size);\n                                translate: -50% var(--base-height);\n                                --color: #3AC7E5;\n                                cursor: pointer;\n                                transform-style: preserve-3d;\n                                backface-visibility: visible;\n                            }\n\n                            .cube-base-2 label {\n                                width: 100%;\n                                height: 100%;\n                                font-size: calc(var(--base-height) / 5);\n                                display: flex;\n                                align-items: flex-end;\n                                justify-content: flex-end;\n                                padding: 2.5%;\n                            }\n\n                            .cube-base-2 label.bold {\n                                font-weight: 800;\n                            }\n\n                            .cube-base-2 label.align-left {\n                                align-items: flex-end;\n                                justify-content: flex-start;\n                                text-align: left;\n                            }\n\n                            .cube-base-2 label.align-right {\n                                align-items: flex-end;\n                                justify-content: flex-end;\n                                text-align: right;\n                            }\n                        `,children:[/*#__PURE__*/_jsxs(\"label\",{\"data-for\":\"front\",className:\"bold align-left\",children:[\"Technical\",/*#__PURE__*/_jsx(\"br\",{}),\"Configuration\"]}),/*#__PURE__*/_jsxs(\"label\",{\"data-for\":\"back\",className:\"bold align-left\",children:[\"Technical\",/*#__PURE__*/_jsx(\"br\",{}),\"Configuration\"]}),/*#__PURE__*/_jsxs(\"label\",{\"data-for\":\"left\",className:\"align-right\",children:[\"Technology\",/*#__PURE__*/_jsx(\"br\",{}),\"for your needs\"]}),/*#__PURE__*/_jsxs(\"label\",{\"data-for\":\"right\",className:\"align-right\",children:[\"Technology\",/*#__PURE__*/_jsx(\"br\",{}),\"for your needs\"]})]}),/*#__PURE__*/_jsxs(CornerCube3D,{className:\"cube-1\",onClick:props.onClickArchitecture,css:`\n                            .cube-1 {\n                                --width: var(--cube-size);\n                                --height: calc(var(--cube-size) * 2.5 * ${(archPercent*.6+40)??40} / 100);\n                                --depth: var(--cube-size);\n                                translate: calc(var(--base-size) / -2 - 2px) calc(var(--height) * -1 + var(--cube-size) / 2) 2px;\n                                --color: #38E8E3;\n                                cursor: pointer;\n                                transform-style: preserve-3d;\n                                backface-visibility: visible;\n                            }\n\n                            .cube-1 .cube-side-right, .cube-1 .cube-side-back {\n                                height: calc(var(--height) - var(--cube-size) / 2);\n                            }\n\n                            .cube-1 label {\n                                width: 100%;\n                                height: 100%;\n                                font-size: calc(var(--base-height) / 10);\n                                display: flex;\n                                align-items: center;\n                                justify-content: center;\n                                padding: 2.5%;\n                                font-weight: 800;\n                            }\n                        `,children:[/*#__PURE__*/_jsx(\"label\",{\"data-for\":\"front\",children:\"Architecture\"}),/*#__PURE__*/_jsx(\"label\",{\"data-for\":\"back\",children:\"Architecture\"}),/*#__PURE__*/_jsx(\"label\",{\"data-for\":\"left\",children:\"Architecture\"}),/*#__PURE__*/_jsx(\"label\",{\"data-for\":\"right\",children:\"Architecture\"}),/*#__PURE__*/_jsx(\"label\",{\"data-for\":\"top\",children:\"Architecture\"})]}),/*#__PURE__*/_jsxs(CornerCube3D,{className:\"cube-2\",onClick:props.onClickData,css:`\n                            .cube-2 {\n                                --width: var(--cube-size);\n                                --height: calc(var(--cube-size) * 2.5 * ${(dataPercent*.6+40)??40} / 100);\n                                --depth: var(--cube-size);\n                                translate: calc(var(--base-size) / 2 + 2px - var(--cube-size)) calc(var(--height) * -1 + var(--cube-size) / 2) 2px;\n                                --color: #3A66F2;\n                                cursor: pointer;\n                                transform-style: preserve-3d;\n                                backface-visibility: visible;\n                            }\n\n                            .cube-2 .cube-side-left, .cube-2 .cube-side-back {\n                                height: calc(var(--height) - var(--cube-size) / 2);\n                            }\n\n                            .cube-2 label {\n                                width: 100%;\n                                height: 100%;\n                                font-size: calc(var(--base-height) / 8);\n                                display: flex;\n                                align-items: center;\n                                justify-content: center;\n                                padding: 2.5%;\n                                font-weight: 800;\n                            }\n                        `,children:[/*#__PURE__*/_jsx(\"label\",{\"data-for\":\"front\",children:\"Data\"}),/*#__PURE__*/_jsx(\"label\",{\"data-for\":\"back\",children:\"Data\"}),/*#__PURE__*/_jsx(\"label\",{\"data-for\":\"left\",children:\"Data\"}),/*#__PURE__*/_jsx(\"label\",{\"data-for\":\"right\",children:\"Data\"}),/*#__PURE__*/_jsx(\"label\",{\"data-for\":\"top\",children:\"Data\"})]}),/*#__PURE__*/_jsxs(CornerCube3D,{className:\"cube-3\",onClick:props.onClickProcess,css:`\n                            .cube-3 {\n                                --width: var(--cube-size);\n                                --height: calc(var(--cube-size) * 2.5 * ${(procPercent*.6+40)??40} / 100);\n                                --depth: var(--cube-size);\n                                translate: calc(var(--base-size) / -2 - 2px) calc(var(--height) * -1 + var(--cube-size) / 2) calc(var(--base-size) * -1 - 2px + var(--cube-size));\n                                --color: #3BA4F0;\n                                cursor: pointer;\n                                transform-style: preserve-3d;\n                                backface-visibility: visible;\n                            }\n\n                            .cube-3 .cube-side-right, .cube-3 .cube-side-front {\n                                height: calc(var(--height) - var(--cube-size) / 2);\n                            }\n\n                            .cube-3 label {\n                                width: 100%;\n                                height: 100%;\n                                font-size: calc(var(--base-height) / 8);\n                                display: flex;\n                                align-items: center;\n                                justify-content: center;\n                                padding: 2.5%;\n                                font-weight: 800;\n                            }\n                        `,children:[/*#__PURE__*/_jsx(\"label\",{\"data-for\":\"front\",children:\"Process\"}),/*#__PURE__*/_jsx(\"label\",{\"data-for\":\"back\",children:\"Process\"}),/*#__PURE__*/_jsx(\"label\",{\"data-for\":\"left\",children:\"Process\"}),/*#__PURE__*/_jsx(\"label\",{\"data-for\":\"right\",children:\"Process\"}),/*#__PURE__*/_jsx(\"label\",{\"data-for\":\"top\",children:\"Process\"})]}),/*#__PURE__*/_jsxs(CornerCube3D,{className:\"cube-4\",onClick:props.onClickSystems,css:`\n                            .cube-4 {\n                                --width: var(--cube-size);\n                                --height: calc(var(--cube-size) * 2.5 * ${(sysPercent*.6+40)??40} / 100);\n                                --depth: var(--cube-size);\n                                translate: calc(var(--base-size) / 2 + 2px - var(--cube-size)) calc(var(--height) * -1 + var(--cube-size) / 2) calc(var(--base-size) * -1 - 2px + var(--cube-size));\n                                --color: #6E6AEE;\n                                cursor: pointer;\n                                transform-style: preserve-3d;\n                                backface-visibility: visible;\n                            }\n\n                            .cube-4 .cube-side-left, .cube-4 .cube-side-front {\n                                height: calc(var(--height) - var(--cube-size) / 2);\n                            }\n\n                            .cube-4 label {\n                                width: 100%;\n                                height: 100%;\n                                font-size: calc(var(--base-height) / 8);\n                                display: flex;\n                                align-items: center;\n                                justify-content: center;\n                                padding: 2.5%;\n                                font-weight: 800;\n                            }\n                        `,children:[/*#__PURE__*/_jsx(\"label\",{\"data-for\":\"front\",children:\"Systems\"}),/*#__PURE__*/_jsx(\"label\",{\"data-for\":\"back\",children:\"Systems\"}),/*#__PURE__*/_jsx(\"label\",{\"data-for\":\"left\",children:\"Systems\"}),/*#__PURE__*/_jsx(\"label\",{\"data-for\":\"right\",children:\"Systems\"}),/*#__PURE__*/_jsx(\"label\",{\"data-for\":\"top\",children:\"Systems\"})]})]})})]}),/*#__PURE__*/_jsx(\"style\",{children:mainStyle})]});}addPropertyControls(ModulesAnimation,{textColor:{title:\"Text Color\",type:ControlType.Color,defaultValue:\"#ffffff\"},gridColor:{title:\"Grid Color\",type:ControlType.Color,defaultValue:\"#ffffff\"},backgroundColor:{title:\"Background Color\",type:ControlType.Color,defaultValue:\"#ffffff\"},rotation:{type:ControlType.Number,defaultValue:45,min:-360,max:360,unit:\"deg\",step:.1,displayStepper:true},aspectRatio:{type:ControlType.Number,defaultValue:4/5,min:0,max:10,unit:\"\",step:.001,displayStepper:true},sceneHeightMax:{type:ControlType.Number,defaultValue:352,min:0,max:9999,unit:\"px\",step:.1,displayStepper:true},alignItems:{type:ControlType.Enum,defaultValue:\"center\",displaySegmentedControl:true,segmentedControlDirection:\"vertical\",options:[\"center\",\"start\",\"end\"],optionTitles:[\"Center\",\"Start\",\"End\"]},dataPercent:{type:ControlType.Number,defaultValue:0,min:0,max:100,unit:\"%\",step:.1,displayStepper:true},procPercent:{type:ControlType.Number,defaultValue:0,min:0,max:100,unit:\"%\",step:.1,displayStepper:true},sysPercent:{type:ControlType.Number,defaultValue:0,min:0,max:100,unit:\"%\",step:.1,displayStepper:true},archPercent:{type:ControlType.Number,defaultValue:0,min:0,max:100,unit:\"%\",step:.1,displayStepper:true},onClickBusinessConfig:{type:ControlType.EventHandler},onClickTechFoundation:{type:ControlType.EventHandler},onClickData:{type:ControlType.EventHandler},onClickSystems:{type:ControlType.EventHandler},onClickProcess:{type:ControlType.EventHandler},onClickArchitecture:{type:ControlType.EventHandler}});\nexport const __FramerMetadata__ = {\"exports\":{\"CornerCube3D\":{\"type\":\"reactComponent\",\"name\":\"CornerCube3D\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any\",\"framerSupportedLayoutWidth\":\"any\"}},\"CornerCube3DSide\":{\"type\":\"reactComponent\",\"name\":\"CornerCube3DSide\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any\"}},\"ModulesAnimation\":{\"type\":\"reactComponent\",\"name\":\"ModulesAnimation\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ModulesAnimation.map"],"mappings":"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"}