@tcn/ui 0.3.1 → 0.3.3

package/dist/typography/headline/headline.js

@@ -1,12 +1,12 @@
-import { jsx as p } from "react/jsx-runtime";
-import { clsx as c } from "clsx";
+import { jsx as g } from "react/jsx-runtime";
+import { clsx as p } from "clsx";
 import { s as u } from "../../headline.module-BiwHBtGf.js";
 function j({
-  size: e = "md",
+  size: n = "md",
   emphasis: o = "normal",
-  hierarchy: h = "primary",
-  color: n,
-  children: t,
+  hierarchy: t = "primary",
+  color: e,
+  children: h,
   className: s,
   style: i = {},
   padStart: r,
@@ -14,19 +14,19 @@ function j({
   padBottom: f,
   padTop: m,
   pad: l,
-  selectable: g = !0
+  selectable: c = !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), m && (i.paddingTop = m), f && (i.paddingBottom = f), n && (i.color = n), /* @__PURE__ */ p(
+  return n === "lg" ? a = "h1" : n === "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), e && (i.color = e), /* @__PURE__ */ g(
     a,
     {
-      "data-hierarchy": h,
+      "data-hierarchy": t,
       "data-emphasis": o,
-      "data-selectable": g,
-      className: c(u.headline, "headline", s),
+      "data-selectable": c,
+      className: p(u.headline, s, "tcn-headline"),
       style: i,
-      "data-size": e,
-      children: t
+      "data-size": n,
+      children: h
     }
   );
 }

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/css_utils.d.ts

@@ -0,0 +1,9 @@
+import { Rectangle } from './types/dimensions.js';
+export declare const convertRectangleToCssVariables: (componentName: string, stateName: string, rectangle?: Rectangle | null) => {
+    [x: string]: string;
+};
+export declare function useTrackActiveItemRectangle(isActive: boolean): {
+    ref: import('react').RefObject<HTMLElement>;
+    rectangle: Rectangle | null;
+};
+//# sourceMappingURL=css_utils.d.ts.map

package/dist/utils/css_utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css_utils.d.ts","sourceRoot":"","sources":["../../src/utils/css_utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGvD,eAAO,MAAM,8BAA8B,GACzC,eAAe,MAAM,EACrB,WAAW,MAAM,EACjB,YAAY,SAAS,GAAG,IAAI;;CAY7B,CAAC;AAiBF,wBAAgB,2BAA2B,CAAC,QAAQ,EAAE,OAAO;;;EA4B5D"}

package/dist/utils/css_utils.js

@@ -0,0 +1,45 @@
+import { useRef as c, useState as u, useLayoutEffect as p } from "react";
+const x = (e, i, t) => {
+  if (!t)
+    return {};
+  const n = `--${e}-${i}-rectangle-`;
+  return {
+    [`${n}position-x`]: t.position.x + "px",
+    [`${n}position-y`]: t.position.y + "px",
+    [`${n}width`]: t.dimensions.width + "px",
+    [`${n}height`]: t.dimensions.height + "px"
+  };
+};
+function d(e) {
+  return e ? {
+    dimensions: {
+      width: e.offsetWidth,
+      height: e.offsetHeight
+    },
+    position: {
+      x: e.offsetLeft,
+      y: e.offsetTop
+    }
+  } : null;
+}
+function a(e) {
+  const i = c(null), [t, n] = u(null);
+  return p(() => {
+    const o = i.current;
+    if (!o) return;
+    const s = () => {
+      const f = d(o);
+      e && f && n(f);
+    };
+    s();
+    const r = new ResizeObserver(s);
+    return r.observe(o), window.addEventListener("resize", s), () => {
+      r.disconnect(), window.removeEventListener("resize", s);
+    };
+  }, [e]), { ref: i, rectangle: t };
+}
+export {
+  x as convertRectangleToCssVariables,
+  a as useTrackActiveItemRectangle
+};
+//# sourceMappingURL=css_utils.js.map

package/dist/utils/css_utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css_utils.js","sources":["../../src/utils/css_utils.ts"],"sourcesContent":["import type { Rectangle } from './types/dimensions.js';\nimport { useLayoutEffect, useRef, useState } from 'react';\n\nexport const convertRectangleToCssVariables = (\n  componentName: string,\n  stateName: string,\n  rectangle?: Rectangle | null\n) => {\n  if (!rectangle) {\n    return {};\n  }\n  const prefix = `--${componentName}-${stateName}-rectangle-`;\n  return {\n    [`${prefix}position-x`]: rectangle.position.x + 'px',\n    [`${prefix}position-y`]: rectangle.position.y + 'px',\n    [`${prefix}width`]: rectangle.dimensions.width + 'px',\n    [`${prefix}height`]: rectangle.dimensions.height + 'px',\n  };\n};\n\nfunction getElementRect(element: HTMLElement | null): Rectangle | null {\n  if (!element) return null;\n\n  return {\n    dimensions: {\n      width: element.offsetWidth,\n      height: element.offsetHeight,\n    },\n    position: {\n      x: element.offsetLeft,\n      y: element.offsetTop,\n    },\n  };\n}\n\nexport function useTrackActiveItemRectangle(isActive: boolean) {\n  const ref = useRef<HTMLElement>(null);\n  const [rectangle, setRectangle] = useState<Rectangle | null>(null);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n\n    const update = () => {\n      const rect = getElementRect(element);\n      if (isActive && rect) {\n        setRectangle(rect);\n      }\n    };\n\n    update();\n\n    const resizeObserver = new ResizeObserver(update);\n    resizeObserver.observe(element);\n    window.addEventListener('resize', update);\n\n    return () => {\n      resizeObserver.disconnect();\n      window.removeEventListener('resize', update);\n    };\n  }, [isActive]);\n\n  return { ref, rectangle };\n}\n"],"names":["convertRectangleToCssVariables","componentName","stateName","rectangle","prefix","getElementRect","element","useTrackActiveItemRectangle","isActive","ref","useRef","setRectangle","useState","useLayoutEffect","update","rect","resizeObserver"],"mappings":";AAGO,MAAMA,IAAiC,CAC5CC,GACAC,GACAC,MACG;AACH,MAAI,CAACA;AACH,WAAO,CAAA;AAET,QAAMC,IAAS,KAAKH,CAAa,IAAIC,CAAS;AAC9C,SAAO;AAAA,IACL,CAAC,GAAGE,CAAM,YAAY,GAAGD,EAAU,SAAS,IAAI;AAAA,IAChD,CAAC,GAAGC,CAAM,YAAY,GAAGD,EAAU,SAAS,IAAI;AAAA,IAChD,CAAC,GAAGC,CAAM,OAAO,GAAGD,EAAU,WAAW,QAAQ;AAAA,IACjD,CAAC,GAAGC,CAAM,QAAQ,GAAGD,EAAU,WAAW,SAAS;AAAA,EAAA;AAEvD;AAEA,SAASE,EAAeC,GAA+C;AACrE,SAAKA,IAEE;AAAA,IACL,YAAY;AAAA,MACV,OAAOA,EAAQ;AAAA,MACf,QAAQA,EAAQ;AAAA,IAAA;AAAA,IAElB,UAAU;AAAA,MACR,GAAGA,EAAQ;AAAA,MACX,GAAGA,EAAQ;AAAA,IAAA;AAAA,EACb,IAVmB;AAYvB;AAEO,SAASC,EAA4BC,GAAmB;AAC7D,QAAMC,IAAMC,EAAoB,IAAI,GAC9B,CAACP,GAAWQ,CAAY,IAAIC,EAA2B,IAAI;AAEjE,SAAAC,EAAgB,MAAM;AACpB,UAAMP,IAAUG,EAAI;AACpB,QAAI,CAACH,EAAS;AAEd,UAAMQ,IAAS,MAAM;AACnB,YAAMC,IAAOV,EAAeC,CAAO;AACnC,MAAIE,KAAYO,KACdJ,EAAaI,CAAI;AAAA,IAErB;AAEA,IAAAD,EAAA;AAEA,UAAME,IAAiB,IAAI,eAAeF,CAAM;AAChD,WAAAE,EAAe,QAAQV,CAAO,GAC9B,OAAO,iBAAiB,UAAUQ,CAAM,GAEjC,MAAM;AACX,MAAAE,EAAe,WAAA,GACf,OAAO,oBAAoB,UAAUF,CAAM;AAAA,IAC7C;AAAA,EACF,GAAG,CAACN,CAAQ,CAAC,GAEN,EAAE,KAAAC,GAAK,WAAAN,EAAA;AAChB;"}

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.1",
+  "version": "0.3.3",
   "type": "module",
   "description": "",
   "author": "TCN",
