@transferwise/components 0.0.0-experimental-cbe9617 → 0.0.0-experimental-26bc819

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

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { AvatarViewProps } from '../../avatarView';
+import { ButtonProps } from '../../button/Button.types';
+import { PrimitivePromptProps } from '../PrimitivePrompt';
+import { BadgeAssetsProps } from '../../badge';
+export type ActionPromptProps = {
+    title: ReactNode;
+    description?: ReactNode;
+    media?: {
+        imgSrc?: string;
+        avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {
+            asset?: AvatarViewProps['children'];
+            badge?: Pick<BadgeAssetsProps, 'flagCode'>;
+        };
+        'aria-label'?: string;
+    };
+    actionPrimary: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
+        label: ButtonProps['children'];
+    };
+    actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
+        label: ButtonProps['children'];
+    };
+} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;
+export declare const ActionPrompt: ({ sentiment, title, description, onDismiss, media, actionPrimary, actionSecondary, id, className, "data-testid": testId, }: ActionPromptProps) => import("react").JSX.Element;
+export default ActionPrompt;
+//# sourceMappingURL=ActionPrompt.d.ts.map

package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionPrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOlC,OAAmB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAE/D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAI/C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE;QACN,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,aAAa,GAAG,aAAa,CAAC,GAAG;YACzE,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;YACpC,KAAK,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;SAC5C,CAAC;QACF,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QAChE,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,eAAe,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QACnE,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;CACH,GAAG,IAAI,CAAC,oBAAoB,EAAE,IAAI,GAAG,WAAW,GAAG,aAAa,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC;AAE/F,eAAO,MAAM,YAAY,GAAI,4HAW1B,iBAAiB,gCAiFnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/build/types/prompt/ActionPrompt/ActionPrompt.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ActionPrompt.test.d.ts.map

package/build/types/prompt/ActionPrompt/ActionPrompt.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionPrompt.test.d.ts","sourceRoot":"","sources":["../../../../src/prompt/ActionPrompt/ActionPrompt.test.tsx"],"names":[],"mappings":""}

package/build/types/prompt/ActionPrompt/index.d.ts

@@ -0,0 +1,3 @@
+export type { ActionPromptProps } from './ActionPrompt';
+export { ActionPrompt } from './ActionPrompt';
+//# sourceMappingURL=index.d.ts.map

package/build/types/prompt/ActionPrompt/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/prompt/ActionPrompt/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/build/types/prompt/InlinePrompt/InlinePrompt.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=InlinePrompt.test.d.ts.map

package/build/types/prompt/InlinePrompt/InlinePrompt.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlinePrompt.test.d.ts","sourceRoot":"","sources":["../../../../src/prompt/InlinePrompt/InlinePrompt.test.tsx"],"names":[],"mappings":""}

