@transferwise/components 46.137.1 → 46.139.0

package/src/loader/Loader.less

@@ -10,6 +10,16 @@
 }
 
 .tw-loader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--size-16);
+  width: 190px;
+  text-align: center;
+  word-break: break-word;
+}
+
+.tw-loader-asset {
   overflow: hidden;
   border-radius: 50%;
   backface-visibility: hidden;
@@ -49,44 +59,26 @@
     --coin-edge-width-offset: translateX(0.275rem);
     --coin-edge-width-negative-offset: translateX(-0.275rem);
     --box-shadow-forwards:
-      0.025rem 0 0 var(--coin-colour),
-      0.05rem 0 0 var(--coin-colour),
-      0.075rem 0 0 var(--coin-colour),
-      0.1rem 0 0 var(--coin-colour),
-      0.125rem 0 0 var(--coin-colour),
-      0.15rem 0 0 var(--coin-colour),
-      0.175rem 0 0 var(--coin-colour),
-      0.2rem 0 0 var(--coin-colour),
-      0.225rem 0 0 var(--coin-colour),
-      0.25rem 0 0 var(--coin-colour),
-      0.275rem 0 0 var(--coin-colour),
-      0.3rem 0 0 var(--coin-colour),
-      0.325rem 0 0 var(--coin-colour),
-      0.35rem 0 0 var(--coin-colour),
-      0.375rem 0 0 var(--coin-colour),
-      0.4rem 0 0 var(--coin-colour),
-      0.425rem 0 0 var(--coin-colour),
-      0.45rem 0 0 var(--coin-colour),
+      0.025rem 0 0 var(--coin-colour), 0.05rem 0 0 var(--coin-colour),
+      0.075rem 0 0 var(--coin-colour), 0.1rem 0 0 var(--coin-colour),
+      0.125rem 0 0 var(--coin-colour), 0.15rem 0 0 var(--coin-colour),
+      0.175rem 0 0 var(--coin-colour), 0.2rem 0 0 var(--coin-colour),
+      0.225rem 0 0 var(--coin-colour), 0.25rem 0 0 var(--coin-colour),
+      0.275rem 0 0 var(--coin-colour), 0.3rem 0 0 var(--coin-colour),
+      0.325rem 0 0 var(--coin-colour), 0.35rem 0 0 var(--coin-colour),
+      0.375rem 0 0 var(--coin-colour), 0.4rem 0 0 var(--coin-colour),
+      0.425rem 0 0 var(--coin-colour), 0.45rem 0 0 var(--coin-colour),
       0.475rem 0 0 var(--coin-colour);
     --box-shadow-backwards:
-      -0.025rem 0 0 var(--coin-colour),
-      -0.05rem 0 0 var(--coin-colour),
-      -0.075rem 0 0 var(--coin-colour),
-      -0.1rem 0 0 var(--coin-colour),
-      -0.125rem 0 0 var(--coin-colour),
-      -0.15rem 0 0 var(--coin-colour),
-      -0.175rem 0 0 var(--coin-colour),
-      -0.2rem 0 0 var(--coin-colour),
-      -0.225rem 0 0 var(--coin-colour),
-      -0.25rem 0 0 var(--coin-colour),
-      -0.275rem 0 0 var(--coin-colour),
-      -0.3rem 0 0 var(--coin-colour),
-      -0.325rem 0 0 var(--coin-colour),
-      -0.35rem 0 0 var(--coin-colour),
-      -0.375rem 0 0 var(--coin-colour),
-      -0.4rem 0 0 var(--coin-colour),
-      -0.425rem 0 0 var(--coin-colour),
-      -0.45rem 0 0 var(--coin-colour),
+      -0.025rem 0 0 var(--coin-colour), -0.05rem 0 0 var(--coin-colour),
+      -0.075rem 0 0 var(--coin-colour), -0.1rem 0 0 var(--coin-colour),
+      -0.125rem 0 0 var(--coin-colour), -0.15rem 0 0 var(--coin-colour),
+      -0.175rem 0 0 var(--coin-colour), -0.2rem 0 0 var(--coin-colour),
+      -0.225rem 0 0 var(--coin-colour), -0.25rem 0 0 var(--coin-colour),
+      -0.275rem 0 0 var(--coin-colour), -0.3rem 0 0 var(--coin-colour),
+      -0.325rem 0 0 var(--coin-colour), -0.35rem 0 0 var(--coin-colour),
+      -0.375rem 0 0 var(--coin-colour), -0.4rem 0 0 var(--coin-colour),
+      -0.425rem 0 0 var(--coin-colour), -0.45rem 0 0 var(--coin-colour),
       -0.475rem 0 0 var(--coin-colour);
   }
 
