@e1011/es-kit 1.0.62 → 1.0.66

package/dist/types/src/core/ui/components/container/CollapsibleContainer.d.ts

@@ -0,0 +1,10 @@
+import { FC, ReactNode } from 'react';
+export type CollapsibleContainerProps = {
+    collapsed?: boolean;
+    collapseHandler?: (collapsed: boolean) => void;
+    children?: ReactNode;
+    className?: string;
+    horizontal?: boolean;
+};
+export declare const CollapsibleContainer: FC<CollapsibleContainerProps>;
+//# sourceMappingURL=CollapsibleContainer.d.ts.map

package/dist/types/src/core/ui/components/container/CollapsibleContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleContainer.d.ts","sourceRoot":"","sources":["../../../../../../../src/core/ui/components/container/CollapsibleContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA0B,SAAS,EAAsD,MAAM,OAAO,CAAA;AASjH,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AACD,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAgD7D,CAAA"}

package/dist/types/src/core/ui/components/container/CollapsibleContainerS.d.ts

@@ -0,0 +1,11 @@
+import { FC, ReactNode } from 'react';
+export type ContainerProps = {
+    collapsed?: boolean;
+    collapseHandler?: (collapsed: boolean) => void;
+    children?: ReactNode;
+    propName?: string;
+    className?: string;
+    css?: string;
+};
+export declare const ContainerS: FC<ContainerProps>;
+//# sourceMappingURL=CollapsibleContainerS.d.ts.map

package/dist/types/src/core/ui/components/container/CollapsibleContainerS.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleContainerS.d.ts","sourceRoot":"","sources":["../../../../../../../src/core/ui/components/container/CollapsibleContainerS.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA0B,SAAS,EAAa,MAAM,OAAO,CAAA;AAgCxE,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AACD,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,cAAc,CAqCxC,CAAA"}

package/dist/types/src/core/ui/components/container/index.d.ts

@@ -1,6 +1,7 @@
 export * from './FBox';
 export * from './Flex';
 export * from './Placeholder';
-export * from './Container';
+export * from './CollapsibleContainerS';
+export * from './CollapsibleContainer';
 export * from './ResizableContainer';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/core/ui/components/container/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/core/ui/components/container/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,sBAAsB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/core/ui/components/container/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA"}

package/dist/ui/esm/index.css

@@ -22,6 +22,39 @@
   min-height: 0;
   border-radius: initial;
 }
