@seekalfred/primitives 0.3.0 → 0.4.0

package/README.md

@@ -488,6 +488,31 @@ invalid styling on only one of them.
 | `min-h-[80px]`         | `min-h-20`        | same 80px, from the spacing scale                           |
 | `relative` + `absolute left-3` + `pl-9` | `startIcon` / `endIcon` | **delete the wrapper and the padding** — see below |
 
+### Sizing a field
+
+```tsx
+<Input size="sm" aria-label="Filter" />
+<Select size="sm" label="Status">…</Select>
+<Button size="sm">Apply</Button>
+```
+
+`sm` | `md` | `lg`, default `md`, on the same `--density-control-*` tokens as
+`Button` — so a field, a picker and a button on one rung are the same height.
+In the legacy app 36 of 97 `Input` call sites and 14 of 32 `SelectTrigger` ones
+hand-rolled a height, and a `size="sm"` Button (167 call sites) sat 10px off
+the field it belonged to.
+
+Two things worth knowing:
+
+- **`size` replaces the native attribute.** React Aria inherits `size?: number`
+  (a character count) from `InputHTMLAttributes`; `InputProps` omits it. Set a
+  width with `className`. No legacy call site used it.
+- **Type does not scale with the box.** The field stays at 16px on every rung.
+  Below that, iOS Safari zooms the viewport when the field takes focus.
+
+`Textarea` has no `size` — it is `min-h` driven and no call site overrides its
+height.
+
 ### Icons in a field
 
 ```tsx

package/dist/alert/alert.d.ts

@@ -24,7 +24,7 @@ import { ComponentPropsWithoutRef, ReactNode } from "react";
  * problems rather than porting them.
  */
 export declare const alertVariants: (props?: ({
-  variant?: "destructive" | "default" | null | undefined;
+  variant?: "default" | "destructive" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * An inline status message.

package/dist/avatar/avatar.d.ts

@@ -17,7 +17,7 @@ import { ComponentPropsWithoutRef, ReactNode } from "react";
  * class assembled at runtime is invisible to it and would never be emitted.
  */
 export declare const avatarVariants: (props?: ({
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+  size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * A user avatar.

package/dist/button/button.d.ts

@@ -21,7 +21,7 @@ import { ReactNode } from "react";
  * touch and keyboard uniformly. The original had no pressed state at all.
  */
 export declare const buttonVariants: (props?: ({
-  variant?: "primary" | "secondary" | "outline" | "outlineNeutral" | "ghost" | "destructive" | "link" | null | undefined;
+  variant?: "destructive" | "primary" | "secondary" | "outline" | "outlineNeutral" | "ghost" | "link" | null | undefined;
   size?: "sm" | "md" | "lg" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**

package/dist/input/input.d.ts

@@ -24,6 +24,7 @@ import { ReactNode } from "react";
  * be an existing one, after `popover`, `accent` and the scrim.
  */
 export declare const inputVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
   hasStartIcon?: boolean | null | undefined;
   hasEndIcon?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -34,9 +35,24 @@ export declare const inputVariants: (props?: ({
  * <Input type="email" placeholder="you@example.com" value={v} onChange={e => set(e.target.value)} />
  * <Input aria-label="Search" startIcon={<SearchIcon aria-hidden />} />
  */
-interface InputProps$1 extends Omit<InputProps, "className" | "style"> {
+interface InputProps$1 extends Omit<InputProps, "className" | "style" | "size"> {
   /** Extra classes. Merged last, so they win conflicts with ours. */
   className?: string;
+  /**
+   * Control scale. Height and inline padding come from the same
+   * `--density-control-*` tokens as Button, so a field and a button on one
+   * rung are the same height.
+   *
+   * Type does not scale with it: the field stays at 16px everywhere, because
+   * iOS Safari zooms the viewport when a focused input's text is smaller.
+   *
+   * This REPLACES the native `size` attribute, which React Aria inherits from
+   * `InputHTMLAttributes` as a character count. No call site in the census
+   * used it; set a width with `className` instead.
+   *
+   * @default "md"
+   */
+  size?: "sm" | "md" | "lg";
   /**
    * Decorative glyph at the leading edge of the field.
    *
@@ -58,7 +74,7 @@ interface InputProps$1 extends Omit<InputProps, "className" | "style"> {
   /** Decorative glyph at the trailing edge. Same rules as {@link InputProps.startIcon}. */
   endIcon?: ReactNode;
 }
-declare function Input$1({ className, startIcon, endIcon, ...props }: InputProps$1): import("react").JSX.Element;
+declare function Input$1({ className, size, startIcon, endIcon, ...props }: InputProps$1): import("react").JSX.Element;
 //#endregion
 export { Input$1 as Input, InputProps$1 as InputProps };
 //# sourceMappingURL=input.d.ts.map

package/dist/input/input.js

@@ -29,14 +29,66 @@ import { jsx, jsxs } from "react/jsx-runtime";
 */
 const inputVariants = cva([
 	fieldSurfaceVariants(),
-	"h-(--density-control-h-md) px-(--density-control-pad-md)",
 	"text-base",
 	"file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium",
 	"file:text-foreground"
-], { variants: {
-	hasStartIcon: { true: "ps-[calc(var(--density-control-pad-md)_+_var(--icon-sm)_+_var(--density-control-gap))]" },
-	hasEndIcon: { true: "pe-[calc(var(--density-control-pad-md)_+_var(--icon-sm)_+_var(--density-control-gap))]" }
-} });
+], {
+	variants: {
+		/**
+		* Height and inline padding from the control scale, so `data-density`
+		* moves a whole form at once. Same three names and the same tokens as
+		* Button, because they sit in the same row: Button's `sm` is the app's
+		* second most common at 167 call sites, and while the field was locked
+		* to `md` the pair was 10px out of alignment with no supported fix.
+		*
+		* Type does NOT scale, which is the one place this axis deliberately
+		* departs from Button's. iOS Safari zooms the viewport when a focused
+		* field's text is under 16px, so `text-base` stays pinned in the base
+		* at every rung -- see the note there. Shrinking the box is a layout
+		* choice; shrinking the type is a bug on a phone.
+		*/
+		size: {
+			sm: "h-(--density-control-h-sm) px-(--density-control-pad-sm)",
+			md: "h-(--density-control-h-md) px-(--density-control-pad-md)",
+			lg: "h-(--density-control-h-lg) px-(--density-control-pad-lg)"
+		},
+		hasStartIcon: { true: "" },
+		hasEndIcon: { true: "" }
+	},
+	compoundVariants: [
+		{
+			size: "sm",
+			hasStartIcon: true,
+			class: "ps-[calc(var(--density-control-pad-sm)_+_var(--icon-sm)_+_var(--density-control-gap))]"
+		},
+		{
+			size: "md",
+			hasStartIcon: true,
+			class: "ps-[calc(var(--density-control-pad-md)_+_var(--icon-sm)_+_var(--density-control-gap))]"
+		},
+		{
+			size: "lg",
+			hasStartIcon: true,
+			class: "ps-[calc(var(--density-control-pad-lg)_+_var(--icon-sm)_+_var(--density-control-gap))]"
+		},
+		{
+			size: "sm",
+			hasEndIcon: true,
+			class: "pe-[calc(var(--density-control-pad-sm)_+_var(--icon-sm)_+_var(--density-control-gap))]"
+		},
+		{
+			size: "md",
+			hasEndIcon: true,
+			class: "pe-[calc(var(--density-control-pad-md)_+_var(--icon-sm)_+_var(--density-control-gap))]"
+		},
+		{
+			size: "lg",
+			hasEndIcon: true,
+			class: "pe-[calc(var(--density-control-pad-lg)_+_var(--icon-sm)_+_var(--density-control-gap))]"
+		}
+	],
+	defaultVariants: { size: "md" }
+});
 /**
 * An affix slot.
 *
@@ -56,15 +108,58 @@ const affixVariants = cva([
 	"pointer-events-none absolute inset-y-0 flex items-center",
 	"text-muted-foreground",
 	"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--icon-sm)"
-], { variants: { side: {
-	start: "start-(--density-control-pad-md)",
-	end: "end-(--density-control-pad-md)"
-} } });
-function Input$1({ className, startIcon, endIcon, ...props }) {
+], {
+	variants: {
+		side: {
+			start: "",
+			end: ""
+		},
+		size: {
+			sm: "",
+			md: "",
+			lg: ""
+		}
+	},
+	compoundVariants: [
+		{
+			side: "start",
+			size: "sm",
+			class: "start-(--density-control-pad-sm)"
+		},
+		{
+			side: "start",
+			size: "md",
+			class: "start-(--density-control-pad-md)"
+		},
+		{
+			side: "start",
+			size: "lg",
+			class: "start-(--density-control-pad-lg)"
+		},
+		{
+			side: "end",
+			size: "sm",
+			class: "end-(--density-control-pad-sm)"
+		},
+		{
+			side: "end",
+			size: "md",
+			class: "end-(--density-control-pad-md)"
+		},
+		{
+			side: "end",
+			size: "lg",
+			class: "end-(--density-control-pad-lg)"
+		}
+	],
+	defaultVariants: { size: "md" }
+});
+function Input$1({ className, size = "md", startIcon, endIcon, ...props }) {
 	const input = /* @__PURE__ */ jsx(Input, {
 		...props,
 		"data-slot": "input",
 		className: cn(inputVariants({
+			size,
 			hasStartIcon: startIcon !== void 0,
 			hasEndIcon: endIcon !== void 0
 		}), className)
@@ -77,12 +172,18 @@ function Input$1({ className, startIcon, endIcon, ...props }) {
 			input,
 			startIcon === void 0 ? null : /* @__PURE__ */ jsx("span", {
 				"data-slot": "input-start-icon",
-				className: affixVariants({ side: "start" }),
+				className: affixVariants({
+					side: "start",
+					size
+				}),
 				children: startIcon
 			}),
 			endIcon === void 0 ? null : /* @__PURE__ */ jsx("span", {
 				"data-slot": "input-end-icon",
-				className: affixVariants({ side: "end" }),
+				className: affixVariants({
+					side: "end",
+					size
+				}),
 				children: endIcon
 			})
 		]

package/dist/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":["Input","AriaInput"],"sources":["../../src/input/input.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport { Input as AriaInput, type InputProps as AriaInputProps } from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { fieldSurfaceVariants } from \"../lib/field-surface.js\";\n\n/**\n * Input, ported from the legacy shadcn component onto React Aria's Input.\n *\n * Census: 25 files, 51 uses -- the busiest control in the app after Button.\n * Props are `onChange` 36, `value` 35, `placeholder` 33, `id` 23, `type` 21.\n *\n * EVERY ONE OF THOSE 51 CALL SITES MIGRATES UNCHANGED. React Aria's `Input`\n * takes NATIVE props -- `disabled`, `aria-invalid`, `onChange` with a real\n * event -- not the `isDisabled`/`onChange(value)` shape the rest of React\n * Aria uses. It reads `InputContext` when one is present, so the same\n * component is a bare styled input today and composes inside a `TextField`\n * the moment one is wrapped around it. There is no rename to schedule.\n *\n * That is also why this is not `TextField`. Wrapping 51 call sites in a\n * field they do not have, to get a `onChange(value: string)` they did not\n * ask for, would be the migration doing work on the app's behalf.\n *\n * `border-input` becomes `border-border`: in the legacy theme `--input` is\n * character-for-character `--border` on light (`oklch(0.922 0 0)`), and the\n * dark values differ only in alpha. A fourth token role that turns out to\n * be an existing one, after `popover`, `accent` and the scrim.\n */\nexport const inputVariants = cva(\n  [\n    fieldSurfaceVariants(),\n\n    // Height from the density scale, not the legacy h-9. An input and a\n    // Button sit next to each other constantly and must be the same height;\n    // Button is already on this scale, so 36px would have made every form row\n    // 10px out of alignment at the default density.\n    \"h-(--density-control-h-md) px-(--density-control-pad-md)\",\n\n    // text-base always, not the legacy `text-base md:text-sm`. 16px is the\n    // threshold below which iOS Safari zooms the viewport on focus, and the\n    // legacy dropped to 14px at exactly the widths where that stops being a\n    // phone -- which reads as a deliberate fix but leaves the field a\n    // different size on either side of a breakpoint for no visual reason.\n    \"text-base\",\n\n    // type=\"file\" has one call site, which is not zero. Enough to keep it\n    // from rendering as an unstyled user-agent button.\n    \"file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n    \"file:text-foreground\",\n  ],\n  {\n    variants: {\n      // The affix slots float ABOVE the field rather than sitting beside it\n      // in a flex row, so the only thing that keeps the value from running\n      // underneath a glyph is this padding. It is derived from the same three\n      // tokens that place the glyph -- inline padding, icon box, control gap\n      // -- so `data-density` moves the text and the glyph together. That is\n      // the part a hand-tuned `pl-9` at the call site cannot do, and the\n      // product app has eighteen of those.\n      hasStartIcon: {\n        true: \"ps-[calc(var(--density-control-pad-md)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      hasEndIcon: {\n        true: \"pe-[calc(var(--density-control-pad-md)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n    },\n  },\n);\n\n/**\n * An affix slot.\n *\n * `pointer-events-none` is load-bearing, not cosmetic: the slot is painted on\n * top of the field, so without it the glyph swallows the click that was meant\n * to focus the input. Which also fixes the slot's scope -- these are\n * DECORATIVE marks. An interactive trailing control (a password reveal, a\n * clear button) needs its own pointer events and its own accessible name, and\n * the census found no call site for one, so it is not built here.\n *\n * Logical properties throughout. The product app's eighteen hand-rolled\n * adornments are all `absolute left-*`, with `absolute start-*` at zero\n * occurrences, so every one of them puts the glyph on the wrong side under\n * RTL and lets the text run over it.\n */\nconst affixVariants = cva(\n  [\n    \"pointer-events-none absolute inset-y-0 flex items-center\",\n    \"text-muted-foreground\",\n    // Sized like Button's icon slots, and skipped when the caller sized the\n    // glyph themselves. An svg with neither a width attribute nor a resolved\n    // class renders at 0x0 and every position assertion still passes.\n    \"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n  ],\n  {\n    variants: {\n      side: {\n        start: \"start-(--density-control-pad-md)\",\n        end: \"end-(--density-control-pad-md)\",\n      },\n    },\n  },\n);\n\n/**\n * A single-line text field.\n *\n * @example\n * <Input type=\"email\" placeholder=\"you@example.com\" value={v} onChange={e => set(e.target.value)} />\n * <Input aria-label=\"Search\" startIcon={<SearchIcon aria-hidden />} />\n */\nexport interface InputProps extends Omit<AriaInputProps, \"className\" | \"style\"> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Decorative glyph at the leading edge of the field.\n   *\n   * Mark it `aria-hidden` -- the field's label carries the accessible name,\n   * and a second name source only makes it announce twice. It is sized at\n   * `--icon-sm` unless it carries a `size-*` class of its own, positioned\n   * from `--density-control-pad-md`, and the field's leading padding grows to\n   * match so the value cannot run underneath it.\n   *\n   * The slot is `pointer-events: none`, so a click on the glyph focuses the\n   * field. That makes it decorative by construction: an interactive\n   * adornment -- a password reveal, a clear button -- is NOT this prop.\n   *\n   * Two named slots rather than one `icon` plus a position prop, matching\n   * Button: a search field can legitimately carry a leading glyph AND a\n   * trailing unit, which one slot cannot express.\n   */\n  startIcon?: ReactNode;\n  /** Decorative glyph at the trailing edge. Same rules as {@link InputProps.startIcon}. */\n  endIcon?: ReactNode;\n}\n\nexport function Input({ className, startIcon, endIcon, ...props }: InputProps) {\n  const input = (\n    <AriaInput\n      {...props}\n      data-slot=\"input\"\n      className={cn(\n        inputVariants({\n          hasStartIcon: startIcon !== undefined,\n          hasEndIcon: endIcon !== undefined,\n        }),\n        className,\n      )}\n    />\n  );\n\n  // With neither slot used there is no wrapper AT ALL, so the DOM is\n  // byte-identical to what shipped before this prop existed. That is what\n  // keeps this additive for the 97 call sites that pass no glyph, and\n  // NoIconsLeaveDomUnchanged is the assertion holding it true.\n  if (startIcon === undefined && endIcon === undefined) return input;\n\n  // An overlay, not a flex row. Moving the border onto this wrapper would\n  // take the painted surface off [data-slot=\"input\"] -- the selector the\n  // escape hatch is built on -- and would force the focus ring onto\n  // :focus-within and the invalid border onto :has(), when React Aria\n  // already puts data-focus-visible and data-invalid on the input itself.\n  return (\n    <span data-slot=\"input-wrapper\" className=\"relative block w-full\">\n      {input}\n      {startIcon === undefined ? null : (\n        <span data-slot=\"input-start-icon\" className={affixVariants({ side: \"start\" })}>\n          {startIcon}\n        </span>\n      )}\n      {endIcon === undefined ? null : (\n        <span data-slot=\"input-end-icon\" className={affixVariants({ side: \"end\" })}>\n          {endIcon}\n        </span>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,gBAAgB,IAC3B;CACE,qBAAqB;CAMrB;CAOA;CAIA;CACA;AACF,GACA,EACE,UAAU;CAQR,cAAc,EACZ,MAAM,yFACR;CACA,YAAY,EACV,MAAM,yFACR;AACF,EACF,CACF;;;;;;;;;;;;;;;;AAiBA,MAAM,gBAAgB,IACpB;CACE;CACA;CAIA;AACF,GACA,EACE,UAAU,EACR,MAAM;CACJ,OAAO;CACP,KAAK;AACP,EACF,EACF,CACF;AAkCA,SAAgBA,QAAM,EAAE,WAAW,WAAW,SAAS,GAAG,SAAqB;CAC7E,MAAM,QACJ,oBAACC,OAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GACT,cAAc;GACZ,cAAc,cAAc,KAAA;GAC5B,YAAY,YAAY,KAAA;EAC1B,CAAC,GACD,SACF;CACD,CAAA;CAOH,IAAI,cAAc,KAAA,KAAa,YAAY,KAAA,GAAW,OAAO;CAO7D,OACE,qBAAC,QAAD;EAAM,aAAU;EAAgB,WAAU;EAA1C,UAAA;GACG;GACA,cAAc,KAAA,IAAY,OACzB,oBAAC,QAAD;IAAM,aAAU;IAAmB,WAAW,cAAc,EAAE,MAAM,QAAQ,CAAC;IAC1E,UAAA;GACG,CAAA;GAEP,YAAY,KAAA,IAAY,OACvB,oBAAC,QAAD;IAAM,aAAU;IAAiB,WAAW,cAAc,EAAE,MAAM,MAAM,CAAC;IACtE,UAAA;GACG,CAAA;EAEJ;;AAEV"}
+{"version":3,"file":"input.js","names":["Input","AriaInput"],"sources":["../../src/input/input.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport { Input as AriaInput, type InputProps as AriaInputProps } from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { fieldSurfaceVariants } from \"../lib/field-surface.js\";\n\n/**\n * Input, ported from the legacy shadcn component onto React Aria's Input.\n *\n * Census: 25 files, 51 uses -- the busiest control in the app after Button.\n * Props are `onChange` 36, `value` 35, `placeholder` 33, `id` 23, `type` 21.\n *\n * EVERY ONE OF THOSE 51 CALL SITES MIGRATES UNCHANGED. React Aria's `Input`\n * takes NATIVE props -- `disabled`, `aria-invalid`, `onChange` with a real\n * event -- not the `isDisabled`/`onChange(value)` shape the rest of React\n * Aria uses. It reads `InputContext` when one is present, so the same\n * component is a bare styled input today and composes inside a `TextField`\n * the moment one is wrapped around it. There is no rename to schedule.\n *\n * That is also why this is not `TextField`. Wrapping 51 call sites in a\n * field they do not have, to get a `onChange(value: string)` they did not\n * ask for, would be the migration doing work on the app's behalf.\n *\n * `border-input` becomes `border-border`: in the legacy theme `--input` is\n * character-for-character `--border` on light (`oklch(0.922 0 0)`), and the\n * dark values differ only in alpha. A fourth token role that turns out to\n * be an existing one, after `popover`, `accent` and the scrim.\n */\nexport const inputVariants = cva(\n  [\n    fieldSurfaceVariants(),\n\n    // text-base always, not the legacy `text-base md:text-sm`. 16px is the\n    // threshold below which iOS Safari zooms the viewport on focus, and the\n    // legacy dropped to 14px at exactly the widths where that stops being a\n    // phone -- which reads as a deliberate fix but leaves the field a\n    // different size on either side of a breakpoint for no visual reason.\n    \"text-base\",\n\n    // type=\"file\" has one call site, which is not zero. Enough to keep it\n    // from rendering as an unstyled user-agent button.\n    \"file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n    \"file:text-foreground\",\n  ],\n  {\n    variants: {\n      /**\n       * Height and inline padding from the control scale, so `data-density`\n       * moves a whole form at once. Same three names and the same tokens as\n       * Button, because they sit in the same row: Button's `sm` is the app's\n       * second most common at 167 call sites, and while the field was locked\n       * to `md` the pair was 10px out of alignment with no supported fix.\n       *\n       * Type does NOT scale, which is the one place this axis deliberately\n       * departs from Button's. iOS Safari zooms the viewport when a focused\n       * field's text is under 16px, so `text-base` stays pinned in the base\n       * at every rung -- see the note there. Shrinking the box is a layout\n       * choice; shrinking the type is a bug on a phone.\n       */\n      size: {\n        sm: \"h-(--density-control-h-sm) px-(--density-control-pad-sm)\",\n        md: \"h-(--density-control-h-md) px-(--density-control-pad-md)\",\n        lg: \"h-(--density-control-h-lg) px-(--density-control-pad-lg)\",\n      },\n      // Declared empty and filled by the compound variants below: the affix\n      // inset depends on BOTH whether a slot is used and which rung it is on.\n      hasStartIcon: { true: \"\" },\n      hasEndIcon: { true: \"\" },\n    },\n    compoundVariants: [\n      // The affix slots float ABOVE the field rather than sitting beside it\n      // in a flex row, so the only thing keeping the value from running\n      // underneath a glyph is this padding. It is the same three tokens that\n      // place the glyph -- inline padding, icon box, control gap -- so the\n      // text and the glyph move together across density AND size. A\n      // hand-tuned `pl-9` at the call site can do neither, and the product\n      // app has eighteen of those.\n      {\n        size: \"sm\",\n        hasStartIcon: true,\n        class:\n          \"ps-[calc(var(--density-control-pad-sm)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"md\",\n        hasStartIcon: true,\n        class:\n          \"ps-[calc(var(--density-control-pad-md)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"lg\",\n        hasStartIcon: true,\n        class:\n          \"ps-[calc(var(--density-control-pad-lg)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"sm\",\n        hasEndIcon: true,\n        class:\n          \"pe-[calc(var(--density-control-pad-sm)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"md\",\n        hasEndIcon: true,\n        class:\n          \"pe-[calc(var(--density-control-pad-md)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"lg\",\n        hasEndIcon: true,\n        class:\n          \"pe-[calc(var(--density-control-pad-lg)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n    ],\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n/**\n * An affix slot.\n *\n * `pointer-events-none` is load-bearing, not cosmetic: the slot is painted on\n * top of the field, so without it the glyph swallows the click that was meant\n * to focus the input. Which also fixes the slot's scope -- these are\n * DECORATIVE marks. An interactive trailing control (a password reveal, a\n * clear button) needs its own pointer events and its own accessible name, and\n * the census found no call site for one, so it is not built here.\n *\n * Logical properties throughout. The product app's eighteen hand-rolled\n * adornments are all `absolute left-*`, with `absolute start-*` at zero\n * occurrences, so every one of them puts the glyph on the wrong side under\n * RTL and lets the text run over it.\n */\nconst affixVariants = cva(\n  [\n    \"pointer-events-none absolute inset-y-0 flex items-center\",\n    \"text-muted-foreground\",\n    // Sized like Button's icon slots, and skipped when the caller sized the\n    // glyph themselves. An svg with neither a width attribute nor a resolved\n    // class renders at 0x0 and every position assertion still passes.\n    \"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n  ],\n  {\n    variants: {\n      side: { start: \"\", end: \"\" },\n      size: { sm: \"\", md: \"\", lg: \"\" },\n    },\n    // The glyph's inset is the field's own inline padding, so it lines up with\n    // where the value would have started. That makes it a pair of axes, not\n    // one: a small field at the medium inset puts the glyph under the text.\n    compoundVariants: [\n      { side: \"start\", size: \"sm\", class: \"start-(--density-control-pad-sm)\" },\n      { side: \"start\", size: \"md\", class: \"start-(--density-control-pad-md)\" },\n      { side: \"start\", size: \"lg\", class: \"start-(--density-control-pad-lg)\" },\n      { side: \"end\", size: \"sm\", class: \"end-(--density-control-pad-sm)\" },\n      { side: \"end\", size: \"md\", class: \"end-(--density-control-pad-md)\" },\n      { side: \"end\", size: \"lg\", class: \"end-(--density-control-pad-lg)\" },\n    ],\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n/**\n * A single-line text field.\n *\n * @example\n * <Input type=\"email\" placeholder=\"you@example.com\" value={v} onChange={e => set(e.target.value)} />\n * <Input aria-label=\"Search\" startIcon={<SearchIcon aria-hidden />} />\n */\nexport interface InputProps extends Omit<AriaInputProps, \"className\" | \"style\" | \"size\"> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Control scale. Height and inline padding come from the same\n   * `--density-control-*` tokens as Button, so a field and a button on one\n   * rung are the same height.\n   *\n   * Type does not scale with it: the field stays at 16px everywhere, because\n   * iOS Safari zooms the viewport when a focused input's text is smaller.\n   *\n   * This REPLACES the native `size` attribute, which React Aria inherits from\n   * `InputHTMLAttributes` as a character count. No call site in the census\n   * used it; set a width with `className` instead.\n   *\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Decorative glyph at the leading edge of the field.\n   *\n   * Mark it `aria-hidden` -- the field's label carries the accessible name,\n   * and a second name source only makes it announce twice. It is sized at\n   * `--icon-sm` unless it carries a `size-*` class of its own, positioned\n   * from `--density-control-pad-md`, and the field's leading padding grows to\n   * match so the value cannot run underneath it.\n   *\n   * The slot is `pointer-events: none`, so a click on the glyph focuses the\n   * field. That makes it decorative by construction: an interactive\n   * adornment -- a password reveal, a clear button -- is NOT this prop.\n   *\n   * Two named slots rather than one `icon` plus a position prop, matching\n   * Button: a search field can legitimately carry a leading glyph AND a\n   * trailing unit, which one slot cannot express.\n   */\n  startIcon?: ReactNode;\n  /** Decorative glyph at the trailing edge. Same rules as {@link InputProps.startIcon}. */\n  endIcon?: ReactNode;\n}\n\nexport function Input({ className, size = \"md\", startIcon, endIcon, ...props }: InputProps) {\n  const input = (\n    <AriaInput\n      {...props}\n      data-slot=\"input\"\n      className={cn(\n        inputVariants({\n          size,\n          hasStartIcon: startIcon !== undefined,\n          hasEndIcon: endIcon !== undefined,\n        }),\n        className,\n      )}\n    />\n  );\n\n  // With neither slot used there is no wrapper AT ALL, so the DOM is\n  // byte-identical to what shipped before this prop existed. That is what\n  // keeps this additive for the 97 call sites that pass no glyph, and\n  // NoIconsLeaveDomUnchanged is the assertion holding it true.\n  if (startIcon === undefined && endIcon === undefined) return input;\n\n  // An overlay, not a flex row. Moving the border onto this wrapper would\n  // take the painted surface off [data-slot=\"input\"] -- the selector the\n  // escape hatch is built on -- and would force the focus ring onto\n  // :focus-within and the invalid border onto :has(), when React Aria\n  // already puts data-focus-visible and data-invalid on the input itself.\n  return (\n    <span data-slot=\"input-wrapper\" className=\"relative block w-full\">\n      {input}\n      {startIcon === undefined ? null : (\n        <span data-slot=\"input-start-icon\" className={affixVariants({ side: \"start\", size })}>\n          {startIcon}\n        </span>\n      )}\n      {endIcon === undefined ? null : (\n        <span data-slot=\"input-end-icon\" className={affixVariants({ side: \"end\", size })}>\n          {endIcon}\n        </span>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,gBAAgB,IAC3B;CACE,qBAAqB;CAOrB;CAIA;CACA;AACF,GACA;CACE,UAAU;;;;;;;;;;;;;;EAcR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EAGA,cAAc,EAAE,MAAM,GAAG;EACzB,YAAY,EAAE,MAAM,GAAG;CACzB;CACA,kBAAkB;EAQhB;GACE,MAAM;GACN,cAAc;GACd,OACE;EACJ;EACA;GACE,MAAM;GACN,cAAc;GACd,OACE;EACJ;EACA;GACE,MAAM;GACN,cAAc;GACd,OACE;EACJ;EACA;GACE,MAAM;GACN,YAAY;GACZ,OACE;EACJ;EACA;GACE,MAAM;GACN,YAAY;GACZ,OACE;EACJ;EACA;GACE,MAAM;GACN,YAAY;GACZ,OACE;EACJ;CACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;;;;;;;;;;;;;;;;AAiBA,MAAM,gBAAgB,IACpB;CACE;CACA;CAIA;AACF,GACA;CACE,UAAU;EACR,MAAM;GAAE,OAAO;GAAI,KAAK;EAAG;EAC3B,MAAM;GAAE,IAAI;GAAI,IAAI;GAAI,IAAI;EAAG;CACjC;CAIA,kBAAkB;EAChB;GAAE,MAAM;GAAS,MAAM;GAAM,OAAO;EAAmC;EACvE;GAAE,MAAM;GAAS,MAAM;GAAM,OAAO;EAAmC;EACvE;GAAE,MAAM;GAAS,MAAM;GAAM,OAAO;EAAmC;EACvE;GAAE,MAAM;GAAO,MAAM;GAAM,OAAO;EAAiC;EACnE;GAAE,MAAM;GAAO,MAAM;GAAM,OAAO;EAAiC;EACnE;GAAE,MAAM;GAAO,MAAM;GAAM,OAAO;EAAiC;CACrE;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;AAiDA,SAAgBA,QAAM,EAAE,WAAW,OAAO,MAAM,WAAW,SAAS,GAAG,SAAqB;CAC1F,MAAM,QACJ,oBAACC,OAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GACT,cAAc;GACZ;GACA,cAAc,cAAc,KAAA;GAC5B,YAAY,YAAY,KAAA;EAC1B,CAAC,GACD,SACF;CACD,CAAA;CAOH,IAAI,cAAc,KAAA,KAAa,YAAY,KAAA,GAAW,OAAO;CAO7D,OACE,qBAAC,QAAD;EAAM,aAAU;EAAgB,WAAU;EAA1C,UAAA;GACG;GACA,cAAc,KAAA,IAAY,OACzB,oBAAC,QAAD;IAAM,aAAU;IAAmB,WAAW,cAAc;KAAE,MAAM;KAAS;IAAK,CAAC;IAChF,UAAA;GACG,CAAA;GAEP,YAAY,KAAA,IAAY,OACvB,oBAAC,QAAD;IAAM,aAAU;IAAiB,WAAW,cAAc;KAAE,MAAM;KAAO;IAAK,CAAC;IAC5E,UAAA;GACG,CAAA;EAEJ;;AAEV"}

package/dist/select/select.d.ts

@@ -26,7 +26,9 @@ import { ReactNode } from "react";
  * not `accent`, for the same reason.
  */
 export declare const selectVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const selectTriggerVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const selectTriggerVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const selectPopoverVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const selectItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 /**
@@ -65,10 +67,20 @@ interface SelectProps$1 extends Omit<SelectProps<object>, "className" | "style"
    * on its own. React Aria wires this into `aria-describedby` for us.
    */
   errorMessage?: ReactNode;
+  /**
+   * Control scale of the trigger. Height and inline padding come from the
+   * same `--density-control-*` tokens as Input and Button, so a Select, a
+   * field and a button on one rung are the same height.
+   *
+   * Type does not scale with it, matching Input.
+   *
+   * @default "md"
+   */
+  size?: "sm" | "md" | "lg";
   /** Extra classes for the wrapper. Merged last. */
   className?: string;
 }
-declare function Select$1({ children, label, labelHidden, placeholder, errorMessage, className, ...props }: SelectProps$1): import("react").JSX.Element;
+declare function Select$1({ children, label, labelHidden, placeholder, errorMessage, size, className, ...props }: SelectProps$1): import("react").JSX.Element;
 /**
  * One option. Its `id` is the value.
  *

package/dist/select/select.js

@@ -34,11 +34,28 @@ const selectTriggerVariants = cva([
 	"group-data-[invalid]:border-destructive-strong",
 	fieldSurfaceVariants(),
 	"flex items-center justify-between gap-2 text-start",
-	"h-(--density-control-h-md) px-(--density-control-pad-md)",
 	"text-base leading-(--leading-normal) cursor-pointer",
 	"[&_svg]:pointer-events-none [&_svg]:shrink-0",
 	"[&_svg:not([class*='size-'])]:size-(--icon-sm)"
-]);
+], {
+	variants: { 
+	/**
+	* The same rungs and the same tokens as Input and Button. 14 of the
+	* product's 32 `SelectTrigger` call sites override the height by hand,
+	* and a Select sits in the same form row as a field -- giving Input the
+	* axis without giving it here would be exactly the drift
+	* `fieldSurfaceVariants` exists to prevent.
+	*
+	* Type stays `text-base` at every rung, matching Input. A row whose two
+	* controls disagree about type size reads as a mistake.
+	*/
+size: {
+		sm: "h-(--density-control-h-sm) px-(--density-control-pad-sm)",
+		md: "h-(--density-control-h-md) px-(--density-control-pad-md)",
+		lg: "h-(--density-control-h-lg) px-(--density-control-pad-lg)"
+	} },
+	defaultVariants: { size: "md" }
+});
 const selectPopoverVariants = cva([
 	"w-(--trigger-width) min-w-32 overflow-y-auto",
 	"rounded-md border-(length:--border-width) border-border p-1",
@@ -56,7 +73,7 @@ const selectItemVariants = cva([
 	"data-[focus-visible]:outline-(--color-ring)",
 	"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)"
 ]);
-function Select$1({ children, label, labelHidden, placeholder, errorMessage, className, ...props }) {
+function Select$1({ children, label, labelHidden, placeholder, errorMessage, size = "md", className, ...props }) {
 	return /* @__PURE__ */ jsxs(Select, {
 		...props,
 		"data-slot": "select",
@@ -69,7 +86,7 @@ function Select$1({ children, label, labelHidden, placeholder, errorMessage, cla
 			}),
 			/* @__PURE__ */ jsxs(Button, {
 				"data-slot": "select-trigger",
-				className: selectTriggerVariants(),
+				className: selectTriggerVariants({ size }),
 				children: [/* @__PURE__ */ jsx(SelectValue, {
 					"data-slot": "select-value",
 					children: ({ isPlaceholder, selectedText }) => isPlaceholder ? /* @__PURE__ */ jsx("span", {

package/dist/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":["Select","AriaSelect","AriaLabel","AriaButton","AriaSelectValue","AriaFieldError","AriaPopover","AriaListBox","AriaListBoxItem"],"sources":["../../src/select/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport {\n  Button as AriaButton,\n  FieldError as AriaFieldError,\n  Label as AriaLabel,\n  ListBox as AriaListBox,\n  ListBoxItem as AriaListBoxItem,\n  Popover as AriaPopover,\n  Select as AriaSelect,\n  SelectValue as AriaSelectValue,\n  type ListBoxItemProps as AriaListBoxItemProps,\n  type SelectProps as AriaSelectProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { fieldSurfaceVariants } from \"../lib/field-surface.js\";\n\n/**\n * Select, ported from the legacy shadcn/Radix component.\n *\n * FOUR PARTS COLLAPSE INTO ONE. The census reads `SelectItem` 35 and\n * `Select`, `SelectTrigger`, `SelectValue`, `SelectContent` 15 each --\n * those four always appear together in the same shape, exactly like\n * Dialog's header trio, so they are one component and a prop.\n * `SelectGroup`, `SelectLabel`, `SelectSeparator`, `SelectScrollUpButton`\n * and `SelectScrollDownButton` have ZERO call sites and are not ported.\n *\n * `label` IS REQUIRED. The legacy exports a `SelectLabel` that nobody\n * renders and passes no `aria-label` anywhere, so all 15 selects are\n * unnamed comboboxes -- the same finding as Progress, Slider and\n * ScrollArea. Pass `labelHidden` when the surrounding UI already says it.\n *\n * The trigger reuses `fieldSurfaceVariants`, shared with Input and\n * Textarea. A select and a text field sit in the same form row and must\n * be the same box; the legacy styled them separately and drifted --\n * `h-10` here against Input's `h-9`, for no stated reason.\n *\n * The popover is `card`, not a `popover` role: `--popover` is\n * byte-identical to `--card` in the legacy theme. Item hover is `muted`,\n * not `accent`, for the same reason.\n */\n/*\n * `group` is load-bearing, not decoration. React Aria puts `data-invalid` on\n * THIS element, never on the trigger -- so the trigger's own\n * `data-[invalid]:` rule, inherited from the shared field surface, can never\n * match and `isInvalid` painted nothing at all. The trigger reads the state\n * from here instead.\n */\nexport const selectVariants = cva([\"group flex w-full flex-col gap-1.5 box-border font-sans\"]);\n\nexport const selectTriggerVariants = cva([\n  // See selectVariants: the invalid state lives on the ROOT, so this reads it\n  // from the group rather than from itself.\n  \"group-data-[invalid]:border-destructive-strong\",\n  fieldSurfaceVariants(),\n  \"flex items-center justify-between gap-2 text-start\",\n  \"h-(--density-control-h-md) px-(--density-control-pad-md)\",\n  \"text-base leading-(--leading-normal) cursor-pointer\",\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n]);\n\nexport const selectPopoverVariants = cva([\n  // --trigger-width is set inline by React Aria, so the list matches the\n  // control it came from rather than guessing a width.\n  \"w-(--trigger-width) min-w-32 overflow-y-auto\",\n  \"rounded-md border-(length:--border-width) border-border p-1\",\n  \"bg-card text-card-foreground shadow-floating\",\n  \"box-border font-sans text-sm leading-(--leading-normal)\",\n]);\n\nexport const selectItemVariants = cva([\n  \"relative flex cursor-pointer select-none items-center gap-2\",\n  \"rounded-2xs py-1.5 pe-2 ps-8\",\n  \"box-border text-sm leading-(--leading-normal) text-card-foreground\",\n  // data-focused, not :hover. React Aria drives one highlight from both\n  // pointer and keyboard, so the row under the mouse and the row the\n  // arrows reached are the same row.\n  \"outline-none data-[focused]:bg-muted\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n]);\n\n/**\n * A single-choice picker.\n *\n * @example\n * <Select label=\"Country\" placeholder=\"Pick one\"\n *         selectedKey={code} onSelectionChange={setCode}>\n *   <SelectItem id=\"gb\">United Kingdom</SelectItem>\n *   <SelectItem id=\"us\">United States</SelectItem>\n * </Select>\n */\nexport interface SelectProps\n  extends Omit<AriaSelectProps<object>, \"className\" | \"style\" | \"children\" | \"items\"> {\n  /** `SelectItem` children. */\n  children?: ReactNode;\n  /**\n   * What is being chosen, and the control's accessible name.\n   *\n   * **Required.** All 15 legacy selects are unnamed: the legacy exports a\n   * `SelectLabel` that nobody renders and passes no `aria-label`.\n   */\n  label: ReactNode;\n  /** Render the label for screen readers only. */\n  labelHidden?: boolean;\n  /** Shown while nothing is selected. */\n  placeholder?: string;\n  /**\n   * Why the selection is wrong. Rendered under the control, and it is what\n   * makes `isInvalid` reach a screen reader.\n   *\n   * React Aria marks the ROOT `data-invalid` and leaves the button untouched,\n   * and an `aria-invalid` handed to that button is dropped by\n   * `filterDOMProps`, whose allowlist stops at the labelling attributes -- the\n   * same silent loss as `aria-current` on a pagination button. So without a\n   * message, an invalid select is invalid only in colour, which is WCAG 1.4.1\n   * on its own. React Aria wires this into `aria-describedby` for us.\n   */\n  errorMessage?: ReactNode;\n  /** Extra classes for the wrapper. Merged last. */\n  className?: string;\n}\n\nexport function Select({\n  children,\n  label,\n  labelHidden,\n  placeholder,\n  errorMessage,\n  className,\n  ...props\n}: SelectProps) {\n  return (\n    <AriaSelect {...props} data-slot=\"select\" className={cn(selectVariants(), className)}>\n      <AriaLabel\n        data-slot=\"select-label\"\n        className={cn(\n          \"text-sm leading-(--leading-normal) text-foreground\",\n          labelHidden && \"sr-only\",\n        )}\n      >\n        {label}\n      </AriaLabel>\n\n      <AriaButton data-slot=\"select-trigger\" className={selectTriggerVariants()}>\n        <AriaSelectValue data-slot=\"select-value\">\n          {({ isPlaceholder, selectedText }) =>\n            isPlaceholder ? (\n              <span data-slot=\"select-placeholder\" className=\"text-muted-foreground\">\n                {placeholder}\n              </span>\n            ) : (\n              selectedText\n            )\n          }\n        </AriaSelectValue>\n        {/*\n          aria-hidden: the chevron is decoration. The button already\n          announces itself as a combobox, and a second name source only\n          makes it announce twice.\n        */}\n        <svg\n          aria-hidden=\"true\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.75\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className=\"text-muted-foreground\"\n        >\n          <path d=\"m4 6 4 4 4-4\" />\n        </svg>\n      </AriaButton>\n\n      {errorMessage == null ? null : (\n        // Not conditional on isInvalid: React Aria renders FieldError only\n        // while the field IS invalid, so gating it here as well would just be\n        // two sources of truth for one state.\n        <AriaFieldError\n          data-slot=\"select-error\"\n          className=\"text-sm leading-(--leading-normal) text-destructive-strong\"\n        >\n          {errorMessage}\n        </AriaFieldError>\n      )}\n\n      <AriaPopover data-slot=\"select-popover\" className={selectPopoverVariants()}>\n        <AriaListBox data-slot=\"select-list\" className=\"outline-none\">\n          {children}\n        </AriaListBox>\n      </AriaPopover>\n    </AriaSelect>\n  );\n}\n\n/**\n * One option. Its `id` is the value.\n *\n * @example\n * <SelectItem id=\"gb\">United Kingdom</SelectItem>\n */\nexport interface SelectItemProps\n  extends Omit<AriaListBoxItemProps, \"className\" | \"style\" | \"children\"> {\n  children?: ReactNode;\n  /**\n   * The option's text, for the trigger and for typeahead.\n   *\n   * Derived from `children` when they are a string. Pass it explicitly\n   * when the option renders anything richer than text.\n   */\n  textValue?: string;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport function SelectItem({ className, children, textValue, ...props }: SelectItemProps) {\n  return (\n    <AriaListBoxItem\n      {...props}\n      /*\n        textValue, derived from string children.\n        React Aria infers an item's text from its children -- but ONLY\n        when they are a string. This item uses FUNCTION children so the\n        tick can be rendered in JS, which defeats that inference: the\n        trigger showed an empty value after selecting, and typeahead had\n        nothing to match on. Neither is visible in the type system.\n      */\n      textValue={textValue ?? (typeof children === \"string\" ? children : undefined)}\n      data-slot=\"select-item\"\n      className={cn(selectItemVariants(), className)}\n    >\n      {({ isSelected }) => (\n        <>\n          {/*\n            The tick is rendered in JS rather than toggled with CSS, so\n            the precedence is explicit and a test can read it from the\n            DOM. ps-8 above reserves the gutter, so selecting an option\n            does not shift its label.\n          */}\n          {isSelected ? (\n            <svg\n              data-slot=\"select-item-check\"\n              aria-hidden=\"true\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              className=\"absolute start-2 size-3.5\"\n            >\n              <path d=\"m3.5 8.5 3 3 6-6\" />\n            </svg>\n          ) : null}\n          {children}\n        </>\n      )}\n    </AriaListBoxItem>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,MAAa,iBAAiB,IAAI,CAAC,yDAAyD,CAAC;AAE7F,MAAa,wBAAwB,IAAI;CAGvC;CACA,qBAAqB;CACrB;CACA;CACA;CACA;CACA;AACF,CAAC;AAED,MAAa,wBAAwB,IAAI;CAGvC;CACA;CACA;CACA;AACF,CAAC;AAED,MAAa,qBAAqB,IAAI;CACpC;CACA;CACA;CAIA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;AA2CD,SAAgBA,SAAO,EACrB,UACA,OACA,aACA,aACA,cACA,WACA,GAAG,SACW;CACd,OACE,qBAACC,QAAD;EAAY,GAAI;EAAO,aAAU;EAAS,WAAW,GAAG,eAAe,GAAG,SAAS;EAAnF,UAAA;GACE,oBAACC,OAAD;IACE,aAAU;IACV,WAAW,GACT,sDACA,eAAe,SACjB;IAEC,UAAA;GACQ,CAAA;GAEX,qBAACC,QAAD;IAAY,aAAU;IAAiB,WAAW,sBAAsB;IAAxE,UAAA,CACE,oBAACC,aAAD;KAAiB,aAAU;KACvB,WAAA,EAAE,eAAe,mBACjB,gBACE,oBAAC,QAAD;MAAM,aAAU;MAAqB,WAAU;MAC5C,UAAA;KACG,CAAA,IAEN;IAGW,CAAA,GAMjB,oBAAC,OAAD;KACE,eAAY;KACZ,SAAQ;KACR,MAAK;KACL,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;KACf,WAAU;KAEV,UAAA,oBAAC,QAAD,EAAM,GAAE,eAAgB,CAAA;IACrB,CAAA,CACK;;GAEX,gBAAgB,OAAO,OAItB,oBAACC,YAAD;IACE,aAAU;IACV,WAAU;IAET,UAAA;GACa,CAAA;GAGlB,oBAACC,SAAD;IAAa,aAAU;IAAiB,WAAW,sBAAsB;IACvE,UAAA,oBAACC,SAAD;KAAa,aAAU;KAAc,WAAU;KAC5C;IACU,CAAA;GACF,CAAA;EACH;;AAEhB;AAsBA,SAAgB,WAAW,EAAE,WAAW,UAAU,WAAW,GAAG,SAA0B;CACxF,OACE,oBAACC,aAAD;EACE,GAAI;EASJ,WAAW,cAAc,OAAO,aAAa,WAAW,WAAW,KAAA;EACnE,aAAU;EACV,WAAW,GAAG,mBAAmB,GAAG,SAAS;EAE3C,WAAA,EAAE,iBACF,qBAAA,UAAA,EAAA,UAAA,CAOG,aACC,oBAAC,OAAD;GACE,aAAU;GACV,eAAY;GACZ,SAAQ;GACR,MAAK;GACL,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;GACf,WAAU;GAEV,UAAA,oBAAC,QAAD,EAAM,GAAE,mBAAoB,CAAA;EACzB,CAAA,IACH,MACH,QACD,EAAA,CAAA;CAEW,CAAA;AAErB"}
+{"version":3,"file":"select.js","names":["Select","AriaSelect","AriaLabel","AriaButton","AriaSelectValue","AriaFieldError","AriaPopover","AriaListBox","AriaListBoxItem"],"sources":["../../src/select/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport {\n  Button as AriaButton,\n  FieldError as AriaFieldError,\n  Label as AriaLabel,\n  ListBox as AriaListBox,\n  ListBoxItem as AriaListBoxItem,\n  Popover as AriaPopover,\n  Select as AriaSelect,\n  SelectValue as AriaSelectValue,\n  type ListBoxItemProps as AriaListBoxItemProps,\n  type SelectProps as AriaSelectProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { fieldSurfaceVariants } from \"../lib/field-surface.js\";\n\n/**\n * Select, ported from the legacy shadcn/Radix component.\n *\n * FOUR PARTS COLLAPSE INTO ONE. The census reads `SelectItem` 35 and\n * `Select`, `SelectTrigger`, `SelectValue`, `SelectContent` 15 each --\n * those four always appear together in the same shape, exactly like\n * Dialog's header trio, so they are one component and a prop.\n * `SelectGroup`, `SelectLabel`, `SelectSeparator`, `SelectScrollUpButton`\n * and `SelectScrollDownButton` have ZERO call sites and are not ported.\n *\n * `label` IS REQUIRED. The legacy exports a `SelectLabel` that nobody\n * renders and passes no `aria-label` anywhere, so all 15 selects are\n * unnamed comboboxes -- the same finding as Progress, Slider and\n * ScrollArea. Pass `labelHidden` when the surrounding UI already says it.\n *\n * The trigger reuses `fieldSurfaceVariants`, shared with Input and\n * Textarea. A select and a text field sit in the same form row and must\n * be the same box; the legacy styled them separately and drifted --\n * `h-10` here against Input's `h-9`, for no stated reason.\n *\n * The popover is `card`, not a `popover` role: `--popover` is\n * byte-identical to `--card` in the legacy theme. Item hover is `muted`,\n * not `accent`, for the same reason.\n */\n/*\n * `group` is load-bearing, not decoration. React Aria puts `data-invalid` on\n * THIS element, never on the trigger -- so the trigger's own\n * `data-[invalid]:` rule, inherited from the shared field surface, can never\n * match and `isInvalid` painted nothing at all. The trigger reads the state\n * from here instead.\n */\nexport const selectVariants = cva([\"group flex w-full flex-col gap-1.5 box-border font-sans\"]);\n\nexport const selectTriggerVariants = cva(\n  [\n    // See selectVariants: the invalid state lives on the ROOT, so this reads it\n    // from the group rather than from itself.\n    \"group-data-[invalid]:border-destructive-strong\",\n    fieldSurfaceVariants(),\n    \"flex items-center justify-between gap-2 text-start\",\n    \"text-base leading-(--leading-normal) cursor-pointer\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n  ],\n  {\n    variants: {\n      /**\n       * The same rungs and the same tokens as Input and Button. 14 of the\n       * product's 32 `SelectTrigger` call sites override the height by hand,\n       * and a Select sits in the same form row as a field -- giving Input the\n       * axis without giving it here would be exactly the drift\n       * `fieldSurfaceVariants` exists to prevent.\n       *\n       * Type stays `text-base` at every rung, matching Input. A row whose two\n       * controls disagree about type size reads as a mistake.\n       */\n      size: {\n        sm: \"h-(--density-control-h-sm) px-(--density-control-pad-sm)\",\n        md: \"h-(--density-control-h-md) px-(--density-control-pad-md)\",\n        lg: \"h-(--density-control-h-lg) px-(--density-control-pad-lg)\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\nexport const selectPopoverVariants = cva([\n  // --trigger-width is set inline by React Aria, so the list matches the\n  // control it came from rather than guessing a width.\n  \"w-(--trigger-width) min-w-32 overflow-y-auto\",\n  \"rounded-md border-(length:--border-width) border-border p-1\",\n  \"bg-card text-card-foreground shadow-floating\",\n  \"box-border font-sans text-sm leading-(--leading-normal)\",\n]);\n\nexport const selectItemVariants = cva([\n  \"relative flex cursor-pointer select-none items-center gap-2\",\n  \"rounded-2xs py-1.5 pe-2 ps-8\",\n  \"box-border text-sm leading-(--leading-normal) text-card-foreground\",\n  // data-focused, not :hover. React Aria drives one highlight from both\n  // pointer and keyboard, so the row under the mouse and the row the\n  // arrows reached are the same row.\n  \"outline-none data-[focused]:bg-muted\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n]);\n\n/**\n * A single-choice picker.\n *\n * @example\n * <Select label=\"Country\" placeholder=\"Pick one\"\n *         selectedKey={code} onSelectionChange={setCode}>\n *   <SelectItem id=\"gb\">United Kingdom</SelectItem>\n *   <SelectItem id=\"us\">United States</SelectItem>\n * </Select>\n */\nexport interface SelectProps\n  extends Omit<AriaSelectProps<object>, \"className\" | \"style\" | \"children\" | \"items\"> {\n  /** `SelectItem` children. */\n  children?: ReactNode;\n  /**\n   * What is being chosen, and the control's accessible name.\n   *\n   * **Required.** All 15 legacy selects are unnamed: the legacy exports a\n   * `SelectLabel` that nobody renders and passes no `aria-label`.\n   */\n  label: ReactNode;\n  /** Render the label for screen readers only. */\n  labelHidden?: boolean;\n  /** Shown while nothing is selected. */\n  placeholder?: string;\n  /**\n   * Why the selection is wrong. Rendered under the control, and it is what\n   * makes `isInvalid` reach a screen reader.\n   *\n   * React Aria marks the ROOT `data-invalid` and leaves the button untouched,\n   * and an `aria-invalid` handed to that button is dropped by\n   * `filterDOMProps`, whose allowlist stops at the labelling attributes -- the\n   * same silent loss as `aria-current` on a pagination button. So without a\n   * message, an invalid select is invalid only in colour, which is WCAG 1.4.1\n   * on its own. React Aria wires this into `aria-describedby` for us.\n   */\n  errorMessage?: ReactNode;\n  /**\n   * Control scale of the trigger. Height and inline padding come from the\n   * same `--density-control-*` tokens as Input and Button, so a Select, a\n   * field and a button on one rung are the same height.\n   *\n   * Type does not scale with it, matching Input.\n   *\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Extra classes for the wrapper. Merged last. */\n  className?: string;\n}\n\nexport function Select({\n  children,\n  label,\n  labelHidden,\n  placeholder,\n  errorMessage,\n  size = \"md\",\n  className,\n  ...props\n}: SelectProps) {\n  return (\n    <AriaSelect {...props} data-slot=\"select\" className={cn(selectVariants(), className)}>\n      <AriaLabel\n        data-slot=\"select-label\"\n        className={cn(\n          \"text-sm leading-(--leading-normal) text-foreground\",\n          labelHidden && \"sr-only\",\n        )}\n      >\n        {label}\n      </AriaLabel>\n\n      <AriaButton data-slot=\"select-trigger\" className={selectTriggerVariants({ size })}>\n        <AriaSelectValue data-slot=\"select-value\">\n          {({ isPlaceholder, selectedText }) =>\n            isPlaceholder ? (\n              <span data-slot=\"select-placeholder\" className=\"text-muted-foreground\">\n                {placeholder}\n              </span>\n            ) : (\n              selectedText\n            )\n          }\n        </AriaSelectValue>\n        {/*\n          aria-hidden: the chevron is decoration. The button already\n          announces itself as a combobox, and a second name source only\n          makes it announce twice.\n        */}\n        <svg\n          aria-hidden=\"true\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.75\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className=\"text-muted-foreground\"\n        >\n          <path d=\"m4 6 4 4 4-4\" />\n        </svg>\n      </AriaButton>\n\n      {errorMessage == null ? null : (\n        // Not conditional on isInvalid: React Aria renders FieldError only\n        // while the field IS invalid, so gating it here as well would just be\n        // two sources of truth for one state.\n        <AriaFieldError\n          data-slot=\"select-error\"\n          className=\"text-sm leading-(--leading-normal) text-destructive-strong\"\n        >\n          {errorMessage}\n        </AriaFieldError>\n      )}\n\n      <AriaPopover data-slot=\"select-popover\" className={selectPopoverVariants()}>\n        <AriaListBox data-slot=\"select-list\" className=\"outline-none\">\n          {children}\n        </AriaListBox>\n      </AriaPopover>\n    </AriaSelect>\n  );\n}\n\n/**\n * One option. Its `id` is the value.\n *\n * @example\n * <SelectItem id=\"gb\">United Kingdom</SelectItem>\n */\nexport interface SelectItemProps\n  extends Omit<AriaListBoxItemProps, \"className\" | \"style\" | \"children\"> {\n  children?: ReactNode;\n  /**\n   * The option's text, for the trigger and for typeahead.\n   *\n   * Derived from `children` when they are a string. Pass it explicitly\n   * when the option renders anything richer than text.\n   */\n  textValue?: string;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport function SelectItem({ className, children, textValue, ...props }: SelectItemProps) {\n  return (\n    <AriaListBoxItem\n      {...props}\n      /*\n        textValue, derived from string children.\n        React Aria infers an item's text from its children -- but ONLY\n        when they are a string. This item uses FUNCTION children so the\n        tick can be rendered in JS, which defeats that inference: the\n        trigger showed an empty value after selecting, and typeahead had\n        nothing to match on. Neither is visible in the type system.\n      */\n      textValue={textValue ?? (typeof children === \"string\" ? children : undefined)}\n      data-slot=\"select-item\"\n      className={cn(selectItemVariants(), className)}\n    >\n      {({ isSelected }) => (\n        <>\n          {/*\n            The tick is rendered in JS rather than toggled with CSS, so\n            the precedence is explicit and a test can read it from the\n            DOM. ps-8 above reserves the gutter, so selecting an option\n            does not shift its label.\n          */}\n          {isSelected ? (\n            <svg\n              data-slot=\"select-item-check\"\n              aria-hidden=\"true\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              className=\"absolute start-2 size-3.5\"\n            >\n              <path d=\"m3.5 8.5 3 3 6-6\" />\n            </svg>\n          ) : null}\n          {children}\n        </>\n      )}\n    </AriaListBoxItem>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,MAAa,iBAAiB,IAAI,CAAC,yDAAyD,CAAC;AAE7F,MAAa,wBAAwB,IACnC;CAGE;CACA,qBAAqB;CACrB;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;;;;;;;;;;;AAWR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;AAEA,MAAa,wBAAwB,IAAI;CAGvC;CACA;CACA;CACA;AACF,CAAC;AAED,MAAa,qBAAqB,IAAI;CACpC;CACA;CACA;CAIA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;AAqDD,SAAgBA,SAAO,EACrB,UACA,OACA,aACA,aACA,cACA,OAAO,MACP,WACA,GAAG,SACW;CACd,OACE,qBAACC,QAAD;EAAY,GAAI;EAAO,aAAU;EAAS,WAAW,GAAG,eAAe,GAAG,SAAS;EAAnF,UAAA;GACE,oBAACC,OAAD;IACE,aAAU;IACV,WAAW,GACT,sDACA,eAAe,SACjB;IAEC,UAAA;GACQ,CAAA;GAEX,qBAACC,QAAD;IAAY,aAAU;IAAiB,WAAW,sBAAsB,EAAE,KAAK,CAAC;IAAhF,UAAA,CACE,oBAACC,aAAD;KAAiB,aAAU;KACvB,WAAA,EAAE,eAAe,mBACjB,gBACE,oBAAC,QAAD;MAAM,aAAU;MAAqB,WAAU;MAC5C,UAAA;KACG,CAAA,IAEN;IAGW,CAAA,GAMjB,oBAAC,OAAD;KACE,eAAY;KACZ,SAAQ;KACR,MAAK;KACL,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;KACf,WAAU;KAEV,UAAA,oBAAC,QAAD,EAAM,GAAE,eAAgB,CAAA;IACrB,CAAA,CACK;;GAEX,gBAAgB,OAAO,OAItB,oBAACC,YAAD;IACE,aAAU;IACV,WAAU;IAET,UAAA;GACa,CAAA;GAGlB,oBAACC,SAAD;IAAa,aAAU;IAAiB,WAAW,sBAAsB;IACvE,UAAA,oBAACC,SAAD;KAAa,aAAU;KAAc,WAAU;KAC5C;IACU,CAAA;GACF,CAAA;EACH;;AAEhB;AAsBA,SAAgB,WAAW,EAAE,WAAW,UAAU,WAAW,GAAG,SAA0B;CACxF,OACE,oBAACC,aAAD;EACE,GAAI;EASJ,WAAW,cAAc,OAAO,aAAa,WAAW,WAAW,KAAA;EACnE,aAAU;EACV,WAAW,GAAG,mBAAmB,GAAG,SAAS;EAE3C,WAAA,EAAE,iBACF,qBAAA,UAAA,EAAA,UAAA,CAOG,aACC,oBAAC,OAAD;GACE,aAAU;GACV,eAAY;GACZ,SAAQ;GACR,MAAK;GACL,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;GACf,WAAU;GAEV,UAAA,oBAAC,QAAD,EAAM,GAAE,mBAAoB,CAAA;EACzB,CAAA,IACH,MACH,QACD,EAAA,CAAA;CAEW,CAAA;AAErB"}

package/dist/styles.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-scrollbar-thumb:#0000;--tw-scrollbar-track:#0000;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer alfred.reset,alfred.tokens,alfred.components.primitives,alfred.components.patterns,alfred.components.charts,alfred.components.ai;@layer alfred.utilities.primitives{.\@container\/card-header{container:card-header/inline-size}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:0}.inset-y-0{inset-block:0}.start-\(--density-control-pad-md\){inset-inline-start:var(--density-control-pad-md)}.start-2{inset-inline-start:calc(var(--spacing,.25rem) * 2)}.end-\(--density-bar-pad-x\){inset-inline-end:var(--density-bar-pad-x)}.end-\(--density-control-pad-md\){inset-inline-end:var(--density-control-pad-md)}.end-4{inset-inline-end:calc(var(--spacing,.25rem) * 4)}.top-1\/2{top:50%}.top-4{top:calc(var(--spacing,.25rem) * 4)}.bottom-\(--density-bar-pad-y\){bottom:var(--density-bar-pad-y)}.left-1\/2{left:50%}.z-50{z-index:50}.container{width:100%}@media (min-width:30rem){.container{max-width:30rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}.m-0{margin:0}.-mx-1{margin-inline:calc(var(--spacing,.25rem) * -1)}.my-1{margin-block:var(--spacing,.25rem)}.-ms-2{margin-inline-start:calc(var(--spacing,.25rem) * -2)}.ms-1{margin-inline-start:var(--spacing,.25rem)}.ms-auto{margin-inline-start:auto}.mb-1{margin-bottom:var(--spacing,.25rem)}.ml-2{margin-left:calc(var(--spacing,.25rem) * 2)}.box-border{box-sizing:border-box}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.table-cell{display:table-cell}.table-column{display:table-column}.table-row{display:table-row}.size-\(--density-control-h-md\){width:var(--density-control-h-md);height:var(--density-control-h-md)}.size-\(--density-control-h-sm\){width:var(--density-control-h-sm);height:var(--density-control-h-sm)}.size-\(--icon-lg\){width:var(--icon-lg);height:var(--icon-lg)}.size-\(--icon-md\){width:var(--icon-md);height:var(--icon-md)}.size-\(--icon-sm\){width:var(--icon-sm);height:var(--icon-sm)}.size-1\.5{width:calc(var(--spacing,.25rem) * 1.5);height:calc(var(--spacing,.25rem) * 1.5)}.size-3{width:calc(var(--spacing,.25rem) * 3);height:calc(var(--spacing,.25rem) * 3)}.size-3\.5{width:calc(var(--spacing,.25rem) * 3.5);height:calc(var(--spacing,.25rem) * 3.5)}.size-4{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.size-5{width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5)}.size-6{width:calc(var(--spacing,.25rem) * 6);height:calc(var(--spacing,.25rem) * 6)}.size-7{width:calc(var(--spacing,.25rem) * 7);height:calc(var(--spacing,.25rem) * 7)}.size-8{width:calc(var(--spacing,.25rem) * 8);height:calc(var(--spacing,.25rem) * 8)}.size-10{width:calc(var(--spacing,.25rem) * 10);height:calc(var(--spacing,.25rem) * 10)}.size-16{width:calc(var(--spacing,.25rem) * 16);height:calc(var(--spacing,.25rem) * 16)}.size-full{width:100%;height:100%}.h-\(--density-control-h-lg\){height:var(--density-control-h-lg)}.h-\(--density-control-h-md\){height:var(--density-control-h-md)}.h-\(--density-control-h-sm\){height:var(--density-control-h-sm)}.h-2{height:calc(var(--spacing,.25rem) * 2)}.h-4{height:calc(var(--spacing,.25rem) * 4)}.h-5{height:calc(var(--spacing,.25rem) * 5)}.h-6{height:calc(var(--spacing,.25rem) * 6)}.h-8{height:calc(var(--spacing,.25rem) * 8)}.h-9{height:calc(var(--spacing,.25rem) * 9)}.h-10{height:calc(var(--spacing,.25rem) * 10)}.h-12{height:calc(var(--spacing,.25rem) * 12)}.h-16{height:calc(var(--spacing,.25rem) * 16)}.h-64{height:calc(var(--spacing,.25rem) * 64)}.h-\[1\.15rem\]{height:1.15rem}.h-\[1px\]{height:1px}.h-\[calc\(100\%-1px\)\]{height:calc(100% - 1px)}.h-full{height:100%}.h-px{height:1px}.max-h-full{max-height:100%}.min-h-0{min-height:0}.min-h-6{min-height:calc(var(--spacing,.25rem) * 6)}.min-h-20{min-height:calc(var(--spacing,.25rem) * 20)}.min-h-\[80px\]{min-height:80px}.w-\(--density-control-h-sm\){width:var(--density-control-h-sm)}.w-\(--trigger-width\){width:var(--trigger-width)}.w-3\/4{width:75%}.w-8{width:calc(var(--spacing,.25rem) * 8)}.w-9{width:calc(var(--spacing,.25rem) * 9)}.w-10{width:calc(var(--spacing,.25rem) * 10)}.w-32{width:calc(var(--spacing,.25rem) * 32)}.w-72{width:calc(var(--spacing,.25rem) * 72)}.w-\[350px\]{width:350px}.w-\[min\(24rem\,calc\(100vw-2rem\)\)\]{width:min(24rem,100vw - 2rem)}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.w-px{width:1px}.max-w-96{max-width:calc(var(--spacing,.25rem) * 96)}.max-w-128{max-width:calc(var(--spacing,.25rem) * 128)}.max-w-\[calc\(100\%-2rem\)\]{max-width:calc(100% - 2rem)}.min-w-\(--density-control-h-sm\){min-width:var(--density-control-h-sm)}.min-w-0{min-width:0}.min-w-6{min-width:calc(var(--spacing,.25rem) * 6)}.min-w-32{min-width:calc(var(--spacing,.25rem) * 32)}.min-w-\[8rem\]{min-width:8rem}.flex-1{flex:1}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.-translate-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-\[calc\(100\%-2px\)\]{--tw-translate-x:calc(100% - 2px);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-\[-3px\]{--tw-translate-y:-3px;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-\[calc\(-50\%_-_2px\)\]{--tw-translate-y:calc(-50% - 2px);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse,pulse 2s cubic-bezier(.4, 0, .6, 1) infinite)}.animate-spin{animation:var(--animate-spin,spin .8s linear infinite)}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.resize{resize:both}.resize-y{resize:vertical}.scrollbar-thin{scrollbar-width:thin}.scrollbar-thumb-border{--tw-scrollbar-thumb:var(--color-border,var(--alfred-ink-500));scrollbar-color:var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)}.scrollbar-track-transparent{--tw-scrollbar-track:transparent;scrollbar-color:var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)}.list-none{list-style-type:none}.appearance-none{appearance:none}.grid-rows-\[auto_auto\]{grid-template-rows:auto auto}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-\(--density-control-gap\){gap:var(--density-control-gap)}.gap-\(--density-gap\){gap:var(--density-gap)}.gap-1{gap:var(--spacing,.25rem)}.gap-1\.5{gap:calc(var(--spacing,.25rem) * 1.5)}.gap-2{gap:calc(var(--spacing,.25rem) * 2)}.gap-3{gap:calc(var(--spacing,.25rem) * 3)}.gap-4{gap:calc(var(--spacing,.25rem) * 4)}.gap-6{gap:calc(var(--spacing,.25rem) * 6)}.self-end{align-self:flex-end}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overscroll-contain{overscroll-behavior:contain}.rounded-2xs{border-radius:var(--radius-2xs,.25rem)}.rounded-\[2px\]{border-radius:2px}.rounded-circle{border-radius:var(--radius-circle,50%)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg,1rem)}.rounded-md{border-radius:var(--radius-md,.75rem)}.rounded-none{border-radius:0}.rounded-pill{border-radius:var(--radius-pill,999px)}.rounded-sm{border-radius:var(--radius-sm,.5rem)}.rounded-xl{border-radius:var(--radius-xl,1.25rem)}.border{border-style:var(--tw-border-style);border-width:1px}.border-\(length\:--border-width\){border-style:var(--tw-border-style);border-width:var(--border-width)}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-y-0{border-block-style:var(--tw-border-style);border-block-width:0}.border-s-0{border-inline-start-style:var(--tw-border-style);border-inline-start-width:0}.border-e-0{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-\(length\:--border-width\){border-top-style:var(--tw-border-style);border-top-width:var(--border-width)}.border-b-\(length\:--border-width\){border-bottom-style:var(--tw-border-style);border-bottom-width:var(--border-width)}.border-b-0{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.border-none{--tw-border-style:none;border-style:none}.border-border{border-color:var(--color-border,var(--alfred-ink-500))}.border-destructive-strong{border-color:var(--color-destructive-strong,var(--alfred-danger-600))}.border-destructive\/50{border-color:var(--color-destructive,var(--alfred-danger-600))}@supports (color:color-mix(in lab, red, red)){.border-destructive\/50{border-color:color-mix(in oklab, var(--color-destructive,var(--alfred-danger-600)) 50%, transparent)}}.border-info-strong{border-color:var(--color-info-strong,var(--alfred-info-700))}.border-primary{border-color:var(--color-primary,var(--alfred-orange-500))}.border-primary-strong{border-color:var(--color-primary-strong,var(--alfred-orange-750))}.border-primary\/50{border-color:var(--color-primary,var(--alfred-orange-500))}@supports (color:color-mix(in lab, red, red)){.border-primary\/50{border-color:color-mix(in oklab, var(--color-primary,var(--alfred-orange-500)) 50%, transparent)}}.border-separator{border-color:var(--color-separator,var(--alfred-gray-150))}.border-success-strong{border-color:var(--color-success-strong,var(--alfred-success-700))}.border-transparent{border-color:#0000}.border-warning-strong{border-color:var(--color-warning-strong,var(--alfred-warning-700))}.border-s-border{border-inline-start-color:var(--color-border,var(--alfred-ink-500))}.border-e-border{border-inline-end-color:var(--color-border,var(--alfred-ink-500))}.border-t-border{border-top-color:var(--color-border,var(--alfred-ink-500))}.border-t-primary-strong{border-top-color:var(--color-primary-strong,var(--alfred-orange-750))}.border-t-separator{border-top-color:var(--color-separator,var(--alfred-gray-150))}.border-b-border{border-bottom-color:var(--color-border,var(--alfred-ink-500))}.bg-background{background-color:var(--color-background,var(--alfred-white))}.bg-border{background-color:var(--color-border,var(--alfred-ink-500))}.bg-card{background-color:var(--color-card,var(--alfred-white))}.bg-current{background-color:currentColor}.bg-destructive{background-color:var(--color-destructive,var(--alfred-danger-600))}.bg-destructive-strong{background-color:var(--color-destructive-strong,var(--alfred-danger-600))}.bg-destructive-subtle{background-color:var(--color-destructive-subtle,var(--alfred-danger-100))}.bg-header-fill{background-color:var(--color-header-fill,var(--alfred-white-warm))}.bg-info-strong{background-color:var(--color-info-strong,var(--alfred-info-700))}.bg-info-subtle{background-color:var(--color-info-subtle,var(--alfred-info-100))}.bg-muted{background-color:var(--color-muted,var(--alfred-gray-100))}.bg-muted-foreground{background-color:var(--color-muted-foreground,var(--alfred-ink-500))}.bg-muted\/50{background-color:var(--color-muted,var(--alfred-gray-100))}@supports (color:color-mix(in lab, red, red)){.bg-muted\/50{background-color:color-mix(in oklab, var(--color-muted,var(--alfred-gray-100)) 50%, transparent)}}.bg-primary{background-color:var(--color-primary,var(--alfred-orange-500))}.bg-primary-strong{background-color:var(--color-primary-strong,var(--alfred-orange-750))}.bg-primary-subtle{background-color:var(--color-primary-subtle,var(--alfred-orange-50))}.bg-primary\/20{background-color:var(--color-primary,var(--alfred-orange-500))}@supports (color:color-mix(in lab, red, red)){.bg-primary\/20{background-color:color-mix(in oklab, var(--color-primary,var(--alfred-orange-500)) 20%, transparent)}}.bg-primary\/90{background-color:var(--color-primary,var(--alfred-orange-500))}@supports (color:color-mix(in lab, red, red)){.bg-primary\/90{background-color:color-mix(in oklab, var(--color-primary,var(--alfred-orange-500)) 90%, transparent)}}.bg-scrim{background-color:var(--color-scrim,#02021e80)}.bg-secondary{background-color:var(--color-secondary,var(--alfred-periwinkle-400))}.bg-success-strong{background-color:var(--color-success-strong,var(--alfred-success-700))}.bg-success-subtle{background-color:var(--color-success-subtle,var(--alfred-success-100))}.bg-transparent{background-color:#0000}.bg-warning-strong{background-color:var(--color-warning-strong,var(--alfred-warning-700))}.bg-warning-subtle{background-color:var(--color-warning-subtle,var(--alfred-warning-100))}.fill-primary{fill:var(--color-primary,var(--alfred-orange-500))}.object-cover{object-fit:cover}.p-\(--density-bar-pad-x\){padding:var(--density-bar-pad-x)}.p-\(--density-control-pad-md\){padding:var(--density-control-pad-md)}.p-0{padding:0}.p-0\.5{padding:calc(var(--spacing,.25rem) * .5)}.p-1{padding:var(--spacing,.25rem)}.p-4{padding:calc(var(--spacing,.25rem) * 4)}.p-6{padding:calc(var(--spacing,.25rem) * 6)}.p-\[3px\]{padding:3px}.px-\(--density-control-pad-lg\){padding-inline:var(--density-control-pad-lg)}.px-\(--density-control-pad-md\){padding-inline:var(--density-control-pad-md)}.px-\(--density-control-pad-sm\){padding-inline:var(--density-control-pad-sm)}.px-\(--density-row-pad-x\){padding-inline:var(--density-row-pad-x)}.px-0{padding-inline:0}.px-2{padding-inline:calc(var(--spacing,.25rem) * 2)}.px-2\.5{padding-inline:calc(var(--spacing,.25rem) * 2.5)}.px-3{padding-inline:calc(var(--spacing,.25rem) * 3)}.px-4{padding-inline:calc(var(--spacing,.25rem) * 4)}.px-6{padding-inline:calc(var(--spacing,.25rem) * 6)}.py-\(--density-control-pad-md\){padding-block:var(--density-control-pad-md)}.py-\(--density-control-pad-sm\){padding-block:var(--density-control-pad-sm)}.py-\(--density-row-pad-y\){padding-block:var(--density-row-pad-y)}.py-0\.5{padding-block:calc(var(--spacing,.25rem) * .5)}.py-1{padding-block:var(--spacing,.25rem)}.py-1\.5{padding-block:calc(var(--spacing,.25rem) * 1.5)}.py-4{padding-block:calc(var(--spacing,.25rem) * 4)}.py-6{padding-block:calc(var(--spacing,.25rem) * 6)}.ps-8{padding-inline-start:calc(var(--spacing,.25rem) * 8)}.ps-\[calc\(var\(--density-control-pad-md\)_\+_var\(--icon-sm\)_\+_var\(--density-control-gap\)\)\]{padding-inline-start:calc(var(--density-control-pad-md) + var(--icon-sm) + var(--density-control-gap))}.pe-2{padding-inline-end:calc(var(--spacing,.25rem) * 2)}.pe-\[calc\(var\(--density-control-pad-md\)_\+_var\(--icon-sm\)_\+_var\(--density-control-gap\)\)\]{padding-inline-end:calc(var(--density-control-pad-md) + var(--icon-sm) + var(--density-control-gap))}.pb-\(--density-control-pad-md\){padding-bottom:var(--density-control-pad-md)}.pb-1{padding-bottom:var(--spacing,.25rem)}.pl-9{padding-left:calc(var(--spacing,.25rem) * 9)}.text-center{text-align:center}.text-end{text-align:end}.text-left{text-align:left}.text-start{text-align:start}.align-middle{vertical-align:middle}.font-sans{font-family:var(--font-sans,"Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif)}.text-2xs{font-size:var(--text-2xs,.6875rem)}.text-base{font-size:var(--text-base,1rem)}.text-lg{font-size:var(--text-lg,1.125rem)}.text-sm{font-size:var(--text-sm,.875rem)}.text-xs{font-size:var(--text-xs,.75rem)}.leading-\(--leading-none\){--tw-leading:var(--leading-none);line-height:var(--leading-none)}.leading-\(--leading-normal\){--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}.leading-\(--leading-snug\){--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-\(--leading-tight\){--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.leading-none{--tw-leading:var(--leading-none,1);line-height:var(--leading-none,1)}.font-medium{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}.font-semibold{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.tracking-wide{--tw-tracking:var(--tracking-wide,.02em);letter-spacing:var(--tracking-wide,.02em)}.text-balance{text-wrap:balance}.break-words{overflow-wrap:break-word}.whitespace-nowrap{white-space:nowrap}.text-background{color:var(--color-background,var(--alfred-white))}.text-card-foreground{color:var(--color-card-foreground,var(--alfred-ink-900))}.text-current{color:currentColor}.text-destructive-foreground{color:var(--color-destructive-foreground,var(--alfred-white))}.text-destructive-strong{color:var(--color-destructive-strong,var(--alfred-danger-600))}.text-destructive-subtle-foreground{color:var(--color-destructive-subtle-foreground,var(--alfred-danger-700))}.text-foreground{color:var(--color-foreground,var(--alfred-ink-900))}.text-info-foreground{color:var(--color-info-foreground,var(--alfred-info-700))}.text-info-strong{color:var(--color-info-strong,var(--alfred-info-700))}.text-info-strong-foreground{color:var(--color-info-strong-foreground,var(--alfred-white))}.text-muted-foreground{color:var(--color-muted-foreground,var(--alfred-ink-500))}.text-primary-foreground{color:var(--color-primary-foreground,var(--alfred-ink-900))}.text-primary-strong{color:var(--color-primary-strong,var(--alfred-orange-750))}.text-secondary-foreground{color:var(--color-secondary-foreground,var(--alfred-ink-900))}.text-success-foreground{color:var(--color-success-foreground,var(--alfred-success-800))}.text-success-strong{color:var(--color-success-strong,var(--alfred-success-700))}.text-success-strong-foreground{color:var(--color-success-strong-foreground,var(--alfred-white))}.text-warning-foreground{color:var(--color-warning-foreground,var(--alfred-warning-800))}.text-warning-strong{color:var(--color-warning-strong,var(--alfred-warning-700))}.text-warning-strong-foreground{color:var(--color-warning-strong-foreground,var(--alfred-white))}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.underline-offset-\(--underline-offset\){text-underline-offset:var(--underline-offset)}.opacity-70{opacity:.7}.opacity-90{opacity:.9}.shadow-floating,.shadow-md{--tw-shadow:0 8px 24px var(--tw-shadow-color,#02021e14);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-modal{--tw-shadow:0 32px 80px var(--tw-shadow-color,#02021e1f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 2px 8px var(--tw-shadow-color,#02021e0f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-surface,.shadow-xs{--tw-shadow:0 1px 2px var(--tw-shadow-color,#02021e0d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring,.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-\[3px\]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.outline-none{--tw-outline-style:none;outline-style:none}.outline-solid{--tw-outline-style:solid;outline-style:solid}.select-none{-webkit-user-select:none;user-select:none}.group-data-\[current\]\:hidden:is(:where(.group)[data-current] *){display:none}.group-data-\[focus-visible\]\:outline-\(length\:--focus-ring-width\):is(:where(.group)[data-focus-visible] *){outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.group-data-\[focus-visible\]\:outline-offset-\(--focus-ring-offset\):is(:where(.group)[data-focus-visible] *){outline-offset:var(--focus-ring-offset)}.group-data-\[focus-visible\]\:outline-\(--color-ring\):is(:where(.group)[data-focus-visible] *){outline-color:var(--color-ring)}.group-data-\[focus-visible\]\:outline-solid:is(:where(.group)[data-focus-visible] *){--tw-outline-style:solid;outline-style:solid}.group-data-\[indeterminate\]\:border-primary-strong:is(:where(.group)[data-indeterminate] *){border-color:var(--color-primary-strong,var(--alfred-orange-750))}.group-data-\[indeterminate\]\:bg-primary:is(:where(.group)[data-indeterminate] *){background-color:var(--color-primary,var(--alfred-orange-500))}.group-data-\[indeterminate\]\:text-primary-foreground:is(:where(.group)[data-indeterminate] *){color:var(--color-primary-foreground,var(--alfred-ink-900))}.group-data-\[invalid\]\:border-destructive-strong:is(:where(.group)[data-invalid] *){border-color:var(--color-destructive-strong,var(--alfred-danger-600))}.group-data-\[selected\]\:translate-x-4:is(:where(.group)[data-selected] *){--tw-translate-x:calc(var(--spacing,.25rem) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-data-\[selected\]\:border-primary-strong:is(:where(.group)[data-selected] *){border-color:var(--color-primary-strong,var(--alfred-orange-750))}.group-data-\[selected\]\:bg-primary:is(:where(.group)[data-selected] *){background-color:var(--color-primary,var(--alfred-orange-500))}.group-data-\[selected\]\:bg-primary-strong:is(:where(.group)[data-selected] *){background-color:var(--color-primary-strong,var(--alfred-orange-750))}.group-data-\[selected\]\:text-primary-foreground:is(:where(.group)[data-selected] *){color:var(--color-primary-foreground,var(--alfred-ink-900))}.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\:opacity-50:is(:where(.peer):disabled~*){opacity:.5}.selection\:bg-primary ::selection{background-color:var(--color-primary,var(--alfred-orange-500))}.selection\:bg-primary::selection{background-color:var(--color-primary,var(--alfred-orange-500))}.selection\:text-primary-foreground ::selection{color:var(--color-primary-foreground,var(--alfred-ink-900))}.selection\:text-primary-foreground::selection{color:var(--color-primary-foreground,var(--alfred-ink-900))}.file\:inline-flex::file-selector-button{display:inline-flex}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:text-sm::file-selector-button{font-size:var(--text-sm,.875rem)}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}.file\:text-foreground::file-selector-button{color:var(--color-foreground,var(--alfred-ink-900))}.placeholder\:text-muted-foreground::placeholder{color:var(--color-muted-foreground,var(--alfred-ink-500))}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.checked\:bg-primary:checked{background-color:var(--color-primary,var(--alfred-orange-500))}@media (hover:hover){.hover\:bg-muted:hover{background-color:var(--color-muted,var(--alfred-gray-100))}}.focus-visible\:border-ring:focus-visible{border-color:var(--color-ring,var(--alfred-orange-700))}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:outline-\(length\:--focus-ring-width\):focus-visible{outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.focus-visible\:outline-offset-\(--focus-ring-offset\):focus-visible{outline-offset:var(--focus-ring-offset)}.focus-visible\:outline-\(--color-ring\):focus-visible{outline-color:var(--color-ring)}.focus-visible\:outline-solid:focus-visible{--tw-outline-style:solid;outline-style:solid}.disabled\:pointer-events-none:disabled{pointer-events:none}.has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot=card-action]){grid-template-columns:1fr auto}.data-\[allows-sorting\]\:cursor-pointer[data-allows-sorting]{cursor:pointer}.data-\[animation\=exiting\]\:opacity-0[data-animation=exiting]{opacity:0}.data-\[current\]\:cursor-default[data-current]{cursor:default}.data-\[current\]\:font-normal[data-current]{--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400)}.data-\[current\]\:text-foreground[data-current]{color:var(--color-foreground,var(--alfred-ink-900))}.data-\[disabled\]\:cursor-not-allowed[data-disabled]{cursor:not-allowed}.data-\[disabled\]\:opacity-\(--opacity-disabled\)[data-disabled]{opacity:var(--opacity-disabled)}.data-\[dragging\]\:cursor-grabbing[data-dragging]{cursor:grabbing}.data-\[focus-visible\]\:outline-\(length\:--focus-ring-width\)[data-focus-visible]{outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.data-\[focus-visible\]\:outline-offset-\(--focus-ring-offset\)[data-focus-visible]{outline-offset:var(--focus-ring-offset)}.data-\[focus-visible\]\:outline-\(--color-ring\)[data-focus-visible]{outline-color:var(--color-ring)}.data-\[focus-visible\]\:outline-solid[data-focus-visible]{--tw-outline-style:solid;outline-style:solid}.data-\[focused\]\:bg-muted[data-focused]{background-color:var(--color-muted,var(--alfred-gray-100))}.data-\[highlighted\]\:bg-primary-subtle[data-highlighted]{background-color:var(--color-primary-subtle,var(--alfred-orange-50))}.data-\[hovered\]\:bg-destructive-hover[data-hovered]{background-color:var(--color-destructive-hover,var(--alfred-danger-700))}.data-\[hovered\]\:bg-muted[data-hovered]{background-color:var(--color-muted,var(--alfred-gray-100))}.data-\[hovered\]\:bg-primary-hover[data-hovered]{background-color:var(--color-primary-hover,var(--alfred-orange-600))}.data-\[hovered\]\:bg-secondary-hover[data-hovered]{background-color:var(--color-secondary-hover,var(--alfred-periwinkle-500))}.data-\[hovered\]\:text-foreground[data-hovered]{color:var(--color-foreground,var(--alfred-ink-900))}.data-\[hovered\]\:underline[data-hovered]{text-decoration-line:underline}.data-\[hovered\]\:opacity-100[data-hovered]{opacity:1}.data-\[invalid\]\:border-destructive-strong[data-invalid]{border-color:var(--color-destructive-strong,var(--alfred-danger-600))}.data-\[outside-month\]\:text-muted-foreground[data-outside-month]{color:var(--color-muted-foreground,var(--alfred-ink-500))}.data-\[outside-month\]\:opacity-\(--opacity-disabled\)[data-outside-month]{opacity:var(--opacity-disabled)}.data-\[pending\]\:cursor-progress[data-pending]{cursor:progress}.data-\[pressed\]\:border-foreground[data-pressed]{border-color:var(--color-foreground,var(--alfred-ink-900))}.data-\[pressed\]\:border-primary-strong[data-pressed]{border-color:var(--color-primary-strong,var(--alfred-orange-750))}.data-\[pressed\]\:bg-destructive-pressed[data-pressed]{background-color:var(--color-destructive-pressed,var(--alfred-danger-800))}.data-\[pressed\]\:bg-muted[data-pressed]{background-color:var(--color-muted,var(--alfred-gray-100))}.data-\[pressed\]\:bg-primary-pressed[data-pressed]{background-color:var(--color-primary-pressed,var(--alfred-orange-700))}.data-\[pressed\]\:bg-secondary-pressed[data-pressed]{background-color:var(--color-secondary-pressed,var(--alfred-periwinkle-600))}.data-\[pressed\]\:underline[data-pressed]{text-decoration-line:underline}.data-\[selected\]\:rounded-none[data-selected]{border-radius:0}.data-\[selected\]\:border-border[data-selected]{border-color:var(--color-border,var(--alfred-ink-500))}.data-\[selected\]\:bg-background[data-selected]{background-color:var(--color-background,var(--alfred-white))}.data-\[selected\]\:bg-muted[data-selected]{background-color:var(--color-muted,var(--alfred-gray-100))}.data-\[selected\]\:bg-primary[data-selected]{background-color:var(--color-primary,var(--alfred-orange-500))}.data-\[selected\]\:font-semibold[data-selected]{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.data-\[selected\]\:text-foreground[data-selected]{color:var(--color-foreground,var(--alfred-ink-900))}.data-\[selected\]\:text-primary-foreground[data-selected]{color:var(--color-primary-foreground,var(--alfred-ink-900))}.data-\[selected\]\:shadow-surface[data-selected]{--tw-shadow:0 1px 2px var(--tw-shadow-color,#02021e0d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.data-\[selection-end\]\:rounded-e-md[data-selection-end]{border-start-end-radius:var(--radius-md,.75rem);border-end-end-radius:var(--radius-md,.75rem)}.data-\[selection-end\]\:bg-primary[data-selection-end]{background-color:var(--color-primary,var(--alfred-orange-500))}.data-\[selection-end\]\:font-semibold[data-selection-end]{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.data-\[selection-end\]\:text-primary-foreground[data-selection-end]{color:var(--color-primary-foreground,var(--alfred-ink-900))}.data-\[selection-start\]\:rounded-s-md[data-selection-start]{border-start-start-radius:var(--radius-md,.75rem);border-end-start-radius:var(--radius-md,.75rem)}.data-\[selection-start\]\:bg-primary[data-selection-start]{background-color:var(--color-primary,var(--alfred-orange-500))}.data-\[selection-start\]\:font-semibold[data-selection-start]{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.data-\[selection-start\]\:text-primary-foreground[data-selection-start]{color:var(--color-primary-foreground,var(--alfred-ink-900))}.data-\[today\]\:font-semibold[data-today]{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.data-\[today\]\:underline[data-today]{text-decoration-line:underline}.data-\[today\]\:underline-offset-4[data-today]{text-underline-offset:4px}.data-\[unavailable\]\:cursor-not-allowed[data-unavailable]{cursor:not-allowed}.data-\[unavailable\]\:text-muted-foreground[data-unavailable]{color:var(--color-muted-foreground,var(--alfred-ink-500))}.data-\[unavailable\]\:line-through[data-unavailable]{text-decoration-line:line-through}@media (prefers-reduced-motion:no-preference){.motion-safe\:animate-pulse{animation:var(--animate-pulse,pulse 2s cubic-bezier(.4, 0, .6, 1) infinite)}.motion-safe\:animate-spin{animation:var(--animate-spin,spin .8s linear infinite)}.motion-safe\:transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.motion-safe\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.motion-safe\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.motion-safe\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.motion-safe\:duration-\(--duration-base\){--tw-duration:var(--duration-base);transition-duration:var(--duration-base)}.motion-safe\:duration-\(--duration-fast\){--tw-duration:var(--duration-fast);transition-duration:var(--duration-fast)}.motion-safe\:ease-standard{--tw-ease:var(--ease-standard,cubic-bezier(.22, .61, .36, 1));transition-timing-function:var(--ease-standard,cubic-bezier(.22, .61, .36, 1))}}@media (min-width:30rem){.sm\:flex-row{flex-direction:row}.sm\:items-start{align-items:flex-start}}@media (min-width:48rem){.md\:text-sm{font-size:var(--text-sm,.875rem)}}.rtl\:-scale-x-100:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-scale-x:calc(100% * -1);scale:var(--tw-scale-x) var(--tw-scale-y)}.rtl\:group-data-\[selected\]\:-translate-x-4:where(:dir(rtl),[dir=rtl],[dir=rtl] *):is(:where(.group)[data-selected] *){--tw-translate-x:calc(var(--spacing,.25rem) * -4);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[expanded\]\:\[\&_\[data-slot\=accordion-trigger\]_svg\]\:rotate-180[data-expanded] [data-slot=accordion-trigger] svg{rotate:180deg}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\]\:text-muted-foreground svg{color:var(--color-muted-foreground,var(--alfred-ink-500))}@media (prefers-reduced-motion:no-preference){.\[\&_svg\]\:motion-safe\:transition-transform svg{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.\[\&_svg\]\:motion-safe\:duration-\(--duration-fast\) svg{--tw-duration:var(--duration-fast);transition-duration:var(--duration-fast)}}.\[\&_svg\]\:rtl\:-scale-x-100 svg:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-scale-x:calc(100% * -1);scale:var(--tw-scale-x) var(--tw-scale-y)}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--icon-sm\) svg:not([class*=size-]){width:var(--icon-sm);height:var(--icon-sm)}.\[\&_tr\]\:border-b tr{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.\[\.border-b\]\:pb-6.border-b{padding-bottom:calc(var(--spacing,.25rem) * 6)}.\[\.border-t\]\:pt-6.border-t{padding-top:calc(var(--spacing,.25rem) * 6)}.\[\&\:nth-child\(even\)\]\:bg-row-stripe:nth-child(2n){background-color:var(--color-row-stripe,var(--alfred-gray-50))}.\[\&\>svg\]\:pointer-events-none>svg{pointer-events:none}.\[\&\>svg\]\:absolute>svg{position:absolute}.\[\&\>svg\]\:top-4>svg{top:calc(var(--spacing,.25rem) * 4)}.\[\&\>svg\]\:left-4>svg{left:calc(var(--spacing,.25rem) * 4)}.\[\&\>svg\]\:size-3>svg{width:calc(var(--spacing,.25rem) * 3);height:calc(var(--spacing,.25rem) * 3)}.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div{--tw-translate-y:-3px;translate:var(--tw-translate-x) var(--tw-translate-y)}.\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--icon-sm\)>svg:not([class*=size-]){width:var(--icon-sm);height:var(--icon-sm)}.\[\&\>svg\~\*\]\:pl-7>svg~*{padding-left:calc(var(--spacing,.25rem) * 7)}}@layer alfred.utilities.patterns,alfred.utilities.charts,alfred.utilities.ai;@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-scrollbar-thumb{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-scrollbar-track{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-scrollbar-thumb:#0000;--tw-scrollbar-track:#0000;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer alfred.reset,alfred.tokens,alfred.components.primitives,alfred.components.patterns,alfred.components.charts,alfred.components.ai;@layer alfred.utilities.primitives{.\@container\/card-header{container:card-header/inline-size}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:0}.inset-y-0{inset-block:0}.start-\(--density-control-pad-lg\){inset-inline-start:var(--density-control-pad-lg)}.start-\(--density-control-pad-md\){inset-inline-start:var(--density-control-pad-md)}.start-\(--density-control-pad-sm\){inset-inline-start:var(--density-control-pad-sm)}.start-2{inset-inline-start:calc(var(--spacing,.25rem) * 2)}.end-\(--density-bar-pad-x\){inset-inline-end:var(--density-bar-pad-x)}.end-\(--density-control-pad-lg\){inset-inline-end:var(--density-control-pad-lg)}.end-\(--density-control-pad-md\){inset-inline-end:var(--density-control-pad-md)}.end-\(--density-control-pad-sm\){inset-inline-end:var(--density-control-pad-sm)}.end-4{inset-inline-end:calc(var(--spacing,.25rem) * 4)}.top-1\/2{top:50%}.top-4{top:calc(var(--spacing,.25rem) * 4)}.bottom-\(--density-bar-pad-y\){bottom:var(--density-bar-pad-y)}.left-1\/2{left:50%}.z-50{z-index:50}.container{width:100%}@media (min-width:30rem){.container{max-width:30rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}.m-0{margin:0}.-mx-1{margin-inline:calc(var(--spacing,.25rem) * -1)}.my-1{margin-block:var(--spacing,.25rem)}.-ms-2{margin-inline-start:calc(var(--spacing,.25rem) * -2)}.ms-1{margin-inline-start:var(--spacing,.25rem)}.ms-auto{margin-inline-start:auto}.mb-1{margin-bottom:var(--spacing,.25rem)}.ml-2{margin-left:calc(var(--spacing,.25rem) * 2)}.box-border{box-sizing:border-box}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.table-cell{display:table-cell}.table-column{display:table-column}.table-row{display:table-row}.size-\(--density-control-h-md\){width:var(--density-control-h-md);height:var(--density-control-h-md)}.size-\(--density-control-h-sm\){width:var(--density-control-h-sm);height:var(--density-control-h-sm)}.size-\(--icon-lg\){width:var(--icon-lg);height:var(--icon-lg)}.size-\(--icon-md\){width:var(--icon-md);height:var(--icon-md)}.size-\(--icon-sm\){width:var(--icon-sm);height:var(--icon-sm)}.size-1\.5{width:calc(var(--spacing,.25rem) * 1.5);height:calc(var(--spacing,.25rem) * 1.5)}.size-3{width:calc(var(--spacing,.25rem) * 3);height:calc(var(--spacing,.25rem) * 3)}.size-3\.5{width:calc(var(--spacing,.25rem) * 3.5);height:calc(var(--spacing,.25rem) * 3.5)}.size-4{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.size-5{width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5)}.size-6{width:calc(var(--spacing,.25rem) * 6);height:calc(var(--spacing,.25rem) * 6)}.size-7{width:calc(var(--spacing,.25rem) * 7);height:calc(var(--spacing,.25rem) * 7)}.size-8{width:calc(var(--spacing,.25rem) * 8);height:calc(var(--spacing,.25rem) * 8)}.size-10{width:calc(var(--spacing,.25rem) * 10);height:calc(var(--spacing,.25rem) * 10)}.size-16{width:calc(var(--spacing,.25rem) * 16);height:calc(var(--spacing,.25rem) * 16)}.size-full{width:100%;height:100%}.h-\(--density-control-h-lg\){height:var(--density-control-h-lg)}.h-\(--density-control-h-md\){height:var(--density-control-h-md)}.h-\(--density-control-h-sm\){height:var(--density-control-h-sm)}.h-2{height:calc(var(--spacing,.25rem) * 2)}.h-4{height:calc(var(--spacing,.25rem) * 4)}.h-5{height:calc(var(--spacing,.25rem) * 5)}.h-6{height:calc(var(--spacing,.25rem) * 6)}.h-8{height:calc(var(--spacing,.25rem) * 8)}.h-9{height:calc(var(--spacing,.25rem) * 9)}.h-10{height:calc(var(--spacing,.25rem) * 10)}.h-12{height:calc(var(--spacing,.25rem) * 12)}.h-16{height:calc(var(--spacing,.25rem) * 16)}.h-64{height:calc(var(--spacing,.25rem) * 64)}.h-\[1\.15rem\]{height:1.15rem}.h-\[1px\]{height:1px}.h-\[calc\(100\%-1px\)\]{height:calc(100% - 1px)}.h-full{height:100%}.h-px{height:1px}.max-h-full{max-height:100%}.min-h-0{min-height:0}.min-h-6{min-height:calc(var(--spacing,.25rem) * 6)}.min-h-20{min-height:calc(var(--spacing,.25rem) * 20)}.min-h-\[80px\]{min-height:80px}.w-\(--density-control-h-sm\){width:var(--density-control-h-sm)}.w-\(--trigger-width\){width:var(--trigger-width)}.w-3\/4{width:75%}.w-8{width:calc(var(--spacing,.25rem) * 8)}.w-9{width:calc(var(--spacing,.25rem) * 9)}.w-10{width:calc(var(--spacing,.25rem) * 10)}.w-32{width:calc(var(--spacing,.25rem) * 32)}.w-72{width:calc(var(--spacing,.25rem) * 72)}.w-\[350px\]{width:350px}.w-\[min\(24rem\,calc\(100vw-2rem\)\)\]{width:min(24rem,100vw - 2rem)}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.w-px{width:1px}.max-w-96{max-width:calc(var(--spacing,.25rem) * 96)}.max-w-128{max-width:calc(var(--spacing,.25rem) * 128)}.max-w-\[calc\(100\%-2rem\)\]{max-width:calc(100% - 2rem)}.min-w-\(--density-control-h-sm\){min-width:var(--density-control-h-sm)}.min-w-0{min-width:0}.min-w-6{min-width:calc(var(--spacing,.25rem) * 6)}.min-w-32{min-width:calc(var(--spacing,.25rem) * 32)}.min-w-\[8rem\]{min-width:8rem}.flex-1{flex:1}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.-translate-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-\[calc\(100\%-2px\)\]{--tw-translate-x:calc(100% - 2px);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-\[-3px\]{--tw-translate-y:-3px;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-\[calc\(-50\%_-_2px\)\]{--tw-translate-y:calc(-50% - 2px);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse,pulse 2s cubic-bezier(.4, 0, .6, 1) infinite)}.animate-spin{animation:var(--animate-spin,spin .8s linear infinite)}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.resize{resize:both}.resize-y{resize:vertical}.scrollbar-thin{scrollbar-width:thin}.scrollbar-thumb-border{--tw-scrollbar-thumb:var(--color-border,var(--alfred-ink-500));scrollbar-color:var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)}.scrollbar-track-transparent{--tw-scrollbar-track:transparent;scrollbar-color:var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)}.list-none{list-style-type:none}.appearance-none{appearance:none}.grid-rows-\[auto_auto\]{grid-template-rows:auto auto}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-\(--density-control-gap\){gap:var(--density-control-gap)}.gap-\(--density-gap\){gap:var(--density-gap)}.gap-1{gap:var(--spacing,.25rem)}.gap-1\.5{gap:calc(var(--spacing,.25rem) * 1.5)}.gap-2{gap:calc(var(--spacing,.25rem) * 2)}.gap-3{gap:calc(var(--spacing,.25rem) * 3)}.gap-4{gap:calc(var(--spacing,.25rem) * 4)}.gap-6{gap:calc(var(--spacing,.25rem) * 6)}.self-end{align-self:flex-end}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overscroll-contain{overscroll-behavior:contain}.rounded-2xs{border-radius:var(--radius-2xs,.25rem)}.rounded-\[2px\]{border-radius:2px}.rounded-circle{border-radius:var(--radius-circle,50%)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg,1rem)}.rounded-md{border-radius:var(--radius-md,.75rem)}.rounded-none{border-radius:0}.rounded-pill{border-radius:var(--radius-pill,999px)}.rounded-sm{border-radius:var(--radius-sm,.5rem)}.rounded-xl{border-radius:var(--radius-xl,1.25rem)}.border{border-style:var(--tw-border-style);border-width:1px}.border-\(length\:--border-width\){border-style:var(--tw-border-style);border-width:var(--border-width)}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-y-0{border-block-style:var(--tw-border-style);border-block-width:0}.border-s-0{border-inline-start-style:var(--tw-border-style);border-inline-start-width:0}.border-e-0{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-\(length\:--border-width\){border-top-style:var(--tw-border-style);border-top-width:var(--border-width)}.border-b-\(length\:--border-width\){border-bottom-style:var(--tw-border-style);border-bottom-width:var(--border-width)}.border-b-0{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.border-none{--tw-border-style:none;border-style:none}.border-border{border-color:var(--color-border,var(--alfred-ink-500))}.border-destructive-strong{border-color:var(--color-destructive-strong,var(--alfred-danger-600))}.border-destructive\/50{border-color:var(--color-destructive,var(--alfred-danger-600))}@supports (color:color-mix(in lab, red, red)){.border-destructive\/50{border-color:color-mix(in oklab, var(--color-destructive,var(--alfred-danger-600)) 50%, transparent)}}.border-info-strong{border-color:var(--color-info-strong,var(--alfred-info-700))}.border-primary{border-color:var(--color-primary,var(--alfred-orange-500))}.border-primary-strong{border-color:var(--color-primary-strong,var(--alfred-orange-750))}.border-primary\/50{border-color:var(--color-primary,var(--alfred-orange-500))}@supports (color:color-mix(in lab, red, red)){.border-primary\/50{border-color:color-mix(in oklab, var(--color-primary,var(--alfred-orange-500)) 50%, transparent)}}.border-separator{border-color:var(--color-separator,var(--alfred-gray-150))}.border-success-strong{border-color:var(--color-success-strong,var(--alfred-success-700))}.border-transparent{border-color:#0000}.border-warning-strong{border-color:var(--color-warning-strong,var(--alfred-warning-700))}.border-s-border{border-inline-start-color:var(--color-border,var(--alfred-ink-500))}.border-e-border{border-inline-end-color:var(--color-border,var(--alfred-ink-500))}.border-t-border{border-top-color:var(--color-border,var(--alfred-ink-500))}.border-t-primary-strong{border-top-color:var(--color-primary-strong,var(--alfred-orange-750))}.border-t-separator{border-top-color:var(--color-separator,var(--alfred-gray-150))}.border-b-border{border-bottom-color:var(--color-border,var(--alfred-ink-500))}.bg-background{background-color:var(--color-background,var(--alfred-white))}.bg-border{background-color:var(--color-border,var(--alfred-ink-500))}.bg-card{background-color:var(--color-card,var(--alfred-white))}.bg-current{background-color:currentColor}.bg-destructive{background-color:var(--color-destructive,var(--alfred-danger-600))}.bg-destructive-strong{background-color:var(--color-destructive-strong,var(--alfred-danger-600))}.bg-destructive-subtle{background-color:var(--color-destructive-subtle,var(--alfred-danger-100))}.bg-header-fill{background-color:var(--color-header-fill,var(--alfred-white-warm))}.bg-info-strong{background-color:var(--color-info-strong,var(--alfred-info-700))}.bg-info-subtle{background-color:var(--color-info-subtle,var(--alfred-info-100))}.bg-muted{background-color:var(--color-muted,var(--alfred-gray-100))}.bg-muted-foreground{background-color:var(--color-muted-foreground,var(--alfred-ink-500))}.bg-muted\/50{background-color:var(--color-muted,var(--alfred-gray-100))}@supports (color:color-mix(in lab, red, red)){.bg-muted\/50{background-color:color-mix(in oklab, var(--color-muted,var(--alfred-gray-100)) 50%, transparent)}}.bg-primary{background-color:var(--color-primary,var(--alfred-orange-500))}.bg-primary-strong{background-color:var(--color-primary-strong,var(--alfred-orange-750))}.bg-primary-subtle{background-color:var(--color-primary-subtle,var(--alfred-orange-50))}.bg-primary\/20{background-color:var(--color-primary,var(--alfred-orange-500))}@supports (color:color-mix(in lab, red, red)){.bg-primary\/20{background-color:color-mix(in oklab, var(--color-primary,var(--alfred-orange-500)) 20%, transparent)}}.bg-primary\/90{background-color:var(--color-primary,var(--alfred-orange-500))}@supports (color:color-mix(in lab, red, red)){.bg-primary\/90{background-color:color-mix(in oklab, var(--color-primary,var(--alfred-orange-500)) 90%, transparent)}}.bg-scrim{background-color:var(--color-scrim,#02021e80)}.bg-secondary{background-color:var(--color-secondary,var(--alfred-periwinkle-400))}.bg-success-strong{background-color:var(--color-success-strong,var(--alfred-success-700))}.bg-success-subtle{background-color:var(--color-success-subtle,var(--alfred-success-100))}.bg-transparent{background-color:#0000}.bg-warning-strong{background-color:var(--color-warning-strong,var(--alfred-warning-700))}.bg-warning-subtle{background-color:var(--color-warning-subtle,var(--alfred-warning-100))}.fill-primary{fill:var(--color-primary,var(--alfred-orange-500))}.object-cover{object-fit:cover}.p-\(--density-bar-pad-x\){padding:var(--density-bar-pad-x)}.p-\(--density-control-pad-md\){padding:var(--density-control-pad-md)}.p-0{padding:0}.p-0\.5{padding:calc(var(--spacing,.25rem) * .5)}.p-1{padding:var(--spacing,.25rem)}.p-4{padding:calc(var(--spacing,.25rem) * 4)}.p-6{padding:calc(var(--spacing,.25rem) * 6)}.p-\[3px\]{padding:3px}.px-\(--density-control-pad-lg\){padding-inline:var(--density-control-pad-lg)}.px-\(--density-control-pad-md\){padding-inline:var(--density-control-pad-md)}.px-\(--density-control-pad-sm\){padding-inline:var(--density-control-pad-sm)}.px-\(--density-row-pad-x\){padding-inline:var(--density-row-pad-x)}.px-0{padding-inline:0}.px-2{padding-inline:calc(var(--spacing,.25rem) * 2)}.px-2\.5{padding-inline:calc(var(--spacing,.25rem) * 2.5)}.px-3{padding-inline:calc(var(--spacing,.25rem) * 3)}.px-4{padding-inline:calc(var(--spacing,.25rem) * 4)}.px-6{padding-inline:calc(var(--spacing,.25rem) * 6)}.py-\(--density-control-pad-md\){padding-block:var(--density-control-pad-md)}.py-\(--density-control-pad-sm\){padding-block:var(--density-control-pad-sm)}.py-\(--density-row-pad-y\){padding-block:var(--density-row-pad-y)}.py-0\.5{padding-block:calc(var(--spacing,.25rem) * .5)}.py-1{padding-block:var(--spacing,.25rem)}.py-1\.5{padding-block:calc(var(--spacing,.25rem) * 1.5)}.py-4{padding-block:calc(var(--spacing,.25rem) * 4)}.py-6{padding-block:calc(var(--spacing,.25rem) * 6)}.ps-8{padding-inline-start:calc(var(--spacing,.25rem) * 8)}.ps-\[calc\(var\(--density-control-pad-lg\)_\+_var\(--icon-sm\)_\+_var\(--density-control-gap\)\)\]{padding-inline-start:calc(var(--density-control-pad-lg) + var(--icon-sm) + var(--density-control-gap))}.ps-\[calc\(var\(--density-control-pad-md\)_\+_var\(--icon-sm\)_\+_var\(--density-control-gap\)\)\]{padding-inline-start:calc(var(--density-control-pad-md) + var(--icon-sm) + var(--density-control-gap))}.ps-\[calc\(var\(--density-control-pad-sm\)_\+_var\(--icon-sm\)_\+_var\(--density-control-gap\)\)\]{padding-inline-start:calc(var(--density-control-pad-sm) + var(--icon-sm) + var(--density-control-gap))}.pe-2{padding-inline-end:calc(var(--spacing,.25rem) * 2)}.pe-\[calc\(var\(--density-control-pad-lg\)_\+_var\(--icon-sm\)_\+_var\(--density-control-gap\)\)\]{padding-inline-end:calc(var(--density-control-pad-lg) + var(--icon-sm) + var(--density-control-gap))}.pe-\[calc\(var\(--density-control-pad-md\)_\+_var\(--icon-sm\)_\+_var\(--density-control-gap\)\)\]{padding-inline-end:calc(var(--density-control-pad-md) + var(--icon-sm) + var(--density-control-gap))}.pe-\[calc\(var\(--density-control-pad-sm\)_\+_var\(--icon-sm\)_\+_var\(--density-control-gap\)\)\]{padding-inline-end:calc(var(--density-control-pad-sm) + var(--icon-sm) + var(--density-control-gap))}.pb-\(--density-control-pad-md\){padding-bottom:var(--density-control-pad-md)}.pb-1{padding-bottom:var(--spacing,.25rem)}.pl-9{padding-left:calc(var(--spacing,.25rem) * 9)}.text-center{text-align:center}.text-end{text-align:end}.text-left{text-align:left}.text-start{text-align:start}.align-middle{vertical-align:middle}.font-sans{font-family:var(--font-sans,"Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif)}.text-2xs{font-size:var(--text-2xs,.6875rem)}.text-base{font-size:var(--text-base,1rem)}.text-lg{font-size:var(--text-lg,1.125rem)}.text-sm{font-size:var(--text-sm,.875rem)}.text-xs{font-size:var(--text-xs,.75rem)}.leading-\(--leading-none\){--tw-leading:var(--leading-none);line-height:var(--leading-none)}.leading-\(--leading-normal\){--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}.leading-\(--leading-snug\){--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-\(--leading-tight\){--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.leading-none{--tw-leading:var(--leading-none,1);line-height:var(--leading-none,1)}.font-medium{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}.font-semibold{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.tracking-wide{--tw-tracking:var(--tracking-wide,.02em);letter-spacing:var(--tracking-wide,.02em)}.text-balance{text-wrap:balance}.break-words{overflow-wrap:break-word}.whitespace-nowrap{white-space:nowrap}.text-background{color:var(--color-background,var(--alfred-white))}.text-card-foreground{color:var(--color-card-foreground,var(--alfred-ink-900))}.text-current{color:currentColor}.text-destructive-foreground{color:var(--color-destructive-foreground,var(--alfred-white))}.text-destructive-strong{color:var(--color-destructive-strong,var(--alfred-danger-600))}.text-destructive-subtle-foreground{color:var(--color-destructive-subtle-foreground,var(--alfred-danger-700))}.text-foreground{color:var(--color-foreground,var(--alfred-ink-900))}.text-info-foreground{color:var(--color-info-foreground,var(--alfred-info-700))}.text-info-strong{color:var(--color-info-strong,var(--alfred-info-700))}.text-info-strong-foreground{color:var(--color-info-strong-foreground,var(--alfred-white))}.text-muted-foreground{color:var(--color-muted-foreground,var(--alfred-ink-500))}.text-primary-foreground{color:var(--color-primary-foreground,var(--alfred-ink-900))}.text-primary-strong{color:var(--color-primary-strong,var(--alfred-orange-750))}.text-secondary-foreground{color:var(--color-secondary-foreground,var(--alfred-ink-900))}.text-success-foreground{color:var(--color-success-foreground,var(--alfred-success-800))}.text-success-strong{color:var(--color-success-strong,var(--alfred-success-700))}.text-success-strong-foreground{color:var(--color-success-strong-foreground,var(--alfred-white))}.text-warning-foreground{color:var(--color-warning-foreground,var(--alfred-warning-800))}.text-warning-strong{color:var(--color-warning-strong,var(--alfred-warning-700))}.text-warning-strong-foreground{color:var(--color-warning-strong-foreground,var(--alfred-white))}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.underline-offset-\(--underline-offset\){text-underline-offset:var(--underline-offset)}.opacity-70{opacity:.7}.opacity-90{opacity:.9}.shadow-floating,.shadow-md{--tw-shadow:0 8px 24px var(--tw-shadow-color,#02021e14);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-modal{--tw-shadow:0 32px 80px var(--tw-shadow-color,#02021e1f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 2px 8px var(--tw-shadow-color,#02021e0f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-surface,.shadow-xs{--tw-shadow:0 1px 2px var(--tw-shadow-color,#02021e0d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring,.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-\[3px\]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.outline-none{--tw-outline-style:none;outline-style:none}.outline-solid{--tw-outline-style:solid;outline-style:solid}.select-none{-webkit-user-select:none;user-select:none}.group-data-\[current\]\:hidden:is(:where(.group)[data-current] *){display:none}.group-data-\[focus-visible\]\:outline-\(length\:--focus-ring-width\):is(:where(.group)[data-focus-visible] *){outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.group-data-\[focus-visible\]\:outline-offset-\(--focus-ring-offset\):is(:where(.group)[data-focus-visible] *){outline-offset:var(--focus-ring-offset)}.group-data-\[focus-visible\]\:outline-\(--color-ring\):is(:where(.group)[data-focus-visible] *){outline-color:var(--color-ring)}.group-data-\[focus-visible\]\:outline-solid:is(:where(.group)[data-focus-visible] *){--tw-outline-style:solid;outline-style:solid}.group-data-\[indeterminate\]\:border-primary-strong:is(:where(.group)[data-indeterminate] *){border-color:var(--color-primary-strong,var(--alfred-orange-750))}.group-data-\[indeterminate\]\:bg-primary:is(:where(.group)[data-indeterminate] *){background-color:var(--color-primary,var(--alfred-orange-500))}.group-data-\[indeterminate\]\:text-primary-foreground:is(:where(.group)[data-indeterminate] *){color:var(--color-primary-foreground,var(--alfred-ink-900))}.group-data-\[invalid\]\:border-destructive-strong:is(:where(.group)[data-invalid] *){border-color:var(--color-destructive-strong,var(--alfred-danger-600))}.group-data-\[selected\]\:translate-x-4:is(:where(.group)[data-selected] *){--tw-translate-x:calc(var(--spacing,.25rem) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-data-\[selected\]\:border-primary-strong:is(:where(.group)[data-selected] *){border-color:var(--color-primary-strong,var(--alfred-orange-750))}.group-data-\[selected\]\:bg-primary:is(:where(.group)[data-selected] *){background-color:var(--color-primary,var(--alfred-orange-500))}.group-data-\[selected\]\:bg-primary-strong:is(:where(.group)[data-selected] *){background-color:var(--color-primary-strong,var(--alfred-orange-750))}.group-data-\[selected\]\:text-primary-foreground:is(:where(.group)[data-selected] *){color:var(--color-primary-foreground,var(--alfred-ink-900))}.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\:opacity-50:is(:where(.peer):disabled~*){opacity:.5}.selection\:bg-primary ::selection{background-color:var(--color-primary,var(--alfred-orange-500))}.selection\:bg-primary::selection{background-color:var(--color-primary,var(--alfred-orange-500))}.selection\:text-primary-foreground ::selection{color:var(--color-primary-foreground,var(--alfred-ink-900))}.selection\:text-primary-foreground::selection{color:var(--color-primary-foreground,var(--alfred-ink-900))}.file\:inline-flex::file-selector-button{display:inline-flex}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:text-sm::file-selector-button{font-size:var(--text-sm,.875rem)}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}.file\:text-foreground::file-selector-button{color:var(--color-foreground,var(--alfred-ink-900))}.placeholder\:text-muted-foreground::placeholder{color:var(--color-muted-foreground,var(--alfred-ink-500))}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.checked\:bg-primary:checked{background-color:var(--color-primary,var(--alfred-orange-500))}@media (hover:hover){.hover\:bg-muted:hover{background-color:var(--color-muted,var(--alfred-gray-100))}}.focus-visible\:border-ring:focus-visible{border-color:var(--color-ring,var(--alfred-orange-700))}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:outline-\(length\:--focus-ring-width\):focus-visible{outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.focus-visible\:outline-offset-\(--focus-ring-offset\):focus-visible{outline-offset:var(--focus-ring-offset)}.focus-visible\:outline-\(--color-ring\):focus-visible{outline-color:var(--color-ring)}.focus-visible\:outline-solid:focus-visible{--tw-outline-style:solid;outline-style:solid}.disabled\:pointer-events-none:disabled{pointer-events:none}.has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot=card-action]){grid-template-columns:1fr auto}.data-\[allows-sorting\]\:cursor-pointer[data-allows-sorting]{cursor:pointer}.data-\[animation\=exiting\]\:opacity-0[data-animation=exiting]{opacity:0}.data-\[current\]\:cursor-default[data-current]{cursor:default}.data-\[current\]\:font-normal[data-current]{--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400)}.data-\[current\]\:text-foreground[data-current]{color:var(--color-foreground,var(--alfred-ink-900))}.data-\[disabled\]\:cursor-not-allowed[data-disabled]{cursor:not-allowed}.data-\[disabled\]\:opacity-\(--opacity-disabled\)[data-disabled]{opacity:var(--opacity-disabled)}.data-\[dragging\]\:cursor-grabbing[data-dragging]{cursor:grabbing}.data-\[focus-visible\]\:outline-\(length\:--focus-ring-width\)[data-focus-visible]{outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.data-\[focus-visible\]\:outline-offset-\(--focus-ring-offset\)[data-focus-visible]{outline-offset:var(--focus-ring-offset)}.data-\[focus-visible\]\:outline-\(--color-ring\)[data-focus-visible]{outline-color:var(--color-ring)}.data-\[focus-visible\]\:outline-solid[data-focus-visible]{--tw-outline-style:solid;outline-style:solid}.data-\[focused\]\:bg-muted[data-focused]{background-color:var(--color-muted,var(--alfred-gray-100))}.data-\[highlighted\]\:bg-primary-subtle[data-highlighted]{background-color:var(--color-primary-subtle,var(--alfred-orange-50))}.data-\[hovered\]\:bg-destructive-hover[data-hovered]{background-color:var(--color-destructive-hover,var(--alfred-danger-700))}.data-\[hovered\]\:bg-muted[data-hovered]{background-color:var(--color-muted,var(--alfred-gray-100))}.data-\[hovered\]\:bg-primary-hover[data-hovered]{background-color:var(--color-primary-hover,var(--alfred-orange-600))}.data-\[hovered\]\:bg-secondary-hover[data-hovered]{background-color:var(--color-secondary-hover,var(--alfred-periwinkle-500))}.data-\[hovered\]\:text-foreground[data-hovered]{color:var(--color-foreground,var(--alfred-ink-900))}.data-\[hovered\]\:underline[data-hovered]{text-decoration-line:underline}.data-\[hovered\]\:opacity-100[data-hovered]{opacity:1}.data-\[invalid\]\:border-destructive-strong[data-invalid]{border-color:var(--color-destructive-strong,var(--alfred-danger-600))}.data-\[outside-month\]\:text-muted-foreground[data-outside-month]{color:var(--color-muted-foreground,var(--alfred-ink-500))}.data-\[outside-month\]\:opacity-\(--opacity-disabled\)[data-outside-month]{opacity:var(--opacity-disabled)}.data-\[pending\]\:cursor-progress[data-pending]{cursor:progress}.data-\[pressed\]\:border-foreground[data-pressed]{border-color:var(--color-foreground,var(--alfred-ink-900))}.data-\[pressed\]\:border-primary-strong[data-pressed]{border-color:var(--color-primary-strong,var(--alfred-orange-750))}.data-\[pressed\]\:bg-destructive-pressed[data-pressed]{background-color:var(--color-destructive-pressed,var(--alfred-danger-800))}.data-\[pressed\]\:bg-muted[data-pressed]{background-color:var(--color-muted,var(--alfred-gray-100))}.data-\[pressed\]\:bg-primary-pressed[data-pressed]{background-color:var(--color-primary-pressed,var(--alfred-orange-700))}.data-\[pressed\]\:bg-secondary-pressed[data-pressed]{background-color:var(--color-secondary-pressed,var(--alfred-periwinkle-600))}.data-\[pressed\]\:underline[data-pressed]{text-decoration-line:underline}.data-\[selected\]\:rounded-none[data-selected]{border-radius:0}.data-\[selected\]\:border-border[data-selected]{border-color:var(--color-border,var(--alfred-ink-500))}.data-\[selected\]\:bg-background[data-selected]{background-color:var(--color-background,var(--alfred-white))}.data-\[selected\]\:bg-muted[data-selected]{background-color:var(--color-muted,var(--alfred-gray-100))}.data-\[selected\]\:bg-primary[data-selected]{background-color:var(--color-primary,var(--alfred-orange-500))}.data-\[selected\]\:font-semibold[data-selected]{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.data-\[selected\]\:text-foreground[data-selected]{color:var(--color-foreground,var(--alfred-ink-900))}.data-\[selected\]\:text-primary-foreground[data-selected]{color:var(--color-primary-foreground,var(--alfred-ink-900))}.data-\[selected\]\:shadow-surface[data-selected]{--tw-shadow:0 1px 2px var(--tw-shadow-color,#02021e0d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.data-\[selection-end\]\:rounded-e-md[data-selection-end]{border-start-end-radius:var(--radius-md,.75rem);border-end-end-radius:var(--radius-md,.75rem)}.data-\[selection-end\]\:bg-primary[data-selection-end]{background-color:var(--color-primary,var(--alfred-orange-500))}.data-\[selection-end\]\:font-semibold[data-selection-end]{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.data-\[selection-end\]\:text-primary-foreground[data-selection-end]{color:var(--color-primary-foreground,var(--alfred-ink-900))}.data-\[selection-start\]\:rounded-s-md[data-selection-start]{border-start-start-radius:var(--radius-md,.75rem);border-end-start-radius:var(--radius-md,.75rem)}.data-\[selection-start\]\:bg-primary[data-selection-start]{background-color:var(--color-primary,var(--alfred-orange-500))}.data-\[selection-start\]\:font-semibold[data-selection-start]{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.data-\[selection-start\]\:text-primary-foreground[data-selection-start]{color:var(--color-primary-foreground,var(--alfred-ink-900))}.data-\[today\]\:font-semibold[data-today]{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.data-\[today\]\:underline[data-today]{text-decoration-line:underline}.data-\[today\]\:underline-offset-4[data-today]{text-underline-offset:4px}.data-\[unavailable\]\:cursor-not-allowed[data-unavailable]{cursor:not-allowed}.data-\[unavailable\]\:text-muted-foreground[data-unavailable]{color:var(--color-muted-foreground,var(--alfred-ink-500))}.data-\[unavailable\]\:line-through[data-unavailable]{text-decoration-line:line-through}@media (prefers-reduced-motion:no-preference){.motion-safe\:animate-pulse{animation:var(--animate-pulse,pulse 2s cubic-bezier(.4, 0, .6, 1) infinite)}.motion-safe\:animate-spin{animation:var(--animate-spin,spin .8s linear infinite)}.motion-safe\:transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.motion-safe\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.motion-safe\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.motion-safe\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.motion-safe\:duration-\(--duration-base\){--tw-duration:var(--duration-base);transition-duration:var(--duration-base)}.motion-safe\:duration-\(--duration-fast\){--tw-duration:var(--duration-fast);transition-duration:var(--duration-fast)}.motion-safe\:ease-standard{--tw-ease:var(--ease-standard,cubic-bezier(.22, .61, .36, 1));transition-timing-function:var(--ease-standard,cubic-bezier(.22, .61, .36, 1))}}@media (min-width:30rem){.sm\:flex-row{flex-direction:row}.sm\:items-start{align-items:flex-start}}@media (min-width:48rem){.md\:text-sm{font-size:var(--text-sm,.875rem)}}.rtl\:-scale-x-100:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-scale-x:calc(100% * -1);scale:var(--tw-scale-x) var(--tw-scale-y)}.rtl\:group-data-\[selected\]\:-translate-x-4:where(:dir(rtl),[dir=rtl],[dir=rtl] *):is(:where(.group)[data-selected] *){--tw-translate-x:calc(var(--spacing,.25rem) * -4);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[expanded\]\:\[\&_\[data-slot\=accordion-trigger\]_svg\]\:rotate-180[data-expanded] [data-slot=accordion-trigger] svg{rotate:180deg}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\]\:text-muted-foreground svg{color:var(--color-muted-foreground,var(--alfred-ink-500))}@media (prefers-reduced-motion:no-preference){.\[\&_svg\]\:motion-safe\:transition-transform svg{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.\[\&_svg\]\:motion-safe\:duration-\(--duration-fast\) svg{--tw-duration:var(--duration-fast);transition-duration:var(--duration-fast)}}.\[\&_svg\]\:rtl\:-scale-x-100 svg:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-scale-x:calc(100% * -1);scale:var(--tw-scale-x) var(--tw-scale-y)}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--icon-sm\) svg:not([class*=size-]){width:var(--icon-sm);height:var(--icon-sm)}.\[\&_tr\]\:border-b tr{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.\[\.border-b\]\:pb-6.border-b{padding-bottom:calc(var(--spacing,.25rem) * 6)}.\[\.border-t\]\:pt-6.border-t{padding-top:calc(var(--spacing,.25rem) * 6)}.\[\&\:nth-child\(even\)\]\:bg-row-stripe:nth-child(2n){background-color:var(--color-row-stripe,var(--alfred-gray-50))}.\[\&\>svg\]\:pointer-events-none>svg{pointer-events:none}.\[\&\>svg\]\:absolute>svg{position:absolute}.\[\&\>svg\]\:top-4>svg{top:calc(var(--spacing,.25rem) * 4)}.\[\&\>svg\]\:left-4>svg{left:calc(var(--spacing,.25rem) * 4)}.\[\&\>svg\]\:size-3>svg{width:calc(var(--spacing,.25rem) * 3);height:calc(var(--spacing,.25rem) * 3)}.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div{--tw-translate-y:-3px;translate:var(--tw-translate-x) var(--tw-translate-y)}.\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--icon-sm\)>svg:not([class*=size-]){width:var(--icon-sm);height:var(--icon-sm)}.\[\&\>svg\~\*\]\:pl-7>svg~*{padding-left:calc(var(--spacing,.25rem) * 7)}}@layer alfred.utilities.patterns,alfred.utilities.charts,alfred.utilities.ai;@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-scrollbar-thumb{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-scrollbar-track{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seekalfred/primitives",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "license": "MIT",
   "description": "Accessible, styled primitives built on React Aria Components.",
@@ -154,7 +154,7 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@seekalfred/tokens": "^0.3.0",
+    "@seekalfred/tokens": "^0.4.0",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "tailwind-merge": "3.6.0"
@@ -162,7 +162,7 @@
   "devDependencies": {
     "@arethetypeswrong/cli": "0.18.5",
     "@internationalized/date": "3.12.4",
-    "@seekalfred/styles": "^0.3.0",
+    "@seekalfred/styles": "^0.4.0",
     "@seekalfred/tsconfig": "0.0.0",
     "@size-limit/preset-small-lib": "13.0.3",
     "@storybook/react-vite": "10.6.0",