@wise/dynamic-flow-client-internal 5.22.1 → 5.23.0

package/build/main.mjs

@@ -127,7 +127,7 @@ import { useDynamicFlow } from "@wise/dynamic-flow-client";
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "5.22.1" : "0.0.0"
+  typeof process !== "undefined" ? "5.23.0" : "0.0.0"
 );
 
 // src/dynamicFlow/context-menu/useContextMenu.tsx
@@ -1103,10 +1103,47 @@ var CheckboxInputRenderer_default = CheckboxInputRenderer;
 
 // ../renderers/src/ColumnsRenderer.tsx
 var import_classnames3 = __toESM(require_classnames());
+
+// ../renderers/src/utils/useIsCollapsed.ts
+import { useEffect as useEffect5, useState as useState4 } from "react";
+var COLLAPSE_QUERY = "(max-width: 767.98px)";
+var supportsMatchMedia = () => typeof window !== "undefined" && !!window.matchMedia;
+var useIsCollapsed = () => {
+  const [collapsed, setCollapsed] = useState4(
+    () => supportsMatchMedia() && window.matchMedia(COLLAPSE_QUERY).matches
+  );
+  useEffect5(() => {
+    if (supportsMatchMedia()) {
+      const mql = window.matchMedia(COLLAPSE_QUERY);
+      const update = () => setCollapsed(mql.matches);
+      mql.addEventListener("change", update);
+      return () => mql.removeEventListener("change", update);
+    }
+    return void 0;
+  }, []);
+  return collapsed;
+};
+
+// ../renderers/src/ColumnsRenderer.tsx
 import { jsx as jsx24, jsxs as jsxs4 } from "react/jsx-runtime";
+var RIGHT_FIRST_STACKING = "right-first-stacking";
 var ColumnsRenderer = {
   canRenderType: "columns",
-  render: ({ bias, margin, startChildren, endChildren }) => /* @__PURE__ */ jsxs4(
+  render: ColumnsRendererComponent
+};
+function ColumnsRendererComponent({
+  bias,
+  margin,
+  startChildren,
+  endChildren,
+  tags
+}) {
+  var _a;
+  const isCollapsed = useIsCollapsed();
+  const reverse = isCollapsed && ((_a = tags == null ? void 0 : tags.includes(RIGHT_FIRST_STACKING)) != null ? _a : false);
+  const startColumn = /* @__PURE__ */ jsx24("div", { className: "df-columns-renderer-column", children: startChildren });
+  const endColumn = /* @__PURE__ */ jsx24("div", { className: "df-columns-renderer-column", children: endChildren });
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: (0, import_classnames3.default)("df-columns-renderer-container", getMargin(margin), {
@@ -1114,12 +1151,12 @@ var ColumnsRenderer = {
         "df-columns-renderer-bias-end": bias === "end"
       }),
       children: [
-        /* @__PURE__ */ jsx24("div", { className: "df-columns-renderer-column", children: startChildren }),
-        /* @__PURE__ */ jsx24("div", { className: "df-columns-renderer-column", children: endChildren })
+        reverse ? endColumn : startColumn,
+        reverse ? startColumn : endColumn
       ]
     }
-  )
-};
+  );
+}
 var ColumnsRenderer_default = ColumnsRenderer;
 
 // ../renderers/src/components/VariableDateInput.tsx
