@tcn/ui 0.3.0 → 0.3.2

package/dist/typography/headline/headline.js.map

@@ -1 +1 @@
-{"version":3,"file":"headline.js","sources":["../../../src/typography/headline/headline.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport styles from './headline.module.css';\n\nexport interface HeadlineOwnProps {\n  children?: string;\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n}\n\nexport type HeadlineProps = WithDetailedHTMLProps<HeadlineOwnProps, 'h1' | 'h2' | 'h3'>;\n\nexport function Headline({\n  size = 'md',\n  emphasis = 'normal',\n  hierarchy = 'primary',\n  color,\n  children,\n  className,\n  style = {},\n  padStart,\n  padEnd,\n  padBottom,\n  padTop,\n  pad,\n  selectable = true,\n}: HeadlineProps) {\n  let As: React.ElementType;\n\n  if (size === 'lg') {\n    As = 'h1';\n  } else if (size === 'md') {\n    As = 'h2';\n  } else {\n    As = 'h3';\n  }\n\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <As\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['headline'], 'headline', className)}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </As>\n  );\n}\n"],"names":["Headline","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","As","jsx","clsx","styles"],"mappings":";;;AAsBO,SAASA,EAAS;AAAA,EACvB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AACf,GAAkB;AAChB,MAAIC;AAEJ,SAAIb,MAAS,OACXa,IAAK,OACIb,MAAS,OAClBa,IAAK,OAELA,IAAK,MAGHF,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAW;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,kBAAgBX;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWG,EAAKC,EAAO,UAAa,YAAYX,CAAS;AAAA,MACzD,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"headline.js","sources":["../../../src/typography/headline/headline.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport styles from './headline.module.css';\n\nexport interface HeadlineOwnProps {\n  children?: string;\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n}\n\nexport type HeadlineProps = WithDetailedHTMLProps<HeadlineOwnProps, 'h1' | 'h2' | 'h3'>;\n\nexport function Headline({\n  size = 'md',\n  emphasis = 'normal',\n  hierarchy = 'primary',\n  color,\n  children,\n  className,\n  style = {},\n  padStart,\n  padEnd,\n  padBottom,\n  padTop,\n  pad,\n  selectable = true,\n}: HeadlineProps) {\n  let As: React.ElementType;\n\n  if (size === 'lg') {\n    As = 'h1';\n  } else if (size === 'md') {\n    As = 'h2';\n  } else {\n    As = 'h3';\n  }\n\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <As\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['headline'], className, 'tcn-headline')}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </As>\n  );\n}\n"],"names":["Headline","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","As","jsx","clsx","styles"],"mappings":";;;AAsBO,SAASA,EAAS;AAAA,EACvB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AACf,GAAkB;AAChB,MAAIC;AAEJ,SAAIb,MAAS,OACXa,IAAK,OACIb,MAAS,OAClBa,IAAK,OAELA,IAAK,MAGHF,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAW;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,kBAAgBX;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWG,EAAKC,EAAO,UAAaX,GAAW,cAAc;AAAA,MAC7D,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/typography/subheadline/subheadline.js

