@transferwise/components 46.31.0 → 46.33.0

package/src/main.css

@@ -643,6 +643,141 @@ div.critical-comms .critical-comms-body {
   border-radius: 16px 16px 0 0;
   border-radius: var(--radius-medium) var(--radius-medium) 0 0;
 }
+.carousel-wrapper {
+  overflow: hidden;
+}
+.carousel {
+  display: flex;
+  align-items: center;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  gap: 16px;
+  gap: var(--size-16);
+  padding: 8px;
+  padding: var(--size-8);
+  margin: 8px;
+  margin: var(--size-8);
+}
+@media (max-width: 767px) {
+  .carousel {
+    gap: 8px;
+    gap: var(--size-8);
+  }
+}
+.carousel__header {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  min-height: 32px;
+  min-height: var(--size-32);
+  padding-bottom: 16px;
+  padding-bottom: var(--size-16);
+}
+.carousel__card,
+.carousel__card:hover,
+.carousel__card:focus,
+.carousel__card:focus-within {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  transition: none !important;
+  box-shadow: none !important;
+}
+.carousel__card {
+  display: block;
+  position: relative;
+  text-align: left;
+  border: none;
+  overflow: hidden;
+  background: rgba(134,167,189,0.10196);
+  background: var(--color-background-neutral);
+  border-radius: 32px;
+  border-radius: var(--size-32);
+  scroll-snap-align: center;
+  -webkit-scroll-snap-align: center;
+  transition: all 0.4s !important;
+}
+@media (min-width: 1200px) {
+  .carousel__card {
+    min-width: 280px;
+    width: 280px;
+    height: 280px;
+  }
+}
+@media (max-width: 1199px) {
+  .carousel__card {
+    min-width: 242px;
+    width: 242px;
+    height: 242px;
+  }
+}
+@media (max-width: 767px) {
+  .carousel__card {
+    min-width: 336px;
+    width: 336px;
+    height: 336px;
+    scroll-snap-stop: always;
+  }
+}
+.carousel__card:focus,
+.carousel__card:has(:focus-visible) {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width) !important;
+  outline-offset: var(--ring-outline-offset) !important;
+}
+.carousel__card:hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.carousel__card:focus {
+  background-color: var(--color-background-neutral-hover);
+}
+.carousel__card-content {
+  height: 100%;
+  font-weight: normal;
+  padding: 24px;
+  padding: var(--size-24);
+}
+.carousel__scroll-button {
+  width: 32px;
+  width: var(--size-32);
+  height: 32px;
+  height: var(--size-32);
+  align-items: center;
+  justify-content: center;
+}
+.carousel__indicators {
+  display: flex;
+  justify-content: center;
+  padding-top: 8px;
+  padding-top: var(--size-8);
+  gap: 8px;
+  gap: var(--size-8);
+}
+.carousel__indicator {
+  width: 12px;
+  width: var(--size-12);
+  height: 12px;
+  height: var(--size-12);
+  border-radius: 8px;
+  border-radius: var(--size-8);
+  background: #c9cbce;
+  background: var(--color-interactive-secondary);
+  border: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  transition: all 0.1s;
+}
+.carousel__indicator:hover {
+  width: 16px;
+  width: var(--size-16);
+}
+.carousel__indicator--selected,
+.carousel__indicator--selected:hover {
+  background: var(--color-interactive-primary);
+  width: 24px;
+  width: var(--size-24);
+}
 .np-checkbox-button input[type="checkbox"] {
   position: absolute;
   width: 24px;

package/src/main.less

@@ -5,6 +5,7 @@
 @import "./badge/Badge.less";
 @import "./button/Button.less";
 @import "./card/Card.less";
+@import "./carousel/Carousel.less";
 @import "./checkboxButton/CheckboxButton.less";
 @import "./chips/Chip.less";
 @import "./circularButton/CircularButton.less";

package/src/moneyInput/MoneyInput.rtl.spec.tsx

@@ -1,3 +1,4 @@
+import { Field } from '../field/Field';
 import { mockMatchMedia, mockResizeObserver, render, screen, userEvent } from '../test-utils';
 
 import MoneyInput from './MoneyInput';
@@ -80,4 +81,13 @@ describe('MoneyInput', () => {
 
     expect(screen.getByLabelText('Prioritized label')).toHaveClass('input-group');
   });
+
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field label="Recipient gets">
+        <MoneyInput {...props} />
+      </Field>,
+    );
+    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Recipient gets/);
+  });
 });