@@ -95,59 +87,33 @@
     --coin-edge-width-offset: translateX(0.375rem);
     --coin-edge-width-negative-offset: translateX(-0.375rem);
     --box-shadow-forwards:
-      0.025rem 0 0 var(--coin-colour),
-      0.05rem 0 0 var(--coin-colour),
-      0.075rem 0 0 var(--coin-colour),
-      0.1rem 0 0 var(--coin-colour),
-      0.125rem 0 0 var(--coin-colour),
-      0.15rem 0 0 var(--coin-colour),
-      0.175rem 0 0 var(--coin-colour),
-      0.2rem 0 0 var(--coin-colour),
-      0.225rem 0 0 var(--coin-colour),
-      0.25rem 0 0 var(--coin-colour),
-      0.275rem 0 0 var(--coin-colour),
-      0.3rem 0 0 var(--coin-colour),
-      0.325rem 0 0 var(--coin-colour),
-      0.35rem 0 0 var(--coin-colour),
-      0.375rem 0 0 var(--coin-colour),
-      0.4rem 0 0 var(--coin-colour),
-      0.425rem 0 0 var(--coin-colour),
-      0.45rem 0 0 var(--coin-colour),
-      0.475rem 0 0 var(--coin-colour),
-      0.5rem 0 0 var(--coin-colour),
-      0.525rem 0 0 var(--coin-colour),
-      0.55rem 0 0 var(--coin-colour),
-      0.575rem 0 0 var(--coin-colour),
-      0.6rem 0 0 var(--coin-colour),
-      0.625rem 0 0 var(--coin-colour),
-      0.65rem 0 0 var(--coin-colour);
+      0.025rem 0 0 var(--coin-colour), 0.05rem 0 0 var(--coin-colour),
+      0.075rem 0 0 var(--coin-colour), 0.1rem 0 0 var(--coin-colour),
+      0.125rem 0 0 var(--coin-colour), 0.15rem 0 0 var(--coin-colour),
+      0.175rem 0 0 var(--coin-colour), 0.2rem 0 0 var(--coin-colour),
+      0.225rem 0 0 var(--coin-colour), 0.25rem 0 0 var(--coin-colour),
+      0.275rem 0 0 var(--coin-colour), 0.3rem 0 0 var(--coin-colour),
+      0.325rem 0 0 var(--coin-colour), 0.35rem 0 0 var(--coin-colour),
+      0.375rem 0 0 var(--coin-colour), 0.4rem 0 0 var(--coin-colour),
+      0.425rem 0 0 var(--coin-colour), 0.45rem 0 0 var(--coin-colour),
+      0.475rem 0 0 var(--coin-colour), 0.5rem 0 0 var(--coin-colour),
+      0.525rem 0 0 var(--coin-colour), 0.55rem 0 0 var(--coin-colour),
+      0.575rem 0 0 var(--coin-colour), 0.6rem 0 0 var(--coin-colour),
+      0.625rem 0 0 var(--coin-colour), 0.65rem 0 0 var(--coin-colour);
     --box-shadow-backwards:
