@transferwise/components 46.64.0 → 46.66.0

package/build/types/common/bottomSheet/BottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../../src/common/bottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,iBAAiB,EACjB,cAAc,EAIf,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAa7C,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAC9C;IACE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,IAAI,CAAC;IAClD,IAAI,EAAE,OAAO,CAAC;CACf,GAAG,WAAW,CAChB,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,WAAW,UAAW,gBAAgB,gCAoL3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../../src/common/bottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,cAAc,EACd,iBAAiB,EACjB,cAAc,EAIf,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAa7C,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAC9C;IACE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,IAAI,CAAC;IAClD,IAAI,EAAE,OAAO,CAAC;CACf,GAAG,WAAW,GACb,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,iBAAiB,CAAC,CACnE,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,WAAW,uBAAmC,gBAAgB,gCA2LnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/build/types/decision/Decision.d.ts

@@ -1,5 +1,6 @@
 import { SizeSmall, SizeMedium } from '../common';
 interface DecisionOption {
+    'aria-label'?: string;
     description?: React.ReactNode;
     disabled?: boolean;
     href?: string;

package/build/types/decision/Decision.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Decision.d.ts","sourceRoot":"","sources":["../../../src/decision/Decision.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoB,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAKpE,UAAU,cAAc;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC,yBAAyB,CAAC;IACzC,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;KACvB,CAAC;IACF,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC1D,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,oBAAY,oBAAoB;IAC9B,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,eAAe,oBAAoB;CACpC;AAED,oBAAY,YAAY;IACtB,UAAU,eAAe;CAC1B;AAED,MAAM,WAAW,aAAa;IAC5B,yCAAyC;IACzC,OAAO,EAAE,SAAS,cAAc,EAAE,CAAC;IACnC,iDAAiD;IACjD,YAAY,CAAC,EAAE,GAAG,oBAAoB,EAAE,CAAC;IACzC,iDAAiD;IACjD,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC9B,+HAA+H;IAC/H,IAAI,CAAC,EAAE,GAAG,YAAY,EAAE,CAAC;IAEzB,qDAAqD;IACrD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,QAAQ,sFAOX,aAAa,uCA4Ef,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Decision.d.ts","sourceRoot":"","sources":["../../../src/decision/Decision.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoB,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAKpE,UAAU,cAAc;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC,yBAAyB,CAAC;IACzC,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;KACvB,CAAC;IACF,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC1D,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,oBAAY,oBAAoB;IAC9B,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,eAAe,oBAAoB;CACpC;AAED,oBAAY,YAAY;IACtB,UAAU,eAAe;CAC1B;AAED,MAAM,WAAW,aAAa;IAC5B,yCAAyC;IACzC,OAAO,EAAE,SAAS,cAAc,EAAE,CAAC;IACnC,iDAAiD;IACjD,YAAY,CAAC,EAAE,GAAG,oBAAoB,EAAE,CAAC;IACzC,iDAAiD;IACjD,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC9B,+HAA+H;IAC/H,IAAI,CAAC,EAAE,GAAG,YAAY,EAAE,CAAC;IAEzB,qDAAqD;IACrD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,QAAQ,sFAOX,aAAa,uCAmGf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/build/types/drawer/Drawer.d.ts

@@ -1,5 +1,6 @@
+import { HTMLAttributes } from 'react';
 import { Position } from '../common';
-export interface DrawerProps {
+export type DrawerProps = {
     /** The content to appear in the drawer body. */
     children?: React.ReactNode;
     className?: string;
@@ -13,6 +14,6 @@ export interface DrawerProps {
     position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;
     /** The action to perform on close click. */
     onClose?: (event: KeyboardEvent | React.MouseEvent) => void;
-}
-export default function Drawer({ children, className, footerContent, headerTitle, onClose, open, position, }: DrawerProps): import("react").JSX.Element;
+} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;
+export default function Drawer({ children, className, footerContent, headerTitle, onClose, open, position, role, 'aria-labelledby': ariaLabelledBy, }: DrawerProps): import("react").JSX.Element;
 //# sourceMappingURL=Drawer.d.ts.map

package/build/types/drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAc,MAAM,WAAW,CAAC;AASjD,MAAM,WAAW,WAAW;IAC1B,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,kDAAkD;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uGAAuG;IACvG,QAAQ,CAAC,EAAE,GAAG,QAAQ,CAAC,IAAI,GAAG,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC;IACjE,4CAA4C;IAC5C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC7D;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,aAAa,EACb,WAAW,EACX,OAAO,EACP,IAAY,EACZ,QAAkB,GACnB,EAAE,WAAW,+BAuCb"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAqB,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,QAAQ,EAAc,MAAM,WAAW,CAAC;AASjD,MAAM,MAAM,WAAW,GAAG;IACxB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,kDAAkD;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uGAAuG;IACvG,QAAQ,CAAC,EAAE,GAAG,QAAQ,CAAC,IAAI,GAAG,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC;IACjE,4CAA4C;IAC5C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC7D,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,iBAAiB,CAAC,CAAC;AAErE,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,aAAa,EACb,WAAW,EACX,OAAO,EACP,IAAY,EACZ,QAAkB,EAClB,IAAe,EACf,iBAAiB,EAAE,cAAc,GAClC,EAAE,WAAW,+BAuCb"}

package/build/types/flowNavigation/FlowNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/flowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAOA,OAAgB,EAAE,KAAK,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAOxD,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wGAAwG;IACxG,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;CACxB;AAED,QAAA,MAAM,cAAc,kEAQjB,mBAAmB,gCAkErB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/flowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAOA,OAAgB,EAAE,KAAK,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAOxD,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wGAAwG;IACxG,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;CACxB;AAED,QAAA,MAAM,cAAc,kEAQjB,mBAAmB,gCA8DrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/build/types/flowNavigation/animatedLabel/AnimatedLabel.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+import type { Step } from '../../stepper/Stepper';
 export interface AnimatedLabelProps {
     activeLabel: number;
     className?: string;
-    labels: readonly React.ReactNode[];
+    steps: readonly Step[];
 }
-declare const AnimatedLabel: ({ activeLabel, className, labels }: AnimatedLabelProps) => React.JSX.Element;
+declare const AnimatedLabel: ({ activeLabel, className, steps }: AnimatedLabelProps) => import("react").JSX.Element;
 export default AnimatedLabel;
 //# sourceMappingURL=AnimatedLabel.d.ts.map

package/build/types/flowNavigation/animatedLabel/AnimatedLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedLabel.d.ts","sourceRoot":"","sources":["../../../../src/flowNavigation/animatedLabel/AnimatedLabel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,SAAS,KAAK,CAAC,SAAS,EAAE,CAAC;CACpC;AAED,QAAA,MAAM,aAAa,uCAAwC,kBAAkB,sBAkB5E,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"AnimatedLabel.d.ts","sourceRoot":"","sources":["../../../../src/flowNavigation/animatedLabel/AnimatedLabel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAOlD,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;CACxB;AAED,QAAA,MAAM,aAAa,sCAAuC,kBAAkB,gCAgG3E,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/build/types/switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/switch/Switch.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAwB,UAAU,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAG7C,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG;IACtC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yGAAyG;IACzG,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;CACxD,CAAC;AAEF,QAAA,MAAM,MAAM,UAAW,WAAW,gCAsEjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAwB,UAAU,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAG7C,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG;IACtC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yGAAyG;IACzG,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;CACxD,CAAC;AAEF,QAAA,MAAM,MAAM,UAAW,WAAW,gCAiDjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/build/types/tile/Tile.d.ts

@@ -1,6 +1,8 @@
 import { Size } from '../common';
 export interface TileProps {
     /** Classes to apply to the Tile container */
+    /** A label for the accordion item, used for accessibility purposes. */
+    'aria-label'?: string;
     className?: string;
     description?: React.ReactNode;
     disabled?: boolean;
@@ -14,5 +16,5 @@ export interface TileProps {
     size?: `${Size.SMALL | Size.MEDIUM}`;
     title: React.ReactNode;
 }
-export default function Tile({ className, description, disabled, href, target, media, onClick, size, title, }: TileProps): import("react").JSX.Element;
+export default function Tile({ 'aria-label': ariaLabel, className, description, disabled, href, target, media, onClick, size, title, }: TileProps): import("react").JSX.Element;
 //# sourceMappingURL=Tile.d.ts.map

package/build/types/tile/Tile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../src/tile/Tile.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAc,MAAM,WAAW,CAAC;AAG7C,MAAM,WAAW,SAAS;IACxB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC,yBAAyB,CAAC;IACzC,qCAAqC;IACrC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACpF,+BAA+B;IAC/B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;IACrC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,SAAS,EACT,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,KAAK,EACL,OAAO,EACP,IAAW,EACX,KAAK,GACN,EAAE,SAAS,+BA2CX"}
+{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../src/tile/Tile.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAc,MAAM,WAAW,CAAC;AAG7C,MAAM,WAAW,SAAS;IACxB,6CAA6C;IAC7C,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC,yBAAyB,CAAC;IACzC,qCAAqC;IACrC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACpF,+BAA+B;IAC/B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;IACrC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,KAAK,EACL,OAAO,EACP,IAAW,EACX,KAAK,GACN,EAAE,SAAS,+BA4CX"}

package/package.json

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

package/src/common/bottomSheet/BottomSheet.tsx

@@ -1,6 +1,7 @@
 import { clsx } from 'clsx';
 import {
   CSSProperties,
+  HTMLAttributes,
   PropsWithChildren,
   SyntheticEvent,
   useContext,
@@ -30,7 +31,8 @@ export type BottomSheetProps = PropsWithChildren<
   {
     onClose?: (event: Event | SyntheticEvent) => void;
     open: boolean;
-  } & CommonProps
+  } & CommonProps &
+    Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>
 >;
 
 /**
@@ -39,7 +41,7 @@ export type BottomSheetProps = PropsWithChildren<
  * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet
  *
  */
-const BottomSheet = (props: BottomSheetProps) => {
+const BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {
   const bottomSheetReference = useRef<HTMLDivElement>(null);
   const topBarReference = useRef<HTMLDivElement>(null);
   const contentReference = useRef<HTMLDivElement>(null);
@@ -181,7 +183,13 @@ const BottomSheet = (props: BottomSheetProps) => {
   const overlayId = useContext(OverlayIdContext);
 
   return is400Zoom ? (
-    <Drawer open={props.open} className={props.className} onClose={close}>
+    <Drawer
+      aria-labelledby={props['aria-labelledby']}
+      role={role}
+      open={props.open}
+      className={props.className}
+      onClose={close}
+    >
       {props.children}
     </Drawer>
   ) : (
@@ -195,7 +203,8 @@ const BottomSheet = (props: BottomSheetProps) => {
         {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
         <div
           id={overlayId}
-          role="dialog"
+          aria-labelledby={props['aria-labelledby']}
+          role={role}
           aria-modal
           onTouchStart={onSwipeStart}
           onTouchMove={onSwipeMove}

package/src/decision/Decision.spec.tsx

@@ -0,0 +1,166 @@
+import Avatar from '../avatar';
+import { Breakpoint, Size } from '../common';
+import { mockMatchMedia } from '../mocks';
+import { render, screen } from '../test-utils';
+
+import Decision, { DecisionPresentation, DecisionType } from '.';
+import { DecisionProps } from './Decision';
+
+mockMatchMedia(jest);
+
+describe('Decision', () => {
+  const commonProps: DecisionProps = {
+    options: [
+      {
+        media: {
+          list: <Avatar type="initials">HM</Avatar>,
+          block: <img src="img.jpg" alt="alt" />,
+        },
+        href: '#href',
+        title: 'title',
+        description: 'description',
+        'aria-label': 'A label',
+        onClick: jest.fn(),
+      },
+    ],
+    presentation: DecisionPresentation.LIST_BLOCK,
+    type: DecisionType.NAVIGATION,
+  };
+
+  const initialInnerWidth = window.innerWidth;
+  const resetClientWidth = (width: number) => {
+    window.innerWidth = width;
+  };
+
+  afterAll(() => {
+    window.innerWidth = initialInnerWidth;
+  });
+
+  beforeEach(() => {
+    resetClientWidth(Breakpoint.EXTRA_SMALL - 1);
+  });
+
+  describe(`when presentation is ${DecisionPresentation.LIST_BLOCK}`, () => {
+    const props = { ...commonProps };
+
+    it('renders only Navigation Option before first breakpoint', () => {
+      render(<Decision {...props} />);
+      const element = screen.getByLabelText('A label');
+      expect(element).toBeInTheDocument();
+
+      expectElementToBeNavigationOption(element);
+      expectElementNotToBeTile(element);
+    });
+
+    it('renders only Tile after first breakpoint', () => {
+      resetClientWidth(Breakpoint.SMALL);
+
+      render(<Decision {...props} />);
+      const element = screen.getByLabelText('A label');
+      expect(element).toBeInTheDocument();
+
+      expectElementNotToBeNavigationOption(element);
+      expectElementToBeTile(element);
+      expectElementNotToBeSmallTile(element);
+    });
+  });
+
+  describe(`when presentation is ${DecisionPresentation.LIST_BLOCK_GRID}`, () => {
+    const props = { ...commonProps, presentation: DecisionPresentation.LIST_BLOCK_GRID };
+
+    it('renders only Navigation Option before first breakpoint', () => {
+      render(<Decision {...props} />);
+      const element = screen.getByLabelText('A label');
+      expect(element).toBeInTheDocument();
+
+      expectElementToBeNavigationOption(element);
+      expectElementNotToBeTile(element);
+    });
+
+    it('renders only Tile after first breakpoint', () => {
+      resetClientWidth(Breakpoint.SMALL);
+
+      render(<Decision {...props} />);
+      const element = screen.getByLabelText('A label');
+      expect(element).toBeInTheDocument();
+
+      expectElementNotToBeNavigationOption(element);
+      expectElementToBeTile(element);
+      expectElementNotToBeSmallTile(element);
+    });
+
+    it('renders container as a grid', () => {
+      resetClientWidth(Breakpoint.SMALL);
+
+      render(<Decision {...props} />);
+      const element = screen.getByLabelText('A label').parentElement;
+
+      expect(element).toHaveClass('np-decision');
+      expect(element).toHaveClass('np-decision--grid');
+      expect(element).toHaveClass('flex-wrap');
+    });
+  });
+
+  describe(`when presentation is ${DecisionPresentation.LIST_BLOCK} and size is Small`, () => {
+    const props: DecisionProps = {
+      ...commonProps,
+      presentation: DecisionPresentation.LIST_BLOCK,
+      size: Size.SMALL,
+    };
+
+    it('renders only Navigation Option before breakpoint', () => {
+      render(<Decision {...props} />);
+      const element = screen.getByLabelText('A label');
+      expect(element).toBeInTheDocument();
+
+      expectElementToBeNavigationOption(element);
+      expectElementNotToBeTile(element);
+    });
+
+    it('renders Small Tile after breakpoint', () => {
+      resetClientWidth(Breakpoint.EXTRA_SMALL);
+
+      render(<Decision {...props} />);
+      const element = screen.getByLabelText('A label');
+      expect(element).toBeInTheDocument();
+
+      expectElementNotToBeNavigationOption(element);
+      expectElementToBeTile(element);
+      expectElementToBeSmallTile(element);
+    });
+  });
+
+  describe(`when presentation is ${DecisionPresentation.LIST}`, () => {
+    const props = { ...commonProps, presentation: DecisionPresentation.LIST };
+
+    it('renders Navigation Option before breakpoint', () => {
+      render(<Decision {...props} />);
+      const element = screen.getByLabelText('A label');
+      expect(element).toBeInTheDocument();
+
+      expectElementToBeNavigationOption(element);
+      expectElementNotToBeTile(element);
+    });
+  });
+
+  const expectElementToBeNavigationOption = (element: HTMLElement) => {
+    expect(element).toHaveClass('np-navigation-option');
+  };
+  const expectElementNotToBeNavigationOption = (element: HTMLElement) => {
+    expect(element).not.toHaveClass('np-navigation-option');
+  };
+
+  const expectElementToBeTile = (element: HTMLElement) => {
+    expect(element).toHaveClass('np-tile');
+  };
+  const expectElementNotToBeTile = (element: HTMLElement) => {
+    expect(element).not.toHaveClass('np-tile');
+  };
+
+  const expectElementToBeSmallTile = (element: HTMLElement) => {
+    expect(element).toHaveClass('np-tile--small');
+  };
+  const expectElementNotToBeSmallTile = (element: HTMLElement) => {
+    expect(element).not.toHaveClass('np-tile--small');
+  };
+});