welcome-ui 8.1.0-alpha.3 → 8.1.1

package/dist/Tag.mjs

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

package/dist/Text.mjs

@@ -1,7 +1,7 @@
 "use client";
-import { j as p } from "./jsx-runtime-B7I4PJ0H.mjs";
+import p from "react";
+import f, { th as d, system as b, css as l } from "@xstyled/styled-components";
 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) => i`
+}, k = (e) => l`
   /* stylelint-disable-next-line value-no-vendor-prefix */
   display: -webkit-box;
   /* stylelint-disable-next-line property-no-vendor-prefix */
@@ -20,46 +20,44 @@ const g = {
   line-height: normal;
   overflow: hidden;
   word-break: ${e === 1 ? "break-all" : null};
-`, y = b.pBox(
-  ({ lines: e, theme: n, variant: t = "md", 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};
+`, 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`
+    ${d(`texts.${h || t}`)};
+    word-break: ${o};
 
-      /* Start fallback for non-webkit */
-      display: block;
-      ${e && e !== 1 / 0 && k(e)};
-      /* End fallback for non-webkit */
+    /* Start fallback for non-webkit */
+    display: block;
+    ${e && e !== 1 / 0 && k(e)};
+    /* End fallback for non-webkit */
 
-      ${l && r && i`
+    ${s && r && l`
+      display: flex;
+
+      &:before {
+        content: '';
+        width: 16;
+        height: 4;
         display: flex;
+        align-self: center;
+        flex-shrink: 0;
+        background-color: primary-40;
+        margin-right: md;
+      }
+    `}
 
-        &:before {
-          content: '';
-          width: 16;
-          height: 4;
-          display: flex;
-          align-self: center;
-          flex-shrink: 0;
-          background-color: primary-40;
-          margin-right: md;
-        }
-      `}
+    @media (min-width: lg) {
+      ${d(`texts.${t}`)};
+      ${b}
+    }
 
-      @media (min-width: lg) {
-        ${d(`texts.${t}`)};
-        ${f}
+    ${i && l`
+      & {
+        line-height: 1.4;
       }
-
-      ${s && i`
-        & {
-          line-height: 1.4;
-        }
-      `}
-    `;
-  }
-), w = {
+    `}
+  `;
+}), w = {
   h0: "h1",
   h1: "h1",
   h2: "h2",
@@ -70,35 +68,35 @@ const g = {
   lg: "p",
   md: "p",
   sm: "p",
+  xs: "p",
   "subtitle-md": "span",
-  "subtitle-sm": "span",
-  xs: "p"
+  "subtitle-sm": "span"
 }, $ = x(
   ({
     as: e,
     children: n,
     dataTestId: t,
-    lines: l,
+    lines: s,
     variant: o = "md",
     withDash: h,
     wordBreak: r = "break-word",
-    ...s
+    ...i
   }, a) => {
-    const m = e || w[o], c = s.className || "";
-    return /* @__PURE__ */ p.jsx(
+    const c = e || w[o], m = i.className || "";
+    return /* @__PURE__ */ p.createElement(
       y,
       {
-        as: m,
+        as: c,
         "data-testid": t,
-        lines: l,
+        lines: s,
         ref: a,
         variant: o,
         withDash: h,
         wordBreak: r,
-        ...s,
-        className: `${c} wui-text`,
-        children: n
-      }
+        ...i,
+        className: `${m} wui-text`
+      },
+      n
     );
   }
 );

package/dist/Textarea.mjs

@@ -1,54 +1,54 @@
 "use client";
-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-BVlRlvuu.mjs";
-const F = j.textareaBox.withConfig({ shouldForwardProp: w })(
-  ({ size: t, variant: e }) => T`
-    ${$({ size: t, variant: e })};
-    ${y("textareas")};
+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")};
     line-height: lg;
   `
-), R = g(
+), _ = F(
   ({
-    autoFocus: t,
-    dataTestId: e,
-    disabled: r,
-    maxLength: a,
+    autoFocus: e,
+    dataTestId: t,
+    disabled: a,
+    maxLength: r,
     minRows: o = 5,
     name: s,
-    onBlur: i,
-    onChange: d,
-    onFocus: m,
-    onKeyDown: x,
-    placeholder: l,
-    size: f = "md",
-    value: p,
-    variant: n,
-    ...h
-  }, c) => /* @__PURE__ */ u.jsx(
-    F,
+    onBlur: d,
+    onChange: i,
+    onFocus: l,
+    onKeyDown: m,
+    placeholder: f,
+    size: p = "md",
+    value: x,
+    variant: c,
+    ...n
+  }, h) => /* @__PURE__ */ u.createElement(
+    R,
     {
-      autoFocus: t,
-      "data-testid": e,
-      disabled: r,
-      maxLength: a,
+      autoFocus: e,
+      "data-testid": t,
+      disabled: a,
+      maxLength: r,
       name: s,
-      onBlur: i,
-      onChange: d,
-      onFocus: m,
-      onKeyDown: x,
-      placeholder: l,
-      ref: c,
+      onBlur: d,
+      onChange: i,
+      onFocus: l,
+      onKeyDown: m,
+      placeholder: f,
+      ref: h,
       rows: o,
-      size: f,
-      value: p,
-      variant: n,
-      ...h
+      size: p,
+      value: x,
+      variant: c,
+      ...n
     }
   )
 );
-R.displayName = "Textarea";
+_.displayName = "Textarea";
 export {
-  R as Textarea
+  _ as Textarea
 };

package/dist/TimePicker.mjs

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