@e1011/es-kit 1.0.214 → 1.0.218

package/dist/ui/esm/src/core/ui/index.js

@@ -1,2 +1,2 @@
-export{calculateColors,calculatePercColor,convertHex,convertRGB,defaultFontSize,pxToRem,resolveStyleValue,setDefaultFontSize,toHex}from"./utils/style.js";export{LayoutBox}from"./components/container/LayoutBox.js";export{LayoutDirection}from"./components/container/layoutBox.types.js";export{Flex,FlexTight,FlexTightStyled,FlexWrapper}from"./components/container/Flex.js";export{Placeholder}from"./components/container/Placeholder.js";export{CollapsibleContainer}from"./components/container/CollapsibleContainer.js";export{ResizableContainer}from"./components/container/ResizableContainer.js";export{Field,FieldWrapper,Select,setIconColor,setIconComponent}from"./components/field/Field.js";export{DividerHorizontal,DividerLine,DividerVertical}from"./components/dividers/DividerLine.js";export{IconBase}from"./components/icon/IconBase.js";export{Icon}from"./components/icon/Icon.js";export{ESIcon,ESIconBase}from"./components/icon/IconWC.js";export{FlowLayout}from"./components/molecules/layouts/FlowLayout.js";
+export{calculateColors,calculatePercColor,convertHex,convertRGB,defaultFontSize,pxToRem,resolveStyleValue,setDefaultFontSize,toHex}from"./utils/style.js";export{LayoutBox}from"./components/container/layoutBox/LayoutBox.js";export{LayoutDirection}from"./components/container/layoutBox/layoutBox.types.js";export{LazyComponent,PendingBoundary,createLazyModule,createLazyModuleWithStore,wrapPromise}from"./components/container/lazyComponent/LazyComponent.js";export{Flex,FlexTight,FlexTightStyled,FlexWrapper}from"./components/container/Flex.js";export{Placeholder}from"./components/container/Placeholder.js";export{CollapsibleContainer}from"./components/container/CollapsibleContainer.js";export{ResizableContainer}from"./components/container/ResizableContainer.js";export{DefaultErrorComponent,ErrorBoundary}from"./components/error/ErrorBoundary.js";export{Field,FieldWrapper,Select,setIconColor,setIconComponent}from"./components/field/Field.js";export{DividerHorizontal,DividerLine,DividerVertical}from"./components/dividers/DividerLine.js";export{IconBase}from"./components/icon/IconBase.js";export{Icon}from"./components/icon/Icon.js";export{ESIcon,ESIconBase}from"./components/icon/IconWC.js";export{FlowLayout}from"./components/molecules/layouts/FlowLayout.js";
 //# sourceMappingURL=index.js.map

package/dist/ui/index.css

