welcome-ui 0.0.0-dev.1757000517060 → 0.0.0-dev.1758380197423

package/dist/Avatar.css

@@ -0,0 +1 @@
+@layer components{._root_1glzt_2{flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;aspect-ratio:1/1;border-radius:50%;width:var(--avatar-size);height:var(--avatar-size);font-size:calc(var(--avatar-size) / 2.5);color:var(--color-neutral-90);font-weight:500}._root_1glzt_2 img{object-fit:cover;width:100%;height:100%}._size-sm_1glzt_22{--avatar-size: 1.25rem}._size-md_1glzt_25{--avatar-size: 1.875rem}._size-lg_1glzt_28{--avatar-size: 2.5rem}._size-xl_1glzt_31{--avatar-size: 3.125rem}._size-xxl_1glzt_34{--avatar-size: 3.75rem}._background-secondary-blue_1glzt_37{background-color:var(--color-secondary-blue)}._background-secondary-green_1glzt_40{background-color:var(--color-secondary-green)}._background-secondary-orange_1glzt_43{background-color:var(--color-secondary-orange)}._background-secondary-pink_1glzt_46{background-color:var(--color-secondary-pink)}._background-secondary-teal_1glzt_49{background-color:var(--color-secondary-teal)}._background-secondary-violet_1glzt_52{background-color:var(--color-secondary-violet)}}

package/dist/Avatar.js

@@ -1,60 +1,51 @@
 "use client";
-import { jsxs as x, jsx as c } from "react/jsx-runtime";
-import m, { th as v, useTheme as y } from "@xstyled/styled-components";
-import { memo as C } from "react";
-import { Box as $ } from "./Box.js";
-import { forwardRef as b } from "./System.js";
-import { Shape as A } from "./Shape.js";
-import { Text as z } from "./Text.js";
-const S = m(A)`
-  flex-shrink: 0;
-`, T = m(z)`
-  ${v("avatars.text")};
-`;
-function j(e, t = "") {
-  const r = Object.keys(e).filter((o) => o.startsWith("secondary-")), s = t.length % r.length;
-  return r[s];
-}
-function k(e = "") {
-  const [t, r] = e.split(" ");
-  return t && r ? `${t.charAt(0).toUpperCase()}${r.charAt(0).toUpperCase()}` : t.substring(0, 2).toUpperCase();
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { classNames as g } from "./utils.js";
+const i = "_root_1glzt_2", _ = {
+  root: i,
+  "size-sm": "_size-sm_1glzt_22",
+  "size-md": "_size-md_1glzt_25",
+  "size-lg": "_size-lg_1glzt_28",
+  "size-xl": "_size-xl_1glzt_31",
+  "size-xxl": "_size-xxl_1glzt_34",
+  "background-secondary-blue": "_background-secondary-blue_1glzt_37",
+  "background-secondary-green": "_background-secondary-green_1glzt_40",
+  "background-secondary-orange": "_background-secondary-orange_1glzt_43",
+  "background-secondary-pink": "_background-secondary-pink_1glzt_46",
+  "background-secondary-teal": "_background-secondary-teal_1glzt_49",
+  "background-secondary-violet": "_background-secondary-violet_1glzt_52"
+};
+function u(e = "") {
+  const [o, r] = e.split(" ");
+  return o && r ? `${o.charAt(0).toUpperCase()}${r.charAt(0).toUpperCase()}` : o.substring(0, 2).toUpperCase();
 }
-const I = C(
-  b(
-    ({
-      color: e,
-      fontSize: t,
-      getInitials: r = k,
-      h: s,
-      name: o,
-      shape: p = "circle",
-      size: f = "md",
-      src: a,
-      w: i,
-      ...h
-    }, d) => {
-      const n = y(), u = e || j(n.colors, o), l = n.avatars.sizes[f], g = t || `calc(${i ? n.toRem(i) : l} / 2.5)`;
-      return /* @__PURE__ */ x(
-        S,
-        {
-          "aria-label": o,
-          backgroundColor: u,
-          h: s || l,
-          ref: d,
-          role: "img",
-          shape: p,
-          w: i || l,
-          ...h,
-          children: [
-            a ? /* @__PURE__ */ c("img", { alt: o, src: a }) : null,
-            !a && /* @__PURE__ */ c($, { children: /* @__PURE__ */ c(T, { fontSize: g, m: 0, children: r(o) }) })
-          ]
-        }
-      );
-    }
-  )
+const z = (e) => {
+  const o = e.length % c.length;
+  return c[o];
+}, y = g(_), c = [
+  "secondary-blue",
+  "secondary-green",
+  "secondary-orange",
+  "secondary-pink",
+  "secondary-teal",
+  "secondary-violet"
+], m = d(
+  ({ className: e, getInitials: o = u, name: r, size: t = "md", src: s }, l) => {
+    const a = z(r);
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        "aria-label": r,
+        className: y("root", t && `size-${t}`, a && `background-${a}`, e),
+        ref: l,
+        role: "img",
+        children: s ? /* @__PURE__ */ n("img", { alt: r, src: s }) : /* @__PURE__ */ n("p", { children: o(r) })
+      }
+    );
+  }
 );
