xtreme-ui 0.0.122 → 0.0.123

package/dist/ActionCard-B8grjL52.js

@@ -0,0 +1,26 @@
+import { jsx as d } from "react/jsx-runtime";
+import f from "clsx";
+import { forwardRef as n } from "react";
+import './ActionCard.css';var s = /* @__PURE__ */ ((r) => (r[r.mini = 100] = "mini", r[r.default = 164] = "default", r[r.large = 254] = "large", r))(s || {});
+const p = n((r, e) => {
+  const { className: l, children: o, style: c = {}, size: a = "default", onClick: i } = r, t = Array.isArray(a) ? a : [s[a], s[a]], m = f("xtrActionCard", "shadowRipple", `${a}Size`, l);
+  return /* @__PURE__ */ d(
+    "footer",
+    {
+      ref: e,
+      className: m,
+      style: {
+        "--cardWidth": `${t[0]}px`,
+        "--cardHeight": `${t[1]}px`,
+        ...c
+      },
+      onClick: i,
+      children: o
+    }
+  );
+});
+p.displayName = "ActionCard";
+export {
+  p as A,
+  s as E
+};

package/dist/Avatar-soTst6QB.js

@@ -0,0 +1,138 @@
+import { jsx as n } from "react/jsx-runtime";
+import L from "clsx";
+import { Icon as M } from "gliff";
+import { forwardRef as R, useState as c, useEffect as T } from "react";
+import { r as j, b as k } from "./imageHelper-VIHg_IWS.js";
+import './Avatar.css';const i = {
+  happy: [
+    "f118",
+    "e392",
+    "f580",
+    "f5b8",
+    "e409",
+    "e3a4",
+    "e39d",
+    "f5c2",
+    "e398",
+    "e396",
+    "f4da",
+    "e391",
+    "e390",
+    "e38f",
+    "e38d",
+    "e389",
+    "e383",
+    "f59c",
+    "f59b",
+    "f59a",
+    "f599",
+    "f598",
+    "e37d",
+    "f597",
+    "f596",
+    "e379",
+    "f58c",
+    "f581",
+    "f58b",
+    "f58a",
+    "f589",
+    "f588",
+    "f587",
+    "f586",
+    "f585",
+    "f584",
+    "f583",
+    "f582",
+    "e377",
+    "f579",
+    "e2fe",
+    "e372",
+    "e36e",
+    "e47c",
+    "e36b",
+    "e368",
+    "f2fe"
+  ],
+  sad: [
+    "e3a0",
+    "e3a5",
+    "e3a3",
+    "e3a2",
+    "e3a1",
+    "e39f",
+    "f5c8",
+    "e485",
+    "e397",
+    "e395",
+    "e394",
+    "e393",
+    "e38b",
+    "f5b4",
+    "e38a",
+    "f5b3",
+    "f5a5",
+    "e388",
+    "e387",
+    "e386",
+    "e385",
+    "e384",
+    "e382",
+    "e380",
+    "e483",
+    "f5a4",
+    "f11a",
+    "e37c",
+    "e37b",
+    "e37a",
+    "e378",
+    "f57f",
+    "e376",
+    "f57a",
+    "f119",
+    "e375",
+    "e374",
+    "e373",
+    "e480",
+    "e371",
+    "e47f",
+    "f567",
+    "e36f",
+    "e47e",
+    "e36d",
+    "e36c",
+    "e47d",
+    "e36a",
+    "e369",
+    "f556",
+    "f6e2",
+    "f8f6",
+    "f54c"
+  ]
+};
+var h = /* @__PURE__ */ ((a) => (a[a.mini = 64] = "mini", a[a.default = 96] = "default", a[a.large = 128] = "large", a))(h || {});
+const w = R((a, u) => {
+  const { className: b, src: f, file: o, alt: y, placeholderIcon: I, size: l = "default", onClick: x } = a, [m, d] = c(), [N, F] = c(i.happy[0]), [v, s] = c(!!f || !!o), [p, r] = c(!1), g = typeof l == "number" ? l : h[l], C = L("xtrAvatar", b, v && "loading", p && "error"), t = (e) => {
+    e && setTimeout(() => d(e), 300), setTimeout(() => s(!1), 1e3);
+  };
+  return T(() => {
+    F(i.happy[Math.floor(Math.random() * i.happy.length)]);
+    try {
+      o ? (s(!0), r(!1), j(o).then((e) => t(e)).catch((e) => {
+        console.log(e), s(!1), r(!0);
+      })) : f ? (s(!0), r(!1), k(f).then((e) => t(e)).catch((e) => {
+        console.log(e, f), s(!1), r(!0);
+      })) : (d(void 0), t());
+    } catch {
+      t();
+    }
+  }, [f, o]), /* @__PURE__ */ n("div", { ref: u, className: C, style: { "--avatarSize": `${g}px` }, onClick: x, role: "img", children: m ? (
+    // biome-ignore lint/performance/noImgElement: library component wrapping img
+    /* @__PURE__ */ n("img", { className: "image", src: m, alt: y })
+  ) : /* @__PURE__ */ n(M, { className: "placeholder", type: "solid", size: 8 + g / 4, code: p ? "e1b7" : I ?? N }) });
+});
+w.displayName = "Avatar";
+export {
+  w as A,
+  h as E,
+  i as F
+};

