@solostylist/ui-kit 1.0.196 → 1.0.198

package/dist/s-data-table/s-data-table.js

@@ -1,16 +1,16 @@
 import { j as l } from "../jsx-runtime-tc70JA_2.js";
 import * as g from "react";
 import { SEmpty as xe } from "../s-empty/s-empty.js";
-import { c as j, P as e } from "../createTheme-CIXJrNxb.js";
+import { c as j, P as e } from "../createTheme-DgoJyWM-.js";
 import { c as H } from "../clsx-OuTLNxxd.js";
-import { c as N, u as I, m as D } from "../DefaultPropsProvider-2MEHB2yv.js";
+import { c as N, u as I, m as D } from "../DefaultPropsProvider-DPuuPIbS.js";
 import { g as z } from "../generateUtilityClass-BhfUaMgk.js";
 import { g as B } from "../generateUtilityClasses-E9gROIFd.js";
-import { s as P, r as te } from "../styled-BR6UL29H.js";
+import { s as P, r as te } from "../styled-8Y5KoVix.js";
 import { u as ve } from "../useFormControl-CatNKXAi.js";
-import { d as _, B as Te, r as Ce } from "../ButtonBase-PbSTzuUP.js";
+import { b as _, B as Te, r as Ce } from "../ButtonBase-D73M0QY5.js";
 import { u as ke } from "../useControlled-D1L5tREc.js";
