@jonmilner/ui 0.5.2 → 0.5.4

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.
Files changed (49) hide show
  1. package/dist/AlertDialog/client.mjs +16 -0
  2. package/dist/AlertDialog/index.d.mts +1 -1
  3. package/dist/AlertDialog/index.mjs +7 -7
  4. package/dist/Avatar/Avatar.css +2 -0
  5. package/dist/Avatar/Avatar.css.mjs +18 -0
  6. package/dist/Avatar/index.d.mts +15 -0
  7. package/dist/Avatar/index.mjs +45 -0
  8. package/dist/Avatar/ink.mjs +18 -0
  9. package/dist/Badge/Badge.css +1 -1
  10. package/dist/Box/Box.css +1 -1
  11. package/dist/Button/Button.css +1 -1
  12. package/dist/Checkbox/Checkbox.css +1 -1
  13. package/dist/Chip/Chip.css +1 -1
  14. package/dist/Clickable/Clickable.css +1 -1
  15. package/dist/ColorField/ColorField.css +1 -1
  16. package/dist/Dialog/Dialog.css +1 -1
  17. package/dist/Dialog/client.d.mts +2 -0
  18. package/dist/Dialog/client.mjs +64 -21
  19. package/dist/Dialog/index.d.mts +2 -2
  20. package/dist/Dialog/index.mjs +46 -50
  21. package/dist/Field/Field.css +1 -1
  22. package/dist/Heading/Heading.css +1 -1
  23. package/dist/Icon/Icon.css +1 -1
  24. package/dist/IconButton/IconButton.css +1 -1
  25. package/dist/Inline/Inline.css +1 -1
  26. package/dist/Menu/Menu.css +1 -1
  27. package/dist/MultiSelect/MultiSelect.css +1 -1
  28. package/dist/SearchField/SearchField.css +1 -1
  29. package/dist/Stack/Stack.css +1 -1
  30. package/dist/Tabs/Tabs.css +1 -1
  31. package/dist/Tag/Tag.css +1 -1
  32. package/dist/Text/Text.css +1 -1
  33. package/dist/TextField/TextField.css +1 -1
  34. package/dist/Toast/Toast.css +1 -1
  35. package/dist/VisuallyHidden/VisuallyHidden.css +1 -1
  36. package/dist/base.css +1 -1
  37. package/dist/docs/AlertDialog.md +1 -0
  38. package/dist/docs/Avatar.md +77 -0
  39. package/dist/docs/Badge.md +1 -0
  40. package/dist/docs/Dialog.md +1 -0
  41. package/dist/docs/Tag.md +1 -0
  42. package/dist/docs/llms.txt +1 -0
  43. package/dist/docs/manifest.json +34 -1
  44. package/dist/index.d.mts +3 -2
  45. package/dist/index.mjs +21 -20
  46. package/dist/popup/client.mjs +35 -17
  47. package/dist/styles/atoms.css +1 -1
  48. package/dist/styles/layers.css +1 -1
  49. package/package.json +5 -1
@@ -0,0 +1,16 @@
1
+ "use client";
2
+ import { PopupScope as e, useRecordOpenChange as t } from "../popup/client.mjs";
3
+ import { AlertDialog as n } from "@base-ui/react/alert-dialog";
4
+ import { jsx as r } from "react/jsx-runtime";
5
+ //#region src/AlertDialog/client.tsx
6
+ function i(t) {
7
+ return /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(a, { ...t }) });
8
+ }
9
+ function a({ onOpenChange: e, ...i }) {
10
+ return /* @__PURE__ */ r(n.Root, {
11
+ ...i,
12
+ onOpenChange: t(e)
13
+ });
14
+ }
15
+ //#endregion
16
+ export { i as AlertDialogRootScope };
@@ -1,5 +1,5 @@
1
- import { DialogTrigger, DialogTriggerProps } from "../Dialog/client.mjs";
2
1
  import "../Dialog/index.mjs";
