@availity/mui-stepper 2.0.1 → 3.0.0

package/CHANGELOG.md

@@ -2,6 +2,43 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [3.0.0](https://github.com/Availity/element/compare/@availity/mui-stepper@2.0.2...@availity/mui-stepper@3.0.0) (2026-06-16)
+
+### Dependency Updates
+
+* `mui-button` updated to version `2.0.2`
+* `mui-layout` updated to version `2.0.2`
+* `mui-paper` updated to version `2.0.2`
+* `mui-typography` updated to version `2.0.2`
+* `mui-icon` updated to version `2.0.2`
+
+### ⚠ BREAKING CHANGES
+
+* CJS builds removed, packages are ESM-only.
+
+- Convert all packages to ESM (type: module)
+- Replace Jest with Vitest for all test targets
+- Migrate ESLint to v9 flat config (eslint.config.js)
+- Build output ESM-only (removed CJS dist/index.js require path)
+- Upgrade @tanstack/react-query from v4 to v5
+- Upgrade @availity/api-axios to v13
+- Drop Node 20 support (engines: ^22.0.0 || ^24.0.0)
+- Bump React to 19.2.7, MUI to 7.3.11, TypeScript to 5.9.3
+- Simplify CI caching with built-in yarn cache action + Nx cache
+- Modernize nx.json configuration
+- Update husky hooks to use yarn directly
+- Replace lint-staged nx affected with direct eslint
+
+### Features
+
+* migrate to ESM, Vitest, and ESLint 9 flat config ([cc22bb4](https://github.com/Availity/element/commit/cc22bb4a230bc1f3b190f187c4e61249d015b25b))
+
+## [2.0.2](https://github.com/Availity/element/compare/@availity/mui-stepper@2.0.1...@availity/mui-stepper@2.0.2) (2026-02-02)
+
+### Dependency Updates
+
+* `mui-button` updated to version `2.0.1`
+* `mui-icon` updated to version `2.0.1`
 ## [2.0.1](https://github.com/Availity/element/compare/@availity/mui-stepper@2.0.0...@availity/mui-stepper@2.0.1) (2025-12-03)
 
 ### Dependency Updates

package/README.md

@@ -4,7 +4,7 @@
 
 [![Version](https://img.shields.io/npm/v/@availity/mui-stepper.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-stepper)
 [![NPM Downloads](https://img.shields.io/npm/dt/@availity/mui-stepper.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-stepper)
-[![Dependency Status](https://img.shields.io/librariesio/release/npm/@availity/mui-stepper?style=for-the-badge)](https://github.com/Availity/element/blob/main/packages/mui-stepper/package.json)
+[![Dependency Status](https://img.shields.io/librariesio/release/npm/@availity/mui-stepper?style=for-the-badge)](https://github.com/Availity/element/blob/main/packages/stepper/package.json)
 
 ## Documentation
 

package/dist/index.js

@@ -1,174 +1,91 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  Step: () => Step,
-  StepButton: () => StepButton,
-  StepConnector: () => StepConnector,
-  StepContent: () => StepContent,
-  StepIcon: () => StepIcon,
-  StepLabel: () => StepLabel,
-  Stepper: () => Stepper
-});
-module.exports = __toCommonJS(index_exports);
-
 // src/lib/Step.tsx
-var import_Step = __toESM(require("@mui/material/Step"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var Step = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Step.default, __spreadProps(__spreadValues({}, rest), { children }));
-};
+import MuiStep from "@mui/material/Step";
+import { jsx } from "react/jsx-runtime";
+var Step = ({ children, ...rest }) => /* @__PURE__ */ jsx(MuiStep, { ...rest, children });
 
 // src/lib/StepButton.tsx
-var import_StepButton = __toESM(require("@mui/material/StepButton"));
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var StepButton = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_StepButton.default, __spreadProps(__spreadValues({}, rest), { disableRipple: true, disableTouchRipple: true, children }));
-};
+import MuiStepButton from "@mui/material/StepButton";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var StepButton = ({ children, ...rest }) => /* @__PURE__ */ jsx2(MuiStepButton, { ...rest, disableRipple: true, disableTouchRipple: true, children });
 
 // src/lib/StepConnector.tsx
-var import_StepConnector = __toESM(require("@mui/material/StepConnector"));
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var StepConnector = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_StepConnector.default, __spreadValues({}, props));
-};
+import MuiStepConnector from "@mui/material/StepConnector";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var StepConnector = (props) => /* @__PURE__ */ jsx3(MuiStepConnector, { ...props });
 
 // src/lib/StepContent.tsx
-var import_StepContent = __toESM(require("@mui/material/StepContent"));
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var StepContent = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_StepContent.default, __spreadProps(__spreadValues({}, rest), { children }));
-};
+import MuiStepContent from "@mui/material/StepContent";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var StepContent = ({ children, ...rest }) => /* @__PURE__ */ jsx4(MuiStepContent, { ...rest, children });
 
 // src/lib/StepIcon.tsx
-var import_StepIcon = __toESM(require("@mui/material/StepIcon"));
-var import_mui_icon = require("@availity/mui-icon");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var StepIcon = (_a) => {
-  var _b = _a, { error, completed, warning } = _b, rest = __objRest(_b, ["error", "completed", "warning"]);
+import MuiStepIcon from "@mui/material/StepIcon";
+import { SuccessCircleIcon, WarningCircleIcon } from "@availity/mui-icon";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var StepIcon = ({ error, completed, warning, ...rest }) => {
   let tag = null;
-  if (error) tag = import_mui_icon.WarningCircleIcon;
-  if (warning) tag = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_icon.WarningCircleIcon, __spreadValues({ color: "warning" }, props));
-  if (completed) tag = import_mui_icon.SuccessCircleIcon;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_StepIcon.default, __spreadProps(__spreadValues({}, rest), { error, completed, as: tag }));
+  if (error) tag = WarningCircleIcon;
+  if (warning) tag = (props) => /* @__PURE__ */ jsx5(WarningCircleIcon, { color: "warning", ...props });
+  if (completed) tag = SuccessCircleIcon;
+  return /* @__PURE__ */ jsx5(MuiStepIcon, { ...rest, error, completed, as: tag });
 };
 
 // src/lib/StepLabel.tsx
-var import_StepLabel = __toESM(require("@mui/material/StepLabel"));
-var import_mui_typography = require("@availity/mui-typography");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var StepLabel = (_a) => {
-  var _b = _a, { children, error, optional, warning } = _b, rest = __objRest(_b, ["children", "error", "optional", "warning"]);
+import MuiStepLabel from "@mui/material/StepLabel";
+import { Typography } from "@availity/mui-typography";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var StepLabel = ({ children, error, optional, warning, ...rest }) => {
   if (typeof optional === "string") {
-    optional = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_mui_typography.Typography, { variant: "caption", children: optional });
+    optional = /* @__PURE__ */ jsx6(Typography, { variant: "caption", children: optional });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_StepLabel.default,
-    __spreadProps(__spreadValues({
+  return /* @__PURE__ */ jsx6(
+    MuiStepLabel,
+    {
       StepIconProps: { error, warning },
       StepIconComponent: StepIcon,
       error,
-      optional
-    }, rest), {
+      optional,
+      ...rest,
       children
-    })
+    }
   );
 };
-StepLabel.muiName = import_StepLabel.default.muiName;
+StepLabel.muiName = MuiStepLabel.muiName;
 
 // src/lib/Stepper.tsx
-var import_react2 = require("react");
-var import_Stepper = __toESM(require("@mui/material/Stepper"));
+import { useRef, useState, useEffect } from "react";
+import MuiStepper from "@mui/material/Stepper";
 
 // ../button/src/lib/IconButton.tsx
-var import_react = require("react");
-var import_IconButton = __toESM(require("@mui/material/IconButton"));
-var import_Tooltip = __toESM(require("@mui/material/Tooltip"));
-var import_jsx_runtime7 = require("react/jsx-runtime");
+import { forwardRef } from "react";
+import { default as MuiIconButton } from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var outlinedStyles = {
   borderRadius: ".25rem",
   border: 1
 };
-var IconButton = (0, import_react.forwardRef)((props, ref) => {
-  const _a = props, { title, variant = "text", sx, size = "medium" } = _a, rest = __objRest(_a, ["title", "variant", "sx", "size"]);
-  const styles = __spreadValues(__spreadValues({}, sx), variant === "outlined" && outlinedStyles);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Tooltip.default, { title, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_IconButton.default, __spreadProps(__spreadValues({ "aria-label": title, sx: __spreadValues({}, styles) }, rest), { ref, size })) });
+var IconButton = forwardRef((props, ref) => {
+  const { title, variant = "text", sx, size = "medium", ...rest } = props;
+  const styles = {
+    ...sx,
+    ...variant === "outlined" && outlinedStyles
+  };
+  return /* @__PURE__ */ jsx7(Tooltip, { title, children: /* @__PURE__ */ jsx7(MuiIconButton, { "aria-label": title, sx: { ...styles }, ...rest, ref, size }) });
 });
 
 // src/lib/Stepper.tsx
-var import_mui_icon2 = require("@availity/mui-icon");
+import { NavigatePreviousIcon, NavigateNextIcon } from "@availity/mui-icon";
 
 // ../layout/src/lib/Grid.tsx
-var import_Grid = __toESM(require("@mui/material/Grid"));
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Grid = (args) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Grid.default, __spreadValues({}, args));
-};
+import MuiGrid from "@mui/material/Grid";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Grid = (args) => /* @__PURE__ */ jsx8(MuiGrid, { ...args });
 
 // src/lib/Stepper.tsx
-var import_styles = require("@mui/material/styles");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var HiddenConnectorStepper = (0, import_styles.styled)(import_Stepper.default, {
+import { styled } from "@mui/material/styles";
+import { jsx as jsx9, jsxs } from "react/jsx-runtime";
+var HiddenConnectorStepper = styled(MuiStepper, {
   name: "MuiStepper",
   slot: "AvHideConnector",
   overridesResolver: (props, styles) => styles.avHideConnector
@@ -177,14 +94,13 @@ var HiddenConnectorStepper = (0, import_styles.styled)(import_Stepper.default, {
     display: "none"
   }
 });
-var Stepper = (_a) => {
-  var _b = _a, { children, connector, orientation, scrollButtons } = _b, rest = __objRest(_b, ["children", "connector", "orientation", "scrollButtons"]);
+var Stepper = ({ children, connector, orientation, scrollButtons, ...rest }) => {
   const alternativeLabel = orientation !== "vertical";
-  const Stepper2 = connector === null ? HiddenConnectorStepper : import_Stepper.default;
-  const stepperRef = (0, import_react2.useRef)(null);
-  const [showLeftButton, setShowLeftButton] = (0, import_react2.useState)(true);
-  const [showRightButton, setShowRightButton] = (0, import_react2.useState)(true);
-  (0, import_react2.useEffect)(() => {
+  const Stepper2 = connector === null ? HiddenConnectorStepper : MuiStepper;
+  const stepperRef = useRef(null);
+  const [showLeftButton, setShowLeftButton] = useState(true);
+  const [showRightButton, setShowRightButton] = useState(true);
+  useEffect(() => {
     const stepper = stepperRef.current;
     const handleScroll = () => {
       if (stepper) {
@@ -209,69 +125,64 @@ var Stepper = (_a) => {
     };
   }, []);
   const showScrollButtons = scrollButtons && orientation !== "vertical";
-  const ScrollIconContainer = (0, import_styles.styled)("div")({
+  const ScrollIconContainer = styled("div")({
     width: "50px",
     flexShrink: 0,
     paddingTop: "15px"
   });
-  return showScrollButtons ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Grid, { container: true, direction: "row", justifyContent: "space-between", wrap: "nowrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ScrollIconContainer, { style: { paddingRight: "8px" }, children: showLeftButton && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return showScrollButtons ? /* @__PURE__ */ jsxs(Grid, { container: true, direction: "row", justifyContent: "space-between", wrap: "nowrap", children: [
+    /* @__PURE__ */ jsx9(ScrollIconContainer, { style: { paddingRight: "8px" }, children: showLeftButton && /* @__PURE__ */ jsx9(
       IconButton,
       {
         title: "Previous",
         variant: "outlined",
-        onClick: () => {
-          var _a2;
-          return (_a2 = stepperRef.current) == null ? void 0 : _a2.scrollTo({ left: 0, behavior: "smooth" });
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_mui_icon2.NavigatePreviousIcon, { fontSize: "xsmall" })
+        onClick: () => stepperRef.current?.scrollTo({ left: 0, behavior: "smooth" }),
+        children: /* @__PURE__ */ jsx9(NavigatePreviousIcon, { fontSize: "xsmall" })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ jsx9(
       Stepper2,
-      __spreadProps(__spreadValues({
+      {
         "aria-label": "multi-step process",
-        role: "region"
-      }, rest), {
+        role: "region",
+        ...rest,
         connector,
         orientation,
         alternativeLabel,
         ref: stepperRef,
         children,
         tabIndex: 0
-      })
+      }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ScrollIconContainer, { style: { paddingLeft: "8px" }, children: showRightButton && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ jsx9(ScrollIconContainer, { style: { paddingLeft: "8px" }, children: showRightButton && /* @__PURE__ */ jsx9(
       IconButton,
       {
         title: "Next",
         variant: "outlined",
         onClick: () => {
-          var _a2;
-          (_a2 = stepperRef.current) == null ? void 0 : _a2.scrollTo({
+          stepperRef.current?.scrollTo({
             left: stepperRef.current.scrollWidth - stepperRef.current.clientWidth,
             behavior: "smooth"
           });
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_mui_icon2.NavigateNextIcon, { fontSize: "xsmall" })
+        children: /* @__PURE__ */ jsx9(NavigateNextIcon, { fontSize: "xsmall" })
       }
     ) })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  ] }) : /* @__PURE__ */ jsx9(
     Stepper2,
-    __spreadProps(__spreadValues({
+    {
       "aria-label": "multi-step process",
-      role: "region"
-    }, rest), {
+      role: "region",
+      ...rest,
       connector,
       orientation,
       alternativeLabel,
       ref: stepperRef,
       children
-    })
+    }
   );
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+export {
   Step,
   StepButton,
   StepConnector,
@@ -279,4 +190,4 @@ var Stepper = (_a) => {
   StepIcon,
   StepLabel,
   Stepper
-});
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-stepper",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "description": "Availity MUI Stepper Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -21,38 +21,36 @@
   "author": "Availity Developers <AVOSS@availity.com>",
   "browser": "./dist/index.js",
   "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"
-    }
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --dts",
-    "dev": "tsup src/index.ts --format esm,cjs --watch --dts",
+    "build": "tsup src/index.ts --format esm --dts",
+    "dev": "tsup src/index.ts --format esm --watch --dts",
     "clean": "rm -rf dist",
     "clean:nm": "rm -rf node_modules",
     "publish": "yarn npm publish --tolerate-republish --access public",
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/mui-icon": "^2.0.1",
-    "@availity/mui-typography": "^2.0.1"
+    "@availity/mui-icon": "^3.0.0",
+    "@availity/mui-typography": "^3.0.0"
   },
   "devDependencies": {
-    "@availity/mui-button": "^2.0.1",
-    "@availity/mui-layout": "^2.0.1",
-    "@availity/mui-paper": "^2.0.1",
-    "@availity/mui-typography": "^2.0.1",
-    "@mui/material": "^7.3.4",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
-    "tsup": "^8.4.0",
-    "typescript": "^5.4.5"
+    "@availity/mui-button": "^3.0.0",
+    "@availity/mui-layout": "^3.0.0",
+    "@availity/mui-paper": "^3.0.0",
+    "@availity/mui-typography": "^3.0.0",
+    "@mui/material": "^7.3.11",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "@mui/material": "^7.0.0",
@@ -61,5 +59,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "type": "module"
 }

package/project.json

@@ -8,23 +8,20 @@
     "lint": {
       "executor": "@nx/eslint:lint",
       "options": {
-        "eslintConfig": ".eslintrc.json",
         "silent": false,
         "fix": false,
         "cache": true,
         "cacheLocation": "./node_modules/.cache/stepper/.eslintcache",
         "maxWarnings": -1,
         "quiet": false,
-        "noEslintrc": false,
         "hasTypeAwareRules": true,
         "cacheStrategy": "metadata"
       }
     },
     "test": {
-      "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/stepper"],
+      "executor": "nx:run-commands",
       "options": {
-        "jestConfig": "packages/stepper/jest.config.js"
+        "command": "vitest run packages/stepper"
       }
     },
     "version": {
@@ -34,7 +31,9 @@
         "commitMessageFormat": "chore({projectName}): release version ${version} [skip ci]",
         "tagPrefix": "@availity/{projectName}@",
         "trackDeps": true,
-        "skipCommitTypes": ["docs"]
+        "skipCommitTypes": [
+          "docs"
+        ]
       }
     }
   }

package/src/lib/Step.tsx

@@ -2,6 +2,4 @@ import MuiStep, { StepProps as MuiStepProps } from '@mui/material/Step';
 
 export type StepProps = MuiStepProps;
 
-export const Step = ({ children, ...rest }: StepProps): React.JSX.Element => {
-  return <MuiStep {...rest}>{children}</MuiStep>;
-};
+export const Step = ({ children, ...rest }: StepProps): React.JSX.Element => <MuiStep {...rest}>{children}</MuiStep>;

package/src/lib/StepButton.test.tsx

@@ -10,7 +10,7 @@ describe('StepButton', () => {
   });
 
   test('should handle clicks', () => {
-    const fn = jest.fn();
+    const fn = vi.fn();
     render(<StepButton onClick={fn}>Next</StepButton>);
 
     fireEvent.click(screen.getByText('Next'));

package/src/lib/StepButton.tsx

@@ -5,10 +5,8 @@ export type StepButtonProps = Omit<
   'centerRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'TouchRippleProps' | 'touchRippleRef'
 >;
 
-export const StepButton = ({ children, ...rest }: StepButtonProps): React.JSX.Element => {
-  return (
+export const StepButton = ({ children, ...rest }: StepButtonProps): React.JSX.Element => (
     <MuiStepButton {...rest} disableRipple disableTouchRipple>
       {children}
     </MuiStepButton>
   );
-};

package/src/lib/StepConnector.tsx

@@ -2,6 +2,4 @@ import MuiStepConnector, { StepConnectorProps as MuiStepConnectorProps } from '@
 
 export type StepConnectorProps = MuiStepConnectorProps;
 
-export const StepConnector = (props: StepConnectorProps): React.JSX.Element => {
-  return <MuiStepConnector {...props} />;
-};
+export const StepConnector = (props: StepConnectorProps): React.JSX.Element => <MuiStepConnector {...props} />;

package/src/lib/StepContent.tsx

@@ -2,6 +2,4 @@ import MuiStepContent, { StepContentProps as MuiStepContentProps } from '@mui/ma
 
 export type StepContentProps = MuiStepContentProps;
 
-export const StepContent = ({ children, ...rest }: StepContentProps): React.JSX.Element => {
-  return <MuiStepContent {...rest}>{children}</MuiStepContent>;
-};
+export const StepContent = ({ children, ...rest }: StepContentProps): React.JSX.Element => <MuiStepContent {...rest}>{children}</MuiStepContent>;

package/src/lib/StepLabel.tsx

@@ -1,7 +1,7 @@
 import MuiStepLabel, { StepLabelProps as MuiStepLabelProps } from '@mui/material/StepLabel';
 
-import { StepIcon, StepIconProps } from './StepIcon';
 import { Typography } from '@availity/mui-typography';
+import { StepIcon, StepIconProps } from './StepIcon';
 
 export type StepLabelProps = Pick<StepIconProps, 'warning'> & MuiStepLabelProps;
 

package/src/lib/Stepper.test.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
+ 
 import { render, screen } from '@testing-library/react';
 
 import { Stepper } from './Stepper';
@@ -7,7 +7,9 @@ import { StepLabel } from './StepLabel';
 
 class ResizeObserver {
   observe() {}
+
   unobserve() {}
+
   disconnect() {}
 }
 

package/dist/index.d.mts

@@ -1,46 +0,0 @@
-import { StepProps as StepProps$1 } from '@mui/material/Step';
-import { StepButtonProps as StepButtonProps$1 } from '@mui/material/StepButton';
-import { StepConnectorProps as StepConnectorProps$1 } from '@mui/material/StepConnector';
-import { StepContentProps as StepContentProps$1 } from '@mui/material/StepContent';
-import { StepIconProps as StepIconProps$1 } from '@mui/material/StepIcon';
-import { SvgIconProps } from '@mui/material/SvgIcon';
-import { StepLabelProps as StepLabelProps$1 } from '@mui/material/StepLabel';
-import { StepperProps as StepperProps$1 } from '@mui/material/Stepper';
-
-type StepProps = StepProps$1;
-declare const Step: ({ children, ...rest }: StepProps) => React.JSX.Element;
-
-type StepButtonProps = Omit<StepButtonProps$1, 'centerRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'TouchRippleProps' | 'touchRippleRef'>;
-declare const StepButton: ({ children, ...rest }: StepButtonProps) => React.JSX.Element;
-
-type StepConnectorProps = StepConnectorProps$1;
-declare const StepConnector: (props: StepConnectorProps) => React.JSX.Element;
-
-type StepContentProps = StepContentProps$1;
-declare const StepContent: ({ children, ...rest }: StepContentProps) => React.JSX.Element;
-
-type Tag = ((props: SvgIconProps) => React.JSX.Element) | null;
-declare module '@mui/material/StepIcon' {
-    interface StepIconProps {
-        as?: Tag;
-        warning?: boolean;
-    }
-}
-type StepIconProps = {
-    /** If `true`, the step will have a warning icon. */
-    warning?: boolean;
-} & StepIconProps$1;
-declare const StepIcon: ({ error, completed, warning, ...rest }: StepIconProps) => React.JSX.Element;
-
-type StepLabelProps = Pick<StepIconProps, 'warning'> & StepLabelProps$1;
-declare const StepLabel: {
-    ({ children, error, optional, warning, ...rest }: StepLabelProps): React.JSX.Element;
-    muiName: string;
-};
-
-type StepperProps = {
-    scrollButtons?: boolean;
-} & Omit<StepperProps$1, 'alternativeLabel' | 'elevation'>;
-declare const Stepper: ({ children, connector, orientation, scrollButtons, ...rest }: StepperProps) => React.JSX.Element;
-
-export { Step, StepButton, type StepButtonProps, StepConnector, type StepConnectorProps, StepContent, type StepContentProps, StepIcon, type StepIconProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps };

package/dist/index.mjs

@@ -1,242 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-
-// src/lib/Step.tsx
-import MuiStep from "@mui/material/Step";
-import { jsx } from "react/jsx-runtime";
-var Step = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx(MuiStep, __spreadProps(__spreadValues({}, rest), { children }));
-};
-
-// src/lib/StepButton.tsx
-import MuiStepButton from "@mui/material/StepButton";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var StepButton = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx2(MuiStepButton, __spreadProps(__spreadValues({}, rest), { disableRipple: true, disableTouchRipple: true, children }));
-};
-
-// src/lib/StepConnector.tsx
-import MuiStepConnector from "@mui/material/StepConnector";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var StepConnector = (props) => {
-  return /* @__PURE__ */ jsx3(MuiStepConnector, __spreadValues({}, props));
-};
-
-// src/lib/StepContent.tsx
-import MuiStepContent from "@mui/material/StepContent";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var StepContent = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx4(MuiStepContent, __spreadProps(__spreadValues({}, rest), { children }));
-};
-
-// src/lib/StepIcon.tsx
-import MuiStepIcon from "@mui/material/StepIcon";
-import { SuccessCircleIcon, WarningCircleIcon } from "@availity/mui-icon";
-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;
-  return /* @__PURE__ */ jsx5(MuiStepIcon, __spreadProps(__spreadValues({}, rest), { error, completed, as: tag }));
-};
-
-// src/lib/StepLabel.tsx
-import MuiStepLabel from "@mui/material/StepLabel";
-import { Typography } from "@availity/mui-typography";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var StepLabel = (_a) => {
-  var _b = _a, { children, error, optional, warning } = _b, rest = __objRest(_b, ["children", "error", "optional", "warning"]);
-  if (typeof optional === "string") {
-    optional = /* @__PURE__ */ jsx6(Typography, { variant: "caption", children: optional });
-  }
-  return /* @__PURE__ */ jsx6(
-    MuiStepLabel,
-    __spreadProps(__spreadValues({
-      StepIconProps: { error, warning },
-      StepIconComponent: StepIcon,
-      error,
-      optional
-    }, rest), {
-      children
-    })
-  );
-};
-StepLabel.muiName = MuiStepLabel.muiName;
-
-// src/lib/Stepper.tsx
-import { useRef, useState, useEffect } from "react";
-import MuiStepper from "@mui/material/Stepper";
-
-// ../button/src/lib/IconButton.tsx
-import { forwardRef } from "react";
-import { default as MuiIconButton } from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var outlinedStyles = {
-  borderRadius: ".25rem",
-  border: 1
-};
-var IconButton = forwardRef((props, ref) => {
-  const _a = props, { title, variant = "text", sx, size = "medium" } = _a, rest = __objRest(_a, ["title", "variant", "sx", "size"]);
-  const styles = __spreadValues(__spreadValues({}, sx), variant === "outlined" && outlinedStyles);
-  return /* @__PURE__ */ jsx7(Tooltip, { title, children: /* @__PURE__ */ jsx7(MuiIconButton, __spreadProps(__spreadValues({ "aria-label": title, sx: __spreadValues({}, styles) }, rest), { ref, size })) });
-});
-
-// src/lib/Stepper.tsx
-import { NavigatePreviousIcon, NavigateNextIcon } from "@availity/mui-icon";
-
-// ../layout/src/lib/Grid.tsx
-import MuiGrid from "@mui/material/Grid";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var Grid = (args) => {
-  return /* @__PURE__ */ jsx8(MuiGrid, __spreadValues({}, args));
-};
-
-// src/lib/Stepper.tsx
-import { styled } from "@mui/material/styles";
-import { jsx as jsx9, jsxs } from "react/jsx-runtime";
-var HiddenConnectorStepper = styled(MuiStepper, {
-  name: "MuiStepper",
-  slot: "AvHideConnector",
-  overridesResolver: (props, styles) => styles.avHideConnector
-})({
-  ".MuiStepLabel-root::before, .MuiStepLabel-root::after, .MuiStepConnector-root": {
-    display: "none"
-  }
-});
-var Stepper = (_a) => {
-  var _b = _a, { children, connector, orientation, scrollButtons } = _b, rest = __objRest(_b, ["children", "connector", "orientation", "scrollButtons"]);
-  const alternativeLabel = orientation !== "vertical";
-  const Stepper2 = connector === null ? HiddenConnectorStepper : MuiStepper;
-  const stepperRef = useRef(null);
-  const [showLeftButton, setShowLeftButton] = useState(true);
-  const [showRightButton, setShowRightButton] = useState(true);
-  useEffect(() => {
-    const stepper = stepperRef.current;
-    const handleScroll = () => {
-      if (stepper) {
-        setShowLeftButton(stepper.scrollLeft > 0);
-        const isRight = Math.abs(stepper.scrollWidth - stepper.clientWidth - stepper.scrollLeft) <= 1;
-        setShowRightButton(!isRight);
-      }
-    };
-    const resizeObserver = new ResizeObserver(() => {
-      handleScroll();
-    });
-    if (stepper) {
-      stepper.addEventListener("scroll", handleScroll);
-      resizeObserver.observe(stepper);
-      handleScroll();
-    }
-    return () => {
-      if (stepper) {
-        stepper.removeEventListener("scroll", handleScroll);
-        resizeObserver.disconnect();
-      }
-    };
-  }, []);
-  const showScrollButtons = scrollButtons && orientation !== "vertical";
-  const ScrollIconContainer = styled("div")({
-    width: "50px",
-    flexShrink: 0,
-    paddingTop: "15px"
-  });
-  return showScrollButtons ? /* @__PURE__ */ jsxs(Grid, { container: true, direction: "row", justifyContent: "space-between", wrap: "nowrap", children: [
-    /* @__PURE__ */ jsx9(ScrollIconContainer, { style: { paddingRight: "8px" }, children: showLeftButton && /* @__PURE__ */ jsx9(
-      IconButton,
-      {
-        title: "Previous",
-        variant: "outlined",
-        onClick: () => {
-          var _a2;
-          return (_a2 = stepperRef.current) == null ? void 0 : _a2.scrollTo({ left: 0, behavior: "smooth" });
-        },
-        children: /* @__PURE__ */ jsx9(NavigatePreviousIcon, { fontSize: "xsmall" })
-      }
-    ) }),
-    /* @__PURE__ */ jsx9(
-      Stepper2,
-      __spreadProps(__spreadValues({
-        "aria-label": "multi-step process",
-        role: "region"
-      }, rest), {
-        connector,
-        orientation,
-        alternativeLabel,
-        ref: stepperRef,
-        children,
-        tabIndex: 0
-      })
-    ),
-    /* @__PURE__ */ jsx9(ScrollIconContainer, { style: { paddingLeft: "8px" }, children: showRightButton && /* @__PURE__ */ jsx9(
-      IconButton,
-      {
-        title: "Next",
-        variant: "outlined",
-        onClick: () => {
-          var _a2;
-          (_a2 = stepperRef.current) == null ? void 0 : _a2.scrollTo({
-            left: stepperRef.current.scrollWidth - stepperRef.current.clientWidth,
-            behavior: "smooth"
-          });
-        },
-        children: /* @__PURE__ */ jsx9(NavigateNextIcon, { fontSize: "xsmall" })
-      }
-    ) })
-  ] }) : /* @__PURE__ */ jsx9(
-    Stepper2,
-    __spreadProps(__spreadValues({
-      "aria-label": "multi-step process",
-      role: "region"
-    }, rest), {
-      connector,
-      orientation,
-      alternativeLabel,
-      ref: stepperRef,
-      children
-    })
-  );
-};
-export {
-  Step,
-  StepButton,
-  StepConnector,
-  StepContent,
-  StepIcon,
-  StepLabel,
-  Stepper
-};

package/jest.config.js

@@ -1,7 +0,0 @@
-const global = require('../../jest.config.global');
-
-module.exports = {
-  ...global,
-  displayName: 'stepper',
-  coverageDirectory: '../../coverage/stepper',
-};

package/tsconfig.spec.json

@@ -1,10 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "module": "commonjs",
-    "types": ["jest", "node", "@testing-library/jest-dom"],
-    "allowJs": true
-  },
-  "include": ["jest.config.ts", "**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
-}