@tcn/ui 0.9.0 → 0.11.0

package/dist/stacks/box/top_resize_handle.d.ts

@@ -3,8 +3,8 @@ import { HandleProps } from './handle_props.js';
 export interface TopResizeHandleProps {
     targetRef: React.MutableRefObject<HTMLElement | null>;
     handleProps?: HandleProps;
-    onHeightResize?: (value: number) => void;
-    onHeightResizeEnd?: (value: number) => void;
+    onHeightResize?: (height: number, origin: 'top' | 'bottom', totalDelta: number, currentDelta: number) => void;
+    onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => void;
 }
 export declare function TopResizeHandle({ targetRef, handleProps, onHeightResize, onHeightResizeEnd, }: TopResizeHandleProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=top_resize_handle.d.ts.map

package/dist/stacks/box/top_resize_handle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"top_resize_handle.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/top_resize_handle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKhD,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AACD,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,WAAW,EACX,cAAc,EACd,iBAAiB,GAClB,EAAE,oBAAoB,2CAuBtB"}
+{"version":3,"file":"top_resize_handle.d.ts","sourceRoot":"","sources":["../../../src/stacks/box/top_resize_handle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,cAAc,CAAC,EAAE,CACf,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,KAAK,GAAG,QAAQ,EACxB,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,KACjB,IAAI,CAAC;IACV,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,GAAG,QAAQ,KAAK,IAAI,CAAC;CACxE;AACD,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,WAAW,EACX,cAAc,EACd,iBAAiB,GAClB,EAAE,oBAAoB,2CAwBtB"}

package/dist/stacks/box/top_resize_handle.js

@@ -1,6 +1,6 @@
 import { jsx as l } from "react/jsx-runtime";
-import { createVerticalResizeHandler as c } from "./resize_handlers.js";
-import { clsx as f } from "clsx";
+import { clsx as c } from "clsx";
+import { createVerticalResizeHandler as f } from "./resize_handlers.js";
 import '../../top_resize_handle.css';const p = "_top-resize-handle_fe19234", z = { "top-resize-handle": p };
 function x({
   targetRef: t,
@@ -8,11 +8,12 @@ function x({
   onHeightResize: o,
   onHeightResizeEnd: s
 }) {
-  const i = c(
+  const i = f(
     t,
     o,
     s,
-    !0
+    !0,
+    "top"
   ), n = e?.offset ? e.offset : -8, r = {
     ...e?.style,
     top: `${n}px`,
@@ -21,7 +22,7 @@ function x({
   return /* @__PURE__ */ l(
     "div",
     {
-      className: f(z["top-resize-handle"], "tcn-top-resize-handle"),
+      className: c(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'], '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;"}
+{"version":3,"file":"top_resize_handle.js","sources":["../../../src/stacks/box/top_resize_handle.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { HandleProps } from './handle_props.js';\nimport { createVerticalResizeHandler } from './resize_handlers.js';\nimport styles from './top_resize_handle.module.css';\n\nexport interface TopResizeHandleProps {\n  targetRef: React.MutableRefObject<HTMLElement | null>;\n  handleProps?: HandleProps;\n  onHeightResize?: (\n    height: number,\n    origin: 'top' | 'bottom',\n    totalDelta: number,\n    currentDelta: number\n  ) => void;\n  onHeightResizeEnd?: (height: number, origin: 'top' | 'bottom') => 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    'top'\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":";;;;AAiBO,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,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,6FAuC1B,CAAC"}
+{"version":3,"file":"h_collapsible_box.d.ts","sourceRoot":"","sources":["../../src/stacks/h_collapsible_box.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAE/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

@@ -1,46 +1,46 @@
-import { jsx as f } from "react/jsx-runtime";
-import t, { useLayoutEffect as p } from "react";
+import { jsx as u } from "react/jsx-runtime";
+import { clsx as R } from "clsx";
+import i, { useLayoutEffect as x } from "react";
 import "../utils/click_away_listener.js";
 import "../utils/focus_redirect.js";
 import "../utils/scroll_away_listener.js";
-import { useForkRef as d } from "../utils/hooks/use_fork_ref.js";
+import { useForkRef as z } from "../utils/hooks/use_fork_ref.js";
 import "../utils/hooks/use_resize_observer.js";
 import "../utils/dnd/context.js";
-import { clsx as u } from "clsx";
 import "../draggable.module-BgelQsuJ.js";
-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 H = t.forwardRef(function({ open: l = !1, defaultWidth: i = "400px", ...e }, a) {
-  const o = t.useRef(null), n = d(a, o), [c, r] = t.useState(!1);
-  p(() => {
-    o.current?.style.setProperty("--collapsible-size", i);
-  }, [i]);
-  const m = z(l, o) && !l ? null : e.children;
-  return /* @__PURE__ */ f(
-    R,
+import { Box as b } from "./box/box.js";
+import { s as h } from "../collapsible_box.module-BiS98xXA.js";
+import { useIsCollapsed as y } from "./utils/use_is_collapsed.js";
+const $ = i.forwardRef(function({ open: l = !1, defaultWidth: r = "400px", ...e }, n) {
+  const o = i.useRef(null), c = z(n, o), [m, a] = i.useState(!1);
+  x(() => {
+    o.current?.style.setProperty("--collapsible-size", r);
+  }, [r]);
+  const f = y(l, o) && !l ? null : e.children;
+  return /* @__PURE__ */ u(
+    b,
     {
-      ref: n,
+      ref: c,
       ...e,
       "data-is-collapsed": !l,
       "data-collapse-orientation": "horizontal",
-      "data-is-resizing": c,
-      onWidthResize: (s) => {
-        r(!0), e.onWidthResize?.(s);
+      "data-is-resizing": m,
+      onWidthResize: (s, t, p, d) => {
+        a(!0), e.onWidthResize?.(s, t, p, d);
       },
-      onWidthResizeEnd: (s) => {
-        r(!1), e.onWidthResizeEnd?.(s), o.current?.style.setProperty("--collapsible-size", `${s}px`);
+      onWidthResizeEnd: (s, t) => {
+        a(!1), e.onWidthResizeEnd?.(s, t), o.current?.style.setProperty("--collapsible-size", `${s}px`);
       },
-      className: u(
+      className: R(
         e.className,
-        x["collapsible-box"],
+        h["collapsible-box"],
         "tcn-h-collapsible-box"
       ),
-      children: m
+      children: f
     }
   );
 });
 export {
-  H as HCollapsibleBox
+  $ as HCollapsibleBox
 };
 //# sourceMappingURL=h_collapsible_box.js.map

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(\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;"}
+{"version":3,"file":"h_collapsible_box.js","sources":["../../src/stacks/h_collapsible_box.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { useLayoutEffect } from 'react';\nimport { useForkRef } from '../utils/index.js';\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, origin, totalDelta, currentDelta) => {\n        setIsResizing(true);\n        props.onWidthResize?.(width, origin, totalDelta, currentDelta);\n      }}\n      onWidthResizeEnd={(width, origin) => {\n        setIsResizing(false);\n        props.onWidthResizeEnd?.(width, origin);\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","origin","totalDelta","currentDelta","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,CAACO,GAAOC,GAAQC,GAAYC,MAAiB;AAC1D,QAAAT,EAAc,EAAI,GAClBN,EAAM,gBAAgBY,GAAOC,GAAQC,GAAYC,CAAY;AAAA,MAC/D;AAAA,MACA,kBAAkB,CAACH,GAAOC,MAAW;AACnC,QAAAP,EAAc,EAAK,GACnBN,EAAM,mBAAmBY,GAAOC,CAAM,GACtCX,EAAe,SAAS,MAAM,YAAY,sBAAsB,GAAGU,CAAK,IAAI;AAAA,MAC9E;AAAA,MACA,WAAWI;AAAA,QACThB,EAAM;AAAA,QACNiB,EAAO,iBAAiB;AAAA,QACxB;AAAA,MAAA;AAAA,MAEF,UAAAT;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/stacks/v_collapsible_box.js

@@ -1,46 +1,46 @@
-import { jsx as f } from "react/jsx-runtime";
-import t, { useLayoutEffect as p } from "react";
+import { jsx as d } from "react/jsx-runtime";
+import i, { useLayoutEffect as R } from "react";
 import "../utils/click_away_listener.js";
 import "../utils/focus_redirect.js";
 import "../utils/scroll_away_listener.js";
-import { useForkRef as u } from "../utils/hooks/use_fork_ref.js";
+import { useForkRef as x } from "../utils/hooks/use_fork_ref.js";
 import "../utils/hooks/use_resize_observer.js";
 import "../utils/dnd/context.js";
-import { clsx as d } from "clsx";
+import { clsx as b } from "clsx";
 import "../draggable.module-BgelQsuJ.js";
-import { Box as R } from "./box/box.js";
-import { s as x } from "../collapsible_box.module-BiS98xXA.js";
-import { useIsCollapsed as b } from "./utils/use_is_collapsed.js";
-const w = 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 m = b(l, s) && !l ? null : e.children;
-  return /* @__PURE__ */ f(
-    R,
+import { Box as z } from "./box/box.js";
+import { s as y } from "../collapsible_box.module-BiS98xXA.js";
+import { useIsCollapsed as g } from "./utils/use_is_collapsed.js";
+const S = i.forwardRef(function({ open: l = !1, defaultHeight: r = "400px", ...e }, c) {
+  const s = i.useRef(null), n = x(c, s), [m, a] = i.useState(!1);
+  R(() => {
+    s.current?.style.setProperty("--collapsible-size", r);
+  }, [r]);
+  const f = g(l, s) && !l ? null : e.children;
+  return /* @__PURE__ */ d(
+    z,
     {
-      ref: c,
+      ref: n,
       ...e,
       "data-is-collapsed": !l,
       "data-collapse-orientation": "vertical",
-      "data-is-resizing": n,
-      onHeightResize: (o) => {
-        r(!0), e.onHeightResize?.(o);
+      "data-is-resizing": m,
+      onHeightResize: (o, t, p, u) => {
+        a(!0), e.onHeightResize?.(o, t, p, u);
       },
-      onHeightResizeEnd: (o) => {
-        r(!1), s.current?.style.setProperty("--collapsible-size", `${o}px`), e.onHeightResizeEnd?.(o);
+      onHeightResizeEnd: (o, t) => {
+        a(!1), s.current?.style.setProperty("--collapsible-size", `${o}px`), e.onHeightResizeEnd?.(o, t);
       },
-      className: d(
+      className: b(
         e.className,
-        x["collapsible-box"],
+        y["collapsible-box"],
         "tcn-v-collapsible-box"
       ),
-      children: m
+      children: f
     }
   );
 });
 export {
-  w as VCollapsibleBox
+  S 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(\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;"}
+{"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, origin, totalDelta, currentDelta) => {\n        setIsResizing(true);\n        props.onHeightResize?.(height, origin, totalDelta, currentDelta);\n      }}\n      onHeightResizeEnd={(height, origin) => {\n        setIsResizing(false);\n        collapsibleRef.current?.style.setProperty('--collapsible-size', `${height}px`);\n        props.onHeightResizeEnd?.(height, origin);\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","origin","totalDelta","currentDelta","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,CAACO,GAAQC,GAAQC,GAAYC,MAAiB;AAC5D,QAAAT,EAAc,EAAI,GAClBN,EAAM,iBAAiBY,GAAQC,GAAQC,GAAYC,CAAY;AAAA,MACjE;AAAA,MACA,mBAAmB,CAACH,GAAQC,MAAW;AACrC,QAAAP,EAAc,EAAK,GACnBJ,EAAe,SAAS,MAAM,YAAY,sBAAsB,GAAGU,CAAM,IAAI,GAC7EZ,EAAM,oBAAoBY,GAAQC,CAAM;AAAA,MAC1C;AAAA,MACA,WAAWG;AAAA,QACThB,EAAM;AAAA,QACNiB,EAAO,iBAAiB;AAAA,QACxB;AAAA,MAAA;AAAA,MAEF,UAAAT;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/suggestion_list.css

@@ -1 +1 @@
-@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%}}
+@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;overscroll-behavior:none}: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%}}

package/dist/surfaces/index.d.ts

@@ -3,8 +3,7 @@ export * from './card/card.js';
 export * from './confirm/confirm.js';
 export * from './page/h_page.js';
 export * from './page/v_page.js';
-export * from './panel/h_panel.js';
-export * from './panel/v_panel.js';
+export * from './panel/panel.js';
 export * from './popover/popover.js';
 export * from './drawers/drawer_bottom/drawer_bottom.js';
 export * from './drawers/drawer_top/drawer_top.js';

package/dist/surfaces/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/surfaces/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0CAA0C,CAAC;AACzD,cAAc,oCAAoC,CAAC;AACnD,cAAc,wCAAwC,CAAC;AACvD,cAAc,oCAAoC,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/surfaces/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0CAA0C,CAAC;AACzD,cAAc,oCAAoC,CAAC;AACnD,cAAc,wCAAwC,CAAC;AACvD,cAAc,oCAAoC,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/surfaces/index.js

@@ -2,34 +2,32 @@ import { Alert as e } from "./alert/alert.js";
 import { Card as p } from "./card/card.js";
 import { Confirm as f } from "./confirm/confirm.js";
 import { HPage as a } from "./page/h_page.js";
-import { VPage as P } from "./page/v_page.js";
-import { HPanel as w } from "./panel/h_panel.js";
-import { VPanel as i } from "./panel/v_panel.js";
-import { Popover as C } from "./popover/popover.js";
-import { DrawerBottom as H } from "./drawers/drawer_bottom/drawer_bottom.js";
-import { DrawerTop as V } from "./drawers/drawer_top/drawer_top.js";
+import { VPage as w } from "./page/v_page.js";
+import { Panel as d } from "./panel/panel.js";
+import { Popover as l } from "./popover/popover.js";
+import { DrawerBottom as C } from "./drawers/drawer_bottom/drawer_bottom.js";
+import { DrawerTop as T } from "./drawers/drawer_top/drawer_top.js";
 import { DrawerStart as A } from "./drawers/drawer_start/drawer_start.js";
 import { DrawerEnd as E } from "./drawers/drawer_end/drawer_end.js";
-import { Window as S } from "./window/window.js";
-import { Modal as b } from "./modal/modal.js";
-import { Tooltip as h } from "./tooltip/tooltip.js";
-import { PopConfirm as k } from "./pop_confirm/pop_confirm.js";
+import { Window as M } from "./window/window.js";
+import { Modal as V } from "./modal/modal.js";
+import { Tooltip as b } from "./tooltip/tooltip.js";
+import { PopConfirm as h } from "./pop_confirm/pop_confirm.js";
 export {
   e as Alert,
   p as Card,
   f as Confirm,
-  H as DrawerBottom,
+  C as DrawerBottom,
   E as DrawerEnd,
   A as DrawerStart,
-  V as DrawerTop,
+  T as DrawerTop,
   a as HPage,
-  w as HPanel,
-  b as Modal,
-  k as PopConfirm,
-  C as Popover,
-  h as Tooltip,
-  P as VPage,
-  i as VPanel,
-  S as Window
+  V as Modal,
+  d as Panel,
+  h as PopConfirm,
+  l as Popover,
+  b as Tooltip,
+  w as VPage,
+  M as Window
 };
 //# sourceMappingURL=index.js.map

package/dist/surfaces/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/dist/surfaces/panel/panel.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
+export type PanelProps = ScaffoldProps;
+export declare const Panel: React.ForwardRefExoticComponent<ScaffoldProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=panel.d.ts.map

package/dist/surfaces/panel/panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../../src/surfaces/panel/panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAKlF,MAAM,MAAM,UAAU,GAAG,aAAa,CAAC;AAEvC,eAAO,MAAM,KAAK,mFAahB,CAAC"}

package/dist/surfaces/panel/panel.js

@@ -0,0 +1,19 @@
+import { jsx as r } from "react/jsx-runtime";
+import a from "react";
+import { Scaffold as c } from "../../layouts/scaffold/scaffold.js";
+import f from "clsx";
+import '../../panel.css';const l = "_panel_c1dbe05", s = { panel: l }, _ = a.forwardRef(function({ children: e, className: o, ...t }, n) {
+  return /* @__PURE__ */ r(
+    c,
+    {
+      ref: n,
+      className: f(s.panel, "tcn-surface", "tcn-panel", o),
+      ...t,
+      children: e
+    }
+  );
+});
+export {
+  _ as Panel
+};
+//# sourceMappingURL=panel.js.map

package/dist/surfaces/panel/panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","sources":["../../../src/surfaces/panel/panel.tsx"],"sourcesContent":["import React from 'react';\nimport { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';\nimport clsx from 'clsx';\n\nimport styles from './panel.module.css';\n\nexport type PanelProps = ScaffoldProps;\n\nexport const Panel = React.forwardRef<HTMLElement, PanelProps>(function Panel(\n  { children, className, ...props }: PanelProps,\n  ref\n) {\n  return (\n    <Scaffold\n      ref={ref}\n      className={clsx(styles['panel'], 'tcn-surface', 'tcn-panel', className)}\n      {...props}\n    >\n      {children}\n    </Scaffold>\n  );\n});\n"],"names":["Panel","React","children","className","props","ref","jsx","Scaffold","clsx","styles"],"mappings":";;;;8CAQaA,IAAQC,EAAM,WAAoC,SAC7D,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAC1BC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,WAAWG,EAAKC,EAAO,OAAU,eAAe,aAAaN,CAAS;AAAA,MACrE,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/surfaces/pop_confirm/pop_confirm.js

@@ -27,12 +27,11 @@ import "../../stacks/v_collapsible_box.js";
 import "../../stacks/v_stack.js";
 import "../../stacks/z_stack.js";
 import "../../layouts/rail/rail.js";
-import "../../layouts/rail/main/main.js";
 import "../../layouts/rail/side/side.js";
 import "../../layouts/rail/utility_strip/utility_strip.js";
 import { PopperDismissal as c } from "../../overlay/popper/base/dismissal_decorator.js";
 import { ElementPopper as s } from "../../overlay/popper/element_popper.js";
-const O = e.forwardRef(
+const M = e.forwardRef(
   function({ children: r, className: i, dismissals: m = [c.CLICK_AWAY], ...p }, t) {
     return /* @__PURE__ */ o(
       s,
@@ -48,6 +47,6 @@ const O = e.forwardRef(
   }
 );
 export {
-  O as PopConfirm
+  M as PopConfirm
 };
 //# sourceMappingURL=pop_confirm.js.map

package/dist/surfaces/pop_confirm/pop_confirm.js.map

@@ -1 +1 @@
-{"version":3,"file":"pop_confirm.js","sources":["../../../src/surfaces/pop_confirm/pop_confirm.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { Scaffold } from '../../layouts/index.js';\nimport { PopperDismissal } from '../../overlay/popper/base/dismissal_decorator.js';\nimport {\n  ElementPopper,\n  type ElementPopperProps,\n} from '../../overlay/popper/element_popper.js';\n\nexport type PopConfirmProps = ElementPopperProps;\n\nexport const PopConfirm = React.forwardRef<HTMLDivElement, PopConfirmProps>(\n  function PopConfirm(\n    { children, className, dismissals = [PopperDismissal.CLICK_AWAY], ...props },\n    ref\n  ) {\n    return (\n      <ElementPopper\n        ref={ref}\n        precision=\"high\"\n        className={clsx(className, 'tcn-pop-confirm')}\n        dismissals={dismissals}\n        {...props}\n      >\n        <Scaffold width={'100%'} height={'100%'}>\n          {children}\n        </Scaffold>\n      </ElementPopper>\n    );\n  }\n);\n"],"names":["PopConfirm","React","children","className","dismissals","PopperDismissal","props","ref","jsx","ElementPopper","clsx","Scaffold"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAMA,IAAaC,EAAM;AAAA,EAC9B,SACE,EAAE,UAAAC,GAAU,WAAAC,GAAW,YAAAC,IAAa,CAACC,EAAgB,UAAU,GAAG,GAAGC,EAAA,GACrEC,GACA;AACA,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,WAAU;AAAA,QACV,WAAWG,EAAKP,GAAW,iBAAiB;AAAA,QAC5C,YAAAC;AAAA,QACC,GAAGE;AAAA,QAEJ,4BAACK,GAAA,EAAS,OAAO,QAAQ,QAAQ,QAC9B,UAAAT,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
+{"version":3,"file":"pop_confirm.js","sources":["../../../src/surfaces/pop_confirm/pop_confirm.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { Scaffold } from '../../layouts/index.js';\nimport { PopperDismissal } from '../../overlay/popper/base/dismissal_decorator.js';\nimport {\n  ElementPopper,\n  type ElementPopperProps,\n} from '../../overlay/popper/element_popper.js';\n\nexport type PopConfirmProps = ElementPopperProps;\n\nexport const PopConfirm = React.forwardRef<HTMLDivElement, PopConfirmProps>(\n  function PopConfirm(\n    { children, className, dismissals = [PopperDismissal.CLICK_AWAY], ...props },\n    ref\n  ) {\n    return (\n      <ElementPopper\n        ref={ref}\n        precision=\"high\"\n        className={clsx(className, 'tcn-pop-confirm')}\n        dismissals={dismissals}\n        {...props}\n      >\n        <Scaffold width={'100%'} height={'100%'}>\n          {children}\n        </Scaffold>\n      </ElementPopper>\n    );\n  }\n);\n"],"names":["PopConfirm","React","children","className","dismissals","PopperDismissal","props","ref","jsx","ElementPopper","clsx","Scaffold"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAMA,IAAaC,EAAM;AAAA,EAC9B,SACE,EAAE,UAAAC,GAAU,WAAAC,GAAW,YAAAC,IAAa,CAACC,EAAgB,UAAU,GAAG,GAAGC,EAAA,GACrEC,GACA;AACA,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,WAAU;AAAA,QACV,WAAWG,EAAKP,GAAW,iBAAiB;AAAA,QAC5C,YAAAC;AAAA,QACC,GAAGE;AAAA,QAEJ,4BAACK,GAAA,EAAS,OAAO,QAAQ,QAAQ,QAC9B,UAAAT,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}

package/dist/surfaces/window/window.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
-import { FrameOwnProps } from '../../overlay/frame/frame.js';
 import { ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
+import { FrameOwnProps } from '../../overlay/frame/frame.js';
 export type WindowProps = FrameOwnProps & ScaffoldProps;
 export declare const Window: React.ForwardRefExoticComponent<FrameOwnProps & ScaffoldProps & React.RefAttributes<HTMLElement>>;
 //# sourceMappingURL=window.d.ts.map

package/dist/surfaces/window/window.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../../../src/surfaces/window/window.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAS,KAAK,aAAa,EAAE,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAKlF,MAAM,MAAM,WAAW,GAAG,aAAa,GAAG,aAAa,CAAC;AAExD,eAAO,MAAM,MAAM,mGAkBjB,CAAC"}
+{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../../../src/surfaces/window/window.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAClF,OAAO,EAAS,KAAK,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAKzE,MAAM,MAAM,WAAW,GAAG,aAAa,GAAG,aAAa,CAAC;AAExD,eAAO,MAAM,MAAM,mGA4BjB,CAAC"}

package/dist/surfaces/window/window.js

@@ -1,23 +1,33 @@
 import { jsx as o } from "react/jsx-runtime";
 import { clsx as d } from "clsx";
-import m from "react";
-import { Frame as w } from "../../overlay/frame/frame.js";
+import w from "react";
 import { Scaffold as a } from "../../layouts/scaffold/scaffold.js";
-import '../../window.css';const s = "_window_7610fdb", l = { window: s }, W = m.forwardRef(function({ children: t, className: r, isOpen: i, draggable: n = !0, veil: f = !1, ...e }, c) {
+import { Frame as l } from "../../overlay/frame/frame.js";
+import '../../window.css';const p = "_window_7610fdb", u = { window: p }, y = w.forwardRef(function({
+  children: r,
+  className: t,
+  isOpen: e,
+  draggable: n = !0,
+  resizable: x = !0,
+  veil: f = !1,
+  width: i,
+  height: c,
+  ...m
+}, s) {
   return /* @__PURE__ */ o(
-    w,
+    l,
     {
-      isOpen: i,
+      isOpen: e,
       draggable: n,
       veil: f,
-      className: d(l.window, "tcn-surface", "tcn-window", r),
-      width: "auto",
-      height: "auto",
-      children: /* @__PURE__ */ o(a, { ref: c, ...e, children: t })
+      className: d(u.window, "tcn-surface", "tcn-window", t),
+      width: i,
+      height: c,
+      children: /* @__PURE__ */ o(a, { ref: s, ...m, children: r })
     }
   );
 });
 export {
-  W as Window
+  y as Window
 };
 //# sourceMappingURL=window.js.map

package/dist/surfaces/window/window.js.map

@@ -1 +1 @@
-{"version":3,"file":"window.js","sources":["../../../src/surfaces/window/window.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { Frame, type FrameOwnProps } from '../../overlay/frame/frame.js';\nimport { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';\n\n// Styles\nimport styles from './window.module.css';\n\nexport type WindowProps = FrameOwnProps & ScaffoldProps;\n\nexport const Window = React.forwardRef<HTMLElement, WindowProps>(function Window(\n  { children, className, isOpen, draggable = true, veil = false, ...props }: WindowProps,\n  ref\n) {\n  return (\n    <Frame\n      isOpen={isOpen}\n      draggable={draggable}\n      veil={veil}\n      className={clsx(styles['window'], 'tcn-surface', 'tcn-window', className)}\n      width=\"auto\"\n      height=\"auto\"\n    >\n      <Scaffold ref={ref} {...props}>\n        {children}\n      </Scaffold>\n    </Frame>\n  );\n});\n"],"names":["Window","React","children","className","isOpen","draggable","veil","props","ref","jsx","Frame","clsx","styles","Scaffold"],"mappings":";;;;;gDAUaA,IAASC,EAAM,WAAqC,SAC/D,EAAE,UAAAC,GAAU,WAAAC,GAAW,QAAAC,GAAQ,WAAAC,IAAY,IAAM,MAAAC,IAAO,IAAO,GAAGC,EAAA,GAClEC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAAN;AAAA,MACA,WAAAC;AAAA,MACA,MAAAC;AAAA,MACA,WAAWK,EAAKC,EAAO,QAAW,eAAe,cAAcT,CAAS;AAAA,MACxE,OAAM;AAAA,MACN,QAAO;AAAA,MAEP,UAAA,gBAAAM,EAACI,GAAA,EAAS,KAAAL,GAAW,GAAGD,GACrB,UAAAL,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"window.js","sources":["../../../src/surfaces/window/window.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';\nimport { Frame, type FrameOwnProps } from '../../overlay/frame/frame.js';\n\n// Styles\nimport styles from './window.module.css';\n\nexport type WindowProps = FrameOwnProps & ScaffoldProps;\n\nexport const Window = React.forwardRef<HTMLElement, WindowProps>(function Window(\n  {\n    children,\n    className,\n    isOpen,\n    draggable = true,\n    resizable = true,\n    veil = false,\n    width,\n    height,\n    ...props\n  }: WindowProps,\n  ref\n) {\n  return (\n    <Frame\n      isOpen={isOpen}\n      draggable={draggable}\n      veil={veil}\n      className={clsx(styles['window'], 'tcn-surface', 'tcn-window', className)}\n      width={width}\n      height={height}\n    >\n      <Scaffold ref={ref} {...props}>\n        {children}\n      </Scaffold>\n    </Frame>\n  );\n});\n"],"names":["Window","React","children","className","isOpen","draggable","resizable","veil","width","height","props","ref","jsx","Frame","clsx","styles","Scaffold"],"mappings":";;;;;gDAUaA,IAASC,EAAM,WAAqC,SAC/D;AAAA,EACE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAAT;AAAA,MACA,WAAAC;AAAA,MACA,MAAAE;AAAA,MACA,WAAWO,EAAKC,EAAO,QAAW,eAAe,cAAcZ,CAAS;AAAA,MACxE,OAAAK;AAAA,MACA,QAAAC;AAAA,MAEA,UAAA,gBAAAG,EAACI,GAAA,EAAS,KAAAL,GAAW,GAAGD,GACrB,UAAAR,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/themes/stylesheets/reset.css

@@ -1 +1 @@
-@layer tcn-reset{html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,button,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}legend{all:unset;display:block;margin:0;padding:0;font:inherit;color:inherit}}
+@layer tcn-reset{html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,button,video,dialog{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}legend{all:unset;display:block;margin:0;padding:0;font:inherit;color:inherit}dialog{max-width:none;max-height:none;background:transparent;color:inherit}}

package/dist/themes/stylesheets/reset.js

@@ -81,7 +81,8 @@ const n = `/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */
   mark,
   audio,
   button,
-  video {
+  video,
+  dialog {
     margin: 0;
     padding: 0;
     border: 0;
@@ -134,6 +135,12 @@ const n = `/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */
     font: inherit;
     color: inherit;
   }
+  dialog {
+    max-width: none;
+    max-height: none;
+    background: transparent;
+    color: inherit;
+  }
 }
 `, e = new CSSStyleSheet();
 e.replaceSync(n);

package/dist/themes/stylesheets/reset.js.map

@@ -1 +1 @@
-{"version":3,"file":"reset.js","sources":["../../../src/themes/stylesheets/reset.css?raw","../../../src/themes/stylesheets/reset.ts"],"sourcesContent":["export default \"/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */\\n@layer tcn-reset {\\n  html,\\n  body,\\n  div,\\n  span,\\n  applet,\\n  object,\\n  iframe,\\n  h1,\\n  h2,\\n  h3,\\n  h4,\\n  h5,\\n  h6,\\n  p,\\n  blockquote,\\n  pre,\\n  a,\\n  abbr,\\n  acronym,\\n  address,\\n  big,\\n  cite,\\n  code,\\n  del,\\n  dfn,\\n  em,\\n  img,\\n  ins,\\n  kbd,\\n  q,\\n  s,\\n  samp,\\n  small,\\n  strike,\\n  strong,\\n  sub,\\n  sup,\\n  tt,\\n  var,\\n  b,\\n  u,\\n  i,\\n  center,\\n  dl,\\n  dt,\\n  dd,\\n  ol,\\n  ul,\\n  li,\\n  fieldset,\\n  form,\\n  label,\\n  legend,\\n  table,\\n  caption,\\n  tbody,\\n  tfoot,\\n  thead,\\n  tr,\\n  th,\\n  td,\\n  article,\\n  aside,\\n  canvas,\\n  details,\\n  embed,\\n  figure,\\n  figcaption,\\n  footer,\\n  header,\\n  hgroup,\\n  menu,\\n  nav,\\n  output,\\n  ruby,\\n  section,\\n  summary,\\n  time,\\n  mark,\\n  audio,\\n  button,\\n  video {\\n    margin: 0;\\n    padding: 0;\\n    border: 0;\\n    font-size: 100%;\\n    font: inherit;\\n    vertical-align: baseline;\\n  }\\n  /* HTML5 display-role reset for older browsers */\\n  article,\\n  aside,\\n  details,\\n  figcaption,\\n  figure,\\n  footer,\\n  header,\\n  hgroup,\\n  menu,\\n  nav,\\n  section {\\n    display: block;\\n  }\\n  body {\\n    line-height: 1;\\n  }\\n  ol,\\n  ul {\\n    list-style: none;\\n  }\\n  blockquote,\\n  q {\\n    quotes: none;\\n  }\\n  blockquote:before,\\n  blockquote:after,\\n  q:before,\\n  q:after {\\n    content: \\\"\\\";\\n    content: none;\\n  }\\n  table {\\n    border-collapse: collapse;\\n    border-spacing: 0;\\n  }\\n\\n  legend {\\n    all: unset;\\n    display: block;\\n    margin: 0;\\n    padding: 0;\\n    font: inherit;\\n    color: inherit;\\n  }\\n}\\n\"","import css from './reset.css?raw';\n\nexport const reset = new CSSStyleSheet();\nreset.replaceSync(css);\n"],"names":["css","reset"],"mappings":"AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCEFC,IAAQ,IAAI,cAAA;AACzBA,EAAM,YAAYD,CAAG;"}
+{"version":3,"file":"reset.js","sources":["../../../src/themes/stylesheets/reset.css?raw","../../../src/themes/stylesheets/reset.ts"],"sourcesContent":["export default \"/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */\\n@layer tcn-reset {\\n  html,\\n  body,\\n  div,\\n  span,\\n  applet,\\n  object,\\n  iframe,\\n  h1,\\n  h2,\\n  h3,\\n  h4,\\n  h5,\\n  h6,\\n  p,\\n  blockquote,\\n  pre,\\n  a,\\n  abbr,\\n  acronym,\\n  address,\\n  big,\\n  cite,\\n  code,\\n  del,\\n  dfn,\\n  em,\\n  img,\\n  ins,\\n  kbd,\\n  q,\\n  s,\\n  samp,\\n  small,\\n  strike,\\n  strong,\\n  sub,\\n  sup,\\n  tt,\\n  var,\\n  b,\\n  u,\\n  i,\\n  center,\\n  dl,\\n  dt,\\n  dd,\\n  ol,\\n  ul,\\n  li,\\n  fieldset,\\n  form,\\n  label,\\n  legend,\\n  table,\\n  caption,\\n  tbody,\\n  tfoot,\\n  thead,\\n  tr,\\n  th,\\n  td,\\n  article,\\n  aside,\\n  canvas,\\n  details,\\n  embed,\\n  figure,\\n  figcaption,\\n  footer,\\n  header,\\n  hgroup,\\n  menu,\\n  nav,\\n  output,\\n  ruby,\\n  section,\\n  summary,\\n  time,\\n  mark,\\n  audio,\\n  button,\\n  video,\\n  dialog {\\n    margin: 0;\\n    padding: 0;\\n    border: 0;\\n    font-size: 100%;\\n    font: inherit;\\n    vertical-align: baseline;\\n  }\\n  /* HTML5 display-role reset for older browsers */\\n  article,\\n  aside,\\n  details,\\n  figcaption,\\n  figure,\\n  footer,\\n  header,\\n  hgroup,\\n  menu,\\n  nav,\\n  section {\\n    display: block;\\n  }\\n  body {\\n    line-height: 1;\\n  }\\n  ol,\\n  ul {\\n    list-style: none;\\n  }\\n  blockquote,\\n  q {\\n    quotes: none;\\n  }\\n  blockquote:before,\\n  blockquote:after,\\n  q:before,\\n  q:after {\\n    content: \\\"\\\";\\n    content: none;\\n  }\\n  table {\\n    border-collapse: collapse;\\n    border-spacing: 0;\\n  }\\n\\n  legend {\\n    all: unset;\\n    display: block;\\n    margin: 0;\\n    padding: 0;\\n    font: inherit;\\n    color: inherit;\\n  }\\n  dialog {\\n    max-width: none;\\n    max-height: none;\\n    background: transparent;\\n    color: inherit;\\n  }\\n}\\n\"","import css from './reset.css?raw';\n\nexport const reset = new CSSStyleSheet();\nreset.replaceSync(css);\n"],"names":["css","reset"],"mappings":"AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCEFC,IAAQ,IAAI,cAAA;AACzBA,EAAM,YAAYD,CAAG;"}

package/dist/themes/theme.d.ts

@@ -3,6 +3,7 @@ import { BoxProps } from '../stacks/index.js';
 export interface ThemeProps extends BoxProps {
     styleSheets: CSSStyleSheet[];
     children: React.ReactNode;
+    className?: string;
 }
-export declare function Theme({ styleSheets, children, ...boxProps }: ThemeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Theme({ styleSheets, children, className, ...boxProps }: ThemeProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=theme.d.ts.map

package/dist/themes/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/themes/theme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAIxD,OAAO,yBAAyB,CAAC;AAIjC,MAAM,WAAW,UAAW,SAAQ,QAAQ;IAC1C,WAAW,EAAE,aAAa,EAAE,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,KAAK,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,QAAQ,EAAE,EAAE,UAAU,2CAyBvE"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/themes/theme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAIxD,OAAO,yBAAyB,CAAC;AAIjC,MAAM,WAAW,UAAW,SAAQ,QAAQ;IAC1C,WAAW,EAAE,aAAa,EAAE,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,KAAK,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,EAAE,UAAU,2CA4BlF"}

package/dist/themes/theme.js

@@ -1,29 +1,36 @@
-import { jsx as c } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import { useLayoutEffect as r } from "react";
-import { Box as n } from "../stacks/box/box.js";
+import { Box as i } from "../stacks/box/box.js";
 import "../stacks/h_collapsible_box.js";
 import "../stacks/h_stack.js";
 import "../stacks/spacer.js";
 import "../stacks/v_collapsible_box.js";
 import "../stacks/v_stack.js";
 import "../stacks/z_stack.js";
-import { clsx as i } from "clsx";
+import { clsx as s } from "clsx";
 import './stylesheets/reset.css';/* empty css                      */
-import { s } from "../theme_provider.module-ChZQ5Xsk.js";
-const p = `@layer tcn-reset, tcn-system, tcn-theme;
+import { s as p } from "../theme_provider.module-ChZQ5Xsk.js";
+const d = `@layer tcn-reset, tcn-system, tcn-theme;
 `;
-function I({ styleSheets: e, children: o, ...m }) {
+function j({ styleSheets: e, children: o, className: m, ...c }) {
   return r(() => {
     document.adoptedStyleSheets = e;
   }, [e]), r(() => {
     if (document.getElementById("critical-css")) return;
     const t = document.createElement("style");
-    return t.id = "critical-css", t.textContent = p, document.head.prepend(t), () => {
+    return t.id = "critical-css", t.textContent = d, document.head.prepend(t), () => {
       document.getElementById("critical-css")?.remove();
     };
-  }, []), /* @__PURE__ */ c(n, { className: i("tcn-theme-root", s["tcn-theme-provider"]), ...m, children: o });
+  }, []), /* @__PURE__ */ n(
+    i,
+    {
+      className: s("tcn-theme-root", p["tcn-theme-provider"], m),
+      ...c,
+      children: o
+    }
+  );
 }
 export {
-  I as Theme
+  j as Theme
 };
 //# sourceMappingURL=theme.js.map

package/dist/themes/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sources":["../../src/css/layers.css?raw","../../src/themes/theme.tsx"],"sourcesContent":["export default \"@layer tcn-reset, tcn-system, tcn-theme;\\n\"","import React, { useLayoutEffect } from 'react';\nimport { Box, type BoxProps } from '../stacks/index.js';\nimport { clsx } from 'clsx';\n\n// Styles\nimport './stylesheets/reset.css';\nimport styles from './theme_provider.module.css';\nimport layers from '../css/layers.css?raw';\n\nexport interface ThemeProps extends BoxProps {\n  styleSheets: CSSStyleSheet[];\n  children: React.ReactNode;\n}\n\nexport function Theme({ styleSheets, children, ...boxProps }: ThemeProps) {\n  useLayoutEffect(() => {\n    document.adoptedStyleSheets = styleSheets;\n  }, [styleSheets]);\n\n  // I used this approach instead to guarantee the order of the stylesheets\n  useLayoutEffect(() => {\n    if (document.getElementById('critical-css')) return;\n\n    const style = document.createElement('style');\n    style.id = 'critical-css';\n    style.textContent = layers;\n\n    document.head.prepend(style);\n\n    return () => {\n      document.getElementById('critical-css')?.remove();\n    };\n  }, []);\n\n  return (\n    <Box className={clsx('tcn-theme-root', styles['tcn-theme-provider'])} {...boxProps}>\n      {children}\n    </Box>\n  );\n}\n"],"names":["layers","Theme","styleSheets","children","boxProps","useLayoutEffect","style","jsx","Box","clsx","styles"],"mappings":";;;;;;;;;;;;AAAA,MAAAA,IAAe;AAAA;ACcR,SAASC,EAAM,EAAE,aAAAC,GAAa,UAAAC,GAAU,GAAGC,KAAwB;AACxE,SAAAC,EAAgB,MAAM;AACpB,aAAS,qBAAqBH;AAAA,EAChC,GAAG,CAACA,CAAW,CAAC,GAGhBG,EAAgB,MAAM;AACpB,QAAI,SAAS,eAAe,cAAc,EAAG;AAE7C,UAAMC,IAAQ,SAAS,cAAc,OAAO;AAC5C,WAAAA,EAAM,KAAK,gBACXA,EAAM,cAAcN,GAEpB,SAAS,KAAK,QAAQM,CAAK,GAEpB,MAAM;AACX,eAAS,eAAe,cAAc,GAAG,OAAA;AAAA,IAC3C;AAAA,EACF,GAAG,CAAA,CAAE,GAGH,gBAAAC,EAACC,GAAA,EAAI,WAAWC,EAAK,kBAAkBC,EAAO,oBAAoB,CAAC,GAAI,GAAGN,GACvE,UAAAD,EAAA,CACH;AAEJ;"}
+{"version":3,"file":"theme.js","sources":["../../src/css/layers.css?raw","../../src/themes/theme.tsx"],"sourcesContent":["export default \"@layer tcn-reset, tcn-system, tcn-theme;\\n\"","import React, { useLayoutEffect } from 'react';\nimport { Box, type BoxProps } from '../stacks/index.js';\nimport { clsx } from 'clsx';\n\n// Styles\nimport './stylesheets/reset.css';\nimport styles from './theme_provider.module.css';\nimport layers from '../css/layers.css?raw';\n\nexport interface ThemeProps extends BoxProps {\n  styleSheets: CSSStyleSheet[];\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function Theme({ styleSheets, children, className, ...boxProps }: ThemeProps) {\n  useLayoutEffect(() => {\n    document.adoptedStyleSheets = styleSheets;\n  }, [styleSheets]);\n\n  // I used this approach instead to guarantee the order of the stylesheets\n  useLayoutEffect(() => {\n    if (document.getElementById('critical-css')) return;\n\n    const style = document.createElement('style');\n    style.id = 'critical-css';\n    style.textContent = layers;\n\n    document.head.prepend(style);\n\n    return () => {\n      document.getElementById('critical-css')?.remove();\n    };\n  }, []);\n\n  return (\n    <Box\n      className={clsx('tcn-theme-root', styles['tcn-theme-provider'], className)}\n      {...boxProps}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"names":["layers","Theme","styleSheets","children","className","boxProps","useLayoutEffect","style","jsx","Box","clsx","styles"],"mappings":";;;;;;;;;;;;AAAA,MAAAA,IAAe;AAAA;ACeR,SAASC,EAAM,EAAE,aAAAC,GAAa,UAAAC,GAAU,WAAAC,GAAW,GAAGC,KAAwB;AACnF,SAAAC,EAAgB,MAAM;AACpB,aAAS,qBAAqBJ;AAAA,EAChC,GAAG,CAACA,CAAW,CAAC,GAGhBI,EAAgB,MAAM;AACpB,QAAI,SAAS,eAAe,cAAc,EAAG;AAE7C,UAAMC,IAAQ,SAAS,cAAc,OAAO;AAC5C,WAAAA,EAAM,KAAK,gBACXA,EAAM,cAAcP,GAEpB,SAAS,KAAK,QAAQO,CAAK,GAEpB,MAAM;AACX,eAAS,eAAe,cAAc,GAAG,OAAA;AAAA,IAC3C;AAAA,EACF,GAAG,CAAA,CAAE,GAGH,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAK,kBAAkBC,EAAO,oBAAoB,GAAGP,CAAS;AAAA,MACxE,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;"}