@transferwise/components 46.107.0 → 46.108.0

package/src/listItem/Prompt/InlinePrompt/InlinePrompt.css

@@ -0,0 +1,153 @@
+.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--muted {
+  opacity: 0.93;
+  filter: grayscale(1);
+}
+.wds-inline-prompt a,
+.wds-inline-prompt button {
+  text-underline-offset: calc(4px / 2);
+  text-underline-offset: calc(var(--size-4) / 2);
+}
+.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-positive-primary);
+}
+.wds-inline-prompt--negative {
+  background-color: var(--color-sentiment-negative-secondary);
+  color: var(--color-sentiment-negative-primary);
+}
+.wds-inline-prompt--negative a,
+.wds-inline-prompt--negative button {
+  color: var(--color-sentiment-negative-primary);
+}
+.wds-inline-prompt--negative a:hover,
+.wds-inline-prompt--negative button:hover {
+  color: var(--color-sentiment-negative-primary-hover);
+}
+.wds-inline-prompt--negative a:active,
+.wds-inline-prompt--negative button:active {
+  color: var(--color-sentiment-negative-primary-active);
+}
+.wds-inline-prompt.wds-inline-prompt--negative:has(a, button):hover {
+  background-color: var(--color-sentiment-negative-secondary-hover);
+}
+.wds-inline-prompt.wds-inline-prompt--negative:has(a, button):active {
+  background-color: var(--color-sentiment-negative-secondary-active);
+}
+.wds-inline-prompt--positive {
+  background-color: var(--color-sentiment-positive-secondary);
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-inline-prompt--positive a,
+.wds-inline-prompt--positive button {
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-inline-prompt--positive a:hover,
+.wds-inline-prompt--positive button:hover {
+  color: var(--color-sentiment-positive-primary-hover);
+}
+.wds-inline-prompt--positive a:active,
+.wds-inline-prompt--positive button:active {
+  color: var(--color-sentiment-positive-primary-active);
+}
+.wds-inline-prompt.wds-inline-prompt--positive:has(a, button):hover {
+  background-color: var(--color-sentiment-positive-secondary-hover);
+}
+.wds-inline-prompt.wds-inline-prompt--positive:has(a, button):active {
+  background-color: var(--color-sentiment-positive-secondary-active);
+}
+.wds-inline-prompt--proposition {
+  background-color: var(--color-sentiment-positive-secondary);
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-inline-prompt--proposition a,
+.wds-inline-prompt--proposition button {
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-inline-prompt--proposition a:hover,
+.wds-inline-prompt--proposition button:hover {
+  color: var(--color-sentiment-positive-primary-hover);
+}
+.wds-inline-prompt--proposition a:active,
+.wds-inline-prompt--proposition button:active {
+  color: var(--color-sentiment-positive-primary-active);
+}
+.wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
+  background-color: var(--color-sentiment-positive-secondary-hover);
+}
+.wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
+  background-color: var(--color-sentiment-positive-secondary-active);
+}
+.wds-inline-prompt--neutral {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-inline-prompt--neutral a,
+.wds-inline-prompt--neutral button {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):active {
+  background-color: var(--color-background-neutral-active);
+}
+.wds-inline-prompt--warning {
+  background-color: var(--color-sentiment-warning-secondary);
+  color: var(--color-sentiment-warning-content);
+}
+.wds-inline-prompt--warning a,
+.wds-inline-prompt--warning button {
+  color: var(--color-sentiment-warning-content);
+}
+.wds-inline-prompt--warning a:hover,
+.wds-inline-prompt--warning button:hover {
+  color: var(--color-sentiment-warning-content-hover);
+}
+.wds-inline-prompt--warning a:active,
+.wds-inline-prompt--warning button:active {
+  color: var(--color-sentiment-warning-content-active);
+}
+.wds-inline-prompt.wds-inline-prompt--warning:has(a, button):hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
+}
+.wds-inline-prompt.wds-inline-prompt--warning:has(a, button):active {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
+}

package/src/listItem/Prompt/InlinePrompt/InlinePrompt.less

@@ -0,0 +1,162 @@
+/// @FIXME all tokens here need to be adjusted after
+///        the new sentiment tokens land
+
+.wds-inline-prompt {
+  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) {
+    position: relative;
+    z-index: 1;
+  }
+
+  &--muted {
+    opacity: .93;
+    filter: grayscale(1);
+  }
+
+  a, button {
+    text-underline-offset: calc(var(--size-4) / 2);
+    &:first-of-type {
+      &:before {
+        content: '';
+        position: absolute;
+        inset: 0;
+      }
+    }
+  }
+
+  &__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-positive-primary);
+    }
+  }
+
+  &--negative {
+    background-color: var(--color-sentiment-negative-secondary);
+    color: var(--color-sentiment-negative-primary);
+
+    a, button {
+      color: var(--color-sentiment-negative-primary);
+
+      &:hover {
+        color: var(--color-sentiment-negative-primary-hover);
+      }
+
+      &:active {
+        color: var(--color-sentiment-negative-primary-active);
+      }
+    }
+
+    .wds-inline-prompt&:has(a, button) {
+      &:hover {
+        background-color: var(--color-sentiment-negative-secondary-hover);
+      }
+      &:active {
+        background-color: var(--color-sentiment-negative-secondary-active);
+      }
+    }
+  }
+
+  &--positive {
+    background-color: var(--color-sentiment-positive-secondary);
+    color: var(--color-sentiment-positive-primary);
+    a, button {
+      color: var(--color-sentiment-positive-primary);
+      &:hover {
+        color: var(--color-sentiment-positive-primary-hover);
+      }
+      &:active {
+        color: var(--color-sentiment-positive-primary-active);
+      }
+    }
+    .wds-inline-prompt&:has(a, button) {
+      &:hover {
+        background-color: var(--color-sentiment-positive-secondary-hover);
+      }
+      &:active {
+        background-color: var(--color-sentiment-positive-secondary-active);
+      }
+    }
+  }
+
+  &--proposition {
+    background-color: var(--color-sentiment-positive-secondary);
+
+    color: var(--color-sentiment-positive-primary);
+
+    a, button {
+      color: var(--color-sentiment-positive-primary);
+      &:hover {
+        color: var(--color-sentiment-positive-primary-hover);
+      }
+      &:active {
+        color: var(--color-sentiment-positive-primary-active);
+      }
+    }
+
+    .wds-inline-prompt&:has(a, button) {
+      &:hover {
+        background-color: var(--color-sentiment-positive-secondary-hover);
+      }
+      &:active {
+        background-color: var(--color-sentiment-positive-secondary-active);
+      }
+    }
+  }
+
+  &--neutral {
+    background-color: var(--color-background-neutral);
+    color: var(--color-content-primary);
+
+    a, button {
+      color: var(--color-content-primary);
+    }
+
+    .wds-inline-prompt&:has(a, button) {
+      &:hover {
+        background-color: var(--color-background-neutral-hover);
+      }
+      &:active {
+        background-color: var(--color-background-neutral-active);
+      }
+    }
+  }
+
+  &--warning {
+    background-color: var(--color-sentiment-warning-secondary);
+    color: var(--color-sentiment-warning-content);
+
+    a, button {
+      color: var(--color-sentiment-warning-content);
+      &:hover {
+        color: var(--color-sentiment-warning-content-hover);
+      }
+      &:active {
+        color: var(--color-sentiment-warning-content-active);
+      }
+    }
+
+    .wds-inline-prompt&:has(a, button) {
+      &:hover {
+        background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
+      }
+      &:active {
+        background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
+      }
+    }
+  }
+}