-import { c as q } from "../createSvgIcon-DTNHY3_v.js";
+import { c as q } from "../createSvgIcon-BkbeLOhM.js";
 import { c as Q } from "../createSimplePaletteValueFilter-B7--0ryQ.js";
 import { m as je } from "../mergeSlotProps-CuzBQdlp.js";
 function we(o) {
@@ -23,11 +23,11 @@ const Oe = (o) => {
     checked: s,
     disabled: n,
     edge: i
-  } = o, r = {
+  } = o, a = {
     root: ["root", s && "checked", n && "disabled", i && `edge${j(i)}`],
     input: ["input"]
   };
-  return N(r, we, t);
+  return N(a, we, t);
 }, Re = P(Te, {
   name: "MuiSwitchBase"
 })({
@@ -84,7 +84,7 @@ const Oe = (o) => {
   const {
     autoFocus: n,
     checked: i,
-    checkedIcon: r,
+    checkedIcon: a,
     defaultChecked: c,
     disabled: d,
     disableFocusRipple: p = !1,
@@ -95,13 +95,13 @@ const Oe = (o) => {
     inputRef: h,
     name: T,
     onBlur: O,
-    onChange: a,
+    onChange: r,
     onFocus: x,
     readOnly: m,
     required: C = !1,
     tabIndex: u,
     type: R,
-    value: F,
+    value: E,
     slots: le = {},
     slotProps: ie = {},
     ...ce
@@ -118,14 +118,14 @@ const Oe = (o) => {
     if (b.nativeEvent.defaultPrevented || m)
       return;
     const k = b.target.checked;
-    de(k), a && a(b, k);
+    de(k), r && r(b, k);
   };
-  let $ = d;
-  S && typeof $ > "u" && ($ = S.disabled);
+  let F = d;
+  S && typeof F > "u" && (F = S.disabled);
   const be = R === "checkbox" || R === "radio", V = {
     ...t,
     checked: J,
-    disabled: $,
+    disabled: F,
     disableFocusRipple: p,
     edge: y
   }, G = Oe(V), K = {
@@ -157,7 +157,6 @@ const Oe = (o) => {
     additionalProps: {
       centerRipple: !0,
       focusRipple: !p,
-      disabled: $,
       role: void 0,
       tabIndex: null
     }
@@ -177,15 +176,15 @@ const Oe = (o) => {
       autoFocus: n,
       checked: i,
       defaultChecked: c,
-      disabled: $,
+      disabled: F,
       id: be ? v : void 0,
       name: T,
       readOnly: m,
       required: C,
       tabIndex: u,
       type: R,
-      ...R === "checkbox" && F === void 0 ? {} : {
-        value: F
+      ...R === "checkbox" && E === void 0 ? {} : {
+        value: E
       }
     }
   });
@@ -193,7 +192,7 @@ const Oe = (o) => {
     ...ye,
     children: [/* @__PURE__ */ l.jsx(he, {
       ...me
-    }), J ? r : f]
+    }), J ? a : f]
   });
 });
 process.env.NODE_ENV !== "production" && (se.propTypes = {
@@ -331,9 +330,9 @@ const A = B("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
     indeterminate: s,
     color: n,
     size: i
-  } = o, r = {
+  } = o, a = {
     root: ["root", s && "indeterminate", `color${j(n)}`, `size${j(i)}`]
-  }, c = N(r, Be, t);
+  }, c = N(a, Be, t);
   return {
     ...t,
     // forward the disabled and checked classes to the SwitchBase
@@ -405,7 +404,7 @@ const A = B("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
     name: "MuiCheckbox"
   }), {
     checkedIcon: i = Ie,
-    color: r = "primary",
+    color: a = "primary",
     icon: c = $e,
     indeterminate: d = !1,
     indeterminateIcon: p = Ee,
@@ -416,13 +415,13 @@ const A = B("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
     slots: h = {},
     slotProps: T = {},
     ...O
-  } = n, a = d ? p : c, x = d ? p : i, m = {
+  } = n, r = d ? p : c, x = d ? p : i, m = {
     ...n,
     disableRipple: v,
-    color: r,
+    color: a,
     indeterminate: d,
     size: f
-  }, C = Me(m), u = T.input ?? y, [R, F] = _("root", {
+  }, C = Me(m), u = T.input ?? y, [R, E] = _("root", {
     ref: s,
     elementType: He,
     className: H(C.root, w),
@@ -435,8 +434,8 @@ const A = B("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
     ownerState: m,
     additionalProps: {
       type: "checkbox",
-      icon: /* @__PURE__ */ g.cloneElement(a, {
-        fontSize: a.props.fontSize ?? f
+      icon: /* @__PURE__ */ g.cloneElement(r, {
+        fontSize: r.props.fontSize ?? f
       }),
       checkedIcon: /* @__PURE__ */ g.cloneElement(x, {
         fontSize: x.props.fontSize ?? f
@@ -451,7 +450,7 @@ const A = B("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
     }
   });
   return /* @__PURE__ */ l.jsx(R, {
-    ...F,
+    ...E,
     classes: C
   });
 });
@@ -620,14 +619,14 @@ const Ue = (o) => {
     name: "MuiTable"
   }), {
     className: i,
-    component: r = X,
+    component: a = X,
     padding: c = "normal",
     size: d = "medium",
     stickyHeader: p = !1,
     ...y
   } = n, f = {
     ...n,
-    component: r,
+    component: a,
     padding: c,
     size: d,
     stickyHeader: p
@@ -639,8 +638,8 @@ const Ue = (o) => {
   return /* @__PURE__ */ l.jsx(L.Provider, {
     value: w,
     children: /* @__PURE__ */ l.jsx(De, {
-      as: r,
-      role: r === X ? null : "table",
+      as: a,
+      role: a === X ? null : "table",
       ref: s,
       className: H(v.root, i),
       ownerState: f,
@@ -690,8 +689,8 @@ process.env.NODE_ENV !== "production" && (ne.propTypes = {
    */
   sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
 });
-const E = /* @__PURE__ */ g.createContext();
-process.env.NODE_ENV !== "production" && (E.displayName = "Tablelvl2Context");
+const $ = /* @__PURE__ */ g.createContext();
+process.env.NODE_ENV !== "production" && ($.displayName = "Tablelvl2Context");
 function Ve(o) {
   return z("MuiTableBody", o);
 }
@@ -716,19 +715,19 @@ const Ae = (o) => {
     name: "MuiTableBody"
   }), {
     className: i,
-    component: r = Y,
+    component: a = Y,
     ...c
   } = n, d = {
     ...n,
-    component: r
+    component: a
   }, p = Ae(d);
-  return /* @__PURE__ */ l.jsx(E.Provider, {
+  return /* @__PURE__ */ l.jsx($.Provider, {
     value: We,
     children: /* @__PURE__ */ l.jsx(_e, {
       className: H(p.root, i),
-      as: r,
+      as: a,
       ref: s,
-      role: r === Y ? null : "rowgroup",
+      role: a === Y ? null : "rowgroup",
       ownerState: d,
       ...c
     })
@@ -770,10 +769,10 @@ const Le = B("MuiTableCell", ["root", "head", "body", "footer", "sizeSmall", "si
     variant: s,
     align: n,
     padding: i,
-    size: r,
+    size: a,
     stickyHeader: c
   } = o, d = {
-    root: ["root", s, c && "stickyHeader", n !== "inherit" && `align${j(n)}`, i !== "normal" && `padding${j(i)}`, `size${j(r)}`]
+    root: ["root", s, c && "stickyHeader", n !== "inherit" && `align${j(n)}`, i !== "normal" && `padding${j(i)}`, `size${j(a)}`]
   };
   return N(d, qe, t);
 }, Ge = P("td", {
@@ -899,7 +898,7 @@ const Le = B("MuiTableCell", ["root", "head", "body", "footer", "sizeSmall", "si
     name: "MuiTableCell"
   }), {
     align: i = "inherit",
-    className: r,
+    className: a,
     component: c,
     padding: d,
     scope: p,
@@ -907,15 +906,15 @@ const Le = B("MuiTableCell", ["root", "head", "body", "footer", "sizeSmall", "si
     sortDirection: f,
     variant: v,
     ...w
-  } = n, h = g.useContext(L), T = g.useContext(E), O = T && T.variant === "head";
-  let a;
-  c ? a = c : a = O ? "th" : "td";
+  } = n, h = g.useContext(L), T = g.useContext($), O = T && T.variant === "head";
+  let r;
+  c ? r = c : r = O ? "th" : "td";
   let x = p;
-  a === "td" ? x = void 0 : !x && O && (x = "col");
+  r === "td" ? x = void 0 : !x && O && (x = "col");
   const m = v || T && T.variant, C = {
     ...n,
     align: i,
-    component: a,
+    component: r,
     padding: d || (h && h.padding ? h.padding : "normal"),
     size: y || (h && h.size ? h.size : "medium"),
     sortDirection: f,
@@ -924,9 +923,9 @@ const Le = B("MuiTableCell", ["root", "head", "body", "footer", "sizeSmall", "si
   }, u = Je(C);
   let R = null;
   return f && (R = f === "asc" ? "ascending" : "descending"), /* @__PURE__ */ l.jsx(Ge, {
-    as: a,
+    as: r,
     ref: s,
-    className: H(u.root, r),
+    className: H(u.root, a),
     "aria-sort": R,
     scope: x,
     ownerState: C,
@@ -1015,19 +1014,19 @@ const Qe = (o) => {
     name: "MuiTableHead"
   }), {
     className: i,
-    component: r = Z,
+    component: a = Z,
     ...c
   } = n, d = {
     ...n,
-    component: r
+    component: a
   }, p = Qe(d);
-  return /* @__PURE__ */ l.jsx(E.Provider, {
+  return /* @__PURE__ */ l.jsx($.Provider, {
     value: Ye,
     children: /* @__PURE__ */ l.jsx(Xe, {
-      as: r,
+      as: a,
       className: H(p.root, i),
       ref: s,
-      role: r === Z ? null : "rowgroup",
+      role: a === Z ? null : "rowgroup",
       ownerState: d,
       ...c
     })
@@ -1069,10 +1068,10 @@ const ee = B("MuiTableRow", ["root", "selected", "hover", "head", "footer"]), eo
     selected: s,
     hover: n,
     head: i,
-    footer: r
+    footer: a
   } = o;
   return N({
-    root: ["root", s && "selected", n && "hover", i && "head", r && "footer"]
+    root: ["root", s && "selected", n && "hover", i && "head", a && "footer"]
   }, Ze, t);
 }, oo = P("tr", {
   name: "MuiTableRow",
@@ -1106,23 +1105,23 @@ const ee = B("MuiTableRow", ["root", "selected", "hover", "head", "footer"]), eo
     name: "MuiTableRow"
   }), {
     className: i,
-    component: r = oe,
+    component: a = oe,
     hover: c = !1,
     selected: d = !1,
     ...p
-  } = n, y = g.useContext(E), f = {
+  } = n, y = g.useContext($), f = {
     ...n,
-    component: r,
+    component: a,
     hover: c,
     selected: d,
     head: y && y.variant === "head",
     footer: y && y.variant === "footer"
   }, v = eo(f);
   return /* @__PURE__ */ l.jsx(oo, {
-    as: r,
+    as: a,
     ref: s,
     className: H(v.root, i),
-    role: r === oe ? null : "row",
+    role: a === oe ? null : "row",
     ownerState: f,
     ...p
   });
@@ -1170,7 +1169,7 @@ const to = ({
   hover: s,
   onClick: n,
   onDeselectAll: i,
-  onDeselectOne: r,
+  onDeselectOne: a,
   onSelectOne: c,
   onSelectAll: d,
   rows: p,
@@ -1211,39 +1210,39 @@ const to = ({
                 {
                   checked: T,
                   indeterminate: h,
-                  onChange: (a) => {
-                    T ? i?.(a) : d?.(a);
+                  onChange: (r) => {
+                    T ? i?.(r) : d?.(r);
                   }
                 }
               )
             }
           ) : null,
           o.map(
-            (a) => /* @__PURE__ */ l.jsx(
+            (r) => /* @__PURE__ */ l.jsx(
               M,
               {
                 sx: {
                   // Apply fixed width if specified
-                  width: a.width,
-                  minWidth: a.width,
-                  maxWidth: a.width,
+                  width: r.width,
+                  minWidth: r.width,
+                  maxWidth: r.width,
                   // Apply text alignment if specified
-                  ...a.align && { textAlign: a.align },
+                  ...r.align && { textAlign: r.align },
                   bgcolor: "action.hover",
                   backgroundClip: "padding-box",
                   borderTop: "1px solid",
                   borderColor: "divider"
                 },
-                children: a.hideName ? null : a.name
+                children: r.hideName ? null : r.name
               },
-              a.name ?? O
+              r.name ?? O
             )
           )
         ] })
       }
     ),
-    /* @__PURE__ */ l.jsx(ae, { children: p.length ? p.map((a, x) => {
-      const m = a.id ? a.id : v?.(a), C = m ? f?.has(m) : !1;
+    /* @__PURE__ */ l.jsx(ae, { children: p.length ? p.map((r, x) => {
+      const m = r.id ?? v?.(r), C = m ? f?.has(m) : !1;
       return /* @__PURE__ */ l.jsxs(
         U,
         {
@@ -1251,7 +1250,7 @@ const to = ({
           selected: C,
           ...n && {
             onClick: (u) => {
-              n(u, a);
+              n(u, r);
             }
           },
           sx: { ...n && { cursor: "pointer" } },
@@ -1261,7 +1260,7 @@ const to = ({
               {
                 checked: m ? C : !1,
                 onChange: (u) => {
-                  C ? r?.(u, a) : c?.(u, a);
+                  C ? a?.(u, r) : c?.(u, r);
                 },
                 onClick: (u) => {
                   n && u.stopPropagation();
@@ -1272,7 +1271,7 @@ const to = ({
               (u) => /* @__PURE__ */ l.jsx(M, {
                 sx: { ...u.align && { textAlign: u.align } },
                 // Use custom formatter if provided, otherwise extract field value
-                children: u.formatter ? u.formatter(a, x) : u.field ? a[u.field] : null
+                children: u.formatter ? u.formatter(r, x) : u.field ? r[u.field] : null
               }, u.name)
             )
           ]

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

@@ -3,27 +3,23 @@ import { useTheme as I, TextField as z } from "@mui/material";
 import { SForm as L } from "../s-form/s-form.js";
 import { _ as P, a as s } from "../objectWithoutPropertiesLoose-DiWPeE4c.js";
 import * as f from "react";
-import { P as e } from "../createTheme-CIXJrNxb.js";
-import { u as O, a as U, b as Y, c as Q, r as T, P as q, d as B, e as H, f as $, g as K, h as Z, i as G, j as J, C as X, k as p, l as M, m as ee, v as F, s as R, n as oe, D as te, o as se } from "../useMobilePicker-C0pYjskU.js";
-import { u as m } from "../warning-BZ61Y8gI.js";
-import { c as ae } from "../clsx-OuTLNxxd.js";
-import { g as ne } from "../generateUtilityClass-BhfUaMgk.js";
-import { g as re } from "../generateUtilityClasses-E9gROIFd.js";
-import { s as N } from "../styled-BR6UL29H.js";
-import { c as le } from "../DefaultPropsProvider-2MEHB2yv.js";
-import { T as ie } from "../Typography-Cum5_Ehu.js";
-import { r as y, a as C } from "../ButtonBase-PbSTzuUP.js";
+import { P as e } from "../createTheme-DgoJyWM-.js";
+import { g as U, a as Y, u as O, b as q, c as Q, d as B, r as T, e as H, P as $, f as K, h as Z, i as G, j as J, k as X, l as ee, m as oe, C as te, n as m, o as p, p as M, q as F, s as se, v as R, t as N, w as ae, D as ne, x as re } from "../useMobilePicker-DVnEuXv1.js";
+import { u as y } from "../warning-Ba-7BBAN.js";
+import { c as le } from "../clsx-OuTLNxxd.js";
+import { s as C } from "../styled-8Y5KoVix.js";
+import { T as ie } from "../Typography-PcmlIqm1.js";
 function ce(l) {
-  return ne("MuiDatePickerToolbar", l);
+  return U("MuiDatePickerToolbar", l);
 }
-re("MuiDatePickerToolbar", ["root", "title"]);
-const de = ["toolbarFormat", "toolbarPlaceholder", "className", "classes"], ue = (l) => le({
+Y("MuiDatePickerToolbar", ["root", "title"]);
+const de = ["toolbarFormat", "toolbarPlaceholder", "className", "classes"], ue = (l) => H({
   root: ["root"],
   title: ["title"]
-}, ce, l), fe = N(q, {
+}, ce, l), fe = C($, {
   name: "MuiDatePickerToolbar",
   slot: "Root"
-})({}), pe = N(ie, {
+})({}), pe = C(ie, {
   name: "MuiDatePickerToolbar",
   slot: "Title"
 })({
@@ -36,7 +32,7 @@ const de = ["toolbarFormat", "toolbarPlaceholder", "className", "classes"], ue =
     }
   }]
 }), g = /* @__PURE__ */ f.forwardRef(function(a, t) {
-  const n = m({
+  const n = y({
     props: a,
     name: "MuiDatePickerToolbar"
   }), {
@@ -48,7 +44,7 @@ const de = ["toolbarFormat", "toolbarPlaceholder", "className", "classes"], ue =
     value: D,
     views: v,
     orientation: E
-  } = U(), V = Y(), _ = Q(), w = ue(d), A = f.useMemo(() => {
+  } = q(), V = Q(), _ = B(), w = ue(d), A = f.useMemo(() => {
     if (!b.isValid(D))
       return r;
     const W = T(b, {
@@ -60,7 +56,7 @@ const de = ["toolbarFormat", "toolbarPlaceholder", "className", "classes"], ue =
   return /* @__PURE__ */ c.jsx(fe, s({
     ref: t,
     toolbarTitle: V.datePickerToolbarTitle,
-    className: ae(w.root, i)
+    className: le(w.root, i)
   }, u, {
     children: /* @__PURE__ */ c.jsx(pe, {
       variant: "h4",
@@ -103,15 +99,15 @@ process.env.NODE_ENV !== "production" && (g.propTypes = {
   toolbarPlaceholder: e.node
 });
 function S(l, a) {
-  const t = m({
+  const t = y({
     props: l,
     name: a
-  }), n = B(t), o = f.useMemo(() => t.localeText?.toolbarTitle == null ? t.localeText : s({}, t.localeText, {
+  }), n = K(t), o = f.useMemo(() => t.localeText?.toolbarTitle == null ? t.localeText : s({}, t.localeText, {
     datePickerToolbarTitle: t.localeText.toolbarTitle
   }), [t.localeText]);
   return s({}, t, n, {
     localeText: o
-  }, H({
+  }, Z({
     views: t.views,
     openTo: t.openTo,
     defaultViews: ["year", "day"],
@@ -123,30 +119,30 @@ function S(l, a) {
   });
 }
 const be = (l) => {
-  const a = $(l);
-  return K({
+  const a = G(l);
+  return J({
     manager: a,
     props: l
   });
 }, me = ["slots", "slotProps"], h = /* @__PURE__ */ f.forwardRef(function(a, t) {
-  const n = m({
+  const n = y({
     props: a,
     name: "MuiDateField"
   }), {
     slots: o,
     slotProps: r
-  } = n, i = P(n, me), d = Z({
+  } = n, i = P(n, me), d = X({
     slotProps: r,
     ref: t,
     externalForwardedProps: i
   }), u = be(d);
-  return /* @__PURE__ */ c.jsx(G, {
+  return /* @__PURE__ */ c.jsx(ee, {
     slots: o,
     slotProps: r,
     inputRef: i.inputRef,
-    children: /* @__PURE__ */ c.jsx(J, {
+    children: /* @__PURE__ */ c.jsx(oe, {
       fieldResponse: u,
-      defaultOpenPickerIcon: X
+      defaultOpenPickerIcon: te
     })
   });
 });
@@ -267,7 +263,7 @@ process.env.NODE_ENV !== "production" && (h.propTypes = {
   /**
    * Pass a ref to the `input` element.
    */
-  inputRef: y,
+  inputRef: m,
   /**
    * The label content.
    */
@@ -446,19 +442,19 @@ const k = /* @__PURE__ */ f.forwardRef(function(a, t) {
       field: h
     }, o.slots),
     slotProps: s({}, o.slotProps, {
-      field: (u) => s({}, C(o.slotProps?.field, u), M(o)),
+      field: (u) => s({}, M(o.slotProps?.field, u), F(o)),
       toolbar: s({
         hidden: !0
       }, o.slotProps?.toolbar)
     })
   }), {
     renderPicker: d
-  } = ee({
+  } = se({
     ref: t,
     props: i,
-    valueManager: R,
+    valueManager: N,
     valueType: "date",
-    validator: F,
+    validator: R,
     steps: null
   });
   return d();
@@ -548,7 +544,7 @@ k.propTypes = {
   /**
    * Pass a ref to the `input` element.
    */
-  inputRef: y,
+  inputRef: m,
   /**
    * The label content.
    */
@@ -796,19 +792,19 @@ const j = /* @__PURE__ */ f.forwardRef(function(a, t) {
       field: h
     }, o.slots),
     slotProps: s({}, o.slotProps, {
-      field: (u) => s({}, C(o.slotProps?.field, u), M(o)),
+      field: (u) => s({}, M(o.slotProps?.field, u), F(o)),
       toolbar: s({
         hidden: !1
       }, o.slotProps?.toolbar)
     })
   }), {
     renderPicker: d
-  } = oe({
+  } = ae({
     ref: t,
     props: i,
-    valueManager: R,
+    valueManager: N,
     valueType: "date",
-    validator: F,
+    validator: R,
     steps: null
   });
   return d();
@@ -898,7 +894,7 @@ j.propTypes = {
   /**
    * Pass a ref to the `input` element.
    */
-  inputRef: y,
+  inputRef: m,
   /**
    * The label content.
    */
@@ -1135,13 +1131,13 @@ j.propTypes = {
   yearsPerRow: e.oneOf([3, 4])
 };
 const ye = ["desktopModeMediaQuery"], x = /* @__PURE__ */ f.forwardRef(function(a, t) {
-  const n = m({
+  const n = y({
     props: a,
     name: "MuiDatePicker"
   }), {
-    desktopModeMediaQuery: o = te
+    desktopModeMediaQuery: o = ne
   } = n, r = P(n, ye);
-  return se(o, {
+  return re(o, {
     defaultMatches: !0
   }) ? /* @__PURE__ */ c.jsx(k, s({
     ref: t
@@ -1240,7 +1236,7 @@ process.env.NODE_ENV !== "production" && (x.propTypes = {
   /**
    * Pass a ref to the `input` element.
    */
-  inputRef: y,
+  inputRef: m,
   /**
    * The label content.
    */
@@ -1492,7 +1488,7 @@ const he = ({
       slots: {
         textField: z,
         // Use Material-UI TextField as input
-        ...r.slots || {}
+        ...r.slots ?? {}
         // Allow user to override slots if needed
       },
       slotProps: {
@@ -1500,14 +1496,14 @@ const he = ({
           sx: {
             "& .MuiPaper-root": {
               border: "1px solid",
-              borderColor: (i.vars || i).palette.divider,
-              borderRadius: (i.vars || i).shape.borderRadius,
+              borderColor: (i.vars ?? i).palette.divider,
+              borderRadius: (i.vars ?? i).shape.borderRadius,
               boxShadow: "none",
               backgroundImage: "none"
             }
           }
         },
-        ...r.slotProps || {}
+        ...r.slotProps ?? {}
         // Allow user to override slotProps if needed
       },
       ...r