@moda/om 21.2.0 → 21.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moda/om",
-  "version": "21.2.0",
+  "version": "21.2.1",
   "description": "Moda Operandi design system",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -48,106 +48,104 @@
     "react-router-dom": "^5.1.2"
   },
   "dependencies": {
-    "@moda/icons": "^6.0.0",
-    "@moda/tokens": "^6.3.4",
+    "@moda/icons": "^6.1.14",
+    "@moda/tokens": "^6.4.58",
     "@mona-health/react-input-mask": "^3.0.3",
     "@storybook/addon-styling": "^2.0.0",
     "classnames": "^2.5.1",
     "credit-card-type": "^10.0.2",
     "focus-visible": "^5.2.1",
     "proportional-scale": "^4.0.0",
-    "react-focus-on": "^3.9.4",
+    "react-focus-on": "^3.10.0",
     "scroll-into-view-if-needed": "^3.1.0",
-    "storybook": "^8.6.12",
+    "storybook": "^9.0.17",
     "use-cursor": "^1.2.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.10",
-    "@babel/preset-env": "^7.26.9",
-    "@babel/preset-react": "^7.26.3",
-    "@babel/preset-typescript": "^7.27.0",
-    "@commitlint/cli": "^19.8.0",
-    "@commitlint/config-conventional": "^19.8.0",
-    "@eslint/js": "^9.24.0",
+    "@babel/core": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/js": "^9.31.0",
     "@moda/rollup-plugin-postcss": "^4.0.1",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
-    "@storybook/addon-actions": "^8.6.12",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-links": "^8.6.12",
+    "@storybook/addon-links": "^9.0.17",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-viewport": "^8.6.12",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
     "@storybook/addons": "^7.6.17",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-webpack5": "^8.6.12",
+    "@storybook/react": "^9.0.17",
+    "@storybook/react-webpack5": "^9.0.17",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/cheerio": "^0.22.35",
+    "@types/chai": "^5.2.2",
+    "@types/cheerio": "^1.0.0",
     "@types/classnames": "^2.3.4",
     "@types/credit-card-type": "^9.0.3",
-    "@types/jest": "^29.5.14",
+    "@types/jest": "^30.0.0",
     "@types/ramda": "^0.30.2",
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.2",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "@types/react-input-mask": "^3.0.6",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^8.30.1",
-    "@typescript-eslint/parser": "^8.30.1",
+    "@typescript-eslint/eslint-plugin": "^8.37.0",
+    "@typescript-eslint/parser": "^8.37.0",
     "autoprefixer": "^10.4.21",
     "babel-loader": "^10.0.0",
     "commitizen": "^4.3.1",
     "css-loader": "^7.1.2",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^9.24.0",
-    "eslint-config-prettier": "^10.1.2",
-    "eslint-plugin-import": "^2.31.0",
+    "eslint": "^9.31.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jest-dom": "^5.5.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-no-loops": "^0.4.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^5.2.6",
+    "eslint-plugin-prettier": "^5.5.1",
     "eslint-plugin-promise": "^7.2.1",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-standard": "^5.0.0",
-    "eslint-plugin-testing-library": "^7.1.1",
-    "globals": "^16.0.0",
+    "eslint-plugin-testing-library": "^7.6.0",
+    "globals": "^16.3.0",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "ignore-not-found-export-webpack-plugin": "^1.0.2",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "jest": "^30.0.4",
+    "jest-environment-jsdom": "^30.0.4",
     "jest-matchmedia-mock": "^1.1.0",
-    "lint-staged": "^16.0.0",
+    "lint-staged": "^16.1.2",
     "node-sass-package-importer": "^5.3.3",
     "pinst": "^3.0.0",
-    "postcss": "^8.5.3",
+    "postcss": "^8.5.6",
     "postcss-loader": "^8.1.1",
-    "prettier": "^3.5.3",
-    "ramda": "^0.30.1",
+    "prettier": "^3.6.2",
+    "ramda": "^0.31.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^5.1.2",
-    "rollup": "^4.40.0",
+    "rollup": "^4.45.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-scss": "^4.0.1",
-    "sass": "^1.86.3",
+    "sass": "^1.89.2",
     "sass-loader": "^16.0.5",
-    "semantic-release": "^24.2.3",
+    "semantic-release": "^24.2.7",
     "semantic-release-npm-github": "^5.0.0",
     "style-loader": "^4.0.0",
-    "ts-jest": "^29.3.2",
+    "ts-jest": "^29.4.0",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.30.1",
+    "typescript-eslint": "^8.37.0",
     "waait": "^1.0.5",
-    "webpack": "^5.99.5",
+    "webpack": "^5.100.2",
     "webpack-cli": "^6.0.1"
   },
   "overrides": {
-    "@types/react": "^19.1.2",
+    "@types/react": "^19.1.8",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },

package/src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -12,8 +12,8 @@ describe('Breadcrumbs', () => {
         <Breadcrumb>Three</Breadcrumb>
       </Breadcrumbs>
     );
-    expect(screen.getAllByRole('listitem').at(0)).toHaveAttribute('itemprop');
-    expect(screen.getAllByRole('listitem').at(0)).toHaveAttribute('itemscope');
-    expect(screen.getAllByRole('listitem').at(0)).toHaveAttribute('itemtype');
+    expect(screen.getAllByRole('listitem')[0]).toHaveAttribute('itemprop');
+    expect(screen.getAllByRole('listitem')[0]).toHaveAttribute('itemscope');
+    expect(screen.getAllByRole('listitem')[0]).toHaveAttribute('itemtype');
   });
 });

package/src/components/Breakpoint/Breakpoint.stories.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 import React from 'react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { breakpoints } from '@moda/tokens';
 
 import { Breakpoint } from './Breakpoint';

package/src/components/Button/Button.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import Heart from '@moda/icons/favorite-outline-16';
 
 import { States } from '../../utilities';

package/src/components/Button/Button.test.tsx

@@ -17,6 +17,6 @@ describe('Button', () => {
     render(<Button onClick={onClick}>Click me</Button>);
 
     await user.click(screen.getByRole('button', { name: 'Click me' }));
-    expect(onClick).toBeCalled();
+    expect(onClick).toHaveBeenCalled();
   });
 });

package/src/components/Checkbox/Checkbox.test.tsx

@@ -15,7 +15,7 @@ describe('Checkbox', () => {
 
     await userEvent.click(screen.getByTestId('checkbox'));
 
-    expect(handleChange).toBeCalled();
+    expect(handleChange).toHaveBeenCalled();
     expect(screen.getByRole('checkbox') as HTMLInputElement).toBeChecked();
 
     rerender(<Checkbox data-testid='checkbox' checked={false} onChange={handleChange} />);
@@ -31,7 +31,7 @@ describe('Checkbox', () => {
 
     await userEvent.click(screen.getByTestId('checkbox'));
 
-    expect(handleChange).toBeCalled();
+    expect(handleChange).toHaveBeenCalled();
     expect(screen.getByRole('checkbox') as HTMLInputElement).toBeChecked();
   });
 });

package/src/components/Clickable/Clickable.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { BrowserRouter } from 'react-router-dom';
 import { States } from '../../utilities';
 import { Clickable, ClickableProps } from './Clickable';

package/src/components/ColorSwatch/ColorSwatch.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { States } from '../../utilities';
 import { Stack } from '../Stack';
 import { ColorSwatch, ColorSwatchProps, SKU_COLORS } from '.';

package/src/components/ControlLink/ControlLink.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { BrowserRouter } from 'react-router-dom';
 import { States } from '../../utilities';
 import { ControlLink, ControlLinkProps } from './ControlLink';

package/src/components/Field/Field.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { States } from '../../utilities';
 import { Textarea } from '../Textarea';
 import { Select } from '../Select';

package/src/components/Modal/Modal.test.tsx

@@ -24,11 +24,11 @@ describe('Modal', () => {
     const button = screen.getByTestId('button');
 
     await userEvent.click(button);
-    expect(onClose).toBeCalledTimes(0);
-    expect(onClickButton).toBeCalledTimes(1);
+    expect(onClose).toHaveBeenCalledTimes(0);
+    expect(onClickButton).toHaveBeenCalledTimes(1);
 
     await userEvent.click(modal);
-    expect(onClose).toBeCalledTimes(1);
-    expect(onClickButton).toBeCalledTimes(1);
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(onClickButton).toHaveBeenCalledTimes(1);
   });
 });

