welcome-ui
Version:
Customizable design system with react • styled-components • styled-system and ariakit.
1,847 lines (1,846 loc) • 42.1 kB
JavaScript
"use client";
import { css as S, rpxTransformers as M, defaultTheme as u } from "@xstyled/styled-components";
import { g as N } from "./_commonjsHelpers-CXJ7dpIk.mjs";
import { h as m } from "./hex-to-rgba-BIDK-3ab.mjs";
var f, D;
function $() {
if (D) return f;
D = 1;
function o(r) {
return r != null && typeof r == "object" && r["@@functional/placeholder"] === !0;
}
return f = o, f;
}
var x, T;
function H() {
if (T) return x;
T = 1;
var o = /* @__PURE__ */ $();
function r(e) {
return function i(n) {
return arguments.length === 0 || o(n) ? i : e.apply(this, arguments);
};
}
return x = r, x;
}
var C, R;
function q() {
if (R) return C;
R = 1;
var o = /* @__PURE__ */ H(), r = /* @__PURE__ */ $();
function e(i) {
return function n(l, d) {
switch (arguments.length) {
case 0:
return n;
case 1:
return r(l) ? n : o(function(a) {
return i(l, a);
});
default:
return r(l) && r(d) ? n : r(l) ? o(function(a) {
return i(a, d);
}) : r(d) ? o(function(a) {
return i(l, a);
}) : i(l, d);
}
};
}
return C = e, C;
}
var y, _;
function O() {
if (_) return y;
_ = 1;
var o = /* @__PURE__ */ H(), r = /* @__PURE__ */ q(), e = /* @__PURE__ */ $();
function i(n) {
return function l(d, a, s) {
switch (arguments.length) {
case 0:
return l;
case 1:
return e(d) ? l : r(function(t, c) {
return n(d, t, c);
});
case 2:
return e(d) && e(a) ? l : e(d) ? r(function(t, c) {
return n(t, a, c);
}) : e(a) ? r(function(t, c) {
return n(d, t, c);
}) : o(function(t) {
return n(d, a, t);
});
default:
return e(d) && e(a) && e(s) ? l : e(d) && e(a) ? r(function(t, c) {
return n(t, c, s);
}) : e(d) && e(s) ? r(function(t, c) {
return n(t, a, c);
}) : e(a) && e(s) ? r(function(t, c) {
return n(d, t, c);
}) : e(d) ? o(function(t) {
return n(t, a, s);
}) : e(a) ? o(function(t) {
return n(d, t, s);
}) : e(s) ? o(function(t) {
return n(d, a, t);
}) : n(d, a, s);
}
};
}
return y = i, y;
}
var k, z;
function K() {
if (z) return k;
z = 1;
function o(r) {
return Object.prototype.toString.call(r) === "[object Object]";
}
return k = o, k;
}
var F, B;
function G() {
if (B) return F;
B = 1;
function o(r, e) {
return Object.prototype.hasOwnProperty.call(e, r);
}
return F = o, F;
}
var v, A;
function Y() {
if (A) return v;
A = 1;
var o = /* @__PURE__ */ O(), r = /* @__PURE__ */ G(), e = /* @__PURE__ */ o(function(n, l, d) {
var a = {}, s;
l = l || {}, d = d || {};
for (s in l)
r(s, l) && (a[s] = r(s, d) ? n(s, l[s], d[s]) : l[s]);
for (s in d)
r(s, d) && !r(s, a) && (a[s] = d[s]);
return a;
});
return v = e, v;
}
var w, E;
function J() {
if (E) return w;
E = 1;
var o = /* @__PURE__ */ O(), r = /* @__PURE__ */ K(), e = /* @__PURE__ */ Y(), i = /* @__PURE__ */ o(function n(l, d, a) {
return e(function(s, t, c) {
return r(t) && r(c) ? n(l, t, c) : l(s, t, c);
}, d, a);
});
return w = i, w;
}
var W, L;
function X() {
if (L) return W;
L = 1;
var o = /* @__PURE__ */ q(), r = /* @__PURE__ */ J(), e = /* @__PURE__ */ o(function(n, l) {
return r(function(d, a, s) {
return s;
}, n, l);
});
return W = e, W;
}
var Z = /* @__PURE__ */ X();
const I = /* @__PURE__ */ N(Z), Q = (o) => {
const { borderWidths: r, colors: e, fontSizes: i, radii: n, space: l, texts: d, transitions: a } = o;
return {
content: {
fontSize: i.sm
},
icon: {
color: e["neutral-90"]
},
padding: l.lg,
title: d.h5,
wrapper: {
backgroundColor: e["neutral-10"],
border: `${r.sm} solid ${e["neutral-30"]}`,
borderRadius: n.md,
transition: a.medium
}
};
}, V = (o) => {
const { borderWidths: r, colors: e, fontSizes: i, fontWeights: n, radii: l, space: d } = o, a = (s) => ({
backgroundColor: e[`${s}-10`],
borderColor: e[`${s}-10`],
color: e[`${s}-90`]
});
return {
ai: {
backgroundColor: e["violet-10"],
borderColor: e["violet-10"],
color: e["violet-90"]
},
beige: {
backgroundColor: e["beige-20"],
borderColor: e["beige-20"],
color: e["beige-80"]
},
danger: a("red"),
default: {
backgroundColor: e["neutral-10"],
borderColor: e["neutral-30"],
borderRadius: l.lg,
borderStyle: "solid",
borderWidth: r.sm,
color: e["neutral-80"],
fontSize: i.sm
},
info: a("blue"),
sizes: {
md: {
padding: d.xl
},
sm: {
padding: d.lg
}
},
success: a("green"),
title: {
default: {
color: e["neutral-90"],
fontWeight: n.medium
},
sizes: {
md: {
marginBottom: d.sm
},
sm: {
marginBottom: d.xs
}
}
},
warning: a("orange")
};
}, rr = (o) => {
const { colors: r, fontWeights: e, toRem: i } = o;
return {
sizes: {
lg: i(40),
md: i(30),
sm: i(20),
xl: i(50),
xxl: i(60)
},
text: {
color: r["neutral-90"],
fontWeight: e.bold
}
};
}, er = (o) => {
const { colors: r, fontWeights: e, space: i, texts: n, toRem: l } = o;
return {
default: {
...n.xs,
fontWeight: e.medium
},
disabled: {
default: {
backgroundColor: r["beige-20"],
color: r["beige-40"]
},
primary: {
backgroundColor: r["primary-50"],
color: r["primary-80"]
}
},
sizes: {
md: {
borderRadius: l(14),
height: l(20),
padding: i.xs
},
sm: {
borderRadius: l(14),
height: l(16),
padding: i.xxs
}
},
variants: {
default: {
backgroundColor: r["beige-30"],
color: r["beige-70"]
},
primary: {
backgroundColor: r["primary-40"],
color: r["neutral-90"]
}
}
};
}, or = (o) => {
const { colors: r, space: e, texts: i } = o;
return {
item: {
active: {
color: r["neutral-70"]
},
default: {
color: r["neutral-50"],
textDecoration: "none"
},
hover: {
color: r["neutral-70"]
}
},
list: {
...i["subtitle-sm"],
padding: `${e.sm} 0`
},
separator: {
color: r["neutral-50"],
padding: `0 ${e.xs}`
}
};
}, tr = (o) => {
const { colors: r, focus: e, fontWeights: i, radii: n, space: l, texts: d, toRem: a } = o, s = {
...d.xs,
borderRadius: n.md,
color: r["neutral-10"],
fontWeight: i.bold,
letterSpacing: 0
};
return {
active: {
ai: {
ghost: {
backgroundColor: r["violet-30"]
},
primary: {
backgroundColor: r["violet-40"],
borderColor: r["violet-40"]
},
tertiary: {
backgroundColor: r["violet-30"]
}
},
danger: {
ghost: {
backgroundColor: r["red-20"]
},
primary: {
backgroundColor: r["red-50"],
borderColor: r["red-50"]
},
tertiary: {
backgroundColor: r["red-20"]
}
},
ghost: {
backgroundColor: m(r["neutral-90"], 0.4)
},
primary: {
backgroundColor: r["primary-10"],
borderColor: r["primary-10"]
},
secondary: {
backgroundColor: r["neutral-50"],
borderColor: r["neutral-50"]
},
tertiary: {
backgroundColor: m(r["neutral-90"], 0.4)
}
},
ai: {
ghost: {
backgroundColor: r["neutral-10"],
borderColor: "transparent",
color: r["violet-70"]
},
primary: {
backgroundColor: r["violet-70"],
borderColor: "transparent",
color: r["neutral-10"]
},
tertiary: {
backgroundColor: "neutral-10",
borderColor: r["violet-70"],
color: r["violet-70"]
}
},
danger: {
ghost: {
backgroundColor: "transparent",
borderColor: "transparent",
color: r["red-80"]
},
primary: {
backgroundColor: r["red-70"],
borderColor: r["red-70"],
color: r["neutral-10"]
},
tertiary: {
backgroundColor: "transparent",
borderColor: r["red-80"],
color: r["red-80"]
}
},
disabled: {
...s,
"&:focus": { ...e(r["beige-10"]) },
backgroundColor: r["beige-40"],
borderColor: r["beige-40"],
color: r["beige-70"]
},
focus: {
ai: {
ghost: { ...e(r["violet-50"]) },
primary: { ...e(r["violet-50"]) },
tertiary: { ...e(r["violet-50"]) }
},
danger: {
ghost: { ...e(r["red-40"]) },
primary: { ...e(r["red-40"]) },
tertiary: { ...e(r["red-40"]) }
},
ghost: { ...e(r["neutral-40"]) },
primary: { ...e(r["primary-20"]) },
secondary: { ...e(r["neutral-40"]) },
tertiary: { ...e(r["neutral-40"]) }
},
ghost: {
...s,
backgroundColor: "transparent",
borderColor: "transparent",
color: r["neutral-90"]
},
hover: {
ai: {
ghost: {
backgroundColor: r["violet-10"]
},
primary: {
backgroundColor: r["violet-60"],
borderColor: "transparent"
},
tertiary: {
backgroundColor: r["violet-10"]
}
},
danger: {
ghost: {
backgroundColor: r["red-10"]
},
primary: {
backgroundColor: r["red-60"],
borderColor: r["red-60"]
},
tertiary: {
backgroundColor: r["red-10"]
}
},
ghost: {
backgroundColor: m(r["neutral-90"], 0.1)
},
primary: {
backgroundColor: r["primary-30"],
borderColor: r["primary-30"]
},
secondary: {
backgroundColor: r["neutral-70"],
borderColor: "transparent"
},
tertiary: {
backgroundColor: m(r["neutral-90"], 0.1)
}
},
icon: {
default: {
lg: a(16),
md: a(16),
sm: a(16),
xs: a(12)
},
only: {
lg: a(24),
md: a(16),
sm: a(16),
xs: a(16)
}
},
primary: {
...s,
backgroundColor: r["primary-40"],
borderColor: r["primary-40"],
color: o.colors["neutral-90"]
},
secondary: {
...s,
backgroundColor: r["neutral-90"],
borderColor: r["neutral-90"]
},
sizes: {
lg: {
...d.sm,
fontWeight: i.bold,
height: a(48),
padding: `${l.md} ${l.xl}`
},
md: {
...d.sm,
fontWeight: i.bold,
height: a(40),
padding: `${l.sm} ${l.lg}`
},
sm: {
height: a(32),
padding: `${l.sm} ${l.md}`
},
xs: {
height: a(24),
padding: `${l.xs} ${l.sm}`
}
},
tertiary: {
...s,
backgroundColor: "transparent",
borderColor: r["neutral-90"],
color: r["neutral-90"]
}
};
}, nr = (o) => {
const { borderWidths: r, colors: e } = o;
return {
default: {
backgroundColor: e["neutral-10"],
borderColor: e["neutral-30"],
borderStyle: "solid",
borderWidth: r.sm
}
};
}, ir = (o) => {
const { colors: r, radii: e, toRem: i } = o;
return {
checked: {
backgroundColor: r["primary-40"],
borderColor: r["primary-40"],
color: r["neutral-90"]
},
default: {
borderRadius: e.sm,
flexShrink: 0,
height: i(16),
width: i(16)
},
disabled: {
borderColor: r["beige-60"]
}
};
}, ar = (o) => {
const { colors: r, fontWeights: e } = o;
return {
item: {
selected: {
backgroundColor: r["primary-40"],
color: r["neutral-90"],
fontWeight: e.bold,
outline: "none"
},
today: {
color: r["neutral-90"],
fontWeight: e.bold
}
}
};
}, lr = (o) => {
const { colors: r, space: e, toRem: i } = o;
return {
backdrop: {
backgroundColor: r.overlay,
zIndex: 999
},
closeButton: {},
content: {
padding: `${e.xl}`
},
default: {
zIndex: 999
},
footer: {
backgroundColor: r["neutral-10"],
padding: `${e.xl}`
},
sizes: {
horizontal: {
lg: { width: i(680) },
md: { width: i(550) },
sm: { width: i(400) }
},
vertical: {
lg: { height: i(680) },
md: { height: i(550) },
sm: { height: i(400) }
}
},
title: {
backgroundColor: r["neutral-10"],
margin: 0,
padding: `${e.xl} ${e["5xl"]} ${e.xl} ${e.xl}`
}
};
}, dr = (o) => {
const { colors: r, fontSizes: e, radii: i, toRem: n } = o, l = r["beige-30"];
return {
inner: {
borderRadius: i.md,
fontSize: e.sm,
minWidth: n(130)
},
item: {
"&:focus": {
backgroundColor: r["beige-30"],
color: r["neutral-90"]
},
"&:hover": {
backgroundColor: r["beige-30"],
color: r["neutral-90"]
},
"&[disabled]": {
backgroundColor: "transparent",
color: r["beige-40"],
cursor: "not-allowed"
},
backgroundColor: "transparent",
color: r["beige-70"]
},
separator: {
backgroundColor: l
}
};
}, sr = (o) => {
const { colors: r, toRem: e } = o;
return {
default: {
borderStyle: "dashed",
minHeight: e(200)
},
disabled: {
backgroundColor: r["beige-30"]
},
dragAccept: {},
dragReject: {}
};
}, cr = (o) => {
const { colors: r, texts: e } = o;
return {
danger: {
color: r["red-70"]
},
default: {
...e.xs,
color: r["neutral-60"]
},
success: {
color: r["green-70"]
},
warning: {
color: r["orange-70"]
}
};
}, gr = ({ toRem: o }) => ({
lg: o(32),
md: o(24),
sm: o(16),
xl: o(48),
xs: o(12),
xxl: o(64)
}), ur = (o) => {
const { colors: r, fontSizes: e, fontWeights: i } = o;
return {
color: r["neutral-60"],
fontSize: e.sm,
fontWeight: i.medium
};
}, br = (o) => {
const { colors: r, fontWeights: e, icons: i, space: n, transitions: l } = o;
return {
default: {
color: r["neutral-90"],
fontWeight: e.medium,
transition: l.medium
},
disabled: {
backgroundImage: `linear-gradient(0deg, ${r["neutral-30"]}, ${r["neutral-30"]} 100%)`,
color: r["neutral-50"]
},
primary: {
default: {},
hover: {}
},
secondary: {
default: {
backgroundImage: `linear-gradient(0deg, ${r["neutral-90"]}, ${r["neutral-90"]} 100%)`
},
hover: {
color: r["neutral-10"]
}
},
withExternalLink: {
backgroundSize: `calc(100% - ${i.sm} - ${n.sm}) 50%`
}
};
}, mr = ({ toRem: o }) => ({
lg: o(20),
md: o(15),
sm: o(10),
xs: o(8)
}), hr = (o) => {
const { colors: r, radii: e, space: i, toRem: n } = o;
return {
backdrop: {
backgroundColor: r.overlay,
zIndex: 999
},
body: {
color: r["neutral-90"],
paddingBottom: i.xxl,
paddingLeft: i.xxl,
paddingRight: i["3xl"]
},
cover: {},
default: {
borderRadius: e.md,
zIndex: 999
},
footer: {
backgroundColor: r["neutral-10"],
borderBottomLeftRadius: e.md,
borderBottomRightRadius: e.md,
borderTop: `solid ${r["neutral-30"]}`,
children: {
paddingBottom: i.xl,
paddingLeft: i.xxl,
paddingRight: i.xxl,
paddingTop: i.lg
},
information: {
backgroundColor: r["beige-20"],
paddingBottom: i.xxl,
paddingLeft: i.xxl,
paddingRight: i.xxl,
paddingTop: i.xl
}
},
gutter: n(32),
header: {
backgroundColor: r["neutral-10"],
borderTopLeftRadius: e.md,
borderTopRightRadius: e.md,
paddingBottom: i.xxl,
paddingLeft: i.xxl,
paddingRight: i["3xl"],
paddingTop: i.xxl,
subtitle: {
color: r["neutral-70"],
margin: 0,
variant: "sm"
}
},
sizes: {
auto: {},
lg: {
width: n(730)
},
md: {
width: n(600)
},
sm: {
width: n(450)
},
xs: {
width: n(320)
}
}
};
}, pr = (o) => {
const { colors: r, focus: e, fontSizes: i, fontWeights: n, toRem: l } = o;
return {
active: {
"&:hover, &:focus": {
backgroundColor: r["neutral-90"]
},
backgroundColor: r["neutral-90"],
color: r["neutral-10"]
},
default: {
color: r["neutral-90"],
fontSize: i.xs,
fontWeight: n.bold,
height: l(32),
width: l(32)
},
disabled: {
backgroundColor: r["beige-40"],
color: r["beige-70"]
},
item: {
"&:focus": { ...e(r["neutral-60"]) },
"&:hover, &:focus": {
backgroundColor: r["neutral-30"]
}
}
};
}, fr = (o) => {
const { borderWidths: r, colors: e, space: i, texts: n, toRem: l } = o;
return {
content: {
display: "block",
padding: i.md
},
default: {
...n.sm,
backgroundColor: e["neutral-90"],
color: e["neutral-10"],
maxWidth: l(700),
zIndex: 1
},
title: {
...n.h6,
borderBottomColor: e["neutral-70"],
borderBottomStyle: "solid",
borderBottomWidth: r.sm,
color: e["neutral-10"],
padding: `${i.md} ${i.md} ${i.xs}`
}
};
}, xr = (o) => {
const { colors: r, toRem: e } = o;
return {
checked: {
borderColor: r["primary-40"],
color: r["neutral-90"]
},
checkedCenteredColor: {
default: r["primary-40"],
disabled: r["beige-60"]
},
default: {
height: e(16),
width: e(16)
}
};
}, Cr = (o) => {
const { colors: r } = o;
return {
checked: {
"&:hover": {
backgroundColor: r["primary-30"]
},
backgroundColor: r["primary-40"],
borderColor: r["primary-40"],
color: o.colors["neutral-90"]
},
default: {
"&:hover": {
backgroundColor: r["beige-30"]
}
}
};
}, yr = (o) => {
const { borderWidths: r, colors: e } = o;
return {
default: {
backgroundColor: e["beige-40"],
backgroundImage: `linear-gradient(${e["primary-40"]}, ${e["primary-40"]})`
},
disabled: {
backgroundImage: `linear-gradient(${e["beige-60"]}, ${e["beige-60"]})`
},
focused: {
disabled: {
outline: "none"
},
outline: `${r.md} solid ${e["primary-40"]}`
},
output: {
tooltip: {
backgroundColor: e["neutral-90"],
border: `${r.sm} solid ${e["neutral-70"]}}`,
color: e["neutral-10"]
}
},
rangeInput: {
disabled: {
backgroundColor: e["beige-60"]
}
},
selector: {
backgroundColor: e["neutral-90"],
border: `${r.md} solid`,
borderRadius: "50%",
disabled: {
backgroundColor: e["beige-60"]
}
}
};
}, kr = (o) => {
const { colors: r } = o;
return {
navigation: {
bullet: {
active: { backgroundColor: r["primary-40"] },
default: { backgroundColor: r["beige-40"] }
}
}
};
}, Fr = (o) => {
const { borderWidths: r, colors: e, fontWeights: i, space: n } = o;
return {
td: {
padding: n.xl,
textAlign: "left"
},
th: {
borderBottomColor: e["neutral-90"],
borderBottomStyle: "solid",
borderBottomWidth: r.sm,
color: e["neutral-60"],
fontWeight: i.medium,
textAlign: "left"
},
tr: {
clickable: {
cursor: "pointer"
},
danger: {
backgroundColor: e["red-10"],
color: e["red-70"]
},
default: {
borderBottomColor: e["neutral-30"],
borderBottomStyle: "solid",
borderBottomWidth: r.sm
},
info: {
backgroundColor: e["blue-10"],
color: e["blue-70"]
},
success: {
backgroundColor: e["green-10"],
color: e["green-70"]
},
warning: {
backgroundColor: e["orange-10"],
color: e["orange-80"]
}
}
};
}, vr = (o) => {
const { borderWidths: r, colors: e, fontSizes: i, fontWeights: n, lineHeights: l, space: d } = o;
return {
activeBar: {
horizontal: {
background: e["primary-40"],
height: r.md
},
vertical: {
background: e["primary-40"],
width: r.md
}
},
badge: {
maxHeight: d.lg
},
icon: {
maxHeight: d.lg,
maxWidth: d.lg
},
item: {
active: {
color: e["neutral-90"]
},
default: {
color: e["neutral-70"],
fontWeight: n.medium,
lineHeight: l.md,
textDecoration: "none"
},
disabled: {
color: e["neutral-50"]
},
focus: {
color: e["neutral-90"]
},
size: {
md: {
fontSize: i.md
},
sm: {
fontSize: i.sm
}
}
},
panel: {
horizontal: {
"&:focus": {
outline: "none"
},
marginTop: d.xl
},
vertical: {
"&:focus": {
outline: "none"
}
}
},
tabsBorder: {
horizontal: {
boxShadow: `inset 0 -${r.sm} 0 ${e["neutral-30"]}`
},
vertical: {
boxShadow: `inset -${r.sm} 0 0 ${e["neutral-30"]}`
}
}
};
}, wr = (o) => {
const { colors: r, fontSizes: e, fontWeights: i, radii: n, space: l, toRem: d } = o, a = {
md: d(32),
sm: d(24),
xs: d(20)
}, s = (g) => ({
backgroundColor: r[`${g}-10`],
color: r[`${g}-90`]
}), t = (g) => ({
backgroundColor: r[`${g}-20`]
}), c = (g) => ({
backgroundColor: r[`${g}-${g === "green" ? "30" : "40"}`],
color: r["neutral-90"]
}), b = (g) => ({
backgroundColor: r[`${g}-${g === "green" ? "40" : "50"}`]
});
return {
default: {
borderRadius: n.md,
fontWeight: i.medium
},
hover: {
ai: {
backgroundColor: r["violet-30"]
},
blue: b("blue"),
danger: t("red"),
default: {
backgroundColor: r["beige-30"]
},
green: b("green"),
info: t("blue"),
orange: b("orange"),
pink: b("pink"),
primary: {
backgroundColor: r["primary-50"]
},
success: t("green"),
teal: b("teal"),
violet: b("violet"),
warning: t("orange")
},
icon: {
md: d(16),
sm: d(12),
xs: d(12)
},
shape: {
md: {
height: a.md,
width: a.md
},
sm: {
height: a.sm,
width: a.sm
},
xs: {
height: a.xs,
width: a.xs
}
},
sizes: {
md: {
fontSize: e.sm,
gap: l.sm,
height: a.md,
padding: `${l.xs} ${l.sm}`
},
sm: {
fontSize: e.xs,
gap: l.xs,
height: a.sm,
padding: `${l.xs} ${l.sm}`
},
xs: {
borderRadius: n.sm,
fontSize: e.xs,
gap: l.xs,
height: a.xs,
padding: `${l.xxs} ${l.xs}`
}
},
variants: {
ai: {
backgroundColor: r["violet-20"],
color: r["violet-90"]
},
blue: c("blue"),
danger: s("red"),
default: {
backgroundColor: r["beige-20"],
color: r["beige-90"]
},
green: c("green"),
info: s("blue"),
orange: c("orange"),
pink: c("pink"),
primary: {
backgroundColor: r["primary-40"],
color: o.colors["neutral-90"]
},
success: s("green"),
teal: c("teal"),
violet: c("violet"),
warning: s("orange")
}
};
}, Wr = (o) => {
const { space: r, toRem: e } = o;
return {
minHeight: e(130),
padding: r.md
};
}, $r = (o, r) => {
const { toEm: e, toRem: i } = r, n = i;
return {
h0: n(65),
h1: n(45),
h2: n(36),
h3: n(26),
h4: n(20),
h5: n(16),
h6: n(14),
lg: n(18),
md: n(16),
sm: n(14),
"subtitle-md": n(13),
"subtitle-sm": n(11),
xs: n(12)
};
}, Sr = ({
defaultLineHeight: o,
toRem: r
}) => ({
h0: r(72),
h1: r(48),
h2: r(40),
h3: r(32),
h4: r(24),
h5: r(18),
h6: r(16),
html: o,
lg: r(24),
md: r(18),
sm: r(18),
"subtitle-md": o,
"subtitle-sm": o,
xs: r(14)
}), Dr = {
bold: 600,
medium: 500,
regular: 400
}, Tr = ({
defaultLetterSpacing: o,
toRem: r
}) => ({
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),
html: o,
lg: o,
md: o,
sm: o,
"subtitle-md": r(-0.2),
"subtitle-sm": r(-0.2),
xs: r(-0.2)
}), Rr = (o) => {
const { fontWeights: r } = o;
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
};
}, _r = (o) => {
const { fonts: r } = o;
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
};
}, zr = () => ({
"subtitle-md": "uppercase",
"subtitle-sm": "uppercase"
}), Br = (o) => {
const { colors: r } = o;
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"]
};
}, U = (o) => {
const {
fontSizes: r,
letterSpacings: e,
lineHeights: i,
textsFontColors: n,
textsFontFamily: l,
textsFontWeights: d,
textsTextTransform: a
} = o;
return Object.keys(r).reduce((s, t) => ({
...s,
[t]: {
color: n[t],
fontFamily: l[t] || void 0,
fontSize: r[t],
fontWeight: d[t],
letterSpacing: e[t] || void 0,
lineHeight: i[t] || i.lg,
textTransform: a[t] || void 0
}
}), {});
}, Ar = (o, r, e) => ({
headings: [r, "sans-serif"].join(", "),
icons: e,
texts: [o, "sans-serif"].join(", ")
}), Er = (o) => {
const { borderWidths: r, colors: e, fontWeights: i, radii: n, space: l } = o;
return {
bottom: {
paddingBottom: l.lg
},
default: {
paddingLeft: l.sm,
paddingRight: l.sm
},
growls: {
default: {
...U(o).sm,
borderRadius: n.lg,
borderStyle: "solid",
borderWidth: r.sm,
maxWidth: 340
},
title: {
color: e["neutral-90"],
fontWeight: i.bold
}
},
snackbar: {
default: {
borderRadius: n.lg
},
separator: {
danger: {
borderLeftColor: e["red-20"]
},
default: {
borderLeft: "1px solid",
borderLeftColor: e["neutral-30"]
},
info: {
borderLeftColor: e["blue-30"]
},
success: {
borderLeftColor: e["green-30"]
},
warning: {
borderLeftColor: e["orange-20"]
}
}
},
top: {
paddingTop: l.lg
}
};
}, Lr = "0.32rem !important", Ir = "0.12rem ! important", Hr = (o) => {
const { borderWidths: r, colors: e, focus: i, toRem: n } = o;
return {
after: {
checked: {
backgroundColor: e["neutral-10"],
borderColor: e["neutral-10"]
},
default: {
backgroundColor: e["neutral-10"],
borderColor: e["neutral-50"],
borderRadius: "50%",
borderStyle: "solid",
borderWidth: r.sm
},
disabled: {
backgroundColor: e["beige-60"],
borderColor: "transparent"
},
sizes: {
md: {
height: n(20),
width: n(20)
},
sm: {
height: n(16),
width: n(16)
},
xs: {
height: n(12),
width: n(12)
}
}
},
icon: {
position: {
md: {
left: "4px",
right: "4px"
},
sm: {
left: "4px",
right: "4px"
},
xs: {
left: "2px",
right: "2px"
}
},
sizes: {
md: {
fontSize: n(16),
height: n(16),
width: n(16)
},
sm: {
fontSize: n(12),
height: n(12),
width: n(12)
},
xs: {
fontSize: n(10),
height: n(10),
width: n(10)
}
}
},
item: {
checked: {
backgroundColor: e["primary-40"],
borderColor: e["primary-40"]
},
default: {
"&:focus": {
borderColor: e["primary-30"],
...i(e["primary-30"])
},
backgroundColor: e["neutral-10"],
borderColor: e["neutral-30"],
borderRadius: n(16),
borderStyle: "solid",
borderWidth: r.sm
},
disabled: {
backgroundColor: e["beige-40"],
borderColor: e["beige-60"]
},
sizes: {
md: {
height: n(24),
marginTop: "0 !important",
width: n(44)
},
sm: {
height: n(20),
marginTop: Ir,
width: n(36)
},
xs: {
height: n(16),
marginTop: Lr,
width: n(28)
}
}
}
};
}, qr = (o) => {
const { borderWidths: r, colors: e, fontSizes: i, fontWeights: n, radii: l, space: d, toRem: a } = o;
return {
backgroundColor: e["neutral-90"],
border: `${r.sm} solid ${e["neutral-60"]}`,
borderRadius: l.md,
boxSizing: "border-box",
color: e["neutral-10"],
fontSize: i.sm,
fontWeight: n.medium,
maxWidth: a(200),
padding: `${d.xs} ${d.sm}`
};
}, Or = (o) => {
const { colors: r } = o;
return {
ai: {
color: r["violet-70"]
},
danger: {
color: r["red-70"]
},
default: {
color: r["neutral-90"]
},
info: {
color: r["blue-60"]
},
success: {
color: r["green-60"]
},
warning: {
color: r["orange-60"]
}
};
}, Ur = {
sm: "1px",
md: "2px",
lg: "3px"
}, Pr = {
"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"
}, P = (o) => ({
...o,
overlay: "rgba(0, 0, 0, 0.55)",
"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"]
}), p = P(Pr), jr = Object.keys(p).reduce((o, r) => {
if (r.startsWith("secondary-") || r === "overlay") return o;
const e = 100 - Number(r.slice(-2)), i = r.slice(0, r.length - 2);
return {
...o,
[r]: p[`${i}${e}`]
};
}, {}), Mr = {
...p,
...P(jr)
}, ue = {
colors: Mr
}, Nr = (o) => {
const { borderWidths: r, colors: e, focus: i, fontSizes: n, fontWeights: l, radii: d, space: a, toRem: s } = o;
return {
checkableField: {
checked: {
color: "neutral-90"
// not hex color, only color from browser because is on a content svg
},
disabled: {
opacity: 0.4
}
},
checkablelabel: {
checked: {
"-webkit-text-stroke": "0.04em",
color: e["neutral-90"]
},
default: {}
},
default: {
backgroundColor: e["neutral-10"],
borderColor: e["neutral-30"],
borderRadius: d.md,
borderStyle: "solid",
borderWidth: r.sm,
color: e["neutral-90"],
fontSize: n.sm,
fontWeight: l.regular,
/* Can't use 16 because that's a valid line-height value (16em) */
lineHeight: "1rem",
outline: "none"
},
disabled: {
backgroundColor: e["beige-40"],
color: e["beige-70"],
cursor: "not-allowed"
},
fieldset: {
"border-width": "0"
},
focused: {
danger: { ...i(e["red-30"]) },
default: {
...i(e["primary-20"]),
borderColor: e["primary-40"]
},
success: { ...i(e["green-30"]) },
warning: { ...i(e["orange-20"]) }
},
hover: {
default: {
borderColor: e["neutral-40"]
},
transparency: {
borderColor: e["neutral-20"]
}
},
iconPlacement: {
lg: {
left: s(12),
right: s(12)
},
md: {
left: s(12),
right: s(12)
},
sm: {
left: s(12),
right: s(12)
},
xs: {
left: s(8),
right: s(8)
}
},
placeholder: {
color: e["neutral-50"]
},
select: {
default: {
borderRadius: d.md,
maxHeight: s(155)
},
disabled: {
color: e["beige-60"],
cursor: "not-allowed"
},
existing: {
color: e["beige-40"],
cursor: "not-allowed"
},
highlighted: {
backgroundColor: e["beige-20"],
cursor: "default"
},
selected: {
color: e["neutral-90"],
fontWeight: l.bold
},
selectedAndHighlighted: {
backgroundImage: "linear-gradient(0deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08) 100%)"
}
},
sizes: {
lg: {
height: s(48),
paddingBottom: a.lg,
paddingLeft: a.md,
paddingRight: a.md,
paddingTop: a.lg
},
md: {
height: s(40),
paddingBottom: a.md,
paddingLeft: a.md,
paddingRight: a.md,
paddingTop: a.md
},
sm: {
height: s(32),
paddingBottom: a.sm,
paddingLeft: a.md,
paddingRight: a.md,
paddingTop: a.sm
},
xs: {
height: s(24),
paddingBottom: a.xs,
paddingLeft: a.sm,
paddingRight: a.sm,
paddingTop: a.xs
}
},
variants: {
danger: {
borderColor: e["red-70"]
},
success: {
borderColor: e["green-60"]
},
warning: {
borderColor: e["orange-60"]
}
}
};
}, Kr = ({ colors: o }) => {
function r(e = o["primary-40"]) {
return {
boxShadow: `0 0 0 2px ${e}`
};
}
return r;
}, Gr = "f19d0de47a5f6f7446d37111f075c0901835bf12", Yr = (o) => ({
"welcome-font": [
{
url: `${o.fontsUrl}/welcome-font-regular`,
weight: "400"
},
{
url: `${o.fontsUrl}/welcome-font-medium`,
weight: "500"
},
{
url: `${o.fontsUrl}/welcome-font-bold`,
weight: "600"
},
{
style: "italic",
url: `${o.fontsUrl}/welcome-font-regular-italic`,
weight: "400"
},
{
style: "italic",
url: `${o.fontsUrl}/welcome-font-medium-italic`,
weight: "500"
},
{
style: "italic",
url: `${o.fontsUrl}/welcome-font-bold-italic`,
weight: "600"
}
],
"welcome-icon-font": [
{
display: "block",
url: `${o.fontsUrl}/icon-font/${Gr}/welcome-icon-font`
}
],
"work-sans": [
{
isVariable: !0,
stretch: "75% 125%",
url: `${o.fontsUrl}/work-sans-variable`,
weight: "100 1000"
}
]
}), Jr = (o) => ({
none: "0",
sm: o.toRem(2),
md: o.toRem(4),
lg: o.toRem(8),
xl: o.toRem(16),
xxl: o.toRem(24),
full: "100%"
}), Xr = {
xs: 0,
sm: 480,
md: 736,
lg: 980,
xl: 1280,
xxl: 1440,
"3xl": 1620,
"4xl": 1920
}, Zr = (o) => ({
backgroundColor: o.colors["primary-40"],
color: o.colors["neutral-90"]
}), Qr = {
sm: "1px 2px 4px 0 rgba(0,0,0,0.05)",
md: "3px 4px 10px 0 rgba(0,0,0,0.07)"
}, Vr = (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)
}), h = {
primary: "ease",
secondary: "linear",
tertiary: "cubic-bezier(0.41, 0.094, 0.54, 0.07)"
}, re = {
fast: `100ms ${h.secondary}`,
medium: `300ms ${h.primary}`,
slow: `500ms ${h.tertiary}`
}, ee = ({ colors: o }) => ({
default: S`
background-image: linear-gradient(
0deg,
${o["primary-40"]},
${o["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: S`
opacity: 1;
background-position-y: 100%;
background-size: 100% 100%;
`
}), oe = "work-sans", te = 16, ne = "-0.019rem", ie = 1.15, ae = "https://cdn.welcome-ui.com/fonts", le = "welcome-font", de = "welcome-icon-font", be = (o = {}) => {
const {
defaultFontFamily: r = oe,
defaultFontSize: e = te,
defaultLetterSpacing: i = ne,
defaultLineHeight: n = ie,
fontsUrl: l = ae,
headingFontFamily: d = le,
iconFontFamily: a = de,
...s
} = o;
let t = {};
return t.transformers = { ...M }, t.toEm = (c) => `${c / e}em`, t.toRem = (c) => `${c / e}rem`, t.toPx = (c) => `${c * e}px`, t.colors = p, t.fontsUrl = l, t.fontFaces = Yr(t), t.fontSizes = $r("rem", t), t.defaultLineHeight = n, t.defaultLetterSpacing = i, t.lineHeights = Sr(t), t.fontWeights = Dr, t.letterSpacings = Tr(t), t.fonts = Ar(r, d, a), t.borderWidths = Ur, t.screens = Xr, t.space = Vr(t), t.inset = t.space, t.radii = Jr(t), t.transitions = re, t.timingFunction = h, t.shadows = Qr, t = I(t, s), t.selection = Zr(t), t.underline = ee(t), t.focus = Kr(t), t.textsFontWeights = Rr(t), t.textsFontFamily = _r(t), t.textsFontColors = Br(t), t.textsTextTransform = zr(), t.texts = U(t), t.defaultFields = Nr(t), t.icons = gr(t), t.accordions = Q(t), t.alerts = V(t), t.avatars = rr(t), t.badges = er(t), t.breadcrumbs = or(t), t.buttons = tr(t), t.cards = nr(t), t.checkboxes = ir(t), t.dateTimePickerCommon = ar(t), t.drawers = lr(t), t.dropdownMenu = dr(t), t.fileDrops = sr(t), t.hints = cr(t), t.labels = ur(t), t.links = br(t), t.loaders = mr(t), t.modals = hr(t), t.paginations = pr(t), t.popovers = fr(t), t.radios = xr(t), t.radiosTab = Cr(t), t.sliders = yr(t), t.swipers = kr(t), t.tables = Fr(t), t.tabs = vr(t), t.tags = wr(t), t.textareas = Wr(t), t.toasts = Er(t), t.toggles = Hr(t), t.tooltips = qr(t), t.variantIcon = Or(t), t.states = u.states, t.durations = u.durations, t.gridTemplateColumns = u.gridTemplateColumns, t.gridTemplateRows = u.gridTemplateRows, t.ringWidths = u.ringWidths, t.borders = u.borders, t.transitionProperties = u.transitionProperties, t.timingFunctions = u.timingFunctions, t.animations = u.animations, t.xstyled = u.xstyled, t = I(t, s), t;
};
export {
be as createTheme,
ue as darkTheme
};