welcome-ui 8.0.0 → 8.1.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, { css as n, th as i, system as w } 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-DBSD-X5-.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 A } from "./index-C7zM96J_.mjs";
-const E = (e, t, s) => n`
-  ${i(`tags.shape.${e}`)}
+import { o as h } from "./overflow-ellipsis-DGV5Kgt-.mjs";
+const A = (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({
-  shouldForwardProp: (e) => !["hasClickAction", "hasLink", "hasRemoveAction"].includes(e)
+`, m = p.div.withConfig({
+  shouldForwardProp: (i) => !["hasClickAction", "hasLink", "hasRemoveAction"].includes(i)
 })(
-  ({ h: e, hasClickAction: t, hasLink: s, hasRemoveAction: c, length: a, size: o, variant: r, w: l }) => n`
-    ${i("tags.default")};
-    ${i(`tags.variants.${r}`)};
-    ${i(`tags.sizes.${o}`)}
+  ({ h: i, hasClickAction: t, hasLink: e, hasRemoveAction: c, length: a, size: s, variant: r, w: l }) => n`
+    ${o("tags.default")};
+    ${o(`tags.variants.${r}`)};
+    ${o(`tags.sizes.${s}`)}
     position: relative;
     display: inline-flex;
     align-items: center;
@@ -28,26 +28,26 @@ const E = (e, t, s) => n`
     line-height: initial; /* avoid cropped font */
     transition: medium;
     max-width: 100%;
-    ${p}
-    ${w}
+    ${h}
+    ${b}
     ${a !== 1 && n`
       span,
       p {
-        ${p}
+        ${h}
       }
     `}
     ${a === 1 && n`
       justify-content: center;
-      ${E(o, l, e)};
+      ${A(s, l, i)};
     `};
 
-    ${(s || t) && n`
+    ${(e || t) && n`
       cursor: pointer;
       text-decoration: none;
 
       &:hover,
       &:focus {
-        ${i(`tags.hover.${r}`)};
+        ${o(`tags.hover.${r}`)};
       }
     `};
 
@@ -60,15 +60,15 @@ const E = (e, t, s) => n`
     }
 
     & > svg {
-      width: ${i(`tags.icon.${o}`)};
-      height: ${i(`tags.icon.${o}`)};
+      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 ${i.transition("medium")};
+        transition: opacity ${o.transition("medium")};
         cursor: pointer;
 
         &:hover {
@@ -77,10 +77,10 @@ const E = (e, t, s) => n`
       }
     }
   `
-), I = m.divBox(
-  ({ size: e }) => n`
+), I = p.divBox(
+  ({ size: i }) => n`
     position: absolute;
-    ${i(`tags.sizes.${e}`)};
+    ${o(`tags.sizes.${i}`)};
     top: 0;
     bottom: 0;
     right: 0;
@@ -88,48 +88,50 @@ const E = (e, t, s) => n`
     align-items: center;
     justify-content: center;
   `
-), k = m.buttonBox`
+), k = p.buttonBox`
   all: unset;
   display: flex;
-`, R = b(
+`, R = w(
   ({
-    as: e,
+    as: i,
     children: t,
-    dataTestId: s,
+    dataTestId: e,
     href: c,
     onClick: a,
-    onRemove: o,
+    onRemove: s,
     size: r = "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 = !!c || !!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 = !!c || !!l;
+    return /* @__PURE__ */ d.jsxs(
+      m,
       {
-        as: e,
-        "data-testid": s,
+        as: i,
+        "data-testid": e,
         hasClickAction: !!a,
         hasLink: v,
-        hasRemoveAction: !!o,
+        hasRemoveAction: !!s,
         href: c,
-        length: x,
+        length: y,
         onClick: a,
         ref: u,
         size: r,
         to: l,
         variant: $,
-        ...f
-      },
-      y,
-      !!o && /* @__PURE__ */ d.createElement(I, { size: r }, /* @__PURE__ */ d.createElement(k, { onClick: o, title: "Remove", type: "button" }, /* @__PURE__ */ d.createElement(A, { size: "xs", title: "Remove" })))
+        ...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" }) }) })
+        ]
+      }
     );
   }
 );
 R.displayName = "Tag";
-const P = h;
+const q = m;
 export {
-  P as StyledTag,
+  q as StyledTag,
   R as Tag
 };

package/dist/Text.mjs

@@ -1,7 +1,7 @@
 "use client";
-import p from "react";
-import f, { css as l, th as d, system as b } 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,44 +20,46 @@ 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`
-    ${d(`texts.${h || t}`)};
-    word-break: ${o};
+`, 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};
 
-    /* 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 */
 
-    ${s && r && l`
-      display: flex;
-
-      &:before {
-        content: '';
-        width: 16;
-        height: 4;
+      ${l && r && i`
         display: flex;
-        align-self: center;
-        flex-shrink: 0;
-        background-color: primary-40;
-        margin-right: md;
-      }
-    `}
 
-    @media (min-width: lg) {
-      ${d(`texts.${t}`)};
-      ${b}
-    }
+        &:before {
+          content: '';
+          width: 16;
+          height: 4;
+          display: flex;
+          align-self: center;
+          flex-shrink: 0;
+          background-color: primary-40;
+          margin-right: md;
+        }
+      `}
 
-    ${i && l`
-      & {
-        line-height: 1.4;
+      @media (min-width: lg) {
+        ${d(`texts.${t}`)};
+        ${f}
       }
-    `}
-  `;
-}), w = {
+
+      ${s && i`
+        & {
+          line-height: 1.4;
+        }
+      `}
+    `;
+  }
+), w = {
   h0: "h1",
   h1: "h1",
   h2: "h2",
@@ -68,35 +70,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 m = e || w[o], c = s.className || "";
+    return /* @__PURE__ */ p.jsx(
       y,
       {
-        as: c,
+        as: m,
         "data-testid": t,
-        lines: s,
+        lines: l,
         ref: a,
         variant: o,
         withDash: h,
         wordBreak: r,
-        ...i,
-        className: `${m} wui-text`
-      },
-      n
+        ...s,
+        className: `${c} wui-text`,
+        children: n
+      }
     );
   }
 );

package/dist/Textarea.mjs

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