@transferwise/components 46.135.2 → 46.135.3

package/src/icons/Icons.story.tsx

@@ -0,0 +1,381 @@
+import React, { useState, useCallback, memo, useRef } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import * as AllIcons from '@transferwise/icons';
+import iconsPkg from '@transferwise/icons/package.json';
+import { ThemeProvider } from '@wise/components-theming';
+
+import Chips, { type ChipValue } from '../chips/Chips';
+import { SearchInput } from '../inputs/SearchInput';
+import SnackbarProvider from '../snackbar/SnackbarProvider';
+import useSnackbar from '../snackbar/useSnackbar';
+
+const ICONS_VERSION: string = iconsPkg.version;
+
+type IconComponent = React.FunctionComponent<{
+  size?: '16' | '24' | '32' | 16 | 24 | 32;
+  className?: string;
+  title?: string;
+}>;
+
+const ALIAS_TO_CANONICAL: Record<string, string> = {
+  Investments: 'Balance',
+  Holidays: 'Beach',
+  Rent: 'Building',
+  Insights: 'Bulb',
+  CardTransferwise: 'CardWise',
+  SalesAndRoyalties: 'CashRegister',
+  Settings: 'Cog',
+  Boxes: 'CostOfGoodsSold',
+  Car: 'DriversLicense',
+  Invite: 'GiftBox',
+  ContractServices: 'Handshake',
+  Do: 'HappyEmoji',
+  Emoji: 'HappyEmoji',
+  Cs: 'Headset',
+  Home: 'House',
+  Picture: 'Image',
+  Atm: 'InsertCard',
+  Activity: 'List',
+  TwoStep: 'MobileLock',
+  Unlock: 'PadlockUnlocked',
+  Lock: 'Padlock',
+  Salary: 'PayIn',
+  Recipients: 'People',
+  Tax: 'PercentageCircle',
+  Profile: 'Person',
+  Expenses: 'PieChart',
+  Help: 'QuestionMark',
+  HelpCircle: 'QuestionMarkCircle',
+  Refresh: 'Reload',
+  Dont: 'SadEmoji',
+  ECommerce: 'ShoppingBag',
+  Chat: 'SpeechBubble',
+  Pending: 'SpeechBubblePending',
+  Feedback: 'SpeechBubbleMessage',
+  Comments: 'SpeechBubbles',
+  OfficeExpenses: 'Stationery',
+  Travel: 'Suitcase',
+  Marketing: 'Target',
+  ExchangeRate: 'UpwardGraph',
+  OwnersWithdrawal: 'Withdrawal',
+  Family: 'Heart',
+  CalendarSuccess: 'CalendarCheck',
+  Dial: 'PinCode',
+  PendingCircle: 'Clock',
+  Verified: 'Check',
+  SoftwareAndWebHosting: 'SoftwareAndHosting',
+};
+
+const CANONICAL_TO_ALIASES: Record<string, string[]> = {};
+for (const [alias, canonical] of Object.entries(ALIAS_TO_CANONICAL)) {
+  if (!CANONICAL_TO_ALIASES[canonical]) {
+    CANONICAL_TO_ALIASES[canonical] = [];
+  }
+  CANONICAL_TO_ALIASES[canonical].push(alias);
+}
+
+type IconEntry = {
+  name: string;
+  component: IconComponent;
+  aliases: string[];
+  searchKey: string;
+};
+
+const iconEntries: IconEntry[] = Object.entries(AllIcons as Record<string, IconComponent>)
+  .filter(([name]) => !ALIAS_TO_CANONICAL[name])
+  .map(([name, component]) => {
+    const aliases = CANONICAL_TO_ALIASES[name] ?? [];
+    return {
+      name,
+      component,
+      aliases,
+      searchKey: [name, ...aliases].join(' ').toLowerCase(),
+    };
+  })
+  .sort((a, b) => a.name.localeCompare(b.name));
+
+const sizeChips = [
+  { value: 16, label: '16' },
+  { value: 24, label: '24' },
+  { value: 32, label: '32' },
+];
+
+const themeChips = [
+  { value: 'personal', label: 'Personal' },
+  { value: 'personal-dark', label: 'Dark' },
+  { value: 'bright-green', label: 'Bright Green' },
+  { value: 'forest-green', label: 'Forest Green' },
+];
+
+type ThemeSelection = {
+  theme: 'personal' | 'bright-green' | 'forest-green';
+  screenMode: 'light' | 'dark';
+};
+
+function resolveTheme(value: string): ThemeSelection {
+  if (value === 'personal-dark') return { theme: 'personal', screenMode: 'dark' };
+  return { theme: value as ThemeSelection['theme'], screenMode: 'light' };
+}
+
+const IconCell = memo(function IconCell({
+  name,
+  component: Icon,
+  aliases,
+  iconSize,
+  onCopy,
+}: {
+  name: string;
+  component: IconComponent;
+  aliases: string[];
+  iconSize: 16 | 24 | 32;
+  onCopy: (name: string) => void;
+}) {
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: '4px',
+        padding: '12px 4px',
+        borderRadius: '8px',
+        cursor: 'pointer',
+        flex: 1,
+        background: hovered ? 'var(--color-background-neutral)' : 'transparent',
+        transition: 'background 150ms ease',
+      }}
+      role="button"
+      tabIndex={0}
+      aria-label={`Copy import for ${name}`}
+      onClick={() => onCopy(name)}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onCopy(name);
+        }
+      }}
+    >
+      <div style={{ padding: '8px' }}>
+        <Icon size={iconSize} />
+      </div>
+      <span
+        style={{
+          textAlign: 'center',
+          wordBreak: 'break-word',
+          fontSize: '12px',
+          lineHeight: '1.3',
+        }}
+      >
+        {name}
+      </span>
+      {aliases.length > 0 && (
+        <span
+          style={{
+            textAlign: 'center',
+            wordBreak: 'break-word',
+            fontSize: '11px',
+            lineHeight: '1.3',
+            color: 'var(--color-content-tertiary)',
+          }}
+        >
+          alias: {aliases.join(', ')}
+        </span>
+      )}
+    </div>
+  );
+});
+
+function IconGallery() {
+  const [size, setSize] = useState<ChipValue>(32);
+  const [theme, setTheme] = useState<ChipValue>('personal');
+  const resolved = resolveTheme(String(theme));
+
+  return (
+    <SnackbarProvider timeout={2000}>
+      <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+        <Toolbar size={size} theme={theme} onSizeChange={setSize} onThemeChange={setTheme} />
+        <ThemeProvider theme={resolved.theme} screenMode={resolved.screenMode}>
+          <IconGrid size={size} screenMode={resolved.screenMode} />
+        </ThemeProvider>
+      </div>
+    </SnackbarProvider>
+  );
+}
+
+function Toolbar({
+  size,
+  onSizeChange,
+  theme,
+  onThemeChange,
+}: {
+  size: ChipValue;
+  onSizeChange: (v: ChipValue) => void;
+  theme: ChipValue;
+  onThemeChange: (v: ChipValue) => void;
+}) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        gap: '12px',
+        padding: '12px 24px',
+        borderBottom: '1px solid var(--color-border-neutral)',
+        background: 'var(--color-background-elevated)',
+        flexShrink: 0,
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: '12px', paddingRight: '12px' }}>
+        <span style={{ fontSize: '13px', fontWeight: 500, whiteSpace: 'nowrap' }}>Size</span>
+        <Chips
+          chips={sizeChips}
+          selected={size}
+          aria-label="Icon size"
+          onChange={({ selectedValue }) => onSizeChange(selectedValue)}
+        />
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+        <span style={{ fontSize: '13px', fontWeight: 500, whiteSpace: 'nowrap' }}>Theme</span>
+        <Chips
+          chips={themeChips}
+          selected={theme}
+          aria-label="Theme"
+          onChange={({ selectedValue }) => onThemeChange(selectedValue)}
+        />
+      </div>
+    </div>
+  );
+}
+
+function IconGrid({ size, screenMode }: { size: ChipValue; screenMode: 'light' | 'dark' }) {
+  const [search, setSearch] = useState('');
+  const gridRef = useRef<HTMLDivElement>(null);
+  const countRef = useRef<HTMLSpanElement>(null);
+  const createSnackbar = useSnackbar();
+
+  const iconSize = Number(size) as 16 | 24 | 32;
+
+  const handleCopy = useCallback(
+    async (name: string) => {
+      try {
+        await navigator.clipboard.writeText(`<${name} />`);
+        createSnackbar({
+          text: `Copied`,
+          theme: screenMode,
+        });
+      } catch (error) {
+        console.error('Failed to copy icon import to clipboard', error);
+        createSnackbar({
+          text: `Failed to copy`,
+          theme: screenMode,
+        });
+      }
+    },
+    [createSnackbar, screenMode],
+  );
+
+  const applyFilter = useCallback((query: string) => {
+    const grid = gridRef.current;
+    if (!grid) return;
+    const q = query.toLowerCase();
+    let visible = 0;
+    const children = grid.children as HTMLCollectionOf<HTMLElement>;
+    for (let i = 0; i < children.length; i += 1) {
+      const el = children[i];
+      const match = !q || (el.dataset.search?.includes(q) ?? false);
+      el.style.display = match ? '' : 'none';
+      if (match) visible += 1;
+    }
+    if (countRef.current) {
+      countRef.current.textContent = `${visible} icon${visible !== 1 ? 's' : ''}`;
+    }
+  }, []);
+
+  const handleSearchChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const val = e.target.value;
+      setSearch(val);
+      applyFilter(val);
+    },
+    [applyFilter],
+  );
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '16px',
+        padding: '24px',
+        background: 'var(--color-background-screen)',
+        color: 'var(--color-content-primary)',
+        flex: 1,
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: '16px', flexWrap: 'wrap' }}>
+        <div style={{ maxWidth: '320px', flex: 1 }}>
+          <SearchInput
+            placeholder="Search icons..."
+            value={search}
+            aria-label="Search icons"
+            onChange={handleSearchChange}
+          />
+        </div>
+        <span ref={countRef} style={{ fontSize: '13px', color: 'var(--color-content-secondary)' }}>
+          {iconEntries.length} icons
+        </span>
+        <code>@transferwise/icons@{ICONS_VERSION}</code>
+      </div>
+
+      <div style={{ fontSize: '11px', color: 'var(--color-content-tertiary)', lineHeight: '1.8' }}>
+        <div>
+          Icons package must be imported first:{' '}
+          <code>{`import { Bank } from '@transferwise/icons'`}</code>
+        </div>
+      </div>
+
+      <div
+        ref={gridRef}
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
+          gap: '12px',
+          gridAutoRows: '1fr',
+        }}
+      >
+        {iconEntries.map(({ name, component, aliases, searchKey }) => (
+          <div key={name} data-search={searchKey} style={{ display: 'flex' }}>
+            <IconCell
+              name={name}
+              component={component}
+              aliases={aliases}
+              iconSize={iconSize}
+              onCopy={handleCopy}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const meta: Meta = {
+  title: 'Foundations/Icons',
+  tags: ['!autodocs', '!manifest'],
+  parameters: {
+    padding: '0',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Gallery: Story = {
+  render: () => <IconGallery />,
+};

package/src/listItem/ListItem.test.tsx

@@ -1541,5 +1541,29 @@ describe('ListItem', () => {
         ).toHaveAttribute('id', expect.stringMatching(/_prompt$/));
       });
     });
+
+    describe('dynamic context updates', () => {
+      it('should update Switch disabled state when ListItem disabled prop changes', () => {
+        const { rerender } = render(
+          <ListItem title={title} disabled={false} control={<ListItem.Switch onClick={cb} />} />,
+        );
+
+        const switchControl = screen.getByRole('switch');
+        expect(switchControl).toBeEnabled();
+        expect(screen.getByRole('listitem')).not.toHaveAttribute('aria-disabled', 'true');
+
+        rerender(<ListItem title={title} disabled control={<ListItem.Switch onClick={cb} />} />);
+
+        expect(switchControl).toBeDisabled();
+        expect(screen.getByRole('listitem')).toHaveAttribute('aria-disabled', 'true');
+
+        rerender(
+          <ListItem title={title} disabled={false} control={<ListItem.Switch onClick={cb} />} />,
+        );
+
+        expect(switchControl).toBeEnabled();
+        expect(screen.getByRole('listitem')).not.toHaveAttribute('aria-disabled', 'true');
+      });
+    });
   });
 });

