@altimateai/ui-components 0.0.77-beta.4 → 0.0.77-beta.5

package/dist/stateDiagram-FKZM4ZOC.js

@@ -1,15 +1,15 @@
-import { s as R, S as N, a as W } from "./chunk-DI55MBZ5.js";
-import { a1 as f, a7 as t, ad as S, ae as P, a9 as z, aJ as U, aK as _, aE as C, am as F } from "./CoachForm.js";
+import { s as G, S as N, a as W } from "./chunk-DI55MBZ5.js";
+import { _ as f, d as t, l as S, j as P, e as z, Q as _, R as U, M as C, u as F } from "./CoachForm.js";
 import { s as H } from "./redux-toolkit.modern.js";
-import { G as J } from "./graph.js";
-import { l as O } from "./layout.js";
+import { G as O } from "./graph.js";
+import { l as J } from "./layout.js";
 var X = /* @__PURE__ */ f((e) => e.append("circle").attr("class", "start-state").attr("r", t().state.sizeUnit).attr("cx", t().state.padding + t().state.sizeUnit).attr("cy", t().state.padding + t().state.sizeUnit), "drawStartState"), D = /* @__PURE__ */ f((e) => e.append("line").style("stroke", "grey").style("stroke-dasharray", "3").attr("x1", t().state.textHeight).attr("class", "divider").attr("x2", t().state.textHeight * 2).attr("y1", 0).attr("y2", 0), "drawDivider"), Y = /* @__PURE__ */ f((e, i) => {
   const d = e.append("text").attr("x", 2 * t().state.padding).attr("y", t().state.textHeight + 2 * t().state.padding).attr("font-size", t().state.fontSize).attr("class", "state-title").text(i.id), c = d.node().getBBox();
   return e.insert("rect", ":first-child").attr("x", t().state.padding).attr("y", t().state.padding).attr("width", c.width + 2 * t().state.padding).attr("height", c.height + 2 * t().state.padding).attr("rx", t().state.radius), d;
 }, "drawSimpleState"), I = /* @__PURE__ */ f((e, i) => {
   const d = /* @__PURE__ */ f(function(g, B, m) {
-    const v = g.append("tspan").attr("x", 2 * t().state.padding).text(B);
-    m || v.attr("dy", t().state.textHeight);
+    const E = g.append("tspan").attr("x", 2 * t().state.padding).text(B);
+    m || E.attr("dy", t().state.textHeight);
   }, "addTspan"), n = e.append("text").attr("x", 2 * t().state.padding).attr("y", t().state.textHeight + 1.3 * t().state.padding).attr("font-size", t().state.fontSize).attr("class", "state-title").text(i.descriptions[0]).node().getBBox(), l = n.height, x = e.append("text").attr("x", t().state.padding).attr(
     "y",
     l + t().state.padding * 0.4 + t().state.dividerMargin + t().state.textHeight
@@ -38,20 +38,20 @@ var X = /* @__PURE__ */ f((e) => e.append("circle").attr("class", "start-state")
     "y",
     t().state.titleShift - t().state.textHeight - t().state.padding
   ).attr("width", o).attr("height", B.height + 3 + 2 * t().state.textHeight).attr("rx", t().state.radius), e;
-}, "addTitleAndBox"), q = /* @__PURE__ */ f((e) => (e.append("circle").attr("class", "end-state-outer").attr("r", t().state.sizeUnit + t().state.miniPadding).attr(
+}, "addTitleAndBox"), j = /* @__PURE__ */ f((e) => (e.append("circle").attr("class", "end-state-outer").attr("r", t().state.sizeUnit + t().state.miniPadding).attr(
   "cx",
   t().state.padding + t().state.sizeUnit + t().state.miniPadding
 ).attr(
   "cy",
   t().state.padding + t().state.sizeUnit + t().state.miniPadding
-), e.append("circle").attr("class", "end-state-inner").attr("r", t().state.sizeUnit).attr("cx", t().state.padding + t().state.sizeUnit + 2).attr("cy", t().state.padding + t().state.sizeUnit + 2)), "drawEndState"), K = /* @__PURE__ */ f((e, i) => {
+), e.append("circle").attr("class", "end-state-inner").attr("r", t().state.sizeUnit).attr("cx", t().state.padding + t().state.sizeUnit + 2).attr("cy", t().state.padding + t().state.sizeUnit + 2)), "drawEndState"), q = /* @__PURE__ */ f((e, i) => {
   let d = t().state.forkWidth, c = t().state.forkHeight;
   if (i.parentId) {
     let n = d;
     d = c, c = n;
   }
   return e.append("rect").style("stroke", "black").style("fill", "black").attr("width", d).attr("height", c).attr("x", t().state.padding).attr("y", t().state.padding);
-}, "drawForkJoinState"), Z = /* @__PURE__ */ f((e, i, d, c) => {
+}, "drawForkJoinState"), Q = /* @__PURE__ */ f((e, i, d, c) => {
   let n = 0;
   const l = c.append("text");
   l.style("text-anchor", "start"), l.attr("class", "noteText");
@@ -71,9 +71,9 @@ var X = /* @__PURE__ */ f((e) => e.append("circle").attr("class", "start-state")
     }
   }
   return { textWidth: l.node().getBBox().width, textHeight: n };
-}, "_drawLongText"), j = /* @__PURE__ */ f((e, i) => {
+}, "_drawLongText"), Z = /* @__PURE__ */ f((e, i) => {
   i.attr("class", "state-note");
-  const d = i.append("rect").attr("x", 0).attr("y", t().state.padding), c = i.append("g"), { textWidth: n, textHeight: l } = Z(e, 0, 0, c);
+  const d = i.append("rect").attr("x", 0).attr("y", t().state.padding), c = i.append("g"), { textWidth: n, textHeight: l } = Q(e, 0, 0, c);
   return d.attr("height", l + 2 * t().state.noteMargin), d.attr("width", n + t().state.noteMargin * 2), d;
 }, "drawNote"), L = /* @__PURE__ */ f(function(e, i) {
   const d = i.id, c = {
@@ -82,10 +82,10 @@ var X = /* @__PURE__ */ f((e) => e.append("circle").attr("class", "start-state")
     width: 0,
     height: 0
   }, n = e.append("g").attr("id", d).attr("class", "stateGroup");
-  i.type === "start" && X(n), i.type === "end" && q(n), (i.type === "fork" || i.type === "join") && K(n, i), i.type === "note" && j(i.note.text, n), i.type === "divider" && D(n), i.type === "default" && i.descriptions.length === 0 && Y(n, i), i.type === "default" && i.descriptions.length > 0 && I(n, i);
+  i.type === "start" && X(n), i.type === "end" && j(n), (i.type === "fork" || i.type === "join") && q(n, i), i.type === "note" && Z(i.note.text, n), i.type === "divider" && D(n), i.type === "default" && i.descriptions.length === 0 && Y(n, i), i.type === "default" && i.descriptions.length > 0 && I(n, i);
   const l = n.node().getBBox();
   return c.width = l.width + 2 * t().state.padding, c.height = l.height + 2 * t().state.padding, c;
-}, "drawState"), A = 0, Q = /* @__PURE__ */ f(function(e, i, d) {
+}, "drawState"), R = 0, K = /* @__PURE__ */ f(function(e, i, d) {
   const c = /* @__PURE__ */ f(function(s) {
     switch (s) {
       case N.relationType.AGGREGATION:
@@ -99,11 +99,11 @@ var X = /* @__PURE__ */ f((e) => e.append("circle").attr("class", "start-state")
     }
   }, "getRelationType");
   i.points = i.points.filter((s) => !Number.isNaN(s.y));
-  const n = i.points, l = U().x(function(s) {
+  const n = i.points, l = _().x(function(s) {
     return s.x;
   }).y(function(s) {
     return s.y;
-  }).curve(_), x = e.append("path").attr("d", l(n)).attr("id", "edge" + A).attr("class", "transition");
+  }).curve(U), x = e.append("path").attr("d", l(n)).attr("id", "edge" + R).attr("class", "transition");
   let a = "";
   if (t().state.arrowMarkerAbsolute && (a = C(!0)), x.attr(
     "marker-end",
@@ -112,10 +112,10 @@ var X = /* @__PURE__ */ f((e) => e.append("circle").attr("class", "start-state")
     const s = e.append("g").attr("class", "stateLabel"), { x: w, y: p } = F.calcLabelPosition(i.points), o = z.getRows(d.title);
     let g = 0;
     const B = [];
-    let m = 0, v = 0;
+    let m = 0, E = 0;
     for (let u = 0; u <= o.length; u++) {
       const h = s.append("text").attr("text-anchor", "middle").text(o[u]).attr("x", w).attr("y", p + g), y = h.node().getBBox();
-      m = Math.max(m, y.width), v = Math.min(v, y.x), S.info(y.x, w, p + g), g === 0 && (g = h.node().getBBox().height, S.info("Title height", g, p)), B.push(h);
+      m = Math.max(m, y.width), E = Math.min(E, y.x), S.info(y.x, w, p + g), g === 0 && (g = h.node().getBBox().height, S.info("Title height", g, p)), B.push(h);
     }
     let k = g * o.length;
     if (o.length > 1) {
@@ -125,7 +125,7 @@ var X = /* @__PURE__ */ f((e) => e.append("circle").attr("class", "start-state")
     const r = s.node().getBBox();
     s.insert("rect", ":first-child").attr("class", "box").attr("x", w - m / 2 - t().state.padding / 2).attr("y", p - k / 2 - t().state.padding / 2 - 3.5).attr("width", m + t().state.padding).attr("height", k + t().state.padding), S.info(r);
   }
-  A++;
+  R++;
 }, "drawEdge"), b, T = {}, V = /* @__PURE__ */ f(function() {
 }, "setConf"), tt = /* @__PURE__ */ f(function(e) {
   e.append("defs").append("marker").attr("id", "dependencyEnd").attr("refX", 19).attr("refY", 7).attr("markerWidth", 20).attr("markerHeight", 28).attr("orient", "auto").append("path").attr("d", "M 19,7 L9,13 L14,7 L9,1 Z");
@@ -139,14 +139,14 @@ var X = /* @__PURE__ */ f((e) => e.append("circle").attr("class", "start-state")
   const s = x.select(`[id='${i}']`);
   tt(s);
   const w = c.db.getRootDoc();
-  G(w, s, void 0, !1, x, a, c);
+  A(w, s, void 0, !1, x, a, c);
   const p = b.padding, o = s.node().getBBox(), g = o.width + p * 2, B = o.height + p * 2, m = g * 1.75;
   P(s, B, m, b.useMaxWidth), s.attr(
     "viewBox",
     `${o.x - b.padding}  ${o.y - b.padding} ` + g + " " + B
   );
-}, "draw"), at = /* @__PURE__ */ f((e) => e ? e.length * b.fontSizeFactor : 1, "getLabelWidth"), G = /* @__PURE__ */ f((e, i, d, c, n, l, x) => {
-  const a = new J({
+}, "draw"), at = /* @__PURE__ */ f((e) => e ? e.length * b.fontSizeFactor : 1, "getLabelWidth"), A = /* @__PURE__ */ f((e, i, d, c, n, l, x) => {
+  const a = new O({
     compound: !0,
     multigraph: !0
   });
@@ -189,11 +189,11 @@ var X = /* @__PURE__ */ f((e) => e.append("circle").attr("class", "start-state")
     let h;
     if (u.doc) {
       let y = i.append("g").attr("id", u.id).attr("class", "stateGroup");
-      h = G(u.doc, y, u.id, !c, n, l, x);
+      h = A(u.doc, y, u.id, !c, n, l, x);
       {
         y = $(y, u, c);
-        let E = y.node().getBBox();
-        h.width = E.width, h.height = E.height + b.padding / 2, T[u.id] = { y: b.compositTitleSize };
+        let v = y.node().getBBox();
+        h.width = v.width, h.height = v.height + b.padding / 2, T[u.id] = { y: b.compositTitleSize };
       }
     } else
       h = L(i, u, a);
@@ -203,8 +203,8 @@ var X = /* @__PURE__ */ f((e) => e.append("circle").attr("class", "start-state")
         id: u.id + "-note",
         note: u.note,
         type: "note"
-      }, E = L(i, y, a);
-      u.note.position === "left of" ? (a.setNode(h.id + "-note", E), a.setNode(h.id, h)) : (a.setNode(h.id, h), a.setNode(h.id + "-note", E)), a.setParent(h.id, h.id + "-group"), a.setParent(h.id + "-note", h.id + "-group");
+      }, v = L(i, y, a);
+      u.note.position === "left of" ? (a.setNode(h.id + "-note", v), a.setNode(h.id, h)) : (a.setNode(h.id, h), a.setNode(h.id + "-note", v)), a.setParent(h.id, h.id + "-group"), a.setParent(h.id + "-note", h.id + "-group");
     } else
       a.setNode(h.id, h);
   }
@@ -222,7 +222,7 @@ var X = /* @__PURE__ */ f((e) => e.append("circle").attr("class", "start-state")
       },
       "id" + B
     );
-  }), O(a), S.debug("Graph after layout", a.nodes());
+  }), J(a), S.debug("Graph after layout", a.nodes());
   const m = i.node();
   a.nodes().forEach(function(r) {
     r !== void 0 && a.node(r) !== void 0 ? (S.warn("Node " + r + ": " + JSON.stringify(a.node(r))), n.select("#" + m.id + " #" + r).attr(
@@ -230,26 +230,26 @@ var X = /* @__PURE__ */ f((e) => e.append("circle").attr("class", "start-state")
       "translate(" + (a.node(r).x - a.node(r).width / 2) + "," + (a.node(r).y + (T[r] ? T[r].y : 0) - a.node(r).height / 2) + " )"
     ), n.select("#" + m.id + " #" + r).attr("data-x-shift", a.node(r).x - a.node(r).width / 2), l.querySelectorAll("#" + m.id + " #" + r + " .divider").forEach((h) => {
       const y = h.parentElement;
-      let E = 0, M = 0;
-      y && (y.parentElement && (E = y.parentElement.getBBox().width), M = parseInt(y.getAttribute("data-x-shift"), 10), Number.isNaN(M) && (M = 0)), h.setAttribute("x1", 0 - M + 8), h.setAttribute("x2", E - M - 8);
+      let v = 0, M = 0;
+      y && (y.parentElement && (v = y.parentElement.getBBox().width), M = parseInt(y.getAttribute("data-x-shift"), 10), Number.isNaN(M) && (M = 0)), h.setAttribute("x1", 0 - M + 8), h.setAttribute("x2", v - M - 8);
     })) : S.debug("No Node " + r + ": " + JSON.stringify(a.node(r)));
   });
-  let v = m.getBBox();
+  let E = m.getBBox();
   a.edges().forEach(function(r) {
-    r !== void 0 && a.edge(r) !== void 0 && (S.debug("Edge " + r.v + " -> " + r.w + ": " + JSON.stringify(a.edge(r))), Q(i, a.edge(r), a.edge(r).relation));
-  }), v = m.getBBox();
+    r !== void 0 && a.edge(r) !== void 0 && (S.debug("Edge " + r.v + " -> " + r.w + ": " + JSON.stringify(a.edge(r))), K(i, a.edge(r), a.edge(r).relation));
+  }), E = m.getBBox();
   const k = {
     id: d || "root",
     label: d || "root",
     width: 0,
     height: 0
   };
-  return k.width = v.width + 2 * b.padding, k.height = v.height + 2 * b.padding, S.debug("Doc rendered", k, a), k;
+  return k.width = E.width + 2 * b.padding, k.height = E.height + 2 * b.padding, S.debug("Doc rendered", k, a), k;
 }, "renderDoc"), it = {
   setConf: V,
   draw: et
 }, ct = {
-  parser: R,
+  parser: G,
   get db() {
     return new N(1);
   },

package/dist/stateDiagram-v2-4FDKWEC3.js

@@ -1,10 +1,10 @@
-import { s as a, S as t, b as r, a as s } from "./chunk-DI55MBZ5.js";
-import { a1 as i } from "./CoachForm.js";
+import { s as t, S as a, b as r, a as s } from "./chunk-DI55MBZ5.js";
+import { _ as i } from "./CoachForm.js";
 import "./redux-toolkit.modern.js";
-var l = {
-  parser: a,
+var _ = {
+  parser: t,
   get db() {
-    return new t(2);
+    return new a(2);
   },
   renderer: r,
   styles: s,
@@ -13,5 +13,5 @@ var l = {
   }, "init")
 };
 export {
-  l as diagram
+  _ as diagram
 };

package/dist/storybook/Typography.stories.tsx

@@ -15,13 +15,22 @@ type Story = StoryObj<typeof meta>;
 export const Typography: Story = {
   args: {
     variant: "h1",
-    weight: "semibold",
+    weight: "regular",
+    size: "md",
     children: "Heading 1",
   },
   render: () => (
     <div className="space-y-8">
-      {/* Heading 1 Variations - Only Medium & Semibold */}
+      {/* Heading 1 Variations */}
       <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
+        <Component variant="h1" weight="light">
+          Heading 1
+          <br /> Light
+        </Component>
+        <Component variant="h1" weight="regular">
+          Heading 1
+          <br /> Regular
+        </Component>
         <Component variant="h1" weight="medium">
           Heading 1 <br />
           Medium
@@ -30,13 +39,25 @@ export const Typography: Story = {
           Heading 1 <br />
           Semibold
         </Component>
+        <Component variant="h1" weight="bold">
+          Heading 1 <br />
+          Bold
+        </Component>
         <Component variant="caption" className="text-gray-500">
-          30px / Line height: 38px
+          32px / Line height: 32px
         </Component>
       </div>
 
-      {/* Heading 2 Variations - Only Medium & Semibold */}
+      {/* Heading 2 Variations */}
       <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
+        <Component variant="h2" weight="light">
+          Heading 2 <br />
+          Light
+        </Component>
+        <Component variant="h2" weight="regular">
+          Heading 2 <br />
+          Regular
+        </Component>
         <Component variant="h2" weight="medium">
           Heading 2 <br />
           Medium
@@ -45,13 +66,25 @@ export const Typography: Story = {
           Heading 2 <br />
           Semibold
         </Component>
+        <Component variant="h2" weight="bold">
+          Heading 2 <br />
+          Bold
+        </Component>
         <Component variant="caption" className="text-gray-500">
           24px / Line height: 32px
         </Component>
       </div>
 
-      {/* Heading 3 Variations - Only Medium & Semibold */}
+      {/* Heading 3 Variations */}
       <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
+        <Component variant="h3" weight="light">
+          Heading 3 <br />
+          Light
+        </Component>
+        <Component variant="h3" weight="regular">
+          Heading 3 <br />
+          Regular
+        </Component>
         <Component variant="h3" weight="medium">
           Heading 3 <br />
           Medium
@@ -60,13 +93,25 @@ export const Typography: Story = {
           Heading 3 <br />
           Semibold
         </Component>
+        <Component variant="h3" weight="bold">
+          Heading 3 <br />
+          Bold
+        </Component>
         <Component variant="caption" className="text-gray-500">
-          20px / Line height: 24px
+          18px / Line height: 26px
         </Component>
       </div>
 
-      {/* Heading 4 Variations - Only Medium & Semibold */}
+      {/* Heading 4 Variations */}
       <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
+        <Component variant="h4" weight="light">
+          Heading 4 <br />
+          Light
+        </Component>
+        <Component variant="h4" weight="regular">
+          Heading 4 <br />
+          Regular
+        </Component>
         <Component variant="h4" weight="medium">
           Heading 4 <br />
           Medium
@@ -75,13 +120,25 @@ export const Typography: Story = {
           Heading 4 <br />
           Semibold
         </Component>
+        <Component variant="h4" weight="bold">
+          Heading 4 <br />
+          Bold
+        </Component>
         <Component variant="caption" className="text-gray-500">
           16px / Line height: 24px
         </Component>
       </div>
 
-      {/* Subheading Variations - Only Medium & Semibold */}
+      {/* Subheading Variations */}
       <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
+        <Component variant="subheading" weight="light">
+          Sub heading <br />
+          Light
+        </Component>
+        <Component variant="subheading" weight="regular">
+          Sub heading <br />
+          Regular
+        </Component>
         <Component variant="subheading" weight="medium">
           Sub heading <br />
           Medium
@@ -90,140 +147,56 @@ export const Typography: Story = {
           Sub heading <br />
           Semibold
         </Component>
-        <Component variant="caption" className="text-gray-500">
-          14px / Line height: 20px
-        </Component>
-      </div>
-
-      {/* Body Text - Regular Weight */}
-      <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
-        <Component variant="body" weight="regular" size="lg">
-          Body Large <br /> Regular
-        </Component>
-        <Component variant="body" weight="regular" size="regular">
-          Body Regular <br /> Regular
-        </Component>
-        <Component variant="body" weight="regular" size="sm">
-          Body Small <br /> Regular
-        </Component>
-        <Component variant="body" weight="regular" size="xs">
-          Body X-Small <br /> Regular
-        </Component>
-        <Component weight="regular" size="xxs">
-          Body XX-Small <br /> Regular
-        </Component>
-        <Component variant="caption" className="text-gray-500">
-          18px/24px, 16px/24px, 14px/20px, 12px/18px, 10px/14px
-        </Component>
-      </div>
-
-      {/* Body Text - Medium Weight */}
-      <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
-        <Component variant="body" weight="medium" size="lg">
-          Body Large <br /> Medium
-        </Component>
-        <Component variant="body" weight="medium" size="regular">
-          Body Regular <br /> Medium
-        </Component>
-        <Component variant="body" weight="medium" size="sm">
-          Body Small <br /> Medium
-        </Component>
-        <Component variant="body" weight="medium" size="xs">
-          Body X-Small <br /> Medium
-        </Component>
-        <Component variant="body" weight="medium" size="xxs">
-          Body XX-Small <br /> Medium
-        </Component>
-        <Component variant="caption" className="text-gray-500">
-          For emphasis, key values, important inline text
-        </Component>
-      </div>
-
-      {/* Caption - Base Size Only (8px/16px) */}
-      <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
-        <Component variant="caption">
-          Caption <br /> Base Size
-        </Component>
-        <Component variant="caption" className="text-gray-500">
-          8px/16px - For extremely tiny metadata only
-        </Component>
-        <Component variant="caption" className="text-gray-500">
-          Note: For all other sizes, use variant=&quot;body&quot;
-        </Component>
-      </div>
-
-      {/* Semantic Variants Section Header */}
-      <div className="al-border-t-2 al-pt-8 al-mt-8">
-        <Component variant="h2" weight="semibold" className="al-mb-4">
-          Semantic Variants
-        </Component>
-        <Component variant="caption" className="text-gray-500 al-mb-4 al-block">
-          Pre-configured variants for consistent page structure. No weight/size props allowed.
+        <Component variant="subheading" weight="bold">
+          Sub heading <br />
+          Bold
         </Component>
-      </div>
-
-      {/* Page Heading - Fixed H2 Semibold */}
-      <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
-        <Component variant="page-heading">Page Heading</Component>
         <Component variant="caption" className="text-gray-500">
-          H2 + Semibold (fixed) - Use for main page titles
+          14px / Line height: 20px
         </Component>
       </div>
 
-      {/* Section Heading - Fixed H3 Medium */}
+      {/* Body/Paragraph Example */}
       <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
-        <Component variant="section-heading">Section Heading</Component>
-        <Component variant="caption" className="text-gray-500">
-          H3 + Medium (fixed) - Use for section titles within a page
+        <Component variant="body" size="xs">
+          Body XS <br /> Regular
         </Component>
-      </div>
-
-      {/* Utilities Section Header */}
-      <div className="al-border-t-2 al-pt-8 al-mt-8">
-        <Component variant="h2" weight="semibold" className="al-mb-4">
-          Utility Variants
+        <Component variant="body" size="sm">
+          Body SM <br /> Regular
         </Component>
-      </div>
-
-      {/* Button Text Utility - 3 sizes, fixed Medium weight */}
-      <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
-        <Component variant="button" size="xs">
-          Button XS <br /> (12px/16px)
+        <Component variant="body" size="md">
+          Body MD <br /> Regular
         </Component>
-        <Component variant="button" size="sm">
-          Button SM <br /> (14px/20px)
+        <Component variant="body" size="lg">
+          Body LG <br /> Regular
         </Component>
-        <Component variant="button" size="md">
-          Button MD <br /> (16px/24px)
+        <Component variant="body" size="xl">
+          Body XL <br /> Regular
         </Component>
         <Component variant="caption" className="text-gray-500">
-          Button text utility - Fixed Medium weight (500)
+          14px, 10px, 8px | Line height: 18px, 16px, 14px
         </Component>
       </div>
 
-      {/* Table Header Utility - Fixed size, 2 weights */}
+      {/* Caption Example */}
       <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
-        <Component variant="table-header" weight="medium">
-          Table Header <br /> Medium
+        <Component variant="caption" size="xs">
+          Caption XS <br /> Regular
         </Component>
-        <Component variant="table-header" weight="semibold">
-          Table Header <br /> Semibold
+        <Component variant="caption" size="sm">
+          Caption SM <br /> Regular
         </Component>
-        <Component variant="caption" className="text-gray-500">
-          12px/18px - For table column headers
+        <Component variant="caption" weight="medium" size="sm">
+          Caption SM <br /> Medium
         </Component>
-      </div>
-
-      {/* Placeholder Utility - 2 sizes, fixed Regular weight, auto-italic */}
-      <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
-        <Component variant="placeholder" size="regular">
-          Placeholder Regular <br /> (14px/20px)
+        <Component variant="caption" weight="medium" size="md">
+          Caption MD <br /> Medium
         </Component>
-        <Component variant="placeholder" size="large">
-          Placeholder Large <br /> (16px/24px)
+        <Component variant="caption" weight="medium" size="lg">
+          Caption LG <br /> Medium
         </Component>
         <Component variant="caption" className="text-gray-500">
-          Italic placeholder text - Fixed Regular weight (400)
+          14px, 10px | Line height: 18px, 16px
         </Component>
       </div>
     </div>