@availity/mui-stepper 0.3.3 → 1.0.0-alpha.0

package/dist/index.mjs

@@ -53,9 +53,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 
-// ../../node_modules/prop-types/node_modules/react-is/cjs/react-is.production.min.js
+// ../../node_modules/react-is/cjs/react-is.production.min.js
 var require_react_is_production_min = __commonJS({
-  "../../node_modules/prop-types/node_modules/react-is/cjs/react-is.production.min.js"(exports) {
+  "../../node_modules/react-is/cjs/react-is.production.min.js"(exports) {
     "use strict";
     var b = "function" === typeof Symbol && Symbol.for;
     var c = b ? Symbol.for("react.element") : 60103;
@@ -166,9 +166,9 @@ var require_react_is_production_min = __commonJS({
   }
 });
 
-// ../../node_modules/prop-types/node_modules/react-is/cjs/react-is.development.js
+// ../../node_modules/react-is/cjs/react-is.development.js
 var require_react_is_development = __commonJS({
-  "../../node_modules/prop-types/node_modules/react-is/cjs/react-is.development.js"(exports) {
+  "../../node_modules/react-is/cjs/react-is.development.js"(exports) {
     "use strict";
     if (process.env.NODE_ENV !== "production") {
       (function() {
@@ -321,9 +321,9 @@ var require_react_is_development = __commonJS({
   }
 });
 
-// ../../node_modules/prop-types/node_modules/react-is/index.js
+// ../../node_modules/react-is/index.js
 var require_react_is = __commonJS({
-  "../../node_modules/prop-types/node_modules/react-is/index.js"(exports, module) {
+  "../../node_modules/react-is/index.js"(exports, module) {
     "use strict";
     if (process.env.NODE_ENV === "production") {
       module.exports = require_react_is_production_min();
@@ -1039,12 +1039,9 @@ import { jsx as jsx5 } from "react/jsx-runtime";
 var StepIcon = (_a) => {
   var _b = _a, { error, completed, warning } = _b, rest = __objRest(_b, ["error", "completed", "warning"]);
   let tag = null;
-  if (error)
-    tag = WarningCircleIcon;
-  if (warning)
-    tag = (props) => /* @__PURE__ */ jsx5(WarningCircleIcon, __spreadValues({ color: "warning" }, props));
-  if (completed)
-    tag = SuccessCircleIcon;
+  if (error) tag = WarningCircleIcon;
+  if (warning) tag = (props) => /* @__PURE__ */ jsx5(WarningCircleIcon, __spreadValues({ color: "warning" }, props));
+  if (completed) tag = SuccessCircleIcon;
   return /* @__PURE__ */ jsx5(MuiStepIcon, __spreadProps(__spreadValues({}, rest), { error, completed, as: tag }));
 };
 
@@ -1106,43 +1103,11 @@ var IconButton = forwardRef2((props, ref) => {
 // ../button/src/lib/LoadingButton.tsx
 import { forwardRef as forwardRef4 } from "react";
 
-// ../../node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null)
-    return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0)
-      continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-// ../../node_modules/@babel/runtime/helpers/esm/extends.js
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
 // ../../node_modules/@mui/lab/LoadingButton/LoadingButton.js
 var import_prop_types = __toESM(require_prop_types());
 import * as React from "react";
 
-// ../../node_modules/@mui/lab/node_modules/@mui/utils/chainPropTypes/chainPropTypes.js
+// ../../node_modules/@mui/utils/esm/chainPropTypes/chainPropTypes.js
 function chainPropTypes(propType1, propType2) {
   if (process.env.NODE_ENV === "production") {
     return () => null;
@@ -1152,34 +1117,61 @@ function chainPropTypes(propType1, propType2) {
   };
 }
 
-// ../../node_modules/@mui/lab/node_modules/@mui/utils/resolveProps/resolveProps.js
+// ../../node_modules/@mui/utils/esm/resolveProps/resolveProps.js
 function resolveProps(defaultProps, props) {
-  const output = _extends({}, props);
-  Object.keys(defaultProps).forEach((propName) => {
-    if (propName.toString().match(/^(components|slots)$/)) {
-      output[propName] = _extends({}, defaultProps[propName], output[propName]);
-    } else if (propName.toString().match(/^(componentsProps|slotProps)$/)) {
-      const defaultSlotProps = defaultProps[propName] || {};
-      const slotProps = props[propName];
-      output[propName] = {};
-      if (!slotProps || !Object.keys(slotProps)) {
-        output[propName] = defaultSlotProps;
-      } else if (!defaultSlotProps || !Object.keys(defaultSlotProps)) {
-        output[propName] = slotProps;
-      } else {
-        output[propName] = _extends({}, slotProps);
-        Object.keys(defaultSlotProps).forEach((slotPropName) => {
-          output[propName][slotPropName] = resolveProps(defaultSlotProps[slotPropName], slotProps[slotPropName]);
-        });
+  const output = __spreadValues({}, props);
+  for (const key in defaultProps) {
+    if (Object.prototype.hasOwnProperty.call(defaultProps, key)) {
+      const propName = key;
+      if (propName === "components" || propName === "slots") {
+        output[propName] = __spreadValues(__spreadValues({}, defaultProps[propName]), output[propName]);
+      } else if (propName === "componentsProps" || propName === "slotProps") {
+        const defaultSlotProps = defaultProps[propName];
+        const slotProps = props[propName];
+        if (!slotProps) {
+          output[propName] = defaultSlotProps || {};
+        } else if (!defaultSlotProps) {
+          output[propName] = slotProps;
+        } else {
+          output[propName] = __spreadValues({}, slotProps);
+          for (const slotKey in defaultSlotProps) {
+            if (Object.prototype.hasOwnProperty.call(defaultSlotProps, slotKey)) {
+              const slotPropName = slotKey;
+              output[propName][slotPropName] = resolveProps(defaultSlotProps[slotPropName], slotProps[slotPropName]);
+            }
+          }
+        }
+      } else if (output[propName] === void 0) {
+        output[propName] = defaultProps[propName];
       }
-    } else if (output[propName] === void 0) {
-      output[propName] = defaultProps[propName];
     }
-  });
+  }
+  return output;
+}
+
+// ../../node_modules/@mui/utils/esm/composeClasses/composeClasses.js
+function composeClasses(slots, getUtilityClass, classes = void 0) {
+  const output = {};
+  for (const slotName in slots) {
+    const slot = slots[slotName];
+    let buffer = "";
+    let start = true;
+    for (let i = 0; i < slot.length; i += 1) {
+      const value = slot[i];
+      if (value) {
+        buffer += (start === true ? "" : " ") + getUtilityClass(value);
+        start = false;
+        if (classes && classes[value]) {
+          buffer += " " + classes[value];
+        }
+      }
+    }
+    output[slotName] = buffer;
+  }
   return output;
 }
 
-// ../../node_modules/@mui/lab/node_modules/@mui/utils/ClassNameGenerator/ClassNameGenerator.js
+// ../../node_modules/@mui/utils/esm/ClassNameGenerator/ClassNameGenerator.js
 var defaultGenerator = (componentName) => componentName;
 var createClassNameGenerator = () => {
   let generate = defaultGenerator;
@@ -1198,7 +1190,7 @@ var createClassNameGenerator = () => {
 var ClassNameGenerator = createClassNameGenerator();
 var ClassNameGenerator_default = ClassNameGenerator;
 
-// ../../node_modules/@mui/lab/node_modules/@mui/utils/generateUtilityClass/generateUtilityClass.js
+// ../../node_modules/@mui/utils/esm/generateUtilityClass/generateUtilityClass.js
 var globalStateClasses = {
   active: "active",
   checked: "checked",
@@ -1218,7 +1210,7 @@ function generateUtilityClass(componentName, slot, globalStatePrefix = "Mui") {
   return globalStateClass ? `${globalStatePrefix}-${globalStateClass}` : `${ClassNameGenerator_default.generate(componentName)}-${slot}`;
 }
 
-// ../../node_modules/@mui/lab/node_modules/@mui/utils/generateUtilityClasses/generateUtilityClasses.js
+// ../../node_modules/@mui/utils/esm/generateUtilityClasses/generateUtilityClasses.js
 function generateUtilityClasses(componentName, slots, globalStatePrefix = "Mui") {
   const result = {};
   slots.forEach((slot) => {
@@ -1228,49 +1220,24 @@ function generateUtilityClasses(componentName, slots, globalStatePrefix = "Mui")
 }
 
 // ../../node_modules/@mui/lab/LoadingButton/LoadingButton.js
-import { capitalize, unstable_useId as useId } from "@mui/material/utils";
-
-// ../../node_modules/@mui/base/node_modules/@mui/utils/composeClasses/composeClasses.js
-function composeClasses(slots, getUtilityClass, classes = void 0) {
-  const output = {};
-  Object.keys(slots).forEach(
-    // `Object.keys(slots)` can't be wider than `T` because we infer `T` from `slots`.
-    // @ts-expect-error https://github.com/microsoft/TypeScript/pull/12253#issuecomment-263132208
-    (slot) => {
-      output[slot] = slots[slot].reduce((acc, key) => {
-        if (key) {
-          const utilityClass = getUtilityClass(key);
-          if (utilityClass !== "") {
-            acc.push(utilityClass);
-          }
-          if (classes && classes[key]) {
-            acc.push(classes[key]);
-          }
-        }
-        return acc;
-      }, []).join(" ");
-    }
-  );
-  return output;
-}
-
-// ../../node_modules/@mui/lab/LoadingButton/LoadingButton.js
-import { styled, useThemeProps } from "@mui/material/styles";
+import { capitalize, unstable_useId as useId, unstable_memoTheme as memoTheme } from "@mui/material/utils";
+import { useDefaultProps } from "@mui/material/DefaultPropsProvider";
 import Button2 from "@mui/material/Button";
 import { ButtonGroupContext } from "@mui/material/ButtonGroup";
 import CircularProgress from "@mui/material/CircularProgress";
 
+// ../../node_modules/@mui/lab/zero-styled/index.js
+import { styled } from "@mui/material/styles";
+
 // ../../node_modules/@mui/lab/LoadingButton/loadingButtonClasses.js
 function getLoadingButtonUtilityClass(slot) {
   return generateUtilityClass("MuiLoadingButton", slot);
 }
-var loadingButtonClasses = generateUtilityClasses("MuiLoadingButton", ["root", "loading", "loadingIndicator", "loadingIndicatorCenter", "loadingIndicatorStart", "loadingIndicatorEnd", "endIconLoadingEnd", "startIconLoadingStart"]);
+var loadingButtonClasses = generateUtilityClasses("MuiLoadingButton", ["root", "label", "loading", "loadingIndicator", "loadingIndicatorCenter", "loadingIndicatorStart", "loadingIndicatorEnd", "endIconLoadingEnd", "startIconLoadingStart"]);
 var loadingButtonClasses_default = loadingButtonClasses;
 
 // ../../node_modules/@mui/lab/LoadingButton/LoadingButton.js
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var _excluded = ["children", "disabled", "id", "loading", "loadingIndicator", "loadingPosition", "variant"];
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var useUtilityClasses = (ownerState) => {
   const {
     loading,
@@ -1279,12 +1246,13 @@ var useUtilityClasses = (ownerState) => {
   } = ownerState;
   const slots = {
     root: ["root", loading && "loading"],
+    label: ["label"],
     startIcon: [loading && `startIconLoading${capitalize(loadingPosition)}`],
     endIcon: [loading && `endIconLoading${capitalize(loadingPosition)}`],
     loadingIndicator: ["loadingIndicator", loading && `loadingIndicator${capitalize(loadingPosition)}`]
   };
   const composedClasses = composeClasses(slots, getLoadingButtonUtilityClass, classes);
-  return _extends({}, classes, composedClasses);
+  return __spreadValues(__spreadValues({}, classes), composedClasses);
 };
 var rootShouldForwardProp = (prop) => prop !== "ownerState" && prop !== "theme" && prop !== "sx" && prop !== "as" && prop !== "classes";
 var LoadingButtonRoot = styled(Button2, {
@@ -1298,40 +1266,56 @@ var LoadingButtonRoot = styled(Button2, {
       [`& .${loadingButtonClasses_default.endIconLoadingEnd}`]: styles.endIconLoadingEnd
     }];
   }
-})(({
-  ownerState,
+})(memoTheme(({
   theme
-}) => _extends({
+}) => ({
+  display: "inline-flex",
   [`& .${loadingButtonClasses_default.startIconLoadingStart}, & .${loadingButtonClasses_default.endIconLoadingEnd}`]: {
     transition: theme.transitions.create(["opacity"], {
       duration: theme.transitions.duration.short
     }),
     opacity: 0
-  }
-}, ownerState.loadingPosition === "center" && {
-  transition: theme.transitions.create(["background-color", "box-shadow", "border-color"], {
-    duration: theme.transitions.duration.short
-  }),
-  [`&.${loadingButtonClasses_default.loading}`]: {
-    color: "transparent"
-  }
-}, ownerState.loadingPosition === "start" && ownerState.fullWidth && {
-  [`& .${loadingButtonClasses_default.startIconLoadingStart}, & .${loadingButtonClasses_default.endIconLoadingEnd}`]: {
-    transition: theme.transitions.create(["opacity"], {
-      duration: theme.transitions.duration.short
-    }),
-    opacity: 0,
-    marginRight: -8
-  }
-}, ownerState.loadingPosition === "end" && ownerState.fullWidth && {
-  [`& .${loadingButtonClasses_default.startIconLoadingStart}, & .${loadingButtonClasses_default.endIconLoadingEnd}`]: {
-    transition: theme.transitions.create(["opacity"], {
-      duration: theme.transitions.duration.short
-    }),
-    opacity: 0,
-    marginLeft: -8
-  }
-}));
+  },
+  variants: [{
+    props: {
+      loadingPosition: "center"
+    },
+    style: {
+      transition: theme.transitions.create(["background-color", "box-shadow", "border-color"], {
+        duration: theme.transitions.duration.short
+      }),
+      [`&.${loadingButtonClasses_default.loading}`]: {
+        color: "transparent"
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.loadingPosition === "start" && ownerState.fullWidth,
+    style: {
+      [`& .${loadingButtonClasses_default.startIconLoadingStart}, & .${loadingButtonClasses_default.endIconLoadingEnd}`]: {
+        transition: theme.transitions.create(["opacity"], {
+          duration: theme.transitions.duration.short
+        }),
+        opacity: 0,
+        marginRight: -8
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.loadingPosition === "end" && ownerState.fullWidth,
+    style: {
+      [`& .${loadingButtonClasses_default.startIconLoadingStart}, & .${loadingButtonClasses_default.endIconLoadingEnd}`]: {
+        transition: theme.transitions.create(["opacity"], {
+          duration: theme.transitions.duration.short
+        }),
+        opacity: 0,
+        marginLeft: -8
+      }
+    }
+  }]
+})));
 var LoadingButtonLoadingIndicator = styled("span", {
   name: "MuiLoadingButton",
   slot: "LoadingIndicator",
@@ -1341,40 +1325,106 @@ var LoadingButtonLoadingIndicator = styled("span", {
     } = props;
     return [styles.loadingIndicator, styles[`loadingIndicator${capitalize(ownerState.loadingPosition)}`]];
   }
-})(({
-  theme,
-  ownerState
-}) => _extends({
+})(memoTheme(({
+  theme
+}) => ({
   position: "absolute",
   visibility: "visible",
-  display: "flex"
-}, ownerState.loadingPosition === "start" && (ownerState.variant === "outlined" || ownerState.variant === "contained") && {
-  left: ownerState.size === "small" ? 10 : 14
-}, ownerState.loadingPosition === "start" && ownerState.variant === "text" && {
-  left: 6
-}, ownerState.loadingPosition === "center" && {
-  left: "50%",
-  transform: "translate(-50%)",
-  color: (theme.vars || theme).palette.action.disabled
-}, ownerState.loadingPosition === "end" && (ownerState.variant === "outlined" || ownerState.variant === "contained") && {
-  right: ownerState.size === "small" ? 10 : 14
-}, ownerState.loadingPosition === "end" && ownerState.variant === "text" && {
-  right: 6
-}, ownerState.loadingPosition === "start" && ownerState.fullWidth && {
-  position: "relative",
-  left: -10
-}, ownerState.loadingPosition === "end" && ownerState.fullWidth && {
-  position: "relative",
-  right: -10
-}));
+  display: "flex",
+  variants: [{
+    props: {
+      loadingPosition: "start",
+      size: "small"
+    },
+    style: {
+      left: 10
+    }
+  }, {
+    props: ({
+      loadingPosition,
+      ownerState
+    }) => loadingPosition === "start" && ownerState.size !== "small",
+    style: {
+      left: 14
+    }
+  }, {
+    props: {
+      variant: "text",
+      loadingPosition: "start"
+    },
+    style: {
+      left: 6
+    }
+  }, {
+    props: {
+      loadingPosition: "center"
+    },
+    style: {
+      left: "50%",
+      transform: "translate(-50%)",
+      color: (theme.vars || theme).palette.action.disabled
+    }
+  }, {
+    props: {
+      loadingPosition: "end",
+      size: "small"
+    },
+    style: {
+      right: 10
+    }
+  }, {
+    props: ({
+      loadingPosition,
+      ownerState
+    }) => loadingPosition === "end" && ownerState.size !== "small",
+    style: {
+      right: 14
+    }
+  }, {
+    props: {
+      variant: "text",
+      loadingPosition: "end"
+    },
+    style: {
+      right: 6
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.loadingPosition === "start" && ownerState.fullWidth,
+    style: {
+      position: "relative",
+      left: -10
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.loadingPosition === "end" && ownerState.fullWidth,
+    style: {
+      position: "relative",
+      right: -10
+    }
+  }]
+})));
+var LoadingButtonLabel = styled("span", {
+  name: "MuiLoadingButton",
+  slot: "Label",
+  overridesResolver: (props, styles) => {
+    return [styles.label];
+  }
+})({
+  display: "inherit",
+  alignItems: "inherit",
+  justifyContent: "inherit"
+});
 var LoadingButton = /* @__PURE__ */ React.forwardRef(function LoadingButton2(inProps, ref) {
   const contextProps = React.useContext(ButtonGroupContext);
   const resolvedProps = resolveProps(contextProps, inProps);
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: resolvedProps,
     name: "MuiLoadingButton"
   });
-  const {
+  const _a = props, {
     children,
     disabled = false,
     id: idProp,
@@ -1382,14 +1432,22 @@ var LoadingButton = /* @__PURE__ */ React.forwardRef(function LoadingButton2(inP
     loadingIndicator: loadingIndicatorProp,
     loadingPosition = "center",
     variant = "text"
-  } = props, other = _objectWithoutPropertiesLoose(props, _excluded);
+  } = _a, other = __objRest(_a, [
+    "children",
+    "disabled",
+    "id",
+    "loading",
+    "loadingIndicator",
+    "loadingPosition",
+    "variant"
+  ]);
   const id = useId(idProp);
   const loadingIndicator = loadingIndicatorProp != null ? loadingIndicatorProp : /* @__PURE__ */ _jsx(CircularProgress, {
     "aria-labelledby": id,
     color: "inherit",
     size: 16
   });
-  const ownerState = _extends({}, props, {
+  const ownerState = __spreadProps(__spreadValues({}, props), {
     disabled,
     loading,
     loadingIndicator,
@@ -1402,15 +1460,21 @@ var LoadingButton = /* @__PURE__ */ React.forwardRef(function LoadingButton2(inP
     ownerState,
     children: loadingIndicator
   }) : null;
-  return /* @__PURE__ */ _jsxs(LoadingButtonRoot, _extends({
+  return /* @__PURE__ */ _jsxs(LoadingButtonRoot, __spreadProps(__spreadValues({
     disabled: disabled || loading,
     id,
     ref
-  }, other, {
+  }, other), {
     variant,
     classes,
     ownerState,
-    children: [ownerState.loadingPosition === "end" ? children : loadingButtonLoadingIndicator, ownerState.loadingPosition === "end" ? loadingButtonLoadingIndicator : children]
+    children: [ownerState.loadingPosition === "end" ? /* @__PURE__ */ _jsx(LoadingButtonLabel, {
+      className: classes.label,
+      children
+    }) : loadingButtonLoadingIndicator, ownerState.loadingPosition === "end" ? loadingButtonLoadingIndicator : /* @__PURE__ */ _jsx(LoadingButtonLabel, {
+      className: classes.label,
+      children
+    })]
   }));
 });
 process.env.NODE_ENV !== "production" ? LoadingButton.propTypes = {
@@ -1512,7 +1576,7 @@ import MuiContainer from "@mui/material/Container";
 import { jsx as jsx11 } from "react/jsx-runtime";
 
 // ../layout/src/lib/Grid.tsx
-import MuiGrid2 from "@mui/material/Unstable_Grid2";
+import MuiGrid2 from "@mui/material/Grid2";
 import { jsx as jsx12 } from "react/jsx-runtime";
 var Grid = (args) => {
   return /* @__PURE__ */ jsx12(MuiGrid2, __spreadValues({}, args));
@@ -1654,22 +1718,4 @@ object-assign/index.js:
   (c) Sindre Sorhus
   @license MIT
   *)
-
-@mui/utils/index.js:
-  (**
-   * @mui/utils v5.15.14
-   *
-   * @license MIT
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   *)
-
-@mui/utils/index.js:
-  (**
-   * @mui/utils v5.15.14
-   *
-   * @license MIT
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   *)
 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-stepper",
-  "version": "0.3.3",
+  "version": "1.0.0-alpha.0",
   "description": "Availity MUI Stepper Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -23,6 +23,14 @@
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts",
     "dev": "tsup src/index.ts --format esm,cjs --watch --dts",
@@ -32,21 +40,22 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/mui-icon": "^0.13.1",
-    "@availity/mui-typography": "^0.2.1"
+    "@availity/mui-icon": "^1.0.0-alpha.0",
+    "@availity/mui-typography": "^1.0.0-alpha.0"
   },
   "devDependencies": {
-    "@availity/mui-button": "^0.6.16",
-    "@availity/mui-layout": "^0.2.0",
-    "@availity/mui-paper": "^0.1.9",
-    "@mui/material": "^5.15.15",
+    "@availity/mui-button": "^1.0.0-alpha.0",
+    "@availity/mui-layout": "^1.0.0-alpha.0",
+    "@availity/mui-paper": "^1.0.0-alpha.0",
+    "@availity/mui-typography": "^1.0.0-alpha.0",
+    "@mui/material": "^6.4.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tsup": "^8.0.2",
+    "tsup": "^8.3.6",
     "typescript": "^5.4.5"
   },
   "peerDependencies": {
-    "@mui/material": "^5.11.9",
+    "@mui/material": "^6.4.5",
     "react": ">=16.3.0"
   },
   "publishConfig": {

package/src/lib/Step.stories.tsx

@@ -119,7 +119,7 @@ export const _Stepper: StoryObj<typeof Step> = {
     };
 
     return (
-      <Box maxWidth="75vw" marginX="auto">
+      <Box sx={{ maxWidth: '75vw', marginX: 'auto' }}>
         <Paper sx={{ padding: '2rem' }}>
           <Stepper activeStep={activeStep} orientation={width < 600 ? 'vertical' : 'horizontal'}>
             {steps.map((label, index) => {

package/src/lib/StepButton.stories.tsx

@@ -121,7 +121,7 @@ export const _Stepper: StoryObj<typeof StepButton> = {
     };
 
     return (
-      <Box maxWidth="75vw" marginX="auto">
+      <Box sx={{ maxWidth: '75vw', marginX: 'auto' }}>
         <Paper sx={{ padding: '2rem' }}>
           <Stepper activeStep={activeStep} orientation={width < 600 ? 'vertical' : 'horizontal'}>
             {steps.map((label, index) => {

package/src/lib/StepLabel.stories.tsx

@@ -118,7 +118,7 @@ export const _Stepper: StoryObj<typeof StepLabel> = {
     };
 
     return (
-      <Box maxWidth="75vw" marginX="auto">
+      <Box sx={{ maxWidth: '75vw', marginX: 'auto' }}>
         <Paper sx={{ padding: '2rem' }}>
           <Stepper activeStep={activeStep} orientation={width < 600 ? 'vertical' : 'horizontal'}>
             {steps.map((label, index) => {
@@ -144,7 +144,9 @@ export const _Stepper: StoryObj<typeof StepLabel> = {
               return (
                 <Step key={label} {...stepProps}>
                   <StepButton color="inherit" onClick={handleStep(index)}>
-                    <StepLabel {...labelProps} {...args}>{label}</StepLabel>
+                    <StepLabel {...labelProps} {...args}>
+                      {label}
+                    </StepLabel>
                   </StepButton>
                 </Step>
               );