@m4l/components 9.50.0 → 9.51.0-beta-m4lcom-764-device-picker.0

package/components/NoItemSelected/NoItemSelected.js

@@ -1,22 +1,23 @@
-import { jsx as p } from "@emotion/react/jsx-runtime";
-import { useEnvironment as u, useModuleDictionary as _ } from "@m4l/core";
-import { useMemo as E } from "react";
-import { useComponentSize as I } from "../../hooks/useComponentSize/index.js";
-import { clsx as L } from "clsx";
-import { NO_ITEM_SELECTED_CLASSES as S } from "./constant.js";
-import { DICTIONARY as t } from "./dictionary.js";
-import { NoItemSelectedRootStyled as g } from "./slots/NoItemSelectedSlots.js";
-function x(o) {
-  const { image: s, title: m, message: r, size: i, className: n, dataTestId: a } = o, { host_static_assets: l, environment_assets: c } = u(), { currentSize: d } = I(i), { getLabel: e } = _(), f = E(() => `${l}/${c}/frontend/components/no_item_selected/assets/icons/no_selected.svg`, []);
-  return /* @__PURE__ */ p(
-    g,
+import { jsx as t } from "@emotion/react/jsx-runtime";
+import { useModuleDictionary as d } from "@m4l/core";
+import { useMemo as f } from "react";
+import { useComponentSize as p } from "../../hooks/useComponentSize/index.js";
+import { clsx as u } from "clsx";
+import { NO_ITEM_SELECTED_CLASSES as I } from "./constant.js";
+import { DICTIONARY as o } from "./dictionary.js";
+import { NoItemSelectedRootStyled as L } from "./slots/NoItemSelectedSlots.js";
+import { LegacyS3NoItemSelectedNoSelectedOutlined as E } from "@m4l/icons";
+function x(m) {
+  const { image: r, title: i, message: l, size: a, className: s, dataTestId: c } = m, { currentSize: n } = p(a), { getLabel: e } = d(), S = f(() => /* @__PURE__ */ t(E, {}), []);
+  return /* @__PURE__ */ t(
+    L,
     {
-      imageUrl: s || f,
-      title: m || e(t.LABEL_TITLE),
-      message: r || e(t.LABEL_DETAIL),
-      size: d,
-      className: L(S.root, n),
-      dataTestId: a,
+      imageUrl: r || S,
+      title: i || e(o.LABEL_TITLE),
+      message: l || e(o.LABEL_DETAIL),
+      size: n,
+      className: u(I.root, s),
+      dataTestId: c,
       role: "alert",
       "aria-label": "NoItemSelected",
       imageAriaLabel: "illustration no item selected"

package/components/NoItemSelected/types.d.ts

@@ -4,8 +4,9 @@ import { NO_ITEM_SELECTED_KEY_COMPONENT } from './constant';
 import { Sizes } from '@m4l/styles';
 import { NoItemSelectedSlots } from './slots/NoItemSelectedEnum';
 import { LabelProps } from '../Label/types';
+import { IconProps } from '@m4l/base';
 export interface NoItemSelectedProps extends Pick<LabelProps, 'label'> {
-    image?: string;
+    image?: IconProps['src'];
     title?: string;
     message?: string;
     paletteColor?: PaletteColor;

package/components/NoItemSelected/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/NoItemSelected/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,8BAA8B,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;CAC3C;AACD,MAAM,MAAM,wBAAwB,GAAG,EAAE,CAAC;AAC1C,MAAM,MAAM,uBAAuB,GAAG,MAAM,OAAO,mBAAmB,CAAC;AACvE,MAAM,MAAM,oBAAoB,GAAG,sBAAsB,CAAE,uBAAuB,EAAE,OAAO,8BAA8B,EAAE,KAAK,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/NoItemSelected/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,8BAA8B,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;CAC3C;AACD,MAAM,MAAM,wBAAwB,GAAG,EAAE,CAAC;AAC1C,MAAM,MAAM,uBAAuB,GAAG,MAAM,OAAO,mBAAmB,CAAC;AACvE,MAAM,MAAM,oBAAoB,GAAG,sBAAsB,CAAE,uBAAuB,EAAE,OAAO,8BAA8B,EAAE,KAAK,CAAC,CAAC"}

package/components/NumberInput/NumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AAOA,OAAO,EAEL,gBAAgB,EACjB,MAAM,SAAS,CAAC;AAGjB;;GAEG;AACH,eAAO,MAAM,WAAW,6GAyGtB,CAAC"}
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AAOA,OAAO,EAEL,gBAAgB,EACjB,MAAM,SAAS,CAAC;AAIjB;;GAEG;AACH,eAAO,MAAM,WAAW,6GAyGtB,CAAC"}

package/components/NumberInput/NumberInput.js

@@ -1,111 +1,113 @@
-import { jsx as s, jsxs as c } from "@emotion/react/jsx-runtime";
-import o from "clsx";
-import { forwardRef as F } from "react";
-import { useEnvironment as K, useModuleSkeleton as V } from "@m4l/core";
-import { getComponentClasses as Y } from "../../utils/getComponentSlotRoot.js";
-import { getPropDataTestId as N } from "../../test/getNameDataTestId.js";
-import { useNumberInput as G } from "./hooks/useNumberInput/useNumberInput.js";
-import { SkeletonStyled as H, RootStyled as J, InputStyled as L, ContainButtonsAdornmentStyled as Q, ContainerButtonsStyled as W, IncrementButtonStyled as X, DecrementButtonStyled as Z } from "./slots/NumberInputSlots.js";
-import { NUMBER_INPUT_KEY_COMPONENT as r } from "./constants.js";
+import { jsx as n, jsxs as a } from "@emotion/react/jsx-runtime";
+import r from "clsx";
+import { forwardRef as z } from "react";
+import { useModuleSkeleton as F } from "@m4l/core";
+import { getComponentClasses as K } from "../../utils/getComponentSlotRoot.js";
+import { getPropDataTestId as f } from "../../test/getNameDataTestId.js";
+import { useNumberInput as V } from "./hooks/useNumberInput/useNumberInput.js";
+import { SkeletonStyled as Y, RootStyled as G, InputStyled as H, ContainButtonsAdornmentStyled as J, ContainerButtonsStyled as L, IncrementButtonStyled as Q, DecrementButtonStyled as W } from "./slots/NumberInputSlots.js";
+import { NUMBER_INPUT_KEY_COMPONENT as s } from "./constants.js";
 import { NumberInputSlots as i } from "./slots/NumberInputEnum.js";
-const ut = F(function(I, C) {
+import { ArrowChevronSmUpOutlined as X, ArrowChevronSmDownOutlined as Z } from "@m4l/icons";
+const ct = z(function(N, I) {
   const {
     className: e,
     defaultValue: S,
-    value: _,
-    disabled: l = !1,
-    endAdornment: g,
-    error: u,
+    value: C,
+    disabled: u = !1,
+    endAdornment: B,
+    error: c,
     id: h,
-    max: B,
-    min: E,
-    onBlur: v,
-    onInputChange: y,
+    max: E,
+    min: g,
+    onBlur: y,
+    onInputChange: O,
     onFocus: P,
-    onChange: M,
-    required: R,
-    readOnly: T = !1,
-    shiftMultiplier: b,
-    startAdornment: k,
-    step: x,
+    onChange: w,
+    required: D,
+    readOnly: d = !1,
+    shiftMultiplier: M,
+    startAdornment: R,
+    step: T,
     size: m = "medium",
-    variant: D = "outlined",
-    withDecimal: a = !1,
-    dataTestId: d
-  } = I, {
-    getRootProps: O,
-    getInputProps: w,
-    getIncrementButtonProps: $,
-    getDecrementButtonProps: A,
-    focusError: j
-  } = G({
-    min: E,
-    max: B,
-    step: x,
-    withDecimal: a,
-    shiftMultiplier: b,
+    variant: b = "outlined",
+    withDecimal: l = !1,
+    dataTestId: p
+  } = N, {
+    getRootProps: k,
+    getInputProps: x,
+    getIncrementButtonProps: A,
+    getDecrementButtonProps: _,
+    focusError: v
+  } = V({
+    min: g,
+    max: E,
+    step: T,
+    withDecimal: l,
+    shiftMultiplier: M,
     defaultValue: S,
-    disabled: l,
-    error: u,
+    disabled: u,
+    error: c,
     onFocus: P,
-    onInputChange: y,
-    onBlur: v,
-    onChange: M,
-    required: R,
-    readOnly: T,
-    value: _,
+    onInputChange: O,
+    onBlur: y,
+    onChange: w,
+    required: D,
+    readOnly: d,
+    value: C,
     inputId: h,
-    componentName: r
-  }), { host_static_assets: p, environment_assets: f } = K(), t = {
-    disabled: l,
-    error: u,
+    componentName: s
+  }), t = {
+    disabled: u,
+    readOnly: d,
+    error: c,
     size: m,
-    variant: D,
-    focusError: j,
-    noButtons: a
-  }, U = V(), n = Y(r, i);
+    variant: b,
+    focusError: v,
+    noButtons: l
+  }, U = F(), o = K(s, i);
   if (U)
-    return /* @__PURE__ */ s(
-      H,
+    return /* @__PURE__ */ n(
+      Y,
       {
         ownerState: t,
-        className: o(n.skeleton, e),
-        ...N(r, i.skeleton, d)
+        className: r(o.skeleton, e),
+        ...f(s, i.skeleton, p)
       }
     );
-  const q = `${p}/${f}/frontend/components/ControlIncrement/assets/icons/chevron_up_sm.svg`, z = `${p}/${f}/frontend/components/ControlIncrement/assets/icons/chevron_down_sm.svg`;
-  return /* @__PURE__ */ c(
-    J,
+  const j = /* @__PURE__ */ n(X, {}), q = /* @__PURE__ */ n(Z, {});
+  return /* @__PURE__ */ a(
+    G,
     {
-      ...N(r, i.root, d),
-      className: o(n.root, e),
-      ref: C,
+      ...f(s, i.root, p),
+      className: r(o.root, e),
+      ref: I,
       ownerState: t,
-      ...O(),
+      ...k(),
       children: [
-        k,
-        /* @__PURE__ */ s(L, { className: o(n.input, e), ownerState: t, ...w() }),
-        /* @__PURE__ */ c(Q, { ownerState: t, children: [
-          g,
-          !a && /* @__PURE__ */ c(W, { className: o(n.containerButtons, e), ownerState: t, children: [
-            /* @__PURE__ */ s(
-              X,
+        R,
+        /* @__PURE__ */ n(H, { className: r(o.input, e), ownerState: t, ...x() }),
+        /* @__PURE__ */ a(J, { ownerState: t, children: [
+          B,
+          !l && /* @__PURE__ */ a(L, { className: r(o.containerButtons, e), ownerState: t, children: [
+            /* @__PURE__ */ n(
+              Q,
               {
-                icon: q,
+                icon: j,
                 size: m,
-                className: o(n.increment, e),
+                className: r(o.increment, e),
                 ownerState: t,
-                ...$()
+                ...A()
               }
             ),
-            /* @__PURE__ */ s(
-              Z,
+            /* @__PURE__ */ n(
+              W,
               {
-                icon: z,
+                icon: q,
                 size: m,
-                className: o(n.decrement, e),
+                className: r(o.decrement, e),
                 ownerState: t,
-                ...A()
+                ..._()
               }
             )
           ] })
@@ -115,5 +117,5 @@ const ut = F(function(I, C) {
   );
 });
 export {
-  ut as NumberInput
+  ct as NumberInput
 };

package/components/NumberInput/NumberInput.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/NumberInput/NumberInput.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC5C;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,iBAkO/B,CAAC"}
+{"version":3,"file":"NumberInput.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/NumberInput/NumberInput.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC5C;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,iBAkP/B,CAAC"}

package/components/NumberInput/NumberInput.styles.js

@@ -1,12 +1,12 @@
-import { getSingleLineInputLineHeight as a, getTypographyStyles as n } from "../../utils/getTypographyStyles.js";
+import { getSingleLineInputLineHeight as n, getTypographyStyles as s } from "../../utils/getTypographyStyles.js";
 import { getSizeStyles as t } from "../../utils/getSizeStyles/getSizeStyles.js";
 import { getSharedInputStateColors as d } from "../../utils/getSharedInputStateColors.js";
-const u = {
+const p = {
   /**
    * Styles applied to the main root container.
    */
-  root: ({ theme: o, ownerState: i }) => {
-    const r = d(o, !!i?.error);
+  root: ({ theme: r, ownerState: e }) => {
+    const i = d(r, !!e?.error), a = e?.disabled === !1 && e?.readOnly !== !0;
     return {
       // General styles
       display: "flex",
@@ -14,57 +14,61 @@ const u = {
       position: "relative",
       height: "auto",
       width: "100%",
-      gap: o.vars.size.baseSpacings.sp1,
-      paddingLeft: o.vars.size.baseSpacings.sp1,
-      paddingRight: i?.noButtons && o.vars.size.baseSpacings.sp1,
+      gap: r.vars.size.baseSpacings.sp1,
+      paddingLeft: r.vars.size.baseSpacings.sp1,
+      paddingRight: e?.noButtons && r.vars.size.baseSpacings.sp1,
       boxSizing: "border-box",
       overflow: "hidden",
+      ...e?.readOnly && {
+        cursor: "default",
+        pointerEvents: "none"
+      },
       ...t(
-        o,
-        i?.size || "medium",
+        r,
+        e?.size || "medium",
         "action",
-        (e) => ({
+        (o) => ({
           // Keep the button column on an explicit height while matching the visible outer height
           // used by other bordered input surfaces.
-          height: e,
-          minHeight: e,
-          maxHeight: e
+          height: o,
+          minHeight: o,
+          maxHeight: o
         })
       ),
       // Variants (Outlined and Text)
-      ...i?.variant === "outlined" && {
-        border: o.vars.size.borderStroke.actionInput,
-        borderColor: r.borderColor,
-        borderRadius: o.vars.size.borderRadius["r1-5"]
+      ...e?.variant === "outlined" && {
+        border: r.vars.size.borderStroke.actionInput,
+        borderColor: i.borderColor,
+        borderRadius: r.vars.size.borderRadius["r1-5"]
       },
-      ...i?.variant === "text" && {
-        borderBottom: o.vars.size.borderStroke.actionInput,
-        borderColor: r.borderColor,
-        borderRadius: o.vars.size.borderRadius["r1-5"]
+      ...e?.variant === "text" && {
+        borderBottom: r.vars.size.borderStroke.actionInput,
+        borderColor: i.borderColor,
+        borderRadius: r.vars.size.borderRadius["r1-5"]
       },
       // States (Pseudo-classes)
-      ...i?.disabled === !1 && {
+      ...a && {
         "&:hover": {
-          background: r.hoverBackgroundColor,
-          borderColor: r.hoverBorderColor,
+          background: i.hoverBackgroundColor,
+          borderColor: i.hoverBorderColor,
           "& button": {
-            background: r.hoverBackgroundColor,
+            background: i.hoverBackgroundColor,
             "&:hover": {
               // background: theme.vars.palette?.default.hover,
             }
           }
         },
         "&:focus-within": {
-          borderColor: r.focusBorderColor,
-          ...i?.variant === "text" ? {
-            boxShadow: `0px 1.5px 0px 0px ${r.focusRingColor}`
+          borderColor: i.focusBorderColor,
+          ...e?.variant === "text" ? {
+            boxShadow: `0px 1.5px 0px 0px ${i.focusRingColor}`
           } : {
-            boxShadow: `0px 0px 0px 1.5px ${r.focusRingColor}`
+            boxShadow: `0px 0px 0px 1.5px ${i.focusRingColor}`
           }
         },
         "&:active": {
-          background: o.vars.palette.background.default,
-          borderColor: r.focusBorderColor
+          background: r.vars.palette.background.default,
+          borderColor: i.focusBorderColor
         }
       }
     };
@@ -72,35 +76,35 @@ const u = {
   /**
    * Styles applied to the input field.
    */
-  input: ({ theme: o, ownerState: i }) => ({
+  input: ({ theme: r, ownerState: e }) => ({
     // General styles
     background: "transparent",
     border: 0,
     outline: 0,
-    color: i?.disabled ? o.vars.palette.text.disabled : o.vars.palette.text.primary,
+    color: e?.disabled ? r.vars.palette.text.disabled : r.vars.palette.text.primary,
     height: "max-content ",
     width: "100%",
-    ...i?.focusError && {
-      color: o.vars.palette.error.enabled
+    ...e?.focusError && {
+      color: r.vars.palette.error.enabled
     },
-    ...n(
-      o.generalSettings.isMobile,
-      i?.size || "small",
+    ...s(
+      r.generalSettings.isMobile,
+      e?.size || "small",
       "bodyStandard"
     ),
-    ...a(),
-    fontFamily: o.typography.fontFamily
+    ...n(),
+    fontFamily: r.typography.fontFamily
   }),
   /**
    * Styles for the buttons and endAdornment wrapper.
    */
-  ContainButtonsAdornment: ({ theme: o }) => ({
+  ContainButtonsAdornment: ({ theme: r }) => ({
     display: "flex",
     flexDirection: "row",
     justifyContent: "center",
     alignContent: "center",
     height: "100%",
-    gap: o.vars.size.baseSpacings.sp2,
+    gap: r.vars.size.baseSpacings.sp2,
     span: {
       alignSelf: "center"
     }
@@ -108,7 +112,7 @@ const u = {
   /**
    * Styles applied to the increment and decrement buttons container.
    */
-  containerButtons: ({ theme: o, ownerState: i }) => ({
+  containerButtons: ({ theme: r, ownerState: e }) => ({
     display: "flex",
     flexDirection: "column",
     height: "100%",
@@ -116,13 +120,13 @@ const u = {
     flexShrink: 0,
     alignSelf: "stretch",
     ...t(
-      o,
-      i?.size || "medium",
+      r,
+      e?.size || "medium",
       "action",
-      (r) => ({
-        width: r,
-        minWidth: r,
-        maxWidth: r
+      (i) => ({
+        width: i,
+        minWidth: i,
+        maxWidth: i
       }),
       "width"
     )
@@ -130,100 +134,110 @@ const u = {
   /**
    * Styles for the increment button.
    */
-  increment: ({ theme: o }) => ({
-    "&&&": {
-      // General styles
-      flex: "1 1 0",
-      height: "auto",
-      minHeight: 0,
-      maxHeight: "none",
-      width: "100%",
-      minWidth: "100%",
-      maxWidth: "100%",
-      background: o.vars.palette.default.enabled,
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0,
-      borderTopLeftRadius: 0,
-      borderTopRightRadius: `calc(${o.vars.size.borderRadius["r1-5"]} - 1px)`,
-      outlineOffset: 0,
-      // States (Pseudo-classes)
-      "&:focus-visible": {
-        zIndex: 1,
-        outline: `1px solid ${o.vars.palette?.primary.enabled}`
-      },
-      "&:active": {
-        background: `${o.vars.palette?.default.active} !important`
-      },
-      "& div": {
-        height: "100%",
+  increment: ({ theme: r, ownerState: e }) => {
+    const i = e?.disabled === !1 && e?.readOnly !== !0;
+    return {
+      "&&&": {
+        // General styles
+        flex: "1 1 0",
+        height: "auto",
+        minHeight: 0,
+        maxHeight: "none",
         width: "100%",
+        minWidth: "100%",
+        maxWidth: "100%",
+        background: r.vars.palette.default.enabled,
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: `calc(${r.vars.size.borderRadius["r1-5"]} - 1px)`,
+        outlineOffset: 0,
+        // States (Pseudo-classes)
+        ...i && {
+          "&:focus-visible": {
+            zIndex: 1,
+            outline: `1px solid ${r.vars.palette?.primary.enabled}`
+          },
+          "&:active": {
+            background: `${r.vars.palette?.default.active} !important`
+          }
+        },
         "& div": {
           height: "100%",
-          width: "50%",
-          minHeight: "min-content",
-          maskPosition: "center center"
+          width: "100%",
+          "& div": {
+            height: "100%",
+            width: "50%",
+            minHeight: "min-content",
+            maskPosition: "center center"
+          }
         }
       }
-    }
-  }),
+    };
+  },
   /**
    * Styles for the decrement button.
    */
-  decrement: ({ theme: o }) => ({
-    "&&&": {
-      // General styles
-      flex: "1 1 0",
-      height: "auto",
-      minHeight: 0,
-      maxHeight: "none",
-      width: "100%",
-      minWidth: "100%",
-      maxWidth: "100%",
-      background: o.vars.palette.default.enabled,
-      borderTopLeftRadius: 0,
-      borderTopRightRadius: 0,
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: `calc(${o.vars.size.borderRadius["r1-5"]} - 1px)`,
-      outlineOffset: 0,
-      // States (Pseudo-classes)
-      "&:focus-visible": {
-        zIndex: 1,
-        outline: `1px solid ${o.vars.palette?.primary.enabled}`
-      },
-      "&:active": {
-        background: `${o.vars.palette?.default.active} !important`
-      },
-      "& div": {
-        height: "100%",
+  decrement: ({ theme: r, ownerState: e }) => {
+    const i = e?.disabled === !1 && e?.readOnly !== !0;
+    return {
+      "&&&": {
+        // General styles
+        flex: "1 1 0",
+        height: "auto",
+        minHeight: 0,
+        maxHeight: "none",
         width: "100%",
+        minWidth: "100%",
+        maxWidth: "100%",
+        background: r.vars.palette.default.enabled,
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0,
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: `calc(${r.vars.size.borderRadius["r1-5"]} - 1px)`,
+        outlineOffset: 0,
+        // States (Pseudo-classes)
+        ...i && {
+          "&:focus-visible": {
+            zIndex: 1,
+            outline: `1px solid ${r.vars.palette?.primary.enabled}`
+          },
+          "&:active": {
+            background: `${r.vars.palette?.default.active} !important`
+          }
+        },
         "& div": {
           height: "100%",
-          width: "50%",
-          minHeight: "min-content",
-          maskPosition: "center center"
+          width: "100%",
+          "& div": {
+            height: "100%",
+            width: "50%",
+            minHeight: "min-content",
+            maskPosition: "center center"
+          }
         }
       }
-    }
-  }),
+    };
+  },
   /**
    * Styles applied to the skeleton.
    */
-  skeleton: ({ theme: o, ownerState: i }) => ({
+  skeleton: ({ theme: r, ownerState: e }) => ({
     "&.M4lclassCssSpecificity": {
       width: "100%",
       ...t(
-        o,
-        i?.size || "medium",
+        r,
+        e?.size || "medium",
         "action",
-        (r) => ({
-          height: r,
-          minHeight: r,
-          maxHeight: r
+        (i) => ({
+          height: i,
+          minHeight: i,
+          maxHeight: i
         })
       )
     }
   })
 };
 export {
-  u as numberInputStyles
+  p as numberInputStyles
 };