@wise/dynamic-flow-client 4.20.0 → 4.20.2

package/build/main.css

@@ -248,7 +248,7 @@ button.df-back-btn {
 }
 .df-columns-renderer-container {
   display: flex;
-  gap: var(--size-16);
+  gap: var(--size-4);
   flex-direction: column;
 }
 .df-columns-renderer-column,
@@ -260,9 +260,10 @@ button.df-back-btn {
 .df-columns-renderer-bias-end .df-columns-renderer-column:nth-child(2) {
   flex: 2;
 }
-@media (width >= 768px) {
+@media (width >=768px) {
   .df-columns-renderer-container {
     flex-direction: row;
+    gap: var(--size-16);
   }
 }
 .df-image .df-illustration {

package/build/main.js

@@ -7508,10 +7508,6 @@ function useDynamicFlowCore(props) {
       rootComponentRef.current.setLoadingState("submitting");
       void onAction(__spreadValues({ method: "GET" }, initialAction), null);
     }
-    if (initialStep && !initialAction) {
-      createStep(initialStep, null);
-      trackCoreEvent("Step Shown", { isFirstStep: true });
-    }
     return () => {
       rootComponentRef.current.stop();
     };
@@ -7815,6 +7811,10 @@ function useDynamicFlowCore(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
+  if (!rootComponentRef.current.hasStep() && initialStep && !initialAction) {
+    createStep(initialStep, null);
+    trackCoreEvent("Step Shown", { isFirstStep: true });
+  }
   return { rootComponent: rootComponentRef.current };
 }
 var useRerender = () => {

package/build/main.mjs

@@ -7465,10 +7465,6 @@ function useDynamicFlowCore(props) {
       rootComponentRef.current.setLoadingState("submitting");
       void onAction(__spreadValues({ method: "GET" }, initialAction), null);
     }
-    if (initialStep && !initialAction) {
-      createStep(initialStep, null);
-      trackCoreEvent("Step Shown", { isFirstStep: true });
-    }
     return () => {
       rootComponentRef.current.stop();
     };
@@ -7772,6 +7768,10 @@ function useDynamicFlowCore(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
+  if (!rootComponentRef.current.hasStep() && initialStep && !initialAction) {
+    createStep(initialStep, null);
+    trackCoreEvent("Step Shown", { isFirstStep: true });
+  }
   return { rootComponent: rootComponentRef.current };
 }
 var useRerender = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "4.20.0",
+  "version": "4.20.2",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -46,9 +46,9 @@
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
-    "@transferwise/components": "46.112.1",
+    "@transferwise/components": "46.113.1",
     "@transferwise/formatting": "^2.13.4",
-    "@transferwise/icons": "3.22.4",
+    "@transferwise/icons": "4.0.0",
     "@transferwise/navigation-ui": "4.40.0",
     "@transferwise/neptune-css": "14.25.1",
     "@types/jest": "30.0.0",
@@ -61,6 +61,7 @@
     "babel-jest": "30.2.0",
     "esbuild": "0.25.9",
     "eslint-plugin-storybook": "9.1.15",
+    "framer-motion": "^12.23.22",
     "jest": "30.2.0",
     "jest-environment-jsdom": "30.2.0",
     "jest-fetch-mock": "^3.0.3",
@@ -85,7 +86,7 @@
   "peerDependencies": {
     "@transferwise/components": "^46.104.0",
     "@transferwise/formatting": "^2",
-    "@transferwise/icons": "^3.18.0",
+    "@transferwise/icons": "^3 || ^4",
     "@transferwise/neptune-css": "^14.22.0",
     "@wise/art": "^2.19.0",
     "react": "^18",