@wise/dynamic-flow-client 4.2.3 → 4.3.0

package/build/main.css

@@ -152,47 +152,47 @@ button.df-back-btn {
     display: flex;
   }
 }
-.df-image {
+.df-legacy-image {
   display: flex;
   justify-content: center;
   align-items: center;
 }
-.df-image img {
+.df-legacy-image img {
   height: auto;
   width: 100%;
 }
 /* narrow screens */
-.df-image.xs img {
+.df-legacy-image.xs img {
   width: 50px;
 }
-.df-image.sm img {
+.df-legacy-image.sm img {
   width: 100px;
 }
-.df-image.md img {
+.df-legacy-image.md img {
   width: 200px;
 }
-.df-image.lg img {
+.df-legacy-image.lg img {
   width: 300px;
 }
 /* wide screens */
-@media (width >= 576px) {
-  .df-image.xs img {
+@media (width >=576px) {
+  .df-legacy-image.xs img {
     width: 100px;
   }
 
-  .df-image.sm img {
+  .df-legacy-image.sm img {
     width: 200px;
   }
 
-  .df-image.md img {
+  .df-legacy-image.md img {
     width: 300px;
   }
 
-  .df-image.lg img {
+  .df-legacy-image.lg img {
     width: 500px;
   }
 
-  .df-image.xl img {
+  .df-legacy-image.xl img {
     max-width: 600px;
   }
 }
@@ -268,6 +268,60 @@ button.df-back-btn {
 .df-image .df-illustration {
   padding: 0;
 }
+.df-image {
+  display: flex;
+}
+.df-image.start {
+  justify-content: start;
+  align-items: start;
+}
+.df-image.center {
+  justify-content: center;
+  align-items: center;
+}
+.df-image.end {
+  justify-content: end;
+  align-items: end;
+}
+.df-image img {
+  height: auto;
+  width: 100%;
+}
+/* narrow screens */
+.df-image.xs img {
+  width: 50px;
+}
+.df-image.sm img {
+  width: 100px;
+}
+.df-image.md img {
+  width: 200px;
+}
+.df-image.lg img {
+  width: 300px;
+}
+/* wide screens */
+@media (width >=576px) {
+  .df-image.xs img {
+    width: 100px;
+  }
+
+  .df-image.sm img {
+    width: 200px;
+  }
+
+  .df-image.md img {
+    width: 300px;
+  }
+
+  .df-image.lg img {
+    width: 500px;
+  }
+
+  .df-image.xl img {
+    max-width: 600px;
+  }
+}
 .df-back-btn .tw-avatar__content {
   cursor: pointer;
   background-color: var(--color-background-neutral);

package/build/main.js

@@ -143,10 +143,10 @@ var init_clsx = __esm({
   }
 });
 
-// ../../node_modules/.pnpm/@wise+art@2.20.0_@transferwise+neptune-css@14.22.0_@types+react@18.3.18_react-dom@18.3.1_reac_5ykmpxdtw4fzxswo7budy4j22i/node_modules/@wise/art/dist/index-ClPpN6dk.esm.js
+// ../../node_modules/.pnpm/@wise+art@2.20.0_@transferwise+neptune-css@14.23.0_@types+react@18.3.20_react-dom@18.3.1_reac_3u2gepknok7a4fhfc5ygus7hla/node_modules/@wise/art/dist/index-ClPpN6dk.esm.js
 var import_react14, import_jsx_runtime12, unknownFlagName, Flag, Sizes, ImageSizes, imageSizes, Assets, RenderMode;
 var init_index_ClPpN6dk_esm = __esm({
-  "../../node_modules/.pnpm/@wise+art@2.20.0_@transferwise+neptune-css@14.22.0_@types+react@18.3.18_react-dom@18.3.1_reac_5ykmpxdtw4fzxswo7budy4j22i/node_modules/@wise/art/dist/index-ClPpN6dk.esm.js"() {
+  "../../node_modules/.pnpm/@wise+art@2.20.0_@transferwise+neptune-css@14.23.0_@types+react@18.3.20_react-dom@18.3.1_reac_3u2gepknok7a4fhfc5ygus7hla/node_modules/@wise/art/dist/index-ClPpN6dk.esm.js"() {
     "use strict";
     init_clsx();
     import_react14 = require("react");
@@ -1777,7 +1777,7 @@ var hiddenComponentToProps = ({ uid }) => ({
 });
 
 // src/revamp/renderers/mappers/imageComponentToProps.ts
-var imageComponentToProps = (component, rendererMapperProps) => __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "type", "control", "margin", "size")), rendererMapperProps), {
+var imageComponentToProps = (component, rendererMapperProps) => __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "type", "align", "control", "margin", "size")), rendererMapperProps), {
   uri: component.content.uri,
   accessibilityDescription: component.content.accessibilityDescription
 });
@@ -10500,6 +10500,7 @@ var createImageComponent = (imageProps) => __spreadProps(__spreadValues({
 // src/revamp/domain/mappers/layout/imageLayoutToComponent.ts
 var imageLayoutToComponent = (uid, {
   accessibilityDescription,
+  align = "center",
   content,
   control,
   margin = "md",
@@ -10510,6 +10511,7 @@ var imageLayoutToComponent = (uid, {
   var _a, _b, _c;
   return createImageComponent({
     uid,
+    align: mapLegacyAlign(align),
     content: content ? {
       uri: (_b = (_a = content.uri) != null ? _a : content.url) != null ? _b : "",
       accessibilityDescription: (_c = content.accessibilityDescription) != null ? _c : content.text
@@ -13401,7 +13403,7 @@ var import_components3 = require("@transferwise/components");
 // src/legacy/layout/utils/getNavigationOptionMedia.tsx
 var import_components2 = require("@transferwise/components");
 
-// ../../node_modules/.pnpm/@wise+art@2.20.0_@transferwise+neptune-css@14.22.0_@types+react@18.3.18_react-dom@18.3.1_reac_5ykmpxdtw4fzxswo7budy4j22i/node_modules/@wise/art/dist/index.esm.js
+// ../../node_modules/.pnpm/@wise+art@2.20.0_@transferwise+neptune-css@14.23.0_@types+react@18.3.20_react-dom@18.3.1_reac_3u2gepknok7a4fhfc5ygus7hla/node_modules/@wise/art/dist/index.esm.js
 init_index_ClPpN6dk_esm();
 init_clsx();
 var import_react15 = require("react");
@@ -16595,7 +16597,7 @@ function DynamicImage({ component: image }) {
   if (!imageSource) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: `df-image ${size || "md"}`, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_components24.Image, __spreadValues({ className: `img-responsive ${getMargin(margin || "md")}` }, imageProps)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: `df-legacy-image ${size || "md"}`, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_components24.Image, __spreadValues({ className: `img-responsive ${getMargin(margin || "md")}` }, imageProps)) });
 }
 var readImageBlobAsDataURL = (imageBlob) => (
   // we can safely assume the type of reader.result is string

package/build/main.mjs

@@ -137,12 +137,12 @@ var init_clsx = __esm({
   }
 });
 
-// ../../node_modules/.pnpm/@wise+art@2.20.0_@transferwise+neptune-css@14.22.0_@types+react@18.3.18_react-dom@18.3.1_reac_5ykmpxdtw4fzxswo7budy4j22i/node_modules/@wise/art/dist/index-ClPpN6dk.esm.js
+// ../../node_modules/.pnpm/@wise+art@2.20.0_@transferwise+neptune-css@14.23.0_@types+react@18.3.20_react-dom@18.3.1_reac_3u2gepknok7a4fhfc5ygus7hla/node_modules/@wise/art/dist/index-ClPpN6dk.esm.js
 import { useState as useState4, useEffect as useEffect3, forwardRef as forwardRef2, Suspense, lazy } from "react";
 import { jsx as jsx12, jsxs as jsxs2, Fragment as Fragment4 } from "react/jsx-runtime";
 var unknownFlagName, Flag, Sizes, ImageSizes, imageSizes, Assets, RenderMode;
 var init_index_ClPpN6dk_esm = __esm({
-  "../../node_modules/.pnpm/@wise+art@2.20.0_@transferwise+neptune-css@14.22.0_@types+react@18.3.18_react-dom@18.3.1_reac_5ykmpxdtw4fzxswo7budy4j22i/node_modules/@wise/art/dist/index-ClPpN6dk.esm.js"() {
+  "../../node_modules/.pnpm/@wise+art@2.20.0_@transferwise+neptune-css@14.23.0_@types+react@18.3.20_react-dom@18.3.1_reac_3u2gepknok7a4fhfc5ygus7hla/node_modules/@wise/art/dist/index-ClPpN6dk.esm.js"() {
     "use strict";
     init_clsx();
     unknownFlagName = "wise";
@@ -1754,7 +1754,7 @@ var hiddenComponentToProps = ({ uid }) => ({
 });
 
 // src/revamp/renderers/mappers/imageComponentToProps.ts
-var imageComponentToProps = (component, rendererMapperProps) => __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "type", "control", "margin", "size")), rendererMapperProps), {
+var imageComponentToProps = (component, rendererMapperProps) => __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "type", "align", "control", "margin", "size")), rendererMapperProps), {
   uri: component.content.uri,
   accessibilityDescription: component.content.accessibilityDescription
 });
@@ -10477,6 +10477,7 @@ var createImageComponent = (imageProps) => __spreadProps(__spreadValues({
 // src/revamp/domain/mappers/layout/imageLayoutToComponent.ts
 var imageLayoutToComponent = (uid, {
   accessibilityDescription,
+  align = "center",
   content,
   control,
   margin = "md",
@@ -10487,6 +10488,7 @@ var imageLayoutToComponent = (uid, {
   var _a, _b, _c;
   return createImageComponent({
     uid,
+    align: mapLegacyAlign(align),
     content: content ? {
       uri: (_b = (_a = content.uri) != null ? _a : content.url) != null ? _b : "",
       accessibilityDescription: (_c = content.accessibilityDescription) != null ? _c : content.text
@@ -13378,7 +13380,7 @@ import { Alert as Alert2 } from "@transferwise/components";
 // src/legacy/layout/utils/getNavigationOptionMedia.tsx
 import { Avatar, AvatarType } from "@transferwise/components";
 
-// ../../node_modules/.pnpm/@wise+art@2.20.0_@transferwise+neptune-css@14.22.0_@types+react@18.3.18_react-dom@18.3.1_reac_5ykmpxdtw4fzxswo7budy4j22i/node_modules/@wise/art/dist/index.esm.js
+// ../../node_modules/.pnpm/@wise+art@2.20.0_@transferwise+neptune-css@14.23.0_@types+react@18.3.20_react-dom@18.3.1_reac_3u2gepknok7a4fhfc5ygus7hla/node_modules/@wise/art/dist/index.esm.js
 init_index_ClPpN6dk_esm();
 init_clsx();
 import "react";
@@ -16587,7 +16589,7 @@ function DynamicImage({ component: image }) {
   if (!imageSource) {
     return null;
   }
-  return /* @__PURE__ */ jsx52("div", { className: `df-image ${size || "md"}`, children: /* @__PURE__ */ jsx52(Image, __spreadValues({ className: `img-responsive ${getMargin(margin || "md")}` }, imageProps)) });
+  return /* @__PURE__ */ jsx52("div", { className: `df-legacy-image ${size || "md"}`, children: /* @__PURE__ */ jsx52(Image, __spreadValues({ className: `img-responsive ${getMargin(margin || "md")}` }, imageProps)) });
 }
 var readImageBlobAsDataURL = (imageBlob) => (
   // we can safely assume the type of reader.result is string

package/build/types/revamp/domain/components/ImageComponent.d.ts

@@ -1,7 +1,8 @@
 import type { Size } from '@wise/dynamic-flow-types/build/next';
-import type { LayoutComponent } from '../types';
+import type { Align, LayoutComponent } from '../types';
 export type ImageComponent = LayoutComponent & {
     type: 'image';
+    align: Align;
     content: ImageContent;
     size: Size;
 };
@@ -9,5 +10,5 @@ type ImageContent = {
     accessibilityDescription?: string;
     uri: string;
 };
-export declare const createImageComponent: (imageProps: Pick<ImageComponent, "uid" | "content" | "control" | "margin" | "size">) => ImageComponent;
+export declare const createImageComponent: (imageProps: Pick<ImageComponent, "uid" | "align" | "content" | "control" | "margin" | "size">) => ImageComponent;
 export {};

package/build/types/revamp/domain/mappers/layout/imageLayoutToComponent.d.ts

@@ -1,2 +1,2 @@
 import type { ImageLayout } from '@wise/dynamic-flow-types/build/next';
-export declare const imageLayoutToComponent: (uid: string, { accessibilityDescription, content, control, margin, size, text, url, }: ImageLayout) => import("../../components/ImageComponent").ImageComponent;
+export declare const imageLayoutToComponent: (uid: string, { accessibilityDescription, align, content, control, margin, size, text, url, }: ImageLayout) => import("../../components/ImageComponent").ImageComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "4.2.3",
+  "version": "4.3.0",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -37,29 +37,29 @@
     "@babel/preset-react": "7.26.3",
     "@babel/preset-typescript": "7.26.0",
     "@chromatic-com/storybook": "3.2.6",
-    "@formatjs/cli": "^6.6.1",
-    "@storybook/addon-a11y": "^8.6.7",
-    "@storybook/addon-actions": "^8.6.7",
-    "@storybook/addon-essentials": "^8.6.7",
-    "@storybook/addon-interactions": "^8.6.7",
-    "@storybook/addon-links": "^8.6.7",
+    "@formatjs/cli": "^6.6.2",
+    "@storybook/addon-a11y": "^8.6.8",
+    "@storybook/addon-actions": "^8.6.8",
+    "@storybook/addon-essentials": "^8.6.8",
+    "@storybook/addon-interactions": "^8.6.8",
+    "@storybook/addon-links": "^8.6.8",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
-    "@storybook/manager-api": "^8.6.7",
-    "@storybook/react": "^8.6.7",
-    "@storybook/react-webpack5": "^8.6.7",
-    "@storybook/test": "^8.6.7",
-    "@storybook/types": "^8.6.7",
+    "@storybook/manager-api": "^8.6.8",
+    "@storybook/react": "^8.6.8",
+    "@storybook/react-webpack5": "^8.6.8",
+    "@storybook/test": "^8.6.8",
+    "@storybook/types": "^8.6.8",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",
     "@testing-library/user-event": "14.6.1",
-    "@transferwise/components": "46.94.1",
+    "@transferwise/components": "46.94.2",
     "@transferwise/formatting": "^2.13.1",
     "@transferwise/icons": "3.19.1",
-    "@transferwise/neptune-css": "14.22.0",
-    "@types/node": "22.13.10",
+    "@transferwise/neptune-css": "14.23.0",
+    "@types/node": "22.13.12",
     "@types/jest": "29.5.14",
-    "@types/react": "18.3.18",
+    "@types/react": "18.3.20",
     "@types/react-dom": "18.3.5",
     "@types/react-intl": "3.0.0",
     "@wise/art": "2.20.0",
@@ -77,7 +77,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-intl": "6.8.9",
-    "storybook": "^8.6.7",
+    "storybook": "^8.6.8",
     "stylelint": "16.16.0",
     "stylelint-config-standard": "36.0.1",
     "stylelint-no-unsupported-browser-features": "8.0.4",
@@ -85,8 +85,8 @@
     "tsx": "4.19.3",
     "typescript": "5.8.2",
     "webpack": "5.98.0",
-    "@wise/dynamic-flow-renderers": "0.0.0",
-    "@wise/dynamic-flow-fixtures": "0.0.1"
+    "@wise/dynamic-flow-fixtures": "0.0.1",
+    "@wise/dynamic-flow-renderers": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.92.0",