-      -0.025rem 0 0 var(--coin-colour),
-      -0.05rem 0 0 var(--coin-colour),
-      -0.075rem 0 0 var(--coin-colour),
-      -0.1rem 0 0 var(--coin-colour),
-      -0.125rem 0 0 var(--coin-colour),
-      -0.15rem 0 0 var(--coin-colour),
-      -0.175rem 0 0 var(--coin-colour),
-      -0.2rem 0 0 var(--coin-colour),
-      -0.225rem 0 0 var(--coin-colour),
-      -0.25rem 0 0 var(--coin-colour),
-      -0.275rem 0 0 var(--coin-colour),
-      -0.3rem 0 0 var(--coin-colour),
-      -0.325rem 0 0 var(--coin-colour),
-      -0.35rem 0 0 var(--coin-colour),
-      -0.375rem 0 0 var(--coin-colour),
-      -0.4rem 0 0 var(--coin-colour),
-      -0.425rem 0 0 var(--coin-colour),
-      -0.45rem 0 0 var(--coin-colour),
-      -0.475rem 0 0 var(--coin-colour),
-      -0.5rem 0 0 var(--coin-colour),
-      -0.525rem 0 0 var(--coin-colour),
-      -0.55rem 0 0 var(--coin-colour),
-      -0.575rem 0 0 var(--coin-colour),
-      -0.6rem 0 0 var(--coin-colour),
-      -0.625rem 0 0 var(--coin-colour),
-      -0.65rem 0 0 var(--coin-colour);
+      -0.025rem 0 0 var(--coin-colour), -0.05rem 0 0 var(--coin-colour),
+      -0.075rem 0 0 var(--coin-colour), -0.1rem 0 0 var(--coin-colour),
+      -0.125rem 0 0 var(--coin-colour), -0.15rem 0 0 var(--coin-colour),
+      -0.175rem 0 0 var(--coin-colour), -0.2rem 0 0 var(--coin-colour),
+      -0.225rem 0 0 var(--coin-colour), -0.25rem 0 0 var(--coin-colour),
+      -0.275rem 0 0 var(--coin-colour), -0.3rem 0 0 var(--coin-colour),
+      -0.325rem 0 0 var(--coin-colour), -0.35rem 0 0 var(--coin-colour),
+      -0.375rem 0 0 var(--coin-colour), -0.4rem 0 0 var(--coin-colour),
+      -0.425rem 0 0 var(--coin-colour), -0.45rem 0 0 var(--coin-colour),
+      -0.475rem 0 0 var(--coin-colour), -0.5rem 0 0 var(--coin-colour),
+      -0.525rem 0 0 var(--coin-colour), -0.55rem 0 0 var(--coin-colour),
+      -0.575rem 0 0 var(--coin-colour), -0.6rem 0 0 var(--coin-colour),
+      -0.625rem 0 0 var(--coin-colour), -0.65rem 0 0 var(--coin-colour);
   }
 }
 

package/src/loader/Loader.story.tsx

@@ -7,6 +7,7 @@ export default {
   title: 'Loading/Loader',
   args: {
     size: 'md',
+    label: 'Sending your money',
   },
   argTypes: {
     size: {
@@ -15,6 +16,9 @@ export default {
         value: ['sm', 'md'],
       },
     },
+    label: {
+      control: 'text',
+    },
   },
 } satisfies Meta<typeof Loader>;
 

package/src/loader/Loader.test.tsx

