@wise/dynamic-flow-client-internal 4.6.0-experimental-4973e0d → 4.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/build/main.css +66 -12
  2. package/build/main.js +5 -3
  3. package/build/main.mjs +5 -3
  4. package/package.json +18 -18
package/build/main.css CHANGED
@@ -152,47 +152,47 @@ button.df-back-btn {
152
152
  display: flex;
153
153
  }
154
154
  }
155
- .df-image {
155
+ .df-legacy-image {
156
156
  display: flex;
157
157
  justify-content: center;
158
158
  align-items: center;
159
159
  }
160
- .df-image img {
160
+ .df-legacy-image img {
161
161
  height: auto;
162
162
  width: 100%;
163
163
  }
164
164
  /* narrow screens */
165
- .df-image.xs img {
165
+ .df-legacy-image.xs img {
166
166
  width: 50px;
167
167
  }
168
- .df-image.sm img {
168
+ .df-legacy-image.sm img {
169
169
  width: 100px;
170
170
  }
171
- .df-image.md img {
171
+ .df-legacy-image.md img {
172
172
  width: 200px;
173
173
  }
174
- .df-image.lg img {
174
+ .df-legacy-image.lg img {
175
175
  width: 300px;
176
176
  }
177
177
  /* wide screens */
178
- @media (width >= 576px) {
179
- .df-image.xs img {
178
+ @media (width >=576px) {
179
+ .df-legacy-image.xs img {
180
180
  width: 100px;
181
181
  }
182
182
 
183
- .df-image.sm img {
183
+ .df-legacy-image.sm img {
184
184
  width: 200px;
185
185
  }
186
186
 
187
- .df-image.md img {
187
+ .df-legacy-image.md img {
188
188
  width: 300px;
189
189
  }
190
190
 
191
- .df-image.lg img {
191
+ .df-legacy-image.lg img {
192
192
  width: 500px;
193
193
  }
194
194
 
195
- .df-image.xl img {
195
+ .df-legacy-image.xl img {
196
196
  max-width: 600px;
197
197
  }
198
198
  }
@@ -268,6 +268,60 @@ button.df-back-btn {
268
268
  .df-image .df-illustration {
269
269
  padding: 0;
270
270
  }
271
+ .df-image {
272
+ display: flex;
273
+ }
274
+ .df-image.start {
275
+ justify-content: start;
276
+ align-items: start;
277
+ }
278
+ .df-image.center {
279
+ justify-content: center;
280
+ align-items: center;
281
+ }
282
+ .df-image.end {
283
+ justify-content: end;
284
+ align-items: end;
285
+ }
286
+ .df-image img {
287
+ height: auto;
288
+ width: 100%;
289
+ }
290
+ /* narrow screens */
291
+ .df-image.xs img {
292
+ width: 50px;
293
+ }
294
+ .df-image.sm img {
295
+ width: 100px;
296
+ }
297
+ .df-image.md img {
298
+ width: 200px;
299
+ }
300
+ .df-image.lg img {
301
+ width: 300px;
302
+ }
303
+ /* wide screens */
304
+ @media (width >=576px) {
305
+ .df-image.xs img {
306
+ width: 100px;
307
+ }
308
+
309
+ .df-image.sm img {
310
+ width: 200px;
311
+ }
312
+
313
+ .df-image.md img {
314
+ width: 300px;
315
+ }
316
+
317
+ .df-image.lg img {
318
+ width: 500px;
319
+ }
320
+
321
+ .df-image.xl img {
322
+ max-width: 600px;
323
+ }
324
+ }
271
325
  .df-back-btn .tw-avatar__content {
272
326
  cursor: pointer;
273
327
  background-color: var(--color-background-neutral);
package/build/main.js CHANGED
@@ -1273,6 +1273,7 @@ function isRelativePath(url = "") {
1273
1273
  var import_jsx_runtime20 = require("react/jsx-runtime");
1274
1274
  function UrlImage({
1275
1275
  accessibilityDescription,
1276
+ align,
1276
1277
  margin,
1277
1278
  size: size2,
1278
1279
  uri,
@@ -1284,7 +1285,7 @@ function UrlImage({
1284
1285
  void getImageSource(httpClient, uri).then(setImageSource);
1285
1286
  }
1286
1287
  }, [uri, httpClient]);
1287
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: `df-image ${size2 || "md"}`, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
1288
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: `df-image ${align} ${size2 || "md"}`, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
1288
1289
  import_components11.Image,
1289
1290
  {
1290
1291
  className: `img-responsive ${getMargin(margin)}`,
@@ -1349,6 +1350,7 @@ var urnPrefix = "urn:wise:illustrations:";
1349
1350
  var isUrnIllustration = (uri) => uri.startsWith(urnPrefix);
1350
1351
  function UrnIllustration({
1351
1352
  accessibilityDescription,
1353
+ align,
1352
1354
  margin,
1353
1355
  size: size2,
1354
1356
  uri
@@ -1357,9 +1359,9 @@ function UrnIllustration({
1357
1359
  const illustrationName = getIllustrationName(uri);
1358
1360
  const illustration3DName = getIllustration3DName(uri);
1359
1361
  if (illustration3DName && isAnimated(uri)) {
1360
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `df-image ${getMargin(margin)}`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_art2.Illustration3D, { name: illustration3DName, size: illustrationSize }) });
1362
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `df-image ${align} ${getMargin(margin)}`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_art2.Illustration3D, { name: illustration3DName, size: illustrationSize }) });
1361
1363
  }
1362
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `df-image ${getMargin(margin)}`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1364
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `df-image ${align} ${getMargin(margin)}`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1363
1365
  import_art2.Illustration,
1364
1366
  {
1365
1367
  className: "df-illustration",
package/build/main.mjs CHANGED
@@ -1239,6 +1239,7 @@ function isRelativePath(url = "") {
1239
1239
  import { jsx as jsx20 } from "react/jsx-runtime";
1240
1240
  function UrlImage({
1241
1241
  accessibilityDescription,
1242
+ align,
1242
1243
  margin,
1243
1244
  size: size2,
1244
1245
  uri,
@@ -1250,7 +1251,7 @@ function UrlImage({
1250
1251
  void getImageSource(httpClient, uri).then(setImageSource);
1251
1252
  }
1252
1253
  }, [uri, httpClient]);
1253
- return /* @__PURE__ */ jsx20("div", { className: `df-image ${size2 || "md"}`, children: /* @__PURE__ */ jsx20(
1254
+ return /* @__PURE__ */ jsx20("div", { className: `df-image ${align} ${size2 || "md"}`, children: /* @__PURE__ */ jsx20(
1254
1255
  Image,
1255
1256
  {
1256
1257
  className: `img-responsive ${getMargin(margin)}`,
@@ -1319,6 +1320,7 @@ var urnPrefix = "urn:wise:illustrations:";
1319
1320
  var isUrnIllustration = (uri) => uri.startsWith(urnPrefix);
1320
1321
  function UrnIllustration({
1321
1322
  accessibilityDescription,
1323
+ align,
1322
1324
  margin,
1323
1325
  size: size2,
1324
1326
  uri
@@ -1327,9 +1329,9 @@ function UrnIllustration({
1327
1329
  const illustrationName = getIllustrationName(uri);
1328
1330
  const illustration3DName = getIllustration3DName(uri);
1329
1331
  if (illustration3DName && isAnimated(uri)) {
1330
- return /* @__PURE__ */ jsx21("div", { className: `df-image ${getMargin(margin)}`, children: /* @__PURE__ */ jsx21(Illustration3D, { name: illustration3DName, size: illustrationSize }) });
1332
+ return /* @__PURE__ */ jsx21("div", { className: `df-image ${align} ${getMargin(margin)}`, children: /* @__PURE__ */ jsx21(Illustration3D, { name: illustration3DName, size: illustrationSize }) });
1331
1333
  }
1332
- return /* @__PURE__ */ jsx21("div", { className: `df-image ${getMargin(margin)}`, children: /* @__PURE__ */ jsx21(
1334
+ return /* @__PURE__ */ jsx21("div", { className: `df-image ${align} ${getMargin(margin)}`, children: /* @__PURE__ */ jsx21(
1333
1335
  Illustration,
1334
1336
  {
1335
1337
  className: "df-illustration",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wise/dynamic-flow-client-internal",
3
- "version": "4.6.0-experimental-4973e0d",
3
+ "version": "4.6.1",
4
4
  "description": "Dynamic Flow web client for Wise",
5
5
  "license": "Apache-2.0",
6
6
  "main": "./build/main.js",
@@ -37,26 +37,26 @@
37
37
  "@babel/preset-react": "7.26.3",
38
38
  "@babel/preset-typescript": "7.26.0",
39
39
  "@chromatic-com/storybook": "3.2.6",
40
- "@formatjs/cli": "^6.6.1",
41
- "@storybook/addon-a11y": "^8.6.7",
42
- "@storybook/addon-actions": "^8.6.7",
43
- "@storybook/addon-essentials": "^8.6.7",
44
- "@storybook/addon-interactions": "^8.6.7",
45
- "@storybook/addon-links": "^8.6.7",
40
+ "@formatjs/cli": "^6.6.2",
41
+ "@storybook/addon-a11y": "^8.6.8",
42
+ "@storybook/addon-actions": "^8.6.8",
43
+ "@storybook/addon-essentials": "^8.6.8",
44
+ "@storybook/addon-interactions": "^8.6.8",
45
+ "@storybook/addon-links": "^8.6.8",
46
46
  "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
47
- "@storybook/react": "^8.6.7",
48
- "@storybook/react-webpack5": "^8.6.7",
49
- "@storybook/test": "^8.6.7",
47
+ "@storybook/react": "^8.6.8",
48
+ "@storybook/react-webpack5": "^8.6.8",
49
+ "@storybook/test": "^8.6.8",
50
50
  "@testing-library/dom": "10.4.0",
51
51
  "@testing-library/jest-dom": "6.6.3",
52
52
  "@testing-library/react": "16.2.0",
53
53
  "@testing-library/user-event": "14.6.1",
54
- "@transferwise/components": "46.94.1",
54
+ "@transferwise/components": "46.94.2",
55
55
  "@transferwise/formatting": "^2.13.1",
56
56
  "@transferwise/icons": "3.19.1",
57
- "@transferwise/neptune-css": "14.22.0",
57
+ "@transferwise/neptune-css": "14.23.0",
58
58
  "@types/jest": "29.5.14",
59
- "@types/react": "18.3.18",
59
+ "@types/react": "18.3.20",
60
60
  "@types/react-dom": "18.3.5",
61
61
  "@wise/art": "2.20.0",
62
62
  "@wise/components-theming": "^1.6.1",
@@ -74,7 +74,7 @@
74
74
  "react": "18.3.1",
75
75
  "react-dom": "18.3.1",
76
76
  "react-intl": "6.8.9",
77
- "storybook": "^8.6.7",
77
+ "storybook": "^8.6.8",
78
78
  "stylelint": "16.16.0",
79
79
  "stylelint-config-standard": "36.0.1",
80
80
  "stylelint-no-unsupported-browser-features": "8.0.4",
@@ -83,8 +83,8 @@
83
83
  "typescript": "5.8.2",
84
84
  "webpack": "5.98.0",
85
85
  "@wise/dynamic-flow-fixtures": "0.0.1",
86
- "@wise/dynamic-flow-renderers": "0.0.0",
87
- "@wise/dynamic-flow-types": "3.1.0"
86
+ "@wise/dynamic-flow-types": "3.1.1",
87
+ "@wise/dynamic-flow-renderers": "0.0.0"
88
88
  },
89
89
  "peerDependencies": {
90
90
  "@transferwise/components": "^46.92.0",
@@ -99,8 +99,8 @@
99
99
  },
100
100
  "dependencies": {
101
101
  "classnames": "2.5.1",
102
- "@wise/dynamic-flow-client": "4.2.3",
103
- "@wise/dynamic-flow-types": "3.1.0"
102
+ "@wise/dynamic-flow-types": "3.1.1",
103
+ "@wise/dynamic-flow-client": "4.3.1"
104
104
  },
105
105
  "scripts": {
106
106
  "dev": "pnpm build:visual-tests && storybook dev -p 3005",