@tcn/ui 0.0.3 → 0.1.1

package/dist/stacks/box/end_resize_handle.js

@@ -1,16 +1,16 @@
 import { jsx as d } from "react/jsx-runtime";
 import { createHorizontalResizeHandler as l } from "./resize_handlers.js";
-import a from "classnames";
-import '../../end_resize_handle.css';const c = "_end-resize-handle_1c5e6ba", f = { "end-resize-handle": c };
+import { clsx as c } from "clsx";
+import '../../end_resize_handle.css';const f = "_end-resize-handle_1c5e6ba", z = { "end-resize-handle": f };
 function x({
-  targetRef: s,
+  targetRef: n,
   handleProps: e,
-  onWidthResize: n,
+  onWidthResize: s,
   onWidthResizeEnd: t
 }) {
   const i = l(
-    s,
     n,
+    s,
     t
   ), o = e?.offset ? e.offset : -8, r = {
     ...e?.style,
@@ -20,7 +20,7 @@ function x({
   return /* @__PURE__ */ d(
     "div",
     {
-      className: a(f["end-resize-handle"], "end-resize-handle"),
+      className: c(z["end-resize-handle"], "end-resize-handle"),
       onMouseDown: i,
       style: r,
       children: e?.children

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

@@ -1 +1 @@
-{"version":3,"file":"end_resize_handle.js","sources":["../../../src/stacks/box/end_resize_handle.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './end_resize_handle.module.css';\nimport { createHorizontalResizeHandler } from './resize_handlers.js';\nimport classNames from 'classnames';\nimport type { HandleProps } from './handle_props.js';\n\nexport interface EndResizeHandleProps {\n  targetRef: React.MutableRefObject<HTMLElement | null>;\n  handleProps?: HandleProps;\n  onWidthResize?: (value: number) => void;\n  onWidthResizeEnd?: (value: number) => void;\n}\n\nexport function EndResizeHandle({\n  targetRef,\n  handleProps,\n  onWidthResize,\n  onWidthResizeEnd,\n}: EndResizeHandleProps) {\n  const resizeHandler = createHorizontalResizeHandler(\n    targetRef,\n    onWidthResize,\n    onWidthResizeEnd\n  );\n  const offset = handleProps?.offset ? handleProps.offset : -8;\n\n  const endResizeHandleStyle: any = {\n    ...handleProps?.style,\n    '--resize-offset': `${offset}px`,\n    width: handleProps?.size || '16px',\n  };\n\n  return (\n    <div\n      className={classNames(styles['end-resize-handle'], 'end-resize-handle')}\n      onMouseDown={resizeHandler}\n      style={endResizeHandleStyle}\n    >\n      {handleProps?.children}\n    </div>\n  );\n}\n"],"names":["EndResizeHandle","targetRef","handleProps","onWidthResize","onWidthResizeEnd","resizeHandler","createHorizontalResizeHandler","offset","endResizeHandleStyle","jsx","classNames","styles"],"mappings":";;;;AAaO,SAASA,EAAgB;AAAA,EAC9B,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC;AACF,GAAyB;AACvB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA4B;AAAA,IAChC,GAAGN,GAAa;AAAA,IAChB,mBAAmB,GAAGK,CAAM;AAAA,IAC5B,OAAOL,GAAa,QAAQ;AAAA,EAAA;AAG9B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAWC,EAAO,mBAAmB,GAAG,mBAAmB;AAAA,MACtE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}
+{"version":3,"file":"end_resize_handle.js","sources":["../../../src/stacks/box/end_resize_handle.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './end_resize_handle.module.css';\nimport { createHorizontalResizeHandler } from './resize_handlers.js';\nimport { clsx } from 'clsx';\nimport type { HandleProps } from './handle_props.js';\n\nexport interface EndResizeHandleProps {\n  targetRef: React.MutableRefObject<HTMLElement | null>;\n  handleProps?: HandleProps;\n  onWidthResize?: (value: number) => void;\n  onWidthResizeEnd?: (value: number) => void;\n}\n\nexport function EndResizeHandle({\n  targetRef,\n  handleProps,\n  onWidthResize,\n  onWidthResizeEnd,\n}: EndResizeHandleProps) {\n  const resizeHandler = createHorizontalResizeHandler(\n    targetRef,\n    onWidthResize,\n    onWidthResizeEnd\n  );\n  const offset = handleProps?.offset ? handleProps.offset : -8;\n\n  const endResizeHandleStyle: any = {\n    ...handleProps?.style,\n    '--resize-offset': `${offset}px`,\n    width: handleProps?.size || '16px',\n  };\n\n  return (\n    <div\n      className={clsx(styles['end-resize-handle'], 'end-resize-handle')}\n      onMouseDown={resizeHandler}\n      style={endResizeHandleStyle}\n    >\n      {handleProps?.children}\n    </div>\n  );\n}\n"],"names":["EndResizeHandle","targetRef","handleProps","onWidthResize","onWidthResizeEnd","resizeHandler","createHorizontalResizeHandler","offset","endResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAaO,SAASA,EAAgB;AAAA,EAC9B,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC;AACF,GAAyB;AACvB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA4B;AAAA,IAChC,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,mBAAmB,GAAG,mBAAmB;AAAA,MAChE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}

package/dist/stacks/box/left_resize_handle.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
 import { createHorizontalResizeHandler as o } from "./resize_handlers.js";
-import a from "classnames";
-import '../../left_resize_handle.css';const z = "_left-resize-handle_215501a", c = { "left-resize-handle": z };
+import { clsx as z } from "clsx";
+import '../../left_resize_handle.css';const c = "_left-resize-handle_215501a", a = { "left-resize-handle": c };
 function u({
   targetRef: t,
   handleProps: e,
@@ -22,7 +22,7 @@ function u({
   return /* @__PURE__ */ n(
     "div",
     {
-      className: a(c["left-resize-handle"], "left-resize-handle"),
+      className: z(a["left-resize-handle"], "left-resize-handle"),
       onMouseDown: l,
       style: r,
       children: e?.children

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

@@ -1 +1 @@
-{"version":3,"file":"left_resize_handle.js","sources":["../../../src/stacks/box/left_resize_handle.tsx"],"sourcesContent":["import React from 'react';\nimport { HandleProps } from './handle_props.js';\nimport styles from './left_resize_handle.module.css';\nimport { createHorizontalResizeHandler } from './resize_handlers.js';\nimport classNames from 'classnames';\n\nexport interface LeftResizeHandleProps {\n  targetRef: React.MutableRefObject<HTMLElement | null>;\n  handleProps?: HandleProps;\n  onWidthResize?: (value: number) => void;\n  onWidthResizeEnd?: (value: number) => void;\n}\nexport function LeftResizeHandle({\n  targetRef,\n  handleProps,\n  onWidthResize,\n  onWidthResizeEnd,\n}: LeftResizeHandleProps) {\n  const resizeHandler = createHorizontalResizeHandler(\n    targetRef,\n    onWidthResize,\n    onWidthResizeEnd,\n    true,\n    true\n  );\n  const offset = handleProps?.offset ? handleProps.offset : -8;\n\n  const leftResizeHandleStyle: any = {\n    ...handleProps?.style,\n    '--resize-offset': `${offset}px`,\n    width: handleProps?.size || '16px',\n  };\n\n  return (\n    <div\n      className={classNames(styles['left-resize-handle'], 'left-resize-handle')}\n      onMouseDown={resizeHandler}\n      style={leftResizeHandleStyle}\n    >\n      {handleProps?.children}\n    </div>\n  );\n}\n"],"names":["LeftResizeHandle","targetRef","handleProps","onWidthResize","onWidthResizeEnd","resizeHandler","createHorizontalResizeHandler","offset","leftResizeHandleStyle","jsx","classNames","styles"],"mappings":";;;;AAYO,SAASA,EAAiB;AAAA,EAC/B,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC;AACF,GAA0B;AACxB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA6B;AAAA,IACjC,GAAGN,GAAa;AAAA,IAChB,mBAAmB,GAAGK,CAAM;AAAA,IAC5B,OAAOL,GAAa,QAAQ;AAAA,EAAA;AAG9B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAWC,EAAO,oBAAoB,GAAG,oBAAoB;AAAA,MACxE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}
+{"version":3,"file":"left_resize_handle.js","sources":["../../../src/stacks/box/left_resize_handle.tsx"],"sourcesContent":["import React from 'react';\nimport { HandleProps } from './handle_props.js';\nimport styles from './left_resize_handle.module.css';\nimport { createHorizontalResizeHandler } from './resize_handlers.js';\nimport { clsx } from 'clsx';\n\nexport interface LeftResizeHandleProps {\n  targetRef: React.MutableRefObject<HTMLElement | null>;\n  handleProps?: HandleProps;\n  onWidthResize?: (value: number) => void;\n  onWidthResizeEnd?: (value: number) => void;\n}\nexport function LeftResizeHandle({\n  targetRef,\n  handleProps,\n  onWidthResize,\n  onWidthResizeEnd,\n}: LeftResizeHandleProps) {\n  const resizeHandler = createHorizontalResizeHandler(\n    targetRef,\n    onWidthResize,\n    onWidthResizeEnd,\n    true,\n    true\n  );\n  const offset = handleProps?.offset ? handleProps.offset : -8;\n\n  const leftResizeHandleStyle: any = {\n    ...handleProps?.style,\n    '--resize-offset': `${offset}px`,\n    width: handleProps?.size || '16px',\n  };\n\n  return (\n    <div\n      className={clsx(styles['left-resize-handle'], 'left-resize-handle')}\n      onMouseDown={resizeHandler}\n      style={leftResizeHandleStyle}\n    >\n      {handleProps?.children}\n    </div>\n  );\n}\n"],"names":["LeftResizeHandle","targetRef","handleProps","onWidthResize","onWidthResizeEnd","resizeHandler","createHorizontalResizeHandler","offset","leftResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAYO,SAASA,EAAiB;AAAA,EAC/B,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC;AACF,GAA0B;AACxB,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA6B;AAAA,IACjC,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,oBAAoB,GAAG,oBAAoB;AAAA,MAClE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}

package/dist/stacks/box/right_resize_handle.js

@@ -1,17 +1,17 @@
 import { jsx as l } from "react/jsx-runtime";
 import { createHorizontalResizeHandler as f } from "./resize_handlers.js";
-import a from "classnames";
-import '../../right_resize_handle.css';const z = "_right-resize-handle_7f232b9", c = { "right-resize-handle": z };
-function g({
+import { clsx as z } from "clsx";
+import '../../right_resize_handle.css';const c = "_right-resize-handle_7f232b9", a = { "right-resize-handle": c };
+function m({
   targetRef: t,
   handleProps: e,
-  onWidthResize: s,
-  onWidthResizeEnd: i
+  onWidthResize: i,
+  onWidthResizeEnd: s
 }) {
   const r = f(
     t,
-    s,
     i,
+    s,
     !1,
     !0
   ), n = e?.offset ? e.offset : -8, o = {
@@ -22,7 +22,7 @@ function g({
   return /* @__PURE__ */ l(
     "div",
     {
-      className: a(c["right-resize-handle"], "right-resize-handle"),
+      className: z(a["right-resize-handle"], "right-resize-handle"),
       onMouseDown: r,
       style: o,
       children: e?.children
@@ -30,6 +30,6 @@ function g({
   );
 }
 export {
-  g as RightResizeHandle
+  m as RightResizeHandle
 };
 //# sourceMappingURL=right_resize_handle.js.map

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 classNames from 'classnames';\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={classNames(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","classNames","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,EAAWC,EAAO,qBAAqB,GAAG,qBAAqB;AAAA,MAC1E,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'], '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;"}

package/dist/stacks/box/start_resize_handle.js

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

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 classNames from 'classnames';\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={classNames(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","classNames","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,EAAWC,EAAO,qBAAqB,GAAG,qBAAqB;AAAA,MAC1E,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'], '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;"}

package/dist/stacks/box/top_resize_handle.js

@@ -1,17 +1,17 @@
 import { jsx as l } from "react/jsx-runtime";
 import { createVerticalResizeHandler as c } from "./resize_handlers.js";
-import a from "classnames";
-import '../../top_resize_handle.css';const f = "_top-resize-handle_fe19234", p = { "top-resize-handle": f };
-function H({
+import { clsx as f } from "clsx";
+import '../../top_resize_handle.css';const p = "_top-resize-handle_fe19234", z = { "top-resize-handle": p };
+function x({
   targetRef: t,
   handleProps: e,
-  onHeightResize: s,
-  onHeightResizeEnd: o
+  onHeightResize: o,
+  onHeightResizeEnd: s
 }) {
   const i = c(
     t,
-    s,
     o,
+    s,
     !0
   ), n = e?.offset ? e.offset : -8, r = {
     ...e?.style,
@@ -21,7 +21,7 @@ function H({
   return /* @__PURE__ */ l(
     "div",
     {
-      className: a(p["top-resize-handle"], "top-resize-handle"),
+      className: f(z["top-resize-handle"], "top-resize-handle"),
       onMouseDown: i,
       style: r,
       children: e?.children
@@ -29,6 +29,6 @@ function H({
   );
 }
 export {
-  H as TopResizeHandle
+  x as TopResizeHandle
 };
 //# sourceMappingURL=top_resize_handle.js.map

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 classNames from 'classnames';\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={classNames(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","classNames","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,EAAWC,EAAO,mBAAmB,GAAG,mBAAmB;AAAA,MACtE,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'], '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;"}

package/dist/stacks/h_collapsible_box.js

@@ -1,11 +1,11 @@
-import { jsx as f } from "react/jsx-runtime";
+import { jsx as m } from "react/jsx-runtime";
 import t, { useLayoutEffect as p } from "react";
 import "../utils/focus_redirect.js";
 import "../utils/click_away_listener.js";
 import "../utils/scroll_away_listener.js";
 import { useForkRef as d } from "../utils/hooks/use_fork_ref.js";
 import "../utils/hooks/use_resize_observer.js";
-import u from "classnames";
+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";
@@ -14,8 +14,8 @@ const F = t.forwardRef(function({ open: l = !1, defaultWidth: i = "400px", ...e
   p(() => {
     s.current?.style.setProperty("--collapsible-size", i);
   }, [i]);
-  const m = x(l, s) && !l ? null : e.children;
-  return /* @__PURE__ */ f(
+  const f = x(l, s) && !l ? null : e.children;
+  return /* @__PURE__ */ m(
     R,
     {
       ref: n,
@@ -30,7 +30,7 @@ const F = t.forwardRef(function({ open: l = !1, defaultWidth: i = "400px", ...e
         r(!1), e.onWidthResizeEnd?.(o), s.current?.style.setProperty("--collapsible-size", `${o}px`);
       },
       className: u(e.className, z["collapsible-box"]),
-      children: m
+      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 classNames from 'classnames';\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={classNames(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","classNames","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,EAAWb,EAAM,WAAWc,EAAO,iBAAiB,CAAC;AAAA,MAChE,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(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;"}

package/dist/stacks/h_stack.js

@@ -1,16 +1,16 @@
 import { jsx as K } from "react/jsx-runtime";
-import L from "classnames";
+import { clsx as L } from "clsx";
 import M from "react";
 import { removeUndefinedProperties as O } from "./utils/remove_undefined_properties.js";
 import { s as Q } from "../stack.module-CBV1f12Z.js";
-import { isCustomSizeProp as s } from "./utils/isCustomSizeProp.js";
+import { isCustomSizeProp as r } from "./utils/isCustomSizeProp.js";
 const tt = M.forwardRef(function({
-  as: r = "div",
+  as: s = "div",
   children: i,
   style: n,
   className: l,
-  hAlign: m = "start",
-  vAlign: d = "center",
+  hAlign: d = "start",
+  vAlign: m = "center",
   inline: f,
   allowFlow: c,
   width: t = "default",
@@ -27,14 +27,14 @@ const tt = M.forwardRef(function({
   paddingInlineStart: x,
   paddingInlineEnd: B,
   paddingTop: H,
-  paddingBottom: N,
-  margin: P,
-  marginBlock: R,
-  marginInline: W,
-  marginInlineStart: j,
-  marginInlineEnd: z,
-  marginTop: A,
-  marginBottom: C,
+  paddingBottom: P,
+  margin: R,
+  marginBlock: W,
+  marginInline: j,
+  marginInlineStart: z,
+  marginInlineEnd: A,
+  marginTop: C,
+  marginBottom: N,
   zIndex: U,
   overflowX: o,
   overflowY: e,
@@ -43,12 +43,12 @@ const tt = M.forwardRef(function({
   columnGap: D,
   ...E
 }, F) {
-  const G = r, I = {
+  const G = s, I = {
     minWidth: p,
-    width: s(t) ? void 0 : t,
+    width: r(t) ? void 0 : t,
     maxWidth: h,
     minHeight: g,
-    height: s(a) ? void 0 : a,
+    height: r(a) ? void 0 : a,
     maxHeight: v,
     flexGrow: k,
     flexShrink: u,
@@ -61,14 +61,14 @@ const tt = M.forwardRef(function({
     paddingInlineStart: x,
     paddingInlineEnd: B,
     paddingTop: H,
-    paddingBottom: N,
-    margin: P,
-    marginBlock: R,
-    marginInline: W,
-    marginInlineStart: j,
-    marginInlineEnd: z,
-    marginTop: A,
-    marginBottom: C,
+    paddingBottom: P,
+    margin: R,
+    marginBlock: W,
+    marginInline: j,
+    marginInlineStart: z,
+    marginInlineEnd: A,
+    marginTop: C,
+    marginBottom: N,
     gap: b,
     rowGap: q,
     columnGap: D
@@ -84,8 +84,8 @@ const tt = M.forwardRef(function({
       style: J,
       "data-inline": !!f,
       "data-allow-flow": !!c,
-      "data-v-alignment": d,
-      "data-h-alignment": m,
+      "data-v-alignment": m,
+      "data-h-alignment": d,
       "data-height": a,
       "data-width": t,
       "data-overflow-x": o,

package/dist/stacks/h_stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"h_stack.js","sources":["../../src/stacks/h_stack.tsx"],"sourcesContent":["import classNames from 'classnames';\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={classNames(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","classNames","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,EAAWC,EAAO,SAAS,GAAG1C,GAAW,WAAW,OAAO;AAAA,MACtE,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, '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;"}

package/dist/stacks/spacer.js

@@ -1,16 +1,16 @@
 import { jsx as m } from "react/jsx-runtime";
-import p from "classnames";
+import { clsx as p } from "clsx";
 import d from "react";
 const g = d.forwardRef(function({
   width: o = "auto",
   height: t = "auto",
-  fullHeight: a = !1,
-  fullWidth: n = !1,
-  fillSpaceWeight: r = 1,
+  fullHeight: n = !1,
+  fullWidth: r = !1,
+  fillSpaceWeight: a = 1,
   style: s,
   className: f
 }, c) {
-  const l = o === "auto" && t === "auto" ? r : void 0, e = n ? "100%" : o, i = a ? "100%" : t;
+  const l = o === "auto" && t === "auto" ? a : void 0, e = r ? "100%" : o, i = n ? "100%" : t;
   return /* @__PURE__ */ m(
     "div",
     {

package/dist/stacks/spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"spacer.js","sources":["../../src/stacks/spacer.tsx"],"sourcesContent":["import classNames from 'classnames';\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={classNames('spacer', className)}\n    ></div>\n  );\n});\n"],"names":["Spacer","React","width","height","fullHeight","fullWidth","fillSpaceWeight","style","className","ref","flex","finalWidth","finalHeight","jsx","classNames"],"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,EAAW,UAAUN,CAAS;AAAA,IAAA;AAAA,EAAA;AAG/C,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)}\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;"}

package/dist/stacks/story_components/circle.js

@@ -1,20 +1,20 @@
 import { jsx as s } from "react/jsx-runtime";
-import m from "react";
-import { ZStack as a } from "../z_stack.js";
-import f from "classnames";
-import '../../circle.css';const n = "_circle_2f733a0", p = { circle: n }, w = m.forwardRef(function({ color: r = "#90d9c7", size: c = "150px", style: t, className: o, ...e }, i) {
+import f from "react";
+import { ZStack as m } from "../z_stack.js";
+import { clsx as n } from "clsx";
+import '../../circle.css';const a = "_circle_2f733a0", p = { circle: a }, w = f.forwardRef(function({ color: r = "#90d9c7", size: c = "150px", style: t, className: o, ...e }, i) {
   const l = {
     ...t,
     "--color": r
   };
   return /* @__PURE__ */ s(
-    a,
+    m,
     {
       ref: i,
       style: l,
       width: c,
       height: c,
-      className: f(o, p.circle),
+      className: n(o, p.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 classNames from 'classnames';\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={classNames(className, styles['circle'])}\n      {...props}\n    />\n  );\n});\n"],"names":["Circle","React","color","size","style","className","props","ref","finalStyle","jsx","ZStack","classNames","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,EAAWN,GAAWO,EAAO,MAAS;AAAA,MAChD,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'])}\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;"}

package/dist/stacks/story_components/picture_placeholder.js

@@ -1,8 +1,8 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import m from "react";
-import s from "classnames";
-import '../../picture_placeholder.css';const i = "_picture-placeholder_ec357fb", a = { "picture-placeholder": i }, f = m.forwardRef(function({
-  color: r = "currentColor",
+import { clsx as s } from "clsx";
+import '../../picture_placeholder.css';const i = "_picture-placeholder_ec357fb", p = { "picture-placeholder": i }, f = m.forwardRef(function({
+  color: e = "currentColor",
   size: c = "150px",
   style: l,
   className: o,
@@ -10,9 +10,9 @@ import '../../picture_placeholder.css';const i = "_picture-placeholder_ec357fb",
 }, h) {
   const v = {
     ...l,
-    "--color": r
+    "--color": e
   };
-  return /* @__PURE__ */ e(
+  return /* @__PURE__ */ r(
     "svg",
     {
       ref: h,
@@ -20,10 +20,10 @@ 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(o, a["picture-placeholder"]),
+      className: s(o, p["picture-placeholder"]),
       style: v,
       ...t,
-      children: /* @__PURE__ */ e(
+      children: /* @__PURE__ */ r(
         "path",
         {
           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",

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 classNames from 'classnames';\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={classNames(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","classNames","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,EAAWL,GAAWM,EAAO,qBAAqB,CAAC;AAAA,MAC9D,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(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;"}

package/dist/stacks/story_components/rect.js

@@ -1,25 +1,25 @@
-import { jsx as f } from "react/jsx-runtime";
-import n from "react";
+import { jsx as n } from "react/jsx-runtime";
+import a from "react";
 import { Box as l } from "../box/box.js";
-import i from "classnames";
-import '../../rect.css';const p = "_rect_60482cd", R = { rect: p }, _ = n.forwardRef(function({
+import { clsx as i } from "clsx";
+import '../../rect.css';const p = "_rect_60482cd", x = { rect: p }, j = a.forwardRef(function({
   color: t = "#acdef0",
   style: o,
   className: r,
   width: c = "100%",
   height: e = "auto",
   ...s
-}, m) {
-  const a = {
+}, f) {
+  const m = {
     ...o,
     "--color": t
   };
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ n(
     l,
     {
-      ref: m,
-      style: a,
-      className: i(r, R.rect),
+      ref: f,
+      style: m,
+      className: i(r, x.rect),
       width: c,
       height: e,
       ...s
@@ -27,6 +27,6 @@ import '../../rect.css';const p = "_rect_60482cd", R = { rect: p }, _ = n.forwar
   );
 });
 export {
-  _ as Rect
+  j as Rect
 };
 //# sourceMappingURL=rect.js.map

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 classNames from 'classnames';\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={classNames(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","classNames","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,EAAWR,GAAWS,EAAO,IAAO;AAAA,MAC/C,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'])}\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;"}