npm - @sandurtech/sandui - Versions diffs - 0.0.2 → 0.1.1 - Mend

@sandurtech/sandui 0.0.2 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/sandui.js CHANGED Viewed

@@ -1,269 +1,269 @@
-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;
+import Wn, { forwardRef as f, useContext as ve, createContext as ye, useState as F, useId as O, Children as be, isValidElement as X, useMemo as E, useCallback as A, useRef as z, useEffect as K, cloneElement as sn } from "react";
+import { createPortal as rn } from "react-dom";
+var Se = { exports: {} }, ce = {};
+var Xe;
+function Un() {
+  if (Xe) return ce;
+  Xe = 1;
   var s = /* @__PURE__ */ Symbol.for("react.transitional.element"), e = /* @__PURE__ */ Symbol.for("react.fragment");
-  function a(t, r, d) {
+  function n(t, r, o) {
     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, {
+    if (o !== void 0 && (c = "" + o), r.key !== void 0 && (c = "" + r.key), "key" in r) {
+      o = {};
+      for (var d in r)
+        d !== "key" && (o[d] = r[d]);
+    } else o = r;
+    return r = o.ref, {
       $$typeof: s,
       type: t,
       key: c,
       ref: r !== void 0 ? r : null,
-      props: d
+      props: o
     };
   }
-  return H.Fragment = e, H.jsx = a, H.jsxs = a, H;
+  return ce.Fragment = e, ce.jsx = n, ce.jsxs = n, ce;
 }
-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:
+var ie = {};
+var Ze;
+function Jn() {
+  return Ze || (Ze = 1, process.env.NODE_ENV !== "production" && (function() {
+    function s(u) {
+      if (u == null) return null;
+      if (typeof u == "function")
+        return u.$$typeof === S ? null : u.displayName || u.name || null;
+      if (typeof u == "string") return u;
+      switch (u) {
+        case j:
           return "Fragment";
-        case ie:
+        case D:
           return "Profiler";
-        case g:
+        case y:
           return "StrictMode";
-        case ae:
+        case Z:
           return "Suspense";
-        case ne:
+        case W:
           return "SuspenseList";
-        case Qe:
+        case Ce:
           return "Activity";
       }
-      if (typeof o == "object")
-        switch (typeof o.tag == "number" && console.error(
+      if (typeof u == "object")
+        switch (typeof u.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), o.$$typeof) {
-          case T:
+        ), u.$$typeof) {
+          case g:
             return "Portal";
-          case w:
-            return o.displayName || "Context";
-          case G:
-            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;
+          case Y:
+            return u.displayName || "Context";
+          case P:
+            return (u._context.displayName || "Context") + ".Consumer";
+          case I:
+            var x = u.render;
+            return u = u.displayName, u || (u = x.displayName || x.name || "", u = u !== "" ? "ForwardRef(" + u + ")" : "ForwardRef"), u;
+          case oe:
+            return x = u.displayName || null, x !== null ? x : s(u.type) || "Memo";
+          case U:
+            x = u._payload, u = u._init;
             try {
-              return s(o(h));
+              return s(u(x));
             } catch {
             }
         }
       return null;
     }
-    function e(o) {
-      return "" + o;
+    function e(u) {
+      return "" + u;
     }
-    function a(o) {
+    function n(u) {
       try {
-        e(o);
-        var h = !1;
+        e(u);
+        var x = !1;
       } catch {
-        h = !0;
+        x = !0;
       }
-      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,
+      if (x) {
+        x = console;
+        var N = x.error, k = typeof Symbol == "function" && Symbol.toStringTag && u[Symbol.toStringTag] || u.constructor.name || "Object";
+        return N.call(
+          x,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          S
-        ), e(o);
+          k
+        ), e(u);
       }
     }
-    function t(o) {
-      if (o === R) return "<>";
-      if (typeof o == "object" && o !== null && o.$$typeof === le)
+    function t(u) {
+      if (u === j) return "<>";
+      if (typeof u == "object" && u !== null && u.$$typeof === U)
         return "<...>";
       try {
-        var h = s(o);
-        return h ? "<" + h + ">" : "<...>";
+        var x = s(u);
+        return x ? "<" + x + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
     function r() {
-      var o = ue.A;
-      return o === null ? null : o.getOwner();
+      var u = q.A;
+      return u === null ? null : u.getOwner();
     }
-    function d() {
+    function o() {
       return Error("react-stack-top-frame");
     }
-    function c(o) {
-      if (Se.call(o, "key")) {
-        var h = Object.getOwnPropertyDescriptor(o, "key").get;
-        if (h && h.isReactWarning) return !1;
+    function c(u) {
+      if (Q.call(u, "key")) {
+        var x = Object.getOwnPropertyDescriptor(u, "key").get;
+        if (x && x.isReactWarning) return !1;
       }
-      return o.key !== void 0;
+      return u.key !== void 0;
     }
-    function i(o, h) {
-      function y() {
-        Ne || (Ne = !0, console.error(
+    function d(u, x) {
+      function N() {
+        Ke || (Ke = !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)",
-          h
+          x
         ));
       }
-      y.isReactWarning = !0, Object.defineProperty(o, "key", {
-        get: y,
+      N.isReactWarning = !0, Object.defineProperty(u, "key", {
+        get: N,
         configurable: !0
       });
     }
     function l() {
-      var o = s(this.type);
-      return je[o] || (je[o] = !0, console.error(
+      var u = s(this.type);
+      return Ye[u] || (Ye[u] = !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."
-      )), o = this.props.ref, o !== void 0 ? o : null;
+      )), u = this.props.ref, u !== void 0 ? u : 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", {
+    function i(u, x, N, k, ge, Ee) {
+      var w = N.ref;
+      return u = {
+        $$typeof: b,
+        type: u,
+        key: x,
+        props: N,
+        _owner: k
+      }, (w !== void 0 ? w : null) !== null ? Object.defineProperty(u, "ref", {
         enumerable: !1,
         get: l
-      }) : Object.defineProperty(o, "ref", { enumerable: !1, value: null }), o._store = {}, Object.defineProperty(o._store, "validated", {
+      }) : Object.defineProperty(u, "ref", { enumerable: !1, value: null }), u._store = {}, Object.defineProperty(u._store, "validated", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: 0
-      }), Object.defineProperty(o, "_debugInfo", {
+      }), Object.defineProperty(u, "_debugInfo", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: null
-      }), Object.defineProperty(o, "_debugStack", {
+      }), Object.defineProperty(u, "_debugStack", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: se
-      }), Object.defineProperty(o, "_debugTask", {
+        value: ge
+      }), Object.defineProperty(u, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: me
-      }), Object.freeze && (Object.freeze(o.props), Object.freeze(o)), o;
+        value: Ee
+      }), Object.freeze && (Object.freeze(u.props), Object.freeze(u)), u;
     }
-    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);
+    function _(u, x, N, k, ge, Ee) {
+      var w = x.children;
+      if (w !== void 0)
+        if (k)
+          if (Kn(w)) {
+            for (k = 0; k < w.length; k++)
+              p(w[k]);
+            Object.freeze && Object.freeze(w);
           } 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 b(N);
-      if (Se.call(h, "key")) {
-        N = s(o);
-        var D = Object.keys(h).filter(function(na) {
-          return na !== "key";
+        else p(w);
+      if (Q.call(x, "key")) {
+        w = s(u);
+        var ee = Object.keys(x).filter(function(Yn) {
+          return Yn !== "key";
         });
-        S = 0 < D.length ? "{key: someKey, " + D.join(": ..., ") + ": ...}" : "{key: someKey}", Te[N + S] || (D = 0 < D.length ? "{" + D.join(": ..., ") + ": ...}" : "{}", console.error(
+        k = 0 < ee.length ? "{key: someKey, " + ee.join(": ..., ") + ": ...}" : "{key: someKey}", Je[w + k] || (ee = 0 < ee.length ? "{" + ee.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} />`,
-          S,
-          N,
-          D,
-          N
-        ), Te[N + S] = !0);
+          k,
+          w,
+          ee,
+          w
+        ), Je[w + k] = !0);
       }
-      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,
+      if (w = null, N !== void 0 && (n(N), w = "" + N), c(x) && (n(x.key), w = "" + x.key), "key" in x) {
+        N = {};
+        for (var Re in x)
+          Re !== "key" && (N[Re] = x[Re]);
+      } else N = x;
+      return w && d(
+        N,
+        typeof u == "function" ? u.displayName || u.name || "Unknown" : u
+      ), i(
+        u,
+        w,
         N,
-        y,
         r(),
-        se,
-        me
+        ge,
+        Ee
       );
     }
-    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 p(u) {
+      h(u) ? u._store && (u._store.validated = 1) : typeof u == "object" && u !== null && u.$$typeof === U && (u._payload.status === "fulfilled" ? h(u._payload.value) && u._payload.value._store && (u._payload.value._store.validated = 1) : u._store && (u._store.validated = 1));
     }
-    function x(o) {
-      return typeof o == "object" && o !== null && o.$$typeof === v;
+    function h(u) {
+      return typeof u == "object" && u !== null && u.$$typeof === b;
     }
-    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() {
+    var v = Wn, b = /* @__PURE__ */ Symbol.for("react.transitional.element"), g = /* @__PURE__ */ Symbol.for("react.portal"), j = /* @__PURE__ */ Symbol.for("react.fragment"), y = /* @__PURE__ */ Symbol.for("react.strict_mode"), D = /* @__PURE__ */ Symbol.for("react.profiler"), P = /* @__PURE__ */ Symbol.for("react.consumer"), Y = /* @__PURE__ */ Symbol.for("react.context"), I = /* @__PURE__ */ Symbol.for("react.forward_ref"), Z = /* @__PURE__ */ Symbol.for("react.suspense"), W = /* @__PURE__ */ Symbol.for("react.suspense_list"), oe = /* @__PURE__ */ Symbol.for("react.memo"), U = /* @__PURE__ */ Symbol.for("react.lazy"), Ce = /* @__PURE__ */ Symbol.for("react.activity"), S = /* @__PURE__ */ Symbol.for("react.client.reference"), q = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Q = Object.prototype.hasOwnProperty, Kn = Array.isArray, $e = console.createTask ? console.createTask : function() {
       return null;
     };
-    p = {
-      react_stack_bottom_frame: function(o) {
-        return o();
+    v = {
+      react_stack_bottom_frame: function(u) {
+        return u();
       }
     };
-    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,
+    var Ke, Ye = {}, We = v.react_stack_bottom_frame.bind(
+      v,
+      o
+    )(), Ue = $e(t(o)), Je = {};
+    ie.Fragment = j, ie.jsx = function(u, x, N) {
+      var k = 1e4 > q.recentlyCreatedOwnerStacks++;
+      return _(
+        u,
+        x,
+        N,
         !1,
-        S ? Error("react-stack-top-frame") : ke,
-        S ? _e(t(o)) : we
+        k ? Error("react-stack-top-frame") : We,
+        k ? $e(t(u)) : Ue
       );
-    }, Y.jsxs = function(o, h, y) {
-      var S = 1e4 > ue.recentlyCreatedOwnerStacks++;
-      return m(
-        o,
-        h,
-        y,
+    }, ie.jsxs = function(u, x, N) {
+      var k = 1e4 > q.recentlyCreatedOwnerStacks++;
+      return _(
+        u,
+        x,
+        N,
         !0,
-        S ? Error("react-stack-top-frame") : ke,
-        S ? _e(t(o)) : we
+        k ? Error("react-stack-top-frame") : We,
+        k ? $e(t(u)) : Ue
       );
     };
-  })()), Y;
+  })()), ie;
 }
-var Ce;
-function ia() {
-  return Ce || (Ce = 1, process.env.NODE_ENV === "production" ? re.exports = da() : re.exports = ca()), re.exports;
+var Qe;
+function Xn() {
+  return Qe || (Qe = 1, process.env.NODE_ENV === "production" ? Se.exports = Un() : Se.exports = Jn()), Se.exports;
 }
-var n = ia();
-function _(...s) {
+var a = Xn();
+function m(...s) {
   return s.filter(Boolean).join(" ");
 }
-const la = {
+const Zn = {
   none: "0",
   "2xs": "var(--sand-space-1)",
   xs: "var(--sand-space-2)",
@@ -273,38 +273,41 @@ const la = {
   xl: "var(--sand-space-6)",
   "2xl": "var(--sand-space-7)",
   "3xl": "var(--sand-space-8)"
-}, ua = {
+}, Qn = {
   sm: "var(--radius-sm)",
   md: "var(--radius-md)",
   lg: "var(--radius-lg)",
   xl: "var(--radius-xl)",
   full: "var(--radius-full)"
 };
-function X(s) {
+function me(s) {
   if (s !== void 0)
-    return typeof s == "number" ? `${s}px` : la[s] ?? s;
+    return typeof s == "number" ? `${s}px` : Zn[s] ?? s;
 }
-function ze(s) {
+function on(s) {
   if (s !== void 0)
-    return typeof s == "number" ? `${s}px` : ua[s] ?? s;
+    return typeof s == "number" ? `${s}px` : Qn[s] ?? s;
 }
-function j(s, e, a) {
-  return a === void 0 ? s : {
+function C(s, e, n) {
+  return n === void 0 ? s : {
     ...s,
-    [e]: a
+    [e]: n
   };
 }
-function Be(s, e, a) {
-  if (a === void 0)
+function cn(s, e, n) {
+  if (n === 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)));
+  if (typeof n != "object" || n === null || Array.isArray(n))
+    return C(t, `--${e}`, String(n));
+  for (const [r, o] of Object.entries(n))
+    if (o !== void 0) {
+      const c = r === "base" ? `--${e}` : `--${e}-${r}`;
+      t = C(t, c, String(o));
+    }
   return t;
 }
-function _a(s) {
+function ea(s) {
   return Array.from(
     s.querySelectorAll(
       [
@@ -318,66 +321,71 @@ function _a(s) {
     )
   ).filter((e) => !e.hasAttribute("disabled") && !e.getAttribute("aria-hidden"));
 }
-function ce(s, e, a, t) {
-  if (a !== 0)
+function ke(s, e, n, t) {
+  if (n !== 0)
     switch (s.key) {
       case "ArrowRight":
       case "ArrowDown":
-        s.preventDefault(), t((e + 1) % a);
+        s.preventDefault(), t((e + 1) % n);
         break;
       case "ArrowLeft":
       case "ArrowUp":
-        s.preventDefault(), t((e - 1 + a) % a);
+        s.preventDefault(), t((e - 1 + n) % n);
         break;
       case "Home":
         s.preventDefault(), t(0);
         break;
       case "End":
-        s.preventDefault(), t(a - 1);
+        s.preventDefault(), t(n - 1);
         break;
     }
 }
-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,
+const dn = ye({}), na = () => ve(dn);
+function Ps({ children: s, icons: e, renderIcon: n }) {
+  return /* @__PURE__ */ a.jsx(dn.Provider, { value: { map: e, renderIcon: n }, children: s });
+}
+const B = f(function({ icon: e, size: n, fill: t, className: r, style: o, ...c }, d) {
+  const { map: l, renderIcon: i } = na(), _ = typeof e == "string" ? l?.[e] ?? e : e;
+  if (typeof _ == "function") {
+    const p = _;
+    return /* @__PURE__ */ a.jsx(
+      p,
       {
-        ref: i,
-        width: a ?? 18,
-        height: a ?? 18,
-        className: _(r),
+        ref: d,
+        width: n ?? 18,
+        height: n ?? 18,
+        className: m(r),
         ...c
       }
     );
   }
-  return /* @__PURE__ */ n.jsx(
+  return typeof _ == "string" && i ? /* @__PURE__ */ a.jsx(a.Fragment, { children: i(_, { size: n, fill: t, className: r, style: o, ...c }) }) : /* @__PURE__ */ a.jsx(
     "span",
     {
-      ref: i,
-      className: _("material-symbols-rounded", r),
+      ref: d,
+      className: m("material-symbols-rounded", r),
       style: {
-        fontSize: a,
+        fontSize: n,
         fontVariationSettings: t ? "'FILL' 1" : void 0,
         display: "inline-flex",
         alignItems: "center",
         justifyContent: "center",
-        ...d
+        ...o
       },
       "aria-hidden": c["aria-label"] ? void 0 : !0,
       ...c,
-      children: e
+      children: _
     }
   );
 });
-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 = {
+B.displayName = "SandIcon";
+const aa = "_alert_f8qp0_1", ta = "_icon_f8qp0_13", sa = "_content_f8qp0_25", ra = "_title_f8qp0_30", oa = "_description_f8qp0_35", de = {
+  alert: aa,
+  icon: ta,
+  content: sa,
+  title: ra,
+  description: oa
+}, ca = {
   info: {
     icon: "info",
     color: "var(--color-info)",
@@ -398,75 +406,76 @@ const ma = "_alert_f8qp0_1", fa = "_icon_f8qp0_13", pa = "_content_f8qp0_25", ba
     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(
+}, ia = f(function({ status: e = "info", title: n, description: t, className: r, style: o, children: c, ...d }, l) {
+  const i = ca[e];
+  return /* @__PURE__ */ a.jsxs(
     "div",
     {
       ref: l,
       role: "status",
-      className: _(W.alert, r),
+      className: m(de.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
+        "--sand-alert-border": i.color,
+        "--sand-alert-bg": `color-mix(in srgb, ${i.soft} 74%, var(--theme-surface))`,
+        "--sand-alert-soft": i.soft,
+        "--sand-alert-color": i.color,
+        ...o
       },
-      ...i,
+      ...d,
       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 }),
+        /* @__PURE__ */ a.jsx("span", { className: de.icon, children: /* @__PURE__ */ a.jsx(B, { icon: i.icon, size: 20 }) }),
+        /* @__PURE__ */ a.jsxs("div", { className: de.content, children: [
+          n && /* @__PURE__ */ a.jsx("div", { className: de.title, children: n }),
+          t && /* @__PURE__ */ a.jsx("div", { className: de.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(
+ia.displayName = "SandAlert";
+const da = "_accordion_hg6cu_1", la = "_item_hg6cu_7", ua = "_trigger_hg6cu_23", _a = "_triggerMain_hg6cu_37", pa = "_itemIcon_hg6cu_45", ma = "_triggerText_hg6cu_64", fa = "_title_hg6cu_71", ba = "_descriptionFull_hg6cu_79", ha = "_content_hg6cu_88", va = "_contentOpen_hg6cu_94", ya = "_contentInner_hg6cu_98", xa = "_chevron_hg6cu_106", ga = "_chevronOpen_hg6cu_112", M = {
+  accordion: da,
+  item: la,
+  trigger: ua,
+  triggerMain: _a,
+  itemIcon: pa,
+  triggerText: ma,
+  title: fa,
+  descriptionFull: ba,
+  content: ha,
+  contentOpen: va,
+  contentInner: ya,
+  chevron: xa,
+  chevronOpen: ga
+}, ln = () => null;
+ln.displayName = "SandAccordionItem";
+const Sa = f(function({ items: e = [], defaultOpen: n, className: t, children: r, ...o }, c) {
+  const [d, l] = F(n), i = O(), _ = [...e];
+  return be.forEach(r, (p) => {
+    X(p) && p.type === ln && _.push(p.props);
+  }), /* @__PURE__ */ a.jsx("div", { ref: c, className: m(M.accordion, t), ...o, children: _.map((p) => {
+    const h = d === p.id, v = `${i}-trigger-${p.id}`, b = `${i}-content-${p.id}`;
+    return /* @__PURE__ */ a.jsxs("div", { className: m(M.item, h && M.itemOpen), "data-state": h ? "open" : "closed", children: [
+      /* @__PURE__ */ a.jsxs(
         "button",
         {
-          id: b,
+          id: v,
           type: "button",
-          className: $.trigger,
-          "aria-expanded": m,
-          "aria-controls": x,
-          onClick: () => i((p) => p === u.id ? void 0 : u.id),
+          className: M.trigger,
+          "aria-expanded": h,
+          "aria-controls": b,
+          onClick: () => l((g) => g === p.id ? void 0 : p.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__ */ a.jsxs("div", { className: M.triggerMain, children: [
+              p.icon && /* @__PURE__ */ a.jsx(B, { icon: p.icon, className: M.itemIcon, size: 24, "aria-hidden": "true" }),
+              /* @__PURE__ */ a.jsx("div", { className: M.triggerText, children: /* @__PURE__ */ a.jsx("span", { className: M.title, children: p.title }) })
             ] }),
-            /* @__PURE__ */ n.jsx(
-              L,
+            /* @__PURE__ */ a.jsx(
+              B,
               {
                 icon: "expand_more",
-                className: _($.chevron, m && $.chevronOpen),
+                className: m(M.chevron, h && M.chevronOpen),
                 size: 20,
                 "aria-hidden": "true"
               }
@@ -474,162 +483,258 @@ const ya = "_accordion_rsxio_1", ga = "_item_rsxio_7", Sa = "_trigger_rsxio_26",
           ]
         }
       ),
-      /* @__PURE__ */ n.jsx(
+      /* @__PURE__ */ a.jsx(
         "div",
         {
-          id: x,
-          "aria-labelledby": b,
-          className: _($.content, m && $.contentOpen),
+          id: b,
+          "aria-labelledby": v,
+          className: m(M.content, h && M.contentOpen),
           role: "region",
-          children: /* @__PURE__ */ n.jsx("div", { className: $.contentInner, children: u.content })
+          children: /* @__PURE__ */ a.jsxs("div", { className: M.contentInner, children: [
+            p.description && /* @__PURE__ */ a.jsx("p", { className: M.descriptionFull, children: p.description }),
+            p.content
+          ] })
         }
       )
-    ] }, u.id);
+    ] }, p.id);
   }) });
 });
-Aa.displayName = "SandAccordion";
-const Re = {
+Sa.displayName = "SandAccordion";
+const ja = "_avatar_tjyvl_1", Na = "_image_tjyvl_57", ka = "_initials_tjyvl_63", wa = "_group_tjyvl_67", se = {
+  avatar: ja,
+  "variant-circle": "_variant-circle_tjyvl_15",
+  "variant-rounded": "_variant-rounded_tjyvl_19",
+  "variant-square": "_variant-square_tjyvl_23",
+  "size-xs": "_size-xs_tjyvl_27",
+  "size-sm": "_size-sm_tjyvl_33",
+  "size-md": "_size-md_tjyvl_39",
+  "size-lg": "_size-lg_tjyvl_45",
+  "size-xl": "_size-xl_tjyvl_51",
+  image: Na,
+  initials: ka,
+  group: wa
+}, Ta = f(function({ src: e, initials: n, name: t, size: r = "md", variant: o = "circle", className: c = "", style: d, ...l }, i) {
+  const _ = typeof r == "number" ? {
+    width: r,
+    height: r,
+    fontSize: r * 0.4
+  } : void 0, p = n ?? t?.split(" ").map((h) => h[0]).join("").toUpperCase().slice(0, 2);
+  return /* @__PURE__ */ a.jsx(
+    "div",
+    {
+      ref: i,
+      className: m(
+        se.avatar,
+        typeof r == "string" && se[`size-${r}`],
+        se[`variant-${o}`],
+        c
+      ),
+      style: { ..._, ...d },
+      ...l,
+      children: e ? /* @__PURE__ */ a.jsx("img", { src: e, alt: t, className: se.image }) : /* @__PURE__ */ a.jsx("span", { className: se.initials, children: p })
+    }
+  );
+});
+Ta.displayName = "SandAvatar";
+const Ia = f(function({ children: e, max: n, size: t = "md", className: r = "", ...o }, c) {
+  return /* @__PURE__ */ a.jsx("div", { ref: c, className: m(se.group, r), ...o, children: e });
+});
+Ia.displayName = "SandAvatarGroup";
+const en = {
   "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(
+}, Ca = f(function({ variant: e = "primary", className: n = "", ...t }, r) {
+  const o = E(() => en[`sand-badge-${e}`], [e]);
+  return /* @__PURE__ */ a.jsx(
     "span",
     {
       ref: r,
-      className: _(Re["sand-badge"], d, a),
+      className: m(en["sand-badge"], o, n),
       ...t
     }
   );
 });
-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"
-}, 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(
+Ca.displayName = "SandBadge";
+const le = {
+  "sand-breadcrumbs": "_sand-breadcrumbs_cngwf_1",
+  "sand-breadcrumb-item": "_sand-breadcrumb-item_cngwf_10",
+  "sand-breadcrumb-link": "_sand-breadcrumb-link_cngwf_17",
+  "sand-breadcrumb-current": "_sand-breadcrumb-current_cngwf_32",
+  "sand-breadcrumb-separator": "_sand-breadcrumb-separator_cngwf_37"
+}, un = () => null;
+un.displayName = "SandBreadcrumbItem";
+const $a = f(function({ items: e = [], className: n = "", "aria-label": t = "Breadcrumb", children: r, ...o }, c) {
+  const d = E(() => {
+    const i = [...e];
+    return be.forEach(r, (_) => {
+      X(_) && _.type === un && i.push(_.props);
+    }), i;
+  }, [e, r]), l = E(
+    () => d.map((i, _) => {
+      const p = _ === d.length - 1;
+      return /* @__PURE__ */ a.jsxs("li", { className: le["sand-breadcrumb-item"], children: [
+        i.href && !p ? /* @__PURE__ */ a.jsx("a", { href: i.href, className: le["sand-breadcrumb-link"], children: i.label }) : /* @__PURE__ */ a.jsx(
           "span",
           {
-            "aria-current": u ? "page" : void 0,
-            className: u ? K["sand-breadcrumb-current"] : void 0,
+            "aria-current": p ? "page" : void 0,
+            className: p ? le["sand-breadcrumb-current"] : void 0,
             children: i.label
           }
         ),
-        !u && /* @__PURE__ */ n.jsx("span", { className: _(K["sand-breadcrumb-separator"], "material-symbols-rounded"), "aria-hidden": "true", children: "chevron_right" })
-      ] }, `${String(i.label)}-${l}`);
+        !p && /* @__PURE__ */ a.jsx("span", { className: m(le["sand-breadcrumb-separator"], "material-symbols-rounded"), "aria-hidden": "true", children: "chevron_right" })
+      ] }, `${String(i.label)}-${_}`);
     }),
-    [e]
+    [d]
   );
-  return /* @__PURE__ */ n.jsx("nav", { ref: d, "aria-label": t, className: _(K["sand-breadcrumbs"], a), ...r, children: /* @__PURE__ */ n.jsx("ol", { children: c }) });
+  return /* @__PURE__ */ a.jsx("nav", { ref: c, "aria-label": t, className: m(le["sand-breadcrumbs"], n), ...o, children: /* @__PURE__ */ a.jsx("ol", { children: l }) });
 });
-Oa.displayName = "SandBreadcrumbs";
-const Pa = "_box_t20vf_1", Da = "_surface_t20vf_19", za = "_inline_t20vf_27", Z = {
-  box: Pa,
-  surface: Da,
-  inline: za
-}, Ba = {
+$a.displayName = "SandBreadcrumbs";
+const Ea = "_box_t20vf_1", Ra = "_surface_t20vf_19", Aa = "_inline_t20vf_27", fe = {
+  box: Ea,
+  surface: Ra,
+  inline: Aa
+}, Oa = {
   stretch: "stretch",
   start: "flex-start",
   center: "center",
   end: "flex-end",
   baseline: "baseline"
-}, Fa = {
+}, Ma = {
   start: "flex-start",
   center: "center",
   end: "flex-end",
   between: "space-between",
   around: "space-around",
   evenly: "space-evenly"
-}, qa = f(function({
+}, za = f(function({
   as: e,
-  padding: a,
+  padding: n,
   margin: t,
   gap: r,
-  align: d,
+  align: o,
   justify: c,
-  surface: i,
+  surface: d,
   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,
+  width: i,
+  radius: _,
+  shadow: p = "none",
+  className: h,
+  style: v,
+  ...b
+}, g) {
+  const j = e ?? "div";
+  let y = v;
+  return y = C(y, "--sand-padding", me(n)), y = C(y, "--sand-margin", me(t)), y = C(y, "--sand-gap", me(r)), y = C(y, "--sand-align", o ? Oa[o] : void 0), y = C(y, "--sand-justify", c ? Ma[c] : void 0), y = C(y, "--sand-width", typeof i == "number" ? `${i}px` : i), y = C(y, "--sand-box-radius", on(_)), y = C(
+    y,
     "--sand-box-shadow",
-    b === "none" ? "none" : `var(--shadow-${b})`
-  ), /* @__PURE__ */ n.jsx(
-    R,
+    p === "none" ? "none" : `var(--shadow-${p})`
+  ), /* @__PURE__ */ a.jsx(
+    j,
+    {
+      ref: g,
+      className: m(fe.box, d && fe.surface, l && fe.inline, h),
+      style: y,
+      ...b
+    }
+  );
+});
+za.displayName = "SandBox";
+const Da = "_chip_1o3za_1", Pa = "_clickable_1o3za_16", La = "_startIcon_1o3za_61", Ba = "_label_1o3za_66", Fa = "_closeButton_1o3za_70", ne = {
+  chip: Da,
+  clickable: Pa,
+  "variant-primary": "_variant-primary_1o3za_26",
+  "variant-secondary": "_variant-secondary_1o3za_31",
+  "variant-success": "_variant-success_1o3za_36",
+  "variant-warning": "_variant-warning_1o3za_41",
+  "variant-error": "_variant-error_1o3za_46",
+  "variant-outline": "_variant-outline_1o3za_51",
+  startIcon: La,
+  label: Ba,
+  closeButton: Fa
+}, _n = f(function({ variant: e = "primary", icon: n, onClose: t, clickable: r, children: o, className: c = "", ...d }, l) {
+  return /* @__PURE__ */ a.jsxs(
+    "span",
     {
-      ref: T,
-      className: _(Z.box, i && Z.surface, l && Z.inline, x),
-      style: g,
-      ...v
+      ref: l,
+      className: m(
+        ne.chip,
+        ne[`variant-${e}`],
+        r && ne.clickable,
+        c
+      ),
+      role: r ? "button" : void 0,
+      tabIndex: r ? 0 : void 0,
+      ...d,
+      children: [
+        n && /* @__PURE__ */ a.jsx(B, { icon: n, size: 16, className: ne.startIcon }),
+        /* @__PURE__ */ a.jsx("span", { className: ne.label, children: o }),
+        t && /* @__PURE__ */ a.jsx(
+          "button",
+          {
+            type: "button",
+            className: ne.closeButton,
+            onClick: (i) => {
+              i.stopPropagation(), t();
+            },
+            "aria-label": "Remove",
+            children: /* @__PURE__ */ a.jsx(B, { icon: "close", size: 14 })
+          }
+        )
+      ]
     }
   );
 });
-qa.displayName = "SandBox";
-const Ie = {
+_n.displayName = "SandChip";
+const Ls = _n, nn = {
   "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(
+}, Ae = f(function({ variant: e = "primary", className: n = "", type: t = "button", ...r }, o) {
+  const c = E(() => nn[`sand-btn-${e}`], [e]);
+  return /* @__PURE__ */ a.jsx(
     "button",
     {
-      ref: d,
-      className: _(Ie["sand-btn"], c, a),
+      ref: o,
+      className: m(nn["sand-btn"], c, n),
       type: t,
       ...r
     }
   );
 });
-La.displayName = "SandButton";
-const oe = {
+Ae.displayName = "SandButton";
+const je = {
   "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 })
+}, qa = f(function({ header: e, footer: n, children: t, className: r = "", ...o }, c) {
+  return /* @__PURE__ */ a.jsxs("article", { ref: c, className: m(je["sand-card"], r), ...o, children: [
+    e && /* @__PURE__ */ a.jsx("header", { className: je["sand-card-header"], children: e }),
+    /* @__PURE__ */ a.jsx("div", { className: je["sand-card-body"], children: t }),
+    n && /* @__PURE__ */ a.jsx("footer", { className: je["sand-card-footer"], children: n })
   ] });
 });
-Va.displayName = "SandCard";
-const Ga = "_active_1i66s_73", F = {
+qa.displayName = "SandCard";
+const Va = "_active_1i66s_73", re = {
   "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
+  active: Va
 };
 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;
+  const n = [], t = (r, o) => {
+    const c = `___TOKEN_${n.length}___`;
+    return n.push(`<span class="token-${o}">${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,
@@ -637,77 +742,77 @@ function Ha(s) {
   ), 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 = 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")), n.forEach((r, o) => {
+    e = e.replace(`___TOKEN_${o}___`, r);
   }), e;
 }
-const Fe = f(function({ code: e, className: a = "", ...t }, r) {
-  const [d, c] = V(!1), i = q(() => {
+const pn = f(function({ code: e, className: n = "", ...t }, r) {
+  const [o, c] = F(!1), d = A(() => {
     navigator.clipboard.writeText(e).then(() => {
       c(!0), setTimeout(() => c(!1), 2e3);
     });
-  }, [e]), l = C(() => Ha(e), [e]);
-  return /* @__PURE__ */ n.jsxs("pre", { ref: r, className: _(F["sand-code-block"], a), ...t, children: [
-    /* @__PURE__ */ n.jsx(
+  }, [e]), l = E(() => Ha(e), [e]);
+  return /* @__PURE__ */ a.jsxs("pre", { ref: r, className: m(re["sand-code-block"], n), ...t, children: [
+    /* @__PURE__ */ a.jsx(
       "button",
       {
-        className: F["sand-copy-btn"],
-        onClick: i,
+        className: re["sand-copy-btn"],
+        onClick: d,
         type: "button",
-        "aria-label": d ? "Code copied to clipboard" : "Copy code to clipboard",
-        children: d ? "Copied" : "Copy"
+        "aria-label": o ? "Code copied to clipboard" : "Copy code to clipboard",
+        children: o ? "Copied" : "Copy"
       }
     ),
-    /* @__PURE__ */ n.jsx("code", { dangerouslySetInnerHTML: { __html: l } })
+    /* @__PURE__ */ a.jsx("code", { dangerouslySetInnerHTML: { __html: l } })
   ] });
 });
-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();
+pn.displayName = "SandCodeBlock";
+const Ga = f(function({ items: e, tabs: n, defaultTab: t = 0, className: r = "", onTabChange: o }, c) {
+  const d = E(() => e ?? n ?? [], [e, n]), [l, i] = F(t), _ = O(), p = z([]), h = A(
+    (b) => {
+      i(b), o?.(b), p.current[b]?.focus();
     },
-    [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(
+    [o]
+  ), v = E(() => d[l]?.code ?? "", [l, d]);
+  return /* @__PURE__ */ a.jsxs("div", { ref: c, className: m(re["sand-code-tabs"], r), children: [
+    /* @__PURE__ */ a.jsx("div", { className: re["sand-tab-headers"], role: "tablist", "aria-label": "Code examples", children: d.map((b, g) => /* @__PURE__ */ a.jsx(
       "button",
       {
-        ref: (v) => {
-          u.current[p] = v;
+        ref: (j) => {
+          p.current[g] = j;
         },
-        className: _(F["sand-tab-btn"], c === p && F.active),
+        className: m(re["sand-tab-btn"], l === g && re.active),
         type: "button",
         role: "tab",
-        "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
+        "aria-selected": l === g,
+        "aria-controls": `${_}-code-panel-${g}`,
+        id: `${_}-code-tab-${g}`,
+        tabIndex: l === g ? 0 : -1,
+        onClick: () => h(g),
+        onKeyDown: (j) => ke(j, g, d.length, (y) => h(y)),
+        children: b.name
       },
-      p
+      g
     )) }),
-    /* @__PURE__ */ n.jsx(
+    /* @__PURE__ */ a.jsx(
       "div",
       {
         role: "tabpanel",
-        id: `${l}-code-panel-${c}`,
-        "aria-labelledby": `${l}-code-tab-${c}`,
-        children: /* @__PURE__ */ n.jsx(Fe, { code: b })
+        id: `${_}-code-panel-${l}`,
+        "aria-labelledby": `${_}-code-tab-${l}`,
+        children: /* @__PURE__ */ a.jsx(pn, { code: v })
       }
     )
   ] });
 });
-Ya.displayName = "SandCodeTabs";
-const Wa = {
+Ga.displayName = "SandCodeTabs";
+const Ka = {
   "sand-divider": "_sand-divider_svs0p_1"
-}, Ka = f(function({ className: e = "", ...a }, t) {
-  return /* @__PURE__ */ n.jsx("hr", { ref: t, className: _(Wa["sand-divider"], e), ...a });
+}, Ya = f(function({ className: e = "", ...n }, t) {
+  return /* @__PURE__ */ a.jsx("hr", { ref: t, className: m(Ka["sand-divider"], e), ...n });
 });
-Ka.displayName = "SandDivider";
-const A = {
+Ya.displayName = "SandDivider";
+const V = {
   "sand-feedback": "_sand-feedback_1fyl0_1",
   "sand-feedback-toast": "_sand-feedback-toast_1fyl0_12",
   "sand-feedback-snackbar": "_sand-feedback-snackbar_1fyl0_18",
@@ -720,170 +825,239 @@ const A = {
   "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 = {
+}, Wa = {
   info: "info",
   success: "check_circle",
   failed: "error"
-}, 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(
+}, mn = f(function({ heading: e, message: n, action: t, variant: r = "info", className: o = "", mode: c, ...d }, l) {
+  const i = E(() => Wa[r], [r]), _ = r === "failed" ? "alert" : "status";
+  return /* @__PURE__ */ a.jsx(
     "div",
     {
       ref: l,
-      role: m,
+      role: _,
       "aria-live": r === "failed" ? "assertive" : "polite",
-      className: _(
-        A["sand-feedback"],
-        A[`sand-feedback-${c}`],
-        A[`sand-feedback-${r}`],
-        d
+      className: m(
+        V["sand-feedback"],
+        V[`sand-feedback-${c}`],
+        V[`sand-feedback-${r}`],
+        o
       ),
-      ...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 })
+      ...d,
+      children: /* @__PURE__ */ a.jsxs("div", { className: V["sand-feedback-row"], children: [
+        /* @__PURE__ */ a.jsx("span", { className: m(V["sand-feedback-icon"], "material-symbols-rounded"), "aria-hidden": "true", children: i }),
+        /* @__PURE__ */ a.jsxs("div", { className: V["sand-feedback-content"], children: [
+          e && /* @__PURE__ */ a.jsx("span", { className: V["sand-feedback-title"], children: e }),
+          /* @__PURE__ */ a.jsx("span", { className: V["sand-feedback-message"], children: n })
         ] }),
-        t && /* @__PURE__ */ n.jsx("div", { className: A["sand-feedback-action"], children: t })
+        t && /* @__PURE__ */ a.jsx("div", { className: V["sand-feedback-action"], children: t })
       ] })
     }
   );
-}), Ja = f(function(e, a) {
-  return /* @__PURE__ */ n.jsx(qe, { ref: a, mode: "toast", ...e });
+}), Ua = f(function(e, n) {
+  return /* @__PURE__ */ a.jsx(mn, { ref: n, mode: "toast", ...e });
 });
-Ja.displayName = "SandToast";
-const Xa = f(function(e, a) {
-  return /* @__PURE__ */ n.jsx(qe, { ref: a, mode: "snackbar", ...e });
+Ua.displayName = "SandToast";
+const Ja = f(function(e, n) {
+  return /* @__PURE__ */ a.jsx(mn, { ref: n, 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 });
+Ja.displayName = "SandSnackbar";
+const Xa = "_grid_g8kr4_1", Za = "_item_g8kr4_7", fn = {
+  grid: Xa,
+  item: Za
+}, bn = f(function({ columns: e = 12, gap: n = "md", className: t, style: r, ...o }, c) {
+  let d = r;
+  return d = cn(d, "sand-grid-columns", e), d = C(d, "--sand-grid-gap", me(n)), /* @__PURE__ */ a.jsx("div", { ref: c, className: m(fn.grid, t), style: d, ...o });
 });
-Ve.displayName = "SandGrid";
-const Ge = f(function({ span: e = 1, className: a, style: t, ...r }, d) {
+bn.displayName = "SandGrid";
+const hn = f(function({ span: e = 1, className: n, style: t, ...r }, o) {
   let c = t;
-  return c = Be(c, "sand-grid-span", e), /* @__PURE__ */ n.jsx("div", { ref: d, className: _(Le.item, a), style: c, ...r });
+  return c = cn(c, "sand-grid-span", e), /* @__PURE__ */ a.jsx("div", { ref: o, className: m(fn.item, n), style: c, ...r });
 });
-Ge.displayName = "SandGrid.Item";
-const ft = Object.assign(Ve, {
-  Item: Ge
-}), Q = {
+hn.displayName = "SandGrid.Item";
+const Bs = Object.assign(bn, {
+  Item: hn
+}), he = {
   "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
+}, xe = f(function({ label: e, children: n, className: t = "", htmlFor: r, ...o }, c) {
+  return /* @__PURE__ */ a.jsxs("div", { ref: c, className: m(he["sand-form-group"], t), ...o, children: [
+    e && /* @__PURE__ */ a.jsx("label", { className: he["sand-label"], htmlFor: r, children: e }),
+    n
   ] });
 });
-He.displayName = "SandFormGroup";
-const Ye = f(function({ error: e, className: a = "", ...t }, r) {
-  return /* @__PURE__ */ n.jsx(
+xe.displayName = "SandFormGroup";
+const vn = f(function({ error: e, className: n = "", ...t }, r) {
+  return /* @__PURE__ */ a.jsx(
     "input",
     {
       ref: r,
-      className: _(Q["sand-input"], e && Q["sand-input-error"], a),
+      className: m(he["sand-input"], e && he["sand-input-error"], n),
       "aria-invalid": e || t["aria-invalid"],
       ...t
     }
   );
 });
-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]
+vn.displayName = "SandInput";
+const Qa = f(function({ label: e, helperText: n, error: t, groupClassName: r, className: o = "", "aria-describedby": c, ...d }, l) {
+  const i = O(), _ = d.id ?? i, p = n ? `${_}-help` : void 0, h = E(
+    () => [c, p].filter(Boolean).join(" ") || void 0,
+    [c, p]
   );
-  return /* @__PURE__ */ n.jsxs(He, { label: e, className: r, htmlFor: m, children: [
-    /* @__PURE__ */ n.jsx(
-      Ye,
+  return /* @__PURE__ */ a.jsxs(xe, { label: e, className: r, htmlFor: _, children: [
+    /* @__PURE__ */ a.jsx(
+      vn,
       {
         ref: l,
-        id: m,
+        id: _,
         error: t,
-        className: d,
-        "aria-describedby": x,
-        ...i
+        className: o,
+        "aria-describedby": h,
+        ...d
       }
     ),
-    a && /* @__PURE__ */ n.jsx("span", { id: b, className: t ? Q["sand-helper-text-error"] : "", children: a })
+    n && /* @__PURE__ */ a.jsx("span", { id: p, className: t ? he["sand-helper-text-error"] : "", children: n })
   ] });
 });
-en.displayName = "SandInputGroup";
-const an = {
+Qa.displayName = "SandInputGroup";
+const et = {
   "sand-kbd": "_sand-kbd_mo78g_1"
-}, nn = f(function({ className: e = "", ...a }, t) {
-  return /* @__PURE__ */ n.jsx("kbd", { ref: t, className: _(an["sand-kbd"], e), ...a });
+}, nt = f(function({ className: e = "", ...n }, t) {
+  return /* @__PURE__ */ a.jsx("kbd", { ref: t, className: m(et["sand-kbd"], e), ...n });
 });
-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(
+nt.displayName = "SandKBD";
+const at = "_loader_1onos_1", tt = "_skeleton_1onos_10", yn = {
+  loader: at,
+  skeleton: tt
+}, st = f(function({ size: e = 40, className: n, style: t, ...r }, o) {
+  return /* @__PURE__ */ a.jsx(
     "span",
     {
-      ref: d,
-      className: _(We.loader, a),
+      ref: o,
+      className: m(yn.loader, n),
       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(
+st.displayName = "SandLoader";
+const rt = f(function({ width: e = "100%", height: n = 16, radius: t = "md", className: r, style: o, ...c }, d) {
+  return /* @__PURE__ */ a.jsx(
     "div",
     {
-      ref: i,
+      ref: d,
       "aria-hidden": "true",
-      className: _(We.skeleton, r),
+      className: m(yn.skeleton, r),
       style: {
         width: e,
-        height: a,
-        "--sand-skeleton-radius": ze(t),
-        ...d
+        height: n,
+        "--sand-skeleton-radius": on(t),
+        ...o
       },
       ...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"
-}, 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 });
+rt.displayName = "SandSkeleton";
+const ot = "_container_x9f0c_1", ct = "_slider_x9f0c_8", it = "_error_x9f0c_43", dt = "_valueDisplay_x9f0c_50", lt = "_helper_x9f0c_58", ae = {
+  container: ot,
+  slider: ct,
+  error: it,
+  valueDisplay: dt,
+  helper: lt,
+  "helper-error": "_helper-error_x9f0c_64"
+}, ut = f(function({ label: e, helperText: n, error: t, className: r = "", ...o }, c) {
+  const d = O(), l = o.id ?? d, i = n ? `${l}-help` : void 0;
+  return /* @__PURE__ */ a.jsxs(xe, { label: e, htmlFor: l, children: [
+    /* @__PURE__ */ a.jsxs("div", { className: ae.container, children: [
+      /* @__PURE__ */ a.jsx(
+        "input",
+        {
+          ref: c,
+          id: l,
+          type: "range",
+          className: m(ae.slider, t && ae.error, r),
+          "aria-invalid": t || void 0,
+          "aria-describedby": i,
+          ...o
+        }
+      ),
+      o.value !== void 0 && /* @__PURE__ */ a.jsx("span", { className: ae.valueDisplay, children: o.value })
+    ] }),
+    n && /* @__PURE__ */ a.jsx("span", { id: i, className: m(ae.helper, t && ae["helper-error"]), children: n })
+  ] });
 });
-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 });
+ut.displayName = "SandSlider";
+const G = {
+  "sand-container": "_sand-container_plvlx_1",
+  "sand-header": "_sand-header_plvlx_7",
+  "sand-tool-layout": "_sand-tool-layout_plvlx_17",
+  "sand-tool-panel": "_sand-tool-panel_plvlx_24",
+  "sand-result-panel": "_sand-result-panel_plvlx_34",
+  "sand-microservice-layout": "_sand-microservice-layout_plvlx_47",
+  "sand-microservice-sidebar": "_sand-microservice-sidebar_plvlx_54",
+  "sand-microservice-content": "_sand-microservice-content_plvlx_67",
+  "sand-microservice-main": "_sand-microservice-main_plvlx_74"
+}, _t = f(function({ className: e = "", ...n }, t) {
+  return /* @__PURE__ */ a.jsx("div", { ref: t, className: m(G["sand-container"], e), ...n });
 });
-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 });
+_t.displayName = "SandContainer";
+const pt = f(function({ className: e = "", ...n }, t) {
+  return /* @__PURE__ */ a.jsx("header", { ref: t, className: m(G["sand-header"], e), ...n });
 });
-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 });
+pt.displayName = "SandHeader";
+const Me = f(
+  function({ className: e = "", ...n }, t) {
+    return /* @__PURE__ */ a.jsx("aside", { ref: t, className: m(G["sand-tool-panel"], e), ...n });
+  }
+);
+Me.displayName = "SandAppLayout.Sidebar";
+const ze = f(
+  function({ className: e = "", ...n }, t) {
+    return /* @__PURE__ */ a.jsx("main", { ref: t, className: m(G["sand-result-panel"], e), ...n });
+  }
+);
+ze.displayName = "SandAppLayout.Main";
+const mt = f(
+  function({ className: e = "", ...n }, t) {
+    return /* @__PURE__ */ a.jsx("div", { ref: t, className: m(G["sand-tool-layout"], e), ...n });
+  }
+), xn = Object.assign(mt, {
+  Sidebar: Me,
+  Main: ze
 });
-_n.displayName = "SandResultPanel";
-const M = {
+xn.displayName = "SandAppLayout";
+const Fs = xn, qs = Me, Vs = ze, gn = f(
+  function({ children: e, className: n = "", ...t }, r) {
+    return /* @__PURE__ */ a.jsx("aside", { ref: r, className: m(G["sand-microservice-sidebar"], n), ...t, children: e });
+  }
+);
+gn.displayName = "SandMicroserviceLayout.Sidebar";
+const Sn = f(
+  function({ children: e, className: n = "", ...t }, r) {
+    return /* @__PURE__ */ a.jsx("div", { ref: r, className: m(G["sand-microservice-content"], n), ...t, children: e });
+  }
+);
+Sn.displayName = "SandMicroserviceLayout.Content";
+const jn = f(
+  function({ children: e, className: n = "", ...t }, r) {
+    return /* @__PURE__ */ a.jsx("main", { ref: r, className: m(G["sand-microservice-main"], n), ...t, children: e });
+  }
+);
+jn.displayName = "SandMicroserviceLayout.Main";
+const we = f(
+  function({ children: e, className: n = "", ...t }, r) {
+    return /* @__PURE__ */ a.jsx("div", { ref: r, className: m(G["sand-microservice-layout"], n), ...t, children: e });
+  }
+);
+we.displayName = "SandMicroserviceLayout";
+we.Sidebar = gn;
+we.Content = Sn;
+we.Main = jn;
+const H = {
   "sand-modal-root": "_sand-modal-root_1e60v_1",
   "sand-modal-backdrop": "_sand-modal-backdrop_1e60v_11",
   "sand-modal-panel": "_sand-modal-panel_1e60v_22",
@@ -893,346 +1067,627 @@ const M = {
   "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);
+};
+function Te(s, e) {
+  const { enabled: n, initialFocusRef: t } = e, r = z(null), o = A(
+    (c) => {
+      if (!n || !s.current || c.key !== "Tab")
+        return;
+      const d = ea(s.current);
+      if (d.length === 0) {
+        c.preventDefault(), s.current.focus();
+        return;
+      }
+      const l = d[0], i = d[d.length - 1], _ = document.activeElement;
+      c.shiftKey && _ === l ? (c.preventDefault(), i.focus()) : !c.shiftKey && _ === i && (c.preventDefault(), l.focus());
+    },
+    [n, s]
+  );
+  K(() => {
+    if (!n) {
+      r.current && (r.current.focus(), r.current = null);
+      return;
+    }
+    r.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const d = setTimeout(() => {
+      const l = t?.current || s.current;
+      l && l.focus();
+    }, 16);
+    return window.addEventListener("keydown", o), () => {
+      window.removeEventListener("keydown", o), clearTimeout(d);
+    };
+  }, [n, o, t, s]);
+}
+const Nn = f(function({ as: e, direction: n = "column", gap: t = "md", align: r, justify: o, wrap: c, surface: d, className: l, style: i, ..._ }, p) {
+  const h = e ?? "div";
+  let v = i;
+  return v = C(v, "--sand-display", "flex"), v = C(v, "--sand-gap", me(t)), v = C(v, "--sand-align", r), v = C(v, "--sand-justify", o), v = C(v, "--sand-stack-direction", n), v = C(v, "--sand-stack-wrap", c ? "wrap" : "nowrap"), /* @__PURE__ */ a.jsx(
+    h,
+    {
+      ref: p,
+      className: m(fe.box, d && fe.surface, l),
+      style: {
+        flexDirection: "var(--sand-stack-direction)",
+        flexWrap: "var(--sand-stack-wrap)",
+        ...v
+      },
+      ..._
+    }
+  );
+});
+Nn.displayName = "SandStack";
+const kn = ye(null);
+function wn() {
+  const s = ve(kn);
   if (!s)
     throw new Error("SandModal sub-components must be used within SandModal.");
   return s;
 }
-const pe = f(function({ className: e = "", ...a }, t) {
-  return /* @__PURE__ */ n.jsx("div", { ref: t, className: _(M["sand-modal-header"], e), ...a });
+const De = f(function({ className: e = "", ...n }, t) {
+  return /* @__PURE__ */ a.jsx("div", { ref: t, className: m(H["sand-modal-header"], e), ...n });
 });
-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 });
+De.displayName = "SandModal.Header";
+const Pe = f(function({ className: e = "", ...n }, t) {
+  return /* @__PURE__ */ a.jsx("div", { ref: t, className: m(H["sand-modal-body"], e), ...n });
 });
-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 });
+Pe.displayName = "SandModal.Body";
+const Le = f(function({ className: e = "", ...n }, t) {
+  return /* @__PURE__ */ a.jsx("div", { ref: t, className: m(H["sand-modal-footer"], e), ...n });
 });
-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 });
+Le.displayName = "SandModal.Footer";
+const Be = f(function({ className: e = "", ...n }, t) {
+  const { titleId: r } = wn();
+  return /* @__PURE__ */ a.jsx("div", { ref: t, id: r, className: m(H["sand-modal-title"], e), ...n });
 });
-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 });
+Be.displayName = "SandModal.Title";
+const Fe = f(function({ className: e = "", ...n }, t) {
+  const { descriptionId: r } = wn();
+  return /* @__PURE__ */ a.jsx("div", { ref: t, id: r, className: m(H["sand-modal-description"], e), ...n });
 });
-ve.displayName = "SandModal.Description";
-const Je = f(function({
+Fe.displayName = "SandModal.Description";
+const Tn = 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);
+  isOpen: n,
+  onClose: t,
+  title: r,
+  description: o,
+  footer: c,
+  closeOnOverlay: d = !0,
+  initialFocusRef: l,
+  children: i,
+  className: _ = "",
+  ...p
+}, h) {
+  const v = e ?? n ?? !1, b = O(), g = O(), j = z(null), y = z(null), D = E(
+    () => ({ titleId: b, descriptionId: g }),
+    [g, b]
+  ), P = A(
+    (I) => {
+      y.current = I, typeof h == "function" ? h(I) : h && (h.current = I);
     },
-    [b]
-  ), G = q(
-    (w) => {
-      if (w.key === "Escape") {
-        w.preventDefault(), a();
-        return;
-      }
-      if (w.key !== "Tab" || !T.current)
-        return;
-      const O = _a(T.current);
-      if (O.length === 0) {
-        w.preventDefault(), T.current.focus();
-        return;
-      }
-      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());
+    [h]
+  );
+  Te(y, {
+    enabled: v,
+    initialFocusRef: l || j
+  });
+  const Y = A(
+    (I) => {
+      I.key === "Escape" && (I.preventDefault(), t());
     },
-    [a]
+    [t]
   );
-  return Oe(() => {
-    if (!e) {
-      R.current?.focus();
-      return;
-    }
-    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);
+  return K(() => {
+    if (!v) return;
+    const I = document.body.style.overflow;
+    return document.body.style.overflow = "hidden", () => {
+      document.body.style.overflow = I;
     };
-  }, [G, i, e]), e ? /* @__PURE__ */ n.jsxs("div", { className: M["sand-modal-root"], children: [
-    /* @__PURE__ */ n.jsx(
+  }, [v]), v ? /* @__PURE__ */ a.jsxs("div", { className: H["sand-modal-root"], onKeyDown: Y, children: [
+    /* @__PURE__ */ a.jsx(
       "button",
       {
         type: "button",
-        className: M["sand-modal-backdrop"],
+        className: H["sand-modal-backdrop"],
         "aria-label": "Close dialog",
-        onClick: c ? a : void 0
+        onClick: d ? t : void 0
       }
     ),
-    /* @__PURE__ */ n.jsx(
+    /* @__PURE__ */ a.jsx(
       "div",
       {
-        ref: ie,
+        ref: P,
         role: "dialog",
         "aria-modal": "true",
-        "aria-labelledby": t ? x : void 0,
-        "aria-describedby": r ? p : void 0,
-        className: _(M["sand-modal-panel"], u),
+        "aria-labelledby": r ? b : void 0,
+        "aria-describedby": o ? g : void 0,
+        className: m(H["sand-modal-panel"], _),
         tabIndex: -1,
-        ...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 })
+        ...p,
+        children: /* @__PURE__ */ a.jsxs(kn.Provider, { value: D, children: [
+          (r || o) && /* @__PURE__ */ a.jsxs(De, { children: [
+            /* @__PURE__ */ a.jsxs("div", { children: [
+              r && /* @__PURE__ */ a.jsx(Be, { children: r }),
+              o && /* @__PURE__ */ a.jsx(Fe, { children: o })
             ] }),
-            /* @__PURE__ */ n.jsx(
+            /* @__PURE__ */ a.jsx(
               "button",
               {
-                ref: v,
+                ref: j,
                 type: "button",
-                className: M["sand-modal-close"],
-                onClick: a,
+                className: H["sand-modal-close"],
+                onClick: t,
                 "aria-label": "Close dialog",
-                children: /* @__PURE__ */ n.jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+                children: /* @__PURE__ */ a.jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
               }
             )
           ] }),
-          /* @__PURE__ */ n.jsx(be, { children: l }),
-          d && /* @__PURE__ */ n.jsx(he, { children: d })
+          /* @__PURE__ */ a.jsx(Pe, { children: i }),
+          c && /* @__PURE__ */ a.jsx(Le, { children: c })
         ] })
       }
     )
   ] }) : null;
 });
-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(
+Tn.displayName = "SandModal";
+const ft = Object.assign(Tn, {
+  Header: De,
+  Body: Pe,
+  Footer: Le,
+  Title: Be,
+  Description: Fe
+});
+function Hs({
+  onConfirm: s,
+  onClose: e,
+  confirmLabel: n = "Confirm",
+  cancelLabel: t = "Cancel",
+  confirmVariant: r = "primary",
+  footer: o,
+  children: c,
+  ...d
+}) {
+  const l = o || /* @__PURE__ */ a.jsxs(Nn, { direction: "row", gap: "sm", justify: "flex-end", children: [
+    /* @__PURE__ */ a.jsx(Ae, { variant: "outline", onClick: e, children: t }),
+    /* @__PURE__ */ a.jsx(Ae, { variant: r, onClick: s, children: n })
+  ] });
+  return /* @__PURE__ */ a.jsx(ft, { onClose: e, footer: l, ...d, children: c });
+}
+const bt = "_navbar_ce3ap_1", ht = "_container_ce3ap_11", vt = "_brand_ce3ap_20", yt = "_links_ce3ap_30", xt = "_link_ce3ap_30", gt = "_linkActive_ce3ap_55", St = "_mobileToggle_ce3ap_64", jt = "_overlay_ce3ap_86", Nt = "_overlayVisible_ce3ap_97", kt = "_drawer_ce3ap_102", wt = "_drawerOpen_ce3ap_118", Tt = "_drawerHeader_ce3ap_122", It = "_drawerTitle_ce3ap_130", Ct = "_drawerClose_ce3ap_136", $t = "_drawerContent_ce3ap_150", R = {
+  navbar: bt,
+  container: ht,
+  brand: vt,
+  links: yt,
+  link: xt,
+  linkActive: gt,
+  mobileToggle: St,
+  overlay: jt,
+  overlayVisible: Nt,
+  drawer: kt,
+  drawerOpen: wt,
+  drawerHeader: Tt,
+  drawerTitle: It,
+  drawerClose: Ct,
+  drawerContent: $t
+}, Oe = () => null;
+Oe.displayName = "SandNavbarItem";
+const Gs = f(function({ brand: e, items: n = [], onMenuClick: t, className: r, children: o, ...c }, d) {
+  const l = [...n];
+  return be.forEach(o, (i) => {
+    X(i) && i.type === Oe && l.push(i.props);
+  }), /* @__PURE__ */ a.jsx("nav", { ref: d, className: m(R.navbar, r), ...c, children: /* @__PURE__ */ a.jsxs("div", { className: R.container, children: [
+    /* @__PURE__ */ a.jsx("div", { className: R.brand, children: e }),
+    /* @__PURE__ */ a.jsxs("div", { className: R.links, children: [
+      l.map((i) => /* @__PURE__ */ a.jsx(
         "a",
         {
-          href: l.href,
-          className: _(E.link, l.active && E.linkActive),
-          children: l.label
+          href: i.href,
+          className: m(R.link, i.active && R.linkActive),
+          children: i.label
         },
-        l.href
+        i.href
       )),
-      d
+      be.map(o, (i) => X(i) && i.type === Oe ? null : i)
     ] }),
-    /* @__PURE__ */ n.jsx(
+    /* @__PURE__ */ a.jsx(
       "button",
       {
         type: "button",
-        className: E.mobileToggle,
+        className: R.mobileToggle,
         onClick: t,
         "aria-label": "Toggle menu",
-        children: /* @__PURE__ */ n.jsx(L, { icon: "menu", size: 24 })
+        children: /* @__PURE__ */ a.jsx(B, { 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(
+}), Et = f(function({ open: e, isOpen: n, onClose: t, title: r, children: o, className: c, ...d }, l) {
+  const i = e ?? n ?? !1, _ = z(null), p = z(null), h = A(
+    (b) => {
+      _.current = b, typeof l == "function" ? l(b) : l && (l.current = b);
+    },
+    [l]
+  );
+  Te(_, {
+    enabled: i,
+    initialFocusRef: p
+  });
+  const v = A(
+    (b) => {
+      b.key === "Escape" && (b.preventDefault(), t());
+    },
+    [t]
+  );
+  return K(() => {
+    if (!i) return;
+    const b = document.body.style.overflow;
+    return document.body.style.overflow = "hidden", () => {
+      document.body.style.overflow = b;
+    };
+  }, [i]), /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+    /* @__PURE__ */ a.jsx(
       "div",
       {
-        className: _(E.overlay, e && E.overlayVisible),
-        onClick: a,
+        className: m(R.overlay, i && R.overlayVisible),
+        onClick: t,
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ n.jsxs(
+    /* @__PURE__ */ a.jsxs(
       "div",
       {
-        ref: i,
-        className: _(E.drawer, e && E.drawerOpen, d),
+        ref: h,
+        className: m(R.drawer, i && R.drawerOpen, c),
         role: "dialog",
         "aria-modal": "true",
-        ...c,
+        onKeyDown: v,
+        ...d,
         children: [
-          /* @__PURE__ */ n.jsxs("div", { className: E.drawerHeader, children: [
-            /* @__PURE__ */ n.jsx("div", { className: E.drawerTitle, children: t }),
-            /* @__PURE__ */ n.jsx(
+          /* @__PURE__ */ a.jsxs("div", { className: R.drawerHeader, children: [
+            /* @__PURE__ */ a.jsx("div", { className: R.drawerTitle, children: r }),
+            /* @__PURE__ */ a.jsx(
               "button",
               {
+                ref: p,
                 type: "button",
-                className: E.drawerClose,
-                onClick: a,
+                className: R.drawerClose,
+                onClick: t,
                 "aria-label": "Close menu",
-                children: /* @__PURE__ */ n.jsx(L, { icon: "close", size: 24 })
+                children: /* @__PURE__ */ a.jsx(B, { icon: "close", size: 24 })
               }
             )
           ] }),
-          /* @__PURE__ */ n.jsx("div", { className: E.drawerContent, children: r })
+          /* @__PURE__ */ a.jsx("div", { className: R.drawerContent, children: o })
         ]
       }
     )
   ] });
-}), U = {
+});
+Et.displayName = "SandDrawer";
+const ue = {
   "sand-pagination": "_sand-pagination_cizv5_1",
   "sand-page-btn": "_sand-page-btn_cizv5_8",
   "sand-page-btn-active": "_sand-page-btn-active_cizv5_36"
-}, 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);
+}, Rt = f(function({ currentPage: e, totalPages: n, onPageChange: t, className: r = "", ...o }, c) {
+  const d = E(() => Array.from({ length: n }, (_, p) => p + 1), [n]), l = A(
+    (_) => {
+      _ < 1 || _ > n || _ === e || t?.(_);
     },
-    [e, t, a]
-  ), u = q(
-    (m) => {
-      ce(m, e - 1, a, (b) => l(b + 1));
+    [e, t, n]
+  ), i = A(
+    (_) => {
+      ke(_, e - 1, n, (p) => l(p + 1));
     },
-    [e, l, a]
+    [e, l, n]
   );
-  return /* @__PURE__ */ n.jsxs(
+  return /* @__PURE__ */ a.jsxs(
     "nav",
     {
       ref: c,
       "aria-label": "Pagination",
-      className: _(U["sand-pagination"], r),
-      onKeyDown: u,
-      ...d,
+      className: m(ue["sand-pagination"], r),
+      onKeyDown: i,
+      ...o,
       children: [
-        /* @__PURE__ */ n.jsx(
+        /* @__PURE__ */ a.jsx(
           "button",
           {
             type: "button",
-            className: U["sand-page-btn"],
+            className: ue["sand-page-btn"],
             disabled: e === 1,
             "aria-label": "Previous page",
             onClick: () => l(e - 1),
-            children: /* @__PURE__ */ n.jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "chevron_left" })
+            children: /* @__PURE__ */ a.jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "chevron_left" })
           }
         ),
-        i.map((m) => /* @__PURE__ */ n.jsx(
+        d.map((_) => /* @__PURE__ */ a.jsx(
           "button",
           {
             type: "button",
-            "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
+            "aria-current": _ === e ? "page" : void 0,
+            "aria-label": `Page ${_}`,
+            className: m(ue["sand-page-btn"], _ === e && ue["sand-page-btn-active"]),
+            onClick: () => l(_),
+            children: _
           },
-          m
+          _
         )),
-        /* @__PURE__ */ n.jsx(
+        /* @__PURE__ */ a.jsx(
           "button",
           {
             type: "button",
-            className: U["sand-page-btn"],
-            disabled: e === a,
+            className: ue["sand-page-btn"],
+            disabled: e === n,
             "aria-label": "Next page",
             onClick: () => l(e + 1),
-            children: /* @__PURE__ */ n.jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "chevron_right" })
+            children: /* @__PURE__ */ a.jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "chevron_right" })
           }
         )
       ]
     }
   );
 });
-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
+Rt.displayName = "SandPagination";
+function In(s = {}) {
+  const { isOpen: e, defaultIsOpen: n, onClose: t, onOpen: r } = s, [o, c] = F(n || !1), d = e !== void 0, l = d ? e : o, i = A(() => {
+    d || c(!0), r?.();
+  }, [d, r]), _ = A(() => {
+    d || c(!1), t?.();
+  }, [d, t]), p = A(() => {
+    l ? _() : i();
+  }, [l, i, _]);
+  return {
+    isOpen: l,
+    onOpen: i,
+    onClose: _,
+    onToggle: p,
+    setIsOpen: c
+  };
+}
+const At = "_content_1b598_1", Ot = {
+  content: At
+}, Cn = ye(null), $n = () => {
+  const s = ve(Cn);
+  if (!s) throw new Error("Popover components must be used within SandPopover");
+  return s;
+};
+function qe({ children: s, defaultOpen: e, open: n, onOpenChange: t }) {
+  const r = O(), o = z(null), { isOpen: c, onClose: d, onToggle: l } = In({
+    isOpen: n,
+    defaultIsOpen: e,
+    onClose: () => t?.(!1),
+    onOpen: () => t?.(!0)
+  }), i = E(() => ({
+    isOpen: c,
+    onClose: d,
+    onToggle: l,
+    triggerRef: o,
+    popoverId: r
+  }), [c, d, l, r]);
+  return /* @__PURE__ */ a.jsx(Cn.Provider, { value: i, children: s });
+}
+function Mt({ children: s }) {
+  const { onToggle: e, isOpen: n, triggerRef: t, popoverId: r } = $n();
+  return X(s) ? sn(s, {
+    ref: t,
+    onClick: (o) => {
+      s.props.onClick?.(o), e();
+    },
+    "aria-haspopup": "dialog",
+    "aria-expanded": n,
+    "aria-controls": r
+  }) : s;
+}
+const zt = f(function({ children: e, width: n, className: t = "", style: r, ...o }, c) {
+  const { isOpen: d, onClose: l, triggerRef: i, popoverId: _ } = $n(), p = z(null);
+  return Te(p, { enabled: d }), K(() => {
+    if (!d) return;
+    const h = (v) => {
+      v instanceof KeyboardEvent && v.key === "Escape" && (l(), i.current?.focus()), v instanceof MouseEvent && p.current && !p.current.contains(v.target) && i.current && !i.current.contains(v.target) && l();
+    };
+    return document.addEventListener("mousedown", h), document.addEventListener("keydown", h), () => {
+      document.removeEventListener("mousedown", h), document.removeEventListener("keydown", h);
+    };
+  }, [d, l, i]), d ? rn(
+    /* @__PURE__ */ a.jsx(
+      "div",
+      {
+        ref: (h) => {
+          p.current = h, typeof c == "function" ? c(h) : c && (c.current = h);
+        },
+        id: _,
+        role: "dialog",
+        className: m(Ot.content, t),
+        style: {
+          width: n,
+          ...r
+        },
+        ...o,
+        children: e
+      }
+    ),
+    document.body
+  ) : null;
+});
+qe.Trigger = Mt;
+qe.Content = zt;
+qe.displayName = "SandPopover";
+const Dt = "_track_1b1ni_1", Pt = "_bar_1b1ni_8", Lt = "_ring_1b1ni_15", Bt = "_ringTrack_1b1ni_19", Ft = "_ringValue_1b1ni_24", qt = "_label_1b1ni_32", te = {
+  track: Dt,
+  bar: Pt,
+  ring: Lt,
+  ringTrack: Bt,
+  ringValue: Ft,
+  label: qt
 };
-function On(s, e) {
+function Vt(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(
+const Ht = f(function({ value: e, max: n = 100, size: t = 96, thickness: r = 8, variant: o = "linear", showValue: c, className: d, style: l, ...i }, _) {
+  const p = Vt(e, n), h = p / n * 100;
+  if (o === "circular") {
+    const v = (t - r) / 2, b = 2 * Math.PI * v, g = b - h / 100 * b;
+    return /* @__PURE__ */ a.jsxs(
       "div",
       {
-        ref: m,
+        ref: _,
         role: "progressbar",
         "aria-valuemin": 0,
-        "aria-valuemax": a,
-        "aria-valuenow": b,
-        className: _(i),
+        "aria-valuemax": n,
+        "aria-valuenow": p,
+        className: m(d),
         style: { position: "relative", width: t, height: t, ...l },
-        ...u,
+        ...i,
         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(
+          /* @__PURE__ */ a.jsxs("svg", { className: te.ring, width: t, height: t, viewBox: `0 0 ${t} ${t}`, children: [
+            /* @__PURE__ */ a.jsx("circle", { className: te.ringTrack, cx: t / 2, cy: t / 2, r: v, strokeWidth: r }),
+            /* @__PURE__ */ a.jsx(
               "circle",
               {
-                className: z.ringValue,
+                className: te.ringValue,
                 cx: t / 2,
                 cy: t / 2,
-                r: p,
+                r: v,
                 strokeWidth: r,
-                strokeDasharray: v,
-                strokeDashoffset: T
+                strokeDasharray: b,
+                strokeDashoffset: g
               }
             )
           ] }),
-          c && /* @__PURE__ */ n.jsxs("span", { className: z.label, children: [
-            Math.round(x),
+          c && /* @__PURE__ */ a.jsxs("span", { className: te.label, children: [
+            Math.round(h),
             "%"
           ] })
         ]
       }
     );
   }
-  return /* @__PURE__ */ n.jsx(
+  return /* @__PURE__ */ a.jsx(
     "div",
     {
-      ref: m,
+      ref: _,
       role: "progressbar",
       "aria-valuemin": 0,
-      "aria-valuemax": a,
-      "aria-valuenow": b,
-      className: _(z.track, i),
+      "aria-valuemax": n,
+      "aria-valuenow": p,
+      className: m(te.track, d),
       style: { height: r, ...l },
-      ...u,
-      children: /* @__PURE__ */ n.jsx("div", { className: z.bar, style: { width: `${x}%` } })
+      ...i,
+      children: /* @__PURE__ */ a.jsx("div", { className: te.bar, style: { width: `${h}%` } })
     }
   );
 });
-Pn.displayName = "SandProgress";
-const k = {
+Ht.displayName = "SandProgress";
+const Gt = "_container_15onh_1", Kt = "_nativeSelect_15onh_6", Yt = "_trigger_15onh_18", Wt = "_triggerActive_15onh_43", Ut = "_error_15onh_47", Jt = "_value_15onh_55", Xt = "_placeholder_15onh_62", Zt = "_chevron_15onh_66", Qt = "_chevronOpen_15onh_72", es = "_listbox_15onh_76", ns = "_option_15onh_93", as = "_optionSelected_15onh_109", ts = "_optionDisabled_15onh_118", ss = "_checkIcon_15onh_124", rs = "_helper_15onh_128", $ = {
+  container: Gt,
+  nativeSelect: Kt,
+  trigger: Yt,
+  triggerActive: Wt,
+  error: Ut,
+  value: Jt,
+  placeholder: Xt,
+  chevron: Zt,
+  chevronOpen: Qt,
+  listbox: es,
+  option: ns,
+  optionSelected: as,
+  optionDisabled: ts,
+  checkIcon: ss,
+  helper: rs,
+  "helper-error": "_helper-error_15onh_134"
+}, os = f(function({ label: e, helperText: n, error: t, options: r = [], placeholder: o = "Select an option...", value: c, defaultValue: d, onChange: l, className: i = "", ..._ }, p) {
+  const h = O(), v = _.id ?? h, b = n ? `${v}-help` : void 0, [g, j] = F(d ?? c ?? ""), { isOpen: y, onOpen: D, onClose: P, onToggle: Y } = In(), I = z(null), Z = z(null), W = z(null), oe = r.find((S) => S.value === (c ?? g)), U = A((S) => {
+    j(S), l?.(S), P(), W.current?.focus();
+  }, [l, P]);
+  Te(Z, { enabled: y }), K(() => {
+    if (!y) return;
+    const S = (q) => {
+      I.current && !I.current.contains(q.target) && P();
+    };
+    return document.addEventListener("mousedown", S), () => document.removeEventListener("mousedown", S);
+  }, [y, P]);
+  const Ce = (S) => {
+    S.key === "Escape" && (P(), W.current?.focus()), S.key === "ArrowDown" && !y && D();
+  };
+  return /* @__PURE__ */ a.jsxs(xe, { label: e, htmlFor: v, children: [
+    /* @__PURE__ */ a.jsxs("div", { ref: I, className: $.container, onKeyDown: Ce, children: [
+      /* @__PURE__ */ a.jsxs(
+        "select",
+        {
+          ref: p,
+          id: v,
+          value: c ?? g,
+          onChange: (S) => U(S.target.value),
+          className: $.nativeSelect,
+          tabIndex: -1,
+          "aria-hidden": "true",
+          ..._,
+          children: [
+            /* @__PURE__ */ a.jsx("option", { value: "", disabled: !0, children: o }),
+            r.map((S) => /* @__PURE__ */ a.jsx("option", { value: S.value, disabled: S.disabled, children: S.label }, S.value))
+          ]
+        }
+      ),
+      /* @__PURE__ */ a.jsxs(
+        "button",
+        {
+          ref: W,
+          type: "button",
+          "aria-haspopup": "listbox",
+          "aria-expanded": y,
+          "aria-labelledby": `${v}-label`,
+          className: m(
+            $.trigger,
+            t && $.error,
+            y && $.triggerActive,
+            i
+          ),
+          onClick: Y,
+          children: [
+            /* @__PURE__ */ a.jsx("span", { className: m($.value, !oe && $.placeholder), children: oe ? oe.label : o }),
+            /* @__PURE__ */ a.jsx(B, { icon: "expand_more", size: 20, className: m($.chevron, y && $.chevronOpen) })
+          ]
+        }
+      ),
+      y && /* @__PURE__ */ a.jsx(
+        "ul",
+        {
+          ref: Z,
+          role: "listbox",
+          className: $.listbox,
+          "aria-labelledby": `${v}-label`,
+          children: r.map((S) => {
+            const q = S.value === (c ?? g);
+            return /* @__PURE__ */ a.jsxs(
+              "li",
+              {
+                role: "option",
+                "aria-selected": q,
+                className: m(
+                  $.option,
+                  q && $.optionSelected,
+                  S.disabled && $.optionDisabled
+                ),
+                onClick: () => !S.disabled && U(S.value),
+                tabIndex: S.disabled ? void 0 : 0,
+                onKeyDown: (Q) => {
+                  (Q.key === "Enter" || Q.key === " ") && (Q.preventDefault(), !S.disabled && U(S.value));
+                },
+                children: [
+                  S.label,
+                  q && /* @__PURE__ */ a.jsx(B, { icon: "check", size: 18, className: $.checkIcon })
+                ]
+              },
+              S.value
+            );
+          })
+        }
+      )
+    ] }),
+    n && /* @__PURE__ */ a.jsx("span", { id: b, className: m($.helper, t && $["helper-error"]), children: n })
+  ] });
+});
+os.displayName = "SandSelect";
+const T = {
   "sand-choice-group": "_sand-choice-group_viqgz_1",
   "sand-choice-row": "_sand-choice-row_viqgz_7",
   "sand-choice-input": "_sand-choice-input_viqgz_16",
@@ -1244,331 +1699,510 @@ const k = {
   "sand-choice-content": "_sand-choice-content_viqgz_123",
   "sand-choice-label": "_sand-choice-label_viqgz_129",
   "sand-choice-description": "_sand-choice-description_viqgz_134"
-}, 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 })
+}, Ve = ({ label: s, description: e }) => /* @__PURE__ */ a.jsxs("span", { className: T["sand-choice-content"], children: [
+  /* @__PURE__ */ a.jsx("span", { className: T["sand-choice-label"], children: s }),
+  e && /* @__PURE__ */ a.jsx("span", { className: T["sand-choice-description"], children: e })
+] }), En = f(function({ label: e, description: n, id: t, className: r = "", ...o }, c) {
+  const d = O(), l = t ?? d;
+  return /* @__PURE__ */ a.jsxs("label", { className: m(T["sand-choice-row"], r), htmlFor: l, children: [
+    /* @__PURE__ */ a.jsx("input", { ref: c, id: l, type: "checkbox", className: T["sand-choice-input"], ...o }),
+    /* @__PURE__ */ a.jsx("span", { className: m(T["sand-choice-control"], T["sand-checkbox"]), "aria-hidden": "true", children: /* @__PURE__ */ a.jsx("span", { className: m(T["sand-checkbox-icon"], "material-symbols-rounded"), children: "check" }) }),
+    /* @__PURE__ */ a.jsx(Ve, { label: e, description: n })
   ] });
 });
-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)
+En.displayName = "SandCheckbox";
+const Rn = f(function({ label: e, description: n, id: t, className: r = "", onKeyDown: o, ...c }, d) {
+  const l = O(), i = t ?? l, _ = (p) => {
+    if (o?.(p), p.defaultPrevented || !c.name)
       return;
-    const x = Array.from(
+    const h = 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();
+    ), v = h.findIndex((b) => b.id === i);
+    ke(p, v, h.length, (b) => {
+      h[b]?.focus(), h[b]?.click();
     });
   };
-  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 })
+  return /* @__PURE__ */ a.jsxs("label", { className: m(T["sand-choice-row"], r), htmlFor: i, children: [
+    /* @__PURE__ */ a.jsx("input", { ref: d, id: i, type: "radio", className: T["sand-choice-input"], onKeyDown: _, ...c }),
+    /* @__PURE__ */ a.jsx("span", { className: m(T["sand-choice-control"], T["sand-radio"]), "aria-hidden": "true" }),
+    /* @__PURE__ */ a.jsx(Ve, { label: e, 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 })
+Rn.displayName = "SandRadio";
+const An = f(function({ label: e, description: n, id: t, className: r = "", ...o }, c) {
+  const d = O(), l = t ?? d;
+  return /* @__PURE__ */ a.jsxs("label", { className: m(T["sand-choice-row"], r), htmlFor: l, children: [
+    /* @__PURE__ */ a.jsx("input", { ref: c, id: l, type: "checkbox", role: "switch", className: T["sand-choice-input"], ...o }),
+    /* @__PURE__ */ a.jsx("span", { className: m(T["sand-choice-control"], T["sand-switch"]), "aria-hidden": "true" }),
+    /* @__PURE__ */ a.jsx(Ve, { label: e, description: n })
   ] });
 });
-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
-    }
-  );
+An.displayName = "SandSwitch";
+const cs = f(function({ className: e = "", label: n, options: t = [], type: r = "radio", name: o, value: c, onChange: d, children: l, ...i }, _) {
+  const p = O(), h = o ?? p, v = (b) => {
+    if (r === "checkbox" || r === "switch") {
+      const g = Array.isArray(c) ? c : [], j = g.includes(b) ? g.filter((y) => y !== b) : [...g, b];
+      d?.(j);
+    } else
+      d?.(b);
+  };
+  return /* @__PURE__ */ a.jsxs("div", { ref: _, role: "group", "aria-label": typeof n == "string" ? n : void 0, className: m(T["sand-choice-group"], e), ...i, children: [
+    n && /* @__PURE__ */ a.jsx("div", { className: T["sand-choice-group-label"], children: n }),
+    /* @__PURE__ */ a.jsxs("div", { className: T["sand-choice-group-content"], children: [
+      t.map((b) => {
+        const g = Array.isArray(c) ? c.includes(b.value) : c === b.value, j = {
+          key: b.value,
+          name: h,
+          label: b.label,
+          description: b.description,
+          disabled: b.disabled,
+          checked: g,
+          onChange: () => v(b.value)
+        };
+        return r === "checkbox" ? /* @__PURE__ */ a.jsx(En, { ...j }) : r === "switch" ? /* @__PURE__ */ a.jsx(An, { ...j }) : /* @__PURE__ */ a.jsx(Rn, { ...j });
+      }),
+      l
+    ] })
+  ] });
 });
-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(
+cs.displayName = "SandChoiceGroup";
+const is = "_wrapper_1142m_1", ds = "_table_1142m_9", ls = "_stickyHeader_1142m_36", us = "_striped_1142m_42", _s = "_hoverable_1142m_50", _e = {
+  wrapper: is,
+  table: ds,
+  stickyHeader: ls,
+  striped: us,
+  hoverable: _s
+}, ps = f(function({ striped: e, hoverable: n = !0, stickyHeader: t, className: r, wrapperProps: o, items: c, data: d, children: l, ...i }, _) {
+  const p = c ?? d;
+  return /* @__PURE__ */ a.jsx("div", { ...o, className: m(_e.wrapper, o?.className), children: /* @__PURE__ */ a.jsxs(
     "table",
     {
-      ref: i,
-      className: _(J.table, e && J.striped, a && J.hoverable, t && J.stickyHeader, r),
-      ...c
+      ref: _,
+      className: m(_e.table, e && _e.striped, n && _e.hoverable, t && _e.stickyHeader, r),
+      ...i,
+      children: [
+        l,
+        p && !l && /* @__PURE__ */ a.jsx("tbody", { children: p.map((h, v) => /* @__PURE__ */ a.jsx("tr", { children: Object.values(h).map((b, g) => /* @__PURE__ */ a.jsx("td", { children: b }, g)) }, v)) })
+      ]
     }
   ) });
+}), On = f(
+  ({ children: s, ...e }, n) => /* @__PURE__ */ a.jsx("thead", { ref: n, ...e, children: s })
+);
+On.displayName = "SandTable.Header";
+const Mn = f(
+  ({ children: s, ...e }, n) => /* @__PURE__ */ a.jsx("tbody", { ref: n, ...e, children: s })
+);
+Mn.displayName = "SandTable.Body";
+const zn = f(
+  ({ children: s, ...e }, n) => /* @__PURE__ */ a.jsx("tr", { ref: n, ...e, children: s })
+);
+zn.displayName = "SandTable.Row";
+const Dn = f(
+  ({ children: s, ...e }, n) => /* @__PURE__ */ a.jsx("td", { ref: n, ...e, children: s })
+);
+Dn.displayName = "SandTable.Cell";
+const Pn = f(
+  ({ children: s, ...e }, n) => /* @__PURE__ */ a.jsx("th", { ref: n, ...e, children: s })
+);
+Pn.displayName = "SandTable.HeaderCell";
+const Ks = Object.assign(ps, {
+  Header: On,
+  Body: Mn,
+  Row: zn,
+  Cell: Dn,
+  HeaderCell: Pn
+}), ms = "_textarea_14lbs_1", fs = "_error_14lbs_23", bs = "_helper_14lbs_31", pe = {
+  textarea: ms,
+  error: fs,
+  helper: bs,
+  "helper-error": "_helper-error_14lbs_37",
+  "resize-none": "_resize-none_14lbs_42",
+  "resize-both": "_resize-both_14lbs_46",
+  "resize-horizontal": "_resize-horizontal_14lbs_50",
+  "resize-vertical": "_resize-vertical_14lbs_54"
+}, hs = f(function({ label: e, helperText: n, error: t, resize: r = "vertical", className: o = "", ...c }, d) {
+  const l = O(), i = c.id ?? l, _ = n ? `${i}-help` : void 0;
+  return /* @__PURE__ */ a.jsxs(xe, { label: e, htmlFor: i, children: [
+    /* @__PURE__ */ a.jsx(
+      "textarea",
+      {
+        ref: d,
+        id: i,
+        className: m(
+          pe.textarea,
+          t && pe.error,
+          pe[`resize-${r}`],
+          o
+        ),
+        "aria-invalid": t || void 0,
+        "aria-describedby": _,
+        ...c
+      }
+    ),
+    n && /* @__PURE__ */ a.jsx("span", { id: _, className: m(pe.helper, t && pe["helper-error"]), children: n })
+  ] });
 });
-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(
+hs.displayName = "SandTextarea";
+const vs = "_root_yi163_1", ys = "_list_yi163_6", xs = "_trigger_yi163_18", gs = "_active_yi163_41", Ss = "_indicator_yi163_45", js = "_panel_yi163_57", L = {
+  root: vs,
+  list: ys,
+  trigger: xs,
+  active: gs,
+  indicator: Ss,
+  panel: js
+}, He = () => null;
+He.displayName = "SandTabItem";
+const Ln = ye(void 0);
+function Bn() {
+  const s = ve(Ln);
+  if (!s)
+    throw new Error("Tabs components must be used within a SandTabs component");
+  return s;
+}
+function Ie({ items: s = [], defaultValue: e, value: n, onChange: t, className: r, children: o, ...c }) {
+  const d = O(), l = E(() => {
+    const y = [...s];
+    return be.forEach(o, (D) => {
+      X(D) && D.type === He && y.push(D.props);
+    }), y;
+  }, [s, o]), [i, _] = F(e ?? l[0]?.id), p = n ?? i, h = A((y) => {
+    _(y), t?.(y);
+  }, [t]), v = E(() => ({
+    activeId: p,
+    setActiveId: h,
+    baseId: d
+  }), [p, h, d]), b = Math.max(l.findIndex((y) => y.id === p), 0), g = E(
     () => ({
-      "--sand-tabs-left": `calc(4px + ${i} * (100% - 8px) / ${Math.max(s.length, 1)})`,
-      "--sand-tabs-width": `calc((100% - 8px) / ${Math.max(s.length, 1)})`
+      "--sand-tabs-left": `calc(4px + ${b} * (100% - 8px) / ${Math.max(l.length, 1)})`,
+      "--sand-tabs-width": `calc((100% - 8px) / ${Math.max(l.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(
+    [b, l.length]
+  ), j = l.length > 0;
+  return /* @__PURE__ */ a.jsx(Ln.Provider, { value: v, children: /* @__PURE__ */ a.jsx("div", { className: m(L.root, r), ...c, children: j ? /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+    /* @__PURE__ */ a.jsxs("div", { role: "tablist", "aria-label": "Tabs", className: L.list, style: g, children: [
+      /* @__PURE__ */ a.jsx("span", { "aria-hidden": "true", className: L.indicator }),
+      l.map((y, D) => {
+        const P = `${d}-tab-${y.id}`, Y = `${d}-panel-${y.id}`, I = y.id === p;
+        return /* @__PURE__ */ a.jsx(
           "button",
           {
-            id: x,
+            id: P,
             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
+            tabIndex: I ? 0 : -1,
+            "aria-selected": I,
+            "aria-controls": Y,
+            className: m(L.trigger, I && L.active),
+            onClick: () => h(y.id),
+            onKeyDown: (Z) => ke(Z, D, l.length, (W) => h(l[W].id)),
+            children: y.label
           },
-          m.id
+          y.id
         );
       })
     ] }),
-    l && /* @__PURE__ */ n.jsx(
+    l[b] && /* @__PURE__ */ a.jsx(
       "div",
       {
-        id: `${r}-panel-${l.id}`,
+        id: `${d}-panel-${l[b].id}`,
         role: "tabpanel",
-        "aria-labelledby": `${r}-tab-${l.id}`,
-        className: B.panel,
-        children: l.content
+        "aria-labelledby": `${d}-tab-${l[b].id}`,
+        className: L.panel,
+        children: l[b].content
       }
     )
-  ] });
+  ] }) : o }) });
 }
-const Xe = Pe(null);
-function Ae(s) {
+const Fn = ({ children: s, className: e, style: n, ...t }) => /* @__PURE__ */ a.jsx("div", { role: "tablist", className: m(L.list, e), style: n, ...t, children: s });
+Fn.displayName = "SandTabs.List";
+const qn = ({ value: s, children: e, className: n, ...t }) => {
+  const { activeId: r, setActiveId: o, baseId: c } = Bn(), d = r === s;
+  return /* @__PURE__ */ a.jsx(
+    "button",
+    {
+      role: "tab",
+      type: "button",
+      id: `${c}-tab-${s}`,
+      "aria-selected": d,
+      "aria-controls": `${c}-panel-${s}`,
+      tabIndex: d ? 0 : -1,
+      className: m(L.trigger, d && L.active, n),
+      onClick: () => o(s),
+      ...t,
+      children: e
+    }
+  );
+};
+qn.displayName = "SandTabs.Trigger";
+const Vn = ({ value: s, children: e, className: n, ...t }) => {
+  const { activeId: r, baseId: o } = Bn();
+  return r === s ? /* @__PURE__ */ a.jsx(
+    "div",
+    {
+      role: "tabpanel",
+      id: `${o}-panel-${s}`,
+      "aria-labelledby": `${o}-tab-${s}`,
+      className: m(L.panel, n),
+      ...t,
+      children: e
+    }
+  ) : null;
+};
+Vn.displayName = "SandTabs.Panel";
+Ie.List = Fn;
+Ie.Trigger = qn;
+Ie.Panel = Vn;
+Ie.Item = He;
+const Hn = ye(null);
+function an(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) {
+function Ns(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({
+function Ys({
   children: s,
   defaultTheme: e = "system",
-  theme: a,
+  theme: n,
   tokens: t,
   className: r,
-  root: d = !1
+  root: o = !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(
+  const [c, d] = F(e), l = n ?? c, i = an(l);
+  K(() => {
+    !o || typeof document > "u" || (document.documentElement.dataset.theme = i);
+  }, [i, o]);
+  const _ = E(
     () => ({
       theme: l,
-      resolvedTheme: u,
-      setTheme: i,
-      toggleTheme: () => i((b) => Ae(b) === "dark" ? "light" : "dark")
+      resolvedTheme: i,
+      setTheme: d,
+      toggleTheme: () => d((p) => an(p) === "dark" ? "light" : "dark")
     }),
-    [u, l]
+    [i, l]
   );
-  return /* @__PURE__ */ n.jsx(Xe.Provider, { value: m, children: /* @__PURE__ */ n.jsx("div", { className: r, "data-theme": u, style: et(t), children: s }) });
+  return /* @__PURE__ */ a.jsx(Hn.Provider, { value: _, children: /* @__PURE__ */ a.jsx("div", { className: r, "data-theme": i, style: Ns(t), children: s }) });
 }
-function yt() {
-  const s = De(Xe);
+function Ws() {
+  const s = ve(Hn);
   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 = {
+const ks = "_title_huapx_1", ws = "_text_huapx_8", Ts = "_code_huapx_14", Is = "_gradient_huapx_25", Cs = "_muted_huapx_31", J = {
+  title: ks,
+  text: ws,
+  code: Ts,
+  gradient: Is,
+  muted: Cs
+}, Ge = {
   regular: 400,
   medium: 500,
   semibold: 600,
   bold: 700
-}, ot = {
+}, $s = {
   xs: "1rem",
   sm: "1.25rem",
   md: "1.5rem",
   lg: "2rem",
   xl: "2.75rem",
   display: "clamp(3rem, 6vw, 4.75rem)"
-}, Ze = {
+}, Gn = {
   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,
+}, Es = f(function({ as: e, level: n = 2, size: t = "lg", weight: r = "semibold", gradient: o, muted: c, className: d, style: l, ...i }, _) {
+  const p = e ?? `h${n}`;
+  return /* @__PURE__ */ a.jsx(
+    p,
     {
-      ref: m,
-      className: _(P.title, d && P.gradient, c && P.muted, i),
-      style: { fontSize: ot[t], fontWeight: ge[r], ...l },
-      ...u
+      ref: _,
+      className: m(J.title, o && J.gradient, c && J.muted, d),
+      style: { fontSize: $s[t], fontWeight: Ge[r], ...l },
+      ...i
     }
   );
 });
-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,
+Es.displayName = "SandTitle";
+const Rs = f(function({ as: e, size: n = "md", weight: t = "regular", gradient: r, muted: o, className: c, style: d, ...l }, i) {
+  const _ = e ?? "p";
+  return /* @__PURE__ */ a.jsx(
+    _,
     {
-      ref: u,
-      className: _(P.text, r && P.gradient, d && P.muted, c),
-      style: { fontSize: Ze[a], fontWeight: ge[t], ...i },
+      ref: i,
+      className: m(J.text, r && J.gradient, o && J.muted, c),
+      style: { fontSize: Gn[n], fontWeight: Ge[t], ...d },
       ...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,
+Rs.displayName = "SandText";
+const As = f(function({ as: e, block: n, size: t = "sm", weight: r = "medium", className: o, style: c, ...d }, l) {
+  const i = e ?? (n ? "pre" : "code");
+  return /* @__PURE__ */ a.jsx(
+    i,
     {
       ref: l,
-      className: _(P.code, d),
+      className: m(J.code, o),
       style: {
-        fontSize: Ze[t],
-        fontWeight: ge[r],
-        display: a ? "block" : void 0,
-        whiteSpace: a ? "pre-wrap" : void 0,
+        fontSize: Gn[t],
+        fontWeight: Ge[r],
+        display: n ? "block" : void 0,
+        whiteSpace: n ? "pre-wrap" : void 0,
         ...c
       },
-      ...i
+      ...d
     }
   );
 });
-it.displayName = "SandCode";
-const lt = "_trigger_ehjfy_1", ut = "_content_ehjfy_5", Me = {
-  trigger: lt,
-  content: ut
+As.displayName = "SandCode";
+const Os = "_trigger_ehjfy_1", Ms = "_content_ehjfy_5", tn = {
+  trigger: Os,
+  content: Ms
 };
-function gt({ content: s, children: e }) {
-  const a = I(), [t, r] = V(null);
-  if (!sa(e))
+function Us({ content: s, title: e, children: n }) {
+  const t = O(), [r, o] = F(null), c = s ?? e;
+  if (!X(n))
     return null;
   const d = (i) => {
-    const l = i.getBoundingClientRect();
-    r({
-      top: l.bottom + 10,
-      left: l.left + l.width / 2
+    const _ = i.getBoundingClientRect();
+    o({
+      top: _.bottom + 10,
+      left: _.left + _.width / 2
     });
-  }, c = ra(e, {
-    "aria-describedby": a,
+  }, l = sn(n, {
+    "aria-describedby": t,
     onMouseEnter: (i) => {
-      d(i.currentTarget), e.props.onMouseEnter?.(i);
+      d(i.currentTarget), n.props.onMouseEnter?.(i);
     },
     onMouseLeave: (i) => {
-      r(null), e.props.onMouseLeave?.(i);
+      o(null), n.props.onMouseLeave?.(i);
     },
     onFocus: (i) => {
-      d(i.currentTarget), e.props.onFocus?.(i);
+      d(i.currentTarget), n.props.onFocus?.(i);
     },
     onBlur: (i) => {
-      r(null), e.props.onBlur?.(i);
+      o(null), n.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(
+  return /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+    /* @__PURE__ */ a.jsx("span", { className: tn.trigger, children: l }),
+    r && typeof document < "u" ? rn(
+      /* @__PURE__ */ a.jsx(
         "div",
         {
-          id: a,
+          id: t,
           role: "tooltip",
-          className: Me.content,
-          style: { top: t.top, left: t.left, transform: "translateX(-50%)" },
-          children: s
+          className: tn.content,
+          style: { top: r.top, left: r.left, transform: "translateX(-50%)" },
+          children: c
         }
       ),
       document.body
     ) : null
   ] });
 }
+function Js(s) {
+  const { value: e, defaultValue: n, onChange: t } = s, [r, o] = F(n), c = e !== void 0, d = c ? e : r, l = z(t);
+  K(() => {
+    l.current = t;
+  });
+  const i = A(
+    (_) => {
+      const p = typeof _ == "function" ? _(d) : _;
+      c || o(p), l.current?.(p);
+    },
+    [c, d]
+  );
+  return [d, i];
+}
+const Ne = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280
+};
+function Xs() {
+  const [s, e] = F("base");
+  return K(() => {
+    const n = () => {
+      const t = window.innerWidth;
+      t >= Ne.xl ? e("xl") : t >= Ne.lg ? e("lg") : t >= Ne.md ? e("md") : t >= Ne.sm ? e("sm") : e("base");
+    };
+    return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
+  }, []), s;
+}
 export {
-  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
+  Sa as SandAccordion,
+  ln as SandAccordionItem,
+  ia as SandAlert,
+  xn as SandAppLayout,
+  Ta as SandAvatar,
+  Ia as SandAvatarGroup,
+  Ca as SandBadge,
+  za as SandBox,
+  un as SandBreadcrumbItem,
+  $a as SandBreadcrumbs,
+  Ae as SandButton,
+  qa as SandCard,
+  En as SandCheckbox,
+  _n as SandChip,
+  cs as SandChoiceGroup,
+  As as SandCode,
+  pn as SandCodeBlock,
+  Ga as SandCodeTabs,
+  _t as SandContainer,
+  Hs as SandDialog,
+  Ya as SandDivider,
+  Et as SandDrawer,
+  xe as SandFormGroup,
+  Bs as SandGrid,
+  pt as SandHeader,
+  B as SandIcon,
+  Ps as SandIconProvider,
+  vn as SandInput,
+  Qa as SandInputGroup,
+  nt as SandKBD,
+  st as SandLoader,
+  we as SandMicroserviceLayout,
+  ft as SandModal,
+  Gs as SandNavbar,
+  Oe as SandNavbarItem,
+  Rt as SandPagination,
+  qe as SandPopover,
+  zt as SandPopoverContent,
+  Mt as SandPopoverTrigger,
+  Ht as SandProgress,
+  Rn as SandRadio,
+  Vs as SandResultPanel,
+  os as SandSelect,
+  rt as SandSkeleton,
+  ut as SandSlider,
+  Ja as SandSnackbar,
+  Nn as SandStack,
+  An as SandSwitch,
+  He as SandTabItem,
+  Ks as SandTable,
+  Ie as SandTabs,
+  Ls as SandTag,
+  Rs as SandText,
+  hs as SandTextarea,
+  Ys as SandThemeProvider,
+  Es as SandTitle,
+  Ua as SandToast,
+  Fs as SandToolLayout,
+  qs as SandToolPanel,
+  Us as SandTooltip,
+  Xs as useBreakpoint,
+  Js as useControllableState,
+  In as useDisclosure,
+  Te as useFocusTrap,
+  na as useSandIcon,
+  Ws as useSandTheme
 };