@transferwise/components 46.43.0 → 46.44.1

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/inlineAlert/InlineAlert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InlineAlert.d.ts","sourceRoot":"","sources":["../../../src/inlineAlert/InlineAlert.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,SAAS,EAAQ,MAAM,WAAW,CAAC;AAG5C,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,EAAE,EACF,IAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE,gBAAgB,+BAiBlB"}
+{"version":3,"file":"InlineAlert.d.ts","sourceRoot":"","sources":["../../../src/inlineAlert/InlineAlert.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,SAAS,EAAQ,MAAM,WAAW,CAAC;AAG5C,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAUD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,EAAE,EACF,IAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE,gBAAgB,+BAelB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.43.0",
+  "version": "46.44.1",
   "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/inlineAlert/InlineAlert.spec.tsx

@@ -28,6 +28,7 @@ describe('InlineAlert', () => {
       const component = screen.getByRole('alert');
 
       expect(component).toHaveClass('alert-info');
+      expect(screen.queryByTestId('status-icon')).not.toBeInTheDocument();
     });
 
     it('renders neutral', () => {
@@ -35,6 +36,7 @@ describe('InlineAlert', () => {
       const component = screen.getByRole('alert');
 
       expect(component).toHaveClass('alert-neutral');
+      expect(screen.queryByTestId('status-icon')).not.toBeInTheDocument();
     });
 
     it('renders success', () => {
@@ -42,6 +44,7 @@ describe('InlineAlert', () => {
       const component = screen.getByRole('alert');
 
       expect(component).toHaveClass('alert-success');
+      expect(screen.getByTestId('status-icon')).toBeInTheDocument();
     });
 
     it('renders positive', () => {
@@ -49,6 +52,7 @@ describe('InlineAlert', () => {
       const component = screen.getByRole('alert');
 
       expect(component).toHaveClass('alert-positive');
+      expect(screen.getByTestId('status-icon')).toBeInTheDocument();
     });
 
     it('renders error as danger', () => {
@@ -56,6 +60,7 @@ describe('InlineAlert', () => {
       const component = screen.getByRole('alert');
 
       expect(component).toHaveClass('alert-danger');
+      expect(screen.getByTestId('status-icon')).toBeInTheDocument();
     });
 
     it('renders negative as danger', () => {
@@ -63,6 +68,7 @@ describe('InlineAlert', () => {
       const component = screen.getByRole('alert');
 
       expect(component).toHaveClass('alert-danger');
+      expect(screen.getByTestId('status-icon')).toBeInTheDocument();
     });
 
     it('renders warning', () => {
@@ -70,6 +76,7 @@ describe('InlineAlert', () => {
       const component = screen.getByRole('alert');
 
       expect(component).toHaveClass('alert-warning');
+      expect(screen.getByTestId('status-icon')).toBeInTheDocument();
     });
   });
 });

package/src/inlineAlert/InlineAlert.tsx

@@ -11,6 +11,14 @@ export interface InlineAlertProps {
   children: ReactNode;
 }
 
+const iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([
+  Sentiment.NEGATIVE,
+  Sentiment.ERROR,
+  Sentiment.POSITIVE,
+  Sentiment.SUCCESS,
+  Sentiment.WARNING,
+]);
+
 export default function InlineAlert({
   id,
   type = 'neutral',
@@ -27,9 +35,7 @@ export default function InlineAlert({
         className,
       )}
     >
-      {type !== Sentiment.NEUTRAL && type !== Sentiment.PENDING && (
-        <StatusIcon sentiment={type} size={Size.SMALL} />
-      )}
+      {iconTypes.has(type) && <StatusIcon sentiment={type} size={Size.SMALL} />}
       <div className="np-text-body-default">{children}</div>
     </div>
   );

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;