@seekalfred/primitives 0.4.0 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/alert/alert.d.ts +1 -1
- package/dist/badge/badge.d.ts +1 -1
- package/dist/button/button.d.ts +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +2 -2
- package/dist/input/input.d.ts +1 -1
- package/dist/input/input.js +4 -2
- package/dist/input/input.js.map +1 -1
- package/dist/lib/cn.d.ts +55 -5
- package/dist/lib/cn.js +64 -6
- package/dist/lib/cn.js.map +1 -1
- package/dist/progress/progress.js +3 -3
- package/dist/progress/progress.js.map +1 -1
- package/dist/radio-group/radio-group.js +2 -2
- package/dist/radio-group/radio-group.js.map +1 -1
- package/dist/select/select.js +2 -2
- package/dist/select/select.js.map +1 -1
- package/dist/sheet/sheet.js +3 -2
- package/dist/sheet/sheet.js.map +1 -1
- package/dist/slider/slider.js +2 -2
- package/dist/slider/slider.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/table/table.js +14 -14
- package/dist/table/table.js.map +1 -1
- package/package.json +3 -3
package/dist/sheet/sheet.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sheet.js","names":[],"sources":["../../src/sheet/sheet.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\n\nimport { Button } from \"../button/button.js\";\nimport { Dialog, type DialogProps } from \"../dialog/dialog.js\";\nimport { ScrollArea } from \"../scroll-area/scroll-area.js\";\n\n/**\n * Sheet: a dialog that arrives from an edge.\n *\n * A PRESET over `Dialog`, like `AlertDialog`. The legacy `sheet.tsx` is\n * `@radix-ui/react-dialog` again -- the same import, the same parts, the\n * same close button -- with one prop changing where it sits. Keeping a\n * second copy is how the legacy `dialog.tsx` and `alert-dialog.tsx`\n * drifted, and this is the same file for the third time.\n *\n * Census: 2 files, 3 uses. `side=\"right\"` twice, `side=\"left\"` once, and\n * `className` four times. `SheetHeader`, `SheetFooter`, `SheetTitle`,\n * `SheetDescription` and `SheetClose` are exported by the legacy and used\n * by NOBODY -- so all three sheets in the app render a `role=\"dialog\"`\n * with no title at all. Radix even warns about it in the console.\n *\n * `title` is required here, inherited from Dialog, so that is no longer\n * expressible.\n *\n * `side` is `\"left\" | \"right\"` only. The legacy also offers `\"top\"` and\n * `\"bottom\"`; both have zero call sites, and each is two lines to add the\n * day something needs one.\n *\n * A REAL BUG THE PORT FIXES: the legacy panel is `w-3/4 sm:max-w-sm`, and\n * `sm:max-w-sm` names `--container-sm`, which this repo does not define --\n * so in Alfred it would compile to NOTHING and the sheet would be 75% of\n * the viewport at every width, on a phone and on a 4K monitor alike. The\n * width here is a spacing-scale step that actually resolves.\n *\n * NOT PORTED: the slide-in animation. It comes from tailwindcss-animate,\n * which this repo does not ship. React Aria exposes `data-entering` and\n * `data-exiting`, and `--animate-*` tokens now exist, so it is a small\n * follow-up rather than a blocker.\n */\nexport const sheetOverlayVariants = cva(\"p-0\", {\n variants: {\n // The overlay is a flex box centring the panel. A sheet replaces that\n // centring with an edge alignment rather than positioning the panel\n // absolutely, so the scrim and the panel stay one layout.\n side: {\n left: \"justify-start items-stretch\",\n right: \"justify-end items-stretch\",\n },\n },\n defaultVariants: { side: \"right\" },\n});\n\nexport const sheetPanelVariants = cva(\n [\n // max-w-96 is 384px and RESOLVES. See the note above on sm:max-w-sm.\n \"h-full w-full max-w-96\",\n // Square against the edge it is attached to: a rounded corner flush\n // with the viewport edge reads as a rendering fault.\n \"rounded-none\",\n \"max-h-full overflow-y-auto\",\n ],\n {\n variants: {\n side: {\n left: \"border-y-0 border-s-0\",\n right: \"border-y-0 border-e-0\",\n },\n },\n defaultVariants: { side: \"right\" },\n },\n);\n\n/**\n * A panel that arrives from the side.\n *\n * @example\n * <Sheet isOpen={open} onOpenChange={setOpen} title=\"Filters\">\n * ...\n * </Sheet>\n */\nexport interface SheetProps extends Omit<DialogProps, \"overlayClassName\"> {\n /**\n * Which edge it is attached to.\n *\n * `\"top\"` and `\"bottom\"` exist in the legacy and have zero call sites.\n *\n * @default \"right\"\n */\n side?: \"left\" | \"right\";\n /**\n * Show a back control, and what it does.\n *\n * A side panel that goes a level deeper REPLACES its own contents rather\n * than stacking a second modal on top, so the browser's back affordance and\n * the escape key both do the wrong thing -- they close the whole panel\n * instead of returning one level. The product's own note calls this the\n * thing that \"makes items 119 and 120 one change rather than two\".\n */\n onBack?: () => void;\n /** Accessible name and label for the back control. @default \"Back\" */\n backLabel?: string;\n /**\n * Change this when the panel's contents change, and the body scrolls back\n * to the top.\n *\n * Going a level deeper and landing halfway down the new view is\n * disorienting, and it is the kind of thing every call site forgets --\n * which is why it belongs here rather than in each of them.\n */\n scrollResetKey?: string | number;\n /** Extra classes for the scrolling body region. */\n bodyClassName?: string;\n /**\n * Names the scrolling body region. Defaults to `title` when that is a\n * string, which it is at every call site in the product.\n *\n * The body is a `ScrollArea`, so it is focusable -- a scrollable region that\n * is not reachable by keyboard is WCAG 2.1.1, and axe caught exactly that\n * when this was a plain div. The product's own `SidePanelBody` still is one.\n * A focusable element needs a role and a role needs a name, so this is the\n * only combination that is actually correct.\n */\n bodyLabel?: string;\n}\n\nfunction BackArrowGlyph() {\n return (\n <svg\n aria-hidden=\"true\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n // Logical, so it points the right way once the panel mirrors in RTL.\n className=\"size-(--icon-sm) rtl:-scale-x-100\"\n >\n <path d=\"M10 3 5 8l5 5\" />\n </svg>\n );\n}\n\nexport function Sheet({\n side = \"right\",\n className,\n onBack,\n backLabel = \"Back\",\n scrollResetKey,\n bodyClassName,\n bodyLabel,\n title,\n children,\n ...props\n}: SheetProps) {\n return (\n /*\n No data-slot here. Dialog spreads its props onto the ModalOverlay and\n writes data-slot=\"dialog-overlay\" AFTER the spread, so a data-slot\n passed from here is overwritten before it reaches the DOM -- it read as\n working while rendering nothing. A sheet is identified by its side\n variant and its panel classes instead.\n */\n <Dialog\n {...props}\n title={title}\n beforeTitle={\n onBack ? (\n <Button\n variant=\"ghost\"\n size=\"sm\"\n data-slot=\"sheet-back\"\n className=\"-ms-2 w-fit\"\n startIcon={<BackArrowGlyph />}\n onPress={onBack}\n >\n {backLabel}\n </Button>\n ) : undefined\n }\n overlayClassName={sheetOverlayVariants({ side })}\n className={
|
|
1
|
+
{"version":3,"file":"sheet.js","names":[],"sources":["../../src/sheet/sheet.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\n\nimport { Button } from \"../button/button.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { Dialog, type DialogProps } from \"../dialog/dialog.js\";\nimport { ScrollArea } from \"../scroll-area/scroll-area.js\";\n\n/**\n * Sheet: a dialog that arrives from an edge.\n *\n * A PRESET over `Dialog`, like `AlertDialog`. The legacy `sheet.tsx` is\n * `@radix-ui/react-dialog` again -- the same import, the same parts, the\n * same close button -- with one prop changing where it sits. Keeping a\n * second copy is how the legacy `dialog.tsx` and `alert-dialog.tsx`\n * drifted, and this is the same file for the third time.\n *\n * Census: 2 files, 3 uses. `side=\"right\"` twice, `side=\"left\"` once, and\n * `className` four times. `SheetHeader`, `SheetFooter`, `SheetTitle`,\n * `SheetDescription` and `SheetClose` are exported by the legacy and used\n * by NOBODY -- so all three sheets in the app render a `role=\"dialog\"`\n * with no title at all. Radix even warns about it in the console.\n *\n * `title` is required here, inherited from Dialog, so that is no longer\n * expressible.\n *\n * `side` is `\"left\" | \"right\"` only. The legacy also offers `\"top\"` and\n * `\"bottom\"`; both have zero call sites, and each is two lines to add the\n * day something needs one.\n *\n * A REAL BUG THE PORT FIXES: the legacy panel is `w-3/4 sm:max-w-sm`, and\n * `sm:max-w-sm` names `--container-sm`, which this repo does not define --\n * so in Alfred it would compile to NOTHING and the sheet would be 75% of\n * the viewport at every width, on a phone and on a 4K monitor alike. The\n * width here is a spacing-scale step that actually resolves.\n *\n * NOT PORTED: the slide-in animation. It comes from tailwindcss-animate,\n * which this repo does not ship. React Aria exposes `data-entering` and\n * `data-exiting`, and `--animate-*` tokens now exist, so it is a small\n * follow-up rather than a blocker.\n */\nexport const sheetOverlayVariants = cva(\"p-0\", {\n variants: {\n // The overlay is a flex box centring the panel. A sheet replaces that\n // centring with an edge alignment rather than positioning the panel\n // absolutely, so the scrim and the panel stay one layout.\n side: {\n left: \"justify-start items-stretch\",\n right: \"justify-end items-stretch\",\n },\n },\n defaultVariants: { side: \"right\" },\n});\n\nexport const sheetPanelVariants = cva(\n [\n // max-w-96 is 384px and RESOLVES. See the note above on sm:max-w-sm.\n \"h-full w-full max-w-96\",\n // Square against the edge it is attached to: a rounded corner flush\n // with the viewport edge reads as a rendering fault.\n \"rounded-none\",\n \"max-h-full overflow-y-auto\",\n ],\n {\n variants: {\n side: {\n left: \"border-y-0 border-s-0\",\n right: \"border-y-0 border-e-0\",\n },\n },\n defaultVariants: { side: \"right\" },\n },\n);\n\n/**\n * A panel that arrives from the side.\n *\n * @example\n * <Sheet isOpen={open} onOpenChange={setOpen} title=\"Filters\">\n * ...\n * </Sheet>\n */\nexport interface SheetProps extends Omit<DialogProps, \"overlayClassName\"> {\n /**\n * Which edge it is attached to.\n *\n * `\"top\"` and `\"bottom\"` exist in the legacy and have zero call sites.\n *\n * @default \"right\"\n */\n side?: \"left\" | \"right\";\n /**\n * Show a back control, and what it does.\n *\n * A side panel that goes a level deeper REPLACES its own contents rather\n * than stacking a second modal on top, so the browser's back affordance and\n * the escape key both do the wrong thing -- they close the whole panel\n * instead of returning one level. The product's own note calls this the\n * thing that \"makes items 119 and 120 one change rather than two\".\n */\n onBack?: () => void;\n /** Accessible name and label for the back control. @default \"Back\" */\n backLabel?: string;\n /**\n * Change this when the panel's contents change, and the body scrolls back\n * to the top.\n *\n * Going a level deeper and landing halfway down the new view is\n * disorienting, and it is the kind of thing every call site forgets --\n * which is why it belongs here rather than in each of them.\n */\n scrollResetKey?: string | number;\n /** Extra classes for the scrolling body region. */\n bodyClassName?: string;\n /**\n * Names the scrolling body region. Defaults to `title` when that is a\n * string, which it is at every call site in the product.\n *\n * The body is a `ScrollArea`, so it is focusable -- a scrollable region that\n * is not reachable by keyboard is WCAG 2.1.1, and axe caught exactly that\n * when this was a plain div. The product's own `SidePanelBody` still is one.\n * A focusable element needs a role and a role needs a name, so this is the\n * only combination that is actually correct.\n */\n bodyLabel?: string;\n}\n\nfunction BackArrowGlyph() {\n return (\n <svg\n aria-hidden=\"true\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n // Logical, so it points the right way once the panel mirrors in RTL.\n className=\"size-(--icon-sm) rtl:-scale-x-100\"\n >\n <path d=\"M10 3 5 8l5 5\" />\n </svg>\n );\n}\n\nexport function Sheet({\n side = \"right\",\n className,\n onBack,\n backLabel = \"Back\",\n scrollResetKey,\n bodyClassName,\n bodyLabel,\n title,\n children,\n ...props\n}: SheetProps) {\n return (\n /*\n No data-slot here. Dialog spreads its props onto the ModalOverlay and\n writes data-slot=\"dialog-overlay\" AFTER the spread, so a data-slot\n passed from here is overwritten before it reaches the DOM -- it read as\n working while rendering nothing. A sheet is identified by its side\n variant and its panel classes instead.\n */\n <Dialog\n {...props}\n title={title}\n beforeTitle={\n onBack ? (\n <Button\n variant=\"ghost\"\n size=\"sm\"\n data-slot=\"sheet-back\"\n className=\"-ms-2 w-fit\"\n startIcon={<BackArrowGlyph />}\n onPress={onBack}\n >\n {backLabel}\n </Button>\n ) : undefined\n }\n overlayClassName={sheetOverlayVariants({ side })}\n className={cn(sheetPanelVariants({ side }), className)}\n >\n {/*\n The scrolling region is its own element so the title and the back\n control stay put while the content moves. A panel that scrolled as one\n block would take its own heading off screen.\n */}\n {/*\n No data-slot=\"sheet-body\" here, for the same reason the overlay has\n none: ScrollArea spreads its props and writes data-slot=\"scroll-area\"\n AFTER the spread, so one passed from here is overwritten before it\n reaches the DOM. It read as wired while selecting nothing.\n */}\n <ScrollArea\n scrollResetKey={scrollResetKey}\n label={bodyLabel ?? (typeof title === \"string\" ? title : \"\")}\n className={cn(\"min-h-0 flex-1\", bodyClassName)}\n >\n {children}\n </ScrollArea>\n </Dialog>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,MAAa,uBAAuB,IAAI,OAAO;CAC7C,UAAU,EAIR,MAAM;EACJ,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EAAE,MAAM,QAAQ;AACnC,CAAC;AAED,MAAa,qBAAqB,IAChC;CAEE;CAGA;CACA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EAAE,MAAM,QAAQ;AACnC,CACF;AAuDA,SAAS,iBAAiB;CACxB,OACE,oBAAC,OAAD;EACE,eAAY;EACZ,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAY;EACZ,eAAc;EACd,gBAAe;EAEf,WAAU;EAEV,UAAA,oBAAC,QAAD,EAAM,GAAE,gBAAiB,CAAA;CACtB,CAAA;AAET;AAEA,SAAgB,MAAM,EACpB,OAAO,SACP,WACA,QACA,YAAY,QACZ,gBACA,eACA,WACA,OACA,UACA,GAAG,SACU;CACb,OAQE,oBAAC,QAAD;EACE,GAAI;EACG;EACP,aACE,SACE,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,aAAU;GACV,WAAU;GACV,WAAW,oBAAC,gBAAD,CAAiB,CAAA;GAC5B,SAAS;GAER,UAAA;EACK,CAAA,IACN,KAAA;EAEN,kBAAkB,qBAAqB,EAAE,KAAK,CAAC;EAC/C,WAAW,GAAG,mBAAmB,EAAE,KAAK,CAAC,GAAG,SAAS;EAarD,UAAA,oBAAC,YAAD;GACkB;GAChB,OAAO,cAAc,OAAO,UAAU,WAAW,QAAQ;GACzD,WAAW,GAAG,kBAAkB,aAAa;GAE5C;EACS,CAAA;CACN,CAAA;AAEZ"}
|
package/dist/slider/slider.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { cn } from "../lib/cn.js";
|
|
2
|
+
import { cn, cnAll } from "../lib/cn.js";
|
|
3
3
|
import { cva } from "class-variance-authority";
|
|
4
4
|
import { Label, Slider, SliderOutput, SliderThumb, SliderTrack } from "react-aria-components";
|
|
5
5
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -56,7 +56,7 @@ function Slider$1({ label, labelHidden, showValue = true, className, ...props })
|
|
|
56
56
|
"data-slot": "slider",
|
|
57
57
|
className: cn(sliderVariants(), className),
|
|
58
58
|
children: [/* @__PURE__ */ jsxs("div", {
|
|
59
|
-
className:
|
|
59
|
+
className: cnAll("flex items-center justify-between gap-2", labelHidden && "sr-only"),
|
|
60
60
|
children: [/* @__PURE__ */ jsx(Label, {
|
|
61
61
|
"data-slot": "slider-label",
|
|
62
62
|
className: "text-sm leading-(--leading-normal) text-foreground",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider.js","names":["Slider","AriaSlider","AriaLabel","AriaSliderOutput","AriaSliderTrack","AriaSliderThumb"],"sources":["../../src/slider/slider.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport {\n Label as AriaLabel,\n Slider as AriaSlider,\n SliderOutput as AriaSliderOutput,\n SliderThumb as AriaSliderThumb,\n SliderTrack as AriaSliderTrack,\n type SliderProps as AriaSliderProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Slider, ported from the legacy shadcn/Radix component.\n *\n * Census: 4 call sites, all single-thumb, none of them named. Radix only\n * generates thumb labels at two or more thumbs, so all four are announced\n * as an unnamed slider -- `AudioSettings.tsx` even renders a\n * `<Label>Input Volume</Label>` directly above one, with no `htmlFor` and\n * no `id`, so it is associated with nothing at all.\n *\n * `label` IS REQUIRED here, the same answer Progress and Dialog give.\n *\n * THE PALETTE DELIBERATELY DOES NOT MATCH SWITCH, and the reason is worth\n * stating because the two look like the same problem. A Switch has no\n * fill: its track is one colour and the thumb tells you the state, so\n * `border` unchecked and `primary-strong` checked works. A Slider has a\n * filled portion whose LENGTH is the value -- and `primary-strong` on a\n * `border` track is 1.01:1. The two halves would be the same grey and the\n * value would be invisible to anyone not reading the thumb position.\n *\n * So the track is `muted` with a `border` boundary and the fill is\n * `primary-strong`: fill against track 4.61:1, track against page 5.25:1,\n * thumb against fill 5.20:1, thumb edge against track 4.65:1. All four\n * pairs are in the build-failing contrast contract.\n *\n * Three legacy defects go with it: the focus ring was `ring-1`, a 1px\n * box-shadow that forced-colors discards entirely; the thumb border was\n * `border-primary/50`, an alpha edge with no measurable contrast; and the\n * disabled styling used `disabled:`, a pseudo-class that only applies to\n * form elements -- Radix renders a `<span role=\"slider\">`, so a disabled\n * slider looked exactly like an enabled one.\n */\nexport const sliderVariants = cva([\"flex w-full flex-col gap-2 box-border font-sans\"]);\n\nexport const sliderTrackVariants = cva([\n \"relative flex w-full items-center\",\n // h-6 is the TRACK ROW, not the visible bar -- it gives the 24px\n // pointer target WCAG 2.5.8 wants. The bar itself is drawn inside.\n \"h-6\",\n]);\n\nexport const sliderBarVariants = cva([\n \"absolute h-2 w-full rounded-pill box-border\",\n \"bg-muted border-(length:--border-width) border-border\",\n]);\n\nexport const sliderFillVariants = cva([\"absolute h-2 rounded-pill bg-primary-strong\"]);\n\nexport const sliderThumbVariants = cva([\n // size-6 is 24px: WCAG 2.5.8 target size. The legacy thumb was 16px at\n // all four call sites, and one of them crams the whole control into 80px.\n \"size-6 rounded-full box-border\",\n \"bg-background border-(length:--border-width) border-border shadow-surface\",\n \"cursor-grab data-[dragging]:cursor-grabbing\",\n // A real outline, not the legacy ring-1 box-shadow.\n \"outline-none\",\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], NOT disabled:. The legacy used the CSS :disabled\n // pseudo-class, which applies only to form elements -- React Aria and\n // Radix both render a span, so that styling never fired.\n \"data-[disabled]:cursor-not-allowed\",\n]);\n\n/**\n * A value along a range.\n *\n * @example\n * <Slider label=\"Input volume\" defaultValue={40} />\n * <Slider label=\"Playback position\" value={t} onChange={seek} formatOptions={{ style: \"percent\" }} />\n */\nexport interface SliderProps\n extends Omit<AriaSliderProps<number>, \"className\" | \"style\" | \"children\"> {\n /**\n * What the slider controls, and its accessible name.\n *\n * **Required.** All four legacy call sites are unnamed sliders.\n */\n label: ReactNode;\n /** Render the label for screen readers only. */\n labelHidden?: boolean;\n /**\n * Show the current value as text beside the label.\n *\n * On by default. It is the text equivalent of the fill length, which\n * matters because in greyscale the filled and unfilled halves are\n * distinguishable only by the thumb.\n */\n showValue?: boolean;\n /** Extra classes. Merged last, so they win conflicts with ours. */\n className?: string;\n}\n\nexport function Slider({\n label,\n labelHidden,\n showValue = true,\n className,\n ...props\n}: SliderProps) {\n return (\n <AriaSlider {...props} data-slot=\"slider\" className={cn(sliderVariants(), className)}>\n <div className={
|
|
1
|
+
{"version":3,"file":"slider.js","names":["Slider","AriaSlider","AriaLabel","AriaSliderOutput","AriaSliderTrack","AriaSliderThumb"],"sources":["../../src/slider/slider.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport {\n Label as AriaLabel,\n Slider as AriaSlider,\n SliderOutput as AriaSliderOutput,\n SliderThumb as AriaSliderThumb,\n SliderTrack as AriaSliderTrack,\n type SliderProps as AriaSliderProps,\n} from \"react-aria-components\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\n\n/**\n * Slider, ported from the legacy shadcn/Radix component.\n *\n * Census: 4 call sites, all single-thumb, none of them named. Radix only\n * generates thumb labels at two or more thumbs, so all four are announced\n * as an unnamed slider -- `AudioSettings.tsx` even renders a\n * `<Label>Input Volume</Label>` directly above one, with no `htmlFor` and\n * no `id`, so it is associated with nothing at all.\n *\n * `label` IS REQUIRED here, the same answer Progress and Dialog give.\n *\n * THE PALETTE DELIBERATELY DOES NOT MATCH SWITCH, and the reason is worth\n * stating because the two look like the same problem. A Switch has no\n * fill: its track is one colour and the thumb tells you the state, so\n * `border` unchecked and `primary-strong` checked works. A Slider has a\n * filled portion whose LENGTH is the value -- and `primary-strong` on a\n * `border` track is 1.01:1. The two halves would be the same grey and the\n * value would be invisible to anyone not reading the thumb position.\n *\n * So the track is `muted` with a `border` boundary and the fill is\n * `primary-strong`: fill against track 4.61:1, track against page 5.25:1,\n * thumb against fill 5.20:1, thumb edge against track 4.65:1. All four\n * pairs are in the build-failing contrast contract.\n *\n * Three legacy defects go with it: the focus ring was `ring-1`, a 1px\n * box-shadow that forced-colors discards entirely; the thumb border was\n * `border-primary/50`, an alpha edge with no measurable contrast; and the\n * disabled styling used `disabled:`, a pseudo-class that only applies to\n * form elements -- Radix renders a `<span role=\"slider\">`, so a disabled\n * slider looked exactly like an enabled one.\n */\nexport const sliderVariants = cva([\"flex w-full flex-col gap-2 box-border font-sans\"]);\n\nexport const sliderTrackVariants = cva([\n \"relative flex w-full items-center\",\n // h-6 is the TRACK ROW, not the visible bar -- it gives the 24px\n // pointer target WCAG 2.5.8 wants. The bar itself is drawn inside.\n \"h-6\",\n]);\n\nexport const sliderBarVariants = cva([\n \"absolute h-2 w-full rounded-pill box-border\",\n \"bg-muted border-(length:--border-width) border-border\",\n]);\n\nexport const sliderFillVariants = cva([\"absolute h-2 rounded-pill bg-primary-strong\"]);\n\nexport const sliderThumbVariants = cva([\n // size-6 is 24px: WCAG 2.5.8 target size. The legacy thumb was 16px at\n // all four call sites, and one of them crams the whole control into 80px.\n \"size-6 rounded-full box-border\",\n \"bg-background border-(length:--border-width) border-border shadow-surface\",\n \"cursor-grab data-[dragging]:cursor-grabbing\",\n // A real outline, not the legacy ring-1 box-shadow.\n \"outline-none\",\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], NOT disabled:. The legacy used the CSS :disabled\n // pseudo-class, which applies only to form elements -- React Aria and\n // Radix both render a span, so that styling never fired.\n \"data-[disabled]:cursor-not-allowed\",\n]);\n\n/**\n * A value along a range.\n *\n * @example\n * <Slider label=\"Input volume\" defaultValue={40} />\n * <Slider label=\"Playback position\" value={t} onChange={seek} formatOptions={{ style: \"percent\" }} />\n */\nexport interface SliderProps\n extends Omit<AriaSliderProps<number>, \"className\" | \"style\" | \"children\"> {\n /**\n * What the slider controls, and its accessible name.\n *\n * **Required.** All four legacy call sites are unnamed sliders.\n */\n label: ReactNode;\n /** Render the label for screen readers only. */\n labelHidden?: boolean;\n /**\n * Show the current value as text beside the label.\n *\n * On by default. It is the text equivalent of the fill length, which\n * matters because in greyscale the filled and unfilled halves are\n * distinguishable only by the thumb.\n */\n showValue?: boolean;\n /** Extra classes. Merged last, so they win conflicts with ours. */\n className?: string;\n}\n\nexport function Slider({\n label,\n labelHidden,\n showValue = true,\n className,\n ...props\n}: SliderProps) {\n return (\n <AriaSlider {...props} data-slot=\"slider\" className={cn(sliderVariants(), className)}>\n <div className={cnAll(\"flex items-center justify-between gap-2\", labelHidden && \"sr-only\")}>\n <AriaLabel\n data-slot=\"slider-label\"\n className=\"text-sm leading-(--leading-normal) text-foreground\"\n >\n {label}\n </AriaLabel>\n {showValue ? (\n <AriaSliderOutput\n data-slot=\"slider-output\"\n className=\"text-sm leading-(--leading-normal) text-muted-foreground\"\n />\n ) : null}\n </div>\n\n <AriaSliderTrack data-slot=\"slider-track\" className={sliderTrackVariants()}>\n {({ state }) => (\n <>\n <div data-slot=\"slider-bar\" className={sliderBarVariants()} />\n <div\n data-slot=\"slider-fill\"\n className={sliderFillVariants()}\n style={{ width: `${state.getThumbPercent(0) * 100}%` }}\n />\n <AriaSliderThumb data-slot=\"slider-thumb\" className={sliderThumbVariants()} />\n </>\n )}\n </AriaSliderTrack>\n </AriaSlider>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAa,iBAAiB,IAAI,CAAC,iDAAiD,CAAC;AAErF,MAAa,sBAAsB,IAAI,CACrC,qCAGA,KACF,CAAC;AAED,MAAa,oBAAoB,IAAI,CACnC,+CACA,uDACF,CAAC;AAED,MAAa,qBAAqB,IAAI,CAAC,6CAA6C,CAAC;AAErF,MAAa,sBAAsB,IAAI;CAGrC;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAIA;AACF,CAAC;AA+BD,SAAgBA,SAAO,EACrB,OACA,aACA,YAAY,MACZ,WACA,GAAG,SACW;CACd,OACE,qBAACC,QAAD;EAAY,GAAI;EAAO,aAAU;EAAS,WAAW,GAAG,eAAe,GAAG,SAAS;EAAnF,UAAA,CACE,qBAAC,OAAD;GAAK,WAAW,MAAM,2CAA2C,eAAe,SAAS;GAAzF,UAAA,CACE,oBAACC,OAAD;IACE,aAAU;IACV,WAAU;IAET,UAAA;GACQ,CAAA,GACV,YACC,oBAACC,cAAD;IACE,aAAU;IACV,WAAU;GACX,CAAA,IACC,IACD;EAEL,CAAA,GAAA,oBAACC,aAAD;GAAiB,aAAU;GAAe,WAAW,oBAAoB;GACrE,WAAA,EAAE,YACF,qBAAA,UAAA,EAAA,UAAA;IACE,oBAAC,OAAD;KAAK,aAAU;KAAa,WAAW,kBAAkB;IAAI,CAAA;IAC7D,oBAAC,OAAD;KACE,aAAU;KACV,WAAW,mBAAmB;KAC9B,OAAO,EAAE,OAAO,GAAG,MAAM,gBAAgB,CAAC,IAAI,IAAI,GAAG;IACtD,CAAA;IACD,oBAACC,aAAD;KAAiB,aAAU;KAAe,WAAW,oBAAoB;IAAI,CAAA;GAC7E,EAAA,CAAA;EAEW,CAAA,CACP;;AAEhB"}
|
package/dist/styles.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@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}
|
|
2
|
+
@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-2{padding:calc(var(--spacing,.25rem) * 2)}.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/dist/table/table.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { cn } from "../lib/cn.js";
|
|
2
|
+
import { cn, cnAll } from "../lib/cn.js";
|
|
3
3
|
import { Button as Button$1 } from "../button/button.js";
|
|
4
4
|
import { Select as Select$1, SelectItem } from "../select/select.js";
|
|
5
5
|
import { cva } from "class-variance-authority";
|
|
@@ -354,10 +354,10 @@ function Table$1({ data, columns, getRowId, variant, sortDescriptor, defaultSort
|
|
|
354
354
|
if (hasWidths) tableStyle.tableLayout = "fixed";
|
|
355
355
|
return /* @__PURE__ */ jsxs("div", {
|
|
356
356
|
"data-slot": "table-card",
|
|
357
|
-
className:
|
|
357
|
+
className: cnAll(tableCardVariants({ frame })),
|
|
358
358
|
children: [/* @__PURE__ */ jsx("div", {
|
|
359
359
|
"data-slot": "table-scroll",
|
|
360
|
-
className:
|
|
360
|
+
className: cnAll(tableScrollVariants()),
|
|
361
361
|
children: /* @__PURE__ */ jsxs(Table, {
|
|
362
362
|
...props,
|
|
363
363
|
"data-slot": "table",
|
|
@@ -376,13 +376,13 @@ function Table$1({ data, columns, getRowId, variant, sortDescriptor, defaultSort
|
|
|
376
376
|
children: [
|
|
377
377
|
/* @__PURE__ */ jsxs(TableHeader, {
|
|
378
378
|
"data-slot": "table-header",
|
|
379
|
-
className:
|
|
379
|
+
className: cnAll(tableHeaderVariants({ headerFill })),
|
|
380
380
|
children: [columns.map((column) => /* @__PURE__ */ jsxs(Column, {
|
|
381
381
|
id: column.id,
|
|
382
382
|
isRowHeader: column === columns[0],
|
|
383
383
|
allowsSorting: column.sortable,
|
|
384
384
|
"data-slot": "table-column",
|
|
385
|
-
className:
|
|
385
|
+
className: cnAll(tableColumnVariants({
|
|
386
386
|
align: column.align ?? (column.numeric ? "end" : void 0),
|
|
387
387
|
headerType
|
|
388
388
|
})),
|
|
@@ -391,7 +391,7 @@ function Table$1({ data, columns, getRowId, variant, sortDescriptor, defaultSort
|
|
|
391
391
|
}, column.id)), onRowAction ? /* @__PURE__ */ jsx(Column, {
|
|
392
392
|
id: CHEVRON_COLUMN_ID,
|
|
393
393
|
"data-slot": "table-column",
|
|
394
|
-
className:
|
|
394
|
+
className: cnAll(tableColumnVariants({ headerType }), CHEVRON_CELL),
|
|
395
395
|
children: ""
|
|
396
396
|
}) : null]
|
|
397
397
|
}),
|
|
@@ -402,15 +402,15 @@ function Table$1({ data, columns, getRowId, variant, sortDescriptor, defaultSort
|
|
|
402
402
|
id: getRowId(row),
|
|
403
403
|
"data-slot": "table-row",
|
|
404
404
|
"data-highlighted": isRowHighlighted?.(row) || void 0,
|
|
405
|
-
className: cn(tableRowVariants({
|
|
405
|
+
className: cn(cnAll(tableRowVariants({
|
|
406
406
|
variant,
|
|
407
407
|
striped
|
|
408
|
-
}), onRowAction && "cursor-pointer", rowClassName?.(row)),
|
|
408
|
+
}), onRowAction && "cursor-pointer"), rowClassName?.(row)),
|
|
409
409
|
children: [columns.map((column) => {
|
|
410
410
|
const value = column.accessor(row);
|
|
411
411
|
return /* @__PURE__ */ jsx(Cell, {
|
|
412
412
|
"data-slot": "table-cell",
|
|
413
|
-
className:
|
|
413
|
+
className: cnAll(tableCellVariants({
|
|
414
414
|
align: column.align ?? (column.numeric ? "end" : void 0),
|
|
415
415
|
numeric: column.numeric
|
|
416
416
|
})),
|
|
@@ -422,26 +422,26 @@ function Table$1({ data, columns, getRowId, variant, sortDescriptor, defaultSort
|
|
|
422
422
|
}, column.id);
|
|
423
423
|
}), onRowAction ? /* @__PURE__ */ jsx(Cell, {
|
|
424
424
|
"data-slot": "table-cell",
|
|
425
|
-
className:
|
|
425
|
+
className: cnAll(tableCellVariants(), CHEVRON_CELL),
|
|
426
426
|
children: /* @__PURE__ */ jsx(RowChevronGlyph, {})
|
|
427
427
|
}) : null]
|
|
428
428
|
}, String(getRowId(row))))
|
|
429
429
|
}),
|
|
430
430
|
totalRow ? /* @__PURE__ */ jsx(TableFooter, {
|
|
431
431
|
"data-slot": "table-footer",
|
|
432
|
-
className:
|
|
432
|
+
className: cnAll(tableFooterVariants()),
|
|
433
433
|
children: /* @__PURE__ */ jsxs(Row, {
|
|
434
434
|
id: "__table_total",
|
|
435
435
|
children: [columns.map((col) => /* @__PURE__ */ jsx(Cell, {
|
|
436
436
|
"data-slot": "table-cell",
|
|
437
|
-
className:
|
|
437
|
+
className: cnAll(tableCellVariants({
|
|
438
438
|
align: col.align ?? (col.numeric ? "end" : void 0),
|
|
439
439
|
numeric: col.numeric
|
|
440
440
|
})),
|
|
441
441
|
children: totalRow(col)
|
|
442
442
|
}, col.id)), onRowAction ? /* @__PURE__ */ jsx(Cell, {
|
|
443
443
|
"data-slot": "table-cell",
|
|
444
|
-
className:
|
|
444
|
+
className: cnAll(tableCellVariants(), CHEVRON_CELL),
|
|
445
445
|
children: ""
|
|
446
446
|
}) : null]
|
|
447
447
|
})
|
|
@@ -451,7 +451,7 @@ function Table$1({ data, columns, getRowId, variant, sortDescriptor, defaultSort
|
|
|
451
451
|
}), rowsPerPage === void 0 || pageCount <= 1 && !pageSizeOptions ? null : /* @__PURE__ */ jsxs("nav", {
|
|
452
452
|
"data-slot": "table-pagination",
|
|
453
453
|
"aria-label": `${props["aria-label"]} pagination`,
|
|
454
|
-
className:
|
|
454
|
+
className: cnAll(tablePaginationVariants()),
|
|
455
455
|
children: [/* @__PURE__ */ jsx("div", {
|
|
456
456
|
"data-slot": "table-pagination-pages",
|
|
457
457
|
className: "flex items-center gap-1",
|