@@ -71,6 +71,12 @@
       "import": "./dist/layouts/index.js",
       "default": "./dist/layouts/index.js"
     },
+    "./navigation": {
+      "@bc-monorepo/source": "./src/navigation/index.ts",
+      "types": "./dist/navigation/index.d.ts",
+      "import": "./dist/navigation/index.js",
+      "default": "./dist/navigation/index.js"
+    },
     "./overlay": {
       "@bc-monorepo/source": "./src/overlay/index.ts",
       "types": "./dist/overlay/index.d.ts",
@@ -132,10 +138,11 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
+    "@fontsource/lato": "^5.2.7",
     "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

@@ -7,14 +7,26 @@ import { Gallery } from './components/gallery';
 
 # Actions
 
-Interactive elements that trigger operations or set configuration for application tooling.
+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 decisions (Cancel, Save, etc.)
+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."
@@ -93,6 +105,13 @@ Compact, icon-based actions.  Used as re-usable tooling for item rows, utility b
 
 <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."
@@ -129,3 +148,47 @@ Compact, icon-based actions.  Used as re-usable tooling for item rows, utility b
 />
 
 </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>

package/src/actions/__docs__/actions.stories.tsx

@@ -4,6 +4,7 @@ import { VStack } from '../../stacks/v_stack.js';
 import { Spacer } from '../../stacks/spacer.js';
 import { Button } from '../button/button/button.js';
 import { SlimButton } from '../button/slim_button/slim_button.js';
+import { ButtonGroup } from '../button/button_group/button_group.js';
 import { SearchIcon } from '@tcn/icons/search_icon.js';
 import { PlusIcon } from '@tcn/icons/plus_icon.js';
 import { CrossIcon } from '@tcn/icons/cross_icon.js';
@@ -83,6 +84,18 @@ const severityOptions: { name: string; severity: ActionSeverity }[] = [
   },
 ];
 