package/dist/Button-8OfYrlfv.js

@@ -0,0 +1,20 @@
+import { jsxs as N, jsx as n } from "react/jsx-runtime";
+import k from "clsx";
+import { Icon as x } from "gliff";
+import { forwardRef as D } from "react";
+import { P as b } from "./ProgressBar-BYsdT_xg.js";
+import './Button.css';var t = /* @__PURE__ */ ((r) => (r.primary = "primary", r.primaryDanger = "primaryDanger", r.secondary = "secondary", r.secondaryDanger = "secondaryDanger", r.link = "link", r.linkDanger = "linkDanger", r))(t || {});
+const h = D((r, m) => {
+  const { className: d, style: p = {}, label: a, type: i = "primary", size: l = "default", disabled: f = !1, loading: o = !1, icon: e, iconType: y, iconPosition: s = "left", onClick: g } = r, c = e ? /* @__PURE__ */ n(x, { className: "icon", code: e, type: y, size: l }) : null, u = k("xtrButton", "shadowRipple", `${i}Type`, `${l}Size`, !a && "iconOnly", o && "loading", d);
+  return !a && !e ? null : /* @__PURE__ */ N("button", { ref: m, className: u, style: p, onClick: g, disabled: f, children: [
+    i.includes(t.link) && /* @__PURE__ */ n(b, { className: "underline", intermediate: o }),
+    s === "left" && c,
+    a && /* @__PURE__ */ n("span", { className: "label", children: a }),
+    s === "right" && c
+  ] });
+});
+h.displayName = "Button";
+export {
+  h as B,
+  t as E
+};

package/dist/ColorPicker-DTlIMXCI.js

@@ -0,0 +1,18 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import p from "@uiw/react-color-alpha";
+import C from "@uiw/react-color-shade-slider";
+import d from "@uiw/react-color-wheel";
+import f from "clsx";
+import { forwardRef as x } from "react";
+import './ColorPicker.css';const s = 180, N = x((l, h) => {
+  const { className: m, shade: t = !0, alpha: c = !0, color: o = { h: 0, s: 0, v: 100, a: 1 }, setColor: a } = l, i = f("xtrColorPicker", m);
+  return /* @__PURE__ */ n("div", { ref: h, className: i, children: [
+    /* @__PURE__ */ e(d, { className: "wheel", color: o, width: s, height: s, onChange: (r) => a(r.hsva) }),
+    t && /* @__PURE__ */ e(C, { className: "shade", hsva: o, onChange: ({ v: r }) => a({ ...o, v: r }) }),
+    c && /* @__PURE__ */ e(p, { className: "alpha", hsva: o, onChange: ({ a: r }) => a({ ...o, a: r }) })
+  ] });
+});
+N.displayName = "ColorPicker";
+export {
+  N as C
+};