@@ -9,7 +9,7 @@ describe('Loader', () => {
 
   it('tests default state', () => {
     const { container } = render(<Loader />);
-    expect(container.querySelectorAll('div.tw-loader--md')).toHaveLength(1);
+    expect(container.querySelectorAll('div.tw-loader-asset--md')).toHaveLength(1);
     expect(container.querySelector('div[data-testid]')).toBeNull();
   });
 
@@ -19,33 +19,48 @@ describe('Loader', () => {
     expect(screen.getByTestId(dataTestId)).toBeInTheDocument();
   });
 
+  it('renders label when displayInstantly is true', () => {
+    render(<Loader label="Sending your money" displayInstantly />);
+    expect(screen.getByText('Sending your money')).toBeInTheDocument();
+  });
+
+  it('does not render label before debounce completes', () => {
+    render(<Loader label="Sending your money" />);
+    expect(screen.queryByText('Sending your money')).not.toBeInTheDocument();
+  });
+
+  it('does not render label when label is not provided', () => {
+    render(<Loader displayInstantly />);
+    expect(screen.queryByText('Sending your money')).not.toBeInTheDocument();
+  });
+
   it('shows renders the next best size of loader when using a deprecated size on the new theme', () => {
     const { container, rerender } = render(
       <ThemeProvider theme="personal">
         <Loader {...{ small: true }} />
       </ThemeProvider>,
     );
-    expect(container.querySelectorAll('div.tw-loader--sm')).toHaveLength(1);
+    expect(container.querySelectorAll('div.tw-loader-asset--sm')).toHaveLength(1);
 
     rerender(
       <ThemeProvider theme="personal">
         <Loader size="xs" />
       </ThemeProvider>,
     );
-    expect(container.querySelectorAll('div.tw-loader--sm')).toHaveLength(1);
+    expect(container.querySelectorAll('div.tw-loader-asset--sm')).toHaveLength(1);
 
     rerender(
       <ThemeProvider theme="personal">
         <Loader size="lg" />
       </ThemeProvider>,
     );
-    expect(container.querySelectorAll('div.tw-loader--md')).toHaveLength(1);
+    expect(container.querySelectorAll('div.tw-loader-asset--md')).toHaveLength(1);
 
     rerender(
       <ThemeProvider theme="personal">
         <Loader size="xl" />
       </ThemeProvider>,
     );
-    expect(container.querySelectorAll('div.tw-loader--md')).toHaveLength(1);
+    expect(container.querySelectorAll('div.tw-loader-asset--md')).toHaveLength(1);
   });
 });

package/src/loader/Loader.tsx

