@nice2dev/ui 1.0.22 → 1.0.24

package/dist/NiceTabs-Cx9DN6QD.js

@@ -0,0 +1,1657 @@
+import { jsxs as m, jsx as e, Fragment as Le } from "react/jsx-runtime";
+import { a as xe, Z as Re, _ as Ie, N as He, E as $e, z as Ue, k as Ve, Q as Te, F as qe, b as Ae, v as Ye, V as Je, c as Oe, d as We } from "./core-CT5vpy5U.js";
+import Ke, { forwardRef as Me, useCallback as ne, useMemo as oe, useState as ue, useRef as Fe, useLayoutEffect as ze, useEffect as en } from "react";
+import nn from "react-dom";
+const Pe = Me(
+  ({
+    label: c,
+    helperText: d,
+    error: t,
+    required: o,
+    disabled: n,
+    readOnly: i,
+    size: a = "md",
+    name: k,
+    id: p,
+    className: u,
+    style: h,
+    accessMode: S,
+    displayStyle: V,
+    variant: _,
+    value: x,
+    defaultValue: F,
+    onChange: f,
+    onBlur: Y,
+    onKeyDown: L,
+    placeholder: w,
+    type: D = "text",
+    maxLength: v,
+    prefix: R,
+    suffix: U,
+    clearable: I,
+    autoFocus: j,
+    submitOnEnter: $,
+    onSubmit: H,
+    showKeyboardHints: K,
+    labelPlacement: E,
+    errorPlacement: Z,
+    loading: re,
+    labelWidth: se,
+    controlWidth: G,
+    displayMode: P,
+    ...pe
+  }, b) => {
+    const N = xe(S, p), q = N === "hidden";
+    N === "disabled" && (n = !0), N === "readOnly" && (i = !0);
+    const { t: T } = Re(), M = Ie(p), W = He("input", V), ae = $e("input", V), fe = _ === "filled" ? "filled" : _ === "underlined" ? "underlined" : "", X = ne(() => f?.(""), [f]), Q = Ue({ enabled: P, readOnly: i, disabled: n }), de = Ve({
+      enabled: $,
+      onSubmit: H
+    }), ie = ne(
+      (g) => {
+        de(g), L?.(g);
+      },
+      [de, L]
+    ), r = oe(() => {
+      const g = [];
+      return $ && g.push({ key: "Enter", description: T("shortcuts.submit", "Submit") }), I && g.push({ key: "Escape", description: T("shortcuts.clear", "Clear") }), g;
+    }, [$, I, T]);
+    return q ? null : /* @__PURE__ */ m(
+      "div",
+      {
+        className: `nice-field nice-field--${a} ${E === "left" ? "nice-field--label-left" : ""} ${E === "inside" ? "nice-field--label-inside" : ""} ${re ? "nice-field--loading" : ""} ${u || ""}`,
+        style: {
+          ...h,
+          ...se != null && {
+            "--nice-field-label-width": typeof se == "number" ? `${se}px` : se
+          },
+          ...G != null && {
+            "--nice-field-control-width": typeof G == "number" ? `${G}px` : G
+          }
+        },
+        "aria-busy": re || void 0,
+        "data-floating": E === "inside" && x ? "true" : void 0,
+        children: [
+          c && E !== "inside" && /* @__PURE__ */ m(
+            "label",
+            {
+              htmlFor: M,
+              className: `nice-field__label ${o ? "nice-field__label--required" : ""}`,
+              children: [
+                c,
+                K && r.length > 0 && /* @__PURE__ */ e(Te, { shortcuts: r, size: "sm" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ m("div", { className: "nice-field__control", children: [
+            Q.isDisplay ? /* @__PURE__ */ e(
+              qe,
+              {
+                value: x ?? F ?? "",
+                placeholder: w,
+                disabled: n,
+                readOnly: i,
+                onActivate: Q.enterEdit,
+                ariaLabel: c
+              }
+            ) : /* @__PURE__ */ m(
+              "div",
+              {
+                className: `nice-input nice-input--${a} nice-input--ds-${fe || ae} ${t ? "nice-input--error" : ""} ${n ? "nice-input--disabled" : ""} ${i ? "nice-input--readonly" : ""}`,
+                style: _ ? void 0 : W,
+                children: [
+                  R && /* @__PURE__ */ e("span", { className: "nice-input__icon", children: R }),
+                  /* @__PURE__ */ e(
+                    "input",
+                    {
+                      ref: (g) => {
+                        typeof b == "function" ? b(g) : b && (b.current = g), Q.autoFocusRef(g);
+                      },
+                      id: M,
+                      className: "nice-input__native",
+                      type: D,
+                      name: k,
+                      value: x,
+                      defaultValue: F,
+                      placeholder: w,
+                      disabled: n || re,
+                      readOnly: i,
+                      maxLength: v,
+                      autoFocus: j,
+                      "aria-invalid": !!t,
+                      "aria-describedby": t ? `${M}-error` : d ? `${M}-helper` : void 0,
+                      onChange: (g) => f?.(g.target.value),
+                      onBlur: (g) => {
+                        P && Q.exitEdit(), Y?.(g);
+                      },
+                      onKeyDown: ie,
+                      ...pe
+                    }
+                  ),
+                  I && x && /* @__PURE__ */ e(
+                    "button",
+                    {
+                      type: "button",
+                      className: "nice-input__clear",
+                      onClick: X,
+                      "aria-label": T("controls.clear", "Clear"),
+                      children: "✕"
+                    }
+                  ),
+                  U && /* @__PURE__ */ e("span", { className: "nice-input__icon", children: U }),
+                  c && E === "inside" && /* @__PURE__ */ e(
+                    "label",
+                    {
+                      htmlFor: M,
+                      className: `nice-input__floating-label ${o ? "nice-input__floating-label--required" : ""}`,
+                      children: c
+                    }
+                  )
+                ]
+              }
+            ),
+            re && /* @__PURE__ */ e("span", { className: "nice-field__spinner", children: /* @__PURE__ */ e("span", { className: "nice-spinner nice-spinner--sm" }) }),
+            Z === "right" && t && /* @__PURE__ */ e("div", { id: `${M}-error`, className: "nice-field__error", role: "alert", children: t }),
+            Z === "right" && !t && d && /* @__PURE__ */ e("div", { id: `${M}-helper`, className: "nice-field__helper", children: d })
+          ] }),
+          Z !== "right" && t && /* @__PURE__ */ e("div", { id: `${M}-error`, className: "nice-field__error", role: "alert", children: t }),
+          Z !== "right" && !t && d && /* @__PURE__ */ e("div", { id: `${M}-helper`, className: "nice-field__helper", children: d })
+        ]
+      }
+    );
+  }
+);
+Pe.displayName = "NiceTextInput";
+const bn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  NiceTextInput: Pe
+}, Symbol.toStringTag, { value: "Module" })), Qe = Me(
+  ({
+    label: c,
+    helperText: d,
+    error: t,
+    required: o,
+    disabled: n,
+    readOnly: i,
+    size: a = "md",
+    name: k,
+    id: p,
+    className: u,
+    style: h,
+    accessMode: S,
+    displayStyle: V,
+    value: _,
+    onChange: x,
+    onBlur: F,
+    onKeyDown: f,
+    placeholder: Y,
+    min: L,
+    max: w,
+    step: D = 1,
+    precision: v,
+    prefix: R,
+    prefixType: U = "label",
+    prefixOptions: I,
+    prefixValue: j,
+    onPrefixChange: $,
+    suffix: H,
+    showStepper: K = !0,
+    submitOnEnter: E,
+    onSubmit: Z,
+    showKeyboardHints: re,
+    labelPlacement: se,
+    errorPlacement: G,
+    loading: P,
+    labelWidth: pe,
+    controlWidth: b,
+    formatPreset: N,
+    format: q,
+    suffixType: T = "label",
+    suffixOptions: M,
+    suffixValue: W,
+    onSuffixChange: ae,
+    displayMode: fe
+  }, X) => {
+    const Q = xe(S, p), de = Q === "hidden";
+    Q === "disabled" && (n = !0), Q === "readOnly" && (i = !0);
+    const { t: ie } = Re(), r = Ie(p), g = He("input", V), z = $e("input", V), [C, J] = ue(!1), [O, be] = ue(null), Ne = Ue({ enabled: fe, readOnly: i, disabled: n }), he = oe(() => {
+      let l = 3;
+      return w != null && (l = String(Math.abs(Math.floor(w))).length), L != null && L < 0 && (l += 1), v && (l += v + 1), Math.max(3, l) + 1;
+    }, [w, L, v]), Ce = ne(
+      (l) => {
+        if (q)
+          return q(l);
+        if (!N)
+          return v != null ? l.toFixed(v) : String(l);
+        switch (N) {
+          case "integer":
+            return Math.round(l).toLocaleString();
+          case "decimal":
+            return l.toLocaleString(void 0, {
+              minimumFractionDigits: v ?? 2,
+              maximumFractionDigits: v ?? 2
+            });
+          case "money":
+            return l.toLocaleString(void 0, {
+              minimumFractionDigits: v ?? 2,
+              maximumFractionDigits: v ?? 2,
+              useGrouping: !0
+            });
+          case "percent":
+            return (l * 100).toLocaleString(void 0, {
+              minimumFractionDigits: v ?? 0,
+              maximumFractionDigits: v ?? 2
+            }) + "%";
+          default:
+            return String(l);
+        }
+      },
+      [q, N, v]
+    ), Se = oe(() => C && O !== null ? O : _ == null ? "" : C ? v != null ? _.toFixed(v) : String(_) : Ce(_), [_, C, O, Ce, v]), _e = _ != null && _ < 0, te = !!(R || U === "select" && I && I.length > 0), ee = _e && te && !C, je = ee ? Se.replace(/^[-−]/, "") : Se, me = ne(
+      (l) => {
+        let y = l;
+        return L !== void 0 && (y = Math.max(L, y)), w !== void 0 && (y = Math.min(w, y)), v !== void 0 && (y = parseFloat(y.toFixed(v))), y;
+      },
+      [L, w, v]
+    ), Be = ne(
+      (l) => {
+        const y = l.target.value;
+        if (be(y), y === "" || y === "-" || y === "." || y === "-.") {
+          y === "" && x?.(null);
+          return;
+        }
+        const le = parseFloat(y);
+        if (!isNaN(le)) {
+          let ge = le;
+          L !== void 0 && (ge = Math.max(L, ge)), w !== void 0 && (ge = Math.min(w, ge)), x?.(ge);
+        }
+      },
+      [x, L, w]
+    ), ye = ne(() => {
+      const l = ke.current, y = me((l ?? 0) + D);
+      ke.current = y, x?.(y);
+    }, [D, x, me]), De = ne(() => {
+      const l = ke.current, y = me((l ?? 0) - D);
+      ke.current = y, x?.(y);
+    }, [D, x, me]), ke = Fe(_);
+    ke.current = _;
+    const s = Fe(null), A = ne(() => {
+      s.current && (clearTimeout(s.current), s.current = null);
+    }, []), B = ne(
+      (l) => {
+        A();
+        let y = 300;
+        const le = () => {
+          l(), y = Math.max(30, y * 0.82), s.current = setTimeout(le, y);
+        };
+        s.current = setTimeout(le, 400);
+      },
+      [A]
+    ), ve = Ve({
+      enabled: E,
+      onSubmit: Z
+    }), Ee = ne(
+      (l) => {
+        ve(l), l.key === "ArrowUp" ? (l.preventDefault(), ye()) : l.key === "ArrowDown" && (l.preventDefault(), De()), f?.(l);
+      },
+      [ve, f, ye, De]
+    ), ce = oe(() => {
+      const l = [];
+      return E && l.push(Ae.submit), K && (l.push({ key: "ArrowUp", description: ie("shortcuts.increment", "Increase value") }), l.push({ key: "ArrowDown", description: ie("shortcuts.decrement", "Decrease value") })), l;
+    }, [E, K, ie]);
+    return de ? null : /* @__PURE__ */ m(
+      "div",
+      {
+        className: `nice-field nice-field--${a} ${se === "left" ? "nice-field--label-left" : ""} ${P ? "nice-field--loading" : ""} ${u || ""}`,
+        style: {
+          ...h,
+          ...pe != null && {
+            "--nice-field-label-width": typeof pe == "number" ? `${pe}px` : pe
+          },
+          ...b != null && {
+            "--nice-field-control-width": typeof b == "number" ? `${b}px` : b
+          }
+        },
+        "aria-busy": P || void 0,
+        children: [
+          c && /* @__PURE__ */ m(
+            "label",
+            {
+              htmlFor: r,
+              className: `nice-field__label ${o ? "nice-field__label--required" : ""}`,
+              children: [
+                c,
+                re && ce.length > 0 && /* @__PURE__ */ e(Te, { shortcuts: ce, size: "sm" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ m("div", { className: "nice-field__control", children: [
+            Ne.isDisplay ? /* @__PURE__ */ e(
+              qe,
+              {
+                value: _ == null ? "" : R ? /* @__PURE__ */ m(Le, { children: [
+                  R,
+                  Se
+                ] }) : Se,
+                placeholder: Y,
+                disabled: n,
+                readOnly: i,
+                onActivate: Ne.enterEdit,
+                ariaLabel: c
+              }
+            ) : /* @__PURE__ */ e(Le, { children: /* @__PURE__ */ m(
+              "div",
+              {
+                className: `nice-input nice-input--number nice-input--${a} nice-input--ds-${z} ${t ? "nice-input--error" : ""} ${n ? "nice-input--disabled" : ""} ${i ? "nice-input--readonly" : ""}`,
+                style: g,
+                children: [
+                  K && !i && /* @__PURE__ */ e(
+                    "button",
+                    {
+                      type: "button",
+                      className: "nice-input__clear nice-input__minus",
+                      onClick: De,
+                      onMouseDown: () => B(De),
+                      onMouseUp: A,
+                      onMouseLeave: A,
+                      disabled: n,
+                      "aria-label": ie("controls.decrement", "Decrement"),
+                      children: "−"
+                    }
+                  ),
+                  U === "select" && I && I.length > 0 ? /* @__PURE__ */ m(Le, { children: [
+                    ee && /* @__PURE__ */ e("span", { className: "nice-input__sign", children: "−" }),
+                    /* @__PURE__ */ e(
+                      "select",
+                      {
+                        className: "nice-input__suffix-select nice-input__icon--prefix",
+                        value: j ?? I[0]?.value,
+                        disabled: n,
+                        onChange: (l) => {
+                          const y = l.target.value, le = I.find(
+                            (we) => we.value === (j ?? I[0]?.value)
+                          ), ge = I.find((we) => we.value === y);
+                          $?.(y, le?.weight, ge?.weight);
+                        },
+                        children: I.map((l) => /* @__PURE__ */ e("option", { value: l.value, children: l.label }, l.value))
+                      }
+                    )
+                  ] }) : R ? /* @__PURE__ */ m("span", { className: "nice-input__icon nice-input__icon--prefix", children: [
+                    ee && /* @__PURE__ */ e("span", { className: "nice-input__sign", children: "−" }),
+                    R
+                  ] }) : null,
+                  /* @__PURE__ */ e(
+                    "input",
+                    {
+                      ref: (l) => {
+                        typeof X == "function" ? X(l) : X && (X.current = l), Ne.autoFocusRef(l);
+                      },
+                      id: r,
+                      className: "nice-input__native",
+                      type: !C && (q || N) ? "text" : "number",
+                      name: k,
+                      value: je,
+                      placeholder: Y,
+                      min: L,
+                      max: w,
+                      step: D,
+                      disabled: n || P,
+                      readOnly: i,
+                      "aria-invalid": !!t,
+                      onChange: Be,
+                      onFocus: (l) => {
+                        J(!0), be(null), l.target.select();
+                      },
+                      onBlur: (l) => {
+                        if (J(!1), be(null), _ != null && v !== void 0) {
+                          const y = parseFloat(_.toFixed(v));
+                          y !== _ && x?.(y);
+                        }
+                        fe && Ne.exitEdit(), F?.(l);
+                      },
+                      onKeyDown: Ee,
+                      style: { width: `${he}ch` }
+                    }
+                  ),
+                  T === "select" && M && M.length > 0 ? /* @__PURE__ */ e(
+                    "select",
+                    {
+                      className: "nice-input__suffix-select nice-input__icon--suffix",
+                      value: W ?? M[0]?.value,
+                      disabled: n,
+                      onChange: (l) => {
+                        const y = l.target.value, le = M.find(
+                          (we) => we.value === (W ?? M[0]?.value)
+                        ), ge = M.find((we) => we.value === y);
+                        ae?.(y, le?.weight, ge?.weight);
+                      },
+                      children: M.map((l) => /* @__PURE__ */ e("option", { value: l.value, children: l.label }, l.value))
+                    }
+                  ) : H ? /* @__PURE__ */ e("span", { className: "nice-input__icon nice-input__icon--suffix", children: H }) : null,
+                  K && !i && /* @__PURE__ */ e(
+                    "button",
+                    {
+                      type: "button",
+                      className: "nice-input__clear nice-input__plus",
+                      onClick: ye,
+                      onMouseDown: () => B(ye),
+                      onMouseUp: A,
+                      onMouseLeave: A,
+                      disabled: n,
+                      "aria-label": ie("controls.increment", "Increment"),
+                      children: "+"
+                    }
+                  )
+                ]
+              }
+            ) }),
+            P && /* @__PURE__ */ e("span", { className: "nice-field__spinner", children: /* @__PURE__ */ e("span", { className: "nice-spinner nice-spinner--sm" }) }),
+            G === "right" && t && /* @__PURE__ */ e("div", { className: "nice-field__error", role: "alert", children: t }),
+            G === "right" && !t && d && /* @__PURE__ */ e("div", { className: "nice-field__helper", children: d })
+          ] }),
+          G !== "right" && t && /* @__PURE__ */ e("div", { className: "nice-field__error", role: "alert", children: t }),
+          G !== "right" && !t && d && /* @__PURE__ */ e("div", { className: "nice-field__helper", children: d })
+        ]
+      }
+    );
+  }
+);
+Qe.displayName = "NiceNumberInput";
+const Nn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  NiceNumberInput: Qe
+}, Symbol.toStringTag, { value: "Module" })), Ze = Me(
+  ({
+    label: c,
+    helperText: d,
+    error: t,
+    required: o,
+    disabled: n,
+    size: i = "md",
+    name: a,
+    id: k,
+    className: p,
+    style: u,
+    accessMode: h,
+    displayStyle: S,
+    options: V,
+    value: _,
+    onChange: x,
+    placeholder: F,
+    multiple: f = !1,
+    searchable: Y = !1,
+    clearable: L = !1,
+    emptyText: w,
+    maxHeight: D = 240,
+    optionsSource: v,
+    valueField: R,
+    labelField: U,
+    virtualScroll: I,
+    optionHeight: j = 36,
+    onSearch: $,
+    loading: H,
+    renderOption: K,
+    multipleAutosize: E = !1,
+    showKeyboardHints: Z,
+    labelPlacement: re,
+    errorPlacement: se,
+    labelWidth: G,
+    controlWidth: P,
+    displayMode: pe
+  }, b) => {
+    const N = xe(h, k), q = N === "hidden";
+    (N === "disabled" || N === "readOnly") && (n = !0);
+    const { t: T } = Re(), M = He("input", S), W = $e("input", S), ae = Ie(k), fe = Ue({ enabled: pe, disabled: n }), [X, Q] = ue(!1), [de, ie] = ue(""), [r, g] = ue(-1), [z, C] = ue(0), J = Fe(null), O = Fe(null), [be, Ne] = ue(null);
+    ze(() => {
+      !H && O.current && Ne(O.current.offsetWidth);
+    }, [H, _, S]);
+    const [he, Ce] = ue(null);
+    ze(() => {
+      f && !E && O.current && he == null && Ce(O.current.offsetWidth);
+    }, [f, E, he]);
+    const Se = Ye(
+      v ?? null,
+      R ?? v?.keyField ?? "id",
+      U ?? "name"
+    ), _e = v ? Se.options : (V ?? []).map(
+      (s) => typeof s == "string" ? { value: s, label: s } : s
+    );
+    Je(J, () => {
+      Q(!1), ie("");
+    });
+    const te = oe(() => _ ? Array.isArray(_) ? _ : [_] : [], [_]), ee = oe(() => {
+      if (!de && !$ || $)
+        return _e;
+      const s = de.toLowerCase();
+      return _e.filter(
+        (A) => A.label.toLowerCase().includes(s) || String(A.value).toLowerCase().includes(s)
+      );
+    }, [_e, de, $]), je = oe(() => {
+      const s = /* @__PURE__ */ new Map();
+      for (const A of ee) {
+        const B = A.group || "";
+        s.has(B) || s.set(B, []), s.get(B).push(A);
+      }
+      return s;
+    }, [ee]), me = ne(
+      (s) => {
+        if (f) {
+          const A = te.includes(s) ? te.filter((B) => B !== s) : [...te, s];
+          x?.(A);
+        } else
+          x?.(s), Q(!1), ie("");
+      },
+      [f, te, x]
+    ), Be = ne(
+      (s) => {
+        if (s.key === "Escape") {
+          Q(!1), ie("");
+          return;
+        }
+        if (s.key === "Enter" || s.key === " ") {
+          if (!X) {
+            Q(!0), s.preventDefault();
+            return;
+          }
+          r >= 0 && ee[r] && (me(ee[r].value), s.preventDefault());
+          return;
+        }
+        s.key === "ArrowDown" && (s.preventDefault(), g((A) => Math.min(A + 1, ee.length - 1))), s.key === "ArrowUp" && (s.preventDefault(), g((A) => Math.max(A - 1, 0)));
+      },
+      [X, r, ee, me]
+    ), ye = oe(() => te.length === 0 ? null : f ? te.map((s) => _e.find((A) => A.value === s)?.label || s).join(", ") : _e.find((s) => s.value === te[0])?.label || te[0], [te, _e, f]), De = ne(
+      (s) => {
+        s.stopPropagation(), x?.(f ? [] : "");
+      },
+      [x, f]
+    ), ke = oe(
+      () => [
+        { key: "Enter", description: T("shortcuts.select", "Select") },
+        { key: "Space", description: T("shortcuts.openDropdown", "Open dropdown") },
+        Ae.moveUp,
+        Ae.moveDown,
+        Ae.cancel
+      ],
+      [T]
+    );
+    return q ? null : /* @__PURE__ */ m(
+      "div",
+      {
+        className: `nice-field ${P == null ? "nice-field--select-auto" : ""} nice-field--${i} ${re === "left" ? "nice-field--label-left" : ""} ${H ? "nice-field--loading" : ""} ${p || ""}`,
+        style: {
+          ...u,
+          ...G != null && {
+            "--nice-field-label-width": typeof G == "number" ? `${G}px` : G
+          },
+          ...P != null && {
+            "--nice-field-control-width": typeof P == "number" ? `${P}px` : P
+          },
+          ...H && be != null && { "--nice-select-locked-width": `${be}px` }
+        },
+        "aria-busy": H || void 0,
+        children: [
+          c && /* @__PURE__ */ m(
+            "label",
+            {
+              htmlFor: ae,
+              className: `nice-field__label ${o ? "nice-field__label--required" : ""}`,
+              children: [
+                c,
+                Z && /* @__PURE__ */ e(Te, { shortcuts: ke, size: "sm" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ m("div", { className: "nice-field__control", children: [
+            fe.isDisplay ? /* @__PURE__ */ e(
+              qe,
+              {
+                value: ye,
+                placeholder: F || T("controls.select", "Select..."),
+                disabled: n,
+                onActivate: () => {
+                  fe.enterEdit(), Q(!0);
+                },
+                ariaLabel: c
+              }
+            ) : /* @__PURE__ */ m("div", { className: "nice-select", ref: J, children: [
+              /* @__PURE__ */ m(
+                "button",
+                {
+                  ref: (s) => {
+                    O.current = s, typeof b == "function" ? b(s) : b && (b.current = s);
+                  },
+                  type: "button",
+                  id: ae,
+                  role: "combobox",
+                  "aria-expanded": X,
+                  "aria-haspopup": "listbox",
+                  "aria-invalid": !!t,
+                  className: `nice-select__trigger nice-select__trigger--${i} nice-select--ds-${W} ${X ? "nice-select__trigger--open" : ""} ${t ? "nice-select__trigger--error" : ""} ${n ? "nice-select__trigger--disabled" : ""}`,
+                  style: {
+                    ...M,
+                    ...f && !E && he != null ? {
+                      width: he,
+                      maxWidth: he,
+                      overflow: "hidden"
+                    } : {}
+                  },
+                  disabled: n,
+                  onClick: () => Q(!X),
+                  onKeyDown: Be,
+                  children: [
+                    ye ? /* @__PURE__ */ e(
+                      "span",
+                      {
+                        style: f && !E ? {
+                          flex: 1,
+                          minWidth: 0,
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap"
+                        } : void 0,
+                        children: ye
+                      }
+                    ) : /* @__PURE__ */ e("span", { className: "nice-select__placeholder", children: F || T("controls.select", "Select...") }),
+                    /* @__PURE__ */ m("span", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+                      L && te.length > 0 && /* @__PURE__ */ e(
+                        "span",
+                        {
+                          className: "nice-input__clear",
+                          onClick: De,
+                          role: "button",
+                          "aria-label": T("controls.clear", "Clear"),
+                          children: "✕"
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        "svg",
+                        {
+                          className: `nice-select__chevron ${X ? "nice-select__chevron--open" : ""}`,
+                          viewBox: "0 0 20 20",
+                          fill: "currentColor",
+                          children: /* @__PURE__ */ e(
+                            "path",
+                            {
+                              fillRule: "evenodd",
+                              d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
+                              clipRule: "evenodd"
+                            }
+                          )
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              X && /* @__PURE__ */ m(
+                "div",
+                {
+                  className: "nice-select__dropdown",
+                  role: "listbox",
+                  style: { maxHeight: D },
+                  onScroll: I ? (s) => C(s.currentTarget.scrollTop) : void 0,
+                  children: [
+                    (Y || $) && /* @__PURE__ */ e("div", { className: "nice-select__search", children: /* @__PURE__ */ e(
+                      "input",
+                      {
+                        type: "text",
+                        value: de,
+                        onChange: (s) => {
+                          ie(s.target.value), g(0), $?.(s.target.value);
+                        },
+                        placeholder: T("controls.search", "Search..."),
+                        autoFocus: !0
+                      }
+                    ) }),
+                    H && /* @__PURE__ */ e("div", { className: "nice-select__loading", children: /* @__PURE__ */ e(
+                      "div",
+                      {
+                        className: "nice-spinner nice-spinner--sm",
+                        style: { margin: "8px auto" }
+                      }
+                    ) }),
+                    !H && ee.length === 0 ? /* @__PURE__ */ e("div", { className: "nice-select__empty", children: w || T("controls.noResults", "No results found") }) : I && !Array.from(je.keys()).some((s) => s !== "") ? (() => {
+                      const A = ee.length * j, B = Math.max(
+                        0,
+                        Math.floor(z / j) - 3
+                      ), ve = Math.min(
+                        ee.length,
+                        Math.ceil((z + D) / j) + 3
+                      ), Ee = ee.slice(B, ve);
+                      return /* @__PURE__ */ e("div", { style: { height: A, position: "relative" }, children: Ee.map((ce, l) => {
+                        const y = B + l, le = te.includes(ce.value);
+                        return /* @__PURE__ */ e(
+                          "div",
+                          {
+                            role: "option",
+                            "aria-selected": le,
+                            className: `nice-select__option ${le ? "nice-select__option--selected" : ""} ${y === r ? "nice-select__option--highlighted" : ""} ${ce.disabled ? "nice-select__option--disabled" : ""}`,
+                            style: {
+                              position: "absolute",
+                              top: y * j,
+                              left: 0,
+                              right: 0,
+                              height: j,
+                              display: "flex",
+                              alignItems: "center",
+                              padding: "0 12px"
+                            },
+                            onClick: () => !ce.disabled && me(String(ce.value)),
+                            onMouseEnter: () => g(y),
+                            children: K ? K(ce, le) : /* @__PURE__ */ m(Le, { children: [
+                              ce.icon && /* @__PURE__ */ e("span", { children: ce.icon }),
+                              /* @__PURE__ */ m("div", { style: { flex: 1 }, children: [
+                                /* @__PURE__ */ e("div", { children: ce.label }),
+                                ce.description && /* @__PURE__ */ e("div", { className: "nice-select__option-desc", children: ce.description })
+                              ] }),
+                              le && /* @__PURE__ */ e(
+                                "svg",
+                                {
+                                  className: "nice-select__option-check",
+                                  viewBox: "0 0 20 20",
+                                  fill: "currentColor",
+                                  children: /* @__PURE__ */ e(
+                                    "path",
+                                    {
+                                      fillRule: "evenodd",
+                                      d: "M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z",
+                                      clipRule: "evenodd"
+                                    }
+                                  )
+                                }
+                              )
+                            ] })
+                          },
+                          ce.value
+                        );
+                      }) });
+                    })() : Array.from(je.entries()).map(([s, A]) => /* @__PURE__ */ m(Ke.Fragment, { children: [
+                      s && /* @__PURE__ */ e("div", { className: "nice-select__group-label", children: s }),
+                      A.map((B) => {
+                        const ve = te.includes(B.value), Ee = ee.indexOf(B);
+                        return /* @__PURE__ */ e(
+                          "div",
+                          {
+                            role: "option",
+                            "aria-selected": ve,
+                            className: `nice-select__option ${ve ? "nice-select__option--selected" : ""} ${Ee === r ? "nice-select__option--highlighted" : ""} ${B.disabled ? "nice-select__option--disabled" : ""}`,
+                            onClick: () => !B.disabled && me(String(B.value)),
+                            onMouseEnter: () => g(Ee),
+                            children: K ? K(B, ve) : /* @__PURE__ */ m(Le, { children: [
+                              B.icon && /* @__PURE__ */ e("span", { children: B.icon }),
+                              /* @__PURE__ */ m("div", { style: { flex: 1 }, children: [
+                                /* @__PURE__ */ e("div", { children: B.label }),
+                                B.description && /* @__PURE__ */ e("div", { className: "nice-select__option-desc", children: B.description })
+                              ] }),
+                              ve && /* @__PURE__ */ e(
+                                "svg",
+                                {
+                                  className: "nice-select__option-check",
+                                  viewBox: "0 0 20 20",
+                                  fill: "currentColor",
+                                  children: /* @__PURE__ */ e(
+                                    "path",
+                                    {
+                                      fillRule: "evenodd",
+                                      d: "M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z",
+                                      clipRule: "evenodd"
+                                    }
+                                  )
+                                }
+                              )
+                            ] })
+                          },
+                          B.value
+                        );
+                      })
+                    ] }, s))
+                  ]
+                }
+              )
+            ] }),
+            H && /* @__PURE__ */ e("span", { className: "nice-field__spinner", children: /* @__PURE__ */ e("span", { className: "nice-spinner nice-spinner--sm" }) }),
+            se === "right" && t && /* @__PURE__ */ e("div", { id: `${ae}-error`, className: "nice-field__error", role: "alert", children: t }),
+            se === "right" && !t && d && /* @__PURE__ */ e("div", { id: `${ae}-helper`, className: "nice-field__helper", children: d })
+          ] }),
+          se !== "right" && t && /* @__PURE__ */ e("div", { id: `${ae}-error`, className: "nice-field__error", role: "alert", children: t }),
+          se !== "right" && !t && d && /* @__PURE__ */ e("div", { id: `${ae}-helper`, className: "nice-field__helper", children: d })
+        ]
+      }
+    );
+  }
+);
+Ze.displayName = "NiceSelect";
+const yn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  NiceSelect: Ze
+}, Symbol.toStringTag, { value: "Module" })), Ge = Me(
+  ({
+    label: c,
+    checked: d = !1,
+    indeterminate: t = !1,
+    onChange: o,
+    disabled: n,
+    readOnly: i,
+    loading: a,
+    required: k,
+    size: p = "md",
+    name: u,
+    id: h,
+    className: S,
+    style: V,
+    error: _,
+    helperText: x,
+    accessMode: F,
+    displayStyle: f,
+    showKeyboardHints: Y,
+    labelPlacement: L,
+    errorPlacement: w,
+    labelWidth: D,
+    controlWidth: v
+  }, R) => {
+    const U = xe(F, h), I = U === "hidden";
+    (U === "disabled" || U === "readOnly") && (n = !0);
+    const { t: j } = Re(), $ = Ie(h);
+    $e("toggle", f);
+    const H = oe(
+      () => [{ key: "Space", description: j("shortcuts.toggle", "Toggle") }],
+      [j]
+    ), K = Ke.useCallback(
+      (E) => {
+        E && (E.indeterminate = t), typeof R == "function" ? R(E) : R && (R.current = E);
+      },
+      [t, R]
+    );
+    return I ? null : /* @__PURE__ */ m(
+      "div",
+      {
+        className: `nice-field nice-field--inline nice-field--${p} ${L === "left" ? "nice-field--label-left" : ""} ${w === "right" ? "nice-field--error-right" : ""} ${a ? "nice-field--loading" : ""} ${S || ""}`,
+        style: {
+          ...V,
+          ...D != null && {
+            "--nice-field-label-width": typeof D == "number" ? `${D}px` : D
+          },
+          ...v != null && {
+            "--nice-field-control-width": typeof v == "number" ? `${v}px` : v
+          }
+        },
+        "aria-busy": a || void 0,
+        children: [
+          L === "left" && c && /* @__PURE__ */ e("span", { className: `nice-field__label ${k ? "nice-field__label--required" : ""}`, children: c }),
+          /* @__PURE__ */ m("div", { className: "nice-field__control", children: [
+            /* @__PURE__ */ m(
+              "label",
+              {
+                className: `nice-checkbox ${p !== "md" ? `nice-checkbox--${p}` : ""} ${n || a ? "nice-checkbox--disabled" : ""}`,
+                htmlFor: $,
+                children: [
+                  /* @__PURE__ */ e(
+                    "input",
+                    {
+                      ref: K,
+                      id: $,
+                      type: "checkbox",
+                      className: "nice-checkbox__input",
+                      name: u,
+                      checked: d,
+                      disabled: n || a,
+                      readOnly: i,
+                      "aria-invalid": !!_,
+                      onChange: (E) => {
+                        i || a || o?.(E.target.checked);
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ e("span", { className: "nice-checkbox__box", children: /* @__PURE__ */ e(
+                    "svg",
+                    {
+                      viewBox: "0 0 12 12",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      children: t ? /* @__PURE__ */ e("line", { x1: "2", y1: "6", x2: "10", y2: "6" }) : /* @__PURE__ */ e("polyline", { points: "2 6 5 9 10 3" })
+                    }
+                  ) }),
+                  L !== "left" && c && /* @__PURE__ */ e("span", { children: c }),
+                  Y && /* @__PURE__ */ e(Te, { shortcuts: H, size: "sm" })
+                ]
+              }
+            ),
+            a && /* @__PURE__ */ e("span", { className: "nice-field__spinner", children: /* @__PURE__ */ e("span", { className: "nice-spinner nice-spinner--sm" }) }),
+            w === "right" && _ && /* @__PURE__ */ e("div", { id: `${$}-error`, className: "nice-field__error", role: "alert", children: _ }),
+            w === "right" && !_ && x && /* @__PURE__ */ e("div", { id: `${$}-helper`, className: "nice-field__helper", children: x })
+          ] }),
+          w !== "right" && _ && /* @__PURE__ */ e("div", { id: `${$}-error`, className: "nice-field__error", role: "alert", children: _ }),
+          w !== "right" && !_ && x && /* @__PURE__ */ e("div", { id: `${$}-helper`, className: "nice-field__helper", children: x })
+        ]
+      }
+    );
+  }
+);
+Ge.displayName = "NiceCheckbox";
+const $n = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  NiceCheckbox: Ge
+}, Symbol.toStringTag, { value: "Module" })), tn = Me(
+  ({
+    label: c,
+    checked: d = !1,
+    onChange: t,
+    disabled: o,
+    readOnly: n,
+    loading: i,
+    required: a,
+    size: k = "md",
+    name: p,
+    id: u,
+    className: h,
+    style: S,
+    accessMode: V,
+    displayStyle: _,
+    showKeyboardHints: x,
+    error: F,
+    helperText: f,
+    labelPlacement: Y,
+    errorPlacement: L,
+    labelWidth: w,
+    controlWidth: D
+  }, v) => {
+    const R = xe(V, u), U = R === "hidden";
+    (R === "disabled" || R === "readOnly") && (o = !0);
+    const { t: I } = Re(), j = Ie(u);
+    He("toggle", _);
+    const $ = $e("toggle", _), H = oe(
+      () => [{ key: "Space", description: I("shortcuts.toggle", "Toggle on/off") }],
+      [I]
+    );
+    return U ? null : /* @__PURE__ */ m(
+      "div",
+      {
+        className: `nice-field nice-field--inline nice-field--${k} ${Y === "left" ? "nice-field--label-left" : ""} ${i ? "nice-field--loading" : ""} ${h || ""}`,
+        style: {
+          ...S,
+          ...w != null && {
+            "--nice-field-label-width": typeof w == "number" ? `${w}px` : w
+          },
+          ...D != null && {
+            "--nice-field-control-width": typeof D == "number" ? `${D}px` : D
+          }
+        },
+        "aria-busy": i || void 0,
+        children: [
+          Y === "left" && c && /* @__PURE__ */ e("span", { className: `nice-field__label ${a ? "nice-field__label--required" : ""}`, children: c }),
+          /* @__PURE__ */ m("div", { className: "nice-field__control", children: [
+            /* @__PURE__ */ m(
+              "label",
+              {
+                className: `nice-toggle nice-toggle--ds-${$} ${k !== "md" ? `nice-toggle--${k}` : ""} ${o || i ? "nice-toggle--disabled" : ""}`,
+                htmlFor: j,
+                children: [
+                  /* @__PURE__ */ e(
+                    "input",
+                    {
+                      ref: v,
+                      id: j,
+                      type: "checkbox",
+                      className: "nice-toggle__input",
+                      name: p,
+                      checked: d,
+                      disabled: o || i,
+                      readOnly: n,
+                      role: "switch",
+                      "aria-checked": d,
+                      "aria-invalid": !!F,
+                      onChange: (K) => {
+                        n || i || t?.(K.target.checked);
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ e("span", { className: "nice-toggle__track", children: /* @__PURE__ */ e("span", { className: "nice-toggle__thumb" }) }),
+                  Y !== "left" && c && /* @__PURE__ */ e("span", { children: c }),
+                  x && /* @__PURE__ */ e(Te, { shortcuts: H, size: "sm" })
+                ]
+              }
+            ),
+            i && /* @__PURE__ */ e("span", { className: "nice-field__spinner", children: /* @__PURE__ */ e("span", { className: "nice-spinner nice-spinner--sm" }) }),
+            L === "right" && F && /* @__PURE__ */ e("div", { id: `${j}-error`, className: "nice-field__error", role: "alert", children: F }),
+            L === "right" && !F && f && /* @__PURE__ */ e("div", { id: `${j}-helper`, className: "nice-field__helper", children: f })
+          ] }),
+          L !== "right" && F && /* @__PURE__ */ e("div", { id: `${j}-error`, className: "nice-field__error", role: "alert", children: F }),
+          L !== "right" && !F && f && /* @__PURE__ */ e("div", { id: `${j}-helper`, className: "nice-field__helper", children: f })
+        ]
+      }
+    );
+  }
+);
+tn.displayName = "NiceToggle";
+const cn = [
+  "var(--nice-danger, #ef4444)",
+  "var(--nice-warning, #f97316)",
+  "var(--nice-warning, #f59e0b)",
+  "var(--nice-success, #84cc16)",
+  "var(--nice-success, #10b981)",
+  "var(--nice-info, #06b6d4)",
+  "var(--nice-primary, #3b82f6)",
+  "var(--nice-info, #6366f1)",
+  "var(--nice-accent, #8b5cf6)",
+  "var(--nice-accent-pink, #ec4899)",
+  "var(--nice-text-secondary, #64748b)",
+  "var(--nice-text, #1e293b)"
+];
+function ln() {
+  return "#" + Math.floor(Math.random() * 16777215).toString(16).padStart(6, "0");
+}
+function sn(c) {
+  const d = /^#?([0-9a-f]{6})$/i.exec(c.trim());
+  if (!d)
+    return { r: 0, g: 0, b: 0 };
+  const t = parseInt(d[1], 16);
+  return { r: t >> 16 & 255, g: t >> 8 & 255, b: t & 255 };
+}
+function rn(c, d, t) {
+  const o = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, "0");
+  return `#${o(c)}${o(d)}${o(t)}`;
+}
+function an(c, d, t) {
+  const o = c / 255, n = d / 255, i = t / 255, a = Math.max(o, n, i), k = Math.min(o, n, i), p = (a + k) / 2;
+  let u = 0, h = 0;
+  if (a !== k) {
+    const S = a - k;
+    switch (h = p > 0.5 ? S / (2 - a - k) : S / (a + k), a) {
+      case o:
+        u = (n - i) / S + (n < i ? 6 : 0);
+        break;
+      case n:
+        u = (i - o) / S + 2;
+        break;
+      case i:
+        u = (o - n) / S + 4;
+        break;
+    }
+    u *= 60;
+  }
+  return { h: Math.round(u), s: Math.round(h * 100), l: Math.round(p * 100) };
+}
+function on(c, d, t) {
+  const o = d / 100, n = t / 100, i = (1 - Math.abs(2 * n - 1)) * o, a = i * (1 - Math.abs(c / 60 % 2 - 1)), k = n - i / 2;
+  let p = 0, u = 0, h = 0;
+  return c < 60 ? [p, u, h] = [i, a, 0] : c < 120 ? [p, u, h] = [a, i, 0] : c < 180 ? [p, u, h] = [0, i, a] : c < 240 ? [p, u, h] = [0, a, i] : c < 300 ? [p, u, h] = [a, 0, i] : [p, u, h] = [i, 0, a], {
+    r: Math.round((p + k) * 255),
+    g: Math.round((u + k) * 255),
+    b: Math.round((h + k) * 255)
+  };
+}
+function dn(c, d, t) {
+  const o = c / 255, n = d / 255, i = t / 255, a = Math.max(o, n, i), k = Math.min(o, n, i), p = a - k;
+  let u = 0;
+  p !== 0 && (a === o ? u = (n - i) / p % 6 : a === n ? u = (i - o) / p + 2 : u = (o - n) / p + 4, u *= 60, u < 0 && (u += 360));
+  const h = a === 0 ? 0 : p / a;
+  return { h: Math.round(u), s: Math.round(h * 100), v: Math.round(a * 100) };
+}
+function un(c, d, t) {
+  const o = d / 100, n = t / 100, i = n * o, a = i * (1 - Math.abs(c / 60 % 2 - 1)), k = n - i;
+  let p = 0, u = 0, h = 0;
+  return c < 60 ? [p, u, h] = [i, a, 0] : c < 120 ? [p, u, h] = [a, i, 0] : c < 180 ? [p, u, h] = [0, i, a] : c < 240 ? [p, u, h] = [0, a, i] : c < 300 ? [p, u, h] = [a, 0, i] : [p, u, h] = [i, 0, a], {
+    r: Math.round((p + k) * 255),
+    g: Math.round((u + k) * 255),
+    b: Math.round((h + k) * 255)
+  };
+}
+function pn(c) {
+  const d = /^#?([0-9a-f]{6})$/i.exec(c.trim()), t = /^#?([0-9a-f]{8})$/i.exec(c.trim());
+  if (t) {
+    const o = t[1];
+    return {
+      r: parseInt(o.slice(0, 2), 16),
+      g: parseInt(o.slice(2, 4), 16),
+      b: parseInt(o.slice(4, 6), 16),
+      a: parseInt(o.slice(6, 8), 16) / 255
+    };
+  }
+  if (d) {
+    const o = parseInt(d[1], 16);
+    return { r: o >> 16 & 255, g: o >> 8 & 255, b: o & 255, a: 1 };
+  }
+  return { r: 0, g: 0, b: 0, a: 1 };
+}
+function fn(c, d, t, o, n) {
+  const i = (k) => Math.max(0, Math.min(255, Math.round(k))).toString(16).padStart(2, "0"), a = `#${i(c)}${i(d)}${i(t)}`;
+  return n ? `${a}${i(o * 255)}` : a;
+}
+const Xe = Me(
+  ({
+    label: c,
+    helperText: d,
+    error: t,
+    required: o,
+    disabled: n,
+    id: i,
+    className: a,
+    style: k,
+    accessMode: p,
+    displayStyle: u,
+    value: h = "var(--nice-primary, #3b82f6)",
+    onChange: S,
+    presets: V = cn,
+    showInput: _ = !0,
+    showRandom: x = !0,
+    withAlpha: F = !1,
+    showKeyboardHints: f,
+    size: Y = "md",
+    labelPlacement: L,
+    errorPlacement: w,
+    labelWidth: D,
+    controlWidth: v,
+    loading: R
+  }, U) => {
+    const I = xe(p, i), j = I === "hidden";
+    (I === "disabled" || I === "readOnly") && (n = !0);
+    const { t: $ } = Re(), H = Ie(i);
+    $e("input", u);
+    const K = ne(() => {
+      n || S?.(ln());
+    }, [n, S]), [E, Z] = ue(!1), [re, se] = ue(null), G = Fe(null), P = Fe(null);
+    ze(() => {
+      if (!E || !P.current)
+        return;
+      const b = () => {
+        const N = P.current?.getBoundingClientRect();
+        if (!N)
+          return;
+        const q = 280, T = 360;
+        let M = N.left, W = N.bottom + 6;
+        M + q > window.innerWidth - 8 && (M = Math.max(8, window.innerWidth - q - 8)), W + T > window.innerHeight - 8 && (W = Math.max(8, N.top - T - 6)), se({ left: M, top: W });
+      };
+      return b(), window.addEventListener("scroll", b, !0), window.addEventListener("resize", b), () => {
+        window.removeEventListener("scroll", b, !0), window.removeEventListener("resize", b);
+      };
+    }, [E]), en(() => {
+      if (!E)
+        return;
+      const b = (q) => {
+        const T = q.target;
+        G.current?.contains(T) || P.current?.contains(T) || Z(!1);
+      }, N = (q) => {
+        q.key === "Escape" && Z(!1);
+      };
+      return document.addEventListener("mousedown", b), document.addEventListener("keydown", N), () => {
+        document.removeEventListener("mousedown", b), document.removeEventListener("keydown", N);
+      };
+    }, [E]);
+    const pe = oe(
+      () => [
+        { key: "Enter", description: $("shortcuts.openPicker", "Open color picker") },
+        { key: "Arrow keys", description: $("shortcuts.navigatePresets", "Navigate presets") }
+      ],
+      [$]
+    );
+    return j ? null : /* @__PURE__ */ m(
+      "div",
+      {
+        className: `nice-field nice-field--${Y} ${L === "left" ? "nice-field--label-left" : ""} ${R ? "nice-field--loading" : ""} ${a || ""}`,
+        style: {
+          ...k,
+          ...D != null && {
+            "--nice-field-label-width": typeof D == "number" ? `${D}px` : D
+          },
+          ...v != null && {
+            "--nice-field-control-width": typeof v == "number" ? `${v}px` : v
+          }
+        },
+        "aria-busy": R || void 0,
+        children: [
+          c && /* @__PURE__ */ m(
+            "label",
+            {
+              htmlFor: H,
+              className: `nice-field__label ${o ? "nice-field__label--required" : ""}`,
+              children: [
+                c,
+                f && /* @__PURE__ */ e(Te, { shortcuts: pe, size: "sm" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: "nice-field__control", children: /* @__PURE__ */ m("div", { className: "nice-color-picker", children: [
+            /* @__PURE__ */ m("div", { className: "nice-color-picker__preview-row", children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  ref: P,
+                  className: "nice-color-picker__swatch",
+                  id: H,
+                  style: { background: h },
+                  onClick: (b) => {
+                    b.stopPropagation(), n || Z((N) => !N);
+                  },
+                  onKeyDown: (b) => {
+                    !n && (b.key === "Enter" || b.key === " ") && (b.preventDefault(), Z((N) => !N));
+                  },
+                  role: "button",
+                  tabIndex: 0,
+                  "aria-label": $("colorPicker.openPalette", "Open color palette"),
+                  "aria-haspopup": "dialog",
+                  "aria-expanded": E,
+                  children: /* @__PURE__ */ e(
+                    "input",
+                    {
+                      ref: (b) => {
+                        typeof U == "function" ? U(b) : U && (U.current = b);
+                      },
+                      type: "hidden",
+                      value: h,
+                      disabled: n,
+                      readOnly: !0
+                    }
+                  )
+                }
+              ),
+              _ && /* @__PURE__ */ e("div", { className: "nice-input nice-input--sm", style: { width: 100 }, children: /* @__PURE__ */ e(
+                "input",
+                {
+                  className: "nice-input__native",
+                  type: "text",
+                  value: h,
+                  disabled: n,
+                  onChange: (b) => S?.(b.target.value),
+                  maxLength: 7
+                }
+              ) }),
+              x && /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  className: "nice-btn nice-btn--outline nice-btn--sm nice-color-picker__random",
+                  onClick: K,
+                  disabled: n,
+                  title: $("colorPicker.random", "Random"),
+                  "aria-label": $("colorPicker.random", "Random"),
+                  style: {
+                    fontSize: "0.65rem",
+                    textTransform: "uppercase",
+                    letterSpacing: "0.05em"
+                  },
+                  children: $("colorPicker.random", "Random")
+                }
+              ),
+              R && /* @__PURE__ */ e("span", { className: "nice-field__spinner", children: /* @__PURE__ */ e("span", { className: "nice-spinner nice-spinner--sm" }) }),
+              w === "right" && t && /* @__PURE__ */ e("div", { id: `${H}-error`, className: "nice-field__error", role: "alert", children: t }),
+              w === "right" && !t && d && /* @__PURE__ */ e("div", { id: `${H}-helper`, className: "nice-field__helper", children: d })
+            ] }),
+            E && re && typeof document < "u" && nn.createPortal(
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  ref: G,
+                  className: "nice-color-picker__popup nice-color-picker__popup--portal",
+                  role: "dialog",
+                  "aria-label": $("colorPicker.palette", "Color palette"),
+                  style: { position: "fixed", left: re.left, top: re.top },
+                  onClick: (b) => b.stopPropagation(),
+                  children: (() => {
+                    const b = pn(h), N = { r: b.r, g: b.g, b: b.b }, q = F ? b.a : 1, T = an(N.r, N.g, N.b), M = dn(N.r, N.g, N.b), W = (r, g, z, C = q) => S?.(fn(r, g, z, C, F)), ae = (r, g, z) => W(r, g, z), fe = (r, g, z) => {
+                      const C = on(r, g, z);
+                      W(C.r, C.g, C.b);
+                    }, X = (r, g, z) => {
+                      const C = un(r, g, z);
+                      W(C.r, C.g, C.b);
+                    }, Q = (r) => W(N.r, N.g, N.b, r), de = (r) => {
+                      if (n)
+                        return;
+                      const g = r.currentTarget, z = (J) => {
+                        const O = g.getBoundingClientRect(), be = Math.max(0, Math.min(O.width, J.clientX - O.left)), Ne = Math.max(0, Math.min(O.height, J.clientY - O.top)), he = Math.round(be / O.width * 100), Ce = 100 - Math.round(Ne / O.height * 100);
+                        X(M.h, he, Ce);
+                      };
+                      z(r);
+                      const C = () => {
+                        document.removeEventListener("pointermove", z), document.removeEventListener("pointerup", C);
+                      };
+                      document.addEventListener("pointermove", z), document.addEventListener("pointerup", C);
+                    }, ie = `hsl(${M.h}, 100%, 50%)`;
+                    return /* @__PURE__ */ m(Le, { children: [
+                      /* @__PURE__ */ e("div", { className: "nice-color-picker__popup-header", children: /* @__PURE__ */ e(
+                        "input",
+                        {
+                          type: "text",
+                          className: "nice-input__native nice-color-picker__popup-hex",
+                          value: h,
+                          disabled: n,
+                          onChange: (r) => S?.(r.target.value),
+                          maxLength: F ? 9 : 7,
+                          "aria-label": $("colorPicker.hexValue", "Hex value")
+                        }
+                      ) }),
+                      /* @__PURE__ */ e(
+                        "input",
+                        {
+                          type: "range",
+                          min: 0,
+                          max: 360,
+                          value: M.h,
+                          disabled: n,
+                          onChange: (r) => X(Number(r.target.value), M.s, M.v),
+                          className: "nice-color-picker__hue-slider",
+                          "aria-label": $("colorPicker.hue", "Hue")
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        "div",
+                        {
+                          className: "nice-color-picker__sv",
+                          style: {
+                            background: `linear-gradient(to top, var(--nice-text, #000), transparent), linear-gradient(to right, var(--nice-bg, #FFF), ${ie})`
+                          },
+                          onPointerDown: de,
+                          role: "application",
+                          "aria-label": $("colorPicker.svPalette", "Saturation/value palette"),
+                          children: /* @__PURE__ */ e(
+                            "span",
+                            {
+                              className: "nice-color-picker__sv-marker",
+                              style: { left: `${M.s}%`, top: `${100 - M.v}%` }
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ m("div", { className: "nice-color-picker__sliders", children: [
+                        /* @__PURE__ */ e("div", { className: "nice-color-picker__slider-col", children: ["h", "s", "l"].map((r) => {
+                          const g = r === "h" ? 360 : 100, z = T[r], C = (J) => fe(
+                            r === "h" ? J : T.h,
+                            r === "s" ? J : T.s,
+                            r === "l" ? J : T.l
+                          );
+                          return /* @__PURE__ */ m("div", { className: "nice-color-picker__slider-row", children: [
+                            /* @__PURE__ */ e("label", { className: "nice-color-picker__slider-label", children: r.toUpperCase() }),
+                            /* @__PURE__ */ e(
+                              "input",
+                              {
+                                type: "range",
+                                min: 0,
+                                max: g,
+                                value: z,
+                                disabled: n,
+                                onChange: (J) => C(Number(J.target.value))
+                              }
+                            ),
+                            /* @__PURE__ */ e(
+                              "input",
+                              {
+                                type: "number",
+                                min: 0,
+                                max: g,
+                                value: z,
+                                disabled: n,
+                                onChange: (J) => C(Number(J.target.value) || 0),
+                                className: "nice-input__native nice-color-picker__slider-num"
+                              }
+                            )
+                          ] }, r);
+                        }) }),
+                        /* @__PURE__ */ e("div", { className: "nice-color-picker__slider-col", children: ["r", "g", "b"].map((r) => {
+                          const g = N[r], z = (C) => ae(
+                            r === "r" ? C : N.r,
+                            r === "g" ? C : N.g,
+                            r === "b" ? C : N.b
+                          );
+                          return /* @__PURE__ */ m("div", { className: "nice-color-picker__slider-row", children: [
+                            /* @__PURE__ */ e("label", { className: "nice-color-picker__slider-label", children: r.toUpperCase() }),
+                            /* @__PURE__ */ e(
+                              "input",
+                              {
+                                type: "range",
+                                min: 0,
+                                max: 255,
+                                value: g,
+                                disabled: n,
+                                onChange: (C) => z(Number(C.target.value))
+                              }
+                            ),
+                            /* @__PURE__ */ e(
+                              "input",
+                              {
+                                type: "number",
+                                min: 0,
+                                max: 255,
+                                value: g,
+                                disabled: n,
+                                onChange: (C) => z(Number(C.target.value) || 0),
+                                className: "nice-input__native nice-color-picker__slider-num"
+                              }
+                            )
+                          ] }, r);
+                        }) })
+                      ] }),
+                      F && /* @__PURE__ */ m("div", { className: "nice-color-picker__alpha-row", children: [
+                        /* @__PURE__ */ e("label", { className: "nice-color-picker__slider-label", children: "A" }),
+                        /* @__PURE__ */ e(
+                          "input",
+                          {
+                            type: "range",
+                            min: 0,
+                            max: 100,
+                            value: Math.round(q * 100),
+                            disabled: n,
+                            onChange: (r) => Q(Number(r.target.value) / 100),
+                            className: "nice-color-picker__alpha-slider",
+                            style: {
+                              background: `linear-gradient(to right, transparent, rgb(${N.r},${N.g},${N.b}))`
+                            },
+                            "aria-label": $("colorPicker.alpha", "Alpha")
+                          }
+                        ),
+                        /* @__PURE__ */ e(
+                          "input",
+                          {
+                            type: "number",
+                            min: 0,
+                            max: 100,
+                            value: Math.round(q * 100),
+                            disabled: n,
+                            onChange: (r) => Q((Number(r.target.value) || 0) / 100),
+                            className: "nice-input__native nice-color-picker__slider-num"
+                          }
+                        )
+                      ] }),
+                      V.length > 0 && /* @__PURE__ */ e("div", { className: "nice-color-picker__popup-presets", children: V.map((r) => /* @__PURE__ */ e(
+                        "div",
+                        {
+                          className: `nice-color-picker__preset ${h === r ? "nice-color-picker__preset--active" : ""}`,
+                          style: { background: r },
+                          onClick: () => {
+                            S?.(r), Z(!1);
+                          },
+                          role: "button",
+                          tabIndex: 0,
+                          "aria-label": r,
+                          onKeyDown: (g) => {
+                            (g.key === "Enter" || g.key === " ") && (g.preventDefault(), S?.(r), Z(!1));
+                          }
+                        },
+                        r
+                      )) })
+                    ] });
+                  })()
+                }
+              ),
+              document.body
+            )
+          ] }) }),
+          w !== "right" && t && /* @__PURE__ */ e("div", { id: `${H}-error`, className: "nice-field__error", role: "alert", children: t }),
+          w !== "right" && !t && d && /* @__PURE__ */ e("div", { id: `${H}-helper`, className: "nice-field__helper", children: d })
+        ]
+      }
+    );
+  }
+);
+Xe.displayName = "NiceColorPicker";
+const kn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  NiceColorPicker: Xe,
+  hexToRgb: sn,
+  rgbToHex: rn
+}, Symbol.toStringTag, { value: "Module" })), hn = Me(
+  ({
+    children: c,
+    variant: d = "primary",
+    size: t = "md",
+    type: o = "button",
+    disabled: n,
+    loading: i,
+    fullWidth: a,
+    onClick: k,
+    leftIcon: p,
+    rightIcon: u,
+    error: h,
+    errorPlacement: S = "bottom",
+    className: V,
+    style: _,
+    id: x,
+    accessMode: F,
+    displayStyle: f,
+    ...Y
+  }, L) => {
+    const w = Oe(d), D = We(t), v = xe(F, x), R = v === "hidden";
+    (v === "disabled" || v === "readOnly") && (n = !0);
+    const U = He("button", f), I = $e("button", f), j = w !== "primary" ? (({ background: K, color: E, ...Z }) => Z)(
+      U
+    ) : U, $ = /* @__PURE__ */ m(
+      "button",
+      {
+        ref: L,
+        type: o,
+        id: x,
+        className: `nice-btn nice-btn--${w} nice-btn--${D} nice-btn--ds-${I} ${a ? "nice-btn--full-width" : ""} ${i ? "nice-btn--loading" : ""} ${h && !S ? "nice-btn--has-error" : ""} ${V || ""}`,
+        style: { ...j, ..._ },
+        disabled: n || i,
+        "aria-busy": i || void 0,
+        "aria-disabled": n || i || void 0,
+        onClick: k,
+        ...Y,
+        children: [
+          i && /* @__PURE__ */ e(
+            "svg",
+            {
+              className: "nice-btn__spinner",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "3",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "31.4 31.4", strokeLinecap: "round" })
+            }
+          ),
+          !i && p && /* @__PURE__ */ e("span", { "aria-hidden": "true", children: p }),
+          !i && /* @__PURE__ */ e("span", { children: c }),
+          i && /* @__PURE__ */ e("span", { style: { visibility: "hidden" }, "aria-hidden": "true", children: c }),
+          !i && u && /* @__PURE__ */ e("span", { "aria-hidden": "true", children: u })
+        ]
+      }
+    );
+    if (R)
+      return null;
+    if (!h)
+      return $;
+    const H = /* @__PURE__ */ e("div", { className: "nice-field__error", role: "alert", children: h });
+    return S === "right" ? /* @__PURE__ */ m(
+      "span",
+      {
+        className: `nice-btn-field nice-btn-field--right nice-field--${D}`,
+        style: {
+          display: "inline-flex",
+          flexDirection: "row",
+          alignItems: "center",
+          gap: "8px",
+          width: "fit-content"
+        },
+        children: [
+          $,
+          H
+        ]
+      }
+    ) : R ? null : /* @__PURE__ */ m(
+      "span",
+      {
+        className: `nice-btn-field nice-btn-field--bottom nice-field--${D}`,
+        style: {
+          display: "inline-flex",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          gap: "4px",
+          width: "fit-content"
+        },
+        children: [
+          $,
+          H
+        ]
+      }
+    );
+  }
+);
+hn.displayName = "NiceButton";
+const wn = ({
+  tabs: c,
+  activeTab: d,
+  onChange: t,
+  variant: o = "default",
+  vertical: n,
+  size: i = "md",
+  className: a,
+  style: k,
+  displayStyle: p
+}) => {
+  const u = He("tab", p), h = $e("tab", p), [S, V] = ue(d || c[0]?.id), _ = d ?? S, x = ne(
+    (f) => {
+      V(f), t?.(f);
+    },
+    [t]
+  ), F = c.find((f) => f.id === _)?.content;
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: `nice-tabs nice-tabs--${i} nice-tabs--ds-${h} ${a || ""}`,
+      style: { ...u, ...k, ...n ? { display: "flex", gap: 16 } : {} },
+      children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: `nice-tabs__list ${o !== "default" ? `nice-tabs__list--${o}` : ""} ${n ? "nice-tabs__list--vertical" : ""}`,
+            role: "tablist",
+            children: c.map((f) => /* @__PURE__ */ m(
+              "button",
+              {
+                type: "button",
+                role: "tab",
+                "aria-selected": _ === f.id,
+                className: `nice-tabs__tab ${_ === f.id ? "nice-tabs__tab--active" : ""} ${f.disabled ? "nice-tabs__tab--disabled" : ""}`,
+                disabled: f.disabled,
+                onClick: () => x(f.id),
+                children: [
+                  f.icon,
+                  /* @__PURE__ */ e("span", { children: f.label }),
+                  f.badge !== void 0 && /* @__PURE__ */ e("span", { className: "nice-tabs__badge", children: f.badge })
+                ]
+              },
+              f.id
+            ))
+          }
+        ),
+        F && /* @__PURE__ */ e("div", { className: "nice-tabs__panel", role: "tabpanel", children: F })
+      ]
+    }
+  );
+};
+export {
+  Ge as N,
+  Xe as a,
+  Qe as b,
+  Ze as c,
+  Pe as d,
+  tn as e,
+  wn as f,
+  hn as g,
+  bn as h,
+  Nn as i,
+  yn as j,
+  $n as k,
+  kn as l
+};