welcome-ui 1.0.0-beta.1 → 1.0.0-beta.3

package/dist/index.mjs

@@ -1,24 +1,346 @@
 "use client";
-import { css as m, rpxTransformers as p, defaultTheme as f } from "@xstyled/styled-components";
-import { Test as ee } from "./Test.mjs";
-import { WuiProvider as re } from "./WuiProvider.mjs";
-const b = (e) => {
-  const { colors: t } = e;
+import m, { css as g, rpxTransformers as k, defaultTheme as D, th as d, system as p, keyframes as v } from "@xstyled/styled-components";
+import { h as f, a as S } from "./index-MifIgNHW.mjs";
+import { Accordion as Ze, useAccordion as Je } from "./Accordion.mjs";
+import { L as T } from "./index-0MPAX4B5.mjs";
+import { A as Qe } from "./index-0MPAX4B5.mjs";
+import { AspectRatio as er } from "./AspectRatio.mjs";
+import { Avatar as or } from "./Avatar.mjs";
+import { Badge as nr } from "./Badge.mjs";
+import { Box as C } from "./Box.mjs";
+import { Breadcrumb as lr, BreadcrumbComponent as sr } from "./Breadcrumb.mjs";
+import u, { Children as W, cloneElement as _ } from "react";
+import { shouldForwardProp as z, forwardRef as h } from "./System.mjs";
+import { componentSystem as dr, filterSystemProps as cr, system as ur, wrapperSystem as gr } from "./System.mjs";
+import { B as R } from "./X5NMLKT6-BC1Q56kB.mjs";
+import { S as U } from "./index-Du8Nrf16.mjs";
+import { C as w } from "./index-Bwrtxit1.mjs";
+import { Flex as br } from "./Flex.mjs";
+import { WuiProvider as hr } from "./WuiProvider.mjs";
+function y(r, e) {
+  if (typeof r != "object" || r === null) return e;
+  if (typeof e != "object" || e === null) return r;
+  const t = { ...r };
+  for (const n in e)
+    e.hasOwnProperty(n) && (t[n] = y(t[n], e[n]));
+  return t;
+}
+const N = (r) => {
+  const { borderWidths: e, colors: t, fontSizes: n, radii: a, space: s, texts: c, transitions: l } = r;
+  return {
+    padding: s.lg,
+    wrapper: {
+      backgroundColor: t["neutral-10"],
+      transition: l.medium,
+      border: `${e.sm} solid ${t["neutral-30"]}`,
+      borderRadius: a.md
+    },
+    icon: {
+      color: t["neutral-90"]
+    },
+    content: {
+      fontSize: n.sm
+    },
+    title: c.h5
+  };
+}, I = (r) => {
+  const { borderWidths: e, colors: t, fontSizes: n, fontWeights: a, radii: s, space: c } = r, l = (i) => ({
+    backgroundColor: t[`${i}-10`],
+    borderColor: t[`${i}-10`],
+    color: t[`${i}-90`]
+  });
   return {
     default: {
-      backgroundColor: t["primary-50"]
+      backgroundColor: t["neutral-10"],
+      borderColor: t["neutral-30"],
+      borderRadius: s.lg,
+      borderStyle: "solid",
+      borderWidth: e.sm,
+      color: t["neutral-80"],
+      fontSize: n.sm
+    },
+    title: {
+      default: {
+        color: t["neutral-90"],
+        fontWeight: a.medium
+      },
+      sizes: {
+        sm: {
+          marginBottom: c.xs
+        },
+        md: {
+          marginBottom: c.sm
+        }
+      }
+    },
+    danger: l("red"),
+    warning: l("orange"),
+    info: l("blue"),
+    success: l("green"),
+    beige: {
+      backgroundColor: t["beige-20"],
+      borderColor: t["beige-20"],
+      color: t["beige-80"]
+    },
+    sizes: {
+      sm: {
+        padding: c.lg
+      },
+      md: {
+        padding: c.xl
+      }
     }
   };
-};
-function d(e, t) {
-  if (typeof e != "object" || e === null) return t;
-  if (typeof t != "object" || t === null) return e;
-  const o = { ...e };
-  for (const l in t)
-    t.hasOwnProperty(l) && (o[l] = d(o[l], t[l]));
-  return o;
-}
-const x = {
+}, O = (r) => {
+  const { colors: e, fontWeights: t, toRem: n } = r;
+  return {
+    sizes: {
+      sm: n(20),
+      md: n(30),
+      lg: n(40),
+      xl: n(50),
+      xxl: n(60)
+    },
+    text: {
+      color: e["neutral-90"],
+      fontWeight: t.bold
+    }
+  };
+}, L = (r) => {
+  const { colors: e, fontWeights: t, space: n, texts: a, toRem: s } = r;
+  return {
+    default: {
+      ...a.xs,
+      fontWeight: t.medium
+    },
+    variants: {
+      default: {
+        color: e["beige-70"],
+        backgroundColor: e["beige-30"]
+      },
+      primary: {
+        color: e["neutral-90"],
+        backgroundColor: e["primary-40"]
+      }
+    },
+    disabled: {
+      default: {
+        color: e["beige-40"],
+        backgroundColor: e["beige-20"]
+      },
+      primary: {
+        color: e["primary-80"],
+        backgroundColor: e["primary-50"]
+      }
+    },
+    sizes: {
+      sm: {
+        padding: n.xxs,
+        height: s(16),
+        borderRadius: s(14)
+      },
+      md: {
+        padding: n.xs,
+        height: s(20),
+        borderRadius: s(14)
+      }
+    }
+  };
+}, H = (r) => {
+  const { colors: e, space: t, texts: n } = r;
+  return {
+    list: {
+      ...n["subtitle-sm"],
+      padding: `${t.sm} 0`
+    },
+    item: {
+      default: {
+        color: e["neutral-50"],
+        textDecoration: "none"
+      },
+      hover: {
+        color: e["neutral-70"]
+      },
+      active: {
+        color: e["neutral-70"]
+      }
+    },
+    separator: {
+      padding: `0 ${t.xs}`,
+      color: e["neutral-50"]
+    }
+  };
+}, G = (r) => {
+  const { colors: e, focus: t, fontWeights: n, radii: a, space: s, texts: c, toRem: l } = r, i = {
+    ...c.xs,
+    color: e["neutral-10"],
+    fontWeight: n.bold,
+    letterSpacing: 0,
+    borderRadius: a.md
+  };
+  return {
+    primary: {
+      ...i,
+      color: r.colors["neutral-90"],
+      backgroundColor: e["primary-40"],
+      borderColor: e["primary-40"]
+    },
+    secondary: {
+      ...i,
+      backgroundColor: e["neutral-90"],
+      borderColor: e["neutral-90"]
+    },
+    tertiary: {
+      ...i,
+      color: e["neutral-90"],
+      backgroundColor: "transparent",
+      borderColor: e["neutral-90"]
+    },
+    ghost: {
+      ...i,
+      color: e["neutral-90"],
+      backgroundColor: "transparent",
+      borderColor: "transparent"
+    },
+    danger: {
+      primary: {
+        color: e["neutral-10"],
+        backgroundColor: e["red-70"],
+        borderColor: e["red-70"]
+      },
+      tertiary: {
+        backgroundColor: "transparent",
+        color: e["red-80"],
+        borderColor: e["red-80"]
+      },
+      ghost: {
+        color: e["red-80"],
+        backgroundColor: "transparent",
+        borderColor: "transparent"
+      }
+    },
+    hover: {
+      primary: {
+        backgroundColor: e["primary-30"],
+        borderColor: e["primary-30"]
+      },
+      secondary: {
+        backgroundColor: e["neutral-70"],
+        borderColor: "transparent"
+      },
+      tertiary: {
+        backgroundColor: f(e["neutral-90"], 0.1)
+      },
+      ghost: {
+        backgroundColor: f(e["neutral-90"], 0.1)
+      },
+      danger: {
+        primary: {
+          backgroundColor: e["red-60"],
+          borderColor: e["red-60"]
+        },
+        tertiary: {
+          backgroundColor: e["red-10"]
+        },
+        ghost: {
+          backgroundColor: e["red-10"]
+        }
+      }
+    },
+    focus: {
+      primary: { ...t(e["primary-20"]) },
+      secondary: { ...t(e["neutral-40"]) },
+      tertiary: { ...t(e["neutral-40"]) },
+      ghost: { ...t(e["neutral-40"]) },
+      danger: {
+        primary: { ...t(e["red-40"]) },
+        tertiary: { ...t(e["red-40"]) },
+        ghost: { ...t(e["red-40"]) }
+      }
+    },
+    active: {
+      primary: {
+        backgroundColor: e["primary-10"],
+        borderColor: e["primary-10"]
+      },
+      secondary: {
+        backgroundColor: e["neutral-50"],
+        borderColor: e["neutral-50"]
+      },
+      tertiary: {
+        backgroundColor: f(e["neutral-90"], 0.4)
+      },
+      ghost: {
+        backgroundColor: f(e["neutral-90"], 0.4)
+      },
+      danger: {
+        primary: {
+          backgroundColor: e["red-50"],
+          borderColor: e["red-50"]
+        },
+        tertiary: {
+          backgroundColor: e["red-20"]
+        },
+        ghost: {
+          backgroundColor: e["red-20"]
+        }
+      }
+    },
+    disabled: {
+      ...i,
+      color: e["beige-70"],
+      backgroundColor: e["beige-40"],
+      borderColor: e["beige-40"],
+      "&:focus": { ...t(e["beige-10"]) }
+    },
+    sizes: {
+      xs: {
+        height: l(24),
+        padding: `${s.xs} ${s.sm}`
+      },
+      sm: {
+        height: l(32),
+        padding: `${s.sm} ${s.md}`
+      },
+      md: {
+        ...c.sm,
+        fontWeight: n.bold,
+        height: l(40),
+        padding: `${s.sm} ${s.lg}`
+      },
+      lg: {
+        ...c.sm,
+        fontWeight: n.bold,
+        height: l(48),
+        padding: `${s.md} ${s.xl}`
+      }
+    },
+    icon: {
+      only: {
+        xs: l(16),
+        sm: l(16),
+        md: l(16),
+        lg: l(24)
+      },
+      default: {
+        xs: l(12),
+        sm: l(16),
+        md: l(16),
+        lg: l(16)
+      }
+    }
+  };
+}, P = (r) => {
+  const { borderWidths: e, colors: t } = r;
+  return {
+    default: {
+      backgroundColor: t["neutral-10"],
+      borderStyle: "solid",
+      borderWidth: e.sm,
+      borderColor: t["neutral-30"]
+    }
+  };
+}, M = {
   "beige-10": "#FBF9F7",
   "beige-20": "#F6F3EF",
   "beige-30": "#EAE4DE",
@@ -124,221 +446,221 @@ const x = {
   "yellow-70": "#846A01",
   "yellow-80": "#604D00",
   "yellow-90": "#423500"
-}, h = (e) => ({
-  ...e,
-  "primary-10": e["yellow-10"],
-  "primary-20": e["yellow-20"],
-  "primary-30": e["yellow-30"],
-  "primary-40": e["yellow-40"],
-  "primary-50": e["yellow-50"],
-  "primary-60": e["yellow-60"],
-  "primary-70": e["yellow-70"],
-  "primary-80": e["yellow-80"],
-  "primary-90": e["yellow-90"],
-  "secondary-blue": e["blue-40"],
-  "secondary-green": e["green-30"],
-  "secondary-orange": e["red-orange-40"],
-  "secondary-pink": e["pink-40"],
-  "secondary-teal": e["teal-40"],
-  "secondary-violet": e["violet-40"],
+}, E = (r) => ({
+  ...r,
+  "primary-10": r["yellow-10"],
+  "primary-20": r["yellow-20"],
+  "primary-30": r["yellow-30"],
+  "primary-40": r["yellow-40"],
+  "primary-50": r["yellow-50"],
+  "primary-60": r["yellow-60"],
+  "primary-70": r["yellow-70"],
+  "primary-80": r["yellow-80"],
+  "primary-90": r["yellow-90"],
+  "secondary-blue": r["blue-40"],
+  "secondary-green": r["green-30"],
+  "secondary-orange": r["red-orange-40"],
+  "secondary-pink": r["pink-40"],
+  "secondary-teal": r["teal-40"],
+  "secondary-violet": r["violet-40"],
   overlay: "rgba(0, 0, 0, 0.55)"
-}), c = h(x), w = Object.keys(c).reduce((e, t) => {
-  if (t.startsWith("secondary-") || t === "overlay") return e;
-  const o = 100 - Number(t.slice(-2)), l = t.slice(0, t.length - 2);
+}), x = E(M), Y = Object.keys(x).reduce((r, e) => {
+  if (e.startsWith("secondary-") || e === "overlay") return r;
+  const t = 100 - Number(e.slice(-2)), n = e.slice(0, e.length - 2);
   return {
-    ...e,
-    [t]: c[`${l}${o}`]
+    ...r,
+    [e]: x[`${n}${t}`]
   };
-}, {}), A = {
-  ...c,
-  ...h(w)
-}, K = {
-  colors: A
-}, E = (e) => ({
+}, {}), j = {
+  ...x,
+  ...E(Y)
+}, Oe = {
+  colors: j
+}, q = (r) => ({
   "welcome-font": [
     {
-      url: `${e.fontsUrl}/welcome-font-regular`,
+      url: `${r.fontsUrl}/welcome-font-regular`,
       weight: "400"
     },
     {
-      url: `${e.fontsUrl}/welcome-font-medium`,
+      url: `${r.fontsUrl}/welcome-font-medium`,
       weight: "500"
     },
     {
-      url: `${e.fontsUrl}/welcome-font-bold`,
+      url: `${r.fontsUrl}/welcome-font-bold`,
       weight: "600"
     },
     {
-      url: `${e.fontsUrl}/welcome-font-regular-italic`,
+      url: `${r.fontsUrl}/welcome-font-regular-italic`,
       style: "italic",
       weight: "400"
     },
     {
-      url: `${e.fontsUrl}/welcome-font-medium-italic`,
+      url: `${r.fontsUrl}/welcome-font-medium-italic`,
       style: "italic",
       weight: "500"
     },
     {
-      url: `${e.fontsUrl}/welcome-font-bold-italic`,
+      url: `${r.fontsUrl}/welcome-font-bold-italic`,
       style: "italic",
       weight: "600"
     }
   ],
   "welcome-icon-font": [
     {
-      url: `${e.fontsUrl}/icon-font/__ICON_FONT_HASH__/welcome-icon-font`,
+      url: `${r.fontsUrl}/icon-font/__ICON_FONT_HASH__/welcome-icon-font`,
       display: "block"
     }
   ],
   "work-sans": [
     {
-      url: `${e.fontsUrl}/work-sans-variable`,
+      url: `${r.fontsUrl}/work-sans-variable`,
       isVariable: !0,
       stretch: "75% 125%",
       weight: "100 1000"
     }
   ]
-}), D = (e, t) => {
-  const { toEm: o, toRem: l } = t, n = l;
+}), V = (r, e) => {
+  const { toEm: t, toRem: n } = e, a = n;
   return {
-    h0: n(65),
-    h1: n(45),
-    h2: n(36),
-    h3: n(26),
-    h4: n(20),
-    h5: n(16),
-    h6: n(14),
-    lg: n(18),
-    md: n(16),
-    sm: n(14),
-    "subtitle-md": n(13),
-    "subtitle-sm": n(11),
-    xs: n(12)
+    h0: a(65),
+    h1: a(45),
+    h2: a(36),
+    h3: a(26),
+    h4: a(20),
+    h5: a(16),
+    h6: a(14),
+    lg: a(18),
+    md: a(16),
+    sm: a(14),
+    "subtitle-md": a(13),
+    "subtitle-sm": a(11),
+    xs: a(12)
   };
-}, y = ({
-  defaultLineHeight: e,
-  toRem: t
+}, Z = ({
+  defaultLineHeight: r,
+  toRem: e
 }) => ({
-  html: e,
-  h0: t(72),
-  h1: t(48),
-  h2: t(40),
-  h3: t(32),
-  h4: t(24),
-  h5: t(18),
-  h6: t(16),
-  lg: t(24),
-  md: t(18),
-  sm: t(18),
-  xs: t(14),
-  "subtitle-md": e,
-  "subtitle-sm": e
-}), T = {
+  html: r,
+  h0: e(72),
+  h1: e(48),
+  h2: e(40),
+  h3: e(32),
+  h4: e(24),
+  h5: e(18),
+  h6: e(16),
+  lg: e(24),
+  md: e(18),
+  sm: e(18),
+  xs: e(14),
+  "subtitle-md": r,
+  "subtitle-sm": r
+}), J = {
   regular: 400,
   medium: 500,
   bold: 600
-}, B = ({
-  defaultLetterSpacing: e,
-  toRem: t
+}, K = ({
+  defaultLetterSpacing: r,
+  toRem: e
 }) => ({
-  html: e,
-  h0: t(-1.7),
-  h1: t(-1.2),
-  h2: t(-1),
-  h3: t(-0.9),
-  h4: t(-0.6),
-  h5: t(-0.5),
-  h6: t(-0.5),
-  lg: e,
-  md: e,
-  sm: e,
-  xs: t(-0.2),
-  "subtitle-md": t(-0.2),
-  "subtitle-sm": t(-0.2)
-}), v = (e) => {
-  const { fontWeights: t } = e;
+  html: r,
+  h0: e(-1.7),
+  h1: e(-1.2),
+  h2: e(-1),
+  h3: e(-0.9),
+  h4: e(-0.6),
+  h5: e(-0.5),
+  h6: e(-0.5),
+  lg: r,
+  md: r,
+  sm: r,
+  xs: e(-0.2),
+  "subtitle-md": e(-0.2),
+  "subtitle-sm": e(-0.2)
+}), Q = (r) => {
+  const { fontWeights: e } = r;
   return {
-    h0: t.bold,
-    h1: t.bold,
-    h2: t.bold,
-    h3: t.bold,
-    h4: t.bold,
-    h5: t.bold,
-    h6: t.bold,
-    lg: t.regular,
-    md: t.regular,
-    sm: t.regular,
-    "subtitle-md": t.bold,
-    "subtitle-sm": t.medium,
-    xs: t.regular
+    h0: e.bold,
+    h1: e.bold,
+    h2: e.bold,
+    h3: e.bold,
+    h4: e.bold,
+    h5: e.bold,
+    h6: e.bold,
+    lg: e.regular,
+    md: e.regular,
+    sm: e.regular,
+    "subtitle-md": e.bold,
+    "subtitle-sm": e.medium,
+    xs: e.regular
   };
-}, C = (e) => {
-  const { fonts: t } = e;
+}, X = (r) => {
+  const { fonts: e } = r;
   return {
-    h0: t.headings,
-    h1: t.headings,
-    h2: t.headings,
-    h3: t.headings,
-    h4: t.headings,
-    h5: t.headings,
-    h6: t.headings,
-    "subtitle-md": t.headings,
-    "subtitle-sm": t.headings
+    h0: e.headings,
+    h1: e.headings,
+    h2: e.headings,
+    h3: e.headings,
+    h4: e.headings,
+    h5: e.headings,
+    h6: e.headings,
+    "subtitle-md": e.headings,
+    "subtitle-sm": e.headings
   };
-}, k = () => ({
+}, ee = () => ({
   "subtitle-md": "uppercase",
   "subtitle-sm": "uppercase"
-}), _ = (e) => {
-  const { colors: t } = e;
+}), re = (r) => {
+  const { colors: e } = r;
   return {
-    h0: t["neutral-90"],
-    h1: t["neutral-90"],
-    h2: t["neutral-90"],
-    h3: t["neutral-90"],
-    h4: t["neutral-90"],
-    h5: t["neutral-90"],
-    h6: t["neutral-90"]
+    h0: e["neutral-90"],
+    h1: e["neutral-90"],
+    h2: e["neutral-90"],
+    h3: e["neutral-90"],
+    h4: e["neutral-90"],
+    h5: e["neutral-90"],
+    h6: e["neutral-90"]
   };
-}, $ = (e) => {
+}, oe = (r) => {
   const {
-    fontSizes: t,
-    letterSpacings: o,
-    lineHeights: l,
-    textsFontColors: n,
-    textsFontFamily: g,
-    textsFontWeights: F,
-    textsTextTransform: u
-  } = e;
-  return Object.keys(t).reduce((s, r) => ({
-    ...s,
-    [r]: {
-      color: n[r],
-      fontFamily: g[r] || void 0,
-      fontWeight: F[r],
-      fontSize: t[r],
-      lineHeight: l[r] || l.lg,
-      letterSpacing: o[r] || void 0,
-      textTransform: u[r] || void 0
+    fontSizes: e,
+    letterSpacings: t,
+    lineHeights: n,
+    textsFontColors: a,
+    textsFontFamily: s,
+    textsFontWeights: c,
+    textsTextTransform: l
+  } = r;
+  return Object.keys(e).reduce((i, o) => ({
+    ...i,
+    [o]: {
+      color: a[o],
+      fontFamily: s[o] || void 0,
+      fontWeight: c[o],
+      fontSize: e[o],
+      lineHeight: n[o] || n.lg,
+      letterSpacing: t[o] || void 0,
+      textTransform: l[o] || void 0
     }
   }), {});
-}, U = (e, t, o) => ({
-  texts: [e, "sans-serif"].join(", "),
-  headings: [t, "sans-serif"].join(", "),
-  icons: o
-}), a = {
+}, te = (r, e, t) => ({
+  texts: [r, "sans-serif"].join(", "),
+  headings: [e, "sans-serif"].join(", "),
+  icons: t
+}), F = {
   primary: "ease",
   secondary: "linear",
   tertiary: "cubic-bezier(0.41, 0.094, 0.54, 0.07)"
-}, S = {
-  slow: `500ms ${a.tertiary}`,
-  medium: `300ms ${a.primary}`,
-  fast: `100ms ${a.secondary}`
-}, N = ({ colors: e }) => ({
-  default: m`
+}, ne = {
+  slow: `500ms ${F.tertiary}`,
+  medium: `300ms ${F.primary}`,
+  fast: `100ms ${F.secondary}`
+}, ae = ({ colors: r }) => ({
+  default: g`
       background-image: linear-gradient(
         0deg,
-        ${e["primary-40"]},
-        ${e["primary-40"]} 100%
+        ${r["primary-40"]},
+        ${r["primary-40"]} 100%
       );
       background-repeat: no-repeat;
       background-size: 100% 50%;
@@ -348,24 +670,24 @@ const x = {
         background-size 250ms,
         color 250ms;
     `,
-  hover: m`
+  hover: g`
       opacity: 1;
       background-position-y: 100%;
       background-size: 100% 100%;
     `
-}), W = (e) => ({
+}), le = (r) => ({
   none: "0",
-  sm: e.toRem(2),
-  md: e.toRem(4),
-  lg: e.toRem(8),
-  xl: e.toRem(16),
-  xxl: e.toRem(24),
+  sm: r.toRem(2),
+  md: r.toRem(4),
+  lg: r.toRem(8),
+  xl: r.toRem(16),
+  xxl: r.toRem(24),
   full: "100%"
-}), L = {
+}), se = {
   sm: "1px",
   md: "2px",
   lg: "3px"
-}, O = {
+}, ie = {
   xs: 0,
   sm: 480,
   md: 736,
@@ -374,49 +696,277 @@ const x = {
   xxl: 1440,
   "3xl": 1620,
   "4xl": 1920
-}, I = {
+}, de = {
   sm: "1px 2px 4px 0 rgba(0,0,0,0.05)",
   md: "3px 4px 10px 0 rgba(0,0,0,0.07)"
-}, z = (e) => ({
-  xxs: e.toRem(2),
-  xs: e.toRem(4),
-  sm: e.toRem(8),
-  md: e.toRem(12),
-  lg: e.toRem(16),
-  xl: e.toRem(24),
-  xxl: e.toRem(32),
-  "3xl": e.toRem(48),
-  "4xl": e.toRem(64),
-  "5xl": e.toRem(96),
-  "6xl": e.toRem(128),
-  "7xl": e.toRem(192)
-}), H = (e) => ({
-  backgroundColor: e.colors["primary-40"],
-  color: e.colors["neutral-90"]
-}), P = ({ colors: e }) => {
-  function t(o = e["primary-40"]) {
+}, ce = (r) => ({
+  xxs: r.toRem(2),
+  xs: r.toRem(4),
+  sm: r.toRem(8),
+  md: r.toRem(12),
+  lg: r.toRem(16),
+  xl: r.toRem(24),
+  xxl: r.toRem(32),
+  "3xl": r.toRem(48),
+  "4xl": r.toRem(64),
+  "5xl": r.toRem(96),
+  "6xl": r.toRem(128),
+  "7xl": r.toRem(192)
+}), ue = (r) => ({
+  backgroundColor: r.colors["primary-40"],
+  color: r.colors["neutral-90"]
+}), ge = ({ colors: r }) => {
+  function e(t = r["primary-40"]) {
     return {
-      boxShadow: `0 0 0 2px ${o}`
+      boxShadow: `0 0 0 2px ${t}`
     };
   }
-  return t;
-}, R = "work-sans", G = 16, M = "-0.019rem", Y = 1.15, V = "https://cdn.welcome-ui.com/fonts", Z = "welcome-font", q = "welcome-icon-font", Q = (e = {}) => {
+  return e;
+}, me = "work-sans", be = 16, pe = "-0.019rem", he = 1.15, fe = "https://cdn.welcome-ui.com/fonts", Fe = "welcome-font", xe = "welcome-icon-font", Le = (r = {}) => {
   const {
-    defaultFontFamily: t = R,
-    defaultFontSize: o = G,
-    defaultLetterSpacing: l = M,
-    defaultLineHeight: n = Y,
-    fontsUrl: g = V,
-    headingFontFamily: F = Z,
-    iconFontFamily: u = q,
-    ...s
-  } = e;
-  let r = {};
-  return r.transformers = { ...p }, r.toEm = (i) => `${i / o}em`, r.toRem = (i) => `${i / o}rem`, r.toPx = (i) => `${i * o}px`, r.colors = c, r.fontsUrl = g, r.fontFaces = E(r), r.fontSizes = D("rem", r), r.defaultLineHeight = n, r.defaultLetterSpacing = l, r.lineHeights = y(r), r.fontWeights = T, r.letterSpacings = B(r), r.fonts = U(t, F, u), r.borderWidths = L, r.screens = O, r.space = z(r), r.inset = r.space, r.radii = W(r), r.transitions = S, r.timingFunction = a, r.shadows = I, r = d(r, s), r.selection = H(r), r.underline = N(r), r.focus = P(r), r.textsFontWeights = v(r), r.textsFontFamily = C(r), r.textsFontColors = _(r), r.textsTextTransform = k(), r.texts = $(r), r.test = b(r), r.states = f.states, r = d(r, s), r;
-};
+    defaultFontFamily: e = me,
+    defaultFontSize: t = be,
+    defaultLetterSpacing: n = pe,
+    defaultLineHeight: a = he,
+    fontsUrl: s = fe,
+    headingFontFamily: c = Fe,
+    iconFontFamily: l = xe,
+    ...i
+  } = r;
+  let o = {};
+  return o.transformers = { ...k }, o.toEm = (b) => `${b / t}em`, o.toRem = (b) => `${b / t}rem`, o.toPx = (b) => `${b * t}px`, o.colors = x, o.fontsUrl = s, o.fontFaces = q(o), o.fontSizes = V("rem", o), o.defaultLineHeight = a, o.defaultLetterSpacing = n, o.lineHeights = Z(o), o.fontWeights = J, o.letterSpacings = K(o), o.fonts = te(e, c, l), o.borderWidths = se, o.screens = ie, o.space = ce(o), o.inset = o.space, o.radii = le(o), o.transitions = ne, o.timingFunction = F, o.shadows = de, o = y(o, i), o.selection = ue(o), o.underline = ae(o), o.focus = ge(o), o.textsFontWeights = Q(o), o.textsFontFamily = X(o), o.textsFontColors = re(o), o.textsTextTransform = ee(), o.texts = oe(o), o.accordions = N(o), o.alerts = I(o), o.avatars = O(o), o.badges = L(o), o.breadcrumbs = H(o), o.buttons = G(o), o.cards = P(o), o.states = D.states, o = y(o, i), o;
+}, ye = (r, e = "square") => g`
+  width: ${d(`buttons.sizes.${r}.height`)};
+  padding: 0;
+  ${e === "circle" && g`
+    border-radius: ${d(`buttons.sizes.${r}.height`)};
+  `};
+`, A = m(R).withConfig({ shouldForwardProp: z })(
+  ({ danger: r, disabled: e, shape: t, size: n = "md", variant: a = "primary" }) => g`
+    ${d(`buttons.${a}`)};
+    ${r && g`
+      ${d(`buttons.danger.${a}`)};
+    `}
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: auto;
+    ${d(`buttons.sizes.${n}`)};
+    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;
+    ${t && ye(n, t)};
+    ${p};
+
+    & > svg.wui-icon,
+    & > i.wui-icon-font {
+      font-weight: initial;
+
+      &:only-child {
+        width: ${d(`buttons.icon.only.${n}`)};
+        height: ${d(`buttons.icon.only.${n}`)};
+        font-size: ${d(`buttons.icon.only.${n}`)};
+      }
+      &:not(:only-child) {
+        width: ${d(`buttons.icon.default.${n}`)};
+        height: ${d(`buttons.icon.default.${n}`)};
+        font-size: ${d(`buttons.icon.default.${n}`)};
+      }
+    }
+
+    & > *:not(:only-child):not(:last-child) {
+      margin-right: sm;
+    }
+
+    ${!e && g`
+      [${S}] &:focus {
+        box-shadow: none;
+      }
+      &:focus {
+        ${d(`buttons.focus.${a}`)};
+        ${r && g`
+          ${d(`buttons.focus.danger.${a}`)};
+        `}
+      }
+      &:hover {
+        ${d(`buttons.hover.${a}`)};
+        ${r && g`
+          ${d(`buttons.hover.danger.${a}`)};
+        `}
+      }
+      &:active {
+        ${d(`buttons.active.${a}`)};
+        ${r && g`
+          ${d(`buttons.active.danger.${a}`)};
+        `}
+      }
+    `};
+
+    &[disabled] {
+      cursor: not-allowed;
+    }
+  `
+), $ = h(
+  ({
+    children: r,
+    danger: e,
+    dataTestId: t,
+    disabled: n,
+    isLoading: a,
+    size: s = "md",
+    variant: c = "primary",
+    ...l
+  }, i) => {
+    const o = n || a;
+    return /* @__PURE__ */ u.createElement(
+      A,
+      {
+        danger: e,
+        "data-loading": a,
+        "data-testid": t,
+        disabled: o,
+        ref: i,
+        size: s,
+        variant: o ? "disabled" : c,
+        ...l
+      },
+      a && /* @__PURE__ */ u.createElement("div", null, /* @__PURE__ */ u.createElement(
+        C,
+        {
+          alignItems: "center",
+          bottom: 0,
+          display: "flex",
+          justifyContent: "center",
+          left: 0,
+          m: 0,
+          position: "absolute",
+          right: 0,
+          top: 0
+        },
+        /* @__PURE__ */ u.createElement(T, { size: "xs" })
+      ), /* @__PURE__ */ u.createElement(C, { opacity: "0" }, r)),
+      !a && r
+    );
+  }
+);
+$.displayName = "Button";
+const He = A, $e = m.div`
+  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;
+      }
+    }
+  }
+
+  ${p};
+`, Ge = h(
+  ({ children: r, dataTestId: e, disabled: t, size: n, variant: a }, s) => {
+    function c(l) {
+      return W.toArray(l).filter(Boolean).map((i) => _(i, {
+        ...i.props,
+        disabled: t || i.props.disabled,
+        size: n || i.props.size,
+        variant: a || i.props.variant
+      }));
+    }
+    return /* @__PURE__ */ u.createElement($e, { "data-testid": e, ref: s }, c(r));
+  }
+), Ce = m(U)`
+  ${d("cards.cover")};
+
+  ${p};
+`, we = ({ src: r, ...e }) => /* @__PURE__ */ u.createElement(Ce, { ...e }, /* @__PURE__ */ u.createElement("img", { src: r })), Ee = m.divBox`
+  overflow: 'hidden';
+  border-radius: md;
+  ${d("cards.default")};
+  background-size: cover;
+  background-position: center;
+
+  ${p};
+`, Ae = m.divBox`
+  padding: lg;
+
+  ${p};
+`, Be = h(({ children: r, ...e }, t) => /* @__PURE__ */ u.createElement(Ee, { ref: t, ...e }, r)), Pe = Object.assign(Be, {
+  Body: Ae,
+  Cover: we
+}), ke = v`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`, De = g`
+  ${ke}
+`, B = m($)`
+  pointer-events: auto;
+  animation: ${d("transitions.medium")};
+  animation-name: ${De};
+`, Me = h(
+  ({ size: r = "xs", ...e }, t) => /* @__PURE__ */ u.createElement(B, { ref: t, shape: "circle", size: r, title: "Clear", variant: "ghost", ...e }, /* @__PURE__ */ u.createElement(w, { size: "xxs" }))
+), Ye = B, ve = m($)`
+  & > svg:only-child {
+    width: ${d("space.md")};
+    height: ${d("space.md")};
+  }
+`, je = h((r, e) => /* @__PURE__ */ u.createElement(ve, { ref: e, shape: "circle", size: "sm", title: "Close", variant: "ghost", ...r }, /* @__PURE__ */ u.createElement(w, { size: "lg" })));
 export {
-  ee as Test,
-  re as WuiProvider,
-  Q as createTheme,
-  K as darkTheme
+  Ze as Accordion,
+  Qe as Alert,
+  er as AspectRatio,
+  or as Avatar,
+  nr as Badge,
+  C as Box,
+  lr as Breadcrumb,
+  sr as BreadcrumbComponent,
+  $ as Button,
+  Ge as ButtonGroup,
+  Pe as Card,
+  Be as CardComponent,
+  Me as ClearButton,
+  je as CloseButton,
+  br as Flex,
+  He as StyledButton,
+  Ye as StyledClearButton,
+  hr as WuiProvider,
+  dr as componentSystem,
+  Le as createTheme,
+  Oe as darkTheme,
+  cr as filterSystemProps,
+  h as forwardRef,
+  z as shouldForwardProp,
+  ur as system,
+  Je as useAccordion,
+  gr as wrapperSystem
 };