@e1011/es-kit 1.0.184 → 1.0.186

package/dist/ui/src/core/hooks/useParseProps.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("../utils/helpers/ui.js");exports.useParseProps=s=>e.useMemo((()=>r.parseProps(s)),[s]);
+"use strict";var e=require("react"),r=require("../utils/helpers/ui.js");exports.useParseProps=s=>e.useMemo((()=>r.parseProps(s)),[s]);
 //# sourceMappingURL=useParseProps.js.map

package/dist/ui/src/core/hooks/useParseProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useParseProps.js","sources":["../../../../../src/core/hooks/useParseProps.ts"],"sourcesContent":["import { useMemo } from 'react'\n\nimport { parseProps } from '../utils/helpers/ui'\n\n\nexport const useParseProps = (props: Record<string, unknown>): ReturnType<typeof parseProps> => {\n  const propsCategories = useMemo(() => parseProps(props), [props])\n\n  return propsCategories\n}\n"],"names":["props","useMemo","parseProps"],"mappings":"qJAK8BA,GACJC,EAAAA,SAAQ,IAAMC,EAAAA,WAAWF,IAAQ,CAACA"}
+{"version":3,"file":"useParseProps.js","sources":["../../../../../src/core/hooks/useParseProps.ts"],"sourcesContent":["import { useMemo } from 'react'\n\nimport { parseProps } from '../utils/helpers/ui'\n\n\nexport const useParseProps = (props: Record<string, unknown>): ReturnType<typeof parseProps> => {\n  const propsCategories = useMemo(() => parseProps(props), [props])\n\n  return propsCategories\n}\n"],"names":["props","useMemo","parseProps"],"mappings":"8FAK8BA,GACJC,EAAAA,SAAQ,IAAMC,EAAAA,WAAWF,IAAQ,CAACA"}

package/dist/ui/src/core/hooks/useResize.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),require("../../../node_modules/core-js/modules/web.dom-collections.iterator.js");var e=require("react"),t=require("../../../node_modules/lodash-es/debounce.js");exports.useResize=function(){let i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:250,n=arguments.length>1?arguments[1]:void 0;const[r,u]=e.useState({width:void 0,height:void 0}),l=e.useRef({width:0,height:0}),o=e.useRef(),d=e.useRef(),c=e.useMemo((()=>t.default((e=>{var t,i,r,d;const c=e[0].contentRect.width,s=e[0].contentRect.height;(null===(t=l.current)||void 0===t?void 0:t.width)===c&&(null===(i=l.current)||void 0===i?void 0:i.height)===s||(l.current={width:c,height:s},(n||u)({width:null==o||null===(r=o.current)||void 0===r?void 0:r.clientWidth,height:null==o||null===(d=o.current)||void 0===d?void 0:d.clientHeight}))}),i)),[n,i]);return e.useLayoutEffect((()=>{let e,t;var i,r;null!=o&&o.current&&(t=null==o?void 0:o.current,e=new ResizeObserver(c),e.observe(t),(n||u)({width:null==o||null===(i=o.current)||void 0===i?void 0:i.clientWidth,height:null==o||null===(r=o.current)||void 0===r?void 0:r.clientHeight}));const l=()=>{var i,n;null===(i=e)||void 0===i||null===(n=i.unobserve)||void 0===n||n.call(i,t)};return d.current=l,l}),[c,o,n]),[o,r,d.current]};
+"use strict";require("../../../node_modules/core-js/modules/web.dom-collections.iterator.js");var e=require("react"),t=require("../../../node_modules/lodash-es/debounce.js");exports.useResize=function(){let i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:250,n=arguments.length>1?arguments[1]:void 0;const[r,u]=e.useState({width:void 0,height:void 0}),l=e.useRef({width:0,height:0}),o=e.useRef(),d=e.useRef(),c=e.useMemo((()=>t.default((e=>{var t,i,r,d;const c=e[0].contentRect.width,h=e[0].contentRect.height;(null===(t=l.current)||void 0===t?void 0:t.width)===c&&(null===(i=l.current)||void 0===i?void 0:i.height)===h||(l.current={width:c,height:h},(n||u)({width:null==o||null===(r=o.current)||void 0===r?void 0:r.clientWidth,height:null==o||null===(d=o.current)||void 0===d?void 0:d.clientHeight}))}),i)),[n,i]);return e.useLayoutEffect((()=>{let e,t;var i,r;null!=o&&o.current&&(t=null==o?void 0:o.current,e=new ResizeObserver(c),e.observe(t),(n||u)({width:null==o||null===(i=o.current)||void 0===i?void 0:i.clientWidth,height:null==o||null===(r=o.current)||void 0===r?void 0:r.clientHeight}));const l=()=>{var i,n;null===(i=e)||void 0===i||null===(n=i.unobserve)||void 0===n||n.call(i,t)};return d.current=l,l}),[c,o,n]),[o,r,d.current]};
 //# sourceMappingURL=useResize.js.map

package/dist/ui/src/core/hooks/useResize.js.map

