welcome-ui 1.0.0-beta.2 → 1.0.0-beta.4

package/dist/index.mjs

@@ -1,17 +1,1294 @@
 "use client";
-import { css as m, rpxTransformers as h, defaultTheme as f } from "@xstyled/styled-components";
-import { Box as j } from "./box.mjs";
-import { componentSystem as te, filterSystemProps as re, forwardRef as ne, shouldForwardProp as oe, system as le, wrapperSystem as ie } from "./system.mjs";
-import { WuiProvider as ae } from "./wui-provider.mjs";
-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;
+import { Accordion as Qe, useAccordion as er } from "./Accordion.mjs";
+import { Alert as or } from "./Alert.mjs";
+import { AspectRatio as nr } from "./AspectRatio.mjs";
+import { Avatar as lr } from "./Avatar.mjs";
+import { Badge as dr } from "./Badge.mjs";
+import { Box as cr } from "./Box.mjs";
+import { h as m } from "./index-1C9Z0d5Q.mjs";
+import { a as ur, B as mr } from "./index-1C9Z0d5Q.mjs";
+import { Button as pr, StyledButton as fr } from "./Button.mjs";
+import { ButtonGroup as xr } from "./ButtonGroup.mjs";
+import { Card as yr, CardComponent as kr } from "./Card.mjs";
+import { a as wr } from "./index-DCOLdphy.mjs";
+import { ClearButton as vr, StyledClearButton as Tr } from "./ClearButton.mjs";
+import { CloseButton as $r } from "./CloseButton.mjs";
+import { DatePicker as Ar } from "./DatePicker.mjs";
+import { DateTimePicker as Er } from "./DateTimePicker.mjs";
+import { AssetDrawer as zr, Drawer as Lr, DrawerBackdrop as Ir, Trigger as Hr, useDrawer as Ur } from "./Drawer.mjs";
+import { DropdownMenu as Pr, useDropdownMenu as Mr } from "./DropdownMenu.mjs";
+import { Field as Gr, IconGroupWrapper as Or, IconWrapper as Vr, getBaseType as Yr } from "./Field.mjs";
+import { FieldGroup as Xr, StyledFieldGroup as Kr } from "./FieldGroup.mjs";
+import { FileDrop as jr, ImagePreview as qr } from "./FileDrop.mjs";
+import { g as eo, a as ro, b as oo, c as to } from "./index-DHOW43M6.mjs";
+import { FileUpload as ao } from "./FileUpload.mjs";
+import { Flex as io } from "./Flex.mjs";
+import { Grid as co } from "./Grid.mjs";
+import { Hint as uo, StyledHint as mo } from "./Hint.mjs";
+import { Icon as po, StyledIcon as fo } from "./Icon.mjs";
+import { InputText as xo } from "./InputText.mjs";
+import { Label as yo, StyledLabel as ko } from "./Label.mjs";
+import { Link as wo } from "./Link.mjs";
+import { Loader as vo } from "./Loader.mjs";
+import { W as Do, a as $o, S as Wo, b as Ao } from "./Welcome-BNr4uu5n.mjs";
+import { AssetModal as Eo, Modal as Ro, useModal as zo } from "./Modal.mjs";
+import { Pagination as Io } from "./Pagination.mjs";
+import { PasswordInput as Uo } from "./PasswordInput.mjs";
+import { Picker as Po } from "./Picker.mjs";
+import { P as No, a as Go, u as Oo, b as Vo } from "./usePopover-CcsC9Y-s.mjs";
+import { Radio as Jo } from "./Radio.mjs";
+import { RadioGroup as Ko } from "./RadioGroup.mjs";
+import { RadioTab as jo } from "./RadioTab.mjs";
+import { Search as Qo, StyledSearch as et } from "./Search.mjs";
+import { Select as ot, StyledSelect as tt } from "./Select.mjs";
+import { Shape as at } from "./Shape.mjs";
+import { Slider as it, SliderComponent as dt, ensureMinMax as st, round as ct, thumbWidth as gt } from "./Slider.mjs";
+import { Stack as mt } from "./Stack.mjs";
+import { StyledSwiper as pt, Swiper as ft, useSwiper as ht } from "./Swiper.mjs";
+import { Table as Ct, TableComponent as yt } from "./Table.mjs";
+import { Tab as Ft, TabComponent as wt, useTab as St } from "./Tabs.mjs";
+import { StyledTag as Tt, Tag as Dt } from "./Tag.mjs";
+import { Text as Wt } from "./Text.mjs";
+import { Textarea as Bt } from "./Textarea.mjs";
+import { TimePicker as Rt } from "./TimePicker.mjs";
+import { Notifications as Lt, Toast as It, dismiss as Ht, remove as Ut, toast as _t, useToast as Pt } from "./Toast.mjs";
+import { Toggle as Nt } from "./Toggle.mjs";
+import { Tooltip as Ot } from "./Tooltip.mjs";
+import { VariantIcon as Yt } from "./VariantIcon.mjs";
+import { WelcomeLoader as Xt } from "./WelcomeLoader.mjs";
+import { WuiProvider as Zt } from "./WuiProvider.mjs";
+import { css as h, rpxTransformers as F, defaultTheme as w } from "@xstyled/styled-components";
+import { useState as S, useCallback as v } from "react";
+import { g as T } from "./_commonjsHelpers-CXJ7dpIk.mjs";
+function f(o, e) {
+  if (typeof o != "object" || o === null) return e;
+  if (typeof e != "object" || e === null) return o;
+  const r = { ...o };
+  for (const n in e)
+    e.hasOwnProperty(n) && (r[n] = f(r[n], e[n]));
+  return r;
 }