@@ -1,8 +1,10 @@
 import { useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
-import { useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 
+import Body from '../body';
 import { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';
+import { Typography } from '../common/propsValues/typography';
 
 // TODO: We gracefully deprecated xs, lg and xl -- remove these as part of a future breaking change to this component
 type DeprecatedSize = SizeExtraSmall | SizeLarge | SizeExtraLarge;
@@ -19,6 +21,8 @@ export type LoaderProps = {
   size?: SizeType | DeprecatedSize;
   /** @default false */
   displayInstantly?: boolean;
+  /** Optional label displayed below the loader */
+  label?: ReactNode;
   // TODO: refactor in favor of prop from `CommonProps` type
   /** @default {} */
   classNames?: Record<string, string>;
@@ -39,6 +43,7 @@ const Loader = ({
   small = false,
   size = Size.MEDIUM,
   displayInstantly = false,
+  label,
   classNames = {},
   ...restProps
 }: LoaderProps) => {
@@ -77,12 +82,18 @@ const Loader = ({
   }
 
   return (
-    <div
-      className={clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {
-        'tw-loader--visible': hasDebounced,
-      })}
-      data-testid={restProps['data-testid']}
-    />
+    <div className={style('tw-loader')} data-testid={restProps['data-testid']}>
+      <div
+        className={clsx(style('tw-loader-asset'), style(`tw-loader-asset--${supportedSize}`), {
+          'tw-loader-asset--visible': hasDebounced,
+        })}
+      />
+      {label && hasDebounced && (
+        <Body type={Typography.BODY_LARGE_BOLD} as="span" className={style('text-secondary')}>
+          {label}
+        </Body>
+      )}
+    </div>
   );
 };
 

package/src/logo/Logo.story.tsx

@@ -1,7 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import Logo, { LogoType, LogoDisplay, LogoFormat } from './Logo';
+import type { LogoSize } from './Logo';
 import { withVariantConfig } from '../../.storybook/helpers';
+import Body from '../body';
 
 /**
  * **Design guidance**: <a href="https://wise.design/foundations/logo" target="_blank">wise.design/foundations/logo</a>
@@ -25,6 +27,10 @@ const meta: Meta<typeof Logo> = {
       control: 'radio',
       options: Object.values(LogoFormat),
     },
+    size: {
+      control: 'radio',
+      options: [16, 18, 20, 24, 28, 36] satisfies LogoSize[],
+    },
     inverse: { control: { disable: true } },
   },
   parameters: {
@@ -162,6 +168,40 @@ export const SecondaryLockup: Story = {
   },
 };
 
+/**
+ * Controls the height and width of the logo in pixels.
+ */
+export const Sizes: Story = {
+  argTypes: {
+    size: { table: { disable: true } },
+  },
+  render: (args) => (
+    <div style={{ display: 'flex', gap: '2rem', alignItems: 'flex-end', padding: '2rem' }}>
+      {([16, 18, 20, 24, 28, 36] as const).map((size) => (
+        <div
+          key={size}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '0.5rem',
+          }}
+        >
+          <Logo {...args} size={size} />
+          <Body>{size}</Body>
+        </div>
+      ))}
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Logo size={..} />`,
+      },
+    },
+  },
+};
+
 /**
  * When `display` is `"compact"`, only the fast-flag mark is rendered regardless of type or other settings.
  */

package/src/logo/Logo.test.story.tsx

@@ -1,7 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import Logo, { LogoType } from '.';
+import { LogoFormat } from './Logo';
+import type { LogoSize } from './Logo';
 import { withVariantConfig } from '../../.storybook/helpers';
+import Body from '../body';
 
 const meta: Meta<typeof Logo> = {
   component: Logo,
@@ -42,3 +45,51 @@ export const Responsive: Story = {
   render: () => <AllVariants />,
   ...withVariantConfig(['mobile']),
 };
+
+const sizes: LogoSize[] = [16, 18, 20, 24, 28, 36];
+
+export const Sizes = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
+    {(['compact', 'full'] as const).map((display) => (
+      <div key={display} style={{ display: 'flex', gap: '2rem', alignItems: 'flex-end' }}>
+        {sizes.map((size) => (
+          <div
+            key={size}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '0.5rem',
+            }}
+          >
+            <Logo type="WISE" size={size} display={display} />
+            <Body>{size}</Body>
+          </div>
+        ))}
+      </div>
+    ))}
+    {[LogoType.WISE_BUSINESS, LogoType.WISE_PLATFORM].map((type) =>
+      [LogoFormat.PRIMARY_LOCKUP, LogoFormat.SECONDARY_LOCKUP].map((format) => (
+        <div
+          key={`${type}-${format}`}
+          style={{ display: 'flex', gap: '2rem', alignItems: 'flex-end' }}
+        >
+          {sizes.map((size) => (
+            <div
+              key={size}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: '0.5rem',
+              }}
+            >
+              <Logo type={type} format={format} size={size} display="full" />
+              <Body>{size}</Body>
+            </div>
+          ))}
+        </div>
+      )),
+    )}
+  </div>
+);

package/src/logo/Logo.tsx

@@ -32,6 +32,8 @@ export enum LogoFormat {
   SECONDARY_LOCKUP = 'secondary-lockup',
 }
 
+export type LogoSize = 16 | 18 | 20 | 24 | 28 | 36 | '16' | '18' | '20' | '24' | '28' | '36';
+
 export interface LogoProps {
   /** Extra classes applied to Logo */
   className?: string;
@@ -62,6 +64,11 @@ export interface LogoProps {
    * @default 'default'
    */
   format?: `${LogoFormat}`;
+  /**
+   * Controls the height and width of the logo in pixels.
+   * @default 24
+   */
+  size?: LogoSize;
   /**
    * Override default ({@link labelByType}) screen reader messages
    */
@@ -94,6 +101,7 @@ export default function Logo({
   type = 'WISE',
   format = 'default',
   display = 'responsive',
+  size = 24,
   'aria-label': ariaLabel,
 }: LogoProps) {
   const isScreenSm = !useScreenSize(Breakpoint.SMALL);
@@ -101,7 +109,9 @@ export default function Logo({
 
   const assetName = compact ? 'FastFlag' : getAssetName(type, format);
   const Asset = logoAssets[assetName];
-  const { width, height } = logoAssetsDimensions[assetName];
+  const sizes = logoAssetsDimensions[assetName];
+  const { width, height } =
+    logoAssetsDimensions[assetName][Number(size) as keyof typeof sizes] ?? sizes[24];
 
   return (
     <span

package/src/logo/logo-assets.tsx

@@ -1,17 +1,64 @@
 export const logoAssetsDimensions = {
-  FastFlag: { width: 22, height: 24 },
-  WiseLogo: { width: 94, height: 24 },
-  WiseBusinessPrimary: { width: 210, height: 24 },
-  WiseBusinessSecondary: { width: 97, height: 46 },
-  WisePlatformPrimary: { width: 205, height: 24 },
-  WisePlatformSecondary: { width: 94, height: 46 },
+  FastFlag: {
+    16: { width: 16, height: 16 },
+    18: { width: 18, height: 18 },
+    20: { width: 20, height: 20 },
+    24: { width: 24, height: 24 },
+    28: { width: 28, height: 28 },
+    36: { width: 36, height: 36 },
+  },
+  WiseLogo: {
+    16: { width: 64, height: 16 },
+    18: { width: 72, height: 18 },
+    20: { width: 80, height: 20 },
+    24: { width: 96, height: 24 },
+    28: { width: 112, height: 28 },
+    36: { width: 144, height: 36 },
+  },
+  WiseBusinessPrimary: {
+    16: { width: 140, height: 16 },
+    18: { width: 157.5, height: 18 },
+    20: { width: 175, height: 20 },
+    24: { width: 210, height: 24 },
+    28: { width: 245, height: 28 },
+    36: { width: 315, height: 36 },
+  },
+  WiseBusinessSecondary: {
+    16: { width: 68, height: 32 },
+    18: { width: 76.5, height: 36 },
+    20: { width: 85, height: 40 },
+    24: { width: 102, height: 48 },
+    28: { width: 119, height: 56 },
+    36: { width: 153, height: 72 },
+  },
+  WisePlatformPrimary: {
+    16: { width: 136, height: 16 },
+    18: { width: 153, height: 18 },
+    20: { width: 170, height: 20 },
+    24: { width: 204, height: 24 },
+    28: { width: 238, height: 28 },
+    36: { width: 306, height: 36 },
+  },
+  WisePlatformSecondary: {
+    16: { width: 64, height: 32 },
+    18: { width: 72, height: 36 },
+    20: { width: 80, height: 40 },
+    24: { width: 96, height: 48 },
+    28: { width: 112, height: 56 },
+    36: { width: 144, height: 72 },
+  },
 } as const;
 
 export type LogoAssetName = keyof typeof logoAssetsDimensions;
 
 function svgProps(name: LogoAssetName) {
-  const { width, height } = logoAssetsDimensions[name];
-  return { xmlns: 'http://www.w3.org/2000/svg', width, height, viewBox: `0 0 ${width} ${height}` };
+  const { width, height } = logoAssetsDimensions[name][24];
+  return {
+    xmlns: 'http://www.w3.org/2000/svg',
+    width: '100%',
+    height: '100%',
+    viewBox: `0 0 ${width} ${height}`,
+  };
 }
 
 export function FastFlag() {

package/src/main.css

@@ -30086,6 +30086,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item-navigation .tw-icon-chevron-right {
   color: #c9cbce;
   color: var(--color-interactive-secondary);
+  display: block;
 }
 
 .wds-list-item-control {
@@ -30838,6 +30839,17 @@ button.np-link {
 }
 
 .tw-loader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  gap: var(--size-16);
+  width: 190px;
+  text-align: center;
+  word-break: break-word;
+}
+
+.tw-loader-asset {
   overflow: hidden;
   border-radius: 50%;
   backface-visibility: hidden;
@@ -30854,11 +30866,11 @@ button.np-link {
   transition: opacity 300ms cubic-bezier(0.24, 0, 0.3, 1);
 }
 
-.tw-loader--visible {
+.tw-loader-asset--visible {
   opacity: 1;
 }
 
-.tw-loader::before {
+.tw-loader-asset::before {
   content: "";
   display: block;
   width: 4.5rem;
@@ -30878,7 +30890,7 @@ button.np-link {
   animation-iteration-count: infinite;
 }
 
-.tw-loader--sm {
+.tw-loader-asset--sm {
   --coin-size: 3rem;
   --coin-edge-width-offset: translateX(0.275rem);
   --coin-edge-width-negative-offset: translateX(-0.275rem);
@@ -30886,7 +30898,7 @@ button.np-link {
   --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour), -0.05rem 0 0 var(--coin-colour), -0.075rem 0 0 var(--coin-colour), -0.1rem 0 0 var(--coin-colour), -0.125rem 0 0 var(--coin-colour), -0.15rem 0 0 var(--coin-colour), -0.175rem 0 0 var(--coin-colour), -0.2rem 0 0 var(--coin-colour), -0.225rem 0 0 var(--coin-colour), -0.25rem 0 0 var(--coin-colour), -0.275rem 0 0 var(--coin-colour), -0.3rem 0 0 var(--coin-colour), -0.325rem 0 0 var(--coin-colour), -0.35rem 0 0 var(--coin-colour), -0.375rem 0 0 var(--coin-colour), -0.4rem 0 0 var(--coin-colour), -0.425rem 0 0 var(--coin-colour), -0.45rem 0 0 var(--coin-colour), -0.475rem 0 0 var(--coin-colour);
 }
 
-.tw-loader--md {
+.tw-loader-asset--md {
   --coin-size: 4.5rem;
   --coin-edge-width-offset: translateX(0.375rem);
   --coin-edge-width-negative-offset: translateX(-0.375rem);

package/src/moneyInput/MoneyInput.story.tsx

@@ -164,6 +164,26 @@ export const WithDecimals: Story = {
   },
 };
 
+export const DisabledOptions: Story = {
+  args: {
+    currencies: [
+      { header: 'Popular currencies' },
+      exampleCurrency.eur,
+      exampleCurrency.gbp,
+      { ...exampleCurrency.usd, disabled: true },
+      { header: 'All currencies' },
+      exampleCurrency.aud,
+      { ...exampleCurrency.cny, disabled: true },
+      exampleCurrency.jpy,
+    ],
+    selectedCurrency: exampleCurrency.eur,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('combobox'));
+  },
+};
+
 export const OpenedInput: Story = {
   ...MultipleCurrencies,
   play: async ({ canvasElement }) => {

package/src/moneyInput/MoneyInput.test.tsx

@@ -566,6 +566,55 @@ describe('Money Input', () => {
     expect(screen.getByRole('listbox', { name: triggerLabel ?? '' })).toBeInTheDocument();
   });
 
+  describe('disabled options', () => {
+    const disabledCurrency: CurrencyOptionItem = {
+      value: 'CNY',
+      label: 'CNY',
+      note: 'Chinese yuan',
+      currency: 'cny',
+      disabled: true,
+    };
+
+    it('renders disabled currency option with aria-disabled', async () => {
+      customRender({
+        currencies: [{ header: 'Popular currencies' }, ...popularCurrencies, disabledCurrency],
+      });
+      await openDropdown();
+      const cnyOption = screen.getByRole('option', { name: /CNY/ });
+      expect(cnyOption).toHaveAttribute('aria-disabled', 'true');
+    });
+
+    it('does not call onCurrencyChange when a disabled option is clicked', async () => {
+      customRender({
+        currencies: [{ header: 'Popular currencies' }, ...popularCurrencies, disabledCurrency],
+      });
+      await openDropdown();
+      const cnyOption = screen.getByRole('option', { name: /CNY/ });
+      await userEvent.click(cnyOption);
+      expect(initialProps.onCurrencyChange).not.toHaveBeenCalled();
+    });
+
+    it('skips disabled option during keyboard navigation', async () => {
+      customRender({
+        currencies: [popularCurrencies[0], disabledCurrency, popularCurrencies[2]],
+      });
+      await openDropdown();
+      // Navigate down from first option — should skip disabled CNY and land on GBP
+      await userEvent.keyboard('{ArrowDown}{ArrowDown}');
+      await userEvent.keyboard('{Enter}');
+      await waitFor(() => {
+        expect(initialProps.onCurrencyChange).toHaveBeenCalledWith(popularCurrencies[2]);
+      });
+    });
+
+    it('does not mark options without disabled property as disabled', async () => {
+      customRender();
+      await openDropdown();
+      const eurOption = screen.getByRole('option', { name: /EUR/ });
+      expect(eurOption).not.toHaveAttribute('aria-disabled', 'true');
+    });
+  });
+
   it('renders custom action button in dropdown footer and calls onCustomAction', async () => {
     const onCustomAction = jest.fn();
     render(