npm - @e1011/es-kit - Versions diffs - 1.1.80 → 1.1.84 - Mend

@e1011/es-kit 1.1.80 → 1.1.84

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/dist/lib/cjs/src/core/ui/components/container/ResizableContainer.js.map CHANGED Viewed

	@@ -1 +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/LayoutBox'\nimport { LayoutBoxProps } from './layoutBox/layoutBox.types'\n\n\nexport type ResizableContainerProps = LayoutBoxProps & PropsWithChildren<any> & {\n debounceDelay?: number\n children?: (props: ResizableContainerRenderProps) => ReactElement\n}\n\nexport type ResizableContainerRenderProps = {\n width: number \| string\n height: number \| string\n measured: boolean\n}\n\nconst styles = {\n main: {\n position: 'absolute',\n zIndex: 1,\n left: 0,\n pointerEvents: 'none',\n },\n empty: {\n pointerEvents: 'none',\n },\n}\n\nexport const ResizableContainer: FC<ResizableContainerProps> = memo<ResizableContainerProps>(\n ({ children, debounceDelay = 250, ...props }: ResizableContainerProps) => {\n const [containerRef, containerSize] = useResize(debounceDelay)\n\n return (\n <LayoutBox\n width='100%'\n height='100%'\n justify='center'\n align='center'\n direction='column'\n {...props}\n >\n <LayoutBox\n style={styles.main}\n width='100%'\n height='100%'\n ref={containerRef as RefObject<HTMLDivElement>}\n />\n {!children && (\n <LayoutBox\n width={`${Math.max(containerSize?.width \|\| 200, 200) \|\| 200}px`}\n height={`${Math.max(containerSize?.height \|\| 200, 200) \|\| 200}px`}\n style={styles.empty}\n />\n )}\n {children && children?.({\n height: `${containerSize?.height \|\| 200}px`,\n width: `${containerSize?.width \|\| 200}px`,\n measured: !!containerSize?.height,\n } as ResizableContainerRenderProps)}\n </LayoutBox>\n )\n },\n)\n\nResizableContainer.displayName = 'ResizableContainer'\n"],"names":["styles","main","position","zIndex","left","pointerEvents","empty","ResizableContainer","memo","_ref","children","debounceDelay","props","_objectWithoutProperties","_excluded","containerRef","containerSize","useResize","React","createElement","LayoutBox","_extends","width","height","justify","align","direction","style","ref","concat","Math","max","measured","displayName"],"mappings":"qTAmBMA,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,KAAwCF,EAAhCG,EAAKC,EAAAA,wBAAAJ,EAAAK,GACxC,MAAOC,EAAcC,GAAiBC,EAAAA,UAAUN,GAEhD,OACEO,MAAAC,cAACC,EAASA,UAAAC,UAAA,CACRC,MAAM,OACNC,OAAO,OACPC,QAAQ,SACRC,MAAM,SACNC,UAAU,UACNd,GAEJM,MAAAC,cAACC,EAAAA,UAAS,CACRO,MAAO3B,EAAOC,KACdqB,MAAM,OACNC,OAAO,OACPK,IAAKb,KAELL,GACFQ,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,MAAO3B,EAAOM,QAGfI,IAAYA,aAAAA,EAAAA,EAAW,CACtBa,OAAMM,GAAAA,QAAKb,aAAa,EAAbA,EAAeO,SAAU,IAAO,MAC3CD,MAAKO,GAAAA,QAAKb,aAAa,EAAbA,EAAeM,QAAS,IAAO,MACzCU,WAAYhB,UAAAA,EAAeO,WAEnB,IAKlBhB,EAAmB0B,YAAc"}
1	+ {"version":3,"file":"ResizableContainer.js","sources":["../../../../../../../../src/core/ui/components/container/ResizableContainer.tsx"],"sourcesContent":["import { memo, RefObject, PropsWithChildren, ReactElement, FC, CSSProperties } from 'react'\n\nimport { useResize } from '../../../hooks/useResize'\n\nimport { LayoutBox } from './layoutBox/LayoutBox'\nimport { LayoutBoxProps } from './layoutBox/layoutBox.types'\n\n\nexport type ResizableContainerProps = LayoutBoxProps & PropsWithChildren<any> & {\n debounceDelay?: number\n children?: (props: ResizableContainerRenderProps) => ReactElement\n}\n\nexport type ResizableContainerRenderProps = {\n width: number \| string\n height: number \| string\n measured: boolean\n}\n\nconst styles = {\n main: {\n position: 'absolute',\n zIndex: 1,\n left: 0,\n pointerEvents: 'none',\n },\n empty: {\n pointerEvents: 'none',\n },\n}\n\nexport const ResizableContainer: FC<ResizableContainerProps> = memo<ResizableContainerProps>(\n ({ children, debounceDelay = 250, ...props }: ResizableContainerProps) => {\n const [containerRef, containerSize] = useResize(debounceDelay)\n\n return (\n <LayoutBox\n width='100%'\n height='100%'\n justify='center'\n align='center'\n direction='column'\n {...props}\n >\n <LayoutBox\n style={styles.main as CSSProperties}\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 as CSSProperties}\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","_objectWithoutProperties","_excluded","containerRef","containerSize","useResize","React","createElement","LayoutBox","_extends","width","height","justify","align","direction","style","ref","concat","Math","max","measured","displayName"],"mappings":"qTAmBMA,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,KAAwCF,EAAhCG,EAAKC,EAAAA,wBAAAJ,EAAAK,GACxC,MAAOC,EAAcC,GAAiBC,EAAAA,UAAUN,GAEhD,OACEO,MAAAC,cAACC,EAASA,UAAAC,UAAA,CACRC,MAAM,OACNC,OAAO,OACPC,QAAQ,SACRC,MAAM,SACNC,UAAU,UACNd,GAEJM,MAAAC,cAACC,EAAAA,UAAS,CACRO,MAAO3B,EAAOC,KACdqB,MAAM,OACNC,OAAO,OACPK,IAAKb,KAELL,GACFQ,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,MAAO3B,EAAOM,QAGfI,IAAYA,aAAAA,EAAAA,EAAW,CACtBa,OAAMM,GAAAA,QAAKb,aAAa,EAAbA,EAAeO,SAAU,IAAO,MAC3CD,MAAKO,GAAAA,QAAKb,aAAa,EAAbA,EAAeM,QAAS,IAAO,MACzCU,WAAYhB,UAAAA,EAAeO,WAEnB,IAKlBhB,EAAmB0B,YAAc"}

