@sandurtech/sandui 0.0.1 → 0.0.2

package/dist/sandui.js

@@ -1,277 +1,312 @@
-import Oe, { forwardRef as b, useMemo as T, useState as ke, useCallback as I, useId as C, useRef as K, useEffect as Ie, createContext as Me, useContext as De } from "react";
-var U = { exports: {} }, D = {};
-var me;
-function Pe() {
-  if (me) return D;
-  me = 1;
-  var d = /* @__PURE__ */ Symbol.for("react.transitional.element"), a = /* @__PURE__ */ Symbol.for("react.fragment");
-  function n(r, t, c) {
-    var o = null;
-    if (c !== void 0 && (o = "" + c), t.key !== void 0 && (o = "" + t.key), "key" in t) {
-      c = {};
-      for (var u in t)
-        u !== "key" && (c[u] = t[u]);
-    } else c = t;
-    return t = c.ref, {
-      $$typeof: d,
-      type: r,
-      key: o,
-      ref: t !== void 0 ? t : null,
-      props: c
+import ta, { forwardRef as f, useState as V, useId as I, useMemo as C, useCallback as q, useRef as de, useEffect as Oe, createContext as Pe, useContext as De, isValidElement as sa, cloneElement as ra } from "react";
+import { createPortal as oa } from "react-dom";
+var re = { exports: {} }, H = {};
+var Ee;
+function da() {
+  if (Ee) return H;
+  Ee = 1;
+  var s = /* @__PURE__ */ Symbol.for("react.transitional.element"), e = /* @__PURE__ */ Symbol.for("react.fragment");
+  function a(t, r, d) {
+    var c = null;
+    if (d !== void 0 && (c = "" + d), r.key !== void 0 && (c = "" + r.key), "key" in r) {
+      d = {};
+      for (var i in r)
+        i !== "key" && (d[i] = r[i]);
+    } else d = r;
+    return r = d.ref, {
+      $$typeof: s,
+      type: t,
+      key: c,
+      ref: r !== void 0 ? r : null,
+      props: d
     };
   }
-  return D.Fragment = a, D.jsx = n, D.jsxs = n, D;
+  return H.Fragment = e, H.jsx = a, H.jsxs = a, H;
 }
-var P = {};
-var pe;
-function Fe() {
-  return pe || (pe = 1, process.env.NODE_ENV !== "production" && (function() {
-    function d(e) {
-      if (e == null) return null;
-      if (typeof e == "function")
-        return e.$$typeof === Ce ? null : e.displayName || e.name || null;
-      if (typeof e == "string") return e;
-      switch (e) {
-        case A:
+var Y = {};
+var $e;
+function ca() {
+  return $e || ($e = 1, process.env.NODE_ENV !== "production" && (function() {
+    function s(o) {
+      if (o == null) return null;
+      if (typeof o == "function")
+        return o.$$typeof === ea ? null : o.displayName || o.name || null;
+      if (typeof o == "string") return o;
+      switch (o) {
+        case R:
           return "Fragment";
-        case J:
+        case ie:
           return "Profiler";
-        case V:
+        case g:
           return "StrictMode";
-        case L:
+        case ae:
           return "Suspense";
-        case Y:
+        case ne:
           return "SuspenseList";
-        case Re:
+        case Qe:
           return "Activity";
       }
-      if (typeof e == "object")
-        switch (typeof e.tag == "number" && console.error(
+      if (typeof o == "object")
+        switch (typeof o.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), e.$$typeof) {
-          case g:
+        ), o.$$typeof) {
+          case T:
             return "Portal";
-          case j:
-            return e.displayName || "Context";
-          case M:
-            return (e._context.displayName || "Context") + ".Consumer";
-          case R:
-            var l = e.render;
-            return e = e.displayName, e || (e = l.displayName || l.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case w:
+            return o.displayName || "Context";
           case G:
-            return l = e.displayName || null, l !== null ? l : d(e.type) || "Memo";
-          case X:
-            l = e._payload, e = e._init;
+            return (o._context.displayName || "Context") + ".Consumer";
+          case O:
+            var h = o.render;
+            return o = o.displayName, o || (o = h.displayName || h.name || "", o = o !== "" ? "ForwardRef(" + o + ")" : "ForwardRef"), o;
+          case te:
+            return h = o.displayName || null, h !== null ? h : s(o.type) || "Memo";
+          case le:
+            h = o._payload, o = o._init;
             try {
-              return d(e(l));
+              return s(o(h));
             } catch {
             }
         }
       return null;
     }
-    function a(e) {
-      return "" + e;
+    function e(o) {
+      return "" + o;
     }
-    function n(e) {
+    function a(o) {
       try {
-        a(e);
-        var l = !1;
+        e(o);
+        var h = !1;
       } catch {
-        l = !0;
+        h = !0;
       }
-      if (l) {
-        l = console;
-        var p = l.error, k = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return p.call(
-          l,
+      if (h) {
+        h = console;
+        var y = h.error, S = typeof Symbol == "function" && Symbol.toStringTag && o[Symbol.toStringTag] || o.constructor.name || "Object";
+        return y.call(
+          h,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          k
-        ), a(e);
+          S
+        ), e(o);
       }
     }
-    function r(e) {
-      if (e === A) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === X)
+    function t(o) {
+      if (o === R) return "<>";
+      if (typeof o == "object" && o !== null && o.$$typeof === le)
         return "<...>";
       try {
-        var l = d(e);
-        return l ? "<" + l + ">" : "<...>";
+        var h = s(o);
+        return h ? "<" + h + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function t() {
-      var e = Z.A;
-      return e === null ? null : e.getOwner();
+    function r() {
+      var o = ue.A;
+      return o === null ? null : o.getOwner();
     }
-    function c() {
+    function d() {
       return Error("react-stack-top-frame");
     }
-    function o(e) {
-      if (le.call(e, "key")) {
-        var l = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (l && l.isReactWarning) return !1;
+    function c(o) {
+      if (Se.call(o, "key")) {
+        var h = Object.getOwnPropertyDescriptor(o, "key").get;
+        if (h && h.isReactWarning) return !1;
       }
-      return e.key !== void 0;
+      return o.key !== void 0;
     }
-    function u(e, l) {
-      function p() {
-        ie || (ie = !0, console.error(
+    function i(o, h) {
+      function y() {
+        Ne || (Ne = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          l
+          h
         ));
       }
-      p.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: p,
+      y.isReactWarning = !0, Object.defineProperty(o, "key", {
+        get: y,
         configurable: !0
       });
     }
-    function f() {
-      var e = d(this.type);
-      return ue[e] || (ue[e] = !0, console.error(
+    function l() {
+      var o = s(this.type);
+      return je[o] || (je[o] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-      )), e = this.props.ref, e !== void 0 ? e : null;
-    }
-    function h(e, l, p, k, H, ee) {
-      var v = p.ref;
-      return e = {
-        $$typeof: N,
-        type: e,
-        key: l,
-        props: p,
-        _owner: k
-      }, (v !== void 0 ? v : null) !== null ? Object.defineProperty(e, "ref", {
+      )), o = this.props.ref, o !== void 0 ? o : null;
+    }
+    function u(o, h, y, S, se, me) {
+      var N = y.ref;
+      return o = {
+        $$typeof: v,
+        type: o,
+        key: h,
+        props: y,
+        _owner: S
+      }, (N !== void 0 ? N : null) !== null ? Object.defineProperty(o, "ref", {
         enumerable: !1,
-        get: f
-      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        get: l
+      }) : Object.defineProperty(o, "ref", { enumerable: !1, value: null }), o._store = {}, Object.defineProperty(o._store, "validated", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: 0
-      }), Object.defineProperty(e, "_debugInfo", {
+      }), Object.defineProperty(o, "_debugInfo", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: null
-      }), Object.defineProperty(e, "_debugStack", {
+      }), Object.defineProperty(o, "_debugStack", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: H
-      }), Object.defineProperty(e, "_debugTask", {
+        value: se
+      }), Object.defineProperty(o, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: ee
-      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
-    }
-    function _(e, l, p, k, H, ee) {
-      var v = l.children;
-      if (v !== void 0)
-        if (k)
-          if (Ae(v)) {
-            for (k = 0; k < v.length; k++)
-              m(v[k]);
-            Object.freeze && Object.freeze(v);
+        value: me
+      }), Object.freeze && (Object.freeze(o.props), Object.freeze(o)), o;
+    }
+    function m(o, h, y, S, se, me) {
+      var N = h.children;
+      if (N !== void 0)
+        if (S)
+          if (aa(N)) {
+            for (S = 0; S < N.length; S++)
+              b(N[S]);
+            Object.freeze && Object.freeze(N);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else m(v);
-      if (le.call(l, "key")) {
-        v = d(e);
-        var $ = Object.keys(l).filter(function($e) {
-          return $e !== "key";
+        else b(N);
+      if (Se.call(h, "key")) {
+        N = s(o);
+        var D = Object.keys(h).filter(function(na) {
+          return na !== "key";
         });
-        k = 0 < $.length ? "{key: someKey, " + $.join(": ..., ") + ": ...}" : "{key: someKey}", fe[v + k] || ($ = 0 < $.length ? "{" + $.join(": ..., ") + ": ...}" : "{}", console.error(
+        S = 0 < D.length ? "{key: someKey, " + D.join(": ..., ") + ": ...}" : "{key: someKey}", Te[N + S] || (D = 0 < D.length ? "{" + D.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          k,
-          v,
-          $,
-          v
-        ), fe[v + k] = !0);
+          S,
+          N,
+          D,
+          N
+        ), Te[N + S] = !0);
       }
-      if (v = null, p !== void 0 && (n(p), v = "" + p), o(l) && (n(l.key), v = "" + l.key), "key" in l) {
-        p = {};
-        for (var ae in l)
-          ae !== "key" && (p[ae] = l[ae]);
-      } else p = l;
-      return v && u(
-        p,
-        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), h(
-        e,
-        v,
-        p,
-        t(),
-        H,
-        ee
+      if (N = null, y !== void 0 && (a(y), N = "" + y), c(h) && (a(h.key), N = "" + h.key), "key" in h) {
+        y = {};
+        for (var fe in h)
+          fe !== "key" && (y[fe] = h[fe]);
+      } else y = h;
+      return N && i(
+        y,
+        typeof o == "function" ? o.displayName || o.name || "Unknown" : o
+      ), u(
+        o,
+        N,
+        y,
+        r(),
+        se,
+        me
       );
     }
-    function m(e) {
-      S(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === X && (e._payload.status === "fulfilled" ? S(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    function b(o) {
+      x(o) ? o._store && (o._store.validated = 1) : typeof o == "object" && o !== null && o.$$typeof === le && (o._payload.status === "fulfilled" ? x(o._payload.value) && o._payload.value._store && (o._payload.value._store.validated = 1) : o._store && (o._store.validated = 1));
     }
-    function S(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === N;
+    function x(o) {
+      return typeof o == "object" && o !== null && o.$$typeof === v;
     }
-    var y = Oe, N = /* @__PURE__ */ Symbol.for("react.transitional.element"), g = /* @__PURE__ */ Symbol.for("react.portal"), A = /* @__PURE__ */ Symbol.for("react.fragment"), V = /* @__PURE__ */ Symbol.for("react.strict_mode"), J = /* @__PURE__ */ Symbol.for("react.profiler"), M = /* @__PURE__ */ Symbol.for("react.consumer"), j = /* @__PURE__ */ Symbol.for("react.context"), R = /* @__PURE__ */ Symbol.for("react.forward_ref"), L = /* @__PURE__ */ Symbol.for("react.suspense"), Y = /* @__PURE__ */ Symbol.for("react.suspense_list"), G = /* @__PURE__ */ Symbol.for("react.memo"), X = /* @__PURE__ */ Symbol.for("react.lazy"), Re = /* @__PURE__ */ Symbol.for("react.activity"), Ce = /* @__PURE__ */ Symbol.for("react.client.reference"), Z = y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, le = Object.prototype.hasOwnProperty, Ae = Array.isArray, Q = console.createTask ? console.createTask : function() {
+    var p = ta, v = /* @__PURE__ */ Symbol.for("react.transitional.element"), T = /* @__PURE__ */ Symbol.for("react.portal"), R = /* @__PURE__ */ Symbol.for("react.fragment"), g = /* @__PURE__ */ Symbol.for("react.strict_mode"), ie = /* @__PURE__ */ Symbol.for("react.profiler"), G = /* @__PURE__ */ Symbol.for("react.consumer"), w = /* @__PURE__ */ Symbol.for("react.context"), O = /* @__PURE__ */ Symbol.for("react.forward_ref"), ae = /* @__PURE__ */ Symbol.for("react.suspense"), ne = /* @__PURE__ */ Symbol.for("react.suspense_list"), te = /* @__PURE__ */ Symbol.for("react.memo"), le = /* @__PURE__ */ Symbol.for("react.lazy"), Qe = /* @__PURE__ */ Symbol.for("react.activity"), ea = /* @__PURE__ */ Symbol.for("react.client.reference"), ue = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Se = Object.prototype.hasOwnProperty, aa = Array.isArray, _e = console.createTask ? console.createTask : function() {
       return null;
     };
-    y = {
-      react_stack_bottom_frame: function(e) {
-        return e();
+    p = {
+      react_stack_bottom_frame: function(o) {
+        return o();
       }
     };
-    var ie, ue = {}, be = y.react_stack_bottom_frame.bind(
-      y,
-      c
-    )(), _e = Q(r(c)), fe = {};
-    P.Fragment = A, P.jsx = function(e, l, p) {
-      var k = 1e4 > Z.recentlyCreatedOwnerStacks++;
-      return _(
-        e,
-        l,
-        p,
+    var Ne, je = {}, ke = p.react_stack_bottom_frame.bind(
+      p,
+      d
+    )(), we = _e(t(d)), Te = {};
+    Y.Fragment = R, Y.jsx = function(o, h, y) {
+      var S = 1e4 > ue.recentlyCreatedOwnerStacks++;
+      return m(
+        o,
+        h,
+        y,
         !1,
-        k ? Error("react-stack-top-frame") : be,
-        k ? Q(r(e)) : _e
+        S ? Error("react-stack-top-frame") : ke,
+        S ? _e(t(o)) : we
       );
-    }, P.jsxs = function(e, l, p) {
-      var k = 1e4 > Z.recentlyCreatedOwnerStacks++;
-      return _(
-        e,
-        l,
-        p,
+    }, Y.jsxs = function(o, h, y) {
+      var S = 1e4 > ue.recentlyCreatedOwnerStacks++;
+      return m(
+        o,
+        h,
+        y,
         !0,
-        k ? Error("react-stack-top-frame") : be,
-        k ? Q(r(e)) : _e
+        S ? Error("react-stack-top-frame") : ke,
+        S ? _e(t(o)) : we
       );
     };
-  })()), P;
+  })()), Y;
+}
+var Ce;
+function ia() {
+  return Ce || (Ce = 1, process.env.NODE_ENV === "production" ? re.exports = da() : re.exports = ca()), re.exports;
 }
-var he;
-function Be() {
-  return he || (he = 1, process.env.NODE_ENV === "production" ? U.exports = Pe() : U.exports = Fe()), U.exports;
+var n = ia();
+function _(...s) {
+  return s.filter(Boolean).join(" ");
 }
-var s = Be();
-const ye = {
-  "sand-badge": "_sand-badge_uye3i_1",
-  "sand-badge-primary": "_sand-badge-primary_uye3i_14",
-  "sand-badge-secondary": "_sand-badge-secondary_uye3i_19",
-  "sand-badge-success": "_sand-badge-success_uye3i_24",
-  "sand-badge-failed": "_sand-badge-failed_uye3i_30"
+const la = {
+  none: "0",
+  "2xs": "var(--sand-space-1)",
+  xs: "var(--sand-space-2)",
+  sm: "var(--sand-space-3)",
+  md: "var(--sand-space-4)",
+  lg: "var(--sand-space-5)",
+  xl: "var(--sand-space-6)",
+  "2xl": "var(--sand-space-7)",
+  "3xl": "var(--sand-space-8)"
+}, ua = {
+  sm: "var(--radius-sm)",
+  md: "var(--radius-md)",
+  lg: "var(--radius-lg)",
+  xl: "var(--radius-xl)",
+  full: "var(--radius-full)"
 };
-function i(...d) {
-  return d.filter(Boolean).join(" ");
+function X(s) {
+  if (s !== void 0)
+    return typeof s == "number" ? `${s}px` : la[s] ?? s;
+}
+function ze(s) {
+  if (s !== void 0)
+    return typeof s == "number" ? `${s}px` : ua[s] ?? s;
+}
+function j(s, e, a) {
+  return a === void 0 ? s : {
+    ...s,
+    [e]: a
+  };
 }
-function ze(d) {
+function Be(s, e, a) {
+  if (a === void 0)
+    return s;
+  if (typeof a != "object" || a === null || Array.isArray(a))
+    return j(s, `--${e}`, String(a));
+  let t = s;
+  for (const [r, d] of Object.entries(a))
+    d !== void 0 && (t = j(t, `--${e}-${r}`, String(d)));
+  return t;
+}
+function _a(s) {
   return Array.from(
-    d.querySelectorAll(
+    s.querySelectorAll(
       [
         "a[href]",
         "button:not([disabled])",
@@ -281,517 +316,923 @@ function ze(d) {
         '[tabindex]:not([tabindex="-1"])'
       ].join(",")
     )
-  ).filter((a) => !a.hasAttribute("disabled") && !a.getAttribute("aria-hidden"));
+  ).filter((e) => !e.hasAttribute("disabled") && !e.getAttribute("aria-hidden"));
 }
-function ne(d, a, n, r) {
-  if (n !== 0)
-    switch (d.key) {
+function ce(s, e, a, t) {
+  if (a !== 0)
+    switch (s.key) {
       case "ArrowRight":
       case "ArrowDown":
-        d.preventDefault(), r((a + 1) % n);
+        s.preventDefault(), t((e + 1) % a);
         break;
       case "ArrowLeft":
       case "ArrowUp":
-        d.preventDefault(), r((a - 1 + n) % n);
+        s.preventDefault(), t((e - 1 + a) % a);
         break;
       case "Home":
-        d.preventDefault(), r(0);
+        s.preventDefault(), t(0);
         break;
       case "End":
-        d.preventDefault(), r(n - 1);
+        s.preventDefault(), t(a - 1);
         break;
     }
 }
-const qe = b(function({ variant: a = "primary", className: n = "", ...r }, t) {
-  const c = T(() => ye[`sand-badge-${a}`], [a]);
-  return /* @__PURE__ */ s.jsx(
+const L = f(function({ icon: e, size: a, fill: t, className: r, style: d, ...c }, i) {
+  if (typeof e == "function") {
+    const l = e;
+    return /* @__PURE__ */ n.jsx(
+      l,
+      {
+        ref: i,
+        width: a ?? 18,
+        height: a ?? 18,
+        className: _(r),
+        ...c
+      }
+    );
+  }
+  return /* @__PURE__ */ n.jsx(
     "span",
     {
-      ref: t,
-      className: i(ye["sand-badge"], c, n),
-      ...r
+      ref: i,
+      className: _("material-symbols-rounded", r),
+      style: {
+        fontSize: a,
+        fontVariationSettings: t ? "'FILL' 1" : void 0,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        ...d
+      },
+      "aria-hidden": c["aria-label"] ? void 0 : !0,
+      ...c,
+      children: e
+    }
+  );
+});
+L.displayName = "SandIcon";
+const ma = "_alert_f8qp0_1", fa = "_icon_f8qp0_13", pa = "_content_f8qp0_25", ba = "_title_f8qp0_30", ha = "_description_f8qp0_35", W = {
+  alert: ma,
+  icon: fa,
+  content: pa,
+  title: ba,
+  description: ha
+}, xa = {
+  info: {
+    icon: "info",
+    color: "var(--color-info)",
+    soft: "var(--color-info-soft)"
+  },
+  success: {
+    icon: "check_circle",
+    color: "var(--color-success)",
+    soft: "var(--color-success-soft)"
+  },
+  warning: {
+    icon: "warning",
+    color: "var(--color-warning)",
+    soft: "var(--color-warning-soft)"
+  },
+  error: {
+    icon: "error",
+    color: "var(--color-error)",
+    soft: "var(--color-error-soft)"
+  }
+}, va = f(function({ status: e = "info", title: a, description: t, className: r, style: d, children: c, ...i }, l) {
+  const u = xa[e];
+  return /* @__PURE__ */ n.jsxs(
+    "div",
+    {
+      ref: l,
+      role: "status",
+      className: _(W.alert, r),
+      style: {
+        "--sand-alert-border": u.color,
+        "--sand-alert-bg": `color-mix(in srgb, ${u.soft} 74%, var(--theme-surface))`,
+        "--sand-alert-soft": u.soft,
+        "--sand-alert-color": u.color,
+        ...d
+      },
+      ...i,
+      children: [
+        /* @__PURE__ */ n.jsx("span", { className: W.icon, children: /* @__PURE__ */ n.jsx(L, { icon: u.icon, size: 20 }) }),
+        /* @__PURE__ */ n.jsxs("div", { className: W.content, children: [
+          a && /* @__PURE__ */ n.jsx("div", { className: W.title, children: a }),
+          t && /* @__PURE__ */ n.jsx("div", { className: W.description, children: t }),
+          c
+        ] })
+      ]
+    }
+  );
+});
+va.displayName = "SandAlert";
+const ya = "_accordion_rsxio_1", ga = "_item_rsxio_7", Sa = "_trigger_rsxio_26", Na = "_triggerMain_rsxio_40", ja = "_itemIcon_rsxio_48", ka = "_triggerText_rsxio_67", wa = "_title_rsxio_74", Ta = "_description_rsxio_82", Ea = "_content_rsxio_90", $a = "_contentOpen_rsxio_96", Ca = "_contentInner_rsxio_100", Ra = "_chevron_rsxio_108", Ia = "_chevronOpen_rsxio_114", $ = {
+  accordion: ya,
+  item: ga,
+  trigger: Sa,
+  triggerMain: Na,
+  itemIcon: ja,
+  triggerText: ka,
+  title: wa,
+  description: Ta,
+  content: Ea,
+  contentOpen: $a,
+  contentInner: Ca,
+  chevron: Ra,
+  chevronOpen: Ia
+}, Aa = f(function({ items: e, defaultOpen: a, className: t, ...r }, d) {
+  const [c, i] = V(a), l = I();
+  return /* @__PURE__ */ n.jsx("div", { ref: d, className: _($.accordion, t), ...r, children: e.map((u) => {
+    const m = c === u.id, b = `${l}-trigger-${u.id}`, x = `${l}-content-${u.id}`;
+    return /* @__PURE__ */ n.jsxs("div", { className: $.item, "data-state": m ? "open" : "closed", children: [
+      /* @__PURE__ */ n.jsxs(
+        "button",
+        {
+          id: b,
+          type: "button",
+          className: $.trigger,
+          "aria-expanded": m,
+          "aria-controls": x,
+          onClick: () => i((p) => p === u.id ? void 0 : u.id),
+          children: [
+            /* @__PURE__ */ n.jsxs("div", { className: $.triggerMain, children: [
+              u.icon && /* @__PURE__ */ n.jsx(L, { icon: u.icon, className: $.itemIcon, size: 24, "aria-hidden": "true" }),
+              /* @__PURE__ */ n.jsxs("div", { className: $.triggerText, children: [
+                /* @__PURE__ */ n.jsx("span", { className: $.title, children: u.title }),
+                u.description && /* @__PURE__ */ n.jsx("span", { className: $.description, children: u.description })
+              ] })
+            ] }),
+            /* @__PURE__ */ n.jsx(
+              L,
+              {
+                icon: "expand_more",
+                className: _($.chevron, m && $.chevronOpen),
+                size: 20,
+                "aria-hidden": "true"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ n.jsx(
+        "div",
+        {
+          id: x,
+          "aria-labelledby": b,
+          className: _($.content, m && $.contentOpen),
+          role: "region",
+          children: /* @__PURE__ */ n.jsx("div", { className: $.contentInner, children: u.content })
+        }
+      )
+    ] }, u.id);
+  }) });
+});
+Aa.displayName = "SandAccordion";
+const Re = {
+  "sand-badge": "_sand-badge_ezp2k_1",
+  "sand-badge-primary": "_sand-badge-primary_ezp2k_15",
+  "sand-badge-secondary": "_sand-badge-secondary_ezp2k_21",
+  "sand-badge-success": "_sand-badge-success_ezp2k_27",
+  "sand-badge-failed": "_sand-badge-failed_ezp2k_33"
+}, Ma = f(function({ variant: e = "primary", className: a = "", ...t }, r) {
+  const d = C(() => Re[`sand-badge-${e}`], [e]);
+  return /* @__PURE__ */ n.jsx(
+    "span",
+    {
+      ref: r,
+      className: _(Re["sand-badge"], d, a),
+      ...t
     }
   );
 });
-qe.displayName = "SandBadge";
-const F = {
+Ma.displayName = "SandBadge";
+const K = {
   "sand-breadcrumbs": "_sand-breadcrumbs_1uxir_1",
   "sand-breadcrumb-item": "_sand-breadcrumb-item_1uxir_10",
   "sand-breadcrumb-link": "_sand-breadcrumb-link_1uxir_17",
   "sand-breadcrumb-current": "_sand-breadcrumb-current_1uxir_32",
   "sand-breadcrumb-separator": "_sand-breadcrumb-separator_1uxir_37"
-}, Le = b(function({ items: a, className: n = "", "aria-label": r = "Breadcrumb", ...t }, c) {
-  const o = T(
-    () => a.map((u, f) => {
-      const h = f === a.length - 1;
-      return /* @__PURE__ */ s.jsxs("li", { className: F["sand-breadcrumb-item"], children: [
-        u.href && !h ? /* @__PURE__ */ s.jsx("a", { href: u.href, className: F["sand-breadcrumb-link"], children: u.label }) : /* @__PURE__ */ s.jsx(
+}, Oa = f(function({ items: e, className: a = "", "aria-label": t = "Breadcrumb", ...r }, d) {
+  const c = C(
+    () => e.map((i, l) => {
+      const u = l === e.length - 1;
+      return /* @__PURE__ */ n.jsxs("li", { className: K["sand-breadcrumb-item"], children: [
+        i.href && !u ? /* @__PURE__ */ n.jsx("a", { href: i.href, className: K["sand-breadcrumb-link"], children: i.label }) : /* @__PURE__ */ n.jsx(
           "span",
           {
-            "aria-current": h ? "page" : void 0,
-            className: h ? F["sand-breadcrumb-current"] : void 0,
-            children: u.label
+            "aria-current": u ? "page" : void 0,
+            className: u ? K["sand-breadcrumb-current"] : void 0,
+            children: i.label
           }
         ),
-        !h && /* @__PURE__ */ s.jsx("span", { className: i(F["sand-breadcrumb-separator"], "material-symbols-rounded"), "aria-hidden": "true", children: "chevron_right" })
-      ] }, `${String(u.label)}-${f}`);
+        !u && /* @__PURE__ */ n.jsx("span", { className: _(K["sand-breadcrumb-separator"], "material-symbols-rounded"), "aria-hidden": "true", children: "chevron_right" })
+      ] }, `${String(i.label)}-${l}`);
     }),
-    [a]
+    [e]
   );
-  return /* @__PURE__ */ s.jsx("nav", { ref: c, "aria-label": r, className: i(F["sand-breadcrumbs"], n), ...t, children: /* @__PURE__ */ s.jsx("ol", { children: o }) });
-});
-Le.displayName = "SandBreadcrumbs";
-const Se = {
-  "sand-btn": "_sand-btn_9grrt_1",
-  "sand-btn-primary": "_sand-btn-primary_9grrt_42",
-  "sand-btn-secondary": "_sand-btn-secondary_9grrt_54",
-  "sand-btn-outline": "_sand-btn-outline_9grrt_63",
-  "sand-btn-success": "_sand-btn-success_9grrt_74",
-  "sand-btn-failed": "_sand-btn-failed_9grrt_85"
-}, Ye = b(function({ variant: a = "primary", className: n = "", type: r = "button", ...t }, c) {
-  const o = T(() => Se[`sand-btn-${a}`], [a]);
-  return /* @__PURE__ */ s.jsx(
+  return /* @__PURE__ */ n.jsx("nav", { ref: d, "aria-label": t, className: _(K["sand-breadcrumbs"], a), ...r, children: /* @__PURE__ */ n.jsx("ol", { children: c }) });
+});
+Oa.displayName = "SandBreadcrumbs";
+const Pa = "_box_t20vf_1", Da = "_surface_t20vf_19", za = "_inline_t20vf_27", Z = {
+  box: Pa,
+  surface: Da,
+  inline: za
+}, Ba = {
+  stretch: "stretch",
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  baseline: "baseline"
+}, Fa = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around",
+  evenly: "space-evenly"
+}, qa = f(function({
+  as: e,
+  padding: a,
+  margin: t,
+  gap: r,
+  align: d,
+  justify: c,
+  surface: i,
+  inline: l,
+  width: u,
+  radius: m,
+  shadow: b = "none",
+  className: x,
+  style: p,
+  ...v
+}, T) {
+  const R = e ?? "div";
+  let g = p;
+  return g = j(g, "--sand-padding", X(a)), g = j(g, "--sand-margin", X(t)), g = j(g, "--sand-gap", X(r)), g = j(g, "--sand-align", d ? Ba[d] : void 0), g = j(g, "--sand-justify", c ? Fa[c] : void 0), g = j(g, "--sand-width", typeof u == "number" ? `${u}px` : u), g = j(g, "--sand-box-radius", ze(m)), g = j(
+    g,
+    "--sand-box-shadow",
+    b === "none" ? "none" : `var(--shadow-${b})`
+  ), /* @__PURE__ */ n.jsx(
+    R,
+    {
+      ref: T,
+      className: _(Z.box, i && Z.surface, l && Z.inline, x),
+      style: g,
+      ...v
+    }
+  );
+});
+qa.displayName = "SandBox";
+const Ie = {
+  "sand-btn": "_sand-btn_9p0tq_1",
+  "sand-btn-primary": "_sand-btn-primary_9p0tq_28",
+  "sand-btn-secondary": "_sand-btn-secondary_9p0tq_39",
+  "sand-btn-outline": "_sand-btn-outline_9p0tq_49",
+  "sand-btn-success": "_sand-btn-success_9p0tq_59",
+  "sand-btn-failed": "_sand-btn-failed_9p0tq_69"
+}, La = f(function({ variant: e = "primary", className: a = "", type: t = "button", ...r }, d) {
+  const c = C(() => Ie[`sand-btn-${e}`], [e]);
+  return /* @__PURE__ */ n.jsx(
     "button",
     {
-      ref: c,
-      className: i(Se["sand-btn"], o, n),
-      type: r,
-      ...t
+      ref: d,
+      className: _(Ie["sand-btn"], c, a),
+      type: t,
+      ...r
     }
   );
 });
-Ye.displayName = "SandButton";
-const W = {
-  "sand-card": "_sand-card_i3njl_1",
-  "sand-card-header": "_sand-card-header_i3njl_15",
-  "sand-card-body": "_sand-card-body_i3njl_22",
-  "sand-card-footer": "_sand-card-footer_i3njl_26"
-}, Ge = b(function({ header: a, footer: n, children: r, className: t = "", ...c }, o) {
-  return /* @__PURE__ */ s.jsxs("article", { ref: o, className: i(W["sand-card"], t), ...c, children: [
-    a && /* @__PURE__ */ s.jsx("header", { className: W["sand-card-header"], children: a }),
-    /* @__PURE__ */ s.jsx("div", { className: W["sand-card-body"], children: r }),
-    n && /* @__PURE__ */ s.jsx("footer", { className: W["sand-card-footer"], children: n })
+La.displayName = "SandButton";
+const oe = {
+  "sand-card": "_sand-card_hf89l_1",
+  "sand-card-header": "_sand-card-header_hf89l_14",
+  "sand-card-body": "_sand-card-body_hf89l_22",
+  "sand-card-footer": "_sand-card-footer_hf89l_29"
+}, Va = f(function({ header: e, footer: a, children: t, className: r = "", ...d }, c) {
+  return /* @__PURE__ */ n.jsxs("article", { ref: c, className: _(oe["sand-card"], r), ...d, children: [
+    e && /* @__PURE__ */ n.jsx("header", { className: oe["sand-card-header"], children: e }),
+    /* @__PURE__ */ n.jsx("div", { className: oe["sand-card-body"], children: t }),
+    a && /* @__PURE__ */ n.jsx("footer", { className: oe["sand-card-footer"], children: a })
   ] });
 });
-Ge.displayName = "SandCard";
-const He = "_active_197ic_77", O = {
-  "sand-code-block": "_sand-code-block_197ic_1",
-  "sand-copy-btn": "_sand-copy-btn_197ic_15",
-  "sand-code-tabs": "_sand-code-tabs_197ic_41",
-  "sand-tab-headers": "_sand-tab-headers_197ic_53",
-  "sand-tab-btn": "_sand-tab-btn_197ic_60",
-  active: He
-}, ve = b(function({ code: a, className: n = "", ...r }, t) {
-  const [c, o] = ke(!1), u = I(() => {
-    navigator.clipboard.writeText(a).then(() => {
-      o(!0), setTimeout(() => o(!1), 2e3);
+Va.displayName = "SandCard";
+const Ga = "_active_1i66s_73", F = {
+  "sand-code-block": "_sand-code-block_1i66s_1",
+  "sand-copy-btn": "_sand-copy-btn_1i66s_20",
+  "sand-code-tabs": "_sand-code-tabs_1i66s_40",
+  "sand-tab-headers": "_sand-tab-headers_1i66s_51",
+  "sand-tab-btn": "_sand-tab-btn_1i66s_58",
+  active: Ga
+};
+function Ha(s) {
+  if (!s) return "";
+  let e = s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  const a = [], t = (r, d) => {
+    const c = `___TOKEN_${a.length}___`;
+    return a.push(`<span class="token-${d}">${r}</span>`), c;
+  };
+  return e = e.replace(/\/\/.*/g, (r) => t(r, "comment")), e = e.replace(/\/\*[\s\S]*?\*\//g, (r) => t(r, "comment")), e = e.replace(/(["'`])(?:\\.|[^\\])*?\1/g, (r) => t(r, "string")), e = e.replace(/\b(true|false|null|undefined)\b/g, (r) => t(r, "boolean")), e = e.replace(
+    /\b(const|let|var|function|return|if|else|for|while|import|export|from|default|class|extends|type|interface|enum|async|await|try|catch|finally|throw|new|this|super|public|private|protected|readonly|static|get|set|as|in|of|void|any|number|string|boolean|symbol|bigint)\b/g,
+    (r) => t(r, "keyword")
+  ), e = e.replace(
+    /\b(React|useState|useEffect|useMemo|useCallback|useId|useRef|forwardRef|ComponentPropsWithoutRef|ReactNode|FC|HTMLAttributes)\b/g,
+    (r) => t(r, "class")
+  ), e = e.replace(/\b([a-z_][a-z0-9_]*)(?=\s*\()/gi, (r) => t(r, "function")), e = e.replace(/&lt;[A-Z][a-zA-Z0-9]*/g, (r) => t(r, "component")), e = e.replace(/&lt;\/?[a-z][a-z0-9]*/g, (r) => t(r, "tag")), e = e.replace(/&lt;\/[a-zA-Z0-9]+&gt;/gi, (r) => t(r, "tag")), e = e.replace(/\b([a-z][a-zA-Z0-9]*)(?=\s*=\s*[{"])/g, (r) => t(r, "attr")), e = e.replace(/\b(\d+)\b/g, (r) => t(r, "number")), e = e.replace(/(=&gt;|===|==|=|\+|-|\*|\/|&amp;&amp;|\|\||!)/g, (r) => t(r, "operator")), a.forEach((r, d) => {
+    e = e.replace(`___TOKEN_${d}___`, r);
+  }), e;
+}
+const Fe = f(function({ code: e, className: a = "", ...t }, r) {
+  const [d, c] = V(!1), i = q(() => {
+    navigator.clipboard.writeText(e).then(() => {
+      c(!0), setTimeout(() => c(!1), 2e3);
     });
-  }, [a]);
-  return /* @__PURE__ */ s.jsxs("pre", { ref: t, className: i(O["sand-code-block"], n), ...r, children: [
-    /* @__PURE__ */ s.jsx(
+  }, [e]), l = C(() => Ha(e), [e]);
+  return /* @__PURE__ */ n.jsxs("pre", { ref: r, className: _(F["sand-code-block"], a), ...t, children: [
+    /* @__PURE__ */ n.jsx(
       "button",
       {
-        className: O["sand-copy-btn"],
-        onClick: u,
+        className: F["sand-copy-btn"],
+        onClick: i,
         type: "button",
-        "aria-label": c ? "Code copied to clipboard" : "Copy code to clipboard",
-        children: c ? "Copied" : "Copy"
+        "aria-label": d ? "Code copied to clipboard" : "Copy code to clipboard",
+        children: d ? "Copied" : "Copy"
       }
     ),
-    /* @__PURE__ */ s.jsx("code", { children: a })
+    /* @__PURE__ */ n.jsx("code", { dangerouslySetInnerHTML: { __html: l } })
   ] });
 });
-ve.displayName = "SandCodeBlock";
-const Ue = b(function({ tabs: a, defaultTab: n = 0, className: r = "", onTabChange: t }, c) {
-  const [o, u] = ke(n), f = C(), h = K([]), _ = I(
-    (S) => {
-      u(S), t?.(S), h.current[S]?.focus();
+Fe.displayName = "SandCodeBlock";
+const Ya = f(function({ tabs: e, defaultTab: a = 0, className: t = "", onTabChange: r }, d) {
+  const [c, i] = V(a), l = I(), u = de([]), m = q(
+    (x) => {
+      i(x), r?.(x), u.current[x]?.focus();
     },
-    [t]
-  ), m = T(() => a[o]?.code ?? "", [o, a]);
-  return /* @__PURE__ */ s.jsxs("div", { ref: c, className: i(O["sand-code-tabs"], r), children: [
-    /* @__PURE__ */ s.jsx("div", { className: O["sand-tab-headers"], role: "tablist", "aria-label": "Code examples", children: a.map((S, y) => /* @__PURE__ */ s.jsx(
+    [r]
+  ), b = C(() => e[c]?.code ?? "", [c, e]);
+  return /* @__PURE__ */ n.jsxs("div", { ref: d, className: _(F["sand-code-tabs"], t), children: [
+    /* @__PURE__ */ n.jsx("div", { className: F["sand-tab-headers"], role: "tablist", "aria-label": "Code examples", children: e.map((x, p) => /* @__PURE__ */ n.jsx(
       "button",
       {
-        ref: (N) => {
-          h.current[y] = N;
+        ref: (v) => {
+          u.current[p] = v;
         },
-        className: i(O["sand-tab-btn"], o === y && O.active),
+        className: _(F["sand-tab-btn"], c === p && F.active),
         type: "button",
         role: "tab",
-        "aria-selected": o === y,
-        "aria-controls": `${f}-code-panel-${y}`,
-        id: `${f}-code-tab-${y}`,
-        tabIndex: o === y ? 0 : -1,
-        onClick: () => _(y),
-        onKeyDown: (N) => ne(N, y, a.length, (g) => _(g)),
-        children: S.name
+        "aria-selected": c === p,
+        "aria-controls": `${l}-code-panel-${p}`,
+        id: `${l}-code-tab-${p}`,
+        tabIndex: c === p ? 0 : -1,
+        onClick: () => m(p),
+        onKeyDown: (v) => ce(v, p, e.length, (T) => m(T)),
+        children: x.name
       },
-      y
+      p
     )) }),
-    /* @__PURE__ */ s.jsx(
+    /* @__PURE__ */ n.jsx(
       "div",
       {
         role: "tabpanel",
-        id: `${f}-code-panel-${o}`,
-        "aria-labelledby": `${f}-code-tab-${o}`,
-        children: /* @__PURE__ */ s.jsx(ve, { code: m })
+        id: `${l}-code-panel-${c}`,
+        "aria-labelledby": `${l}-code-tab-${c}`,
+        children: /* @__PURE__ */ n.jsx(Fe, { code: b })
       }
     )
   ] });
 });
-Ue.displayName = "SandCodeTabs";
-const We = {
+Ya.displayName = "SandCodeTabs";
+const Wa = {
   "sand-divider": "_sand-divider_svs0p_1"
-}, Ke = b(function({ className: a = "", ...n }, r) {
-  return /* @__PURE__ */ s.jsx("hr", { ref: r, className: i(We["sand-divider"], a), ...n });
-});
-Ke.displayName = "SandDivider";
-const E = {
-  "sand-feedback": "_sand-feedback_1pp8i_1",
-  "sand-feedback-toast": "_sand-feedback-toast_1pp8i_11",
-  "sand-feedback-snackbar": "_sand-feedback-snackbar_1pp8i_24",
-  "sand-feedback-row": "_sand-feedback-row_1pp8i_33",
-  "sand-feedback-icon": "_sand-feedback-icon_1pp8i_39",
-  "sand-feedback-content": "_sand-feedback-content_1pp8i_45",
-  "sand-feedback-title": "_sand-feedback-title_1pp8i_52",
-  "sand-feedback-message": "_sand-feedback-message_1pp8i_57",
-  "sand-feedback-action": "_sand-feedback-action_1pp8i_64",
-  "sand-feedback-success": "_sand-feedback-success_1pp8i_69",
-  "sand-feedback-failed": "_sand-feedback-failed_1pp8i_81",
-  "sand-feedback-info": "_sand-feedback-info_1pp8i_93"
-}, Ve = {
+}, Ka = f(function({ className: e = "", ...a }, t) {
+  return /* @__PURE__ */ n.jsx("hr", { ref: t, className: _(Wa["sand-divider"], e), ...a });
+});
+Ka.displayName = "SandDivider";
+const A = {
+  "sand-feedback": "_sand-feedback_1fyl0_1",
+  "sand-feedback-toast": "_sand-feedback-toast_1fyl0_12",
+  "sand-feedback-snackbar": "_sand-feedback-snackbar_1fyl0_18",
+  "sand-feedback-row": "_sand-feedback-row_1fyl0_28",
+  "sand-feedback-icon": "_sand-feedback-icon_1fyl0_34",
+  "sand-feedback-content": "_sand-feedback-content_1fyl0_41",
+  "sand-feedback-title": "_sand-feedback-title_1fyl0_49",
+  "sand-feedback-message": "_sand-feedback-message_1fyl0_55",
+  "sand-feedback-action": "_sand-feedback-action_1fyl0_61",
+  "sand-feedback-success": "_sand-feedback-success_1fyl0_65",
+  "sand-feedback-failed": "_sand-feedback-failed_1fyl0_72",
+  "sand-feedback-info": "_sand-feedback-info_1fyl0_79"
+}, Ua = {
   info: "info",
   success: "check_circle",
   failed: "error"
-}, xe = b(function({ heading: a, message: n, action: r, variant: t = "info", className: c = "", mode: o, ...u }, f) {
-  const h = T(() => Ve[t], [t]), _ = t === "failed" ? "alert" : "status";
-  return /* @__PURE__ */ s.jsx(
+}, qe = f(function({ heading: e, message: a, action: t, variant: r = "info", className: d = "", mode: c, ...i }, l) {
+  const u = C(() => Ua[r], [r]), m = r === "failed" ? "alert" : "status";
+  return /* @__PURE__ */ n.jsx(
     "div",
     {
-      ref: f,
-      role: _,
-      "aria-live": t === "failed" ? "assertive" : "polite",
-      className: i(
-        E["sand-feedback"],
-        E[`sand-feedback-${o}`],
-        E[`sand-feedback-${t}`],
-        c
+      ref: l,
+      role: m,
+      "aria-live": r === "failed" ? "assertive" : "polite",
+      className: _(
+        A["sand-feedback"],
+        A[`sand-feedback-${c}`],
+        A[`sand-feedback-${r}`],
+        d
       ),
-      ...u,
-      children: /* @__PURE__ */ s.jsxs("div", { className: E["sand-feedback-row"], children: [
-        /* @__PURE__ */ s.jsx("span", { className: i(E["sand-feedback-icon"], "material-symbols-rounded"), "aria-hidden": "true", children: h }),
-        /* @__PURE__ */ s.jsxs("div", { className: E["sand-feedback-content"], children: [
-          a && /* @__PURE__ */ s.jsx("span", { className: E["sand-feedback-title"], children: a }),
-          /* @__PURE__ */ s.jsx("span", { className: E["sand-feedback-message"], children: n })
+      ...i,
+      children: /* @__PURE__ */ n.jsxs("div", { className: A["sand-feedback-row"], children: [
+        /* @__PURE__ */ n.jsx("span", { className: _(A["sand-feedback-icon"], "material-symbols-rounded"), "aria-hidden": "true", children: u }),
+        /* @__PURE__ */ n.jsxs("div", { className: A["sand-feedback-content"], children: [
+          e && /* @__PURE__ */ n.jsx("span", { className: A["sand-feedback-title"], children: e }),
+          /* @__PURE__ */ n.jsx("span", { className: A["sand-feedback-message"], children: a })
         ] }),
-        r && /* @__PURE__ */ s.jsx("div", { className: E["sand-feedback-action"], children: r })
+        t && /* @__PURE__ */ n.jsx("div", { className: A["sand-feedback-action"], children: t })
       ] })
     }
   );
-}), Je = b(function(a, n) {
-  return /* @__PURE__ */ s.jsx(xe, { ref: n, mode: "toast", ...a });
-});
-Je.displayName = "SandToast";
-const Xe = b(function(a, n) {
-  return /* @__PURE__ */ s.jsx(xe, { ref: n, mode: "snackbar", ...a });
-});
-Xe.displayName = "SandSnackbar";
-const z = {
-  "sand-form-group": "_sand-form-group_fyw0t_1",
-  "sand-label": "_sand-label_fyw0t_8",
-  "sand-input": "_sand-input_fyw0t_17",
-  "sand-input-error": "_sand-input-error_fyw0t_38",
-  "sand-helper-text-error": "_sand-helper-text-error_fyw0t_47"
-}, je = b(function({ label: a, children: n, className: r = "", htmlFor: t, ...c }, o) {
-  return /* @__PURE__ */ s.jsxs("div", { ref: o, className: i(z["sand-form-group"], r), ...c, children: [
-    a && /* @__PURE__ */ s.jsx("label", { className: z["sand-label"], htmlFor: t, children: a }),
-    n
+}), Ja = f(function(e, a) {
+  return /* @__PURE__ */ n.jsx(qe, { ref: a, mode: "toast", ...e });
+});
+Ja.displayName = "SandToast";
+const Xa = f(function(e, a) {
+  return /* @__PURE__ */ n.jsx(qe, { ref: a, mode: "snackbar", ...e });
+});
+Xa.displayName = "SandSnackbar";
+const Za = "_grid_g8kr4_1", Qa = "_item_g8kr4_7", Le = {
+  grid: Za,
+  item: Qa
+}, Ve = f(function({ columns: e = 12, gap: a = "md", className: t, style: r, ...d }, c) {
+  let i = r;
+  return i = Be(i, "sand-grid-columns", e), i = j(i, "--sand-grid-gap", X(a)), /* @__PURE__ */ n.jsx("div", { ref: c, className: _(Le.grid, t), style: i, ...d });
+});
+Ve.displayName = "SandGrid";
+const Ge = f(function({ span: e = 1, className: a, style: t, ...r }, d) {
+  let c = t;
+  return c = Be(c, "sand-grid-span", e), /* @__PURE__ */ n.jsx("div", { ref: d, className: _(Le.item, a), style: c, ...r });
+});
+Ge.displayName = "SandGrid.Item";
+const ft = Object.assign(Ve, {
+  Item: Ge
+}), Q = {
+  "sand-form-group": "_sand-form-group_6kvlc_1",
+  "sand-label": "_sand-label_6kvlc_8",
+  "sand-input": "_sand-input_6kvlc_17",
+  "sand-input-error": "_sand-input-error_6kvlc_37",
+  "sand-helper-text-error": "_sand-helper-text-error_6kvlc_45"
+}, He = f(function({ label: e, children: a, className: t = "", htmlFor: r, ...d }, c) {
+  return /* @__PURE__ */ n.jsxs("div", { ref: c, className: _(Q["sand-form-group"], t), ...d, children: [
+    e && /* @__PURE__ */ n.jsx("label", { className: Q["sand-label"], htmlFor: r, children: e }),
+    a
   ] });
 });
-je.displayName = "SandFormGroup";
-const Ne = b(function({ error: a, className: n = "", ...r }, t) {
-  return /* @__PURE__ */ s.jsx(
+He.displayName = "SandFormGroup";
+const Ye = f(function({ error: e, className: a = "", ...t }, r) {
+  return /* @__PURE__ */ n.jsx(
     "input",
     {
-      ref: t,
-      className: i(z["sand-input"], a && z["sand-input-error"], n),
-      "aria-invalid": a || r["aria-invalid"],
-      ...r
+      ref: r,
+      className: _(Q["sand-input"], e && Q["sand-input-error"], a),
+      "aria-invalid": e || t["aria-invalid"],
+      ...t
     }
   );
 });
-Ne.displayName = "SandInput";
-const Ze = b(function({ label: a, helperText: n, error: r, groupClassName: t, className: c = "", "aria-describedby": o, ...u }, f) {
-  const h = C(), _ = u.id ?? h, m = n ? `${_}-help` : void 0, S = T(
-    () => [o, m].filter(Boolean).join(" ") || void 0,
-    [o, m]
+Ye.displayName = "SandInput";
+const en = f(function({ label: e, helperText: a, error: t, groupClassName: r, className: d = "", "aria-describedby": c, ...i }, l) {
+  const u = I(), m = i.id ?? u, b = a ? `${m}-help` : void 0, x = C(
+    () => [c, b].filter(Boolean).join(" ") || void 0,
+    [c, b]
   );
-  return /* @__PURE__ */ s.jsxs(je, { label: a, className: t, htmlFor: _, children: [
-    /* @__PURE__ */ s.jsx(
-      Ne,
+  return /* @__PURE__ */ n.jsxs(He, { label: e, className: r, htmlFor: m, children: [
+    /* @__PURE__ */ n.jsx(
+      Ye,
       {
-        ref: f,
-        id: _,
-        error: r,
-        className: c,
-        "aria-describedby": S,
-        ...u
+        ref: l,
+        id: m,
+        error: t,
+        className: d,
+        "aria-describedby": x,
+        ...i
       }
     ),
-    n && /* @__PURE__ */ s.jsx("span", { id: m, className: r ? z["sand-helper-text-error"] : "", children: n })
+    a && /* @__PURE__ */ n.jsx("span", { id: b, className: t ? Q["sand-helper-text-error"] : "", children: a })
   ] });
 });
-Ze.displayName = "SandInputGroup";
-const Qe = {
+en.displayName = "SandInputGroup";
+const an = {
   "sand-kbd": "_sand-kbd_mo78g_1"
-}, ea = b(function({ className: a = "", ...n }, r) {
-  return /* @__PURE__ */ s.jsx("kbd", { ref: r, className: i(Qe["sand-kbd"], a), ...n });
+}, nn = f(function({ className: e = "", ...a }, t) {
+  return /* @__PURE__ */ n.jsx("kbd", { ref: t, className: _(an["sand-kbd"], e), ...a });
 });
-ea.displayName = "SandKBD";
-const q = {
+nn.displayName = "SandKBD";
+const tn = "_loader_1onos_1", sn = "_skeleton_1onos_10", We = {
+  loader: tn,
+  skeleton: sn
+}, rn = f(function({ size: e = 40, className: a, style: t, ...r }, d) {
+  return /* @__PURE__ */ n.jsx(
+    "span",
+    {
+      ref: d,
+      className: _(We.loader, a),
+      style: { "--sand-loader-size": `${e}px`, ...t },
+      ...r
+    }
+  );
+});
+rn.displayName = "SandLoader";
+const on = f(function({ width: e = "100%", height: a = 16, radius: t = "md", className: r, style: d, ...c }, i) {
+  return /* @__PURE__ */ n.jsx(
+    "div",
+    {
+      ref: i,
+      "aria-hidden": "true",
+      className: _(We.skeleton, r),
+      style: {
+        width: e,
+        height: a,
+        "--sand-skeleton-radius": ze(t),
+        ...d
+      },
+      ...c
+    }
+  );
+});
+on.displayName = "SandSkeleton";
+const ee = {
   "sand-container": "_sand-container_174rd_1",
   "sand-header": "_sand-header_174rd_7",
   "sand-tool-layout": "_sand-tool-layout_174rd_17",
   "sand-tool-panel": "_sand-tool-panel_174rd_24",
   "sand-result-panel": "_sand-result-panel_174rd_34"
-}, aa = b(function({ className: a = "", ...n }, r) {
-  return /* @__PURE__ */ s.jsx("div", { ref: r, className: i(q["sand-container"], a), ...n });
-});
-aa.displayName = "SandContainer";
-const na = b(function({ className: a = "", ...n }, r) {
-  return /* @__PURE__ */ s.jsx("header", { ref: r, className: i(q["sand-header"], a), ...n });
-});
-na.displayName = "SandHeader";
-const ge = b(function({ className: a = "", ...n }, r) {
-  return /* @__PURE__ */ s.jsx("div", { ref: r, className: i(q["sand-tool-layout"], a), ...n });
-});
-ge.displayName = "SandToolLayout";
-const sa = b(function({ className: a = "", ...n }, r) {
-  return /* @__PURE__ */ s.jsx("aside", { ref: r, className: i(q["sand-tool-panel"], a), ...n });
-});
-sa.displayName = "SandToolPanel";
-const ra = b(function({ className: a = "", ...n }, r) {
-  return /* @__PURE__ */ s.jsx("main", { ref: r, className: i(q["sand-result-panel"], a), ...n });
-});
-ra.displayName = "SandResultPanel";
-const ta = b(
-  function({ header: a, panel: n, result: r }, t) {
-    return /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-      a,
-      /* @__PURE__ */ s.jsxs(ge, { ref: t, children: [
-        n,
-        r
-      ] })
-    ] });
-  }
-);
-ta.displayName = "SandMicroserviceLayout";
-const w = {
-  "sand-modal-root": "_sand-modal-root_uryk1_1",
-  "sand-modal-backdrop": "_sand-modal-backdrop_uryk1_11",
-  "sand-modal-panel": "_sand-modal-panel_uryk1_18",
-  "sand-modal-header": "_sand-modal-header_uryk1_29",
-  "sand-modal-title": "_sand-modal-title_uryk1_38",
-  "sand-modal-description": "_sand-modal-description_uryk1_44",
-  "sand-modal-close": "_sand-modal-close_uryk1_51",
-  "sand-modal-body": "_sand-modal-body_uryk1_73",
-  "sand-modal-footer": "_sand-modal-footer_uryk1_77"
-}, Ee = Me(null);
-function we() {
-  const d = De(Ee);
-  if (!d)
+}, dn = f(function({ className: e = "", ...a }, t) {
+  return /* @__PURE__ */ n.jsx("div", { ref: t, className: _(ee["sand-container"], e), ...a });
+});
+dn.displayName = "SandContainer";
+const cn = f(function({ className: e = "", ...a }, t) {
+  return /* @__PURE__ */ n.jsx("header", { ref: t, className: _(ee["sand-header"], e), ...a });
+});
+cn.displayName = "SandHeader";
+const ln = f(function({ className: e = "", ...a }, t) {
+  return /* @__PURE__ */ n.jsx("div", { ref: t, className: _(ee["sand-tool-layout"], e), ...a });
+});
+ln.displayName = "SandToolLayout";
+const un = f(function({ className: e = "", ...a }, t) {
+  return /* @__PURE__ */ n.jsx("aside", { ref: t, className: _(ee["sand-tool-panel"], e), ...a });
+});
+un.displayName = "SandToolPanel";
+const _n = f(function({ className: e = "", ...a }, t) {
+  return /* @__PURE__ */ n.jsx("main", { ref: t, className: _(ee["sand-result-panel"], e), ...a });
+});
+_n.displayName = "SandResultPanel";
+const M = {
+  "sand-modal-root": "_sand-modal-root_1e60v_1",
+  "sand-modal-backdrop": "_sand-modal-backdrop_1e60v_11",
+  "sand-modal-panel": "_sand-modal-panel_1e60v_22",
+  "sand-modal-header": "_sand-modal-header_1e60v_36",
+  "sand-modal-title": "_sand-modal-title_1e60v_45",
+  "sand-modal-description": "_sand-modal-description_1e60v_52",
+  "sand-modal-close": "_sand-modal-close_1e60v_59",
+  "sand-modal-body": "_sand-modal-body_1e60v_78",
+  "sand-modal-footer": "_sand-modal-footer_1e60v_86"
+}, Ke = Pe(null);
+function Ue() {
+  const s = De(Ke);
+  if (!s)
     throw new Error("SandModal sub-components must be used within SandModal.");
-  return d;
+  return s;
 }
-const se = b(function({ className: a = "", ...n }, r) {
-  return /* @__PURE__ */ s.jsx("div", { ref: r, className: i(w["sand-modal-header"], a), ...n });
-});
-se.displayName = "SandModal.Header";
-const re = b(function({ className: a = "", ...n }, r) {
-  return /* @__PURE__ */ s.jsx("div", { ref: r, className: i(w["sand-modal-body"], a), ...n });
-});
-re.displayName = "SandModal.Body";
-const te = b(function({ className: a = "", ...n }, r) {
-  return /* @__PURE__ */ s.jsx("div", { ref: r, className: i(w["sand-modal-footer"], a), ...n });
-});
-te.displayName = "SandModal.Footer";
-const de = b(function({ className: a = "", ...n }, r) {
-  const { titleId: t } = we();
-  return /* @__PURE__ */ s.jsx("div", { ref: r, id: t, className: i(w["sand-modal-title"], a), ...n });
-});
-de.displayName = "SandModal.Title";
-const oe = b(function({ className: a = "", ...n }, r) {
-  const { descriptionId: t } = we();
-  return /* @__PURE__ */ s.jsx("div", { ref: r, id: t, className: i(w["sand-modal-description"], a), ...n });
-});
-oe.displayName = "SandModal.Description";
-const Te = b(function({
-  open: a,
-  onClose: n,
-  title: r,
-  description: t,
-  footer: c,
-  closeOnOverlay: o = !0,
-  initialFocusRef: u,
-  children: f,
-  className: h = "",
-  ..._
-}, m) {
-  const S = C(), y = C(), N = K(null), g = K(null), A = K(null), V = T(
-    () => ({ titleId: S, descriptionId: y }),
-    [y, S]
-  ), J = I(
-    (j) => {
-      g.current = j, typeof m == "function" ? m(j) : m && (m.current = j);
+const pe = f(function({ className: e = "", ...a }, t) {
+  return /* @__PURE__ */ n.jsx("div", { ref: t, className: _(M["sand-modal-header"], e), ...a });
+});
+pe.displayName = "SandModal.Header";
+const be = f(function({ className: e = "", ...a }, t) {
+  return /* @__PURE__ */ n.jsx("div", { ref: t, className: _(M["sand-modal-body"], e), ...a });
+});
+be.displayName = "SandModal.Body";
+const he = f(function({ className: e = "", ...a }, t) {
+  return /* @__PURE__ */ n.jsx("div", { ref: t, className: _(M["sand-modal-footer"], e), ...a });
+});
+he.displayName = "SandModal.Footer";
+const xe = f(function({ className: e = "", ...a }, t) {
+  const { titleId: r } = Ue();
+  return /* @__PURE__ */ n.jsx("div", { ref: t, id: r, className: _(M["sand-modal-title"], e), ...a });
+});
+xe.displayName = "SandModal.Title";
+const ve = f(function({ className: e = "", ...a }, t) {
+  const { descriptionId: r } = Ue();
+  return /* @__PURE__ */ n.jsx("div", { ref: t, id: r, className: _(M["sand-modal-description"], e), ...a });
+});
+ve.displayName = "SandModal.Description";
+const Je = f(function({
+  open: e,
+  onClose: a,
+  title: t,
+  description: r,
+  footer: d,
+  closeOnOverlay: c = !0,
+  initialFocusRef: i,
+  children: l,
+  className: u = "",
+  ...m
+}, b) {
+  const x = I(), p = I(), v = de(null), T = de(null), R = de(null), g = C(
+    () => ({ titleId: x, descriptionId: p }),
+    [p, x]
+  ), ie = q(
+    (w) => {
+      T.current = w, typeof b == "function" ? b(w) : b && (b.current = w);
     },
-    [m]
-  ), M = I(
-    (j) => {
-      if (j.key === "Escape") {
-        j.preventDefault(), n();
+    [b]
+  ), G = q(
+    (w) => {
+      if (w.key === "Escape") {
+        w.preventDefault(), a();
         return;
       }
-      if (j.key !== "Tab" || !g.current)
+      if (w.key !== "Tab" || !T.current)
         return;
-      const R = ze(g.current);
-      if (R.length === 0) {
-        j.preventDefault(), g.current.focus();
+      const O = _a(T.current);
+      if (O.length === 0) {
+        w.preventDefault(), T.current.focus();
         return;
       }
-      const L = R[0], Y = R[R.length - 1], G = document.activeElement;
-      j.shiftKey && G === L ? (j.preventDefault(), Y.focus()) : !j.shiftKey && G === Y && (j.preventDefault(), L.focus());
+      const ae = O[0], ne = O[O.length - 1], te = document.activeElement;
+      w.shiftKey && te === ae ? (w.preventDefault(), ne.focus()) : !w.shiftKey && te === ne && (w.preventDefault(), ae.focus());
     },
-    [n]
+    [a]
   );
-  return Ie(() => {
-    if (!a) {
-      A.current?.focus();
+  return Oe(() => {
+    if (!e) {
+      R.current?.focus();
       return;
     }
-    A.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-    const j = document.body.style.overflow;
-    return document.body.style.overflow = "hidden", (u?.current ?? N.current ?? g.current)?.focus(), window.addEventListener("keydown", M), () => {
-      document.body.style.overflow = j, window.removeEventListener("keydown", M);
+    R.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const w = document.body.style.overflow;
+    return document.body.style.overflow = "hidden", (i?.current ?? v.current ?? T.current)?.focus(), window.addEventListener("keydown", G), () => {
+      document.body.style.overflow = w, window.removeEventListener("keydown", G);
     };
-  }, [M, u, a]), a ? /* @__PURE__ */ s.jsxs("div", { className: w["sand-modal-root"], children: [
-    /* @__PURE__ */ s.jsx(
+  }, [G, i, e]), e ? /* @__PURE__ */ n.jsxs("div", { className: M["sand-modal-root"], children: [
+    /* @__PURE__ */ n.jsx(
       "button",
       {
         type: "button",
-        className: w["sand-modal-backdrop"],
+        className: M["sand-modal-backdrop"],
         "aria-label": "Close dialog",
-        onClick: o ? n : void 0
+        onClick: c ? a : void 0
       }
     ),
-    /* @__PURE__ */ s.jsx(
+    /* @__PURE__ */ n.jsx(
       "div",
       {
-        ref: J,
+        ref: ie,
         role: "dialog",
         "aria-modal": "true",
-        "aria-labelledby": r ? S : void 0,
-        "aria-describedby": t ? y : void 0,
-        className: i(w["sand-modal-panel"], h),
+        "aria-labelledby": t ? x : void 0,
+        "aria-describedby": r ? p : void 0,
+        className: _(M["sand-modal-panel"], u),
         tabIndex: -1,
-        ..._,
-        children: /* @__PURE__ */ s.jsxs(Ee.Provider, { value: V, children: [
-          (r || t) && /* @__PURE__ */ s.jsxs(se, { children: [
-            /* @__PURE__ */ s.jsxs("div", { children: [
-              r && /* @__PURE__ */ s.jsx(de, { children: r }),
-              t && /* @__PURE__ */ s.jsx(oe, { children: t })
+        ...m,
+        children: /* @__PURE__ */ n.jsxs(Ke.Provider, { value: g, children: [
+          (t || r) && /* @__PURE__ */ n.jsxs(pe, { children: [
+            /* @__PURE__ */ n.jsxs("div", { children: [
+              t && /* @__PURE__ */ n.jsx(xe, { children: t }),
+              r && /* @__PURE__ */ n.jsx(ve, { children: r })
             ] }),
-            /* @__PURE__ */ s.jsx(
+            /* @__PURE__ */ n.jsx(
               "button",
               {
-                ref: N,
+                ref: v,
                 type: "button",
-                className: w["sand-modal-close"],
-                onClick: n,
+                className: M["sand-modal-close"],
+                onClick: a,
                 "aria-label": "Close dialog",
-                children: /* @__PURE__ */ s.jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+                children: /* @__PURE__ */ n.jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
               }
             )
           ] }),
-          /* @__PURE__ */ s.jsx(re, { children: f }),
-          c && /* @__PURE__ */ s.jsx(te, { children: c })
+          /* @__PURE__ */ n.jsx(be, { children: l }),
+          d && /* @__PURE__ */ n.jsx(he, { children: d })
         ] })
       }
     )
   ] }) : null;
 });
-Te.displayName = "SandModal";
-const ba = Object.assign(Te, {
-  Header: se,
-  Body: re,
-  Footer: te,
-  Title: de,
-  Description: oe
-}), B = {
+Je.displayName = "SandModal";
+const pt = Object.assign(Je, {
+  Header: pe,
+  Body: be,
+  Footer: he,
+  Title: xe,
+  Description: ve
+}), mn = "_navbar_ce3ap_1", fn = "_container_ce3ap_11", pn = "_brand_ce3ap_20", bn = "_links_ce3ap_30", hn = "_link_ce3ap_30", xn = "_linkActive_ce3ap_55", vn = "_mobileToggle_ce3ap_64", yn = "_overlay_ce3ap_86", gn = "_overlayVisible_ce3ap_97", Sn = "_drawer_ce3ap_102", Nn = "_drawerOpen_ce3ap_118", jn = "_drawerHeader_ce3ap_122", kn = "_drawerTitle_ce3ap_130", wn = "_drawerClose_ce3ap_136", Tn = "_drawerContent_ce3ap_150", E = {
+  navbar: mn,
+  container: fn,
+  brand: pn,
+  links: bn,
+  link: hn,
+  linkActive: xn,
+  mobileToggle: vn,
+  overlay: yn,
+  overlayVisible: gn,
+  drawer: Sn,
+  drawerOpen: Nn,
+  drawerHeader: jn,
+  drawerTitle: kn,
+  drawerClose: wn,
+  drawerContent: Tn
+}, bt = f(function({ brand: e, items: a = [], onMenuClick: t, className: r, children: d, ...c }, i) {
+  return /* @__PURE__ */ n.jsx("nav", { ref: i, className: _(E.navbar, r), ...c, children: /* @__PURE__ */ n.jsxs("div", { className: E.container, children: [
+    /* @__PURE__ */ n.jsx("div", { className: E.brand, children: e }),
+    /* @__PURE__ */ n.jsxs("div", { className: E.links, children: [
+      a.map((l) => /* @__PURE__ */ n.jsx(
+        "a",
+        {
+          href: l.href,
+          className: _(E.link, l.active && E.linkActive),
+          children: l.label
+        },
+        l.href
+      )),
+      d
+    ] }),
+    /* @__PURE__ */ n.jsx(
+      "button",
+      {
+        type: "button",
+        className: E.mobileToggle,
+        onClick: t,
+        "aria-label": "Toggle menu",
+        children: /* @__PURE__ */ n.jsx(L, { icon: "menu", size: 24 })
+      }
+    )
+  ] }) });
+}), ht = f(function({ open: e, onClose: a, title: t, children: r, className: d, ...c }, i) {
+  return /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+    /* @__PURE__ */ n.jsx(
+      "div",
+      {
+        className: _(E.overlay, e && E.overlayVisible),
+        onClick: a,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ n.jsxs(
+      "div",
+      {
+        ref: i,
+        className: _(E.drawer, e && E.drawerOpen, d),
+        role: "dialog",
+        "aria-modal": "true",
+        ...c,
+        children: [
+          /* @__PURE__ */ n.jsxs("div", { className: E.drawerHeader, children: [
+            /* @__PURE__ */ n.jsx("div", { className: E.drawerTitle, children: t }),
+            /* @__PURE__ */ n.jsx(
+              "button",
+              {
+                type: "button",
+                className: E.drawerClose,
+                onClick: a,
+                "aria-label": "Close menu",
+                children: /* @__PURE__ */ n.jsx(L, { icon: "close", size: 24 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ n.jsx("div", { className: E.drawerContent, children: r })
+        ]
+      }
+    )
+  ] });
+}), U = {
   "sand-pagination": "_sand-pagination_cizv5_1",
   "sand-page-btn": "_sand-page-btn_cizv5_8",
   "sand-page-btn-active": "_sand-page-btn-active_cizv5_36"
-}, da = b(function({ currentPage: a, totalPages: n, onPageChange: r, className: t = "", ...c }, o) {
-  const u = T(() => Array.from({ length: n }, (_, m) => m + 1), [n]), f = I(
-    (_) => {
-      _ < 1 || _ > n || _ === a || r?.(_);
+}, En = f(function({ currentPage: e, totalPages: a, onPageChange: t, className: r = "", ...d }, c) {
+  const i = C(() => Array.from({ length: a }, (m, b) => b + 1), [a]), l = q(
+    (m) => {
+      m < 1 || m > a || m === e || t?.(m);
     },
-    [a, r, n]
-  ), h = I(
-    (_) => {
-      ne(_, a - 1, n, (m) => f(m + 1));
+    [e, t, a]
+  ), u = q(
+    (m) => {
+      ce(m, e - 1, a, (b) => l(b + 1));
     },
-    [a, f, n]
+    [e, l, a]
   );
-  return /* @__PURE__ */ s.jsxs(
+  return /* @__PURE__ */ n.jsxs(
     "nav",
     {
-      ref: o,
+      ref: c,
       "aria-label": "Pagination",
-      className: i(B["sand-pagination"], t),
-      onKeyDown: h,
-      ...c,
+      className: _(U["sand-pagination"], r),
+      onKeyDown: u,
+      ...d,
       children: [
-        /* @__PURE__ */ s.jsx(
+        /* @__PURE__ */ n.jsx(
           "button",
           {
             type: "button",
-            className: B["sand-page-btn"],
-            disabled: a === 1,
+            className: U["sand-page-btn"],
+            disabled: e === 1,
             "aria-label": "Previous page",
-            onClick: () => f(a - 1),
-            children: /* @__PURE__ */ s.jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "chevron_left" })
+            onClick: () => l(e - 1),
+            children: /* @__PURE__ */ n.jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "chevron_left" })
           }
         ),
-        u.map((_) => /* @__PURE__ */ s.jsx(
+        i.map((m) => /* @__PURE__ */ n.jsx(
           "button",
           {
             type: "button",
-            "aria-current": _ === a ? "page" : void 0,
-            "aria-label": `Page ${_}`,
-            className: i(B["sand-page-btn"], _ === a && B["sand-page-btn-active"]),
-            onClick: () => f(_),
-            children: _
+            "aria-current": m === e ? "page" : void 0,
+            "aria-label": `Page ${m}`,
+            className: _(U["sand-page-btn"], m === e && U["sand-page-btn-active"]),
+            onClick: () => l(m),
+            children: m
           },
-          _
+          m
         )),
-        /* @__PURE__ */ s.jsx(
+        /* @__PURE__ */ n.jsx(
           "button",
           {
             type: "button",
-            className: B["sand-page-btn"],
-            disabled: a === n,
+            className: U["sand-page-btn"],
+            disabled: e === a,
             "aria-label": "Next page",
-            onClick: () => f(a + 1),
-            children: /* @__PURE__ */ s.jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "chevron_right" })
+            onClick: () => l(e + 1),
+            children: /* @__PURE__ */ n.jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "chevron_right" })
           }
         )
       ]
     }
   );
 });
-da.displayName = "SandPagination";
-const x = {
+En.displayName = "SandPagination";
+const $n = "_track_1b1ni_1", Cn = "_bar_1b1ni_8", Rn = "_ring_1b1ni_15", In = "_ringTrack_1b1ni_19", An = "_ringValue_1b1ni_24", Mn = "_label_1b1ni_32", z = {
+  track: $n,
+  bar: Cn,
+  ring: Rn,
+  ringTrack: In,
+  ringValue: An,
+  label: Mn
+};
+function On(s, e) {
+  return Math.min(Math.max(s, 0), e);
+}
+const Pn = f(function({ value: e, max: a = 100, size: t = 96, thickness: r = 8, variant: d = "linear", showValue: c, className: i, style: l, ...u }, m) {
+  const b = On(e, a), x = b / a * 100;
+  if (d === "circular") {
+    const p = (t - r) / 2, v = 2 * Math.PI * p, T = v - x / 100 * v;
+    return /* @__PURE__ */ n.jsxs(
+      "div",
+      {
+        ref: m,
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": a,
+        "aria-valuenow": b,
+        className: _(i),
+        style: { position: "relative", width: t, height: t, ...l },
+        ...u,
+        children: [
+          /* @__PURE__ */ n.jsxs("svg", { className: z.ring, width: t, height: t, viewBox: `0 0 ${t} ${t}`, children: [
+            /* @__PURE__ */ n.jsx("circle", { className: z.ringTrack, cx: t / 2, cy: t / 2, r: p, strokeWidth: r }),
+            /* @__PURE__ */ n.jsx(
+              "circle",
+              {
+                className: z.ringValue,
+                cx: t / 2,
+                cy: t / 2,
+                r: p,
+                strokeWidth: r,
+                strokeDasharray: v,
+                strokeDashoffset: T
+              }
+            )
+          ] }),
+          c && /* @__PURE__ */ n.jsxs("span", { className: z.label, children: [
+            Math.round(x),
+            "%"
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ n.jsx(
+    "div",
+    {
+      ref: m,
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": a,
+      "aria-valuenow": b,
+      className: _(z.track, i),
+      style: { height: r, ...l },
+      ...u,
+      children: /* @__PURE__ */ n.jsx("div", { className: z.bar, style: { width: `${x}%` } })
+    }
+  );
+});
+Pn.displayName = "SandProgress";
+const k = {
   "sand-choice-group": "_sand-choice-group_viqgz_1",
   "sand-choice-row": "_sand-choice-row_viqgz_7",
   "sand-choice-input": "_sand-choice-input_viqgz_16",
@@ -803,73 +1244,331 @@ const x = {
   "sand-choice-content": "_sand-choice-content_viqgz_123",
   "sand-choice-label": "_sand-choice-label_viqgz_129",
   "sand-choice-description": "_sand-choice-description_viqgz_134"
-}, ce = ({ label: d, description: a }) => /* @__PURE__ */ s.jsxs("span", { className: x["sand-choice-content"], children: [
-  /* @__PURE__ */ s.jsx("span", { className: x["sand-choice-label"], children: d }),
-  a && /* @__PURE__ */ s.jsx("span", { className: x["sand-choice-description"], children: a })
-] }), oa = b(function({ label: a, description: n, id: r, className: t = "", ...c }, o) {
-  const u = C(), f = r ?? u;
-  return /* @__PURE__ */ s.jsxs("label", { className: i(x["sand-choice-row"], t), htmlFor: f, children: [
-    /* @__PURE__ */ s.jsx("input", { ref: o, id: f, type: "checkbox", className: x["sand-choice-input"], ...c }),
-    /* @__PURE__ */ s.jsx("span", { className: i(x["sand-choice-control"], x["sand-checkbox"]), "aria-hidden": "true", children: /* @__PURE__ */ s.jsx("span", { className: i(x["sand-checkbox-icon"], "material-symbols-rounded"), children: "check" }) }),
-    /* @__PURE__ */ s.jsx(ce, { label: a, description: n })
+}, ye = ({ label: s, description: e }) => /* @__PURE__ */ n.jsxs("span", { className: k["sand-choice-content"], children: [
+  /* @__PURE__ */ n.jsx("span", { className: k["sand-choice-label"], children: s }),
+  e && /* @__PURE__ */ n.jsx("span", { className: k["sand-choice-description"], children: e })
+] }), Dn = f(function({ label: e, description: a, id: t, className: r = "", ...d }, c) {
+  const i = I(), l = t ?? i;
+  return /* @__PURE__ */ n.jsxs("label", { className: _(k["sand-choice-row"], r), htmlFor: l, children: [
+    /* @__PURE__ */ n.jsx("input", { ref: c, id: l, type: "checkbox", className: k["sand-choice-input"], ...d }),
+    /* @__PURE__ */ n.jsx("span", { className: _(k["sand-choice-control"], k["sand-checkbox"]), "aria-hidden": "true", children: /* @__PURE__ */ n.jsx("span", { className: _(k["sand-checkbox-icon"], "material-symbols-rounded"), children: "check" }) }),
+    /* @__PURE__ */ n.jsx(ye, { label: e, description: a })
   ] });
 });
-oa.displayName = "SandCheckbox";
-const ca = b(function({ label: a, description: n, id: r, className: t = "", onKeyDown: c, ...o }, u) {
-  const f = C(), h = r ?? f, _ = (m) => {
-    if (c?.(m), m.defaultPrevented || !o.name)
+Dn.displayName = "SandCheckbox";
+const zn = f(function({ label: e, description: a, id: t, className: r = "", onKeyDown: d, ...c }, i) {
+  const l = I(), u = t ?? l, m = (b) => {
+    if (d?.(b), b.defaultPrevented || !c.name)
       return;
-    const S = Array.from(
-      document.querySelectorAll(`input[type="radio"][name="${o.name}"]`)
-    ), y = S.findIndex((N) => N.id === h);
-    ne(m, y, S.length, (N) => {
-      S[N]?.focus(), S[N]?.click();
+    const x = Array.from(
+      document.querySelectorAll(`input[type="radio"][name="${c.name}"]`)
+    ), p = x.findIndex((v) => v.id === u);
+    ce(b, p, x.length, (v) => {
+      x[v]?.focus(), x[v]?.click();
     });
   };
-  return /* @__PURE__ */ s.jsxs("label", { className: i(x["sand-choice-row"], t), htmlFor: h, children: [
-    /* @__PURE__ */ s.jsx("input", { ref: u, id: h, type: "radio", className: x["sand-choice-input"], onKeyDown: _, ...o }),
-    /* @__PURE__ */ s.jsx("span", { className: i(x["sand-choice-control"], x["sand-radio"]), "aria-hidden": "true" }),
-    /* @__PURE__ */ s.jsx(ce, { label: a, description: n })
+  return /* @__PURE__ */ n.jsxs("label", { className: _(k["sand-choice-row"], r), htmlFor: u, children: [
+    /* @__PURE__ */ n.jsx("input", { ref: i, id: u, type: "radio", className: k["sand-choice-input"], onKeyDown: m, ...c }),
+    /* @__PURE__ */ n.jsx("span", { className: _(k["sand-choice-control"], k["sand-radio"]), "aria-hidden": "true" }),
+    /* @__PURE__ */ n.jsx(ye, { label: e, description: a })
   ] });
 });
-ca.displayName = "SandRadio";
-const la = b(function({ label: a, description: n, id: r, className: t = "", ...c }, o) {
-  const u = C(), f = r ?? u;
-  return /* @__PURE__ */ s.jsxs("label", { className: i(x["sand-choice-row"], t), htmlFor: f, children: [
-    /* @__PURE__ */ s.jsx("input", { ref: o, id: f, type: "checkbox", role: "switch", className: x["sand-choice-input"], ...c }),
-    /* @__PURE__ */ s.jsx("span", { className: i(x["sand-choice-control"], x["sand-switch"]), "aria-hidden": "true" }),
-    /* @__PURE__ */ s.jsx(ce, { label: a, description: n })
+zn.displayName = "SandRadio";
+const Bn = f(function({ label: e, description: a, id: t, className: r = "", ...d }, c) {
+  const i = I(), l = t ?? i;
+  return /* @__PURE__ */ n.jsxs("label", { className: _(k["sand-choice-row"], r), htmlFor: l, children: [
+    /* @__PURE__ */ n.jsx("input", { ref: c, id: l, type: "checkbox", role: "switch", className: k["sand-choice-input"], ...d }),
+    /* @__PURE__ */ n.jsx("span", { className: _(k["sand-choice-control"], k["sand-switch"]), "aria-hidden": "true" }),
+    /* @__PURE__ */ n.jsx(ye, { label: e, description: a })
   ] });
 });
-la.displayName = "SandSwitch";
-const ia = b(function({ className: a = "", label: n, ...r }, t) {
-  return /* @__PURE__ */ s.jsx("div", { ref: t, role: "group", "aria-label": typeof n == "string" ? n : void 0, className: i(x["sand-choice-group"], a), ...r });
+Bn.displayName = "SandSwitch";
+const Fn = f(function({ className: e = "", label: a, ...t }, r) {
+  return /* @__PURE__ */ n.jsx("div", { ref: r, role: "group", "aria-label": typeof a == "string" ? a : void 0, className: _(k["sand-choice-group"], e), ...t });
+});
+Fn.displayName = "SandChoiceGroup";
+const qn = f(function({ as: e, direction: a = "column", gap: t = "md", align: r, justify: d, wrap: c, surface: i, className: l, style: u, ...m }, b) {
+  const x = e ?? "div";
+  let p = u;
+  return p = j(p, "--sand-display", "flex"), p = j(p, "--sand-gap", X(t)), p = j(p, "--sand-align", r), p = j(p, "--sand-justify", d), p = j(p, "--sand-stack-direction", a), p = j(p, "--sand-stack-wrap", c ? "wrap" : "nowrap"), /* @__PURE__ */ n.jsx(
+    x,
+    {
+      ref: b,
+      className: _(Z.box, i && Z.surface, l),
+      style: {
+        flexDirection: "var(--sand-stack-direction)",
+        flexWrap: "var(--sand-stack-wrap)",
+        ...p
+      },
+      ...m
+    }
+  );
+});
+qn.displayName = "SandStack";
+const Ln = "_wrapper_1142m_1", Vn = "_table_1142m_9", Gn = "_stickyHeader_1142m_36", Hn = "_striped_1142m_42", Yn = "_hoverable_1142m_50", J = {
+  wrapper: Ln,
+  table: Vn,
+  stickyHeader: Gn,
+  striped: Hn,
+  hoverable: Yn
+}, Wn = f(function({ striped: e, hoverable: a = !0, stickyHeader: t, className: r, wrapperProps: d, ...c }, i) {
+  return /* @__PURE__ */ n.jsx("div", { ...d, className: _(J.wrapper, d?.className), children: /* @__PURE__ */ n.jsx(
+    "table",
+    {
+      ref: i,
+      className: _(J.table, e && J.striped, a && J.hoverable, t && J.stickyHeader, r),
+      ...c
+    }
+  ) });
 });
-ia.displayName = "SandChoiceGroup";
+Wn.displayName = "SandTable";
+const Kn = "_root_yi163_1", Un = "_list_yi163_6", Jn = "_trigger_yi163_18", Xn = "_active_yi163_41", Zn = "_indicator_yi163_45", Qn = "_panel_yi163_57", B = {
+  root: Kn,
+  list: Un,
+  trigger: Jn,
+  active: Xn,
+  indicator: Zn,
+  panel: Qn
+};
+function xt({ items: s, defaultValue: e, className: a, ...t }) {
+  const r = I(), [d, c] = V(e ?? s[0]?.id), i = Math.max(s.findIndex((m) => m.id === d), 0), l = s[i], u = C(
+    () => ({
+      "--sand-tabs-left": `calc(4px + ${i} * (100% - 8px) / ${Math.max(s.length, 1)})`,
+      "--sand-tabs-width": `calc((100% - 8px) / ${Math.max(s.length, 1)})`
+    }),
+    [i, s.length]
+  );
+  return /* @__PURE__ */ n.jsxs("div", { className: _(B.root, a), ...t, children: [
+    /* @__PURE__ */ n.jsxs("div", { role: "tablist", "aria-label": "Tabs", className: B.list, style: u, children: [
+      /* @__PURE__ */ n.jsx("span", { "aria-hidden": "true", className: B.indicator }),
+      s.map((m, b) => {
+        const x = `${r}-tab-${m.id}`, p = `${r}-panel-${m.id}`, v = m.id === d;
+        return /* @__PURE__ */ n.jsx(
+          "button",
+          {
+            id: x,
+            role: "tab",
+            type: "button",
+            tabIndex: v ? 0 : -1,
+            "aria-selected": v,
+            "aria-controls": p,
+            className: _(B.trigger, v && B.active),
+            onClick: () => c(m.id),
+            onKeyDown: (T) => ce(T, b, s.length, (R) => c(s[R].id)),
+            children: m.label
+          },
+          m.id
+        );
+      })
+    ] }),
+    l && /* @__PURE__ */ n.jsx(
+      "div",
+      {
+        id: `${r}-panel-${l.id}`,
+        role: "tabpanel",
+        "aria-labelledby": `${r}-tab-${l.id}`,
+        className: B.panel,
+        children: l.content
+      }
+    )
+  ] });
+}
+const Xe = Pe(null);
+function Ae(s) {
+  return s !== "system" ? s : typeof window > "u" || typeof window.matchMedia != "function" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function et(s) {
+  if (!s)
+    return;
+  const e = {};
+  return s.accent && (e["--sand-accent"] = s.accent), s.accentDark && (e["--sand-accent-dark"] = s.accentDark), s.surface && (e["--theme-surface"] = s.surface), s.surfaceVariant && (e["--theme-surface-variant"] = s.surfaceVariant), s.text && (e["--theme-text"] = s.text), s.textMuted && (e["--theme-text-muted"] = s.textMuted), s.border && (e["--theme-border"] = s.border), s.shadowSm && (e["--shadow-sm"] = s.shadowSm), s.shadowMd && (e["--shadow-md"] = s.shadowMd), s.shadowLg && (e["--shadow-lg"] = s.shadowLg), e;
+}
+function vt({
+  children: s,
+  defaultTheme: e = "system",
+  theme: a,
+  tokens: t,
+  className: r,
+  root: d = !1
+}) {
+  const [c, i] = V(e), l = a ?? c, u = Ae(l);
+  Oe(() => {
+    !d || typeof document > "u" || (document.documentElement.dataset.theme = u);
+  }, [u, d]);
+  const m = C(
+    () => ({
+      theme: l,
+      resolvedTheme: u,
+      setTheme: i,
+      toggleTheme: () => i((b) => Ae(b) === "dark" ? "light" : "dark")
+    }),
+    [u, l]
+  );
+  return /* @__PURE__ */ n.jsx(Xe.Provider, { value: m, children: /* @__PURE__ */ n.jsx("div", { className: r, "data-theme": u, style: et(t), children: s }) });
+}
+function yt() {
+  const s = De(Xe);
+  if (!s)
+    throw new Error("useSandTheme must be used within SandThemeProvider.");
+  return s;
+}
+const at = "_title_huapx_1", nt = "_text_huapx_8", tt = "_code_huapx_14", st = "_gradient_huapx_25", rt = "_muted_huapx_31", P = {
+  title: at,
+  text: nt,
+  code: tt,
+  gradient: st,
+  muted: rt
+}, ge = {
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+}, ot = {
+  xs: "1rem",
+  sm: "1.25rem",
+  md: "1.5rem",
+  lg: "2rem",
+  xl: "2.75rem",
+  display: "clamp(3rem, 6vw, 4.75rem)"
+}, Ze = {
+  xs: "0.75rem",
+  sm: "0.875rem",
+  md: "1rem",
+  lg: "1.125rem",
+  xl: "1.25rem"
+}, dt = f(function({ as: e, level: a = 2, size: t = "lg", weight: r = "semibold", gradient: d, muted: c, className: i, style: l, ...u }, m) {
+  const b = e ?? `h${a}`;
+  return /* @__PURE__ */ n.jsx(
+    b,
+    {
+      ref: m,
+      className: _(P.title, d && P.gradient, c && P.muted, i),
+      style: { fontSize: ot[t], fontWeight: ge[r], ...l },
+      ...u
+    }
+  );
+});
+dt.displayName = "SandTitle";
+const ct = f(function({ as: e, size: a = "md", weight: t = "regular", gradient: r, muted: d, className: c, style: i, ...l }, u) {
+  const m = e ?? "p";
+  return /* @__PURE__ */ n.jsx(
+    m,
+    {
+      ref: u,
+      className: _(P.text, r && P.gradient, d && P.muted, c),
+      style: { fontSize: Ze[a], fontWeight: ge[t], ...i },
+      ...l
+    }
+  );
+});
+ct.displayName = "SandText";
+const it = f(function({ as: e, block: a, size: t = "sm", weight: r = "medium", className: d, style: c, ...i }, l) {
+  const u = e ?? (a ? "pre" : "code");
+  return /* @__PURE__ */ n.jsx(
+    u,
+    {
+      ref: l,
+      className: _(P.code, d),
+      style: {
+        fontSize: Ze[t],
+        fontWeight: ge[r],
+        display: a ? "block" : void 0,
+        whiteSpace: a ? "pre-wrap" : void 0,
+        ...c
+      },
+      ...i
+    }
+  );
+});
+it.displayName = "SandCode";
+const lt = "_trigger_ehjfy_1", ut = "_content_ehjfy_5", Me = {
+  trigger: lt,
+  content: ut
+};
+function gt({ content: s, children: e }) {
+  const a = I(), [t, r] = V(null);
+  if (!sa(e))
+    return null;
+  const d = (i) => {
+    const l = i.getBoundingClientRect();
+    r({
+      top: l.bottom + 10,
+      left: l.left + l.width / 2
+    });
+  }, c = ra(e, {
+    "aria-describedby": a,
+    onMouseEnter: (i) => {
+      d(i.currentTarget), e.props.onMouseEnter?.(i);
+    },
+    onMouseLeave: (i) => {
+      r(null), e.props.onMouseLeave?.(i);
+    },
+    onFocus: (i) => {
+      d(i.currentTarget), e.props.onFocus?.(i);
+    },
+    onBlur: (i) => {
+      r(null), e.props.onBlur?.(i);
+    }
+  });
+  return /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+    /* @__PURE__ */ n.jsx("span", { className: Me.trigger, children: c }),
+    t && typeof document < "u" ? oa(
+      /* @__PURE__ */ n.jsx(
+        "div",
+        {
+          id: a,
+          role: "tooltip",
+          className: Me.content,
+          style: { top: t.top, left: t.left, transform: "translateX(-50%)" },
+          children: s
+        }
+      ),
+      document.body
+    ) : null
+  ] });
+}
 export {
-  qe as SandBadge,
-  Le as SandBreadcrumbs,
-  Ye as SandButton,
-  Ge as SandCard,
-  oa as SandCheckbox,
-  ia as SandChoiceGroup,
-  ve as SandCodeBlock,
-  Ue as SandCodeTabs,
-  aa as SandContainer,
-  Ke as SandDivider,
-  je as SandFormGroup,
-  na as SandHeader,
-  Ne as SandInput,
-  Ze as SandInputGroup,
-  ea as SandKBD,
-  ta as SandMicroserviceLayout,
-  ba as SandModal,
-  da as SandPagination,
-  ca as SandRadio,
-  ra as SandResultPanel,
-  Xe as SandSnackbar,
-  la as SandSwitch,
-  Je as SandToast,
-  ge as SandToolLayout,
-  sa as SandToolPanel
+  Aa as SandAccordion,
+  va as SandAlert,
+  Ma as SandBadge,
+  qa as SandBox,
+  Oa as SandBreadcrumbs,
+  La as SandButton,
+  Va as SandCard,
+  Dn as SandCheckbox,
+  Fn as SandChoiceGroup,
+  it as SandCode,
+  Fe as SandCodeBlock,
+  Ya as SandCodeTabs,
+  dn as SandContainer,
+  Ka as SandDivider,
+  ht as SandDrawer,
+  He as SandFormGroup,
+  ft as SandGrid,
+  cn as SandHeader,
+  L as SandIcon,
+  Ye as SandInput,
+  en as SandInputGroup,
+  nn as SandKBD,
+  rn as SandLoader,
+  pt as SandModal,
+  bt as SandNavbar,
+  En as SandPagination,
+  Pn as SandProgress,
+  zn as SandRadio,
+  _n as SandResultPanel,
+  on as SandSkeleton,
+  Xa as SandSnackbar,
+  qn as SandStack,
+  Bn as SandSwitch,
+  Wn as SandTable,
+  xt as SandTabs,
+  ct as SandText,
+  vt as SandThemeProvider,
+  dt as SandTitle,
+  Ja as SandToast,
+  ln as SandToolLayout,
+  un as SandToolPanel,
+  gt as SandTooltip,
+  yt as useSandTheme
 };