-I.displayName = "Avatar";
 export {
-  I as Avatar
+  m as Avatar,
+  c as colors
 };

package/dist/Button.css

@@ -0,0 +1 @@
+@layer components{._root_129us_2{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-style:solid;border-width:var(--border-width-sm);transition-property:all;transition-duration:var(--duration-medium);outline:transparent solid var(--border-width-md);font-weight:var(--font-weight-bold);aspect-ratio:var(--aspectRatio, auto);height:var(--height);padding-inline:var(--paddingInline);border-radius:var(--borderRadius);font-size:var(--fontSize);color:var(--color, var(--color-neutral-90));background-color:var(--backgroundColor);border-color:var(--borderColor);line-height:var(--lineHeight)}._root_129us_2[data-focus-visible],._root_129us_2:focus-visible{outline-color:var(--outlineColorFocus)}@media (hover: hover) and (pointer: fine){._root_129us_2:hover{background-color:var(--backgroundColorHover);border-color:var(--borderColorHover)}}._root_129us_2:active{background-color:var(--backgroundColorActive);border-color:var(--borderColorActive)}._root_129us_2:disabled,._root_129us_2[aria-disabled]{background-color:var(--backgroundColorDisabled);border-color:var(--borderColorDisabled);color:var(--colorDisabled);cursor:var(--cursorDisabled)}._root_129us_2:has(i.wui-icon-font),._root_129us_2:has(svg){padding-inline:var(--paddingInlineHasIcon)}._root_129us_2 i.wui-icon-font,._root_129us_2 svg{font-weight:initial}._root_129us_2 i.wui-icon-font:only-child,._root_129us_2 svg:only-child{width:var(--iconOnlySize);height:var(--iconOnlySize);font-size:var(--iconOnlySize)}._root_129us_2 i.wui-icon-font:not(:only-child),._root_129us_2 svg:not(:only-child){width:var(--iconDefaultSize);height:var(--iconDefaultSize);font-size:var(--iconDefaultSize)}._root_129us_2 i.wui-icon-font:first-child:not(:only-child),._root_129us_2 svg:first-child:not(:only-child){margin-inline-end:var(--spacing-xs)}._root_129us_2 i.wui-icon-font:last-child:not(:only-child),._root_129us_2 svg:last-child:not(:only-child){margin-inline-start:var(--spacing-xs)}._shape-default_129us_77{--borderRadius: var(--radius-md)}._shape-circle_129us_80{--borderRadius: var(--radius-circle)}._shape-square_129us_83{--borderRadius: var(--radius-md)}._shape-circle_129us_80._size-lg_129us_86,._shape-circle_129us_80._size-md_129us_86,._shape-circle_129us_80._size-sm_129us_86,._shape-circle_129us_80._size-xs_129us_86,._shape-square_129us_83._size-lg_129us_86,._shape-square_129us_83._size-md_129us_86,._shape-square_129us_83._size-sm_129us_86,._shape-square_129us_83._size-xs_129us_86{--aspectRatio: 1;--paddingInline: 0;--paddingInlineHasIcon: 0}._shape-circle_129us_80._size-lg_129us_86,._shape-square_129us_83._size-lg_129us_86{--fontSize: var(--font-size-xl)}._shape-circle_129us_80._size-md_129us_86,._shape-square_129us_83._size-md_129us_86,._shape-circle_129us_80._size-sm_129us_86,._shape-square_129us_83._size-sm_129us_86,._shape-circle_129us_80._size-xs_129us_86,._shape-square_129us_83._size-xs_129us_86{--fontSize: var(--font-size-md)}._size-xs_129us_86{--fontSize: var(--font-size-xs);--height: var(--height-elements-sm);--paddingInline: var(--spacing-sm);--paddingInlineHasIcon: var(--spacing-sm);--iconDefaultSize: .75rem;--iconOnlySize: 1rem;--lineHeight: var(--line-height-xs)}._size-sm_129us_86{--fontSize: var(--font-size-xs);--height: var(--height-elements-md);--paddingInline: var(--spacing-sm);--paddingInlineHasIcon: var(--spacing-md);--iconDefaultSize: 1rem;--iconOnlySize: 1rem;--lineHeight: var(--line-height-xs)}._size-md_129us_86{--fontSize: var(--font-size-sm);--height: var(--height-elements-lg);--paddingInline: var(--spacing-xl);--paddingInlineHasIcon: var(--spacing-md);--iconDefaultSize: 1rem;--iconOnlySize: 1rem;--lineHeight: var(--line-height-sm)}._size-lg_129us_86{--fontSize: var(--font-size-sm);--height: var(--height-elements-xl);--paddingInline: var(--spacing-xl);--paddingInlineHasIcon: var(--spacing-lg);--iconDefaultSize: 1rem;--iconOnlySize: 1.5rem;--lineHeight: var(--line-height-sm)}._variant-disabled_129us_139{--backgroundColorDisabled: var(--color-beige-40);--borderColorDisabled: var(--color-beige-40);--colorDisabled: var(--color-beige-70);--cursorDisabled: not-allowed;--outlineColorFocus: var(--color-beige-10)}._variant-ghost_129us_146{--backgroundColorActive: color-mix(in oklab, var(--color-neutral-90) 40%, transparent);--backgroundColorHover: color-mix(in oklab, var(--color-neutral-90) 10%, transparent);--borderColor: transparent;--borderColorActive: transparent;--borderColorHover: transparent;--outlineColorFocus: color-mix(in oklab, var(--color-neutral-90) 10%, transparent)}._variant-ghost-ai_129us_154{--backgroundColorActive: var(--color-violet-30);--backgroundColorHover: var(--color-violet-10);--borderColor: transparent;--borderColorActive: var(--color-violet-30);--borderColorHover: var(--color-violet-10);--color: var(--color-violet-70);--outlineColorFocus: var(--color-violet-50)}._variant-ghost-danger_129us_163{--backgroundColorActive: var(--color-red-20);--backgroundColorHover: var(--color-red-10);--borderColor: transparent;--borderColorActive: var(--color-red-20);--borderColorHover: var(--color-red-10);--color: var(--color-red-80);--outlineColorFocus: var(--color-red-40)}._variant-primary_129us_172{--backgroundColor: var(--color-brand-40);--backgroundColorActive: var(--color-brand-10);--backgroundColorHover: var(--color-brand-30);--borderColor: var(--color-brand-40);--borderColorActive: var(--color-brand-10);--borderColorHover: var(--color-brand-30);--outlineColorFocus: var(--color-brand-20)}._variant-primary-ai_129us_181{--backgroundColor: var(--color-violet-70);--backgroundColorActive: var(--color-violet-40);--backgroundColorHover: var(--color-violet-60);--borderColor: var(--color-violet-70);--borderColorActive: var(--color-violet-40);--borderColorHover: var(--color-violet-60);--color: var(--color-neutral-10);--outlineColorFocus: var(--color-violet-50)}._variant-primary-danger_129us_191{--backgroundColor: var(--color-red-70);--backgroundColorActive: var(--color-red-50);--backgroundColorHover: var(--color-red-60);--borderColor: var(--color-red-70);--borderColorActive: var(--color-red-50);--borderColorHover: var(--color-red-60);--color: var(--color-neutral-10);--outlineColorFocus: var(--color-red-40)}._variant-secondary_129us_201{--backgroundColor: var(--color-neutral-90);--backgroundColorActive: var(--color-neutral-50);--backgroundColorHover: var(--color-neutral-70);--borderColor: var(--color-neutral-90);--borderColorActive: var(--color-neutral-50);--borderColorHover: var(--color-neutral-70);--color: var(--color-neutral-10);--outlineColorFocus: var(--color-neutral-40)}._variant-tertiary_129us_211{--backgroundColor: var(--color-neutral-10);--backgroundColorActive: color-mix(in oklab, var(--color-neutral-90) 40%, transparent);--backgroundColorHover: color-mix(in oklab, var(--color-neutral-90) 10%, transparent);--borderColor: var(--color-neutral-90);--outlineColorFocus: var(--color-neutral-40)}._variant-tertiary-ai_129us_218{--backgroundColor: var(--color-neutral-10);--backgroundColorActive: var(--color-violet-30);--backgroundColorHover: var(--color-violet-10);--borderColor: var(--color-violet-70);--color: var(--color-violet-70);--outlineColorFocus: var(--color-violet-50)}._variant-tertiary-danger_129us_226{--backgroundColor: var(--color-neutral-10);--backgroundColorActive: var(--color-red-20);--backgroundColorHover: var(--color-red-10);--borderColor: var(--color-red-80);--color: var(--color-red-80);--outlineColorFocus: var(--color-red-40)}}