package/dist/lib/cjs/src/core/ui/components/container/layoutBox/LayoutBox.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../../../../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),o=require("../../../../hooks/useParseProps.js"),r=require("../../../../utils/helpers/ui.js"),s=require("./layoutBox.module.scss.js"),a=require("./layoutBox.types.js");const i=["id","style","children","tabIndex","className","onClick","column","asGrid","wFull","hFull","centered","flex","width","height","debug","background"],l={start:"flex-start","flex-start":"flex-start",end:"flex-end","flex-end":"flex-end"},d=e=>e&&l[e]||e,n=t.forwardRef(((l,n)=>{let{id:u,style:c,children:x,tabIndex:y,className:p="",onClick:f,column:m,asGrid:h=!1,wFull:b=!1,hFull:g=!1,centered:j=!1,flex:w,width:v,height:B,debug:N=!1,background:P}=l,k=e.objectWithoutProperties(l,i);const{dataProps:I,restProps:L}=o.useParseProps(k),q=t.useMemo((()=>f?{onClick:f,onKeyDown:f,role:"button",tabIndex:-1}:{}),[f]),C=t.useMemo((()=>void 0!==m&&!0===m?a.LayoutDirection.COLUMN:null),[m]),F=t.useMemo((()=>{const t=e.objectSpread2({},L);return(L.direction||C)&&(t.flexDirection=L.direction||C),j?(t.alignItems="center",t.justifyContent="center"):(L.align&&(t.alignItems=d(L.align)),L.justify&&(t.justifyContent=d(L.justify))),t.display=h?"grid":"flex",b?t.width="100%":void 0!==v&&(t.width="number"==typeof v?"".concat(v,"px"):v),g?t.height="100%":void 0!==B&&(t.height="number"==typeof B?"".concat(B,"px"):B),void 0!==w&&(t.flex=!0===w?1:w),void 0!==P&&(t.background=P),N&&(t.outline="1px solid red"),e.objectSpread2(e.objectSpread2({},t),c)}),[h,P,j,N,w,g,B,C,L,c,b,v]);return React.createElement("div",e.extends({},u?{id:"".concat(u)}:{},{ref:n,tabIndex:y,className:r.classNames(s.default["layout-box"],p),style:F},I,{"data-testid":I.dataTestId||I["data-testid"]||u},q),x)}));n.displayName="LayoutBoxRefForwarded";const u=t.memo(n),c=t.memo(n);u.displayName="LayoutBox",c.displayName="BoxLayout",exports.BoxLayout=c,exports.LayoutBox=u;
+"use strict";var e=require("../../../../../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),o=require("../../../../hooks/useParseProps.js"),r=require("../../../../utils/helpers/ui.js"),s=require("./layoutBox.module.scss.js"),a=require("./layoutBox.types.js");const i=["id","style","children","tabIndex","className","column","asGrid","wFull","hFull","centered","flex","width","height","debug","background"],l={start:"flex-start","flex-start":"flex-start",end:"flex-end","flex-end":"flex-end"},d=e=>e&&l[e]||e,u=t.forwardRef(((l,u)=>{let{id:n,style:c,children:x,tabIndex:p,className:y="",column:f,asGrid:m=!1,wFull:h=!1,hFull:b=!1,centered:g=!1,flex:j,width:v,height:w,debug:B=!1,background:N}=l,P=e.objectWithoutProperties(l,i);const{dataProps:L,restProps:q}=o.useParseProps(P),I=t.useMemo((()=>void 0!==f&&!0===f?a.LayoutDirection.COLUMN:null),[f]),F=t.useMemo((()=>{const t=e.objectSpread2({},q);return(q.direction||I)&&(t.flexDirection=q.direction||I),g?(t.alignItems="center",t.justifyContent="center"):(q.align&&(t.alignItems=d(q.align)),q.justify&&(t.justifyContent=d(q.justify))),t.display=m?"grid":"flex",h?t.width="100%":void 0!==v&&(t.width="number"==typeof v?"".concat(v,"px"):v),b?t.height="100%":void 0!==w&&(t.height="number"==typeof w?"".concat(w,"px"):w),void 0!==j&&(t.flex=!0===j?1:j),void 0!==N&&(t.background=N),B&&(t.outline="1px solid red"),e.objectSpread2(e.objectSpread2({},t),c)}),[m,N,g,B,j,b,w,I,q,c,h,v]);return React.createElement("div",e.extends({},n?{id:"".concat(n)}:{},{ref:u,tabIndex:p,className:r.classNames(s.default["layout-box"],y),style:F},L,{"data-testid":L.dataTestId||L["data-testid"]||n}),x)}));u.displayName="LayoutBoxRefForwarded";const n=t.memo(u),c=t.memo(u);n.displayName="LayoutBox",c.displayName="BoxLayout",exports.BoxLayout=c,exports.LayoutBox=n;
 //# sourceMappingURL=LayoutBox.js.map

package/dist/lib/cjs/src/core/ui/components/container/layoutBox/LayoutBox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LayoutBox.js","sources":["../../../../../../../../../src/core/ui/components/container/layoutBox/LayoutBox.tsx"],"sourcesContent":["import { memo, FC, useMemo, CSSProperties, forwardRef, LegacyRef } from 'react'\n\nimport { useParseProps } from '../../../../hooks/useParseProps'\nimport { classNames } from '../../../../utils/helpers/ui'\n\nimport classes from './layoutBox.module.scss'\nimport { LayoutDirection, LayoutBoxProps } from './layoutBox.types'\n\n/*\n Map of flex values for resolving flex alignment and justification.\n * @type {Record<string, string>}\n /\nconst flexValueMap: Record<string, string> = {\n start: 'flex-start',\n 'flex-start': 'flex-start',\n end: 'flex-end',\n 'flex-end': 'flex-end',\n}\n\n/\n Resolves flex alignment and justification properties based on the provided value.\n * @param {string \| undefined} value - The value to resolve.\n * @returns {string \| undefined} - Resolved flex property value.\n /\nconst resolveFlexProps = (value?: string): string \| undefined => (value ? (flexValueMap[value] \|\| value) : value)\n\n/\n Forwarded ref version of the LayoutBox component.\n * @param {LayoutBoxProps} props - Props for the LayoutBox component.\n * @param {LegacyRef<HTMLDivElement> \| undefined} ref - Ref for accessing the underlying DOM element.\n * @returns {JSX.Element} - Rendered LayoutBox component.\n /\nconst LayoutBoxRefForwarded = forwardRef(({\n id,\n style,\n children,\n tabIndex,\n className = '',\n ~~onClick,\n~~ column,\n asGrid = false,\n wFull = false,\n hFull = false,\n centered = false,\n flex,\n width,\n height,\n debug = false,\n background,\n ...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, BoxLayout-like helpers and additional styles.\n * @type {CSSProperties}\n /\n const styles = useMemo(() => {\n const baseStyles: CSSProperties = {\n ...(restProps as CSSProperties),\n }\n\n // Resolve direction (supports column helper)\n if (restProps.direction \|\| resolvedColumn) {\n baseStyles.flexDirection = (restProps.direction \|\| resolvedColumn) as CSSProperties['flexDirection']\n }\n\n // Resolve alignment and justification\n if (centered) {\n baseStyles.alignItems = 'center'\n baseStyles.justifyContent = 'center'\n } else {\n if (restProps.align) {\n baseStyles.alignItems = resolveFlexProps(restProps.align as string)\n }\n if (restProps.justify) {\n baseStyles.justifyContent = resolveFlexProps(restProps.justify as string)\n }\n }\n\n // Flex or grid display\n if (asGrid) {\n baseStyles.display = 'grid'\n } else {\n baseStyles.display = 'flex'\n }\n\n // Width / height helpers\n if (wFull) {\n baseStyles.width = '100%'\n } else if (width !== undefined) {\n baseStyles.width = typeof width === 'number' ? `${width}px` : width\n }\n\n if (hFull) {\n baseStyles.height = '100%'\n } else if (height !== undefined) {\n baseStyles.height = typeof height === 'number' ? `${height}px` : height\n }\n\n // Flex helper\n if (flex !== undefined) {\n if (flex === true) {\n baseStyles.flex = 1\n } else if (typeof flex === 'number') {\n baseStyles.flex = flex\n } else {\n baseStyles.flex = flex as string\n }\n }\n\n // Background helper\n if (background !== undefined) {\n baseStyles.background = background\n }\n\n // Debug outline helper\n if (debug) {\n baseStyles.outline = '1px solid red'\n }\n\n // User provided style wins last\n return {\n ...baseStyles,\n ...style,\n }\n }, [\n asGrid,\n background,\n centered,\n debug,\n flex,\n hFull,\n height,\n resolvedColumn,\n restProps,\n style,\n wFull,\n width,\n ])\n\n return (\n <div\n {...(id ? { id: `${id}` } : {})}\n ref={ref}\n tabIndex={tabIndex}\n className={classNames(\n classes['layout-box'],\n className,\n )}\n style={styles as CSSProperties}\n {...dataProps}\n data-testid={dataProps.dataTestId \|\| dataProps['data-testid'] \|\| id}\n ~~{...onClickProps}\n~~ >\n {children}\n </div>\n )\n})\n\nLayoutBoxRefForwarded.displayName = 'LayoutBoxRefForwarded'\n\n/\n Memoized and memoized LayoutBox component.\n * @type {FC<LayoutBoxProps>}\n */\nexport const LayoutBox: FC<LayoutBoxProps> = memo<LayoutBoxProps>(LayoutBoxRefForwarded)\n\nexport const BoxLayout: FC<LayoutBoxProps> = memo<LayoutBoxProps>(LayoutBoxRefForwarded)\n\nLayoutBox.displayName = 'LayoutBox'\n\nBoxLayout.displayName = 'BoxLayout'\n"],"names":["flexValueMap","start","end","resolveFlexProps","value","LayoutBoxRefForwarded","forwardRef","_ref","ref","id","style","children","tabIndex","className","~~onClick","~~column","asGrid","wFull","hFull","centered","flex","width","height","debug","background","props","_objectWithoutProperties","_excluded","dataProps","restProps","useParseProps","~~onClickProps~~","useMemo","~~onKeyDown","role","resolvedColumn","~~undefined","LayoutDirection","COLUMN","styles","baseStyles","_objectSpread","direction","flexDirection","alignItems","justifyContent","align","justify","display","concat","outline","objectSpread2","React","createElement","_extends","classNames","classes","dataTestId","displayName","LayoutBox","memo","BoxLayout"],"mappings":"~~6aAYMA~~,EAAuC,CAC3CC,MAAO,aACP,aAAc,aACdC,IAAK,WACL,WAAY,YAQRC,EAAoBC,GAAwCA,GAASJ,EAAaI,IAAmBA,EAQrGC,EAAwBC,EAAUA,YAAC,CAAAC,~~EAkBtBC~~,KAAsD,~~IAlB~~/BC,GACxCA,EAAEC,MACFA,EAAKC,SACLA,EAAQC,SACRA,EAAQC,UACRA,EAAY,GAAEC,~~QACdA~~,~~EAAOC,OACPA,~~EAAMC,OACNA,GAAS,EAAKC,MACdA,GAAQ,EAAKC,MACbA,GAAQ,EAAKC,SACbA,GAAW,EAAKC,KAChBA,EAAIC,MACJA,EAAKC,OACLA,EAAMC,MACNA,GAAQ,EAAKC,WACbA,~~GAEejB~~,~~EADZkB~~,EAAKC,EAAAA,~~wBAAAnB~~,~~EAAAoB~~,GAER,MAAMC,UAAEA,EAASC,UAAEA,GAAcC,EAAAA,cAAcL,GAMzCM,~~EAAeC~~,~~WAAQ,IAAOlB,EAAW,CAC7CA,UACAmB,UAAWnB,EACXoB,KAAM,SACNtB,UAAW,GACR,CAAG,GAAE,CAACE,IAMLqB,EAAiBH,~~EAAAA,SAAQ,~~SAClBI~~,~~IAAXrB~~,IAAmC,IAAXA,~~EACtBsB~~,EAAeA,gBAACC,OAChB,MAAO,~~CAACvB~~,~~IAMNwB~~,~~EAASP~~,EAAAA,SAAQ,KACrB,~~MAAMQ~~,EAAyBC,EAAAA,cAAA,CAAA,~~EACzBZ~~,GA+DN,OA3DIA,~~EAAUa~~,~~WAAaP~~,~~KACzBK~~,EAAWG,~~cAAiBd~~,~~EAAUa~~,~~WAAaP~~,~~GAIjDhB~~,~~GACFqB~~,EAAWI,WAAa,SACxBJ,EAAWK,eAAiB,~~WAExBhB~~,~~EAAUiB~~,QACZN,EAAWI,~~WAAazC~~,~~EAAiB0B~~,~~EAAUiB~~,~~QAEjDjB~~,~~EAAUkB~~,UACZP,EAAWK,~~eAAiB1C~~,~~EAAiB0B~~,~~EAAUkB~~,WAMzDP,EAAWQ,~~QADThC~~,EACmB,OAEA,OAInBC,~~EACFuB~~,~~EAAWnB~~,MAAQ,~~YACAe~~,~~IAAVf~~,~~IACTmB~~,~~EAAWnB~~,MAAyB,iBAAVA,EAAkB,~~GAAA4B~~,~~OAAM5B~~,EAAK,MAAOA,GAG5DH,~~EACFsB~~,~~EAAWlB~~,OAAS,~~YACAc~~,~~IAAXd~~,~~IACTkB~~,~~EAAWlB~~,OAA2B,iBAAXA,EAAmB,~~GAAA2B~~,~~OAAM3B~~,EAAM,MAAOA,~~QAItDc~~,~~IAAThB~~,~~IAEAoB~~,~~EAAWpB~~,MADA,IAATA,EACgB,EAEAA,~~QAOHgB~~,~~IAAfZ~~,~~IACFgB~~,~~EAAWhB~~,WAAaA,GAItBD,~~IACFiB~~,EAAWU,QAAU,iBAIvBT,EAAAU,cAAAV,EAAAU,cACKX,CAAAA,EAAAA,~~GACA9B~~,EAAK,GAET,~~CACDM~~,EACAQ,EACAL,EACAI,EACAH,EACAF,EACAI,~~EACAa~~,~~EACAN~~,~~EACAnB~~,~~EACAO~~,EACAI,IAGF,~~OACE+B~~,MAAAC,oBAAAC,EAAAA,QAAA,CAAA,~~EACO7C~~,EAAK,CAAEA,GAAE,~~GAAAwC~~,~~OAAKxC~~,IAAS,GAAE,CAC9BD,IAAKA,EACLI,SAAUA,EACVC,~~UAAW0C~~,EAAAA,WACTC,EAAAA,QAAQ,~~cACR3C~~,GAEFH,~~MAAO6B~~,~~GACHX~~,EAAS,CACb,cAAaA,~~EAAU6B~~,~~YAAc7B~~,EAAU,~~gBAAkBnB~~,~~GAC7DsB~~,~~GAEHpB,~~EACG,IAIVN,~~EAAsBqD~~,YAAc,8BAMvBC,EAAgCC,EAAIA,~~KAAiBvD~~,~~GAErDwD~~,EAAgCD,EAAIA,~~KAAiBvD~~,~~GAElEsD~~,EAAUD,YAAc,YAExBG,EAAUH,YAAc"}
1	+ {"version":3,"file":"LayoutBox.js","sources":["../../../../../../../../../src/core/ui/components/container/layoutBox/LayoutBox.tsx"],"sourcesContent":["import { memo, FC, useMemo, CSSProperties, forwardRef, LegacyRef } from 'react'\n\nimport { useParseProps } from '../../../../hooks/useParseProps'\nimport { classNames } from '../../../../utils/helpers/ui'\n\nimport classes from './layoutBox.module.scss'\nimport { LayoutDirection, LayoutBoxProps } from './layoutBox.types'\n\n/*\n Map of flex values for resolving flex alignment and justification.\n * @type {Record<string, string>}\n /\nconst flexValueMap: Record<string, string> = {\n start: 'flex-start',\n 'flex-start': 'flex-start',\n end: 'flex-end',\n 'flex-end': 'flex-end',\n}\n\n/\n Resolves flex alignment and justification properties based on the provided value.\n * @param {string \| undefined} value - The value to resolve.\n * @returns {string \| undefined} - Resolved flex property value.\n /\nconst resolveFlexProps = (value?: string): string \| undefined => (value ? (flexValueMap[value] \|\| value) : value)\n\n/\n Forwarded ref version of the LayoutBox component.\n * @param {LayoutBoxProps} props - Props for the LayoutBox component.\n * @param {LegacyRef<HTMLDivElement> \| undefined} ref - Ref for accessing the underlying DOM element.\n * @returns {JSX.Element} - Rendered LayoutBox component.\n /\nconst LayoutBoxRefForwarded = forwardRef(({\n id,\n style,\n children,\n tabIndex,\n className = '',\n column,\n asGrid = false,\n wFull = false,\n hFull = false,\n centered = false,\n flex,\n width,\n height,\n debug = false,\n background,\n ...props\n}: LayoutBoxProps, ref: LegacyRef<HTMLDivElement> \| undefined \| null) => {\n const { dataProps, restProps } = useParseProps(props)\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, BoxLayout-like helpers and additional styles.\n * @type {CSSProperties}\n /\n const styles = useMemo(() => {\n const baseStyles: CSSProperties = {\n ...(restProps as CSSProperties),\n }\n\n // Resolve direction (supports column helper)\n if (restProps.direction \|\| resolvedColumn) {\n baseStyles.flexDirection = (restProps.direction \|\| resolvedColumn) as CSSProperties['flexDirection']\n }\n\n // Resolve alignment and justification\n if (centered) {\n baseStyles.alignItems = 'center'\n baseStyles.justifyContent = 'center'\n } else {\n if (restProps.align) {\n baseStyles.alignItems = resolveFlexProps(restProps.align as string)\n }\n if (restProps.justify) {\n baseStyles.justifyContent = resolveFlexProps(restProps.justify as string)\n }\n }\n\n // Flex or grid display\n if (asGrid) {\n baseStyles.display = 'grid'\n } else {\n baseStyles.display = 'flex'\n }\n\n // Width / height helpers\n if (wFull) {\n baseStyles.width = '100%'\n } else if (width !== undefined) {\n baseStyles.width = typeof width === 'number' ? `${width}px` : width\n }\n\n if (hFull) {\n baseStyles.height = '100%'\n } else if (height !== undefined) {\n baseStyles.height = typeof height === 'number' ? `${height}px` : height\n }\n\n // Flex helper\n if (flex !== undefined) {\n if (flex === true) {\n baseStyles.flex = 1\n } else if (typeof flex === 'number') {\n baseStyles.flex = flex\n } else {\n baseStyles.flex = flex as string\n }\n }\n\n // Background helper\n if (background !== undefined) {\n baseStyles.background = background\n }\n\n // Debug outline helper\n if (debug) {\n baseStyles.outline = '1px solid red'\n }\n\n // User provided style wins last\n return {\n ...baseStyles,\n ...style,\n }\n }, [\n asGrid,\n background,\n centered,\n debug,\n flex,\n hFull,\n height,\n resolvedColumn,\n restProps,\n style,\n wFull,\n width,\n ])\n\n return (\n <div\n {...(id ? { id: `${id}` } : {})}\n ref={ref}\n tabIndex={tabIndex}\n className={classNames(\n classes['layout-box'],\n className,\n )}\n style={styles as CSSProperties}\n {...dataProps}\n data-testid={dataProps.dataTestId \|\| dataProps['data-testid'] \|\| id}\n >\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\nexport const BoxLayout: FC<LayoutBoxProps> = memo<LayoutBoxProps>(LayoutBoxRefForwarded)\n\nLayoutBox.displayName = 'LayoutBox'\n\nBoxLayout.displayName = 'BoxLayout'\n"],"names":["flexValueMap","start","end","resolveFlexProps","value","LayoutBoxRefForwarded","forwardRef","_ref","ref","id","style","children","tabIndex","className","column","asGrid","wFull","hFull","centered","flex","width","height","debug","background","props","_objectWithoutProperties","_excluded","dataProps","restProps","useParseProps","resolvedColumn","useMemo","undefined","LayoutDirection","COLUMN","styles","baseStyles","_objectSpread","direction","flexDirection","alignItems","justifyContent","align","justify","display","concat","outline","objectSpread2","React","createElement","_extends","classNames","classes","dataTestId","displayName","LayoutBox","memo","BoxLayout"],"mappings":"maAYMA,EAAuC,CAC3CC,MAAO,aACP,aAAc,aACdC,IAAK,WACL,WAAY,YAQRC,EAAoBC,GAAwCA,GAASJ,EAAaI,IAAmBA,EAQrGC,EAAwBC,EAAUA,YAAC,CAAAC,EAiBtBC,KAAsD,IAjB/BC,GACxCA,EAAEC,MACFA,EAAKC,SACLA,EAAQC,SACRA,EAAQC,UACRA,EAAY,GAAEC,OACdA,EAAMC,OACNA,GAAS,EAAKC,MACdA,GAAQ,EAAKC,MACbA,GAAQ,EAAKC,SACbA,GAAW,EAAKC,KAChBA,EAAIC,MACJA,EAAKC,OACLA,EAAMC,MACNA,GAAQ,EAAKC,WACbA,GAEehB,EADZiB,EAAKC,EAAAA,wBAAAlB,EAAAmB,GAER,MAAMC,UAAEA,EAASC,UAAEA,GAAcC,EAAAA,cAAcL,GAMzCM,EAAiBC,EAAAA,SAAQ,SAClBC,IAAXlB,IAAmC,IAAXA,EACtBmB,EAAeA,gBAACC,OAChB,MAAO,CAACpB,IAMNqB,EAASJ,EAAAA,SAAQ,KACrB,MAAMK,EAAyBC,EAAAA,cAAA,CAAA,EACzBT,GA+DN,OA3DIA,EAAUU,WAAaR,KACzBM,EAAWG,cAAiBX,EAAUU,WAAaR,GAIjDZ,GACFkB,EAAWI,WAAa,SACxBJ,EAAWK,eAAiB,WAExBb,EAAUc,QACZN,EAAWI,WAAarC,EAAiByB,EAAUc,QAEjDd,EAAUe,UACZP,EAAWK,eAAiBtC,EAAiByB,EAAUe,WAMzDP,EAAWQ,QADT7B,EACmB,OAEA,OAInBC,EACFoB,EAAWhB,MAAQ,YACAY,IAAVZ,IACTgB,EAAWhB,MAAyB,iBAAVA,EAAkB,GAAAyB,OAAMzB,EAAK,MAAOA,GAG5DH,EACFmB,EAAWf,OAAS,YACAW,IAAXX,IACTe,EAAWf,OAA2B,iBAAXA,EAAmB,GAAAwB,OAAMxB,EAAM,MAAOA,QAItDW,IAATb,IAEAiB,EAAWjB,MADA,IAATA,EACgB,EAEAA,QAOHa,IAAfT,IACFa,EAAWb,WAAaA,GAItBD,IACFc,EAAWU,QAAU,iBAIvBT,EAAAU,cAAAV,EAAAU,cACKX,CAAAA,EAAAA,GACA1B,EAAK,GAET,CACDK,EACAQ,EACAL,EACAI,EACAH,EACAF,EACAI,EACAS,EACAF,EACAlB,EACAM,EACAI,IAGF,OACE4B,MAAAC,oBAAAC,EAAAA,QAAA,CAAA,EACOzC,EAAK,CAAEA,GAAE,GAAAoC,OAAKpC,IAAS,GAAE,CAC9BD,IAAKA,EACLI,SAAUA,EACVC,UAAWsC,EAAAA,WACTC,EAAAA,QAAQ,cACRvC,GAEFH,MAAOyB,GACHR,EAAS,CACb,cAAaA,EAAU0B,YAAc1B,EAAU,gBAAkBlB,IAEhEE,EACG,IAIVN,EAAsBiD,YAAc,8BAMvBC,EAAgCC,EAAIA,KAAiBnD,GAErDoD,EAAgCD,EAAIA,KAAiBnD,GAElEkD,EAAUD,YAAc,YAExBG,EAAUH,YAAc"}

package/dist/lib/cjs/src/core/ui/components/container/layoutBox/layoutBox.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"layoutBox.types.js","sources":["../../../../../../../../../src/core/ui/components/container/layoutBox/layoutBox.types.ts"],"sourcesContent":["import { CSSProperties, LegacyRef, ~~PropsWithChildren~~ } from 'react'\n\n/*\n Enum representing the possible layout directions.\n /\nexport enum LayoutDirection {\n ROW = 'row',\n COLUMN = 'column',\n}\n\n/\n Props for the LayoutBox component.\n /\n// TODO replace with & React.DIVHtmlAttributes<HTMLDivElement>\nexport type LayoutBoxProps = ~~PropsWithChildren~~ & {\n /* Unique identifier for the component. /\n id?: string \| number\n /* CSS flex property. Can be string, boolean (true = flex-1), or number. /\n flex?: string \| boolean \| number\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. Can be string or number (converted to px). /\n width?: string \| number\n /* CSS height property. Can be string or number (converted to px). /\n height?: string \| number\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 /* CSS background property. /\n background?: 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 /* If true, uses CSS Grid instead of Flexbox. /\n asGrid?: boolean\n /* If true, sets width to 100%. /\n wFull?: boolean\n /* If true, sets height to 100%. /\n hFull?: boolean\n /* If true, centers content in both axes. /\n centered?: boolean\n /* If true, adds an outline to help debug layout issues. */\n debug?: boolean\n} & Omit<CSSProperties, 'direction' \| 'flex'>;\n"],"names":["LayoutDirection"],"mappings":"aAKYA,IAAAA,WAAAA,GAAe,OAAfA,EAAe,IAAA,MAAfA,EAAe,OAAA,SAAfA,CAAe,EAAA,CAAA"}
1	+ {"version":3,"file":"layoutBox.types.js","sources":["../../../../../../../../../src/core/ui/components/container/layoutBox/layoutBox.types.ts"],"sourcesContent":["import { CSSProperties, LegacyRef, HTMLAttributes } 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 /\n// TODO replace with & React.DIVHtmlAttributes<HTMLDivElement>\nexport type LayoutBoxProps = Omit<HTMLAttributes<HTMLDivElement>, 'onKeyDown'> & {\n /* CSS flex property. Can be string, boolean (true = flex-1), or number. /\n flex?: string \| boolean \| number\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. Can be string or number (converted to px). /\n width?: string \| number\n /* CSS height property. Can be string or number (converted to px). /\n height?: string \| number\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 /* CSS background property. /\n background?: string\n /* Ref for accessing the underlying DOM element. /\n ref?: LegacyRef<HTMLDivElement> \| undefined \| null\n /* If true, sets the layout direction to column. /\n column?: boolean\n /* If true, uses CSS Grid instead of Flexbox. /\n asGrid?: boolean\n /* If true, sets width to 100%. /\n wFull?: boolean\n /* If true, sets height to 100%. /\n hFull?: boolean\n /* If true, centers content in both axes. /\n centered?: boolean\n /* If true, adds an outline to help debug layout issues. */\n debug?: boolean\n} & Omit<CSSProperties, 'direction' \| 'flex'>;\n"],"names":["LayoutDirection"],"mappings":"aAKYA,IAAAA,WAAAA,GAAe,OAAfA,EAAe,IAAA,MAAfA,EAAe,OAAA,SAAfA,CAAe,EAAA,CAAA"}