@@ -1275,7 +1312,7 @@ var shouldUseAvatar = (control, tags) => {
 
 // ../renderers/src/DecisionRenderer/DecisionWrapper.tsx
 import { Header as Header2, SearchInput } from "@transferwise/components";
-import { useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 import { useIntl as useIntl4 } from "react-intl";
 
 // ../renderers/src/messages/filter.messages.ts
@@ -1421,7 +1458,7 @@ var UnfilteredDecisionList = (_a) => {
 };
 var FilteredDecisionList = (props) => {
   const { formatMessage } = useIntl4();
-  const [query, setQuery] = useState4("");
+  const [query, setQuery] = useState5("");
   const { control, options, renderDecisionList: renderDecisionList2 } = props;
   const filteredOptions = (query == null ? void 0 : query.length) > 0 ? filterAndSortDecisionOptions(options, query) : options;
   const isGrouped = isGroupedDecision(options);
@@ -1538,7 +1575,7 @@ var external_confirmation_messages_default = defineMessages5({
 
 // ../renderers/src/ExternalConfirmationRenderer.tsx
 import { useIntl as useIntl5 } from "react-intl";
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 import { Fragment as Fragment4, jsx as jsx32, jsxs as jsxs7 } from "react/jsx-runtime";
 var ExternalConfirmationRenderer = {
   canRenderType: "external-confirmation",
@@ -1551,7 +1588,7 @@ function ExternalConfirmationRendererComponent({
   onCancel
 }) {
   const { formatMessage } = useIntl5();
-  useEffect5(() => {
+  useEffect6(() => {
     open();
   }, []);
   return /* @__PURE__ */ jsx32(
@@ -1665,7 +1702,7 @@ var HeadingRenderer_default = HeadingRenderer;
 
 // ../renderers/src/ImageRenderer/UrlImage.tsx
 import { Image } from "@transferwise/components";
-import { useEffect as useEffect6, useState as useState5 } from "react";
+import { useEffect as useEffect7, useState as useState6 } from "react";
 
 // ../renderers/src/utils/api-utils.ts
 function isRelativePath(url = "") {
@@ -1684,8 +1721,8 @@ function UrlImage({
   uri,
   httpClient
 }) {
-  const [imageSource, setImageSource] = useState5("");
-  useEffect6(() => {
+  const [imageSource, setImageSource] = useState6("");
+  useEffect7(() => {
     if (!uri.startsWith("urn:")) {
       void getImageSource(httpClient, uri).then(setImageSource);
     }
@@ -1751,7 +1788,7 @@ import {
   Illustration,
   isIllustrationSupport3D
 } from "@wise/art";
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 
 // ../renderers/src/ImageRenderer/isAnimated.ts
 var isAnimated = (uri) => {
@@ -1801,7 +1838,7 @@ function UrnIllustration({
   size,
   uri
 }) {
-  const [has3DFailed, setHas3DFailed] = useState6(false);
+  const [has3DFailed, setHas3DFailed] = useState7(false);
   const illustrationSize = getIllustrationSize(size);
   const illustrationName = getIllustrationName(uri);
   const illustration3DName = getIllustration3DName(uri);
@@ -2120,7 +2157,7 @@ var mapAvatarMediaSize = (size) => {
 
 // ../renderers/src/ModalLayoutRenderer.tsx
 import { Button as Button4, Modal as Modal2 } from "@transferwise/components";
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 import { jsx as jsx50, jsxs as jsxs11 } from "react/jsx-runtime";
 var ModalLayoutRenderer = {
   canRenderType: "modal-layout",
@@ -2128,7 +2165,7 @@ var ModalLayoutRenderer = {
 };
 var ModalLayoutRenderer_default = ModalLayoutRenderer;
 function DFModal({ content, margin, trigger }) {
-  const [visible, setVisible] = useState7(false);
+  const [visible, setVisible] = useState8(false);
   const { children, title } = content;
   return /* @__PURE__ */ jsxs11("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx50(Button4, { v2: true, priority: "tertiary", block: true, onClick: () => setVisible(true), children: trigger.title }),
@@ -2158,7 +2195,7 @@ var ModalRenderer = {
 
 // ../renderers/src/MoneyInputRenderer.tsx
 import { MoneyInput } from "@transferwise/components";
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect8 } from "react";
 import { useIntl as useIntl6 } from "react-intl";
 import { jsx as jsx52 } from "react/jsx-runtime";
 var groupingTags2 = Object.keys(group_messages_default).filter((key) => key !== "all");
@@ -2181,7 +2218,7 @@ function MoneyInputRendererComponent(props) {
     onAmountChange,
     onCurrencyChange
   } = props;
-  useEffect7(() => {
+  useEffect8(() => {
     if (!isValidIndex(selectedCurrencyIndex, currencies.length)) {
       onCurrencyChange(0);
     }
@@ -2326,7 +2363,7 @@ function InlineComponent(props) {
 
 // ../renderers/src/MultiSelectInputRenderer/DefaultComponent.tsx
 import { SelectInput, SelectInputOptionContent } from "@transferwise/components";
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import { useIntl as useIntl7 } from "react-intl";
 
 // ../renderers/src/messages/multi-select.messages.ts
@@ -2343,7 +2380,7 @@ var multi_select_messages_default = defineMessages6({
 import { jsx as jsx54 } from "react/jsx-runtime";
 function DefaultComponent(props) {
   const { formatMessage } = useIntl7();
-  const [stagedIndices, setStagedIndices] = useState8();
+  const [stagedIndices, setStagedIndices] = useState9();
   const {
     id,
     autoComplete,
@@ -2775,7 +2812,7 @@ var ProgressRenderer = {
 var import_classnames7 = __toESM(require_classnames());
 import { Button as Button6, Header as Header6, InlineAlert as InlineAlert3, Modal as Modal4, NavigationOption } from "@transferwise/components";
 import { Plus } from "@transferwise/icons";
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 import { useIntl as useIntl9 } from "react-intl";
 
 // ../renderers/src/messages/repeatable.messages.ts
@@ -2825,7 +2862,7 @@ function Repeatable(props) {
     onRemove
   } = props;
   const { formatMessage } = useIntl9();
-  const [openModalType, setOpenModalType] = useState9(null);
+  const [openModalType, setOpenModalType] = useState10(null);
   const { ref } = useScrollToError(validationState, features);
   const onAddItem = () => {
     onAdd();
@@ -3047,7 +3084,7 @@ var ReviewRenderer_default = ReviewRenderer2;
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
 import { Input as Input4, InputGroup as InputGroup3, List, ListItem as ListItem10, Markdown as Markdown5 } from "@transferwise/components";
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 import { useIntl as useIntl12 } from "react-intl";
 
 // ../renderers/src/messages/search.messages.ts
@@ -3110,7 +3147,7 @@ function BlockSearchRendererComponent({
   trackEvent,
   onChange
 }) {
-  const [hasSearched, setHasSearched] = useState10(false);
+  const [hasSearched, setHasSearched] = useState11(false);
   const { formatMessage } = useIntl12();
   return /* @__PURE__ */ jsxs18("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx66(
@@ -3202,7 +3239,7 @@ var BlockSearchRendererComponent_default = BlockSearchRendererComponent;
 // ../renderers/src/SearchRenderer/InlineSearchRendererComponent.tsx
 import { Markdown as Markdown6, Typeahead } from "@transferwise/components";
 import { Search as Search2 } from "@transferwise/icons";
-import { useState as useState11 } from "react";
+import { useState as useState12 } from "react";
 import { useIntl as useIntl13 } from "react-intl";
 import { jsx as jsx67 } from "react/jsx-runtime";
 function InlineSearchRenderer({
@@ -3216,7 +3253,7 @@ function InlineSearchRenderer({
   onChange,
   trackEvent
 }) {
-  const [hasSearched, setHasSearched] = useState11(false);
+  const [hasSearched, setHasSearched] = useState12(false);
   const intl = useIntl13();
   return /* @__PURE__ */ jsx67("div", { className: getMargin(margin), children: /* @__PURE__ */ jsx67(
     FieldInput_default,
@@ -3389,7 +3426,7 @@ function RadioInputRendererComponent(props) {
 
 // ../renderers/src/SelectInputRenderer/TabInputRendererComponent.tsx
 import { Tabs } from "@transferwise/components";
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect9 } from "react";
 import { Fragment as Fragment9, jsx as jsx71, jsxs as jsxs21 } from "react/jsx-runtime";
 function TabInputRendererComponent(props) {
   const {
@@ -3405,7 +3442,7 @@ function TabInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  useEffect8(() => {
+  useEffect9(() => {
     if (!isValidIndex2(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -3521,7 +3558,7 @@ function SelectInputRendererComponent(props) {
 }
 
 // ../renderers/src/SelectInputRenderer/SegmentedInputRendererComponent.tsx
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect10 } from "react";
 import { SegmentedControl } from "@transferwise/components";
 import { Fragment as Fragment11, jsx as jsx73, jsxs as jsxs23 } from "react/jsx-runtime";
 function SegmentedInputRendererComponent(props) {
@@ -3537,7 +3574,7 @@ function SegmentedInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  useEffect9(() => {
+  useEffect10(() => {
     if (!isValidIndex3(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -3705,12 +3742,12 @@ var StatusListRenderer_default = StatusListRenderer;
 
 // ../renderers/src/utils/useCustomTheme.ts
 import { useTheme } from "@wise/components-theming";
-import { useEffect as useEffect10, useMemo } from "react";
+import { useEffect as useEffect11, useMemo } from "react";
 var ThemeRequiredEventName = "Theme Required";
 var useCustomTheme = (theme, trackEvent) => {
   const theming = useTheme();
   const previousTheme = useMemo(() => theming.theme, []);
-  useEffect10(() => {
+  useEffect11(() => {
     theming.setTheme(theme);
     trackEvent(ThemeRequiredEventName, { theme });
     return theme !== previousTheme ? () => {
@@ -3723,7 +3760,7 @@ var useCustomTheme = (theme, trackEvent) => {
 
 // ../renderers/src/step/StepFooter.tsx
 import { Button as Button7 } from "@transferwise/components";
-import { useEffect as useEffect11, useRef as useRef2, useState as useState12 } from "react";
+import { useEffect as useEffect12, useRef as useRef2, useState as useState13 } from "react";
 import { useIntl as useIntl14 } from "react-intl";
 
 // ../renderers/src/messages/step.messages.ts
@@ -3780,8 +3817,8 @@ var FooterWithScrollButton = ({ footer }) => {
   ] });
 };
 var useIsElementVisible = (elementRef) => {
-  const [isVisible, setIsVisible] = useState12(false);
-  useEffect11(() => {
+  const [isVisible, setIsVisible] = useState13(false);
+  useEffect12(() => {
     const element = elementRef.current;
     if (!element) return;
     const observer = new IntersectionObserver(([entry]) => {
@@ -3965,7 +4002,7 @@ function StepRendererComponent(props) {
 
 // ../renderers/src/TabsRenderer.tsx
 import { Chips, SegmentedControl as SegmentedControl2, Tabs as Tabs2 } from "@transferwise/components";
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 import { jsx as jsx85, jsxs as jsxs34 } from "react/jsx-runtime";
 var TabsRenderer = {
   canRenderType: "tabs",
@@ -3984,7 +4021,7 @@ var TabsRenderer = {
   }
 };
 function TabsRendererComponent({ uid, margin, tabs }) {
-  const [selectedIndex, setSelectedIndex] = useState13(0);
+  const [selectedIndex, setSelectedIndex] = useState14(0);
   return /* @__PURE__ */ jsx85("div", { className: getMargin(margin), children: /* @__PURE__ */ jsx85(
     Tabs2,
     {
@@ -4005,7 +4042,7 @@ function TabsRendererComponent({ uid, margin, tabs }) {
 }
 function SegmentedTabsRendererComponent({ uid, margin, tabs }) {
   var _a;
-  const [selectedIndex, setSelectedIndex] = useState13(0);
+  const [selectedIndex, setSelectedIndex] = useState14(0);
   return /* @__PURE__ */ jsxs34("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx85(
       SegmentedControl2,
@@ -4027,7 +4064,7 @@ function SegmentedTabsRendererComponent({ uid, margin, tabs }) {
 }
 function ChipsTabsRendererComponent({ margin, tabs }) {
   var _a;
-  const [selectedIndex, setSelectedIndex] = useState13(0);
+  const [selectedIndex, setSelectedIndex] = useState14(0);
   return /* @__PURE__ */ jsxs34("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx85("div", { className: "chips-container", children: /* @__PURE__ */ jsx85(
       Chips,
@@ -4288,7 +4325,7 @@ var LargeUploadRenderer = {
 
 // ../renderers/src/UpsellRenderer.tsx
 import { Nudge } from "@transferwise/components";
-import { useState as useState14 } from "react";
+import { useState as useState15 } from "react";
 import { jsx as jsx89 } from "react/jsx-runtime";
 var UpsellRenderer = {
   canRenderType: "upsell",
@@ -4296,7 +4333,7 @@ var UpsellRenderer = {
 };
 function UpsellRendererComponent(props) {
   const { text, callToAction, media, margin, onDismiss } = props;
-  const [isVisible, setIsVisible] = useState14(true);
+  const [isVisible, setIsVisible] = useState15(true);
   return isVisible ? /* @__PURE__ */ jsx89(
     Nudge,
     {