@tcn/ui 0.13.1 → 0.15.0

package/dist/form/field_set/field_set.js

@@ -1,19 +1,19 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import "../../typography/body_text/body_text.js";
+import { BodyText as h } from "../../typography/body_text/body_text.js";
 import "../../typography/callout/callout.js";
 import "../../typography/caption/caption.js";
 import "../../typography/footnote/footnote.js";
 import "../../typography/headline/headline.js";
 import "../../typography/subheadline/subheadline.js";
-import { Title as h } from "../../typography/title/title.js";
-import { HStack as b } from "../../stacks/h_stack.js";
+import "../../typography/title/title.js";
+import { HStack as y } from "../../stacks/h_stack.js";
 import { Spacer as c } from "../../stacks/spacer.js";
 import { VStack as f } from "../../stacks/v_stack.js";
 import { clsx as i } from "clsx";
-import y, { useMemo as S } from "react";
-import '../../field_set.css';const u = "_field-set_8e981d9", x = "_field-set-body_4cd3139", m = { "field-set": u, "field-set-body": x };
-let _ = 0;
-const q = y.forwardRef(function({
+import b, { useMemo as x } from "react";
+import '../../field_set.css';const S = "_field-set_8e981d9", g = "_field-set-body_4cd3139", m = { "field-set": S, "field-set-body": g };
+let u = 0;
+const $ = b.forwardRef(function({
   legend: l,
   startAdornments: d,
   endAdornments: o,
@@ -21,7 +21,7 @@ const q = y.forwardRef(function({
   children: n,
   ...t
 }, p) {
-  const s = `field-set-${S(() => _++, [])}`;
+  const s = `field-set-${x(() => u++, [])}`;
   return /* @__PURE__ */ r(
     f,
     {
@@ -32,7 +32,7 @@ const q = y.forwardRef(function({
       ...t,
       children: [
         l && /* @__PURE__ */ r(
-          b,
+          y,
           {
             id: s,
             className: i("tcn-legend", "tcn-field-set-legend"),
@@ -41,7 +41,7 @@ const q = y.forwardRef(function({
             children: [
               d,
               d && /* @__PURE__ */ e(c, { width: "8px" }),
-              /* @__PURE__ */ e(h, { className: "tcn-field-set-legend-text", children: l }),
+              /* @__PURE__ */ e(h, { className: "tcn-field-set-legend-text", size: "lg", children: l }),
               o && /* @__PURE__ */ e(c, {}),
               o
             ]
@@ -60,6 +60,6 @@ const q = y.forwardRef(function({
   );
 });
 export {
-  q as FieldSet
+  $ as FieldSet
 };
 //# sourceMappingURL=field_set.js.map

package/dist/form/field_set/field_set.js.map

@@ -1 +1 @@
-{"version":3,"file":"field_set.js","sources":["../../../src/form/field_set/field_set.tsx"],"sourcesContent":["import { Title } from '../../typography/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport type { VStackProps } from '../../stacks/v_stack.js';\nimport { clsx } from 'clsx';\nimport React, { useMemo } from 'react';\nimport styles from './field_set.module.css';\n\nlet fieldsetIdCount = 0;\n\nexport type FieldSetProps = VStackProps<HTMLFieldSetElement> & {\n  legend?: string;\n  startAdornments?: React.ReactNode;\n  endAdornments?: React.ReactNode;\n};\n\nexport const FieldSet = React.forwardRef(function FieldSet(\n  {\n    legend,\n    startAdornments,\n    endAdornments,\n    className,\n    children,\n    ...props\n  }: FieldSetProps,\n  ref: React.Ref<HTMLFieldSetElement>\n) {\n  const id = useMemo(() => {\n    return fieldsetIdCount++;\n  }, []);\n\n  const labelId = `field-set-${id}`;\n\n  return (\n    <VStack\n      as=\"fieldset\"\n      aria-labelledby={labelId}\n      ref={ref}\n      className={clsx(styles['field-set'], className, 'tcn-field-set')}\n      {...props}\n    >\n      {legend && (\n        <HStack\n          id={labelId}\n          className={clsx('tcn-legend', 'tcn-field-set-legend')}\n          hAlign=\"start\"\n          height={props.height}\n        >\n          {startAdornments}\n          {startAdornments && <Spacer width=\"8px\" />}\n          <Title className=\"tcn-field-set-legend-text\">{legend}</Title>\n          {endAdornments && <Spacer />}\n          {endAdornments}\n        </HStack>\n      )}\n      <VStack\n        className={clsx('tcn-field-set-body', styles['tcn-field-set-body'])}\n        {...props}\n      >\n        {children}\n      </VStack>\n    </VStack>\n  );\n});\n"],"names":["fieldsetIdCount","FieldSet","React","legend","startAdornments","endAdornments","className","children","props","ref","labelId","useMemo","jsxs","VStack","clsx","styles","HStack","jsx","Spacer","Title"],"mappings":";;;;;;;;;;;;;;AASA,IAAIA,IAAkB;AAQf,MAAMC,IAAWC,EAAM,WAAW,SACvC;AAAA,EACE,QAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AAKA,QAAMC,IAAU,aAJLC,EAAQ,MACVX,KACN,CAAA,CAAE,CAE0B;AAE/B,SACE,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,mBAAiBH;AAAA,MACjB,KAAAD;AAAA,MACA,WAAWK,EAAKC,EAAO,WAAW,GAAGT,GAAW,eAAe;AAAA,MAC9D,GAAGE;AAAA,MAEH,UAAA;AAAA,QAAAL,KACC,gBAAAS;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,IAAIN;AAAA,YACJ,WAAWI,EAAK,cAAc,sBAAsB;AAAA,YACpD,QAAO;AAAA,YACP,QAAQN,EAAM;AAAA,YAEb,UAAA;AAAA,cAAAJ;AAAA,cACAA,KAAmB,gBAAAa,EAACC,GAAA,EAAO,OAAM,MAAA,CAAM;AAAA,cACxC,gBAAAD,EAACE,GAAA,EAAM,WAAU,6BAA6B,UAAAhB,GAAO;AAAA,cACpDE,uBAAkBa,GAAA,EAAO;AAAA,cACzBb;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGL,gBAAAY;AAAA,UAACJ;AAAA,UAAA;AAAA,YACC,WAAWC,EAAK,sBAAsBC,EAAO,oBAAoB,CAAC;AAAA,YACjE,GAAGP;AAAA,YAEH,UAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"field_set.js","sources":["../../../src/form/field_set/field_set.tsx"],"sourcesContent":["import { BodyText } from '../../typography/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport type { VStackProps } from '../../stacks/v_stack.js';\nimport { clsx } from 'clsx';\nimport React, { useMemo } from 'react';\nimport styles from './field_set.module.css';\n\nlet fieldsetIdCount = 0;\n\nexport type FieldSetProps = VStackProps<HTMLFieldSetElement> & {\n  legend?: string;\n  startAdornments?: React.ReactNode;\n  endAdornments?: React.ReactNode;\n};\n\nexport const FieldSet = React.forwardRef(function FieldSet(\n  {\n    legend,\n    startAdornments,\n    endAdornments,\n    className,\n    children,\n    ...props\n  }: FieldSetProps,\n  ref: React.Ref<HTMLFieldSetElement>\n) {\n  const id = useMemo(() => {\n    return fieldsetIdCount++;\n  }, []);\n\n  const labelId = `field-set-${id}`;\n\n  return (\n    <VStack\n      as=\"fieldset\"\n      aria-labelledby={labelId}\n      ref={ref}\n      className={clsx(styles['field-set'], className, 'tcn-field-set')}\n      {...props}\n    >\n      {legend && (\n        <HStack\n          id={labelId}\n          className={clsx('tcn-legend', 'tcn-field-set-legend')}\n          hAlign=\"start\"\n          height={props.height}\n        >\n          {startAdornments}\n          {startAdornments && <Spacer width=\"8px\" />}\n          <BodyText className=\"tcn-field-set-legend-text\" size=\"lg\">\n            {legend}\n          </BodyText>\n          {endAdornments && <Spacer />}\n          {endAdornments}\n        </HStack>\n      )}\n      <VStack\n        className={clsx('tcn-field-set-body', styles['tcn-field-set-body'])}\n        {...props}\n      >\n        {children}\n      </VStack>\n    </VStack>\n  );\n});\n"],"names":["fieldsetIdCount","FieldSet","React","legend","startAdornments","endAdornments","className","children","props","ref","labelId","useMemo","jsxs","VStack","clsx","styles","HStack","jsx","Spacer","BodyText"],"mappings":";;;;;;;;;;;;;;AASA,IAAIA,IAAkB;AAQf,MAAMC,IAAWC,EAAM,WAAW,SACvC;AAAA,EACE,QAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AAKA,QAAMC,IAAU,aAJLC,EAAQ,MACVX,KACN,CAAA,CAAE,CAE0B;AAE/B,SACE,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,mBAAiBH;AAAA,MACjB,KAAAD;AAAA,MACA,WAAWK,EAAKC,EAAO,WAAW,GAAGT,GAAW,eAAe;AAAA,MAC9D,GAAGE;AAAA,MAEH,UAAA;AAAA,QAAAL,KACC,gBAAAS;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,IAAIN;AAAA,YACJ,WAAWI,EAAK,cAAc,sBAAsB;AAAA,YACpD,QAAO;AAAA,YACP,QAAQN,EAAM;AAAA,YAEb,UAAA;AAAA,cAAAJ;AAAA,cACAA,KAAmB,gBAAAa,EAACC,GAAA,EAAO,OAAM,MAAA,CAAM;AAAA,gCACvCC,GAAA,EAAS,WAAU,6BAA4B,MAAK,MAClD,UAAAhB,GACH;AAAA,cACCE,uBAAkBa,GAAA,EAAO;AAAA,cACzBb;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGL,gBAAAY;AAAA,UAACJ;AAAA,UAAA;AAAA,YACC,WAAWC,EAAK,sBAAsBC,EAAO,oBAAoB,CAAC;AAAA,YACjE,GAAGP;AAAA,YAEH,UAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/formatter-EIJCOSYU-ByaSCvt6.js

@@ -0,0 +1,6 @@
+import { d as a, _ as i, r as m } from "./showcase-DBFp_Epk.js";
+var t = i(m(), 1), f = (0, t.default)(2)(async (e, r) => e === !1 ? r : a(r));
+export {
+  f as formatter
+};
+//# sourceMappingURL=formatter-EIJCOSYU-ByaSCvt6.js.map

package/dist/formatter-EIJCOSYU-ByaSCvt6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatter-EIJCOSYU-ByaSCvt6.js","sources":["../../../node_modules/.pnpm/storybook@10.2.10_@testing-library+dom@10.4.1_prettier@2.8.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/storybook/dist/_browser-chunks/formatter-EIJCOSYU.js"],"sourcesContent":["import {\n  require_memoizerific\n} from \"./chunk-ZCFV7BZB.js\";\nimport {\n  dedent\n} from \"./chunk-3LY4VQVK.js\";\nimport {\n  __toESM\n} from \"./chunk-A242L54C.js\";\n\n// src/components/components/syntaxhighlighter/formatter.ts\nvar import_memoizerific = __toESM(require_memoizerific(), 1);\nvar formatter = (0, import_memoizerific.default)(2)(async (type, source) => type === !1 ? source : dedent(source));\nexport {\n  formatter\n};\n"],"names":["import_memoizerific","__toESM","require_memoizerific","formatter","type","source","dedent"],"mappings":";AAWA,IAAIA,IAAsBC,EAAQC,EAAoB,GAAI,CAAC,GACvDC,QAAgBH,EAAoB,SAAS,CAAC,EAAE,OAAOI,GAAMC,MAAWD,MAAS,KAAKC,IAASC,EAAOD,CAAM,CAAC;","x_google_ignoreList":[0]}

package/dist/inputs/mask_input/mask_config.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=mask_config.js.map

package/dist/inputs/mask_input/mask_config.js.map

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

package/dist/inputs/mask_input/mask_cursor.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=mask_cursor.js.map

package/dist/inputs/mask_input/mask_cursor.js.map

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

package/dist/inputs/multiselect/multiselect_inline_values.js

@@ -1,4 +1,4 @@
-import { jsxs as p, jsx as r, Fragment as c } from "react/jsx-runtime";
+import { jsxs as n, jsx as r, Fragment as c } from "react/jsx-runtime";
 import { s as e } from "../../multiselect_values.module-BMJOyYHe.js";
 import { CrossIcon as a } from "@tcn/icons/cross_icon.js";
 import "../../actions/button/base_button/base_button.js";
@@ -11,12 +11,14 @@ import "../../tokens/badge/badge.js";
 import "../../tokens/bubble/bubble.js";
 import m from "clsx";
 import "../../stacks/h_stack.js";
-function v({
+import "../../value.module-DFaCouFD.js";
+import "../../tokens/term/term.js";
+function A({
   values: o,
   disabled: s,
-  onRemove: l
+  onRemove: p
 }) {
-  const t = o.map((i, n) => /* @__PURE__ */ p(
+  const t = o.map((i, l) => /* @__PURE__ */ n(
     u,
     {
       hAlign: "start",
@@ -33,18 +35,18 @@ function v({
             hierarchy: "tertiary",
             className: m(e.remove, "tcn-multiselect-chip-remove"),
             onClick: () => {
-              l(i);
+              p(i);
             },
             children: /* @__PURE__ */ r(a, { size: "xs" })
           }
         )
       ]
     },
-    n
+    l
   ));
   return t.length === 0 ? null : /* @__PURE__ */ r(c, { children: t });
 }
 export {
-  v as MultiselectInlineValues
+  A as MultiselectInlineValues
 };
 //# sourceMappingURL=multiselect_inline_values.js.map

package/dist/inputs/multiselect/multiselect_inline_values.js.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect_inline_values.js","sources":["../../../src/inputs/multiselect/multiselect_inline_values.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './multiselect_values.module.css';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { SlimButton } from '../../actions/index.js';\nimport { OptionProps } from '../options/option.js';\nimport { Chip } from '../../tokens/index.js';\nimport clsx from 'clsx';\n\nexport interface MultiselectInlineValuesProps {\n  values: React.ReactElement<OptionProps>[];\n  disabled: boolean;\n  onRemove: (value: React.ReactElement<OptionProps>) => void;\n}\n\nexport function MultiselectInlineValues({\n  values,\n  disabled,\n  onRemove,\n}: MultiselectInlineValuesProps) {\n  const items = values.map((v, index) => {\n    return (\n      <Chip\n        hAlign=\"start\"\n        className={clsx(styles.chip, 'tcn-multiselect-chip')}\n        key={index}\n        paddingInlineStart=\"8px\"\n        width=\"auto\"\n      >\n        <span>{v.props.label}</span>\n        <SlimButton\n          disabled={disabled}\n          size=\"sm\"\n          hierarchy=\"tertiary\"\n          className={clsx(styles.remove, 'tcn-multiselect-chip-remove')}\n          onClick={() => {\n            onRemove(v);\n          }}\n        >\n          <CrossIcon size=\"xs\" />\n        </SlimButton>\n      </Chip>\n    );\n  });\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  return <>{items}</>;\n}\n"],"names":["MultiselectInlineValues","values","disabled","onRemove","items","v","index","jsxs","Chip","clsx","styles","jsx","SlimButton","CrossIcon"],"mappings":";;;;;;;;;;;;;AAcO,SAASA,EAAwB;AAAA,EACtC,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,GAAiC;AAC/B,QAAMC,IAAQH,EAAO,IAAI,CAACI,GAAGC,MAEzB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,WAAWC,EAAKC,EAAO,MAAM,sBAAsB;AAAA,MAEnD,oBAAmB;AAAA,MACnB,OAAM;AAAA,MAEN,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAM,UAAAN,EAAE,MAAM,OAAM;AAAA,QACrB,gBAAAM;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAAV;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,WAAWO,EAAKC,EAAO,QAAQ,6BAA6B;AAAA,YAC5D,SAAS,MAAM;AACb,cAAAP,EAASE,CAAC;AAAA,YACZ;AAAA,YAEA,UAAA,gBAAAM,EAACE,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACvB;AAAA,IAAA;AAAA,IAfKP;AAAA,EAAA,CAkBV;AAED,SAAIF,EAAM,WAAW,IACZ,8BAGC,UAAAA,EAAA,CAAM;AAClB;"}
+{"version":3,"file":"multiselect_inline_values.js","sources":["../../../src/inputs/multiselect/multiselect_inline_values.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './multiselect_values.module.css';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { SlimButton } from '../../actions/index.js';\nimport { OptionProps } from '../options/option.js';\nimport { Chip } from '../../tokens/index.js';\nimport clsx from 'clsx';\n\nexport interface MultiselectInlineValuesProps {\n  values: React.ReactElement<OptionProps>[];\n  disabled: boolean;\n  onRemove: (value: React.ReactElement<OptionProps>) => void;\n}\n\nexport function MultiselectInlineValues({\n  values,\n  disabled,\n  onRemove,\n}: MultiselectInlineValuesProps) {\n  const items = values.map((v, index) => {\n    return (\n      <Chip\n        hAlign=\"start\"\n        className={clsx(styles.chip, 'tcn-multiselect-chip')}\n        key={index}\n        paddingInlineStart=\"8px\"\n        width=\"auto\"\n      >\n        <span>{v.props.label}</span>\n        <SlimButton\n          disabled={disabled}\n          size=\"sm\"\n          hierarchy=\"tertiary\"\n          className={clsx(styles.remove, 'tcn-multiselect-chip-remove')}\n          onClick={() => {\n            onRemove(v);\n          }}\n        >\n          <CrossIcon size=\"xs\" />\n        </SlimButton>\n      </Chip>\n    );\n  });\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  return <>{items}</>;\n}\n"],"names":["MultiselectInlineValues","values","disabled","onRemove","items","v","index","jsxs","Chip","clsx","styles","jsx","SlimButton","CrossIcon"],"mappings":";;;;;;;;;;;;;;;AAcO,SAASA,EAAwB;AAAA,EACtC,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,GAAiC;AAC/B,QAAMC,IAAQH,EAAO,IAAI,CAACI,GAAGC,MAEzB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,WAAWC,EAAKC,EAAO,MAAM,sBAAsB;AAAA,MAEnD,oBAAmB;AAAA,MACnB,OAAM;AAAA,MAEN,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAM,UAAAN,EAAE,MAAM,OAAM;AAAA,QACrB,gBAAAM;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAAV;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,WAAWO,EAAKC,EAAO,QAAQ,6BAA6B;AAAA,YAC5D,SAAS,MAAM;AACb,cAAAP,EAASE,CAAC;AAAA,YACZ;AAAA,YAEA,UAAA,gBAAAM,EAACE,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACvB;AAAA,IAAA;AAAA,IAfKP;AAAA,EAAA,CAkBV;AAED,SAAIF,EAAM,WAAW,IACZ,8BAGC,UAAAA,EAAA,CAAM;AAClB;"}

package/dist/inputs/multiselect/multiselect_values.js

@@ -11,7 +11,9 @@ import { Chip as u } from "../../tokens/chip/chip.js";
 import "../../tokens/badge/badge.js";
 import "../../tokens/bubble/bubble.js";
 import "../../stacks/h_stack.js";
-function k({
+import "../../value.module-DFaCouFD.js";
+import "../../tokens/term/term.js";
+function B({
   values: s,
   disabled: e,
   className: l,
@@ -57,6 +59,6 @@ function k({
   );
 }
 export {
-  k as MultiselectValues
+  B as MultiselectValues
 };
 //# sourceMappingURL=multiselect_values.js.map

package/dist/inputs/multiselect/multiselect_values.js.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect_values.js","sources":["../../../src/inputs/multiselect/multiselect_values.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './multiselect_values.module.css';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { OptionProps } from '../options/option.js';\nimport { SlimButton } from '../../actions/index.js';\nimport { Chip } from '../../tokens/index.js';\n\nexport interface MultiselectValueProps {\n  values: React.ReactElement<OptionProps>[];\n  disabled: boolean;\n  onRemove: (value: React.ReactElement<OptionProps>) => void;\n  className?: string;\n}\n\nexport function MultiselectValues({\n  values,\n  disabled,\n  className,\n  onRemove,\n}: MultiselectValueProps) {\n  const items = values.map((v, index) => {\n    return (\n      <Chip\n        hAlign=\"start\"\n        color=\"rgb(57, 85, 120)\"\n        className={clsx(styles.chip, 'tcn-multiselect-chip')}\n        key={index}\n        paddingInlineStart=\"8px\"\n      >\n        <span>{v.props.label}</span>\n        <SlimButton\n          disabled={disabled}\n          size=\"sm\"\n          hierarchy=\"tertiary\"\n          className={clsx(styles.remove, 'tcn-multiselect-chip-remove')}\n          onClick={() => {\n            onRemove(v);\n          }}\n        >\n          <CrossIcon size=\"xs\" />\n        </SlimButton>\n      </Chip>\n    );\n  });\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx(\n        styles['item-container'],\n        className,\n        'tcn-multiselect-values-container'\n      )}\n      data-is-disabled={disabled}\n    >\n      {items}\n    </div>\n  );\n}\n"],"names":["MultiselectValues","values","disabled","className","onRemove","items","v","index","jsxs","Chip","clsx","styles","jsx","SlimButton","CrossIcon"],"mappings":";;;;;;;;;;;;;AAeO,SAASA,EAAkB;AAAA,EAChC,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACF,GAA0B;AACxB,QAAMC,IAAQJ,EAAO,IAAI,CAACK,GAAGC,MAEzB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,OAAM;AAAA,MACN,WAAWC,EAAKC,EAAO,MAAM,sBAAsB;AAAA,MAEnD,oBAAmB;AAAA,MAEnB,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAM,UAAAN,EAAE,MAAM,OAAM;AAAA,QACrB,gBAAAM;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAAX;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,WAAWQ,EAAKC,EAAO,QAAQ,6BAA6B;AAAA,YAC5D,SAAS,MAAM;AACb,cAAAP,EAASE,CAAC;AAAA,YACZ;AAAA,YAEA,UAAA,gBAAAM,EAACE,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACvB;AAAA,IAAA;AAAA,IAdKP;AAAA,EAAA,CAiBV;AAED,SAAIF,EAAM,WAAW,IACZ,OAIP,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,QACTC,EAAO,gBAAgB;AAAA,QACvBR;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,oBAAkBD;AAAA,MAEjB,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"multiselect_values.js","sources":["../../../src/inputs/multiselect/multiselect_values.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './multiselect_values.module.css';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { OptionProps } from '../options/option.js';\nimport { SlimButton } from '../../actions/index.js';\nimport { Chip } from '../../tokens/index.js';\n\nexport interface MultiselectValueProps {\n  values: React.ReactElement<OptionProps>[];\n  disabled: boolean;\n  onRemove: (value: React.ReactElement<OptionProps>) => void;\n  className?: string;\n}\n\nexport function MultiselectValues({\n  values,\n  disabled,\n  className,\n  onRemove,\n}: MultiselectValueProps) {\n  const items = values.map((v, index) => {\n    return (\n      <Chip\n        hAlign=\"start\"\n        color=\"rgb(57, 85, 120)\"\n        className={clsx(styles.chip, 'tcn-multiselect-chip')}\n        key={index}\n        paddingInlineStart=\"8px\"\n      >\n        <span>{v.props.label}</span>\n        <SlimButton\n          disabled={disabled}\n          size=\"sm\"\n          hierarchy=\"tertiary\"\n          className={clsx(styles.remove, 'tcn-multiselect-chip-remove')}\n          onClick={() => {\n            onRemove(v);\n          }}\n        >\n          <CrossIcon size=\"xs\" />\n        </SlimButton>\n      </Chip>\n    );\n  });\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx(\n        styles['item-container'],\n        className,\n        'tcn-multiselect-values-container'\n      )}\n      data-is-disabled={disabled}\n    >\n      {items}\n    </div>\n  );\n}\n"],"names":["MultiselectValues","values","disabled","className","onRemove","items","v","index","jsxs","Chip","clsx","styles","jsx","SlimButton","CrossIcon"],"mappings":";;;;;;;;;;;;;;;AAeO,SAASA,EAAkB;AAAA,EAChC,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACF,GAA0B;AACxB,QAAMC,IAAQJ,EAAO,IAAI,CAACK,GAAGC,MAEzB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,OAAM;AAAA,MACN,WAAWC,EAAKC,EAAO,MAAM,sBAAsB;AAAA,MAEnD,oBAAmB;AAAA,MAEnB,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAM,UAAAN,EAAE,MAAM,OAAM;AAAA,QACrB,gBAAAM;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAAX;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,WAAWQ,EAAKC,EAAO,QAAQ,6BAA6B;AAAA,YAC5D,SAAS,MAAM;AACb,cAAAP,EAASE,CAAC;AAAA,YACZ;AAAA,YAEA,UAAA,gBAAAM,EAACE,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACvB;AAAA,IAAA;AAAA,IAdKP;AAAA,EAAA,CAiBV;AAED,SAAIF,EAAM,WAAW,IACZ,OAIP,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,QACTC,EAAO,gBAAgB;AAAA,QACvBR;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,oBAAkBD;AAAA,MAEjB,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/layouts/containers/rail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rail.d.ts","sourceRoot":"","sources":["../../../src/layouts/containers/rail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAKjE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC;IACrD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAGD,eAAO,MAAM,IAAI,+EAyDf,CAAC"}

package/dist/layouts/containers/rail.js

@@ -0,0 +1,67 @@
+import { jsx as i } from "react/jsx-runtime";
+import R from "react";
+import { clsx as l } from "clsx";
+import { Box as u } from "../../stacks/box/box.js";
+import { HStack as x } from "../../stacks/h_stack.js";
+import { s as t } from "../../containers.module-DlGySre0.js";
+const I = R.forwardRef(function({
+  children: m,
+  width: f,
+  height: p,
+  minWidth: a,
+  maxWidth: r,
+  minHeight: o,
+  maxHeight: c,
+  hAlign: n = "start",
+  vAlign: s = "start",
+  className: k,
+  ...d
+}, e) {
+  return /* @__PURE__ */ i(
+    u,
+    {
+      ref: e,
+      width: f,
+      height: p,
+      minWidth: a,
+      maxWidth: r,
+      minHeight: o,
+      maxHeight: c,
+      "data-h-alignment": n,
+      "data-v-alignment": s,
+      className: l(
+        k,
+        t.rail,
+        t.container,
+        "tcn-container",
+        "tcn-rail"
+      ),
+      ...d,
+      children: /* @__PURE__ */ i(
+        x,
+        {
+          as: "section",
+          minWidth: a,
+          maxWidth: r,
+          minHeight: o,
+          maxHeight: c,
+          hAlign: n,
+          vAlign: s,
+          ref: e,
+          className: l(
+            t["rail-stack"],
+            t["container-stack"],
+            "tcn-container-stack",
+            "tcn-rail-stack"
+          ),
+          zIndex: 0,
+          children: m
+        }
+      )
+    }
+  );
+});
+export {
+  I as Rail
+};
+//# sourceMappingURL=rail.js.map

package/dist/layouts/containers/rail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rail.js","sources":["../../../src/layouts/containers/rail.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Box, type BoxProps } from '../../stacks/box/box.js';\nimport type { Alignment } from '../../stacks/types/alignment.js';\nimport { HStack } from '../../stacks/h_stack.js';\n\nimport styles from './containers.module.css';\n\nexport interface RailProps extends Omit<BoxProps, 'as'> {\n  vAlign?: Alignment;\n  hAlign?: Alignment;\n}\n\n// WIP: This component is not fully implemented.\nexport const Rail = React.forwardRef<HTMLElement, RailProps>(function Rail(\n  {\n    children,\n    width,\n    height,\n    minWidth,\n    maxWidth,\n    minHeight,\n    maxHeight,\n    hAlign = 'start',\n    vAlign = 'start',\n    className,\n    ...props\n  }: RailProps,\n  ref\n) {\n  return (\n    <Box\n      ref={ref}\n      width={width}\n      height={height}\n      minWidth={minWidth}\n      maxWidth={maxWidth}\n      minHeight={minHeight}\n      maxHeight={maxHeight}\n      data-h-alignment={hAlign}\n      data-v-alignment={vAlign}\n      className={clsx(\n        className,\n        styles['rail'],\n        styles['container'],\n        'tcn-container',\n        'tcn-rail'\n      )}\n      {...props}\n    >\n      <HStack\n        as=\"section\"\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        minHeight={minHeight}\n        maxHeight={maxHeight}\n        hAlign={hAlign}\n        vAlign={vAlign}\n        ref={ref}\n        className={clsx(\n          styles['rail-stack'],\n          styles['container-stack'],\n          'tcn-container-stack',\n          'tcn-rail-stack'\n        )}\n        zIndex={0}\n      >\n        {children}\n      </HStack>\n    </Box>\n  );\n});\n"],"names":["Rail","React","children","width","height","minWidth","maxWidth","minHeight","maxHeight","hAlign","vAlign","className","props","ref","jsx","Box","clsx","styles","HStack"],"mappings":";;;;;;AAcO,MAAMA,IAAOC,EAAM,WAAmC,SAC3D;AAAA,EACE,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,OAAAV;AAAA,MACA,QAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,WAAAC;AAAA,MACA,oBAAkBC;AAAA,MAClB,oBAAkBC;AAAA,MAClB,WAAWM;AAAA,QACTL;AAAA,QACAM,EAAO;AAAA,QACPA,EAAO;AAAA,QACP;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAGL;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,IAAG;AAAA,UACH,UAAAb;AAAA,UACA,UAAAC;AAAA,UACA,WAAAC;AAAA,UACA,WAAAC;AAAA,UACA,QAAAC;AAAA,UACA,QAAAC;AAAA,UACA,KAAAG;AAAA,UACA,WAAWG;AAAA,YACTC,EAAO,YAAY;AAAA,YACnBA,EAAO,iBAAiB;AAAA,YACxB;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,QAAQ;AAAA,UAEP,UAAAf;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;"}

package/dist/layouts/containers/scaffold.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scaffold.d.ts","sourceRoot":"","sources":["../../../src/layouts/containers/scaffold.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAIjE,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC;IACzD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,mFAyDnB,CAAC"}

package/dist/layouts/containers/scaffold.js

@@ -0,0 +1,67 @@
+import { jsx as e } from "react/jsx-runtime";
+import u from "react";
+import { clsx as l } from "clsx";
+import { Box as x } from "../../stacks/box/box.js";
+import { VStack as S } from "../../stacks/v_stack.js";
+import { s as t } from "../../containers.module-DlGySre0.js";
+const B = u.forwardRef(function({
+  children: m,
+  width: d,
+  height: i,
+  minWidth: a,
+  maxWidth: o,
+  minHeight: c,
+  maxHeight: r,
+  hAlign: s = "start",
+  vAlign: f = "start",
+  className: p,
+  ...k
+}, n) {
+  return /* @__PURE__ */ e(
+    x,
+    {
+      ref: n,
+      width: d,
+      height: i,
+      minWidth: a,
+      maxWidth: o,
+      minHeight: c,
+      maxHeight: r,
+      "data-h-alignment": s,
+      "data-v-alignment": f,
+      className: l(
+        p,
+        t.scaffold,
+        t.container,
+        "tcn-container",
+        "tcn-scaffold"
+      ),
+      ...k,
+      children: /* @__PURE__ */ e(
+        S,
+        {
+          as: "section",
+          minWidth: a,
+          maxWidth: o,
+          minHeight: c,
+          maxHeight: r,
+          hAlign: s,
+          vAlign: f,
+          ref: n,
+          className: l(
+            t["scaffold-stack"],
+            t["container-stack"],
+            "tcn-container-stack",
+            "tcn-scaffold-stack"
+          ),
+          zIndex: 0,
+          children: m
+        }
+      )
+    }
+  );
+});
+export {
+  B as Scaffold
+};
+//# sourceMappingURL=scaffold.js.map

package/dist/layouts/containers/scaffold.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scaffold.js","sources":["../../../src/layouts/containers/scaffold.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Box, type BoxProps } from '../../stacks/box/box.js';\nimport type { Alignment } from '../../stacks/types/alignment.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport styles from './containers.module.css';\n\nexport interface ScaffoldProps extends Omit<BoxProps, 'as'> {\n  vAlign?: Alignment;\n  hAlign?: Alignment;\n}\n\nexport const Scaffold = React.forwardRef<HTMLElement, ScaffoldProps>(function Scaffold(\n  {\n    children,\n    width,\n    height,\n    minWidth,\n    maxWidth,\n    minHeight,\n    maxHeight,\n    hAlign = 'start',\n    vAlign = 'start',\n    className,\n    ...props\n  }: ScaffoldProps,\n  ref\n) {\n  return (\n    <Box\n      ref={ref}\n      width={width}\n      height={height}\n      minWidth={minWidth}\n      maxWidth={maxWidth}\n      minHeight={minHeight}\n      maxHeight={maxHeight}\n      data-h-alignment={hAlign}\n      data-v-alignment={vAlign}\n      className={clsx(\n        className,\n        styles['scaffold'],\n        styles['container'],\n        'tcn-container',\n        'tcn-scaffold'\n      )}\n      {...props}\n    >\n      <VStack\n        as=\"section\"\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        minHeight={minHeight}\n        maxHeight={maxHeight}\n        hAlign={hAlign}\n        vAlign={vAlign}\n        ref={ref}\n        className={clsx(\n          styles['scaffold-stack'],\n          styles['container-stack'],\n          'tcn-container-stack',\n          'tcn-scaffold-stack'\n        )}\n        zIndex={0}\n      >\n        {children}\n      </VStack>\n    </Box>\n  );\n});\n"],"names":["Scaffold","React","children","width","height","minWidth","maxWidth","minHeight","maxHeight","hAlign","vAlign","className","props","ref","jsx","Box","clsx","styles","VStack"],"mappings":";;;;;;AAYO,MAAMA,IAAWC,EAAM,WAAuC,SACnE;AAAA,EACE,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,OAAAV;AAAA,MACA,QAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,WAAAC;AAAA,MACA,oBAAkBC;AAAA,MAClB,oBAAkBC;AAAA,MAClB,WAAWM;AAAA,QACTL;AAAA,QACAM,EAAO;AAAA,QACPA,EAAO;AAAA,QACP;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAGL;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,IAAG;AAAA,UACH,UAAAb;AAAA,UACA,UAAAC;AAAA,UACA,WAAAC;AAAA,UACA,WAAAC;AAAA,UACA,QAAAC;AAAA,UACA,QAAAC;AAAA,UACA,KAAAG;AAAA,UACA,WAAWG;AAAA,YACTC,EAAO,gBAAgB;AAAA,YACvBA,EAAO,iBAAiB;AAAA,YACxB;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,QAAQ;AAAA,UAEP,UAAAf;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;"}

package/dist/layouts/containers/side/side.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side.d.ts","sourceRoot":"","sources":["../../../../src/layouts/containers/side/side.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAItE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC;CAAG;AAE7D,eAAO,MAAM,IAAI,+EAgBf,CAAC"}

package/dist/layouts/containers/side/side.js

@@ -0,0 +1,22 @@
+import { jsx as c } from "react/jsx-runtime";
+import m from "react";
+import { clsx as a } from "clsx";
+import { VStack as d } from "../../../stacks/v_stack.js";
+import '../../../side.css';const f = "_side_02cc81d", n = { side: f }, S = m.forwardRef(function({ children: t, className: o, height: s = "100%", width: i = "auto", ...r }, e) {
+  return /* @__PURE__ */ c(
+    d,
+    {
+      ref: e,
+      width: i,
+      height: s,
+      className: a(n.side, "tcn-side", o),
+      as: "section",
+      ...r,
+      children: t
+    }
+  );
+});
+export {
+  S as Side
+};
+//# sourceMappingURL=side.js.map

package/dist/layouts/containers/side/side.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side.js","sources":["../../../../src/layouts/containers/side/side.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { VStack, type VStackProps } from '../../../stacks/v_stack.js';\n\nimport styles from './side.module.css';\n\nexport interface SideProps extends Omit<VStackProps, 'as'> {}\n\nexport const Side = React.forwardRef<HTMLElement, SideProps>(function UtilityStrip(\n  { children, className, height = '100%', width = 'auto', ...props }: SideProps,\n  ref\n) {\n  return (\n    <VStack\n      ref={ref}\n      width={width}\n      height={height}\n      className={clsx(styles['side'], 'tcn-side', className)}\n      as=\"section\"\n      {...props}\n    >\n      {children}\n    </VStack>\n  );\n});\n"],"names":["Side","React","children","className","height","width","props","ref","jsx","VStack","clsx","styles"],"mappings":";;;;4CAQaA,IAAOC,EAAM,WAAmC,SAC3D,EAAE,UAAAC,GAAU,WAAAC,GAAW,QAAAC,IAAS,QAAQ,OAAAC,IAAQ,QAAQ,GAAGC,EAAA,GAC3DC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,OAAAF;AAAA,MACA,QAAAD;AAAA,MACA,WAAWM,EAAKC,EAAO,MAAS,YAAYR,CAAS;AAAA,MACrD,IAAG;AAAA,MACF,GAAGG;AAAA,MAEH,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/layouts/containers/utility_strip/utility_strip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utility_strip.d.ts","sourceRoot":"","sources":["../../../../src/layouts/containers/utility_strip/utility_strip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAItE,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC;IAChE,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,CAAC;CACb;AAED,eAAO,MAAM,YAAY,uFA8BxB,CAAC"}

package/dist/layouts/{rail → containers}/utility_strip/utility_strip.js

@@ -2,13 +2,13 @@ import { jsx as l } from "react/jsx-runtime";
 import m from "react";
 import { clsx as y } from "clsx";
 import { VStack as f } from "../../../stacks/v_stack.js";
-import '../../../utility_strip.css';const n = "_utility-strip_23b31df", u = { "utility-strip": n }, R = m.forwardRef(
+import '../../../utility_strip.css';const n = "_utility-strip_fba048d", u = { "utility-strip": n }, R = m.forwardRef(
   function({
     children: t,
     className: i,
     width: r = "auto",
-    hierarchy: s = "secondary",
-    vAlign: a = "start",
+    hierarchy: a = "secondary",
+    vAlign: s = "start",
     hAlign: o = "center",
     size: e = "md",
     ...c
@@ -18,10 +18,10 @@ import '../../../utility_strip.css';const n = "_utility-strip_23b31df", u = { "u
       {
         ref: p,
         as: "header",
-        vAlign: a,
+        vAlign: s,
         hAlign: o,
         className: y(u["utility-strip"], "tcn-utility-strip", i),
-        "data-hierarchy": s,
+        "data-hierarchy": a,
         "data-size": e,
         width: r,
         ...c,

package/dist/layouts/containers/utility_strip/utility_strip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utility_strip.js","sources":["../../../../src/layouts/containers/utility_strip/utility_strip.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport type { Hierarchy, Size } from '../../../utils/index.js';\nimport { VStack, type VStackProps } from '../../../stacks/v_stack.js';\n\nimport styles from './utility_strip.module.css';\n\nexport interface UtilityStripProps extends Omit<VStackProps, 'as'> {\n  hierarchy?: Hierarchy;\n  size?: Size;\n}\n\nexport const UtilityStrip = React.forwardRef<HTMLElement, UtilityStripProps>(\n  function UtilityStrip(\n    {\n      children,\n      className,\n      width = 'auto',\n      hierarchy = 'secondary',\n      vAlign = 'start',\n      hAlign = 'center',\n      size = 'md',\n      ...props\n    }: UtilityStripProps,\n    ref\n  ) {\n    return (\n      <VStack\n        ref={ref}\n        as=\"header\"\n        vAlign={vAlign}\n        hAlign={hAlign}\n        className={clsx(styles['utility-strip'], 'tcn-utility-strip', className)}\n        data-hierarchy={hierarchy}\n        data-size={size}\n        width={width}\n        {...props}\n      >\n        {children}\n      </VStack>\n    );\n  }\n);\n"],"names":["UtilityStrip","React","children","className","width","hierarchy","vAlign","hAlign","size","props","ref","jsx","VStack","clsx","styles"],"mappings":";;;;gEAYaA,IAAeC,EAAM;AAAA,EAChC,SACE;AAAA,IACE,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,WAAAC,IAAY;AAAA,IACZ,QAAAC,IAAS;AAAA,IACT,QAAAC,IAAS;AAAA,IACT,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,WACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,IAAG;AAAA,QACH,QAAAJ;AAAA,QACA,QAAAC;AAAA,QACA,WAAWM,EAAKC,EAAO,eAAe,GAAG,qBAAqBX,CAAS;AAAA,QACvE,kBAAgBE;AAAA,QAChB,aAAWG;AAAA,QACX,OAAAJ;AAAA,QACC,GAAGK;AAAA,QAEH,UAAAP;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/dist/layouts/index.d.ts

@@ -5,20 +5,17 @@ export * from './list/item.js';
 export * from './list/list.js';
 export * from './sidebar_end/sidebar_end.js';
 export * from './sidebar_start/sidebar_start.js';
-export { Scaffold, type ScaffoldProps } from './scaffold/scaffold.js';
-export { Body, type BodyProps } from './body/body.js';
+export { Scaffold, type ScaffoldProps } from './containers/scaffold.js';
 export { Footer, type FooterProps } from './footer/footer.js';
 export { Header, type HeaderProps } from './header/header.js';
 export { UtilityBar, type UtilityBarProps } from './utility_bar/utility_bar.js';
 export { Group, type GroupProps } from './group/group.js';
 export { Bar, type BarProps } from './bar/bar.js';
-export { Row } from './row/row.js';
-export { Section } from './section/section.js';
-export { Heading, type HeadingOwnProps } from './section/heading.js';
+export { Section, Heading, Detail, type HeadingOwnProps } from './section/index.js';
 export { Responsive, type ResponsiveProps } from './responsive/responsive.js';
 export { Breakpoint, type BreakpointProps } from './responsive/breakpoint.js';
 export { TTable, THead, TBody, TFoot, TR, TH, TD } from './table/table.js';
-export { Rail, type RailProps } from './rail/rail.js';
-export { Side, type SideProps } from './rail/side/side.js';
-export { UtilityStrip, type UtilityStripProps, } from './rail/utility_strip/utility_strip.js';
+export { Rail, type RailProps } from './containers/rail.js';
+export { Side, type SideProps } from './containers/side/side.js';
+export { UtilityStrip, type UtilityStripProps, } from './containers/utility_strip/utility_strip.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,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAChF,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE9E,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAE3E,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,GACvB,MAAM,uCAAuC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layouts/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAExE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAChF,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE9E,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAE3E,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,GACvB,MAAM,6CAA6C,CAAC"}

package/dist/layouts/index.js

@@ -3,53 +3,51 @@ import { Divider as p } from "./divider/divider.js";
 import { Grid as m } from "./grid/grid.js";
 import { Item as i } from "./list/item.js";
 import { List as d } from "./list/list.js";
-import { SidebarEnd as S } from "./sidebar_end/sidebar_end.js";
+import { SidebarEnd as l } from "./sidebar_end/sidebar_end.js";
 import { SidebarStart as n } from "./sidebar_start/sidebar_start.js";
-import { Scaffold as y } from "./scaffold/scaffold.js";
-import { Body as R } from "./body/body.js";
+import { Scaffold as H } from "./containers/scaffold.js";
 import { Footer as s } from "./footer/footer.js";
-import { Header as u } from "./header/header.js";
-import { UtilityBar as D } from "./utility_bar/utility_bar.js";
-import { Group as G } from "./group/group.js";
-import { Bar as g } from "./bar/bar.js";
-import { Row as w } from "./row/row.js";
-import { Section as E } from "./section/section.js";
-import { Heading as L } from "./section/heading.js";
-import { Responsive as j } from "./responsive/responsive.js";
-import { Breakpoint as z } from "./responsive/breakpoint.js";
-import { TBody as J, TD as K, TFoot as M, TH as N, THead as O, TR as P, TTable as Q } from "./table/table.js";
-import { Rail as W } from "./rail/rail.js";
-import { Side as Y } from "./rail/side/side.js";
-import { UtilityStrip as _ } from "./rail/utility_strip/utility_strip.js";
+import { Header as D } from "./header/header.js";
+import { UtilityBar as c } from "./utility_bar/utility_bar.js";
+import { Group as v } from "./group/group.js";
+import { Bar as G } from "./bar/bar.js";
+import { Section as g } from "./section/section.js";
+import { Heading as C } from "./section/heading.js";
+import { Detail as I } from "./section/detail.js";
+import { Responsive as h } from "./responsive/responsive.js";
+import { Breakpoint as q } from "./responsive/breakpoint.js";
+import { TBody as z, TD as A, TFoot as J, TH as K, THead as M, TR as N, TTable as O } from "./table/table.js";
+import { Rail as Q } from "./containers/rail.js";
+import { Side as W } from "./containers/side/side.js";
+import { UtilityStrip as Y } from "./containers/utility_strip/utility_strip.js";
 export {
-  g as Bar,
-  R as Body,
-  z as Breakpoint,
+  G as Bar,
+  q as Breakpoint,
   e as Column,
+  I as Detail,
   p as Divider,
   s as Footer,
   m as Grid,
-  G as Group,
-  u as Header,
-  L as Heading,
+  v as Group,
+  D as Header,
+  C as Heading,
   i as Item,
   d as List,
-  W as Rail,
-  j as Responsive,
-  w as Row,
-  y as Scaffold,
-  E as Section,
-  Y as Side,
-  S as SidebarEnd,
+  Q as Rail,
+  h as Responsive,
+  H as Scaffold,
+  g as Section,
+  W as Side,
+  l as SidebarEnd,
   n as SidebarStart,
-  J as TBody,
-  K as TD,
-  M as TFoot,
-  N as TH,
-  O as THead,
-  P as TR,
-  Q as TTable,
-  D as UtilityBar,
-  _ as UtilityStrip
+  z as TBody,
+  A as TD,
+  J as TFoot,
+  K as TH,
+  M as THead,
+  N as TR,
+  O as TTable,
+  c as UtilityBar,
+  Y as UtilityStrip
 };
 //# 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/section/detail.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { VStackProps } from '../../stacks/v_stack.js';
+export declare const Detail: React.ForwardRefExoticComponent<VStackProps<HTMLElement> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=detail.d.ts.map

package/dist/layouts/section/detail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"detail.d.ts","sourceRoot":"","sources":["../../../src/layouts/section/detail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEnE,eAAO,MAAM,MAAM,iGASjB,CAAC"}

package/dist/layouts/section/detail.js

@@ -0,0 +1,11 @@
+import { jsx as e } from "react/jsx-runtime";
+import m from "react";
+import { clsx as f } from "clsx";
+import { VStack as i } from "../../stacks/v_stack.js";
+const d = m.forwardRef(function({ children: t, className: r, ...o }, a) {
+  return /* @__PURE__ */ e(i, { ref: a, className: f(r, "tcn-detail"), ...o, children: t });
+});
+export {
+  d as Detail
+};
+//# sourceMappingURL=detail.js.map

package/dist/layouts/section/detail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"detail.js","sources":["../../../src/layouts/section/detail.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { VStack, type VStackProps } from '../../stacks/v_stack.js';\n\nexport const Detail = React.forwardRef<HTMLDivElement, VStackProps>(function Detail(\n  { children, className, ...props },\n  ref\n) {\n  return (\n    <VStack ref={ref} className={clsx(className, 'tcn-detail')} {...props}>\n      {children}\n    </VStack>\n  );\n});\n"],"names":["Detail","React","children","className","props","ref","jsx","VStack","clsx"],"mappings":";;;;AAIO,MAAMA,IAASC,EAAM,WAAwC,SAClE,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAC1BC,GACA;AACA,SACE,gBAAAC,EAACC,GAAA,EAAO,KAAAF,GAAU,WAAWG,EAAKL,GAAW,YAAY,GAAI,GAAGC,GAC7D,UAAAF,EAAA,CACH;AAEJ,CAAC;"}

package/dist/layouts/section/heading.js

@@ -1,7 +1,7 @@
 import { jsx as m } from "react/jsx-runtime";
 import s from "clsx";
 import { HStack as a } from "../../stacks/h_stack.js";
-import { s as e } from "../../section.module-0wyGkhDg.js";
+import { s as e } from "../../section.module-BXlxYmJK.js";
 const f = ({ children: r, className: o, ...t }) => /* @__PURE__ */ m(a, { className: s(o, e.heading, "tcn-heading"), ...t, children: r });
 export {
   f as Heading

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

@@ -0,0 +1,4 @@
+export { Section } from './section.js';
+export { Heading, type HeadingOwnProps } from './heading.js';
+export { Detail } from './detail.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layouts/section/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC"}