package/src/listItem/Prompt/InlinePrompt/InlinePrompt.spec.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { mockMatchMedia, render, screen } from '../../../test-utils';
+import { InlinePrompt, InlinePromptProps } from './InlinePrompt';
+import { Sentiment } from '../../../common';
+
+mockMatchMedia();
+
+describe('InlinePrompt', () => {
+  const defaultProps: InlinePromptProps = {
+    children: 'Prompt message',
+  };
+
+  it('renders children', () => {
+    render(<InlinePrompt {...defaultProps}>Hello world</InlinePrompt>);
+    expect(screen.getByText('Hello world')).toBeInTheDocument();
+  });
+
+  describe('renders with each sentiment', () => {
+    it.each([Sentiment.POSITIVE, Sentiment.NEUTRAL, Sentiment.NEGATIVE, Sentiment.WARNING])(
+      'renders with sentiment %s',
+      (sentiment) => {
+        render(
+          <InlinePrompt
+            {...defaultProps}
+            sentiment={sentiment as InlinePromptProps['sentiment']}
+          />,
+        );
+        expect(screen.getByText('Prompt message').parentElement).toHaveClass(
+          `wds-inline-prompt--${sentiment}`,
+        );
+      },
+    );
+  });
+
+  it('renders muted state', () => {
+    render(<InlinePrompt {...defaultProps} muted />);
+    screen.debug(undefined, 99999999);
+    expect(screen.getByText('Prompt message').parentElement).toHaveClass(
+      'wds-inline-prompt--muted',
+    );
+    expect(screen.getByTestId('InlinePrompt_Muted')).toBeInTheDocument();
+  });
+
+  it('renders loading state', () => {
+    render(<InlinePrompt {...defaultProps} loading />);
+    screen.debug(undefined, 99999999);
+    expect(screen.getByText('Prompt message').parentElement).toHaveClass(
+      'wds-inline-prompt--loading',
+    );
+    expect(screen.getByTestId('InlinePrompt_ProcessIndicator')).toBeInTheDocument();
+  });
+
+  it('applies custom className, id, and data-testid', () => {
+    render(
+      <InlinePrompt
+        {...defaultProps}
+        className="custom-class"
+        id="custom-id"
+        data-testid="custom-test"
+      />,
+    );
+    const el = screen.getByTestId('custom-test');
+    expect(el).toHaveClass('custom-class');
+    expect(el).toHaveAttribute('id', 'custom-id');
+  });
+});

