@donkit-ai/design-system 0.3.5 → 0.4.2

package/dist/index.es.js

@@ -0,0 +1,1105 @@
+import $, { useState as P, useRef as F, useEffect as M } from "react";
+import { ChevronDown as G, Minus as ce, Plus as le, XCircle as ie, AlertTriangle as de, CheckCircle as ue, Info as fe, X as re, Check as pe } from "lucide-react";
+const T = {
+  xs: 16,
+  s: 20,
+  m: 24,
+  l: 28,
+  xl: 48
+};
+var q = { exports: {} }, B = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var ee;
+function me() {
+  if (ee) return B;
+  ee = 1;
+  var o = Symbol.for("react.transitional.element"), s = 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) {
+      a = {};
+      for (var c in n)
+        c !== "key" && (a[c] = n[c]);
+    } else a = n;
+    return n = a.ref, {
+      $$typeof: o,
+      type: l,
+      key: i,
+      ref: n !== void 0 ? n : null,
+      props: a
+    };
+  }
+  return B.Fragment = s, B.jsx = r, B.jsxs = r, B;
+}
+var L = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var te;
+function xe() {
+  return te || (te = 1, process.env.NODE_ENV !== "production" && function() {
+    function o(t) {
+      if (t == null) return null;
+      if (typeof t == "function")
+        return t.$$typeof === ne ? null : t.displayName || t.name || null;
+      if (typeof t == "string") return t;
+      switch (t) {
+        case h:
+          return "Fragment";
+        case g:
+          return "Profiler";
+        case v:
+          return "StrictMode";
+        case y:
+          return "Suspense";
+        case O:
+          return "SuspenseList";
+        case D:
+          return "Activity";
+      }
+      if (typeof t == "object")
+        switch (typeof t.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), t.$$typeof) {
+          case E:
+            return "Portal";
+          case R:
+            return t.displayName || "Context";
+          case k:
+            return (t._context.displayName || "Context") + ".Consumer";
+          case I:
+            var f = t.render;
+            return t = t.displayName, t || (t = f.displayName || f.name || "", t = t !== "" ? "ForwardRef(" + t + ")" : "ForwardRef"), t;
+          case S:
+            return f = t.displayName || null, f !== null ? f : o(t.type) || "Memo";
+          case A:
+            f = t._payload, t = t._init;
+            try {
+              return o(t(f));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function s(t) {
+      return "" + t;
+    }
+    function r(t) {
+      try {
+        s(t);
+        var f = !1;
+      } catch {
+        f = !0;
+      }
+      if (f) {
+        f = console;
+        var j = f.error, N = typeof Symbol == "function" && Symbol.toStringTag && t[Symbol.toStringTag] || t.constructor.name || "Object";
+        return j.call(
+          f,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          N
+        ), s(t);
+      }
+    }
+    function l(t) {
+      if (t === h) return "<>";
+      if (typeof t == "object" && t !== null && t.$$typeof === A)
+        return "<...>";
+      try {
+        var f = o(t);
+        return f ? "<" + f + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function n() {
+      var t = V.A;
+      return t === null ? null : t.getOwner();
+    }
+    function a() {
+      return Error("react-stack-top-frame");
+    }
+    function i(t) {
+      if (X.call(t, "key")) {
+        var f = Object.getOwnPropertyDescriptor(t, "key").get;
+        if (f && f.isReactWarning) return !1;
+      }
+      return t.key !== void 0;
+    }
+    function c(t, f) {
+      function j() {
+        J || (J = !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)",
+          f
+        ));
+      }
+      j.isReactWarning = !0, Object.defineProperty(t, "key", {
+        get: j,
+        configurable: !0
+      });
+    }
+    function m() {
+      var t = o(this.type);
+      return K[t] || (K[t] = !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."
+      )), t = this.props.ref, t !== void 0 ? t : null;
+    }
+    function p(t, f, j, N, Y, z) {
+      var w = j.ref;
+      return t = {
+        $$typeof: _,
+        type: t,
+        key: f,
+        props: j,
+        _owner: N
+      }, (w !== void 0 ? w : null) !== null ? Object.defineProperty(t, "ref", {
+        enumerable: !1,
+        get: m
+      }) : Object.defineProperty(t, "ref", { enumerable: !1, value: null }), t._store = {}, Object.defineProperty(t._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(t, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(t, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: Y
+      }), Object.defineProperty(t, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: z
+      }), Object.freeze && (Object.freeze(t.props), Object.freeze(t)), t;
+    }
+    function d(t, f, j, N, Y, z) {
+      var w = f.children;
+      if (w !== void 0)
+        if (N)
+          if (ae(w)) {
+            for (N = 0; N < w.length; N++)
+              u(w[N]);
+            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 u(w);
+      if (X.call(f, "key")) {
+        w = o(t);
+        var W = Object.keys(f).filter(function(oe) {
+          return oe !== "key";
+        });
+        N = 0 < W.length ? "{key: someKey, " + W.join(": ..., ") + ": ...}" : "{key: someKey}", Q[w + N] || (W = 0 < W.length ? "{" + W.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} />`,
+          N,
+          w,
+          W,
+          w
+        ), Q[w + N] = !0);
+      }
+      if (w = null, j !== void 0 && (r(j), w = "" + j), i(f) && (r(f.key), w = "" + f.key), "key" in f) {
+        j = {};
+        for (var U in f)
+          U !== "key" && (j[U] = f[U]);
+      } else j = f;
+      return w && c(
+        j,
+        typeof t == "function" ? t.displayName || t.name || "Unknown" : t
+      ), p(
+        t,
+        w,
+        j,
+        n(),
+        Y,
+        z
+      );
+    }
+    function u(t) {
+      x(t) ? t._store && (t._store.validated = 1) : typeof t == "object" && t !== null && t.$$typeof === A && (t._payload.status === "fulfilled" ? x(t._payload.value) && t._payload.value._store && (t._payload.value._store.validated = 1) : t._store && (t._store.validated = 1));
+    }
+    function x(t) {
+      return typeof t == "object" && t !== null && t.$$typeof === _;
+    }
+    var b = $, _ = Symbol.for("react.transitional.element"), E = Symbol.for("react.portal"), h = Symbol.for("react.fragment"), v = Symbol.for("react.strict_mode"), g = Symbol.for("react.profiler"), k = Symbol.for("react.consumer"), R = Symbol.for("react.context"), I = Symbol.for("react.forward_ref"), y = Symbol.for("react.suspense"), O = Symbol.for("react.suspense_list"), S = Symbol.for("react.memo"), A = Symbol.for("react.lazy"), D = Symbol.for("react.activity"), ne = Symbol.for("react.client.reference"), V = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, X = Object.prototype.hasOwnProperty, ae = Array.isArray, H = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    b = {
+      react_stack_bottom_frame: function(t) {
+        return t();
+      }
+    };
+    var J, K = {}, Z = b.react_stack_bottom_frame.bind(
+      b,
+      a
+    )(), C = H(l(a)), Q = {};
+    L.Fragment = h, L.jsx = function(t, f, j) {
+      var N = 1e4 > V.recentlyCreatedOwnerStacks++;
+      return d(
+        t,
+        f,
+        j,
+        !1,
+        N ? Error("react-stack-top-frame") : Z,
+        N ? H(l(t)) : C
+      );
+    }, L.jsxs = function(t, f, j) {
+      var N = 1e4 > V.recentlyCreatedOwnerStacks++;
+      return d(
+        t,
+        f,
+        j,
+        !0,
+        N ? Error("react-stack-top-frame") : Z,
+        N ? H(l(t)) : C
+      );
+    };
+  }()), L;
+}
+process.env.NODE_ENV === "production" ? q.exports = me() : q.exports = xe();
+var e = q.exports;
+function be({
+  children: o,
+  variant: s = "primary",
+  size: r = "m",
+  fullWidth: l = !1,
+  icon: n,
+  disabled: a = !1,
+  onClick: i,
+  type: c = "button",
+  href: m,
+  "aria-label": p,
+  ...d
+}) {
+  const u = n && !o, x = [
+    "ds-button",
+    `ds-button--${s}`,
+    `ds-button--${r}`,
+    l && "ds-button--full",
+    u && "ds-button--icon-only"
+  ].filter(Boolean).join(" "), b = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    n && !u && /* @__PURE__ */ e.jsx("span", { className: "ds-button__icon", "aria-hidden": "true", children: n }),
+    o,
+    u && /* @__PURE__ */ e.jsx("span", { className: "ds-button__icon", "aria-hidden": "true", children: n })
+  ] });
+  if (m) {
+    const _ = (E) => {
+      if (a) {
+        E.preventDefault();
+        return;
+      }
+      E.metaKey || E.ctrlKey || E.button === 1 || (E.preventDefault(), i == null || i(E));
+    };
+    return /* @__PURE__ */ e.jsx(
+      "a",
+      {
+        className: x,
+        href: a ? void 0 : m,
+        onClick: _,
+        "aria-label": p,
+        "aria-disabled": a ? "true" : void 0,
+        ...d,
+        children: b
+      }
+    );
+  }
+  return /* @__PURE__ */ e.jsx(
+    "button",
+    {
+      type: c,
+      className: x,
+      disabled: a,
+      onClick: i,
+      "aria-label": p,
+      ...d,
+      children: b
+    }
+  );
+}
+function Ne({
+  label: o,
+  error: s,
+  hint: r,
+  fullWidth: l = !0,
+  icon: n,
+  iconRight: a,
+  onIconRightClick: i,
+  size: c = "m",
+  disabled: m,
+  id: p,
+  ...d
+}) {
+  const u = p || `input-${$.useId()}`, x = r ? `${u}-hint` : void 0, b = s ? `${u}-error` : void 0, _ = b || x;
+  return /* @__PURE__ */ e.jsxs("div", { className: `ds-input-wrapper ${l ? "ds-input-wrapper--full" : ""} ${m ? "ds-input-wrapper--disabled" : ""}`, children: [
+    o && /* @__PURE__ */ e.jsx("label", { className: "ds-input-label", htmlFor: u, children: o }),
+    /* @__PURE__ */ e.jsxs("div", { className: "ds-input-container", children: [
+      n && /* @__PURE__ */ e.jsx("span", { className: `ds-input-icon ds-input-icon--${c}`, "aria-hidden": "true", children: n }),
+      /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          id: u,
+          className: `ds-input ds-input--${c} ${n ? "ds-input--with-icon" : ""} ${a ? "ds-input--with-icon-right" : ""} ${s ? "ds-input--error" : ""}`,
+          disabled: m,
+          "aria-invalid": s ? "true" : "false",
+          "aria-describedby": _,
+          ...d
+        }
+      ),
+      a && /* @__PURE__ */ e.jsx(
+        "button",
+        {
+          type: "button",
+          className: `ds-input-icon-right ds-input-icon-right--${c}`,
+          onClick: i,
+          tabIndex: -1,
+          "aria-label": "Toggle visibility",
+          children: a
+        }
+      )
+    ] }),
+    r && !s && /* @__PURE__ */ e.jsx("span", { id: x, className: "ds-input-hint", children: r }),
+    s && /* @__PURE__ */ e.jsx("span", { id: b, className: "ds-input-error", role: "alert", children: s })
+  ] });
+}
+function we({
+  label: o,
+  error: s,
+  hint: r,
+  fullWidth: l = !0,
+  size: n = "m",
+  disabled: a,
+  id: i,
+  resize: c = !0,
+  rows: m = 3,
+  ...p
+}) {
+  const d = i || `textarea-${$.useId()}`, u = r ? `${d}-hint` : void 0, x = s ? `${d}-error` : void 0, b = x || u;
+  return /* @__PURE__ */ e.jsxs("div", { className: `ds-textarea-wrapper ${l ? "ds-textarea-wrapper--full" : ""} ${a ? "ds-textarea-wrapper--disabled" : ""}`, children: [
+    o && /* @__PURE__ */ e.jsx("label", { className: "ds-textarea-label", htmlFor: d, children: o }),
+    /* @__PURE__ */ e.jsx(
+      "textarea",
+      {
+        id: d,
+        className: `ds-textarea ds-textarea--${n} ${s ? "ds-textarea--error" : ""} ${c ? "" : "ds-textarea--no-resize"}`,
+        disabled: a,
+        "aria-invalid": s ? "true" : "false",
+        "aria-describedby": b,
+        rows: m,
+        ...p
+      }
+    ),
+    r && !s && /* @__PURE__ */ e.jsx("span", { id: u, className: "ds-textarea-hint", children: r }),
+    s && /* @__PURE__ */ e.jsx("span", { id: x, className: "ds-textarea-error", role: "alert", children: s })
+  ] });
+}
+function Ee({
+  label: o,
+  value: s,
+  onChange: r,
+  options: l = [],
+  placeholder: n = "Select option",
+  error: a,
+  fullWidth: i = !0,
+  size: c = "m",
+  disabled: m = !1,
+  id: p,
+  ...d
+}) {
+  const [u, x] = P(!1), [b, _] = P("down"), E = F(null), h = F(null), v = p || `select-${$.useId()}`, g = `${v}-label`, k = a ? `${v}-error` : void 0;
+  M(() => {
+    const y = (O) => {
+      E.current && !E.current.contains(O.target) && x(!1);
+    };
+    return document.addEventListener("mousedown", y), () => document.removeEventListener("mousedown", y);
+  }, []), M(() => {
+    if (u && E.current) {
+      const y = E.current.getBoundingClientRect(), S = window.innerHeight - y.bottom, A = y.top;
+      S < 300 && A > S ? _("up") : _("down");
+    }
+  }, [u]);
+  const R = l.find((y) => y.value === s), I = c === "xs" ? T.xs : c === "small" ? T.s : T.m;
+  return /* @__PURE__ */ e.jsxs("div", { className: `ds-select-wrapper ${i ? "ds-select-wrapper--full" : ""} ${m ? "ds-select-wrapper--disabled" : ""}`, children: [
+    o && /* @__PURE__ */ e.jsx("label", { id: g, className: "ds-select-label", children: o }),
+    /* @__PURE__ */ e.jsxs("div", { className: "ds-select-container", ref: E, children: [
+      /* @__PURE__ */ e.jsxs(
+        "button",
+        {
+          type: "button",
+          id: v,
+          role: "combobox",
+          "aria-haspopup": "listbox",
+          "aria-expanded": u,
+          "aria-labelledby": o ? g : void 0,
+          "aria-invalid": a ? "true" : "false",
+          "aria-describedby": k,
+          className: `ds-select-trigger ds-select-trigger--${c} ${a ? "ds-select-trigger--error" : ""}`,
+          onClick: () => !m && x(!u),
+          disabled: m,
+          ...d,
+          children: [
+            /* @__PURE__ */ e.jsx("span", { className: R ? "" : "ds-select-placeholder", children: (R == null ? void 0 : R.label) || n }),
+            /* @__PURE__ */ e.jsx(
+              G,
+              {
+                size: I,
+                strokeWidth: 1.5,
+                className: `ds-select-icon ${u && b === "down" ? "ds-select-icon--open" : ""} ${u && b === "up" ? "ds-select-icon--up" : ""}`,
+                "aria-hidden": "true"
+              }
+            )
+          ]
+        }
+      ),
+      u && /* @__PURE__ */ e.jsx(
+        "div",
+        {
+          ref: h,
+          role: "listbox",
+          "aria-labelledby": o ? g : void 0,
+          className: `ds-select-dropdown ds-select-dropdown--${c} ds-select-dropdown--${b}`,
+          children: l.map((y) => /* @__PURE__ */ e.jsx(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": s === y.value,
+              className: `ds-select-option ds-select-option--${c} ${s === y.value ? "ds-select-option--selected" : ""}`,
+              onClick: () => {
+                r == null || r(y.value), x(!1);
+              },
+              children: y.label
+            },
+            y.value
+          ))
+        }
+      )
+    ] }),
+    a && /* @__PURE__ */ e.jsx("span", { id: k, className: "ds-select-error", role: "alert", children: a })
+  ] });
+}
+function ye({
+  label: o,
+  value: s = 0,
+  onChange: r,
+  min: l = 0,
+  max: n = 100,
+  step: a = 1,
+  size: i = "m",
+  disabled: c = !1,
+  hint: m,
+  error: p,
+  ...d
+}) {
+  const u = () => {
+    if (c) return;
+    const v = Math.min(Number(s) + a, n);
+    r == null || r(v);
+  }, x = () => {
+    if (c) return;
+    const v = Math.max(Number(s) - a, l);
+    r == null || r(v);
+  }, b = (v) => {
+    if (c) return;
+    const g = v.target.value;
+    if (g === "") {
+      r == null || r(l);
+      return;
+    }
+    const k = Number(g);
+    if (!isNaN(k)) {
+      const R = Math.min(Math.max(k, l), n);
+      r == null || r(R);
+    }
+  }, _ = [
+    "ds-stepper-wrapper",
+    c && "ds-stepper-wrapper--disabled",
+    p && "ds-stepper-wrapper--error"
+  ].filter(Boolean).join(" "), E = [
+    "ds-stepper",
+    `ds-stepper--${i}`,
+    c && "ds-stepper--disabled"
+  ].filter(Boolean).join(" "), h = i === "xs" ? T.xs : i === "small" ? T.s : T.m;
+  return /* @__PURE__ */ e.jsxs("div", { className: _, children: [
+    o && /* @__PURE__ */ e.jsx("label", { className: "ds-stepper-label", children: o }),
+    /* @__PURE__ */ e.jsxs("div", { className: E, children: [
+      /* @__PURE__ */ e.jsx(
+        "button",
+        {
+          type: "button",
+          className: "ds-stepper-button ds-stepper-button--minus",
+          onClick: x,
+          disabled: c || s <= l,
+          "aria-label": "Decrease",
+          children: /* @__PURE__ */ e.jsx(ce, { size: h, strokeWidth: 1.5 })
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          type: "number",
+          className: "ds-stepper-input",
+          value: s,
+          onChange: b,
+          min: l,
+          max: n,
+          step: a,
+          disabled: c,
+          ...d
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        "button",
+        {
+          type: "button",
+          className: "ds-stepper-button ds-stepper-button--plus",
+          onClick: u,
+          disabled: c || s >= n,
+          "aria-label": "Increase",
+          children: /* @__PURE__ */ e.jsx(le, { size: h, strokeWidth: 1.5 })
+        }
+      )
+    ] }),
+    m && !p && /* @__PURE__ */ e.jsx("div", { className: "ds-stepper-hint", children: m }),
+    p && /* @__PURE__ */ e.jsx("div", { className: "ds-stepper-error", children: p })
+  ] });
+}
+function Re({
+  children: o,
+  padding: s = "m",
+  variant: r = "info",
+  hover: l = !1,
+  // deprecated, use variant="interactive"
+  onClick: n,
+  href: a,
+  disabled: i = !1,
+  ...c
+}) {
+  const p = (l ? "interactive" : r) === "interactive" || n || a, d = [
+    "ds-card",
+    `ds-card--${s}`,
+    p && "ds-card--interactive"
+  ].filter(Boolean).join(" ");
+  if (a) {
+    const b = (_) => {
+      if (i) {
+        _.preventDefault();
+        return;
+      }
+      _.metaKey || _.ctrlKey || _.button === 1 || (_.preventDefault(), n == null || n(_));
+    };
+    return /* @__PURE__ */ e.jsx(
+      "a",
+      {
+        className: d,
+        href: i ? void 0 : a,
+        onClick: b,
+        "aria-disabled": i ? "true" : void 0,
+        ...c,
+        children: o
+      }
+    );
+  }
+  const u = p && n ? "button" : "div", x = p && n ? {
+    type: "button",
+    onClick: n,
+    disabled: i
+  } : {};
+  return /* @__PURE__ */ e.jsx(
+    u,
+    {
+      className: d,
+      role: p && !n ? "article" : void 0,
+      ...x,
+      ...c,
+      children: o
+    }
+  );
+}
+function ge({ children: o, ...s }) {
+  return /* @__PURE__ */ e.jsx("h1", { className: "ds-h1", ...s, children: o });
+}
+function ke({ children: o, ...s }) {
+  return /* @__PURE__ */ e.jsx("h2", { className: "ds-h2", ...s, children: o });
+}
+function $e({ children: o, ...s }) {
+  return /* @__PURE__ */ e.jsx("h3", { className: "ds-h3", ...s, children: o });
+}
+function Te({ children: o, ...s }) {
+  return /* @__PURE__ */ e.jsx("h4", { className: "ds-h4", ...s, children: o });
+}
+function Oe({ children: o, secondary: s = !1, ...r }) {
+  return /* @__PURE__ */ e.jsx("p", { className: `ds-p1 ${s ? "ds-p1--secondary" : ""}`, ...r, children: o });
+}
+function Ae({ children: o, secondary: s = !1, ...r }) {
+  return /* @__PURE__ */ e.jsx("p", { className: `ds-p2 ${s ? "ds-p2--secondary" : ""}`, ...r, children: o });
+}
+function Ie({ children: o, secondary: s = !1, ...r }) {
+  return /* @__PURE__ */ e.jsx("p", { className: `ds-p3 ${s ? "ds-p3--secondary" : ""}`, ...r, children: o });
+}
+function Se({
+  children: o,
+  variant: s = "default",
+  size: r = "m",
+  role: l,
+  ...n
+}) {
+  const a = [
+    "ds-badge",
+    `ds-badge--${s}`,
+    `ds-badge--${r}`
+  ].filter(Boolean).join(" "), i = l || (["info", "success", "warning", "error"].includes(s) ? "status" : void 0);
+  return /* @__PURE__ */ e.jsx("span", { className: a, role: i, ...n, children: o });
+}
+const he = {
+  info: fe,
+  success: ue,
+  warning: de,
+  error: ie
+};
+function Pe({
+  children: o,
+  variant: s = "info",
+  title: r,
+  onClose: l,
+  role: n,
+  ...a
+}) {
+  const i = he[s], c = n || (s === "error" ? "alert" : "status");
+  return /* @__PURE__ */ e.jsxs("div", { className: `ds-alert ds-alert--${s} ${r ? "" : "ds-alert--no-title"}`, role: c, ...a, children: [
+    i && /* @__PURE__ */ e.jsx("div", { className: "ds-alert__icon", children: /* @__PURE__ */ e.jsx(i, { size: T.m, strokeWidth: 1.5 }) }),
+    /* @__PURE__ */ e.jsxs("div", { className: "ds-alert__content", children: [
+      r && /* @__PURE__ */ e.jsx("div", { className: "ds-alert__title", children: r }),
+      o && /* @__PURE__ */ e.jsx("div", { className: "ds-alert__message", children: o })
+    ] }),
+    l && /* @__PURE__ */ e.jsx(
+      "button",
+      {
+        type: "button",
+        className: "ds-alert__close",
+        onClick: l,
+        "aria-label": "Close alert",
+        children: /* @__PURE__ */ e.jsx(re, { size: T.m, strokeWidth: 1.5 })
+      }
+    )
+  ] });
+}
+function De({
+  children: o,
+  title: s,
+  onClose: r,
+  size: l = "m",
+  ...n
+}) {
+  const a = F(null), i = $.useId();
+  M(() => {
+    const d = (x) => {
+      x.key === "Escape" && (r == null || r());
+    }, u = (x) => {
+      a.current && !a.current.contains(x.target) && (r == null || r());
+    };
+    return document.addEventListener("keydown", d), document.addEventListener("mousedown", u), () => {
+      document.removeEventListener("keydown", d), document.removeEventListener("mousedown", u);
+    };
+  }, [r]);
+  const c = $.Children.toArray(o), m = c.find((d) => (d == null ? void 0 : d.type) === se), p = c.filter((d) => (d == null ? void 0 : d.type) !== se);
+  return /* @__PURE__ */ e.jsx("div", { className: "ds-modal-overlay", ...n, children: /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      className: `ds-modal ds-modal--${l}`,
+      ref: a,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": s ? i : void 0,
+      children: [
+        (s || r) && /* @__PURE__ */ e.jsxs("div", { className: "ds-modal__header", children: [
+          s && /* @__PURE__ */ e.jsx("h3", { id: i, className: "ds-modal__title", children: s }),
+          r && /* @__PURE__ */ e.jsx(
+            be,
+            {
+              variant: "ghost",
+              size: "small",
+              icon: /* @__PURE__ */ e.jsx(re, { size: T.s, strokeWidth: 1.5 }),
+              onClick: r,
+              "aria-label": "Close modal"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e.jsx("div", { className: "ds-modal__body", children: p }),
+        m
+      ]
+    }
+  ) });
+}
+function se({ children: o }) {
+  return /* @__PURE__ */ e.jsx("div", { className: "ds-modal__footer", children: o });
+}
+function je({
+  children: o,
+  title: s = "Code",
+  defaultExpanded: r = !1,
+  padding: l = "s",
+  ...n
+}) {
+  const [a, i] = P(r), c = [
+    "ds-code-accordion",
+    `ds-code-accordion--${l}`
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e.jsxs("div", { className: c, children: [
+    /* @__PURE__ */ e.jsxs(
+      "button",
+      {
+        type: "button",
+        className: "ds-code-accordion__header",
+        onClick: () => i(!a),
+        "aria-expanded": a,
+        children: [
+          /* @__PURE__ */ e.jsx("span", { className: "ds-code-accordion__title", children: s }),
+          /* @__PURE__ */ e.jsx(
+            G,
+            {
+              size: T.s,
+              strokeWidth: 1.5,
+              className: `ds-code-accordion__icon ${a ? "ds-code-accordion__icon--expanded" : ""}`
+            }
+          )
+        ]
+      }
+    ),
+    a && /* @__PURE__ */ e.jsx("pre", { className: "ds-code-accordion__content", ...n, children: /* @__PURE__ */ e.jsx("code", { children: o }) })
+  ] });
+}
+function We({ children: o, block: s = !1, collapsible: r = !1, title: l = "Code", defaultExpanded: n = !1, ...a }) {
+  return s ? r ? /* @__PURE__ */ e.jsx(je, { title: l, defaultExpanded: n, ...a, children: o }) : /* @__PURE__ */ e.jsx("pre", { className: "ds-code-block", ...a, children: /* @__PURE__ */ e.jsx("code", { children: o }) }) : /* @__PURE__ */ e.jsx("code", { className: "ds-code-inline", ...a, children: o });
+}
+function Fe({ href: o, children: s, onClick: r, target: l, rel: n, ...a }) {
+  const c = l === "_blank" ? n ? `${n} noopener noreferrer` : "noopener noreferrer" : n;
+  return /* @__PURE__ */ e.jsx(
+    "a",
+    {
+      href: o,
+      className: "ds-link",
+      onClick: r,
+      target: l,
+      rel: c,
+      ...a,
+      children: s
+    }
+  );
+}
+function Me({ children: o, size: s = "m", variant: r = "ghost", ...l }) {
+  return /* @__PURE__ */ e.jsx("div", { className: "ds-tabs", role: "tablist", ...l, children: $.Children.map(o, (n) => $.isValidElement(n) ? $.cloneElement(n, { size: s, variant: r }) : n) });
+}
+function Be({ children: o, selected: s = !1, onClick: r, size: l = "m", variant: n = "ghost", disabled: a = !1, icon: i, href: c, ...m }) {
+  const p = i && !o, d = [
+    "ds-tab",
+    `ds-tab--${l}`,
+    `ds-tab--${n}`,
+    s && "ds-tab--selected",
+    p && "ds-tab--icon-only"
+  ].filter(Boolean).join(" "), u = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    i && /* @__PURE__ */ e.jsx("span", { className: "ds-tab-icon", children: i }),
+    o
+  ] });
+  if (c) {
+    const x = (b) => {
+      if (a) {
+        b.preventDefault();
+        return;
+      }
+      b.metaKey || b.ctrlKey || b.button === 1 || (b.preventDefault(), r == null || r(b));
+    };
+    return /* @__PURE__ */ e.jsx(
+      "a",
+      {
+        role: "tab",
+        "aria-current": s ? "page" : void 0,
+        "aria-disabled": a ? "true" : void 0,
+        className: d,
+        href: a ? void 0 : c,
+        onClick: x,
+        ...m,
+        children: u
+      }
+    );
+  }
+  return /* @__PURE__ */ e.jsx(
+    "button",
+    {
+      role: "tab",
+      "aria-selected": s,
+      className: d,
+      onClick: r,
+      disabled: a,
+      ...m,
+      children: u
+    }
+  );
+}
+function Le({
+  children: o,
+  title: s,
+  defaultExpanded: r = !1,
+  padding: l = "m",
+  ...n
+}) {
+  const [a, i] = P(r), c = [
+    "ds-accordion",
+    `ds-accordion--${l}`
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e.jsxs("div", { className: c, ...n, children: [
+    /* @__PURE__ */ e.jsxs(
+      "button",
+      {
+        type: "button",
+        className: "ds-accordion__header",
+        onClick: () => i(!a),
+        "aria-expanded": a,
+        children: [
+          /* @__PURE__ */ e.jsx("span", { className: "ds-accordion__title", children: s }),
+          /* @__PURE__ */ e.jsx(
+            G,
+            {
+              size: T.s,
+              strokeWidth: 1.5,
+              className: `ds-accordion__icon ${a ? "ds-accordion__icon--expanded" : ""}`
+            }
+          )
+        ]
+      }
+    ),
+    a && /* @__PURE__ */ e.jsx("div", { className: "ds-accordion__content", children: o })
+  ] });
+}
+function Ye({
+  children: o,
+  content: s,
+  position: r,
+  ...l
+}) {
+  const [n, a] = P(!1), [i, c] = P(r || "top"), [m, p] = P({ x: 0, arrowOffset: 0 }), d = F(null), u = F(null), x = F(!1);
+  M(() => {
+    n && !r && d.current && u.current ? requestAnimationFrame(() => {
+      if (!d.current || !u.current) return;
+      const h = d.current.getBoundingClientRect(), v = u.current.getBoundingClientRect(), g = window.innerHeight, k = window.innerWidth, R = h.top, I = g - h.bottom, y = h.left, O = k - h.right, S = v.height, A = v.width;
+      if (R >= S + 8)
+        c("top");
+      else if (I >= S + 8)
+        c("bottom");
+      else if (O >= A + 8)
+        c("right");
+      else if (y >= A + 8)
+        c("left");
+      else {
+        const D = Math.max(R, I, y, O);
+        c(D === R ? "top" : D === I ? "bottom" : D === O ? "right" : "left");
+      }
+    }) : r && c(r);
+  }, [n, r]), M(() => {
+    n && u.current && d.current ? requestAnimationFrame(() => {
+      if (!u.current || !d.current) return;
+      const h = u.current.getBoundingClientRect(), v = window.innerWidth, g = 8;
+      let k = 0, R = 0;
+      (i === "top" || i === "bottom") && (h.right > v - g ? (k = v - g - h.right, R = -k) : h.left < g && (k = g - h.left, R = -k)), p({ x: k, arrowOffset: R });
+    }) : p({ x: 0, arrowOffset: 0 });
+  }, [n, i]), M(() => {
+    if (!n) return;
+    const h = (v) => {
+      d.current && !d.current.contains(v.target) && a(!1);
+    };
+    return document.addEventListener("touchstart", h), () => {
+      document.removeEventListener("touchstart", h);
+    };
+  }, [n]);
+  const b = () => {
+    x.current = !0, a((h) => !h);
+  }, _ = () => {
+    x.current || a(!0);
+  }, E = () => {
+    x.current || a(!1);
+  };
+  return s ? /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      ref: d,
+      className: "ds-tooltip-wrapper",
+      onMouseEnter: _,
+      onMouseLeave: E,
+      onTouchStart: b,
+      ...l,
+      children: [
+        o,
+        n && /* @__PURE__ */ e.jsx(
+          "div",
+          {
+            ref: u,
+            className: `ds-tooltip ds-tooltip--${i}`,
+            role: "tooltip",
+            style: {
+              "--tooltip-offset-x": `${m.x}px`,
+              "--arrow-offset": `${m.arrowOffset}px`
+            },
+            children: s
+          }
+        )
+      ]
+    }
+  ) : o;
+}
+function Ve({
+  checked: o = !1,
+  onChange: s,
+  size: r = "m",
+  disabled: l = !1,
+  label: n,
+  id: a,
+  ...i
+}) {
+  const c = a || `toggle-${$.useId()}`, m = [
+    "ds-toggle",
+    `ds-toggle--${r}`,
+    l && "ds-toggle--disabled"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e.jsxs("label", { className: m, htmlFor: c, children: [
+    /* @__PURE__ */ e.jsx(
+      "input",
+      {
+        type: "checkbox",
+        id: c,
+        className: "ds-toggle__input",
+        checked: o,
+        onChange: (p) => s == null ? void 0 : s(p.target.checked),
+        disabled: l,
+        ...i
+      }
+    ),
+    /* @__PURE__ */ e.jsx("span", { className: "ds-toggle__track", children: /* @__PURE__ */ e.jsx("span", { className: "ds-toggle__thumb" }) }),
+    n && /* @__PURE__ */ e.jsx("span", { className: "ds-toggle__label", children: n })
+  ] });
+}
+function He({
+  checked: o = !1,
+  onChange: s,
+  size: r = "m",
+  disabled: l = !1,
+  label: n,
+  id: a,
+  ...i
+}) {
+  const c = a || `checkbox-${$.useId()}`, m = [
+    "ds-checkbox",
+    `ds-checkbox--${r}`,
+    l && "ds-checkbox--disabled"
+  ].filter(Boolean).join(" "), p = r === "xs" ? 10 : r === "small" ? 14 : r === "large" ? 20 : 16;
+  return /* @__PURE__ */ e.jsxs("label", { className: m, htmlFor: c, children: [
+    /* @__PURE__ */ e.jsx(
+      "input",
+      {
+        type: "checkbox",
+        id: c,
+        className: "ds-checkbox__input",
+        checked: o,
+        onChange: (d) => s == null ? void 0 : s(d.target.checked),
+        disabled: l,
+        ...i
+      }
+    ),
+    /* @__PURE__ */ e.jsx("span", { className: "ds-checkbox__box", children: o && /* @__PURE__ */ e.jsx(
+      pe,
+      {
+        size: p,
+        strokeWidth: 2.5,
+        className: "ds-checkbox__icon"
+      }
+    ) }),
+    n && /* @__PURE__ */ e.jsx("span", { className: "ds-checkbox__label", children: n })
+  ] });
+}
+function ze({
+  checked: o = !1,
+  onChange: s,
+  size: r = "m",
+  disabled: l = !1,
+  label: n,
+  name: a,
+  value: i,
+  id: c,
+  ...m
+}) {
+  const p = c || `radio-${$.useId()}`, d = [
+    "ds-radio",
+    `ds-radio--${r}`,
+    l && "ds-radio--disabled"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e.jsxs("label", { className: d, htmlFor: p, children: [
+    /* @__PURE__ */ e.jsx(
+      "input",
+      {
+        type: "radio",
+        id: p,
+        className: "ds-radio__input",
+        checked: o,
+        onChange: (u) => s == null ? void 0 : s(u.target.checked),
+        disabled: l,
+        name: a,
+        value: i,
+        ...m
+      }
+    ),
+    /* @__PURE__ */ e.jsx("span", { className: "ds-radio__circle", children: /* @__PURE__ */ e.jsx("span", { className: "ds-radio__dot" }) }),
+    n && /* @__PURE__ */ e.jsx("span", { className: "ds-radio__label", children: n })
+  ] });
+}
+export {
+  Le as Accordion,
+  Pe as Alert,
+  Se as Badge,
+  be as Button,
+  Re as Card,
+  He as Checkbox,
+  We as Code,
+  je as CodeAccordion,
+  ge as H1,
+  ke as H2,
+  $e as H3,
+  Te as H4,
+  Ne as Input,
+  Fe as Link,
+  De as Modal,
+  se as ModalFooter,
+  Oe as P1,
+  Ae as P2,
+  Ie as P3,
+  ze as Radio,
+  Ee as Select,
+  ye as Stepper,
+  Be as Tab,
+  Me as Tabs,
+  we as Textarea,
+  Ve as Toggle,
+  Ye as Tooltip,
+  T as iconSizes
+};