@wise/dynamic-flow-client-internal 5.13.2 → 5.13.3

package/build/main.css

@@ -90,41 +90,50 @@
   justify-content: end;
   align-items: end;
 }
-.df-image img {
-  height: auto;
+.df-image img.df-reserve-space {
   width: 100%;
+  /*
+  The auto keyword in aspect-ratio: auto 1 / 1 tells the browser to prefer the element's intrinsic aspect ratio (once the image is loaded) over the specified 1/1 fallback. So:
+  Loading: no intrinsic ratio yet → uses 1/1 → square placeholder reserved
+  Loaded: intrinsic ratio available → auto wins → image renders at its natural shape
+  */
+  aspect-ratio: auto 1 / 1;
+  height: auto;
+}
+.df-image img:not([src]) {
+  visibility: hidden;
 }
 /* wide screens (or default) */
-.df-image.xs img {
+.df-image.xs img.df-reserve-space {
   width: 100px;
 }
-.df-image.sm img {
+.df-image.sm img.df-reserve-space {
   width: 200px;
 }
-.df-image.md img {
+.df-image.md img.df-reserve-space {
   width: 300px;
 }
-.df-image.lg img {
+.df-image.lg img.df-reserve-space {
   width: 500px;
 }
-.df-image.xl img {
+.df-image.xl img.df-reserve-space {
   max-width: 600px;
 }
 /* narrow screens */
 @media (width <576px) {
-  .df-image.xs img {
+  .df-image.xs img.df-reserve-space {
     width: 50px;
   }
 
-  .df-image.sm img {
+  .df-image.sm img.df-reserve-space {
     width: 100px;
   }
 
-  .df-image.md img {
+  .df-image.md img.df-reserve-space {
     width: 200px;
   }
 
-  .df-image.lg img {
+  .df-image.lg img.df-reserve-space {
     width: 300px;
   }
 }
@@ -137,19 +146,19 @@
 }
 /* narrow container */
 @container (max-width: 576px) {
-  .df-image.xs img {
+  .df-image.xs img.df-reserve-space {
     width: 50px;
   }
 
-  .df-image.sm img {
+  .df-image.sm img.df-reserve-space {
     width: 100px;
   }
 
-  .df-image.md img {
+  .df-image.md img.df-reserve-space {
     width: 200px;
   }
 
-  .df-image.lg img {
+  .df-image.lg img.df-reserve-space {
     width: 300px;
   }
 }
@@ -235,6 +244,7 @@
     border-bottom: 1px solid #ddd;
     margin: 4px;
     margin-bottom: 8px;
+    color: #333;
   }
 
   .menu-button {
@@ -246,6 +256,7 @@
     cursor: pointer;
     font-size: 14px;
     padding: 6px 8px;
+    color: #333;
   }
 
   .menu-button:last-child {

package/build/main.js

@@ -207,7 +207,7 @@ var useDFContextMenu = (controller) => {
     return step ? toBase64(JSON.stringify(step, null, 2)) : null;
   };
   return useContextMenu({
-    title: "DynamicFlow Menu",
+    title: "DynamicFlow Menu (Dev/Staging only)",
     items: isDevOrStaging() ? [
       {
         label: "Open in Sandbox",
@@ -275,7 +275,7 @@ var import_react24 = require("react");
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "5.13.2" : "0.0.0"
+  typeof process !== "undefined" ? "5.13.3" : "0.0.0"
 );
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
@@ -503,7 +503,7 @@ var countryUrnPrefix = "urn:wise:countries:";
 var currencyUrnPrefix = "urn:wise:currencies:";
 var isUrnFlag = (uri) => (uri.startsWith(countryUrnPrefix) || uri.startsWith(currencyUrnPrefix)) && uri.endsWith(":image");
 function UrnFlag({ size, urn }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_art.Flag, { code: getCode(urn), intrinsicSize: size });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_art.Flag, { code: getCode(urn), intrinsicSize: size, className: "df-reserve-space" });
 }
 var getCode = (urn) => {
   return urn.replace(countryUrnPrefix, "").replace(currencyUrnPrefix, "").replace(":image", "").split("?")[0];
@@ -1646,10 +1646,10 @@ function UrlImage({
       void getImageSource(httpClient, uri).then(setImageSource);
     }
   }, [uri, httpClient]);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `df-image ${align} ${size || "md"}`, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `df-image ${align} ${size || "md"} ${getMargin(margin)}`, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     import_components21.Image,
     {
-      className: `img-responsive ${getMargin(margin)}`,
+      className: "df-reserve-space",
       alt: accessibilityDescription != null ? accessibilityDescription : "",
       src: imageSource,
       stretch: true,

package/build/main.mjs

@@ -189,7 +189,7 @@ var useDFContextMenu = (controller) => {
     return step ? toBase64(JSON.stringify(step, null, 2)) : null;
   };
   return useContextMenu({
-    title: "DynamicFlow Menu",
+    title: "DynamicFlow Menu (Dev/Staging only)",
     items: isDevOrStaging() ? [
       {
         label: "Open in Sandbox",
@@ -257,7 +257,7 @@ import { useMemo as useMemo2 } from "react";
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "5.13.2" : "0.0.0"
+  typeof process !== "undefined" ? "5.13.3" : "0.0.0"
 );
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
@@ -485,7 +485,7 @@ var countryUrnPrefix = "urn:wise:countries:";
 var currencyUrnPrefix = "urn:wise:currencies:";
 var isUrnFlag = (uri) => (uri.startsWith(countryUrnPrefix) || uri.startsWith(currencyUrnPrefix)) && uri.endsWith(":image");
 function UrnFlag({ size, urn }) {
-  return /* @__PURE__ */ jsx5(Flag, { code: getCode(urn), intrinsicSize: size });
+  return /* @__PURE__ */ jsx5(Flag, { code: getCode(urn), intrinsicSize: size, className: "df-reserve-space" });
 }
 var getCode = (urn) => {
   return urn.replace(countryUrnPrefix, "").replace(currencyUrnPrefix, "").replace(":image", "").split("?")[0];
@@ -1628,10 +1628,10 @@ function UrlImage({
       void getImageSource(httpClient, uri).then(setImageSource);
     }
   }, [uri, httpClient]);
-  return /* @__PURE__ */ jsx36("div", { className: `df-image ${align} ${size || "md"}`, children: /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx36("div", { className: `df-image ${align} ${size || "md"} ${getMargin(margin)}`, children: /* @__PURE__ */ jsx36(
     Image,
     {
-      className: `img-responsive ${getMargin(margin)}`,
+      className: "df-reserve-space",
       alt: accessibilityDescription != null ? accessibilityDescription : "",
       src: imageSource,
       stretch: true,