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

package/dist/index.mjs

@@ -1,75 +1,118 @@
 "use client";
-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 };
+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) && (t[n] = y(t[n], e[n]));
-  return t;
+    e.hasOwnProperty(n) && (r[n] = f(r[n], e[n]));
+  return r;
 }
-const N = (r) => {
-  const { borderWidths: e, colors: t, fontSizes: n, radii: a, space: s, texts: c, transitions: l } = r;
+const D = (o) => {
+  const { borderWidths: e, colors: r, fontSizes: n, radii: a, space: i, texts: d, transitions: l } = o;
   return {
-    padding: s.lg,
+    padding: i.lg,
     wrapper: {
-      backgroundColor: t["neutral-10"],
+      backgroundColor: r["neutral-10"],
       transition: l.medium,
-      border: `${e.sm} solid ${t["neutral-30"]}`,
+      border: `${e.sm} solid ${r["neutral-30"]}`,
       borderRadius: a.md
     },
     icon: {
-      color: t["neutral-90"]
+      color: r["neutral-90"]
     },
     content: {
       fontSize: n.sm
     },
-    title: c.h5
+    title: d.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`]
+}, $ = (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: t["neutral-10"],
-      borderColor: t["neutral-30"],
-      borderRadius: s.lg,
+      backgroundColor: r["neutral-10"],
+      borderColor: r["neutral-30"],
+      borderRadius: i.lg,
       borderStyle: "solid",
       borderWidth: e.sm,
-      color: t["neutral-80"],
+      color: r["neutral-80"],
       fontSize: n.sm
     },
     title: {
       default: {
-        color: t["neutral-90"],
+        color: r["neutral-90"],
         fontWeight: a.medium
       },
       sizes: {
         sm: {
-          marginBottom: c.xs
+          marginBottom: d.xs
         },
         md: {
-          marginBottom: c.sm
+          marginBottom: d.sm
         }
       }
     },
@@ -78,21 +121,21 @@ const N = (r) => {
     info: l("blue"),
     success: l("green"),
     beige: {
-      backgroundColor: t["beige-20"],
-      borderColor: t["beige-20"],
-      color: t["beige-80"]
+      backgroundColor: r["beige-20"],
+      borderColor: r["beige-20"],
+      color: r["beige-80"]
     },
     sizes: {
       sm: {
-        padding: c.lg
+        padding: d.lg
       },
       md: {
-        padding: c.xl
+        padding: d.xl
       }
     }
   };
-}, O = (r) => {
-  const { colors: e, fontWeights: t, toRem: n } = r;
+}, W = (o) => {
+  const { colors: e, fontWeights: r, toRem: n } = o;
   return {
     sizes: {
       sm: n(20),
@@ -103,15 +146,15 @@ const N = (r) => {
     },
     text: {
       color: e["neutral-90"],
-      fontWeight: t.bold
+      fontWeight: r.bold
     }
   };
-}, L = (r) => {
-  const { colors: e, fontWeights: t, space: n, texts: a, toRem: s } = r;
+}, A = (o) => {
+  const { colors: e, fontWeights: r, space: n, texts: a, toRem: i } = o;
   return {
     default: {
       ...a.xs,
-      fontWeight: t.medium
+      fontWeight: r.medium
     },
     variants: {
       default: {
@@ -136,22 +179,22 @@ const N = (r) => {
     sizes: {
       sm: {
         padding: n.xxs,
-        height: s(16),
-        borderRadius: s(14)
+        height: i(16),
+        borderRadius: i(14)
       },
       md: {
         padding: n.xs,
-        height: s(20),
-        borderRadius: s(14)
+        height: i(20),
+        borderRadius: i(14)
       }
     }
   };
-}, H = (r) => {
-  const { colors: e, space: t, texts: n } = r;
+}, B = (o) => {
+  const { colors: e, space: r, texts: n } = o;
   return {
     list: {
       ...n["subtitle-sm"],
-      padding: `${t.sm} 0`
+      padding: `${r.sm} 0`
     },
     item: {
       default: {
@@ -166,13 +209,13 @@ const N = (r) => {
       }
     },
     separator: {
-      padding: `0 ${t.xs}`,
+      padding: `0 ${r.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,
+}, 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,
@@ -180,24 +223,24 @@ const N = (r) => {
   };
   return {
     primary: {
-      ...i,
-      color: r.colors["neutral-90"],
+      ...s,
+      color: o.colors["neutral-90"],
       backgroundColor: e["primary-40"],
       borderColor: e["primary-40"]
     },
     secondary: {
-      ...i,
+      ...s,
       backgroundColor: e["neutral-90"],
       borderColor: e["neutral-90"]
     },
     tertiary: {
-      ...i,
+      ...s,
       color: e["neutral-90"],
       backgroundColor: "transparent",
       borderColor: e["neutral-90"]
     },
     ghost: {
-      ...i,
+      ...s,
       color: e["neutral-90"],
       backgroundColor: "transparent",
       borderColor: "transparent"
@@ -229,10 +272,10 @@ const N = (r) => {
         borderColor: "transparent"
       },
       tertiary: {
-        backgroundColor: f(e["neutral-90"], 0.1)
+        backgroundColor: m(e["neutral-90"], 0.1)
       },
       ghost: {
-        backgroundColor: f(e["neutral-90"], 0.1)
+        backgroundColor: m(e["neutral-90"], 0.1)
       },
       danger: {
         primary: {
@@ -248,14 +291,14 @@ const N = (r) => {
       }
     },
     focus: {
-      primary: { ...t(e["primary-20"]) },
-      secondary: { ...t(e["neutral-40"]) },
-      tertiary: { ...t(e["neutral-40"]) },
-      ghost: { ...t(e["neutral-40"]) },
+      primary: { ...r(e["primary-20"]) },
+      secondary: { ...r(e["neutral-40"]) },
+      tertiary: { ...r(e["neutral-40"]) },
+      ghost: { ...r(e["neutral-40"]) },
       danger: {
-        primary: { ...t(e["red-40"]) },
-        tertiary: { ...t(e["red-40"]) },
-        ghost: { ...t(e["red-40"]) }
+        primary: { ...r(e["red-40"]) },
+        tertiary: { ...r(e["red-40"]) },
+        ghost: { ...r(e["red-40"]) }
       }
     },
     active: {
@@ -268,10 +311,10 @@ const N = (r) => {
         borderColor: e["neutral-50"]
       },
       tertiary: {
-        backgroundColor: f(e["neutral-90"], 0.4)
+        backgroundColor: m(e["neutral-90"], 0.4)
       },
       ghost: {
-        backgroundColor: f(e["neutral-90"], 0.4)
+        backgroundColor: m(e["neutral-90"], 0.4)
       },
       danger: {
         primary: {
@@ -287,32 +330,32 @@ const N = (r) => {
       }
     },
     disabled: {
-      ...i,
+      ...s,
       color: e["beige-70"],
       backgroundColor: e["beige-40"],
       borderColor: e["beige-40"],
-      "&:focus": { ...t(e["beige-10"]) }
+      "&:focus": { ...r(e["beige-10"]) }
     },
     sizes: {
       xs: {
         height: l(24),
-        padding: `${s.xs} ${s.sm}`
+        padding: `${i.xs} ${i.sm}`
       },
       sm: {
         height: l(32),
-        padding: `${s.sm} ${s.md}`
+        padding: `${i.sm} ${i.md}`
       },
       md: {
-        ...c.sm,
+        ...d.sm,
         fontWeight: n.bold,
         height: l(40),
-        padding: `${s.sm} ${s.lg}`
+        padding: `${i.sm} ${i.lg}`
       },
       lg: {
-        ...c.sm,
+        ...d.sm,
         fontWeight: n.bold,
         height: l(48),
-        padding: `${s.md} ${s.xl}`
+        padding: `${i.md} ${i.xl}`
       }
     },
     icon: {
@@ -330,17 +373,922 @@ const N = (r) => {
       }
     }
   };
-}, P = (r) => {
-  const { borderWidths: e, colors: t } = r;
+}, R = (o) => {
+  const { borderWidths: e, colors: r } = o;
   return {
     default: {
-      backgroundColor: t["neutral-10"],
+      backgroundColor: r["neutral-10"],
       borderStyle: "solid",
       borderWidth: e.sm,
-      borderColor: t["neutral-30"]
+      borderColor: r["neutral-30"]
     }
   };
-}, M = {
+}, 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",
@@ -446,221 +1394,94 @@ const N = (r) => {
   "yellow-70": "#846A01",
   "yellow-80": "#604D00",
   "yellow-90": "#423500"
-}, 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"],
+}, 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)"
-}), 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 {
-    ...r,
-    [e]: x[`${n}${t}`]
-  };
-}, {}), j = {
-  ...x,
-  ...E(Y)
-}, Oe = {
-  colors: j
-}, q = (r) => ({
+}), 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: `${r.fontsUrl}/welcome-font-regular`,
+      url: `${o.fontsUrl}/welcome-font-regular`,
       weight: "400"
     },
     {
-      url: `${r.fontsUrl}/welcome-font-medium`,
+      url: `${o.fontsUrl}/welcome-font-medium`,
       weight: "500"
     },
     {
-      url: `${r.fontsUrl}/welcome-font-bold`,
+      url: `${o.fontsUrl}/welcome-font-bold`,
       weight: "600"
     },
     {
-      url: `${r.fontsUrl}/welcome-font-regular-italic`,
+      url: `${o.fontsUrl}/welcome-font-regular-italic`,
       style: "italic",
       weight: "400"
     },
     {
-      url: `${r.fontsUrl}/welcome-font-medium-italic`,
+      url: `${o.fontsUrl}/welcome-font-medium-italic`,
       style: "italic",
       weight: "500"
     },
     {
-      url: `${r.fontsUrl}/welcome-font-bold-italic`,
+      url: `${o.fontsUrl}/welcome-font-bold-italic`,
       style: "italic",
       weight: "600"
     }
   ],
   "welcome-icon-font": [
     {
-      url: `${r.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: `${r.fontsUrl}/work-sans-variable`,
+      url: `${o.fontsUrl}/work-sans-variable`,
       isVariable: !0,
       stretch: "75% 125%",
       weight: "100 1000"
     }
   ]
-}), V = (r, e) => {
-  const { toEm: t, 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)
-  };
-}, Z = ({
-  defaultLineHeight: r,
-  toRem: e
-}) => ({
-  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
-}, K = ({
-  defaultLetterSpacing: r,
-  toRem: 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: 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
-  };
-}, X = (r) => {
-  const { fonts: e } = r;
-  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
-  };
-}, ee = () => ({
-  "subtitle-md": "uppercase",
-  "subtitle-sm": "uppercase"
-}), re = (r) => {
-  const { colors: e } = r;
-  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"]
-  };
-}, oe = (r) => {
-  const {
-    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
-    }
-  }), {});
-}, te = (r, e, t) => ({
-  texts: [r, "sans-serif"].join(", "),
-  headings: [e, "sans-serif"].join(", "),
-  icons: t
-}), F = {
+}), b = {
   primary: "ease",
   secondary: "linear",
   tertiary: "cubic-bezier(0.41, 0.094, 0.54, 0.07)"
-}, ne = {
-  slow: `500ms ${F.tertiary}`,
-  medium: `300ms ${F.primary}`,
-  fast: `100ms ${F.secondary}`
-}, ae = ({ colors: r }) => ({
-  default: g`
+}, ye = {
+  slow: `500ms ${b.tertiary}`,
+  medium: `300ms ${b.primary}`,
+  fast: `100ms ${b.secondary}`
+}, ke = ({ colors: o }) => ({
+  default: h`
       background-image: linear-gradient(
         0deg,
-        ${r["primary-40"]},
-        ${r["primary-40"]} 100%
+        ${o["primary-40"]},
+        ${o["primary-40"]} 100%
       );
       background-repeat: no-repeat;
       background-size: 100% 50%;
@@ -670,24 +1491,24 @@ const N = (r) => {
         background-size 250ms,
         color 250ms;
     `,
-  hover: g`
+  hover: h`
       opacity: 1;
       background-position-y: 100%;
       background-size: 100% 100%;
     `
-}), le = (r) => ({
+}), Fe = (o) => ({
   none: "0",
-  sm: r.toRem(2),
-  md: r.toRem(4),
-  lg: r.toRem(8),
-  xl: r.toRem(16),
-  xxl: r.toRem(24),
+  sm: o.toRem(2),
+  md: o.toRem(4),
+  lg: o.toRem(8),
+  xl: o.toRem(16),
+  xxl: o.toRem(24),
   full: "100%"
-}), se = {
+}), we = {
   sm: "1px",
   md: "2px",
   lg: "3px"
-}, ie = {
+}, Se = {
   xs: 0,
   sm: 480,
   md: 736,
@@ -696,277 +1517,367 @@ const N = (r) => {
   xxl: 1440,
   "3xl": 1620,
   "4xl": 1920
-}, de = {
+}, ve = {
   sm: "1px 2px 4px 0 rgba(0,0,0,0.05)",
   md: "3px 4px 10px 0 rgba(0,0,0,0.07)"
-}, 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"]) {
+}, 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 ${t}`
+      boxShadow: `0 0 0 2px ${r}`
     };
   }
   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: 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}`)};
+}, 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"]
       }
-    }
-
-    & > *: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;
+    },
+    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: e = Ae,
+    defaultFontSize: r = Be,
+    defaultLetterSpacing: n = Ee,
+    defaultLineHeight: a = Re,
+    fontsUrl: i = ze,
+    headingFontFamily: d = Le,
+    iconFontFamily: l = Ie,
+    ...s
+  } = 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;
   }
-
-  ${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 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);
     }
-    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;
+  } finally {
+    d && (typeof d.removeRange == "function" ? d.removeRange(i) : d.removeAllRanges()), l && document.body.removeChild(l), a();
   }
-  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" })));
+  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 {
-  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
+  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
 };