welcome-ui 1.0.0-beta.9 → 7.0.0-alpha.7

package/dist/theme.mjs

@@ -0,0 +1,1649 @@
+"use client";
+import { css as f, rpxTransformers as F, defaultTheme as y } from "@xstyled/styled-components";
+import { h as b } from "./hex-to-rgba-BIDK-3ab.mjs";
+function p(e, r) {
+  if (typeof e != "object" || e === null) return r;
+  if (typeof r != "object" || r === null) return e;
+  const o = { ...e };
+  for (const n in r)
+    r.hasOwnProperty(n) && (o[n] = p(o[n], r[n]));
+  return o;
+}
+const w = (e) => {
+  const { borderWidths: r, colors: o, fontSizes: n, radii: l, space: a, texts: s, transitions: d } = e;
+  return {
+    padding: a.lg,
+    wrapper: {
+      backgroundColor: o["neutral-10"],
+      transition: d.medium,
+      border: `${r.sm} solid ${o["neutral-30"]}`,
+      borderRadius: l.md
+    },
+    icon: {
+      color: o["neutral-90"]
+    },
+    content: {
+      fontSize: n.sm
+    },
+    title: s.h5
+  };
+}, $ = (e) => {
+  const { borderWidths: r, colors: o, fontSizes: n, fontWeights: l, radii: a, space: s } = e, d = (i) => ({
+    backgroundColor: o[`${i}-10`],
+    borderColor: o[`${i}-10`],
+    color: o[`${i}-90`]
+  });
+  return {
+    default: {
+      backgroundColor: o["neutral-10"],
+      borderColor: o["neutral-30"],
+      borderRadius: a.lg,
+      borderStyle: "solid",
+      borderWidth: r.sm,
+      color: o["neutral-80"],
+      fontSize: n.sm
+    },
+    title: {
+      default: {
+        color: o["neutral-90"],
+        fontWeight: l.medium
+      },
+      sizes: {
+        sm: {
+          marginBottom: s.xs
+        },
+        md: {
+          marginBottom: s.sm
+        }
+      }
+    },
+    danger: d("red"),
+    warning: d("orange"),
+    info: d("blue"),
+    success: d("green"),
+    beige: {
+      backgroundColor: o["beige-20"],
+      borderColor: o["beige-20"],
+      color: o["beige-80"]
+    },
+    sizes: {
+      sm: {
+        padding: s.lg
+      },
+      md: {
+        padding: s.xl
+      }
+    }
+  };
+}, S = (e) => {
+  const { colors: r, fontWeights: o, toRem: n } = e;
+  return {
+    sizes: {
+      sm: n(20),
+      md: n(30),
+      lg: n(40),
+      xl: n(50),
+      xxl: n(60)
+    },
+    text: {
+      color: r["neutral-90"],
+      fontWeight: o.bold
+    }
+  };
+}, W = (e) => {
+  const { colors: r, fontWeights: o, space: n, texts: l, toRem: a } = e;
+  return {
+    default: {
+      ...l.xs,
+      fontWeight: o.medium
+    },
+    variants: {
+      default: {
+        color: r["beige-70"],
+        backgroundColor: r["beige-30"]
+      },
+      primary: {
+        color: r["neutral-90"],
+        backgroundColor: r["primary-40"]
+      }
+    },
+    disabled: {
+      default: {
+        color: r["beige-40"],
+        backgroundColor: r["beige-20"]
+      },
+      primary: {
+        color: r["primary-80"],
+        backgroundColor: r["primary-50"]
+      }
+    },
+    sizes: {
+      sm: {
+        padding: n.xxs,
+        height: a(16),
+        borderRadius: a(14)
+      },
+      md: {
+        padding: n.xs,
+        height: a(20),
+        borderRadius: a(14)
+      }
+    }
+  };
+}, T = (e) => {
+  const { colors: r, space: o, texts: n } = e;
+  return {
+    list: {
+      ...n["subtitle-sm"],
+      padding: `${o.sm} 0`
+    },
+    item: {
+      default: {
+        color: r["neutral-50"],
+        textDecoration: "none"
+      },
+      hover: {
+        color: r["neutral-70"]
+      },
+      active: {
+        color: r["neutral-70"]
+      }
+    },
+    separator: {
+      padding: `0 ${o.xs}`,
+      color: r["neutral-50"]
+    }
+  };
+}, z = (e) => {
+  const { colors: r, focus: o, fontWeights: n, radii: l, space: a, texts: s, toRem: d } = e, i = {
+    ...s.xs,
+    color: r["neutral-10"],
+    fontWeight: n.bold,
+    letterSpacing: 0,
+    borderRadius: l.md
+  };
+  return {
+    primary: {
+      ...i,
+      color: e.colors["neutral-90"],
+      backgroundColor: r["primary-40"],
+      borderColor: r["primary-40"]
+    },
+    secondary: {
+      ...i,
+      backgroundColor: r["neutral-90"],
+      borderColor: r["neutral-90"]
+    },
+    tertiary: {
+      ...i,
+      color: r["neutral-90"],
+      backgroundColor: "transparent",
+      borderColor: r["neutral-90"]
+    },
+    ghost: {
+      ...i,
+      color: r["neutral-90"],
+      backgroundColor: "transparent",
+      borderColor: "transparent"
+    },
+    danger: {
+      primary: {
+        color: r["neutral-10"],
+        backgroundColor: r["red-70"],
+        borderColor: r["red-70"]
+      },
+      tertiary: {
+        backgroundColor: "transparent",
+        color: r["red-80"],
+        borderColor: r["red-80"]
+      },
+      ghost: {
+        color: r["red-80"],
+        backgroundColor: "transparent",
+        borderColor: "transparent"
+      }
+    },
+    hover: {
+      primary: {
+        backgroundColor: r["primary-30"],
+        borderColor: r["primary-30"]
+      },
+      secondary: {
+        backgroundColor: r["neutral-70"],
+        borderColor: "transparent"
+      },
+      tertiary: {
+        backgroundColor: b(r["neutral-90"], 0.1)
+      },
+      ghost: {
+        backgroundColor: b(r["neutral-90"], 0.1)
+      },
+      danger: {
+        primary: {
+          backgroundColor: r["red-60"],
+          borderColor: r["red-60"]
+        },
+        tertiary: {
+          backgroundColor: r["red-10"]
+        },
+        ghost: {
+          backgroundColor: r["red-10"]
+        }
+      }
+    },
+    focus: {
+      primary: { ...o(r["primary-20"]) },
+      secondary: { ...o(r["neutral-40"]) },
+      tertiary: { ...o(r["neutral-40"]) },
+      ghost: { ...o(r["neutral-40"]) },
+      danger: {
+        primary: { ...o(r["red-40"]) },
+        tertiary: { ...o(r["red-40"]) },
+        ghost: { ...o(r["red-40"]) }
+      }
+    },
+    active: {
+      primary: {
+        backgroundColor: r["primary-10"],
+        borderColor: r["primary-10"]
+      },
+      secondary: {
+        backgroundColor: r["neutral-50"],
+        borderColor: r["neutral-50"]
+      },
+      tertiary: {
+        backgroundColor: b(r["neutral-90"], 0.4)
+      },
+      ghost: {
+        backgroundColor: b(r["neutral-90"], 0.4)
+      },
+      danger: {
+        primary: {
+          backgroundColor: r["red-50"],
+          borderColor: r["red-50"]
+        },
+        tertiary: {
+          backgroundColor: r["red-20"]
+        },
+        ghost: {
+          backgroundColor: r["red-20"]
+        }
+      }
+    },
+    disabled: {
+      ...i,
+      color: r["beige-70"],
+      backgroundColor: r["beige-40"],
+      borderColor: r["beige-40"],
+      "&:focus": { ...o(r["beige-10"]) }
+    },
+    sizes: {
+      xs: {
+        height: d(24),
+        padding: `${a.xs} ${a.sm}`
+      },
+      sm: {
+        height: d(32),
+        padding: `${a.sm} ${a.md}`
+      },
+      md: {
+        ...s.sm,
+        fontWeight: n.bold,
+        height: d(40),
+        padding: `${a.sm} ${a.lg}`
+      },
+      lg: {
+        ...s.sm,
+        fontWeight: n.bold,
+        height: d(48),
+        padding: `${a.md} ${a.xl}`
+      }
+    },
+    icon: {
+      only: {
+        xs: d(16),
+        sm: d(16),
+        md: d(16),
+        lg: d(24)
+      },
+      default: {
+        xs: d(12),
+        sm: d(16),
+        md: d(16),
+        lg: d(16)
+      }
+    }
+  };
+}, v = (e) => {
+  const { borderWidths: r, colors: o } = e;
+  return {
+    default: {
+      backgroundColor: o["neutral-10"],
+      borderStyle: "solid",
+      borderWidth: r.sm,
+      borderColor: o["neutral-30"]
+    }
+  };
+}, B = (e) => {
+  const { colors: r, fontWeights: o } = e;
+  return {
+    item: {
+      selected: {
+        color: r["neutral-90"],
+        fontWeight: o.bold,
+        backgroundColor: r["primary-40"],
+        outline: "none"
+      },
+      today: {
+        color: r["neutral-90"],
+        fontWeight: o.bold
+      }
+    }
+  };
+}, A = (e) => {
+  const { colors: r, radii: o, toRem: n } = e;
+  return {
+    default: {
+      width: n(16),
+      height: n(16),
+      flexShrink: 0,
+      borderRadius: o.sm
+    },
+    disabled: {
+      borderColor: r["beige-60"]
+    },
+    checked: {
+      color: r["neutral-90"],
+      backgroundColor: r["primary-40"],
+      borderColor: r["primary-40"]
+    }
+  };
+}, D = (e) => {
+  const { colors: r, space: o, toRem: n } = e;
+  return {
+    backdrop: {
+      backgroundColor: r.overlay,
+      zIndex: 999
+    },
+    default: {
+      zIndex: 999
+    },
+    closeButton: {},
+    title: {
+      margin: 0,
+      backgroundColor: r["neutral-10"],
+      padding: `${o.xl} ${o["5xl"]} ${o.xl} ${o.xl}`
+    },
+    content: {
+      padding: `${o.xl}`
+    },
+    footer: {
+      backgroundColor: r["neutral-10"],
+      padding: `${o.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) }
+      }
+    }
+  };
+}, E = (e) => {
+  const { colors: r, fontSizes: o, radii: n, toRem: l } = e, a = r["beige-30"];
+  return {
+    inner: {
+      fontSize: o.sm,
+      minWidth: l(130),
+      borderRadius: n.md
+    },
+    item: {
+      backgroundColor: "transparent",
+      color: r["beige-70"],
+      "&:hover": {
+        backgroundColor: r["beige-30"],
+        color: r["neutral-90"]
+      },
+      "&:focus": {
+        backgroundColor: r["beige-30"],
+        color: r["neutral-90"]
+      },
+      "&[disabled]": {
+        backgroundColor: "transparent",
+        color: r["beige-40"],
+        cursor: "not-allowed"
+      }
+    },
+    separator: {
+      backgroundColor: a
+    }
+  };
+}, R = (e) => {
+  const { colors: r, toRem: o } = e;
+  return {
+    default: {
+      minHeight: o(200),
+      borderStyle: "dashed"
+    },
+    dragAccept: {},
+    dragReject: {},
+    disabled: {
+      backgroundColor: r["beige-30"]
+    }
+  };
+}, L = (e) => {
+  const { colors: r, texts: o } = e;
+  return {
+    default: {
+      ...o.xs,
+      color: r["neutral-60"]
+    },
+    danger: {
+      color: r["red-70"]
+    },
+    success: {
+      color: r["green-70"]
+    },
+    warning: {
+      color: r["orange-70"]
+    }
+  };
+}, I = (e) => {
+  const { colors: r, fontSizes: o, fontWeights: n } = e;
+  return {
+    color: r["neutral-60"],
+    fontSize: o.sm,
+    fontWeight: n.medium
+  };
+}, H = (e) => {
+  const { colors: r, fontWeights: o, icons: n, space: l, transitions: a } = e;
+  return {
+    default: {
+      color: r["neutral-90"],
+      fontWeight: o.medium,
+      transition: a.medium
+    },
+    withExternalLink: {
+      backgroundSize: `calc(100% - ${n.sm} - ${l.sm}) 50%`
+    },
+    disabled: {
+      color: r["neutral-50"],
+      backgroundImage: `linear-gradient(0deg, ${r["neutral-30"]}, ${r["neutral-30"]} 100%)`
+    },
+    primary: {
+      default: {},
+      hover: {}
+    },
+    secondary: {
+      default: {
+        backgroundImage: `linear-gradient(0deg, ${r["neutral-90"]}, ${r["neutral-90"]} 100%)`
+      },
+      hover: {
+        color: r["neutral-10"]
+      }
+    }
+  };
+}, _ = ({ toRem: e }) => ({
+  xs: e(8),
+  sm: e(10),
+  md: e(15),
+  lg: e(20)
+}), U = ({ toRem: e }) => ({
+  xs: e(12),
+  sm: e(16),
+  md: e(24),
+  lg: e(32),
+  xl: e(48),
+  xxl: e(64)
+}), N = (e) => {
+  const { colors: r, radii: o, space: n, toRem: l } = e;
+  return {
+    backdrop: {
+      backgroundColor: r.overlay,
+      zIndex: 999
+    },
+    default: {
+      zIndex: 999,
+      borderRadius: o.md
+    },
+    header: {
+      backgroundColor: r["neutral-10"],
+      borderTopLeftRadius: o.md,
+      borderTopRightRadius: o.md,
+      paddingTop: n.xxl,
+      paddingRight: n["3xl"],
+      paddingBottom: n.xxl,
+      paddingLeft: n.xxl,
+      subtitle: {
+        color: r["neutral-70"],
+        variant: "sm",
+        margin: 0
+      }
+    },
+    body: {
+      color: r["neutral-90"],
+      paddingRight: n["3xl"],
+      paddingBottom: n.xxl,
+      paddingLeft: n.xxl
+    },
+    footer: {
+      backgroundColor: r["neutral-10"],
+      borderTop: `solid ${r["neutral-30"]}`,
+      borderBottomLeftRadius: o.md,
+      borderBottomRightRadius: o.md,
+      children: {
+        paddingRight: n.xxl,
+        paddingLeft: n.xxl,
+        paddingTop: n.lg,
+        paddingBottom: n.xl
+      },
+      information: {
+        backgroundColor: r["beige-20"],
+        paddingRight: n.xxl,
+        paddingLeft: n.xxl,
+        paddingTop: n.xl,
+        paddingBottom: n.xxl
+      }
+    },
+    gutter: l(32),
+    sizes: {
+      xs: {
+        width: l(320)
+      },
+      sm: {
+        width: l(450)
+      },
+      md: {
+        width: l(600)
+      },
+      lg: {
+        width: l(730)
+      },
+      auto: {}
+    },
+    cover: {}
+  };
+}, G = (e) => {
+  const { colors: r, focus: o, fontSizes: n, fontWeights: l, toRem: a } = e;
+  return {
+    default: {
+      width: a(32),
+      height: a(32),
+      color: r["neutral-90"],
+      fontWeight: l.bold,
+      fontSize: n.xs
+    },
+    item: {
+      "&:hover, &:focus": {
+        backgroundColor: r["neutral-30"]
+      },
+      "&:focus": { ...o(r["neutral-60"]) }
+    },
+    active: {
+      backgroundColor: r["neutral-90"],
+      color: r["neutral-10"],
+      "&:hover, &:focus": {
+        backgroundColor: r["neutral-90"]
+      }
+    },
+    disabled: {
+      backgroundColor: r["beige-40"],
+      color: r["beige-70"]
+    }
+  };
+}, O = (e) => {
+  const { borderWidths: r, colors: o, space: n, texts: l, toRem: a } = e;
+  return {
+    default: {
+      ...l.sm,
+      backgroundColor: o["neutral-90"],
+      color: o["neutral-10"],
+      maxWidth: a(700),
+      zIndex: 1
+    },
+    content: {
+      display: "block",
+      padding: n.md
+    },
+    title: {
+      ...l.h6,
+      padding: `${n.md} ${n.md} ${n.xs}`,
+      color: o["neutral-10"],
+      borderBottomColor: o["neutral-70"],
+      borderBottomWidth: r.sm,
+      borderBottomStyle: "solid"
+    }
+  };
+}, M = (e) => {
+  const { colors: r, toRem: o } = e;
+  return {
+    default: {
+      width: o(16),
+      height: o(16)
+    },
+    checked: {
+      color: r["neutral-90"],
+      borderColor: r["primary-40"]
+    },
+    checkedCenteredColor: {
+      default: r["primary-40"],
+      disabled: r["beige-60"]
+    }
+  };
+}, P = (e) => {
+  const { colors: r } = e;
+  return {
+    default: {
+      "&:hover": {
+        backgroundColor: r["beige-30"]
+      }
+    },
+    checked: {
+      backgroundColor: r["primary-40"],
+      color: e.colors["neutral-90"],
+      borderColor: r["primary-40"],
+      "&:hover": {
+        backgroundColor: r["primary-30"]
+      }
+    }
+  };
+}, Y = (e) => {
+  const { borderWidths: r, colors: o } = e;
+  return {
+    default: {
+      backgroundColor: o["beige-40"],
+      backgroundImage: `linear-gradient(${o["primary-40"]}, ${o["primary-40"]})`
+    },
+    selector: {
+      backgroundColor: o["neutral-90"],
+      borderRadius: "50%",
+      border: `${r.md} solid`,
+      disabled: {
+        backgroundColor: o["beige-60"]
+      }
+    },
+    output: {
+      tooltip: {
+        backgroundColor: o["neutral-90"],
+        border: `${r.sm} solid ${o["neutral-70"]}}`,
+        color: o["neutral-10"]
+      }
+    },
+    focused: {
+      outline: `${r.md} solid ${o["primary-40"]}`,
+      disabled: {
+        outline: "none"
+      }
+    },
+    disabled: {
+      backgroundImage: `linear-gradient(${o["beige-60"]}, ${o["beige-60"]})`
+    },
+    rangeInput: {
+      disabled: {
+        backgroundColor: o["beige-60"]
+      }
+    }
+  };
+}, J = (e) => {
+  const { colors: r } = e;
+  return {
+    navigation: {
+      bullet: {
+        active: { backgroundColor: r["primary-40"] },
+        default: { backgroundColor: r["beige-40"] }
+      }
+    }
+  };
+}, V = (e) => {
+  const { borderWidths: r, colors: o, fontWeights: n, space: l } = e;
+  return {
+    th: {
+      color: o["neutral-60"],
+      fontWeight: n.medium,
+      textAlign: "left",
+      borderBottomColor: o["neutral-90"],
+      borderBottomWidth: r.sm,
+      borderBottomStyle: "solid"
+    },
+    td: {
+      textAlign: "left",
+      padding: l.xl
+    },
+    tr: {
+      default: {
+        borderBottomColor: o["neutral-30"],
+        borderBottomWidth: r.sm,
+        borderBottomStyle: "solid"
+      },
+      danger: {
+        backgroundColor: o["red-10"],
+        color: o["red-70"]
+      },
+      warning: {
+        backgroundColor: o["orange-10"],
+        color: o["orange-80"]
+      },
+      info: {
+        backgroundColor: o["blue-10"],
+        color: o["blue-70"]
+      },
+      success: {
+        backgroundColor: o["green-10"],
+        color: o["green-70"]
+      },
+      clickable: {
+        cursor: "pointer"
+      }
+    }
+  };
+}, X = (e) => {
+  const { borderWidths: r, colors: o, fontSizes: n, fontWeights: l, lineHeights: a, space: s } = e;
+  return {
+    tabsBorder: {
+      horizontal: {
+        boxShadow: `inset 0 -${r.sm} 0 ${o["neutral-30"]}`
+      },
+      vertical: {
+        boxShadow: `inset -${r.sm} 0 0 ${o["neutral-30"]}`
+      }
+    },
+    item: {
+      default: {
+        color: o["neutral-70"],
+        fontWeight: l.medium,
+        textDecoration: "none",
+        lineHeight: a.md
+      },
+      active: {
+        color: o["neutral-90"]
+      },
+      focus: {
+        color: o["neutral-90"]
+      },
+      disabled: {
+        color: o["neutral-50"]
+      },
+      size: {
+        sm: {
+          fontSize: n.sm
+        },
+        md: {
+          fontSize: n.md
+        }
+      }
+    },
+    panel: {
+      vertical: {
+        "&:focus": {
+          outline: "none"
+        }
+      },
+      horizontal: {
+        marginTop: s.xl,
+        "&:focus": {
+          outline: "none"
+        }
+      }
+    },
+    activeBar: {
+      horizontal: {
+        background: o["primary-40"],
+        height: r.md
+      },
+      vertical: {
+        background: o["primary-40"],
+        width: r.md
+      }
+    },
+    icon: {
+      maxWidth: s.lg,
+      maxHeight: s.lg
+    },
+    badge: {
+      maxHeight: s.lg
+    }
+  };
+}, Z = (e) => {
+  const { colors: r, fontSizes: o, fontWeights: n, radii: l, space: a, toRem: s } = e, d = {
+    xs: s(20),
+    sm: s(24),
+    md: s(32)
+  }, i = (c) => ({
+    backgroundColor: r[`${c}-10`],
+    color: r[`${c}-90`]
+  }), t = (c) => ({
+    backgroundColor: r[`${c}-20`]
+  }), g = (c) => ({
+    backgroundColor: r[`${c}-${c === "green" ? "30" : "40"}`],
+    color: r["neutral-90"]
+  }), u = (c) => ({
+    backgroundColor: r[`${c}-${c === "green" ? "40" : "50"}`]
+  });
+  return {
+    default: {
+      fontWeight: n.medium,
+      borderRadius: l.md
+    },
+    variants: {
+      default: {
+        backgroundColor: r["beige-20"],
+        color: r["beige-90"]
+      },
+      primary: {
+        color: e.colors["neutral-90"],
+        backgroundColor: r["primary-40"]
+      },
+      success: i("green"),
+      danger: i("red"),
+      warning: i("orange"),
+      info: i("blue"),
+      teal: g("teal"),
+      blue: g("blue"),
+      orange: g("orange"),
+      pink: g("pink"),
+      green: g("green"),
+      violet: g("violet")
+    },
+    hover: {
+      default: {
+        backgroundColor: r["beige-30"]
+      },
+      primary: {
+        backgroundColor: r["primary-50"]
+      },
+      success: t("green"),
+      danger: t("red"),
+      warning: t("orange"),
+      info: t("blue"),
+      teal: u("teal"),
+      blue: u("blue"),
+      orange: u("orange"),
+      pink: u("pink"),
+      green: u("green"),
+      violet: u("violet")
+    },
+    sizes: {
+      xs: {
+        padding: `${a.xxs} ${a.xs}`,
+        height: d.xs,
+        fontSize: o.xs,
+        gap: a.xs,
+        borderRadius: l.sm
+      },
+      sm: {
+        padding: `${a.xs} ${a.sm}`,
+        height: d.sm,
+        fontSize: o.xs,
+        gap: a.xs
+      },
+      md: {
+        padding: `${a.xs} ${a.sm}`,
+        height: d.md,
+        fontSize: o.sm,
+        gap: a.sm
+      }
+    },
+    icon: {
+      xs: s(12),
+      sm: s(12),
+      md: s(16)
+    },
+    shape: {
+      xs: {
+        width: d.xs,
+        height: d.xs
+      },
+      sm: {
+        width: d.sm,
+        height: d.sm
+      },
+      md: {
+        width: d.md,
+        height: d.md
+      }
+    }
+  };
+}, q = (e) => {
+  const { space: r, toRem: o } = e;
+  return {
+    minHeight: o(130),
+    padding: r.md
+  };
+}, K = (e, r) => {
+  const { toEm: o, toRem: n } = r, l = n;
+  return {
+    h0: l(65),
+    h1: l(45),
+    h2: l(36),
+    h3: l(26),
+    h4: l(20),
+    h5: l(16),
+    h6: l(14),
+    lg: l(18),
+    md: l(16),
+    sm: l(14),
+    "subtitle-md": l(13),
+    "subtitle-sm": l(11),
+    xs: l(12)
+  };
+}, Q = ({
+  defaultLineHeight: e,
+  toRem: r
+}) => ({
+  html: e,
+  h0: r(72),
+  h1: r(48),
+  h2: r(40),
+  h3: r(32),
+  h4: r(24),
+  h5: r(18),
+  h6: r(16),
+  lg: r(24),
+  md: r(18),
+  sm: r(18),
+  xs: r(14),
+  "subtitle-md": e,
+  "subtitle-sm": e
+}), j = {
+  regular: 400,
+  medium: 500,
+  bold: 600
+}, rr = ({
+  defaultLetterSpacing: e,
+  toRem: r
+}) => ({
+  html: e,
+  h0: r(-1.7),
+  h1: r(-1.2),
+  h2: r(-1),
+  h3: r(-0.9),
+  h4: r(-0.6),
+  h5: r(-0.5),
+  h6: r(-0.5),
+  lg: e,
+  md: e,
+  sm: e,
+  xs: r(-0.2),
+  "subtitle-md": r(-0.2),
+  "subtitle-sm": r(-0.2)
+}), or = (e) => {
+  const { fontWeights: r } = e;
+  return {
+    h0: r.bold,
+    h1: r.bold,
+    h2: r.bold,
+    h3: r.bold,
+    h4: r.bold,
+    h5: r.bold,
+    h6: r.bold,
+    lg: r.regular,
+    md: r.regular,
+    sm: r.regular,
+    "subtitle-md": r.bold,
+    "subtitle-sm": r.medium,
+    xs: r.regular
+  };
+}, er = (e) => {
+  const { fonts: r } = e;
+  return {
+    h0: r.headings,
+    h1: r.headings,
+    h2: r.headings,
+    h3: r.headings,
+    h4: r.headings,
+    h5: r.headings,
+    h6: r.headings,
+    "subtitle-md": r.headings,
+    "subtitle-sm": r.headings
+  };
+}, tr = () => ({
+  "subtitle-md": "uppercase",
+  "subtitle-sm": "uppercase"
+}), nr = (e) => {
+  const { colors: r } = e;
+  return {
+    h0: r["neutral-90"],
+    h1: r["neutral-90"],
+    h2: r["neutral-90"],
+    h3: r["neutral-90"],
+    h4: r["neutral-90"],
+    h5: r["neutral-90"],
+    h6: r["neutral-90"]
+  };
+}, x = (e) => {
+  const {
+    fontSizes: r,
+    letterSpacings: o,
+    lineHeights: n,
+    textsFontColors: l,
+    textsFontFamily: a,
+    textsFontWeights: s,
+    textsTextTransform: d
+  } = e;
+  return Object.keys(r).reduce((i, t) => ({
+    ...i,
+    [t]: {
+      color: l[t],
+      fontFamily: a[t] || void 0,
+      fontWeight: s[t],
+      fontSize: r[t],
+      lineHeight: n[t] || n.lg,
+      letterSpacing: o[t] || void 0,
+      textTransform: d[t] || void 0
+    }
+  }), {});
+}, lr = (e, r, o) => ({
+  texts: [e, "sans-serif"].join(", "),
+  headings: [r, "sans-serif"].join(", "),
+  icons: o
+}), ar = (e) => {
+  const { borderWidths: r, colors: o, fontWeights: n, radii: l, space: a } = e;
+  return {
+    default: {
+      paddingLeft: a.sm,
+      paddingRight: a.sm
+    },
+    top: {
+      paddingTop: a.lg
+    },
+    bottom: {
+      paddingBottom: a.lg
+    },
+    growls: {
+      default: {
+        ...x(e).sm,
+        borderWidth: r.sm,
+        borderStyle: "solid",
+        borderRadius: l.lg,
+        maxWidth: 340
+      },
+      title: {
+        fontWeight: n.bold,
+        color: o["neutral-90"]
+      }
+    },
+    snackbar: {
+      default: {
+        borderRadius: l.lg
+      },
+      separator: {
+        default: {
+          borderLeft: "1px solid",
+          borderLeftColor: o["neutral-30"]
+        },
+        danger: {
+          borderLeftColor: o["red-20"]
+        },
+        warning: {
+          borderLeftColor: o["orange-20"]
+        },
+        info: {
+          borderLeftColor: o["blue-30"]
+        },
+        success: {
+          borderLeftColor: o["green-30"]
+        }
+      }
+    }
+  };
+}, dr = "0.32rem !important", ir = "0.12rem ! important", sr = (e) => {
+  const { borderWidths: r, colors: o, focus: n, toRem: l } = e;
+  return {
+    item: {
+      default: {
+        backgroundColor: o["neutral-10"],
+        borderColor: o["neutral-30"],
+        borderWidth: r.sm,
+        borderStyle: "solid",
+        borderRadius: l(16),
+        "&:focus": {
+          borderColor: o["primary-30"],
+          ...n(o["primary-30"])
+        }
+      },
+      sizes: {
+        xs: {
+          width: l(28),
+          height: l(16),
+          marginTop: dr
+        },
+        sm: {
+          width: l(36),
+          height: l(20),
+          marginTop: ir
+        },
+        md: {
+          width: l(44),
+          height: l(24),
+          marginTop: "0 !important"
+        }
+      },
+      checked: {
+        backgroundColor: o["primary-40"],
+        borderColor: o["primary-40"]
+      },
+      disabled: {
+        borderColor: o["beige-60"],
+        backgroundColor: o["beige-40"]
+      }
+    },
+    after: {
+      default: {
+        backgroundColor: o["neutral-10"],
+        borderColor: o["neutral-50"],
+        borderWidth: r.sm,
+        borderStyle: "solid",
+        borderRadius: "50%"
+      },
+      checked: {
+        backgroundColor: o["neutral-10"],
+        borderColor: o["neutral-10"]
+      },
+      disabled: {
+        borderColor: "transparent",
+        backgroundColor: o["beige-60"]
+      },
+      sizes: {
+        xs: {
+          width: l(12),
+          height: l(12)
+        },
+        sm: {
+          width: l(16),
+          height: l(16)
+        },
+        md: {
+          width: l(20),
+          height: l(20)
+        }
+      }
+    },
+    icon: {
+      position: {
+        xs: {
+          left: "2px",
+          right: "2px"
+        },
+        sm: {
+          left: "4px",
+          right: "4px"
+        },
+        md: {
+          left: "4px",
+          right: "4px"
+        }
+      },
+      sizes: {
+        xs: {
+          width: l(10),
+          height: l(10),
+          fontSize: l(10)
+        },
+        sm: {
+          width: l(12),
+          height: l(12),
+          fontSize: l(12)
+        },
+        md: {
+          width: l(16),
+          height: l(16),
+          fontSize: l(16)
+        }
+      }
+    }
+  };
+}, gr = (e) => {
+  const { borderWidths: r, colors: o, fontSizes: n, fontWeights: l, radii: a, space: s, toRem: d } = e;
+  return {
+    maxWidth: d(200),
+    backgroundColor: o["neutral-90"],
+    color: o["neutral-10"],
+    padding: `${s.xs} ${s.sm}`,
+    fontSize: n.sm,
+    fontWeight: l.medium,
+    border: `${r.sm} solid ${o["neutral-60"]}`,
+    borderRadius: a.md,
+    boxSizing: "border-box"
+  };
+}, cr = (e) => {
+  const { colors: r } = e;
+  return {
+    default: {
+      color: r["neutral-90"]
+    },
+    danger: {
+      color: r["red-70"]
+    },
+    success: {
+      color: r["green-60"]
+    },
+    warning: {
+      color: r["orange-60"]
+    },
+    info: {
+      color: r["blue-60"]
+    }
+  };
+}, ur = {
+  "beige-10": "#FBF9F7",
+  "beige-20": "#F6F3EF",
+  "beige-30": "#EAE4DE",
+  "beige-40": "#D2CBC3",
+  "beige-50": "#A7A096",
+  "beige-60": "#605B55",
+  "beige-70": "#4D4944",
+  "beige-80": "#33302D",
+  "beige-90": "#1E1C1A",
+  "blue-10": "#E0F5FF",
+  "blue-20": "#BBEAFF",
+  "blue-30": "#9BDEF7",
+  "blue-40": "#55C3E9",
+  // brand
+  "blue-50": "#27A5D0",
+  "blue-60": "#057AA3",
+  "blue-70": "#025A79",
+  "blue-80": "#013C50",
+  "blue-90": "#00202B",
+  "green-10": "#EAFFD4",
+  "green-20": "#D6F6B4",
+  "green-30": "#BADE94",
+  // brand
+  "green-40": "#9FC873",
+  "green-50": "#83AD57",
+  "green-60": "#5A8034",
+  "green-70": "#40611F",
+  "green-80": "#2A4210",
+  "green-90": "#142603",
+  "neutral-10": "#FFFFFF",
+  "neutral-20": "#F3F3F3",
+  "neutral-30": "#DEDEDE",
+  "neutral-40": "#BDBDBD",
+  "neutral-50": "#989898",
+  "neutral-60": "#585858",
+  "neutral-70": "#444444",
+  "neutral-80": "#212121",
+  "neutral-90": "#000000",
+  "orange-10": "#FFEBCE",
+  "orange-20": "#FFD495",
+  "orange-30": "#FFBB59",
+  "orange-40": "#FF9F14",
+  "orange-50": "#DB860A",
+  "orange-60": "#A6670A",
+  "orange-70": "#824F06",
+  "orange-80": "#573607",
+  "orange-90": "#382303",
+  "pink-10": "#FFEAF5",
+  "pink-20": "#FFD5EB",
+  "pink-30": "#FEB7DC",
+  "pink-40": "#F696C8",
+  // brand
+  "pink-50": "#E468A8",
+  "pink-60": "#C24887",
+  "pink-70": "#972962",
+  "pink-80": "#6D1142",
+  "pink-90": "#3C0725",
+  "red-10": "#FBDEDC",
+  "red-20": "#FCC7C3",
+  "red-30": "#FDB3AE",
+  "red-40": "#FF9490",
+  "red-50": "#FF6165",
+  "red-60": "#E1003A",
+  "red-70": "#A80029",
+  "red-80": "#75001A",
+  "red-90": "#450101",
+  "red-orange-10": "#FFDED0",
+  "red-orange-20": "#FFC9B2",
+  "red-orange-30": "#FFB595",
+  "red-orange-40": "#FF9868",
+  // brand
+  "red-orange-50": "#E67B49",
+  "red-orange-60": "#C45927",
+  "red-orange-70": "#9F4217",
+  "red-orange-80": "#6D2605",
+  "red-orange-90": "#451701",
+  "teal-10": "#D5FFFA",
+  "teal-20": "#AAF4EB",
+  "teal-30": "#6DE1D2",
+  "teal-40": "#00C7AE",
+  // brand
+  "teal-50": "#01AA95",
+  "teal-60": "#008070",
+  "teal-70": "#00544A",
+  "teal-80": "#003D35",
+  "teal-90": "#00211D",
+  "violet-10": "#F2F2FF",
+  "violet-20": "#E0E0FF",
+  "violet-30": "#C9C9FF",
+  "violet-40": "#ACACFF",
+  // brand
+  "violet-50": "#9080F0",
+  "violet-60": "#7958D6",
+  "violet-70": "#593CAC",
+  "violet-80": "#422A86",
+  "violet-90": "#1F0E51",
+  "yellow-10": "#FFF8D9",
+  "yellow-20": "#FFF1B2",
+  "yellow-30": "#FFE166",
+  "yellow-40": "#FFCD00",
+  "yellow-50": "#E5B800",
+  "yellow-60": "#B69200",
+  "yellow-70": "#846A01",
+  "yellow-80": "#604D00",
+  "yellow-90": "#423500"
+}, C = (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"],
+  overlay: "rgba(0, 0, 0, 0.55)"
+}), h = C(ur), br = Object.keys(h).reduce((e, r) => {
+  if (r.startsWith("secondary-") || r === "overlay") return e;
+  const o = 100 - Number(r.slice(-2)), n = r.slice(0, r.length - 2);
+  return {
+    ...e,
+    [r]: h[`${n}${o}`]
+  };
+}, {}), mr = {
+  ...h,
+  ...C(br)
+}, Ir = {
+  colors: mr
+}, hr = "f19d0de47a5f6f7446d37111f075c0901835bf12", pr = (e) => ({
+  "welcome-font": [
+    {
+      url: `${e.fontsUrl}/welcome-font-regular`,
+      weight: "400"
+    },
+    {
+      url: `${e.fontsUrl}/welcome-font-medium`,
+      weight: "500"
+    },
+    {
+      url: `${e.fontsUrl}/welcome-font-bold`,
+      weight: "600"
+    },
+    {
+      url: `${e.fontsUrl}/welcome-font-regular-italic`,
+      style: "italic",
+      weight: "400"
+    },
+    {
+      url: `${e.fontsUrl}/welcome-font-medium-italic`,
+      style: "italic",
+      weight: "500"
+    },
+    {
+      url: `${e.fontsUrl}/welcome-font-bold-italic`,
+      style: "italic",
+      weight: "600"
+    }
+  ],
+  "welcome-icon-font": [
+    {
+      url: `${e.fontsUrl}/icon-font/${hr}/welcome-icon-font`,
+      display: "block"
+    }
+  ],
+  "work-sans": [
+    {
+      url: `${e.fontsUrl}/work-sans-variable`,
+      isVariable: !0,
+      stretch: "75% 125%",
+      weight: "100 1000"
+    }
+  ]
+}), m = {
+  primary: "ease",
+  secondary: "linear",
+  tertiary: "cubic-bezier(0.41, 0.094, 0.54, 0.07)"
+}, fr = {
+  slow: `500ms ${m.tertiary}`,
+  medium: `300ms ${m.primary}`,
+  fast: `100ms ${m.secondary}`
+}, xr = ({ colors: e }) => ({
+  default: f`
+      background-image: linear-gradient(
+        0deg,
+        ${e["primary-40"]},
+        ${e["primary-40"]} 100%
+      );
+      background-repeat: no-repeat;
+      background-size: 100% 50%;
+      background-position-y: calc(200% - 2px);
+      transition:
+        background-position-y 250ms,
+        background-size 250ms,
+        color 250ms;
+    `,
+  hover: f`
+      opacity: 1;
+      background-position-y: 100%;
+      background-size: 100% 100%;
+    `
+}), Cr = (e) => ({
+  none: "0",
+  sm: e.toRem(2),
+  md: e.toRem(4),
+  lg: e.toRem(8),
+  xl: e.toRem(16),
+  xxl: e.toRem(24),
+  full: "100%"
+}), kr = {
+  sm: "1px",
+  md: "2px",
+  lg: "3px"
+}, Fr = {
+  xs: 0,
+  sm: 480,
+  md: 736,
+  lg: 980,
+  xl: 1280,
+  xxl: 1440,
+  "3xl": 1620,
+  "4xl": 1920
+}, yr = {
+  sm: "1px 2px 4px 0 rgba(0,0,0,0.05)",
+  md: "3px 4px 10px 0 rgba(0,0,0,0.07)"
+}, wr = (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)
+}), $r = (e) => ({
+  backgroundColor: e.colors["primary-40"],
+  color: e.colors["neutral-90"]
+}), Sr = ({ colors: e }) => {
+  function r(o = e["primary-40"]) {
+    return {
+      boxShadow: `0 0 0 2px ${o}`
+    };
+  }
+  return r;
+}, Wr = (e) => {
+  const { borderWidths: r, colors: o, focus: n, fontSizes: l, fontWeights: a, radii: s, space: d, toRem: i } = e;
+  return {
+    default: {
+      color: o["neutral-90"],
+      fontSize: l.sm,
+      /* Can't use 16 because that's a valid line-height value (16em) */
+      lineHeight: "1rem",
+      fontWeight: a.regular,
+      backgroundColor: o["neutral-10"],
+      borderColor: o["neutral-30"],
+      borderWidth: r.sm,
+      borderStyle: "solid",
+      outline: "none",
+      borderRadius: s.md
+    },
+    hover: {
+      default: {
+        borderColor: o["neutral-40"]
+      },
+      transparency: {
+        borderColor: o["neutral-20"]
+      }
+    },
+    variants: {
+      danger: {
+        borderColor: o["red-70"]
+      },
+      success: {
+        borderColor: o["green-60"]
+      },
+      warning: {
+        borderColor: o["orange-60"]
+      }
+    },
+    focused: {
+      default: {
+        ...n(o["primary-20"]),
+        borderColor: o["primary-40"]
+      },
+      danger: { ...n(o["red-30"]) },
+      warning: { ...n(o["orange-20"]) },
+      success: { ...n(o["green-30"]) }
+    },
+    sizes: {
+      xs: {
+        height: i(24),
+        paddingTop: d.xs,
+        paddingRight: d.sm,
+        paddingBottom: d.xs,
+        paddingLeft: d.sm
+      },
+      sm: {
+        height: i(32),
+        paddingTop: d.sm,
+        paddingRight: d.md,
+        paddingBottom: d.sm,
+        paddingLeft: d.md
+      },
+      md: {
+        height: i(40),
+        paddingTop: d.md,
+        paddingRight: d.md,
+        paddingBottom: d.md,
+        paddingLeft: d.md
+      },
+      lg: {
+        height: i(48),
+        paddingTop: d.lg,
+        paddingRight: d.md,
+        paddingBottom: d.lg,
+        paddingLeft: d.md
+      }
+    },
+    iconPlacement: {
+      xs: {
+        left: i(8),
+        right: i(8)
+      },
+      sm: {
+        left: i(12),
+        right: i(12)
+      },
+      md: {
+        left: i(12),
+        right: i(12)
+      },
+      lg: {
+        left: i(12),
+        right: i(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: o["beige-40"],
+      color: o["beige-70"],
+      cursor: "not-allowed"
+    },
+    placeholder: {
+      color: o["neutral-50"]
+    },
+    checkablelabel: {
+      default: {},
+      checked: {
+        color: o["neutral-90"],
+        "-webkit-text-stroke": "0.04em"
+      }
+    },
+    select: {
+      default: {
+        maxHeight: i(155),
+        borderRadius: s.md
+      },
+      existing: {
+        color: o["beige-40"],
+        cursor: "not-allowed"
+      },
+      highlighted: {
+        backgroundColor: o["beige-20"],
+        cursor: "default"
+      },
+      selectedAndHighlighted: {
+        backgroundImage: "linear-gradient(0deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08) 100%)"
+      },
+      selected: {
+        color: o["neutral-90"],
+        fontWeight: a.bold
+      },
+      disabled: {
+        color: o["beige-60"],
+        cursor: "not-allowed"
+      }
+    },
+    fieldset: {
+      "border-width": "0"
+    }
+  };
+}, Tr = "work-sans", zr = 16, vr = "-0.019rem", Br = 1.15, Ar = "https://cdn.welcome-ui.com/fonts", Dr = "welcome-font", Er = "welcome-icon-font", Hr = (e = {}) => {
+  const {
+    defaultFontFamily: r = Tr,
+    defaultFontSize: o = zr,
+    defaultLetterSpacing: n = vr,
+    defaultLineHeight: l = Br,
+    fontsUrl: a = Ar,
+    headingFontFamily: s = Dr,
+    iconFontFamily: d = Er,
+    ...i
+  } = e;
+  let t = {};
+  return t.transformers = { ...F }, t.toEm = (g) => `${g / o}em`, t.toRem = (g) => `${g / o}rem`, t.toPx = (g) => `${g * o}px`, t.colors = h, t.fontsUrl = a, t.fontFaces = pr(t), t.fontSizes = K("rem", t), t.defaultLineHeight = l, t.defaultLetterSpacing = n, t.lineHeights = Q(t), t.fontWeights = j, t.letterSpacings = rr(t), t.fonts = lr(r, s, d), t.borderWidths = kr, t.screens = Fr, t.space = wr(t), t.inset = t.space, t.radii = Cr(t), t.transitions = fr, t.timingFunction = m, t.shadows = yr, t = p(t, i), t.selection = $r(t), t.underline = xr(t), t.focus = Sr(t), t.textsFontWeights = or(t), t.textsFontFamily = er(t), t.textsFontColors = nr(t), t.textsTextTransform = tr(), t.texts = x(t), t.defaultFields = Wr(t), t.icons = U(t), t.accordions = w(t), t.alerts = $(t), t.avatars = S(t), t.badges = W(t), t.breadcrumbs = T(t), t.buttons = z(t), t.cards = v(t), t.checkboxes = A(t), t.dateTimePickerCommon = B(t), t.drawers = D(t), t.dropdownMenu = E(t), t.fileDrops = R(t), t.hints = L(t), t.labels = I(t), t.links = H(t), t.loaders = _(t), t.modals = N(t), t.paginations = G(t), t.popovers = O(t), t.radios = M(t), t.radiosTab = P(t), t.sliders = Y(t), t.swipers = J(t), t.tables = V(t), t.tabs = X(t), t.tags = Z(t), t.textareas = q(t), t.toasts = ar(t), t.toggles = sr(t), t.tooltips = gr(t), t.variantIcon = cr(t), t.states = y.states, t = p(t, i), t;
+};
+export {
+  Hr as createTheme,
+  Ir as darkTheme
+};