A design system in a box.
hip-ui.tngl.io/docs/introduction
navbar menu
+1706
-41
+4
README.md
+4
README.md
···
6
6
7
7
- [ ] perfect inset border radii
8
8
- [ ] Number field validation state styling
9
+
- [ ] Switch to [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Logical_properties_and_values/Margins_borders_padding)
10
+
- will need a type aware eslint rule for this
11
+
- [ ] Switch all px to rem
12
+
- [ ] cursor pointer not working in links (and nav links)
9
13
10
14
### Components
11
15
+3
-1
apps/docs/src/components/hover-card/index.tsx
+3
-1
apps/docs/src/components/hover-card/index.tsx
+31
-9
apps/docs/src/components/link/index.tsx
+31
-9
apps/docs/src/components/link/index.tsx
···
10
10
import { StyleXComponentProps } from "../theme/types";
11
11
import { fontFamily, fontWeight } from "../theme/typography.stylex";
12
12
import { LinkContext } from "./link-context";
13
+
import { pointInPolygon } from "tldraw";
13
14
14
15
const styles = stylex.create({
15
16
link: {
16
-
textDecoration: {
17
-
default: "none",
18
-
":is([data-breadcrumb] *)": "none",
19
-
":is([data-hovered])": "underline",
17
+
textDecoration: "none",
18
+
position: "relative",
19
+
display: "inline-flex",
20
+
alignItems: "center",
21
+
gap: spacing["2"],
22
+
"--underline-opacity": {
23
+
default: 0,
24
+
":is([data-breadcrumb] *)": 0,
25
+
":is([data-hovered])": 1,
26
+
":is([aria-expanded=true])": 1,
20
27
},
21
28
color: {
22
29
default: primaryColor.text2,
23
30
":is([data-breadcrumb] *)": uiColor.text1,
24
31
":is([data-breadcrumb][data-current] *)": uiColor.text2,
25
32
},
26
-
cursor: {
27
-
default: "default",
28
-
":is([data-hovered])": "pointer",
29
-
},
33
+
cursor: "pointer",
30
34
fontFamily: fontFamily["sans"],
31
35
fontWeight: fontWeight["normal"],
32
-
textUnderlineOffset: spacing["1"],
36
+
37
+
":is(*) svg": {
38
+
width: "1.2em",
39
+
height: "1.2em",
40
+
},
41
+
42
+
"::after": {
43
+
opacity: "var(--underline-opacity)",
44
+
content: '""',
45
+
display: "block",
46
+
width: "100%",
47
+
height: "2px",
48
+
backgroundColor: "currentColor",
49
+
position: "absolute",
50
+
bottom: `calc(${spacing["1"]} * -1)`,
51
+
left: 0,
52
+
right: 0,
53
+
pointerEvents: "none",
54
+
},
33
55
},
34
56
});
35
57
+1
-1
apps/docs/src/components/switch/index.tsx
+1
-1
apps/docs/src/components/switch/index.tsx
+8
apps/docs/src/components/theme/media-queries.stylex.tsx
+8
apps/docs/src/components/theme/media-queries.stylex.tsx
···
8
8
"2xl": "@media (min-width: 96rem)",
9
9
});
10
10
11
+
export const containerBreakpoints = stylex.defineConsts({
12
+
sm: "@container (min-width: 40rem)",
13
+
md: "@container (min-width: 48rem)",
14
+
lg: "@container (min-width: 64rem)",
15
+
xl: "@container (min-width: 80rem)",
16
+
"2xl": "@container (min-width: 96rem)",
17
+
});
18
+
11
19
export const maxBreakpoints = stylex.defineConsts({
12
20
sm: "@media (max-width: 40rem)",
13
21
});
+7
-1
apps/docs/src/lib/Example.tsx
+7
-1
apps/docs/src/lib/Example.tsx
···
22
22
overflow: "hidden",
23
23
},
24
24
preview: {
25
+
containerType: "inline-size",
25
26
alignItems: "center",
26
27
backgroundColor: uiColor.bgSubtle,
27
28
display: "flex",
···
29
30
justifyContent: "center",
30
31
minHeight: spacing["40"],
31
32
padding: spacing["4"],
33
+
},
34
+
noPadding: {
35
+
padding: 0,
32
36
},
33
37
codeWrapper: {
34
38
borderTopColor: uiColor.border2,
···
59
63
60
64
export function Example({
61
65
src: Component,
66
+
noPadding = false,
62
67
}: {
63
68
src: (() => React.JSX.Element) & { slug: string };
69
+
noPadding?: boolean;
64
70
}) {
65
71
const code = examples[Component.slug];
66
72
const ref = useRef<HTMLDivElement>(null);
···
74
80
return (
75
81
<Card style={styles.card}>
76
82
<Flex direction="column">
77
-
<div {...stylex.props(styles.preview)}>
83
+
<div {...stylex.props(styles.preview, noPadding && styles.noPadding)}>
78
84
<Component />
79
85
</div>
80
86
+82
-19
apps/docs/stylex.css
+82
-19
apps/docs/stylex.css
···
70
70
@property --x---xepqutl { syntax: "*"; inherits: false;}
71
71
@property --x---x1umfgwa { syntax: "*"; inherits: false;}
72
72
@property --x---x1l5nls6 { syntax: "*"; inherits: false;}
73
-
@property --x-boxShadow { syntax: "*"; inherits: false;}
74
73
@property --x-animationDuration { syntax: "*"; inherits: false;}
75
74
@property --x-animationName { syntax: "*"; inherits: false;}
76
75
@property --x-animationTimingFunction { syntax: "*"; inherits: false;}
77
-
@property --x-aspectRatio { syntax: "*"; inherits: false;}
76
+
@property --x-boxShadow { syntax: "*"; inherits: false;}
78
77
@property --x-gridTemplateRows { syntax: "*"; inherits: false;}
79
78
@property --x-gridTemplateColumns { syntax: "*"; inherits: false;}
80
79
@property --x-gridColumnStart { syntax: "*"; inherits: false;}
81
80
@property --x-gridColumnEnd { syntax: "*"; inherits: false;}
82
81
@property --x-gridRowStart { syntax: "*"; inherits: false;}
83
82
@property --x-gridRowEnd { syntax: "*"; inherits: false;}
83
+
@property --x-aspectRatio { syntax: "*"; inherits: false;}
84
84
@property --x-width { syntax: "*"; inherits: false;}
85
85
@property --x-paddingLeft { syntax: "*"; inherits: false;}
86
86
@property --x---items-per-row { syntax: "*"; inherits: false;}
87
87
@property --x-backgroundColor { syntax: "*"; inherits: false;}
88
-
@property --x-height { syntax: "*"; inherits: false;}
89
88
@property --x-transform { syntax: "*"; inherits: false;}
89
+
@property --x-height { syntax: "*"; inherits: false;}
90
90
@property --xk6k0je { syntax: "<number>"; inherits: true; initial-value: 100 }
91
91
@property --x12edb6v { syntax: "<number>"; inherits: true; initial-value: 200 }
92
92
@property --x1xrohu8 { syntax: "<number>"; inherits: true; initial-value: 300 }
···
106
106
@keyframes xepz06c-B{from{transform:translateX(0);}to{transform:translateX(-100%);}}
107
107
@keyframes x44muo0-B{from{transform:translateX(100%);}to{transform:translateX(0);}}
108
108
@keyframes xfa266b-B{from{transform:translateX(-100%);}to{transform:translateX(0);}}
109
+
@keyframes x72inym-B{from{transform:translateX(-1.86%);}to{transform:translateX(0%);}}
109
110
@keyframes x1yf9xd4-B{0%{transform:translateX(-65%);}100%{transform:translateX(0%);}}
110
-
@keyframes x72inym-B{from{transform:translateX(-1.86%);}to{transform:translateX(0%);}}
111
111
@keyframes x1wtgnkq-B{from{transform:translateX(0);}to{transform:translateX(100%);}}
112
112
@keyframes xm9i9jz-B{from{transform:translateY(0);}to{transform:translateY(-100%);}}
113
113
@keyframes x1q62cp-B{from{transform:translateY(-100%);}to{transform:translateY(0);}}
···
278
278
@media (color-gamut: p3){:root, .xt4ftbq{--xzqhnd5:light-dark(color(display-p3 0.02 0.02 1 / 0.008), color(display-p3 0.224 0.224 0.992 / 0.051));--xdpcuhr:light-dark(color(display-p3 0.024 0.024 0.863 / 0.028), color(display-p3 0.361 0.314 1 / 0.08));--x1izhb3v:light-dark(color(display-p3 0.004 0.071 0.871 / 0.059), color(display-p3 0.357 0.373 1 / 0.219));--x1ylq8c4:light-dark(color(display-p3 0.012 0.051 1 / 0.099), color(display-p3 0.325 0.361 1 / 0.337));--x1pe3uym:light-dark(color(display-p3 0.008 0.035 1 / 0.142), color(display-p3 0.38 0.4 1 / 0.4));--x1ftoqyj:light-dark(color(display-p3 0 0.02 0.941 / 0.2), color(display-p3 0.447 0.447 1 / 0.454));--x1ouxvmb:light-dark(color(display-p3 0.004 0.02 0.847 / 0.279), color(display-p3 0.486 0.486 1 / 0.534));--x1qqlla7:light-dark(color(display-p3 0.004 0.024 0.788 / 0.389), color(display-p3 0.502 0.494 1 / 0.652));--x1kvxz8v:light-dark(color(display-p3 0 0 0.706 / 0.644), color(display-p3 0.431 0.431 1 / 0.799));--xbbvnta:light-dark(color(display-p3 0 0 0.667 / 0.683), color(display-p3 0.502 0.486 1 / 0.832));--x90tdw5:light-dark(color(display-p3 0.337 0.326 0.748), color(display-p3 0.685 0.662 1));--xwm5tj4:light-dark(color(display-p3 0.154 0.161 0.371), color(display-p3 0.878 0.875 0.986));}}
279
279
.x1bgwy09{--items-per-row:var(--x---items-per-row)}
280
280
.xxs775t{--progress-border-width:var(--x1plbop)}
281
+
.xaxs5qv{--separator-visibility:none}
281
282
.x11hzmvd{--toggle-button-group-gap:var(--xsow7ju)}
283
+
.x131ushd{--underline-opacity:0}
282
284
.x14xnieg{--x11as8pt:var(--x---x11as8pt)}
283
285
.x9ivofj{--x11as8pt:var(--x1a33rbf)}
284
286
.xgmdgmb{--x11as8pt:var(--x1gfz7lw)}
···
465
467
.x1km4ser:is([data-size=md] *){--progress-size:var(--x1do95gr)}
466
468
.x10z2afa:is([data-size=sm] *){--progress-size:var(--xgvn2um)}
467
469
.xvruivg:is([data-size=lg] *){--progress-size:var(--xyoqvup)}
470
+
.xho0a14:is([data-navbar-open]){--separator-visibility:flex}
471
+
.xfg5xm8:is([data-breadcrumb] *){--underline-opacity:0}
472
+
.xdd3hwi:is([data-hovered]){--underline-opacity:1}
473
+
.xtj37it:is([aria-expanded=true]){--underline-opacity:1}
474
+
.xief1pu:is([data-active]){--underline-opacity:1}
475
+
.xtbn0nk:is([data-navbar-open]){--visibility:flex}
476
+
.x1xi42hd:has([data-always-visible]){--separator-visibility:none}
468
477
.x19dv8yz:not(#\#){grid-area:action}
469
478
.x1cfmmib:not(#\#){grid-area:actions}
470
479
.x1iynvfu:not(#\#){grid-area:bar}
471
480
.x1vu5sea:not(#\#){grid-area:close}
472
481
.x1fdo2jl:not(#\#){grid-area:content}
473
482
.x19tbii3:not(#\#){grid-area:description}
483
+
.x104w9x8:not(#\#){grid-area:hamburger}
474
484
.x1cnu6j2:not(#\#){grid-area:icon}
475
485
.x5jscpo:not(#\#){grid-area:image}
476
486
.xxwd7sb:not(#\#){grid-area:label}
487
+
.x1nkj2r4:not(#\#){grid-area:navigation}
488
+
.x6jukn4:not(#\#){grid-area:separator}
477
489
.xnyuz70:not(#\#){grid-area:title}
478
490
.xo3lhmp:not(#\#){grid-area:track}
479
491
.xilv4yv:not(#\#){grid-area:value-label}
480
492
.x1a6ub5m:not(#\#){grid-template:'title action'}
481
493
.x10a8y8t:not(#\#){inset:0}
482
494
.x1ghz6dp:not(#\#){margin:0}
495
+
.x1qbrjn4:not(#\#){margin:var(--xgvn2um)}
483
496
.x7gbtqy:not(#\#){padding:.5rem}
484
497
.x1717udv:not(#\#){padding:0}
485
498
.x1tamke2:not(#\#){padding:16px}
···
538
551
.xdh2fpr:not(#\#):not(#\#){border-width:2px}
539
552
.x1dixmfi:not(#\#):not(#\#){border-width:var(--progress-border-width)}
540
553
.x12lumcd:not(#\#):not(#\#){flex:1 1 auto}
554
+
.x98rzlu:not(#\#):not(#\#){flex:1}
541
555
.xou54vl:not(#\#):not(#\#){gap:16px}
542
556
.x1h4iudz:not(#\#):not(#\#){gap:2rem}
543
557
.x1rzw5jd:not(#\#):not(#\#){gap:32px}
···
584
598
.x1syeyrc:not(#\#):not(#\#){grid-template-areas:'label value-label' 'bar bar'}
585
599
.xynonu2:not(#\#):not(#\#){grid-template-areas:'label value-label' 'track track'}
586
600
.x1vftqdq:not(#\#):not(#\#){grid-template-areas:'track'}
601
+
.xmihhyi:not(#\#):not(#\#){grid-template-areas:"logo hamburger"}
602
+
.xsld16p:not(#\#):not(#\#){grid-template-areas:"title"}
587
603
.xe8uvvx:not(#\#):not(#\#){list-style:none}
588
604
.x1a2a7pz:not(#\#):not(#\#){outline:none}
589
605
.xysyzu8:not(#\#):not(#\#){overflow:auto}
···
629
645
.x1qovttw:is([data-orientation=vertical]):not(#\#):not(#\#){gap:var(--xsow7ju)}
630
646
.x1d8lqcm:is([data-empty-state-size=sm]):not(#\#):not(#\#){grid-template-areas:"image title" "image description"}
631
647
.x4jzqnn:is([data-empty-state-size=md],[data-empty-state-size=lg]):not(#\#):not(#\#){grid-template-areas:"image" "title" "description"}
648
+
.x1wjnezx:is([data-navbar-open]):not(#\#):not(#\#){grid-template-areas:"logo hamburger" "navigation navigation" "separator separator" "action action"}
632
649
.x1gph5tg:is([data-focus-visible] *):not(#\#):not(#\#){outline:2px solid var(--x1qgqpcr)}
650
+
.x1lrcctv:is([data-navbar-open]):not(#\#):not(#\#){overflow:auto}
633
651
.x1meiurb:is([data-unavailable]):not(#\#):not(#\#){text-decoration:line-through}
634
-
.x17pbne7:is([data-breadcrumb] *):not(#\#):not(#\#){text-decoration:none}
635
-
.x1fyv82c:is([data-hovered]):not(#\#):not(#\#){text-decoration:underline}
636
652
.xmenjp1:has([data-hovered]):not(#\#):not(#\#){border-color:var(--x1587jaz)}
637
653
.x1qclr3p:has([data-hovered]):not(:has([data-invalid])):not(#\#):not(#\#){border-color:var(--x1be1b4q)}
638
654
.x1gw45h4:has([data-hovered]):not(#\#):not(#\#){border-color:var(--x1cxb3of)}
639
655
.xw9agv0:has([data-hovered]):not(#\#):not(#\#){border-color:var(--x1wagwp)}
640
656
.xx842gn:has(label,[data-slider-output]):not(#\#):not(#\#){grid-template-areas:'label value-label' 'track track'}
657
+
.xbi5u6n:has([data-icon]):has([data-description]):not(#\#):not(#\#){grid-template-areas:"icon title" "icon description"}
658
+
.x1rhpplf:has([data-icon]):not(#\#):not(#\#){grid-template-areas:"icon title"}
659
+
.xb4asxk:has([data-always-visible]):is([data-navbar-open]):not(#\#):not(#\#){grid-template-areas:"logo action hamburger" "navigation navigation navigation" "separator separator separator"}
660
+
.x1tw5vsl:has([data-always-visible]):not(#\#):not(#\#){grid-template-areas:"logo action hamburger"}
661
+
.x1fgdivc:has([data-description]):not(#\#):not(#\#){grid-template-areas:"title" "description"}
641
662
@supports (corner-shape: squircle){.x151gzyt.x151gzyt:is(*) pre:not(#\#):not(#\#){border-radius:var(--x1bwjc12)}}
642
663
.x1ljrgqn:has([data-empty-state-actions]):is([data-empty-state-size=sm]):not(#\#):not(#\#){grid-template-areas:"image title actions" "image description actions"}
643
664
.x9cfk05:has([data-empty-state-actions]):is([data-empty-state-size=md],[data-empty-state-size=lg]):not(#\#):not(#\#){grid-template-areas:"image" "title" "description" "actions"}
···
664
685
.x6s0dn4:not(#\#):not(#\#):not(#\#){align-items:center}
665
686
.xuk3077:not(#\#):not(#\#):not(#\#){align-items:flex-end}
666
687
.x1cy8zhl:not(#\#):not(#\#):not(#\#){align-items:flex-start}
688
+
.x7a106z:not(#\#):not(#\#):not(#\#){align-items:start}
667
689
.x1qjc9v5:not(#\#):not(#\#):not(#\#){align-items:stretch}
668
690
.xamitd3:not(#\#):not(#\#):not(#\#){align-self:center}
669
691
.x1bn1l1i:not(#\#):not(#\#):not(#\#){animation-delay:150ms}
···
743
765
.x1blb64l:not(#\#):not(#\#):not(#\#){box-shadow:0 0 0 2px var(--x17z0c80)}
744
766
.xxwaevm:not(#\#):not(#\#):not(#\#){box-shadow:0 0 0 2px var(--x1e4ihis)}
745
767
.x85lyh1:not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 10px 1px rgba(0,0,0,.1)}
746
-
.xpajrph:not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 6px 1px rgba(0,0,0,.2)}
768
+
.x1bbv553:not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 6px 1px rgba(0,0,0,.13)}
747
769
.x1gnnqk1:not(#\#):not(#\#):not(#\#){box-shadow:none}
748
770
.x1iotiob:not(#\#):not(#\#):not(#\#){box-shadow:var(--x-boxShadow)}
749
771
.xabsx6j:not(#\#):not(#\#):not(#\#){box-shadow:var(--x1e2w8h4)}
···
775
797
.xa65dde:not(#\#):not(#\#):not(#\#){color:var(--xs64gu4)}
776
798
.x7jk84n:not(#\#):not(#\#):not(#\#){color:var(--xw4mcn1)}
777
799
.x1awj2ng:not(#\#):not(#\#):not(#\#){color:white}
800
+
.xm1lqgc:not(#\#):not(#\#):not(#\#){column-gap:var(--x1a1riub)}
778
801
.x1ftyu8y:not(#\#):not(#\#):not(#\#){column-gap:var(--x1llymyc)}
802
+
.xfdo04v:not(#\#):not(#\#):not(#\#){column-gap:var(--xgvn2um)}
779
803
.x12h1iku:not(#\#):not(#\#):not(#\#){container-type:inline-size}
780
804
.x14obwa1:not(#\#):not(#\#):not(#\#){content:''}
781
805
.xa22041:not(#\#):not(#\#):not(#\#){corner-shape:squircle}
···
791
815
.x1rg5ohu:not(#\#):not(#\#):not(#\#){display:inline-block}
792
816
.x3nfvp2:not(#\#):not(#\#):not(#\#){display:inline-flex}
793
817
.x1s85apg:not(#\#):not(#\#):not(#\#){display:none}
818
+
.x1qd2z1c:not(#\#):not(#\#):not(#\#){display:var(--separator-visibility,none)}
819
+
.x95q01j:not(#\#):not(#\#):not(#\#){display:var(--visibility,none)}
794
820
.xi02ipl:not(#\#):not(#\#):not(#\#){fill:var(--xohqlzf)}
795
821
.x19h5br:not(#\#):not(#\#):not(#\#){fill:var(--xs64gu4)}
796
822
.x1j5kc2m:not(#\#):not(#\#):not(#\#){filter:drop-shadow(-0.5px -0.5px 0 var(--xxsd9i2)) drop-shadow(.5px -0.5px 0 var(--xxsd9i2)) drop-shadow(.5px .5px 0 var(--xxsd9i2)) drop-shadow(-0.5px .5px 0 var(--xxsd9i2)) drop-shadow(0px 1px 3px rgb(0 0 0 / .1)) drop-shadow(0 -1px 3px rgb(0 0 0 / .1))}
···
845
871
.x15kxzb9:not(#\#):not(#\#):not(#\#){grid-column-start:var(--x-gridColumnStart)}
846
872
.x1f5yvw1:not(#\#):not(#\#):not(#\#){grid-row-end:var(--x-gridRowEnd)}
847
873
.x1cjrry:not(#\#):not(#\#):not(#\#){grid-row-start:var(--x-gridRowStart)}
874
+
.x52fmzj:not(#\#):not(#\#):not(#\#){grid-template-columns:1fr auto}
848
875
.x1uvv8nx:not(#\#):not(#\#):not(#\#){grid-template-columns:auto 1fr auto auto}
849
876
.x1g3yg12:not(#\#):not(#\#):not(#\#){grid-template-columns:auto 1fr auto}
850
877
.x1pmbctz:not(#\#):not(#\#):not(#\#){grid-template-columns:auto 1fr}
···
900
927
.x8za3yd:not(#\#):not(#\#):not(#\#){resize:both}
901
928
.xtt52l0:not(#\#):not(#\#):not(#\#){resize:none}
902
929
.x1gcftaf:not(#\#):not(#\#):not(#\#){rotate:0deg}
930
+
.xdj11nj:not(#\#):not(#\#):not(#\#){row-gap:var(--x1do95gr)}
931
+
.xbpqg2f:not(#\#):not(#\#):not(#\#){row-gap:var(--x1llymyc)}
903
932
.x1d5tskk:not(#\#):not(#\#):not(#\#){row-gap:var(--xmuc480)}
904
933
.xmgqhpt:not(#\#):not(#\#):not(#\#){shadow:var(--xf59ov0)}
905
934
.x2b8uid:not(#\#):not(#\#):not(#\#){text-align:center}
···
909
938
.xujl8zx:not(#\#):not(#\#):not(#\#){text-decoration-line:underline}
910
939
.xlyipyv:not(#\#):not(#\#):not(#\#){text-overflow:ellipsis}
911
940
.x5ftkge:not(#\#):not(#\#):not(#\#){text-transform:inherit}
912
-
.xkw25aw:not(#\#):not(#\#):not(#\#){text-underline-offset:var(--x1plbop)}
913
941
.x5ve5x3:not(#\#):not(#\#):not(#\#){touch-action:none}
914
942
.xcz5yhc:not(#\#):not(#\#):not(#\#){transform-origin:100%}
915
943
.xee5nap:not(#\#):not(#\#):not(#\#){transform-origin:right}
···
970
998
.x1vjfegm:not(#\#):not(#\#):not(#\#){z-index:1}
971
999
.x11uqc5h:not(#\#):not(#\#):not(#\#){z-index:100}
972
1000
.x1q2oy4v:not(#\#):not(#\#):not(#\#){z-index:9999}
1001
+
@container (min-width: 40rem){.x1x9uo7l.x1x9uo7l:not(#\#):not(#\#):not(#\#){--separator-visibility:none}}
1002
+
@container (min-width: 40rem){.x1y37myp.x1y37myp:not(#\#):not(#\#):not(#\#){--visibility:none}}
1003
+
.x19ee2to.x19ee2to:where(.x-default-marker:hover *):not(#\#):not(#\#):not(#\#){background-color:var(--x1ojhc7k)}
973
1004
.xoun3hd:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#){align-items:center}
974
1005
.x1wjcwka:is([data-orientation=horizontal]):not(#\#):not(#\#):not(#\#){align-items:flex-start}
975
1006
.xtpdso8:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#){align-items:stretch}
···
1042
1073
.xgdln6g:is([data-hovered=true]):not(#\#):not(#\#):not(#\#){background-color:var(--xx7wvuk)}
1043
1074
.x1kag6iq:is([data-react-aria-pressable=true]:hover:not([data-disabled]) *):not(#\#):not(#\#):not(#\#){background-color:var(--xx7wvuk)}
1044
1075
.x1n5h65z:is([data-hovered]):not(#\#):not(#\#):not(#\#){background-color:var(--xx7wvuk)}
1076
+
.x3o6k81:is([data-hovered=true]):not([data-pressed=true]):not(#\#):not(#\#):not(#\#){background-color:var(--xx7wvuk)}
1045
1077
.xvqskg:is([data-variant=secondary] *):not(#\#):not(#\#):not(#\#){background-color:var(--xx7wvuk)}
1046
1078
.xb2a7i8:is([data-pressed]):not(#\#):not(#\#):not(#\#){background-color:var(--xx7wvuk)}
1047
1079
.x1i8lhow:is([data-hovered]):not([data-unavailable]):not(#\#):not(#\#):not(#\#)::before{background-color:var(--xx7wvuk)}
···
1064
1096
.x13m65lo:is([data-variant=critical] *):not(#\#):not(#\#):not(#\#){color:var(--x1umfgwa)}
1065
1097
.x178ek7g:is([data-selected]):not(#\#):not(#\#):not(#\#){color:var(--x1xyma3f)}
1066
1098
.x1pis5b5:is([data-selection-start],[data-selection-end]):not(#\#):not(#\#):not(#\#){color:var(--x1xyma3f)}
1099
+
.x1lydh9o:is(:not(#\#):not(#\#):not(#\#)::placeholder,[data-placeholder]){color:var(--x45q57k)}
1100
+
.x1t5mdh1:is([data-current]):not(#\#):not(#\#):not(#\#){color:var(--x45q57k)}
1067
1101
.xx3mchb:is([data-breadcrumb] *):not(#\#):not(#\#):not(#\#){color:var(--x45q57k)}
1068
-
.x1lydh9o:is(:not(#\#):not(#\#):not(#\#)::placeholder,[data-placeholder]){color:var(--x45q57k)}
1069
1102
.xuk2py2:is([data-placeholder]):not(#\#):not(#\#):not(#\#){color:var(--x45q57k)}
1070
-
.x1t5mdh1:is([data-current]):not(#\#):not(#\#):not(#\#){color:var(--x45q57k)}
1071
-
.xnprwmv:is([data-breadcrumb][data-current] *):not(#\#):not(#\#):not(#\#){color:var(--xelq0bc)}
1103
+
.xlu6prn:is([data-hovered]):not(#\#):not(#\#):not(#\#){color:var(--xelq0bc)}
1072
1104
.xkzp63n:is([data-selected]):not(#\#):not(#\#):not(#\#){color:var(--xelq0bc)}
1073
-
.xlu6prn:is([data-hovered]):not(#\#):not(#\#):not(#\#){color:var(--xelq0bc)}
1074
1105
.x1xwj67i:is([data-hovered],[data-focused],[data-selected]):not(#\#):not(#\#):not(#\#){color:var(--xelq0bc)}
1106
+
.xnprwmv:is([data-breadcrumb][data-current] *):not(#\#):not(#\#):not(#\#){color:var(--xelq0bc)}
1075
1107
.x8b72bf:is([data-hovered]):not([data-unavailable]):not(#\#):not(#\#):not(#\#){color:var(--xelq0bc)}
1076
1108
.xf5mls2:is([data-variant=warning] *):not(#\#):not(#\#):not(#\#){color:var(--xw4mcn1)}
1077
1109
.x15057wy:is([data-empty-state-size=sm]):not(#\#):not(#\#):not(#\#){column-gap:var(--xgvn2um)}
1078
1110
.x12tbmpm:is(*) pre:not(#\#):not(#\#):not(#\#){corner-shape:squircle}
1079
1111
.x1w11t6e:is([data-resizable-direction=left]):not(#\#):not(#\#):not(#\#){cursor:e-resize}
1080
1112
.x1oooc6o:is([data-resizable-direction=both]):not(#\#):not(#\#):not(#\#){cursor:ew-resize}
1081
-
.x77jxow:is([data-hovered]):not(#\#):not(#\#):not(#\#){cursor:pointer}
1082
1113
.x11wow30:is([data-panel-group-direction=vertical]):not(#\#):not(#\#):not(#\#){cursor:row-resize}
1083
1114
.xewnasn:is([data-resizable-direction=right]):not(#\#):not(#\#):not(#\#){cursor:w-resize}
1084
1115
.x16mfbck:is([data-splitter-type='handle']:hover > *):not(#\#):not(#\#):not(#\#){display:block}
1085
1116
.x1h6jewf:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#){display:flex}
1117
+
.xzgc6c2:is([data-always-visible]):not(#\#):not(#\#):not(#\#){display:flex}
1086
1118
.x126me4j:is([data-breadcrumb]:last-child *):not(#\#):not(#\#):not(#\#){display:none}
1087
1119
.xece8kz:is([data-disabled]):not(#\#):not(#\#):not(#\#){filter:grayscale(1)}
1088
1120
.x18ko33d:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#){flex-direction:column}
···
1091
1123
.xmzpm4q:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#){flex-grow:1}
1092
1124
.x1vnanun:is(*) svg:not(#\#):not(#\#):not(#\#){flex-shrink:0}
1093
1125
.xn4f9nh:is([data-card-size='sm'] *):not(#\#):not(#\#):not(#\#){font-size:var(--x1hevvyd)}
1126
+
.xs02ue2:is([data-size=lg] *):not(#\#):not(#\#):not(#\#){font-size:var(--x1hevvyd)}
1094
1127
.x121stge:is([data-empty-state-size='sm'] *):not(#\#):not(#\#):not(#\#){font-size:var(--x1hevvyd)}
1095
-
.xs02ue2:is([data-size=lg] *):not(#\#):not(#\#):not(#\#){font-size:var(--x1hevvyd)}
1096
1128
.xcuzl93:is([data-size=sm]):not(#\#):not(#\#):not(#\#){font-size:var(--x1vaen13)}
1097
1129
.x1kk4rht:is([data-size=sm] *):not(#\#):not(#\#):not(#\#){font-size:var(--x1vaen13)}
1098
1130
.xw6vg6:is([data-card-size='md'] *):not(#\#):not(#\#):not(#\#){font-size:var(--x1vzl7l6)}
···
1108
1140
.x10ef3jg:is([data-react-aria-pressable=true][data-selected=true]):not(#\#):not(#\#):not(#\#){font-weight:var(--x1tobmye)}
1109
1141
.x1e1yh2g:is([data-current]):not(#\#):not(#\#):not(#\#){font-weight:var(--x1tobmye)}
1110
1142
.xl84o51:is([data-empty-state-size=sm]):not(#\#):not(#\#):not(#\#){grid-template-columns:min-content 1fr}
1143
+
.x1bas5n1:is([data-navbar-open]):not(#\#):not(#\#):not(#\#){grid-template-rows:min-content min-content min-content min-content}
1111
1144
.x14u8no6:is([data-empty-state-size=md],[data-empty-state-size=lg]):not(#\#):not(#\#):not(#\#){justify-items:center}
1112
1145
.x1h912m2:is([data-empty-state-size=sm]):not(#\#):not(#\#):not(#\#){justify-items:start}
1113
1146
.xqreftt:is(li *):not(#\#):not(#\#):not(#\#){line-height:var(--x17a3wz2)}
···
1163
1196
.xkjcc5q:has(p):not(#\#):not(#\#):not(#\#){align-items:flex-start}
1164
1197
.x157hqu3:has(td:hover):not(#\#):not(#\#):not(#\#){background-color:var(--x123awk4)}
1165
1198
.x1vbf4y3:has([data-invalid]):not(#\#):not(#\#):not(#\#){box-shadow:0 0 0 2px var(--x16ucms1)}
1199
+
.xao7f3t:has([data-always-visible]):not(#\#):not(#\#):not(#\#){grid-template-columns:1fr min-content min-content}
1200
+
.xw3fu6y:has([data-icon]):not(#\#):not(#\#):not(#\#){grid-template-columns:min-content 1fr}
1201
+
.xd9638a:has([data-icon]):has([data-description]):not(#\#):not(#\#):not(#\#){grid-template-columns:min-content 1fr}
1166
1202
.x1yg37rf:is([data-variant=warning] *):is(*) svg:not(#\#):not(#\#):not(#\#){color:var(--x14k0c5u)}
1167
1203
.x1e1l22d:is([data-variant=critical] *):is(*) svg:not(#\#):not(#\#):not(#\#){color:var(--x1uwop3o)}
1168
1204
.xpw51zl:is([data-variant=success] *):is(*) svg:not(#\#):not(#\#):not(#\#){color:var(--x6wzzll)}
···
1384
1420
.xvue9z:not(#\#):not(#\#):not(#\#):not(#\#){width:500px}
1385
1421
.xvni27:not(#\#):not(#\#):not(#\#):not(#\#){width:52px}
1386
1422
.xycev2y:not(#\#):not(#\#):not(#\#):not(#\#){width:60%}
1423
+
.xktia5q:not(#\#):not(#\#):not(#\#):not(#\#){width:80%}
1424
+
.xm6i5cn:not(#\#):not(#\#):not(#\#):not(#\#){width:90%}
1387
1425
.x1krfru3:not(#\#):not(#\#):not(#\#):not(#\#){width:calc((var(--tree-item-level,0) - 1) * var(--x1a1riub))}
1388
1426
.x2aorcm:not(#\#):not(#\#):not(#\#):not(#\#){width:calc(100% + var(--xsow7ju) * 2)}
1389
1427
.xeq5yr9:not(#\#):not(#\#):not(#\#):not(#\#){width:fit-content}
···
1461
1499
.xe4pvmi:is(:not(:first-child)) *:not(#\#):not(#\#):not(#\#):not(#\#){border-top-width:0}
1462
1500
.xk32l79:is([data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){border-top-width:1px}
1463
1501
.xkg4vtl:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{bottom:0}
1464
-
.x1fk7w57:is([data-handle-orientation='horizontal'] *):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1465
1502
.x1tkpfsv:is([data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1466
1503
.x1ey2r4m:is([data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1467
1504
.xslbvph:is([data-direction=right]):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1468
1505
.x1s1o4wi:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1469
1506
.x1w0y3cq:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1507
+
.x1fk7w57:is([data-handle-orientation='horizontal'] *):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1508
+
.xeaeg1s:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){height:1.2em}
1470
1509
.xmu6b7u:is(*) pre:not(#\#):not(#\#):not(#\#):not(#\#){height:100%}
1471
1510
.xfajk90:is([aria-orientation=vertical]):not(#\#):not(#\#):not(#\#):not(#\#){height:100%}
1472
1511
.x15y5qw9:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){height:100%}
1473
1512
.x1e29dhg:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{height:100%}
1513
+
.xugiiin:is([data-navbar-open]):not(#\#):not(#\#):not(#\#):not(#\#){height:100%}
1474
1514
.x1ujwaxl:is([data-handle-orientation='horizontal'] *):not(#\#):not(#\#):not(#\#):not(#\#){height:100%}
1475
1515
.xa6wk7n:is([data-direction=right], [data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){height:100vh}
1476
1516
.xa90ixn:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){height:1px}
···
1479
1519
.x1i0w0n8:is([data-direction=top], [data-direction=bottom]):is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){height:800px}
1480
1520
.x4isadb:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){height:calc(attr(data-progress number) * 1%)}
1481
1521
.xqr7z5w:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){height:calc(attr(data-progress-end number) * 1% - attr(data-progress-start number) * 1%)}
1522
+
.x10pomc3:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x109877l)}
1482
1523
.x1s93bjk:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x109877l)}
1524
+
.xtv84u5:is([data-focus-visible]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x109877l)}
1483
1525
.x1f7uwq8:is([data-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x109877l)}
1484
-
.xtv84u5:is([data-focus-visible]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x109877l)}
1485
1526
.x2l7m0n:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x11x3va4)}
1486
1527
.xyzkuza:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x1a1riub)}
1487
1528
.x1ra6d0n:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x1a1riub)}
···
1505
1546
.x1rbpv5p:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--xyoqvup)}
1506
1547
.xxy4zcn:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--xyoqvup)}
1507
1548
.x12bf3xg:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{left:0}
1508
-
.xu15ax8:is([data-handle-orientation='vertical'] *):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
1509
1549
.x15qd2tb:is([data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
1510
1550
.x1958hiq:is([data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
1511
1551
.xz1wair:is([data-direction=top]):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
1512
1552
.x1vbnr6c:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
1553
+
.xu15ax8:is([data-handle-orientation='vertical'] *):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
1513
1554
.x13m0n2z:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{left:50%}
1514
1555
.x1ff65kx:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){left:50%}
1515
1556
.xhiwlwb:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){left:calc(attr(data-progress-start number) * 1%)}
···
1581
1622
.x198r67w:is([data-table-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--xsow7ju)}
1582
1623
.x1en8ign:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--xsow7ju)}
1583
1624
.x8z6mx6:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{right:0}
1584
-
.xdsir5g:is([data-handle-orientation='vertical'] *):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1585
1625
.x1hu1b0q:is([data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1586
1626
.x1edtlyo:is([data-direction=right]):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1587
1627
.xp6x2dd:is([data-direction=top]):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1588
1628
.x1pbrn0l:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1589
1629
.xxlim67:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1630
+
.xdsir5g:is([data-handle-orientation='vertical'] *):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1590
1631
.x1v5ec6b:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:0}
1591
-
.xbwnylk:is([data-handle-orientation='horizontal'] *):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
1592
1632
.xi4gtk3:is([data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
1593
1633
.x1m4vouk:is([data-direction=right]):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
1594
1634
.xck6qwh:is([data-direction=top]):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
1595
1635
.xdod2xa:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
1636
+
.xbwnylk:is([data-handle-orientation='horizontal'] *):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
1596
1637
.xzpubj3:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:50%}
1597
1638
.xdpxmfp:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){top:50%}
1598
1639
.x7u6t2g:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){top:auto}
1599
1640
.xl8t2ac:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){top:calc(100% - attr(data-progress-end number) * 1%)}
1641
+
.x1k0f6z9:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){width:1.2em}
1600
1642
.xucb16f:is(*) pre:not(#\#):not(#\#):not(#\#):not(#\#){width:100%}
1601
1643
.x1j0uice:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){width:100%}
1602
1644
.xhqp866:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{width:100%}
···
1610
1652
.x16ouo39:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){width:auto}
1611
1653
.x19s274e:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){width:calc(attr(data-progress number) * 1%)}
1612
1654
.xbu4jqu:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){width:calc(attr(data-progress-end number) * 1% - attr(data-progress-start number) * 1%)}
1655
+
.x1mcq3fe:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--x109877l)}
1613
1656
.xi8t3kn:is([data-focus-visible]):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--x109877l)}
1614
1657
.x5clsaj:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--x109877l)}
1615
1658
.x19m7d8w:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--x1a1riub)}
···
1655
1698
.x15xh87z:last-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--x1llymyc)}
1656
1699
.xjaxm57:last-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--xmuc480)}
1657
1700
.xq6kpti:last-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--xsow7ju)}
1701
+
@supports (corner-shape: squircle){.x9vvih8.x9vvih8:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-radius:var(--x1011bts)}}
1658
1702
@supports (corner-shape: squircle){.x1cocqi3.x1cocqi3:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-radius:var(--x1bwjc12)}}
1659
1703
@supports (corner-shape: squircle){.xk0gmys.xk0gmys:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-radius:var(--x1okofp6)}}
1660
1704
@supports (corner-shape: squircle){.x2t5f1x.x2t5f1x:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-radius:var(--xmpdjt5)}}
1661
1705
@supports (corner-shape: squircle){.x19qj361.x19qj361:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-radius:var(--xzsum9y)}}
1706
+
@container (min-width: 40rem){.x1cw6v5t.x1cw6v5t:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){gap:var(--x1do95gr)}}
1662
1707
@media (max-width: 40rem){.x1w75pxz.x1w75pxz:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){grid-template-areas:'icon content close' 'action action action'}}
1663
1708
@media (max-width: 40rem){.xgom5xc.xgom5xc:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){grid-template-areas:'icon content close'}}
1664
1709
@media (max-width: 40rem){.x1nmr3wo.x1nmr3wo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){grid-template-areas:'icon content' 'action action action'}}
1665
1710
@media (max-width: 40rem){.xv5ttpy.xv5ttpy:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){grid-template-areas:'icon content'}}
1711
+
@container (min-width: 40rem){.x1sf44ts.x1sf44ts:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){grid-template-areas:"logo navigation action"}}
1666
1712
@media (prefers-reduced-motion: reduce){.xw1j4dc.xw1j4dc:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){transition:none}}
1713
+
@container (min-width: 40rem){.x18369jb.x18369jb:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){align-items:stretch}}
1667
1714
@media (prefers-reduced-motion: reduce){.xvsuukb.xvsuukb:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){animation-name:none}}
1715
+
@container (min-width: 40rem){.xk0w51d.xk0w51d:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){column-gap:var(--x1do95gr)}}
1716
+
@container (min-width: 40rem){.xe03xe1.xe03xe1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){display:block}}
1717
+
@container (min-width: 40rem){.x1c5a6f8.x1c5a6f8:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){display:flex}}
1718
+
@container (min-width: 40rem){.x1mf2ooi.x1mf2ooi:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){display:none}}
1719
+
@container (min-width: 40rem){.x1dj44ft.x1dj44ft:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){flex-direction:row}}
1668
1720
@media (min-width: 48rem){.xtab9a1.xtab9a1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){font-size:var(--x17lnkj2)}}
1669
1721
@media (min-width: 48rem){.xyxybcd.xyxybcd:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){font-size:var(--x4z03mz)}}
1670
1722
@media (max-width: 40rem){.x169p88b.x169p88b:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){grid-template-columns:auto 1fr auto}}
1723
+
@container (min-width: 40rem){.x121h25b.x121h25b:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){grid-template-columns:auto 1fr auto}}
1671
1724
@media (max-width: 40rem){.x5ep46v.x5ep46v:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){grid-template-columns:auto 1fr}}
1672
1725
.xarstr8:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset:0}
1673
1726
.x1bf8y27:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset:var(--x1plbop)}
···
1679
1732
.xylezxb:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-radius:var(--xmpdjt5)}
1680
1733
@supports (corner-shape: squircle){.xhijslx.xhijslx:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-top-left-radius:var(--x1bwjc12)}}
1681
1734
@supports (corner-shape: squircle){.x1p4l8k4.x1p4l8k4:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-top-right-radius:var(--x1bwjc12)}}
1735
+
@container (min-width: 40rem){.x1mq9e0j.x1mq9e0j:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--x18pvp2c)}}
1682
1736
.x1ad04t7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-search-cancel-button{appearance:none}
1683
1737
.x1glnyev:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-search-decoration{appearance:none}
1738
+
.x1hfhjwi:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-color:currentColor}
1684
1739
.x6nwkdq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-color:var(--x11as8pt)}
1685
1740
.x1gpeez9:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-color:var(--xs64gu4)}
1686
1741
.xx38sju:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{box-sizing:border-box}
1687
1742
.xfjerqh:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::placeholder{color:var(--x45q57k)}
1688
1743
.x10tli2e:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{content:''}
1689
1744
.x1s928wv:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{content:""}
1745
+
.xhkezso:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{display:block}
1746
+
.x1eokf9:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{opacity:var(--underline-opacity)}
1747
+
.x2q1x1w:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{pointer-events:none}
1690
1748
.x1hmns74:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{position:absolute}
1691
1749
.x1j6awrg:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{position:absolute}
1692
1750
.xka30rq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transition-duration:100ms}
···
1694
1752
.xn05597:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transition-timing-function:ease-in-out}
1695
1753
.xy5mcqj:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{z-index:-1}
1696
1754
.xhq5o37:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{bottom:0}
1755
+
.x1bw9o38:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{bottom:calc(var(--x1plbop) * -1)}
1756
+
.x3cntg4:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{height:2px}
1697
1757
.x1wlytlt:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{left:0}
1758
+
.x17cx49:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{left:0}
1759
+
.xnbfe2x:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{right:0}
1698
1760
.x1y3wzot:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:0}
1761
+
.x4eaejv:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{width:100%}
1699
1762
.x1vgi0k:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{width:1px}
+2
packages/hip-ui/src/cli/install.tsx
+2
packages/hip-ui/src/cli/install.tsx
···
51
51
import { menuConfig } from "../components/menu/menu-config.js";
52
52
import { menubarConfig } from "../components/menubar/menubar-config.js";
53
53
import { meterConfig } from "../components/meter/meter-config.js";
54
+
import { navbarConfig } from "../components/navbar/navbar-config.js";
54
55
import { numberFieldConfig } from "../components/number-field/number-field-config.js";
55
56
import { paginationConfig } from "../components/pagination/pagination-config.js";
56
57
import { popoverConfig } from "../components/popover/popover-config.js";
···
108
109
toolbarConfig,
109
110
menuConfig,
110
111
menubarConfig,
112
+
navbarConfig,
111
113
listboxConfig,
112
114
contextMenuConfig,
113
115
timeFieldConfig,
+3
-1
packages/hip-ui/src/components/hover-card/index.tsx
+3
-1
packages/hip-ui/src/components/hover-card/index.tsx
+31
-9
packages/hip-ui/src/components/link/index.tsx
+31
-9
packages/hip-ui/src/components/link/index.tsx
···
13
13
14
14
const styles = stylex.create({
15
15
link: {
16
-
textDecoration: {
17
-
default: "none",
18
-
":is([data-breadcrumb] *)": "none",
19
-
":is([data-hovered])": "underline",
16
+
"--underline-opacity": {
17
+
default: 0,
18
+
":is([aria-expanded=true])": 1,
19
+
":is([data-breadcrumb] *)": 0,
20
+
":is([data-hovered])": 1,
20
21
},
22
+
gap: spacing["2"],
23
+
textDecoration: "none",
24
+
alignItems: "center",
21
25
color: {
22
26
default: primaryColor.text2,
23
27
":is([data-breadcrumb] *)": uiColor.text1,
24
28
":is([data-breadcrumb][data-current] *)": uiColor.text2,
25
29
},
26
-
cursor: {
27
-
default: "default",
28
-
":is([data-hovered])": "pointer",
29
-
},
30
+
cursor: "pointer",
31
+
display: "inline-flex",
30
32
fontFamily: fontFamily["sans"],
31
33
fontWeight: fontWeight["normal"],
32
-
textUnderlineOffset: spacing["1"],
34
+
position: "relative",
35
+
36
+
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
37
+
":is(*) svg": {
38
+
height: "1.2em",
39
+
width: "1.2em",
40
+
},
41
+
42
+
"::after": {
43
+
backgroundColor: "currentColor",
44
+
content: '""',
45
+
display: "block",
46
+
opacity: "var(--underline-opacity)",
47
+
pointerEvents: "none",
48
+
position: "absolute",
49
+
bottom: `calc(${spacing["1"]} * -1)`,
50
+
height: "2px",
51
+
left: 0,
52
+
right: 0,
53
+
width: "100%",
54
+
},
33
55
},
34
56
});
35
57
+8
packages/hip-ui/src/components/theme/media-queries.stylex.tsx
+8
packages/hip-ui/src/components/theme/media-queries.stylex.tsx
···
8
8
"2xl": "@media (min-width: 96rem)",
9
9
});
10
10
11
+
export const containerBreakpoints = stylex.defineConsts({
12
+
sm: "@container (min-width: 40rem)",
13
+
md: "@container (min-width: 48rem)",
14
+
lg: "@container (min-width: 64rem)",
15
+
xl: "@container (min-width: 80rem)",
16
+
"2xl": "@container (min-width: 96rem)",
17
+
});
18
+
11
19
export const maxBreakpoints = stylex.defineConsts({
12
20
sm: "@media (max-width: 40rem)",
13
21
});