@transferwise/components 46.42.1 → 46.44.0

package/build/main.css

@@ -657,8 +657,6 @@ div.critical-comms .critical-comms-body {
   gap: var(--size-16);
   padding: 8px;
   padding: var(--size-8);
-  margin: 8px;
-  margin: var(--size-8);
 }
 @media (max-width: 767px) {
   .carousel {
@@ -705,6 +703,15 @@ div.critical-comms .critical-comms-body {
     height: 280px;
   }
 }
+@media (min-width: 768px) {
+  .carousel-wrapper {
+    overflow: visible;
+  }
+  .carousel {
+    margin: 0 calc(-1 * 8px);
+    margin: 0 calc(-1 * var(--size-8));
+  }
+}
 @media (max-width: 1199px) {
   .carousel__card {
     min-width: 242px;

package/build/styles/carousel/Carousel.css

@@ -12,8 +12,6 @@
   gap: var(--size-16);
   padding: 8px;
   padding: var(--size-8);
-  margin: 8px;
-  margin: var(--size-8);
 }
 @media (max-width: 767px) {
   .carousel {
@@ -60,6 +58,15 @@
     height: 280px;
   }
 }
+@media (min-width: 768px) {
+  .carousel-wrapper {
+    overflow: visible;
+  }
+  .carousel {
+    margin: 0 calc(-1 * 8px);
+    margin: 0 calc(-1 * var(--size-8));
+  }
+}
 @media (max-width: 1199px) {
   .carousel__card {
     min-width: 242px;

package/build/styles/main.css

@@ -657,8 +657,6 @@ div.critical-comms .critical-comms-body {
   gap: var(--size-16);
   padding: 8px;
   padding: var(--size-8);
-  margin: 8px;
-  margin: var(--size-8);
 }
 @media (max-width: 767px) {
   .carousel {
@@ -705,6 +703,15 @@ div.critical-comms .critical-comms-body {
     height: 280px;
   }
 }
+@media (min-width: 768px) {
+  .carousel-wrapper {
+    overflow: visible;
+  }
+  .carousel {
+    margin: 0 calc(-1 * 8px);
+    margin: 0 calc(-1 * var(--size-8));
+  }
+}
 @media (max-width: 1199px) {
   .carousel__card {
     min-width: 242px;

package/build/types/carousel/Carousel.d.ts

@@ -3,6 +3,7 @@ import type { PromoCardLinkProps } from '../promoCard/PromoCard';
 export type CarouselCardCommon = {
     id: string;
     href?: string;
+    hrefTarget?: HTMLAnchorElement['target'];
     onClick?: () => void;
     className?: string;
     styles?: CSSProperties;

package/build/types/carousel/Carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/carousel/Carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAIxF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAGjE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAAG;IACrD,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC1B,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,GAAG;IACnD,IAAI,EAAE,OAAO,CAAC;CACf,GAAG,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;AAErC,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;AACnE,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAUD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAkSrC,CAAC;AAYF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/carousel/Carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAIxF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAGjE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAAG;IACrD,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC1B,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,GAAG;IACnD,IAAI,EAAE,OAAO,CAAC;CACf,GAAG,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;AAErC,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;AACnE,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAUD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAmSrC,CAAC;AAYF,eAAe,QAAQ,CAAC"}

package/build/types/checkboxButton/CheckboxButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.d.ts","sourceRoot":"","sources":["../../../src/checkboxButton/CheckboxButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAc,MAAM,OAAO,CAAC;AAExD,MAAM,MAAM,mBAAmB,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAExE,QAAA,MAAM,cAAc,kHAgBnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"CheckboxButton.d.ts","sourceRoot":"","sources":["../../../src/checkboxButton/CheckboxButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAc,MAAM,OAAO,CAAC;AAIxD,MAAM,MAAM,mBAAmB,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAExE,QAAA,MAAM,cAAc,kHAsBlB,CAAC;AAEH,eAAe,cAAc,CAAC"}

package/build/types/field/Field.d.ts

@@ -2,7 +2,8 @@ import { Sentiment } from '../common';
 export type FieldProps = {
     /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */
     id?: string | null;
-    label: React.ReactNode;
+    /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */
+    label?: React.ReactNode;
     /** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */
     hint?: React.ReactNode;
     message?: React.ReactNode;

package/build/types/field/Field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/field/Field.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAUtC,MAAM,MAAM,UAAU,GAAG;IACvB,6IAA6I;IAC7I,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;IACjG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,KAAK,4FAQf,UAAU,gCA4CZ,CAAC"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/field/Field.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAUtC,MAAM,MAAM,UAAU,GAAG;IACvB,6IAA6I;IAC7I,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,sGAAsG;IACtG,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;IACjG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,KAAK,4FAQf,UAAU,gCAiDZ,CAAC"}

package/build/types/inputs/InputGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../src/inputs/InputGroup.tsx"],"names":[],"mappings":"AAeA,wBAAgB,gBAAgB;;;EAQ/B;AAED,UAAU,eAAe;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAiBD,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,+BAmBjB"}
+{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../src/inputs/InputGroup.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,gBAAgB;;;EAQ/B;AAED,UAAU,eAAe;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAiBD,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,+BAkCjB"}

package/build/types/inputs/SelectInput.d.ts

@@ -1,4 +1,5 @@
 import { Merge } from '../utils';
+import { WithInputAttributesProps } from './contexts';
 export interface SelectInputOptionItem<T = string> {
     type: 'option';
     value: T;
@@ -41,6 +42,7 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
     disabled?: boolean;
     size?: 'sm' | 'md' | 'lg';
     className?: string;
+    UNSAFE_triggerButtonProps?: WithInputAttributesProps['inputAttributes'];
     onFilterChange?: (args: {
         query: string;
         queryNormalized: string | null;
@@ -49,7 +51,7 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
     onClose?: () => void;
     onClear?: () => void;
 }
-export declare function SelectInput<T = string, M extends boolean = false>({ id: idProp, name, multiple, placeholder, items, defaultValue, value: controlledValue, compareValues, renderValue, renderFooter, renderTrigger, filterable, filterPlaceholder, disabled, size, className, onFilterChange, onChange, onClose, onClear, }: SelectInputProps<T, M>): import("react").JSX.Element;
+export declare function SelectInput<T = string, M extends boolean = false>({ id: idProp, name, multiple, placeholder, items, defaultValue, value: controlledValue, compareValues, renderValue, renderFooter, renderTrigger, filterable, filterPlaceholder, disabled, size, className, UNSAFE_triggerButtonProps, onFilterChange, onChange, onClose, onClear, }: SelectInputProps<T, M>): import("react").JSX.Element;
 type SelectInputTriggerButtonElementType = 'button' | React.ComponentType;
 export type SelectInputTriggerButtonProps<T extends SelectInputTriggerButtonElementType = 'button'> = Merge<React.ComponentPropsWithoutRef<T>, {
     as?: T;

package/build/types/inputs/SelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.42.1",
+  "version": "46.44.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/carousel/Carousel.css

@@ -12,8 +12,6 @@
   gap: var(--size-16);
   padding: 8px;
   padding: var(--size-8);
-  margin: 8px;
-  margin: var(--size-8);
 }
 @media (max-width: 767px) {
   .carousel {
@@ -60,6 +58,15 @@
     height: 280px;
   }
 }
+@media (min-width: 768px) {
+  .carousel-wrapper {
+    overflow: visible;
+  }
+  .carousel {
+    margin: 0 calc(-1 * 8px);
+    margin: 0 calc(-1 * var(--size-8));
+  }
+}
 @media (max-width: 1199px) {
   .carousel__card {
     min-width: 242px;

package/src/carousel/Carousel.less

@@ -11,7 +11,6 @@
   scroll-behavior: smooth;
   gap: var(--size-16);
   padding: var(--size-8);
-  margin: var(--size-8);
 }
 
 @media (--screen-sm-max) {
@@ -60,6 +59,16 @@
   }
 }
 
+@media (--screen-md) {
+  .carousel-wrapper  {
+    overflow: visible;
+  }
+
+  .carousel {
+    margin: 0 calc(-1 * var(--size-8));
+  }
+}
+
 
 @media (--screen-lg-max) {
   .carousel__card {

package/src/carousel/Carousel.story.tsx

@@ -43,6 +43,7 @@ const carouselCards: CarouselCard[] = [
     id: 'SHOP_OR_STALL',
     type: 'anchor',
     href: 'https://wise.com',
+    hrefTarget: '_blank',
     onClick: () => {},
     styles: {
       backgroundImage:

package/src/carousel/Carousel.tsx

@@ -10,6 +10,7 @@ import PromoCard from '../promoCard/PromoCard';
 export type CarouselCardCommon = {
   id: string;
   href?: string;
+  hrefTarget?: HTMLAnchorElement['target'];
   onClick?: () => void;
   className?: string;
   styles?: CSSProperties;
@@ -300,6 +301,7 @@ const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }
                   }
                 }}
                 href={card.href}
+                target={card.hrefTarget}
                 rel="noreferrer"
                 onKeyDown={(event) => handleOnKeyDown(event, index)}
               >

package/src/checkbox/Checkbox.spec.tsx

@@ -1,6 +1,7 @@
 import { render, fireEvent, screen } from '@testing-library/react';
 
 import Checkbox, { CheckboxProps } from '.';
+import { Field } from '../field/Field';
 
 describe('Checkbox', () => {
   let props: CheckboxProps;
@@ -115,6 +116,18 @@ describe('Checkbox', () => {
     expect(getCheckboxContainer(container)).toHaveClass('checkbox-lg');
   });
 
+  it('supports `Field` for error messages', () => {
+    render(
+      <Field message="Something went wrong" sentiment="negative">
+        <Checkbox {...props} checked />
+      </Field>,
+    );
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toBeInvalid();
+    expect(checkbox).toHaveAccessibleDescription('Something went wrong');
+  });
+
   const getCheckboxContainer = (container: HTMLElement) => container.querySelector('.np-checkbox');
   const getLabel = () => screen.getByText('hello').parentElement!;
   const getCheckbox = () => screen.getByRole('checkbox');

package/src/checkbox/Checkbox.story.tsx

@@ -1,5 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 
+import { Field } from '../field/Field';
 import { lorem10, storyConfig } from '../test-utils';
 
 import Checkbox from './Checkbox';
@@ -9,6 +11,7 @@ export default {
   title: 'Forms/Checkbox',
   args: {
     label: 'This is the label',
+    onChange: fn(),
   },
   tags: ['autodocs'],
 } satisfies Meta<typeof Checkbox>;
@@ -37,3 +40,13 @@ export const Multiple: Story = storyConfig(
 export const MultipleMobile: Story = storyConfig(Multiple, {
   variants: ['default', 'dark', 'rtl', 'mobile'],
 });
+
+export const WithinField = {
+  decorators: [
+    (Story) => (
+      <Field message="Something went wrong" sentiment="negative">
+        <Story />
+      </Field>
+    ),
+  ],
+} satisfies Story;

package/src/checkboxButton/CheckboxButton.tsx

@@ -1,12 +1,20 @@
 import classNames from 'classnames';
 import { InputHTMLAttributes, forwardRef } from 'react';
 
+import { useInputAttributes } from '../inputs/contexts';
+
 export type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement>;
 
-const CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(
-  ({ checked, className, disabled, onChange, ...rest }, reference) => (
+const CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(function CheckboxButton(
+  { checked, className, disabled, onChange, ...rest },
+  reference,
+) {
+  const inputAttributes = useInputAttributes();
+
+  return (
     <span className={classNames('np-checkbox-button', className, disabled && 'disabled')}>
       <input
+        {...inputAttributes}
         {...rest}
         ref={reference}
         type="checkbox"
@@ -18,7 +26,7 @@ const CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(
         <span className="tw-checkbox-check" />
       </span>
     </span>
-  ),
-);
+  );
+});
 
 export default CheckboxButton;

package/src/field/Field.tsx

@@ -14,7 +14,8 @@ import { Label } from '../label/Label';
 export type FieldProps = {
   /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */
   id?: string | null;
-  label: React.ReactNode;
+  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */
+  label?: React.ReactNode;
   /** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */
   hint?: React.ReactNode;
   message?: React.ReactNode;
@@ -62,10 +63,15 @@ export const Field = ({
                 className,
               )}
             >
-              <Label id={labelId} htmlFor={inputId}>
-                {label}
-                {children}
-              </Label>
+              {label != null ? (
+                <Label id={labelId} htmlFor={inputId}>
+                  {label}
+                  {children}
+                </Label>
+              ) : (
+                children
+              )}
+
               {message && (
                 <InlineAlert type={sentiment} id={descriptionId}>
                   {message}

package/src/inputs/InputGroup.spec.tsx

@@ -0,0 +1,26 @@
+import { Search } from '@transferwise/icons';
+
+import { Field } from '../field/Field';
+import { mockResizeObserver, render, screen } from '../test-utils';
+import { Input } from './Input';
+import { InputGroup } from './InputGroup';
+
+mockResizeObserver();
+
+describe('InputGroup', () => {
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field label="Search…">
+        <InputGroup
+          addonStart={{
+            content: <Search size={24} />,
+            initialContentWidth: 24,
+          }}
+        >
+          <Input />
+        </InputGroup>
+      </Field>,
+    );
+    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Search…/);
+  });
+});

package/src/inputs/InputGroup.tsx

@@ -3,6 +3,13 @@ import { createContext, useContext, useMemo, useRef, useState } from 'react';
 
 import { useResizeObserver } from '../common/hooks/useResizeObserver';
 import { cssValueWithUnit } from '../utilities/cssValueWithUnit';
+import {
+  FieldLabelIdContextProvider,
+  InputDescribedByProvider,
+  InputIdContextProvider,
+  InputInvalidProvider,
+  useInputAttributes,
+} from './contexts';
 
 type InputPaddingContextType = [
   number | string | undefined,
@@ -60,23 +67,38 @@ export function InputGroup({
   className,
   children,
 }: InputGroupProps) {
+  const inputAttributes = useInputAttributes({ nonLabelable: true });
+
   const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));
   const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));
 
   return (
-    <InputPaddingStartContext.Provider
-      value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}
-    >
-      <InputPaddingEndContext.Provider
-        value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}
-      >
-        <fieldset disabled={disabled} className={classNames(className, 'np-input-group')}>
-          {addonStart != null ? <InputAddon placement="start" {...addonStart} /> : null}
-          {children}
-          {addonEnd != null ? <InputAddon placement="end" {...addonEnd} /> : null}
-        </fieldset>
-      </InputPaddingEndContext.Provider>
-    </InputPaddingStartContext.Provider>
+    /* Prevent nested controls from being labeled redundantly */
+    <FieldLabelIdContextProvider value={undefined}>
+      <InputIdContextProvider value={undefined}>
+        <InputDescribedByProvider value={undefined}>
+          <InputInvalidProvider value={undefined}>
+            <InputPaddingStartContext.Provider
+              value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}
+            >
+              <InputPaddingEndContext.Provider
+                value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}
+              >
+                <fieldset
+                  {...inputAttributes}
+                  disabled={disabled}
+                  className={classNames(className, 'np-input-group')}
+                >
+                  {addonStart != null ? <InputAddon placement="start" {...addonStart} /> : null}
+                  {children}
+                  {addonEnd != null ? <InputAddon placement="end" {...addonEnd} /> : null}
+                </fieldset>
+              </InputPaddingEndContext.Provider>
+            </InputPaddingStartContext.Provider>
+          </InputInvalidProvider>
+        </InputDescribedByProvider>
+      </InputIdContextProvider>
+    </FieldLabelIdContextProvider>
   );
 }
 

package/src/inputs/SearchInput.spec.tsx

@@ -0,0 +1,16 @@
+import { Field } from '../field/Field';
+import { mockResizeObserver, render, screen } from '../test-utils';
+import { SearchInput } from './SearchInput';
+
+mockResizeObserver();
+
+describe('SearchInput', () => {
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field label="Search…">
+        <SearchInput />
+      </Field>,
+    );
+    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Search…/);
+  });
+});

package/src/inputs/SelectInput.spec.tsx

@@ -214,6 +214,6 @@ describe('SelectInput', () => {
         <SelectInput items={[{ type: 'option', value: 'USD' }]} value="USD" />
       </Field>,
     );
-    expect(screen.getByLabelText('Currency')).toHaveAttribute('aria-haspopup');
+    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Currency/);
   });
 });