+.CollapsibleContainer-module_collapsible-container__u0Jmm {
+  transform-origin: 0% 0%;
+  opacity: 0;
+  overflow: clip;
+}
+.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_vertical__w7MVN {
+  transition: opacity 0.2s ease-in-out, height 0.2s ease-in-out, max-height 0.2s ease-in-out;
+  will-change: opacity, height, max-height;
+}
+.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_vertical__w7MVN.CollapsibleContainer-module_collapsed__q8fs8 {
+  height: 0;
+  max-height: 0;
+  opacity: 0;
+}
+.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_vertical__w7MVN.CollapsibleContainer-module_expanded__O6Vh8 {
+  height: var(--prop-value);
+  max-height: var(--prop-value);
+  opacity: 1;
+}
+.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_horizontal__QJWI- {
+  transition: opacity 0.2s ease-in-out, width 0.2s ease-in-out, max-width 0.2s ease-in-out;
+  will-change: opacity, width, max-width;
+}
+.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_horizontal__QJWI-.CollapsibleContainer-module_collapsed__q8fs8 {
+  width: 0;
+  max-width: 0;
+  opacity: 0;
+}
+.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_horizontal__QJWI-.CollapsibleContainer-module_expanded__O6Vh8 {
+  width: var(--prop-value);
+  max-width: var(--prop-value);
+  opacity: 1;
+}
 .divider-module_divider-line__6CesR {
   position: relative;
   display: block;

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

@@ -0,0 +1,2 @@
+import{objectWithoutProperties as e,slicedToArray as l,objectSpread2 as o}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import"../../../../../node_modules/core-js/modules/es.array.concat.js";import{memo as a,useRef as r,useState as t,useEffect as n,useLayoutEffect as i,useMemo as c}from"react";import s from"./CollapsibleContainer.module.scss.js";var p=["collapsed","collapseHandler","children","horizontal","className"],d={width:"scrollWidth",height:"scrollHeight"},u=a((function(a){var u=a.collapsed,h=void 0!==u&&u,m=a.collapseHandler,v=a.children,f=a.horizontal,j=void 0!==f&&f,b=a.className,g=void 0===b?"":b,x=e(a,p),w=r(null),y=t(0),C=l(y,2),H=C[0],N=C[1],z=!j;n((function(){null==m||m(h)}),[m,h]),i((function(){if(null!=w&&w.current){var e=z?"height":"width";N(w.current[d[e]])}}),[w,z]);var _=c((function(){return o({"--prop-name":z?"height":"width","--prop-max-name":z?"max-height":"max-width","--prop-value":"".concat(H,"px")},x)}),[z,x,H]),P=c((function(){var e=[z?s.vertical:s.horizontal];return h&&H&&null!=H&&e.push(s.collapsed),!h&&H&&null!=H&&e.push(s.expanded),e.join(" ")}),[h,H,z]);return React.createElement("div",{className:"".concat(s["collapsible-container"]," ").concat(P," ").concat(g," "),ref:w,style:_},v)}));u.displayName="CollapsibleContainer";export{u as CollapsibleContainer};
+//# sourceMappingURL=CollapsibleContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleContainer.js","sources":["../../../../../../../../src/core/ui/components/container/CollapsibleContainer.tsx"],"sourcesContent":["import { FC, useRef, useState, memo, ReactNode, useEffect, useLayoutEffect, useMemo, CSSProperties } from 'react'\n\nimport classes from './CollapsibleContainer.module.scss'\n\nconst elementPropNameMap: Record<string, string> = {\n  width: 'scrollWidth',\n  height: 'scrollHeight',\n}\n\nexport type CollapsibleContainerProps = {\n  collapsed?: boolean\n  collapseHandler?: (collapsed: boolean) => void\n  children?: ReactNode\n  className?: string\n  horizontal?: boolean\n}\nexport const CollapsibleContainer: FC<CollapsibleContainerProps> = memo(({\n  collapsed = false, collapseHandler, children, horizontal = false, className = '', ...style\n}: CollapsibleContainerProps) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [contentProp, setContentProp] = useState(0)\n\n  const vertical = !horizontal\n\n  useEffect(() => {\n    collapseHandler?.(collapsed)\n  }, [collapseHandler, collapsed])\n\n  useLayoutEffect(() => {\n    if (containerRef?.current) {\n      const propName = vertical ? 'height' : 'width'\n\n      setContentProp((containerRef.current as any)[elementPropNameMap[propName]])\n    }\n  }, [containerRef, vertical])\n\n  const styleProps: CSSProperties = useMemo(() => ({\n    '--prop-name': vertical ? 'height' : 'width',\n    '--prop-max-name': vertical ? 'max-height' : 'max-width',\n    '--prop-value': `${contentProp}px`,\n    ...style,\n  } as CSSProperties), [vertical, style, contentProp])\n\n  const classNames = useMemo(() => {\n    const classNames = [vertical ? classes.vertical : classes.horizontal]\n\n    if (collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n      classNames.push(classes.collapsed)\n    }\n    if (!collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n      classNames.push(classes.expanded)\n    }\n    return classNames.join(' ')\n  }, [collapsed, contentProp, vertical])\n\n  return (\n    <div\n      className={`${classes['collapsible-container']} ${classNames} ${className} `}\n      ref={containerRef}\n      style={styleProps}\n    >\n      {children}\n    </div>\n  )\n})\n\nCollapsibleContainer.displayName = 'CollapsibleContainer'\n"],"names":["elementPropNameMap","width","height","CollapsibleContainer","memo","_ref","_ref$collapsed","collapsed","collapseHandler","children","_ref$horizontal","horizontal","_ref$className","className","style","_objectWithoutProperties","_excluded","containerRef","useRef","_useState","useState","_useState2","_slicedToArray","contentProp","setContentProp","vertical","useEffect","useLayoutEffect","current","propName","styleProps","useMemo","_objectSpread","concat","classNames","classes","push","expanded","join","React","createElement","ref","displayName"],"mappings":"mbAIMA,EAA6C,CACjDC,MAAO,cACPC,OAAQ,gBAUGC,EAAsDC,GAAK,SAAAC,GAEvC,IAAAC,EAAAD,EAD/BE,UAAAA,OAAY,IAAHD,GAAQA,EAAEE,EAAeH,EAAfG,gBAAiBC,EAAQJ,EAARI,SAAQC,EAAAL,EAAEM,WAAAA,OAAa,IAAHD,GAAQA,EAAAE,EAAAP,EAAEQ,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EAAKE,EAAKC,EAAAV,EAAAW,GAEpFC,EAAeC,EAAuB,MAC5CC,EAAsCC,EAAS,GAAEC,EAAAC,EAAAH,EAAA,GAA1CI,EAAWF,EAAA,GAAEG,EAAcH,EAAA,GAE5BI,GAAYd,EAElBe,GAAU,WACRlB,SAAAA,EAAkBD,EACpB,GAAG,CAACC,EAAiBD,IAErBoB,GAAgB,WACd,GAAIV,SAAAA,EAAcW,QAAS,CACzB,IAAMC,EAAWJ,EAAW,SAAW,QAEvCD,EAAgBP,EAAaW,QAAgB5B,EAAmB6B,IAClE,CACF,GAAG,CAACZ,EAAcQ,IAElB,IAAMK,EAA4BC,GAAQ,WAAA,OAAAC,EAAA,CACxC,cAAeP,EAAW,SAAW,QACrC,kBAAmBA,EAAW,aAAe,YAC7C,eAAc,GAAAQ,OAAKV,EAAW,OAC3BT,EACc,GAAE,CAACW,EAAUX,EAAOS,IAEjCW,EAAaH,GAAQ,WACzB,IAAMG,EAAa,CAACT,EAAWU,EAAQV,SAAWU,EAAQxB,YAQ1D,OANIJ,GAAagB,GAAbhB,MAA4BgB,GAC9BW,EAAWE,KAAKD,EAAQ5B,YAErBA,GAAagB,GAAd,MAA6BA,GAC/BW,EAAWE,KAAKD,EAAQE,UAEnBH,EAAWI,KAAK,IACxB,GAAE,CAAC/B,EAAWgB,EAAaE,IAE5B,OACEc,MAAAC,cAAA,MAAA,CACE3B,UAASoB,GAAAA,OAAKE,EAAQ,yBAAwBF,KAAAA,OAAIC,EAAU,KAAAD,OAAIpB,EAAa,KAC7E4B,IAAKxB,EACLH,MAAOgB,GAENrB,EAGP,IAEAN,EAAqBuC,YAAc"}

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

@@ -0,0 +1,2 @@
+var l={"collapsible-container":"CollapsibleContainer-module_collapsible-container__u0Jmm",vertical:"CollapsibleContainer-module_vertical__w7MVN",collapsed:"CollapsibleContainer-module_collapsed__q8fs8",expanded:"CollapsibleContainer-module_expanded__O6Vh8",horizontal:"CollapsibleContainer-module_horizontal__QJWI-"};export{l as default};
+//# sourceMappingURL=CollapsibleContainer.module.scss.js.map

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

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

package/dist/ui/esm/src/core/ui/components/container/CollapsibleContainerS.js

@@ -0,0 +1,2 @@
+import{objectWithoutProperties as e,slicedToArray as o,extends as n}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import a from"styled-components";import"../../../../../node_modules/core-js/modules/es.array.concat.js";import{memo as t,useRef as l,useState as r,useEffect as i}from"react";var c=["collapsed","collapseHandler","children","propName","className","css"],s={width:"scrollWidth",height:"scrollHeight"},p=function(e){return e.propName},d=t(a.div.withConfig({displayName:"CollapsibleContainerS__StyledContainer",componentId:"sc-fj3lnl-0"})(["transform-origin:0% 0%;transition:opacity 0.2s ease-in-out,"," 0.2s ease-in-out,max-"," 0.2s ease-in-out;will-change:opacity,",",max-",";overflow:hidden;opacity:0;&.Collapsible__container__collapsed{",":0;max-",":0;opacity:0;}&.Collapsible__container__expanded{",":",";max-",":",";opacity:1;}"],p,p,p,p,p,p,p,(function(e){var o=e.contentProp;return"".concat(o,"px")}),p,(function(e){var o=e.contentProp;return"".concat(o,"px")}))),m=a(d).withConfig({displayName:"CollapsibleContainerS___StyledStyledContainer",componentId:"sc-fj3lnl-1"})(["",""],(function(e){return e.$_css})),u=t((function(a){var t=a.collapsed,p=void 0!==t&&t,d=a.collapseHandler,u=a.children,_=a.propName,f=void 0===_?"height":_,h=a.className,y=a.css,C=e(a,c),v=l(),x=r(0),N=o(x,2),b=N[0],g=N[1];i((function(){null==d||d(p)}),[d,p]),i((function(){null!=v&&v.current&&g(v.current[s[f]])}),[v,f]);var j="";return p&&b&&null!=b&&(j="Collapsible__container__collapsed"),!p&&b&&null!=b&&(j="Collapsible__container__expanded"),React.createElement(m,n({className:"".concat(h," ").concat(j),ref:v,contentProp:b,propName:f},C,{$_css:y}),u)}));u.displayName="ContainerS";export{u as ContainerS};
+//# sourceMappingURL=CollapsibleContainerS.js.map

package/dist/ui/esm/src/core/ui/components/container/CollapsibleContainerS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleContainerS.js","sources":["../../../../../../../../src/core/ui/components/container/CollapsibleContainerS.tsx"],"sourcesContent":["import { FC, useRef, useState, memo, ReactNode, useEffect } from 'react'\nimport styled from 'styled-components'\n\ntype StyledContainerProps = { propName: string; className: string; [key: string]: any }\n\nconst elementPropNameMap: Record<string, string> = {\n  width: 'scrollWidth',\n  height: 'scrollHeight',\n}\n\nconst propNameFunc = ({ propName }: { propName: StyledContainerProps['propName']}) => propName\n\nconst StyledContainer: FC<StyledContainerProps> = memo(styled.div<StyledContainerProps>`\n  transform-origin: 0% 0%;\n  transition: opacity 0.2s ease-in-out, ${propNameFunc} 0.2s ease-in-out, max-${propNameFunc} 0.2s ease-in-out;\n  will-change: opacity, ${propNameFunc}, max-${propNameFunc};\n  overflow: hidden;\n  opacity: 0;\n\n  &.Collapsible__container__collapsed {\n    ${propNameFunc}: 0;\n    max-${propNameFunc}: 0;\n    opacity: 0;\n  }\n\n  &.Collapsible__container__expanded {\n    ${propNameFunc}: ${({ contentProp }: Partial<StyledContainerProps>) => `${contentProp}px`};\n    max-${propNameFunc}: ${({ contentProp }: Partial<StyledContainerProps>) => `${contentProp}px`};\n    opacity: 1;\n  }\n`)\n\nexport type ContainerProps = {\n  collapsed?: boolean\n  collapseHandler?: (collapsed: boolean) => void\n  children?: ReactNode\n  propName?: string\n  className?: string\n  css?: string\n}\nexport const ContainerS: FC<ContainerProps> = memo(({\n  collapsed = false, collapseHandler, children, propName = 'height', className, css, ...props\n}: ContainerProps) => {\n  const containerRef = useRef<HTMLDivElement>()\n  const [contentProp, setContentProp] = useState(0)\n\n  useEffect(() => {\n    collapseHandler?.(collapsed)\n  }, [collapseHandler, collapsed])\n\n  useEffect(() => {\n    if (containerRef?.current) {\n      setContentProp((containerRef.current as any)[elementPropNameMap[propName]])\n    }\n  }, [containerRef, propName])\n\n  let resolvedClassName = ''\n\n  if (collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n    resolvedClassName = 'Collapsible__container__collapsed'\n  }\n  if (!collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n    resolvedClassName = 'Collapsible__container__expanded'\n  }\n\n  return (\n    <StyledContainer\n      className={`${className} ${resolvedClassName}`}\n      ref={containerRef}\n      contentProp={contentProp}\n      propName={propName}\n      css={css}\n      {...props}\n    >\n      {children}\n    </StyledContainer>\n  )\n})\n\nContainerS.displayName = 'ContainerS'\n"],"names":["elementPropNameMap","width","height","propNameFunc","_ref","propName","StyledContainer","memo","styled","div","withConfig","displayName","componentId","_ref2","contentProp","concat","_ref3","_StyledStyledContainer","p","$_css","ContainerS","_ref4","_ref4$collapsed","collapsed","collapseHandler","children","_ref4$propName","className","css","props","_objectWithoutProperties","_excluded","containerRef","useRef","_useState","useState","_useState2","_slicedToArray","setContentProp","useEffect","current","resolvedClassName","React","createElement","_extends","ref"],"mappings":"2XAKMA,EAA6C,CACjDC,MAAO,cACPC,OAAQ,gBAGJC,EAAe,SAAHC,GAAc,OAAAA,EAARC,QAAsE,EAExFC,EAA4CC,EAAKC,EAAOC,IAAGC,WAAA,CAAAC,YAAA,yCAAAC,YAAA,eAAVJ,CAAU,CAAA,8DAAA,yBAAA,yCAAA,QAAA,kEAAA,UAAA,oDAAA,IAAA,QAAA,IAAA,gBAEvBL,EAAsCA,EACtDA,EAAqBA,EAKzCA,EACIA,EAKJA,GAAiB,SAAAU,GAAA,IAAGC,EAAWD,EAAXC,YAAW,MAAAC,GAAAA,OAAyCD,EAAW,KAAA,GAC/EX,GAAiB,SAAAa,GAAA,IAAGF,EAAWE,EAAXF,YAAW,MAAAC,GAAAA,OAAyCD,EAAW,KAAA,KAG3FG,EAAAT,EAAAF,GAAAI,WAAA,CAAAC,YAAA,gDAAAC,YAAA,eAAAJ,CAAA,CAAA,GAAA,KAAA,SAAAU,GAAA,OAAAA,EAAAC,KAAA,IAUWC,EAAiCb,GAAK,SAAAc,GAE7B,IAAAC,EAAAD,EADpBE,UAAAA,OAAY,IAAHD,GAAQA,EAAEE,EAAeH,EAAfG,gBAAiBC,EAAQJ,EAARI,SAAQC,EAAAL,EAAEhB,SAAAA,OAAW,IAAHqB,EAAG,SAAQA,EAAEC,EAASN,EAATM,UAAWC,EAAGP,EAAHO,IAAQC,EAAKC,EAAAT,EAAAU,GAErFC,EAAeC,IACrBC,EAAsCC,EAAS,GAAEC,EAAAC,EAAAH,EAAA,GAA1CpB,EAAWsB,EAAA,GAAEE,EAAcF,EAAA,GAElCG,GAAU,WACRf,SAAAA,EAAkBD,EACpB,GAAG,CAACC,EAAiBD,IAErBgB,GAAU,WACJP,SAAAA,EAAcQ,SAChBF,EAAgBN,EAAaQ,QAAgBxC,EAAmBK,IAEpE,GAAG,CAAC2B,EAAc3B,IAElB,IAAIoC,EAAoB,GASxB,OAPIlB,GAAaT,GAAbS,MAA4BT,IAC9B2B,EAAoB,sCAEjBlB,GAAaT,GAAd,MAA6BA,IAC/B2B,EAAoB,oCAIpBC,MAAAC,cAAA1B,EAAA2B,EAAA,CACEjB,UAAS,GAAAZ,OAAKY,OAASZ,OAAI0B,GAC3BI,IAAKb,EACLlB,YAAaA,EACbT,SAAUA,GAENwB,EAAK,CAAAV,MADJS,IAGJH,EAGP,IAEAL,EAAWT,YAAc"}

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

@@ -1,2 +1,2 @@
-import{inherits as e,createSuper as t,createClass as i,classCallCheck as n,objectSpread2 as s,slicedToArray as o,wrapNativeSuper as a}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import"../../../../../node_modules/core-js/modules/es.array.concat.js";import"../../../../../node_modules/core-js/modules/es.array.map.js";import"../../../../../node_modules/core-js/modules/es.object.entries.js";import r from"./icon.module.scss.js";import{ced as c,resolveAttributes as l}from"core/utils";var m,d=document.createElement("template");d.innerHTML='<span class="icon-base"></span>';var h=c("icon-base")(m=function(a){e(m,a);var c=t(m);function m(){var e;n(this,m);for(var t=arguments.length,i=new Array(t),a=0;a<t;a++)i[a]=arguments[a];return(e=c.call.apply(c,[this].concat(i))).content=void 0,e.mainElement=void 0,e.iconUrl=void 0,e.minWidth=void 0,e.minHeight=void 0,e.width=void 0,e.height=void 0,e.size=void 0,e.fontSize=void 0,e.color=void 0,e.render=function(){if(e.mainElement=e.mainElement||e.querySelector(".icon-base"),e.mainElement){e.classList.add(r["icon-base-parent"]),e.mainElement.classList.add(r["icon-base"]);var t=s(s(s({"--min-width":e.minWidth||e.size||e.width||"auto","--min-height":e.minHeight||e.size||e.height||"auto","--width":e.size||e.width,"--height":e.size||e.height},e.fontSize?{"font-size":e.fontSize||"unset"}:{}),e.iconUrl?{"--icon-url":"url(".concat(e.iconUrl,")")}:{}),e.iconUrl?{"--icon-color":e.color}:{"--icon-content-color":e.color});e.mainElement.innerHTML=e.iconUrl?"":e.content||"",e.mainElement.setAttribute("style",Object.entries(t).map((function(e){var t=o(e,2),i=t[0],n=t[1];return"".concat(i,": ").concat(n,";")})).join(" "))}},e}return i(m,[{key:"connectedCallback",value:function(){this.innerHTML&&(this.content=this.content||this.innerHTML||this.getAttribute("content")),this.innerHTML=d.innerHTML,l(this,m.observedAttributes),this.render()}},{key:"attributeChangedCallback",value:function(e,t,i){"className"===e&&(this.className=i||"",this.className&&(this.classList.remove(this.className),this.classList.add(this.className))),this[e]=i,this.render()}}],[{key:"observedAttributes",get:function(){return["iconUrl","minWidth","minHeight","width","height","size","fontSize","color","className"]}}]),m}(a(HTMLElement)))||m,u={IconBaseWC:h};export{u as IconBaseWC,h as default};
+import{inherits as e,createSuper as t,createClass as i,classCallCheck as n,objectSpread2 as s,slicedToArray as o,wrapNativeSuper as a}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import"../../../../../node_modules/core-js/modules/es.array.concat.js";import"../../../../../node_modules/core-js/modules/es.array.map.js";import"../../../../../node_modules/core-js/modules/es.object.entries.js";import{ced as r,resolveAttributes as c}from"../../../utils/webComponents/webComponent.utils.js";import l from"./icon.module.scss.js";var m,d=document.createElement("template");d.innerHTML='<span class="icon-base"></span>';var h=r("icon-base")(m=function(a){e(m,a);var r=t(m);function m(){var e;n(this,m);for(var t=arguments.length,i=new Array(t),a=0;a<t;a++)i[a]=arguments[a];return(e=r.call.apply(r,[this].concat(i))).content=void 0,e.mainElement=void 0,e.iconUrl=void 0,e.minWidth=void 0,e.minHeight=void 0,e.width=void 0,e.height=void 0,e.size=void 0,e.fontSize=void 0,e.color=void 0,e.render=function(){if(e.mainElement=e.mainElement||e.querySelector(".icon-base"),e.mainElement){e.classList.add(l["icon-base-parent"]),e.mainElement.classList.add(l["icon-base"]);var t=s(s(s({"--min-width":e.minWidth||e.size||e.width||"auto","--min-height":e.minHeight||e.size||e.height||"auto","--width":e.size||e.width,"--height":e.size||e.height},e.fontSize?{"font-size":e.fontSize||"unset"}:{}),e.iconUrl?{"--icon-url":"url(".concat(e.iconUrl,")")}:{}),e.iconUrl?{"--icon-color":e.color}:{"--icon-content-color":e.color});e.mainElement.innerHTML=e.iconUrl?"":e.content||"",e.mainElement.setAttribute("style",Object.entries(t).map((function(e){var t=o(e,2),i=t[0],n=t[1];return"".concat(i,": ").concat(n,";")})).join(" "))}},e}return i(m,[{key:"connectedCallback",value:function(){this.innerHTML&&(this.content=this.content||this.innerHTML||this.getAttribute("content")),this.innerHTML=d.innerHTML,c(this,m.observedAttributes),this.render()}},{key:"attributeChangedCallback",value:function(e,t,i){"className"===e&&(this.className=i||"",this.className&&(this.classList.remove(this.className),this.classList.add(this.className))),this[e]=i,this.render()}}],[{key:"observedAttributes",get:function(){return["iconUrl","minWidth","minHeight","width","height","size","fontSize","color","className"]}}]),m}(a(HTMLElement)))||m,u={IconBaseWC:h};export{u as IconBaseWC,h as default};
 //# sourceMappingURL=IconWC.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconWC.js","sources":["../../../../../../../../src/core/ui/components/icon/IconWC.ts"],"sourcesContent":["import classes from './icon.module.scss'\n\nimport { ced, resolveAttributes } from 'core/utils'\n\nconst template = document.createElement('template')\n\ntemplate.innerHTML = '<span class=\"icon-base\"></span>'\n\nexport type IconBaseWCType = {\n  iconUrl?: string\n  minWidth?: string\n  minHeight?: string\n  width?: string\n  height?: string\n  size?: string\n  fontSize?: string\n  color?: string\n  className?: string\n}\n\n@ced('icon-base')\nexport default class IconBase extends HTMLElement {\n  content: string | null\n\n  mainElement: HTMLElement\n\n  iconUrl?: string | null\n\n  minWidth?: string | null\n\n  minHeight?: string | null\n\n  width?: string | null\n\n  height?: string | null\n\n  size?: string | null\n\n  fontSize?: string | null\n\n  color?: string | null\n\n  static get observedAttributes() {\n    return ['iconUrl', 'minWidth', 'minHeight', 'width', 'height', 'size', 'fontSize', 'color', 'className']\n  }\n\n  connectedCallback() {\n    if (this.innerHTML) {\n      this.content = this.content || this.innerHTML || this.getAttribute('content')\n    }\n\n    this.innerHTML = template.innerHTML\n\n    resolveAttributes(this, IconBase.observedAttributes)\n\n    this.render()\n  }\n\n  attributeChangedCallback(attrName: string, oldVal: string | number | null, newVal: string | number | null) {\n    if (attrName === 'className') {\n      this.className = (newVal as string) || ''\n      if (this.className) {\n        this.classList.remove(this.className)\n        this.classList.add(this.className)\n      }\n    }\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    this[attrName] = newVal\n    this.render()\n  }\n\n  render = () => {\n    this.mainElement = this.mainElement || this.querySelector('.icon-base') as HTMLElement\n    if (!this.mainElement) {\n      return\n    }\n    this.classList.add(classes['icon-base-parent'])\n    this.mainElement.classList.add(classes['icon-base'])\n\n    const styles = {\n      '--min-width': this.minWidth || this.size || this.width || 'auto',\n      '--min-height': this.minHeight || this.size || this.height || 'auto',\n      '--width': this.size || this.width,\n      '--height': this.size || this.height,\n      ...(this.fontSize ? { 'font-size': this.fontSize || 'unset' } : {}),\n      ...(this.iconUrl ? { '--icon-url': `url(${this.iconUrl})` } : {}),\n      ...(this.iconUrl ? { '--icon-color': this.color } : { '--icon-content-color': this.color }),\n    }\n\n    this.mainElement.innerHTML = this.iconUrl ? '' : (this.content || '')\n\n    this.mainElement.setAttribute('style', Object.entries(styles).map(([key, value]) => `${key}: ${value};`).join(' '))\n  }\n}\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'icon-base': any\n    }\n  }\n}\n\nexport const IconBaseWC = {\n  IconBaseWC: IconBase,\n}\n"],"names":["template","document","createElement","innerHTML","IconBase","ced","_dec","_class","_HTMLElement","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","this","concat","content","mainElement","iconUrl","minWidth","minHeight","width","height","size","fontSize","color","render","querySelector","classList","add","classes","styles","_objectSpread","setAttribute","Object","entries","map","_ref","_ref2","_slicedToArray","key","value","join","_createClass","getAttribute","resolveAttributes","observedAttributes","attrName","oldVal","newVal","className","remove","get","_wrapNativeSuper","HTMLElement","IconBaseWC"],"mappings":"wfAIMA,EAAWC,SAASC,cAAc,YAExCF,EAASG,UAAY,kCAAiC,IAejCC,EADpBC,EAAI,YAAYC,CAAAC,WAAAC,GAAAC,EAAAL,EAAAI,GAAA,IAAAE,EAAAC,EAAAP,GAAA,SAAAA,IAAA,IAAAQ,EAAAC,OAAAT,GAAA,IAAA,IAAAU,EAAAC,UAAAC,OAAAC,EAAAC,IAAAA,MAAAJ,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAAF,EAAAE,GAAAJ,UAAAI,GAyEd,OAzEcP,EAAAF,EAAAU,KAAAC,MAAAX,EAAA,CAAAY,MAAAC,OAAAN,KAEfO,aAAO,EAAAZ,EAEPa,iBAAW,EAAAb,EAEXc,aAAO,EAAAd,EAEPe,cAAQ,EAAAf,EAERgB,eAAS,EAAAhB,EAETiB,WAAK,EAAAjB,EAELkB,YAAM,EAAAlB,EAENmB,UAAI,EAAAnB,EAEJoB,cAAQ,EAAApB,EAERqB,WAAK,EAAArB,EAgCLsB,OAAS,WAEP,GADAtB,EAAKa,YAAcb,EAAKa,aAAeb,EAAKuB,cAAc,cACrDvB,EAAKa,YAAV,CAGAb,EAAKwB,UAAUC,IAAIC,EAAQ,qBAC3B1B,EAAKa,YAAYW,UAAUC,IAAIC,EAAQ,cAEvC,IAAMC,EAAMC,EAAAA,EAAAA,EAAA,CACV,cAAe5B,EAAKe,UAAYf,EAAKmB,MAAQnB,EAAKiB,OAAS,OAC3D,eAAgBjB,EAAKgB,WAAahB,EAAKmB,MAAQnB,EAAKkB,QAAU,OAC9D,UAAWlB,EAAKmB,MAAQnB,EAAKiB,MAC7B,WAAYjB,EAAKmB,MAAQnB,EAAKkB,QAC1BlB,EAAKoB,SAAW,CAAE,YAAapB,EAAKoB,UAAY,SAAY,CAAE,GAC9DpB,EAAKc,QAAU,CAAE,aAAYH,OAAAA,OAASX,EAAKc,QAAO,MAAQ,CAAE,GAC5Dd,EAAKc,QAAU,CAAE,eAAgBd,EAAKqB,OAAU,CAAE,uBAAwBrB,EAAKqB,QAGrFrB,EAAKa,YAAYtB,UAAYS,EAAKc,QAAU,GAAMd,EAAKY,SAAW,GAElEZ,EAAKa,YAAYgB,aAAa,QAASC,OAAOC,QAAQJ,GAAQK,KAAI,SAAAC,GAAA,IAAAC,EAAAC,EAAAF,EAAA,GAAEG,EAAGF,EAAA,GAAEG,EAAKH,EAAA,GAAA,MAAA,GAAAvB,OAASyB,EAAGzB,MAAAA,OAAK0B,EAAK,IAAA,IAAKC,KAAK,KAhB9G,GAiBDtC,CAAA,CAjDA,OAiDAuC,EAAA/C,EAAA,CAAA,CAAA4C,IAAA,oBAAAC,MA/CD,WACM3B,KAAKnB,YACPmB,KAAKE,QAAUF,KAAKE,SAAWF,KAAKnB,WAAamB,KAAK8B,aAAa,YAGrE9B,KAAKnB,UAAYH,EAASG,UAE1BkD,EAAkB/B,KAAMlB,EAASkD,oBAEjChC,KAAKY,QACP,GAAC,CAAAc,IAAA,2BAAAC,MAED,SAAyBM,EAAkBC,EAAgCC,GACxD,cAAbF,IACFjC,KAAKoC,UAAaD,GAAqB,GACnCnC,KAAKoC,YACPpC,KAAKc,UAAUuB,OAAOrC,KAAKoC,WAC3BpC,KAAKc,UAAUC,IAAIf,KAAKoC,aAK5BpC,KAAKiC,GAAYE,EACjBnC,KAAKY,QACP,IAAC,CAAA,CAAAc,IAAA,qBAAAY,IA5BD,WACE,MAAO,CAAC,UAAW,WAAY,YAAa,QAAS,SAAU,OAAQ,WAAY,QAAS,YAC9F,KAACxD,CAAA,EAAAyD,EAvBmCC,gBAAWvD,EAoFpCwD,EAAa,CACxBA,WAAY3D"}
+{"version":3,"file":"IconWC.js","sources":["../../../../../../../../src/core/ui/components/icon/IconWC.ts"],"sourcesContent":["import { ced, resolveAttributes } from '../../../utils/webComponents/webComponent.utils'\n\nimport classes from './icon.module.scss'\n\nconst template = document.createElement('template')\n\ntemplate.innerHTML = '<span class=\"icon-base\"></span>'\n\nexport type IconBaseWCType = {\n  iconUrl?: string\n  minWidth?: string\n  minHeight?: string\n  width?: string\n  height?: string\n  size?: string\n  fontSize?: string\n  color?: string\n  className?: string\n}\n\n@ced('icon-base')\nexport default class IconBase extends HTMLElement {\n  content: string | null\n\n  mainElement: HTMLElement\n\n  iconUrl?: string | null\n\n  minWidth?: string | null\n\n  minHeight?: string | null\n\n  width?: string | null\n\n  height?: string | null\n\n  size?: string | null\n\n  fontSize?: string | null\n\n  color?: string | null\n\n  static get observedAttributes() {\n    return ['iconUrl', 'minWidth', 'minHeight', 'width', 'height', 'size', 'fontSize', 'color', 'className']\n  }\n\n  connectedCallback() {\n    if (this.innerHTML) {\n      this.content = this.content || this.innerHTML || this.getAttribute('content')\n    }\n\n    this.innerHTML = template.innerHTML\n\n    resolveAttributes(this, IconBase.observedAttributes)\n\n    this.render()\n  }\n\n  attributeChangedCallback(attrName: string, oldVal: string | number | null, newVal: string | number | null) {\n    if (attrName === 'className') {\n      this.className = (newVal as string) || ''\n      if (this.className) {\n        this.classList.remove(this.className)\n        this.classList.add(this.className)\n      }\n    }\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    this[attrName] = newVal\n    this.render()\n  }\n\n  render = () => {\n    this.mainElement = this.mainElement || this.querySelector('.icon-base') as HTMLElement\n    if (!this.mainElement) {\n      return\n    }\n    this.classList.add(classes['icon-base-parent'])\n    this.mainElement.classList.add(classes['icon-base'])\n\n    const styles = {\n      '--min-width': this.minWidth || this.size || this.width || 'auto',\n      '--min-height': this.minHeight || this.size || this.height || 'auto',\n      '--width': this.size || this.width,\n      '--height': this.size || this.height,\n      ...(this.fontSize ? { 'font-size': this.fontSize || 'unset' } : {}),\n      ...(this.iconUrl ? { '--icon-url': `url(${this.iconUrl})` } : {}),\n      ...(this.iconUrl ? { '--icon-color': this.color } : { '--icon-content-color': this.color }),\n    }\n\n    this.mainElement.innerHTML = this.iconUrl ? '' : (this.content || '')\n\n    this.mainElement.setAttribute('style', Object.entries(styles).map(([key, value]) => `${key}: ${value};`).join(' '))\n  }\n}\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'icon-base': any\n    }\n  }\n}\n\nexport const IconBaseWC = {\n  IconBaseWC: IconBase,\n}\n"],"names":["template","document","createElement","innerHTML","IconBase","ced","_dec","_class","_HTMLElement","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","this","concat","content","mainElement","iconUrl","minWidth","minHeight","width","height","size","fontSize","color","render","querySelector","classList","add","classes","styles","_objectSpread","setAttribute","Object","entries","map","_ref","_ref2","_slicedToArray","key","value","join","_createClass","getAttribute","resolveAttributes","observedAttributes","attrName","oldVal","newVal","className","remove","get","_wrapNativeSuper","HTMLElement","IconBaseWC"],"mappings":"giBAIMA,EAAWC,SAASC,cAAc,YAExCF,EAASG,UAAY,kCAAiC,IAejCC,EADpBC,EAAI,YAAYC,CAAAC,WAAAC,GAAAC,EAAAL,EAAAI,GAAA,IAAAE,EAAAC,EAAAP,GAAA,SAAAA,IAAA,IAAAQ,EAAAC,OAAAT,GAAA,IAAA,IAAAU,EAAAC,UAAAC,OAAAC,EAAAC,IAAAA,MAAAJ,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAAF,EAAAE,GAAAJ,UAAAI,GAyEd,OAzEcP,EAAAF,EAAAU,KAAAC,MAAAX,EAAA,CAAAY,MAAAC,OAAAN,KAEfO,aAAO,EAAAZ,EAEPa,iBAAW,EAAAb,EAEXc,aAAO,EAAAd,EAEPe,cAAQ,EAAAf,EAERgB,eAAS,EAAAhB,EAETiB,WAAK,EAAAjB,EAELkB,YAAM,EAAAlB,EAENmB,UAAI,EAAAnB,EAEJoB,cAAQ,EAAApB,EAERqB,WAAK,EAAArB,EAgCLsB,OAAS,WAEP,GADAtB,EAAKa,YAAcb,EAAKa,aAAeb,EAAKuB,cAAc,cACrDvB,EAAKa,YAAV,CAGAb,EAAKwB,UAAUC,IAAIC,EAAQ,qBAC3B1B,EAAKa,YAAYW,UAAUC,IAAIC,EAAQ,cAEvC,IAAMC,EAAMC,EAAAA,EAAAA,EAAA,CACV,cAAe5B,EAAKe,UAAYf,EAAKmB,MAAQnB,EAAKiB,OAAS,OAC3D,eAAgBjB,EAAKgB,WAAahB,EAAKmB,MAAQnB,EAAKkB,QAAU,OAC9D,UAAWlB,EAAKmB,MAAQnB,EAAKiB,MAC7B,WAAYjB,EAAKmB,MAAQnB,EAAKkB,QAC1BlB,EAAKoB,SAAW,CAAE,YAAapB,EAAKoB,UAAY,SAAY,CAAE,GAC9DpB,EAAKc,QAAU,CAAE,aAAYH,OAAAA,OAASX,EAAKc,QAAO,MAAQ,CAAE,GAC5Dd,EAAKc,QAAU,CAAE,eAAgBd,EAAKqB,OAAU,CAAE,uBAAwBrB,EAAKqB,QAGrFrB,EAAKa,YAAYtB,UAAYS,EAAKc,QAAU,GAAMd,EAAKY,SAAW,GAElEZ,EAAKa,YAAYgB,aAAa,QAASC,OAAOC,QAAQJ,GAAQK,KAAI,SAAAC,GAAA,IAAAC,EAAAC,EAAAF,EAAA,GAAEG,EAAGF,EAAA,GAAEG,EAAKH,EAAA,GAAA,MAAA,GAAAvB,OAASyB,EAAGzB,MAAAA,OAAK0B,EAAK,IAAA,IAAKC,KAAK,KAhB9G,GAiBDtC,CAAA,CAjDA,OAiDAuC,EAAA/C,EAAA,CAAA,CAAA4C,IAAA,oBAAAC,MA/CD,WACM3B,KAAKnB,YACPmB,KAAKE,QAAUF,KAAKE,SAAWF,KAAKnB,WAAamB,KAAK8B,aAAa,YAGrE9B,KAAKnB,UAAYH,EAASG,UAE1BkD,EAAkB/B,KAAMlB,EAASkD,oBAEjChC,KAAKY,QACP,GAAC,CAAAc,IAAA,2BAAAC,MAED,SAAyBM,EAAkBC,EAAgCC,GACxD,cAAbF,IACFjC,KAAKoC,UAAaD,GAAqB,GACnCnC,KAAKoC,YACPpC,KAAKc,UAAUuB,OAAOrC,KAAKoC,WAC3BpC,KAAKc,UAAUC,IAAIf,KAAKoC,aAK5BpC,KAAKiC,GAAYE,EACjBnC,KAAKY,QACP,IAAC,CAAA,CAAAc,IAAA,qBAAAY,IA5BD,WACE,MAAO,CAAC,UAAW,WAAY,YAAa,QAAS,SAAU,OAAQ,WAAY,QAAS,YAC9F,KAACxD,CAAA,EAAAyD,EAvBmCC,gBAAWvD,EAoFpCwD,EAAa,CACxBA,WAAY3D"}

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

@@ -1,2 +1,2 @@
-export{calculateColors,calculatePercColor,convertHex,convertRGB,defaultFontSize,pxToRem,resolveStyleValue,setDefaultFontSize,toHex}from"./utils/style.js";export{FBox}from"./components/container/FBox.js";export{Flex,FlexTight,FlexTightStyled,FlexWrapper}from"./components/container/Flex.js";export{Placeholder}from"./components/container/Placeholder.js";export{Container}from"./components/container/Container.js";export{ResizableContainer}from"./components/container/ResizableContainer.js";export{Field,FieldWrapper,Select,setIconColor,setIconComponent}from"./components/field/Field.js";export{DividerHorizontal,DividerLine,DividerVertical}from"./components/dividers/DividerLine.js";export{IconBase}from"./components/icon/IconBase.js";export{Icon}from"./components/icon/Icon.js";export{IconBaseWC}from"./components/icon/IconWC.js";
+export{calculateColors,calculatePercColor,convertHex,convertRGB,defaultFontSize,pxToRem,resolveStyleValue,setDefaultFontSize,toHex}from"./utils/style.js";export{FBox}from"./components/container/FBox.js";export{Flex,FlexTight,FlexTightStyled,FlexWrapper}from"./components/container/Flex.js";export{Placeholder}from"./components/container/Placeholder.js";export{ContainerS}from"./components/container/CollapsibleContainerS.js";export{CollapsibleContainer}from"./components/container/CollapsibleContainer.js";export{ResizableContainer}from"./components/container/ResizableContainer.js";export{Field,FieldWrapper,Select,setIconColor,setIconComponent}from"./components/field/Field.js";export{DividerHorizontal,DividerLine,DividerVertical}from"./components/dividers/DividerLine.js";export{IconBase}from"./components/icon/IconBase.js";export{Icon}from"./components/icon/Icon.js";export{IconBaseWC}from"./components/icon/IconWC.js";
 //# sourceMappingURL=index.js.map

package/dist/ui/index.css

@@ -22,6 +22,39 @@
   min-height: 0;
   border-radius: initial;
 }
