@dillingerstaffing/strand-ui 0.5.1 → 0.7.0

package/dist/index.js

@@ -1,49 +1,49 @@
 import { jsxs as _, jsx as s } from "preact/jsx-runtime";
-import { forwardRef as p } from "preact/compat";
-import { useRef as k, useCallback as v, useEffect as x, useState as B, useContext as R } from "preact/hooks";
+import { forwardRef as h } from "preact/compat";
+import { useRef as g, useCallback as N, useEffect as C, useState as B, useContext as R } from "preact/hooks";
 import { createContext as I } from "preact";
-const E = p(
+const E = h(
   ({
-    variant: a = "primary",
+    variant: e = "primary",
     size: t = "md",
-    loading: e = !1,
+    loading: a = !1,
     iconOnly: n = !1,
-    fullWidth: l = !1,
-    disabled: o = !1,
+    fullWidth: i = !1,
+    disabled: l = !1,
     className: r = "",
-    children: i,
-    onClick: c,
+    children: o,
+    onClick: d,
     type: u = "button",
-    ...d
-  }, h) => {
-    const m = o || e, f = [
+    ...c
+  }, p) => {
+    const m = l || a, f = [
       "strand-btn",
-      `strand-btn--${a}`,
+      `strand-btn--${e}`,
       `strand-btn--${t}`,
       n && "strand-btn--icon-only",
-      l && "strand-btn--full-width",
-      e && "strand-btn--loading",
+      i && "strand-btn--full-width",
+      a && "strand-btn--loading",
       r
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ _(
       "button",
       {
-        ref: h,
+        ref: p,
         type: u,
         className: f,
         disabled: m,
         "aria-disabled": m ? "true" : void 0,
-        "aria-busy": e ? "true" : void 0,
-        onClick: m ? void 0 : c,
-        ...d,
+        "aria-busy": a ? "true" : void 0,
+        onClick: m ? void 0 : d,
+        ...c,
         children: [
-          e && /* @__PURE__ */ s("span", { className: "strand-btn__spinner", "aria-hidden": "true" }),
+          a && /* @__PURE__ */ s("span", { className: "strand-btn__spinner", "aria-hidden": "true" }),
           /* @__PURE__ */ s(
             "span",
             {
               className: "strand-btn__content",
-              style: e ? { visibility: "hidden" } : void 0,
-              children: i
+              style: a ? { visibility: "hidden" } : void 0,
+              children: o
             }
           )
         ]
@@ -52,33 +52,33 @@ const E = p(
   }
 );
 E.displayName = "Button";
-const K = p(
+const L = h(
   ({
-    type: a = "text",
+    type: e = "text",
     error: t = !1,
-    leadingAddon: e,
+    leadingAddon: a,
     trailingAddon: n,
-    className: l = "",
-    disabled: o,
+    className: i = "",
+    disabled: l,
     ...r
-  }, i) => {
-    const c = [
+  }, o) => {
+    const d = [
       "strand-input",
       t && "strand-input--error",
-      o && "strand-input--disabled",
-      e && "strand-input--has-leading",
+      l && "strand-input--disabled",
+      a && "strand-input--has-leading",
       n && "strand-input--has-trailing",
-      l
+      i
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ _("div", { className: c, children: [
-      e && /* @__PURE__ */ s("span", { className: "strand-input__leading", "aria-hidden": "true", children: e }),
+    return /* @__PURE__ */ _("div", { className: d, children: [
+      a && /* @__PURE__ */ s("span", { className: "strand-input__leading", "aria-hidden": "true", children: a }),
       /* @__PURE__ */ s(
         "input",
         {
-          ref: i,
-          type: a,
+          ref: o,
+          type: e,
           className: "strand-input__field",
-          disabled: o,
+          disabled: l,
           "aria-invalid": t ? "true" : void 0,
           ...r
         }
@@ -87,73 +87,73 @@ const K = p(
     ] });
   }
 );
-K.displayName = "Input";
-const A = p(
+L.displayName = "Input";
+const K = h(
   ({
-    autoResize: a = !1,
+    autoResize: e = !1,
     showCount: t = !1,
-    error: e = !1,
+    error: a = !1,
     maxLength: n,
-    disabled: l,
-    className: o = "",
+    disabled: i,
+    className: l = "",
     value: r,
-    onInput: i,
-    ...c
+    onInput: o,
+    ...d
   }, u) => {
-    const d = k(null), h = v(
-      (g) => {
-        d.current = g, typeof u == "function" ? u(g) : u && (u.current = g);
+    const c = g(null), p = N(
+      (k) => {
+        c.current = k, typeof u == "function" ? u(k) : u && (u.current = k);
       },
       [u]
-    ), m = v(
-      (g) => {
-        a && d.current && (d.current.style.height = "auto", d.current.style.height = `${d.current.scrollHeight}px`), i && i(g);
+    ), m = N(
+      (k) => {
+        e && c.current && (c.current.style.height = "auto", c.current.style.height = `${c.current.scrollHeight}px`), o && o(k);
       },
-      [a, i]
+      [e, o]
     ), f = [
       "strand-textarea",
-      e && "strand-textarea--error",
-      l && "strand-textarea--disabled",
-      a && "strand-textarea--auto-resize",
-      o
-    ].filter(Boolean).join(" "), N = typeof r == "string" ? r.length : 0;
+      a && "strand-textarea--error",
+      i && "strand-textarea--disabled",
+      e && "strand-textarea--auto-resize",
+      l
+    ].filter(Boolean).join(" "), v = typeof r == "string" ? r.length : 0;
     return /* @__PURE__ */ _("div", { className: f, children: [
       /* @__PURE__ */ s(
         "textarea",
         {
-          ref: h,
+          ref: p,
           className: "strand-textarea__field",
-          disabled: l,
-          "aria-invalid": e ? "true" : void 0,
+          disabled: i,
+          "aria-invalid": a ? "true" : void 0,
           maxLength: n,
           value: r,
           onInput: m,
-          ...c
+          ...d
         }
       ),
       t && n != null && /* @__PURE__ */ _("span", { className: "strand-textarea__count", "aria-live": "polite", children: [
-        N,
+        v,
         "/",
         n
       ] })
     ] });
   }
 );
-A.displayName = "Textarea";
-const L = p(
+K.displayName = "Textarea";
+const M = h(
   ({
-    options: a,
+    options: e,
     value: t,
-    onChange: e,
+    onChange: a,
     disabled: n,
-    error: l = !1,
-    placeholder: o,
+    error: i = !1,
+    placeholder: l,
     className: r = "",
-    ...i
-  }, c) => {
+    ...o
+  }, d) => {
     const u = [
       "strand-select",
-      l && "strand-select--error",
+      i && "strand-select--error",
       n && "strand-select--disabled",
       r
     ].filter(Boolean).join(" ");
@@ -161,16 +161,16 @@ const L = p(
       /* @__PURE__ */ _(
         "select",
         {
-          ref: c,
+          ref: d,
           className: "strand-select__field",
           value: t,
-          onChange: e,
+          onChange: a,
           disabled: n,
-          "aria-invalid": l ? "true" : void 0,
-          ...i,
+          "aria-invalid": i ? "true" : void 0,
+          ...o,
           children: [
-            o && /* @__PURE__ */ s("option", { value: "", disabled: !0, children: o }),
-            a.map((d) => /* @__PURE__ */ s("option", { value: d.value, children: d.label }, d.value))
+            l && /* @__PURE__ */ s("option", { value: "", disabled: !0, children: l }),
+            e.map((c) => /* @__PURE__ */ s("option", { value: c.value, children: c.label }, c.value))
           ]
         }
       ),
@@ -178,28 +178,28 @@ const L = p(
     ] });
   }
 );
-L.displayName = "Select";
-const M = p(
+M.displayName = "Select";
+const A = h(
   ({
-    checked: a = !1,
+    checked: e = !1,
     indeterminate: t = !1,
-    onChange: e,
+    onChange: a,
     disabled: n = !1,
-    label: l,
-    className: o = "",
+    label: i,
+    className: l = "",
     ...r
-  }, i) => {
-    const c = k(null);
-    x(() => {
-      const f = typeof i == "function" ? c.current : (i == null ? void 0 : i.current) ?? c.current;
+  }, o) => {
+    const d = g(null);
+    C(() => {
+      const f = typeof o == "function" ? d.current : (o == null ? void 0 : o.current) ?? d.current;
       f && (f.indeterminate = t);
-    }, [t, i]);
+    }, [t, o]);
     const u = [
       "strand-checkbox",
-      a && "strand-checkbox--checked",
+      e && "strand-checkbox--checked",
       t && "strand-checkbox--indeterminate",
       n && "strand-checkbox--disabled",
-      o
+      l
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ _(
       "label",
@@ -208,8 +208,8 @@ const M = p(
         onKeyDown: (f) => {
           if (f.key === " " && !n) {
             f.preventDefault();
-            const N = c.current;
-            N && N.click();
+            const v = d.current;
+            v && v.click();
           }
         },
         children: [
@@ -217,14 +217,14 @@ const M = p(
             "input",
             {
               ref: (f) => {
-                c.current = f, typeof i == "function" ? i(f) : i && (i.current = f);
+                d.current = f, typeof o == "function" ? o(f) : o && (o.current = f);
               },
               type: "checkbox",
               className: "strand-checkbox__native",
-              checked: a,
+              checked: e,
               disabled: n,
-              onChange: n ? void 0 : e,
-              "aria-checked": t ? "mixed" : a ? "true" : "false",
+              onChange: n ? void 0 : a,
+              "aria-checked": t ? "mixed" : e ? "true" : "false",
               role: "checkbox",
               ...r
             }
@@ -248,7 +248,7 @@ const M = p(
                 }
               )
             }
-          ) : a ? /* @__PURE__ */ s(
+          ) : e ? /* @__PURE__ */ s(
             "svg",
             {
               className: "strand-checkbox__icon",
@@ -266,43 +266,43 @@ const M = p(
               )
             }
           ) : null }),
-          l && /* @__PURE__ */ s("span", { className: "strand-checkbox__label", children: l })
+          i && /* @__PURE__ */ s("span", { className: "strand-checkbox__label", children: i })
         ]
       }
     );
   }
 );
-M.displayName = "Checkbox";
-const P = p(
+A.displayName = "Checkbox";
+const P = h(
   ({
-    checked: a = !1,
+    checked: e = !1,
     onChange: t,
-    disabled: e = !1,
+    disabled: a = !1,
     label: n,
-    name: l,
-    value: o,
+    name: i,
+    value: l,
     className: r = "",
-    ...i
-  }, c) => {
+    ...o
+  }, d) => {
     const u = [
       "strand-radio",
-      a && "strand-radio--checked",
-      e && "strand-radio--disabled",
+      e && "strand-radio--checked",
+      a && "strand-radio--disabled",
       r
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ _("label", { className: u, children: [
       /* @__PURE__ */ s(
         "input",
         {
-          ref: c,
+          ref: d,
           type: "radio",
           className: "strand-radio__native",
-          checked: a,
-          disabled: e,
-          onChange: e ? void 0 : t,
-          name: l,
-          value: o,
-          ...i
+          checked: e,
+          disabled: a,
+          onChange: a ? void 0 : t,
+          name: i,
+          value: l,
+          ...o
         }
       ),
       /* @__PURE__ */ s("span", { className: "strand-radio__control", "aria-hidden": "true", children: /* @__PURE__ */ s("span", { className: "strand-radio__dot" }) }),
@@ -311,22 +311,22 @@ const P = p(
   }
 );
 P.displayName = "Radio";
-const F = p(
+const F = h(
   ({
-    checked: a = !1,
+    checked: e = !1,
     onChange: t,
-    disabled: e = !1,
+    disabled: a = !1,
     label: n,
-    className: l = "",
-    ...o
+    className: i = "",
+    ...l
   }, r) => {
-    const i = [
+    const o = [
       "strand-switch",
-      a && "strand-switch--checked",
-      e && "strand-switch--disabled",
-      l
+      e && "strand-switch--checked",
+      a && "strand-switch--disabled",
+      i
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ _("label", { className: i, children: [
+    return /* @__PURE__ */ _("label", { className: o, children: [
       /* @__PURE__ */ s(
         "button",
         {
@@ -334,15 +334,15 @@ const F = p(
           type: "button",
           role: "switch",
           className: "strand-switch__track",
-          "aria-checked": a ? "true" : "false",
-          disabled: e,
+          "aria-checked": e ? "true" : "false",
+          disabled: a,
           onClick: () => {
-            !e && t && t(!a);
+            !a && t && t(!e);
           },
-          onKeyDown: (d) => {
-            (d.key === " " || d.key === "Enter") && !e && (d.preventDefault(), t && t(!a));
+          onKeyDown: (c) => {
+            (c.key === " " || c.key === "Enter") && !a && (c.preventDefault(), t && t(!e));
           },
-          ...o,
+          ...l,
           children: /* @__PURE__ */ s("span", { className: "strand-switch__thumb", "aria-hidden": "true" })
         }
       ),
@@ -351,62 +351,62 @@ const F = p(
   }
 );
 F.displayName = "Switch";
-const q = p(
+const O = h(
   ({
-    min: a = 0,
+    min: e = 0,
     max: t = 100,
-    step: e = 1,
+    step: a = 1,
     value: n,
-    onChange: l,
-    disabled: o,
+    onChange: i,
+    disabled: l,
     className: r = "",
-    ...i
-  }, c) => {
+    ...o
+  }, d) => {
     const u = [
       "strand-slider",
-      o && "strand-slider--disabled",
+      l && "strand-slider--disabled",
       r
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ s("div", { className: u, children: /* @__PURE__ */ s(
       "input",
       {
-        ref: c,
+        ref: d,
         type: "range",
         className: "strand-slider__field",
-        min: a,
+        min: e,
         max: t,
-        step: e,
+        step: a,
         value: n,
-        onChange: l,
-        disabled: o,
-        "aria-valuemin": a,
+        onChange: i,
+        disabled: l,
+        "aria-valuemin": e,
         "aria-valuemax": t,
         "aria-valuenow": n,
-        ...i
+        ...o
       }
     ) });
   }
 );
-q.displayName = "Slider";
-const G = p(
+O.displayName = "Slider";
+const U = h(
   ({
-    label: a,
+    label: e,
     htmlFor: t,
-    hint: e,
+    hint: a,
     error: n,
-    required: l = !1,
-    className: o = "",
+    required: i = !1,
+    className: l = "",
     children: r
-  }, i) => {
-    const c = [
+  }, o) => {
+    const d = [
       "strand-form-field",
       n && "strand-form-field--error",
-      o
+      l
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ _("div", { ref: i, className: c, children: [
+    return /* @__PURE__ */ _("div", { ref: o, className: d, children: [
       /* @__PURE__ */ _("label", { className: "strand-form-field__label", htmlFor: t, children: [
-        a,
-        l && /* @__PURE__ */ s("span", { className: "strand-form-field__required", "aria-hidden": "true", children: "*" })
+        e,
+        i && /* @__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(
@@ -417,107 +417,107 @@ const G = p(
           role: "alert",
           children: n
         }
-      ) : e ? /* @__PURE__ */ s("p", { className: "strand-form-field__hint", id: `${t}-hint`, children: e }) : null
+      ) : a ? /* @__PURE__ */ s("p", { className: "strand-form-field__hint", id: `${t}-hint`, children: a }) : null
     ] });
   }
 );
-G.displayName = "FormField";
-const H = p(
+U.displayName = "FormField";
+const V = h(
   ({
-    variant: a = "elevated",
+    variant: e = "elevated",
     padding: t = "md",
-    className: e = "",
+    className: a = "",
     children: n,
-    ...l
-  }, o) => {
+    ...i
+  }, l) => {
     const r = [
       "strand-card",
-      `strand-card--${a}`,
+      `strand-card--${e}`,
       `strand-card--pad-${t}`,
-      e
+      a
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ s("div", { ref: o, className: r, ...l, children: n });
+    return /* @__PURE__ */ s("div", { ref: l, className: r, ...i, children: n });
   }
 );
-H.displayName = "Card";
-const U = p(
+V.displayName = "Card";
+const q = h(
   ({
-    variant: a = "count",
+    variant: e = "count",
     status: t = "default",
-    count: e,
+    count: a,
     maxCount: n = 99,
-    className: l = "",
-    children: o,
+    className: i = "",
+    children: l,
     ...r
-  }, 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 = [
+  }, o) => {
+    const d = l != null && l !== !1, u = e === "count" ? a != null && a > n ? `${n}+` : a : null, c = e === "dot" ? "Status indicator" : a != null ? `${a} notifications` : void 0, p = [
       "strand-badge__indicator",
-      `strand-badge--${a}`,
+      `strand-badge--${e}`,
       `strand-badge--${t}`
-    ].filter(Boolean).join(" "), m = /* @__PURE__ */ s("span", { className: h, "aria-label": d, role: "status", children: u });
-    if (!c) {
-      const N = [
+    ].filter(Boolean).join(" "), m = /* @__PURE__ */ s("span", { className: p, "aria-label": c, role: "status", children: u });
+    if (!d) {
+      const v = [
         "strand-badge",
         "strand-badge--inline",
-        l
+        i
       ].filter(Boolean).join(" ");
-      return /* @__PURE__ */ s("span", { ref: i, className: N, ...r, children: m });
+      return /* @__PURE__ */ s("span", { ref: o, className: v, ...r, children: m });
     }
-    const f = ["strand-badge", l].filter(Boolean).join(" ");
-    return /* @__PURE__ */ _("span", { ref: i, className: f, ...r, children: [
-      o,
+    const f = ["strand-badge", i].filter(Boolean).join(" ");
+    return /* @__PURE__ */ _("span", { ref: o, className: f, ...r, children: [
+      l,
       m
     ] });
   }
 );
-U.displayName = "Badge";
-const V = p(
+q.displayName = "Badge";
+const G = h(
   ({
-    src: a,
+    src: e,
     alt: t = "",
-    initials: e = "",
+    initials: a = "",
     size: n = "md",
-    className: l = "",
-    ...o
+    className: i = "",
+    ...l
   }, r) => {
-    const [i, c] = B(!1), u = v(() => {
-      c(!0);
-    }, []), d = a && !i, h = e.slice(0, 2).toUpperCase(), m = [
+    const [o, d] = B(!1), u = N(() => {
+      d(!0);
+    }, []), c = e && !o, p = a.slice(0, 2).toUpperCase(), m = [
       "strand-avatar",
       `strand-avatar--${n}`,
-      l
+      i
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ s("div", { ref: r, className: m, role: "img", "aria-label": t || h, ...o, children: d ? /* @__PURE__ */ s(
+    return /* @__PURE__ */ s("div", { ref: r, className: m, role: "img", "aria-label": t || p, ...l, children: c ? /* @__PURE__ */ s(
       "img",
       {
         className: "strand-avatar__img",
-        src: a,
+        src: e,
         alt: t,
         onError: u
       }
-    ) : /* @__PURE__ */ s("span", { className: "strand-avatar__initials", "aria-hidden": "true", children: h }) });
+    ) : /* @__PURE__ */ s("span", { className: "strand-avatar__initials", "aria-hidden": "true", children: p }) });
   }
 );
-V.displayName = "Avatar";
-const O = p(
+G.displayName = "Avatar";
+const H = h(
   ({
-    variant: a = "solid",
+    variant: e = "solid",
     status: t = "default",
-    removable: e = !1,
+    removable: a = !1,
     onRemove: n,
-    className: l = "",
-    children: o,
+    className: i = "",
+    children: l,
     ...r
-  }, i) => {
-    const c = [
+  }, o) => {
+    const d = [
       "strand-tag",
-      `strand-tag--${a}`,
+      `strand-tag--${e}`,
       `strand-tag--${t}`,
-      l
+      i
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ _("span", { ref: i, className: c, ...r, children: [
-      /* @__PURE__ */ s("span", { className: "strand-tag__text", children: o }),
-      e && /* @__PURE__ */ s(
+    return /* @__PURE__ */ _("span", { ref: o, className: d, ...r, children: [
+      /* @__PURE__ */ s("span", { className: "strand-tag__text", children: l }),
+      a && /* @__PURE__ */ s(
         "button",
         {
           type: "button",
@@ -548,18 +548,18 @@ const O = p(
     ] });
   }
 );
-O.displayName = "Tag";
-const z = p(
-  ({ columns: a, data: t, onSort: e, className: n = "", ...l }, o) => {
-    const [r, i] = B(null), [c, u] = B("asc"), d = v(
+H.displayName = "Tag";
+const z = h(
+  ({ columns: e, data: t, onSort: a, className: n = "", ...i }, l) => {
+    const [r, o] = B(null), [d, u] = B("asc"), c = N(
       (m) => {
-        const f = r === m && c === "asc" ? "desc" : "asc";
-        i(m), u(f), e == null || e(m, f);
+        const f = r === m && d === "asc" ? "desc" : "asc";
+        o(m), u(f), a == null || a(m, f);
       },
-      [r, c, e]
-    ), h = ["strand-table-wrapper", n].filter(Boolean).join(" ");
-    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(
+      [r, d, a]
+    ), p = ["strand-table-wrapper", n].filter(Boolean).join(" ");
+    return /* @__PURE__ */ s("div", { ref: l, className: p, ...i, children: /* @__PURE__ */ _("table", { className: "strand-table", children: [
+      /* @__PURE__ */ s("thead", { className: "strand-table__head", children: /* @__PURE__ */ s("tr", { children: e.map((m) => /* @__PURE__ */ s(
         "th",
         {
           className: "strand-table__th",
@@ -569,7 +569,7 @@ const z = p(
             {
               type: "button",
               className: "strand-table__sort-btn",
-              onClick: () => d(m.key),
+              onClick: () => c(m.key),
               "aria-label": `Sort by ${m.header}`,
               children: [
                 m.header,
@@ -578,7 +578,7 @@ const z = p(
                   {
                     className: "strand-table__sort-indicator",
                     "aria-hidden": "true",
-                    children: r === m.key ? c === "asc" ? "↑" : "↓" : "↕"
+                    children: r === m.key ? d === "asc" ? "↑" : "↓" : "↕"
                   }
                 )
               ]
@@ -587,119 +587,119 @@ const z = p(
         },
         m.key
       )) }) }),
-      /* @__PURE__ */ s("tbody", { className: "strand-table__body", children: t.map((m, f) => /* @__PURE__ */ s("tr", { className: "strand-table__row", children: a.map((N) => /* @__PURE__ */ s("td", { className: "strand-table__td", children: m[N.key] }, N.key)) }, f)) })
+      /* @__PURE__ */ s("tbody", { className: "strand-table__body", children: t.map((m, f) => /* @__PURE__ */ s("tr", { className: "strand-table__row", children: e.map((v) => /* @__PURE__ */ s("td", { className: "strand-table__td", children: m[v.key] }, v.key)) }, f)) })
     ] }) });
   }
 );
 z.displayName = "Table";
-const W = p(
-  ({ label: a, value: t, size: e, className: n = "", ...l }, o) => {
+const W = h(
+  ({ label: e, value: t, size: a, className: n = "", ...i }, l) => {
     const r = [
       "strand-data-readout",
-      e && e !== "md" ? `strand-data-readout--${e}` : "",
+      a && a !== "md" ? `strand-data-readout--${a}` : "",
       n
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ _("div", { ref: o, className: r, ...l, children: [
-      /* @__PURE__ */ s("span", { className: "strand-data-readout__label", children: a }),
+    return /* @__PURE__ */ _("div", { ref: l, className: r, ...i, children: [
+      /* @__PURE__ */ s("span", { className: "strand-data-readout__label", children: e }),
       /* @__PURE__ */ s("span", { className: "strand-data-readout__value", children: t })
     ] });
   }
 );
 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: [
+const Z = h(
+  ({ code: e, language: t, className: a = "", ...n }, i) => {
+    const l = ["strand-code-block", a].filter(Boolean).join(" ");
+    return /* @__PURE__ */ _("div", { ref: i, className: l, ...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 }) })
+      /* @__PURE__ */ s("pre", { className: "strand-code-block__pre", children: /* @__PURE__ */ s("code", { children: e }) })
     ] });
   }
 );
 Z.displayName = "CodeBlock";
-const J = p(
+const J = h(
   ({
-    direction: a = "vertical",
+    direction: e = "vertical",
     gap: t = 4,
-    align: e = "stretch",
+    align: a = "stretch",
     wrap: n = !1,
-    justify: l,
-    className: o = "",
+    justify: i,
+    className: l = "",
     style: r,
-    children: i,
-    ...c
+    children: o,
+    ...d
   }, u) => {
-    const d = [
+    const c = [
       "strand-stack",
-      `strand-stack--${a}`,
-      e !== "stretch" && `strand-stack--align-${e}`,
-      l && `strand-stack--justify-${l}`,
+      `strand-stack--${e}`,
+      a !== "stretch" && `strand-stack--align-${a}`,
+      i && `strand-stack--justify-${i}`,
       n && "strand-stack--wrap",
-      o
-    ].filter(Boolean).join(" "), h = {
+      l
+    ].filter(Boolean).join(" "), p = {
       gap: `var(--strand-space-${t})`
     };
     return /* @__PURE__ */ s(
       "div",
       {
         ref: u,
-        className: d,
-        style: { ...h, ...r },
-        ...c,
-        children: i
+        className: c,
+        style: { ...p, ...r },
+        ...d,
+        children: o
       }
     );
   }
 );
 J.displayName = "Stack";
-const Q = p(
+const Q = h(
   ({
-    columns: a = 1,
+    columns: e = 1,
     gap: t = 4,
-    className: e = "",
+    className: a = "",
     style: n,
-    children: l,
-    ...o
+    children: i,
+    ...l
   }, r) => {
-    const i = ["strand-grid", e].filter(Boolean).join(" "), c = {
-      gridTemplateColumns: `repeat(${a}, 1fr)`,
+    const o = ["strand-grid", a].filter(Boolean).join(" "), d = {
+      gridTemplateColumns: `repeat(${e}, 1fr)`,
       gap: `var(--strand-space-${t})`
     };
     return /* @__PURE__ */ s(
       "div",
       {
         ref: r,
-        className: i,
-        style: { ...c, ...n },
-        ...o,
-        children: l
+        className: o,
+        style: { ...d, ...n },
+        ...l,
+        children: i
       }
     );
   }
 );
 Q.displayName = "Grid";
-const X = p(
+const X = h(
   ({
-    size: a = "default",
+    size: e = "default",
     className: t = "",
-    children: e,
+    children: a,
     ...n
-  }, l) => {
-    const o = [
+  }, i) => {
+    const l = [
       "strand-container",
-      `strand-container--${a}`,
+      `strand-container--${e}`,
       t
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ s("div", { ref: l, className: o, ...n, children: e });
+    return /* @__PURE__ */ s("div", { ref: i, className: l, ...n, children: a });
   }
 );
 X.displayName = "Container";
-const Y = p(
-  ({ direction: a = "horizontal", label: t, className: e = "" }, n) => {
-    if (a === "vertical") {
+const Y = h(
+  ({ direction: e = "horizontal", label: t, className: a = "" }, n) => {
+    if (e === "vertical") {
       const r = [
         "strand-divider",
         "strand-divider--vertical",
-        e
+        a
       ].filter(Boolean).join(" ");
       return /* @__PURE__ */ s(
         "div",
@@ -716,7 +716,7 @@ const Y = p(
         "strand-divider",
         "strand-divider--horizontal",
         "strand-divider--labeled",
-        e
+        a
       ].filter(Boolean).join(" ");
       return /* @__PURE__ */ _(
         "div",
@@ -733,10 +733,10 @@ const Y = p(
         }
       );
     }
-    const o = [
+    const l = [
       "strand-divider",
       "strand-divider--horizontal",
-      e
+      a
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ s(
       "hr",
@@ -744,143 +744,143 @@ const Y = p(
         ref: n,
         role: "separator",
         "aria-orientation": "horizontal",
-        className: o
+        className: l
       }
     );
   }
 );
 Y.displayName = "Divider";
-const aa = p(
+const ee = h(
   ({
-    variant: a = "standard",
+    variant: e = "standard",
     background: t = "primary",
-    className: e = "",
+    className: a = "",
     children: n,
-    ...l
-  }, o) => {
+    ...i
+  }, l) => {
     const r = [
       "strand-section",
-      `strand-section--${a}`,
+      `strand-section--${e}`,
       `strand-section--bg-${t}`,
-      e
+      a
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ s("section", { ref: o, className: r, ...l, children: n });
+    return /* @__PURE__ */ s("section", { ref: l, className: r, ...i, children: n });
   }
 );
-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(" ");
+ee.displayName = "Section";
+const ae = h(
+  ({ href: e, external: t = !1, className: a = "", children: n, ...i }, l) => {
+    const r = ["strand-link", a].filter(Boolean).join(" ");
     return /* @__PURE__ */ s(
       "a",
       {
-        ref: o,
-        href: a,
+        ref: l,
+        href: e,
         className: r,
         ...t && { target: "_blank", rel: "noopener noreferrer" },
-        ...l,
+        ...i,
         children: n
       }
     );
   }
 );
-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) => {
+ae.displayName = "Link";
+const se = h(
+  ({ tabs: e, activeTab: t, onChange: a, className: n = "", ...i }, l) => {
+    const r = g(null), o = ["strand-tabs", n].filter(Boolean).join(" "), d = N(
+      (c) => {
         var m, f;
-        const h = a[d];
-        if (h) {
-          e(h.id);
-          const N = (m = r.current) == null ? void 0 : m.querySelectorAll(
+        const p = e[c];
+        if (p) {
+          a(p.id);
+          const v = (m = r.current) == null ? void 0 : m.querySelectorAll(
             '[role="tab"]'
           );
-          (f = N == null ? void 0 : N[d]) == null || f.focus();
+          (f = v == null ? void 0 : v[c]) == null || f.focus();
         }
       },
-      [a, e]
-    ), u = v(
-      (d) => {
-        const h = a.findIndex((f) => f.id === t);
+      [e, a]
+    ), u = N(
+      (c) => {
+        const p = e.findIndex((f) => f.id === t);
         let m = null;
-        switch (d.key) {
+        switch (c.key) {
           case "ArrowRight":
-            m = (h + 1) % a.length;
+            m = (p + 1) % e.length;
             break;
           case "ArrowLeft":
-            m = (h - 1 + a.length) % a.length;
+            m = (p - 1 + e.length) % e.length;
             break;
           case "Home":
             m = 0;
             break;
           case "End":
-            m = a.length - 1;
+            m = e.length - 1;
             break;
           default:
             return;
         }
-        d.preventDefault(), c(m);
+        c.preventDefault(), d(m);
       },
-      [a, t, c]
+      [e, t, d]
     );
-    return /* @__PURE__ */ _("div", { ref: o, className: i, ...l, children: [
+    return /* @__PURE__ */ _("div", { ref: l, className: o, ...i, children: [
       /* @__PURE__ */ s(
         "div",
         {
           ref: r,
           role: "tablist",
           onKeyDown: u,
-          children: a.map((d) => {
-            const h = d.id === t, m = [
+          children: e.map((c) => {
+            const p = c.id === t, m = [
               "strand-tabs__tab",
-              h && "strand-tabs__tab--active"
+              p && "strand-tabs__tab--active"
             ].filter(Boolean).join(" ");
             return /* @__PURE__ */ s(
               "button",
               {
-                id: `tab-${d.id}`,
+                id: `tab-${c.id}`,
                 role: "tab",
                 type: "button",
                 className: m,
-                "aria-selected": h ? "true" : "false",
-                "aria-controls": `panel-${d.id}`,
-                tabIndex: h ? 0 : -1,
-                onClick: () => e(d.id),
-                children: d.label
+                "aria-selected": p ? "true" : "false",
+                "aria-controls": `panel-${c.id}`,
+                tabIndex: p ? 0 : -1,
+                onClick: () => a(c.id),
+                children: c.label
               },
-              d.id
+              c.id
             );
           })
         }
       ),
-      a.map((d) => {
-        const h = d.id === t;
+      e.map((c) => {
+        const p = c.id === t;
         return /* @__PURE__ */ s(
           "div",
           {
-            id: `panel-${d.id}`,
+            id: `panel-${c.id}`,
             role: "tabpanel",
-            "aria-labelledby": `tab-${d.id}`,
-            hidden: !h,
+            "aria-labelledby": `tab-${c.id}`,
+            hidden: !p,
             tabIndex: 0,
-            children: d.content
+            children: c.content
           },
-          d.id
+          c.id
         );
       })
     ] });
   }
 );
-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: 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;
+se.displayName = "Tabs";
+const te = h(
+  ({ items: e, separator: t = "/", className: a = "", ...n }, i) => {
+    const l = ["strand-breadcrumb", a].filter(Boolean).join(" ");
+    return /* @__PURE__ */ s("nav", { ref: i, "aria-label": "Breadcrumb", className: l, ...n, children: /* @__PURE__ */ s("ol", { className: "strand-breadcrumb__list", children: e.map((r, o) => {
+      const d = o === e.length - 1;
       return /* @__PURE__ */ _("li", { className: "strand-breadcrumb__item", children: [
-        i > 0 && /* @__PURE__ */ s("span", { className: "strand-breadcrumb__separator", "aria-hidden": "true", children: t }),
-        c ? /* @__PURE__ */ s(
+        o > 0 && /* @__PURE__ */ s("span", { className: "strand-breadcrumb__separator", "aria-hidden": "true", children: t }),
+        d ? /* @__PURE__ */ s(
           "span",
           {
             className: "strand-breadcrumb__current",
@@ -888,36 +888,36 @@ const ta = p(
             children: r.label
           }
         ) : /* @__PURE__ */ s("a", { href: r.href, className: "strand-breadcrumb__link", children: r.label })
-      ] }, `${r.label}-${i}`);
+      ] }, `${r.label}-${o}`);
     }) }) });
   }
 );
-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);
+te.displayName = "Breadcrumb";
+const ne = h(
+  ({ logo: e, items: t = [], actions: a, className: n = "", ...i }, l) => {
+    const [r, o] = B(!1), d = N(() => {
+      o((c) => !c);
     }, []), u = ["strand-nav", n].filter(Boolean).join(" ");
-    return /* @__PURE__ */ _("nav", { ref: o, className: u, "aria-label": "Main navigation", ...l, children: [
+    return /* @__PURE__ */ _("nav", { ref: l, className: u, "aria-label": "Main navigation", ...i, 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) => {
-          const h = [
+        e && /* @__PURE__ */ s("div", { className: "strand-nav__logo", children: e }),
+        /* @__PURE__ */ s("div", { className: "strand-nav__items", children: t.map((c) => {
+          const p = [
             "strand-nav__link",
-            d.active && "strand-nav__link--active"
+            c.active && "strand-nav__link--active"
           ].filter(Boolean).join(" ");
           return /* @__PURE__ */ s(
             "a",
             {
-              href: d.href,
-              className: h,
-              "aria-current": d.active ? "page" : void 0,
-              children: d.label
+              href: c.href,
+              className: p,
+              "aria-current": c.active ? "page" : void 0,
+              children: c.label
             },
-            d.href
+            c.href
           );
         }) }),
-        e && /* @__PURE__ */ s("div", { className: "strand-nav__actions", children: e }),
+        a && /* @__PURE__ */ s("div", { className: "strand-nav__actions", children: a }),
         /* @__PURE__ */ s(
           "button",
           {
@@ -925,78 +925,79 @@ const na = p(
             className: "strand-nav__hamburger",
             "aria-expanded": r ? "true" : "false",
             "aria-label": r ? "Close menu" : "Menu",
-            onClick: c,
+            onClick: d,
             children: /* @__PURE__ */ s("span", { className: "strand-nav__hamburger-icon", "aria-hidden": "true" })
           }
         )
       ] }),
-      r && /* @__PURE__ */ s("div", { className: "strand-nav__mobile-menu", children: t.map((d) => {
-        const h = [
+      r && /* @__PURE__ */ s("div", { className: "strand-nav__mobile-menu", children: t.map((c) => {
+        const p = [
           "strand-nav__mobile-link",
-          d.active && "strand-nav__mobile-link--active"
+          c.active && "strand-nav__mobile-link--active"
         ].filter(Boolean).join(" ");
         return /* @__PURE__ */ s(
           "a",
           {
-            href: d.href,
-            className: h,
-            "aria-current": d.active ? "page" : void 0,
-            children: d.label
+            href: c.href,
+            className: p,
+            "aria-current": c.active ? "page" : void 0,
+            children: c.label
           },
-          d.href
+          c.href
         );
       }) })
     ] });
   }
 );
-na.displayName = "Nav";
-const S = I(null);
-function ga() {
-  const a = R(S);
-  if (!a)
+ne.displayName = "Nav";
+const D = I(null);
+function we() {
+  const e = R(D);
+  if (!e)
     throw new Error("useToast must be used within a ToastProvider");
-  return a;
+  return e;
 }
-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: ++ra,
-      message: i.message,
-      status: i.status ?? "info",
-      duration: i.duration ?? 5e3
+let re = 0;
+const le = ({ children: e, className: t = "" }) => {
+  const [a, n] = B([]), i = N((o) => {
+    n((d) => d.filter((u) => u.id !== o));
+  }, []), l = N((o) => {
+    const d = {
+      id: ++re,
+      message: o.message,
+      status: o.status ?? "info",
+      duration: o.duration ?? 5e3
     };
-    n((u) => [...u, c]);
+    n((u) => [...u, d]);
   }, []), 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((i) => /* @__PURE__ */ s(
-      ia,
+  return /* @__PURE__ */ _(D.Provider, { value: { toast: l }, children: [
+    e,
+    a.length > 0 && /* @__PURE__ */ s("div", { className: r, children: a.map((o) => /* @__PURE__ */ s(
+      ie,
       {
-        entry: i,
-        onDismiss: () => l(i.id)
+        entry: o,
+        onDismiss: () => i(o.id)
       },
-      i.id
+      o.id
     )) })
   ] });
 };
-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", l = ["strand-toast", `strand-toast--${a.status}`].filter(Boolean).join(" ");
+le.displayName = "ToastProvider";
+function ie({ entry: e, onDismiss: t }) {
+  const a = g(null);
+  C(() => (e.duration > 0 && (a.current = setTimeout(t, e.duration)), () => {
+    a.current !== null && clearTimeout(a.current);
+  }), [e.duration, t]);
+  const n = e.status === "error" || e.status === "warning", i = ["strand-toast", `strand-toast--${e.status}`].filter(Boolean).join(" "), l = e.status === "success" ? "COMPLETE" : e.status.toUpperCase();
   return /* @__PURE__ */ _(
     "div",
     {
-      className: l,
+      className: i,
       role: "status",
       "aria-live": n ? "assertive" : "polite",
       children: [
-        /* @__PURE__ */ s("span", { className: "strand-toast__message", children: a.message }),
+        /* @__PURE__ */ s("span", { className: "strand-toast__status", children: l }),
+        /* @__PURE__ */ s("span", { className: "strand-toast__message", children: e.message }),
         /* @__PURE__ */ s(
           "button",
           {
@@ -1011,30 +1012,31 @@ function ia({ entry: a, onDismiss: t }) {
     }
   );
 }
-const oa = p(
-  ({ status: a = "info", message: t, onDismiss: e, className: n = "", ...l }, o) => {
-    const r = a === "error" || a === "warning", i = [
+const oe = h(
+  ({ status: e = "info", message: t, onDismiss: a, className: n = "", ...i }, l) => {
+    const r = e === "error" || e === "warning", o = [
       "strand-toast",
-      `strand-toast--${a}`,
+      `strand-toast--${e}`,
       n
-    ].filter(Boolean).join(" ");
+    ].filter(Boolean).join(" "), d = e === "success" ? "COMPLETE" : e.toUpperCase();
     return /* @__PURE__ */ _(
       "div",
       {
-        ref: o,
-        className: i,
+        ref: l,
+        className: o,
         role: "status",
         "aria-live": r ? "assertive" : "polite",
-        ...l,
+        ...i,
         children: [
+          /* @__PURE__ */ s("span", { className: "strand-toast__status", children: d }),
           /* @__PURE__ */ s("span", { className: "strand-toast__message", children: t }),
-          e && /* @__PURE__ */ s(
+          a && /* @__PURE__ */ s(
             "button",
             {
               type: "button",
               className: "strand-toast__dismiss",
               "aria-label": "Dismiss",
-              onClick: e,
+              onClick: a,
               children: "×"
             }
           )
@@ -1043,54 +1045,55 @@ const oa = p(
     );
   }
 );
-oa.displayName = "Toast";
-const da = p(
+oe.displayName = "Toast";
+const de = h(
   ({
-    status: a = "info",
+    status: e = "info",
     dismissible: t = !1,
-    onDismiss: e,
+    onDismiss: a,
     className: n = "",
-    children: l,
-    ...o
+    children: i,
+    ...l
   }, r) => {
-    const i = a === "error" || a === "warning" ? "alert" : "status", c = [
+    const o = e === "error" || e === "warning" ? "alert" : "status", d = [
       "strand-alert",
-      `strand-alert--${a}`,
+      `strand-alert--${e}`,
       n
-    ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ _("div", { ref: r, className: c, role: i, ...o, children: [
-      /* @__PURE__ */ s("div", { className: "strand-alert__content", children: l }),
+    ].filter(Boolean).join(" "), u = e === "success" ? "COMPLETE" : e.toUpperCase();
+    return /* @__PURE__ */ _("div", { ref: r, className: d, role: o, ...l, children: [
+      /* @__PURE__ */ s("span", { className: "strand-alert__status", children: u }),
+      /* @__PURE__ */ s("div", { className: "strand-alert__content", children: i }),
       t && /* @__PURE__ */ s(
         "button",
         {
           type: "button",
           className: "strand-alert__dismiss",
           "aria-label": "Dismiss",
-          onClick: e,
+          onClick: a,
           children: "×"
         }
       )
     ] });
   }
 );
-da.displayName = "Alert";
+de.displayName = "Alert";
 const T = 'a[href], button:not(:disabled), textarea:not(:disabled), input:not(:disabled), select:not(:disabled), [tabindex]:not([tabindex="-1"])';
-let ca = 0;
-const ua = p(
+let ce = 0;
+const ue = h(
   ({
-    open: a,
+    open: e,
     onClose: t,
-    title: e,
+    title: a,
     closeOnOutsideClick: n = !0,
-    closeOnEscape: l = !0,
-    className: o = "",
+    closeOnEscape: i = !0,
+    className: l = "",
     children: r,
-    ...i
-  }, c) => {
-    const u = k(null), d = k(null), m = k(`strand-dialog-title-${++ca}`).current;
-    x(() => {
-      if (!a) return;
-      d.current = document.activeElement;
+    ...o
+  }, d) => {
+    const u = g(null), c = g(null), m = g(`strand-dialog-title-${++ce}`).current;
+    C(() => {
+      if (!e) return;
+      c.current = document.activeElement;
       const b = requestAnimationFrame(() => {
         const y = u.current;
         if (!y) return;
@@ -1099,19 +1102,19 @@ const ua = p(
       });
       return () => {
         cancelAnimationFrame(b);
-        const y = d.current;
+        const y = c.current;
         y && y instanceof HTMLElement && y.focus();
       };
-    }, [a]), x(() => {
-      if (!a) return;
+    }, [e]), C(() => {
+      if (!e) return;
       const b = document.body.style.overflow;
       return document.body.style.overflow = "hidden", () => {
         document.body.style.overflow = b;
       };
-    }, [a]);
-    const f = v(
+    }, [e]);
+    const f = N(
       (b) => {
-        if (b.key === "Escape" && l) {
+        if (b.key === "Escape" && i) {
           b.stopPropagation(), t();
           return;
         }
@@ -1122,39 +1125,39 @@ const ua = p(
             y.querySelectorAll(T)
           );
           if (w.length === 0) return;
-          const $ = w[0], j = w[w.length - 1];
-          b.shiftKey ? document.activeElement === $ && (b.preventDefault(), j.focus()) : document.activeElement === j && (b.preventDefault(), $.focus());
+          const j = w[0], $ = w[w.length - 1];
+          b.shiftKey ? document.activeElement === j && (b.preventDefault(), $.focus()) : document.activeElement === $ && (b.preventDefault(), j.focus());
         }
       },
-      [l, t]
-    ), N = v(
+      [i, t]
+    ), v = N(
       (b) => {
         n && b.target === b.currentTarget && t();
       },
       [n, t]
     );
-    if (!a) return null;
-    const g = ["strand-dialog__panel", o].filter(Boolean).join(" ");
+    if (!e) return null;
+    const k = ["strand-dialog__panel", l].filter(Boolean).join(" ");
     return /* @__PURE__ */ s(
       "div",
       {
         className: "strand-dialog__backdrop",
-        onClick: N,
+        onClick: v,
         onKeyDown: f,
         children: /* @__PURE__ */ _(
           "div",
           {
             ref: (b) => {
-              u.current = b, typeof c == "function" ? c(b) : c && (c.current = b);
+              u.current = b, typeof d == "function" ? d(b) : d && (d.current = b);
             },
-            className: g,
+            className: k,
             role: "dialog",
             "aria-modal": "true",
-            "aria-labelledby": e ? m : void 0,
+            "aria-labelledby": a ? m : void 0,
             tabIndex: -1,
-            ...i,
+            ...o,
             children: [
-              e && /* @__PURE__ */ s("div", { className: "strand-dialog__header", children: /* @__PURE__ */ s("h2", { id: m, className: "strand-dialog__title", children: e }) }),
+              a && /* @__PURE__ */ s("div", { className: "strand-dialog__header", children: /* @__PURE__ */ s("h2", { id: m, className: "strand-dialog__title", children: a }) }),
               /* @__PURE__ */ s(
                 "button",
                 {
@@ -1173,49 +1176,49 @@ const ua = p(
     );
   }
 );
-ua.displayName = "Dialog";
-let ma = 0;
-const ha = p(
+ue.displayName = "Dialog";
+let me = 0;
+const pe = h(
   ({
-    content: a,
+    content: e,
     position: t = "top",
-    delay: e = 200,
+    delay: a = 200,
     className: n = "",
-    children: l,
-    ...o
+    children: i,
+    ...l
   }, r) => {
-    const [i, c] = B(!1), u = k(null), h = k(`strand-tooltip-${++ma}`).current, m = v(() => {
+    const [o, d] = B(!1), u = g(null), p = g(`strand-tooltip-${++me}`).current, m = N(() => {
       u.current = setTimeout(() => {
-        c(!0);
-      }, e);
-    }, [e]), f = v(() => {
-      u.current !== null && (clearTimeout(u.current), u.current = null), c(!1);
-    }, []), N = ["strand-tooltip__wrapper", n].filter(Boolean).join(" "), g = [
+        d(!0);
+      }, a);
+    }, [a]), f = N(() => {
+      u.current !== null && (clearTimeout(u.current), u.current = null), d(!1);
+    }, []), v = ["strand-tooltip__wrapper", n].filter(Boolean).join(" "), k = [
       "strand-tooltip",
       `strand-tooltip--${t}`,
-      i && "strand-tooltip--visible"
+      o && "strand-tooltip--visible"
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ _(
       "span",
       {
         ref: r,
-        className: N,
+        className: v,
         onMouseEnter: m,
         onMouseLeave: f,
         onFocus: m,
         onBlur: f,
-        "aria-describedby": h,
-        ...o,
+        "aria-describedby": p,
+        ...l,
         children: [
-          l,
+          i,
           /* @__PURE__ */ s(
             "span",
             {
-              id: h,
-              className: g,
+              id: p,
+              className: k,
               role: "tooltip",
-              "aria-hidden": !i,
-              children: a
+              "aria-hidden": !o,
+              children: e
             }
           )
         ]
@@ -1223,29 +1226,29 @@ const ha = p(
     );
   }
 );
-ha.displayName = "Tooltip";
-const D = { sm: 24, md: 40, lg: 56 }, C = 3, pa = p(
+pe.displayName = "Tooltip";
+const S = { sm: 24, md: 40, lg: 56 }, x = 3, he = h(
   ({
-    variant: a = "bar",
+    variant: e = "bar",
     value: t,
-    size: e = "md",
+    size: a = "md",
     className: n = "",
-    ...l
-  }, o) => {
-    const r = t != null, i = [
+    ...i
+  }, l) => {
+    const r = t != null, o = [
       "strand-progress",
-      `strand-progress--${a}`,
       `strand-progress--${e}`,
+      `strand-progress--${a}`,
       !r && "strand-progress--indeterminate",
       n
-    ].filter(Boolean).join(" "), c = {
+    ].filter(Boolean).join(" "), d = {
       role: "progressbar",
       "aria-valuemin": 0,
       "aria-valuemax": 100
     };
-    if (r && (c["aria-valuenow"] = t), a === "ring") {
-      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__ */ _(
+    if (r && (d["aria-valuenow"] = t), e === "ring") {
+      const u = S[a] ?? S.md, c = (u - x) / 2, p = 2 * Math.PI * c, m = r ? p - p * t / 100 : 0;
+      return /* @__PURE__ */ s("div", { ref: l, className: o, ...d, ...i, children: /* @__PURE__ */ _(
         "svg",
         {
           width: u,
@@ -1258,9 +1261,9 @@ const D = { sm: 24, md: 40, lg: 56 }, C = 3, pa = p(
               {
                 cx: u / 2,
                 cy: u / 2,
-                r: d,
+                r: c,
                 fill: "none",
-                "stroke-width": C,
+                "stroke-width": x,
                 className: "strand-progress__track"
               }
             ),
@@ -1269,10 +1272,10 @@ const D = { sm: 24, md: 40, lg: 56 }, C = 3, pa = p(
               {
                 cx: u / 2,
                 cy: u / 2,
-                r: d,
+                r: c,
                 fill: "none",
-                "stroke-width": C,
-                "stroke-dasharray": h,
+                "stroke-width": x,
+                "stroke-dasharray": p,
                 "stroke-dashoffset": r ? m : void 0,
                 "stroke-linecap": "round",
                 className: "strand-progress__fill",
@@ -1283,7 +1286,7 @@ const D = { sm: 24, md: 40, lg: 56 }, C = 3, pa = p(
         }
       ) });
     }
-    return /* @__PURE__ */ s("div", { ref: o, className: i, ...c, ...l, children: /* @__PURE__ */ s(
+    return /* @__PURE__ */ s("div", { ref: l, className: o, ...d, ...i, children: /* @__PURE__ */ s(
       "div",
       {
         className: "strand-progress__fill",
@@ -1292,88 +1295,129 @@ const D = { sm: 24, md: 40, lg: 56 }, C = 3, pa = p(
     ) });
   }
 );
-pa.displayName = "Progress";
-const fa = p(
+he.displayName = "Progress";
+const fe = h(
   ({
-    size: a = "md",
+    size: e = "md",
     className: t = "",
-    ...e
+    ...a
   }, n) => {
-    const l = [
+    const i = [
       "strand-spinner",
-      `strand-spinner--${a}`,
+      `strand-spinner--${e}`,
       t
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ _("span", { ref: n, className: l, role: "status", ...e, children: [
+    return /* @__PURE__ */ _("span", { ref: n, className: i, role: "status", ...a, children: [
       /* @__PURE__ */ s("span", { className: "strand-spinner__ring", "aria-hidden": "true" }),
       /* @__PURE__ */ s("span", { className: "strand-spinner__sr-only", children: "Loading" })
     ] });
   }
 );
-fa.displayName = "Spinner";
-const _a = p(
+fe.displayName = "Spinner";
+const _e = h(
   ({
-    variant: a = "text",
+    variant: e = "text",
     width: t,
-    height: e,
+    height: a,
     className: n = "",
-    ...l
-  }, o) => {
-    const r = t ?? (a === "text" ? "100%" : void 0), i = a === "circle" ? r : e, c = [
+    ...i
+  }, l) => {
+    const r = t ?? (e === "text" ? "100%" : void 0), o = e === "circle" ? r : a, d = [
       "strand-skeleton",
-      `strand-skeleton--${a}`,
+      `strand-skeleton--${e}`,
       "strand-skeleton--shimmer",
       n
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ s(
       "div",
       {
-        ref: o,
-        className: c,
+        ref: l,
+        className: d,
         "aria-hidden": "true",
         style: {
           width: r,
-          height: i
+          height: o
         },
-        ...l
+        ...i
+      }
+    );
+  }
+);
+_e.displayName = "Skeleton";
+const ve = h(({ grid: e = !1, className: t = "", children: a, ...n }, i) => {
+  const l = [
+    "strand-instrument-viewport",
+    e ? "strand-instrument-viewport--grid" : "",
+    t
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ s("div", { ref: i, className: l, ...n, children: a });
+});
+ve.displayName = "InstrumentViewport";
+const be = h(
+  ({ threshold: e = 0.1, once: t = !0, className: a = "", children: n, ...i }, l) => {
+    const r = g(null), o = ["strand-reveal", a].filter(Boolean).join(" ");
+    return C(() => {
+      const d = r.current;
+      if (!d || typeof IntersectionObserver > "u") return;
+      const u = new IntersectionObserver(
+        (c) => {
+          for (const p of c)
+            p.isIntersecting ? (p.target.classList.add("strand-reveal--visible"), t && u.unobserve(p.target)) : t || p.target.classList.remove("strand-reveal--visible");
+        },
+        { threshold: e }
+      );
+      return u.observe(d), () => {
+        u.disconnect();
+      };
+    }, [e, t]), /* @__PURE__ */ s(
+      "div",
+      {
+        ref: (d) => {
+          r.current = d, typeof l == "function" ? l(d) : l && (l.current = d);
+        },
+        className: o,
+        ...i,
+        children: n
       }
     );
   }
 );
-_a.displayName = "Skeleton";
+be.displayName = "ScrollReveal";
 export {
-  da as Alert,
-  V as Avatar,
-  U as Badge,
-  ta as Breadcrumb,
+  de as Alert,
+  G as Avatar,
+  q as Badge,
+  te as Breadcrumb,
   E as Button,
-  H as Card,
-  M as Checkbox,
+  V as Card,
+  A as Checkbox,
   Z as CodeBlock,
   X as Container,
   W as DataReadout,
-  ua as Dialog,
+  ue as Dialog,
   Y as Divider,
-  G as FormField,
+  U as FormField,
   Q as Grid,
-  K as Input,
-  ea as Link,
-  na as Nav,
-  pa as Progress,
+  L as Input,
+  ve as InstrumentViewport,
+  ae as Link,
+  ne as Nav,
+  he as Progress,
   P as Radio,
-  aa as Section,
-  L as Select,
-  _a as Skeleton,
-  q as Slider,
-  fa as Spinner,
+  be as ScrollReveal,
+  ee as Section,
+  M as Select,
+  _e as Skeleton,
+  O as Slider,
+  fe as Spinner,
   J as Stack,
   F as Switch,
   z as Table,
-  sa as Tabs,
-  O as Tag,
-  A as Textarea,
-  oa as Toast,
-  la as ToastProvider,
-  ha as Tooltip,
-  ga as useToast
+  se as Tabs,
+  H as Tag,
+  K as Textarea,
+  oe as Toast,
+  le as ToastProvider,
+  pe as Tooltip,
+  we as useToast
 };