@solostylist/ui-kit 1.0.118 → 1.0.119

package/dist/s-date-picker/s-date-picker.js

@@ -8,21 +8,21 @@ import { u as O, a as U, b as Y, c as Q, r as T, d as q, P as B, e as H, f as $,
 import { u as y } from "../warning-BCwEnWrE.js";
 import { g as ne } from "../colorManipulator-ep5lERxB.js";
 import { g as re } from "../generateUtilityClasses-BtVDwGrk.js";
-import { s as N } from "../styled-BD_erj7E.js";
+import { s as C } from "../styled-BD_erj7E.js";
 import { b as le } from "../createSvgIcon-By5UWB4_.js";
 import { T as ie } from "../Typography-y4bVBfDI.js";
-import { r as h, a as C } from "../ButtonBase-DVlCHVDw.js";
+import { r as h, a as N } from "../ButtonBase-DVlCHVDw.js";
 function ce(l) {
   return ne("MuiDatePickerToolbar", l);
 }
 re("MuiDatePickerToolbar", ["root", "title"]);
-const ue = ["toolbarFormat", "toolbarPlaceholder", "className", "classes"], de = (l) => le({
+const de = ["toolbarFormat", "toolbarPlaceholder", "className", "classes"], ue = (l) => le({
   root: ["root"],
   title: ["title"]
-}, ce, l), fe = N(B, {
+}, ce, l), fe = C(B, {
   name: "MuiDatePickerToolbar",
   slot: "Root"
-})({}), pe = N(ie, {
+})({}), pe = C(ie, {
   name: "MuiDatePickerToolbar",
   slot: "Title"
 })({
@@ -43,19 +43,19 @@ const ue = ["toolbarFormat", "toolbarPlaceholder", "className", "classes"], de =
     toolbarPlaceholder: s = "––",
     className: i,
     classes: p
-  } = r, c = P(r, ue), d = O(), {
-    value: u,
+  } = r, c = P(r, de), u = O(), {
+    value: d,
     views: v,
     orientation: E
-  } = U(), V = Y(), _ = Q(), w = de(p), A = b.useMemo(() => {
-    if (!d.isValid(u))
+  } = U(), V = Y(), _ = Q(), w = ue(p), A = b.useMemo(() => {
+    if (!u.isValid(d))
       return s;
-    const W = T(d, {
+    const W = T(u, {
       format: o,
       views: v
     }, !0);
-    return d.formatByString(u, W);
-  }, [u, o, s, d, v]);
+    return u.formatByString(d, W);
+  }, [d, o, s, u, v]);
   return /* @__PURE__ */ f.jsx(fe, a({
     ref: t,
     toolbarTitle: V.datePickerToolbarTitle,
@@ -449,9 +449,9 @@ const k = /* @__PURE__ */ b.forwardRef(function(n, t) {
       field: D
     }, o.slots),
     slotProps: a({}, o.slotProps, {
-      field: (d) => {
-        var u;
-        return a({}, C((u = o.slotProps) == null ? void 0 : u.field, d), M(o));
+      field: (u) => {
+        var d;
+        return a({}, N((d = o.slotProps) == null ? void 0 : d.field, u), M(o));
       },
       toolbar: a({
         hidden: !0
@@ -797,9 +797,9 @@ const j = /* @__PURE__ */ b.forwardRef(function(n, t) {
       field: D
     }, o.slots),
     slotProps: a({}, o.slotProps, {
-      field: (d) => {
-        var u;
-        return a({}, C((u = o.slotProps) == null ? void 0 : u.field, d), M(o));
+      field: (u) => {
+        var d;
+        return a({}, N((d = o.slotProps) == null ? void 0 : d.field, u), M(o));
       },
       toolbar: a({
         hidden: !1
@@ -1484,7 +1484,8 @@ function Re({ label: l, required: n = !1, error: t, htmlFor: r, hint: o, ...s })
         popper: {
           sx: {
             "& .MuiPaper-root": {
-              border: "1px solid var(--s-palette-divider)",
+              border: "1px solid",
+              borderColor: (i.vars || i).palette.divider,
               borderRadius: (i.vars || i).shape.borderRadius,
               boxShadow: "none",
               backgroundImage: "none"

package/dist/s-datetime-picker/s-datetime-picker.js

@@ -5149,7 +5149,8 @@ function Qs({
         popper: {
           sx: {
             "& .MuiPaper-root": {
-              border: "1px solid var(--s-palette-divider)",
+              border: "1px solid",
+              borderColor: (i.vars || i).palette.divider,
               borderRadius: (i.vars || i).shape.borderRadius,
               boxShadow: "none",
               backgroundImage: "none"

package/dist/s-image-modal/s-image-modal.js

@@ -1,14 +1,14 @@
 import { j as o } from "../jsx-runtime-OVHDjVDe.js";
 import { useState as k, useEffect as w } from "react";
-import { Modal as A, Box as d, Paper as b, Typography as z, IconButton as m, Stack as L } from "@mui/material";
-import { motion as h, AnimatePresence as T } from "framer-motion";
+import { Modal as A, Box as l, Paper as b, Typography as z, IconButton as m, Stack as L } from "@mui/material";
+import { motion as f, AnimatePresence as T } from "framer-motion";
 import { C as F } from "../Close-DlTC3goO.js";
 import { C as $, a as B } from "../ChevronRight-DQD188LX.js";
-const I = ({ item: s, onClick: l, style: x = {}, objectFit: e = "contain", disableVideoControls: r = !1 }) => s.type === "video" ? /* @__PURE__ */ o.jsx(
-  d,
+const I = ({ item: s, onClick: c, style: x = {}, objectFit: e = "contain", disableVideoControls: r = !1 }) => s.type === "video" ? /* @__PURE__ */ o.jsx(
+  l,
   {
     component: "video",
-    onClick: l,
+    onClick: c,
     controls: !r,
     sx: {
       width: "100%",
@@ -20,12 +20,12 @@ const I = ({ item: s, onClick: l, style: x = {}, objectFit: e = "contain", disab
     children: /* @__PURE__ */ o.jsx("source", { src: s.url, type: "video/mp4" })
   }
 ) : /* @__PURE__ */ o.jsx(
-  d,
+  l,
   {
     component: "img",
     src: s.url,
     alt: s.title || "",
-    onClick: l,
+    onClick: c,
     sx: {
       width: "100%",
       height: "100%",
@@ -36,11 +36,11 @@ const I = ({ item: s, onClick: l, style: x = {}, objectFit: e = "contain", disab
   }
 ), M = ({
   selectedItem: s,
-  isOpen: l,
+  isOpen: c,
   onClose: x,
   onItemChange: e,
   mediaItems: r = [],
-  renderMediaItem: f,
+  renderMediaItem: h,
   showNavigation: P = !0,
   showThumbnailDock: E = !0,
   showCounter: S = !0,
@@ -50,21 +50,21 @@ const I = ({ item: s, onClick: l, style: x = {}, objectFit: e = "contain", disab
   w(() => {
     s && u(s);
   }, [s]);
-  const p = P && r.length > 1 && i, n = i ? r.findIndex((t) => t.id === i.id) : -1, g = r.length, v = () => {
-    if (p && n > 0) {
-      const t = r[n - 1];
+  const p = P && r.length > 1 && i, a = i ? r.findIndex((t) => t.id === i.id) : -1, g = r.length, v = () => {
+    if (p && a > 0) {
+      const t = r[a - 1];
       e ? e(t) : u(t);
     }
   }, j = () => {
-    if (p && n < g - 1) {
-      const t = r[n + 1];
+    if (p && a < g - 1) {
+      const t = r[a + 1];
       e ? e(t) : u(t);
     }
   };
   return w(() => {
-    const t = (a) => {
-      if (l)
-        switch (a.key) {
+    const t = (d) => {
+      if (c)
+        switch (d.key) {
           case "ArrowLeft":
             v();
             break;
@@ -77,10 +77,10 @@ const I = ({ item: s, onClick: l, style: x = {}, objectFit: e = "contain", disab
         }
     };
     return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
-  }, [l, n, g, p]), !l || !i ? null : /* @__PURE__ */ o.jsx(
+  }, [c, a, g, p]), !c || !i ? null : /* @__PURE__ */ o.jsx(
     A,
     {
-      open: l,
+      open: c,
       onClose: x,
       sx: {
         zIndex: (t) => t.zIndex.modal + 100,
@@ -94,9 +94,9 @@ const I = ({ item: s, onClick: l, style: x = {}, objectFit: e = "contain", disab
           }
         }
       },
-      children: /* @__PURE__ */ o.jsxs(d, { children: [
+      children: /* @__PURE__ */ o.jsxs(l, { children: [
         /* @__PURE__ */ o.jsx(
-          h.div,
+          f.div,
           {
             initial: { scale: 0.98 },
             animate: { scale: 1 },
@@ -116,7 +116,7 @@ const I = ({ item: s, onClick: l, style: x = {}, objectFit: e = "contain", disab
                 },
                 children: [
                   /* @__PURE__ */ o.jsx(
-                    d,
+                    l,
                     {
                       sx: {
                         height: "100%",
@@ -124,7 +124,7 @@ const I = ({ item: s, onClick: l, style: x = {}, objectFit: e = "contain", disab
                         flexDirection: "column"
                       },
                       children: /* @__PURE__ */ o.jsx(
-                        d,
+                        l,
                         {
                           sx: {
                             flex: 1,
@@ -135,7 +135,7 @@ const I = ({ item: s, onClick: l, style: x = {}, objectFit: e = "contain", disab
                             bgcolor: "background.default"
                           },
                           children: /* @__PURE__ */ o.jsx(T, { mode: "wait", children: /* @__PURE__ */ o.jsx(
-                            h.div,
+                            f.div,
                             {
                               style: { position: "relative" },
                               initial: { y: 20, scale: 0.97 },
@@ -159,9 +159,9 @@ const I = ({ item: s, onClick: l, style: x = {}, objectFit: e = "contain", disab
                                     overflow: "hidden"
                                   },
                                   children: [
-                                    f ? f(i) : /* @__PURE__ */ o.jsx(I, { item: i }),
+                                    h ? h(i) : /* @__PURE__ */ o.jsx(I, { item: i }),
                                     (i.title || i.desc) && /* @__PURE__ */ o.jsxs(
-                                      d,
+                                      l,
                                       {
                                         sx: {
                                           position: "absolute",
@@ -204,7 +204,7 @@ const I = ({ item: s, onClick: l, style: x = {}, objectFit: e = "contain", disab
                     }
                   ),
                   S && p && /* @__PURE__ */ o.jsxs(
-                    d,
+                    l,
                     {
                       sx: {
                         position: "absolute",
@@ -217,7 +217,7 @@ const I = ({ item: s, onClick: l, style: x = {}, objectFit: e = "contain", disab
                         color: "text.primary"
                       },
                       children: [
-                        n + 1,
+                        a + 1,
                         " / ",
                         g
                       ]
@@ -231,7 +231,7 @@ const I = ({ item: s, onClick: l, style: x = {}, objectFit: e = "contain", disab
                         onClick: (t) => {
                           t.stopPropagation(), v();
                         },
-                        disabled: n === 0,
+                        disabled: a === 0,
                         sx: {
                           position: "absolute",
                           left: { xs: 8, sm: 10, md: 12 },
@@ -252,7 +252,7 @@ const I = ({ item: s, onClick: l, style: x = {}, objectFit: e = "contain", disab
                         onClick: (t) => {
                           t.stopPropagation(), j();
                         },
-                        disabled: n === g - 1,
+                        disabled: a === g - 1,
                         sx: {
                           position: "absolute",
                           right: { xs: 8, sm: 10, md: 12 },
@@ -273,15 +273,15 @@ const I = ({ item: s, onClick: l, style: x = {}, objectFit: e = "contain", disab
           }
         ),
         E && p && r.length > 1 && /* @__PURE__ */ o.jsx(
-          h.div,
+          f.div,
           {
             drag: !0,
             dragMomentum: !1,
             dragElastic: 0.1,
             initial: !1,
             animate: { x: y.x, y: y.y },
-            onDragEnd: (t, a) => {
-              R((c) => ({ x: c.x + a.offset.x, y: c.y + a.offset.y }));
+            onDragEnd: (t, d) => {
+              R((n) => ({ x: n.x + d.offset.x, y: n.y + d.offset.y }));
             },
             style: {
               position: "fixed",
@@ -306,11 +306,11 @@ const I = ({ item: s, onClick: l, style: x = {}, objectFit: e = "contain", disab
                   px: 1.5,
                   py: 1
                 },
-                children: /* @__PURE__ */ o.jsx(L, { direction: "row", alignItems: "center", spacing: -1.5, children: r.map((t, a) => /* @__PURE__ */ o.jsxs(
-                  h.div,
+                children: /* @__PURE__ */ o.jsx(L, { direction: "row", alignItems: "center", spacing: -1.5, children: r.map((t, d) => /* @__PURE__ */ o.jsxs(
+                  f.div,
                   {
-                    onClick: (c) => {
-                      c.stopPropagation(), e ? e(t) : u(t);
+                    onClick: (n) => {
+                      n.stopPropagation(), e ? e(t) : u(t);
                     },
                     style: {
                       position: "relative",
@@ -319,15 +319,15 @@ const I = ({ item: s, onClick: l, style: x = {}, objectFit: e = "contain", disab
                       borderRadius: 10,
                       overflow: "hidden",
                       flexShrink: 0,
-                      zIndex: i.id === t.id ? 30 : r.length - a,
+                      zIndex: i.id === t.id ? 30 : r.length - d,
                       border: i.id === t.id ? "2px solid" : void 0,
                       borderColor: i.id === t.id ? "divider" : void 0,
                       cursor: "pointer"
                     },
-                    initial: { rotate: a % 2 === 0 ? -15 : 15 },
+                    initial: { rotate: d % 2 === 0 ? -15 : 15 },
                     animate: {
                       scale: i.id === t.id ? 1.2 : 1,
-                      rotate: i.id === t.id ? 0 : a % 2 === 0 ? -15 : 15,
+                      rotate: i.id === t.id ? 0 : d % 2 === 0 ? -15 : 15,
                       y: i.id === t.id ? -8 : 0
                     },
                     whileHover: {
@@ -337,7 +337,7 @@ const I = ({ item: s, onClick: l, style: x = {}, objectFit: e = "contain", disab
                       transition: { type: "spring", stiffness: 400, damping: 25 }
                     },
                     children: [
-                      f ? f(t, () => {
+                      h ? h(t, () => {
                         e ? e(t) : u(t);
                       }) : /* @__PURE__ */ o.jsx(
                         I,
@@ -354,18 +354,18 @@ const I = ({ item: s, onClick: l, style: x = {}, objectFit: e = "contain", disab
                         }
                       ),
                       /* @__PURE__ */ o.jsx(
-                        d,
+                        l,
                         {
                           sx: {
                             position: "absolute",
                             inset: 0,
-                            background: (c) => `linear-gradient(to bottom, transparent, ${c.palette.action.hover}, ${c.palette.action.selected})`,
+                            background: (n) => `linear-gradient(to bottom, transparent, ${(n.vars || n).palette.action.hover}, ${(n.vars || n).palette.action.selected})`,
                             pointerEvents: "none"
                           }
                         }
                       ),
                       i.id === t.id && /* @__PURE__ */ o.jsx(
-                        h.div,
+                        f.div,
                         {
                           layoutId: "activeGlow",
                           style: {

package/dist/s-interactive-gallery/s-interactive-gallery.js

@@ -4,7 +4,7 @@ import { Box as s, Paper as C, Typography as x } from "@mui/material";
 import { AnimatePresence as S, motion as b } from "framer-motion";
 import k from "../s-image-modal/s-image-modal.js";
 import $ from "../s-lazy-image/s-lazy-image.js";
-const R = ({ item: a, sx: i, onClick: l }) => {
+const R = ({ item: a, sx: o, onClick: l }) => {
   const e = I(null), [c, h] = u(!1), [p, d] = u(!0);
   return y(() => {
     const t = {
@@ -13,22 +13,22 @@ const R = ({ item: a, sx: i, onClick: l }) => {
       // Start loading 50px before entering viewport
       threshold: 0.1
       // Trigger when 10% of video is visible
-    }, o = new IntersectionObserver((n) => {
-      n.forEach((f) => h(f.isIntersecting));
+    }, n = new IntersectionObserver((i) => {
+      i.forEach((f) => h(f.isIntersecting));
     }, t);
-    return e.current && o.observe(e.current), () => {
-      e.current && o.unobserve(e.current);
+    return e.current && n.observe(e.current), () => {
+      e.current && n.unobserve(e.current);
     };
   }, []), y(() => {
     let t = !0;
     return c ? (async () => {
       if (!(!e.current || !c || !t))
         try {
-          e.current.readyState >= 3 ? (d(!1), await e.current.play()) : (d(!0), await new Promise((n) => {
-            e.current && (e.current.oncanplay = () => n());
+          e.current.readyState >= 3 ? (d(!1), await e.current.play()) : (d(!0), await new Promise((i) => {
+            e.current && (e.current.oncanplay = () => i());
           }), t && (d(!1), await e.current.play()));
-        } catch (n) {
-          console.warn("Video playback failed:", n);
+        } catch (i) {
+          console.warn("Video playback failed:", i);
         }
     })() : e.current && e.current.pause(), () => {
       t = !1, e.current && (e.current.pause(), e.current.removeAttribute("src"), e.current.load());
@@ -41,7 +41,7 @@ const R = ({ item: a, sx: i, onClick: l }) => {
         overflow: "hidden",
         width: "100%",
         height: "100%",
-        ...i
+        ...o
       },
       children: [
         /* @__PURE__ */ r.jsx(
@@ -99,7 +99,7 @@ const R = ({ item: a, sx: i, onClick: l }) => {
         )
       ]
     }
-  ) : /* @__PURE__ */ r.jsx(s, { onClick: l, sx: { width: "100%", height: "100%", ...i }, children: /* @__PURE__ */ r.jsx(
+  ) : /* @__PURE__ */ r.jsx(s, { onClick: l, sx: { width: "100%", height: "100%", ...o }, children: /* @__PURE__ */ r.jsx(
     $,
     {
       src: a.url,
@@ -107,7 +107,7 @@ const R = ({ item: a, sx: i, onClick: l }) => {
       width: "100%",
       height: "100%",
       style: {
-        objectFit: i != null && i.objectFit ? i.objectFit : "cover",
+        objectFit: o != null && o.objectFit ? o.objectFit : "cover",
         cursor: l ? "pointer" : "default",
         display: "block",
         width: "100%",
@@ -116,21 +116,21 @@ const R = ({ item: a, sx: i, onClick: l }) => {
     }
   ) });
 }, F = ({ mediaItems: a }) => {
-  const [i, l] = u(null), [e, c] = u(a), [h, p] = u(!1), d = j();
+  const [o, l] = u(null), [e, c] = u(a), [h, p] = u(!1), d = j();
   return y(() => {
     c(a);
   }, [a]), /* @__PURE__ */ r.jsxs(s, { sx: { width: "100%", position: "relative", zIndex: 1 }, children: [
     /* @__PURE__ */ r.jsx(
       k,
       {
-        selectedItem: i,
-        isOpen: !!i,
+        selectedItem: o,
+        isOpen: !!o,
         onClose: () => l(null),
         onItemChange: l,
         mediaItems: e
       }
     ),
-    /* @__PURE__ */ r.jsx(S, { mode: "wait", children: !i && /* @__PURE__ */ r.jsx(
+    /* @__PURE__ */ r.jsx(S, { mode: "wait", children: !o && /* @__PURE__ */ r.jsx(
       b.div,
       {
         initial: "hidden",
@@ -159,7 +159,7 @@ const R = ({ item: a, sx: i, onClick: l }) => {
               position: "relative"
               // Ensure proper stacking context
             },
-            children: e.map((t, o) => /* @__PURE__ */ r.jsx(
+            children: e.map((t, n) => /* @__PURE__ */ r.jsx(
               b.div,
               {
                 layoutId: `media-${t.id}-${d}`,
@@ -174,7 +174,7 @@ const R = ({ item: a, sx: i, onClick: l }) => {
                       type: "spring",
                       stiffness: 350,
                       damping: 25,
-                      delay: o * 0.05
+                      delay: n * 0.05
                     }
                   }
                 },
@@ -183,12 +183,12 @@ const R = ({ item: a, sx: i, onClick: l }) => {
                 dragConstraints: { left: 0, right: 0, top: 0, bottom: 0 },
                 dragElastic: 1,
                 onDragStart: () => p(!0),
-                onDragEnd: (n, f) => {
+                onDragEnd: (i, f) => {
                   p(!1);
                   const v = f.offset.x + f.offset.y;
                   if (Math.abs(v) > 50) {
-                    const g = [...e], m = g[o], w = v > 0 ? Math.min(o + 1, e.length - 1) : Math.max(o - 1, 0);
-                    g.splice(o, 1), g.splice(w, 0, m), c(g);
+                    const g = [...e], m = g[n], w = v > 0 ? Math.min(n + 1, e.length - 1) : Math.max(n - 1, 0);
+                    g.splice(n, 1), g.splice(w, 0, m), c(g);
                   }
                 },
                 style: {
@@ -243,7 +243,7 @@ const R = ({ item: a, sx: i, onClick: l }) => {
                                 sx: {
                                   position: "absolute",
                                   inset: 0,
-                                  background: (n) => `linear-gradient(to top, ${n.palette.grey[900]}CC, ${n.palette.grey[900]}66, transparent)`
+                                  background: (i) => `linear-gradient(to top, ${(i.vars || i).palette.grey[900]}CC, ${(i.vars || i).palette.grey[900]}66, transparent)`
                                 }
                               }
                             ),

package/dist/s-lazy-image/s-lazy-image.js

@@ -4,19 +4,19 @@ import { useTheme as j, Box as m, Skeleton as L } from "@mui/material";
 const I = ({
   src: n,
   variant: e = "rounded",
-  height: o = "auto",
+  height: o = "100%",
   width: s = "100%",
   style: r,
-  minWidth: t = "auto",
-  minHeight: u = "auto",
+  minWidth: d = "auto",
+  minHeight: t = "auto",
   ...c
 }) => {
-  const l = i(), p = j(), [d, x] = f(!1);
+  const l = i(), p = j(), [u, x] = f(!1);
   return (
     // Container box maintains consistent dimensions throughout the loading process
     // This prevents layout shifts and provides stable positioning for both skeleton and image
     /* @__PURE__ */ a.jsxs(m, { height: o, width: s, children: [
-      !d && /* @__PURE__ */ a.jsx(
+      !u && /* @__PURE__ */ a.jsx(
         L,
         {
           variant: e,
@@ -25,8 +25,8 @@ const I = ({
           style: {
             height: o,
             width: s,
-            minWidth: t,
-            minHeight: u,
+            minWidth: d,
+            minHeight: t,
             ...r
             // User styles applied to skeleton for consistency
           }
@@ -40,11 +40,11 @@ const I = ({
           style: {
             height: o,
             width: s,
-            minWidth: t,
-            minHeight: u,
+            minWidth: d,
+            minHeight: t,
             // Performance optimization: display toggling instead of opacity transitions
             // This approach reduces GPU usage and improves rendering performance
-            display: d ? "block" : "none",
+            display: u ? "block" : "none",
             // Theme-aware border radius calculation for consistent styling
             // Matches Material-UI skeleton variants with proper theme integration
             borderRadius: e === "circular" ? "50%" : e === "rounded" ? p.shape.borderRadius : "0px",

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

@@ -2,21 +2,21 @@ import { j as t } from "../jsx-runtime-OVHDjVDe.js";
 import * as c from "react";
 import { c as h } from "../createSvgIcon-By5UWB4_.js";
 import { Stack as j, OutlinedInput as M } from "@mui/material";
-import { usePopover as v } from "../hooks/use-popover.js";
-import S from "../s-chips/s-chips.js";
-import { M as R } from "../Menu-CgxtGUFu.js";
-import { M as b } from "../MenuItem-FlDSyi1I.js";
+import { usePopover as S } from "../hooks/use-popover.js";
+import R from "../s-chips/s-chips.js";
+import { M as b } from "../Menu-CgxtGUFu.js";
+import { M as v } from "../MenuItem-FlDSyi1I.js";
 const I = h(/* @__PURE__ */ t.jsx("path", {
   d: "M12 5.83 15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15z"
 }), "UnfoldMore");
 function P({
-  label: u,
+  label: p,
   onChange: o,
-  options: a,
+  options: u,
   value: l = [],
   chipProps: f
 }) {
-  const r = v(), i = c.useRef(null), [p, d] = c.useState();
+  const r = S(), i = c.useRef(null), [a, d] = c.useState();
   c.useEffect(() => {
     i.current && d(i.current.offsetWidth);
   }, [r.open]);
@@ -31,36 +31,30 @@ function P({
     /* @__PURE__ */ t.jsx(
       M,
       {
-        endAdornment: /* @__PURE__ */ t.jsx(
-          I,
-          {
-            fontSize: "small",
-            sx: { color: "var(--s-palette-action-active)", position: "absolute", right: "7px" }
-          }
-        ),
+        endAdornment: /* @__PURE__ */ t.jsx(I, { fontSize: "small", sx: { color: "action.active", position: "absolute", right: "7px" } }),
         onClick: r.handleOpen,
         ref: (e) => {
           r.anchorRef.current = e, i.current = e;
         },
-        value: u,
+        value: p,
         sx: {
           input: {
-            color: "var(--s-palette-text-secondary)"
+            color: "text.secondary"
           }
         }
       }
     ),
     /* @__PURE__ */ t.jsx(
-      R,
+      b,
       {
         anchorEl: r.anchorRef.current,
         onClose: r.handleClose,
         open: r.open,
-        slotProps: { paper: { sx: { width: p ? `${p}px` : void 0 } } },
-        children: a.map((e) => {
+        slotProps: { paper: { sx: { width: a ? `${a}px` : void 0 } } },
+        children: u.map((e) => {
           const s = l.includes(e.value);
           return /* @__PURE__ */ t.jsx(
-            b,
+            v,
             {
               onClick: () => {
                 m(e.value, !s);
@@ -74,9 +68,9 @@ function P({
       }
     ),
     /* @__PURE__ */ t.jsx(
-      S,
+      R,
       {
-        chips: a.filter((e) => l.includes(e.value)).map((e) => e.label),
+        chips: u.filter((e) => l.includes(e.value)).map((e) => e.label),
         ...f
       }
     )

package/dist/s-overlay-scrollbar/s-overlay-scrollbar.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { SxProps, Theme } from '@mui/material/styles';
+import { SxProps, Theme } from '@mui/material';
 export interface SOverlayScrollbarProps extends PropsWithChildren {
     className?: string;
     sx?: SxProps<Theme>;