@solostylist/ui-kit 1.0.19 → 1.0.21

package/dist/{identifier-CHPjnqaz.js → identifier-DCmLmBSP.js}

@@ -1,5 +1,18 @@
 import C from "@emotion/styled";
 import "@emotion/react";
+function v(e) {
+  var r, t, n = "";
+  if (typeof e == "string" || typeof e == "number") n += e;
+  else if (typeof e == "object") if (Array.isArray(e)) {
+    var o = e.length;
+    for (r = 0; r < o; r++) e[r] && (t = v(e[r])) && (n && (n += " "), n += t);
+  } else for (t in e) e[t] && (n && (n += " "), n += t);
+  return n;
+}
+function M() {
+  for (var e, r, t = 0, n = "", o = arguments.length; t < o; t++) (e = arguments[t]) && (r = v(e)) && (n && (n += " "), n += r);
+  return n;
+}
 function w(e) {
   for (var r = 0, t, n = 0, o = e.length; o >= 4; ++n, o -= 4)
     t = e.charCodeAt(n) & 255 | (e.charCodeAt(++n) & 255) << 8 | (e.charCodeAt(++n) & 255) << 16 | (e.charCodeAt(++n) & 255) << 24, t = /* Math.imul(k, m): */
@@ -75,12 +88,12 @@ function A(e) {
     return r[t] === void 0 && (r[t] = e(t)), r[t];
   };
 }
-var S = /[A-Z]|^ms/g, O = /_EMO_([^_]+?)_([^]*?)_EMO_/g, v = function(r) {
+var S = /[A-Z]|^ms/g, O = /_EMO_([^_]+?)_([^]*?)_EMO_/g, b = function(r) {
   return r.charCodeAt(1) === 45;
 }, x = function(r) {
   return r != null && typeof r != "boolean";
 }, d = /* @__PURE__ */ A(function(e) {
-  return v(e) ? e : e.replace(S, "-$&").toLowerCase();
+  return b(e) ? e : e.replace(S, "-$&").toLowerCase();
 }), y = function(r, t) {
   switch (r) {
     case "animation":
@@ -94,7 +107,7 @@ var S = /[A-Z]|^ms/g, O = /_EMO_([^_]+?)_([^]*?)_EMO_/g, v = function(r) {
           }, o;
         });
   }
