@solostylist/ui-kit 1.0.197 → 1.0.200

package/dist/s-pixel-reveal/s-pixel-reveal.js

@@ -1,5 +1,5 @@
-import { j as A } from "../jsx-runtime-tc70JA_2.js";
-import { forwardRef as Q, useRef as h, useEffect as N, useCallback as q } from "react";
+import { j as q } from "../jsx-runtime-tc70JA_2.js";
+import { forwardRef as Q, useRef as u, useEffect as N, useCallback as y } from "react";
 import { brand as E } from "../theme/theme-primitives.js";
 class U {
   x;
@@ -15,104 +15,109 @@ class U {
   counterStep;
   isReverse;
   isShimmer;
-  constructor(c, l, o, z, y, M, b) {
-    this.x = c, this.y = l, this.color = o, this.speed = (Math.random() * 0.8 + 0.1) * z, this.size = 0, this.sizeStep = Math.random() * 0.4, this.minSize = 0.5, this.maxSize = b, this.delay = y, this.counter = 0, this.counterStep = M, this.isReverse = !1, this.isShimmer = !1;
+  constructor(a, f, h, d, M, b, g) {
+    this.x = a, this.y = f, this.color = h, this.speed = (Math.random() * 0.8 + 0.1) * d, this.size = 0, this.sizeStep = Math.random() * 0.4, this.minSize = 0.5, this.maxSize = g, this.delay = M, this.counter = 0, this.counterStep = b, this.isReverse = !1, this.isShimmer = !1;
   }
-  update(c) {
-    return c ? this.counter < this.delay ? (this.counter += this.counterStep, !0) : (this.isShimmer ? this.isReverse ? (this.size -= this.speed, this.size <= this.minSize && (this.size = this.minSize, this.isReverse = !1)) : (this.size += this.speed, this.size >= this.maxSize && (this.size = this.maxSize, this.isReverse = !0)) : this.size < this.maxSize ? this.size += this.sizeStep : this.isShimmer = !0, !0) : (this.isShimmer = !1, this.counter = 0, this.size > 0 ? (this.size -= 0.1, !0) : !1);
+  update(a) {
+    return a ? this.counter < this.delay ? (this.counter += this.counterStep, !0) : (this.isShimmer ? this.isReverse ? (this.size -= this.speed, this.size <= this.minSize && (this.size = this.minSize, this.isReverse = !1)) : (this.size += this.speed, this.size >= this.maxSize && (this.size = this.maxSize, this.isReverse = !0)) : this.size < this.maxSize ? this.size += this.sizeStep : this.isShimmer = !0, !0) : (this.isShimmer = !1, this.counter = 0, this.size > 0 ? (this.size -= 0.1, !0) : !1);
   }
-  draw(c, l) {
-    const o = (l - this.size) * 0.5;
-    c.fillRect(this.x + o, this.y + o, this.size, this.size);
+  draw(a, f) {
+    const h = (f - this.size) * 0.5;
+    a.fillRect(this.x + h, this.y + h, this.size, this.size);
   }
 }
 const Z = Q(
   ({
-    gap: s = 5,
-    speed: c = 100,
-    colors: l = [E[400], E[500], E[600]],
-    loading: o = !0,
-    src: z,
-    alt: y = "",
-    style: M,
-    children: b,
+    gap: n = 5,
+    speed: a = 100,
+    colors: f = [E[400], E[500], E[600]],
+    loading: h = !0,
+    src: d,
+    alt: M = "",
+    style: b,
+    children: g,
     instant: k = !0,
     ...$
-  }, S) => {
-    const g = h(null), w = h(null), D = h(null), p = h(/* @__PURE__ */ new Map()), a = h(null), I = h(1e3 / 60), C = h(0), P = h(!1);
+  }, p) => {
+    const C = u(null), z = u(null), D = u(null), m = u(/* @__PURE__ */ new Map()), l = u(null), I = u(1e3 / 60), P = u(0), j = u(!1);
     N(() => {
-      P.current = typeof window < "u" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : !1;
+      j.current = typeof window < "u" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : !1;
     }, []);
-    const O = q((e, n, u, r) => {
-      const t = e - u, i = n - r;
+    const O = y((e, r, c, s) => {
+      const t = e - c, i = r - s;
       return t * t + i * i;
-    }, []), V = q(() => {
-      const e = g.current, n = e?.getContext("2d");
-      if (!e || !n) return;
-      p.current = /* @__PURE__ */ new Map();
-      const u = P.current ? 0 : Math.max(0, Math.min(100, c)) * 1e-3, r = window.devicePixelRatio || 1, t = e.width / r, i = e.height / r, x = 2, X = 0.5, H = (t + i) * 0.01, T = t % s / 2, W = i % s / 2;
-      for (let f = T; f < t; f += s)
-        for (let m = W; m < i; m += s) {
-          const d = l[Math.floor(Math.random() * l.length)];
-          let v = 0;
-          if (!k && !P.current) {
-            const G = f + s / 2, J = m + s / 2, K = t / 2, L = i / 2;
-            v = Math.sqrt(O(G, J, K, L));
+    }, []), V = y(
+      (e, r, c) => {
+        l.current && cancelAnimationFrame(l.current), P.current = performance.now();
+        const s = () => {
+          l.current = requestAnimationFrame(s);
+          const t = performance.now(), i = t - P.current;
+          if (i < I.current) return;
+          P.current = t - i % I.current, e.clearRect(0, 0, r, c);
+          let o = !1;
+          m.current.forEach((x, F) => {
+            e.fillStyle = F;
+            for (const S of x)
+              S.update(h) && (S.draw(e, n), o = !0);
+          }), !h && !o && l.current && (cancelAnimationFrame(l.current), l.current = null);
+        };
+        s();
+      },
+      [h, n]
+    ), X = y(() => {
+      const e = C.current, r = e?.getContext("2d");
+      if (!e || !r) return;
+      m.current = /* @__PURE__ */ new Map();
+      const c = j.current ? 0 : Math.max(0, Math.min(100, a)) * 1e-3, s = window.devicePixelRatio ?? 1, t = e.width / s, i = e.height / s, o = 2, x = 0.5, F = (t + i) * 0.01, S = t % n / 2, Y = i % n / 2;
+      for (let w = S; w < t; w += n)
+        for (let v = Y; v < i; v += n) {
+          const R = f[Math.floor(Math.random() * f.length)];
+          let B = 0;
+          if (!k && !j.current) {
+            const W = w + n / 2, G = v + n / 2, J = t / 2, K = i / 2;
+            B = Math.sqrt(O(W, G, J, K));
           }
-          const F = Math.random() * 4 + H, R = Math.random() * (x - X) + X, B = new U(f, m, d, u, v, F, R);
-          p.current.has(d) || p.current.set(d, []), p.current.get(d).push(B);
+          const H = Math.random() * 4 + F, L = Math.random() * (o - x) + x, T = new U(w, v, R, c, B, H, L);
+          m.current.has(R) || m.current.set(R, []), m.current.get(R).push(T);
         }
-      a.current && cancelAnimationFrame(a.current), C.current = performance.now();
-      const Y = () => {
-        a.current = requestAnimationFrame(Y);
-        const f = performance.now(), m = f - C.current;
-        if (m < I.current) return;
-        C.current = f - m % I.current, n.clearRect(0, 0, t, i);
-        let d = !1;
-        p.current.forEach((v, F) => {
-          n.fillStyle = F;
-          for (const R of v)
-            R.update(o) && (R.draw(n, s), d = !0);
-        }), !o && !d && a.current && (cancelAnimationFrame(a.current), a.current = null);
-      };
-      Y();
-    }, [s, c, l, k, o, O]), j = q(() => {
-      const e = g.current, n = w.current, u = e?.getContext("2d");
-      if (!e || !n || !u) return;
-      const r = n.getBoundingClientRect();
-      if (r.width === 0 || r.height === 0) return;
-      const t = Math.floor(r.width), i = Math.floor(r.height), x = window.devicePixelRatio || 1;
-      e.width = t * x, e.height = i * x, e.style.width = `${t}px`, e.style.height = `${i}px`, u.setTransform(1, 0, 0, 1, 0, 0), u.scale(x, x), V();
-    }, [V]);
+      V(r, t, i);
+    }, [n, a, f, k, O, V]), A = y(() => {
+      const e = C.current, r = z.current, c = e?.getContext("2d");
+      if (!e || !r || !c) return;
+      const s = r.getBoundingClientRect();
+      if (s.width === 0 || s.height === 0) return;
+      const t = Math.floor(s.width), i = Math.floor(s.height), o = window.devicePixelRatio ?? 1;
+      e.width = t * o, e.height = i * o, e.style.width = `${t}px`, e.style.height = `${i}px`, c.setTransform(1, 0, 0, 1, 0, 0), c.scale(o, o), X();
+    }, [X]);
     return N(() => {
-      j();
+      A();
       const e = new ResizeObserver(() => {
-        requestAnimationFrame(() => j());
+        requestAnimationFrame(() => A());
       });
-      return w.current && e.observe(w.current), () => {
-        e.disconnect(), a.current && cancelAnimationFrame(a.current);
+      return z.current && e.observe(z.current), () => {
+        e.disconnect(), l.current && cancelAnimationFrame(l.current);
       };
-    }, [j]), /* @__PURE__ */ A.jsxs(
+    }, [A]), /* @__PURE__ */ q.jsxs(
       "div",
       {
         ref: (e) => {
-          w.current = e, typeof S == "function" ? S(e) : S && (S.current = e);
+          z.current = e, typeof p == "function" ? p(e) : p && (p.current = e);
         },
         style: {
           position: "relative",
           width: "100%",
           height: "100%",
           overflow: "hidden",
-          ...M
+          ...b
         },
         ...$,
         children: [
-          z && /* @__PURE__ */ A.jsx(
+          d && /* @__PURE__ */ q.jsx(
             "img",
             {
               ref: D,
-              src: z,
-              alt: y,
+              src: d,
+              alt: M,
               style: {
                 position: "absolute",
                 inset: 0,
@@ -123,11 +128,11 @@ const Z = Q(
               }
             }
           ),
-          b,
-          /* @__PURE__ */ A.jsx(
+          g,
+          /* @__PURE__ */ q.jsx(
             "canvas",
             {
-              ref: g,
+              ref: C,
               style: {
                 position: "absolute",
                 inset: 0,

package/dist/s-radial-pulse-animate/s-radial-pulse-animate.js

@@ -20,7 +20,7 @@ const b = h`
   alignItems: "center",
   borderRadius: e.shape.borderRadius,
   border: "1px solid",
-  borderColor: (e.vars || e).palette.divider
+  borderColor: (e.vars ?? e).palette.divider
 })), R = l(d)(() => ({
   position: "absolute",
   pointerEvents: "none"
@@ -31,7 +31,7 @@ const b = h`
   transform: "translate(-50%, -50%)",
   width: "60px",
   height: "60px",
-  background: (e.vars || e).palette.ui.pulse.radialGradient,
+  background: (e.vars ?? e).palette.ui.pulse.radialGradient,
   borderRadius: "50%",
   animation: `${b} 3s ease-out infinite`,
   "&:nth-of-type(2)": {

package/dist/s-review/s-review.d.ts

@@ -3,6 +3,7 @@ import { SxProps } from '@mui/material';
 /**
  * Props interface for SReview component
  */
+export type HelpfulVote = 'yes' | 'no' | null;
 export interface SReviewProps {
     /** Unique identifier for the review (default: Date.now()) */
     id?: string | number;
@@ -19,13 +20,13 @@ export interface SReviewProps {
     /** Array of image URLs to display with the review */
     images?: string[];
     /** Current user vote status for this review (default: null) */
-    userHelpfulVote?: 'yes' | 'no' | null;
+    userHelpfulVote?: HelpfulVote;
     /** Number of "Yes" votes for helpfulness (default: 0) */
     helpfulYes?: number;
     /** Number of "No" votes for helpfulness (default: 0) */
     helpfulNo?: number;
     /** Callback when user votes on helpfulness (returns null when un-voting) */
-    onHelpfulVote?: (reviewId: string | number, vote: 'yes' | 'no' | null) => void;
+    onHelpfulVote?: (reviewId: string | number, vote: HelpfulVote) => void;
     /** Whether to show the helpful voting section (default: true) */
     showHelpfulSection?: boolean;
     /** Size of the avatar in pixels (default: 48) */

package/dist/s-review/s-review.js

@@ -1,13 +1,13 @@
 import { j as e } from "../jsx-runtime-tc70JA_2.js";
 import { useId as K, useState as h, useEffect as P } from "react";
-import { Box as o, Stack as a, Divider as M, Typography as r, IconButton as S } from "@mui/material";
+import { Box as a, Stack as o, Divider as M, Typography as r, IconButton as S } from "@mui/material";
 import { SAvatar as Q } from "../s-avatar/s-avatar.js";
 import { SImageModal as X } from "../s-image-modal/s-image-modal.js";
 import Z from "../s-lazy-image/s-lazy-image.js";
 import { SRating as _ } from "../s-rating/s-rating.js";
 import { SSkeleton as n } from "../s-skeleton/s-skeleton.js";
-import { c as T } from "../createSvgIcon-DTNHY3_v.js";
-import { g as ee } from "../utils-DJIrqgo5.js";
+import { c as T } from "../createSvgIcon-BkbeLOhM.js";
+import { g as ee } from "../utils-D1UMIV0b.js";
 const te = T(/* @__PURE__ */ e.jsx("path", {
   d: "M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2m4 0v12h4V3z"
 }), "ThumbDown"), se = T(/* @__PURE__ */ e.jsx("path", {
@@ -33,15 +33,15 @@ const te = T(/* @__PURE__ */ e.jsx("path", {
   sx: y = {}
 }) => {
   const W = K(), I = k ?? W, [B, g] = h(H), [N, j] = h(V), [l, f] = h(d), [Y, b] = h(!1), [A, u] = h(null), C = (s) => {
-    let i = s;
-    l === s ? (s === "yes" ? g((t) => Math.max(0, t - 1)) : j((t) => Math.max(0, t - 1)), f(null), i = null) : (l === "yes" ? g((t) => Math.max(0, t - 1)) : l === "no" && j((t) => Math.max(0, t - 1)), s === "yes" ? g((t) => t + 1) : j((t) => t + 1), f(s), i = s), v && v(I, i);
+    let i = null;
+    l === s ? (s === "yes" ? g((t) => Math.max(0, t - 1)) : j((t) => Math.max(0, t - 1)), f(null)) : (l === "yes" ? g((t) => Math.max(0, t - 1)) : l === "no" && j((t) => Math.max(0, t - 1)), s === "yes" ? g((t) => t + 1) : j((t) => t + 1), f(s), i = s), v && v(I, i);
   }, c = x?.map((s, i) => ({
     id: `review-${I}-image-${i}`,
     type: "image",
     url: s,
     title: `Review image ${i + 1}`,
     desc: `Image ${i + 1} from ${m}'s review`
-  })) || [], F = (s) => {
+  })) ?? [], F = (s) => {
     const i = c[s];
     i && (u(i), b(!0));
   }, q = () => {
@@ -51,17 +51,17 @@ const te = T(/* @__PURE__ */ e.jsx("path", {
   }, J = ee(z);
   return P(() => {
     f(d);
-  }, [d]), U ? /* @__PURE__ */ e.jsxs(o, { sx: { py: 2, ...y }, children: [
-    /* @__PURE__ */ e.jsxs(a, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
+  }, [d]), U ? /* @__PURE__ */ e.jsxs(a, { sx: { py: 2, ...y }, children: [
+    /* @__PURE__ */ e.jsxs(o, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
       /* @__PURE__ */ e.jsx(n, { component: "rounded-avatar", width: p, height: p }),
-      /* @__PURE__ */ e.jsxs(o, { sx: { flex: 1 }, children: [
-        /* @__PURE__ */ e.jsxs(a, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
+      /* @__PURE__ */ e.jsxs(a, { sx: { flex: 1 }, children: [
+        /* @__PURE__ */ e.jsxs(o, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
           /* @__PURE__ */ e.jsx(n, { variant: "text", width: 120, height: 20 }),
           /* @__PURE__ */ e.jsx(n, { variant: "text", width: 80, height: 16 })
         ] }),
-        /* @__PURE__ */ e.jsx(o, { sx: { mb: 1 }, children: /* @__PURE__ */ e.jsx(n, { variant: "text", width: 100, height: 20 }) }),
+        /* @__PURE__ */ e.jsx(a, { sx: { mb: 1 }, children: /* @__PURE__ */ e.jsx(n, { variant: "text", width: 100, height: 20 }) }),
         /* @__PURE__ */ e.jsx(n, { variant: "text", width: "100%", height: 16, sx: { mb: 0.5 } }),
-        /* @__PURE__ */ e.jsxs(a, { direction: "row", spacing: 1, sx: { display: "inline-flex", alignItems: "center" }, children: [
+        /* @__PURE__ */ e.jsxs(o, { direction: "row", spacing: 1, sx: { display: "inline-flex", alignItems: "center" }, children: [
           /* @__PURE__ */ e.jsx(n, { variant: "text", width: 140, height: 16, sx: { mr: 2 } }),
           /* @__PURE__ */ e.jsx(n, { component: "icon-button" }),
           /* @__PURE__ */ e.jsx(n, { variant: "text", width: 20, height: 16 }),
@@ -71,17 +71,17 @@ const te = T(/* @__PURE__ */ e.jsx("path", {
       ] })
     ] }),
     w && /* @__PURE__ */ e.jsx(M, { sx: { mt: 2 } })
-  ] }) : /* @__PURE__ */ e.jsxs(o, { sx: { py: 2, ...y }, children: [
-    /* @__PURE__ */ e.jsxs(a, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
+  ] }) : /* @__PURE__ */ e.jsxs(a, { sx: { py: 2, ...y }, children: [
+    /* @__PURE__ */ e.jsxs(o, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
       /* @__PURE__ */ e.jsx(Q, { avatar: R, name: m, size: p }),
-      /* @__PURE__ */ e.jsxs(o, { sx: { flex: 1 }, children: [
-        /* @__PURE__ */ e.jsxs(a, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
+      /* @__PURE__ */ e.jsxs(a, { sx: { flex: 1 }, children: [
+        /* @__PURE__ */ e.jsxs(o, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
           /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", fontWeight: "600", children: m }),
           /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(r, { variant: "caption", children: J }) })
         ] }),
-        /* @__PURE__ */ e.jsx(o, { sx: { mb: 1 }, children: /* @__PURE__ */ e.jsx(_, { value: L, max: E, readOnly: O }) }),
+        /* @__PURE__ */ e.jsx(a, { sx: { mb: 1 }, children: /* @__PURE__ */ e.jsx(_, { value: L, max: E, readOnly: O }) }),
         /* @__PURE__ */ e.jsx(r, { variant: "body2", sx: { mb: 2, lineHeight: 1.6 }, children: $ }),
-        x && x.length > 0 && /* @__PURE__ */ e.jsx(a, { direction: "row", spacing: 1, sx: { mb: 2, flexWrap: "wrap", gap: 1 }, children: x.map((s, i) => /* @__PURE__ */ e.jsx(
+        x && x.length > 0 && /* @__PURE__ */ e.jsx(o, { direction: "row", spacing: 1, sx: { mb: 2, flexWrap: "wrap", gap: 1 }, children: x.map((s, i) => /* @__PURE__ */ e.jsx(
           Z,
           {
             src: s,
@@ -103,7 +103,7 @@ const te = T(/* @__PURE__ */ e.jsx("path", {
           },
           i
         )) }),
-        D && /* @__PURE__ */ e.jsxs(a, { direction: "row", spacing: 1, sx: { display: "inline-flex", alignItems: "center" }, children: [
+        D && /* @__PURE__ */ e.jsxs(o, { direction: "row", spacing: 1, sx: { display: "inline-flex", alignItems: "center" }, children: [
           /* @__PURE__ */ e.jsx(r, { variant: "caption", sx: { mr: 2 }, children: "Was this review helpful?" }),
           /* @__PURE__ */ e.jsx(
             S,

package/dist/s-scroll-to-top/s-scroll-to-top.js

@@ -1,9 +1,9 @@
 import { j as r } from "../jsx-runtime-tc70JA_2.js";
 import l from "react";
-import { A as m } from "../ArrowUpward-JWPHrR6I.js";
+import { A as m } from "../ArrowUpward-D8eqD-si.js";
 import { useIsPassedPosition as d } from "../hooks/use-is-passed-position.js";
-import { s as c } from "../styled-BR6UL29H.js";
-import { B as p } from "../Box-p3bpOtdn.js";
+import { s as c } from "../styled-8Y5KoVix.js";
+import { B as p } from "../Box-BkXoTbe8.js";
 const f = c(p)({
   position: "fixed",
   bottom: 20,
@@ -22,7 +22,7 @@ const f = c(p)({
     transform: "scale(1.1)"
   }
 }), h = l.memo(({ onClick: e, scrollElementId: o, threshold: s = 100, icon: i, sx: n }) => {
-  const t = d(o || window, s), a = () => {
+  const t = d(o ?? window, s), a = () => {
     e ? e() : o ? document.getElementById(o)?.scrollTo({ top: 0, behavior: "smooth" }) : window.scrollTo({ top: 0, behavior: "smooth" });
   };
   return /* @__PURE__ */ r.jsx(
@@ -34,7 +34,7 @@ const f = c(p)({
         ...n
       },
       onClick: a,
-      children: i || /* @__PURE__ */ r.jsx(m, {})
+      children: i ?? /* @__PURE__ */ r.jsx(m, {})
     }
   );
 });

package/dist/s-scroll-velocity/scroll-velocity-container.d.ts

@@ -10,7 +10,7 @@ export declare const ScrollVelocityContext: React.Context<MotionValue<number> |
  */
 export interface ScrollVelocityContainerProps extends BoxProps {
     /** Content to render inside the container */
-    children: React.ReactNode;
+    readonly children: React.ReactNode;
 }
 /**
  * Container component that provides scroll velocity context to child rows.

package/dist/s-scroll-velocity/scroll-velocity-row.d.ts

@@ -13,11 +13,11 @@ export declare const wrap: (min: number, max: number, v: number) => number;
  */
 export interface ScrollVelocityRowProps extends BoxProps {
     /** Content to repeat in the scrolling row */
-    children: React.ReactNode;
+    readonly children: React.ReactNode;
     /** Base scrolling speed (default: 5) */
-    baseVelocity?: number;
+    readonly baseVelocity?: number;
     /** Scroll direction: 1 for right, -1 for left (default: 1) */
-    direction?: 1 | -1;
+    readonly direction?: 1 | -1;
 }
 /**
  * A horizontal scrolling row component that responds to page scroll velocity.

package/dist/s-scroll-velocity/scroll-velocity-row.js

@@ -20,7 +20,7 @@ function L({
     const o = x.current, t = v.current;
     if (!o || !t) return;
     const l = () => {
-      const h = o.offsetWidth || 0, p = t.scrollWidth || 0;
+      const h = o.offsetWidth ?? 0, p = t.scrollWidth ?? 0;
       y.set(p);
       const j = p > 0 ? Math.max(3, Math.ceil(h / p) + 2) : 1;
       z((C) => C === j ? C : j);
@@ -56,7 +56,7 @@ function L({
       const p = r >= 0 ? 1 : -1;
       R.current = D.current * p;
     }
-    const a = y.get() || 0;
+    const a = y.get() ?? 0;
     if (a <= 0) return;
     const d = a * n / 100, h = R.current * d * m * l;
     w.set(w.get() + h);

package/dist/s-select/s-select.js

@@ -1,41 +1,41 @@
-import { j as t } from "../jsx-runtime-tc70JA_2.js";
-import { forwardRef as F, useState as p } from "react";
-import { c as M } from "../createSvgIcon-DTNHY3_v.js";
-import { Select as T, ListSubheader as B, TextField as D, InputAdornment as K, MenuItem as f, Box as x } from "@mui/material";
+import { j as r } from "../jsx-runtime-tc70JA_2.js";
+import { forwardRef as E, useState as c } from "react";
+import { c as F } from "../createSvgIcon-BkbeLOhM.js";
+import { Select as T, ListSubheader as B, TextField as D, InputAdornment as K, MenuItem as j, Box as f } from "@mui/material";
 import { SForm as N } from "../s-form/s-form.js";
-const R = M(/* @__PURE__ */ t.jsx("path", {
+const R = F(/* @__PURE__ */ r.jsx("path", {
   d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14"
-}), "Search"), W = F(
+}), "Search"), W = E(
   ({
     options: o = [],
     optionLabel: y = "name",
     optionValue: C = "id",
-    placeholder: g,
-    label: b = "",
-    error: I,
-    required: w = !1,
-    simple: P = !1,
-    htmlFor: v,
-    searchable: r = !1,
-    searchPlaceholder: V = "",
-    renderOption: u,
+    placeholder: p,
+    label: I = "",
+    error: w,
+    required: P = !1,
+    simple: V = !1,
+    htmlFor: x,
+    searchable: l = !1,
+    searchPlaceholder: b = "",
+    renderOption: g,
     ...s
-  }, $) => {
-    const h = s.value !== void 0, [L, k] = p(s.multiple ? [] : null), z = h ? s.value : L, [i, j] = p(""), [A, S] = p(!1), a = (e) => String(typeof e == "string" || typeof e == "number" ? e : e[y]), l = (e) => typeof e == "string" || typeof e == "number" ? e : e[C], m = r && i ? o.filter((e) => a(e).toLowerCase().includes(i.toLowerCase())) : o;
-    return /* @__PURE__ */ t.jsx(N, { error: I, label: b, required: w, htmlFor: v, children: /* @__PURE__ */ t.jsxs(
+  }, L) => {
+    const m = s.value !== void 0, [O, k] = c(s.multiple ? [] : null), M = m ? s.value : O, [d, v] = c(""), [z, h] = c(!1), i = (e) => String(typeof e == "string" || typeof e == "number" ? e : e[y]), a = (e) => typeof e == "string" || typeof e == "number" ? e : e[C], S = l && d ? o.filter((e) => i(e).toLowerCase().includes(d.toLowerCase())) : o;
+    return /* @__PURE__ */ r.jsx(N, { error: w, label: I, required: P, htmlFor: x, children: /* @__PURE__ */ r.jsxs(
       T,
       {
-        id: v,
+        id: x,
         displayEmpty: !0,
         fullWidth: !0,
         defaultValue: "",
-        ref: $,
-        open: r ? A : void 0,
-        onOpen: r ? () => S(!0) : void 0,
-        onClose: r ? () => {
-          S(!1), j("");
+        ref: L,
+        open: l ? z : void 0,
+        onOpen: l ? () => h(!0) : void 0,
+        onClose: l ? () => {
+          h(!1), v("");
         } : void 0,
-        MenuProps: r ? {
+        MenuProps: l ? {
           autoFocus: !1,
           PaperProps: {
             onKeyDown: (e) => {
@@ -45,38 +45,38 @@ const R = M(/* @__PURE__ */ t.jsx("path", {
         } : void 0,
         renderValue: s.multiple ? (e) => {
           const n = e;
-          return n.length === 0 ? /* @__PURE__ */ t.jsx(x, { component: "span", sx: { color: "divider" }, children: g }) : n?.map((d) => {
-            const c = o.find((E) => l(E) === l(d));
-            return c ? a(c) : "";
+          return n.length === 0 ? /* @__PURE__ */ r.jsx(f, { component: "span", sx: { color: "divider" }, children: p }) : n?.map((t) => {
+            const u = o.find((A) => a(A) === a(t));
+            return u ? i(u) : "";
           }).filter(Boolean).join(", ");
         } : (e) => {
           const n = e;
           if (n == null || n === "")
-            return /* @__PURE__ */ t.jsx(x, { component: "span", sx: { color: "divider" }, children: g });
-          if (P)
-            return a(n);
-          const d = o.find((c) => l(c) === l(n));
-          return d ? a(d) : "";
+            return /* @__PURE__ */ r.jsx(f, { component: "span", sx: { color: "divider" }, children: p });
+          if (V)
+            return i(n);
+          const t = o.find((u) => a(u) === a(n));
+          return t ? i(t) : "";
         },
         ...s,
-        value: o.length ? z ?? "" : "",
+        value: o.length ? M ?? "" : "",
         onChange: (e, n) => {
           if (s.onChange)
             s.onChange(e, n);
-          else if (!h) {
-            const d = e.target.value;
-            k(d);
+          else if (!m) {
+            const t = e.target.value;
+            k(t);
           }
         },
         children: [
-          r && /* @__PURE__ */ t.jsx(B, { sx: { px: 2, py: 1, position: "sticky", top: 0, bgcolor: "background.paper", zIndex: 1 }, children: /* @__PURE__ */ t.jsx(
+          l && /* @__PURE__ */ r.jsx(B, { sx: { px: 2, py: 1, position: "sticky", top: 0, bgcolor: "background.paper", zIndex: 1 }, children: /* @__PURE__ */ r.jsx(
             D,
             {
               fullWidth: !0,
               autoFocus: !0,
-              placeholder: V,
-              value: i,
-              onChange: (e) => j(e.target.value),
+              placeholder: b,
+              value: d,
+              onChange: (e) => v(e.target.value),
               onKeyDown: (e) => {
                 e.key !== "Escape" && e.stopPropagation();
               },
@@ -84,35 +84,22 @@ const R = M(/* @__PURE__ */ t.jsx("path", {
                 e.stopPropagation();
               },
               InputProps: {
-                startAdornment: /* @__PURE__ */ t.jsx(K, { position: "start", children: /* @__PURE__ */ t.jsx(R, { fontSize: "small" }) })
+                startAdornment: /* @__PURE__ */ r.jsx(K, { position: "start", children: /* @__PURE__ */ r.jsx(R, { fontSize: "small" }) })
               }
             }
           ) }),
-          r ? m?.length > 0 ? m.map((e, n) => /* @__PURE__ */ t.jsx(
-            f,
-            {
-              disabled: e?.disabled ?? !1,
-              value: l(e),
-              children: u ? u(e) : a(e)
-            },
-            `${l(e)}-${n}`
-          )) : i ? /* @__PURE__ */ t.jsx(f, { disabled: !0, children: /* @__PURE__ */ t.jsx(x, { sx: { color: "text.secondary", textAlign: "center", width: "100%" }, children: "No results found" }) }) : o?.map((e, n) => /* @__PURE__ */ t.jsx(
-            f,
-            {
-              disabled: e?.disabled ?? !1,
-              value: l(e),
-              children: u ? u(e) : a(e)
-            },
-            `${l(e)}-${n}`
-          )) : o?.map((e, n) => /* @__PURE__ */ t.jsx(
-            f,
-            {
-              disabled: e?.disabled ?? !1,
-              value: l(e),
-              children: u ? u(e) : a(e)
-            },
-            `${l(e)}-${n}`
-          ))
+          (() => {
+            const e = (n) => n.map((t, u) => /* @__PURE__ */ r.jsx(
+              j,
+              {
+                disabled: t?.disabled ?? !1,
+                value: a(t),
+                children: g ? g(t) : i(t)
+              },
+              `${a(t)}-${u}`
+            ));
+            return l ? S.length > 0 ? e(S) : d ? /* @__PURE__ */ r.jsx(j, { disabled: !0, children: /* @__PURE__ */ r.jsx(f, { sx: { color: "text.secondary", textAlign: "center", width: "100%" }, children: "No results found" }) }) : e(o) : e(o);
+          })()
         ]
       }
     ) });

package/dist/s-select-list/s-select-list.js

@@ -12,7 +12,7 @@ const u = p(i, {
   paddingRight: s.spacing(2),
   border: "1px solid",
   cursor: "pointer",
-  borderColor: a ? (s.vars || s).palette.primary.dark : (s.vars || s).palette.divider
+  borderColor: a ? (s.vars ?? s).palette.primary.dark : (s.vars ?? s).palette.divider
 })), f = ({
   items: s,
   selectedId: a,