package/src/moneyInput/MoneyInput.spec.js

@@ -6,6 +6,11 @@ import { mockMatchMedia, mockResizeObserver } from '../test-utils';
 mockMatchMedia();
 mockResizeObserver();
 
+jest.mock('../inputs/contexts', () => ({
+  ...jest.requireActual('../inputs/contexts'),
+  withInputAttributes: (Component) => Component,
+}));
+
 jest.mock('./currencyFormatting', () => ({
   parseAmount: jest.fn(),
   formatAmount: jest.fn(),
@@ -18,11 +23,11 @@ jest.mock('react-intl', () => ({
   injectIntl: (Component) =>
     function (props) {
       return (
-        <Component {...props} intl={{ locale: defaultLocale, formatMessage: (id) => `${id}` }} />
+        <Component {...props} intl={{ locale: defaultLocale, formatMessage: (id) => String(id) }} />
       );
     },
   defineMessages: (translations) => translations,
-  useIntl: () => ({ locale: defaultLocale, formatMessage: (id) => `${id}` }),
+  useIntl: () => ({ locale: defaultLocale, formatMessage: (id) => String(id) }),
 }));
 
 describe('Money Input', () => {
@@ -510,7 +515,7 @@ describe('Money Input', () => {
 
     it('formats the number you input after you blur it', () => {
       component.setProps({ numberFormatPrecision: 3 });
-      jest.spyOn(numberFormatting, 'parseAmount').mockImplementation(parseFloat);
+      jest.spyOn(numberFormatting, 'parseAmount').mockImplementation(Number.parseFloat);
       enterAmount('123.45');
       expect(amountInput().prop('value')).toBe('123.45');
 
@@ -535,7 +540,7 @@ describe('Money Input', () => {
     enterAmount('500.1234');
     expect(onAmountChange).toHaveBeenCalledTimes(1);
     expect(onAmountChange).toHaveBeenLastCalledWith(500.1);
-    expect(assertions).toStrictEqual(1);
+    expect(assertions).toBe(1);
   });
 
   it('does call onAmountChange when input value is empty', () => {
@@ -565,7 +570,7 @@ describe('Money Input', () => {
   );
 
   it('passes the id given to the input element', () => {
-    expect(amountInput().prop('id')).not.toBeDefined();
+    expect(amountInput().prop('id')).toBeUndefined();
     component.setProps({ id: 'some-id' });
 
     expect(amountInput().prop('id')).toBe('some-id');

package/src/moneyInput/MoneyInput.tsx

@@ -6,6 +6,7 @@ import { injectIntl, WrappedComponentProps } from 'react-intl';
 
 import { Typography } from '../common';
 import { Size, SizeLarge, SizeMedium, SizeSmall } from '../common/propsValues/size';
+import { withInputAttributes, WithInputAttributesProps } from '../inputs/contexts';
 import { Input } from '../inputs/Input';
 import {
   SelectInput,
@@ -49,9 +50,8 @@ const formatAmountIfSet = ({
 }) => {
   if (maxLengthOverride) {
     return amount != null ? String(amount) : '';
-  } else {
-    return typeof amount === 'number' ? formatAmount(amount, currency, locale) : '';
   }
+  return typeof amount === 'number' ? formatAmount(amount, currency, locale) : '';
 };
 
 const parseNumber = ({
@@ -111,21 +111,23 @@ export interface MoneyInputProps extends WrappedComponentProps {
   maxLengthOverride?: number;
 }
 
+type MoneyInputPropsWithInputAttributes = MoneyInputProps & Partial<WithInputAttributesProps>;
+
 interface MoneyInputState {
   searchQuery: string;
   formattedAmount: string;
   locale: string;
 }
 
-class MoneyInput extends Component<MoneyInputProps, MoneyInputState> {
-  declare props: MoneyInputProps &
-    Required<Pick<MoneyInputProps, keyof typeof MoneyInput.defaultProps>>;
+class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInputState> {
+  declare props: MoneyInputPropsWithInputAttributes &
+    Required<Pick<MoneyInputPropsWithInputAttributes, keyof typeof MoneyInput.defaultProps>>;
 
   static defaultProps = {
     size: Size.LARGE,
     classNames: {},
     selectProps: {},
-  } satisfies Partial<MoneyInputProps>;
+  } satisfies Partial<MoneyInputPropsWithInputAttributes>;
 
   amountFocused = false;
 
@@ -160,7 +162,7 @@ class MoneyInput extends Component<MoneyInputProps, MoneyInputState> {
 
   isInputAllowedForKeyEvent = (event: React.KeyboardEvent<HTMLInputElement>) => {
     const { metaKey, key, ctrlKey } = event;
-    const isNumberKey = isNumber(parseInt(key, 10));
+    const isNumberKey = isNumber(Number.parseInt(key, 10));
 
     return isNumberKey || metaKey || ctrlKey || allowedInputKeys.has(key);
   };
@@ -179,7 +181,7 @@ class MoneyInput extends Component<MoneyInputProps, MoneyInputState> {
       : parseNumber({
           amount: paste,
           currency: this.props.selectedCurrency.currency,
-          locale: locale,
+          locale,
           maxLengthOverride: this.props.maxLengthOverride,
         });
 
@@ -188,7 +190,7 @@ class MoneyInput extends Component<MoneyInputProps, MoneyInputState> {
         formattedAmount: formatAmountIfSet({
           amount: parsed,
           currency: this.props.selectedCurrency.currency,
-          locale: locale,
+          locale,
           maxLengthOverride: this.props.maxLengthOverride,
         }),
       });
@@ -297,15 +299,18 @@ class MoneyInput extends Component<MoneyInputProps, MoneyInputState> {
 
   render() {
     const {
+      inputAttributes,
+      id: amountInputId,
+      'aria-labelledby': ariaLabelledByProp,
       selectedCurrency,
       onCurrencyChange,
       size,
       addon,
-      id,
-      'aria-labelledby': ariaLabelledBy,
       selectProps,
       maxLengthOverride,
     } = this.props;
+    const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes?.['aria-labelledby'];
+
     const selectOptions = this.getSelectOptions();
 
     const hasSingleCurrency = () => {
@@ -335,6 +340,8 @@ class MoneyInput extends Component<MoneyInputProps, MoneyInputState> {
     const disabled = !this.props.onAmountChange;
     return (
       <div
+        role="group"
+        {...inputAttributes}
         aria-labelledby={ariaLabelledBy}
         className={classNames(
           this.style('tw-money-input'),
@@ -343,7 +350,7 @@ class MoneyInput extends Component<MoneyInputProps, MoneyInputState> {
         )}
       >
         <Input
-          id={id}
+          id={amountInputId}
           value={this.state.formattedAmount}
           inputMode="decimal"
           disabled={disabled}
@@ -486,7 +493,7 @@ function currencyOptionFitsQuery(option: CurrencyOptionItem, query: string) {
 }
 
 function contains(property: string | undefined, query: string) {
-  return property && property.toLowerCase().includes(query.toLowerCase());
+  return property?.toLowerCase().includes(query.toLowerCase());
 }
 
 function sortOptionsLabelsToFirst(options: readonly CurrencyOptionItem[], query: string) {
@@ -507,4 +514,4 @@ function sortOptionsLabelsToFirst(options: readonly CurrencyOptionItem[], query:
   });
 }
 
-export default injectIntl(MoneyInput);
+export default injectIntl(withInputAttributes(MoneyInput, { nonLabelable: true }));

package/src/phoneNumberInput/PhoneNumberInput.rtl.spec.tsx

@@ -1,3 +1,4 @@
+import { Field } from '../field/Field';
 import { mockMatchMedia, mockResizeObserver, render, screen, within } from '../test-utils';
 
 import PhoneNumberInput from './PhoneNumberInput';
@@ -19,4 +20,13 @@ describe('PhoneNumberInput', () => {
       within(screen.getByLabelText('Prioritized label')).getByRole('textbox'),
     ).toBeInTheDocument();
   });
+
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field label="Phone number">
+        <PhoneNumberInput initialValue="+12345678" onChange={() => {}} />
+      </Field>,
+    );
+    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Phone number/);
+  });
 });

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 
 import { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
+import { useInputAttributes } from '../inputs/contexts';
 import { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';
 
 import messages from './PhoneNumberInput.messages';
@@ -43,7 +44,7 @@ const defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCou
 
 const PhoneNumberInput = ({
   id,
-  'aria-labelledby': ariaLabelledBy,
+  'aria-labelledby': ariaLabelledByProp,
   required,
   disabled,
   initialValue,
@@ -57,6 +58,9 @@ const PhoneNumberInput = ({
   selectProps = defaultSelectProps,
   disabledCountries = defaultDisabledCountries,
 }: PhoneNumberInputProps) => {
+  const inputAttributes = useInputAttributes({ nonLabelable: true });
+  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];
+
   const { locale, formatMessage } = useIntl();
 
   const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {
@@ -140,7 +144,12 @@ const PhoneNumberInput = ({
   }, [onChange, broadcastedValue, internalValue]);
 
   return (
-    <div aria-labelledby={ariaLabelledBy} className="tw-telephone">
+    <div
+      role="group"
+      {...inputAttributes}
+      aria-labelledby={ariaLabelledBy}
+      className="tw-telephone"
+    >
       <div className="tw-telephone__country-select">
         <SelectInput
           placeholder={formatMessage(messages.selectInputPlaceholder)}

package/src/promoCard/PromoCard.story.tsx

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { StarFill } from '@transferwise/icons';
 
-import PromoCard, { PromoCardCheckedProps, PromoCardLinkProps } from './PromoCard';
+import PromoCard, { type PromoCardCheckedProps, type PromoCardLinkProps } from './PromoCard';
 
 const meta: Meta<typeof PromoCard> = {
   component: PromoCard,

package/src/promoCard/PromoCard.tsx

@@ -1,19 +1,19 @@
 import { useId } from '@radix-ui/react-id';
 import { Check } from '@transferwise/icons';
 import classNames from 'classnames';
-import React, { forwardRef, FunctionComponent, useEffect, useState } from 'react';
+import React, { forwardRef, type FunctionComponent, useEffect, useState } from 'react';
 
 import Body from '../body';
 import { Typography } from '../common';
-import Card, { CardProps } from '../common/card';
+import Card, { type CardProps } from '../common/card';
 import Display from '../display';
 import Image from '../image/Image';
 import Title from '../title';
 
 import { usePromoCardContext } from './PromoCardContext';
-import PromoCardIndicator, { PromoCardIndicatorProps } from './PromoCardIndicator';
+import PromoCardIndicator, { type PromoCardIndicatorProps } from './PromoCardIndicator';
 
-export type ReferenceType = React.Ref<HTMLInputElement>;
+export type ReferenceType = React.Ref<HTMLInputElement> | React.Ref<HTMLDivElement>;
 export type RelatedTypes =
   | ''
   | 'alternate'
@@ -68,6 +68,9 @@ export interface PromoCardCommonProps {
   /** Specify an onClick event handler */
   onClick?: () => void;
 
+  /** Specify an onKeyDown event handler */
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+
   /** Optional prop to specify the ID used for testing */
   testId?: string;
 
@@ -76,6 +79,8 @@ export interface PromoCardCommonProps {
 
   /** Set to false to use body font style for the title   */
   useDisplayFont?: boolean;
+
+  ref?: ReferenceType;
 }
 
 export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {
@@ -91,6 +96,14 @@ export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps
   /** Optionally specify the language of the linked URL */
   hrefLang?: string;
 
+  /** Optional property that can be pass a ref for the anchor. */
+  anchorRef?: React.Ref<HTMLAnchorElement>;
+
+  /**
+   * Optional prop to specify the ID of the anchor element which can be useful when using a ref.
+   */
+  anchorId?: string;
+
   /**
    * Relationship between the PromoCard href URL and the current page. See
    * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
@@ -105,7 +118,7 @@ export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps
   isChecked?: never;
   tabIndex?: never;
   type?: never;
-  reference?: never;
+  ref?: ReferenceType;
   value?: never;
 }
 
@@ -120,7 +133,7 @@ export interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<CardPr
   tabIndex?: number;
 
   /** Optional property to provide component Ref */
-  reference?: ReferenceType;
+  ref?: ReferenceType;
 
   /** Optional prop to specify the input type of the PromoCard  */
   type?: 'checkbox' | 'radio';
@@ -131,6 +144,8 @@ export interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<CardPr
   /** Only applies to <a />s */
   download?: never;
   href?: never;
+  anchorRef?: never;
+  anchorId?: never;
   hrefLang?: never;
   rel?: never;
   target?: never;
@@ -202,6 +217,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
       isChecked,
       isDisabled,
       onClick,
+      onKeyDown,
       rel,
       tabIndex,
       target,
@@ -211,9 +227,11 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
       value,
       isSmall,
       useDisplayFont = true,
+      anchorRef,
+      anchorId,
       ...props
     },
-    reference,
+    ref: ReferenceType,
   ) => {
     // Set the `checked` state to the value of `defaultChecked` if it is truthy,
     // or the value of `isChecked` if it is truthy, or `false` if neither
@@ -276,7 +294,8 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
       id: componentId,
       isDisabled: isDisabled || contextIsDisabled,
       onClick,
-      ref: reference,
+      onKeyDown,
+      ref,
       'data-testid': testId,
       isSmall,
     };
@@ -291,6 +310,8 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
             hrefLang,
             rel,
             target,
+            ref: anchorRef,
+            id: anchorId,
           }
         : {};
 
@@ -311,7 +332,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
                 handleClick();
               }
             },
-            ref: reference,
+            ref,
             tabIndex: 0,
           }
         : {};

package/src/select/Select.js

@@ -1,3 +1,4 @@
+import { useId } from '@radix-ui/react-id';
 import { useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
@@ -6,12 +7,13 @@ import { useIntl } from 'react-intl';
 
 import Button from '../button';
 import Chevron from '../chevron';
-import { Position, getSimpleRandomId } from '../common';
+import { Position } from '../common';
 import BottomSheet from '../common/bottomSheet';
 import { stopPropagation } from '../common/domHelpers';
 import { useLayout } from '../common/hooks';
 import Panel from '../common/panel';
 import Drawer from '../drawer';
+import { useInputAttributes } from '../inputs/contexts';
 
 import messages from './Select.messages';
 import Option from './option';
@@ -102,6 +104,8 @@ export default function Select({
   dropdownProps,
   buttonProps,
 }) {
+  const inputAttributes = useInputAttributes();
+
   const { formatMessage } = useIntl();
   const { isModern } = useTheme();
   const s = (className) => classNamesProp[className] || className;
@@ -118,8 +122,6 @@ export default function Select({
   const isSearchEnabled = !!onSearchChange || !!search;
   const isDropdownAutoWidth = dropdownWidth == null;
 
-  const fallbackButtonId = useMemo(() => getSimpleRandomId('np-select-'), []);
-
   const options = useMemo(() => {
     if (!search || !searchValue) {
       return defaultOptions;
@@ -128,16 +130,16 @@ export default function Select({
     return defaultOptions.filter(isSearchableOption).filter((option) => {
       if (typeof search === 'function') {
         return search(option, searchValue);
-      } else {
-        return defaultFilterFunction(option, searchValue);
       }
+      return defaultFilterFunction(option, searchValue);
     });
   }, [defaultOptions, search, searchValue]);
 
   const selectableOptions = useMemo(() => options.filter(isActionableOption), [options]);
   const focusedOption = selectableOptions[keyboardFocusedOptionIndex];
 
-  const computedId = id || fallbackButtonId;
+  const fallbackButtonId = useId();
+  const computedId = id || inputAttributes.id || fallbackButtonId;
   const listboxId = `${computedId}-listbox`;
   const searchBoxId = `${computedId}-searchbox`;
 
@@ -280,7 +282,7 @@ export default function Select({
   useEffect(() => {
     if (open) {
       if (!isMobile || searchValue) {
-        if (isSearchEnabled && !!searchBoxReference.current) {
+        if (isSearchEnabled && searchBoxReference.current) {
           searchBoxReference.current.focus();
         }
         if (
@@ -496,6 +498,7 @@ export default function Select({
     >
       <Button
         ref={dropdownButtonReference}
+        {...inputAttributes}
         id={computedId}
         block={block}
         size={size}
@@ -585,9 +588,6 @@ Select.propTypes = {
    * if `function` you can define your own search function to implement custom search experience. This search function used while filtering the options array. The custom search function takes two parameters. First is the option the second is the keyword.
    */
   search: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
-  onChange: PropTypes.func.isRequired,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
   options: PropTypes.arrayOf(
     PropTypes.shape({
       value: PropTypes.any,
@@ -602,17 +602,20 @@ Select.propTypes = {
       searchStrings: PropTypes.arrayOf(PropTypes.string),
     }),
   ).isRequired,
-  /**
-   * To have full control of your search value and response use `onSearchChange` function combined with `searchValue` and custom filtering on the options array.
-   * DO NOT USE TOGETHER WITH `search` PROPERTY
-   */
-  onSearchChange: PropTypes.func,
   searchValue: PropTypes.string,
   searchPlaceholder: PropTypes.string,
   classNames: PropTypes.objectOf(PropTypes.string),
   dropdownUp: PropTypes.bool,
   buttonProps: PropTypes.object,
   dropdownProps: PropTypes.object,
+  onChange: PropTypes.func.isRequired,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  /**
+   * To have full control of your search value and response use `onSearchChange` function combined with `searchValue` and custom filtering on the options array.
+   * DO NOT USE TOGETHER WITH `search` PROPERTY
+   */
+  onSearchChange: PropTypes.func,
 };
 
 Select.defaultProps = {

package/src/select/Select.rtl.spec.tsx

@@ -0,0 +1,17 @@
+import { Field } from '../field/Field';
+import { mockMatchMedia, render, screen } from '../test-utils';
+import Select from './Select';
+
+mockMatchMedia();
+
+describe('Select', () => {
+  it('supports `Field` for labeling', () => {
+    const options = [{ value: 'USD', label: 'USD' }];
+    render(
+      <Field label="Currency">
+        <Select options={options} selected={options[0]} onChange={() => {}} />
+      </Field>,
+    );
+    expect(screen.getByLabelText('Currency')).toHaveTextContent('USD');
+  });
+});