package/src/inputs/SelectInput.tsx

@@ -24,7 +24,7 @@ import { Merge } from '../utils';
 import { BottomSheet } from './_BottomSheet';
 import { ButtonInput } from './_ButtonInput';
 import { Popover } from './_Popover';
-import { useInputAttributes } from './contexts';
+import { useInputAttributes, WithInputAttributesProps } from './contexts';
 import { InputGroup } from './InputGroup';
 import { SearchInput } from './SearchInput';
 import messages from './SelectInput.messages';
@@ -162,6 +162,7 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
   disabled?: boolean;
   size?: 'sm' | 'md' | 'lg';
   className?: string;
+  UNSAFE_triggerButtonProps?: WithInputAttributesProps['inputAttributes'];
   onFilterChange?: (args: { query: string; queryNormalized: string | null }) => void;
   onChange?: (value: M extends true ? T[] : T) => void;
   onClose?: () => void;
@@ -246,6 +247,7 @@ export function SelectInput<T = string, M extends boolean = false>({
   disabled,
   size = 'md',
   className,
+  UNSAFE_triggerButtonProps,
   onFilterChange = noop,
   onChange,
   onClose,
@@ -321,6 +323,7 @@ export function SelectInput<T = string, M extends boolean = false>({
                     triggerRef.current = node;
                   },
                   ...inputAttributes,
+                  ...UNSAFE_triggerButtonProps,
                   id,
                   ...mergeProps(
                     {

package/src/main.css

@@ -657,8 +657,6 @@ div.critical-comms .critical-comms-body {
   gap: var(--size-16);
   padding: 8px;
   padding: var(--size-8);
-  margin: 8px;
-  margin: var(--size-8);
 }
 @media (max-width: 767px) {
   .carousel {
@@ -705,6 +703,15 @@ div.critical-comms .critical-comms-body {
     height: 280px;
   }
 }
+@media (min-width: 768px) {
+  .carousel-wrapper {
+    overflow: visible;
+  }
+  .carousel {
+    margin: 0 calc(-1 * 8px);
+    margin: 0 calc(-1 * var(--size-8));
+  }
+}
 @media (max-width: 1199px) {
   .carousel__card {
     min-width: 242px;