@@ -1,4 +1,4 @@
-.layoutBox-module_layout-box__faPND {
+.layoutBox-module_layout-box__ZIID8 {
   display: flex;
   position: relative;
   flex-direction: row;
@@ -22,6 +22,88 @@
   min-height: 0;
   border-radius: initial;
 }
+.icon-module_icon-base-parent__nOMvW {
+  line-height: 1px !important;
+}
+
+.icon-module_icon-base__S0tHf {
+  min-width: var(--min-width);
+  min-height: var(--min-height);
+  width: var(--width) !important;
+  height: var(--height) !important;
+  line-height: 1px !important;
+  background-color: var(--icon-color);
+  color: var(--icon-content-color);
+  background-repeat: no-repeat;
+  mask-image: var(--icon-url);
+  -webkit-mask-image: var(--icon-url);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  mask-position: center;
+  -webkit-mask-position: center;
+  display: inline-block;
+  will-change: transform;
+  transform: translate3d(0, 0, 0);
+}
+.icon-module_icon-base__S0tHf svg {
+  fill: var(--icon-content-color);
+  width: var(--height);
+  height: var(--width);
+}
+.errorBoundary-module_errorBoundary__gk9ps {
+  background: #EFEFEF;
+  width: 100%;
+  height: 100%;
+}
+
+.errorBoundary-module_StyledIcon__IYHiU {
+  margin-right: 10px;
+}
+.lazyComponent-module_loader__brMEW {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  display: grid;
+  place-items: center;
+}
+.lazyComponent-module_loader__brMEW .spinner {
+  animation: rotate 2s linear infinite;
+  z-index: 2;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -25px 0 0 -25px;
+  width: 50px;
+  height: 50px;
+  display: grid;
+  place-items: center;
+}
+.lazyComponent-module_loader__brMEW .spinner .path {
+  stroke: hsl(210, 92%, 44%);
+  stroke-linecap: round;
+  animation: dash 1.5s ease-in-out infinite;
+}
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
 .CollapsibleContainer-module_collapsible-container__u0Jmm {
   transform-origin: 0% 0%;
   opacity: 0;
@@ -74,36 +156,6 @@
   height: var(--height);
   margin: var(--margin);
 }
-.icon-module_icon-base-parent__nOMvW {
-  line-height: 1px !important;
-}
-
-.icon-module_icon-base__S0tHf {
-  min-width: var(--min-width);
-  min-height: var(--min-height);
-  width: var(--width) !important;
-  height: var(--height) !important;
-  line-height: 1px !important;
-  background-color: var(--icon-color);
-  color: var(--icon-content-color);
-  background-repeat: no-repeat;
-  mask-image: var(--icon-url);
-  -webkit-mask-image: var(--icon-url);
-  mask-repeat: no-repeat;
-  -webkit-mask-repeat: no-repeat;
-  mask-size: contain;
-  -webkit-mask-size: contain;
-  mask-position: center;
-  -webkit-mask-position: center;
-  display: inline-block;
-  will-change: transform;
-  transform: translate3d(0, 0, 0);
-}
-.icon-module_icon-base__S0tHf svg {
-  fill: var(--icon-content-color);
-  width: var(--height);
-  height: var(--width);
-}
 .flowLayout-module_flowLayout__VHpnY {
   overflow: auto;
 }

package/dist/ui/src/core/ui/components/container/CollapsibleContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleContainer.js","sources":["../../../../../../../src/core/ui/components/container/CollapsibleContainer.tsx"],"sourcesContent":["import { FC, useRef, useState, memo, ReactNode,\n  useEffect, useLayoutEffect, useMemo, CSSProperties, PropsWithChildren } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\n\nimport classes from './CollapsibleContainer.module.scss'\nimport { LayoutBoxProps } from './layoutBox.types'\n\n\n/**\n * Mapping of element property names for calculating dimensions.\n */\nconst elementPropNameMap: Record<string, string> = {\n  width: 'scrollWidth',\n  height: 'scrollHeight',\n}\n\n/**\n * Props for the CollapsibleContainer component.\n */\nexport type CollapsibleContainerProps = PropsWithChildren & Omit<LayoutBoxProps, 'ref'> & {\n  collapsed?: boolean\n  collapseHandler?: (collapsed: boolean) => void\n  children?: ReactNode\n  className?: string\n  horizontal?: boolean\n} & CSSProperties\n\n/**\n * CollapsibleContainer component.\n *\n * @type {React.FC<CollapsibleContainerProps>}\n * @returns {React.ReactElement} The CollapsibleContainer.\n */\nexport const CollapsibleContainer: FC<CollapsibleContainerProps> = memo(({\n  collapsed = false, collapseHandler, children, horizontal = false, className = '', id, ...props\n}: CollapsibleContainerProps) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [contentProp, setContentProp] = useState(0)\n\n  const { dataProps, restProps: style } = useParseProps(props)\n\n  const vertical = !horizontal\n\n  useEffect(() => {\n    collapseHandler?.(collapsed)\n  }, [collapseHandler, collapsed])\n\n  useLayoutEffect(() => {\n    if (containerRef?.current) {\n      const propName = vertical ? 'height' : 'width'\n\n      // TODO test with requestAnimationFrame\n      setTimeout(() => {\n        if (containerRef?.current) {\n          setContentProp((containerRef.current as any)[elementPropNameMap[propName]])\n        }\n      }, 100)\n    }\n  }, [containerRef, vertical])\n\n  const styleProps: CSSProperties = useMemo(() => ({\n    '--prop-name': vertical ? 'height' : 'width',\n    '--prop-max-name': vertical ? 'max-height' : 'max-width',\n    '--prop-value': `${contentProp}px`,\n    ...style,\n  } as CSSProperties), [vertical, style, contentProp])\n\n  const classNames = useMemo(() => {\n    const classNames = [vertical ? classes.vertical : classes.horizontal]\n\n    if (collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n      classNames.push(classes.collapsed)\n    }\n    if (!collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n      classNames.push(classes.expanded)\n    }\n    return classNames.join(' ')\n  }, [collapsed, contentProp, vertical])\n\n  return (\n    <div\n      id={`${(typeof id !== 'undefined' && id) || id}`}\n      className={`${classes['collapsible-container']} ${classNames} ${className} `}\n      ref={containerRef}\n      style={styleProps}\n      {...dataProps}\n      data-testid={dataProps.dataTestId || dataProps['data-testid'] || id}\n    >\n      {children}\n    </div>\n  )\n})\n\nCollapsibleContainer.displayName = 'CollapsibleContainer'\n"],"names":["elementPropNameMap","width","height","CollapsibleContainer","memo","_ref","collapsed","collapseHandler","children","horizontal","className","id","props","containerRef","useRef","contentProp","setContentProp","useState","dataProps","restProps","style","useParseProps","vertical","useEffect","useLayoutEffect","current","propName","setTimeout","styleProps","useMemo","concat","classNames","classes","push","expanded","join","React","createElement","_extends","ref","dataTestId","displayName"],"mappings":"iSAYA,MAAMA,EAA6C,CACjDC,MAAO,cACPC,OAAQ,gBAoBGC,EAAsDC,EAAIA,MAACC,IAEvC,IAFwCC,UACvEA,GAAY,EAAKC,gBAAEA,EAAeC,SAAEA,EAAQC,WAAEA,GAAa,EAAKC,UAAEA,EAAY,GAAEC,GAAEA,KAAOC,GAC/DP,EAC1B,MAAMQ,EAAeC,SAAuB,OACrCC,EAAaC,GAAkBC,EAAQA,SAAC,IAEzCC,UAAEA,EAAWC,UAAWC,GAAUC,EAAAA,cAAcT,GAEhDU,GAAYb,EAElBc,EAAAA,WAAU,KACRhB,SAAAA,EAAkBD,EAAU,GAC3B,CAACC,EAAiBD,IAErBkB,EAAAA,iBAAgB,KACd,GAAIX,SAAAA,EAAcY,QAAS,CACzB,MAAMC,EAAWJ,EAAW,SAAW,QAGvCK,YAAW,KACLd,SAAAA,EAAcY,SAChBT,EAAgBH,EAAaY,QAAgBzB,EAAmB0B,IAClE,GACC,IACL,IACC,CAACb,EAAcS,IAElB,MAAMM,EAA4BC,EAAAA,SAAQ,KAAO,CAC/C,cAAeP,EAAW,SAAW,QACrC,kBAAmBA,EAAW,aAAe,YAC7C,eAAcQ,GAAAA,OAAKf,EAAe,SAC/BK,KACgB,CAACE,EAAUF,EAAOL,IAEjCgB,EAAaF,EAAAA,SAAQ,KACzB,MAAME,EAAa,CAACT,EAAWU,EAAAA,QAAQV,SAAWU,EAAAA,QAAQvB,YAQ1D,OANIH,GAAaS,GAAbT,MAA4BS,GAC9BgB,EAAWE,KAAKD,UAAQ1B,YAErBA,GAAaS,GAAd,MAA6BA,GAC/BgB,EAAWE,KAAKD,UAAQE,UAEnBH,EAAWI,KAAK,IAAI,GAC1B,CAAC7B,EAAWS,EAAaO,IAE5B,OACEc,MAAAC,cAAA,MAAAC,UAAA,CACE3B,GAAE,GAAAmB,YAAoB,IAAPnB,GAAsBA,GAAOA,GAC5CD,UAASoB,GAAAA,OAAKE,EAAAA,QAAQ,yBAAwBF,KAAAA,OAAIC,EAAU,KAAAD,OAAIpB,EAAa,KAC7E6B,IAAK1B,EACLO,MAAOQ,GACHV,EAAS,CACb,cAAaA,EAAUsB,YAActB,EAAU,gBAAkBP,IAEhEH,EACG,IAIVL,EAAqBsC,YAAc"}
+{"version":3,"file":"CollapsibleContainer.js","sources":["../../../../../../../src/core/ui/components/container/CollapsibleContainer.tsx"],"sourcesContent":["import { FC, useRef, useState, memo, ReactNode,\n  useEffect, useLayoutEffect, useMemo, CSSProperties, PropsWithChildren } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\n\nimport classes from './CollapsibleContainer.module.scss'\nimport { LayoutBoxProps } from './layoutBox/layoutBox.types'\n\n\n/**\n * Mapping of element property names for calculating dimensions.\n */\nconst elementPropNameMap: Record<string, string> = {\n  width: 'scrollWidth',\n  height: 'scrollHeight',\n}\n\n/**\n * Props for the CollapsibleContainer component.\n */\nexport type CollapsibleContainerProps = PropsWithChildren & Omit<LayoutBoxProps, 'ref'> & {\n  collapsed?: boolean\n  collapseHandler?: (collapsed: boolean) => void\n  children?: ReactNode\n  className?: string\n  horizontal?: boolean\n} & CSSProperties\n\n/**\n * CollapsibleContainer component.\n *\n * @type {React.FC<CollapsibleContainerProps>}\n * @returns {React.ReactElement} The CollapsibleContainer.\n */\nexport const CollapsibleContainer: FC<CollapsibleContainerProps> = memo(({\n  collapsed = false, collapseHandler, children, horizontal = false, className = '', id, ...props\n}: CollapsibleContainerProps) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [contentProp, setContentProp] = useState(0)\n\n  const { dataProps, restProps: style } = useParseProps(props)\n\n  const vertical = !horizontal\n\n  useEffect(() => {\n    collapseHandler?.(collapsed)\n  }, [collapseHandler, collapsed])\n\n  useLayoutEffect(() => {\n    if (containerRef?.current) {\n      const propName = vertical ? 'height' : 'width'\n\n      // TODO test with requestAnimationFrame\n      setTimeout(() => {\n        if (containerRef?.current) {\n          setContentProp((containerRef.current as any)[elementPropNameMap[propName]])\n        }\n      }, 100)\n    }\n  }, [containerRef, vertical])\n\n  const styleProps: CSSProperties = useMemo(() => ({\n    '--prop-name': vertical ? 'height' : 'width',\n    '--prop-max-name': vertical ? 'max-height' : 'max-width',\n    '--prop-value': `${contentProp}px`,\n    ...style,\n  } as CSSProperties), [vertical, style, contentProp])\n\n  const classNames = useMemo(() => {\n    const classNames = [vertical ? classes.vertical : classes.horizontal]\n\n    if (collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n      classNames.push(classes.collapsed)\n    }\n    if (!collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n      classNames.push(classes.expanded)\n    }\n    return classNames.join(' ')\n  }, [collapsed, contentProp, vertical])\n\n  return (\n    <div\n      id={`${(typeof id !== 'undefined' && id) || id}`}\n      className={`${classes['collapsible-container']} ${classNames} ${className} `}\n      ref={containerRef}\n      style={styleProps}\n      {...dataProps}\n      data-testid={dataProps.dataTestId || dataProps['data-testid'] || id}\n    >\n      {children}\n    </div>\n  )\n})\n\nCollapsibleContainer.displayName = 'CollapsibleContainer'\n"],"names":["elementPropNameMap","width","height","CollapsibleContainer","memo","_ref","collapsed","collapseHandler","children","horizontal","className","id","props","containerRef","useRef","contentProp","setContentProp","useState","dataProps","restProps","style","useParseProps","vertical","useEffect","useLayoutEffect","current","propName","setTimeout","styleProps","useMemo","concat","classNames","classes","push","expanded","join","React","createElement","_extends","ref","dataTestId","displayName"],"mappings":"iSAYA,MAAMA,EAA6C,CACjDC,MAAO,cACPC,OAAQ,gBAoBGC,EAAsDC,EAAIA,MAACC,IAEvC,IAFwCC,UACvEA,GAAY,EAAKC,gBAAEA,EAAeC,SAAEA,EAAQC,WAAEA,GAAa,EAAKC,UAAEA,EAAY,GAAEC,GAAEA,KAAOC,GAC/DP,EAC1B,MAAMQ,EAAeC,SAAuB,OACrCC,EAAaC,GAAkBC,EAAQA,SAAC,IAEzCC,UAAEA,EAAWC,UAAWC,GAAUC,EAAAA,cAAcT,GAEhDU,GAAYb,EAElBc,EAAAA,WAAU,KACRhB,SAAAA,EAAkBD,EAAU,GAC3B,CAACC,EAAiBD,IAErBkB,EAAAA,iBAAgB,KACd,GAAIX,SAAAA,EAAcY,QAAS,CACzB,MAAMC,EAAWJ,EAAW,SAAW,QAGvCK,YAAW,KACLd,SAAAA,EAAcY,SAChBT,EAAgBH,EAAaY,QAAgBzB,EAAmB0B,IAClE,GACC,IACL,IACC,CAACb,EAAcS,IAElB,MAAMM,EAA4BC,EAAAA,SAAQ,KAAO,CAC/C,cAAeP,EAAW,SAAW,QACrC,kBAAmBA,EAAW,aAAe,YAC7C,eAAcQ,GAAAA,OAAKf,EAAe,SAC/BK,KACgB,CAACE,EAAUF,EAAOL,IAEjCgB,EAAaF,EAAAA,SAAQ,KACzB,MAAME,EAAa,CAACT,EAAWU,EAAAA,QAAQV,SAAWU,EAAAA,QAAQvB,YAQ1D,OANIH,GAAaS,GAAbT,MAA4BS,GAC9BgB,EAAWE,KAAKD,UAAQ1B,YAErBA,GAAaS,GAAd,MAA6BA,GAC/BgB,EAAWE,KAAKD,UAAQE,UAEnBH,EAAWI,KAAK,IAAI,GAC1B,CAAC7B,EAAWS,EAAaO,IAE5B,OACEc,MAAAC,cAAA,MAAAC,UAAA,CACE3B,GAAE,GAAAmB,YAAoB,IAAPnB,GAAsBA,GAAOA,GAC5CD,UAASoB,GAAAA,OAAKE,EAAAA,QAAQ,yBAAwBF,KAAAA,OAAIC,EAAU,KAAAD,OAAIpB,EAAa,KAC7E6B,IAAK1B,EACLO,MAAOQ,GACHV,EAAS,CACb,cAAaA,EAAUsB,YAActB,EAAU,gBAAkBP,IAEhEH,EACG,IAIVL,EAAqBsC,YAAc"}

package/dist/ui/src/core/ui/components/container/ResizableContainer.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../../../../_virtual/_rollupPluginBabelHelpers.js");require("../../../../../node_modules/core-js/modules/web.dom-collections.iterator.js");var t=require("react"),i=require("../../../hooks/useResize.js"),o=require("./LayoutBox.js");const n={main:{position:"absolute",zIndex:1,left:0,pointerEvents:"none"},empty:{pointerEvents:"none"}},l=t.memo((t=>{let{children:l,debounceDelay:a=250,...r}=t;const[s,u]=i.useResize(a);return React.createElement(o.LayoutBox,e.extends({width:"100%",height:"100%",justify:"center",align:"center",direction:"column"},r),React.createElement(o.LayoutBox,{style:n.main,width:"100%",height:"100%",ref:s}),!l&&React.createElement(o.LayoutBox,{width:"".concat(Math.max((null==u?void 0:u.width)||200,200)||200,"px"),height:"".concat(Math.max((null==u?void 0:u.height)||200,200)||200,"px"),style:n.empty}),l&&(null==l?void 0:l({height:"".concat((null==u?void 0:u.height)||200,"px"),width:"".concat((null==u?void 0:u.width)||200,"px"),measured:!(null==u||!u.height)})))}));l.displayName="ResizableContainer",exports.ResizableContainer=l;
+"use strict";var e=require("../../../../../_virtual/_rollupPluginBabelHelpers.js");require("../../../../../node_modules/core-js/modules/web.dom-collections.iterator.js");var t=require("react"),i=require("../../../hooks/useResize.js"),o=require("./layoutBox/LayoutBox.js");const n={main:{position:"absolute",zIndex:1,left:0,pointerEvents:"none"},empty:{pointerEvents:"none"}},l=t.memo((t=>{let{children:l,debounceDelay:a=250,...r}=t;const[s,u]=i.useResize(a);return React.createElement(o.LayoutBox,e.extends({width:"100%",height:"100%",justify:"center",align:"center",direction:"column"},r),React.createElement(o.LayoutBox,{style:n.main,width:"100%",height:"100%",ref:s}),!l&&React.createElement(o.LayoutBox,{width:"".concat(Math.max((null==u?void 0:u.width)||200,200)||200,"px"),height:"".concat(Math.max((null==u?void 0:u.height)||200,200)||200,"px"),style:n.empty}),l&&(null==l?void 0:l({height:"".concat((null==u?void 0:u.height)||200,"px"),width:"".concat((null==u?void 0:u.width)||200,"px"),measured:!(null==u||!u.height)})))}));l.displayName="ResizableContainer",exports.ResizableContainer=l;
 //# sourceMappingURL=ResizableContainer.js.map

package/dist/ui/src/core/ui/components/container/ResizableContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResizableContainer.js","sources":["../../../../../../../src/core/ui/components/container/ResizableContainer.tsx"],"sourcesContent":["import { memo, RefObject, PropsWithChildren, ReactElement, FC } from 'react'\n\nimport { useResize } from '../../../hooks/useResize'\n\nimport { LayoutBox } from './LayoutBox'\nimport { LayoutBoxProps } from './layoutBox.types'\n\n\nexport type ResizableContainerProps = LayoutBoxProps & PropsWithChildren<any> & {\n  debounceDelay?: number\n  children?: (props: ResizableContainerRenderProps) => ReactElement\n}\n\nexport type ResizableContainerRenderProps = {\n  width: number | string\n  height: number | string\n  measured: boolean\n}\n\nconst styles = {\n  main: {\n    position: 'absolute',\n    zIndex: 1,\n    left: 0,\n    pointerEvents: 'none',\n  },\n  empty: {\n    pointerEvents: 'none',\n  },\n}\n\nexport const ResizableContainer: FC<ResizableContainerProps> = memo<ResizableContainerProps>(\n  ({ children, debounceDelay = 250, ...props }: ResizableContainerProps) => {\n    const [containerRef, containerSize] = useResize(debounceDelay)\n\n    return (\n      <LayoutBox\n        width='100%'\n        height='100%'\n        justify='center'\n        align='center'\n        direction='column'\n        {...props}\n      >\n        <LayoutBox\n          style={styles.main}\n          width='100%'\n          height='100%'\n          ref={containerRef as RefObject<HTMLDivElement>}\n        />\n        {!children && (\n        <LayoutBox\n          width={`${Math.max(containerSize?.width || 200, 200) || 200}px`}\n          height={`${Math.max(containerSize?.height || 200, 200) || 200}px`}\n          style={styles.empty}\n        />\n        )}\n        {children && children?.({\n          height: `${containerSize?.height || 200}px`,\n          width: `${containerSize?.width || 200}px`,\n          measured: !!containerSize?.height,\n        } as ResizableContainerRenderProps)}\n      </LayoutBox>\n    )\n  },\n)\n\nResizableContainer.displayName = 'ResizableContainer'\n"],"names":["styles","main","position","zIndex","left","pointerEvents","empty","ResizableContainer","memo","_ref","children","debounceDelay","props","containerRef","containerSize","useResize","React","createElement","LayoutBox","_extends","width","height","justify","align","direction","style","ref","concat","Math","max","measured","displayName"],"mappings":"sQAmBA,MAAMA,EAAS,CACbC,KAAM,CACJC,SAAU,WACVC,OAAQ,EACRC,KAAM,EACNC,cAAe,QAEjBC,MAAO,CACLD,cAAe,SAINE,EAAkDC,EAAIA,MACjEC,IAA0E,IAAzEC,SAAEA,EAAQC,cAAEA,EAAgB,OAAQC,GAAgCH,EACnE,MAAOI,EAAcC,GAAiBC,EAASA,UAACJ,GAEhD,OACEK,MAAAC,cAACC,EAASA,UAAAC,UAAA,CACRC,MAAM,OACNC,OAAO,OACPC,QAAQ,SACRC,MAAM,SACNC,UAAU,UACNZ,GAEJI,MAAAC,cAACC,EAAAA,UAAS,CACRO,MAAOzB,EAAOC,KACdmB,MAAM,OACNC,OAAO,OACPK,IAAKb,KAELH,GACFM,MAAAC,cAACC,EAAAA,UAAS,CACRE,MAAK,GAAAO,OAAKC,KAAKC,KAAIf,eAAAA,EAAeM,QAAS,IAAK,MAAQ,IAAQ,MAChEC,OAAM,GAAAM,OAAKC,KAAKC,KAAIf,eAAAA,EAAeO,SAAU,IAAK,MAAQ,IAAQ,MAClEI,MAAOzB,EAAOM,QAGfI,IAAYA,aAAAA,EAAAA,EAAW,CACtBW,OAAMM,GAAAA,QAAKb,aAAa,EAAbA,EAAeO,SAAU,IAAO,MAC3CD,MAAKO,GAAAA,QAAKb,aAAa,EAAbA,EAAeM,QAAS,IAAO,MACzCU,WAAYhB,UAAAA,EAAeO,WAEnB,IAKlBd,EAAmBwB,YAAc"}
+{"version":3,"file":"ResizableContainer.js","sources":["../../../../../../../src/core/ui/components/container/ResizableContainer.tsx"],"sourcesContent":["import { memo, RefObject, PropsWithChildren, ReactElement, FC } from 'react'\n\nimport { useResize } from '../../../hooks/useResize'\n\nimport { LayoutBox } from './layoutBox/LayoutBox'\nimport { LayoutBoxProps } from './layoutBox/layoutBox.types'\n\n\nexport type ResizableContainerProps = LayoutBoxProps & PropsWithChildren<any> & {\n  debounceDelay?: number\n  children?: (props: ResizableContainerRenderProps) => ReactElement\n}\n\nexport type ResizableContainerRenderProps = {\n  width: number | string\n  height: number | string\n  measured: boolean\n}\n\nconst styles = {\n  main: {\n    position: 'absolute',\n    zIndex: 1,\n    left: 0,\n    pointerEvents: 'none',\n  },\n  empty: {\n    pointerEvents: 'none',\n  },\n}\n\nexport const ResizableContainer: FC<ResizableContainerProps> = memo<ResizableContainerProps>(\n  ({ children, debounceDelay = 250, ...props }: ResizableContainerProps) => {\n    const [containerRef, containerSize] = useResize(debounceDelay)\n\n    return (\n      <LayoutBox\n        width='100%'\n        height='100%'\n        justify='center'\n        align='center'\n        direction='column'\n        {...props}\n      >\n        <LayoutBox\n          style={styles.main}\n          width='100%'\n          height='100%'\n          ref={containerRef as RefObject<HTMLDivElement>}\n        />\n        {!children && (\n        <LayoutBox\n          width={`${Math.max(containerSize?.width || 200, 200) || 200}px`}\n          height={`${Math.max(containerSize?.height || 200, 200) || 200}px`}\n          style={styles.empty}\n        />\n        )}\n        {children && children?.({\n          height: `${containerSize?.height || 200}px`,\n          width: `${containerSize?.width || 200}px`,\n          measured: !!containerSize?.height,\n        } as ResizableContainerRenderProps)}\n      </LayoutBox>\n    )\n  },\n)\n\nResizableContainer.displayName = 'ResizableContainer'\n"],"names":["styles","main","position","zIndex","left","pointerEvents","empty","ResizableContainer","memo","_ref","children","debounceDelay","props","containerRef","containerSize","useResize","React","createElement","LayoutBox","_extends","width","height","justify","align","direction","style","ref","concat","Math","max","measured","displayName"],"mappings":"gRAmBA,MAAMA,EAAS,CACbC,KAAM,CACJC,SAAU,WACVC,OAAQ,EACRC,KAAM,EACNC,cAAe,QAEjBC,MAAO,CACLD,cAAe,SAINE,EAAkDC,EAAIA,MACjEC,IAA0E,IAAzEC,SAAEA,EAAQC,cAAEA,EAAgB,OAAQC,GAAgCH,EACnE,MAAOI,EAAcC,GAAiBC,EAASA,UAACJ,GAEhD,OACEK,MAAAC,cAACC,EAASA,UAAAC,UAAA,CACRC,MAAM,OACNC,OAAO,OACPC,QAAQ,SACRC,MAAM,SACNC,UAAU,UACNZ,GAEJI,MAAAC,cAACC,EAAAA,UAAS,CACRO,MAAOzB,EAAOC,KACdmB,MAAM,OACNC,OAAO,OACPK,IAAKb,KAELH,GACFM,MAAAC,cAACC,EAAAA,UAAS,CACRE,MAAK,GAAAO,OAAKC,KAAKC,KAAIf,eAAAA,EAAeM,QAAS,IAAK,MAAQ,IAAQ,MAChEC,OAAM,GAAAM,OAAKC,KAAKC,KAAIf,eAAAA,EAAeO,SAAU,IAAK,MAAQ,IAAQ,MAClEI,MAAOzB,EAAOM,QAGfI,IAAYA,aAAAA,EAAAA,EAAW,CACtBW,OAAMM,GAAAA,QAAKb,aAAa,EAAbA,EAAeO,SAAU,IAAO,MAC3CD,MAAKO,GAAAA,QAAKb,aAAa,EAAbA,EAAeM,QAAS,IAAO,MACzCU,WAAYhB,UAAAA,EAAeO,WAEnB,IAKlBd,EAAmBwB,YAAc"}

package/dist/ui/src/core/ui/components/container/layoutBox/LayoutBox.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("../../../../../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),s=require("../../../../hooks/useParseProps.js"),a=require("../../../../utils/helpers/ui.js"),o=require("./layoutBox.module.scss.js"),r=require("./layoutBox.types.js");const l={start:"flex-start","flex-start":"flex-start",end:"flex-end","flex-end":"flex-end"},i=e=>e&&l[e]||e,u=t.forwardRef(((l,u)=>{let{id:n,style:d,children:c,tabIndex:x,className:y="",onClick:f,column:m,...p}=l;const{dataProps:j,restProps:P}=s.useParseProps(p),b=t.useMemo((()=>f?{onClick:f,onKeyDown:f,role:"button",tabIndex:-1}:{}),[f]),q=t.useMemo((()=>void 0!==m&&!0===m?r.LayoutDirection.COLUMN:null),[m]),B=t.useMemo((()=>({...P,...P.align?{alignItems:i(P.align)}:{},...P.justify?{justifyContent:i(P.justify)}:{},...P.direction||q?{flexDirection:P.direction||q}:{},...d})),[q,P,d]);return React.createElement("div",e.extends({},n?{id:"".concat(n)}:{},{ref:u,tabIndex:x,className:a.classNames(o.default["layout-box"],y),style:B},j,{"data-testid":j.dataTestId||j["data-testid"]||n},b),c)}));u.displayName="LayoutBoxRefForwarded";const n=t.memo(u);n.displayName="LayoutBox",exports.LayoutBox=n;
+//# sourceMappingURL=LayoutBox.js.map

package/dist/ui/src/core/ui/components/container/layoutBox/LayoutBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutBox.js","sources":["../../../../../../../../src/core/ui/components/container/layoutBox/LayoutBox.tsx"],"sourcesContent":["import { memo, FC, useMemo, CSSProperties, forwardRef, LegacyRef } from 'react'\n\nimport { useParseProps } from '../../../../hooks/useParseProps'\nimport { classNames } from '../../../../utils/helpers/ui'\n\nimport classes from './layoutBox.module.scss'\nimport { LayoutDirection, LayoutBoxProps } from './layoutBox.types'\n\n/**\n * Map of flex values for resolving flex alignment and justification.\n * @type {Record<string, string>}\n */\nconst flexValueMap: Record<string, string> = {\n  start: 'flex-start',\n  'flex-start': 'flex-start',\n  end: 'flex-end',\n  'flex-end': 'flex-end',\n}\n\n/**\n * Resolves flex alignment and justification properties based on the provided value.\n * @param {string | undefined} value - The value to resolve.\n * @returns {string | undefined} - Resolved flex property value.\n */\nconst resolveFlexProps = (value?: string): string | undefined => (value ? (flexValueMap[value] || value) : value)\n\n/**\n * Forwarded ref version of the LayoutBox component.\n * @param {LayoutBoxProps} props - Props for the LayoutBox component.\n * @param {LegacyRef<HTMLDivElement> | undefined} ref - Ref for accessing the underlying DOM element.\n * @returns {JSX.Element} - Rendered LayoutBox component.\n */\nconst LayoutBoxRefForwarded = forwardRef(({\n  id, style, children, tabIndex, className = '', onClick, column, ...props\n}: LayoutBoxProps, ref: LegacyRef<HTMLDivElement> | undefined | null) => {\n  const { dataProps, restProps } = useParseProps(props)\n\n  /**\n   * Memoized onClick event properties.\n   * @type {{ onClick?: () => void; onKeyDown?: () => void; role?: string; tabIndex?: number }}\n   */\n  const onClickProps = useMemo(() => (onClick ? ({\n    onClick,\n    onKeyDown: onClick,\n    role: 'button',\n    tabIndex: -1,\n  }) : {}), [onClick])\n\n  /**\n   * Memoized resolved direction based on the column prop.\n   * @type {LayoutDirection}\n   */\n  const resolvedColumn = useMemo(() => ((\n    column !== undefined && column === true)\n    ? LayoutDirection.COLUMN\n    : null), [column])\n\n  /**\n   * Memoized styles combining parsed props and additional styles.\n   * @type {CSSProperties}\n   */\n  const styles = useMemo(() => (\n    {\n      ...restProps,\n      ...(restProps.align ? { alignItems: resolveFlexProps(restProps.align as string) } : {}),\n      ...(restProps.justify ? { justifyContent: resolveFlexProps(restProps.justify as string) } : {}),\n      ...(restProps.direction || resolvedColumn ? { flexDirection: restProps.direction || resolvedColumn } : {}),\n      ...style,\n    }\n  ), [resolvedColumn, restProps, style])\n\n  return (\n    <div\n      {...(id ? { id: `${id}` } : {})}\n      ref={ref}\n      tabIndex={tabIndex}\n      className={classNames(\n        classes['layout-box'],\n        className,\n      )}\n      style={styles as CSSProperties}\n      {...dataProps}\n      data-testid={dataProps.dataTestId || dataProps['data-testid'] || id}\n      {...onClickProps}\n    >\n      {children}\n    </div>\n  )\n})\n\nLayoutBoxRefForwarded.displayName = 'LayoutBoxRefForwarded'\n\n/**\n * Memoized and memoized LayoutBox component.\n * @type {FC<LayoutBoxProps>}\n */\nexport const LayoutBox: FC<LayoutBoxProps> = memo<LayoutBoxProps>(LayoutBoxRefForwarded)\n\nLayoutBox.displayName = 'LayoutBox'\n"],"names":["flexValueMap","start","end","resolveFlexProps","value","LayoutBoxRefForwarded","forwardRef","_ref","ref","id","style","children","tabIndex","className","onClick","column","props","dataProps","restProps","useParseProps","onClickProps","useMemo","onKeyDown","role","resolvedColumn","undefined","LayoutDirection","COLUMN","styles","align","alignItems","justify","justifyContent","direction","flexDirection","React","createElement","_extends","concat","classNames","classes","dataTestId","displayName","LayoutBox","memo"],"mappings":"gRAYA,MAAMA,EAAuC,CAC3CC,MAAO,aACP,aAAc,aACdC,IAAK,WACL,WAAY,YAQRC,EAAoBC,GAAwCA,GAASJ,EAAaI,IAAmBA,EAQrGC,EAAwBC,EAAUA,YAAC,CAAAC,EAEtBC,KAAsD,IAF/BC,GACxCA,EAAEC,MAAEA,EAAKC,SAAEA,EAAQC,SAAEA,EAAQC,UAAEA,EAAY,GAAEC,QAAEA,EAAOC,OAAEA,KAAWC,GACpDT,EACf,MAAMU,UAAEA,EAASC,UAAEA,GAAcC,EAAAA,cAAcH,GAMzCI,EAAeC,WAAQ,IAAOP,EAAW,CAC7CA,UACAQ,UAAWR,EACXS,KAAM,SACNX,UAAW,GACR,CAAG,GAAE,CAACE,IAMLU,EAAiBH,EAAOA,SAAC,SAClBI,IAAXV,IAAmC,IAAXA,EACtBW,EAAAA,gBAAgBC,OAChB,MAAO,CAACZ,IAMNa,EAASP,EAAAA,SAAQ,KACrB,IACKH,KACCA,EAAUW,MAAQ,CAAEC,WAAY3B,EAAiBe,EAAUW,QAAqB,CAAE,KAClFX,EAAUa,QAAU,CAAEC,eAAgB7B,EAAiBe,EAAUa,UAAuB,CAAE,KAC1Fb,EAAUe,WAAaT,EAAiB,CAAEU,cAAehB,EAAUe,WAAaT,GAAmB,CAAE,KACtGd,KAEJ,CAACc,EAAgBN,EAAWR,IAE/B,OACEyB,MAAAC,oBAAAC,EAAAA,QAAA,CAAA,EACO5B,EAAK,CAAEA,GAAE,GAAA6B,OAAK7B,IAAS,GAAE,CAC9BD,IAAKA,EACLI,SAAUA,EACVC,UAAW0B,EAAAA,WACTC,EAAAA,QAAQ,cACR3B,GAEFH,MAAOkB,GACHX,EAAS,CACb,cAAaA,EAAUwB,YAAcxB,EAAU,gBAAkBR,GAC7DW,GAEHT,EACG,IAIVN,EAAsBqC,YAAc,8BAMvBC,EAAgCC,EAAIA,KAAiBvC,GAElEsC,EAAUD,YAAc"}

package/dist/ui/src/core/ui/components/container/{layoutBox.module.scss.js → layoutBox/layoutBox.module.scss.js}

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.default={"layout-box":"layoutBox-module_layout-box__faPND"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.default={"layout-box":"layoutBox-module_layout-box__ZIID8"};
 //# sourceMappingURL=layoutBox.module.scss.js.map

package/dist/ui/src/core/ui/components/container/layoutBox/layoutBox.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layoutBox.types.js","sources":["../../../../../../../../src/core/ui/components/container/layoutBox/layoutBox.types.ts"],"sourcesContent":["import { CSSProperties, LegacyRef, PropsWithChildren } from 'react'\n\n/**\n * Enum representing the possible layout directions.\n */\nexport enum LayoutDirection {\n  ROW = 'row',\n  COLUMN = 'column',\n}\n\n/**\n * Props for the LayoutBox component.\n */\nexport type LayoutBoxProps = PropsWithChildren & {\n  /** Unique identifier for the component. */\n  id?: string | number\n  /** CSS flex property. */\n  flex?: string\n  /** CSS flexGrow property. */\n  flexGrow?: string | number\n  /** Text alignment within the box. */\n  alignText?: 'center' | 'right' | 'left'\n  /** Direction of the layout (row or column). */\n  direction?: LayoutDirection | string\n  /** CSS flexShrink property. */\n  flexShrink?: string | number\n  /** CSS flexBasis property. */\n  flexBasis?: string\n  /** CSS flexWrap property. */\n  flexWrap?: string\n  /** CSS justify-content property. */\n  justify?: string\n  /** CSS align-items property. */\n  align?: string\n  /** CSS align-self property. */\n  alignSelf?: string\n  /** CSS margin property. */\n  margin?: string\n  /** CSS padding property. */\n  padding?: string\n  /** CSS width property. */\n  width?: string\n  /** CSS height property. */\n  height?: string\n  /** CSS maxWidth property. */\n  maxWidth?: string\n  /** CSS maxHeight property. */\n  maxHeight?: string\n  /** CSS minWidth property. */\n  minWidth?: string\n  /** CSS minHeight property. */\n  minHeight?: string\n  /** Gap between child elements. */\n  gap?: string\n  /** CSS borderRadius property. */\n  borderRadius?: string\n  /** Additional inline styles for the component. */\n  style?: Record<string, unknown> | null\n  /** Additional class name(s) for the component. */\n  className?: string\n  /** Tab index for keyboard navigation. */\n  tabIndex?: number\n  /** Ref for accessing the underlying DOM element. */\n  ref?: LegacyRef<HTMLDivElement> | undefined | null\n  /** Callback function for click event. */\n  onClick?: () => void\n  /** If true, sets the layout direction to column. */\n  column?: boolean\n} & Omit<CSSProperties, 'direction'>;\n"],"names":["LayoutDirection"],"mappings":"aAKYA,IAAAA,WAAAA,GAAe,OAAfA,EAAe,IAAA,MAAfA,EAAe,OAAA,SAAfA,CAAe,EAAA"}

package/dist/ui/src/core/ui/components/container/lazyComponent/LazyComponent.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("../../../../../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../../error/ErrorBoundary.js"),n=require("./lazyComponent.module.scss.js");const a=React.createElement("div",{className:n.default.loader},React.createElement("svg",{className:"spinner",viewBox:"0 0 50 50"},React.createElement("circle",{className:"path",cx:"25",cy:"25",r:"20",fill:"none",strokeWidth:"5"}))),l={},o=e=>{let r,t="pending";const n=("function"==typeof e?e():e).then((e=>{t="success",r=e}),(e=>{t="error",r=e}));return{read(){if("pending"===t)throw n;if("error"===t)throw r;if("success"===t)return r}}},c=r.memo((e=>{let{children:n,Component:l,LoaderJSX:o,...c}=e;return React.createElement(t.ErrorBoundary,null,React.createElement(r.Suspense,{fallback:o||a},l&&React.createElement(l,c),n&&n))}));c.displayName="LazyComponent";const s=r.memo((e=>{let{pendingPromise:t,promise:n,fallback:a,children:l}=e;const s=r.useRef(t||n&&o(n)),i=r.useMemo((()=>e=>{var r,t;let{children:n}=e;const a=null===(r=s.current)||void 0===r||null===(t=r.read)||void 0===t?void 0:t.call(r);return null!=a&&a.then?null:n}),[]);return React.createElement(c,{LoaderJSX:a},React.createElement(i,null,l))}));s.displayName="PendingBoundary";exports.LazyComponent=c,exports.PendingBoundary=s,exports.createLazyModule=function(t,n){let a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(!l[n]){const o=r.lazy(t);l[n]=r.memo((r=>React.createElement(c,e.extends({Component:o},a,r)))),l[n].displayName=n}return l[n]},exports.createLazyModuleWithStore=(t,n,a)=>o=>{if(!l[n]){const s=r.lazy((()=>t(o)));l[n]=r.memo((r=>React.createElement(c,e.extends({Component:s},a,r)))),l[n].displayName=n}return l[n]},exports.wrapPromise=o;
+//# sourceMappingURL=LazyComponent.js.map

package/dist/ui/src/core/ui/components/container/lazyComponent/LazyComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LazyComponent.js","sources":["../../../../../../../../src/core/ui/components/container/lazyComponent/LazyComponent.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport { FC, memo, Suspense, lazy, ComponentType, PropsWithChildren, useRef, useMemo } from 'react'\n\nimport { ErrorBoundary } from '../../error/ErrorBoundary'\n\nimport classes from './lazyComponent.module.scss'\n\n\nconst Loader: React.ReactNode = (\n  <div className={classes.loader}>\n    <svg className='spinner' viewBox='0 0 50 50'>\n      <circle className='path' cx='25' cy='25' r='20' fill='none' strokeWidth='5' />\n    </svg>\n  </div>\n)\n\n\n// not always necessary, since createLayzModule is called once per module,\n// but when nesting, inside loaded modules...\nconst map: Record<string, FC<any>> = {}\n\ntype ReactModule = {\n  default: ComponentType<any>\n}\n\nexport type LazyComponentProps = PropsWithChildren<any> & {\n  PropsWithChildren?: ComponentType<any>\n  LoaderJSX?: JSX.Element\n}\n\nexport type wrapPromiseType = (promise: (() => Promise<any>) | Promise<any>) => { read: () => Promise<unknown> }\n\nexport const wrapPromise: wrapPromiseType = (promise: (() => Promise<any>) | Promise<any>) => {\n  let status = 'pending'\n  let result: any\n  const suspend = (typeof promise === 'function' ? promise() : promise).then(\n    (res) => {\n      status = 'success'\n      result = res\n    },\n    (err) => {\n      status = 'error'\n      result = err\n    },\n  )\n\n  return {\n    // eslint-disable-next-line consistent-return\n    read(): any {\n      if (status === 'pending') {\n        throw suspend\n      } else if (status === 'error') {\n        throw result\n      } else if (status === 'success') {\n        return result\n      }\n    },\n  }\n}\n\n\nexport const LazyComponent: FC<LazyComponentProps>\n= memo<LazyComponentProps>(({ children, Component, LoaderJSX, ...props }: LazyComponentProps) => (\n  <ErrorBoundary>\n    <Suspense fallback={LoaderJSX || Loader}>\n      {Component && <Component {...props} />}\n      {children && children}\n    </Suspense>\n  </ErrorBoundary>\n))\n\nLazyComponent.displayName = 'LazyComponent'\n\nexport type PendingBoundaryProps = PropsWithChildren & {\n  fallback?: JSX.Element\n  promise?: Promise<unknown>\n  pendingPromise?: { read: () => Promise<unknown> }\n}\n\nexport const PendingBoundary: FC<PendingBoundaryProps>\n= memo<PendingBoundaryProps>(({ pendingPromise, promise, fallback, children }: PendingBoundaryProps) => {\n  const wrappedPromiseRef = useRef(pendingPromise || (promise && wrapPromise(promise)))\n\n  const InnerComponent: FC<PropsWithChildren<any>> = useMemo(() => ({ children }: PropsWithChildren<any>) => {\n    const innerPromise = wrappedPromiseRef.current?.read?.()\n\n    return innerPromise?.then ? null : children\n  }, [])\n\n  return (\n    <LazyComponent LoaderJSX={fallback}>\n      <InnerComponent>{children}</InnerComponent>\n    </LazyComponent>\n  )\n})\n\nPendingBoundary.displayName = 'PendingBoundary'\n\n\nexport const createLazyModule = (\n  lazyResolver: () => Promise<ReactModule>,\n  displayName: string,\n  defaultProps: Record<string, unknown> = {},\n): FC<unknown> => {\n  if (!map[displayName]) {\n    const Component = lazy(lazyResolver)\n\n    // eslint-disable-next-line react/display-name\n    map[displayName] = memo((props) => (<LazyComponent Component={Component} {...defaultProps} {...props} />))\n    map[displayName].displayName = displayName\n  }\n\n  return map[displayName]\n}\n\n\nexport const createLazyModuleWithStore = <T, ComponentType>(\n  lazyResolver: (store: T) => Promise<ReactModule>,\n  displayName: string,\n  defaultProps: Record<string, unknown>,\n): (store: T) => FC<ComponentType> => (store: T) => {\n    if (!map[displayName]) {\n      const Component = lazy(() => lazyResolver(store))\n\n      // eslint-disable-next-line react/display-name\n      map[displayName] = memo((props) => (<LazyComponent Component={Component} {...defaultProps} {...props} />))\n      map[displayName].displayName = displayName\n    }\n\n    return map[displayName]\n  }\n"],"names":["Loader","React","createElement","className","classes","default","loader","viewBox","cx","cy","r","fill","strokeWidth","map","wrapPromise","promise","result","status","suspend","then","res","err","read","LazyComponent","memo","_ref","children","Component","LoaderJSX","props","ErrorBoundary","Suspense","fallback","displayName","PendingBoundary","_ref2","pendingPromise","wrappedPromiseRef","useRef","InnerComponent","useMemo","_ref3","_wrappedPromiseRef$cu","_wrappedPromiseRef$cu2","innerPromise","current","call","lazyResolver","defaultProps","arguments","length","undefined","lazy","_extends","createLazyModuleWithStore","store"],"mappings":"+LAQA,MAAMA,EACJC,MAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAOC,QAACC,QACtBL,MAAAC,cAAA,MAAA,CAAKC,UAAU,UAAUI,QAAQ,aAC/BN,MAAAC,cAAA,SAAA,CAAQC,UAAU,OAAOK,GAAG,KAAKC,GAAG,KAAKC,EAAE,KAAKC,KAAK,OAAOC,YAAY,QAQxEC,EAA+B,CAAA,EAaxBC,EAAgCC,IAC3C,IACIC,EADAC,EAAS,UAEb,MAAMC,GAA8B,mBAAZH,EAAyBA,IAAYA,GAASI,MACnEC,IACCH,EAAS,UACTD,EAASI,CAAG,IAEbC,IACCJ,EAAS,QACTD,EAASK,CAAG,IAIhB,MAAO,CAELC,IAAAA,GACE,GAAe,YAAXL,EACF,MAAMC,EACD,GAAe,UAAXD,EACT,MAAMD,EACD,GAAe,YAAXC,EACT,OAAOD,CAEX,EACD,EAIUO,EACXC,EAAIA,MAAqBC,IAAA,IAACC,SAAEA,EAAQC,UAAEA,EAASC,UAAEA,KAAcC,GAA2BJ,EAAA,OAC1FxB,MAAAC,cAAC4B,EAAaA,mBACZ7B,MAAAC,cAAC6B,WAAQ,CAACC,SAAUJ,GAAa5B,GAC9B2B,GAAa1B,MAAAC,cAACyB,EAAcE,GAC5BH,GAAYA,GAED,IAGlBH,EAAcU,YAAc,sBAQfC,EACXV,EAAIA,MAAuBW,IAA2E,IAA1EC,eAAEA,EAAcrB,QAAEA,EAAOiB,SAAEA,EAAQN,SAAEA,GAAgCS,EACjG,MAAME,EAAoBC,EAAAA,OAAOF,GAAmBrB,GAAWD,EAAYC,IAErEwB,EAA6CC,WAAQ,IAAMC,IAA0C,IAAAC,EAAAC,EAAA,IAAzCjB,SAAEA,GAAkCe,EACpG,MAAMG,EAAwCF,QAA5BA,EAAGL,EAAkBQ,eAAOF,IAAAD,GAAM,QAANC,EAAzBD,EAA2BpB,YAAI,IAAAqB,OAAA,EAA/BA,EAAAG,KAAAJ,GAErB,OAAOE,SAAAA,EAAczB,KAAO,KAAOO,CAAQ,GAC1C,IAEH,OACEzB,MAAAC,cAACqB,EAAa,CAACK,UAAWI,GACxB/B,MAAAC,cAACqC,EAAgBb,KAAAA,GACH,IAIpBQ,EAAgBD,YAAc,6FAGE,SAC9Bc,EACAd,GAEgB,IADhBe,EAAqCC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,CAAA,EAExC,IAAKpC,EAAIoB,GAAc,CACrB,MAAMN,EAAYyB,OAAKL,GAGvBlC,EAAIoB,GAAeT,QAAMK,GAAW5B,MAAAC,cAACqB,EAAa8B,UAAA,CAAC1B,UAAWA,GAAeqB,EAAkBnB,MAC/FhB,EAAIoB,GAAaA,YAAcA,CACjC,CAEA,OAAOpB,EAAIoB,EACb,oCAGyCqB,CACvCP,EACAd,EACAe,IACqCO,IACnC,IAAK1C,EAAIoB,GAAc,CACrB,MAAMN,EAAYyB,EAAIA,MAAC,IAAML,EAAaQ,KAG1C1C,EAAIoB,GAAeT,QAAMK,GAAW5B,MAAAC,cAACqB,EAAa8B,UAAA,CAAC1B,UAAWA,GAAeqB,EAAkBnB,MAC/FhB,EAAIoB,GAAaA,YAAcA,CACjC,CAEA,OAAOpB,EAAIoB,EAAY"}

package/dist/ui/src/core/ui/components/container/lazyComponent/lazyComponent.module.scss.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.default={loader:"lazyComponent-module_loader__brMEW"};
+//# sourceMappingURL=lazyComponent.module.scss.js.map

package/dist/ui/src/core/ui/components/container/lazyComponent/lazyComponent.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazyComponent.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/ui/src/core/ui/components/dividers/DividerLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"DividerLine.js","sources":["../../../../../../../src/core/ui/components/dividers/DividerLine.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\nimport { memo, FC, CSSProperties, useMemo } from 'react'\n\nimport classes from './divider.module.scss'\n\ntype DividerProps = {\n  orientation?: string\n  margin?: string\n  vertical?: boolean\n  length?: string\n  color?: string\n  opacity?: number\n  left?: string\n  width?: string\n  height?: string\n  className?: string\n}\n\nexport const DividerLine: FC<DividerProps> = memo<DividerProps>(({\n  orientation, vertical,\n  color = 'var(--divider-line)',\n  opacity,\n  length = '80%', left = '0',\n  width = '1px', height = '1px',\n  margin,\n  className = '',\n}: DividerProps) => {\n  const isVertical = useMemo(() => orientation === 'vertical' || vertical === true, [orientation, vertical])\n\n  const styles = useMemo(() => (\n    {\n      '--width': width,\n      '--height': height,\n      '--length': length,\n      '--opacity': opacity,\n      '--color': color,\n      '--left': left,\n      '--margin': margin || (isVertical ? 'auto 0' : '0 auto'),\n    }\n  ), [width, height, length, opacity, color, left, margin, isVertical])\n\n  const verHorClass = isVertical ? classes.vertical : classes.horizontal\n\n  return (\n    <div\n      className={`${(classes as any)['divider-line']} ${verHorClass} ${className}`}\n      style={styles as CSSProperties}\n    />\n  )\n})\n\nDividerLine.displayName = 'DividerLine'\n\nexport const DividerVertical: FC<DividerProps>\n  = memo((props) => <DividerLine vertical length='100%' {...props} />)\nDividerVertical.displayName = 'DividerVertical'\n\nexport const DividerHorizontal: FC<DividerProps>\n  = memo((props) => <DividerLine length='100%' {...props} />)\nDividerHorizontal.displayName = 'DividerHorizontal'\n"],"names":["DividerLine","memo","_ref","orientation","vertical","color","opacity","length","left","width","height","margin","className","isVertical","useMemo","styles","verHorClass","classes","horizontal","React","createElement","concat","default","style","displayName","DividerVertical","props","_extends","DividerHorizontal"],"mappings":"kJAkBaA,EAAgCC,EAAIA,MAAeC,IAQ5C,IAR6CC,YAC/DA,EAAWC,SAAEA,EAAQC,MACrBA,EAAQ,sBAAqBC,QAC7BA,EAAOC,OACPA,EAAS,MAAKC,KAAEA,EAAO,IAAGC,MAC1BA,EAAQ,MAAKC,OAAEA,EAAS,MAAKC,OAC7BA,EAAMC,UACNA,EAAY,IACCV,EACb,MAAMW,EAAaC,EAAAA,SAAQ,IAAsB,aAAhBX,IAA2C,IAAbC,GAAmB,CAACD,EAAaC,IAE1FW,EAASD,EAAAA,SAAQ,KACrB,CACE,UAAWL,EACX,WAAYC,EACZ,WAAYH,EACZ,YAAaD,EACb,UAAWD,EACX,SAAUG,EACV,WAAYG,IAAWE,EAAa,SAAW,aAEhD,CAACJ,EAAOC,EAAQH,EAAQD,EAASD,EAAOG,EAAMG,EAAQE,IAEnDG,EAAcH,EAAaI,EAAAA,QAAQb,SAAWa,EAAAA,QAAQC,WAE5D,OACEC,MAAAC,cAAA,MAAA,CACER,UAASS,GAAAA,OAAMJ,EAAOK,QAAS,gBAAeD,KAAAA,OAAIL,EAAW,KAAAK,OAAIT,GACjEW,MAAOR,GACP,IAINf,EAAYwB,YAAc,cAEbC,MAAAA,EACTxB,EAAIA,MAAEyB,GAAUP,MAAAC,cAACpB,EAAW2B,UAAA,CAACvB,UAAQ,EAACG,OAAO,QAAWmB,MAC5DD,EAAgBD,YAAc,kBAEjBI,MAAAA,EACT3B,EAAIA,MAAEyB,GAAUP,MAAAC,cAACpB,EAAW2B,UAAA,CAACpB,OAAO,QAAWmB,MACnDE,EAAkBJ,YAAc"}
+{"version":3,"file":"DividerLine.js","sources":["../../../../../../../src/core/ui/components/dividers/DividerLine.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\nimport { memo, FC, CSSProperties, useMemo } from 'react'\n\nimport classes from './divider.module.scss'\n\nexport type DividerProps = {\n  orientation?: string\n  margin?: string\n  vertical?: boolean\n  length?: string\n  color?: string\n  opacity?: number\n  left?: string\n  width?: string\n  height?: string\n  className?: string\n}\n\nexport const DividerLine: FC<DividerProps> = memo<DividerProps>(({\n  orientation, vertical,\n  color = 'var(--divider-line)',\n  opacity,\n  length = '80%', left = '0',\n  width = '1px', height = '1px',\n  margin,\n  className = '',\n}: DividerProps) => {\n  const isVertical = useMemo(() => orientation === 'vertical' || vertical === true, [orientation, vertical])\n\n  const styles = useMemo(() => (\n    {\n      '--width': width,\n      '--height': height,\n      '--length': length,\n      '--opacity': opacity,\n      '--color': color,\n      '--left': left,\n      '--margin': margin || (isVertical ? 'auto 0' : '0 auto'),\n    }\n  ), [width, height, length, opacity, color, left, margin, isVertical])\n\n  const verHorClass = isVertical ? classes.vertical : classes.horizontal\n\n  return (\n    <div\n      className={`${(classes as any)['divider-line']} ${verHorClass} ${className}`}\n      style={styles as CSSProperties}\n    />\n  )\n})\n\nDividerLine.displayName = 'DividerLine'\n\nexport const DividerVertical: FC<DividerProps>\n  = memo((props) => <DividerLine vertical length='100%' {...props} />)\nDividerVertical.displayName = 'DividerVertical'\n\nexport const DividerHorizontal: FC<DividerProps>\n  = memo((props) => <DividerLine length='100%' {...props} />)\nDividerHorizontal.displayName = 'DividerHorizontal'\n"],"names":["DividerLine","memo","_ref","orientation","vertical","color","opacity","length","left","width","height","margin","className","isVertical","useMemo","styles","verHorClass","classes","horizontal","React","createElement","concat","default","style","displayName","DividerVertical","props","_extends","DividerHorizontal"],"mappings":"kJAkBaA,EAAgCC,EAAIA,MAAeC,IAQ5C,IAR6CC,YAC/DA,EAAWC,SAAEA,EAAQC,MACrBA,EAAQ,sBAAqBC,QAC7BA,EAAOC,OACPA,EAAS,MAAKC,KAAEA,EAAO,IAAGC,MAC1BA,EAAQ,MAAKC,OAAEA,EAAS,MAAKC,OAC7BA,EAAMC,UACNA,EAAY,IACCV,EACb,MAAMW,EAAaC,EAAAA,SAAQ,IAAsB,aAAhBX,IAA2C,IAAbC,GAAmB,CAACD,EAAaC,IAE1FW,EAASD,EAAAA,SAAQ,KACrB,CACE,UAAWL,EACX,WAAYC,EACZ,WAAYH,EACZ,YAAaD,EACb,UAAWD,EACX,SAAUG,EACV,WAAYG,IAAWE,EAAa,SAAW,aAEhD,CAACJ,EAAOC,EAAQH,EAAQD,EAASD,EAAOG,EAAMG,EAAQE,IAEnDG,EAAcH,EAAaI,EAAAA,QAAQb,SAAWa,EAAAA,QAAQC,WAE5D,OACEC,MAAAC,cAAA,MAAA,CACER,UAASS,GAAAA,OAAMJ,EAAOK,QAAS,gBAAeD,KAAAA,OAAIL,EAAW,KAAAK,OAAIT,GACjEW,MAAOR,GACP,IAINf,EAAYwB,YAAc,cAEbC,MAAAA,EACTxB,EAAIA,MAAEyB,GAAUP,MAAAC,cAACpB,EAAW2B,UAAA,CAACvB,UAAQ,EAACG,OAAO,QAAWmB,MAC5DD,EAAgBD,YAAc,kBAEjBI,MAAAA,EACT3B,EAAIA,MAAEyB,GAAUP,MAAAC,cAACpB,EAAW2B,UAAA,CAACpB,OAAO,QAAWmB,MACnDE,EAAkBJ,YAAc"}

package/dist/ui/src/core/ui/components/error/ErrorBoundary.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react"),r=require("../container/layoutBox/LayoutBox.js"),t=require("./errorBoundary.module.scss.js"),o=require("../icon/IconBase.js");const a=e.memo((e=>{let{title:a,text:n}=e;return React.createElement(r.LayoutBox,{className:t.default.errorBoundary,direction:"column",flexWrap:"wrap",gap:"2rem",padding:"1rem"},a&&React.createElement("h1",null,a),React.createElement(r.LayoutBox,{align:"center",justify:"space-between",gap:"1rem"},React.createElement(o.IconBase,{className:t.default.StyledIcon,color:"#FF0000",width:"3rem",height:"3rem"},React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},React.createElement("path",{d:"M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"}))),n&&React.createElement(r.LayoutBox,{flexShrink:"0",width:"90%"},n)))}));a.displayName="DefaultErrorComponent";class n extends e.PureComponent{constructor(e){super(e),this.state={hasError:!1}}static getDerivedStateFromError(e){return{hasError:!0,error:e}}componentDidCatch(e,r){this.setState({hasError:!0,error:e,errorInfo:r})}render(){const{ErrorComponent:e=a}=this.props,{hasError:r,error:t,errorInfo:o}=this.state;return r?React.createElement(e,{title:(null==t?void 0:t.toString())||"Error",text:"".concat(JSON.stringify(o,null,2))}):this.props.children}}exports.DefaultErrorComponent=a,exports.ErrorBoundary=n;
+//# sourceMappingURL=ErrorBoundary.js.map

package/dist/ui/src/core/ui/components/error/ErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.js","sources":["../../../../../../../src/core/ui/components/error/ErrorBoundary.tsx"],"sourcesContent":["import { FC, memo, PureComponent, ReactNode, PropsWithChildren, ComponentType } from 'react'\n\nimport { IconBase } from '../icon'\nimport { LayoutBox } from '../container/layoutBox/LayoutBox'\n\nimport classes from './errorBoundary.module.scss'\n\n\ntype Props = PropsWithChildren<unknown> & {\n  ErrorComponent?: ComponentType\n}\n\ninterface State {\n  error?: Error\n  errorInfo?: unknown\n  hasError: boolean\n}\n\n\nexport type DefaultErrorComponentProps = {\n  title?: string\n  text?: string\n}\n\nexport const DefaultErrorComponent: FC<DefaultErrorComponentProps>\n= memo(({ title, text }: DefaultErrorComponentProps) => (\n  <LayoutBox className={classes.errorBoundary} direction='column' flexWrap='wrap' gap='2rem' padding='1rem'>\n    {title && <h1>{title}</h1>}\n    <LayoutBox align='center' justify='space-between' gap='1rem'>\n      <IconBase\n        className={classes.StyledIcon}\n        color='#FF0000'\n        width='3rem'\n        height='3rem'\n      >\n        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>\n          <path d='M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z' />\n        </svg>\n      </IconBase>\n      {text && (\n        <LayoutBox flexShrink='0' width='90%'>\n          {text}\n        </LayoutBox>\n      )}\n    </LayoutBox>\n  </LayoutBox>\n))\nDefaultErrorComponent.displayName = 'DefaultErrorComponent'\n\nexport class ErrorBoundary extends PureComponent<Props, State> {\n  constructor(props: Props) {\n    super(props)\n    this.state = { hasError: false }\n  }\n\n  static getDerivedStateFromError(error: Error): State {\n    return { hasError: true, error }\n  }\n\n  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {\n    // eslint-disable-next-line no-console\n    error && console.error(error)\n    // eslint-disable-next-line no-console\n    errorInfo && console.error(errorInfo)\n    // this.lastError = { error, errorInfo }\n    this.setState({ hasError: true, error, errorInfo })\n  }\n\n  render():ReactNode {\n    const { ErrorComponent = DefaultErrorComponent } = this.props\n    const { hasError, error, errorInfo } = this.state\n\n    if (hasError) {\n      return <ErrorComponent title={error?.toString() || 'Error'} text={`${JSON.stringify(errorInfo, null, 2)}`} />\n    }\n\n    return this.props.children\n  }\n}\n"],"names":["DefaultErrorComponent","memo","_ref","title","text","React","createElement","LayoutBox","className","classes","default","errorBoundary","direction","flexWrap","gap","padding","align","justify","IconBase","StyledIcon","color","width","height","xmlns","viewBox","d","flexShrink","displayName","ErrorBoundary","PureComponent","constructor","props","super","this","state","hasError","getDerivedStateFromError","error","componentDidCatch","errorInfo","setState","render","ErrorComponent","toString","concat","JSON","stringify","children"],"mappings":"kKAwBaA,MAAAA,EACXC,EAAIA,MAACC,IAAA,IAACC,MAAEA,EAAKC,KAAEA,GAAkCF,EAAA,OACjDG,MAAAC,cAACC,YAAS,CAACC,UAAWC,EAAOC,QAACC,cAAeC,UAAU,SAASC,SAAS,OAAOC,IAAI,OAAOC,QAAQ,QAChGZ,GAASE,MAAAC,cAAA,KAAA,KAAKH,GACfE,MAAAC,cAACC,YAAS,CAACS,MAAM,SAASC,QAAQ,gBAAgBH,IAAI,QACpDT,MAAAC,cAACY,WAAQ,CACPV,UAAWC,EAAOC,QAACS,WACnBC,MAAM,UACNC,MAAM,OACNC,OAAO,QAEPjB,MAAAC,cAAA,MAAA,CAAKiB,MAAM,6BAA6BC,QAAQ,eAC9CnB,MAAAC,cAAA,OAAA,CAAMmB,EAAE,6WAGXrB,GACCC,MAAAC,cAACC,EAAAA,UAAS,CAACmB,WAAW,IAAIL,MAAM,OAC7BjB,IAIG,IAEdJ,EAAsB2B,YAAc,wBAE7B,MAAMC,UAAsBC,EAAAA,cACjCC,WAAAA,CAAYC,GACVC,MAAMD,GACNE,KAAKC,MAAQ,CAAEC,UAAU,EAC3B,CAEA,+BAAOC,CAAyBC,GAC9B,MAAO,CAAEF,UAAU,EAAME,QAC3B,CAEAC,iBAAAA,CAAkBD,EAAcE,GAM9BN,KAAKO,SAAS,CAAEL,UAAU,EAAME,QAAOE,aACzC,CAEAE,MAAAA,GACE,MAAMC,eAAEA,EAAiB1C,GAA0BiC,KAAKF,OAClDI,SAAEA,EAAQE,MAAEA,EAAKE,UAAEA,GAAcN,KAAKC,MAE5C,OAAIC,EACK9B,MAAAC,cAACoC,EAAc,CAACvC,OAAOkC,aAAK,EAALA,EAAOM,aAAc,QAASvC,KAAIwC,GAAAA,OAAKC,KAAKC,UAAUP,EAAW,KAAM,MAGhGN,KAAKF,MAAMgB,QACpB"}

package/dist/ui/src/core/ui/components/error/errorBoundary.module.scss.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.default={errorBoundary:"errorBoundary-module_errorBoundary__gk9ps",StyledIcon:"errorBoundary-module_StyledIcon__IYHiU"};
+//# sourceMappingURL=errorBoundary.module.scss.js.map

package/dist/ui/src/core/ui/components/error/errorBoundary.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"errorBoundary.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/ui/src/core/ui/components/molecules/layouts/FlowLayout.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../../../../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),a=require("./flowLayout.module.scss.js"),o=require("../../container/LayoutBox.js"),r=require("../../../../utils/helpers/ui.js");const s=t.memo((s=>{let{itemDTOs:l,containerProps:n={},defaultItemLayoutProps:u={},numColumns:c=1,className:m="",beforeContent:i,afterContent:d,...p}=s;const y=t.useMemo((()=>c>0?{display:"grid",gridTemplateColumns:"".concat("1fr ".repeat(c)),width:"100%",height:"unset"}:{display:"flex"}),[c]);return React.createElement(o.LayoutBox,e.extends({width:"100%",column:!0,className:r.classNames(a.default.flowLayout,m)},p),i&&React.createElement("span",{className:a.default.beforeContent,tabIndex:-1},i),React.createElement(o.LayoutBox,e.extends({flexWrap:"wrap",gap:"1rem",style:y,width:"100%"},n),l.map((t=>{let{id:a,spanColumn:r,Component:s,layoutProps:l,...n}=t;return React.createElement(o.LayoutBox,e.extends({key:a},u,l,r?{style:{width:"calc(".concat(Math.round(100*r),"% - ").concat(16*r,"px)")}}:{}),React.createElement(s,n))}))),d&&React.createElement("span",{className:a.default.afterContent,tabIndex:-1},d))}));s.displayName="FlowLayout",exports.FlowLayout=s;
+"use strict";var e=require("../../../../../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),a=require("./flowLayout.module.scss.js"),o=require("../../container/layoutBox/LayoutBox.js"),l=require("../../../../utils/helpers/ui.js");const r=t.memo((r=>{let{itemDTOs:s,containerProps:n={},defaultItemLayoutProps:u={},numColumns:c=1,className:m="",beforeContent:i,afterContent:d,...p}=r;const y=t.useMemo((()=>c>0?{display:"grid",gridTemplateColumns:"".concat("1fr ".repeat(c)),width:"100%",height:"unset"}:{display:"flex"}),[c]);return React.createElement(o.LayoutBox,e.extends({width:"100%",column:!0,className:l.classNames(a.default.flowLayout,m)},p),i&&React.createElement("span",{className:a.default.beforeContent,tabIndex:-1},i),React.createElement(o.LayoutBox,e.extends({flexWrap:"wrap",gap:"1rem",style:y,width:"100%"},n),s.map((t=>{let{id:a,spanColumn:l,Component:r,layoutProps:s,...n}=t;return React.createElement(o.LayoutBox,e.extends({key:a},u,s,l?{style:{width:"calc(".concat(Math.round(100*l),"% - ").concat(16*l,"px)")}}:{}),React.createElement(r,n))}))),d&&React.createElement("span",{className:a.default.afterContent,tabIndex:-1},d))}));r.displayName="FlowLayout",exports.FlowLayout=r;
 //# sourceMappingURL=FlowLayout.js.map

package/dist/ui/src/core/ui/components/molecules/layouts/FlowLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlowLayout.js","sources":["../../../../../../../../src/core/ui/components/molecules/layouts/FlowLayout.tsx"],"sourcesContent":["import { memo, FC, useMemo } from 'react'\n\nimport { LayoutBox } from '../../container'\nimport { classNames } from '../../../../utils'\n\nimport type { FlowLayoutProps, ItemDTOType } from './flowLayout.types'\nimport classes from './flowLayout.module.scss'\n\n\n/**\n * Renders a flexible flow layout that automatically arranges child components based on specified columns and spacing.\n * This component is highly customizable through its props,\n * allowing for dynamic layouts responsive to the content and screen size.\n *\n * Utilizes a grid layout by default, falling back to flex layout\n * if `numColumns` is not greater than 0. Each item's width\n * and placement can be controlled via `spanColumn` on\n * individual items, with additional layout props provided for fine-tuning.\n *\n * @param {FlowLayoutProps} props The properties to configure the FlowLayout.\n * @param {ItemDTOType[]} props.itemDTOs Array of item DTOs defining the\n * components to render and their layout properties.\n * @param {Partial<LayoutBoxProps>} [props.containerProps={}] Optional.\n * Props to be spread onto the container `LayoutBox`, allowing for custom styles and behaviors.\n * @param {Partial<LayoutBoxProps>} [props.defaultItemLayoutProps={}] Optional.\n * Default layout properties applied to each item, unless overridden by item-specific props.\n * @param {number} [props.numColumns=1] Optional.\n *  Defines the number of columns in the grid. Affects item distribution and layout.\n * @param {string} [props.className=''] Optional.\n * Additional CSS class names to apply to the layout container for custom styling.\n * @param {ReactNode} [props.beforeContent] Optional.\n * Content to render before the main items. Useful for titles, descriptions, or custom components.\n * @param {ReactNode} [props.afterContent] Optional.\n Content to render after the main items. Can be used for additional information or actions related to the items.\n * @returns {React.ReactElement} The rendered FlowLayout component.\n */\nexport const FlowLayout: FC<FlowLayoutProps> = memo<FlowLayoutProps>(({\n  itemDTOs,\n  containerProps = {},\n  defaultItemLayoutProps = {},\n  numColumns = 1,\n  className = '',\n  beforeContent,\n  afterContent,\n  ...props\n}: FlowLayoutProps) => {\n  // Calculation for column styles based on the number of columns specified.\n  const columnStyles = useMemo(() => (numColumns > 0\n    ? {\n      display: 'grid',\n      gridTemplateColumns: `${'1fr '.repeat(numColumns)}`,\n      width: '100%',\n      height: 'unset',\n    }\n    : {\n      display: 'flex',\n    }\n  ), [numColumns])\n\n  return (\n    <LayoutBox\n      width='100%'\n      column\n      className={classNames(classes.flowLayout, className)}\n      {...props}\n    >\n      {beforeContent && (\n        <span className={classes.beforeContent} tabIndex={-1}>\n          {beforeContent}\n        </span>\n      )}\n      <LayoutBox\n        flexWrap='wrap'\n        gap='1rem'\n        style={columnStyles}\n        width='100%'\n        {...containerProps}\n      >\n        {itemDTOs.map(({ id, spanColumn, Component, layoutProps, ...props }: ItemDTOType) => (\n          <LayoutBox\n            key={id}\n            {...defaultItemLayoutProps}\n            {...layoutProps}\n            {...(spanColumn\n              ? { style: { width: `calc(${Math.round(spanColumn * 100)}% - ${spanColumn * 16}px)` } }\n              : {})}\n          >\n            <Component {...props} />\n          </LayoutBox>\n        ))}\n      </LayoutBox>\n      {afterContent && (\n        <span className={classes.afterContent} tabIndex={-1}>\n          {afterContent}\n        </span>\n      )}\n    </LayoutBox>\n  )\n})\n\nexport type FlowLayoutType = typeof FlowLayout;\n\n// Set display name for the component.\nFlowLayout.displayName = 'FlowLayout'\n"],"names":["FlowLayout","memo","_ref","itemDTOs","containerProps","defaultItemLayoutProps","numColumns","className","beforeContent","afterContent","props","columnStyles","useMemo","display","gridTemplateColumns","concat","repeat","width","height","React","createElement","LayoutBox","_extends","column","classNames","classes","flowLayout","default","tabIndex","flexWrap","gap","style","map","_ref2","id","spanColumn","Component","layoutProps","key","Math","round","displayName"],"mappings":"+OAoCaA,EAAkCC,EAAIA,MAAkBC,IAS9C,IAT+CC,SACpEA,EAAQC,eACRA,EAAiB,CAAE,EAAAC,uBACnBA,EAAyB,CAAE,EAAAC,WAC3BA,EAAa,EAACC,UACdA,EAAY,GAAEC,cACdA,EAAaC,aACbA,KACGC,GACaR,EAEhB,MAAMS,EAAeC,EAAAA,SAAQ,IAAON,EAAa,EAC7C,CACAO,QAAS,OACTC,oBAAmB,GAAAC,OAAK,OAAOC,OAAOV,IACtCW,MAAO,OACPC,OAAQ,SAER,CACAL,QAAS,SAEV,CAACP,IAEJ,OACEa,MAAAC,cAACC,EAASA,UAAAC,UAAA,CACRL,MAAM,OACNM,QAAM,EACNhB,UAAWiB,EAAUA,WAACC,UAAQC,WAAYnB,IACtCG,GAEHF,GACCW,MAAAC,cAAA,OAAA,CAAMb,UAAWkB,EAAOE,QAACnB,cAAeoB,UAAW,GAChDpB,GAGLW,MAAAC,cAACC,EAAAA,UAASC,EAAAA,QAAA,CACRO,SAAS,OACTC,IAAI,OACJC,MAAOpB,EACPM,MAAM,QACFb,GAEHD,EAAS6B,KAAIC,IAAA,IAACC,GAAEA,EAAEC,WAAEA,EAAUC,UAAEA,EAASC,YAAEA,KAAgB3B,GAAoBuB,EAAA,OAC9Ed,MAAAC,cAACC,EAASA,UAAAC,UAAA,CACRgB,IAAKJ,GACD7B,EACAgC,EACCF,EACD,CAAEJ,MAAO,CAAEd,cAAKF,OAAUwB,KAAKC,MAAmB,IAAbL,GAAiBpB,QAAAA,OAAoB,GAAboB,EAAe,SAC5E,CAAA,GAEJhB,MAAAC,cAACgB,EAAc1B,GACL,KAGfD,GACCU,MAAAC,cAAA,OAAA,CAAMb,UAAWkB,EAAOE,QAAClB,aAAcmB,UAAW,GAC/CnB,GAGK,IAOhBT,EAAWyC,YAAc"}
+{"version":3,"file":"FlowLayout.js","sources":["../../../../../../../../src/core/ui/components/molecules/layouts/FlowLayout.tsx"],"sourcesContent":["import { memo, FC, useMemo } from 'react'\n\nimport { LayoutBox } from '../../container'\nimport { classNames } from '../../../../utils'\n\nimport type { FlowLayoutProps, ItemDTOType } from './flowLayout.types'\nimport classes from './flowLayout.module.scss'\n\n\n/**\n * Renders a flexible flow layout that automatically arranges child components based on specified columns and spacing.\n * This component is highly customizable through its props,\n * allowing for dynamic layouts responsive to the content and screen size.\n *\n * Utilizes a grid layout by default, falling back to flex layout\n * if `numColumns` is not greater than 0. Each item's width\n * and placement can be controlled via `spanColumn` on\n * individual items, with additional layout props provided for fine-tuning.\n *\n * @param {FlowLayoutProps} props The properties to configure the FlowLayout.\n * @param {ItemDTOType[]} props.itemDTOs Array of item DTOs defining the\n * components to render and their layout properties.\n * @param {Partial<LayoutBoxProps>} [props.containerProps={}] Optional.\n * Props to be spread onto the container `LayoutBox`, allowing for custom styles and behaviors.\n * @param {Partial<LayoutBoxProps>} [props.defaultItemLayoutProps={}] Optional.\n * Default layout properties applied to each item, unless overridden by item-specific props.\n * @param {number} [props.numColumns=1] Optional.\n *  Defines the number of columns in the grid. Affects item distribution and layout.\n * @param {string} [props.className=''] Optional.\n * Additional CSS class names to apply to the layout container for custom styling.\n * @param {ReactNode} [props.beforeContent] Optional.\n * Content to render before the main items. Useful for titles, descriptions, or custom components.\n * @param {ReactNode} [props.afterContent] Optional.\n Content to render after the main items. Can be used for additional information or actions related to the items.\n * @returns {React.ReactElement} The rendered FlowLayout component.\n */\nexport const FlowLayout: FC<FlowLayoutProps> = memo<FlowLayoutProps>(({\n  itemDTOs,\n  containerProps = {},\n  defaultItemLayoutProps = {},\n  numColumns = 1,\n  className = '',\n  beforeContent,\n  afterContent,\n  ...props\n}: FlowLayoutProps) => {\n  // Calculation for column styles based on the number of columns specified.\n  const columnStyles = useMemo(() => (numColumns > 0\n    ? {\n      display: 'grid',\n      gridTemplateColumns: `${'1fr '.repeat(numColumns)}`,\n      width: '100%',\n      height: 'unset',\n    }\n    : {\n      display: 'flex',\n    }\n  ), [numColumns])\n\n  return (\n    <LayoutBox\n      width='100%'\n      column\n      className={classNames(classes.flowLayout, className)}\n      {...props}\n    >\n      {beforeContent && (\n        <span className={classes.beforeContent} tabIndex={-1}>\n          {beforeContent}\n        </span>\n      )}\n      <LayoutBox\n        flexWrap='wrap'\n        gap='1rem'\n        style={columnStyles}\n        width='100%'\n        {...containerProps}\n      >\n        {itemDTOs.map(({ id, spanColumn, Component, layoutProps, ...props }: ItemDTOType) => (\n          <LayoutBox\n            key={id}\n            {...defaultItemLayoutProps}\n            {...layoutProps}\n            {...(spanColumn\n              ? { style: { width: `calc(${Math.round(spanColumn * 100)}% - ${spanColumn * 16}px)` } }\n              : {})}\n          >\n            <Component {...props} />\n          </LayoutBox>\n        ))}\n      </LayoutBox>\n      {afterContent && (\n        <span className={classes.afterContent} tabIndex={-1}>\n          {afterContent}\n        </span>\n      )}\n    </LayoutBox>\n  )\n})\n\nexport type FlowLayoutType = typeof FlowLayout;\n\n// Set display name for the component.\nFlowLayout.displayName = 'FlowLayout'\n"],"names":["FlowLayout","memo","_ref","itemDTOs","containerProps","defaultItemLayoutProps","numColumns","className","beforeContent","afterContent","props","columnStyles","useMemo","display","gridTemplateColumns","concat","repeat","width","height","React","createElement","LayoutBox","_extends","column","classNames","classes","flowLayout","default","tabIndex","flexWrap","gap","style","map","_ref2","id","spanColumn","Component","layoutProps","key","Math","round","displayName"],"mappings":"yPAoCaA,EAAkCC,EAAIA,MAAkBC,IAS9C,IAT+CC,SACpEA,EAAQC,eACRA,EAAiB,CAAE,EAAAC,uBACnBA,EAAyB,CAAE,EAAAC,WAC3BA,EAAa,EAACC,UACdA,EAAY,GAAEC,cACdA,EAAaC,aACbA,KACGC,GACaR,EAEhB,MAAMS,EAAeC,EAAAA,SAAQ,IAAON,EAAa,EAC7C,CACAO,QAAS,OACTC,oBAAmB,GAAAC,OAAK,OAAOC,OAAOV,IACtCW,MAAO,OACPC,OAAQ,SAER,CACAL,QAAS,SAEV,CAACP,IAEJ,OACEa,MAAAC,cAACC,EAASA,UAAAC,UAAA,CACRL,MAAM,OACNM,QAAM,EACNhB,UAAWiB,EAAUA,WAACC,UAAQC,WAAYnB,IACtCG,GAEHF,GACCW,MAAAC,cAAA,OAAA,CAAMb,UAAWkB,EAAOE,QAACnB,cAAeoB,UAAW,GAChDpB,GAGLW,MAAAC,cAACC,EAAAA,UAASC,EAAAA,QAAA,CACRO,SAAS,OACTC,IAAI,OACJC,MAAOpB,EACPM,MAAM,QACFb,GAEHD,EAAS6B,KAAIC,IAAA,IAACC,GAAEA,EAAEC,WAAEA,EAAUC,UAAEA,EAASC,YAAEA,KAAgB3B,GAAoBuB,EAAA,OAC9Ed,MAAAC,cAACC,EAASA,UAAAC,UAAA,CACRgB,IAAKJ,GACD7B,EACAgC,EACCF,EACD,CAAEJ,MAAO,CAAEd,cAAKF,OAAUwB,KAAKC,MAAmB,IAAbL,GAAiBpB,QAAAA,OAAoB,GAAboB,EAAe,SAC5E,CAAA,GAEJhB,MAAAC,cAACgB,EAAc1B,GACL,KAGfD,GACCU,MAAAC,cAAA,OAAA,CAAMb,UAAWkB,EAAOE,QAAClB,aAAcmB,UAAW,GAC/CnB,GAGK,IAOhBT,EAAWyC,YAAc"}

package/dist/ui/src/core/ui/index.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("./utils/style.js"),o=require("./components/container/LayoutBox.js"),t=require("./components/container/layoutBox.types.js"),r=require("./components/container/Flex.js"),n=require("./components/container/Placeholder.js"),s=require("./components/container/CollapsibleContainer.js"),i=require("./components/container/ResizableContainer.js"),l=require("./components/field/Field.js"),c=require("./components/dividers/DividerLine.js"),a=require("./components/icon/IconBase.js"),p=require("./components/icon/Icon.js"),x=require("./components/icon/IconWC.js"),u=require("./components/molecules/layouts/FlowLayout.js");exports.calculateColors=e.calculateColors,exports.calculatePercColor=e.calculatePercColor,exports.convertHex=e.convertHex,exports.convertRGB=e.convertRGB,Object.defineProperty(exports,"defaultFontSize",{enumerable:!0,get:function(){return e.defaultFontSize}}),exports.pxToRem=e.pxToRem,exports.resolveStyleValue=e.resolveStyleValue,exports.setDefaultFontSize=e.setDefaultFontSize,exports.toHex=e.toHex,exports.LayoutBox=o.LayoutBox,exports.LayoutDirection=t.LayoutDirection,exports.Flex=r.Flex,exports.FlexTight=r.FlexTight,exports.FlexTightStyled=r.FlexTightStyled,exports.FlexWrapper=r.FlexWrapper,exports.Placeholder=n.Placeholder,exports.CollapsibleContainer=s.CollapsibleContainer,exports.ResizableContainer=i.ResizableContainer,exports.Field=l.Field,exports.FieldWrapper=l.FieldWrapper,exports.Select=l.Select,exports.setIconColor=l.setIconColor,exports.setIconComponent=l.setIconComponent,exports.DividerHorizontal=c.DividerHorizontal,exports.DividerLine=c.DividerLine,exports.DividerVertical=c.DividerVertical,exports.IconBase=a.IconBase,exports.Icon=p.Icon,exports.ESIcon=x.ESIcon,exports.ESIconBase=x.ESIconBase,exports.FlowLayout=u.FlowLayout;
+"use strict";var e=require("./utils/style.js"),o=require("./components/container/layoutBox/LayoutBox.js"),r=require("./components/container/layoutBox/layoutBox.types.js"),t=require("./components/container/lazyComponent/LazyComponent.js"),n=require("./components/container/Flex.js"),s=require("./components/container/Placeholder.js"),i=require("./components/container/CollapsibleContainer.js"),a=require("./components/container/ResizableContainer.js"),l=require("./components/error/ErrorBoundary.js"),p=require("./components/field/Field.js"),c=require("./components/dividers/DividerLine.js"),x=require("./components/icon/IconBase.js"),u=require("./components/icon/Icon.js"),d=require("./components/icon/IconWC.js"),y=require("./components/molecules/layouts/FlowLayout.js");exports.calculateColors=e.calculateColors,exports.calculatePercColor=e.calculatePercColor,exports.convertHex=e.convertHex,exports.convertRGB=e.convertRGB,Object.defineProperty(exports,"defaultFontSize",{enumerable:!0,get:function(){return e.defaultFontSize}}),exports.pxToRem=e.pxToRem,exports.resolveStyleValue=e.resolveStyleValue,exports.setDefaultFontSize=e.setDefaultFontSize,exports.toHex=e.toHex,exports.LayoutBox=o.LayoutBox,exports.LayoutDirection=r.LayoutDirection,exports.LazyComponent=t.LazyComponent,exports.PendingBoundary=t.PendingBoundary,exports.createLazyModule=t.createLazyModule,exports.createLazyModuleWithStore=t.createLazyModuleWithStore,exports.wrapPromise=t.wrapPromise,exports.Flex=n.Flex,exports.FlexTight=n.FlexTight,exports.FlexTightStyled=n.FlexTightStyled,exports.FlexWrapper=n.FlexWrapper,exports.Placeholder=s.Placeholder,exports.CollapsibleContainer=i.CollapsibleContainer,exports.ResizableContainer=a.ResizableContainer,exports.DefaultErrorComponent=l.DefaultErrorComponent,exports.ErrorBoundary=l.ErrorBoundary,exports.Field=p.Field,exports.FieldWrapper=p.FieldWrapper,exports.Select=p.Select,exports.setIconColor=p.setIconColor,exports.setIconComponent=p.setIconComponent,exports.DividerHorizontal=c.DividerHorizontal,exports.DividerLine=c.DividerLine,exports.DividerVertical=c.DividerVertical,exports.IconBase=x.IconBase,exports.Icon=u.Icon,exports.ESIcon=d.ESIcon,exports.ESIconBase=d.ESIconBase,exports.FlowLayout=y.FlowLayout;
 //# sourceMappingURL=index.js.map

package/dist/utils/esm/index.css

@@ -1,3 +1,12 @@
+.errorBoundary-module_errorBoundary__gk9ps {
+  background: #EFEFEF;
+  width: 100%;
+  height: 100%;
+}
+
+.errorBoundary-module_StyledIcon__IYHiU {
+  margin-right: 10px;
+}
 .icon-module_icon-base-parent__nOMvW {
   line-height: 1px !important;
 }
@@ -28,30 +37,6 @@
   width: var(--height);
   height: var(--width);
 }
-.layoutBox-module_layout-box__faPND {
-  display: flex;
-  position: relative;
-  flex-direction: row;
-  flex: 0;
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex-basis: auto;
-  flex-wrap: nowrap;
-  gap: 0;
-  text-align: left;
-  justify-content: flex-start;
-  align-items: flex-start;
-  align-self: auto;
-  margin: 0;
-  padding: 0;
-  width: auto;
-  height: auto;
-  max-width: none;
-  max-height: none;
-  min-width: 0;
-  min-height: 0;
-  border-radius: initial;
-}
 .CollapsibleContainer-module_collapsible-container__u0Jmm {
   transform-origin: 0% 0%;
   opacity: 0;
@@ -104,6 +89,73 @@
   height: var(--height);
   margin: var(--margin);
 }
+.layoutBox-module_layout-box__ZIID8 {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  flex: 0;
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+  flex-wrap: nowrap;
+  gap: 0;
+  text-align: left;
+  justify-content: flex-start;
+  align-items: flex-start;
+  align-self: auto;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  height: auto;
+  max-width: none;
+  max-height: none;
+  min-width: 0;
+  min-height: 0;
+  border-radius: initial;
+}
+.lazyComponent-module_loader__brMEW {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  display: grid;
+  place-items: center;
+}
+.lazyComponent-module_loader__brMEW .spinner {
+  animation: rotate 2s linear infinite;
+  z-index: 2;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -25px 0 0 -25px;
+  width: 50px;
+  height: 50px;
+  display: grid;
+  place-items: center;
+}
+.lazyComponent-module_loader__brMEW .spinner .path {
+  stroke: hsl(210, 92%, 44%);
+  stroke-linecap: round;
+  animation: dash 1.5s ease-in-out infinite;
+}
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
 .flowLayout-module_flowLayout__VHpnY {
   overflow: auto;
 }

package/dist/utils/index.css

@@ -1,3 +1,12 @@
+.errorBoundary-module_errorBoundary__gk9ps {
+  background: #EFEFEF;
+  width: 100%;
+  height: 100%;
+}
+
+.errorBoundary-module_StyledIcon__IYHiU {
+  margin-right: 10px;
+}
 .icon-module_icon-base-parent__nOMvW {
   line-height: 1px !important;
 }
@@ -28,30 +37,6 @@
   width: var(--height);
   height: var(--width);
 }
-.layoutBox-module_layout-box__faPND {
-  display: flex;
-  position: relative;
-  flex-direction: row;
-  flex: 0;
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex-basis: auto;
-  flex-wrap: nowrap;
-  gap: 0;
-  text-align: left;
-  justify-content: flex-start;
-  align-items: flex-start;
-  align-self: auto;
-  margin: 0;
-  padding: 0;
-  width: auto;
-  height: auto;
-  max-width: none;
-  max-height: none;
-  min-width: 0;
-  min-height: 0;
-  border-radius: initial;
-}
 .CollapsibleContainer-module_collapsible-container__u0Jmm {
   transform-origin: 0% 0%;
   opacity: 0;
@@ -104,6 +89,73 @@
   height: var(--height);
   margin: var(--margin);
 }
+.layoutBox-module_layout-box__ZIID8 {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  flex: 0;
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+  flex-wrap: nowrap;
+  gap: 0;
+  text-align: left;
+  justify-content: flex-start;
+  align-items: flex-start;
+  align-self: auto;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  height: auto;
+  max-width: none;
+  max-height: none;
+  min-width: 0;
+  min-height: 0;
+  border-radius: initial;
+}
+.lazyComponent-module_loader__brMEW {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  display: grid;
+  place-items: center;
+}
+.lazyComponent-module_loader__brMEW .spinner {
+  animation: rotate 2s linear infinite;
+  z-index: 2;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -25px 0 0 -25px;
+  width: 50px;
+  height: 50px;
+  display: grid;
+  place-items: center;
+}
+.lazyComponent-module_loader__brMEW .spinner .path {
+  stroke: hsl(210, 92%, 44%);
+  stroke-linecap: round;
+  animation: dash 1.5s ease-in-out infinite;
+}
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
 .flowLayout-module_flowLayout__VHpnY {
   overflow: auto;
 }