@transferwise/components 46.1.1 → 46.2.0

package/build/main.css

@@ -5,7 +5,6 @@ div.critical-comms {
   --critical-comms-subtitle-color-padding-left: var(--size-16);
   --critical-comms-vertical-spacing: var(--size-8);
   background-color: rgba(255,135,135,0.10196);
-  background-color: var(--color-background-negative);
   background-color: var(--critical-comms-background-color);
   display: flex;
   justify-content: center;
@@ -1142,16 +1141,12 @@ div.critical-comms .critical-comms-body {
   flex-direction: column;
   align-items: stretch;
   background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
   background-color: var(--Card-background-color);
   border-radius: 32px;
-  border-radius: var(--size-32);
   border-radius: var(--Card-border-radius);
   gap: 16px;
-  gap: var(--size-16);
   gap: var(--Card-flex-gap);
   padding: 24px;
-  padding: var(--size-24);
   padding: var(--Card-padding);
   position: relative;
   box-sizing: border-box;
@@ -2047,9 +2042,19 @@ button.np-option {
   max-width: 1164px;
 }
 .np-flow-navigation__stepper {
-  padding-bottom: 0px !important;
-  padding-left: 0px !important;
-  padding-right: 0px !important;
+  padding-bottom: 0 !important;
+}
+[dir="rtl"] .np-flow-navigation__stepper {
+  padding-right: 0 !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation__stepper {
+  padding-left: 0 !important;
+}
+[dir="rtl"] .np-flow-navigation__stepper {
+  padding-left: 0 !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation__stepper {
+  padding-right: 0 !important;
 }
 .np-flow-navigation--xs-max .np-flow-navigation__stepper .tw-stepper-steps {
   display: none;
@@ -2061,11 +2066,23 @@ button.np-option {
   height: auto;
 }
 .np-flow-navigation--sm .np-flow-navigation__stepper {
+  min-height: 56px;
+}
+[dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
+  padding-right: 24px !important;
+  padding-right: var(--size-24) !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
+  padding-left: 24px !important;
+  padding-left: var(--size-24) !important;
+}
+[dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding-left: 24px !important;
   padding-left: var(--size-24) !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding-right: 24px !important;
   padding-right: var(--size-24) !important;
-  min-height: 56px;
 }
 .np-flow-navigation--lg .np-flow-navigation__stepper {
   max-width: 562px;
@@ -2169,7 +2186,6 @@ button.np-option {
   color: #37517e;
   color: var(--color-content-primary);
   box-shadow: inset 0 0 0 1px #c9cbce;
-  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
   box-shadow: inset 0 0 0 var(--ring-width) var(--ring-color);
   transition-property: color, opacity, box-shadow;
   transition-timing-function: ease-in-out;
@@ -3424,15 +3440,12 @@ html:not([dir="rtl"]) .np-navigation-option {
   --nudge-control-background-color: var(--color-background-neutral);
   align-items: stretch;
   background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
   background-color: var(--nudge-background-color);
   border-radius: 16px;
-  border-radius: var(--radius-medium);
   border-radius: var(--nudge-border-radius);
   display: flex;
   flex: 1;
   gap: 16px;
-  gap: var(--size-16);
   gap: var(--nudge-flex-gap);
   min-height: 106px;
   min-height: var(--nudge-min-height);

package/build/styles/common/card/Card.css

@@ -10,16 +10,12 @@
   flex-direction: column;
   align-items: stretch;
   background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
   background-color: var(--Card-background-color);
   border-radius: 32px;
-  border-radius: var(--size-32);
   border-radius: var(--Card-border-radius);
   gap: 16px;
-  gap: var(--size-16);
   gap: var(--Card-flex-gap);
   padding: 24px;
-  padding: var(--size-24);
   padding: var(--Card-padding);
   position: relative;
   box-sizing: border-box;

package/build/styles/criticalBanner/CriticalCommsBanner.css

@@ -5,7 +5,6 @@ div.critical-comms {
   --critical-comms-subtitle-color-padding-left: var(--size-16);
   --critical-comms-vertical-spacing: var(--size-8);
   background-color: rgba(255,135,135,0.10196);
-  background-color: var(--color-background-negative);
   background-color: var(--critical-comms-background-color);
   display: flex;
   justify-content: center;

package/build/styles/flowNavigation/FlowNavigation.css

@@ -13,9 +13,19 @@
   max-width: 1164px;
 }
 .np-flow-navigation__stepper {
-  padding-bottom: 0px !important;
-  padding-left: 0px !important;
-  padding-right: 0px !important;
+  padding-bottom: 0 !important;
+}
+[dir="rtl"] .np-flow-navigation__stepper {
+  padding-right: 0 !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation__stepper {
+  padding-left: 0 !important;
+}
+[dir="rtl"] .np-flow-navigation__stepper {
+  padding-left: 0 !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation__stepper {
+  padding-right: 0 !important;
 }
 .np-flow-navigation--xs-max .np-flow-navigation__stepper .tw-stepper-steps {
   display: none;
@@ -27,11 +37,23 @@
   height: auto;
 }
 .np-flow-navigation--sm .np-flow-navigation__stepper {
+  min-height: 56px;
+}
+[dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
+  padding-right: 24px !important;
+  padding-right: var(--size-24) !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding-left: 24px !important;
   padding-left: var(--size-24) !important;
+}
+[dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
+  padding-left: 24px !important;
+  padding-left: var(--size-24) !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding-right: 24px !important;
   padding-right: var(--size-24) !important;
-  min-height: 56px;
 }
 .np-flow-navigation--lg .np-flow-navigation__stepper {
   max-width: 562px;

package/build/styles/inputs/Input.css

@@ -14,7 +14,6 @@
   color: #37517e;
   color: var(--color-content-primary);
   box-shadow: inset 0 0 0 1px #c9cbce;
-  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
   box-shadow: inset 0 0 0 var(--ring-width) var(--ring-color);
   transition-property: color, opacity, box-shadow;
   transition-timing-function: ease-in-out;

package/build/styles/inputs/TextArea.css

@@ -14,7 +14,6 @@
   color: #37517e;
   color: var(--color-content-primary);
   box-shadow: inset 0 0 0 1px #c9cbce;
-  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
   box-shadow: inset 0 0 0 var(--ring-width) var(--ring-color);
   transition-property: color, opacity, box-shadow;
   transition-timing-function: ease-in-out;

package/build/styles/main.css

@@ -5,7 +5,6 @@ div.critical-comms {
   --critical-comms-subtitle-color-padding-left: var(--size-16);
   --critical-comms-vertical-spacing: var(--size-8);
   background-color: rgba(255,135,135,0.10196);
-  background-color: var(--color-background-negative);
   background-color: var(--critical-comms-background-color);
   display: flex;
   justify-content: center;
@@ -1142,16 +1141,12 @@ div.critical-comms .critical-comms-body {
   flex-direction: column;
   align-items: stretch;
   background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
   background-color: var(--Card-background-color);
   border-radius: 32px;
-  border-radius: var(--size-32);
   border-radius: var(--Card-border-radius);
   gap: 16px;
-  gap: var(--size-16);
   gap: var(--Card-flex-gap);
   padding: 24px;
-  padding: var(--size-24);
   padding: var(--Card-padding);
   position: relative;
   box-sizing: border-box;
@@ -2047,9 +2042,19 @@ button.np-option {
   max-width: 1164px;
 }
 .np-flow-navigation__stepper {
-  padding-bottom: 0px !important;
-  padding-left: 0px !important;
-  padding-right: 0px !important;
+  padding-bottom: 0 !important;
+}
+[dir="rtl"] .np-flow-navigation__stepper {
+  padding-right: 0 !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation__stepper {
+  padding-left: 0 !important;
+}
+[dir="rtl"] .np-flow-navigation__stepper {
+  padding-left: 0 !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation__stepper {
+  padding-right: 0 !important;
 }
 .np-flow-navigation--xs-max .np-flow-navigation__stepper .tw-stepper-steps {
   display: none;
@@ -2061,11 +2066,23 @@ button.np-option {
   height: auto;
 }
 .np-flow-navigation--sm .np-flow-navigation__stepper {
+  min-height: 56px;
+}
+[dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
+  padding-right: 24px !important;
+  padding-right: var(--size-24) !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
+  padding-left: 24px !important;
+  padding-left: var(--size-24) !important;
+}
+[dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding-left: 24px !important;
   padding-left: var(--size-24) !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding-right: 24px !important;
   padding-right: var(--size-24) !important;
-  min-height: 56px;
 }
 .np-flow-navigation--lg .np-flow-navigation__stepper {
   max-width: 562px;
@@ -2169,7 +2186,6 @@ button.np-option {
   color: #37517e;
   color: var(--color-content-primary);
   box-shadow: inset 0 0 0 1px #c9cbce;
-  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
   box-shadow: inset 0 0 0 var(--ring-width) var(--ring-color);
   transition-property: color, opacity, box-shadow;
   transition-timing-function: ease-in-out;
@@ -3424,15 +3440,12 @@ html:not([dir="rtl"]) .np-navigation-option {
   --nudge-control-background-color: var(--color-background-neutral);
   align-items: stretch;
   background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
   background-color: var(--nudge-background-color);
   border-radius: 16px;
-  border-radius: var(--radius-medium);
   border-radius: var(--nudge-border-radius);
   display: flex;
   flex: 1;
   gap: 16px;
-  gap: var(--size-16);
   gap: var(--nudge-flex-gap);
   min-height: 106px;
   min-height: var(--nudge-min-height);

package/build/styles/nudge/Nudge.css

@@ -15,15 +15,12 @@
   --nudge-control-background-color: var(--color-background-neutral);
   align-items: stretch;
   background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
   background-color: var(--nudge-background-color);
   border-radius: 16px;
-  border-radius: var(--radius-medium);
   border-radius: var(--nudge-border-radius);
   display: flex;
   flex: 1;
   gap: 16px;
-  gap: var(--size-16);
   gap: var(--nudge-flex-gap);
   min-height: 106px;
   min-height: var(--nudge-min-height);

package/build/types/accordion/Accordion.d.ts

@@ -6,6 +6,7 @@ export interface AccordionProps {
     items: {
         id?: string;
         title: React.ReactNode;
+        subtitle?: React.ReactNode;
         content: React.ReactNode;
         icon?: React.ReactNode;
     }[];

package/build/types/accordion/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,EAAE,EAAE,MAAM,OAAO,CAAC;AAIrC,MAAM,WAAW,cAAc;IAC7B,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,KAAK,EAAE;QACL,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACxB,EAAE,CAAC;IACJ,kEAAkE;IAClE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAiCjC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,EAAE,EAAE,MAAM,OAAO,CAAC;AAIrC,MAAM,WAAW,cAAc;IAC7B,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,KAAK,EAAE;QACL,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC3B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACxB,EAAE,CAAC;IACJ,kEAAkE;IAClE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAkCjC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/build/types/accordion/AccordionItem/AccordionItem.d.ts

@@ -6,6 +6,8 @@ export interface AccordionItemProps {
     id?: string;
     /** The title of the accordion item. */
     title: ReactNode;
+    /** The subtitle of the accordion item. */
+    subtitle?: ReactNode;
     /** The content of the accordion item. */
     content: ReactNode;
     /** A callback function that is called when the accordion item is clicked. */
@@ -26,6 +28,7 @@ export interface AccordionItemProps {
  * @param {string} [aria-label] - A label for the accordion item, used for accessibility purposes.
  * @param {string} [id] - An ID for the accordion item, used for accessibility purposes.
  * @param {ReactNode} title - The title of the accordion item.
+ * @param {ReactNode} subtitle - The subtitle of the accordion item.
  * @param {ReactNode} content - The content of the accordion item.
  * @param {Function} onClick - A callback function that is called when the accordion item is clicked.
  * @param {boolean} open - Whether the accordion item is currently open or closed.

package/build/types/accordion/AccordionItem/AccordionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../src/accordion/AccordionItem/AccordionItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAgB,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOpD,MAAM,WAAW,kBAAkB;IACjC,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,KAAK,EAAE,SAAS,CAAC;IACjB,yCAAyC;IACzC,OAAO,EAAE,SAAS,CAAC;IACnB,6EAA6E;IAC7E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,8DAA8D;IAC9D,IAAI,EAAE,OAAO,CAAC;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sBAAsB;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAoDzC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../src/accordion/AccordionItem/AccordionItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAgB,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOpD,MAAM,WAAW,kBAAkB;IACjC,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,KAAK,EAAE,SAAS,CAAC;IACjB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,yCAAyC;IACzC,OAAO,EAAE,SAAS,CAAC;IACnB,6EAA6E;IAC7E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,8DAA8D;IAC9D,IAAI,EAAE,OAAO,CAAC;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sBAAsB;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAsDzC,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -25,7 +25,7 @@ export interface SelectInputProps<T = string> {
     renderValue?: (value: NonNullable<T>, withinTrigger: boolean) => React.ReactNode;
     renderFooter?: (args: {
         resultsEmpty: boolean;
-        normalizedQuery: string | null | undefined;
+        queryNormalized: string | null | undefined;
     }) => React.ReactNode;
     renderTrigger?: (args: {
         content: React.ReactNode;
@@ -40,11 +40,14 @@ export interface SelectInputProps<T = string> {
     disabled?: boolean;
     size?: 'md' | 'lg';
     className?: string;
+    onFilterChange?: (args: {
+        query: string;
+        queryNormalized: string | null;
+    }) => void;
     onChange?: (value: T) => void;
-    onSearchChange?: (query: string) => void;
     onClear?: () => void;
 }
-export declare function SelectInput<T = string>({ name, placeholder, items, defaultValue, value: controlledValue, compareValues, renderValue, renderFooter, renderTrigger, filterable, filterPlaceholder, disabled, size, className, onChange, onSearchChange, onClear, }: SelectInputProps<T>): import("react").JSX.Element;
+export declare function SelectInput<T = string>({ name, placeholder, items, defaultValue, value: controlledValue, compareValues, renderValue, renderFooter, renderTrigger, filterable, filterPlaceholder, disabled, size, className, onFilterChange, onChange, onClear, }: SelectInputProps<T>): 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/build/types/inputs/_BottomSheet.d.ts

@@ -12,6 +12,7 @@ export interface BottomSheetProps {
     padding?: 'none' | 'md';
     children?: React.ReactNode;
     onClose?: () => void;
+    onCloseEnd?: () => void;
 }
-export declare function BottomSheet({ open, renderTrigger, title, initialFocusRef, padding, children, onClose, }: BottomSheetProps): import("react").JSX.Element;
+export declare function BottomSheet({ open, renderTrigger, title, initialFocusRef, padding, children, onClose, onCloseEnd, }: BottomSheetProps): import("react").JSX.Element;
 //# sourceMappingURL=_BottomSheet.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":";AAkBA,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,+BAmGlB"}
+{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":";AAkBA,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;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,gBAAgB,+BAoGlB"}

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

@@ -14,6 +14,7 @@ export interface PopoverProps {
     padding?: 'none' | 'md';
     children?: React.ReactNode;
     onClose?: () => void;
+    onCloseEnd?: () => void;
 }
-export declare function Popover({ placement, open, renderTrigger, title, size, padding, children, onClose, }: PopoverProps): import("react").JSX.Element;
+export declare function Popover({ placement, open, renderTrigger, title, size, padding, children, onClose, onCloseEnd, }: PopoverProps): import("react").JSX.Element;
 //# sourceMappingURL=_Popover.d.ts.map

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,EAML,KAAK,SAAS,EAOf,MAAM,oBAAoB,CAAC;AAS5B,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,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,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,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,IAAW,EACX,OAAc,EACd,QAAQ,EACR,OAAO,GACR,EAAE,YAAY,+BAiFd"}
+{"version":3,"file":"_Popover.d.ts","sourceRoot":"","sources":["../../../src/inputs/_Popover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAML,KAAK,SAAS,EAOf,MAAM,oBAAoB,CAAC;AAS5B,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,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,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAID,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,IAAI,EACJ,aAAa,EACb,KAAK,EACL,IAAW,EACX,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,YAAY,+BAkFd"}

package/build/types/moneyInput/MoneyInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/moneyInput/MoneyInput.js"],"names":[],"mappings":";;;;AA+DA;IACE,wBAcC;IAXC,mBAAkD;IAClD;;;;MASC;IAGH,uDAaC;IAED,+CAWE;IAEF,oCAIE;IAEF,kCAyBE;IAEF,qCAgBE;IAEF,yBAGE;IAFA,mCAA0B;IAI5B,0BAEE;IAEF;;;;MAME;IAEF,0BAwBC;IAED,kBAsBC;IAED,yCAGE;IAEF,+BAKE;IAEF,+CAQE;IAEF,+BAAqE;IAErE,sCAuIC;CACF"}
+{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/moneyInput/MoneyInput.js"],"names":[],"mappings":";;;;AA+DA;IACE,wBAcC;IAXC,mBAAkD;IAClD;;;;MASC;IAGH,uDAaC;IAED,+CAWE;IAEF,oCAIE;IAEF,kCAyBE;IAEF,qCAgBE;IAEF,yBAGE;IAFA,mCAA0B;IAI5B,0BAEE;IAEF;;;;MAME;IAEF,0BAwBC;IAED,kBAsBC;IAED,yCAGE;IAEF,+BAKE;IAEF,+CAQE;IAEF,+BAAqE;IAErE,sCAyIC;CACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.1.1",
+  "version": "46.2.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.1.0",
-    "@transferwise/neptune-css": "14.9.1",
+    "@transferwise/neptune-css": "14.9.3",
     "@wise/components-theming": "0.8.4"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-css": "^14.8.2",
+    "@transferwise/neptune-css": "^14.9.3",
     "@wise/art": "^2.7.0",
     "@wise/components-theming": "^0.8.4",
     "react": ">=16.14",
@@ -135,7 +135,7 @@
     "dev:less:watch": "gulp watchLess --dest=src",
     "dev:translations": "npx npm-watch",
     "storybook:dev": "storybook dev -p 3001",
-    "storybook:build": "storybook build",
+    "storybook:build": "storybook build --webpack-stats-json",
     "build:css": "gulp compileLess --dest=src",
     "build": "npm-run-all build:*",
     "build:clean": "rm -rf lib build",

package/src/accordion/Accordion.story.tsx

@@ -31,6 +31,7 @@ const meta: Meta<typeof Accordion> = {
       },
       {
         title: 'Item 2',
+        subtitle: 'Second item',
         content: lorem40,
         id: 'Item 2',
       },
@@ -45,6 +46,13 @@ const meta: Meta<typeof Accordion> = {
         id: 'Item 4',
         icon: <FastFlagIcon size={24} />,
       },
+      {
+        title: 'Item 5',
+        subtitle: 'Fifth item',
+        content: lorem10,
+        id: 'Item 5',
+        icon: <FastFlagIcon size={24} />,
+      },
     ],
   },
 };

package/src/accordion/Accordion.tsx

@@ -9,6 +9,7 @@ export interface AccordionProps {
   items: {
     id?: string;
     title: React.ReactNode;
+    subtitle?: React.ReactNode;
     content: React.ReactNode;
     icon?: React.ReactNode;
   }[];
@@ -86,6 +87,7 @@ const Accordion: FC<AccordionProps> = ({ indexOpen = -1, items, onClick, theme =
           key={item.id || index}
           open={itemsOpen[index]}
           title={item.title}
+          subtitle={item.subtitle}
           content={item.content}
           icon={item.icon}
           onClick={() => handleOnClick(index)}

package/src/accordion/AccordionItem/AccordionItem.tsx

@@ -15,6 +15,8 @@ export interface AccordionItemProps {
   id?: string;
   /** The title of the accordion item. */
   title: ReactNode;
+  /** The subtitle of the accordion item. */
+  subtitle?: ReactNode;
   /** The content of the accordion item. */
   content: ReactNode;
   /** A callback function that is called when the accordion item is clicked. */
@@ -36,6 +38,7 @@ export interface AccordionItemProps {
  * @param {string} [aria-label] - A label for the accordion item, used for accessibility purposes.
  * @param {string} [id] - An ID for the accordion item, used for accessibility purposes.
  * @param {ReactNode} title - The title of the accordion item.
+ * @param {ReactNode} subtitle - The subtitle of the accordion item.
  * @param {ReactNode} content - The content of the accordion item.
  * @param {Function} onClick - A callback function that is called when the accordion item is clicked.
  * @param {boolean} open - Whether the accordion item is currently open or closed.
@@ -65,6 +68,7 @@ const AccordionItem: FC<AccordionItemProps> = ({
   'aria-label': ariaLabel,
   id,
   title,
+  subtitle,
   content,
   onClick,
   open,
@@ -91,6 +95,7 @@ const AccordionItem: FC<AccordionItemProps> = ({
         as="button"
         media={iconElement}
         title={title}
+        content={subtitle}
         button={<Chevron orientation={open ? Position.TOP : Position.BOTTOM} size={Size.MEDIUM} />}
         inverseMediaCircle={false}
         aria-expanded={open}

package/src/common/card/Card.css

@@ -10,16 +10,12 @@
   flex-direction: column;
   align-items: stretch;
   background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
   background-color: var(--Card-background-color);
   border-radius: 32px;
-  border-radius: var(--size-32);
   border-radius: var(--Card-border-radius);
   gap: 16px;
-  gap: var(--size-16);
   gap: var(--Card-flex-gap);
   padding: 24px;
-  padding: var(--size-24);
   padding: var(--Card-padding);
   position: relative;
   box-sizing: border-box;

package/src/criticalBanner/CriticalCommsBanner.css

@@ -5,7 +5,6 @@ div.critical-comms {
   --critical-comms-subtitle-color-padding-left: var(--size-16);
   --critical-comms-vertical-spacing: var(--size-8);
   background-color: rgba(255,135,135,0.10196);
-  background-color: var(--color-background-negative);
   background-color: var(--critical-comms-background-color);
   display: flex;
   justify-content: center;

package/src/flowNavigation/FlowNavigation.css

@@ -13,9 +13,19 @@
   max-width: 1164px;
 }
 .np-flow-navigation__stepper {
-  padding-bottom: 0px !important;
-  padding-left: 0px !important;
-  padding-right: 0px !important;
+  padding-bottom: 0 !important;
+}
+[dir="rtl"] .np-flow-navigation__stepper {
+  padding-right: 0 !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation__stepper {
+  padding-left: 0 !important;
+}
+[dir="rtl"] .np-flow-navigation__stepper {
+  padding-left: 0 !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation__stepper {
+  padding-right: 0 !important;
 }
 .np-flow-navigation--xs-max .np-flow-navigation__stepper .tw-stepper-steps {
   display: none;
@@ -27,11 +37,23 @@
   height: auto;
 }
 .np-flow-navigation--sm .np-flow-navigation__stepper {
+  min-height: 56px;
+}
+[dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
+  padding-right: 24px !important;
+  padding-right: var(--size-24) !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding-left: 24px !important;
   padding-left: var(--size-24) !important;
+}
+[dir="rtl"] .np-flow-navigation--sm .np-flow-navigation__stepper {
+  padding-left: 24px !important;
+  padding-left: var(--size-24) !important;
+}
+html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding-right: 24px !important;
   padding-right: var(--size-24) !important;
-  min-height: 56px;
 }
 .np-flow-navigation--lg .np-flow-navigation__stepper {
   max-width: 562px;

package/src/inputs/Input.css

@@ -14,7 +14,6 @@
   color: #37517e;
   color: var(--color-content-primary);
   box-shadow: inset 0 0 0 1px #c9cbce;
-  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
   box-shadow: inset 0 0 0 var(--ring-width) var(--ring-color);
   transition-property: color, opacity, box-shadow;
   transition-timing-function: ease-in-out;