@transferwise/components 46.144.0 → 46.144.1

package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts

@@ -32,7 +32,7 @@ export type CriticalBannerProps = {
  * A full-width, non-dismissible banner for critical messages such as account blocks or
  * time-sensitive actions that require immediate user attention.
 
- * @see {@link https://wise.design/components/critical-banner Design Spec}
+ * @see {@link https://docs.wise.design/components/critical-banner Design Spec}
  */
 export declare const CriticalBanner: ({ sentiment, title, description, media, action, actionSecondary, expanded: expandedProp, onToggle, id, className, "data-testid": testId, }: CriticalBannerProps) => import("react").JSX.Element;
 export default CriticalBanner;

package/build/types/prompt/InfoPrompt/InfoPrompt.d.ts

@@ -61,7 +61,7 @@ export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'ar
  *
  * Use this component to replace the deprecated `Alert` component (run codemod to migrate: **`npx \@wise/wds-codemods@latest info-prompt`**).
  *
- * Guidance can be found in the [design system](https://wise.design/components/info-prompt).
+ * Guidance can be found in the [design system](https://docs.wise.design/components/info-prompt).
  */
 export declare const InfoPrompt: ({ sentiment, onDismiss, media, action, title, description, className, "aria-live": ariaLive, "data-testid": dataTestId, ...restProps }: InfoPromptProps) => import("react").JSX.Element;
 //# sourceMappingURL=InfoPrompt.d.ts.map

package/build/types/radioOption/RadioOption.d.ts

@@ -14,7 +14,7 @@ export interface RadioOptionProps<T extends string | number = string> extends Re
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
- * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Design docs](https://docs.wise.design/components/list-item)
  * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
  */
 declare function RadioOption<T extends string | number = ''>({ 'aria-label': ariaLabel, media, title, content, id, name, checked, onChange, complex, disabled, value, showMediaCircle, showMediaAtAllSizes, isContainerAligned, }: RadioOptionProps<T>): import("react").JSX.Element;

package/build/types/summary/Summary.d.ts

@@ -59,7 +59,7 @@ export interface Props {
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
- * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Design docs](https://docs.wise.design/components/list-item)
  * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
  */
 declare const Summary: ({ action, as: Element, className, content, description, help, icon, illustration, info, status, title, }: Props) => import("react").JSX.Element;

package/build/types/switchOption/SwitchOption.d.ts

@@ -17,7 +17,7 @@ export type SwitchOptionProps = {
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
- * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Design docs](https://docs.wise.design/components/list-item)
  * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
  */
 declare const SwitchOption: ({ checked, complex, content, disabled, id, media, onChange, title, showMediaCircle, showMediaAtAllSizes, isContainerAligned, "aria-label": ariaLabel, }: SwitchOptionProps) => import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.144.0",
+  "version": "46.144.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -41,20 +41,20 @@
   "devDependencies": {
     "@babel/core": "^7.29.0",
     "@babel/plugin-transform-runtime": "^7.29.0",
-    "@babel/preset-env": "^7.29.3",
+    "@babel/preset-env": "^7.29.5",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
-    "@formatjs/cli": "^6.14.4",
+    "@formatjs/cli": "^6.16.0",
     "@rollup/plugin-babel": "^7.0.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-a11y": "^10.3.6",
-    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/addon-a11y": "^10.4.0",
+    "@storybook/addon-docs": "^10.4.0",
     "@storybook/addon-mcp": "^0.6.0",
     "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
-    "@storybook/react-webpack5": "^10.3.6",
+    "@storybook/react-webpack5": "^10.4.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -63,7 +63,7 @@
     "@tsconfig/recommended": "^1.0.13",
     "@types/babel__core": "^7.20.5",
     "@types/commonmark": "^0.27.10",
-    "@types/jest": "^30.0.0",
+    "@types/jest": "^29.5.14",
     "@types/lodash": "4.17.24",
     "@types/lodash.clamp": "^4.0.9",
     "@types/lodash.debounce": "^4.0.9",
@@ -73,32 +73,31 @@
     "@monaco-editor/react": "^4.7.0",
     "monaco-editor": "^0.55.1",
     "monaco-editor-webpack-plugin": "^7.1.1",
-    "@wise/art": "^2.30.1",
+    "@wise/art": "^2.30.3",
     "@wise/eslint-config": "^14.2.1",
     "babel-plugin-formatjs": "^10.5.41",
     "eslint": "^9.39.4",
-    "eslint-plugin-storybook": "^10.3.6",
+    "eslint-plugin-storybook": "^10.4.0",
     "gulp": "^5.0.1",
-    "jest": "^30.3.0",
+    "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "jsdom-testing-mocks": "^1.16.0",
     "lodash.times": "^4.3.2",
     "react-intl": "^7.1.14",
     "react-live": "^4.1.8",
-    "rollup": "^4.60.2",
+    "rollup": "^4.60.4",
     "rollup-preserve-directives": "^1.1.3",
-    "storybook": "^10.3.6",
+    "storybook": "^10.4.0",
     "storybook-addon-tag-badges": "^3.1.0",
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@transferwise/neptune-css": "14.28.0",
     "@wise/components-theming": "1.10.2",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",
-    "@wise/art": "^2.30",
+    "@wise/art": "^2.30.3",
     "@wise/components-theming": "^1.10.1",
     "framer-motion": "^12.23.26",
     "react": ">=18",
@@ -112,8 +111,8 @@
     "@react-aria/focus": "^3.22.0",
     "@react-aria/overlays": "^3.32.0",
     "@transferwise/formatting": "^2.14.1",
-    "@transferwise/neptune-tokens": "^8.23.0",
-    "@transferwise/neptune-validation": "^3.3.3",
+    "@transferwise/neptune-tokens": "^8.24.0",
+    "@transferwise/neptune-validation": "^3.3.4",
     "clsx": "^2.1.1",
     "commonmark": "^0.31.2",
     "core-js": "^3.49.0",
@@ -134,18 +133,18 @@
     "dev:translations": "pnpm build:crowdin-source-file",
     "storybook:dev": "storybook dev -p 4477",
     "storybook:build": "storybook build --stats-json",
-    "build:css": "gulp compileLess --dest=src",
     "build": "npm-run-all build:*",
     "build:clean": "rm -rf lib build",
+    "build:css-main": "gulp compileLess --dest=src",
+    "build:css-utils": "npm-run-all build:css-utils:*",
+    "build:css-utils:copy-brand-assets": "cpx 'src/styles/img/**' build/styles/img && cpx 'src/styles/fonts/*' build/styles/fonts",
+    "build:css-utils:compile": "gulp compileLess --src='src/styles/less' --dest=build/styles/css",
+    "build:css-utils:copy-vars": "gulp copyPropsAndVars --src='src/styles/props' --dest='build/styles/props' && gulp copyPropsAndVars --src='src/styles/variables' --dest='build/styles/less'",
     "build:crowdin-source-file": "formatjs extract 'src/**/*.messages.+(js|ts|tsx)' --out-file src/i18n/en.json --format simple && prettier --write src/i18n/*.json",
     "build:js": "rollup --config --sourcemap",
     "build:copy-files": "cpx 'src/**/!(db)/*.{json,svg}' build",
     "build:copy-css": "cpx 'src/main.css' build/ & cpx 'src/**/*.css' build/styles/",
     "build:copy-lang": "cpx 'src/i18n/*.json' build/i18n && cpx 'src/i18n/index.js' build/i18n",
-    "build:neptune-css": "npm-run-all build:neptune-css:*",
-    "build:neptune-css:copy-brand-assets": "cpx 'src/styles/img/**' build/styles/img && cpx 'src/styles/fonts/*' build/styles/fonts",
-    "build:neptune-css:compile": "gulp compileLess --src='src/styles/less' --dest=build/styles/css",
-    "build:neptune-css:copy-vars": "gulp copyPropsAndVars --src='src/styles/props' --dest='build/styles/props' && gulp copyPropsAndVars --src='src/styles/variables' --dest='build/styles/less'",
     "docs": "pnpm build",
     "test": "TZ=UTC jest",
     "test:watch": "TZ=UTC jest --watch",

package/src/actionButton/ActionButton.story.tsx

@@ -7,7 +7,7 @@ import { withVariantConfig } from '../../.storybook/helpers';
 /**
  * This component is deprecated please use new [Button](?path=/docs/actions-button--docs).
  *
- * For more details please refer to the [release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3542158737/Button+Updates+New+sizes+Loader+and+Cue) and the [design spec](https://wise.design/components/button).
+ * For more details please refer to the [release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3542158737/Button+Updates+New+sizes+Loader+and+Cue) and the [design spec](https://docs.wise.design/components/button).
  */
 export default {
   component: ActionButton,

package/src/actionOption/ActionOption.tsx

@@ -40,7 +40,7 @@ export type ActionOptionProps = {
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
- * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Design docs](https://docs.wise.design/components/list-item)
  * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
  */
 const ActionOption = ({

package/src/button/_stories/Button.accessibility.docs.mdx

@@ -12,7 +12,7 @@ Given the `Button` is a widely used and highly sensitive component, there are so
 <ListItem
   title="Design guidance"
   subtitle="Before you start, familiarise yourself with the dedicated accessibility documentation."
-  control={<ListItem.Navigation href="https://wise.design/components/button#accessibility" />}
+  control={<ListItem.Navigation href="https://docs.wise.design/components/button#accessibility" />}
   media={
     <ListItem.AvatarView>
       <Bulb />

package/src/button/_stories/Button.story.tsx

@@ -149,7 +149,7 @@ const getPropsForPreview = (args: PreviewStoryArgs) => {
 };
 
 /**
- * The stories below document the new Button API, which requires `v2` prop to function.  <br />For more details please refer to the [release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3542158737/Button+Updates+New+sizes+Loader+and+Cue) and the [design spec](https://wise.design/components/button). <br />
+ * The stories below document the new Button API, which requires `v2` prop to function.  <br />For more details please refer to the [release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3542158737/Button+Updates+New+sizes+Loader+and+Cue) and the [design spec](https://docs.wise.design/components/button). <br />
  * You can still find the old Button documentation under [Legacy Button](?path=/docs/actions-button-legacy--docs)
  *
  *
@@ -331,7 +331,7 @@ export const Sandbox = createSandboxStory({
 /**
  * There are two different types of button – default and negative – designed to emphasise the nature of the action. <br />
  * **NB:** Sentiment only applies to `primary` and `secondary` priorities. <br />
- * [Design documentation](https://wise.design/components/button#types)
+ * [Design documentation](https://docs.wise.design/components/button#types)
  */
 export const Sentiment: StoryObj<PreviewStoryArgs> = {
   render: function Render(args: PreviewStoryArgs) {
@@ -377,7 +377,7 @@ export const Sentiment: StoryObj<PreviewStoryArgs> = {
 /**
  * Priorities set a visual hierarchy amongst the buttons displayed on the
  * screen to help more important buttons to take precedence over others. <br />
- * [Design documentation](https://wise.design/components/button#priorities)
+ * [Design documentation](https://docs.wise.design/components/button#priorities)
  */
 export const Priority: StoryObj<PreviewStoryArgs> = {
   render: function Render(args: PreviewStoryArgs) {
@@ -413,7 +413,7 @@ export const Priority: StoryObj<PreviewStoryArgs> = {
 
 /**
  * There are three different button sizes – small (`sm`), medium (`md`) and large (`lg`) – each used for different purposes. <br />
- * [Design documentation](https://wise.design/components/button#sizes)
+ * [Design documentation](https://docs.wise.design/components/button#sizes)
  */
 export const Size: StoryObj<PreviewStoryArgs> = {
   render: function Render(args: PreviewStoryArgs) {
@@ -536,7 +536,7 @@ export const DisplayBlock: StoryObj<PreviewStoryArgs> = {
 
 /**
  * Icons are only supported for `sm` and `md` size Buttons. <br />
- * [Design documentation](https://wise.design/components/button#accessories)
+ * [Design documentation](https://docs.wise.design/components/button#accessories)
  */
 export const WithIcons: StoryObj<PreviewStoryArgs> = {
   render: function Render(args: PreviewStoryArgs) {
@@ -595,7 +595,7 @@ export const WithIcons: StoryObj<PreviewStoryArgs> = {
 
 /**
  * Avatars are only supported by the `md` size Buttons and are only allowed before the label. <br />
- * [Design documentation](https://wise.design/components/button#accessories)
+ * [Design documentation](https://docs.wise.design/components/button#accessories)
  */
 export const WithAvatars: StoryObj<PreviewStoryArgs> = {
   render: function Render(args: PreviewStoryArgs) {

package/src/checkboxButton/CheckboxButton.story.tsx

@@ -9,7 +9,7 @@ import { Label } from '../label/Label';
 /**
  * Use <a href="?path=/docs/forms-checkbox--docs">Checkbox</a> component instead when pairing with a label. Only use CheckboxButton when you need a standalone checkbox (e.g. settings matrix) and provide an `aria-label`.
  *
- * **Design guidance**: <a href="https://wise.design/components/checkbox" target="_blank">wise.design/components/checkbox</a>
+ * **Design guidance**: <a href="https://docs.wise.design/components/checkbox" target="_blank">wise.design/components/checkbox</a>
  */
 export default {
   component: CheckboxButton,

package/src/checkboxOption/CheckboxOption.tsx

@@ -20,7 +20,7 @@ export type CheckboxOptionProps = Omit<BaseOptionProps, 'onChange'> & {
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
- * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Design docs](https://docs.wise.design/components/list-item)
  * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
  */
 const CheckboxOption = forwardRef<ReferenceType, CheckboxOptionProps>(

package/src/chips/Chips.story.tsx

@@ -8,7 +8,7 @@ import { storySourceWithoutNoise } from '../../.storybook/helpers';
 /**
  * Can be used for making a <a href="?path=/story/actions-chips--choice">choice</a>, or as a <a href="?path=/story/actions-chips--filter">filter</a> with multiple options.
  *
- * **Design guidance**: <a href="https://wise.design/components/chip" target="_blank">wise.design/components/chip</a>
+ * **Design guidance**: <a href="https://docs.wise.design/components/chip" target="_blank">wise.design/components/chip</a>
  */
 export default {
   component: Chips,
@@ -93,7 +93,7 @@ export const Playground: Story = storySourceWithoutNoise<typeof Chips>({
 
 /**
  * The user can select any number of chips with the selected prop as an array (`multiple` prop set to `true`). <br />
- * <a href="https://wise.design/components/chip#filter-chips" target="_blank">Design documentation</a>
+ * <a href="https://docs.wise.design/components/chip#filter-chips" target="_blank">Design documentation</a>
  */
 export const Filter: Story = storySourceWithoutNoise<typeof Chips>({
   args: {
@@ -124,7 +124,7 @@ export const Filter: Story = storySourceWithoutNoise<typeof Chips>({
 
 /**
  * The user can only select one chip with the selected prop as a single value (`multiple` prop set to `false`). <br />
- * <a href="https://wise.design/components/chip#choice-chips" target="_blank">Design documentation</a>
+ * <a href="https://docs.wise.design/components/chip#choice-chips" target="_blank">Design documentation</a>
  */
 export const Choice: Story = storySourceWithoutNoise<typeof Chips>({
   args: {

package/src/circularButton/CircularButton.story.tsx

@@ -9,7 +9,7 @@ import SentimentSurface from '../sentimentSurface';
 /**
  * An <a href="?path=/docs/actions-iconbutton--docs">IconButton</a> with a text label below it.
  *
- * **Design guidance**: <a href="https://wise.design/components/circular-button" target="_blank">wise.design/components/circular-button</a>
+ * **Design guidance**: <a href="https://docs.wise.design/components/circular-button" target="_blank">wise.design/components/circular-button</a>
  */
 export default {
   component: CircularButton,
@@ -45,7 +45,7 @@ export const Playground: Story = {};
 /**
  * Priorities set a visual hierarchy amongst the buttons displayed on the
  * screen to help more important buttons to take precedence over others. <br />
- * [Design documentation](https://wise.design/components/circular-button#priority)
+ * [Design documentation](https://docs.wise.design/components/circular-button#priority)
  */
 export const Priority: Story = {
   args: {
@@ -83,7 +83,7 @@ export const Priority: Story = {
 
 /**
  * There are two different types of button – default and negative – designed to emphasise the nature of the action. <br />
- * [Design documentation](https://wise.design/components/circular-button#types)
+ * [Design documentation](https://docs.wise.design/components/circular-button#types)
  */
 export const Type: Story = {
   args: {
@@ -163,7 +163,7 @@ export const Disabled: Story = {
 /**
  * `CircularButton` is sentiment-aware and will automatically adjust its colours if wrapped inside
  * the <a href="?path=/docs/foundations-sentimentsurface--docs">SentimentSurface</a> component. <br />
- * [Design documentation](https://wise.design/components/circular-button)
+ * [Design documentation](https://docs.wise.design/components/circular-button)
  */
 export const SentimentAwareness: Story = {
   render: () => {

package/src/container/Container.tsx

@@ -17,7 +17,7 @@ export type ContainerProps<T extends ElementType = 'div'> = PropsWithChildren<
 /**
  * Centers page content within a responsive max-width boundary, with automatic horizontal padding that adapts to the viewport size.
  *
- * **Design guidance**: <a href="https://wise.design/foundations/grid" target="_blank">wise.design/foundations/grid</a>
+ * **Design guidance**: <a href="https://docs.wise.design/foundations/grid" target="_blank">wise.design/foundations/grid</a>
  */
 const Container = <T extends ElementType = 'div'>({
   size = 'standard',

package/src/divider/Divider.story.tsx

@@ -24,7 +24,7 @@ const hideControls = (args: string[]) => {
  * The stories below document the `<Divider />` component, which can be rendered as either a semantic `<hr>` or a non-semantic `<div>`.
  * levels allow customization for different visual separation needs.
  *
- * For more details, please refer to the [design documentation](https://wise.design/components/divider).
+ * For more details, please refer to the [design documentation](https://docs.wise.design/components/divider).
  */
 const meta: Meta<typeof Divider> = {
   component: Divider,
@@ -89,7 +89,7 @@ export const Playground: Story = {
 /**
  * There are three different types of divider – `section`, `subsection`, and `content` –
  * each designed to visually separate or group content. <br />
- * [Design documentation](https://wise.design/components/divider)
+ * [Design documentation](https://docs.wise.design/components/divider)
  */
 export const Level: Story = {
   argTypes: {

package/src/header/Header.accessibility.docs.mdx

@@ -12,7 +12,7 @@ Given the `Header` is a key component for structuring content and conveying hier
 <ListItem
   title="Design guidance"
   subtitle="Before you start, familiarise yourself with the provided guidance."
-  control={<ListItem.Navigation href="https://wise.design/components/section-header" />}
+  control={<ListItem.Navigation href="https://docs.wise.design/components/section-header" />}
   media={
     <ListItem.AvatarView>
       <Bulb />

package/src/header/Header.story.tsx

@@ -15,7 +15,7 @@ const hideControls = (args: string[]) =>
 
 /**
  * The stories below document the `Header` component, which is used to structure content and convey hierarchy. <br />
- * For more details, refer to the [design documentation](https://wise.design/components/section-header).
+ * For more details, refer to the [design documentation](https://docs.wise.design/components/section-header).
  */
 const meta: Meta<typeof Header> = {
   component: Header,

package/src/iconButton/IconButton.story.tsx

@@ -17,7 +17,7 @@ import IconButton, { Props } from './IconButton';
 import SentimentSurface from '../sentimentSurface';
 
 /**
- * **Design guidance**: <a href="https://wise.design/components/icon-button" target="_blank">wise.design/components/icon-button</a>
+ * **Design guidance**: <a href="https://docs.wise.design/components/icon-button" target="_blank">wise.design/components/icon-button</a>
  */
 export default {
   title: 'Actions/IconButton',
@@ -64,7 +64,7 @@ export const Playground: Story = {
 /**
  * Priorities set a visual hierarchy amongst the buttons displayed on the
  * screen to help more important buttons to take precedence over others. <br />
- * <a href="https://wise.design/components/icon-button#priorities" target="_blank">Design documentation</a>
+ * <a href="https://docs.wise.design/components/icon-button#priorities" target="_blank">Design documentation</a>
  */
 export const Priority: Story = {
   args: {
@@ -109,7 +109,7 @@ export const Priority: Story = {
 
 /**
  * There are two different types of button – default and negative – designed to emphasise the nature of the action. <br />
- * <a href="https://wise.design/components/icon-button#types" target="_blank">Design documentation</a>
+ * <a href="https://docs.wise.design/components/icon-button#types" target="_blank">Design documentation</a>
  */
 export const Type: Story = {
   args: {
@@ -148,7 +148,7 @@ export const Type: Story = {
 
 /**
  * IconButton is available in 7 sizes: 16, 24, 32, 40, 48, 56, 72. <br />
- * <a href="https://wise.design/components/icon-button#sizes" target="_blank">Design documentation</a>
+ * <a href="https://docs.wise.design/components/icon-button#sizes" target="_blank">Design documentation</a>
  */
 export const Size: Story = {
   args: {

package/src/legacylistItem/LegacyListItem.tsx

@@ -18,7 +18,7 @@ export type LegacyListItemProps = {
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
- * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Design docs](https://docs.wise.design/components/list-item)
  * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
  */
 const LegacyListItem: FC<LegacyListItemProps> = ({

package/src/listItem/AdditionalInfo/ListItemAdditionalInfo.story.tsx

@@ -14,7 +14,7 @@ import type { ListItemAdditionalInfoProps } from './ListItemAdditionalInfo';
 /**
  * Use additional information to add extra details that help make the information clearer for users. Use additional information only after you've used the subtitle.
  *
- * Refer to the [design documentation](https://wise.design/components/list-item#content:~:text=StatusIcon.iconLabel.error-,Additional%20information,-Use%20additional%20information) for more details.
+ * Refer to the [design documentation](https://docs.wise.design/components/list-item#content:~:text=StatusIcon.iconLabel.error-,Additional%20information,-Use%20additional%20information) for more details.
  */
 export default {
   component: ListItem.AdditionalInfo,

package/src/listItem/AvatarLayout/ListItemAvatarLayout.story.tsx

@@ -58,7 +58,7 @@ export const Playground: Story = {
 
 /**
  * AvatarLayout supports two orientations: horizontal (default) and diagonal. <br />
- * Please refer to the [design documentation](https://wise.design/components/avatar#double) for more details.
+ * Please refer to the [design documentation](https://docs.wise.design/components/avatar#double) for more details.
  */
 export const Orientations: Story = {
   argTypes: disableControls()(['orientation']),

package/src/listItem/AvatarLayout/ListItemAvatarLayout.tsx

@@ -12,7 +12,7 @@ export type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'intera
  * [AvatarLayout component](https://storybook.wise.design/?path=/docs/content-avatarlayout--docs), but offers only
  * a subset of its sizes, and disallows interactive mode, in line with the ListItem's constraints. <br />
  * <br />
- * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.
+ * Please refer to the [Design documentation](https://docs.wise.design/components/list-item#avatar) for details.
  */
 export const AvatarLayout = ({ className, size = 48, ...props }: ListItemAvatarLayoutProps) => {
   useListItemMedia(size);

package/src/listItem/AvatarView/ListItemAvatarView.story.tsx

@@ -134,7 +134,7 @@ export const Playground: Story = {
 
 /**
  * AvatarView can display different types of content including icons, profile images, and initials. <br />
- * Refer to the [design documentation](https://wise.design/components/avatar#:~:text=56%2C%20%E2%80%A8and%2072.-,Media,-There%20are%204) for details.
+ * Refer to the [design documentation](https://docs.wise.design/components/avatar#:~:text=56%2C%20%E2%80%A8and%2072.-,Media,-There%20are%204) for details.
  */
 export const ContentTypes: Story = {
   args: {
@@ -208,7 +208,7 @@ export const ContentTypes: Story = {
 
 /**
  * AvatarView supports 6 sizes to fit different list item contexts: `24`, `32`, `40`, `48`, `56`, `72`. If decorated with a Badge, those will be sized accordingly as well. <br />
- * Please refer to the [design documentation](https://wise.design/components/list-item#avatar:~:text=of%20the%20avatar.-,Avatar%20sizes,-List%20item%20supports) for details on when to use which one.
+ * Please refer to the [design documentation](https://docs.wise.design/components/list-item#avatar:~:text=of%20the%20avatar.-,Avatar%20sizes,-List%20item%20supports) for details on when to use which one.
  */
 export const Sizes: Story = {
   parameters: {
@@ -242,7 +242,7 @@ export const Sizes: Story = {
 
 /**
  * AvatarView supports different types of badges for additional context and information. <br />
- * Refer to the [design documentation](https://wise.design/components/avatar#:~:text=support%20the%20information.-,With%20badge,-Badges%20contain%20additional) for details.
+ * Refer to the [design documentation](https://docs.wise.design/components/avatar#:~:text=support%20the%20information.-,With%20badge,-Badges%20contain%20additional) for details.
  */
 export const Badges: Story = {
   args: {

package/src/listItem/AvatarView/ListItemAvatarView.tsx

@@ -12,7 +12,7 @@ export type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactiv
  * [AvatarView component](https://storybook.wise.design/?path=/docs/content-avatarview--docs), but offers only
  * a subset of its sizes, in line with the ListItem's constraints. <br />
  * <br />
- * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.
+ * Please refer to the [Design documentation](https://docs.wise.design/components/list-item#avatar) for details.
  */
 export const AvatarView = ({ className, size = 48, ...props }: ListItemAvatarViewProps) => {
   useListItemMedia(size);

package/src/listItem/Button/ListItemButton.story.tsx

@@ -184,7 +184,7 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
  * If you still require a fully interactive ListItem, you can alternatively use `ListItem.Prompt`
  * which allows for a single instance of a link or an inline button.
  *
- * Refer to the [design documentation](https://wise.design/components/list-item#interaction) for details.
+ * Refer to the [design documentation](https://docs.wise.design/components/list-item#interaction) for details.
  */
 export const Interactivity: StoryObj<PreviewStoryArgs> = {
   args: {
@@ -253,7 +253,7 @@ export const AsAnchor: StoryObj<PreviewStoryArgs> = {
 /**
  * There are two different types of button – default and negative – designed to emphasise the nature of the action. <br />
  * **NB:** Sentiment only applies to `primary` and `secondary` priorities. <br />
- * [Design documentation](https://wise.design/components/button#types)
+ * [Design documentation](https://docs.wise.design/components/button#types)
  */
 export const Sentiment: StoryObj<PreviewStoryArgs> = {
   args: {
@@ -318,7 +318,7 @@ export const Sentiment: StoryObj<PreviewStoryArgs> = {
 /**
  * Priorities set a visual hierarchy amongst the buttons displayed on the
  * screen to help more important buttons to take precedence over others. <br />
- * [Design documentation](https://wise.design/components/button#priorities)
+ * [Design documentation](https://docs.wise.design/components/button#priorities)
  */
 export const Priority: StoryObj<PreviewStoryArgs> = {
   args: {

package/src/listItem/Button/ListItemButton.tsx

@@ -22,7 +22,7 @@ export type ListItemButtonProps = Omit<
  * [Button component](https://storybook.wise.design/?path=/docs/content-button--docs), but offers only
  * a subset of its features in line with the ListItem's constraints. <br />
  * <br />
- * Please refer to the [Design documentation](https://wise.design/components/list-item---button) for details.
+ * Please refer to the [Design documentation](https://docs.wise.design/components/list-item---button) for details.
  */
 export const Button = forwardRef<HTMLButtonElement, ListItemButtonProps>(
   (

package/src/listItem/Checkbox/ListItemCheckbox.tsx

@@ -13,7 +13,7 @@ export type ListItemCheckboxProps = Pick<
  * [CheckboxButton component](https://storybook.wise.design/?path=/docs/actions-checkboxbutton--docs),
  * but offers only a subset of its features in line with the ListItem's constraints. <br />
  *
- * Please refer to the [Design documentation](https://wise.design/components/list-item---checkbox) for details.
+ * Please refer to the [Design documentation](https://docs.wise.design/components/list-item---checkbox) for details.
  */
 export const Checkbox = function (props: ListItemCheckboxProps) {
   const { baseItemProps } = useListItemControl('checkbox', { ...props });

package/src/listItem/IconButton/ListItemIconButton.story.tsx

@@ -22,7 +22,7 @@ const hideControls = disableControls([
 /**
  * Use IconButton to provide compact action controls within a ListItem context using iconography.
  *
- * Refer to the [design documentation](https://wise.design/components/list-item) for more details.
+ * Refer to the [design documentation](https://docs.wise.design/components/list-item) for more details.
  */
 const meta: Meta<ListItemIconButtonProps> = {
   component: ListItem.IconButton,
@@ -142,7 +142,7 @@ export const AccessibleName: Story = {
  * If you still require a fully interactive ListItem, you can alternatively use `ListItem.Prompt`
  * which allows for a single instance of a link or an inline button.
  *
- * Refer to the [design documentation](https://wise.design/components/list-item#interaction) for details.
+ * Refer to the [design documentation](https://docs.wise.design/components/list-item#interaction) for details.
  */
 export const Interactivity: Story = {
   args: {
@@ -177,7 +177,7 @@ export const Interactivity: Story = {
 /**
  * There are two different types of icon button – default and negative – designed to emphasise the nature of the action. <br />
  * **NB:** Sentiment only applies to `primary` and `secondary` priorities. <br />
- * [Design documentation](https://wise.design/components/icon-button#types)
+ * [Design documentation](https://docs.wise.design/components/icon-button#types)
  */
 export const Sentiment: Story = {
   argTypes: hideControls(['sentiment', 'priority']),
@@ -216,7 +216,7 @@ export const Sentiment: Story = {
 /**
  * Priorities set a visual hierarchy amongst the buttons displayed on the
  * screen to help more important buttons to take precedence over others. <br />
- * [Design documentation](https://wise.design/components/icon-button#priorities)
+ * [Design documentation](https://docs.wise.design/components/icon-button#priorities)
  */
 export const Priority: Story = {
   argTypes: hideControls(['sentiment', 'priority']),

package/src/listItem/IconButton/ListItemIconButton.tsx

@@ -19,7 +19,7 @@ export type ListItemIconButtonProps = Pick<
  * [IconButton component](https://storybook.wise.design/?path=/docs/actions-iconbutton--docs), but offers only
  * a subset of its features in line with the ListItem's constraints. <br />
  * <br />
- * Please refer to the [Design documentation](https://wise.design/components/list-item---icon-button) for details.
+ * Please refer to the [Design documentation](https://docs.wise.design/components/list-item---icon-button) for details.
  */
 export const IconButton = function ({
   priority = 'minimal',

package/src/listItem/Image/ListItemImage.tsx

@@ -23,7 +23,7 @@ export type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' |
  * [Image component](https://storybook.wise.design/?path=/docs/content-image--docs), but offers only
  * a subset of its props, in line with the ListItem's constraints.
  *
- * > **NB**: This component is [not intended for use with illustrations](https://wise.design/foundations/illustration#scale).
+ * > **NB**: This component is [not intended for use with illustrations](https://docs.wise.design/foundations/illustration#scale).
  */
 export const Image = ({ alt = '', size = 48, className, ...props }: ListItemImageProps) => {
   useListItemMedia(size);

package/src/listItem/ListItem.tsx

@@ -106,7 +106,7 @@ export type ListItemProps = {
 };
 
 /**
- * @see [Design documentation](https://wise.design/components/list-item)
+ * @see [Design documentation](https://docs.wise.design/components/list-item)
  * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)
  */
 export const ListItem = ({