package/dist/lib/cjs/src/core/ui/components/molecules/popup/Popup.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../../../../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),a=require("../popover/PopoverLite.js"),n=require("../../atoms/icons.js"),o=require("./popup.module.scss.js"),i=require("./popup.overlay.module.scss.js"),r=require("./popup.types.js"),l=require("../../dividers/DividerLine.js"),p=require("../../container/layoutBox/LayoutBox.js"),c=require("../../atoms/text/Headline.js"),s=require("../../icon/IconBase.js");const u=["title","children","components","isModal","hideOnClickOutside","hideOnContentClick","animateVariant","hasHeader","hasCloseIcon","width","height","style"],d=["title","forwardedRef","hide","children","animateVariant","popupStyle","hasHeader","hasCloseIcon","closeIconURL"],m={popup:{inner:{[r.PopupAnimateVariant.SLIDE_DOWN]:{"--slideYFrom":"-48px"},[r.PopupAnimateVariant.SLIDE_UP]:{"--slideYFrom":"48px"},[r.PopupAnimateVariant.SLIDE_RIGHT]:{"--slideXFrom":"-64px"},[r.PopupAnimateVariant.SLIDE_LEFT]:{"--slideXFrom":"64px"}}}},h=t.memo((n=>{let{title:o="Popup's title",children:l,components:p={},isModal:c=!0,hideOnClickOutside:s=!1,hideOnContentClick:d=!1,animateVariant:m=r.PopupAnimateVariant.SLIDE_UP,hasHeader:h=!0,hasCloseIcon:E=!0,width:R,height:C,style:j}=n,I=e.objectWithoutProperties(n,u);const P=null==p?void 0:p.ContentComponent,v=t.useMemo((()=>e.objectSpread2(e.objectSpread2(e.objectSpread2({},R?{"--popup-width":R}:{}),C?{"--popup-height":C}:{}),j)),[C,j,R]);return React.createElement(a.Popover,e.extends({clickable:!0,isPopup:!0,isModal:c,hideOnContentClick:d,hideOnClickOutside:s,modalOverlayClassName:i.default["popup-modal-overlay"]},I),React.createElement("p",null),React.createElement(y,{title:o,hasHeader:h,hasCloseIcon:E,animateVariant:m,popupStyle:v},!P&&l&&l,!l&&P&&React.createElement(P,null)))}));h.displayName="Popup";const y=t.memo((a=>{let{title:i,forwardedRef:r,hide:u,children:h,animateVariant:y,popupStyle:E,hasHeader:R=!0,hasCloseIcon:C=!0,closeIconURL:j}=a,I=e.objectWithoutProperties(a,d);const P=h&&Array.isArray(h)?h.filter((e=>!!e)).map(((a,n)=>t.cloneElement(a,e.objectSpread2(e.objectSpread2({key:n},a.props),{},{hide:u},I)))):React.createElement("div",null,"Pseudo Content");return React.createElement("div",{className:"".concat(o.default["popup-container"]),ref:r,style:E},React.createElement(p.LayoutBox,{className:"".concat(o.default["popup-container-inner"]),style:y?m.popup.inner[y]:null},R&&React.createElement(React.Fragment,null,React.createElement(p.LayoutBox,{justify:"space-between",align:"start",width:"100%",padding:"20px 20px 16px 20px"},React.createElement(c.HeadlineTertiary,null,i),C&&React.createElement("div",{onClick:u,onKeyDown:u,role:"button",tabIndex:-1,className:o.default["close-button"]},j&&React.createElement(s.IconBase,{iconUrl:j}),!j&&React.createElement(s.IconBase,null,n.closeIconJSX))),React.createElement(l.DividerLine,{length:"100%"})),React.createElement("div",{className:o.default["popup-container-inner-div"]},P&&P)))}));y.displayName="PopupContent",exports.Popup=h;
+"use strict";var e=require("../../../../../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),a=require("../popover/PopoverLite.js"),n=require("../../atoms/icons.js"),o=require("./popup.module.scss.js"),i=require("./popup.overlay.module.scss.js"),r=require("./popup.types.js"),l=require("../../dividers/DividerLine.js"),p=require("../../container/layoutBox/LayoutBox.js"),c=require("../../atoms/text/Headline.js"),s=require("../../icon/IconBase.js");const d=["title","children","components","isModal","hideOnClickOutside","hideOnContentClick","animateVariant","hasHeader","hasCloseIcon","width","height","style"],u=["title","forwardedRef","hide","children","animateVariant","popupStyle","hasHeader","hasCloseIcon","closeIconURL"],m={popup:{inner:{[r.PopupAnimateVariant.SLIDE_DOWN]:{"--slideYFrom":"-48px"},[r.PopupAnimateVariant.SLIDE_UP]:{"--slideYFrom":"48px"},[r.PopupAnimateVariant.SLIDE_RIGHT]:{"--slideXFrom":"-64px"},[r.PopupAnimateVariant.SLIDE_LEFT]:{"--slideXFrom":"64px"}}}},h=t.memo((n=>{let{title:o="Popup's title",children:l,components:p={},isModal:c=!0,hideOnClickOutside:s=!1,hideOnContentClick:u=!1,animateVariant:m=r.PopupAnimateVariant.SLIDE_UP,hasHeader:h=!0,hasCloseIcon:E=!0,width:R,height:C,style:j}=n,I=e.objectWithoutProperties(n,d);const P=null==p?void 0:p.ContentComponent,v=t.useMemo((()=>e.objectSpread2(e.objectSpread2(e.objectSpread2({},R?{"--popup-width":R}:{}),C?{"--popup-height":C}:{}),j)),[C,j,R]);return React.createElement(a.Popover,e.extends({clickable:!0,isPopup:!0,isModal:c,hideOnContentClick:u,hideOnClickOutside:s,modalOverlayClassName:i.default["popup-modal-overlay"]},I),React.createElement("p",null),React.createElement(y,{title:o,hasHeader:h,hasCloseIcon:E,animateVariant:m,popupStyle:v},!P&&l&&l,!l&&P&&React.createElement(P,null)))}));h.displayName="Popup";const y=t.memo((a=>{let{title:i,forwardedRef:r,hide:d,children:h,animateVariant:y,popupStyle:E,hasHeader:R=!0,hasCloseIcon:C=!0,closeIconURL:j}=a,I=e.objectWithoutProperties(a,u);const P=h&&Array.isArray(h)?h.filter((e=>!!e)).map(((a,n)=>t.cloneElement(a,e.objectSpread2(e.objectSpread2({key:n},a.props),{},{hide:d},I)))):React.createElement("div",null,"Pseudo Content");return React.createElement("div",{className:"".concat(o.default["popup-container"]),ref:r,style:E},React.createElement(p.LayoutBox,{className:"".concat(o.default["popup-container-inner"]),style:y?m.popup.inner[y]:{}},R&&React.createElement(React.Fragment,null,React.createElement(p.LayoutBox,{justify:"space-between",align:"start",width:"100%",padding:"20px 20px 16px 20px"},React.createElement(c.HeadlineTertiary,null,i),C&&React.createElement("div",{onClick:d,onKeyDown:d,role:"button",tabIndex:-1,className:o.default["close-button"]},j&&React.createElement(s.IconBase,{iconUrl:j}),!j&&React.createElement(s.IconBase,null,n.closeIconJSX))),React.createElement(l.DividerLine,{length:"100%"})),React.createElement("div",{className:o.default["popup-container-inner-div"]},P&&P)))}));y.displayName="PopupContent",exports.Popup=h;
 //# sourceMappingURL=Popup.js.map

package/dist/lib/cjs/src/core/ui/components/molecules/popup/Popup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Popup.js","sources":["../../../../../../../../../src/core/ui/components/molecules/popup/Popup.tsx"],"sourcesContent":["import {\n cloneElement, memo, PropsWithChildren, FC, ReactNode, CSSProperties, useMemo, ReactElement,\n} from 'react'\n\nimport { Popover as PopoverLite } from '../popover/PopoverLite'\nimport { HeadlineTertiary as H3 } from '../../atoms/text'\nimport { IconBase } from '../../icon'\nimport { DividerLine } from '../../dividers'\nimport { LayoutBox } from '../../container'\nimport { closeIconJSX } from '../../atoms/icons'\n\nimport classes from './popup.module.scss'\nimport classesOverlay from './popup.overlay.module.scss'\nimport { PopupAnimateVariant, PopupProps } from './popup.types'\n\n\n/*\n Styles for the Popup component.\n \n @typedef {Object} PopupStyles\n * @property {Object} inner - The inner styles for the popup.\n * @property {CSSProperties} content - The styles for the popup content.\n /\n\nconst styles: {\n popup: {\n inner: Record<string, Record<string, string>>\n }\n\n} = {\n popup: {\n inner: {\n [PopupAnimateVariant.SLIDE_DOWN]: { '--slideYFrom': '-48px' },\n [PopupAnimateVariant.SLIDE_UP]: { '--slideYFrom': '48px' },\n [PopupAnimateVariant.SLIDE_RIGHT]: { '--slideXFrom': '-64px' },\n [PopupAnimateVariant.SLIDE_LEFT]: { '--slideXFrom': '64px' },\n },\n },\n}\n\n/\n Popup component.\n \n @type {React.FC<PopupProps>}\n * @returns {React.ReactElement} The Popup.\n /\nexport const Popup: FC<PopupProps> = memo<PopupProps>(({\n title = 'Popup\\'s title',\n children,\n components = {},\n isModal = true,\n hideOnClickOutside = false,\n hideOnContentClick = false,\n animateVariant = PopupAnimateVariant.SLIDE_UP,\n hasHeader = true,\n hasCloseIcon = true,\n width,\n height,\n style,\n ...props\n}: PopupProps) => {\n /\n The ContentComponent to render.\n \n @type {ComponentType}\n /\n const ContentComponent = components?.ContentComponent\n\n /\n The popup styles.\n \n @type {CSSProperties}\n /\n const styles = useMemo(() => ({\n ...(width ? { '--popup-width': width } : {}),\n ...(height ? { '--popup-height': height } : {}),\n ...style,\n }), [height, style, width])\n\n return (\n <PopoverLite\n clickable\n isPopup\n isModal={isModal}\n hideOnContentClick={hideOnContentClick}\n hideOnClickOutside={hideOnClickOutside}\n modalOverlayClassName={classesOverlay['popup-modal-overlay']}\n {...props}\n >\n <p>{/ Placeholder element to avoid error with no children /}</p>\n <PopupContent\n title={title}\n hasHeader={hasHeader}\n hasCloseIcon={hasCloseIcon}\n animateVariant={animateVariant}\n popupStyle={styles}\n >\n {/ Render children if ContentComponent is not provided /}\n {(!ContentComponent && children) && children}\n {/ Render ContentComponent if children are not provided /}\n {(!children && ContentComponent) && <ContentComponent />}\n </PopupContent>\n </PopoverLite>\n )\n})\n\n/\n The display name of the Popup component.\n \n @type {string}\n /\nPopup.displayName = 'Popup'\n\ntype PopupContentProps = PropsWithChildren<unknown> & {\n title?: string\n forwardedRef?: ForwardedRef['forwardedRef']\n animateVariant?: PopupProps['animateVariant']\n popupStyle?: CSSProperties\n hasHeader?: boolean\n hasCloseIcon?: boolean\n closeIconURL?: string\n hide?: () => void\n}\n\n/\n The PopupContent component.\n \n @param {PopupContentProps} props The props for the PopupContent component.\n * @returns {React.ReactElement} The PopupContent.\n /\nconst PopupContent = memo(({\n title,\n forwardedRef,\n hide,\n children,\n animateVariant,\n popupStyle,\n hasHeader = true,\n hasCloseIcon = true,\n closeIconURL,\n ...props\n}: PopupContentProps) => {\n /\n The ContentRemapped element.\n \n @type {React.ReactElement[] \| React.ReactElement}\n /\n const ContentRemapped = children && Array.isArray(children)\n ? children.filter((child: ReactNode \| ReactElement) => !!child)\n .map((child: ReactElement, index: number) => cloneElement(\n // eslint-disable-next-line react/no-array-index-key\n child, { key: index, ...child.props, hide, ...props },\n ))\n : <div>Pseudo Content</div>\n\n return (\n <div className={`${classes['popup-container']}`} ref={forwardedRef} style={popupStyle}>\n <LayoutBox\n className={`${classes['popup-container-inner']}`}\n style={animateVariant ? styles.popup.inner[animateVariant] : ~~null~~}\n >\n {hasHeader && (\n <>\n <LayoutBox justify='space-between' align='start' width='100%' padding='20px 20px 16px 20px'>\n <H3>{title}</H3>\n {hasCloseIcon && (\n <div\n onClick={hide}\n onKeyDown={hide}\n role='button'\n tabIndex={-1}\n className={classes['close-button']}\n >\n {closeIconURL && <IconBase iconUrl={closeIconURL} />}\n {!closeIconURL && (\n <IconBase>\n {closeIconJSX}\n </IconBase>\n )}\n </div>\n )}\n </LayoutBox>\n <DividerLine length='100%' />\n </>\n )}\n <div className={classes['popup-container-inner-div']}>\n {ContentRemapped && ContentRemapped}\n </div>\n </LayoutBox>\n </div>\n )\n})\n\n/\n The display name of the PopupContent component.\n \n @type {string}\n */\nPopupContent.displayName = 'PopupContent'\n"],"names":["styles","popup","inner","PopupAnimateVariant","SLIDE_DOWN","SLIDE_UP","SLIDE_RIGHT","SLIDE_LEFT","Popup","memo","_ref","title","children","components","isModal","hideOnClickOutside","hideOnContentClick","animateVariant","hasHeader","hasCloseIcon","width","height","style","props","_objectWithoutProperties","_excluded","ContentComponent","useMemo","_objectSpread","objectSpread2","React","createElement","PopoverLite","Popover","_extends","clickable","isPopup","modalOverlayClassName","classesOverlay","default","PopupContent","popupStyle","displayName","_ref2","forwardedRef","hide","closeIconURL","_excluded2","ContentRemapped","Array","isArray","filter","child","map","index","cloneElement","key","className","concat","classes","ref","LayoutBox","Fragment","justify","align","padding","H3","onClick","onKeyDown","role","tabIndex","IconBase","iconUrl","closeIconJSX","DividerLine","length"],"mappings":"quBAwBMA,EAKF,CACFC,MAAO,CACLC,MAAO,CACL,CAACC,EAAAA,oBAAoBC,YAAa,CAAE,eAAgB,SACpD,CAACD,EAAAA,oBAAoBE,UAAW,CAAE,eAAgB,QAClD,CAACF,EAAAA,oBAAoBG,aAAc,CAAE,eAAgB,SACrD,CAACH,EAAAA,oBAAoBI,YAAa,CAAE,eAAgB,WAW7CC,EAAwBC,EAAIA,MAAaC,IAcpC,IAdqCC,MACrDA,EAAQ,gBAAgBC,SACxBA,EAAQC,WACRA,EAAa,CAAE,EAAAC,QACfA,GAAU,EAAIC,mBACdA,GAAqB,EAAKC,mBAC1BA,GAAqB,EAAKC,eAC1BA,EAAiBd,EAAmBA,oBAACE,SAAQa,UAC7CA,GAAY,EAAIC,aAChBA,GAAe,EAAIC,MACnBA,EAAKC,OACLA,EAAMC,MACNA,GAEWZ,EADRa,EAAKC,EAAAA,wBAAAd,EAAAe,GAOR,MAAMC,EAAmBb,aAAAA,EAAAA,EAAYa,iBAO/B1B,EAAS2B,EAAAA,SAAQ,IAAAC,EAAAA,cAAAA,EAAAA,cAAAA,EAAAC,cACjBT,CAAAA,EAAAA,EAAQ,CAAE,gBAAiBA,GAAU,CAAA,GACrCC,EAAS,CAAE,iBAAkBA,GAAW,CAAA,GACzCC,IACD,CAACD,EAAQC,EAAOF,IAEpB,OACEU,MAAAC,cAACC,EAAWC,QAAAC,UAAA,CACVC,WAAS,EACTC,SAAO,EACPtB,QAASA,EACTE,mBAAoBA,EACpBD,mBAAoBA,EACpBsB,sBAAuBC,EAAcC,QAAC,wBAClChB,GAEJO,MAAAC,cAAA,IAAA,MACAD,MAAAC,cAACS,EAAY,CACX7B,MAAOA,EACPO,UAAWA,EACXC,aAAcA,EACdF,eAAgBA,EAChBwB,WAAYzC,IAGT0B,GAAoBd,GAAaA,GAEjCA,GAAYc,GAAqBI,MAAAC,cAACL,EAAkB,OAE7C,IASlBlB,EAAMkC,YAAc,QAmBpB,MAAMF,EAAe/B,EAAIA,MAACkC,IAWD,IAXEhC,MACzBA,EAAKiC,aACLA,EAAYC,KACZA,EAAIjC,SACJA,EAAQK,eACRA,EAAcwB,WACdA,EAAUvB,UACVA,GAAY,EAAIC,aAChBA,GAAe,EAAI2B,aACnBA,GAEkBH,EADfpB,EAAKC,EAAAA,wBAAAmB,EAAAI,GAOR,MAAMC,EAAkBpC,GAAYqC,MAAMC,QAAQtC,GAC9CA,EAASuC,QAAQC,KAAsCA,IACtDC,KAAI,CAACD,EAAqBE,IAAkBC,EAAYA,aAEvDH,EAAKxB,EAAAC,cAAAD,gBAAA,CAAI4B,IAAKF,GAAUF,EAAM7B,OAAK,GAAA,CAAEsB,QAAStB,MAEhDO,MAAAC,cAAK,MAAA,KAAA,kBAET,OACED,MAAAC,cAAA,MAAA,CAAK0B,aAASC,OAAKC,EAAOpB,QAAC,oBAAsBqB,IAAKhB,EAActB,MAAOmB,GACzEX,MAAAC,cAAC8B,YAAS,CACRJ,aAASC,OAAKC,EAAOpB,QAAC,0BACtBjB,MAAOL,EAAiBjB,EAAOC,MAAMC,MAAMe,~~GAAkB~~,~~MAE5DC~~,GACCY,MAAAC,cAAAD,MAAAgC,SACEhC,KAAAA,MAAAC,cAAC8B,YAAS,CAACE,QAAQ,gBAAgBC,MAAM,QAAQ5C,MAAM,OAAO6C,QAAQ,uBACpEnC,MAAAC,cAACmC,EAAAA,iBAAE,KAAEvD,GACJQ,GACCW,MAAAC,cAAA,MAAA,CACEoC,QAAStB,EACTuB,UAAWvB,EACXwB,KAAK,SACLC,UAAW,EACXb,UAAWE,EAAOpB,QAAC,iBAElBO,GAAgBhB,MAAAC,cAACwC,WAAQ,CAACC,QAAS1B,KAClCA,GACAhB,MAAAC,cAACwC,EAAQA,cACNE,EAAAA,gBAMX3C,MAAAC,cAAC2C,EAAAA,YAAW,CAACC,OAAO,UAGxB7C,MAAAC,cAAA,MAAA,CAAK0B,UAAWE,EAAOpB,QAAC,8BACrBS,GAAmBA,IAGpB,IASVR,EAAaE,YAAc"}
1	+ {"version":3,"file":"Popup.js","sources":["../../../../../../../../../src/core/ui/components/molecules/popup/Popup.tsx"],"sourcesContent":["import {\n cloneElement, memo, PropsWithChildren, FC, ReactNode, CSSProperties, useMemo, ReactElement,\n} from 'react'\n\nimport { Popover as PopoverLite } from '../popover/PopoverLite'\nimport { HeadlineTertiary as H3 } from '../../atoms/text'\nimport { IconBase } from '../../icon'\nimport { DividerLine } from '../../dividers'\nimport { LayoutBox } from '../../container'\nimport { closeIconJSX } from '../../atoms/icons'\n\nimport classes from './popup.module.scss'\nimport classesOverlay from './popup.overlay.module.scss'\nimport { PopupAnimateVariant, PopupProps } from './popup.types'\n\n\n/*\n Styles for the Popup component.\n \n @typedef {Object} PopupStyles\n * @property {Object} inner - The inner styles for the popup.\n * @property {CSSProperties} content - The styles for the popup content.\n /\n\nconst styles: {\n popup: {\n inner: Record<string, Record<string, string>>\n }\n\n} = {\n popup: {\n inner: {\n [PopupAnimateVariant.SLIDE_DOWN]: { '--slideYFrom': '-48px' },\n [PopupAnimateVariant.SLIDE_UP]: { '--slideYFrom': '48px' },\n [PopupAnimateVariant.SLIDE_RIGHT]: { '--slideXFrom': '-64px' },\n [PopupAnimateVariant.SLIDE_LEFT]: { '--slideXFrom': '64px' },\n },\n },\n}\n\n/\n Popup component.\n \n @type {React.FC<PopupProps>}\n * @returns {React.ReactElement} The Popup.\n /\nexport const Popup: FC<PopupProps> = memo<PopupProps>(({\n title = 'Popup\\'s title',\n children,\n components = {},\n isModal = true,\n hideOnClickOutside = false,\n hideOnContentClick = false,\n animateVariant = PopupAnimateVariant.SLIDE_UP,\n hasHeader = true,\n hasCloseIcon = true,\n width,\n height,\n style,\n ...props\n}: PopupProps) => {\n /\n The ContentComponent to render.\n \n @type {ComponentType}\n /\n const ContentComponent = components?.ContentComponent\n\n /\n The popup styles.\n \n @type {CSSProperties}\n /\n const styles = useMemo(() => ({\n ...(width ? { '--popup-width': width } : {}),\n ...(height ? { '--popup-height': height } : {}),\n ...style,\n }), [height, style, width])\n\n return (\n <PopoverLite\n clickable\n isPopup\n isModal={isModal}\n hideOnContentClick={hideOnContentClick}\n hideOnClickOutside={hideOnClickOutside}\n modalOverlayClassName={classesOverlay['popup-modal-overlay']}\n {...props}\n >\n <p>{/ Placeholder element to avoid error with no children /}</p>\n <PopupContent\n title={title}\n hasHeader={hasHeader}\n hasCloseIcon={hasCloseIcon}\n animateVariant={animateVariant}\n popupStyle={styles}\n >\n {/ Render children if ContentComponent is not provided /}\n {(!ContentComponent && children) && children}\n {/ Render ContentComponent if children are not provided /}\n {(!children && ContentComponent) && <ContentComponent />}\n </PopupContent>\n </PopoverLite>\n )\n})\n\n/\n The display name of the Popup component.\n \n @type {string}\n /\nPopup.displayName = 'Popup'\n\ntype PopupContentProps = PropsWithChildren<unknown> & {\n title?: string\n forwardedRef?: ForwardedRef['forwardedRef']\n animateVariant?: PopupProps['animateVariant']\n popupStyle?: CSSProperties\n hasHeader?: boolean\n hasCloseIcon?: boolean\n closeIconURL?: string\n hide?: () => void\n}\n\n/\n The PopupContent component.\n \n @param {PopupContentProps} props The props for the PopupContent component.\n * @returns {React.ReactElement} The PopupContent.\n /\nconst PopupContent = memo(({\n title,\n forwardedRef,\n hide,\n children,\n animateVariant,\n popupStyle,\n hasHeader = true,\n hasCloseIcon = true,\n closeIconURL,\n ...props\n}: PopupContentProps) => {\n /\n The ContentRemapped element.\n \n @type {React.ReactElement[] \| React.ReactElement}\n /\n const ContentRemapped = children && Array.isArray(children)\n ? children.filter((child: ReactNode \| ReactElement) => !!child)\n .map((child: ReactElement, index: number) => cloneElement(\n // eslint-disable-next-line react/no-array-index-key\n child, { key: index, ...child.props, hide, ...props },\n ))\n : <div>Pseudo Content</div>\n\n return (\n <div className={`${classes['popup-container']}`} ref={forwardedRef} style={popupStyle}>\n <LayoutBox\n className={`${classes['popup-container-inner']}`}\n style={animateVariant ? styles.popup.inner[animateVariant] as CSSProperties : {}}\n >\n {hasHeader && (\n <>\n <LayoutBox justify='space-between' align='start' width='100%' padding='20px 20px 16px 20px'>\n <H3>{title}</H3>\n {hasCloseIcon && (\n <div\n onClick={hide}\n onKeyDown={hide}\n role='button'\n tabIndex={-1}\n className={classes['close-button']}\n >\n {closeIconURL && <IconBase iconUrl={closeIconURL} />}\n {!closeIconURL && (\n <IconBase>\n {closeIconJSX}\n </IconBase>\n )}\n </div>\n )}\n </LayoutBox>\n <DividerLine length='100%' />\n </>\n )}\n <div className={classes['popup-container-inner-div']}>\n {ContentRemapped && ContentRemapped}\n </div>\n </LayoutBox>\n </div>\n )\n})\n\n/\n The display name of the PopupContent component.\n \n @type {string}\n */\nPopupContent.displayName = 'PopupContent'\n"],"names":["styles","popup","inner","PopupAnimateVariant","SLIDE_DOWN","SLIDE_UP","SLIDE_RIGHT","SLIDE_LEFT","Popup","memo","_ref","title","children","components","isModal","hideOnClickOutside","hideOnContentClick","animateVariant","hasHeader","hasCloseIcon","width","height","style","props","_objectWithoutProperties","_excluded","ContentComponent","useMemo","_objectSpread","objectSpread2","React","createElement","PopoverLite","Popover","_extends","clickable","isPopup","modalOverlayClassName","classesOverlay","default","PopupContent","popupStyle","displayName","_ref2","forwardedRef","hide","closeIconURL","_excluded2","ContentRemapped","Array","isArray","filter","child","map","index","cloneElement","key","className","concat","classes","ref","LayoutBox","Fragment","justify","align","padding","H3","onClick","onKeyDown","role","tabIndex","IconBase","iconUrl","closeIconJSX","DividerLine","length"],"mappings":"quBAwBMA,EAKF,CACFC,MAAO,CACLC,MAAO,CACL,CAACC,EAAAA,oBAAoBC,YAAa,CAAE,eAAgB,SACpD,CAACD,EAAAA,oBAAoBE,UAAW,CAAE,eAAgB,QAClD,CAACF,EAAAA,oBAAoBG,aAAc,CAAE,eAAgB,SACrD,CAACH,EAAAA,oBAAoBI,YAAa,CAAE,eAAgB,WAW7CC,EAAwBC,EAAIA,MAAaC,IAcpC,IAdqCC,MACrDA,EAAQ,gBAAgBC,SACxBA,EAAQC,WACRA,EAAa,CAAE,EAAAC,QACfA,GAAU,EAAIC,mBACdA,GAAqB,EAAKC,mBAC1BA,GAAqB,EAAKC,eAC1BA,EAAiBd,EAAmBA,oBAACE,SAAQa,UAC7CA,GAAY,EAAIC,aAChBA,GAAe,EAAIC,MACnBA,EAAKC,OACLA,EAAMC,MACNA,GAEWZ,EADRa,EAAKC,EAAAA,wBAAAd,EAAAe,GAOR,MAAMC,EAAmBb,aAAAA,EAAAA,EAAYa,iBAO/B1B,EAAS2B,EAAAA,SAAQ,IAAAC,EAAAA,cAAAA,EAAAA,cAAAA,EAAAC,cACjBT,CAAAA,EAAAA,EAAQ,CAAE,gBAAiBA,GAAU,CAAA,GACrCC,EAAS,CAAE,iBAAkBA,GAAW,CAAA,GACzCC,IACD,CAACD,EAAQC,EAAOF,IAEpB,OACEU,MAAAC,cAACC,EAAWC,QAAAC,UAAA,CACVC,WAAS,EACTC,SAAO,EACPtB,QAASA,EACTE,mBAAoBA,EACpBD,mBAAoBA,EACpBsB,sBAAuBC,EAAcC,QAAC,wBAClChB,GAEJO,MAAAC,cAAA,IAAA,MACAD,MAAAC,cAACS,EAAY,CACX7B,MAAOA,EACPO,UAAWA,EACXC,aAAcA,EACdF,eAAgBA,EAChBwB,WAAYzC,IAGT0B,GAAoBd,GAAaA,GAEjCA,GAAYc,GAAqBI,MAAAC,cAACL,EAAkB,OAE7C,IASlBlB,EAAMkC,YAAc,QAmBpB,MAAMF,EAAe/B,EAAIA,MAACkC,IAWD,IAXEhC,MACzBA,EAAKiC,aACLA,EAAYC,KACZA,EAAIjC,SACJA,EAAQK,eACRA,EAAcwB,WACdA,EAAUvB,UACVA,GAAY,EAAIC,aAChBA,GAAe,EAAI2B,aACnBA,GAEkBH,EADfpB,EAAKC,EAAAA,wBAAAmB,EAAAI,GAOR,MAAMC,EAAkBpC,GAAYqC,MAAMC,QAAQtC,GAC9CA,EAASuC,QAAQC,KAAsCA,IACtDC,KAAI,CAACD,EAAqBE,IAAkBC,EAAYA,aAEvDH,EAAKxB,EAAAC,cAAAD,gBAAA,CAAI4B,IAAKF,GAAUF,EAAM7B,OAAK,GAAA,CAAEsB,QAAStB,MAEhDO,MAAAC,cAAK,MAAA,KAAA,kBAET,OACED,MAAAC,cAAA,MAAA,CAAK0B,aAASC,OAAKC,EAAOpB,QAAC,oBAAsBqB,IAAKhB,EAActB,MAAOmB,GACzEX,MAAAC,cAAC8B,YAAS,CACRJ,aAASC,OAAKC,EAAOpB,QAAC,0BACtBjB,MAAOL,EAAiBjB,EAAOC,MAAMC,MAAMe,GAAmC,CAAA,GAE7EC,GACCY,MAAAC,cAAAD,MAAAgC,SACEhC,KAAAA,MAAAC,cAAC8B,YAAS,CAACE,QAAQ,gBAAgBC,MAAM,QAAQ5C,MAAM,OAAO6C,QAAQ,uBACpEnC,MAAAC,cAACmC,EAAAA,iBAAE,KAAEvD,GACJQ,GACCW,MAAAC,cAAA,MAAA,CACEoC,QAAStB,EACTuB,UAAWvB,EACXwB,KAAK,SACLC,UAAW,EACXb,UAAWE,EAAOpB,QAAC,iBAElBO,GAAgBhB,MAAAC,cAACwC,WAAQ,CAACC,QAAS1B,KAClCA,GACAhB,MAAAC,cAACwC,EAAQA,cACNE,EAAAA,gBAMX3C,MAAAC,cAAC2C,EAAAA,YAAW,CAACC,OAAO,UAGxB7C,MAAAC,cAAA,MAAA,CAAK0B,UAAWE,EAAOpB,QAAC,8BACrBS,GAAmBA,IAGpB,IASVR,EAAaE,YAAc"}

package/dist/lib/esm/src/core/ui/components/container/ResizableContainer.js.map CHANGED Viewed

	@@ -1 +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/LayoutBox'\nimport { LayoutBoxProps } from './layoutBox/layoutBox.types'\n\n\nexport type ResizableContainerProps = LayoutBoxProps & PropsWithChildren<any> & {\n debounceDelay?: number\n children?: (props: ResizableContainerRenderProps) => ReactElement\n}\n\nexport type ResizableContainerRenderProps = {\n width: number \| string\n height: number \| string\n measured: boolean\n}\n\nconst styles = {\n main: {\n position: 'absolute',\n zIndex: 1,\n left: 0,\n pointerEvents: 'none',\n },\n empty: {\n pointerEvents: 'none',\n },\n}\n\nexport const ResizableContainer: FC<ResizableContainerProps> = memo<ResizableContainerProps>(\n ({ children, debounceDelay = 250, ...props }: ResizableContainerProps) => {\n const [containerRef, containerSize] = useResize(debounceDelay)\n\n return (\n <LayoutBox\n width='100%'\n height='100%'\n justify='center'\n align='center'\n direction='column'\n {...props}\n >\n <LayoutBox\n style={styles.main}\n width='100%'\n height='100%'\n ref={containerRef as RefObject<HTMLDivElement>}\n />\n {!children && (\n <LayoutBox\n width={`${Math.max(containerSize?.width \|\| 200, 200) \|\| 200}px`}\n height={`${Math.max(containerSize?.height \|\| 200, 200) \|\| 200}px`}\n style={styles.empty}\n />\n )}\n {children && children?.({\n height: `${containerSize?.height \|\| 200}px`,\n width: `${containerSize?.width \|\| 200}px`,\n measured: !!containerSize?.height,\n } as ResizableContainerRenderProps)}\n </LayoutBox>\n )\n },\n)\n\nResizableContainer.displayName = 'ResizableContainer'\n"],"names":["styles","main","position","zIndex","left","pointerEvents","empty","ResizableContainer","memo","_ref","children","debounceDelay","props","_objectWithoutProperties","_excluded","containerRef","containerSize","useResize","React","createElement","LayoutBox","_extends","width","height","justify","align","direction","style","ref","concat","Math","max","measured","displayName"],"mappings":"+WAmBMA,EAAS,CACbC,KAAM,CACJC,SAAU,WACVC,OAAQ,EACRC,KAAM,EACNC,cAAe,QAEjBC,MAAO,CACLD,cAAe,SAINE,EAAkDC,GAC7DC,IAA0E,IAAzEC,SAAEA,EAAQC,cAAEA,EAAgB,KAAwCF,EAAhCG,EAAKC,EAAAJ,EAAAK,GACxC,MAAOC,EAAcC,GAAiBC,EAAUN,GAEhD,OACEO,MAAAC,cAACC,EAASC,EAAA,CACRC,MAAM,OACNC,OAAO,OACPC,QAAQ,SACRC,MAAM,SACNC,UAAU,UACNd,GAEJM,MAAAC,cAACC,EAAS,CACRO,MAAO3B,EAAOC,KACdqB,MAAM,OACNC,OAAO,OACPK,IAAKb,KAELL,GACFQ,MAAAC,cAACC,EAAS,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,MAAO3B,EAAOM,QAGfI,IAAYA,aAAAA,EAAAA,EAAW,CACtBa,OAAMM,GAAAA,QAAKb,aAAa,EAAbA,EAAeO,SAAU,IAAO,MAC3CD,MAAKO,GAAAA,QAAKb,aAAa,EAAbA,EAAeM,QAAS,IAAO,MACzCU,WAAYhB,UAAAA,EAAeO,WAEnB,IAKlBhB,EAAmB0B,YAAc"}
1	+ {"version":3,"file":"ResizableContainer.js","sources":["../../../../../../../../src/core/ui/components/container/ResizableContainer.tsx"],"sourcesContent":["import { memo, RefObject, PropsWithChildren, ReactElement, FC, CSSProperties } from 'react'\n\nimport { useResize } from '../../../hooks/useResize'\n\nimport { LayoutBox } from './layoutBox/LayoutBox'\nimport { LayoutBoxProps } from './layoutBox/layoutBox.types'\n\n\nexport type ResizableContainerProps = LayoutBoxProps & PropsWithChildren<any> & {\n debounceDelay?: number\n children?: (props: ResizableContainerRenderProps) => ReactElement\n}\n\nexport type ResizableContainerRenderProps = {\n width: number \| string\n height: number \| string\n measured: boolean\n}\n\nconst styles = {\n main: {\n position: 'absolute',\n zIndex: 1,\n left: 0,\n pointerEvents: 'none',\n },\n empty: {\n pointerEvents: 'none',\n },\n}\n\nexport const ResizableContainer: FC<ResizableContainerProps> = memo<ResizableContainerProps>(\n ({ children, debounceDelay = 250, ...props }: ResizableContainerProps) => {\n const [containerRef, containerSize] = useResize(debounceDelay)\n\n return (\n <LayoutBox\n width='100%'\n height='100%'\n justify='center'\n align='center'\n direction='column'\n {...props}\n >\n <LayoutBox\n style={styles.main as CSSProperties}\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 as CSSProperties}\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","_objectWithoutProperties","_excluded","containerRef","containerSize","useResize","React","createElement","LayoutBox","_extends","width","height","justify","align","direction","style","ref","concat","Math","max","measured","displayName"],"mappings":"+WAmBMA,EAAS,CACbC,KAAM,CACJC,SAAU,WACVC,OAAQ,EACRC,KAAM,EACNC,cAAe,QAEjBC,MAAO,CACLD,cAAe,SAINE,EAAkDC,GAC7DC,IAA0E,IAAzEC,SAAEA,EAAQC,cAAEA,EAAgB,KAAwCF,EAAhCG,EAAKC,EAAAJ,EAAAK,GACxC,MAAOC,EAAcC,GAAiBC,EAAUN,GAEhD,OACEO,MAAAC,cAACC,EAASC,EAAA,CACRC,MAAM,OACNC,OAAO,OACPC,QAAQ,SACRC,MAAM,SACNC,UAAU,UACNd,GAEJM,MAAAC,cAACC,EAAS,CACRO,MAAO3B,EAAOC,KACdqB,MAAM,OACNC,OAAO,OACPK,IAAKb,KAELL,GACFQ,MAAAC,cAACC,EAAS,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,MAAO3B,EAAOM,QAGfI,IAAYA,aAAAA,EAAAA,EAAW,CACtBa,OAAMM,GAAAA,QAAKb,aAAa,EAAbA,EAAeO,SAAU,IAAO,MAC3CD,MAAKO,GAAAA,QAAKb,aAAa,EAAbA,EAAeM,QAAS,IAAO,MACzCU,WAAYhB,UAAAA,EAAeO,WAEnB,IAKlBhB,EAAmB0B,YAAc"}

package/dist/lib/esm/src/core/ui/components/container/layoutBox/LayoutBox.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{objectWithoutProperties as e,objectSpread2 as t,extends as o}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import{memo as i,forwardRef as l,useMemo as a}from"react";import{useParseProps as r}from"../../../../hooks/useParseProps.js";import{classNames as s}from"../../../../utils/helpers/ui.js";import d from"./layoutBox.module.scss.js";import{LayoutDirection as n}from"./layoutBox.types.js";const c=["id","style","children","tabIndex","className","onClick","column","asGrid","wFull","hFull","centered","flex","width","height","debug","background"],u={start:"flex-start","flex-start":"flex-start",end:"flex-end","flex-end":"flex-end"},m=e=>e&&u[e]||e,x=l(((i,l)=>{let{id:u,style:x,children:f,tabIndex:p,className:y="",onClick:h,column:b,asGrid:g=!1,wFull:j=!1,hFull:w=!1,centered:k=!1,flex:v,width:I,height:N,debug:B=!1,background:C}=i,P=e(i,c);const{dataProps:F,restProps:L}=r(P),D=a((()=>h?{onClick:h,onKeyDown:h,role:"button",tabIndex:-1}:{}),[h]),G=a((()=>void 0!==b&&!0===b?n.COLUMN:null),[b]),R=a((()=>{const e=t({},L);return(L.direction||G)&&(e.flexDirection=L.direction||G),k?(e.alignItems="center",e.justifyContent="center"):(L.align&&(e.alignItems=m(L.align)),L.justify&&(e.justifyContent=m(L.justify))),e.display=g?"grid":"flex",j?e.width="100%":void 0!==I&&(e.width="number"==typeof I?"".concat(I,"px"):I),w?e.height="100%":void 0!==N&&(e.height="number"==typeof N?"".concat(N,"px"):N),void 0!==v&&(e.flex=!0===v?1:v),void 0!==C&&(e.background=C),B&&(e.outline="1px solid red"),t(t({},e),x)}),[g,C,k,B,v,w,N,G,L,x,j,I]);return React.createElement("div",o({},u?{id:"".concat(u)}:{},{ref:l,tabIndex:p,className:s(d["layout-box"],y),style:R},F,{"data-testid":F.dataTestId||F["data-testid"]||u},D),f)}));x.displayName="LayoutBoxRefForwarded";const f=i(x),p=i(x);f.displayName="LayoutBox",p.displayName="BoxLayout";export{p as BoxLayout,f as LayoutBox};
+import{objectWithoutProperties as e,objectSpread2 as t,extends as o}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import{memo as a,forwardRef as s,useMemo as i}from"react";import{useParseProps as r}from"../../../../hooks/useParseProps.js";import{classNames as l}from"../../../../utils/helpers/ui.js";import d from"./layoutBox.module.scss.js";import{LayoutDirection as n}from"./layoutBox.types.js";const u=["id","style","children","tabIndex","className","column","asGrid","wFull","hFull","centered","flex","width","height","debug","background"],c={start:"flex-start","flex-start":"flex-start",end:"flex-end","flex-end":"flex-end"},m=e=>e&&c[e]||e,f=s(((a,s)=>{let{id:c,style:f,children:p,tabIndex:x,className:y="",column:h,asGrid:g=!1,wFull:b=!1,hFull:j=!1,centered:v=!1,flex:w,width:N,height:B,debug:I=!1,background:P}=a,F=e(a,u);const{dataProps:k,restProps:L}=r(F),C=i((()=>void 0!==h&&!0===h?n.COLUMN:null),[h]),G=i((()=>{const e=t({},L);return(L.direction||C)&&(e.flexDirection=L.direction||C),v?(e.alignItems="center",e.justifyContent="center"):(L.align&&(e.alignItems=m(L.align)),L.justify&&(e.justifyContent=m(L.justify))),e.display=g?"grid":"flex",b?e.width="100%":void 0!==N&&(e.width="number"==typeof N?"".concat(N,"px"):N),j?e.height="100%":void 0!==B&&(e.height="number"==typeof B?"".concat(B,"px"):B),void 0!==w&&(e.flex=!0===w?1:w),void 0!==P&&(e.background=P),I&&(e.outline="1px solid red"),t(t({},e),f)}),[g,P,v,I,w,j,B,C,L,f,b,N]);return React.createElement("div",o({},c?{id:"".concat(c)}:{},{ref:s,tabIndex:x,className:l(d["layout-box"],y),style:G},k,{"data-testid":k.dataTestId||k["data-testid"]||c}),p)}));f.displayName="LayoutBoxRefForwarded";const p=a(f),x=a(f);p.displayName="LayoutBox",x.displayName="BoxLayout";export{x as BoxLayout,p as LayoutBox};
 //# sourceMappingURL=LayoutBox.js.map

package/dist/lib/esm/src/core/ui/components/container/layoutBox/LayoutBox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LayoutBox.js","sources":["../../../../../../../../../src/core/ui/components/container/layoutBox/LayoutBox.tsx"],"sourcesContent":["import { memo, FC, useMemo, CSSProperties, forwardRef, LegacyRef } from 'react'\n\nimport { useParseProps } from '../../../../hooks/useParseProps'\nimport { classNames } from '../../../../utils/helpers/ui'\n\nimport classes from './layoutBox.module.scss'\nimport { LayoutDirection, LayoutBoxProps } from './layoutBox.types'\n\n/*\n Map of flex values for resolving flex alignment and justification.\n * @type {Record<string, string>}\n /\nconst flexValueMap: Record<string, string> = {\n start: 'flex-start',\n 'flex-start': 'flex-start',\n end: 'flex-end',\n 'flex-end': 'flex-end',\n}\n\n/\n Resolves flex alignment and justification properties based on the provided value.\n * @param {string \| undefined} value - The value to resolve.\n * @returns {string \| undefined} - Resolved flex property value.\n /\nconst resolveFlexProps = (value?: string): string \| undefined => (value ? (flexValueMap[value] \|\| value) : value)\n\n/\n Forwarded ref version of the LayoutBox component.\n * @param {LayoutBoxProps} props - Props for the LayoutBox component.\n * @param {LegacyRef<HTMLDivElement> \| undefined} ref - Ref for accessing the underlying DOM element.\n * @returns {JSX.Element} - Rendered LayoutBox component.\n /\nconst LayoutBoxRefForwarded = forwardRef(({\n id,\n style,\n children,\n tabIndex,\n className = '',\n ~~onClick,\n~~ column,\n asGrid = false,\n wFull = false,\n hFull = false,\n centered = false,\n flex,\n width,\n height,\n debug = false,\n background,\n ...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, BoxLayout-like helpers and additional styles.\n * @type {CSSProperties}\n /\n const styles = useMemo(() => {\n const baseStyles: CSSProperties = {\n ...(restProps as CSSProperties),\n }\n\n // Resolve direction (supports column helper)\n if (restProps.direction \|\| resolvedColumn) {\n baseStyles.flexDirection = (restProps.direction \|\| resolvedColumn) as CSSProperties['flexDirection']\n }\n\n // Resolve alignment and justification\n if (centered) {\n baseStyles.alignItems = 'center'\n baseStyles.justifyContent = 'center'\n } else {\n if (restProps.align) {\n baseStyles.alignItems = resolveFlexProps(restProps.align as string)\n }\n if (restProps.justify) {\n baseStyles.justifyContent = resolveFlexProps(restProps.justify as string)\n }\n }\n\n // Flex or grid display\n if (asGrid) {\n baseStyles.display = 'grid'\n } else {\n baseStyles.display = 'flex'\n }\n\n // Width / height helpers\n if (wFull) {\n baseStyles.width = '100%'\n } else if (width !== undefined) {\n baseStyles.width = typeof width === 'number' ? `${width}px` : width\n }\n\n if (hFull) {\n baseStyles.height = '100%'\n } else if (height !== undefined) {\n baseStyles.height = typeof height === 'number' ? `${height}px` : height\n }\n\n // Flex helper\n if (flex !== undefined) {\n if (flex === true) {\n baseStyles.flex = 1\n } else if (typeof flex === 'number') {\n baseStyles.flex = flex\n } else {\n baseStyles.flex = flex as string\n }\n }\n\n // Background helper\n if (background !== undefined) {\n baseStyles.background = background\n }\n\n // Debug outline helper\n if (debug) {\n baseStyles.outline = '1px solid red'\n }\n\n // User provided style wins last\n return {\n ...baseStyles,\n ...style,\n }\n }, [\n asGrid,\n background,\n centered,\n debug,\n flex,\n hFull,\n height,\n resolvedColumn,\n restProps,\n style,\n wFull,\n width,\n ])\n\n return (\n <div\n {...(id ? { id: `${id}` } : {})}\n ref={ref}\n tabIndex={tabIndex}\n className={classNames(\n classes['layout-box'],\n className,\n )}\n style={styles as CSSProperties}\n {...dataProps}\n data-testid={dataProps.dataTestId \|\| dataProps['data-testid'] \|\| id}\n ~~{...onClickProps}\n~~ >\n {children}\n </div>\n )\n})\n\nLayoutBoxRefForwarded.displayName = 'LayoutBoxRefForwarded'\n\n/\n Memoized and memoized LayoutBox component.\n * @type {FC<LayoutBoxProps>}\n */\nexport const LayoutBox: FC<LayoutBoxProps> = memo<LayoutBoxProps>(LayoutBoxRefForwarded)\n\nexport const BoxLayout: FC<LayoutBoxProps> = memo<LayoutBoxProps>(LayoutBoxRefForwarded)\n\nLayoutBox.displayName = 'LayoutBox'\n\nBoxLayout.displayName = 'BoxLayout'\n"],"names":["flexValueMap","start","end","resolveFlexProps","value","LayoutBoxRefForwarded","forwardRef","_ref","ref","id","style","children","tabIndex","className","~~onClick","~~column","asGrid","wFull","hFull","centered","flex","width","height","debug","background","props","_objectWithoutProperties","_excluded","dataProps","restProps","useParseProps","~~onClickProps~~","useMemo","~~onKeyDown","role","resolvedColumn","~~undefined","LayoutDirection","COLUMN","styles","baseStyles","_objectSpread","direction","flexDirection","alignItems","justifyContent","align","justify","display","concat","outline","React","createElement","_extends","classNames","classes","dataTestId","displayName","LayoutBox","memo","BoxLayout"],"mappings":"~~0jBAYMA~~,EAAuC,CAC3CC,MAAO,aACP,aAAc,aACdC,IAAK,WACL,WAAY,YAQRC,EAAoBC,GAAwCA,GAASJ,EAAaI,IAAmBA,EAQrGC,EAAwBC,GAAW,CAAAC,~~EAkBtBC~~,KAAsD,~~IAlB~~/BC,GACxCA,EAAEC,MACFA,EAAKC,SACLA,EAAQC,SACRA,EAAQC,UACRA,EAAY,GAAEC,~~QACdA~~,~~EAAOC,OACPA,~~EAAMC,OACNA,GAAS,EAAKC,MACdA,GAAQ,EAAKC,MACbA,GAAQ,EAAKC,SACbA,GAAW,EAAKC,KAChBA,EAAIC,MACJA,EAAKC,OACLA,EAAMC,MACNA,GAAQ,EAAKC,WACbA,~~GAEejB~~,~~EADZkB~~,EAAKC,~~EAAAnB~~,~~EAAAoB~~,GAER,MAAMC,UAAEA,EAASC,UAAEA,GAAcC,EAAcL,GAMzCM,~~EAAeC~~,GAAQ,~~IAAOlB~~,~~EAAW~~,~~CAC7CA,UACAmB,UAAWnB,EACXoB,KAAM,SACNtB,UAAW,GACR,CAAG,GAAE,CAACE,IAMLqB,EAAiBH,GAAQ,SAClBI,IAAXrB,~~IAAmC,IAAXA,~~EACtBsB~~,EAAgBC,OAChB,MAAO,~~CAACvB~~,~~IAMNwB~~,~~EAASP~~,GAAQ,KACrB,~~MAAMQ~~,EAAyBC,EAAA,CAAA,~~EACzBZ~~,GA+DN,OA3DIA,~~EAAUa~~,~~WAAaP~~,~~KACzBK~~,EAAWG,~~cAAiBd~~,~~EAAUa~~,~~WAAaP~~,~~GAIjDhB~~,~~GACFqB~~,EAAWI,WAAa,SACxBJ,EAAWK,eAAiB,~~WAExBhB~~,~~EAAUiB~~,QACZN,EAAWI,~~WAAazC~~,~~EAAiB0B~~,~~EAAUiB~~,~~QAEjDjB~~,~~EAAUkB~~,UACZP,EAAWK,~~eAAiB1C~~,~~EAAiB0B~~,~~EAAUkB~~,WAMzDP,EAAWQ,~~QADThC~~,EACmB,OAEA,OAInBC,~~EACFuB~~,~~EAAWnB~~,MAAQ,~~YACAe~~,~~IAAVf~~,~~IACTmB~~,~~EAAWnB~~,MAAyB,iBAAVA,EAAkB,~~GAAA4B~~,~~OAAM5B~~,EAAK,MAAOA,GAG5DH,~~EACFsB~~,~~EAAWlB~~,OAAS,~~YACAc~~,~~IAAXd~~,~~IACTkB~~,~~EAAWlB~~,OAA2B,iBAAXA,EAAmB,~~GAAA2B~~,~~OAAM3B~~,EAAM,MAAOA,~~QAItDc~~,~~IAAThB~~,~~IAEAoB~~,~~EAAWpB~~,MADA,IAATA,EACgB,EAEAA,~~QAOHgB~~,~~IAAfZ~~,~~IACFgB~~,~~EAAWhB~~,WAAaA,GAItBD,~~IACFiB~~,EAAWU,QAAU,iBAIvBT,EAAAA,EACKD,CAAAA,EAAAA,~~GACA9B~~,EAAK,GAET,~~CACDM~~,EACAQ,EACAL,EACAI,EACAH,EACAF,EACAI,~~EACAa~~,~~EACAN~~,~~EACAnB~~,~~EACAO~~,EACAI,IAGF,~~OACE8B~~,MAAAC,oBAAAC,EAAA,CAAA,~~EACO5C~~,EAAK,CAAEA,GAAE,~~GAAAwC~~,~~OAAKxC~~,IAAS,GAAE,CAC9BD,IAAKA,EACLI,SAAUA,EACVC,~~UAAWyC~~,EACTC,EAAQ,~~cACR1C~~,GAEFH,~~MAAO6B~~,~~GACHX~~,EAAS,CACb,cAAaA,~~EAAU4B~~,~~YAAc5B~~,EAAU,~~gBAAkBnB~~,~~GAC7DsB~~,~~GAEHpB,~~EACG,IAIVN,~~EAAsBoD~~,YAAc,8BAMvBC,EAAgCC,~~EAAqBtD~~,~~GAErDuD~~,EAAgCD,~~EAAqBtD~~,~~GAElEqD~~,EAAUD,YAAc,YAExBG,EAAUH,YAAc"}
1	+ {"version":3,"file":"LayoutBox.js","sources":["../../../../../../../../../src/core/ui/components/container/layoutBox/LayoutBox.tsx"],"sourcesContent":["import { memo, FC, useMemo, CSSProperties, forwardRef, LegacyRef } from 'react'\n\nimport { useParseProps } from '../../../../hooks/useParseProps'\nimport { classNames } from '../../../../utils/helpers/ui'\n\nimport classes from './layoutBox.module.scss'\nimport { LayoutDirection, LayoutBoxProps } from './layoutBox.types'\n\n/*\n Map of flex values for resolving flex alignment and justification.\n * @type {Record<string, string>}\n /\nconst flexValueMap: Record<string, string> = {\n start: 'flex-start',\n 'flex-start': 'flex-start',\n end: 'flex-end',\n 'flex-end': 'flex-end',\n}\n\n/\n Resolves flex alignment and justification properties based on the provided value.\n * @param {string \| undefined} value - The value to resolve.\n * @returns {string \| undefined} - Resolved flex property value.\n /\nconst resolveFlexProps = (value?: string): string \| undefined => (value ? (flexValueMap[value] \|\| value) : value)\n\n/\n Forwarded ref version of the LayoutBox component.\n * @param {LayoutBoxProps} props - Props for the LayoutBox component.\n * @param {LegacyRef<HTMLDivElement> \| undefined} ref - Ref for accessing the underlying DOM element.\n * @returns {JSX.Element} - Rendered LayoutBox component.\n /\nconst LayoutBoxRefForwarded = forwardRef(({\n id,\n style,\n children,\n tabIndex,\n className = '',\n column,\n asGrid = false,\n wFull = false,\n hFull = false,\n centered = false,\n flex,\n width,\n height,\n debug = false,\n background,\n ...props\n}: LayoutBoxProps, ref: LegacyRef<HTMLDivElement> \| undefined \| null) => {\n const { dataProps, restProps } = useParseProps(props)\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, BoxLayout-like helpers and additional styles.\n * @type {CSSProperties}\n /\n const styles = useMemo(() => {\n const baseStyles: CSSProperties = {\n ...(restProps as CSSProperties),\n }\n\n // Resolve direction (supports column helper)\n if (restProps.direction \|\| resolvedColumn) {\n baseStyles.flexDirection = (restProps.direction \|\| resolvedColumn) as CSSProperties['flexDirection']\n }\n\n // Resolve alignment and justification\n if (centered) {\n baseStyles.alignItems = 'center'\n baseStyles.justifyContent = 'center'\n } else {\n if (restProps.align) {\n baseStyles.alignItems = resolveFlexProps(restProps.align as string)\n }\n if (restProps.justify) {\n baseStyles.justifyContent = resolveFlexProps(restProps.justify as string)\n }\n }\n\n // Flex or grid display\n if (asGrid) {\n baseStyles.display = 'grid'\n } else {\n baseStyles.display = 'flex'\n }\n\n // Width / height helpers\n if (wFull) {\n baseStyles.width = '100%'\n } else if (width !== undefined) {\n baseStyles.width = typeof width === 'number' ? `${width}px` : width\n }\n\n if (hFull) {\n baseStyles.height = '100%'\n } else if (height !== undefined) {\n baseStyles.height = typeof height === 'number' ? `${height}px` : height\n }\n\n // Flex helper\n if (flex !== undefined) {\n if (flex === true) {\n baseStyles.flex = 1\n } else if (typeof flex === 'number') {\n baseStyles.flex = flex\n } else {\n baseStyles.flex = flex as string\n }\n }\n\n // Background helper\n if (background !== undefined) {\n baseStyles.background = background\n }\n\n // Debug outline helper\n if (debug) {\n baseStyles.outline = '1px solid red'\n }\n\n // User provided style wins last\n return {\n ...baseStyles,\n ...style,\n }\n }, [\n asGrid,\n background,\n centered,\n debug,\n flex,\n hFull,\n height,\n resolvedColumn,\n restProps,\n style,\n wFull,\n width,\n ])\n\n return (\n <div\n {...(id ? { id: `${id}` } : {})}\n ref={ref}\n tabIndex={tabIndex}\n className={classNames(\n classes['layout-box'],\n className,\n )}\n style={styles as CSSProperties}\n {...dataProps}\n data-testid={dataProps.dataTestId \|\| dataProps['data-testid'] \|\| id}\n >\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\nexport const BoxLayout: FC<LayoutBoxProps> = memo<LayoutBoxProps>(LayoutBoxRefForwarded)\n\nLayoutBox.displayName = 'LayoutBox'\n\nBoxLayout.displayName = 'BoxLayout'\n"],"names":["flexValueMap","start","end","resolveFlexProps","value","LayoutBoxRefForwarded","forwardRef","_ref","ref","id","style","children","tabIndex","className","column","asGrid","wFull","hFull","centered","flex","width","height","debug","background","props","_objectWithoutProperties","_excluded","dataProps","restProps","useParseProps","resolvedColumn","useMemo","undefined","LayoutDirection","COLUMN","styles","baseStyles","_objectSpread","direction","flexDirection","alignItems","justifyContent","align","justify","display","concat","outline","React","createElement","_extends","classNames","classes","dataTestId","displayName","LayoutBox","memo","BoxLayout"],"mappings":"gjBAYMA,EAAuC,CAC3CC,MAAO,aACP,aAAc,aACdC,IAAK,WACL,WAAY,YAQRC,EAAoBC,GAAwCA,GAASJ,EAAaI,IAAmBA,EAQrGC,EAAwBC,GAAW,CAAAC,EAiBtBC,KAAsD,IAjB/BC,GACxCA,EAAEC,MACFA,EAAKC,SACLA,EAAQC,SACRA,EAAQC,UACRA,EAAY,GAAEC,OACdA,EAAMC,OACNA,GAAS,EAAKC,MACdA,GAAQ,EAAKC,MACbA,GAAQ,EAAKC,SACbA,GAAW,EAAKC,KAChBA,EAAIC,MACJA,EAAKC,OACLA,EAAMC,MACNA,GAAQ,EAAKC,WACbA,GAEehB,EADZiB,EAAKC,EAAAlB,EAAAmB,GAER,MAAMC,UAAEA,EAASC,UAAEA,GAAcC,EAAcL,GAMzCM,EAAiBC,GAAQ,SAClBC,IAAXlB,IAAmC,IAAXA,EACtBmB,EAAgBC,OAChB,MAAO,CAACpB,IAMNqB,EAASJ,GAAQ,KACrB,MAAMK,EAAyBC,EAAA,CAAA,EACzBT,GA+DN,OA3DIA,EAAUU,WAAaR,KACzBM,EAAWG,cAAiBX,EAAUU,WAAaR,GAIjDZ,GACFkB,EAAWI,WAAa,SACxBJ,EAAWK,eAAiB,WAExBb,EAAUc,QACZN,EAAWI,WAAarC,EAAiByB,EAAUc,QAEjDd,EAAUe,UACZP,EAAWK,eAAiBtC,EAAiByB,EAAUe,WAMzDP,EAAWQ,QADT7B,EACmB,OAEA,OAInBC,EACFoB,EAAWhB,MAAQ,YACAY,IAAVZ,IACTgB,EAAWhB,MAAyB,iBAAVA,EAAkB,GAAAyB,OAAMzB,EAAK,MAAOA,GAG5DH,EACFmB,EAAWf,OAAS,YACAW,IAAXX,IACTe,EAAWf,OAA2B,iBAAXA,EAAmB,GAAAwB,OAAMxB,EAAM,MAAOA,QAItDW,IAATb,IAEAiB,EAAWjB,MADA,IAATA,EACgB,EAEAA,QAOHa,IAAfT,IACFa,EAAWb,WAAaA,GAItBD,IACFc,EAAWU,QAAU,iBAIvBT,EAAAA,EACKD,CAAAA,EAAAA,GACA1B,EAAK,GAET,CACDK,EACAQ,EACAL,EACAI,EACAH,EACAF,EACAI,EACAS,EACAF,EACAlB,EACAM,EACAI,IAGF,OACE2B,MAAAC,oBAAAC,EAAA,CAAA,EACOxC,EAAK,CAAEA,GAAE,GAAAoC,OAAKpC,IAAS,GAAE,CAC9BD,IAAKA,EACLI,SAAUA,EACVC,UAAWqC,EACTC,EAAQ,cACRtC,GAEFH,MAAOyB,GACHR,EAAS,CACb,cAAaA,EAAUyB,YAAczB,EAAU,gBAAkBlB,IAEhEE,EACG,IAIVN,EAAsBgD,YAAc,8BAMvBC,EAAgCC,EAAqBlD,GAErDmD,EAAgCD,EAAqBlD,GAElEiD,EAAUD,YAAc,YAExBG,EAAUH,YAAc"}

package/dist/lib/esm/src/core/ui/components/container/layoutBox/layoutBox.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"layoutBox.types.js","sources":["../../../../../../../../../src/core/ui/components/container/layoutBox/layoutBox.types.ts"],"sourcesContent":["import { CSSProperties, LegacyRef, ~~PropsWithChildren~~ } from 'react'\n\n/*\n Enum representing the possible layout directions.\n /\nexport enum LayoutDirection {\n ROW = 'row',\n COLUMN = 'column',\n}\n\n/\n Props for the LayoutBox component.\n /\n// TODO replace with & React.DIVHtmlAttributes<HTMLDivElement>\nexport type LayoutBoxProps = ~~PropsWithChildren~~ & {\n /* Unique identifier for the component. /\n id?: string \| number\n /* CSS flex property. Can be string, boolean (true = flex-1), or number. /\n flex?: string \| boolean \| number\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. Can be string or number (converted to px). /\n width?: string \| number\n /* CSS height property. Can be string or number (converted to px). /\n height?: string \| number\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 /* CSS background property. /\n background?: 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 /* If true, uses CSS Grid instead of Flexbox. /\n asGrid?: boolean\n /* If true, sets width to 100%. /\n wFull?: boolean\n /* If true, sets height to 100%. /\n hFull?: boolean\n /* If true, centers content in both axes. /\n centered?: boolean\n /* If true, adds an outline to help debug layout issues. */\n debug?: boolean\n} & Omit<CSSProperties, 'direction' \| 'flex'>;\n"],"names":["LayoutDirection"],"mappings":"AAKYA,IAAAA,WAAAA,GAAe,OAAfA,EAAe,IAAA,MAAfA,EAAe,OAAA,SAAfA,CAAe,EAAA,CAAA"}
1	+ {"version":3,"file":"layoutBox.types.js","sources":["../../../../../../../../../src/core/ui/components/container/layoutBox/layoutBox.types.ts"],"sourcesContent":["import { CSSProperties, LegacyRef, HTMLAttributes } 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 /\n// TODO replace with & React.DIVHtmlAttributes<HTMLDivElement>\nexport type LayoutBoxProps = Omit<HTMLAttributes<HTMLDivElement>, 'onKeyDown'> & {\n /* CSS flex property. Can be string, boolean (true = flex-1), or number. /\n flex?: string \| boolean \| number\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. Can be string or number (converted to px). /\n width?: string \| number\n /* CSS height property. Can be string or number (converted to px). /\n height?: string \| number\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 /* CSS background property. /\n background?: string\n /* Ref for accessing the underlying DOM element. /\n ref?: LegacyRef<HTMLDivElement> \| undefined \| null\n /* If true, sets the layout direction to column. /\n column?: boolean\n /* If true, uses CSS Grid instead of Flexbox. /\n asGrid?: boolean\n /* If true, sets width to 100%. /\n wFull?: boolean\n /* If true, sets height to 100%. /\n hFull?: boolean\n /* If true, centers content in both axes. /\n centered?: boolean\n /* If true, adds an outline to help debug layout issues. */\n debug?: boolean\n} & Omit<CSSProperties, 'direction' \| 'flex'>;\n"],"names":["LayoutDirection"],"mappings":"AAKYA,IAAAA,WAAAA,GAAe,OAAfA,EAAe,IAAA,MAAfA,EAAe,OAAA,SAAfA,CAAe,EAAA,CAAA"}

