@transferwise/components 0.0.0-experimental-af01b75 → 0.0.0-experimental-0657ea4

package/build/main.css

@@ -21875,27 +21875,35 @@ button.np-option {
 .np-panel[data-popper-placement^="top"] > .np-panel__content {
   transform: translateY(10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="top"] > .np-panel__content .np-panel__arrow {
+.np-panel[data-popper-placement^="top"] .np-panel__arrow {
   inset-block-end: -6px;
 }
 .np-panel[data-popper-placement^="right"] > .np-panel__content {
   transform: translateX(-10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="right"] > .np-panel__content .np-panel__arrow {
+.np-panel[data-popper-placement^="right"] .np-panel__arrow {
   inset-inline-start: -6px;
 }
+[dir="rtl"] .np-panel[data-popper-placement^="right"] .np-panel__arrow {
+  inset-inline-start: unset;
+  inset-inline-end: -6px;
+}
 .np-panel[data-popper-placement^="bottom"] > .np-panel__content {
   transform: translateY(-10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="bottom"] > .np-panel__content .np-panel__arrow {
+.np-panel[data-popper-placement^="bottom"] .np-panel__arrow {
   inset-block-start: -6px;
 }
 .np-panel[data-popper-placement^="left"] > .np-panel__content {
   transform: translateX(10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="left"] > .np-panel__content .np-panel__arrow {
+.np-panel[data-popper-placement^="left"] .np-panel__arrow {
   inset-inline-end: -6px;
 }
+[dir="rtl"] .np-panel[data-popper-placement^="left"] .np-panel__arrow {
+  inset-inline-end: unset;
+  inset-inline-start: -6px;
+}
 .np-theme-personal .np-panel__content {
   border-radius: 16px;
   border-radius: var(--radius-medium);

package/build/styles/common/Panel/Panel.css

@@ -39,27 +39,35 @@
 .np-panel[data-popper-placement^="top"] > .np-panel__content {
   transform: translateY(10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="top"] > .np-panel__content .np-panel__arrow {
+.np-panel[data-popper-placement^="top"] .np-panel__arrow {
   inset-block-end: -6px;
 }
 .np-panel[data-popper-placement^="right"] > .np-panel__content {
   transform: translateX(-10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="right"] > .np-panel__content .np-panel__arrow {
+.np-panel[data-popper-placement^="right"] .np-panel__arrow {
   inset-inline-start: -6px;
 }
+[dir="rtl"] .np-panel[data-popper-placement^="right"] .np-panel__arrow {
+  inset-inline-start: unset;
+  inset-inline-end: -6px;
+}
 .np-panel[data-popper-placement^="bottom"] > .np-panel__content {
   transform: translateY(-10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="bottom"] > .np-panel__content .np-panel__arrow {
+.np-panel[data-popper-placement^="bottom"] .np-panel__arrow {
   inset-block-start: -6px;
 }
 .np-panel[data-popper-placement^="left"] > .np-panel__content {
   transform: translateX(10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="left"] > .np-panel__content .np-panel__arrow {
+.np-panel[data-popper-placement^="left"] .np-panel__arrow {
   inset-inline-end: -6px;
 }
+[dir="rtl"] .np-panel[data-popper-placement^="left"] .np-panel__arrow {
+  inset-inline-end: unset;
+  inset-inline-start: -6px;
+}
 .np-theme-personal .np-panel__content {
   border-radius: 16px;
   border-radius: var(--radius-medium);

package/build/styles/main.css

@@ -21875,27 +21875,35 @@ button.np-option {
 .np-panel[data-popper-placement^="top"] > .np-panel__content {
   transform: translateY(10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="top"] > .np-panel__content .np-panel__arrow {
+.np-panel[data-popper-placement^="top"] .np-panel__arrow {
   inset-block-end: -6px;
 }
 .np-panel[data-popper-placement^="right"] > .np-panel__content {
   transform: translateX(-10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="right"] > .np-panel__content .np-panel__arrow {
+.np-panel[data-popper-placement^="right"] .np-panel__arrow {
   inset-inline-start: -6px;
 }
+[dir="rtl"] .np-panel[data-popper-placement^="right"] .np-panel__arrow {
+  inset-inline-start: unset;
+  inset-inline-end: -6px;
+}
 .np-panel[data-popper-placement^="bottom"] > .np-panel__content {
   transform: translateY(-10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="bottom"] > .np-panel__content .np-panel__arrow {
+.np-panel[data-popper-placement^="bottom"] .np-panel__arrow {
   inset-block-start: -6px;
 }
 .np-panel[data-popper-placement^="left"] > .np-panel__content {
   transform: translateX(10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="left"] > .np-panel__content .np-panel__arrow {
+.np-panel[data-popper-placement^="left"] .np-panel__arrow {
   inset-inline-end: -6px;
 }
+[dir="rtl"] .np-panel[data-popper-placement^="left"] .np-panel__arrow {
+  inset-inline-end: unset;
+  inset-inline-start: -6px;
+}
 .np-theme-personal .np-panel__content {
   border-radius: 16px;
   border-radius: var(--radius-medium);

package/build/types/Body/Body.d.ts

@@ -11,7 +11,7 @@ export type BodyProps = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> &
      */
     preserveNewlines?: boolean;
 };
-declare const Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {
+declare const Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement | HTMLSpanElement> & {
     /** @default 'body-default' */
     type?: BodyTypes;
     /** @default 'div' */
@@ -21,6 +21,6 @@ declare const Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTM
      * @default false
      */
     preserveNewlines?: boolean;
-} & import("react").RefAttributes<HTMLDivElement | HTMLSpanElement | HTMLParagraphElement | null>>;
+} & import("react").RefAttributes<HTMLDivElement | HTMLParagraphElement | HTMLSpanElement | null>>;
 export default Body;
 //# sourceMappingURL=Body.d.ts.map

package/build/types/ExpressiveMoneyInput/Chevron/Chevron.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chevron.d.ts","sourceRoot":"","sources":["../../../../src/ExpressiveMoneyInput/Chevron/Chevron.tsx"],"names":[],"mappings":"AAIA,UAAU,KAAK;IACb,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,OAAO,GAAI,gBAAuB,KAAK,gCA0BnD,CAAC"}
+{"version":3,"file":"Chevron.d.ts","sourceRoot":"","sources":["../../../../src/ExpressiveMoneyInput/Chevron/Chevron.tsx"],"names":[],"mappings":"AAMA,UAAU,KAAK;IACb,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,OAAO,GAAI,gBAAuB,KAAK,gCA6BnD,CAAC"}

package/build/types/IconButton/IconButton.d.ts

@@ -16,6 +16,6 @@ declare const IconButton: import("react").ForwardRefExoticComponent<{
     /** @default 'default' */
     type?: "default" | "negative";
     'data-testid'?: string;
-} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "href"> & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "onClick"> & Pick<HTMLAttributes<HTMLDivElement>, "children" | "className" | "id" | "tabIndex" | "role" | "aria-label"> & import("react").RefAttributes<unknown>>;
+} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "href"> & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "onClick"> & Pick<HTMLAttributes<HTMLDivElement>, "id" | "className" | "tabIndex" | "role" | "aria-label" | "children"> & import("react").RefAttributes<unknown>>;
 export default IconButton;
 //# sourceMappingURL=IconButton.d.ts.map

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;;AAyanB,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;;AAib7B,wBAA2F"}

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/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/build/types/common/Panel/Panel.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, PropsWithChildren, RefObject, SyntheticEvent } from 'react';
-import { type FloatingPlacement } from '..';
+import { type FloatingPlacement } from './Panel.positionUtils';
 export type PanelProps = PropsWithChildren<{
     arrow?: boolean;
     flip?: boolean;

package/build/types/common/Panel/Panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../src/common/Panel/Panel.tsx"],"names":[],"mappings":"AAWA,OAAO,EAEL,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,cAAc,EAIf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAY,KAAK,iBAAiB,EAAuB,MAAM,IAAI,CAAC;AAwB3E,MAAM,MAAM,UAAU,GAAG,iBAAiB,CAAC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,SAAS,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC,GACA,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjC,QAAA,MAAM,KAAK;YAZD,OAAO;WACR,OAAO;cACJ,OAAO;WACV,OAAO;cACJ,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,IAAI;eACtC,iBAAiB;eACjB,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;kBACtB,OAAO;qBACJ,OAAO;;;mFAkGxB,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../src/common/Panel/Panel.tsx"],"names":[],"mappings":"AAUA,OAAO,EAEL,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,cAAc,EAIf,MAAM,OAAO,CAAC;AAMf,OAAO,EACL,KAAK,iBAAiB,EAKvB,MAAM,uBAAuB,CAAC;AAE/B,MAAM,MAAM,UAAU,GAAG,iBAAiB,CAAC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,SAAS,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC,GACA,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjC,QAAA,MAAM,KAAK;YAZD,OAAO;WACR,OAAO;cACJ,OAAO;WACV,OAAO;cACJ,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,IAAI;eACtC,iBAAiB;eACjB,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;kBACtB,OAAO;qBACJ,OAAO;;;mFAoGxB,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/build/types/common/Panel/Panel.positionUtils.d.ts

@@ -0,0 +1,7 @@
+import type { Placement } from '@floating-ui/react';
+export type FloatingPlacement = 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'right-top' | 'right-bottom' | 'bottom-left' | 'bottom-right' | 'left-top' | 'left-bottom';
+export declare const POPOVER_OFFSET = 16;
+export declare const fallbackPlacements: Record<Placement, Placement[]>;
+export declare const positionToPlacement: (position: FloatingPlacement) => Placement;
+export declare const mirrorPositionForRtl: (position: FloatingPlacement) => FloatingPlacement;
+//# sourceMappingURL=Panel.positionUtils.d.ts.map

package/build/types/common/Panel/Panel.positionUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.positionUtils.d.ts","sourceRoot":"","sources":["../../../../src/common/Panel/Panel.positionUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD,MAAM,MAAM,iBAAiB,GACzB,KAAK,GACL,OAAO,GACP,QAAQ,GACR,MAAM,GACN,UAAU,GACV,WAAW,GACX,WAAW,GACX,cAAc,GACd,aAAa,GACb,cAAc,GACd,UAAU,GACV,aAAa,CAAC;AAElB,eAAO,MAAM,cAAc,KAAK,CAAC;AAKjC,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,CAa7D,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,UAAU,iBAAiB,KAAG,SAqBjE,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,UAAU,iBAAiB,KAAG,iBAmBlE,CAAC"}

package/build/types/common/PropsValues/position.d.ts

@@ -1,4 +1,3 @@
-import type { Placement } from '@floating-ui/react';
 export declare enum Position {
     BOTTOM = "bottom",
     BOTTOM_LEFT = "bottom-left",
@@ -19,16 +18,4 @@ export type PositionTop = 'top';
 export type PositionRight = 'right';
 export type PositionBottom = 'bottom';
 export type PositionLeft = 'left';
-export type PositionTopLeft = 'top-left';
-export type PositionTopRight = 'top-right';
-export type PositionBottomLeft = 'bottom-left';
-export type PositionBottomRight = 'bottom-right';
-export type PositionLeftTop = 'left-top';
-export type PositionLeftBottom = 'left-bottom';
-export type PositionRightTop = 'right-top';
-export type PositionRightBottom = 'right-bottom';
-/** Neptune position values that can be converted to floating-ui Placement */
-export type FloatingPlacement = PositionTop | PositionRight | PositionBottom | PositionLeft | PositionTopLeft | PositionTopRight | PositionRightTop | PositionRightBottom | PositionBottomLeft | PositionBottomRight | PositionLeftTop | PositionLeftBottom;
-/** Maps Neptune position values to floating-ui Placement */
-export declare const positionToPlacement: (position: FloatingPlacement) => Placement;
 //# sourceMappingURL=position.d.ts.map

package/build/types/common/PropsValues/position.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../../src/common/PropsValues/position.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD,oBAAY,QAAQ;IAClB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;IAC7B,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,YAAY,iBAAiB;IAC7B,SAAS,cAAc;IACvB,GAAG,QAAQ;IACX,QAAQ,aAAa;IACrB,SAAS,cAAc;CACxB;AAED,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;AACtC,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC;AAChC,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC;AACpC,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;AACtC,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC;AAElC,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC;AACzC,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC;AAC3C,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC;AAC/C,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC;AACjD,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC;AACzC,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC;AAC/C,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC;AAC3C,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC;AAEjD,6EAA6E;AAC7E,MAAM,MAAM,iBAAiB,GACzB,WAAW,GACX,aAAa,GACb,cAAc,GACd,YAAY,GACZ,eAAe,GACf,gBAAgB,GAChB,gBAAgB,GAChB,mBAAmB,GACnB,kBAAkB,GAClB,mBAAmB,GACnB,eAAe,GACf,kBAAkB,CAAC;AAEvB,4DAA4D;AAC5D,eAAO,MAAM,mBAAmB,GAAI,UAAU,iBAAiB,KAAG,SAqBjE,CAAC"}
+{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../../src/common/PropsValues/position.ts"],"names":[],"mappings":"AAAA,oBAAY,QAAQ;IAClB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;IAC7B,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,YAAY,iBAAiB;IAC7B,SAAS,cAAc;IACvB,GAAG,QAAQ;IACX,QAAQ,aAAa;IACrB,SAAS,cAAc;CACxB;AAED,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;AACtC,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC;AAChC,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC;AACpC,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;AACtC,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC"}

package/build/types/common/ResponsivePanel/ResponsivePanel.d.ts

@@ -4,7 +4,7 @@ declare const ResponsivePanel: import("react").ForwardRefExoticComponent<{
     altAxis?: boolean;
     open?: boolean;
     onClose?: (event: Event | import("react").SyntheticEvent) => void;
-    position?: import("..").FloatingPlacement;
+    position?: import("../Panel/Panel.positionUtils").FloatingPlacement;
     anchorRef: import("react").RefObject<Element | null>;
     anchorWidth?: boolean;
     considerHeight?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-af01b75",
+  "version": "0.0.0-experimental-0657ea4",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,7 +91,7 @@
     "storybook": "^10.5.4",
     "storybook-addon-tag-badges": "^3.1.0",
     "storybook-addon-test-codegen": "^3.0.4",
-    "@transferwise/less-config": "0.0.0-experimental-af01b75",
+    "@transferwise/less-config": "3.2.0",
     "@wise/components-theming": "1.10.3",
     "@wise/wds-configs": "0.0.0"
   },

package/src/ExpressiveMoneyInput/Chevron/Chevron.tsx

@@ -1,12 +1,17 @@
-import { ChevronLeft } from '@transferwise/icons';
+import { ChevronLeft, ChevronRight } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import { motion } from 'motion/react';
 
+import { useDirection } from '../../common/hooks';
+
 interface Props {
   shouldShow: boolean;
 }
 
 export const Chevron = ({ shouldShow = true }: Props) => {
+  const { isRTL } = useDirection();
+  const Icon = isRTL ? ChevronRight : ChevronLeft;
+
   return (
     <div
       className={clsx(
@@ -17,7 +22,7 @@ export const Chevron = ({ shouldShow = true }: Props) => {
     >
       <motion.div
         animate={{
-          x: [12, 0, 0, -12],
+          x: isRTL ? [-12, 0, 0, 12] : [12, 0, 0, -12],
           opacity: [0, 1, 1, 0],
         }}
         transition={{
@@ -28,7 +33,7 @@ export const Chevron = ({ shouldShow = true }: Props) => {
           repeatType: 'loop',
         }}
       >
-        <ChevronLeft />
+        <Icon />
       </motion.div>
     </div>
   );

package/src/common/Panel/Panel.css

@@ -39,27 +39,35 @@
 .np-panel[data-popper-placement^="top"] > .np-panel__content {
   transform: translateY(10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="top"] > .np-panel__content .np-panel__arrow {
+.np-panel[data-popper-placement^="top"] .np-panel__arrow {
   inset-block-end: -6px;
 }
 .np-panel[data-popper-placement^="right"] > .np-panel__content {
   transform: translateX(-10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="right"] > .np-panel__content .np-panel__arrow {
+.np-panel[data-popper-placement^="right"] .np-panel__arrow {
   inset-inline-start: -6px;
 }
+[dir="rtl"] .np-panel[data-popper-placement^="right"] .np-panel__arrow {
+  inset-inline-start: unset;
+  inset-inline-end: -6px;
+}
 .np-panel[data-popper-placement^="bottom"] > .np-panel__content {
   transform: translateY(-10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="bottom"] > .np-panel__content .np-panel__arrow {
+.np-panel[data-popper-placement^="bottom"] .np-panel__arrow {
   inset-block-start: -6px;
 }
 .np-panel[data-popper-placement^="left"] > .np-panel__content {
   transform: translateX(10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="left"] > .np-panel__content .np-panel__arrow {
+.np-panel[data-popper-placement^="left"] .np-panel__arrow {
   inset-inline-end: -6px;
 }
+[dir="rtl"] .np-panel[data-popper-placement^="left"] .np-panel__arrow {
+  inset-inline-end: unset;
+  inset-inline-start: -6px;
+}
 .np-theme-personal .np-panel__content {
   border-radius: 16px;
   border-radius: var(--radius-medium);

package/src/common/Panel/Panel.less

@@ -11,7 +11,7 @@
       opacity 0.2s cubic-bezier(0.6, 0.2, 0.1, 1),
       transform 0.2s cubic-bezier(0.6, 0.2, 0.1, 1),
       visibility 0s linear 0.2s;
-    
+
     .np-theme-personal & {
       border-radius: var(--radius-small);
     }
@@ -45,35 +45,53 @@
     background: var(--color-background-elevated);
   }
 
-  &[data-popper-placement^="top"] > &__content {
-    transform: translateY(10px) scale(0.95);
+  &[data-popper-placement^="top"] {
+    > .np-panel__content {
+      transform: translateY(10px) scale(0.95);
+    }
 
     .np-panel__arrow {
       bottom: -6px;
     }
   }
 
-  &[data-popper-placement^="right"] > &__content {
-    transform: translateX(-10px) scale(0.95);
+  &[data-popper-placement^="right"] {
+    > .np-panel__content {
+      transform: translateX(-10px) scale(0.95);
+    }
 
     .np-panel__arrow {
       left: -6px;
+
+      [dir="rtl"] & {
+        left: unset;
+        right: -6px;
+      }
     }
   }
 
-  &[data-popper-placement^="bottom"] > &__content {
-    transform: translateY(-10px) scale(0.95);
+  &[data-popper-placement^="bottom"] {
+    > .np-panel__content {
+      transform: translateY(-10px) scale(0.95);
+    }
 
     .np-panel__arrow {
       top: -6px;
     }
   }
 
-  &[data-popper-placement^="left"] > &__content {
-    transform: translateX(10px) scale(0.95);
+  &[data-popper-placement^="left"] {
+    > .np-panel__content {
+      transform: translateX(10px) scale(0.95);
+    }
 
     .np-panel__arrow {
       right: -6px;
+
+      [dir="rtl"] & {
+        right: unset;
+        left: -6px;
+      }
     }
   }
 }

package/src/common/Panel/Panel.positionUtils.ts

@@ -0,0 +1,79 @@
+import type { Placement } from '@floating-ui/react';
+
+export type FloatingPlacement =
+  | 'top'
+  | 'right'
+  | 'bottom'
+  | 'left'
+  | 'top-left'
+  | 'top-right'
+  | 'right-top'
+  | 'right-bottom'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'left-top'
+  | 'left-bottom';
+
+export const POPOVER_OFFSET = 16;
+
+// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
+// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
+// This mapping forces popover to try the four available positions before going back to the initial chosen one.
+export const fallbackPlacements: Record<Placement, Placement[]> = {
+  top: ['bottom', 'right', 'left'],
+  bottom: ['top', 'right', 'left'],
+  left: ['right', 'top', 'bottom'],
+  right: ['left', 'top', 'bottom'],
+  'top-start': ['bottom-start', 'top-end', 'bottom-end'],
+  'top-end': ['bottom-end', 'top-start', 'bottom-start'],
+  'bottom-start': ['top-start', 'bottom-end', 'top-end'],
+  'bottom-end': ['top-end', 'bottom-start', 'top-start'],
+  'left-start': ['right-start', 'left-end', 'right-end'],
+  'left-end': ['right-end', 'left-start', 'right-start'],
+  'right-start': ['left-start', 'right-end', 'left-end'],
+  'right-end': ['left-end', 'right-start', 'left-start'],
+};
+
+export const positionToPlacement = (position: FloatingPlacement): Placement => {
+  switch (position) {
+    case 'top-left':
+      return 'top-start';
+    case 'top-right':
+      return 'top-end';
+    case 'bottom-left':
+      return 'bottom-start';
+    case 'bottom-right':
+      return 'bottom-end';
+    case 'left-top':
+      return 'left-start';
+    case 'left-bottom':
+      return 'left-end';
+    case 'right-top':
+      return 'right-start';
+    case 'right-bottom':
+      return 'right-end';
+    default:
+      return position;
+  }
+};
+
+export const mirrorPositionForRtl = (position: FloatingPlacement): FloatingPlacement => {
+  switch (position) {
+    case 'left':
+      return 'right';
+    case 'right':
+      return 'left';
+    case 'left-top':
+      return 'right-top';
+    case 'left-bottom':
+      return 'right-bottom';
+    case 'right-top':
+      return 'left-top';
+    case 'right-bottom':
+      return 'left-bottom';
+    default:
+      // top-left/top-right/bottom-left/bottom-right map to start/end via
+      // positionToPlacement, and floating-ui already flips start/end in RTL.
+      return position;
+  }
+};

package/src/common/Panel/Panel.test.tsx

@@ -1,6 +1,7 @@
 import { createRef } from 'react';
 
 import { Position } from '..';
+import { DirectionProvider } from '../../Provider/Direction/DirectionProvider';
 import { render } from '../../test-utils';
 
 import Panel from './Panel';
@@ -93,4 +94,43 @@ describe('Panel', () => {
       expect(getPanel()).toHaveAttribute('data-popper-placement', expectedPlacement);
     });
   });
+
+  describe('RTL position mirroring', () => {
+    it.each<[PanelProps['position'], string]>([
+      [Position.LEFT, 'right'],
+      [Position.RIGHT, 'left'],
+      [Position.LEFT_TOP, 'right-start'],
+      [Position.LEFT_BOTTOM, 'right-end'],
+      [Position.RIGHT_TOP, 'left-start'],
+      [Position.RIGHT_BOTTOM, 'left-end'],
+    ])('mirrors %s in RTL to floating-ui placement %s', (position, expectedPlacement) => {
+      render(
+        <DirectionProvider direction="rtl">
+          <Panel {...props} position={position} />
+        </DirectionProvider>,
+      );
+
+      expect(getPanel()).toHaveAttribute('data-popper-placement', expectedPlacement);
+    });
+
+    it.each<[PanelProps['position'], string]>([
+      [Position.TOP, 'top'],
+      [Position.BOTTOM, 'bottom'],
+      [Position.TOP_LEFT, 'top-start'],
+      [Position.TOP_RIGHT, 'top-end'],
+      [Position.BOTTOM_LEFT, 'bottom-start'],
+      [Position.BOTTOM_RIGHT, 'bottom-end'],
+    ])(
+      'does not mirror %s in RTL (floating-ui handles start/end flip)',
+      (position, expectedPlacement) => {
+        render(
+          <DirectionProvider direction="rtl">
+            <Panel {...props} position={position} />
+          </DirectionProvider>,
+        );
+
+        expect(getPanel()).toHaveAttribute('data-popper-placement', expectedPlacement);
+      },
+    );
+  });
 });

package/src/common/Panel/Panel.tsx

@@ -3,7 +3,6 @@ import {
   autoUpdate,
   flip as flipMiddleware,
   offset,
-  type Placement,
   shift,
   size as sizeMiddleware,
   useFloating,
@@ -20,29 +19,17 @@ import {
   useRef,
 } from 'react';
 
-import { Position, type FloatingPlacement, positionToPlacement } from '..';
-import Dimmer from '../../Dimmer';
 import { OverlayIdContext } from '../../Provider/overlay/OverlayIdProvider';
-
-const POPOVER_OFFSET = 16;
-
-// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
-// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
-// This mapping forces popover to try the four available positions before going back to the initial chosen one.
-const fallbackPlacements: Record<Placement, Placement[]> = {
-  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],
-  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],
-  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],
-  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],
-  'top-start': ['bottom-start', 'top-end', 'bottom-end'],
-  'top-end': ['bottom-end', 'top-start', 'bottom-start'],
-  'bottom-start': ['top-start', 'bottom-end', 'top-end'],
-  'bottom-end': ['top-end', 'bottom-start', 'top-start'],
-  'left-start': ['right-start', 'left-end', 'right-end'],
-  'left-end': ['right-end', 'left-start', 'right-start'],
-  'right-start': ['left-start', 'right-end', 'left-end'],
-  'right-end': ['left-end', 'right-start', 'left-start'],
-};
+import Dimmer from '../../Dimmer';
+import useDirection from '../hooks/useDirection';
+import { Position } from '..';
+import {
+  type FloatingPlacement,
+  POPOVER_OFFSET,
+  fallbackPlacements,
+  mirrorPositionForRtl,
+  positionToPlacement,
+} from './Panel.positionUtils';
 
 export type PanelProps = PropsWithChildren<{
   arrow?: boolean;
@@ -74,7 +61,9 @@ const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
   reference,
 ) {
   const arrowRef = useRef<HTMLDivElement | null>(null);
-  const floatingPlacement = positionToPlacement(position);
+  const { isRTL } = useDirection();
+  const resolvedPosition = isRTL ? mirrorPositionForRtl(position) : position;
+  const floatingPlacement = positionToPlacement(resolvedPosition);
 
   const middleware = [];