-const x = {
+const D = (o) => {
+  const { borderWidths: e, colors: r, fontSizes: n, radii: a, space: i, texts: d, transitions: l } = o;
+  return {
+    padding: i.lg,
+    wrapper: {
+      backgroundColor: r["neutral-10"],
+      transition: l.medium,
+      border: `${e.sm} solid ${r["neutral-30"]}`,
+      borderRadius: a.md
+    },
+    icon: {
+      color: r["neutral-90"]
+    },
+    content: {
+      fontSize: n.sm
+    },
+    title: d.h5
+  };
+}, $ = (o) => {
+  const { borderWidths: e, colors: r, fontSizes: n, fontWeights: a, radii: i, space: d } = o, l = (s) => ({
+    backgroundColor: r[`${s}-10`],
+    borderColor: r[`${s}-10`],
+    color: r[`${s}-90`]
+  });
+  return {
+    default: {
+      backgroundColor: r["neutral-10"],
+      borderColor: r["neutral-30"],
+      borderRadius: i.lg,
+      borderStyle: "solid",
+      borderWidth: e.sm,
+      color: r["neutral-80"],
+      fontSize: n.sm
+    },
+    title: {
+      default: {
+        color: r["neutral-90"],
+        fontWeight: a.medium
+      },
+      sizes: {
+        sm: {
+          marginBottom: d.xs
+        },
+        md: {
+          marginBottom: d.sm
+        }
+      }
+    },
+    danger: l("red"),
+    warning: l("orange"),
+    info: l("blue"),
+    success: l("green"),
+    beige: {
+      backgroundColor: r["beige-20"],
+      borderColor: r["beige-20"],
+      color: r["beige-80"]
+    },
+    sizes: {
+      sm: {
+        padding: d.lg
+      },
+      md: {
+        padding: d.xl
+      }
+    }
+  };
+}, W = (o) => {
+  const { colors: e, fontWeights: r, toRem: n } = o;
+  return {
+    sizes: {
+      sm: n(20),
+      md: n(30),
+      lg: n(40),
+      xl: n(50),
+      xxl: n(60)
+    },
+    text: {
+      color: e["neutral-90"],
+      fontWeight: r.bold
+    }
+  };
+}, A = (o) => {
+  const { colors: e, fontWeights: r, space: n, texts: a, toRem: i } = o;
+  return {
+    default: {
+      ...a.xs,
+      fontWeight: r.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: i(16),
+        borderRadius: i(14)
+      },
+      md: {
+        padding: n.xs,
+        height: i(20),
+        borderRadius: i(14)
+      }
+    }
+  };
+}, B = (o) => {
+  const { colors: e, space: r, texts: n } = o;
+  return {
+    list: {
+      ...n["subtitle-sm"],
+      padding: `${r.sm} 0`
+    },
+    item: {
+      default: {
+        color: e["neutral-50"],
+        textDecoration: "none"
+      },
+      hover: {
+        color: e["neutral-70"]
+      },
+      active: {
+        color: e["neutral-70"]
+      }
+    },
+    separator: {
+      padding: `0 ${r.xs}`,
+      color: e["neutral-50"]
+    }
+  };
+}, E = (o) => {
+  const { colors: e, focus: r, fontWeights: n, radii: a, space: i, texts: d, toRem: l } = o, s = {
+    ...d.xs,
+    color: e["neutral-10"],
+    fontWeight: n.bold,
+    letterSpacing: 0,
+    borderRadius: a.md
+  };
+  return {
+    primary: {
+      ...s,
+      color: o.colors["neutral-90"],
+      backgroundColor: e["primary-40"],
+      borderColor: e["primary-40"]
+    },
+    secondary: {
+      ...s,
+      backgroundColor: e["neutral-90"],
+      borderColor: e["neutral-90"]
+    },
+    tertiary: {
+      ...s,
+      color: e["neutral-90"],
+      backgroundColor: "transparent",
+      borderColor: e["neutral-90"]
+    },
+    ghost: {
+      ...s,
+      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: m(e["neutral-90"], 0.1)
+      },
+      ghost: {
+        backgroundColor: m(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: { ...r(e["primary-20"]) },
+      secondary: { ...r(e["neutral-40"]) },
+      tertiary: { ...r(e["neutral-40"]) },
+      ghost: { ...r(e["neutral-40"]) },
+      danger: {
+        primary: { ...r(e["red-40"]) },
+        tertiary: { ...r(e["red-40"]) },
+        ghost: { ...r(e["red-40"]) }
+      }
+    },
+    active: {
+      primary: {
+        backgroundColor: e["primary-10"],
+        borderColor: e["primary-10"]
+      },
+      secondary: {
+        backgroundColor: e["neutral-50"],
+        borderColor: e["neutral-50"]
+      },
+      tertiary: {
+        backgroundColor: m(e["neutral-90"], 0.4)
+      },
+      ghost: {
+        backgroundColor: m(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: {
+      ...s,
+      color: e["beige-70"],
+      backgroundColor: e["beige-40"],
+      borderColor: e["beige-40"],
+      "&:focus": { ...r(e["beige-10"]) }
+    },
+    sizes: {
+      xs: {
+        height: l(24),
+        padding: `${i.xs} ${i.sm}`
+      },
+      sm: {
+        height: l(32),
+        padding: `${i.sm} ${i.md}`
+      },
+      md: {
+        ...d.sm,
+        fontWeight: n.bold,
+        height: l(40),
+        padding: `${i.sm} ${i.lg}`
+      },
+      lg: {
+        ...d.sm,
+        fontWeight: n.bold,
+        height: l(48),
+        padding: `${i.md} ${i.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)
+      }
+    }
+  };
+}, R = (o) => {
+  const { borderWidths: e, colors: r } = o;
+  return {
+    default: {
+      backgroundColor: r["neutral-10"],
+      borderStyle: "solid",
+      borderWidth: e.sm,
+      borderColor: r["neutral-30"]
+    }
+  };
+}, z = (o) => {
+  const { colors: e, fontWeights: r } = o;
+  return {
+    item: {
+      selected: {
+        color: e["neutral-90"],
+        fontWeight: r.bold,
+        backgroundColor: e["primary-40"],
+        outline: "none"
+      },
+      today: {
+        color: e["neutral-90"],
+        fontWeight: r.bold
+      }
+    }
+  };
+}, L = (o) => {
+  const { colors: e, radii: r, toRem: n } = o;
+  return {
+    default: {
+      width: n(16),
+      height: n(16),
+      flexShrink: 0,
+      borderRadius: r.sm
+    },
+    disabled: {
+      borderColor: e["beige-60"]
+    },
+    checked: {
+      color: e["neutral-90"],
+      backgroundColor: e["primary-40"],
+      borderColor: e["primary-40"]
+    }
+  };
+}, I = (o) => {
+  const { colors: e, space: r, toRem: n } = o;
+  return {
+    backdrop: {
+      backgroundColor: e.overlay,
+      zIndex: 999
+    },
+    default: {
+      zIndex: 999
+    },
+    closeButton: {},
+    title: {
+      margin: 0,
+      backgroundColor: e["neutral-10"],
+      padding: `${r.xl} ${r["5xl"]} ${r.xl} ${r.xl}`
+    },
+    content: {
+      padding: `${r.xl}`
+    },
+    footer: {
+      backgroundColor: e["neutral-10"],
+      padding: `${r.xl}`
+    },
+    sizes: {
+      horizontal: {
+        sm: { width: n(400) },
+        md: { width: n(550) },
+        lg: { width: n(680) }
+      },
+      vertical: {
+        sm: { height: n(400) },
+        md: { height: n(550) },
+        lg: { height: n(680) }
+      }
+    }
+  };
+}, H = (o) => {
+  const { colors: e, fontSizes: r, radii: n, toRem: a } = o, i = e["beige-30"];
+  return {
+    inner: {
+      fontSize: r.sm,
+      minWidth: a(130),
+      borderRadius: n.md
+    },
+    item: {
+      backgroundColor: "transparent",
+      color: e["beige-70"],
+      "&:hover": {
+        backgroundColor: e["beige-30"],
+        color: e["neutral-90"]
+      },
+      "&:focus": {
+        backgroundColor: e["beige-30"],
+        color: e["neutral-90"]
+      },
+      "&[disabled]": {
+        backgroundColor: "transparent",
+        color: e["beige-40"],
+        cursor: "not-allowed"
+      }
+    },
+    separator: {
+      backgroundColor: i
+    }
+  };
+}, U = (o) => {
+  const { colors: e, toRem: r } = o;
+  return {
+    default: {
+      minHeight: r(200),
+      borderStyle: "dashed"
+    },
+    dragAccept: {},
+    dragReject: {},
+    disabled: {
+      backgroundColor: e["beige-30"]
+    }
+  };
+}, _ = (o) => {
+  const { colors: e, texts: r } = o;
+  return {
+    default: {
+      ...r.xs,
+      color: e["neutral-60"]
+    },
+    danger: {
+      color: e["red-70"]
+    },
+    success: {
+      color: e["green-70"]
+    },
+    warning: {
+      color: e["orange-70"]
+    }
+  };
+}, P = (o) => {
+  const { colors: e, fontSizes: r, fontWeights: n } = o;
+  return {
+    color: e["neutral-60"],
+    fontSize: r.sm,
+    fontWeight: n.medium
+  };
+}, M = (o) => {
+  const { colors: e, fontWeights: r, icons: n, space: a, transitions: i } = o;
+  return {
+    default: {
+      color: e["neutral-90"],
+      fontWeight: r.medium,
+      transition: i.medium
+    },
+    withExternalLink: {
+      backgroundSize: `calc(100% - ${n.sm} - ${a.sm}) 50%`
+    },
+    disabled: {
+      color: e["neutral-50"],
+      backgroundImage: `linear-gradient(0deg, ${e["neutral-30"]}, ${e["neutral-30"]} 100%)`
+    },
+    primary: {
+      default: {},
+      hover: {}
+    },
+    secondary: {
+      default: {
+        backgroundImage: `linear-gradient(0deg, ${e["neutral-90"]}, ${e["neutral-90"]} 100%)`
+      },
+      hover: {
+        color: e["neutral-10"]
+      }
+    }
+  };
+}, N = ({ toRem: o }) => ({
+  xs: o(8),
+  sm: o(10),
+  md: o(15),
+  lg: o(20)
+}), G = ({ toRem: o }) => ({
+  xs: o(12),
+  sm: o(16),
+  md: o(24),
+  lg: o(32),
+  xl: o(48),
+  xxl: o(64)
+}), O = (o) => {
+  const { colors: e, radii: r, space: n, toRem: a } = o;
+  return {
+    backdrop: {
+      backgroundColor: e.overlay,
+      zIndex: 999
+    },
+    default: {
+      zIndex: 999,
+      borderRadius: r.md
+    },
+    header: {
+      backgroundColor: e["neutral-10"],
+      borderTopLeftRadius: r.md,
+      borderTopRightRadius: r.md,
+      paddingTop: n.xxl,
+      paddingRight: n["3xl"],
+      paddingBottom: n.xxl,
+      paddingLeft: n.xxl,
+      subtitle: {
+        color: e["neutral-70"],
+        variant: "sm",
+        margin: 0
+      }
+    },
+    body: {
+      color: e["neutral-90"],
+      paddingRight: n["3xl"],
+      paddingBottom: n.xxl,
+      paddingLeft: n.xxl
+    },
+    footer: {
+      backgroundColor: e["neutral-10"],
+      borderTop: `solid ${e["neutral-30"]}`,
+      borderBottomLeftRadius: r.md,
+      borderBottomRightRadius: r.md,
+      children: {
+        paddingRight: n.xxl,
+        paddingLeft: n.xxl,
+        paddingTop: n.lg,
+        paddingBottom: n.xl
+      },
+      information: {
+        backgroundColor: e["beige-20"],
+        paddingRight: n.xxl,
+        paddingLeft: n.xxl,
+        paddingTop: n.xl,
+        paddingBottom: n.xxl
+      }
+    },
+    gutter: a(32),
+    sizes: {
+      xs: {
+        width: a(320)
+      },
+      sm: {
+        width: a(450)
+      },
+      md: {
+        width: a(600)
+      },
+      lg: {
+        width: a(730)
+      },
+      auto: {}
+    },
+    cover: {}
+  };
+}, V = (o) => {
+  const { colors: e, focus: r, fontSizes: n, fontWeights: a, toRem: i } = o;
+  return {
+    default: {
+      width: i(32),
+      height: i(32),
+      color: e["neutral-90"],
+      fontWeight: a.bold,
+      fontSize: n.xs
+    },
+    item: {
+      "&:hover, &:focus": {
+        backgroundColor: e["neutral-30"]
+      },
+      "&:focus": { ...r(e["neutral-60"]) }
+    },
+    active: {
+      backgroundColor: e["neutral-90"],
+      color: e["neutral-10"],
+      "&:hover, &:focus": {
+        backgroundColor: e["neutral-90"]
+      }
+    },
+    disabled: {
+      backgroundColor: e["beige-40"],
+      color: e["beige-70"]
+    }
+  };
+}, Y = (o) => {
+  const { borderWidths: e, colors: r, space: n, texts: a, toRem: i } = o;
+  return {
+    default: {
+      ...a.sm,
+      backgroundColor: r["neutral-90"],
+      color: r["neutral-10"],
+      maxWidth: i(700),
+      zIndex: 1
+    },
+    content: {
+      display: "block",
+      padding: n.md
+    },
+    title: {
+      ...a.h6,
+      padding: `${n.md} ${n.md} ${n.xs}`,
+      color: r["neutral-10"],
+      borderBottomColor: r["neutral-70"],
+      borderBottomWidth: e.sm,
+      borderBottomStyle: "solid"
+    }
+  };
+}, J = (o) => {
+  const { colors: e, toRem: r } = o;
+  return {
+    default: {
+      width: r(16),
+      height: r(16)
+    },
+    checked: {
+      color: e["neutral-90"],
+      borderColor: e["primary-40"]
+    },
+    checkedCenteredColor: {
+      default: e["primary-40"],
+      disabled: e["beige-60"]
+    }
+  };
+}, X = (o) => {
+  const { colors: e } = o;
+  return {
+    default: {
+      "&:hover": {
+        backgroundColor: e["beige-30"]
+      }
+    },
+    checked: {
+      backgroundColor: e["primary-40"],
+      color: o.colors["neutral-90"],
+      borderColor: e["primary-40"],
+      "&:hover": {
+        backgroundColor: e["primary-30"]
+      }
+    }
+  };
+}, K = (o) => {
+  const { borderWidths: e, colors: r } = o;
+  return {
+    default: {
+      backgroundColor: r["beige-40"],
+      backgroundImage: `linear-gradient(${r["primary-40"]}, ${r["primary-40"]})`
+    },
+    selector: {
+      backgroundColor: r["neutral-90"],
+      borderRadius: "50%",
+      border: `${e.md} solid`,
+      disabled: {
+        backgroundColor: r["beige-60"]
+      }
+    },
+    output: {
+      tooltip: {
+        backgroundColor: r["neutral-90"],
+        border: `${e.sm} solid ${r["neutral-70"]}}`,
+        color: r["neutral-10"]
+      }
+    },
+    focused: {
+      outline: `${e.md} solid ${r["primary-40"]}`,
+      disabled: {
+        outline: "none"
+      }
+    },
+    disabled: {
+      backgroundImage: `linear-gradient(${r["beige-60"]}, ${r["beige-60"]})`
+    },
+    rangeInput: {
+      disabled: {
+        backgroundColor: r["beige-60"]
+      }
+    }
+  };
+}, Z = (o) => {
+  const { colors: e } = o;
+  return {
+    navigation: {
+      bullet: {
+        active: { backgroundColor: e["primary-40"] },
+        default: { backgroundColor: e["beige-40"] }
+      }
+    }
+  };
+}, j = (o) => {
+  const { borderWidths: e, colors: r, fontWeights: n, space: a } = o;
+  return {
+    th: {
+      color: r["neutral-60"],
+      fontWeight: n.medium,
+      textAlign: "left",
+      borderBottomColor: r["neutral-90"],
+      borderBottomWidth: e.sm,
+      borderBottomStyle: "solid"
+    },
+    td: {
+      textAlign: "left",
+      padding: a.xl
+    },
+    tr: {
+      default: {
+        borderBottomColor: r["neutral-30"],
+        borderBottomWidth: e.sm,
+        borderBottomStyle: "solid"
+      },
+      danger: {
+        backgroundColor: r["red-10"],
+        color: r["red-70"]
+      },
+      warning: {
+        backgroundColor: r["orange-10"],
+        color: r["orange-80"]
+      },
+      info: {
+        backgroundColor: r["blue-10"],
+        color: r["blue-70"]
+      },
+      success: {
+        backgroundColor: r["green-10"],
+        color: r["green-70"]
+      },
+      clickable: {
+        cursor: "pointer"
+      }
+    }
+  };
+}, q = (o) => {
+  const { borderWidths: e, colors: r, fontSizes: n, fontWeights: a, lineHeights: i, space: d } = o;
+  return {
+    tabsBorder: {
+      horizontal: {
+        boxShadow: `inset 0 -${e.sm} 0 ${r["neutral-30"]}`
+      },
+      vertical: {
+        boxShadow: `inset -${e.sm} 0 0 ${r["neutral-30"]}`
+      }
+    },
+    item: {
+      default: {
+        color: r["neutral-70"],
+        fontWeight: a.medium,
+        textDecoration: "none",
+        lineHeight: i.md
+      },
+      active: {
+        color: r["neutral-90"]
+      },
+      focus: {
+        color: r["neutral-90"]
+      },
+      disabled: {
+        color: r["neutral-50"]
+      },
+      size: {
+        sm: {
+          fontSize: n.sm
+        },
+        md: {
+          fontSize: n.md
+        }
+      }
+    },
+    panel: {
+      vertical: {
+        "&:focus": {
+          outline: "none"
+        }
+      },
+      horizontal: {
+        marginTop: d.xl,
+        "&:focus": {
+          outline: "none"
+        }
+      }
+    },
+    activeBar: {
+      horizontal: {
+        background: r["primary-40"],
+        height: e.md
+      },
+      vertical: {
+        background: r["primary-40"],
+        width: e.md
+      }
+    },
+    icon: {
+      maxWidth: d.lg,
+      maxHeight: d.lg
+    },
+    badge: {
+      maxHeight: d.lg
+    }
+  };
+}, Q = (o) => {
+  const { colors: e, fontSizes: r, fontWeights: n, radii: a, space: i, toRem: d } = o, l = {
+    xs: d(20),
+    sm: d(24),
+    md: d(32)
+  }, s = (u) => ({
+    backgroundColor: e[`${u}-10`],
+    color: e[`${u}-90`]
+  }), t = (u) => ({
+    backgroundColor: e[`${u}-20`]
+  }), c = (u) => ({
+    backgroundColor: e[`${u}-${u === "green" ? "30" : "40"}`],
+    color: e["neutral-90"]
+  }), g = (u) => ({
+    backgroundColor: e[`${u}-${u === "green" ? "40" : "50"}`]
+  });
+  return {
+    default: {
+      fontWeight: n.medium,
+      borderRadius: a.md
+    },
+    variants: {
+      default: {
+        backgroundColor: e["beige-20"],
+        color: e["beige-90"]
+      },
+      primary: {
+        color: o.colors["neutral-90"],
+        backgroundColor: e["primary-40"]
+      },
+      success: s("green"),
+      danger: s("red"),
+      warning: s("orange"),
+      info: s("blue"),
+      teal: c("teal"),
+      blue: c("blue"),
+      orange: c("orange"),
+      pink: c("pink"),
+      green: c("green"),
+      violet: c("violet")
+    },
+    hover: {
+      default: {
+        backgroundColor: e["beige-30"]
+      },
+      primary: {
+        backgroundColor: e["primary-50"]
+      },
+      success: t("green"),
+      danger: t("red"),
+      warning: t("orange"),
+      info: t("blue"),
+      teal: g("teal"),
+      blue: g("blue"),
+      orange: g("orange"),
+      pink: g("pink"),
+      green: g("green"),
+      violet: g("violet")
+    },
+    sizes: {
+      xs: {
+        padding: `${i.xxs} ${i.xs}`,
+        height: l.xs,
+        fontSize: r.xs,
+        gap: i.xs,
+        borderRadius: a.sm
+      },
+      sm: {
+        padding: `${i.xs} ${i.sm}`,
+        height: l.sm,
+        fontSize: r.xs,
+        gap: i.xs
+      },
+      md: {
+        padding: `${i.xs} ${i.sm}`,
+        height: l.md,
+        fontSize: r.sm,
+        gap: i.sm
+      }
+    },
+    icon: {
+      xs: d(12),
+      sm: d(12),
+      md: d(16)
+    },
+    shape: {
+      xs: {
+        width: l.xs,
+        height: l.xs
+      },
+      sm: {
+        width: l.sm,
+        height: l.sm
+      },
+      md: {
+        width: l.md,
+        height: l.md
+      }
+    }
+  };
+}, ee = (o) => {
+  const { space: e, toRem: r } = o;
+  return {
+    minHeight: r(130),
+    padding: e.md
+  };
+}, re = (o, e) => {
+  const { toEm: r, toRem: n } = e, a = n;
+  return {
+    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)
+  };
+}, oe = ({
+  defaultLineHeight: o,
+  toRem: e
+}) => ({
+  html: o,
+  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": o,
+  "subtitle-sm": o
+}), te = {
+  regular: 400,
+  medium: 500,
+  bold: 600
+}, ne = ({
+  defaultLetterSpacing: o,
+  toRem: e
+}) => ({
+  html: o,
+  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: o,
+  md: o,
+  sm: o,
+  xs: e(-0.2),
+  "subtitle-md": e(-0.2),
+  "subtitle-sm": e(-0.2)
+}), ae = (o) => {
+  const { fontWeights: e } = o;
+  return {
+    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
+  };
+}, le = (o) => {
+  const { fonts: e } = o;
+  return {
+    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
+  };
+}, ie = () => ({
+  "subtitle-md": "uppercase",
+  "subtitle-sm": "uppercase"
+}), de = (o) => {
+  const { colors: e } = o;
+  return {
+    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"]
+  };
+}, C = (o) => {
+  const {
+    fontSizes: e,
+    letterSpacings: r,
+    lineHeights: n,
+    textsFontColors: a,
+    textsFontFamily: i,
+    textsFontWeights: d,
+    textsTextTransform: l
+  } = o;
+  return Object.keys(e).reduce((s, t) => ({
+    ...s,
+    [t]: {
+      color: a[t],
+      fontFamily: i[t] || void 0,
+      fontWeight: d[t],
+      fontSize: e[t],
+      lineHeight: n[t] || n.lg,
+      letterSpacing: r[t] || void 0,
+      textTransform: l[t] || void 0
+    }
+  }), {});
+}, se = (o, e, r) => ({
+  texts: [o, "sans-serif"].join(", "),
+  headings: [e, "sans-serif"].join(", "),
+  icons: r
+}), ce = (o) => {
+  const { borderWidths: e, colors: r, fontWeights: n, radii: a, space: i } = o;
+  return {
+    default: {
+      paddingLeft: i.sm,
+      paddingRight: i.sm
+    },
+    top: {
+      paddingTop: i.lg
+    },
+    bottom: {
+      paddingBottom: i.lg
+    },
+    growls: {
+      default: {
+        ...C(o).sm,
+        borderWidth: e.sm,
+        borderStyle: "solid",
+        borderRadius: a.lg,
+        maxWidth: 340
+      },
+      title: {
+        fontWeight: n.bold,
+        color: r["neutral-90"]
+      }
+    },
+    snackbar: {
+      default: {
+        borderRadius: a.lg
+      },
+      separator: {
+        default: {
+          borderLeft: "1px solid",
+          borderLeftColor: r["neutral-30"]
+        },
+        danger: {
+          borderLeftColor: r["red-20"]
+        },
+        warning: {
+          borderLeftColor: r["orange-20"]
+        },
+        info: {
+          borderLeftColor: r["blue-30"]
+        },
+        success: {
+          borderLeftColor: r["green-30"]
+        }
+      }
+    }
+  };
+}, ge = "0.32rem !important", ue = "0.12rem ! important", me = (o) => {
+  const { borderWidths: e, colors: r, focus: n, toRem: a } = o;
+  return {
+    item: {
+      default: {
+        backgroundColor: r["neutral-10"],
+        borderColor: r["neutral-30"],
+        borderWidth: e.sm,
+        borderStyle: "solid",
+        borderRadius: a(16),
+        "&:focus": {
+          borderColor: r["primary-30"],
+          ...n(r["primary-30"])
+        }
+      },
+      sizes: {
+        xs: {
+          width: a(28),
+          height: a(16),
+          marginTop: ge
+        },
+        sm: {
+          width: a(36),
+          height: a(20),
+          marginTop: ue
+        },
+        md: {
+          width: a(44),
+          height: a(24),
+          marginTop: "0 !important"
+        }
+      },
+      checked: {
+        backgroundColor: r["primary-40"],
+        borderColor: r["primary-40"]
+      },
+      disabled: {
+        borderColor: r["beige-60"],
+        backgroundColor: r["beige-40"]
+      }
+    },
+    after: {
+      default: {
+        backgroundColor: r["neutral-10"],
+        borderColor: r["neutral-50"],
+        borderWidth: e.sm,
+        borderStyle: "solid",
+        borderRadius: "50%"
+      },
+      checked: {
+        backgroundColor: r["neutral-10"],
+        borderColor: r["neutral-10"]
+      },
+      disabled: {
+        borderColor: "transparent",
+        backgroundColor: r["beige-60"]
+      },
+      sizes: {
+        xs: {
+          width: a(12),
+          height: a(12)
+        },
+        sm: {
+          width: a(16),
+          height: a(16)
+        },
+        md: {
+          width: a(20),
+          height: a(20)
+        }
+      }
+    },
+    icon: {
+      position: {
+        xs: {
+          left: "2px",
+          right: "2px"
+        },
+        sm: {
+          left: "4px",
+          right: "4px"
+        },
+        md: {
+          left: "4px",
+          right: "4px"
+        }
+      },
+      sizes: {
+        xs: {
+          width: a(10),
+          height: a(10),
+          fontSize: a(10)
+        },
+        sm: {
+          width: a(12),
+          height: a(12),
+          fontSize: a(12)
+        },
+        md: {
+          width: a(16),
+          height: a(16),
+          fontSize: a(16)
+        }
+      }
+    }
+  };
+}, be = (o) => {
+  const { borderWidths: e, colors: r, fontSizes: n, fontWeights: a, radii: i, space: d, toRem: l } = o;
+  return {
+    maxWidth: l(200),
+    backgroundColor: r["neutral-90"],
+    color: r["neutral-10"],
+    padding: `${d.xs} ${d.sm}`,
+    fontSize: n.sm,
+    fontWeight: a.medium,
+    border: `${e.sm} solid ${r["neutral-60"]}`,
+    borderRadius: i.md,
+    boxSizing: "border-box"
+  };
+}, pe = (o) => {
+  const { colors: e } = o;
+  return {
+    default: {
+      color: e["neutral-90"]
+    },
+    danger: {
+      color: e["red-70"]
+    },
+    success: {
+      color: e["green-60"]
+    },
+    warning: {
+      color: e["orange-60"]
+    },
+    info: {
+      color: e["blue-60"]
+    }
+  };
+}, fe = {
   "beige-10": "#FBF9F7",
   "beige-20": "#F6F3EF",
   "beige-30": "#EAE4DE",
@@ -117,221 +1394,94 @@ const x = {
   "yellow-70": "#846A01",
   "yellow-80": "#604D00",
   "yellow-90": "#423500"
-}, p = (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"],
+}, y = (o) => ({
+  ...o,
+  "primary-10": o["yellow-10"],
+  "primary-20": o["yellow-20"],
+  "primary-30": o["yellow-30"],
+  "primary-40": o["yellow-40"],
+  "primary-50": o["yellow-50"],
+  "primary-60": o["yellow-60"],
+  "primary-70": o["yellow-70"],
+  "primary-80": o["yellow-80"],
+  "primary-90": o["yellow-90"],
+  "secondary-blue": o["blue-40"],
+  "secondary-green": o["green-30"],
+  "secondary-orange": o["red-orange-40"],
+  "secondary-pink": o["pink-40"],
+  "secondary-teal": o["teal-40"],
+  "secondary-violet": o["violet-40"],
   overlay: "rgba(0, 0, 0, 0.55)"
-}), c = p(x), b = 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);
-  return {
-    ...e,
-    [t]: c[`${l}${o}`]
-  };
-}, {}), w = {
-  ...c,
-  ...p(b)
-}, J = {
-  colors: w
-}, A = (e) => ({
+}), p = y(fe), he = Object.keys(p).reduce((o, e) => {
+  if (e.startsWith("secondary-") || e === "overlay") return o;
+  const r = 100 - Number(e.slice(-2)), n = e.slice(0, e.length - 2);
+  return {
+    ...o,
+    [e]: p[`${n}${r}`]
+  };
+}, {}), xe = {
+  ...p,
+  ...y(he)
+}, Xe = {
+  colors: xe
+}, Ce = (o) => ({
   "welcome-font": [
     {
-      url: `${e.fontsUrl}/welcome-font-regular`,
+      url: `${o.fontsUrl}/welcome-font-regular`,
       weight: "400"
     },
     {
-      url: `${e.fontsUrl}/welcome-font-medium`,
+      url: `${o.fontsUrl}/welcome-font-medium`,
       weight: "500"
     },
     {
-      url: `${e.fontsUrl}/welcome-font-bold`,
+      url: `${o.fontsUrl}/welcome-font-bold`,
       weight: "600"
     },
     {
-      url: `${e.fontsUrl}/welcome-font-regular-italic`,
+      url: `${o.fontsUrl}/welcome-font-regular-italic`,
       style: "italic",
       weight: "400"
     },
     {
-      url: `${e.fontsUrl}/welcome-font-medium-italic`,
+      url: `${o.fontsUrl}/welcome-font-medium-italic`,
       style: "italic",
       weight: "500"
     },
     {
-      url: `${e.fontsUrl}/welcome-font-bold-italic`,
+      url: `${o.fontsUrl}/welcome-font-bold-italic`,
       style: "italic",
       weight: "600"
     }
   ],
   "welcome-icon-font": [
     {
-      url: `${e.fontsUrl}/icon-font/__ICON_FONT_HASH__/welcome-icon-font`,
+      url: `${o.fontsUrl}/icon-font/__ICON_FONT_HASH__/welcome-icon-font`,
       display: "block"
     }
   ],
   "work-sans": [
     {
-      url: `${e.fontsUrl}/work-sans-variable`,
+      url: `${o.fontsUrl}/work-sans-variable`,
       isVariable: !0,
       stretch: "75% 125%",
       weight: "100 1000"
     }
   ]
-}), E = (e, t) => {
-  const { toEm: o, toRem: l } = t, n = l;
-  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)
-  };
-}, y = ({
-  defaultLineHeight: e,
-  toRem: t
-}) => ({
-  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
-}), D = {
-  regular: 400,
-  medium: 500,
-  bold: 600
-}, T = ({
-  defaultLetterSpacing: e,
-  toRem: t
-}) => ({
-  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)
-}), B = (e) => {
-  const { fontWeights: t } = e;
-  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
-  };
-}, v = (e) => {
-  const { fonts: t } = e;
-  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
-  };
-}, C = () => ({
-  "subtitle-md": "uppercase",
-  "subtitle-sm": "uppercase"
-}), _ = (e) => {
-  const { colors: t } = e;
-  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"]
-  };
-}, $ = (e) => {
-  const {
-    fontSizes: t,
-    letterSpacings: o,
-    lineHeights: l,
-    textsFontColors: n,
-    textsFontFamily: F,
-    textsFontWeights: g,
-    textsTextTransform: u
-  } = e;
-  return Object.keys(t).reduce((s, r) => ({
-    ...s,
-    [r]: {
-      color: n[r],
-      fontFamily: F[r] || void 0,
-      fontWeight: g[r],
-      fontSize: t[r],
-      lineHeight: l[r] || l.lg,
-      letterSpacing: o[r] || void 0,
-      textTransform: u[r] || void 0
-    }
-  }), {});
-}, k = (e, t, o) => ({
-  texts: [e, "sans-serif"].join(", "),
-  headings: [t, "sans-serif"].join(", "),
-  icons: o
-}), a = {
+}), b = {
   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}`
-}, U = ({ colors: e }) => ({
-  default: m`
+}, ye = {
+  slow: `500ms ${b.tertiary}`,
+  medium: `300ms ${b.primary}`,
+  fast: `100ms ${b.secondary}`
+}, ke = ({ colors: o }) => ({
+  default: h`
       background-image: linear-gradient(
         0deg,
-        ${e["primary-40"]},
-        ${e["primary-40"]} 100%
+        ${o["primary-40"]},
+        ${o["primary-40"]} 100%
       );
       background-repeat: no-repeat;
       background-size: 100% 50%;
@@ -341,24 +1491,24 @@ const x = {
         background-size 250ms,
         color 250ms;
     `,
-  hover: m`
+  hover: h`
       opacity: 1;
       background-position-y: 100%;
       background-size: 100% 100%;
     `
-}), N = (e) => ({
+}), Fe = (o) => ({
   none: "0",
-  sm: e.toRem(2),
-  md: e.toRem(4),
-  lg: e.toRem(8),
-  xl: e.toRem(16),
-  xxl: e.toRem(24),
+  sm: o.toRem(2),
+  md: o.toRem(4),
+  lg: o.toRem(8),
+  xl: o.toRem(16),
+  xxl: o.toRem(24),
   full: "100%"
-}), W = {
+}), we = {
   sm: "1px",
   md: "2px",
   lg: "3px"
-}, L = {
+}, Se = {
   xs: 0,
   sm: 480,
   md: 736,
@@ -367,55 +1517,367 @@ const x = {
   xxl: 1440,
   "3xl": 1620,
   "4xl": 1920
-}, O = {
+}, ve = {
   sm: "1px 2px 4px 0 rgba(0,0,0,0.05)",
   md: "3px 4px 10px 0 rgba(0,0,0,0.07)"
-}, I = (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)
-}), z = (e) => ({
-  backgroundColor: e.colors["primary-40"],
-  color: e.colors["neutral-90"]
-}), H = ({ colors: e }) => {
-  function t(o = e["primary-40"]) {
+}, Te = (o) => ({
+  xxs: o.toRem(2),
+  xs: o.toRem(4),
+  sm: o.toRem(8),
+  md: o.toRem(12),
+  lg: o.toRem(16),
+  xl: o.toRem(24),
+  xxl: o.toRem(32),
+  "3xl": o.toRem(48),
+  "4xl": o.toRem(64),
+  "5xl": o.toRem(96),
+  "6xl": o.toRem(128),
+  "7xl": o.toRem(192)
+}), De = (o) => ({
+  backgroundColor: o.colors["primary-40"],
+  color: o.colors["neutral-90"]
+}), $e = ({ colors: o }) => {
+  function e(r = o["primary-40"]) {
     return {
-      boxShadow: `0 0 0 2px ${o}`
+      boxShadow: `0 0 0 2px ${r}`
     };
   }
-  return t;
-}, P = "work-sans", R = 16, G = "-0.019rem", M = 1.15, Y = "https://cdn.welcome-ui.com/fonts", V = "welcome-font", Z = "welcome-icon-font", K = (e = {}) => {
+  return e;
+}, We = (o) => {
+  const { borderWidths: e, colors: r, focus: n, fontSizes: a, fontWeights: i, radii: d, space: l, toRem: s } = o;
+  return {
+    default: {
+      color: r["neutral-90"],
+      fontSize: a.sm,
+      /* Can't use 16 because that's a valid line-height value (16em) */
+      lineHeight: "1rem",
+      fontWeight: i.regular,
+      backgroundColor: r["neutral-10"],
+      borderColor: r["neutral-30"],
+      borderWidth: e.sm,
+      borderStyle: "solid",
+      outline: "none",
+      borderRadius: d.md
+    },
+    hover: {
+      default: {
+        borderColor: r["neutral-40"]
+      },
+      transparency: {
+        borderColor: r["neutral-20"]
+      }
+    },
+    variants: {
+      danger: {
+        borderColor: r["red-70"]
+      },
+      success: {
+        borderColor: r["green-60"]
+      },
+      warning: {
+        borderColor: r["orange-60"]
+      }
+    },
+    focused: {
+      default: {
+        ...n(r["primary-20"]),
+        borderColor: r["primary-40"]
+      },
+      danger: { ...n(r["red-30"]) },
+      warning: { ...n(r["orange-20"]) },
+      success: { ...n(r["green-30"]) }
+    },
+    sizes: {
+      xs: {
+        height: s(24),
+        paddingTop: l.xs,
+        paddingRight: l.sm,
+        paddingBottom: l.xs,
+        paddingLeft: l.sm
+      },
+      sm: {
+        height: s(32),
+        paddingTop: l.sm,
+        paddingRight: l.md,
+        paddingBottom: l.sm,
+        paddingLeft: l.md
+      },
+      md: {
+        height: s(40),
+        paddingTop: l.md,
+        paddingRight: l.md,
+        paddingBottom: l.md,
+        paddingLeft: l.md
+      },
+      lg: {
+        height: s(48),
+        paddingTop: l.lg,
+        paddingRight: l.md,
+        paddingBottom: l.lg,
+        paddingLeft: l.md
+      }
+    },
+    iconPlacement: {
+      xs: {
+        left: s(8),
+        right: s(8)
+      },
+      sm: {
+        left: s(12),
+        right: s(12)
+      },
+      md: {
+        left: s(12),
+        right: s(12)
+      },
+      lg: {
+        left: s(12),
+        right: s(12)
+      }
+    },
+    checkableField: {
+      checked: {
+        color: "neutral-90"
+        // not hex color, only color from browser because is on a content svg
+      },
+      disabled: {
+        opacity: 0.4
+      }
+    },
+    disabled: {
+      backgroundColor: r["beige-40"],
+      color: r["beige-70"],
+      cursor: "not-allowed"
+    },
+    placeholder: {
+      color: r["neutral-50"]
+    },
+    checkablelabel: {
+      default: {},
+      checked: {
+        color: r["neutral-90"],
+        "-webkit-text-stroke": "0.04em"
+      }
+    },
+    select: {
+      default: {
+        maxHeight: s(155),
+        borderRadius: d.md
+      },
+      existing: {
+        color: r["beige-40"],
+        cursor: "not-allowed"
+      },
+      highlighted: {
+        backgroundColor: r["beige-20"],
+        cursor: "default"
+      },
+      selectedAndHighlighted: {
+        backgroundImage: "linear-gradient(0deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08) 100%)"
+      },
+      selected: {
+        color: r["neutral-90"],
+        fontWeight: i.bold
+      },
+      disabled: {
+        color: r["beige-60"],
+        cursor: "not-allowed"
+      }
+    },
+    fieldset: {
+      "border-width": "0"
+    }
+  };
+}, Ae = "work-sans", Be = 16, Ee = "-0.019rem", Re = 1.15, ze = "https://cdn.welcome-ui.com/fonts", Le = "welcome-font", Ie = "welcome-icon-font", Ke = (o = {}) => {
   const {
-    defaultFontFamily: t = P,
-    defaultFontSize: o = R,
-    defaultLetterSpacing: l = G,
-    defaultLineHeight: n = M,
-    fontsUrl: F = Y,
-    headingFontFamily: g = V,
-    iconFontFamily: u = Z,
+    defaultFontFamily: e = Ae,
+    defaultFontSize: r = Be,
+    defaultLetterSpacing: n = Ee,
+    defaultLineHeight: a = Re,
+    fontsUrl: i = ze,
+    headingFontFamily: d = Le,
+    iconFontFamily: l = Ie,
     ...s
-  } = e;
-  let r = {};
-  return r.transformers = { ...h }, r.toEm = (i) => `${i / o}em`, r.toRem = (i) => `${i / o}rem`, r.toPx = (i) => `${i * o}px`, r.colors = c, r.fontsUrl = F, r.fontFaces = A(r), r.fontSizes = E("rem", r), r.defaultLineHeight = n, r.defaultLetterSpacing = l, r.lineHeights = y(r), r.fontWeights = D, r.letterSpacings = T(r), r.fonts = k(t, g, u), r.borderWidths = W, r.screens = L, r.space = I(r), r.inset = r.space, r.radii = N(r), r.transitions = S, r.timingFunction = a, r.shadows = O, r = d(r, s), r.selection = z(r), r.underline = U(r), r.focus = H(r), r.textsFontWeights = B(r), r.textsFontFamily = v(r), r.textsFontColors = _(r), r.textsTextTransform = C(), r.texts = $(r), r.states = f.states, r = d(r, s), r;
+  } = o;
+  let t = {};
+  return t.transformers = { ...F }, t.toEm = (c) => `${c / r}em`, t.toRem = (c) => `${c / r}rem`, t.toPx = (c) => `${c * r}px`, t.colors = p, t.fontsUrl = i, t.fontFaces = Ce(t), t.fontSizes = re("rem", t), t.defaultLineHeight = a, t.defaultLetterSpacing = n, t.lineHeights = oe(t), t.fontWeights = te, t.letterSpacings = ne(t), t.fonts = se(e, d, l), t.borderWidths = we, t.screens = Se, t.space = Te(t), t.inset = t.space, t.radii = Fe(t), t.transitions = ye, t.timingFunction = b, t.shadows = ve, t = f(t, s), t.selection = De(t), t.underline = ke(t), t.focus = $e(t), t.textsFontWeights = ae(t), t.textsFontFamily = le(t), t.textsFontColors = de(t), t.textsTextTransform = ie(), t.texts = C(t), t.defaultField = We(t), t.icons = G(t), t.accordions = D(t), t.alerts = $(t), t.avatars = W(t), t.badges = A(t), t.breadcrumbs = B(t), t.buttons = E(t), t.cards = R(t), t.checkboxes = L(t), t.dateTimePickerCommon = z(t), t.drawers = I(t), t.dropdownMenu = H(t), t.fileDrops = U(t), t.hints = _(t), t.labels = P(t), t.links = M(t), t.loaders = N(t), t.modals = O(t), t.pagination = V(t), t.popovers = Y(t), t.radios = J(t), t.radiosTab = X(t), t.sliders = K(t), t.swipers = Z(t), t.tables = j(t), t.tabs = q(t), t.tags = Q(t), t.textareas = ee(t), t.toasts = ce(t), t.toggles = me(t), t.tooltips = be(t), t.variantIcon = pe(t), t.states = w.states, t = f(t, s), t;
 };
+var He = function() {
+  var o = document.getSelection();
+  if (!o.rangeCount)
+    return function() {
+    };
+  for (var e = document.activeElement, r = [], n = 0; n < o.rangeCount; n++)
+    r.push(o.getRangeAt(n));
+  switch (e.tagName.toUpperCase()) {
+    case "INPUT":
+    case "TEXTAREA":
+      e.blur();
+      break;
+    default:
+      e = null;
+      break;
+  }
+  return o.removeAllRanges(), function() {
+    o.type === "Caret" && o.removeAllRanges(), o.rangeCount || r.forEach(function(a) {
+      o.addRange(a);
+    }), e && e.focus();
+  };
+}, Ue = He, x = {
+  "text/plain": "Text",
+  "text/html": "Url",
+  default: "Text"
+}, _e = "Copy to clipboard: #{key}, Enter";
+function Pe(o) {
+  var e = (/mac os x/i.test(navigator.userAgent) ? "⌘" : "Ctrl") + "+C";
+  return o.replace(/#{\s*key\s*}/g, e);
+}
+function Me(o, e) {
+  var r, n, a, i, d, l, s = !1;
+  e || (e = {}), r = e.debug || !1;
+  try {
+    a = Ue(), i = document.createRange(), d = document.getSelection(), l = document.createElement("span"), l.textContent = o, l.ariaHidden = "true", l.style.all = "unset", l.style.position = "fixed", l.style.top = 0, l.style.clip = "rect(0, 0, 0, 0)", l.style.whiteSpace = "pre", l.style.webkitUserSelect = "text", l.style.MozUserSelect = "text", l.style.msUserSelect = "text", l.style.userSelect = "text", l.addEventListener("copy", function(c) {
+      if (c.stopPropagation(), e.format)
+        if (c.preventDefault(), typeof c.clipboardData > "u") {
+          r && console.warn("unable to use e.clipboardData"), r && console.warn("trying IE specific stuff"), window.clipboardData.clearData();
+          var g = x[e.format] || x.default;
+          window.clipboardData.setData(g, o);
+        } else
+          c.clipboardData.clearData(), c.clipboardData.setData(e.format, o);
+      e.onCopy && (c.preventDefault(), e.onCopy(c.clipboardData));
+    }), document.body.appendChild(l), i.selectNodeContents(l), d.addRange(i);
+    var t = document.execCommand("copy");
+    if (!t)
+      throw new Error("copy command was unsuccessful");
+    s = !0;
+  } catch (c) {
+    r && console.error("unable to copy using execCommand: ", c), r && console.warn("trying IE specific stuff");
+    try {
+      window.clipboardData.setData(e.format || "text", o), e.onCopy && e.onCopy(window.clipboardData), s = !0;
+    } catch (g) {
+      r && console.error("unable to copy using clipboardData: ", g), r && console.error("falling back to prompt"), n = Pe("message" in e ? e.message : _e), window.prompt(n, o);
+    }
+  } finally {
+    d && (typeof d.removeRange == "function" ? d.removeRange(i) : d.removeAllRanges()), l && document.body.removeChild(l), a();
+  }
+  return s;
+}
+var Ne = Me;
+const Ge = /* @__PURE__ */ T(Ne);
+function Ze(o, e) {
+  const [r, n] = S();
+  return [v(() => {
+    let i;
+    typeof o == "number" || typeof o == "string" ? i = o.toString() : o.current instanceof HTMLInputElement ? i = o.current.value : o.current instanceof HTMLElement && (i = o.current.textContent);
+    const d = Ge(i);
+    n(d), e && setTimeout(n, e);
+  }, [o, e]), r];
+}
 export {
-  j as Box,
-  ae as WuiProvider,
-  te as componentSystem,
-  K as createTheme,
-  J as darkTheme,
-  re as filterSystemProps,
-  ne as forwardRef,
-  oe as shouldForwardProp,
-  le as system,
-  ie as wrapperSystem
+  Qe as Accordion,
+  or as Alert,
+  nr as AspectRatio,
+  zr as AssetDrawer,
+  Eo as AssetModal,
+  lr as Avatar,
+  dr as Badge,
+  cr as Box,
+  ur as Breadcrumb,
+  mr as BreadcrumbComponent,
+  pr as Button,
+  xr as ButtonGroup,
+  yr as Card,
+  kr as CardComponent,
+  wr as Checkbox,
+  vr as ClearButton,
+  $r as CloseButton,
+  Ar as DatePicker,
+  Er as DateTimePicker,
+  Lr as Drawer,
+  Ir as DrawerBackdrop,
+  Pr as DropdownMenu,
+  Gr as Field,
+  Xr as FieldGroup,
+  jr as FileDrop,
+  ao as FileUpload,
+  io as Flex,
+  co as Grid,
+  uo as Hint,
+  po as Icon,
+  Or as IconGroupWrapper,
+  Vr as IconWrapper,
+  qr as ImagePreview,
+  xo as InputText,
+  yo as Label,
+  wo as Link,
+  vo as Loader,
+  Do as Logo,
+  Ro as Modal,
+  Lt as Notifications,
+  Io as Pagination,
+  Uo as PasswordInput,
+  Po as Picker,
+  No as Popover,
+  Go as PopoverHover,
+  Jo as Radio,
+  Ko as RadioGroup,
+  jo as RadioTab,
+  Qo as Search,
+  ot as Select,
+  at as Shape,
+  it as Slider,
+  dt as SliderComponent,
+  $o as SolutionsSymbol,
+  mt as Stack,
+  fr as StyledButton,
+  Tr as StyledClearButton,
+  Kr as StyledFieldGroup,
+  mo as StyledHint,
+  fo as StyledIcon,
+  ko as StyledLabel,
+  et as StyledSearch,
+  tt as StyledSelect,
+  pt as StyledSwiper,
+  Tt as StyledTag,
+  ft as Swiper,
+  Wo as Symbol,
+  Ft as Tab,
+  wt as TabComponent,
+  Ct as Table,
+  yt as TableComponent,
+  Dt as Tag,
+  Wt as Text,
+  Bt as Textarea,
+  Rt as TimePicker,
+  It as Toast,
+  Nt as Toggle,
+  Ot as Tooltip,
+  Hr as Trigger,
+  Yt as VariantIcon,
+  Xt as WelcomeLoader,
+  Ao as WelcomeUILogo,
+  Zt as WuiProvider,
+  Ke as createTheme,
+  Xe as darkTheme,
+  Ht as dismiss,
+  st as ensureMinMax,
+  Yr as getBaseType,
+  eo as getFileIcon,
+  ro as getFileName,
+  oo as getFileSize,
+  to as getMimeType,
+  Ut as remove,
+  ct as round,
+  gt as thumbWidth,
+  _t as toast,
+  er as useAccordion,
+  Ze as useCopyText,
+  Ur as useDrawer,
+  Mr as useDropdownMenu,
+  zo as useModal,
+  Oo as usePopover,
+  Vo as usePopoverHover,
+  ht as useSwiper,
+  St as useTab,
+  Pt as useToast
 };