@wise/dynamic-flow-client-internal 5.19.3 → 5.20.0-exp-box-cq-2-e95523a

package/build/main.css

@@ -52,6 +52,44 @@
     width: 66.66%;
   }
 }
+/* NEW box renderer styles */
+@media screen and (width >=1px) {
+  /* container queries (when .df-prefer-container-queries is set on a parent) */
+  /* In container-query mode, ignore viewport-based width overrides by resetting to narrow defaults. */
+  .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: 576px) { */
+  @container (min-width: 480px) {
+    .df-prefer-container-queries .df-box-renderer.df-box-renderer-border {
+      padding: var(--size-24);
+    }
+
+    .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-xs {
+      width: 33.33%;
+    }
+
+    .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-sm {
+      width: 50%;
+    }
+
+    .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-md {
+      width: 66.66%;
+    }
+
+    .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-lg {
+      width: 83.33%;
+    }
+  }
+}
 .df-columns-renderer-container {
   display: flex;
   gap: var(--size-4);
@@ -137,13 +175,6 @@
     width: 300px;
   }
 }
-/**
-  * This speficies 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.
- */
-.df-prefer-container-queries {
-  container-type: inline-size;
-}
 /* narrow container */
 @container (max-width: 576px) {
   .df-image.xs img.df-reserve-space {
@@ -230,6 +261,13 @@
   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.
+ */
+.df-prefer-container-queries {
+  container-type: inline-size;
+}
 .df-context-menu {
   position: fixed;
   z-index: 10;

package/build/main.js

@@ -395,25 +395,30 @@ var AlertRenderer_default = AlertRenderer;
 // ../renderers/src/BoxRenderer.tsx
 var import_classnames = __toESM(require_classnames());
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var BoxRenderer = {
-  canRenderType: "box",
-  render: ({ children, control, margin, width }) => {
-    const hasFixedWidth = width !== "xl";
-    const hasBorder = control === "bordered" || control === "bordered-web";
-    const contents = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "div",
-      {
-        className: (0, import_classnames.default)({
-          "df-box-renderer-border": hasBorder,
-          [`df-box-renderer-width-${width}`]: hasFixedWidth,
-          [getMargin(margin)]: !hasFixedWidth
-        }),
-        children
-      }
-    );
-    return hasFixedWidth ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_classnames.default)("df-box-renderer-fixed-width", getMargin(margin)), children: contents }) : contents;
-  }
+var getBoxRenderer = (className) => {
+  const renderer = {
+    canRenderType: "box",
+    render: ({ children, control, margin, width }) => {
+      const hasFixedWidth = width !== "xl";
+      const hasBorder = control === "bordered" || control === "bordered-web";
+      const contents = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "div",
+        {
+          className: (0, import_classnames.default)({
+            [className]: !!className,
+            "df-box-renderer-border": hasBorder,
+            [`df-box-renderer-width-${width}`]: hasFixedWidth,
+            [getMargin(margin)]: !hasFixedWidth
+          }),
+          children
+        }
+      );
+      return hasFixedWidth ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_classnames.default)("df-box-renderer-fixed-width", getMargin(margin)), children: contents }) : contents;
+    }
+  };
+  return renderer;
 };
+var BoxRenderer = getBoxRenderer("df-box-renderer");
 var BoxRenderer_default = BoxRenderer;
 
 // ../renderers/src/ButtonRenderer/AddressValidationButtonRenderer.tsx

package/build/main.mjs

@@ -377,25 +377,30 @@ var AlertRenderer_default = AlertRenderer;
 // ../renderers/src/BoxRenderer.tsx
 var import_classnames = __toESM(require_classnames());
 import { jsx as jsx3 } from "react/jsx-runtime";
-var BoxRenderer = {
-  canRenderType: "box",
-  render: ({ children, control, margin, width }) => {
-    const hasFixedWidth = width !== "xl";
-    const hasBorder = control === "bordered" || control === "bordered-web";
-    const contents = /* @__PURE__ */ jsx3(
-      "div",
-      {
-        className: (0, import_classnames.default)({
-          "df-box-renderer-border": hasBorder,
-          [`df-box-renderer-width-${width}`]: hasFixedWidth,
-          [getMargin(margin)]: !hasFixedWidth
-        }),
-        children
-      }
-    );
-    return hasFixedWidth ? /* @__PURE__ */ jsx3("div", { className: (0, import_classnames.default)("df-box-renderer-fixed-width", getMargin(margin)), children: contents }) : contents;
-  }
+var getBoxRenderer = (className) => {
+  const renderer = {
+    canRenderType: "box",
+    render: ({ children, control, margin, width }) => {
+      const hasFixedWidth = width !== "xl";
+      const hasBorder = control === "bordered" || control === "bordered-web";
+      const contents = /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: (0, import_classnames.default)({
+            [className]: !!className,
+            "df-box-renderer-border": hasBorder,
+            [`df-box-renderer-width-${width}`]: hasFixedWidth,
+            [getMargin(margin)]: !hasFixedWidth
+          }),
+          children
+        }
+      );
+      return hasFixedWidth ? /* @__PURE__ */ jsx3("div", { className: (0, import_classnames.default)("df-box-renderer-fixed-width", getMargin(margin)), children: contents }) : contents;
+    }
+  };
+  return renderer;
 };
+var BoxRenderer = getBoxRenderer("df-box-renderer");
 var BoxRenderer_default = BoxRenderer;
 
 // ../renderers/src/ButtonRenderer/AddressValidationButtonRenderer.tsx