A design system in a box.
hip-ui.tngl.io/docs/introduction
Alert
+846
-15
+1
-1
README.md
+1
-1
README.md
+258
apps/docs/src/components/alert/index.tsx
+258
apps/docs/src/components/alert/index.tsx
···
1
+
"use client";
2
+
3
+
import * as stylex from "@stylexjs/stylex";
4
+
import {
5
+
AlertCircle,
6
+
CheckCircle2,
7
+
Info,
8
+
X,
9
+
AlertTriangle,
10
+
} from "lucide-react";
11
+
import { use } from "react";
12
+
13
+
import { SizeContext } from "../context";
14
+
import { IconButton } from "../icon-button";
15
+
import { radius } from "../theme/radius.stylex";
16
+
import {
17
+
critical,
18
+
primary,
19
+
success,
20
+
warning,
21
+
} from "../theme/semantic-color.stylex";
22
+
import { spacing } from "../theme/spacing.stylex";
23
+
import { Size, StyleXComponentProps } from "../theme/types";
24
+
import { fontFamily } from "../theme/typography.stylex";
25
+
import { Text } from "../typography/text";
26
+
27
+
const styles = stylex.create({
28
+
alert: {
29
+
// eslint-disable-next-line @stylexjs/valid-styles
30
+
cornerShape: "squircle",
31
+
borderRadius: {
32
+
default: radius["lg"],
33
+
"@supports (corner-shape: squircle)": radius["3xl"],
34
+
},
35
+
borderStyle: "solid",
36
+
borderWidth: 1,
37
+
gap: spacing["2.5"],
38
+
gridTemplateAreas: {
39
+
default: "'icon content'",
40
+
"@media (max-width: 640px)": "'icon content'",
41
+
},
42
+
alignItems: "center",
43
+
boxSizing: "border-box",
44
+
display: "grid",
45
+
fontFamily: fontFamily["sans"],
46
+
gridTemplateColumns: {
47
+
default: "auto 1fr",
48
+
"@media (max-width: 640px)": "auto 1fr",
49
+
},
50
+
position: "relative",
51
+
minHeight: spacing["10"],
52
+
paddingBottom: spacing["2.5"],
53
+
paddingLeft: spacing["4"],
54
+
paddingRight: spacing["4"],
55
+
paddingTop: spacing["2.5"],
56
+
},
57
+
alertWithDescription: {
58
+
alignItems: "flex-start",
59
+
paddingBottom: spacing["4"],
60
+
paddingRight: spacing["3"],
61
+
paddingTop: spacing["4"],
62
+
},
63
+
alertWithClose: {
64
+
gridTemplateAreas: {
65
+
default: "'icon content close'",
66
+
"@media (max-width: 640px)": "'icon content close'",
67
+
},
68
+
gridTemplateColumns: {
69
+
default: "auto 1fr auto",
70
+
"@media (max-width: 640px)": "auto 1fr auto",
71
+
},
72
+
paddingRight: spacing["2"],
73
+
},
74
+
alertWithAction: {
75
+
gridTemplateAreas: {
76
+
default: "'icon content action'",
77
+
"@media (max-width: 640px)": "'icon content' 'action action action'",
78
+
},
79
+
gridTemplateColumns: {
80
+
default: "auto 1fr auto",
81
+
"@media (max-width: 640px)": "auto 1fr",
82
+
},
83
+
paddingRight: spacing["2"],
84
+
},
85
+
alertWithActionAndClose: {
86
+
gridTemplateAreas: {
87
+
default: "'icon content action close'",
88
+
"@media (max-width: 640px)":
89
+
"'icon content close' 'action action action'",
90
+
},
91
+
gridTemplateColumns: {
92
+
default: "auto 1fr auto auto",
93
+
"@media (max-width: 640px)": "auto 1fr auto",
94
+
},
95
+
paddingRight: spacing["2"],
96
+
},
97
+
content: {
98
+
gridArea: "content",
99
+
gap: spacing["1"],
100
+
display: "flex",
101
+
flexDirection: "column",
102
+
},
103
+
icon: {
104
+
gridArea: "icon",
105
+
alignItems: "center",
106
+
display: "flex",
107
+
flexShrink: 0,
108
+
justifyContent: "center",
109
+
pointerEvents: "none",
110
+
111
+
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
112
+
":is(*) svg": {
113
+
flexShrink: 0,
114
+
pointerEvents: "none",
115
+
height: spacing["5"],
116
+
width: spacing["5"],
117
+
},
118
+
},
119
+
action: {
120
+
gridArea: "action",
121
+
gap: spacing["2"],
122
+
alignItems: "center",
123
+
alignSelf: "center",
124
+
display: "flex",
125
+
flexShrink: 0,
126
+
},
127
+
closeButton: {
128
+
gridArea: "close",
129
+
flexShrink: 0,
130
+
marginBottom: `calc(${spacing["1"]} * -1)`,
131
+
marginTop: `calc(${spacing["1"]} * -1)`,
132
+
},
133
+
actionAndClose: {
134
+
alignSelf: "center",
135
+
},
136
+
});
137
+
138
+
export type AlertVariant = "info" | "success" | "warning" | "critical";
139
+
140
+
export interface AlertProps
141
+
extends Omit<StyleXComponentProps<React.ComponentProps<"div">>, "title"> {
142
+
/**
143
+
* The variant of the alert.
144
+
* @default "info"
145
+
*/
146
+
variant?: AlertVariant;
147
+
/**
148
+
* The size of the alert.
149
+
*/
150
+
size?: Size;
151
+
/**
152
+
* The title of the alert.
153
+
*/
154
+
title?: React.ReactNode;
155
+
/**
156
+
* The description or content of the alert.
157
+
*/
158
+
children?: React.ReactNode;
159
+
/**
160
+
* Action elements to display in the alert (e.g., buttons).
161
+
*/
162
+
action?: React.ReactNode;
163
+
/**
164
+
* Callback fired when the alert is dismissed. If provided, a close button will be displayed.
165
+
*/
166
+
onDismiss?: () => void;
167
+
/**
168
+
* Custom icon to display. If not provided, a default icon will be used based on the variant.
169
+
*/
170
+
icon?: React.ReactNode;
171
+
}
172
+
173
+
const defaultIcons: Record<AlertVariant, React.ReactNode> = {
174
+
info: <Info />,
175
+
success: <CheckCircle2 />,
176
+
warning: <AlertTriangle />,
177
+
critical: <AlertCircle />,
178
+
};
179
+
180
+
export const Alert = ({
181
+
variant = "info",
182
+
size: sizeProp,
183
+
title,
184
+
children,
185
+
action,
186
+
onDismiss,
187
+
icon,
188
+
style,
189
+
...props
190
+
}: AlertProps) => {
191
+
const size = sizeProp ?? use(SizeContext);
192
+
193
+
const defaultIcon = defaultIcons[variant];
194
+
const displayIcon = icon === undefined ? defaultIcon : icon;
195
+
const hasAction = action != null;
196
+
const hasCloseButton = onDismiss != null;
197
+
198
+
return (
199
+
<div
200
+
role="alert"
201
+
data-variant={variant}
202
+
data-size={size}
203
+
{...stylex.props(
204
+
styles.alert,
205
+
!hasAction && hasCloseButton && styles.alertWithClose,
206
+
hasAction && hasCloseButton && styles.alertWithActionAndClose,
207
+
hasAction && !hasCloseButton && styles.alertWithAction,
208
+
children != null && styles.alertWithDescription,
209
+
variant === "info" && [primary.bgDim, primary.borderDim, primary.text],
210
+
variant === "success" && [
211
+
success.bgDim,
212
+
success.borderDim,
213
+
success.text,
214
+
],
215
+
variant === "warning" && [
216
+
warning.bgDim,
217
+
warning.borderDim,
218
+
warning.text,
219
+
],
220
+
variant === "critical" && [
221
+
critical.bgDim,
222
+
critical.borderDim,
223
+
critical.text,
224
+
],
225
+
style,
226
+
)}
227
+
{...props}
228
+
>
229
+
{displayIcon != null && (
230
+
<div {...stylex.props(styles.icon)}>{displayIcon}</div>
231
+
)}
232
+
<div {...stylex.props(styles.content)}>
233
+
{title != null && (
234
+
<Text size="base" weight="semibold">
235
+
{title}
236
+
</Text>
237
+
)}
238
+
{children != null && (
239
+
<Text size="sm" variant="secondary" data-alert-description>
240
+
{children}
241
+
</Text>
242
+
)}
243
+
</div>
244
+
{hasAction && <div {...stylex.props(styles.action)}>{action}</div>}
245
+
{hasCloseButton && (
246
+
<IconButton
247
+
aria-label="Dismiss alert"
248
+
size={size}
249
+
variant="tertiary"
250
+
onPress={onDismiss}
251
+
style={[styles.closeButton, hasAction && styles.actionAndClose]}
252
+
>
253
+
<X />
254
+
</IconButton>
255
+
)}
256
+
</div>
257
+
);
258
+
};
+83
apps/docs/src/docs/components/status/alert.mdx
+83
apps/docs/src/docs/components/status/alert.mdx
···
1
+
---
2
+
title: Alert
3
+
description: An Alert displays important information to users in a prominent way, typically used for notifications, warnings, or feedback.
4
+
---
5
+
6
+
import { PropDocs } from '../../../lib/PropDocs'
7
+
import { Example } from '../../../lib/Example'
8
+
import { Basic } from '../../../examples/alert/basic'
9
+
import { Variants } from '../../../examples/alert/variants'
10
+
import { TitleOnly } from '../../../examples/alert/title-only'
11
+
import { WithAction } from '../../../examples/alert/with-action'
12
+
import { WithActionTitleOnly } from '../../../examples/alert/with-action-title-only'
13
+
import { Dismissible } from '../../../examples/alert/dismissible'
14
+
import { TitleOnlyDismissible } from '../../../examples/alert/title-only-dismissible'
15
+
import { CustomIcon } from '../../../examples/alert/custom-icon'
16
+
17
+
<Example src={Basic} />
18
+
19
+
## Installation
20
+
21
+
Run the following command to add the alert component to your project.
22
+
23
+
```bash
24
+
pnpm hip install alert
25
+
```
26
+
27
+
## Props
28
+
29
+
<PropDocs components={["Alert"]} />
30
+
31
+
## Features
32
+
33
+
### Variants
34
+
35
+
Alerts can be one of the following variants:
36
+
37
+
- `info` (default) - For informational messages
38
+
- `success` - For successful operations or positive feedback
39
+
- `warning` - For warnings that need attention
40
+
- `critical` - For errors or critical issues
41
+
42
+
Each variant has a distinct color scheme and default icon.
43
+
44
+
<Example src={Variants} />
45
+
46
+
### Title Only
47
+
48
+
Alerts can be displayed with just a title, without a description.
49
+
50
+
<Example src={TitleOnly} />
51
+
52
+
### With Actions
53
+
54
+
Alerts can include action elements such as buttons. On smaller screens, the action area moves to a separate row below the content.
55
+
56
+
<Example src={WithAction} />
57
+
58
+
Title-only alerts can also include actions.
59
+
60
+
<Example src={WithActionTitleOnly} />
61
+
62
+
### Dismissible
63
+
64
+
Alerts can be made dismissible by providing an `onDismiss` callback. When `onDismiss` is provided, a close button will automatically be displayed.
65
+
66
+
<Example src={Dismissible} />
67
+
68
+
Title-only alerts can also be dismissible.
69
+
70
+
<Example src={TitleOnlyDismissible} />
71
+
72
+
### Custom Icons
73
+
74
+
You can provide a custom icon to override the default icon for each variant.
75
+
76
+
<Example src={CustomIcon} />
77
+
78
+
## Related Components
79
+
80
+
- [Badge](/docs/components/badge) - For small status indicators
81
+
- [Toast](/docs/components/status/toast) - For temporary notifications
82
+
- [AlertDialog](/docs/components/alert-dialog) - For critical actions and confirmations
83
+
+10
apps/docs/src/examples/alert/basic.tsx
+10
apps/docs/src/examples/alert/basic.tsx
+15
apps/docs/src/examples/alert/custom-icon.tsx
+15
apps/docs/src/examples/alert/custom-icon.tsx
···
1
+
import { Lightbulb } from "lucide-react";
2
+
import { Alert } from "@/components/alert";
3
+
4
+
export function CustomIcon() {
5
+
return (
6
+
<Alert
7
+
variant="info"
8
+
title="Custom Icon"
9
+
icon={<Lightbulb />}
10
+
>
11
+
This alert uses a custom icon instead of the default icon.
12
+
</Alert>
13
+
);
14
+
}
15
+
+23
apps/docs/src/examples/alert/dismissible.tsx
+23
apps/docs/src/examples/alert/dismissible.tsx
···
1
+
"use client";
2
+
3
+
import { useState } from "react";
4
+
import { Alert } from "@/components/alert";
5
+
6
+
export function Dismissible() {
7
+
const [isVisible, setIsVisible] = useState(true);
8
+
9
+
if (!isVisible) {
10
+
return null;
11
+
}
12
+
13
+
return (
14
+
<Alert
15
+
variant="info"
16
+
title="Dismissible Alert"
17
+
onDismiss={() => setIsVisible(false)}
18
+
>
19
+
This alert can be dismissed by clicking the close button.
20
+
</Alert>
21
+
);
22
+
}
23
+
+30
apps/docs/src/examples/alert/title-only-dismissible.tsx
+30
apps/docs/src/examples/alert/title-only-dismissible.tsx
···
1
+
"use client";
2
+
3
+
import { useState } from "react";
4
+
import { Alert } from "@/components/alert";
5
+
import { Flex } from "@/components/flex";
6
+
7
+
export function TitleOnlyDismissible() {
8
+
const [infoVisible, setInfoVisible] = useState(true);
9
+
const [successVisible, setSuccessVisible] = useState(true);
10
+
11
+
return (
12
+
<Flex gap="4" direction="column">
13
+
{infoVisible && (
14
+
<Alert
15
+
variant="info"
16
+
title="Information"
17
+
onDismiss={() => setInfoVisible(false)}
18
+
/>
19
+
)}
20
+
{successVisible && (
21
+
<Alert
22
+
variant="success"
23
+
title="Success"
24
+
onDismiss={() => setSuccessVisible(false)}
25
+
/>
26
+
)}
27
+
</Flex>
28
+
);
29
+
}
30
+
+14
apps/docs/src/examples/alert/title-only.tsx
+14
apps/docs/src/examples/alert/title-only.tsx
···
1
+
import { Alert } from "@/components/alert";
2
+
import { Flex } from "@/components/flex";
3
+
4
+
export function TitleOnly() {
5
+
return (
6
+
<Flex gap="4" direction="column">
7
+
<Alert variant="info" title="Information" />
8
+
<Alert variant="success" title="Success" />
9
+
<Alert variant="warning" title="Warning" />
10
+
<Alert variant="critical" title="Error" />
11
+
</Flex>
12
+
);
13
+
}
14
+
+22
apps/docs/src/examples/alert/variants.tsx
+22
apps/docs/src/examples/alert/variants.tsx
···
1
+
import { Alert } from "@/components/alert";
2
+
import { Flex } from "@/components/flex";
3
+
4
+
export function Variants() {
5
+
return (
6
+
<Flex gap="4" direction="column">
7
+
<Alert variant="info" title="Information">
8
+
This is an informational alert.
9
+
</Alert>
10
+
<Alert variant="success" title="Success">
11
+
Your changes have been saved successfully.
12
+
</Alert>
13
+
<Alert variant="warning" title="Warning">
14
+
Please review your input before submitting.
15
+
</Alert>
16
+
<Alert variant="critical" title="Error">
17
+
Something went wrong. Please try again.
18
+
</Alert>
19
+
</Flex>
20
+
);
21
+
}
22
+
+30
apps/docs/src/examples/alert/with-action-title-only.tsx
+30
apps/docs/src/examples/alert/with-action-title-only.tsx
···
1
+
import { Alert } from "@/components/alert";
2
+
import { Button } from "@/components/button";
3
+
import { Flex } from "@/components/flex";
4
+
5
+
export function WithActionTitleOnly() {
6
+
return (
7
+
<Flex gap="4" direction="column">
8
+
<Alert
9
+
variant="info"
10
+
title="Information"
11
+
action={<Button variant="tertiary">Learn more</Button>}
12
+
/>
13
+
<Alert
14
+
variant="success"
15
+
title="Success"
16
+
action={<Button variant="tertiary">View details</Button>}
17
+
/>
18
+
<Alert
19
+
variant="critical"
20
+
title="Error"
21
+
onDismiss={() => {}}
22
+
action={
23
+
<Flex gap="2">
24
+
<Button variant="critical">Retry</Button>
25
+
</Flex>
26
+
}
27
+
/>
28
+
</Flex>
29
+
);
30
+
}
+44
apps/docs/src/examples/alert/with-action.tsx
+44
apps/docs/src/examples/alert/with-action.tsx
···
1
+
import { Alert } from "@/components/alert";
2
+
import { Button } from "@/components/button";
3
+
import { Flex } from "@/components/flex";
4
+
5
+
export function WithAction() {
6
+
return (
7
+
<Flex gap="4" direction="column">
8
+
<Alert
9
+
variant="info"
10
+
title="Information"
11
+
action={<Button variant="tertiary">Learn more</Button>}
12
+
>
13
+
This alert includes an action button.
14
+
</Alert>
15
+
<Alert
16
+
variant="success"
17
+
title="Success"
18
+
action={<Button variant="tertiary">View details</Button>}
19
+
>
20
+
Your changes have been saved successfully.
21
+
</Alert>
22
+
<Alert
23
+
variant="warning"
24
+
title="Warning"
25
+
action={
26
+
<Flex gap="1">
27
+
<Button variant="tertiary">Cancel</Button>
28
+
<Button variant="primary">Continue</Button>
29
+
</Flex>
30
+
}
31
+
>
32
+
Please review your input before submitting.
33
+
</Alert>
34
+
<Alert
35
+
variant="critical"
36
+
title="Error"
37
+
onDismiss={() => {}}
38
+
action={<Button variant="critical">Retry</Button>}
39
+
>
40
+
Something went wrong. Please try again.
41
+
</Alert>
42
+
</Flex>
43
+
);
44
+
}
+36
-14
apps/docs/stylex.css
+36
-14
apps/docs/stylex.css
···
1
1
@property --x-boxShadow { syntax: "*"; inherits: false;}
2
+
@property --x-aspectRatio { syntax: "*"; inherits: false;}
2
3
@property --x-gridTemplateRows { syntax: "*"; inherits: false;}
3
4
@property --x-gridTemplateColumns { syntax: "*"; inherits: false;}
4
5
@property --x-gridColumnStart { syntax: "*"; inherits: false;}
5
6
@property --x-gridColumnEnd { syntax: "*"; inherits: false;}
6
7
@property --x-gridRowStart { syntax: "*"; inherits: false;}
7
8
@property --x-gridRowEnd { syntax: "*"; inherits: false;}
8
-
@property --x-aspectRatio { syntax: "*"; inherits: false;}
9
9
@property --x-width { syntax: "*"; inherits: false;}
10
10
@property --x-paddingLeft { syntax: "*"; inherits: false;}
11
11
@property --x---items-per-row { syntax: "*"; inherits: false;}
···
25
25
@property --black-xdj5g3 { syntax: "<number>"; inherits: true; initial-value: 900 }
26
26
@keyframes x1wc8ddo-B{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
27
27
@keyframes x1yo5mx1-B{0%{transform:translate(-50%,-50%) scale(0);}100%{transform:translate(-50%,-50%) scale(1);}}
28
-
@keyframes x1yf9xd4-B{0%{transform:translateX(-65%);}100%{transform:translateX(0%);}}
29
28
@keyframes x72inym-B{from{transform:translateX(-1.86%);}to{transform:translateX(0%);}}
29
+
@keyframes x1yf9xd4-B{0%{transform:translateX(-65%);}100%{transform:translateX(0%);}}
30
30
:root, .x15x7s49{--_0-xcffliq:0px;--_1-x1plbop:0.25rem;--_2-xsow7ju:0.5rem;--_3-x1a1riub:0.75rem;--_4-xgvn2um:1rem;--_5-x1pn3ufh:1.25rem;--_6-x109877l:1.5rem;--_7-x3ogwq2:1.75rem;--_8-x1do95gr:2rem;--_9-x58vtwt:2.25rem;--_10-xyoqvup:2.5rem;--_11-x11x3va4:2.75rem;--_12-xaxip2l:3rem;--_14-x18pvp2c:3.5rem;--_16-xnqsi2d:4rem;--_20-xbgtkw8:5rem;--_24-x8uq83j:6rem;--_28-x3c8utc:7rem;--_32-xxeew7j:8rem;--_36-x9ro48l:9rem;--_40-xlhyjhi:10rem;--_44-x4oqk9o:11rem;--_48-xc3zl6e:12rem;--_52-x66e183:13rem;--_56-x1k96jyh:14rem;--_60-xf930e:15rem;--_64-xhz114r:16rem;--_72-xgbkc4t:18rem;--_80-x12r4f45:20rem;--_96-x1mf07nc:24rem;--px-x1rrl3u8:1px;--_0_5-x1bnlq1y:0.125rem;--_1_5-x1llymyc:0.375rem;--_2_5-xmuc480:0.625rem;--_3_5-x1gotxl7:0.875rem;}
31
31
:root, .x1rvy3a9{--_2xs-x1xzzr5o:0 1px rgb(0 0 0 / 0.05);--xs-x1e2w8h4:0 1px 2px 0 rgb(0 0 0 / 0.05);--sm-xeboudq:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--md-xf59ov0:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--lg-xgilsvr:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--xl-x1azhb21:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--_2xl-x1nhun0f:0 25px 50px -12px rgb(0 0 0 / 0.25);--none-xgllz1r:0 0 #0000;--inset-xe4eu4o:inset 0 0 4px 0 rgb(0 0 0 / 0.1);--insetSm-xio3qbh:inset 0 0 4px 0 rgb(0 0 0 / 0.05);--insetMd-xx48ebj:inset 0 0 4px 0 rgb(0 0 0 / 0.1);--insetLg-x19q2zjg:inset 0 0 8px 0 rgb(0 0 0 / 0.15);}
32
32
:root, .x1vqb0uf{--bg-x11hz5ne:light-dark(#fcfcfd, #fcfcfd);--bgSubtle-xk6jaqm:light-dark(#f9f9fb, #f9f9fb);--component1-x14nyoj8:light-dark(#f0f0f3, #f0f0f3);--component2-xx984p:light-dark(#e8e8ec, #e8e8ec);--component3-x1frjuvu:light-dark(#e0e1e6, #e0e1e6);--border1-x1xf4476:light-dark(#d9d9e0, #d9d9e0);--border2-x10iw3tt:light-dark(#cdced6, #cdced6);--border3-xq0e6t4:light-dark(#b9bbc6, #b9bbc6);--solid1-x1rohqqu:light-dark(#8b8d98, #8b8d98);--solid2-x27t3df:light-dark(#80838d, #80838d);--text1-x1340um9:light-dark(#60646c, #60646c);--text2-x19kn33k:light-dark(#1c2024, #1c2024);}
···
96
96
.--progress-size-xbwumww:is([data-size=md] *){--progress-size:var(--_8-x1do95gr)}
97
97
.gridArea-x19dv8yz:not(#\#){grid-area:action}
98
98
.gridArea-x1iynvfu:not(#\#){grid-area:bar}
99
+
.gridArea-x1vu5sea:not(#\#){grid-area:close}
100
+
.gridArea-x1fdo2jl:not(#\#){grid-area:content}
99
101
.gridArea-x19tbii3:not(#\#){grid-area:description}
102
+
.gridArea-x1cnu6j2:not(#\#){grid-area:icon}
100
103
.gridArea-xxwd7sb:not(#\#){grid-area:label}
101
104
.gridArea-xnyuz70:not(#\#){grid-area:title}
102
105
.gridArea-xo3lhmp:not(#\#){grid-area:track}
···
201
204
.gap-x8fwt5u:not(#\#):not(#\#){gap:var(--card-gap)}
202
205
.gap-x1dp1mka:not(#\#):not(#\#){gap:var(--empty-state-gap)}
203
206
.gap-x19e0sr3:not(#\#):not(#\#){gap:var(--toggle-button-group-gap)}
207
+
.gridTemplateAreas-x11y4r8b:not(#\#):not(#\#){grid-template-areas:'icon content action close'}
208
+
.gridTemplateAreas-x1264n0i:not(#\#):not(#\#){grid-template-areas:'icon content action'}
209
+
.gridTemplateAreas-x1dvjar7:not(#\#):not(#\#){grid-template-areas:'icon content close'}
210
+
.gridTemplateAreas-x1flk6k7:not(#\#):not(#\#){grid-template-areas:'icon content'}
204
211
.gridTemplateAreas-x1syeyrc:not(#\#):not(#\#){grid-template-areas:'label value-label' 'bar bar'}
205
212
.gridTemplateAreas-xynonu2:not(#\#):not(#\#){grid-template-areas:'label value-label' 'track track'}
206
213
.gridTemplateAreas-x1vftqdq:not(#\#):not(#\#){grid-template-areas:'track'}
···
271
278
.outline-x1uvtmcs:focus:not(#\#):not(#\#){outline:none}
272
279
.borderColor-x1h9215t:active:not(#\#):not(#\#){border-color:var(--border3-x1be1b4q)}
273
280
.borderColor-x8zghie:active:not(#\#):not(#\#){border-color:var(--component3-x11hgl6v)}
281
+
@media (max-width: 640px){.gridTemplateAreas-xi8qctt.gridTemplateAreas-xi8qctt:not(#\#):not(#\#){grid-template-areas:'icon content close' 'action action action'}}
282
+
@media (max-width: 640px){.gridTemplateAreas-xcyknnz.gridTemplateAreas-xcyknnz:not(#\#):not(#\#){grid-template-areas:'icon content close'}}
283
+
@media (max-width: 640px){.gridTemplateAreas-x16hwjhk.gridTemplateAreas-x16hwjhk:not(#\#):not(#\#){grid-template-areas:'icon content' 'action action action'}}
284
+
@media (max-width: 640px){.gridTemplateAreas-x1k67jme.gridTemplateAreas-x1k67jme:not(#\#):not(#\#){grid-template-areas:'icon content'}}
274
285
@media (prefers-reduced-motion: reduce){.transition-x9kvfbb.transition-x9kvfbb:not(#\#):not(#\#){transition:none}}
275
286
.alignContent-xc26acl:not(#\#):not(#\#):not(#\#){align-content:center}
276
287
.alignContent-x4465f1:not(#\#):not(#\#):not(#\#){align-content:end}
···
283
294
.alignItems-xuk3077:not(#\#):not(#\#):not(#\#){align-items:flex-end}
284
295
.alignItems-x1cy8zhl:not(#\#):not(#\#):not(#\#){align-items:flex-start}
285
296
.alignItems-x1qjc9v5:not(#\#):not(#\#):not(#\#){align-items:stretch}
297
+
.alignSelf-xamitd3:not(#\#):not(#\#):not(#\#){align-self:center}
286
298
.animationDuration-xvjg3zp:not(#\#):not(#\#):not(#\#){animation-duration:1.7s}
287
299
.animationDuration-x1q3qbx4:not(#\#):not(#\#):not(#\#){animation-duration:1s}
288
300
.animationDuration-xaft12t:not(#\#):not(#\#):not(#\#){animation-duration:var(--default-x1seeabg)}
···
456
468
.gridColumnStart-x15kxzb9:not(#\#):not(#\#):not(#\#){grid-column-start:var(--x-gridColumnStart)}
457
469
.gridRowEnd-x1f5yvw1:not(#\#):not(#\#):not(#\#){grid-row-end:var(--x-gridRowEnd)}
458
470
.gridRowStart-x1cjrry:not(#\#):not(#\#):not(#\#){grid-row-start:var(--x-gridRowStart)}
471
+
.gridTemplateColumns-x1uvv8nx:not(#\#):not(#\#):not(#\#){grid-template-columns:auto 1fr auto auto}
472
+
.gridTemplateColumns-x1g3yg12:not(#\#):not(#\#):not(#\#){grid-template-columns:auto 1fr auto}
473
+
.gridTemplateColumns-x1pmbctz:not(#\#):not(#\#):not(#\#){grid-template-columns:auto 1fr}
459
474
.gridTemplateColumns-xqketvx:not(#\#):not(#\#):not(#\#){grid-template-columns:var(--x-gridTemplateColumns)}
460
475
.gridTemplateRows-x1xxtoay:not(#\#):not(#\#):not(#\#){grid-template-rows:var(--x-gridTemplateRows)}
461
476
.justifyContent-xl56j7k:not(#\#):not(#\#):not(#\#){justify-content:center}
···
651
666
.color-x1tqrvjy:is([data-variant=critical] *):not(#\#):not(#\#):not(#\#){color:var(--text1-x1umfgwa)}
652
667
.color-x21l3u3:is([data-breadcrumb] *):not(#\#):not(#\#):not(#\#){color:var(--text1-x45q57k)}
653
668
.color-x14nsdjc:is(:not(#\#):not(#\#):not(#\#)::placeholder,[data-placeholder]){color:var(--text1-x45q57k)}
654
-
.color-x1e5cg24:is([data-current]):not(#\#):not(#\#):not(#\#){color:var(--text1-x45q57k)}
655
669
.color-x1oj07n7:is([data-placeholder]):not(#\#):not(#\#):not(#\#){color:var(--text1-x45q57k)}
670
+
.color-x1e5cg24:is([data-current]):not(#\#):not(#\#):not(#\#){color:var(--text1-x45q57k)}
656
671
.color-xslau8o:is([data-variant=warning] *):not(#\#):not(#\#):not(#\#){color:var(--text1-xw4mcn1)}
657
672
.color-xk6mey7:is([data-variant=warning] *):not(#\#):not(#\#):not(#\#){color:var(--text2-x1u4qfl5)}
658
673
.color-x889psc:is([data-selected]):not(#\#):not(#\#):not(#\#){color:var(--text2-x1xyma3f)}
···
681
696
.flexShrink-x1vnanun:is(*) svg:not(#\#):not(#\#):not(#\#){flex-shrink:0}
682
697
.fontSize-xdi2y9l:is([data-card-size='lg'] *):not(#\#):not(#\#):not(#\#){font-size:var(--_2xl-xq985z6)}
683
698
.fontSize-x2gohhm:is([data-empty-state-size='lg'] *):not(#\#):not(#\#):not(#\#){font-size:var(--_2xl-xq985z6)}
684
-
.fontSize-x1h5ralm:is([data-size=md] *):not(#\#):not(#\#):not(#\#){font-size:var(--base-xidomu0)}
685
699
.fontSize-x1a19hz7:is([data-size=lg]):not(#\#):not(#\#):not(#\#){font-size:var(--base-xidomu0)}
700
+
.fontSize-x1h5ralm:is([data-size=md] *):not(#\#):not(#\#):not(#\#){font-size:var(--base-xidomu0)}
686
701
.fontSize-x175ohug:is([data-size=lg] *):not(#\#):not(#\#):not(#\#){font-size:var(--base-xidomu0)}
687
702
.fontSize-x1fkmo1y:is([data-card-size='sm'] *):not(#\#):not(#\#):not(#\#){font-size:var(--lg-x1hevvyd)}
688
703
.fontSize-x1py6ykt:is([data-size=lg] *):not(#\#):not(#\#):not(#\#){font-size:var(--lg-x1hevvyd)}
689
704
.fontSize-x1ktbii6:is([data-empty-state-size='sm'] *):not(#\#):not(#\#):not(#\#){font-size:var(--lg-x1hevvyd)}
690
-
.fontSize-xiceyaw:is([data-size=sm] *):not(#\#):not(#\#):not(#\#){font-size:var(--sm-x1w27pzf)}
691
705
.fontSize-x1bzifm9:is([data-size=md]):not(#\#):not(#\#):not(#\#){font-size:var(--sm-x1w27pzf)}
706
+
.fontSize-xiceyaw:is([data-size=sm] *):not(#\#):not(#\#):not(#\#){font-size:var(--sm-x1w27pzf)}
692
707
.fontSize-x1ya0evx:is([data-size=md] *):not(#\#):not(#\#):not(#\#){font-size:var(--sm-x1w27pzf)}
693
708
.fontSize-xujovw0:is([data-card-size='md'] *):not(#\#):not(#\#):not(#\#){font-size:var(--xl-x1vzl7l6)}
694
709
.fontSize-x14tgbhz:is([data-empty-state-size='md'] *):not(#\#):not(#\#):not(#\#){font-size:var(--xl-x1vzl7l6)}
···
774
789
@media (prefers-reduced-motion: reduce){.animationName-x1aquc0h.animationName-x1aquc0h:not(#\#):not(#\#):not(#\#){animation-name:none}}
775
790
@media (min-width: 48rem){.fontSize-x1em9g14.fontSize-x1em9g14:not(#\#):not(#\#):not(#\#){font-size:var(--_4xl-x4z03mz)}}
776
791
@media (min-width: 48rem){.fontSize-xd8xfak.fontSize-xd8xfak:not(#\#):not(#\#):not(#\#){font-size:var(--_5xl-x17lnkj2)}}
792
+
@media (max-width: 640px){.gridTemplateColumns-x1gn2xqr.gridTemplateColumns-x1gn2xqr:not(#\#):not(#\#):not(#\#){grid-template-columns:auto 1fr auto}}
793
+
@media (max-width: 640px){.gridTemplateColumns-xce3zt2.gridTemplateColumns-xce3zt2:not(#\#):not(#\#):not(#\#){grid-template-columns:auto 1fr}}
777
794
@media (prefers-reduced-motion: reduce){.transitionProperty-x4wkmsb.transitionProperty-x4wkmsb:not(#\#):not(#\#):not(#\#){transition-property:none}}
778
795
@container (min-width: 400px){.display-x1b4ekcc.display-x1b4ekcc:not(#\#):not(#\#):not(#\#){display:flex}}
779
796
@container (min-width: 400px){.display-xr91lqn.display-xr91lqn:not(#\#):not(#\#):not(#\#){display:none}}
···
877
894
.maxHeight-x1oh82ff:not(#\#):not(#\#):not(#\#):not(#\#){max-height:calc(var(--visual-viewport-height) * .8)}
878
895
.maxWidth-x1mqrghp:not(#\#):not(#\#):not(#\#):not(#\#){max-width:100ch}
879
896
.minHeight-x2lwn1j:not(#\#):not(#\#):not(#\#):not(#\#){min-height:0}
897
+
.minHeight-xw9jm3k:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--_10-xyoqvup)}
880
898
.minHeight-x6uqey6:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--_12-xaxip2l)}
881
899
.minHeight-x1bgdama:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--_40-xlhyjhi)}
882
900
.minHeight-xlqy7cr:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--_7-x3ogwq2)}
···
891
909
.paddingBottom-xkcyk3g:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--_0_5-x1bnlq1y)}
892
910
.paddingBottom-x1o6k5y8:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--_1-x1plbop)}
893
911
.paddingBottom-x16qb4in:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--_12-xaxip2l)}
912
+
.paddingBottom-x1pczpb1:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--_2_5-xmuc480)}
894
913
.paddingBottom-x1o314:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--_2-xsow7ju)}
895
914
.paddingBottom-xbfpk89:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--_20-xbgtkw8)}
896
915
.paddingBottom-x1xi39lx:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--_3-x1a1riub)}
···
927
946
.paddingTop-x1n2t9di:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_1_5-x1llymyc)}
928
947
.paddingTop-xevm68z:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_1-x1plbop)}
929
948
.paddingTop-xks1qye:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_12-xaxip2l)}
949
+
.paddingTop-x1ny7jqn:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_2_5-xmuc480)}
930
950
.paddingTop-x1h4xhff:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_2-xsow7ju)}
931
951
.paddingTop-x104xgb4:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_20-xbgtkw8)}
932
952
.paddingTop-x1s6vlbb:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_3-x1a1riub)}
···
1011
1031
.borderBottomWidth-x1vqyp8j:is(:not(:last-child)) *:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0}
1012
1032
.borderBottomWidth-x7dc8i6:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0}
1013
1033
.borderBottomWidth-x1ed0nfq:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0}
1014
-
.borderBottomWidth-xyn800g:is([data-orientation=horizontal]):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:1px}
1015
1034
.borderBottomWidth-x1t94y08:is([data-direction=top]):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:1px}
1035
+
.borderBottomWidth-xyn800g:is([data-orientation=horizontal]):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:1px}
1016
1036
.borderBottomWidth-x1t21ho3:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:3px}
1017
1037
.borderLeftWidth-x8b28c3:not(:first-child):not(#\#):not(#\#):not(#\#):not(#\#){border-left-width:0}
1018
1038
.borderLeftWidth-x7e6zi8:is(:not(:first-child)) *:not(#\#):not(#\#):not(#\#):not(#\#){border-left-width:0}
···
1029
1049
.borderRightWidth-xgzzm7r:is(:not(:last-child)) *:not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:0}
1030
1050
.borderRightWidth-x13nsbtr:is([data-orientation=horizontal]):not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:0}
1031
1051
.borderRightWidth-x14zibg8:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:0}
1032
-
.borderRightWidth-xmzihwk:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:1px}
1033
1052
.borderRightWidth-xpx03pi:is([data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:1px}
1053
+
.borderRightWidth-xmzihwk:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:1px}
1034
1054
.borderRightWidth-x1n82x8c:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:3px}
1035
1055
.borderTopLeftRadius-x1jrxlk3:not(:first-child):not(#\#):not(#\#):not(#\#):not(#\#){border-top-left-radius:0}
1036
1056
.borderTopLeftRadius-x10dxjnd:is(:not(:first-child)) *:not(#\#):not(#\#):not(#\#):not(#\#){border-top-left-radius:0}
···
1044
1064
.borderTopWidth-xe4pvmi:is(:not(:first-child)) *:not(#\#):not(#\#):not(#\#):not(#\#){border-top-width:0}
1045
1065
.borderTopWidth-xk32l79:is([data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){border-top-width:1px}
1046
1066
.bottom-xkg4vtl:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{bottom:0}
1047
-
.bottom-x1s1o4wi:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1048
-
.bottom-x1w0y3cq:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1049
1067
.bottom-x1fk7w57:is([data-handle-orientation='horizontal'] *):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1050
1068
.bottom-x1tkpfsv:is([data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1051
1069
.bottom-x1ey2r4m:is([data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1052
1070
.bottom-xslbvph:is([data-direction=right]):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1071
+
.bottom-x1s1o4wi:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1072
+
.bottom-x1w0y3cq:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
1053
1073
.height-xmu6b7u:is(*) pre:not(#\#):not(#\#):not(#\#):not(#\#){height:100%}
1054
1074
.height-xfajk90:is([aria-orientation=vertical]):not(#\#):not(#\#):not(#\#):not(#\#){height:100%}
1055
1075
.height-x15y5qw9:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){height:100%}
···
1076
1096
.height-x1fju72f:is([data-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_3-x1a1riub)}
1077
1097
.height-x1nk0t4g:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_4-xgvn2um)}
1078
1098
.height-xzmxqe9:is([data-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_4-xgvn2um)}
1099
+
.height-xuqa3e1:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_5-x1pn3ufh)}
1100
+
.height-xuw6t6g:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)}
1079
1101
.height-x1f99l0e:is([data-focus-visible]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)}
1080
-
.height-xuw6t6g:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)}
1081
1102
.height-x1900l2r:is([data-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)}
1082
1103
.height-xflfpla:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_7-x3ogwq2)}
1083
1104
.height-x8h21d:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_7-x3ogwq2)}
···
1087
1108
.height-x1ym6ln2:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_9-x58vtwt)}
1088
1109
.height-xz9j5pl:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_9-x58vtwt)}
1089
1110
.left-x12bf3xg:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{left:0}
1090
-
.left-x1vbnr6c:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
1091
1111
.left-xu15ax8:is([data-handle-orientation='vertical'] *):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
1092
1112
.left-x15qd2tb:is([data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
1093
1113
.left-x1958hiq:is([data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
1094
1114
.left-xz1wair:is([data-direction=top]):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
1115
+
.left-x1vbnr6c:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){left:0}
1095
1116
.left-x13m0n2z:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{left:50%}
1096
1117
.left-x1ff65kx:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){left:50%}
1097
1118
.left-xhiwlwb:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){left:calc(attr(data-progress-start number) * 1%)}
···
1162
1183
.paddingTop-x1xm6zre:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_3-x1a1riub)}
1163
1184
.paddingTop-x1pdtiu9:is(*) pre:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_4-xgvn2um)}
1164
1185
.right-x8z6mx6:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{right:0}
1165
-
.right-x1pbrn0l:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1166
-
.right-xxlim67:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1167
1186
.right-xdsir5g:is([data-handle-orientation='vertical'] *):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1168
1187
.right-x1hu1b0q:is([data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1169
1188
.right-x1edtlyo:is([data-direction=right]):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1170
1189
.right-xp6x2dd:is([data-direction=top]):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1190
+
.right-x1pbrn0l:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1191
+
.right-xxlim67:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){right:0}
1171
1192
.top-x1v5ec6b:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:0}
1172
-
.top-xdod2xa:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
1173
1193
.top-xbwnylk:is([data-handle-orientation='horizontal'] *):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
1174
1194
.top-xi4gtk3:is([data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
1175
1195
.top-x1m4vouk:is([data-direction=right]):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
1176
1196
.top-xck6qwh:is([data-direction=top]):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
1197
+
.top-xdod2xa:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){top:0}
1177
1198
.top-xzpubj3:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:50%}
1178
1199
.top-xdpxmfp:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){top:50%}
1179
1200
.top-x7u6t2g:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){top:auto}
···
1200
1221
.width-x1f1f7ci:is([data-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_3-x1a1riub)}
1201
1222
.width-x9pq8ax:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_4-xgvn2um)}
1202
1223
.width-xx5h5ec:is([data-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_4-xgvn2um)}
1224
+
.width-x1gvteqg:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_5-x1pn3ufh)}
1203
1225
.width-x17jvw3h:is([data-focus-visible]):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_6-x109877l)}
1204
1226
.width-x9c0q0b:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_6-x109877l)}
1205
1227
.width-x10ou3qj:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_7-x3ogwq2)}
+2
packages/hip-ui/src/cli/install.tsx
+2
packages/hip-ui/src/cli/install.tsx
···
8
8
import path from "node:path";
9
9
import * as React from "react";
10
10
11
+
import { alertConfig } from "../components/alert/alert-config.js";
11
12
import { alertDialogConfig } from "../components/alert-dialog/alert-dialog-config.js";
12
13
import { aspectRatioConfig } from "../components/aspect-ratio/aspect-ratio-config.js";
13
14
import { avatarConfig } from "../components/avatar/avatar-config.js";
···
119
120
comboboxConfig,
120
121
treeConfig,
121
122
commandMenuConfig,
123
+
alertConfig,
122
124
alertDialogConfig,
123
125
dialogConfig,
124
126
disclosureConfig,
+20
packages/hip-ui/src/components/alert/alert-config.ts
+20
packages/hip-ui/src/components/alert/alert-config.ts
···
1
+
import { ComponentConfig } from "../../types";
2
+
3
+
export const alertConfig: ComponentConfig = {
4
+
name: "alert",
5
+
filepath: "./index.tsx",
6
+
hipDependencies: [
7
+
"../theme/spacing.stylex.tsx",
8
+
"../theme/radius.stylex.tsx",
9
+
"../theme/semantic-color.stylex.tsx",
10
+
"../theme/typography.stylex.tsx",
11
+
"../theme/types.ts",
12
+
"../context.ts",
13
+
"../icon-button/index.tsx",
14
+
],
15
+
dependencies: {
16
+
"react-aria-components": "^1.13.0",
17
+
"lucide-react": "^0.263.1",
18
+
},
19
+
};
20
+
+258
packages/hip-ui/src/components/alert/index.tsx
+258
packages/hip-ui/src/components/alert/index.tsx
···
1
+
"use client";
2
+
3
+
import * as stylex from "@stylexjs/stylex";
4
+
import {
5
+
AlertCircle,
6
+
CheckCircle2,
7
+
Info,
8
+
X,
9
+
AlertTriangle,
10
+
} from "lucide-react";
11
+
import { use } from "react";
12
+
13
+
import { SizeContext } from "../context";
14
+
import { IconButton } from "../icon-button";
15
+
import { radius } from "../theme/radius.stylex";
16
+
import {
17
+
critical,
18
+
primary,
19
+
success,
20
+
warning,
21
+
} from "../theme/semantic-color.stylex";
22
+
import { spacing } from "../theme/spacing.stylex";
23
+
import { Size, StyleXComponentProps } from "../theme/types";
24
+
import { fontFamily } from "../theme/typography.stylex";
25
+
import { Text } from "../typography/text";
26
+
27
+
const styles = stylex.create({
28
+
alert: {
29
+
// eslint-disable-next-line @stylexjs/valid-styles
30
+
cornerShape: "squircle",
31
+
borderRadius: {
32
+
default: radius["lg"],
33
+
"@supports (corner-shape: squircle)": radius["3xl"],
34
+
},
35
+
borderStyle: "solid",
36
+
borderWidth: 1,
37
+
gap: spacing["2.5"],
38
+
gridTemplateAreas: {
39
+
default: "'icon content'",
40
+
"@media (max-width: 640px)": "'icon content'",
41
+
},
42
+
alignItems: "center",
43
+
boxSizing: "border-box",
44
+
display: "grid",
45
+
fontFamily: fontFamily["sans"],
46
+
gridTemplateColumns: {
47
+
default: "auto 1fr",
48
+
"@media (max-width: 640px)": "auto 1fr",
49
+
},
50
+
position: "relative",
51
+
minHeight: spacing["10"],
52
+
paddingBottom: spacing["2.5"],
53
+
paddingLeft: spacing["4"],
54
+
paddingRight: spacing["4"],
55
+
paddingTop: spacing["2.5"],
56
+
},
57
+
alertWithDescription: {
58
+
alignItems: "flex-start",
59
+
paddingBottom: spacing["4"],
60
+
paddingRight: spacing["3"],
61
+
paddingTop: spacing["4"],
62
+
},
63
+
alertWithClose: {
64
+
gridTemplateAreas: {
65
+
default: "'icon content close'",
66
+
"@media (max-width: 640px)": "'icon content close'",
67
+
},
68
+
gridTemplateColumns: {
69
+
default: "auto 1fr auto",
70
+
"@media (max-width: 640px)": "auto 1fr auto",
71
+
},
72
+
paddingRight: spacing["2"],
73
+
},
74
+
alertWithAction: {
75
+
gridTemplateAreas: {
76
+
default: "'icon content action'",
77
+
"@media (max-width: 640px)": "'icon content' 'action action action'",
78
+
},
79
+
gridTemplateColumns: {
80
+
default: "auto 1fr auto",
81
+
"@media (max-width: 640px)": "auto 1fr",
82
+
},
83
+
paddingRight: spacing["2"],
84
+
},
85
+
alertWithActionAndClose: {
86
+
gridTemplateAreas: {
87
+
default: "'icon content action close'",
88
+
"@media (max-width: 640px)":
89
+
"'icon content close' 'action action action'",
90
+
},
91
+
gridTemplateColumns: {
92
+
default: "auto 1fr auto auto",
93
+
"@media (max-width: 640px)": "auto 1fr auto",
94
+
},
95
+
paddingRight: spacing["2"],
96
+
},
97
+
content: {
98
+
gridArea: "content",
99
+
gap: spacing["1"],
100
+
display: "flex",
101
+
flexDirection: "column",
102
+
},
103
+
icon: {
104
+
gridArea: "icon",
105
+
alignItems: "center",
106
+
display: "flex",
107
+
flexShrink: 0,
108
+
justifyContent: "center",
109
+
pointerEvents: "none",
110
+
111
+
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
112
+
":is(*) svg": {
113
+
flexShrink: 0,
114
+
pointerEvents: "none",
115
+
height: spacing["5"],
116
+
width: spacing["5"],
117
+
},
118
+
},
119
+
action: {
120
+
gridArea: "action",
121
+
gap: spacing["2"],
122
+
alignItems: "center",
123
+
alignSelf: "center",
124
+
display: "flex",
125
+
flexShrink: 0,
126
+
},
127
+
closeButton: {
128
+
gridArea: "close",
129
+
flexShrink: 0,
130
+
marginBottom: `calc(${spacing["1"]} * -1)`,
131
+
marginTop: `calc(${spacing["1"]} * -1)`,
132
+
},
133
+
actionAndClose: {
134
+
alignSelf: "center",
135
+
},
136
+
});
137
+
138
+
export type AlertVariant = "info" | "success" | "warning" | "critical";
139
+
140
+
export interface AlertProps
141
+
extends Omit<StyleXComponentProps<React.ComponentProps<"div">>, "title"> {
142
+
/**
143
+
* The variant of the alert.
144
+
* @default "info"
145
+
*/
146
+
variant?: AlertVariant;
147
+
/**
148
+
* The size of the alert.
149
+
*/
150
+
size?: Size;
151
+
/**
152
+
* The title of the alert.
153
+
*/
154
+
title?: React.ReactNode;
155
+
/**
156
+
* The description or content of the alert.
157
+
*/
158
+
children?: React.ReactNode;
159
+
/**
160
+
* Action elements to display in the alert (e.g., buttons).
161
+
*/
162
+
action?: React.ReactNode;
163
+
/**
164
+
* Callback fired when the alert is dismissed. If provided, a close button will be displayed.
165
+
*/
166
+
onDismiss?: () => void;
167
+
/**
168
+
* Custom icon to display. If not provided, a default icon will be used based on the variant.
169
+
*/
170
+
icon?: React.ReactNode;
171
+
}
172
+
173
+
const defaultIcons: Record<AlertVariant, React.ReactNode> = {
174
+
info: <Info />,
175
+
success: <CheckCircle2 />,
176
+
warning: <AlertTriangle />,
177
+
critical: <AlertCircle />,
178
+
};
179
+
180
+
export const Alert = ({
181
+
variant = "info",
182
+
size: sizeProp,
183
+
title,
184
+
children,
185
+
action,
186
+
onDismiss,
187
+
icon,
188
+
style,
189
+
...props
190
+
}: AlertProps) => {
191
+
const size = sizeProp ?? use(SizeContext);
192
+
193
+
const defaultIcon = defaultIcons[variant];
194
+
const displayIcon = icon === undefined ? defaultIcon : icon;
195
+
const hasAction = action != null;
196
+
const hasCloseButton = onDismiss != null;
197
+
198
+
return (
199
+
<div
200
+
role="alert"
201
+
data-variant={variant}
202
+
data-size={size}
203
+
{...stylex.props(
204
+
styles.alert,
205
+
!hasAction && hasCloseButton && styles.alertWithClose,
206
+
hasAction && hasCloseButton && styles.alertWithActionAndClose,
207
+
hasAction && !hasCloseButton && styles.alertWithAction,
208
+
children != null && styles.alertWithDescription,
209
+
variant === "info" && [primary.bgDim, primary.borderDim, primary.text],
210
+
variant === "success" && [
211
+
success.bgDim,
212
+
success.borderDim,
213
+
success.text,
214
+
],
215
+
variant === "warning" && [
216
+
warning.bgDim,
217
+
warning.borderDim,
218
+
warning.text,
219
+
],
220
+
variant === "critical" && [
221
+
critical.bgDim,
222
+
critical.borderDim,
223
+
critical.text,
224
+
],
225
+
style,
226
+
)}
227
+
{...props}
228
+
>
229
+
{displayIcon != null && (
230
+
<div {...stylex.props(styles.icon)}>{displayIcon}</div>
231
+
)}
232
+
<div {...stylex.props(styles.content)}>
233
+
{title != null && (
234
+
<Text size="base" weight="semibold">
235
+
{title}
236
+
</Text>
237
+
)}
238
+
{children != null && (
239
+
<Text size="sm" variant="secondary" data-alert-description>
240
+
{children}
241
+
</Text>
242
+
)}
243
+
</div>
244
+
{hasAction && <div {...stylex.props(styles.action)}>{action}</div>}
245
+
{hasCloseButton && (
246
+
<IconButton
247
+
aria-label="Dismiss alert"
248
+
size={size}
249
+
variant="tertiary"
250
+
onPress={onDismiss}
251
+
style={[styles.closeButton, hasAction && styles.actionAndClose]}
252
+
>
253
+
<X />
254
+
</IconButton>
255
+
)}
256
+
</div>
257
+
);
258
+
};