@moda/om 21.0.0-next.1 → 21.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moda/om",
-  "version": "21.0.0-next.1",
+  "version": "21.0.1",
   "description": "Moda Operandi design system",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -21,7 +21,6 @@
   ],
   "scripts": {
     "build": "NODE_ENV=production npm run compile && npm run types",
-    "build:documentation": "NODE_ENV=production cd documentation && npm run build",
     "build:storybook": "NODE_ENV=storybook storybook build",
     "clean": "rm -rf ./dist",
     "commit": "git-cz",
@@ -31,14 +30,12 @@
     "lint": "eslint src",
     "lint-staged": "lint-staged",
     "postpublish": "pinst --enable",
-    "predeploy:documentation": "NODE_ENV=production npm run build && cd documentation && npm install && npm run build",
     "prepare": "husky && echo ''",
     "prepublishOnly": "npm run clean && npm run build && pinst --disable",
     "scaffold:component": "node scripts/scaffold/react Components",
     "scaffold:function": "node scripts/scaffold/sass Functions",
     "scaffold:mixin": "node scripts/scaffold/sass Mixins",
     "semantic-release": "semantic-release",
-    "start": "cd documentation && npm run start",
     "storybook": "storybook dev -p 6006",
     "test": "jest -w 1",
     "tsc": "tsc",
@@ -46,108 +43,113 @@
     "unlink-all": "yalc remove --all && npm install"
   },
   "peerDependencies": {
-    "react": ">=18.1.0",
-    "react-dom": ">=18.1.0",
-    "next": ">=15.0.0"
+    "react": ">=19.1.0",
+    "react-dom": ">=19.1.0",
+    "react-router-dom": "^5.1.2"
   },
   "dependencies": {
-    "@moda/icons": "^5.29.9",
-    "@moda/tokens": "^6.0.0",
-    "@storybook/addon-styling": "^1.3.7",
-    "@types/classnames": "^2.3.4",
+    "@moda/icons": "^5.30.1",
+    "@moda/tokens": "^6.3.4",
+    "@mona-health/react-input-mask": "^3.0.3",
+    "@storybook/addon-styling": "^2.0.0",
     "classnames": "^2.5.1",
-    "credit-card-type": "^10.0.1",
-    "next": "^15.0.2",
+    "credit-card-type": "^10.0.2",
+    "focus-visible": "^5.2.1",
     "proportional-scale": "^4.0.0",
     "react-focus-on": "^3.9.4",
-    "react-input-mask": "^2.0.4",
     "scroll-into-view-if-needed": "^3.1.0",
-    "storybook": "^8.3.6",
+    "storybook": "^8.6.12",
     "use-cursor": "^1.2.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.9",
-    "@babel/preset-env": "^7.25.9",
-    "@babel/preset-react": "^7.25.9",
-    "@babel/preset-typescript": "^7.25.9",
-    "@commitlint/cli": "^19.5.0",
-    "@commitlint/config-conventional": "^19.5.0",
-    "@eslint/js": "^9.13.0",
+    "@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",
     "@moda/rollup-plugin-postcss": "^4.0.1",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.1",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@storybook/addon-actions": "^8.3.6",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
-    "@storybook/addon-mdx-gfm": "^8.3.6",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@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-postcss": "^2.0.0",
-    "@storybook/addon-viewport": "^8.3.6",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/addon-viewport": "^8.6.12",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
     "@storybook/addons": "^7.6.17",
-    "@storybook/react": "^8.3.6",
-    "@storybook/react-webpack5": "^8.3.6",
-    "@testing-library/jest-dom": "^6.6.2",
-    "@testing-library/react": "^16.0.1",
-    "@testing-library/user-event": "^14.5.2",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-webpack5": "^8.6.12",
+    "@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/classnames": "^2.3.4",
     "@types/credit-card-type": "^9.0.3",
     "@types/jest": "^29.5.14",
     "@types/ramda": "^0.30.2",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@types/react-input-mask": "^3.0.5",
-    "@typescript-eslint/eslint-plugin": "^8.11.0",
-    "@typescript-eslint/parser": "^8.11.0",
-    "autoprefixer": "^10.4.20",
-    "babel-loader": "^9.2.1",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@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",
+    "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.13.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint": "^9.24.0",
+    "eslint-config-prettier": "^10.1.2",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jest-dom": "^5.4.0",
-    "eslint-plugin-jsx-a11y": "^6.10.1",
+    "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.1",
-    "eslint-plugin-promise": "^7.1.0",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-prettier": "^5.2.6",
+    "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": "^6.4.0",
-    "globals": "^15.11.0",
-    "husky": "^9.1.6",
+    "eslint-plugin-testing-library": "^7.1.1",
+    "globals": "^16.0.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-matchmedia-mock": "^1.1.0",
-    "lint-staged": "^15.2.10",
+    "lint-staged": "^15.5.1",
     "node-sass-package-importer": "^5.3.3",
     "pinst": "^3.0.0",
-    "postcss": "^8.4.47",
+    "postcss": "^8.5.3",
     "postcss-loader": "^8.1.1",
-    "prettier": "^3.3.3",
+    "prettier": "^3.5.3",
     "ramda": "^0.30.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "rollup": "^4.24.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^5.1.2",
+    "rollup": "^4.40.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-scss": "^4.0.0",
-    "sass": "^1.80.4",
-    "sass-loader": "^16.0.2",
-    "semantic-release": "^24.1.3",
+    "rollup-plugin-scss": "^4.0.1",
+    "sass": "^1.86.3",
+    "sass-loader": "^16.0.5",
+    "semantic-release": "^24.2.3",
     "semantic-release-npm-github": "^5.0.0",
-    "storybook-states": "^1.2.0",
     "style-loader": "^4.0.0",
-    "ts-jest": "^29.2.5",
-    "typescript": "^5.6.3",
-    "typescript-eslint": "^8.11.0",
+    "ts-jest": "^29.3.2",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.30.1",
     "waait": "^1.0.5",
-    "webpack": "^5.95.0",
-    "webpack-cli": "^5.1.4"
+    "webpack": "^5.99.5",
+    "webpack-cli": "^6.0.1"
+  },
+  "overrides": {
+    "@types/react": "^19.1.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "config": {
     "commitizen": {

package/src/components/AspectRatioBox/AspectRatioBox.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { States } from 'storybook-states';
 
+import { States } from '../../utilities';
 import { AspectRatioBox, AspectRatioBoxProps } from './AspectRatioBox';
 
 export default { title: 'Components/AspectRatioBox' };

package/src/components/Badge/Badge.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { States } from 'storybook-states';
 
+import { States } from '../../utilities';
 import { Badge } from './Badge';
 
 export default { title: 'Components/Badge' };

package/src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { States } from 'storybook-states';
 
+import { States } from '../../utilities';
 import { Breadcrumbs, Breadcrumb, BreadcrumbsProps } from './index';
 
 export default { title: 'Components/Breadcrumbs' };

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,4 +1,4 @@
-import React, { Children, cloneElement, isValidElement } from 'react';
+import React, { Children, cloneElement, isValidElement, ReactNode } from 'react';
 import classNames from 'classnames';
 
 import './Breadcrumbs.scss';
@@ -16,7 +16,7 @@ export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ children, className, .
       {...rest}
     >
       {Children.map(children, (child, index) => {
-        if (isValidElement(child)) {
+        if (isValidElement<{ children?: ReactNode; position: number }>(child)) {
           position = position + 1;
           return cloneElement(
             child,

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

@@ -49,12 +49,9 @@ const Watcher: React.FC<{ from: string }> = ({ from }) => {
     console.log('<Watcher /> mounted', { from });
   }, [from]);
 
-  return (
-    <>
-      {console.log('<Watcher /> rendered', { from })}
-      <div>View console</div>
-    </>
-  );
+  console.log('<Watcher /> rendered', { from });
+
+  return <div>View console</div>;
 };
 
 export const Values = () => (

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

@@ -1,8 +1,9 @@
 import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
 import { action } from '@storybook/addon-actions';
-import { States } from 'storybook-states';
-
 import Heart from '@moda/icons/favorite-outline-16';
+
+import { States } from '../../utilities';
 import { Stack } from '../Stack';
 import { Button, ButtonProps } from './Button';
 
@@ -63,11 +64,13 @@ export const PrimaryWithHref = () => (
 );
 
 export const PrimaryAsReactRouterLink = () => (
-  <States<ButtonProps> states={[{}, { hover: true }, { focus: true }, { disabled: true }]}>
-    <Button to='#href' onClick={action('clicked')}>
-      Add to Cart
-    </Button>
-  </States>
+  <BrowserRouter>
+    <States<ButtonProps> states={[{}, { hover: true }, { focus: true }, { disabled: true }]}>
+      <Button to='#href' onClick={action('clicked')}>
+        Add to Cart
+      </Button>
+    </States>
+  </BrowserRouter>
 );
 
 export const PrimaryWithIcon = () => (

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import { States } from 'storybook-states';
 
+import { States } from '../../utilities';
 import { Text } from '../Text';
 import { Stack } from '../Stack';
 import { RadioButton } from '../RadioButton';

package/src/components/Checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, JSX } from 'react';
 import classNames from 'classnames';
 import CheckmarkIcon from '@moda/icons/checkmark-16';
 import CircleIcon from '@moda/icons/circle-12';

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { States } from 'storybook-states';
+import { BrowserRouter } from 'react-router-dom';
+import { States } from '../../utilities';
 import { Clickable, ClickableProps } from './Clickable';
 
 export default { title: 'Components/Clickable' };
@@ -20,7 +21,9 @@ export const Anchor = () => (
 );
 
 export const Link = () => (
-  <States<ClickableProps>>
-    <Clickable to='#href'>Useful to extend in place of &lt;Link/&gt;. Click me.</Clickable>
-  </States>
+  <BrowserRouter>
+    <States<ClickableProps>>
+      <Clickable to='#href'>Useful to extend in place of &lt;Link/&gt;. Click me.</Clickable>
+    </States>
+  </BrowserRouter>
 );

package/src/components/Clickable/Clickable.tsx

@@ -1,6 +1,6 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import classNames from 'classnames';
-import Link, { LinkProps as NextLinkProps } from 'next/link';
+import { Link, LinkProps } from 'react-router-dom';
 
 import './Clickable.scss';
 
@@ -12,8 +12,6 @@ export type ClickableProps = {
   styleless?: boolean;
 } & (ButtonElProps | AnchorElProps | LinkProps);
 
-type LinkProps = NextLinkProps & { to: string; className?: string; children?: ReactNode };
-
 const isLink = (props: ButtonElProps | AnchorElProps | LinkProps): props is LinkProps =>
   'to' in props;
 const isAnchor = (props: ButtonElProps | AnchorElProps | LinkProps): props is AnchorElProps =>
@@ -32,8 +30,7 @@ export const Clickable = React.forwardRef(
       disabled
     };
 
-    if (isLink(props))
-      return <Link {...props} href={props.to} ref={ref as React.Ref<HTMLAnchorElement>} />;
+    if (isLink(props)) return <Link {...props} ref={ref as React.Ref<HTMLAnchorElement>} />;
     if (isAnchor(props)) return <a {...props} ref={ref as React.Ref<HTMLAnchorElement>} />;
     if (isButton(props)) return <button {...props} ref={ref as React.Ref<HTMLButtonElement>} />;
 

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

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

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { States } from 'storybook-states';
+import { BrowserRouter } from 'react-router-dom';
+import { States } from '../../utilities';
 import { ControlLink, ControlLinkProps } from './ControlLink';
 
 export default { title: 'Components/ControlLink' };
@@ -14,13 +15,17 @@ const states = [
 ];
 
 export const Underlined = () => (
-  <States<ControlLinkProps> states={states}>
-    <ControlLink>Underlined Control Link</ControlLink>
-  </States>
+  <BrowserRouter>
+    <States<ControlLinkProps> states={states}>
+      <ControlLink>Underlined Control Link</ControlLink>
+    </States>
+  </BrowserRouter>
 );
 
 export const Blank = () => (
-  <States<ControlLinkProps> states={states}>
-    <ControlLink underlined={false}>Blank Control Link</ControlLink>
-  </States>
+  <BrowserRouter>
+    <States<ControlLinkProps> states={states}>
+      <ControlLink underlined={false}>Blank Control Link</ControlLink>
+    </States>
+  </BrowserRouter>
 );

package/src/components/CreditCardNumberInput/CreditCardNumberInput.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { CreditCardNumberInput, CreditCardNumberInputProps } from './CreditCardNumberInput';
 
 export default { title: 'Components/CreditCardNumberInput' };

package/src/components/CreditCardNumberInput/CreditCardNumberInput.test.tsx

@@ -10,8 +10,7 @@ describe('credit card number input', () => {
     expect(input).toBeInTheDocument();
   });
 
-  // TODO: userEvent.type does not work here for some reason
-  xit('does not allow non-numeric characters', async () => {
+  it('does not allow non-numeric characters', async () => {
     render(<CreditCardNumberInput label='Card Number' />);
     const input = screen.getByLabelText('Card Number') as HTMLInputElement;
 
@@ -20,8 +19,7 @@ describe('credit card number input', () => {
     expect(input.value).toBe('1234 ____ ____ ____');
   });
 
-  // TODO: userEvent.type does not work here for some reason
-  xit('puts spaces between the numbers', async () => {
+  it('puts spaces between the numbers', async () => {
     render(<CreditCardNumberInput label='Card Number' />);
     const input = screen.getByLabelText('Card Number') as HTMLInputElement;
 
@@ -30,8 +28,7 @@ describe('credit card number input', () => {
     expect(input.value).toBe('5510 0000 0000 0000');
   });
 
-  // TODO: userEvent.type does not work here for some reason
-  xit('does not allow more characters than required', async () => {
+  it('does not allow more characters than required', async () => {
     render(<CreditCardNumberInput label='Card Number' />);
     const input = screen.getByLabelText('Card Number') as HTMLInputElement;
 

package/src/components/CreditCardNumberInput/CreditCardNumberInput.tsx

@@ -1,11 +1,9 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import InputMask, { Props as InputMaskProps } from 'react-input-mask';
+import InputMask from '@mona-health/react-input-mask';
+import { Props as InputMaskProps } from 'react-input-mask';
 import creditCardType from 'credit-card-type';
 import { FieldProps } from '../Field';
-import {
-  CreditCardNumberInputField,
-  CreditCardNumberInputFieldProps
-} from './CreditCardNumberInputField';
+import { CreditCardNumberInputField } from './CreditCardNumberInputField';
 
 export type CreditCardNumberInputProps = Omit<
   InputMaskProps & FieldProps,
@@ -61,16 +59,10 @@ export const CreditCardNumberInput: React.FC<CreditCardNumberInputProps> = ({
     [setValue, onChange]
   );
 
-  // TODO: get rid of the any, the types of react-input-mask are incorrect here, it should expect a function as a child, but it expects a ReactNode
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const renderInputField: any = (inputProps: CreditCardNumberInputFieldProps) => (
-    <CreditCardNumberInputField {...rest} {...inputProps} />
-  );
-
   return (
     <InputMask
       mask={mask}
-      maskChar={maskChar}
+      maskPlaceholder={maskChar}
       alwaysShowMask={alwaysShowMask}
       disabled={disabled}
       readOnly={readOnly}
@@ -80,7 +72,7 @@ export const CreditCardNumberInput: React.FC<CreditCardNumberInputProps> = ({
       onFocus={onFocus}
       onBlur={onBlur}
     >
-      {renderInputField}
+      <CreditCardNumberInputField {...rest} />
     </InputMask>
   );
 };

package/src/components/DefinitionList/DefinitionList.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { Text } from '../Text';
 import { DefinitionList, DefinitionListProps } from './DefinitionList';
 

package/src/components/Divider/Divider.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { DividerProps } from './Divider';
 import { Divider, NoLineDivider, TwoLineDivider } from './';
 

package/src/components/Expandable/Expandable.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { Stack } from '../Stack';
 import { Expandable, ExpandableProps } from './Expandable';
 

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

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

package/src/components/Field/Field.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import classNames from 'classnames';
 import WarningIcon from '@moda/icons/warning-16';
 import { TextInput, TextInputProps } from '../TextInput';

package/src/components/Label/Label.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { Label, LabelProps } from './Label';
 
 export default { title: 'Components/Label' };

package/src/components/LoadingItemsLavenderBlue/LoadingItems.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import * as LOADINGITEMS from '.';
 
 export default { title: 'Components/Shape' };

package/src/components/LoadingItemsPinkGreen/LoadingItems.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import * as LOADINGITEMS from '.';
 
 export default { title: 'Components/Shape' };

package/src/components/LoadingShapes/LoadingShapes.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { LoadingShapes } from './LoadingShapes';
 
 export default { title: 'Components/LoadingShapes' };

package/src/components/LoadingShapesLavenderBlue/LoadingShapesLavenderBlue.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { LoadingShapesLavenderBlue } from './LoadingShapesLavenderBlue';
 
 export default { title: 'Components/LoadingShapesLavenderBlue' };

package/src/components/LoadingShapesPinkGreen/LoadingShapesPinkGreen.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { LoadingShapesPinkGreen } from './LoadingShapesPinkGreen';
 
 export default { title: 'Components/LoadingShapesPinkGreen' };

package/src/components/NavigationPreventer/NavigationPreventer.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
+import { Prompt, PromptProps } from 'react-router-dom';
 import { usePreventNavigation } from './usePreventNavigation';
 
 interface Props {
-  message?: string;
+  message?: PromptProps['message'];
   enabled: boolean | undefined;
 }
 
 export const NavigationPreventer: React.FC<Props> = ({
-  enabled = false
-  // message = 'Changes that you made may not be saved.'
+  enabled = false,
+  message = 'Changes that you made may not be saved.'
 }) => {
   usePreventNavigation(enabled);
 
-  // TODO: implement this with next.js https://github.com/vercel/next.js/discussions/32231
-  return null;
+  return <Prompt when={enabled} message={message} />;
 };

package/src/components/Overlay/Overlay.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { Button } from '../Button';
 import { Overlay } from './Overlay';
 

package/src/components/PasswordInput/PasswordInput.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { PasswordInput, PasswordInputProps } from './PasswordInput';
 
 export default { title: 'Components/PasswordInput' };

package/src/components/Popover/Popover.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { States } from 'storybook-states';
+import { States } from '../../utilities';
 import { ControlLink } from '..';
 import { Text } from '../Text';
 import { Popover, PopoverProps } from './Popover';