welcome-ui 8.0.0-alpha.0 → 8.1.0-alpha.0

package/dist/Field.mjs

@@ -1,47 +1,48 @@
 "use client";
-import i from "react";
-import { u as P } from "./use-isomorphic-layout-effect-Izr-e2pi.mjs";
-import c, { css as n, th as s } from "@xstyled/styled-components";
-import { StyledLabel as H, Label as j } from "./Label.mjs";
+import { j as n } from "./jsx-runtime-B7I4PJ0H.mjs";
+import F from "react";
+import { Hint as v } from "./Hint.mjs";
+import { StyledLabel as P, Label as H } from "./Label.mjs";
 import { shouldForwardProp as z, forwardRef as C } from "./System.mjs";
 import { VariantIcon as D } from "./VariantIcon.mjs";
-import { Hint as F } from "./Hint.mjs";
-const V = n`
-  ${s("defaultFields.checkablelabel.default")};
+import { u as V } from "./use-isomorphic-layout-effect-Izr-e2pi.mjs";
+import c, { th as i, css as s } from "@xstyled/styled-components";
+const Y = s`
+  ${i("defaultFields.checkablelabel.default")};
   align-items: flex-start;
   overflow-wrap: break-word;
-`, Y = c.divBox.withConfig({ shouldForwardProp: z })(
-  ({ checked: t, isCheckable: e, isRadioGroup: a, withHintText: m }) => n`
-    ${e && n`
+`, _ = c.divBox.withConfig({ shouldForwardProp: z })(
+  ({ checked: t, isCheckable: o, isRadioGroup: r, withHintText: m }) => s`
+    ${o && s`
       input {
         margin-top: xs;
       }
     `}
-    ${H} {
-      ${e && V};
-      ${e && m && s("defaultFields.checkablelabel.default")}
-      ${t && s("defaultFields.checkablelabel.checked")}
-      ${!e && n`
+    ${P} {
+      ${o && Y};
+      ${o && m && i("defaultFields.checkablelabel.default")}
+      ${t && i("defaultFields.checkablelabel.checked")}
+      ${!o && s`
         margin-bottom: sm;
       `}
-      ${a && n`
+      ${r && s`
         margin-bottom: md;
       `}
     }
   `
-), _ = c.div`
+), M = c.div`
   display: flex;
   align-items: flex-start;
   gap: sm;
-`, M = c.divBox`
+`, O = c.divBox`
   display: flex;
   flex-direction: column;
-`, O = c.divBox(
-  ({ iconPlacement: t, size: e }) => n`
+`, q = c.divBox(
+  ({ iconPlacement: t, size: o }) => s`
     position: absolute;
     top: 0;
-    left: ${t === "left" ? s(`defaultFields.iconPlacement.${e}.left`) : "auto"};
-    right: ${t === "right" ? s(`defaultFields.iconPlacement.${e}.right`) : "auto"};
+    left: ${t === "left" ? i(`defaultFields.iconPlacement.${o}.left`) : "auto"};
+    right: ${t === "right" ? i(`defaultFields.iconPlacement.${o}.right`) : "auto"};
     bottom: 0;
     display: flex;
     justify-content: center;
@@ -56,15 +57,15 @@ const V = n`
       pointer-events: auto;
     }
 
-    ${e === "xs" && n`
+    ${o === "xs" && s`
       button {
-        height: ${s("buttons.sizes.xxs.height")};
-        width: ${s("buttons.sizes.xxs.height")};
+        height: ${i("buttons.sizes.xxs.height")};
+        width: ${i("buttons.sizes.xxs.height")};
       }
     `}
   `
-), q = c.divBox(
-  ({ size: t }) => n`
+), A = c.divBox(
+  ({ size: t }) => s`
     position: absolute;
     padding: 0;
     top: 0;
@@ -74,102 +75,113 @@ const V = n`
     align-items: center;
     gap: xs;
     color: neutral-90;
-    ${t === "xs" && n`
+    ${t === "xs" && s`
       button {
-        height: ${s("buttons.sizes.xxs.height")};
-        width: ${s("buttons.sizes.xxs.height")};
+        height: ${i("buttons.sizes.xxs.height")};
+        width: ${i("buttons.sizes.xxs.height")};
       }
     `}
   `
-), A = {
+), J = {
   Checkbox: "checkbox",
-  Radio: "radio",
   InputText: "text",
+  Radio: "radio",
   RadioTab: "radio",
   Select: "text",
   Toggle: "checkbox"
-}, J = (t) => A[t] || t, K = ({
+}, K = (t) => J[t] || t, Q = ({
   error: t,
-  success: e,
-  warning: a
+  success: o,
+  warning: r
 }) => {
   if (t) return "danger";
-  if (a) return "warning";
-  if (e) return "success";
-}, Q = () => `wui-field-${Math.random().toString(36).slice(2)}`, U = ["disabled", "required", "variant"], X = C(
+  if (r) return "warning";
+  if (o) return "success";
+}, U = () => `wui-field-${Math.random().toString(36).slice(2)}`, X = ["disabled", "required", "variant"], Z = C(
   ({
     children: t,
-    dataTestId: e,
-    disabled: a,
+    dataTestId: o,
+    disabled: r,
     disabledIcon: m,
     error: u,
     flexDirection: w,
     hint: k,
-    label: f,
-    required: h,
-    success: x,
-    transparent: E,
+    label: x,
+    required: f,
+    success: h,
+    transparent: j,
     warning: b,
-    ...v
-  }, I) => {
-    const d = J(t.props.type || t.type.displayName), R = d === "radio", g = d === "RadioGroup", T = d === "FieldGroup", G = d === "checkbox", B = t.type.displayName === "Toggle", o = R || G || B, L = w || (o ? "row" : "column"), S = T || g, r = K({ error: u, warning: b, success: x }), l = r ? u || b || x : k, W = !!l, p = t.props.id || t.props.name || Q(), $ = i.cloneElement(i.Children.only(t), {
-      disabled: a,
+    ...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,
       id: p,
-      required: h,
-      variant: r,
-      transparent: E,
+      required: f,
+      transparent: j,
+      variant: a,
       ...S ? { flexDirection: L } : {}
     });
-    return P(() => {
+    return V(() => {
       Object.keys(t.props).forEach((y) => {
-        if (U.includes(y)) {
+        if (X.includes(y)) {
           const N = document.getElementById(p);
           console.warn(`You must pass the "${y}" prop to the <Field /> instead of`, N);
         }
       });
-    }, [t.props, t.type.displayName, p]), /* @__PURE__ */ i.createElement(
-      Y,
+    }, [t.props, t.type.displayName, p]), /* @__PURE__ */ n.jsxs(
+      _,
       {
-        ref: I,
-        ...v,
-        "data-testid": e,
-        isCheckable: o,
+        ref: G,
+        ...R,
+        "data-testid": o,
+        isCheckable: e,
         isRadioGroup: g,
-        withHintText: W
-      },
-      /* @__PURE__ */ i.createElement(_, null, o && $, /* @__PURE__ */ i.createElement(M, null, f && /* @__PURE__ */ i.createElement(
-        j,
-        {
-          checkableField: o,
-          disabled: a,
-          disabledIcon: m,
-          htmlFor: p,
-          required: h,
-          variant: r,
-          withDisabledIcon: !o
-        },
-        o && /* @__PURE__ */ i.createElement(D, { size: "sm", variant: r }),
-        f
-      ), o && l && /* @__PURE__ */ i.createElement(
-        F,
-        {
-          checkableField: !0,
-          dataTestId: e ? `${e}-hint` : void 0,
-          mt: "0",
-          variant: r
-        },
-        l
-      ))),
-      !o && $,
-      !o && l && /* @__PURE__ */ i.createElement(F, { dataTestId: e ? `${e}-hint` : void 0, variant: r }, l)
+        withHintText: W,
+        children: [
+          /* @__PURE__ */ n.jsxs(M, { children: [
+            e && $,
+            /* @__PURE__ */ n.jsxs(O, { children: [
+              x && /* @__PURE__ */ n.jsxs(
+                H,
+                {
+                  checkableField: e,
+                  dataTestId: o ? `${o}-label` : void 0,
+                  disabled: r,
+                  disabledIcon: m,
+                  htmlFor: p,
+                  required: f,
+                  variant: a,
+                  withDisabledIcon: !e,
+                  children: [
+                    e && /* @__PURE__ */ n.jsx(D, { size: "sm", variant: a }),
+                    x
+                  ]
+                }
+              ),
+              e && l && /* @__PURE__ */ n.jsx(
+                v,
+                {
+                  checkableField: !0,
+                  dataTestId: o ? `${o}-hint` : void 0,
+                  mt: "0",
+                  variant: a,
+                  children: l
+                }
+              )
+            ] })
+          ] }),
+          !e && $,
+          !e && l && /* @__PURE__ */ n.jsx(v, { dataTestId: o ? `${o}-hint` : void 0, variant: a, children: l })
+        ]
+      }
     );
   }
 );
-X.displayName = "Field";
-const at = O, rt = q;
+Z.displayName = "Field";
+const lt = q, ct = A;
 export {
-  X as Field,
-  rt as IconGroupWrapper,
-  at as IconWrapper,
-  J as getBaseType
+  Z as Field,
+  ct as IconGroupWrapper,
+  lt as IconWrapper,
+  K as getBaseType
 };

package/dist/FieldGroup.mjs

@@ -1,9 +1,9 @@
 "use client";
-import t from "react";
-import l, { th as a } from "@xstyled/styled-components";
-import { shouldForwardProp as n, forwardRef as p } from "./System.mjs";
-import { Label as s } from "./Label.mjs";
-const i = l.fieldsetBox.withConfig({ shouldForwardProp: n })`
+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 p, { th as a } from "@xstyled/styled-components";
+const o = p.fieldsetBox.withConfig({ shouldForwardProp: l })`
   width: 100%;
   min-width: 0;
   min-height: 0;
@@ -14,12 +14,15 @@ const i = l.fieldsetBox.withConfig({ shouldForwardProp: n })`
   > * {
     margin-bottom: md;
   }
-`, f = p(
-  ({ children: o, dataTestId: d, label: e, required: r }, m) => /* @__PURE__ */ t.createElement(i, { "data-testid": d, ref: m }, e && /* @__PURE__ */ t.createElement(s, { as: "legend", required: r }, e), o)
+`, 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 }),
+    d
+  ] })
 );
 f.displayName = "FieldGroup";
-const F = i;
+const x = o;
 export {
   f as FieldGroup,
-  F as StyledFieldGroup
+  x as StyledFieldGroup
 };