@solostylist/ui-kit 1.0.42 → 1.0.44

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

@@ -1,16 +1,16 @@
 import { j as e } from "../jsx-runtime-C5mzlN2N.js";
-import { Avatar as v, Tooltip as b, IconButton as y, Button as I } from "@mui/material";
-import { IconCloudUp as S, IconX as w } from "@tabler/icons-react";
-import { useDropzone as z } from "react-dropzone";
-import C from "../s-file-icon/s-file-icon.js";
-import k from "../s-form/s-form.js";
+import { Avatar as v, Tooltip as y, IconButton as b, Button as I } from "@mui/material";
+import { IconCloudUp as S, IconX as z } from "@tabler/icons-react";
+import { useDropzone as C } from "react-dropzone";
+import k from "../s-file-icon/s-file-icon.js";
+import w from "../s-form/s-form.js";
 import { bytesToSize as B } from "../utils/bytes-to-size.js";
 import { S as r } from "../Stack-CHCAZYKm.js";
-import { B as d } from "../Box-BOnkyXg-.js";
+import { B as p } from "../Box-BOnkyXg-.js";
 import { T as o } from "../Typography-8CUP66S2.js";
 const H = ({
   caption: i,
-  label: p = "",
+  label: d = "",
   error: x,
   onRemoveAll: m,
   onUpload: D,
@@ -21,10 +21,10 @@ const H = ({
   ...n
 }) => {
   var l, c;
-  const { getRootProps: u, getInputProps: g, isDragActive: a } = z(n);
-  return /* @__PURE__ */ e.jsxs(k, { error: x, label: p, required: h, children: [
+  const { getRootProps: u, getInputProps: g, isDragActive: a } = C(n);
+  return /* @__PURE__ */ e.jsxs(w, { error: x, label: d, required: h, children: [
     /* @__PURE__ */ e.jsx(r, { spacing: 2, mt: "0.5rem", children: /* @__PURE__ */ e.jsxs(
-      d,
+      p,
       {
         sx: {
           alignItems: "center",
@@ -55,7 +55,6 @@ const H = ({
               {
                 sx: {
                   bgcolor: "var(--s-palette-background-paper)",
-                  boxShadow: "var(--s-shadows-8)",
                   color: "var(--s-palette-text-primary)"
                 },
                 children: /* @__PURE__ */ e.jsx(S, {})
@@ -90,18 +89,18 @@ const H = ({
               p: 1
             },
             children: [
-              /* @__PURE__ */ e.jsx(C, { extension: f }),
-              /* @__PURE__ */ e.jsxs(d, { sx: { flex: "1 1 auto" }, children: [
+              /* @__PURE__ */ e.jsx(k, { extension: f }),
+              /* @__PURE__ */ e.jsxs(p, { sx: { flex: "1 1 auto" }, children: [
                 /* @__PURE__ */ e.jsx(o, { variant: "subtitle2", children: t.name }),
                 /* @__PURE__ */ e.jsx(o, { color: "text.secondary", variant: "body2", children: B(t.size) })
               ] }),
-              /* @__PURE__ */ e.jsx(b, { title: "Remove", children: /* @__PURE__ */ e.jsx(
-                y,
+              /* @__PURE__ */ e.jsx(y, { title: "Remove", children: /* @__PURE__ */ e.jsx(
+                b,
                 {
                   onClick: () => {
                     s == null || s(t);
                   },
-                  children: /* @__PURE__ */ e.jsx(w, {})
+                  children: /* @__PURE__ */ e.jsx(z, {})
                 }
               ) })
             ]

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

@@ -1,49 +1,48 @@
 import { j as l } from "../jsx-runtime-C5mzlN2N.js";
-import * as f from "react";
-import { c as N } from "../createSvgIcon-FIMSBrG5.js";
-import { Stack as P, OutlinedInput as B, selectClasses as E } from "@mui/material";
-import { usePopover as U } from "../hooks/use-popover.js";
-import D from "../s-chips/s-chips.js";
-import { gray as y } from "../theme/theme-primitives.js";
-import { L as O, M as F } from "../Menu-BTGaz6HX.js";
-import { g as z, a as m, P as t } from "../createTheme-CyFSna1a.js";
-import { c as h } from "../identifier-BA7fwE7E.js";
-import { u as G, s as A, c as H, b as W, m as _ } from "../memoTheme-Bz_6CvJG.js";
-import { g as b } from "../generateUtilityClasses-CvAVhM6T.js";
-import { u as q } from "../useEnhancedEffect-CJGo-L3B.js";
-import { u as J, B as K } from "../useSlot-DFX3jR9F.js";
-const Q = N(/* @__PURE__ */ l.jsx("path", {
+import * as c from "react";
+import { c as T } from "../createSvgIcon-FIMSBrG5.js";
+import { Stack as N, OutlinedInput as E } from "@mui/material";
+import { usePopover as P } from "../hooks/use-popover.js";
+import B from "../s-chips/s-chips.js";
+import { L as h, M as U } from "../Menu-BTGaz6HX.js";
+import { g as D, a as v, P as o } from "../createTheme-CyFSna1a.js";
+import { c as R } from "../identifier-BA7fwE7E.js";
+import { u as F, s as z, c as G, b as W, m as A } from "../memoTheme-Bz_6CvJG.js";
+import { g } from "../generateUtilityClasses-CvAVhM6T.js";
+import { u as H } from "../useEnhancedEffect-CJGo-L3B.js";
+import { u as _, B as q } from "../useSlot-DFX3jR9F.js";
+const J = T(/* @__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"), k = b("MuiDivider", ["root", "absolute", "fullWidth", "inset", "middle", "flexItem", "light", "vertical", "withChildren", "withChildrenVertical", "textAlignRight", "textAlignLeft", "wrapper", "wrapperVertical"]), w = b("MuiListItemIcon", ["root", "alignItemsFlexStart"]), R = b("MuiListItemText", ["root", "multiline", "dense", "inset", "primary", "secondary"]);
-function X(e) {
-  return z("MuiMenuItem", e);
+}), "UnfoldMore"), j = g("MuiDivider", ["root", "absolute", "fullWidth", "inset", "middle", "flexItem", "light", "vertical", "withChildren", "withChildrenVertical", "textAlignRight", "textAlignLeft", "wrapper", "wrapperVertical"]), S = g("MuiListItemIcon", ["root", "alignItemsFlexStart"]), k = g("MuiListItemText", ["root", "multiline", "dense", "inset", "primary", "secondary"]);
+function K(e) {
+  return D("MuiMenuItem", e);
 }
-const u = b("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divider", "gutters", "selected"]), Y = (e, o) => {
+const b = g("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divider", "gutters", "selected"]), Q = (e, t) => {
   const {
     ownerState: r
   } = e;
-  return [o.root, r.dense && o.dense, r.divider && o.divider, !r.disableGutters && o.gutters];
-}, Z = (e) => {
+  return [t.root, r.dense && t.dense, r.divider && t.divider, !r.disableGutters && t.gutters];
+}, X = (e) => {
   const {
-    disabled: o,
+    disabled: t,
     dense: r,
     divider: a,
-    disableGutters: d,
-    selected: i,
-    classes: c
-  } = e, n = H({
-    root: ["root", r && "dense", o && "disabled", !d && "gutters", a && "divider", i && "selected"]
-  }, X, c);
+    disableGutters: u,
+    selected: n,
+    classes: i
+  } = e, d = G({
+    root: ["root", r && "dense", t && "disabled", !u && "gutters", a && "divider", n && "selected"]
+  }, K, i);
   return {
-    ...c,
-    ...n
+    ...i,
+    ...d
   };
-}, ee = A(K, {
+}, Y = z(q, {
   shouldForwardProp: (e) => W(e) || e === "classes",
   name: "MuiMenuItem",
   slot: "Root",
-  overridesResolver: Y
-})(_(({
+  overridesResolver: Q
+})(A(({
   theme: e
 }) => ({
   ...e.typography.body1,
@@ -65,62 +64,62 @@ const u = b("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divide
       backgroundColor: "transparent"
     }
   },
-  [`&.${u.selected}`]: {
-    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : m(e.palette.primary.main, e.palette.action.selectedOpacity),
-    [`&.${u.focusVisible}`]: {
-      backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.focusOpacity}))` : m(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.focusOpacity)
+  [`&.${b.selected}`]: {
+    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : v(e.palette.primary.main, e.palette.action.selectedOpacity),
+    [`&.${b.focusVisible}`]: {
+      backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.focusOpacity}))` : v(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.focusOpacity)
     }
   },
-  [`&.${u.selected}:hover`]: {
-    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.hoverOpacity}))` : m(e.palette.primary.main, e.palette.action.selectedOpacity + e.palette.action.hoverOpacity),
+  [`&.${b.selected}:hover`]: {
+    backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / calc(${e.vars.palette.action.selectedOpacity} + ${e.vars.palette.action.hoverOpacity}))` : v(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})` : m(e.palette.primary.main, e.palette.action.selectedOpacity)
+      backgroundColor: e.vars ? `rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.selectedOpacity})` : v(e.palette.primary.main, e.palette.action.selectedOpacity)
     }
   },
-  [`&.${u.focusVisible}`]: {
+  [`&.${b.focusVisible}`]: {
     backgroundColor: (e.vars || e).palette.action.focus
   },
-  [`&.${u.disabled}`]: {
+  [`&.${b.disabled}`]: {
     opacity: (e.vars || e).palette.action.disabledOpacity
   },
-  [`& + .${k.root}`]: {
+  [`& + .${j.root}`]: {
     marginTop: e.spacing(1),
     marginBottom: e.spacing(1)
   },
-  [`& + .${k.inset}`]: {
+  [`& + .${j.inset}`]: {
     marginLeft: 52
   },
-  [`& .${R.root}`]: {
+  [`& .${k.root}`]: {
     marginTop: 0,
     marginBottom: 0
   },
-  [`& .${R.inset}`]: {
+  [`& .${k.inset}`]: {
     paddingLeft: 36
   },
-  [`& .${w.root}`]: {
+  [`& .${S.root}`]: {
     minWidth: 36
   },
   variants: [{
     props: ({
-      ownerState: o
-    }) => !o.disableGutters,
+      ownerState: t
+    }) => !t.disableGutters,
     style: {
       paddingLeft: 16,
       paddingRight: 16
     }
   }, {
     props: ({
-      ownerState: o
-    }) => o.divider,
+      ownerState: t
+    }) => t.divider,
     style: {
       borderBottom: `1px solid ${(e.vars || e).palette.divider}`,
       backgroundClip: "padding-box"
     }
   }, {
     props: ({
-      ownerState: o
-    }) => !o.dense,
+      ownerState: t
+    }) => !t.dense,
     style: {
       [e.breakpoints.up("sm")]: {
         minHeight: "auto"
@@ -128,64 +127,64 @@ const u = b("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divide
     }
   }, {
     props: ({
-      ownerState: o
-    }) => o.dense,
+      ownerState: t
+    }) => t.dense,
     style: {
       minHeight: 32,
       // https://m2.material.io/components/menus#specs > Dense
       paddingTop: 4,
       paddingBottom: 4,
       ...e.typography.body2,
-      [`& .${w.root} svg`]: {
+      [`& .${S.root} svg`]: {
         fontSize: "1.25rem"
       }
     }
   }]
-}))), S = /* @__PURE__ */ f.forwardRef(function(o, r) {
-  const a = G({
-    props: o,
+}))), w = /* @__PURE__ */ c.forwardRef(function(t, r) {
+  const a = F({
+    props: t,
     name: "MuiMenuItem"
   }), {
-    autoFocus: d = !1,
-    component: i = "li",
-    dense: c = !1,
-    divider: s = !1,
-    disableGutters: n = !1,
-    focusVisibleClassName: p,
-    role: g = "menuitem",
-    tabIndex: C,
-    className: j,
-    ...V
-  } = a, I = f.useContext(O), M = f.useMemo(() => ({
-    dense: c || I.dense || !1,
-    disableGutters: n
-  }), [I.dense, c, n]), v = f.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 = {
+    autoFocus: u = !1,
+    component: n = "li",
+    dense: i = !1,
+    divider: m = !1,
+    disableGutters: d = !1,
+    focusVisibleClassName: y,
+    role: s = "menuitem",
+    tabIndex: p,
+    className: f,
+    ...x
+  } = a, M = c.useContext(h), $ = c.useMemo(() => ({
+    dense: i || M.dense || !1,
+    disableGutters: d
+  }), [M.dense, i, d]), C = c.useRef(null);
+  H(() => {
+    u && (C.current ? C.current.focus() : process.env.NODE_ENV !== "production" && console.error("MUI: Unable to set focus to a MenuItem whose component has not been rendered."));
+  }, [u]);
+  const V = {
     ...a,
-    dense: M.dense,
-    divider: s,
-    disableGutters: n
-  }, x = Z(a), T = J(v, r);
-  let $;
-  return a.disabled || ($ = C !== void 0 ? C : -1), /* @__PURE__ */ l.jsx(O.Provider, {
-    value: M,
-    children: /* @__PURE__ */ l.jsx(ee, {
-      ref: T,
-      role: g,
-      tabIndex: $,
-      component: i,
-      focusVisibleClassName: h(x.focusVisible, p),
-      className: h(x.root, j),
-      ...V,
-      ownerState: L,
-      classes: x
+    dense: $.dense,
+    divider: m,
+    disableGutters: d
+  }, I = X(a), L = _(C, r);
+  let O;
+  return a.disabled || (O = p !== void 0 ? p : -1), /* @__PURE__ */ l.jsx(h.Provider, {
+    value: $,
+    children: /* @__PURE__ */ l.jsx(Y, {
+      ref: L,
+      role: s,
+      tabIndex: O,
+      component: n,
+      focusVisibleClassName: R(I.focusVisible, y),
+      className: R(I.root, f),
+      ...x,
+      ownerState: V,
+      classes: I
     })
   });
 });
-process.env.NODE_ENV !== "production" && (S.propTypes = {
+process.env.NODE_ENV !== "production" && (w.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -195,44 +194,44 @@ process.env.NODE_ENV !== "production" && (S.propTypes = {
    * Focus will also be triggered if the value changes from false to true.
    * @default false
    */
-  autoFocus: t.bool,
+  autoFocus: o.bool,
   /**
    * The content of the component.
    */
-  children: t.node,
+  children: o.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: t.object,
+  classes: o.object,
   /**
    * @ignore
    */
-  className: t.string,
+  className: o.string,
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: t.elementType,
+  component: o.elementType,
   /**
    * If `true`, compact vertical padding designed for keyboard and mouse input is used.
    * The prop defaults to the value inherited from the parent Menu component.
    * @default false
    */
-  dense: t.bool,
+  dense: o.bool,
   /**
    * @ignore
    */
-  disabled: t.bool,
+  disabled: o.bool,
   /**
    * If `true`, the left and right padding is removed.
    * @default false
    */
-  disableGutters: t.bool,
+  disableGutters: o.bool,
   /**
    * If `true`, a 1px light border is added to the bottom of the menu item.
    * @default false
    */
-  divider: t.bool,
+  divider: o.bool,
   /**
    * This prop can help identify which element has keyboard focus.
    * The class name will be applied when the element gains the focus through keyboard interaction.
@@ -241,90 +240,82 @@ process.env.NODE_ENV !== "production" && (S.propTypes = {
    * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
    * if needed.
    */
-  focusVisibleClassName: t.string,
+  focusVisibleClassName: o.string,
   /**
    * @ignore
    */
-  role: t.string,
+  role: o.string,
   /**
    * If `true`, the component is selected.
    * @default false
    */
-  selected: t.bool,
+  selected: o.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object]),
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
   /**
    * @default 0
    */
-  tabIndex: t.number
+  tabIndex: o.number
 });
-function me({
+function pe({
   label: e,
-  onChange: o,
+  onChange: t,
   options: r,
   value: a = [],
-  chipProps: d
+  chipProps: u
 }) {
-  const i = U(), c = f.useCallback(
-    (s, n) => {
-      let p = [...a];
-      n ? p.push(s) : p = p.filter((g) => g !== s), o == null || o(p);
+  const n = P(), i = c.useRef(null), [m, d] = c.useState();
+  c.useEffect(() => {
+    i.current && d(i.current.offsetWidth);
+  }, [n.open]);
+  const y = c.useCallback(
+    (s, p) => {
+      let f = [...a];
+      p ? f.push(s) : f = f.filter((x) => x !== s), t == null || t(f);
     },
-    [o, a]
+    [t, a]
   );
-  return /* @__PURE__ */ l.jsxs(P, { direction: "column", gap: 1, children: [
+  return /* @__PURE__ */ l.jsxs(N, { direction: "column", gap: 1, children: [
     /* @__PURE__ */ l.jsx(
-      B,
+      E,
       {
         endAdornment: /* @__PURE__ */ l.jsx(
-          Q,
+          J,
           {
             fontSize: "small",
             sx: { color: "var(--s-palette-action-active)", position: "absolute", right: "7px" }
           }
         ),
-        onClick: i.handleOpen,
-        ref: i.anchorRef,
+        onClick: n.handleOpen,
+        ref: (s) => {
+          n.anchorRef.current = s, i.current = s;
+        },
         value: e,
         sx: {
-          borderRadius: "var(--s-shape-borderRadius)",
-          border: "1px solid",
-          borderColor: y[200],
-          backgroundColor: "var(--s-palette-background-paper)",
-          boxShadow: "inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)",
-          "&:hover": {
-            borderColor: y[300],
-            backgroundColor: "var(--s-palette-background-paper)",
-            boxShadow: "none"
-          },
-          [`&.${E.focused}`]: {
-            outlineOffset: 0,
-            borderColor: y[400]
-          },
-          "&:before, &:after": {
-            display: "none"
+          input: {
+            color: "var(--s-palette-text-secondary)"
           }
         }
       }
     ),
     /* @__PURE__ */ l.jsx(
-      F,
+      U,
       {
-        anchorEl: i.anchorRef.current,
-        onClose: i.handleClose,
-        open: i.open,
-        slotProps: { paper: { sx: { width: "250px" } } },
+        anchorEl: n.anchorRef.current,
+        onClose: n.handleClose,
+        open: n.open,
+        slotProps: { paper: { sx: { width: m ? `${m}px` : void 0 } } },
         children: r.map((s) => {
-          const n = a.includes(s.value);
+          const p = a.includes(s.value);
           return /* @__PURE__ */ l.jsx(
-            S,
+            w,
             {
               onClick: () => {
-                c(s.value, !n);
+                y(s.value, !p);
               },
-              selected: n,
+              selected: p,
               children: s.label
             },
             s.label
@@ -333,14 +324,14 @@ function me({
       }
     ),
     /* @__PURE__ */ l.jsx(
-      D,
+      B,
       {
         chips: r.filter((s) => a.includes(s.value)).map((s) => s.label),
-        ...d
+        ...u
       }
     )
   ] });
 }
 export {
-  me as default
+  pe as default
 };