package/src/listItem/Prompt/InlinePrompt/InlinePrompt.tsx

@@ -0,0 +1,56 @@
+import { Sentiment } from '../../../common';
+import { BackslashCircle } from '@transferwise/icons';
+import ProcessIndicator from '../../../processIndicator';
+import StatusIcon from '../../../statusIcon';
+import { clsx } from 'clsx';
+import Body from '../../../body';
+
+export type InlinePromptProps = {
+  sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`;
+  loading?: boolean;
+  /**
+   * Use for short-lived inline prompts to avoid swap of the icon (which is bad UX for short-lived prompts, e.g. when submit form)
+   */
+  muted?: boolean;
+  id?: string;
+  className?: string;
+  'data-testid'?: string;
+  children: React.ReactNode;
+};
+
+export const InlinePrompt = ({
+  sentiment = Sentiment.POSITIVE,
+  muted = false,
+  loading = false,
+  className,
+  children,
+  ...rest
+}: InlinePromptProps) => {
+  const renderMedia = () => {
+    if (muted) {
+      return <BackslashCircle size={16} data-testid="InlinePrompt_Muted" />;
+    }
+    if (loading) {
+      return <ProcessIndicator data-testid="InlinePrompt_ProcessIndicator" size="xxs" />;
+    }
+    return <StatusIcon size={16} sentiment={sentiment} />;
+  };
+
+  return (
+    <div
+      className={clsx(
+        'wds-inline-prompt',
+        `wds-inline-prompt--${sentiment}`,
+        {
+          'wds-inline-prompt--muted': muted,
+          'wds-inline-prompt--loading': loading,
+        },
+        className,
+      )}
+      {...rest}
+    >
+      <div className="wds-inline-prompt__media-wrapper">{renderMedia()}</div>
+      <Body>{children}</Body>
+    </div>
+  );
+};

package/src/listItem/Prompt/InlinePrompt/index.ts

@@ -0,0 +1,2 @@
+export type { InlinePromptProps } from './InlinePrompt';
+export { InlinePrompt } from './InlinePrompt';

package/src/listItem/Prompt/ListItemPrompt.css

@@ -1,7 +1,5 @@
-.wds-list-item-prompt {
-  grid-area: prompt;
+.wds-inline-prompt {
   display: inline-flex;
-  justify-self: start;
   text-align: left;
   padding-top: calc(8px / 2);
   padding-top: calc(var(--padding-x-small) / 2);
@@ -16,33 +14,27 @@
   word-break: break-word;
   word-wrap: break-word;
 }
-.wds-list-item-prompt:has(a),
-.wds-list-item-prompt:has(button) {
+.wds-inline-prompt:has(a),
+.wds-inline-prompt:has(button) {
   position: relative;
   z-index: 1;
 }
-.wds-list-item-prompt a,
-.wds-list-item-prompt button {
+.wds-inline-prompt--muted {
+  opacity: 0.93;
+  filter: grayscale(1);
+}
+.wds-inline-prompt a,
+.wds-inline-prompt button {
   text-underline-offset: calc(4px / 2);
   text-underline-offset: calc(var(--size-4) / 2);
 }
-.wds-list-item-prompt a:first-of-type:before,
-.wds-list-item-prompt button:first-of-type:before {
+.wds-inline-prompt a:first-of-type:before,
+.wds-inline-prompt button:first-of-type:before {
   content: '';
   position: absolute;
   inset: 0;
 }
-.wds-list-item-prompt.np-prompt-icon {
-  padding-left: calc(8px - 1px);
-  padding-left: calc(var(--padding-x-small) - 1px);
-  padding-right: 8px;
-  padding-right: var(--padding-x-small);
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  gap: var(--size-4);
-}
-.wds-list-item-prompt .np-prompt-icon {
+.wds-inline-prompt__media-wrapper {
   padding-right: calc(12px / 2);
   padding-right: calc(var(--size-12) / 2);
   padding-top: calc(4px - 1px);
@@ -50,108 +42,116 @@
   padding-bottom: calc(4px - 1px);
   padding-bottom: calc(var(--size-4) - 1px);
 }
-.wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
-.wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
+.wds-inline-prompt__media-wrapper .tw-icon-tags,
+.wds-inline-prompt__media-wrapper .tw-icon-confetti {
   color: var(--color-sentiment-positive-primary);
 }
-.wds-list-item-prompt.negative {
+.wds-inline-prompt--negative {
   background-color: var(--color-sentiment-negative-secondary);
   color: var(--color-sentiment-negative-primary);
 }
-.wds-list-item-prompt.negative a,
-.wds-list-item-prompt.negative button {
+.wds-inline-prompt--negative a,
+.wds-inline-prompt--negative button {
   color: var(--color-sentiment-negative-primary);
 }
-.wds-list-item-prompt.negative a:hover,
-.wds-list-item-prompt.negative button:hover {
+.wds-inline-prompt--negative a:hover,
+.wds-inline-prompt--negative button:hover {
   color: var(--color-sentiment-negative-primary-hover);
 }
-.wds-list-item-prompt.negative a:active,
-.wds-list-item-prompt.negative button:active {
+.wds-inline-prompt--negative a:active,
+.wds-inline-prompt--negative button:active {
   color: var(--color-sentiment-negative-primary-active);
 }
-.wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):hover {
+.wds-inline-prompt.wds-inline-prompt--negative:has(a, button):hover {
   background-color: var(--color-sentiment-negative-secondary-hover);
 }
-.wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):active {
+.wds-inline-prompt.wds-inline-prompt--negative:has(a, button):active {
   background-color: var(--color-sentiment-negative-secondary-active);
 }
-.wds-list-item-prompt.positive,
-.wds-list-item-prompt.discount,
-.wds-list-item-prompt.savings {
+.wds-inline-prompt--positive {
   background-color: var(--color-sentiment-positive-secondary);
   color: var(--color-sentiment-positive-primary);
 }
-.wds-list-item-prompt.positive a,
-.wds-list-item-prompt.discount a,
-.wds-list-item-prompt.savings a,
-.wds-list-item-prompt.positive button,
-.wds-list-item-prompt.discount button,
-.wds-list-item-prompt.savings button {
+.wds-inline-prompt--positive a,
+.wds-inline-prompt--positive button {
   color: var(--color-sentiment-positive-primary);
 }
-.wds-list-item-prompt.positive a:hover,
-.wds-list-item-prompt.discount a:hover,
-.wds-list-item-prompt.savings a:hover,
-.wds-list-item-prompt.positive button:hover,
-.wds-list-item-prompt.discount button:hover,
-.wds-list-item-prompt.savings button:hover {
+.wds-inline-prompt--positive a:hover,
+.wds-inline-prompt--positive button:hover {
   color: var(--color-sentiment-positive-primary-hover);
 }
-.wds-list-item-prompt.positive a:active,
-.wds-list-item-prompt.discount a:active,
-.wds-list-item-prompt.savings a:active,
-.wds-list-item-prompt.positive button:active,
-.wds-list-item-prompt.discount button:active,
-.wds-list-item-prompt.savings button:active {
+.wds-inline-prompt--positive a:active,
+.wds-inline-prompt--positive button:active {
   color: var(--color-sentiment-positive-primary-active);
 }
-.wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):hover,
-.wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):hover,
-.wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):hover {
+.wds-inline-prompt.wds-inline-prompt--positive:has(a, button):hover {
   background-color: var(--color-sentiment-positive-secondary-hover);
 }
-.wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):active,
-.wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):active,
-.wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):active {
+.wds-inline-prompt.wds-inline-prompt--positive:has(a, button):active {
   background-color: var(--color-sentiment-positive-secondary-active);
 }
-.wds-list-item-prompt.neutral {
+.wds-inline-prompt--proposition {
+  background-color: var(--color-sentiment-positive-secondary);
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-inline-prompt--proposition a,
+.wds-inline-prompt--proposition button {
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-inline-prompt--proposition a:hover,
+.wds-inline-prompt--proposition button:hover {
+  color: var(--color-sentiment-positive-primary-hover);
+}
+.wds-inline-prompt--proposition a:active,
+.wds-inline-prompt--proposition button:active {
+  color: var(--color-sentiment-positive-primary-active);
+}
+.wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
+  background-color: var(--color-sentiment-positive-secondary-hover);
+}
+.wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
+  background-color: var(--color-sentiment-positive-secondary-active);
+}
+.wds-inline-prompt--neutral {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   color: #37517e;
   color: var(--color-content-primary);
 }
-.wds-list-item-prompt.neutral a,
-.wds-list-item-prompt.neutral button {
+.wds-inline-prompt--neutral a,
+.wds-inline-prompt--neutral button {
   color: #37517e;
   color: var(--color-content-primary);
 }
-.wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):hover {
+.wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):hover {
   background-color: var(--color-background-neutral-hover);
 }
-.wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):active {
+.wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):active {
   background-color: var(--color-background-neutral-active);
 }
-.wds-list-item-prompt.warning {
+.wds-inline-prompt--warning {
   background-color: var(--color-sentiment-warning-secondary);
   color: var(--color-sentiment-warning-content);
 }
-.wds-list-item-prompt.warning a,
-.wds-list-item-prompt.warning button {
+.wds-inline-prompt--warning a,
+.wds-inline-prompt--warning button {
   color: var(--color-sentiment-warning-content);
 }
-.wds-list-item-prompt.warning a:hover,
-.wds-list-item-prompt.warning button:hover {
+.wds-inline-prompt--warning a:hover,
+.wds-inline-prompt--warning button:hover {
   color: var(--color-sentiment-warning-content-hover);
 }
-.wds-list-item-prompt.warning a:active,
-.wds-list-item-prompt.warning button:active {
+.wds-inline-prompt--warning a:active,
+.wds-inline-prompt--warning button:active {
   color: var(--color-sentiment-warning-content-active);
 }
-.wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):hover {
+.wds-inline-prompt.wds-inline-prompt--warning:has(a, button):hover {
   background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
 }
-.wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):active {
+.wds-inline-prompt.wds-inline-prompt--warning:has(a, button):active {
   background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
 }
+.wds-list-item-prompt {
+  grid-area: prompt;
+  justify-self: start;
+}