package/dist/lib/esm/src/core/ui/components/molecules/popup/Popup.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{objectWithoutProperties as e,objectSpread2 as t,extends as o}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import{memo as a,useMemo as n,cloneElement as i}from"react";import{Popover as l}from"../popover/PopoverLite.js";import{closeIconJSX as r}from"../../atoms/icons.js";import p from"./popup.module.scss.js";import s from"./popup.overlay.module.scss.js";import{PopupAnimateVariant as c}from"./popup.types.js";import{DividerLine as m}from"../../dividers/DividerLine.js";import{LayoutBox as d}from"../../container/layoutBox/LayoutBox.js";import{HeadlineTertiary as u}from"../../atoms/text/Headline.js";import{IconBase as h}from"../../icon/IconBase.js";const E=["title","children","components","isModal","hideOnClickOutside","hideOnContentClick","animateVariant","hasHeader","hasCloseIcon","width","height","style"],R=["title","forwardedRef","hide","children","animateVariant","popupStyle","hasHeader","hasCloseIcon","closeIconURL"],y={popup:{inner:{[c.SLIDE_DOWN]:{"--slideYFrom":"-48px"},[c.SLIDE_UP]:{"--slideYFrom":"48px"},[c.SLIDE_RIGHT]:{"--slideXFrom":"-64px"},[c.SLIDE_LEFT]:{"--slideXFrom":"64px"}}}},C=a((a=>{let{title:i="Popup's title",children:r,components:p={},isModal:m=!0,hideOnClickOutside:d=!1,hideOnContentClick:u=!1,animateVariant:h=c.SLIDE_UP,hasHeader:R=!0,hasCloseIcon:y=!0,width:C,height:I,style:v}=a,x=e(a,E);const j=null==p?void 0:p.ContentComponent,L=n((()=>t(t(t({},C?{"--popup-width":C}:{}),I?{"--popup-height":I}:{}),v)),[I,v,C]);return React.createElement(l,o({clickable:!0,isPopup:!0,isModal:m,hideOnContentClick:u,hideOnClickOutside:d,modalOverlayClassName:s["popup-modal-overlay"]},x),React.createElement("p",null),React.createElement(f,{title:i,hasHeader:R,hasCloseIcon:y,animateVariant:h,popupStyle:L},!j&&r&&r,!r&&j&&React.createElement(j,null)))}));C.displayName="Popup";const f=a((o=>{let{title:a,forwardedRef:n,hide:l,children:s,animateVariant:c,popupStyle:E,hasHeader:C=!0,hasCloseIcon:f=!0,closeIconURL:I}=o,v=e(o,R);const x=s&&Array.isArray(s)?s.filter((e=>!!e)).map(((e,o)=>i(e,t(t({key:o},e.props),{},{hide:l},v)))):React.createElement("div",null,"Pseudo Content");return React.createElement("div",{className:"".concat(p["popup-container"]),ref:n,style:E},React.createElement(d,{className:"".concat(p["popup-container-inner"]),style:c?y.popup.inner[c]:null},C&&React.createElement(React.Fragment,null,React.createElement(d,{justify:"space-between",align:"start",width:"100%",padding:"20px 20px 16px 20px"},React.createElement(u,null,a),f&&React.createElement("div",{onClick:l,onKeyDown:l,role:"button",tabIndex:-1,className:p["close-button"]},I&&React.createElement(h,{iconUrl:I}),!I&&React.createElement(h,null,r))),React.createElement(m,{length:"100%"})),React.createElement("div",{className:p["popup-container-inner-div"]},x&&x)))}));f.displayName="PopupContent";export{C as Popup};
+import{objectWithoutProperties as e,objectSpread2 as t,extends as o}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import{memo as a,useMemo as n,cloneElement as i}from"react";import{Popover as l}from"../popover/PopoverLite.js";import{closeIconJSX as r}from"../../atoms/icons.js";import p from"./popup.module.scss.js";import s from"./popup.overlay.module.scss.js";import{PopupAnimateVariant as c}from"./popup.types.js";import{DividerLine as m}from"../../dividers/DividerLine.js";import{LayoutBox as d}from"../../container/layoutBox/LayoutBox.js";import{HeadlineTertiary as u}from"../../atoms/text/Headline.js";import{IconBase as h}from"../../icon/IconBase.js";const E=["title","children","components","isModal","hideOnClickOutside","hideOnContentClick","animateVariant","hasHeader","hasCloseIcon","width","height","style"],R=["title","forwardedRef","hide","children","animateVariant","popupStyle","hasHeader","hasCloseIcon","closeIconURL"],y={popup:{inner:{[c.SLIDE_DOWN]:{"--slideYFrom":"-48px"},[c.SLIDE_UP]:{"--slideYFrom":"48px"},[c.SLIDE_RIGHT]:{"--slideXFrom":"-64px"},[c.SLIDE_LEFT]:{"--slideXFrom":"64px"}}}},C=a((a=>{let{title:i="Popup's title",children:r,components:p={},isModal:m=!0,hideOnClickOutside:d=!1,hideOnContentClick:u=!1,animateVariant:h=c.SLIDE_UP,hasHeader:R=!0,hasCloseIcon:y=!0,width:C,height:I,style:v}=a,x=e(a,E);const j=null==p?void 0:p.ContentComponent,L=n((()=>t(t(t({},C?{"--popup-width":C}:{}),I?{"--popup-height":I}:{}),v)),[I,v,C]);return React.createElement(l,o({clickable:!0,isPopup:!0,isModal:m,hideOnContentClick:u,hideOnClickOutside:d,modalOverlayClassName:s["popup-modal-overlay"]},x),React.createElement("p",null),React.createElement(f,{title:i,hasHeader:R,hasCloseIcon:y,animateVariant:h,popupStyle:L},!j&&r&&r,!r&&j&&React.createElement(j,null)))}));C.displayName="Popup";const f=a((o=>{let{title:a,forwardedRef:n,hide:l,children:s,animateVariant:c,popupStyle:E,hasHeader:C=!0,hasCloseIcon:f=!0,closeIconURL:I}=o,v=e(o,R);const x=s&&Array.isArray(s)?s.filter((e=>!!e)).map(((e,o)=>i(e,t(t({key:o},e.props),{},{hide:l},v)))):React.createElement("div",null,"Pseudo Content");return React.createElement("div",{className:"".concat(p["popup-container"]),ref:n,style:E},React.createElement(d,{className:"".concat(p["popup-container-inner"]),style:c?y.popup.inner[c]:{}},C&&React.createElement(React.Fragment,null,React.createElement(d,{justify:"space-between",align:"start",width:"100%",padding:"20px 20px 16px 20px"},React.createElement(u,null,a),f&&React.createElement("div",{onClick:l,onKeyDown:l,role:"button",tabIndex:-1,className:p["close-button"]},I&&React.createElement(h,{iconUrl:I}),!I&&React.createElement(h,null,r))),React.createElement(m,{length:"100%"})),React.createElement("div",{className:p["popup-container-inner-div"]},x&&x)))}));f.displayName="PopupContent";export{C as Popup};
 //# sourceMappingURL=Popup.js.map

