@donkit-ai/design-system 1.1.1 → 1.1.2

package/dist/index.es.js

@@ -1,7 +1,7 @@
 import A, { useState as T, useRef as L, useEffect as B } from "react";
 import J from "react-dom";
 import { ChevronDown as K, Minus as ve, Plus as je, XCircle as fe, AlertTriangle as me, CheckCircle as pe, Info as be, X as se, Check as _e, ChevronUp as we, ChevronsUpDown as Ne } from "lucide-react";
-const g = {
+const S = {
   1: 16,
   2: 20,
   3: 24,
@@ -24,16 +24,16 @@ function ye() {
   ce = 1;
   var t = Symbol.for("react.transitional.element"), e = Symbol.for("react.fragment");
   function r(l, n, a) {
-    var i = null;
-    if (a !== void 0 && (i = "" + a), n.key !== void 0 && (i = "" + n.key), "key" in n) {
+    var c = null;
+    if (a !== void 0 && (c = "" + a), n.key !== void 0 && (c = "" + n.key), "key" in n) {
       a = {};
-      for (var c in n)
-        c !== "key" && (a[c] = n[c]);
+      for (var i in n)
+        i !== "key" && (a[i] = n[i]);
     } else a = n;
     return n = a.ref, {
       $$typeof: t,
       type: l,
-      key: i,
+      key: c,
       ref: n !== void 0 ? n : null,
       props: a
     };
@@ -61,7 +61,7 @@ function Ee() {
       switch (o) {
         case k:
           return "Fragment";
-        case S:
+        case g:
           return "Profiler";
         case $:
           return "StrictMode";
@@ -134,14 +134,14 @@ function Ee() {
     function a() {
       return Error("react-stack-top-frame");
     }
-    function i(o) {
+    function c(o) {
       if (X.call(o, "key")) {
         var h = Object.getOwnPropertyDescriptor(o, "key").get;
         if (h && h.isReactWarning) return !1;
       }
       return o.key !== void 0;
     }
-    function c(o, h) {
+    function i(o, h) {
       function N() {
         H || (H = !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)",
@@ -223,12 +223,12 @@ React keys must be passed directly to JSX without using spread:
           E
         ), le[E + y] = !0);
       }
-      if (E = null, N !== void 0 && (r(N), E = "" + N), i(h) && (r(h.key), E = "" + h.key), "key" in h) {
+      if (E = null, N !== void 0 && (r(N), E = "" + N), c(h) && (r(h.key), E = "" + h.key), "key" in h) {
         N = {};
         for (var Q in h)
           Q !== "key" && (N[Q] = h[Q]);
       } else N = h;
-      return E && c(
+      return E && i(
         N,
         typeof o == "function" ? o.displayName || o.name || "Unknown" : o
       ), f(
@@ -246,7 +246,7 @@ React keys must be passed directly to JSX without using spread:
     function x(o) {
       return typeof o == "object" && o !== null && o.$$typeof === j;
     }
-    var b = A, j = Symbol.for("react.transitional.element"), v = Symbol.for("react.portal"), k = Symbol.for("react.fragment"), $ = Symbol.for("react.strict_mode"), S = Symbol.for("react.profiler"), m = Symbol.for("react.consumer"), _ = Symbol.for("react.context"), R = Symbol.for("react.forward_ref"), I = Symbol.for("react.suspense"), P = Symbol.for("react.suspense_list"), M = Symbol.for("react.memo"), U = Symbol.for("react.lazy"), w = Symbol.for("react.activity"), D = Symbol.for("react.client.reference"), F = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, X = Object.prototype.hasOwnProperty, re = Array.isArray, W = console.createTask ? console.createTask : function() {
+    var b = A, j = Symbol.for("react.transitional.element"), v = Symbol.for("react.portal"), k = Symbol.for("react.fragment"), $ = Symbol.for("react.strict_mode"), g = Symbol.for("react.profiler"), m = Symbol.for("react.consumer"), _ = Symbol.for("react.context"), R = Symbol.for("react.forward_ref"), I = Symbol.for("react.suspense"), P = Symbol.for("react.suspense_list"), M = Symbol.for("react.memo"), U = Symbol.for("react.lazy"), w = Symbol.for("react.activity"), D = Symbol.for("react.client.reference"), F = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, X = Object.prototype.hasOwnProperty, re = Array.isArray, W = console.createTask ? console.createTask : function() {
       return null;
     };
     b = {
@@ -290,8 +290,8 @@ function ke({
   fullWidth: l = !1,
   icon: n,
   disabled: a = !1,
-  onClick: i,
-  type: c = "button",
+  onClick: c,
+  type: i = "button",
   href: p,
   "aria-label": f,
   ...d
@@ -313,7 +313,7 @@ function ke({
         v.preventDefault();
         return;
       }
-      v.metaKey || v.ctrlKey || v.button === 1 || (v.preventDefault(), i == null || i(v));
+      v.metaKey || v.ctrlKey || v.button === 1 || (v.preventDefault(), c == null || c(v));
     };
     return /* @__PURE__ */ s.jsx(
       "a",
@@ -331,10 +331,10 @@ function ke({
   return /* @__PURE__ */ s.jsx(
     "button",
     {
-      type: c,
+      type: i,
       className: x,
       disabled: a,
-      onClick: i,
+      onClick: c,
       "aria-label": f,
       ...d,
       children: b
@@ -348,8 +348,8 @@ function Me({
   fullWidth: l = !0,
   icon: n,
   iconRight: a,
-  onIconRightClick: i,
-  size: c = "m",
+  onIconRightClick: c,
+  size: i = "m",
   disabled: p,
   id: f,
   ...d
@@ -358,12 +358,12 @@ function Me({
   return /* @__PURE__ */ s.jsxs("div", { className: `ds-input-wrapper ${l ? "ds-input-wrapper--full" : ""} ${p ? "ds-input-wrapper--disabled" : ""}`, children: [
     t && /* @__PURE__ */ s.jsx("label", { className: "ds-input-label", htmlFor: u, children: t }),
     /* @__PURE__ */ s.jsxs("div", { className: "ds-input-container", children: [
-      n && /* @__PURE__ */ s.jsx("span", { className: `ds-input-icon ds-input-icon--${c}`, "aria-hidden": "true", children: n }),
+      n && /* @__PURE__ */ s.jsx("span", { className: `ds-input-icon ds-input-icon--${i}`, "aria-hidden": "true", children: n }),
       /* @__PURE__ */ s.jsx(
         "input",
         {
           id: u,
-          className: `ds-input ds-input--${c} ${n ? "ds-input--with-icon" : ""} ${a ? "ds-input--with-icon-right" : ""} ${e ? "ds-input--error" : ""}`,
+          className: `ds-input ds-input--${i} ${n ? "ds-input--with-icon" : ""} ${a ? "ds-input--with-icon-right" : ""} ${e ? "ds-input--error" : ""}`,
           disabled: p,
           "aria-invalid": e ? "true" : "false",
           "aria-describedby": j,
@@ -374,8 +374,8 @@ function Me({
         "button",
         {
           type: "button",
-          className: `ds-input-icon-right ds-input-icon-right--${c}`,
-          onClick: i,
+          className: `ds-input-icon-right ds-input-icon-right--${i}`,
+          onClick: c,
           tabIndex: -1,
           "aria-label": "Toggle visibility",
           children: a
@@ -393,19 +393,19 @@ function Fe({
   fullWidth: l = !0,
   size: n = "m",
   disabled: a,
-  id: i,
-  resize: c = !0,
+  id: c,
+  resize: i = !0,
   rows: p = 3,
   ...f
 }) {
-  const d = i || `textarea-${A.useId()}`, u = r ? `${d}-hint` : void 0, x = e ? `${d}-error` : void 0, b = x || u;
+  const d = c || `textarea-${A.useId()}`, u = r ? `${d}-hint` : void 0, x = e ? `${d}-error` : void 0, b = x || u;
   return /* @__PURE__ */ s.jsxs("div", { className: `ds-textarea-wrapper ${l ? "ds-textarea-wrapper--full" : ""} ${a ? "ds-textarea-wrapper--disabled" : ""}`, children: [
     t && /* @__PURE__ */ s.jsx("label", { className: "ds-textarea-label", htmlFor: d, children: t }),
     /* @__PURE__ */ s.jsx(
       "textarea",
       {
         id: d,
-        className: `ds-textarea ds-textarea--${n} ${e ? "ds-textarea--error" : ""} ${c ? "" : "ds-textarea--no-resize"}`,
+        className: `ds-textarea ds-textarea--${n} ${e ? "ds-textarea--error" : ""} ${i ? "" : "ds-textarea--no-resize"}`,
         disabled: a,
         "aria-invalid": e ? "true" : "false",
         "aria-describedby": b,
@@ -424,13 +424,13 @@ function We({
   options: l = [],
   placeholder: n = "Select option",
   error: a,
-  fullWidth: i = !0,
-  size: c = "m",
+  fullWidth: c = !0,
+  size: i = "m",
   disabled: p = !1,
   id: f,
   ...d
 }) {
-  const [u, x] = T(!1), [b, j] = T({}), [v, k] = T("down"), $ = L(null), S = L(null), m = f || `select-${A.useId()}`, _ = `${m}-label`, R = a ? `${m}-error` : void 0, I = () => {
+  const [u, x] = T(!1), [b, j] = T({}), [v, k] = T("down"), $ = L(null), g = L(null), m = f || `select-${A.useId()}`, _ = `${m}-label`, R = a ? `${m}-error` : void 0, I = () => {
     var H;
     const w = (H = $.current) == null ? void 0 : H.getBoundingClientRect();
     if (!w) return;
@@ -446,17 +446,17 @@ function We({
       };
   }, [u]), B(() => {
     const w = (D) => {
-      $.current && !$.current.contains(D.target) && S.current && !S.current.contains(D.target) && x(!1);
+      $.current && !$.current.contains(D.target) && g.current && !g.current.contains(D.target) && x(!1);
     };
     return document.addEventListener("mousedown", w), () => document.removeEventListener("mousedown", w);
   }, []);
-  const P = l.find((w) => w.value === e), M = c === "xs" ? g[1] : c === "small" ? g[2] : g[3], U = u && /* @__PURE__ */ s.jsx(
+  const P = l.find((w) => w.value === e), M = i === "xs" ? S[1] : i === "small" ? S[2] : S[3], U = u && /* @__PURE__ */ s.jsx(
     "div",
     {
-      ref: S,
+      ref: g,
       role: "listbox",
       "aria-labelledby": t ? _ : void 0,
-      className: `ds-select-dropdown ds-select-dropdown--${c} ds-select-dropdown--${v}`,
+      className: `ds-select-dropdown ds-select-dropdown--${i} ds-select-dropdown--${v}`,
       style: b,
       children: l.map((w) => /* @__PURE__ */ s.jsx(
         "button",
@@ -464,7 +464,7 @@ function We({
           type: "button",
           role: "option",
           "aria-selected": e === w.value,
-          className: `ds-select-option ds-select-option--${c} ${e === w.value ? "ds-select-option--selected" : ""}`,
+          className: `ds-select-option ds-select-option--${i} ${e === w.value ? "ds-select-option--selected" : ""}`,
           onClick: () => {
             r == null || r(w.value), x(!1);
           },
@@ -474,7 +474,7 @@ function We({
       ))
     }
   );
-  return /* @__PURE__ */ s.jsxs("div", { className: `ds-select-wrapper ${i ? "ds-select-wrapper--full" : ""} ${p ? "ds-select-wrapper--disabled" : ""}`, children: [
+  return /* @__PURE__ */ s.jsxs("div", { className: `ds-select-wrapper ${c ? "ds-select-wrapper--full" : ""} ${p ? "ds-select-wrapper--disabled" : ""}`, children: [
     t && /* @__PURE__ */ s.jsx("label", { id: _, className: "ds-select-label", children: t }),
     /* @__PURE__ */ s.jsx("div", { className: "ds-select-container", ref: $, children: /* @__PURE__ */ s.jsxs(
       "button",
@@ -487,7 +487,7 @@ function We({
         "aria-labelledby": t ? _ : void 0,
         "aria-invalid": a ? "true" : "false",
         "aria-describedby": R,
-        className: `ds-select-trigger ds-select-trigger--${c} ${a ? "ds-select-trigger--error" : ""}`,
+        className: `ds-select-trigger ds-select-trigger--${i} ${a ? "ds-select-trigger--error" : ""}`,
         onClick: () => !p && x(!u),
         disabled: p,
         ...d,
@@ -516,41 +516,41 @@ function Ye({
   min: l = 0,
   max: n = 100,
   step: a = 1,
-  size: i = "m",
-  disabled: c = !1,
+  size: c = "m",
+  disabled: i = !1,
   hint: p,
   error: f,
   ...d
 }) {
   const u = () => {
-    if (c) return;
+    if (i) return;
     const $ = Math.min(Number(e) + a, n);
     r == null || r($);
   }, x = () => {
-    if (c) return;
+    if (i) return;
     const $ = Math.max(Number(e) - a, l);
     r == null || r($);
   }, b = ($) => {
-    if (c) return;
-    const S = $.target.value;
-    if (S === "") {
+    if (i) return;
+    const g = $.target.value;
+    if (g === "") {
       r == null || r(l);
       return;
     }
-    const m = Number(S);
+    const m = Number(g);
     if (!isNaN(m)) {
       const _ = Math.min(Math.max(m, l), n);
       r == null || r(_);
     }
   }, j = [
     "ds-stepper-wrapper",
-    c && "ds-stepper-wrapper--disabled",
+    i && "ds-stepper-wrapper--disabled",
     f && "ds-stepper-wrapper--error"
   ].filter(Boolean).join(" "), v = [
     "ds-stepper",
-    `ds-stepper--${i}`,
-    c && "ds-stepper--disabled"
-  ].filter(Boolean).join(" "), k = i === "xs" ? g[1] : i === "small" ? g[2] : g[3];
+    `ds-stepper--${c}`,
+    i && "ds-stepper--disabled"
+  ].filter(Boolean).join(" "), k = c === "xs" ? S[1] : c === "small" ? S[2] : S[3];
   return /* @__PURE__ */ s.jsxs("div", { className: j, children: [
     t && /* @__PURE__ */ s.jsx("label", { className: "ds-stepper-label", children: t }),
     /* @__PURE__ */ s.jsxs("div", { className: v, children: [
@@ -560,7 +560,7 @@ function Ye({
           type: "button",
           className: "ds-stepper-button ds-stepper-button--minus",
           onClick: x,
-          disabled: c || e <= l,
+          disabled: i || e <= l,
           "aria-label": "Decrease",
           children: /* @__PURE__ */ s.jsx(ve, { size: k, strokeWidth: 1.5 })
         }
@@ -575,7 +575,7 @@ function Ye({
           min: l,
           max: n,
           step: a,
-          disabled: c,
+          disabled: i,
           ...d
         }
       ),
@@ -585,7 +585,7 @@ function Ye({
           type: "button",
           className: "ds-stepper-button ds-stepper-button--plus",
           onClick: u,
-          disabled: c || e >= n,
+          disabled: i || e >= n,
           "aria-label": "Increase",
           children: /* @__PURE__ */ s.jsx(je, { size: k, strokeWidth: 1.5 })
         }
@@ -603,8 +603,8 @@ function ze({
   // deprecated, use variant="interactive"
   onClick: n,
   href: a,
-  disabled: i = !1,
-  ...c
+  disabled: c = !1,
+  ...i
 }) {
   const f = (l ? "interactive" : r) === "interactive" || n || a, d = [
     "ds-card",
@@ -613,7 +613,7 @@ function ze({
   ].filter(Boolean).join(" ");
   if (a) {
     const b = (j) => {
-      if (i) {
+      if (c) {
         j.preventDefault();
         return;
       }
@@ -623,10 +623,10 @@ function ze({
       "a",
       {
         className: d,
-        href: i ? void 0 : a,
+        href: c ? void 0 : a,
         onClick: b,
-        "aria-disabled": i ? "true" : void 0,
-        ...c,
+        "aria-disabled": c ? "true" : void 0,
+        ...i,
         children: t
       }
     );
@@ -634,7 +634,7 @@ function ze({
   const u = f && n ? "button" : "div", x = f && n ? {
     type: "button",
     onClick: n,
-    disabled: i
+    disabled: c
   } : {};
   return /* @__PURE__ */ s.jsx(
     u,
@@ -642,7 +642,7 @@ function ze({
       className: d,
       role: f && !n ? "article" : void 0,
       ...x,
-      ...c,
+      ...i,
       children: t
     }
   );
@@ -679,8 +679,8 @@ function Je({
     "ds-badge",
     `ds-badge--${e}`,
     `ds-badge--${r}`
-  ].filter(Boolean).join(" "), i = l || (["info", "success", "warning", "error"].includes(e) ? "status" : void 0);
-  return /* @__PURE__ */ s.jsx("span", { className: a, role: i, ...n, children: t });
+  ].filter(Boolean).join(" "), c = l || (["info", "success", "warning", "error"].includes(e) ? "status" : void 0);
+  return /* @__PURE__ */ s.jsx("span", { className: a, role: c, ...n, children: t });
 }
 const $e = {
   info: be,
@@ -696,9 +696,9 @@ function Ke({
   role: n,
   ...a
 }) {
-  const i = $e[e], c = n || (e === "error" ? "alert" : "status");
-  return /* @__PURE__ */ s.jsxs("div", { className: `ds-alert ds-alert--${e} ${r ? "" : "ds-alert--no-title"}`, role: c, ...a, children: [
-    i && /* @__PURE__ */ s.jsx("div", { className: "ds-alert__icon", children: /* @__PURE__ */ s.jsx(i, { size: g[3], strokeWidth: 1.5 }) }),
+  const c = $e[e], i = n || (e === "error" ? "alert" : "status");
+  return /* @__PURE__ */ s.jsxs("div", { className: `ds-alert ds-alert--${e} ${r ? "" : "ds-alert--no-title"}`, role: i, ...a, children: [
+    c && /* @__PURE__ */ s.jsx("div", { className: "ds-alert__icon", children: /* @__PURE__ */ s.jsx(c, { size: S[3], strokeWidth: 1.5 }) }),
     /* @__PURE__ */ s.jsxs("div", { className: "ds-alert__content", children: [
       r && /* @__PURE__ */ s.jsx("div", { className: "ds-alert__title", children: r }),
       t && /* @__PURE__ */ s.jsx("div", { className: "ds-alert__message", children: t })
@@ -710,7 +710,7 @@ function Ke({
         className: "ds-alert__close",
         onClick: l,
         "aria-label": "Close alert",
-        children: /* @__PURE__ */ s.jsx(se, { size: g[3], strokeWidth: 1.5 })
+        children: /* @__PURE__ */ s.jsx(se, { size: S[3], strokeWidth: 1.5 })
       }
     )
   ] });
@@ -722,7 +722,7 @@ function Ze({
   size: l = "m",
   ...n
 }) {
-  const a = L(null), i = A.useId();
+  const a = L(null), c = A.useId();
   B(() => {
     const d = (x) => {
       x.key === "Escape" && (r == null || r());
@@ -733,7 +733,7 @@ function Ze({
       document.removeEventListener("keydown", d), document.removeEventListener("mousedown", u);
     };
   }, [r]);
-  const c = A.Children.toArray(t), p = c.find((d) => (d == null ? void 0 : d.type) === de), f = c.filter((d) => (d == null ? void 0 : d.type) !== de);
+  const i = A.Children.toArray(t), p = i.find((d) => (d == null ? void 0 : d.type) === de), f = i.filter((d) => (d == null ? void 0 : d.type) !== de);
   return /* @__PURE__ */ s.jsx("div", { className: "ds-modal-overlay", ...n, children: /* @__PURE__ */ s.jsxs(
     "div",
     {
@@ -741,16 +741,16 @@ function Ze({
       ref: a,
       role: "dialog",
       "aria-modal": "true",
-      "aria-labelledby": e ? i : void 0,
+      "aria-labelledby": e ? c : void 0,
       children: [
         (e || r) && /* @__PURE__ */ s.jsxs("div", { className: "ds-modal__header", children: [
-          e && /* @__PURE__ */ s.jsx("h3", { id: i, className: "ds-modal__title", children: e }),
+          e && /* @__PURE__ */ s.jsx("h3", { id: c, className: "ds-modal__title", children: e }),
           r && /* @__PURE__ */ s.jsx(
             ke,
             {
               variant: "ghost",
               size: "small",
-              icon: /* @__PURE__ */ s.jsx(se, { size: g[2], strokeWidth: 1.5 }),
+              icon: /* @__PURE__ */ s.jsx(se, { size: S[2], strokeWidth: 1.5 }),
               onClick: r,
               "aria-label": "Close modal"
             }
@@ -772,17 +772,17 @@ function Re({
   expanded: l,
   onToggle: n,
   padding: a = "s",
-  className: i = "",
-  ...c
+  className: c = "",
+  ...i
 }) {
   const [p, f] = T(r), d = l !== void 0, u = d ? l : p, x = () => {
     d ? n == null || n(!l) : f((j) => !j);
   }, b = [
     "ds-code-accordion",
     `ds-code-accordion--${a}`,
-    i
+    c
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s.jsxs("div", { className: b, ...c, children: [
+  return /* @__PURE__ */ s.jsxs("div", { className: b, ...i, children: [
     /* @__PURE__ */ s.jsxs(
       "button",
       {
@@ -795,7 +795,7 @@ function Re({
           /* @__PURE__ */ s.jsx(
             K,
             {
-              size: g[2],
+              size: S[2],
               strokeWidth: 1.5,
               className: `ds-code-accordion__icon ${u ? "ds-code-accordion__icon--expanded" : ""}`
             }
@@ -810,7 +810,7 @@ function Qe({ children: t, block: e = !1, collapsible: r = !1, title: l = "Code"
   return e ? r ? /* @__PURE__ */ s.jsx(Re, { title: l, defaultExpanded: n, ...a, children: t }) : /* @__PURE__ */ s.jsx("pre", { className: "ds-code-block", ...a, children: /* @__PURE__ */ s.jsx("code", { children: t }) }) : /* @__PURE__ */ s.jsx("code", { className: "ds-code-inline", ...a, children: t });
 }
 function et({ href: t, children: e, onClick: r, target: l, rel: n, ...a }) {
-  const c = l === "_blank" ? n ? `${n} noopener noreferrer` : "noopener noreferrer" : n;
+  const i = l === "_blank" ? n ? `${n} noopener noreferrer` : "noopener noreferrer" : n;
   return /* @__PURE__ */ s.jsx(
     "a",
     {
@@ -818,7 +818,7 @@ function et({ href: t, children: e, onClick: r, target: l, rel: n, ...a }) {
       className: "ds-link",
       onClick: r,
       target: l,
-      rel: c,
+      rel: i,
       ...a,
       children: e
     }
@@ -827,18 +827,18 @@ function et({ href: t, children: e, onClick: r, target: l, rel: n, ...a }) {
 function tt({ children: t, size: e = "m", variant: r = "ghost", ...l }) {
   return /* @__PURE__ */ s.jsx("div", { className: "ds-tabs", role: "tablist", ...l, children: A.Children.map(t, (n) => A.isValidElement(n) ? A.cloneElement(n, { size: e, variant: r }) : n) });
 }
-function st({ children: t, selected: e = !1, onClick: r, size: l = "m", variant: n = "ghost", disabled: a = !1, icon: i, href: c, ...p }) {
-  const f = i && !t, d = [
+function st({ children: t, selected: e = !1, onClick: r, size: l = "m", variant: n = "ghost", disabled: a = !1, icon: c, href: i, ...p }) {
+  const f = c && !t, d = [
     "ds-tab",
     `ds-tab--${l}`,
     `ds-tab--${n}`,
     e && "ds-tab--selected",
     f && "ds-tab--icon-only"
   ].filter(Boolean).join(" "), u = /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-    i && /* @__PURE__ */ s.jsx("span", { className: "ds-tab-icon", children: i }),
+    c && /* @__PURE__ */ s.jsx("span", { className: "ds-tab-icon", children: c }),
     t
   ] });
-  if (c) {
+  if (i) {
     const x = (b) => {
       if (a) {
         b.preventDefault();
@@ -853,7 +853,7 @@ function st({ children: t, selected: e = !1, onClick: r, size: l = "m", variant:
         "aria-current": e ? "page" : void 0,
         "aria-disabled": a ? "true" : void 0,
         className: d,
-        href: a ? void 0 : c,
+        href: a ? void 0 : i,
         onClick: x,
         ...p,
         children: u
@@ -880,15 +880,15 @@ function rt({
   expanded: l,
   onToggle: n,
   padding: a = "m",
-  ...i
+  ...c
 }) {
-  const [c, p] = T(r), f = l !== void 0, d = f ? l : c, u = () => {
+  const [i, p] = T(r), f = l !== void 0, d = f ? l : i, u = () => {
     f ? n == null || n(!l) : p((b) => !b);
   }, x = [
     "ds-accordion",
     `ds-accordion--${a}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s.jsxs("div", { className: x, ...i, children: [
+  return /* @__PURE__ */ s.jsxs("div", { className: x, ...c, children: [
     /* @__PURE__ */ s.jsxs(
       "button",
       {
@@ -901,7 +901,7 @@ function rt({
           /* @__PURE__ */ s.jsx(
             K,
             {
-              size: g[2],
+              size: S[2],
               strokeWidth: 1.5,
               className: `ds-accordion__icon ${d ? "ds-accordion__icon--expanded" : ""}`
             }
@@ -932,10 +932,10 @@ function Te(t, e, r) {
     default:
       n = e.bottom + O, a = e.left;
   }
-  const i = Math.max(z, Math.min(l - r.width - z, a)), c = a - i;
-  return { top: n, left: i, arrowOffset: c };
+  const c = Math.max(z, Math.min(l - r.width - z, a)), i = a - c;
+  return { top: n, left: c, arrowOffset: i };
 }
-function ge(t, e, r) {
+function Se(t, e, r) {
   const l = window.innerWidth, n = window.innerHeight;
   if (t.top >= e + O + z) return "top";
   if (n - t.bottom >= e + O + z) return "bottom";
@@ -945,12 +945,12 @@ function ge(t, e, r) {
   return a === t.top ? "top" : a === n - t.bottom ? "bottom" : a === l - t.right ? "right" : "left";
 }
 function nt({ children: t, content: e, position: r, ...l }) {
-  const [n, a] = T(!1), [i, c] = T({ visibility: "hidden" }), [p, f] = T(r || "top"), d = L(null), u = L(null), x = L(!1), b = () => {
+  const [n, a] = T(!1), [c, i] = T({ visibility: "hidden" }), [p, f] = T(r || "top"), d = L(null), u = L(null), x = L(!1), b = () => {
     if (!d.current || !u.current) return;
-    const v = d.current.getBoundingClientRect(), k = u.current.getBoundingClientRect(), $ = r || ge(v, k.height, k.width), { top: S, left: m, arrowOffset: _ } = Te($, v, k);
-    f($), c({
+    const v = d.current.getBoundingClientRect(), k = u.current.getBoundingClientRect(), $ = r || Se(v, k.height, k.width), { top: g, left: m, arrowOffset: _ } = Te($, v, k);
+    f($), i({
       position: "fixed",
-      top: S,
+      top: g,
       left: m,
       visibility: "visible",
       "--arrow-offset": `${_}px`
@@ -958,7 +958,7 @@ function nt({ children: t, content: e, position: r, ...l }) {
   };
   if (B(() => {
     if (!n) return;
-    c({ position: "fixed", visibility: "hidden" });
+    i({ position: "fixed", visibility: "hidden" });
     const v = requestAnimationFrame(b);
     return window.addEventListener("scroll", b, !0), window.addEventListener("resize", b), () => {
       cancelAnimationFrame(v), window.removeEventListener("scroll", b, !0), window.removeEventListener("resize", b);
@@ -976,7 +976,7 @@ function nt({ children: t, content: e, position: r, ...l }) {
       ref: u,
       className: `ds-tooltip ds-tooltip--${p}`,
       role: "tooltip",
-      style: i,
+      style: c,
       children: e
     }
   );
@@ -1009,24 +1009,24 @@ function at({
   disabled: l = !1,
   label: n,
   id: a,
-  ...i
+  ...c
 }) {
-  const c = a || `toggle-${A.useId()}`, p = [
+  const i = a || `toggle-${A.useId()}`, p = [
     "ds-toggle",
     `ds-toggle--${r}`,
     l && "ds-toggle--disabled"
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s.jsxs("label", { className: p, htmlFor: c, children: [
+  return /* @__PURE__ */ s.jsxs("label", { className: p, htmlFor: i, children: [
     /* @__PURE__ */ s.jsx(
       "input",
       {
         type: "checkbox",
-        id: c,
+        id: i,
         className: "ds-toggle__input",
         checked: t,
         onChange: (f) => e == null ? void 0 : e(f.target.checked),
         disabled: l,
-        ...i
+        ...c
       }
     ),
     /* @__PURE__ */ s.jsx("span", { className: "ds-toggle__track", children: /* @__PURE__ */ s.jsx("span", { className: "ds-toggle__thumb" }) }),
@@ -1040,24 +1040,24 @@ function ot({
   disabled: l = !1,
   label: n,
   id: a,
-  ...i
+  ...c
 }) {
-  const c = a || `checkbox-${A.useId()}`, p = [
+  const i = a || `checkbox-${A.useId()}`, p = [
     "ds-checkbox",
     `ds-checkbox--${r}`,
     l && "ds-checkbox--disabled"
   ].filter(Boolean).join(" "), f = r === "xs" ? 10 : r === "small" ? 14 : r === "large" ? 20 : 16;
-  return /* @__PURE__ */ s.jsxs("label", { className: p, htmlFor: c, children: [
+  return /* @__PURE__ */ s.jsxs("label", { className: p, htmlFor: i, children: [
     /* @__PURE__ */ s.jsx(
       "input",
       {
         type: "checkbox",
-        id: c,
+        id: i,
         className: "ds-checkbox__input",
         checked: t,
         onChange: (d) => e == null ? void 0 : e(d.target.checked),
         disabled: l,
-        ...i
+        ...c
       }
     ),
     /* @__PURE__ */ s.jsx("span", { className: "ds-checkbox__box", children: t && /* @__PURE__ */ s.jsx(
@@ -1078,11 +1078,11 @@ function lt({
   disabled: l = !1,
   label: n,
   name: a,
-  value: i,
-  id: c,
+  value: c,
+  id: i,
   ...p
 }) {
-  const f = c || `radio-${A.useId()}`, d = [
+  const f = i || `radio-${A.useId()}`, d = [
     "ds-radio",
     `ds-radio--${r}`,
     l && "ds-radio--disabled"
@@ -1098,7 +1098,7 @@ function lt({
         onChange: (u) => e == null ? void 0 : e(u.target.checked),
         disabled: l,
         name: a,
-        value: i,
+        value: c,
         ...p
       }
     ),
@@ -1128,7 +1128,7 @@ function it({ width: t, height: e, shape: r = "rect", className: l = "", style:
     }
   );
 }
-function Se(t) {
+function ge(t) {
   let e = 2166136261;
   for (let r = 0; r < t.length; r++)
     e ^= t.charCodeAt(r), e = Math.imul(e, 16777619) >>> 0;
@@ -1139,15 +1139,15 @@ function Ie(t) {
   const e = t.trim().split(/\s+/);
   return e.length >= 2 ? (e[0][0] + e[1][0]).toUpperCase() : t[0].toUpperCase();
 }
-function dt({ seed: t, icon: e, src: r, size: l = 32, className: n = "", style: a = {}, ...i }) {
-  const c = Se(t ?? ""), [p, f] = T(!1), d = e ?? /* @__PURE__ */ s.jsx("span", { className: "ds-avatar__initials", children: Ie(t) });
+function dt({ seed: t, icon: e, src: r, size: l = 32, className: n = "", style: a = {}, ...c }) {
+  const i = ge(t ?? ""), [p, f] = T(!1), d = e ?? /* @__PURE__ */ s.jsx("span", { className: "ds-avatar__initials", children: Ie(t) });
   return /* @__PURE__ */ s.jsx(
     "div",
     {
       className: ["ds-avatar", n].filter(Boolean).join(" "),
-      style: { width: l, height: l, "--ds-avatar-h": c, ...a },
+      style: { width: l, height: l, "--ds-avatar-h": i, ...a },
       "aria-hidden": "true",
-      ...i,
+      ...c,
       children: r && !p ? /* @__PURE__ */ s.jsx("img", { src: r, alt: "", onError: () => f(!0) }) : d
     }
   );
@@ -1159,9 +1159,9 @@ function ut({
   maxHeight: l,
   className: n = "",
   style: a = {},
-  ...i
+  ...c
 }) {
-  const c = {
+  const i = {
     ...l ? { maxHeight: l } : {},
     ...r !== void 0 ? { "--ds-table-sticky-top": typeof r == "number" ? `${r}px` : r } : {},
     ...a
@@ -1170,12 +1170,12 @@ function ut({
     "div",
     {
       className: ["ds-table-wrap", l ? "ds-table-wrap--scroll" : ""].filter(Boolean).join(" "),
-      style: c,
+      style: i,
       children: /* @__PURE__ */ s.jsx(
         "table",
         {
           className: ["ds-table", `ds-table--${e}`, n].filter(Boolean).join(" "),
-          ...i,
+          ...c,
           children: t
         }
       )
@@ -1188,23 +1188,27 @@ function ft({ children: t, ...e }) {
 function mt({ children: t, ...e }) {
   return /* @__PURE__ */ s.jsx("tbody", { ...e, children: t });
 }
-function pt({ children: t, interactive: e, selected: r, className: l = "", onClick: n, ...a }) {
+function pt({ children: t, interactive: e, selected: r, subheader: l, className: n = "", onClick: a, ...c }) {
   return /* @__PURE__ */ s.jsx(
     "tr",
     {
       className: [
         "ds-table-row",
-        e || n ? "ds-table-row--interactive" : "",
+        e || a ? "ds-table-row--interactive" : "",
         r ? "ds-table-row--selected" : "",
-        l
+        l ? "ds-table-row--subheader" : "",
+        n
       ].filter(Boolean).join(" "),
-      onClick: n,
-      ...a,
+      onClick: a,
+      ...c,
       children: t
     }
   );
 }
-function bt({ children: t, align: e = "left", sortDir: r, onSort: l, width: n, className: a = "", style: i = {}, ...c }) {
+function bt({ children: t, colSpan: e = 999, ...r }) {
+  return /* @__PURE__ */ s.jsx("tr", { className: "ds-table-row ds-table-row--subheader", ...r, children: /* @__PURE__ */ s.jsx("td", { colSpan: e, children: t }) });
+}
+function ht({ children: t, align: e = "left", sortDir: r, onSort: l, width: n, className: a = "", style: c = {}, ...i }) {
   const p = !!l || r !== void 0, f = r === "asc" ? we : r === "desc" ? K : Ne;
   return /* @__PURE__ */ s.jsx(
     "th",
@@ -1217,8 +1221,8 @@ function bt({ children: t, align: e = "left", sortDir: r, onSort: l, width: n, c
         a
       ].filter(Boolean).join(" "),
       onClick: l,
-      style: { width: n, ...i },
-      ...c,
+      style: { width: n, ...c },
+      ...i,
       children: p ? /* @__PURE__ */ s.jsxs("span", { className: "ds-th__inner", children: [
         t,
         /* @__PURE__ */ s.jsx("span", { className: "ds-th__sort-icon", children: /* @__PURE__ */ s.jsx(f, { size: 11, strokeWidth: 2.5 }) })
@@ -1226,7 +1230,7 @@ function bt({ children: t, align: e = "left", sortDir: r, onSort: l, width: n, c
     }
   );
 }
-function ht({ children: t, align: e = "left", secondary: r, muted: l, truncate: n, nowrap: a, className: i = "", ...c }) {
+function xt({ children: t, align: e = "left", secondary: r, muted: l, truncate: n, nowrap: a, className: c = "", ...i }) {
   return /* @__PURE__ */ s.jsx(
     "td",
     {
@@ -1237,27 +1241,27 @@ function ht({ children: t, align: e = "left", secondary: r, muted: l, truncate:
         l ? "ds-table-cell--muted" : "",
         n ? "ds-table-cell--truncate" : "",
         a ? "ds-table-cell--nowrap" : "",
-        i
+        c
       ].filter(Boolean).join(" "),
-      ...c,
+      ...i,
       children: t
     }
   );
 }
-function xt({
+function vt({
   icon: t,
   title: e,
   description: r,
   action: l,
   size: n = "m",
   className: a = "",
-  ...i
+  ...c
 }) {
   return /* @__PURE__ */ s.jsxs(
     "div",
     {
       className: ["ds-empty-state", `ds-empty-state--${n}`, a].filter(Boolean).join(" "),
-      ...i,
+      ...c,
       children: [
         t && /* @__PURE__ */ s.jsx("div", { className: "ds-empty-state__icon", children: t }),
         /* @__PURE__ */ s.jsx("div", { className: "ds-empty-state__title", children: e }),
@@ -1267,15 +1271,15 @@ function xt({
     }
   );
 }
-function vt({
+function jt({
   trigger: t,
   items: e = [],
   open: r,
   onOpenChange: l,
   align: n = "left",
   className: a = "",
-  style: i,
-  ...c
+  style: c,
+  ...i
 }) {
   const [p, f] = T(!1), d = r !== void 0, u = d ? r : p, x = L(null), b = L(null), [j, v] = T({}), k = () => {
     d ? l == null || l(!1) : f(!1);
@@ -1307,7 +1311,7 @@ function vt({
       document.removeEventListener("mousedown", m), document.removeEventListener("keydown", _);
     };
   }, [u]);
-  const S = u && /* @__PURE__ */ s.jsx(
+  const g = u && /* @__PURE__ */ s.jsx(
     "div",
     {
       ref: b,
@@ -1350,11 +1354,11 @@ function vt({
     {
       ref: x,
       className: ["ds-dropdown", a].filter(Boolean).join(" "),
-      style: i,
-      ...c,
+      style: c,
+      ...i,
       children: [
         /* @__PURE__ */ s.jsx("div", { className: "ds-dropdown__trigger", onClick: $, children: t }),
-        typeof document < "u" && J.createPortal(S, document.body)
+        typeof document < "u" && J.createPortal(g, document.body)
       ]
     }
   );
@@ -1376,7 +1380,7 @@ function Ae(t) {
 function Pe(t) {
   V = V.filter((e) => e.id !== t), he();
 }
-function jt() {
+function _t() {
   const t = (e, r = {}) => {
     Ae({
       id: `${Date.now()}-${Math.random()}`,
@@ -1394,7 +1398,7 @@ function Oe({ data: t, onDismiss: e }) {
   function a() {
     l(!1), setTimeout(() => e(t.id), 250);
   }
-  const i = ue[t.type] ?? ue.default;
+  const c = ue[t.type] ?? ue.default;
   return /* @__PURE__ */ s.jsxs(
     "div",
     {
@@ -1406,7 +1410,7 @@ function Oe({ data: t, onDismiss: e }) {
       role: t.type === "error" ? "alert" : "status",
       "aria-live": "polite",
       children: [
-        /* @__PURE__ */ s.jsx("div", { className: "ds-toast__icon", children: /* @__PURE__ */ s.jsx(i, { size: g[3], strokeWidth: 1.5 }) }),
+        /* @__PURE__ */ s.jsx("div", { className: "ds-toast__icon", children: /* @__PURE__ */ s.jsx(c, { size: S[3], strokeWidth: 1.5 }) }),
         /* @__PURE__ */ s.jsx("span", { className: "ds-toast__message", children: t.message }),
         /* @__PURE__ */ s.jsx(
           "button",
@@ -1414,14 +1418,14 @@ function Oe({ data: t, onDismiss: e }) {
             className: "ds-toast__close",
             onClick: a,
             "aria-label": "Закрыть",
-            children: /* @__PURE__ */ s.jsx(se, { size: g[3], strokeWidth: 1.5 })
+            children: /* @__PURE__ */ s.jsx(se, { size: S[3], strokeWidth: 1.5 })
           }
         )
       ]
     }
   );
 }
-function _t({ position: t = "bottom-right" }) {
+function wt({ position: t = "bottom-right" }) {
   const [e, r] = T(() => [...V]);
   return B(() => (te.add(r), () => te.delete(r)), []), !e.length || typeof document > "u" ? null : J.createPortal(
     /* @__PURE__ */ s.jsx("div", { className: ["ds-toast-container", `ds-toast-container--${t}`].join(" "), children: e.map((l) => /* @__PURE__ */ s.jsx(Oe, { data: l, onDismiss: Pe }, l.id)) }),
@@ -1438,8 +1442,8 @@ export {
   ot as Checkbox,
   Qe as Code,
   Re as CodeAccordion,
-  vt as Dropdown,
-  xt as EmptyState,
+  jt as Dropdown,
+  vt as EmptyState,
   Ve as H1,
   Ue as H2,
   He as H3,
@@ -1461,13 +1465,14 @@ export {
   mt as TableBody,
   ft as TableHead,
   pt as TableRow,
+  bt as TableSubheaderRow,
   tt as Tabs,
-  ht as Td,
+  xt as Td,
   Fe as Textarea,
-  bt as Th,
-  _t as ToastContainer,
+  ht as Th,
+  wt as ToastContainer,
   at as Toggle,
   nt as Tooltip,
-  g as iconSizes,
-  jt as useToast
+  S as iconSizes,
+  _t as useToast
 };