@transferwise/components 45.15.1 → 45.17.0

package/build/styles/popover/Popover.css

@@ -1 +1 @@
-.np-theme-personal .np-popover__container{border-radius:16px;border-radius:var(--radius-medium)}.np-popover__container .np-popover__content{color:#5d7079;color:var(--color-content-secondary);font-size:.875rem;font-size:var(--font-size-14)}.np-popover__container .np-popover__content p:last-child{margin-bottom:0}.np-popover__container.np-panel .np-popover__content{max-width:276px;padding:16px 24px;padding:var(--size-16) var(--size-24)}.np-theme-personal .np-popover__container.np-panel .np-popover__content{padding:24px;padding:var(--size-24)}.np-popover__container.np-bottom-sheet .np-popover__title{color:#37517e;color:var(--color-content-primary);font-size:1.625rem;font-size:var(--font-size-26);font-weight:600;font-weight:var(--font-weight-semi-bold);letter-spacing:0;letter-spacing:-.02em;line-height:1.2;line-height:var(--line-height-title);line-height:122%;margin:0}.np-popover__container.np-bottom-sheet .np-popover__title+p{margin-top:8px;margin-top:var(--size-8)}.np-popover__container.np-bottom-sheet .np-popover__content{padding:32px 24px;padding:var(--size-32) var(--size-24)}
+.np-theme-personal .np-popover__container{border-radius:16px;border-radius:var(--radius-medium)}.np-popover__container .np-popover__content{color:#5d7079;color:var(--color-content-secondary);font-size:.875rem;font-size:var(--font-size-14)}.np-popover__container .np-popover__content p:last-child{margin-bottom:0}.np-popover__container.np-panel .np-popover__content{max-width:276px;padding:16px 24px;padding:var(--size-16) var(--size-24)}.np-theme-personal .np-popover__container.np-panel .np-popover__content{padding:24px;padding:var(--size-24)}.np-popover__container.np-bottom-sheet .np-popover__title{color:#37517e;color:var(--color-content-primary);font-size:1.625rem;font-size:var(--font-size-26);font-weight:600;font-weight:var(--font-weight-semi-bold);letter-spacing:0;letter-spacing:-.02em;line-height:1.2;line-height:var(--line-height-title);line-height:122%;margin:0}.np-popover__container.np-bottom-sheet .np-popover__title+ol:not(.list-unstyled),.np-popover__container.np-bottom-sheet .np-popover__title+p,.np-popover__container.np-bottom-sheet .np-popover__title+ul:not(.list-unstyled){margin-top:8px;margin-top:var(--size-8)}.np-popover__container.np-bottom-sheet .np-popover__content{padding:32px 24px;padding:var(--size-32) var(--size-24)}

package/build/styles/promoCard/PromoCard.css

@@ -1 +1 @@
-.np-Card{--Card-image-scale:1;--Card-image-translate:0;--Card-indicator-text-background-color:var(--color-background-neutral);--Card-indicator-icon-background-color:var(--color-interactive-accent);--Card-indicator-icon-color:var(--color-interactive-control);--Card-check-background-color:var(--color-interactive-primary);--Card-check-color:var(--color-interactive-control)}.np-Card--promoCard{--Card-max-width:358px}.np-Card--promoCard.is-disabled{filter:grayscale(1);opacity:.45}.np-Card-image{height:auto;left:-24px;left:calc(var(--size-24)*-1);margin:0 auto;position:relative;transform:scale(var(--Card-image-scale)) translateY(var(--Card-image-translate));transition:transform .5s ease-in-out;width:100%;width:calc(100% + 48px);width:calc(100% + var(--size-48))}[dir=rtl] .np-Card-image{left:auto;right:-24px;right:calc(var(--size-24)*-1)}.np-Card-indicator{bottom:8px;bottom:var(--size-8);display:flex;gap:4px;gap:var(--size-4);position:absolute;right:8px;right:var(--size-8)}[dir=rtl] .np-Card-indicator{left:8px;left:var(--size-8);right:auto}.np-Card-indicatorText{background:var(--Card-indicator-text-background-color);border-radius:100px;display:inline-block;padding:16px;padding:var(--size-16);text-align:left;vertical-align:middle}.np-Card-indicatorIcon{align-items:center;background:var(--Card-indicator-icon-background-color);border-radius:9999px;border-radius:var(--radius-full);color:var(--Card-indicator-icon-color);display:inline-block;display:flex;height:56px;height:var(--size-56);justify-content:center;width:56px;width:var(--size-56)}[dir=rtl] .np-Card-indicatorIcon{transform:scaleX(-1)}.np-Card--checked,.np-Card--link{box-shadow:none;color:currentColor;cursor:pointer;transform:scale(1);transition:box-shadow .2s ease-in-out,transform .5s ease-in-out}.np-theme-personal:not(.np-theme-personal--dark,.np-theme-personal--bright-green,.np-theme-personal--forest-green) .np-Card--checked,.np-theme-personal:not(.np-theme-personal--dark,.np-theme-personal--bright-green,.np-theme-personal--forest-green) .np-Card--link{--Card-box-shadow:0px 20px var(--size-40) 0px var(--color-background-neutral);--Card-check-color:var(--color-interactive-accent)}.np-Card--checked.is-disabled,.np-Card--link.is-disabled{cursor:not-allowed}@media (prefers-reduced-motion:reduce){.np-Card--checked,.np-Card--link{transition:none}}.np-Card--checked:hover:not(.is-disabled,:disabled,.is-checked,:focus-within),.np-Card--link:hover:not(.is-disabled,:disabled,.is-checked,:focus-within){--Card-image-scale:1.1;box-shadow:var(--Card-box-shadow)}.np-Card--checked:active:not(.is-disabled,:disabled,.is-checked),.np-Card--link:active:not(.is-disabled,:disabled,.is-checked){--Card-background-color:var(--color-background-neutral-active);--Card-image-scale:1.1;--Card-image-translate:var(--size-8);box-shadow:var(--Card-box-shadow);transform:scale(98%)}.np-theme-personal--bright-green .np-Card--checked:active:not(.is-disabled,:disabled,.is-checked),.np-theme-personal--bright-green .np-Card--link:active:not(.is-disabled,:disabled,.is-checked){--Card-background-color:var(--color-background-neutral)}.np-Card--checked:focus-visible:not(.is-disabled,:disabled),.np-Card--checked:has(:focus-visible):not(.np-Card--checked),.np-Card--link:focus-visible:not(.is-disabled,:disabled),.np-Card--link:has(:focus-visible):not(.np-Card--checked){--Card-image-scale:1.1;box-shadow:var(--Card-box-shadow);outline:var(--ring-outline-color) solid 4px;outline:var(--ring-outline-color) solid var(--size-4);outline-offset:4px;outline-offset:var(--size-4)}.np-Card--link .np-Card-titleLink{color:#37517e;color:var(--color-content-primary);text-decoration:none}.np-Card--link .np-Card-titleLink:focus-visible{outline:none}.np-Card--link .np-Card-titleLink:after{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:10}.np-Card--checked.is-checked{box-shadow:0 0 0 4px var(--color-interactive-primary);box-shadow:0 0 0 var(--size-4) var(--color-interactive-primary)}.np-Card--checked.is-checked .np-Card-check{align-items:center;background:var(--Card-check-background-color);border-radius:9999px;border-radius:var(--radius-full);color:var(--Card-check-color);display:flex;height:40px;height:var(--size-40);justify-content:center;position:absolute;right:8px;right:var(--size-8);top:8px;top:var(--size-8);width:40px;width:var(--size-40)}[dir=rtl] .np-Card--checked.is-checked .np-Card-check{left:8px;left:var(--size-8);right:auto}.np-Card--checked.is-checked:focus-visible:not(.is-disabled,:disabled){box-shadow:none}.np-CardGroup{display:flex;flex-direction:column;gap:24px;gap:var(--size-24);width:100%}@media (min-width:768px){.np-CardGroup{flex-direction:row}}.np-CardGroup .np-Card.np-Card--promoCard{max-width:100%}
+.np-Card{--Card-image-scale:1;--Card-image-translate:0;--Card-indicator-text-background-color:var(--color-background-neutral);--Card-indicator-icon-background-color:var(--color-interactive-accent);--Card-indicator-icon-color:var(--color-interactive-control);--Card-check-background-color:var(--color-interactive-primary);--Card-check-color:var(--color-interactive-control)}.np-Card--promoCard{--Card-max-width:358px}.np-Card--promoCard.is-disabled{filter:grayscale(1);opacity:.45}.np-Card-image{height:auto;left:-24px;left:calc(var(--size-24)*-1);margin:0 auto;position:relative;transform:scale(var(--Card-image-scale)) translateY(var(--Card-image-translate));transition:transform .5s ease-in-out;width:100%;width:calc(100% + 48px);width:calc(100% + var(--size-48))}[dir=rtl] .np-Card-image{left:auto;right:-24px;right:calc(var(--size-24)*-1)}.np-Card-description{color:#5d7079;color:var(--color-content-secondary)}.np-Card-indicator{bottom:8px;bottom:var(--size-8);display:flex;gap:4px;gap:var(--size-4);position:absolute;right:8px;right:var(--size-8)}[dir=rtl] .np-Card-indicator{left:8px;left:var(--size-8);right:auto}.np-Card-indicatorText{background:var(--Card-indicator-text-background-color);border-radius:100px;display:inline-block;padding:16px;padding:var(--size-16);text-align:left;vertical-align:middle}.np-Card-indicatorIcon .tw-icon{color:var(--Card-indicator-icon-color)}[dir=rtl] .np-Card-indicatorIcon .tw-icon{transform:scaleX(-1)}.np-Card--checked,.np-Card--link{box-shadow:none;color:currentColor;cursor:pointer;transform:scale(1);transition:box-shadow .2s ease-in-out,transform .5s ease-in-out}.np-theme-personal:not(.np-theme-personal--dark,.np-theme-personal--bright-green,.np-theme-personal--forest-green) .np-Card--checked,.np-theme-personal:not(.np-theme-personal--dark,.np-theme-personal--bright-green,.np-theme-personal--forest-green) .np-Card--link{--Card-box-shadow:0px 20px var(--size-40) 0px var(--color-background-neutral);--Card-check-color:var(--color-interactive-accent)}.np-Card--checked.is-disabled,.np-Card--link.is-disabled{cursor:not-allowed}@media (prefers-reduced-motion:reduce){.np-Card--checked,.np-Card--link{transition:none}}.np-Card--checked:hover:not(.is-disabled,:disabled,.is-checked,:focus-within),.np-Card--link:hover:not(.is-disabled,:disabled,.is-checked,:focus-within){--Card-image-scale:1.1;box-shadow:var(--Card-box-shadow)}.np-Card--checked:active:not(.is-disabled,:disabled,.is-checked),.np-Card--link:active:not(.is-disabled,:disabled,.is-checked){--Card-background-color:var(--color-background-neutral-active);--Card-image-scale:1.1;--Card-image-translate:var(--size-8);box-shadow:var(--Card-box-shadow);transform:scale(98%)}.np-theme-personal--bright-green .np-Card--checked:active:not(.is-disabled,:disabled,.is-checked),.np-theme-personal--bright-green .np-Card--link:active:not(.is-disabled,:disabled,.is-checked){--Card-background-color:var(--color-background-neutral)}.np-Card--checked:focus-visible:not(.is-disabled,:disabled),.np-Card--checked:has(:focus-visible):not(.np-Card--checked),.np-Card--link:focus-visible:not(.is-disabled,:disabled),.np-Card--link:has(:focus-visible):not(.np-Card--checked){--Card-image-scale:1.1;box-shadow:var(--Card-box-shadow);outline:var(--ring-outline-color) solid 4px;outline:var(--ring-outline-color) solid var(--size-4);outline-offset:4px;outline-offset:var(--size-4)}.np-Card--checked:has(.np-Card-closeButton:focus-visible),.np-Card--link:has(.np-Card-closeButton:focus-visible){outline:none}.np-Card--link .np-Card-titleLink{color:#37517e;color:var(--color-content-primary);text-decoration:none}.np-Card--link .np-Card-titleLink:focus-visible{outline:none}.np-Card--link .np-Card-titleLink:after{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:10}.np-Card--checked.is-checked{box-shadow:0 0 0 4px var(--color-interactive-primary);box-shadow:0 0 0 var(--size-4) var(--color-interactive-primary)}.np-Card--checked.is-checked .np-Card-check{align-items:center;background:var(--Card-check-background-color);border-radius:9999px;border-radius:var(--radius-full);color:var(--Card-check-color);display:flex;height:40px;height:var(--size-40);justify-content:center;position:absolute;right:8px;right:var(--size-8);top:8px;top:var(--size-8);width:40px;width:var(--size-40)}[dir=rtl] .np-Card--checked.is-checked .np-Card-check{left:8px;left:var(--size-8);right:auto}.np-Card--checked.is-checked:focus-visible:not(.is-disabled,:disabled){box-shadow:none}.np-CardGroup{display:flex;flex-direction:column;gap:24px;gap:var(--size-24);width:100%}@media (min-width:768px){.np-CardGroup{flex-direction:row}}.np-CardGroup .np-Card.np-Card--promoCard{max-width:100%}

package/build/types/alert/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.js"],"names":[],"mappings":";AA8BA,gEAyFC"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.js"],"names":[],"mappings":";AA8BA,gEA2FC"}

package/build/types/common/card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/common/card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,SAAS,EAAU,MAAM,OAAO,CAAC;AAItD,MAAM,WAAW,SAAS;IACxB,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IAEpB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,kDAAkD;IAClD,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAuC7B,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/common/card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,SAAS,EAAU,MAAM,OAAO,CAAC;AAKtD,MAAM,WAAW,SAAS;IACxB,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IAEpB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,kDAAkD;IAClD,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA0C7B,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/build/types/common/card/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './Card';
+export * from './Card';
 //# sourceMappingURL=index.d.ts.map

package/build/types/common/card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/common/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/common/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,cAAc,QAAQ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":";AAgBA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,GACR,EAAE,gBAAgB,+BAwFlB"}
+{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":";AAiBA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,GACR,EAAE,gBAAgB,+BA4FlB"}

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

@@ -1 +1 @@
-{"version":3,"file":"_Popover.d.ts","sourceRoot":"","sources":["../../../src/inputs/_Popover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAOL,KAAK,IAAI,EAMV,MAAM,oBAAoB,CAAC;AAO5B,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,EAAE,CAAC,IAAI,EAAE;QACpB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAID,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,IAAI,EACJ,aAAa,EACb,KAAK,EACL,OAAc,EACd,QAAQ,EACR,OAAO,GACR,EAAE,YAAY,+BAwEd"}
+{"version":3,"file":"_Popover.d.ts","sourceRoot":"","sources":["../../../src/inputs/_Popover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAOL,KAAK,IAAI,EAMV,MAAM,oBAAoB,CAAC;AAQ5B,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,EAAE,CAAC,IAAI,EAAE;QACpB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAID,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,IAAI,EACJ,aAAa,EACb,KAAK,EACL,OAAc,EACd,QAAQ,EACR,OAAO,GACR,EAAE,YAAY,+BA8Ed"}

package/build/types/promoCard/PromoCard.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
+import { CardProps } from '../common/card';
+import { PromoCardIndicatorProps } from './PromoCardIndicator';
 export type ReferenceType = React.Ref<HTMLInputElement>;
 export type LinkTarget = '_blank' | '_parent' | '_self' | '_top';
 export type RelatedTypes = '' | 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noreferrer' | 'noopener' | 'prev' | 'search' | 'tag';
@@ -17,12 +19,14 @@ export interface PromoCardCommonProps {
     headingLevel?: 'h3' | 'h4' | 'h5' | 'h6';
     /** Optional prop to specify text for the indicator label of the PromoCard */
     indicatorLabel?: string;
+    /** Optional prop to specify the icon for the indicator icon of the PromoCard */
+    indicatorIcon?: PromoCardIndicatorProps['icon'];
     /** Optional prop to specify an image alt text  */
     imageAlt?: string;
     /** Optional prop to specify an image class  */
     imageClass?: string;
     /** Optional prop to specify an image source url  */
-    imageSource: string;
+    imageSource?: string;
     /** Specify whether the PromoCard is disabled, or not */
     isDisabled?: boolean;
     /** Specify an onClick event handler */
@@ -31,8 +35,10 @@ export interface PromoCardCommonProps {
     testId?: string;
     /** Required prop to specify the title text of the PromoCard  */
     title: string;
+    /** Set to false to use body font style for the title   */
+    useDisplayFont?: boolean;
 }
-export interface PromoCardLinkProps extends PromoCardCommonProps {
+export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {
     /**
      * Optional prop to prompts a user to save the linked URL instead of
      * navigating to it
@@ -57,7 +63,7 @@ export interface PromoCardLinkProps extends PromoCardCommonProps {
     reference?: never;
     value?: never;
 }
-export interface PromoCardCheckedProps extends PromoCardCommonProps {
+export interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {
     /** Specify the initial checked attribute of the PromoCard */
     defaultChecked?: boolean;
     /** Specify whether the PromoCard is checked, or not */

package/build/types/promoCard/PromoCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromoCard.d.ts","sourceRoot":"","sources":["../../../src/promoCard/PromoCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAW3F,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AACjE,MAAM,MAAM,YAAY,GACpB,EAAE,GACF,WAAW,GACX,QAAQ,GACR,UAAU,GACV,UAAU,GACV,MAAM,GACN,SAAS,GACT,MAAM,GACN,UAAU,GACV,YAAY,GACZ,UAAU,GACV,MAAM,GACN,QAAQ,GACR,KAAK,CAAC;AAEV,MAAM,WAAW,oBAAoB;IACnC,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,uDAAuD;IACvD,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,sEAAsE;IACtE,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAEzC,6EAA6E;IAC7E,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,oDAAoD;IACpD,WAAW,EAAE,MAAM,CAAC;IAEpB,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAmB,SAAQ,oBAAoB;IAC9D;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,GAAG,CAAC,EAAE,YAAY,CAAC;IAEnB,iEAAiE;IACjE,MAAM,CAAC,EAAE,UAAU,CAAC;IAEpB,iDAAiD;IACjD,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB;IACjE,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,uDAAuD;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,iDAAiD;IACjD,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B,gEAAgE;IAChE,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAE5B,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,GAAG,CAAC,EAAE,KAAK,CAAC;IACZ,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB;AAED,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,qBAAqB,CAAC;AAExE,MAAM,MAAM,oBAAoB,GAAG,CACjC,KAAK,EAAE,kBAAkB,GAAG,qBAAqB,KAC9C,GAAG,CAAC,OAAO,CAAC;;AA0MjB,wBAAqC"}
+{"version":3,"file":"PromoCard.d.ts","sourceRoot":"","sources":["../../../src/promoCard/PromoCard.tsx"],"names":[],"mappings":"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"}

package/build/types/promoCard/PromoCardIndicator.d.ts

@@ -1,11 +1,13 @@
-import { ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 export type PromoCardIndicatorProps = {
     /** Optional class name(s) to add to the indicator container. */
     className?: string;
     /** Optional label to display next to the indicator. */
     label?: string;
     /** Optional icon to display in the indicator. */
-    icon?: 'check' | 'arrow' | 'download';
+    icon?: 'check' | 'arrow' | 'download' | ReactElement;
+    /** Optional prop to specify whether the indicator is sized small or not. */
+    isSmall?: boolean;
     /** Optional ID to add to the indicator container for testing purposes. */
     testid?: string;
     /** Optional children to display inside the indicator. */
@@ -20,7 +22,7 @@ export type PromoCardIndicatorProps = {
  *
  * @param {string} className - Optional class name(s) to add to the indicator container.
  * @param {string} label - Optional label to display next to the indicator.
- * @param {string} icon - Optional icon to display in the indicator.
+ * @param {string | ReactElement} icon - Optional icon to display in the indicator.
  * @param {string} testid - Optional ID to add to the indicator container for testing purposes.
  * @param {ReactNode} children - Optional children to display inside the indicator.
  * @returns {JSX.Element} - The PromoCardIndicator component.

package/build/types/promoCard/PromoCardIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromoCardIndicator.d.ts","sourceRoot":"","sources":["../../../src/promoCard/PromoCardIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlC,MAAM,MAAM,uBAAuB,GAAG;IACpC,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,iDAAiD;IACjD,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;IAEtC,0EAA0E;IAC1E,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA+BzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"PromoCardIndicator.d.ts","sourceRoot":"","sources":["../../../src/promoCard/PromoCardIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMhD,MAAM,MAAM,uBAAuB,GAAG;IACpC,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,iDAAiD;IACjD,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,YAAY,CAAC;IAErD,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAuCzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "45.15.1",
+  "version": "45.17.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -78,12 +78,12 @@
     "rollup": "^3.28.1",
     "storybook": "^7.4.5",
     "@transferwise/less-config": "3.0.6",
-    "@transferwise/neptune-css": "14.6.0",
+    "@transferwise/neptune-css": "14.6.1",
     "@wise/components-theming": "0.8.4"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-css": "^14.5.2",
+    "@transferwise/neptune-css": "^14.6.1",
     "@wise/art": "^2.7.0",
     "@wise/components-theming": "^0.8.4",
     "currency-flags": "^4.0.2",

package/src/alert/Alert.js

@@ -79,8 +79,8 @@ const Alert = (props) => {
   };
   return (
     <div
-      role="alert"
       className={classNames('alert d-flex', `alert-${mappedType}`, className)}
+      data-testid="alert"
       onTouchStart={handleTouchStart}
       onTouchEnd={handleTouchEnd}
       onTouchMove={handleTouchMove}
@@ -91,14 +91,16 @@ const Alert = (props) => {
       >
         {generateIcon()}
         <div className="alert__message">
-          {title && (
-            <Title className="m-b-1" type={Typography.TITLE_BODY}>
-              {title}
-            </Title>
-          )}
-          <Body as="span" className="d-block" type={Typography.BODY_LARGE}>
-            {children || <InlineMarkdown>{message}</InlineMarkdown>}
-          </Body>
+          <div role={Sentiment.NEGATIVE === mappedType ? 'alert' : 'status'}>
+            {title && (
+              <Title className="m-b-1" type={Typography.TITLE_BODY}>
+                {title}
+              </Title>
+            )}
+            <Body as="span" className="d-block" type={Typography.BODY_LARGE}>
+              {children || <InlineMarkdown>{message}</InlineMarkdown>}
+            </Body>
+          </div>
           {action && (
             <Link
               href={action.href}

package/src/alert/Alert.spec.js

@@ -61,7 +61,7 @@ describe('Alert', () => {
           <Alert message={message} />
         </ThemeProvider>,
       ));
-      component = screen.getByRole('alert');
+      component = screen.getByTestId('alert');
     });
 
     it('the message is rendered', () => {
@@ -85,7 +85,7 @@ describe('Alert', () => {
   describe('deprecated props', () => {
     it('renders arrows but logs a warning', () => {
       render(<Alert arrow={AlertArrowPosition.BOTTOM} message={message} />);
-      component = screen.getByRole('alert');
+      component = screen.getByTestId('alert');
 
       expect(component).toHaveClass('arrow');
       expect(component).toHaveClass('arrow-bottom');
@@ -125,7 +125,7 @@ describe('Alert', () => {
     it('maps type SUCCESS to type POSITIVE and logs a warning', () => {
       render(<Alert type={Sentiment.SUCCESS} message={message} />);
 
-      const success = screen.getByRole('alert');
+      const success = screen.getByTestId('alert');
 
       expect(success).toHaveClass(classForType(Sentiment.POSITIVE));
       expect(screen.getByTestId('check-circle-icon')).toBeInTheDocument();
@@ -137,7 +137,7 @@ describe('Alert', () => {
     it('maps type INFO to type NEUTRAL and logs a warning', () => {
       render(<Alert type={Sentiment.INFO} message={message} />);
 
-      const info = screen.getByRole('alert');
+      const info = screen.getByTestId('alert');
 
       expect(info).toHaveClass(classForType(Sentiment.NEUTRAL));
       expect(screen.getByTestId('info-circle-icon')).toBeInTheDocument();
@@ -150,7 +150,7 @@ describe('Alert', () => {
   it('maps type ERROR to type NEGATIVE and logs a warning', () => {
     render(<Alert type={Sentiment.ERROR} message={message} />);
 
-    const error = screen.getByRole('alert');
+    const error = screen.getByTestId('alert');
 
     expect(error).toHaveClass(classForType(Sentiment.NEGATIVE));
     expect(screen.getByTestId('cross-circle-icon')).toBeInTheDocument();
@@ -197,14 +197,14 @@ describe('Alert', () => {
     it('converts message to markdown', () => {
       render(<Alert message={input} />);
 
-      expect(screen.getByRole('alert')).toContainHTML(output);
+      expect(screen.getByTestId('alert')).toContainHTML(output);
     });
 
     it('does not convert children to markdown', () => {
       render(<Alert>{input}</Alert>);
 
       expect(screen.getByText(input)).toBeInTheDocument();
-      expect(screen.getByRole('alert')).not.toContainHTML(output);
+      expect(screen.getByTestId('alert')).not.toContainHTML(output);
     });
   });
 
@@ -212,7 +212,7 @@ describe('Alert', () => {
     it('applies provided classes', () => {
       render(<Alert className="cats" message={message} />);
 
-      expect(screen.getByRole('alert')).toHaveClass('cats');
+      expect(screen.getByTestId('alert')).toHaveClass('cats');
     });
   });
 
@@ -221,7 +221,7 @@ describe('Alert', () => {
       const icon = <HappyEmoji />;
 
       render(<Alert icon={icon} message={message} />);
-      component = screen.getByRole('alert');
+      component = screen.getByTestId('alert');
       expect(screen.getByTestId('happy-emoji-icon')).toBeInTheDocument();
     });
   });
@@ -247,7 +247,7 @@ describe('Alert', () => {
   describe('types', () => {
     const getComponentWithType = (type) => {
       render(<Alert type={type} message={message} />);
-      return screen.getByRole('alert');
+      return screen.getByTestId('alert');
     };
 
     it('renders neutral', () => {
@@ -277,6 +277,15 @@ describe('Alert', () => {
       expect(component).toHaveClass(classForType(Sentiment.WARNING));
       expect(screen.getByTestId('warning-icon')).toBeInTheDocument();
     });
+
+    it('renders error alerts with aria-role alert', () => {
+      component = getComponentWithType(Sentiment.NEGATIVE);
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+    });
+    it('renders neutral alerts with aria-role status', () => {
+      component = getComponentWithType(Sentiment.NEUTRAL);
+      expect(screen.getByRole('status')).toBeInTheDocument();
+    });
   });
 
   describe('on touch devices', () => {
@@ -304,7 +313,7 @@ describe('Alert', () => {
 
         render(<Alert action={action} message={message} onDismiss={jest.fn()} />);
 
-        alert = screen.getByRole('alert');
+        alert = screen.getByTestId('alert');
         closeButton = screen.getByLabelText('Close');
 
         jest.spyOn(React, 'useRef').mockReturnValue({
@@ -344,7 +353,7 @@ describe('Alert', () => {
 
         render(<Alert action={action} message={message} onDismiss={jest.fn()} />);
 
-        alert = screen.getByRole('alert');
+        alert = screen.getByTestId('alert');
         closeButton = screen.getByLabelText('Close');
 
         jest.spyOn(React, 'useRef').mockReturnValue({
@@ -368,7 +377,7 @@ describe('Alert', () => {
       beforeEach(() => {
         render(<Alert message={message} onDismiss={jest.fn()} />);
 
-        alert = screen.getByRole('alert');
+        alert = screen.getByTestId('alert');
         closeButton = screen.getByLabelText('Close');
 
         jest.spyOn(React, 'useRef').mockReturnValue({

package/src/alert/withArrow/withArrow.spec.js

@@ -12,7 +12,7 @@ describe('withArrow', () => {
       const ArrowLessAlert = withArrow(Alert);
 
       render(<ArrowLessAlert message={message} />);
-      const component = screen.getByRole('alert');
+      const component = screen.getByTestId('alert');
 
       expect(component).not.toHaveClass('arrow');
     });
@@ -21,7 +21,7 @@ describe('withArrow', () => {
       const AlertTopArrow = withArrow(Alert, ArrowPosition.TOP_LEFT);
 
       render(<AlertTopArrow message={message} arrow={ArrowPosition.BOTTOM_LEFT} />);
-      const component = screen.getByRole('alert');
+      const component = screen.getByTestId('alert');
       expect(component).toHaveClass('arrow');
       expect(component).not.toHaveClass('arrow-bottom');
     });
@@ -33,7 +33,7 @@ describe('withArrow', () => {
     it(`returns an bottom arrowed alert if you pass a bottom arrow`, () => {
       const BottomArrowAlert = getPointyAlert(ArrowPosition.BOTTOM);
       render(<BottomArrowAlert message={message} />);
-      const component = screen.getByRole('alert');
+      const component = screen.getByTestId('alert');
 
       expect(component).toHaveClass('arrow');
       expect(component).toHaveClass('arrow-bottom');
@@ -42,7 +42,7 @@ describe('withArrow', () => {
     it(`returns an top-right arrowed alert if you pass a top right arrow`, () => {
       const BottomArrowAlert = getPointyAlert(ArrowPosition.TOP_RIGHT);
       render(<BottomArrowAlert message={message} />);
-      const component = screen.getByRole('alert');
+      const component = screen.getByTestId('alert');
 
       expect(component).toHaveClass('arrow');
       expect(component).toHaveClass('arrow-right');

package/src/common/card/Card.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import { MouseEvent, ReactNode, useRef } from 'react';
 
 import { CloseButton } from '../closeButton';
+import { stopPropagation } from '../domHelpers';
 
 export interface CardProps {
   /** Content to display inside Card. */
@@ -49,7 +50,7 @@ export interface CardProps {
  */
 const Card: React.FC<CardProps> = ({
   className,
-  children,
+  children = null,
   id,
   isDisabled = false,
   isSmall = false,
@@ -80,7 +81,10 @@ const Card: React.FC<CardProps> = ({
           size={isSmall ? 'sm' : 'md'}
           isDisabled={isDisabled}
           testId="close-button"
-          onClick={onDismiss}
+          onClick={(e) => {
+            stopPropagation(e);
+            onDismiss();
+          }}
         />
       )}
       {children}

package/src/common/card/index.ts

@@ -1 +1,2 @@
 export { default } from './Card';
+export * from './Card';

package/src/dateLookup/tableLink/TableLink.js

@@ -41,6 +41,7 @@ class TableLink extends PureComponent {
           } np-text-body-default-bold`}
           disabled={disabled}
           aria-label={this.calculateAriaLabel(longTitle, title, active, type, formatMessage)}
+          aria-pressed={active}
           onClick={this.onClick}
         >
           {title || item}

package/src/dateLookup/tableLink/TableLink.spec.js

@@ -94,6 +94,12 @@ describe('TableLink', () => {
     expect(button().prop('aria-label')).toBe('12/12/1212, selected day');
   });
 
+  it('adds aria pressed to selected day', () => {
+    expect(button().hasClass('active')).toBe(false);
+    component.setProps({ active: true });
+    expect(button().prop('aria-pressed')).toBe(true);
+  });
+
   it('adds aria label to selected month', () => {
     component.setProps({ type: 'month' });
     expect(button().hasClass('active')).toBe(false);

package/src/inputs/SelectInput.css

@@ -1 +1 @@
-.np-select-input-placeholder{color:#768e9c;color:var(--color-content-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-options-container{display:flex;flex-direction:column;height:100%}.np-select-input-options-container:focus{outline:none}@media (min-width:576px){.np-select-input-options-container{max-height:28rem}}.np-select-input-query-container{display:flex;flex-direction:column;padding:8px;padding:var(--size-8);padding-top:0}@media (min-width:576px){.np-select-input-query-container{padding-top:8px;padding-top:var(--size-8)}}.np-select-input-listbox-container{height:var(--initial-height);overflow-y:auto;position:relative;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}@media (min-width:576px){.np-select-input-listbox-container{height:auto}}.np-select-input-listbox-container--has-group{scroll-padding-top:32px;scroll-padding-top:var(--size-32)}.np-select-input-listbox{padding:8px;padding:var(--size-8)}.np-select-input-listbox:focus{outline:none}.np-select-input-separator-item{border-top-width:1px;margin:8px;margin:var(--size-8)}.np-select-input-group-item--without-needle:first-child{margin-top:-8px;margin-top:calc(var(--size-8)*-1)}.np-select-input-group-item-header{background-color:#fff;background-color:var(--color-background-elevated);color:#5d7079;color:var(--color-content-secondary);padding:8px 16px 4px;padding:var(--size-8) var(--size-16) var(--size-4);position:sticky;top:0;z-index:10}.np-select-input-option-container{align-items:center;border-radius:10px;border-radius:var(--radius-small);color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex;padding:12px 16px;padding:var(--size-12) var(--size-16)}.np-select-input-option-container--active{background-color:var(--color-background-screen-hover)}.np-select-input-option-container--disabled{opacity:.45}.np-select-input-option-check--not-selected{visibility:hidden}.np-select-input-option{flex:1}.np-select-input-option-content-container{align-items:center;color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex}.np-select-input-option-content-icon{display:flex}.np-select-input-option-content-icon--not-compact{align-self:flex-start}.np-select-input-option-content-text{display:flex;flex:1;flex-direction:column;overflow:hidden}.np-select-input-option-content-text-secondary{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-option-content-text-compact{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-option-content-text-line-1>:not([hidden])~:not([hidden]){margin-left:8px;margin-left:var(--size-8);margin-right:8px;margin-right:var(--size-8)}.np-select-input-addon-container{align-items:center;display:inline-flex;pointer-events:none}.np-select-input-addon{align-items:center;background:none;border-radius:.125rem;border-width:0;display:inline-flex;height:32px;height:var(--size-32);justify-content:center;width:32px;width:var(--size-32)}.np-select-input-addon--interactive{color:#c9cbce;color:var(--color-interactive-secondary);pointer-events:auto}.np-select-input-addon--interactive:hover{color:#b5b7ba;color:var(--color-interactive-secondary-hover)}.np-select-input-addon--interactive:focus{outline:none}.np-select-input-addon--interactive:focus-visible{outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-select-input-addon-separator{border-inline-start-width:1px;height:24px;height:var(--size-24)}
+.np-bottom-sheet-v2-container{position:relative;z-index:1060}.np-bottom-sheet-v2-backdrop-container--enter,.np-bottom-sheet-v2-backdrop-container--leave{transition-duration:.15s;transition-property:opacity;transition-timing-function:ease-out}.np-bottom-sheet-v2-backdrop-container--enter-from,.np-bottom-sheet-v2-backdrop-container--leave-to{opacity:0}.np-bottom-sheet-v2-backdrop{background-color:#37517e;background-color:var(--color-content-primary);inset:0;opacity:.4;position:fixed}.np-bottom-sheet-v2{display:flex;flex-direction:column;inset:0;justify-content:flex-end;padding-left:8px;padding-left:var(--size-8);padding-right:8px;padding-right:var(--size-8);padding-top:64px;padding-top:var(--size-64);position:fixed}.np-bottom-sheet-v2-content{max-height:100%}.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-duration:.3s;transition-property:transform;transition-timing-function:ease-out}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-property:opacity}}@media (prefers-reduced-motion:no-preference){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{transform:translateY(100%)}}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{opacity:0}}.np-bottom-sheet-v2-content-inner-container{background-color:#fff;background-color:var(--color-background-elevated);border-top-left-radius:32px;border-top-right-radius:32px;box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;height:100%}.np-bottom-sheet-v2-content-inner-container:focus{outline:none}.np-bottom-sheet-v2-header{align-self:flex-end;padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-content-inner{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;padding-top:0;row-gap:8px;row-gap:var(--size-8)}.np-bottom-sheet-v2-content-inner--has-title{grid-template-rows:auto 1fr}.np-bottom-sheet-v2-content-inner--padding-md{padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-title{color:#37517e;color:var(--color-content-primary)}.np-bottom-sheet-v2-body{color:#5d7079;color:var(--color-content-secondary)}.np-button-input{align-content:center;border-radius:10px;border-radius:var(--size-10);display:inline-grid;grid-auto-columns:minmax(0,1fr);text-align:start}.np-popover-v2-container{background-color:#fff;background-color:var(--color-background-elevated);border-radius:10px;border-radius:var(--radius-small);box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;max-height:var(--max-height);min-width:-moz-min-content;min-width:min-content;width:var(--width);z-index:1060}.np-popover-v2-container:focus{outline:none}.np-popover-v2{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;row-gap:8px;row-gap:var(--size-8)}.np-popover-v2--has-title{grid-template-rows:auto 1fr}.np-popover-v2--padding-md{padding:16px;padding:var(--size-16)}.np-popover-v2-title{color:#37517e;color:var(--color-content-primary)}.np-popover-v2-content{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-placeholder{color:#768e9c;color:var(--color-content-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-options-container{display:flex;flex-direction:column;height:100%}.np-select-input-options-container:focus{outline:none}@media (min-width:576px){.np-select-input-options-container{max-height:28rem}}.np-select-input-query-container{display:flex;flex-direction:column;padding:8px;padding:var(--size-8);padding-top:0}@media (min-width:576px){.np-select-input-query-container{padding-top:8px;padding-top:var(--size-8)}}.np-select-input-listbox-container{height:var(--initial-height);overflow-y:auto;position:relative;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}@media (min-width:576px){.np-select-input-listbox-container{height:auto}}.np-select-input-listbox-container--has-group{scroll-padding-top:32px;scroll-padding-top:var(--size-32)}.np-select-input-listbox{padding:8px;padding:var(--size-8)}.np-select-input-listbox:focus{outline:none}.np-select-input-separator-item{border-top-width:1px;margin:8px;margin:var(--size-8)}.np-select-input-group-item--without-needle:first-child{margin-top:-8px;margin-top:calc(var(--size-8)*-1)}.np-select-input-group-item-header{background-color:#fff;background-color:var(--color-background-elevated);color:#5d7079;color:var(--color-content-secondary);padding:8px 16px 4px;padding:var(--size-8) var(--size-16) var(--size-4);position:sticky;top:0;z-index:10}.np-select-input-option-container{align-items:center;border-radius:10px;border-radius:var(--radius-small);color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex;padding:12px 16px;padding:var(--size-12) var(--size-16)}.np-select-input-option-container--active{background-color:var(--color-background-screen-hover)}.np-select-input-option-container--disabled{opacity:.45}.np-select-input-option-check--not-selected{visibility:hidden}.np-select-input-option{flex:1}.np-select-input-option-content-container{align-items:center;color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex}.np-select-input-option-content-icon{display:flex}.np-select-input-option-content-icon--not-compact{align-self:flex-start}.np-select-input-option-content-text{display:flex;flex:1;flex-direction:column;overflow:hidden}.np-select-input-option-content-text-secondary{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-option-content-text-compact{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-option-content-text-line-1>:not([hidden])~:not([hidden]){margin-left:8px;margin-left:var(--size-8);margin-right:8px;margin-right:var(--size-8)}.np-select-input-addon-container{align-items:center;display:inline-flex;pointer-events:none}.np-select-input-addon{align-items:center;background:none;border-radius:.125rem;border-width:0;display:inline-flex;height:32px;height:var(--size-32);justify-content:center;width:32px;width:var(--size-32)}.np-select-input-addon--interactive{color:#c9cbce;color:var(--color-interactive-secondary);pointer-events:auto}.np-select-input-addon--interactive:hover{color:#b5b7ba;color:var(--color-interactive-secondary-hover)}.np-select-input-addon--interactive:focus{outline:none}.np-select-input-addon--interactive:focus-visible{outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-select-input-addon-separator{border-inline-start-width:1px;height:24px;height:var(--size-24)}

package/src/inputs/SelectInput.less

@@ -1,3 +1,6 @@
+@import "./_BottomSheet.less";
+@import "./_ButtonInput.less";
+@import "./_Popover.less";
 @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
 
 .np-select-input-placeholder {

package/src/inputs/SelectInput.story.tsx

@@ -4,6 +4,8 @@ import { Flag } from '@wise/art';
 import { useState } from 'react';
 
 import { getMonthNames } from '../common/dateUtils';
+import Drawer from '../drawer';
+import Modal from '../modal';
 
 import { SelectInput, type SelectInputItem, SelectInputOptionContent } from './SelectInput';
 
@@ -262,3 +264,23 @@ export const Currencies: StoryObj<{
     },
   },
 };
+
+export const WithinDrawer: StoryObj<{
+  onChange: (value: Currency) => void;
+}> = {
+  ...Currencies,
+  decorators: [
+    (Story) => (
+      <Drawer open headerTitle="This is the title of the drawer">
+        <Story />
+      </Drawer>
+    ),
+  ],
+};
+
+export const WithinModal: StoryObj<{
+  onChange: (value: Currency) => void;
+}> = {
+  ...Currencies,
+  decorators: [(Story) => <Modal open body={<Story />} onClose={() => {}} />],
+};

package/src/inputs/_BottomSheet.less

@@ -1,6 +1,6 @@
 .np-bottom-sheet-v2-container {
   position: relative;
-  z-index: 50;
+  z-index: 1060;
 }
 
 .np-bottom-sheet-v2-backdrop-container {