welcome-ui 8.1.3 → 8.2.0-alpha.1

package/dist/Tag.mjs

@@ -1,26 +1,26 @@
 "use client";
-import d from "react";
-import { w as C } from "./wrap-children-aq69jtFP.mjs";
-import m, { th as o, system as w, css as n } from "@xstyled/styled-components";
-import { o as p } from "./overflow-ellipsis-DGV5Kgt-.mjs";
+import { j as d } from "./jsx-runtime-B7I4PJ0H.mjs";
+import { StyledIcon as j } from "./Icon.mjs";
+import { C } from "./index-BaLGEKs7.mjs";
+import { forwardRef as w } from "./System.mjs";
+import { w as S } from "./wrap-children-CzmhoRzd.mjs";
+import p, { th as o, system as b, css as n } from "@xstyled/styled-components";
 import { g } from "./get-max-width-height-DoUro2T7.mjs";
-import { StyledIcon as S } from "./Icon.mjs";
-import { forwardRef as b } from "./System.mjs";
-import { C as E } from "./index-C7zM96J_.mjs";
-const I = (i, t, s) => n`
+import { o as h } from "./overflow-ellipsis-DGV5Kgt-.mjs";
+const I = (i, t, e) => n`
   ${o(`tags.shape.${i}`)}
   padding: 0;