package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimitivePrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"names":[],"mappings":"AAEA,OAAyB,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAIrE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;8GAE8G;AAC9G,eAAO,MAAM,eAAe,GAAI,6EAQ7B,oBAAoB,gCA0BtB,CAAC"}
+{"version":3,"file":"PrimitivePrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"names":[],"mappings":"AAEA,OAAyB,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAIrE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;8GAE8G;AAC9G,eAAO,MAAM,eAAe,GAAI,6EAQ7B,oBAAoB,gCA8BtB,CAAC"}

package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=PrimitivePrompt.test.d.ts.map

package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimitivePrompt.test.d.ts","sourceRoot":"","sources":["../../../../src/prompt/PrimitivePrompt/PrimitivePrompt.test.tsx"],"names":[],"mappings":""}

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

@@ -1,3 +1,5 @@
 export type { InlinePromptProps } from './InlinePrompt';
 export { InlinePrompt } from './InlinePrompt';
+export type { ActionPromptProps } from './ActionPrompt';
+export { ActionPrompt } from './ActionPrompt';
 //# sourceMappingURL=index.d.ts.map

package/build/types/prompt/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/prompt/index.ts"],"names":[],"mappings":"AAIA,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/prompt/index.ts"],"names":[],"mappings":"AAIA,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-cbe9617",
+  "version": "0.0.0-experimental-26bc819",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -56,7 +56,7 @@
     "@storybook/react-webpack5": "10.3.0-alpha.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
+    "@testing-library/react": "^16.3.1",
     "@testing-library/user-event": "^14.6.1",
     "@transferwise/icons": "^4.0.2",
     "@tsconfig/recommended": "^1.0.13",
@@ -78,7 +78,6 @@
     "jest": "^30.2.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.11",
     "rollup": "^4.54.0",
@@ -103,8 +102,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.4",
-    "@floating-ui/react": "^0.27.17",
-    "@headlessui/react": "^2.2.9",
+    "@floating-ui/react": "^0.27.16",
+    "@headlessui/react": "^1.7.19",
     "@popperjs/core": "^2.11.8",
     "@react-aria/focus": "^3.21.3",
     "@react-aria/overlays": "^3.31.0",
@@ -120,7 +119,7 @@
     "merge-props": "^6.0.0",
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
-    "virtua": "^0.48.5"
+    "virtua": "^0.48.3"
   },
   "publishConfig": {
     "access": "public",

package/src/index.ts

@@ -35,7 +35,7 @@ export type { HeaderProps } from './header';
 export type { EmphasisProps } from './emphasis';
 export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';
-export type { InlinePromptProps } from './prompt';
+export type { InlinePromptProps, ActionPromptProps } from './prompt';
 export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
 export type { InputProps } from './inputs/Input';
 export type { InputGroupProps } from './inputs/InputGroup';
@@ -171,7 +171,7 @@ export { default as Header } from './header';
 export { default as Image } from './image';
 export { default as Info } from './info';
 export { default as InlineAlert } from './inlineAlert';
-export { InlinePrompt } from './prompt';
+export { InlinePrompt, ActionPrompt } from './prompt';
 export { default as InputWithDisplayFormat } from './inputWithDisplayFormat';
 export { Input } from './inputs/Input';
 export { InputGroup } from './inputs/InputGroup';

package/src/inputs/SelectInput.spec.tsx

@@ -1,15 +1,19 @@
 import { screen, waitFor, within } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
-import { mockAnimationsApi } from 'jsdom-testing-mocks';
 
-import { render, mockMatchMedia, mockResizeObserver } from '../test-utils';
+import {
+  render,
+  mockMatchMedia,
+  mockResizeObserver,
+  mockRequestAnimationFrame,
+} from '../test-utils';
 
 import { SelectInput, type SelectInputOptionItem, type SelectInputProps } from './SelectInput';
 import { Field } from '../field/Field';
 
 mockMatchMedia();
 mockResizeObserver();
-mockAnimationsApi();
+mockRequestAnimationFrame();
 
 describe('SelectInput', () => {
   it('renders placeholder', () => {
@@ -63,81 +67,6 @@ describe('SelectInput', () => {
     expect(footer).toHaveTextContent(/‘ur’$/);
   });
 
-  it('allows navigating the listbox with cursors', async () => {
-    render(
-      <SelectInput
-        items={[
-          { type: 'option', value: 'GBP' },
-          { type: 'option', value: 'EUR' },
-          { type: 'option', value: 'USD' },
-        ]}
-        renderFooter={({ queryNormalized: normalizedQuery }) => (
-          <button type="button">Footer button</button>
-        )}
-        filterable
-      />,
-    );
-
-    // opened the dropbox, with search focused
-    await userEvent.tab();
-    await userEvent.keyboard(' ');
-    expect(screen.getByRole('combobox')).toHaveFocus();
-
-    // search still focused but listbox can be navigated via keyboard
-    await userEvent.keyboard('{ArrowDown}');
-    expect(screen.getByRole('combobox')).toHaveFocus();
-    expect(screen.getByRole('option', { name: 'EUR' })).toHaveClass(
-      'np-select-input-option-container--active',
-    );
-
-    // tab moves focus to listbox
-    await userEvent.tab();
-    expect(screen.getByRole('listbox')).toHaveFocus();
-    expect(screen.getByRole('combobox')).not.toHaveFocus();
-
-    // arrows still navigate within listbox
-    await userEvent.keyboard('{ArrowDown}');
-    expect(screen.getByRole('option', { name: 'USD' })).toHaveClass(
-      'np-select-input-option-container--active',
-    );
-
-    // tab moves focus to footer but highlighted option is retained
-    await userEvent.tab();
-    expect(screen.getByRole('listbox')).not.toHaveFocus();
-    expect(screen.getByRole('combobox')).not.toHaveFocus();
-    expect(screen.getByText('Footer button')).toHaveFocus();
-    expect(screen.getByRole('option', { name: 'USD' })).toHaveClass(
-      'np-select-input-option-container--active',
-    );
-
-    // shift+tab moves focus back to listbox
-    await userEvent.tab({ shift: true });
-    expect(screen.getByRole('listbox')).toHaveFocus();
-    expect(screen.getByRole('combobox')).not.toHaveFocus();
-    expect(screen.getByText('Footer button')).not.toHaveFocus();
-
-    // previously highlighted option is still active within listbox
-    expect(screen.getByRole('option', { name: 'USD' })).toHaveClass(
-      'np-select-input-option-container--active',
-    );
-
-    // arrows continue to navigate within listbox
-    await userEvent.keyboard('{ArrowUp}');
-    expect(screen.getByRole('option', { name: 'EUR' })).toHaveClass(
-      'np-select-input-option-container--active',
-    );
-
-    // shift+tab moves focus back to search input
-    await userEvent.tab({ shift: true });
-    expect(screen.getByRole('combobox')).toHaveFocus();
-
-    // arrows continue to navigate within listbox
-    await userEvent.keyboard('{ArrowUp}');
-    expect(screen.getByRole('option', { name: 'GBP' })).toHaveClass(
-      'np-select-input-option-container--active',
-    );
-  });
-
   it('shows item selected via mouse', async () => {
     const handleClose = jest.fn();
 

package/src/inputs/SelectInput.tsx

@@ -1,9 +1,4 @@
-import {
-  Listbox as ListboxBase,
-  ListboxButton,
-  ListboxOption,
-  ListboxOptions,
-} from '@headlessui/react';
+import { Listbox as ListboxBase } from '@headlessui/react';
 import { Check, ChevronDown, Cross, CrossCircle } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import mergeProps from 'merge-props';
@@ -432,8 +427,8 @@ export function SelectInput<T = string, M extends boolean = false>({
     <ListboxBase
       name={name}
       multiple={multiple}
-      defaultValue={defaultValue as M extends true ? T[] : T}
-      value={controlledValue as M extends true ? T[] : T}
+      defaultValue={defaultValue}
+      value={controlledValue}
       by={compareValues}
       disabled={disabled}
       onChange={
@@ -581,7 +576,7 @@ export function SelectInputTriggerButton<T extends SelectInputTriggerButtonEleme
   );
 
   return (
-    <ListboxButton
+    <ListboxBase.Button
       ref={ref}
       as={PolymorphicWithOverrides}
       role="combobox"
@@ -622,13 +617,8 @@ const SelectInputOptionsContainer = forwardRef(function SelectInputOptionsContai
           return;
         }
 
-        // Required to make ListBox focusable
-        if (event.key === 'Tab') {
-          return;
-        }
-
-        // Prevent absorbing Escape early
-        if (event.key === 'Escape') {
+        // Prevent absorbing actions early
+        if (event.key === 'Escape' || event.key === 'Tab') {
           onKeyDown?.({
             ...event,
             preventDefault: () => {},
@@ -827,8 +817,7 @@ function SelectInputOptions<T = string>({
   };
 
   return (
-    <ListboxOptions
-      modal
+    <ListboxBase.Options
       as={SelectInputOptionsContainer}
       static
       className="np-select-input-options-container"
@@ -985,7 +974,7 @@ function SelectInputOptions<T = string>({
           </footer>
         ) : null}
       </section>
-    </ListboxOptions>
+    </ListboxBase.Options>
   );
 }
 
@@ -1094,7 +1083,7 @@ function SelectInputOption<T = string>({ value, disabled, children }: SelectInpu
   const itemsCount = useContext(SelectInputItemsCountContext);
   const itemPosition = useContext(SelectInputItemPositionContext);
   return (
-    <ListboxOption
+    <ListboxBase.Option
       as="div"
       value={value}
       aria-setsize={itemsCount}
@@ -1120,7 +1109,7 @@ function SelectInputOption<T = string>({ value, disabled, children }: SelectInpu
           />
         </>
       )}
-    </ListboxOption>
+    </ListboxBase.Option>
   );
 }
 

package/src/inputs/_BottomSheet.tsx

@@ -6,7 +6,7 @@ import {
   useInteractions,
   useRole,
 } from '@floating-ui/react';
-import { Transition, TransitionChild } from '@headlessui/react';
+import { Transition } from '@headlessui/react';
 import { FocusScope } from '@react-aria/focus';
 import { ThemeProvider, useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
@@ -73,7 +73,6 @@ export function BottomSheet({
       <FloatingPortal>
         <ThemeProvider theme="personal" screenMode={theme === 'personal' ? screenMode : 'light'}>
           <Transition
-            as="div"
             show={open}
             className="np-bottom-sheet-v2-container"
             beforeEnter={() => {
@@ -81,8 +80,7 @@ export function BottomSheet({
             }}
             afterLeave={onCloseEnd}
           >
-            <TransitionChild
-              as="div"
+            <Transition.Child
               className="np-bottom-sheet-v2-backdrop"
               enterFrom="np-bottom-sheet-v2-backdrop--closed"
               leaveTo="np-bottom-sheet-v2-backdrop--closed"
@@ -94,9 +92,8 @@ export function BottomSheet({
                   <Fragment
                     key={floatingKey} // Force inner state invalidation on open
                   >
-                    <TransitionChild
+                    <Transition.Child
                       ref={refs.setFloating}
-                      as="div"
                       className="np-bottom-sheet-v2-content"
                       enterFrom="np-bottom-sheet-v2-content--closed"
                       leaveTo="np-bottom-sheet-v2-content--closed"
@@ -124,7 +121,7 @@ export function BottomSheet({
                           {children}
                         </div>
                       </div>
-                    </TransitionChild>
+                    </Transition.Child>
                   </Fragment>
                 </FloatingFocusManager>
               </FocusScope>

package/src/inputs/_Popover.tsx

@@ -51,7 +51,6 @@ export function Popover({
   onCloseEnd,
 }: PopoverProps) {
   const { refs, floatingStyles, context } = useFloating<Element>({
-    strategy: 'fixed',
     placement,
     middleware: [
       offset(8),
@@ -93,7 +92,6 @@ export function Popover({
       <FloatingPortal>
         <ThemeProvider theme="personal" screenMode={theme === 'personal' ? screenMode : 'light'}>
           <Transition
-            as="div"
             show={open}
             leave="transition-opacity"
             leaveTo="opacity-0"

package/src/main.css

@@ -5339,6 +5339,8 @@ html:not([dir="rtl"]) .np-navigation-option {
   border-radius: 10px;
   border-radius: var(--radius-small);
   display: flex;
+  gap: 16px;
+  gap: var(--Prompt-gap, var(--size-16));
   word-wrap: break-word;
   padding: 8px;
   padding: var(--Prompt-padding, var(--padding-x-small));
@@ -5354,6 +5356,9 @@ html:not([dir="rtl"]) .np-navigation-option {
   grid-template-columns: auto 1fr;
   width: 100%;
 }
+.wds-prompt__content-wrapper--with-dismiss {
+  grid-template-columns: auto 1fr auto;
+}
 .wds-prompt__media-wrapper {
   align-self: flex-start;
   padding-top: calc(4px - 1px);
@@ -5369,12 +5374,16 @@ html:not([dir="rtl"]) .np-navigation-option {
   gap: 8px;
   gap: var(--Prompt-actions-gap, var(--size-8));
   grid-column-start: 2;
+  grid-column-end: 3;
 }
-@media (max-width: 991px) {
+@media (max-width: 767px) {
   .wds-prompt__actions-wrapper {
     grid-column: span 2;
     width: 100%;
   }
+  .wds-prompt__content-wrapper--with-dismiss .wds-prompt__actions-wrapper {
+    grid-column: span 3;
+  }
 }
 .wds-inline-prompt {
   --Prompt-gap: calc(var(--size-12) / 2);
@@ -7423,3 +7432,23 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-list-item__action {
   flex-shrink: 0;
 }
+.wds-action-prompt {
+  --Prompt-padding: var(--size-16);
+  --Prompt-actions-gap: var(--size-8);
+  --Prompt-gap: var(--size-10) var(--size-16);
+}
+.wds-action-prompt--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+@media (max-width: 767px) {
+  .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
+    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+  }
+}

package/src/main.less

@@ -86,6 +86,7 @@
 @import "./progress/Progress.less";
 @import "./progressBar/ProgressBar.less";
 @import "./legacylistItem/LegacyListItem.less";
+@import "./prompt/ActionPrompt/ActionPrompt.less";
 
 // List all less files in src in alphabetical order: find -s src -type f -name '*.less' ! -name 'main.less'
 // Make sure you are not referencing main.less itself in this file!

package/src/moneyInput/MoneyInput.spec.tsx

@@ -1,21 +1,20 @@
-import { mockAnimationsApi } from 'jsdom-testing-mocks';
 import {
   mockMatchMedia,
+  mockRequestAnimationFrame,
   mockResizeObserver,
   render,
   screen,
   userEvent,
-  waitFor,
-  within,
 } from '../test-utils';
 
 import { MoneyInput, CurrencyItem, CurrencyOptionItem, Field } from '..';
 import { MoneyInputPropsWithInputAttributes } from './MoneyInput';
+import { within } from '@testing-library/react';
 import messages from './MoneyInput.messages';
 
 mockMatchMedia();
 mockResizeObserver();
-mockAnimationsApi();
+mockRequestAnimationFrame();
 
 describe('Money Input', () => {
   const popularCurrencies: CurrencyOptionItem[] = [
@@ -115,30 +114,12 @@ describe('Money Input', () => {
   it('calls onCurrencyChange when the user selects a different currency', async () => {
     customRender();
     await openDropdown();
-    await userEvent.keyboard('eur');
-    await waitFor(() => {
-      expect(screen.getAllByRole('option')).toHaveLength(1);
-    });
-    await userEvent.keyboard('{Enter}');
-
-    await waitFor(() => {
-      expect(initialProps.onCurrencyChange).toHaveBeenCalledTimes(1);
-    });
+    await userEvent.keyboard('eur{Enter}');
+    expect(initialProps.onCurrencyChange).toHaveBeenCalledTimes(1);
     expect(initialProps.onCurrencyChange).toHaveBeenCalledWith(popularCurrencies[0]);
-
-    await waitFor(() => {
-      expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-    });
     await openDropdown();
-    await userEvent.keyboard('gbp');
-    await waitFor(() => {
-      expect(screen.getAllByRole('option')).toHaveLength(1);
-    });
-    await userEvent.keyboard('{Enter}');
-
-    await waitFor(() => {
-      expect(initialProps.onCurrencyChange).toHaveBeenCalledTimes(2);
-    });
+    await userEvent.keyboard('gbp{Enter}');
+    expect(initialProps.onCurrencyChange).toHaveBeenCalledTimes(2);
     expect(initialProps.onCurrencyChange).toHaveBeenCalledWith(popularCurrencies[2]);
   });
 

package/src/prompt/ActionPrompt/ActionPrompt.css

@@ -0,0 +1,20 @@
+.wds-action-prompt {
+  --Prompt-padding: var(--size-16);
+  --Prompt-actions-gap: var(--size-8);
+  --Prompt-gap: var(--size-10) var(--size-16);
+}
+.wds-action-prompt--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+@media (max-width: 767px) {
+  .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
+    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+  }
+}

package/src/prompt/ActionPrompt/ActionPrompt.less

@@ -0,0 +1,22 @@
+.wds-action-prompt {
+  --Prompt-padding: var(--size-16);
+  --Prompt-actions-gap: var(--size-8);
+  --Prompt-gap: var(--size-10) var(--size-16);
+
+  &--media-image {
+    width: var(--size-48);
+    height: var(--size-48);
+    object-fit: contain;
+  }
+
+  &--with-two-actions {
+    @media (--screen-sm-max) {
+      .wds-prompt__actions-wrapper {
+        .wds-Button {
+          flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+          min-width: fit-content;
+        }
+      }
+    }
+  }
+}