@transferwise/components 0.0.0-experimental-8809019 → 0.0.0-experimental-45bc551

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/legacylistItem/LegacyListItem.tests.story.tsx

@@ -6,7 +6,7 @@ import List from '../list';
 
 export default {
   component: LegacyListItem,
-  tags: ['!autodocs'],
+  tags: ['!autodocs', 'deprecated', '!manifest'],
   title: 'Content/LegacyListItem/tests',
 };
 

package/src/listItem/ListItem.spec.tsx

@@ -1526,10 +1526,9 @@ describe('ListItem', () => {
         );
         expect(screen.queryByText(prompt)).not.toBeInTheDocument();
         expect(screen.getByText(disabledPromptMessage)).toBeInTheDocument();
-        expect(screen.getByTestId('InlinePrompt_Muted').parentNode?.parentNode).toHaveAttribute(
-          'id',
-          expect.stringMatching(/_prompt$/),
-        );
+        expect(
+          screen.getByTestId('InlinePrompt_Muted').parentNode?.parentNode?.parentNode,
+        ).toHaveAttribute('id', expect.stringMatching(/_prompt$/));
       });
 
       it('should render muted prompt if disabled and disabledPromptMessage are set', () => {
@@ -1537,10 +1536,9 @@ describe('ListItem', () => {
           <ListItem title="Test Title" disabled disabledPromptMessage={disabledPromptMessage} />,
         );
         expect(screen.getByText(disabledPromptMessage)).toBeInTheDocument();
-        expect(screen.getByTestId('InlinePrompt_Muted').parentNode?.parentNode).toHaveAttribute(
-          'id',
-          expect.stringMatching(/_prompt$/),
-        );
+        expect(
+          screen.getByTestId('InlinePrompt_Muted').parentNode?.parentNode?.parentNode,
+        ).toHaveAttribute('id', expect.stringMatching(/_prompt$/));
       });
     });
   });

package/src/listItem/_stories/ListItem.focus.test.story.tsx

