@transferwise/components 46.162.1 → 46.163.0

package/build/types/Inputs/SelectInput/OptionContent/SelectInputOptionContent.d.ts

@@ -3,11 +3,12 @@ export interface SelectInputOptionContentProps {
     note?: string;
     description?: string;
     icon?: React.ReactNode;
+    className?: string;
 }
 /**
  * Component for rendering structured content within a SelectInput option.
  * Supports title, optional note, description, and icon with different styling
  * based on whether it's rendered within the trigger button or the dropdown.
  */
-export declare function SelectInputOptionContent({ title, note, description, icon, }: SelectInputOptionContentProps): import("react").JSX.Element;
+export declare function SelectInputOptionContent({ title, note, description, icon, className, }: SelectInputOptionContentProps): import("react").JSX.Element;
 //# sourceMappingURL=SelectInputOptionContent.d.ts.map

package/build/types/Inputs/SelectInput/OptionContent/SelectInputOptionContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInputOptionContent.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,IAAI,EACJ,WAAW,EACX,IAAI,GACL,EAAE,6BAA6B,+BAkD/B"}
+{"version":3,"file":"SelectInputOptionContent.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,SAAS,GACV,EAAE,6BAA6B,+BAmD/B"}

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

@@ -55,6 +55,7 @@ declare const _default: import("react").FC<{
     selectProps?: Partial<SelectInputProps<CurrencyOptionItem>> | undefined;
     amount: number | null;
     searchPlaceholder?: string | undefined;
+    decimals?: number | undefined;
     currencies: readonly CurrencyItem[];
     selectedCurrency: CurrencyOptionItem;
     onCurrencyChange?: ((value: CurrencyOptionItem) => void) | undefined;
@@ -66,7 +67,6 @@ declare const _default: import("react").FC<{
     }) => void) | undefined;
     customActionLabel?: import("react").ReactNode;
     onCustomAction?: (() => void) | undefined;
-    decimals?: number | undefined;
 }>;
 export default _default;
 //# sourceMappingURL=MoneyInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/MoneyInput/MoneyInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AACnB,OAAO,EAAuB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEnF,OAAO,EAKL,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAoDnE,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,SAAS,YAAY,EAAE,CAAC;IACpC,gBAAgB,EAAE,kBAAkB,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3F,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC5D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,kCAAkC,GAAG,eAAe,GAC9D,OAAO,CAAC,wBAAwB,CAAC,CAAC;;SA5B7B,MAAM;wBACS,MAAM;YAMnB,SAAS,GAAG,UAAU,GAAG,SAAS;kBAF3B,MAAM;iBAYP,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;kBACrB,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;YAZnD,MAAM,GAAG,IAAI;wBAID,MAAM;gBARd,SAAS,YAAY,EAAE;sBACjB,kBAAkB;wBACjB,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI;sBAIrC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;;sBAM9B,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI;;sBAEzE,MAAM,IAAI;eAQhB,MAAM;;AA0anB,wBAA2F"}
+{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/MoneyInput/MoneyInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AACnB,OAAO,EAAuB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEnF,OAAO,EAKL,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAoDnE,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,SAAS,YAAY,EAAE,CAAC;IACpC,gBAAgB,EAAE,kBAAkB,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3F,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC5D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,kCAAkC,GAAG,eAAe,GAC9D,OAAO,CAAC,wBAAwB,CAAC,CAAC;;SA5B7B,MAAM;wBACS,MAAM;YAMnB,SAAS,GAAG,UAAU,GAAG,SAAS;kBAF3B,MAAM;iBAYP,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;kBACrB,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;YAZnD,MAAM,GAAG,IAAI;wBAID,MAAM;eAcf,MAAM;gBAtBL,SAAS,YAAY,EAAE;sBACjB,kBAAkB;wBACjB,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI;sBAIrC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;;sBAM9B,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI;;sBAEzE,MAAM,IAAI;;AAkb7B,wBAA2F"}

package/build/types/PhoneNumberInput/PhoneNumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumberInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneNumberInput/PhoneNumberInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAGnE,OAAO,EAAyC,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAkBhG,MAAM,WAAW,qBAAqB;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB;IACpB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IACvD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CACvC;AAKD,QAAA,MAAM,gBAAgB,GAAI,gMAevB,qBAAqB,gCAwNvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"PhoneNumberInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneNumberInput/PhoneNumberInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAGnE,OAAO,EAAyC,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAkBhG,MAAM,WAAW,qBAAqB;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB;IACpB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IACvD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CACvC;AAKD,QAAA,MAAM,gBAAgB,GAAI,gMAevB,qBAAqB,gCAyNvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/build/types/Title/Title.d.ts

@@ -10,7 +10,7 @@ export type TitleProps = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElemen
      */
     type?: TitleTypes;
 };
