welcome-ui 8.0.0-alpha.0 → 8.0.2

package/dist/Field.mjs

@@ -1,30 +1,30 @@
 "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 c, { th as n, css as s } from "@xstyled/styled-components";
 import { StyledLabel as H, Label as j } 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")};
+const V = s`
+  ${n("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`
+  ({ checked: t, isCheckable: e, isRadioGroup: a, withHintText: m }) => s`
+    ${e && s`
       input {
         margin-top: xs;
       }
     `}
     ${H} {
       ${e && V};
-      ${e && m && s("defaultFields.checkablelabel.default")}
-      ${t && s("defaultFields.checkablelabel.checked")}
-      ${!e && n`
+      ${e && m && n("defaultFields.checkablelabel.default")}
+      ${t && n("defaultFields.checkablelabel.checked")}
+      ${!e && s`
         margin-bottom: sm;
       `}
-      ${a && n`
+      ${a && s`
         margin-bottom: md;
       `}
     }
@@ -37,11 +37,11 @@ const V = n`
   display: flex;
   flex-direction: column;
 `, O = c.divBox(
-  ({ iconPlacement: t, size: e }) => n`
+  ({ iconPlacement: t, size: e }) => 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" ? n(`defaultFields.iconPlacement.${e}.left`) : "auto"};
+    right: ${t === "right" ? n(`defaultFields.iconPlacement.${e}.right`) : "auto"};
     bottom: 0;
     display: flex;
     justify-content: center;
@@ -56,15 +56,15 @@ const V = n`
       pointer-events: auto;
     }
 
-    ${e === "xs" && n`
+    ${e === "xs" && s`
       button {
-        height: ${s("buttons.sizes.xxs.height")};
-        width: ${s("buttons.sizes.xxs.height")};
+        height: ${n("buttons.sizes.xxs.height")};
+        width: ${n("buttons.sizes.xxs.height")};
       }
     `}
   `
 ), q = c.divBox(
-  ({ size: t }) => n`
+  ({ size: t }) => s`
     position: absolute;
     padding: 0;
     top: 0;
@@ -74,10 +74,10 @@ 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: ${n("buttons.sizes.xxs.height")};
+        width: ${n("buttons.sizes.xxs.height")};
       }
     `}
   `
@@ -104,20 +104,20 @@ const V = n`
     disabledIcon: m,
     error: u,
     flexDirection: w,
-    hint: k,
+    hint: v,
     label: f,
     required: h,
     success: x,
-    transparent: E,
+    transparent: k,
     warning: b,
-    ...v
+    ...E
   }, 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), {
+    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 : v, W = !!l, p = t.props.id || t.props.name || Q(), $ = i.cloneElement(i.Children.only(t), {
       disabled: a,
       id: p,
       required: h,
       variant: r,
-      transparent: E,
+      transparent: k,
       ...S ? { flexDirection: L } : {}
     });
     return P(() => {
@@ -131,7 +131,7 @@ const V = n`
       Y,
       {
         ref: I,
-        ...v,
+        ...E,
         "data-testid": e,
         isCheckable: o,
         isRadioGroup: g,