package/dist/Button.js

@@ -1,155 +1,67 @@
 "use client";
-import { jsxs as l, jsx as u } from "react/jsx-runtime";
-import { Box as c } from "./Box.js";
-import { Loader as p } from "./Loader.js";
-import { shouldForwardProp as y, forwardRef as w } from "./System.js";
-import { B as g } from "./X5NMLKT6-BVi8qtcZ.js";
-import x, { th as t, system as B, css as n } from "@xstyled/styled-components";
-import { h as j } from "./hide-focus-rings-root-CDIqRYOD.js";
-const v = (i, s = "square") => n`
-  width: ${t(`buttons.sizes.${i}.height`)};
-  padding: 0;
-  ${s === "circle" && n`
-    border-radius: ${t(`buttons.sizes.${i}.height`)};
-  `};
-`, h = x(g).withConfig({ shouldForwardProp: y })(
-  ({ ai: i, danger: s, disabled: $, shape: r, size: e = "md", variant: o = "primary" }) => n`
-    ${t(`buttons.${o}`)};
-    ${i && n`
-      ${t(`buttons.ai.${o}`)};
-    `}
-    ${s && n`
-      ${t(`buttons.danger.${o}`)};
-    `}
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: auto;
-    ${t(`buttons.sizes.${e}`)};
-    text-decoration: none;
-    text-align: center;
-    white-space: nowrap;
-    cursor: pointer;
-    outline: none !important; /* important for firefox */
-    border-width: sm;
-    border-style: solid;
-    appearance: none;
-    overflow: hidden;
-    transition: medium;
-    ${r && v(e, r)};
-    ${B};
-
-    & > svg.wui-icon,
-    & > i.wui-icon-font {
-      font-weight: initial;
-
-      &:only-child {
-        width: ${t(`buttons.icon.only.${e}`)};
-        height: ${t(`buttons.icon.only.${e}`)};
-        font-size: ${t(`buttons.icon.only.${e}`)};
-      }
-      &:not(:only-child) {
-        width: ${t(`buttons.icon.default.${e}`)};
-        height: ${t(`buttons.icon.default.${e}`)};
-        font-size: ${t(`buttons.icon.default.${e}`)};
-      }
-    }
-
-    & > *:not(:only-child):not(:last-child) {
-      margin-right: sm;
-    }
-
-    ${!$ && n`
-      [${j}] &:focus {
-        box-shadow: none;
-      }
-      &:focus {
-        ${t(`buttons.focus.${o}`)};
-        ${i && n`
-          ${t(`buttons.focus.ai.${o}`)};
-        `}
-        ${s && n`
-          ${t(`buttons.focus.danger.${o}`)};
-        `}
-      }
-      &:hover {
-        ${t(`buttons.hover.${o}`)};
-        ${i && n`
-          ${t(`buttons.hover.ai.${o}`)};
-        `}
-        ${s && n`
-          ${t(`buttons.hover.danger.${o}`)};
-        `}
-      }
-      &:active {
-        ${t(`buttons.active.${o}`)};
-        ${i && n`
-          ${t(`buttons.active.ai.${o}`)};
-        `}
-        ${s && n`
-          ${t(`buttons.active.danger.${o}`)};
-        `}
-      }
-    `};
-
-    &[disabled] {
-      cursor: not-allowed;
-    }
-  `
-), C = w(
+import { jsxs as f, jsx as _ } from "react/jsx-runtime";
+import { B as b } from "./X5NMLKT6-ekZ2olXx.js";
+import { classNames as x } from "./utils.js";
+import { f as B, u as $ } from "./index-DGXoMkuf.js";
+const N = "_root_129us_2", j = "_shape_129us_74", q = {
+  root: N,
+  shape: j,
+  "shape-default": "_shape-default_129us_77",
+  "shape-circle": "_shape-circle_129us_80",
+  "shape-square": "_shape-square_129us_83",
+  "size-lg": "_size-lg_129us_86",
+  "size-md": "_size-md_129us_86",
+  "size-sm": "_size-sm_129us_86",
+  "size-xs": "_size-xs_129us_86",
+  "variant-disabled": "_variant-disabled_129us_139",
+  "variant-ghost": "_variant-ghost_129us_146",
+  "variant-ghost-ai": "_variant-ghost-ai_129us_154",
+  "variant-ghost-danger": "_variant-ghost-danger_129us_163",
+  "variant-primary": "_variant-primary_129us_172",
+  "variant-primary-ai": "_variant-primary-ai_129us_181",
+  "variant-primary-danger": "_variant-primary-danger_129us_191",
+  "variant-secondary": "_variant-secondary_129us_201",
+  "variant-tertiary": "_variant-tertiary_129us_211",
+  "variant-tertiary-ai": "_variant-tertiary-ai_129us_218",
+  "variant-tertiary-danger": "_variant-tertiary-danger_129us_226"
+}, n = x(q), E = B(
   ({
-    ai: i,
-    children: s,
-    danger: $,
-    dataTestId: r,
-    disabled: e,
-    isLoading: o,
-    size: a = "md",
-    variant: b = "primary",
-    ...f
-  }, m) => {
-    const d = e || o;
-    return /* @__PURE__ */ l(
-      h,
+    accessibleWhenDisabled: o = !0,
+    as: r,
+    children: u,
+    className: d = "",
+    disabled: p = !1,
+    isLoading: a = !1,
+    shape: s = "default",
+    size: v = "md",
+    variant: l = "primary",
+    ...m
+  }, c) => {
+    const { disabled: h, size: y, variant: g } = $(), t = h || p || a, i = t && "disabled" || g || l, e = y || v, z = r || "button";
+    return /* @__PURE__ */ f(
+      b,
       {
-        ai: i,
-        danger: $,
-        "data-loading": o,
-        "data-testid": r,
-        disabled: d,
-        ref: m,
-        size: a,
-        variant: d ? "disabled" : b,
-        ...f,
+        ...m,
+        accessibleWhenDisabled: o,
+        className: n(
+          "root",
+          i && `variant-${i}`,
+          s && `shape-${s}`,
+          e && `size-${e}`,
+          d
+        ),
+        disabled: t,
+        ref: c,
+        render: r ? /* @__PURE__ */ _(z, {}) : void 0,
+        type: "button",
         children: [
-          o ? /* @__PURE__ */ l("div", { children: [
-            /* @__PURE__ */ u(
-              c,
-              {
-                alignItems: "center",
-                bottom: 0,
-                display: "flex",
-                justifyContent: "center",
-                left: 0,
-                m: 0,
-                position: "absolute",
-                right: 0,
-                top: 0,
-                children: /* @__PURE__ */ u(p, { size: "xs" })
-              }
-            ),
-            /* @__PURE__ */ u(c, { opacity: "0", children: s })
-          ] }) : null,
-          !o && s
+          a ? /* @__PURE__ */ _("span", { className: n("loader") }) : null,
+          !a && u
         ]
       }
     );
   }
 );
-C.displayName = "Button";
-const N = h;
 export {
-  C as Button,
-  N as StyledButton
+  E as Button
 };

package/dist/ButtonGroup.js

@@ -1,50 +1,9 @@
-"use client";
-import { jsx as p } from "react/jsx-runtime";
-import { Children as d, cloneElement as m } from "react";
-import { forwardRef as f } from "./System.js";
-import u from "@xstyled/styled-components";
-const b = u.divBox`
-  display: inline-flex;
-  flex-wrap: wrap;
-  align-items: center;
-  margin-top: -3px;
-
-  > * {
-    margin-top: 3px;
-
-    &:not(:only-child) {
-      &:not(:last-child) {
-        border-right-color: rgba(255, 255, 255, 0.4);
-      }
-
-      &:first-child {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-
-      &:last-child {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-
-      &:not(:last-child):not(:first-child) {
-        border-radius: 0;
-      }
-    }
-  }
-`, y = f(
-  ({ children: t, dataTestId: o, disabled: i, size: e, variant: a }, n) => {
-    function s(l) {
-      return d.toArray(l).filter(Boolean).map((r) => m(r, {
-        ...r.props,
-        disabled: i || r.props.disabled,
-        size: e || r.props.size,
-        variant: a || r.props.variant
-      }));
-    }
-    return /* @__PURE__ */ p(b, { "data-testid": o, ref: n, children: s(t) });
-  }
-);
+import "react/jsx-runtime";
+import "react";
+import "./utils.js";
+import { a, B as m, u as n } from "./index-DGXoMkuf.js";
 export {
-  y as ButtonGroup
+  a as ButtonGroup,
+  m as ButtonGroupContext,
+  n as useButtonGroup
 };

package/dist/Hint.css

@@ -0,0 +1 @@
+@layer components{._root_zxnv7_2{display:flex;align-items:center;color:var(--color, var(--color-neutral-60));font-size:var(--font-size-xs);line-height:var(--line-height-xs)}._variant-danger_zxnv7_9{--color: var(--color-red-70)}._variant-success_zxnv7_12{--color: var(--color-green-70)}._variant-warning_zxnv7_15{--color: var(--color-orange-70)}}

package/dist/Hint.js

@@ -1,21 +1,15 @@
 "use client";
-import { jsx as d } from "react/jsx-runtime";
-import { forwardRef as m } from "./System.js";
-import l, { th as i, css as a } from "@xstyled/styled-components";
-const s = l.divBox(
-  ({ variant: t }) => a`
-    ${i("hints.default")};
-    ${t && i(`hints.${t}`)};
-    margin-top: xs;
-    display: flex;
-    align-items: center;
-  `
-), f = m(
-  ({ children: t, dataTestId: e, variant: n, ...o }, r) => /* @__PURE__ */ d(s, { "data-testid": e, ref: r, variant: n, ...o, children: t })
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { classNames as c } from "./utils.js";
+const e = "_root_zxnv7_2", _ = {
+  root: e,
+  "variant-danger": "_variant-danger_zxnv7_9",
+  "variant-success": "_variant-success_zxnv7_12",
+  "variant-warning": "_variant-warning_zxnv7_15"
+}, v = c(_), p = i(
+  ({ children: r, className: t, variant: n, ...a }, o) => /* @__PURE__ */ s("span", { className: v("root", n && `variant-${n}`, t), ref: o, ...a, children: r })
 );
-f.displayName = "Hint";
-const y = s;
 export {
-  f as Hint,
-  y as StyledHint
+  p as Hint
 };