package/dist/lib/esm/src/core/ui/components/molecules/popup/Popup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Popup.js","sources":["../../../../../../../../../src/core/ui/components/molecules/popup/Popup.tsx"],"sourcesContent":["import {\n cloneElement, memo, PropsWithChildren, FC, ReactNode, CSSProperties, useMemo, ReactElement,\n} from 'react'\n\nimport { Popover as PopoverLite } from '../popover/PopoverLite'\nimport { HeadlineTertiary as H3 } from '../../atoms/text'\nimport { IconBase } from '../../icon'\nimport { DividerLine } from '../../dividers'\nimport { LayoutBox } from '../../container'\nimport { closeIconJSX } from '../../atoms/icons'\n\nimport classes from './popup.module.scss'\nimport classesOverlay from './popup.overlay.module.scss'\nimport { PopupAnimateVariant, PopupProps } from './popup.types'\n\n\n/*\n Styles for the Popup component.\n \n @typedef {Object} PopupStyles\n * @property {Object} inner - The inner styles for the popup.\n * @property {CSSProperties} content - The styles for the popup content.\n /\n\nconst styles: {\n popup: {\n inner: Record<string, Record<string, string>>\n }\n\n} = {\n popup: {\n inner: {\n [PopupAnimateVariant.SLIDE_DOWN]: { '--slideYFrom': '-48px' },\n [PopupAnimateVariant.SLIDE_UP]: { '--slideYFrom': '48px' },\n [PopupAnimateVariant.SLIDE_RIGHT]: { '--slideXFrom': '-64px' },\n [PopupAnimateVariant.SLIDE_LEFT]: { '--slideXFrom': '64px' },\n },\n },\n}\n\n/\n Popup component.\n \n @type {React.FC<PopupProps>}\n * @returns {React.ReactElement} The Popup.\n /\nexport const Popup: FC<PopupProps> = memo<PopupProps>(({\n title = 'Popup\\'s title',\n children,\n components = {},\n isModal = true,\n hideOnClickOutside = false,\n hideOnContentClick = false,\n animateVariant = PopupAnimateVariant.SLIDE_UP,\n hasHeader = true,\n hasCloseIcon = true,\n width,\n height,\n style,\n ...props\n}: PopupProps) => {\n /\n The ContentComponent to render.\n \n @type {ComponentType}\n /\n const ContentComponent = components?.ContentComponent\n\n /\n The popup styles.\n \n @type {CSSProperties}\n /\n const styles = useMemo(() => ({\n ...(width ? { '--popup-width': width } : {}),\n ...(height ? { '--popup-height': height } : {}),\n ...style,\n }), [height, style, width])\n\n return (\n <PopoverLite\n clickable\n isPopup\n isModal={isModal}\n hideOnContentClick={hideOnContentClick}\n hideOnClickOutside={hideOnClickOutside}\n modalOverlayClassName={classesOverlay['popup-modal-overlay']}\n {...props}\n >\n <p>{/ Placeholder element to avoid error with no children /}</p>\n <PopupContent\n title={title}\n hasHeader={hasHeader}\n hasCloseIcon={hasCloseIcon}\n animateVariant={animateVariant}\n popupStyle={styles}\n >\n {/ Render children if ContentComponent is not provided /}\n {(!ContentComponent && children) && children}\n {/ Render ContentComponent if children are not provided /}\n {(!children && ContentComponent) && <ContentComponent />}\n </PopupContent>\n </PopoverLite>\n )\n})\n\n/\n The display name of the Popup component.\n \n @type {string}\n /\nPopup.displayName = 'Popup'\n\ntype PopupContentProps = PropsWithChildren<unknown> & {\n title?: string\n forwardedRef?: ForwardedRef['forwardedRef']\n animateVariant?: PopupProps['animateVariant']\n popupStyle?: CSSProperties\n hasHeader?: boolean\n hasCloseIcon?: boolean\n closeIconURL?: string\n hide?: () => void\n}\n\n/\n The PopupContent component.\n \n @param {PopupContentProps} props The props for the PopupContent component.\n * @returns {React.ReactElement} The PopupContent.\n /\nconst PopupContent = memo(({\n title,\n forwardedRef,\n hide,\n children,\n animateVariant,\n popupStyle,\n hasHeader = true,\n hasCloseIcon = true,\n closeIconURL,\n ...props\n}: PopupContentProps) => {\n /\n The ContentRemapped element.\n \n @type {React.ReactElement[] \| React.ReactElement}\n /\n const ContentRemapped = children && Array.isArray(children)\n ? children.filter((child: ReactNode \| ReactElement) => !!child)\n .map((child: ReactElement, index: number) => cloneElement(\n // eslint-disable-next-line react/no-array-index-key\n child, { key: index, ...child.props, hide, ...props },\n ))\n : <div>Pseudo Content</div>\n\n return (\n <div className={`${classes['popup-container']}`} ref={forwardedRef} style={popupStyle}>\n <LayoutBox\n className={`${classes['popup-container-inner']}`}\n style={animateVariant ? styles.popup.inner[animateVariant] : ~~null~~}\n >\n {hasHeader && (\n <>\n <LayoutBox justify='space-between' align='start' width='100%' padding='20px 20px 16px 20px'>\n <H3>{title}</H3>\n {hasCloseIcon && (\n <div\n onClick={hide}\n onKeyDown={hide}\n role='button'\n tabIndex={-1}\n className={classes['close-button']}\n >\n {closeIconURL && <IconBase iconUrl={closeIconURL} />}\n {!closeIconURL && (\n <IconBase>\n {closeIconJSX}\n </IconBase>\n )}\n </div>\n )}\n </LayoutBox>\n <DividerLine length='100%' />\n </>\n )}\n <div className={classes['popup-container-inner-div']}>\n {ContentRemapped && ContentRemapped}\n </div>\n </LayoutBox>\n </div>\n )\n})\n\n/\n The display name of the PopupContent component.\n \n @type {string}\n */\nPopupContent.displayName = 'PopupContent'\n"],"names":["styles","popup","inner","PopupAnimateVariant","SLIDE_DOWN","SLIDE_UP","SLIDE_RIGHT","SLIDE_LEFT","Popup","memo","_ref","title","children","components","isModal","hideOnClickOutside","hideOnContentClick","animateVariant","hasHeader","hasCloseIcon","width","height","style","props","_objectWithoutProperties","_excluded","ContentComponent","useMemo","_objectSpread","React","createElement","PopoverLite","_extends","clickable","isPopup","modalOverlayClassName","classesOverlay","PopupContent","popupStyle","displayName","_ref2","forwardedRef","hide","closeIconURL","_excluded2","ContentRemapped","Array","isArray","filter","child","map","index","cloneElement","key","className","concat","classes","ref","LayoutBox","Fragment","justify","align","padding","H3","onClick","onKeyDown","role","tabIndex","IconBase","iconUrl","closeIconJSX","DividerLine","length"],"mappings":"07BAwBMA,EAKF,CACFC,MAAO,CACLC,MAAO,CACL,CAACC,EAAoBC,YAAa,CAAE,eAAgB,SACpD,CAACD,EAAoBE,UAAW,CAAE,eAAgB,QAClD,CAACF,EAAoBG,aAAc,CAAE,eAAgB,SACrD,CAACH,EAAoBI,YAAa,CAAE,eAAgB,WAW7CC,EAAwBC,GAAiBC,IAcpC,IAdqCC,MACrDA,EAAQ,gBAAgBC,SACxBA,EAAQC,WACRA,EAAa,CAAE,EAAAC,QACfA,GAAU,EAAIC,mBACdA,GAAqB,EAAKC,mBAC1BA,GAAqB,EAAKC,eAC1BA,EAAiBd,EAAoBE,SAAQa,UAC7CA,GAAY,EAAIC,aAChBA,GAAe,EAAIC,MACnBA,EAAKC,OACLA,EAAMC,MACNA,GAEWZ,EADRa,EAAKC,EAAAd,EAAAe,GAOR,MAAMC,EAAmBb,aAAAA,EAAAA,EAAYa,iBAO/B1B,EAAS2B,GAAQ,IAAAC,EAAAA,EAAAA,EACjBR,CAAAA,EAAAA,EAAQ,CAAE,gBAAiBA,GAAU,CAAA,GACrCC,EAAS,CAAE,iBAAkBA,GAAW,CAAA,GACzCC,IACD,CAACD,EAAQC,EAAOF,IAEpB,OACES,MAAAC,cAACC,EAAWC,EAAA,CACVC,WAAS,EACTC,SAAO,EACPpB,QAASA,EACTE,mBAAoBA,EACpBD,mBAAoBA,EACpBoB,sBAAuBC,EAAe,wBAClCb,GAEJM,MAAAC,cAAA,IAAA,MACAD,MAAAC,cAACO,EAAY,CACX1B,MAAOA,EACPO,UAAWA,EACXC,aAAcA,EACdF,eAAgBA,EAChBqB,WAAYtC,IAGT0B,GAAoBd,GAAaA,GAEjCA,GAAYc,GAAqBG,MAAAC,cAACJ,EAAkB,OAE7C,IASlBlB,EAAM+B,YAAc,QAmBpB,MAAMF,EAAe5B,GAAK+B,IAWD,IAXE7B,MACzBA,EAAK8B,aACLA,EAAYC,KACZA,EAAI9B,SACJA,EAAQK,eACRA,EAAcqB,WACdA,EAAUpB,UACVA,GAAY,EAAIC,aAChBA,GAAe,EAAIwB,aACnBA,GAEkBH,EADfjB,EAAKC,EAAAgB,EAAAI,GAOR,MAAMC,EAAkBjC,GAAYkC,MAAMC,QAAQnC,GAC9CA,EAASoC,QAAQC,KAAsCA,IACtDC,KAAI,CAACD,EAAqBE,IAAkBC,EAE3CH,EAAKrB,EAAAA,EAAA,CAAIyB,IAAKF,GAAUF,EAAM1B,OAAK,GAAA,CAAEmB,QAASnB,MAEhDM,MAAAC,cAAK,MAAA,KAAA,kBAET,OACED,MAAAC,cAAA,MAAA,CAAKwB,aAASC,OAAKC,EAAQ,oBAAsBC,IAAKhB,EAAcnB,MAAOgB,GACzET,MAAAC,cAAC4B,EAAS,CACRJ,aAASC,OAAKC,EAAQ,0BACtBlC,MAAOL,EAAiBjB,EAAOC,MAAMC,MAAMe,~~GAAkB~~,~~MAE5DC~~,GACCW,MAAAC,cAAAD,MAAA8B,SACE9B,KAAAA,MAAAC,cAAC4B,EAAS,CAACE,QAAQ,gBAAgBC,MAAM,QAAQzC,MAAM,OAAO0C,QAAQ,uBACpEjC,MAAAC,cAACiC,EAAE,KAAEpD,GACJQ,GACCU,MAAAC,cAAA,MAAA,CACEkC,QAAStB,EACTuB,UAAWvB,EACXwB,KAAK,SACLC,UAAW,EACXb,UAAWE,EAAQ,iBAElBb,GAAgBd,MAAAC,cAACsC,EAAQ,CAACC,QAAS1B,KAClCA,GACAd,MAAAC,cAACsC,OACEE,KAMXzC,MAAAC,cAACyC,EAAW,CAACC,OAAO,UAGxB3C,MAAAC,cAAA,MAAA,CAAKwB,UAAWE,EAAQ,8BACrBX,GAAmBA,IAGpB,IASVR,EAAaE,YAAc"}
1	+ {"version":3,"file":"Popup.js","sources":["../../../../../../../../../src/core/ui/components/molecules/popup/Popup.tsx"],"sourcesContent":["import {\n cloneElement, memo, PropsWithChildren, FC, ReactNode, CSSProperties, useMemo, ReactElement,\n} from 'react'\n\nimport { Popover as PopoverLite } from '../popover/PopoverLite'\nimport { HeadlineTertiary as H3 } from '../../atoms/text'\nimport { IconBase } from '../../icon'\nimport { DividerLine } from '../../dividers'\nimport { LayoutBox } from '../../container'\nimport { closeIconJSX } from '../../atoms/icons'\n\nimport classes from './popup.module.scss'\nimport classesOverlay from './popup.overlay.module.scss'\nimport { PopupAnimateVariant, PopupProps } from './popup.types'\n\n\n/*\n Styles for the Popup component.\n \n @typedef {Object} PopupStyles\n * @property {Object} inner - The inner styles for the popup.\n * @property {CSSProperties} content - The styles for the popup content.\n /\n\nconst styles: {\n popup: {\n inner: Record<string, Record<string, string>>\n }\n\n} = {\n popup: {\n inner: {\n [PopupAnimateVariant.SLIDE_DOWN]: { '--slideYFrom': '-48px' },\n [PopupAnimateVariant.SLIDE_UP]: { '--slideYFrom': '48px' },\n [PopupAnimateVariant.SLIDE_RIGHT]: { '--slideXFrom': '-64px' },\n [PopupAnimateVariant.SLIDE_LEFT]: { '--slideXFrom': '64px' },\n },\n },\n}\n\n/\n Popup component.\n \n @type {React.FC<PopupProps>}\n * @returns {React.ReactElement} The Popup.\n /\nexport const Popup: FC<PopupProps> = memo<PopupProps>(({\n title = 'Popup\\'s title',\n children,\n components = {},\n isModal = true,\n hideOnClickOutside = false,\n hideOnContentClick = false,\n animateVariant = PopupAnimateVariant.SLIDE_UP,\n hasHeader = true,\n hasCloseIcon = true,\n width,\n height,\n style,\n ...props\n}: PopupProps) => {\n /\n The ContentComponent to render.\n \n @type {ComponentType}\n /\n const ContentComponent = components?.ContentComponent\n\n /\n The popup styles.\n \n @type {CSSProperties}\n /\n const styles = useMemo(() => ({\n ...(width ? { '--popup-width': width } : {}),\n ...(height ? { '--popup-height': height } : {}),\n ...style,\n }), [height, style, width])\n\n return (\n <PopoverLite\n clickable\n isPopup\n isModal={isModal}\n hideOnContentClick={hideOnContentClick}\n hideOnClickOutside={hideOnClickOutside}\n modalOverlayClassName={classesOverlay['popup-modal-overlay']}\n {...props}\n >\n <p>{/ Placeholder element to avoid error with no children /}</p>\n <PopupContent\n title={title}\n hasHeader={hasHeader}\n hasCloseIcon={hasCloseIcon}\n animateVariant={animateVariant}\n popupStyle={styles}\n >\n {/ Render children if ContentComponent is not provided /}\n {(!ContentComponent && children) && children}\n {/ Render ContentComponent if children are not provided /}\n {(!children && ContentComponent) && <ContentComponent />}\n </PopupContent>\n </PopoverLite>\n )\n})\n\n/\n The display name of the Popup component.\n \n @type {string}\n /\nPopup.displayName = 'Popup'\n\ntype PopupContentProps = PropsWithChildren<unknown> & {\n title?: string\n forwardedRef?: ForwardedRef['forwardedRef']\n animateVariant?: PopupProps['animateVariant']\n popupStyle?: CSSProperties\n hasHeader?: boolean\n hasCloseIcon?: boolean\n closeIconURL?: string\n hide?: () => void\n}\n\n/\n The PopupContent component.\n \n @param {PopupContentProps} props The props for the PopupContent component.\n * @returns {React.ReactElement} The PopupContent.\n /\nconst PopupContent = memo(({\n title,\n forwardedRef,\n hide,\n children,\n animateVariant,\n popupStyle,\n hasHeader = true,\n hasCloseIcon = true,\n closeIconURL,\n ...props\n}: PopupContentProps) => {\n /\n The ContentRemapped element.\n \n @type {React.ReactElement[] \| React.ReactElement}\n /\n const ContentRemapped = children && Array.isArray(children)\n ? children.filter((child: ReactNode \| ReactElement) => !!child)\n .map((child: ReactElement, index: number) => cloneElement(\n // eslint-disable-next-line react/no-array-index-key\n child, { key: index, ...child.props, hide, ...props },\n ))\n : <div>Pseudo Content</div>\n\n return (\n <div className={`${classes['popup-container']}`} ref={forwardedRef} style={popupStyle}>\n <LayoutBox\n className={`${classes['popup-container-inner']}`}\n style={animateVariant ? styles.popup.inner[animateVariant] as CSSProperties : {}}\n >\n {hasHeader && (\n <>\n <LayoutBox justify='space-between' align='start' width='100%' padding='20px 20px 16px 20px'>\n <H3>{title}</H3>\n {hasCloseIcon && (\n <div\n onClick={hide}\n onKeyDown={hide}\n role='button'\n tabIndex={-1}\n className={classes['close-button']}\n >\n {closeIconURL && <IconBase iconUrl={closeIconURL} />}\n {!closeIconURL && (\n <IconBase>\n {closeIconJSX}\n </IconBase>\n )}\n </div>\n )}\n </LayoutBox>\n <DividerLine length='100%' />\n </>\n )}\n <div className={classes['popup-container-inner-div']}>\n {ContentRemapped && ContentRemapped}\n </div>\n </LayoutBox>\n </div>\n )\n})\n\n/\n The display name of the PopupContent component.\n \n @type {string}\n */\nPopupContent.displayName = 'PopupContent'\n"],"names":["styles","popup","inner","PopupAnimateVariant","SLIDE_DOWN","SLIDE_UP","SLIDE_RIGHT","SLIDE_LEFT","Popup","memo","_ref","title","children","components","isModal","hideOnClickOutside","hideOnContentClick","animateVariant","hasHeader","hasCloseIcon","width","height","style","props","_objectWithoutProperties","_excluded","ContentComponent","useMemo","_objectSpread","React","createElement","PopoverLite","_extends","clickable","isPopup","modalOverlayClassName","classesOverlay","PopupContent","popupStyle","displayName","_ref2","forwardedRef","hide","closeIconURL","_excluded2","ContentRemapped","Array","isArray","filter","child","map","index","cloneElement","key","className","concat","classes","ref","LayoutBox","Fragment","justify","align","padding","H3","onClick","onKeyDown","role","tabIndex","IconBase","iconUrl","closeIconJSX","DividerLine","length"],"mappings":"07BAwBMA,EAKF,CACFC,MAAO,CACLC,MAAO,CACL,CAACC,EAAoBC,YAAa,CAAE,eAAgB,SACpD,CAACD,EAAoBE,UAAW,CAAE,eAAgB,QAClD,CAACF,EAAoBG,aAAc,CAAE,eAAgB,SACrD,CAACH,EAAoBI,YAAa,CAAE,eAAgB,WAW7CC,EAAwBC,GAAiBC,IAcpC,IAdqCC,MACrDA,EAAQ,gBAAgBC,SACxBA,EAAQC,WACRA,EAAa,CAAE,EAAAC,QACfA,GAAU,EAAIC,mBACdA,GAAqB,EAAKC,mBAC1BA,GAAqB,EAAKC,eAC1BA,EAAiBd,EAAoBE,SAAQa,UAC7CA,GAAY,EAAIC,aAChBA,GAAe,EAAIC,MACnBA,EAAKC,OACLA,EAAMC,MACNA,GAEWZ,EADRa,EAAKC,EAAAd,EAAAe,GAOR,MAAMC,EAAmBb,aAAAA,EAAAA,EAAYa,iBAO/B1B,EAAS2B,GAAQ,IAAAC,EAAAA,EAAAA,EACjBR,CAAAA,EAAAA,EAAQ,CAAE,gBAAiBA,GAAU,CAAA,GACrCC,EAAS,CAAE,iBAAkBA,GAAW,CAAA,GACzCC,IACD,CAACD,EAAQC,EAAOF,IAEpB,OACES,MAAAC,cAACC,EAAWC,EAAA,CACVC,WAAS,EACTC,SAAO,EACPpB,QAASA,EACTE,mBAAoBA,EACpBD,mBAAoBA,EACpBoB,sBAAuBC,EAAe,wBAClCb,GAEJM,MAAAC,cAAA,IAAA,MACAD,MAAAC,cAACO,EAAY,CACX1B,MAAOA,EACPO,UAAWA,EACXC,aAAcA,EACdF,eAAgBA,EAChBqB,WAAYtC,IAGT0B,GAAoBd,GAAaA,GAEjCA,GAAYc,GAAqBG,MAAAC,cAACJ,EAAkB,OAE7C,IASlBlB,EAAM+B,YAAc,QAmBpB,MAAMF,EAAe5B,GAAK+B,IAWD,IAXE7B,MACzBA,EAAK8B,aACLA,EAAYC,KACZA,EAAI9B,SACJA,EAAQK,eACRA,EAAcqB,WACdA,EAAUpB,UACVA,GAAY,EAAIC,aAChBA,GAAe,EAAIwB,aACnBA,GAEkBH,EADfjB,EAAKC,EAAAgB,EAAAI,GAOR,MAAMC,EAAkBjC,GAAYkC,MAAMC,QAAQnC,GAC9CA,EAASoC,QAAQC,KAAsCA,IACtDC,KAAI,CAACD,EAAqBE,IAAkBC,EAE3CH,EAAKrB,EAAAA,EAAA,CAAIyB,IAAKF,GAAUF,EAAM1B,OAAK,GAAA,CAAEmB,QAASnB,MAEhDM,MAAAC,cAAK,MAAA,KAAA,kBAET,OACED,MAAAC,cAAA,MAAA,CAAKwB,aAASC,OAAKC,EAAQ,oBAAsBC,IAAKhB,EAAcnB,MAAOgB,GACzET,MAAAC,cAAC4B,EAAS,CACRJ,aAASC,OAAKC,EAAQ,0BACtBlC,MAAOL,EAAiBjB,EAAOC,MAAMC,MAAMe,GAAmC,CAAA,GAE7EC,GACCW,MAAAC,cAAAD,MAAA8B,SACE9B,KAAAA,MAAAC,cAAC4B,EAAS,CAACE,QAAQ,gBAAgBC,MAAM,QAAQzC,MAAM,OAAO0C,QAAQ,uBACpEjC,MAAAC,cAACiC,EAAE,KAAEpD,GACJQ,GACCU,MAAAC,cAAA,MAAA,CACEkC,QAAStB,EACTuB,UAAWvB,EACXwB,KAAK,SACLC,UAAW,EACXb,UAAWE,EAAQ,iBAElBb,GAAgBd,MAAAC,cAACsC,EAAQ,CAACC,QAAS1B,KAClCA,GACAd,MAAAC,cAACsC,OACEE,KAMXzC,MAAAC,cAACyC,EAAW,CAACC,OAAO,UAGxB3C,MAAAC,cAAA,MAAA,CAAKwB,UAAWE,EAAQ,8BACrBX,GAAmBA,IAGpB,IASVR,EAAaE,YAAc"}