@@ -1 +1 @@
-{"version":3,"file":"useResize.js","sources":["../../../../../src/core/hooks/useResize.ts"],"sourcesContent":["import { MutableRefObject, useLayoutEffect, useMemo, useState, useRef } from 'react'\nimport debounce from 'lodash-es/debounce'\n\nexport type WrapperSize = {width: undefined | number; height: undefined | number}\n\n\ntype Unobserver = () => (null | void)\n\nexport type UseResizeCallBack = (wrapperSize: WrapperSize) => void\n\n// eslint-disable-next-line default-param-last\nexport const useResize = (debounceDelay = 250, callBack?: UseResizeCallBack): [\n  MutableRefObject<HTMLElement | null | undefined>, WrapperSize, Unobserver | undefined] => {\n  const [containerSize, setContainerSize]\n    = useState<WrapperSize>({ width: undefined, height: undefined })\n\n  const lastResizeWidthRef = useRef<WrapperSize>({ width: 0, height: 0 })\n  const containerRef: MutableRefObject<HTMLElement | undefined | null> = useRef<HTMLElement | undefined | null>()\n  const unobserverRef = useRef<Unobserver>()\n\n  const debouncedResizeWrapper = useMemo(() => debounce((entries) => {\n    const newResizeWidth = entries[0].contentRect.width\n    const newResizeHeight = entries[0].contentRect.height\n\n    if (lastResizeWidthRef.current?.width === newResizeWidth\n      && lastResizeWidthRef.current?.height === newResizeHeight) {\n      return\n    }\n    lastResizeWidthRef.current = { width: newResizeWidth, height: newResizeHeight }\n\n    // eslint-disable-next-line semi-style\n    ;(callBack || setContainerSize)({\n      width: containerRef?.current?.clientWidth,\n      height: containerRef?.current?.clientHeight,\n    })\n  }, debounceDelay), [callBack, debounceDelay])\n\n  useLayoutEffect(() => {\n    let resizeObserver: ResizeObserver\n    let containerElement: HTMLElement\n\n    if (containerRef?.current) {\n      containerElement = containerRef?.current\n      resizeObserver = new ResizeObserver(debouncedResizeWrapper)\n      resizeObserver.observe(containerElement as Element)\n\n      // eslint-disable-next-line semi-style\n      ;(callBack || setContainerSize)({\n        width: containerRef?.current?.clientWidth,\n        height: containerRef?.current?.clientHeight,\n      })\n    }\n\n    const unobserver = () => {\n      resizeObserver?.unobserve?.(containerElement as Element)\n    }\n\n    // setUnobserver(unobserver)\n    unobserverRef.current = unobserver\n\n    return unobserver\n  }, [debouncedResizeWrapper, containerRef, callBack])\n\n  return [containerRef, containerSize, unobserverRef.current]\n}\n"],"names":["debounceDelay","arguments","length","undefined","callBack","containerSize","setContainerSize","useState","width","height","lastResizeWidthRef","useRef","containerRef","unobserverRef","debouncedResizeWrapper","useMemo","debounce","entries","_lastResizeWidthRef$c","_lastResizeWidthRef$c2","_containerRef$current","_containerRef$current2","newResizeWidth","contentRect","newResizeHeight","current","clientWidth","clientHeight","useLayoutEffect","resizeObserver","containerElement","_containerRef$current3","_containerRef$current4","ResizeObserver","observe","unobserver","_resizeObserver","_resizeObserver$unobs","unobserve","call"],"mappings":"uPAWyB,WACmE,IADlEA,EAAaC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,IAAKG,EAA4BH,UAAAC,OAAAD,EAAAA,kBAAAE,EAEzE,MAAOE,EAAeC,GAClBC,WAAsB,CAAEC,WAAOL,EAAWM,YAAQN,IAEhDO,EAAqBC,EAAAA,OAAoB,CAAEH,MAAO,EAAGC,OAAQ,IAC7DG,EAAiED,EAAAA,SACjEE,EAAgBF,EAAAA,SAEhBG,EAAyBC,EAAAA,SAAQ,IAAMC,EAAAA,SAAUC,IAAY,IAAAC,EAAAC,EAAAC,EAAAC,EACjE,MAAMC,EAAiBL,EAAQ,GAAGM,YAAYf,MACxCgB,EAAkBP,EAAQ,GAAGM,YAAYd,QAEjBS,QAA1BA,EAAAR,EAAmBe,eAAnBP,IAA0BA,OAA1BA,EAAAA,EAA4BV,SAAUc,IACX,QAA1BH,EAAAT,EAAmBe,eAAO,IAAAN,OAAA,EAA1BA,EAA4BV,UAAWe,IAG5Cd,EAAmBe,QAAU,CAAEjB,MAAOc,EAAgBb,OAAQe,IAG5DpB,GAAYE,GAAkB,CAC9BE,MAAOI,SAAqBQ,QAATA,EAAZR,EAAca,eAAdL,IAAqBA,OAArBA,EAAAA,EAAuBM,YAC9BjB,OAAQG,SAAqB,QAATS,EAAZT,EAAca,eAAO,IAAAJ,OAAA,EAArBA,EAAuBM,eAC/B,GACD3B,IAAgB,CAACI,EAAUJ,IA4B9B,OA1BA4B,EAAAA,iBAAgB,KACd,IAAIC,EACAC,EAEuB,IAAAC,EAAAC,EAAvBpB,SAAAA,EAAca,UAChBK,EAAmBlB,aAAAA,EAAAA,EAAca,QACjCI,EAAiB,IAAII,eAAenB,GACpCe,EAAeK,QAAQJ,IAGrB1B,GAAYE,GAAkB,CAC9BE,MAAOI,SAAqBmB,QAATA,EAAZnB,EAAca,eAAdM,IAAqBA,OAArBA,EAAAA,EAAuBL,YAC9BjB,OAAQG,SAAqB,QAAToB,EAAZpB,EAAca,eAAO,IAAAO,OAAA,EAArBA,EAAuBL,gBAInC,MAAMQ,EAAaA,KAAM,IAAAC,EAAAC,EACT,QAAdD,EAAAP,SAAcQ,IAAAD,GAAWC,QAAXA,EAAdD,EAAgBE,qBAASD,GAAzBA,EAAAE,KAAAH,EAA4BN,EAA4B,EAM1D,OAFAjB,EAAcY,QAAUU,EAEjBA,CAAU,GAChB,CAACrB,EAAwBF,EAAcR,IAEnC,CAACQ,EAAcP,EAAeQ,EAAcY,QACrD"}
+{"version":3,"file":"useResize.js","sources":["../../../../../src/core/hooks/useResize.ts"],"sourcesContent":["import { MutableRefObject, useLayoutEffect, useMemo, useState, useRef } from 'react'\nimport debounce from 'lodash-es/debounce'\n\nexport type WrapperSize = {width: undefined | number; height: undefined | number}\n\n\ntype Unobserver = () => (null | void)\n\nexport type UseResizeCallBack = (wrapperSize: WrapperSize) => void\n\n// eslint-disable-next-line default-param-last\nexport const useResize = (debounceDelay = 250, callBack?: UseResizeCallBack): [\n  MutableRefObject<HTMLElement | null | undefined>, WrapperSize, Unobserver | undefined] => {\n  const [containerSize, setContainerSize]\n    = useState<WrapperSize>({ width: undefined, height: undefined })\n\n  const lastResizeWidthRef = useRef<WrapperSize>({ width: 0, height: 0 })\n  const containerRef: MutableRefObject<HTMLElement | undefined | null> = useRef<HTMLElement | undefined | null>()\n  const unobserverRef = useRef<Unobserver>()\n\n  const debouncedResizeWrapper = useMemo(() => debounce((entries) => {\n    const newResizeWidth = entries[0].contentRect.width\n    const newResizeHeight = entries[0].contentRect.height\n\n    if (lastResizeWidthRef.current?.width === newResizeWidth\n      && lastResizeWidthRef.current?.height === newResizeHeight) {\n      return\n    }\n    lastResizeWidthRef.current = { width: newResizeWidth, height: newResizeHeight }\n\n    // eslint-disable-next-line semi-style\n    ;(callBack || setContainerSize)({\n      width: containerRef?.current?.clientWidth,\n      height: containerRef?.current?.clientHeight,\n    })\n  }, debounceDelay), [callBack, debounceDelay])\n\n  useLayoutEffect(() => {\n    let resizeObserver: ResizeObserver\n    let containerElement: HTMLElement\n\n    if (containerRef?.current) {\n      containerElement = containerRef?.current\n      resizeObserver = new ResizeObserver(debouncedResizeWrapper)\n      resizeObserver.observe(containerElement as Element)\n\n      // eslint-disable-next-line semi-style\n      ;(callBack || setContainerSize)({\n        width: containerRef?.current?.clientWidth,\n        height: containerRef?.current?.clientHeight,\n      })\n    }\n\n    const unobserver = () => {\n      resizeObserver?.unobserve?.(containerElement as Element)\n    }\n\n    // setUnobserver(unobserver)\n    unobserverRef.current = unobserver\n\n    return unobserver\n  }, [debouncedResizeWrapper, containerRef, callBack])\n\n  return [containerRef, containerSize, unobserverRef.current]\n}\n"],"names":["debounceDelay","arguments","length","undefined","callBack","containerSize","setContainerSize","useState","width","height","lastResizeWidthRef","useRef","containerRef","unobserverRef","debouncedResizeWrapper","useMemo","debounce","entries","_lastResizeWidthRef$c","_lastResizeWidthRef$c2","_containerRef$current","_containerRef$current2","newResizeWidth","contentRect","newResizeHeight","current","clientWidth","clientHeight","useLayoutEffect","resizeObserver","containerElement","_containerRef$current3","_containerRef$current4","ResizeObserver","observe","unobserver","_resizeObserver","_resizeObserver$unobs","unobserve","call"],"mappings":"gMAWyB,WACmE,IADlEA,EAAaC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,IAAKG,EAA4BH,UAAAC,OAAAD,EAAAA,kBAAAE,EAEzE,MAAOE,EAAeC,GAClBC,WAAsB,CAAEC,WAAOL,EAAWM,YAAQN,IAEhDO,EAAqBC,EAAAA,OAAoB,CAAEH,MAAO,EAAGC,OAAQ,IAC7DG,EAAiED,EAAAA,SACjEE,EAAgBF,EAAAA,SAEhBG,EAAyBC,EAAAA,SAAQ,IAAMC,EAAAA,SAAUC,IAAY,IAAAC,EAAAC,EAAAC,EAAAC,EACjE,MAAMC,EAAiBL,EAAQ,GAAGM,YAAYf,MACxCgB,EAAkBP,EAAQ,GAAGM,YAAYd,QAEjBS,QAA1BA,EAAAR,EAAmBe,eAAnBP,IAA0BA,OAA1BA,EAAAA,EAA4BV,SAAUc,IACX,QAA1BH,EAAAT,EAAmBe,eAAO,IAAAN,OAAA,EAA1BA,EAA4BV,UAAWe,IAG5Cd,EAAmBe,QAAU,CAAEjB,MAAOc,EAAgBb,OAAQe,IAG5DpB,GAAYE,GAAkB,CAC9BE,MAAOI,SAAqBQ,QAATA,EAAZR,EAAca,eAAdL,IAAqBA,OAArBA,EAAAA,EAAuBM,YAC9BjB,OAAQG,SAAqB,QAATS,EAAZT,EAAca,eAAO,IAAAJ,OAAA,EAArBA,EAAuBM,eAC/B,GACD3B,IAAgB,CAACI,EAAUJ,IA4B9B,OA1BA4B,EAAAA,iBAAgB,KACd,IAAIC,EACAC,EAEuB,IAAAC,EAAAC,EAAvBpB,SAAAA,EAAca,UAChBK,EAAmBlB,aAAAA,EAAAA,EAAca,QACjCI,EAAiB,IAAII,eAAenB,GACpCe,EAAeK,QAAQJ,IAGrB1B,GAAYE,GAAkB,CAC9BE,MAAOI,SAAqBmB,QAATA,EAAZnB,EAAca,eAAdM,IAAqBA,OAArBA,EAAAA,EAAuBL,YAC9BjB,OAAQG,SAAqB,QAAToB,EAAZpB,EAAca,eAAO,IAAAO,OAAA,EAArBA,EAAuBL,gBAInC,MAAMQ,EAAaA,KAAM,IAAAC,EAAAC,EACT,QAAdD,EAAAP,SAAcQ,IAAAD,GAAWC,QAAXA,EAAdD,EAAgBE,qBAASD,GAAzBA,EAAAE,KAAAH,EAA4BN,EAA4B,EAM1D,OAFAjB,EAAcY,QAAUU,EAEjBA,CAAU,GAChB,CAACrB,EAAwBF,EAAcR,IAEnC,CAACQ,EAAcP,EAAeQ,EAAcY,QACrD"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../../_virtual/_rollupPluginBabelHelpers.js");require("../../../../../node_modules/core-js/modules/web.dom-collections.iterator.js");var t=require("react"),l=require("../../../hooks/useParseProps.js"),s=require("./CollapsibleContainer.module.scss.js");const a={width:"scrollWidth",height:"scrollHeight"},o=t.memo((o=>{let{collapsed:r=!1,collapseHandler:i,children:n,horizontal:u=!1,className:c="",id:d,...p}=o;const h=t.useRef(null),[m,f]=t.useState(0),{dataProps:v,restProps:x}=l.useParseProps(p),P=!u;t.useEffect((()=>{null==i||i(r)}),[i,r]),t.useLayoutEffect((()=>{if(null!=h&&h.current){const e=P?"height":"width";setTimeout((()=>{null!=h&&h.current&&f(h.current[a[e]])}),100)}}),[h,P]);const b=t.useMemo((()=>({"--prop-name":P?"height":"width","--prop-max-name":P?"max-height":"max-width","--prop-value":"".concat(m,"px"),...x})),[P,x,m]),j=t.useMemo((()=>{const e=[P?s.default.vertical:s.default.horizontal];return r&&m&&null!=m&&e.push(s.default.collapsed),!r&&m&&null!=m&&e.push(s.default.expanded),e.join(" ")}),[r,m,P]);return React.createElement("div",e.extends({id:"".concat(void 0!==d&&d||d),className:"".concat(s.default["collapsible-container"]," ").concat(j," ").concat(c," "),ref:h,style:b},v,{"data-testid":v.dataTestId||v["data-testid"]||d}),n)}));o.displayName="CollapsibleContainer",exports.CollapsibleContainer=o;
+"use strict";var e=require("../../../../../_virtual/_rollupPluginBabelHelpers.js");require("../../../../../node_modules/core-js/modules/web.dom-collections.iterator.js");var t=require("react"),l=require("../../../hooks/useParseProps.js"),a=require("./CollapsibleContainer.module.scss.js");const s={width:"scrollWidth",height:"scrollHeight"},o=t.memo((o=>{let{collapsed:r=!1,collapseHandler:i,children:n,horizontal:u=!1,className:c="",id:d,...p}=o;const h=t.useRef(null),[m,f]=t.useState(0),{dataProps:v,restProps:x}=l.useParseProps(p),P=!u;t.useEffect((()=>{null==i||i(r)}),[i,r]),t.useLayoutEffect((()=>{if(null!=h&&h.current){const e=P?"height":"width";setTimeout((()=>{null!=h&&h.current&&f(h.current[s[e]])}),100)}}),[h,P]);const b=t.useMemo((()=>({"--prop-name":P?"height":"width","--prop-max-name":P?"max-height":"max-width","--prop-value":"".concat(m,"px"),...x})),[P,x,m]),g=t.useMemo((()=>{const e=[P?a.default.vertical:a.default.horizontal];return r&&m&&null!=m&&e.push(a.default.collapsed),!r&&m&&null!=m&&e.push(a.default.expanded),e.join(" ")}),[r,m,P]);return React.createElement("div",e.extends({id:"".concat(void 0!==d&&d||d),className:"".concat(a.default["collapsible-container"]," ").concat(g," ").concat(c," "),ref:h,style:b},v,{"data-testid":v.dataTestId||v["data-testid"]||d}),n)}));o.displayName="CollapsibleContainer",exports.CollapsibleContainer=o;
 //# sourceMappingURL=CollapsibleContainer.js.map

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":"wVAYA,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.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/Flex.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n,l,i,a,d=r(require("styled-components"));const u={start:"flex-start","flex-start":"flex-start",end:"flex-end","flex-end":"flex-end"},o=e=>e&&u[e]||e,s=t.memo(d.default.div(n||(n=e.taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  flex-direction: ",";\n  flex: ",";\n  flex-grow: ",";\n  flex-shrink: ",";\n  flex-basis: ",";\n  flex-wrap: ",";\n  gap: ",";\n  text-align: ",";\n  justify-content: ",";\n  align-items: ",";\n  align-self: ",";\n  margin: ",";\n  padding: ",";\n  width: ",";\n  height: ",";\n  max-width: ",";\n  max-height: ",";\n  min-width: ",";\n  min-height: ",";\n  border-radius: ",";\n"])),(e=>{let{direction:t}=e;return t||"row"}),(e=>{let{flex:t}=e;return void 0!==t?t:"0"}),(e=>{let{flexGrow:t}=e;return void 0!==t?t:"0"}),(e=>{let{flexShrink:t}=e;return void 0!==t?t:"0"}),(e=>{let{flexBasis:t}=e;return t||"auto"}),(e=>{let{flexWrap:t}=e;return t||"nowrap"}),(e=>{let{gap:t}=e;return void 0!==t?t:"0"}),(e=>{let{alignText:t}=e;return t||"left"}),(e=>{let{justify:t}=e;return o(t)||"flex-start"}),(e=>{let{align:t}=e;return o(t)||"flex-start"}),(e=>{let{alignSelf:t}=e;return t||"auto"}),(e=>{let{margin:t}=e;return t||"0"}),(e=>{let{padding:t}=e;return t||"0"}),(e=>{let{width:t}=e;return t||"auto"}),(e=>{let{height:t}=e;return t||"auto"}),(e=>{let{maxWidth:t}=e;return t||"none"}),(e=>{let{maxHeight:t}=e;return t||"none"}),(e=>{let{minWidth:t}=e;return t||"0"===t?t:"0"}),(e=>{let{minHeight:t}=e;return t||"0"}),(e=>{let{borderRadius:t}=e;return t||"initial"}))),x=t.memo(d.default(s).attrs((e=>({width:e.width||"100%",height:e.height||"100%",justify:e.justify||"center",align:e.align||"center",...e})))(l||(l=e.taggedTemplateLiteral([""])))),f=t.memo(d.default(s).attrs((e=>({width:"initial",...e})))(i||(i=e.taggedTemplateLiteral([""])))),g=t.memo(d.default(s).attrs((e=>({width:"initial",style:{text:"blue",padding:"1rem",border:"1px solid green"},...e})))(a||(a=e.taggedTemplateLiteral([""]))));exports.Flex=s,exports.FlexTight=f,exports.FlexTightStyled=g,exports.FlexWrapper=x;
+"use strict";var e,t,r,n,i=require("../../../../../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),a=require("styled-components");const d={start:"flex-start","flex-start":"flex-start",end:"flex-end","flex-end":"flex-end"},u=e=>e&&d[e]||e,s=l.memo(a.div(e||(e=i.taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  flex-direction: ",";\n  flex: ",";\n  flex-grow: ",";\n  flex-shrink: ",";\n  flex-basis: ",";\n  flex-wrap: ",";\n  gap: ",";\n  text-align: ",";\n  justify-content: ",";\n  align-items: ",";\n  align-self: ",";\n  margin: ",";\n  padding: ",";\n  width: ",";\n  height: ",";\n  max-width: ",";\n  max-height: ",";\n  min-width: ",";\n  min-height: ",";\n  border-radius: ",";\n"])),(e=>{let{direction:t}=e;return t||"row"}),(e=>{let{flex:t}=e;return void 0!==t?t:"0"}),(e=>{let{flexGrow:t}=e;return void 0!==t?t:"0"}),(e=>{let{flexShrink:t}=e;return void 0!==t?t:"0"}),(e=>{let{flexBasis:t}=e;return t||"auto"}),(e=>{let{flexWrap:t}=e;return t||"nowrap"}),(e=>{let{gap:t}=e;return void 0!==t?t:"0"}),(e=>{let{alignText:t}=e;return t||"left"}),(e=>{let{justify:t}=e;return u(t)||"flex-start"}),(e=>{let{align:t}=e;return u(t)||"flex-start"}),(e=>{let{alignSelf:t}=e;return t||"auto"}),(e=>{let{margin:t}=e;return t||"0"}),(e=>{let{padding:t}=e;return t||"0"}),(e=>{let{width:t}=e;return t||"auto"}),(e=>{let{height:t}=e;return t||"auto"}),(e=>{let{maxWidth:t}=e;return t||"none"}),(e=>{let{maxHeight:t}=e;return t||"none"}),(e=>{let{minWidth:t}=e;return t||"0"===t?t:"0"}),(e=>{let{minHeight:t}=e;return t||"0"}),(e=>{let{borderRadius:t}=e;return t||"initial"}))),g=l.memo(a(s).attrs((e=>({width:e.width||"100%",height:e.height||"100%",justify:e.justify||"center",align:e.align||"center",...e})))(t||(t=i.taggedTemplateLiteral([""])))),x=l.memo(a(s).attrs((e=>({width:"initial",...e})))(r||(r=i.taggedTemplateLiteral([""])))),o=l.memo(a(s).attrs((e=>({width:"initial",style:{text:"blue",padding:"1rem",border:"1px solid green"},...e})))(n||(n=i.taggedTemplateLiteral([""]))));exports.Flex=s,exports.FlexTight=x,exports.FlexTightStyled=o,exports.FlexWrapper=g;
 //# sourceMappingURL=Flex.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","sources":["../../../../../../../src/core/ui/components/container/Flex.ts"],"sourcesContent":["import { memo } from 'react'\nimport styled from 'styled-components'\n\nexport type FlexProps = {\n  flex?: string\n  flexGrow?: string | number\n  alignText?: 'center' | 'right' | 'left'\n  direction?: string\n  flexShrink?: string | number\n  flexBasis?: string\n  flexWrap?: string\n  justify?: string\n  align?: string\n  alignSelf?: string\n  margin?: string\n  padding?: string\n  width?: string\n  height?: string\n  maxWidth?: string\n  maxHeight?: string\n  minWidth?: string\n  minHeight?: string\n  gap?: string\n  css?: string\n  borderRadius?: string\n}\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\nconst resolveFlexProps = (value?: string): string | undefined => (value ? (flexValueMap[value] || value) : value)\n\nexport const Flex = memo(styled.div<FlexProps>`\n  display: flex;\n  position: relative;\n  flex-direction: ${({ direction }: Partial<FlexProps>) => direction || 'row'};\n  flex: ${({ flex }: Partial<FlexProps>) => (flex !== undefined ? flex : '0')};\n  flex-grow: ${({ flexGrow }: Partial<FlexProps>) => (flexGrow !== undefined ? flexGrow : '0')};\n  flex-shrink: ${({ flexShrink }: Partial<FlexProps>) => (flexShrink !== undefined ? flexShrink : '0')};\n  flex-basis: ${({ flexBasis }: Partial<FlexProps>) => flexBasis || 'auto'};\n  flex-wrap: ${({ flexWrap }: Partial<FlexProps>) => flexWrap || 'nowrap'};\n  gap: ${({ gap }: Partial<FlexProps>) => (gap !== undefined ? gap : '0')};\n  text-align: ${({ alignText }: Partial<FlexProps>) => alignText || 'left'};\n  justify-content: ${({ justify }: Partial<FlexProps>) => resolveFlexProps(justify) || 'flex-start'};\n  align-items: ${({ align }: Partial<FlexProps>) => resolveFlexProps(align) || 'flex-start'};\n  align-self: ${({ alignSelf }: Partial<FlexProps>) => alignSelf || 'auto'};\n  margin: ${({ margin }: Partial<FlexProps>) => margin || '0'};\n  padding: ${({ padding }: Partial<FlexProps>) => padding || '0'};\n  width: ${({ width }: Partial<FlexProps>) => width || 'auto'};\n  height: ${({ height }: Partial<FlexProps>) => height || 'auto'};\n  max-width: ${({ maxWidth }: Partial<FlexProps>) => maxWidth || 'none'};\n  max-height: ${({ maxHeight }: Partial<FlexProps>) => maxHeight || 'none'};\n  min-width: ${({ minWidth }: Partial<FlexProps>) => ((minWidth || minWidth === '0') ? minWidth : '0')};\n  min-height: ${({ minHeight }: Partial<FlexProps>) => minHeight || '0'};\n  border-radius: ${({ borderRadius }: Partial<FlexProps>) => borderRadius || 'initial'};\n`)\n\n// default flex centralized, 100% width and height\nexport const FlexWrapper = memo(styled(Flex).attrs((props: Partial<FlexProps>) => (\n  {\n    width: props.width || '100%',\n    height: props.height || '100%',\n    justify: props.justify || 'center',\n    align: props.align || 'center',\n    ...props,\n  }\n))``)\n\nexport const FlexTight = memo(styled(Flex).attrs((props: Partial<FlexProps>) => ({\n  width: 'initial',\n  ...props,\n}))``)\n\nexport const FlexTightStyled = memo(styled(Flex).attrs((props: Partial<FlexProps>) => ({\n  width: 'initial',\n  style: {\n    text: 'blue',\n    padding: '1rem',\n    border: '1px solid green',\n  },\n  ...props,\n}))``)\n"],"names":["flexValueMap","start","end","resolveFlexProps","value","Flex","memo","styled","div","_templateObject","_taggedTemplateLiteral","taggedTemplateLiteral","_ref","direction","_ref2","flex","undefined","_ref3","flexGrow","_ref4","flexShrink","_ref5","flexBasis","_ref6","flexWrap","_ref7","gap","_ref8","alignText","_ref9","justify","_ref10","align","_ref11","alignSelf","_ref12","margin","_ref13","padding","_ref14","width","_ref15","height","_ref16","maxWidth","_ref17","maxHeight","_ref18","minWidth","_ref19","minHeight","_ref20","borderRadius","FlexWrapper","attrs","props","_templateObject2","FlexTight","_templateObject3","FlexTightStyled","style","text","border","_templateObject4"],"mappings":"mRA2BA,MAAMA,EAAuC,CAC3CC,MAAO,aACP,aAAc,aACdC,IAAK,WACL,WAAY,YAGRC,EAAoBC,GAAwCA,GAASJ,EAAaI,IAAmBA,EAE9FC,EAAOC,EAAIA,KAACC,EAAM,QAACC,IAAGC,IAAAA,EAAAC,EAAAC,scAGfC,IAAA,IAACC,UAAEA,GAA+BD,EAAA,OAAKC,GAAa,KAAK,IACnEC,IAAA,IAACC,KAAEA,GAA0BD,EAAA,YAAeE,IAATD,EAAqBA,EAAO,GAAG,IAC7DE,IAAA,IAACC,SAAEA,GAA8BD,EAAA,YAAmBD,IAAbE,EAAyBA,EAAW,GAAG,IAC5EC,IAAA,IAACC,WAAEA,GAAgCD,EAAA,YAAqBH,IAAfI,EAA2BA,EAAa,GAAG,IACrFC,IAAA,IAACC,UAAEA,GAA+BD,EAAA,OAAKC,GAAa,MAAM,IAC3DC,IAAA,IAACC,SAAEA,GAA8BD,EAAA,OAAKC,GAAY,QAAQ,IAChEC,IAAA,IAACC,IAAEA,GAAyBD,EAAA,YAAcT,IAARU,EAAoBA,EAAM,GAAG,IACxDC,IAAA,IAACC,UAAEA,GAA+BD,EAAA,OAAKC,GAAa,MAAM,IACrDC,IAAA,IAACC,QAAEA,GAA6BD,EAAA,OAAK1B,EAAiB2B,IAAY,YAAY,IAClFC,IAAA,IAACC,MAAEA,GAA2BD,EAAA,OAAK5B,EAAiB6B,IAAU,YAAY,IAC3EC,IAAA,IAACC,UAAEA,GAA+BD,EAAA,OAAKC,GAAa,MAAM,IAC9DC,IAAA,IAACC,OAAEA,GAA4BD,EAAA,OAAKC,GAAU,GAAG,IAChDC,IAAA,IAACC,QAAEA,GAA6BD,EAAA,OAAKC,GAAW,GAAG,IACrDC,IAAA,IAACC,MAAEA,GAA2BD,EAAA,OAAKC,GAAS,MAAM,IACjDC,IAAA,IAACC,OAAEA,GAA4BD,EAAA,OAAKC,GAAU,MAAM,IACjDC,IAAA,IAACC,SAAEA,GAA8BD,EAAA,OAAKC,GAAY,MAAM,IACvDC,IAAA,IAACC,UAAEA,GAA+BD,EAAA,OAAKC,GAAa,MAAM,IAC3DC,IAAA,IAACC,SAAEA,GAA8BD,EAAA,OAAOC,GAAyB,MAAbA,EAAoBA,EAAW,GAAG,IACrFC,IAAA,IAACC,UAAEA,GAA+BD,EAAA,OAAKC,GAAa,GAAG,IACpDC,IAAA,IAACC,aAAEA,GAAkCD,EAAA,OAAKC,GAAgB,SAAS,KAIzEC,EAAc/C,EAAIA,KAACC,EAAM,QAACF,GAAMiD,OAAOC,IAClD,CACEf,MAAOe,EAAMf,OAAS,OACtBE,OAAQa,EAAMb,QAAU,OACxBZ,QAASyB,EAAMzB,SAAW,SAC1BE,MAAOuB,EAAMvB,OAAS,YACnBuB,KANyBhD,CAQ9BiD,IAAAA,EAAA9C,EAAAC,sBAAA,CAAA,QAEW8C,EAAYnD,EAAIA,KAACC,EAAM,QAACF,GAAMiD,OAAOC,IAA+B,CAC/Ef,MAAO,aACJe,KAFyBhD,CAG3BmD,IAAAA,EAAAhD,EAAAC,sBAAA,CAAA,QAEUgD,EAAkBrD,EAAIA,KAACC,EAAM,QAACF,GAAMiD,OAAOC,IAA+B,CACrFf,MAAO,UACPoB,MAAO,CACLC,KAAM,OACNvB,QAAS,OACTwB,OAAQ,sBAEPP,KAP+BhD,CAQjCwD,IAAAA,EAAArD,EAAAC,sBAAA,CAAA"}
