quirk-ui 0.0.141 → 0.0.142
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/index12.css +1 -1
- package/dist/assets/index14.css +1 -1
- package/dist/assets/index46.css +1 -1
- package/dist/components/ButtonGroup/index.js +1 -1
- package/dist/components/CallToAction/index.js +38 -34
- package/dist/components/NavBar/index.js +42 -40
- package/dist/lib/components/CallToAction/index.d.ts +2 -0
- package/dist/styles.css +3 -3
- package/package.json +1 -1
package/dist/assets/index12.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._buttonGroup_15lw8_1{display:flex;gap:var(--spacing-md)}._buttonGroup_15lw8_1>*{align-self:center;justify-content:center;width:auto}@media (max-width: 480px){._buttonGroup_15lw8_1>*{width:100%}}._left_15lw8_16{justify-content:flex-start}._center_15lw8_20{justify-content:center}._center_15lw8_20>*{align-self:center;justify-content:center}._right_15lw8_29{justify-content:flex-end}._vertical_15lw8_33{flex-direction:column}._horizontal_15lw8_37{flex-direction:row}@media (max-width: 480px){._buttonGroup_15lw8_1{flex-direction:column}}
|
package/dist/assets/index14.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._callToAction_11phy_1{display:inline-flex;justify-content:center;text-decoration:none;border-radius:var(--radius-md);font-size:var(--font-size-md);font-weight:var(--font-weight-bold);font-family:inherit;background-color:var(--color-primary);cursor:pointer;transition:background-color .25s,border-color .25s;height:40px}@media (max-width: 480px){._callToAction_11phy_1{width:100%}}._callToAction_11phy_1:focus,._callToAction_11phy_1:focus-visible{outline:4px auto -webkit-focus-ring-color}._callToAction_11phy_1:disabled{border-color:var(--color-muted);background-color:var(--color-muted);color:#e0e0e0;cursor:not-allowed}._blurred_11phy_32{-webkit-backdrop-filter:saturate(1.1) blur(1rem);backdrop-filter:saturate(1.1) blur(1rem);background-color:transparent}._blurred_11phy_32 ._content_11phy_36{background-color:#2563ebd9;color:#fff}._blurredInverted_11phy_42{-webkit-backdrop-filter:saturate(1.1) blur(1rem);backdrop-filter:saturate(1.1) blur(1rem);background-color:transparent}._blurredInverted_11phy_42 ._content_11phy_36{background-color:#ffffff80;color:var(--color-primary)}._primary_11phy_52{background-color:var(--color-primary);color:#fff}._primary_11phy_52:hover{background-color:var(--color-secondary);color:#fff}._primaryInverted_11phy_62{border-color:#fff;background-color:#fff;color:var(--color-primary)}._primaryInverted_11phy_62:hover{border-color:var(--color-secondary);background-color:var(--color-secondary);color:var(--color-primary)}._secondary_11phy_74{background-color:transparent;border-color:var(--color-primary);border-width:2px;color:var(--color-primary)}._secondary_11phy_74:hover{border-color:var(--color-primary);background-color:var(--color-primary);color:#fff}._secondaryInverted_11phy_87{background-color:transparent;border-color:#fff;border-width:2px;color:#fff}._secondaryInverted_11phy_87:hover{border-color:#fff;background-color:#fff;color:var(--color-primary)}._link_11phy_100{color:var(--color-link);background-color:transparent;border:none;padding:0;text-decoration:none;height:unset}._linkInverted_11phy_109{color:#fff;background-color:transparent;border:none;padding:0;text-decoration:none;height:unset}._underline_11phy_118{color:var(--color-link);background-color:transparent;border:none;padding:0;text-decoration:underline;height:unset}._underlineInverted_11phy_127{color:#fff;background-color:transparent;border:none;padding:0;text-decoration:underline;height:unset}._muted_11phy_136{color:var(--color-muted);background-color:transparent;border:none;padding:0;text-decoration:none;height:unset}._icon_11phy_145{display:inline-flex}._content_11phy_36{display:inline-flex;align-items:center;justify-content:center;flex-direction:row;gap:var(--spacing-sm);text-wrap:nowrap;border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md)}._iconLeft_11phy_160{flex-direction:row-reverse}._iconRight_11phy_164{flex-direction:row}
|
package/dist/assets/index46.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--nav-height: 65px}.
|
|
1
|
+
:root{--nav-height: 65px}._navbar_1c696_5{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%;background-color:var(--color-background);padding:0 var(--spacing-md);position:relative;z-index:1000;height:var(--nav-height)}._transparent_1c696_19{position:fixed;top:0;left:0;right:0;background-color:transparent}._transparent_1c696_19 ._nav_1c696_5{background:#ffffff80;backdrop-filter:saturate(1.1) blur(1rem);-webkit-backdrop-filter:blur(6px);height:auto;border-radius:var(--radius-full);padding:0 var(--spacing-md)}._transparent_1c696_19 ._nav_1c696_5 ._sublinks_1c696_42{background:#ffffff80;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}._left_1c696_50 ._container_1c696_51{justify-content:flex-start}._left_1c696_50 ._logo_1c696_26{flex:unset}._left_1c696_50 ._nav_1c696_5{flex:1}@media (max-width: 767px){._left_1c696_50 ._logo_1c696_26{flex:1}}._center_1c696_70 ._nav_1c696_5{position:absolute;transition:transform .3s ease-in-out,opacity .3s ease-in-out;will-change:transform,opacity}._center_1c696_70 ._nav_1c696_5._hidden_1c696_76{transform:translateY(-100%);opacity:0;pointer-events:none}._center_1c696_70 ._nav_1c696_5._visible_1c696_82{transform:translateY(0);opacity:1;pointer-events:auto}@media (max-width: 767px){._center_1c696_70 ._logo_1c696_26{flex:1}}._right_1c696_96 ._container_1c696_51{justify-content:flex-end}._right_1c696_96 ._logo_1c696_26{flex:1}._right_1c696_96 ._nav_1c696_5{flex:unset}._sticky_1c696_110{position:sticky;top:0;width:100%}._container_1c696_51{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);width:100%;height:100%;margin:0 auto}._logo_1c696_26{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary);display:flex;align-items:center;justify-content:flex-start}._logo_1c696_26 img{height:auto;width:auto}._menuToggle_1c696_140{background:none;border:none;cursor:pointer;display:none;color:var(--color-text-primary);z-index:1100}._utilityMobile_1c696_149{display:none}._utility_1c696_149 a{font-size:var(--font-size-sm)}._nav_1c696_5{display:flex;gap:var(--spacing-lg);height:100%;transition:transform .3s ease}._linkWrapper_1c696_164{position:relative;display:flex;align-items:center}._linkItem_1c696_170{display:flex;align-items:center;box-sizing:border-box}._sublinkToggle_1c696_178,._link_1c696_164{text-decoration:none;color:var(--color-text-primary);padding:var(--spacing-sm);transition:color .3s ease;font-family:inherit;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);box-sizing:border-box}._link_1c696_164:hover,._sublinkToggle_1c696_178:hover,._navItem_1c696_195:hover{color:var(--color-primary)}._sublinkToggle_1c696_178{background:none;border:none;display:flex;align-items:center;cursor:pointer;color:var(--color-text-primary)}._sublinks_1c696_42{position:absolute;right:0;top:100%;background-color:var(--color-background);box-shadow:0 6px 8px #0000001a;overflow:hidden;max-height:0;min-width:100%;width:max-content;opacity:0;z-index:100;transition:max-height .3s ease,opacity .3s ease,visibility .3s ease;display:flex;visibility:hidden;flex-direction:column;align-items:flex-end;gap:var(--spacing-md);padding:var(--spacing-md);border-radius:0 0 var(--radius-md) var(--radius-md);pointer-events:none}._sublinks_1c696_42._show_1c696_232{max-height:500px;opacity:1;pointer-events:auto;visibility:visible}._chevron_1c696_239{transition:transform .3s ease}._sublinkToggle_1c696_178._open_1c696_243 ._chevron_1c696_239{transform:rotate(180deg)}@media (max-width: 767px){._logo_1c696_26{flex:1}._menuToggle_1c696_140{display:flex;align-items:center;justify-content:center}._utility_1c696_149 a:first-of-type{display:none}._utilityMobile_1c696_149{display:block;transform:translateY(100px);position:fixed;bottom:1rem;margin:0 auto;width:100%;z-index:1001;transition:transform .3s ease-in-out}._utilityMobile_1c696_149._open_1c696_243{transform:translateY(0)}._nav_1c696_5{display:none;position:fixed;top:calc(var(--nav-height) - 1px);left:0;width:100%;height:100%;background-color:var(--color-background);display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-md);padding:var(--spacing-md);border-top:1px solid var(--color-border);z-index:1000;overflow-y:auto;transform:translate(100%)}._nav_1c696_5._open_1c696_243{transform:translate(0)}._linkWrapper_1c696_164{flex-direction:column;width:100%;max-width:300px;margin:0 auto;padding:var(--spacing-sm) 0}._linkWrapper_1c696_164._parent_1c696_312{border-bottom:1px solid var(--color-border)}._linkWrapper_1c696_164._parent_1c696_312:last-of-type{border:none}._linkItem_1c696_170{width:100%}._chevron_1c696_239{display:none}._sublinks_1c696_42{position:relative;top:0;box-shadow:none;max-height:fit-content;opacity:1;visibility:visible;align-items:flex-start;padding:var(--spacing-sm);gap:0;pointer-events:auto}._sublinkToggle_1c696_178{cursor:pointer;pointer-events:none;color:var(--color-muted)}}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as i } from "react/jsx-runtime";
|
|
2
|
-
import '../../assets/index12.css';const s = "
|
|
2
|
+
import '../../assets/index12.css';const s = "_buttonGroup_15lw8_1", _ = "_left_15lw8_16", a = "_center_15lw8_20", u = "_right_15lw8_29", h = "_vertical_15lw8_33", p = "_horizontal_15lw8_37", t = {
|
|
3
3
|
buttonGroup: s,
|
|
4
4
|
left: _,
|
|
5
5
|
center: a,
|
|
@@ -1,19 +1,21 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import '../../assets/index14.css';const
|
|
3
|
-
callToAction:
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
1
|
+
import { jsx as e, jsxs as h } from "react/jsx-runtime";
|
|
2
|
+
import '../../assets/index14.css';const u = "_callToAction_11phy_1", v = "_blurred_11phy_32", I = "_content_11phy_36", m = "_blurredInverted_11phy_42", b = "_primary_11phy_52", f = "_primaryInverted_11phy_62", k = "_secondary_11phy_74", g = "_secondaryInverted_11phy_87", $ = "_link_11phy_100", A = "_linkInverted_11phy_109", T = "_underline_11phy_118", x = "_underlineInverted_11phy_127", R = "_icon_11phy_145", L = "_iconLeft_11phy_160", C = "_iconRight_11phy_164", n = {
|
|
3
|
+
callToAction: u,
|
|
4
|
+
blurred: v,
|
|
5
|
+
content: I,
|
|
6
|
+
blurredInverted: m,
|
|
7
|
+
primary: b,
|
|
8
|
+
primaryInverted: f,
|
|
9
|
+
secondary: k,
|
|
10
|
+
secondaryInverted: g,
|
|
11
|
+
link: $,
|
|
12
|
+
linkInverted: A,
|
|
13
|
+
underline: T,
|
|
14
|
+
underlineInverted: x,
|
|
15
|
+
icon: R,
|
|
16
|
+
iconLeft: L,
|
|
17
|
+
iconRight: C
|
|
18
|
+
}, l = {
|
|
17
19
|
primary: n.primary,
|
|
18
20
|
primaryInverted: n.primaryInverted,
|
|
19
21
|
secondary: n.secondary,
|
|
@@ -21,49 +23,51 @@ import '../../assets/index14.css';const p = "_callToAction_9w64n_1", m = "_prima
|
|
|
21
23
|
link: n.link,
|
|
22
24
|
linkInverted: n.linkInverted,
|
|
23
25
|
underline: n.underline,
|
|
24
|
-
underlineInverted: n.underlineInverted
|
|
25
|
-
|
|
26
|
+
underlineInverted: n.underlineInverted,
|
|
27
|
+
blurred: n.blurred,
|
|
28
|
+
blurredInverted: n.blurredInverted
|
|
29
|
+
}, N = {
|
|
26
30
|
left: n.iconLeft,
|
|
27
31
|
right: n.iconRight
|
|
28
32
|
};
|
|
29
|
-
function
|
|
33
|
+
function q({
|
|
30
34
|
variant: t = "primary",
|
|
31
35
|
icon: o,
|
|
32
|
-
iconAlignemnt:
|
|
33
|
-
useRouter:
|
|
34
|
-
className:
|
|
35
|
-
children:
|
|
36
|
+
iconAlignemnt: s = "right",
|
|
37
|
+
useRouter: j = !1,
|
|
38
|
+
className: c,
|
|
39
|
+
children: a,
|
|
36
40
|
disabled: _ = !1,
|
|
37
41
|
...r
|
|
38
42
|
}) {
|
|
39
|
-
const
|
|
40
|
-
/* @__PURE__ */ e("span", { children:
|
|
43
|
+
const i = /* @__PURE__ */ h("span", { className: `${n.content} ${N[s]}`, children: [
|
|
44
|
+
/* @__PURE__ */ e("span", { children: a }),
|
|
41
45
|
o && /* @__PURE__ */ e("span", { className: n.icon, children: o })
|
|
42
46
|
] });
|
|
43
47
|
if (r.as == "a") {
|
|
44
|
-
const { href: y, target:
|
|
48
|
+
const { href: y, target: d, ...p } = r;
|
|
45
49
|
return /* @__PURE__ */ e(
|
|
46
50
|
"a",
|
|
47
51
|
{
|
|
48
52
|
href: y,
|
|
49
|
-
target:
|
|
50
|
-
rel:
|
|
51
|
-
className: `${
|
|
52
|
-
...
|
|
53
|
-
children:
|
|
53
|
+
target: d,
|
|
54
|
+
rel: d === "_blank" ? "noopener noreferrer" : void 0,
|
|
55
|
+
className: `${c ?? ""} ${n.callToAction} ${l[t]}`,
|
|
56
|
+
...p,
|
|
57
|
+
children: i
|
|
54
58
|
}
|
|
55
59
|
);
|
|
56
60
|
}
|
|
57
61
|
return /* @__PURE__ */ e(
|
|
58
62
|
"button",
|
|
59
63
|
{
|
|
60
|
-
className: `${
|
|
64
|
+
className: `${c ?? ""} ${n.callToAction} ${l[t]}`,
|
|
61
65
|
disabled: _,
|
|
62
66
|
...r,
|
|
63
|
-
children:
|
|
67
|
+
children: i
|
|
64
68
|
}
|
|
65
69
|
);
|
|
66
70
|
}
|
|
67
71
|
export {
|
|
68
|
-
|
|
72
|
+
q as CallToAction
|
|
69
73
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsx as t, jsxs as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { CallToAction as
|
|
4
|
-
import { ButtonGroup as
|
|
1
|
+
import { jsx as t, jsxs as f } from "react/jsx-runtime";
|
|
2
|
+
import { useState as d, useRef as C, useCallback as u, useEffect as E } from "react";
|
|
3
|
+
import { CallToAction as I } from "../CallToAction/index.js";
|
|
4
|
+
import { ButtonGroup as W } from "../ButtonGroup/index.js";
|
|
5
5
|
import { X as P } from "../../x-CnsEH4Ox.js";
|
|
6
6
|
import { c as A } from "../../createLucideIcon-C8GTh_Qx.js";
|
|
7
7
|
import { C as G } from "../../chevron-down-DSUzBz9F.js";
|
|
@@ -15,14 +15,14 @@ const X = [
|
|
|
15
15
|
["line", { x1: "4", x2: "20", y1: "12", y2: "12", key: "1e0a9i" }],
|
|
16
16
|
["line", { x1: "4", x2: "20", y1: "6", y2: "6", key: "1owob3" }],
|
|
17
17
|
["line", { x1: "4", x2: "20", y1: "18", y2: "18", key: "yk5zj1" }]
|
|
18
|
-
], q = A("menu", X), F = "
|
|
18
|
+
], q = A("menu", X), F = "_navbar_1c696_5", H = "_transparent_1c696_19", J = "_nav_1c696_5", K = "_sublinks_1c696_42", Q = "_left_1c696_50", U = "_container_1c696_51", Y = "_logo_1c696_26", Z = "_center_1c696_70", ee = "_hidden_1c696_76", ne = "_visible_1c696_82", te = "_right_1c696_96", re = "_sticky_1c696_110", oe = "_menuToggle_1c696_140", ie = "_utilityMobile_1c696_149", se = "_utility_1c696_149", ae = "_linkWrapper_1c696_164", le = "_linkItem_1c696_170", ce = "_sublinkToggle_1c696_178", de = "_link_1c696_164", ue = "_show_1c696_232", _e = "_chevron_1c696_239", ve = "_open_1c696_243", he = "_parent_1c696_312", e = {
|
|
19
19
|
navbar: F,
|
|
20
20
|
transparent: H,
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
21
|
+
nav: J,
|
|
22
|
+
sublinks: K,
|
|
23
|
+
left: Q,
|
|
24
|
+
container: U,
|
|
25
|
+
logo: Y,
|
|
26
26
|
center: Z,
|
|
27
27
|
hidden: ee,
|
|
28
28
|
visible: ne,
|
|
@@ -34,12 +34,12 @@ const X = [
|
|
|
34
34
|
linkWrapper: ae,
|
|
35
35
|
linkItem: le,
|
|
36
36
|
sublinkToggle: ce,
|
|
37
|
-
link:
|
|
38
|
-
show:
|
|
37
|
+
link: de,
|
|
38
|
+
show: ue,
|
|
39
39
|
chevron: _e,
|
|
40
|
-
open:
|
|
41
|
-
parent:
|
|
42
|
-
},
|
|
40
|
+
open: ve,
|
|
41
|
+
parent: he
|
|
42
|
+
}, fe = {
|
|
43
43
|
left: e.left,
|
|
44
44
|
center: e.center,
|
|
45
45
|
right: e.right
|
|
@@ -49,23 +49,23 @@ function $e({
|
|
|
49
49
|
items: M,
|
|
50
50
|
utilityItems: s,
|
|
51
51
|
isSticky: T = !1,
|
|
52
|
-
isTransparent:
|
|
52
|
+
isTransparent: m = !1,
|
|
53
53
|
alignment: p = "right",
|
|
54
54
|
className: z
|
|
55
55
|
}) {
|
|
56
|
-
const [a, b] =
|
|
56
|
+
const [a, b] = d(!1), [O, c] = d(null), [R, j] = d(0), [S, V] = d(!1), _ = C(null), v = C(null), B = () => {
|
|
57
57
|
b((n) => !n);
|
|
58
58
|
}, D = (n) => {
|
|
59
59
|
c((o) => o === n ? null : n);
|
|
60
|
-
}, g =
|
|
60
|
+
}, g = u((n) => {
|
|
61
61
|
_.current && !_.current.contains(n.target) && c(null);
|
|
62
|
-
}, []), y =
|
|
62
|
+
}, []), y = u(() => {
|
|
63
63
|
c(null);
|
|
64
|
-
}, []), k =
|
|
64
|
+
}, []), k = u(() => {
|
|
65
65
|
w(), typeof window < "u" && window.innerWidth > 768 && (b(!1), c(null), typeof document < "u" && (document.body.style.overflow = ""));
|
|
66
|
-
}, []), w =
|
|
67
|
-
if (
|
|
68
|
-
const n =
|
|
66
|
+
}, []), w = u(() => {
|
|
67
|
+
if (v.current) {
|
|
68
|
+
const n = v.current.getBoundingClientRect().width;
|
|
69
69
|
j(n), V(!0);
|
|
70
70
|
}
|
|
71
71
|
}, []);
|
|
@@ -82,8 +82,8 @@ function $e({
|
|
|
82
82
|
}, [a]);
|
|
83
83
|
const $ = (n, o = "") => n.map((r) => {
|
|
84
84
|
var N;
|
|
85
|
-
const i = `${o}/${r.label}`, l = O === i,
|
|
86
|
-
return /* @__PURE__ */
|
|
85
|
+
const i = `${o}/${r.label}`, l = O === i, h = (N = r.sublinks) == null ? void 0 : N.length;
|
|
86
|
+
return /* @__PURE__ */ f(
|
|
87
87
|
"div",
|
|
88
88
|
{
|
|
89
89
|
className: `${e.linkWrapper} ${o ? "" : e.parent}`,
|
|
@@ -102,20 +102,20 @@ function $e({
|
|
|
102
102
|
role: "menuitem",
|
|
103
103
|
children: r.label
|
|
104
104
|
}
|
|
105
|
-
) : /* @__PURE__ */
|
|
105
|
+
) : /* @__PURE__ */ f(
|
|
106
106
|
"button",
|
|
107
107
|
{
|
|
108
|
-
"aria-haspopup":
|
|
108
|
+
"aria-haspopup": h ? "true" : void 0,
|
|
109
109
|
"aria-expanded": l,
|
|
110
110
|
className: `${e.sublinkToggle} ${l ? e.open : ""}`,
|
|
111
111
|
onClick: () => D(i),
|
|
112
112
|
children: [
|
|
113
113
|
r.label,
|
|
114
|
-
|
|
114
|
+
h && /* @__PURE__ */ t(G, { size: 21, className: e.chevron })
|
|
115
115
|
]
|
|
116
116
|
}
|
|
117
117
|
) }),
|
|
118
|
-
|
|
118
|
+
h && /* @__PURE__ */ t(
|
|
119
119
|
"div",
|
|
120
120
|
{
|
|
121
121
|
className: `${e.sublinks} ${l ? e.show : ""}`,
|
|
@@ -133,15 +133,15 @@ function $e({
|
|
|
133
133
|
"header",
|
|
134
134
|
{
|
|
135
135
|
ref: _,
|
|
136
|
-
className: `${z ?? ""} ${
|
|
136
|
+
className: `${z ?? ""} ${fe[p]} ${e.navbar} ${T ? e.sticky : ""} ${m ? e.transparent : ""} `,
|
|
137
137
|
role: "navigation",
|
|
138
138
|
"aria-label": "Main navigation",
|
|
139
|
-
children: /* @__PURE__ */
|
|
139
|
+
children: /* @__PURE__ */ f("div", { className: e.container, children: [
|
|
140
140
|
/* @__PURE__ */ t("div", { className: e.logo, children: L }),
|
|
141
141
|
/* @__PURE__ */ t(
|
|
142
142
|
"nav",
|
|
143
143
|
{
|
|
144
|
-
ref:
|
|
144
|
+
ref: v,
|
|
145
145
|
style: {
|
|
146
146
|
left: p === "center" ? `calc(50% - ${R / 2}px)` : "unset"
|
|
147
147
|
},
|
|
@@ -151,9 +151,9 @@ function $e({
|
|
|
151
151
|
children: $(M)
|
|
152
152
|
}
|
|
153
153
|
),
|
|
154
|
-
s && /* @__PURE__ */ t("nav", { className: e.utility, children: /* @__PURE__ */ t(
|
|
154
|
+
s && /* @__PURE__ */ t("nav", { className: e.utility, children: /* @__PURE__ */ t(W, { children: s.map((n, o) => {
|
|
155
155
|
const r = (() => {
|
|
156
|
-
const i = n.variant, l =
|
|
156
|
+
const i = n.variant, l = m && !i.includes("Inverted") ? `${i}Inverted` : i;
|
|
157
157
|
return [
|
|
158
158
|
"primary",
|
|
159
159
|
"primaryInverted",
|
|
@@ -162,15 +162,17 @@ function $e({
|
|
|
162
162
|
"link",
|
|
163
163
|
"linkInverted",
|
|
164
164
|
"underline",
|
|
165
|
-
"underlineInverted"
|
|
166
|
-
|
|
165
|
+
"underlineInverted",
|
|
166
|
+
"blurred",
|
|
167
|
+
"blurredInverted"
|
|
168
|
+
].includes(l) ? l : i;
|
|
167
169
|
})();
|
|
168
170
|
return /* @__PURE__ */ t(
|
|
169
|
-
|
|
171
|
+
I,
|
|
170
172
|
{
|
|
171
173
|
as: "a",
|
|
172
174
|
href: n.href ?? "/",
|
|
173
|
-
variant: r,
|
|
175
|
+
variant: n.variant.includes("blurred") ? n.variant : r,
|
|
174
176
|
children: n.label
|
|
175
177
|
},
|
|
176
178
|
n._id || o
|
|
@@ -180,8 +182,8 @@ function $e({
|
|
|
180
182
|
"nav",
|
|
181
183
|
{
|
|
182
184
|
className: `${e.utilityMobile} ${a ? e.open : ""}`,
|
|
183
|
-
children: /* @__PURE__ */ t(
|
|
184
|
-
|
|
185
|
+
children: /* @__PURE__ */ t(W, { alignment: "center", children: /* @__PURE__ */ t(
|
|
186
|
+
I,
|
|
185
187
|
{
|
|
186
188
|
as: "a",
|
|
187
189
|
href: s[0].href ?? "/",
|
|
@@ -8,6 +8,8 @@ declare const variantClassMap: {
|
|
|
8
8
|
readonly linkInverted: string;
|
|
9
9
|
readonly underline: string;
|
|
10
10
|
readonly underlineInverted: string;
|
|
11
|
+
readonly blurred: string;
|
|
12
|
+
readonly blurredInverted: string;
|
|
11
13
|
};
|
|
12
14
|
export type Variant = keyof typeof variantClassMap;
|
|
13
15
|
declare const iconAlignClassMap: {
|
package/dist/styles.css
CHANGED
|
@@ -9,9 +9,9 @@
|
|
|
9
9
|
._spinner_sf4mt_1{display:inline-flex;align-items:center;justify-content:center;position:relative}._small_sf4mt_8{width:24px;height:24px}._medium_sf4mt_13{width:48px;height:48px}._large_sf4mt_18{width:72px;height:72px}._prong_sf4mt_23{width:8%;height:30%;background-color:currentColor;border-radius:4px;position:absolute;top:67%;transform-origin:center -55%;animation:_fade_sf4mt_1 1s linear infinite}._primary_sf4mt_34{color:var(--color-primary)}._success_sf4mt_38{color:var(--color-success)}._warning_sf4mt_42{color:var(--color-warning)}._danger_sf4mt_46{color:var(--color-error)}@keyframes _fade_sf4mt_1{0%{opacity:1}to{opacity:.2}}._prong_sf4mt_23:nth-child(1){transform:rotate(0);animation-delay:-.9s}._prong_sf4mt_23:nth-child(2){transform:rotate(36deg);animation-delay:-.8s}._prong_sf4mt_23:nth-child(3){transform:rotate(72deg);animation-delay:-.7s}._prong_sf4mt_23:nth-child(4){transform:rotate(108deg);animation-delay:-.6s}._prong_sf4mt_23:nth-child(5){transform:rotate(144deg);animation-delay:-.5s}._prong_sf4mt_23:nth-child(6){transform:rotate(180deg);animation-delay:-.4s}._prong_sf4mt_23:nth-child(7){transform:rotate(216deg);animation-delay:-.3s}._prong_sf4mt_23:nth-child(8){transform:rotate(252deg);animation-delay:-.2s}._prong_sf4mt_23:nth-child(9){transform:rotate(288deg);animation-delay:-.1s}._prong_sf4mt_23:nth-child(10){transform:rotate(324deg);animation-delay:0s}
|
|
10
10
|
._spacer_1pz5u_1{flex-shrink:0;background:none}._horizontal_1pz5u_6{width:100%;height:auto}._vertical_1pz5u_11{height:100%;width:auto}._sm_1pz5u_16{height:.5rem;width:.5rem}._md_1pz5u_21{height:1rem;width:1rem}._lg_1pz5u_26{height:2rem;width:2rem}._xl_1pz5u_31{height:3rem;width:3rem}
|
|
11
11
|
._skeleton_u21vc_1{background-color:#e0e0e0;overflow:hidden;position:relative;display:inline-block;animation:_shimmer_u21vc_1 1.5s infinite;background:linear-gradient(90deg,#e0e0e0,#f0f0f0,#e0e0e0);background-size:200% 100%}._text_u21vc_16{height:16px;width:100%;border-radius:4px}._circle_u21vc_22{border-radius:50%;aspect-ratio:1/1}._rectangle_u21vc_27{border-radius:4px}@keyframes _shimmer_u21vc_1{0%{background-position:-200%}50%{background-position:100%}to{background-position:200%}}
|
|
12
|
-
.
|
|
12
|
+
._buttonGroup_15lw8_1{display:flex;gap:var(--spacing-md)}._buttonGroup_15lw8_1>*{align-self:center;justify-content:center;width:auto}@media (max-width: 480px){._buttonGroup_15lw8_1>*{width:100%}}._left_15lw8_16{justify-content:flex-start}._center_15lw8_20{justify-content:center}._center_15lw8_20>*{align-self:center;justify-content:center}._right_15lw8_29{justify-content:flex-end}._vertical_15lw8_33{flex-direction:column}._horizontal_15lw8_37{flex-direction:row}@media (max-width: 480px){._buttonGroup_15lw8_1{flex-direction:column}}
|
|
13
13
|
._fab_1p460_1{position:fixed;bottom:var(--spacing-lg);right:var(--spacing-lg);z-index:25;background-color:var(--color-primary, #000);color:#fff;border:none;border-radius:var(--radius-full);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);transition:background-color .25s ease-in-out}._fab_1p460_1:hover{background-color:var(--color-secondary)}._sm_1p460_22{width:40px;height:40px}._md_1p460_27{width:56px;height:56px}._lg_1p460_31{width:72px;height:72px}._bottom-right_1p460_36{bottom:var(--spacing-lg);right:var(--spacing-lg)}._bottom-left_1p460_41{bottom:var(--spacing-lg);left:var(--spacing-lg)}._top-right_1p460_46{top:var(--spacing-lg);right:var(--spacing-lg)}._top-left_1p460_51{top:var(--spacing-lg);left:var(--spacing-lg)}._disabled_1p460_56{color:var(--color-muted)}
|
|
14
|
-
.
|
|
14
|
+
._callToAction_11phy_1{display:inline-flex;justify-content:center;text-decoration:none;border-radius:var(--radius-md);font-size:var(--font-size-md);font-weight:var(--font-weight-bold);font-family:inherit;background-color:var(--color-primary);cursor:pointer;transition:background-color .25s,border-color .25s;height:40px}@media (max-width: 480px){._callToAction_11phy_1{width:100%}}._callToAction_11phy_1:focus,._callToAction_11phy_1:focus-visible{outline:4px auto -webkit-focus-ring-color}._callToAction_11phy_1:disabled{border-color:var(--color-muted);background-color:var(--color-muted);color:#e0e0e0;cursor:not-allowed}._blurred_11phy_32{-webkit-backdrop-filter:saturate(1.1) blur(1rem);backdrop-filter:saturate(1.1) blur(1rem);background-color:transparent}._blurred_11phy_32 ._content_11phy_36{background-color:#2563ebd9;color:#fff}._blurredInverted_11phy_42{-webkit-backdrop-filter:saturate(1.1) blur(1rem);backdrop-filter:saturate(1.1) blur(1rem);background-color:transparent}._blurredInverted_11phy_42 ._content_11phy_36{background-color:#ffffff80;color:var(--color-primary)}._primary_11phy_52{background-color:var(--color-primary);color:#fff}._primary_11phy_52:hover{background-color:var(--color-secondary);color:#fff}._primaryInverted_11phy_62{border-color:#fff;background-color:#fff;color:var(--color-primary)}._primaryInverted_11phy_62:hover{border-color:var(--color-secondary);background-color:var(--color-secondary);color:var(--color-primary)}._secondary_11phy_74{background-color:transparent;border-color:var(--color-primary);border-width:2px;color:var(--color-primary)}._secondary_11phy_74:hover{border-color:var(--color-primary);background-color:var(--color-primary);color:#fff}._secondaryInverted_11phy_87{background-color:transparent;border-color:#fff;border-width:2px;color:#fff}._secondaryInverted_11phy_87:hover{border-color:#fff;background-color:#fff;color:var(--color-primary)}._link_11phy_100{color:var(--color-link);background-color:transparent;border:none;padding:0;text-decoration:none;height:unset}._linkInverted_11phy_109{color:#fff;background-color:transparent;border:none;padding:0;text-decoration:none;height:unset}._underline_11phy_118{color:var(--color-link);background-color:transparent;border:none;padding:0;text-decoration:underline;height:unset}._underlineInverted_11phy_127{color:#fff;background-color:transparent;border:none;padding:0;text-decoration:underline;height:unset}._muted_11phy_136{color:var(--color-muted);background-color:transparent;border:none;padding:0;text-decoration:none;height:unset}._icon_11phy_145{display:inline-flex}._content_11phy_36{display:inline-flex;align-items:center;justify-content:center;flex-direction:row;gap:var(--spacing-sm);text-wrap:nowrap;border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md)}._iconLeft_11phy_160{flex-direction:row-reverse}._iconRight_11phy_164{flex-direction:row}
|
|
15
15
|
._iconButton_e9jmu_1{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:var(--spacing-sm);border-radius:var(--radius-md);cursor:pointer;transition:background .25s ease}._iconButton_e9jmu_1:disabled{opacity:.5;cursor:not-allowed}._sm_e9jmu_18{width:32px;height:32px}._md_e9jmu_23{width:40px;height:40px}._lg_e9jmu_28{width:48px;height:48px}._default_e9jmu_33{background-color:#f0f0f0;color:#111}._muted_e9jmu_38{background-color:#bbb;color:var(--color-muted)}._accent_e9jmu_43{background-color:var(--color-primary);color:#fff}._error_e9jmu_48{background-color:var(--color-error);color:#fff}._srOnly_e9jmu_53{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
|
|
16
16
|
h1,h2,h3,h4,h5,h6,._h1_1nzl1_7,._h2_1nzl1_8,._h3_1nzl1_9,._h4_1nzl1_10,._h5_1nzl1_11,._h6_1nzl1_12{line-height:var(--line-height-tight);margin-block:0 var(--spacing-md);color:var(--color-heading)}h1[class*=bg],h2[class*=bg],h3[class*=bg],h4[class*=bg],h5[class*=bg],h6[class*=bg],._h1_1nzl1_7[class*=bg],._h2_1nzl1_8[class*=bg],._h3_1nzl1_9[class*=bg],._h4_1nzl1_10[class*=bg],._h5_1nzl1_11[class*=bg],._h6_1nzl1_12[class*=bg]{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md)}h1,._h1_1nzl1_7{font-size:var(--font-size-h1);font-weight:var(--font-weight-bold);margin-block:0 var(--spacing-sm)}h2,._h2_1nzl1_8{font-size:var(--font-size-h2);font-weight:var(--font-weight-bold);margin-block:0 var(--spacing-sm)}h3,._h3_1nzl1_9{font-size:var(--font-size-h3);font-weight:var(--font-weight-semibold);margin-block:0 var(--spacing-sm)}h4,._h4_1nzl1_10{font-size:var(--font-size-h4);font-weight:var(--font-weight-semibold);margin-block:0 var(--spacing-sm)}h5,._h5_1nzl1_11{font-size:var(--font-size-h5);font-weight:var(--font-weight-medium);margin-block:var(--spacing-xs)}h6,._h6_1nzl1_12{font-size:var(--font-size-h6);font-weight:var(--font-weight-medium);margin-block:var(--spacing-xs)}
|
|
17
17
|
._grid_10mi0_1{display:grid;width:100%;gap:var(--spacing-md, 1rem);grid-template-columns:var(--xs-columns, repeat(1, 1fr));grid-auto-rows:auto 1fr}@media (min-width: 480px){._grid_10mi0_1{grid-template-columns:var(--sm-columns, var(--xs-columns));grid-auto-rows:auto 1fr}}@media (min-width: 768px){._grid_10mi0_1{grid-template-columns:var(--md-columns, var(--sm-columns));grid-auto-rows:1fr}}@media (min-width: 1024px){._grid_10mi0_1{grid-template-columns:var(--lg-columns, var(--md-columns))}}@media (min-width: 1280px){._grid_10mi0_1{grid-template-columns:var(--xl-columns, var(--lg-columns))}}@media (min-width: 1536px){._grid_10mi0_1{grid-template-columns:var(--2xl-columns, var(--xl-columns))}}
|
|
@@ -43,6 +43,6 @@ ul._list_4w9h5_1{list-style-type:none;padding:0;margin:0}ol._list_4w9h5_1{list-s
|
|
|
43
43
|
._wrapper_13tha_1{display:flex;flex-direction:column;position:relative}._input_13tha_7{padding:var(--spacing-sm) var(--spacing-sm);border:2px solid var(--color-border, #ccc);border-radius:var(--radius-md);font-size:var(--font-size-md);outline:none;background-color:var(--color-background);color:var(--color-text-primary)}._input_13tha_7::placeholder{color:var(--color-muted)}._input_13tha_7:focus{border-color:var(--color-primary)}._popover_13tha_25{position:absolute;top:100%;left:0;z-index:10;border-radius:var(--radius-md);background-color:var(--color-background);border:1px solid var(--color-border);margin-top:var(--spacing-xs)}
|
|
44
44
|
._wrapper_7toxm_1{display:flex;flex-direction:column;gap:var(--spacing-sm)}._trackContainer_7toxm_7{display:flex;align-items:center;gap:var(--spacing-sm)}._track_7toxm_7{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background-color:var(--color-muted);border-radius:4px;outline:none}._track_7toxm_7::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background-color:var(--color-primary);border-radius:var(--radius-full);cursor:pointer;border:none}._track_7toxm_7::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background-color:var(--color-primary);border-radius:var(--radius-full);cursor:pointer;border:none}._value_7toxm_44{width:2rem;text-align:right;font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);color:var(--color-primary)}._error_7toxm_52{color:var(--color-error)}._errorMessage_7toxm_56{font-size:var(--font-size-sm);color:var(--color-error)}
|
|
45
45
|
._wrapper_s8dew_1{display:flex;flex-direction:column;gap:var(--spacing-sm)}._dropZone_s8dew_7{border:2px dashed var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-xl);text-align:center;cursor:pointer;background-color:var(--color-background);transition:background-color .3s ease}._dropZone_s8dew_7 p{color:var(--color-text-primary)}._dropZone_s8dew_7:hover{background-color:var(--color-background)}._dragging_s8dew_25{background-color:var(--color-primary);border-color:var(--color-primary)}._input_s8dew_30{display:none}._fileList_s8dew_34{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-top:var(--spacing-md);list-style:none;padding:0}._fileList_s8dew_34 li{color:var(--color-text-primary);display:flex;align-items:center;gap:var(--spacing-sm)}._fileList_s8dew_34 li button{cursor:pointer}
|
|
46
|
-
:root{--nav-height: 65px}.
|
|
46
|
+
:root{--nav-height: 65px}._navbar_1c696_5{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%;background-color:var(--color-background);padding:0 var(--spacing-md);position:relative;z-index:1000;height:var(--nav-height)}._transparent_1c696_19{position:fixed;top:0;left:0;right:0;background-color:transparent}._transparent_1c696_19 ._nav_1c696_5{background:#ffffff80;backdrop-filter:saturate(1.1) blur(1rem);-webkit-backdrop-filter:blur(6px);height:auto;border-radius:var(--radius-full);padding:0 var(--spacing-md)}._transparent_1c696_19 ._nav_1c696_5 ._sublinks_1c696_42{background:#ffffff80;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}._left_1c696_50 ._container_1c696_51{justify-content:flex-start}._left_1c696_50 ._logo_1c696_26{flex:unset}._left_1c696_50 ._nav_1c696_5{flex:1}@media (max-width: 767px){._left_1c696_50 ._logo_1c696_26{flex:1}}._center_1c696_70 ._nav_1c696_5{position:absolute;transition:transform .3s ease-in-out,opacity .3s ease-in-out;will-change:transform,opacity}._center_1c696_70 ._nav_1c696_5._hidden_1c696_76{transform:translateY(-100%);opacity:0;pointer-events:none}._center_1c696_70 ._nav_1c696_5._visible_1c696_82{transform:translateY(0);opacity:1;pointer-events:auto}@media (max-width: 767px){._center_1c696_70 ._logo_1c696_26{flex:1}}._right_1c696_96 ._container_1c696_51{justify-content:flex-end}._right_1c696_96 ._logo_1c696_26{flex:1}._right_1c696_96 ._nav_1c696_5{flex:unset}._sticky_1c696_110{position:sticky;top:0;width:100%}._container_1c696_51{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);width:100%;height:100%;margin:0 auto}._logo_1c696_26{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary);display:flex;align-items:center;justify-content:flex-start}._logo_1c696_26 img{height:auto;width:auto}._menuToggle_1c696_140{background:none;border:none;cursor:pointer;display:none;color:var(--color-text-primary);z-index:1100}._utilityMobile_1c696_149{display:none}._utility_1c696_149 a{font-size:var(--font-size-sm)}._nav_1c696_5{display:flex;gap:var(--spacing-lg);height:100%;transition:transform .3s ease}._linkWrapper_1c696_164{position:relative;display:flex;align-items:center}._linkItem_1c696_170{display:flex;align-items:center;box-sizing:border-box}._sublinkToggle_1c696_178,._link_1c696_164{text-decoration:none;color:var(--color-text-primary);padding:var(--spacing-sm);transition:color .3s ease;font-family:inherit;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);box-sizing:border-box}._link_1c696_164:hover,._sublinkToggle_1c696_178:hover,._navItem_1c696_195:hover{color:var(--color-primary)}._sublinkToggle_1c696_178{background:none;border:none;display:flex;align-items:center;cursor:pointer;color:var(--color-text-primary)}._sublinks_1c696_42{position:absolute;right:0;top:100%;background-color:var(--color-background);box-shadow:0 6px 8px #0000001a;overflow:hidden;max-height:0;min-width:100%;width:max-content;opacity:0;z-index:100;transition:max-height .3s ease,opacity .3s ease,visibility .3s ease;display:flex;visibility:hidden;flex-direction:column;align-items:flex-end;gap:var(--spacing-md);padding:var(--spacing-md);border-radius:0 0 var(--radius-md) var(--radius-md);pointer-events:none}._sublinks_1c696_42._show_1c696_232{max-height:500px;opacity:1;pointer-events:auto;visibility:visible}._chevron_1c696_239{transition:transform .3s ease}._sublinkToggle_1c696_178._open_1c696_243 ._chevron_1c696_239{transform:rotate(180deg)}@media (max-width: 767px){._logo_1c696_26{flex:1}._menuToggle_1c696_140{display:flex;align-items:center;justify-content:center}._utility_1c696_149 a:first-of-type{display:none}._utilityMobile_1c696_149{display:block;transform:translateY(100px);position:fixed;bottom:1rem;margin:0 auto;width:100%;z-index:1001;transition:transform .3s ease-in-out}._utilityMobile_1c696_149._open_1c696_243{transform:translateY(0)}._nav_1c696_5{display:none;position:fixed;top:calc(var(--nav-height) - 1px);left:0;width:100%;height:100%;background-color:var(--color-background);display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-md);padding:var(--spacing-md);border-top:1px solid var(--color-border);z-index:1000;overflow-y:auto;transform:translate(100%)}._nav_1c696_5._open_1c696_243{transform:translate(0)}._linkWrapper_1c696_164{flex-direction:column;width:100%;max-width:300px;margin:0 auto;padding:var(--spacing-sm) 0}._linkWrapper_1c696_164._parent_1c696_312{border-bottom:1px solid var(--color-border)}._linkWrapper_1c696_164._parent_1c696_312:last-of-type{border:none}._linkItem_1c696_170{width:100%}._chevron_1c696_239{display:none}._sublinks_1c696_42{position:relative;top:0;box-shadow:none;max-height:fit-content;opacity:1;visibility:visible;align-items:flex-start;padding:var(--spacing-sm);gap:0;pointer-events:auto}._sublinkToggle_1c696_178{cursor:pointer;pointer-events:none;color:var(--color-muted)}}
|
|
47
47
|
._label_15ngo_1{font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-xs)}._text_15ngo_6{display:inline-flex;align-items:center;gap:var(--spacing-xs)}._sm_15ngo_13{font-size:.75rem}._md_15ngo_17{font-size:.875rem}._lg_15ngo_21{font-size:1rem}._default_15ngo_26{color:var(--color-text-primary)}._muted_15ngo_30{color:var(--color-muted)}._accent_15ngo_34{color:var(--color-primary)}._disabled_15ngo_38{color:var(--color-muted)}._error_15ngo_42{color:var(--color-error)}._required_15ngo_47{color:var(--color-error);margin-left:.25rem}._optional_15ngo_52{color:var(--color-muted);font-style:italic;margin-left:.25rem}._srOnly_15ngo_58{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._icon_15ngo_71{line-height:0;margin-left:var(--spacing-xs)}._tooltipWrapper_15ngo_77{position:relative;display:inline-flex;align-items:center}._tooltipIcon_15ngo_83{line-height:0;font-size:var(--font-size-md);cursor:help;margin-left:var(--spacing-xs);color:var(--color-muted)}._tooltipText_15ngo_91{visibility:hidden;background-color:#111;color:#fff;text-align:center;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-md);position:absolute;z-index:10;bottom:125%;left:50%;transform:translate(-50%);font-size:var(--font-size-xs);white-space:nowrap;opacity:0;transition:opacity .2s ease}._tooltipWrapper_15ngo_77:hover ._tooltipText_15ngo_91,._tooltipWrapper_15ngo_77:focus-within ._tooltipText_15ngo_91{visibility:visible;opacity:1}
|
|
48
48
|
._calendar_zbxci_1{padding:var(--spacing-sm);border-radius:var(--radius-md);min-width:250px}._header_zbxci_7{display:flex;justify-content:space-between;margin-bottom:var(--spacing-sm)}._dayName_zbxci_13{font-weight:var(--font-weight-semibold);color:var(--color-text-primary);width:30px;text-align:center;flex:1;font-size:var(--font-size-sm)}._monthName_zbxci_23{font-weight:var(--font-weight-bold);color:var(--color-text-primary)}._week_zbxci_28{display:flex;justify-content:space-between;color:var(--color-text-primary)}._cell_zbxci_34{flex:1;padding:var(--spacing-xs) 0;text-align:center;background:none;color:var(--color-text-primary);border:none;cursor:pointer;width:30px}._outside_zbxci_45{color:var(--color-muted)}._selected_zbxci_49{background-color:var(--color-primary);color:#fff;border-radius:var(--radius-md)}
|