-declare const Title: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLSpanElement | HTMLHeadingElement | HTMLLabelElement> & React.LiHTMLAttributes<HTMLLIElement> & {
+declare const Title: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLHeadingElement | HTMLLabelElement | HTMLSpanElement> & React.LiHTMLAttributes<HTMLLIElement> & {
     /**
      * Default value will based one `type` prop
      */
@@ -19,6 +19,6 @@ declare const Title: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<H
      * Default value: {@link DEFAULT_TYPE}
      */
     type?: TitleTypes;
-} & React.RefAttributes<HTMLSpanElement | HTMLHeadingElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement>>;
+} & React.RefAttributes<HTMLHeadingElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLSpanElement>>;
 export default Title;
 //# sourceMappingURL=Title.d.ts.map

package/build/types/Typeahead/Typeahead.d.ts

@@ -32,6 +32,8 @@ export interface TypeaheadProps<T> extends Partial<WrappedComponentProps> {
     chipSeparators?: readonly string[];
     /** @default true */
     clearable?: boolean;
+    /** @default false */
+    disabled?: boolean;
     footer?: ReactNode;
     /** @default [] */
     initialValue?: readonly TypeaheadOption<T>[];

package/build/types/Typeahead/Typeahead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../../src/Typeahead/Typeahead.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAc,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAG9E,OAAO,EAEL,SAAS,EACT,UAAU,EACV,SAAS,EAIV,MAAM,WAAW,CAAC;AACnB,OAAO,EAAgB,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAU5D,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,MAAM,IAAI;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,MAAM,WAAW,cAAc,CAAC,CAAC,CAAE,SAAQ,OAAO,CAAC,qBAAqB,CAAC;IACvE,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE;QACN,OAAO,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;QACvC,IAAI,CAAC,EACD,iBAAiB,CAAC,WAAW,CAAC,GAC9B,GAAG,SAAS,CAAC,KAAK,EAAE,GACpB,GAAG,SAAS,CAAC,IAAI,EAAE,GACnB,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;KAC5B,CAAC;IACF,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qBAAqB;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB;IAClB,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACnC,oBAAoB;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,kBAAkB;IAClB,YAAY,CAAC,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7C,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IACvC,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oBAAoB;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oBAAoB;IACpB,IAAI,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC;CACtD;wBA6gBoF,CAAC,CAAC,EACrF,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,KACrB,KAAK,CAAC,YAAY;AAFvB,wBAEwB"}
+{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../../src/Typeahead/Typeahead.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAc,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAG9E,OAAO,EAEL,SAAS,EACT,UAAU,EACV,SAAS,EAIV,MAAM,WAAW,CAAC;AACnB,OAAO,EAAgB,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAU5D,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,MAAM,IAAI;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,MAAM,WAAW,cAAc,CAAC,CAAC,CAAE,SAAQ,OAAO,CAAC,qBAAqB,CAAC;IACvE,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE;QACN,OAAO,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;QACvC,IAAI,CAAC,EACD,iBAAiB,CAAC,WAAW,CAAC,GAC9B,GAAG,SAAS,CAAC,KAAK,EAAE,GACpB,GAAG,SAAS,CAAC,IAAI,EAAE,GACnB,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;KAC5B,CAAC;IACF,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qBAAqB;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB;IAClB,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACnC,oBAAoB;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,kBAAkB;IAClB,YAAY,CAAC,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7C,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IACvC,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oBAAoB;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oBAAoB;IACpB,IAAI,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC;CACtD;wBA0hBoF,CAAC,CAAC,EACrF,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,KACrB,KAAK,CAAC,YAAY;AAFvB,wBAEwB"}

package/build/types/Typeahead/TypeaheadInput/TypeaheadInput.d.ts

@@ -12,7 +12,7 @@ export type TypeaheadInputProps<T> = {
     onPaste: React.ClipboardEventHandler<HTMLInputElement>;
     renderChip: (chip: TypeaheadOption<T>, index: number) => ReactNode;
     ariaActivedescendant?: string;
-} & Pick<TypeaheadProps<T>, 'id' | 'name' | 'autoFocus' | 'multiple' | 'placeholder' | 'maxHeight'>;
+} & Pick<TypeaheadProps<T>, 'id' | 'name' | 'autoFocus' | 'disabled' | 'multiple' | 'placeholder' | 'maxHeight'>;
 type TypeaheadInputState = {
     inputWidth: number;
     keyboardFocusedOptionIndex: number | null;

package/build/types/Typeahead/TypeaheadInput/TypeaheadInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypeaheadInput.d.ts","sourceRoot":"","sources":["../../../../src/Typeahead/TypeaheadInput/TypeaheadInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAM/D,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,KAAK,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,CAAC;IACvD,UAAU,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IACnE,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,GAAG,WAAW,CAAC,CAAC;AAEpG,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,0BAA0B,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,cAAc,CAAC,CAAC,CAAE,SAAQ,SAAS,CACtD,mBAAmB,CAAC,CAAC,CAAC,EACtB,mBAAmB,CACpB;IACC,QAAQ,8CAAiC;IACzC,QAAQ,4CAA+B;gBAE3B,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAQzC,iBAAiB;IAUjB,kBAAkB,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAMxD,gBAAgB,aAMd;IAEF,WAAW,GAAI,OAAO,OAAO,iCA6C3B;IAEF,MAAM;CAiCP"}
+{"version":3,"file":"TypeaheadInput.d.ts","sourceRoot":"","sources":["../../../../src/Typeahead/TypeaheadInput/TypeaheadInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAM/D,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,KAAK,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,CAAC;IACvD,UAAU,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IACnE,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,GAAG,IAAI,CACN,cAAc,CAAC,CAAC,CAAC,EACjB,IAAI,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,aAAa,GAAG,WAAW,CACpF,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,0BAA0B,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,cAAc,CAAC,CAAC,CAAE,SAAQ,SAAS,CACtD,mBAAmB,CAAC,CAAC,CAAC,EACtB,mBAAmB,CACpB;IACC,QAAQ,8CAAiC;IACzC,QAAQ,4CAA+B;gBAE3B,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAQzC,iBAAiB;IAUjB,kBAAkB,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAMxD,gBAAgB,aAMd;IAEF,WAAW,GAAI,OAAO,OAAO,iCA+C3B;IAEF,MAAM;CAiCP"}

package/build/types/Upload/Steps/UploadImageStep/UploadImageStep.d.ts

@@ -15,7 +15,7 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
     uploadInputRef: import("react").RefObject<HTMLInputElement>;
     onManualUpload: () => void;
     onKeyDown: (event: React.KeyboardEvent<HTMLLabelElement>) => void;
-    getImage: () => number | true | import("react").JSX.Element | Iterable<import("react").ReactNode>;
+    getImage: () => number | true | Iterable<import("react").ReactNode> | import("react").JSX.Element;
     render(): import("react").JSX.Element;
 }
 //# sourceMappingURL=UploadImageStep.d.ts.map

package/build/types/UploadInput/UploadItem/UploadItemLink.d.ts

@@ -5,5 +5,5 @@ export declare const UploadItemLink: import("react").ForwardRefExoticComponent<{
     singleFileUpload: boolean;
 } & {
     children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
+} & import("react").RefAttributes<HTMLAnchorElement | HTMLDivElement>>;
 //# sourceMappingURL=UploadItemLink.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.162.1",
+  "version": "46.163.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -44,7 +44,7 @@
     "@babel/preset-env": "^7.29.7",
     "@babel/preset-react": "^7.29.7",
     "@babel/preset-typescript": "^7.29.7",
-    "@formatjs/cli": "^6.16.23",
+    "@formatjs/cli": "^6.16.31",
     "@rollup/plugin-babel": "^7.1.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
@@ -55,7 +55,7 @@
     "@storybook/addon-mcp": "^0.7.0",
     "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
     "@storybook/react-webpack5": "^10.6.0",
-    "@testing-library/dom": "^10.4.1",
+    "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.7",
@@ -89,14 +89,14 @@
     "lodash.times": "^4.3.2",
     "react-intl": "^7.1.14",
     "react-live": "^4.1.8",
-    "rollup": "^4.63.1",
+    "rollup": "^4.63.4",
     "rollup-preserve-directives": "^1.1.3",
     "storybook": "^10.6.0",
     "storybook-addon-tag-badges": "^3.1.0",
     "storybook-addon-test-codegen": "^3.0.4"
   },
   "peerDependencies": {
-    "@transferwise/icons": "^3 || ^4",
+    "@transferwise/icons": "^4.5.0",
     "@wise/art": "^2.31.1",
     "@wise/components-theming": "^1.10.1",
     "motion": "^12.23.26",

package/src/Button/Button.css

@@ -241,6 +241,3 @@
 .np-theme-personal--bright-green .wds-Button--secondary-neutral .wds-Button-avatars .np-circle {
   --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
 }
-[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right,[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-down,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-up,[dir="rtl"] .wds-Button .tw-icon-list,[dir="rtl"] .wds-Button .tw-icon-activity {
-  scale: -1 1;
-}

package/src/Button/Button.less

@@ -244,19 +244,3 @@
     }
   }
 }
-
-
-:dir(rtl) {
-  .wds-Button {
-    .tw-icon-chevron-right,
-    .tw-icon-arrow-right,
-    .tw-icon-chevron-left,
-    .tw-icon-arrow-left,
-    .tw-icon-arrow-diagonal-down,
-    .tw-icon-arrow-diagonal-up,
-    .tw-icon-list,
-    .tw-icon-activity {
-      scale: -1 1;
-    }
-  }
-}

package/src/Button/_stories/Button.test.story.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { ArrowRight, ChevronRight, Freeze } from '@transferwise/icons';
+import { ArrowEnd, ChevronEnd, Freeze } from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import { expect, userEvent, within } from 'storybook/test';
 import Button from '../Button.resolver';
@@ -55,7 +55,7 @@ export const AllVariants: Story = {
               priority={priority}
               size={size}
               addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-              addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+              addonEnd={{ type: 'icon', value: <ArrowEnd /> }}
               block
             >
               {`${priority} default ${size}`}
@@ -69,7 +69,7 @@ export const AllVariants: Story = {
                 type: 'avatar',
                 value: [{ asset: <Freeze /> }, { asset: <Freeze /> }],
               }}
-              addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+              addonEnd={{ type: 'icon', value: <ArrowEnd /> }}
               block
               disabled
             >
@@ -80,7 +80,7 @@ export const AllVariants: Story = {
               priority={priority}
               size={size}
               addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-              addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+              addonEnd={{ type: 'icon', value: <ArrowEnd /> }}
               block
               loading
             >
@@ -100,7 +100,7 @@ export const AllVariants: Story = {
               sentiment="negative"
               priority={priority as ButtonPriority}
               size={size}
-              addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+              addonEnd={{ type: 'icon', value: <ChevronEnd /> }}
               addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
               block
             >
@@ -112,7 +112,7 @@ export const AllVariants: Story = {
               sentiment="negative"
               priority={priority as ButtonPriority}
               size={size}
-              addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+              addonEnd={{ type: 'icon', value: <ChevronEnd /> }}
               addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
               block
               disabled
@@ -124,7 +124,7 @@ export const AllVariants: Story = {
               sentiment="negative"
               priority={priority as ButtonPriority}
               size={size}
-              addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+              addonEnd={{ type: 'icon', value: <ChevronEnd /> }}
               addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
               block
               loading
@@ -174,7 +174,7 @@ export const RTLDiff: Story = {
         Start icon
       </Button>
 
-      <Button v2 size="md" addonEnd={{ type: 'icon', value: <ArrowRight /> }}>
+      <Button v2 size="md" addonEnd={{ type: 'icon', value: <ArrowEnd /> }}>
         End icon
       </Button>
 
@@ -182,7 +182,7 @@ export const RTLDiff: Story = {
         v2
         size="md"
         addonStart={{ type: 'icon', value: <Freeze /> }}
-        addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+        addonEnd={{ type: 'icon', value: <ArrowEnd /> }}
       >
         Both icons
       </Button>
@@ -206,7 +206,7 @@ export const RTLDiff: Story = {
         Sm start icon
       </Button>
 
-      <Button v2 size="sm" addonEnd={{ type: 'icon', value: <ArrowRight /> }}>
+      <Button v2 size="sm" addonEnd={{ type: 'icon', value: <ArrowEnd /> }}>
         Sm end icon
       </Button>
 
@@ -214,12 +214,12 @@ export const RTLDiff: Story = {
         v2
         size="sm"
         addonStart={{ type: 'icon', value: <Freeze /> }}
-        addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+        addonEnd={{ type: 'icon', value: <ArrowEnd /> }}
       >
         Sm both icons
       </Button>
 
-      <Button v2 size="md" loading addonEnd={{ type: 'icon', value: <ArrowRight /> }}>
+      <Button v2 size="md" loading addonEnd={{ type: 'icon', value: <ArrowEnd /> }}>
         Loading
       </Button>
 

package/src/Calendar/DateHeader/DateHeader.tsx

@@ -6,7 +6,7 @@ import { useLayout } from '../../common/hooks';
 import Title from '../../Title';
 import messages from '../Calendar.messages';
 import Button from '../../Button/Button';
-import { ChevronDown, ChevronLeft, ChevronRight } from '@transferwise/icons';
+import { ChevronDown, ChevronStart, ChevronEnd } from '@transferwise/icons';
 import IconButton from '../../IconButton';
 
 interface DateHeaderProps {
@@ -41,7 +41,7 @@ const DateHeader: React.FC<DateHeaderProps> = ({
           disabled={isPreviousDisabled}
           onClick={onPreviousClick}
         >
-          <ChevronLeft className="left-single-direction" />
+          <ChevronStart />
         </IconButton>
       </div>
       {label && (
@@ -69,7 +69,7 @@ const DateHeader: React.FC<DateHeaderProps> = ({
           disabled={isNextDisabled}
           onClick={onNextClick}
         >
-          <ChevronRight className="right-single-direction" />
+          <ChevronEnd />
         </IconButton>
       </div>
     </div>

package/src/Carousel/Carousel.tsx

@@ -1,4 +1,4 @@
-import { ChevronLeft, ChevronRight } from '@transferwise/icons';
+import { ChevronStart, ChevronEnd } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react';
 
@@ -182,7 +182,7 @@ const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }
               data-testid="scroll-carousel-left"
               onClick={() => scrollCarousel('backward')}
             >
-              <ChevronLeft />
+              <ChevronStart />
             </IconButton>
             <IconButton
               size={32}
@@ -194,7 +194,7 @@ const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }
               disabled={scrollIsAtEnd}
               onClick={() => scrollCarousel('forward')}
             >
-              <ChevronRight />
+              <ChevronEnd />
             </IconButton>
           </div>
         ) : null}

package/src/Chips/Chip/Chip.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen, userEvent } from '../../test-utils';
+
+import Chip from './Chip';
+
+describe('Chip', () => {
+  it('calls onClick when clicked', async () => {
+    const onClick = jest.fn();
+    render(<Chip label="Accounting" onClick={onClick} />);
+
+    await userEvent.click(screen.getByRole('button', { name: 'Accounting' }));
+
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  describe('when disabled', () => {
+    it('does not call onClick when clicked', async () => {
+      const onClick = jest.fn();
+      render(<Chip label="Accounting" disabled onClick={onClick} />);
+
+      await userEvent.click(screen.getByRole('button', { name: 'Accounting' }));
+
+      expect(onClick).not.toHaveBeenCalled();
+    });
+
+    it('marks an actionable chip as disabled and takes it out of the tab order', () => {
+      render(<Chip label="Accounting" disabled onClick={() => {}} />);
+
+      const chip = screen.getByRole('button', { name: 'Accounting' });
+      expect(chip).toHaveAttribute('aria-disabled', 'true');
+      expect(chip).toHaveAttribute('tabindex', '-1');
+      expect(chip).toHaveClass('disabled');
+    });
+  });
+});

package/src/Chips/Chip/Chip.tsx

@@ -13,6 +13,8 @@ export type ChipProps<T extends ChipValue = ChipValue> = {
   onRemove?: () => void;
   onClick?: () => void;
   onKeyPress?: () => void;
+  /** @default false */
+  disabled?: boolean;
   closeButton?: AriaLabelProperty;
   'aria-checked'?: boolean;
   role?: string;
@@ -25,6 +27,7 @@ const Chip = <T extends ChipValue = ChipValue>({
   onRemove,
   onClick,
   onKeyPress,
+  disabled = false,
   className = undefined,
   'aria-label': ariaLabel,
   'aria-checked': ariaChecked,
@@ -32,8 +35,10 @@ const Chip = <T extends ChipValue = ChipValue>({
   closeButton,
 }: ChipProps<T>) => {
   const isActionable = onClick || onKeyPress;
+  const isInteractive = isActionable && !disabled;
   const defaultRole = isActionable ? 'button' : undefined;
-  const tabIndex = isActionable ? 0 : -1;
+  const chipRole = role ?? defaultRole;
+  const tabIndex = isInteractive ? 0 : -1;
 
   const closeButtonReference = useRef<HTMLButtonElement>(null);
   const previousCloseButtonShown = useRef<boolean | undefined>(undefined);
@@ -47,19 +52,21 @@ const Chip = <T extends ChipValue = ChipValue>({
   return (
     <div
       key={value}
-      role={role ?? defaultRole}
+      role={chipRole}
       tabIndex={tabIndex}
       aria-label={ariaLabel}
       aria-checked={ariaChecked}
+      aria-disabled={chipRole && disabled ? true : undefined}
       className={clsx(
         'np-chip',
         'd-flex',
         'align-items-center',
         'justify-content-between',
         onRemove ? 'np-chip--removable' : '',
+        { disabled },
         className,
       )}
-      {...(isActionable && { onClick, onKeyPress })}
+      {...(isInteractive && { onClick, onKeyPress })}
     >
       <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>
         {label}
@@ -71,6 +78,7 @@ const Chip = <T extends ChipValue = ChipValue>({
           aria-label={closeButton?.['aria-label']}
           size="sm"
           filled
+          isDisabled={disabled}
           onClick={onRemove}
         />
       ) : null}

package/src/DateInput/DateInput.css

@@ -9,6 +9,19 @@
 .tw-date .tw-date--day {
   margin-block-end: 0;
 }
+[dir="rtl"] .tw-date .np-input {
+  text-align: end;
+}
+[dir="rtl"] .tw-date .np-input::-moz-placeholder {
+  text-align: start;
+}
+[dir="rtl"] .tw-date .np-input:-moz-placeholder {
+  text-align: start;
+}
+[dir="rtl"] .tw-date .np-input::placeholder,
+[dir="rtl"] .tw-date .np-input:placeholder-shown {
+  text-align: start;
+}
 @media (min-width: 600px) {
   .np-theme-personal .tw-date label {
     margin-block-end: 0;

package/src/DateInput/DateInput.less

@@ -10,7 +10,15 @@
   .tw-date--year,
   .tw-date--month,
   .tw-date--day {
-      margin-bottom: 0;
+    margin-bottom: 0;
+  }
+  [dir="rtl"] & .np-input {
+    text-align: right;
+
+    &::placeholder,
+    &:placeholder-shown {
+      text-align: start;
+    }
   }
 }
 
@@ -22,4 +30,4 @@
       }
     }
   }
-}
+}

package/src/DateInput/_stories/DateInput.rtl.test.story.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn, userEvent, within } from 'storybook/test';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import DateInput from '..';
+
+export default {
+  component: DateInput,
+  title: 'Forms/DateInput/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof DateInput>;
+
+type Story = StoryObj<typeof DateInput>;
+
+export const Sizes: Story = {
+  render: () => (
+    <>
+      <DateInput size="sm" onChange={fn()} />
+      <DateInput size="md" onChange={fn()} />
+      <DateInput size="lg" onChange={fn()} />
+      <DateInput mode="month-year" onChange={fn()} />
+    </>
+  ),
+  ...withRTLDiff({ renderAs: 'iframe' }),
+};
+
+export const OpenDropdown: Story = {
+  render: () => <DateInput onChange={() => {}} />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.queryByRole('combobox');
+    if (!trigger) return;
+    await userEvent.click(trigger);
+  },
+  ...withRTLDiff({ renderAs: 'iframe' }),
+};

package/src/DateInput/_stories/DateInput.test.story.tsx

@@ -6,7 +6,6 @@ import { lorem10 } from '../../test-utils';
 
 import Provider from '../../Provider';
 import translations from '../../i18n';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import { withVariantConfig } from '../../../.storybook/helpers';
 
 const meta: Meta<typeof DateInput> = {
@@ -231,15 +230,3 @@ export const InputErrorMobile: Story = {
   ...InputError,
   ...withVariantConfig(['mobile'], InputError),
 };
-
-export const RTLDiff: Story = {
-  render: () => (
-    <>
-      <DateInput size="sm" onChange={fn()} />
-      <DateInput size="md" onChange={fn()} />
-      <DateInput size="lg" onChange={fn()} />
-      <DateInput mode="month-year" onChange={fn()} />
-    </>
-  ),
-  ...withRTLDiff(),
-};

package/src/ExpressiveMoneyInput/_stories/ExpressiveMoneyInput.rtl.test.story.tsx

@@ -90,7 +90,7 @@ export const TriggerVariants: Story = {
       />
     </>
   ),
-  ...withRTLDiff({ width: 'stretch' }),
+  ...withRTLDiff({ renderAs: 'iframe', width: 'stretch' }),
 };
 
 export const OpenDropdown: Story = {

package/src/InputWithDisplayFormat/_stories/InputWithDisplayFormat.test.story.tsx

@@ -1,6 +1,7 @@
 import { userEvent, within } from 'storybook/test';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import InputWithDisplayFormat, { InputWithDisplayFormatProps } from '..';
 import Field, { FieldProps } from '../../Field/Field';
 
@@ -31,3 +32,54 @@ export const SecurityPinPlay: Story = {
     await userEvent.type(canvas.getByPlaceholderText('*-*-*-*-*-*'), '123456');
   },
 };
+
+export const RTLDiff: StoryObj<typeof InputWithDisplayFormat> = {
+  render: () => {
+    const i18n = useRtlDiffI18n();
+
+    return (
+      <>
+        <Field id="empty" label="Empty with placeholder">
+          <InputWithDisplayFormat
+            id="empty"
+            value=""
+            displayPattern="**** - **** - ****"
+            placeholder={i18n.placeholder}
+            onChange={() => {}}
+          />
+        </Field>
+        <Field id="card-code" label="Localised pattern">
+          <InputWithDisplayFormat
+            id="card-code"
+            value={i18n.value}
+            maxLength={16}
+            displayPattern="**** - **** - ****"
+            onChange={() => {}}
+          />
+        </Field>
+        <Field id="iban" label="IBAN (not localised)">
+          <InputWithDisplayFormat
+            id="iban"
+            value="GB29NWBK60161331926819"
+            maxLength={22}
+            displayPattern="** **** **** **** **** ****"
+            onChange={() => {}}
+          />
+        </Field>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    width: 'stretch',
+    i18n: {
+      value: {
+        ltr: 'XKQMRTBWJNFL',
+        rtl: 'خكقمرتبوجنفل',
+      },
+      placeholder: {
+        ltr: 'Enter code',
+        rtl: 'أدخل الرمز',
+      },
+    },
+  }),
+};