2
+ import { DialogTrigger, DialogTriggerProps } from "../Dialog/client.mjs";
3
3
  import { ReactNode } from "react";
4
4
  import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
5
5
  //#region src/AlertDialog/index.d.ts
@@ -1,17 +1,17 @@
1
1
  import { Button as e } from "../Button/index.mjs";
2
- import { PopupScope as t } from "../popup/client.mjs";
3
- import { Dialog as n } from "../Dialog/index.mjs";
2
+ import { Dialog as t } from "../Dialog/index.mjs";
3
+ import { AlertDialogRootScope as n } from "./client.mjs";
4
4
  import { AlertDialog as r } from "@base-ui/react/alert-dialog";
5
5
  import { jsx as i, jsxs as a } from "react/jsx-runtime";
6
6
  //#region src/AlertDialog/index.tsx
7
7
  function o({ title: o, description: s, confirmLabel: c, cancelLabel: l = "Cancel", tone: u = "default", onConfirm: d, children: f, ...p }) {
8
- return /* @__PURE__ */ i(t, { children: /* @__PURE__ */ a(r.Root, {
8
+ return /* @__PURE__ */ a(n, {
9
9
  ...p,
10
- children: [f, /* @__PURE__ */ i(n.Popup, {
10
+ children: [f, /* @__PURE__ */ i(t.Popup, {
11
11
  description: s,
12
12
  size: "sm",
13
13
  title: o,
14
- children: /* @__PURE__ */ a(n.Actions, { children: [/* @__PURE__ */ i(n.Close, {
14
+ children: /* @__PURE__ */ a(t.Actions, { children: [/* @__PURE__ */ i(t.Close, {
15
15
  variant: "secondary",
16
16
  children: l
17
17
  }), /* @__PURE__ */ i(r.Close, {
@@ -22,8 +22,8 @@ function o({ title: o, description: s, confirmLabel: c, cancelLabel: l = "Cancel
22
22
  children: c
23
23
  })] })
24
24
  })]
25
- }) });
25
+ });
26
26
  }
27
- var s = Object.assign(o, { Trigger: n.Trigger });
27
+ var s = Object.assign(o, { Trigger: t.Trigger });
28
28
  //#endregion
29
29
  export { s as AlertDialog };
@@ -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 };
@@ -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}}
@@ -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}}
@@ -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}}}
@@ -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))}}
@@ -1,4 +1,6 @@
1
+ import "../Box/index.mjs";
1
2
  import { TriggerElementProps, TriggerLookProps } from "../popup/client.mjs";
3
+ import "./index.mjs";
2
4
  import { Dialog } from "@base-ui/react/dialog";
3
5
  import { ReactNode } from "react";
4
6
  //#region src/Dialog/client.d.ts
@@ -1,31 +1,74 @@
1
1
  "use client";
2
- import { triggerElement as e, usePopupScope as t } from "../popup/client.mjs";
3
- import { jsx as n } from "react/jsx-runtime";
4
- import { Dialog as r } from "@base-ui/react/dialog";
2
+ import { join as e } from "../styles/join.mjs";
3
+ import { splitStyleProps as t } from "../styles/split-style-props.mjs";
4
+ import { Box as n } from "../Box/index.mjs";
5
+ import { PopupScope as r, triggerElement as i, useClosingRule as a, usePopupScope as o, useRecordOpenChange as s } from "../popup/client.mjs";
6
+ import { jsx as c } from "react/jsx-runtime";
7
+ import { Dialog as l } from "@base-ui/react/dialog";
5
8
  //#region src/Dialog/client.tsx
