welcome-ui 8.1.0-alpha.2 → 8.1.0

package/dist/AspectRatio.mjs

@@ -3,7 +3,7 @@ import { j as i } from "./jsx-runtime-B7I4PJ0H.mjs";
 import { forwardRef as s } from "./System.mjs";
 import r, { css as n } from "@xstyled/styled-components";
 const p = r.divBox(
-  ({ ratio: t = 4 / 3 }) => n`
+  ({ ratio: t }) => n`
     position: relative;
 
     & > * {
@@ -32,7 +32,9 @@ const p = r.divBox(
       padding-bottom: ${1 / t * 100}%;
     }
   `
-), c = s(({ ratio: t, ...o }, e) => /* @__PURE__ */ i.jsx(p, { ratio: t, ref: e, ...o }));
+), c = s(
+  ({ ratio: t = 4 / 3, ...o }, e) => /* @__PURE__ */ i.jsx(p, { ratio: t, ref: e, ...o })
+);
 c.displayName = "AspectRatio";
 export {
   c as AspectRatio

package/dist/Avatar.mjs

@@ -31,12 +31,12 @@ const T = y(
     w: n,
     ...h
   }, x) => {
-    const l = j(), d = o || z(l.colors, e), c = l.avatars.sizes[f], u = t || `calc(${n ? l.toRem(n) : c} / 2.5)`;
+    const l = j(), u = o || z(l.colors, e), c = l.avatars.sizes[f], d = t || `calc(${n ? l.toRem(n) : c} / 2.5)`;
     return /* @__PURE__ */ s.jsxs(
       b,
       {
         "aria-label": e,
-        backgroundColor: d,
+        backgroundColor: u,
         h: a || c,
         ref: x,
         role: "img",
@@ -44,8 +44,8 @@ const T = y(
         w: n || c,
         ...h,
         children: [
-          i && /* @__PURE__ */ s.jsx("img", { alt: e, src: i }),
-          !i && /* @__PURE__ */ s.jsx(v, { children: /* @__PURE__ */ s.jsx(A, { fontSize: u, m: 0, children: r(e) }) })
+          i ? /* @__PURE__ */ s.jsx("img", { alt: e, src: i }) : null,
+          !i && /* @__PURE__ */ s.jsx(v, { children: /* @__PURE__ */ s.jsx(A, { fontSize: d, m: 0, children: r(e) }) })
         ]
       }
     );

package/dist/Breadcrumb.mjs

@@ -37,8 +37,8 @@ var z = function(e) {
     return this.x = t, this.y = r, this.width = n, this.height = i, this.top = this.y, this.left = this.x, this.bottom = this.top + this.height, this.right = this.left + this.width, z(this);
   }
   return e.prototype.toJSON = function() {
-    var t = this, r = t.x, n = t.y, i = t.top, a = t.right, o = t.bottom, v = t.left, l = t.width, c = t.height;
-    return { x: r, y: n, top: i, right: a, bottom: o, left: v, width: l, height: c };
+    var t = this, r = t.x, n = t.y, i = t.top, a = t.right, o = t.bottom, l = t.left, v = t.width, c = t.height;
+    return { x: r, y: n, top: i, right: a, bottom: o, left: l, width: v, height: c };
   }, e.fromRect = function(t) {
     return new e(t.x, t.y, t.width, t.height);
   }, e;
@@ -86,11 +86,11 @@ var z = function(e) {
     return M.get(e);
   if (ae(e))
     return M.set(e, Q), Q;
-  var r = getComputedStyle(e), n = V(e) && e.ownerSVGElement && e.getBBox(), i = !De && r.boxSizing === "border-box", a = ke.test(r.writingMode || ""), o = !n && K.test(r.overflowY || ""), v = !n && K.test(r.overflowX || ""), l = n ? 0 : f(r.paddingTop), c = n ? 0 : f(r.paddingRight), E = n ? 0 : f(r.paddingBottom), d = n ? 0 : f(r.paddingLeft), W = n ? 0 : f(r.borderTopWidth), D = n ? 0 : f(r.borderRightWidth), I = n ? 0 : f(r.borderBottomWidth), $ = n ? 0 : f(r.borderLeftWidth), B = d + c, m = l + E, T = $ + D, S = W + I, s = v ? e.offsetHeight - S - e.clientHeight : 0, u = o ? e.offsetWidth - T - e.clientWidth : 0, p = i ? B + T : 0, x = i ? m + S : 0, h = n ? n.width : f(r.width) - p - u, b = n ? n.height : f(r.height) - x - s, _ = h + B + u + T, be = b + m + s + S, X = z({
+  var r = getComputedStyle(e), n = V(e) && e.ownerSVGElement && e.getBBox(), i = !De && r.boxSizing === "border-box", a = ke.test(r.writingMode || ""), o = !n && K.test(r.overflowY || ""), l = !n && K.test(r.overflowX || ""), v = n ? 0 : f(r.paddingTop), c = n ? 0 : f(r.paddingRight), E = n ? 0 : f(r.paddingBottom), d = n ? 0 : f(r.paddingLeft), W = n ? 0 : f(r.borderTopWidth), D = n ? 0 : f(r.borderRightWidth), I = n ? 0 : f(r.borderBottomWidth), $ = n ? 0 : f(r.borderLeftWidth), B = d + c, m = v + E, T = $ + D, S = W + I, s = l ? e.offsetHeight - S - e.clientHeight : 0, u = o ? e.offsetWidth - T - e.clientWidth : 0, p = i ? B + T : 0, x = i ? m + S : 0, h = n ? n.width : f(r.width) - p - u, b = n ? n.height : f(r.height) - x - s, _ = h + B + u + T, be = b + m + s + S, X = z({
     devicePixelContentBoxSize: R(Math.round(h * devicePixelRatio), Math.round(b * devicePixelRatio), a),
     borderBoxSize: R(_, be, a),
     contentBoxSize: R(h, b, a),
-    contentRect: new se(d, l, h, b)
+    contentRect: new se(d, v, h, b)
   });
   return M.set(e, X), X;
 }, ue = function(e, t, r) {
@@ -109,7 +109,7 @@ var z = function(e) {
     this.target = t, this.contentRect = r.contentRect, this.borderBoxSize = z([r.borderBoxSize]), this.contentBoxSize = z([r.contentBoxSize]), this.devicePixelContentBoxSize = z([r.devicePixelContentBoxSize]);
   }
   return e;
-}(), ve = function(e) {
+}(), le = function(e) {
   if (ae(e))
     return 1 / 0;
   for (var t = 0, r = e.parentNode; r; )
@@ -119,12 +119,12 @@ var z = function(e) {
   var e = 1 / 0, t = [];
   w.forEach(function(o) {
     if (o.activeTargets.length !== 0) {
-      var v = [];
+      var l = [];
       o.activeTargets.forEach(function(c) {
-        var E = new Ie(c.target), d = ve(c.target);
-        v.push(E), c.lastReportedSize = ue(c.target, c.observedBox), d < e && (e = d);
+        var E = new Ie(c.target), d = le(c.target);
+        l.push(E), c.lastReportedSize = ue(c.target, c.observedBox), d < e && (e = d);
       }), t.push(function() {
-        o.callback.call(o.observer, v, o.observer);
+        o.callback.call(o.observer, l, o.observer);
       }), o.activeTargets.splice(0, o.activeTargets.length);
     }
   });
@@ -136,7 +136,7 @@ var z = function(e) {
 }, Z = function(e) {
   w.forEach(function(r) {
     r.activeTargets.splice(0, r.activeTargets.length), r.skippedTargets.splice(0, r.skippedTargets.length), r.observationTargets.forEach(function(i) {
-      i.isActive() && (ve(i.target) > e ? r.activeTargets.push(i) : r.skippedTargets.push(i));
+      i.isActive() && (le(i.target) > e ? r.activeTargets.push(i) : r.skippedTargets.push(i));
     });
   });
 }, Ae = function() {
@@ -144,8 +144,8 @@ var z = function(e) {
   for (Z(e); Ee(); )
     e = Me(), Z(e);
   return Be() && Te(), e > 0;
-}, F, le = [], Le = function() {
-  return le.splice(0).forEach(function(e) {
+}, F, ve = [], Le = function() {
+  return ve.splice(0).forEach(function(e) {
     return e();
   });
 }, Ne = function(e) {
@@ -157,7 +157,7 @@ var z = function(e) {
       r.textContent = "".concat(t ? t-- : t++);
     };
   }
-  le.push(e), F();
+  ve.push(e), F();
 }, We = function(e) {
   Ne(function() {
     requestAnimationFrame(e);
@@ -326,7 +326,7 @@ const je = (e, t, r) => Math.min(Math.max(e, t), r), qe = y.aBox`
         flex: "0 0 auto",
         lineHeight: "normal",
         children: [
-          n && /* @__PURE__ */ g.jsx(Je, { role: "presentation", children: n }),
+          n ? /* @__PURE__ */ g.jsx(Je, { role: "presentation", children: n }) : null,
           /* @__PURE__ */ g.jsx(
             qe,
             {
@@ -387,7 +387,7 @@ const je = (e, t, r) => Math.min(Math.max(e, t), r), qe = y.aBox`
     separator: n = /* @__PURE__ */ g.jsx(ze, { size: "xs" }),
     ...i
   }, a) => {
-    const o = P(null), v = P(null), l = P(null), [c, E] = j(!1), [d, W] = j(0), D = me.toArray(e).filter(Boolean), I = D.length, $ = D.map((s, u) => {
+    const o = P(null), l = P(null), v = P(null), [c, E] = j(!1), [d, W] = j(0), D = me.toArray(e).filter(Boolean), I = D.length, $ = D.map((s, u) => {
       const p = I === 1 || I === u + 1, x = p && r;
       return ge.isValidElement(s) ? xe(s, {
         isActive: x,
@@ -401,7 +401,7 @@ const je = (e, t, r) => Math.min(Math.max(e, t), r), qe = y.aBox`
     }
     const m = q((s) => {
       const u = 1 - s;
-      B(v.current, u), B(l.current, s);
+      B(l.current, u), B(v.current, s);
     }, []), T = q(() => {
       const { current: s } = o;
       if (!s) return;
@@ -429,11 +429,11 @@ const je = (e, t, r) => Math.min(Math.max(e, t), r), qe = y.aBox`
       const s = new Xe(S);
       return o.current && s.observe(o.current), () => s.disconnect();
     }, []), J(() => {
-      v.current && l.current && m(0);
+      l.current && v.current && m(0);
     }, [c, m]), /* @__PURE__ */ g.jsxs(Ye, { as: "nav", ref: a, ...i, children: [
-      c && /* @__PURE__ */ g.jsx(de, { gradientBackground: t, ref: v }),
+      c ? /* @__PURE__ */ g.jsx(de, { gradientBackground: t, ref: l }) : null,
       /* @__PURE__ */ g.jsx(Ke, { dir: "rtl", onScroll: T, ref: o, children: $.reverse() }),
-      c && /* @__PURE__ */ g.jsx(fe, { gradientBackground: t, ref: l })
+      c ? /* @__PURE__ */ g.jsx(fe, { gradientBackground: t, ref: v }) : null
     ] });
   }
 );

package/dist/Button.mjs

@@ -123,7 +123,7 @@ const B = (s, i = "square") => n`
         variant: d ? "disabled" : a,
         ...b,
         children: [
-          o && /* @__PURE__ */ r.jsxs("div", { children: [
+          o ? /* @__PURE__ */ r.jsxs("div", { children: [
             /* @__PURE__ */ r.jsx(
               l,
               {
@@ -140,7 +140,7 @@ const B = (s, i = "square") => n`
               }
             ),
             /* @__PURE__ */ r.jsx(l, { opacity: "0", children: i })
-          ] }),
+          ] }) : null,
           !o && i
         ]
       }

package/dist/{CustomPopper-CZt4RioF.mjs → CustomPopper-B2Cqfph4.mjs}

@@ -6930,11 +6930,11 @@ const yl = mo(
     const l = ko[i || "md"];
     return /* @__PURE__ */ fe.jsxs(cl, { focused: n, onBlur: a, onFocus: r, children: [
       /* @__PURE__ */ fe.jsx("input", { value: s || "", ...c, ref: u }),
-      t && e !== "right" && /* @__PURE__ */ fe.jsx(hn, { iconPlacement: e || "left", size: l, children: v.cloneElement(t, { ...t.props, size: l }) }),
-      s && /* @__PURE__ */ fe.jsxs(fn, { size: l, children: [
+      t && e !== "right" ? /* @__PURE__ */ fe.jsx(hn, { iconPlacement: e || "left", size: l, children: v.cloneElement(t, { ...t.props, size: l }) }) : null,
+      s ? /* @__PURE__ */ fe.jsxs(fn, { size: l, children: [
         /* @__PURE__ */ fe.jsx(_o, { "aria-label": "clear date", onClick: o }),
-        t && e === "right" && v.cloneElement(t, { ...t.props, size: l })
-      ] })
+        t && e === "right" ? v.cloneElement(t, { ...t.props, size: l }) : null
+      ] }) : null
     ] });
   }
 );

package/dist/DatePicker.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { j as a } from "./jsx-runtime-B7I4PJ0H.mjs";
 import { useState as k, useRef as V, useEffect as E } from "react";
-import { g as W, D as R, S as X, c as Z, C as $, b as z } from "./CustomPopper-CZt4RioF.mjs";
+import { g as W, D as R, S as X, c as Z, C as $, b as z } from "./CustomPopper-B2Cqfph4.mjs";
 import { forwardRef as B } from "./System.mjs";
 const g = B(
   ({

package/dist/DateTimePicker.mjs

@@ -2,7 +2,7 @@
 import { j as a } from "./jsx-runtime-B7I4PJ0H.mjs";
 import d, { Children as f, useState as $, useEffect as P, cloneElement as b } from "react";
 import { DatePicker as j } from "./DatePicker.mjs";
-import { S as w, a as S, g as _, D as A } from "./CustomPopper-CZt4RioF.mjs";
+import { S as w, a as S, g as _, D as A } from "./CustomPopper-B2Cqfph4.mjs";
 import { forwardRef as R } from "./System.mjs";
 import { TimePicker as T } from "./TimePicker.mjs";
 import V, { css as F } from "@xstyled/styled-components";
@@ -64,7 +64,7 @@ const g = F`
       const e = p(t);
       ((s = new Date(t)) == null ? void 0 : s.getTime()) - (e == null ? void 0 : e.getTime()) !== 0 && i && o(e), D(e);
     }, [t]), /* @__PURE__ */ a.jsxs(I, { "data-testid": m, children: [
-      r && f.map(r, (e, s) => d.isValidElement(e) ? b(e, {
+      r ? f.map(r, (e, s) => d.isValidElement(e) ? b(e, {
         // give ref only to the first child
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-expect-error
@@ -75,7 +75,7 @@ const g = F`
         timeIntervals: y,
         transparent: c,
         value: E
-      }) : e),
+      }) : e) : null,
       !r && /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
         /* @__PURE__ */ a.jsx(
           j,

package/dist/DateTimePickerCommon.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { C as a, b as t, c as r, D as o, S as i, a as g, f as m, g as u, d as D, e as c } from "./CustomPopper-CZt4RioF.mjs";
+import { C as a, b as t, c as r, D as o, S as i, a as g, f as m, g as u, d as D, e as c } from "./CustomPopper-B2Cqfph4.mjs";
 export {
   a as CustomHeader,
   t as CustomInput,

package/dist/Drawer.mjs

@@ -86,7 +86,7 @@ const I = n.divBox`
           i
         ] })
       ] }),
-      t && /* @__PURE__ */ r.jsx(l, { alignItems: "center", display: "flex", flexShrink: 0, gap: "md", children: t })
+      t ? /* @__PURE__ */ r.jsx(l, { alignItems: "center", display: "flex", flexShrink: 0, gap: "md", children: t }) : null
     ]
   }
 ), O = ({ icon: t, size: e = "md" }) => /* @__PURE__ */ r.jsx(S, { size: e, children: /* @__PURE__ */ r.jsx(t, { color: "neutral-90", size: e }) }), R = (t) => {
@@ -246,7 +246,7 @@ const I = n.divBox`
       store: a,
       ...j,
       children: /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-        w && /* @__PURE__ */ r.jsx(h, {}),
+        w ? /* @__PURE__ */ r.jsx(h, {}) : null,
         t
       ] })
     }

package/dist/Field.mjs

@@ -12,7 +12,7 @@ const Y = s`
   align-items: flex-start;
   overflow-wrap: break-word;
 `, _ = c.divBox.withConfig({ shouldForwardProp: z })(
-  ({ checked: t, isCheckable: o, isRadioGroup: r, withHintText: m }) => s`
+  ({ checked: t, isCheckable: o, isRadioGroup: l, withHintText: u }) => s`
     ${o && s`
       input {
         margin-top: xs;
@@ -20,12 +20,12 @@ const Y = s`
     `}
     ${P} {
       ${o && Y};
-      ${o && m && i("defaultFields.checkablelabel.default")}
+      ${o && u && i("defaultFields.checkablelabel.default")}
       ${t && i("defaultFields.checkablelabel.checked")}
       ${!o && s`
         margin-bottom: sm;
       `}
-      ${r && s`
+      ${l && s`
         margin-bottom: md;
       `}
     }
@@ -92,18 +92,18 @@ const Y = s`
 }, K = (t) => J[t] || t, Q = ({
   error: t,
   success: o,
-  warning: r
+  warning: l
 }) => {
   if (t) return "danger";
-  if (r) return "warning";
+  if (l) return "warning";
   if (o) return "success";
 }, U = () => `wui-field-${Math.random().toString(36).slice(2)}`, X = ["disabled", "required", "variant"], Z = C(
   ({
     children: t,
     dataTestId: o,
-    disabled: r,
-    disabledIcon: m,
-    error: u,
+    disabled: l,
+    disabledIcon: u,
+    error: m,
     flexDirection: w,
     hint: k,
     label: x,
@@ -113,12 +113,12 @@ const Y = s`
     warning: b,
     ...R
   }, G) => {
-    const d = K(t.props.type || t.type.displayName), I = d === "radio", g = d === "RadioGroup", T = d === "FieldGroup", B = d === "checkbox", E = t.type.displayName === "Toggle", e = I || B || E, L = w || (e ? "row" : "column"), S = T || g, a = Q({ error: u, success: h, warning: b }), l = a ? u || b || h : k, W = !!l, p = t.props.id || t.props.name || U(), $ = F.cloneElement(F.Children.only(t), {
-      disabled: r,
+    const d = K(t.props.type || t.type.displayName), I = d === "radio", g = d === "RadioGroup", T = d === "FieldGroup", B = d === "checkbox", E = t.type.displayName === "Toggle", e = I || B || E, L = w || (e ? "row" : "column"), S = T || g, r = Q({ error: m, success: h, warning: b }), a = r ? m || b || h : k, W = !!a, p = t.props.id || t.props.name || U(), $ = F.cloneElement(F.Children.only(t), {
+      disabled: l,
       id: p,
       required: f,
       transparent: j,
-      variant: a,
+      variant: r,
       ...S ? { flexDirection: L } : {}
     });
     return V(() => {
@@ -139,49 +139,49 @@ const Y = s`
         withHintText: W,
         children: [
           /* @__PURE__ */ n.jsxs(M, { children: [
-            e && $,
+            e ? $ : null,
             /* @__PURE__ */ n.jsxs(O, { children: [
-              x && /* @__PURE__ */ n.jsxs(
+              x ? /* @__PURE__ */ n.jsxs(
                 H,
                 {
                   checkableField: e,
                   dataTestId: o ? `${o}-label` : void 0,
-                  disabled: r,
-                  disabledIcon: m,
+                  disabled: l,
+                  disabledIcon: u,
                   htmlFor: p,
                   required: f,
-                  variant: a,
+                  variant: r,
                   withDisabledIcon: !e,
                   children: [
-                    e && /* @__PURE__ */ n.jsx(D, { size: "sm", variant: a }),
+                    e ? /* @__PURE__ */ n.jsx(D, { size: "sm", variant: r }) : null,
                     x
                   ]
                 }
-              ),
-              e && l && /* @__PURE__ */ n.jsx(
+              ) : null,
+              e && a ? /* @__PURE__ */ n.jsx(
                 v,
                 {
                   checkableField: !0,
                   dataTestId: o ? `${o}-hint` : void 0,
                   mt: "0",
-                  variant: a,
-                  children: l
+                  variant: r,
+                  children: a
                 }
-              )
+              ) : null
             ] })
           ] }),
           !e && $,
-          !e && l && /* @__PURE__ */ n.jsx(v, { dataTestId: o ? `${o}-hint` : void 0, variant: a, children: l })
+          !e && a ? /* @__PURE__ */ n.jsx(v, { dataTestId: o ? `${o}-hint` : void 0, variant: r, children: a }) : null
         ]
       }
     );
   }
 );
 Z.displayName = "Field";
-const lt = q, ct = A;
+const at = q, ct = A;
 export {
   Z as Field,
   ct as IconGroupWrapper,
-  lt as IconWrapper,
+  at as IconWrapper,
   K as getBaseType
 };

package/dist/FieldGroup.mjs

@@ -1,9 +1,9 @@
 "use client";
 import { j as t } from "./jsx-runtime-B7I4PJ0H.mjs";
-import { Label as m } from "./Label.mjs";
-import { shouldForwardProp as l, forwardRef as n } from "./System.mjs";
+import { Label as l } from "./Label.mjs";
+import { shouldForwardProp as m, forwardRef as n } from "./System.mjs";
 import p, { th as a } from "@xstyled/styled-components";
-const o = p.fieldsetBox.withConfig({ shouldForwardProp: l })`
+const o = p.fieldsetBox.withConfig({ shouldForwardProp: m })`
   width: 100%;
   min-width: 0;
   min-height: 0;
@@ -16,7 +16,7 @@ const o = p.fieldsetBox.withConfig({ shouldForwardProp: l })`
   }
 `, f = n(
   ({ children: d, dataTestId: e, label: i, required: r }, s) => /* @__PURE__ */ t.jsxs(o, { "data-testid": e, ref: s, children: [
-    i && /* @__PURE__ */ t.jsx(m, { as: "legend", required: r, children: i }),
+    i ? /* @__PURE__ */ t.jsx(l, { as: "legend", required: r, children: i }) : null,
     d
   ] })
 );

package/dist/FileDrop.mjs

@@ -2166,10 +2166,10 @@ const Lt = ({
     /* @__PURE__ */ d.jsx(o, { color: "neutral-90", h: 50, mb: "lg", w: 50 }),
     /* @__PURE__ */ d.jsx(bi, { color: "neutral-90", lines: 1, m: 0, maxWidth: 600, variant: "h4", children: r }),
     !e && /* @__PURE__ */ d.jsx(bi, { color: "beige-70", fontWeight: "medium", lines: 1, m: 0, variant: "sm", children: c }),
-    e && /* @__PURE__ */ d.jsxs(gi, { as: "a", href: i, mt: "md", rel: "noopener", size: "sm", target: "_blank", children: [
+    e ? /* @__PURE__ */ d.jsxs(gi, { as: "a", href: i, mt: "md", rel: "noopener", size: "sm", target: "_blank", children: [
       /* @__PURE__ */ d.jsx("span", { children: n }),
       /* @__PURE__ */ d.jsx(Ka, {})
-    ] })
+    ] }) : null
   ] });
 }, la = ({
   disabled: i,
@@ -2345,10 +2345,10 @@ const Lt = ({
               openFile: oi,
               wordings: ni
             }),
-            !!k && (W || h || v) && /* @__PURE__ */ d.jsxs(Mt, { children: [
-              (W || h) && /* @__PURE__ */ d.jsx(gi, { onClick: oi, shape: "circle", size: "sm", type: "button", variant: "tertiary", children: /* @__PURE__ */ d.jsx(qa, {}) }),
-              v && /* @__PURE__ */ d.jsx(gi, { danger: !0, onClick: C, shape: "circle", size: "sm", type: "button", children: /* @__PURE__ */ d.jsx(Ta, {}) })
-            ] })
+            k && (W || h || v) ? /* @__PURE__ */ d.jsxs(Mt, { children: [
+              W || h ? /* @__PURE__ */ d.jsx(gi, { onClick: oi, shape: "circle", size: "sm", type: "button", variant: "tertiary", children: /* @__PURE__ */ d.jsx(qa, {}) }) : null,
+              v ? /* @__PURE__ */ d.jsx(gi, { danger: !0, onClick: C, shape: "circle", size: "sm", type: "button", children: /* @__PURE__ */ d.jsx(Ta, {}) }) : null
+            ] }) : null
           ] })
         ]
       }

package/dist/FileUpload.mjs

@@ -1,48 +1,48 @@
 "use client";
 import { j as e } from "./jsx-runtime-B7I4PJ0H.mjs";
-import { useState as A, useRef as D, useEffect as _ } from "react";
-import { Box as N } from "./Box.mjs";
-import { Button as O } from "./Button.mjs";
-import { getFileIcon as P, getFileName as K, getFileSize as M } from "./Files.mjs";
-import { shouldForwardProp as X, forwardRef as Y } from "./System.mjs";
-import { Tag as Z } from "./Tag.mjs";
+import { useState as z, useRef as A, useEffect as _ } from "react";
+import { Box as D } from "./Box.mjs";
+import { Button as N } from "./Button.mjs";
+import { getFileIcon as O, getFileName as P, getFileSize as K } from "./Files.mjs";
+import { shouldForwardProp as M, forwardRef as X } from "./System.mjs";
+import { Tag as Y } from "./Tag.mjs";
 import { c as b } from "./create-event-rXDe5aCQ.mjs";
-import q from "@xstyled/styled-components";
-const G = q.inputBox.withConfig({ shouldForwardProp: X })`
+import Z from "@xstyled/styled-components";
+const q = Z.inputBox.withConfig({ shouldForwardProp: M })`
   display: none;
-`, H = 2e6, J = "*/*", d = (r) => Array.isArray(r) ? r : r ? [r] : [], Q = ({ file: r, onRemove: f }) => {
-  const a = P(r), o = K(r), j = M(r);
-  return /* @__PURE__ */ e.jsxs(Z, { "data-id": o, mr: "sm", mt: "sm", onRemove: f, children: [
+`, G = 2e6, H = "*/*", d = (r) => Array.isArray(r) ? r : r ? [r] : [], J = ({ file: r, onRemove: f }) => {
+  const a = O(r), o = P(r), u = K(r);
+  return /* @__PURE__ */ e.jsxs(Y, { "data-id": o, mr: "sm", mt: "sm", onRemove: f, children: [
     /* @__PURE__ */ e.jsx(a, { size: "md" }),
     o,
-    j && /* @__PURE__ */ e.jsxs(N, { color: "beige-60", children: [
+    u ? /* @__PURE__ */ e.jsxs(D, { color: "beige-60", children: [
       "(",
-      j,
+      u,
       ")"
-    ] })
+    ] }) : null
   ] }, o);
-}, V = Y(
+}, Q = X(
   ({
-    accept: r = J,
+    accept: r = H,
     children: f,
     dataTestId: a,
     disabled: o,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    draggable: j,
-    handleAddFile: u,
+    draggable: u,
+    handleAddFile: j,
     handleRemoveFile: x,
-    maxSize: g = H,
+    maxSize: g = G,
     multiple: L,
     name: E,
     onBlur: i,
     onChange: n,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onError: W,
-    preview: v = Q,
+    onError: V,
+    preview: v = J,
     value: w = [],
     ...k
   }, p) => {
-    const [c, y] = A(d(w)), F = D();
+    const [c, y] = z(d(w)), F = A();
     _(() => {
       y(d(w));
     }, [w]), _(() => () => {
@@ -56,9 +56,9 @@ const G = q.inputBox.withConfig({ shouldForwardProp: X })`
       );
       y(s), s.length === 1 && (s = s[0]);
       const U = b({ name: E, value: s });
-      n == null || n(U), u == null || u(s), i == null || i();
+      n == null || n(U), j == null || j(s), i == null || i();
     }, R = (t) => {
-      const s = c.filter((z) => z !== t), U = L ? s : void 0;
+      const s = c.filter((l) => l !== t), U = L ? s : void 0;
       y(s);
       const m = b({ name: E, value: U });
       n == null || n(m), x == null || x(t), i == null || i();
@@ -71,10 +71,10 @@ const G = q.inputBox.withConfig({ shouldForwardProp: X })`
         files: c,
         onRemoveFile: R,
         openFile: I
-      }) : /* @__PURE__ */ e.jsx(O, { disabled: o, onClick: I, children: "Upload file" }),
+      }) : /* @__PURE__ */ e.jsx(N, { disabled: o, onClick: I, children: "Upload file" }),
       /* @__PURE__ */ e.jsx("br", {}),
       /* @__PURE__ */ e.jsx(
-        G,
+        q,
         {
           accept: r,
           "data-testid": a,
@@ -92,18 +92,18 @@ const G = q.inputBox.withConfig({ shouldForwardProp: X })`
         },
         T
       ),
-      v && c.map((t) => /* @__PURE__ */ e.jsx(
+      v ? c.map((t) => /* @__PURE__ */ e.jsx(
         v,
         {
           file: t,
           onRemove: () => R(t)
         },
         t instanceof File ? t.name : t
-      ))
+      )) : null
     ] });
   }
 );
-V.displayName = "FileUpload";
+Q.displayName = "FileUpload";
 export {
-  V as FileUpload
+  Q as FileUpload
 };

package/dist/Icon.mjs

@@ -8,29 +8,29 @@ const g = i`
     stroke: inherit;
     fill: none;
   }
-`, f = i`
+`, u = i`
   g,
   path {
     stroke: none;
   }
-`, n = d.svgBox(({ isFlag: o, size: s = "md", stroked: r, theme: t }) => {
+`, l = d.svgBox(({ isFlag: o, size: s = "md", stroked: r, theme: t }) => {
   const e = t.icons[s] || s;
   return i`
-    ${!o && (r ? g : f)};
+    ${!o && (r ? g : u)};
     width: ${e};
     height: ${e};
   `;
-}), u = m(
-  ({ content: o, dataTestId: s, size: r = "md", title: t, ...e }, l) => {
+}), f = m(
+  ({ content: o, dataTestId: s, size: r = "md", title: t, ...e }, n) => {
     const c = e.className || "";
     return o ? /* @__PURE__ */ a.jsx(
-      n,
+      l,
       {
         alt: t,
         dangerouslySetInnerHTML: { __html: o.block },
-        "data-testid": s && `icon-${s}`,
+        "data-testid": s ? `icon-${s}` : null,
         isFlag: o.isFlag,
-        ref: l,
+        ref: n,
         role: "img",
         size: r,
         stroked: o.stroked,
@@ -42,9 +42,9 @@ const g = i`
     ) : null;
   }
 );
-u.displayName = "Icon";
-const k = n;
+f.displayName = "Icon";
+const k = l;
 export {
-  u as Icon,
+  f as Icon,
   k as StyledIcon
 };

package/dist/IconsFont.mjs

@@ -336,7 +336,7 @@ const e = a.iBox(
       {
         ...n,
         className: `${F} wui-icon-font`,
-        "data-testid": n.dataTestId && `icon-font-${n.dataTestId}`,
+        "data-testid": n.dataTestId ? `icon-font-${n.dataTestId}` : null,
         name: t
       }
     );