package/src/components/Paginator/Paginator.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { Paginator } from './Paginator';
 
 export default { title: 'Components/Paginator' };

package/src/components/SearchInput/SearchInput.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { States } from '../../utilities';
 import { Text } from '../Text';
 import { SearchInput, SearchInputProps } from './SearchInput';

package/src/components/Select/Select.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useCallback } from 'react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { States } from '../../utilities';
 import { Input } from '../Field';
 import { Select, SelectProps } from './Select';

package/src/components/Select/Select.test.tsx

@@ -65,7 +65,7 @@ describe('Select', () => {
     await userEvent.click(button);
     const option = screen.getByLabelText('Bar');
     await userEvent.click(option);
-    expect(onChange).toBeCalledWith('bar');
+    expect(onChange).toHaveBeenCalledWith('bar');
   });
 
   it('does not call onChange when selecting a disabled option', async () => {
@@ -84,7 +84,7 @@ describe('Select', () => {
     await userEvent.click(button);
     const option = screen.getByLabelText('Baz');
     await userEvent.click(option);
-    expect(onChange).not.toBeCalled();
+    expect(onChange).not.toHaveBeenCalled();
   });
 
   it('renders correctly with ":" between label and value if value is not undefined', async () => {

package/src/components/SelectableButton/SelectableButton.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 
 import { States } from '../../utilities';
 import { Stack } from '../Stack';

package/src/components/Tag/Tag.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { States } from '../../utilities';
 import { Tag, TagProps } from './Tag';
 

package/src/components/Tag/Tag.test.tsx

@@ -11,6 +11,6 @@ describe('Tag', () => {
     expect(screen.getByText('Hello')).toBeInTheDocument();
 
     await userEvent.click(screen.getByRole('button'));
-    expect(onRemove).toBeCalled();
+    expect(onRemove).toHaveBeenCalled();
   });
 });

package/src/components/Toast/Toast.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { States } from '../../utilities';
 import { Toast, ToastProps } from './Toast';
 

package/src/components/Toast/Toast.test.tsx

@@ -15,6 +15,6 @@ describe('Toast', () => {
     expect(screen.getByText('Hello')).toBeInTheDocument();
 
     await userEvent.click(screen.getByRole('button', { name: 'Remove' }));
-    expect(onRemove).toBeCalled();
+    expect(onRemove).toHaveBeenCalled();
   });
 });

package/src/hooks/useKeyboardListNavigation.spec.ts

@@ -153,7 +153,7 @@ describe('useKeyboardListNavigation', () => {
 
     fireEvent.keyDown(window, { key: 'Enter' });
 
-    expect(onEnter).toBeCalledTimes(1);
+    expect(onEnter).toHaveBeenCalledTimes(1);
     expect(onEnter).toHaveBeenCalledWith({
       element: 'first',
       event: expect.anything(),
@@ -166,7 +166,7 @@ describe('useKeyboardListNavigation', () => {
 
     fireEvent.keyDown(window, { key: 'Enter' });
 
-    expect(onEnter).toBeCalledTimes(2);
+    expect(onEnter).toHaveBeenCalledTimes(2);
     expect(onEnter).toHaveBeenLastCalledWith({
       element: 'third',
       event: expect.anything(),
@@ -220,13 +220,13 @@ describe('useKeyboardListNavigation', () => {
 
       fireEvent.keyDown(window, { key: 'Enter' });
 
-      expect(onEnter).toBeCalledTimes(0);
+      expect(onEnter).toHaveBeenCalledTimes(0);
 
       fireEvent.keyDown(window, { key: 'ArrowDown' });
 
       fireEvent.keyDown(window, { key: 'Enter' });
 
-      expect(onEnter).toBeCalledTimes(1);
+      expect(onEnter).toHaveBeenCalledTimes(1);
     });
   });
 });