package/dist/ColorPopper-DD-LwyH4.js

@@ -0,0 +1,208 @@
+import { jsxs as h, Fragment as ie, jsx as t } from "react/jsx-runtime";
+import { useFloating as ae, autoUpdate as ce, shift as he, flip as de, offset as me, useTransitionStyles as pe, useInteractions as ue, useClick as fe, useDismiss as Ce } from "@floating-ui/react";
+import x from "clsx";
+import { colord as r, getFormat as ge } from "colord";
+import { Icon as ve } from "gliff";
+import { forwardRef as xe, useMemo as I, useState as y, useRef as ye, useEffect as j } from "react";
+import { C as He } from "./ColorPicker-DTlIMXCI.js";
+import { T as be } from "./Textfield-DD7cRuMt.js";
+import { u as $e, g as Ne } from "./useScreen-W3HOVFnS.js";
+import { T as Te } from "./theme-ykEJBufR.js";
+import { B as E } from "./Button-8OfYrlfv.js";
+import './ColorPopper.css';function Pe(s, l) {
+  if (typeof s == "function")
+    s(l);
+  else if (s != null)
+    try {
+      s.current = l;
+    } catch {
+      throw new Error(`Cannot assign value "${l}" to ref "${s}"`);
+    }
+}
+function we(s) {
+  return (l) => {
+    s.forEach((u) => Pe(u, l));
+  };
+}
+function z(s, l) {
+  const {
+    className: u,
+    popperClassName: A,
+    input: H = "textfield",
+    size: q = "default",
+    placeholder: D = "Color Picker",
+    colorHeading: f = "Pick color",
+    schemeHeading: F,
+    themeScheme: b,
+    setThemeScheme: U,
+    showReset: W = !0,
+    alpha: _,
+    shade: G,
+    swatch: $,
+    hideWheel: B = !1,
+    color: d,
+    setColor: C
+  } = s, J = $e(), n = I(() => r(d), []), g = I(() => ge(d), [d]), [N, m] = y(n.toHsv()), [i, p] = y(n.toHex()), [K, Q] = y(f), T = ye(!1), [L, P] = y(!1), { refs: w, floatingStyles: X, context: R } = ae({
+    open: L,
+    onOpenChange: P,
+    middleware: [he({ crossAxis: !0, padding: 18 }), de(), me(({ placement: e }) => e === "bottom" ? 10 : 16)],
+    whileElementsMounted: ce
+  }), { isMounted: Y, styles: Z } = pe(R, {
+    duration: 200,
+    initial: ({ side: e }) => ({
+      opacity: 0,
+      translate: e === "bottom" ? "0px 8px" : "0px -8px"
+    })
+  }), { getReferenceProps: V, getFloatingProps: ee } = ue([fe(R), Ce(R)]), [S, oe, k] = I(() => {
+    const e = r(N), o = e.toHsl(), a = n.toHsl();
+    return [
+      `${Math.round(o.h)} ${Math.round(o.s)}% ${Math.round(o.l)}%`,
+      `${Math.round(a.h)} ${Math.round(a.s)}% ${Math.round(a.l)}%`,
+      e.isLight() ? "black" : "white"
+    ];
+  }, [n, N]), te = i !== n.toHex(), M = H === "button" || H === "buttonLabel", v = (e) => {
+    T.current = !0, g === "rgb" ? C(e.toRgb()) : g === "hex" ? C(e.toHex()) : g === "hsl" ? C(e.toHsl()) : g === "hsv" && C(e.toHsv());
+  }, O = (e) => {
+    p(e);
+    const o = r(e);
+    o.isValid() && (m(o.toHsv()), v(o));
+  }, se = (e) => {
+    const o = r(e);
+    m(e), p(o.toHex()), v(o);
+  }, re = (e) => {
+    const o = r(e);
+    m(o.toHsv()), p(o.toHex()), v(o);
+  }, ne = () => {
+    m(n.toHsv()), p(n.toHex()), v(n);
+  };
+  return j(() => {
+    if (!T.current) {
+      const e = r(d);
+      m(e.toHsv()), p(e.toHex());
+    }
+    T.current = !1;
+  }, [d]), j(() => {
+    Q(Ne(r(i).toHsl()) ?? f);
+  }, [f, i]), /* @__PURE__ */ h(ie, { children: [
+    M ? /* @__PURE__ */ t(
+      E,
+      {
+        className: "xtrColorButton",
+        ref: w.setReference,
+        size: q,
+        icon: "f53f",
+        iconType: "solid",
+        label: H === "buttonLabel" ? i : void 0,
+        style: {
+          "--themeColor": S,
+          "--iconColor": k,
+          color: k
+        },
+        onClick: () => P(!0),
+        ...V()
+      }
+    ) : /* @__PURE__ */ t(
+      be,
+      {
+        className: x("xtrColorInput", u),
+        ref: w.setReference,
+        placeholder: D,
+        icon: "f53f",
+        iconType: "solid",
+        active: L,
+        value: i,
+        onChange: (e) => O(e.target.value),
+        style: {
+          "--colorBrandPrimary": S,
+          "--iconColor": k
+        },
+        onFocus: () => P(!0),
+        ...V()
+      }
+    ),
+    Y && /* @__PURE__ */ h(
+      "div",
+      {
+        ref: we([l, w.setFloating]),
+        className: x("xtrColorPopper", A),
+        style: { ...X, ...Z, "--colorBrandPrimary": S },
+        ...ee(),
+        children: [
+          ($ || !B) && /* @__PURE__ */ h("div", { className: x("header", M && "withInput"), children: [
+            /* @__PURE__ */ h("div", { className: "heading", children: [
+              /* @__PURE__ */ h("div", { children: [
+                /* @__PURE__ */ t("h1", { children: K }),
+                M && /* @__PURE__ */ t(
+                  "input",
+                  {
+                    placeholder: "#Hex",
+                    className: x("popperInput", u),
+                    value: i,
+                    autoFocus: J.isLargest,
+                    onChange: (e) => O(e.target.value)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ t("h1", { children: f })
+            ] }),
+            W && /* @__PURE__ */ t(
+              ve,
+              {
+                code: "f1da",
+                type: "solid",
+                style: {
+                  "--colorBrandPrimary": oe,
+                  visibility: te ? "visible" : "hidden"
+                },
+                onClick: ne
+              }
+            )
+          ] }),
+          $ && /* @__PURE__ */ t("div", { className: "swatch", children: $.map((e, o) => {
+            const a = r(i).isEqual(e), c = r(e).toHsl(), le = `${c.h} ${c.s}% ${c.l}%`;
+            return /* @__PURE__ */ t(
+              E,
+              {
+                className: "swatchItem",
+                icon: "f00c",
+                iconType: "solid",
+                size: "mini",
+                style: {
+                  "--themeColor": le,
+                  color: a ? "white" : "transparent"
+                },
+                onClick: () => re(c)
+              },
+              `ThemeColor-${c.h}${c.s}${c.l}-${o}`
+            );
+          }) }),
+          !B && /* @__PURE__ */ t(He, { className: "colorPicker", alpha: _, shade: G, color: N, setColor: se }),
+          F && /* @__PURE__ */ h("div", { className: "themeScheme", children: [
+            /* @__PURE__ */ t("div", { className: "header", children: /* @__PURE__ */ h("div", { className: "heading", children: [
+              /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t("h1", { children: b }) }),
+              /* @__PURE__ */ t("h1", { children: F })
+            ] }) }),
+            /* @__PURE__ */ t("div", { className: "schemeSelector", children: Te.map(({ name: e, icon: o }, a) => /* @__PURE__ */ t(
+              E,
+              {
+                icon: o,
+                iconType: "solid",
+                disabled: b === e,
+                type: b === e ? "primary" : "secondary",
+                onClick: () => U?.(e)
+              },
+              `ThemeScheme-${e}-${a}`
+            )) })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+const je = xe(z);
+z.displayName = "ColorPopper";
+export {
+  je as C,
+  Pe as a,
+  we as m
+};

package/dist/FilePicker-B0CAFe_F.js

@@ -0,0 +1,77 @@
+import { jsxs as d, Fragment as h, jsx as s } from "react/jsx-runtime";
+import C from "clsx";
+import { Icon as P } from "gliff";
+import { createPortal as F } from "react-dom";
+import { useFilePicker as j } from "use-file-picker";
+import { I as x } from "./ImageEditor-CHAOpQQ3.js";
+import { B as E } from "./Button-8OfYrlfv.js";
+import './FilePicker.css';const v = ["jpg", "jpeg", "png", "gif", ".bmp", "webp", "heif", "heic"], l = {
+  file: "f15b",
+  multimedia: "f86d",
+  image: "f1c5",
+  jpg: "e646",
+  jpeg: "e646",
+  png: "e666",
+  gif: "e645",
+  svg: "e64b",
+  eps: "e644",
+  audio: "f1c7",
+  mp3: "e648",
+  wav: "f478",
+  video: "f1c8",
+  mp4: "e649",
+  mov: "e647",
+  pdf: "f1c1",
+  doc: "e5ed",
+  docx: "e5ed",
+  xls: "e64d",
+  xlsx: "e64d",
+  ppt: "e64a",
+  pptx: "e64a",
+  csv: "f6dd",
+  html: "f1c9",
+  zip: "e5ee",
+  rar: "f1c6",
+  "7z": "f1c6"
+}, I = (e = "") => {
+  if (e.includes(",") && e.includes("/")) {
+    let i = 0;
+    if (e.split(",").map((n) => n.split("/")?.[0]).forEach((n) => {
+      n in l && i++;
+    }), i > 0) return l.multimedia;
+  }
+  if (e.includes("/")) {
+    const [i, r] = e.split("/");
+    if (r in l) return l[r];
+    if (i in l) return l[i];
+  }
+  const c = e.includes(",") ? e.split(",")?.[0]?.replace(".", "") : e.replace(".", "");
+  return c in l ? l[c] : l.file;
+}, H = (e) => {
+  const { className: c, children: i, draggable: r = !1, editable: n = !1, multiple: t = !1, accept: a = "*/*", onChange: m } = e, p = n && !t && (a.includes("image") || v.includes(a?.split?.(",")?.[0]?.replace(".", ""))), { openFilePicker: g, loading: k, plainFiles: f, clear: b } = j({
+    accept: a,
+    multiple: t,
+    onFilesSuccessfullySelected: ({ plainFiles: o }) => {
+      p || m(o);
+    }
+  }), u = C("xtrFilePicker", i && "wrapper", r && "draggable", c);
+  return i ? /* @__PURE__ */ d(h, { children: [
+    /* @__PURE__ */ s("div", { className: u, onClick: g, children: i }),
+    p && f?.[0] && F(/* @__PURE__ */ s(x, { file: f?.[0], clearFile: b, onChange: (o) => m(o.blob ? [o.blob] : []) }), document.body)
+  ] }) : r ? /* @__PURE__ */ d("div", { className: u, onClick: g, children: [
+    /* @__PURE__ */ s(P, { code: "f0ed", set: "duotone", size: 64 }),
+    /* @__PURE__ */ d("h2", { children: [
+      "Drop File",
+      t ? "s" : "",
+      " Here"
+    ] }),
+    /* @__PURE__ */ s("p", { children: "or click here to open file chooser" })
+  ] }) : /* @__PURE__ */ d(h, { children: [
+    /* @__PURE__ */ s(E, { className: u, label: `Choose File${t ? "s" : ""}`, icon: I(a), onClick: g, loading: k }),
+    p && f?.[0] && F(/* @__PURE__ */ s(x, { file: f?.[0], clearFile: b, onChange: (o) => m(o.blob ? [o.blob] : []) }), document.body)
+  ] });
+};
+export {
+  H as F,
+  l as a
+};

package/dist/ImageEditor-CHAOpQQ3.js

@@ -0,0 +1,57 @@
+import { jsxs as h, jsx as o } from "react/jsx-runtime";
+import Z from "clsx";
+import { Icon as n } from "gliff";
+import { useState as t, useCallback as b, useEffect as j } from "react";
+import A from "react-easy-crop";
+import { S as R } from "./Spinner-DvZRWrE7.js";
+import { r as $, g as _, a as q } from "./imageHelper-VIHg_IWS.js";
+import './ImageEditor.css';const S = 1, Q = (x) => {
+  const { className: y, file: r, clearFile: m, minImageSize: a, cropShape: k = "round", aspect: z = 1, zoomSpeed: v = 1, onChange: w } = x, [l, d] = t(), [E, p] = t(!0), [F, g] = t(S), [L, f] = t({ x: 0, y: 0 }), [C, i] = t(0), [M, u] = t(), N = Z("xtrImageEditor", y), P = async () => {
+    try {
+      const e = await q(l, M, C);
+      e && w(e);
+    } catch (e) {
+      console.error(e);
+    }
+    s();
+  }, s = b(() => {
+    d(void 0), f({ x: 0, y: 0 }), g(S), i(0), u(void 0), m?.(), p(!0);
+  }, [m]);
+  return j(() => {
+    (async () => {
+      if (!r) return;
+      const c = await $(r), I = await _(c);
+      if (a && Math.min(I.width, I.height) < a)
+        return s(), console.log(`Image should be at least ${a}x${a}`);
+      d(c);
+    })();
+  }, [s, r, a]), r ? /* @__PURE__ */ h("div", { className: N, children: [
+    /* @__PURE__ */ o(
+      A,
+      {
+        image: l,
+        onMediaLoaded: () => p(!1),
+        cropShape: k,
+        aspect: z,
+        zoom: F,
+        zoomSpeed: v,
+        onZoomChange: g,
+        rotation: C,
+        onRotationChange: i,
+        crop: L,
+        onCropChange: f,
+        onCropComplete: (e, c) => u(c)
+      }
+    ),
+    /* @__PURE__ */ h("div", { className: "editorControls", children: [
+      /* @__PURE__ */ o(n, { code: "f00d", type: "solid", onClick: s }),
+      /* @__PURE__ */ o(n, { code: "f2ea", type: "solid", onClick: () => i((e) => e - 90) }),
+      /* @__PURE__ */ o(n, { code: "f2f9", type: "solid", onClick: () => i((e) => e + 90) }),
+      /* @__PURE__ */ o(n, { code: "f00c", type: "solid", onClick: P })
+    ] }),
+    E && /* @__PURE__ */ o(R, { fullpage: !0 })
+  ] }) : null;
+};
+export {
+  Q as I
+};

package/dist/Navigation-CZ6ofO5o.js

@@ -0,0 +1,33 @@
+import { jsxs as o, jsx as s } from "react/jsx-runtime";
+import r from "clsx";
+import { Icon as v } from "gliff";
+import { forwardRef as g, useState as x, useEffect as b } from "react";
+import './Navigation.css';const j = g((c, t) => {
+  const { className: l, children: m, hrefPropName: f = "href", routes: d = [], pathname: e = "", as: h = "a" } = c, [i, n] = x("/"), N = r("xtrNavigation", l);
+  return b(() => {
+    i === e && n("/");
+  }, [i, e]), /* @__PURE__ */ o("nav", { ref: t, className: N, children: [
+    /* @__PURE__ */ s("div", { className: "brand", children: m }),
+    /* @__PURE__ */ s("div", { className: "routeList", children: d.map((a, p) => /* @__PURE__ */ o(
+      h,
+      {
+        className: r("route", a?.href === i && "loading", a?.href === e && "active"),
+        [f]: a?.href,
+        onClick: () => {
+          setTimeout(() => {
+            i !== e && n(a?.href);
+          }, 150);
+        },
+        children: [
+          a?.icon && /* @__PURE__ */ s(v, { code: a?.icon, set: a?.href === e ? "duotone" : void 0, type: a?.href === e ? void 0 : "light" }),
+          /* @__PURE__ */ s("span", { className: "label", children: a?.name })
+        ]
+      },
+      `route-${a?.href}-${p}`
+    )) })
+  ] });
+});
+j.displayName = "Navigation";
+export {
+  j as N
+};

package/dist/ProgressBar-BYsdT_xg.js

@@ -0,0 +1,11 @@
+import { jsx as s } from "react/jsx-runtime";
+import l from "clsx";
+import { forwardRef as n } from "react";
+import './ProgressBar.css';const p = n((e, a) => {
+  const { className: o, progress: t = 100, intermediate: r = !1 } = e, m = r ? 150 : Math.min(Math.max(t, 0), 100), i = l("xtrProgressBar", r && "intermediate", o);
+  return /* @__PURE__ */ s("div", { ref: a, className: i, role: "progressbar", children: /* @__PURE__ */ s("span", { className: "progress", style: { width: `${m}%` } }) });
+});
+p.displayName = "ProgressBar";
+export {
+  p as P
+};

package/dist/Select-N5Uw9cYv.js

@@ -0,0 +1,75 @@
+import { jsxs as O, jsx as c } from "react/jsx-runtime";
+import j from "clsx";
+import { Icon as y } from "gliff";
+import { useId as z, useState as H, useMemo as q } from "react";
+import w from "react-select";
+import { i as h } from "./common-JWQuqtVw.js";
+import './Select.css';function W(S) {
+  const {
+    className: v,
+    multi: e = !1,
+    placeholder: n = "Select an option",
+    noOptionsMessage: x,
+    icon: t,
+    size: i = "default",
+    iconType: g = "regular",
+    clearable: b = !0,
+    searchable: u = !0,
+    disabled: C = !1,
+    loading: N = !1,
+    options: s,
+    value: o,
+    onChange: m
+  } = S, p = z(), [f, d] = H(!1), I = q(() => {
+    if (e) {
+      const l = o ?? [];
+      return s.filter((a) => l.some((r) => h(a.value, r)));
+    } else
+      return s.find((l) => h(l.value, o)) || null;
+  }, [e, s, o]), M = j(
+    "xtrSelectWrapper",
+    i && `${i}Size`,
+    e ? "multi" : "single",
+    t && "withIcon",
+    !!o && "withValue",
+    f && "open",
+    !u && "noSearch",
+    v
+  );
+  return /* @__PURE__ */ O("div", { className: M, children: [
+    /* @__PURE__ */ c(
+      w,
+      {
+        className: "xtrSelect",
+        classNamePrefix: "xtrSelect",
+        id: p,
+        isMulti: e,
+        menuIsOpen: f,
+        onMenuOpen: () => d(!0),
+        onMenuClose: () => d(!1),
+        noOptionsMessage: x,
+        placeholder: n,
+        isClearable: b,
+        isSearchable: u,
+        isDisabled: C,
+        isLoading: N,
+        options: s,
+        value: I,
+        onChange: (l) => {
+          if (e) {
+            const a = l?.map((r) => r.value) ?? [];
+            m(a);
+          } else {
+            const a = l?.value ?? null;
+            m(a);
+          }
+        }
+      }
+    ),
+    n && !e && /* @__PURE__ */ c("label", { className: "placeholder", htmlFor: p, children: n }),
+    t && /* @__PURE__ */ c(y, { className: "xtrSelectIcon", code: t, type: g })
+  ] });
+}
+export {
+  W as S
+};