+// ============================================================================
+// BASELINE
+// ============================================================================
+
+export const ButtonBaselineShowcase: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      <Button>Baseline</Button>
+    </HStack>
+  ),
+};
+
 // ============================================================================
 // HIERARCHY EXAMPLES
 // ============================================================================
@@ -220,8 +233,22 @@ export const FullWidth: Story = {
 
 export const SeverityShowcase: Story = {
   render: () => (
-    <HStack vAlign="center">
-      <VStack gap="12px" vAlign="center" width="200px">
+    <HStack vAlign="center" gap="12px">
+      <VStack gap="12px" vAlign="center" width="120px">
+        {severityOptions.map(({ name, severity }) => (
+          <Button key={name} hierarchy="tertiary" severity={severity} width="100%">
+            {name}
+          </Button>
+        ))}
+      </VStack>
+      <VStack gap="12px" vAlign="center" width="120px">
+        {severityOptions.map(({ name, severity }) => (
+          <Button key={name} hierarchy="secondary" severity={severity} width="100%">
+            {name}
+          </Button>
+        ))}
+      </VStack>
+      <VStack gap="12px" vAlign="center" width="120px">
         {severityOptions.map(({ name, severity }) => (
           <Button key={name} hierarchy="primary" severity={severity} width="100%">
             {name}
@@ -236,6 +263,16 @@ export const SeverityShowcase: Story = {
 // SLIM BUTTON EXAMPLES
 // ============================================================================
 
+export const SlimButtonBaselineShowcase: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      <SlimButton>
+        <SearchIcon />
+      </SlimButton>
+    </HStack>
+  ),
+};
+
 export const SlimButtonHierarchy: Story = {
   render: () => (
     <HStack gap="12px" vAlign="center">
@@ -307,3 +344,138 @@ export const SlimButtonSeverity: Story = {
     </HStack>
   ),
 };
+
+// ============================================================================
+// BUTTON GROUP EXAMPLES
+// ============================================================================
+
+export const ButtonGroupBaselineShowcase: Story = {
+  render: () => (
+    <HStack gap="12px" vAlign="center">
+      <ButtonGroup>
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button>Third</Button>
+      </ButtonGroup>
+    </HStack>
+  ),
+};
+
+export const ButtonGroupHierarchy: Story = {
+  render: () => (
+    <VStack gap="12px" hAlign="start">
+      <ButtonGroup hierarchy="tertiary">
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button>Third</Button>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="secondary">
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button>Third</Button>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="primary">
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button>Third</Button>
+      </ButtonGroup>
+    </VStack>
+  ),
+};
+
+export const ButtonGroupSeverity: Story = {
+  render: () => (
+    <VStack gap="12px" hAlign="start">
+      <ButtonGroup hierarchy="tertiary">
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button severity="dangerous">Dangerous</Button>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="secondary">
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button severity="cautious">Cautious</Button>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="tertiary">
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button severity="neutral">Neutral</Button>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="secondary">
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button severity="suggested">Suggested</Button>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="primary">
+        <Button>First</Button>
+        <Button>Second</Button>
+        <Button severity="encouraged">Encouraged</Button>
+      </ButtonGroup>
+    </VStack>
+  ),
+};
+
+export const ButtonGroupSizes: Story = {
+  render: () => (
+    <VStack gap="12px" hAlign="start">
+      <ButtonGroup size="sm">
+        <Button>Small</Button>
+        <Button>Group</Button>
+      </ButtonGroup>
+      <ButtonGroup size="md">
+        <Button>Medium</Button>
+        <Button>Group</Button>
+      </ButtonGroup>
+      <ButtonGroup size="lg">
+        <Button>Large</Button>
+        <Button>Group</Button>
+      </ButtonGroup>
+    </VStack>
+  ),
+};
+
+export const ButtonGroupDisabled: Story = {
+  render: () => (
+    <VStack gap="12px" hAlign="start">
+      <ButtonGroup hierarchy="tertiary">
+        <Button>Active</Button>
+        <Button disabled>Disabled</Button>
+        <Button>Active</Button>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="secondary">
+        <Button>Active</Button>
+        <Button disabled>Disabled</Button>
+        <Button>Active</Button>
+      </ButtonGroup>
+      <ButtonGroup hierarchy="primary">
+        <Button>Active</Button>
+        <Button disabled>Disabled</Button>
+        <Button>Active</Button>
+      </ButtonGroup>
+    </VStack>
+  ),
+};
+
+export const ButtonGroupWithIcons: Story = {
+  render: () => (
+    <VStack gap="12px" hAlign="start">
+      <ButtonGroup>
+        <Button>
+          First
+          <Spacer width="6px" />
+          <PlusIcon />
+        </Button>
+        <Button>
+          Second
+          <Spacer width="6px" />
+          <SearchIcon />
+        </Button>
+        <Button>
+          Third
+          <Spacer width="6px" />
+          <PlusIcon />
+        </Button>
+      </ButtonGroup>
+    </VStack>
+  ),
+};