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

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 (5) hide show
  1. package/build/main.css +13 -61
  2. package/build/main.js +23 -18
  3. package/build/main.mjs +23 -18
  4. package/build/tsconfig.types.tsbuildinfo +1 -1
  5. package/package.json +3 -3
package/build/main.css CHANGED
@@ -52,91 +52,43 @@
52
52
  width: 66.66%;
53
53
  }
54
54
  }
55
- @media screen and (width >=768px) {
55
+ /* NEW box renderer styles */
56
+ @media screen and (width >=1px) {
56
57
  /* container queries (when .df-prefer-container-queries is set on a parent) */
57
58
  /* In container-query mode, ignore viewport-based width overrides by resetting to narrow defaults. */
58
- .df-prefer-container-queries .df-box-renderer-border {
59
+ .df-prefer-container-queries .df-box-renderer.df-box-renderer-border {
59
60
  padding: var(--size-16);
60
61
  }
61
62
 
62
- .df-prefer-container-queries .df-box-renderer-width-xs,
63
- .df-prefer-container-queries .df-box-renderer-width-sm,
64
- .df-prefer-container-queries .df-box-renderer-width-md,
65
- .df-prefer-container-queries .df-box-renderer-width-lg {
63
+ .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-xs,
64
+ .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-sm,
65
+ .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-md,
66
+ .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-lg {
66
67
  width: 100%;
67
68
  }
68
69
 
70
+ /* @container (min-width: 576px) { */
69
71
  @container (min-width: 480px) {
70
- .df-prefer-container-queries .df-box-renderer-border {
72
+ .df-prefer-container-queries .df-box-renderer.df-box-renderer-border {
71
73
  padding: var(--size-24);
72
74
  }
73
75
 
74
- .df-prefer-container-queries .df-box-renderer-width-xs {
76
+ .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-xs {
75
77
  width: 33.33%;
76
78
  }
77
79
 
78
- .df-prefer-container-queries .df-box-renderer-width-sm {
80
+ .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-sm {
79
81
  width: 50%;
80
82
  }
81
83
 
82
- .df-prefer-container-queries .df-box-renderer-width-md {
84
+ .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-md {
83
85
  width: 66.66%;
84
86
  }
85
87
 
86
- .df-prefer-container-queries .df-box-renderer-width-lg {
88
+ .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-lg {
87
89
  width: 83.33%;
88
90
  }
89
91
  }
90
-
91
- @container (min-width: 576px) {
92
- .df-prefer-container-queries .df-box-renderer-width-xs {
93
- width: 25%;
94
- }
95
-
96
- .df-prefer-container-queries .df-box-renderer-width-sm {
97
- width: 33.33%;
98
- }
99
-
100
- .df-prefer-container-queries .df-box-renderer-width-md {
101
- width: 50%;
102
- }
103
-
104
- .df-prefer-container-queries .df-box-renderer-width-lg {
105
- width: 66.66%;
106
- }
107
- }
108
- }
109
- @media screen and (width >=990px) {
110
- /* container queries (when .df-prefer-container-queries is set on a parent) */
111
- /* In container-query mode, ignore viewport-based width overrides by resetting to narrow defaults. */
112
- .df-prefer-container-queries .df-box-renderer-border {
113
- padding: var(--size-16);
114
- }
115
-
116
- .df-prefer-container-queries .df-box-renderer-width-xs,
117
- .df-prefer-container-queries .df-box-renderer-width-sm,
118
- .df-prefer-container-queries .df-box-renderer-width-md,
119
- .df-prefer-container-queries .df-box-renderer-width-lg {
120
- width: 100%;
121
- }
122
-
123
- @container (min-width: 480px) {
124
- .df-prefer-container-queries .df-box-renderer-width-xs {
125
- width: 25%;
126
- }
127
-
128
- .df-prefer-container-queries .df-box-renderer-width-sm {
129
- width: 33.33%;
130
- }
131
-
132
- .df-prefer-container-queries .df-box-renderer-width-md {
133
- width: 50%;
134
- }
135
-
136
- .df-prefer-container-queries .df-box-renderer-width-lg {
137
- width: 66.66%;
138
- }
139
- }
140
92
  }
141
93
  .df-columns-renderer-container {
142
94
  display: flex;
package/build/main.js CHANGED
@@ -395,25 +395,30 @@ var AlertRenderer_default = AlertRenderer;
395
395
  // ../renderers/src/BoxRenderer.tsx
396
396
  var import_classnames = __toESM(require_classnames());
397
397
  var import_jsx_runtime3 = require("react/jsx-runtime");
398
- var BoxRenderer = {
399
- canRenderType: "box",
400
- render: ({ children, control, margin, width }) => {
401
- const hasFixedWidth = width !== "xl";
402
- const hasBorder = control === "bordered" || control === "bordered-web";
403
- const contents = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
404
- "div",
405
- {
406
- className: (0, import_classnames.default)({
407
- "df-box-renderer-border": hasBorder,
408
- [`df-box-renderer-width-${width}`]: hasFixedWidth,
409
- [getMargin(margin)]: !hasFixedWidth
410
- }),
411
- children
412
- }
413
- );
414
- return hasFixedWidth ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_classnames.default)("df-box-renderer-fixed-width", getMargin(margin)), children: contents }) : contents;
415
- }
398
+ var getBoxRenderer = (className) => {
399
+ const renderer = {
400
+ canRenderType: "box",
401
+ render: ({ children, control, margin, width }) => {
402
+ const hasFixedWidth = width !== "xl";
403
+ const hasBorder = control === "bordered" || control === "bordered-web";
404
+ const contents = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
405
+ "div",
406
+ {
407
+ className: (0, import_classnames.default)({
408
+ [className]: !!className,
409
+ "df-box-renderer-border": hasBorder,
410
+ [`df-box-renderer-width-${width}`]: hasFixedWidth,
411
+ [getMargin(margin)]: !hasFixedWidth
412
+ }),
413
+ children
414
+ }
415
+ );
416
+ return hasFixedWidth ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_classnames.default)("df-box-renderer-fixed-width", getMargin(margin)), children: contents }) : contents;
417
+ }
418
+ };
419
+ return renderer;
416
420
  };
421
+ var BoxRenderer = getBoxRenderer("df-box-renderer");
417
422
  var BoxRenderer_default = BoxRenderer;
418
423
 
419
424
  // ../renderers/src/ButtonRenderer/AddressValidationButtonRenderer.tsx
package/build/main.mjs CHANGED
@@ -377,25 +377,30 @@ var AlertRenderer_default = AlertRenderer;
377
377
  // ../renderers/src/BoxRenderer.tsx
378
378
  var import_classnames = __toESM(require_classnames());
379
379
  import { jsx as jsx3 } from "react/jsx-runtime";
380
- var BoxRenderer = {
381
- canRenderType: "box",
382
- render: ({ children, control, margin, width }) => {
383
- const hasFixedWidth = width !== "xl";
384
- const hasBorder = control === "bordered" || control === "bordered-web";
385
- const contents = /* @__PURE__ */ jsx3(
386
- "div",
387
- {
388
- className: (0, import_classnames.default)({
389
- "df-box-renderer-border": hasBorder,
390
- [`df-box-renderer-width-${width}`]: hasFixedWidth,
391
- [getMargin(margin)]: !hasFixedWidth
392
- }),
393
- children
394
- }
395
- );
396
- return hasFixedWidth ? /* @__PURE__ */ jsx3("div", { className: (0, import_classnames.default)("df-box-renderer-fixed-width", getMargin(margin)), children: contents }) : contents;
397
- }
380
+ var getBoxRenderer = (className) => {
381
+ const renderer = {
382
+ canRenderType: "box",
383
+ render: ({ children, control, margin, width }) => {
384
+ const hasFixedWidth = width !== "xl";
385
+ const hasBorder = control === "bordered" || control === "bordered-web";
386
+ const contents = /* @__PURE__ */ jsx3(
387
+ "div",
388
+ {
389
+ className: (0, import_classnames.default)({
390
+ [className]: !!className,
391
+ "df-box-renderer-border": hasBorder,
392
+ [`df-box-renderer-width-${width}`]: hasFixedWidth,
393
+ [getMargin(margin)]: !hasFixedWidth
394
+ }),
395
+ children
396
+ }
397
+ );
398
+ return hasFixedWidth ? /* @__PURE__ */ jsx3("div", { className: (0, import_classnames.default)("df-box-renderer-fixed-width", getMargin(margin)), children: contents }) : contents;
399
+ }
400
+ };
401
+ return renderer;
398
402
  };
403
+ var BoxRenderer = getBoxRenderer("df-box-renderer");
399
404
  var BoxRenderer_default = BoxRenderer;
400
405
 
401
406
  // ../renderers/src/ButtonRenderer/AddressValidationButtonRenderer.tsx