@amsterdamdatalabs/enact-design-system 0.1.7 → 0.1.10
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/README.md +168 -0
- package/dist/components/overlay/Modal/Modal.d.ts +17 -0
- package/dist/components/overlay/Modal/index.d.ts +1 -0
- package/dist/components/system/ThemeProvider/index.d.ts +1 -0
- package/dist/components/system/ThemeProvider/themeInitScript.d.ts +37 -0
- package/dist/enact-design-system.css +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +808 -688
- package/dist/tokens.css +14 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -49,6 +49,8 @@ the showcase afterwards.
|
|
|
49
49
|
|
|
50
50
|
## Usage in a product app
|
|
51
51
|
|
|
52
|
+
Import styles first, then components — all from the single public entry point:
|
|
53
|
+
|
|
52
54
|
```tsx
|
|
53
55
|
import "@amsterdamdatalabs/enact-design-system/tokens.css"; // design tokens (incl. dark mode)
|
|
54
56
|
import "@amsterdamdatalabs/enact-design-system/styles.css"; // component styles
|
|
@@ -66,6 +68,172 @@ export function Example() {
|
|
|
66
68
|
|
|
67
69
|
Dark mode: set `data-theme="dark"` on `<html>` (or any subtree root).
|
|
68
70
|
|
|
71
|
+
## ThemeProvider and useTheme
|
|
72
|
+
|
|
73
|
+
Wrap your application root with `ThemeProvider` to enable theme switching.
|
|
74
|
+
`useTheme` surfaces the current theme and a setter anywhere in the tree.
|
|
75
|
+
|
|
76
|
+
```tsx
|
|
77
|
+
import {
|
|
78
|
+
ThemeProvider,
|
|
79
|
+
useTheme,
|
|
80
|
+
} from "@amsterdamdatalabs/enact-design-system";
|
|
81
|
+
|
|
82
|
+
// 1. Wrap the app root
|
|
83
|
+
export function App() {
|
|
84
|
+
return (
|
|
85
|
+
<ThemeProvider defaultTheme="system">
|
|
86
|
+
<Shell />
|
|
87
|
+
</ThemeProvider>
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
// 2. Read and change the theme from any descendant
|
|
92
|
+
function ThemeToggle() {
|
|
93
|
+
const { theme, resolvedTheme, setTheme } = useTheme();
|
|
94
|
+
|
|
95
|
+
return (
|
|
96
|
+
<button
|
|
97
|
+
type="button"
|
|
98
|
+
onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
|
|
99
|
+
>
|
|
100
|
+
Switch to {resolvedTheme === "dark" ? "light" : "dark"} mode
|
|
101
|
+
</button>
|
|
102
|
+
);
|
|
103
|
+
}
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
`ThemeProvider` persists the user's choice to `localStorage` under the key
|
|
107
|
+
`"enact-theme"` (configurable via the `storageKey` prop). The resolved theme
|
|
108
|
+
(`"light"` or `"dark"`) is derived from the user's explicit choice or from
|
|
109
|
+
`window.matchMedia("(prefers-color-scheme: dark)")` when the theme is `"system"`.
|
|
110
|
+
|
|
111
|
+
### Preventing theme flash on first paint
|
|
112
|
+
|
|
113
|
+
Without extra work the page renders in the default (light) state for one frame
|
|
114
|
+
while React hydrates — producing a visible flash when the user prefers dark.
|
|
115
|
+
Inline `themeInitScript` in `<head>` **before** your app bundle to apply the
|
|
116
|
+
correct `data-theme` attribute at browser-parse time, before any paint:
|
|
117
|
+
|
|
118
|
+
```tsx
|
|
119
|
+
import {
|
|
120
|
+
themeInitScript,
|
|
121
|
+
} from "@amsterdamdatalabs/enact-design-system";
|
|
122
|
+
|
|
123
|
+
// In your HTML template, _document.tsx, or root layout:
|
|
124
|
+
export function Document() {
|
|
125
|
+
return (
|
|
126
|
+
<html lang="en">
|
|
127
|
+
<head>
|
|
128
|
+
{/* Must come before the app bundle — runs at parse time, before paint. */}
|
|
129
|
+
<script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
|
|
130
|
+
{/* ...other head tags, then the app bundle */}
|
|
131
|
+
</head>
|
|
132
|
+
<body>...</body>
|
|
133
|
+
</html>
|
|
134
|
+
);
|
|
135
|
+
}
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
If your app uses a non-default storage key, use `getThemeInitScript` to
|
|
139
|
+
produce a matching script:
|
|
140
|
+
|
|
141
|
+
```tsx
|
|
142
|
+
import {
|
|
143
|
+
getThemeInitScript,
|
|
144
|
+
} from "@amsterdamdatalabs/enact-design-system";
|
|
145
|
+
|
|
146
|
+
const script = getThemeInitScript("my-app-theme");
|
|
147
|
+
|
|
148
|
+
// Pass the same key to ThemeProvider:
|
|
149
|
+
// <ThemeProvider storageKey="my-app-theme">...</ThemeProvider>
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
The script is a self-contained IIFE:
|
|
153
|
+
- reads `localStorage[storageKey]`
|
|
154
|
+
- `"dark"` → sets `data-theme="dark"` on `<html>`
|
|
155
|
+
- `"light"` → ensures `data-theme` is absent
|
|
156
|
+
- `"system"` or missing → falls back to `window.matchMedia("(prefers-color-scheme: dark)")`
|
|
157
|
+
- wrapped in `try/catch` so storage or matchMedia failures are inert
|
|
158
|
+
|
|
159
|
+
Keying is identical to `ThemeProvider` so there is no conflict on hydration.
|
|
160
|
+
|
|
161
|
+
## Layout primitives
|
|
162
|
+
|
|
163
|
+
Five composable, token-based layout components handle spacing, alignment, and
|
|
164
|
+
grid structure. All accept standard HTML `div` attributes in addition to the
|
|
165
|
+
props below.
|
|
166
|
+
|
|
167
|
+
```tsx
|
|
168
|
+
import {
|
|
169
|
+
Box,
|
|
170
|
+
Container,
|
|
171
|
+
Grid,
|
|
172
|
+
Inline,
|
|
173
|
+
Stack,
|
|
174
|
+
} from "@amsterdamdatalabs/enact-design-system";
|
|
175
|
+
|
|
176
|
+
// Box — single block with optional padding, surface tint, and radius
|
|
177
|
+
<Box padding="4" surface="raised" radius="md">
|
|
178
|
+
content
|
|
179
|
+
</Box>
|
|
180
|
+
|
|
181
|
+
// Stack — vertical flex container
|
|
182
|
+
<Stack gap="4" align="center">
|
|
183
|
+
<div>Item A</div>
|
|
184
|
+
<div>Item B</div>
|
|
185
|
+
</Stack>
|
|
186
|
+
|
|
187
|
+
// Inline — horizontal flex container
|
|
188
|
+
<Inline gap="2">
|
|
189
|
+
<Button variant="primary">Save</Button>
|
|
190
|
+
<Button variant="ghost">Cancel</Button>
|
|
191
|
+
</Inline>
|
|
192
|
+
|
|
193
|
+
// Grid — CSS grid with a named column count
|
|
194
|
+
<Grid columns={3} gap="6">
|
|
195
|
+
<Card>One</Card>
|
|
196
|
+
<Card>Two</Card>
|
|
197
|
+
<Card>Three</Card>
|
|
198
|
+
</Grid>
|
|
199
|
+
|
|
200
|
+
// Container — centred, max-width wrapper
|
|
201
|
+
<Container width="narrow">
|
|
202
|
+
<Stack gap="4">...</Stack>
|
|
203
|
+
</Container>
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
## Typography
|
|
207
|
+
|
|
208
|
+
`Heading` and `Text` map directly to the system's type scale.
|
|
209
|
+
|
|
210
|
+
```tsx
|
|
211
|
+
import {
|
|
212
|
+
Heading,
|
|
213
|
+
Text,
|
|
214
|
+
} from "@amsterdamdatalabs/enact-design-system";
|
|
215
|
+
|
|
216
|
+
// Heading — semantic element + visual size, decoupled for accessibility
|
|
217
|
+
<Heading level={1} size="xl">Page title</Heading>
|
|
218
|
+
<Heading level={2} size="md">Section title</Heading>
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
**Accessibility note — `level` vs `size`:**
|
|
222
|
+
`level` controls the rendered HTML tag (`h1`–`h6`) and therefore the document
|
|
223
|
+
outline used by screen readers. `size` is a purely visual override — you can
|
|
224
|
+
render an `h2` that looks like an `h4` (or vice versa) without affecting
|
|
225
|
+
semantics. Always set `level` to match the document hierarchy; use `size` only
|
|
226
|
+
to meet visual design requirements.
|
|
227
|
+
|
|
228
|
+
```tsx
|
|
229
|
+
// Text — inline/block body copy
|
|
230
|
+
<Text size="sm" tone="secondary">Last updated 3 days ago</Text>
|
|
231
|
+
<Text size="md" tone="primary">Main body copy</Text>
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
Available sizes for both: `"xs"` `"sm"` `"md"` `"lg"` `"xl"` `"2xl"`.
|
|
235
|
+
Available tones: `"primary"` `"secondary"` `"muted"` `"inverse"` `"link"`.
|
|
236
|
+
|
|
69
237
|
## Components (17)
|
|
70
238
|
|
|
71
239
|
| Group | Components |
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { type HTMLAttributes, type ReactNode, type Ref } from "react";
|
|
2
|
+
export interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
|
|
3
|
+
children: ReactNode;
|
|
4
|
+
/** Close when the backdrop (not the panel) is clicked. Defaults to true. */
|
|
5
|
+
closeOnBackdrop?: boolean;
|
|
6
|
+
/** Called on Escape, backdrop click (when allowed), or any dismissal. */
|
|
7
|
+
onClose: () => void;
|
|
8
|
+
/** Whether the modal is open. Renders nothing when false. */
|
|
9
|
+
open: boolean;
|
|
10
|
+
/** Ref to the dialog PANEL element. */
|
|
11
|
+
ref?: Ref<HTMLDivElement>;
|
|
12
|
+
/** Panel max-width preset. */
|
|
13
|
+
size?: "sm" | "md" | "lg";
|
|
14
|
+
/** Optional heading; when set, wires `aria-labelledby` to its element. */
|
|
15
|
+
title?: ReactNode;
|
|
16
|
+
}
|
|
17
|
+
export declare function Modal({ open, onClose, title, size, closeOnBackdrop, className, children, ref, ...rest }: ModalProps): import("react").ReactPortal | null;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Modal, type ModalProps } from "./Modal";
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* No-flash theme initialisation script.
|
|
3
|
+
*
|
|
4
|
+
* `themeInitScript` is a string containing a self-contained IIFE that can be
|
|
5
|
+
* inlined in `<head>` **before** the app bundle. When the browser executes it
|
|
6
|
+
* prior to first paint it sets (or removes) `data-theme="dark"` on
|
|
7
|
+
* `document.documentElement` so the page renders in the correct theme without a
|
|
8
|
+
* light-flash followed by a dark switch.
|
|
9
|
+
*
|
|
10
|
+
* Keying is identical to ThemeProvider:
|
|
11
|
+
* dark → `data-theme="dark"` on `<html>`
|
|
12
|
+
* light → attribute ABSENT on `<html>`
|
|
13
|
+
* system (or missing / unknown) → resolved via matchMedia
|
|
14
|
+
*
|
|
15
|
+
* The module is dependency-free and SSR-inert — importing it executes nothing.
|
|
16
|
+
* The IIFE only runs when the consumer inlines the string.
|
|
17
|
+
*/
|
|
18
|
+
/**
|
|
19
|
+
* Build the no-flash IIFE string for a given storage key.
|
|
20
|
+
*
|
|
21
|
+
* @param storageKey localStorage key to read the persisted theme from.
|
|
22
|
+
* Must match the `storageKey` prop passed to `<ThemeProvider>`.
|
|
23
|
+
*/
|
|
24
|
+
export declare function getThemeInitScript(storageKey?: string): string;
|
|
25
|
+
/**
|
|
26
|
+
* Pre-built no-flash script string using the default storage key (`"enact-theme"`).
|
|
27
|
+
*
|
|
28
|
+
* Inline this in a `<script>` tag in `<head>` before your app bundle:
|
|
29
|
+
*
|
|
30
|
+
* ```tsx
|
|
31
|
+
* import { themeInitScript } from "@enact/design-system";
|
|
32
|
+
*
|
|
33
|
+
* // In your HTML template / _document.tsx / root layout:
|
|
34
|
+
* <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
|
|
35
|
+
* ```
|
|
36
|
+
*/
|
|
37
|
+
export declare const themeInitScript: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._avatar_yqge8_1{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;font-family:var(--font-display);font-weight:var(--weight-semibold);color:var(--adl-teal-800);background:var(--adl-teal-100);border-radius:var(--radius-full)}._hasImage_yqge8_15{background:var(--bg-muted)}._img_yqge8_19{width:100%;height:100%;object-fit:cover}._sm_yqge8_26{width:28px;height:28px;font-size:11px}._md_yqge8_31{width:36px;height:36px;font-size:14px}._lg_yqge8_36{width:48px;height:48px;font-size:18px}._xl_yqge8_41{width:64px;height:64px;font-size:24px}._badge_1ndhf_1{display:inline-flex;gap:var(--space-1-5);align-items:center;height:22px;padding:0 var(--space-2);font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);line-height:1;white-space:nowrap;border-radius:var(--radius-xs)}._dot_1ndhf_15{width:6px;height:6px;background:currentColor;border-radius:var(--radius-full)}._neutral_1ndhf_23{color:var(--text-secondary);background:var(--bg-muted)}._brand_1ndhf_27{color:var(--tint-brand-fg);background:var(--brand-primary-subtle)}._info_1ndhf_31{color:var(--tint-info-fg);background:var(--feedback-info-subtle)}._success_1ndhf_35{color:var(--tint-success-fg);background:var(--feedback-success-subtle)}._warning_1ndhf_39{color:var(--tint-warning-fg);background:var(--feedback-warning-subtle)}._danger_1ndhf_43{color:var(--tint-danger-fg);background:var(--feedback-danger-subtle)}._btn_1m6dq_1{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-body);font-weight:var(--weight-semibold);line-height:1;white-space:nowrap;cursor:pointer;border:1px solid transparent;border-radius:var(--radius-sm);transition:background var(--duration-fast) var(--ease-out)}._btn_1m6dq_1:disabled{cursor:not-allowed;opacity:.45}._fullWidth_1m6dq_20{display:flex;width:100%}._sm_1m6dq_26{gap:var(--space-1-5);height:32px;padding:0 var(--space-3);font-size:var(--text-xs)}._md_1m6dq_32{gap:var(--space-2);height:40px;padding:0 var(--space-4);font-size:var(--text-sm)}._lg_1m6dq_38{gap:var(--space-2-5);height:48px;padding:0 var(--space-6);font-size:var(--text-md)}._primary_1m6dq_46{color:var(--text-on-brand);background:var(--brand-primary)}._primary_1m6dq_46:hover:not(:disabled){background:var(--brand-primary-hover)}._primary_1m6dq_46:active:not(:disabled){background:var(--brand-primary-active)}._secondary_1m6dq_57{color:var(--text-primary);background:var(--surface-default);border-color:var(--border-strong)}._secondary_1m6dq_57:hover:not(:disabled){background:var(--bg-subtle)}._secondary_1m6dq_57:active:not(:disabled){background:var(--bg-muted)}._ghost_1m6dq_71{color:var(--text-secondary);background:transparent}._ghost_1m6dq_71:hover:not(:disabled){background:var(--bg-subtle)}._ghost_1m6dq_71:active:not(:disabled){background:var(--bg-muted)}._danger_1m6dq_82{color:var(--text-inverse);background:var(--feedback-danger)}._danger_1m6dq_82:hover:not(:disabled){background:var(--adl-red-600)}._danger_1m6dq_82:active:not(:disabled){background:var(--adl-red-700)}._card_1tzae_1{border-radius:var(--radius-md);transition:box-shadow var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out)}._padNone_1tzae_9{padding:0}._padSm_1tzae_12{padding:var(--space-4)}._padMd_1tzae_15{padding:var(--space-6)}._padLg_1tzae_18{padding:var(--space-8)}._default_1tzae_23{background:var(--surface-default);border:1px solid var(--border-subtle);box-shadow:var(--shadow-xs)}._raised_1tzae_28{background:var(--surface-default);border:1px solid var(--border-subtle);box-shadow:var(--shadow-md)}._sunken_1tzae_33{background:var(--surface-sunken);border:1px solid var(--border-subtle);box-shadow:none}._inverse_1tzae_38{--text-primary: var(--adl-neutral-50);--text-secondary: var(--adl-blue-200);--text-muted: var(--adl-navy-300);color:var(--text-primary);background:var(--adl-navy-900);border:1px solid var(--adl-navy-700);box-shadow:var(--shadow-sm)}._interactive_1tzae_49{cursor:pointer}._interactive_1tzae_49:hover{border-color:var(--border-default);box-shadow:var(--shadow-md)}._btn_2g73d_1{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;border-radius:var(--radius-sm);transition:background var(--duration-fast) var(--ease-out)}._btn_2g73d_1:disabled{cursor:not-allowed;opacity:.45}._sm_2g73d_17{width:28px;height:28px}._md_2g73d_21{width:36px;height:36px}._lg_2g73d_25{width:44px;height:44px}._ghost_2g73d_31{color:var(--text-secondary);background:transparent}._ghost_2g73d_31:hover:not(:disabled){background:var(--bg-subtle)}._outline_2g73d_39{color:var(--text-secondary);background:var(--surface-default);border-color:var(--border-strong)}._outline_2g73d_39:hover:not(:disabled){background:var(--bg-subtle)}._primary_2g73d_48{color:var(--text-on-brand);background:var(--brand-primary)}._primary_2g73d_48:hover:not(:disabled){background:var(--brand-primary-hover)}._stat_1uc8c_1{display:flex;flex-direction:column;gap:var(--space-1)}._label_1uc8c_7{font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-muted);text-transform:uppercase;letter-spacing:var(--tracking-wide)}._valueRow_1uc8c_16{display:flex;gap:var(--space-2);align-items:baseline}._value_1uc8c_16{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-bold);line-height:var(--leading-tight);color:var(--text-primary);letter-spacing:var(--tracking-tight)}._delta_1uc8c_31{display:inline-flex;gap:3px;align-items:center;font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold)}._deltaUp_1uc8c_40{color:var(--feedback-success)}._deltaDown_1uc8c_43{color:var(--feedback-danger)}._deltaFlat_1uc8c_46{color:var(--text-muted)}._flip_1uc8c_50{transform:scaleY(-1)}._caption_1uc8c_54{font-size:var(--text-xs);color:var(--text-muted)}._tag_11jaq_1{display:inline-flex;gap:var(--space-1-5);align-items:center;height:26px;padding:0 var(--space-2-5);font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-medium);line-height:1;color:var(--text-secondary);white-space:nowrap;background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-full)}._remove_11jaq_18{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;line-height:1;color:inherit;cursor:pointer;background:transparent;border:none;border-radius:var(--radius-full)}._remove_11jaq_18:hover{background:var(--bg-muted)}._alert_1217n_1{display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-4);font-family:var(--font-body);font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--alert-fg);background:var(--alert-bg);border:1px solid;border-color:color-mix(in srgb,var(--alert-border) 40%,transparent);border-radius:var(--radius-sm)}._icon_1217n_16{flex-shrink:0;margin-top:1px;color:var(--alert-border)}._body_1217n_22{flex:1}._title_1217n_26{font-weight:var(--weight-bold)}._titleSpaced_1217n_29{margin-bottom:2px}._dismiss_1217n_33{display:inline-flex;align-items:center;height:20px;padding:2px;color:inherit;cursor:pointer;background:transparent;border:none}._info_1217n_45{--alert-border: var(--feedback-info);--alert-bg: var(--feedback-info-subtle);--alert-fg: var(--tint-info-fg)}._success_1217n_50{--alert-border: var(--feedback-success);--alert-bg: var(--feedback-success-subtle);--alert-fg: var(--tint-success-fg)}._warning_1217n_55{--alert-border: var(--feedback-warning);--alert-bg: var(--feedback-warning-subtle);--alert-fg: var(--tint-warning-fg)}._danger_1217n_60{--alert-border: var(--feedback-danger);--alert-bg: var(--feedback-danger-subtle);--alert-fg: var(--tint-danger-fg)}._progress_tptlj_1{display:flex;flex-direction:column;gap:var(--space-1-5)}._header_tptlj_7{display:flex;justify-content:space-between;font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--text-secondary)}._percent_tptlj_16{font-family:var(--font-mono)}._track_tptlj_20{height:6px;overflow:hidden;background:var(--bg-muted);border-radius:var(--radius-full)}._fill_tptlj_27{height:100%;border-radius:var(--radius-full);transition:width var(--duration-slow) var(--ease-out)}._brand_tptlj_34{background:var(--brand-primary)}._success_tptlj_37{background:var(--feedback-success)}._warning_tptlj_40{background:var(--feedback-warning)}._danger_tptlj_43{background:var(--feedback-danger)}._accent_tptlj_46{background:var(--brand-accent)}._wrap_82rh0_1{position:relative;display:inline-flex}._tip_82rh0_6{position:absolute;z-index:var(--z-tooltip);visibility:hidden;padding:6px 10px;font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-medium);line-height:1.4;color:var(--text-inverse);white-space:nowrap;pointer-events:none;background:var(--bg-inverse);border-radius:var(--radius-xs);box-shadow:var(--shadow-md);opacity:0;transition:opacity var(--duration-fast) var(--ease-out),visibility var(--duration-fast) var(--ease-out)}._wrap_82rh0_1:hover ._tip_82rh0_6,._wrap_82rh0_1:focus-within ._tip_82rh0_6{visibility:visible;opacity:1}._top_82rh0_34{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}._bottom_82rh0_39{top:calc(100% + 8px);left:50%;transform:translate(-50%)}._left_82rh0_44{top:50%;right:calc(100% + 8px);transform:translateY(-50%)}._right_82rh0_49{top:50%;left:calc(100% + 8px);transform:translateY(-50%)}._root_1t9ke_1{display:inline-flex;gap:var(--space-2);align-items:center;font-family:var(--font-body);font-size:var(--text-sm);color:var(--text-primary);cursor:pointer;-webkit-user-select:none;user-select:none}._disabled_1t9ke_12{cursor:not-allowed;opacity:.45}._input_1t9ke_18{position:absolute;width:0;height:0;opacity:0}._box_1t9ke_25{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:18px;height:18px;background:var(--surface-default);border:1px solid var(--border-strong);border-radius:var(--radius-xs);transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}._checked_1t9ke_40{background:var(--brand-primary);border-color:var(--brand-primary)}._input_1t9ke_18:focus-visible+._box_1t9ke_25{box-shadow:var(--shadow-focus)}._field_1d54c_1{display:flex;flex-direction:column;gap:var(--space-1-5)}._label_1d54c_7{font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary)}._required_1d54c_14{color:var(--feedback-danger)}._error_1d54c_18{font-size:var(--text-xs);color:var(--feedback-danger)}._hint_1d54c_23{font-size:var(--text-xs);color:var(--text-muted)}._input_nhfx3_1{box-sizing:border-box;width:100%;padding:0 var(--space-3);font-family:var(--font-body);color:var(--text-primary);outline:none;background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-sm);transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}._input_nhfx3_1::placeholder{color:var(--text-muted)}._input_nhfx3_1:focus{border-color:var(--border-focus);box-shadow:var(--shadow-focus)}._input_nhfx3_1:disabled{cursor:not-allowed;background:var(--bg-muted);opacity:.6}._invalid_nhfx3_31,._invalid_nhfx3_31:focus{border-color:var(--feedback-danger)}._sm_nhfx3_37{height:32px;font-size:var(--text-xs)}._md_nhfx3_41{height:40px;font-size:var(--text-sm)}._lg_nhfx3_45{height:48px;font-size:var(--text-sm)}._wrap_1nxaj_1{position:relative;display:inline-flex;width:100%}._select_1nxaj_7{box-sizing:border-box;width:100%;padding:0 var(--space-8) 0 var(--space-3);font-family:var(--font-body);color:var(--text-primary);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;outline:none;background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-sm);transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}._select_1nxaj_7:focus{border-color:var(--border-focus);box-shadow:var(--shadow-focus)}._select_1nxaj_7:disabled{cursor:not-allowed;background:var(--bg-muted);opacity:.6}._invalid_1nxaj_36,._invalid_1nxaj_36:focus{border-color:var(--feedback-danger)}._chevron_1nxaj_41{position:absolute;top:50%;right:10px;color:var(--text-muted);pointer-events:none;transform:translateY(-50%)}._sm_1nxaj_51{height:32px;font-size:var(--text-xs)}._md_1nxaj_55{height:40px;font-size:var(--text-sm)}._lg_1nxaj_59{height:48px;font-size:var(--text-sm)}._root_ctdye_1{display:inline-flex;gap:var(--space-2);align-items:center;font-family:var(--font-body);font-size:var(--text-sm);color:var(--text-primary);cursor:pointer;-webkit-user-select:none;user-select:none}._disabled_ctdye_12{cursor:not-allowed;opacity:.45}._input_ctdye_17{position:absolute;width:0;height:0;opacity:0}._track_ctdye_24{position:relative;flex-shrink:0;width:36px;height:20px;background:var(--adl-neutral-300);border-radius:var(--radius-full);transition:background var(--duration-base) var(--ease-out)}._on_ctdye_34{background:var(--brand-primary)}._knob_ctdye_38{position:absolute;top:2px;left:2px;width:16px;height:16px;background:var(--adl-neutral-0);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);transition:left var(--duration-base) var(--ease-out)}._on_ctdye_34 ._knob_ctdye_38{left:18px}._input_ctdye_17:focus-visible+._track_ctdye_24{box-shadow:var(--shadow-focus)}._box_1akfw_1{box-sizing:border-box}._pad0_1akfw_6{padding:var(--space-0)}._pad1_1akfw_9{padding:var(--space-1)}._pad2_1akfw_12{padding:var(--space-2)}._pad3_1akfw_15{padding:var(--space-3)}._pad4_1akfw_18{padding:var(--space-4)}._pad5_1akfw_21{padding:var(--space-5)}._pad6_1akfw_24{padding:var(--space-6)}._pad8_1akfw_27{padding:var(--space-8)}._pad10_1akfw_30{padding:var(--space-10)}._pad12_1akfw_33{padding:var(--space-12)}._pad16_1akfw_36{padding:var(--space-16)}._radiusNone_1akfw_41{border-radius:0}._radiusXs_1akfw_44{border-radius:var(--radius-xs)}._radiusSm_1akfw_47{border-radius:var(--radius-sm)}._radiusMd_1akfw_50{border-radius:var(--radius-md)}._radiusLg_1akfw_53{border-radius:var(--radius-lg)}._radiusXl_1akfw_56{border-radius:var(--radius-xl)}._radiusFull_1akfw_59{border-radius:var(--radius-full)}._surfaceDefault_1akfw_64{background:var(--surface-default)}._surfaceRaised_1akfw_67{background:var(--surface-raised)}._surfaceSunken_1akfw_70{background:var(--surface-sunken)}._border_1akfw_75{border:1px solid var(--border-default)}._container_opidm_1{box-sizing:border-box;width:100%;margin-inline:auto}._widthMax_opidm_8{max-width:var(--container-max)}._widthNarrow_opidm_11{max-width:var(--container-narrow)}._gutter0_opidm_16{padding-inline:var(--space-0)}._gutter1_opidm_19{padding-inline:var(--space-1)}._gutter2_opidm_22{padding-inline:var(--space-2)}._gutter3_opidm_25{padding-inline:var(--space-3)}._gutter4_opidm_28{padding-inline:var(--space-4)}._gutter5_opidm_31{padding-inline:var(--space-5)}._gutter6_opidm_34{padding-inline:var(--space-6)}._gutter8_opidm_37{padding-inline:var(--space-8)}._gutter10_opidm_40{padding-inline:var(--space-10)}._gutter12_opidm_43{padding-inline:var(--space-12)}._gutter16_opidm_46{padding-inline:var(--space-16)}._grid_ahbs8_1{display:grid}._cols1_ahbs8_6{grid-template-columns:repeat(1,minmax(0,1fr))}._cols2_ahbs8_9{grid-template-columns:repeat(2,minmax(0,1fr))}._cols3_ahbs8_12{grid-template-columns:repeat(3,minmax(0,1fr))}._cols4_ahbs8_15{grid-template-columns:repeat(4,minmax(0,1fr))}._cols6_ahbs8_18{grid-template-columns:repeat(6,minmax(0,1fr))}._cols12_ahbs8_21{grid-template-columns:repeat(12,minmax(0,1fr))}._gap0_ahbs8_26{gap:var(--space-0)}._gap1_ahbs8_29{gap:var(--space-1)}._gap2_ahbs8_32{gap:var(--space-2)}._gap3_ahbs8_35{gap:var(--space-3)}._gap4_ahbs8_38{gap:var(--space-4)}._gap5_ahbs8_41{gap:var(--space-5)}._gap6_ahbs8_44{gap:var(--space-6)}._gap8_ahbs8_47{gap:var(--space-8)}._gap10_ahbs8_50{gap:var(--space-10)}._gap12_ahbs8_53{gap:var(--space-12)}._gap16_ahbs8_56{gap:var(--space-16)}._inline_eh3ac_1{display:flex;flex-direction:row}._wrap_eh3ac_7{flex-wrap:wrap}._gap0_eh3ac_12{gap:var(--space-0)}._gap1_eh3ac_15{gap:var(--space-1)}._gap2_eh3ac_18{gap:var(--space-2)}._gap3_eh3ac_21{gap:var(--space-3)}._gap4_eh3ac_24{gap:var(--space-4)}._gap5_eh3ac_27{gap:var(--space-5)}._gap6_eh3ac_30{gap:var(--space-6)}._gap8_eh3ac_33{gap:var(--space-8)}._gap10_eh3ac_36{gap:var(--space-10)}._gap12_eh3ac_39{gap:var(--space-12)}._gap16_eh3ac_42{gap:var(--space-16)}._alignStart_eh3ac_47{align-items:flex-start}._alignCenter_eh3ac_50{align-items:center}._alignEnd_eh3ac_53{align-items:flex-end}._alignStretch_eh3ac_56{align-items:stretch}._justifyStart_eh3ac_61{justify-content:flex-start}._justifyCenter_eh3ac_64{justify-content:center}._justifyEnd_eh3ac_67{justify-content:flex-end}._justifyBetween_eh3ac_70{justify-content:space-between}._stack_e0a6n_1{display:flex;flex-direction:column}._gap0_e0a6n_7{gap:var(--space-0)}._gap1_e0a6n_10{gap:var(--space-1)}._gap2_e0a6n_13{gap:var(--space-2)}._gap3_e0a6n_16{gap:var(--space-3)}._gap4_e0a6n_19{gap:var(--space-4)}._gap5_e0a6n_22{gap:var(--space-5)}._gap6_e0a6n_25{gap:var(--space-6)}._gap8_e0a6n_28{gap:var(--space-8)}._gap10_e0a6n_31{gap:var(--space-10)}._gap12_e0a6n_34{gap:var(--space-12)}._gap16_e0a6n_37{gap:var(--space-16)}._alignStart_e0a6n_42{align-items:flex-start}._alignCenter_e0a6n_45{align-items:center}._alignEnd_e0a6n_48{align-items:flex-end}._alignStretch_e0a6n_51{align-items:stretch}._justifyStart_e0a6n_56{justify-content:flex-start}._justifyCenter_e0a6n_59{justify-content:center}._justifyEnd_e0a6n_62{justify-content:flex-end}._justifyBetween_e0a6n_65{justify-content:space-between}._list_1e7it_1{display:flex;gap:var(--space-1-5);align-items:center;padding:0;margin:0;font-family:var(--font-body);font-size:var(--text-sm);list-style:none}._item_1e7it_12{display:flex;gap:var(--space-1-5);align-items:center}._current_1e7it_18{font-weight:var(--weight-semibold);color:var(--text-primary)}._link_1e7it_23{color:var(--text-muted);text-decoration:none}._link_1e7it_23:hover{color:var(--text-secondary);text-decoration:underline;text-underline-offset:3px}._sep_1e7it_34{color:var(--adl-neutral-400)}._tablist_1khzs_1{display:flex;gap:var(--space-1);border-bottom:1px solid var(--border-subtle)}._tab_1khzs_1{display:inline-flex;gap:var(--space-1-5);align-items:center;margin-bottom:-1px;font-family:var(--font-body);font-weight:var(--weight-semibold);color:var(--text-muted);cursor:pointer;background:transparent;border:none;border-bottom:2px solid transparent;transition:color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}._tab_1khzs_1:hover:not(._active_1khzs_24){color:var(--text-secondary)}._active_1khzs_24{color:var(--text-primary);border-bottom-color:var(--brand-primary)}._sm_1khzs_34{padding:var(--space-2) var(--space-2-5);font-size:var(--text-xs)}._md_1khzs_38{padding:var(--space-2-5) 14px;font-size:var(--text-sm)}._count_1khzs_44{padding:2px 6px;font-size:11px;line-height:1;color:var(--text-muted);background:var(--bg-muted);border-radius:var(--radius-full)}._countActive_1khzs_53{color:var(--tint-brand-fg);background:var(--brand-primary-subtle)}._heading_xq294_1{margin:0;font-family:var(--font-display);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight)}._sizeXs_xq294_9{font-size:var(--text-xs)}._sizeSm_xq294_12{font-size:var(--text-sm)}._sizeMd_xq294_15{font-size:var(--text-md)}._sizeLg_xq294_18{font-size:var(--text-lg)}._sizeXl_xq294_21{font-size:var(--text-xl)}._size2xl_xq294_24{font-size:var(--text-2xl)}._size3xl_xq294_27{font-size:var(--text-3xl)}._size4xl_xq294_30{font-size:var(--text-4xl)}._weightRegular_xq294_35{font-weight:var(--weight-regular)}._weightMedium_xq294_38{font-weight:var(--weight-medium)}._weightSemibold_xq294_41{font-weight:var(--weight-semibold)}._weightBold_xq294_44{font-weight:var(--weight-bold)}._tonePrimary_xq294_49{color:var(--text-primary)}._toneSecondary_xq294_52{color:var(--text-secondary)}._toneMuted_xq294_55{color:var(--text-muted)}._toneInverse_xq294_58{color:var(--text-inverse)}._toneLink_xq294_61{color:var(--text-link)}._text_xjn05_1{margin:0}._sizeXs_xjn05_6{font-size:var(--text-xs)}._sizeSm_xjn05_9{font-size:var(--text-sm)}._sizeMd_xjn05_12{font-size:var(--text-md)}._sizeLg_xjn05_15{font-size:var(--text-lg)}._sizeXl_xjn05_18{font-size:var(--text-xl)}._size2xl_xjn05_21{font-size:var(--text-2xl)}._weightRegular_xjn05_26{font-weight:var(--weight-regular)}._weightMedium_xjn05_29{font-weight:var(--weight-medium)}._weightSemibold_xjn05_32{font-weight:var(--weight-semibold)}._weightBold_xjn05_35{font-weight:var(--weight-bold)}._tonePrimary_xjn05_40{color:var(--text-primary)}._toneSecondary_xjn05_43{color:var(--text-secondary)}._toneMuted_xjn05_46{color:var(--text-muted)}._toneInverse_xjn05_49{color:var(--text-inverse)}._toneLink_xjn05_52{color:var(--text-link)}._fontBody_xjn05_57{font-family:var(--font-body)}._fontDisplay_xjn05_60{font-family:var(--font-display)}._fontMono_xjn05_63{font-family:var(--font-mono)}._leadingTight_xjn05_68{line-height:var(--leading-tight)}._leadingSnug_xjn05_71{line-height:var(--leading-snug)}._leadingNormal_xjn05_74{line-height:var(--leading-normal)}._leadingRelaxed_xjn05_77{line-height:var(--leading-relaxed)}._alignStart_xjn05_82{text-align:start}._alignCenter_xjn05_85{text-align:center}._alignEnd_xjn05_88{text-align:end}
|
|
1
|
+
._avatar_yqge8_1{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;font-family:var(--font-display);font-weight:var(--weight-semibold);color:var(--adl-teal-800);background:var(--adl-teal-100);border-radius:var(--radius-full)}._hasImage_yqge8_15{background:var(--bg-muted)}._img_yqge8_19{width:100%;height:100%;object-fit:cover}._sm_yqge8_26{width:28px;height:28px;font-size:11px}._md_yqge8_31{width:36px;height:36px;font-size:14px}._lg_yqge8_36{width:48px;height:48px;font-size:18px}._xl_yqge8_41{width:64px;height:64px;font-size:24px}._badge_1ndhf_1{display:inline-flex;gap:var(--space-1-5);align-items:center;height:22px;padding:0 var(--space-2);font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);line-height:1;white-space:nowrap;border-radius:var(--radius-xs)}._dot_1ndhf_15{width:6px;height:6px;background:currentColor;border-radius:var(--radius-full)}._neutral_1ndhf_23{color:var(--text-secondary);background:var(--bg-muted)}._brand_1ndhf_27{color:var(--tint-brand-fg);background:var(--brand-primary-subtle)}._info_1ndhf_31{color:var(--tint-info-fg);background:var(--feedback-info-subtle)}._success_1ndhf_35{color:var(--tint-success-fg);background:var(--feedback-success-subtle)}._warning_1ndhf_39{color:var(--tint-warning-fg);background:var(--feedback-warning-subtle)}._danger_1ndhf_43{color:var(--tint-danger-fg);background:var(--feedback-danger-subtle)}._btn_1x1y9_1{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-body);font-weight:var(--weight-semibold);line-height:1;white-space:nowrap;cursor:pointer;border:1px solid transparent;border-radius:var(--radius-sm);transition:background var(--duration-fast) var(--ease-out)}._btn_1x1y9_1:disabled{cursor:not-allowed;opacity:.45}._btn_1x1y9_1:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}._fullWidth_1x1y9_25{display:flex;width:100%}._sm_1x1y9_31{gap:var(--space-1-5);height:32px;padding:0 var(--space-3);font-size:var(--text-xs)}._md_1x1y9_37{gap:var(--space-2);height:40px;padding:0 var(--space-4);font-size:var(--text-sm)}._lg_1x1y9_43{gap:var(--space-2-5);height:48px;padding:0 var(--space-6);font-size:var(--text-md)}._primary_1x1y9_51{color:var(--text-on-brand);background:var(--brand-primary)}._primary_1x1y9_51:hover:not(:disabled){background:var(--brand-primary-hover)}._primary_1x1y9_51:active:not(:disabled){background:var(--brand-primary-active)}._secondary_1x1y9_62{color:var(--text-primary);background:var(--surface-default);border-color:var(--border-strong)}._secondary_1x1y9_62:hover:not(:disabled){background:var(--bg-subtle)}._secondary_1x1y9_62:active:not(:disabled){background:var(--bg-muted)}._ghost_1x1y9_76{color:var(--text-secondary);background:transparent}._ghost_1x1y9_76:hover:not(:disabled){background:var(--bg-subtle)}._ghost_1x1y9_76:active:not(:disabled){background:var(--bg-muted)}._danger_1x1y9_87{color:var(--text-inverse);background:var(--feedback-danger)}._danger_1x1y9_87:hover:not(:disabled){background:var(--adl-red-600)}._danger_1x1y9_87:active:not(:disabled){background:var(--adl-red-700)}._card_1tzae_1{border-radius:var(--radius-md);transition:box-shadow var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out)}._padNone_1tzae_9{padding:0}._padSm_1tzae_12{padding:var(--space-4)}._padMd_1tzae_15{padding:var(--space-6)}._padLg_1tzae_18{padding:var(--space-8)}._default_1tzae_23{background:var(--surface-default);border:1px solid var(--border-subtle);box-shadow:var(--shadow-xs)}._raised_1tzae_28{background:var(--surface-default);border:1px solid var(--border-subtle);box-shadow:var(--shadow-md)}._sunken_1tzae_33{background:var(--surface-sunken);border:1px solid var(--border-subtle);box-shadow:none}._inverse_1tzae_38{--text-primary: var(--adl-neutral-50);--text-secondary: var(--adl-blue-200);--text-muted: var(--adl-navy-300);color:var(--text-primary);background:var(--adl-navy-900);border:1px solid var(--adl-navy-700);box-shadow:var(--shadow-sm)}._interactive_1tzae_49{cursor:pointer}._interactive_1tzae_49:hover{border-color:var(--border-default);box-shadow:var(--shadow-md)}._btn_1htkg_1{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;border-radius:var(--radius-sm);transition:background var(--duration-fast) var(--ease-out)}._btn_1htkg_1:disabled{cursor:not-allowed;opacity:.45}._btn_1htkg_1:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}._sm_1htkg_22{width:28px;height:28px}._md_1htkg_26{width:36px;height:36px}._lg_1htkg_30{width:44px;height:44px}._ghost_1htkg_36{color:var(--text-secondary);background:transparent}._ghost_1htkg_36:hover:not(:disabled){background:var(--bg-subtle)}._outline_1htkg_44{color:var(--text-secondary);background:var(--surface-default);border-color:var(--border-strong)}._outline_1htkg_44:hover:not(:disabled){background:var(--bg-subtle)}._primary_1htkg_53{color:var(--text-on-brand);background:var(--brand-primary)}._primary_1htkg_53:hover:not(:disabled){background:var(--brand-primary-hover)}._stat_1uc8c_1{display:flex;flex-direction:column;gap:var(--space-1)}._label_1uc8c_7{font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-muted);text-transform:uppercase;letter-spacing:var(--tracking-wide)}._valueRow_1uc8c_16{display:flex;gap:var(--space-2);align-items:baseline}._value_1uc8c_16{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-bold);line-height:var(--leading-tight);color:var(--text-primary);letter-spacing:var(--tracking-tight)}._delta_1uc8c_31{display:inline-flex;gap:3px;align-items:center;font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold)}._deltaUp_1uc8c_40{color:var(--feedback-success)}._deltaDown_1uc8c_43{color:var(--feedback-danger)}._deltaFlat_1uc8c_46{color:var(--text-muted)}._flip_1uc8c_50{transform:scaleY(-1)}._caption_1uc8c_54{font-size:var(--text-xs);color:var(--text-muted)}._tag_11jaq_1{display:inline-flex;gap:var(--space-1-5);align-items:center;height:26px;padding:0 var(--space-2-5);font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-medium);line-height:1;color:var(--text-secondary);white-space:nowrap;background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-full)}._remove_11jaq_18{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;line-height:1;color:inherit;cursor:pointer;background:transparent;border:none;border-radius:var(--radius-full)}._remove_11jaq_18:hover{background:var(--bg-muted)}._alert_1217n_1{display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-4);font-family:var(--font-body);font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--alert-fg);background:var(--alert-bg);border:1px solid;border-color:color-mix(in srgb,var(--alert-border) 40%,transparent);border-radius:var(--radius-sm)}._icon_1217n_16{flex-shrink:0;margin-top:1px;color:var(--alert-border)}._body_1217n_22{flex:1}._title_1217n_26{font-weight:var(--weight-bold)}._titleSpaced_1217n_29{margin-bottom:2px}._dismiss_1217n_33{display:inline-flex;align-items:center;height:20px;padding:2px;color:inherit;cursor:pointer;background:transparent;border:none}._info_1217n_45{--alert-border: var(--feedback-info);--alert-bg: var(--feedback-info-subtle);--alert-fg: var(--tint-info-fg)}._success_1217n_50{--alert-border: var(--feedback-success);--alert-bg: var(--feedback-success-subtle);--alert-fg: var(--tint-success-fg)}._warning_1217n_55{--alert-border: var(--feedback-warning);--alert-bg: var(--feedback-warning-subtle);--alert-fg: var(--tint-warning-fg)}._danger_1217n_60{--alert-border: var(--feedback-danger);--alert-bg: var(--feedback-danger-subtle);--alert-fg: var(--tint-danger-fg)}._progress_tptlj_1{display:flex;flex-direction:column;gap:var(--space-1-5)}._header_tptlj_7{display:flex;justify-content:space-between;font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--text-secondary)}._percent_tptlj_16{font-family:var(--font-mono)}._track_tptlj_20{height:6px;overflow:hidden;background:var(--bg-muted);border-radius:var(--radius-full)}._fill_tptlj_27{height:100%;border-radius:var(--radius-full);transition:width var(--duration-slow) var(--ease-out)}._brand_tptlj_34{background:var(--brand-primary)}._success_tptlj_37{background:var(--feedback-success)}._warning_tptlj_40{background:var(--feedback-warning)}._danger_tptlj_43{background:var(--feedback-danger)}._accent_tptlj_46{background:var(--brand-accent)}._wrap_82rh0_1{position:relative;display:inline-flex}._tip_82rh0_6{position:absolute;z-index:var(--z-tooltip);visibility:hidden;padding:6px 10px;font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-medium);line-height:1.4;color:var(--text-inverse);white-space:nowrap;pointer-events:none;background:var(--bg-inverse);border-radius:var(--radius-xs);box-shadow:var(--shadow-md);opacity:0;transition:opacity var(--duration-fast) var(--ease-out),visibility var(--duration-fast) var(--ease-out)}._wrap_82rh0_1:hover ._tip_82rh0_6,._wrap_82rh0_1:focus-within ._tip_82rh0_6{visibility:visible;opacity:1}._top_82rh0_34{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}._bottom_82rh0_39{top:calc(100% + 8px);left:50%;transform:translate(-50%)}._left_82rh0_44{top:50%;right:calc(100% + 8px);transform:translateY(-50%)}._right_82rh0_49{top:50%;left:calc(100% + 8px);transform:translateY(-50%)}._root_1t9ke_1{display:inline-flex;gap:var(--space-2);align-items:center;font-family:var(--font-body);font-size:var(--text-sm);color:var(--text-primary);cursor:pointer;-webkit-user-select:none;user-select:none}._disabled_1t9ke_12{cursor:not-allowed;opacity:.45}._input_1t9ke_18{position:absolute;width:0;height:0;opacity:0}._box_1t9ke_25{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:18px;height:18px;background:var(--surface-default);border:1px solid var(--border-strong);border-radius:var(--radius-xs);transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}._checked_1t9ke_40{background:var(--brand-primary);border-color:var(--brand-primary)}._input_1t9ke_18:focus-visible+._box_1t9ke_25{box-shadow:var(--shadow-focus)}._field_1d54c_1{display:flex;flex-direction:column;gap:var(--space-1-5)}._label_1d54c_7{font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary)}._required_1d54c_14{color:var(--feedback-danger)}._error_1d54c_18{font-size:var(--text-xs);color:var(--feedback-danger)}._hint_1d54c_23{font-size:var(--text-xs);color:var(--text-muted)}._input_1s9zt_1{box-sizing:border-box;width:100%;padding:0 var(--space-3);font-family:var(--font-body);color:var(--text-primary);outline:none;background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-sm);transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}._input_1s9zt_1::placeholder{color:var(--text-muted)}._input_1s9zt_1:focus,._input_1s9zt_1:focus-visible{border-color:var(--border-focus);box-shadow:var(--shadow-focus)}._input_1s9zt_1:disabled{cursor:not-allowed;background:var(--bg-muted);opacity:.6}._invalid_1s9zt_32,._invalid_1s9zt_32:focus{border-color:var(--feedback-danger)}._sm_1s9zt_38{height:32px;font-size:var(--text-xs)}._md_1s9zt_42{height:40px;font-size:var(--text-sm)}._lg_1s9zt_46{height:48px;font-size:var(--text-sm)}._wrap_14t2q_1{position:relative;display:inline-flex;width:100%}._select_14t2q_7{box-sizing:border-box;width:100%;padding:0 var(--space-8) 0 var(--space-3);font-family:var(--font-body);color:var(--text-primary);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;outline:none;background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-sm);transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}._select_14t2q_7:focus,._select_14t2q_7:focus-visible{border-color:var(--border-focus);box-shadow:var(--shadow-focus)}._select_14t2q_7:disabled{cursor:not-allowed;background:var(--bg-muted);opacity:.6}._invalid_14t2q_37,._invalid_14t2q_37:focus{border-color:var(--feedback-danger)}._chevron_14t2q_42{position:absolute;top:50%;right:10px;color:var(--text-muted);pointer-events:none;transform:translateY(-50%)}._sm_14t2q_52{height:32px;font-size:var(--text-xs)}._md_14t2q_56{height:40px;font-size:var(--text-sm)}._lg_14t2q_60{height:48px;font-size:var(--text-sm)}._root_ctdye_1{display:inline-flex;gap:var(--space-2);align-items:center;font-family:var(--font-body);font-size:var(--text-sm);color:var(--text-primary);cursor:pointer;-webkit-user-select:none;user-select:none}._disabled_ctdye_12{cursor:not-allowed;opacity:.45}._input_ctdye_17{position:absolute;width:0;height:0;opacity:0}._track_ctdye_24{position:relative;flex-shrink:0;width:36px;height:20px;background:var(--adl-neutral-300);border-radius:var(--radius-full);transition:background var(--duration-base) var(--ease-out)}._on_ctdye_34{background:var(--brand-primary)}._knob_ctdye_38{position:absolute;top:2px;left:2px;width:16px;height:16px;background:var(--adl-neutral-0);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);transition:left var(--duration-base) var(--ease-out)}._on_ctdye_34 ._knob_ctdye_38{left:18px}._input_ctdye_17:focus-visible+._track_ctdye_24{box-shadow:var(--shadow-focus)}._box_1akfw_1{box-sizing:border-box}._pad0_1akfw_6{padding:var(--space-0)}._pad1_1akfw_9{padding:var(--space-1)}._pad2_1akfw_12{padding:var(--space-2)}._pad3_1akfw_15{padding:var(--space-3)}._pad4_1akfw_18{padding:var(--space-4)}._pad5_1akfw_21{padding:var(--space-5)}._pad6_1akfw_24{padding:var(--space-6)}._pad8_1akfw_27{padding:var(--space-8)}._pad10_1akfw_30{padding:var(--space-10)}._pad12_1akfw_33{padding:var(--space-12)}._pad16_1akfw_36{padding:var(--space-16)}._radiusNone_1akfw_41{border-radius:0}._radiusXs_1akfw_44{border-radius:var(--radius-xs)}._radiusSm_1akfw_47{border-radius:var(--radius-sm)}._radiusMd_1akfw_50{border-radius:var(--radius-md)}._radiusLg_1akfw_53{border-radius:var(--radius-lg)}._radiusXl_1akfw_56{border-radius:var(--radius-xl)}._radiusFull_1akfw_59{border-radius:var(--radius-full)}._surfaceDefault_1akfw_64{background:var(--surface-default)}._surfaceRaised_1akfw_67{background:var(--surface-raised)}._surfaceSunken_1akfw_70{background:var(--surface-sunken)}._border_1akfw_75{border:1px solid var(--border-default)}._container_opidm_1{box-sizing:border-box;width:100%;margin-inline:auto}._widthMax_opidm_8{max-width:var(--container-max)}._widthNarrow_opidm_11{max-width:var(--container-narrow)}._gutter0_opidm_16{padding-inline:var(--space-0)}._gutter1_opidm_19{padding-inline:var(--space-1)}._gutter2_opidm_22{padding-inline:var(--space-2)}._gutter3_opidm_25{padding-inline:var(--space-3)}._gutter4_opidm_28{padding-inline:var(--space-4)}._gutter5_opidm_31{padding-inline:var(--space-5)}._gutter6_opidm_34{padding-inline:var(--space-6)}._gutter8_opidm_37{padding-inline:var(--space-8)}._gutter10_opidm_40{padding-inline:var(--space-10)}._gutter12_opidm_43{padding-inline:var(--space-12)}._gutter16_opidm_46{padding-inline:var(--space-16)}._grid_ahbs8_1{display:grid}._cols1_ahbs8_6{grid-template-columns:repeat(1,minmax(0,1fr))}._cols2_ahbs8_9{grid-template-columns:repeat(2,minmax(0,1fr))}._cols3_ahbs8_12{grid-template-columns:repeat(3,minmax(0,1fr))}._cols4_ahbs8_15{grid-template-columns:repeat(4,minmax(0,1fr))}._cols6_ahbs8_18{grid-template-columns:repeat(6,minmax(0,1fr))}._cols12_ahbs8_21{grid-template-columns:repeat(12,minmax(0,1fr))}._gap0_ahbs8_26{gap:var(--space-0)}._gap1_ahbs8_29{gap:var(--space-1)}._gap2_ahbs8_32{gap:var(--space-2)}._gap3_ahbs8_35{gap:var(--space-3)}._gap4_ahbs8_38{gap:var(--space-4)}._gap5_ahbs8_41{gap:var(--space-5)}._gap6_ahbs8_44{gap:var(--space-6)}._gap8_ahbs8_47{gap:var(--space-8)}._gap10_ahbs8_50{gap:var(--space-10)}._gap12_ahbs8_53{gap:var(--space-12)}._gap16_ahbs8_56{gap:var(--space-16)}._inline_eh3ac_1{display:flex;flex-direction:row}._wrap_eh3ac_7{flex-wrap:wrap}._gap0_eh3ac_12{gap:var(--space-0)}._gap1_eh3ac_15{gap:var(--space-1)}._gap2_eh3ac_18{gap:var(--space-2)}._gap3_eh3ac_21{gap:var(--space-3)}._gap4_eh3ac_24{gap:var(--space-4)}._gap5_eh3ac_27{gap:var(--space-5)}._gap6_eh3ac_30{gap:var(--space-6)}._gap8_eh3ac_33{gap:var(--space-8)}._gap10_eh3ac_36{gap:var(--space-10)}._gap12_eh3ac_39{gap:var(--space-12)}._gap16_eh3ac_42{gap:var(--space-16)}._alignStart_eh3ac_47{align-items:flex-start}._alignCenter_eh3ac_50{align-items:center}._alignEnd_eh3ac_53{align-items:flex-end}._alignStretch_eh3ac_56{align-items:stretch}._justifyStart_eh3ac_61{justify-content:flex-start}._justifyCenter_eh3ac_64{justify-content:center}._justifyEnd_eh3ac_67{justify-content:flex-end}._justifyBetween_eh3ac_70{justify-content:space-between}._stack_e0a6n_1{display:flex;flex-direction:column}._gap0_e0a6n_7{gap:var(--space-0)}._gap1_e0a6n_10{gap:var(--space-1)}._gap2_e0a6n_13{gap:var(--space-2)}._gap3_e0a6n_16{gap:var(--space-3)}._gap4_e0a6n_19{gap:var(--space-4)}._gap5_e0a6n_22{gap:var(--space-5)}._gap6_e0a6n_25{gap:var(--space-6)}._gap8_e0a6n_28{gap:var(--space-8)}._gap10_e0a6n_31{gap:var(--space-10)}._gap12_e0a6n_34{gap:var(--space-12)}._gap16_e0a6n_37{gap:var(--space-16)}._alignStart_e0a6n_42{align-items:flex-start}._alignCenter_e0a6n_45{align-items:center}._alignEnd_e0a6n_48{align-items:flex-end}._alignStretch_e0a6n_51{align-items:stretch}._justifyStart_e0a6n_56{justify-content:flex-start}._justifyCenter_e0a6n_59{justify-content:center}._justifyEnd_e0a6n_62{justify-content:flex-end}._justifyBetween_e0a6n_65{justify-content:space-between}._list_1gxtd_1{display:flex;gap:var(--space-1-5);align-items:center;padding:0;margin:0;font-family:var(--font-body);font-size:var(--text-sm);list-style:none}._item_1gxtd_12{display:flex;gap:var(--space-1-5);align-items:center}._current_1gxtd_18{font-weight:var(--weight-semibold);color:var(--text-primary)}._link_1gxtd_23{color:var(--text-muted);text-decoration:none}._link_1gxtd_23:hover{color:var(--text-secondary);text-decoration:underline;text-underline-offset:3px}._link_1gxtd_23:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}._sep_1gxtd_39{color:var(--adl-neutral-400)}._tablist_1c3fr_1{display:flex;gap:var(--space-1);border-bottom:1px solid var(--border-subtle)}._tab_1c3fr_1{display:inline-flex;gap:var(--space-1-5);align-items:center;margin-bottom:-1px;font-family:var(--font-body);font-weight:var(--weight-semibold);color:var(--text-muted);cursor:pointer;background:transparent;border:none;border-bottom:2px solid transparent;transition:color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}._tab_1c3fr_1:hover:not(._active_1c3fr_24){color:var(--text-secondary)}._tab_1c3fr_1:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}._active_1c3fr_24{color:var(--text-primary);border-bottom-color:var(--brand-primary)}._sm_1c3fr_39{padding:var(--space-2) var(--space-2-5);font-size:var(--text-xs)}._md_1c3fr_43{padding:var(--space-2-5) 14px;font-size:var(--text-sm)}._count_1c3fr_49{padding:2px 6px;font-size:11px;line-height:1;color:var(--text-muted);background:var(--bg-muted);border-radius:var(--radius-full)}._countActive_1c3fr_58{color:var(--tint-brand-fg);background:var(--brand-primary-subtle)}._backdrop_8dbqx_1{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-overlay);display:flex;align-items:center;justify-content:center;padding:var(--space-4);background:color-mix(in srgb,var(--bg-inverse) 55%,transparent)}._panel_8dbqx_13{position:relative;z-index:var(--z-modal);display:flex;flex-direction:column;gap:var(--space-4);width:100%;max-height:calc(100% - var(--space-8));padding:var(--space-6);overflow-y:auto;color:var(--text-primary);background:var(--surface-default);border:var(--space-px) solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}._title_8dbqx_30{margin:0;font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semibold);line-height:1.3;color:var(--text-primary)}._body_8dbqx_39{font-family:var(--font-body);font-size:var(--text-sm);line-height:1.5;color:var(--text-primary)}._sm_8dbqx_47{max-width:calc(var(--space-48) + var(--space-40) + var(--space-32))}._md_8dbqx_51{max-width:var(--container-narrow)}._lg_8dbqx_54{max-width:var(--container-max)}._heading_xq294_1{margin:0;font-family:var(--font-display);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight)}._sizeXs_xq294_9{font-size:var(--text-xs)}._sizeSm_xq294_12{font-size:var(--text-sm)}._sizeMd_xq294_15{font-size:var(--text-md)}._sizeLg_xq294_18{font-size:var(--text-lg)}._sizeXl_xq294_21{font-size:var(--text-xl)}._size2xl_xq294_24{font-size:var(--text-2xl)}._size3xl_xq294_27{font-size:var(--text-3xl)}._size4xl_xq294_30{font-size:var(--text-4xl)}._weightRegular_xq294_35{font-weight:var(--weight-regular)}._weightMedium_xq294_38{font-weight:var(--weight-medium)}._weightSemibold_xq294_41{font-weight:var(--weight-semibold)}._weightBold_xq294_44{font-weight:var(--weight-bold)}._tonePrimary_xq294_49{color:var(--text-primary)}._toneSecondary_xq294_52{color:var(--text-secondary)}._toneMuted_xq294_55{color:var(--text-muted)}._toneInverse_xq294_58{color:var(--text-inverse)}._toneLink_xq294_61{color:var(--text-link)}._text_xjn05_1{margin:0}._sizeXs_xjn05_6{font-size:var(--text-xs)}._sizeSm_xjn05_9{font-size:var(--text-sm)}._sizeMd_xjn05_12{font-size:var(--text-md)}._sizeLg_xjn05_15{font-size:var(--text-lg)}._sizeXl_xjn05_18{font-size:var(--text-xl)}._size2xl_xjn05_21{font-size:var(--text-2xl)}._weightRegular_xjn05_26{font-weight:var(--weight-regular)}._weightMedium_xjn05_29{font-weight:var(--weight-medium)}._weightSemibold_xjn05_32{font-weight:var(--weight-semibold)}._weightBold_xjn05_35{font-weight:var(--weight-bold)}._tonePrimary_xjn05_40{color:var(--text-primary)}._toneSecondary_xjn05_43{color:var(--text-secondary)}._toneMuted_xjn05_46{color:var(--text-muted)}._toneInverse_xjn05_49{color:var(--text-inverse)}._toneLink_xjn05_52{color:var(--text-link)}._fontBody_xjn05_57{font-family:var(--font-body)}._fontDisplay_xjn05_60{font-family:var(--font-display)}._fontMono_xjn05_63{font-family:var(--font-mono)}._leadingTight_xjn05_68{line-height:var(--leading-tight)}._leadingSnug_xjn05_71{line-height:var(--leading-snug)}._leadingNormal_xjn05_74{line-height:var(--leading-normal)}._leadingRelaxed_xjn05_77{line-height:var(--leading-relaxed)}._alignStart_xjn05_82{text-align:start}._alignCenter_xjn05_85{text-align:center}._alignEnd_xjn05_88{text-align:end}
|
package/dist/index.d.ts
CHANGED
|
@@ -27,6 +27,7 @@ export { Inline, type InlineProps } from "./components/layout/Inline";
|
|
|
27
27
|
export { Stack, type StackProps } from "./components/layout/Stack";
|
|
28
28
|
export { Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, } from "./components/navigation/Breadcrumb";
|
|
29
29
|
export { type TabItem, Tabs, type TabsProps, } from "./components/navigation/Tabs";
|
|
30
|
-
export {
|
|
30
|
+
export { Modal, type ModalProps } from "./components/overlay/Modal";
|
|
31
|
+
export { getThemeInitScript, type ResolvedTheme, type Theme, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, themeInitScript, useTheme, } from "./components/system/ThemeProvider";
|
|
31
32
|
export { Heading, type HeadingProps } from "./components/typography/Heading";
|
|
32
33
|
export { Text, type TextProps } from "./components/typography/Text";
|