@transferwise/components 46.143.1 → 46.144.1

package/src/prompt/ActionPrompt/ActionPrompt.less

@@ -10,13 +10,17 @@
     object-fit: contain;
   }
 
+  @media (--screen-xs-max) {
+    .wds-action-prompt__action {
+      width: 100%;
+    }
+  }
+
   &--with-two-actions {
     @media (--screen-xs-max) {
-      .wds-prompt__actions-wrapper {
-        .wds-Button {
-          flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
-          min-width: fit-content;
-        }
+      .wds-action-prompt__action {
+        flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+        min-width: fit-content;
       }
     }
   }

package/src/prompt/ActionPrompt/ActionPrompt.story.tsx

@@ -334,7 +334,7 @@ export const Dismissible: Story = {
  * While the component itself will stretch to the full available width, the text container will be
  * capped at `480px` to ensure optimal readability.
  *
- * [Visit wise.design](https://wise.design/components/info-prompt#writing-an-info-prompt) for guidance on writing effective prompt messages that are concise and easy to understand.
+ * [Visit wise.design](https://docs.wise.design/components/info-prompt#writing-an-info-prompt) for guidance on writing effective prompt messages that are concise and easy to understand.
  */
 export const ParagraphWidth: Story = {
   parameters: {

package/src/prompt/ActionPrompt/ActionPrompt.test.tsx

@@ -1,5 +1,4 @@
 import { userEvent } from '@testing-library/user-event';
-import { Breakpoint } from '@transferwise/neptune-tokens';
 import { mockMatchMedia, render, screen } from '../../test-utils';
 import { ActionPrompt, ActionPromptProps } from './ActionPrompt';
 
@@ -221,62 +220,4 @@ describe('ActionPrompt', () => {
       expect(screen.getByTestId('prompt')).not.toHaveClass('wds-action-prompt--with-two-actions');
     });
   });
-
-  describe('Responsive behavior', () => {
-    it('renders buttons as block on mobile', () => {
-      const mockMatchMediaFn = window.matchMedia as jest.Mock;
-      mockMatchMediaFn.mockImplementation((query: string) => ({
-        matches: query !== `(min-width: ${Breakpoint.SMALL}px)`,
-        media: query,
-        onchange: null,
-        addListener: jest.fn(),
-        removeListener: jest.fn(),
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        dispatchEvent: jest.fn(),
-      }));
-
-      render(
-        <ActionPrompt
-          {...defaultProps}
-          actionSecondary={{ label: 'Secondary', onClick: jest.fn() }}
-        />,
-      );
-
-      expect(screen.getByRole('button', { name: 'Primary Action' })).toHaveClass(
-        'wds-Button--block',
-      );
-      expect(screen.getByRole('button', { name: 'Secondary' })).toHaveClass(
-        'wds-Button--block'
-      );
-    });
-
-    it('renders buttons as inline on desktop', () => {
-      const mockMatchMediaFn = window.matchMedia as jest.Mock;
-      mockMatchMediaFn.mockImplementation((query: string) => ({
-        matches: query === `(min-width: ${Breakpoint.SMALL}px)`,
-        media: query,
-        onchange: null,
-        addListener: jest.fn(),
-        removeListener: jest.fn(),
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        dispatchEvent: jest.fn(),
-      }));
-
-      render(
-        <ActionPrompt
-          {...defaultProps}
-          actionSecondary={{ label: 'Secondary', onClick: jest.fn() }}
-        />,
-      );
-
-      expect(screen.getByRole('button', { name: 'Primary Action' })).not.toHaveClass(
-        'wds-Button--block',
-      );
-      expect(screen.getByRole('button', { name: 'Secondary' })).not.toHaveClass(
-        'wds-Button--block',
-      );
-    });
-  });
 });

package/src/prompt/ActionPrompt/ActionPrompt.tsx

@@ -1,5 +1,4 @@
 import { AriaAttributes, ReactNode, useId } from 'react';
-import { Breakpoint } from '@transferwise/neptune-tokens';
 import { clsx } from 'clsx';
 
 import Body from '../../body';
@@ -7,7 +6,6 @@ import Button from '../../button';
 import { Typography } from '../../common';
 import { ButtonProps } from '../../button/Button.types';
 import { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';
-import { useScreenSize } from '../../common/hooks/useScreenSize';
 import { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';
 
 export type ActionPromptProps = {
@@ -35,7 +33,7 @@ export type ActionPromptProps = {
  *
  * If your message is about immediate user feedback (e.g., form submission errors, download failures, missing data warnings), use an [info prompt](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) instead.
  *
- * Guidance can be found in the [design system](https://wise.design/components/action-prompt).
+ * Guidance can be found in the [design system](https://docs.wise.design/components/action-prompt).
  */
 export const ActionPrompt = ({
   sentiment = 'neutral',
@@ -50,8 +48,6 @@ export const ActionPrompt = ({
   'data-testid': testId,
   'aria-label': ariaLabel,
 }: ActionPromptProps) => {
-  const isMobile = !useScreenSize(Breakpoint.SMALL);
-
   const mediaId = useId();
   const titleId = useId();
   const descId = useId();
@@ -87,11 +83,11 @@ export const ActionPrompt = ({
           {actionSecondary && (
             // @ts-expect-error onClick type mismatch
             <Button
+              className="wds-action-prompt__action"
               v2
               size="md"
               priority="secondary"
               href={actionSecondary.href}
-              block={isMobile}
               onClick={actionSecondary?.onClick}
             >
               {actionSecondary.label}
@@ -99,11 +95,11 @@ export const ActionPrompt = ({
           )}
           {/* @ts-expect-error onClick type mismatch */}
           <Button
+            className="wds-action-prompt__action"
             v2
             size="md"
             priority="primary"
             href={action.href}
-            block={isMobile}
             onClick={action.onClick}
           >
             {action.label}

package/src/prompt/CriticalBanner/CriticalBanner.story.tsx

@@ -8,7 +8,7 @@ import { CriticalBanner, type CriticalBannerProps } from './CriticalBanner';
 import { withVariantConfig } from '../../../.storybook/helpers';
 
 /**
- * **Design guidance**: <a href="https://wise.design/components/critical-banner" target="_blank">wise.design/components/critical-banner</a>
+ * **Design guidance**: <a href="https://docs.wise.design/components/critical-banner" target="_blank">wise.design/components/critical-banner</a>
  *
  * Can be controlled or uncontrolled. When `onToggle` is provided, the consumer manages the expanded state via `expanded` and the banner calls `onToggle` when the user clicks the chevron. When `onToggle` is not provided, the banner manages its own expanded state internally and toggles it when the user clicks the chevron.
  */

package/src/prompt/CriticalBanner/CriticalBanner.tsx

@@ -43,7 +43,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 const CriticalBanner = ({
   sentiment = 'negative',

package/src/prompt/InfoPrompt/InfoPrompt.story.tsx

@@ -318,7 +318,7 @@ export const MediaTypes: StoryObj<InfoPromptProps> = {
  * While the component itself will stretch to the full available width, the text container will be
  * capped at `480px` to ensure optimal readability.
  *
- * [Visit wise.design](https://wise.design/components/info-prompt#writing-an-info-prompt) for guidance on writing effective prompt messages that are concise and easy to understand.
+ * [Visit wise.design](https://docs.wise.design/components/info-prompt#writing-an-info-prompt) for guidance on writing effective prompt messages that are concise and easy to understand.
  */
 export const ParagraphWidth: StoryObj<PreviewStoryArgs> = {
   parameters: {

package/src/prompt/InfoPrompt/InfoPrompt.tsx

@@ -71,7 +71,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 const InfoPrompt = ({
   sentiment = 'neutral',

package/src/radioOption/RadioOption.tsx

@@ -21,7 +21,7 @@ export interface RadioOptionProps<T extends string | number = string>
  * @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)
  */
 function RadioOption<T extends string | number = ''>({

package/src/segmentedControl/SegmentedControl.test.tsx

@@ -185,7 +185,7 @@ describe('SegmentedControl', () => {
         ],
       });
     }).toThrow(
-      'SegmentedControl only supports up to 3 segments. Please refer to: https://wise.design/components/segmented-control',
+      'SegmentedControl only supports up to 3 segments. Please refer to: https://docs.wise.design/components/segmented-control',
     );
   });
 

package/src/segmentedControl/SegmentedControl.tsx

@@ -45,7 +45,7 @@ const SegmentedControl = ({
 
   if (segments.length > 3) {
     throw new Error(
-      'SegmentedControl only supports up to 3 segments. Please refer to: https://wise.design/components/segmented-control',
+      'SegmentedControl only supports up to 3 segments. Please refer to: https://docs.wise.design/components/segmented-control',
     );
   }
 

package/src/styles/less/neptune.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:43 GMT
+ * Generated on Wed, 27 May 2026 15:50:09 GMT
  */
 
 :root {
@@ -144,7 +144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal {
@@ -328,7 +328,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -512,7 +512,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -696,7 +696,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-personal--dark {
@@ -880,7 +880,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-platform {
@@ -1064,7 +1064,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1248,7 +1248,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business {
@@ -1433,7 +1433,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business--dark {
@@ -1618,7 +1618,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:10 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1803,7 +1803,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
  */
 
 .np-theme-business--bright-green {

package/src/summary/Summary.tsx

@@ -98,7 +98,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)
  */
 const Summary = ({

package/src/switch/Switch.story.tsx

@@ -8,7 +8,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Label } from '../label';
 
 /**
- * **Design guidance**: <a href="https://wise.design/components/switch" target="_blank">wise.design/components/switch</a>
+ * **Design guidance**: <a href="https://docs.wise.design/components/switch" target="_blank">wise.design/components/switch</a>
  */
 const meta: Meta<typeof Switch> = {
   component: Switch,

package/src/switchOption/SwitchOption.tsx

@@ -31,7 +31,7 @@ const stopPropagation = (event?: MouseEvent<HTMLSpanElement>) => {
  * @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 SwitchOption = ({