-  return _[r] !== 1 && !v(r) && typeof t == "number" && t !== 0 ? t + "px" : t;
+  return _[r] !== 1 && !b(r) && typeof t == "number" && t !== 0 ? t + "px" : t;
 };
 function u(e, r, t) {
   if (t == null)
@@ -196,7 +209,7 @@ function R(e, r, t) {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-function M(e, r) {
+function $(e, r) {
   const t = C(e, r);
   return process.env.NODE_ENV !== "production" ? (...n) => {
     const o = typeof e == "string" ? `"${e}"` : "component";
@@ -204,31 +217,18 @@ function M(e, r) {
 `)) : n.some((a) => a === void 0) && console.error(`MUI: the styled(${o})(...args) API requires all its args to be defined.`), t(...n);
   } : t;
 }
-function $(e, r) {
+function P(e, r) {
   Array.isArray(e.__emotion_styles) && (e.__emotion_styles = r(e.__emotion_styles));
 }
 const p = [];
-function P(e) {
+function F(e) {
   return p[0] = e, R(p);
 }
-function b(e) {
-  var r, t, n = "";
-  if (typeof e == "string" || typeof e == "number") n += e;
-  else if (typeof e == "object") if (Array.isArray(e)) {
-    var o = e.length;
-    for (r = 0; r < o; r++) e[r] && (t = b(e[r])) && (n && (n += " "), n += t);
-  } else for (t in e) e[t] && (n && (n += " "), n += t);
-  return n;
-}
-function F() {
-  for (var e, r, t = 0, n = "", o = arguments.length; t < o; t++) (e = arguments[t]) && (r = b(e)) && (n && (n += " "), n += r);
-  return n;
-}
 const N = "$$material";
 export {
   N as T,
-  $ as a,
-  F as c,
-  P as i,
-  M as s
+  P as a,
+  M as c,
+  F as i,
+  $ as s
 };

package/dist/{index-DKnaPifQ.js → index-8QDI4GK5.js}

@@ -1,10 +1,10 @@
 import "react";
 import { j as p } from "./jsx-runtime-C5mzlN2N.js";
-import { e as f } from "./extendSxProp-CRSYESt2.js";
-import { P as e } from "./createTheme-Hc7RjLJ8.js";
-import { d as a } from "./memoTheme-Bkr5VYLb.js";
-import { T as c } from "./identifier-CHPjnqaz.js";
-import { u as m } from "./useTheme-Z78hHaly.js";
+import { e as f } from "./extendSxProp-oTj2mv7x.js";
+import { P as e } from "./createTheme-DkVAXJiq.js";
+import { d as a } from "./DefaultPropsProvider-DhE0_fCr.js";
+import { T as c } from "./identifier-DCmLmBSP.js";
+import { u as m } from "./useTheme-B14mI9KW.js";
 import { Global as y } from "@emotion/react";
 function d(o) {
   return o == null || Object.keys(o).length === 0;

package/dist/{menuItemClasses-Dzm1zEZ_.js → menuItemClasses-D9_8SIPH.js}

@@ -1,5 +1,5 @@
-import { g as e } from "./generateUtilityClasses-BUjlppXi.js";
-import { g as i } from "./createTheme-Hc7RjLJ8.js";
+import { g as e } from "./generateUtilityClasses-DStZbN71.js";
+import { g as i } from "./createTheme-DkVAXJiq.js";
 const r = e("MuiDivider", ["root", "absolute", "fullWidth", "inset", "middle", "flexItem", "light", "vertical", "withChildren", "withChildrenVertical", "textAlignRight", "textAlignLeft", "wrapper", "wrapperVertical"]);
 function a(t) {
   return i("MuiMenuItem", t);

package/dist/{outlinedInputClasses-49K73-OT.js → outlinedInputClasses-DNQT_xFJ.js}

@@ -1,5 +1,5 @@
-import { g as n } from "./generateUtilityClasses-BUjlppXi.js";
-import { g as e } from "./createTheme-Hc7RjLJ8.js";
+import { g as n } from "./generateUtilityClasses-DStZbN71.js";
+import { g as e } from "./createTheme-DkVAXJiq.js";
 function l(t) {
   return e("MuiInputBase", t);
 }

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

@@ -1,13 +1,13 @@
 import { j as r } from "../jsx-runtime-C5mzlN2N.js";
 import * as y from "react";
 import Ce from "../s-empty/s-empty.js";
-import { g as N, c as j, P as e, a as M, n as Te, o as ke } from "../createTheme-Hc7RjLJ8.js";
-import { c as I } from "../identifier-CHPjnqaz.js";
-import { s as S, c as $, r as se, u as E, m as W } from "../memoTheme-Bkr5VYLb.js";
-import { g as B } from "../generateUtilityClasses-BUjlppXi.js";
-import { u as je, a as Re } from "../useControlled-Bvu9pDu8.js";
-import { a as A, B as Oe, r as we, m as Pe } from "../useSlot-DeteCI62.js";
-import { c as J } from "../createSvgIcon-Ct7gnxYc.js";
+import { g as N, c as j, P as e, a as M, n as Te, o as ke } from "../createTheme-DkVAXJiq.js";
+import { c as I } from "../identifier-DCmLmBSP.js";
+import { s as S, c as $, r as se, u as E, m as W } from "../DefaultPropsProvider-DhE0_fCr.js";
+import { g as B } from "../generateUtilityClasses-DStZbN71.js";
+import { u as je, a as Re } from "../useFormControl-D6-HePVL.js";
+import { a as A, B as Oe, r as we, m as Pe } from "../useSlot-D9cy_5Wu.js";
+import { c as J } from "../createSvgIcon-CFj_BoDp.js";
 import { c as Y } from "../createSimplePaletteValueFilter-B7--0ryQ.js";
 function Se(o) {
   return N("PrivateSwitchBase", o);

package/dist/s-dialog-confirm/s-dialog-confirm.js

@@ -3,7 +3,7 @@ import * as r from "react";
 import { Dialog as p, DialogTitle as g, Stack as j, IconButton as D, DialogContent as v, DialogActions as y, Button as d } from "@mui/material";
 import { S as b } from "../X-B8GTZwii.js";
 import { useDialog as k } from "../hooks/use-dialog.js";
-import { T as m } from "../Typography--_YDZuXf.js";
+import { T as m } from "../Typography-BUC2b3EE.js";
 const w = ({
   title: o,
   content: e,

package/dist/s-dialog-message/s-dialog-message.js

@@ -3,7 +3,7 @@ import * as s from "react";
 import { Dialog as u, DialogTitle as p, Stack as g, IconButton as m, DialogContent as j, DialogActions as f, Button as C } from "@mui/material";
 import { S as D } from "../X-B8GTZwii.js";
 import { useDialog as k } from "../hooks/use-dialog.js";
-import { T as c } from "../Typography--_YDZuXf.js";
+import { T as c } from "../Typography-BUC2b3EE.js";
 const v = ({
   title: n,
   content: e,

package/dist/s-file-dropzone/s-file-dropzone.js

@@ -7,9 +7,9 @@ import { useDropzone as F } from "react-dropzone";
 import I from "../s-file-icon/s-file-icon.js";
 import O from "../s-form/s-form.js";
 import { bytesToSize as C } from "../utils/bytes-to-size.js";
-import { S as n } from "../Stack-Cvqi8X8g.js";
-import { B as u } from "../Box-CppaOdse.js";
-import { T as i } from "../Typography--_YDZuXf.js";
+import { S as n } from "../Stack-Du2vO-iF.js";
+import { B as u } from "../Box-CYhpy9DM.js";
+import { T as i } from "../Typography-BUC2b3EE.js";
 const H = /* @__PURE__ */ new Map([
   [
     "bold",

package/dist/s-file-icon/s-file-icon.js

@@ -1,5 +1,5 @@
 import { j as e } from "../jsx-runtime-C5mzlN2N.js";
-import { B as i } from "../Box-CppaOdse.js";
+import { B as i } from "../Box-CYhpy9DM.js";
 const o = {
   jpeg: "/assets/icon-jpg.svg",
   jpg: "/assets/icon-jpg.svg",

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

@@ -1,9 +1,10 @@
 export interface SFormProps {
     label: string | React.ReactNode;
+    hint?: string;
     error?: string;
     required: boolean;
     children: React.ReactNode;
     htmlFor?: string;
 }
-declare const SForm: ({ label, error, required, children, htmlFor }: SFormProps) => import("react/jsx-runtime").JSX.Element;
+declare const SForm: ({ label, hint, error, required, children, htmlFor }: SFormProps) => import("react/jsx-runtime").JSX.Element;
 export default SForm;

package/dist/s-form/s-form.js

@@ -1,10 +1,15 @@
-import { j as o } from "../jsx-runtime-C5mzlN2N.js";
-import { FormControl as m, FormLabel as s, FormHelperText as i } from "@mui/material";
-const d = ({ label: l, error: r, required: t, children: e, htmlFor: n }) => /* @__PURE__ */ o.jsxs(m, { error: !!r, fullWidth: !0, children: [
-  l ? /* @__PURE__ */ o.jsx(s, { htmlFor: n, required: t, children: l }) : null,
-  e,
-  r ? /* @__PURE__ */ o.jsx(i, { children: r }) : null
+import { j as l } from "../jsx-runtime-C5mzlN2N.js";
+import { FormControl as i, FormLabel as m, Tooltip as p, FormHelperText as x } from "@mui/material";
+import { H as a } from "../HelpOutline-BpAsfhrs.js";
+const f = ({ label: t, hint: o, error: e, required: r, children: s, htmlFor: n }) => /* @__PURE__ */ l.jsxs(i, { error: !!e, fullWidth: !0, children: [
+  t ? /* @__PURE__ */ l.jsxs(m, { htmlFor: n, required: r, sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+    t,
+    " ",
+    o ? /* @__PURE__ */ l.jsx(p, { title: o, placement: "top", children: /* @__PURE__ */ l.jsx(a, { fontSize: "small" }) }) : null
+  ] }) : null,
+  s,
+  e ? /* @__PURE__ */ l.jsx(x, { children: e }) : null
 ] });
 export {
-  d as default
+  f as default
 };

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

@@ -5,7 +5,8 @@ export interface SLabelProps {
     label?: string | React.ReactNode;
     content?: string | React.ReactNode;
     children?: React.ReactNode;
+    hint?: string;
     sx?: SxProps<Theme> | undefined;
 }
-declare const SLabel: ({ label, content, children, sx }: SLabelProps) => React.JSX.Element;
+declare const SLabel: ({ label, content, children, hint, sx }: SLabelProps) => React.JSX.Element;
 export default SLabel;

package/dist/s-label/s-label.js

@@ -1,7 +1,11 @@
 import { j as e } from "../jsx-runtime-C5mzlN2N.js";
-import { Stack as n } from "@mui/material";
-const a = ({ label: t, content: i, children: r, sx: o }) => /* @__PURE__ */ e.jsxs(n, { width: "100%", sx: o, children: [
-  /* @__PURE__ */ e.jsx("div", { style: { fontSize: "1rem", fontWeight: 500, lineHeight: 1.57 }, children: t }),
+import { Stack as i, Tooltip as s } from "@mui/material";
+import { H as a } from "../HelpOutline-BpAsfhrs.js";
+const p = ({ label: l, content: r, children: o, hint: t, sx: n }) => /* @__PURE__ */ e.jsxs(i, { width: "100%", sx: n, children: [
+  /* @__PURE__ */ e.jsxs(i, { direction: "row", gap: 1, alignItems: "center", children: [
+    /* @__PURE__ */ e.jsx("div", { style: { fontSize: "1rem", fontWeight: 500, lineHeight: 1.57 }, children: l }),
+    t ? /* @__PURE__ */ e.jsx(s, { title: t, placement: "top", children: /* @__PURE__ */ e.jsx(a, { fontSize: "small" }) }) : null
+  ] }),
   /* @__PURE__ */ e.jsx(
     "div",
     {
@@ -11,11 +15,11 @@ const a = ({ label: t, content: i, children: r, sx: o }) => /* @__PURE__ */ e.js
         lineHeight: 1.57,
         color: "var(--mui-palette-text-secondary)"
       },
-      children: i
+      children: r
     }
   ),
-  r
+  o
 ] });
 export {
-  a as default
+  p as default
 };

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

@@ -1,26 +1,26 @@
 import { j as l } from "../jsx-runtime-C5mzlN2N.js";
-import * as u from "react";
-import { c as V } from "../createSvgIcon-Ct7gnxYc.js";
-import { OutlinedInput as P, selectClasses as B } from "@mui/material";
-import { usePopover as E } from "../hooks/use-popover.js";
+import * as m from "react";
+import { c as V } from "../createSvgIcon-CFj_BoDp.js";
+import { Stack as P, OutlinedInput as B, selectClasses as E } from "@mui/material";
+import { usePopover as U } from "../hooks/use-popover.js";
 import F from "../s-chips/s-chips.js";
 import { gray as x } from "../theme/theme-primitives.js";
-import { L as O, M as U } from "../Menu-bcHHOGTe.js";
-import { a as f, P as s } from "../createTheme-Hc7RjLJ8.js";
-import { c as M } from "../identifier-CHPjnqaz.js";
-import { u as z, s as D, c as G, r as H, m as _ } from "../memoTheme-Bkr5VYLb.js";
-import { g as A, d as k, m } from "../menuItemClasses-Dzm1zEZ_.js";
-import { u as W } from "../useEnhancedEffect-CJGo-L3B.js";
-import { u as q, B as J } from "../useSlot-DeteCI62.js";
-import { g as S } from "../generateUtilityClasses-BUjlppXi.js";
-const K = V(/* @__PURE__ */ l.jsx("path", {
+import { L as O, M as z } from "../Menu-DeygsmYI.js";
+import { a as f, P as s } from "../createTheme-DkVAXJiq.js";
+import { c as M } from "../identifier-DCmLmBSP.js";
+import { u as D, s as G, c as H, r as _, m as A } from "../DefaultPropsProvider-DhE0_fCr.js";
+import { g as W, d as k, m as u } from "../menuItemClasses-D9_8SIPH.js";
+import { u as q } from "../useEnhancedEffect-CJGo-L3B.js";
+import { u as J, B as K } from "../useSlot-D9cy_5Wu.js";
+import { g as R } from "../generateUtilityClasses-DStZbN71.js";
+const Q = V(/* @__PURE__ */ l.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"), j = S("MuiListItemIcon", ["root", "alignItemsFlexStart"]), R = S("MuiListItemText", ["root", "multiline", "dense", "inset", "primary", "secondary"]), Q = (e, o) => {
+}), "UnfoldMore"), S = R("MuiListItemIcon", ["root", "alignItemsFlexStart"]), j = R("MuiListItemText", ["root", "multiline", "dense", "inset", "primary", "secondary"]), X = (e, o) => {
   const {
     ownerState: r
   } = e;
   return [o.root, r.dense && o.dense, r.divider && o.divider, !r.disableGutters && o.gutters];
-}, X = (e) => {
+}, Y = (e) => {
   const {
     disabled: o,
     dense: r,
@@ -28,19 +28,19 @@ const K = V(/* @__PURE__ */ l.jsx("path", {
     disableGutters: d,
     selected: i,
     classes: c
-  } = e, n = G({
+  } = e, n = H({
     root: ["root", r && "dense", o && "disabled", !d && "gutters", a && "divider", i && "selected"]
-  }, A, c);
+  }, W, c);
   return {
     ...c,
     ...n
   };
-}, Y = D(J, {
-  shouldForwardProp: (e) => H(e) || e === "classes",
+}, Z = G(K, {
+  shouldForwardProp: (e) => _(e) || e === "classes",
   name: "MuiMenuItem",
   slot: "Root",
-  overridesResolver: Q
-})(_(({
+  overridesResolver: X
+})(A(({
   theme: e
 }) => ({
   ...e.typography.body1,
@@ -62,23 +62,23 @@ const K = V(/* @__PURE__ */ l.jsx("path", {
       backgroundColor: "transparent"
     }
   },
-  [`&.${m.selected}`]: {
+  [`&.${u.selected}`]: {
     backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : f(e.palette.primary.main, e.palette.action.selectedOpacity),
-    [`&.${m.focusVisible}`]: {
+    [`&.${u.focusVisible}`]: {
       backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.focusOpacity}))` : f(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.focusOpacity)
     }
   },
-  [`&.${m.selected}:hover`]: {
+  [`&.${u.selected}:hover`]: {
     backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.hoverOpacity}))` : f(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     "@media (hover: none)": {
       backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : f(e.palette.primary.main, e.palette.action.selectedOpacity)
     }
   },
-  [`&.${m.focusVisible}`]: {
+  [`&.${u.focusVisible}`]: {
     backgroundColor: (e.vars || e).palette.action.focus
   },
-  [`&.${m.disabled}`]: {
+  [`&.${u.disabled}`]: {
     opacity: (e.vars || e).palette.action.disabledOpacity
   },
   [`& + .${k.root}`]: {
@@ -88,14 +88,14 @@ const K = V(/* @__PURE__ */ l.jsx("path", {
   [`& + .${k.inset}`]: {
     marginLeft: 52
   },
-  [`& .${R.root}`]: {
+  [`& .${j.root}`]: {
     marginTop: 0,
     marginBottom: 0
   },
-  [`& .${R.inset}`]: {
+  [`& .${j.inset}`]: {
     paddingLeft: 36
   },
-  [`& .${j.root}`]: {
+  [`& .${S.root}`]: {
     minWidth: 36
   },
   variants: [{
@@ -133,13 +133,13 @@ const K = V(/* @__PURE__ */ l.jsx("path", {
       paddingTop: 4,
       paddingBottom: 4,
       ...e.typography.body2,
-      [`& .${j.root} svg`]: {
+      [`& .${S.root} svg`]: {
         fontSize: "1.25rem"
       }
     }
   }]
-}))), h = /* @__PURE__ */ u.forwardRef(function(o, r) {
-  const a = z({
+}))), h = /* @__PURE__ */ m.forwardRef(function(o, r) {
+  const a = D({
     props: o,
     name: "MuiMenuItem"
   }), {
@@ -153,11 +153,11 @@ const K = V(/* @__PURE__ */ l.jsx("path", {
     tabIndex: y,
     className: w,
     ...T
-  } = a, C = u.useContext(O), I = u.useMemo(() => ({
+  } = a, C = m.useContext(O), I = m.useMemo(() => ({
     dense: c || C.dense || !1,
     disableGutters: n
-  }), [C.dense, c, n]), v = u.useRef(null);
-  W(() => {
+  }), [C.dense, c, n]), v = m.useRef(null);
+  q(() => {
     d && (v.current ? v.current.focus() : process.env.NODE_ENV !== "production" && console.error("MUI: Unable to set focus to a MenuItem whose component has not been rendered."));
   }, [d]);
   const L = {
@@ -165,11 +165,11 @@ const K = V(/* @__PURE__ */ l.jsx("path", {
     dense: I.dense,
     divider: t,
     disableGutters: n
-  }, g = X(a), N = q(v, r);
+  }, g = Y(a), N = J(v, r);
   let $;
   return a.disabled || ($ = y !== void 0 ? y : -1), /* @__PURE__ */ l.jsx(O.Provider, {
     value: I,
-    children: /* @__PURE__ */ l.jsx(Y, {
+    children: /* @__PURE__ */ l.jsx(Z, {
       ref: N,
       role: b,
       tabIndex: $,
@@ -257,26 +257,26 @@ process.env.NODE_ENV !== "production" && (h.propTypes = {
    */
   tabIndex: s.number
 });
-function me({
+function fe({
   label: e,
   onChange: o,
   options: r,
   value: a = [],
   chipProps: d
 }) {
-  const i = E(), c = u.useCallback(
+  const i = U(), c = m.useCallback(
     (t, n) => {
       let p = [...a];
       n ? p.push(t) : p = p.filter((b) => b !== t), o == null || o(p);
     },
     [o, a]
   );
-  return /* @__PURE__ */ l.jsxs(u.Fragment, { children: [
+  return /* @__PURE__ */ l.jsxs(P, { direction: "column", gap: 1, children: [
     /* @__PURE__ */ l.jsx(
-      P,
+      B,
       {
         endAdornment: /* @__PURE__ */ l.jsx(
-          K,
+          Q,
           {
             fontSize: "small",
             sx: { color: "var(--s-palette-action-active)", position: "absolute", right: "7px" }
@@ -296,7 +296,7 @@ function me({
             backgroundColor: "var(--s-palette-background-paper)",
             boxShadow: "none"
           },
-          [`&.${B.focused}`]: {
+          [`&.${E.focused}`]: {
             outlineOffset: 0,
             borderColor: x[400]
           },
@@ -307,7 +307,7 @@ function me({
       }
     ),
     /* @__PURE__ */ l.jsx(
-      U,
+      z,
       {
         anchorEl: i.anchorRef.current,
         onClose: i.handleClose,
@@ -339,5 +339,5 @@ function me({
   ] });
 }
 export {
-  me as default
+  fe as default
 };

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

@@ -1,56 +1,59 @@
-import { j as d } from "../jsx-runtime-C5mzlN2N.js";
-import { forwardRef as h, useState as m, useEffect as V } from "react";
+import { j as u } from "../jsx-runtime-C5mzlN2N.js";
+import { forwardRef as m, useState as b, useEffect as V } from "react";
 import { Select as E, MenuItem as O } from "@mui/material";
 import R from "../s-form/s-form.js";
-const M = h(
+const M = m(
   ({
-    options: l = [],
-    optionLabel: o = "name",
-    optionValue: c = "id",
-    placeholder: i,
+    options: t = [],
+    optionLabel: c = "name",
+    optionValue: i = "id",
+    placeholder: d,
     label: v = "",
     error: x,
     required: y = !1,
     variant: $ = "outlined",
     simple: g = !1,
-    htmlFor: s,
-    ...t
+    htmlFor: o,
+    ...n
   }, j) => {
-    const [S, p] = m(t.value ?? null);
+    const [p, S] = b(n.value ?? null);
     V(() => {
-      p(t.value ?? null);
-    }, [t.value]);
-    const u = (e) => String(typeof e == "string" || typeof e == "number" ? e : e[o]), n = (e) => typeof e == "string" || typeof e == "number" ? e : e[c];
-    return /* @__PURE__ */ d.jsx(R, { error: x, label: v, required: y, htmlFor: s, children: /* @__PURE__ */ d.jsx(
+      S(n.value ?? null);
+    }, [n.value]);
+    const a = (e) => String(typeof e == "string" || typeof e == "number" ? e : e[c]), l = (e) => typeof e == "string" || typeof e == "number" ? e : e[i];
+    return /* @__PURE__ */ u.jsx(R, { error: x, label: v, required: y, htmlFor: o, children: /* @__PURE__ */ u.jsx(
       E,
       {
-        id: s,
+        id: o,
         displayEmpty: !0,
         fullWidth: !0,
         defaultValue: "",
         ref: j,
-        renderValue: t.multiple ? (e) => e.map((a) => {
-          const f = l.find((b) => n(b) === n(a));
-          return f ? u(f) : "";
-        }).filter(Boolean).join(", ") : (e) => {
+        renderValue: n.multiple ? (e) => {
+          const r = e;
+          return r.length === 0 ? /* @__PURE__ */ u.jsx("span", { style: { color: "var(--mui-palette-text-secondary)" }, children: d }) : r.map((f) => {
+            const s = t.find((h) => l(h) === l(f));
+            return s ? a(s) : "";
+          }).filter(Boolean).join(", ");
+        } : (e) => {
           const r = e;
           if (r == null || r === "")
-            return /* @__PURE__ */ d.jsx("span", { style: { color: "var(--mui-palette-text-secondary)" }, children: i });
+            return /* @__PURE__ */ u.jsx("span", { style: { color: "var(--mui-palette-text-secondary)" }, children: d });
           if (g)
-            return u(r);
-          const a = l.find((f) => n(f) === n(r));
-          return a ? u(a) : "";
+            return a(r);
+          const f = t.find((s) => l(s) === l(r));
+          return f ? a(f) : "";
         },
-        ...t,
-        value: l.length ? S ?? "" : "",
-        children: l == null ? void 0 : l.map((e, r) => /* @__PURE__ */ d.jsx(
+        ...n,
+        value: t.length ? p ?? "" : "",
+        children: t == null ? void 0 : t.map((e, r) => /* @__PURE__ */ u.jsx(
           O,
           {
             disabled: (e == null ? void 0 : e.disabled) ?? !1,
-            value: n(e),
-            children: u(e)
+            value: l(e),
+            children: a(e)
           },
-          `${n(e)}-${r}`
+          `${l(e)}-${r}`
         ))
       }
     ) });