+{"version":3,"file":"Flex.js","sources":["../../../../../../../src/core/ui/components/container/Flex.ts"],"sourcesContent":["import { memo } from 'react'\nimport styled from 'styled-components'\n\nexport type FlexProps = {\n  flex?: string\n  flexGrow?: string | number\n  alignText?: 'center' | 'right' | 'left'\n  direction?: string\n  flexShrink?: string | number\n  flexBasis?: string\n  flexWrap?: string\n  justify?: string\n  align?: string\n  alignSelf?: string\n  margin?: string\n  padding?: string\n  width?: string\n  height?: string\n  maxWidth?: string\n  maxHeight?: string\n  minWidth?: string\n  minHeight?: string\n  gap?: string\n  css?: string\n  borderRadius?: string\n}\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\nconst resolveFlexProps = (value?: string): string | undefined => (value ? (flexValueMap[value] || value) : value)\n\nexport const Flex = memo(styled.div<FlexProps>`\n  display: flex;\n  position: relative;\n  flex-direction: ${({ direction }: Partial<FlexProps>) => direction || 'row'};\n  flex: ${({ flex }: Partial<FlexProps>) => (flex !== undefined ? flex : '0')};\n  flex-grow: ${({ flexGrow }: Partial<FlexProps>) => (flexGrow !== undefined ? flexGrow : '0')};\n  flex-shrink: ${({ flexShrink }: Partial<FlexProps>) => (flexShrink !== undefined ? flexShrink : '0')};\n  flex-basis: ${({ flexBasis }: Partial<FlexProps>) => flexBasis || 'auto'};\n  flex-wrap: ${({ flexWrap }: Partial<FlexProps>) => flexWrap || 'nowrap'};\n  gap: ${({ gap }: Partial<FlexProps>) => (gap !== undefined ? gap : '0')};\n  text-align: ${({ alignText }: Partial<FlexProps>) => alignText || 'left'};\n  justify-content: ${({ justify }: Partial<FlexProps>) => resolveFlexProps(justify) || 'flex-start'};\n  align-items: ${({ align }: Partial<FlexProps>) => resolveFlexProps(align) || 'flex-start'};\n  align-self: ${({ alignSelf }: Partial<FlexProps>) => alignSelf || 'auto'};\n  margin: ${({ margin }: Partial<FlexProps>) => margin || '0'};\n  padding: ${({ padding }: Partial<FlexProps>) => padding || '0'};\n  width: ${({ width }: Partial<FlexProps>) => width || 'auto'};\n  height: ${({ height }: Partial<FlexProps>) => height || 'auto'};\n  max-width: ${({ maxWidth }: Partial<FlexProps>) => maxWidth || 'none'};\n  max-height: ${({ maxHeight }: Partial<FlexProps>) => maxHeight || 'none'};\n  min-width: ${({ minWidth }: Partial<FlexProps>) => ((minWidth || minWidth === '0') ? minWidth : '0')};\n  min-height: ${({ minHeight }: Partial<FlexProps>) => minHeight || '0'};\n  border-radius: ${({ borderRadius }: Partial<FlexProps>) => borderRadius || 'initial'};\n`)\n\n// default flex centralized, 100% width and height\nexport const FlexWrapper = memo(styled(Flex).attrs((props: Partial<FlexProps>) => (\n  {\n    width: props.width || '100%',\n    height: props.height || '100%',\n    justify: props.justify || 'center',\n    align: props.align || 'center',\n    ...props,\n  }\n))``)\n\nexport const FlexTight = memo(styled(Flex).attrs((props: Partial<FlexProps>) => ({\n  width: 'initial',\n  ...props,\n}))``)\n\nexport const FlexTightStyled = memo(styled(Flex).attrs((props: Partial<FlexProps>) => ({\n  width: 'initial',\n  style: {\n    text: 'blue',\n    padding: '1rem',\n    border: '1px solid green',\n  },\n  ...props,\n}))``)\n"],"names":["flexValueMap","start","end","resolveFlexProps","value","Flex","memo","styled","div","_templateObject","_taggedTemplateLiteral","taggedTemplateLiteral","_ref","direction","_ref2","flex","undefined","_ref3","flexGrow","_ref4","flexShrink","_ref5","flexBasis","_ref6","flexWrap","_ref7","gap","_ref8","alignText","_ref9","justify","_ref10","align","_ref11","alignSelf","_ref12","margin","_ref13","padding","_ref14","width","_ref15","height","_ref16","maxWidth","_ref17","maxHeight","_ref18","minWidth","_ref19","minHeight","_ref20","borderRadius","FlexWrapper","attrs","props","_templateObject2","FlexTight","_templateObject3","FlexTightStyled","style","text","border","_templateObject4"],"mappings":"6IA2BA,MAAMA,EAAuC,CAC3CC,MAAO,aACP,aAAc,aACdC,IAAK,WACL,WAAY,YAGRC,EAAoBC,GAAwCA,GAASJ,EAAaI,IAAmBA,EAE9FC,EAAOC,EAAIA,KAACC,EAAOC,IAAGC,IAAAA,EAAAC,EAAAC,scAGfC,IAAA,IAACC,UAAEA,GAA+BD,EAAA,OAAKC,GAAa,KAAK,IACnEC,IAAA,IAACC,KAAEA,GAA0BD,EAAA,YAAeE,IAATD,EAAqBA,EAAO,GAAG,IAC7DE,IAAA,IAACC,SAAEA,GAA8BD,EAAA,YAAmBD,IAAbE,EAAyBA,EAAW,GAAG,IAC5EC,IAAA,IAACC,WAAEA,GAAgCD,EAAA,YAAqBH,IAAfI,EAA2BA,EAAa,GAAG,IACrFC,IAAA,IAACC,UAAEA,GAA+BD,EAAA,OAAKC,GAAa,MAAM,IAC3DC,IAAA,IAACC,SAAEA,GAA8BD,EAAA,OAAKC,GAAY,QAAQ,IAChEC,IAAA,IAACC,IAAEA,GAAyBD,EAAA,YAAcT,IAARU,EAAoBA,EAAM,GAAG,IACxDC,IAAA,IAACC,UAAEA,GAA+BD,EAAA,OAAKC,GAAa,MAAM,IACrDC,IAAA,IAACC,QAAEA,GAA6BD,EAAA,OAAK1B,EAAiB2B,IAAY,YAAY,IAClFC,IAAA,IAACC,MAAEA,GAA2BD,EAAA,OAAK5B,EAAiB6B,IAAU,YAAY,IAC3EC,IAAA,IAACC,UAAEA,GAA+BD,EAAA,OAAKC,GAAa,MAAM,IAC9DC,IAAA,IAACC,OAAEA,GAA4BD,EAAA,OAAKC,GAAU,GAAG,IAChDC,IAAA,IAACC,QAAEA,GAA6BD,EAAA,OAAKC,GAAW,GAAG,IACrDC,IAAA,IAACC,MAAEA,GAA2BD,EAAA,OAAKC,GAAS,MAAM,IACjDC,IAAA,IAACC,OAAEA,GAA4BD,EAAA,OAAKC,GAAU,MAAM,IACjDC,IAAA,IAACC,SAAEA,GAA8BD,EAAA,OAAKC,GAAY,MAAM,IACvDC,IAAA,IAACC,UAAEA,GAA+BD,EAAA,OAAKC,GAAa,MAAM,IAC3DC,IAAA,IAACC,SAAEA,GAA8BD,EAAA,OAAOC,GAAyB,MAAbA,EAAoBA,EAAW,GAAG,IACrFC,IAAA,IAACC,UAAEA,GAA+BD,EAAA,OAAKC,GAAa,GAAG,IACpDC,IAAA,IAACC,aAAEA,GAAkCD,EAAA,OAAKC,GAAgB,SAAS,KAIzEC,EAAc/C,EAAIA,KAACC,EAAOF,GAAMiD,OAAOC,IAClD,CACEf,MAAOe,EAAMf,OAAS,OACtBE,OAAQa,EAAMb,QAAU,OACxBZ,QAASyB,EAAMzB,SAAW,SAC1BE,MAAOuB,EAAMvB,OAAS,YACnBuB,KANyBhD,CAQ9BiD,IAAAA,EAAA9C,EAAAC,sBAAA,CAAA,QAEW8C,EAAYnD,EAAIA,KAACC,EAAOF,GAAMiD,OAAOC,IAA+B,CAC/Ef,MAAO,aACJe,KAFyBhD,CAG3BmD,IAAAA,EAAAhD,EAAAC,sBAAA,CAAA,QAEUgD,EAAkBrD,EAAIA,KAACC,EAAOF,GAAMiD,OAAOC,IAA+B,CACrFf,MAAO,UACPoB,MAAO,CACLC,KAAM,OACNvB,QAAS,OACTwB,OAAQ,sBAEPP,KAP+BhD,CAQjCwD,IAAAA,EAAArD,EAAAC,sBAAA,CAAA"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutBox.js","sources":["../../../../../../../src/core/ui/components/container/LayoutBox.tsx"],"sourcesContent":["import { memo, FC, useMemo, CSSProperties, forwardRef, LegacyRef } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\n\nimport { LayoutDirection, LayoutBoxProps } from './layoutBox.types'\nimport classes from './layoutBox.module.scss'\n\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={`${(classes as any)['layout-box']} ${className}`}\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","classes","dataTestId","displayName","LayoutBox","memo"],"mappings":"oRAYA,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,MAChFX,EAAUa,QAAU,CAAEC,eAAgB7B,EAAiBe,EAAUa,UAAuB,MACxFb,EAAUe,WAAaT,EAAiB,CAAEU,cAAehB,EAAUe,WAAaT,GAAmB,MACpGd,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,UAAS,GAAAyB,OAAMC,EAAO,QAAS,cAAaD,KAAAA,OAAIzB,GAChDH,MAAOkB,GACHX,EAAS,CACb,cAAaA,EAAUuB,YAAcvB,EAAU,gBAAkBR,GAC7DW,GAEHT,EACG,IAIVN,EAAsBoC,YAAc,8BAMvBC,EAAgCC,EAAIA,KAAiBtC,GAElEqC,EAAUD,YAAc"}
+{"version":3,"file":"LayoutBox.js","sources":["../../../../../../../src/core/ui/components/container/LayoutBox.tsx"],"sourcesContent":["import { memo, FC, useMemo, CSSProperties, forwardRef, LegacyRef } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\n\nimport { LayoutDirection, LayoutBoxProps } from './layoutBox.types'\nimport classes from './layoutBox.module.scss'\n\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={`${(classes as any)['layout-box']} ${className}`}\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","classes","default","dataTestId","displayName","LayoutBox","memo"],"mappings":"6NAYA,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,UAAS,GAAAyB,OAAMC,EAAOC,QAAS,cAAaF,KAAAA,OAAIzB,GAChDH,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/Placeholder.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),l=require("./Flex.js");const c=r.memo((r=>{let{title:c,border:t,background:o,onClick:a,cssProp:n,children:s,...i}=r;return React.createElement(l.FlexWrapper,e.extends({css:"\n      ".concat(t||"border: 1px solid #999999;","\n      ").concat(o||"background-color: rgba(0, 120, 255, 0.2);","\n      ").concat(n,"\n    "),onClick:a},i),c&&React.createElement("h2",null,c),s&&s)}));c.displayName="Placeholder",exports.Placeholder=c;
+"use strict";var e=require("../../../../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),l=require("./Flex.js");const c=r.memo((r=>{let{title:c,border:t,background:a,onClick:n,cssProp:o,children:s,...i}=r;return React.createElement(l.FlexWrapper,e.extends({css:"\n      ".concat(t||"border: 1px solid #999999;","\n      ").concat(a||"background-color: rgba(0, 120, 255, 0.2);","\n      ").concat(o,"\n    "),onClick:n},i),c&&React.createElement("h2",null,c),s&&s)}));c.displayName="Placeholder",exports.Placeholder=c;
 //# sourceMappingURL=Placeholder.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Placeholder.js","sources":["../../../../../../../src/core/ui/components/container/Placeholder.tsx"],"sourcesContent":["import { FC, memo, PropsWithChildren } from 'react'\n\nimport { FlexWrapper, FlexProps } from './Flex'\n\nexport type PlaceholderProps = FlexProps & PropsWithChildren<unknown> & {\n  title?: string\n  cssProp?: string\n  background?: string\n  border?: string\n  onClick?: () => void\n}\n\nexport const Placeholder: FC<PlaceholderProps>\n= memo<PlaceholderProps>(({ title, border, background, onClick, cssProp, children, ...props }: PlaceholderProps) => (\n  <FlexWrapper\n    css={`\n      ${border || 'border: 1px solid #999999;'}\n      ${background || 'background-color: rgba(0, 120, 255, 0.2);'}\n      ${cssProp}\n    `}\n    onClick={onClick}\n    // eslint-disable-next-line react/jsx-props-no-spreading\n    {...props}\n  >\n    {title && (<h2>{title}</h2>)}\n    {children && children}\n  </FlexWrapper>\n))\n\nPlaceholder.displayName = 'Placeholder'\n"],"names":["Placeholder","memo","_ref","title","border","background","onClick","cssProp","children","props","React","createElement","FlexWrapper","_extends","css","concat","displayName"],"mappings":"oLAYaA,MAAAA,EACXC,EAAIA,MAAmBC,IAAA,IAACC,MAAEA,EAAKC,OAAEA,EAAMC,WAAEA,EAAUC,QAAEA,EAAOC,QAAEA,EAAOC,SAAEA,KAAaC,GAAyBP,EAAA,OAC7GQ,MAAAC,cAACC,EAAWA,YAAAC,UAAA,CACVC,eAAGC,OACCX,GAAU,6BAA4BW,YAAAA,OACtCV,GAAc,4CAA2C,YAAAU,OACzDR,EACF,UACFD,QAASA,GAELG,GAEHN,GAAUO,MAAAC,cAAKR,KAAAA,KAAAA,GACfK,GAAYA,EACD,IAGhBR,EAAYgB,YAAc"}
+{"version":3,"file":"Placeholder.js","sources":["../../../../../../../src/core/ui/components/container/Placeholder.tsx"],"sourcesContent":["import { FC, memo, PropsWithChildren } from 'react'\n\nimport { FlexWrapper, FlexProps } from './Flex'\n\nexport type PlaceholderProps = FlexProps & PropsWithChildren<unknown> & {\n  title?: string\n  cssProp?: string\n  background?: string\n  border?: string\n  onClick?: () => void\n}\n\nexport const Placeholder: FC<PlaceholderProps>\n= memo<PlaceholderProps>(({ title, border, background, onClick, cssProp, children, ...props }: PlaceholderProps) => (\n  <FlexWrapper\n    css={`\n      ${border || 'border: 1px solid #999999;'}\n      ${background || 'background-color: rgba(0, 120, 255, 0.2);'}\n      ${cssProp}\n    `}\n    onClick={onClick}\n    // eslint-disable-next-line react/jsx-props-no-spreading\n    {...props}\n  >\n    {title && (<h2>{title}</h2>)}\n    {children && children}\n  </FlexWrapper>\n))\n\nPlaceholder.displayName = 'Placeholder'\n"],"names":["Placeholder","memo","_ref","title","border","background","onClick","cssProp","children","props","React","createElement","FlexWrapper","_extends","css","concat","displayName"],"mappings":"6HAYaA,MAAAA,EACXC,EAAIA,MAAmBC,IAAA,IAACC,MAAEA,EAAKC,OAAEA,EAAMC,WAAEA,EAAUC,QAAEA,EAAOC,QAAEA,EAAOC,SAAEA,KAAaC,GAAyBP,EAAA,OAC7GQ,MAAAC,cAACC,EAAWA,YAAAC,UAAA,CACVC,eAAGC,OACCX,GAAU,6BAA4BW,YAAAA,OACtCV,GAAc,4CAA2C,YAAAU,OACzDR,EACF,UACFD,QAASA,GAELG,GAEHN,GAAUO,MAAAC,cAAKR,KAAAA,KAAAA,GACfK,GAAYA,EACD,IAGhBR,EAAYgB,YAAc"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});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:r=250,...a}=t;const[s,u]=i.useResize(r);return React.createElement(o.LayoutBox,e.extends({width:"100%",height:"100%",justify:"center",align:"center",direction:"column"},a),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.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":"6TAmBA,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'\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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});let e=function(e){return e.ROW="row",e.COLUMN="column",e}({});exports.LayoutDirection=e;
+"use strict";let t=function(t){return t.ROW="row",t.COLUMN="column",t}({});exports.LayoutDirection=t;
 //# sourceMappingURL=layoutBox.types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"layoutBox.types.js","sources":["../../../../../../../src/core/ui/components/container/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":"oEAKYA,IAAAA,WAAAA,GAAe,OAAfA,EAAe,IAAA,MAAfA,EAAe,OAAA,SAAfA,CAAe,EAAA"}
+{"version":3,"file":"layoutBox.types.js","sources":["../../../../../../../src/core/ui/components/container/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/dividers/DividerLine.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),i=require("./divider.module.scss.js");const r=t.memo((e=>{let{orientation:r,vertical:a,color:l="var(--divider-line)",opacity:o,length:c="80%",left:n="0",width:s="1px",height:d="1px",margin:m,className:u=""}=e;const v=t.useMemo((()=>"vertical"===r||!0===a),[r,a]),p=t.useMemo((()=>({"--width":s,"--height":d,"--length":c,"--opacity":o,"--color":l,"--left":n,"--margin":m||(v?"auto 0":"0 auto")})),[s,d,c,o,l,n,m,v]),h=v?i.default.vertical:i.default.horizontal;return React.createElement("div",{className:"".concat(i.default["divider-line"]," ").concat(h," ").concat(u),style:p})}));r.displayName="DividerLine";const a=t.memo((t=>React.createElement(r,e.extends({vertical:!0,length:"100%"},t))));a.displayName="DividerVertical";const l=t.memo((t=>React.createElement(r,e.extends({length:"100%"},t))));l.displayName="DividerHorizontal",exports.DividerHorizontal=l,exports.DividerLine=r,exports.DividerVertical=a;
+"use strict";var e=require("../../../../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),i=require("./divider.module.scss.js");const r=t.memo((e=>{let{orientation:r,vertical:a,color:l="var(--divider-line)",opacity:o,length:c="80%",left:n="0",width:s="1px",height:d="1px",margin:m,className:v=""}=e;const u=t.useMemo((()=>"vertical"===r||!0===a),[r,a]),p=t.useMemo((()=>({"--width":s,"--height":d,"--length":c,"--opacity":o,"--color":l,"--left":n,"--margin":m||(u?"auto 0":"0 auto")})),[s,d,c,o,l,n,m,u]),h=u?i.default.vertical:i.default.horizontal;return React.createElement("div",{className:"".concat(i.default["divider-line"]," ").concat(h," ").concat(v),style:p})}));r.displayName="DividerLine";const a=t.memo((t=>React.createElement(r,e.extends({vertical:!0,length:"100%"},t))));a.displayName="DividerVertical";const l=t.memo((t=>React.createElement(r,e.extends({length:"100%"},t))));l.displayName="DividerHorizontal",exports.DividerHorizontal=l,exports.DividerLine=r,exports.DividerVertical=a;
 //# sourceMappingURL=DividerLine.js.map

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","style","displayName","DividerVertical","props","_extends","DividerHorizontal"],"mappings":"yMAkBaA,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,EAAO,QAAS,gBAAeI,KAAAA,OAAIL,EAAW,KAAAK,OAAIT,GACjEU,MAAOP,GACP,IAINf,EAAYuB,YAAc,cAEbC,MAAAA,EACTvB,EAAIA,MAAEwB,GAAUN,MAAAC,cAACpB,EAAW0B,UAAA,CAACtB,UAAQ,EAACG,OAAO,QAAWkB,MAC5DD,EAAgBD,YAAc,kBAEjBI,MAAAA,EACT1B,EAAIA,MAAEwB,GAAUN,MAAAC,cAACpB,EAAW0B,UAAA,CAACnB,OAAO,QAAWkB,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\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"}

package/dist/ui/src/core/ui/components/field/Field.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../../_virtual/_rollupPluginBabelHelpers.js"),n=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a,l,o,i,r=t(require("styled-components"));let c=()=>"#000000";let s=n.memo((function(){return React.createElement("span",null)}));const p=r.default.div(a||(a=e.taggedTemplateLiteral(["\n  opacity: ",";\n  pointer-events: ",";\n  flex: 1 1 auto;\n  width: 100%;\n  @media (min-width: 400px) {\n    flex: 1;\n  }\n  .label {\n    font-size: 0.8rem !important;\n    font-weight: normal;\n  }\n\n  .help {\n    text-align: left;\n  }\n\n  .mainControl {\n    flex: 1;\n    border-radius: 6px;\n    box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.06);\n    will-change: box-shadow;\n    transition: box-shadow 250ms ease-in-out;\n    &:hover {\n      box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);\n    }\n  }\n  button {\n    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);\n  }\n  .select {\n    width: 100%;\n    flex: 1;\n    &::after {\n      border-color: #000000 !important;\n    }\n  }\n\n  .icon {\n    &.is-action {\n      cursor: pointer;\n      pointer-events: initial !important;\n    }\n  }\n\n  /* Chrome, Safari, Edge, Opera */\n  input::-webkit-outer-spin-button,\n  input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  /* Firefox */\n  input[type=number] {\n    -moz-appearance: textfield;\n  }\n\n  .input[type=date]::-webkit-calendar-picker-indicator {\n    opacity:0;\n    -webkit-appearance: none;\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 40px;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n  }\n\n  textarea {\n    resize: none;\n  }\n"])),(e=>{let{disabled:n,userDisabled:t}=e;return n||t?.5:1}),(e=>{let{disabled:n,userDisabled:t}=e;return n||t?"none":"auto"})),u=n.memo((function(n){let{options:t,value:a,inputRef:l,...o}=n;return React.createElement("div",{className:"select"},React.createElement("select",e.extends({},o,{ref:l,defaultValue:a}),null==t?void 0:t.map((e=>React.createElement("option",{key:"".concat(JSON.stringify(e)),value:"object"==typeof e?null==e?void 0:e.value:e},"object"==typeof e?null==e?void 0:e.label:e)))))})),d=r.default.input(l||(l=e.taggedTemplateLiteral([""]))),m=r.default.textarea(o||(o=e.taggedTemplateLiteral([""]))),f=r.default.label(i||(i=e.taggedTemplateLiteral(["\n  text-align: left;\n"]))),b=n.memo((t=>{let{label:a,name:l,type:o="text",value:i,defaultValue:r,placeholder:b,inputRef:h,error:g,disabled:x,userDisabled:v,withoutComponent:R,helpTextInfo:w,helpText:C,children:y,iconLeft:E,iconRight:N,addon:k,className:F,onChange:D,onChangeInner:I,onBlur:L,onFocus:T,rightIconClick:j,leftIconClick:B,options:_,css:q,...z}=t,O=d;y||"textarea"!==o||(O=m);const S=n.useCallback((e=>{var n;v?null==e||null===(n=e.preventDefault)||void 0===n||n.call(e):T&&T(e)}),[v,T]),V=n.useCallback((e=>{v||(I&&null!=e&&e.target?(e.target.value=I(e.target.value),D&&D(e)):D&&D(e))}),[I,D,v]),K=n.useMemo((()=>void 0===i?{defaultValue:r}:{value:i}),[i,r]);return React.createElement(p,{className:"field ".concat(F),error:g,disabled:x,userDisabled:v,css:q},React.createElement(f,{htmlFor:l,className:"label"},a),React.createElement("div",{className:"field ".concat(k?"has-addons":"")},React.createElement("div",{className:"control mainControl ".concat(E&&!R?"has-icons-left":""," ").concat(N?"has-icons-right":"")},!R&&(y||"select"!==o&&!_?!y&&React.createElement(O,e.extends({name:l,id:l,ref:h,className:"input ".concat(g?"is-danger":""),type:o,placeholder:b},K,{onChange:V,onBlur:L,onFocus:S,onKeyDown:S,autoComplete:"off",disabled:x},z)):React.createElement(u,e.extends({name:l,id:l,inputRef:h,className:"input ".concat(g?"is-danger":""),type:"select",placeholder:b,value:i,options:_,onChange:D,onBlur:L,onFocus:S,onKeyDown:S,autoComplete:"off",disabled:x},z))),E&&!R&&React.createElement("span",{className:"iconLeft icon is-small is-left ".concat(B?"is-action":""),onClick:B},React.createElement(s,{iconName:E,color:c})),N&&React.createElement("span",{className:"iconRight icon is-small is-right ".concat(j?"is-action":""),onClick:j},React.createElement(s,{iconName:N,color:c})),y&&y),k&&k),w&&React.createElement("p",{className:"help"},w),C&&React.createElement("p",{className:"help ".concat(g?"is-danger":"")},C))}));b.displayName="Field",exports.Field=b,exports.FieldWrapper=p,exports.Select=u,exports.setIconColor=e=>{c=e},exports.setIconComponent=e=>{s=e};
+"use strict";var e,n,t,a,l=require("../../../../../_virtual/_rollupPluginBabelHelpers.js"),o=require("react"),i=require("styled-components");let r=()=>"#000000";let c=o.memo((function(){return React.createElement("span",null)}));const s=i.div(e||(e=l.taggedTemplateLiteral(["\n  opacity: ",";\n  pointer-events: ",";\n  flex: 1 1 auto;\n  width: 100%;\n  @media (min-width: 400px) {\n    flex: 1;\n  }\n  .label {\n    font-size: 0.8rem !important;\n    font-weight: normal;\n  }\n\n  .help {\n    text-align: left;\n  }\n\n  .mainControl {\n    flex: 1;\n    border-radius: 6px;\n    box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.06);\n    will-change: box-shadow;\n    transition: box-shadow 250ms ease-in-out;\n    &:hover {\n      box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);\n    }\n  }\n  button {\n    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);\n  }\n  .select {\n    width: 100%;\n    flex: 1;\n    &::after {\n      border-color: #000000 !important;\n    }\n  }\n\n  .icon {\n    &.is-action {\n      cursor: pointer;\n      pointer-events: initial !important;\n    }\n  }\n\n  /* Chrome, Safari, Edge, Opera */\n  input::-webkit-outer-spin-button,\n  input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  /* Firefox */\n  input[type=number] {\n    -moz-appearance: textfield;\n  }\n\n  .input[type=date]::-webkit-calendar-picker-indicator {\n    opacity:0;\n    -webkit-appearance: none;\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 40px;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n  }\n\n  textarea {\n    resize: none;\n  }\n"])),(e=>{let{disabled:n,userDisabled:t}=e;return n||t?.5:1}),(e=>{let{disabled:n,userDisabled:t}=e;return n||t?"none":"auto"})),p=o.memo((function(e){let{options:n,value:t,inputRef:a,...o}=e;return React.createElement("div",{className:"select"},React.createElement("select",l.extends({},o,{ref:a,defaultValue:t}),null==n?void 0:n.map((e=>React.createElement("option",{key:"".concat(JSON.stringify(e)),value:"object"==typeof e?null==e?void 0:e.value:e},"object"==typeof e?null==e?void 0:e.label:e)))))})),d=i.input(n||(n=l.taggedTemplateLiteral([""]))),u=i.textarea(t||(t=l.taggedTemplateLiteral([""]))),m=i.label(a||(a=l.taggedTemplateLiteral(["\n  text-align: left;\n"]))),b=o.memo((e=>{let{label:n,name:t,type:a="text",value:i,defaultValue:b,placeholder:f,inputRef:h,error:g,disabled:x,userDisabled:v,withoutComponent:R,helpTextInfo:w,helpText:C,children:E,iconLeft:N,iconRight:y,addon:k,className:F,onChange:D,onChangeInner:I,onBlur:L,onFocus:T,rightIconClick:B,leftIconClick:j,options:q,css:z,...S}=e,V=d;E||"textarea"!==a||(V=u);const K=o.useCallback((e=>{var n;v?null==e||null===(n=e.preventDefault)||void 0===n||n.call(e):T&&T(e)}),[v,T]),O=o.useCallback((e=>{v||(I&&null!=e&&e.target?(e.target.value=I(e.target.value),D&&D(e)):D&&D(e))}),[I,D,v]),_=o.useMemo((()=>void 0===i?{defaultValue:b}:{value:i}),[i,b]);return React.createElement(s,{className:"field ".concat(F),error:g,disabled:x,userDisabled:v,css:z},React.createElement(m,{htmlFor:t,className:"label"},n),React.createElement("div",{className:"field ".concat(k?"has-addons":"")},React.createElement("div",{className:"control mainControl ".concat(N&&!R?"has-icons-left":""," ").concat(y?"has-icons-right":"")},!R&&(E||"select"!==a&&!q?!E&&React.createElement(V,l.extends({name:t,id:t,ref:h,className:"input ".concat(g?"is-danger":""),type:a,placeholder:f},_,{onChange:O,onBlur:L,onFocus:K,onKeyDown:K,autoComplete:"off",disabled:x},S)):React.createElement(p,l.extends({name:t,id:t,inputRef:h,className:"input ".concat(g?"is-danger":""),type:"select",placeholder:f,value:i,options:q,onChange:D,onBlur:L,onFocus:K,onKeyDown:K,autoComplete:"off",disabled:x},S))),N&&!R&&React.createElement("span",{className:"iconLeft icon is-small is-left ".concat(j?"is-action":""),onClick:j},React.createElement(c,{iconName:N,color:r})),y&&React.createElement("span",{className:"iconRight icon is-small is-right ".concat(B?"is-action":""),onClick:B},React.createElement(c,{iconName:y,color:r})),E&&E),k&&k),w&&React.createElement("p",{className:"help"},w),C&&React.createElement("p",{className:"help ".concat(g?"is-danger":"")},C))}));b.displayName="Field",exports.Field=b,exports.FieldWrapper=s,exports.Select=p,exports.setIconColor=e=>{r=e},exports.setIconComponent=e=>{c=e};
 //# sourceMappingURL=Field.js.map

package/dist/ui/src/core/ui/components/field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../../../../../../src/core/ui/components/field/Field.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport { FC, ReactNode, memo, useMemo, useCallback, PropsWithChildren } from 'react'\nimport styled from 'styled-components'\n\nimport type { FieldError, IconComponentType } from './types'\n\nlet iconColor: string | (() => string) = () => '#000000'\n\nexport const setIconColor = (color: string | (() => string)): void => {\n  iconColor = color\n}\n\nlet IconComponent: IconComponentType = memo(function IconComponent() { return <span /> })\n\nexport const setIconComponent = (component: IconComponentType): void => {\n  IconComponent = component\n}\n\nexport type FileWrapperProps = PropsWithChildren<unknown> & {\n  className?: string\n  error?: boolean\n  disabled?: boolean\n  userDisabled?: boolean\n  css?: string\n}\n\nexport const FieldWrapper: FC<FileWrapperProps> = styled.div<FileWrapperProps>`\n  opacity: ${({ disabled, userDisabled }) => (disabled || userDisabled ? 0.5 : 1)};\n  pointer-events: ${({ disabled, userDisabled }) => (disabled || userDisabled ? 'none' : 'auto')};\n  flex: 1 1 auto;\n  width: 100%;\n  @media (min-width: 400px) {\n    flex: 1;\n  }\n  .label {\n    font-size: 0.8rem !important;\n    font-weight: normal;\n  }\n\n  .help {\n    text-align: left;\n  }\n\n  .mainControl {\n    flex: 1;\n    border-radius: 6px;\n    box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.06);\n    will-change: box-shadow;\n    transition: box-shadow 250ms ease-in-out;\n    &:hover {\n      box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);\n    }\n  }\n  button {\n    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);\n  }\n  .select {\n    width: 100%;\n    flex: 1;\n    &::after {\n      border-color: #000000 !important;\n    }\n  }\n\n  .icon {\n    &.is-action {\n      cursor: pointer;\n      pointer-events: initial !important;\n    }\n  }\n\n  /* Chrome, Safari, Edge, Opera */\n  input::-webkit-outer-spin-button,\n  input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  /* Firefox */\n  input[type=number] {\n    -moz-appearance: textfield;\n  }\n\n  .input[type=date]::-webkit-calendar-picker-indicator {\n    opacity:0;\n    -webkit-appearance: none;\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 40px;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n  }\n\n  textarea {\n    resize: none;\n  }\n`\n\ntype EventType = { target: any; type?: any } & Partial<Event>\nexport interface FieldProps {\n  label?: string\n  name?: string\n  type?: string\n  min?: number | string | Date | any\n  max?: number | string | Date | any\n  value?: string | number | readonly string[] | undefined\n  defaultValue?: string | number | readonly string[] | undefined\n  placeholder?: string\n  inputRef?: ReactHookFormRef\n  error?: boolean\n  errors?: FieldError\n  disabled?: boolean\n  userDisabled?: boolean\n  helpTextInfo?: string\n  helpText?: string\n  iconLeft?: string\n  iconRight?: string\n  withoutComponent?: boolean\n  addon?: ReactNode\n  children?: ReactNode\n  className?: string\n  onChange?: (event?: EventType) => unknown\n  // TODO, rename... something like changeHandler or valueDecorator\n  onChangeInner?: (value: string | number) => string | number\n  onBlur?: (event?: EventType) => void\n  onFocus?: (event?: EventType | undefined) => void\n  rightIconClick?: (event?: EventType) => void\n  leftIconClick?: (event?: EventType) => void\n  options?: any[] | null\n  creatable?: boolean\n  async?: boolean\n  css?: string\n  [key: string]: any\n}\n\ninterface SelectProps extends FieldProps {\n  id?: string\n}\n\ntype OptionObj = { label: string | number | undefined; value: string | number | undefined }\ntype Option = OptionObj | string | number\n\nexport const Select: FC<SelectProps>\n= memo<SelectProps>(\n  function Select({ options, value, inputRef, ...props }: SelectProps) {\n    return (\n      <div className='select'>\n        <select {...props} ref={inputRef} defaultValue={value}>\n          {options?.map((option: Option) => (\n            <option\n              key={`${JSON.stringify(option)}`}\n              value={typeof option === 'object' ? (option as OptionObj)?.value : option}\n            >\n              {typeof option === 'object' ? (option as OptionObj)?.label : option}\n            </option>\n          ))}\n        </select>\n      </div>\n    )\n  },\n)\n\nconst InputComponent = styled.input``\nconst TextAreaComponent = styled.textarea``\nconst StyledFieldLabel = styled.label`\n  text-align: left;\n`\n\nexport const Field: FC<FieldProps> = memo<FieldProps>(({\n  label,\n  name,\n  type = 'text',\n  value,\n  defaultValue,\n  placeholder,\n  inputRef,\n  error,\n  disabled,\n  userDisabled,\n  withoutComponent,\n  helpTextInfo,\n  helpText,\n  children,\n  iconLeft,\n  iconRight,\n  addon,\n  className,\n  onChange,\n  onChangeInner,\n  onBlur,\n  onFocus,\n  rightIconClick,\n  leftIconClick,\n  options,\n  css,\n  ...props\n}: FieldProps) => {\n  let Component: FC<any> = InputComponent\n\n  if (!children && type === 'textarea') {\n    Component = TextAreaComponent\n  }\n  const handleFocus = useCallback((event: Event | EventType | undefined) => {\n    if (userDisabled) {\n      event?.preventDefault?.()\n    } else {\n      onFocus && onFocus(event)\n    }\n  }, [userDisabled, onFocus])\n\n  const handleChange = useCallback((event: { target: { value: string } }) => {\n    if (userDisabled) {\n      return\n    }\n    if (onChangeInner && event?.target) {\n      // eslint-disable-next-line no-param-reassign\n      event.target.value = onChangeInner((event.target.value as string)) as string\n      onChange && onChange(event as EventType)\n    } else {\n      onChange && onChange(event as EventType)\n    }\n  }, [onChangeInner, onChange, userDisabled])\n\n  const valueProps = useMemo(() => {\n    if (value === undefined) {\n      return { defaultValue }\n    }\n    return { value }\n  }, [value, defaultValue])\n\n  return (\n    <FieldWrapper\n      className={`field ${className}`}\n      error={error}\n      disabled={disabled}\n      userDisabled={userDisabled}\n      css={css}\n    >\n      <StyledFieldLabel htmlFor={name} className='label'>{label}</StyledFieldLabel>\n      <div className={`field ${addon ? 'has-addons' : ''}`}>\n        <div\n          className={`control mainControl ${iconLeft && !withoutComponent\n            ? 'has-icons-left' : ''} ${iconRight ? 'has-icons-right' : ''}`}\n        >\n          {!withoutComponent && ((!children && (type === 'select' || options))\n            ? (\n              <Select\n                name={name}\n                id={name}\n                inputRef={inputRef}\n                className={`input ${error ? 'is-danger' : ''}`}\n                type='select'\n                placeholder={placeholder}\n                value={value}\n                options={options}\n                // TODO also handle change but value versus event.target.value issue\n                onChange={onChange}\n                onBlur={onBlur}\n                onFocus={handleFocus}\n                onKeyDown={handleFocus}\n                autoComplete='off'\n                disabled={disabled}\n                {...props}\n              />\n            )\n            : (\n              !children && (\n              <Component\n                name={name}\n                id={name}\n                ref={inputRef}\n                className={`input ${error ? 'is-danger' : ''}`}\n                type={type}\n                placeholder={placeholder}\n                {...valueProps}\n                onChange={handleChange}\n                onBlur={onBlur}\n                onFocus={handleFocus}\n                onKeyDown={handleFocus}\n                autoComplete='off'\n                disabled={disabled}\n                {...props}\n              />\n              )))}\n\n          {iconLeft && !withoutComponent && (\n            <span\n              className={`iconLeft icon is-small is-left ${leftIconClick ? 'is-action' : ''}`}\n              onClick={leftIconClick}\n            >\n              <IconComponent\n                iconName={iconLeft}\n                color={iconColor}\n              />\n            </span>\n          )}\n          {iconRight && (\n            <span\n              className={`iconRight icon is-small is-right ${rightIconClick ? 'is-action' : ''}`}\n              onClick={rightIconClick}\n            >\n              <IconComponent\n                iconName={iconRight}\n                color={iconColor}\n              />\n            </span>\n          )}\n          {children && children}\n        </div>\n        {addon && addon}\n      </div>\n      {helpTextInfo && <p className='help'>{helpTextInfo}</p>}\n      {helpText && <p className={`help ${error ? 'is-danger' : ''}`}>{helpText}</p>}\n    </FieldWrapper>\n  )\n})\n\nField.displayName = 'Field'\n"],"names":["iconColor","IconComponent","memo","React","createElement","setIconComponent","FieldWrapper","styled","div","_templateObject","_taggedTemplateLiteral","_ref","disabled","userDisabled","_ref2","Select","_ref3","options","value","inputRef","props","className","_extends","ref","defaultValue","map","option","key","concat","JSON","stringify","label","InputComponent","input","_templateObject2","TextAreaComponent","textarea","_templateObject3","StyledFieldLabel","_templateObject4","Field","_ref4","name","type","placeholder","error","withoutComponent","helpTextInfo","helpText","children","iconLeft","iconRight","addon","onChange","onChangeInner","onBlur","onFocus","rightIconClick","leftIconClick","css","Component","handleFocus","useCallback","event","_event$preventDefault","preventDefault","call","handleChange","target","valueProps","useMemo","undefined","htmlFor","id","onKeyDown","autoComplete","onClick","iconName","color","displayName","component"],"mappings":"mRAQA,IAAIA,EAAqCA,IAAM,UAM/C,IAAIC,EAAmCC,EAAAA,MAAK,WAA2B,OAAOC,MAAAC,cAAA,OAAA,KAAS,IAE1EC,MAYAC,EAAqCC,EAAM,QAACC,IAAGC,IAAAA,EAAAC,EAAAA,+1CAC/CC,IAAA,IAACC,SAAEA,EAAQC,aAAEA,GAAcF,EAAA,OAAMC,GAAYC,EAAe,GAAM,CAAC,IAC5DC,IAAA,IAACF,SAAEA,EAAQC,aAAEA,GAAcC,EAAA,OAAMF,GAAYC,EAAe,OAAS,MAAM,IAqHlFE,EACXb,EAAIA,MACJ,SAAec,GAAsD,IAArDC,QAAEA,EAAOC,MAAEA,EAAKC,SAAEA,KAAaC,GAAoBJ,EACjE,OACEb,MAAAC,cAAA,MAAA,CAAKiB,UAAU,UACblB,MAAAC,cAAAkB,SAAAA,EAAAA,WAAYF,EAAK,CAAEG,IAAKJ,EAAUK,aAAcN,IAC7CD,aAAO,EAAPA,EAASQ,KAAKC,GACbvB,MAAAC,cAAA,SAAA,CACEuB,IAAG,GAAAC,OAAKC,KAAKC,UAAUJ,IACvBR,MAAyB,iBAAXQ,EAAuBA,aAAM,EAANA,EAAsBR,MAAQQ,GAEhD,iBAAXA,EAAuBA,aAAAA,EAAAA,EAAsBK,MAAQL,MAMzE,IAGIM,EAAiBzB,EAAAA,QAAO0B,MAAKC,IAAAA,EAAAxB,EAAAA,sBAAE,CAAA,OAC/ByB,EAAoB5B,EAAAA,QAAO6B,SAAQC,IAAAA,EAAA3B,EAAAA,sBAAE,CAAA,OACrC4B,EAAmB/B,EAAAA,QAAOwB,MAAKQ,IAAAA,EAAA7B,EAAAA,sBAEpC,CAAA,8BAEY8B,EAAwBtC,EAAIA,MAAauC,IA4BpC,IA5BqCV,MACrDA,EAAKW,KACLA,EAAIC,KACJA,EAAO,OAAMzB,MACbA,EAAKM,aACLA,EAAYoB,YACZA,EAAWzB,SACXA,EAAQ0B,MACRA,EAAKjC,SACLA,EAAQC,aACRA,EAAYiC,iBACZA,EAAgBC,aAChBA,EAAYC,SACZA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,UACRA,EAASC,MACTA,EAAK/B,UACLA,EAASgC,SACTA,EAAQC,cACRA,EAAaC,OACbA,EAAMC,QACNA,EAAOC,eACPA,EAAcC,cACdA,EAAazC,QACbA,EAAO0C,IACPA,KACGvC,GACQqB,EACPmB,EAAqB5B,EAEpBiB,GAAqB,aAATN,IACfiB,EAAYzB,GAEd,MAAM0B,EAAcC,EAAWA,aAAEC,IACb,IAAAC,EAAdnD,EACFkD,SAAqBC,QAAhBA,EAALD,EAAOE,0BAAcD,GAArBA,EAAAE,KAAAH,GAEAP,GAAWA,EAAQO,EACrB,GACC,CAAClD,EAAc2C,IAEZW,EAAeL,EAAWA,aAAEC,IAC5BlD,IAGAyC,SAAiBS,GAAAA,EAAOK,QAE1BL,EAAMK,OAAOlD,MAAQoC,EAAeS,EAAMK,OAAOlD,OACjDmC,GAAYA,EAASU,IAErBV,GAAYA,EAASU,GACvB,GACC,CAACT,EAAeD,EAAUxC,IAEvBwD,EAAaC,EAAAA,SAAQ,SACXC,IAAVrD,EACK,CAAEM,gBAEJ,CAAEN,UACR,CAACA,EAAOM,IAEX,OACErB,MAAAC,cAACE,EAAY,CACXe,UAASO,SAAAA,OAAWP,GACpBwB,MAAOA,EACPjC,SAAUA,EACVC,aAAcA,EACd8C,IAAKA,GAELxD,MAAAC,cAACkC,EAAgB,CAACkC,QAAS9B,EAAMrB,UAAU,SAASU,GACpD5B,MAAAC,cAAA,MAAA,CAAKiB,mBAASO,OAAWwB,EAAQ,aAAe,KAC9CjD,MAAAC,cAAA,MAAA,CACEiB,iCAASO,OAAyBsB,IAAaJ,EAC3C,iBAAmB,QAAElB,OAAIuB,EAAY,kBAAoB,MAE3DL,IAAuBG,GAAsB,WAATN,IAAqB1B,GAsBtDgC,GACD9C,MAAAC,cAACwD,EAAStC,UAAA,CACRoB,KAAMA,EACN+B,GAAI/B,EACJnB,IAAKJ,EACLE,UAAS,SAAAO,OAAWiB,EAAQ,YAAc,IAC1CF,KAAMA,EACNC,YAAaA,GACTyB,EAAU,CACdhB,SAAUc,EACVZ,OAAQA,EACRC,QAASK,EACTa,UAAWb,EACXc,aAAa,MACb/D,SAAUA,GACNQ,IAnCNjB,MAAAC,cAACW,EAAMO,EAAAA,QAAA,CACLoB,KAAMA,EACN+B,GAAI/B,EACJvB,SAAUA,EACVE,UAAS,SAAAO,OAAWiB,EAAQ,YAAc,IAC1CF,KAAK,SACLC,YAAaA,EACb1B,MAAOA,EACPD,QAASA,EAEToC,SAAUA,EACVE,OAAQA,EACRC,QAASK,EACTa,UAAWb,EACXc,aAAa,MACb/D,SAAUA,GACNQ,KAuBT8B,IAAaJ,GACZ3C,MAAAC,cAAA,OAAA,CACEiB,UAAS,kCAAAO,OAAoC8B,EAAgB,YAAc,IAC3EkB,QAASlB,GAETvD,MAAAC,cAACH,EAAa,CACZ4E,SAAU3B,EACV4B,MAAO9E,KAIZmD,GACChD,MAAAC,cAAA,OAAA,CACEiB,UAAS,oCAAAO,OAAsC6B,EAAiB,YAAc,IAC9EmB,QAASnB,GAETtD,MAAAC,cAACH,EAAa,CACZ4E,SAAU1B,EACV2B,MAAO9E,KAIZiD,GAAYA,GAEdG,GAASA,GAEXL,GAAgB5C,MAAAC,cAAA,IAAA,CAAGiB,UAAU,QAAQ0B,GACrCC,GAAY7C,MAAAC,cAAA,IAAA,CAAGiB,kBAASO,OAAUiB,EAAQ,YAAc,KAAOG,GACnD,IAInBR,EAAMuC,YAAc,qFAxTSD,IAC3B9E,EAAY8E,CAAK,2BAKcE,IAC/B/E,EAAgB+E,CAAS"}
+{"version":3,"file":"Field.js","sources":["../../../../../../../src/core/ui/components/field/Field.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport { FC, ReactNode, memo, useMemo, useCallback, PropsWithChildren } from 'react'\nimport styled from 'styled-components'\n\nimport type { FieldError, IconComponentType } from './types'\n\nlet iconColor: string | (() => string) = () => '#000000'\n\nexport const setIconColor = (color: string | (() => string)): void => {\n  iconColor = color\n}\n\nlet IconComponent: IconComponentType = memo(function IconComponent() { return <span /> })\n\nexport const setIconComponent = (component: IconComponentType): void => {\n  IconComponent = component\n}\n\nexport type FileWrapperProps = PropsWithChildren<unknown> & {\n  className?: string\n  error?: boolean\n  disabled?: boolean\n  userDisabled?: boolean\n  css?: string\n}\n\nexport const FieldWrapper: FC<FileWrapperProps> = styled.div<FileWrapperProps>`\n  opacity: ${({ disabled, userDisabled }) => (disabled || userDisabled ? 0.5 : 1)};\n  pointer-events: ${({ disabled, userDisabled }) => (disabled || userDisabled ? 'none' : 'auto')};\n  flex: 1 1 auto;\n  width: 100%;\n  @media (min-width: 400px) {\n    flex: 1;\n  }\n  .label {\n    font-size: 0.8rem !important;\n    font-weight: normal;\n  }\n\n  .help {\n    text-align: left;\n  }\n\n  .mainControl {\n    flex: 1;\n    border-radius: 6px;\n    box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.06);\n    will-change: box-shadow;\n    transition: box-shadow 250ms ease-in-out;\n    &:hover {\n      box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);\n    }\n  }\n  button {\n    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);\n  }\n  .select {\n    width: 100%;\n    flex: 1;\n    &::after {\n      border-color: #000000 !important;\n    }\n  }\n\n  .icon {\n    &.is-action {\n      cursor: pointer;\n      pointer-events: initial !important;\n    }\n  }\n\n  /* Chrome, Safari, Edge, Opera */\n  input::-webkit-outer-spin-button,\n  input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  /* Firefox */\n  input[type=number] {\n    -moz-appearance: textfield;\n  }\n\n  .input[type=date]::-webkit-calendar-picker-indicator {\n    opacity:0;\n    -webkit-appearance: none;\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 40px;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n  }\n\n  textarea {\n    resize: none;\n  }\n`\n\ntype EventType = { target: any; type?: any } & Partial<Event>\nexport interface FieldProps {\n  label?: string\n  name?: string\n  type?: string\n  min?: number | string | Date | any\n  max?: number | string | Date | any\n  value?: string | number | readonly string[] | undefined\n  defaultValue?: string | number | readonly string[] | undefined\n  placeholder?: string\n  inputRef?: ReactHookFormRef\n  error?: boolean\n  errors?: FieldError\n  disabled?: boolean\n  userDisabled?: boolean\n  helpTextInfo?: string\n  helpText?: string\n  iconLeft?: string\n  iconRight?: string\n  withoutComponent?: boolean\n  addon?: ReactNode\n  children?: ReactNode\n  className?: string\n  onChange?: (event?: EventType) => unknown\n  // TODO, rename... something like changeHandler or valueDecorator\n  onChangeInner?: (value: string | number) => string | number\n  onBlur?: (event?: EventType) => void\n  onFocus?: (event?: EventType | undefined) => void\n  rightIconClick?: (event?: EventType) => void\n  leftIconClick?: (event?: EventType) => void\n  options?: any[] | null\n  creatable?: boolean\n  async?: boolean\n  css?: string\n  [key: string]: any\n}\n\ninterface SelectProps extends FieldProps {\n  id?: string\n}\n\ntype OptionObj = { label: string | number | undefined; value: string | number | undefined }\ntype Option = OptionObj | string | number\n\nexport const Select: FC<SelectProps>\n= memo<SelectProps>(\n  function Select({ options, value, inputRef, ...props }: SelectProps) {\n    return (\n      <div className='select'>\n        <select {...props} ref={inputRef} defaultValue={value}>\n          {options?.map((option: Option) => (\n            <option\n              key={`${JSON.stringify(option)}`}\n              value={typeof option === 'object' ? (option as OptionObj)?.value : option}\n            >\n              {typeof option === 'object' ? (option as OptionObj)?.label : option}\n            </option>\n          ))}\n        </select>\n      </div>\n    )\n  },\n)\n\nconst InputComponent = styled.input``\nconst TextAreaComponent = styled.textarea``\nconst StyledFieldLabel = styled.label`\n  text-align: left;\n`\n\nexport const Field: FC<FieldProps> = memo<FieldProps>(({\n  label,\n  name,\n  type = 'text',\n  value,\n  defaultValue,\n  placeholder,\n  inputRef,\n  error,\n  disabled,\n  userDisabled,\n  withoutComponent,\n  helpTextInfo,\n  helpText,\n  children,\n  iconLeft,\n  iconRight,\n  addon,\n  className,\n  onChange,\n  onChangeInner,\n  onBlur,\n  onFocus,\n  rightIconClick,\n  leftIconClick,\n  options,\n  css,\n  ...props\n}: FieldProps) => {\n  let Component: FC<any> = InputComponent\n\n  if (!children && type === 'textarea') {\n    Component = TextAreaComponent\n  }\n  const handleFocus = useCallback((event: Event | EventType | undefined) => {\n    if (userDisabled) {\n      event?.preventDefault?.()\n    } else {\n      onFocus && onFocus(event)\n    }\n  }, [userDisabled, onFocus])\n\n  const handleChange = useCallback((event: { target: { value: string } }) => {\n    if (userDisabled) {\n      return\n    }\n    if (onChangeInner && event?.target) {\n      // eslint-disable-next-line no-param-reassign\n      event.target.value = onChangeInner((event.target.value as string)) as string\n      onChange && onChange(event as EventType)\n    } else {\n      onChange && onChange(event as EventType)\n    }\n  }, [onChangeInner, onChange, userDisabled])\n\n  const valueProps = useMemo(() => {\n    if (value === undefined) {\n      return { defaultValue }\n    }\n    return { value }\n  }, [value, defaultValue])\n\n  return (\n    <FieldWrapper\n      className={`field ${className}`}\n      error={error}\n      disabled={disabled}\n      userDisabled={userDisabled}\n      css={css}\n    >\n      <StyledFieldLabel htmlFor={name} className='label'>{label}</StyledFieldLabel>\n      <div className={`field ${addon ? 'has-addons' : ''}`}>\n        <div\n          className={`control mainControl ${iconLeft && !withoutComponent\n            ? 'has-icons-left' : ''} ${iconRight ? 'has-icons-right' : ''}`}\n        >\n          {!withoutComponent && ((!children && (type === 'select' || options))\n            ? (\n              <Select\n                name={name}\n                id={name}\n                inputRef={inputRef}\n                className={`input ${error ? 'is-danger' : ''}`}\n                type='select'\n                placeholder={placeholder}\n                value={value}\n                options={options}\n                // TODO also handle change but value versus event.target.value issue\n                onChange={onChange}\n                onBlur={onBlur}\n                onFocus={handleFocus}\n                onKeyDown={handleFocus}\n                autoComplete='off'\n                disabled={disabled}\n                {...props}\n              />\n            )\n            : (\n              !children && (\n              <Component\n                name={name}\n                id={name}\n                ref={inputRef}\n                className={`input ${error ? 'is-danger' : ''}`}\n                type={type}\n                placeholder={placeholder}\n                {...valueProps}\n                onChange={handleChange}\n                onBlur={onBlur}\n                onFocus={handleFocus}\n                onKeyDown={handleFocus}\n                autoComplete='off'\n                disabled={disabled}\n                {...props}\n              />\n              )))}\n\n          {iconLeft && !withoutComponent && (\n            <span\n              className={`iconLeft icon is-small is-left ${leftIconClick ? 'is-action' : ''}`}\n              onClick={leftIconClick}\n            >\n              <IconComponent\n                iconName={iconLeft}\n                color={iconColor}\n              />\n            </span>\n          )}\n          {iconRight && (\n            <span\n              className={`iconRight icon is-small is-right ${rightIconClick ? 'is-action' : ''}`}\n              onClick={rightIconClick}\n            >\n              <IconComponent\n                iconName={iconRight}\n                color={iconColor}\n              />\n            </span>\n          )}\n          {children && children}\n        </div>\n        {addon && addon}\n      </div>\n      {helpTextInfo && <p className='help'>{helpTextInfo}</p>}\n      {helpText && <p className={`help ${error ? 'is-danger' : ''}`}>{helpText}</p>}\n    </FieldWrapper>\n  )\n})\n\nField.displayName = 'Field'\n"],"names":["iconColor","IconComponent","memo","React","createElement","setIconComponent","FieldWrapper","styled","div","_templateObject","_taggedTemplateLiteral","_ref","disabled","userDisabled","_ref2","Select","_ref3","options","value","inputRef","props","className","_extends","ref","defaultValue","map","option","key","concat","JSON","stringify","label","InputComponent","input","_templateObject2","TextAreaComponent","textarea","_templateObject3","StyledFieldLabel","_templateObject4","Field","_ref4","name","type","placeholder","error","withoutComponent","helpTextInfo","helpText","children","iconLeft","iconRight","addon","onChange","onChangeInner","onBlur","onFocus","rightIconClick","leftIconClick","css","Component","handleFocus","useCallback","event","_event$preventDefault","preventDefault","call","handleChange","target","valueProps","useMemo","undefined","htmlFor","id","onKeyDown","autoComplete","onClick","iconName","color","displayName","component"],"mappings":"6IAQA,IAAIA,EAAqCA,IAAM,UAM/C,IAAIC,EAAmCC,EAAAA,MAAK,WAA2B,OAAOC,MAAAC,cAAA,OAAA,KAAS,IAE1EC,MAYAC,EAAqCC,EAAOC,IAAGC,IAAAA,EAAAC,EAAAA,+1CAC/CC,IAAA,IAACC,SAAEA,EAAQC,aAAEA,GAAcF,EAAA,OAAMC,GAAYC,EAAe,GAAM,CAAC,IAC5DC,IAAA,IAACF,SAAEA,EAAQC,aAAEA,GAAcC,EAAA,OAAMF,GAAYC,EAAe,OAAS,MAAM,IAqHlFE,EACXb,EAAIA,MACJ,SAAec,GAAsD,IAArDC,QAAEA,EAAOC,MAAEA,EAAKC,SAAEA,KAAaC,GAAoBJ,EACjE,OACEb,MAAAC,cAAA,MAAA,CAAKiB,UAAU,UACblB,MAAAC,cAAAkB,SAAAA,EAAAA,WAAYF,EAAK,CAAEG,IAAKJ,EAAUK,aAAcN,IAC7CD,aAAO,EAAPA,EAASQ,KAAKC,GACbvB,MAAAC,cAAA,SAAA,CACEuB,IAAG,GAAAC,OAAKC,KAAKC,UAAUJ,IACvBR,MAAyB,iBAAXQ,EAAuBA,aAAM,EAANA,EAAsBR,MAAQQ,GAEhD,iBAAXA,EAAuBA,aAAAA,EAAAA,EAAsBK,MAAQL,MAMzE,IAGIM,EAAiBzB,EAAO0B,MAAKC,IAAAA,EAAAxB,EAAAA,sBAAE,CAAA,OAC/ByB,EAAoB5B,EAAO6B,SAAQC,IAAAA,EAAA3B,EAAAA,sBAAE,CAAA,OACrC4B,EAAmB/B,EAAOwB,MAAKQ,IAAAA,EAAA7B,EAAAA,sBAEpC,CAAA,8BAEY8B,EAAwBtC,EAAIA,MAAauC,IA4BpC,IA5BqCV,MACrDA,EAAKW,KACLA,EAAIC,KACJA,EAAO,OAAMzB,MACbA,EAAKM,aACLA,EAAYoB,YACZA,EAAWzB,SACXA,EAAQ0B,MACRA,EAAKjC,SACLA,EAAQC,aACRA,EAAYiC,iBACZA,EAAgBC,aAChBA,EAAYC,SACZA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,UACRA,EAASC,MACTA,EAAK/B,UACLA,EAASgC,SACTA,EAAQC,cACRA,EAAaC,OACbA,EAAMC,QACNA,EAAOC,eACPA,EAAcC,cACdA,EAAazC,QACbA,EAAO0C,IACPA,KACGvC,GACQqB,EACPmB,EAAqB5B,EAEpBiB,GAAqB,aAATN,IACfiB,EAAYzB,GAEd,MAAM0B,EAAcC,EAAWA,aAAEC,IACb,IAAAC,EAAdnD,EACFkD,SAAqBC,QAAhBA,EAALD,EAAOE,0BAAcD,GAArBA,EAAAE,KAAAH,GAEAP,GAAWA,EAAQO,EACrB,GACC,CAAClD,EAAc2C,IAEZW,EAAeL,EAAWA,aAAEC,IAC5BlD,IAGAyC,SAAiBS,GAAAA,EAAOK,QAE1BL,EAAMK,OAAOlD,MAAQoC,EAAeS,EAAMK,OAAOlD,OACjDmC,GAAYA,EAASU,IAErBV,GAAYA,EAASU,GACvB,GACC,CAACT,EAAeD,EAAUxC,IAEvBwD,EAAaC,EAAAA,SAAQ,SACXC,IAAVrD,EACK,CAAEM,gBAEJ,CAAEN,UACR,CAACA,EAAOM,IAEX,OACErB,MAAAC,cAACE,EAAY,CACXe,UAASO,SAAAA,OAAWP,GACpBwB,MAAOA,EACPjC,SAAUA,EACVC,aAAcA,EACd8C,IAAKA,GAELxD,MAAAC,cAACkC,EAAgB,CAACkC,QAAS9B,EAAMrB,UAAU,SAASU,GACpD5B,MAAAC,cAAA,MAAA,CAAKiB,mBAASO,OAAWwB,EAAQ,aAAe,KAC9CjD,MAAAC,cAAA,MAAA,CACEiB,iCAASO,OAAyBsB,IAAaJ,EAC3C,iBAAmB,QAAElB,OAAIuB,EAAY,kBAAoB,MAE3DL,IAAuBG,GAAsB,WAATN,IAAqB1B,GAsBtDgC,GACD9C,MAAAC,cAACwD,EAAStC,UAAA,CACRoB,KAAMA,EACN+B,GAAI/B,EACJnB,IAAKJ,EACLE,UAAS,SAAAO,OAAWiB,EAAQ,YAAc,IAC1CF,KAAMA,EACNC,YAAaA,GACTyB,EAAU,CACdhB,SAAUc,EACVZ,OAAQA,EACRC,QAASK,EACTa,UAAWb,EACXc,aAAa,MACb/D,SAAUA,GACNQ,IAnCNjB,MAAAC,cAACW,EAAMO,EAAAA,QAAA,CACLoB,KAAMA,EACN+B,GAAI/B,EACJvB,SAAUA,EACVE,UAAS,SAAAO,OAAWiB,EAAQ,YAAc,IAC1CF,KAAK,SACLC,YAAaA,EACb1B,MAAOA,EACPD,QAASA,EAEToC,SAAUA,EACVE,OAAQA,EACRC,QAASK,EACTa,UAAWb,EACXc,aAAa,MACb/D,SAAUA,GACNQ,KAuBT8B,IAAaJ,GACZ3C,MAAAC,cAAA,OAAA,CACEiB,UAAS,kCAAAO,OAAoC8B,EAAgB,YAAc,IAC3EkB,QAASlB,GAETvD,MAAAC,cAACH,EAAa,CACZ4E,SAAU3B,EACV4B,MAAO9E,KAIZmD,GACChD,MAAAC,cAAA,OAAA,CACEiB,UAAS,oCAAAO,OAAsC6B,EAAiB,YAAc,IAC9EmB,QAASnB,GAETtD,MAAAC,cAACH,EAAa,CACZ4E,SAAU1B,EACV2B,MAAO9E,KAIZiD,GAAYA,GAEdG,GAASA,GAEXL,GAAgB5C,MAAAC,cAAA,IAAA,CAAGiB,UAAU,QAAQ0B,GACrCC,GAAY7C,MAAAC,cAAA,IAAA,CAAGiB,kBAASO,OAAUiB,EAAQ,YAAc,KAAOG,GACnD,IAInBR,EAAMuC,YAAc,qFAxTSD,IAC3B9E,EAAY8E,CAAK,2BAKcE,IAC/B/E,EAAgB+E,CAAS"}

package/dist/ui/src/core/ui/components/icon/Icon.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e=require("react").memo((e=>{let{icon:c,className:a,color:o="currentColor"}=e;return React.createElement("svg",{"aria-hidden":"true",focusable:"false","data-prefix":c.prefix,"data-icon":c.iconName,className:"svg-inline--fa fa-".concat(c.iconName," ").concat(a),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 ".concat(c.icon[0]," ").concat(c.icon[1])},React.createElement("path",{fill:o,d:c.icon[4]}))}));e.displayName="Icon",exports.Icon=e;
+"use strict";const e=require("react").memo((e=>{let{icon:c,className:a,color:o="currentColor"}=e;return React.createElement("svg",{"aria-hidden":"true",focusable:"false","data-prefix":c.prefix,"data-icon":c.iconName,className:"svg-inline--fa fa-".concat(c.iconName," ").concat(a),role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 ".concat(c.icon[0]," ").concat(c.icon[1])},React.createElement("path",{fill:o,d:c.icon[4]}))}));e.displayName="Icon",exports.Icon=e;
 //# sourceMappingURL=Icon.js.map

package/dist/ui/src/core/ui/components/icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../../../../../../src/core/ui/components/icon/Icon.tsx"],"sourcesContent":["import { memo } from 'react'\n\ntype IconType = {\n  icon: {\n    prefix: string\n    iconName: string\n    icon: any[]\n  }\n  className?: string\n  color?: string\n}\n\nexport const Icon = memo<IconType>(({ icon, className, color = 'currentColor' }: IconType) => (\n  <svg\n    aria-hidden='true'\n    focusable='false'\n    data-prefix={icon.prefix}\n    data-icon={icon.iconName}\n    className={`svg-inline--fa fa-${icon.iconName} ${className}`}\n    role='img'\n    xmlns='http://www.w3.org/2000/svg'\n    viewBox={`0 0 ${icon.icon[0]} ${icon.icon[1]}`}\n  >\n    <path\n      fill={color}\n      d={icon.icon[4]}\n    />\n  </svg>\n))\n\nIcon.displayName = 'Icon'\n"],"names":["Icon","memo","_ref","icon","className","color","React","createElement","focusable","prefix","iconName","concat","role","xmlns","viewBox","fill","d","displayName"],"mappings":"oEAYaA,MAAAA,mBAAWC,MAAWC,IAAA,IAACC,KAAEA,EAAIC,UAAEA,EAASC,MAAEA,EAAQ,gBAA0BH,EAAA,OACvFI,MAAAC,cAAA,MAAA,CACE,cAAY,OACZC,UAAU,QACV,cAAaL,EAAKM,OAClB,YAAWN,EAAKO,SAChBN,UAAS,qBAAAO,OAAuBR,EAAKO,SAAQC,KAAAA,OAAIP,GACjDQ,KAAK,MACLC,MAAM,6BACNC,eAAOH,OAASR,EAAKA,KAAK,GAAE,KAAAQ,OAAIR,EAAKA,KAAK,KAE1CG,MAAAC,cAAA,OAAA,CACEQ,KAAMV,EACNW,EAAGb,EAAKA,KAAK,KAEX,IAGRH,EAAKiB,YAAc"}
+{"version":3,"file":"Icon.js","sources":["../../../../../../../src/core/ui/components/icon/Icon.tsx"],"sourcesContent":["import { memo } from 'react'\n\ntype IconType = {\n  icon: {\n    prefix: string\n    iconName: string\n    icon: any[]\n  }\n  className?: string\n  color?: string\n}\n\nexport const Icon = memo<IconType>(({ icon, className, color = 'currentColor' }: IconType) => (\n  <svg\n    aria-hidden='true'\n    focusable='false'\n    data-prefix={icon.prefix}\n    data-icon={icon.iconName}\n    className={`svg-inline--fa fa-${icon.iconName} ${className}`}\n    role='img'\n    xmlns='http://www.w3.org/2000/svg'\n    viewBox={`0 0 ${icon.icon[0]} ${icon.icon[1]}`}\n  >\n    <path\n      fill={color}\n      d={icon.icon[4]}\n    />\n  </svg>\n))\n\nIcon.displayName = 'Icon'\n"],"names":["Icon","memo","_ref","icon","className","color","React","createElement","focusable","prefix","iconName","concat","role","xmlns","viewBox","fill","d","displayName"],"mappings":"aAYaA,MAAAA,mBAAWC,MAAWC,IAAA,IAACC,KAAEA,EAAIC,UAAEA,EAASC,MAAEA,EAAQ,gBAA0BH,EAAA,OACvFI,MAAAC,cAAA,MAAA,CACE,cAAY,OACZC,UAAU,QACV,cAAaL,EAAKM,OAClB,YAAWN,EAAKO,SAChBN,UAAS,qBAAAO,OAAuBR,EAAKO,SAAQC,KAAAA,OAAIP,GACjDQ,KAAK,MACLC,MAAM,6BACNC,eAAOH,OAASR,EAAKA,KAAK,GAAE,KAAAQ,OAAIR,EAAKA,KAAK,KAE1CG,MAAAC,cAAA,OAAA,CACEQ,KAAMV,EACNW,EAAGb,EAAKA,KAAK,KAEX,IAGRH,EAAKiB,YAAc"}

package/dist/ui/src/core/ui/components/icon/IconBase.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../../_virtual/_rollupPluginBabelHelpers.js"),o=require("react"),t=require("./icon.module.scss.js"),n=require("./unifyIconUrl.js");const r=o.memo((r=>{let{iconUrl:i,minWidth:c,minHeight:s,size:l,fontSize:a,width:u,height:m,color:d="currentColor",className:h="",children:p,style:b,onClick:f,...y}=r;const g=i&&n.unifyIconUrl(i),I=o.useMemo((()=>({"--min-width":c||l||u||"auto","--min-height":s||l||m||"auto","--width":l||u||"1rem","--height":l||m||"1rem",...a?{fontSize:a}:{},...g?{"--icon-url":"url(".concat(g,")")}:{},...g?{"--icon-color":d}:{"--icon-content-color":d},...f?{cursor:"pointer"}:{},...b})),[c,l,u,s,m,a,g,d,f,b]),j=o.useMemo((()=>f?{onClick:f,role:"button",tabIndex:-1}:{}),[f]);return React.createElement("span",e.extends({},y,j,{className:"".concat(t.default["icon-base"]," icon-base ").concat(h),style:I}),!g&&p&&p)}));r.displayName="IconBase",exports.IconBase=r;
+"use strict";var e=require("../../../../../_virtual/_rollupPluginBabelHelpers.js"),o=require("react"),n=require("./icon.module.scss.js"),t=require("./unifyIconUrl.js");const i=o.memo((i=>{let{iconUrl:r,minWidth:c,minHeight:s,size:l,fontSize:a,width:u,height:m,color:h="currentColor",className:d="",children:p,style:b,onClick:f,...g}=i;const y=r&&t.unifyIconUrl(r),I=o.useMemo((()=>({"--min-width":c||l||u||"auto","--min-height":s||l||m||"auto","--width":l||u||"1rem","--height":l||m||"1rem",...a?{fontSize:a}:{},...y?{"--icon-url":"url(".concat(y,")")}:{},...y?{"--icon-color":h}:{"--icon-content-color":h},...f?{cursor:"pointer"}:{},...b})),[c,l,u,s,m,a,y,h,f,b]),q=o.useMemo((()=>f?{onClick:f,role:"button",tabIndex:-1}:{}),[f]);return React.createElement("span",e.extends({},g,q,{className:"".concat(n.default["icon-base"]," icon-base ").concat(d),style:I}),!y&&p&&p)}));i.displayName="IconBase",exports.IconBase=i;
 //# sourceMappingURL=IconBase.js.map

package/dist/ui/src/core/ui/components/icon/IconBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconBase.js","sources":["../../../../../../../src/core/ui/components/icon/IconBase.tsx"],"sourcesContent":["import { CSSProperties, memo, useMemo, FC, PropsWithChildren, MouseEvent } from 'react'\n\nimport classes from './icon.module.scss'\nimport { unifyIconUrl } from './unifyIconUrl'\n\n\nexport type IconBaseType = PropsWithChildren<unknown> & {\n  id?: string\n  iconUrl?: string | null\n  minWidth?: string | null\n  minHeight?: string | null\n  width?: string | null\n  height?: string | null\n  size?: string | null\n  fontSize?: string | null\n  color?: string | null\n  className?: string | null\n  style?: CSSProperties | null\n  onClick?: (event?: MouseEvent<HTMLSpanElement> | undefined) => void\n}\n\nexport const IconBase: FC<IconBaseType> = memo<IconBaseType>(({\n  iconUrl, minWidth, minHeight, size,\n  fontSize, width, height, color = 'currentColor', className = '', children, style, onClick, ...props\n}: IconBaseType) => {\n  const unifiedIconUrl = iconUrl && unifyIconUrl(iconUrl)\n\n  const styles = useMemo(() => (\n    {\n      '--min-width': minWidth || size || width || 'auto',\n      '--min-height': minHeight || size || height || 'auto',\n      '--width': size || width || '1rem',\n      '--height': size || height || '1rem',\n      ...(fontSize ? { fontSize } : {}),\n      ...(unifiedIconUrl ? { '--icon-url': `url(${unifiedIconUrl})` } : {}),\n      ...(unifiedIconUrl ? { '--icon-color': color } : { '--icon-content-color': color }),\n      ...(onClick ? { cursor: 'pointer' } : {}),\n      ...style,\n    }\n  ), [minWidth, size, width, minHeight, height, fontSize, unifiedIconUrl, color, onClick, style])\n\n  const onClickProps = useMemo(() => (onClick ? ({\n    onClick,\n    role: 'button',\n    tabIndex: -1,\n  }) : {}), [onClick])\n\n  return (\n    <span\n      {...props}\n      {...onClickProps}\n      className={`${classes['icon-base']} icon-base ${className}`}\n      style={styles as CSSProperties}\n    >\n      {(!unifiedIconUrl && children) && children}\n    </span>\n  )\n})\n\nIconBase.displayName = 'IconBase'\n"],"names":["IconBase","memo","_ref","iconUrl","minWidth","minHeight","size","fontSize","width","height","color","className","children","style","onClick","props","unifiedIconUrl","unifyIconUrl","styles","useMemo","concat","cursor","onClickProps","role","tabIndex","React","createElement","_extends","classes","displayName"],"mappings":"qOAqBaA,EAA6BC,EAAIA,MAAeC,IAGzC,IAH0CC,QAC5DA,EAAOC,SAAEA,EAAQC,UAAEA,EAASC,KAAEA,EAAIC,SAClCA,EAAQC,MAAEA,EAAKC,OAAEA,EAAMC,MAAEA,EAAQ,eAAcC,UAAEA,EAAY,GAAEC,SAAEA,EAAQC,MAAEA,EAAKC,QAAEA,KAAYC,GACjFb,EACb,MAAMc,EAAiBb,GAAWc,EAAYA,aAACd,GAEzCe,EAASC,EAAAA,SAAQ,KACrB,CACE,cAAef,GAAYE,GAAQE,GAAS,OAC5C,eAAgBH,GAAaC,GAAQG,GAAU,OAC/C,UAAWH,GAAQE,GAAS,OAC5B,WAAYF,GAAQG,GAAU,UAC1BF,EAAW,CAAEA,YAAa,MAC1BS,EAAiB,CAAE,aAAY,OAAAI,OAASJ,EAAc,MAAQ,MAC9DA,EAAiB,CAAE,eAAgBN,GAAU,CAAE,uBAAwBA,MACvEI,EAAU,CAAEO,OAAQ,WAAc,MACnCR,KAEJ,CAACT,EAAUE,EAAME,EAAOH,EAAWI,EAAQF,EAAUS,EAAgBN,EAAOI,EAASD,IAElFS,EAAeH,WAAQ,IAAOL,EAAW,CAC7CA,UACAS,KAAM,SACNC,UAAW,GACR,CAAG,GAAE,CAACV,IAEX,OACEW,MAAAC,cAAA,OAAAC,EAAA,QACMZ,CAAAA,EAAAA,EACAO,EAAY,CAChBX,UAAS,GAAAS,OAAKQ,EAAO,QAAC,aAAYR,eAAAA,OAAcT,GAChDE,MAAOK,KAEJF,GAAkBJ,GAAaA,EAC7B,IAIXZ,EAAS6B,YAAc"}
+{"version":3,"file":"IconBase.js","sources":["../../../../../../../src/core/ui/components/icon/IconBase.tsx"],"sourcesContent":["import { CSSProperties, memo, useMemo, FC, PropsWithChildren, MouseEvent } from 'react'\n\nimport classes from './icon.module.scss'\nimport { unifyIconUrl } from './unifyIconUrl'\n\n\nexport type IconBaseType = PropsWithChildren<unknown> & {\n  id?: string\n  iconUrl?: string | null\n  minWidth?: string | null\n  minHeight?: string | null\n  width?: string | null\n  height?: string | null\n  size?: string | null\n  fontSize?: string | null\n  color?: string | null\n  className?: string | null\n  style?: CSSProperties | null\n  onClick?: (event?: MouseEvent<HTMLSpanElement> | undefined) => void\n}\n\nexport const IconBase: FC<IconBaseType> = memo<IconBaseType>(({\n  iconUrl, minWidth, minHeight, size,\n  fontSize, width, height, color = 'currentColor', className = '', children, style, onClick, ...props\n}: IconBaseType) => {\n  const unifiedIconUrl = iconUrl && unifyIconUrl(iconUrl)\n\n  const styles = useMemo(() => (\n    {\n      '--min-width': minWidth || size || width || 'auto',\n      '--min-height': minHeight || size || height || 'auto',\n      '--width': size || width || '1rem',\n      '--height': size || height || '1rem',\n      ...(fontSize ? { fontSize } : {}),\n      ...(unifiedIconUrl ? { '--icon-url': `url(${unifiedIconUrl})` } : {}),\n      ...(unifiedIconUrl ? { '--icon-color': color } : { '--icon-content-color': color }),\n      ...(onClick ? { cursor: 'pointer' } : {}),\n      ...style,\n    }\n  ), [minWidth, size, width, minHeight, height, fontSize, unifiedIconUrl, color, onClick, style])\n\n  const onClickProps = useMemo(() => (onClick ? ({\n    onClick,\n    role: 'button',\n    tabIndex: -1,\n  }) : {}), [onClick])\n\n  return (\n    <span\n      {...props}\n      {...onClickProps}\n      className={`${classes['icon-base']} icon-base ${className}`}\n      style={styles as CSSProperties}\n    >\n      {(!unifiedIconUrl && children) && children}\n    </span>\n  )\n})\n\nIconBase.displayName = 'IconBase'\n"],"names":["IconBase","memo","_ref","iconUrl","minWidth","minHeight","size","fontSize","width","height","color","className","children","style","onClick","props","unifiedIconUrl","unifyIconUrl","styles","useMemo","concat","cursor","onClickProps","role","tabIndex","React","createElement","_extends","extends","classes","default","displayName"],"mappings":"8KAqBaA,EAA6BC,EAAIA,MAAeC,IAGzC,IAH0CC,QAC5DA,EAAOC,SAAEA,EAAQC,UAAEA,EAASC,KAAEA,EAAIC,SAClCA,EAAQC,MAAEA,EAAKC,OAAEA,EAAMC,MAAEA,EAAQ,eAAcC,UAAEA,EAAY,GAAEC,SAAEA,EAAQC,MAAEA,EAAKC,QAAEA,KAAYC,GACjFb,EACb,MAAMc,EAAiBb,GAAWc,EAAYA,aAACd,GAEzCe,EAASC,EAAAA,SAAQ,KACrB,CACE,cAAef,GAAYE,GAAQE,GAAS,OAC5C,eAAgBH,GAAaC,GAAQG,GAAU,OAC/C,UAAWH,GAAQE,GAAS,OAC5B,WAAYF,GAAQG,GAAU,UAC1BF,EAAW,CAAEA,YAAa,CAAE,KAC5BS,EAAiB,CAAE,aAAY,OAAAI,OAASJ,EAAc,MAAQ,CAAE,KAChEA,EAAiB,CAAE,eAAgBN,GAAU,CAAE,uBAAwBA,MACvEI,EAAU,CAAEO,OAAQ,WAAc,CAAE,KACrCR,KAEJ,CAACT,EAAUE,EAAME,EAAOH,EAAWI,EAAQF,EAAUS,EAAgBN,EAAOI,EAASD,IAElFS,EAAeH,WAAQ,IAAOL,EAAW,CAC7CA,UACAS,KAAM,SACNC,UAAW,GACR,CAAG,GAAE,CAACV,IAEX,OACEW,MAAAC,cAAA,OAAAC,EAAAC,QACMb,CAAAA,EAAAA,EACAO,EAAY,CAChBX,UAAS,GAAAS,OAAKS,EAAOC,QAAC,aAAYV,eAAAA,OAAcT,GAChDE,MAAOK,KAEJF,GAAkBJ,GAAaA,EAC7B,IAIXZ,EAAS+B,YAAc"}

package/dist/ui/src/core/ui/components/icon/IconWC.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../../../../_virtual/_rollupPluginBabelHelpers.js");require("../../../../../node_modules/core-js/modules/web.dom-collections.iterator.js");var e,i=require("../../../utils/webComponents/webComponent.utils.js"),s=require("./icon.module.scss.js");const n=document.createElement("template");n.innerHTML='<span class="icon-base"></span>';let o=i.ced("icon-base")(e=class e extends HTMLElement{constructor(){super(...arguments),t.defineProperty(this,"render",(()=>{if(this.mainElement=this.mainElement||this.querySelector(".icon-base"),!this.mainElement)return;this.classList.add(s.default["icon-base-parent"]),this.mainElement.classList.add(s.default["icon-base"]);const t={"--min-width":this.minWidth||this.size||this.width||"auto","--min-height":this.minHeight||this.size||this.height||"auto","--width":this.size||this.width||"1rem","--height":this.size||this.height||"1rem",...this.fontSize?{"font-size":this.fontSize||"unset"}:{},...this.iconUrl?{"--icon-url":"url(".concat(this.iconUrl,")")}:{},...this.iconUrl?{"--icon-color":this.color}:{"--icon-content-color":this.color}};this.mainElement.innerHTML=this.iconUrl?"":this.content||"",this.mainElement.setAttribute("style",Object.entries(t).map((t=>{let[e,i]=t;return"".concat(e,": ").concat(i,";")})).join(" "))}))}static get observedAttributes(){return["iconUrl","minWidth","minHeight","width","height","size","fontSize","color","className"]}connectedCallback(){(this.content||this.innerHTML)&&(this.content=this.content||this.innerHTML||this.getAttribute("content")),this.innerHTML=n.innerHTML,i.resolveAttributes(this,e.observedAttributes),this.render()}attributeChangedCallback(t,e,i){"className"!==t&&"classname"!==t&&"class"!==t||"string"==typeof i&&(this.classList.remove(i),this.classList.add(i)),this.color||(this.color="currentColor"),this[t]=i||"",this.render()}})||e;const r={ESIconBase:o};exports.ESIcon=o,exports.ESIconBase=r;
+"use strict";var t=require("../../../../../_virtual/_rollupPluginBabelHelpers.js");require("../../../../../node_modules/core-js/modules/web.dom-collections.iterator.js");var e,i=require("../../../utils/webComponents/webComponent.utils.js"),s=require("./icon.module.scss.js");const n=document.createElement("template");n.innerHTML='<span class="icon-base"></span>';let o=i.ced("icon-base")(e=class e extends HTMLElement{constructor(){super(...arguments),t.defineProperty(this,"render",(()=>{if(this.mainElement=this.mainElement||this.querySelector(".icon-base"),!this.mainElement)return;this.classList.add(s.default["icon-base-parent"]),this.mainElement.classList.add(s.default["icon-base"]);const t={"--min-width":this.minWidth||this.size||this.width||"auto","--min-height":this.minHeight||this.size||this.height||"auto","--width":this.size||this.width||"1rem","--height":this.size||this.height||"1rem",...this.fontSize?{"font-size":this.fontSize||"unset"}:{},...this.iconUrl?{"--icon-url":"url(".concat(this.iconUrl,")")}:{},...this.iconUrl?{"--icon-color":this.color}:{"--icon-content-color":this.color}};this.mainElement.innerHTML=this.iconUrl?"":this.content||"",this.mainElement.setAttribute("style",Object.entries(t).map((t=>{let[e,i]=t;return"".concat(e,": ").concat(i,";")})).join(" "))}))}static get observedAttributes(){return["iconUrl","minWidth","minHeight","width","height","size","fontSize","color","className"]}connectedCallback(){(this.content||this.innerHTML)&&(this.content=this.content||this.innerHTML||this.getAttribute("content")),this.innerHTML=n.innerHTML,i.resolveAttributes(this,e.observedAttributes),this.render()}attributeChangedCallback(t,e,i){"className"!==t&&"classname"!==t&&"class"!==t||"string"==typeof i&&(this.classList.remove(i),this.classList.add(i)),this.color||(this.color="currentColor"),this[t]=i||"",this.render()}})||e;const r={ESIconBase:o};exports.ESIcon=o,exports.ESIconBase=r;
 //# sourceMappingURL=IconWC.js.map

package/dist/ui/src/core/ui/components/icon/IconWC.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconWC.js","sources":["../../../../../../../src/core/ui/components/icon/IconWC.ts"],"sourcesContent":["import { ced, resolveAttributes } from '../../../utils/webComponents/webComponent.utils'\n\nimport classes from './icon.module.scss'\n\n\nconst template = document.createElement('template')\n\ntemplate.innerHTML = '<span class=\"icon-base\"></span>'\n\nexport type IconBaseWCType = {\n  iconUrl?: string\n  minWidth?: string\n  minHeight?: string\n  width?: string\n  height?: string\n  size?: string\n  fontSize?: string\n  color?: string\n  className?: string\n}\n\n@ced('icon-base')\nexport class ESIcon extends HTMLElement {\n  content: string | null\n\n  mainElement: HTMLElement\n\n  iconUrl?: string | null\n\n  minWidth?: string | null\n\n  minHeight?: string | null\n\n  width?: string | null\n\n  height?: string | null\n\n  size?: string | null\n\n  fontSize?: string | null\n\n  color?: string | null\n\n  static get observedAttributes() {\n    return ['iconUrl', 'minWidth', 'minHeight', 'width', 'height', 'size', 'fontSize', 'color', 'className']\n  }\n\n  connectedCallback() {\n    if (this.content || this.innerHTML) {\n      this.content = this.content || this.innerHTML || this.getAttribute('content')\n    }\n\n    this.innerHTML = template.innerHTML\n\n    resolveAttributes(this, ESIcon.observedAttributes)\n\n    this.render()\n  }\n\n  attributeChangedCallback(attrName: string, oldVal: string | number | null, newVal: string | number | null) {\n    if (attrName === 'className' || attrName === 'classname' || attrName === 'class') {\n      if (typeof newVal === 'string') {\n        this.classList.remove(newVal as string)\n        this.classList.add(newVal as string)\n      }\n    }\n    if (!this.color) {\n      this.color = 'currentColor'\n    }\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    this[attrName] = (newVal as string) || ''\n    this.render()\n  }\n\n  render = () => {\n    this.mainElement = this.mainElement || this.querySelector('.icon-base') as HTMLElement\n    if (!this.mainElement) {\n      return\n    }\n    this.classList.add(classes['icon-base-parent'])\n    this.mainElement.classList.add(classes['icon-base'])\n\n    const styles = {\n      '--min-width': this.minWidth || this.size || this.width || 'auto',\n      '--min-height': this.minHeight || this.size || this.height || 'auto',\n      '--width': this.size || this.width || '1rem',\n      '--height': this.size || this.height || '1rem',\n      ...(this.fontSize ? { 'font-size': this.fontSize || 'unset' } : {}),\n      ...(this.iconUrl ? { '--icon-url': `url(${this.iconUrl})` } : {}),\n      ...(this.iconUrl ? { '--icon-color': this.color } : { '--icon-content-color': this.color }),\n    }\n\n    this.mainElement.innerHTML = this.iconUrl ? '' : (this.content || '')\n\n    this.mainElement.setAttribute('style', Object.entries(styles).map(([key, value]) => `${key}: ${value};`).join(' '))\n  }\n}\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'icon-base': any\n    }\n  }\n}\n\nexport const ESIconBase = {\n  ESIconBase: ESIcon,\n}\n"],"names":["template","document","createElement","innerHTML","ESIcon","ced","_dec","_class","HTMLElement","constructor","super","arguments","_defineProperty","this","mainElement","querySelector","classList","add","classes","styles","minWidth","size","width","minHeight","height","fontSize","iconUrl","concat","color","content","setAttribute","Object","entries","map","_ref","key","value","join","observedAttributes","connectedCallback","getAttribute","resolveAttributes","render","attributeChangedCallback","attrName","oldVal","newVal","remove","ESIconBase"],"mappings":"0UAKA,MAAMA,EAAWC,SAASC,cAAc,YAExCF,EAASG,UAAY,kCAcrB,IACaC,EADZC,EAAAA,IAAI,YAAYC,CAAAC,EAAjB,MACaH,UAAeI,YAAYC,WAAAA,GAAAC,SAAAC,WAAAC,gCAqD7B,KAEP,GADAC,KAAKC,YAAcD,KAAKC,aAAeD,KAAKE,cAAc,eACrDF,KAAKC,YACR,OAEFD,KAAKG,UAAUC,IAAIC,EAAAA,QAAQ,qBAC3BL,KAAKC,YAAYE,UAAUC,IAAIC,EAAO,QAAC,cAEvC,MAAMC,EAAS,CACb,cAAeN,KAAKO,UAAYP,KAAKQ,MAAQR,KAAKS,OAAS,OAC3D,eAAgBT,KAAKU,WAAaV,KAAKQ,MAAQR,KAAKW,QAAU,OAC9D,UAAWX,KAAKQ,MAAQR,KAAKS,OAAS,OACtC,WAAYT,KAAKQ,MAAQR,KAAKW,QAAU,UACpCX,KAAKY,SAAW,CAAE,YAAaZ,KAAKY,UAAY,SAAY,MAC5DZ,KAAKa,QAAU,CAAE,aAAYC,OAAAA,OAASd,KAAKa,QAAO,MAAQ,MAC1Db,KAAKa,QAAU,CAAE,eAAgBb,KAAKe,OAAU,CAAE,uBAAwBf,KAAKe,QAGrFf,KAAKC,YAAYX,UAAYU,KAAKa,QAAU,GAAMb,KAAKgB,SAAW,GAElEhB,KAAKC,YAAYgB,aAAa,QAASC,OAAOC,QAAQb,GAAQc,KAAIC,IAAA,IAAEC,EAAKC,GAAMF,EAAA,MAAA,GAAAP,OAAQQ,EAAGR,MAAAA,OAAKS,EAAK,IAAA,IAAKC,KAAK,KAAK,GACpH,CArDD,6BAAWC,GACT,MAAO,CAAC,UAAW,WAAY,YAAa,QAAS,SAAU,OAAQ,WAAY,QAAS,YAC9F,CAEAC,iBAAAA,IACM1B,KAAKgB,SAAWhB,KAAKV,aACvBU,KAAKgB,QAAUhB,KAAKgB,SAAWhB,KAAKV,WAAaU,KAAK2B,aAAa,YAGrE3B,KAAKV,UAAYH,EAASG,UAE1BsC,EAAAA,kBAAkB5B,KAAMT,EAAOkC,oBAE/BzB,KAAK6B,QACP,CAEAC,wBAAAA,CAAyBC,EAAkBC,EAAgCC,GACxD,cAAbF,GAAyC,cAAbA,GAAyC,UAAbA,GACpC,iBAAXE,IACTjC,KAAKG,UAAU+B,OAAOD,GACtBjC,KAAKG,UAAUC,IAAI6B,IAGlBjC,KAAKe,QACRf,KAAKe,MAAQ,gBAIff,KAAK+B,GAAaE,GAAqB,GACvCjC,KAAK6B,QACP,KAwBDnC,EAWM,MAAMyC,EAAa,CACxBA,WAAY5C"}
+{"version":3,"file":"IconWC.js","sources":["../../../../../../../src/core/ui/components/icon/IconWC.ts"],"sourcesContent":["import { ced, resolveAttributes } from '../../../utils/webComponents/webComponent.utils'\n\nimport classes from './icon.module.scss'\n\n\nconst template = document.createElement('template')\n\ntemplate.innerHTML = '<span class=\"icon-base\"></span>'\n\nexport type IconBaseWCType = {\n  iconUrl?: string\n  minWidth?: string\n  minHeight?: string\n  width?: string\n  height?: string\n  size?: string\n  fontSize?: string\n  color?: string\n  className?: string\n}\n\n@ced('icon-base')\nexport class ESIcon extends HTMLElement {\n  content: string | null\n\n  mainElement: HTMLElement\n\n  iconUrl?: string | null\n\n  minWidth?: string | null\n\n  minHeight?: string | null\n\n  width?: string | null\n\n  height?: string | null\n\n  size?: string | null\n\n  fontSize?: string | null\n\n  color?: string | null\n\n  static get observedAttributes() {\n    return ['iconUrl', 'minWidth', 'minHeight', 'width', 'height', 'size', 'fontSize', 'color', 'className']\n  }\n\n  connectedCallback() {\n    if (this.content || this.innerHTML) {\n      this.content = this.content || this.innerHTML || this.getAttribute('content')\n    }\n\n    this.innerHTML = template.innerHTML\n\n    resolveAttributes(this, ESIcon.observedAttributes)\n\n    this.render()\n  }\n\n  attributeChangedCallback(attrName: string, oldVal: string | number | null, newVal: string | number | null) {\n    if (attrName === 'className' || attrName === 'classname' || attrName === 'class') {\n      if (typeof newVal === 'string') {\n        this.classList.remove(newVal as string)\n        this.classList.add(newVal as string)\n      }\n    }\n    if (!this.color) {\n      this.color = 'currentColor'\n    }\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    this[attrName] = (newVal as string) || ''\n    this.render()\n  }\n\n  render = () => {\n    this.mainElement = this.mainElement || this.querySelector('.icon-base') as HTMLElement\n    if (!this.mainElement) {\n      return\n    }\n    this.classList.add(classes['icon-base-parent'])\n    this.mainElement.classList.add(classes['icon-base'])\n\n    const styles = {\n      '--min-width': this.minWidth || this.size || this.width || 'auto',\n      '--min-height': this.minHeight || this.size || this.height || 'auto',\n      '--width': this.size || this.width || '1rem',\n      '--height': this.size || this.height || '1rem',\n      ...(this.fontSize ? { 'font-size': this.fontSize || 'unset' } : {}),\n      ...(this.iconUrl ? { '--icon-url': `url(${this.iconUrl})` } : {}),\n      ...(this.iconUrl ? { '--icon-color': this.color } : { '--icon-content-color': this.color }),\n    }\n\n    this.mainElement.innerHTML = this.iconUrl ? '' : (this.content || '')\n\n    this.mainElement.setAttribute('style', Object.entries(styles).map(([key, value]) => `${key}: ${value};`).join(' '))\n  }\n}\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'icon-base': any\n    }\n  }\n}\n\nexport const ESIconBase = {\n  ESIconBase: ESIcon,\n}\n"],"names":["template","document","createElement","innerHTML","ESIcon","ced","_dec","_class","HTMLElement","constructor","super","arguments","_defineProperty","this","mainElement","querySelector","classList","add","classes","default","styles","minWidth","size","width","minHeight","height","fontSize","iconUrl","concat","color","content","setAttribute","Object","entries","map","_ref","key","value","join","observedAttributes","connectedCallback","getAttribute","resolveAttributes","render","attributeChangedCallback","attrName","oldVal","newVal","remove","ESIconBase"],"mappings":"mRAKA,MAAMA,EAAWC,SAASC,cAAc,YAExCF,EAASG,UAAY,kCAcrB,IACaC,EADZC,EAAAA,IAAI,YAAYC,CAAAC,EAAjB,MACaH,UAAeI,YAAYC,WAAAA,GAAAC,SAAAC,WAAAC,gCAqD7B,KAEP,GADAC,KAAKC,YAAcD,KAAKC,aAAeD,KAAKE,cAAc,eACrDF,KAAKC,YACR,OAEFD,KAAKG,UAAUC,IAAIC,EAAAA,QAAQ,qBAC3BL,KAAKC,YAAYE,UAAUC,IAAIC,EAAOC,QAAC,cAEvC,MAAMC,EAAS,CACb,cAAeP,KAAKQ,UAAYR,KAAKS,MAAQT,KAAKU,OAAS,OAC3D,eAAgBV,KAAKW,WAAaX,KAAKS,MAAQT,KAAKY,QAAU,OAC9D,UAAWZ,KAAKS,MAAQT,KAAKU,OAAS,OACtC,WAAYV,KAAKS,MAAQT,KAAKY,QAAU,UACpCZ,KAAKa,SAAW,CAAE,YAAab,KAAKa,UAAY,SAAY,CAAE,KAC9Db,KAAKc,QAAU,CAAE,aAAYC,OAAAA,OAASf,KAAKc,QAAO,MAAQ,CAAE,KAC5Dd,KAAKc,QAAU,CAAE,eAAgBd,KAAKgB,OAAU,CAAE,uBAAwBhB,KAAKgB,QAGrFhB,KAAKC,YAAYX,UAAYU,KAAKc,QAAU,GAAMd,KAAKiB,SAAW,GAElEjB,KAAKC,YAAYiB,aAAa,QAASC,OAAOC,QAAQb,GAAQc,KAAIC,IAAA,IAAEC,EAAKC,GAAMF,EAAA,MAAA,GAAAP,OAAQQ,EAAGR,MAAAA,OAAKS,EAAK,IAAA,IAAKC,KAAK,KAAK,GACpH,CArDD,6BAAWC,GACT,MAAO,CAAC,UAAW,WAAY,YAAa,QAAS,SAAU,OAAQ,WAAY,QAAS,YAC9F,CAEAC,iBAAAA,IACM3B,KAAKiB,SAAWjB,KAAKV,aACvBU,KAAKiB,QAAUjB,KAAKiB,SAAWjB,KAAKV,WAAaU,KAAK4B,aAAa,YAGrE5B,KAAKV,UAAYH,EAASG,UAE1BuC,EAAAA,kBAAkB7B,KAAMT,EAAOmC,oBAE/B1B,KAAK8B,QACP,CAEAC,wBAAAA,CAAyBC,EAAkBC,EAAgCC,GACxD,cAAbF,GAAyC,cAAbA,GAAyC,UAAbA,GACpC,iBAAXE,IACTlC,KAAKG,UAAUgC,OAAOD,GACtBlC,KAAKG,UAAUC,IAAI8B,IAGlBlC,KAAKgB,QACRhB,KAAKgB,MAAQ,gBAIfhB,KAAKgC,GAAaE,GAAqB,GACvClC,KAAK8B,QACP,KAwBDpC,EAWM,MAAM0C,EAAa,CACxBA,WAAY7C"}

package/dist/ui/src/core/ui/components/icon/unifyIconUrl.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),require("../../../../../node_modules/core-js/modules/es.string.replace.js"),require("../../../../../node_modules/core-js/modules/es.string.replace-all.js");var e=require("ramda");exports.unifyIconUrl=l=>{if(!l||!e.is(String,l)||!l||null!=l&&l.includes(".svg")||null!=l&&l.includes("data:image/svg+xml;base64"))return l;const r=null==l?void 0:l.replaceAll("/\\s+/g"," ").replaceAll("'",'"').replaceAll("%25","%").replaceAll("%23","#").replaceAll("%3c","<").replaceAll("%3e",">").replaceAll("%20"," ").replaceAll("data:image/svg+xml,","");return"data:image/svg+xml;base64,".concat(btoa(r))};
+"use strict";require("../../../../../node_modules/core-js/modules/es.string.replace.js"),require("../../../../../node_modules/core-js/modules/es.string.replace-all.js");var e=require("ramda");exports.unifyIconUrl=l=>{if(!l||!e.is(String,l)||!l||null!=l&&l.includes(".svg")||null!=l&&l.includes("data:image/svg+xml;base64"))return l;const r=null==l?void 0:l.replaceAll("/\\s+/g"," ").replaceAll("'",'"').replaceAll("%25","%").replaceAll("%23","#").replaceAll("%3c","<").replaceAll("%3e",">").replaceAll("%20"," ").replaceAll("data:image/svg+xml,","");return"data:image/svg+xml;base64,".concat(btoa(r))};
 //# sourceMappingURL=unifyIconUrl.js.map

package/dist/ui/src/core/ui/components/icon/unifyIconUrl.js.map

@@ -1 +1 @@
-{"version":3,"file":"unifyIconUrl.js","sources":["../../../../../../../src/core/ui/components/icon/unifyIconUrl.ts"],"sourcesContent":["import { is } from 'ramda'\n\n// fix of Vite 5 new way of handling assets\n// https://github.com/vitejs/vite/pull/2909\n// https://github.com/vitejs/vite/blob/77d5165e2f252bfecbb0eebccc6f04dc8be0c5ba/packages/vite/src/node/plugins/asset.ts#L419\nexport const unifyIconUrl = (iconUrl: string) => {\n  if (!iconUrl || !is(String, iconUrl) || !iconUrl\n  || iconUrl?.includes('.svg') || iconUrl?.includes('data:image/svg+xml;base64')) {\n    return iconUrl\n  }\n\n  const unifiedIconUrl = iconUrl?.replaceAll('/\\\\s+/g', ' ')\n    .replaceAll('\\'', '\"')\n    .replaceAll('%25', '%')\n    .replaceAll('%23', '#')\n    .replaceAll('%3c', '<')\n    .replaceAll('%3e', '>')\n    .replaceAll('%20', ' ')\n    .replaceAll('data:image/svg+xml,', '')\n\n  return `data:image/svg+xml;base64,${btoa(unifiedIconUrl)}`\n}\n"],"names":["iconUrl","is","String","includes","unifiedIconUrl","replaceAll","concat","btoa"],"mappings":"4QAK6BA,IAC3B,IAAKA,IAAYC,EAAEA,GAACC,OAAQF,KAAaA,GACtCA,SAAAA,EAASG,SAAS,SAAWH,SAAAA,EAASG,SAAS,6BAChD,OAAOH,EAGT,MAAMI,EAAiBJ,aAAO,EAAPA,EAASK,WAAW,UAAW,KACnDA,WAAW,IAAM,KACjBA,WAAW,MAAO,KAClBA,WAAW,MAAO,KAClBA,WAAW,MAAO,KAClBA,WAAW,MAAO,KAClBA,WAAW,MAAO,KAClBA,WAAW,sBAAuB,IAErC,MAAA,6BAAAC,OAAoCC,KAAKH,GAAe"}
+{"version":3,"file":"unifyIconUrl.js","sources":["../../../../../../../src/core/ui/components/icon/unifyIconUrl.ts"],"sourcesContent":["import { is } from 'ramda'\n\n// fix of Vite 5 new way of handling assets\n// https://github.com/vitejs/vite/pull/2909\n// https://github.com/vitejs/vite/blob/77d5165e2f252bfecbb0eebccc6f04dc8be0c5ba/packages/vite/src/node/plugins/asset.ts#L419\nexport const unifyIconUrl = (iconUrl: string) => {\n  if (!iconUrl || !is(String, iconUrl) || !iconUrl\n  || iconUrl?.includes('.svg') || iconUrl?.includes('data:image/svg+xml;base64')) {\n    return iconUrl\n  }\n\n  const unifiedIconUrl = iconUrl?.replaceAll('/\\\\s+/g', ' ')\n    .replaceAll('\\'', '\"')\n    .replaceAll('%25', '%')\n    .replaceAll('%23', '#')\n    .replaceAll('%3c', '<')\n    .replaceAll('%3e', '>')\n    .replaceAll('%20', ' ')\n    .replaceAll('data:image/svg+xml,', '')\n\n  return `data:image/svg+xml;base64,${btoa(unifiedIconUrl)}`\n}\n"],"names":["iconUrl","is","String","includes","unifiedIconUrl","replaceAll","concat","btoa"],"mappings":"qNAK6BA,IAC3B,IAAKA,IAAYC,EAAEA,GAACC,OAAQF,KAAaA,GACtCA,SAAAA,EAASG,SAAS,SAAWH,SAAAA,EAASG,SAAS,6BAChD,OAAOH,EAGT,MAAMI,EAAiBJ,aAAO,EAAPA,EAASK,WAAW,UAAW,KACnDA,WAAW,IAAM,KACjBA,WAAW,MAAO,KAClBA,WAAW,MAAO,KAClBA,WAAW,MAAO,KAClBA,WAAW,MAAO,KAClBA,WAAW,MAAO,KAClBA,WAAW,sBAAuB,IAErC,MAAA,6BAAAC,OAAoCC,KAAKH,GAAe"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});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.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;
 //# sourceMappingURL=FlowLayout.js.map