@jonmilner/ui 0.5.3 → 0.5.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Avatar/Avatar.css +2 -0
- package/dist/Avatar/Avatar.css.mjs +18 -0
- package/dist/Avatar/index.d.mts +15 -0
- package/dist/Avatar/index.mjs +45 -0
- package/dist/Avatar/ink.mjs +18 -0
- package/dist/Badge/Badge.css +1 -1
- package/dist/Box/Box.css +1 -1
- package/dist/Button/Button.css +1 -1
- package/dist/Checkbox/Checkbox.css +1 -1
- package/dist/Chip/Chip.css +1 -1
- package/dist/Clickable/Clickable.css +1 -1
- package/dist/ColorField/ColorField.css +1 -1
- package/dist/Dialog/Dialog.css +1 -1
- package/dist/Field/Field.css +1 -1
- package/dist/Heading/Heading.css +1 -1
- package/dist/Icon/Icon.css +1 -1
- package/dist/IconButton/IconButton.css +1 -1
- package/dist/Inline/Inline.css +1 -1
- package/dist/Menu/Menu.css +1 -1
- package/dist/MultiSelect/MultiSelect.css +1 -1
- package/dist/SearchField/SearchField.css +1 -1
- package/dist/Stack/Stack.css +1 -1
- package/dist/Tabs/Tabs.css +1 -1
- package/dist/Tag/Tag.css +1 -1
- package/dist/Text/Text.css +1 -1
- package/dist/TextField/TextField.css +1 -1
- package/dist/Toast/Toast.css +1 -1
- package/dist/Toast/client.mjs +54 -38
- package/dist/VisuallyHidden/VisuallyHidden.css +1 -1
- package/dist/base.css +1 -1
- package/dist/docs/Avatar.md +77 -0
- package/dist/docs/Badge.md +1 -0
- package/dist/docs/Tag.md +1 -0
- package/dist/docs/llms.txt +1 -0
- package/dist/docs/manifest.json +34 -1
- package/dist/index.d.mts +2 -1
- package/dist/index.mjs +21 -20
- package/dist/styles/atoms.css +1 -1
- package/dist/styles/layers.css +1 -1
- package/package.json +5 -1
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
|
+
@layer components.avatar{.o8rb9b0{border-width:var(--space-1);border-style:solid;border-color:#0000}.o8rb9b1{border-color:var(--color-border)}.o8rb9b3{inline-size:var(--space-20);block-size:var(--space-20)}.o8rb9b4{inline-size:calc(var(--space-24) + var(--space-4));block-size:calc(var(--space-24) + var(--space-4))}.o8rb9b5{inline-size:var(--space-40);block-size:var(--space-40)}.o8rb9b6{color:#000}.o8rb9b7{color:#fff}@media (forced-colors:active){.o8rb9b0,.o8rb9b1{border-color:canvastext}}}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import "../styles/layers.css";
|
|
2
|
+
import "./Avatar.css";
|
|
3
|
+
/* empty css */
|
|
4
|
+
/* empty css */
|
|
5
|
+
import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
6
|
+
//#region src/Avatar/Avatar.css.ts
|
|
7
|
+
var t = "o8rb9b0", n = "o8rb9b1", r = e({
|
|
8
|
+
defaultClassName: "o8rb9b2",
|
|
9
|
+
variantClassNames: { size: {
|
|
10
|
+
sm: "o8rb9b3",
|
|
11
|
+
med: "o8rb9b4",
|
|
12
|
+
lg: "o8rb9b5"
|
|
13
|
+
} },
|
|
14
|
+
defaultVariants: {},
|
|
15
|
+
compoundVariants: []
|
|
16
|
+
}), i = "o8rb9b6", a = "o8rb9b7";
|
|
17
|
+
//#endregion
|
|
18
|
+
export { r as avatar, i as inkBlack, a as inkWhite, n as neutral, t as root };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { OmitEach } from "../types.mjs";
|
|
2
|
+
import { StyleProps } from "../Box/index.mjs";
|
|
3
|
+
import { ComponentPropsWithRef } from "react";
|
|
4
|
+
//#region src/Avatar/index.d.ts
|
|
5
|
+
export type AvatarOwnProps = {
|
|
6
|
+
color?: string | null | undefined;
|
|
7
|
+
initials: string;
|
|
8
|
+
label: string;
|
|
9
|
+
size?: "sm" | "med" | "lg";
|
|
10
|
+
};
|
|
11
|
+
type AvatarStyleProps = Omit<StyleProps, "color" | "backgroundColor" | "inlineSize" | "blockSize">;
|
|
12
|
+
export type AvatarProps = AvatarStyleProps & AvatarOwnProps & OmitEach<ComponentPropsWithRef<"span">, keyof StyleProps | keyof AvatarOwnProps | "children" | "role" | "aria-label" | "aria-labelledby">;
|
|
13
|
+
export declare function Avatar({ initials, label, color, size, display, alignItems, justifyContent, flexShrink, borderRadius, className, style, ...props }: AvatarProps): import("react").JSX.Element;
|
|
14
|
+
//#endregion
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { join as e } from "../styles/join.mjs";
|
|
2
|
+
import { Box as t } from "../Box/index.mjs";
|
|
3
|
+
import { Text as n } from "../Text/index.mjs";
|
|
4
|
+
import { avatar as r, inkBlack as i, inkWhite as a, root as o } from "./Avatar.css.mjs";
|
|
5
|
+
import { fillFor as s, inkFor as c } from "./ink.mjs";
|
|
6
|
+
import { jsx as l } from "react/jsx-runtime";
|
|
7
|
+
//#region src/Avatar/index.tsx
|
|
8
|
+
var u = new Intl.Segmenter(), d = (e) => Array.from(u.segment(e), ({ segment: e }) => e).slice(0, 2).join(""), f = {
|
|
9
|
+
sm: "xs",
|
|
10
|
+
med: "sm",
|
|
11
|
+
lg: "lg"
|
|
12
|
+
};
|
|
13
|
+
function p({ initials: u, label: p, color: m, size: h = "med", display: g = "inline-flex", alignItems: _ = "center", justifyContent: v = "center", flexShrink: y = 0, borderRadius: b = "full", className: x, style: S, ...C }) {
|
|
14
|
+
let w = s(m);
|
|
15
|
+
return /* @__PURE__ */ l(t, {
|
|
16
|
+
...C,
|
|
17
|
+
alignItems: _,
|
|
18
|
+
"aria-label": p,
|
|
19
|
+
"aria-labelledby": void 0,
|
|
20
|
+
as: "span",
|
|
21
|
+
backgroundColor: w === null ? "bgMuted" : void 0,
|
|
22
|
+
borderRadius: b,
|
|
23
|
+
className: e(o, w === null && "o8rb9b1", r({ size: h }), x),
|
|
24
|
+
color: w === null ? "fgMuted" : void 0,
|
|
25
|
+
display: g,
|
|
26
|
+
flexShrink: y,
|
|
27
|
+
justifyContent: v,
|
|
28
|
+
role: "img",
|
|
29
|
+
style: w === null ? S : {
|
|
30
|
+
...S,
|
|
31
|
+
backgroundColor: w
|
|
32
|
+
},
|
|
33
|
+
children: /* @__PURE__ */ l(n, {
|
|
34
|
+
as: "span",
|
|
35
|
+
className: w === null ? void 0 : c(w) === "black" ? i : a,
|
|
36
|
+
font: "label",
|
|
37
|
+
size: f[h],
|
|
38
|
+
weight: "semibold",
|
|
39
|
+
wrap: "nowrap",
|
|
40
|
+
children: d(u)
|
|
41
|
+
})
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
//#endregion
|
|
45
|
+
export { p as Avatar };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
//#region src/Avatar/ink.ts
|
|
2
|
+
var e = /^#[\da-f]{6}$/i;
|
|
3
|
+
function t(t) {
|
|
4
|
+
return t != null && e.test(t) ? t : null;
|
|
5
|
+
}
|
|
6
|
+
function n(e) {
|
|
7
|
+
let [t = 0, n = 0, r = 0] = [
|
|
8
|
+
1,
|
|
9
|
+
3,
|
|
10
|
+
5
|
|
11
|
+
].map((t) => {
|
|
12
|
+
let n = Number.parseInt(e.slice(t, t + 2), 16) / 255;
|
|
13
|
+
return n <= .04045 ? n / 12.92 : ((n + .055) / 1.055) ** 2.4;
|
|
14
|
+
});
|
|
15
|
+
return .2126 * t + .7152 * n + .0722 * r > .18 ? "black" : "white";
|
|
16
|
+
}
|
|
17
|
+
//#endregion
|
|
18
|
+
export { t as fillFor, n as inkFor };
|
package/dist/Badge/Badge.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.badge{._1ixfil10{border-width:var(--space-1);border-style:solid;border-color:#0000}@media (forced-colors:active){._1ixfil10{color:canvastext;background-color:canvas;border-color:canvastext}}}
|
package/dist/Box/Box.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.box{._11caph0{box-sizing:border-box}}
|
package/dist/Button/Button.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@keyframes hkhd8a{to{opacity:.25}}@layer components.button{.hkhd80{border-width:var(--space-1);border-style:solid}.hkhd80[aria-disabled=true]{background-color:var(--color-bg-muted);border-color:var(--color-border-strong);color:var(--color-fg-muted);border-style:dashed}.hkhd80:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent));box-shadow:inset 0 0 0 var(--space-1) currentColor}.hkhd82{border-color:#0000}.hkhd83{border-color:var(--color-border-strong)}.hkhd84{border-color:#0000}.hkhd88{justify-items:center}.hkhd89{grid-area:1/1}.hkhd80[aria-busy=true] .hkhd89{opacity:0}.hkhd8b{grid-area:1/1}.hkhd8c{animation-name:hkhd8a;animation-duration:var(--duration-slow);animation-timing-function:var(--easing-standard);animation-iteration-count:infinite;animation-direction:alternate}.hkhd8c:nth-child(2){animation-delay:calc(var(--duration-slow) / 3)}.hkhd8c:nth-child(3){animation-delay:calc(var(--duration-slow) * 2 / 3)}@media (hover:hover){.hkhd80:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent))}}@media (forced-colors:active){.hkhd80{forced-color-adjust:none}.hkhd80:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:none}.hkhd80[aria-disabled=true]{color:graytext;border-color:graytext}.hkhd80:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:none}.hkhd84{--color-danger:var(--color-accent);--color-danger-fg:var(--color-accent-fg)}}@media (prefers-reduced-motion:reduce){.hkhd8c{animation-name:none}}}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.checkbox{._1tze2y80{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._1tze2y80:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1tze2y80[aria-disabled=true]{cursor:not-allowed}._1tze2y80[aria-readonly=true]{cursor:default}._1tze2y81{inline-size:var(--space-16);block-size:var(--space-16);border:var(--space-1) solid var(--color-border-strong);border-radius:var(--radius-sm);background-color:var(--color-bg);color:var(--color-accent-fg);forced-color-adjust:none;place-items:center;display:grid}._1tze2y80:not([aria-checked=true],[aria-checked=mixed],[aria-invalid=true],[aria-disabled=true],[aria-readonly=true]):hover ._1tze2y81{border-color:var(--color-fg)}._1tze2y80:is([aria-checked=true],[aria-checked=mixed]) ._1tze2y81{background-color:var(--color-accent);border-color:var(--color-accent)}._1tze2y80[aria-readonly=true] ._1tze2y81{background-clip:padding-box;border-style:dotted}._1tze2y80[aria-disabled=true] ._1tze2y81{border-style:dashed;border-color:var(--color-border-strong);background-clip:border-box;background-color:var(--color-bg-muted);color:var(--color-fg-muted)}._1tze2y80[aria-invalid=true] ._1tze2y81{border-width:var(--space-2);border-color:var(--color-danger)}._1tze2y82{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;block-size:100%;inline-size:100%}._1tze2y80[aria-checked=mixed] ._1tze2y83,._1tze2y80:not([aria-checked=mixed]) ._1tze2y84{display:none}}
|
package/dist/Chip/Chip.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.chip{._1l071c80{border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);transition:background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard)}._1l071c80[aria-disabled=true]{background-color:var(--color-bg-muted);border-color:var(--color-border-strong);color:var(--color-fg-muted);border-style:dashed}._1l071c80[aria-pressed=true]:not([aria-disabled=true]){background-color:var(--color-accent);color:var(--color-accent-fg);border-color:#0000}._1l071c84{display:none}[aria-pressed=true]>._1l071c84{display:inline-block}@media (hover:hover){._1l071c80:not([aria-disabled=true]):hover{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent))}}@media (forced-colors:active){._1l071c80{forced-color-adjust:none}._1l071c80:not([aria-disabled=true]):hover{background-image:none}._1l071c80[aria-disabled=true]{color:graytext;border-color:graytext}._1l071c80[aria-pressed=true]:not([aria-disabled=true]){color:highlighttext;background-color:highlight;border-color:highlight}}}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.clickable{._10dxgnx0{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._10dxgnx0:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._10dxgnx0[aria-disabled=true]{cursor:not-allowed}._10dxgnx0[aria-busy=true]{cursor:progress}}@layer reset{._10dxgnx0{appearance:none;font:inherit;color:inherit;text-align:inherit;background:0 0;border:0;padding:0;text-decoration:none}}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.color-field{.nmj5ie0{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}.nmj5ie1{appearance:none;border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);border-radius:var(--radius-med);background-color:var(--color-bg);inline-size:100%;min-inline-size:0;color:var(--color-fg);grid-area:1/1;padding-block:0}.nmj5ie1::placeholder{color:var(--color-fg-muted);opacity:1}.nmj5ie1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.nmj5ie1:disabled{background-color:var(--color-bg-muted);color:var(--color-fg-muted);cursor:not-allowed;border-style:dashed}.nmj5ie1[aria-invalid=true]{border-color:var(--color-danger)}.nmj5ie2{block-size:var(--size-sm);padding-inline-start:calc(var(--size-sm) + var(--space-4));padding-inline-end:var(--space-8)}.nmj5ie3{block-size:var(--size-med);padding-inline-start:calc(var(--size-med) + var(--space-4));padding-inline-end:var(--space-12)}.nmj5ie4{block-size:var(--size-lg);padding-inline-start:calc(var(--size-lg) + var(--space-4));padding-inline-end:var(--space-16)}.nmj5ie5{appearance:none;border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);border-radius:var(--radius-sm);cursor:pointer;background-color:#0000;grid-area:1/1;justify-self:start;padding:0;position:relative;inset-inline-start:var(--space-4)}.nmj5ie5::-webkit-color-swatch-wrapper{padding:0}.nmj5ie5::-webkit-color-swatch{border-radius:var(--radius-sm);forced-color-adjust:none;border:none}.nmj5ie5::-moz-color-swatch{border-radius:var(--radius-sm);forced-color-adjust:none;border:none}.nmj5ie5:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.nmj5ie5:disabled{cursor:not-allowed;border-style:dashed}.nmj5ie6{inline-size:var(--size-xs);block-size:var(--size-xs)}.nmj5ie7{inline-size:var(--size-sm);block-size:var(--size-sm)}.nmj5ie8{inline-size:var(--size-med);block-size:var(--size-med)}@media (forced-colors:active){.nmj5ie1:disabled{color:graytext;border-color:graytext}.nmj5ie5{border-color:canvastext}.nmj5ie5:disabled{border-color:graytext}}}
|
package/dist/Dialog/Dialog.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.dialog{.iyoziv0{background-color:color-mix(in srgb, var(--color-shadow) 40%, transparent);transition:opacity var(--duration-med) var(--easing-standard);inset-block:0;inset-inline:0}.iyoziv0[data-starting-style],.iyoziv0[data-ending-style]{opacity:0}.iyoziv1{max-block-size:calc(100% - 2 * var(--space-16));border:var(--space-1) solid var(--color-border);transition:opacity var(--duration-med) var(--easing-standard), scale var(--duration-med) var(--easing-enter);inset-block:0;inset-inline:0}.iyoziv1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.iyoziv1[data-starting-style],.iyoziv1[data-ending-style]{opacity:0;scale:calc(1 - var(--scale-med))}.iyoziv2{inline-size:min(100% - 2 * var(--space-16), 6 * var(--space-64))}.iyoziv3{inline-size:min(100% - 2 * var(--space-16), 8 * var(--space-64))}.iyoziv4{inline-size:min(100% - 2 * var(--space-16), 10 * var(--space-64))}}
|
package/dist/Field/Field.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.field{._13w7r940[data-disabled]{color:var(--color-fg-muted)}._13w7r941{overflow-wrap:anywhere}._13w7r942{vertical-align:middle;margin-inline-end:var(--space-4);display:inline-block}}
|
package/dist/Heading/Heading.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.heading{.yaxwxv0{text-wrap:balance}}
|
package/dist/Icon/Icon.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.icon{.wz3ei00{flex-shrink:0}.wz3ei01{inline-size:var(--font-size-xs);block-size:var(--font-size-xs)}.wz3ei02{inline-size:var(--font-size-sm);block-size:var(--font-size-sm)}.wz3ei03{inline-size:var(--font-size-med);block-size:var(--font-size-med)}.wz3ei04{inline-size:var(--font-size-lg);block-size:var(--font-size-lg)}.wz3ei05{inline-size:var(--font-size-xl);block-size:var(--font-size-xl)}.wz3ei06{inline-size:var(--font-size-2xl);block-size:var(--font-size-2xl)}.wz3ei07{inline-size:var(--font-size-3xl);block-size:var(--font-size-3xl)}.wz3ei08{inline-size:var(--font-size-4xl);block-size:var(--font-size-4xl)}}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.icon-button{.n2fy8x0{border-width:var(--space-1);border-style:solid}.n2fy8x0[aria-disabled=true]{background-color:var(--color-bg-muted);border-color:var(--color-border-strong);color:var(--color-fg-muted);border-style:dashed}.n2fy8x0:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent));box-shadow:inset 0 0 0 var(--space-1) currentColor}.n2fy8x2{border-color:#0000}.n2fy8x3{border-color:var(--color-border-strong)}@media (hover:hover){.n2fy8x0:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent))}}@media (forced-colors:active){.n2fy8x0{forced-color-adjust:none}.n2fy8x0:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:none}.n2fy8x0[aria-disabled=true]{color:graytext;border-color:graytext}.n2fy8x0:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:none}}}
|
package/dist/Inline/Inline.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.inline;
|
package/dist/Menu/Menu.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.menu{._393eil1{border:var(--space-1) solid var(--color-border);transform-origin:var(--transform-origin);transition:opacity var(--duration-fast) var(--easing-standard), scale var(--duration-fast) var(--easing-enter)}._393eil1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._393eil1[data-starting-style],._393eil1[data-ending-style]{opacity:0;scale:calc(1 - var(--scale-med))}._393eil2{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}._393eil2:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._393eil2[data-highlighted]{background-color:light-dark(var(--color-bg-muted),color-mix(in srgb, var(--color-fg) 10%, var(--color-bg-raised)))}._393eil2[aria-disabled=true]{color:var(--color-fg-muted);cursor:not-allowed}._393eil3{text-decoration:none}._393eil4{border-block-start-color:var(--color-border)}._393eil4:before{content:"";border-block-start:var(--space-1) solid;border-block-start-color:inherit;display:block}@media (forced-colors:active){._393eil2[data-highlighted]:not([aria-disabled=true]){forced-color-adjust:none;color:highlighttext;background-color:highlight}._393eil2[aria-disabled=true]{color:graytext}}}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.multiselect{._1seauxl0{text-align:start;justify-content:stretch}:where(._1seauxl0) ._1gwwloa0{flex:auto;justify-items:stretch;min-inline-size:0}:where(._1seauxl0) ._1gwwloa1{min-inline-size:0}:where(._1seauxl0) ._1gwwloa2{flex:auto;min-inline-size:0}._1seauxl1{min-inline-size:0;display:block}._1seauxl1[data-placeholder]{color:var(--color-fg-muted)}._1seauxl2{min-inline-size:0;display:grid}._1seauxl3{grid-area:1/1}._1seauxl3[aria-hidden=true]{visibility:hidden}._1seauxl4{grid-area:1/1}._1seauxl5{border:var(--space-1) solid var(--color-border);min-inline-size:var(--anchor-width);max-block-size:var(--available-height);transform-origin:var(--transform-origin);transition:opacity var(--duration-fast) var(--easing-standard), scale var(--duration-fast) var(--easing-enter);overflow-y:auto}._1seauxl5:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1seauxl5[data-starting-style],._1seauxl5[data-ending-style]{opacity:0;scale:calc(1 - var(--scale-med))}._1seauxl6{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}._1seauxl6:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1seauxl6[data-highlighted]{background-color:light-dark(var(--color-bg-muted),color-mix(in srgb, var(--color-fg) 10%, var(--color-bg-raised)))}._1seauxl6[aria-disabled=true]{color:var(--color-fg-muted);cursor:not-allowed}._1seauxl7{visibility:hidden;flex-shrink:0}._1seauxl6[aria-selected=true] ._1seauxl7{visibility:visible}@media (forced-colors:active){._1seauxl6[data-highlighted]{forced-color-adjust:none;color:highlighttext;background-color:highlight}._1seauxl6[aria-disabled=true]{color:graytext}}}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.search-field{._1cj8r6g0{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}._1cj8r6g1{appearance:none;border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);border-radius:var(--radius-med);background-color:var(--color-bg);inline-size:100%;min-inline-size:0;color:var(--color-fg);grid-area:1/1;padding-block:0}._1cj8r6g1::placeholder{color:var(--color-fg-muted);opacity:1}._1cj8r6g1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1cj8r6g1:disabled{background-color:var(--color-bg-muted);color:var(--color-fg-muted);cursor:not-allowed;border-style:dashed}._1cj8r6g1[aria-invalid=true]{border-color:var(--color-danger)}._1cj8r6g1::-webkit-search-cancel-button{appearance:none}._1cj8r6g1::-webkit-search-decoration{appearance:none}._1cj8r6g2{block-size:var(--size-sm);padding-inline-start:calc(var(--space-8) + var(--space-8) + var(--font-size-sm));padding-inline-end:var(--size-sm)}._1cj8r6g3{block-size:var(--size-med);padding-inline-start:calc(var(--space-12) + var(--space-8) + var(--font-size-med));padding-inline-end:var(--size-med)}._1cj8r6g4{block-size:var(--size-lg);padding-inline-start:calc(var(--space-16) + var(--space-8) + var(--font-size-lg));padding-inline-end:var(--size-lg)}._1cj8r6g5{pointer-events:none;color:var(--color-fg-muted);grid-area:1/1;justify-self:start}._1cj8r6g6{margin-inline-start:var(--space-8)}._1cj8r6g7{margin-inline-start:var(--space-12)}._1cj8r6g8{margin-inline-start:var(--space-16)}._1cj8r6g9{border-color:#0000;grid-area:1/1;justify-self:end;margin-inline-end:var(--space-4)}@media (forced-colors:active){._1cj8r6g1:disabled{color:graytext;border-color:graytext}}}
|
package/dist/Stack/Stack.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.stack;
|
package/dist/Tabs/Tabs.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.tabs{.xowpd00{border-block-end:var(--space-1) solid var(--color-border)}.xowpd00[aria-orientation=vertical]{border-block-end:none;border-inline-end:var(--space-1) solid var(--color-border);flex-direction:column}.xowpd01{transition:color var(--duration-fast) var(--easing-standard)}.xowpd01[aria-selected=true]{color:var(--color-fg)}.xowpd01[aria-disabled=true]{opacity:.5}.xowpd02{border-block-end:var(--space-2) solid var(--color-accent);opacity:0;scale:calc(1 - var(--scale-lg)) 1;transition:opacity var(--duration-med) var(--easing-standard), scale var(--duration-med) var(--easing-standard);pointer-events:none;inset-block-end:calc(-1 * var(--space-1));inset-inline:0}[aria-orientation=vertical]>[role=tab]>.xowpd02{inset-inline:auto;border-block-end:none;border-inline-end:var(--space-2) solid var(--color-accent);scale:1 calc(1 - var(--scale-lg));inset-block:0;inset-inline-end:calc(-1 * var(--space-1))}[aria-selected=true]>.xowpd02{opacity:1;scale:1}.xowpd03:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.xowpd03[data-orientation=vertical]{flex-basis:0}@media (hover:hover){.xowpd01:not([aria-disabled=true]):hover{color:var(--color-fg)}}@media (forced-colors:active){.xowpd01[aria-disabled=true]{color:graytext}.xowpd02{border-color:highlight}}}
|
package/dist/Tag/Tag.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.tag{._1jsyd8s0{border-width:var(--space-1);border-style:solid;border-color:#0000}._1jsyd8s1{overflow-wrap:anywhere}._1jsyd8s0:hover ._1jsyd8s1,._1jsyd8s0:focus-within ._1jsyd8s1{padding-block:var(--space-4);margin-block:0}._1jsyd8s2{text-decoration:underline}._1jsyd8s3:hover{background-color:var(--color-bg)}@media (forced-colors:active){._1jsyd8s0{color:canvastext;background-color:canvas;border-color:canvastext}}}
|
package/dist/Text/Text.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.text{._1mgdisq3{--_1mgdisq0:var(--line-height-med);--_1mgdisq1:calc((var(--font-trim-body-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-body-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-body);font-size:var(--font-size-med);font-weight:var(--font-weight-regular);line-height:var(--_1mgdisq0)}._1mgdisq3:before{content:"";margin-block-end:var(--_1mgdisq1);display:table}._1mgdisq3:after{content:"";margin-block-start:var(--_1mgdisq2);display:table}:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var){--_1mgdisq0:inherit;--_1mgdisq1:inherit;--_1mgdisq2:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;display:inline}:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var):before,:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var):after{content:none}._1mgdisq4{--_1mgdisq0:inherit;--_1mgdisq1:inherit;--_1mgdisq2:inherit;text-overflow:ellipsis;white-space:nowrap;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}._1mgdisq4:before,._1mgdisq4:after{content:none}._1mgdisq5{--_1mgdisq1:calc((var(--font-trim-body-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-body-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-body)}._1mgdisq6{--_1mgdisq1:calc((var(--font-trim-heading-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-heading-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-heading)}._1mgdisq7{--_1mgdisq1:calc((var(--font-trim-display-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-display-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-display)}._1mgdisq8{--_1mgdisq1:calc((var(--font-trim-label-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-label-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-label)}._1mgdisq9{--_1mgdisq1:calc((var(--font-trim-mono-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-mono-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-mono)}._1mgdisqa{font-size:var(--font-size-xs)}._1mgdisqb{font-size:var(--font-size-sm)}._1mgdisqc{font-size:var(--font-size-med)}._1mgdisqd{font-size:var(--font-size-lg)}._1mgdisqe{font-size:var(--font-size-xl)}._1mgdisqf{font-size:var(--font-size-2xl)}._1mgdisqg{font-size:var(--font-size-3xl)}._1mgdisqh{font-size:var(--font-size-4xl)}._1mgdisqi{font-weight:var(--font-weight-regular)}._1mgdisqj{font-weight:var(--font-weight-medium)}._1mgdisqk{font-weight:var(--font-weight-semibold)}._1mgdisql{font-weight:var(--font-weight-bold)}._1mgdisqm{--_1mgdisq0:var(--line-height-sm);line-height:var(--_1mgdisq0)}._1mgdisqn{--_1mgdisq0:var(--line-height-med);line-height:var(--_1mgdisq0)}._1mgdisqo{--_1mgdisq0:var(--line-height-lg);line-height:var(--_1mgdisq0)}._1mgdisqp{white-space:nowrap}._1mgdisqq{text-overflow:ellipsis;white-space:nowrap;margin-block-start:var(--_1mgdisq1);margin-block-end:var(--_1mgdisq2);padding-block-start:calc(-1 * var(--_1mgdisq1));padding-block-end:calc(-1 * var(--_1mgdisq2))}:where([data-text-reveal]:hover,[data-text-reveal]:focus-within) ._1mgdisqq{white-space:normal;text-overflow:clip}}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.text-field{._20at410{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}._20at411{appearance:none;border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);border-radius:var(--radius-med);background-color:var(--color-bg);inline-size:100%;min-inline-size:0;color:var(--color-fg);padding-block:0}._20at411::placeholder{color:var(--color-fg-muted);opacity:1}._20at411:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._20at411:disabled{background-color:var(--color-bg-muted);color:var(--color-fg-muted);cursor:not-allowed;border-style:dashed}._20at411[aria-invalid=true]{border-color:var(--color-danger)}._20at412{block-size:var(--size-sm);padding-inline:var(--space-8)}._20at413{block-size:var(--size-med);padding-inline:var(--space-12)}._20at414{block-size:var(--size-lg);padding-inline:var(--space-16)}@media (forced-colors:active){._20at411:disabled{color:graytext;border-color:graytext}}}
|
package/dist/Toast/Toast.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.toast{.hcnvsc1{inline-size:min(100% - 2 * var(--space-16), 6 * var(--space-64));inset-block-end:var(--space-16);inset-inline-end:var(--space-16);container:hcnvsc0/inline-size}.hcnvsc1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.hcnvsc2{gap:var(--space-8);margin:calc(-1 * var(--space-16));padding:var(--space-16);overscroll-behavior:contain;flex-direction:column;max-block-size:100dvh;margin-inline-start:calc(-1 * var(--space-24));padding-inline-start:var(--space-24);display:flex;overflow:hidden auto}.hcnvsc2:empty{padding:0}.hcnvsc2:has([data-swiping],[data-swipe-direction=down]){overflow-y:hidden}.hcnvsc3{border:var(--space-1) solid var(--color-border);transform:translate(var(--toast-swipe-movement-x,0), var(--toast-swipe-movement-y,0));transition:opacity var(--duration-med) var(--easing-standard), translate var(--duration-med) var(--easing-enter), transform var(--duration-med) var(--easing-enter)}.hcnvsc3:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.hcnvsc3[data-starting-style],.hcnvsc3[data-ending-style]{opacity:0;translate:0 var(--distance-med)}.hcnvsc3[data-swiping]{transition:none}.hcnvsc3[data-limited]{display:none}.hcnvsc4{overflow-wrap:anywhere}.hcnvsca{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0;overflow:hidden}@container hcnvsc0 (inline-size<16rem){.hcnvsc3{flex-wrap:wrap}.hcnvsc4{flex-basis:100%;order:1}.hcnvsc5{margin-inline-start:auto}}}
|
package/dist/Toast/client.mjs
CHANGED
|
@@ -11,10 +11,10 @@ import { CircleCheckIcon as c } from "../icons/CircleCheckIcon.mjs";
|
|
|
11
11
|
import { InfoIcon as l } from "../icons/InfoIcon.mjs";
|
|
12
12
|
import { announcer as u, close as d, content as f, list as p, root as m, toast as h, viewport as g } from "./Toast.css.mjs";
|
|
13
13
|
import { jsx as _, jsxs as v } from "react/jsx-runtime";
|
|
14
|
-
import { createContext as y, use as b, useCallback as x,
|
|
15
|
-
import { Toast as
|
|
14
|
+
import { createContext as y, use as b, useCallback as x, useEffect as S, useLayoutEffect as C, useMemo as w, useRef as T, useState as E } from "react";
|
|
15
|
+
import { Toast as D } from "@base-ui/react/toast";
|
|
16
16
|
//#region src/Toast/client.tsx
|
|
17
|
-
var
|
|
17
|
+
var O = {
|
|
18
18
|
info: {
|
|
19
19
|
Icon: l,
|
|
20
20
|
color: "fgMuted"
|
|
@@ -27,13 +27,13 @@ var D = {
|
|
|
27
27
|
Icon: o,
|
|
28
28
|
color: "danger"
|
|
29
29
|
}
|
|
30
|
-
},
|
|
31
|
-
function
|
|
32
|
-
let { container: c, ref: l } = a(), [u] =
|
|
33
|
-
return /* @__PURE__ */ _(
|
|
30
|
+
}, k = y(null), A = y(null), j = (e) => e !== void 0 && Object.hasOwn(O, e);
|
|
31
|
+
function M({ limit: e = 3, closeLabel: n = "Dismiss", regionLabel: r = "Notifications", className: i, style: o, children: s }) {
|
|
32
|
+
let { container: c, ref: l } = a(), [u] = E(D.createToastManager);
|
|
33
|
+
return /* @__PURE__ */ _(D.Provider, {
|
|
34
34
|
limit: e,
|
|
35
35
|
toastManager: u,
|
|
36
|
-
children: /* @__PURE__ */ v(
|
|
36
|
+
children: /* @__PURE__ */ v(k, {
|
|
37
37
|
value: u,
|
|
38
38
|
children: [
|
|
39
39
|
/* @__PURE__ */ _(t, {
|
|
@@ -42,23 +42,38 @@ function j({ limit: e = 3, closeLabel: n = "Dismiss", regionLabel: r = "Notifica
|
|
|
42
42
|
ref: l
|
|
43
43
|
}),
|
|
44
44
|
s,
|
|
45
|
-
/* @__PURE__ */ _(
|
|
46
|
-
/* @__PURE__ */ _(
|
|
45
|
+
/* @__PURE__ */ _(P, {}),
|
|
46
|
+
/* @__PURE__ */ _(D.Portal, {
|
|
47
47
|
container: c,
|
|
48
|
-
children: /* @__PURE__ */ _(
|
|
48
|
+
children: /* @__PURE__ */ _(N, {
|
|
49
49
|
className: i,
|
|
50
50
|
regionLabel: r,
|
|
51
51
|
style: o,
|
|
52
|
-
children: /* @__PURE__ */ _(
|
|
52
|
+
children: /* @__PURE__ */ _(F, { closeLabel: n })
|
|
53
53
|
})
|
|
54
54
|
})
|
|
55
55
|
]
|
|
56
56
|
})
|
|
57
57
|
});
|
|
58
58
|
}
|
|
59
|
-
function
|
|
60
|
-
let o =
|
|
61
|
-
return
|
|
59
|
+
function N({ regionLabel: n, className: r, style: i, children: a }) {
|
|
60
|
+
let o = T(null), s = T(null);
|
|
61
|
+
return S(() => {
|
|
62
|
+
let e = s.current;
|
|
63
|
+
if (!e) return;
|
|
64
|
+
let t = e.ownerDocument, n = !1, r = (t) => {
|
|
65
|
+
e.contains(t.target) ? n = !0 : n && (n = !1, e.dispatchEvent(new MouseEvent("mouseout", {
|
|
66
|
+
bubbles: !0,
|
|
67
|
+
relatedTarget: e.parentElement
|
|
68
|
+
})));
|
|
69
|
+
}, i = (t) => {
|
|
70
|
+
let r = t.relatedTarget;
|
|
71
|
+
(!r || !e.contains(r)) && (n = !1);
|
|
72
|
+
};
|
|
73
|
+
return t.addEventListener("mouseover", r), t.addEventListener("mouseout", i), () => {
|
|
74
|
+
t.removeEventListener("mouseover", r), t.removeEventListener("mouseout", i);
|
|
75
|
+
};
|
|
76
|
+
}, []), /* @__PURE__ */ _(D.Viewport, {
|
|
62
77
|
"aria-atomic": void 0,
|
|
63
78
|
"aria-label": n,
|
|
64
79
|
"aria-live": "off",
|
|
@@ -67,6 +82,7 @@ function M({ regionLabel: n, className: r, style: i, children: a }) {
|
|
|
67
82
|
let t = e.relatedTarget;
|
|
68
83
|
t && !e.currentTarget.contains(t) && (o.current = t);
|
|
69
84
|
},
|
|
85
|
+
ref: s,
|
|
70
86
|
render: /* @__PURE__ */ _(t, {
|
|
71
87
|
className: e(g, r),
|
|
72
88
|
position: "fixed",
|
|
@@ -75,15 +91,15 @@ function M({ regionLabel: n, className: r, style: i, children: a }) {
|
|
|
75
91
|
}),
|
|
76
92
|
children: /* @__PURE__ */ _("div", {
|
|
77
93
|
className: p,
|
|
78
|
-
children: /* @__PURE__ */ _(
|
|
94
|
+
children: /* @__PURE__ */ _(A, {
|
|
79
95
|
value: o,
|
|
80
96
|
children: a
|
|
81
97
|
})
|
|
82
98
|
})
|
|
83
99
|
});
|
|
84
100
|
}
|
|
85
|
-
function
|
|
86
|
-
let { toasts: e } =
|
|
101
|
+
function P() {
|
|
102
|
+
let { toasts: e } = D.useToastManager(), t = (t) => e.filter((e) => e.type === "error" === t).map((e) => /* @__PURE__ */ v("div", { children: [
|
|
87
103
|
e.title,
|
|
88
104
|
" ",
|
|
89
105
|
e.description
|
|
@@ -103,18 +119,18 @@ function N() {
|
|
|
103
119
|
})]
|
|
104
120
|
});
|
|
105
121
|
}
|
|
106
|
-
function
|
|
107
|
-
let { toasts: t } =
|
|
108
|
-
return t.map((t) => /* @__PURE__ */ _(
|
|
122
|
+
function F({ closeLabel: e }) {
|
|
123
|
+
let { toasts: t } = D.useToastManager();
|
|
124
|
+
return t.map((t) => /* @__PURE__ */ _(I, {
|
|
109
125
|
closeLabel: e,
|
|
110
126
|
toast: t
|
|
111
127
|
}, t.id));
|
|
112
128
|
}
|
|
113
|
-
function
|
|
114
|
-
let c =
|
|
115
|
-
e &&
|
|
116
|
-
}, []), M =
|
|
117
|
-
return
|
|
129
|
+
function I({ toast: a, closeLabel: o }) {
|
|
130
|
+
let c = j(a.type) ? a.type : "info", { Icon: l, color: u } = O[c], p = b(k), g = b(A), [y, S] = E(!1), w = x((e) => {
|
|
131
|
+
e && S(getComputedStyle(e).direction === "rtl");
|
|
132
|
+
}, []), M = T(!1), N = a.transitionStatus === "ending";
|
|
133
|
+
return C(() => {
|
|
118
134
|
let e = a.ref?.current, t = e?.ownerDocument.activeElement;
|
|
119
135
|
if (!N || M.current || !t || !e.contains(t)) return;
|
|
120
136
|
let n = g?.current;
|
|
@@ -123,9 +139,9 @@ function F({ toast: a, closeLabel: o }) {
|
|
|
123
139
|
N,
|
|
124
140
|
g,
|
|
125
141
|
a.ref
|
|
126
|
-
]), /* @__PURE__ */ v(
|
|
142
|
+
]), /* @__PURE__ */ v(D.Root, {
|
|
127
143
|
"aria-modal": void 0,
|
|
128
|
-
ref:
|
|
144
|
+
ref: w,
|
|
129
145
|
render: /* @__PURE__ */ _(t, {
|
|
130
146
|
alignItems: "start",
|
|
131
147
|
backgroundColor: "bgRaised",
|
|
@@ -154,27 +170,27 @@ function F({ toast: a, closeLabel: o }) {
|
|
|
154
170
|
flexGrow: 1,
|
|
155
171
|
gap: "8",
|
|
156
172
|
children: [
|
|
157
|
-
/* @__PURE__ */ _(
|
|
173
|
+
/* @__PURE__ */ _(D.Title, { render: /* @__PURE__ */ _(r, {
|
|
158
174
|
as: "div",
|
|
159
175
|
weight: "medium"
|
|
160
176
|
}) }),
|
|
161
|
-
/* @__PURE__ */ _(
|
|
177
|
+
/* @__PURE__ */ _(D.Description, { render: /* @__PURE__ */ _(r, {
|
|
162
178
|
as: "div",
|
|
163
179
|
color: "fgMuted",
|
|
164
180
|
size: "sm"
|
|
165
181
|
}) }),
|
|
166
|
-
/* @__PURE__ */ _(
|
|
182
|
+
/* @__PURE__ */ _(D.Action, { render: /* @__PURE__ */ _(i, {
|
|
167
183
|
size: "sm",
|
|
168
184
|
variant: "secondary"
|
|
169
185
|
}) })
|
|
170
186
|
]
|
|
171
187
|
}),
|
|
172
|
-
/* @__PURE__ */ _(
|
|
188
|
+
/* @__PURE__ */ _(D.Close, {
|
|
173
189
|
"aria-hidden": !1,
|
|
174
190
|
"aria-label": o,
|
|
175
191
|
onClick: (e) => {
|
|
176
192
|
if (e.detail !== 0 || !p) return;
|
|
177
|
-
let t = a.ref?.current, n = (t &&
|
|
193
|
+
let t = a.ref?.current, n = (t && L(t)) ?? g?.current;
|
|
178
194
|
n instanceof HTMLElement && (e.preventBaseUIHandler(), M.current = !0, p.close(a.id), requestAnimationFrame(() => {
|
|
179
195
|
n.isConnected && n.focus();
|
|
180
196
|
}));
|
|
@@ -190,14 +206,14 @@ function F({ toast: a, closeLabel: o }) {
|
|
|
190
206
|
]
|
|
191
207
|
});
|
|
192
208
|
}
|
|
193
|
-
function
|
|
209
|
+
function L(e) {
|
|
194
210
|
let t = (e, n) => !e || !e.matches("[data-ending-style]") ? e : t(n ? e.nextElementSibling : e.previousElementSibling, n);
|
|
195
211
|
return (t(e.nextElementSibling, !0) ?? t(e.previousElementSibling, !1))?.querySelector(`.${d}`);
|
|
196
212
|
}
|
|
197
|
-
function
|
|
198
|
-
let e = b(
|
|
213
|
+
function R() {
|
|
214
|
+
let e = b(k);
|
|
199
215
|
if (!e) throw Error("useToast must be called under Toast.Provider.");
|
|
200
|
-
return
|
|
216
|
+
return w(() => {
|
|
201
217
|
let t = (t) => e.close(t);
|
|
202
218
|
return {
|
|
203
219
|
add: ({ title: n, description: r, variant: i = "info", duration: a = i === "error" ? 0 : 5e3, action: o }) => {
|
|
@@ -225,4 +241,4 @@ function L() {
|
|
|
225
241
|
}, [e]);
|
|
226
242
|
}
|
|
227
243
|
//#endregion
|
|
228
|
-
export {
|
|
244
|
+
export { P as ToastAnnouncer, I as ToastItem, M as ToastProvider, N as ToastStack, R as useToast };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer components.visually-hidden{._1qk18b30{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}}
|
package/dist/base.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer tokens{:root{--space-0:0rem;--space-1:.0625rem;--space-2:.125rem;--space-4:.25rem;--space-6:.375rem;--space-8:.5rem;--space-12:.75rem;--space-16:1rem;--space-20:1.25rem;--space-24:1.5rem;--space-32:2rem;--space-40:2.5rem;--space-48:3rem;--space-64:4rem;--space-80:5rem;--space-96:6rem;--size-xs:1.5rem;--size-sm:2rem;--size-med:2.5rem;--size-lg:3rem;--size-xl:3.5rem;--container-prose:40rem;--container-page:64rem;--container-wide:80rem;--radius-none:0;--radius-sm:.25rem;--radius-med:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-med:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-sm:1.25;--line-height-med:1.5;--line-height-lg:1.75;--z-index-base:0;--z-index-raised:1;--z-index-dropdown:1000;--z-index-sticky:1100;--z-index-overlay:1200;--z-index-modal:1300;--z-index-popover:1400;--z-index-toast:1500;--z-index-tooltip:1600;--duration-fast:.12s;--duration-med:.2s;--duration-slow:.32s;--easing-standard:cubic-bezier(.2, 0, 0, 1);--easing-enter:cubic-bezier(0, 0, 0, 1);--easing-exit:cubic-bezier(.3, 0, 1, 1);--distance-sm:.25rem;--distance-med:.5rem;--distance-lg:1rem;--scale-sm:.02;--scale-med:.05;--scale-lg:.1}[data-brand]{--shadow-sm:0 1px 2px color-mix(in srgb, var(--color-shadow) 12%, transparent);--shadow-med:0 2px 8px color-mix(in srgb, var(--color-shadow) 14%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 8%, transparent);--shadow-lg:0 8px 24px color-mix(in srgb, var(--color-shadow) 16%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 8%, transparent)}[data-brand][data-mode=light]{color-scheme:light}[data-brand][data-mode=dark]{--shadow-sm:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 40%, transparent);--shadow-med:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 2px 8px color-mix(in srgb, var(--color-shadow) 48%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 32%, transparent);--shadow-lg:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 8px 24px color-mix(in srgb, var(--color-shadow) 56%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 32%, transparent);color-scheme:dark}[data-brand][data-mode=system]{color-scheme:light dark}:dir(ltr){--dir:1}:dir(rtl){--dir:-1}@media (prefers-color-scheme:dark){[data-brand][data-mode=system]{--shadow-sm:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 40%, transparent);--shadow-med:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 2px 8px color-mix(in srgb, var(--color-shadow) 48%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 32%, transparent);--shadow-lg:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 8px 24px color-mix(in srgb, var(--color-shadow) 56%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 32%, transparent)}}@media (prefers-reduced-motion:reduce){:root{--distance-sm:0rem;--distance-med:0rem;--distance-lg:0rem;--scale-sm:0;--scale-med:0;--scale-lg:0;--duration-fast:.12s;--duration-med:.12s;--duration-slow:.12s}}}
|
|
3
3
|
|
|
4
4
|
@font-face{src:local(Arial),local(ArialMT);font-weight:400;font-style:normal;size-adjust:101.568%;ascent-override:95.3892%;descent-override:23.7511%;line-gap-override:0%;font-family:Inter Fallback}@font-face{src:local(Arial Bold),local(Arial-BoldMT);font-weight:700;font-style:normal;size-adjust:101.637%;ascent-override:95.3241%;descent-override:23.7349%;line-gap-override:0%;font-family:Inter Fallback}@font-face{src:local(Arial Italic),local(Arial-ItalicMT);font-weight:400;font-style:italic;size-adjust:101.637%;ascent-override:95.3241%;descent-override:23.7349%;line-gap-override:0%;font-family:Inter Fallback}@font-face{src:local(Arial Bold Italic),local(Arial-BoldItalicMT);font-weight:700;font-style:italic;size-adjust:101.706%;ascent-override:95.2591%;descent-override:23.7187%;line-gap-override:0%;font-family:Inter Fallback}@font-face{src:local(Courier New),local(CourierNewPSMT);font-weight:400;font-style:normal;size-adjust:127.781%;ascent-override:79.8319%;descent-override:23.48%;line-gap-override:0%;font-family:JetBrains Mono Fallback}@font-face{src:local(Courier New Bold),local(CourierNewPS-BoldMT);font-weight:700;font-style:normal;size-adjust:123.353%;ascent-override:82.6977%;descent-override:24.3229%;line-gap-override:0%;font-family:JetBrains Mono Fallback}@font-face{src:local(Courier New Italic),local(CourierNewPS-ItalicMT);font-weight:400;font-style:italic;size-adjust:127.781%;ascent-override:79.8319%;descent-override:23.48%;line-gap-override:0%;font-family:JetBrains Mono Fallback}@font-face{src:local(Courier New Bold Italic),local(CourierNewPS-BoldItalicMT);font-weight:700;font-style:italic;size-adjust:123.353%;ascent-override:82.6977%;descent-override:24.3229%;line-gap-override:0%;font-family:JetBrains Mono Fallback}@layer tokens{[data-brand=default]{--color-bg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-bg-muted:light-dark(oklch(96.8% .004 265),oklch(27% .01 265));--color-bg-raised:light-dark(oklch(100% 0 0),oklch(20.5% .008 265));--color-fg:light-dark(oklch(14.5% .006 265),oklch(98.5% .002 265));--color-fg-muted:light-dark(oklch(44.5% .014 265),oklch(71% .012 265));--color-border:light-dark(oklch(92.5% .006 265),oklch(27% .01 265));--color-border-strong:oklch(55.5% .014 265);--color-accent:light-dark(oklch(54.6% .19 258),oklch(70.7% .14 258));--color-accent-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-danger:light-dark(oklch(56% .2 25),oklch(70.4% .17 25));--color-danger-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-success:light-dark(oklch(52% .135 150),oklch(76% .15 150));--color-success-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-warning:light-dark(oklch(53% .11 75),oklch(81% .145 75));--color-warning-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-focus:light-dark(oklch(54.6% .19 258),oklch(70.7% .14 258));--color-shadow:light-dark(oklch(14.5% .006 265),oklch(0% 0 0));--font-body:"Inter", "Inter Fallback", sans-serif;--font-heading:"Inter", "Inter Fallback", sans-serif;--font-display:"Inter", "Inter Fallback", sans-serif;--font-label:"Inter", "Inter Fallback", sans-serif;--font-mono:"JetBrains Mono", "JetBrains Mono Fallback", monospace;--font-trim-body-cap:.36377;--font-trim-body-baseline:.36377;--font-trim-heading-cap:.36377;--font-trim-heading-baseline:.36377;--font-trim-display-cap:.36377;--font-trim-display-baseline:.36377;--font-trim-label-cap:.36377;--font-trim-label-baseline:.36377;--font-trim-mono-cap:.37;--font-trim-mono-baseline:.36}@media (forced-colors:active){[data-brand][data-brand]{--color-bg:Canvas;--color-bg-muted:Canvas;--color-bg-raised:Canvas;--color-fg:CanvasText;--color-fg-muted:CanvasText;--color-border:CanvasText;--color-border-strong:CanvasText;--color-accent:LinkText;--color-accent-fg:Canvas;--color-danger:CanvasText;--color-danger-fg:Canvas;--color-success:CanvasText;--color-success-fg:Canvas;--color-warning:CanvasText;--color-warning-fg:Canvas;--color-focus:Highlight;--color-shadow:CanvasText}}}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
# Avatar
|
|
2
|
+
|
|
3
|
+
## Purpose
|
|
4
|
+
|
|
5
|
+
Identifies a person, project or account by one or two letters in a circle, on a colour of the consumer's choosing or a neutral fill. A `span` with `role="img"`, named by `label`, around a `Text` in the `label` font. It is never focusable.
|
|
6
|
+
|
|
7
|
+
## When to use
|
|
8
|
+
|
|
9
|
+
- Beside a name in a list, row or header, where the letters help the eye find the person or project.
|
|
10
|
+
- In place of a photo when there is none: the app has a name and, maybe, a colour for each person or project.
|
|
11
|
+
|
|
12
|
+
## When not to use
|
|
13
|
+
|
|
14
|
+
- A status or a short fact: use `Badge`.
|
|
15
|
+
- A category or topic label: use `Tag`.
|
|
16
|
+
- Anything pressable on its own: compose `Clickable` around it (below); Avatar has no `href`, click, hover or focus state.
|
|
17
|
+
- A photo or a logo: not Avatar's job yet; it draws letters only.
|
|
18
|
+
- An icon: use `Icon`, or `IconButton` for an action.
|
|
19
|
+
|
|
20
|
+
## Rules
|
|
21
|
+
|
|
22
|
+
- `initials`: one or two letters; the first two characters show. Upper-case them yourself ("JM", not "jm").
|
|
23
|
+
- `label`: required, the accessible name: who or what the letters stand for ("Jon Milner"). There is no `title` tooltip: the name is never only in a tooltip, so show it in text nearby where sighted users need it.
|
|
24
|
+
- `color`: a `#rrggbb` fill, the same in light and dark mode. The letters are black or white, whichever reads on it: black when the fill's relative luminance is above 0.18, where black and white tie at about 4.6:1. Unset, `null`, or anything that is not six-digit hex (`"red"`, `#fff`) takes the neutral fill: `fgMuted` on `bgMuted` with a `border` edge.
|
|
25
|
+
- `size`: `sm` 20px, `med` (default) 28px, `lg` 40px. The letters are the `xs`, `sm` and `lg` `fontSize` steps. Two of the widest letters ("WW", "MW") can run past the `sm` circle's edge; most pairs fit.
|
|
26
|
+
- The circle never shrinks in a flex row (`flexShrink` 0). Display (`inline-flex`), centering and radius (`full`) are default style props on the `span`; a consumer's win. `color` is the fill, so neither the text `color` nor the `backgroundColor` style prop is offered (nor `inlineSize` or `blockSize`: `size` sets the box), and a `backgroundColor` in `style` never replaces a `color` fill: the ink was picked for it. `className`, `style` and `ref` go to the `span`, `className` and `style` last.
|
|
27
|
+
- The module has no hooks, so a server component can render it.
|
|
28
|
+
- Migrating from the inbox's `Avatar`: `href` is gone (wrap it in `Clickable as="a"`), `title` is gone (show the name in text), and the circle is 20px at `sm`, not 22px.
|
|
29
|
+
|
|
30
|
+
## Do
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
<Inline alignItems="center" gap="8">
|
|
34
|
+
<Avatar color={project.color} initials="UI" label="UI library" size="sm" />
|
|
35
|
+
<Text as="span">UI library</Text>
|
|
36
|
+
</Inline>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
// A linked avatar: the link takes its name from the avatar's label.
|
|
41
|
+
<Clickable as="a" borderRadius="full" href="/people/jon">
|
|
42
|
+
<Avatar color="#0969da" initials="JM" label="Jon Milner" />
|
|
43
|
+
</Clickable>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Don't
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
// The letters say little on their own; the label names who they are.
|
|
50
|
+
<Avatar initials="JM" label="JM" />
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
// An avatar is not a button; compose Clickable for anything pressable.
|
|
55
|
+
<Avatar initials="JM" label="Jon Milner" onClick={openProfile} />
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Accessibility
|
|
59
|
+
|
|
60
|
+
- `role="img"` with `aria-label`: screen readers read the label as one image ("Jon Milner, image") and skip the letters. Inside a `Clickable` link, the link takes the label as its name.
|
|
61
|
+
- Every fill passes AA (4.5:1): black or white letters, by WCAG relative luminance, read at 4.5:1 or more on any `#rrggbb`. The neutral fill is the `fgMuted` on `bgMuted` pair in `contrastPairs` (ADR 0033).
|
|
62
|
+
- Under forced colors the fill goes and the transparent border turns `CanvasText`, so the circle stays; the letters are `CanvasText`.
|
|
63
|
+
|
|
64
|
+
## Props
|
|
65
|
+
|
|
66
|
+
Generated from the TypeScript types.
|
|
67
|
+
|
|
68
|
+
### Avatar
|
|
69
|
+
|
|
70
|
+
| Prop | Type | Required | Description |
|
|
71
|
+
| --- | --- | --- | --- |
|
|
72
|
+
| `color` | `string` | no | |
|
|
73
|
+
| `initials` | `string` | yes | |
|
|
74
|
+
| `label` | `string` | yes | |
|
|
75
|
+
| `size` | `"lg" \| "med" \| "sm"` | no | |
|
|
76
|
+
|
|
77
|
+
Also accepts the style props (see `manifest.json` `styleProps`).
|
package/dist/docs/Badge.md
CHANGED
|
@@ -12,6 +12,7 @@ A static label that states the status of, or a short fact about, the thing besid
|
|
|
12
12
|
## When not to use
|
|
13
13
|
|
|
14
14
|
- A category or topic label on content: use `Tag` (#101).
|
|
15
|
+
- Letters that stand for a person or project: use `Avatar`.
|
|
15
16
|
- A filter or choice the user toggles: use `Chip` (#102).
|
|
16
17
|
- Anything pressable: compose `Clickable`; Badge has no click, hover or focus state.
|
|
17
18
|
- A count or dot on another element (unread messages on an icon): not Badge's job.
|
package/dist/docs/Tag.md
CHANGED
|
@@ -13,6 +13,7 @@ A label that puts content in a category: a topic, a label, a user-made category.
|
|
|
13
13
|
## When not to use
|
|
14
14
|
|
|
15
15
|
- The status of, or a short fact about, a thing: use `Badge`.
|
|
16
|
+
- Letters that stand for a person or project: use `Avatar`.
|
|
16
17
|
- A filter or choice the user toggles on and off: use `Chip`.
|
|
17
18
|
- A whole-tag action other than a link or removal: compose `Clickable`.
|
|
18
19
|
- A sentence or a message: use `Text`.
|
package/dist/docs/llms.txt
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
## Components
|
|
6
6
|
|
|
7
7
|
- [AlertDialog](AlertDialog.md): Asks the user to confirm a consequential action before it runs: delete a project, discard unsaved changes, sign out every device. Built on Base UI's AlertDialog, which owns the behavior: `role="alertdialog"`, focus moves into the dialog and stays there, the page behind is inert, Esc closes it, and a click outside does not. It wears Dialog's panel at the `sm` width with a title, a description, Cancel and one confirm button, and Cancel takes focus on open.
|
|
8
|
+
- [Avatar](Avatar.md): Identifies a person, project or account by one or two letters in a circle, on a colour of the consumer's choosing or a neutral fill. A `span` with `role="img"`, named by `label`, around a `Text` in the `label` font. It is never focusable.
|
|
8
9
|
- [Badge](Badge.md): A static label that states the status of, or a short fact about, the thing beside it: "Draft", "Failed", "Beta". A `span` with a fill from the color roles around a `Text` in the `label` font. It has no role and is never focusable.
|
|
9
10
|
- [Box](Box.md): The base element every component builds on: one element, chosen with `as`, styled with style props. Style props are the token-backed classes from `@layer atoms`: layout (`display`, flex, `gap`, logical padding, margin and sizing), color roles, `borderRadius`, `boxShadow`, `position`, `zIndex`, `overflow` and `textAlign`.
|
|
10
11
|
- [Button](Button.md): The labelled action: a `<button type="button">` with the house look, or a link styled as one with `as="a"` (or a router's link). Three variants (`primary`, `secondary`, `danger`), three sizes (`sm`, `med`, `lg`, 32, 40 and 48 px high), a `loading` state that keeps its width, and icon slots before and after the label. It is built on `Clickable`, so it has the shared focus ring, the 24px minimum target and `aria-disabled` / `aria-busy` states that block activation while the button stays focusable.
|
package/dist/docs/manifest.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "./manifest.schema.json",
|
|
3
3
|
"package": "@jonmilner/ui",
|
|
4
|
-
"version": "0.5.
|
|
4
|
+
"version": "0.5.5",
|
|
5
5
|
"components": [
|
|
6
6
|
{
|
|
7
7
|
"name": "AlertDialog",
|
|
@@ -128,6 +128,39 @@
|
|
|
128
128
|
],
|
|
129
129
|
"exports": []
|
|
130
130
|
},
|
|
131
|
+
{
|
|
132
|
+
"name": "Avatar",
|
|
133
|
+
"styleProps": true,
|
|
134
|
+
"props": [
|
|
135
|
+
{
|
|
136
|
+
"name": "color",
|
|
137
|
+
"type": "string",
|
|
138
|
+
"required": false
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
"name": "initials",
|
|
142
|
+
"type": "string",
|
|
143
|
+
"required": true
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
"name": "label",
|
|
147
|
+
"type": "string",
|
|
148
|
+
"required": true
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"name": "size",
|
|
152
|
+
"type": "\"lg\" | \"med\" | \"sm\"",
|
|
153
|
+
"required": false,
|
|
154
|
+
"values": [
|
|
155
|
+
"lg",
|
|
156
|
+
"med",
|
|
157
|
+
"sm"
|
|
158
|
+
]
|
|
159
|
+
}
|
|
160
|
+
],
|
|
161
|
+
"parts": [],
|
|
162
|
+
"exports": []
|
|
163
|
+
},
|
|
131
164
|
{
|
|
132
165
|
"name": "Badge",
|
|
133
166
|
"styleProps": true,
|
package/dist/index.d.mts
CHANGED
|
@@ -5,6 +5,7 @@ import { Button, ButtonProps } from "./Button/index.mjs";
|
|
|
5
5
|
import { Dialog, DialogActionsProps, DialogBodyProps, DialogPopupProps, DialogProps } from "./Dialog/index.mjs";
|
|
6
6
|
import { DialogCloseProps, DialogTriggerProps } from "./Dialog/client.mjs";
|
|
7
7
|
import { AlertDialog, AlertDialogProps, AlertDialogTriggerProps } from "./AlertDialog/index.mjs";
|
|
8
|
+
import { Avatar, AvatarProps } from "./Avatar/index.mjs";
|
|
8
9
|
import { Badge, BadgeProps } from "./Badge/index.mjs";
|
|
9
10
|
import { Checkbox, CheckboxProps } from "./Checkbox/index.mjs";
|
|
10
11
|
import { Chip, ChipGroup, ChipGroupProps, ChipProps } from "./Chip/index.mjs";
|
|
@@ -29,4 +30,4 @@ import { Toast } from "./Toast/index.mjs";
|
|
|
29
30
|
import { VisuallyHidden, VisuallyHiddenProps } from "./VisuallyHidden/index.mjs";
|
|
30
31
|
import { Theme, defineTheme } from "./theme/define-theme.mjs";
|
|
31
32
|
import { ThemeProvider, ThemeProviderProps } from "./theme/ThemeProvider.mjs";
|
|
32
|
-
export { AlertDialog, type AlertDialogProps, type AlertDialogTriggerProps, Badge, type BadgeProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, Clickable, type ClickableProps, ColorField, type ColorFieldInputProps, type ColorFieldProps, Dialog, type DialogActionsProps, type DialogBodyProps, type DialogCloseProps, type DialogPopupProps, type DialogProps, type DialogTriggerProps, Field, type FieldDescriptionProps, type FieldErrorProps, type FieldLabelProps, type FieldProps, Heading, type HeadingLevel, type HeadingProps, type HeadingSize, Icon, IconButton, type IconButtonProps, type IconProps, Inline, type InlineProps, Menu, type MenuGroupProps, type MenuItemProps, type MenuLinkItemProps, type MenuPopupProps, type MenuProps, type MenuSeparatorProps, type MenuTriggerProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, SearchField, type SearchFieldInputProps, type SearchFieldProps, Stack, type StackProps, type StyleProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsProps, type TabsTabProps, Tag, type TagProps, Text, TextField, type TextFieldInputProps, type TextFieldProps, type TextProps, type Theme, ThemeProvider, type ThemeProviderProps, Toast, type ToastOptions, type ToastProviderProps, type ToastVariant, VisuallyHidden, type VisuallyHiddenProps, defineTheme, useToast };
|
|
33
|
+
export { AlertDialog, type AlertDialogProps, type AlertDialogTriggerProps, Avatar, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, Clickable, type ClickableProps, ColorField, type ColorFieldInputProps, type ColorFieldProps, Dialog, type DialogActionsProps, type DialogBodyProps, type DialogCloseProps, type DialogPopupProps, type DialogProps, type DialogTriggerProps, Field, type FieldDescriptionProps, type FieldErrorProps, type FieldLabelProps, type FieldProps, Heading, type HeadingLevel, type HeadingProps, type HeadingSize, Icon, IconButton, type IconButtonProps, type IconProps, Inline, type InlineProps, Menu, type MenuGroupProps, type MenuItemProps, type MenuLinkItemProps, type MenuPopupProps, type MenuProps, type MenuSeparatorProps, type MenuTriggerProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, SearchField, type SearchFieldInputProps, type SearchFieldProps, Stack, type StackProps, type StyleProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsProps, type TabsTabProps, Tag, type TagProps, Text, TextField, type TextFieldInputProps, type TextFieldProps, type TextProps, type Theme, ThemeProvider, type ThemeProviderProps, Toast, type ToastOptions, type ToastProviderProps, type ToastVariant, VisuallyHidden, type VisuallyHiddenProps, defineTheme, useToast };
|
package/dist/index.mjs
CHANGED
|
@@ -6,23 +6,24 @@ import { Button as i } from "./Button/index.mjs";
|
|
|
6
6
|
import { Heading as a } from "./Heading/index.mjs";
|
|
7
7
|
import { Dialog as o } from "./Dialog/index.mjs";
|
|
8
8
|
import { AlertDialog as s } from "./AlertDialog/index.mjs";
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
27
|
-
import {
|
|
28
|
-
|
|
9
|
+
import { Avatar as c } from "./Avatar/index.mjs";
|
|
10
|
+
import { Badge as l } from "./Badge/index.mjs";
|
|
11
|
+
import { Checkbox as u } from "./Checkbox/index.mjs";
|
|
12
|
+
import { Chip as d, ChipGroup as f } from "./Chip/index.mjs";
|
|
13
|
+
import { Field as p } from "./Field/index.mjs";
|
|
14
|
+
import { ColorField as m } from "./ColorField/index.mjs";
|
|
15
|
+
import { IconButton as h } from "./IconButton/index.mjs";
|
|
16
|
+
import { Inline as g } from "./Inline/index.mjs";
|
|
17
|
+
import { Menu as _ } from "./Menu/index.mjs";
|
|
18
|
+
import { MultiSelect as v } from "./MultiSelect/index.mjs";
|
|
19
|
+
import { SearchField as y } from "./SearchField/index.mjs";
|
|
20
|
+
import { Stack as b } from "./Stack/index.mjs";
|
|
21
|
+
import { Tabs as x } from "./Tabs/index.mjs";
|
|
22
|
+
import { Tag as S } from "./Tag/index.mjs";
|
|
23
|
+
import { TextField as C } from "./TextField/index.mjs";
|
|
24
|
+
import { defineTheme as w } from "./theme/define-theme.mjs";
|
|
25
|
+
import { ThemeProvider as T } from "./theme/ThemeProvider.mjs";
|
|
26
|
+
import { useToast as E } from "./Toast/client.mjs";
|
|
27
|
+
import { Toast as D } from "./Toast/index.mjs";
|
|
28
|
+
import { VisuallyHidden as O } from "./VisuallyHidden/index.mjs";
|
|
29
|
+
export { s as AlertDialog, c as Avatar, l as Badge, e as Box, i as Button, u as Checkbox, d as Chip, f as ChipGroup, t as Clickable, m as ColorField, o as Dialog, p as Field, a as Heading, n as Icon, h as IconButton, g as Inline, _ as Menu, v as MultiSelect, y as SearchField, b as Stack, x as Tabs, S as Tag, r as Text, C as TextField, T as ThemeProvider, D as Toast, O as VisuallyHidden, w as defineTheme, E as useToast };
|
package/dist/styles/atoms.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer atoms{._1dkxmm00{display:none}._1dkxmm05{display:block}._1dkxmm0a{display:inline}._1dkxmm0f{display:inline-block}._1dkxmm0k{display:flex}._1dkxmm0p{display:inline-flex}._1dkxmm0u{display:grid}._1dkxmm0z{display:contents}._1dkxmm014{flex-direction:row}._1dkxmm019{flex-direction:row-reverse}._1dkxmm01e{flex-direction:column}._1dkxmm01j{flex-direction:column-reverse}._1dkxmm01o{flex-wrap:nowrap}._1dkxmm01t{flex-wrap:wrap}._1dkxmm01y{flex-grow:0}._1dkxmm023{flex-grow:1}._1dkxmm028{flex-shrink:0}._1dkxmm02d{flex-shrink:1}._1dkxmm02i{align-items:start}._1dkxmm02n{align-items:center}._1dkxmm02s{align-items:end}._1dkxmm02x{align-items:stretch}._1dkxmm032{align-items:baseline}._1dkxmm037{align-self:start}._1dkxmm03c{align-self:center}._1dkxmm03h{align-self:end}._1dkxmm03m{align-self:stretch}._1dkxmm03r{align-self:baseline}._1dkxmm03w{justify-content:start}._1dkxmm041{justify-content:center}._1dkxmm046{justify-content:end}._1dkxmm04b{justify-content:space-between}._1dkxmm04g{justify-content:space-around}._1dkxmm04l{justify-content:space-evenly}._1dkxmm04q{gap:var(--space-0)}._1dkxmm04v{gap:var(--space-1)}._1dkxmm050{gap:var(--space-2)}._1dkxmm055{gap:var(--space-4)}._1dkxmm05a{gap:var(--space-6)}._1dkxmm05f{gap:var(--space-8)}._1dkxmm05k{gap:var(--space-12)}._1dkxmm05p{gap:var(--space-16)}._1dkxmm05u{gap:var(--space-20)}._1dkxmm05z{gap:var(--space-24)}._1dkxmm064{gap:var(--space-32)}._1dkxmm069{gap:var(--space-40)}._1dkxmm06e{gap:var(--space-48)}._1dkxmm06j{gap:var(--space-64)}._1dkxmm06o{gap:var(--space-80)}._1dkxmm06t{gap:var(--space-96)}._1dkxmm06y{padding-block-start:var(--space-0)}._1dkxmm073{padding-block-start:var(--space-1)}._1dkxmm078{padding-block-start:var(--space-2)}._1dkxmm07d{padding-block-start:var(--space-4)}._1dkxmm07i{padding-block-start:var(--space-6)}._1dkxmm07n{padding-block-start:var(--space-8)}._1dkxmm07s{padding-block-start:var(--space-12)}._1dkxmm07x{padding-block-start:var(--space-16)}._1dkxmm082{padding-block-start:var(--space-20)}._1dkxmm087{padding-block-start:var(--space-24)}._1dkxmm08c{padding-block-start:var(--space-32)}._1dkxmm08h{padding-block-start:var(--space-40)}._1dkxmm08m{padding-block-start:var(--space-48)}._1dkxmm08r{padding-block-start:var(--space-64)}._1dkxmm08w{padding-block-start:var(--space-80)}._1dkxmm091{padding-block-start:var(--space-96)}._1dkxmm096{padding-block-end:var(--space-0)}._1dkxmm09b{padding-block-end:var(--space-1)}._1dkxmm09g{padding-block-end:var(--space-2)}._1dkxmm09l{padding-block-end:var(--space-4)}._1dkxmm09q{padding-block-end:var(--space-6)}._1dkxmm09v{padding-block-end:var(--space-8)}._1dkxmm0a0{padding-block-end:var(--space-12)}._1dkxmm0a5{padding-block-end:var(--space-16)}._1dkxmm0aa{padding-block-end:var(--space-20)}._1dkxmm0af{padding-block-end:var(--space-24)}._1dkxmm0ak{padding-block-end:var(--space-32)}._1dkxmm0ap{padding-block-end:var(--space-40)}._1dkxmm0au{padding-block-end:var(--space-48)}._1dkxmm0az{padding-block-end:var(--space-64)}._1dkxmm0b4{padding-block-end:var(--space-80)}._1dkxmm0b9{padding-block-end:var(--space-96)}._1dkxmm0be{padding-inline-start:var(--space-0)}._1dkxmm0bj{padding-inline-start:var(--space-1)}._1dkxmm0bo{padding-inline-start:var(--space-2)}._1dkxmm0bt{padding-inline-start:var(--space-4)}._1dkxmm0by{padding-inline-start:var(--space-6)}._1dkxmm0c3{padding-inline-start:var(--space-8)}._1dkxmm0c8{padding-inline-start:var(--space-12)}._1dkxmm0cd{padding-inline-start:var(--space-16)}._1dkxmm0ci{padding-inline-start:var(--space-20)}._1dkxmm0cn{padding-inline-start:var(--space-24)}._1dkxmm0cs{padding-inline-start:var(--space-32)}._1dkxmm0cx{padding-inline-start:var(--space-40)}._1dkxmm0d2{padding-inline-start:var(--space-48)}._1dkxmm0d7{padding-inline-start:var(--space-64)}._1dkxmm0dc{padding-inline-start:var(--space-80)}._1dkxmm0dh{padding-inline-start:var(--space-96)}._1dkxmm0dm{padding-inline-end:var(--space-0)}._1dkxmm0dr{padding-inline-end:var(--space-1)}._1dkxmm0dw{padding-inline-end:var(--space-2)}._1dkxmm0e1{padding-inline-end:var(--space-4)}._1dkxmm0e6{padding-inline-end:var(--space-6)}._1dkxmm0eb{padding-inline-end:var(--space-8)}._1dkxmm0eg{padding-inline-end:var(--space-12)}._1dkxmm0el{padding-inline-end:var(--space-16)}._1dkxmm0eq{padding-inline-end:var(--space-20)}._1dkxmm0ev{padding-inline-end:var(--space-24)}._1dkxmm0f0{padding-inline-end:var(--space-32)}._1dkxmm0f5{padding-inline-end:var(--space-40)}._1dkxmm0fa{padding-inline-end:var(--space-48)}._1dkxmm0ff{padding-inline-end:var(--space-64)}._1dkxmm0fk{padding-inline-end:var(--space-80)}._1dkxmm0fp{padding-inline-end:var(--space-96)}._1dkxmm0fu{margin-block-start:var(--space-0)}._1dkxmm0fz{margin-block-start:var(--space-1)}._1dkxmm0g4{margin-block-start:var(--space-2)}._1dkxmm0g9{margin-block-start:var(--space-4)}._1dkxmm0ge{margin-block-start:var(--space-6)}._1dkxmm0gj{margin-block-start:var(--space-8)}._1dkxmm0go{margin-block-start:var(--space-12)}._1dkxmm0gt{margin-block-start:var(--space-16)}._1dkxmm0gy{margin-block-start:var(--space-20)}._1dkxmm0h3{margin-block-start:var(--space-24)}._1dkxmm0h8{margin-block-start:var(--space-32)}._1dkxmm0hd{margin-block-start:var(--space-40)}._1dkxmm0hi{margin-block-start:var(--space-48)}._1dkxmm0hn{margin-block-start:var(--space-64)}._1dkxmm0hs{margin-block-start:var(--space-80)}._1dkxmm0hx{margin-block-start:var(--space-96)}._1dkxmm0i2{margin-block-start:auto}._1dkxmm0i7{margin-block-end:var(--space-0)}._1dkxmm0ic{margin-block-end:var(--space-1)}._1dkxmm0ih{margin-block-end:var(--space-2)}._1dkxmm0im{margin-block-end:var(--space-4)}._1dkxmm0ir{margin-block-end:var(--space-6)}._1dkxmm0iw{margin-block-end:var(--space-8)}._1dkxmm0j1{margin-block-end:var(--space-12)}._1dkxmm0j6{margin-block-end:var(--space-16)}._1dkxmm0jb{margin-block-end:var(--space-20)}._1dkxmm0jg{margin-block-end:var(--space-24)}._1dkxmm0jl{margin-block-end:var(--space-32)}._1dkxmm0jq{margin-block-end:var(--space-40)}._1dkxmm0jv{margin-block-end:var(--space-48)}._1dkxmm0k0{margin-block-end:var(--space-64)}._1dkxmm0k5{margin-block-end:var(--space-80)}._1dkxmm0ka{margin-block-end:var(--space-96)}._1dkxmm0kf{margin-block-end:auto}._1dkxmm0kk{margin-inline-start:var(--space-0)}._1dkxmm0kp{margin-inline-start:var(--space-1)}._1dkxmm0ku{margin-inline-start:var(--space-2)}._1dkxmm0kz{margin-inline-start:var(--space-4)}._1dkxmm0l4{margin-inline-start:var(--space-6)}._1dkxmm0l9{margin-inline-start:var(--space-8)}._1dkxmm0le{margin-inline-start:var(--space-12)}._1dkxmm0lj{margin-inline-start:var(--space-16)}._1dkxmm0lo{margin-inline-start:var(--space-20)}._1dkxmm0lt{margin-inline-start:var(--space-24)}._1dkxmm0ly{margin-inline-start:var(--space-32)}._1dkxmm0m3{margin-inline-start:var(--space-40)}._1dkxmm0m8{margin-inline-start:var(--space-48)}._1dkxmm0md{margin-inline-start:var(--space-64)}._1dkxmm0mi{margin-inline-start:var(--space-80)}._1dkxmm0mn{margin-inline-start:var(--space-96)}._1dkxmm0ms{margin-inline-start:auto}._1dkxmm0mx{margin-inline-end:var(--space-0)}._1dkxmm0n2{margin-inline-end:var(--space-1)}._1dkxmm0n7{margin-inline-end:var(--space-2)}._1dkxmm0nc{margin-inline-end:var(--space-4)}._1dkxmm0nh{margin-inline-end:var(--space-6)}._1dkxmm0nm{margin-inline-end:var(--space-8)}._1dkxmm0nr{margin-inline-end:var(--space-12)}._1dkxmm0nw{margin-inline-end:var(--space-16)}._1dkxmm0o1{margin-inline-end:var(--space-20)}._1dkxmm0o6{margin-inline-end:var(--space-24)}._1dkxmm0ob{margin-inline-end:var(--space-32)}._1dkxmm0og{margin-inline-end:var(--space-40)}._1dkxmm0ol{margin-inline-end:var(--space-48)}._1dkxmm0oq{margin-inline-end:var(--space-64)}._1dkxmm0ov{margin-inline-end:var(--space-80)}._1dkxmm0p0{margin-inline-end:var(--space-96)}._1dkxmm0p5{margin-inline-end:auto}._1dkxmm0pa{inline-size:var(--size-xs)}._1dkxmm0pf{inline-size:var(--size-sm)}._1dkxmm0pk{inline-size:var(--size-med)}._1dkxmm0pp{inline-size:var(--size-lg)}._1dkxmm0pu{inline-size:var(--size-xl)}._1dkxmm0pz{inline-size:auto}._1dkxmm0q4{inline-size:100%}._1dkxmm0q9{inline-size:fit-content}._1dkxmm0qe{inline-size:min-content}._1dkxmm0qj{inline-size:max-content}._1dkxmm0qo{inline-size:var(--container-prose)}._1dkxmm0qt{inline-size:var(--container-page)}._1dkxmm0qy{inline-size:var(--container-wide)}._1dkxmm0r3{block-size:var(--size-xs)}._1dkxmm0r8{block-size:var(--size-sm)}._1dkxmm0rd{block-size:var(--size-med)}._1dkxmm0ri{block-size:var(--size-lg)}._1dkxmm0rn{block-size:var(--size-xl)}._1dkxmm0rs{block-size:auto}._1dkxmm0rx{block-size:100%}._1dkxmm0s2{block-size:fit-content}._1dkxmm0s7{block-size:min-content}._1dkxmm0sc{block-size:max-content}._1dkxmm0sh{min-inline-size:var(--size-xs)}._1dkxmm0sm{min-inline-size:var(--size-sm)}._1dkxmm0sr{min-inline-size:var(--size-med)}._1dkxmm0sw{min-inline-size:var(--size-lg)}._1dkxmm0t1{min-inline-size:var(--size-xl)}._1dkxmm0t6{min-inline-size:auto}._1dkxmm0tb{min-inline-size:100%}._1dkxmm0tg{min-inline-size:fit-content}._1dkxmm0tl{min-inline-size:min-content}._1dkxmm0tq{min-inline-size:max-content}._1dkxmm0tv{min-inline-size:var(--container-prose)}._1dkxmm0u0{min-inline-size:var(--container-page)}._1dkxmm0u5{min-inline-size:var(--container-wide)}._1dkxmm0ua{max-inline-size:var(--size-xs)}._1dkxmm0uf{max-inline-size:var(--size-sm)}._1dkxmm0uk{max-inline-size:var(--size-med)}._1dkxmm0up{max-inline-size:var(--size-lg)}._1dkxmm0uu{max-inline-size:var(--size-xl)}._1dkxmm0uz{max-inline-size:auto}._1dkxmm0v4{max-inline-size:100%}._1dkxmm0v9{max-inline-size:fit-content}._1dkxmm0ve{max-inline-size:min-content}._1dkxmm0vj{max-inline-size:max-content}._1dkxmm0vo{max-inline-size:var(--container-prose)}._1dkxmm0vt{max-inline-size:var(--container-page)}._1dkxmm0vy{max-inline-size:var(--container-wide)}._1dkxmm0w3{min-block-size:var(--size-xs)}._1dkxmm0w8{min-block-size:var(--size-sm)}._1dkxmm0wd{min-block-size:var(--size-med)}._1dkxmm0wi{min-block-size:var(--size-lg)}._1dkxmm0wn{min-block-size:var(--size-xl)}._1dkxmm0ws{min-block-size:auto}._1dkxmm0wx{min-block-size:100%}._1dkxmm0x2{min-block-size:fit-content}._1dkxmm0x7{min-block-size:min-content}._1dkxmm0xc{min-block-size:max-content}._1dkxmm0xh{max-block-size:var(--size-xs)}._1dkxmm0xm{max-block-size:var(--size-sm)}._1dkxmm0xr{max-block-size:var(--size-med)}._1dkxmm0xw{max-block-size:var(--size-lg)}._1dkxmm0y1{max-block-size:var(--size-xl)}._1dkxmm0y6{max-block-size:auto}._1dkxmm0yb{max-block-size:100%}._1dkxmm0yg{max-block-size:fit-content}._1dkxmm0yl{max-block-size:min-content}._1dkxmm0yq{max-block-size:max-content}._1dkxmm0yv{color:var(--color-bg)}._1dkxmm0yw{color:var(--color-bg-muted)}._1dkxmm0yx{color:var(--color-bg-raised)}._1dkxmm0yy{color:var(--color-fg)}._1dkxmm0yz{color:var(--color-fg-muted)}._1dkxmm0z0{color:var(--color-border)}._1dkxmm0z1{color:var(--color-border-strong)}._1dkxmm0z2{color:var(--color-accent)}._1dkxmm0z3{color:var(--color-accent-fg)}._1dkxmm0z4{color:var(--color-danger)}._1dkxmm0z5{color:var(--color-danger-fg)}._1dkxmm0z6{color:var(--color-success)}._1dkxmm0z7{color:var(--color-success-fg)}._1dkxmm0z8{color:var(--color-warning)}._1dkxmm0z9{color:var(--color-warning-fg)}._1dkxmm0za{color:var(--color-focus)}._1dkxmm0zb{background-color:var(--color-bg)}._1dkxmm0zc{background-color:var(--color-bg-muted)}._1dkxmm0zd{background-color:var(--color-bg-raised)}._1dkxmm0ze{background-color:var(--color-fg)}._1dkxmm0zf{background-color:var(--color-fg-muted)}._1dkxmm0zg{background-color:var(--color-border)}._1dkxmm0zh{background-color:var(--color-border-strong)}._1dkxmm0zi{background-color:var(--color-accent)}._1dkxmm0zj{background-color:var(--color-accent-fg)}._1dkxmm0zk{background-color:var(--color-danger)}._1dkxmm0zl{background-color:var(--color-danger-fg)}._1dkxmm0zm{background-color:var(--color-success)}._1dkxmm0zn{background-color:var(--color-success-fg)}._1dkxmm0zo{background-color:var(--color-warning)}._1dkxmm0zp{background-color:var(--color-warning-fg)}._1dkxmm0zq{background-color:var(--color-focus)}._1dkxmm0zr{border-radius:var(--radius-none)}._1dkxmm0zs{border-radius:var(--radius-sm)}._1dkxmm0zt{border-radius:var(--radius-med)}._1dkxmm0zu{border-radius:var(--radius-lg)}._1dkxmm0zv{border-radius:var(--radius-xl)}._1dkxmm0zw{border-radius:var(--radius-full)}._1dkxmm0zx{box-shadow:var(--shadow-sm)}._1dkxmm0zy{box-shadow:var(--shadow-med)}._1dkxmm0zz{box-shadow:var(--shadow-lg)}._1dkxmm0100{position:static}._1dkxmm0101{position:relative}._1dkxmm0102{position:absolute}._1dkxmm0103{position:fixed}._1dkxmm0104{position:sticky}._1dkxmm0105{z-index:var(--z-index-base)}._1dkxmm0106{z-index:var(--z-index-raised)}._1dkxmm0107{z-index:var(--z-index-dropdown)}._1dkxmm0108{z-index:var(--z-index-sticky)}._1dkxmm0109{z-index:var(--z-index-overlay)}._1dkxmm010a{z-index:var(--z-index-modal)}._1dkxmm010b{z-index:var(--z-index-popover)}._1dkxmm010c{z-index:var(--z-index-toast)}._1dkxmm010d{z-index:var(--z-index-tooltip)}._1dkxmm010e{overflow:visible}._1dkxmm010f{overflow:hidden}._1dkxmm010g{overflow:clip}._1dkxmm010h{overflow:auto}._1dkxmm010i{text-align:start}._1dkxmm010j{text-align:center}._1dkxmm010k{text-align:end}@media (width>=40em){._1dkxmm01{display:none}._1dkxmm06{display:block}._1dkxmm0b{display:inline}._1dkxmm0g{display:inline-block}._1dkxmm0l{display:flex}._1dkxmm0q{display:inline-flex}._1dkxmm0v{display:grid}._1dkxmm010{display:contents}._1dkxmm015{flex-direction:row}._1dkxmm01a{flex-direction:row-reverse}._1dkxmm01f{flex-direction:column}._1dkxmm01k{flex-direction:column-reverse}._1dkxmm01p{flex-wrap:nowrap}._1dkxmm01u{flex-wrap:wrap}._1dkxmm01z{flex-grow:0}._1dkxmm024{flex-grow:1}._1dkxmm029{flex-shrink:0}._1dkxmm02e{flex-shrink:1}._1dkxmm02j{align-items:start}._1dkxmm02o{align-items:center}._1dkxmm02t{align-items:end}._1dkxmm02y{align-items:stretch}._1dkxmm033{align-items:baseline}._1dkxmm038{align-self:start}._1dkxmm03d{align-self:center}._1dkxmm03i{align-self:end}._1dkxmm03n{align-self:stretch}._1dkxmm03s{align-self:baseline}._1dkxmm03x{justify-content:start}._1dkxmm042{justify-content:center}._1dkxmm047{justify-content:end}._1dkxmm04c{justify-content:space-between}._1dkxmm04h{justify-content:space-around}._1dkxmm04m{justify-content:space-evenly}._1dkxmm04r{gap:var(--space-0)}._1dkxmm04w{gap:var(--space-1)}._1dkxmm051{gap:var(--space-2)}._1dkxmm056{gap:var(--space-4)}._1dkxmm05b{gap:var(--space-6)}._1dkxmm05g{gap:var(--space-8)}._1dkxmm05l{gap:var(--space-12)}._1dkxmm05q{gap:var(--space-16)}._1dkxmm05v{gap:var(--space-20)}._1dkxmm060{gap:var(--space-24)}._1dkxmm065{gap:var(--space-32)}._1dkxmm06a{gap:var(--space-40)}._1dkxmm06f{gap:var(--space-48)}._1dkxmm06k{gap:var(--space-64)}._1dkxmm06p{gap:var(--space-80)}._1dkxmm06u{gap:var(--space-96)}._1dkxmm06z{padding-block-start:var(--space-0)}._1dkxmm074{padding-block-start:var(--space-1)}._1dkxmm079{padding-block-start:var(--space-2)}._1dkxmm07e{padding-block-start:var(--space-4)}._1dkxmm07j{padding-block-start:var(--space-6)}._1dkxmm07o{padding-block-start:var(--space-8)}._1dkxmm07t{padding-block-start:var(--space-12)}._1dkxmm07y{padding-block-start:var(--space-16)}._1dkxmm083{padding-block-start:var(--space-20)}._1dkxmm088{padding-block-start:var(--space-24)}._1dkxmm08d{padding-block-start:var(--space-32)}._1dkxmm08i{padding-block-start:var(--space-40)}._1dkxmm08n{padding-block-start:var(--space-48)}._1dkxmm08s{padding-block-start:var(--space-64)}._1dkxmm08x{padding-block-start:var(--space-80)}._1dkxmm092{padding-block-start:var(--space-96)}._1dkxmm097{padding-block-end:var(--space-0)}._1dkxmm09c{padding-block-end:var(--space-1)}._1dkxmm09h{padding-block-end:var(--space-2)}._1dkxmm09m{padding-block-end:var(--space-4)}._1dkxmm09r{padding-block-end:var(--space-6)}._1dkxmm09w{padding-block-end:var(--space-8)}._1dkxmm0a1{padding-block-end:var(--space-12)}._1dkxmm0a6{padding-block-end:var(--space-16)}._1dkxmm0ab{padding-block-end:var(--space-20)}._1dkxmm0ag{padding-block-end:var(--space-24)}._1dkxmm0al{padding-block-end:var(--space-32)}._1dkxmm0aq{padding-block-end:var(--space-40)}._1dkxmm0av{padding-block-end:var(--space-48)}._1dkxmm0b0{padding-block-end:var(--space-64)}._1dkxmm0b5{padding-block-end:var(--space-80)}._1dkxmm0ba{padding-block-end:var(--space-96)}._1dkxmm0bf{padding-inline-start:var(--space-0)}._1dkxmm0bk{padding-inline-start:var(--space-1)}._1dkxmm0bp{padding-inline-start:var(--space-2)}._1dkxmm0bu{padding-inline-start:var(--space-4)}._1dkxmm0bz{padding-inline-start:var(--space-6)}._1dkxmm0c4{padding-inline-start:var(--space-8)}._1dkxmm0c9{padding-inline-start:var(--space-12)}._1dkxmm0ce{padding-inline-start:var(--space-16)}._1dkxmm0cj{padding-inline-start:var(--space-20)}._1dkxmm0co{padding-inline-start:var(--space-24)}._1dkxmm0ct{padding-inline-start:var(--space-32)}._1dkxmm0cy{padding-inline-start:var(--space-40)}._1dkxmm0d3{padding-inline-start:var(--space-48)}._1dkxmm0d8{padding-inline-start:var(--space-64)}._1dkxmm0dd{padding-inline-start:var(--space-80)}._1dkxmm0di{padding-inline-start:var(--space-96)}._1dkxmm0dn{padding-inline-end:var(--space-0)}._1dkxmm0ds{padding-inline-end:var(--space-1)}._1dkxmm0dx{padding-inline-end:var(--space-2)}._1dkxmm0e2{padding-inline-end:var(--space-4)}._1dkxmm0e7{padding-inline-end:var(--space-6)}._1dkxmm0ec{padding-inline-end:var(--space-8)}._1dkxmm0eh{padding-inline-end:var(--space-12)}._1dkxmm0em{padding-inline-end:var(--space-16)}._1dkxmm0er{padding-inline-end:var(--space-20)}._1dkxmm0ew{padding-inline-end:var(--space-24)}._1dkxmm0f1{padding-inline-end:var(--space-32)}._1dkxmm0f6{padding-inline-end:var(--space-40)}._1dkxmm0fb{padding-inline-end:var(--space-48)}._1dkxmm0fg{padding-inline-end:var(--space-64)}._1dkxmm0fl{padding-inline-end:var(--space-80)}._1dkxmm0fq{padding-inline-end:var(--space-96)}._1dkxmm0fv{margin-block-start:var(--space-0)}._1dkxmm0g0{margin-block-start:var(--space-1)}._1dkxmm0g5{margin-block-start:var(--space-2)}._1dkxmm0ga{margin-block-start:var(--space-4)}._1dkxmm0gf{margin-block-start:var(--space-6)}._1dkxmm0gk{margin-block-start:var(--space-8)}._1dkxmm0gp{margin-block-start:var(--space-12)}._1dkxmm0gu{margin-block-start:var(--space-16)}._1dkxmm0gz{margin-block-start:var(--space-20)}._1dkxmm0h4{margin-block-start:var(--space-24)}._1dkxmm0h9{margin-block-start:var(--space-32)}._1dkxmm0he{margin-block-start:var(--space-40)}._1dkxmm0hj{margin-block-start:var(--space-48)}._1dkxmm0ho{margin-block-start:var(--space-64)}._1dkxmm0ht{margin-block-start:var(--space-80)}._1dkxmm0hy{margin-block-start:var(--space-96)}._1dkxmm0i3{margin-block-start:auto}._1dkxmm0i8{margin-block-end:var(--space-0)}._1dkxmm0id{margin-block-end:var(--space-1)}._1dkxmm0ii{margin-block-end:var(--space-2)}._1dkxmm0in{margin-block-end:var(--space-4)}._1dkxmm0is{margin-block-end:var(--space-6)}._1dkxmm0ix{margin-block-end:var(--space-8)}._1dkxmm0j2{margin-block-end:var(--space-12)}._1dkxmm0j7{margin-block-end:var(--space-16)}._1dkxmm0jc{margin-block-end:var(--space-20)}._1dkxmm0jh{margin-block-end:var(--space-24)}._1dkxmm0jm{margin-block-end:var(--space-32)}._1dkxmm0jr{margin-block-end:var(--space-40)}._1dkxmm0jw{margin-block-end:var(--space-48)}._1dkxmm0k1{margin-block-end:var(--space-64)}._1dkxmm0k6{margin-block-end:var(--space-80)}._1dkxmm0kb{margin-block-end:var(--space-96)}._1dkxmm0kg{margin-block-end:auto}._1dkxmm0kl{margin-inline-start:var(--space-0)}._1dkxmm0kq{margin-inline-start:var(--space-1)}._1dkxmm0kv{margin-inline-start:var(--space-2)}._1dkxmm0l0{margin-inline-start:var(--space-4)}._1dkxmm0l5{margin-inline-start:var(--space-6)}._1dkxmm0la{margin-inline-start:var(--space-8)}._1dkxmm0lf{margin-inline-start:var(--space-12)}._1dkxmm0lk{margin-inline-start:var(--space-16)}._1dkxmm0lp{margin-inline-start:var(--space-20)}._1dkxmm0lu{margin-inline-start:var(--space-24)}._1dkxmm0lz{margin-inline-start:var(--space-32)}._1dkxmm0m4{margin-inline-start:var(--space-40)}._1dkxmm0m9{margin-inline-start:var(--space-48)}._1dkxmm0me{margin-inline-start:var(--space-64)}._1dkxmm0mj{margin-inline-start:var(--space-80)}._1dkxmm0mo{margin-inline-start:var(--space-96)}._1dkxmm0mt{margin-inline-start:auto}._1dkxmm0my{margin-inline-end:var(--space-0)}._1dkxmm0n3{margin-inline-end:var(--space-1)}._1dkxmm0n8{margin-inline-end:var(--space-2)}._1dkxmm0nd{margin-inline-end:var(--space-4)}._1dkxmm0ni{margin-inline-end:var(--space-6)}._1dkxmm0nn{margin-inline-end:var(--space-8)}._1dkxmm0ns{margin-inline-end:var(--space-12)}._1dkxmm0nx{margin-inline-end:var(--space-16)}._1dkxmm0o2{margin-inline-end:var(--space-20)}._1dkxmm0o7{margin-inline-end:var(--space-24)}._1dkxmm0oc{margin-inline-end:var(--space-32)}._1dkxmm0oh{margin-inline-end:var(--space-40)}._1dkxmm0om{margin-inline-end:var(--space-48)}._1dkxmm0or{margin-inline-end:var(--space-64)}._1dkxmm0ow{margin-inline-end:var(--space-80)}._1dkxmm0p1{margin-inline-end:var(--space-96)}._1dkxmm0p6{margin-inline-end:auto}._1dkxmm0pb{inline-size:var(--size-xs)}._1dkxmm0pg{inline-size:var(--size-sm)}._1dkxmm0pl{inline-size:var(--size-med)}._1dkxmm0pq{inline-size:var(--size-lg)}._1dkxmm0pv{inline-size:var(--size-xl)}._1dkxmm0q0{inline-size:auto}._1dkxmm0q5{inline-size:100%}._1dkxmm0qa{inline-size:fit-content}._1dkxmm0qf{inline-size:min-content}._1dkxmm0qk{inline-size:max-content}._1dkxmm0qp{inline-size:var(--container-prose)}._1dkxmm0qu{inline-size:var(--container-page)}._1dkxmm0qz{inline-size:var(--container-wide)}._1dkxmm0r4{block-size:var(--size-xs)}._1dkxmm0r9{block-size:var(--size-sm)}._1dkxmm0re{block-size:var(--size-med)}._1dkxmm0rj{block-size:var(--size-lg)}._1dkxmm0ro{block-size:var(--size-xl)}._1dkxmm0rt{block-size:auto}._1dkxmm0ry{block-size:100%}._1dkxmm0s3{block-size:fit-content}._1dkxmm0s8{block-size:min-content}._1dkxmm0sd{block-size:max-content}._1dkxmm0si{min-inline-size:var(--size-xs)}._1dkxmm0sn{min-inline-size:var(--size-sm)}._1dkxmm0ss{min-inline-size:var(--size-med)}._1dkxmm0sx{min-inline-size:var(--size-lg)}._1dkxmm0t2{min-inline-size:var(--size-xl)}._1dkxmm0t7{min-inline-size:auto}._1dkxmm0tc{min-inline-size:100%}._1dkxmm0th{min-inline-size:fit-content}._1dkxmm0tm{min-inline-size:min-content}._1dkxmm0tr{min-inline-size:max-content}._1dkxmm0tw{min-inline-size:var(--container-prose)}._1dkxmm0u1{min-inline-size:var(--container-page)}._1dkxmm0u6{min-inline-size:var(--container-wide)}._1dkxmm0ub{max-inline-size:var(--size-xs)}._1dkxmm0ug{max-inline-size:var(--size-sm)}._1dkxmm0ul{max-inline-size:var(--size-med)}._1dkxmm0uq{max-inline-size:var(--size-lg)}._1dkxmm0uv{max-inline-size:var(--size-xl)}._1dkxmm0v0{max-inline-size:auto}._1dkxmm0v5{max-inline-size:100%}._1dkxmm0va{max-inline-size:fit-content}._1dkxmm0vf{max-inline-size:min-content}._1dkxmm0vk{max-inline-size:max-content}._1dkxmm0vp{max-inline-size:var(--container-prose)}._1dkxmm0vu{max-inline-size:var(--container-page)}._1dkxmm0vz{max-inline-size:var(--container-wide)}._1dkxmm0w4{min-block-size:var(--size-xs)}._1dkxmm0w9{min-block-size:var(--size-sm)}._1dkxmm0we{min-block-size:var(--size-med)}._1dkxmm0wj{min-block-size:var(--size-lg)}._1dkxmm0wo{min-block-size:var(--size-xl)}._1dkxmm0wt{min-block-size:auto}._1dkxmm0wy{min-block-size:100%}._1dkxmm0x3{min-block-size:fit-content}._1dkxmm0x8{min-block-size:min-content}._1dkxmm0xd{min-block-size:max-content}._1dkxmm0xi{max-block-size:var(--size-xs)}._1dkxmm0xn{max-block-size:var(--size-sm)}._1dkxmm0xs{max-block-size:var(--size-med)}._1dkxmm0xx{max-block-size:var(--size-lg)}._1dkxmm0y2{max-block-size:var(--size-xl)}._1dkxmm0y7{max-block-size:auto}._1dkxmm0yc{max-block-size:100%}._1dkxmm0yh{max-block-size:fit-content}._1dkxmm0ym{max-block-size:min-content}._1dkxmm0yr{max-block-size:max-content}}@media (width>=48em){._1dkxmm02{display:none}._1dkxmm07{display:block}._1dkxmm0c{display:inline}._1dkxmm0h{display:inline-block}._1dkxmm0m{display:flex}._1dkxmm0r{display:inline-flex}._1dkxmm0w{display:grid}._1dkxmm011{display:contents}._1dkxmm016{flex-direction:row}._1dkxmm01b{flex-direction:row-reverse}._1dkxmm01g{flex-direction:column}._1dkxmm01l{flex-direction:column-reverse}._1dkxmm01q{flex-wrap:nowrap}._1dkxmm01v{flex-wrap:wrap}._1dkxmm020{flex-grow:0}._1dkxmm025{flex-grow:1}._1dkxmm02a{flex-shrink:0}._1dkxmm02f{flex-shrink:1}._1dkxmm02k{align-items:start}._1dkxmm02p{align-items:center}._1dkxmm02u{align-items:end}._1dkxmm02z{align-items:stretch}._1dkxmm034{align-items:baseline}._1dkxmm039{align-self:start}._1dkxmm03e{align-self:center}._1dkxmm03j{align-self:end}._1dkxmm03o{align-self:stretch}._1dkxmm03t{align-self:baseline}._1dkxmm03y{justify-content:start}._1dkxmm043{justify-content:center}._1dkxmm048{justify-content:end}._1dkxmm04d{justify-content:space-between}._1dkxmm04i{justify-content:space-around}._1dkxmm04n{justify-content:space-evenly}._1dkxmm04s{gap:var(--space-0)}._1dkxmm04x{gap:var(--space-1)}._1dkxmm052{gap:var(--space-2)}._1dkxmm057{gap:var(--space-4)}._1dkxmm05c{gap:var(--space-6)}._1dkxmm05h{gap:var(--space-8)}._1dkxmm05m{gap:var(--space-12)}._1dkxmm05r{gap:var(--space-16)}._1dkxmm05w{gap:var(--space-20)}._1dkxmm061{gap:var(--space-24)}._1dkxmm066{gap:var(--space-32)}._1dkxmm06b{gap:var(--space-40)}._1dkxmm06g{gap:var(--space-48)}._1dkxmm06l{gap:var(--space-64)}._1dkxmm06q{gap:var(--space-80)}._1dkxmm06v{gap:var(--space-96)}._1dkxmm070{padding-block-start:var(--space-0)}._1dkxmm075{padding-block-start:var(--space-1)}._1dkxmm07a{padding-block-start:var(--space-2)}._1dkxmm07f{padding-block-start:var(--space-4)}._1dkxmm07k{padding-block-start:var(--space-6)}._1dkxmm07p{padding-block-start:var(--space-8)}._1dkxmm07u{padding-block-start:var(--space-12)}._1dkxmm07z{padding-block-start:var(--space-16)}._1dkxmm084{padding-block-start:var(--space-20)}._1dkxmm089{padding-block-start:var(--space-24)}._1dkxmm08e{padding-block-start:var(--space-32)}._1dkxmm08j{padding-block-start:var(--space-40)}._1dkxmm08o{padding-block-start:var(--space-48)}._1dkxmm08t{padding-block-start:var(--space-64)}._1dkxmm08y{padding-block-start:var(--space-80)}._1dkxmm093{padding-block-start:var(--space-96)}._1dkxmm098{padding-block-end:var(--space-0)}._1dkxmm09d{padding-block-end:var(--space-1)}._1dkxmm09i{padding-block-end:var(--space-2)}._1dkxmm09n{padding-block-end:var(--space-4)}._1dkxmm09s{padding-block-end:var(--space-6)}._1dkxmm09x{padding-block-end:var(--space-8)}._1dkxmm0a2{padding-block-end:var(--space-12)}._1dkxmm0a7{padding-block-end:var(--space-16)}._1dkxmm0ac{padding-block-end:var(--space-20)}._1dkxmm0ah{padding-block-end:var(--space-24)}._1dkxmm0am{padding-block-end:var(--space-32)}._1dkxmm0ar{padding-block-end:var(--space-40)}._1dkxmm0aw{padding-block-end:var(--space-48)}._1dkxmm0b1{padding-block-end:var(--space-64)}._1dkxmm0b6{padding-block-end:var(--space-80)}._1dkxmm0bb{padding-block-end:var(--space-96)}._1dkxmm0bg{padding-inline-start:var(--space-0)}._1dkxmm0bl{padding-inline-start:var(--space-1)}._1dkxmm0bq{padding-inline-start:var(--space-2)}._1dkxmm0bv{padding-inline-start:var(--space-4)}._1dkxmm0c0{padding-inline-start:var(--space-6)}._1dkxmm0c5{padding-inline-start:var(--space-8)}._1dkxmm0ca{padding-inline-start:var(--space-12)}._1dkxmm0cf{padding-inline-start:var(--space-16)}._1dkxmm0ck{padding-inline-start:var(--space-20)}._1dkxmm0cp{padding-inline-start:var(--space-24)}._1dkxmm0cu{padding-inline-start:var(--space-32)}._1dkxmm0cz{padding-inline-start:var(--space-40)}._1dkxmm0d4{padding-inline-start:var(--space-48)}._1dkxmm0d9{padding-inline-start:var(--space-64)}._1dkxmm0de{padding-inline-start:var(--space-80)}._1dkxmm0dj{padding-inline-start:var(--space-96)}._1dkxmm0do{padding-inline-end:var(--space-0)}._1dkxmm0dt{padding-inline-end:var(--space-1)}._1dkxmm0dy{padding-inline-end:var(--space-2)}._1dkxmm0e3{padding-inline-end:var(--space-4)}._1dkxmm0e8{padding-inline-end:var(--space-6)}._1dkxmm0ed{padding-inline-end:var(--space-8)}._1dkxmm0ei{padding-inline-end:var(--space-12)}._1dkxmm0en{padding-inline-end:var(--space-16)}._1dkxmm0es{padding-inline-end:var(--space-20)}._1dkxmm0ex{padding-inline-end:var(--space-24)}._1dkxmm0f2{padding-inline-end:var(--space-32)}._1dkxmm0f7{padding-inline-end:var(--space-40)}._1dkxmm0fc{padding-inline-end:var(--space-48)}._1dkxmm0fh{padding-inline-end:var(--space-64)}._1dkxmm0fm{padding-inline-end:var(--space-80)}._1dkxmm0fr{padding-inline-end:var(--space-96)}._1dkxmm0fw{margin-block-start:var(--space-0)}._1dkxmm0g1{margin-block-start:var(--space-1)}._1dkxmm0g6{margin-block-start:var(--space-2)}._1dkxmm0gb{margin-block-start:var(--space-4)}._1dkxmm0gg{margin-block-start:var(--space-6)}._1dkxmm0gl{margin-block-start:var(--space-8)}._1dkxmm0gq{margin-block-start:var(--space-12)}._1dkxmm0gv{margin-block-start:var(--space-16)}._1dkxmm0h0{margin-block-start:var(--space-20)}._1dkxmm0h5{margin-block-start:var(--space-24)}._1dkxmm0ha{margin-block-start:var(--space-32)}._1dkxmm0hf{margin-block-start:var(--space-40)}._1dkxmm0hk{margin-block-start:var(--space-48)}._1dkxmm0hp{margin-block-start:var(--space-64)}._1dkxmm0hu{margin-block-start:var(--space-80)}._1dkxmm0hz{margin-block-start:var(--space-96)}._1dkxmm0i4{margin-block-start:auto}._1dkxmm0i9{margin-block-end:var(--space-0)}._1dkxmm0ie{margin-block-end:var(--space-1)}._1dkxmm0ij{margin-block-end:var(--space-2)}._1dkxmm0io{margin-block-end:var(--space-4)}._1dkxmm0it{margin-block-end:var(--space-6)}._1dkxmm0iy{margin-block-end:var(--space-8)}._1dkxmm0j3{margin-block-end:var(--space-12)}._1dkxmm0j8{margin-block-end:var(--space-16)}._1dkxmm0jd{margin-block-end:var(--space-20)}._1dkxmm0ji{margin-block-end:var(--space-24)}._1dkxmm0jn{margin-block-end:var(--space-32)}._1dkxmm0js{margin-block-end:var(--space-40)}._1dkxmm0jx{margin-block-end:var(--space-48)}._1dkxmm0k2{margin-block-end:var(--space-64)}._1dkxmm0k7{margin-block-end:var(--space-80)}._1dkxmm0kc{margin-block-end:var(--space-96)}._1dkxmm0kh{margin-block-end:auto}._1dkxmm0km{margin-inline-start:var(--space-0)}._1dkxmm0kr{margin-inline-start:var(--space-1)}._1dkxmm0kw{margin-inline-start:var(--space-2)}._1dkxmm0l1{margin-inline-start:var(--space-4)}._1dkxmm0l6{margin-inline-start:var(--space-6)}._1dkxmm0lb{margin-inline-start:var(--space-8)}._1dkxmm0lg{margin-inline-start:var(--space-12)}._1dkxmm0ll{margin-inline-start:var(--space-16)}._1dkxmm0lq{margin-inline-start:var(--space-20)}._1dkxmm0lv{margin-inline-start:var(--space-24)}._1dkxmm0m0{margin-inline-start:var(--space-32)}._1dkxmm0m5{margin-inline-start:var(--space-40)}._1dkxmm0ma{margin-inline-start:var(--space-48)}._1dkxmm0mf{margin-inline-start:var(--space-64)}._1dkxmm0mk{margin-inline-start:var(--space-80)}._1dkxmm0mp{margin-inline-start:var(--space-96)}._1dkxmm0mu{margin-inline-start:auto}._1dkxmm0mz{margin-inline-end:var(--space-0)}._1dkxmm0n4{margin-inline-end:var(--space-1)}._1dkxmm0n9{margin-inline-end:var(--space-2)}._1dkxmm0ne{margin-inline-end:var(--space-4)}._1dkxmm0nj{margin-inline-end:var(--space-6)}._1dkxmm0no{margin-inline-end:var(--space-8)}._1dkxmm0nt{margin-inline-end:var(--space-12)}._1dkxmm0ny{margin-inline-end:var(--space-16)}._1dkxmm0o3{margin-inline-end:var(--space-20)}._1dkxmm0o8{margin-inline-end:var(--space-24)}._1dkxmm0od{margin-inline-end:var(--space-32)}._1dkxmm0oi{margin-inline-end:var(--space-40)}._1dkxmm0on{margin-inline-end:var(--space-48)}._1dkxmm0os{margin-inline-end:var(--space-64)}._1dkxmm0ox{margin-inline-end:var(--space-80)}._1dkxmm0p2{margin-inline-end:var(--space-96)}._1dkxmm0p7{margin-inline-end:auto}._1dkxmm0pc{inline-size:var(--size-xs)}._1dkxmm0ph{inline-size:var(--size-sm)}._1dkxmm0pm{inline-size:var(--size-med)}._1dkxmm0pr{inline-size:var(--size-lg)}._1dkxmm0pw{inline-size:var(--size-xl)}._1dkxmm0q1{inline-size:auto}._1dkxmm0q6{inline-size:100%}._1dkxmm0qb{inline-size:fit-content}._1dkxmm0qg{inline-size:min-content}._1dkxmm0ql{inline-size:max-content}._1dkxmm0qq{inline-size:var(--container-prose)}._1dkxmm0qv{inline-size:var(--container-page)}._1dkxmm0r0{inline-size:var(--container-wide)}._1dkxmm0r5{block-size:var(--size-xs)}._1dkxmm0ra{block-size:var(--size-sm)}._1dkxmm0rf{block-size:var(--size-med)}._1dkxmm0rk{block-size:var(--size-lg)}._1dkxmm0rp{block-size:var(--size-xl)}._1dkxmm0ru{block-size:auto}._1dkxmm0rz{block-size:100%}._1dkxmm0s4{block-size:fit-content}._1dkxmm0s9{block-size:min-content}._1dkxmm0se{block-size:max-content}._1dkxmm0sj{min-inline-size:var(--size-xs)}._1dkxmm0so{min-inline-size:var(--size-sm)}._1dkxmm0st{min-inline-size:var(--size-med)}._1dkxmm0sy{min-inline-size:var(--size-lg)}._1dkxmm0t3{min-inline-size:var(--size-xl)}._1dkxmm0t8{min-inline-size:auto}._1dkxmm0td{min-inline-size:100%}._1dkxmm0ti{min-inline-size:fit-content}._1dkxmm0tn{min-inline-size:min-content}._1dkxmm0ts{min-inline-size:max-content}._1dkxmm0tx{min-inline-size:var(--container-prose)}._1dkxmm0u2{min-inline-size:var(--container-page)}._1dkxmm0u7{min-inline-size:var(--container-wide)}._1dkxmm0uc{max-inline-size:var(--size-xs)}._1dkxmm0uh{max-inline-size:var(--size-sm)}._1dkxmm0um{max-inline-size:var(--size-med)}._1dkxmm0ur{max-inline-size:var(--size-lg)}._1dkxmm0uw{max-inline-size:var(--size-xl)}._1dkxmm0v1{max-inline-size:auto}._1dkxmm0v6{max-inline-size:100%}._1dkxmm0vb{max-inline-size:fit-content}._1dkxmm0vg{max-inline-size:min-content}._1dkxmm0vl{max-inline-size:max-content}._1dkxmm0vq{max-inline-size:var(--container-prose)}._1dkxmm0vv{max-inline-size:var(--container-page)}._1dkxmm0w0{max-inline-size:var(--container-wide)}._1dkxmm0w5{min-block-size:var(--size-xs)}._1dkxmm0wa{min-block-size:var(--size-sm)}._1dkxmm0wf{min-block-size:var(--size-med)}._1dkxmm0wk{min-block-size:var(--size-lg)}._1dkxmm0wp{min-block-size:var(--size-xl)}._1dkxmm0wu{min-block-size:auto}._1dkxmm0wz{min-block-size:100%}._1dkxmm0x4{min-block-size:fit-content}._1dkxmm0x9{min-block-size:min-content}._1dkxmm0xe{min-block-size:max-content}._1dkxmm0xj{max-block-size:var(--size-xs)}._1dkxmm0xo{max-block-size:var(--size-sm)}._1dkxmm0xt{max-block-size:var(--size-med)}._1dkxmm0xy{max-block-size:var(--size-lg)}._1dkxmm0y3{max-block-size:var(--size-xl)}._1dkxmm0y8{max-block-size:auto}._1dkxmm0yd{max-block-size:100%}._1dkxmm0yi{max-block-size:fit-content}._1dkxmm0yn{max-block-size:min-content}._1dkxmm0ys{max-block-size:max-content}}@media (width>=64em){._1dkxmm03{display:none}._1dkxmm08{display:block}._1dkxmm0d{display:inline}._1dkxmm0i{display:inline-block}._1dkxmm0n{display:flex}._1dkxmm0s{display:inline-flex}._1dkxmm0x{display:grid}._1dkxmm012{display:contents}._1dkxmm017{flex-direction:row}._1dkxmm01c{flex-direction:row-reverse}._1dkxmm01h{flex-direction:column}._1dkxmm01m{flex-direction:column-reverse}._1dkxmm01r{flex-wrap:nowrap}._1dkxmm01w{flex-wrap:wrap}._1dkxmm021{flex-grow:0}._1dkxmm026{flex-grow:1}._1dkxmm02b{flex-shrink:0}._1dkxmm02g{flex-shrink:1}._1dkxmm02l{align-items:start}._1dkxmm02q{align-items:center}._1dkxmm02v{align-items:end}._1dkxmm030{align-items:stretch}._1dkxmm035{align-items:baseline}._1dkxmm03a{align-self:start}._1dkxmm03f{align-self:center}._1dkxmm03k{align-self:end}._1dkxmm03p{align-self:stretch}._1dkxmm03u{align-self:baseline}._1dkxmm03z{justify-content:start}._1dkxmm044{justify-content:center}._1dkxmm049{justify-content:end}._1dkxmm04e{justify-content:space-between}._1dkxmm04j{justify-content:space-around}._1dkxmm04o{justify-content:space-evenly}._1dkxmm04t{gap:var(--space-0)}._1dkxmm04y{gap:var(--space-1)}._1dkxmm053{gap:var(--space-2)}._1dkxmm058{gap:var(--space-4)}._1dkxmm05d{gap:var(--space-6)}._1dkxmm05i{gap:var(--space-8)}._1dkxmm05n{gap:var(--space-12)}._1dkxmm05s{gap:var(--space-16)}._1dkxmm05x{gap:var(--space-20)}._1dkxmm062{gap:var(--space-24)}._1dkxmm067{gap:var(--space-32)}._1dkxmm06c{gap:var(--space-40)}._1dkxmm06h{gap:var(--space-48)}._1dkxmm06m{gap:var(--space-64)}._1dkxmm06r{gap:var(--space-80)}._1dkxmm06w{gap:var(--space-96)}._1dkxmm071{padding-block-start:var(--space-0)}._1dkxmm076{padding-block-start:var(--space-1)}._1dkxmm07b{padding-block-start:var(--space-2)}._1dkxmm07g{padding-block-start:var(--space-4)}._1dkxmm07l{padding-block-start:var(--space-6)}._1dkxmm07q{padding-block-start:var(--space-8)}._1dkxmm07v{padding-block-start:var(--space-12)}._1dkxmm080{padding-block-start:var(--space-16)}._1dkxmm085{padding-block-start:var(--space-20)}._1dkxmm08a{padding-block-start:var(--space-24)}._1dkxmm08f{padding-block-start:var(--space-32)}._1dkxmm08k{padding-block-start:var(--space-40)}._1dkxmm08p{padding-block-start:var(--space-48)}._1dkxmm08u{padding-block-start:var(--space-64)}._1dkxmm08z{padding-block-start:var(--space-80)}._1dkxmm094{padding-block-start:var(--space-96)}._1dkxmm099{padding-block-end:var(--space-0)}._1dkxmm09e{padding-block-end:var(--space-1)}._1dkxmm09j{padding-block-end:var(--space-2)}._1dkxmm09o{padding-block-end:var(--space-4)}._1dkxmm09t{padding-block-end:var(--space-6)}._1dkxmm09y{padding-block-end:var(--space-8)}._1dkxmm0a3{padding-block-end:var(--space-12)}._1dkxmm0a8{padding-block-end:var(--space-16)}._1dkxmm0ad{padding-block-end:var(--space-20)}._1dkxmm0ai{padding-block-end:var(--space-24)}._1dkxmm0an{padding-block-end:var(--space-32)}._1dkxmm0as{padding-block-end:var(--space-40)}._1dkxmm0ax{padding-block-end:var(--space-48)}._1dkxmm0b2{padding-block-end:var(--space-64)}._1dkxmm0b7{padding-block-end:var(--space-80)}._1dkxmm0bc{padding-block-end:var(--space-96)}._1dkxmm0bh{padding-inline-start:var(--space-0)}._1dkxmm0bm{padding-inline-start:var(--space-1)}._1dkxmm0br{padding-inline-start:var(--space-2)}._1dkxmm0bw{padding-inline-start:var(--space-4)}._1dkxmm0c1{padding-inline-start:var(--space-6)}._1dkxmm0c6{padding-inline-start:var(--space-8)}._1dkxmm0cb{padding-inline-start:var(--space-12)}._1dkxmm0cg{padding-inline-start:var(--space-16)}._1dkxmm0cl{padding-inline-start:var(--space-20)}._1dkxmm0cq{padding-inline-start:var(--space-24)}._1dkxmm0cv{padding-inline-start:var(--space-32)}._1dkxmm0d0{padding-inline-start:var(--space-40)}._1dkxmm0d5{padding-inline-start:var(--space-48)}._1dkxmm0da{padding-inline-start:var(--space-64)}._1dkxmm0df{padding-inline-start:var(--space-80)}._1dkxmm0dk{padding-inline-start:var(--space-96)}._1dkxmm0dp{padding-inline-end:var(--space-0)}._1dkxmm0du{padding-inline-end:var(--space-1)}._1dkxmm0dz{padding-inline-end:var(--space-2)}._1dkxmm0e4{padding-inline-end:var(--space-4)}._1dkxmm0e9{padding-inline-end:var(--space-6)}._1dkxmm0ee{padding-inline-end:var(--space-8)}._1dkxmm0ej{padding-inline-end:var(--space-12)}._1dkxmm0eo{padding-inline-end:var(--space-16)}._1dkxmm0et{padding-inline-end:var(--space-20)}._1dkxmm0ey{padding-inline-end:var(--space-24)}._1dkxmm0f3{padding-inline-end:var(--space-32)}._1dkxmm0f8{padding-inline-end:var(--space-40)}._1dkxmm0fd{padding-inline-end:var(--space-48)}._1dkxmm0fi{padding-inline-end:var(--space-64)}._1dkxmm0fn{padding-inline-end:var(--space-80)}._1dkxmm0fs{padding-inline-end:var(--space-96)}._1dkxmm0fx{margin-block-start:var(--space-0)}._1dkxmm0g2{margin-block-start:var(--space-1)}._1dkxmm0g7{margin-block-start:var(--space-2)}._1dkxmm0gc{margin-block-start:var(--space-4)}._1dkxmm0gh{margin-block-start:var(--space-6)}._1dkxmm0gm{margin-block-start:var(--space-8)}._1dkxmm0gr{margin-block-start:var(--space-12)}._1dkxmm0gw{margin-block-start:var(--space-16)}._1dkxmm0h1{margin-block-start:var(--space-20)}._1dkxmm0h6{margin-block-start:var(--space-24)}._1dkxmm0hb{margin-block-start:var(--space-32)}._1dkxmm0hg{margin-block-start:var(--space-40)}._1dkxmm0hl{margin-block-start:var(--space-48)}._1dkxmm0hq{margin-block-start:var(--space-64)}._1dkxmm0hv{margin-block-start:var(--space-80)}._1dkxmm0i0{margin-block-start:var(--space-96)}._1dkxmm0i5{margin-block-start:auto}._1dkxmm0ia{margin-block-end:var(--space-0)}._1dkxmm0if{margin-block-end:var(--space-1)}._1dkxmm0ik{margin-block-end:var(--space-2)}._1dkxmm0ip{margin-block-end:var(--space-4)}._1dkxmm0iu{margin-block-end:var(--space-6)}._1dkxmm0iz{margin-block-end:var(--space-8)}._1dkxmm0j4{margin-block-end:var(--space-12)}._1dkxmm0j9{margin-block-end:var(--space-16)}._1dkxmm0je{margin-block-end:var(--space-20)}._1dkxmm0jj{margin-block-end:var(--space-24)}._1dkxmm0jo{margin-block-end:var(--space-32)}._1dkxmm0jt{margin-block-end:var(--space-40)}._1dkxmm0jy{margin-block-end:var(--space-48)}._1dkxmm0k3{margin-block-end:var(--space-64)}._1dkxmm0k8{margin-block-end:var(--space-80)}._1dkxmm0kd{margin-block-end:var(--space-96)}._1dkxmm0ki{margin-block-end:auto}._1dkxmm0kn{margin-inline-start:var(--space-0)}._1dkxmm0ks{margin-inline-start:var(--space-1)}._1dkxmm0kx{margin-inline-start:var(--space-2)}._1dkxmm0l2{margin-inline-start:var(--space-4)}._1dkxmm0l7{margin-inline-start:var(--space-6)}._1dkxmm0lc{margin-inline-start:var(--space-8)}._1dkxmm0lh{margin-inline-start:var(--space-12)}._1dkxmm0lm{margin-inline-start:var(--space-16)}._1dkxmm0lr{margin-inline-start:var(--space-20)}._1dkxmm0lw{margin-inline-start:var(--space-24)}._1dkxmm0m1{margin-inline-start:var(--space-32)}._1dkxmm0m6{margin-inline-start:var(--space-40)}._1dkxmm0mb{margin-inline-start:var(--space-48)}._1dkxmm0mg{margin-inline-start:var(--space-64)}._1dkxmm0ml{margin-inline-start:var(--space-80)}._1dkxmm0mq{margin-inline-start:var(--space-96)}._1dkxmm0mv{margin-inline-start:auto}._1dkxmm0n0{margin-inline-end:var(--space-0)}._1dkxmm0n5{margin-inline-end:var(--space-1)}._1dkxmm0na{margin-inline-end:var(--space-2)}._1dkxmm0nf{margin-inline-end:var(--space-4)}._1dkxmm0nk{margin-inline-end:var(--space-6)}._1dkxmm0np{margin-inline-end:var(--space-8)}._1dkxmm0nu{margin-inline-end:var(--space-12)}._1dkxmm0nz{margin-inline-end:var(--space-16)}._1dkxmm0o4{margin-inline-end:var(--space-20)}._1dkxmm0o9{margin-inline-end:var(--space-24)}._1dkxmm0oe{margin-inline-end:var(--space-32)}._1dkxmm0oj{margin-inline-end:var(--space-40)}._1dkxmm0oo{margin-inline-end:var(--space-48)}._1dkxmm0ot{margin-inline-end:var(--space-64)}._1dkxmm0oy{margin-inline-end:var(--space-80)}._1dkxmm0p3{margin-inline-end:var(--space-96)}._1dkxmm0p8{margin-inline-end:auto}._1dkxmm0pd{inline-size:var(--size-xs)}._1dkxmm0pi{inline-size:var(--size-sm)}._1dkxmm0pn{inline-size:var(--size-med)}._1dkxmm0ps{inline-size:var(--size-lg)}._1dkxmm0px{inline-size:var(--size-xl)}._1dkxmm0q2{inline-size:auto}._1dkxmm0q7{inline-size:100%}._1dkxmm0qc{inline-size:fit-content}._1dkxmm0qh{inline-size:min-content}._1dkxmm0qm{inline-size:max-content}._1dkxmm0qr{inline-size:var(--container-prose)}._1dkxmm0qw{inline-size:var(--container-page)}._1dkxmm0r1{inline-size:var(--container-wide)}._1dkxmm0r6{block-size:var(--size-xs)}._1dkxmm0rb{block-size:var(--size-sm)}._1dkxmm0rg{block-size:var(--size-med)}._1dkxmm0rl{block-size:var(--size-lg)}._1dkxmm0rq{block-size:var(--size-xl)}._1dkxmm0rv{block-size:auto}._1dkxmm0s0{block-size:100%}._1dkxmm0s5{block-size:fit-content}._1dkxmm0sa{block-size:min-content}._1dkxmm0sf{block-size:max-content}._1dkxmm0sk{min-inline-size:var(--size-xs)}._1dkxmm0sp{min-inline-size:var(--size-sm)}._1dkxmm0su{min-inline-size:var(--size-med)}._1dkxmm0sz{min-inline-size:var(--size-lg)}._1dkxmm0t4{min-inline-size:var(--size-xl)}._1dkxmm0t9{min-inline-size:auto}._1dkxmm0te{min-inline-size:100%}._1dkxmm0tj{min-inline-size:fit-content}._1dkxmm0to{min-inline-size:min-content}._1dkxmm0tt{min-inline-size:max-content}._1dkxmm0ty{min-inline-size:var(--container-prose)}._1dkxmm0u3{min-inline-size:var(--container-page)}._1dkxmm0u8{min-inline-size:var(--container-wide)}._1dkxmm0ud{max-inline-size:var(--size-xs)}._1dkxmm0ui{max-inline-size:var(--size-sm)}._1dkxmm0un{max-inline-size:var(--size-med)}._1dkxmm0us{max-inline-size:var(--size-lg)}._1dkxmm0ux{max-inline-size:var(--size-xl)}._1dkxmm0v2{max-inline-size:auto}._1dkxmm0v7{max-inline-size:100%}._1dkxmm0vc{max-inline-size:fit-content}._1dkxmm0vh{max-inline-size:min-content}._1dkxmm0vm{max-inline-size:max-content}._1dkxmm0vr{max-inline-size:var(--container-prose)}._1dkxmm0vw{max-inline-size:var(--container-page)}._1dkxmm0w1{max-inline-size:var(--container-wide)}._1dkxmm0w6{min-block-size:var(--size-xs)}._1dkxmm0wb{min-block-size:var(--size-sm)}._1dkxmm0wg{min-block-size:var(--size-med)}._1dkxmm0wl{min-block-size:var(--size-lg)}._1dkxmm0wq{min-block-size:var(--size-xl)}._1dkxmm0wv{min-block-size:auto}._1dkxmm0x0{min-block-size:100%}._1dkxmm0x5{min-block-size:fit-content}._1dkxmm0xa{min-block-size:min-content}._1dkxmm0xf{min-block-size:max-content}._1dkxmm0xk{max-block-size:var(--size-xs)}._1dkxmm0xp{max-block-size:var(--size-sm)}._1dkxmm0xu{max-block-size:var(--size-med)}._1dkxmm0xz{max-block-size:var(--size-lg)}._1dkxmm0y4{max-block-size:var(--size-xl)}._1dkxmm0y9{max-block-size:auto}._1dkxmm0ye{max-block-size:100%}._1dkxmm0yj{max-block-size:fit-content}._1dkxmm0yo{max-block-size:min-content}._1dkxmm0yt{max-block-size:max-content}}@media (width>=80em){._1dkxmm04{display:none}._1dkxmm09{display:block}._1dkxmm0e{display:inline}._1dkxmm0j{display:inline-block}._1dkxmm0o{display:flex}._1dkxmm0t{display:inline-flex}._1dkxmm0y{display:grid}._1dkxmm013{display:contents}._1dkxmm018{flex-direction:row}._1dkxmm01d{flex-direction:row-reverse}._1dkxmm01i{flex-direction:column}._1dkxmm01n{flex-direction:column-reverse}._1dkxmm01s{flex-wrap:nowrap}._1dkxmm01x{flex-wrap:wrap}._1dkxmm022{flex-grow:0}._1dkxmm027{flex-grow:1}._1dkxmm02c{flex-shrink:0}._1dkxmm02h{flex-shrink:1}._1dkxmm02m{align-items:start}._1dkxmm02r{align-items:center}._1dkxmm02w{align-items:end}._1dkxmm031{align-items:stretch}._1dkxmm036{align-items:baseline}._1dkxmm03b{align-self:start}._1dkxmm03g{align-self:center}._1dkxmm03l{align-self:end}._1dkxmm03q{align-self:stretch}._1dkxmm03v{align-self:baseline}._1dkxmm040{justify-content:start}._1dkxmm045{justify-content:center}._1dkxmm04a{justify-content:end}._1dkxmm04f{justify-content:space-between}._1dkxmm04k{justify-content:space-around}._1dkxmm04p{justify-content:space-evenly}._1dkxmm04u{gap:var(--space-0)}._1dkxmm04z{gap:var(--space-1)}._1dkxmm054{gap:var(--space-2)}._1dkxmm059{gap:var(--space-4)}._1dkxmm05e{gap:var(--space-6)}._1dkxmm05j{gap:var(--space-8)}._1dkxmm05o{gap:var(--space-12)}._1dkxmm05t{gap:var(--space-16)}._1dkxmm05y{gap:var(--space-20)}._1dkxmm063{gap:var(--space-24)}._1dkxmm068{gap:var(--space-32)}._1dkxmm06d{gap:var(--space-40)}._1dkxmm06i{gap:var(--space-48)}._1dkxmm06n{gap:var(--space-64)}._1dkxmm06s{gap:var(--space-80)}._1dkxmm06x{gap:var(--space-96)}._1dkxmm072{padding-block-start:var(--space-0)}._1dkxmm077{padding-block-start:var(--space-1)}._1dkxmm07c{padding-block-start:var(--space-2)}._1dkxmm07h{padding-block-start:var(--space-4)}._1dkxmm07m{padding-block-start:var(--space-6)}._1dkxmm07r{padding-block-start:var(--space-8)}._1dkxmm07w{padding-block-start:var(--space-12)}._1dkxmm081{padding-block-start:var(--space-16)}._1dkxmm086{padding-block-start:var(--space-20)}._1dkxmm08b{padding-block-start:var(--space-24)}._1dkxmm08g{padding-block-start:var(--space-32)}._1dkxmm08l{padding-block-start:var(--space-40)}._1dkxmm08q{padding-block-start:var(--space-48)}._1dkxmm08v{padding-block-start:var(--space-64)}._1dkxmm090{padding-block-start:var(--space-80)}._1dkxmm095{padding-block-start:var(--space-96)}._1dkxmm09a{padding-block-end:var(--space-0)}._1dkxmm09f{padding-block-end:var(--space-1)}._1dkxmm09k{padding-block-end:var(--space-2)}._1dkxmm09p{padding-block-end:var(--space-4)}._1dkxmm09u{padding-block-end:var(--space-6)}._1dkxmm09z{padding-block-end:var(--space-8)}._1dkxmm0a4{padding-block-end:var(--space-12)}._1dkxmm0a9{padding-block-end:var(--space-16)}._1dkxmm0ae{padding-block-end:var(--space-20)}._1dkxmm0aj{padding-block-end:var(--space-24)}._1dkxmm0ao{padding-block-end:var(--space-32)}._1dkxmm0at{padding-block-end:var(--space-40)}._1dkxmm0ay{padding-block-end:var(--space-48)}._1dkxmm0b3{padding-block-end:var(--space-64)}._1dkxmm0b8{padding-block-end:var(--space-80)}._1dkxmm0bd{padding-block-end:var(--space-96)}._1dkxmm0bi{padding-inline-start:var(--space-0)}._1dkxmm0bn{padding-inline-start:var(--space-1)}._1dkxmm0bs{padding-inline-start:var(--space-2)}._1dkxmm0bx{padding-inline-start:var(--space-4)}._1dkxmm0c2{padding-inline-start:var(--space-6)}._1dkxmm0c7{padding-inline-start:var(--space-8)}._1dkxmm0cc{padding-inline-start:var(--space-12)}._1dkxmm0ch{padding-inline-start:var(--space-16)}._1dkxmm0cm{padding-inline-start:var(--space-20)}._1dkxmm0cr{padding-inline-start:var(--space-24)}._1dkxmm0cw{padding-inline-start:var(--space-32)}._1dkxmm0d1{padding-inline-start:var(--space-40)}._1dkxmm0d6{padding-inline-start:var(--space-48)}._1dkxmm0db{padding-inline-start:var(--space-64)}._1dkxmm0dg{padding-inline-start:var(--space-80)}._1dkxmm0dl{padding-inline-start:var(--space-96)}._1dkxmm0dq{padding-inline-end:var(--space-0)}._1dkxmm0dv{padding-inline-end:var(--space-1)}._1dkxmm0e0{padding-inline-end:var(--space-2)}._1dkxmm0e5{padding-inline-end:var(--space-4)}._1dkxmm0ea{padding-inline-end:var(--space-6)}._1dkxmm0ef{padding-inline-end:var(--space-8)}._1dkxmm0ek{padding-inline-end:var(--space-12)}._1dkxmm0ep{padding-inline-end:var(--space-16)}._1dkxmm0eu{padding-inline-end:var(--space-20)}._1dkxmm0ez{padding-inline-end:var(--space-24)}._1dkxmm0f4{padding-inline-end:var(--space-32)}._1dkxmm0f9{padding-inline-end:var(--space-40)}._1dkxmm0fe{padding-inline-end:var(--space-48)}._1dkxmm0fj{padding-inline-end:var(--space-64)}._1dkxmm0fo{padding-inline-end:var(--space-80)}._1dkxmm0ft{padding-inline-end:var(--space-96)}._1dkxmm0fy{margin-block-start:var(--space-0)}._1dkxmm0g3{margin-block-start:var(--space-1)}._1dkxmm0g8{margin-block-start:var(--space-2)}._1dkxmm0gd{margin-block-start:var(--space-4)}._1dkxmm0gi{margin-block-start:var(--space-6)}._1dkxmm0gn{margin-block-start:var(--space-8)}._1dkxmm0gs{margin-block-start:var(--space-12)}._1dkxmm0gx{margin-block-start:var(--space-16)}._1dkxmm0h2{margin-block-start:var(--space-20)}._1dkxmm0h7{margin-block-start:var(--space-24)}._1dkxmm0hc{margin-block-start:var(--space-32)}._1dkxmm0hh{margin-block-start:var(--space-40)}._1dkxmm0hm{margin-block-start:var(--space-48)}._1dkxmm0hr{margin-block-start:var(--space-64)}._1dkxmm0hw{margin-block-start:var(--space-80)}._1dkxmm0i1{margin-block-start:var(--space-96)}._1dkxmm0i6{margin-block-start:auto}._1dkxmm0ib{margin-block-end:var(--space-0)}._1dkxmm0ig{margin-block-end:var(--space-1)}._1dkxmm0il{margin-block-end:var(--space-2)}._1dkxmm0iq{margin-block-end:var(--space-4)}._1dkxmm0iv{margin-block-end:var(--space-6)}._1dkxmm0j0{margin-block-end:var(--space-8)}._1dkxmm0j5{margin-block-end:var(--space-12)}._1dkxmm0ja{margin-block-end:var(--space-16)}._1dkxmm0jf{margin-block-end:var(--space-20)}._1dkxmm0jk{margin-block-end:var(--space-24)}._1dkxmm0jp{margin-block-end:var(--space-32)}._1dkxmm0ju{margin-block-end:var(--space-40)}._1dkxmm0jz{margin-block-end:var(--space-48)}._1dkxmm0k4{margin-block-end:var(--space-64)}._1dkxmm0k9{margin-block-end:var(--space-80)}._1dkxmm0ke{margin-block-end:var(--space-96)}._1dkxmm0kj{margin-block-end:auto}._1dkxmm0ko{margin-inline-start:var(--space-0)}._1dkxmm0kt{margin-inline-start:var(--space-1)}._1dkxmm0ky{margin-inline-start:var(--space-2)}._1dkxmm0l3{margin-inline-start:var(--space-4)}._1dkxmm0l8{margin-inline-start:var(--space-6)}._1dkxmm0ld{margin-inline-start:var(--space-8)}._1dkxmm0li{margin-inline-start:var(--space-12)}._1dkxmm0ln{margin-inline-start:var(--space-16)}._1dkxmm0ls{margin-inline-start:var(--space-20)}._1dkxmm0lx{margin-inline-start:var(--space-24)}._1dkxmm0m2{margin-inline-start:var(--space-32)}._1dkxmm0m7{margin-inline-start:var(--space-40)}._1dkxmm0mc{margin-inline-start:var(--space-48)}._1dkxmm0mh{margin-inline-start:var(--space-64)}._1dkxmm0mm{margin-inline-start:var(--space-80)}._1dkxmm0mr{margin-inline-start:var(--space-96)}._1dkxmm0mw{margin-inline-start:auto}._1dkxmm0n1{margin-inline-end:var(--space-0)}._1dkxmm0n6{margin-inline-end:var(--space-1)}._1dkxmm0nb{margin-inline-end:var(--space-2)}._1dkxmm0ng{margin-inline-end:var(--space-4)}._1dkxmm0nl{margin-inline-end:var(--space-6)}._1dkxmm0nq{margin-inline-end:var(--space-8)}._1dkxmm0nv{margin-inline-end:var(--space-12)}._1dkxmm0o0{margin-inline-end:var(--space-16)}._1dkxmm0o5{margin-inline-end:var(--space-20)}._1dkxmm0oa{margin-inline-end:var(--space-24)}._1dkxmm0of{margin-inline-end:var(--space-32)}._1dkxmm0ok{margin-inline-end:var(--space-40)}._1dkxmm0op{margin-inline-end:var(--space-48)}._1dkxmm0ou{margin-inline-end:var(--space-64)}._1dkxmm0oz{margin-inline-end:var(--space-80)}._1dkxmm0p4{margin-inline-end:var(--space-96)}._1dkxmm0p9{margin-inline-end:auto}._1dkxmm0pe{inline-size:var(--size-xs)}._1dkxmm0pj{inline-size:var(--size-sm)}._1dkxmm0po{inline-size:var(--size-med)}._1dkxmm0pt{inline-size:var(--size-lg)}._1dkxmm0py{inline-size:var(--size-xl)}._1dkxmm0q3{inline-size:auto}._1dkxmm0q8{inline-size:100%}._1dkxmm0qd{inline-size:fit-content}._1dkxmm0qi{inline-size:min-content}._1dkxmm0qn{inline-size:max-content}._1dkxmm0qs{inline-size:var(--container-prose)}._1dkxmm0qx{inline-size:var(--container-page)}._1dkxmm0r2{inline-size:var(--container-wide)}._1dkxmm0r7{block-size:var(--size-xs)}._1dkxmm0rc{block-size:var(--size-sm)}._1dkxmm0rh{block-size:var(--size-med)}._1dkxmm0rm{block-size:var(--size-lg)}._1dkxmm0rr{block-size:var(--size-xl)}._1dkxmm0rw{block-size:auto}._1dkxmm0s1{block-size:100%}._1dkxmm0s6{block-size:fit-content}._1dkxmm0sb{block-size:min-content}._1dkxmm0sg{block-size:max-content}._1dkxmm0sl{min-inline-size:var(--size-xs)}._1dkxmm0sq{min-inline-size:var(--size-sm)}._1dkxmm0sv{min-inline-size:var(--size-med)}._1dkxmm0t0{min-inline-size:var(--size-lg)}._1dkxmm0t5{min-inline-size:var(--size-xl)}._1dkxmm0ta{min-inline-size:auto}._1dkxmm0tf{min-inline-size:100%}._1dkxmm0tk{min-inline-size:fit-content}._1dkxmm0tp{min-inline-size:min-content}._1dkxmm0tu{min-inline-size:max-content}._1dkxmm0tz{min-inline-size:var(--container-prose)}._1dkxmm0u4{min-inline-size:var(--container-page)}._1dkxmm0u9{min-inline-size:var(--container-wide)}._1dkxmm0ue{max-inline-size:var(--size-xs)}._1dkxmm0uj{max-inline-size:var(--size-sm)}._1dkxmm0uo{max-inline-size:var(--size-med)}._1dkxmm0ut{max-inline-size:var(--size-lg)}._1dkxmm0uy{max-inline-size:var(--size-xl)}._1dkxmm0v3{max-inline-size:auto}._1dkxmm0v8{max-inline-size:100%}._1dkxmm0vd{max-inline-size:fit-content}._1dkxmm0vi{max-inline-size:min-content}._1dkxmm0vn{max-inline-size:max-content}._1dkxmm0vs{max-inline-size:var(--container-prose)}._1dkxmm0vx{max-inline-size:var(--container-page)}._1dkxmm0w2{max-inline-size:var(--container-wide)}._1dkxmm0w7{min-block-size:var(--size-xs)}._1dkxmm0wc{min-block-size:var(--size-sm)}._1dkxmm0wh{min-block-size:var(--size-med)}._1dkxmm0wm{min-block-size:var(--size-lg)}._1dkxmm0wr{min-block-size:var(--size-xl)}._1dkxmm0ww{min-block-size:auto}._1dkxmm0x1{min-block-size:100%}._1dkxmm0x6{min-block-size:fit-content}._1dkxmm0xb{min-block-size:min-content}._1dkxmm0xg{min-block-size:max-content}._1dkxmm0xl{max-block-size:var(--size-xs)}._1dkxmm0xq{max-block-size:var(--size-sm)}._1dkxmm0xv{max-block-size:var(--size-med)}._1dkxmm0y0{max-block-size:var(--size-lg)}._1dkxmm0y5{max-block-size:var(--size-xl)}._1dkxmm0ya{max-block-size:auto}._1dkxmm0yf{max-block-size:100%}._1dkxmm0yk{max-block-size:fit-content}._1dkxmm0yp{max-block-size:min-content}._1dkxmm0yu{max-block-size:max-content}}}
|
package/dist/styles/layers.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
1
|
+
@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
|
|
2
2
|
@layer tokens,reset,atoms,components;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jonmilner/ui",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.5",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist",
|
|
6
6
|
"THIRD_PARTY_NOTICES.md"
|
|
@@ -14,6 +14,10 @@
|
|
|
14
14
|
"types": "./dist/index.d.mts",
|
|
15
15
|
"default": "./dist/index.mjs"
|
|
16
16
|
},
|
|
17
|
+
"./Avatar": {
|
|
18
|
+
"types": "./dist/Avatar/index.d.mts",
|
|
19
|
+
"default": "./dist/Avatar/index.mjs"
|
|
20
|
+
},
|
|
17
21
|
"./Badge": {
|
|
18
22
|
"types": "./dist/Badge/index.d.mts",
|
|
19
23
|
"default": "./dist/Badge/index.mjs"
|