-  ${(t || s) && n`
-    width: ${g(t || "0", s)};
-    height: ${g(t || "0", s)};
+  ${(t || e) && n`
+    width: ${g(t || "0", e)};
+    height: ${g(t || "0", e)};
   `}
-`, h = m.div.withConfig({
+`, m = p.div.withConfig({
   shouldForwardProp: (i) => !["hasClickAction", "hasLink", "hasRemoveAction"].includes(i)
 })(
-  ({ h: i, hasClickAction: t, hasLink: s, hasRemoveAction: a, length: r, size: e, variant: c, w: l }) => n`
+  ({ h: i, hasClickAction: t, hasLink: e, hasRemoveAction: r, length: a, size: s, variant: c, w: l }) => n`
     ${o("tags.default")};
     ${o(`tags.variants.${c}`)};
-    ${o(`tags.sizes.${e}`)}
+    ${o(`tags.sizes.${s}`)}
     position: relative;
     display: inline-flex;
     align-items: center;
@@ -28,20 +28,20 @@ const I = (i, t, s) => n`
     line-height: initial; /* avoid cropped font */
     transition: medium;
     max-width: 100%;
-    ${p}
-    ${w}
-    ${r !== 1 && n`
+    ${h}
+    ${b}
+    ${a !== 1 && n`
       span,
       p {
-        ${p}
+        ${h}
       }
     `}
-    ${r === 1 && !a && n`
+    ${a === 1 && !r && n`
       justify-content: center;
-      ${I(e, l, i)};
+      ${I(s, l, i)};
     `};
 
-    ${(s || t) && n`
+    ${(e || t) && n`
       cursor: pointer;
       text-decoration: none;
 
@@ -51,7 +51,7 @@ const I = (i, t, s) => n`
       }
     `};
 
-    ${a && n`
+    ${r && n`
       padding-right: xl;
     `}
 
@@ -60,13 +60,13 @@ const I = (i, t, s) => n`
     }
 
     & > svg {
-      width: ${o(`tags.icon.${e}`)};
-      height: ${o(`tags.icon.${e}`)};
+      width: ${o(`tags.icon.${s}`)};
+      height: ${o(`tags.icon.${s}`)};
     }
 
     > *:not(:only-child) {
       ${/* sc-selector */
-  S}:last-child {
+  j}:last-child {
         opacity: 1;
         transition: opacity ${o.transition("medium")};
         cursor: pointer;
@@ -77,7 +77,7 @@ const I = (i, t, s) => n`
       }
     }
   `
-), k = m.divBox(
+), k = p.divBox(
   ({ size: i }) => n`
     position: absolute;
     ${o(`tags.sizes.${i}`)};
@@ -88,48 +88,50 @@ const I = (i, t, s) => n`
     align-items: center;
     justify-content: center;
   `
-), A = m.buttonBox`
+), A = p.buttonBox`
   all: unset;
   display: flex;
-`, T = b(
+`, T = w(
   ({
     as: i,
     children: t,
-    dataTestId: s,
-    href: a,
-    onClick: r,
-    onRemove: e,
+    dataTestId: e,
+    href: r,
+    onClick: a,
+    onRemove: s,
     size: c = "md",
     to: l,
     variant: $ = "default",
     ...f
   }, u) => {
-    const y = C(t), x = !!(t || t === 0) && ["number", "string"].includes(typeof t) ? t.toString().length : void 0, v = !!a || !!l;
-    return /* @__PURE__ */ d.createElement(
-      h,
+    const x = S(t), y = !!(t || t === 0) && ["number", "string"].includes(typeof t) ? t.toString().length : void 0, v = !!r || !!l;
+    return /* @__PURE__ */ d.jsxs(
+      m,
       {
         as: i,
-        "data-testid": s,
-        hasClickAction: !!r,
+        "data-testid": e,
+        hasClickAction: !!a,
         hasLink: v,
-        hasRemoveAction: !!e,
-        href: a,
-        length: x,
-        onClick: r,
+        hasRemoveAction: !!s,
+        href: r,
+        length: y,
+        onClick: a,
         ref: u,
         size: c,
         to: l,
         variant: $,
-        ...f
-      },
-      y,
-      !!e && /* @__PURE__ */ d.createElement(k, { size: c }, /* @__PURE__ */ d.createElement(A, { onClick: e, title: "Remove", type: "button" }, /* @__PURE__ */ d.createElement(E, { size: "xs", title: "Remove" })))
+        ...f,
+        children: [
+          x,
+          !!s && /* @__PURE__ */ d.jsx(k, { size: c, children: /* @__PURE__ */ d.jsx(A, { onClick: s, title: "Remove", type: "button", children: /* @__PURE__ */ d.jsx(C, { size: "xs", title: "Remove" }) }) })
+        ]
+      }
     );
   }
 );
 T.displayName = "Tag";
-const P = h;
+const q = m;
 export {
-  P as StyledTag,
+  q as StyledTag,
   T as Tag
 };

package/dist/Text.mjs

@@ -1,7 +1,7 @@
 "use client";
-import p from "react";
-import f, { th as d, system as b, css as l } from "@xstyled/styled-components";
+import { j as p } from "./jsx-runtime-B7I4PJ0H.mjs";
 import { forwardRef as x } from "./System.mjs";
+import b, { th as d, system as f, css as i } from "@xstyled/styled-components";
 const g = {
   h0: "h1",
   h1: "h2",
@@ -10,7 +10,7 @@ const g = {
   h4: "h5",
   h5: "h6",
   h6: "h6"
-}, k = (e) => l`
+}, k = (e) => i`
   /* stylelint-disable-next-line value-no-vendor-prefix */
   display: -webkit-box;
   /* stylelint-disable-next-line property-no-vendor-prefix */
@@ -20,9 +20,9 @@ const g = {
   line-height: normal;
   overflow: hidden;
   word-break: ${e === 1 ? "break-all" : null};
-`, y = f.pBox(({ lines: e, theme: n, variant: t, withDash: s, wordBreak: o }) => {
-  const h = g[t], r = t == null ? void 0 : t.startsWith("h"), i = e && e !== 1 / 0 && t.startsWith("h") && n.fonts.headings.includes("welcome-font");
-  return l`
+`, y = b.pBox(({ lines: e, theme: n, variant: t, withDash: l, wordBreak: o }) => {
+  const h = g[t], r = t == null ? void 0 : t.startsWith("h"), s = e && e !== 1 / 0 && t.startsWith("h") && n.fonts.headings.includes("welcome-font");
+  return i`
     ${d(`texts.${h || t}`)};
     word-break: ${o};
 
@@ -31,7 +31,7 @@ const g = {
     ${e && e !== 1 / 0 && k(e)};
     /* End fallback for non-webkit */
 
-    ${s && r && l`
+    ${l && r && i`
       display: flex;
 
       &:before {
@@ -48,10 +48,10 @@ const g = {
 
     @media (min-width: lg) {
       ${d(`texts.${t}`)};
-      ${b}
+      ${f}
     }
 
-    ${i && l`
+    ${s && i`
       & {
         line-height: 1.4;
       }
@@ -68,35 +68,35 @@ const g = {
   lg: "p",
   md: "p",
   sm: "p",
-  xs: "p",
   "subtitle-md": "span",
-  "subtitle-sm": "span"
+  "subtitle-sm": "span",
+  xs: "p"
 }, $ = x(
   ({
     as: e,
     children: n,
     dataTestId: t,
-    lines: s,
+    lines: l,
     variant: o = "md",
     withDash: h,
     wordBreak: r = "break-word",
-    ...i
+    ...s
   }, a) => {
-    const c = e || w[o], m = i.className || "";
-    return /* @__PURE__ */ p.createElement(
+    const c = e || w[o], m = s.className || "";
+    return /* @__PURE__ */ p.jsx(
       y,
       {
         as: c,
         "data-testid": t,
-        lines: s,
+        lines: l,
         ref: a,
         variant: o,
         withDash: h,
         wordBreak: r,
-        ...i,
-        className: `${m} wui-text`
-      },
-      n
+        ...s,
+        className: `${m} wui-text`,
+        children: n
+      }
     );
   }
 );

package/dist/Textarea.mjs

@@ -1,54 +1,54 @@
 "use client";
-import u from "react";
-import w, { th as g, css as y } from "@xstyled/styled-components";
-import { d as T } from "./field-styles-CfVLcVQp.mjs";
-import { shouldForwardProp as $, forwardRef as F } from "./System.mjs";
-const R = w.textareaBox.withConfig({ shouldForwardProp: $ })(
-  ({ size: e, variant: t }) => y`
-    ${T({ size: e, variant: t })};
-    ${g("textareas")};
+import { j as u } from "./jsx-runtime-B7I4PJ0H.mjs";
+import { shouldForwardProp as w, forwardRef as g } from "./System.mjs";
+import j, { th as y, css as T } from "@xstyled/styled-components";
+import { d as $ } from "./field-styles-CfVLcVQp.mjs";
+const F = j.textareaBox.withConfig({ shouldForwardProp: w })(
+  ({ size: t, variant: e }) => T`
+    ${$({ size: t, variant: e })};
+    ${y("textareas")};
     line-height: lg;
   `
-), _ = F(
+), R = g(
   ({
-    autoFocus: e,
-    dataTestId: t,
-    disabled: a,
-    maxLength: r,
+    autoFocus: t,
+    dataTestId: e,
+    disabled: r,
+    maxLength: a,
     minRows: o = 5,
     name: s,
-    onBlur: d,
-    onChange: i,
-    onFocus: l,
-    onKeyDown: m,
-    placeholder: f,
-    size: p = "md",
-    value: x,
-    variant: c,
-    ...n
-  }, h) => /* @__PURE__ */ u.createElement(
-    R,
+    onBlur: i,
+    onChange: d,
+    onFocus: m,
+    onKeyDown: x,
+    placeholder: l,
+    size: f = "md",
+    value: p,
+    variant: n,
+    ...h
+  }, c) => /* @__PURE__ */ u.jsx(
+    F,
     {
-      autoFocus: e,
-      "data-testid": t,
-      disabled: a,
-      maxLength: r,
+      autoFocus: t,
+      "data-testid": e,
+      disabled: r,
+      maxLength: a,
       name: s,
-      onBlur: d,
-      onChange: i,
-      onFocus: l,
-      onKeyDown: m,
-      placeholder: f,
-      ref: h,
+      onBlur: i,
+      onChange: d,
+      onFocus: m,
+      onKeyDown: x,
+      placeholder: l,
+      ref: c,
       rows: o,
-      size: p,
-      value: x,
-      variant: c,
-      ...n
+      size: f,
+      value: p,
+      variant: n,
+      ...h
     }
   )
 );
-_.displayName = "Textarea";
+R.displayName = "Textarea";
 export {
-  _ as Textarea
+  R as Textarea
 };

package/dist/TimePicker.mjs

@@ -1,88 +1,89 @@
 "use client";
-import c, { useState as T, useEffect as E } from "react";
-import M from "@xstyled/styled-components";
-import { f as Y, g as w, D as I, a as L, b as O, c as U } from "./CustomInput-IA_gVoXd.mjs";
-import { forwardRef as W } from "./System.mjs";
-const $ = M.div`
+import { j as l } from "./jsx-runtime-B7I4PJ0H.mjs";
+import { useState as T, useEffect as x } from "react";
+import { f as M, g as Y, D as w, a as I, c as L, b as O } from "./CustomPopper-DezjKb9n.mjs";
+import { forwardRef as U } from "./System.mjs";
+import W from "@xstyled/styled-components";
+const _ = W.div`
   position: relative;
-  ${Y}
-`, j = W(
+  ${M}
+`, $ = U(
   ({
-    autoFocus: k,
-    dataTestId: y,
-    dateFormat: D = "HH:mm",
-    disabled: S,
-    icon: i,
-    iconPlacement: m = "left",
-    onBlur: o,
+    autoFocus: h,
+    dataTestId: j,
+    dateFormat: k = "HH:mm",
+    disabled: y,
+    icon: a,
+    iconPlacement: c = "left",
+    onBlur: m,
     onChange: t,
     onFocus: p,
-    placeholder: h,
-    popperProps: x,
+    placeholder: D,
+    popperProps: S,
     size: d = "md",
-    timeIntervals: n = 15,
-    transparent: F,
-    value: r = I,
-    ...u
-  }, P) => {
-    const l = (e) => w(e, n), R = h || u.placeholderText, [g, f] = T(k && "time" || null), [A, a] = T(l(r));
-    E(() => {
-      t && t(l(r));
-    }, []), E(() => {
+    timeIntervals: f = 15,
+    transparent: E,
+    value: r = w,
+    ...n
+  }, F) => {
+    const i = (e) => Y(e, f), P = D || n.placeholderText, [R, u] = T(h && "time" || null), [g, o] = T(i(r));
+    x(() => {
+      t && t(i(r));
+    }, []), x(() => {
       var s;
-      const e = l(r);
-      ((s = new Date(r)) == null ? void 0 : s.getTime()) - (e == null ? void 0 : e.getTime()) !== 0 && t && t(e), a(e);
+      const e = i(r);
+      ((s = new Date(r)) == null ? void 0 : s.getTime()) - (e == null ? void 0 : e.getTime()) !== 0 && t && t(e), o(e);
     }, [r]);
-    const N = (e) => {
-      f("time"), p && p(e);
-    }, _ = (e) => {
-      f(null), o && o(e);
+    const A = (e) => {
+      u("time"), p && p(e);
+    }, N = (e) => {
+      u(null), m && m(e);
     }, b = (e) => {
-      e.preventDefault(), a(null), t && t();
+      e.preventDefault(), o(null), t && t();
     }, H = (e) => {
       if (!e) return;
-      const s = l(e);
-      e.setFullYear(s.getFullYear(), s.getMonth(), s.getDate()), a(e), t && t(new Date(e));
+      const s = i(e);
+      e.setFullYear(s.getFullYear(), s.getMonth(), s.getDate()), o(e), t && t(new Date(e));
     };
-    return /* @__PURE__ */ c.createElement($, null, /* @__PURE__ */ c.createElement(
-      L,
+    return /* @__PURE__ */ l.jsx(_, { children: /* @__PURE__ */ l.jsx(
+      I,
       {
         calendarClassName: "time-picker-popper",
-        customInput: /* @__PURE__ */ c.createElement(
-          U,
+        customInput: /* @__PURE__ */ l.jsx(
+          O,
           {
             className: "time-picker",
-            "data-testid": y,
-            focused: g,
-            handleBlur: _,
-            handleFocus: N,
-            icon: i,
-            iconPlacement: m,
+            "data-testid": j,
+            focused: R,
+            handleBlur: N,
+            handleFocus: A,
+            icon: a,
+            iconPlacement: c,
             onReset: b,
-            ref: P,
+            ref: F,
             size: d
           }
         ),
-        dateFormat: D,
-        disabled: S,
-        iconPlacement: !!i && m,
+        dateFormat: k,
+        disabled: y,
+        iconPlacement: !!a && c,
         onChange: H,
-        placeholderText: R,
-        popperContainer: O,
-        popperProps: x,
-        selected: A,
+        placeholderText: P,
+        popperContainer: L,
+        popperProps: S,
+        selected: g,
         showTimeSelect: !0,
         showTimeSelectOnly: !0,
         size: d,
-        timeIntervals: n,
-        transparent: F,
-        ...u,
+        timeIntervals: f,
+        transparent: E,
+        ...n,
         isClearable: !1
       }
-    ));
+    ) });
   }
 );
-j.displayName = "TimePicker";
+$.displayName = "TimePicker";
 export {
-  j as TimePicker
+  $ as TimePicker
 };