@api7/ui-components 0.3.0 → 0.4.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/README.md CHANGED
@@ -177,7 +177,25 @@ The parts are the direct children of the group, in any order. An `InputGroupAddo
177
177
 
178
178
  ## Theming
179
179
 
180
- Theme colors, radii and the font are CSS variables with the `--asu-` prefix, for example `--asu-primary`. Override them on `:root` to change the palette. Only a light theme ships. The stylesheet also reads `[data-theme=dark]`, so a dark palette can be supplied by an application that sets those variables on that selector.
180
+ Theme colors, radii and the font are CSS variables with the `--asu-` prefix, for example `--asu-primary`. The light values are defined on `:root, [data-theme=light]` and the dark values on `[data-theme=dark]`. To change the palette, override the variables on those selectors in a stylesheet that comes after the library stylesheet, because the selectors have the same specificity and the later rule wins.
181
+
182
+ ### Dark mode
183
+
184
+ Set `data-theme="dark"` on `<html>` and every component renders dark, including popups, dialogs, drawers and toasts, because they are rendered into `<body>` and inherit from `<html>`. Without the attribute, or with any value other than `dark`, the light theme applies. Removing the attribute or changing its value restyles the page at once, there is no library state to keep in step.
185
+
186
+ The library only reads the attribute. It never follows `prefers-color-scheme`, never stores anything and never writes to `document`, so an application without a dark design does not turn dark because a visitor's browser prefers it. Choosing the theme, remembering it and following the system, if the application wants that, are the application's job. With [next-themes](https://github.com/pacocoursey/next-themes) it is `<ThemeProvider attribute="data-theme" defaultTheme="light" enableSystem={false}>`, and the same works with any code that sets the attribute.
187
+
188
+ `color-scheme` follows the theme as well, so scrollbars and native form controls match.
189
+
190
+ #### A region with another theme
191
+
192
+ `data-theme="light"` or `data-theme="dark"` on any element sets the color variables and the `color-scheme` of everything inside it, and the nearest ancestor wins, so a dark page can hold a light region and the other way round. This works for the color variables and for the `dark:` styles of components alike. The one case plain CSS cannot express is a dark element inside a light element inside a dark element: the innermost dark element is read as light in the `dark:` styles, though its variables are right.
193
+
194
+ The attribute does not paint a background or a text color, so a region that should look like a page of its own needs `bg-background text-foreground` (or your own rules) on it. A popup is rendered into `<body>`, so it follows `<html>`, not the region that opened it. To theme a popup, put the attribute on the popup element itself (`<PopoverContent data-theme="light">`, which works for the content of Popover, Menu, Select, Combobox, Tooltip, Dialog and Drawer, because each passes its props to the popup element), or on an element inside the popup's content, which then applies to what it wraps.
195
+
196
+ #### Writing dark styles in a component
197
+
198
+ A component styles itself with semantic tokens, and each token has a light and a dark value, so most components need nothing for dark mode. When a dark theme needs a different treatment than a token swap, a component may add an `asu:dark:` class, and only together with semantic tokens (`asu:dark:bg-input/30`). A raw palette step behind `asu:dark:` is allowed only in `badge.tsx`, which is the one component that uses palette steps, and each Badge color has its steps for both themes in `BADGE_STEPS` in `src/tokens/contrast.ts`. A brand color has two tokens because a fill and a text color need different lightness in dark: `primary` and `destructive` are fills (with `primary-foreground` on top), while `primary-text` and `destructive-text` are for text and icons on a surface, such as the Button link variant, a selected Tab, error text or the destructive menu item. They equal the fill in light. Prefer a token to `asu:dark:` wherever the token can carry the difference. `src/theme-classes.test.ts` enforces these rules. The values of the dark tokens are in `src/tokens/semantic.ts`, and every text and surface pair of both themes is tested for WCAG AA in `src/tokens/contrast.test.ts`.
181
199
 
182
200
  `className` on a component is passed to its element for your own classes. The library's component rules are not placed in a cascade layer, so styles of yours that are in a layer, such as the utilities of Tailwind CSS, cannot override what a component already sets. Your own rules that are not in a layer compete by specificity and source order as usual, so import the library stylesheet first, as the quick start says, and use a selector that is specific enough.
183
201
 
@@ -8,7 +8,7 @@ const alertVariants = cva("asu:relative asu:flex asu:w-full asu:gap-2 asu:rounde
8
8
  info: "asu:bg-info-subtle asu:[&>svg]:text-info",
9
9
  success: "asu:bg-success-subtle asu:[&>svg]:text-success",
10
10
  warning: "asu:bg-warning-subtle asu:[&>svg]:text-warning",
11
- destructive: "asu:bg-destructive-subtle asu:[&>svg]:text-destructive"
11
+ destructive: "asu:bg-destructive-subtle asu:[&>svg]:text-destructive-text"
12
12
  } },
13
13
  defaultVariants: { variant: "info" }
14
14
  });
@@ -4,17 +4,17 @@ import { cva } from "class-variance-authority";
4
4
  //#region src/components/badge/badge.tsx
5
5
  const badgeVariants = cva("asu:inline-flex asu:min-h-5 asu:max-w-[500px] asu:items-center asu:gap-1.5 asu:rounded-full asu:px-2 asu:text-xs asu:font-medium", {
6
6
  variants: { color: {
7
- gray: "asu:bg-gray-100 asu:text-gray-700",
8
- slate: "asu:bg-slate-100 asu:text-slate-700",
9
- blue: "asu:bg-blue-100 asu:text-blue-700",
10
- green: "asu:bg-green-100 asu:text-green-700",
11
- red: "asu:bg-red-100 asu:text-red-700",
12
- yellow: "asu:bg-yellow-100 asu:text-yellow-700",
13
- orange: "asu:bg-orange-100 asu:text-orange-700",
14
- cyan: "asu:bg-cyan-100 asu:text-cyan-700",
15
- indigo: "asu:bg-indigo-100 asu:text-indigo-700",
16
- purple: "asu:bg-purple-100 asu:text-purple-700",
17
- pink: "asu:bg-pink-100 asu:text-pink-700"
7
+ gray: "asu:bg-gray-100 asu:text-gray-700 asu:dark:bg-gray-700 asu:dark:text-gray-100",
8
+ slate: "asu:bg-slate-100 asu:text-slate-700 asu:dark:bg-slate-700 asu:dark:text-slate-100",
9
+ blue: "asu:bg-blue-100 asu:text-blue-700 asu:dark:bg-blue-700 asu:dark:text-blue-100",
10
+ green: "asu:bg-green-100 asu:text-green-700 asu:dark:bg-green-700 asu:dark:text-green-100",
11
+ red: "asu:bg-red-100 asu:text-red-700 asu:dark:bg-red-700 asu:dark:text-red-100",
12
+ yellow: "asu:bg-yellow-100 asu:text-yellow-700 asu:dark:bg-yellow-700 asu:dark:text-yellow-100",
13
+ orange: "asu:bg-orange-100 asu:text-orange-700 asu:dark:bg-orange-700 asu:dark:text-orange-100",
14
+ cyan: "asu:bg-cyan-100 asu:text-cyan-700 asu:dark:bg-cyan-700 asu:dark:text-cyan-100",
15
+ indigo: "asu:bg-indigo-100 asu:text-indigo-700 asu:dark:bg-indigo-700 asu:dark:text-indigo-100",
16
+ purple: "asu:bg-purple-100 asu:text-purple-700 asu:dark:bg-purple-700 asu:dark:text-purple-100",
17
+ pink: "asu:bg-pink-100 asu:text-pink-700 asu:dark:bg-pink-700 asu:dark:text-pink-100"
18
18
  } },
19
19
  defaultVariants: { color: "gray" }
20
20
  });
@@ -11,10 +11,10 @@ const buttonVariants = cva("asu:inline-flex asu:shrink-0 asu:items-center asu:ju
11
11
  variant: {
12
12
  primary: "asu:bg-primary asu:text-primary-foreground asu:hover:bg-primary-hover",
13
13
  secondary: "asu:bg-secondary asu:text-secondary-foreground asu:hover:bg-secondary-hover",
14
- outline: "asu:border-border asu:bg-background asu:text-foreground asu:hover:bg-accent asu:hover:text-accent-foreground",
14
+ outline: "asu:border-input asu:bg-background asu:text-foreground asu:hover:bg-accent asu:hover:text-accent-foreground",
15
15
  ghost: "asu:text-foreground asu:hover:bg-accent asu:hover:text-accent-foreground",
16
16
  destructive: "asu:bg-destructive asu:text-destructive-foreground asu:hover:bg-destructive-hover",
17
- link: "asu:text-primary asu:underline-offset-4 asu:hover:underline"
17
+ link: "asu:text-primary-text asu:underline-offset-4 asu:hover:underline"
18
18
  },
19
19
  size: {
20
20
  sm: "asu:h-6 asu:px-2 asu:text-xs",
@@ -27,7 +27,7 @@ function FilterHeader({ column, filter }) {
27
27
  }),
28
28
  children: /* @__PURE__ */ jsx(Funnel, {
29
29
  "aria-hidden": "true",
30
- className: active ? "asu:text-primary asu:fill-current" : "asu:text-muted-foreground"
30
+ className: active ? "asu:text-primary-text asu:fill-current" : "asu:text-muted-foreground"
31
31
  })
32
32
  }), /* @__PURE__ */ jsxs(MenuContent, {
33
33
  align: "start",
@@ -194,7 +194,7 @@ function DateRangePicker(props) {
194
194
  type: "button",
195
195
  "aria-pressed": isSelected,
196
196
  onClick: () => handlePresetClick(preset, index),
197
- className: cn("asu:h-8 asu:whitespace-nowrap asu:rounded-sm asu:px-3 asu:text-left asu:text-sm asu:text-foreground asu:outline-none asu:hover:bg-accent asu:focus-visible:ring-2 asu:focus-visible:ring-ring/40", isSelected && "asu:bg-accent asu:font-medium asu:text-primary"),
197
+ className: cn("asu:h-8 asu:whitespace-nowrap asu:rounded-sm asu:px-3 asu:text-left asu:text-sm asu:text-foreground asu:outline-none asu:hover:bg-accent asu:focus-visible:ring-2 asu:focus-visible:ring-ring/40", isSelected && "asu:bg-accent asu:font-medium asu:text-primary-text"),
198
198
  "data-slot": "date-range-picker-preset",
199
199
  children: preset.label
200
200
  }, index);
@@ -36,7 +36,7 @@ function DialogContent({ className, showCloseButton = true, closeLabel, size = "
36
36
  className: "asu:fixed asu:inset-0 asu:bg-overlay asu:transition-opacity asu:duration-150 asu:motion-reduce:transition-none asu:data-ending-style:opacity-0 asu:data-starting-style:opacity-0",
37
37
  "data-slot": "dialog-backdrop"
38
38
  }), /* @__PURE__ */ jsxs(Dialog.Popup, {
39
- className: cn("asu:fixed asu:top-1/2 asu:left-1/2 asu:flex asu:max-h-[calc(100vh-4rem)] asu:w-[calc(100vw-2rem)] asu:-translate-x-1/2 asu:-translate-y-1/2 asu:flex-col asu:rounded-md asu:bg-background asu:text-foreground asu:shadow-lg asu:outline-none asu:transition-[opacity,scale] asu:duration-150 asu:motion-reduce:transition-none asu:data-starting-style:scale-95 asu:data-starting-style:opacity-0 asu:data-ending-style:scale-95 asu:data-ending-style:opacity-0", dialogContentSizeClassName[size], className),
39
+ className: cn("asu:fixed asu:top-1/2 asu:left-1/2 asu:flex asu:max-h-[calc(100vh-4rem)] asu:w-[calc(100vw-2rem)] asu:-translate-x-1/2 asu:-translate-y-1/2 asu:flex-col asu:rounded-md asu:bg-background asu:text-foreground asu:shadow-lg asu:dark:ring-1 asu:dark:ring-border asu:outline-none asu:transition-[opacity,scale] asu:duration-150 asu:motion-reduce:transition-none asu:data-starting-style:scale-95 asu:data-starting-style:opacity-0 asu:data-ending-style:scale-95 asu:data-ending-style:opacity-0", dialogContentSizeClassName[size], className),
40
40
  ...props,
41
41
  "data-slot": "dialog-content",
42
42
  children: [showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, {
@@ -41,7 +41,7 @@ function DrawerContent({ className, showCloseButton = true, closeLabel, size = "
41
41
  className: cn("asu:fixed asu:inset-0", isNonModal && "asu:pointer-events-none"),
42
42
  "data-slot": "drawer-viewport",
43
43
  children: /* @__PURE__ */ jsxs(Drawer.Popup, {
44
- className: cn("asu:fixed asu:inset-y-0 asu:right-0 asu:flex asu:h-full asu:flex-col asu:bg-background asu:text-foreground asu:shadow-lg asu:outline-none asu:transition-transform asu:duration-200 asu:motion-reduce:transition-none asu:data-ending-style:translate-x-full asu:data-starting-style:translate-x-full", isNonModal && "asu:pointer-events-auto", drawerContentSizeClassName[size], className),
44
+ className: cn("asu:fixed asu:inset-y-0 asu:right-0 asu:flex asu:h-full asu:flex-col asu:bg-background asu:text-foreground asu:shadow-lg asu:dark:ring-1 asu:dark:ring-border asu:outline-none asu:transition-transform asu:duration-200 asu:motion-reduce:transition-none asu:data-ending-style:translate-x-full asu:data-starting-style:translate-x-full", isNonModal && "asu:pointer-events-auto", drawerContentSizeClassName[size], className),
45
45
  ...props,
46
46
  "data-slot": "drawer-content",
47
47
  children: [showCloseButton && /* @__PURE__ */ jsx(Drawer.Close, {
@@ -27,7 +27,7 @@ function FieldDescription({ className, ...props }) {
27
27
  }
28
28
  function FieldError({ className, ...props }) {
29
29
  return /* @__PURE__ */ jsx(Field.Error, {
30
- className: cn("asu:text-sm asu:text-destructive", className),
30
+ className: cn("asu:text-sm asu:text-destructive-text", className),
31
31
  ...props,
32
32
  "data-slot": "field-error"
33
33
  });
@@ -11,7 +11,6 @@ const groupParts = [
11
11
  "asu:[&>[data-slot=input]+[data-slot][data-slot]]:border-l-transparent asu:[&>[data-slot][data-slot]:has(+[data-slot=input])]:border-r-transparent",
12
12
  "asu:[&>[data-slot=input]:not(:focus-visible):not([aria-invalid=true]):has(+[data-slot=button]:is([data-variant=primary],[data-variant=secondary],[data-variant=destructive]))]:border-r-transparent asu:[&>[data-slot=input]+[data-slot=button]:is([data-variant=primary],[data-variant=secondary],[data-variant=destructive])]:ml-0",
13
13
  "asu:[&>[data-slot=button]:is([data-variant=primary],[data-variant=secondary],[data-variant=destructive])+[data-slot=input]:not(:focus-visible):not([aria-invalid=true])]:border-l-transparent asu:[&>[data-slot=button]:is([data-variant=primary],[data-variant=secondary],[data-variant=destructive])+[data-slot=input]]:ml-0",
14
- "asu:[&>[data-slot=button][data-variant=outline]]:border-input",
15
14
  "asu:[&>[data-slot=input]+[data-slot=button][data-variant=outline]:focus-visible]:border-l-input asu:[&>[data-slot=button][data-variant=outline]:focus-visible:has(+[data-slot=input])]:border-r-input"
16
15
  ].join(" ");
17
16
  /** Joins an `Input` and a `Button` or an `InputGroupAddon` into one control: they touch, share one divider, and each keeps its own hover and focus. */
@@ -6,7 +6,7 @@ import { CheckIcon, ChevronRightIcon } from "lucide-react";
6
6
  import { Menu } from "@base-ui/react/menu";
7
7
  //#region src/components/menu/menu.tsx
8
8
  const menuItemClassName = "asu:flex asu:h-13 asu:cursor-default asu:items-center asu:gap-2 asu:px-3 asu:text-sm asu:outline-none asu:select-none asu:data-highlighted:bg-accent asu:data-disabled:pointer-events-none asu:data-disabled:opacity-50 asu:[&_svg]:size-4 asu:[&_svg]:shrink-0";
9
- const destructiveItemClassName = "asu:text-destructive asu:data-highlighted:bg-destructive-subtle";
9
+ const destructiveItemClassName = "asu:text-destructive-text asu:data-highlighted:bg-destructive-subtle";
10
10
  const Menu$1 = Menu.Root;
11
11
  function MenuTrigger({ className, ...props }) {
12
12
  return /* @__PURE__ */ jsx(Menu.Trigger, {
@@ -78,7 +78,7 @@ function Pagination({ pageIndex, pageSize, rowCount, pageSizeOptions = DEFAULT_P
78
78
  "aria-label": messages.pagination.previous,
79
79
  disabled: currentPage <= 0,
80
80
  onClick: () => onPageIndexChange(currentPage - 1),
81
- className: cn("asu:flex asu:size-6 asu:items-center asu:justify-center asu:rounded-sm asu:border asu:border-border asu:outline-none asu:focus-visible:ring-2 asu:focus-visible:ring-ring/40", currentPage <= 0 && "asu:cursor-not-allowed asu:opacity-50"),
81
+ className: cn("asu:flex asu:size-6 asu:items-center asu:justify-center asu:rounded-sm asu:border asu:border-input asu:outline-none asu:focus-visible:ring-2 asu:focus-visible:ring-ring/40", currentPage <= 0 && "asu:cursor-not-allowed asu:opacity-50"),
82
82
  "data-slot": "pagination-previous",
83
83
  children: /* @__PURE__ */ jsx(ChevronLeft, { className: "asu:size-3.5" })
84
84
  }),
@@ -101,7 +101,7 @@ function Pagination({ pageIndex, pageSize, rowCount, pageSizeOptions = DEFAULT_P
101
101
  "aria-label": messages.pagination.next,
102
102
  disabled: currentPage >= pageCount - 1,
103
103
  onClick: () => onPageIndexChange(currentPage + 1),
104
- className: cn("asu:flex asu:size-6 asu:items-center asu:justify-center asu:rounded-sm asu:border asu:border-border asu:outline-none asu:focus-visible:ring-2 asu:focus-visible:ring-ring/40", currentPage >= pageCount - 1 && "asu:cursor-not-allowed asu:opacity-50"),
104
+ className: cn("asu:flex asu:size-6 asu:items-center asu:justify-center asu:rounded-sm asu:border asu:border-input asu:outline-none asu:focus-visible:ring-2 asu:focus-visible:ring-ring/40", currentPage >= pageCount - 1 && "asu:cursor-not-allowed asu:opacity-50"),
105
105
  "data-slot": "pagination-next",
106
106
  children: /* @__PURE__ */ jsx(ChevronRight, { className: "asu:size-3.5" })
107
107
  }),
@@ -93,7 +93,7 @@ function SelectTrigger({ className, children, size = "default", ...props }) {
93
93
  event.stopPropagation();
94
94
  clearState.onClear();
95
95
  },
96
- className: cn("asu:absolute asu:top-1/2 asu:-translate-y-1/2 asu:rounded-sm asu:text-muted-foreground asu:outline-none asu:hover:text-foreground", size === "sm" ? "asu:right-6" : "asu:right-8", "asu:peer-data-disabled/select-trigger:hidden", "asu:focus-visible:border-ring asu:focus-visible:ring-2 asu:focus-visible:ring-ring/30 asu:aria-invalid:focus-visible:ring-destructive/30 asu:data-invalid:focus-visible:ring-destructive/30"),
96
+ className: cn("asu:absolute asu:top-1/2 asu:-translate-y-1/2 asu:rounded-sm asu:text-muted-foreground asu:outline-none asu:hover:text-foreground", size === "sm" ? "asu:right-6" : "asu:right-8", "asu:peer-data-disabled/select-trigger:hidden", "asu:focus-visible:border-ring asu:focus-visible:ring-2 asu:focus-visible:ring-ring/40 asu:aria-invalid:focus-visible:ring-destructive/40 asu:data-invalid:focus-visible:ring-destructive/40"),
97
97
  "data-slot": "select-clear",
98
98
  children: /* @__PURE__ */ jsx(XIcon, { className: "asu:size-3" })
99
99
  })]
@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
3
3
  //#region src/components/skeleton/skeleton.tsx
4
4
  function Skeleton({ className, ...props }) {
5
5
  return /* @__PURE__ */ jsx("div", {
6
- className: cn("asu:animate-pulse asu:rounded-sm asu:bg-muted", className),
6
+ className: cn("asu:animate-pulse asu:rounded-md asu:bg-accent-selected asu:motion-reduce:animate-none", className),
7
7
  ...props,
8
8
  "data-slot": "skeleton"
9
9
  });
@@ -20,7 +20,7 @@ function TabsList({ className, children, ...props }) {
20
20
  }
21
21
  function TabsTrigger({ className, ...props }) {
22
22
  return /* @__PURE__ */ jsx(Tabs.Tab, {
23
- className: cn("asu:relative asu:h-10 asu:shrink-0 asu:rounded-sm asu:px-0 asu:text-sm asu:font-medium asu:whitespace-nowrap asu:text-muted-foreground asu:outline-none asu:focus-visible:ring-2 asu:focus-visible:ring-ring/40 asu:data-active:text-primary asu:data-disabled:opacity-50", "asu:after:pointer-events-none asu:after:absolute asu:after:inset-x-[-10px] asu:after:bottom-0 asu:after:hidden asu:after:h-0.5 asu:after:bg-primary asu:after:content-[\"\"] asu:data-active:after:block asu:data-[orientation=vertical]:after:inset-x-auto asu:data-[orientation=vertical]:after:inset-y-[-10px] asu:data-[orientation=vertical]:after:right-[-1px] asu:data-[orientation=vertical]:after:bottom-auto asu:data-[orientation=vertical]:after:h-auto asu:data-[orientation=vertical]:after:w-0.5", className),
23
+ className: cn("asu:relative asu:h-10 asu:shrink-0 asu:rounded-sm asu:px-0 asu:text-sm asu:font-medium asu:whitespace-nowrap asu:text-muted-foreground asu:outline-none asu:focus-visible:ring-2 asu:focus-visible:ring-ring/40 asu:data-active:text-primary-text asu:data-disabled:opacity-50", "asu:after:pointer-events-none asu:after:absolute asu:after:inset-x-[-10px] asu:after:bottom-0 asu:after:hidden asu:after:h-0.5 asu:after:bg-primary asu:after:content-[\"\"] asu:data-active:after:block asu:data-[orientation=vertical]:after:inset-x-auto asu:data-[orientation=vertical]:after:inset-y-[-10px] asu:data-[orientation=vertical]:after:right-[-1px] asu:data-[orientation=vertical]:after:bottom-auto asu:data-[orientation=vertical]:after:h-auto asu:data-[orientation=vertical]:after:w-0.5", className),
24
24
  ...props,
25
25
  "data-slot": "tabs-trigger"
26
26
  });
@@ -25,7 +25,7 @@ const TOAST_ICON_CLASSNAME = {
25
25
  success: "asu:text-success",
26
26
  info: "asu:text-info",
27
27
  warning: "asu:text-warning",
28
- error: "asu:text-destructive",
28
+ error: "asu:text-destructive-text",
29
29
  loading: "asu:text-info"
30
30
  };
31
31
  const TOAST_BACKGROUND_CLASSNAME = {
@@ -88,7 +88,7 @@ function ToastItem({ toast: toastObject }) {
88
88
  const Icon = TOAST_ICON[type];
89
89
  return /* @__PURE__ */ jsxs(Toast.Root, {
90
90
  toast: toastObject,
91
- className: cn("asu:relative asu:flex asu:gap-2 asu:rounded-md asu:p-2 asu:pr-8 asu:text-sm asu:text-foreground asu:shadow-lg asu:data-limited:hidden", TOAST_BACKGROUND_CLASSNAME[type]),
91
+ className: cn("asu:relative asu:flex asu:gap-2 asu:rounded-md asu:p-2 asu:pr-8 asu:text-sm asu:text-foreground asu:shadow-lg asu:dark:ring-1 asu:dark:ring-border asu:data-limited:hidden", TOAST_BACKGROUND_CLASSNAME[type]),
92
92
  "data-slot": "toast",
93
93
  children: [/* @__PURE__ */ jsxs(Toast.Content, {
94
94
  className: "asu:flex asu:flex-1 asu:gap-2",
@@ -1,6 +1,6 @@
1
1
  //#region src/lib/control.ts
2
2
  const controlSurface = "asu:w-full asu:min-w-0 asu:rounded-sm asu:border asu:border-input asu:bg-background asu:text-sm asu:text-foreground asu:transition-colors asu:outline-none asu:placeholder:text-muted-foreground asu:disabled:cursor-not-allowed asu:disabled:bg-muted asu:disabled:opacity-50 asu:data-disabled:cursor-not-allowed asu:data-disabled:bg-muted asu:data-disabled:opacity-50 asu:aria-invalid:border-destructive asu:data-invalid:border-destructive asu:not-disabled:not-data-disabled:not-aria-invalid:not-data-invalid:hover:border-primary-hover";
3
- const controlFocus = "asu:focus-visible:border-ring asu:focus-visible:ring-2 asu:focus-visible:ring-ring/30 asu:aria-invalid:focus-visible:ring-destructive/30 asu:data-invalid:focus-visible:ring-destructive/30";
4
- const controlFocusWithin = "asu:focus-within:border-ring asu:focus-within:ring-2 asu:focus-within:ring-ring/30 asu:aria-invalid:focus-within:ring-destructive/30 asu:data-invalid:focus-within:ring-destructive/30";
3
+ const controlFocus = "asu:focus-visible:border-ring asu:focus-visible:ring-2 asu:focus-visible:ring-ring/40 asu:aria-invalid:focus-visible:ring-destructive/40 asu:data-invalid:focus-visible:ring-destructive/40";
4
+ const controlFocusWithin = "asu:focus-within:border-ring asu:focus-within:ring-2 asu:focus-within:ring-ring/40 asu:aria-invalid:focus-within:ring-destructive/40 asu:data-invalid:focus-within:ring-destructive/40";
5
5
  //#endregion
6
6
  export { controlFocus, controlFocusWithin, controlSurface };
package/dist/lib/popup.js CHANGED
@@ -1,6 +1,6 @@
1
1
  //#region src/lib/popup.ts
2
2
  const popupClassName = "asu:rounded-md asu:border asu:border-border asu:bg-popover asu:text-popover-foreground asu:shadow-md asu:outline-none";
3
- const listboxClassName = "asu:max-h-[300px] asu:overflow-y-auto asu:rounded-sm asu:bg-muted asu:text-sm asu:shadow-md";
3
+ const listboxClassName = "asu:max-h-[300px] asu:overflow-y-auto asu:rounded-sm asu:bg-muted asu:text-sm asu:shadow-md asu:dark:ring-1 asu:dark:ring-border";
4
4
  const listItemClassName = "asu:flex asu:cursor-default asu:items-center asu:gap-2 asu:px-4 asu:py-2.5 asu:text-sm asu:outline-none asu:select-none asu:data-highlighted:bg-accent-hover asu:data-selected:bg-accent-selected asu:data-disabled:pointer-events-none asu:data-disabled:opacity-50";
5
5
  //#endregion
6
6
  export { listItemClassName, listboxClassName, popupClassName };
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-border-style:solid;--tw-leading:initial;--tw-font-weight: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-duration:initial;--tw-content:"";--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}:root,:host{--asu-font-sans:"Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;--asu-font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--asu-spacing:.25rem;--asu-container-xs:20rem;--asu-container-sm:24rem;--asu-container-md:28rem;--asu-container-xl:36rem;--asu-container-3xl:48rem;--asu-text-xs:.75rem;--asu-text-xs--line-height:calc(1 / .75);--asu-text-sm:.875rem;--asu-text-sm--line-height:calc(1.25 / .875);--asu-text-base:1rem;--asu-text-base--line-height:calc(1.5 / 1);--asu-text-lg:1.125rem;--asu-text-lg--line-height:calc(1.75 / 1.125);--asu-text-xl:1.25rem;--asu-text-xl--line-height:calc(1.75 / 1.25);--asu-text-4xl:2.25rem;--asu-text-4xl--line-height:calc(2.5 / 2.25);--asu-font-weight-normal:400;--asu-font-weight-medium:500;--asu-font-weight-semibold:600;--asu-animate-spin:spin 1s linear infinite;--asu-animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--asu-default-transition-duration:.15s;--asu-default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--asu-default-font-family:var(--asu-font-sans);--asu-default-mono-font-family:var(--asu-font-mono);--asu-color-white:#fff;--asu-color-black:#000;--asu-color-gray-50:#fcfcfc;--asu-color-gray-100:#f7f7f7;--asu-color-gray-200:#f0f0f0;--asu-color-gray-300:#e0e0e0;--asu-color-gray-400:silver;--asu-color-gray-500:#969696;--asu-color-gray-600:#686868;--asu-color-gray-700:#484848;--asu-color-gray-800:#2c2c2c;--asu-color-gray-900:#232323;--asu-color-gray-950:#1a1a1a;--asu-color-slate-50:#f5f6fa;--asu-color-slate-100:#eaecf3;--asu-color-slate-200:#dfe3ec;--asu-color-slate-300:#bfc7d8;--asu-color-slate-400:#a0abc5;--asu-color-slate-500:#818eb1;--asu-color-slate-600:#626e8f;--asu-color-slate-700:#44506f;--asu-color-slate-800:#3c4557;--asu-color-slate-900:#282f3d;--asu-color-slate-950:#151b25;--asu-color-blue-50:#ecf5fd;--asu-color-blue-100:#d6eaff;--asu-color-blue-200:#add0f8;--asu-color-blue-300:#84b6f0;--asu-color-blue-400:#5e9ae8;--asu-color-blue-500:#377ede;--asu-color-blue-600:#065fd4;--asu-color-blue-700:#084ba4;--asu-color-blue-800:#043566;--asu-color-blue-900:#01274f;--asu-color-blue-950:#001a39;--asu-color-green-50:#f7fff9;--asu-color-green-100:#e1fae5;--asu-color-green-200:#cbf5d1;--asu-color-green-300:#95eda3;--asu-color-green-400:#60e074;--asu-color-green-500:#32d74b;--asu-color-green-600:#1fa333;--asu-color-green-700:#11701f;--asu-color-green-800:#074210;--asu-color-green-900:#022408;--asu-color-green-950:#041907;--asu-color-red-50:#fff8f7;--asu-color-red-100:#ffe2e0;--asu-color-red-200:#fda19d;--asu-color-red-300:#fa7069;--asu-color-red-400:#f84037;--asu-color-red-500:#f80d05;--asu-color-red-600:#c40a04;--asu-color-red-700:#910601;--asu-color-red-800:#5e0401;--asu-color-red-900:#2b0100;--asu-color-red-950:#1a0201;--asu-color-yellow-50:#fdfbef;--asu-color-yellow-100:#fff8d6;--asu-color-yellow-200:#fff0a3;--asu-color-yellow-300:#ffe770;--asu-color-yellow-400:#ffdf3d;--asu-color-yellow-500:#ccab08;--asu-color-yellow-600:#998006;--asu-color-yellow-700:#665202;--asu-color-yellow-800:#4e3e00;--asu-color-yellow-900:#372b00;--asu-color-yellow-950:#221a00;--asu-color-orange-50:#fff9f0;--asu-color-orange-100:#ffefd6;--asu-color-orange-200:#feddaf;--asu-color-orange-300:#feca86;--asu-color-orange-400:#ffb559;--asu-color-orange-500:#ff9f0a;--asu-color-orange-600:#cc7f08;--asu-color-orange-700:#995f06;--asu-color-orange-800:#664004;--asu-color-orange-900:#462a00;--asu-color-orange-950:#281600;--asu-color-cyan-50:#eff9fd;--asu-color-cyan-100:#d6f3ff;--asu-color-cyan-200:#b8dcec;--asu-color-cyan-300:#9ac5d8;--asu-color-cyan-400:#7dafc6;--asu-color-cyan-500:#5f99b3;--asu-color-cyan-600:#4183a1;--asu-color-cyan-700:#1e6e8f;--asu-color-cyan-800:#0c445c;--asu-color-cyan-900:#023044;--asu-color-cyan-950:#001e2c;--asu-color-indigo-50:#f6f6fc;--asu-color-indigo-100:#e4e4f5;--asu-color-indigo-200:#c2c3f3;--asu-color-indigo-300:#a0a2f0;--asu-color-indigo-400:#7e80ec;--asu-color-indigo-500:#5e5ce6;--asu-color-indigo-600:#3d3fbf;--asu-color-indigo-700:#201f99;--asu-color-indigo-800:#161466;--asu-color-indigo-900:#0f0e51;--asu-color-indigo-950:#09083c;--asu-color-purple-50:#faf4fd;--asu-color-purple-100:#f4e3fd;--asu-color-purple-200:#dcc2ea;--asu-color-purple-300:#c4a1d7;--asu-color-purple-400:#ab81c5;--asu-color-purple-500:#9461b2;--asu-color-purple-600:#7c409f;--asu-color-purple-700:#65188c;--asu-color-purple-800:#460766;--asu-color-purple-900:#370551;--asu-color-purple-950:#29033d;--asu-color-pink-50:#fef3f8;--asu-color-pink-100:#ffe0ed;--asu-color-pink-200:#f0c0d2;--asu-color-pink-300:#e0a0b7;--asu-color-pink-400:#cf809b;--asu-color-pink-500:#be607f;--asu-color-pink-600:#ac3e63;--asu-color-pink-700:#991147;--asu-color-pink-800:#800a39;--asu-color-pink-900:#5c0026;--asu-color-pink-950:#380014;--asu-radius-sm:2px;--asu-radius-md:4px}@layer base{:where([data-slot],[data-slot] *),:where([data-slot],[data-slot] *):after,:where([data-slot],[data-slot] *):before,:where([data-slot],[data-slot] *)::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}:where([data-slot],[data-slot] *)::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}:where([data-slot]):not(:where([data-slot] *)){-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--asu-default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--asu-default-font-feature-settings,normal);font-variation-settings:var(--asu-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}:where(hr[data-slot],[data-slot] hr){height:0;color:inherit;border-top-width:1px}:where(abbr:where([title])[data-slot],[data-slot] abbr:where([title])){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(h1[data-slot],[data-slot] h1),:where(h2[data-slot],[data-slot] h2),:where(h3[data-slot],[data-slot] h3),:where(h4[data-slot],[data-slot] h4),:where(h5[data-slot],[data-slot] h5),:where(h6[data-slot],[data-slot] h6){font-size:inherit;font-weight:inherit}:where(a[data-slot],[data-slot] a){color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}:where(b[data-slot],[data-slot] b),:where(strong[data-slot],[data-slot] strong){font-weight:bolder}:where(code[data-slot],[data-slot] code),:where(kbd[data-slot],[data-slot] kbd),:where(samp[data-slot],[data-slot] samp),:where(pre[data-slot],[data-slot] pre){font-family:var(--asu-default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--asu-default-mono-font-feature-settings,normal);font-variation-settings:var(--asu-default-mono-font-variation-settings,normal);font-size:1em}:where(small[data-slot],[data-slot] small){font-size:80%}:where(sub[data-slot],[data-slot] sub),:where(sup[data-slot],[data-slot] sup){vertical-align:baseline;font-size:75%;line-height:0;position:relative}:where(sub[data-slot],[data-slot] sub){bottom:-.25em}:where(sup[data-slot],[data-slot] sup){top:-.5em}:where(table[data-slot],[data-slot] table){text-indent:0;border-color:inherit;border-collapse:collapse}:where([data-slot],[data-slot] *):-moz-focusring:where(:not(iframe)){outline:auto}:where(progress[data-slot],[data-slot] progress){vertical-align:baseline}:where(summary[data-slot],[data-slot] summary){display:list-item}:where(ol[data-slot],[data-slot] ol),:where(ul[data-slot],[data-slot] ul),:where(menu[data-slot],[data-slot] menu){list-style:none}:where(img[data-slot],[data-slot] img),:where(svg[data-slot],[data-slot] svg),:where(video[data-slot],[data-slot] video),:where(canvas[data-slot],[data-slot] canvas),:where(audio[data-slot],[data-slot] audio),:where(iframe[data-slot],[data-slot] iframe),:where(embed[data-slot],[data-slot] embed),:where(object[data-slot],[data-slot] object){vertical-align:middle;display:block}:where(img[data-slot],[data-slot] img),:where(video[data-slot],[data-slot] video){max-width:100%;height:auto}:where([data-slot] button),:where([data-slot] input),:where([data-slot] select),:where([data-slot] optgroup),:where([data-slot] textarea){font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}:where([data-slot],[data-slot] *)::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}:where(button[data-slot],[data-slot] button),:where(input[data-slot],[data-slot] input),:where(select[data-slot],[data-slot] select),:where(optgroup[data-slot],[data-slot] optgroup),:where(textarea[data-slot],[data-slot] textarea){opacity:1;background-color:#0000;border-radius:0}:where([data-slot],[data-slot] *)::file-selector-button{opacity:1;background-color:#0000;border-radius:0}:where(:where(select:is([multiple],[size])) optgroup[data-slot],[data-slot] :where(select:is([multiple],[size])) optgroup){font-weight:bolder}:where(:where(select:is([multiple],[size])) optgroup option[data-slot],[data-slot] :where(select:is([multiple],[size])) optgroup option){padding-inline-start:20px}:where([data-slot],[data-slot] *)::file-selector-button{margin-inline-end:4px}:where([data-slot],[data-slot] *)::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){:where([data-slot],[data-slot] *)::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){:where([data-slot],[data-slot] *)::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}:where(textarea[data-slot],[data-slot] textarea){resize:vertical}:where([data-slot],[data-slot] *)::-webkit-search-decoration{-webkit-appearance:none}:where([data-slot],[data-slot] *)::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}:where([data-slot],[data-slot] *)::-webkit-datetime-edit{display:inline-flex}:where([data-slot],[data-slot] *)::-webkit-datetime-edit-fields-wrapper{padding:0}:where([data-slot],[data-slot] *)::-webkit-datetime-edit{padding-block:0}:where([data-slot],[data-slot] *)::-webkit-datetime-edit-year-field{padding-block:0}:where([data-slot],[data-slot] *)::-webkit-datetime-edit-month-field{padding-block:0}:where([data-slot],[data-slot] *)::-webkit-datetime-edit-day-field{padding-block:0}:where([data-slot],[data-slot] *)::-webkit-datetime-edit-hour-field{padding-block:0}:where([data-slot],[data-slot] *)::-webkit-datetime-edit-minute-field{padding-block:0}:where([data-slot],[data-slot] *)::-webkit-datetime-edit-second-field{padding-block:0}:where([data-slot],[data-slot] *)::-webkit-datetime-edit-millisecond-field{padding-block:0}:where([data-slot],[data-slot] *)::-webkit-datetime-edit-meridiem-field{padding-block:0}:where([data-slot],[data-slot] *)::-webkit-calendar-picker-indicator{line-height:1}:where([data-slot],[data-slot] *):-moz-ui-invalid{box-shadow:none}:where(button[data-slot],[data-slot] button),:where(input:where([type=button],[type=reset],[type=submit])[data-slot],[data-slot] input:where([type=button],[type=reset],[type=submit])){appearance:button}:where([data-slot],[data-slot] *)::file-selector-button{appearance:button}:where([data-slot],[data-slot] *)::-webkit-inner-spin-button{height:auto}:where([data-slot],[data-slot] *)::-webkit-outer-spin-button{height:auto}:where([data-slot][hidden],[data-slot] [hidden]):where(:not([hidden=until-found])){display:none!important}:where([data-slot],[data-slot] *),:where([data-slot],[data-slot] *):before,:where([data-slot],[data-slot] *):after,:where([data-slot],[data-slot] *)::backdrop{border-color:var(--asu-border)}:where([data-slot],[data-slot] *)::file-selector-button{border-color:var(--asu-border)}:where([data-slot]):not(:where([data-slot] *)){color:var(--asu-foreground);font-family:var(--asu-font-sans);font-size:var(--asu-text-sm);line-height:var(--asu-text-sm--line-height)}}:root{--asu-background:#fff;--asu-foreground:#2c2c2c;--asu-card:#fff;--asu-card-foreground:#2c2c2c;--asu-popover:#fff;--asu-popover-foreground:#2c2c2c;--asu-primary:#065fd4;--asu-primary-hover:#084ba4;--asu-primary-foreground:#fff;--asu-secondary:#f7f7f7;--asu-secondary-foreground:#2c2c2c;--asu-muted:#f7f7f7;--asu-muted-foreground:#686868;--asu-accent:#f7f7f7;--asu-accent-foreground:#2c2c2c;--asu-destructive:#c40a04;--asu-destructive-hover:#910601;--asu-destructive-foreground:#fff;--asu-destructive-subtle:#fff8f7;--asu-success:#1fa333;--asu-success-foreground:#11701f;--asu-success-subtle:#f7fff9;--asu-warning:#cc7f08;--asu-warning-foreground:#995f06;--asu-warning-subtle:#fff9f0;--asu-info:#065fd4;--asu-info-foreground:#084ba4;--asu-info-subtle:#ecf5fd;--asu-border:#f0f0f0;--asu-input:#e0e0e0;--asu-ring:#065fd4;--asu-tooltip:#3c4557;--asu-tooltip-foreground:#fff;--asu-table-header:#f5f6fa;--asu-secondary-hover:#f0f0f0;--asu-accent-hover:#f0f0f0;--asu-accent-selected:#e0e0e0;--asu-overlay:#2c2c2c73;--asu-sidebar-accent:#f0f0f0;--asu-sidebar-indicator:#f84037}.asu\:pointer-events-auto{pointer-events:auto}.asu\:pointer-events-none{pointer-events:none}.asu\:invisible{visibility:hidden}.asu\:sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.asu\:absolute{position:absolute}.asu\:fixed{position:fixed}.asu\:relative{position:relative}.asu\:inset-0{inset:0}.asu\:inset-y-0{inset-block:0}.asu\:top-0{top:0}.asu\:top-1{top:var(--asu-spacing)}.asu\:top-1\/2{top:50%}.asu\:top-3{top:calc(var(--asu-spacing) * 3)}.asu\:top-4{top:calc(var(--asu-spacing) * 4)}.asu\:right-0{right:0}.asu\:right-1{right:var(--asu-spacing)}.asu\:right-2{right:calc(var(--asu-spacing) * 2)}.asu\:right-4{right:calc(var(--asu-spacing) * 4)}.asu\:right-6{right:calc(var(--asu-spacing) * 6)}.asu\:right-8{right:calc(var(--asu-spacing) * 8)}.asu\:left-0{left:0}.asu\:left-1\/2{left:50%}.asu\:isolate{isolation:isolate}.asu\:z-\[1010\]{z-index:1010}.asu\:m-0{margin:0}.asu\:m-auto{margin:auto}.asu\:my-1{margin-block:var(--asu-spacing)}.asu\:my-2{margin-block:calc(var(--asu-spacing) * 2)}.asu\:mt-1{margin-top:var(--asu-spacing)}.asu\:mt-3{margin-top:calc(var(--asu-spacing) * 3)}.asu\:mt-4{margin-top:calc(var(--asu-spacing) * 4)}.asu\:mb-1{margin-bottom:var(--asu-spacing)}.asu\:mb-2{margin-bottom:calc(var(--asu-spacing) * 2)}.asu\:ml-2\.5{margin-left:calc(var(--asu-spacing) * 2.5)}.asu\:ml-auto{margin-left:auto}.asu\:block{display:block}.asu\:flex{display:flex}.asu\:inline-block{display:inline-block}.asu\:inline-flex{display:inline-flex}.asu\:field-sizing-content{field-sizing:content}.asu\:size-1\.5{width:calc(var(--asu-spacing) * 1.5);height:calc(var(--asu-spacing) * 1.5)}.asu\:size-2{width:calc(var(--asu-spacing) * 2);height:calc(var(--asu-spacing) * 2)}.asu\:size-2\.5{width:calc(var(--asu-spacing) * 2.5);height:calc(var(--asu-spacing) * 2.5)}.asu\:size-3{width:calc(var(--asu-spacing) * 3);height:calc(var(--asu-spacing) * 3)}.asu\:size-3\.5{width:calc(var(--asu-spacing) * 3.5);height:calc(var(--asu-spacing) * 3.5)}.asu\:size-4{width:calc(var(--asu-spacing) * 4);height:calc(var(--asu-spacing) * 4)}.asu\:size-5{width:calc(var(--asu-spacing) * 5);height:calc(var(--asu-spacing) * 5)}.asu\:size-6{width:calc(var(--asu-spacing) * 6);height:calc(var(--asu-spacing) * 6)}.asu\:size-7{width:calc(var(--asu-spacing) * 7);height:calc(var(--asu-spacing) * 7)}.asu\:size-8{width:calc(var(--asu-spacing) * 8);height:calc(var(--asu-spacing) * 8)}.asu\:size-10{width:calc(var(--asu-spacing) * 10);height:calc(var(--asu-spacing) * 10)}.asu\:size-24{width:calc(var(--asu-spacing) * 24);height:calc(var(--asu-spacing) * 24)}.asu\:size-\[76px\]{width:76px;height:76px}.asu\:size-full{width:100%;height:100%}.asu\:h-4{height:calc(var(--asu-spacing) * 4)}.asu\:h-6{height:calc(var(--asu-spacing) * 6)}.asu\:h-7{height:calc(var(--asu-spacing) * 7)}.asu\:h-8{height:calc(var(--asu-spacing) * 8)}.asu\:h-10{height:calc(var(--asu-spacing) * 10)}.asu\:h-11{height:calc(var(--asu-spacing) * 11)}.asu\:h-13{height:calc(var(--asu-spacing) * 13)}.asu\:h-14{height:calc(var(--asu-spacing) * 14)}.asu\:h-\[200px\]{height:200px}.asu\:h-auto{height:auto}.asu\:h-full{height:100%}.asu\:h-px{height:1px}.asu\:max-h-\[300px\]{max-height:300px}.asu\:max-h-\[596px\]{max-height:596px}.asu\:max-h-\[calc\(100vh-4rem\)\]{max-height:calc(100vh - 4rem)}.asu\:min-h-5{min-height:calc(var(--asu-spacing) * 5)}.asu\:min-h-8{min-height:calc(var(--asu-spacing) * 8)}.asu\:min-h-16{min-height:calc(var(--asu-spacing) * 16)}.asu\:w-1{width:var(--asu-spacing)}.asu\:w-6{width:calc(var(--asu-spacing) * 6)}.asu\:w-72{width:calc(var(--asu-spacing) * 72)}.asu\:w-90{width:calc(var(--asu-spacing) * 90)}.asu\:w-\[90vw\]{width:90vw}.asu\:w-\[110px\]{width:110px}.asu\:w-\[226px\]{width:226px}.asu\:w-\[588px\]{width:588px}.asu\:w-\[748px\]{width:748px}.asu\:w-\[calc\(100vw-2rem\)\]{width:calc(100vw - 2rem)}.asu\:w-auto{width:auto}.asu\:w-fit{width:fit-content}.asu\:w-full{width:100%}.asu\:max-w-3xl{max-width:var(--asu-container-3xl)}.asu\:max-w-\[100vw\]{max-width:100vw}.asu\:max-w-\[500px\]{max-width:500px}.asu\:max-w-\[calc\(100vw-2rem\)\]{max-width:calc(100vw - 2rem)}.asu\:max-w-md{max-width:var(--asu-container-md)}.asu\:max-w-sm{max-width:var(--asu-container-sm)}.asu\:max-w-xl{max-width:var(--asu-container-xl)}.asu\:max-w-xs{max-width:var(--asu-container-xs)}.asu\:min-w-\(--anchor-width\){min-width:var(--anchor-width)}.asu\:min-w-0{min-width:0}.asu\:min-w-16{min-width:calc(var(--asu-spacing) * 16)}.asu\:min-w-40{min-width:calc(var(--asu-spacing) * 40)}.asu\:min-w-48{min-width:calc(var(--asu-spacing) * 48)}.asu\:flex-1{flex:1}.asu\:shrink-0{flex-shrink:0}.asu\:grow-0{flex-grow:0}.asu\:basis-1\/2{flex-basis:50%}.asu\:caption-bottom{caption-side:bottom}.asu\:border-collapse{border-collapse:collapse}.asu\:-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.asu\:-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.asu\:rotate-45{rotate:45deg}.asu\:animate-pulse{animation:var(--asu-animate-pulse)}.asu\:animate-spin{animation:var(--asu-animate-spin)}.asu\:cursor-default{cursor:default}.asu\:cursor-not-allowed{cursor:not-allowed}.asu\:flex-col{flex-direction:column}.asu\:flex-row{flex-direction:row}.asu\:flex-wrap{flex-wrap:wrap}.asu\:items-center{align-items:center}.asu\:items-start{align-items:flex-start}.asu\:items-stretch{align-items:stretch}.asu\:justify-between{justify-content:space-between}.asu\:justify-center{justify-content:center}.asu\:justify-end{justify-content:flex-end}.asu\:gap-0\.5{gap:calc(var(--asu-spacing) * .5)}.asu\:gap-1{gap:var(--asu-spacing)}.asu\:gap-1\.5{gap:calc(var(--asu-spacing) * 1.5)}.asu\:gap-2{gap:calc(var(--asu-spacing) * 2)}.asu\:gap-2\.5{gap:calc(var(--asu-spacing) * 2.5)}.asu\:gap-3{gap:calc(var(--asu-spacing) * 3)}.asu\:gap-4{gap:calc(var(--asu-spacing) * 4)}.asu\:gap-6{gap:calc(var(--asu-spacing) * 6)}.asu\:gap-8{gap:calc(var(--asu-spacing) * 8)}.asu\:self-start{align-self:flex-start}.asu\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.asu\:overflow-hidden{overflow:hidden}.asu\:overflow-x-auto{overflow-x:auto}.asu\:overflow-y-auto{overflow-y:auto}.asu\:rounded-full{border-radius:3.40282e38px}.asu\:rounded-md{border-radius:var(--asu-radius-md)}.asu\:rounded-sm{border-radius:var(--asu-radius-sm)}.asu\:rounded-l-sm{border-top-left-radius:var(--asu-radius-sm);border-bottom-left-radius:var(--asu-radius-sm)}.asu\:rounded-r-none{border-top-right-radius:0;border-bottom-right-radius:0}.asu\:rounded-r-sm{border-top-right-radius:var(--asu-radius-sm);border-bottom-right-radius:var(--asu-radius-sm)}.asu\:border{border-style:var(--tw-border-style);border-width:1px}.asu\:border-0{border-style:var(--tw-border-style);border-width:0}.asu\:border-\[3px\]{border-style:var(--tw-border-style);border-width:3px}.asu\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.asu\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.asu\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.asu\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.asu\:border-l-0{border-left-style:var(--tw-border-style);border-left-width:0}.asu\:border-dashed{--tw-border-style:dashed;border-style:dashed}.asu\:border-border{border-color:var(--asu-border)}.asu\:border-input{border-color:var(--asu-input)}.asu\:border-transparent{border-color:#0000}.asu\:bg-accent{background-color:var(--asu-accent)}.asu\:bg-background{background-color:var(--asu-background)}.asu\:bg-blue-100{background-color:var(--asu-color-blue-100)}.asu\:bg-border{background-color:var(--asu-border)}.asu\:bg-current{background-color:currentColor}.asu\:bg-cyan-100{background-color:var(--asu-color-cyan-100)}.asu\:bg-destructive{background-color:var(--asu-destructive)}.asu\:bg-destructive-subtle{background-color:var(--asu-destructive-subtle)}.asu\:bg-gray-100{background-color:var(--asu-color-gray-100)}.asu\:bg-green-100{background-color:var(--asu-color-green-100)}.asu\:bg-indigo-100{background-color:var(--asu-color-indigo-100)}.asu\:bg-info-subtle{background-color:var(--asu-info-subtle)}.asu\:bg-muted{background-color:var(--asu-muted)}.asu\:bg-orange-100{background-color:var(--asu-color-orange-100)}.asu\:bg-overlay{background-color:var(--asu-overlay)}.asu\:bg-pink-100{background-color:var(--asu-color-pink-100)}.asu\:bg-popover{background-color:var(--asu-popover)}.asu\:bg-primary{background-color:var(--asu-primary)}.asu\:bg-primary-foreground{background-color:var(--asu-primary-foreground)}.asu\:bg-purple-100{background-color:var(--asu-color-purple-100)}.asu\:bg-red-100{background-color:var(--asu-color-red-100)}.asu\:bg-secondary{background-color:var(--asu-secondary)}.asu\:bg-sidebar-accent{background-color:var(--asu-sidebar-accent)}.asu\:bg-sidebar-indicator{background-color:var(--asu-sidebar-indicator)}.asu\:bg-slate-100{background-color:var(--asu-color-slate-100)}.asu\:bg-success-subtle{background-color:var(--asu-success-subtle)}.asu\:bg-table-header{background-color:var(--asu-table-header)}.asu\:bg-tooltip{background-color:var(--asu-tooltip)}.asu\:bg-transparent{background-color:#0000}.asu\:bg-warning-subtle{background-color:var(--asu-warning-subtle)}.asu\:bg-yellow-100{background-color:var(--asu-color-yellow-100)}.asu\:fill-current{fill:currentColor}.asu\:object-cover{object-fit:cover}.asu\:p-0{padding:0}.asu\:p-0\.5{padding:calc(var(--asu-spacing) * .5)}.asu\:p-2{padding:calc(var(--asu-spacing) * 2)}.asu\:p-3{padding:calc(var(--asu-spacing) * 3)}.asu\:p-4{padding:calc(var(--asu-spacing) * 4)}.asu\:p-6{padding:calc(var(--asu-spacing) * 6)}.asu\:px-0{padding-inline:0}.asu\:px-2{padding-inline:calc(var(--asu-spacing) * 2)}.asu\:px-3{padding-inline:calc(var(--asu-spacing) * 3)}.asu\:px-4{padding-inline:calc(var(--asu-spacing) * 4)}.asu\:px-6{padding-inline:calc(var(--asu-spacing) * 6)}.asu\:px-\[22px\]{padding-inline:22px}.asu\:py-1{padding-block:var(--asu-spacing)}.asu\:py-2{padding-block:calc(var(--asu-spacing) * 2)}.asu\:py-2\.5{padding-block:calc(var(--asu-spacing) * 2.5)}.asu\:py-3{padding-block:calc(var(--asu-spacing) * 3)}.asu\:py-4{padding-block:calc(var(--asu-spacing) * 4)}.asu\:pt-4{padding-top:calc(var(--asu-spacing) * 4)}.asu\:pt-5{padding-top:calc(var(--asu-spacing) * 5)}.asu\:pr-3{padding-right:calc(var(--asu-spacing) * 3)}.asu\:pr-8{padding-right:calc(var(--asu-spacing) * 8)}.asu\:pr-12{padding-right:calc(var(--asu-spacing) * 12)}.asu\:pr-16{padding-right:calc(var(--asu-spacing) * 16)}.asu\:pb-3{padding-bottom:calc(var(--asu-spacing) * 3)}.asu\:pl-3{padding-left:calc(var(--asu-spacing) * 3)}.asu\:pl-4{padding-left:calc(var(--asu-spacing) * 4)}.asu\:text-center{text-align:center}.asu\:text-left{text-align:left}.asu\:align-middle{vertical-align:middle}.asu\:text-4xl{font-size:var(--asu-text-4xl);line-height:var(--tw-leading,var(--asu-text-4xl--line-height))}.asu\:text-base{font-size:var(--asu-text-base);line-height:var(--tw-leading,var(--asu-text-base--line-height))}.asu\:text-lg{font-size:var(--asu-text-lg);line-height:var(--tw-leading,var(--asu-text-lg--line-height))}.asu\:text-sm{font-size:var(--asu-text-sm);line-height:var(--tw-leading,var(--asu-text-sm--line-height))}.asu\:text-xl{font-size:var(--asu-text-xl);line-height:var(--tw-leading,var(--asu-text-xl--line-height))}.asu\:text-xs{font-size:var(--asu-text-xs);line-height:var(--tw-leading,var(--asu-text-xs--line-height))}.asu\:text-\[10px\]{font-size:10px}.asu\:leading-5{--tw-leading:calc(var(--asu-spacing) * 5);line-height:calc(var(--asu-spacing) * 5)}.asu\:leading-\[1\.75\]{--tw-leading:1.75;line-height:1.75}.asu\:font-medium{--tw-font-weight:var(--asu-font-weight-medium);font-weight:var(--asu-font-weight-medium)}.asu\:font-normal{--tw-font-weight:var(--asu-font-weight-normal);font-weight:var(--asu-font-weight-normal)}.asu\:font-semibold{--tw-font-weight:var(--asu-font-weight-semibold);font-weight:var(--asu-font-weight-semibold)}.asu\:whitespace-nowrap{white-space:nowrap}.asu\:text-blue-700{color:var(--asu-color-blue-700)}.asu\:text-cyan-700{color:var(--asu-color-cyan-700)}.asu\:text-destructive{color:var(--asu-destructive)}.asu\:text-destructive-foreground{color:var(--asu-destructive-foreground)}.asu\:text-foreground{color:var(--asu-foreground)}.asu\:text-gray-700{color:var(--asu-color-gray-700)}.asu\:text-green-700{color:var(--asu-color-green-700)}.asu\:text-indigo-700{color:var(--asu-color-indigo-700)}.asu\:text-info{color:var(--asu-info)}.asu\:text-muted-foreground{color:var(--asu-muted-foreground)}.asu\:text-orange-700{color:var(--asu-color-orange-700)}.asu\:text-pink-700{color:var(--asu-color-pink-700)}.asu\:text-popover-foreground{color:var(--asu-popover-foreground)}.asu\:text-primary{color:var(--asu-primary)}.asu\:text-primary-foreground{color:var(--asu-primary-foreground)}.asu\:text-purple-700{color:var(--asu-color-purple-700)}.asu\:text-red-700{color:var(--asu-color-red-700)}.asu\:text-secondary-foreground,.asu\:text-secondary-foreground\/70{color:var(--asu-secondary-foreground)}@supports (color:color-mix(in lab, red, red)){.asu\:text-secondary-foreground\/70{color:color-mix(in oklab, var(--asu-secondary-foreground) 70%, transparent)}}.asu\:text-slate-700{color:var(--asu-color-slate-700)}.asu\:text-success{color:var(--asu-success)}.asu\:text-tooltip-foreground{color:var(--asu-tooltip-foreground)}.asu\:text-warning{color:var(--asu-warning)}.asu\:text-white{color:var(--asu-color-white)}.asu\:text-yellow-700{color:var(--asu-color-yellow-700)}.asu\: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,)}.asu\:underline-offset-4{text-underline-offset:4px}.asu\:opacity-0{opacity:0}.asu\:opacity-50{opacity:.5}.asu\:shadow-\[inset_0_-1px_0_0_var\(--asu-border\)\]{--tw-shadow:inset 0 -1px 0 0 var(--tw-shadow-color,var(--asu-border));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.asu\:shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.asu\:shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.asu\:shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.asu\:transition-\[opacity\,scale\]{transition-property:opacity,scale;transition-timing-function:var(--tw-ease,var(--asu-default-transition-timing-function));transition-duration:var(--tw-duration,var(--asu-default-transition-duration))}.asu\: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,var(--asu-default-transition-timing-function));transition-duration:var(--tw-duration,var(--asu-default-transition-duration))}.asu\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--asu-default-transition-timing-function));transition-duration:var(--tw-duration,var(--asu-default-transition-duration))}.asu\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--asu-default-transition-timing-function));transition-duration:var(--tw-duration,var(--asu-default-transition-duration))}.asu\:duration-150{--tw-duration:.15s;transition-duration:.15s}.asu\:duration-200{--tw-duration:.2s;transition-duration:.2s}.asu\:outline-none{--tw-outline-style:none;outline-style:none}.asu\:select-none{-webkit-user-select:none;user-select:none}.asu\:group-focus-within\/row\:opacity-100:is(:where(.asu\:group\/row):focus-within *){opacity:1}@media (hover:hover){.asu\:group-hover\/row\:opacity-100:is(:where(.asu\:group\/row):hover *){opacity:1}}.asu\:group-data-disabled\/number-field\:opacity-50:is(:where(.asu\:group\/number-field)[data-disabled] *){opacity:.5}.asu\:group-data-\[size\=md\]\/switch\:size-4:is(:where(.asu\:group\/switch)[data-size=md] *){width:calc(var(--asu-spacing) * 4);height:calc(var(--asu-spacing) * 4)}.asu\:group-data-\[size\=sm\]\/switch\:size-3:is(:where(.asu\:group\/switch)[data-size=sm] *){width:calc(var(--asu-spacing) * 3);height:calc(var(--asu-spacing) * 3)}.asu\:peer-data-disabled\/select-trigger\:hidden:is(:where(.asu\:peer\/select-trigger)[data-disabled]~*){display:none}.asu\:placeholder\:text-muted-foreground::placeholder{color:var(--asu-muted-foreground)}.asu\:before\:absolute:before{content:var(--tw-content);position:absolute}.asu\:before\:inset-x-0:before{content:var(--tw-content);inset-inline:0}.asu\:before\:inset-y-1:before{content:var(--tw-content);inset-block:var(--asu-spacing)}.asu\:before\:bg-info-subtle:before{content:var(--tw-content);background-color:var(--asu-info-subtle)}.asu\:after\:pointer-events-none:after{content:var(--tw-content);pointer-events:none}.asu\:after\:absolute:after{content:var(--tw-content);position:absolute}.asu\:after\:inset-x-\[-10px\]:after{content:var(--tw-content);inset-inline:-10px}.asu\:after\:bottom-0:after{content:var(--tw-content);bottom:0}.asu\:after\:hidden:after{content:var(--tw-content);display:none}.asu\:after\:h-0\.5:after{content:var(--tw-content);height:calc(var(--asu-spacing) * .5)}.asu\:after\:bg-primary:after{content:var(--tw-content);background-color:var(--asu-primary)}.asu\:after\:content-\[\"\"\]:after{--tw-content:"";content:var(--tw-content)}.asu\:last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.asu\:empty\:p-0:empty{padding:0}.asu\:focus-within\:border-ring:focus-within{border-color:var(--asu-ring)}.asu\:focus-within\:ring-2:focus-within{--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)}.asu\:focus-within\:ring-ring\/30:focus-within{--tw-ring-color:var(--asu-ring)}@supports (color:color-mix(in lab, red, red)){.asu\:focus-within\:ring-ring\/30:focus-within{--tw-ring-color:color-mix(in oklab, var(--asu-ring) 30%, transparent)}}@media (hover:hover){.asu\:hover\:bg-accent:hover{background-color:var(--asu-accent)}.asu\:hover\:bg-accent-hover:hover{background-color:var(--asu-accent-hover)}.asu\:hover\:bg-destructive-hover:hover{background-color:var(--asu-destructive-hover)}.asu\:hover\:bg-primary-hover:hover{background-color:var(--asu-primary-hover)}.asu\:hover\:bg-secondary-hover:hover{background-color:var(--asu-secondary-hover)}.asu\:hover\:bg-sidebar-accent:hover{background-color:var(--asu-sidebar-accent)}.asu\:hover\:text-accent-foreground:hover{color:var(--asu-accent-foreground)}.asu\:hover\:text-foreground:hover{color:var(--asu-foreground)}.asu\:hover\:text-secondary-foreground:hover{color:var(--asu-secondary-foreground)}.asu\:hover\:underline:hover{text-decoration-line:underline}.asu\:not-disabled\:not-data-disabled\:not-aria-invalid\:not-data-invalid\:hover\:border-primary-hover:not(:disabled):not([data-disabled]):not([aria-invalid=true]):not([data-invalid]):hover{border-color:var(--asu-primary-hover)}}.asu\:focus-visible\:border-ring:focus-visible{border-color:var(--asu-ring)}.asu\: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)}.asu\:focus-visible\:ring-ring\/30:focus-visible{--tw-ring-color:var(--asu-ring)}@supports (color:color-mix(in lab, red, red)){.asu\:focus-visible\:ring-ring\/30:focus-visible{--tw-ring-color:color-mix(in oklab, var(--asu-ring) 30%, transparent)}}.asu\:focus-visible\:ring-ring\/40:focus-visible{--tw-ring-color:var(--asu-ring)}@supports (color:color-mix(in lab, red, red)){.asu\:focus-visible\:ring-ring\/40:focus-visible{--tw-ring-color:color-mix(in oklab, var(--asu-ring) 40%, transparent)}}.asu\:disabled\:pointer-events-none:disabled{pointer-events:none}.asu\:disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.asu\:disabled\:bg-muted:disabled{background-color:var(--asu-muted)}.asu\:disabled\:opacity-50:disabled{opacity:.5}.asu\:has-focus-visible\:ring-2:has(: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)}.asu\:has-focus-visible\:ring-ring\/40:has(:focus-visible){--tw-ring-color:var(--asu-ring)}@supports (color:color-mix(in lab, red, red)){.asu\:has-focus-visible\:ring-ring\/40:has(:focus-visible){--tw-ring-color:color-mix(in oklab, var(--asu-ring) 40%, transparent)}}.asu\:aria-invalid\:border-destructive[aria-invalid=true]{border-color:var(--asu-destructive)}.asu\:aria-invalid\:focus-within\:ring-destructive\/30[aria-invalid=true]:focus-within{--tw-ring-color:var(--asu-destructive)}@supports (color:color-mix(in lab, red, red)){.asu\:aria-invalid\:focus-within\:ring-destructive\/30[aria-invalid=true]:focus-within{--tw-ring-color:color-mix(in oklab, var(--asu-destructive) 30%, transparent)}}.asu\:aria-invalid\:focus-visible\:ring-destructive\/30[aria-invalid=true]:focus-visible{--tw-ring-color:var(--asu-destructive)}@supports (color:color-mix(in lab, red, red)){.asu\:aria-invalid\:focus-visible\:ring-destructive\/30[aria-invalid=true]:focus-visible{--tw-ring-color:color-mix(in oklab, var(--asu-destructive) 30%, transparent)}}.asu\:data-active\:text-primary[data-active]{color:var(--asu-primary)}.asu\:data-active\:after\:block[data-active]:after{content:var(--tw-content);display:block}.asu\:data-checked\:border-primary[data-checked]{border-color:var(--asu-primary)}.asu\:data-checked\:bg-primary[data-checked]{background-color:var(--asu-primary)}.asu\:group-data-\[size\=md\]\/switch\:data-checked\:translate-x-4:is(:where(.asu\:group\/switch)[data-size=md] *)[data-checked]{--tw-translate-x:calc(var(--asu-spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.asu\:group-data-\[size\=sm\]\/switch\:data-checked\:translate-x-3:is(:where(.asu\:group\/switch)[data-size=sm] *)[data-checked]{--tw-translate-x:calc(var(--asu-spacing) * 3);translate:var(--tw-translate-x) var(--tw-translate-y)}.asu\:data-disabled\:pointer-events-none[data-disabled]{pointer-events:none}.asu\:data-disabled\:cursor-not-allowed[data-disabled]{cursor:not-allowed}.asu\:data-disabled\:bg-muted[data-disabled]{background-color:var(--asu-muted)}.asu\:data-disabled\:text-muted-foreground[data-disabled]{color:var(--asu-muted-foreground)}.asu\:data-disabled\:opacity-50[data-disabled]{opacity:.5}.asu\:data-ending-style\:translate-x-full[data-ending-style]{--tw-translate-x:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.asu\:data-ending-style\:scale-95[data-ending-style]{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.asu\:data-ending-style\:opacity-0[data-ending-style]{opacity:0}.asu\:data-highlighted\:bg-accent[data-highlighted]{background-color:var(--asu-accent)}.asu\:data-highlighted\:bg-accent-hover[data-highlighted]{background-color:var(--asu-accent-hover)}.asu\:data-highlighted\:bg-destructive-subtle[data-highlighted]{background-color:var(--asu-destructive-subtle)}.asu\:data-indeterminate\:border-primary[data-indeterminate]{border-color:var(--asu-primary)}.asu\:data-indeterminate\:bg-primary[data-indeterminate]{background-color:var(--asu-primary)}.asu\:data-invalid\:border-destructive[data-invalid]{border-color:var(--asu-destructive)}.asu\:data-invalid\:focus-within\:ring-destructive\/30[data-invalid]:focus-within{--tw-ring-color:var(--asu-destructive)}@supports (color:color-mix(in lab, red, red)){.asu\:data-invalid\:focus-within\:ring-destructive\/30[data-invalid]:focus-within{--tw-ring-color:color-mix(in oklab, var(--asu-destructive) 30%, transparent)}}.asu\:data-invalid\:focus-visible\:ring-destructive\/30[data-invalid]:focus-visible{--tw-ring-color:var(--asu-destructive)}@supports (color:color-mix(in lab, red, red)){.asu\:data-invalid\:focus-visible\:ring-destructive\/30[data-invalid]:focus-visible{--tw-ring-color:color-mix(in oklab, var(--asu-destructive) 30%, transparent)}}.asu\:data-join-next\:after\:absolute[data-join-next]:after{content:var(--tw-content);position:absolute}.asu\:data-join-next\:after\:top-1\/2[data-join-next]:after{content:var(--tw-content);top:50%}.asu\:data-join-next\:after\:right-0[data-join-next]:after{content:var(--tw-content);right:0}.asu\:data-join-next\:after\:h-6[data-join-next]:after{content:var(--tw-content);height:calc(var(--asu-spacing) * 6)}.asu\:data-join-next\:after\:w-1[data-join-next]:after{content:var(--tw-content);width:var(--asu-spacing)}.asu\:data-join-next\:after\:-translate-y-1\/2[data-join-next]:after{content:var(--tw-content);--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.asu\:data-join-next\:after\:bg-info-subtle[data-join-next]:after{content:var(--tw-content);background-color:var(--asu-info-subtle)}.asu\:data-join-prev\:after\:absolute[data-join-prev]:after{content:var(--tw-content);position:absolute}.asu\:data-join-prev\:after\:top-1\/2[data-join-prev]:after{content:var(--tw-content);top:50%}.asu\:data-join-prev\:after\:left-0[data-join-prev]:after{content:var(--tw-content);left:0}.asu\:data-join-prev\:after\:h-6[data-join-prev]:after{content:var(--tw-content);height:calc(var(--asu-spacing) * 6)}.asu\:data-join-prev\:after\:w-1[data-join-prev]:after{content:var(--tw-content);width:var(--asu-spacing)}.asu\:data-join-prev\:after\:-translate-y-1\/2[data-join-prev]:after{content:var(--tw-content);--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.asu\:data-join-prev\:after\:bg-info-subtle[data-join-prev]:after{content:var(--tw-content);background-color:var(--asu-info-subtle)}.asu\:data-limited\:hidden[data-limited]{display:none}.asu\:data-placeholder\:text-muted-foreground[data-placeholder]{color:var(--asu-muted-foreground)}.asu\:data-row-end\:before\:end-1[data-row-end]:before{content:var(--tw-content);inset-inline-end:calc(var(--asu-spacing) * 1)}.asu\:data-row-start\:before\:start-1[data-row-start]:before{content:var(--tw-content);inset-inline-start:calc(var(--asu-spacing) * 1)}.asu\:data-selected\:bg-accent-selected[data-selected]{background-color:var(--asu-accent-selected)}.asu\:data-starting-style\:translate-x-full[data-starting-style]{--tw-translate-x:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.asu\:data-starting-style\:scale-95[data-starting-style]{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.asu\:data-starting-style\:opacity-0[data-starting-style]{opacity:0}.asu\:data-unchecked\:translate-x-0[data-unchecked]{--tw-translate-x:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.asu\:data-unchecked\:bg-input[data-unchecked]{background-color:var(--asu-input)}.asu\:data-\[orientation\=horizontal\]\:h-px[data-orientation=horizontal]{height:1px}.asu\:data-\[orientation\=horizontal\]\:w-full[data-orientation=horizontal]{width:100%}.asu\:data-\[orientation\=vertical\]\:w-px[data-orientation=vertical]{width:1px}.asu\:data-\[orientation\=vertical\]\:flex-col[data-orientation=vertical]{flex-direction:column}.asu\:data-\[orientation\=vertical\]\:flex-row[data-orientation=vertical]{flex-direction:row}.asu\:data-\[orientation\=vertical\]\:self-stretch[data-orientation=vertical]{align-self:stretch}.asu\:data-\[orientation\=vertical\]\:overflow-x-visible[data-orientation=vertical]{overflow-x:visible}.asu\:data-\[orientation\=vertical\]\:pt-0[data-orientation=vertical]{padding-top:0}.asu\:data-\[orientation\=vertical\]\:pl-4[data-orientation=vertical]{padding-left:calc(var(--asu-spacing) * 4)}.asu\:data-\[orientation\=vertical\]\:shadow-\[inset_-1px_0_0_0_var\(--asu-border\)\][data-orientation=vertical]{--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,var(--asu-border));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.asu\:data-\[orientation\=vertical\]\:after\:inset-x-auto[data-orientation=vertical]:after{content:var(--tw-content);inset-inline:auto}.asu\:data-\[orientation\=vertical\]\:after\:inset-y-\[-10px\][data-orientation=vertical]:after{content:var(--tw-content);inset-block:-10px}.asu\:data-\[orientation\=vertical\]\:after\:right-\[-1px\][data-orientation=vertical]:after{content:var(--tw-content);right:-1px}.asu\:data-\[orientation\=vertical\]\:after\:bottom-auto[data-orientation=vertical]:after{content:var(--tw-content);bottom:auto}.asu\:data-\[orientation\=vertical\]\:after\:h-auto[data-orientation=vertical]:after{content:var(--tw-content);height:auto}.asu\:data-\[orientation\=vertical\]\:after\:w-0\.5[data-orientation=vertical]:after{content:var(--tw-content);width:calc(var(--asu-spacing) * .5)}.asu\:data-\[side\=bottom\]\:-top-1[data-side=bottom]{top:calc(var(--asu-spacing) * -1)}.asu\:data-\[side\=left\]\:-right-1[data-side=left]{right:calc(var(--asu-spacing) * -1)}.asu\:data-\[side\=right\]\:-left-1[data-side=right]{left:calc(var(--asu-spacing) * -1)}.asu\:data-\[side\=top\]\:-bottom-1[data-side=top]{bottom:calc(var(--asu-spacing) * -1)}.asu\:data-\[size\=md\]\:h-5[data-size=md]{height:calc(var(--asu-spacing) * 5)}.asu\:data-\[size\=md\]\:w-9[data-size=md]{width:calc(var(--asu-spacing) * 9)}.asu\:data-\[size\=sm\]\:h-4[data-size=sm]{height:calc(var(--asu-spacing) * 4)}.asu\:data-\[size\=sm\]\:w-7[data-size=sm]{width:calc(var(--asu-spacing) * 7)}@media (prefers-reduced-motion:reduce){.asu\:motion-reduce\:transition-none{transition-property:none}}@media (min-width:40rem){.asu\:sm\:flex-row{flex-direction:row}}.asu\:\[\&_\[data-slot\=button\]\]\:-mx-3 [data-slot=button]{margin-inline:calc(var(--asu-spacing) * -3)}.asu\:\[\&_\[data-slot\=button\]\]\:h-full [data-slot=button]{height:100%}.asu\:\[\&_\[data-slot\=button\]\]\:rounded-none [data-slot=button]{border-radius:0}.asu\:\[\&_\[data-slot\=button\]\]\:border-0 [data-slot=button]{border-style:var(--tw-border-style);border-width:0}.asu\:\[\&_\[data-slot\=button\]\]\:bg-transparent [data-slot=button]{background-color:#0000}.asu\:\[\&_\[data-slot\=button\]\]\:text-foreground [data-slot=button]{color:var(--asu-foreground)}@media (hover:hover){.asu\:\[\&_\[data-slot\=button\]\]\:hover\:bg-accent [data-slot=button]:hover{background-color:var(--asu-accent)}}.asu\:\[\&_\[data-slot\=button\]\]\:focus-visible\:ring-ring [data-slot=button]:focus-visible{--tw-ring-color:var(--asu-ring)}.asu\:\[\&_\[data-slot\=button\]\]\:focus-visible\:ring-inset [data-slot=button]:focus-visible{--tw-ring-inset:inset}.asu\:\[\&_img\]\:inline-block img{display:inline-block}.asu\:\[\&_img\]\:size-full img{width:100%;height:100%}.asu\:\[\&_img\]\:object-contain img{object-fit:contain}.asu\:\[\&_img\]\:align-text-bottom img{vertical-align:text-bottom}.asu\:\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.asu\:\[\&_svg\]\:inline-block svg{display:inline-block}.asu\:\[\&_svg\]\:size-3 svg{width:calc(var(--asu-spacing) * 3);height:calc(var(--asu-spacing) * 3)}.asu\:\[\&_svg\]\:size-4 svg{width:calc(var(--asu-spacing) * 4);height:calc(var(--asu-spacing) * 4)}.asu\:\[\&_svg\]\:size-full svg{width:100%;height:100%}.asu\:\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.asu\:\[\&_svg\]\:align-text-bottom svg{vertical-align:text-bottom}.asu\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 svg:not([class*=size-]){width:calc(var(--asu-spacing) * 3.5);height:calc(var(--asu-spacing) * 3.5)}.asu\:\[\&_svg\:not\(\[class\*\=size-\]\)\]\:size-5 svg:not([class*=size-]){width:calc(var(--asu-spacing) * 5);height:calc(var(--asu-spacing) * 5)}.asu\:\[\&_tr\:hover\]\:bg-muted\/50 tr:hover{background-color:var(--asu-muted)}@supports (color:color-mix(in lab, red, red)){.asu\:\[\&_tr\:hover\]\:bg-muted\/50 tr:hover{background-color:color-mix(in oklab, var(--asu-muted) 50%, transparent)}}.asu\:\[\&\:not\(\[data-range-middle\]\)\>button\]\:bg-primary:not([data-range-middle])>button{background-color:var(--asu-primary)}.asu\:\[\&\:not\(\[data-range-middle\]\)\>button\]\:text-primary-foreground:not([data-range-middle])>button{color:var(--asu-primary-foreground)}@media (hover:hover){.asu\:\[\&\:not\(\[data-range-middle\]\)\>button\]\:hover\:bg-primary:not([data-range-middle])>button:hover{background-color:var(--asu-primary)}}.asu\:\[\&\>\[data-slot\=button\]\]\:focus-visible\:relative>[data-slot=button]:focus-visible{position:relative}.asu\:\[\&\>\[data-slot\=button\]\]\:focus-visible\:z-10>[data-slot=button]:focus-visible{z-index:10}.asu\:\[\&\>\[data-slot\=button\]\:is\(\[data-variant\=primary\]\,\[data-variant\=secondary\]\,\[data-variant\=destructive\]\)\+\[data-slot\=input\]\]\:ml-0>[data-slot=button]:is([data-variant=primary],[data-variant=secondary],[data-variant=destructive])+[data-slot=input]{margin-left:0}.asu\:\[\&\>\[data-slot\=button\]\:is\(\[data-variant\=primary\]\,\[data-variant\=secondary\]\,\[data-variant\=destructive\]\)\+\[data-slot\=input\]\:not\(\:focus-visible\)\:not\(\[aria-invalid\=true\]\)\]\:border-l-transparent>[data-slot=button]:is([data-variant=primary],[data-variant=secondary],[data-variant=destructive])+[data-slot=input]:not(:focus-visible):not([aria-invalid=true]){border-left-color:#0000}.asu\:\[\&\>\[data-slot\=button\]\[data-variant\=outline\]\]\:border-input>[data-slot=button][data-variant=outline]{border-color:var(--asu-input)}.asu\:\[\&\>\[data-slot\=button\]\[data-variant\=outline\]\:focus-visible\:has\(\+\[data-slot\=input\]\)\]\:border-r-input>[data-slot=button][data-variant=outline]:focus-visible:has(+[data-slot=input]){border-right-color:var(--asu-input)}.asu\:\[\&\>\[data-slot\=input\]\]\:relative>[data-slot=input]{position:relative}.asu\:\[\&\>\[data-slot\=input\]\]\:flex-1>[data-slot=input]{flex:1}.asu\:\[\&\>\[data-slot\=input\]\]\:focus-visible\:z-10>[data-slot=input]:focus-visible{z-index:10}.asu\:\[\&\>\[data-slot\=input\]\+\[data-slot\=button\]\:is\(\[data-variant\=primary\]\,\[data-variant\=secondary\]\,\[data-variant\=destructive\]\)\]\:ml-0>[data-slot=input]+[data-slot=button]:is([data-variant=primary],[data-variant=secondary],[data-variant=destructive]){margin-left:0}.asu\:\[\&\>\[data-slot\=input\]\+\[data-slot\=button\]\[data-variant\=outline\]\:focus-visible\]\:border-l-input>[data-slot=input]+[data-slot=button][data-variant=outline]:focus-visible{border-left-color:var(--asu-input)}.asu\:\[\&\>\[data-slot\=input\]\+\[data-slot\]\[data-slot\]\]\:border-l-transparent>[data-slot=input]+[data-slot][data-slot]{border-left-color:#0000}.asu\:\[\&\>\[data-slot\=input\]\:not\(\:focus-visible\)\:not\(\[aria-invalid\=true\]\)\:has\(\+\[data-slot\=button\]\:is\(\[data-variant\=primary\]\,\[data-variant\=secondary\]\,\[data-variant\=destructive\]\)\)\]\:border-r-transparent>[data-slot=input]:not(:focus-visible):not([aria-invalid=true]):has(+[data-slot=button]:is([data-variant=primary],[data-variant=secondary],[data-variant=destructive])){border-right-color:#0000}.asu\:\[\&\>\[data-slot\]\]\:h-auto>[data-slot]{height:auto}.asu\:\[\&\>\[data-slot\]\]\:rounded-none>[data-slot]{border-radius:0}.asu\:\[\&\>\[data-slot\]\:first-child\]\:rounded-l-sm>[data-slot]:first-child{border-top-left-radius:var(--asu-radius-sm);border-bottom-left-radius:var(--asu-radius-sm)}.asu\:\[\&\>\[data-slot\]\:last-child\]\:rounded-r-sm>[data-slot]:last-child{border-top-right-radius:var(--asu-radius-sm);border-bottom-right-radius:var(--asu-radius-sm)}.asu\:\[\&\>\[data-slot\]\:not\(\:first-child\)\]\:-ml-px>[data-slot]:not(:first-child){margin-left:-1px}.asu\:\[\&\>\[data-slot\]\[data-slot\]\:has\(\+\[data-slot\=input\]\)\]\:border-r-transparent>[data-slot][data-slot]:has(+[data-slot=input]){border-right-color:#0000}.asu\:\[\&\>button\]\:pointer-events-none>button{pointer-events:none}.asu\:\[\&\>button\]\:text-muted-foreground>button{color:var(--asu-muted-foreground)}.asu\:\[\&\>button\]\:opacity-50>button{opacity:.5}.asu\:\[\&\>img\:first-child\]\:me-1\.5>img:first-child{margin-inline-end:calc(var(--asu-spacing) * 1.5)}.asu\:\[\&\>svg\]\:mt-0\.5>svg{margin-top:calc(var(--asu-spacing) * .5)}.asu\:\[\&\>svg\]\:size-3\.5>svg{width:calc(var(--asu-spacing) * 3.5);height:calc(var(--asu-spacing) * 3.5)}.asu\:\[\&\>svg\]\:size-4>svg{width:calc(var(--asu-spacing) * 4);height:calc(var(--asu-spacing) * 4)}.asu\:\[\&\>svg\]\:size-5>svg{width:calc(var(--asu-spacing) * 5);height:calc(var(--asu-spacing) * 5)}.asu\:\[\&\>svg\]\:shrink-0>svg{flex-shrink:0}.asu\:\[\&\>svg\]\:text-destructive>svg{color:var(--asu-destructive)}.asu\:\[\&\>svg\]\:text-info>svg{color:var(--asu-info)}.asu\:\[\&\>svg\]\:text-muted-foreground>svg{color:var(--asu-muted-foreground)}.asu\:\[\&\>svg\]\:text-success>svg{color:var(--asu-success)}.asu\:\[\&\>svg\]\:text-warning>svg{color:var(--asu-warning)}.asu\:\[\&\>svg\:first-child\]\:me-1\.5>svg:first-child{margin-inline-end:calc(var(--asu-spacing) * 1.5)}@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-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{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-duration{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@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}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}
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-border-style:solid;--tw-leading:initial;--tw-font-weight: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-duration:initial;--tw-content:"";--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}:root,:host{--asu-font-sans:"Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;--asu-font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--asu-spacing:.25rem;--asu-container-xs:20rem;--asu-container-sm:24rem;--asu-container-md:28rem;--asu-container-xl:36rem;--asu-container-3xl:48rem;--asu-text-xs:.75rem;--asu-text-xs--line-height:calc(1 / .75);--asu-text-sm:.875rem;--asu-text-sm--line-height:calc(1.25 / .875);--asu-text-base:1rem;--asu-text-base--line-height:calc(1.5 / 1);--asu-text-lg:1.125rem;--asu-text-lg--line-height:calc(1.75 / 1.125);--asu-text-xl:1.25rem;--asu-text-xl--line-height:calc(1.75 / 1.25);--asu-text-4xl:2.25rem;--asu-text-4xl--line-height:calc(2.5 / 2.25);--asu-font-weight-normal:400;--asu-font-weight-medium:500;--asu-font-weight-semibold:600;--asu-animate-spin:spin 1s linear infinite;--asu-animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--asu-default-transition-duration:.15s;--asu-default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--asu-default-font-family:var(--asu-font-sans);--asu-default-mono-font-family:var(--asu-font-mono);--asu-color-white:#fff;--asu-color-black:#000;--asu-color-gray-50:#fcfcfc;--asu-color-gray-100:#f7f7f7;--asu-color-gray-200:#f0f0f0;--asu-color-gray-300:#e0e0e0;--asu-color-gray-400:silver;--asu-color-gray-500:#969696;--asu-color-gray-600:#686868;--asu-color-gray-700:#484848;--asu-color-gray-800:#2c2c2c;--asu-color-gray-900:#232323;--asu-color-gray-950:#1a1a1a;--asu-color-slate-50:#f5f6fa;--asu-color-slate-100:#eaecf3;--asu-color-slate-200:#dfe3ec;--asu-color-slate-300:#bfc7d8;--asu-color-slate-400:#a0abc5;--asu-color-slate-500:#818eb1;--asu-color-slate-600:#626e8f;--asu-color-slate-700:#44506f;--asu-color-slate-800:#3c4557;--asu-color-slate-900:#282f3d;--asu-color-slate-950:#151b25;--asu-color-blue-50:#ecf5fd;--asu-color-blue-100:#d6eaff;--asu-color-blue-200:#add0f8;--asu-color-blue-300:#84b6f0;--asu-color-blue-400:#5e9ae8;--asu-color-blue-500:#377ede;--asu-color-blue-600:#065fd4;--asu-color-blue-700:#084ba4;--asu-color-blue-800:#043566;--asu-color-blue-900:#01274f;--asu-color-blue-950:#001a39;--asu-color-green-50:#f7fff9;--asu-color-green-100:#e1fae5;--asu-color-green-200:#cbf5d1;--asu-color-green-300:#95eda3;--asu-color-green-400:#60e074;--asu-color-green-500:#32d74b;--asu-color-green-600:#1fa333;--asu-color-green-700:#11701f;--asu-color-green-800:#074210;--asu-color-green-900:#022408;--asu-color-green-950:#041907;--asu-color-red-50:#fff8f7;--asu-color-red-100:#ffe2e0;--asu-color-red-200:#fda19d;--asu-color-red-300:#fa7069;--asu-color-red-400:#f84037;--asu-color-red-500:#f80d05;--asu-color-red-600:#c40a04;--asu-color-red-700:#910601;--asu-color-red-800:#5e0401;--asu-color-red-900:#2b0100;--asu-color-red-950:#1a0201;--asu-color-yellow-50:#fdfbef;--asu-color-yellow-100:#fff8d6;--asu-color-yellow-200:#fff0a3;--asu-color-yellow-300:#ffe770;--asu-color-yellow-400:#ffdf3d;--asu-color-yellow-500:#ccab08;--asu-color-yellow-600:#998006;--asu-color-yellow-700:#665202;--asu-color-yellow-800:#4e3e00;--asu-color-yellow-900:#372b00;--asu-color-yellow-950:#221a00;--asu-color-orange-50:#fff9f0;--asu-color-orange-100:#ffefd6;--asu-color-orange-200:#feddaf;--asu-color-orange-300:#feca86;--asu-color-orange-400:#ffb559;--asu-color-orange-500:#ff9f0a;--asu-color-orange-600:#cc7f08;--asu-color-orange-700:#995f06;--asu-color-orange-800:#664004;--asu-color-orange-900:#462a00;--asu-color-orange-950:#281600;--asu-color-cyan-50:#eff9fd;--asu-color-cyan-100:#d6f3ff;--asu-color-cyan-200:#b8dcec;--asu-color-cyan-300:#9ac5d8;--asu-color-cyan-400:#7dafc6;--asu-color-cyan-500:#5f99b3;--asu-color-cyan-600:#4183a1;--asu-color-cyan-700:#1e6e8f;--asu-color-cyan-800:#0c445c;--asu-color-cyan-900:#023044;--asu-color-cyan-950:#001e2c;--asu-color-indigo-50:#f6f6fc;--asu-color-indigo-100:#e4e4f5;--asu-color-indigo-200:#c2c3f3;--asu-color-indigo-300:#a0a2f0;--asu-color-indigo-400:#7e80ec;--asu-color-indigo-500:#5e5ce6;--asu-color-indigo-600:#3d3fbf;--asu-color-indigo-700:#201f99;--asu-color-indigo-800:#161466;--asu-color-indigo-900:#0f0e51;--asu-color-indigo-950:#09083c;--asu-color-purple-50:#faf4fd;--asu-color-purple-100:#f4e3fd;--asu-color-purple-200:#dcc2ea;--asu-color-purple-300:#c4a1d7;--asu-color-purple-400:#ab81c5;--asu-color-purple-500:#9461b2;--asu-color-purple-600:#7c409f;--asu-color-purple-700:#65188c;--asu-color-purple-800:#460766;--asu-color-purple-900:#370551;--asu-color-purple-950:#29033d;--asu-color-pink-50:#fef3f8;--asu-color-pink-100:#ffe0ed;--asu-color-pink-200:#f0c0d2;--asu-color-pink-300:#e0a0b7;--asu-color-pink-400:#cf809b;--asu-color-pink-500:#be607f;--asu-color-pink-600:#ac3e63;--asu-color-pink-700:#991147;--asu-color-pink-800:#800a39;--asu-color-pink-900:#5c0026;--asu-color-pink-950:#380014;--asu-radius-sm:2px;--asu-radius-md:4px}@layer base{:where([data-slot],[data-slot] *),:where([data-slot],[data-slot] *):after,:where([data-slot],[data-slot] *):before,:where([data-slot],[data-slot] *)::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}:where([data-slot],[data-slot] *)::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}:where([data-slot]):not(:where([data-slot] *)){-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--asu-default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--asu-default-font-feature-settings,normal);font-variation-settings:var(--asu-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}:where(hr[data-slot],[data-slot] hr){height:0;color:inherit;border-top-width:1px}:where(abbr:where([title])[data-slot],[data-slot] abbr:where([title])){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(h1[data-slot],[data-slot] h1),:where(h2[data-slot],[data-slot] h2),:where(h3[data-slot],[data-slot] h3),:where(h4[data-slot],[data-slot] h4),:where(h5[data-slot],[data-slot] h5),:where(h6[data-slot],[data-slot] h6){font-size:inherit;font-weight:inherit}:where(a[data-slot],[data-slot] a){color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}:where(b[data-slot],[data-slot] b),:where(strong[data-slot],[data-slot] strong){font-weight:bolder}:where(code[data-slot],[data-slot] code),:where(kbd[data-slot],[data-slot] kbd),:where(samp[data-slot],[data-slot] samp),:where(pre[data-slot],[data-slot] pre){font-family:var(--asu-default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--asu-default-mono-font-feature-settings,normal);font-variation-settings:var(--asu-default-mono-font-variation-settings,normal);font-size:1em}:where(small[data-slot],[data-slot] small){font-size:80%}:where(sub[data-slot],[data-slot] sub),:where(sup[data-slot],[data-slot] sup){vertical-align:baseline;font-size:75%;line-height:0;position:relative}:where(sub[data-slot],[data-slot] sub){bottom:-.25em}:where(sup[data-slot],[data-slot] sup){top:-.5em}:where(table[data-slot],[data-slot] table){text-indent:0;border-color:inherit;border-collapse:collapse}:where([data-slot],[data-slot] *):-moz-focusring:where(:not(iframe)){outline:auto}:where(progress[data-slot],[data-slot] progress){vertical-align:baseline}:where(summary[data-slot],[data-slot] summary){display:list-item}:where(ol[data-slot],[data-slot] ol),:where(ul[data-slot],[data-slot] ul),:where(menu[data-slot],[data-slot] menu){list-style:none}:where(img[data-slot],[data-slot] img),:where(svg[data-slot],[data-slot] svg),:where(video[data-slot],[data-slot] video),:where(canvas[data-slot],[data-slot] canvas),:where(audio[data-slot],[data-slot] audio),:where(iframe[data-slot],[data-slot] iframe),:where(embed[data-slot],[data-slot] embed),:where(object[data-slot],[data-slot] object){vertical-align:middle;display:block}:where(img[data-slot],[data-slot] img),:where(video[data-slot],[data-slot] video){max-width:100%;height:auto}:where([data-slot] button),:where([data-slot] input),:where([data-slot] select),:where([data-slot] optgroup),:where([data-slot] textarea){font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}:where([data-slot],[data-slot] *)::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}:where(button[data-slot],[data-slot] button),:where(input[data-slot],[data-slot] input),:where(select[data-slot],[data-slot] select),:where(optgroup[data-slot],[data-slot] optgroup),:where(textarea[data-slot],[data-slot] textarea){opacity:1;background-color:#0000;border-radius:0}:where([data-slot],[data-slot] *)::file-selector-button{opacity:1;background-color:#0000;border-radius:0}:where(:where(select:is([multiple],[size])) optgroup[data-slot],[data-slot] :where(select:is([multiple],[size])) optgroup){font-weight:bolder}:where(:where(select:is([multiple],[size])) optgroup option[data-slot],[data-slot] :where(select:is([multiple],[size])) optgroup option){padding-inline-start:20px}:where([data-slot],[data-slot] *)::file-selector-button{margin-inline-end:4px}:where([data-slot],[data-slot] *)::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){:where([data-slot],[data-slot] *)::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){:where([data-slot],[data-slot] *)::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}:where(textarea[data-slot],[data-slot] textarea){resize:vertical}:where([data-slot],[data-slot] *)::-webkit-search-decoration{-webkit-appearance:none}:where([data-slot],[data-slot] *)::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}:where([data-slot],[data-slot] *)::-webkit-datetime-edit{display:inline-flex}:where([data-slot],[data-slot] *)::-webkit-datetime-edit-fields-wrapper{padding:0}:where([data-slot],[data-slot] *)::-webkit-datetime-edit{padding-block:0}:where([data-slot],[data-slot] *)::-webkit-datetime-edit-year-field{padding-block:0}:where([data-slot],[data-slot] *)::-webkit-datetime-edit-month-field{padding-block:0}:where([data-slot],[data-slot] *)::-webkit-datetime-edit-day-field{padding-block:0}:where([data-slot],[data-slot] *)::-webkit-datetime-edit-hour-field{padding-block:0}:where([data-slot],[data-slot] *)::-webkit-datetime-edit-minute-field{padding-block:0}:where([data-slot],[data-slot] *)::-webkit-datetime-edit-second-field{padding-block:0}:where([data-slot],[data-slot] *)::-webkit-datetime-edit-millisecond-field{padding-block:0}:where([data-slot],[data-slot] *)::-webkit-datetime-edit-meridiem-field{padding-block:0}:where([data-slot],[data-slot] *)::-webkit-calendar-picker-indicator{line-height:1}:where([data-slot],[data-slot] *):-moz-ui-invalid{box-shadow:none}:where(button[data-slot],[data-slot] button),:where(input:where([type=button],[type=reset],[type=submit])[data-slot],[data-slot] input:where([type=button],[type=reset],[type=submit])){appearance:button}:where([data-slot],[data-slot] *)::file-selector-button{appearance:button}:where([data-slot],[data-slot] *)::-webkit-inner-spin-button{height:auto}:where([data-slot],[data-slot] *)::-webkit-outer-spin-button{height:auto}:where([data-slot][hidden],[data-slot] [hidden]):where(:not([hidden=until-found])){display:none!important}:where([data-slot],[data-slot] *),:where([data-slot],[data-slot] *):before,:where([data-slot],[data-slot] *):after,:where([data-slot],[data-slot] *)::backdrop{border-color:var(--asu-border)}:where([data-slot],[data-slot] *)::file-selector-button{border-color:var(--asu-border)}:where([data-slot]):not(:where([data-slot] *)){color:var(--asu-foreground);font-family:var(--asu-font-sans);font-size:var(--asu-text-sm);line-height:var(--asu-text-sm--line-height)}}:root,[data-theme=light]{color-scheme:light;--asu-background:#fff;--asu-foreground:#2c2c2c;--asu-card:#fff;--asu-card-foreground:#2c2c2c;--asu-popover:#fff;--asu-popover-foreground:#2c2c2c;--asu-primary:#065fd4;--asu-primary-hover:#084ba4;--asu-primary-foreground:#fff;--asu-primary-text:#065fd4;--asu-secondary:#f7f7f7;--asu-secondary-foreground:#2c2c2c;--asu-muted:#f7f7f7;--asu-muted-foreground:#686868;--asu-accent:#f7f7f7;--asu-accent-foreground:#2c2c2c;--asu-destructive:#c40a04;--asu-destructive-hover:#910601;--asu-destructive-foreground:#fff;--asu-destructive-text:#c40a04;--asu-destructive-subtle:#fff8f7;--asu-success:#1fa333;--asu-success-foreground:#11701f;--asu-success-subtle:#f7fff9;--asu-warning:#cc7f08;--asu-warning-foreground:#995f06;--asu-warning-subtle:#fff9f0;--asu-info:#065fd4;--asu-info-foreground:#084ba4;--asu-info-subtle:#ecf5fd;--asu-border:#f0f0f0;--asu-input:#e0e0e0;--asu-ring:#065fd4;--asu-tooltip:#3c4557;--asu-tooltip-foreground:#fff;--asu-table-header:#f5f6fa;--asu-secondary-hover:#f0f0f0;--asu-accent-hover:#f0f0f0;--asu-accent-selected:#e0e0e0;--asu-overlay:#2c2c2c73;--asu-sidebar-accent:#f0f0f0;--asu-sidebar-indicator:#f84037}[data-theme=dark]{color-scheme:dark;--asu-background:#1a1a1a;--asu-foreground:#f7f7f7;--asu-card:#1a1a1a;--asu-card-foreground:#f7f7f7;--asu-popover:#1a1a1a;--asu-popover-foreground:#f7f7f7;--asu-primary:#065fd4;--asu-primary-hover:#084ba4;--asu-primary-foreground:#fff;--asu-primary-text:#5e9ae8;--asu-secondary:#232323;--asu-secondary-foreground:#f7f7f7;--asu-muted:#232323;--asu-muted-foreground:silver;--asu-accent:#232323;--asu-accent-foreground:#f7f7f7;--asu-destructive:#c40a04;--asu-destructive-hover:#910601;--asu-destructive-foreground:#fff;--asu-destructive-text:#fa7069;--asu-destructive-subtle:#5e0401;--asu-success:#32d74b;--asu-success-foreground:#95eda3;--asu-success-subtle:#074210;--asu-warning:#ff9f0a;--asu-warning-foreground:#feca86;--asu-warning-subtle:#664004;--asu-info:#5e9ae8;--asu-info-foreground:#84b6f0;--asu-info-subtle:#043566;--asu-border:#ffffff1a;--asu-input:#ffffff26;--asu-ring:#5e9ae8;--asu-tooltip:#eaecf3;--asu-tooltip-foreground:#151b25;--asu-table-header:#282f3d;--asu-secondary-hover:#2c2c2c;--asu-accent-hover:#2c2c2c;--asu-accent-selected:#484848;--asu-overlay:#0009;--asu-sidebar-accent:#2c2c2c;--asu-sidebar-indicator:#f84037}.asu\:pointer-events-auto{pointer-events:auto}.asu\:pointer-events-none{pointer-events:none}.asu\:invisible{visibility:hidden}.asu\:sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.asu\:absolute{position:absolute}.asu\:fixed{position:fixed}.asu\:relative{position:relative}.asu\:inset-0{inset:0}.asu\:inset-y-0{inset-block:0}.asu\:top-0{top:0}.asu\:top-1{top:var(--asu-spacing)}.asu\:top-1\/2{top:50%}.asu\:top-3{top:calc(var(--asu-spacing) * 3)}.asu\:top-4{top:calc(var(--asu-spacing) * 4)}.asu\:right-0{right:0}.asu\:right-1{right:var(--asu-spacing)}.asu\:right-2{right:calc(var(--asu-spacing) * 2)}.asu\:right-4{right:calc(var(--asu-spacing) * 4)}.asu\:right-6{right:calc(var(--asu-spacing) * 6)}.asu\:right-8{right:calc(var(--asu-spacing) * 8)}.asu\:left-0{left:0}.asu\:left-1\/2{left:50%}.asu\:isolate{isolation:isolate}.asu\:z-\[1010\]{z-index:1010}.asu\:m-0{margin:0}.asu\:m-auto{margin:auto}.asu\:my-1{margin-block:var(--asu-spacing)}.asu\:my-2{margin-block:calc(var(--asu-spacing) * 2)}.asu\:mt-1{margin-top:var(--asu-spacing)}.asu\:mt-3{margin-top:calc(var(--asu-spacing) * 3)}.asu\:mt-4{margin-top:calc(var(--asu-spacing) * 4)}.asu\:mb-1{margin-bottom:var(--asu-spacing)}.asu\:mb-2{margin-bottom:calc(var(--asu-spacing) * 2)}.asu\:ml-2\.5{margin-left:calc(var(--asu-spacing) * 2.5)}.asu\:ml-auto{margin-left:auto}.asu\:block{display:block}.asu\:flex{display:flex}.asu\:inline-block{display:inline-block}.asu\:inline-flex{display:inline-flex}.asu\:field-sizing-content{field-sizing:content}.asu\:size-1\.5{width:calc(var(--asu-spacing) * 1.5);height:calc(var(--asu-spacing) * 1.5)}.asu\:size-2{width:calc(var(--asu-spacing) * 2);height:calc(var(--asu-spacing) * 2)}.asu\:size-2\.5{width:calc(var(--asu-spacing) * 2.5);height:calc(var(--asu-spacing) * 2.5)}.asu\:size-3{width:calc(var(--asu-spacing) * 3);height:calc(var(--asu-spacing) * 3)}.asu\:size-3\.5{width:calc(var(--asu-spacing) * 3.5);height:calc(var(--asu-spacing) * 3.5)}.asu\:size-4{width:calc(var(--asu-spacing) * 4);height:calc(var(--asu-spacing) * 4)}.asu\:size-5{width:calc(var(--asu-spacing) * 5);height:calc(var(--asu-spacing) * 5)}.asu\:size-6{width:calc(var(--asu-spacing) * 6);height:calc(var(--asu-spacing) * 6)}.asu\:size-7{width:calc(var(--asu-spacing) * 7);height:calc(var(--asu-spacing) * 7)}.asu\:size-8{width:calc(var(--asu-spacing) * 8);height:calc(var(--asu-spacing) * 8)}.asu\:size-10{width:calc(var(--asu-spacing) * 10);height:calc(var(--asu-spacing) * 10)}.asu\:size-24{width:calc(var(--asu-spacing) * 24);height:calc(var(--asu-spacing) * 24)}.asu\:size-\[76px\]{width:76px;height:76px}.asu\:size-full{width:100%;height:100%}.asu\:h-4{height:calc(var(--asu-spacing) * 4)}.asu\:h-6{height:calc(var(--asu-spacing) * 6)}.asu\:h-7{height:calc(var(--asu-spacing) * 7)}.asu\:h-8{height:calc(var(--asu-spacing) * 8)}.asu\:h-10{height:calc(var(--asu-spacing) * 10)}.asu\:h-11{height:calc(var(--asu-spacing) * 11)}.asu\:h-13{height:calc(var(--asu-spacing) * 13)}.asu\:h-14{height:calc(var(--asu-spacing) * 14)}.asu\:h-\[200px\]{height:200px}.asu\:h-auto{height:auto}.asu\:h-full{height:100%}.asu\:h-px{height:1px}.asu\:max-h-\[300px\]{max-height:300px}.asu\:max-h-\[596px\]{max-height:596px}.asu\:max-h-\[calc\(100vh-4rem\)\]{max-height:calc(100vh - 4rem)}.asu\:min-h-5{min-height:calc(var(--asu-spacing) * 5)}.asu\:min-h-8{min-height:calc(var(--asu-spacing) * 8)}.asu\:min-h-16{min-height:calc(var(--asu-spacing) * 16)}.asu\:w-1{width:var(--asu-spacing)}.asu\:w-6{width:calc(var(--asu-spacing) * 6)}.asu\:w-72{width:calc(var(--asu-spacing) * 72)}.asu\:w-90{width:calc(var(--asu-spacing) * 90)}.asu\:w-\[90vw\]{width:90vw}.asu\:w-\[110px\]{width:110px}.asu\:w-\[226px\]{width:226px}.asu\:w-\[588px\]{width:588px}.asu\:w-\[748px\]{width:748px}.asu\:w-\[calc\(100vw-2rem\)\]{width:calc(100vw - 2rem)}.asu\:w-auto{width:auto}.asu\:w-fit{width:fit-content}.asu\:w-full{width:100%}.asu\:max-w-3xl{max-width:var(--asu-container-3xl)}.asu\:max-w-\[100vw\]{max-width:100vw}.asu\:max-w-\[500px\]{max-width:500px}.asu\:max-w-\[calc\(100vw-2rem\)\]{max-width:calc(100vw - 2rem)}.asu\:max-w-md{max-width:var(--asu-container-md)}.asu\:max-w-sm{max-width:var(--asu-container-sm)}.asu\:max-w-xl{max-width:var(--asu-container-xl)}.asu\:max-w-xs{max-width:var(--asu-container-xs)}.asu\:min-w-\(--anchor-width\){min-width:var(--anchor-width)}.asu\:min-w-0{min-width:0}.asu\:min-w-16{min-width:calc(var(--asu-spacing) * 16)}.asu\:min-w-40{min-width:calc(var(--asu-spacing) * 40)}.asu\:min-w-48{min-width:calc(var(--asu-spacing) * 48)}.asu\:flex-1{flex:1}.asu\:shrink-0{flex-shrink:0}.asu\:grow-0{flex-grow:0}.asu\:basis-1\/2{flex-basis:50%}.asu\:caption-bottom{caption-side:bottom}.asu\:border-collapse{border-collapse:collapse}.asu\:-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.asu\:-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.asu\:rotate-45{rotate:45deg}.asu\:animate-pulse{animation:var(--asu-animate-pulse)}.asu\:animate-spin{animation:var(--asu-animate-spin)}.asu\:cursor-default{cursor:default}.asu\:cursor-not-allowed{cursor:not-allowed}.asu\:flex-col{flex-direction:column}.asu\:flex-row{flex-direction:row}.asu\:flex-wrap{flex-wrap:wrap}.asu\:items-center{align-items:center}.asu\:items-start{align-items:flex-start}.asu\:items-stretch{align-items:stretch}.asu\:justify-between{justify-content:space-between}.asu\:justify-center{justify-content:center}.asu\:justify-end{justify-content:flex-end}.asu\:gap-0\.5{gap:calc(var(--asu-spacing) * .5)}.asu\:gap-1{gap:var(--asu-spacing)}.asu\:gap-1\.5{gap:calc(var(--asu-spacing) * 1.5)}.asu\:gap-2{gap:calc(var(--asu-spacing) * 2)}.asu\:gap-2\.5{gap:calc(var(--asu-spacing) * 2.5)}.asu\:gap-3{gap:calc(var(--asu-spacing) * 3)}.asu\:gap-4{gap:calc(var(--asu-spacing) * 4)}.asu\:gap-6{gap:calc(var(--asu-spacing) * 6)}.asu\:gap-8{gap:calc(var(--asu-spacing) * 8)}.asu\:self-start{align-self:flex-start}.asu\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.asu\:overflow-hidden{overflow:hidden}.asu\:overflow-x-auto{overflow-x:auto}.asu\:overflow-y-auto{overflow-y:auto}.asu\:rounded-full{border-radius:3.40282e38px}.asu\:rounded-md{border-radius:var(--asu-radius-md)}.asu\:rounded-sm{border-radius:var(--asu-radius-sm)}.asu\:rounded-l-sm{border-top-left-radius:var(--asu-radius-sm);border-bottom-left-radius:var(--asu-radius-sm)}.asu\:rounded-r-none{border-top-right-radius:0;border-bottom-right-radius:0}.asu\:rounded-r-sm{border-top-right-radius:var(--asu-radius-sm);border-bottom-right-radius:var(--asu-radius-sm)}.asu\:border{border-style:var(--tw-border-style);border-width:1px}.asu\:border-0{border-style:var(--tw-border-style);border-width:0}.asu\:border-\[3px\]{border-style:var(--tw-border-style);border-width:3px}.asu\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.asu\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.asu\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.asu\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.asu\:border-l-0{border-left-style:var(--tw-border-style);border-left-width:0}.asu\:border-dashed{--tw-border-style:dashed;border-style:dashed}.asu\:border-border{border-color:var(--asu-border)}.asu\:border-input{border-color:var(--asu-input)}.asu\:border-transparent{border-color:#0000}.asu\:bg-accent{background-color:var(--asu-accent)}.asu\:bg-accent-selected{background-color:var(--asu-accent-selected)}.asu\:bg-background{background-color:var(--asu-background)}.asu\:bg-blue-100{background-color:var(--asu-color-blue-100)}.asu\:bg-border{background-color:var(--asu-border)}.asu\:bg-current{background-color:currentColor}.asu\:bg-cyan-100{background-color:var(--asu-color-cyan-100)}.asu\:bg-destructive{background-color:var(--asu-destructive)}.asu\:bg-destructive-subtle{background-color:var(--asu-destructive-subtle)}.asu\:bg-gray-100{background-color:var(--asu-color-gray-100)}.asu\:bg-green-100{background-color:var(--asu-color-green-100)}.asu\:bg-indigo-100{background-color:var(--asu-color-indigo-100)}.asu\:bg-info-subtle{background-color:var(--asu-info-subtle)}.asu\:bg-muted{background-color:var(--asu-muted)}.asu\:bg-orange-100{background-color:var(--asu-color-orange-100)}.asu\:bg-overlay{background-color:var(--asu-overlay)}.asu\:bg-pink-100{background-color:var(--asu-color-pink-100)}.asu\:bg-popover{background-color:var(--asu-popover)}.asu\:bg-primary{background-color:var(--asu-primary)}.asu\:bg-primary-foreground{background-color:var(--asu-primary-foreground)}.asu\:bg-purple-100{background-color:var(--asu-color-purple-100)}.asu\:bg-red-100{background-color:var(--asu-color-red-100)}.asu\:bg-secondary{background-color:var(--asu-secondary)}.asu\:bg-sidebar-accent{background-color:var(--asu-sidebar-accent)}.asu\:bg-sidebar-indicator{background-color:var(--asu-sidebar-indicator)}.asu\:bg-slate-100{background-color:var(--asu-color-slate-100)}.asu\:bg-success-subtle{background-color:var(--asu-success-subtle)}.asu\:bg-table-header{background-color:var(--asu-table-header)}.asu\:bg-tooltip{background-color:var(--asu-tooltip)}.asu\:bg-transparent{background-color:#0000}.asu\:bg-warning-subtle{background-color:var(--asu-warning-subtle)}.asu\:bg-yellow-100{background-color:var(--asu-color-yellow-100)}.asu\:fill-current{fill:currentColor}.asu\:object-cover{object-fit:cover}.asu\:p-0{padding:0}.asu\:p-0\.5{padding:calc(var(--asu-spacing) * .5)}.asu\:p-2{padding:calc(var(--asu-spacing) * 2)}.asu\:p-3{padding:calc(var(--asu-spacing) * 3)}.asu\:p-4{padding:calc(var(--asu-spacing) * 4)}.asu\:p-6{padding:calc(var(--asu-spacing) * 6)}.asu\:px-0{padding-inline:0}.asu\:px-2{padding-inline:calc(var(--asu-spacing) * 2)}.asu\:px-3{padding-inline:calc(var(--asu-spacing) * 3)}.asu\:px-4{padding-inline:calc(var(--asu-spacing) * 4)}.asu\:px-6{padding-inline:calc(var(--asu-spacing) * 6)}.asu\:px-\[22px\]{padding-inline:22px}.asu\:py-1{padding-block:var(--asu-spacing)}.asu\:py-2{padding-block:calc(var(--asu-spacing) * 2)}.asu\:py-2\.5{padding-block:calc(var(--asu-spacing) * 2.5)}.asu\:py-3{padding-block:calc(var(--asu-spacing) * 3)}.asu\:py-4{padding-block:calc(var(--asu-spacing) * 4)}.asu\:pt-4{padding-top:calc(var(--asu-spacing) * 4)}.asu\:pt-5{padding-top:calc(var(--asu-spacing) * 5)}.asu\:pr-3{padding-right:calc(var(--asu-spacing) * 3)}.asu\:pr-8{padding-right:calc(var(--asu-spacing) * 8)}.asu\:pr-12{padding-right:calc(var(--asu-spacing) * 12)}.asu\:pr-16{padding-right:calc(var(--asu-spacing) * 16)}.asu\:pb-3{padding-bottom:calc(var(--asu-spacing) * 3)}.asu\:pl-3{padding-left:calc(var(--asu-spacing) * 3)}.asu\:pl-4{padding-left:calc(var(--asu-spacing) * 4)}.asu\:text-center{text-align:center}.asu\:text-left{text-align:left}.asu\:align-middle{vertical-align:middle}.asu\:text-4xl{font-size:var(--asu-text-4xl);line-height:var(--tw-leading,var(--asu-text-4xl--line-height))}.asu\:text-base{font-size:var(--asu-text-base);line-height:var(--tw-leading,var(--asu-text-base--line-height))}.asu\:text-lg{font-size:var(--asu-text-lg);line-height:var(--tw-leading,var(--asu-text-lg--line-height))}.asu\:text-sm{font-size:var(--asu-text-sm);line-height:var(--tw-leading,var(--asu-text-sm--line-height))}.asu\:text-xl{font-size:var(--asu-text-xl);line-height:var(--tw-leading,var(--asu-text-xl--line-height))}.asu\:text-xs{font-size:var(--asu-text-xs);line-height:var(--tw-leading,var(--asu-text-xs--line-height))}.asu\:text-\[10px\]{font-size:10px}.asu\:leading-5{--tw-leading:calc(var(--asu-spacing) * 5);line-height:calc(var(--asu-spacing) * 5)}.asu\:leading-\[1\.75\]{--tw-leading:1.75;line-height:1.75}.asu\:font-medium{--tw-font-weight:var(--asu-font-weight-medium);font-weight:var(--asu-font-weight-medium)}.asu\:font-normal{--tw-font-weight:var(--asu-font-weight-normal);font-weight:var(--asu-font-weight-normal)}.asu\:font-semibold{--tw-font-weight:var(--asu-font-weight-semibold);font-weight:var(--asu-font-weight-semibold)}.asu\:whitespace-nowrap{white-space:nowrap}.asu\:text-blue-700{color:var(--asu-color-blue-700)}.asu\:text-cyan-700{color:var(--asu-color-cyan-700)}.asu\:text-destructive-foreground{color:var(--asu-destructive-foreground)}.asu\:text-destructive-text{color:var(--asu-destructive-text)}.asu\:text-foreground{color:var(--asu-foreground)}.asu\:text-gray-700{color:var(--asu-color-gray-700)}.asu\:text-green-700{color:var(--asu-color-green-700)}.asu\:text-indigo-700{color:var(--asu-color-indigo-700)}.asu\:text-info{color:var(--asu-info)}.asu\:text-muted-foreground{color:var(--asu-muted-foreground)}.asu\:text-orange-700{color:var(--asu-color-orange-700)}.asu\:text-pink-700{color:var(--asu-color-pink-700)}.asu\:text-popover-foreground{color:var(--asu-popover-foreground)}.asu\:text-primary-foreground{color:var(--asu-primary-foreground)}.asu\:text-primary-text{color:var(--asu-primary-text)}.asu\:text-purple-700{color:var(--asu-color-purple-700)}.asu\:text-red-700{color:var(--asu-color-red-700)}.asu\:text-secondary-foreground,.asu\:text-secondary-foreground\/70{color:var(--asu-secondary-foreground)}@supports (color:color-mix(in lab, red, red)){.asu\:text-secondary-foreground\/70{color:color-mix(in oklab, var(--asu-secondary-foreground) 70%, transparent)}}.asu\:text-slate-700{color:var(--asu-color-slate-700)}.asu\:text-success{color:var(--asu-success)}.asu\:text-tooltip-foreground{color:var(--asu-tooltip-foreground)}.asu\:text-warning{color:var(--asu-warning)}.asu\:text-white{color:var(--asu-color-white)}.asu\:text-yellow-700{color:var(--asu-color-yellow-700)}.asu\: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,)}.asu\:underline-offset-4{text-underline-offset:4px}.asu\:opacity-0{opacity:0}.asu\:opacity-50{opacity:.5}.asu\:shadow-\[inset_0_-1px_0_0_var\(--asu-border\)\]{--tw-shadow:inset 0 -1px 0 0 var(--tw-shadow-color,var(--asu-border));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.asu\:shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.asu\:shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.asu\:shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.asu\:transition-\[opacity\,scale\]{transition-property:opacity,scale;transition-timing-function:var(--tw-ease,var(--asu-default-transition-timing-function));transition-duration:var(--tw-duration,var(--asu-default-transition-duration))}.asu\: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,var(--asu-default-transition-timing-function));transition-duration:var(--tw-duration,var(--asu-default-transition-duration))}.asu\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--asu-default-transition-timing-function));transition-duration:var(--tw-duration,var(--asu-default-transition-duration))}.asu\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--asu-default-transition-timing-function));transition-duration:var(--tw-duration,var(--asu-default-transition-duration))}.asu\:duration-150{--tw-duration:.15s;transition-duration:.15s}.asu\:duration-200{--tw-duration:.2s;transition-duration:.2s}.asu\:outline-none{--tw-outline-style:none;outline-style:none}.asu\:select-none{-webkit-user-select:none;user-select:none}.asu\:group-focus-within\/row\:opacity-100:is(:where(.asu\:group\/row):focus-within *){opacity:1}@media (hover:hover){.asu\:group-hover\/row\:opacity-100:is(:where(.asu\:group\/row):hover *){opacity:1}}.asu\:group-data-disabled\/number-field\:opacity-50:is(:where(.asu\:group\/number-field)[data-disabled] *){opacity:.5}.asu\:group-data-\[size\=md\]\/switch\:size-4:is(:where(.asu\:group\/switch)[data-size=md] *){width:calc(var(--asu-spacing) * 4);height:calc(var(--asu-spacing) * 4)}.asu\:group-data-\[size\=sm\]\/switch\:size-3:is(:where(.asu\:group\/switch)[data-size=sm] *){width:calc(var(--asu-spacing) * 3);height:calc(var(--asu-spacing) * 3)}.asu\:peer-data-disabled\/select-trigger\:hidden:is(:where(.asu\:peer\/select-trigger)[data-disabled]~*){display:none}.asu\:placeholder\:text-muted-foreground::placeholder{color:var(--asu-muted-foreground)}.asu\:before\:absolute:before{content:var(--tw-content);position:absolute}.asu\:before\:inset-x-0:before{content:var(--tw-content);inset-inline:0}.asu\:before\:inset-y-1:before{content:var(--tw-content);inset-block:var(--asu-spacing)}.asu\:before\:bg-info-subtle:before{content:var(--tw-content);background-color:var(--asu-info-subtle)}.asu\:after\:pointer-events-none:after{content:var(--tw-content);pointer-events:none}.asu\:after\:absolute:after{content:var(--tw-content);position:absolute}.asu\:after\:inset-x-\[-10px\]:after{content:var(--tw-content);inset-inline:-10px}.asu\:after\:bottom-0:after{content:var(--tw-content);bottom:0}.asu\:after\:hidden:after{content:var(--tw-content);display:none}.asu\:after\:h-0\.5:after{content:var(--tw-content);height:calc(var(--asu-spacing) * .5)}.asu\:after\:bg-primary:after{content:var(--tw-content);background-color:var(--asu-primary)}.asu\:after\:content-\[\"\"\]:after{--tw-content:"";content:var(--tw-content)}.asu\:last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.asu\:empty\:p-0:empty{padding:0}.asu\:focus-within\:border-ring:focus-within{border-color:var(--asu-ring)}.asu\:focus-within\:ring-2:focus-within{--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)}.asu\:focus-within\:ring-ring\/40:focus-within{--tw-ring-color:var(--asu-ring)}@supports (color:color-mix(in lab, red, red)){.asu\:focus-within\:ring-ring\/40:focus-within{--tw-ring-color:color-mix(in oklab, var(--asu-ring) 40%, transparent)}}@media (hover:hover){.asu\:hover\:bg-accent:hover{background-color:var(--asu-accent)}.asu\:hover\:bg-accent-hover:hover{background-color:var(--asu-accent-hover)}.asu\:hover\:bg-destructive-hover:hover{background-color:var(--asu-destructive-hover)}.asu\:hover\:bg-primary-hover:hover{background-color:var(--asu-primary-hover)}.asu\:hover\:bg-secondary-hover:hover{background-color:var(--asu-secondary-hover)}.asu\:hover\:bg-sidebar-accent:hover{background-color:var(--asu-sidebar-accent)}.asu\:hover\:text-accent-foreground:hover{color:var(--asu-accent-foreground)}.asu\:hover\:text-foreground:hover{color:var(--asu-foreground)}.asu\:hover\:text-secondary-foreground:hover{color:var(--asu-secondary-foreground)}.asu\:hover\:underline:hover{text-decoration-line:underline}.asu\:not-disabled\:not-data-disabled\:not-aria-invalid\:not-data-invalid\:hover\:border-primary-hover:not(:disabled):not([data-disabled]):not([aria-invalid=true]):not([data-invalid]):hover{border-color:var(--asu-primary-hover)}}.asu\:focus-visible\:border-ring:focus-visible{border-color:var(--asu-ring)}.asu\: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)}.asu\:focus-visible\:ring-ring\/40:focus-visible{--tw-ring-color:var(--asu-ring)}@supports (color:color-mix(in lab, red, red)){.asu\:focus-visible\:ring-ring\/40:focus-visible{--tw-ring-color:color-mix(in oklab, var(--asu-ring) 40%, transparent)}}.asu\:disabled\:pointer-events-none:disabled{pointer-events:none}.asu\:disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.asu\:disabled\:bg-muted:disabled{background-color:var(--asu-muted)}.asu\:disabled\:opacity-50:disabled{opacity:.5}.asu\:has-focus-visible\:ring-2:has(: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)}.asu\:has-focus-visible\:ring-ring\/40:has(:focus-visible){--tw-ring-color:var(--asu-ring)}@supports (color:color-mix(in lab, red, red)){.asu\:has-focus-visible\:ring-ring\/40:has(:focus-visible){--tw-ring-color:color-mix(in oklab, var(--asu-ring) 40%, transparent)}}.asu\:aria-invalid\:border-destructive[aria-invalid=true]{border-color:var(--asu-destructive)}.asu\:aria-invalid\:focus-within\:ring-destructive\/40[aria-invalid=true]:focus-within{--tw-ring-color:var(--asu-destructive)}@supports (color:color-mix(in lab, red, red)){.asu\:aria-invalid\:focus-within\:ring-destructive\/40[aria-invalid=true]:focus-within{--tw-ring-color:color-mix(in oklab, var(--asu-destructive) 40%, transparent)}}.asu\:aria-invalid\:focus-visible\:ring-destructive\/40[aria-invalid=true]:focus-visible{--tw-ring-color:var(--asu-destructive)}@supports (color:color-mix(in lab, red, red)){.asu\:aria-invalid\:focus-visible\:ring-destructive\/40[aria-invalid=true]:focus-visible{--tw-ring-color:color-mix(in oklab, var(--asu-destructive) 40%, transparent)}}.asu\:data-active\:text-primary-text[data-active]{color:var(--asu-primary-text)}.asu\:data-active\:after\:block[data-active]:after{content:var(--tw-content);display:block}.asu\:data-checked\:border-primary[data-checked]{border-color:var(--asu-primary)}.asu\:data-checked\:bg-primary[data-checked]{background-color:var(--asu-primary)}.asu\:group-data-\[size\=md\]\/switch\:data-checked\:translate-x-4:is(:where(.asu\:group\/switch)[data-size=md] *)[data-checked]{--tw-translate-x:calc(var(--asu-spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.asu\:group-data-\[size\=sm\]\/switch\:data-checked\:translate-x-3:is(:where(.asu\:group\/switch)[data-size=sm] *)[data-checked]{--tw-translate-x:calc(var(--asu-spacing) * 3);translate:var(--tw-translate-x) var(--tw-translate-y)}.asu\:data-disabled\:pointer-events-none[data-disabled]{pointer-events:none}.asu\:data-disabled\:cursor-not-allowed[data-disabled]{cursor:not-allowed}.asu\:data-disabled\:bg-muted[data-disabled]{background-color:var(--asu-muted)}.asu\:data-disabled\:text-muted-foreground[data-disabled]{color:var(--asu-muted-foreground)}.asu\:data-disabled\:opacity-50[data-disabled]{opacity:.5}.asu\:data-ending-style\:translate-x-full[data-ending-style]{--tw-translate-x:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.asu\:data-ending-style\:scale-95[data-ending-style]{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.asu\:data-ending-style\:opacity-0[data-ending-style]{opacity:0}.asu\:data-highlighted\:bg-accent[data-highlighted]{background-color:var(--asu-accent)}.asu\:data-highlighted\:bg-accent-hover[data-highlighted]{background-color:var(--asu-accent-hover)}.asu\:data-highlighted\:bg-destructive-subtle[data-highlighted]{background-color:var(--asu-destructive-subtle)}.asu\:data-indeterminate\:border-primary[data-indeterminate]{border-color:var(--asu-primary)}.asu\:data-indeterminate\:bg-primary[data-indeterminate]{background-color:var(--asu-primary)}.asu\:data-invalid\:border-destructive[data-invalid]{border-color:var(--asu-destructive)}.asu\:data-invalid\:focus-within\:ring-destructive\/40[data-invalid]:focus-within{--tw-ring-color:var(--asu-destructive)}@supports (color:color-mix(in lab, red, red)){.asu\:data-invalid\:focus-within\:ring-destructive\/40[data-invalid]:focus-within{--tw-ring-color:color-mix(in oklab, var(--asu-destructive) 40%, transparent)}}.asu\:data-invalid\:focus-visible\:ring-destructive\/40[data-invalid]:focus-visible{--tw-ring-color:var(--asu-destructive)}@supports (color:color-mix(in lab, red, red)){.asu\:data-invalid\:focus-visible\:ring-destructive\/40[data-invalid]:focus-visible{--tw-ring-color:color-mix(in oklab, var(--asu-destructive) 40%, transparent)}}.asu\:data-join-next\:after\:absolute[data-join-next]:after{content:var(--tw-content);position:absolute}.asu\:data-join-next\:after\:top-1\/2[data-join-next]:after{content:var(--tw-content);top:50%}.asu\:data-join-next\:after\:right-0[data-join-next]:after{content:var(--tw-content);right:0}.asu\:data-join-next\:after\:h-6[data-join-next]:after{content:var(--tw-content);height:calc(var(--asu-spacing) * 6)}.asu\:data-join-next\:after\:w-1[data-join-next]:after{content:var(--tw-content);width:var(--asu-spacing)}.asu\:data-join-next\:after\:-translate-y-1\/2[data-join-next]:after{content:var(--tw-content);--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.asu\:data-join-next\:after\:bg-info-subtle[data-join-next]:after{content:var(--tw-content);background-color:var(--asu-info-subtle)}.asu\:data-join-prev\:after\:absolute[data-join-prev]:after{content:var(--tw-content);position:absolute}.asu\:data-join-prev\:after\:top-1\/2[data-join-prev]:after{content:var(--tw-content);top:50%}.asu\:data-join-prev\:after\:left-0[data-join-prev]:after{content:var(--tw-content);left:0}.asu\:data-join-prev\:after\:h-6[data-join-prev]:after{content:var(--tw-content);height:calc(var(--asu-spacing) * 6)}.asu\:data-join-prev\:after\:w-1[data-join-prev]:after{content:var(--tw-content);width:var(--asu-spacing)}.asu\:data-join-prev\:after\:-translate-y-1\/2[data-join-prev]:after{content:var(--tw-content);--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.asu\:data-join-prev\:after\:bg-info-subtle[data-join-prev]:after{content:var(--tw-content);background-color:var(--asu-info-subtle)}.asu\:data-limited\:hidden[data-limited]{display:none}.asu\:data-placeholder\:text-muted-foreground[data-placeholder]{color:var(--asu-muted-foreground)}.asu\:data-row-end\:before\:end-1[data-row-end]:before{content:var(--tw-content);inset-inline-end:calc(var(--asu-spacing) * 1)}.asu\:data-row-start\:before\:start-1[data-row-start]:before{content:var(--tw-content);inset-inline-start:calc(var(--asu-spacing) * 1)}.asu\:data-selected\:bg-accent-selected[data-selected]{background-color:var(--asu-accent-selected)}.asu\:data-starting-style\:translate-x-full[data-starting-style]{--tw-translate-x:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.asu\:data-starting-style\:scale-95[data-starting-style]{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.asu\:data-starting-style\:opacity-0[data-starting-style]{opacity:0}.asu\:data-unchecked\:translate-x-0[data-unchecked]{--tw-translate-x:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.asu\:data-unchecked\:bg-input[data-unchecked]{background-color:var(--asu-input)}.asu\:data-\[orientation\=horizontal\]\:h-px[data-orientation=horizontal]{height:1px}.asu\:data-\[orientation\=horizontal\]\:w-full[data-orientation=horizontal]{width:100%}.asu\:data-\[orientation\=vertical\]\:w-px[data-orientation=vertical]{width:1px}.asu\:data-\[orientation\=vertical\]\:flex-col[data-orientation=vertical]{flex-direction:column}.asu\:data-\[orientation\=vertical\]\:flex-row[data-orientation=vertical]{flex-direction:row}.asu\:data-\[orientation\=vertical\]\:self-stretch[data-orientation=vertical]{align-self:stretch}.asu\:data-\[orientation\=vertical\]\:overflow-x-visible[data-orientation=vertical]{overflow-x:visible}.asu\:data-\[orientation\=vertical\]\:pt-0[data-orientation=vertical]{padding-top:0}.asu\:data-\[orientation\=vertical\]\:pl-4[data-orientation=vertical]{padding-left:calc(var(--asu-spacing) * 4)}.asu\:data-\[orientation\=vertical\]\:shadow-\[inset_-1px_0_0_0_var\(--asu-border\)\][data-orientation=vertical]{--tw-shadow:inset -1px 0 0 0 var(--tw-shadow-color,var(--asu-border));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.asu\:data-\[orientation\=vertical\]\:after\:inset-x-auto[data-orientation=vertical]:after{content:var(--tw-content);inset-inline:auto}.asu\:data-\[orientation\=vertical\]\:after\:inset-y-\[-10px\][data-orientation=vertical]:after{content:var(--tw-content);inset-block:-10px}.asu\:data-\[orientation\=vertical\]\:after\:right-\[-1px\][data-orientation=vertical]:after{content:var(--tw-content);right:-1px}.asu\:data-\[orientation\=vertical\]\:after\:bottom-auto[data-orientation=vertical]:after{content:var(--tw-content);bottom:auto}.asu\:data-\[orientation\=vertical\]\:after\:h-auto[data-orientation=vertical]:after{content:var(--tw-content);height:auto}.asu\:data-\[orientation\=vertical\]\:after\:w-0\.5[data-orientation=vertical]:after{content:var(--tw-content);width:calc(var(--asu-spacing) * .5)}.asu\:data-\[side\=bottom\]\:-top-1[data-side=bottom]{top:calc(var(--asu-spacing) * -1)}.asu\:data-\[side\=left\]\:-right-1[data-side=left]{right:calc(var(--asu-spacing) * -1)}.asu\:data-\[side\=right\]\:-left-1[data-side=right]{left:calc(var(--asu-spacing) * -1)}.asu\:data-\[side\=top\]\:-bottom-1[data-side=top]{bottom:calc(var(--asu-spacing) * -1)}.asu\:data-\[size\=md\]\:h-5[data-size=md]{height:calc(var(--asu-spacing) * 5)}.asu\:data-\[size\=md\]\:w-9[data-size=md]{width:calc(var(--asu-spacing) * 9)}.asu\:data-\[size\=sm\]\:h-4[data-size=sm]{height:calc(var(--asu-spacing) * 4)}.asu\:data-\[size\=sm\]\:w-7[data-size=sm]{width:calc(var(--asu-spacing) * 7)}@media (prefers-reduced-motion:reduce){.asu\:motion-reduce\:animate-none{animation:none}.asu\:motion-reduce\:transition-none{transition-property:none}}@media (min-width:40rem){.asu\:sm\:flex-row{flex-direction:row}}.asu\:dark\:bg-blue-700:where([data-theme=dark],[data-theme=dark] *):not(:where([data-theme=dark] [data-theme=light],[data-theme=dark] [data-theme=light] *)){background-color:var(--asu-color-blue-700)}.asu\:dark\:bg-cyan-700:where([data-theme=dark],[data-theme=dark] *):not(:where([data-theme=dark] [data-theme=light],[data-theme=dark] [data-theme=light] *)){background-color:var(--asu-color-cyan-700)}.asu\:dark\:bg-gray-700:where([data-theme=dark],[data-theme=dark] *):not(:where([data-theme=dark] [data-theme=light],[data-theme=dark] [data-theme=light] *)){background-color:var(--asu-color-gray-700)}.asu\:dark\:bg-green-700:where([data-theme=dark],[data-theme=dark] *):not(:where([data-theme=dark] [data-theme=light],[data-theme=dark] [data-theme=light] *)){background-color:var(--asu-color-green-700)}.asu\:dark\:bg-indigo-700:where([data-theme=dark],[data-theme=dark] *):not(:where([data-theme=dark] [data-theme=light],[data-theme=dark] [data-theme=light] *)){background-color:var(--asu-color-indigo-700)}.asu\:dark\:bg-orange-700:where([data-theme=dark],[data-theme=dark] *):not(:where([data-theme=dark] [data-theme=light],[data-theme=dark] [data-theme=light] *)){background-color:var(--asu-color-orange-700)}.asu\:dark\:bg-pink-700:where([data-theme=dark],[data-theme=dark] *):not(:where([data-theme=dark] [data-theme=light],[data-theme=dark] [data-theme=light] *)){background-color:var(--asu-color-pink-700)}.asu\:dark\:bg-purple-700:where([data-theme=dark],[data-theme=dark] *):not(:where([data-theme=dark] [data-theme=light],[data-theme=dark] [data-theme=light] *)){background-color:var(--asu-color-purple-700)}.asu\:dark\:bg-red-700:where([data-theme=dark],[data-theme=dark] *):not(:where([data-theme=dark] [data-theme=light],[data-theme=dark] [data-theme=light] *)){background-color:var(--asu-color-red-700)}.asu\:dark\:bg-slate-700:where([data-theme=dark],[data-theme=dark] *):not(:where([data-theme=dark] [data-theme=light],[data-theme=dark] [data-theme=light] *)){background-color:var(--asu-color-slate-700)}.asu\:dark\:bg-yellow-700:where([data-theme=dark],[data-theme=dark] *):not(:where([data-theme=dark] [data-theme=light],[data-theme=dark] [data-theme=light] *)){background-color:var(--asu-color-yellow-700)}.asu\:dark\:text-blue-100:where([data-theme=dark],[data-theme=dark] *):not(:where([data-theme=dark] [data-theme=light],[data-theme=dark] [data-theme=light] *)){color:var(--asu-color-blue-100)}.asu\:dark\:text-cyan-100:where([data-theme=dark],[data-theme=dark] *):not(:where([data-theme=dark] [data-theme=light],[data-theme=dark] [data-theme=light] *)){color:var(--asu-color-cyan-100)}.asu\:dark\:text-gray-100:where([data-theme=dark],[data-theme=dark] *):not(:where([data-theme=dark] [data-theme=light],[data-theme=dark] [data-theme=light] *)){color:var(--asu-color-gray-100)}.asu\:dark\:text-green-100:where([data-theme=dark],[data-theme=dark] *):not(:where([data-theme=dark] [data-theme=light],[data-theme=dark] [data-theme=light] *)){color:var(--asu-color-green-100)}.asu\:dark\:text-indigo-100:where([data-theme=dark],[data-theme=dark] *):not(:where([data-theme=dark] [data-theme=light],[data-theme=dark] [data-theme=light] *)){color:var(--asu-color-indigo-100)}.asu\:dark\:text-orange-100:where([data-theme=dark],[data-theme=dark] *):not(:where([data-theme=dark] [data-theme=light],[data-theme=dark] [data-theme=light] *)){color:var(--asu-color-orange-100)}.asu\:dark\:text-pink-100:where([data-theme=dark],[data-theme=dark] *):not(:where([data-theme=dark] [data-theme=light],[data-theme=dark] [data-theme=light] *)){color:var(--asu-color-pink-100)}.asu\:dark\:text-purple-100:where([data-theme=dark],[data-theme=dark] *):not(:where([data-theme=dark] [data-theme=light],[data-theme=dark] [data-theme=light] *)){color:var(--asu-color-purple-100)}.asu\:dark\:text-red-100:where([data-theme=dark],[data-theme=dark] *):not(:where([data-theme=dark] [data-theme=light],[data-theme=dark] [data-theme=light] *)){color:var(--asu-color-red-100)}.asu\:dark\:text-slate-100:where([data-theme=dark],[data-theme=dark] *):not(:where([data-theme=dark] [data-theme=light],[data-theme=dark] [data-theme=light] *)){color:var(--asu-color-slate-100)}.asu\:dark\:text-yellow-100:where([data-theme=dark],[data-theme=dark] *):not(:where([data-theme=dark] [data-theme=light],[data-theme=dark] [data-theme=light] *)){color:var(--asu-color-yellow-100)}.asu\:dark\:ring-1:where([data-theme=dark],[data-theme=dark] *):not(:where([data-theme=dark] [data-theme=light],[data-theme=dark] [data-theme=light] *)){--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)}.asu\:dark\:ring-border:where([data-theme=dark],[data-theme=dark] *):not(:where([data-theme=dark] [data-theme=light],[data-theme=dark] [data-theme=light] *)){--tw-ring-color:var(--asu-border)}.asu\:\[\&_\[data-slot\=button\]\]\:-mx-3 [data-slot=button]{margin-inline:calc(var(--asu-spacing) * -3)}.asu\:\[\&_\[data-slot\=button\]\]\:h-full [data-slot=button]{height:100%}.asu\:\[\&_\[data-slot\=button\]\]\:rounded-none [data-slot=button]{border-radius:0}.asu\:\[\&_\[data-slot\=button\]\]\:border-0 [data-slot=button]{border-style:var(--tw-border-style);border-width:0}.asu\:\[\&_\[data-slot\=button\]\]\:bg-transparent [data-slot=button]{background-color:#0000}.asu\:\[\&_\[data-slot\=button\]\]\:text-foreground [data-slot=button]{color:var(--asu-foreground)}@media (hover:hover){.asu\:\[\&_\[data-slot\=button\]\]\:hover\:bg-accent [data-slot=button]:hover{background-color:var(--asu-accent)}}.asu\:\[\&_\[data-slot\=button\]\]\:focus-visible\:ring-ring [data-slot=button]:focus-visible{--tw-ring-color:var(--asu-ring)}.asu\:\[\&_\[data-slot\=button\]\]\:focus-visible\:ring-inset [data-slot=button]:focus-visible{--tw-ring-inset:inset}.asu\:\[\&_img\]\:inline-block img{display:inline-block}.asu\:\[\&_img\]\:size-full img{width:100%;height:100%}.asu\:\[\&_img\]\:object-contain img{object-fit:contain}.asu\:\[\&_img\]\:align-text-bottom img{vertical-align:text-bottom}.asu\:\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.asu\:\[\&_svg\]\:inline-block svg{display:inline-block}.asu\:\[\&_svg\]\:size-3 svg{width:calc(var(--asu-spacing) * 3);height:calc(var(--asu-spacing) * 3)}.asu\:\[\&_svg\]\:size-4 svg{width:calc(var(--asu-spacing) * 4);height:calc(var(--asu-spacing) * 4)}.asu\:\[\&_svg\]\:size-full svg{width:100%;height:100%}.asu\:\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.asu\:\[\&_svg\]\:align-text-bottom svg{vertical-align:text-bottom}.asu\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 svg:not([class*=size-]){width:calc(var(--asu-spacing) * 3.5);height:calc(var(--asu-spacing) * 3.5)}.asu\:\[\&_svg\:not\(\[class\*\=size-\]\)\]\:size-5 svg:not([class*=size-]){width:calc(var(--asu-spacing) * 5);height:calc(var(--asu-spacing) * 5)}.asu\:\[\&_tr\:hover\]\:bg-muted\/50 tr:hover{background-color:var(--asu-muted)}@supports (color:color-mix(in lab, red, red)){.asu\:\[\&_tr\:hover\]\:bg-muted\/50 tr:hover{background-color:color-mix(in oklab, var(--asu-muted) 50%, transparent)}}.asu\:\[\&\:not\(\[data-range-middle\]\)\>button\]\:bg-primary:not([data-range-middle])>button{background-color:var(--asu-primary)}.asu\:\[\&\:not\(\[data-range-middle\]\)\>button\]\:text-primary-foreground:not([data-range-middle])>button{color:var(--asu-primary-foreground)}@media (hover:hover){.asu\:\[\&\:not\(\[data-range-middle\]\)\>button\]\:hover\:bg-primary:not([data-range-middle])>button:hover{background-color:var(--asu-primary)}}.asu\:\[\&\>\[data-slot\=button\]\]\:focus-visible\:relative>[data-slot=button]:focus-visible{position:relative}.asu\:\[\&\>\[data-slot\=button\]\]\:focus-visible\:z-10>[data-slot=button]:focus-visible{z-index:10}.asu\:\[\&\>\[data-slot\=button\]\:is\(\[data-variant\=primary\]\,\[data-variant\=secondary\]\,\[data-variant\=destructive\]\)\+\[data-slot\=input\]\]\:ml-0>[data-slot=button]:is([data-variant=primary],[data-variant=secondary],[data-variant=destructive])+[data-slot=input]{margin-left:0}.asu\:\[\&\>\[data-slot\=button\]\:is\(\[data-variant\=primary\]\,\[data-variant\=secondary\]\,\[data-variant\=destructive\]\)\+\[data-slot\=input\]\:not\(\:focus-visible\)\:not\(\[aria-invalid\=true\]\)\]\:border-l-transparent>[data-slot=button]:is([data-variant=primary],[data-variant=secondary],[data-variant=destructive])+[data-slot=input]:not(:focus-visible):not([aria-invalid=true]){border-left-color:#0000}.asu\:\[\&\>\[data-slot\=button\]\[data-variant\=outline\]\:focus-visible\:has\(\+\[data-slot\=input\]\)\]\:border-r-input>[data-slot=button][data-variant=outline]:focus-visible:has(+[data-slot=input]){border-right-color:var(--asu-input)}.asu\:\[\&\>\[data-slot\=input\]\]\:relative>[data-slot=input]{position:relative}.asu\:\[\&\>\[data-slot\=input\]\]\:flex-1>[data-slot=input]{flex:1}.asu\:\[\&\>\[data-slot\=input\]\]\:focus-visible\:z-10>[data-slot=input]:focus-visible{z-index:10}.asu\:\[\&\>\[data-slot\=input\]\+\[data-slot\=button\]\:is\(\[data-variant\=primary\]\,\[data-variant\=secondary\]\,\[data-variant\=destructive\]\)\]\:ml-0>[data-slot=input]+[data-slot=button]:is([data-variant=primary],[data-variant=secondary],[data-variant=destructive]){margin-left:0}.asu\:\[\&\>\[data-slot\=input\]\+\[data-slot\=button\]\[data-variant\=outline\]\:focus-visible\]\:border-l-input>[data-slot=input]+[data-slot=button][data-variant=outline]:focus-visible{border-left-color:var(--asu-input)}.asu\:\[\&\>\[data-slot\=input\]\+\[data-slot\]\[data-slot\]\]\:border-l-transparent>[data-slot=input]+[data-slot][data-slot]{border-left-color:#0000}.asu\:\[\&\>\[data-slot\=input\]\:not\(\:focus-visible\)\:not\(\[aria-invalid\=true\]\)\:has\(\+\[data-slot\=button\]\:is\(\[data-variant\=primary\]\,\[data-variant\=secondary\]\,\[data-variant\=destructive\]\)\)\]\:border-r-transparent>[data-slot=input]:not(:focus-visible):not([aria-invalid=true]):has(+[data-slot=button]:is([data-variant=primary],[data-variant=secondary],[data-variant=destructive])){border-right-color:#0000}.asu\:\[\&\>\[data-slot\]\]\:h-auto>[data-slot]{height:auto}.asu\:\[\&\>\[data-slot\]\]\:rounded-none>[data-slot]{border-radius:0}.asu\:\[\&\>\[data-slot\]\:first-child\]\:rounded-l-sm>[data-slot]:first-child{border-top-left-radius:var(--asu-radius-sm);border-bottom-left-radius:var(--asu-radius-sm)}.asu\:\[\&\>\[data-slot\]\:last-child\]\:rounded-r-sm>[data-slot]:last-child{border-top-right-radius:var(--asu-radius-sm);border-bottom-right-radius:var(--asu-radius-sm)}.asu\:\[\&\>\[data-slot\]\:not\(\:first-child\)\]\:-ml-px>[data-slot]:not(:first-child){margin-left:-1px}.asu\:\[\&\>\[data-slot\]\[data-slot\]\:has\(\+\[data-slot\=input\]\)\]\:border-r-transparent>[data-slot][data-slot]:has(+[data-slot=input]){border-right-color:#0000}.asu\:\[\&\>button\]\:pointer-events-none>button{pointer-events:none}.asu\:\[\&\>button\]\:text-muted-foreground>button{color:var(--asu-muted-foreground)}.asu\:\[\&\>button\]\:opacity-50>button{opacity:.5}.asu\:\[\&\>img\:first-child\]\:me-1\.5>img:first-child{margin-inline-end:calc(var(--asu-spacing) * 1.5)}.asu\:\[\&\>svg\]\:mt-0\.5>svg{margin-top:calc(var(--asu-spacing) * .5)}.asu\:\[\&\>svg\]\:size-3\.5>svg{width:calc(var(--asu-spacing) * 3.5);height:calc(var(--asu-spacing) * 3.5)}.asu\:\[\&\>svg\]\:size-4>svg{width:calc(var(--asu-spacing) * 4);height:calc(var(--asu-spacing) * 4)}.asu\:\[\&\>svg\]\:size-5>svg{width:calc(var(--asu-spacing) * 5);height:calc(var(--asu-spacing) * 5)}.asu\:\[\&\>svg\]\:shrink-0>svg{flex-shrink:0}.asu\:\[\&\>svg\]\:text-destructive-text>svg{color:var(--asu-destructive-text)}.asu\:\[\&\>svg\]\:text-info>svg{color:var(--asu-info)}.asu\:\[\&\>svg\]\:text-muted-foreground>svg{color:var(--asu-muted-foreground)}.asu\:\[\&\>svg\]\:text-success>svg{color:var(--asu-success)}.asu\:\[\&\>svg\]\:text-warning>svg{color:var(--asu-warning)}.asu\:\[\&\>svg\:first-child\]\:me-1\.5>svg:first-child{margin-inline-end:calc(var(--asu-spacing) * 1.5)}@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-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{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-duration{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@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}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}
@@ -9,5 +9,5 @@ export interface ContrastPair {
9
9
  ratio: number;
10
10
  }
11
11
  export declare function semanticPairs(map: SemanticMap): ContrastPair[];
12
- export declare function badgePairs(p?: Palette): ContrastPair[];
12
+ export declare function badgePairs(theme?: 'light' | 'dark', p?: Palette): ContrastPair[];
13
13
  //#endregion
@@ -11,8 +11,8 @@ const TEXT_TOKENS = [
11
11
  "secondary-foreground",
12
12
  "muted-foreground",
13
13
  "accent-foreground",
14
- "primary",
15
- "destructive",
14
+ "primary-text",
15
+ "destructive-text",
16
16
  "success-foreground",
17
17
  "warning-foreground",
18
18
  "info-foreground"
@@ -33,7 +33,7 @@ const ON_COLOR_PAIRS = [
33
33
  ["primary-foreground", "primary-hover"],
34
34
  ["destructive-foreground", "destructive"],
35
35
  ["destructive-foreground", "destructive-hover"],
36
- ["destructive", "destructive-subtle"],
36
+ ["destructive-text", "destructive-subtle"],
37
37
  ["success-foreground", "success-subtle"],
38
38
  ["warning-foreground", "warning-subtle"],
39
39
  ["info-foreground", "info-subtle"],
@@ -61,8 +61,19 @@ function pair(name, foreground, background) {
61
61
  function semanticPairs(map) {
62
62
  return SEMANTIC_PAIRS.map(([fg, bg]) => pair(`${fg} on ${bg}`, resolveRef(map[fg]), resolveRef(map[bg])));
63
63
  }
64
- function badgePairs(p = palette) {
65
- return FAMILIES.map((family) => pair(`badge ${family}`, p[family][700], p[family][100]));
64
+ const BADGE_STEPS = {
65
+ light: {
66
+ background: 100,
67
+ foreground: 700
68
+ },
69
+ dark: {
70
+ background: 700,
71
+ foreground: 100
72
+ }
73
+ };
74
+ function badgePairs(theme = "light", p = palette) {
75
+ const { background, foreground } = BADGE_STEPS[theme];
76
+ return FAMILIES.map((family) => pair(`badge ${family}`, p[family][foreground], p[family][background]));
66
77
  }
67
78
  //#endregion
68
- export { AA, SURFACE_TOKENS, TEXT_TOKENS, badgePairs, semanticPairs };
79
+ export { AA, BADGE_STEPS, SURFACE_TOKENS, TEXT_TOKENS, badgePairs, semanticPairs };
@@ -2,12 +2,12 @@ import { Family, Step } from "./types.js";
2
2
  //#region src/tokens/semantic.d.ts
3
3
  type OpaqueRef = 'white' | 'black' | `${Family}-${Step}`;
4
4
  export type ColorRef = OpaqueRef | `${OpaqueRef}/${number}`;
5
- export declare const SEMANTIC_TOKENS: readonly ["background", "foreground", "card", "card-foreground", "popover", "popover-foreground", "primary", "primary-hover", "primary-foreground", "secondary", "secondary-foreground", "muted", "muted-foreground", "accent", "accent-foreground", "destructive", "destructive-hover", "destructive-foreground", "destructive-subtle", "success", "success-foreground", "success-subtle", "warning", "warning-foreground", "warning-subtle", "info", "info-foreground", "info-subtle", "border", "input", "ring", "tooltip", "tooltip-foreground", "table-header", "secondary-hover", "accent-hover", "accent-selected", "overlay", "sidebar-accent", "sidebar-indicator"];
5
+ export declare const SEMANTIC_TOKENS: readonly ["background", "foreground", "card", "card-foreground", "popover", "popover-foreground", "primary", "primary-hover", "primary-foreground", "primary-text", "secondary", "secondary-foreground", "muted", "muted-foreground", "accent", "accent-foreground", "destructive", "destructive-hover", "destructive-foreground", "destructive-text", "destructive-subtle", "success", "success-foreground", "success-subtle", "warning", "warning-foreground", "warning-subtle", "info", "info-foreground", "info-subtle", "border", "input", "ring", "tooltip", "tooltip-foreground", "table-header", "secondary-hover", "accent-hover", "accent-selected", "overlay", "sidebar-accent", "sidebar-indicator"];
6
6
  export type SemanticToken = (typeof SEMANTIC_TOKENS)[number];
7
7
  export type SemanticMap = Record<SemanticToken, ColorRef>;
8
8
  export declare const themes: {
9
9
  light: SemanticMap;
10
- dark?: SemanticMap;
10
+ dark: SemanticMap;
11
11
  };
12
12
  //#endregion
13
13
  export {};
@@ -1,46 +1,94 @@
1
1
  import { palette } from "./palette.js";
2
- const themes = { light: {
3
- background: "white",
4
- foreground: "gray-800",
5
- card: "white",
6
- "card-foreground": "gray-800",
7
- popover: "white",
8
- "popover-foreground": "gray-800",
9
- primary: "blue-600",
10
- "primary-hover": "blue-700",
11
- "primary-foreground": "white",
12
- secondary: "gray-100",
13
- "secondary-foreground": "gray-800",
14
- muted: "gray-100",
15
- "muted-foreground": "gray-600",
16
- accent: "gray-100",
17
- "accent-foreground": "gray-800",
18
- destructive: "red-600",
19
- "destructive-hover": "red-700",
20
- "destructive-foreground": "white",
21
- "destructive-subtle": "red-50",
22
- success: "green-600",
23
- "success-foreground": "green-700",
24
- "success-subtle": "green-50",
25
- warning: "orange-600",
26
- "warning-foreground": "orange-700",
27
- "warning-subtle": "orange-50",
28
- info: "blue-600",
29
- "info-foreground": "blue-700",
30
- "info-subtle": "blue-50",
31
- border: "gray-200",
32
- input: "gray-300",
33
- ring: "blue-600",
34
- tooltip: "slate-800",
35
- "tooltip-foreground": "white",
36
- "table-header": "slate-50",
37
- "secondary-hover": "gray-200",
38
- "accent-hover": "gray-200",
39
- "accent-selected": "gray-300",
40
- overlay: "gray-800/45",
41
- "sidebar-accent": "gray-200",
42
- "sidebar-indicator": "red-400"
43
- } };
2
+ const themes = {
3
+ light: {
4
+ background: "white",
5
+ foreground: "gray-800",
6
+ card: "white",
7
+ "card-foreground": "gray-800",
8
+ popover: "white",
9
+ "popover-foreground": "gray-800",
10
+ primary: "blue-600",
11
+ "primary-hover": "blue-700",
12
+ "primary-foreground": "white",
13
+ "primary-text": "blue-600",
14
+ secondary: "gray-100",
15
+ "secondary-foreground": "gray-800",
16
+ muted: "gray-100",
17
+ "muted-foreground": "gray-600",
18
+ accent: "gray-100",
19
+ "accent-foreground": "gray-800",
20
+ destructive: "red-600",
21
+ "destructive-hover": "red-700",
22
+ "destructive-foreground": "white",
23
+ "destructive-text": "red-600",
24
+ "destructive-subtle": "red-50",
25
+ success: "green-600",
26
+ "success-foreground": "green-700",
27
+ "success-subtle": "green-50",
28
+ warning: "orange-600",
29
+ "warning-foreground": "orange-700",
30
+ "warning-subtle": "orange-50",
31
+ info: "blue-600",
32
+ "info-foreground": "blue-700",
33
+ "info-subtle": "blue-50",
34
+ border: "gray-200",
35
+ input: "gray-300",
36
+ ring: "blue-600",
37
+ tooltip: "slate-800",
38
+ "tooltip-foreground": "white",
39
+ "table-header": "slate-50",
40
+ "secondary-hover": "gray-200",
41
+ "accent-hover": "gray-200",
42
+ "accent-selected": "gray-300",
43
+ overlay: "gray-800/45",
44
+ "sidebar-accent": "gray-200",
45
+ "sidebar-indicator": "red-400"
46
+ },
47
+ dark: {
48
+ background: "gray-950",
49
+ foreground: "gray-100",
50
+ card: "gray-950",
51
+ "card-foreground": "gray-100",
52
+ popover: "gray-950",
53
+ "popover-foreground": "gray-100",
54
+ primary: "blue-600",
55
+ "primary-hover": "blue-700",
56
+ "primary-foreground": "white",
57
+ "primary-text": "blue-400",
58
+ secondary: "gray-900",
59
+ "secondary-foreground": "gray-100",
60
+ muted: "gray-900",
61
+ "muted-foreground": "gray-400",
62
+ accent: "gray-900",
63
+ "accent-foreground": "gray-100",
64
+ destructive: "red-600",
65
+ "destructive-hover": "red-700",
66
+ "destructive-foreground": "white",
67
+ "destructive-text": "red-300",
68
+ "destructive-subtle": "red-800",
69
+ success: "green-500",
70
+ "success-foreground": "green-300",
71
+ "success-subtle": "green-800",
72
+ warning: "orange-500",
73
+ "warning-foreground": "orange-300",
74
+ "warning-subtle": "orange-800",
75
+ info: "blue-400",
76
+ "info-foreground": "blue-300",
77
+ "info-subtle": "blue-800",
78
+ border: "white/10",
79
+ input: "white/15",
80
+ ring: "blue-400",
81
+ tooltip: "slate-100",
82
+ "tooltip-foreground": "slate-950",
83
+ "table-header": "slate-900",
84
+ "secondary-hover": "gray-800",
85
+ "accent-hover": "gray-800",
86
+ "accent-selected": "gray-700",
87
+ overlay: "black/60",
88
+ "sidebar-accent": "gray-800",
89
+ "sidebar-indicator": "red-400"
90
+ }
91
+ };
44
92
  function resolveRef(ref, p = palette) {
45
93
  const slash = ref.indexOf("/");
46
94
  if (slash !== -1) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@api7/ui-components",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "description": "API7 React component library",
5
5
  "type": "module",
6
6
  "sideEffects": [
@@ -94,7 +94,7 @@
94
94
  "build": "tsdown && tailwindcss -i src/styles.css -o dist/styles.css --minify",
95
95
  "check-package": "publint --strict && attw --pack . --profile esm-only --exclude-entrypoints ./styles.css",
96
96
  "typecheck": "tsc -b tsconfig.json",
97
- "lint": "eslint .",
97
+ "lint": "eslint . --max-warnings 0",
98
98
  "test": "vitest run --project unit --maxWorkers=2 && vitest run --project browser --maxWorkers=2",
99
99
  "tokens": "jiti scripts/generate-tokens.ts"
100
100
  }