@@ -21,7 +21,7 @@ const waitForListItem = async (canvas: ReturnType<typeof within>, timeout = 3000
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/focus',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/listItem/_stories/ListItem.layout.test.story.tsx

@@ -12,7 +12,7 @@ import { LISTITEM_CQ } from '../constants';
 
 export default {
   title: 'Content/ListItem/tests/layout',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/listItem/_stories/variants/ListItem.brightGreen.test.story.tsx

@@ -6,7 +6,7 @@ import { allModes } from '../../../../.storybook/modes';
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/variants/theme: bright-green',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/listItem/_stories/variants/ListItem.dark.test.story.tsx

@@ -6,7 +6,7 @@ import { allModes } from '../../../../.storybook/modes';
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/variants/theme: dark',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/listItem/_stories/variants/ListItem.forestGreen.test.story.tsx

@@ -6,7 +6,7 @@ import { allModes } from '../../../../.storybook/modes';
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/variants/theme: forest-green',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/listItem/_stories/variants/ListItem.medium.test.story.tsx

@@ -6,7 +6,7 @@ import { withSizedContainer } from '../helpers';
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/variants/cq: medium',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/listItem/_stories/variants/ListItem.neutral.test.story.tsx

@@ -12,7 +12,7 @@ import {
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/variants/surface: neutral',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/listItem/_stories/variants/ListItem.personal.test.story.tsx

@@ -11,7 +11,7 @@ import { VariantStory } from './helpers';
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/variants/theme: personal',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/listItem/_stories/variants/ListItem.rtl.test.story.tsx

@@ -6,7 +6,7 @@ import { allModes } from '../../../../.storybook/modes';
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/variants/rtl',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/listItem/_stories/variants/ListItem.small.test.story.tsx

@@ -6,7 +6,7 @@ import { withSizedContainer } from '../helpers';
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/variants/cq: small',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/main.css

@@ -920,83 +920,6 @@
 .np-theme-personal .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
   border-color: var(--color-interactive-primary-hover);
 }
-.wds-inline-prompt {
-  display: inline-flex;
-  text-align: left;
-  padding-top: calc(8px / 2);
-  padding-top: calc(var(--padding-x-small) / 2);
-  padding-bottom: calc(8px / 2);
-  padding-bottom: calc(var(--padding-x-small) / 2);
-  padding-left: calc(8px - 1px);
-  padding-left: calc(var(--padding-x-small) - 1px);
-  padding-right: 8px;
-  padding-right: var(--padding-x-small);
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  word-break: break-word;
-  word-wrap: break-word;
-}
-.wds-inline-prompt:has(a),
-.wds-inline-prompt:has(button) {
-  position: relative;
-  z-index: 1;
-}
-.wds-inline-prompt:has(a):hover,
-.wds-inline-prompt:has(button):hover {
-  background-color: var(--color-sentiment-background-surface-hover);
-}
-.wds-inline-prompt:has(a):active,
-.wds-inline-prompt:has(button):active {
-  background-color: var(--color-sentiment-background-surface-active);
-}
-.wds-inline-prompt--full-width {
-  width: 100%;
-}
-.wds-inline-prompt--muted {
-  opacity: 0.93;
-  filter: grayscale(1);
-}
-.wds-inline-prompt a,
-.wds-inline-prompt button {
-  color: var(--color-sentiment-content-primary);
-  text-underline-offset: calc(4px / 2);
-  text-underline-offset: calc(var(--size-4) / 2);
-}
-.wds-inline-prompt a:hover,
-.wds-inline-prompt button:hover {
-  color: var(--color-sentiment-content-primary-hover);
-}
-.wds-inline-prompt a:active,
-.wds-inline-prompt button:active {
-  color: var(--color-sentiment-content-primary-active);
-}
-.wds-inline-prompt a:first-of-type:before,
-.wds-inline-prompt button:first-of-type:before {
-  content: "";
-  position: absolute;
-  inset: 0;
-}
-.wds-inline-prompt__media-wrapper {
-  padding-right: calc(12px / 2);
-  padding-right: calc(var(--size-12) / 2);
-  padding-top: calc(4px - 1px);
-  padding-top: calc(var(--size-4) - 1px);
-  padding-bottom: calc(4px - 1px);
-  padding-bottom: calc(var(--size-4) - 1px);
-}
-.wds-inline-prompt__media-wrapper .tw-icon-tags,
-.wds-inline-prompt__media-wrapper .tw-icon-confetti {
-  color: var(--color-sentiment-content-primary);
-}
-.wds-inline-prompt .wds-inline-prompt-process-indicator {
-  width: 16px;
-  width: var(--size-16);
-  height: 16px;
-  height: var(--size-16);
-}
-.wds-inline-prompt .wds-inline-prompt-process-indicator .process-circle {
-  stroke: currentColor;
-}
 .np-dot {
   --np-dot-size: 14px;
   position: relative;
@@ -5412,6 +5335,103 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-CardGroup .np-Card.np-Card--promoCard {
   max-width: 100%;
 }
+.wds-prompt {
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  display: flex;
+  word-wrap: break-word;
+  padding: 8px;
+  padding: var(--Prompt-padding, var(--padding-x-small));
+  text-align: left;
+  word-break: break-word;
+}
+.wds-prompt__content-wrapper {
+  display: grid;
+  grid-gap: 16px;
+  grid-gap: var(--Prompt-gap, var(--size-16));
+  gap: 16px;
+  gap: var(--Prompt-gap, var(--size-16));
+  grid-template-columns: auto 1fr;
+  width: 100%;
+}
+.wds-prompt__media-wrapper {
+  align-self: flex-start;
+  padding-top: calc(4px - 1px);
+  padding-top: calc(var(--size-4) - 1px);
+}
+.wds-prompt__media-wrapper .tw-icon-tags,
+.wds-prompt__media-wrapper .tw-icon-confetti {
+  color: var(--color-sentiment-content-primary);
+}
+.wds-prompt__actions-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  gap: var(--Prompt-actions-gap, var(--size-8));
+  grid-column-start: 2;
+}
+@media (max-width: 991px) {
+  .wds-prompt__actions-wrapper {
+    grid-column: span 2;
+    width: 100%;
+  }
+}
+.wds-inline-prompt {
+  --Prompt-gap: calc(var(--size-12) / 2);
+  --Prompt-padding: calc(var(--padding-x-small) / 2) var(--padding-x-small);
+  display: inline-flex;
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+}
+.wds-inline-prompt:has(a),
+.wds-inline-prompt:has(button) {
+  position: relative;
+  z-index: 1;
+}
+.wds-inline-prompt:has(a):hover,
+.wds-inline-prompt:has(button):hover {
+  background-color: var(--color-sentiment-background-surface-hover);
+}
+.wds-inline-prompt:has(a):active,
+.wds-inline-prompt:has(button):active {
+  background-color: var(--color-sentiment-background-surface-active);
+}
+.wds-inline-prompt--full-width {
+  width: 100%;
+}
+.wds-inline-prompt--muted {
+  opacity: 0.93;
+  filter: grayscale(1);
+}
+.wds-inline-prompt a,
+.wds-inline-prompt button {
+  color: var(--color-sentiment-content-primary);
+  text-underline-offset: calc(4px / 2);
+  text-underline-offset: calc(var(--size-4) / 2);
+}
+.wds-inline-prompt a:hover,
+.wds-inline-prompt button:hover {
+  color: var(--color-sentiment-content-primary-hover);
+}
+.wds-inline-prompt a:active,
+.wds-inline-prompt button:active {
+  color: var(--color-sentiment-content-primary-active);
+}
+.wds-inline-prompt a:first-of-type:before,
+.wds-inline-prompt button:first-of-type:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+.wds-inline-prompt .wds-inline-prompt-process-indicator {
+  width: 16px;
+  width: var(--size-16);
+  height: 16px;
+  height: var(--size-16);
+}
+.wds-inline-prompt .wds-inline-prompt-process-indicator .process-circle {
+  stroke: currentColor;
+}
 .wds-radio-group .np-radio:last-child label {
   margin-bottom: 0;
 }

package/src/main.less

@@ -6,7 +6,6 @@
 @import "./actionOption/ActionOption.less";
 @import "./alert/Alert.less";
 @import "./avatar/Avatar.less";
-@import "./prompt/InlinePrompt/InlinePrompt.less";
 @import "./avatarView/AvatarView.less";
 @import "./avatarLayout/AvatarLayout.less";
 @import "./iconButton/IconButton.less";
@@ -61,6 +60,8 @@
 @import "./phoneNumberInput/PhoneNumberInput.less";
 @import "./popover/Popover.less";
 @import "./promoCard/PromoCard.less";
+@import "./prompt/PrimitivePrompt/PrimitivePrompt.less";
+@import "./prompt/InlinePrompt/InlinePrompt.less";
 @import "./radioGroup/RadioGroup.less";
 @import "./section/Section.less";
 @import "./slidingPanel/SlidingPanel.less";

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/InlinePrompt/InlinePrompt.css

@@ -1,18 +1,9 @@
 .wds-inline-prompt {
+  --Prompt-gap: calc(var(--size-12) / 2);
+  --Prompt-padding: calc(var(--padding-x-small) / 2) var(--padding-x-small);
   display: inline-flex;
-  text-align: left;
-  padding-top: calc(8px / 2);
-  padding-top: calc(var(--padding-x-small) / 2);
-  padding-bottom: calc(8px / 2);
-  padding-bottom: calc(var(--padding-x-small) / 2);
-  padding-left: calc(8px - 1px);
-  padding-left: calc(var(--padding-x-small) - 1px);
-  padding-right: 8px;
-  padding-right: var(--padding-x-small);
   border-radius: 10px;
   border-radius: var(--radius-small);
-  word-break: break-word;
-  word-wrap: break-word;
 }
 .wds-inline-prompt:has(a),
 .wds-inline-prompt:has(button) {
@@ -54,18 +45,6 @@
   position: absolute;
   inset: 0;
 }
-.wds-inline-prompt__media-wrapper {
-  padding-right: calc(12px / 2);
-  padding-right: calc(var(--size-12) / 2);
-  padding-top: calc(4px - 1px);
-  padding-top: calc(var(--size-4) - 1px);
-  padding-bottom: calc(4px - 1px);
-  padding-bottom: calc(var(--size-4) - 1px);
-}
-.wds-inline-prompt__media-wrapper .tw-icon-tags,
-.wds-inline-prompt__media-wrapper .tw-icon-confetti {
-  color: var(--color-sentiment-content-primary);
-}
 .wds-inline-prompt .wds-inline-prompt-process-indicator {
   width: 16px;
   width: var(--size-16);

package/src/prompt/InlinePrompt/InlinePrompt.less

@@ -1,13 +1,9 @@
 .wds-inline-prompt {
+  --Prompt-gap: calc(var(--size-12) / 2);
+  --Prompt-padding: calc(var(--padding-x-small) / 2) var(--padding-x-small);
+
   display: inline-flex;
-  text-align: left;
-  padding-top: calc(var(--padding-x-small) / 2);
-  padding-bottom: calc(var(--padding-x-small) / 2);
-  padding-left: calc(var(--padding-x-small) - 1px);
-  padding-right: var(--padding-x-small);
   border-radius: var(--radius-small);
-  word-break: break-word;
-  overflow-wrap: break-word;
 
   &:has(a),
   &:has(button) {
@@ -54,17 +50,6 @@
     }
   }
 
-  &__media-wrapper {
-    padding-right: calc(var(--size-12) / 2);
-    padding-top: calc(var(--size-4) - 1px);
-    padding-bottom: calc(var(--size-4) - 1px);
-
-    .tw-icon-tags,
-    .tw-icon-confetti {
-      color: var(--color-sentiment-content-primary);
-    }
-  }
-
   .wds-inline-prompt-process-indicator {
     width: var(--size-16);
     height: var(--size-16);

package/src/prompt/InlinePrompt/InlinePrompt.spec.tsx

@@ -32,8 +32,8 @@ describe('InlinePrompt', () => {
     describe(sentiment, () => {
       it('should apply correct styles', () => {
         render(<InlinePrompt {...defaultProps} sentiment={sentiment} />);
-        expect(screen.getByText('Prompt message').parentElement).toHaveClass(
-          `wds-inline-prompt--${sentiment}`,
+        expect(screen.getByText('Prompt message').parentElement?.parentElement).toHaveClass(
+          `wds-prompt--${sentiment === Sentiment.POSITIVE ? 'success' : sentiment}`,
         );
       });
 
@@ -47,7 +47,7 @@ describe('InlinePrompt', () => {
       describe('muted state', () => {
         it('should render icon and apply css', () => {
           render(<InlinePrompt {...defaultProps} muted sentiment={sentiment} />);
-          expect(screen.getByText('Prompt message').parentElement).toHaveClass(
+          expect(screen.getByText('Prompt message').parentElement?.parentElement).toHaveClass(
             'wds-inline-prompt--muted',
           );
           expect(screen.getByTestId('InlinePrompt_Muted')).toBeInTheDocument();
@@ -63,7 +63,7 @@ describe('InlinePrompt', () => {
       describe('loading state', () => {
         it('should render icon and apply css', () => {
           render(<InlinePrompt {...defaultProps} sentiment={sentiment} loading />);
-          expect(screen.getByText('Prompt message').parentElement).toHaveClass(
+          expect(screen.getByText('Prompt message').parentElement?.parentElement).toHaveClass(
             'wds-inline-prompt--loading',
           );
           expect(screen.getByTestId('InlinePrompt_ProcessIndicator')).toBeInTheDocument();
@@ -134,7 +134,7 @@ describe('InlinePrompt', () => {
       );
       const el = screen.getByTestId('prompt');
       // The component should have both the original class and the SentimentSurface class
-      expect(el).toHaveClass('wds-inline-prompt--positive');
+      expect(el).toHaveClass('wds-prompt--success');
       expect(el).toHaveClass('wds-sentiment-surface');
     });
 
@@ -143,7 +143,7 @@ describe('InlinePrompt', () => {
         <InlinePrompt {...defaultProps} sentiment={Sentiment.NEGATIVE} data-testid="prompt" />,
       );
       const el = screen.getByTestId('prompt');
-      expect(el).toHaveClass('wds-inline-prompt--negative');
+      expect(el).toHaveClass('wds-prompt--negative');
       expect(el).toHaveClass('wds-sentiment-surface');
     });
   });

package/src/prompt/InlinePrompt/InlinePrompt.tsx

@@ -4,7 +4,7 @@ import ProcessIndicator from '../../processIndicator';
 import StatusIcon from '../../statusIcon';
 import { clsx } from 'clsx';
 import Body from '../../body';
-import SentimentSurface from '../../sentimentSurface';
+import { PrimitivePrompt } from '../PrimitivePrompt';
 
 export type InlinePromptProps = {
   /**
@@ -60,7 +60,7 @@ export const InlinePrompt = ({
   mediaLabel,
   width = 'auto',
   'data-testid': dataTestId,
-  ...rest
+  ...restProps
 }: InlinePromptProps) => {
   const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;
 
@@ -87,12 +87,12 @@ export const InlinePrompt = ({
   };
 
   return (
-    <SentimentSurface
+    <PrimitivePrompt
       sentiment={surfaceSentiment}
+      media={renderMedia()}
       data-testid={dataTestId}
       className={clsx(
         'wds-inline-prompt',
-        `wds-inline-prompt--${sentiment}`,
         {
           'wds-inline-prompt--full-width': width === 'full',
           'wds-inline-prompt--muted': muted,
@@ -100,10 +100,9 @@ export const InlinePrompt = ({
         },
         className,
       )}
-      {...rest}
+      {...restProps}
     >
-      <div className="wds-inline-prompt__media-wrapper">{renderMedia()}</div>
       <Body>{children}</Body>
-    </SentimentSurface>
+    </PrimitivePrompt>
   );
 };

package/src/prompt/PrimitivePrompt/PrimitivePrompt.css

@@ -0,0 +1,41 @@
+.wds-prompt {
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  display: flex;
+  word-wrap: break-word;
+  padding: 8px;
+  padding: var(--Prompt-padding, var(--padding-x-small));
+  text-align: left;
+  word-break: break-word;
+}
+.wds-prompt__content-wrapper {
+  display: grid;
+  grid-gap: 16px;
+  grid-gap: var(--Prompt-gap, var(--size-16));
+  gap: 16px;
+  gap: var(--Prompt-gap, var(--size-16));
+  grid-template-columns: auto 1fr;
+  width: 100%;
+}
+.wds-prompt__media-wrapper {
+  align-self: flex-start;
+  padding-top: calc(4px - 1px);
+  padding-top: calc(var(--size-4) - 1px);
+}
+.wds-prompt__media-wrapper .tw-icon-tags,
+.wds-prompt__media-wrapper .tw-icon-confetti {
+  color: var(--color-sentiment-content-primary);
+}
+.wds-prompt__actions-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  gap: var(--Prompt-actions-gap, var(--size-8));
+  grid-column-start: 2;
+}
+@media (max-width: 991px) {
+  .wds-prompt__actions-wrapper {
+    grid-column: span 2;
+    width: 100%;
+  }
+}

package/src/prompt/PrimitivePrompt/PrimitivePrompt.less

@@ -0,0 +1,37 @@
+.wds-prompt {
+  border-radius: var(--radius-small);
+  display: flex;
+  overflow-wrap: break-word;
+  padding: var(--Prompt-padding, var(--padding-x-small));
+  text-align: left;
+  word-break: break-word;
+
+  &__content-wrapper {
+    display: grid;
+    gap: var(--Prompt-gap, var(--size-16));
+    grid-template-columns: auto 1fr;
+    width: 100%;
+  }
+
+  &__media-wrapper {
+    align-self: flex-start;
+    padding-top: calc(var(--size-4) - 1px);
+
+    .tw-icon-tags,
+    .tw-icon-confetti {
+      color: var(--color-sentiment-content-primary);
+    }
+  }
+
+  &__actions-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--Prompt-actions-gap, var(--size-8));
+    grid-column-start: 2;
+
+    @media (--screen-md-max) {
+      grid-column: span 2;
+      width: 100%;
+    }
+  }
+}