6
- function i({ disabled: i = !1, handle: a, payload: o, id: s, ...c }) {
7
- let { ref: l } = t();
8
- return /* @__PURE__ */ n(r.Trigger, {
9
- disabled: i,
10
- handle: a,
11
- payload: o,
12
- id: s,
13
- ref: l,
14
- render: e(c)
9
+ function u({ disabled: e = !1, handle: t, payload: n, id: r, ...a }) {
10
+ let { ref: s } = o();
11
+ return /* @__PURE__ */ c(l.Trigger, {
12
+ disabled: e,
13
+ handle: t,
14
+ payload: n,
15
+ id: r,
16
+ ref: s,
17
+ render: i(a)
15
18
  });
16
19
  }
17
- function a({ disabled: t = !1, ...i }) {
18
- return /* @__PURE__ */ n(r.Close, {
19
- disabled: t,
20
- render: e(i)
20
+ function d({ disabled: e = !1, ...t }) {
21
+ return /* @__PURE__ */ c(l.Close, {
22
+ disabled: e,
23
+ render: i(t)
21
24
  });
22
25
  }
23
- function o({ children: e }) {
24
- let { container: i } = t();
25
- return /* @__PURE__ */ n(r.Portal, {
26
- container: i,
26
+ function f({ children: e }) {
27
+ let { container: t } = o();
28
+ return /* @__PURE__ */ c(l.Portal, {
29
+ container: t,
27
30
  children: e
28
31
  });
29
32
  }
33
+ function p(e) {
34
+ return /* @__PURE__ */ c(r, { children: /* @__PURE__ */ c(m, { ...e }) });
35
+ }
36
+ function m({ onOpenChange: e, ...t }) {
37
+ return /* @__PURE__ */ c(l.Root, {
38
+ ...t,
39
+ onOpenChange: s(e)
40
+ });
41
+ }
42
+ function h({ frame: e, ...n }) {
43
+ let r = n.finalFocus !== void 0 && n.finalFocus !== !0;
44
+ return /* @__PURE__ */ c(l.Popup, {
45
+ ...n,
46
+ render: (n, { open: i }) => {
47
+ let [, a] = t(n);
48
+ return /* @__PURE__ */ c(g, {
49
+ ...a,
50
+ finalFocus: r,
51
+ frame: e,
52
+ open: i
53
+ });
54
+ }
55
+ });
56
+ }
57
+ function g({ open: t, finalFocus: r, frame: i, ref: o, className: s, style: l, ...u }) {
58
+ return /* @__PURE__ */ c(n, {
59
+ ...u,
60
+ ...i,
61
+ ...a(o, {
62
+ finalFocus: r,
63
+ modal: !0,
64
+ open: t
65
+ }),
66
+ className: e(s, i.className),
67
+ style: {
68
+ ...l,
69
+ ...i.style
70
+ }
71
+ });
72
+ }
30
73
  //#endregion
31
- export { a as DialogClose, o as DialogPortal, i as DialogTrigger };
74
+ export { d as DialogClose, h as DialogPopupFrame, f as DialogPortal, p as DialogRootScope, u as DialogTrigger };
@@ -1,7 +1,7 @@
1
1
  import { BoxProps } from "../Box/index.mjs";
2
- import { DialogClose, DialogCloseProps, DialogTrigger, DialogTriggerProps } from "./client.mjs";
3
2
  import { PartProps } from "../styles/part-props.mjs";
4
3
  import { size as size$1 } from "./Dialog.css.mjs";
4
+ import { DialogClose, DialogCloseProps, DialogTrigger, DialogTriggerProps } from "./client.mjs";
5
5
  import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
6
6
  import { ReactNode } from "react";
7
7
  //#region src/Dialog/index.d.ts
@@ -15,7 +15,7 @@ export type DialogPopupProps = PartProps<Omit<Dialog$1.Popup.Props, "title">> &
15
15
  };
16
16
  export type DialogBodyProps = Omit<BoxProps<"div">, "as">;
17
17
  export type DialogActionsProps = Omit<BoxProps<"div">, "as">;
18
- declare function DialogRoot({ children, ...props }: DialogProps): import("react").JSX.Element;
18
+ declare function DialogRoot(props: DialogProps): import("react").JSX.Element;
19
19
  declare function DialogPopup({ title, description, size, position, margin, blockSize, display, flexDirection, gap, padding, backgroundColor, borderRadius, boxShadow, overflow, className, style, children, ...props }: DialogPopupProps): import("react").JSX.Element;
20
20
  declare function DialogBody({ display, flexDirection, gap, ...props }: DialogBodyProps): import("react").JSX.Element;
21
21
  declare function DialogActions({ display, flexWrap, justifyContent, gap, ...props }: DialogActionsProps): import("react").JSX.Element;
@@ -3,71 +3,67 @@ import { splitStyleProps as t } from "../styles/split-style-props.mjs";
3
3
  import { Box as n } from "../Box/index.mjs";
4
4
  import { Text as r } from "../Text/index.mjs";
5
5
  import { Heading as i } from "../Heading/index.mjs";
6
- import { PopupScope as a } from "../popup/client.mjs";
7
- import { DialogClose as o, DialogPortal as s, DialogTrigger as c } from "./client.mjs";
8
- import { backdrop as l, popup as u, size as d } from "./Dialog.css.mjs";
9
- import { jsx as f, jsxs as p } from "react/jsx-runtime";
10
- import { Dialog as m } from "@base-ui/react/dialog";
6
+ import { DialogClose as a, DialogPopupFrame as o, DialogPortal as s, DialogRootScope as c, DialogTrigger as l } from "./client.mjs";
7
+ import { backdrop as u, popup as d, size as f } from "./Dialog.css.mjs";
8
+ import { jsx as p, jsxs as m } from "react/jsx-runtime";
9
+ import { Dialog as h } from "@base-ui/react/dialog";
11
10
  //#region src/Dialog/index.tsx
12
- function h({ children: e, ...t }) {
13
- return /* @__PURE__ */ f(a, { children: /* @__PURE__ */ f(m.Root, {
14
- ...t,
15
- children: e
16
- }) });
11
+ function g(e) {
12
+ return /* @__PURE__ */ p(c, { ...e });
17
13
  }
18
- function g({ title: a, description: o, size: c = "med", position: h = "fixed", margin: g = "auto", blockSize: _ = "fit", display: v = "flex", flexDirection: y = "column", gap: b = "16", padding: x = "24", backgroundColor: S = "bgRaised", borderRadius: C = "lg", boxShadow: w = "lg", overflow: T = "auto", className: E, style: D, children: O, ...k }) {
19
- let [A, j] = t(k);
20
- return /* @__PURE__ */ p(s, { children: [/* @__PURE__ */ f(m.Backdrop, { render: /* @__PURE__ */ f(n, {
21
- className: l,
14
+ function _({ title: a, description: c, size: l = "med", position: g = "fixed", margin: _ = "auto", blockSize: v = "fit", display: y = "flex", flexDirection: b = "column", gap: x = "16", padding: S = "24", backgroundColor: C = "bgRaised", borderRadius: w = "lg", boxShadow: T = "lg", overflow: E = "auto", className: D, style: O, children: k, ...A }) {
15
+ let [j, M] = t(A);
16
+ return /* @__PURE__ */ m(s, { children: [/* @__PURE__ */ p(h.Backdrop, { render: /* @__PURE__ */ p(n, {
17
+ className: u,
22
18
  position: "fixed",
23
19
  zIndex: "modal"
24
- }) }), /* @__PURE__ */ p(m.Popup, {
20
+ }) }), /* @__PURE__ */ m(o, {
25
21
  "aria-modal": !0,
26
- ...j,
27
- render: /* @__PURE__ */ f(n, {
22
+ ...M,
23
+ frame: {
28
24
  zIndex: "modal",
29
- position: h,
30
- margin: g,
31
- blockSize: _,
32
- display: v,
33
- flexDirection: y,
34
- gap: b,
35
- padding: x,
36
- backgroundColor: S,
37
- borderRadius: C,
38
- boxShadow: w,
39
- overflow: T,
40
- ...A,
41
- className: e(u, d[c], E),
42
- style: D
43
- }),
44
- children: [/* @__PURE__ */ p(n, {
25
+ position: g,
26
+ margin: _,
27
+ blockSize: v,
28
+ display: y,
29
+ flexDirection: b,
30
+ gap: x,
31
+ padding: S,
32
+ backgroundColor: C,
33
+ borderRadius: w,
34
+ boxShadow: T,
35
+ overflow: E,
36
+ ...j,
37
+ className: e(d, f[l], D),
38
+ style: O
39
+ },
40
+ children: [/* @__PURE__ */ m(n, {
45
41
  display: "flex",
46
42
  flexDirection: "column",
47
43
  gap: "8",
48
- children: [/* @__PURE__ */ f(m.Title, {
49
- render: /* @__PURE__ */ f(i, {
44
+ children: [/* @__PURE__ */ p(h.Title, {
45
+ render: /* @__PURE__ */ p(i, {
50
46
  as: "h2",
51
47
  size: "lg"
52
48
  }),
53
49
  children: a
54
- }), o == null ? null : /* @__PURE__ */ f(m.Description, {
55
- render: /* @__PURE__ */ f(r, { color: "fgMuted" }),
56
- children: o
50
+ }), c == null ? null : /* @__PURE__ */ p(h.Description, {
51
+ render: /* @__PURE__ */ p(r, { color: "fgMuted" }),
52
+ children: c
57
53
  })]
58
- }), O]
54
+ }), k]
59
55
  })] });
60
56
  }
61
- function _({ display: e = "flex", flexDirection: t = "column", gap: r = "12", ...i }) {
62
- return /* @__PURE__ */ f(n, {
57
+ function v({ display: e = "flex", flexDirection: t = "column", gap: r = "12", ...i }) {
58
+ return /* @__PURE__ */ p(n, {
63
59
  display: e,
64
60
  flexDirection: t,
65
61
  gap: r,
66
62
  ...i
67
63
  });
68
64
  }
69
- function v({ display: e = "flex", flexWrap: t = "wrap", justifyContent: r = "end", gap: i = "8", ...a }) {
70
- return /* @__PURE__ */ f(n, {
65
+ function y({ display: e = "flex", flexWrap: t = "wrap", justifyContent: r = "end", gap: i = "8", ...a }) {
66
+ return /* @__PURE__ */ p(n, {
71
67
  display: e,
72
68
  flexWrap: t,
73
69
  justifyContent: r,
@@ -75,12 +71,12 @@ function v({ display: e = "flex", flexWrap: t = "wrap", justifyContent: r = "end
75
71
  ...a
76
72
  });
77
73
  }
78
- var y = Object.assign(h, {
79
- Trigger: c,
80
- Popup: g,
81
- Body: _,
82
- Actions: v,
83
- Close: o
74
+ var b = Object.assign(g, {
75
+ Trigger: l,
76
+ Popup: _,
77
+ Body: v,
78
+ Actions: y,
79
+ Close: a
84
80
  });
85
81
  //#endregion
86
- export { y as Dialog };
82
+ export { b as Dialog };
@@ -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}}
@@ -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}}
@@ -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}}}
@@ -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;
@@ -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}}}
@@ -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;
@@ -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}}}
@@ -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}}}
@@ -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}}}
@@ -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}}}
@@ -75,6 +75,7 @@ const [open, setOpen] = useState(false);
75
75
 
76
76
  - The trigger has `aria-haspopup="dialog"` and `aria-expanded`. The popup is `role="alertdialog"` with `aria-modal`, labelled by the title and described by the description.
77
77
  - Opening moves focus to Cancel; Tab and Shift+Tab cycle between the two buttons, and the page behind is inert. Esc or Cancel closes it, and focus returns to the trigger. A click outside does nothing.
78
+ - A closed alert dialog stays on the page while it fades out, but is `inert` and `aria-hidden` from the moment it closes, and focus is back on the trigger at once, so a dialog opened during the fade is the only one a screen reader or a role query finds, and nothing in the fading one takes focus or a click (ADR 0113).
78
79
  - The danger confirm button is told apart by its label as well as its color.
79
80
  - Under reduced motion the panel only fades.
80
81
 
@@ -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`).
@@ -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.
@@ -99,6 +99,7 @@ const [open, setOpen] = useState(false);
99
99
 
100
100
  - The trigger has `aria-haspopup="dialog"` and `aria-expanded`. The popup is `role="dialog"` with `aria-modal`, labelled by the title and described by the description.
101
101
  - Opening moves focus into the popup; Tab and Shift+Tab cycle inside it, and the page behind is inert. Esc or a backdrop click closes it, and focus returns to the trigger.
102
+ - A closed dialog stays on the page while it fades out, but is `inert` and `aria-hidden` from the moment it closes, and focus is back on the trigger at once, so a dialog opened during the fade is the only one a screen reader or a role query finds, and nothing in the fading one takes focus or a click (ADR 0113).
102
103
  - The panel takes the shared focus ring when focused from the keyboard. Under forced colors it keeps its border, so it stays apart from the page.
103
104
  - The backdrop is 40% of the shadow color over the page; it only dims, and carries no text.
104
105
 
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`.
@@ -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.
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "./manifest.schema.json",
3
3
  "package": "@jonmilner/ui",
4
- "version": "0.5.2",
4
+ "version": "0.5.4",
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
@@ -2,9 +2,10 @@ import { Box, BoxProps, StyleProps } from "./Box/index.mjs";
2
2
  import { Clickable, ClickableProps } from "./Clickable/index.mjs";
3
3
  import { Icon, IconProps } from "./Icon/index.mjs";
4
4
  import { Button, ButtonProps } from "./Button/index.mjs";
5
- import { DialogCloseProps, DialogTriggerProps } from "./Dialog/client.mjs";
6
5
  import { Dialog, DialogActionsProps, DialogBodyProps, DialogPopupProps, DialogProps } from "./Dialog/index.mjs";
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 { Badge as c } from "./Badge/index.mjs";
10
- import { Checkbox as l } from "./Checkbox/index.mjs";
11
- import { Chip as u, ChipGroup as d } from "./Chip/index.mjs";
12
- import { Field as f } from "./Field/index.mjs";
13
- import { ColorField as p } from "./ColorField/index.mjs";
14
- import { IconButton as m } from "./IconButton/index.mjs";
15
- import { Inline as h } from "./Inline/index.mjs";
16
- import { Menu as g } from "./Menu/index.mjs";
17
- import { MultiSelect as _ } from "./MultiSelect/index.mjs";
18
- import { SearchField as v } from "./SearchField/index.mjs";
19
- import { Stack as y } from "./Stack/index.mjs";
20
- import { Tabs as b } from "./Tabs/index.mjs";
21
- import { Tag as x } from "./Tag/index.mjs";
22
- import { TextField as S } from "./TextField/index.mjs";
23
- import { defineTheme as C } from "./theme/define-theme.mjs";
24
- import { ThemeProvider as w } from "./theme/ThemeProvider.mjs";
25
- import { useToast as T } from "./Toast/client.mjs";
26
- import { Toast as E } from "./Toast/index.mjs";
27
- import { VisuallyHidden as D } from "./VisuallyHidden/index.mjs";
28
- export { s as AlertDialog, c as Badge, e as Box, i as Button, l as Checkbox, u as Chip, d as ChipGroup, t as Clickable, p as ColorField, o as Dialog, f as Field, a as Heading, n as Icon, m as IconButton, h as Inline, g as Menu, _ as MultiSelect, v as SearchField, y as Stack, b as Tabs, x as Tag, r as Text, S as TextField, w as ThemeProvider, E as Toast, D as VisuallyHidden, C as defineTheme, T as useToast };
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 };
@@ -43,11 +43,13 @@ function m(e) {
43
43
  return (n, r) => {
44
44
  t.current = n ? {
45
45
  keyboard: !1,
46
- opener: r.trigger ?? null
46
+ opener: r.trigger ?? null,
47
+ recorded: !0
47
48
  } : {
48
49
  ...t.current,
49
50
  keyboard: r.event instanceof KeyboardEvent,
50
- reason: r.reason
51
+ reason: r.reason,
52
+ recorded: !1
51
53
  }, e?.(n, r);
52
54
  };
53
55
  }
@@ -64,37 +66,53 @@ var g = /* @__PURE__ */ new Set([
64
66
  "trigger-hover",
65
67
  "focus-out",
66
68
  "outside-press"
67
- ]);
68
- function _(e, { finalFocus: t, open: n }) {
69
- let { trigger: r } = f(), i = a(u), l = c(null), d = o((t) => {
70
- l.current = t;
69
+ ]), _;
70
+ function v(e) {
71
+ return _ === void 0 && (_ = !1, e.createElement("div").focus({ get preventScroll() {
72
+ return _ = !0, !1;
73
+ } })), _;
74
+ }
75
+ function y(e, { finalFocus: t, modal: n = !1, open: r }) {
76
+ let { trigger: i } = f(), l = a(u), d = c(null), p = o((t) => {
77
+ d.current = t;
71
78
  let n = h(e, t);
72
79
  return () => {
73
- l.current = null, n();
80
+ d.current = null, n();
74
81
  };
75
82
  }, [e]);
76
83
  return s(() => {
77
- let e = l.current;
84
+ let e = d.current;
85
+ if (!r || !e || l.current.recorded) return;
86
+ let { activeElement: t, body: n } = e.ownerDocument, i = t === n || e.contains(t) ? null : t;
87
+ l.current = {
88
+ keyboard: !1,
89
+ opener: i
90
+ };
91
+ }, [r, l]), s(() => {
92
+ let e = d.current;
78
93
  if (!e) return;
79
- if (n) {
94
+ if (r) {
80
95
  e.inert = !1;
81
96
  return;
82
97
  }
83
- let { reason: a, keyboard: o, opener: s } = i.current, c = s?.isConnected ? s : r.current;
84
- if (e.contains(e.ownerDocument.activeElement) && !t && !g.has(a ?? "") && c instanceof HTMLElement) {
98
+ let { reason: a, keyboard: o, opener: s } = l.current;
99
+ l.current.recorded = !1;
100
+ let c = s?.isConnected ? s : i.current, { activeElement: u } = e.ownerDocument, f = n && a === "outside-press" && v(e.ownerDocument);
101
+ if (!t && c instanceof HTMLElement && (f || e.contains(u) && !g.has(a ?? ""))) {
85
102
  let e = { preventScroll: !0 };
86
103
  o && (e.focusVisible = !0), c.focus(e);
87
104
  }
88
105
  e.inert = !0;
89
106
  }, [
90
- n,
107
+ r,
91
108
  t,
92
- i,
93
- r
109
+ n,
110
+ l,
111
+ i
94
112
  ]), {
95
- "aria-hidden": !n || void 0,
96
- ref: d
113
+ "aria-hidden": !r || void 0,
114
+ ref: p
97
115
  };
98
116
  }
99
117
  //#endregion
100
- export { d as PopupScope, p as triggerElement, _ as useClosingRule, f as usePopupScope, m as useRecordOpenChange };
118
+ export { d as PopupScope, p as triggerElement, y as useClosingRule, f as usePopupScope, m as useRecordOpenChange };
@@ -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}}}
@@ -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.2",
3
+ "version": "0.5.4",
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"