@@ -1,11 +1,11 @@
-import { jsx as p } from "react/jsx-runtime";
-import { clsx as u } from "clsx";
-import { s as c } from "../../subheadline.module-C-v7zMkQ.js";
+import { jsx as g } from "react/jsx-runtime";
+import { clsx as p } from "clsx";
+import { s as u } from "../../subheadline.module-C-v7zMkQ.js";
 function j({
-  size: e = "md",
+  size: n = "md",
   emphasis: l = "normal",
   hierarchy: o = "primary",
-  color: n,
+  color: e,
   children: s,
   className: t,
   style: i = {},
@@ -14,18 +14,18 @@ function j({
   padBottom: f,
   padTop: m,
   pad: h,
-  selectable: g = !0
+  selectable: c = !0
 }) {
   let a;
-  return e === "lg" ? a = "h3" : e === "md" ? a = "h4" : a = "h5", h && (i.padding = h), r && (i.paddingInlineStart = r), d && (i.paddingInlineEnd = d), m && (i.paddingTop = m), f && (i.paddingBottom = f), n && (i.color = n), /* @__PURE__ */ p(
+  return n === "lg" ? a = "h3" : n === "md" ? a = "h4" : a = "h5", h && (i.padding = h), r && (i.paddingInlineStart = r), d && (i.paddingInlineEnd = d), m && (i.paddingTop = m), f && (i.paddingBottom = f), e && (i.color = e), /* @__PURE__ */ g(
     a,
     {
       "data-hierarchy": o,
       "data-emphasis": l,
-      "data-selectable": g,
-      className: u(c.subheadline, "subheadline", t),
+      "data-selectable": c,
+      className: p(u.subheadline, t, "tcn-subheadline"),
       style: i,
-      "data-size": e,
+      "data-size": n,
       children: s
     }
   );

package/dist/typography/subheadline/subheadline.js.map

@@ -1 +1 @@
-{"version":3,"file":"subheadline.js","sources":["../../../src/typography/subheadline/subheadline.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport styles from './subheadline.module.css';\n\nexport interface SubheadlineOwnProps {\n  children?: string;\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n}\n\nexport type SubheadlineProps = WithDetailedHTMLProps<\n  SubheadlineOwnProps,\n  'h3' | 'h4' | 'h5'\n>;\n\nexport function Subheadline({\n  size = 'md',\n  emphasis = 'normal',\n  hierarchy = 'primary',\n  color,\n  children,\n  className,\n  style = {},\n  padStart,\n  padEnd,\n  padBottom,\n  padTop,\n  pad,\n  selectable = true,\n}: SubheadlineProps) {\n  let As: React.ElementType;\n\n  if (size === 'lg') {\n    As = 'h3';\n  } else if (size === 'md') {\n    As = 'h4';\n  } else {\n    As = 'h5';\n  }\n\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <As\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['subheadline'], 'subheadline', className)}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </As>\n  );\n}\n"],"names":["Subheadline","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","As","jsx","clsx","styles"],"mappings":";;;AAyBO,SAASA,EAAY;AAAA,EAC1B,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AACf,GAAqB;AACnB,MAAIC;AAEJ,SAAIb,MAAS,OACXa,IAAK,OACIb,MAAS,OAClBa,IAAK,OAELA,IAAK,MAGHF,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAW;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,kBAAgBX;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWG,EAAKC,EAAO,aAAgB,eAAeX,CAAS;AAAA,MAC/D,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"subheadline.js","sources":["../../../src/typography/subheadline/subheadline.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport styles from './subheadline.module.css';\n\nexport interface SubheadlineOwnProps {\n  children?: string;\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n}\n\nexport type SubheadlineProps = WithDetailedHTMLProps<\n  SubheadlineOwnProps,\n  'h3' | 'h4' | 'h5'\n>;\n\nexport function Subheadline({\n  size = 'md',\n  emphasis = 'normal',\n  hierarchy = 'primary',\n  color,\n  children,\n  className,\n  style = {},\n  padStart,\n  padEnd,\n  padBottom,\n  padTop,\n  pad,\n  selectable = true,\n}: SubheadlineProps) {\n  let As: React.ElementType;\n\n  if (size === 'lg') {\n    As = 'h3';\n  } else if (size === 'md') {\n    As = 'h4';\n  } else {\n    As = 'h5';\n  }\n\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <As\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['subheadline'], className, 'tcn-subheadline')}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </As>\n  );\n}\n"],"names":["Subheadline","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","As","jsx","clsx","styles"],"mappings":";;;AAyBO,SAASA,EAAY;AAAA,EAC1B,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AACf,GAAqB;AACnB,MAAIC;AAEJ,SAAIb,MAAS,OACXa,IAAK,OACIb,MAAS,OAClBa,IAAK,OAELA,IAAK,MAGHF,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAW;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,kBAAgBX;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWG,EAAKC,EAAO,aAAgBX,GAAW,iBAAiB;AAAA,MACnE,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/typography/title/title.js

@@ -5,27 +5,27 @@ import '../../title.css';const I = "_title_64bd0fd", T = { title: I }, N = x(fun
   size: n = "md",
   emphasis: m = "normal",
   hierarchy: c = "primary",
-  color: e,
+  color: r,
   children: p,
   className: g,
   style: i = {},
-  padStart: r,
+  padStart: e,
   padEnd: a,
   padBottom: f,
-  padTop: l,
-  pad: d,
+  padTop: d,
+  pad: l,
   selectable: h = !0,
   as: o
 }, s) {
   let t = o;
-  return o == null && (n === "lg" ? t = "h1" : n === "md" ? t = "h2" : t = "h3"), d && (i.padding = d), r && (i.paddingInlineStart = r), a && (i.paddingInlineEnd = a), l && (i.paddingTop = l), f && (i.paddingBottom = f), e && (i.color = e), /* @__PURE__ */ u(
+  return o == null && (n === "lg" ? t = "h1" : n === "md" ? t = "h2" : t = "h3"), l && (i.padding = l), e && (i.paddingInlineStart = e), a && (i.paddingInlineEnd = a), d && (i.paddingTop = d), f && (i.paddingBottom = f), r && (i.color = r), /* @__PURE__ */ u(
     t,
     {
       ref: s,
       "data-hierarchy": c,
       "data-emphasis": m,
       "data-selectable": h,
-      className: b(T.title, "title", "tcn-typography", "tcn-title", g),
+      className: b(T.title, g, "tcn-typography", "tcn-title"),
       style: i,
       "data-size": n,
       children: p

package/dist/typography/title/title.js.map

@@ -1 +1 @@
-{"version":3,"file":"title.js","sources":["../../../src/typography/title/title.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport type { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport styles from './title.module.css';\n\nexport interface TitleOwnProps {\n  children?: string;\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n  as?: string;\n}\n\nexport type TitleProps = WithDetailedHTMLProps<TitleOwnProps, 'h1' | 'h2' | 'h3'>;\n\nexport const Title = forwardRef<HTMLHeadingElement, TitleProps>(function Title(\n  {\n    size = 'md',\n    emphasis = 'normal',\n    hierarchy = 'primary',\n    color,\n    children,\n    className,\n    style = {},\n    padStart,\n    padEnd,\n    padBottom,\n    padTop,\n    pad,\n    selectable = true,\n    as,\n  },\n  ref\n) {\n  let As: React.ElementType = as as React.ElementType;\n\n  if (as == null) {\n    if (size === 'lg') {\n      As = 'h1';\n    } else if (size === 'md') {\n      As = 'h2';\n    } else {\n      As = 'h3';\n    }\n  }\n\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <As\n      ref={ref}\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['title'], 'title', 'tcn-typography', 'tcn-title', className)}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </As>\n  );\n});\n"],"names":["Title","forwardRef","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","as","ref","As","jsx","clsx","styles"],"mappings":";;;8CAuBaA,IAAQC,EAA2C,SAC9D;AAAA,EACE,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,IAAAC;AACF,GACAC,GACA;AACA,MAAIC,IAAwBF;AAE5B,SAAIA,KAAM,SACJb,MAAS,OACXe,IAAK,OACIf,MAAS,OAClBe,IAAK,OAELA,IAAK,OAILJ,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAa;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,kBAAgBZ;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWK,EAAKC,EAAO,OAAU,SAAS,kBAAkB,aAAab,CAAS;AAAA,MAClF,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"title.js","sources":["../../../src/typography/title/title.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport type { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport styles from './title.module.css';\n\nexport interface TitleOwnProps {\n  children?: string;\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n  as?: string;\n}\n\nexport type TitleProps = WithDetailedHTMLProps<TitleOwnProps, 'h1' | 'h2' | 'h3'>;\n\nexport const Title = forwardRef<HTMLHeadingElement, TitleProps>(function Title(\n  {\n    size = 'md',\n    emphasis = 'normal',\n    hierarchy = 'primary',\n    color,\n    children,\n    className,\n    style = {},\n    padStart,\n    padEnd,\n    padBottom,\n    padTop,\n    pad,\n    selectable = true,\n    as,\n  },\n  ref\n) {\n  let As: React.ElementType = as as React.ElementType;\n\n  if (as == null) {\n    if (size === 'lg') {\n      As = 'h1';\n    } else if (size === 'md') {\n      As = 'h2';\n    } else {\n      As = 'h3';\n    }\n  }\n\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <As\n      ref={ref}\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['title'], className, 'tcn-typography', 'tcn-title')}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </As>\n  );\n});\n"],"names":["Title","forwardRef","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","as","ref","As","jsx","clsx","styles"],"mappings":";;;8CAuBaA,IAAQC,EAA2C,SAC9D;AAAA,EACE,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,IAAAC;AACF,GACAC,GACA;AACA,MAAIC,IAAwBF;AAE5B,SAAIA,KAAM,SACJb,MAAS,OACXe,IAAK,OACIf,MAAS,OAClBe,IAAK,OAELA,IAAK,OAILJ,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAa;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,kBAAgBZ;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWK,EAAKC,EAAO,OAAUb,GAAW,kBAAkB,WAAW;AAAA,MACzE,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/unit_input.css

@@ -1 +1 @@
-._unit-input_4bd8bc8{position:relative;opacity:1}._unit-input-flex-box_8db2f9b{z-index:inherit}._unit-input-number_c95f85a{padding-inline-end:8px}._unit-input-number_c95f85a,._unit-input-select_1bbbad9{position:relative;z-index:1}._unit-input-number_c95f85a:focus,._unit-input-select_1bbbad9:focus{z-index:2}
+@layer tcn-system{:where(._unit-input_4bd8bc8){position:relative;opacity:1}:where(._unit-input-flex-box_8db2f9b){z-index:inherit}:where(._unit-input-number_c95f85a){padding-inline-end:8px}:where(._unit-input-number_c95f85a),:where(._unit-input-select_1bbbad9){position:relative;z-index:1}:where(._unit-input-number_c95f85a:focus),:where(._unit-input-select_1bbbad9:focus){z-index:2}}

package/dist/utility_bar.css

@@ -1 +1 @@
-._utility-bar_3a92315{width:100%;min-height:0}
+@layer tcn-system{:where(._utility-bar_3a92315){width:100%;min-height:0}}

package/dist/utils/click_away_listener.js

@@ -1,4 +1,4 @@
-import m, { useRef as p, useCallback as L, useEffect as W } from "react";
+import d, { useRef as p, useCallback as L, useEffect as W } from "react";
 import { useForkRef as T } from "./hooks/use_fork_ref.js";
 const C = {
   onClick: "click",
@@ -8,16 +8,16 @@ const C = {
   onTouchStart: "touchstart",
   onTouchEnd: "touchend"
 };
-function w(o, t, d, s) {
-  if (!d)
+function w(o, t, m, s) {
+  if (!m)
     return !0;
   let n;
   return o.composedPath ? n = [t, ...s].find((e) => o.composedPath().indexOf(e) > -1) !== void 0 : n = !document.documentElement.contains(o.target) || [t, ...s].find((e) => e?.contains(o.target)) !== void 0, n;
 }
-const F = m.forwardRef(
-  function({ children: t, mouseEvent: d, touchEvent: s, onClickAway: n, refs: e = [], isException: a }, R) {
-    const f = p(null), v = p(!0), E = C[d || "onClick"], l = g[s || "onTouchEnd"], k = T(R, f, t.ref), i = m.useRef(!1);
-    m.useEffect(() => (window.setTimeout(() => {
+const F = d.forwardRef(
+  function({ children: t, mouseEvent: m, touchEvent: s, onClickAway: n, refs: e = [], isException: a }, R) {
+    const f = p(null), v = p(!0), l = C[m || "onClick"], E = g[s || "onTouchEnd"], k = T(R, f, t.ref), i = d.useRef(!1);
+    d.useEffect(() => (window.setTimeout(() => {
       i.current = !0;
     }, 0), () => {
       i.current = !1;
@@ -44,9 +44,9 @@ const F = m.forwardRef(
       },
       [n, e, a]
     );
-    return W(() => (document.addEventListener("mousedown", r), document.addEventListener("touchstart", r), document.addEventListener(E, c), document.addEventListener(l, c), () => {
-      document.removeEventListener("mousedown", r), document.removeEventListener("touchstart", r), document.removeEventListener(E, c), document.removeEventListener(l, c);
-    }), [l, E, c, r]), m.cloneElement(t, {
+    return W(() => (document.addEventListener("mousedown", r), document.addEventListener("touchstart", r), document.addEventListener(l, c), document.addEventListener(E, c), () => {
+      document.removeEventListener("mousedown", r), document.removeEventListener("touchstart", r), document.removeEventListener(l, c), document.removeEventListener(E, c);
+    }), [E, l, c, r]), d.cloneElement(t, {
       ...t.props,
       ref: k
     });

package/dist/utils/click_away_listener.js.map

@@ -1 +1 @@
-{"version":3,"file":"click_away_listener.js","sources":["../../src/utils/click_away_listener.tsx"],"sourcesContent":["import React, { useEffect, useCallback, useRef } from 'react';\nimport { useForkRef } from './hooks/use_fork_ref.js';\nexport interface ClickAwayListenerProps {\n  children: React.ReactElement;\n  onClickAway: (event: React.MouseEvent | React.TouchEvent) => void;\n  mouseEvent?: 'onMouseUp' | 'onMouseDown' | 'onClick';\n  touchEvent?: 'onTouchStart' | 'onTouchEnd';\n  isException?: (target: HTMLElement) => boolean;\n  // An array of refs that wont trigger the click away listener\n  refs?: React.RefObject<Element>[];\n}\nconst eventMap = {\n  onClick: 'click',\n  onMouseDown: 'mousedown',\n  onMouseUp: 'mouseup',\n};\nconst touchMap = {\n  onTouchStart: 'touchstart',\n  onTouchEnd: 'touchend',\n};\n\nexport function isEventWithinElement(\n  event: MouseEvent | TouchEvent,\n  node: HTMLElement | null,\n  activated: boolean,\n  refs: (Element | null)[]\n) {\n  if (!activated) {\n    return true;\n  }\n\n  let isWithinElement: boolean;\n\n  if (event.composedPath) {\n    isWithinElement =\n      [node, ...refs].find((ref: any) => {\n        return event.composedPath().indexOf(ref) > -1;\n      }) !== undefined;\n  } else {\n    isWithinElement =\n      !document.documentElement.contains(event.target as any) ||\n      [node, ...refs].find((ref: any) => {\n        return ref?.contains(event.target);\n      }) !== undefined;\n  }\n\n  return isWithinElement;\n}\n\nexport const ClickAwayListener = React.forwardRef<HTMLElement, ClickAwayListenerProps>(\n  function ClickAwayListener(\n    { children, mouseEvent, touchEvent, onClickAway, refs = [], isException },\n    ref\n  ) {\n    const nodeRef = useRef<HTMLElement | null>(null);\n    const startedActionWithinElementRef = useRef<boolean>(true);\n    const DOMMouseEvent = eventMap[mouseEvent || 'onClick'];\n    const DOMTouchEvent = touchMap[touchEvent || 'onTouchEnd'];\n    const newRef = useForkRef(ref, nodeRef, (children as any).ref);\n    const activatedRef = React.useRef(false);\n\n    React.useEffect(() => {\n      // Ensure that this component is not \"activated\" synchronously.\n      // https://github.com/facebook/react/issues/20074\n      window.setTimeout(() => {\n        activatedRef.current = true;\n      }, 0);\n      return () => {\n        activatedRef.current = false;\n      };\n    }, []);\n\n    const trackAction = useCallback(\n      (event: any) => {\n        startedActionWithinElementRef.current = isEventWithinElement(\n          event,\n          nodeRef.current,\n          activatedRef.current,\n          refs.map(r => r.current)\n        );\n      },\n      [refs]\n    );\n\n    const eventHandler = useCallback(\n      (event: any) => {\n        const startedFromWithinElement = startedActionWithinElementRef.current;\n        const isWithinElement = isEventWithinElement(\n          event,\n          nodeRef.current,\n          activatedRef.current,\n          refs.map(r => r.current)\n        );\n\n        if (\n          !isWithinElement &&\n          !startedFromWithinElement &&\n          (!isException || !isException(event.target))\n        ) {\n          onClickAway(event);\n        }\n      },\n      [onClickAway, refs, isException]\n    );\n\n    useEffect(() => {\n      document.addEventListener('mousedown', trackAction);\n      document.addEventListener('touchstart', trackAction);\n      document.addEventListener(DOMMouseEvent, eventHandler);\n      document.addEventListener(DOMTouchEvent, eventHandler);\n      return () => {\n        document.removeEventListener('mousedown', trackAction);\n        document.removeEventListener('touchstart', trackAction);\n        document.removeEventListener(DOMMouseEvent, eventHandler);\n        document.removeEventListener(DOMTouchEvent, eventHandler);\n      };\n    }, [DOMTouchEvent, DOMMouseEvent, eventHandler, trackAction]);\n\n    return React.cloneElement(children, {\n      ...children.props,\n      ref: newRef,\n    });\n  }\n);\n"],"names":["eventMap","touchMap","isEventWithinElement","event","node","activated","refs","isWithinElement","ref","ClickAwayListener","React","children","mouseEvent","touchEvent","onClickAway","isException","nodeRef","useRef","startedActionWithinElementRef","DOMMouseEvent","DOMTouchEvent","newRef","useForkRef","activatedRef","trackAction","useCallback","r","eventHandler","startedFromWithinElement","useEffect"],"mappings":";;AAWA,MAAMA,IAAW;AAAA,EACf,SAAS;AAAA,EACT,aAAa;AAAA,EACb,WAAW;AACb,GACMC,IAAW;AAAA,EACf,cAAc;AAAA,EACd,YAAY;AACd;AAEO,SAASC,EACdC,GACAC,GACAC,GACAC,GACA;AACA,MAAI,CAACD;AACH,WAAO;AAGT,MAAIE;AAEJ,SAAIJ,EAAM,eACRI,IACE,CAACH,GAAM,GAAGE,CAAI,EAAE,KAAK,CAACE,MACbL,EAAM,aAAA,EAAe,QAAQK,CAAG,IAAI,EAC5C,MAAM,SAETD,IACE,CAAC,SAAS,gBAAgB,SAASJ,EAAM,MAAa,KACtD,CAACC,GAAM,GAAGE,CAAI,EAAE,KAAK,CAACE,MACbA,GAAK,SAASL,EAAM,MAAM,CAClC,MAAM,QAGJI;AACT;AAEO,MAAME,IAAoBC,EAAM;AAAA,EACrC,SACE,EAAE,UAAAC,GAAU,YAAAC,GAAY,YAAAC,GAAY,aAAAC,GAAa,MAAAR,IAAO,CAAA,GAAI,aAAAS,EAAA,GAC5DP,GACA;AACA,UAAMQ,IAAUC,EAA2B,IAAI,GACzCC,IAAgCD,EAAgB,EAAI,GACpDE,IAAgBnB,EAASY,KAAc,SAAS,GAChDQ,IAAgBnB,EAASY,KAAc,YAAY,GACnDQ,IAASC,EAAWd,GAAKQ,GAAUL,EAAiB,GAAG,GACvDY,IAAeb,EAAM,OAAO,EAAK;AAEvC,IAAAA,EAAM,UAAU,OAGd,OAAO,WAAW,MAAM;AACtB,MAAAa,EAAa,UAAU;AAAA,IACzB,GAAG,CAAC,GACG,MAAM;AACX,MAAAA,EAAa,UAAU;AAAA,IACzB,IACC,CAAA,CAAE;AAEL,UAAMC,IAAcC;AAAA,MAClB,CAACtB,MAAe;AACd,QAAAe,EAA8B,UAAUhB;AAAA,UACtCC;AAAA,UACAa,EAAQ;AAAA,UACRO,EAAa;AAAA,UACbjB,EAAK,IAAI,CAAAoB,MAAKA,EAAE,OAAO;AAAA,QAAA;AAAA,MAE3B;AAAA,MACA,CAACpB,CAAI;AAAA,IAAA,GAGDqB,IAAeF;AAAA,MACnB,CAACtB,MAAe;AACd,cAAMyB,IAA2BV,EAA8B;AAQ/D,QACE,CARsBhB;AAAA,UACtBC;AAAA,UACAa,EAAQ;AAAA,UACRO,EAAa;AAAA,UACbjB,EAAK,IAAI,CAAAoB,MAAKA,EAAE,OAAO;AAAA,QAAA,KAKvB,CAACE,MACA,CAACb,KAAe,CAACA,EAAYZ,EAAM,MAAM,MAE1CW,EAAYX,CAAK;AAAA,MAErB;AAAA,MACA,CAACW,GAAaR,GAAMS,CAAW;AAAA,IAAA;AAGjC,WAAAc,EAAU,OACR,SAAS,iBAAiB,aAAaL,CAAW,GAClD,SAAS,iBAAiB,cAAcA,CAAW,GACnD,SAAS,iBAAiBL,GAAeQ,CAAY,GACrD,SAAS,iBAAiBP,GAAeO,CAAY,GAC9C,MAAM;AACX,eAAS,oBAAoB,aAAaH,CAAW,GACrD,SAAS,oBAAoB,cAAcA,CAAW,GACtD,SAAS,oBAAoBL,GAAeQ,CAAY,GACxD,SAAS,oBAAoBP,GAAeO,CAAY;AAAA,IAC1D,IACC,CAACP,GAAeD,GAAeQ,GAAcH,CAAW,CAAC,GAErDd,EAAM,aAAaC,GAAU;AAAA,MAClC,GAAGA,EAAS;AAAA,MACZ,KAAKU;AAAA,IAAA,CACN;AAAA,EACH;AACF;"}
+{"version":3,"file":"click_away_listener.js","sources":["../../src/utils/click_away_listener.tsx"],"sourcesContent":["import React, { useEffect, useCallback, useRef } from 'react';\nimport { useForkRef } from './hooks/use_fork_ref.js';\nexport interface ClickAwayListenerProps {\n  children: React.ReactElement;\n  onClickAway: (event: React.MouseEvent | React.TouchEvent) => void;\n  mouseEvent?: 'onMouseUp' | 'onMouseDown' | 'onClick';\n  touchEvent?: 'onTouchStart' | 'onTouchEnd';\n  isException?: (target: HTMLElement) => boolean;\n  // An array of refs that wont trigger the click away listener\n  refs?: React.RefObject<Element>[];\n}\nconst eventMap = {\n  onClick: 'click',\n  onMouseDown: 'mousedown',\n  onMouseUp: 'mouseup',\n};\nconst touchMap = {\n  onTouchStart: 'touchstart',\n  onTouchEnd: 'touchend',\n};\n\nexport function isEventWithinElement(\n  event: MouseEvent | TouchEvent,\n  node: HTMLElement | null,\n  activated: boolean,\n  refs: (Element | null)[]\n) {\n  if (!activated) {\n    return true;\n  }\n\n  let isWithinElement: boolean;\n\n  if (event.composedPath) {\n    isWithinElement =\n      [node, ...refs].find((ref: any) => {\n        return event.composedPath().indexOf(ref) > -1;\n      }) !== undefined;\n  } else {\n    isWithinElement =\n      !document.documentElement.contains(event.target as any) ||\n      [node, ...refs].find((ref: any) => {\n        return ref?.contains(event.target);\n      }) !== undefined;\n  }\n\n  return isWithinElement;\n}\n\nexport const ClickAwayListener = React.forwardRef<HTMLElement, ClickAwayListenerProps>(\n  function ClickAwayListener(\n    { children, mouseEvent, touchEvent, onClickAway, refs = [], isException },\n    ref\n  ) {\n    const nodeRef = useRef<HTMLElement | null>(null);\n    const startedActionWithinElementRef = useRef<boolean>(true);\n    const DOMMouseEvent = eventMap[mouseEvent || 'onClick'];\n    const DOMTouchEvent = touchMap[touchEvent || 'onTouchEnd'];\n    const newRef = useForkRef(ref, nodeRef, (children as any).ref);\n    const activatedRef = React.useRef(false);\n\n    React.useEffect(() => {\n      // Ensure that this component is not \"activated\" synchronously.\n      // https://github.com/facebook/react/issues/20074\n      window.setTimeout(() => {\n        activatedRef.current = true;\n      }, 0);\n      return () => {\n        activatedRef.current = false;\n      };\n    }, []);\n\n    const trackAction = useCallback(\n      (event: any) => {\n        startedActionWithinElementRef.current = isEventWithinElement(\n          event,\n          nodeRef.current,\n          activatedRef.current,\n          refs.map(r => r.current)\n        );\n      },\n      [refs]\n    );\n\n    const eventHandler = useCallback(\n      (event: any) => {\n        const startedFromWithinElement = startedActionWithinElementRef.current;\n        const isWithinElement = isEventWithinElement(\n          event,\n          nodeRef.current,\n          activatedRef.current,\n          refs.map(r => r.current)\n        );\n\n        if (\n          !isWithinElement &&\n          !startedFromWithinElement &&\n          (!isException || !isException(event.target))\n        ) {\n          onClickAway(event);\n        }\n      },\n      [onClickAway, refs, isException]\n    );\n\n    useEffect(() => {\n      document.addEventListener('mousedown', trackAction);\n      document.addEventListener('touchstart', trackAction);\n      document.addEventListener(DOMMouseEvent, eventHandler);\n      document.addEventListener(DOMTouchEvent, eventHandler);\n      return () => {\n        document.removeEventListener('mousedown', trackAction);\n        document.removeEventListener('touchstart', trackAction);\n        document.removeEventListener(DOMMouseEvent, eventHandler);\n        document.removeEventListener(DOMTouchEvent, eventHandler);\n      };\n    }, [DOMTouchEvent, DOMMouseEvent, eventHandler, trackAction]);\n\n    return React.cloneElement(children, {\n      ...children.props,\n      ref: newRef,\n    });\n  }\n);\n"],"names":["eventMap","touchMap","isEventWithinElement","event","node","activated","refs","isWithinElement","ref","ClickAwayListener","React","children","mouseEvent","touchEvent","onClickAway","isException","nodeRef","useRef","startedActionWithinElementRef","DOMMouseEvent","DOMTouchEvent","newRef","useForkRef","activatedRef","trackAction","useCallback","r","eventHandler","startedFromWithinElement","useEffect"],"mappings":";;AAWA,MAAMA,IAAW;AAAA,EACf,SAAS;AAAA,EACT,aAAa;AAAA,EACb,WAAW;AACb,GACMC,IAAW;AAAA,EACf,cAAc;AAAA,EACd,YAAY;AACd;AAEO,SAASC,EACdC,GACAC,GACAC,GACAC,GACA;AACA,MAAI,CAACD;AACH,WAAO;AAGT,MAAIE;AAEJ,SAAIJ,EAAM,eACRI,IACE,CAACH,GAAM,GAAGE,CAAI,EAAE,KAAK,CAACE,MACbL,EAAM,aAAA,EAAe,QAAQK,CAAG,IAAI,EAC5C,MAAM,SAETD,IACE,CAAC,SAAS,gBAAgB,SAASJ,EAAM,MAAa,KACtD,CAACC,GAAM,GAAGE,CAAI,EAAE,KAAK,CAACE,MACbA,GAAK,SAASL,EAAM,MAAM,CAClC,MAAM,QAGJI;AACT;AAEO,MAAME,IAAoBC,EAAM;AAAA,EACrC,SACE,EAAE,UAAAC,GAAU,YAAAC,GAAY,YAAAC,GAAY,aAAAC,GAAa,MAAAR,IAAO,CAAA,GAAI,aAAAS,EAAA,GAC5DP,GACA;AACA,UAAMQ,IAAUC,EAA2B,IAAI,GACzCC,IAAgCD,EAAgB,EAAI,GACpDE,IAAgBnB,EAASY,KAAc,SAAS,GAChDQ,IAAgBnB,EAASY,KAAc,YAAY,GACnDQ,IAASC,EAAWd,GAAKQ,GAAUL,EAAiB,GAAG,GACvDY,IAAeb,EAAM,OAAO,EAAK;AAEvCA,IAAAA,EAAM,UAAU,OAGd,OAAO,WAAW,MAAM;AACtB,MAAAa,EAAa,UAAU;AAAA,IACzB,GAAG,CAAC,GACG,MAAM;AACX,MAAAA,EAAa,UAAU;AAAA,IACzB,IACC,CAAA,CAAE;AAEL,UAAMC,IAAcC;AAAA,MAClB,CAACtB,MAAe;AACd,QAAAe,EAA8B,UAAUhB;AAAA,UACtCC;AAAA,UACAa,EAAQ;AAAA,UACRO,EAAa;AAAA,UACbjB,EAAK,IAAI,CAAAoB,MAAKA,EAAE,OAAO;AAAA,QAAA;AAAA,MAE3B;AAAA,MACA,CAACpB,CAAI;AAAA,IAAA,GAGDqB,IAAeF;AAAA,MACnB,CAACtB,MAAe;AACd,cAAMyB,IAA2BV,EAA8B;AAQ/D,QACE,CARsBhB;AAAA,UACtBC;AAAA,UACAa,EAAQ;AAAA,UACRO,EAAa;AAAA,UACbjB,EAAK,IAAI,CAAAoB,MAAKA,EAAE,OAAO;AAAA,QAAA,KAKvB,CAACE,MACA,CAACb,KAAe,CAACA,EAAYZ,EAAM,MAAM,MAE1CW,EAAYX,CAAK;AAAA,MAErB;AAAA,MACA,CAACW,GAAaR,GAAMS,CAAW;AAAA,IAAA;AAGjC,WAAAc,EAAU,OACR,SAAS,iBAAiB,aAAaL,CAAW,GAClD,SAAS,iBAAiB,cAAcA,CAAW,GACnD,SAAS,iBAAiBL,GAAeQ,CAAY,GACrD,SAAS,iBAAiBP,GAAeO,CAAY,GAC9C,MAAM;AACX,eAAS,oBAAoB,aAAaH,CAAW,GACrD,SAAS,oBAAoB,cAAcA,CAAW,GACtD,SAAS,oBAAoBL,GAAeQ,CAAY,GACxD,SAAS,oBAAoBP,GAAeO,CAAY;AAAA,IAC1D,IACC,CAACP,GAAeD,GAAeQ,GAAcH,CAAW,CAAC,GAErDd,EAAM,aAAaC,GAAU;AAAA,MAClC,GAAGA,EAAS;AAAA,MACZ,KAAKU;AAAA,IAAA,CACN;AAAA,EACH;AACF;"}

package/dist/utils/dnd/draggable/draggable.js

@@ -7,19 +7,19 @@ import '../../../draggable.css';const c = "_draggable_db40376", m = { draggable:
   children: a,
   draggable: t = !0
 }) => {
-  const o = p({}), r = n(
+  const o = p({}), e = n(
     () => ({
       "--position-x": `${o.position.x}px`,
       "--position-y": `${o.position.y}px`
     }),
     [o.position]
-  ), e = i.cloneElement(a, {
+  ), r = i.cloneElement(a, {
     className: l("tcn-draggable", m.draggable, a.props.className),
-    style: { ...r, ...a.props.style },
+    style: { ...e, ...a.props.style },
     "data-is-dragging": o.isDragging,
     "data-is-draggable": t
   });
-  return /* @__PURE__ */ s(g.Provider, { value: o, children: e });
+  return /* @__PURE__ */ s(g.Provider, { value: o, children: r });
 };
 export {
   y as Draggable

package/dist/utils/dnd/handle.js

@@ -2,17 +2,17 @@ import s, { useRef as f, useEffect as u } from "react";
 import a from "clsx";
 import { useDragContainer as l } from "./context.js";
 import { useForkRef as m } from "../hooks/use_fork_ref.js";
-const d = ({ children: e }) => {
-  const { registerHandle: t, unregisterHandle: n } = l(), r = f(null);
+const d = ({ children: r }) => {
+  const { registerHandle: t, unregisterHandle: n } = l(), e = f(null);
   u(() => {
-    if (r.current != null)
-      return t(r), () => {
-        r.current != null && n(r);
+    if (e.current != null)
+      return t(e), () => {
+        e.current != null && n(e);
       };
   }, [t, n]);
-  const o = m(r, e.props.ref);
-  return s.cloneElement(e, {
-    className: a("tcn-drag-handle", e.props.className),
+  const o = m(e, r.props.ref);
+  return s.cloneElement(r, {
+    className: a("tcn-drag-handle", r.props.className),
     ref: o
   });
 };

package/dist/utils/focus_redirect.js

@@ -1,7 +1,7 @@
-import { jsx as i } from "react/jsx-runtime";
-import e from "react";
-const d = e.forwardRef(function({ onRedirect: t }, o) {
-  return /* @__PURE__ */ i(
+import { jsx as e } from "react/jsx-runtime";
+import i from "react";
+const n = i.forwardRef(function({ onRedirect: t }, o) {
+  return /* @__PURE__ */ e(
     "div",
     {
       ref: o,
@@ -19,6 +19,6 @@ const d = e.forwardRef(function({ onRedirect: t }, o) {
   );
 });
 export {
-  d as FocusRedirect
+  n as FocusRedirect
 };
 //# sourceMappingURL=focus_redirect.js.map

package/dist/utils/hooks/make_context_hook.js

@@ -1,9 +1,9 @@
 import r from "react";
-const i = (e, t) => () => {
-  const o = r.useContext(e);
-  if (o === void 0)
+const i = (o, t) => () => {
+  const e = r.useContext(o);
+  if (e === void 0)
     throw t ? new Error(`Context ${t} was accessed outside of a context provider!`) : new Error("Context must be used within a Context Provider!");
-  return o;
+  return e;
 };
 export {
   i as makeContextHook

package/dist/utils/hooks/use_media_query.js

@@ -1,5 +1,5 @@
 import s from "react";
-function h(t) {
+function d(t) {
   const [c, a] = s.useState(!1);
   return s.useEffect(() => {
     const e = window.matchMedia(t);
@@ -11,6 +11,6 @@ function h(t) {
   }, [t]), c;
 }
 export {
-  h as useMediaQuery
+  d as useMediaQuery
 };
 //# sourceMappingURL=use_media_query.js.map

package/dist/utils/hooks/use_media_query.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_media_query.js","sources":["../../../src/utils/hooks/use_media_query.ts"],"sourcesContent":["import React from 'react';\n\n/**\n * Custom hook that returns a boolean indicating if the current viewport\n * matches the given media query.\n *\n * @param query - The media query to match against (e.g. \"(min-width: 768px)\")\n * @returns boolean indicating if the media query matches\n */\nexport function useMediaQuery(query: string): boolean {\n  const [matches, setMatches] = React.useState(false);\n\n  React.useEffect(() => {\n    const mediaQuery = window.matchMedia(query);\n\n    // Set initial value\n    setMatches(mediaQuery.matches);\n\n    // Create event listener\n    const handler = (event: MediaQueryListEvent) => {\n      setMatches(event.matches);\n    };\n\n    // Add the listener\n    mediaQuery.addEventListener('change', handler);\n\n    // Clean up\n    return () => mediaQuery.removeEventListener('change', handler);\n  }, [query]);\n\n  return matches;\n}\n"],"names":["useMediaQuery","query","matches","setMatches","React","mediaQuery","handler","event"],"mappings":";AASO,SAASA,EAAcC,GAAwB;AACpD,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAM,SAAS,EAAK;AAElD,SAAAA,EAAM,UAAU,MAAM;AACpB,UAAMC,IAAa,OAAO,WAAWJ,CAAK;AAG1C,IAAAE,EAAWE,EAAW,OAAO;AAG7B,UAAMC,IAAU,CAACC,MAA+B;AAC9C,MAAAJ,EAAWI,EAAM,OAAO;AAAA,IAC1B;AAGA,WAAAF,EAAW,iBAAiB,UAAUC,CAAO,GAGtC,MAAMD,EAAW,oBAAoB,UAAUC,CAAO;AAAA,EAC/D,GAAG,CAACL,CAAK,CAAC,GAEHC;AACT;"}
+{"version":3,"file":"use_media_query.js","sources":["../../../src/utils/hooks/use_media_query.ts"],"sourcesContent":["import React from 'react';\n\n/**\n * Custom hook that returns a boolean indicating if the current viewport\n * matches the given media query.\n *\n * @param query - The media query to match against (e.g. \"(min-width: 768px)\")\n * @returns boolean indicating if the media query matches\n */\nexport function useMediaQuery(query: string): boolean {\n  const [matches, setMatches] = React.useState(false);\n\n  React.useEffect(() => {\n    const mediaQuery = window.matchMedia(query);\n\n    // Set initial value\n    setMatches(mediaQuery.matches);\n\n    // Create event listener\n    const handler = (event: MediaQueryListEvent) => {\n      setMatches(event.matches);\n    };\n\n    // Add the listener\n    mediaQuery.addEventListener('change', handler);\n\n    // Clean up\n    return () => mediaQuery.removeEventListener('change', handler);\n  }, [query]);\n\n  return matches;\n}\n"],"names":["useMediaQuery","query","matches","setMatches","React","mediaQuery","handler","event"],"mappings":";AASO,SAASA,EAAcC,GAAwB;AACpD,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAM,SAAS,EAAK;AAElDA,SAAAA,EAAM,UAAU,MAAM;AACpB,UAAMC,IAAa,OAAO,WAAWJ,CAAK;AAG1C,IAAAE,EAAWE,EAAW,OAAO;AAG7B,UAAMC,IAAU,CAACC,MAA+B;AAC9C,MAAAJ,EAAWI,EAAM,OAAO;AAAA,IAC1B;AAGA,WAAAF,EAAW,iBAAiB,UAAUC,CAAO,GAGtC,MAAMD,EAAW,oBAAoB,UAAUC,CAAO;AAAA,EAC/D,GAAG,CAACL,CAAK,CAAC,GAEHC;AACT;"}

package/dist/v_body.css

@@ -1 +1 @@
-._v-body_d8f1917{min-height:0;flex-grow:1;width:100%}
+@layer tcn-system{._v-body_d8f1917{min-height:0;flex-grow:1;width:100%}}

package/dist/window.css

@@ -1 +1 @@
-._window_7610fdb{position:relative;box-sizing:border-box}
+@layer tcn-system{:where(._window_7610fdb){position:relative;box-sizing:border-box}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "type": "module",
   "description": "",
   "author": "TCN",
@@ -134,8 +134,8 @@
   "dependencies": {
     "clsx": "^2.1.1",
     "react-color": "^2.19.3",
-    "@tcn/icons": "2.2.0",
-    "@tcn/state": "1.1.0"
+    "@tcn/icons": "2.2.1",
+    "@tcn/state": "1.1.1"
   },
   "scripts": {
     "build": "vite build",

package/src/actions/__docs__/actions.mdx

@@ -0,0 +1,194 @@
+import { Canvas, Meta, Markdown } from '@storybook/addon-docs/blocks';
+import * as ActionStories from './actions.stories';
+import { Showcase, Section } from './components/showcase';
+import { Gallery } from './components/gallery';
+
+<Meta title="Catalog/Actions" of={ActionStories} />
+
+# Actions
+
+Interactive elements that triggers an action, or event. For example submitting a form, closing a modal, or deleting an entity.
+
+- [Actions](#actions)
+  - [Button](#button)
+  - [Utility (Slim Button)](#utility)
+  - [Button Group](#button-group)
+
+## Button
+
+Relaxed, text based actions for high level page, or surface decisions (Cancel, Save, etc.)
+
+<Gallery minColumnWidth="350px">
+
+<Showcase
+  title="Baseline"
+  description="The default, out-of-the-box button with no additional props."
+  of={ActionStories.ButtonBaselineShowcase}
+  width="180px"
+/>
+
+<Showcase
+  title="Hierarchy"
+  description="Visually indicates the importance of an action and its relationship to other actions. A primary action should be limited to one per surface."
+  of={ActionStories.HierarchyShowcase}
+  width="380px"
+/>
+
+<Showcase
+  title="Size"
+  description="Used to customize the size of actions in relation to one another on a surface. Use sparingly, do not use as a replacement for hierarchy."
+  of={ActionStories.SizeShowcase}
+  width="320px"
+/>
+
+<Showcase
+  title="Disabled"
+  description="Prevents interaction and reduces visual prominence."
+  of={ActionStories.DisabledShowcase}
+  width="420px"
+/>
+
+<Showcase
+  title="With Icons"
+  description="Icons can be added to buttons with the use of Icon and Spacer components."
+  of={ActionStories.IconShowcase}
+  width="300px"
+/>
+
+<Showcase
+  title="Severity"
+  description="Visual indication of the severity of consequential, one-time actions."
+  of={ActionStories.SeverityShowcase}
+  width="300px"
+>
+  <Markdown>
+    {`
+**🚧 This concept is being actively developed.**
+
+Severity gives users a clear, visual indication of the impact and importance of an action. 
+
+Should be the primary exception of color variance in actions and generally replacing the need for using custom colors.
+
+Use sparingly for consequential, one-time actions such as:
+
+- Deleting an entity permanently - **dangerous**
+- Discarding the UIs current state or unsaved changes when leaving the page - **cautious**
+- Prompting a user to pick a preferred option out of multiple otherwise valid options - **suggested**
+- Client confirmation for important migration - **encouraged**
+`}
+  </Markdown>
+</Showcase>
+
+<Showcase
+  title="Custom Colors"
+  description="
+  Override accent color for heavily brand or product specific actions. 
+  Use sparingly, should be avoided to create cohesion and consistency between UIs."
+  of={ActionStories.ColorShowcase}
+  width="420px"
+/>
+
+<Showcase
+  title="Full Width"
+  description="Fill container width for mobile or prominent CTAs."
+  of={ActionStories.FullWidth}
+  width="340px"
+/>
+
+</Gallery>
+
+
+
+## Utility
+
+Compact, icon-based actions.  Used as re-usable tooling for item rows, utility bars, or supplemental behavior on elements (Close Panel, Copy Entity, ect)
+
+<Gallery>
+
+<Showcase
+  title="Baseline"
+  description="The default, out-of-the-box utility button with no additional props."
+  of={ActionStories.SlimButtonBaselineShowcase}
+  width="180px"
+/>
+
+<Showcase
+  title="Hierarchy"
+  description="Visually indicates the importance of an action and its relationship to other actions. A primary action should be limited to one per surface."
+  of={ActionStories.SlimButtonHierarchy}
+  width="240px"
+/>
+
+<Showcase
+  title="Size"
+  description="Used to customize the size of actions in relation to one another on a surface. Use sparingly, do not use as a replacement for hierarchy."
+  of={ActionStories.SlimButtonSizes}
+  width="220px"
+/>
+
+<Showcase
+  title="Disabled"
+  description="Prevents interaction and reduces visual prominence."
+  of={ActionStories.SlimButtonDisabled}
+  width="240px"
+/>
+
+<Showcase
+  title="Severity"
+  description="Visual indication of the severity of consequential, one-time actions."
+  of={ActionStories.SlimButtonSeverity}
+  width="140px"
+/>
+
+<Showcase
+  title="Custom Colors"
+  description="Override accent color for heavily brand or product specific actions. Use sparingly, should be avoided to create cohesion and consistency between UIs."
+  of={ActionStories.SlimButtonColors}
+  width="140px"
+/>
+
+</Gallery>
+
+## Button Group
+
+Visually grouped and styled buttons for closely related actions. The `hierarchy` and `size` props set on the ButtonGroup are automatically inherited by all child Button elements, ensuring visual consistency without needing to configure each button individually.
+
+<Gallery minColumnWidth="380px">
+
+<Showcase
+  title="Baseline"
+  description="The default, out-of-the-box button group with no additional props."
+  of={ActionStories.ButtonGroupBaselineShowcase}
+/>
+
+<Showcase
+  title="Hierarchy"
+  description="Set hierarchy on the parent ButtonGroup to style all child buttons uniformly. Individual buttons do not need hierarchy props—they inherit from the group."
+  of={ActionStories.ButtonGroupHierarchy}
+/>
+
+<Showcase
+  title="Size"
+  description="Set size on the parent ButtonGroup to control all child button sizes uniformly. Individual buttons inherit the group's size automatically."
+  of={ActionStories.ButtonGroupSizes}
+/>
+
+<Showcase
+  title="Disabled"
+  description="Individual buttons within a group can be disabled while others remain active."
+  of={ActionStories.ButtonGroupDisabled}
+/>
+
+<Showcase
+  title="Severity"
+  description="Severity can still be set on individual buttons within a group if a specific action should be elevated."
+  of={ActionStories.ButtonGroupSeverity}
+/>
+
+<Showcase
+  title="With Icons"
+  description="Buttons within groups can contain icons, either standalone or combined with text."
+  of={ActionStories.ButtonGroupWithIcons}
+/>
+
+</Gallery>