+.CollapsibleContainer-module_collapsible-container__u0Jmm {
+  transform-origin: 0% 0%;
+  opacity: 0;
+  overflow: clip;
+}
+.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_vertical__w7MVN {
+  transition: opacity 0.2s ease-in-out, height 0.2s ease-in-out, max-height 0.2s ease-in-out;
+  will-change: opacity, height, max-height;
+}
+.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_vertical__w7MVN.CollapsibleContainer-module_collapsed__q8fs8 {
+  height: 0;
+  max-height: 0;
+  opacity: 0;
+}
+.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_vertical__w7MVN.CollapsibleContainer-module_expanded__O6Vh8 {
+  height: var(--prop-value);
+  max-height: var(--prop-value);
+  opacity: 1;
+}
+.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_horizontal__QJWI- {
+  transition: opacity 0.2s ease-in-out, width 0.2s ease-in-out, max-width 0.2s ease-in-out;
+  will-change: opacity, width, max-width;
+}
+.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_horizontal__QJWI-.CollapsibleContainer-module_collapsed__q8fs8 {
+  width: 0;
+  max-width: 0;
+  opacity: 0;
+}
+.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_horizontal__QJWI-.CollapsibleContainer-module_expanded__O6Vh8 {
+  width: var(--prop-value);
+  max-width: var(--prop-value);
+  opacity: 1;
+}
 .divider-module_divider-line__6CesR {
   position: relative;
   display: block;

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../../_virtual/_rollupPluginBabelHelpers.js");require("../../../../../node_modules/core-js/modules/es.array.concat.js");var l=require("react"),r=require("./CollapsibleContainer.module.scss.js"),a=["collapsed","collapseHandler","children","horizontal","className"],o={width:"scrollWidth",height:"scrollHeight"},t=l.memo((function(t){var n=t.collapsed,i=void 0!==n&&n,s=t.collapseHandler,c=t.children,u=t.horizontal,d=void 0!==u&&u,p=t.className,h=void 0===p?"":p,m=e.objectWithoutProperties(t,a),v=l.useRef(null),f=l.useState(0),b=e.slicedToArray(f,2),j=b[0],x=b[1],g=!d;l.useEffect((function(){null==s||s(i)}),[s,i]),l.useLayoutEffect((function(){if(null!=v&&v.current){var e=g?"height":"width";x(v.current[o[e]])}}),[v,g]);var y=l.useMemo((function(){return e.objectSpread2({"--prop-name":g?"height":"width","--prop-max-name":g?"max-height":"max-width","--prop-value":"".concat(j,"px")},m)}),[g,m,j]),C=l.useMemo((function(){var e=[g?r.vertical:r.horizontal];return i&&j&&null!=j&&e.push(r.collapsed),!i&&j&&null!=j&&e.push(r.expanded),e.join(" ")}),[i,j,g]);return React.createElement("div",{className:"".concat(r["collapsible-container"]," ").concat(C," ").concat(h," "),ref:v,style:y},c)}));t.displayName="CollapsibleContainer",exports.CollapsibleContainer=t;
+//# sourceMappingURL=CollapsibleContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleContainer.js","sources":["../../../../../../../src/core/ui/components/container/CollapsibleContainer.tsx"],"sourcesContent":["import { FC, useRef, useState, memo, ReactNode, useEffect, useLayoutEffect, useMemo, CSSProperties } from 'react'\n\nimport classes from './CollapsibleContainer.module.scss'\n\nconst elementPropNameMap: Record<string, string> = {\n  width: 'scrollWidth',\n  height: 'scrollHeight',\n}\n\nexport type CollapsibleContainerProps = {\n  collapsed?: boolean\n  collapseHandler?: (collapsed: boolean) => void\n  children?: ReactNode\n  className?: string\n  horizontal?: boolean\n}\nexport const CollapsibleContainer: FC<CollapsibleContainerProps> = memo(({\n  collapsed = false, collapseHandler, children, horizontal = false, className = '', ...style\n}: CollapsibleContainerProps) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [contentProp, setContentProp] = useState(0)\n\n  const vertical = !horizontal\n\n  useEffect(() => {\n    collapseHandler?.(collapsed)\n  }, [collapseHandler, collapsed])\n\n  useLayoutEffect(() => {\n    if (containerRef?.current) {\n      const propName = vertical ? 'height' : 'width'\n\n      setContentProp((containerRef.current as any)[elementPropNameMap[propName]])\n    }\n  }, [containerRef, vertical])\n\n  const styleProps: CSSProperties = useMemo(() => ({\n    '--prop-name': vertical ? 'height' : 'width',\n    '--prop-max-name': vertical ? 'max-height' : 'max-width',\n    '--prop-value': `${contentProp}px`,\n    ...style,\n  } as CSSProperties), [vertical, style, contentProp])\n\n  const classNames = useMemo(() => {\n    const classNames = [vertical ? classes.vertical : classes.horizontal]\n\n    if (collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n      classNames.push(classes.collapsed)\n    }\n    if (!collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n      classNames.push(classes.expanded)\n    }\n    return classNames.join(' ')\n  }, [collapsed, contentProp, vertical])\n\n  return (\n    <div\n      className={`${classes['collapsible-container']} ${classNames} ${className} `}\n      ref={containerRef}\n      style={styleProps}\n    >\n      {children}\n    </div>\n  )\n})\n\nCollapsibleContainer.displayName = 'CollapsibleContainer'\n"],"names":["elementPropNameMap","width","height","CollapsibleContainer","memo","_ref","_ref$collapsed","collapsed","collapseHandler","children","_ref$horizontal","horizontal","_ref$className","className","style","_objectWithoutProperties","objectWithoutProperties","_excluded","containerRef","useRef","_useState","useState","_useState2","_slicedToArray","contentProp","setContentProp","vertical","useEffect","useLayoutEffect","current","propName","styleProps","useMemo","_objectSpread","concat","classNames","classes","push","expanded","join","React","createElement","ref","displayName"],"mappings":"oWAIMA,EAA6C,CACjDC,MAAO,cACPC,OAAQ,gBAUGC,EAAsDC,EAAAA,MAAK,SAAAC,GAEvC,IAAAC,EAAAD,EAD/BE,UAAAA,OAAY,IAAHD,GAAQA,EAAEE,EAAeH,EAAfG,gBAAiBC,EAAQJ,EAARI,SAAQC,EAAAL,EAAEM,WAAAA,OAAa,IAAHD,GAAQA,EAAAE,EAAAP,EAAEQ,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EAAKE,EAAKC,EAAAC,wBAAAX,EAAAY,GAEpFC,EAAeC,SAAuB,MAC5CC,EAAsCC,EAAQA,SAAC,GAAEC,EAAAC,EAAAA,cAAAH,EAAA,GAA1CI,EAAWF,EAAA,GAAEG,EAAcH,EAAA,GAE5BI,GAAYf,EAElBgB,EAAAA,WAAU,WACRnB,SAAAA,EAAkBD,EACpB,GAAG,CAACC,EAAiBD,IAErBqB,EAAAA,iBAAgB,WACd,GAAIV,SAAAA,EAAcW,QAAS,CACzB,IAAMC,EAAWJ,EAAW,SAAW,QAEvCD,EAAgBP,EAAaW,QAAgB7B,EAAmB8B,IAClE,CACF,GAAG,CAACZ,EAAcQ,IAElB,IAAMK,EAA4BC,EAAAA,SAAQ,WAAA,OAAAC,gBAAA,CACxC,cAAeP,EAAW,SAAW,QACrC,kBAAmBA,EAAW,aAAe,YAC7C,eAAc,GAAAQ,OAAKV,EAAW,OAC3BV,EACc,GAAE,CAACY,EAAUZ,EAAOU,IAEjCW,EAAaH,EAAAA,SAAQ,WACzB,IAAMG,EAAa,CAACT,EAAWU,EAAQV,SAAWU,EAAQzB,YAQ1D,OANIJ,GAAaiB,GAAbjB,MAA4BiB,GAC9BW,EAAWE,KAAKD,EAAQ7B,YAErBA,GAAaiB,GAAd,MAA6BA,GAC/BW,EAAWE,KAAKD,EAAQE,UAEnBH,EAAWI,KAAK,IACxB,GAAE,CAAChC,EAAWiB,EAAaE,IAE5B,OACEc,MAAAC,cAAA,MAAA,CACE5B,UAASqB,GAAAA,OAAKE,EAAQ,yBAAwBF,KAAAA,OAAIC,EAAU,KAAAD,OAAIrB,EAAa,KAC7E6B,IAAKxB,EACLJ,MAAOiB,GAENtB,EAGP,IAEAN,EAAqBwC,YAAc"}

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

@@ -0,0 +1,2 @@
+"use strict";module.exports={"collapsible-container":"CollapsibleContainer-module_collapsible-container__u0Jmm",vertical:"CollapsibleContainer-module_vertical__w7MVN",collapsed:"CollapsibleContainer-module_collapsed__q8fs8",expanded:"CollapsibleContainer-module_expanded__O6Vh8",horizontal:"CollapsibleContainer-module_horizontal__QJWI-"};
+//# sourceMappingURL=CollapsibleContainer.module.scss.js.map

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

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

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../../_virtual/_rollupPluginBabelHelpers.js"),n=require("styled-components");require("../../../../../node_modules/core-js/modules/es.array.concat.js");var t=require("react");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(n),l=["collapsed","collapseHandler","children","propName","className","css"],r={width:"scrollWidth",height:"scrollHeight"},i=function(e){return e.propName},c=t.memo(a.default.div.withConfig({displayName:"CollapsibleContainerS__StyledContainer",componentId:"sc-fj3lnl-0"})(["transform-origin:0% 0%;transition:opacity 0.2s ease-in-out,"," 0.2s ease-in-out,max-"," 0.2s ease-in-out;will-change:opacity,",",max-",";overflow:hidden;opacity:0;&.Collapsible__container__collapsed{",":0;max-",":0;opacity:0;}&.Collapsible__container__expanded{",":",";max-",":",";opacity:1;}"],i,i,i,i,i,i,i,(function(e){var n=e.contentProp;return"".concat(n,"px")}),i,(function(e){var n=e.contentProp;return"".concat(n,"px")}))),s=a.default(c).withConfig({displayName:"CollapsibleContainerS___StyledStyledContainer",componentId:"sc-fj3lnl-1"})(["",""],(function(e){return e.$_css})),p=t.memo((function(n){var o=n.collapsed,a=void 0!==o&&o,i=n.collapseHandler,c=n.children,p=n.propName,u=void 0===p?"height":p,d=n.className,_=n.css,f=e.objectWithoutProperties(n,l),m=t.useRef(),y=t.useState(0),h=e.slicedToArray(y,2),C=h[0],v=h[1];t.useEffect((function(){null==i||i(a)}),[i,a]),t.useEffect((function(){null!=m&&m.current&&v(m.current[r[u]])}),[m,u]);var x="";return a&&C&&null!=C&&(x="Collapsible__container__collapsed"),!a&&C&&null!=C&&(x="Collapsible__container__expanded"),React.createElement(s,e.extends({className:"".concat(d," ").concat(x),ref:m,contentProp:C,propName:u},f,{$_css:_}),c)}));p.displayName="ContainerS",exports.ContainerS=p;
+//# sourceMappingURL=CollapsibleContainerS.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleContainerS.js","sources":["../../../../../../../src/core/ui/components/container/CollapsibleContainerS.tsx"],"sourcesContent":["import { FC, useRef, useState, memo, ReactNode, useEffect } from 'react'\nimport styled from 'styled-components'\n\ntype StyledContainerProps = { propName: string; className: string; [key: string]: any }\n\nconst elementPropNameMap: Record<string, string> = {\n  width: 'scrollWidth',\n  height: 'scrollHeight',\n}\n\nconst propNameFunc = ({ propName }: { propName: StyledContainerProps['propName']}) => propName\n\nconst StyledContainer: FC<StyledContainerProps> = memo(styled.div<StyledContainerProps>`\n  transform-origin: 0% 0%;\n  transition: opacity 0.2s ease-in-out, ${propNameFunc} 0.2s ease-in-out, max-${propNameFunc} 0.2s ease-in-out;\n  will-change: opacity, ${propNameFunc}, max-${propNameFunc};\n  overflow: hidden;\n  opacity: 0;\n\n  &.Collapsible__container__collapsed {\n    ${propNameFunc}: 0;\n    max-${propNameFunc}: 0;\n    opacity: 0;\n  }\n\n  &.Collapsible__container__expanded {\n    ${propNameFunc}: ${({ contentProp }: Partial<StyledContainerProps>) => `${contentProp}px`};\n    max-${propNameFunc}: ${({ contentProp }: Partial<StyledContainerProps>) => `${contentProp}px`};\n    opacity: 1;\n  }\n`)\n\nexport type ContainerProps = {\n  collapsed?: boolean\n  collapseHandler?: (collapsed: boolean) => void\n  children?: ReactNode\n  propName?: string\n  className?: string\n  css?: string\n}\nexport const ContainerS: FC<ContainerProps> = memo(({\n  collapsed = false, collapseHandler, children, propName = 'height', className, css, ...props\n}: ContainerProps) => {\n  const containerRef = useRef<HTMLDivElement>()\n  const [contentProp, setContentProp] = useState(0)\n\n  useEffect(() => {\n    collapseHandler?.(collapsed)\n  }, [collapseHandler, collapsed])\n\n  useEffect(() => {\n    if (containerRef?.current) {\n      setContentProp((containerRef.current as any)[elementPropNameMap[propName]])\n    }\n  }, [containerRef, propName])\n\n  let resolvedClassName = ''\n\n  if (collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n    resolvedClassName = 'Collapsible__container__collapsed'\n  }\n  if (!collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n    resolvedClassName = 'Collapsible__container__expanded'\n  }\n\n  return (\n    <StyledContainer\n      className={`${className} ${resolvedClassName}`}\n      ref={containerRef}\n      contentProp={contentProp}\n      propName={propName}\n      css={css}\n      {...props}\n    >\n      {children}\n    </StyledContainer>\n  )\n})\n\nContainerS.displayName = 'ContainerS'\n"],"names":["elementPropNameMap","width","height","propNameFunc","_ref","propName","StyledContainer","memo","styled","div","withConfig","displayName","componentId","_ref2","contentProp","concat","_ref3","_StyledStyledContainer","p","$_css","ContainerS","_ref4","_ref4$collapsed","collapsed","collapseHandler","children","_ref4$propName","className","css","props","_objectWithoutProperties","objectWithoutProperties","_excluded","containerRef","useRef","_useState","useState","_useState2","_slicedToArray","setContentProp","useEffect","current","resolvedClassName","React","createElement","_extends","ref"],"mappings":"uaAKMA,EAA6C,CACjDC,MAAO,cACPC,OAAQ,gBAGJC,EAAe,SAAHC,GAAc,OAAAA,EAARC,QAAsE,EAExFC,EAA4CC,EAAIA,KAACC,UAAOC,IAAGC,WAAA,CAAAC,YAAA,yCAAAC,YAAA,eAAVJ,CAAU,CAAA,8DAAA,yBAAA,yCAAA,QAAA,kEAAA,UAAA,oDAAA,IAAA,QAAA,IAAA,gBAEvBL,EAAsCA,EACtDA,EAAqBA,EAKzCA,EACIA,EAKJA,GAAiB,SAAAU,GAAA,IAAGC,EAAWD,EAAXC,YAAW,MAAAC,GAAAA,OAAyCD,EAAW,KAAA,GAC/EX,GAAiB,SAAAa,GAAA,IAAGF,EAAWE,EAAXF,YAAW,MAAAC,GAAAA,OAAyCD,EAAW,KAAA,KAG3FG,EAAAT,EAAA,QAAAF,GAAAI,WAAA,CAAAC,YAAA,gDAAAC,YAAA,eAAAJ,CAAA,CAAA,GAAA,KAAA,SAAAU,GAAA,OAAAA,EAAAC,KAAA,IAUWC,EAAiCb,EAAAA,MAAK,SAAAc,GAE7B,IAAAC,EAAAD,EADpBE,UAAAA,OAAY,IAAHD,GAAQA,EAAEE,EAAeH,EAAfG,gBAAiBC,EAAQJ,EAARI,SAAQC,EAAAL,EAAEhB,SAAAA,OAAW,IAAHqB,EAAG,SAAQA,EAAEC,EAASN,EAATM,UAAWC,EAAGP,EAAHO,IAAQC,EAAKC,EAAAC,wBAAAV,EAAAW,GAErFC,EAAeC,EAAAA,SACrBC,EAAsCC,EAAQA,SAAC,GAAEC,EAAAC,EAAAA,cAAAH,EAAA,GAA1CrB,EAAWuB,EAAA,GAAEE,EAAcF,EAAA,GAElCG,EAAAA,WAAU,WACRhB,SAAAA,EAAkBD,EACpB,GAAG,CAACC,EAAiBD,IAErBiB,EAAAA,WAAU,WACJP,SAAAA,EAAcQ,SAChBF,EAAgBN,EAAaQ,QAAgBzC,EAAmBK,IAEpE,GAAG,CAAC4B,EAAc5B,IAElB,IAAIqC,EAAoB,GASxB,OAPInB,GAAaT,GAAbS,MAA4BT,IAC9B4B,EAAoB,sCAEjBnB,GAAaT,GAAd,MAA6BA,IAC/B4B,EAAoB,oCAIpBC,MAAAC,cAAA3B,EAAA4B,UAAA,CACElB,UAAS,GAAAZ,OAAKY,OAASZ,OAAI2B,GAC3BI,IAAKb,EACLnB,YAAaA,EACbT,SAAUA,GAENwB,EAAK,CAAAV,MADJS,IAGJH,EAGP,IAEAL,EAAWT,YAAc"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../../_virtual/_rollupPluginBabelHelpers.js");require("../../../../../node_modules/core-js/modules/es.array.concat.js"),require("../../../../../node_modules/core-js/modules/es.array.map.js"),require("../../../../../node_modules/core-js/modules/es.object.entries.js");var t,i=require("./icon.module.scss.js"),n=require("core/utils"),s=document.createElement("template");s.innerHTML='<span class="icon-base"></span>';var r=n.ced("icon-base")(t=function(t){e.inherits(o,t);var r=e.createSuper(o);function o(){var t;e.classCallCheck(this,o);for(var n=arguments.length,s=new Array(n),a=0;a<n;a++)s[a]=arguments[a];return(t=r.call.apply(r,[this].concat(s))).content=void 0,t.mainElement=void 0,t.iconUrl=void 0,t.minWidth=void 0,t.minHeight=void 0,t.width=void 0,t.height=void 0,t.size=void 0,t.fontSize=void 0,t.color=void 0,t.render=function(){if(t.mainElement=t.mainElement||t.querySelector(".icon-base"),t.mainElement){t.classList.add(i["icon-base-parent"]),t.mainElement.classList.add(i["icon-base"]);var n=e.objectSpread2(e.objectSpread2(e.objectSpread2({"--min-width":t.minWidth||t.size||t.width||"auto","--min-height":t.minHeight||t.size||t.height||"auto","--width":t.size||t.width,"--height":t.size||t.height},t.fontSize?{"font-size":t.fontSize||"unset"}:{}),t.iconUrl?{"--icon-url":"url(".concat(t.iconUrl,")")}:{}),t.iconUrl?{"--icon-color":t.color}:{"--icon-content-color":t.color});t.mainElement.innerHTML=t.iconUrl?"":t.content||"",t.mainElement.setAttribute("style",Object.entries(n).map((function(t){var i=e.slicedToArray(t,2),n=i[0],s=i[1];return"".concat(n,": ").concat(s,";")})).join(" "))}},t}return e.createClass(o,[{key:"connectedCallback",value:function(){this.innerHTML&&(this.content=this.content||this.innerHTML||this.getAttribute("content")),this.innerHTML=s.innerHTML,n.resolveAttributes(this,o.observedAttributes),this.render()}},{key:"attributeChangedCallback",value:function(e,t,i){"className"===e&&(this.className=i||"",this.className&&(this.classList.remove(this.className),this.classList.add(this.className))),this[e]=i,this.render()}}],[{key:"observedAttributes",get:function(){return["iconUrl","minWidth","minHeight","width","height","size","fontSize","color","className"]}}]),o}(e.wrapNativeSuper(HTMLElement)))||t,o={IconBaseWC:r};exports.IconBaseWC=o,exports.default=r;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../../_virtual/_rollupPluginBabelHelpers.js");require("../../../../../node_modules/core-js/modules/es.array.concat.js"),require("../../../../../node_modules/core-js/modules/es.array.map.js"),require("../../../../../node_modules/core-js/modules/es.object.entries.js");var t,i=require("../../../utils/webComponents/webComponent.utils.js"),n=require("./icon.module.scss.js"),s=document.createElement("template");s.innerHTML='<span class="icon-base"></span>';var o=i.ced("icon-base")(t=function(t){e.inherits(r,t);var o=e.createSuper(r);function r(){var t;e.classCallCheck(this,r);for(var i=arguments.length,s=new Array(i),a=0;a<i;a++)s[a]=arguments[a];return(t=o.call.apply(o,[this].concat(s))).content=void 0,t.mainElement=void 0,t.iconUrl=void 0,t.minWidth=void 0,t.minHeight=void 0,t.width=void 0,t.height=void 0,t.size=void 0,t.fontSize=void 0,t.color=void 0,t.render=function(){if(t.mainElement=t.mainElement||t.querySelector(".icon-base"),t.mainElement){t.classList.add(n["icon-base-parent"]),t.mainElement.classList.add(n["icon-base"]);var i=e.objectSpread2(e.objectSpread2(e.objectSpread2({"--min-width":t.minWidth||t.size||t.width||"auto","--min-height":t.minHeight||t.size||t.height||"auto","--width":t.size||t.width,"--height":t.size||t.height},t.fontSize?{"font-size":t.fontSize||"unset"}:{}),t.iconUrl?{"--icon-url":"url(".concat(t.iconUrl,")")}:{}),t.iconUrl?{"--icon-color":t.color}:{"--icon-content-color":t.color});t.mainElement.innerHTML=t.iconUrl?"":t.content||"",t.mainElement.setAttribute("style",Object.entries(i).map((function(t){var i=e.slicedToArray(t,2),n=i[0],s=i[1];return"".concat(n,": ").concat(s,";")})).join(" "))}},t}return e.createClass(r,[{key:"connectedCallback",value:function(){this.innerHTML&&(this.content=this.content||this.innerHTML||this.getAttribute("content")),this.innerHTML=s.innerHTML,i.resolveAttributes(this,r.observedAttributes),this.render()}},{key:"attributeChangedCallback",value:function(e,t,i){"className"===e&&(this.className=i||"",this.className&&(this.classList.remove(this.className),this.classList.add(this.className))),this[e]=i,this.render()}}],[{key:"observedAttributes",get:function(){return["iconUrl","minWidth","minHeight","width","height","size","fontSize","color","className"]}}]),r}(e.wrapNativeSuper(HTMLElement)))||t,r={IconBaseWC:o};exports.IconBaseWC=r,exports.default=o;
 //# sourceMappingURL=IconWC.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconWC.js","sources":["../../../../../../../src/core/ui/components/icon/IconWC.ts"],"sourcesContent":["import classes from './icon.module.scss'\n\nimport { ced, resolveAttributes } from 'core/utils'\n\nconst template = document.createElement('template')\n\ntemplate.innerHTML = '<span class=\"icon-base\"></span>'\n\nexport type IconBaseWCType = {\n  iconUrl?: string\n  minWidth?: string\n  minHeight?: string\n  width?: string\n  height?: string\n  size?: string\n  fontSize?: string\n  color?: string\n  className?: string\n}\n\n@ced('icon-base')\nexport default class IconBase extends HTMLElement {\n  content: string | null\n\n  mainElement: HTMLElement\n\n  iconUrl?: string | null\n\n  minWidth?: string | null\n\n  minHeight?: string | null\n\n  width?: string | null\n\n  height?: string | null\n\n  size?: string | null\n\n  fontSize?: string | null\n\n  color?: string | null\n\n  static get observedAttributes() {\n    return ['iconUrl', 'minWidth', 'minHeight', 'width', 'height', 'size', 'fontSize', 'color', 'className']\n  }\n\n  connectedCallback() {\n    if (this.innerHTML) {\n      this.content = this.content || this.innerHTML || this.getAttribute('content')\n    }\n\n    this.innerHTML = template.innerHTML\n\n    resolveAttributes(this, IconBase.observedAttributes)\n\n    this.render()\n  }\n\n  attributeChangedCallback(attrName: string, oldVal: string | number | null, newVal: string | number | null) {\n    if (attrName === 'className') {\n      this.className = (newVal as string) || ''\n      if (this.className) {\n        this.classList.remove(this.className)\n        this.classList.add(this.className)\n      }\n    }\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    this[attrName] = newVal\n    this.render()\n  }\n\n  render = () => {\n    this.mainElement = this.mainElement || this.querySelector('.icon-base') as HTMLElement\n    if (!this.mainElement) {\n      return\n    }\n    this.classList.add(classes['icon-base-parent'])\n    this.mainElement.classList.add(classes['icon-base'])\n\n    const styles = {\n      '--min-width': this.minWidth || this.size || this.width || 'auto',\n      '--min-height': this.minHeight || this.size || this.height || 'auto',\n      '--width': this.size || this.width,\n      '--height': this.size || this.height,\n      ...(this.fontSize ? { 'font-size': this.fontSize || 'unset' } : {}),\n      ...(this.iconUrl ? { '--icon-url': `url(${this.iconUrl})` } : {}),\n      ...(this.iconUrl ? { '--icon-color': this.color } : { '--icon-content-color': this.color }),\n    }\n\n    this.mainElement.innerHTML = this.iconUrl ? '' : (this.content || '')\n\n    this.mainElement.setAttribute('style', Object.entries(styles).map(([key, value]) => `${key}: ${value};`).join(' '))\n  }\n}\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'icon-base': any\n    }\n  }\n}\n\nexport const IconBaseWC = {\n  IconBaseWC: IconBase,\n}\n"],"names":["template","document","createElement","innerHTML","IconBase","ced","_dec","_class","_HTMLElement","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","this","concat","content","mainElement","iconUrl","minWidth","minHeight","width","height","size","fontSize","color","render","querySelector","classList","add","classes","styles","_objectSpread","objectSpread2","setAttribute","Object","entries","map","_ref","_ref2","_slicedToArray","key","value","join","_createClass","createClass","getAttribute","resolveAttributes","observedAttributes","attrName","oldVal","newVal","className","remove","get","_wrapNativeSuper","HTMLElement","IconBaseWC"],"mappings":"waAIMA,EAAWC,SAASC,cAAc,YAExCF,EAASG,UAAY,kCAAiC,IAejCC,EADpBC,MAAI,YAAYC,CAAAC,WAAAC,GAAAC,WAAAL,EAAAI,GAAA,IAAAE,EAAAC,cAAAP,GAAA,SAAAA,IAAA,IAAAQ,EAAAC,sBAAAT,GAAA,IAAA,IAAAU,EAAAC,UAAAC,OAAAC,EAAAC,IAAAA,MAAAJ,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAAF,EAAAE,GAAAJ,UAAAI,GAyEd,OAzEcP,EAAAF,EAAAU,KAAAC,MAAAX,EAAA,CAAAY,MAAAC,OAAAN,KAEfO,aAAO,EAAAZ,EAEPa,iBAAW,EAAAb,EAEXc,aAAO,EAAAd,EAEPe,cAAQ,EAAAf,EAERgB,eAAS,EAAAhB,EAETiB,WAAK,EAAAjB,EAELkB,YAAM,EAAAlB,EAENmB,UAAI,EAAAnB,EAEJoB,cAAQ,EAAApB,EAERqB,WAAK,EAAArB,EAgCLsB,OAAS,WAEP,GADAtB,EAAKa,YAAcb,EAAKa,aAAeb,EAAKuB,cAAc,cACrDvB,EAAKa,YAAV,CAGAb,EAAKwB,UAAUC,IAAIC,EAAQ,qBAC3B1B,EAAKa,YAAYW,UAAUC,IAAIC,EAAQ,cAEvC,IAAMC,EAAMC,EAAAA,cAAAA,EAAAC,cAAAD,gBAAA,CACV,cAAe5B,EAAKe,UAAYf,EAAKmB,MAAQnB,EAAKiB,OAAS,OAC3D,eAAgBjB,EAAKgB,WAAahB,EAAKmB,MAAQnB,EAAKkB,QAAU,OAC9D,UAAWlB,EAAKmB,MAAQnB,EAAKiB,MAC7B,WAAYjB,EAAKmB,MAAQnB,EAAKkB,QAC1BlB,EAAKoB,SAAW,CAAE,YAAapB,EAAKoB,UAAY,SAAY,CAAE,GAC9DpB,EAAKc,QAAU,CAAE,aAAYH,OAAAA,OAASX,EAAKc,QAAO,MAAQ,CAAE,GAC5Dd,EAAKc,QAAU,CAAE,eAAgBd,EAAKqB,OAAU,CAAE,uBAAwBrB,EAAKqB,QAGrFrB,EAAKa,YAAYtB,UAAYS,EAAKc,QAAU,GAAMd,EAAKY,SAAW,GAElEZ,EAAKa,YAAYiB,aAAa,QAASC,OAAOC,QAAQL,GAAQM,KAAI,SAAAC,GAAA,IAAAC,EAAAC,EAAAA,cAAAF,EAAA,GAAEG,EAAGF,EAAA,GAAEG,EAAKH,EAAA,GAAA,MAAA,GAAAxB,OAAS0B,EAAG1B,MAAAA,OAAK2B,EAAK,IAAA,IAAKC,KAAK,KAhB9G,GAiBDvC,CAAA,CAjDA,OAiDAwC,EAAAC,YAAAjD,EAAA,CAAA,CAAA6C,IAAA,oBAAAC,MA/CD,WACM5B,KAAKnB,YACPmB,KAAKE,QAAUF,KAAKE,SAAWF,KAAKnB,WAAamB,KAAKgC,aAAa,YAGrEhC,KAAKnB,UAAYH,EAASG,UAE1BoD,EAAAA,kBAAkBjC,KAAMlB,EAASoD,oBAEjClC,KAAKY,QACP,GAAC,CAAAe,IAAA,2BAAAC,MAED,SAAyBO,EAAkBC,EAAgCC,GACxD,cAAbF,IACFnC,KAAKsC,UAAaD,GAAqB,GACnCrC,KAAKsC,YACPtC,KAAKc,UAAUyB,OAAOvC,KAAKsC,WAC3BtC,KAAKc,UAAUC,IAAIf,KAAKsC,aAK5BtC,KAAKmC,GAAYE,EACjBrC,KAAKY,QACP,IAAC,CAAA,CAAAe,IAAA,qBAAAa,IA5BD,WACE,MAAO,CAAC,UAAW,WAAY,YAAa,QAAS,SAAU,OAAQ,WAAY,QAAS,YAC9F,KAAC1D,CAAA,EAAA2D,kBAvBmCC,gBAAWzD,EAoFpC0D,EAAa,CACxBA,WAAY7D"}
+{"version":3,"file":"IconWC.js","sources":["../../../../../../../src/core/ui/components/icon/IconWC.ts"],"sourcesContent":["import { ced, resolveAttributes } from '../../../utils/webComponents/webComponent.utils'\n\nimport classes from './icon.module.scss'\n\nconst template = document.createElement('template')\n\ntemplate.innerHTML = '<span class=\"icon-base\"></span>'\n\nexport type IconBaseWCType = {\n  iconUrl?: string\n  minWidth?: string\n  minHeight?: string\n  width?: string\n  height?: string\n  size?: string\n  fontSize?: string\n  color?: string\n  className?: string\n}\n\n@ced('icon-base')\nexport default class IconBase extends HTMLElement {\n  content: string | null\n\n  mainElement: HTMLElement\n\n  iconUrl?: string | null\n\n  minWidth?: string | null\n\n  minHeight?: string | null\n\n  width?: string | null\n\n  height?: string | null\n\n  size?: string | null\n\n  fontSize?: string | null\n\n  color?: string | null\n\n  static get observedAttributes() {\n    return ['iconUrl', 'minWidth', 'minHeight', 'width', 'height', 'size', 'fontSize', 'color', 'className']\n  }\n\n  connectedCallback() {\n    if (this.innerHTML) {\n      this.content = this.content || this.innerHTML || this.getAttribute('content')\n    }\n\n    this.innerHTML = template.innerHTML\n\n    resolveAttributes(this, IconBase.observedAttributes)\n\n    this.render()\n  }\n\n  attributeChangedCallback(attrName: string, oldVal: string | number | null, newVal: string | number | null) {\n    if (attrName === 'className') {\n      this.className = (newVal as string) || ''\n      if (this.className) {\n        this.classList.remove(this.className)\n        this.classList.add(this.className)\n      }\n    }\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    this[attrName] = newVal\n    this.render()\n  }\n\n  render = () => {\n    this.mainElement = this.mainElement || this.querySelector('.icon-base') as HTMLElement\n    if (!this.mainElement) {\n      return\n    }\n    this.classList.add(classes['icon-base-parent'])\n    this.mainElement.classList.add(classes['icon-base'])\n\n    const styles = {\n      '--min-width': this.minWidth || this.size || this.width || 'auto',\n      '--min-height': this.minHeight || this.size || this.height || 'auto',\n      '--width': this.size || this.width,\n      '--height': this.size || this.height,\n      ...(this.fontSize ? { 'font-size': this.fontSize || 'unset' } : {}),\n      ...(this.iconUrl ? { '--icon-url': `url(${this.iconUrl})` } : {}),\n      ...(this.iconUrl ? { '--icon-color': this.color } : { '--icon-content-color': this.color }),\n    }\n\n    this.mainElement.innerHTML = this.iconUrl ? '' : (this.content || '')\n\n    this.mainElement.setAttribute('style', Object.entries(styles).map(([key, value]) => `${key}: ${value};`).join(' '))\n  }\n}\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'icon-base': any\n    }\n  }\n}\n\nexport const IconBaseWC = {\n  IconBaseWC: IconBase,\n}\n"],"names":["template","document","createElement","innerHTML","IconBase","ced","_dec","_class","_HTMLElement","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","this","concat","content","mainElement","iconUrl","minWidth","minHeight","width","height","size","fontSize","color","render","querySelector","classList","add","classes","styles","_objectSpread","objectSpread2","setAttribute","Object","entries","map","_ref","_ref2","_slicedToArray","key","value","join","_createClass","createClass","getAttribute","resolveAttributes","observedAttributes","attrName","oldVal","newVal","className","remove","get","_wrapNativeSuper","HTMLElement","IconBaseWC"],"mappings":"gdAIMA,EAAWC,SAASC,cAAc,YAExCF,EAASG,UAAY,kCAAiC,IAejCC,EADpBC,MAAI,YAAYC,CAAAC,WAAAC,GAAAC,WAAAL,EAAAI,GAAA,IAAAE,EAAAC,cAAAP,GAAA,SAAAA,IAAA,IAAAQ,EAAAC,sBAAAT,GAAA,IAAA,IAAAU,EAAAC,UAAAC,OAAAC,EAAAC,IAAAA,MAAAJ,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAAF,EAAAE,GAAAJ,UAAAI,GAyEd,OAzEcP,EAAAF,EAAAU,KAAAC,MAAAX,EAAA,CAAAY,MAAAC,OAAAN,KAEfO,aAAO,EAAAZ,EAEPa,iBAAW,EAAAb,EAEXc,aAAO,EAAAd,EAEPe,cAAQ,EAAAf,EAERgB,eAAS,EAAAhB,EAETiB,WAAK,EAAAjB,EAELkB,YAAM,EAAAlB,EAENmB,UAAI,EAAAnB,EAEJoB,cAAQ,EAAApB,EAERqB,WAAK,EAAArB,EAgCLsB,OAAS,WAEP,GADAtB,EAAKa,YAAcb,EAAKa,aAAeb,EAAKuB,cAAc,cACrDvB,EAAKa,YAAV,CAGAb,EAAKwB,UAAUC,IAAIC,EAAQ,qBAC3B1B,EAAKa,YAAYW,UAAUC,IAAIC,EAAQ,cAEvC,IAAMC,EAAMC,EAAAA,cAAAA,EAAAC,cAAAD,gBAAA,CACV,cAAe5B,EAAKe,UAAYf,EAAKmB,MAAQnB,EAAKiB,OAAS,OAC3D,eAAgBjB,EAAKgB,WAAahB,EAAKmB,MAAQnB,EAAKkB,QAAU,OAC9D,UAAWlB,EAAKmB,MAAQnB,EAAKiB,MAC7B,WAAYjB,EAAKmB,MAAQnB,EAAKkB,QAC1BlB,EAAKoB,SAAW,CAAE,YAAapB,EAAKoB,UAAY,SAAY,CAAE,GAC9DpB,EAAKc,QAAU,CAAE,aAAYH,OAAAA,OAASX,EAAKc,QAAO,MAAQ,CAAE,GAC5Dd,EAAKc,QAAU,CAAE,eAAgBd,EAAKqB,OAAU,CAAE,uBAAwBrB,EAAKqB,QAGrFrB,EAAKa,YAAYtB,UAAYS,EAAKc,QAAU,GAAMd,EAAKY,SAAW,GAElEZ,EAAKa,YAAYiB,aAAa,QAASC,OAAOC,QAAQL,GAAQM,KAAI,SAAAC,GAAA,IAAAC,EAAAC,EAAAA,cAAAF,EAAA,GAAEG,EAAGF,EAAA,GAAEG,EAAKH,EAAA,GAAA,MAAA,GAAAxB,OAAS0B,EAAG1B,MAAAA,OAAK2B,EAAK,IAAA,IAAKC,KAAK,KAhB9G,GAiBDvC,CAAA,CAjDA,OAiDAwC,EAAAC,YAAAjD,EAAA,CAAA,CAAA6C,IAAA,oBAAAC,MA/CD,WACM5B,KAAKnB,YACPmB,KAAKE,QAAUF,KAAKE,SAAWF,KAAKnB,WAAamB,KAAKgC,aAAa,YAGrEhC,KAAKnB,UAAYH,EAASG,UAE1BoD,EAAAA,kBAAkBjC,KAAMlB,EAASoD,oBAEjClC,KAAKY,QACP,GAAC,CAAAe,IAAA,2BAAAC,MAED,SAAyBO,EAAkBC,EAAgCC,GACxD,cAAbF,IACFnC,KAAKsC,UAAaD,GAAqB,GACnCrC,KAAKsC,YACPtC,KAAKc,UAAUyB,OAAOvC,KAAKsC,WAC3BtC,KAAKc,UAAUC,IAAIf,KAAKsC,aAK5BtC,KAAKmC,GAAYE,EACjBrC,KAAKY,QACP,IAAC,CAAA,CAAAe,IAAA,qBAAAa,IA5BD,WACE,MAAO,CAAC,UAAW,WAAY,YAAa,QAAS,SAAU,OAAQ,WAAY,QAAS,YAC9F,KAAC1D,CAAA,EAAA2D,kBAvBmCC,gBAAWzD,EAoFpC0D,EAAa,CACxBA,WAAY7D"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./utils/style.js"),o=require("./components/container/FBox.js"),r=require("./components/container/Flex.js"),t=require("./components/container/Placeholder.js"),n=require("./components/container/Container.js"),s=require("./components/container/ResizableContainer.js"),i=require("./components/field/Field.js"),l=require("./components/dividers/DividerLine.js"),c=require("./components/icon/IconBase.js"),p=require("./components/icon/Icon.js"),a=require("./components/icon/IconWC.js");exports.calculateColors=e.calculateColors,exports.calculatePercColor=e.calculatePercColor,exports.convertHex=e.convertHex,exports.convertRGB=e.convertRGB,Object.defineProperty(exports,"defaultFontSize",{enumerable:!0,get:function(){return e.defaultFontSize}}),exports.pxToRem=e.pxToRem,exports.resolveStyleValue=e.resolveStyleValue,exports.setDefaultFontSize=e.setDefaultFontSize,exports.toHex=e.toHex,exports.FBox=o.FBox,exports.Flex=r.Flex,exports.FlexTight=r.FlexTight,exports.FlexTightStyled=r.FlexTightStyled,exports.FlexWrapper=r.FlexWrapper,exports.Placeholder=t.Placeholder,exports.Container=n.Container,exports.ResizableContainer=s.ResizableContainer,exports.Field=i.Field,exports.FieldWrapper=i.FieldWrapper,exports.Select=i.Select,exports.setIconColor=i.setIconColor,exports.setIconComponent=i.setIconComponent,exports.DividerHorizontal=l.DividerHorizontal,exports.DividerLine=l.DividerLine,exports.DividerVertical=l.DividerVertical,exports.IconBase=c.IconBase,exports.Icon=p.Icon,exports.IconBaseWC=a.IconBaseWC;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./utils/style.js"),o=require("./components/container/FBox.js"),r=require("./components/container/Flex.js"),t=require("./components/container/Placeholder.js"),n=require("./components/container/CollapsibleContainerS.js"),s=require("./components/container/CollapsibleContainer.js"),i=require("./components/container/ResizableContainer.js"),l=require("./components/field/Field.js"),p=require("./components/dividers/DividerLine.js"),c=require("./components/icon/IconBase.js"),a=require("./components/icon/Icon.js"),x=require("./components/icon/IconWC.js");exports.calculateColors=e.calculateColors,exports.calculatePercColor=e.calculatePercColor,exports.convertHex=e.convertHex,exports.convertRGB=e.convertRGB,Object.defineProperty(exports,"defaultFontSize",{enumerable:!0,get:function(){return e.defaultFontSize}}),exports.pxToRem=e.pxToRem,exports.resolveStyleValue=e.resolveStyleValue,exports.setDefaultFontSize=e.setDefaultFontSize,exports.toHex=e.toHex,exports.FBox=o.FBox,exports.Flex=r.Flex,exports.FlexTight=r.FlexTight,exports.FlexTightStyled=r.FlexTightStyled,exports.FlexWrapper=r.FlexWrapper,exports.Placeholder=t.Placeholder,exports.ContainerS=n.ContainerS,exports.CollapsibleContainer=s.CollapsibleContainer,exports.ResizableContainer=i.ResizableContainer,exports.Field=l.Field,exports.FieldWrapper=l.FieldWrapper,exports.Select=l.Select,exports.setIconColor=l.setIconColor,exports.setIconComponent=l.setIconComponent,exports.DividerHorizontal=p.DividerHorizontal,exports.DividerLine=p.DividerLine,exports.DividerVertical=p.DividerVertical,exports.IconBase=c.IconBase,exports.Icon=a.Icon,exports.IconBaseWC=x.IconBaseWC;
 //# sourceMappingURL=index.js.map

package/dist/utils/esm/index.css

@@ -1,21 +1,35 @@
-.divider-module_divider-line__6CesR {
-  position: relative;
-  display: block;
-  transition: opacity, width, height 250ms ease-in-out;
-  background-color: var(--color);
-  opacity: var(--opacity);
+.CollapsibleContainer-module_collapsible-container__u0Jmm {
+  transform-origin: 0% 0%;
+  opacity: 0;
+  overflow: clip;
 }
-.divider-module_divider-line__6CesR.divider-module_vertical__qSVWD {
-  height: var(--length);
-  left: var(--left);
-  width: var(--width);
-  margin: var(--margin);
+.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_vertical__w7MVN {
+  transition: opacity 0.2s ease-in-out, height 0.2s ease-in-out, max-height 0.2s ease-in-out;
+  will-change: opacity, height, max-height;
 }
-.divider-module_divider-line__6CesR.divider-module_horizontal__Gz-Oj {
-  width: var(--length);
-  left: var(--left);
-  height: var(--height);
-  margin: var(--margin);
+.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_vertical__w7MVN.CollapsibleContainer-module_collapsed__q8fs8 {
+  height: 0;
+  max-height: 0;
+  opacity: 0;
+}
+.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_vertical__w7MVN.CollapsibleContainer-module_expanded__O6Vh8 {
+  height: var(--prop-value);
+  max-height: var(--prop-value);
+  opacity: 1;
+}
+.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_horizontal__QJWI- {
+  transition: opacity 0.2s ease-in-out, width 0.2s ease-in-out, max-width 0.2s ease-in-out;
+  will-change: opacity, width, max-width;
+}
+.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_horizontal__QJWI-.CollapsibleContainer-module_collapsed__q8fs8 {
+  width: 0;
+  max-width: 0;
+  opacity: 0;
+}
+.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_horizontal__QJWI-.CollapsibleContainer-module_expanded__O6Vh8 {
+  width: var(--prop-value);
+  max-width: var(--prop-value);
+  opacity: 1;
 }
 .icon-module_icon-base-parent__nOMvW {
   line-height: 1px !important;
@@ -70,4 +84,23 @@
   min-width: 0;
   min-height: 0;
   border-radius: initial;
+}
+.divider-module_divider-line__6CesR {
+  position: relative;
+  display: block;
+  transition: opacity, width, height 250ms ease-in-out;
+  background-color: var(--color);
+  opacity: var(--opacity);
+}
+.divider-module_divider-line__6CesR.divider-module_vertical__qSVWD {
+  height: var(--length);
+  left: var(--left);
+  width: var(--width);
+  margin: var(--margin);
+}
+.divider-module_divider-line__6CesR.divider-module_horizontal__Gz-Oj {
+  width: var(--length);
+  left: var(--left);
+  height: var(--height);
+  margin: var(--margin);
 }

package/dist/utils/index.css

@@ -1,21 +1,35 @@
-.divider-module_divider-line__6CesR {
-  position: relative;
-  display: block;
-  transition: opacity, width, height 250ms ease-in-out;
-  background-color: var(--color);
-  opacity: var(--opacity);
+.CollapsibleContainer-module_collapsible-container__u0Jmm {
+  transform-origin: 0% 0%;
+  opacity: 0;
+  overflow: clip;
 }
-.divider-module_divider-line__6CesR.divider-module_vertical__qSVWD {
-  height: var(--length);
-  left: var(--left);
-  width: var(--width);
-  margin: var(--margin);
+.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_vertical__w7MVN {
+  transition: opacity 0.2s ease-in-out, height 0.2s ease-in-out, max-height 0.2s ease-in-out;
+  will-change: opacity, height, max-height;
 }
-.divider-module_divider-line__6CesR.divider-module_horizontal__Gz-Oj {
-  width: var(--length);
-  left: var(--left);
-  height: var(--height);
-  margin: var(--margin);
+.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_vertical__w7MVN.CollapsibleContainer-module_collapsed__q8fs8 {
+  height: 0;
+  max-height: 0;
+  opacity: 0;
+}
+.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_vertical__w7MVN.CollapsibleContainer-module_expanded__O6Vh8 {
+  height: var(--prop-value);
+  max-height: var(--prop-value);
+  opacity: 1;
+}
+.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_horizontal__QJWI- {
+  transition: opacity 0.2s ease-in-out, width 0.2s ease-in-out, max-width 0.2s ease-in-out;
+  will-change: opacity, width, max-width;
+}
+.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_horizontal__QJWI-.CollapsibleContainer-module_collapsed__q8fs8 {
+  width: 0;
+  max-width: 0;
+  opacity: 0;
+}
+.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_horizontal__QJWI-.CollapsibleContainer-module_expanded__O6Vh8 {
+  width: var(--prop-value);
+  max-width: var(--prop-value);
+  opacity: 1;
 }
 .icon-module_icon-base-parent__nOMvW {
   line-height: 1px !important;
@@ -70,4 +84,23 @@
   min-width: 0;
   min-height: 0;
   border-radius: initial;
+}
+.divider-module_divider-line__6CesR {
+  position: relative;
+  display: block;
+  transition: opacity, width, height 250ms ease-in-out;
+  background-color: var(--color);
+  opacity: var(--opacity);
+}
+.divider-module_divider-line__6CesR.divider-module_vertical__qSVWD {
+  height: var(--length);
+  left: var(--left);
+  width: var(--width);
+  margin: var(--margin);
+}
+.divider-module_divider-line__6CesR.divider-module_horizontal__Gz-Oj {
+  width: var(--length);
+  left: var(--left);
+  height: var(--height);
+  margin: var(--margin);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@e1011/es-kit",
-  "version": "1.0.62",
+  "version": "1.0.66",
   "main": "dist/lib/cjs/src/index.js",
   "module": "dist/lib/esm/src/index.js",
   "sideEffects": false,