@tcn/ui 0.3.1 → 0.3.3

package/dist/stacks/box/right_resize_handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"right_resize_handle.js","sources":["../../../src/stacks/box/right_resize_handle.tsx"],"sourcesContent":["import React from 'react';\nimport { HandleProps } from './handle_props.js';\nimport { createHorizontalResizeHandler } from './resize_handlers.js';\nimport styles from './right_resize_handle.module.css';\nimport { clsx } from 'clsx';\n\nexport interface RightResizeHandleProps {\n  targetRef: React.MutableRefObject<HTMLElement | null>;\n  handleProps?: HandleProps;\n  onWidthResize?: (value: number) => void;\n  onWidthResizeEnd?: (value: number) => void;\n}\nexport function RightResizeHandle({\n  targetRef,\n  handleProps,\n  onWidthResize,\n  onWidthResizeEnd,\n}: RightResizeHandleProps) {\n  const resizeHandler = createHorizontalResizeHandler(\n    targetRef,\n    onWidthResize,\n    onWidthResizeEnd,\n    false,\n    true\n  );\n  const offset = handleProps?.offset ? handleProps.offset : -8;\n\n  const rightResizeHandleStyle: any = {\n    ...handleProps?.style,\n    '--resize-offset': `${offset}px`,\n    width: handleProps?.size || '16px',\n  };\n\n  return (\n    <div\n      className={clsx(styles['right-resize-handle'], 'right-resize-handle')}\n      onMouseDown={resizeHandler}\n      style={rightResizeHandleStyle}\n    >\n      {handleProps?.children}\n    </div>\n  );\n}\n"],"names":["RightResizeHandle","targetRef","handleProps","onWidthResize","onWidthResizeEnd","resizeHandler","createHorizontalResizeHandler","offset","rightResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAYO,SAASA,EAAkB;AAAA,EAChC,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC;AACF,GAA2B;AACzB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA8B;AAAA,IAClC,GAAGN,GAAa;AAAA,IAChB,mBAAmB,GAAGK,CAAM;AAAA,IAC5B,OAAOL,GAAa,QAAQ;AAAA,EAAA;AAG9B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,qBAAqB,GAAG,qBAAqB;AAAA,MACpE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}
+{"version":3,"file":"right_resize_handle.js","sources":["../../../src/stacks/box/right_resize_handle.tsx"],"sourcesContent":["import React from 'react';\nimport { HandleProps } from './handle_props.js';\nimport { createHorizontalResizeHandler } from './resize_handlers.js';\nimport styles from './right_resize_handle.module.css';\nimport { clsx } from 'clsx';\n\nexport interface RightResizeHandleProps {\n  targetRef: React.MutableRefObject<HTMLElement | null>;\n  handleProps?: HandleProps;\n  onWidthResize?: (value: number) => void;\n  onWidthResizeEnd?: (value: number) => void;\n}\nexport function RightResizeHandle({\n  targetRef,\n  handleProps,\n  onWidthResize,\n  onWidthResizeEnd,\n}: RightResizeHandleProps) {\n  const resizeHandler = createHorizontalResizeHandler(\n    targetRef,\n    onWidthResize,\n    onWidthResizeEnd,\n    false,\n    true\n  );\n  const offset = handleProps?.offset ? handleProps.offset : -8;\n\n  const rightResizeHandleStyle: any = {\n    ...handleProps?.style,\n    '--resize-offset': `${offset}px`,\n    width: handleProps?.size || '16px',\n  };\n\n  return (\n    <div\n      className={clsx(styles['right-resize-handle'], 'tcn-right-resize-handle')}\n      onMouseDown={resizeHandler}\n      style={rightResizeHandleStyle}\n    >\n      {handleProps?.children}\n    </div>\n  );\n}\n"],"names":["RightResizeHandle","targetRef","handleProps","onWidthResize","onWidthResizeEnd","resizeHandler","createHorizontalResizeHandler","offset","rightResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAYO,SAASA,EAAkB;AAAA,EAChC,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC;AACF,GAA2B;AACzB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA8B;AAAA,IAClC,GAAGN,GAAa;AAAA,IAChB,mBAAmB,GAAGK,CAAM;AAAA,IAC5B,OAAOL,GAAa,QAAQ;AAAA,EAAA;AAG9B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,qBAAqB,GAAG,yBAAyB;AAAA,MACxE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}

package/dist/stacks/box/start_resize_handle.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
 import { createHorizontalResizeHandler as l } from "./resize_handlers.js";
-import { clsx as f } from "clsx";
-import '../../start_resize_handle.css';const z = "_start-resize-handle_22a3d5a", c = { "start-resize-handle": z };
+import { clsx as c } from "clsx";
+import '../../start_resize_handle.css';const f = "_start-resize-handle_22a3d5a", z = { "start-resize-handle": f };
 function x({
   targetRef: t,
   handleProps: e,
@@ -13,17 +13,17 @@ function x({
     s,
     r,
     !0
-  ), a = e?.offset ? e.offset : -8, n = {
+  ), n = e?.offset ? e.offset : -8, a = {
     ...e?.style,
-    "--resize-offset": `${a}px`,
+    "--resize-offset": `${n}px`,
     width: e?.size || "16px"
   };
   return /* @__PURE__ */ o(
     "div",
     {
-      className: f(c["start-resize-handle"], "start-resize-handle"),
+      className: c(z["start-resize-handle"], "tcn-start-resize-handle"),
       onMouseDown: i,
-      style: n,
+      style: a,
       children: e?.children
     }
   );

package/dist/stacks/box/start_resize_handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"start_resize_handle.js","sources":["../../../src/stacks/box/start_resize_handle.tsx"],"sourcesContent":["import React from 'react';\nimport { HandleProps } from './handle_props.js';\nimport { createHorizontalResizeHandler } from './resize_handlers.js';\nimport styles from './start_resize_handle.module.css';\nimport { clsx } from 'clsx';\n\nexport interface StartResizeHandleProps {\n  targetRef: React.MutableRefObject<HTMLElement | null>;\n  handleProps?: HandleProps;\n  onWidthResize?: (value: number) => void;\n  onWidthResizeEnd?: (value: number) => void;\n}\nexport function StartResizeHandle({\n  targetRef,\n  handleProps,\n  onWidthResize,\n  onWidthResizeEnd,\n}: StartResizeHandleProps) {\n  const resizeHandler = createHorizontalResizeHandler(\n    targetRef,\n    onWidthResize,\n    onWidthResizeEnd,\n    true\n  );\n  const offset = handleProps?.offset ? handleProps.offset : -8;\n\n  const startResizeHandleStyle: any = {\n    ...handleProps?.style,\n    '--resize-offset': `${offset}px`,\n    width: handleProps?.size || '16px',\n  };\n\n  return (\n    <div\n      className={clsx(styles['start-resize-handle'], 'start-resize-handle')}\n      onMouseDown={resizeHandler}\n      style={startResizeHandleStyle}\n    >\n      {handleProps?.children}\n    </div>\n  );\n}\n"],"names":["StartResizeHandle","targetRef","handleProps","onWidthResize","onWidthResizeEnd","resizeHandler","createHorizontalResizeHandler","offset","startResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAYO,SAASA,EAAkB;AAAA,EAChC,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC;AACF,GAA2B;AACzB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,IACA;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA8B;AAAA,IAClC,GAAGN,GAAa;AAAA,IAChB,mBAAmB,GAAGK,CAAM;AAAA,IAC5B,OAAOL,GAAa,QAAQ;AAAA,EAAA;AAG9B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,qBAAqB,GAAG,qBAAqB;AAAA,MACpE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}
+{"version":3,"file":"start_resize_handle.js","sources":["../../../src/stacks/box/start_resize_handle.tsx"],"sourcesContent":["import React from 'react';\nimport { HandleProps } from './handle_props.js';\nimport { createHorizontalResizeHandler } from './resize_handlers.js';\nimport styles from './start_resize_handle.module.css';\nimport { clsx } from 'clsx';\n\nexport interface StartResizeHandleProps {\n  targetRef: React.MutableRefObject<HTMLElement | null>;\n  handleProps?: HandleProps;\n  onWidthResize?: (value: number) => void;\n  onWidthResizeEnd?: (value: number) => void;\n}\nexport function StartResizeHandle({\n  targetRef,\n  handleProps,\n  onWidthResize,\n  onWidthResizeEnd,\n}: StartResizeHandleProps) {\n  const resizeHandler = createHorizontalResizeHandler(\n    targetRef,\n    onWidthResize,\n    onWidthResizeEnd,\n    true\n  );\n  const offset = handleProps?.offset ? handleProps.offset : -8;\n\n  const startResizeHandleStyle: any = {\n    ...handleProps?.style,\n    '--resize-offset': `${offset}px`,\n    width: handleProps?.size || '16px',\n  };\n\n  return (\n    <div\n      className={clsx(styles['start-resize-handle'], 'tcn-start-resize-handle')}\n      onMouseDown={resizeHandler}\n      style={startResizeHandleStyle}\n    >\n      {handleProps?.children}\n    </div>\n  );\n}\n"],"names":["StartResizeHandle","targetRef","handleProps","onWidthResize","onWidthResizeEnd","resizeHandler","createHorizontalResizeHandler","offset","startResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAYO,SAASA,EAAkB;AAAA,EAChC,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC;AACF,GAA2B;AACzB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,IACA;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA8B;AAAA,IAClC,GAAGN,GAAa;AAAA,IAChB,mBAAmB,GAAGK,CAAM;AAAA,IAC5B,OAAOL,GAAa,QAAQ;AAAA,EAAA;AAG9B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,qBAAqB,GAAG,yBAAyB;AAAA,MACxE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}

package/dist/stacks/box/top_resize_handle.js

@@ -21,7 +21,7 @@ function x({
   return /* @__PURE__ */ l(
     "div",
     {
-      className: f(z["top-resize-handle"], "top-resize-handle"),
+      className: f(z["top-resize-handle"], "tcn-top-resize-handle"),
       onMouseDown: i,
       style: r,
       children: e?.children

package/dist/stacks/box/top_resize_handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"top_resize_handle.js","sources":["../../../src/stacks/box/top_resize_handle.tsx"],"sourcesContent":["import React from 'react';\nimport { HandleProps } from './handle_props.js';\nimport { createVerticalResizeHandler } from './resize_handlers.js';\nimport styles from './top_resize_handle.module.css';\nimport { clsx } from 'clsx';\n\nexport interface TopResizeHandleProps {\n  targetRef: React.MutableRefObject<HTMLElement | null>;\n  handleProps?: HandleProps;\n  onHeightResize?: (value: number) => void;\n  onHeightResizeEnd?: (value: number) => void;\n}\nexport function TopResizeHandle({\n  targetRef,\n  handleProps,\n  onHeightResize,\n  onHeightResizeEnd,\n}: TopResizeHandleProps) {\n  const resizeHandler = createVerticalResizeHandler(\n    targetRef,\n    onHeightResize,\n    onHeightResizeEnd,\n    true\n  );\n  const offset = handleProps?.offset ? handleProps.offset : -8;\n\n  const topResizeHandleStyle: React.CSSProperties = {\n    ...handleProps?.style,\n    top: `${offset}px`,\n    height: handleProps?.size || '16px',\n  };\n  return (\n    <div\n      className={clsx(styles['top-resize-handle'], 'top-resize-handle')}\n      onMouseDown={resizeHandler}\n      style={topResizeHandleStyle}\n    >\n      {handleProps?.children}\n    </div>\n  );\n}\n"],"names":["TopResizeHandle","targetRef","handleProps","onHeightResize","onHeightResizeEnd","resizeHandler","createVerticalResizeHandler","offset","topResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAYO,SAASA,EAAgB;AAAA,EAC9B,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,mBAAAC;AACF,GAAyB;AACvB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,IACA;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA4C;AAAA,IAChD,GAAGN,GAAa;AAAA,IAChB,KAAK,GAAGK,CAAM;AAAA,IACd,QAAQL,GAAa,QAAQ;AAAA,EAAA;AAE/B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,mBAAmB,GAAG,mBAAmB;AAAA,MAChE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}
+{"version":3,"file":"top_resize_handle.js","sources":["../../../src/stacks/box/top_resize_handle.tsx"],"sourcesContent":["import React from 'react';\nimport { HandleProps } from './handle_props.js';\nimport { createVerticalResizeHandler } from './resize_handlers.js';\nimport styles from './top_resize_handle.module.css';\nimport { clsx } from 'clsx';\n\nexport interface TopResizeHandleProps {\n  targetRef: React.MutableRefObject<HTMLElement | null>;\n  handleProps?: HandleProps;\n  onHeightResize?: (value: number) => void;\n  onHeightResizeEnd?: (value: number) => void;\n}\nexport function TopResizeHandle({\n  targetRef,\n  handleProps,\n  onHeightResize,\n  onHeightResizeEnd,\n}: TopResizeHandleProps) {\n  const resizeHandler = createVerticalResizeHandler(\n    targetRef,\n    onHeightResize,\n    onHeightResizeEnd,\n    true\n  );\n  const offset = handleProps?.offset ? handleProps.offset : -8;\n\n  const topResizeHandleStyle: React.CSSProperties = {\n    ...handleProps?.style,\n    top: `${offset}px`,\n    height: handleProps?.size || '16px',\n  };\n  return (\n    <div\n      className={clsx(styles['top-resize-handle'], 'tcn-top-resize-handle')}\n      onMouseDown={resizeHandler}\n      style={topResizeHandleStyle}\n    >\n      {handleProps?.children}\n    </div>\n  );\n}\n"],"names":["TopResizeHandle","targetRef","handleProps","onHeightResize","onHeightResizeEnd","resizeHandler","createVerticalResizeHandler","offset","topResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAYO,SAASA,EAAgB;AAAA,EAC9B,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,mBAAAC;AACF,GAAyB;AACvB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,IACA;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA4C;AAAA,IAChD,GAAGN,GAAa;AAAA,IAChB,KAAK,GAAGK,CAAM;AAAA,IACd,QAAQL,GAAa,QAAQ;AAAA,EAAA;AAE/B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,mBAAmB,GAAG,uBAAuB;AAAA,MACpE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}

package/dist/stacks/h_collapsible_box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"h_collapsible_box.d.ts","sourceRoot":"","sources":["../../src/stacks/h_collapsible_box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,EAAO,QAAQ,EAAE,MAAM,cAAc,CAAC;AAI7C,MAAM,WAAW,oBAAqB,SAAQ,QAAQ;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,eAAe,6FAmC1B,CAAC"}
+{"version":3,"file":"h_collapsible_box.d.ts","sourceRoot":"","sources":["../../src/stacks/h_collapsible_box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,EAAO,QAAQ,EAAE,MAAM,cAAc,CAAC;AAI7C,MAAM,WAAW,oBAAqB,SAAQ,QAAQ;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,eAAe,6FAuC1B,CAAC"}

package/dist/stacks/h_collapsible_box.js

@@ -7,14 +7,14 @@ import { useForkRef as d } from "../utils/hooks/use_fork_ref.js";
 import "../utils/hooks/use_resize_observer.js";
 import { clsx as u } from "clsx";
 import { Box as R } from "./box/box.js";
-import { s as z } from "../collapsible_box.module-BiS98xXA.js";
-import { useIsCollapsed as x } from "./utils/use_is_collapsed.js";
+import { s as x } from "../collapsible_box.module-BiS98xXA.js";
+import { useIsCollapsed as z } from "./utils/use_is_collapsed.js";
 const j = t.forwardRef(function({ open: l = !1, defaultWidth: i = "400px", ...e }, a) {
   const s = t.useRef(null), n = d(a, s), [c, r] = t.useState(!1);
   p(() => {
     s.current?.style.setProperty("--collapsible-size", i);
   }, [i]);
-  const f = x(l, s) && !l ? null : e.children;
+  const f = z(l, s) && !l ? null : e.children;
   return /* @__PURE__ */ m(
     R,
     {
@@ -29,7 +29,11 @@ const j = t.forwardRef(function({ open: l = !1, defaultWidth: i = "400px", ...e
       onWidthResizeEnd: (o) => {
         r(!1), e.onWidthResizeEnd?.(o), s.current?.style.setProperty("--collapsible-size", `${o}px`);
       },
-      className: u(e.className, z["collapsible-box"]),
+      className: u(
+        e.className,
+        x["collapsible-box"],
+        "tcn-h-collapsible-box"
+      ),
       children: f
     }
   );

package/dist/stacks/h_collapsible_box.js.map

@@ -1 +1 @@
-{"version":3,"file":"h_collapsible_box.js","sources":["../../src/stacks/h_collapsible_box.tsx"],"sourcesContent":["import React, { useLayoutEffect } from 'react';\nimport { useForkRef } from '../utils/index.js';\nimport { clsx } from 'clsx';\nimport { Box, BoxProps } from './box/box.js';\nimport styles from './collapsible_box.module.css';\nimport { useIsCollapsed } from './utils/use_is_collapsed.js';\n\nexport interface HCollapsibleBoxProps extends BoxProps {\n  open?: boolean;\n  defaultWidth?: string;\n}\n\nexport const HCollapsibleBox = React.forwardRef(function CollapsibleBox(\n  { open = false, defaultWidth = '400px', ...props }: HCollapsibleBoxProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const collapsibleRef = React.useRef<HTMLDivElement | null>(null);\n  const forkRef = useForkRef(ref, collapsibleRef);\n  const [resizing, setIsResizing] = React.useState(false);\n\n  useLayoutEffect(() => {\n    collapsibleRef.current?.style.setProperty('--collapsible-size', defaultWidth);\n  }, [defaultWidth]);\n\n  const isCollapsed = useIsCollapsed(open, collapsibleRef);\n  const children = isCollapsed && !open ? null : props.children;\n\n  return (\n    <Box\n      ref={forkRef}\n      {...props}\n      data-is-collapsed={!open}\n      data-collapse-orientation=\"horizontal\"\n      data-is-resizing={resizing}\n      onWidthResize={width => {\n        setIsResizing(true);\n        props.onWidthResize?.(width);\n      }}\n      onWidthResizeEnd={width => {\n        setIsResizing(false);\n        props.onWidthResizeEnd?.(width);\n        collapsibleRef.current?.style.setProperty('--collapsible-size', `${width}px`);\n      }}\n      className={clsx(props.className, styles['collapsible-box'])}\n      children={children}\n    />\n  );\n});\n"],"names":["HCollapsibleBox","React","open","defaultWidth","props","ref","collapsibleRef","forkRef","useForkRef","resizing","setIsResizing","useLayoutEffect","children","useIsCollapsed","jsx","Box","width","clsx","styles"],"mappings":";;;;;;;;;;;AAYO,MAAMA,IAAkBC,EAAM,WAAW,SAC9C,EAAE,MAAAC,IAAO,IAAO,cAAAC,IAAe,SAAS,GAAGC,EAAA,GAC3CC,GACA;AACA,QAAMC,IAAiBL,EAAM,OAA8B,IAAI,GACzDM,IAAUC,EAAWH,GAAKC,CAAc,GACxC,CAACG,GAAUC,CAAa,IAAIT,EAAM,SAAS,EAAK;AAEtD,EAAAU,EAAgB,MAAM;AACpB,IAAAL,EAAe,SAAS,MAAM,YAAY,sBAAsBH,CAAY;AAAA,EAC9E,GAAG,CAACA,CAAY,CAAC;AAGjB,QAAMS,IADcC,EAAeX,GAAMI,CAAc,KACvB,CAACJ,IAAO,OAAOE,EAAM;AAErD,SACE,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKR;AAAA,MACJ,GAAGH;AAAA,MACJ,qBAAmB,CAACF;AAAA,MACpB,6BAA0B;AAAA,MAC1B,oBAAkBO;AAAA,MAClB,eAAe,CAAAO,MAAS;AACtB,QAAAN,EAAc,EAAI,GAClBN,EAAM,gBAAgBY,CAAK;AAAA,MAC7B;AAAA,MACA,kBAAkB,CAAAA,MAAS;AACzB,QAAAN,EAAc,EAAK,GACnBN,EAAM,mBAAmBY,CAAK,GAC9BV,EAAe,SAAS,MAAM,YAAY,sBAAsB,GAAGU,CAAK,IAAI;AAAA,MAC9E;AAAA,MACA,WAAWC,EAAKb,EAAM,WAAWc,EAAO,iBAAiB,CAAC;AAAA,MAC1D,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"h_collapsible_box.js","sources":["../../src/stacks/h_collapsible_box.tsx"],"sourcesContent":["import React, { useLayoutEffect } from 'react';\nimport { useForkRef } from '../utils/index.js';\nimport { clsx } from 'clsx';\nimport { Box, BoxProps } from './box/box.js';\nimport styles from './collapsible_box.module.css';\nimport { useIsCollapsed } from './utils/use_is_collapsed.js';\n\nexport interface HCollapsibleBoxProps extends BoxProps {\n  open?: boolean;\n  defaultWidth?: string;\n}\n\nexport const HCollapsibleBox = React.forwardRef(function CollapsibleBox(\n  { open = false, defaultWidth = '400px', ...props }: HCollapsibleBoxProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const collapsibleRef = React.useRef<HTMLDivElement | null>(null);\n  const forkRef = useForkRef(ref, collapsibleRef);\n  const [resizing, setIsResizing] = React.useState(false);\n\n  useLayoutEffect(() => {\n    collapsibleRef.current?.style.setProperty('--collapsible-size', defaultWidth);\n  }, [defaultWidth]);\n\n  const isCollapsed = useIsCollapsed(open, collapsibleRef);\n  const children = isCollapsed && !open ? null : props.children;\n\n  return (\n    <Box\n      ref={forkRef}\n      {...props}\n      data-is-collapsed={!open}\n      data-collapse-orientation=\"horizontal\"\n      data-is-resizing={resizing}\n      onWidthResize={width => {\n        setIsResizing(true);\n        props.onWidthResize?.(width);\n      }}\n      onWidthResizeEnd={width => {\n        setIsResizing(false);\n        props.onWidthResizeEnd?.(width);\n        collapsibleRef.current?.style.setProperty('--collapsible-size', `${width}px`);\n      }}\n      className={clsx(\n        props.className,\n        styles['collapsible-box'],\n        'tcn-h-collapsible-box'\n      )}\n      children={children}\n    />\n  );\n});\n"],"names":["HCollapsibleBox","React","open","defaultWidth","props","ref","collapsibleRef","forkRef","useForkRef","resizing","setIsResizing","useLayoutEffect","children","useIsCollapsed","jsx","Box","width","clsx","styles"],"mappings":";;;;;;;;;;;AAYO,MAAMA,IAAkBC,EAAM,WAAW,SAC9C,EAAE,MAAAC,IAAO,IAAO,cAAAC,IAAe,SAAS,GAAGC,EAAA,GAC3CC,GACA;AACA,QAAMC,IAAiBL,EAAM,OAA8B,IAAI,GACzDM,IAAUC,EAAWH,GAAKC,CAAc,GACxC,CAACG,GAAUC,CAAa,IAAIT,EAAM,SAAS,EAAK;AAEtD,EAAAU,EAAgB,MAAM;AACpB,IAAAL,EAAe,SAAS,MAAM,YAAY,sBAAsBH,CAAY;AAAA,EAC9E,GAAG,CAACA,CAAY,CAAC;AAGjB,QAAMS,IADcC,EAAeX,GAAMI,CAAc,KACvB,CAACJ,IAAO,OAAOE,EAAM;AAErD,SACE,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKR;AAAA,MACJ,GAAGH;AAAA,MACJ,qBAAmB,CAACF;AAAA,MACpB,6BAA0B;AAAA,MAC1B,oBAAkBO;AAAA,MAClB,eAAe,CAAAO,MAAS;AACtB,QAAAN,EAAc,EAAI,GAClBN,EAAM,gBAAgBY,CAAK;AAAA,MAC7B;AAAA,MACA,kBAAkB,CAAAA,MAAS;AACzB,QAAAN,EAAc,EAAK,GACnBN,EAAM,mBAAmBY,CAAK,GAC9BV,EAAe,SAAS,MAAM,YAAY,sBAAsB,GAAGU,CAAK,IAAI;AAAA,MAC9E;AAAA,MACA,WAAWC;AAAA,QACTb,EAAM;AAAA,QACNc,EAAO,iBAAiB;AAAA,QACxB;AAAA,MAAA;AAAA,MAEF,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/stacks/h_stack.js

@@ -11,8 +11,8 @@ const tt = L.forwardRef(function({
   className: l,
   hAlign: d = "start",
   vAlign: m = "center",
-  inline: f,
-  allowFlow: c,
+  inline: c,
+  allowFlow: f,
   width: t = "default",
   minWidth: p,
   maxWidth: u,
@@ -80,10 +80,10 @@ const tt = L.forwardRef(function({
     F,
     {
       ref: E,
-      className: K(O["h-stack"], l, "h-stack", "stack"),
+      className: K(O["h-stack"], l, "tcn-h-stack", "tcn-stack"),
       style: I,
-      "data-inline": !!f,
-      "data-allow-flow": !!c,
+      "data-inline": !!c,
+      "data-allow-flow": !!f,
       "data-v-alignment": m,
       "data-h-alignment": d,
       "data-height": a,

package/dist/stacks/h_stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"h_stack.js","sources":["../../src/stacks/h_stack.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { HTMLAttributes } from 'react';\nimport { removeUndefinedProperties } from './utils/remove_undefined_properties.js';\nimport { CommonProps } from './types/common.js';\nimport { HorizontalProps, StackStyleProps } from './types/styles.js';\nimport styles from './stack.module.css';\nimport { isCustomSizeProp } from './utils/isCustomSizeProp.js';\n\nexport type HStackOwnProps = CommonProps & StackStyleProps & HorizontalProps;\nexport interface HStackProps<T extends HTMLElement = HTMLElement>\n  extends HStackOwnProps,\n    HTMLAttributes<T> {\n  as?: string;\n  children?: React.ReactNode;\n}\n\nexport const HStack = React.forwardRef(function HStack<T extends HTMLElement>(\n  {\n    as = 'div',\n    children,\n    style,\n    className,\n    hAlign = 'start',\n    vAlign = 'center',\n    inline,\n    allowFlow,\n    width = 'default',\n    minWidth,\n    maxWidth,\n    height = 'default',\n    growWeight: flexGrow,\n    shrinkWeight: flexShrink,\n    minHeight,\n    maxHeight,\n    padding,\n    paddingBlock,\n    paddingInline,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingTop,\n    paddingBottom,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    zIndex,\n    overflowX,\n    overflowY,\n    gap,\n    rowGap,\n    columnGap,\n    ...attr\n  }: HStackProps<T>,\n  ref: React.Ref<T>\n) {\n  const As = as as React.ElementType;\n  const defaultStyles: any = {\n    minWidth,\n    width: !isCustomSizeProp(width) ? width : undefined,\n    maxWidth,\n    minHeight,\n    height: !isCustomSizeProp(height) ? height : undefined,\n    maxHeight,\n    flexGrow,\n    flexShrink,\n    zIndex,\n    overflowX,\n    overflowY,\n    padding,\n    paddingBlock,\n    paddingInline,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingTop,\n    paddingBottom,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    gap,\n    rowGap,\n    columnGap,\n  };\n\n  const finalStyles: any = {\n    ...removeUndefinedProperties(defaultStyles),\n    ...style,\n  };\n\n  return (\n    <As\n      ref={ref}\n      className={clsx(styles['h-stack'], className, 'h-stack', 'stack')}\n      style={finalStyles}\n      data-inline={Boolean(inline)}\n      data-allow-flow={Boolean(allowFlow)}\n      data-v-alignment={vAlign}\n      data-h-alignment={hAlign}\n      data-height={height}\n      data-width={width}\n      data-overflow-x={overflowX}\n      data-overflow-y={overflowY}\n      {...attr}\n    >\n      {children}\n    </As>\n  );\n});\n"],"names":["HStack","React","as","children","style","className","hAlign","vAlign","inline","allowFlow","width","minWidth","maxWidth","height","flexGrow","flexShrink","minHeight","maxHeight","padding","paddingBlock","paddingInline","paddingInlineStart","paddingInlineEnd","paddingTop","paddingBottom","margin","marginBlock","marginInline","marginInlineStart","marginInlineEnd","marginTop","marginBottom","zIndex","overflowX","overflowY","gap","rowGap","columnGap","attr","ref","As","defaultStyles","isCustomSizeProp","finalStyles","removeUndefinedProperties","jsx","clsx","styles"],"mappings":";;;;;;AAgBO,MAAMA,KAASC,EAAM,WAAW,SACrC;AAAA,EACE,IAAAC,IAAK;AAAA,EACL,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,YAAYC;AAAA,EACZ,cAAcC;AAAA,EACd,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAKtC,GACLuC,IAAqB;AAAA,IACzB,UAAA9B;AAAA,IACA,OAAQ+B,EAAiBhC,CAAK,IAAY,SAARA;AAAA,IAClC,UAAAE;AAAA,IACA,WAAAI;AAAA,IACA,QAAS0B,EAAiB7B,CAAM,IAAa,SAATA;AAAA,IACpC,WAAAI;AAAA,IACA,UAAAH;AAAA,IACA,YAAAC;AAAA,IACA,QAAAiB;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAhB;AAAA,IACA,cAAAC;AAAA,IACA,eAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,KAAAI;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,GAGIM,IAAmB;AAAA,IACvB,GAAGC,EAA0BH,CAAa;AAAA,IAC1C,GAAGrC;AAAA,EAAA;AAGL,SACE,gBAAAyC;AAAA,IAACL;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWO,EAAKC,EAAO,SAAS,GAAG1C,GAAW,WAAW,OAAO;AAAA,MAChE,OAAOsC;AAAA,MACP,eAAa,EAAQnC;AAAA,MACrB,mBAAiB,EAAQC;AAAA,MACzB,oBAAkBF;AAAA,MAClB,oBAAkBD;AAAA,MAClB,eAAaO;AAAA,MACb,cAAYH;AAAA,MACZ,mBAAiBuB;AAAA,MACjB,mBAAiBC;AAAA,MAChB,GAAGI;AAAA,MAEH,UAAAnC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"h_stack.js","sources":["../../src/stacks/h_stack.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { HTMLAttributes } from 'react';\nimport { removeUndefinedProperties } from './utils/remove_undefined_properties.js';\nimport { CommonProps } from './types/common.js';\nimport { HorizontalProps, StackStyleProps } from './types/styles.js';\nimport styles from './stack.module.css';\nimport { isCustomSizeProp } from './utils/isCustomSizeProp.js';\n\nexport type HStackOwnProps = CommonProps & StackStyleProps & HorizontalProps;\nexport interface HStackProps<T extends HTMLElement = HTMLElement>\n  extends HStackOwnProps,\n    HTMLAttributes<T> {\n  as?: string;\n  children?: React.ReactNode;\n}\n\nexport const HStack = React.forwardRef(function HStack<T extends HTMLElement>(\n  {\n    as = 'div',\n    children,\n    style,\n    className,\n    hAlign = 'start',\n    vAlign = 'center',\n    inline,\n    allowFlow,\n    width = 'default',\n    minWidth,\n    maxWidth,\n    height = 'default',\n    growWeight: flexGrow,\n    shrinkWeight: flexShrink,\n    minHeight,\n    maxHeight,\n    padding,\n    paddingBlock,\n    paddingInline,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingTop,\n    paddingBottom,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    zIndex,\n    overflowX,\n    overflowY,\n    gap,\n    rowGap,\n    columnGap,\n    ...attr\n  }: HStackProps<T>,\n  ref: React.Ref<T>\n) {\n  const As = as as React.ElementType;\n  const defaultStyles: any = {\n    minWidth,\n    width: !isCustomSizeProp(width) ? width : undefined,\n    maxWidth,\n    minHeight,\n    height: !isCustomSizeProp(height) ? height : undefined,\n    maxHeight,\n    flexGrow,\n    flexShrink,\n    zIndex,\n    overflowX,\n    overflowY,\n    padding,\n    paddingBlock,\n    paddingInline,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingTop,\n    paddingBottom,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    gap,\n    rowGap,\n    columnGap,\n  };\n\n  const finalStyles: any = {\n    ...removeUndefinedProperties(defaultStyles),\n    ...style,\n  };\n\n  return (\n    <As\n      ref={ref}\n      className={clsx(styles['h-stack'], className, 'tcn-h-stack', 'tcn-stack')}\n      style={finalStyles}\n      data-inline={Boolean(inline)}\n      data-allow-flow={Boolean(allowFlow)}\n      data-v-alignment={vAlign}\n      data-h-alignment={hAlign}\n      data-height={height}\n      data-width={width}\n      data-overflow-x={overflowX}\n      data-overflow-y={overflowY}\n      {...attr}\n    >\n      {children}\n    </As>\n  );\n});\n"],"names":["HStack","React","as","children","style","className","hAlign","vAlign","inline","allowFlow","width","minWidth","maxWidth","height","flexGrow","flexShrink","minHeight","maxHeight","padding","paddingBlock","paddingInline","paddingInlineStart","paddingInlineEnd","paddingTop","paddingBottom","margin","marginBlock","marginInline","marginInlineStart","marginInlineEnd","marginTop","marginBottom","zIndex","overflowX","overflowY","gap","rowGap","columnGap","attr","ref","As","defaultStyles","isCustomSizeProp","finalStyles","removeUndefinedProperties","jsx","clsx","styles"],"mappings":";;;;;;AAgBO,MAAMA,KAASC,EAAM,WAAW,SACrC;AAAA,EACE,IAAAC,IAAK;AAAA,EACL,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,YAAYC;AAAA,EACZ,cAAcC;AAAA,EACd,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAKtC,GACLuC,IAAqB;AAAA,IACzB,UAAA9B;AAAA,IACA,OAAQ+B,EAAiBhC,CAAK,IAAY,SAARA;AAAA,IAClC,UAAAE;AAAA,IACA,WAAAI;AAAA,IACA,QAAS0B,EAAiB7B,CAAM,IAAa,SAATA;AAAA,IACpC,WAAAI;AAAA,IACA,UAAAH;AAAA,IACA,YAAAC;AAAA,IACA,QAAAiB;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAhB;AAAA,IACA,cAAAC;AAAA,IACA,eAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,KAAAI;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,GAGIM,IAAmB;AAAA,IACvB,GAAGC,EAA0BH,CAAa;AAAA,IAC1C,GAAGrC;AAAA,EAAA;AAGL,SACE,gBAAAyC;AAAA,IAACL;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWO,EAAKC,EAAO,SAAS,GAAG1C,GAAW,eAAe,WAAW;AAAA,MACxE,OAAOsC;AAAA,MACP,eAAa,EAAQnC;AAAA,MACrB,mBAAiB,EAAQC;AAAA,MACzB,oBAAkBF;AAAA,MAClB,oBAAkBD;AAAA,MAClB,eAAaO;AAAA,MACb,cAAYH;AAAA,MACZ,mBAAiBuB;AAAA,MACjB,mBAAiBC;AAAA,MAChB,GAAGI;AAAA,MAEH,UAAAnC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/stacks/spacer.js

@@ -1,25 +1,25 @@
-import { jsx as d } from "react/jsx-runtime";
-import { clsx as m } from "clsx";
-import p from "react";
-const g = p.forwardRef(function({
+import { jsx as p } from "react/jsx-runtime";
+import { clsx as d } from "clsx";
+import m from "react";
+const g = m.forwardRef(function({
   width: t = "auto",
-  height: o = "auto",
+  height: e = "auto",
   fullHeight: n = !1,
   fullWidth: a = !1,
   fillSpaceWeight: r = 1,
   style: s,
-  className: f
-}, c) {
-  const l = t === "auto" && o === "auto" ? r : void 0, e = a ? "100%" : t, i = n ? "100%" : o;
-  return /* @__PURE__ */ d(
+  className: c
+}, f) {
+  const l = t === "auto" && e === "auto" ? r : void 0, o = a ? "100%" : t, i = n ? "100%" : e;
+  return /* @__PURE__ */ p(
     "div",
     {
-      ref: c,
+      ref: f,
       style: {
         ...s,
         position: "relative",
-        width: e,
-        minWidth: e,
+        width: o,
+        minWidth: o,
         height: i,
         minHeight: i,
         overflow: "hidden",
@@ -27,7 +27,7 @@ const g = p.forwardRef(function({
         zIndex: 1,
         flex: l
       },
-      className: m("spacer", f)
+      className: d("spacer", c, "tcn-spacer")
     }
   );
 });

package/dist/stacks/spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"spacer.js","sources":["../../src/stacks/spacer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\n\nexport interface SpacerProps {\n  width?: React.CSSProperties['width'];\n  height?: React.CSSProperties['height'];\n  fullHeight?: boolean;\n  fullWidth?: boolean;\n  fillSpaceWeight?: number;\n  style?: React.CSSProperties;\n  className?: string;\n}\n\nexport const Spacer = React.forwardRef<HTMLDivElement, SpacerProps>(function Spacer(\n  {\n    width = 'auto',\n    height = 'auto',\n    fullHeight = false,\n    fullWidth = false,\n    fillSpaceWeight = 1,\n    style,\n    className,\n  }: SpacerProps,\n  ref\n) {\n  const flex = width === 'auto' && height === 'auto' ? fillSpaceWeight : undefined;\n  const finalWidth = fullWidth ? '100%' : width;\n  const finalHeight = fullHeight ? '100%' : height;\n  return (\n    <div\n      ref={ref}\n      style={{\n        ...style,\n        position: 'relative',\n        width: finalWidth,\n        minWidth: finalWidth,\n        height: finalHeight,\n        minHeight: finalHeight,\n        overflow: 'hidden',\n        pointerEvents: 'none',\n        zIndex: 1,\n        flex,\n      }}\n      className={clsx('spacer', className)}\n    ></div>\n  );\n});\n"],"names":["Spacer","React","width","height","fullHeight","fullWidth","fillSpaceWeight","style","className","ref","flex","finalWidth","finalHeight","jsx","clsx"],"mappings":";;;AAaO,MAAMA,IAASC,EAAM,WAAwC,SAClE;AAAA,EACE,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,iBAAAC,IAAkB;AAAA,EAClB,OAAAC;AAAA,EACA,WAAAC;AACF,GACAC,GACA;AACA,QAAMC,IAAOR,MAAU,UAAUC,MAAW,SAASG,IAAkB,QACjEK,IAAaN,IAAY,SAASH,GAClCU,IAAcR,IAAa,SAASD;AAC1C,SACE,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,OAAO;AAAA,QACL,GAAGF;AAAA,QACH,UAAU;AAAA,QACV,OAAOI;AAAA,QACP,UAAUA;AAAA,QACV,QAAQC;AAAA,QACR,WAAWA;AAAA,QACX,UAAU;AAAA,QACV,eAAe;AAAA,QACf,QAAQ;AAAA,QACR,MAAAF;AAAA,MAAA;AAAA,MAEF,WAAWI,EAAK,UAAUN,CAAS;AAAA,IAAA;AAAA,EAAA;AAGzC,CAAC;"}
+{"version":3,"file":"spacer.js","sources":["../../src/stacks/spacer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\n\nexport interface SpacerProps {\n  width?: React.CSSProperties['width'];\n  height?: React.CSSProperties['height'];\n  fullHeight?: boolean;\n  fullWidth?: boolean;\n  fillSpaceWeight?: number;\n  style?: React.CSSProperties;\n  className?: string;\n}\n\nexport const Spacer = React.forwardRef<HTMLDivElement, SpacerProps>(function Spacer(\n  {\n    width = 'auto',\n    height = 'auto',\n    fullHeight = false,\n    fullWidth = false,\n    fillSpaceWeight = 1,\n    style,\n    className,\n  }: SpacerProps,\n  ref\n) {\n  const flex = width === 'auto' && height === 'auto' ? fillSpaceWeight : undefined;\n  const finalWidth = fullWidth ? '100%' : width;\n  const finalHeight = fullHeight ? '100%' : height;\n  return (\n    <div\n      ref={ref}\n      style={{\n        ...style,\n        position: 'relative',\n        width: finalWidth,\n        minWidth: finalWidth,\n        height: finalHeight,\n        minHeight: finalHeight,\n        overflow: 'hidden',\n        pointerEvents: 'none',\n        zIndex: 1,\n        flex,\n      }}\n      className={clsx('spacer', className, 'tcn-spacer')}\n    ></div>\n  );\n});\n"],"names":["Spacer","React","width","height","fullHeight","fullWidth","fillSpaceWeight","style","className","ref","flex","finalWidth","finalHeight","jsx","clsx"],"mappings":";;;AAaO,MAAMA,IAASC,EAAM,WAAwC,SAClE;AAAA,EACE,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,iBAAAC,IAAkB;AAAA,EAClB,OAAAC;AAAA,EACA,WAAAC;AACF,GACAC,GACA;AACA,QAAMC,IAAOR,MAAU,UAAUC,MAAW,SAASG,IAAkB,QACjEK,IAAaN,IAAY,SAASH,GAClCU,IAAcR,IAAa,SAASD;AAC1C,SACE,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,OAAO;AAAA,QACL,GAAGF;AAAA,QACH,UAAU;AAAA,QACV,OAAOI;AAAA,QACP,UAAUA;AAAA,QACV,QAAQC;AAAA,QACR,WAAWA;AAAA,QACX,UAAU;AAAA,QACV,eAAe;AAAA,QACf,QAAQ;AAAA,QACR,MAAAF;AAAA,MAAA;AAAA,MAEF,WAAWI,EAAK,UAAUN,GAAW,YAAY;AAAA,IAAA;AAAA,EAAA;AAGvD,CAAC;"}

package/dist/stacks/story_components/circle.js

@@ -1,8 +1,8 @@
 import { jsx as f } from "react/jsx-runtime";
 import s from "react";
 import { ZStack as m } from "../z_stack.js";
-import { clsx as a } from "clsx";
-import '../../circle.css';const n = "_circle_2f733a0", p = { circle: n }, y = s.forwardRef(function({ color: r = "#90d9c7", size: c = "150px", style: t, className: o, ...e }, l) {
+import { clsx as n } from "clsx";
+import '../../circle.css';const a = "_circle_2f733a0", p = { circle: a }, y = s.forwardRef(function({ color: r = "#90d9c7", size: c = "150px", style: t, className: o, ...e }, l) {
   const i = {
     ...t,
     "--color": r
@@ -14,7 +14,7 @@ import '../../circle.css';const n = "_circle_2f733a0", p = { circle: n }, y = s.
       style: i,
       width: c,
       height: c,
-      className: a(o, p.circle),
+      className: n(o, p.circle, "tcn-circle"),
       ...e
     }
   );

package/dist/stacks/story_components/circle.js.map

@@ -1 +1 @@
-{"version":3,"file":"circle.js","sources":["../../../src/stacks/story_components/circle.tsx"],"sourcesContent":["import React from 'react';\nimport { ZStack, ZStackProps } from '../z_stack.js';\nimport styles from './circle.module.css';\nimport { clsx } from 'clsx';\n\nexport interface CircleProps extends ZStackProps {\n  color?: string;\n  size?: string;\n}\n\nexport const Circle = React.forwardRef(function Circle(\n  { color = '#90d9c7', size = '150px', style, className, ...props }: CircleProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const finalStyle = {\n    ...style,\n    '--color': color,\n  };\n\n  return (\n    <ZStack\n      ref={ref}\n      style={finalStyle}\n      width={size}\n      height={size}\n      className={clsx(className, styles['circle'])}\n      {...props}\n    />\n  );\n});\n"],"names":["Circle","React","color","size","style","className","props","ref","finalStyle","jsx","ZStack","clsx","styles"],"mappings":";;;;gDAUaA,IAASC,EAAM,WAAW,SACrC,EAAE,OAAAC,IAAQ,WAAW,MAAAC,IAAO,SAAS,OAAAC,GAAO,WAAAC,GAAW,GAAGC,EAAA,GAC1DC,GACA;AACA,QAAMC,IAAa;AAAA,IACjB,GAAGJ;AAAA,IACH,WAAWF;AAAA,EAAA;AAGb,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,OAAOC;AAAA,MACP,OAAOL;AAAA,MACP,QAAQA;AAAA,MACR,WAAWQ,EAAKN,GAAWO,EAAO,MAAS;AAAA,MAC1C,GAAGN;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
+{"version":3,"file":"circle.js","sources":["../../../src/stacks/story_components/circle.tsx"],"sourcesContent":["import React from 'react';\nimport { ZStack, ZStackProps } from '../z_stack.js';\nimport styles from './circle.module.css';\nimport { clsx } from 'clsx';\n\nexport interface CircleProps extends ZStackProps {\n  color?: string;\n  size?: string;\n}\n\nexport const Circle = React.forwardRef(function Circle(\n  { color = '#90d9c7', size = '150px', style, className, ...props }: CircleProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const finalStyle = {\n    ...style,\n    '--color': color,\n  };\n\n  return (\n    <ZStack\n      ref={ref}\n      style={finalStyle}\n      width={size}\n      height={size}\n      className={clsx(className, styles['circle'], 'tcn-circle')}\n      {...props}\n    />\n  );\n});\n"],"names":["Circle","React","color","size","style","className","props","ref","finalStyle","jsx","ZStack","clsx","styles"],"mappings":";;;;gDAUaA,IAASC,EAAM,WAAW,SACrC,EAAE,OAAAC,IAAQ,WAAW,MAAAC,IAAO,SAAS,OAAAC,GAAO,WAAAC,GAAW,GAAGC,EAAA,GAC1DC,GACA;AACA,QAAMC,IAAa;AAAA,IACjB,GAAGJ;AAAA,IACH,WAAWF;AAAA,EAAA;AAGb,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,OAAOC;AAAA,MACP,OAAOL;AAAA,MACP,QAAQA;AAAA,MACR,WAAWQ,EAAKN,GAAWO,EAAO,QAAW,YAAY;AAAA,MACxD,GAAGN;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/stacks/story_components/picture_placeholder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"picture_placeholder.d.ts","sourceRoot":"","sources":["../../../src/stacks/story_components/picture_placeholder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI9C,MAAM,WAAW,uBAAwB,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,kBAAkB,+FAgC7B,CAAC"}
+{"version":3,"file":"picture_placeholder.d.ts","sourceRoot":"","sources":["../../../src/stacks/story_components/picture_placeholder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI9C,MAAM,WAAW,uBAAwB,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,kBAAkB,+FAoC7B,CAAC"}

package/dist/stacks/story_components/picture_placeholder.js

@@ -20,7 +20,11 @@ import '../../picture_placeholder.css';const i = "_picture-placeholder_ec357fb",
       height: c,
       viewBox: "0 0 16 16",
       xmlns: "http://www.w3.org/2000/svg",
-      className: s(t, p["picture-placeholder"]),
+      className: s(
+        t,
+        p["picture-placeholder"],
+        "tcn-picture-placeholder"
+      ),
       style: v,
       ...o,
       children: /* @__PURE__ */ e(

package/dist/stacks/story_components/picture_placeholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"picture_placeholder.js","sources":["../../../src/stacks/story_components/picture_placeholder.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport styles from './picture_placeholder.module.css';\nimport { clsx } from 'clsx';\n\nexport interface PicturePlaceholderProps extends HTMLAttributes<SVGSVGElement> {\n  color?: string;\n  size?: string;\n}\n\nexport const PicturePlaceholder = React.forwardRef(function PicturePlaceholder(\n  {\n    color = 'currentColor',\n    size = '150px',\n    style,\n    className,\n    ...props\n  }: PicturePlaceholderProps,\n  ref: React.Ref<SVGSVGElement>\n) {\n  const finalStyle = {\n    ...style,\n    '--color': color,\n  };\n\n  return (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 16 16\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={clsx(className, styles['picture-placeholder'])}\n      style={finalStyle}\n      {...props}\n    >\n      <path\n        d=\"m 4 1 c -1.644531 0 -3 1.355469 -3 3 v 1 h 1 v -1 c 0 -1.109375 0.890625 -2 2 -2 h 1 v -1 z m 2 0 v 1 h 4 v -1 z m 5 0 v 1 h 1 c 1.109375 0 2 0.890625 2 2 v 1 h 1 v -1 c 0 -1.644531 -1.355469 -3 -3 -3 z m -5 4 c -0.550781 0 -1 0.449219 -1 1 s 0.449219 1 1 1 s 1 -0.449219 1 -1 s -0.449219 -1 -1 -1 z m -5 1 v 4 h 1 v -4 z m 13 0 v 4 h 1 v -4 z m -4.5 2 l -2 2 l -1.5 -1 l -2 2 v 0.5 c 0 0.5 0.5 0.5 0.5 0.5 h 7 s 0.472656 -0.035156 0.5 -0.5 v -1 z m -8.5 3 v 1 c 0 1.644531 1.355469 3 3 3 h 1 v -1 h -1 c -1.109375 0 -2 -0.890625 -2 -2 v -1 z m 13 0 v 1 c 0 1.109375 -0.890625 2 -2 2 h -1 v 1 h 1 c 1.644531 0 3 -1.355469 3 -3 v -1 z m -8 3 v 1 h 4 v -1 z m 0 0\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n});\n"],"names":["PicturePlaceholder","React","color","size","style","className","props","ref","finalStyle","jsx","clsx","styles"],"mappings":";;;4EASaA,IAAqBC,EAAM,WAAW,SACjD;AAAA,EACE,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAa;AAAA,IACjB,GAAGJ;AAAA,IACH,WAAWF;AAAA,EAAA;AAGb,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,OAAOJ;AAAA,MACP,QAAQA;AAAA,MACR,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,WAAWO,EAAKL,GAAWM,EAAO,qBAAqB,CAAC;AAAA,MACxD,OAAOH;AAAA,MACN,GAAGF;AAAA,MAEJ,UAAA,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IACP;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"picture_placeholder.js","sources":["../../../src/stacks/story_components/picture_placeholder.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport styles from './picture_placeholder.module.css';\nimport { clsx } from 'clsx';\n\nexport interface PicturePlaceholderProps extends HTMLAttributes<SVGSVGElement> {\n  color?: string;\n  size?: string;\n}\n\nexport const PicturePlaceholder = React.forwardRef(function PicturePlaceholder(\n  {\n    color = 'currentColor',\n    size = '150px',\n    style,\n    className,\n    ...props\n  }: PicturePlaceholderProps,\n  ref: React.Ref<SVGSVGElement>\n) {\n  const finalStyle = {\n    ...style,\n    '--color': color,\n  };\n\n  return (\n    <svg\n      ref={ref}\n      width={size}\n      height={size}\n      viewBox=\"0 0 16 16\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={clsx(\n        className,\n        styles['picture-placeholder'],\n        'tcn-picture-placeholder'\n      )}\n      style={finalStyle}\n      {...props}\n    >\n      <path\n        d=\"m 4 1 c -1.644531 0 -3 1.355469 -3 3 v 1 h 1 v -1 c 0 -1.109375 0.890625 -2 2 -2 h 1 v -1 z m 2 0 v 1 h 4 v -1 z m 5 0 v 1 h 1 c 1.109375 0 2 0.890625 2 2 v 1 h 1 v -1 c 0 -1.644531 -1.355469 -3 -3 -3 z m -5 4 c -0.550781 0 -1 0.449219 -1 1 s 0.449219 1 1 1 s 1 -0.449219 1 -1 s -0.449219 -1 -1 -1 z m -5 1 v 4 h 1 v -4 z m 13 0 v 4 h 1 v -4 z m -4.5 2 l -2 2 l -1.5 -1 l -2 2 v 0.5 c 0 0.5 0.5 0.5 0.5 0.5 h 7 s 0.472656 -0.035156 0.5 -0.5 v -1 z m -8.5 3 v 1 c 0 1.644531 1.355469 3 3 3 h 1 v -1 h -1 c -1.109375 0 -2 -0.890625 -2 -2 v -1 z m 13 0 v 1 c 0 1.109375 -0.890625 2 -2 2 h -1 v 1 h 1 c 1.644531 0 3 -1.355469 3 -3 v -1 z m -8 3 v 1 h 4 v -1 z m 0 0\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n});\n"],"names":["PicturePlaceholder","React","color","size","style","className","props","ref","finalStyle","jsx","clsx","styles"],"mappings":";;;4EASaA,IAAqBC,EAAM,WAAW,SACjD;AAAA,EACE,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAa;AAAA,IACjB,GAAGJ;AAAA,IACH,WAAWF;AAAA,EAAA;AAGb,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,OAAOJ;AAAA,MACP,QAAQA;AAAA,MACR,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,WAAWO;AAAA,QACTL;AAAA,QACAM,EAAO,qBAAqB;AAAA,QAC5B;AAAA,MAAA;AAAA,MAEF,OAAOH;AAAA,MACN,GAAGF;AAAA,MAEJ,UAAA,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IACP;AAAA,EAAA;AAGN,CAAC;"}

package/dist/stacks/story_components/rect.js

@@ -1,12 +1,12 @@
-import { jsx as a } from "react/jsx-runtime";
-import l from "react";
-import { Box as n } from "../box/box.js";
+import { jsx as n } from "react/jsx-runtime";
+import a from "react";
+import { Box as l } from "../box/box.js";
 import { clsx as i } from "clsx";
-import '../../rect.css';const p = "_rect_60482cd", d = { rect: p }, j = l.forwardRef(function({
+import '../../rect.css';const p = "_rect_60482cd", d = { rect: p }, j = a.forwardRef(function({
   color: t = "#acdef0",
   style: o,
-  className: r,
-  width: c = "100%",
+  className: c,
+  width: r = "100%",
   height: e = "auto",
   ...s
 }, f) {
@@ -14,13 +14,13 @@ import '../../rect.css';const p = "_rect_60482cd", d = { rect: p }, j = l.forwar
     ...o,
     "--color": t
   };
-  return /* @__PURE__ */ a(
-    n,
+  return /* @__PURE__ */ n(
+    l,
     {
       ref: f,
       style: m,
-      className: i(r, d.rect),
-      width: c,
+      className: i(c, d.rect, "tcn-rect"),
+      width: r,
       height: e,
       ...s
     }

package/dist/stacks/story_components/rect.js.map

@@ -1 +1 @@
-{"version":3,"file":"rect.js","sources":["../../../src/stacks/story_components/rect.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, BoxProps } from '../box/box.js';\nimport styles from './rect.module.css';\nimport { clsx } from 'clsx';\n\nexport interface RectProps extends BoxProps {\n  color?: string;\n}\n\nexport const Rect = React.forwardRef(function Rect(\n  {\n    color = '#acdef0',\n    style,\n    className,\n    width = '100%',\n    height = 'auto',\n    ...props\n  }: RectProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const finalStyle = {\n    ...style,\n    '--color': color,\n  };\n\n  return (\n    <Box\n      ref={ref}\n      style={finalStyle}\n      className={clsx(className, styles['rect'])}\n      width={width}\n      height={height}\n      {...props}\n    />\n  );\n});\n"],"names":["Rect","React","color","style","className","width","height","props","ref","finalStyle","jsx","Box","clsx","styles"],"mappings":";;;;4CASaA,IAAOC,EAAM,WAAW,SACnC;AAAA,EACE,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAa;AAAA,IACjB,GAAGN;AAAA,IACH,WAAWD;AAAA,EAAA;AAGb,SACE,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,OAAOC;AAAA,MACP,WAAWG,EAAKR,GAAWS,EAAO,IAAO;AAAA,MACzC,OAAAR;AAAA,MACA,QAAAC;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
+{"version":3,"file":"rect.js","sources":["../../../src/stacks/story_components/rect.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, BoxProps } from '../box/box.js';\nimport styles from './rect.module.css';\nimport { clsx } from 'clsx';\n\nexport interface RectProps extends BoxProps {\n  color?: string;\n}\n\nexport const Rect = React.forwardRef(function Rect(\n  {\n    color = '#acdef0',\n    style,\n    className,\n    width = '100%',\n    height = 'auto',\n    ...props\n  }: RectProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const finalStyle = {\n    ...style,\n    '--color': color,\n  };\n\n  return (\n    <Box\n      ref={ref}\n      style={finalStyle}\n      className={clsx(className, styles['rect'], 'tcn-rect')}\n      width={width}\n      height={height}\n      {...props}\n    />\n  );\n});\n"],"names":["Rect","React","color","style","className","width","height","props","ref","finalStyle","jsx","Box","clsx","styles"],"mappings":";;;;4CASaA,IAAOC,EAAM,WAAW,SACnC;AAAA,EACE,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAa;AAAA,IACjB,GAAGN;AAAA,IACH,WAAWD;AAAA,EAAA;AAGb,SACE,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,OAAOC;AAAA,MACP,WAAWG,EAAKR,GAAWS,EAAO,MAAS,UAAU;AAAA,MACrD,OAAAR;AAAA,MACA,QAAAC;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/stacks/v_collapsible_box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"v_collapsible_box.d.ts","sourceRoot":"","sources":["../../src/stacks/v_collapsible_box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,EAAO,QAAQ,EAAE,MAAM,cAAc,CAAC;AAI7C,MAAM,WAAW,oBAAqB,SAAQ,QAAQ;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,eAAe,6FAmC1B,CAAC"}
+{"version":3,"file":"v_collapsible_box.d.ts","sourceRoot":"","sources":["../../src/stacks/v_collapsible_box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,EAAO,QAAQ,EAAE,MAAM,cAAc,CAAC;AAI7C,MAAM,WAAW,oBAAqB,SAAQ,QAAQ;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,eAAe,6FAuC1B,CAAC"}

package/dist/stacks/v_collapsible_box.js

@@ -8,33 +8,37 @@ import "../utils/hooks/use_resize_observer.js";
 import { clsx as d } from "clsx";
 import { Box as R } from "./box/box.js";
 import { s as x } from "../collapsible_box.module-BiS98xXA.js";
-import { useIsCollapsed as z } from "./utils/use_is_collapsed.js";
-const j = t.forwardRef(function({ open: l = !1, defaultHeight: i = "400px", ...e }, a) {
-  const s = t.useRef(null), n = u(a, s), [c, r] = t.useState(!1);
+import { useIsCollapsed as b } from "./utils/use_is_collapsed.js";
+const _ = t.forwardRef(function({ open: l = !1, defaultHeight: i = "400px", ...e }, a) {
+  const s = t.useRef(null), c = u(a, s), [n, r] = t.useState(!1);
   p(() => {
     s.current?.style.setProperty("--collapsible-size", i);
   }, [i]);
-  const f = z(l, s) && !l ? null : e.children;
+  const f = b(l, s) && !l ? null : e.children;
   return /* @__PURE__ */ m(
     R,
     {
-      ref: n,
+      ref: c,
       ...e,
       "data-is-collapsed": !l,
       "data-collapse-orientation": "vertical",
-      "data-is-resizing": c,
+      "data-is-resizing": n,
       onHeightResize: (o) => {
         r(!0), e.onHeightResize?.(o);
       },
       onHeightResizeEnd: (o) => {
         r(!1), s.current?.style.setProperty("--collapsible-size", `${o}px`), e.onHeightResizeEnd?.(o);
       },
-      className: d(e.className, x["collapsible-box"]),
+      className: d(
+        e.className,
+        x["collapsible-box"],
+        "tcn-v-collapsible-box"
+      ),
       children: f
     }
   );
 });
 export {
-  j as VCollapsibleBox
+  _ as VCollapsibleBox
 };
 //# sourceMappingURL=v_collapsible_box.js.map

package/dist/stacks/v_collapsible_box.js.map

@@ -1 +1 @@
-{"version":3,"file":"v_collapsible_box.js","sources":["../../src/stacks/v_collapsible_box.tsx"],"sourcesContent":["import React, { useLayoutEffect } from 'react';\nimport { useForkRef } from '../utils/index.js';\nimport { clsx } from 'clsx';\nimport { Box, BoxProps } from './box/box.js';\nimport styles from './collapsible_box.module.css';\nimport { useIsCollapsed } from './utils/use_is_collapsed.js';\n\nexport interface VCollapsibleBoxProps extends BoxProps {\n  open?: boolean;\n  defaultHeight?: string;\n}\n\nexport const VCollapsibleBox = React.forwardRef(function CollapsibleBox(\n  { open = false, defaultHeight = '400px', ...props }: VCollapsibleBoxProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const collapsibleRef = React.useRef<HTMLDivElement | null>(null);\n  const forkRef = useForkRef(ref, collapsibleRef);\n  const [resizing, setIsResizing] = React.useState(false);\n\n  useLayoutEffect(() => {\n    collapsibleRef.current?.style.setProperty('--collapsible-size', defaultHeight);\n  }, [defaultHeight]);\n\n  const isCollapsed = useIsCollapsed(open, collapsibleRef);\n  const children = isCollapsed && !open ? null : props.children;\n\n  return (\n    <Box\n      ref={forkRef}\n      {...props}\n      data-is-collapsed={!open}\n      data-collapse-orientation=\"vertical\"\n      data-is-resizing={resizing}\n      onHeightResize={height => {\n        setIsResizing(true);\n        props.onHeightResize?.(height);\n      }}\n      onHeightResizeEnd={height => {\n        setIsResizing(false);\n        collapsibleRef.current?.style.setProperty('--collapsible-size', `${height}px`);\n        props.onHeightResizeEnd?.(height);\n      }}\n      className={clsx(props.className, styles['collapsible-box'])}\n      children={children}\n    />\n  );\n});\n"],"names":["VCollapsibleBox","React","open","defaultHeight","props","ref","collapsibleRef","forkRef","useForkRef","resizing","setIsResizing","useLayoutEffect","children","useIsCollapsed","jsx","Box","height","clsx","styles"],"mappings":";;;;;;;;;;;AAYO,MAAMA,IAAkBC,EAAM,WAAW,SAC9C,EAAE,MAAAC,IAAO,IAAO,eAAAC,IAAgB,SAAS,GAAGC,EAAA,GAC5CC,GACA;AACA,QAAMC,IAAiBL,EAAM,OAA8B,IAAI,GACzDM,IAAUC,EAAWH,GAAKC,CAAc,GACxC,CAACG,GAAUC,CAAa,IAAIT,EAAM,SAAS,EAAK;AAEtD,EAAAU,EAAgB,MAAM;AACpB,IAAAL,EAAe,SAAS,MAAM,YAAY,sBAAsBH,CAAa;AAAA,EAC/E,GAAG,CAACA,CAAa,CAAC;AAGlB,QAAMS,IADcC,EAAeX,GAAMI,CAAc,KACvB,CAACJ,IAAO,OAAOE,EAAM;AAErD,SACE,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKR;AAAA,MACJ,GAAGH;AAAA,MACJ,qBAAmB,CAACF;AAAA,MACpB,6BAA0B;AAAA,MAC1B,oBAAkBO;AAAA,MAClB,gBAAgB,CAAAO,MAAU;AACxB,QAAAN,EAAc,EAAI,GAClBN,EAAM,iBAAiBY,CAAM;AAAA,MAC/B;AAAA,MACA,mBAAmB,CAAAA,MAAU;AAC3B,QAAAN,EAAc,EAAK,GACnBJ,EAAe,SAAS,MAAM,YAAY,sBAAsB,GAAGU,CAAM,IAAI,GAC7EZ,EAAM,oBAAoBY,CAAM;AAAA,MAClC;AAAA,MACA,WAAWC,EAAKb,EAAM,WAAWc,EAAO,iBAAiB,CAAC;AAAA,MAC1D,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"v_collapsible_box.js","sources":["../../src/stacks/v_collapsible_box.tsx"],"sourcesContent":["import React, { useLayoutEffect } from 'react';\nimport { useForkRef } from '../utils/index.js';\nimport { clsx } from 'clsx';\nimport { Box, BoxProps } from './box/box.js';\nimport styles from './collapsible_box.module.css';\nimport { useIsCollapsed } from './utils/use_is_collapsed.js';\n\nexport interface VCollapsibleBoxProps extends BoxProps {\n  open?: boolean;\n  defaultHeight?: string;\n}\n\nexport const VCollapsibleBox = React.forwardRef(function CollapsibleBox(\n  { open = false, defaultHeight = '400px', ...props }: VCollapsibleBoxProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const collapsibleRef = React.useRef<HTMLDivElement | null>(null);\n  const forkRef = useForkRef(ref, collapsibleRef);\n  const [resizing, setIsResizing] = React.useState(false);\n\n  useLayoutEffect(() => {\n    collapsibleRef.current?.style.setProperty('--collapsible-size', defaultHeight);\n  }, [defaultHeight]);\n\n  const isCollapsed = useIsCollapsed(open, collapsibleRef);\n  const children = isCollapsed && !open ? null : props.children;\n\n  return (\n    <Box\n      ref={forkRef}\n      {...props}\n      data-is-collapsed={!open}\n      data-collapse-orientation=\"vertical\"\n      data-is-resizing={resizing}\n      onHeightResize={height => {\n        setIsResizing(true);\n        props.onHeightResize?.(height);\n      }}\n      onHeightResizeEnd={height => {\n        setIsResizing(false);\n        collapsibleRef.current?.style.setProperty('--collapsible-size', `${height}px`);\n        props.onHeightResizeEnd?.(height);\n      }}\n      className={clsx(\n        props.className,\n        styles['collapsible-box'],\n        'tcn-v-collapsible-box'\n      )}\n      children={children}\n    />\n  );\n});\n"],"names":["VCollapsibleBox","React","open","defaultHeight","props","ref","collapsibleRef","forkRef","useForkRef","resizing","setIsResizing","useLayoutEffect","children","useIsCollapsed","jsx","Box","height","clsx","styles"],"mappings":";;;;;;;;;;;AAYO,MAAMA,IAAkBC,EAAM,WAAW,SAC9C,EAAE,MAAAC,IAAO,IAAO,eAAAC,IAAgB,SAAS,GAAGC,EAAA,GAC5CC,GACA;AACA,QAAMC,IAAiBL,EAAM,OAA8B,IAAI,GACzDM,IAAUC,EAAWH,GAAKC,CAAc,GACxC,CAACG,GAAUC,CAAa,IAAIT,EAAM,SAAS,EAAK;AAEtD,EAAAU,EAAgB,MAAM;AACpB,IAAAL,EAAe,SAAS,MAAM,YAAY,sBAAsBH,CAAa;AAAA,EAC/E,GAAG,CAACA,CAAa,CAAC;AAGlB,QAAMS,IADcC,EAAeX,GAAMI,CAAc,KACvB,CAACJ,IAAO,OAAOE,EAAM;AAErD,SACE,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKR;AAAA,MACJ,GAAGH;AAAA,MACJ,qBAAmB,CAACF;AAAA,MACpB,6BAA0B;AAAA,MAC1B,oBAAkBO;AAAA,MAClB,gBAAgB,CAAAO,MAAU;AACxB,QAAAN,EAAc,EAAI,GAClBN,EAAM,iBAAiBY,CAAM;AAAA,MAC/B;AAAA,MACA,mBAAmB,CAAAA,MAAU;AAC3B,QAAAN,EAAc,EAAK,GACnBJ,EAAe,SAAS,MAAM,YAAY,sBAAsB,GAAGU,CAAM,IAAI,GAC7EZ,EAAM,oBAAoBY,CAAM;AAAA,MAClC;AAAA,MACA,WAAWC;AAAA,QACTb,EAAM;AAAA,QACNc,EAAO,iBAAiB;AAAA,QACxB;AAAA,MAAA;AAAA,MAEF,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/stacks/v_stack.js

@@ -7,8 +7,8 @@ import { isCustomSizeProp as s } from "./utils/isCustomSizeProp.js";
 const tt = K.forwardRef(function({
   as: l = "div",
   children: i,
-  style: d,
-  className: n,
+  style: n,
+  className: d,
   hAlign: f = "center",
   vAlign: m = "start",
   inline: t,
@@ -75,13 +75,13 @@ const tt = K.forwardRef(function({
     columnGap: q
   }, H = {
     ...L(G),
-    ...d
+    ...n
   };
   return /* @__PURE__ */ I(
     F,
     {
       ref: E,
-      className: J(M["v-stack"], n, "v-stack", "stack"),
+      className: J(M["v-stack"], d, "tcn-v-stack", "tcn-stack"),
       style: H,
       "data-inline": !!t,
       "data-allow-flow": !!c,

package/dist/stacks/v_stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"v_stack.js","sources":["../../src/stacks/v_stack.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { HTMLAttributes } from 'react';\nimport { removeUndefinedProperties } from './utils/remove_undefined_properties.js';\nimport { CommonProps } from './types/common.js';\nimport { StackStyleProps, VerticalProps } from './types/styles.js';\nimport styles from './stack.module.css';\nimport { isCustomSizeProp } from './utils/isCustomSizeProp.js';\n\nexport type VStackOwnProps = CommonProps & StackStyleProps & VerticalProps;\n\nexport interface VStackProps<T extends HTMLElement = HTMLElement>\n  extends VStackOwnProps,\n    HTMLAttributes<T> {\n  as?: string;\n  children?: React.ReactNode;\n}\n\nexport const VStack = React.forwardRef(function VStack<\n  T extends HTMLElement = HTMLElement,\n>(\n  {\n    as = 'div',\n    children,\n    style,\n    className,\n    hAlign = 'center',\n    vAlign = 'start',\n    inline,\n    allowFlow,\n    width = 'default',\n    minWidth,\n    maxWidth,\n    height = 'default',\n    minHeight,\n    maxHeight,\n    growWeight: flexGrow,\n    shrinkWeight: flexShrink,\n    padding,\n    paddingBlock,\n    paddingInline,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingTop,\n    paddingBottom,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    zIndex,\n    overflowY,\n    overflowX,\n    gap,\n    rowGap,\n    columnGap,\n    ...attr\n  }: VStackProps<T>,\n  ref: React.Ref<T>\n) {\n  const As = as as React.ElementType;\n  const defaultStyles: any = {\n    display: inline == null ? undefined : inline ? 'inline-flex' : 'flex',\n    minWidth,\n    width: !isCustomSizeProp(width) ? width : undefined,\n    maxWidth,\n    minHeight,\n    height: !isCustomSizeProp(height) ? height : undefined,\n    maxHeight,\n    flexGrow,\n    flexShrink,\n    zIndex,\n    overflowX,\n    overflowY,\n    padding,\n    paddingBlock,\n    paddingInline,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingTop,\n    paddingBottom,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    gap,\n    rowGap,\n    columnGap,\n  };\n\n  const finalStyles: React.CSSProperties = {\n    ...removeUndefinedProperties(defaultStyles),\n    ...style,\n  };\n\n  return (\n    <As\n      ref={ref}\n      className={clsx(styles['v-stack'], className, 'v-stack', 'stack')}\n      style={finalStyles}\n      data-inline={Boolean(inline)}\n      data-allow-flow={Boolean(allowFlow)}\n      data-v-alignment={vAlign}\n      data-h-alignment={hAlign}\n      data-height={height}\n      data-width={width}\n      data-overflow-y={overflowY}\n      data-overflow-x={overflowX}\n      {...attr}\n    >\n      {children}\n    </As>\n  );\n});\n"],"names":["VStack","React","as","children","style","className","hAlign","vAlign","inline","allowFlow","width","minWidth","maxWidth","height","minHeight","maxHeight","flexGrow","flexShrink","padding","paddingBlock","paddingInline","paddingInlineStart","paddingInlineEnd","paddingTop","paddingBottom","margin","marginBlock","marginInline","marginInlineStart","marginInlineEnd","marginTop","marginBottom","zIndex","overflowY","overflowX","gap","rowGap","columnGap","attr","ref","As","defaultStyles","isCustomSizeProp","finalStyles","removeUndefinedProperties","jsx","clsx","styles"],"mappings":";;;;;;AAiBO,MAAMA,KAASC,EAAM,WAAW,SAGrC;AAAA,EACE,IAAAC,IAAK;AAAA,EACL,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAYC;AAAA,EACZ,cAAcC;AAAA,EACd,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAKtC,GACLuC,IAAqB;AAAA,IACzB,SAASjC,KAAU,OAAO,SAAYA,IAAS,gBAAgB;AAAA,IAC/D,UAAAG;AAAA,IACA,OAAQ+B,EAAiBhC,CAAK,IAAY,SAARA;AAAA,IAClC,UAAAE;AAAA,IACA,WAAAE;AAAA,IACA,QAAS4B,EAAiB7B,CAAM,IAAa,SAATA;AAAA,IACpC,WAAAE;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,QAAAe;AAAA,IACA,WAAAE;AAAA,IACA,WAAAD;AAAA,IACA,SAAAf;AAAA,IACA,cAAAC;AAAA,IACA,eAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,KAAAI;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,GAGIM,IAAmC;AAAA,IACvC,GAAGC,EAA0BH,CAAa;AAAA,IAC1C,GAAGrC;AAAA,EAAA;AAGL,SACE,gBAAAyC;AAAA,IAACL;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWO,EAAKC,EAAO,SAAS,GAAG1C,GAAW,WAAW,OAAO;AAAA,MAChE,OAAOsC;AAAA,MACP,eAAa,EAAQnC;AAAA,MACrB,mBAAiB,EAAQC;AAAA,MACzB,oBAAkBF;AAAA,MAClB,oBAAkBD;AAAA,MAClB,eAAaO;AAAA,MACb,cAAYH;AAAA,MACZ,mBAAiBuB;AAAA,MACjB,mBAAiBC;AAAA,MAChB,GAAGI;AAAA,MAEH,UAAAnC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"v_stack.js","sources":["../../src/stacks/v_stack.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { HTMLAttributes } from 'react';\nimport { removeUndefinedProperties } from './utils/remove_undefined_properties.js';\nimport { CommonProps } from './types/common.js';\nimport { StackStyleProps, VerticalProps } from './types/styles.js';\nimport styles from './stack.module.css';\nimport { isCustomSizeProp } from './utils/isCustomSizeProp.js';\n\nexport type VStackOwnProps = CommonProps & StackStyleProps & VerticalProps;\n\nexport interface VStackProps<T extends HTMLElement = HTMLElement>\n  extends VStackOwnProps,\n    HTMLAttributes<T> {\n  as?: string;\n  children?: React.ReactNode;\n}\n\nexport const VStack = React.forwardRef(function VStack<\n  T extends HTMLElement = HTMLElement,\n>(\n  {\n    as = 'div',\n    children,\n    style,\n    className,\n    hAlign = 'center',\n    vAlign = 'start',\n    inline,\n    allowFlow,\n    width = 'default',\n    minWidth,\n    maxWidth,\n    height = 'default',\n    minHeight,\n    maxHeight,\n    growWeight: flexGrow,\n    shrinkWeight: flexShrink,\n    padding,\n    paddingBlock,\n    paddingInline,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingTop,\n    paddingBottom,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    zIndex,\n    overflowY,\n    overflowX,\n    gap,\n    rowGap,\n    columnGap,\n    ...attr\n  }: VStackProps<T>,\n  ref: React.Ref<T>\n) {\n  const As = as as React.ElementType;\n  const defaultStyles: any = {\n    display: inline == null ? undefined : inline ? 'inline-flex' : 'flex',\n    minWidth,\n    width: !isCustomSizeProp(width) ? width : undefined,\n    maxWidth,\n    minHeight,\n    height: !isCustomSizeProp(height) ? height : undefined,\n    maxHeight,\n    flexGrow,\n    flexShrink,\n    zIndex,\n    overflowX,\n    overflowY,\n    padding,\n    paddingBlock,\n    paddingInline,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingTop,\n    paddingBottom,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    gap,\n    rowGap,\n    columnGap,\n  };\n\n  const finalStyles: React.CSSProperties = {\n    ...removeUndefinedProperties(defaultStyles),\n    ...style,\n  };\n\n  return (\n    <As\n      ref={ref}\n      className={clsx(styles['v-stack'], className, 'tcn-v-stack', 'tcn-stack')}\n      style={finalStyles}\n      data-inline={Boolean(inline)}\n      data-allow-flow={Boolean(allowFlow)}\n      data-v-alignment={vAlign}\n      data-h-alignment={hAlign}\n      data-height={height}\n      data-width={width}\n      data-overflow-y={overflowY}\n      data-overflow-x={overflowX}\n      {...attr}\n    >\n      {children}\n    </As>\n  );\n});\n"],"names":["VStack","React","as","children","style","className","hAlign","vAlign","inline","allowFlow","width","minWidth","maxWidth","height","minHeight","maxHeight","flexGrow","flexShrink","padding","paddingBlock","paddingInline","paddingInlineStart","paddingInlineEnd","paddingTop","paddingBottom","margin","marginBlock","marginInline","marginInlineStart","marginInlineEnd","marginTop","marginBottom","zIndex","overflowY","overflowX","gap","rowGap","columnGap","attr","ref","As","defaultStyles","isCustomSizeProp","finalStyles","removeUndefinedProperties","jsx","clsx","styles"],"mappings":";;;;;;AAiBO,MAAMA,KAASC,EAAM,WAAW,SAGrC;AAAA,EACE,IAAAC,IAAK;AAAA,EACL,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAYC;AAAA,EACZ,cAAcC;AAAA,EACd,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAKtC,GACLuC,IAAqB;AAAA,IACzB,SAASjC,KAAU,OAAO,SAAYA,IAAS,gBAAgB;AAAA,IAC/D,UAAAG;AAAA,IACA,OAAQ+B,EAAiBhC,CAAK,IAAY,SAARA;AAAA,IAClC,UAAAE;AAAA,IACA,WAAAE;AAAA,IACA,QAAS4B,EAAiB7B,CAAM,IAAa,SAATA;AAAA,IACpC,WAAAE;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,QAAAe;AAAA,IACA,WAAAE;AAAA,IACA,WAAAD;AAAA,IACA,SAAAf;AAAA,IACA,cAAAC;AAAA,IACA,eAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,KAAAI;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,GAGIM,IAAmC;AAAA,IACvC,GAAGC,EAA0BH,CAAa;AAAA,IAC1C,GAAGrC;AAAA,EAAA;AAGL,SACE,gBAAAyC;AAAA,IAACL;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWO,EAAKC,EAAO,SAAS,GAAG1C,GAAW,eAAe,WAAW;AAAA,MACxE,OAAOsC;AAAA,MACP,eAAa,EAAQnC;AAAA,MACrB,mBAAiB,EAAQC;AAAA,MACzB,oBAAkBF;AAAA,MAClB,oBAAkBD;AAAA,MAClB,eAAaO;AAAA,MACb,cAAYH;AAAA,MACZ,mBAAiBuB;AAAA,MACjB,mBAAiBC;AAAA,MAChB,GAAGI;AAAA,MAEH,UAAAnC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/stacks/z_stack.js

@@ -10,10 +10,10 @@ const Q = E.forwardRef(function({
   style: i,
   hAlign: n = "center",
   vAlign: m = "center",
-  inline: f,
+  inline: c,
   width: e = "default",
-  minWidth: d,
-  maxWidth: c,
+  minWidth: f,
+  maxWidth: d,
   height: a = "default",
   minHeight: l,
   maxHeight: p,
@@ -39,9 +39,9 @@ const Q = E.forwardRef(function({
   ...N
 }, U) {
   const b = s, q = {
-    minWidth: d,
+    minWidth: f,
     width: r(e) ? void 0 : e,
-    maxWidth: c,
+    maxWidth: d,
     minHeight: l,
     height: r(a) ? void 0 : a,
     maxHeight: p,
@@ -72,8 +72,8 @@ const Q = E.forwardRef(function({
         ...F(q),
         ...i
       },
-      className: D(G["z-stack"], B, "z-stack", "stack"),
-      "data-inline": !!f,
+      className: D(G["z-stack"], B, "tcn-z-stack", "tcn-stack"),
+      "data-inline": !!c,
       "data-v-alignment": m,
       "data-h-alignment": n,
       "data-height": a,

package/dist/stacks/z_stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"z_stack.js","sources":["../../src/stacks/z_stack.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { HTMLAttributes } from 'react';\nimport { removeUndefinedProperties } from './utils/remove_undefined_properties.js';\nimport { CommonProps } from './types/common.js';\nimport { StackStyleProps } from './types/styles.js';\nimport styles from './stack.module.css';\nimport { isCustomSizeProp } from './utils/isCustomSizeProp.js';\n\nexport type ZStackOwnProps = CommonProps &\n  StackStyleProps & {\n    overflow?: 'hidden' | 'visible';\n  };\n\nexport interface ZStackProps<T extends HTMLElement = HTMLElement>\n  extends ZStackOwnProps,\n    HTMLAttributes<T> {\n  as?: string;\n  children?: React.ReactNode;\n}\n\nexport const ZStack = React.forwardRef(function ZStack<T extends HTMLElement>(\n  {\n    as = 'div',\n    children,\n    style,\n    hAlign = 'center',\n    vAlign = 'center',\n    inline,\n    width = 'default',\n    minWidth,\n    maxWidth,\n    height = 'default',\n    minHeight,\n    maxHeight,\n    growWeight: flexGrow,\n    shrinkWeight: flexShrink,\n    padding,\n    paddingBlock,\n    paddingInline,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingTop,\n    paddingBottom,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    zIndex,\n    className,\n    overflow,\n    ...attr\n  }: ZStackProps<T>,\n  ref: React.Ref<T>\n) {\n  const As = as as React.ElementType;\n  const defaultStyles = {\n    minWidth,\n    width: !isCustomSizeProp(width) ? width : undefined,\n    maxWidth,\n    minHeight,\n    height: !isCustomSizeProp(height) ? height : undefined,\n    maxHeight,\n    flexGrow,\n    flexShrink,\n    zIndex,\n    overflow,\n    padding,\n    paddingBlock,\n    paddingInline,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingTop,\n    paddingBottom,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n  };\n\n  return (\n    <As\n      ref={ref}\n      style={{\n        ...removeUndefinedProperties(defaultStyles),\n        ...style,\n      }}\n      className={clsx(styles['z-stack'], className, 'z-stack', 'stack')}\n      data-inline={Boolean(inline)}\n      data-v-alignment={vAlign}\n      data-h-alignment={hAlign}\n      data-height={height}\n      data-width={width}\n      {...attr}\n    >\n      {typeof children === 'string' ? <span>{children}</span> : children}\n    </As>\n  );\n});\n"],"names":["ZStack","React","as","children","style","hAlign","vAlign","inline","width","minWidth","maxWidth","height","minHeight","maxHeight","flexGrow","flexShrink","padding","paddingBlock","paddingInline","paddingInlineStart","paddingInlineEnd","paddingTop","paddingBottom","margin","marginBlock","marginInline","marginInlineStart","marginInlineEnd","marginTop","marginBottom","zIndex","className","overflow","attr","ref","As","defaultStyles","isCustomSizeProp","jsx","removeUndefinedProperties","clsx","styles"],"mappings":";;;;;;AAoBO,MAAMA,IAASC,EAAM,WAAW,SACrC;AAAA,EACE,IAAAC,IAAK;AAAA,EACL,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,QAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAYC;AAAA,EACZ,cAAcC;AAAA,EACd,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAKjC,GACLkC,IAAgB;AAAA,IACpB,UAAA3B;AAAA,IACA,OAAQ4B,EAAiB7B,CAAK,IAAY,SAARA;AAAA,IAClC,UAAAE;AAAA,IACA,WAAAE;AAAA,IACA,QAASyB,EAAiB1B,CAAM,IAAa,SAATA;AAAA,IACpC,WAAAE;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,QAAAe;AAAA,IACA,UAAAE;AAAA,IACA,SAAAhB;AAAA,IACA,cAAAC;AAAA,IACA,eAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,EAAA;AAGF,SACE,gBAAAS;AAAA,IAACH;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,OAAO;AAAA,QACL,GAAGK,EAA0BH,CAAa;AAAA,QAC1C,GAAGhC;AAAA,MAAA;AAAA,MAEL,WAAWoC,EAAKC,EAAO,SAAS,GAAGV,GAAW,WAAW,OAAO;AAAA,MAChE,eAAa,EAAQxB;AAAA,MACrB,oBAAkBD;AAAA,MAClB,oBAAkBD;AAAA,MAClB,eAAaM;AAAA,MACb,cAAYH;AAAA,MACX,GAAGyB;AAAA,MAEH,iBAAO9B,KAAa,WAAW,gBAAAmC,EAAC,QAAA,EAAM,UAAAnC,GAAS,IAAUA;AAAA,IAAA;AAAA,EAAA;AAGhE,CAAC;"}
+{"version":3,"file":"z_stack.js","sources":["../../src/stacks/z_stack.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { HTMLAttributes } from 'react';\nimport { removeUndefinedProperties } from './utils/remove_undefined_properties.js';\nimport { CommonProps } from './types/common.js';\nimport { StackStyleProps } from './types/styles.js';\nimport styles from './stack.module.css';\nimport { isCustomSizeProp } from './utils/isCustomSizeProp.js';\n\nexport type ZStackOwnProps = CommonProps &\n  StackStyleProps & {\n    overflow?: 'hidden' | 'visible';\n  };\n\nexport interface ZStackProps<T extends HTMLElement = HTMLElement>\n  extends ZStackOwnProps,\n    HTMLAttributes<T> {\n  as?: string;\n  children?: React.ReactNode;\n}\n\nexport const ZStack = React.forwardRef(function ZStack<T extends HTMLElement>(\n  {\n    as = 'div',\n    children,\n    style,\n    hAlign = 'center',\n    vAlign = 'center',\n    inline,\n    width = 'default',\n    minWidth,\n    maxWidth,\n    height = 'default',\n    minHeight,\n    maxHeight,\n    growWeight: flexGrow,\n    shrinkWeight: flexShrink,\n    padding,\n    paddingBlock,\n    paddingInline,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingTop,\n    paddingBottom,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    zIndex,\n    className,\n    overflow,\n    ...attr\n  }: ZStackProps<T>,\n  ref: React.Ref<T>\n) {\n  const As = as as React.ElementType;\n  const defaultStyles = {\n    minWidth,\n    width: !isCustomSizeProp(width) ? width : undefined,\n    maxWidth,\n    minHeight,\n    height: !isCustomSizeProp(height) ? height : undefined,\n    maxHeight,\n    flexGrow,\n    flexShrink,\n    zIndex,\n    overflow,\n    padding,\n    paddingBlock,\n    paddingInline,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingTop,\n    paddingBottom,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n  };\n\n  return (\n    <As\n      ref={ref}\n      style={{\n        ...removeUndefinedProperties(defaultStyles),\n        ...style,\n      }}\n      className={clsx(styles['z-stack'], className, 'tcn-z-stack', 'tcn-stack')}\n      data-inline={Boolean(inline)}\n      data-v-alignment={vAlign}\n      data-h-alignment={hAlign}\n      data-height={height}\n      data-width={width}\n      {...attr}\n    >\n      {typeof children === 'string' ? <span>{children}</span> : children}\n    </As>\n  );\n});\n"],"names":["ZStack","React","as","children","style","hAlign","vAlign","inline","width","minWidth","maxWidth","height","minHeight","maxHeight","flexGrow","flexShrink","padding","paddingBlock","paddingInline","paddingInlineStart","paddingInlineEnd","paddingTop","paddingBottom","margin","marginBlock","marginInline","marginInlineStart","marginInlineEnd","marginTop","marginBottom","zIndex","className","overflow","attr","ref","As","defaultStyles","isCustomSizeProp","jsx","removeUndefinedProperties","clsx","styles"],"mappings":";;;;;;AAoBO,MAAMA,IAASC,EAAM,WAAW,SACrC;AAAA,EACE,IAAAC,IAAK;AAAA,EACL,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,QAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAYC;AAAA,EACZ,cAAcC;AAAA,EACd,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAKjC,GACLkC,IAAgB;AAAA,IACpB,UAAA3B;AAAA,IACA,OAAQ4B,EAAiB7B,CAAK,IAAY,SAARA;AAAA,IAClC,UAAAE;AAAA,IACA,WAAAE;AAAA,IACA,QAASyB,EAAiB1B,CAAM,IAAa,SAATA;AAAA,IACpC,WAAAE;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,QAAAe;AAAA,IACA,UAAAE;AAAA,IACA,SAAAhB;AAAA,IACA,cAAAC;AAAA,IACA,eAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,EAAA;AAGF,SACE,gBAAAS;AAAA,IAACH;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,OAAO;AAAA,QACL,GAAGK,EAA0BH,CAAa;AAAA,QAC1C,GAAGhC;AAAA,MAAA;AAAA,MAEL,WAAWoC,EAAKC,EAAO,SAAS,GAAGV,GAAW,eAAe,WAAW;AAAA,MACxE,eAAa,EAAQxB;AAAA,MACrB,oBAAkBD;AAAA,MAClB,oBAAkBD;AAAA,MAClB,eAAaM;AAAA,MACb,cAAYH;AAAA,MACX,GAAGyB;AAAA,MAEH,iBAAO9B,KAAa,WAAW,gBAAAmC,EAAC,QAAA,EAAM,UAAAnC,GAAS,IAAUA;AAAA,IAAA;AAAA,EAAA;AAGhE,CAAC;"}

package/dist/start_resize_handle.css

@@ -1 +1 @@
-._start-resize-handle_22a3d5a{position:fixed;bottom:0;height:100%;width:16px;z-index:1;cursor:ew-resize;pointer-events:auto}._start-resize-handle_22a3d5a:dir(ltr){left:var(--resize-offset, -8px)}._start-resize-handle_22a3d5a:dir(rtl){right:var(--resize-offset, -8px)}
+@layer tcn-system{:where(._start-resize-handle_22a3d5a){position:fixed;bottom:0;height:100%;width:16px;z-index:1;cursor:ew-resize;pointer-events:auto}:where(._start-resize-handle_22a3d5a:dir(ltr)){left:var(--resize-offset, -8px)}:where(._start-resize-handle_22a3d5a:dir(rtl)){right:var(--resize-offset, -8px)}}

package/dist/status_input.css

@@ -1 +1 @@
-._field-error_6d015c9{color:var(--status-color-error)}._field-status-input_c30d6fb>*[data-width="100%"]:first-child{width:100%;flex-grow:1;flex-shrink:0;flex-basis:0%}
+@layer tcn-system{:where(._field-error_6d015c9){color:var(--status-color-error)}:where(._field-status-input_c30d6fb>*[data-width="100%"]:first-child){width:100%;flex-grow:1;flex-shrink:0;flex-basis:0%}}

package/dist/subheadline.css

@@ -1 +1 @@
-._subheadline_ae8bc38{margin:0;padding:0;line-height:1.3;letter-spacing:.005em}._subheadline_ae8bc38[data-selectable=true]{-webkit-user-select:auto;user-select:auto}._subheadline_ae8bc38[data-selectable=false]{-webkit-user-select:none;user-select:none}._subheadline_ae8bc38[data-size=sm]{font-size:calc(12px * var(--scalar, 1));line-height:1.4}._subheadline_ae8bc38[data-size=md]{font-size:calc(14px * var(--scalar, 1));line-height:1.3}._subheadline_ae8bc38[data-size=lg]{font-size:calc(18px * var(--scalar, 1));line-height:1.25}._subheadline_ae8bc38[data-hierarchy=primary]{opacity:1}._subheadline_ae8bc38[data-hierarchy=secondary]{opacity:.85}._subheadline_ae8bc38[data-hierarchy=tertiary]{opacity:.7}._subheadline_ae8bc38[data-emphasis=strong]{font-weight:600}._subheadline_ae8bc38[data-emphasis=normal]{font-weight:500}._subheadline_ae8bc38[data-emphasis=light]{font-weight:400}
+@layer tcn-system{:where(._subheadline_ae8bc38){margin:0;padding:0;line-height:1.3;letter-spacing:.005em}:where(._subheadline_ae8bc38[data-selectable=true]){-webkit-user-select:auto;user-select:auto}:where(._subheadline_ae8bc38[data-selectable=false]){-webkit-user-select:none;user-select:none}:where(._subheadline_ae8bc38[data-size=sm]){font-size:calc(12px * var(--scalar, 1));line-height:1.4}:where(._subheadline_ae8bc38[data-size=md]){font-size:calc(14px * var(--scalar, 1));line-height:1.3}:where(._subheadline_ae8bc38[data-size=lg]){font-size:calc(18px * var(--scalar, 1));line-height:1.25}:where(._subheadline_ae8bc38[data-hierarchy=primary]){opacity:1}:where(._subheadline_ae8bc38[data-hierarchy=secondary]){opacity:.85}:where(._subheadline_ae8bc38[data-hierarchy=tertiary]){opacity:.7}:where(._subheadline_ae8bc38[data-emphasis=strong]){font-weight:600}:where(._subheadline_ae8bc38[data-emphasis=normal]){font-weight:500}:where(._subheadline_ae8bc38[data-emphasis=light]){font-weight:400}}

package/dist/suggestion_item.css

@@ -1 +1 @@
-._suggestion-item_6b60309{background-color:#fff;outline:none;border:0;padding:0;margin:0;width:auto;min-width:100%;text-align:start;min-height:30px;border:4px solid transparent;z-index:1;cursor:pointer;color:var(--font-color);-webkit-tap-highlight-color:transparent}._suggestion-item_6b60309[data-is-selected=true]{border-inline-start-color:#ccc;background-color:#f1f1f1}._suggestion-item_6b60309[data-is-focused=true]{border-inline-start-color:var(--accent-color);background-color:#f1f1f1}._suggestion-item_6b60309[data-disabled=true]{cursor:not-allowed}._suggestion-item_6b60309:hover{background-color:#f5f5f5}.small-text ._suggestion-item_6b60309{min-height:30px}.medium-small-text ._suggestion-item_6b60309{min-height:32px}.medium-text ._suggestion-item_6b60309{min-height:34px}.medium-lart-text ._suggestion-item_6b60309{min-height:36px}.large-text ._suggestion-item_6b60309{min-height:38px}
+@layer tcn-system{:where(._suggestion-item_6b60309){background-color:#fff;outline:none;border:0;padding:0;margin:0;width:auto;min-width:100%;text-align:start;min-height:30px;border:4px solid transparent;z-index:1;cursor:pointer;color:var(--font-color);-webkit-tap-highlight-color:transparent}:where(._suggestion-item_6b60309[data-is-selected=true]){border-inline-start-color:#ccc;background-color:#f1f1f1}:where(._suggestion-item_6b60309[data-is-focused=true]){border-inline-start-color:var(--accent-color);background-color:#f1f1f1}:where(._suggestion-item_6b60309[data-disabled=true]){cursor:not-allowed}:where(._suggestion-item_6b60309:hover){background-color:#f5f5f5}}

package/dist/suggestion_list.css

@@ -1 +1 @@
-._suggestion-list_711fb17{border-radius:8px;box-shadow:var(--drop-shadow-depth-3, 0 2px 10px 0 rgba(0, 0, 0, .25));border:1px solid var(--border-tertiary-color);overflow-y:auto;overflow-x:hidden;background-color:#fff}._input_a0df060{position:sticky;top:0;left:0;border:none;margin:0;outline:none;padding-inline-start:8px;height:calc(32px * var(--scalar, 1));min-height:calc(32px * var(--scalar, 1));z-index:2;border-bottom:1px solid var(--border-tertiary-color, #e2e2e2);border-radius:8px 8px 0 0/8px 8px 0px 0px;background-color:#fff;color:var(--font-color);font-size:calc(14px * var(--scalar, 1));width:100%}
+@layer tcn-system{:where(._suggestion-list_711fb17){border-radius:8px;box-shadow:var(--drop-shadow-depth-3, 0 2px 10px 0 rgba(0, 0, 0, .25));border:1px solid var(--border-tertiary-color);overflow-y:auto;overflow-x:hidden;background-color:#fff}:where(._input_a0df060){position:sticky;top:0;left:0;border:none;margin:0;outline:none;padding-inline-start:8px;height:calc(32px * var(--scalar, 1));min-height:calc(32px * var(--scalar, 1));z-index:2;border-bottom:1px solid var(--border-tertiary-color, #e2e2e2);border-radius:8px 8px 0 0/8px 8px 0px 0px;background-color:#fff;color:var(--font-color);font-size:calc(14px * var(--scalar, 1));width:100%}}