@dillingerstaffing/strand-ui 0.4.0 → 0.5.1

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsxs as _, jsx as s } from "preact/jsx-runtime";
 import { forwardRef as p } from "preact/compat";
-import { useRef as k, useCallback as b, useEffect as x, useState as B, useContext as R } from "preact/hooks";
+import { useRef as k, useCallback as v, useEffect as x, useState as B, useContext as R } from "preact/hooks";
 import { createContext as I } from "preact";
 const E = p(
   ({
@@ -8,10 +8,10 @@ const E = p(
     size: t = "md",
     loading: e = !1,
     iconOnly: n = !1,
-    fullWidth: i = !1,
+    fullWidth: l = !1,
     disabled: o = !1,
     className: r = "",
-    children: l,
+    children: i,
     onClick: c,
     type: u = "button",
     ...d
@@ -21,7 +21,7 @@ const E = p(
       `strand-btn--${a}`,
       `strand-btn--${t}`,
       n && "strand-btn--icon-only",
-      i && "strand-btn--full-width",
+      l && "strand-btn--full-width",
       e && "strand-btn--loading",
       r
     ].filter(Boolean).join(" ");
@@ -43,7 +43,7 @@ const E = p(
             {
               className: "strand-btn__content",
               style: e ? { visibility: "hidden" } : void 0,
-              children: l
+              children: i
             }
           )
         ]
@@ -58,24 +58,24 @@ const K = p(
     error: t = !1,
     leadingAddon: e,
     trailingAddon: n,
-    className: i = "",
+    className: l = "",
     disabled: o,
     ...r
-  }, l) => {
+  }, i) => {
     const c = [
       "strand-input",
       t && "strand-input--error",
       o && "strand-input--disabled",
       e && "strand-input--has-leading",
       n && "strand-input--has-trailing",
-      i
+      l
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ _("div", { className: c, children: [
       e && /* @__PURE__ */ s("span", { className: "strand-input__leading", "aria-hidden": "true", children: e }),
       /* @__PURE__ */ s(
         "input",
         {
-          ref: l,
+          ref: i,
           type: a,
           className: "strand-input__field",
           disabled: o,
@@ -94,26 +94,26 @@ const A = p(
     showCount: t = !1,
     error: e = !1,
     maxLength: n,
-    disabled: i,
+    disabled: l,
     className: o = "",
     value: r,
-    onInput: l,
+    onInput: i,
     ...c
   }, u) => {
-    const d = k(null), h = b(
+    const d = k(null), h = v(
       (g) => {
         d.current = g, typeof u == "function" ? u(g) : u && (u.current = g);
       },
       [u]
-    ), m = b(
+    ), m = v(
       (g) => {
-        a && d.current && (d.current.style.height = "auto", d.current.style.height = `${d.current.scrollHeight}px`), l && l(g);
+        a && d.current && (d.current.style.height = "auto", d.current.style.height = `${d.current.scrollHeight}px`), i && i(g);
       },
-      [a, l]
+      [a, i]
     ), f = [
       "strand-textarea",
       e && "strand-textarea--error",
-      i && "strand-textarea--disabled",
+      l && "strand-textarea--disabled",
       a && "strand-textarea--auto-resize",
       o
     ].filter(Boolean).join(" "), N = typeof r == "string" ? r.length : 0;
@@ -123,7 +123,7 @@ const A = p(
         {
           ref: h,
           className: "strand-textarea__field",
-          disabled: i,
+          disabled: l,
           "aria-invalid": e ? "true" : void 0,
           maxLength: n,
           value: r,
@@ -146,14 +146,14 @@ const L = p(
     value: t,
     onChange: e,
     disabled: n,
-    error: i = !1,
+    error: l = !1,
     placeholder: o,
     className: r = "",
-    ...l
+    ...i
   }, c) => {
     const u = [
       "strand-select",
-      i && "strand-select--error",
+      l && "strand-select--error",
       n && "strand-select--disabled",
       r
     ].filter(Boolean).join(" ");
@@ -166,8 +166,8 @@ const L = p(
           value: t,
           onChange: e,
           disabled: n,
-          "aria-invalid": i ? "true" : void 0,
-          ...l,
+          "aria-invalid": l ? "true" : void 0,
+          ...i,
           children: [
             o && /* @__PURE__ */ s("option", { value: "", disabled: !0, children: o }),
             a.map((d) => /* @__PURE__ */ s("option", { value: d.value, children: d.label }, d.value))
@@ -185,15 +185,15 @@ const M = p(
     indeterminate: t = !1,
     onChange: e,
     disabled: n = !1,
-    label: i,
+    label: l,
     className: o = "",
     ...r
-  }, l) => {
+  }, i) => {
     const c = k(null);
     x(() => {
-      const f = typeof l == "function" ? c.current : (l == null ? void 0 : l.current) ?? c.current;
+      const f = typeof i == "function" ? c.current : (i == null ? void 0 : i.current) ?? c.current;
       f && (f.indeterminate = t);
-    }, [t, l]);
+    }, [t, i]);
     const u = [
       "strand-checkbox",
       a && "strand-checkbox--checked",
@@ -217,7 +217,7 @@ const M = p(
             "input",
             {
               ref: (f) => {
-                c.current = f, typeof l == "function" ? l(f) : l && (l.current = f);
+                c.current = f, typeof i == "function" ? i(f) : i && (i.current = f);
               },
               type: "checkbox",
               className: "strand-checkbox__native",
@@ -266,7 +266,7 @@ const M = p(
               )
             }
           ) : null }),
-          i && /* @__PURE__ */ s("span", { className: "strand-checkbox__label", children: i })
+          l && /* @__PURE__ */ s("span", { className: "strand-checkbox__label", children: l })
         ]
       }
     );
@@ -279,10 +279,10 @@ const P = p(
     onChange: t,
     disabled: e = !1,
     label: n,
-    name: i,
+    name: l,
     value: o,
     className: r = "",
-    ...l
+    ...i
   }, c) => {
     const u = [
       "strand-radio",
@@ -300,9 +300,9 @@ const P = p(
           checked: a,
           disabled: e,
           onChange: e ? void 0 : t,
-          name: i,
+          name: l,
           value: o,
-          ...l
+          ...i
         }
       ),
       /* @__PURE__ */ s("span", { className: "strand-radio__control", "aria-hidden": "true", children: /* @__PURE__ */ s("span", { className: "strand-radio__dot" }) }),
@@ -317,16 +317,16 @@ const F = p(
     onChange: t,
     disabled: e = !1,
     label: n,
-    className: i = "",
+    className: l = "",
     ...o
   }, r) => {
-    const l = [
+    const i = [
       "strand-switch",
       a && "strand-switch--checked",
       e && "strand-switch--disabled",
-      i
+      l
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ _("label", { className: l, children: [
+    return /* @__PURE__ */ _("label", { className: i, children: [
       /* @__PURE__ */ s(
         "button",
         {
@@ -357,10 +357,10 @@ const q = p(
     max: t = 100,
     step: e = 1,
     value: n,
-    onChange: i,
+    onChange: l,
     disabled: o,
     className: r = "",
-    ...l
+    ...i
   }, c) => {
     const u = [
       "strand-slider",
@@ -377,12 +377,12 @@ const q = p(
         max: t,
         step: e,
         value: n,
-        onChange: i,
+        onChange: l,
         disabled: o,
         "aria-valuemin": a,
         "aria-valuemax": t,
         "aria-valuenow": n,
-        ...l
+        ...i
       }
     ) });
   }
@@ -394,19 +394,19 @@ const G = p(
     htmlFor: t,
     hint: e,
     error: n,
-    required: i = !1,
+    required: l = !1,
     className: o = "",
     children: r
-  }, l) => {
+  }, i) => {
     const c = [
       "strand-form-field",
       n && "strand-form-field--error",
       o
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ _("div", { ref: l, className: c, children: [
+    return /* @__PURE__ */ _("div", { ref: i, className: c, children: [
       /* @__PURE__ */ _("label", { className: "strand-form-field__label", htmlFor: t, children: [
         a,
-        i && /* @__PURE__ */ s("span", { className: "strand-form-field__required", "aria-hidden": "true", children: "*" })
+        l && /* @__PURE__ */ s("span", { className: "strand-form-field__required", "aria-hidden": "true", children: "*" })
       ] }),
       /* @__PURE__ */ s("div", { className: "strand-form-field__control", children: r }),
       n ? /* @__PURE__ */ s(
@@ -428,7 +428,7 @@ const H = p(
     padding: t = "md",
     className: e = "",
     children: n,
-    ...i
+    ...l
   }, o) => {
     const r = [
       "strand-card",
@@ -436,7 +436,7 @@ const H = p(
       `strand-card--pad-${t}`,
       e
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ s("div", { ref: o, className: r, ...i, children: n });
+    return /* @__PURE__ */ s("div", { ref: o, className: r, ...l, children: n });
   }
 );
 H.displayName = "Card";
@@ -446,10 +446,10 @@ const U = p(
     status: t = "default",
     count: e,
     maxCount: n = 99,
-    className: i = "",
+    className: l = "",
     children: o,
     ...r
-  }, l) => {
+  }, i) => {
     const c = o != null && o !== !1, u = a === "count" ? e != null && e > n ? `${n}+` : e : null, d = a === "dot" ? "Status indicator" : e != null ? `${e} notifications` : void 0, h = [
       "strand-badge__indicator",
       `strand-badge--${a}`,
@@ -459,12 +459,12 @@ const U = p(
       const N = [
         "strand-badge",
         "strand-badge--inline",
-        i
+        l
       ].filter(Boolean).join(" ");
-      return /* @__PURE__ */ s("span", { ref: l, className: N, ...r, children: m });
+      return /* @__PURE__ */ s("span", { ref: i, className: N, ...r, children: m });
     }
-    const f = ["strand-badge", i].filter(Boolean).join(" ");
-    return /* @__PURE__ */ _("span", { ref: l, className: f, ...r, children: [
+    const f = ["strand-badge", l].filter(Boolean).join(" ");
+    return /* @__PURE__ */ _("span", { ref: i, className: f, ...r, children: [
       o,
       m
     ] });
@@ -477,15 +477,15 @@ const V = p(
     alt: t = "",
     initials: e = "",
     size: n = "md",
-    className: i = "",
+    className: l = "",
     ...o
   }, r) => {
-    const [l, c] = B(!1), u = b(() => {
+    const [i, c] = B(!1), u = v(() => {
       c(!0);
-    }, []), d = a && !l, h = e.slice(0, 2).toUpperCase(), m = [
+    }, []), d = a && !i, h = e.slice(0, 2).toUpperCase(), m = [
       "strand-avatar",
       `strand-avatar--${n}`,
-      i
+      l
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ s("div", { ref: r, className: m, role: "img", "aria-label": t || h, ...o, children: d ? /* @__PURE__ */ s(
       "img",
@@ -505,17 +505,17 @@ const O = p(
     status: t = "default",
     removable: e = !1,
     onRemove: n,
-    className: i = "",
+    className: l = "",
     children: o,
     ...r
-  }, l) => {
+  }, i) => {
     const c = [
       "strand-tag",
       `strand-tag--${a}`,
       `strand-tag--${t}`,
-      i
+      l
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ _("span", { ref: l, className: c, ...r, children: [
+    return /* @__PURE__ */ _("span", { ref: i, className: c, ...r, children: [
       /* @__PURE__ */ s("span", { className: "strand-tag__text", children: o }),
       e && /* @__PURE__ */ s(
         "button",
@@ -550,15 +550,15 @@ const O = p(
 );
 O.displayName = "Tag";
 const z = p(
-  ({ columns: a, data: t, onSort: e, className: n = "", ...i }, o) => {
-    const [r, l] = B(null), [c, u] = B("asc"), d = b(
+  ({ columns: a, data: t, onSort: e, className: n = "", ...l }, o) => {
+    const [r, i] = B(null), [c, u] = B("asc"), d = v(
       (m) => {
         const f = r === m && c === "asc" ? "desc" : "asc";
-        l(m), u(f), e == null || e(m, f);
+        i(m), u(f), e == null || e(m, f);
       },
       [r, c, e]
     ), h = ["strand-table-wrapper", n].filter(Boolean).join(" ");
-    return /* @__PURE__ */ s("div", { ref: o, className: h, ...i, children: /* @__PURE__ */ _("table", { className: "strand-table", children: [
+    return /* @__PURE__ */ s("div", { ref: o, className: h, ...l, children: /* @__PURE__ */ _("table", { className: "strand-table", children: [
       /* @__PURE__ */ s("thead", { className: "strand-table__head", children: /* @__PURE__ */ s("tr", { children: a.map((m) => /* @__PURE__ */ s(
         "th",
         {
@@ -593,13 +593,13 @@ const z = p(
 );
 z.displayName = "Table";
 const W = p(
-  ({ label: a, value: t, size: e, className: n = "", ...i }, o) => {
+  ({ label: a, value: t, size: e, className: n = "", ...l }, o) => {
     const r = [
       "strand-data-readout",
       e && e !== "md" ? `strand-data-readout--${e}` : "",
       n
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ _("div", { ref: o, className: r, ...i, children: [
+    return /* @__PURE__ */ _("div", { ref: o, className: r, ...l, children: [
       /* @__PURE__ */ s("span", { className: "strand-data-readout__label", children: a }),
       /* @__PURE__ */ s("span", { className: "strand-data-readout__value", children: t })
     ] });
@@ -607,22 +607,32 @@ const W = p(
 );
 W.displayName = "DataReadout";
 const Z = p(
+  ({ code: a, language: t, className: e = "", ...n }, l) => {
+    const o = ["strand-code-block", e].filter(Boolean).join(" ");
+    return /* @__PURE__ */ _("div", { ref: l, className: o, ...n, children: [
+      t && /* @__PURE__ */ s("span", { className: "strand-code-block__label", children: t }),
+      /* @__PURE__ */ s("pre", { className: "strand-code-block__pre", children: /* @__PURE__ */ s("code", { children: a }) })
+    ] });
+  }
+);
+Z.displayName = "CodeBlock";
+const J = p(
   ({
     direction: a = "vertical",
     gap: t = 4,
     align: e = "stretch",
     wrap: n = !1,
-    justify: i,
+    justify: l,
     className: o = "",
     style: r,
-    children: l,
+    children: i,
     ...c
   }, u) => {
     const d = [
       "strand-stack",
       `strand-stack--${a}`,
       e !== "stretch" && `strand-stack--align-${e}`,
-      i && `strand-stack--justify-${i}`,
+      l && `strand-stack--justify-${l}`,
       n && "strand-stack--wrap",
       o
     ].filter(Boolean).join(" "), h = {
@@ -635,22 +645,22 @@ const Z = p(
         className: d,
         style: { ...h, ...r },
         ...c,
-        children: l
+        children: i
       }
     );
   }
 );
-Z.displayName = "Stack";
-const J = p(
+J.displayName = "Stack";
+const Q = p(
   ({
     columns: a = 1,
     gap: t = 4,
     className: e = "",
     style: n,
-    children: i,
+    children: l,
     ...o
   }, r) => {
-    const l = ["strand-grid", e].filter(Boolean).join(" "), c = {
+    const i = ["strand-grid", e].filter(Boolean).join(" "), c = {
       gridTemplateColumns: `repeat(${a}, 1fr)`,
       gap: `var(--strand-space-${t})`
     };
@@ -658,32 +668,32 @@ const J = p(
       "div",
       {
         ref: r,
-        className: l,
+        className: i,
         style: { ...c, ...n },
         ...o,
-        children: i
+        children: l
       }
     );
   }
 );
-J.displayName = "Grid";
-const Q = p(
+Q.displayName = "Grid";
+const X = p(
   ({
     size: a = "default",
     className: t = "",
     children: e,
     ...n
-  }, i) => {
+  }, l) => {
     const o = [
       "strand-container",
       `strand-container--${a}`,
       t
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ s("div", { ref: i, className: o, ...n, children: e });
+    return /* @__PURE__ */ s("div", { ref: l, className: o, ...n, children: e });
   }
 );
-Q.displayName = "Container";
-const X = p(
+X.displayName = "Container";
+const Y = p(
   ({ direction: a = "horizontal", label: t, className: e = "" }, n) => {
     if (a === "vertical") {
       const r = [
@@ -739,14 +749,14 @@ const X = p(
     );
   }
 );
-X.displayName = "Divider";
-const Y = p(
+Y.displayName = "Divider";
+const aa = p(
   ({
     variant: a = "standard",
     background: t = "primary",
     className: e = "",
     children: n,
-    ...i
+    ...l
   }, o) => {
     const r = [
       "strand-section",
@@ -754,12 +764,12 @@ const Y = p(
       `strand-section--bg-${t}`,
       e
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ s("section", { ref: o, className: r, ...i, children: n });
+    return /* @__PURE__ */ s("section", { ref: o, className: r, ...l, children: n });
   }
 );
-Y.displayName = "Section";
-const aa = p(
-  ({ href: a, external: t = !1, className: e = "", children: n, ...i }, o) => {
+aa.displayName = "Section";
+const ea = p(
+  ({ href: a, external: t = !1, className: e = "", children: n, ...l }, o) => {
     const r = ["strand-link", e].filter(Boolean).join(" ");
     return /* @__PURE__ */ s(
       "a",
@@ -768,16 +778,16 @@ const aa = p(
         href: a,
         className: r,
         ...t && { target: "_blank", rel: "noopener noreferrer" },
-        ...i,
+        ...l,
         children: n
       }
     );
   }
 );
-aa.displayName = "Link";
-const ea = p(
-  ({ tabs: a, activeTab: t, onChange: e, className: n = "", ...i }, o) => {
-    const r = k(null), l = ["strand-tabs", n].filter(Boolean).join(" "), c = b(
+ea.displayName = "Link";
+const sa = p(
+  ({ tabs: a, activeTab: t, onChange: e, className: n = "", ...l }, o) => {
+    const r = k(null), i = ["strand-tabs", n].filter(Boolean).join(" "), c = v(
       (d) => {
         var m, f;
         const h = a[d];
@@ -790,7 +800,7 @@ const ea = p(
         }
       },
       [a, e]
-    ), u = b(
+    ), u = v(
       (d) => {
         const h = a.findIndex((f) => f.id === t);
         let m = null;
@@ -814,7 +824,7 @@ const ea = p(
       },
       [a, t, c]
     );
-    return /* @__PURE__ */ _("div", { ref: o, className: l, ...i, children: [
+    return /* @__PURE__ */ _("div", { ref: o, className: i, ...l, children: [
       /* @__PURE__ */ s(
         "div",
         {
@@ -862,14 +872,14 @@ const ea = p(
     ] });
   }
 );
-ea.displayName = "Tabs";
-const sa = p(
-  ({ items: a, separator: t = "/", className: e = "", ...n }, i) => {
+sa.displayName = "Tabs";
+const ta = p(
+  ({ items: a, separator: t = "/", className: e = "", ...n }, l) => {
     const o = ["strand-breadcrumb", e].filter(Boolean).join(" ");
-    return /* @__PURE__ */ s("nav", { ref: i, "aria-label": "Breadcrumb", className: o, ...n, children: /* @__PURE__ */ s("ol", { className: "strand-breadcrumb__list", children: a.map((r, l) => {
-      const c = l === a.length - 1;
+    return /* @__PURE__ */ s("nav", { ref: l, "aria-label": "Breadcrumb", className: o, ...n, children: /* @__PURE__ */ s("ol", { className: "strand-breadcrumb__list", children: a.map((r, i) => {
+      const c = i === a.length - 1;
       return /* @__PURE__ */ _("li", { className: "strand-breadcrumb__item", children: [
-        l > 0 && /* @__PURE__ */ s("span", { className: "strand-breadcrumb__separator", "aria-hidden": "true", children: t }),
+        i > 0 && /* @__PURE__ */ s("span", { className: "strand-breadcrumb__separator", "aria-hidden": "true", children: t }),
         c ? /* @__PURE__ */ s(
           "span",
           {
@@ -878,17 +888,17 @@ const sa = p(
             children: r.label
           }
         ) : /* @__PURE__ */ s("a", { href: r.href, className: "strand-breadcrumb__link", children: r.label })
-      ] }, `${r.label}-${l}`);
+      ] }, `${r.label}-${i}`);
     }) }) });
   }
 );
-sa.displayName = "Breadcrumb";
-const ta = p(
-  ({ logo: a, items: t = [], actions: e, className: n = "", ...i }, o) => {
-    const [r, l] = B(!1), c = b(() => {
-      l((d) => !d);
+ta.displayName = "Breadcrumb";
+const na = p(
+  ({ logo: a, items: t = [], actions: e, className: n = "", ...l }, o) => {
+    const [r, i] = B(!1), c = v(() => {
+      i((d) => !d);
     }, []), u = ["strand-nav", n].filter(Boolean).join(" ");
-    return /* @__PURE__ */ _("nav", { ref: o, className: u, "aria-label": "Main navigation", ...i, children: [
+    return /* @__PURE__ */ _("nav", { ref: o, className: u, "aria-label": "Main navigation", ...l, children: [
       /* @__PURE__ */ _("div", { className: "strand-nav__inner", children: [
         a && /* @__PURE__ */ s("div", { className: "strand-nav__logo", children: a }),
         /* @__PURE__ */ s("div", { className: "strand-nav__items", children: t.map((d) => {
@@ -939,50 +949,50 @@ const ta = p(
     ] });
   }
 );
-ta.displayName = "Nav";
+na.displayName = "Nav";
 const S = I(null);
-function ya() {
+function ga() {
   const a = R(S);
   if (!a)
     throw new Error("useToast must be used within a ToastProvider");
   return a;
 }
-let na = 0;
-const ra = ({ children: a, className: t = "" }) => {
-  const [e, n] = B([]), i = b((l) => {
-    n((c) => c.filter((u) => u.id !== l));
-  }, []), o = b((l) => {
+let ra = 0;
+const la = ({ children: a, className: t = "" }) => {
+  const [e, n] = B([]), l = v((i) => {
+    n((c) => c.filter((u) => u.id !== i));
+  }, []), o = v((i) => {
     const c = {
-      id: ++na,
-      message: l.message,
-      status: l.status ?? "info",
-      duration: l.duration ?? 5e3
+      id: ++ra,
+      message: i.message,
+      status: i.status ?? "info",
+      duration: i.duration ?? 5e3
     };
     n((u) => [...u, c]);
   }, []), r = ["strand-toast__container", t].filter(Boolean).join(" ");
   return /* @__PURE__ */ _(S.Provider, { value: { toast: o }, children: [
     a,
-    e.length > 0 && /* @__PURE__ */ s("div", { className: r, children: e.map((l) => /* @__PURE__ */ s(
-      la,
+    e.length > 0 && /* @__PURE__ */ s("div", { className: r, children: e.map((i) => /* @__PURE__ */ s(
+      ia,
       {
-        entry: l,
-        onDismiss: () => i(l.id)
+        entry: i,
+        onDismiss: () => l(i.id)
       },
-      l.id
+      i.id
     )) })
   ] });
 };
-ra.displayName = "ToastProvider";
-function la({ entry: a, onDismiss: t }) {
+la.displayName = "ToastProvider";
+function ia({ entry: a, onDismiss: t }) {
   const e = k(null);
   x(() => (a.duration > 0 && (e.current = setTimeout(t, a.duration)), () => {
     e.current !== null && clearTimeout(e.current);
   }), [a.duration, t]);
-  const n = a.status === "error" || a.status === "warning", i = ["strand-toast", `strand-toast--${a.status}`].filter(Boolean).join(" ");
+  const n = a.status === "error" || a.status === "warning", l = ["strand-toast", `strand-toast--${a.status}`].filter(Boolean).join(" ");
   return /* @__PURE__ */ _(
     "div",
     {
-      className: i,
+      className: l,
       role: "status",
       "aria-live": n ? "assertive" : "polite",
       children: [
@@ -1001,9 +1011,9 @@ function la({ entry: a, onDismiss: t }) {
     }
   );
 }
-const ia = p(
-  ({ status: a = "info", message: t, onDismiss: e, className: n = "", ...i }, o) => {
-    const r = a === "error" || a === "warning", l = [
+const oa = p(
+  ({ status: a = "info", message: t, onDismiss: e, className: n = "", ...l }, o) => {
+    const r = a === "error" || a === "warning", i = [
       "strand-toast",
       `strand-toast--${a}`,
       n
@@ -1012,10 +1022,10 @@ const ia = p(
       "div",
       {
         ref: o,
-        className: l,
+        className: i,
         role: "status",
         "aria-live": r ? "assertive" : "polite",
-        ...i,
+        ...l,
         children: [
           /* @__PURE__ */ s("span", { className: "strand-toast__message", children: t }),
           e && /* @__PURE__ */ s(
@@ -1033,23 +1043,23 @@ const ia = p(
     );
   }
 );
-ia.displayName = "Toast";
-const oa = p(
+oa.displayName = "Toast";
+const da = p(
   ({
     status: a = "info",
     dismissible: t = !1,
     onDismiss: e,
     className: n = "",
-    children: i,
+    children: l,
     ...o
   }, r) => {
-    const l = a === "error" || a === "warning" ? "alert" : "status", c = [
+    const i = a === "error" || a === "warning" ? "alert" : "status", c = [
       "strand-alert",
       `strand-alert--${a}`,
       n
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ _("div", { ref: r, className: c, role: l, ...o, children: [
-      /* @__PURE__ */ s("div", { className: "strand-alert__content", children: i }),
+    return /* @__PURE__ */ _("div", { ref: r, className: c, role: i, ...o, children: [
+      /* @__PURE__ */ s("div", { className: "strand-alert__content", children: l }),
       t && /* @__PURE__ */ s(
         "button",
         {
@@ -1063,63 +1073,63 @@ const oa = p(
     ] });
   }
 );
-oa.displayName = "Alert";
+da.displayName = "Alert";
 const T = 'a[href], button:not(:disabled), textarea:not(:disabled), input:not(:disabled), select:not(:disabled), [tabindex]:not([tabindex="-1"])';
-let da = 0;
-const ca = p(
+let ca = 0;
+const ua = p(
   ({
     open: a,
     onClose: t,
     title: e,
     closeOnOutsideClick: n = !0,
-    closeOnEscape: i = !0,
+    closeOnEscape: l = !0,
     className: o = "",
     children: r,
-    ...l
+    ...i
   }, c) => {
-    const u = k(null), d = k(null), m = k(`strand-dialog-title-${++da}`).current;
+    const u = k(null), d = k(null), m = k(`strand-dialog-title-${++ca}`).current;
     x(() => {
       if (!a) return;
       d.current = document.activeElement;
-      const v = requestAnimationFrame(() => {
+      const b = requestAnimationFrame(() => {
         const y = u.current;
         if (!y) return;
         const w = y.querySelectorAll(T);
         w.length > 0 ? w[0].focus() : y.focus();
       });
       return () => {
-        cancelAnimationFrame(v);
+        cancelAnimationFrame(b);
         const y = d.current;
         y && y instanceof HTMLElement && y.focus();
       };
     }, [a]), x(() => {
       if (!a) return;
-      const v = document.body.style.overflow;
+      const b = document.body.style.overflow;
       return document.body.style.overflow = "hidden", () => {
-        document.body.style.overflow = v;
+        document.body.style.overflow = b;
       };
     }, [a]);
-    const f = b(
-      (v) => {
-        if (v.key === "Escape" && i) {
-          v.stopPropagation(), t();
+    const f = v(
+      (b) => {
+        if (b.key === "Escape" && l) {
+          b.stopPropagation(), t();
           return;
         }
-        if (v.key === "Tab") {
+        if (b.key === "Tab") {
           const y = u.current;
           if (!y) return;
           const w = Array.from(
             y.querySelectorAll(T)
           );
           if (w.length === 0) return;
-          const j = w[0], C = w[w.length - 1];
-          v.shiftKey ? document.activeElement === j && (v.preventDefault(), C.focus()) : document.activeElement === C && (v.preventDefault(), j.focus());
+          const $ = w[0], j = w[w.length - 1];
+          b.shiftKey ? document.activeElement === $ && (b.preventDefault(), j.focus()) : document.activeElement === j && (b.preventDefault(), $.focus());
         }
       },
-      [i, t]
-    ), N = b(
-      (v) => {
-        n && v.target === v.currentTarget && t();
+      [l, t]
+    ), N = v(
+      (b) => {
+        n && b.target === b.currentTarget && t();
       },
       [n, t]
     );
@@ -1134,15 +1144,15 @@ const ca = p(
         children: /* @__PURE__ */ _(
           "div",
           {
-            ref: (v) => {
-              u.current = v, typeof c == "function" ? c(v) : c && (c.current = v);
+            ref: (b) => {
+              u.current = b, typeof c == "function" ? c(b) : c && (c.current = b);
             },
             className: g,
             role: "dialog",
             "aria-modal": "true",
             "aria-labelledby": e ? m : void 0,
             tabIndex: -1,
-            ...l,
+            ...i,
             children: [
               e && /* @__PURE__ */ s("div", { className: "strand-dialog__header", children: /* @__PURE__ */ s("h2", { id: m, className: "strand-dialog__title", children: e }) }),
               /* @__PURE__ */ s(
@@ -1163,27 +1173,27 @@ const ca = p(
     );
   }
 );
-ca.displayName = "Dialog";
-let ua = 0;
-const ma = p(
+ua.displayName = "Dialog";
+let ma = 0;
+const ha = p(
   ({
     content: a,
     position: t = "top",
     delay: e = 200,
     className: n = "",
-    children: i,
+    children: l,
     ...o
   }, r) => {
-    const [l, c] = B(!1), u = k(null), h = k(`strand-tooltip-${++ua}`).current, m = b(() => {
+    const [i, c] = B(!1), u = k(null), h = k(`strand-tooltip-${++ma}`).current, m = v(() => {
       u.current = setTimeout(() => {
         c(!0);
       }, e);
-    }, [e]), f = b(() => {
+    }, [e]), f = v(() => {
       u.current !== null && (clearTimeout(u.current), u.current = null), c(!1);
     }, []), N = ["strand-tooltip__wrapper", n].filter(Boolean).join(" "), g = [
       "strand-tooltip",
       `strand-tooltip--${t}`,
-      l && "strand-tooltip--visible"
+      i && "strand-tooltip--visible"
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ _(
       "span",
@@ -1197,14 +1207,14 @@ const ma = p(
         "aria-describedby": h,
         ...o,
         children: [
-          i,
+          l,
           /* @__PURE__ */ s(
             "span",
             {
               id: h,
               className: g,
               role: "tooltip",
-              "aria-hidden": !l,
+              "aria-hidden": !i,
               children: a
             }
           )
@@ -1213,16 +1223,16 @@ const ma = p(
     );
   }
 );
-ma.displayName = "Tooltip";
-const D = { sm: 24, md: 40, lg: 56 }, $ = 3, ha = p(
+ha.displayName = "Tooltip";
+const D = { sm: 24, md: 40, lg: 56 }, C = 3, pa = p(
   ({
     variant: a = "bar",
     value: t,
     size: e = "md",
     className: n = "",
-    ...i
+    ...l
   }, o) => {
-    const r = t != null, l = [
+    const r = t != null, i = [
       "strand-progress",
       `strand-progress--${a}`,
       `strand-progress--${e}`,
@@ -1234,8 +1244,8 @@ const D = { sm: 24, md: 40, lg: 56 }, $ = 3, ha = p(
       "aria-valuemax": 100
     };
     if (r && (c["aria-valuenow"] = t), a === "ring") {
-      const u = D[e] ?? D.md, d = (u - $) / 2, h = 2 * Math.PI * d, m = r ? h - h * t / 100 : 0;
-      return /* @__PURE__ */ s("div", { ref: o, className: l, ...c, ...i, children: /* @__PURE__ */ _(
+      const u = D[e] ?? D.md, d = (u - C) / 2, h = 2 * Math.PI * d, m = r ? h - h * t / 100 : 0;
+      return /* @__PURE__ */ s("div", { ref: o, className: i, ...c, ...l, children: /* @__PURE__ */ _(
         "svg",
         {
           width: u,
@@ -1250,7 +1260,7 @@ const D = { sm: 24, md: 40, lg: 56 }, $ = 3, ha = p(
                 cy: u / 2,
                 r: d,
                 fill: "none",
-                "stroke-width": $,
+                "stroke-width": C,
                 className: "strand-progress__track"
               }
             ),
@@ -1261,7 +1271,7 @@ const D = { sm: 24, md: 40, lg: 56 }, $ = 3, ha = p(
                 cy: u / 2,
                 r: d,
                 fill: "none",
-                "stroke-width": $,
+                "stroke-width": C,
                 "stroke-dasharray": h,
                 "stroke-dashoffset": r ? m : void 0,
                 "stroke-linecap": "round",
@@ -1273,7 +1283,7 @@ const D = { sm: 24, md: 40, lg: 56 }, $ = 3, ha = p(
         }
       ) });
     }
-    return /* @__PURE__ */ s("div", { ref: o, className: l, ...c, ...i, children: /* @__PURE__ */ s(
+    return /* @__PURE__ */ s("div", { ref: o, className: i, ...c, ...l, children: /* @__PURE__ */ s(
       "div",
       {
         className: "strand-progress__fill",
@@ -1282,34 +1292,34 @@ const D = { sm: 24, md: 40, lg: 56 }, $ = 3, ha = p(
     ) });
   }
 );
-ha.displayName = "Progress";
-const pa = p(
+pa.displayName = "Progress";
+const fa = p(
   ({
     size: a = "md",
     className: t = "",
     ...e
   }, n) => {
-    const i = [
+    const l = [
       "strand-spinner",
       `strand-spinner--${a}`,
       t
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ _("span", { ref: n, className: i, role: "status", ...e, children: [
+    return /* @__PURE__ */ _("span", { ref: n, className: l, role: "status", ...e, children: [
       /* @__PURE__ */ s("span", { className: "strand-spinner__ring", "aria-hidden": "true" }),
       /* @__PURE__ */ s("span", { className: "strand-spinner__sr-only", children: "Loading" })
     ] });
   }
 );
-pa.displayName = "Spinner";
-const fa = p(
+fa.displayName = "Spinner";
+const _a = p(
   ({
     variant: a = "text",
     width: t,
     height: e,
     className: n = "",
-    ...i
+    ...l
   }, o) => {
-    const r = t ?? (a === "text" ? "100%" : void 0), l = a === "circle" ? r : e, c = [
+    const r = t ?? (a === "text" ? "100%" : void 0), i = a === "circle" ? r : e, c = [
       "strand-skeleton",
       `strand-skeleton--${a}`,
       "strand-skeleton--shimmer",
@@ -1323,46 +1333,47 @@ const fa = p(
         "aria-hidden": "true",
         style: {
           width: r,
-          height: l
+          height: i
         },
-        ...i
+        ...l
       }
     );
   }
 );
-fa.displayName = "Skeleton";
+_a.displayName = "Skeleton";
 export {
-  oa as Alert,
+  da as Alert,
   V as Avatar,
   U as Badge,
-  sa as Breadcrumb,
+  ta as Breadcrumb,
   E as Button,
   H as Card,
   M as Checkbox,
-  Q as Container,
+  Z as CodeBlock,
+  X as Container,
   W as DataReadout,
-  ca as Dialog,
-  X as Divider,
+  ua as Dialog,
+  Y as Divider,
   G as FormField,
-  J as Grid,
+  Q as Grid,
   K as Input,
-  aa as Link,
-  ta as Nav,
-  ha as Progress,
+  ea as Link,
+  na as Nav,
+  pa as Progress,
   P as Radio,
-  Y as Section,
+  aa as Section,
   L as Select,
-  fa as Skeleton,
+  _a as Skeleton,
   q as Slider,
-  pa as Spinner,
-  Z as Stack,
+  fa as Spinner,
+  J as Stack,
   F as Switch,
   z as Table,
-  ea as Tabs,
+  sa as Tabs,
   O as Tag,
   A as Textarea,
-  ia as Toast,
-  ra as ToastProvider,
-  ma as Tooltip,
-  ya as useToast
+  oa as Toast,
+  la as ToastProvider,
+  ha as Tooltip,
+  ga as useToast
 };