@tcn/ui 0.0.3 → 0.1.1

package/dist/layouts/grid/grid.js

@@ -1,16 +1,16 @@
 import { jsx as k } from "react/jsx-runtime";
-import q from "classnames";
+import { clsx as q } from "clsx";
 import c from "react";
 import { removeUndefinedProperties as z } from "../../stacks/utils/remove_undefined_properties.js";
 import '../../grid.css';const B = "_grid_d0ae3e3", D = { grid: B }, L = c.forwardRef(function({
-  as: a = "div",
-  children: r,
-  style: l,
-  className: d,
+  as: l = "div",
+  children: e,
+  style: d,
+  className: a,
   itemHeight: m,
   itemWidth: o,
   columnAmount: i,
-  gap: e,
+  gap: r,
   rowGap: f,
   columnGap: p,
   padding: h,
@@ -24,21 +24,21 @@ import '../../grid.css';const B = "_grid_d0ae3e3", D = { grid: B }, L = c.forwar
   marginInline: w,
   marginBlock: C,
   marginInlineStart: G,
-  marginInlineEnd: N,
-  marginTop: R,
-  marginBottom: S,
-  zIndex: _,
-  ...j
-}, M) {
-  const P = a, U = c.Children.toArray(r).length, W = `repeat(auto-fill, ${o}px)`;
+  marginInlineEnd: R,
+  marginTop: S,
+  marginBottom: _,
+  zIndex: j,
+  ...M
+}, N) {
+  const P = l, U = c.Children.toArray(e).length, W = `repeat(auto-fill, ${o}px)`;
   let t;
   if (i) {
-    const s = Math.min(i, U), n = String(s * o) + "px";
-    e ? t = `calc(${n} + ${e} * ${s - 1})` : t = n;
+    const n = Math.min(i, U), s = String(n * o) + "px";
+    r ? t = `calc(${s} + ${r} * ${n - 1})` : t = s;
   } else
     t = "100%";
   const b = z({
-    gap: e,
+    gap: r,
     rowGap: f,
     columnGap: p,
     "--item-height": m + "px",
@@ -55,22 +55,13 @@ import '../../grid.css';const B = "_grid_d0ae3e3", D = { grid: B }, L = c.forwar
     marginInline: w,
     marginBlock: C,
     marginInlineStart: G,
-    marginInlineEnd: N,
-    marginTop: R,
-    marginBottom: S,
-    zIndex: _,
-    ...l
+    marginInlineEnd: R,
+    marginTop: S,
+    marginBottom: _,
+    zIndex: j,
+    ...d
   });
-  return /* @__PURE__ */ k(
-    P,
-    {
-      ref: M,
-      className: q(D.grid, d),
-      style: b,
-      ...j,
-      children: r
-    }
-  );
+  return /* @__PURE__ */ k(P, { ref: N, className: q(D.grid, a), style: b, ...M, children: e });
 });
 export {
   L as Grid

package/dist/layouts/grid/grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid.js","sources":["../../../src/layouts/grid/grid.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { HTMLAttributes } from 'react';\nimport { CommonProps } from '../../stacks/types/common.js';\nimport styles from './grid.module.css';\nimport { removeUndefinedProperties } from '../../stacks/utils/remove_undefined_properties.js';\n\nexport interface GridProps extends CommonProps, HTMLAttributes<HTMLElement> {\n  itemHeight: number;\n  itemWidth: number;\n  as?: string;\n  columnAmount?: number;\n  children?: React.ReactNode;\n  gap?: string | number;\n  rowGap?: string | number;\n  columnGap?: string | number;\n  padding?: string;\n  paddingInline?: string;\n  paddingBlock?: string;\n  paddingInlineStart?: string;\n  paddingInlineEnd?: string;\n  paddingTop?: string;\n  paddingBottom?: string;\n  margin?: string;\n  marginInline?: string;\n  marginBlock?: string;\n  marginInlineStart?: string;\n  marginInlineEnd?: string;\n  marginTop?: string;\n  marginBottom?: string;\n  zIndex?: string | number;\n}\n\nexport const Grid = React.forwardRef(function Grid(\n  {\n    as = 'div',\n    children,\n    style,\n    className,\n    itemHeight,\n    itemWidth,\n    columnAmount,\n    gap,\n    rowGap,\n    columnGap,\n    padding,\n    paddingInline,\n    paddingBlock,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingTop,\n    paddingBottom,\n    margin,\n    marginInline,\n    marginBlock,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    zIndex,\n    ...attr\n  }: GridProps,\n  ref: React.Ref<HTMLElement>\n) {\n  const As = as as React.ElementType;\n  // Calculate the number of children\n  const childrenArray = React.Children.toArray(children);\n  const childrenCount = childrenArray.length;\n\n  const template = `repeat(auto-fill, ${itemWidth}px)`;\n  let maxWidth: string;\n\n  if (columnAmount) {\n    const amount = Math.min(columnAmount, childrenCount);\n    const columnWidth = String(amount * itemWidth) + 'px';\n\n    if (gap) {\n      maxWidth = `calc(${columnWidth} + ${gap} * ${amount - 1})`;\n    } else {\n      maxWidth = columnWidth;\n    }\n  } else {\n    maxWidth = '100%';\n  }\n\n  const gridStyles: any = removeUndefinedProperties({\n    gap,\n    rowGap,\n    columnGap,\n    '--item-height': itemHeight + 'px',\n    '--max-width': maxWidth,\n    '--template': template,\n    padding,\n    paddingInline,\n    paddingBlock,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingTop,\n    paddingBottom,\n    margin,\n    marginInline,\n    marginBlock,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    zIndex,\n    ...style,\n  });\n\n  return (\n    <As\n      ref={ref}\n      className={classNames(styles.grid, className)}\n      style={gridStyles}\n      {...attr}\n    >\n      {children}\n    </As>\n  );\n});\n"],"names":["Grid","React","as","children","style","className","itemHeight","itemWidth","columnAmount","gap","rowGap","columnGap","padding","paddingInline","paddingBlock","paddingInlineStart","paddingInlineEnd","paddingTop","paddingBottom","margin","marginInline","marginBlock","marginInlineStart","marginInlineEnd","marginTop","marginBottom","zIndex","attr","ref","As","childrenCount","template","maxWidth","amount","columnWidth","gridStyles","removeUndefinedProperties","jsx","classNames","styles"],"mappings":";;;;4CAgCaA,IAAOC,EAAM,WAAW,SACnC;AAAA,EACE,IAAAC,IAAK;AAAA,EACL,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAK3B,GAGL4B,IADgB7B,EAAM,SAAS,QAAQE,CAAQ,EACjB,QAE9B4B,IAAW,qBAAqBxB,CAAS;AAC/C,MAAIyB;AAEJ,MAAIxB,GAAc;AAChB,UAAMyB,IAAS,KAAK,IAAIzB,GAAcsB,CAAa,GAC7CI,IAAc,OAAOD,IAAS1B,CAAS,IAAI;AAEjD,IAAIE,IACFuB,IAAW,QAAQE,CAAW,MAAMzB,CAAG,MAAMwB,IAAS,CAAC,MAEvDD,IAAWE;AAAA,EAEf;AACE,IAAAF,IAAW;AAGb,QAAMG,IAAkBC,EAA0B;AAAA,IAChD,KAAA3B;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,iBAAiBL,IAAa;AAAA,IAC9B,eAAe0B;AAAA,IACf,cAAcD;AAAA,IACd,SAAAnB;AAAA,IACA,eAAAC;AAAA,IACA,cAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,QAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGtB;AAAA,EAAA,CACJ;AAED,SACE,gBAAAiC;AAAA,IAACR;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWU,EAAWC,EAAO,MAAMlC,CAAS;AAAA,MAC5C,OAAO8B;AAAA,MACN,GAAGR;AAAA,MAEH,UAAAxB;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"grid.js","sources":["../../../src/layouts/grid/grid.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { HTMLAttributes } from 'react';\nimport { CommonProps } from '../../stacks/types/common.js';\nimport styles from './grid.module.css';\nimport { removeUndefinedProperties } from '../../stacks/utils/remove_undefined_properties.js';\n\nexport interface GridProps extends CommonProps, HTMLAttributes<HTMLElement> {\n  itemHeight: number;\n  itemWidth: number;\n  as?: string;\n  columnAmount?: number;\n  children?: React.ReactNode;\n  gap?: string | number;\n  rowGap?: string | number;\n  columnGap?: string | number;\n  padding?: string;\n  paddingInline?: string;\n  paddingBlock?: string;\n  paddingInlineStart?: string;\n  paddingInlineEnd?: string;\n  paddingTop?: string;\n  paddingBottom?: string;\n  margin?: string;\n  marginInline?: string;\n  marginBlock?: string;\n  marginInlineStart?: string;\n  marginInlineEnd?: string;\n  marginTop?: string;\n  marginBottom?: string;\n  zIndex?: string | number;\n}\n\nexport const Grid = React.forwardRef(function Grid(\n  {\n    as = 'div',\n    children,\n    style,\n    className,\n    itemHeight,\n    itemWidth,\n    columnAmount,\n    gap,\n    rowGap,\n    columnGap,\n    padding,\n    paddingInline,\n    paddingBlock,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingTop,\n    paddingBottom,\n    margin,\n    marginInline,\n    marginBlock,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    zIndex,\n    ...attr\n  }: GridProps,\n  ref: React.Ref<HTMLElement>\n) {\n  const As = as as React.ElementType;\n  // Calculate the number of children\n  const childrenArray = React.Children.toArray(children);\n  const childrenCount = childrenArray.length;\n\n  const template = `repeat(auto-fill, ${itemWidth}px)`;\n  let maxWidth: string;\n\n  if (columnAmount) {\n    const amount = Math.min(columnAmount, childrenCount);\n    const columnWidth = String(amount * itemWidth) + 'px';\n\n    if (gap) {\n      maxWidth = `calc(${columnWidth} + ${gap} * ${amount - 1})`;\n    } else {\n      maxWidth = columnWidth;\n    }\n  } else {\n    maxWidth = '100%';\n  }\n\n  const gridStyles: any = removeUndefinedProperties({\n    gap,\n    rowGap,\n    columnGap,\n    '--item-height': itemHeight + 'px',\n    '--max-width': maxWidth,\n    '--template': template,\n    padding,\n    paddingInline,\n    paddingBlock,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingTop,\n    paddingBottom,\n    margin,\n    marginInline,\n    marginBlock,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    zIndex,\n    ...style,\n  });\n\n  return (\n    <As ref={ref} className={clsx(styles.grid, className)} style={gridStyles} {...attr}>\n      {children}\n    </As>\n  );\n});\n"],"names":["Grid","React","as","children","style","className","itemHeight","itemWidth","columnAmount","gap","rowGap","columnGap","padding","paddingInline","paddingBlock","paddingInlineStart","paddingInlineEnd","paddingTop","paddingBottom","margin","marginInline","marginBlock","marginInlineStart","marginInlineEnd","marginTop","marginBottom","zIndex","attr","ref","As","childrenCount","template","maxWidth","amount","columnWidth","gridStyles","removeUndefinedProperties","jsx","clsx","styles"],"mappings":";;;;4CAgCaA,IAAOC,EAAM,WAAW,SACnC;AAAA,EACE,IAAAC,IAAK;AAAA,EACL,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAK3B,GAGL4B,IADgB7B,EAAM,SAAS,QAAQE,CAAQ,EACjB,QAE9B4B,IAAW,qBAAqBxB,CAAS;AAC/C,MAAIyB;AAEJ,MAAIxB,GAAc;AAChB,UAAMyB,IAAS,KAAK,IAAIzB,GAAcsB,CAAa,GAC7CI,IAAc,OAAOD,IAAS1B,CAAS,IAAI;AAEjD,IAAIE,IACFuB,IAAW,QAAQE,CAAW,MAAMzB,CAAG,MAAMwB,IAAS,CAAC,MAEvDD,IAAWE;AAAA,EAEf;AACE,IAAAF,IAAW;AAGb,QAAMG,IAAkBC,EAA0B;AAAA,IAChD,KAAA3B;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,iBAAiBL,IAAa;AAAA,IAC9B,eAAe0B;AAAA,IACf,cAAcD;AAAA,IACd,SAAAnB;AAAA,IACA,eAAAC;AAAA,IACA,cAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,QAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGtB;AAAA,EAAA,CACJ;AAED,SACE,gBAAAiC,EAACR,GAAA,EAAG,KAAAD,GAAU,WAAWU,EAAKC,EAAO,MAAMlC,CAAS,GAAG,OAAO8B,GAAa,GAAGR,GAC3E,UAAAxB,EAAA,CACH;AAEJ,CAAC;"}

package/dist/layouts/header/header.js

@@ -1,30 +1,30 @@
 import { jsx as c } from "react/jsx-runtime";
 import m from "react";
-import f from "classnames";
+import { clsx as f } from "clsx";
 import { HStack as h } from "../../stacks/h_stack.js";
-import '../../header.css';const n = "_header_3155fa4", i = { header: n }, x = m.forwardRef(function({
+import '../../header.css';const n = "_header_3155fa4", i = { header: n }, H = m.forwardRef(function({
   hierarchy: e = "secondary",
-  height: a = "auto",
-  children: r,
+  height: r = "auto",
+  children: a,
   className: t,
   size: o = "md",
-  ...s
-}, d) {
+  ...d
+}, s) {
   return /* @__PURE__ */ c(
     h,
     {
-      ref: d,
+      ref: s,
       as: "header",
       className: f(i.header, t, "tcn-header", "header"),
       "data-hierarchy": e,
       "data-size": o,
-      height: a,
-      ...s,
-      children: r
+      height: r,
+      ...d,
+      children: a
     }
   );
 });
 export {
-  x as Header
+  H as Header
 };
 //# sourceMappingURL=header.js.map

package/dist/layouts/header/header.js.map

@@ -1 +1 @@
-{"version":3,"file":"header.js","sources":["../../../src/layouts/header/header.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { HStack, type HStackProps } from '../../stacks/h_stack.js';\nimport type { Hierarchy, Size } from '../../utils/index.js';\nimport styles from './header.module.css';\n\n// UtilityBar\nexport interface HeaderProps extends Omit<HStackProps, 'as'> {\n  hierarchy?: Hierarchy;\n  size?: Size;\n}\n\nexport const Header = React.forwardRef<HTMLElement, HeaderProps>(function Header(\n  {\n    hierarchy = 'secondary',\n    height = 'auto',\n    children,\n    className,\n    size = 'md',\n    ...props\n  }: HeaderProps,\n  ref\n) {\n  return (\n    <HStack\n      ref={ref}\n      as=\"header\"\n      className={classNames(styles.header, className, 'tcn-header', 'header')}\n      data-hierarchy={hierarchy}\n      data-size={size}\n      height={height}\n      {...props}\n    >\n      {children}\n    </HStack>\n  );\n});\n"],"names":["Header","React","hierarchy","height","children","className","size","props","ref","jsx","HStack","classNames","styles"],"mappings":";;;;gDAYaA,IAASC,EAAM,WAAqC,SAC/D;AAAA,EACE,WAAAC,IAAY;AAAA,EACZ,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,IAAG;AAAA,MACH,WAAWG,EAAWC,EAAO,QAAQP,GAAW,cAAc,QAAQ;AAAA,MACtE,kBAAgBH;AAAA,MAChB,aAAWI;AAAA,MACX,QAAAH;AAAA,MACC,GAAGI;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"header.js","sources":["../../../src/layouts/header/header.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { HStack, type HStackProps } from '../../stacks/h_stack.js';\nimport type { Hierarchy, Size } from '../../utils/index.js';\nimport styles from './header.module.css';\n\n// UtilityBar\nexport interface HeaderProps extends Omit<HStackProps, 'as'> {\n  hierarchy?: Hierarchy;\n  size?: Size;\n}\n\nexport const Header = React.forwardRef<HTMLElement, HeaderProps>(function Header(\n  {\n    hierarchy = 'secondary',\n    height = 'auto',\n    children,\n    className,\n    size = 'md',\n    ...props\n  }: HeaderProps,\n  ref\n) {\n  return (\n    <HStack\n      ref={ref}\n      as=\"header\"\n      className={clsx(styles.header, className, 'tcn-header', 'header')}\n      data-hierarchy={hierarchy}\n      data-size={size}\n      height={height}\n      {...props}\n    >\n      {children}\n    </HStack>\n  );\n});\n"],"names":["Header","React","hierarchy","height","children","className","size","props","ref","jsx","HStack","clsx","styles"],"mappings":";;;;gDAYaA,IAASC,EAAM,WAAqC,SAC/D;AAAA,EACE,WAAAC,IAAY;AAAA,EACZ,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,IAAG;AAAA,MACH,WAAWG,EAAKC,EAAO,QAAQP,GAAW,cAAc,QAAQ;AAAA,MAChE,kBAAgBH;AAAA,MAChB,aAAWI;AAAA,MACX,QAAAH;AAAA,MACC,GAAGI;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/layouts/index.d.ts

@@ -1,3 +1,5 @@
+export * from './body/h_body.js';
+export * from './body/v_body.js';
 export * from './column/column.js';
 export * from './divider/divider.js';
 export * from './footer/footer.js';
@@ -8,6 +10,5 @@ export * from './list/list.js';
 export * from './list/section_header.js';
 export * from './sidebar_end/sidebar_end.js';
 export * from './sidebar_start/sidebar_start.js';
-export * from './body/h_body.js';
-export * from './body/v_body.js';
+export * from './utility_bar/utility_bar.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layouts/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layouts/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC"}

package/dist/layouts/index.js

@@ -1,27 +1,29 @@
-import { Column as e } from "./column/column.js";
-import { Divider as m } from "./divider/divider.js";
-import { Footer as p } from "./footer/footer.js";
-import { Grid as d } from "./grid/grid.js";
-import { Header as a } from "./header/header.js";
-import { Item as n } from "./list/item.js";
-import { List as b } from "./list/list.js";
-import { SectionHeader as B } from "./list/section_header.js";
-import { SidebarEnd as l } from "./sidebar_end/sidebar_end.js";
-import { SidebarStart as u } from "./sidebar_start/sidebar_start.js";
-import { HBody as C } from "./body/h_body.js";
-import { VBody as E } from "./body/v_body.js";
+import { HBody as e } from "./body/h_body.js";
+import { VBody as m } from "./body/v_body.js";
+import { Column as p } from "./column/column.js";
+import { Divider as d } from "./divider/divider.js";
+import { Footer as a } from "./footer/footer.js";
+import { Grid as n } from "./grid/grid.js";
+import { Header as B } from "./header/header.js";
+import { Item as b } from "./list/item.js";
+import { List as c } from "./list/list.js";
+import { SectionHeader as u } from "./list/section_header.js";
+import { SidebarEnd as C } from "./sidebar_end/sidebar_end.js";
+import { SidebarStart as E } from "./sidebar_start/sidebar_start.js";
+import { UtilityBar as G } from "./utility_bar/utility_bar.js";
 export {
-  e as Column,
-  m as Divider,
-  p as Footer,
-  d as Grid,
-  C as HBody,
-  a as Header,
-  n as Item,
-  b as List,
-  B as SectionHeader,
-  l as SidebarEnd,
-  u as SidebarStart,
-  E as VBody
+  p as Column,
+  d as Divider,
+  a as Footer,
+  n as Grid,
+  e as HBody,
+  B as Header,
+  b as Item,
+  c as List,
+  u as SectionHeader,
+  C as SidebarEnd,
+  E as SidebarStart,
+  G as UtilityBar,
+  m as VBody
 };
 //# sourceMappingURL=index.js.map

package/dist/layouts/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/layouts/list/item.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 import { HStackProps } from '../../stacks/h_stack.js';
 export interface ItemProps extends Omit<HStackProps, 'as' | 'children'> {
     children?: React.ReactNode;
+    selected?: boolean;
 }
 export declare const Item: React.ForwardRefExoticComponent<ItemProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=item.d.ts.map

package/dist/layouts/list/item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/layouts/list/item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGnE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,UAAU,CAAC;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,IAAI,kFASf,CAAC"}
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/layouts/list/item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGnE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,UAAU,CAAC;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,IAAI,kFAgBf,CAAC"}

package/dist/layouts/list/item.js

@@ -1,11 +1,22 @@
-import { jsx as e } from "react/jsx-runtime";
-import a from "react";
-import { HStack as s } from "../../stacks/h_stack.js";
-import f from "classnames";
-const u = a.forwardRef(function({ children: m, className: r, ...t }, o) {
-  return /* @__PURE__ */ e(s, { ref: o, as: "li", className: f("item", r), ...t, children: m });
+import { jsx as m } from "react/jsx-runtime";
+import o from "react";
+import { HStack as c } from "../../stacks/h_stack.js";
+import { clsx as f } from "clsx";
+const x = o.forwardRef(function({ children: r, className: a, selected: t = !1, ...e }, i) {
+  return /* @__PURE__ */ m(
+    c,
+    {
+      ref: i,
+      as: "li",
+      "data-hierarchy": t ? "primary" : "tertiary",
+      "data-is-selected": t,
+      className: f("tcn-item", "tcn-interactive", a),
+      ...e,
+      children: r
+    }
+  );
 });
 export {
-  u as Item
+  x as Item
 };
 //# sourceMappingURL=item.js.map

package/dist/layouts/list/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","sources":["../../../src/layouts/list/item.tsx"],"sourcesContent":["import React from 'react';\nimport { HStack, type HStackProps } from '../../stacks/h_stack.js';\nimport classnames from 'classnames';\n\nexport interface ItemProps extends Omit<HStackProps, 'as' | 'children'> {\n  children?: React.ReactNode;\n}\n\nexport const Item = React.forwardRef<HTMLDivElement, ItemProps>(function Item(\n  { children, className, ...props }: ItemProps,\n  ref\n) {\n  return (\n    <HStack ref={ref} as=\"li\" className={classnames('item', className)} {...props}>\n      {children}\n    </HStack>\n  );\n});\n"],"names":["Item","React","children","className","props","ref","jsx","HStack","classnames"],"mappings":";;;;AAQO,MAAMA,IAAOC,EAAM,WAAsC,SAC9D,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAC1BC,GACA;AACA,SACE,gBAAAC,EAACC,GAAA,EAAO,KAAAF,GAAU,IAAG,MAAK,WAAWG,EAAW,QAAQL,CAAS,GAAI,GAAGC,GACrE,UAAAF,EAAA,CACH;AAEJ,CAAC;"}
+{"version":3,"file":"item.js","sources":["../../../src/layouts/list/item.tsx"],"sourcesContent":["import React from 'react';\nimport { HStack, type HStackProps } from '../../stacks/h_stack.js';\nimport { clsx } from 'clsx';\n\nexport interface ItemProps extends Omit<HStackProps, 'as' | 'children'> {\n  children?: React.ReactNode;\n  selected?: boolean;\n}\n\nexport const Item = React.forwardRef<HTMLDivElement, ItemProps>(function Item(\n  { children, className, selected = false, ...props }: ItemProps,\n  ref\n) {\n  return (\n    <HStack\n      ref={ref}\n      as=\"li\"\n      data-hierarchy={selected ? 'primary' : 'tertiary'}\n      data-is-selected={selected}\n      className={clsx('tcn-item', 'tcn-interactive', className)}\n      {...props}\n    >\n      {children}\n    </HStack>\n  );\n});\n"],"names":["Item","React","children","className","selected","props","ref","jsx","HStack","clsx"],"mappings":";;;;AASO,MAAMA,IAAOC,EAAM,WAAsC,SAC9D,EAAE,UAAAC,GAAU,WAAAC,GAAW,UAAAC,IAAW,IAAO,GAAGC,EAAA,GAC5CC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,IAAG;AAAA,MACH,kBAAgBF,IAAW,YAAY;AAAA,MACvC,oBAAkBA;AAAA,MAClB,WAAWK,EAAK,YAAY,mBAAmBN,CAAS;AAAA,MACvD,GAAGE;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/layouts/list/list.js

@@ -1,16 +1,16 @@
-import { jsx as a } from "react/jsx-runtime";
-import e from "react";
-import f from "classnames";
-import { VStack as i } from "../../stacks/v_stack.js";
-const x = e.forwardRef(function({ children: o, className: r, isOrdered: t = !1, ...m }, s) {
-  return /* @__PURE__ */ a(
-    i,
+import { jsx as f } from "react/jsx-runtime";
+import i from "react";
+import { clsx as a } from "clsx";
+import { VStack as c } from "../../stacks/v_stack.js";
+const x = i.forwardRef(function({ children: t, className: o, isOrdered: r = !1, ...s }, m) {
+  return /* @__PURE__ */ f(
+    c,
     {
-      ref: s,
-      as: t ? "ol" : "ul",
-      className: f("list", r),
-      ...m,
-      children: o
+      ref: m,
+      as: r ? "ol" : "ul",
+      className: a("tcn-list", o),
+      ...s,
+      children: t
     }
   );
 });

package/dist/layouts/list/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","sources":["../../../src/layouts/list/list.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { VStack, type VStackProps } from '../../stacks/v_stack.js';\n\nexport interface ListProps extends Omit<VStackProps, 'as'> {\n  isOrdered?: boolean;\n}\n\nexport const List = React.forwardRef<HTMLDivElement, ListProps>(function Item(\n  { children, className, isOrdered = false, ...props }: ListProps,\n  ref\n) {\n  return (\n    <VStack\n      ref={ref}\n      as={isOrdered ? 'ol' : 'ul'}\n      className={classnames('list', className)}\n      {...props}\n    >\n      {children}\n    </VStack>\n  );\n});\n"],"names":["List","React","children","className","isOrdered","props","ref","jsx","VStack","classnames"],"mappings":";;;;AAQO,MAAMA,IAAOC,EAAM,WAAsC,SAC9D,EAAE,UAAAC,GAAU,WAAAC,GAAW,WAAAC,IAAY,IAAO,GAAGC,EAAA,GAC7CC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,IAAIF,IAAY,OAAO;AAAA,MACvB,WAAWK,EAAW,QAAQN,CAAS;AAAA,MACtC,GAAGE;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"list.js","sources":["../../../src/layouts/list/list.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { VStack, type VStackProps } from '../../stacks/v_stack.js';\n\nexport interface ListProps extends Omit<VStackProps, 'as'> {\n  isOrdered?: boolean;\n}\n\nexport const List = React.forwardRef<HTMLDivElement, ListProps>(function List(\n  { children, className, isOrdered = false, ...props }: ListProps,\n  ref\n) {\n  return (\n    <VStack\n      ref={ref}\n      as={isOrdered ? 'ol' : 'ul'}\n      className={clsx('tcn-list', className)}\n      {...props}\n    >\n      {children}\n    </VStack>\n  );\n});\n"],"names":["List","React","children","className","isOrdered","props","ref","jsx","VStack","clsx"],"mappings":";;;;AAQO,MAAMA,IAAOC,EAAM,WAAsC,SAC9D,EAAE,UAAAC,GAAU,WAAAC,GAAW,WAAAC,IAAY,IAAO,GAAGC,EAAA,GAC7CC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,IAAIF,IAAY,OAAO;AAAA,MACvB,WAAWK,EAAK,YAAYN,CAAS;AAAA,MACpC,GAAGE;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/layouts/sidebar_end/sidebar_end.js

@@ -1,16 +1,16 @@
 import { jsx as n } from "react/jsx-runtime";
-import { Box as l } from "../../stacks/box/box.js";
-import { VStack as x } from "../../stacks/v_stack.js";
-import B from "classnames";
+import { Box as x } from "../../stacks/box/box.js";
+import { VStack as l } from "../../stacks/v_stack.js";
+import { clsx as B } from "clsx";
 import _ from "react";
-import '../../sidebar_end.css';const y = "_sidebarEndBox_25f69cc", N = "_sidebarEnd_cb253a2", c = { sidebarEndBox: y, sidebarEnd: N }, I = _.forwardRef(
+import '../../sidebar_end.css';const y = "_sidebarEndBox_25f69cc", S = "_sidebarEnd_cb253a2", c = { sidebarEndBox: y, sidebarEnd: S }, I = _.forwardRef(
   function({
     hierarchy: t = "secondary",
     children: b,
     width: r,
-    height: s,
-    minWidth: a,
-    maxWidth: o,
+    height: o,
+    minWidth: s,
+    maxWidth: a,
     minHeight: d,
     maxHeight: e,
     hAlign: i,
@@ -19,24 +19,24 @@ import '../../sidebar_end.css';const y = "_sidebarEndBox_25f69cc", N = "_sidebar
     ...E
   }, p) {
     return /* @__PURE__ */ n(
-      l,
+      x,
       {
         width: r,
-        height: s,
-        minWidth: a,
-        maxWidth: o,
+        height: o,
+        minWidth: s,
+        maxWidth: a,
         minHeight: d,
         maxHeight: e,
         className: c.sidebarEndBox,
         as: "section",
         ...E,
         children: /* @__PURE__ */ n(
-          x,
+          l,
           {
             width: r,
-            height: s,
-            minWidth: a,
-            maxWidth: o,
+            height: o,
+            minWidth: s,
+            maxWidth: a,
             minHeight: d,
             maxHeight: e,
             hAlign: i,

package/dist/layouts/sidebar_end/sidebar_end.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar_end.js","sources":["../../../src/layouts/sidebar_end/sidebar_end.tsx"],"sourcesContent":["import { Box, type BoxProps } from '../../stacks/box/box.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { Alignment } from '../../stacks/types/alignment.js';\nimport classNames from 'classnames';\nimport React from 'react';\nimport styles from './sidebar_end.module.css';\nimport type { Hierarchy } from '../../utils/index.js';\n\nexport interface SidebarEndProps extends Omit<BoxProps, 'as'> {\n  hierarchy?: Hierarchy;\n  hAlign?: Alignment;\n  vAlign?: Alignment;\n}\n\nexport const SidebarEnd = React.forwardRef<HTMLElement, SidebarEndProps>(\n  function SidebarEnd(\n    {\n      hierarchy = 'secondary',\n      children,\n      width,\n      height,\n      minWidth,\n      maxWidth,\n      minHeight,\n      maxHeight,\n      hAlign,\n      vAlign = 'start',\n      className,\n      ...props\n    }: SidebarEndProps,\n    ref\n  ) {\n    return (\n      <Box\n        width={width}\n        height={height}\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        minHeight={minHeight}\n        maxHeight={maxHeight}\n        className={styles.sidebarEndBox}\n        as={'section'}\n        {...props}\n      >\n        <VStack\n          width={width}\n          height={height}\n          minWidth={minWidth}\n          maxWidth={maxWidth}\n          minHeight={minHeight}\n          maxHeight={maxHeight}\n          hAlign={hAlign}\n          vAlign={vAlign}\n          ref={ref}\n          data-hierarchy={hierarchy}\n          className={classNames(styles.sidebarEnd, className, 'sidebar-end')}\n          zIndex={0}\n        >\n          {children}\n        </VStack>\n      </Box>\n    );\n  }\n);\n"],"names":["SidebarEnd","React","hierarchy","children","width","height","minWidth","maxWidth","minHeight","maxHeight","hAlign","vAlign","className","props","ref","jsx","Box","styles","VStack","classNames"],"mappings":";;;;;wGAcaA,IAAaC,EAAM;AAAA,EAC9B,SACE;AAAA,IACE,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAAZ;AAAA,QACA,QAAAC;AAAA,QACA,UAAAC;AAAA,QACA,UAAAC;AAAA,QACA,WAAAC;AAAA,QACA,WAAAC;AAAA,QACA,WAAWQ,EAAO;AAAA,QAClB,IAAI;AAAA,QACH,GAAGJ;AAAA,QAEJ,UAAA,gBAAAE;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAAd;AAAA,YACA,QAAAC;AAAA,YACA,UAAAC;AAAA,YACA,UAAAC;AAAA,YACA,WAAAC;AAAA,YACA,WAAAC;AAAA,YACA,QAAAC;AAAA,YACA,QAAAC;AAAA,YACA,KAAAG;AAAA,YACA,kBAAgBZ;AAAA,YAChB,WAAWiB,EAAWF,EAAO,YAAYL,GAAW,aAAa;AAAA,YACjE,QAAQ;AAAA,YAEP,UAAAT;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;"}
+{"version":3,"file":"sidebar_end.js","sources":["../../../src/layouts/sidebar_end/sidebar_end.tsx"],"sourcesContent":["import { Box, type BoxProps } from '../../stacks/box/box.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { Alignment } from '../../stacks/types/alignment.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './sidebar_end.module.css';\nimport type { Hierarchy } from '../../utils/index.js';\n\nexport interface SidebarEndProps extends Omit<BoxProps, 'as'> {\n  hierarchy?: Hierarchy;\n  hAlign?: Alignment;\n  vAlign?: Alignment;\n}\n\nexport const SidebarEnd = React.forwardRef<HTMLElement, SidebarEndProps>(\n  function SidebarEnd(\n    {\n      hierarchy = 'secondary',\n      children,\n      width,\n      height,\n      minWidth,\n      maxWidth,\n      minHeight,\n      maxHeight,\n      hAlign,\n      vAlign = 'start',\n      className,\n      ...props\n    }: SidebarEndProps,\n    ref\n  ) {\n    return (\n      <Box\n        width={width}\n        height={height}\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        minHeight={minHeight}\n        maxHeight={maxHeight}\n        className={styles.sidebarEndBox}\n        as={'section'}\n        {...props}\n      >\n        <VStack\n          width={width}\n          height={height}\n          minWidth={minWidth}\n          maxWidth={maxWidth}\n          minHeight={minHeight}\n          maxHeight={maxHeight}\n          hAlign={hAlign}\n          vAlign={vAlign}\n          ref={ref}\n          data-hierarchy={hierarchy}\n          className={clsx(styles.sidebarEnd, className, 'sidebar-end')}\n          zIndex={0}\n        >\n          {children}\n        </VStack>\n      </Box>\n    );\n  }\n);\n"],"names":["SidebarEnd","React","hierarchy","children","width","height","minWidth","maxWidth","minHeight","maxHeight","hAlign","vAlign","className","props","ref","jsx","Box","styles","VStack","clsx"],"mappings":";;;;;wGAcaA,IAAaC,EAAM;AAAA,EAC9B,SACE;AAAA,IACE,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAAZ;AAAA,QACA,QAAAC;AAAA,QACA,UAAAC;AAAA,QACA,UAAAC;AAAA,QACA,WAAAC;AAAA,QACA,WAAAC;AAAA,QACA,WAAWQ,EAAO;AAAA,QAClB,IAAI;AAAA,QACH,GAAGJ;AAAA,QAEJ,UAAA,gBAAAE;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAAd;AAAA,YACA,QAAAC;AAAA,YACA,UAAAC;AAAA,YACA,UAAAC;AAAA,YACA,WAAAC;AAAA,YACA,WAAAC;AAAA,YACA,QAAAC;AAAA,YACA,QAAAC;AAAA,YACA,KAAAG;AAAA,YACA,kBAAgBZ;AAAA,YAChB,WAAWiB,EAAKF,EAAO,YAAYL,GAAW,aAAa;AAAA,YAC3D,QAAQ;AAAA,YAEP,UAAAT;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;"}

package/dist/layouts/sidebar_start/sidebar_start.js

@@ -1,9 +1,9 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Box as l } from "../../stacks/box/box.js";
-import { VStack as x } from "../../stacks/v_stack.js";
-import B from "classnames";
+import { jsx as s } from "react/jsx-runtime";
+import { Box as x } from "../../stacks/box/box.js";
+import { VStack as l } from "../../stacks/v_stack.js";
+import { clsx as B } from "clsx";
 import _ from "react";
-import '../../sidebar_start.css';const y = "_sidebarStartBox_4353011", N = "_sidebarStart_5b1e45b", e = { sidebarStartBox: y, sidebarStart: N }, I = _.forwardRef(
+import '../../sidebar_start.css';const y = "_sidebarStartBox_4353011", u = "_sidebarStart_5b1e45b", e = { sidebarStartBox: y, sidebarStart: u }, I = _.forwardRef(
   function({
     hierarchy: c = "secondary",
     children: d,
@@ -12,35 +12,35 @@ import '../../sidebar_start.css';const y = "_sidebarStartBox_4353011", N = "_sid
     minWidth: r,
     maxWidth: t,
     minHeight: a,
-    maxHeight: s,
+    maxHeight: o,
     hAlign: S,
-    vAlign: m = "start",
-    className: f,
+    vAlign: f = "start",
+    className: m,
     ...n
   }, p) {
-    return /* @__PURE__ */ o(
-      l,
+    return /* @__PURE__ */ s(
+      x,
       {
         width: b,
         height: i,
         minWidth: r,
         maxWidth: t,
         minHeight: a,
-        maxHeight: s,
+        maxHeight: o,
         className: e.sidebarStartBox,
         ...n,
-        children: /* @__PURE__ */ o(
-          x,
+        children: /* @__PURE__ */ s(
+          l,
           {
             minWidth: r,
             maxWidth: t,
             minHeight: a,
-            maxHeight: s,
+            maxHeight: o,
             hAlign: S,
-            vAlign: m,
+            vAlign: f,
             ref: p,
             "data-hierarchy": c,
-            className: B(e.sidebarStart, f, "sidebar-start"),
+            className: B(e.sidebarStart, m, "sidebar-start"),
             zIndex: 0,
             children: d
           }

package/dist/layouts/sidebar_start/sidebar_start.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar_start.js","sources":["../../../src/layouts/sidebar_start/sidebar_start.tsx"],"sourcesContent":["import { Box, type BoxProps } from '../../stacks/box/box.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { Alignment } from '../../stacks/types/alignment.js';\nimport classNames from 'classnames';\nimport React from 'react';\nimport styles from './sidebar_start.module.css';\nimport type { Hierarchy } from '../../utils/index.js';\n\nexport interface SidebarStartProps extends Omit<BoxProps, 'as'> {\n  hierarchy?: Hierarchy;\n  hAlign?: Alignment;\n  vAlign?: Alignment;\n}\n\nexport const SidebarStart = React.forwardRef<HTMLElement, SidebarStartProps>(\n  function SidebarStart(\n    {\n      hierarchy = 'secondary',\n      children,\n      width,\n      height,\n      minWidth,\n      maxWidth,\n      minHeight,\n      maxHeight,\n      hAlign,\n      vAlign = 'start',\n      className,\n      ...props\n    }: SidebarStartProps,\n    ref\n  ) {\n    return (\n      <Box\n        width={width}\n        height={height}\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        minHeight={minHeight}\n        maxHeight={maxHeight}\n        className={styles.sidebarStartBox}\n        {...props}\n      >\n        <VStack\n          minWidth={minWidth}\n          maxWidth={maxWidth}\n          minHeight={minHeight}\n          maxHeight={maxHeight}\n          hAlign={hAlign}\n          vAlign={vAlign}\n          ref={ref}\n          data-hierarchy={hierarchy}\n          className={classNames(styles.sidebarStart, className, 'sidebar-start')}\n          zIndex={0}\n        >\n          {children}\n        </VStack>\n      </Box>\n    );\n  }\n);\n"],"names":["SidebarStart","React","hierarchy","children","width","height","minWidth","maxWidth","minHeight","maxHeight","hAlign","vAlign","className","props","ref","jsx","Box","styles","VStack","classNames"],"mappings":";;;;;gHAcaA,IAAeC,EAAM;AAAA,EAChC,SACE;AAAA,IACE,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAAZ;AAAA,QACA,QAAAC;AAAA,QACA,UAAAC;AAAA,QACA,UAAAC;AAAA,QACA,WAAAC;AAAA,QACA,WAAAC;AAAA,QACA,WAAWQ,EAAO;AAAA,QACjB,GAAGJ;AAAA,QAEJ,UAAA,gBAAAE;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,UAAAZ;AAAA,YACA,UAAAC;AAAA,YACA,WAAAC;AAAA,YACA,WAAAC;AAAA,YACA,QAAAC;AAAA,YACA,QAAAC;AAAA,YACA,KAAAG;AAAA,YACA,kBAAgBZ;AAAA,YAChB,WAAWiB,EAAWF,EAAO,cAAcL,GAAW,eAAe;AAAA,YACrE,QAAQ;AAAA,YAEP,UAAAT;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;"}
+{"version":3,"file":"sidebar_start.js","sources":["../../../src/layouts/sidebar_start/sidebar_start.tsx"],"sourcesContent":["import { Box, type BoxProps } from '../../stacks/box/box.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { Alignment } from '../../stacks/types/alignment.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './sidebar_start.module.css';\nimport type { Hierarchy } from '../../utils/index.js';\n\nexport interface SidebarStartProps extends Omit<BoxProps, 'as'> {\n  hierarchy?: Hierarchy;\n  hAlign?: Alignment;\n  vAlign?: Alignment;\n}\n\nexport const SidebarStart = React.forwardRef<HTMLElement, SidebarStartProps>(\n  function SidebarStart(\n    {\n      hierarchy = 'secondary',\n      children,\n      width,\n      height,\n      minWidth,\n      maxWidth,\n      minHeight,\n      maxHeight,\n      hAlign,\n      vAlign = 'start',\n      className,\n      ...props\n    }: SidebarStartProps,\n    ref\n  ) {\n    return (\n      <Box\n        width={width}\n        height={height}\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        minHeight={minHeight}\n        maxHeight={maxHeight}\n        className={styles.sidebarStartBox}\n        {...props}\n      >\n        <VStack\n          minWidth={minWidth}\n          maxWidth={maxWidth}\n          minHeight={minHeight}\n          maxHeight={maxHeight}\n          hAlign={hAlign}\n          vAlign={vAlign}\n          ref={ref}\n          data-hierarchy={hierarchy}\n          className={clsx(styles.sidebarStart, className, 'sidebar-start')}\n          zIndex={0}\n        >\n          {children}\n        </VStack>\n      </Box>\n    );\n  }\n);\n"],"names":["SidebarStart","React","hierarchy","children","width","height","minWidth","maxWidth","minHeight","maxHeight","hAlign","vAlign","className","props","ref","jsx","Box","styles","VStack","clsx"],"mappings":";;;;;gHAcaA,IAAeC,EAAM;AAAA,EAChC,SACE;AAAA,IACE,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAAZ;AAAA,QACA,QAAAC;AAAA,QACA,UAAAC;AAAA,QACA,UAAAC;AAAA,QACA,WAAAC;AAAA,QACA,WAAAC;AAAA,QACA,WAAWQ,EAAO;AAAA,QACjB,GAAGJ;AAAA,QAEJ,UAAA,gBAAAE;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,UAAAZ;AAAA,YACA,UAAAC;AAAA,YACA,WAAAC;AAAA,YACA,WAAAC;AAAA,YACA,QAAAC;AAAA,YACA,QAAAC;AAAA,YACA,KAAAG;AAAA,YACA,kBAAgBZ;AAAA,YAChB,WAAWiB,EAAKF,EAAO,cAAcL,GAAW,eAAe;AAAA,YAC/D,QAAQ;AAAA,YAEP,UAAAT;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;"}

package/dist/layouts/utility_bar/utility_bar.js

@@ -1,22 +1,22 @@
-import { jsx as c } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import l from "react";
-import m from "classnames";
-import { HStack as y } from "../../stacks/h_stack.js";
-import '../../utility_bar.css';const u = "_utility-bar_3a92315", n = { "utility-bar": u }, B = l.forwardRef(
+import { clsx as y } from "clsx";
+import { HStack as m } from "../../stacks/h_stack.js";
+import '../../utility_bar.css';const u = "_utility-bar_3a92315", n = { "utility-bar": u }, x = l.forwardRef(
   function({
     hierarchy: t = "secondary",
-    height: a = "auto",
-    children: r,
+    height: r = "auto",
+    children: a,
     className: i,
     size: o = "md",
     ...s
-  }, e) {
-    return /* @__PURE__ */ c(
-      y,
+  }, c) {
+    return /* @__PURE__ */ e(
+      m,
       {
-        ref: e,
+        ref: c,
         as: "header",
-        className: m(
+        className: y(
           n["utility-bar"],
           i,
           "utility-bar",
@@ -24,14 +24,14 @@ import '../../utility_bar.css';const u = "_utility-bar_3a92315", n = { "utility-
         ),
         "data-hierarchy": t,
         "data-size": o,
-        height: a,
+        height: r,
         ...s,
-        children: r
+        children: a
       }
     );
   }
 );
 export {
-  B as UtilityBar
+  x as UtilityBar
 };
 //# sourceMappingURL=utility_bar.js.map

package/dist/layouts/utility_bar/utility_bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"utility_bar.js","sources":["../../../src/layouts/utility_bar/utility_bar.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { HStack, type HStackProps } from '../../stacks/h_stack.js';\nimport type { Hierarchy, Size } from '../../utils/index.js';\nimport styles from './utility_bar.module.css';\n\n// UtilityBar\nexport interface UtilityBarProps extends Omit<HStackProps, 'as'> {\n  hierarchy?: Hierarchy;\n  size?: Size;\n}\n\nexport const UtilityBar = React.forwardRef<HTMLElement, UtilityBarProps>(\n  function UtilityBar(\n    {\n      hierarchy = 'secondary',\n      height = 'auto',\n      children,\n      className,\n      size = 'md',\n      ...props\n    }: UtilityBarProps,\n    ref\n  ) {\n    return (\n      <HStack\n        ref={ref}\n        as=\"header\"\n        className={classNames(\n          styles['utility-bar'],\n          className,\n          'utility-bar',\n          'tcn-utility-bar'\n        )}\n        data-hierarchy={hierarchy}\n        data-size={size}\n        height={height}\n        {...props}\n      >\n        {children}\n      </HStack>\n    );\n  }\n);\n"],"names":["UtilityBar","React","hierarchy","height","children","className","size","props","ref","jsx","HStack","classNames","styles"],"mappings":";;;;4DAYaA,IAAaC,EAAM;AAAA,EAC9B,SACE;AAAA,IACE,WAAAC,IAAY;AAAA,IACZ,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,IAAG;AAAA,QACH,WAAWG;AAAA,UACTC,EAAO,aAAa;AAAA,UACpBP;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,kBAAgBH;AAAA,QAChB,aAAWI;AAAA,QACX,QAAAH;AAAA,QACC,GAAGI;AAAA,QAEH,UAAAH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
+{"version":3,"file":"utility_bar.js","sources":["../../../src/layouts/utility_bar/utility_bar.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { HStack, type HStackProps } from '../../stacks/h_stack.js';\nimport type { Hierarchy, Size } from '../../utils/index.js';\nimport styles from './utility_bar.module.css';\n\n// UtilityBar\nexport interface UtilityBarProps extends Omit<HStackProps, 'as'> {\n  hierarchy?: Hierarchy;\n  size?: Size;\n}\n\nexport const UtilityBar = React.forwardRef<HTMLElement, UtilityBarProps>(\n  function UtilityBar(\n    {\n      hierarchy = 'secondary',\n      height = 'auto',\n      children,\n      className,\n      size = 'md',\n      ...props\n    }: UtilityBarProps,\n    ref\n  ) {\n    return (\n      <HStack\n        ref={ref}\n        as=\"header\"\n        className={clsx(\n          styles['utility-bar'],\n          className,\n          'utility-bar',\n          'tcn-utility-bar'\n        )}\n        data-hierarchy={hierarchy}\n        data-size={size}\n        height={height}\n        {...props}\n      >\n        {children}\n      </HStack>\n    );\n  }\n);\n"],"names":["UtilityBar","React","hierarchy","height","children","className","size","props","ref","jsx","HStack","clsx","styles"],"mappings":";;;;4DAYaA,IAAaC,EAAM;AAAA,EAC9B,SACE;AAAA,IACE,WAAAC,IAAY;AAAA,IACZ,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,IAAG;AAAA,QACH,WAAWG;AAAA,UACTC,EAAO,aAAa;AAAA,UACpBP;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,kBAAgBH;AAAA,QAChB,aAAWI;AAAA,QACX,QAAAH;AAAA,QACC,GAAGI;AAAA,QAEH,UAAAH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/dist/modal.css

@@ -1 +1 @@
-._modal_473c6ef{background-color:var(--background-color-primary)}
+._modal_473c6ef{width:100%;height:100%}

package/dist/overlay/context_menu/context_menu.js

@@ -1,11 +1,11 @@
-import { jsxs as s, Fragment as c, jsx as t } from "react/jsx-runtime";
-import { P as m } from "../../portal-qqIp4SIl.js";
+import { jsxs as c, Fragment as m, jsx as t } from "react/jsx-runtime";
+import { Portal as s } from "../portal/portal.js";
 import { useState as h } from "react";
 import { Menu as u } from "../menu/menu.js";
 function v({ open: e, position: r, children: n, onClose: i }) {
   const [o, l] = h(null);
-  return !e || r == null ? null : /* @__PURE__ */ s(c, { children: [
-    /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t("div", { style: { position: "fixed", inset: 0 }, children: /* @__PURE__ */ t(
+  return !e || r == null ? null : /* @__PURE__ */ c(m, { children: [
+    /* @__PURE__ */ t(s, { children: /* @__PURE__ */ t("div", { style: { position: "fixed", inset: 0 }, children: /* @__PURE__ */ t(
       "div",
       {
         ref: (a) => {

package/dist/overlay/index.js

@@ -1,13 +1,13 @@
-import { P as e } from "../portal-qqIp4SIl.js";
+import { Portal as e } from "./portal/portal.js";
 import { ContextMenu as p } from "./context_menu/context_menu.js";
 import { Menu as x, MenuItem as f } from "./menu/menu.js";
 import { Tooltip as u } from "./tooltip/tooltip.js";
-import { Popper as P } from "./popper/popper.js";
+import { Popper as l } from "./popper/popper.js";
 export {
   p as ContextMenu,
   x as Menu,
   f as MenuItem,
-  P as Popper,
+  l as Popper,
   e as Portal,
   u as Tooltip
 };