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

package/build/main.css

@@ -4,16 +4,19 @@
   border-radius: var(--radius-medium);
   padding: var(--size-16);
 }
+
 .df-box-renderer-fixed-width {
   display: flex;
   justify-content: center;
 }
+
 .df-box-renderer-width-xs,
 .df-box-renderer-width-sm,
 .df-box-renderer-width-md,
 .df-box-renderer-width-lg {
   width: 100%;
 }
+
 @media screen and (width >=768px) {
   .df-box-renderer-border {
     padding: var(--size-24);
@@ -35,6 +38,7 @@
     width: 83.33%;
   }
 }
+
 @media screen and (width >=990px) {
   .df-box-renderer-width-xs {
     width: 25%;
@@ -52,16 +56,20 @@
     width: 66.66%;
   }
 }
+
 /* container queries (when .df-prefer-container-queries is set on a parent) */
+
 .df-prefer-container-queries .df-box-renderer.df-box-renderer-border {
   padding: var(--size-16);
 }
+
 .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-xs,
 .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-sm,
 .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-md,
 .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-lg {
   width: 100%;
 }
+
 @container (min-width: 480px) {
   .df-prefer-container-queries .df-box-renderer.df-box-renderer-border {
     padding: var(--size-24);
@@ -88,15 +96,18 @@
   gap: var(--size-4);
   flex-direction: column;
 }
+
 .df-columns-renderer-column,
 .df-columns-renderer-bias-start .df-columns-renderer-column:nth-child(2),
 .df-columns-renderer-bias-end .df-columns-renderer-column:nth-child(1) {
   flex: 1;
 }
+
 .df-columns-renderer-bias-start .df-columns-renderer-column:nth-child(1),
 .df-columns-renderer-bias-end .df-columns-renderer-column:nth-child(2) {
   flex: 2;
 }
+
 @media (width >=768px) {
   .df-columns-renderer-container {
     flex-direction: row;
@@ -106,21 +117,26 @@
 .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.df-reserve-space {
   width: 100%;
   /*
@@ -131,25 +147,32 @@
   aspect-ratio: auto 1 / 1;
   height: auto;
 }
+
 .df-image img:not([src]) {
   visibility: hidden;
 }
+
 /* wide screens (or default) */
 .df-image.xs img.df-reserve-space {
   width: 100px;
 }
+
 .df-image.sm img.df-reserve-space {
   width: 200px;
 }
+
 .df-image.md img.df-reserve-space {
   width: 300px;
 }
+
 .df-image.lg img.df-reserve-space {
   width: 500px;
 }
+
 .df-image.xl img.df-reserve-space {
   max-width: 600px;
 }
+
 /* narrow screens */
 @media (width <576px) {
   .df-image.xs img.df-reserve-space {
@@ -168,6 +191,7 @@
     width: 300px;
   }
 }
+
 /* narrow container */
 @container (max-width: 576px) {
   .df-image.xs img.df-reserve-space {
@@ -192,14 +216,17 @@
 .df-media-layout-avatar {
   display: flex;
 }
+
 .df-media-layout-avatar.start {
   justify-content: start;
   align-items: start;
 }
+
 .df-media-layout-avatar.center {
   justify-content: center;
   align-items: center;
 }
+
 .df-media-layout-avatar.end {
   justify-content: end;
   align-items: end;
@@ -224,13 +251,16 @@
   padding: var(--size-16) 0;
   background-color: var(--color-background-screen);
 }
+
 /* If we're in a drawer, we need to account for the bottom padding on the drawer content */
 .np-drawer-content .df-step-fixed__footer {
   bottom: -16px;
 }
+
 .tw-modal-body--scrollable .df-step-fixed__footer {
   bottom: -24px;
 }
+
 .df-modal .df-back-button {
   position: fixed;
   top: 24px;
@@ -248,15 +278,18 @@
   display: block !important;
   /* left-aligned by default */
 }
+
 .df-button.circular {
   display: flex;
   justify-content: center;
 }
+
 .df-button.small.align-center {
   display: block !important;
   margin-left: auto;
   margin-right: auto;
 }
+
 /**
   * This specifies the container for container queries about width.
   * We don't use it by default, but integrations can specify it using the className prop in the DF component.

package/build/main.js

@@ -145,7 +145,7 @@ var import_dynamic_flow_client4 = require("@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.23.0" : "0.0.0"
+  typeof process !== "undefined" ? "5.23.1" : "0.0.0"
 );
 
 // src/dynamicFlow/context-menu/useContextMenu.tsx
@@ -660,7 +660,7 @@ var AvatarMedia = ({
       }
     );
   }
-  const avatarsWithoutBadges = avatars.filter(({ asset, icon }) => asset || icon).slice(0, 2).map(({ asset, icon, backgroundColor, color }) => ({
+  const avatarsWithoutBadges = avatars.filter(({ asset, icon }) => Boolean(asset || icon)).slice(0, 2).map(({ asset, icon, backgroundColor, color }) => ({
     asset: icon != null ? icon : asset,
     style: { backgroundColor, color }
   }));
@@ -747,16 +747,19 @@ var LegacyMedia = ({ image, icon, preferAvatar, size }) => {
   const iconNode = getIconNode(icon);
   const badge = getBadgedMedia(iconNode, imageNode, size);
   if (badge) {
-    return badge;
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: badge });
   }
   if (imageNode) {
-    return preferAvatar ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components5.AvatarView, { children: imageNode }) : imageNode;
+    return preferAvatar ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components5.AvatarView, { children: imageNode }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+      imageNode,
+      " "
+    ] });
   }
   if (iconNode && icon) {
     if ("text" in icon || size === 48) {
       return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components5.AvatarView, { size, children: iconNode });
     }
-    return iconNode;
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: iconNode });
   }
   return null;
 };
@@ -1808,7 +1811,7 @@ var import_react10 = require("react");
 // ../renderers/src/ImageRenderer/isAnimated.ts
 var isAnimated = (uri) => {
   const { rComponents } = stringToURN(uri);
-  return rComponents["type"] === "animated";
+  return rComponents.type === "animated";
 };
 
 // ../renderers/src/ImageRenderer/SafeIllustration3D.tsx
@@ -1826,7 +1829,7 @@ var Illustration3DErrorBoundary = class extends import_react9.Component {
   componentDidCatch() {
     this.props.onError();
   }
-  render() {
+  async render() {
     if (this.state.hasError) {
       return null;
     }
@@ -2659,10 +2662,10 @@ var MultiUploadInputRenderer = {
             "aria-describedby": descriptionId,
             description,
             disabled,
-            files: value.map(({ id: id2, file, validationState: validationState2 }) => ({
-              id: id2,
+            files: value.map(({ id: fileId, file, validationState: fileValidationState }) => ({
+              id: fileId,
               filename: file.name,
-              status: (validationState2 == null ? void 0 : validationState2.status) === "invalid" ? import_components36.Status.FAILED : import_components36.Status.SUCCEEDED
+              status: (fileValidationState == null ? void 0 : fileValidationState.status) === "invalid" ? import_components36.Status.FAILED : import_components36.Status.SUCCEEDED
             })),
             fileTypes: acceptsToFileTypes(accepts),
             maxFiles: maxItems,
@@ -3180,6 +3183,7 @@ function BlockSearchRendererComponent({
             id,
             name: id,
             placeholder: hint,
+            shape: "pill",
             type: "text",
             value: query,
             onChange: ({ currentTarget: { value } }) => {