package/src/listItem/ListItem.tsx

@@ -163,7 +163,7 @@ export const ListItem = ({
     return isFullyInteractive && !isButtonAsLink
       ? additionalInfoPrompt
       : `${titlesAndValues} ${additionalInfoPrompt}`;
-  }, [isFullyInteractive]);
+  }, [additionalInfoPrompt, isButtonAsLink, isFullyInteractive, titlesAndValues]);
   const listItemContext = useMemo(
     () => ({
       setControlType,
@@ -175,7 +175,7 @@ export const ListItem = ({
       isPartiallyInteractive,
       describedByIds,
     }),
-    [describedByIds, mediaSize],
+    [describedByIds, mediaSize, disabled, inverted, disabledPromptMessage, isPartiallyInteractive],
   );
   const gridColumnsStyle = {
     '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',

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

@@ -0,0 +1,63 @@
+import { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { expect, userEvent, within } from 'storybook/test';
+import { MultiCurrency } from '@transferwise/icons';
+import List from '../../list';
+import { ListItem, type ListItemProps } from '../ListItem';
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/Tests/Context Updates',
+  tags: ['!autodocs', '!manifest'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    knobs: { disable: true },
+  },
+} satisfies Meta<ListItemProps>;
+
+type Story = StoryObj<ListItemProps>;
+
+/**
+ * Test: Dynamic state updates should propagate through listItemContext to control subcomponents.
+ * The Switch control toggles the disabled state of the ListItem.
+ * When disabled changes, the Switch should correctly update its disabled state via the context.
+ */
+export const DisabledToggle: Story = {
+  render: () => {
+    const [disabled, setDisabled] = useState(false);
+
+    return (
+      <List>
+        <ListItem
+          disabled={disabled}
+          title="Payment notifications"
+          subtitle={`ListItem disabled: ${disabled ? 'true' : 'false'}`}
+          media={
+            <ListItem.AvatarView>
+              <MultiCurrency />
+            </ListItem.AvatarView>
+          }
+          control={<ListItem.Switch checked={!disabled} onClick={() => setDisabled(!disabled)} />}
+        />
+      </List>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const switchControl = canvas.getByRole('switch');
+
+    // Initial state: disabled should be false, switch should be enabled and checked
+    await expect(switchControl).toBeEnabled();
+    await expect(switchControl).toBeChecked();
+    await expect(canvas.getByRole('listitem')).not.toHaveAttribute('aria-disabled', 'true');
+
+    // Click switch to set disabled to true
+    await userEvent.click(switchControl);
+
+    // Verify switch is now disabled and unchecked
+    await expect(switchControl).toBeDisabled();
+    await expect(switchControl).not.toBeChecked();
+    await expect(canvas.getByRole('listitem')).toHaveAttribute('aria-disabled', 'true');
+  },
+};

package/src/listItem/_stories/ListItem.scenarios.story.tsx

@@ -6,7 +6,7 @@ import {
   InfoCircle,
   Documents,
   Warning,
-  Home,
+  House,
   Globe,
   People,
   Link as LinkIcon,
@@ -273,7 +273,7 @@ export const Summary: Story = storySourceWithoutNoise({
           subtitle="Update your payment address"
           media={
             <ListItem.AvatarView size={32}>
-              <Home />
+              <House />
             </ListItem.AvatarView>
           }
           additionalInfo={
@@ -287,7 +287,7 @@ export const Summary: Story = storySourceWithoutNoise({
           subtitle="Update your payment address"
           media={
             <ListItem.AvatarView size={32}>
-              <Home />
+              <House />
             </ListItem.AvatarView>
           }
           additionalInfo={

package/src/moneyInput/MoneyInput.story.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { within, userEvent, expect } from 'storybook/test';
-import { Lock } from '@transferwise/icons';
+import { Padlock } from '@transferwise/icons';
 import { useState } from 'react';
 
 import MoneyInput, { CurrencyOptionItem } from '.';
@@ -117,7 +117,7 @@ export const SingleCurrency: Story = {
 
 export const MultipleCurrencies: Story = {
   args: {
-    addon: <Lock />,
+    addon: <Padlock />,
     currencies: [
       {
         header: 'Popular currencies',

package/src/navigationOption/NavigationOption.story.tsx

@@ -4,7 +4,7 @@ import { Illustration, Assets, Flag } from '@wise/art';
 import {
   FastFlag as FastFlagIcon,
   Bank as BankIcon,
-  Profile,
+  Person,
   UpwardGraph as UpwardGraphIcon,
   FastFlag,
 } from '@transferwise/icons';
@@ -106,7 +106,7 @@ export const Variants: StoryObj<StoryArgs> = {
           showMediaCircle={false}
           media={
             <AvatarView badge={{ type: 'reference' }}>
-              <Profile />
+              <Person />
             </AvatarView>
           }
           content={hasTitleOnly ? null : args.content}
@@ -248,7 +248,7 @@ export const NewContactContent: StoryObj<StoryArgs> = {
       showMediaCircle={false}
       media={
         <AvatarView badge={{ type: 'reference' }}>
-          <Profile size="24" />
+          <Person size="24" />
         </AvatarView>
       }
       onClick={fn()}

package/src/overlayHeader/OverlayHeader.story.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { action } from 'storybook/actions';
-import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';
+import { Person, Briefcase as BriefcaseIcon } from '@transferwise/icons';
 import AvatarView from '../avatarView';
 import { ProfileType } from '../common';
 import Logo from '../logo';
@@ -28,7 +28,7 @@ export default meta;
 const avatarProfiles = {
   '': null,
   Business: <BriefcaseIcon size="24" />,
-  Profile: <ProfileIcon size="24" />,
+  Profile: <Person size="24" />,
 };
 
 export const Basic: StoryObj<StoryArgs> = {

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

@@ -1,7 +1,7 @@
 import { ReactElement, useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
-import { Bank, Star, Travel, Briefcase } from '@transferwise/icons';
+import { Bank, Star, Suitcase, Briefcase } from '@transferwise/icons';
 import { lorem10, lorem20 } from '../../test-utils';
 import Button from '../../button';
 import Title from '../../title';
@@ -116,7 +116,7 @@ const MEDIA_OPTIONS: Record<string, ActionPromptProps['media']> = {
   },
   'Avatar: Icon (Bank)': { avatar: { asset: <Bank /> } },
   'Avatar: Icon (Star)': { avatar: { asset: <Star /> } },
-  'Avatar: Icon (Travel)': { avatar: { asset: <Travel /> } },
+  'Avatar: Icon (Suitcase)': { avatar: { asset: <Suitcase /> } },
   'Avatar: Icon (Briefcase)': { avatar: { asset: <Briefcase /> } },
   'Avatar: Initials': { avatar: { profileName: 'John Doe' } },
 };
@@ -133,7 +133,7 @@ const previewArgTypes = {
       'Avatar: Personal (EU badge)',
       'Avatar: Icon (Bank)',
       'Avatar: Icon (Star)',
-      'Avatar: Icon (Travel)',
+      'Avatar: Icon (Suitcase)',
       'Avatar: Icon (Briefcase)',
       'Avatar: Initials',
     ],

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

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { Freeze, People, Travel } from '@transferwise/icons';
+import { Freeze, People, Suitcase } from '@transferwise/icons';
 import { action } from 'storybook/actions';
 import { fn } from 'storybook/test';
 import ActionPrompt from './ActionPrompt';
@@ -248,7 +248,7 @@ export const Responsiveness: Story = {
         sentiment="proposition"
         title="Stacked (320px)"
         description={lorem10}
-        media={{ avatar: { asset: <Travel /> } }}
+        media={{ avatar: { asset: <Suitcase /> } }}
         action={{ label: 'Primary action', onClick: fn() }}
         actionSecondary={{ label: 'Secondary', onClick: fn() }}
         onDismiss={fn()}
@@ -257,7 +257,7 @@ export const Responsiveness: Story = {
         sentiment="proposition"
         title="Side-by-side (480px)"
         description={lorem10}
-        media={{ avatar: { asset: <Travel /> } }}
+        media={{ avatar: { asset: <Suitcase /> } }}
         action={{ label: 'Primary action', onClick: fn() }}
         actionSecondary={{ label: 'Secondary', onClick: fn() }}
         onDismiss={fn()}

package/src/prompt/InfoPrompt/InfoPrompt.accessibility.docs.mdx

@@ -64,7 +64,7 @@ Custom media icons should include their own accessibility attributes. Use the `t
 <InfoPrompt
   sentiment="success"
   description="Your travel account is ready!"
-  media={{ asset: <Travel title="Travel feature" /> }}
+  media={{ asset: <Suitcase title="Travel feature" /> }}
 />
 
 <InfoPrompt

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

@@ -2,7 +2,7 @@ import type { ReactElement } from 'react';
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { action } from 'storybook/actions';
-import { Confetti, GiftBox, Star, Travel, Briefcase, Plane } from '@transferwise/icons';
+import { Confetti, GiftBox, Star, Suitcase, Briefcase, Plane } from '@transferwise/icons';
 import { lorem10, lorem20 } from '../../test-utils';
 import Button from '../../button';
 import Title from '../../title';
@@ -90,7 +90,7 @@ const MEDIA_OPTIONS: Record<string, { asset: ReactElement } | undefined> = {
   star: { asset: <Star title="Starred" /> },
   confetti: { asset: <Confetti size={24} title="Celebration" /> },
   giftbox: { asset: <GiftBox title="Gift" /> },
-  travel: { asset: <Travel title="Travel" /> },
+  travel: { asset: <Suitcase title="Travel" /> },
   briefcase: { asset: <Briefcase title="Business" /> },
   plane: { asset: <Plane title="Travel" /> },
 };
@@ -297,7 +297,7 @@ export const MediaTypes: StoryObj<InfoPromptProps> = {
       <InfoPrompt
         sentiment="success"
         description="Your travel account is ready!"
-        media={{ asset: <Travel title="Travel" /> }}
+        media={{ asset: <Suitcase title="Travel" /> }}
       />
       <InfoPrompt
         sentiment="warning"

package/src/prompt/InlinePrompt/InlinePrompt.accessibility.docs.mdx

@@ -30,7 +30,7 @@ By default, sentiment icons have these labels:
   dark
   code={`
 <InlinePrompt 
-  media={<Travel />} 
+  media={<Suitcase />} 
   sentiment="positive" 
   mediaLabel="Travel feature enabled: "
 >