@tcn/ui 0.0.3 → 0.0.4

package/dist/typography/callout/callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"callout.js","sources":["../../../src/typography/callout/callout.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport styles from './callout.module.css';\n\nexport interface CalloutOwnProps {\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 CalloutProps = WithDetailedHTMLProps<CalloutOwnProps, 'div'>;\n\nexport function Callout({\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}: CalloutProps) {\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    <div\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={classnames(styles['callout'], 'callout', className)}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["Callout","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","jsx","classnames","styles"],"mappings":";;;AAsBO,SAASA,EAAQ;AAAA,EACtB,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,GAAiB;AACf,SAAID,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,kBAAgBX;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWE,EAAWC,EAAO,SAAY,WAAWV,CAAS;AAAA,MAC7D,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"callout.js","sources":["../../../src/typography/callout/callout.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 './callout.module.css';\n\nexport interface CalloutOwnProps {\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 CalloutProps = WithDetailedHTMLProps<CalloutOwnProps, 'div'>;\n\nexport function Callout({\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}: CalloutProps) {\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    <div\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['callout'], 'callout', className)}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["Callout","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","jsx","clsx","styles"],"mappings":";;;AAsBO,SAASA,EAAQ;AAAA,EACtB,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,GAAiB;AACf,SAAID,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,kBAAgBX;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWE,EAAKC,EAAO,SAAY,WAAWV,CAAS;AAAA,MACvD,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/typography/caption/caption.js

@@ -1,35 +1,35 @@
 import { jsx as g } from "react/jsx-runtime";
-import h from "classnames";
+import { clsx as h } from "clsx";
 import { s as u } from "../../caption.module-DDq0H4xZ.js";
-function N({
+function b({
   size: f = "md",
   emphasis: t = "normal",
   hierarchy: p = "primary",
   color: a,
-  children: e,
-  className: s,
+  children: c,
+  className: e,
   style: i = {},
   padStart: n,
   padEnd: r,
-  padBottom: m,
-  padTop: o,
-  pad: d,
-  selectable: c = !0
+  padBottom: o,
+  padTop: d,
+  pad: m,
+  selectable: s = !0
 }) {
-  return d && (i.padding = d), n && (i.paddingInlineStart = n), r && (i.paddingInlineEnd = r), o && (i.paddingTop = o), m && (i.paddingBottom = m), a && (i.color = a), /* @__PURE__ */ g(
+  return m && (i.padding = m), n && (i.paddingInlineStart = n), r && (i.paddingInlineEnd = r), d && (i.paddingTop = d), o && (i.paddingBottom = o), a && (i.color = a), /* @__PURE__ */ g(
     "div",
     {
       "data-hierarchy": p,
       "data-emphasis": t,
-      "data-selectable": c,
-      className: h(u.caption, "caption", s),
+      "data-selectable": s,
+      className: h(u.caption, "caption", e),
       style: i,
       "data-size": f,
-      children: e
+      children: c
     }
   );
 }
 export {
-  N as Caption
+  b as Caption
 };
 //# sourceMappingURL=caption.js.map

package/dist/typography/caption/caption.js.map

@@ -1 +1 @@
-{"version":3,"file":"caption.js","sources":["../../../src/typography/caption/caption.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport styles from './caption.module.css';\n\nexport interface CaptionOwnProps {\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 CaptionProps = WithDetailedHTMLProps<CaptionOwnProps, 'div'>;\n\nexport function Caption({\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}: CaptionProps) {\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    <div\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={classnames(styles['caption'], 'caption', className)}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["Caption","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","jsx","classnames","styles"],"mappings":";;;AAsBO,SAASA,EAAQ;AAAA,EACtB,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,GAAiB;AACf,SAAID,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,kBAAgBX;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWE,EAAWC,EAAO,SAAY,WAAWV,CAAS;AAAA,MAC7D,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"caption.js","sources":["../../../src/typography/caption/caption.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 './caption.module.css';\n\nexport interface CaptionOwnProps {\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 CaptionProps = WithDetailedHTMLProps<CaptionOwnProps, 'div'>;\n\nexport function Caption({\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}: CaptionProps) {\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    <div\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['caption'], 'caption', className)}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["Caption","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","jsx","clsx","styles"],"mappings":";;;AAsBO,SAASA,EAAQ;AAAA,EACtB,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,GAAiB;AACf,SAAID,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,kBAAgBX;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWE,EAAKC,EAAO,SAAY,WAAWV,CAAS;AAAA,MACvD,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/typography/footnote/footnote.js

@@ -1,35 +1,35 @@
 import { jsx as g } from "react/jsx-runtime";
-import h from "classnames";
+import { clsx as h } from "clsx";
 import { s as u } from "../../footnote.module-DEyFuqOr.js";
-function N({
-  size: m = "md",
-  emphasis: d = "normal",
+function b({
+  size: d = "md",
+  emphasis: m = "normal",
   hierarchy: e = "primary",
-  color: a,
-  children: s,
-  className: p,
+  color: o,
+  children: p,
+  className: s,
   style: i = {},
-  padStart: o,
+  padStart: a,
   padEnd: n,
   padBottom: r,
   padTop: t,
   pad: f,
   selectable: c = !0
 }) {
-  return f && (i.padding = f), o && (i.paddingInlineStart = o), n && (i.paddingInlineEnd = n), t && (i.paddingTop = t), r && (i.paddingBottom = r), a && (i.color = a), /* @__PURE__ */ g(
+  return f && (i.padding = f), a && (i.paddingInlineStart = a), n && (i.paddingInlineEnd = n), t && (i.paddingTop = t), r && (i.paddingBottom = r), o && (i.color = o), /* @__PURE__ */ g(
     "div",
     {
       "data-hierarchy": e,
-      "data-emphasis": d,
+      "data-emphasis": m,
       "data-selectable": c,
-      className: h(u.footnote, "footnote", p),
+      className: h(u.footnote, "footnote", s),
       style: i,
-      "data-size": m,
-      children: s
+      "data-size": d,
+      children: p
     }
   );
 }
 export {
-  N as Footnote
+  b as Footnote
 };
 //# sourceMappingURL=footnote.js.map

package/dist/typography/footnote/footnote.js.map

@@ -1 +1 @@
-{"version":3,"file":"footnote.js","sources":["../../../src/typography/footnote/footnote.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport styles from './footnote.module.css';\n\nexport interface FootnoteOwnProps {\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 FootnoteProps = WithDetailedHTMLProps<FootnoteOwnProps, 'div'>;\n\nexport function Footnote({\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}: FootnoteProps) {\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    <div\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={classnames(styles['footnote'], 'footnote', className)}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["Footnote","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","jsx","classnames","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,SAAID,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,kBAAgBX;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWE,EAAWC,EAAO,UAAa,YAAYV,CAAS;AAAA,MAC/D,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"footnote.js","sources":["../../../src/typography/footnote/footnote.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 './footnote.module.css';\n\nexport interface FootnoteOwnProps {\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 FootnoteProps = WithDetailedHTMLProps<FootnoteOwnProps, 'div'>;\n\nexport function Footnote({\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}: FootnoteProps) {\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    <div\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['footnote'], 'footnote', className)}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["Footnote","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","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,SAAID,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,kBAAgBX;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWE,EAAKC,EAAO,UAAa,YAAYV,CAAS;AAAA,MACzD,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/typography/headline/headline.js

@@ -1,36 +1,36 @@
 import { jsx as p } from "react/jsx-runtime";
-import c from "classnames";
+import { clsx as c } from "clsx";
 import { s as u } from "../../headline.module-BiwHBtGf.js";
-function b({
+function j({
   size: e = "md",
   emphasis: o = "normal",
-  hierarchy: s = "primary",
+  hierarchy: h = "primary",
   color: n,
-  children: h,
-  className: t,
+  children: t,
+  className: s,
   style: i = {},
   padStart: r,
   padEnd: d,
-  padBottom: m,
-  padTop: f,
+  padBottom: f,
+  padTop: m,
   pad: l,
   selectable: g = !0
 }) {
   let a;
-  return e === "lg" ? a = "h1" : e === "md" ? a = "h2" : a = "h3", l && (i.padding = l), r && (i.paddingInlineStart = r), d && (i.paddingInlineEnd = d), f && (i.paddingTop = f), m && (i.paddingBottom = m), n && (i.color = n), /* @__PURE__ */ p(
+  return e === "lg" ? a = "h1" : e === "md" ? a = "h2" : a = "h3", l && (i.padding = l), r && (i.paddingInlineStart = r), d && (i.paddingInlineEnd = d), m && (i.paddingTop = m), f && (i.paddingBottom = f), n && (i.color = n), /* @__PURE__ */ p(
     a,
     {
-      "data-hierarchy": s,
+      "data-hierarchy": h,
       "data-emphasis": o,
       "data-selectable": g,
-      className: c(u.headline, "headline", t),
+      className: c(u.headline, "headline", s),
       style: i,
       "data-size": e,
-      children: h
+      children: t
     }
   );
 }
 export {
-  b as Headline
+  j as Headline
 };
 //# sourceMappingURL=headline.js.map

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 classnames from 'classnames';\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={classnames(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","classnames","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,EAAWC,EAAO,UAAa,YAAYX,CAAS;AAAA,MAC/D,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'], '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;"}

package/dist/typography/subheadline/subheadline.js

@@ -1,36 +1,36 @@
 import { jsx as p } from "react/jsx-runtime";
-import u from "classnames";
+import { clsx as u } from "clsx";
 import { s as c } from "../../subheadline.module-C-v7zMkQ.js";
-function N({
+function j({
   size: e = "md",
-  emphasis: h = "normal",
-  hierarchy: l = "primary",
+  emphasis: l = "normal",
+  hierarchy: o = "primary",
   color: n,
-  children: o,
+  children: s,
   className: t,
   style: i = {},
   padStart: r,
   padEnd: d,
-  padBottom: m,
-  padTop: f,
-  pad: s,
+  padBottom: f,
+  padTop: m,
+  pad: h,
   selectable: g = !0
 }) {
   let a;
-  return e === "lg" ? a = "h3" : e === "md" ? a = "h4" : a = "h5", s && (i.padding = s), r && (i.paddingInlineStart = r), d && (i.paddingInlineEnd = d), f && (i.paddingTop = f), m && (i.paddingBottom = m), n && (i.color = n), /* @__PURE__ */ p(
+  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(
     a,
     {
-      "data-hierarchy": l,
-      "data-emphasis": h,
+      "data-hierarchy": o,
+      "data-emphasis": l,
       "data-selectable": g,
       className: u(c.subheadline, "subheadline", t),
       style: i,
       "data-size": e,
-      children: o
+      children: s
     }
   );
 }
 export {
-  N as Subheadline
+  j as Subheadline
 };
 //# sourceMappingURL=subheadline.js.map

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 classnames from 'classnames';\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={classnames(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","classnames","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,EAAWC,EAAO,aAAgB,eAAeX,CAAS;AAAA,MACrE,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'], '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;"}

package/dist/typography/title/title.js

@@ -1,37 +1,37 @@
-import { jsx as p } from "react/jsx-runtime";
-import u from "classnames";
+import { jsx as s } from "react/jsx-runtime";
+import { clsx as u } from "clsx";
 import { s as x } from "../../title.module-B16de2jd.js";
-function j({
-  size: t = "md",
+function A({
+  size: a = "md",
   emphasis: o = "normal",
-  hierarchy: s = "primary",
-  color: e,
-  children: c,
-  className: g,
+  hierarchy: c = "primary",
+  color: n,
+  children: g,
+  className: h,
   style: i = {},
-  padStart: n,
-  padEnd: r,
+  padStart: r,
+  padEnd: e,
   padBottom: f,
-  padTop: m,
-  pad: l,
-  selectable: h = !0,
+  padTop: l,
+  pad: m,
+  selectable: p = !0,
   as: d
 }) {
-  let a = d;
-  return d == null && (t === "lg" ? a = "h1" : t === "md" ? a = "h2" : a = "h3"), l && (i.padding = l), n && (i.paddingInlineStart = n), r && (i.paddingInlineEnd = r), m && (i.paddingTop = m), f && (i.paddingBottom = f), e && (i.color = e), /* @__PURE__ */ p(
-    a,
+  let t = d;
+  return d == null && (a === "lg" ? t = "h1" : a === "md" ? t = "h2" : t = "h3"), m && (i.padding = m), r && (i.paddingInlineStart = r), e && (i.paddingInlineEnd = e), l && (i.paddingTop = l), f && (i.paddingBottom = f), n && (i.color = n), /* @__PURE__ */ s(
+    t,
     {
-      "data-hierarchy": s,
+      "data-hierarchy": c,
       "data-emphasis": o,
-      "data-selectable": h,
-      className: u(x.title, "title", "tcn-title", g),
+      "data-selectable": p,
+      className: u(x.title, "title", "tcn-title", h),
       style: i,
-      "data-size": t,
-      children: c
+      "data-size": a,
+      children: g
     }
   );
 }
 export {
-  j as Title
+  A as Title
 };
 //# sourceMappingURL=title.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"title.js","sources":["../../../src/typography/title/title.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\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 function Title({\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}: TitleProps) {\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      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={classnames(styles['title'], 'title', 'tcn-title', className)}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </As>\n  );\n}\n"],"names":["Title","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","as","As","jsx","classnames","styles"],"mappings":";;;AAuBO,SAASA,EAAM;AAAA,EACpB,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,GAAe;AACb,MAAIC,IAAwBD;AAE5B,SAAIA,KAAM,SACJb,MAAS,OACXc,IAAK,OACId,MAAS,OAClBc,IAAK,OAELA,IAAK,OAILH,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAY;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,kBAAgBZ;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWI,EAAWC,EAAO,OAAU,SAAS,aAAaZ,CAAS;AAAA,MACtE,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"title.js","sources":["../../../src/typography/title/title.tsx"],"sourcesContent":["import React 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 function Title({\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}: TitleProps) {\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      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['title'], 'title', 'tcn-title', className)}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </As>\n  );\n}\n"],"names":["Title","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","as","As","jsx","clsx","styles"],"mappings":";;;AAuBO,SAASA,EAAM;AAAA,EACpB,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,GAAe;AACb,MAAIC,IAAwBD;AAE5B,SAAIA,KAAM,SACJb,MAAS,OACXc,IAAK,OACId,MAAS,OAClBc,IAAK,OAELA,IAAK,OAILH,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAY;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,kBAAgBZ;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWI,EAAKC,EAAO,OAAU,SAAS,aAAaZ,CAAS;AAAA,MAChE,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "description": "",
   "author": "TCN",
@@ -9,6 +9,13 @@
     "access": "public"
   },
   "access": "public",
+  "blackcatConfig": {
+    "storybook": {
+      "publish": true,
+      "title": "UI",
+      "port": 6200
+    }
+  },
   "files": [
     "dist",
     "src",
@@ -82,6 +89,18 @@
       "import": "./dist/themes/index.js",
       "default": "./dist/themes/index.js"
     },
+    "./themes/windows98": {
+      "@bc-monorepo/source": "./src/themes/themes/windows_98/windows_98_theme.ts",
+      "types": "./dist/themes/themes/windows_98/windows_98_theme.d.ts",
+      "import": "./dist/themes/themes/windows_98/windows_98_theme.js",
+      "default": "./dist/themes/themes/windows_98/windows_98_theme.js"
+    },
+    "./themes/ergo": {
+      "@bc-monorepo/source": "./src/themes/themes/ergo/ergo_theme.ts",
+      "types": "./dist/themes/themes/ergo/ergo_theme.d.ts",
+      "import": "./dist/themes/themes/ergo/ergo_theme.js",
+      "default": "./dist/themes/themes/ergo/ergo_theme.js"
+    },
     "./tokens": {
       "@bc-monorepo/source": "./src/tokens/index.ts",
       "types": "./dist/tokens/index.d.ts",
@@ -107,7 +126,7 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
     "react-color": "^2.19.3",
     "@tcn/state": "1.0.0",
     "@tcn/icons": "2.1.0"

package/src/actions/button/__stories__/button.stories.tsx

@@ -6,7 +6,7 @@ import { Spacer } from '../../../stacks/spacer.js';
 import { Button, ButtonProps } from '../button/button.js';
 
 const meta: Meta<ButtonProps> = {
-  title: 'Components/Button/Button',
+  title: 'Actions/Button',
   component: Button,
   tags: ['autodocs'],
   args: {

package/src/actions/button/__stories__/button_group.stories.tsx

@@ -6,7 +6,7 @@ import { Button } from '../button/button.js';
 import { ButtonGroup } from '../button_group/button_group.js';
 
 export default {
-  title: 'Components/Button/Button Group',
+  title: 'Actions/Button Group',
   component: ButtonGroup,
   tags: ['autodocs'],
 };

package/src/actions/button/__stories__/select_group.stories.tsx

@@ -6,7 +6,7 @@ import { SelectGroup } from '../select_group/select_group.js';
 import { SingleSelectGroup } from '../select_group/single_select_group.js';
 
 export default {
-  title: 'Components/Button/Select Group',
+  title: 'Actions/Select Group',
   component: SelectGroup,
   tags: ['autodocs'],
   argTypes: {

package/src/actions/button/__stories__/slim_button.stories.tsx

@@ -8,7 +8,7 @@ import { ButtonProps } from '../button/button.js';
 import { SlimButton } from '../slim_button/slim_button.js';
 
 const meta: Meta<ButtonProps> = {
-  title: 'Components/Button/Slim Button',
+  title: 'Actions/Slim Button',
   component: SlimButton,
   tags: ['autodocs'],
   args: {

package/src/actions/button/base_button/base_button.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { Hierarchy, Size } from '../../../utils/index.js';
 import { HStack } from '../../../stacks/h_stack.js';
 import type { HStackOwnProps } from '../../../stacks/h_stack.js';
@@ -68,7 +68,7 @@ export const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(
         data-hierarchy={hierarchy}
         data-size={size}
         data-is-disabled={Boolean(props.disabled)}
-        className={classNames(styles['base-button'], 'base-button', className)}
+        className={clsx(styles['base-button'], 'base-button', className)}
         style={finalStyle}
         onTouchStart={handleTouchStart}
         onContextMenu={handleContextMenu}

package/src/actions/button/button/button.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import cln from 'classnames';
+import { clsx } from 'clsx';
 import { BaseButton, type BaseButtonProps } from '../base_button/base_button.js';
 import styles from './button.module.css';
 
@@ -12,11 +12,11 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function
   return (
     <BaseButton
       ref={ref}
-      className={cln(styles.button, 'button', 'tcn-button', className)}
+      className={clsx(styles.button, 'button', 'tcn-button', className)}
       {...props}
     >
       {typeof children === 'string' ? (
-        <span className={cln(styles['button-text'], 'button-text', 'tcn-button-text')}>
+        <span className={clsx(styles['button-text'], 'button-text', 'tcn-button-text')}>
           {children}
         </span>
       ) : (

package/src/actions/button/button_group/button_group.tsx

@@ -1,7 +1,7 @@
 import type { Hierarchy, Size } from '../../../utils/index.js';
 import { HStack } from '../../../stacks/h_stack.js';
 import type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import { Button, ButtonProps } from '../button/button.js';
 import styles from './button_group.module.css';
@@ -32,7 +32,7 @@ export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
         height="auto"
         data-hierarchy={hierarchy}
         data-size={size}
-        className={classNames(styles['button-group'], 'button-group', className)}
+        className={clsx(styles['button-group'], 'button-group', className)}
         {...props}
       >
         {buttons.map((button, i) => {
@@ -42,7 +42,7 @@ export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
             <React.Fragment key={i}>
               <Button
                 {...button.props}
-                className={classNames(
+                className={clsx(
                   styles['button-group-button'],
                   'button-group-button',
                   button.props.className
@@ -52,10 +52,7 @@ export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
               />
               {!isLast && (
                 <div
-                  className={classNames(
-                    styles['button-group-divider'],
-                    'button-group-divider'
-                  )}
+                  className={clsx(styles['button-group-divider'], 'button-group-divider')}
                   data-hierarchy={hierarchy}
                   data-size={size}
                 />

package/src/actions/button/select_group/select_group.tsx

@@ -1,6 +1,6 @@
 import { HStack } from '../../../stacks/h_stack.js';
 import type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import { Button } from '../button/button.js';
 import styles from './select_group.module.css';
@@ -49,7 +49,7 @@ export const SelectGroup = React.forwardRef(function ButtonGroup(
       width="auto"
       height="auto"
       data-is-disabled={disabled}
-      className={classNames(styles['select-group'], 'select-group', className)}
+      className={clsx(styles['select-group'], 'select-group', className)}
       {...props}
     >
       {options.map((option, i) => {
@@ -63,7 +63,7 @@ export const SelectGroup = React.forwardRef(function ButtonGroup(
             <Button
               disabled={disabled || option.props.disabled}
               data-is-disabled={disabled || option.props.disabled}
-              className={classNames(styles['select-group-option'], 'select-group-option')}
+              className={clsx(styles['select-group-option'], 'select-group-option')}
               hierarchy={isSelected ? 'primary' : 'secondary'}
               onClick={select}
               value={option.props.value}

package/src/actions/button/slim_button/slim_button.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import classNames from 'classnames';
 import { Button, ButtonProps } from '../button/button.js';
+import { clsx } from 'clsx';
+// Styles
 import styles from './slim_button.module.css';
 
 export const SlimButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -8,7 +9,7 @@ export const SlimButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <Button
         ref={ref}
-        className={classNames(styles['slim-button'], 'slim-button', className)}
+        className={clsx(styles['slim-button'], 'slim-button', className)}
         {...props}
       >
         {children}

package/src/feedback/lazy/lazy.stories.tsx

@@ -4,7 +4,7 @@ import { HStack } from '../../stacks/h_stack.js';
 import { Runner } from '@tcn/state';
 
 export default {
-  title: 'lazy',
+  title: 'Feedback/Lazy',
 };
 
 const delay = (ms: number) => new Promise(resolve => window.setTimeout(resolve, ms));

package/src/feedback/loading/__storybook__/loading.stories.tsx

@@ -7,7 +7,7 @@ import styles from '../../storybook.module.css';
 import customStyles from './storybook_custom_lines.module.css';
 
 export default {
-  title: 'Loading',
+  title: 'Feedback/Loading',
 };
 
 function Base(props: LoadingProps) {

package/src/feedback/progress/progress_bar.stories.tsx

@@ -3,7 +3,7 @@ import { ProgressBar as Component, ProgressBarProps } from './progress_bar.js';
 import styles from '../storybook.module.css';
 
 export default {
-  title: 'Progress Bar',
+  title: 'Feedback/Progress Bar',
 };
 
 function Base(props: Partial<ProgressBarProps>) {

package/src/form/field/common/field_control/field_control.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { VStack } from '../../../../stacks/v_stack.js';
 import type { VStackOwnProps } from '../../../../stacks/v_stack.js';
 import type { WithDetailedHTMLProps } from '../../../../stacks/types/as.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import styles from './field_control.module.css';
 import { FieldErrorMessage } from '../field_error.js';
 
@@ -38,7 +38,7 @@ export const FieldControl = React.forwardRef(function FieldControl(
       data-locked={locked}
       data-loading={loading}
       data-error={hasError}
-      className={classNames(styles['field-control'], 'field-control', className)}
+      className={clsx(styles['field-control'], 'field-control', className)}
       height="auto"
       width="flex"
       hAlign="end"