@burtson-labs/ui 0.13.0 → 0.13.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/data-table.js +3 -2
- package/dist/components/data-table.js.map +1 -1
- package/dist/components/pagination.js +2 -2
- package/dist/components/pagination.js.map +1 -1
- package/dist/components/select.js +5 -1
- package/dist/components/select.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -375,6 +375,7 @@ function ErrorMessage({ error, onRetry }) {
|
|
|
375
375
|
});
|
|
376
376
|
}
|
|
377
377
|
var cardLabelClass = "text-[11px] font-semibold tracking-[0.06em] text-muted-foreground uppercase";
|
|
378
|
+
var liftControls = "[&_a]:relative [&_a]:z-10 [&_button]:relative [&_button]:z-10 [&_input]:relative [&_input]:z-10 [&_select]:relative [&_select]:z-10 [&_textarea]:relative [&_textarea]:z-10";
|
|
378
379
|
/**
|
|
379
380
|
* The phone layout: a list of articles, one per row, each named by its title.
|
|
380
381
|
* The title is the row's open button (its hit area covers the card); the
|
|
@@ -464,14 +465,14 @@ function DataTableCards({ "aria-label": ariaLabel, columns, rows, getRowId, getR
|
|
|
464
465
|
]
|
|
465
466
|
}),
|
|
466
467
|
subtitle.length > 0 && /* @__PURE__ */ jsx("div", {
|
|
467
|
-
className: cn("-mt-2 grid min-w-0 gap-0.5", onToggle && "pl-7"),
|
|
468
|
+
className: cn("-mt-2 grid min-w-0 gap-0.5", liftControls, onToggle && "pl-7"),
|
|
468
469
|
children: subtitle.map((c) => /* @__PURE__ */ jsx("div", {
|
|
469
470
|
className: "min-w-0 text-sm text-muted-foreground [overflow-wrap:anywhere]",
|
|
470
471
|
children: show(c, row)
|
|
471
472
|
}, c.id))
|
|
472
473
|
}),
|
|
473
474
|
fields.length > 0 && /* @__PURE__ */ jsx("dl", {
|
|
474
|
-
className: "grid grid-cols-2 gap-x-4 gap-y-2.5 text-sm",
|
|
475
|
+
className: cn("grid grid-cols-2 gap-x-4 gap-y-2.5 text-sm", liftControls),
|
|
475
476
|
children: fields.map((c) => /* @__PURE__ */ jsxs("div", {
|
|
476
477
|
className: "min-w-0",
|
|
477
478
|
children: [/* @__PURE__ */ jsx("dt", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table.js","names":[],"sources":["../../src/components/data-table.tsx"],"sourcesContent":["import ArrowDown from '@burtson-labs/icons/react/arrow-down';\nimport ArrowUp from '@burtson-labs/icons/react/arrow-up';\nimport ChevronsUpDown from '@burtson-labs/icons/react/chevrons-up-down';\nimport Search from '@burtson-labs/icons/react/search';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Button } from './button';\nimport { Checkbox } from './checkbox';\nimport { Input } from './input';\nimport { Pagination, pageWindow, paginationSummary, usePagination } from './pagination';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';\nimport { Skeleton } from './skeleton';\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table';\n\n/**\n * Where a column goes on a phone card: `title` and `subtitle` head the card,\n * `aside` sits top right (a status badge), `field` is a labelled value in a\n * two-column grid, `footer` is a full-width line at the bottom (links,\n * buttons), `hidden` is left off the card.\n */\nexport type DataTableCardSlot = 'title' | 'subtitle' | 'aside' | 'field' | 'footer' | 'hidden';\n\nexport type DataTableBreakpoint = 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface DataTableColumn<T> {\n id: string;\n header: React.ReactNode;\n cell: (row: T) => React.ReactNode;\n sortable?: boolean;\n /** Right-aligned tabular figures. */\n numeric?: boolean;\n className?: string;\n /**\n * Place on a phone card. With no column marked `title`, the first column\n * is the title; every other column is a `field` unless it says otherwise.\n */\n card?: DataTableCardSlot;\n /** The field's label on a card when `header` is not plain text. */\n cardLabel?: string;\n /** A shorter rendering for the card, e.g. a date without the time. */\n cardCell?: (row: T) => React.ReactNode;\n /** Only on cards, never a table column (e.g. a subtitle the table shows in another cell). */\n cardOnly?: boolean;\n /** Leave the column out of the table below this width (tablets). */\n hideBelow?: DataTableBreakpoint;\n}\n\nexport interface DataTablePaginateOptions {\n /** Starting rows per page; the first option by default. */\n pageSize?: number;\n /** 25, 50 and 100 by default. */\n pageSizeOptions?: readonly number[];\n /** Remembers the chosen page size in localStorage under this key. */\n storageKey?: string;\n}\n\nexport type SortDirection = 'asc' | 'desc';\n\nexport interface DataTableSort {\n columnId: string;\n direction: SortDirection;\n}\n\nexport interface DataTableProps<T> extends Omit<React.ComponentProps<'div'>, 'children'> {\n /** Required: what the table lists, e.g. \"Workspace members\". */\n 'aria-label': string;\n columns: DataTableColumn<T>[];\n /** The rows to show now: already sorted, filtered and paged by the app or server. */\n rows: T[];\n getRowId: (row: T) => string;\n /** Names a row for screen readers (\"Select Ada Lovelace\"). Defaults to its id. */\n getRowLabel?: (row: T) => string;\n\n /** Controlled sort. A sortable header cycles ascending, descending, none. */\n sort?: DataTableSort | null;\n onSortChange?: (sort: DataTableSort | null) => void;\n\n /** Controlled filter text; a search box appears when onFilterChange is set. */\n filter?: string;\n onFilterChange?: (value: string) => void;\n filterPlaceholder?: string;\n\n /** Controlled selection by row id; checkboxes appear when onSelectedChange is set. */\n selected?: string[];\n onSelectedChange?: (ids: string[]) => void;\n\n /** Enter or a click on the row, e.g. open the record. */\n onRowAction?: (row: T) => void;\n /** Per-row controls in a trailing column, e.g. a DropdownMenu. */\n rowActions?: (row: T) => React.ReactNode;\n\n /** 1-based; Pagination appears when onPageChange is set. */\n page?: number;\n pageCount?: number;\n onPageChange?: (page: number) => void;\n /** e.g. \"1–25 of 312\". Worked out from `totalRows` and `pageSize` when left out. */\n pageSummary?: React.ReactNode;\n /** Rows per page, for the page-size menu and the summary. */\n pageSize?: number;\n pageSizeOptions?: readonly number[];\n /** Adds a rows-per-page menu beside the pages. */\n onPageSizeChange?: (pageSize: number) => void;\n /** Every row on every page (server paging), for the summary. */\n totalRows?: number;\n /**\n * Page in the browser: pass every row in `rows` and the table shows one\n * page, with a rows-per-page menu. It goes back to page 1 when `filter` or\n * `sort` changes. Leave out to page in your app or on the server.\n */\n paginate?: boolean | DataTablePaginateOptions;\n /** Plural noun appended to the built-in summary: \"1–25 of 312 members\". */\n rowNoun?: string;\n\n loading?: boolean;\n /** A message shown in place of the rows. */\n error?: React.ReactNode;\n onRetry?: () => void;\n /** Shown when there are no rows and nothing failed. */\n empty?: React.ReactNode;\n /** Extra controls beside the search box, e.g. filters or a bulk action. */\n toolbar?: React.ReactNode;\n density?: 'compact' | 'default';\n stickyHeader?: boolean;\n /**\n * Below this width the rows become a list of cards (see DataTableColumn\n * `card`). `md` (768px) by default; `false` keeps the table everywhere.\n */\n cardsBelow?: DataTableBreakpoint | false;\n}\n\nconst BREAKPOINTS: Record<DataTableBreakpoint, number> = { sm: 640, md: 768, lg: 1024, xl: 1280 };\n\nconst hideBelowClass: Record<DataTableBreakpoint, string> = {\n sm: 'hidden sm:table-cell',\n md: 'hidden md:table-cell',\n lg: 'hidden lg:table-cell',\n xl: 'hidden xl:table-cell',\n};\n\nconst subscribeNone = () => () => undefined;\n\n/**\n * True while the viewport is narrower than `bp`. Without matchMedia (server\n * render, tests) it is false, so the table is the fallback.\n */\nfunction useNarrowerThan(bp: DataTableBreakpoint | false): boolean {\n const query = bp ? `(max-width: ${BREAKPOINTS[bp] - 0.02}px)` : null;\n const subscribe = React.useCallback(\n (onChange: () => void) => {\n if (!query || typeof matchMedia !== 'function') return () => undefined;\n const mq = matchMedia(query);\n mq.addEventListener?.('change', onChange);\n return () => mq.removeEventListener?.('change', onChange);\n },\n [query],\n );\n return React.useSyncExternalStore(\n query ? subscribe : subscribeNone,\n () => Boolean(query && typeof matchMedia === 'function' && matchMedia(query).matches),\n () => false,\n );\n}\n\nconst textOf = (node: React.ReactNode): string | undefined =>\n typeof node === 'string' || typeof node === 'number' ? String(node) : undefined;\n\nconst nextSort = (current: DataTableSort | null | undefined, id: string): DataTableSort | null => {\n if (!current || current.columnId !== id) return { columnId: id, direction: 'asc' };\n return current.direction === 'asc' ? { columnId: id, direction: 'desc' } : null;\n};\n\n// Clicks and keys aimed at these belong to them, not to the row.\nconst INTERACTIVE = 'a,button,input,select,textarea,[role=\"checkbox\"],[role=\"menuitem\"]';\n\n/**\n * A table recipe for records: sort, search, select, page, and row actions,\n * with loading, empty and error states. Fully controlled, so the data can\n * come from a server; the table never reorders rows itself. On a phone the\n * rows become cards (`cardsBelow`), with the same columns.\n */\nfunction DataTable<T>({\n 'aria-label': ariaLabel,\n columns,\n rows: rowsProp,\n getRowId,\n getRowLabel,\n sort,\n onSortChange,\n filter,\n onFilterChange,\n filterPlaceholder = 'Search',\n selected,\n onSelectedChange,\n onRowAction,\n rowActions,\n page,\n pageCount,\n onPageChange,\n pageSummary,\n pageSize,\n pageSizeOptions,\n onPageSizeChange,\n totalRows,\n paginate,\n rowNoun,\n loading = false,\n error,\n onRetry,\n empty = 'No results.',\n toolbar,\n density = 'default',\n stickyHeader,\n cardsBelow = 'md',\n className,\n ...props\n}: DataTableProps<T>) {\n const paginateOptions = paginate === true ? {} : paginate || undefined;\n const paging = usePagination(rowsProp, {\n defaultPageSize: paginateOptions?.pageSize,\n pageSizeOptions: paginateOptions?.pageSizeOptions,\n storageKey: paginateOptions?.storageKey,\n // A new search or sort starts again at page 1.\n resetKey: `${filter ?? ''}\\u0000${sort?.columnId ?? ''}\\u0000${sort?.direction ?? ''}`,\n });\n const rows = paginateOptions ? paging.rows : rowsProp;\n const cards = useNarrowerThan(cardsBelow);\n const uid = React.useId();\n\n const selectable = Boolean(onSelectedChange);\n const selectedSet = React.useMemo(() => new Set(selected ?? []), [selected]);\n const ids = rows.map(getRowId);\n const pageSelected = ids.filter((id) => selectedSet.has(id)).length;\n const allState: boolean | 'indeterminate' =\n ids.length > 0 && pageSelected === ids.length\n ? true\n : pageSelected > 0\n ? 'indeterminate'\n : false;\n const tableColumns = columns.filter((c) => !c.cardOnly);\n const colCount = tableColumns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0);\n const interactive = Boolean(onRowAction) || selectable;\n\n // One tab stop in the body: the active row. Arrows move it.\n const [active, setActive] = React.useState(0);\n const frameRef = React.useRef<HTMLDivElement>(null);\n // Rows can shrink under the active index (a new page, a filter).\n const activeRow = Math.min(active, Math.max(0, rows.length - 1));\n\n const toggle = (id: string) => {\n if (!onSelectedChange) return;\n const next = new Set(selectedSet);\n if (next.has(id)) next.delete(id);\n else next.add(id);\n onSelectedChange([...next]);\n };\n const toggleAll = () => {\n if (!onSelectedChange) return;\n const next = new Set(selectedSet);\n if (allState === true) ids.forEach((id) => next.delete(id));\n else ids.forEach((id) => next.add(id));\n onSelectedChange([...next]);\n };\n const focusRow = (i: number) => {\n const clamped = Math.min(Math.max(i, 0), rows.length - 1);\n setActive(clamped);\n frameRef.current\n ?.querySelectorAll<HTMLElement>('[data-slot=\"table-body\"] > [data-slot=\"table-row\"]')\n [clamped]?.focus();\n };\n\n const onRowKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>, i: number, row: T) => {\n if (event.target !== event.currentTarget) return;\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n focusRow(i + 1);\n break;\n case 'ArrowUp':\n event.preventDefault();\n focusRow(i - 1);\n break;\n case 'Home':\n event.preventDefault();\n focusRow(0);\n break;\n case 'End':\n event.preventDefault();\n focusRow(rows.length - 1);\n break;\n case 'Enter':\n if (onRowAction) {\n event.preventDefault();\n onRowAction(row);\n }\n break;\n case ' ':\n if (selectable) {\n event.preventDefault();\n toggle(getRowId(row));\n }\n break;\n }\n };\n\n // Headers are gone on cards, so sorting moves to a menu in the toolbar.\n const sortable = onSortChange ? columns.filter((c) => c.sortable) : [];\n const columnLabel = (c: DataTableColumn<T>) => c.cardLabel ?? textOf(c.header) ?? c.id;\n const cardSort =\n cards && sortable.length > 0 && onSortChange ? (\n <Select\n value={sort ? `${sort.columnId}:${sort.direction}` : 'none'}\n onValueChange={(v) => {\n if (v === 'none') return onSortChange(null);\n const [columnId = '', direction] = v.split(':');\n onSortChange({ columnId, direction: direction === 'desc' ? 'desc' : 'asc' });\n }}\n >\n <SelectTrigger aria-label=\"Sort by\" className=\"pointer-coarse:h-11\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent align=\"end\">\n <SelectItem value=\"none\">Default order</SelectItem>\n {sortable.flatMap((c) => [\n <SelectItem key={`${c.id}:asc`} value={`${c.id}:asc`}>\n {columnLabel(c)} ascending\n </SelectItem>,\n <SelectItem key={`${c.id}:desc`} value={`${c.id}:desc`}>\n {columnLabel(c)} descending\n </SelectItem>,\n ])}\n </SelectContent>\n </Select>\n ) : null;\n const cardSelectAll =\n cards && selectable ? (\n <label\n htmlFor={`${uid}-all`}\n className=\"flex min-h-11 cursor-pointer items-center gap-2.5 pr-1 text-sm sm:min-h-9\"\n >\n <Checkbox\n id={`${uid}-all`}\n checked={allState}\n onCheckedChange={toggleAll}\n disabled={rows.length === 0}\n aria-label=\"Select all rows on this page\"\n />\n Select all\n </label>\n ) : null;\n\n const showToolbar = Boolean(\n onFilterChange || toolbar || (selectable && selectedSet.size) || cardSort || cardSelectAll,\n );\n\n const withNoun = (summary: string, total: number) =>\n rowNoun && total ? `${summary} ${rowNoun}` : summary;\n let pager: React.ReactNode = null;\n if (paginateOptions) {\n if (paging.hasPages)\n pager = (\n <Pagination {...paging.paginationProps} summary={withNoun(paging.summary, paging.total)} />\n );\n } else if (onPageChange && page !== undefined && pageCount !== undefined && pageCount > 0) {\n pager = (\n <Pagination\n page={page}\n pageCount={pageCount}\n onPageChange={onPageChange}\n summary={\n pageSummary ??\n (totalRows !== undefined && pageSize\n ? withNoun(\n paginationSummary(pageWindow({ page, pageSize, total: totalRows })),\n totalRows,\n )\n : undefined)\n }\n pageSize={pageSize}\n pageSizeOptions={pageSizeOptions}\n onPageSizeChange={onPageSizeChange}\n />\n );\n }\n\n const toolbarNode = showToolbar && (\n <div className=\"flex flex-wrap items-center gap-2\">\n {onFilterChange && (\n <div className=\"relative min-w-0 basis-full sm:max-w-xs sm:flex-1 sm:basis-0\">\n <Search\n className=\"pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground\"\n aria-hidden\n />\n <Input\n type=\"search\"\n value={filter ?? ''}\n onChange={(e) => onFilterChange(e.target.value)}\n placeholder={filterPlaceholder}\n aria-label={`Search ${ariaLabel.toLowerCase()}`}\n className=\"pl-8\"\n />\n </div>\n )}\n {cardSelectAll}\n {selectable && (\n <span aria-live=\"polite\" className=\"text-xs text-muted-foreground tabular-nums\">\n {selectedSet.size ? `${selectedSet.size} selected` : ''}\n </span>\n )}\n {(toolbar || cardSort) && (\n <div className=\"ml-auto flex flex-wrap items-center gap-2\">\n {cardSort}\n {toolbar}\n </div>\n )}\n </div>\n );\n\n return (\n <div\n data-slot=\"data-table\"\n data-layout={cards ? 'cards' : 'table'}\n // One minmax(0,1fr) track: a wide table scrolls inside its frame instead\n // of stretching a grid or flex parent.\n className={cn('grid min-w-0 grid-cols-[minmax(0,1fr)] gap-3', className)}\n {...props}\n >\n {toolbarNode}\n {cards ? (\n <DataTableCards\n aria-label={ariaLabel}\n columns={columns}\n rows={rows}\n getRowId={getRowId}\n getRowLabel={getRowLabel}\n selectedSet={selectedSet}\n onToggle={selectable ? toggle : undefined}\n onRowAction={onRowAction}\n rowActions={rowActions}\n loading={loading}\n error={error}\n onRetry={onRetry}\n empty={empty}\n />\n ) : (\n <div ref={frameRef} className=\"rounded-lg border bg-surface\">\n <Table\n aria-label={ariaLabel}\n scrollLabel={ariaLabel}\n aria-busy={loading || undefined}\n density={density}\n stickyHeader={stickyHeader}\n className={cn(loading && rows.length > 0 && 'opacity-60 transition-opacity')}\n >\n <TableHeader>\n <TableRow className=\"hover:bg-transparent\">\n {selectable && (\n <TableHead className=\"w-10\">\n <Checkbox\n checked={allState}\n onCheckedChange={toggleAll}\n disabled={rows.length === 0}\n aria-label=\"Select all rows on this page\"\n />\n </TableHead>\n )}\n {tableColumns.map((col) => {\n const sorted = sort?.columnId === col.id ? sort.direction : undefined;\n return (\n <TableHead\n key={col.id}\n numeric={col.numeric}\n className={cn(col.hideBelow && hideBelowClass[col.hideBelow], col.className)}\n aria-sort={\n col.sortable\n ? sorted === 'asc'\n ? 'ascending'\n : sorted === 'desc'\n ? 'descending'\n : 'none'\n : undefined\n }\n >\n {col.sortable && onSortChange ? (\n <button\n type=\"button\"\n onClick={() => onSortChange(nextSort(sort, col.id))}\n className={cn(\n '-mx-1.5 inline-flex h-7 items-center gap-1 rounded-sm px-1.5 uppercase outline-none hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20',\n sorted && 'text-foreground',\n col.numeric && 'flex-row-reverse',\n )}\n >\n {col.header}\n {sorted === 'asc' ? (\n <ArrowUp className=\"size-3.5\" aria-hidden />\n ) : sorted === 'desc' ? (\n <ArrowDown className=\"size-3.5\" aria-hidden />\n ) : (\n <ChevronsUpDown className=\"size-3.5 opacity-50\" aria-hidden />\n )}\n </button>\n ) : (\n col.header\n )}\n </TableHead>\n );\n })}\n {rowActions && (\n <TableHead className=\"w-12\">\n <span className=\"sr-only\">Actions</span>\n </TableHead>\n )}\n </TableRow>\n </TableHeader>\n <TableBody>\n {error ? (\n <TableRow className=\"hover:bg-transparent\">\n <TableCell\n colSpan={colCount}\n className=\"h-auto py-8 text-center whitespace-normal\"\n >\n <ErrorMessage error={error} onRetry={onRetry} />\n </TableCell>\n </TableRow>\n ) : loading && rows.length === 0 ? (\n Array.from({ length: 3 }, (_, r) => (\n <TableRow key={`loading-${r}`} className=\"hover:bg-transparent\" aria-hidden>\n {Array.from({ length: colCount }, (_, c) => (\n <TableCell key={c}>\n <Skeleton className=\"h-3.5 w-full max-w-40\" />\n </TableCell>\n ))}\n </TableRow>\n ))\n ) : rows.length === 0 ? (\n <TableRow className=\"hover:bg-transparent\">\n <TableCell\n colSpan={colCount}\n className=\"h-auto py-10 text-center whitespace-normal text-muted-foreground\"\n >\n {empty}\n </TableCell>\n </TableRow>\n ) : (\n rows.map((row, i) => {\n const id = getRowId(row);\n const isSelected = selectedSet.has(id);\n const label = getRowLabel?.(row) ?? id;\n return (\n <TableRow\n key={id}\n selected={isSelected}\n tabIndex={interactive ? (i === activeRow ? 0 : -1) : undefined}\n onFocus={() => setActive(i)}\n onKeyDown={interactive ? (e) => onRowKeyDown(e, i, row) : undefined}\n onClick={\n onRowAction\n ? (e) => {\n if ((e.target as HTMLElement).closest(INTERACTIVE)) return;\n onRowAction(row);\n }\n : undefined\n }\n className={cn(\n interactive &&\n 'outline-none focus-visible:bg-muted/60 focus-visible:shadow-[inset_2px_0_0_var(--ring)]',\n onRowAction && 'cursor-pointer',\n )}\n >\n {selectable && (\n <TableCell className=\"w-10\">\n <Checkbox\n checked={isSelected}\n onCheckedChange={() => toggle(id)}\n aria-label={`Select ${label}`}\n tabIndex={-1}\n />\n </TableCell>\n )}\n {tableColumns.map((col) => (\n <TableCell\n key={col.id}\n numeric={col.numeric}\n className={cn(\n col.hideBelow && hideBelowClass[col.hideBelow],\n col.className,\n )}\n >\n {col.cell(row)}\n </TableCell>\n ))}\n {rowActions && (\n <TableCell className=\"w-12 text-right\">{rowActions(row)}</TableCell>\n )}\n </TableRow>\n );\n })\n )}\n </TableBody>\n </Table>\n </div>\n )}\n {pager}\n </div>\n );\n}\n\nfunction ErrorMessage({ error, onRetry }: { error: React.ReactNode; onRetry?: () => void }) {\n return (\n <div role=\"alert\" className=\"grid justify-items-center gap-3 text-sm\">\n <span className=\"text-destructive\">{error}</span>\n {onRetry && (\n <Button type=\"button\" size=\"sm\" variant=\"outline\" onClick={onRetry}>\n Try again\n </Button>\n )}\n </div>\n );\n}\n\nconst cardLabelClass =\n 'text-[11px] font-semibold tracking-[0.06em] text-muted-foreground uppercase';\n\n/**\n * The phone layout: a list of articles, one per row, each named by its title.\n * The title is the row's open button (its hit area covers the card); the\n * checkbox, row actions and footer controls sit above it and keep their own\n * clicks. No roving focus: Tab walks the controls, as in any list of links.\n */\nfunction DataTableCards<T>({\n 'aria-label': ariaLabel,\n columns,\n rows,\n getRowId,\n getRowLabel,\n selectedSet,\n onToggle,\n onRowAction,\n rowActions,\n loading,\n error,\n onRetry,\n empty,\n}: {\n 'aria-label': string;\n columns: DataTableColumn<T>[];\n rows: T[];\n getRowId: (row: T) => string;\n getRowLabel?: (row: T) => string;\n selectedSet: Set<string>;\n onToggle?: (id: string) => void;\n onRowAction?: (row: T) => void;\n rowActions?: (row: T) => React.ReactNode;\n loading: boolean;\n error?: React.ReactNode;\n onRetry?: () => void;\n empty: React.ReactNode;\n}) {\n const uid = React.useId();\n if (error)\n return (\n <div className=\"rounded-lg border bg-surface px-4 py-8\">\n <ErrorMessage error={error} onRetry={onRetry} />\n </div>\n );\n if (rows.length === 0 && !loading)\n return (\n <div className=\"rounded-lg border bg-surface px-4 py-10 text-center text-sm text-muted-foreground\">\n {empty}\n </div>\n );\n\n const visible = columns.filter((c) => c.card !== 'hidden');\n // With no column marked as the title, the first unplaced column is it.\n const firstUnplaced = visible.some((c) => c.card === 'title')\n ? undefined\n : visible.find((c) => c.card === undefined);\n const slotOf = (c: DataTableColumn<T>): DataTableCardSlot =>\n c.card ?? (c === firstUnplaced ? 'title' : 'field');\n const inSlot = (s: DataTableCardSlot) => visible.filter((c) => slotOf(c) === s);\n const title = inSlot('title');\n const subtitle = inSlot('subtitle');\n const aside = inSlot('aside');\n const fields = inSlot('field');\n const footer = inSlot('footer');\n const show = (c: DataTableColumn<T>, row: T) => (c.cardCell ?? c.cell)(row);\n\n return (\n // role=\"list\": Safari drops list semantics from a list with no bullets.\n // eslint-disable-next-line jsx-a11y/no-redundant-roles\n <ul\n role=\"list\"\n aria-label={ariaLabel}\n aria-busy={loading || undefined}\n data-slot=\"data-table-cards\"\n className={cn('grid gap-2', loading && rows.length > 0 && 'opacity-60 transition-opacity')}\n >\n {loading && rows.length === 0\n ? Array.from({ length: 3 }, (_, r) => (\n <li\n key={`loading-${r}`}\n aria-hidden\n className=\"grid gap-3 rounded-lg border bg-surface p-3.5\"\n >\n <Skeleton className=\"h-4 w-1/2\" />\n <Skeleton className=\"h-3.5 w-3/4\" />\n </li>\n ))\n : rows.map((row, i) => {\n const id = getRowId(row);\n const label = getRowLabel?.(row) ?? id;\n const isSelected = selectedSet.has(id);\n const titleId = `${uid}-${i}`;\n return (\n <li key={id}>\n <article\n aria-labelledby={title.length ? titleId : undefined}\n aria-label={title.length ? undefined : label}\n data-slot=\"data-table-card\"\n data-state={isSelected ? 'selected' : undefined}\n className={cn(\n 'relative grid gap-3 rounded-lg border bg-surface p-3.5 shadow-xs transition-colors',\n onRowAction &&\n 'hover:bg-muted/40 has-[[data-row-action]:focus-visible]:border-ring has-[[data-row-action]:focus-visible]:inset-ring-1 has-[[data-row-action]:focus-visible]:inset-ring-ring',\n 'data-[state=selected]:border-brand/40 data-[state=selected]:bg-brand-soft/60',\n )}\n >\n <div className=\"flex items-start gap-3\">\n {onToggle && (\n // A 44px target around the 16px box.\n <label\n htmlFor={`${titleId}-select`}\n className=\"relative z-10 -mx-3.5 -my-3 grid size-11 shrink-0 cursor-pointer place-items-center\"\n >\n <Checkbox\n id={`${titleId}-select`}\n checked={isSelected}\n onCheckedChange={() => onToggle(id)}\n aria-label={`Select ${label}`}\n />\n </label>\n )}\n <div className=\"grid min-w-0 flex-1 gap-0.5\">\n {title.map((c, j) => (\n <div\n key={c.id}\n id={j === 0 ? titleId : undefined}\n className=\"min-w-0 text-[15px] leading-5 font-semibold [overflow-wrap:anywhere]\"\n >\n {onRowAction && j === 0 ? (\n <button\n type=\"button\"\n data-row-action=\"\"\n onClick={() => onRowAction(row)}\n className=\"text-left outline-hidden! after:absolute after:inset-0 after:rounded-lg\"\n >\n {show(c, row)}\n </button>\n ) : (\n show(c, row)\n )}\n </div>\n ))}\n </div>\n {aside.length > 0 && (\n <div className=\"relative z-10 flex shrink-0 flex-col items-end gap-1\">\n {aside.map((c) => (\n <div key={c.id}>{show(c, row)}</div>\n ))}\n </div>\n )}\n {rowActions && (\n <div className=\"relative z-10 -my-2.5 -mr-1.5 shrink-0\">\n {rowActions(row)}\n </div>\n )}\n </div>\n {subtitle.length > 0 && (\n // Under the header row, not beside the status, so it gets the card's width.\n <div className={cn('-mt-2 grid min-w-0 gap-0.5', onToggle && 'pl-7')}>\n {subtitle.map((c) => (\n <div\n key={c.id}\n className=\"min-w-0 text-sm text-muted-foreground [overflow-wrap:anywhere]\"\n >\n {show(c, row)}\n </div>\n ))}\n </div>\n )}\n {fields.length > 0 && (\n <dl className=\"grid grid-cols-2 gap-x-4 gap-y-2.5 text-sm\">\n {fields.map((c) => (\n <div key={c.id} className=\"min-w-0\">\n <dt className={cardLabelClass}>{c.cardLabel ?? c.header}</dt>\n <dd\n className={cn(\n 'mt-0.5 min-w-0 [overflow-wrap:anywhere]',\n c.numeric && 'tabular-nums',\n )}\n >\n {show(c, row)}\n </dd>\n </div>\n ))}\n </dl>\n )}\n {footer.map((c) => (\n <div key={c.id} className=\"relative z-10 flex flex-wrap gap-2\">\n {show(c, row)}\n </div>\n ))}\n </article>\n </li>\n );\n })}\n </ul>\n );\n}\n\nexport { DataTable };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"data-table.js","names":[],"sources":["../../src/components/data-table.tsx"],"sourcesContent":["import ArrowDown from '@burtson-labs/icons/react/arrow-down';\nimport ArrowUp from '@burtson-labs/icons/react/arrow-up';\nimport ChevronsUpDown from '@burtson-labs/icons/react/chevrons-up-down';\nimport Search from '@burtson-labs/icons/react/search';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Button } from './button';\nimport { Checkbox } from './checkbox';\nimport { Input } from './input';\nimport { Pagination, pageWindow, paginationSummary, usePagination } from './pagination';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';\nimport { Skeleton } from './skeleton';\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table';\n\n/**\n * Where a column goes on a phone card: `title` and `subtitle` head the card,\n * `aside` sits top right (a status badge), `field` is a labelled value in a\n * two-column grid, `footer` is a full-width line at the bottom (links,\n * buttons), `hidden` is left off the card.\n */\nexport type DataTableCardSlot = 'title' | 'subtitle' | 'aside' | 'field' | 'footer' | 'hidden';\n\nexport type DataTableBreakpoint = 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface DataTableColumn<T> {\n id: string;\n header: React.ReactNode;\n cell: (row: T) => React.ReactNode;\n sortable?: boolean;\n /** Right-aligned tabular figures. */\n numeric?: boolean;\n className?: string;\n /**\n * Place on a phone card. With no column marked `title`, the first column\n * is the title; every other column is a `field` unless it says otherwise.\n */\n card?: DataTableCardSlot;\n /** The field's label on a card when `header` is not plain text. */\n cardLabel?: string;\n /** A shorter rendering for the card, e.g. a date without the time. */\n cardCell?: (row: T) => React.ReactNode;\n /** Only on cards, never a table column (e.g. a subtitle the table shows in another cell). */\n cardOnly?: boolean;\n /** Leave the column out of the table below this width (tablets). */\n hideBelow?: DataTableBreakpoint;\n}\n\nexport interface DataTablePaginateOptions {\n /** Starting rows per page; the first option by default. */\n pageSize?: number;\n /** 25, 50 and 100 by default. */\n pageSizeOptions?: readonly number[];\n /** Remembers the chosen page size in localStorage under this key. */\n storageKey?: string;\n}\n\nexport type SortDirection = 'asc' | 'desc';\n\nexport interface DataTableSort {\n columnId: string;\n direction: SortDirection;\n}\n\nexport interface DataTableProps<T> extends Omit<React.ComponentProps<'div'>, 'children'> {\n /** Required: what the table lists, e.g. \"Workspace members\". */\n 'aria-label': string;\n columns: DataTableColumn<T>[];\n /** The rows to show now: already sorted, filtered and paged by the app or server. */\n rows: T[];\n getRowId: (row: T) => string;\n /** Names a row for screen readers (\"Select Ada Lovelace\"). Defaults to its id. */\n getRowLabel?: (row: T) => string;\n\n /** Controlled sort. A sortable header cycles ascending, descending, none. */\n sort?: DataTableSort | null;\n onSortChange?: (sort: DataTableSort | null) => void;\n\n /** Controlled filter text; a search box appears when onFilterChange is set. */\n filter?: string;\n onFilterChange?: (value: string) => void;\n filterPlaceholder?: string;\n\n /** Controlled selection by row id; checkboxes appear when onSelectedChange is set. */\n selected?: string[];\n onSelectedChange?: (ids: string[]) => void;\n\n /** Enter or a click on the row, e.g. open the record. */\n onRowAction?: (row: T) => void;\n /** Per-row controls in a trailing column, e.g. a DropdownMenu. */\n rowActions?: (row: T) => React.ReactNode;\n\n /** 1-based; Pagination appears when onPageChange is set. */\n page?: number;\n pageCount?: number;\n onPageChange?: (page: number) => void;\n /** e.g. \"1–25 of 312\". Worked out from `totalRows` and `pageSize` when left out. */\n pageSummary?: React.ReactNode;\n /** Rows per page, for the page-size menu and the summary. */\n pageSize?: number;\n pageSizeOptions?: readonly number[];\n /** Adds a rows-per-page menu beside the pages. */\n onPageSizeChange?: (pageSize: number) => void;\n /** Every row on every page (server paging), for the summary. */\n totalRows?: number;\n /**\n * Page in the browser: pass every row in `rows` and the table shows one\n * page, with a rows-per-page menu. It goes back to page 1 when `filter` or\n * `sort` changes. Leave out to page in your app or on the server.\n */\n paginate?: boolean | DataTablePaginateOptions;\n /** Plural noun appended to the built-in summary: \"1–25 of 312 members\". */\n rowNoun?: string;\n\n loading?: boolean;\n /** A message shown in place of the rows. */\n error?: React.ReactNode;\n onRetry?: () => void;\n /** Shown when there are no rows and nothing failed. */\n empty?: React.ReactNode;\n /** Extra controls beside the search box, e.g. filters or a bulk action. */\n toolbar?: React.ReactNode;\n density?: 'compact' | 'default';\n stickyHeader?: boolean;\n /**\n * Below this width the rows become a list of cards (see DataTableColumn\n * `card`). `md` (768px) by default; `false` keeps the table everywhere.\n */\n cardsBelow?: DataTableBreakpoint | false;\n}\n\nconst BREAKPOINTS: Record<DataTableBreakpoint, number> = { sm: 640, md: 768, lg: 1024, xl: 1280 };\n\nconst hideBelowClass: Record<DataTableBreakpoint, string> = {\n sm: 'hidden sm:table-cell',\n md: 'hidden md:table-cell',\n lg: 'hidden lg:table-cell',\n xl: 'hidden xl:table-cell',\n};\n\nconst subscribeNone = () => () => undefined;\n\n/**\n * True while the viewport is narrower than `bp`. Without matchMedia (server\n * render, tests) it is false, so the table is the fallback.\n */\nfunction useNarrowerThan(bp: DataTableBreakpoint | false): boolean {\n const query = bp ? `(max-width: ${BREAKPOINTS[bp] - 0.02}px)` : null;\n const subscribe = React.useCallback(\n (onChange: () => void) => {\n if (!query || typeof matchMedia !== 'function') return () => undefined;\n const mq = matchMedia(query);\n mq.addEventListener?.('change', onChange);\n return () => mq.removeEventListener?.('change', onChange);\n },\n [query],\n );\n return React.useSyncExternalStore(\n query ? subscribe : subscribeNone,\n () => Boolean(query && typeof matchMedia === 'function' && matchMedia(query).matches),\n () => false,\n );\n}\n\nconst textOf = (node: React.ReactNode): string | undefined =>\n typeof node === 'string' || typeof node === 'number' ? String(node) : undefined;\n\nconst nextSort = (current: DataTableSort | null | undefined, id: string): DataTableSort | null => {\n if (!current || current.columnId !== id) return { columnId: id, direction: 'asc' };\n return current.direction === 'asc' ? { columnId: id, direction: 'desc' } : null;\n};\n\n// Clicks and keys aimed at these belong to them, not to the row.\nconst INTERACTIVE = 'a,button,input,select,textarea,[role=\"checkbox\"],[role=\"menuitem\"]';\n\n/**\n * A table recipe for records: sort, search, select, page, and row actions,\n * with loading, empty and error states. Fully controlled, so the data can\n * come from a server; the table never reorders rows itself. On a phone the\n * rows become cards (`cardsBelow`), with the same columns.\n */\nfunction DataTable<T>({\n 'aria-label': ariaLabel,\n columns,\n rows: rowsProp,\n getRowId,\n getRowLabel,\n sort,\n onSortChange,\n filter,\n onFilterChange,\n filterPlaceholder = 'Search',\n selected,\n onSelectedChange,\n onRowAction,\n rowActions,\n page,\n pageCount,\n onPageChange,\n pageSummary,\n pageSize,\n pageSizeOptions,\n onPageSizeChange,\n totalRows,\n paginate,\n rowNoun,\n loading = false,\n error,\n onRetry,\n empty = 'No results.',\n toolbar,\n density = 'default',\n stickyHeader,\n cardsBelow = 'md',\n className,\n ...props\n}: DataTableProps<T>) {\n const paginateOptions = paginate === true ? {} : paginate || undefined;\n const paging = usePagination(rowsProp, {\n defaultPageSize: paginateOptions?.pageSize,\n pageSizeOptions: paginateOptions?.pageSizeOptions,\n storageKey: paginateOptions?.storageKey,\n // A new search or sort starts again at page 1.\n resetKey: `${filter ?? ''}\\u0000${sort?.columnId ?? ''}\\u0000${sort?.direction ?? ''}`,\n });\n const rows = paginateOptions ? paging.rows : rowsProp;\n const cards = useNarrowerThan(cardsBelow);\n const uid = React.useId();\n\n const selectable = Boolean(onSelectedChange);\n const selectedSet = React.useMemo(() => new Set(selected ?? []), [selected]);\n const ids = rows.map(getRowId);\n const pageSelected = ids.filter((id) => selectedSet.has(id)).length;\n const allState: boolean | 'indeterminate' =\n ids.length > 0 && pageSelected === ids.length\n ? true\n : pageSelected > 0\n ? 'indeterminate'\n : false;\n const tableColumns = columns.filter((c) => !c.cardOnly);\n const colCount = tableColumns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0);\n const interactive = Boolean(onRowAction) || selectable;\n\n // One tab stop in the body: the active row. Arrows move it.\n const [active, setActive] = React.useState(0);\n const frameRef = React.useRef<HTMLDivElement>(null);\n // Rows can shrink under the active index (a new page, a filter).\n const activeRow = Math.min(active, Math.max(0, rows.length - 1));\n\n const toggle = (id: string) => {\n if (!onSelectedChange) return;\n const next = new Set(selectedSet);\n if (next.has(id)) next.delete(id);\n else next.add(id);\n onSelectedChange([...next]);\n };\n const toggleAll = () => {\n if (!onSelectedChange) return;\n const next = new Set(selectedSet);\n if (allState === true) ids.forEach((id) => next.delete(id));\n else ids.forEach((id) => next.add(id));\n onSelectedChange([...next]);\n };\n const focusRow = (i: number) => {\n const clamped = Math.min(Math.max(i, 0), rows.length - 1);\n setActive(clamped);\n frameRef.current\n ?.querySelectorAll<HTMLElement>('[data-slot=\"table-body\"] > [data-slot=\"table-row\"]')\n [clamped]?.focus();\n };\n\n const onRowKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>, i: number, row: T) => {\n if (event.target !== event.currentTarget) return;\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n focusRow(i + 1);\n break;\n case 'ArrowUp':\n event.preventDefault();\n focusRow(i - 1);\n break;\n case 'Home':\n event.preventDefault();\n focusRow(0);\n break;\n case 'End':\n event.preventDefault();\n focusRow(rows.length - 1);\n break;\n case 'Enter':\n if (onRowAction) {\n event.preventDefault();\n onRowAction(row);\n }\n break;\n case ' ':\n if (selectable) {\n event.preventDefault();\n toggle(getRowId(row));\n }\n break;\n }\n };\n\n // Headers are gone on cards, so sorting moves to a menu in the toolbar.\n const sortable = onSortChange ? columns.filter((c) => c.sortable) : [];\n const columnLabel = (c: DataTableColumn<T>) => c.cardLabel ?? textOf(c.header) ?? c.id;\n const cardSort =\n cards && sortable.length > 0 && onSortChange ? (\n <Select\n value={sort ? `${sort.columnId}:${sort.direction}` : 'none'}\n onValueChange={(v) => {\n if (v === 'none') return onSortChange(null);\n const [columnId = '', direction] = v.split(':');\n onSortChange({ columnId, direction: direction === 'desc' ? 'desc' : 'asc' });\n }}\n >\n <SelectTrigger aria-label=\"Sort by\" className=\"pointer-coarse:h-11\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent align=\"end\">\n <SelectItem value=\"none\">Default order</SelectItem>\n {sortable.flatMap((c) => [\n <SelectItem key={`${c.id}:asc`} value={`${c.id}:asc`}>\n {columnLabel(c)} ascending\n </SelectItem>,\n <SelectItem key={`${c.id}:desc`} value={`${c.id}:desc`}>\n {columnLabel(c)} descending\n </SelectItem>,\n ])}\n </SelectContent>\n </Select>\n ) : null;\n const cardSelectAll =\n cards && selectable ? (\n <label\n htmlFor={`${uid}-all`}\n className=\"flex min-h-11 cursor-pointer items-center gap-2.5 pr-1 text-sm sm:min-h-9\"\n >\n <Checkbox\n id={`${uid}-all`}\n checked={allState}\n onCheckedChange={toggleAll}\n disabled={rows.length === 0}\n aria-label=\"Select all rows on this page\"\n />\n Select all\n </label>\n ) : null;\n\n const showToolbar = Boolean(\n onFilterChange || toolbar || (selectable && selectedSet.size) || cardSort || cardSelectAll,\n );\n\n const withNoun = (summary: string, total: number) =>\n rowNoun && total ? `${summary} ${rowNoun}` : summary;\n let pager: React.ReactNode = null;\n if (paginateOptions) {\n if (paging.hasPages)\n pager = (\n <Pagination {...paging.paginationProps} summary={withNoun(paging.summary, paging.total)} />\n );\n } else if (onPageChange && page !== undefined && pageCount !== undefined && pageCount > 0) {\n pager = (\n <Pagination\n page={page}\n pageCount={pageCount}\n onPageChange={onPageChange}\n summary={\n pageSummary ??\n (totalRows !== undefined && pageSize\n ? withNoun(\n paginationSummary(pageWindow({ page, pageSize, total: totalRows })),\n totalRows,\n )\n : undefined)\n }\n pageSize={pageSize}\n pageSizeOptions={pageSizeOptions}\n onPageSizeChange={onPageSizeChange}\n />\n );\n }\n\n const toolbarNode = showToolbar && (\n <div className=\"flex flex-wrap items-center gap-2\">\n {onFilterChange && (\n <div className=\"relative min-w-0 basis-full sm:max-w-xs sm:flex-1 sm:basis-0\">\n <Search\n className=\"pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground\"\n aria-hidden\n />\n <Input\n type=\"search\"\n value={filter ?? ''}\n onChange={(e) => onFilterChange(e.target.value)}\n placeholder={filterPlaceholder}\n aria-label={`Search ${ariaLabel.toLowerCase()}`}\n className=\"pl-8\"\n />\n </div>\n )}\n {cardSelectAll}\n {selectable && (\n <span aria-live=\"polite\" className=\"text-xs text-muted-foreground tabular-nums\">\n {selectedSet.size ? `${selectedSet.size} selected` : ''}\n </span>\n )}\n {(toolbar || cardSort) && (\n <div className=\"ml-auto flex flex-wrap items-center gap-2\">\n {cardSort}\n {toolbar}\n </div>\n )}\n </div>\n );\n\n return (\n <div\n data-slot=\"data-table\"\n data-layout={cards ? 'cards' : 'table'}\n // One minmax(0,1fr) track: a wide table scrolls inside its frame instead\n // of stretching a grid or flex parent.\n className={cn('grid min-w-0 grid-cols-[minmax(0,1fr)] gap-3', className)}\n {...props}\n >\n {toolbarNode}\n {cards ? (\n <DataTableCards\n aria-label={ariaLabel}\n columns={columns}\n rows={rows}\n getRowId={getRowId}\n getRowLabel={getRowLabel}\n selectedSet={selectedSet}\n onToggle={selectable ? toggle : undefined}\n onRowAction={onRowAction}\n rowActions={rowActions}\n loading={loading}\n error={error}\n onRetry={onRetry}\n empty={empty}\n />\n ) : (\n <div ref={frameRef} className=\"rounded-lg border bg-surface\">\n <Table\n aria-label={ariaLabel}\n scrollLabel={ariaLabel}\n aria-busy={loading || undefined}\n density={density}\n stickyHeader={stickyHeader}\n className={cn(loading && rows.length > 0 && 'opacity-60 transition-opacity')}\n >\n <TableHeader>\n <TableRow className=\"hover:bg-transparent\">\n {selectable && (\n <TableHead className=\"w-10\">\n <Checkbox\n checked={allState}\n onCheckedChange={toggleAll}\n disabled={rows.length === 0}\n aria-label=\"Select all rows on this page\"\n />\n </TableHead>\n )}\n {tableColumns.map((col) => {\n const sorted = sort?.columnId === col.id ? sort.direction : undefined;\n return (\n <TableHead\n key={col.id}\n numeric={col.numeric}\n className={cn(col.hideBelow && hideBelowClass[col.hideBelow], col.className)}\n aria-sort={\n col.sortable\n ? sorted === 'asc'\n ? 'ascending'\n : sorted === 'desc'\n ? 'descending'\n : 'none'\n : undefined\n }\n >\n {col.sortable && onSortChange ? (\n <button\n type=\"button\"\n onClick={() => onSortChange(nextSort(sort, col.id))}\n className={cn(\n '-mx-1.5 inline-flex h-7 items-center gap-1 rounded-sm px-1.5 uppercase outline-none hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20',\n sorted && 'text-foreground',\n col.numeric && 'flex-row-reverse',\n )}\n >\n {col.header}\n {sorted === 'asc' ? (\n <ArrowUp className=\"size-3.5\" aria-hidden />\n ) : sorted === 'desc' ? (\n <ArrowDown className=\"size-3.5\" aria-hidden />\n ) : (\n <ChevronsUpDown className=\"size-3.5 opacity-50\" aria-hidden />\n )}\n </button>\n ) : (\n col.header\n )}\n </TableHead>\n );\n })}\n {rowActions && (\n <TableHead className=\"w-12\">\n <span className=\"sr-only\">Actions</span>\n </TableHead>\n )}\n </TableRow>\n </TableHeader>\n <TableBody>\n {error ? (\n <TableRow className=\"hover:bg-transparent\">\n <TableCell\n colSpan={colCount}\n className=\"h-auto py-8 text-center whitespace-normal\"\n >\n <ErrorMessage error={error} onRetry={onRetry} />\n </TableCell>\n </TableRow>\n ) : loading && rows.length === 0 ? (\n Array.from({ length: 3 }, (_, r) => (\n <TableRow key={`loading-${r}`} className=\"hover:bg-transparent\" aria-hidden>\n {Array.from({ length: colCount }, (_, c) => (\n <TableCell key={c}>\n <Skeleton className=\"h-3.5 w-full max-w-40\" />\n </TableCell>\n ))}\n </TableRow>\n ))\n ) : rows.length === 0 ? (\n <TableRow className=\"hover:bg-transparent\">\n <TableCell\n colSpan={colCount}\n className=\"h-auto py-10 text-center whitespace-normal text-muted-foreground\"\n >\n {empty}\n </TableCell>\n </TableRow>\n ) : (\n rows.map((row, i) => {\n const id = getRowId(row);\n const isSelected = selectedSet.has(id);\n const label = getRowLabel?.(row) ?? id;\n return (\n <TableRow\n key={id}\n selected={isSelected}\n tabIndex={interactive ? (i === activeRow ? 0 : -1) : undefined}\n onFocus={() => setActive(i)}\n onKeyDown={interactive ? (e) => onRowKeyDown(e, i, row) : undefined}\n onClick={\n onRowAction\n ? (e) => {\n if ((e.target as HTMLElement).closest(INTERACTIVE)) return;\n onRowAction(row);\n }\n : undefined\n }\n className={cn(\n interactive &&\n 'outline-none focus-visible:bg-muted/60 focus-visible:shadow-[inset_2px_0_0_var(--ring)]',\n onRowAction && 'cursor-pointer',\n )}\n >\n {selectable && (\n <TableCell className=\"w-10\">\n <Checkbox\n checked={isSelected}\n onCheckedChange={() => toggle(id)}\n aria-label={`Select ${label}`}\n tabIndex={-1}\n />\n </TableCell>\n )}\n {tableColumns.map((col) => (\n <TableCell\n key={col.id}\n numeric={col.numeric}\n className={cn(\n col.hideBelow && hideBelowClass[col.hideBelow],\n col.className,\n )}\n >\n {col.cell(row)}\n </TableCell>\n ))}\n {rowActions && (\n <TableCell className=\"w-12 text-right\">{rowActions(row)}</TableCell>\n )}\n </TableRow>\n );\n })\n )}\n </TableBody>\n </Table>\n </div>\n )}\n {pager}\n </div>\n );\n}\n\nfunction ErrorMessage({ error, onRetry }: { error: React.ReactNode; onRetry?: () => void }) {\n return (\n <div role=\"alert\" className=\"grid justify-items-center gap-3 text-sm\">\n <span className=\"text-destructive\">{error}</span>\n {onRetry && (\n <Button type=\"button\" size=\"sm\" variant=\"outline\" onClick={onRetry}>\n Try again\n </Button>\n )}\n </div>\n );\n}\n\nconst cardLabelClass =\n 'text-[11px] font-semibold tracking-[0.06em] text-muted-foreground uppercase';\n\n// The title's open button covers the card with an ::after overlay. A link or\n// control inside a subtitle or field (a mailto link, a toggle) would sit under\n// it, unlike the table, where clicks on a control belong to the control\n// (INTERACTIVE). Lift them above the overlay; the rest of the area still opens\n// the row.\nconst liftControls =\n '[&_a]:relative [&_a]:z-10 [&_button]:relative [&_button]:z-10 [&_input]:relative [&_input]:z-10 [&_select]:relative [&_select]:z-10 [&_textarea]:relative [&_textarea]:z-10';\n\n/**\n * The phone layout: a list of articles, one per row, each named by its title.\n * The title is the row's open button (its hit area covers the card); the\n * checkbox, row actions and footer controls sit above it and keep their own\n * clicks. No roving focus: Tab walks the controls, as in any list of links.\n */\nfunction DataTableCards<T>({\n 'aria-label': ariaLabel,\n columns,\n rows,\n getRowId,\n getRowLabel,\n selectedSet,\n onToggle,\n onRowAction,\n rowActions,\n loading,\n error,\n onRetry,\n empty,\n}: {\n 'aria-label': string;\n columns: DataTableColumn<T>[];\n rows: T[];\n getRowId: (row: T) => string;\n getRowLabel?: (row: T) => string;\n selectedSet: Set<string>;\n onToggle?: (id: string) => void;\n onRowAction?: (row: T) => void;\n rowActions?: (row: T) => React.ReactNode;\n loading: boolean;\n error?: React.ReactNode;\n onRetry?: () => void;\n empty: React.ReactNode;\n}) {\n const uid = React.useId();\n if (error)\n return (\n <div className=\"rounded-lg border bg-surface px-4 py-8\">\n <ErrorMessage error={error} onRetry={onRetry} />\n </div>\n );\n if (rows.length === 0 && !loading)\n return (\n <div className=\"rounded-lg border bg-surface px-4 py-10 text-center text-sm text-muted-foreground\">\n {empty}\n </div>\n );\n\n const visible = columns.filter((c) => c.card !== 'hidden');\n // With no column marked as the title, the first unplaced column is it.\n const firstUnplaced = visible.some((c) => c.card === 'title')\n ? undefined\n : visible.find((c) => c.card === undefined);\n const slotOf = (c: DataTableColumn<T>): DataTableCardSlot =>\n c.card ?? (c === firstUnplaced ? 'title' : 'field');\n const inSlot = (s: DataTableCardSlot) => visible.filter((c) => slotOf(c) === s);\n const title = inSlot('title');\n const subtitle = inSlot('subtitle');\n const aside = inSlot('aside');\n const fields = inSlot('field');\n const footer = inSlot('footer');\n const show = (c: DataTableColumn<T>, row: T) => (c.cardCell ?? c.cell)(row);\n\n return (\n // role=\"list\": Safari drops list semantics from a list with no bullets.\n // eslint-disable-next-line jsx-a11y/no-redundant-roles\n <ul\n role=\"list\"\n aria-label={ariaLabel}\n aria-busy={loading || undefined}\n data-slot=\"data-table-cards\"\n className={cn('grid gap-2', loading && rows.length > 0 && 'opacity-60 transition-opacity')}\n >\n {loading && rows.length === 0\n ? Array.from({ length: 3 }, (_, r) => (\n <li\n key={`loading-${r}`}\n aria-hidden\n className=\"grid gap-3 rounded-lg border bg-surface p-3.5\"\n >\n <Skeleton className=\"h-4 w-1/2\" />\n <Skeleton className=\"h-3.5 w-3/4\" />\n </li>\n ))\n : rows.map((row, i) => {\n const id = getRowId(row);\n const label = getRowLabel?.(row) ?? id;\n const isSelected = selectedSet.has(id);\n const titleId = `${uid}-${i}`;\n return (\n <li key={id}>\n <article\n aria-labelledby={title.length ? titleId : undefined}\n aria-label={title.length ? undefined : label}\n data-slot=\"data-table-card\"\n data-state={isSelected ? 'selected' : undefined}\n className={cn(\n 'relative grid gap-3 rounded-lg border bg-surface p-3.5 shadow-xs transition-colors',\n onRowAction &&\n 'hover:bg-muted/40 has-[[data-row-action]:focus-visible]:border-ring has-[[data-row-action]:focus-visible]:inset-ring-1 has-[[data-row-action]:focus-visible]:inset-ring-ring',\n 'data-[state=selected]:border-brand/40 data-[state=selected]:bg-brand-soft/60',\n )}\n >\n <div className=\"flex items-start gap-3\">\n {onToggle && (\n // A 44px target around the 16px box.\n <label\n htmlFor={`${titleId}-select`}\n className=\"relative z-10 -mx-3.5 -my-3 grid size-11 shrink-0 cursor-pointer place-items-center\"\n >\n <Checkbox\n id={`${titleId}-select`}\n checked={isSelected}\n onCheckedChange={() => onToggle(id)}\n aria-label={`Select ${label}`}\n />\n </label>\n )}\n <div className=\"grid min-w-0 flex-1 gap-0.5\">\n {title.map((c, j) => (\n <div\n key={c.id}\n id={j === 0 ? titleId : undefined}\n className=\"min-w-0 text-[15px] leading-5 font-semibold [overflow-wrap:anywhere]\"\n >\n {onRowAction && j === 0 ? (\n <button\n type=\"button\"\n data-row-action=\"\"\n onClick={() => onRowAction(row)}\n className=\"text-left outline-hidden! after:absolute after:inset-0 after:rounded-lg\"\n >\n {show(c, row)}\n </button>\n ) : (\n show(c, row)\n )}\n </div>\n ))}\n </div>\n {aside.length > 0 && (\n <div className=\"relative z-10 flex shrink-0 flex-col items-end gap-1\">\n {aside.map((c) => (\n <div key={c.id}>{show(c, row)}</div>\n ))}\n </div>\n )}\n {rowActions && (\n <div className=\"relative z-10 -my-2.5 -mr-1.5 shrink-0\">\n {rowActions(row)}\n </div>\n )}\n </div>\n {subtitle.length > 0 && (\n // Under the header row, not beside the status, so it gets the card's width.\n <div\n className={cn('-mt-2 grid min-w-0 gap-0.5', liftControls, onToggle && 'pl-7')}\n >\n {subtitle.map((c) => (\n <div\n key={c.id}\n className=\"min-w-0 text-sm text-muted-foreground [overflow-wrap:anywhere]\"\n >\n {show(c, row)}\n </div>\n ))}\n </div>\n )}\n {fields.length > 0 && (\n <dl className={cn('grid grid-cols-2 gap-x-4 gap-y-2.5 text-sm', liftControls)}>\n {fields.map((c) => (\n <div key={c.id} className=\"min-w-0\">\n <dt className={cardLabelClass}>{c.cardLabel ?? c.header}</dt>\n <dd\n className={cn(\n 'mt-0.5 min-w-0 [overflow-wrap:anywhere]',\n c.numeric && 'tabular-nums',\n )}\n >\n {show(c, row)}\n </dd>\n </div>\n ))}\n </dl>\n )}\n {footer.map((c) => (\n <div key={c.id} className=\"relative z-10 flex flex-wrap gap-2\">\n {show(c, row)}\n </div>\n ))}\n </article>\n </li>\n );\n })}\n </ul>\n );\n}\n\nexport { DataTable };\n"],"mappings":"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"}
|
|
@@ -155,7 +155,7 @@ function usePagination(rows, options = {}) {
|
|
|
155
155
|
rows: [...rows]
|
|
156
156
|
};
|
|
157
157
|
const summary = paginationSummary(w, locale);
|
|
158
|
-
const hasPages = w.total > Math.min(
|
|
158
|
+
const hasPages = w.total > Math.min(w.pageSize, ...pageSizeOptions);
|
|
159
159
|
return {
|
|
160
160
|
...w,
|
|
161
161
|
pageSizeOptions,
|
|
@@ -243,7 +243,7 @@ function Pagination({ page: requestedPage, pageCount: requestedCount, onPageChan
|
|
|
243
243
|
"aria-hidden": true,
|
|
244
244
|
"data-slot": "pagination-position",
|
|
245
245
|
className: "px-2 text-sm font-medium tabular-nums sm:hidden",
|
|
246
|
-
children: position
|
|
246
|
+
children: pageCount > 0 ? position : ""
|
|
247
247
|
}),
|
|
248
248
|
/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Button, {
|
|
249
249
|
variant: "ghost",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination.js","names":[],"sources":["../../src/components/pagination.tsx"],"sourcesContent":["import ChevronLeft from '@burtson-labs/icons/react/chevron-left';\nimport ChevronRight from '@burtson-labs/icons/react/chevron-right';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Button } from './button';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';\n\n/**\n * The page numbers to show: always the first and last page, `siblings` pages\n * either side of the current one, and 'ellipsis' for the gaps.\n */\nexport function paginationRange(\n page: number,\n pageCount: number,\n siblings = 1,\n): (number | 'ellipsis')[] {\n pageCount = Number.isFinite(pageCount) ? Math.max(0, Math.floor(pageCount)) : 0;\n siblings = Number.isFinite(siblings) ? Math.min(5, Math.max(0, Math.floor(siblings))) : 1;\n page = Number.isFinite(page) ? Math.max(1, Math.min(pageCount, Math.floor(page))) : 1;\n if (pageCount <= 0) return [];\n const window = siblings * 2 + 5; // first, last, current, siblings, two gaps\n if (pageCount <= window) return Array.from({ length: pageCount }, (_, i) => i + 1);\n const start = Math.max(2, page - siblings);\n const end = Math.min(pageCount - 1, page + siblings);\n const out: (number | 'ellipsis')[] = [1];\n if (start > 2) out.push('ellipsis');\n for (let p = start; p <= end; p += 1) out.push(p);\n if (end < pageCount - 1) out.push('ellipsis');\n out.push(pageCount);\n return out;\n}\n\n/* ------------------------------------------------------------------------ */\n/* Paging arithmetic: no React, for any list, table or server query. */\n/* ------------------------------------------------------------------------ */\n\n/** The page sizes offered by default: 25, 50 or 100 rows. */\nexport const DEFAULT_PAGE_SIZES: readonly number[] = [25, 50, 100];\n\nexport interface PageWindow {\n /** 1-based, clamped to the pages that exist (1 when there are no rows). */\n page: number;\n /** At least 1, so \"Page 1 of 1\" reads sensibly for an empty list. */\n pageCount: number;\n pageSize: number;\n total: number;\n /** 1-based index of the first row on this page; 0 when there are none. */\n from: number;\n /** 1-based index of the last row on this page; 0 when there are none. */\n to: number;\n}\n\n/** Pages needed for `total` rows, never less than 1. */\nexport function pageCountFor(total: number, pageSize: number): number {\n if (!Number.isFinite(total) || total <= 0) return 1;\n const size = Number.isFinite(pageSize) ? Math.max(1, Math.floor(pageSize)) : 1;\n return Math.max(1, Math.ceil(total / size));\n}\n\n/** A requested page clamped to 1…pageCount. Anything unreadable (\"abc\", NaN) is page 1. */\nexport function clampPage(page: unknown, pageCount: number): number {\n const n = typeof page === 'number' ? page : Number(page);\n if (!Number.isFinite(n)) return 1;\n return Math.min(Math.max(1, Math.floor(n)), Math.max(1, Math.floor(pageCount) || 1));\n}\n\n/** Where page `page` of `total` rows starts and ends, for server-side paging. */\nexport function pageWindow({\n page,\n pageSize,\n total,\n}: {\n page: unknown;\n pageSize: number;\n total: number;\n}): PageWindow {\n const size = Number.isFinite(pageSize) ? Math.max(1, Math.floor(pageSize)) : 1;\n const safeTotal = Number.isFinite(total) ? Math.max(0, Math.floor(total)) : 0;\n const pageCount = pageCountFor(safeTotal, size);\n const p = clampPage(page, pageCount);\n const start = (p - 1) * size;\n const to = Math.min(start + size, safeTotal);\n return {\n page: p,\n pageCount,\n pageSize: size,\n total: safeTotal,\n from: safeTotal ? start + 1 : 0,\n to: safeTotal ? to : 0,\n };\n}\n\n/** One page of `rows`, with the numbers for the page controls. */\nexport function paginate<T>(\n rows: readonly T[],\n page: unknown,\n pageSize: number,\n): PageWindow & { rows: T[] } {\n const w = pageWindow({ page, pageSize, total: rows.length });\n return { ...w, rows: rows.slice(w.from ? w.from - 1 : 0, w.to) };\n}\n\n/**\n * \"1–25 of 312\", \"7 of 7\" when everything fits, \"0 of 0\" when empty. Numbers\n * use the locale's grouping (\"1,025\"); pass `locale` to pin it.\n */\nexport function paginationSummary(\n { from, to, total }: Pick<PageWindow, 'from' | 'to' | 'total'>,\n locale?: string,\n): string {\n const fmt = new Intl.NumberFormat(locale);\n if (!total) return '0 of 0';\n if (from === 1 && to === total) return `${fmt.format(total)} of ${fmt.format(total)}`;\n return `${fmt.format(from)}–${fmt.format(to)} of ${fmt.format(total)}`;\n}\n\nconst storedSizeKey = (key: string) => `bl-page-size:${key}`;\n\nfunction readStoredSize(key: string | undefined, options: readonly number[]): number | undefined {\n if (!key) return undefined;\n try {\n const n = Number(globalThis.localStorage?.getItem(storedSizeKey(key)));\n return options.includes(n) ? n : undefined;\n } catch {\n return undefined;\n }\n}\n\nfunction writeStoredSize(key: string | undefined, size: number) {\n if (!key) return;\n try {\n globalThis.localStorage?.setItem(storedSizeKey(key), String(size));\n } catch {\n // Storage blocked (private mode, a sandboxed frame): the size is not remembered.\n }\n}\n\nexport interface UsePaginationOptions {\n /** Controlled page (e.g. read from the URL). Leave out to let the hook keep it. */\n page?: number;\n /** Starting page when uncontrolled. */\n defaultPage?: number;\n onPageChange?: (page: number) => void;\n /** Controlled page size. */\n pageSize?: number;\n /** Starting page size when uncontrolled; the first option by default. */\n defaultPageSize?: number;\n onPageSizeChange?: (pageSize: number) => void;\n /** Sizes offered by the page-size menu. */\n pageSizeOptions?: readonly number[];\n /**\n * Whatever decides which rows are listed (search text, a filter, a tab).\n * When it changes, paging goes back to page 1. The first render never\n * resets, so a link to page 3 stays on page 3.\n */\n resetKey?: unknown;\n /** Remembers the chosen page size in localStorage under this key. */\n storageKey?: string;\n /**\n * The full row count when the server pages: `rows` is then already the\n * current page and is not sliced.\n */\n total?: number;\n /** Locale for the summary's numbers. */\n locale?: string;\n}\n\nexport interface UsePaginationResult<T> extends PageWindow {\n /** The rows to render on this page. */\n rows: T[];\n pageSizeOptions: readonly number[];\n /** \"1–25 of 312\". */\n summary: string;\n /** More rows than the smallest page size: worth showing controls for. */\n hasPages: boolean;\n setPage: (page: number) => void;\n /** Changes the size and goes back to page 1. */\n setPageSize: (pageSize: number) => void;\n /** Spread onto Pagination (or pass to DataTable's paging props). */\n paginationProps: Pick<\n PaginationProps,\n 'page' | 'pageCount' | 'onPageChange' | 'pageSize' | 'pageSizeOptions' | 'onPageSizeChange'\n > & { summary: string };\n}\n\n/**\n * Headless paging for a list or table: slices `rows`, clamps the page,\n * returns to page 1 when `resetKey` changes, and optionally remembers the\n * page size. Controlled `page` / `pageSize` let an app keep them in the URL.\n */\nexport function usePagination<T>(\n rows: readonly T[],\n options: UsePaginationOptions = {},\n): UsePaginationResult<T> {\n const {\n page: pageProp,\n defaultPage = 1,\n onPageChange,\n pageSize: pageSizeProp,\n defaultPageSize,\n onPageSizeChange,\n pageSizeOptions = DEFAULT_PAGE_SIZES,\n resetKey,\n storageKey,\n total: serverTotal,\n locale,\n } = options;\n\n const [pageState, setPageState] = React.useState(defaultPage);\n const [sizeState, setSizeState] = React.useState<number>(\n () =>\n readStoredSize(storageKey, pageSizeOptions) ?? defaultPageSize ?? pageSizeOptions[0] ?? 25,\n );\n const page = pageProp ?? pageState;\n const pageSize = pageSizeProp ?? sizeState;\n\n // Keep the latest callbacks without making the setters change every render.\n const latest = React.useRef({ onPageChange, onPageSizeChange, pageProp, storageKey });\n React.useEffect(() => {\n latest.current = { onPageChange, onPageSizeChange, pageProp, storageKey };\n });\n\n const setPage = React.useCallback((next: number) => {\n setPageState(next);\n latest.current.onPageChange?.(next);\n }, []);\n const setPageSize = React.useCallback((next: number) => {\n writeStoredSize(latest.current.storageKey, next);\n setSizeState(next);\n setPageState(1);\n latest.current.onPageSizeChange?.(next);\n latest.current.onPageChange?.(1);\n }, []);\n\n // A new filter starts again at page 1: during render for local state (no\n // flash of an empty page), and after it for a controlled page.\n const [lastKey, setLastKey] = React.useState(resetKey);\n if (!Object.is(lastKey, resetKey)) {\n setLastKey(resetKey);\n setPageState(1);\n }\n const committedKey = React.useRef(resetKey);\n React.useEffect(() => {\n if (Object.is(committedKey.current, resetKey)) return;\n committedKey.current = resetKey;\n const { pageProp: controlled, onPageChange: report } = latest.current;\n if (controlled !== undefined && controlled !== 1) report?.(1);\n }, [resetKey]);\n\n const w =\n serverTotal === undefined\n ? paginate(rows, page, pageSize)\n : { ...pageWindow({ page, pageSize, total: serverTotal }), rows: [...rows] };\n const summary = paginationSummary(w, locale);\n const hasPages = w.total > Math.min(...pageSizeOptions, w.pageSize);\n\n return {\n ...w,\n pageSizeOptions,\n summary,\n hasPages,\n setPage,\n setPageSize,\n paginationProps: {\n page: w.page,\n pageCount: w.pageCount,\n onPageChange: setPage,\n pageSize: w.pageSize,\n pageSizeOptions,\n onPageSizeChange: setPageSize,\n summary,\n },\n };\n}\n\n/* ------------------------------------------------------------------------ */\n/* The controls. */\n/* ------------------------------------------------------------------------ */\n\nexport interface PaginationProps extends Omit<React.ComponentProps<'nav'>, 'onChange'> {\n /** 1-based current page. */\n page: number;\n pageCount: number;\n onPageChange: (page: number) => void;\n siblings?: number;\n /** Summary on the left, e.g. \"1–25 of 312\". Worked out from `total` when left out. */\n summary?: React.ReactNode;\n /** Total rows: with `pageSize`, gives the default summary. */\n total?: number;\n /** Rows per page, shown in the page-size menu. */\n pageSize?: number;\n /** Sizes in the page-size menu (25, 50, 100 by default). */\n pageSizeOptions?: readonly number[];\n /** Adds a rows-per-page menu. */\n onPageSizeChange?: (pageSize: number) => void;\n /** The page-size menu's accessible name. */\n pageSizeLabel?: string;\n /** An option's text, e.g. \"25 per page\". */\n formatPageSize?: (size: number) => string;\n}\n\n/**\n * Page controls for a table or list: a summary, the pages, and optionally a\n * rows-per-page menu. Below 640px it becomes \"Page 2 of 13\" between large\n * previous and next buttons. Buttons are real buttons, keyboard-reachable,\n * and 44px on touch screens.\n */\nfunction Pagination({\n page: requestedPage,\n pageCount: requestedCount,\n onPageChange,\n siblings = 1,\n summary,\n total,\n pageSize,\n pageSizeOptions = DEFAULT_PAGE_SIZES,\n onPageSizeChange,\n pageSizeLabel = 'Rows per page',\n formatPageSize = (size) => `${size} per page`,\n className,\n ...props\n}: PaginationProps) {\n const pageCount = Number.isFinite(requestedCount) ? Math.max(0, Math.floor(requestedCount)) : 0;\n const page =\n pageCount === 0\n ? 0\n : Number.isFinite(requestedPage)\n ? Math.max(1, Math.min(pageCount, Math.floor(requestedPage)))\n : 1;\n const pages = paginationRange(page, pageCount, siblings);\n const go = (p: number) => onPageChange(Math.min(Math.max(1, p), Math.max(1, pageCount)));\n const shownSummary =\n summary ??\n (total !== undefined && pageSize\n ? paginationSummary(pageWindow({ page: page || 1, pageSize, total }))\n : null);\n const sizes =\n pageSize !== undefined && !pageSizeOptions.includes(pageSize)\n ? [...pageSizeOptions, pageSize].sort((a, b) => a - b)\n : pageSizeOptions;\n const position = `Page ${page} of ${pageCount}`;\n return (\n <nav\n aria-label=\"Pagination\"\n data-slot=\"pagination\"\n className={cn('flex flex-wrap items-center justify-between gap-x-3 gap-y-2', className)}\n {...props}\n >\n <div\n data-slot=\"pagination-summary\"\n className=\"min-w-0 text-xs text-muted-foreground tabular-nums max-sm:order-2\"\n >\n {shownSummary}\n </div>\n {/* Announced when the page changes; the visible \"Page 2 of 13\" is for phones. */}\n <span role=\"status\" className=\"sr-only\">\n {pageCount > 0 ? position : ''}\n </span>\n <ul className=\"flex items-center gap-1 max-sm:order-1 max-sm:w-full max-sm:justify-between\">\n <li>\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={() => go(page - 1)}\n disabled={page <= 1}\n aria-label=\"Previous page\"\n className=\"max-sm:size-11 max-sm:border max-sm:border-border max-sm:px-0\"\n >\n <ChevronLeft aria-hidden />\n <span className=\"hidden sm:inline\">Previous</span>\n </Button>\n </li>\n {pages.map((p, i) =>\n p === 'ellipsis' ? (\n <li key={`e${i}`} aria-hidden className=\"hidden px-1 text-muted-foreground sm:block\">\n …\n </li>\n ) : (\n <li key={p} className=\"hidden sm:block\">\n <Button\n variant={p === page ? 'outline' : 'ghost'}\n size=\"icon-sm\"\n onClick={() => go(p)}\n aria-current={p === page ? 'page' : undefined}\n aria-label={`Page ${p}`}\n className={cn('tabular-nums', p === page && 'border-brand/40 text-brand')}\n >\n {p}\n </Button>\n </li>\n ),\n )}\n <li\n aria-hidden\n data-slot=\"pagination-position\"\n className=\"px-2 text-sm font-medium tabular-nums sm:hidden\"\n >\n {position}\n </li>\n <li>\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={() => go(page + 1)}\n disabled={page >= pageCount}\n aria-label=\"Next page\"\n className=\"max-sm:size-11 max-sm:border max-sm:border-border max-sm:px-0\"\n >\n <span className=\"hidden sm:inline\">Next</span>\n <ChevronRight aria-hidden />\n </Button>\n </li>\n </ul>\n {onPageSizeChange && (\n <Select\n value={pageSize !== undefined ? String(pageSize) : undefined}\n onValueChange={(v) => onPageSizeChange(Number(v))}\n >\n <SelectTrigger\n size=\"sm\"\n aria-label={pageSizeLabel}\n className=\"w-auto gap-1.5 text-xs tabular-nums max-sm:order-3 pointer-coarse:h-11\"\n >\n <SelectValue />\n </SelectTrigger>\n <SelectContent align=\"end\">\n {sizes.map((s) => (\n <SelectItem key={s} value={String(s)}>\n {formatPageSize(s)}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n )}\n </nav>\n );\n}\n\nexport { Pagination };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"pagination.js","names":[],"sources":["../../src/components/pagination.tsx"],"sourcesContent":["import ChevronLeft from '@burtson-labs/icons/react/chevron-left';\nimport ChevronRight from '@burtson-labs/icons/react/chevron-right';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Button } from './button';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';\n\n/**\n * The page numbers to show: always the first and last page, `siblings` pages\n * either side of the current one, and 'ellipsis' for the gaps.\n */\nexport function paginationRange(\n page: number,\n pageCount: number,\n siblings = 1,\n): (number | 'ellipsis')[] {\n pageCount = Number.isFinite(pageCount) ? Math.max(0, Math.floor(pageCount)) : 0;\n siblings = Number.isFinite(siblings) ? Math.min(5, Math.max(0, Math.floor(siblings))) : 1;\n page = Number.isFinite(page) ? Math.max(1, Math.min(pageCount, Math.floor(page))) : 1;\n if (pageCount <= 0) return [];\n const window = siblings * 2 + 5; // first, last, current, siblings, two gaps\n if (pageCount <= window) return Array.from({ length: pageCount }, (_, i) => i + 1);\n const start = Math.max(2, page - siblings);\n const end = Math.min(pageCount - 1, page + siblings);\n const out: (number | 'ellipsis')[] = [1];\n if (start > 2) out.push('ellipsis');\n for (let p = start; p <= end; p += 1) out.push(p);\n if (end < pageCount - 1) out.push('ellipsis');\n out.push(pageCount);\n return out;\n}\n\n/* ------------------------------------------------------------------------ */\n/* Paging arithmetic: no React, for any list, table or server query. */\n/* ------------------------------------------------------------------------ */\n\n/** The page sizes offered by default: 25, 50 or 100 rows. */\nexport const DEFAULT_PAGE_SIZES: readonly number[] = [25, 50, 100];\n\nexport interface PageWindow {\n /** 1-based, clamped to the pages that exist (1 when there are no rows). */\n page: number;\n /** At least 1, so \"Page 1 of 1\" reads sensibly for an empty list. */\n pageCount: number;\n pageSize: number;\n total: number;\n /** 1-based index of the first row on this page; 0 when there are none. */\n from: number;\n /** 1-based index of the last row on this page; 0 when there are none. */\n to: number;\n}\n\n/** Pages needed for `total` rows, never less than 1. */\nexport function pageCountFor(total: number, pageSize: number): number {\n if (!Number.isFinite(total) || total <= 0) return 1;\n const size = Number.isFinite(pageSize) ? Math.max(1, Math.floor(pageSize)) : 1;\n return Math.max(1, Math.ceil(total / size));\n}\n\n/** A requested page clamped to 1…pageCount. Anything unreadable (\"abc\", NaN) is page 1. */\nexport function clampPage(page: unknown, pageCount: number): number {\n const n = typeof page === 'number' ? page : Number(page);\n if (!Number.isFinite(n)) return 1;\n return Math.min(Math.max(1, Math.floor(n)), Math.max(1, Math.floor(pageCount) || 1));\n}\n\n/** Where page `page` of `total` rows starts and ends, for server-side paging. */\nexport function pageWindow({\n page,\n pageSize,\n total,\n}: {\n page: unknown;\n pageSize: number;\n total: number;\n}): PageWindow {\n const size = Number.isFinite(pageSize) ? Math.max(1, Math.floor(pageSize)) : 1;\n const safeTotal = Number.isFinite(total) ? Math.max(0, Math.floor(total)) : 0;\n const pageCount = pageCountFor(safeTotal, size);\n const p = clampPage(page, pageCount);\n const start = (p - 1) * size;\n const to = Math.min(start + size, safeTotal);\n return {\n page: p,\n pageCount,\n pageSize: size,\n total: safeTotal,\n from: safeTotal ? start + 1 : 0,\n to: safeTotal ? to : 0,\n };\n}\n\n/** One page of `rows`, with the numbers for the page controls. */\nexport function paginate<T>(\n rows: readonly T[],\n page: unknown,\n pageSize: number,\n): PageWindow & { rows: T[] } {\n const w = pageWindow({ page, pageSize, total: rows.length });\n return { ...w, rows: rows.slice(w.from ? w.from - 1 : 0, w.to) };\n}\n\n/**\n * \"1–25 of 312\", \"7 of 7\" when everything fits, \"0 of 0\" when empty. Numbers\n * use the locale's grouping (\"1,025\"); pass `locale` to pin it.\n */\nexport function paginationSummary(\n { from, to, total }: Pick<PageWindow, 'from' | 'to' | 'total'>,\n locale?: string,\n): string {\n const fmt = new Intl.NumberFormat(locale);\n if (!total) return '0 of 0';\n if (from === 1 && to === total) return `${fmt.format(total)} of ${fmt.format(total)}`;\n return `${fmt.format(from)}–${fmt.format(to)} of ${fmt.format(total)}`;\n}\n\nconst storedSizeKey = (key: string) => `bl-page-size:${key}`;\n\nfunction readStoredSize(key: string | undefined, options: readonly number[]): number | undefined {\n if (!key) return undefined;\n try {\n const n = Number(globalThis.localStorage?.getItem(storedSizeKey(key)));\n return options.includes(n) ? n : undefined;\n } catch {\n return undefined;\n }\n}\n\nfunction writeStoredSize(key: string | undefined, size: number) {\n if (!key) return;\n try {\n globalThis.localStorage?.setItem(storedSizeKey(key), String(size));\n } catch {\n // Storage blocked (private mode, a sandboxed frame): the size is not remembered.\n }\n}\n\nexport interface UsePaginationOptions {\n /** Controlled page (e.g. read from the URL). Leave out to let the hook keep it. */\n page?: number;\n /** Starting page when uncontrolled. */\n defaultPage?: number;\n onPageChange?: (page: number) => void;\n /** Controlled page size. */\n pageSize?: number;\n /** Starting page size when uncontrolled; the first option by default. */\n defaultPageSize?: number;\n onPageSizeChange?: (pageSize: number) => void;\n /** Sizes offered by the page-size menu. */\n pageSizeOptions?: readonly number[];\n /**\n * Whatever decides which rows are listed (search text, a filter, a tab).\n * When it changes, paging goes back to page 1. The first render never\n * resets, so a link to page 3 stays on page 3.\n */\n resetKey?: unknown;\n /** Remembers the chosen page size in localStorage under this key. */\n storageKey?: string;\n /**\n * The full row count when the server pages: `rows` is then already the\n * current page and is not sliced.\n */\n total?: number;\n /** Locale for the summary's numbers. */\n locale?: string;\n}\n\nexport interface UsePaginationResult<T> extends PageWindow {\n /** The rows to render on this page. */\n rows: T[];\n pageSizeOptions: readonly number[];\n /** \"1–25 of 312\". */\n summary: string;\n /** More rows than the smallest page size: worth showing controls for. */\n hasPages: boolean;\n setPage: (page: number) => void;\n /** Changes the size and goes back to page 1. */\n setPageSize: (pageSize: number) => void;\n /** Spread onto Pagination (or pass to DataTable's paging props). */\n paginationProps: Pick<\n PaginationProps,\n 'page' | 'pageCount' | 'onPageChange' | 'pageSize' | 'pageSizeOptions' | 'onPageSizeChange'\n > & { summary: string };\n}\n\n/**\n * Headless paging for a list or table: slices `rows`, clamps the page,\n * returns to page 1 when `resetKey` changes, and optionally remembers the\n * page size. Controlled `page` / `pageSize` let an app keep them in the URL.\n */\nexport function usePagination<T>(\n rows: readonly T[],\n options: UsePaginationOptions = {},\n): UsePaginationResult<T> {\n const {\n page: pageProp,\n defaultPage = 1,\n onPageChange,\n pageSize: pageSizeProp,\n defaultPageSize,\n onPageSizeChange,\n pageSizeOptions = DEFAULT_PAGE_SIZES,\n resetKey,\n storageKey,\n total: serverTotal,\n locale,\n } = options;\n\n const [pageState, setPageState] = React.useState(defaultPage);\n const [sizeState, setSizeState] = React.useState<number>(\n () =>\n readStoredSize(storageKey, pageSizeOptions) ?? defaultPageSize ?? pageSizeOptions[0] ?? 25,\n );\n const page = pageProp ?? pageState;\n const pageSize = pageSizeProp ?? sizeState;\n\n // Keep the latest callbacks without making the setters change every render.\n const latest = React.useRef({ onPageChange, onPageSizeChange, pageProp, storageKey });\n React.useEffect(() => {\n latest.current = { onPageChange, onPageSizeChange, pageProp, storageKey };\n });\n\n const setPage = React.useCallback((next: number) => {\n setPageState(next);\n latest.current.onPageChange?.(next);\n }, []);\n const setPageSize = React.useCallback((next: number) => {\n writeStoredSize(latest.current.storageKey, next);\n setSizeState(next);\n setPageState(1);\n latest.current.onPageSizeChange?.(next);\n latest.current.onPageChange?.(1);\n }, []);\n\n // A new filter starts again at page 1: during render for local state (no\n // flash of an empty page), and after it for a controlled page.\n const [lastKey, setLastKey] = React.useState(resetKey);\n if (!Object.is(lastKey, resetKey)) {\n setLastKey(resetKey);\n setPageState(1);\n }\n const committedKey = React.useRef(resetKey);\n React.useEffect(() => {\n if (Object.is(committedKey.current, resetKey)) return;\n committedKey.current = resetKey;\n const { pageProp: controlled, onPageChange: report } = latest.current;\n if (controlled !== undefined && controlled !== 1) report?.(1);\n }, [resetKey]);\n\n const w =\n serverTotal === undefined\n ? paginate(rows, page, pageSize)\n : { ...pageWindow({ page, pageSize, total: serverTotal }), rows: [...rows] };\n const summary = paginationSummary(w, locale);\n // pageSize first: Math.min() of an empty options list is Infinity.\n const hasPages = w.total > Math.min(w.pageSize, ...pageSizeOptions);\n\n return {\n ...w,\n pageSizeOptions,\n summary,\n hasPages,\n setPage,\n setPageSize,\n paginationProps: {\n page: w.page,\n pageCount: w.pageCount,\n onPageChange: setPage,\n pageSize: w.pageSize,\n pageSizeOptions,\n onPageSizeChange: setPageSize,\n summary,\n },\n };\n}\n\n/* ------------------------------------------------------------------------ */\n/* The controls. */\n/* ------------------------------------------------------------------------ */\n\nexport interface PaginationProps extends Omit<React.ComponentProps<'nav'>, 'onChange'> {\n /** 1-based current page. */\n page: number;\n pageCount: number;\n onPageChange: (page: number) => void;\n siblings?: number;\n /** Summary on the left, e.g. \"1–25 of 312\". Worked out from `total` when left out. */\n summary?: React.ReactNode;\n /** Total rows: with `pageSize`, gives the default summary. */\n total?: number;\n /** Rows per page, shown in the page-size menu. */\n pageSize?: number;\n /** Sizes in the page-size menu (25, 50, 100 by default). */\n pageSizeOptions?: readonly number[];\n /** Adds a rows-per-page menu. */\n onPageSizeChange?: (pageSize: number) => void;\n /** The page-size menu's accessible name. */\n pageSizeLabel?: string;\n /** An option's text, e.g. \"25 per page\". */\n formatPageSize?: (size: number) => string;\n}\n\n/**\n * Page controls for a table or list: a summary, the pages, and optionally a\n * rows-per-page menu. Below 640px it becomes \"Page 2 of 13\" between large\n * previous and next buttons. Buttons are real buttons, keyboard-reachable,\n * and 44px on touch screens.\n */\nfunction Pagination({\n page: requestedPage,\n pageCount: requestedCount,\n onPageChange,\n siblings = 1,\n summary,\n total,\n pageSize,\n pageSizeOptions = DEFAULT_PAGE_SIZES,\n onPageSizeChange,\n pageSizeLabel = 'Rows per page',\n formatPageSize = (size) => `${size} per page`,\n className,\n ...props\n}: PaginationProps) {\n const pageCount = Number.isFinite(requestedCount) ? Math.max(0, Math.floor(requestedCount)) : 0;\n const page =\n pageCount === 0\n ? 0\n : Number.isFinite(requestedPage)\n ? Math.max(1, Math.min(pageCount, Math.floor(requestedPage)))\n : 1;\n const pages = paginationRange(page, pageCount, siblings);\n const go = (p: number) => onPageChange(Math.min(Math.max(1, p), Math.max(1, pageCount)));\n const shownSummary =\n summary ??\n (total !== undefined && pageSize\n ? paginationSummary(pageWindow({ page: page || 1, pageSize, total }))\n : null);\n const sizes =\n pageSize !== undefined && !pageSizeOptions.includes(pageSize)\n ? [...pageSizeOptions, pageSize].sort((a, b) => a - b)\n : pageSizeOptions;\n const position = `Page ${page} of ${pageCount}`;\n return (\n <nav\n aria-label=\"Pagination\"\n data-slot=\"pagination\"\n className={cn('flex flex-wrap items-center justify-between gap-x-3 gap-y-2', className)}\n {...props}\n >\n <div\n data-slot=\"pagination-summary\"\n className=\"min-w-0 text-xs text-muted-foreground tabular-nums max-sm:order-2\"\n >\n {shownSummary}\n </div>\n {/* Announced when the page changes; the visible \"Page 2 of 13\" is for phones. */}\n <span role=\"status\" className=\"sr-only\">\n {pageCount > 0 ? position : ''}\n </span>\n <ul className=\"flex items-center gap-1 max-sm:order-1 max-sm:w-full max-sm:justify-between\">\n <li>\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={() => go(page - 1)}\n disabled={page <= 1}\n aria-label=\"Previous page\"\n className=\"max-sm:size-11 max-sm:border max-sm:border-border max-sm:px-0\"\n >\n <ChevronLeft aria-hidden />\n <span className=\"hidden sm:inline\">Previous</span>\n </Button>\n </li>\n {pages.map((p, i) =>\n p === 'ellipsis' ? (\n <li key={`e${i}`} aria-hidden className=\"hidden px-1 text-muted-foreground sm:block\">\n …\n </li>\n ) : (\n <li key={p} className=\"hidden sm:block\">\n <Button\n variant={p === page ? 'outline' : 'ghost'}\n size=\"icon-sm\"\n onClick={() => go(p)}\n aria-current={p === page ? 'page' : undefined}\n aria-label={`Page ${p}`}\n className={cn('tabular-nums', p === page && 'border-brand/40 text-brand')}\n >\n {p}\n </Button>\n </li>\n ),\n )}\n <li\n aria-hidden\n data-slot=\"pagination-position\"\n className=\"px-2 text-sm font-medium tabular-nums sm:hidden\"\n >\n {pageCount > 0 ? position : ''}\n </li>\n <li>\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={() => go(page + 1)}\n disabled={page >= pageCount}\n aria-label=\"Next page\"\n className=\"max-sm:size-11 max-sm:border max-sm:border-border max-sm:px-0\"\n >\n <span className=\"hidden sm:inline\">Next</span>\n <ChevronRight aria-hidden />\n </Button>\n </li>\n </ul>\n {onPageSizeChange && (\n <Select\n value={pageSize !== undefined ? String(pageSize) : undefined}\n onValueChange={(v) => onPageSizeChange(Number(v))}\n >\n <SelectTrigger\n size=\"sm\"\n aria-label={pageSizeLabel}\n className=\"w-auto gap-1.5 text-xs tabular-nums max-sm:order-3 pointer-coarse:h-11\"\n >\n <SelectValue />\n </SelectTrigger>\n <SelectContent align=\"end\">\n {sizes.map((s) => (\n <SelectItem key={s} value={String(s)}>\n {formatPageSize(s)}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n )}\n </nav>\n );\n}\n\nexport { Pagination };\n"],"mappings":"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"}
|
|
@@ -26,11 +26,15 @@ function SelectValue(props) {
|
|
|
26
26
|
...props
|
|
27
27
|
});
|
|
28
28
|
}
|
|
29
|
+
var triggerHeight = {
|
|
30
|
+
default: "h-9",
|
|
31
|
+
sm: "h-8"
|
|
32
|
+
};
|
|
29
33
|
function SelectTrigger({ className, size = "default", children, ...props }) {
|
|
30
34
|
return /* @__PURE__ */ jsxs(Select.Trigger, {
|
|
31
35
|
"data-slot": "select-trigger",
|
|
32
36
|
"data-size": size,
|
|
33
|
-
className: cn(fieldClasses, "flex w-fit items-center justify-between gap-2 py-2 whitespace-nowrap data-[placeholder]:text-muted-foreground
|
|
37
|
+
className: cn(fieldClasses, "flex w-fit items-center justify-between gap-2 py-2 whitespace-nowrap data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", triggerHeight[size], className),
|
|
34
38
|
...props,
|
|
35
39
|
children: [children, /* @__PURE__ */ jsx(Select.Icon, {
|
|
36
40
|
asChild: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","names":["Select","SelectPrimitive"],"sources":["../../src/components/select.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport ChevronDown from '@burtson-labs/icons/react/chevron-down';\nimport ChevronUp from '@burtson-labs/icons/react/chevron-up';\nimport { Select as SelectPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { fieldClasses } from './input';\nimport { surfaceClasses } from './popover';\n\nfunction Select(props: React.ComponentProps<typeof SelectPrimitive.Root>) {\n return <SelectPrimitive.Root data-slot=\"select\" {...props} />;\n}\n\nfunction SelectGroup(props: React.ComponentProps<typeof SelectPrimitive.Group>) {\n return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nfunction SelectValue(props: React.ComponentProps<typeof SelectPrimitive.Value>) {\n return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />;\n}\n\nfunction SelectTrigger({\n className,\n size = 'default',\n children,\n ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & { size?: 'sm' | 'default' }) {\n return (\n <SelectPrimitive.Trigger\n data-slot=\"select-trigger\"\n data-size={size}\n className={cn(\n fieldClasses,\n \"flex w-fit items-center justify-between gap-2 py-2 whitespace-nowrap data-[placeholder]:text-muted-foreground
|
|
1
|
+
{"version":3,"file":"select.js","names":["Select","SelectPrimitive"],"sources":["../../src/components/select.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport ChevronDown from '@burtson-labs/icons/react/chevron-down';\nimport ChevronUp from '@burtson-labs/icons/react/chevron-up';\nimport { Select as SelectPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { fieldClasses } from './input';\nimport { surfaceClasses } from './popover';\n\nfunction Select(props: React.ComponentProps<typeof SelectPrimitive.Root>) {\n return <SelectPrimitive.Root data-slot=\"select\" {...props} />;\n}\n\nfunction SelectGroup(props: React.ComponentProps<typeof SelectPrimitive.Group>) {\n return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nfunction SelectValue(props: React.ComponentProps<typeof SelectPrimitive.Value>) {\n return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />;\n}\n\n// Plain height classes, not an attribute-selector variant on data-size: that\n// selector outranks a class, so a caller's `h-11`, `max-sm:h-11` or\n// `pointer-coarse:h-11` never won against the size. (Tailwind reads comments\n// too, so the old form is not spelled out here.)\nconst triggerHeight = { default: 'h-9', sm: 'h-8' } as const;\n\nfunction SelectTrigger({\n className,\n size = 'default',\n children,\n ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & { size?: 'sm' | 'default' }) {\n return (\n <SelectPrimitive.Trigger\n data-slot=\"select-trigger\"\n data-size={size}\n className={cn(\n fieldClasses,\n \"flex w-fit items-center justify-between gap-2 py-2 whitespace-nowrap data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n triggerHeight[size],\n className,\n )}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon asChild>\n <ChevronDown className=\"size-4 opacity-60\" aria-hidden />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n );\n}\n\nfunction SelectContent({\n className,\n children,\n position = 'popper',\n ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n return (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n data-slot=\"select-content\"\n className={cn(\n surfaceClasses,\n 'relative max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto',\n position === 'popper' &&\n 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n className,\n )}\n position={position}\n {...props}\n >\n <SelectPrimitive.ScrollUpButton className=\"flex cursor-default items-center justify-center py-1\">\n <ChevronUp className=\"size-4\" aria-hidden />\n </SelectPrimitive.ScrollUpButton>\n <SelectPrimitive.Viewport\n className={cn(\n 'p-1',\n position === 'popper' &&\n 'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1',\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectPrimitive.ScrollDownButton className=\"flex cursor-default items-center justify-center py-1\">\n <ChevronDown className=\"size-4\" aria-hidden />\n </SelectPrimitive.ScrollDownButton>\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n );\n}\n\nfunction SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {\n return (\n <SelectPrimitive.Label\n data-slot=\"select-label\"\n className={cn(\n 'px-2 pt-2 pb-1 text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SelectItem({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n return (\n <SelectPrimitive.Item\n data-slot=\"select-item\"\n className={cn(\n \"relative flex min-h-8 w-full cursor-default items-center gap-2 rounded-sm pr-8 pl-2 text-[13px] outline-hidden! select-none focus:bg-secondary focus:text-foreground data-[state=checked]:font-semibold data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n <SelectPrimitive.ItemIndicator>\n <Check className=\"size-4 text-brand\" aria-hidden />\n </SelectPrimitive.ItemIndicator>\n </span>\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n );\n}\n\nfunction SelectSeparator({\n className,\n ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n return (\n <SelectPrimitive.Separator\n data-slot=\"select-separator\"\n className={cn('pointer-events-none -mx-1 my-1 h-px bg-border', className)}\n {...props}\n />\n );\n}\n\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n};\n"],"mappings":";;;;;;;;;;AAWA,SAASA,SAAO,OAA0D;CACxE,OAAO,oBAACC,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,SAAS,YAAY,OAA2D;CAC9E,OAAO,oBAACA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,YAAY,OAA2D;CAC9E,OAAO,oBAACA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAMA,IAAM,gBAAgB;CAAE,SAAS;CAAO,IAAI;AAAM;AAElD,SAAS,cAAc,EACrB,WACA,OAAO,WACP,UACA,GAAG,SACkF;CACrF,OACE,qBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,cACA,oVACA,cAAc,OACd,SACF;EACA,GAAI;EATN,UAAA,CAWG,UACD,oBAACA,OAAgB,MAAjB;GAAsB,SAAA;GACpB,UAAA,oBAAC,aAAD;IAAa,WAAU;IAAoB,eAAA;GAAa,CAAA;EACpC,CAAA,CACC;;AAE7B;AAEA,SAAS,cAAc,EACrB,WACA,UACA,WAAW,UACX,GAAG,SACoD;CACvD,OACE,oBAACA,OAAgB,QAAjB,EAAA,UACE,qBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,gBACA,4JACA,aAAa,YACX,mIACF,SACF;EACU;EACV,GAAI;EAVN,UAAA;GAYE,oBAACA,OAAgB,gBAAjB;IAAgC,WAAU;IACxC,UAAA,oBAAC,WAAD;KAAW,WAAU;KAAS,eAAA;IAAa,CAAA;GACb,CAAA;GAChC,oBAACA,OAAgB,UAAjB;IACE,WAAW,GACT,OACA,aAAa,YACX,2FACJ;IAEC;GACuB,CAAA;GAC1B,oBAACA,OAAgB,kBAAjB;IAAkC,WAAU;IAC1C,UAAA,oBAAC,aAAD;KAAa,WAAU;KAAS,eAAA;IAAa,CAAA;GACb,CAAA;EACX;CACH,CAAA,EAAA,CAAA;AAE5B;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,8FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACiD;CACpD,OACE,qBAACA,OAAgB,MAAjB;EACE,aAAU;EACV,WAAW,GACT,4VACA,SACF;EACA,GAAI;EANN,UAAA,CAQE,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAACA,OAAgB,eAAjB,EAAA,UACE,oBAAC,OAAD;IAAO,WAAU;IAAoB,eAAA;GAAa,CAAA,EACrB,CAAA;EAC3B,CAAA,GACN,oBAACA,OAAgB,UAAjB,EAA2B,SAAmC,CAAA,CAC1C;;AAE1B;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SACsD;CACzD,OACE,oBAACA,OAAgB,WAAjB;EACE,aAAU;EACV,WAAW,GAAG,iDAAiD,SAAS;EACxE,GAAI;CACL,CAAA;AAEL"}
|
package/dist/styles.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:""}}}@layer theme{:root,:host{--font-sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-7xl:4.5rem;--text-7xl--line-height:1;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--tracking-wide:.025em;--tracking-widest:.1em;--leading-snug:1.375;--leading-relaxed:1.625;--radius-xs:.375rem;--radius-sm:.5rem;--radius-md:.625rem;--radius-lg:.75rem;--radius-xl:1rem;--shadow-xs:0 1px 2px #0a080e0d;--shadow-sm:0 1px 3px #0a080e14, 0 1px 2px #0a080e0d;--shadow-md:0 10px 30px #0a080e1a, 0 2px 8px #0a080e0f;--ease-in:cubic-bezier(.4, 0, 1, 1);--ease-out:cubic-bezier(0, 0, .2, 1);--animate-spin:spin 1s linear infinite;--animate-ping:ping 1s cubic-bezier(0, 0, .2, 1) infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--animate-bounce:bounce 1s infinite;--blur-md:12px;--blur-xl:24px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--color-background:var(--background);--color-foreground:var(--foreground);--color-muted:var(--muted);--color-border:var(--border);--color-ring:var(--ring);--color-brand:var(--brand);--shadow-focus:0 0 0 3px var(--ring)}@supports (color:color-mix(in lab, red, red)){:root,:host{--shadow-focus:0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent)}}}@layer base{:where([data-slot]):focus-visible{outline:2px solid var(--ring);outline-offset:2px}@media (forced-colors:active){:where([data-slot]):focus-visible{outline:2px solid highlight}}*{border-color:var(--color-border)}:focus-visible{outline-color:var(--color-ring)}html,body{background:var(--color-background);color:var(--color-foreground)}body{font-family:var(--font-sans)}::selection{background:var(--color-brand)}@supports (color:color-mix(in lab, red, red)){::selection{background:color-mix(in srgb, var(--color-brand) 28%, transparent)}}[data-slot],[data-slot] *,[data-slot]:before,[data-slot]:after{box-sizing:border-box;border:0 solid;border-color:var(--border)}button[data-slot],[data-slot] button{font:inherit;color:inherit;cursor:pointer;background-color:#0000;padding:0}}@layer components;@layer utilities{.\@container{container-type:inline-size}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.inset-1{inset:var(--spacing)}.inset-x-0{inset-inline:0}.inset-y-0{inset-block:0}.-top-1{top:calc(var(--spacing) * -1)}.top-0{top:0}.top-1\/2{top:50%}.top-2{top:calc(var(--spacing) * 2)}.top-3{top:calc(var(--spacing) * 3)}.top-3\.5{top:calc(var(--spacing) * 3.5)}.top-14{top:calc(var(--spacing) * 14)}.top-\[20\%\]{top:20%}.top-\[60\%\]{top:60%}.top-\[calc\(env\(safe-area-inset-top\)\+0\.75rem\)\]{top:calc(env(safe-area-inset-top) + .75rem)}.top-full{top:100%}.top-px{top:1px}.right-0{right:0}.right-1{right:var(--spacing)}.right-2{right:calc(var(--spacing) * 2)}.right-3{right:calc(var(--spacing) * 3)}.right-3\.5{right:calc(var(--spacing) * 3.5)}.bottom-0{bottom:0}.bottom-3{bottom:calc(var(--spacing) * 3)}.left-0{left:0}.left-1\/2{left:50%}.left-2{left:calc(var(--spacing) * 2)}.left-2\.5{left:calc(var(--spacing) * 2.5)}.left-3{left:calc(var(--spacing) * 3)}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.z-\[1\]{z-index:1}.z-\[100\]{z-index:100}.col-span-2{grid-column:span 2/span 2}.col-span-full{grid-column:1/-1}.col-start-1{grid-column-start:1}.col-start-2{grid-column-start:2}.row-span-2{grid-row:span 2/span 2}.row-start-1{grid-row-start:1}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.-mx-1{margin-inline:calc(var(--spacing) * -1)}.-mx-1\.5{margin-inline:calc(var(--spacing) * -1.5)}.-mx-3\.5{margin-inline:calc(var(--spacing) * -3.5)}.mx-0\.5{margin-inline:calc(var(--spacing) * .5)}.mx-1{margin-inline:var(--spacing)}.mx-auto{margin-inline:auto}.-my-2\.5{margin-block:calc(var(--spacing) * -2.5)}.-my-3{margin-block:calc(var(--spacing) * -3)}.my-1{margin-block:var(--spacing)}.my-2{margin-block:calc(var(--spacing) * 2)}.my-4{margin-block:calc(var(--spacing) * 4)}.-ms-2{margin-inline-start:calc(var(--spacing) * -2)}.ms-auto{margin-inline-start:auto}.-me-1{margin-inline-end:calc(var(--spacing) * -1)}.me-1{margin-inline-end:var(--spacing)}.me-3{margin-inline-end:calc(var(--spacing) * 3)}.-mt-1{margin-top:calc(var(--spacing) * -1)}.-mt-1\.5{margin-top:calc(var(--spacing) * -1.5)}.-mt-2{margin-top:calc(var(--spacing) * -2)}.-mt-4{margin-top:calc(var(--spacing) * -4)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-7{margin-top:calc(var(--spacing) * 7)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mt-16{margin-top:calc(var(--spacing) * 16)}.mt-20{margin-top:calc(var(--spacing) * 20)}.mt-auto{margin-top:auto}.mt-px{margin-top:1px}.-mr-1\.5{margin-right:calc(var(--spacing) * -1.5)}.-mb-2{margin-bottom:calc(var(--spacing) * -2)}.-mb-3{margin-bottom:calc(var(--spacing) * -3)}.mb-0\.5{margin-bottom:calc(var(--spacing) * .5)}.mb-1{margin-bottom:var(--spacing)}.mb-1\.5{margin-bottom:calc(var(--spacing) * 1.5)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-4{margin-left:calc(var(--spacing) * 4)}.ml-auto{margin-left:auto}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.inline-grid{display:inline-grid}.table{display:table}.table-caption{display:table-caption}.table-cell{display:table-cell}.table-row{display:table-row}.field-sizing-content{field-sizing:content}.aspect-square{aspect-ratio:1}.size-1\.5{width:calc(var(--spacing) * 1.5);height:calc(var(--spacing) * 1.5)}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-3\.5{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-7{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.size-11{width:calc(var(--spacing) * 11);height:calc(var(--spacing) * 11)}.size-12{width:calc(var(--spacing) * 12);height:calc(var(--spacing) * 12)}.size-28{width:calc(var(--spacing) * 28);height:calc(var(--spacing) * 28)}.size-\[180px\]{width:180px;height:180px}.size-full{width:100%;height:100%}.h-\(--radix-navigation-menu-viewport-height\){height:var(--radix-navigation-menu-viewport-height)}.h-\(--radix-select-trigger-height\){height:var(--radix-select-trigger-height)}.h-1{height:var(--spacing)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-11{height:calc(var(--spacing) * 11)}.h-12{height:calc(var(--spacing) * 12)}.h-14{height:calc(var(--spacing) * 14)}.h-28{height:calc(var(--spacing) * 28)}.h-36{height:calc(var(--spacing) * 36)}.h-40{height:calc(var(--spacing) * 40)}.h-56{height:calc(var(--spacing) * 56)}.h-72{height:calc(var(--spacing) * 72)}.h-80{height:calc(var(--spacing) * 80)}.h-96{height:calc(var(--spacing) * 96)}.h-\[28rem\]{height:28rem}.h-\[34rem\]{height:34rem}.h-\[630px\]{height:630px}.h-\[calc\(100dvh-3\.5rem\)\]{height:calc(100dvh - 3.5rem)}.h-\[calc\(100dvh-4rem\)\]{height:calc(100dvh - 4rem)}.h-auto{height:auto}.h-full{height:100%}.h-px{height:1px}.max-h-\(--radix-context-menu-content-available-height\){max-height:var(--radix-context-menu-content-available-height)}.max-h-\(--radix-dropdown-menu-content-available-height\){max-height:var(--radix-dropdown-menu-content-available-height)}.max-h-\(--radix-menubar-content-available-height\){max-height:var(--radix-menubar-content-available-height)}.max-h-\(--radix-popover-content-available-height\){max-height:var(--radix-popover-content-available-height)}.max-h-\(--radix-select-content-available-height\){max-height:var(--radix-select-content-available-height)}.max-h-40{max-height:calc(var(--spacing) * 40)}.max-h-48{max-height:calc(var(--spacing) * 48)}.max-h-60{max-height:calc(var(--spacing) * 60)}.max-h-64{max-height:calc(var(--spacing) * 64)}.max-h-80{max-height:calc(var(--spacing) * 80)}.max-h-\[85dvh\]{max-height:85dvh}.max-h-\[calc\(100dvh-2rem\)\]{max-height:calc(100dvh - 2rem)}.max-h-dvh{max-height:100dvh}.min-h-0{min-height:0}.min-h-8{min-height:calc(var(--spacing) * 8)}.min-h-9{min-height:calc(var(--spacing) * 9)}.min-h-10{min-height:calc(var(--spacing) * 10)}.min-h-11{min-height:calc(var(--spacing) * 11)}.min-h-14{min-height:calc(var(--spacing) * 14)}.min-h-16{min-height:calc(var(--spacing) * 16)}.min-h-24{min-height:calc(var(--spacing) * 24)}.min-h-32{min-height:calc(var(--spacing) * 32)}.min-h-56{min-height:calc(var(--spacing) * 56)}.min-h-64{min-height:calc(var(--spacing) * 64)}.min-h-72{min-height:calc(var(--spacing) * 72)}.min-h-80{min-height:calc(var(--spacing) * 80)}.min-h-dvh{min-height:100dvh}.w-\(--radix-popover-trigger-width\){width:var(--radix-popover-trigger-width)}.w-1\/2{width:50%}.w-1\/3{width:33.3333%}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-3\/4{width:75%}.w-9{width:calc(var(--spacing) * 9)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-40{width:calc(var(--spacing) * 40)}.w-44{width:calc(var(--spacing) * 44)}.w-48{width:calc(var(--spacing) * 48)}.w-56{width:calc(var(--spacing) * 56)}.w-60{width:calc(var(--spacing) * 60)}.w-64{width:calc(var(--spacing) * 64)}.w-72{width:calc(var(--spacing) * 72)}.w-80{width:calc(var(--spacing) * 80)}.w-\[3px\]{width:3px}.w-\[22rem\]{width:22rem}.w-\[470px\]{width:470px}.w-\[560px\]{width:560px}.w-\[1200px\]{width:1200px}.w-\[calc\(100\%-2rem\)\]{width:calc(100% - 2rem)}.w-\[min\(20rem\,88vw\)\]{width:min(20rem,88vw)}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.w-max{width:max-content}.w-px{width:1px}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-7xl{max-width:var(--container-7xl)}.max-w-40{max-width:calc(var(--spacing) * 40)}.max-w-56{max-width:calc(var(--spacing) * 56)}.max-w-60{max-width:calc(var(--spacing) * 60)}.max-w-64{max-width:calc(var(--spacing) * 64)}.max-w-\[85\%\]{max-width:85%}.max-w-\[1600px\]{max-width:1600px}.max-w-\[calc\(100vw-2rem\)\]{max-width:calc(100vw - 2rem)}.max-w-full{max-width:100%}.max-w-lg{max-width:var(--container-lg)}.max-w-max{max-width:max-content}.max-w-md{max-width:var(--container-md)}.max-w-prose{max-width:65ch}.max-w-sm{max-width:var(--container-sm)}.max-w-xl{max-width:var(--container-xl)}.max-w-xs{max-width:var(--container-xs)}.min-w-\(--radix-select-trigger-width\){min-width:var(--radix-select-trigger-width)}.min-w-0{min-width:0}.min-w-2{min-width:calc(var(--spacing) * 2)}.min-w-4{min-width:calc(var(--spacing) * 4)}.min-w-5{min-width:calc(var(--spacing) * 5)}.min-w-11{min-width:calc(var(--spacing) * 11)}.min-w-64{min-width:calc(var(--spacing) * 64)}.min-w-\[2px\]{min-width:2px}.min-w-\[8rem\]{min-width:8rem}.flex-1{flex:1}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.basis-full{flex-basis:100%}.caption-bottom{caption-side:bottom}.origin-\(--radix-context-menu-content-transform-origin\){transform-origin:var(--radix-context-menu-content-transform-origin)}.origin-\(--radix-dropdown-menu-content-transform-origin\){transform-origin:var(--radix-dropdown-menu-content-transform-origin)}.origin-\(--radix-menubar-content-transform-origin\){transform-origin:var(--radix-menubar-content-transform-origin)}.origin-\(--radix-popover-content-transform-origin\){transform-origin:var(--radix-popover-content-transform-origin)}.origin-\(--radix-select-content-transform-origin\){transform-origin:var(--radix-select-content-transform-origin)}.origin-\(--radix-tooltip-content-transform-origin\){transform-origin:var(--radix-tooltip-content-transform-origin)}.origin-top{transform-origin:top}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-0{--tw-translate-y:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-0\.5{--tw-translate-y:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-3{--tw-translate-y:calc(var(--spacing) * 3);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-\[-0\.1em\]{--tw-translate-y:-.1em;translate:var(--tw-translate-x) var(--tw-translate-y)}.rotate-45{rotate:45deg}.rotate-90{rotate:90deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-bounce{animation:var(--animate-bounce)}.animate-in{animation:.2s cubic-bezier(.16,1,.3,1) bl-in}.animate-ping{animation:var(--animate-ping)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize{resize:both}.resize-none{resize:none}.resize-y{resize:vertical}.scroll-my-1{scroll-margin-block:var(--spacing)}.scroll-mt-20{scroll-margin-top:calc(var(--spacing) * 20)}.scroll-py-1{scroll-padding-block:var(--spacing)}.\[scrollbar-width\:thin\]{scrollbar-width:thin}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.appearance-none{appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-\[1fr_2fr_1fr\]{grid-template-columns:1fr 2fr 1fr}.grid-cols-\[1fr_auto\]{grid-template-columns:1fr auto}.grid-cols-\[180px_1fr\]{grid-template-columns:180px 1fr}.grid-cols-\[minmax\(0\,1fr\)\]{grid-template-columns:minmax(0,1fr)}.grid-rows-\[1fr_auto\]{grid-template-rows:1fr auto}.grid-rows-\[auto_1fr\]{grid-template-rows:auto 1fr}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-wrap{flex-wrap:wrap}.place-content-center{place-content:center}.place-items-center{place-items:center}.content-center{align-content:center}.content-start{align-content:flex-start}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.justify-items-center{justify-items:center}.justify-items-end{justify-items:end}.justify-items-start{justify-items:start}.gap-0{gap:0}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-10{gap:calc(var(--spacing) * 10)}.gap-\[2px\]{gap:2px}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-3{column-gap:calc(var(--spacing) * 3)}.gap-x-4{column-gap:calc(var(--spacing) * 4)}.gap-x-6{column-gap:calc(var(--spacing) * 6)}.gap-y-0\.5{row-gap:calc(var(--spacing) * .5)}.gap-y-1{row-gap:var(--spacing)}.gap-y-2{row-gap:calc(var(--spacing) * 2)}.gap-y-2\.5{row-gap:calc(var(--spacing) * 2.5)}.self-center{align-self:center}.self-start{align-self:flex-start}.justify-self-end{justify-self:flex-end}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.overscroll-contain{overscroll-behavior:contain}.rounded{border-radius:.25rem}.rounded-\[inherit\]{border-radius:inherit}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:.75rem}.rounded-md{border-radius:.625rem}.rounded-none{border-radius:0}.rounded-sm{border-radius:.5rem}.rounded-xl{border-radius:1rem}.rounded-xs{border-radius:.375rem}.rounded-t-xl{border-top-left-radius:1rem;border-top-right-radius:1rem}.rounded-tl-sm{border-top-left-radius:.5rem}.rounded-tr-xs{border-top-right-radius:.375rem}.rounded-b-xl{border-bottom-right-radius:1rem;border-bottom-left-radius:1rem}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-e{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-l-2{border-left-style:var(--tw-border-style);border-left-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-border{border-color:var(--border)}.border-border-strong{border-color:var(--border-strong)}.border-border\/70{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.border-border\/70{border-color:color-mix(in oklab, var(--border) 70%, transparent)}}.border-brand,.border-brand\/15{border-color:var(--brand)}@supports (color:color-mix(in lab, red, red)){.border-brand\/15{border-color:color-mix(in oklab, var(--brand) 15%, transparent)}}.border-brand\/20{border-color:var(--brand)}@supports (color:color-mix(in lab, red, red)){.border-brand\/20{border-color:color-mix(in oklab, var(--brand) 20%, transparent)}}.border-brand\/25{border-color:var(--brand)}@supports (color:color-mix(in lab, red, red)){.border-brand\/25{border-color:color-mix(in oklab, var(--brand) 25%, transparent)}}.border-brand\/40{border-color:var(--brand)}@supports (color:color-mix(in lab, red, red)){.border-brand\/40{border-color:color-mix(in oklab, var(--brand) 40%, transparent)}}.border-brand\/50{border-color:var(--brand)}@supports (color:color-mix(in lab, red, red)){.border-brand\/50{border-color:color-mix(in oklab, var(--brand) 50%, transparent)}}.border-current{border-color:currentColor}.border-destructive,.border-destructive\/20{border-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.border-destructive\/20{border-color:color-mix(in oklab, var(--destructive) 20%, transparent)}}.border-destructive\/25{border-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.border-destructive\/25{border-color:color-mix(in oklab, var(--destructive) 25%, transparent)}}.border-destructive\/30{border-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.border-destructive\/30{border-color:color-mix(in oklab, var(--destructive) 30%, transparent)}}.border-destructive\/40{border-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.border-destructive\/40{border-color:color-mix(in oklab, var(--destructive) 40%, transparent)}}.border-info\/20{border-color:var(--info)}@supports (color:color-mix(in lab, red, red)){.border-info\/20{border-color:color-mix(in oklab, var(--info) 20%, transparent)}}.border-info\/25{border-color:var(--info)}@supports (color:color-mix(in lab, red, red)){.border-info\/25{border-color:color-mix(in oklab, var(--info) 25%, transparent)}}.border-input{border-color:var(--input)}.border-primary{border-color:var(--primary)}.border-recording\/30{border-color:var(--recording)}@supports (color:color-mix(in lab, red, red)){.border-recording\/30{border-color:color-mix(in oklab, var(--recording) 30%, transparent)}}.border-ring{border-color:var(--ring)}.border-success\/20{border-color:var(--success)}@supports (color:color-mix(in lab, red, red)){.border-success\/20{border-color:color-mix(in oklab, var(--success) 20%, transparent)}}.border-success\/25{border-color:var(--success)}@supports (color:color-mix(in lab, red, red)){.border-success\/25{border-color:color-mix(in oklab, var(--success) 25%, transparent)}}.border-success\/30{border-color:var(--success)}@supports (color:color-mix(in lab, red, red)){.border-success\/30{border-color:color-mix(in oklab, var(--success) 30%, transparent)}}.border-transparent{border-color:#0000}.border-warning\/20{border-color:var(--warning)}@supports (color:color-mix(in lab, red, red)){.border-warning\/20{border-color:color-mix(in oklab, var(--warning) 20%, transparent)}}.border-warning\/25{border-color:var(--warning)}@supports (color:color-mix(in lab, red, red)){.border-warning\/25{border-color:color-mix(in oklab, var(--warning) 25%, transparent)}}.border-warning\/40{border-color:var(--warning)}@supports (color:color-mix(in lab, red, red)){.border-warning\/40{border-color:color-mix(in oklab, var(--warning) 40%, transparent)}}.border-white\/10{border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.border-white\/10{border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.border-t-transparent{border-top-color:#0000}.border-r-transparent{border-right-color:#0000}.border-l-transparent{border-left-color:#0000}.bg-accent{background-color:var(--accent)}.bg-background,.bg-background\/80{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/80{background-color:color-mix(in oklab, var(--background) 80%, transparent)}}.bg-background\/90{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/90{background-color:color-mix(in oklab, var(--background) 90%, transparent)}}.bg-black\/55{background-color:#0000008c}@supports (color:color-mix(in lab, red, red)){.bg-black\/55{background-color:color-mix(in oklab, var(--color-black) 55%, transparent)}}.bg-border{background-color:var(--border)}.bg-border-strong{background-color:var(--border-strong)}.bg-brand{background-color:var(--brand)}.bg-brand-soft,.bg-brand-soft\/70{background-color:var(--brand-soft)}@supports (color:color-mix(in lab, red, red)){.bg-brand-soft\/70{background-color:color-mix(in oklab, var(--brand-soft) 70%, transparent)}}.bg-brand-soft\/80{background-color:var(--brand-soft)}@supports (color:color-mix(in lab, red, red)){.bg-brand-soft\/80{background-color:color-mix(in oklab, var(--brand-soft) 80%, transparent)}}.bg-card{background-color:var(--card)}.bg-code{background-color:var(--code)}.bg-destructive,.bg-destructive\/5{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.bg-destructive\/5{background-color:color-mix(in oklab, var(--destructive) 5%, transparent)}}.bg-destructive\/10{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.bg-destructive\/10{background-color:color-mix(in oklab, var(--destructive) 10%, transparent)}}.bg-foreground,.bg-foreground\/70{background-color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.bg-foreground\/70{background-color:color-mix(in oklab, var(--foreground) 70%, transparent)}}.bg-foreground\/\[0\.06\]{background-color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.bg-foreground\/\[0\.06\]{background-color:color-mix(in oklab, var(--foreground) 6%, transparent)}}.bg-info,.bg-info\/10{background-color:var(--info)}@supports (color:color-mix(in lab, red, red)){.bg-info\/10{background-color:color-mix(in oklab, var(--info) 10%, transparent)}}.bg-muted{background-color:var(--muted)}.bg-muted-foreground,.bg-muted-foreground\/15{background-color:var(--muted-foreground)}@supports (color:color-mix(in lab, red, red)){.bg-muted-foreground\/15{background-color:color-mix(in oklab, var(--muted-foreground) 15%, transparent)}}.bg-muted-foreground\/60{background-color:var(--muted-foreground)}@supports (color:color-mix(in lab, red, red)){.bg-muted-foreground\/60{background-color:color-mix(in oklab, var(--muted-foreground) 60%, transparent)}}.bg-muted\/40{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/40{background-color:color-mix(in oklab, var(--muted) 40%, transparent)}}.bg-muted\/60{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/60{background-color:color-mix(in oklab, var(--muted) 60%, transparent)}}.bg-muted\/70{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/70{background-color:color-mix(in oklab, var(--muted) 70%, transparent)}}.bg-primary{background-color:var(--primary)}.bg-recording,.bg-recording\/8{background-color:var(--recording)}@supports (color:color-mix(in lab, red, red)){.bg-recording\/8{background-color:color-mix(in oklab, var(--recording) 8%, transparent)}}.bg-recording\/80{background-color:var(--recording)}@supports (color:color-mix(in lab, red, red)){.bg-recording\/80{background-color:color-mix(in oklab, var(--recording) 80%, transparent)}}.bg-secondary{background-color:var(--secondary)}.bg-success,.bg-success\/10{background-color:var(--success)}@supports (color:color-mix(in lab, red, red)){.bg-success\/10{background-color:color-mix(in oklab, var(--success) 10%, transparent)}}.bg-surface{background-color:var(--surface)}.bg-surface-muted,.bg-surface-muted\/50{background-color:var(--surface-muted)}@supports (color:color-mix(in lab, red, red)){.bg-surface-muted\/50{background-color:color-mix(in oklab, var(--surface-muted) 50%, transparent)}}.bg-surface-muted\/55{background-color:var(--surface-muted)}@supports (color:color-mix(in lab, red, red)){.bg-surface-muted\/55{background-color:color-mix(in oklab, var(--surface-muted) 55%, transparent)}}.bg-surface-muted\/60{background-color:var(--surface-muted)}@supports (color:color-mix(in lab, red, red)){.bg-surface-muted\/60{background-color:color-mix(in oklab, var(--surface-muted) 60%, transparent)}}.bg-surface-raised{background-color:var(--surface-raised)}.bg-surface\/95{background-color:var(--surface)}@supports (color:color-mix(in lab, red, red)){.bg-surface\/95{background-color:color-mix(in oklab, var(--surface) 95%, transparent)}}.bg-transparent{background-color:#0000}.bg-warning,.bg-warning\/5{background-color:var(--warning)}@supports (color:color-mix(in lab, red, red)){.bg-warning\/5{background-color:color-mix(in oklab, var(--warning) 5%, transparent)}}.bg-warning\/10{background-color:var(--warning)}@supports (color:color-mix(in lab, red, red)){.bg-warning\/10{background-color:color-mix(in oklab, var(--warning) 10%, transparent)}}.fill-code{fill:var(--code)}.fill-current{fill:currentColor}.object-cover{object-fit:cover}.p-0{padding:0}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-1{padding:var(--spacing)}.p-1\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-3\.5{padding:calc(var(--spacing) * 3.5)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.p-16{padding:calc(var(--spacing) * 16)}.p-px{padding:1px}.px-0{padding-inline:0}.px-1{padding-inline:var(--spacing)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-3\.5{padding-inline:calc(var(--spacing) * 3.5)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-3\.5{padding-block:calc(var(--spacing) * 3.5)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-10{padding-block:calc(var(--spacing) * 10)}.py-12{padding-block:calc(var(--spacing) * 12)}.ps-3{padding-inline-start:calc(var(--spacing) * 3)}.pe-1{padding-inline-end:var(--spacing)}.pe-2{padding-inline-end:calc(var(--spacing) * 2)}.pe-3{padding-inline-end:calc(var(--spacing) * 3)}.pt-0{padding-top:0}.pt-0\.5{padding-top:calc(var(--spacing) * .5)}.pt-1{padding-top:var(--spacing)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-5{padding-top:calc(var(--spacing) * 5)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pt-\[env\(safe-area-inset-top\)\]{padding-top:env(safe-area-inset-top)}.pr-1{padding-right:var(--spacing)}.pr-2{padding-right:calc(var(--spacing) * 2)}.pr-7{padding-right:calc(var(--spacing) * 7)}.pr-8{padding-right:calc(var(--spacing) * 8)}.pr-9{padding-right:calc(var(--spacing) * 9)}.pr-10{padding-right:calc(var(--spacing) * 10)}.pr-12{padding-right:calc(var(--spacing) * 12)}.pr-\[env\(safe-area-inset-right\)\]{padding-right:env(safe-area-inset-right)}.pb-0\.5{padding-bottom:calc(var(--spacing) * .5)}.pb-1{padding-bottom:var(--spacing)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-5{padding-bottom:calc(var(--spacing) * 5)}.pb-6{padding-bottom:calc(var(--spacing) * 6)}.pb-16{padding-bottom:calc(var(--spacing) * 16)}.pb-\[env\(safe-area-inset-bottom\)\]{padding-bottom:env(safe-area-inset-bottom)}.pl-2{padding-left:calc(var(--spacing) * 2)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-5{padding-left:calc(var(--spacing) * 5)}.pl-7{padding-left:calc(var(--spacing) * 7)}.pl-8{padding-left:calc(var(--spacing) * 8)}.pl-\[env\(safe-area-inset-left\)\]{padding-left:env(safe-area-inset-left)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-baseline{vertical-align:baseline}.align-middle{vertical-align:middle}.font-mono{font-family:JetBrains Mono,SFMono-Regular,Consolas,Liberation Mono,monospace}.font-sans{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-7xl{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[0\.85em\]{font-size:.85em}.text-\[10px\]{font-size:10px}.text-\[11\.5px\]{font-size:11.5px}.text-\[11px\]{font-size:11px}.text-\[12\.5px\]{font-size:12.5px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.leading-4{--tw-leading:calc(var(--spacing) * 4);line-height:calc(var(--spacing) * 4)}.leading-5{--tw-leading:calc(var(--spacing) * 5);line-height:calc(var(--spacing) * 5)}.leading-6{--tw-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)}.leading-7{--tw-leading:calc(var(--spacing) * 7);line-height:calc(var(--spacing) * 7)}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[-0\.01em\]{--tw-tracking:-.01em;letter-spacing:-.01em}.tracking-\[-0\.02em\]{--tw-tracking:-.02em;letter-spacing:-.02em}.tracking-\[-0\.015em\]{--tw-tracking:-.015em;letter-spacing:-.015em}.tracking-\[-0\.025em\]{--tw-tracking:-.025em;letter-spacing:-.025em}.tracking-\[-0\.035em\]{--tw-tracking:-.035em;letter-spacing:-.035em}.tracking-\[0\.06em\]{--tw-tracking:.06em;letter-spacing:.06em}.tracking-\[0\.08em\]{--tw-tracking:.08em;letter-spacing:.08em}.tracking-\[0\.12em\]{--tw-tracking:.12em;letter-spacing:.12em}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.text-balance{text-wrap:balance}.\[overflow-wrap\:anywhere\]{overflow-wrap:anywhere}.break-words{overflow-wrap:break-word}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.text-accent-foreground{color:var(--accent-foreground)}.text-brand{color:var(--brand)}.text-brand-soft-foreground{color:var(--brand-soft-foreground)}.text-card-foreground{color:var(--card-foreground)}.text-code-foreground,.text-code-foreground\/60{color:var(--code-foreground)}@supports (color:color-mix(in lab, red, red)){.text-code-foreground\/60{color:color-mix(in oklab, var(--code-foreground) 60%, transparent)}}.text-code-foreground\/80{color:var(--code-foreground)}@supports (color:color-mix(in lab, red, red)){.text-code-foreground\/80{color:color-mix(in oklab, var(--code-foreground) 80%, transparent)}}.text-current{color:currentColor}.text-destructive{color:var(--destructive)}.text-destructive-foreground{color:var(--destructive-foreground)}.text-foreground,.text-foreground\/80{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/80{color:color-mix(in oklab, var(--foreground) 80%, transparent)}}.text-info{color:var(--info)}.text-muted-foreground{color:var(--muted-foreground)}.text-popover-foreground{color:var(--popover-foreground)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-recording-foreground{color:var(--recording-foreground)}.text-secondary-foreground{color:var(--secondary-foreground)}.text-success{color:var(--success)}.text-warning{color:var(--warning)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.italic{font-style:italic}.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,)}.line-through{text-decoration-line:line-through}.overline{text-decoration-line:overline}.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.accent-foreground{accent-color:var(--foreground)}.opacity-0{opacity:0}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-100{opacity:1}.shadow{--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)}.shadow-\[0_0_0_9999px_rgb\(10_8_14\/0\.45\)\]{--tw-shadow:0 0 0 9999px var(--tw-shadow-color,#0a080e73);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_16px_48px_rgb\(0_0_0_\/_0\.18\)\]{--tw-shadow:0 16px 48px var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_24px_80px_rgb\(0_0_0_\/_0\.28\)\]{--tw-shadow:0 24px 80px var(--tw-shadow-color,#00000047);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[inset_2px_0_0_var\(--color-brand\)\]{--tw-shadow:inset 2px 0 0 var(--tw-shadow-color,var(--color-brand));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 10px 30px var(--tw-shadow-color,#0a080e1a), 0 2px 8px var(--tw-shadow-color,#0a080e0f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px var(--tw-shadow-color,#0a080e14), 0 1px 2px var(--tw-shadow-color,#0a080e0d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px var(--tw-shadow-color,#0a080e0d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-0{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--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)}.inset-ring-1{--tw-inset-ring-shadow:inset 0 0 0 1px var(--tw-inset-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-brand{--tw-ring-color:var(--brand)}.ring-current\/10{--tw-ring-color:currentcolor}@supports (color:color-mix(in lab, red, red)){.ring-current\/10{--tw-ring-color:color-mix(in oklab, currentcolor 10%, transparent)}}.ring-surface{--tw-ring-color:var(--surface)}.inset-ring-ring{--tw-inset-ring-color:var(--ring)}.outline-hidden{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.outline-hidden{outline-offset:2px;outline:2px solid #0000}}.outline-hidden\!{--tw-outline-style:none!important;outline-style:none!important}@media (forced-colors:active){.outline-hidden\!{outline-offset:2px!important;outline:2px solid #0000!important}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-\[3px\]{--tw-backdrop-blur:blur(3px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-md{--tw-backdrop-blur:blur(var(--blur-md));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-xl{--tw-backdrop-blur:blur(var(--blur-xl));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition-\[background-color\,border-color\,color\,box-shadow\,transform\]{transition-property:background-color,border-color,color,box-shadow,transform;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[background-color\,color\,box-shadow\]{transition-property:background-color,color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[border-color\,background-color\,box-shadow\,transform\]{transition-property:border-color,background-color,box-shadow,transform;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[border-color\,box-shadow\,background-color\]{transition-property:border-color,box-shadow,background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[border-color\,box-shadow\]{transition-property:border-color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[color\,box-shadow\]{transition-property:color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[height\]{transition-property:height;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[width\,height\]{transition-property:width,height;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.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(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-\[var\(--duration-fast\)\]{--tw-duration:var(--duration-fast);transition-duration:var(--duration-fast)}.ease-\[var\(--ease-standard\)\]{--tw-ease:var(--ease-standard);transition-timing-function:var(--ease-standard)}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-all{-webkit-user-select:all;user-select:all}.select-none{-webkit-user-select:none;user-select:none}.\[--bl-scale\:0\.95\]{--bl-scale:.95}.\[--bl-scale\:0\.98\]{--bl-scale:.98}.\[--bl-scale\:1\]{--bl-scale:1}.\[--bl-sheet-x\:-100\%\]{--bl-sheet-x:-100%}.\[--bl-sheet-x\:0\]{--bl-sheet-x:0}.\[--bl-sheet-x\:100\%\]{--bl-sheet-x:100%}.\[--bl-sheet-y\:-100\%\]{--bl-sheet-y:-100%}.\[--bl-sheet-y\:100\%\]{--bl-sheet-y:100%}.\[--bl-ty\:-6px\]{--bl-ty:-6px}.\[--bl-ty\:8px\]{--bl-ty:8px}.\[--bl-ty\:12px\]{--bl-ty:12px}.\[-webkit-tap-highlight-color\:transparent\]{-webkit-tap-highlight-color:transparent}.group-focus-within\/message\:opacity-100:is(:where(.group\/message):focus-within *),.group-focus-within\/tab\:opacity-100:is(:where(.group\/tab):focus-within *){opacity:1}@media (hover:hover){.group-hover\/message\:opacity-100:is(:where(.group\/message):hover *),.group-hover\/row\:opacity-100:is(:where(.group\/row):hover *){opacity:1}.group-hover\/tab\:block:is(:where(.group\/tab):hover *){display:block}.group-hover\/tab\:hidden:is(:where(.group\/tab):hover *){display:none}.group-hover\/tab\:opacity-100:is(:where(.group\/tab):hover *),.group-hover\/tree\:opacity-100:is(:where(.group\/tree):hover *){opacity:1}}.group-has-\[\>svg\]\/alert\:col-start-2:is(:where(.group\/alert):has(>svg) *){grid-column-start:2}.group-aria-\[orientation\=horizontal\]\/handle\:h-2:is(:where(.group\/handle)[aria-orientation=horizontal] *){height:calc(var(--spacing) * 2)}.group-aria-\[orientation\=horizontal\]\/handle\:h-px:is(:where(.group\/handle)[aria-orientation=horizontal] *){height:1px}.group-aria-\[orientation\=horizontal\]\/handle\:w-3:is(:where(.group\/handle)[aria-orientation=horizontal] *){width:calc(var(--spacing) * 3)}.group-aria-\[orientation\=horizontal\]\/handle\:w-6:is(:where(.group\/handle)[aria-orientation=horizontal] *){width:calc(var(--spacing) * 6)}.group-aria-\[orientation\=vertical\]\/handle\:h-3:is(:where(.group\/handle)[aria-orientation=vertical] *){height:calc(var(--spacing) * 3)}.group-aria-\[orientation\=vertical\]\/handle\:h-6:is(:where(.group\/handle)[aria-orientation=vertical] *){height:calc(var(--spacing) * 6)}.group-aria-\[orientation\=vertical\]\/handle\:w-2:is(:where(.group\/handle)[aria-orientation=vertical] *){width:calc(var(--spacing) * 2)}.group-aria-\[orientation\=vertical\]\/handle\:w-px:is(:where(.group\/handle)[aria-orientation=vertical] *){width:1px}.group-data-\[density\=compact\]\/table\:h-8:is(:where(.group\/table)[data-density=compact] *){height:calc(var(--spacing) * 8)}.group-data-\[density\=compact\]\/tree\:h-6:is(:where(.group\/tree)[data-density=compact] *){height:calc(var(--spacing) * 6)}.group-data-\[disabled\=true\]\:pointer-events-none:is(:where(.group)[data-disabled=true] *){pointer-events:none}.group-data-\[disabled\=true\]\:opacity-50:is(:where(.group)[data-disabled=true] *){opacity:.5}.group-data-\[state\=active\]\/tab\:opacity-100:is(:where(.group\/tab)[data-state=active] *){opacity:1}.group-data-\[state\=indeterminate\]\/indicator\:block:is(:where(.group\/indicator)[data-state=indeterminate] *){display:block}.group-data-\[state\=indeterminate\]\/indicator\:hidden:is(:where(.group\/indicator)[data-state=indeterminate] *){display:none}.group-data-\[state\=open\]\:rotate-180:is(:where(.group)[data-state=open] *){rotate:180deg}.group-data-\[state\=open\]\/reasoning\:rotate-90:is(:where(.group\/reasoning)[data-state=open] *),.group-data-\[state\=open\]\/tool\:rotate-90:is(:where(.group\/tool)[data-state=open] *){rotate:90deg}.group-data-\[sticky\]\/table\:sticky:is(:where(.group\/table)[data-sticky] *){position:sticky}.group-data-\[sticky\]\/table\:top-0:is(:where(.group\/table)[data-sticky] *){top:0}.group-data-\[sticky\]\/table\:z-10:is(:where(.group\/table)[data-sticky] *){z-index:10}.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\:opacity-50:is(:where(.peer):disabled~*){opacity:.5}.file\:mr-3::file-selector-button{margin-right:calc(var(--spacing) * 3)}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:text-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.file\:font-semibold::file-selector-button{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.file\:text-foreground::file-selector-button{color:var(--foreground)}.placeholder\:text-muted-foreground::placeholder,.placeholder\:text-muted-foreground\/80::placeholder{color:var(--muted-foreground)}@supports (color:color-mix(in lab, red, red)){.placeholder\:text-muted-foreground\/80::placeholder{color:color-mix(in oklab, var(--muted-foreground) 80%, transparent)}}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:inset-0:after{content:var(--tw-content);inset:0}.after\:rounded-lg:after{content:var(--tw-content);border-radius:.75rem}.after\:content-\[\"\"\]:after{--tw-content:"";content:var(--tw-content)}.first\:mt-0:first-child{margin-top:0}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}@media (hover:hover){.hover\:-translate-y-0\.5:hover{--tw-translate-y:calc(var(--spacing) * -.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:border-border-strong:hover{border-color:var(--border-strong)}.hover\:border-brand\/30:hover{border-color:var(--brand)}@supports (color:color-mix(in lab, red, red)){.hover\:border-brand\/30:hover{border-color:color-mix(in oklab, var(--brand) 30%, transparent)}}.hover\:border-brand\/35:hover{border-color:var(--brand)}@supports (color:color-mix(in lab, red, red)){.hover\:border-brand\/35:hover{border-color:color-mix(in oklab, var(--brand) 35%, transparent)}}.hover\:border-brand\/40:hover{border-color:var(--brand)}@supports (color:color-mix(in lab, red, red)){.hover\:border-brand\/40:hover{border-color:color-mix(in oklab, var(--brand) 40%, transparent)}}.hover\:border-brand\/50:hover{border-color:var(--brand)}@supports (color:color-mix(in lab, red, red)){.hover\:border-brand\/50:hover{border-color:color-mix(in oklab, var(--brand) 50%, transparent)}}.hover\:bg-accent:hover,.hover\:bg-accent\/60:hover{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-accent\/60:hover{background-color:color-mix(in oklab, var(--accent) 60%, transparent)}}.hover\:bg-background:hover{background-color:var(--background)}.hover\:bg-brand-soft:hover{background-color:var(--brand-soft)}.hover\:bg-brand\/15:hover{background-color:var(--brand)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-brand\/15:hover{background-color:color-mix(in oklab, var(--brand) 15%, transparent)}}.hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab, var(--destructive) 90%, transparent)}}.hover\:bg-muted:hover,.hover\:bg-muted\/40:hover{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/40:hover{background-color:color-mix(in oklab, var(--muted) 40%, transparent)}}.hover\:bg-muted\/60:hover{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/60:hover{background-color:color-mix(in oklab, var(--muted) 60%, transparent)}}.hover\:bg-muted\/70:hover{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/70:hover{background-color:color-mix(in oklab, var(--muted) 70%, transparent)}}.hover\:bg-recording\/90:hover{background-color:var(--recording)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-recording\/90:hover{background-color:color-mix(in oklab, var(--recording) 90%, transparent)}}.hover\:bg-transparent:hover{background-color:#0000}.hover\:bg-white\/10:hover{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/10:hover{background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.hover\:text-brand:hover{color:var(--brand)}.hover\:text-brand-hover:hover{color:var(--brand-hover)}.hover\:text-brand-soft-foreground:hover{color:var(--brand-soft-foreground)}.hover\:text-code-foreground:hover{color:var(--code-foreground)}.hover\:text-foreground:hover{color:var(--foreground)}.hover\:underline:hover{text-decoration-line:underline}.hover\:underline-offset-4:hover{text-underline-offset:4px}.hover\:shadow-md:hover{--tw-shadow:0 10px 30px var(--tw-shadow-color,#0a080e1a), 0 2px 8px var(--tw-shadow-color,#0a080e0f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:brightness-90:hover{--tw-brightness:brightness(90%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}.focus\:not-sr-only:focus{clip-path:none;white-space:normal;width:auto;height:auto;margin:0;padding:0;position:static;overflow:visible}.focus\:fixed:focus{position:fixed}.focus\:top-2:focus{top:calc(var(--spacing) * 2)}.focus\:left-2:focus{left:calc(var(--spacing) * 2)}.focus\:z-50:focus{z-index:50}.focus\:rounded-md:focus{border-radius:.625rem}.focus\:bg-background:focus{background-color:var(--background)}.focus\:bg-secondary:focus{background-color:var(--secondary)}.focus\:px-3:focus{padding-inline:calc(var(--spacing) * 3)}.focus\:py-2:focus{padding-block:calc(var(--spacing) * 2)}.focus\:text-foreground:focus{color:var(--foreground)}.focus-visible\:border-ring:focus-visible{border-color:var(--ring)}.focus-visible\:bg-muted\/60:focus-visible{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:bg-muted\/60:focus-visible{background-color:color-mix(in oklab, var(--muted) 60%, transparent)}}.focus-visible\:underline:focus-visible{text-decoration-line:underline}.focus-visible\:opacity-100:focus-visible{opacity:1}.focus-visible\:shadow-\[inset_0_0_0_1px_var\(--ring\)\]:focus-visible{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--ring));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:shadow-\[inset_2px_0_0_var\(--ring\)\]:focus-visible{--tw-shadow:inset 2px 0 0 var(--tw-shadow-color,var(--ring));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-0:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-\[3px\]:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:inset-ring-1:focus-visible{--tw-inset-ring-shadow:inset 0 0 0 1px var(--tw-inset-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-ring\/20:focus-visible{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-ring\/20:focus-visible{--tw-ring-color:color-mix(in oklab, var(--ring) 20%, transparent)}}.focus-visible\:ring-ring\/25:focus-visible{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-ring\/25:focus-visible{--tw-ring-color:color-mix(in oklab, var(--ring) 25%, transparent)}}.focus-visible\:ring-ring\/30:focus-visible{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-ring\/30:focus-visible{--tw-ring-color:color-mix(in oklab, var(--ring) 30%, transparent)}}.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:color-mix(in oklab, var(--ring) 50%, transparent)}}.focus-visible\:inset-ring-ring:focus-visible{--tw-inset-ring-color:var(--ring)}.focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-ring:focus-visible{outline-color:var(--ring)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-inset:focus-visible{--tw-ring-inset:inset}.active\:translate-y-0:active{--tw-translate-y:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.active\:translate-y-px:active{--tw-translate-y:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-default:disabled{cursor:default}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-muted:disabled{background-color:var(--muted)}.disabled\:opacity-45:disabled{opacity:.45}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-60:disabled{opacity:.6}@media (hover:hover){.disabled\:hover\:bg-transparent:disabled:hover{background-color:#0000}}.has-\[\:disabled\]\:cursor-not-allowed:has(:disabled){cursor:not-allowed}.has-\[\:disabled\]\:opacity-60:has(:disabled){opacity:.6}@media (hover:hover){.has-\[\:disabled\]\:hover\:border-border:has(:disabled):hover{border-color:var(--border)}}.has-\[\:focus-visible\]\:border-ring:has(:focus-visible){border-color:var(--ring)}.has-\[\:focus-visible\]\:inset-ring-1:has(:focus-visible){--tw-inset-ring-shadow:inset 0 0 0 1px var(--tw-inset-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)}.has-\[\:focus-visible\]\:inset-ring-ring:has(:focus-visible){--tw-inset-ring-color:var(--ring)}.has-\[\[cmdk-input\]\:focus-visible\]\:border-ring:has([cmdk-input]:focus-visible),.has-\[\[data-row-action\]\:focus-visible\]\:border-ring:has([data-row-action]:focus-visible){border-color:var(--ring)}.has-\[\[data-row-action\]\:focus-visible\]\:inset-ring-1:has([data-row-action]:focus-visible){--tw-inset-ring-shadow:inset 0 0 0 1px var(--tw-inset-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)}.has-\[\[data-row-action\]\:focus-visible\]\:inset-ring-ring:has([data-row-action]:focus-visible){--tw-inset-ring-color:var(--ring)}.has-\[\[data-state\=checked\]\]\:border-brand\/40:has([data-state=checked]){border-color:var(--brand)}@supports (color:color-mix(in lab, red, red)){.has-\[\[data-state\=checked\]\]\:border-brand\/40:has([data-state=checked]){border-color:color-mix(in oklab, var(--brand) 40%, transparent)}}.has-\[\[data-state\=checked\]\]\:bg-brand-soft\/50:has([data-state=checked]){background-color:var(--brand-soft)}@supports (color:color-mix(in lab, red, red)){.has-\[\[data-state\=checked\]\]\:bg-brand-soft\/50:has([data-state=checked]){background-color:color-mix(in oklab, var(--brand-soft) 50%, transparent)}}.has-\[textarea\:focus-visible\]\:border-ring:has(:is(textarea:focus-visible)){border-color:var(--ring)}.has-\[textarea\:focus-visible\]\:inset-ring-1:has(:is(textarea:focus-visible)){--tw-inset-ring-shadow:inset 0 0 0 1px var(--tw-inset-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)}.has-\[textarea\:focus-visible\]\:inset-ring-ring:has(:is(textarea:focus-visible)){--tw-inset-ring-color:var(--ring)}.has-\[\>svg\]\:grid-cols-\[auto_1fr\]:has(>svg){grid-template-columns:auto 1fr}.aria-disabled\:opacity-50[aria-disabled=true]{opacity:.5}.aria-invalid\:border-destructive[aria-invalid=true]{border-color:var(--destructive)}.aria-invalid\:focus-visible\:inset-ring-destructive[aria-invalid=true]:focus-visible{--tw-inset-ring-color:var(--destructive)}.aria-\[orientation\=horizontal\]\:h-px[aria-orientation=horizontal]{height:1px}.aria-\[orientation\=horizontal\]\:after\:inset-x-0[aria-orientation=horizontal]:after{content:var(--tw-content);inset-inline:0}.aria-\[orientation\=horizontal\]\:after\:-inset-y-1[aria-orientation=horizontal]:after{content:var(--tw-content);inset-block:calc(var(--spacing) * -1)}.aria-\[orientation\=vertical\]\:w-px[aria-orientation=vertical]{width:1px}.aria-\[orientation\=vertical\]\:after\:-inset-x-1[aria-orientation=vertical]:after{content:var(--tw-content);inset-inline:calc(var(--spacing) * -1)}.aria-\[orientation\=vertical\]\:after\:inset-y-0[aria-orientation=vertical]:after{content:var(--tw-content);inset-block:0}.data-\[active\]\:text-foreground[data-active]{color:var(--foreground)}.data-\[active\=true\]\:bg-muted[data-active=true]{background-color:var(--muted)}.data-\[active\=true\]\:shadow-\[inset_2px_0_0_var\(--color-brand\)\][data-active=true]{--tw-shadow:inset 2px 0 0 var(--tw-shadow-color,var(--color-brand));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.data-\[disabled\]\:pointer-events-none[data-disabled]{pointer-events:none}.data-\[disabled\]\:opacity-50[data-disabled]{opacity:.5}.data-\[disabled\=true\]\:pointer-events-none[data-disabled=true]{pointer-events:none}.data-\[disabled\=true\]\:opacity-50[data-disabled=true]{opacity:.5}.data-\[dragging\]\:border-brand[data-dragging]{border-color:var(--brand)}.data-\[dragging\]\:opacity-50[data-dragging]{opacity:.5}.data-\[dragging\]\:inset-ring-1[data-dragging]{--tw-inset-ring-shadow:inset 0 0 0 1px var(--tw-inset-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)}.data-\[dragging\]\:inset-ring-brand[data-dragging]{--tw-inset-ring-color:var(--brand)}.data-\[dragging\]\:select-none[data-dragging]{-webkit-user-select:none;user-select:none}.data-\[drop\=after\]\:shadow-\[inset_-2px_0_0_var\(--brand\)\][data-drop=after]{--tw-shadow:inset -2px 0 0 var(--tw-shadow-color,var(--brand));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.data-\[drop\=before\]\:shadow-\[inset_2px_0_0_var\(--brand\)\][data-drop=before]{--tw-shadow:inset 2px 0 0 var(--tw-shadow-color,var(--brand));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.data-\[fullscreen\]\:fixed[data-fullscreen]{position:fixed}.data-\[fullscreen\]\:inset-0[data-fullscreen]{inset:0}.data-\[fullscreen\]\:z-50[data-fullscreen]{z-index:50}.data-\[fullscreen\]\:h-dvh[data-fullscreen]{height:100dvh}.data-\[fullscreen\]\:w-screen[data-fullscreen]{width:100vw}.data-\[inset\]\:pl-8[data-inset]{padding-left:calc(var(--spacing) * 8)}.data-\[motion\=from-end\]\:\[--bl-tx\:24px\][data-motion=from-end]{--bl-tx:24px}.data-\[motion\=from-start\]\:\[--bl-tx\:-24px\][data-motion=from-start]{--bl-tx:-24px}.data-\[motion\=to-end\]\:\[--bl-tx\:24px\][data-motion=to-end]{--bl-tx:24px}.data-\[motion\=to-start\]\:\[--bl-tx\:-24px\][data-motion=to-start]{--bl-tx:-24px}.data-\[motion\^\=from-\]\:animate-in[data-motion^=from-]{animation:.2s cubic-bezier(.16,1,.3,1) bl-in}.data-\[motion\^\=to-\]\:animate-out[data-motion^=to-]{animation:.14s cubic-bezier(.4,0,1,1) forwards bl-out}.data-\[orientation\=horizontal\]\:h-px[data-orientation=horizontal]{height:1px}.data-\[orientation\=horizontal\]\:w-full[data-orientation=horizontal]{width:100%}.data-\[orientation\=vertical\]\:h-full[data-orientation=vertical]{height:100%}.data-\[orientation\=vertical\]\:w-px[data-orientation=vertical]{width:1px}.data-\[orientation\=vertical\]\:flex-col[data-orientation=vertical]{flex-direction:column}.data-\[placeholder\]\:text-muted-foreground[data-placeholder]{color:var(--muted-foreground)}.data-\[selected\=true\]\:bg-secondary[data-selected=true]{background-color:var(--secondary)}.data-\[selected\=true\]\:text-foreground[data-selected=true]{color:var(--foreground)}.data-\[separator\=active\]\:bg-brand[data-separator=active]{background-color:var(--brand)}.data-\[separator\=disabled\]\:opacity-50[data-separator=disabled]{opacity:.5}.data-\[separator\=focus\]\:bg-ring[data-separator=focus]{background-color:var(--ring)}.data-\[separator\=focus\]\:shadow-\[0_0_0_1px_var\(--ring\)\][data-separator=focus]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,var(--ring));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.data-\[separator\=hover\]\:bg-border-strong[data-separator=hover]{background-color:var(--border-strong)}.data-\[side\=bottom\]\:translate-y-1[data-side=bottom]{--tw-translate-y:var(--spacing);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[side\=bottom\]\:\[--bl-ty\:-4px\][data-side=bottom]{--bl-ty:-4px}.data-\[side\=bottom\]\:\[--bl-ty\:-6px\][data-side=bottom]{--bl-ty:-6px}.data-\[side\=left\]\:-translate-x-1[data-side=left]{--tw-translate-x:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[side\=left\]\:\[--bl-tx\:4px\][data-side=left]{--bl-tx:4px}.data-\[side\=left\]\:\[--bl-tx\:6px\][data-side=left]{--bl-tx:6px}.data-\[side\=right\]\:translate-x-1[data-side=right]{--tw-translate-x:var(--spacing);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[side\=right\]\:\[--bl-tx\:-4px\][data-side=right]{--bl-tx:-4px}.data-\[side\=right\]\:\[--bl-tx\:-6px\][data-side=right]{--bl-tx:-6px}.data-\[side\=top\]\:-translate-y-1[data-side=top]{--tw-translate-y:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[side\=top\]\:\[--bl-ty\:4px\][data-side=top]{--bl-ty:4px}.data-\[side\=top\]\:\[--bl-ty\:6px\][data-side=top]{--bl-ty:6px}.data-\[size\=default\]\:h-9[data-size=default]{height:calc(var(--spacing) * 9)}.data-\[size\=sm\]\:h-8[data-size=sm]{height:calc(var(--spacing) * 8)}:is(.\*\:data-\[slot\=select-value\]\:line-clamp-1>*)[data-slot=select-value]{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}:is(.\*\:data-\[slot\=select-value\]\:flex>*)[data-slot=select-value]{display:flex}:is(.\*\:data-\[slot\=select-value\]\:items-center>*)[data-slot=select-value]{align-items:center}:is(.\*\:data-\[slot\=select-value\]\:gap-2>*)[data-slot=select-value]{gap:calc(var(--spacing) * 2)}.data-\[state\=active\]\:animate-fade-in[data-state=active]{animation:.2s ease-out bl-fade-in}.data-\[state\=active\]\:bg-background[data-state=active]{background-color:var(--background)}.data-\[state\=active\]\:bg-surface[data-state=active]{background-color:var(--surface)}.data-\[state\=active\]\:text-foreground[data-state=active]{color:var(--foreground)}.data-\[state\=active\]\:shadow-xs[data-state=active]{--tw-shadow:0 1px 2px var(--tw-shadow-color,#0a080e0d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.data-\[state\=active\]\:before\:absolute[data-state=active]:before{content:var(--tw-content);position:absolute}.data-\[state\=active\]\:before\:inset-x-0[data-state=active]:before{content:var(--tw-content);inset-inline:0}.data-\[state\=active\]\:before\:top-0[data-state=active]:before{content:var(--tw-content);top:0}.data-\[state\=active\]\:before\:h-0\.5[data-state=active]:before{content:var(--tw-content);height:calc(var(--spacing) * .5)}.data-\[state\=active\]\:before\:bg-brand[data-state=active]:before{content:var(--tw-content);background-color:var(--brand)}.data-\[state\=active\]\:before\:content-\[\"\"\][data-state=active]:before{--tw-content:"";content:var(--tw-content)}.data-\[state\=checked\]\:translate-x-\[calc\(100\%-1px\)\][data-state=checked]{--tw-translate-x:calc(100% - 1px);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[state\=checked\]\:border-primary[data-state=checked]{border-color:var(--primary)}.data-\[state\=checked\]\:bg-primary[data-state=checked]{background-color:var(--primary)}.data-\[state\=checked\]\:font-semibold[data-state=checked]{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.data-\[state\=checked\]\:text-primary-foreground[data-state=checked]{color:var(--primary-foreground)}.data-\[state\=closed\]\:animate-accordion-up[data-state=closed]{animation:.16s ease-out bl-accordion-up}.data-\[state\=closed\]\:animate-collapsible-up[data-state=closed]{animation:.16s ease-out bl-collapsible-up}.data-\[state\=closed\]\:animate-fade-out[data-state=closed]{animation:.15s ease-in forwards bl-fade-out}.data-\[state\=closed\]\:animate-out[data-state=closed]{animation:.14s cubic-bezier(.4,0,1,1) forwards bl-out}.data-\[state\=closed\]\:animate-sheet-out[data-state=closed]{animation:.22s cubic-bezier(.4,0,1,1) forwards bl-sheet-out}.data-\[state\=hidden\]\:animate-out[data-state=hidden]{animation:.14s cubic-bezier(.4,0,1,1) forwards bl-out}.data-\[state\=open\]\:animate-accordion-down[data-state=open]{animation:.2s cubic-bezier(.16,1,.3,1) bl-accordion-down}.data-\[state\=open\]\:animate-collapsible-down[data-state=open]{animation:.2s cubic-bezier(.16,1,.3,1) bl-collapsible-down}.data-\[state\=open\]\:animate-fade-in[data-state=open]{animation:.2s ease-out bl-fade-in}.data-\[state\=open\]\:animate-in[data-state=open]{animation:.2s cubic-bezier(.16,1,.3,1) bl-in}.data-\[state\=open\]\:animate-sheet-in[data-state=open]{animation:.34s cubic-bezier(.32,.72,0,1) bl-sheet-in}.data-\[state\=open\]\:border-brand[data-state=open]{border-color:var(--brand)}.data-\[state\=open\]\:bg-muted[data-state=open]{background-color:var(--muted)}.data-\[state\=open\]\:bg-secondary[data-state=open]{background-color:var(--secondary)}.data-\[state\=open\]\:text-foreground[data-state=open]{color:var(--foreground)}.data-\[state\=open\]\:opacity-100[data-state=open]{opacity:1}.data-\[state\=selected\]\:border-brand\/40[data-state=selected]{border-color:var(--brand)}@supports (color:color-mix(in lab, red, red)){.data-\[state\=selected\]\:border-brand\/40[data-state=selected]{border-color:color-mix(in oklab, var(--brand) 40%, transparent)}}.data-\[state\=selected\]\:bg-brand-soft\/60[data-state=selected]{background-color:var(--brand-soft)}@supports (color:color-mix(in lab, red, red)){.data-\[state\=selected\]\:bg-brand-soft\/60[data-state=selected]{background-color:color-mix(in oklab, var(--brand-soft) 60%, transparent)}}.data-\[state\=selected\]\:bg-brand-soft\/70[data-state=selected]{background-color:var(--brand-soft)}@supports (color:color-mix(in lab, red, red)){.data-\[state\=selected\]\:bg-brand-soft\/70[data-state=selected]{background-color:color-mix(in oklab, var(--brand-soft) 70%, transparent)}}.data-\[state\=selected\]\:text-foreground[data-state=selected]{color:var(--foreground)}.data-\[state\=selected\]\:shadow-\[inset_2px_0_0_var\(--color-brand\)\][data-state=selected]{--tw-shadow:inset 2px 0 0 var(--tw-shadow-color,var(--color-brand));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.data-\[state\=unchecked\]\:translate-x-px[data-state=unchecked]{--tw-translate-x:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[state\=unchecked\]\:bg-border-strong[data-state=unchecked]{background-color:var(--border-strong)}.data-\[state\=visible\]\:animate-in[data-state=visible]{animation:.2s cubic-bezier(.16,1,.3,1) bl-in}.data-\[swipe\=cancel\]\:translate-x-0[data-swipe=cancel]{--tw-translate-x:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[swipe\=end\]\:translate-x-\(--radix-toast-swipe-end-x\)[data-swipe=end]{--tw-translate-x:var(--radix-toast-swipe-end-x);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[swipe\=move\]\:translate-x-\(--radix-toast-swipe-move-x\)[data-swipe=move]{--tw-translate-x:var(--radix-toast-swipe-move-x);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[swipe\=move\]\:transition-none[data-swipe=move]{transition-property:none}.data-\[variant\=destructive\]\:text-destructive[data-variant=destructive]{color:var(--destructive)}.data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant=destructive]:focus{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant=destructive]:focus{background-color:color-mix(in oklab, var(--destructive) 10%, transparent)}}@supports ((-webkit-backdrop-filter:var(--tw)) or (backdrop-filter:var(--tw))){.supports-\[backdrop-filter\]\:bg-surface\/80{background-color:var(--surface)}@supports (color:color-mix(in lab, red, red)){.supports-\[backdrop-filter\]\:bg-surface\/80{background-color:color-mix(in oklab, var(--surface) 80%, transparent)}}}@media (prefers-reduced-motion:no-preference){.motion-safe\:animate-pulse{animation:var(--animate-pulse)}.motion-safe\:transition-\[top\,left\,width\,height\]{transition-property:top,left,width,height;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.motion-safe\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.motion-safe\:duration-200{--tw-duration:.2s;transition-duration:.2s}}@media (prefers-reduced-motion:reduce){.motion-reduce\:hidden{display:none}.motion-reduce\:animate-none{animation:none}}@media not all and (min-width:64rem){.max-lg\:col-span-2{grid-column:span 2/span 2}.max-lg\:block{display:block}.max-lg\:flex{display:flex}.max-lg\:grid{display:grid}.max-lg\:hidden{display:none}.max-lg\:grid-cols-\[minmax\(0\,1fr\)_auto\]{grid-template-columns:minmax(0,1fr) auto}.max-lg\:items-baseline{align-items:baseline}.max-lg\:gap-x-3{column-gap:calc(var(--spacing) * 3)}.max-lg\:gap-y-2{row-gap:calc(var(--spacing) * 2)}.max-lg\:pt-0{padding-top:0}}@media not all and (min-width:48rem){.max-md\:col-span-2{grid-column:span 2/span 2}.max-md\:block{display:block}.max-md\:flex{display:flex}.max-md\:grid{display:grid}.max-md\:hidden{display:none}.max-md\:grid-cols-\[minmax\(0\,1fr\)_auto\]{grid-template-columns:minmax(0,1fr) auto}.max-md\:items-baseline{align-items:baseline}.max-md\:gap-x-3{column-gap:calc(var(--spacing) * 3)}.max-md\:gap-y-2{row-gap:calc(var(--spacing) * 2)}.max-md\:pt-0{padding-top:0}.max-md\:opacity-100{opacity:1}}@media not all and (min-width:40rem){.max-sm\:top-3{top:calc(var(--spacing) * 3)}.max-sm\:top-auto{top:auto}.max-sm\:right-3{right:calc(var(--spacing) * 3)}.max-sm\:bottom-0{bottom:0}.max-sm\:left-0{left:0}.max-sm\:order-1{order:1}.max-sm\:order-2{order:2}.max-sm\:order-3{order:3}.max-sm\:col-span-2{grid-column:span 2/span 2}.max-sm\:block{display:block}.max-sm\:flex{display:flex}.max-sm\:grid{display:grid}.max-sm\:hidden{display:none}.max-sm\:size-11{width:calc(var(--spacing) * 11);height:calc(var(--spacing) * 11)}.max-sm\:max-h-\[92dvh\]{max-height:92dvh}.max-sm\:w-full{width:100%}.max-sm\:max-w-none{max-width:none}.max-sm\:translate-x-0{--tw-translate-x:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.max-sm\:translate-y-0{--tw-translate-y:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.max-sm\:grid-cols-\[minmax\(0\,1fr\)_auto\]{grid-template-columns:minmax(0,1fr) auto}.max-sm\:items-baseline{align-items:baseline}.max-sm\:justify-between{justify-content:space-between}.max-sm\:gap-x-3{column-gap:calc(var(--spacing) * 3)}.max-sm\:gap-y-2{row-gap:calc(var(--spacing) * 2)}.max-sm\:rounded-b-none{border-bottom-right-radius:0;border-bottom-left-radius:0}.max-sm\:border{border-style:var(--tw-border-style);border-width:1px}.max-sm\:border-x-0{border-inline-style:var(--tw-border-style);border-inline-width:0}.max-sm\:border-b-0{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.max-sm\:border-border{border-color:var(--border)}.max-sm\:px-0{padding-inline:0}.max-sm\:pt-0{padding-top:0}.max-sm\:pb-\[max\(1\.25rem\,env\(safe-area-inset-bottom\)\)\]{padding-bottom:max(1.25rem, env(safe-area-inset-bottom))}.max-sm\:\[--bl-scale\:1\]{--bl-scale:1}.max-sm\:\[--bl-ty\:100\%\]{--bl-ty:100%}}@media (min-width:40rem){.sm\:block{display:block}.sm\:hidden{display:none}.sm\:inline{display:inline}.sm\:inline-flex{display:inline-flex}.sm\:table-cell{display:table-cell}.sm\:min-h-9{min-height:calc(var(--spacing) * 9)}.sm\:max-w-sm{max-width:var(--container-sm)}.sm\:max-w-xl{max-width:var(--container-xl)}.sm\:max-w-xs{max-width:var(--container-xs)}.sm\:flex-1{flex:1}.sm\:basis-0{flex-basis:0}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-end{align-items:flex-end}.sm\:justify-between{justify-content:space-between}.sm\:justify-end{justify-content:flex-end}.sm\:p-0{padding:0}.sm\:p-6{padding:calc(var(--spacing) * 6)}.sm\:p-8{padding:calc(var(--spacing) * 8)}.sm\:px-4{padding-inline:calc(var(--spacing) * 4)}.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:py-16{padding-block:calc(var(--spacing) * 16)}.sm\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.sm\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.sm\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.sm\:leading-8{--tw-leading:calc(var(--spacing) * 8);line-height:calc(var(--spacing) * 8)}}@media (min-width:48rem){.md\:absolute{position:absolute}.md\:col-span-2{grid-column:span 2/span 2}.md\:flex{display:flex}.md\:inline{display:inline}.md\:table-cell{display:table-cell}.md\:w-\(--radix-navigation-menu-viewport-width\){width:var(--radix-navigation-menu-viewport-width)}.md\:w-auto{width:auto}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1\.1fr\)\]{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.md\:items-center{align-items:center}}@media (min-width:64rem){.lg\:block{display:block}.lg\:hidden{display:none}.lg\:table-cell{display:table-cell}.lg\:grid-cols-\[minmax\(0\,1fr\)_26rem\]{grid-template-columns:minmax(0,1fr) 26rem}.lg\:items-end{align-items:flex-end}}@media (min-width:80rem){.xl\:table-cell{display:table-cell}}@container (min-width:28rem){.\@md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}.dark\:bg-surface-raised:where(.dark,.dark *,[data-theme=dark],[data-theme=dark] *){background-color:var(--surface-raised)}.dark\:data-\[state\=checked\]\:bg-primary-foreground:where(.dark,.dark *,[data-theme=dark],[data-theme=dark] *)[data-state=checked]{background-color:var(--primary-foreground)}.dark\:data-\[state\=unchecked\]\:bg-foreground\/80:where(.dark,.dark *,[data-theme=dark],[data-theme=dark] *)[data-state=unchecked]{background-color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.dark\:data-\[state\=unchecked\]\:bg-foreground\/80:where(.dark,.dark *,[data-theme=dark],[data-theme=dark] *)[data-state=unchecked]{background-color:color-mix(in oklab, var(--foreground) 80%, transparent)}}@media (pointer:coarse){.pointer-coarse\:size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.pointer-coarse\:size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.pointer-coarse\:size-11{width:calc(var(--spacing) * 11);height:calc(var(--spacing) * 11)}.pointer-coarse\:h-11{height:calc(var(--spacing) * 11)}.pointer-coarse\:opacity-100{opacity:1}@media not all and (min-width:40rem){.pointer-coarse\:max-sm\:size-11{width:calc(var(--spacing) * 11);height:calc(var(--spacing) * 11)}}}.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading]{padding-inline:calc(var(--spacing) * 2)}.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading]{padding-block:calc(var(--spacing) * 1.5)}.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading]{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading]{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading]{color:var(--muted-foreground)}.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item]{padding-inline:calc(var(--spacing) * 2)}.\[\&_\[cmdk-item\]\]\:py-2 [cmdk-item]{padding-block:calc(var(--spacing) * 2)}.\[\&_\[data-slot\=card-content\]\]\:px-4 [data-slot=card-content]{padding-inline:calc(var(--spacing) * 4)}.\[\&_\[data-slot\=card-content\]\]\:px-5 [data-slot=card-content]{padding-inline:calc(var(--spacing) * 5)}.\[\&_\[data-slot\=card-content\]\]\:px-6 [data-slot=card-content]{padding-inline:calc(var(--spacing) * 6)}.\[\&_\[data-slot\=card-footer\]\]\:p-4 [data-slot=card-footer]{padding:calc(var(--spacing) * 4)}.\[\&_\[data-slot\=card-footer\]\]\:p-5 [data-slot=card-footer]{padding:calc(var(--spacing) * 5)}.\[\&_\[data-slot\=card-footer\]\]\:p-6 [data-slot=card-footer]{padding:calc(var(--spacing) * 6)}.\[\&_\[data-slot\=card-header\]\]\:p-4 [data-slot=card-header]{padding:calc(var(--spacing) * 4)}.\[\&_\[data-slot\=card-header\]\]\:p-5 [data-slot=card-header]{padding:calc(var(--spacing) * 5)}.\[\&_\[data-slot\=card-header\]\]\:p-6 [data-slot=card-header]{padding:calc(var(--spacing) * 6)}.\[\&_\[data-slot\=toast-title\]\]\:text-destructive [data-slot=toast-title]{color:var(--destructive)}.\[\&_\[data-slot\=toast-title\]\]\:text-success [data-slot=toast-title]{color:var(--success)}.\[\&_a\]\:text-foreground a{color:var(--foreground)}.\[\&_a\]\:underline a{text-decoration-line:underline}.\[\&_a\]\:underline-offset-4 a{text-underline-offset:4px}.\[\&_code\]\:font-mono code{font-family:JetBrains Mono,SFMono-Regular,Consolas,Liberation Mono,monospace}.\[\&_code\]\:text-foreground code{color:var(--foreground)}.\[\&_li\]\:leading-6 li{--tw-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-3 svg{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.\[\&_svg\]\:size-3\.5 svg{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&_svg\]\:size-4\.5 svg{width:calc(var(--spacing) * 4.5);height:calc(var(--spacing) * 4.5)}.\[\&_svg\]\:size-5 svg{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}@media (pointer:coarse){.pointer-coarse\:\[\&_svg\]\:size-5 svg{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*=text-]){color:var(--muted-foreground)}.\[\&_svg\:not\(\[class\*\=size-\]\)\]\:size-3\.5 svg:not([class*=size-]){width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.\[\&_tr\]\:border-b tr{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.\[\&_tr\:last-child\]\:border-0 tr:last-child{border-style:var(--tw-border-style);border-width:0}.\[\&\:\:-moz-range-progress\]\:h-1\.5::-moz-range-progress{height:calc(var(--spacing) * 1.5)}.\[\&\:\:-moz-range-progress\]\:rounded-full::-moz-range-progress{border-radius:3.40282e38px}.\[\&\:\:-moz-range-progress\]\:bg-brand::-moz-range-progress{background-color:var(--brand)}.\[\&\:\:-moz-range-thumb\]\:size-4::-moz-range-thumb{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&\:\:-moz-range-thumb\]\:rounded-full::-moz-range-thumb{border-radius:3.40282e38px}.\[\&\:\:-moz-range-thumb\]\:border-2::-moz-range-thumb{border-style:var(--tw-border-style);border-width:2px}.\[\&\:\:-moz-range-thumb\]\:border-brand::-moz-range-thumb{border-color:var(--brand)}.\[\&\:\:-moz-range-thumb\]\:bg-background::-moz-range-thumb{background-color:var(--background)}.focus-visible\:\[\&\:\:-moz-range-thumb\]\:ring-\[3px\]:focus-visible::-moz-range-thumb{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:\[\&\:\:-moz-range-thumb\]\:ring-ring\/30:focus-visible::-moz-range-thumb{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:\[\&\:\:-moz-range-thumb\]\:ring-ring\/30:focus-visible::-moz-range-thumb{--tw-ring-color:color-mix(in oklab, var(--ring) 30%, transparent)}}.\[\&\:\:-moz-range-track\]\:h-1\.5::-moz-range-track{height:calc(var(--spacing) * 1.5)}.\[\&\:\:-moz-range-track\]\:rounded-full::-moz-range-track{border-radius:3.40282e38px}.\[\&\:\:-moz-range-track\]\:bg-muted::-moz-range-track{background-color:var(--muted)}.\[\&\:\:-webkit-slider-runnable-track\]\:h-1\.5::-webkit-slider-runnable-track{height:calc(var(--spacing) * 1.5)}.\[\&\:\:-webkit-slider-runnable-track\]\:rounded-full::-webkit-slider-runnable-track{border-radius:3.40282e38px}.\[\&\:\:-webkit-slider-runnable-track\]\:bg-\[linear-gradient\(to_right\,var\(--color-brand\)_var\(--bl-slider-fill\)\,var\(--color-muted\)_var\(--bl-slider-fill\)\)\]::-webkit-slider-runnable-track{background-image:linear-gradient(to right,var(--color-brand) var(--bl-slider-fill),var(--color-muted) var(--bl-slider-fill))}.\[\&\:\:-webkit-slider-thumb\]\:-mt-\[5px\]::-webkit-slider-thumb{margin-top:-5px}.\[\&\:\:-webkit-slider-thumb\]\:size-4::-webkit-slider-thumb{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&\:\:-webkit-slider-thumb\]\:appearance-none::-webkit-slider-thumb{appearance:none}.\[\&\:\:-webkit-slider-thumb\]\:rounded-full::-webkit-slider-thumb{border-radius:3.40282e38px}.\[\&\:\:-webkit-slider-thumb\]\:border-2::-webkit-slider-thumb{border-style:var(--tw-border-style);border-width:2px}.\[\&\:\:-webkit-slider-thumb\]\:border-brand::-webkit-slider-thumb{border-color:var(--brand)}.\[\&\:\:-webkit-slider-thumb\]\:bg-background::-webkit-slider-thumb{background-color:var(--background)}.\[\&\:\:-webkit-slider-thumb\]\:shadow-sm::-webkit-slider-thumb{--tw-shadow:0 1px 3px var(--tw-shadow-color,#0a080e14), 0 1px 2px var(--tw-shadow-color,#0a080e0d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:ring-\[3px\]:focus-visible::-webkit-slider-thumb{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:ring-ring\/30:focus-visible::-webkit-slider-thumb{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:ring-ring\/30:focus-visible::-webkit-slider-thumb{--tw-ring-color:color-mix(in oklab, var(--ring) 30%, transparent)}}.\[\&\:has\(\[role\=checkbox\]\)\]\:w-10:has([role=checkbox]){width:calc(var(--spacing) * 10)}.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]){padding-right:0}:is(.data-\[variant\=destructive\]\:\*\:\[svg\]\:\!text-destructive[data-variant=destructive]>*):is(svg){color:var(--destructive)!important}.\[\&\>svg\]\:mt-0\.5>svg{margin-top:calc(var(--spacing) * .5)}.\[\&\>svg\]\:size-3>svg{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.\[\&\>svg\]\:size-3\.5>svg{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.\[\&\>svg\]\:size-4>svg{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&\>svg\]\:text-brand>svg{color:var(--brand)}.\[\&\>svg\]\:text-destructive>svg{color:var(--destructive)}.\[\&\>svg\]\:text-info>svg{color:var(--info)}.\[\&\>svg\]\:text-muted-foreground>svg{color:var(--muted-foreground)}.\[\&\>svg\]\:text-success>svg{color:var(--success)}.\[\&\>svg\]\:text-warning>svg{color:var(--warning)}.\[\&\>tr\]\:last\:border-b-0>tr:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg{rotate:180deg}}:root{--background:#fbfafc;--foreground:#17131c;--surface:#fff;--surface-raised:#fff;--surface-muted:#f7f4f9;--card:#fff;--card-foreground:#17131c;--popover:#fff;--popover-foreground:#17131c;--primary:#8f0bc7;--primary-foreground:#fff;--secondary:#f1edf4;--secondary-foreground:#29212f;--muted:#f4f1f6;--muted-foreground:#6c6472;--accent:#f3e7fb;--accent-foreground:#561071;--destructive:#c92d3f;--destructive-foreground:#fff;--success:#0e7a56;--success-foreground:#fff;--warning:#9b5c08;--warning-foreground:#fff;--info:#2563eb;--info-foreground:#fff;--recording:#d6293e;--recording-foreground:#fff;--border:#e5dfe8;--border-strong:#cfc5d5;--input:#d8cfdd;--ring:#a60ee5;--brand:#a60ee5;--brand-hover:#8f0bc7;--brand-soft:#f5e8fc;--brand-soft-foreground:#5b1476;--code:#18141d;--code-foreground:#f5f0f7;--radius:.625rem;--duration-fast:.12s;--duration-standard:.18s;--duration-emphasis:.24s;--duration-exit:.14s;--ease-standard:cubic-bezier(.2, 0, 0, 1);--ease-emphasized:cubic-bezier(.16, 1, .3, 1);--ease-exit:cubic-bezier(.4, 0, 1, 1);color-scheme:light}.dark,[data-theme=dark]{--background:#0d0d12;--foreground:#f2eef5;--surface:#121218;--surface-raised:#18171f;--surface-muted:#17151c;--card:#14131a;--card-foreground:#f2eef5;--popover:#18171f;--popover-foreground:#f2eef5;--primary:#8f0bc7;--primary-foreground:#fff;--secondary:#211e28;--secondary-foreground:#e7e0eb;--muted:#1b1921;--muted-foreground:#a49ca9;--accent:#291734;--accent-foreground:#efd7fa;--destructive:#ef5b65;--destructive-foreground:#1b090b;--success:#36c58d;--success-foreground:#07160f;--warning:#f3b24c;--warning-foreground:#201304;--info:#6ea8ff;--info-foreground:#071226;--recording:#f2616d;--recording-foreground:#1b090b;--border:#2a2732;--border-strong:#403a49;--input:#34303d;--ring:#c65ef1;--brand:#c65ef1;--brand-hover:#d384f3;--brand-soft:#291734;--brand-soft-foreground:#efd7fa;--code:#09090d;--code-foreground:#f5f0f7;color-scheme:dark}@keyframes bl-in{0%{opacity:0;transform:translate3d(var(--bl-tx,0), var(--bl-ty,0), 0) scale(var(--bl-scale,.96))}}@keyframes bl-out{to{opacity:0;transform:translate3d(var(--bl-tx,0), var(--bl-ty,0), 0) scale(var(--bl-scale,.96))}}@keyframes bl-fade-in{0%{opacity:0}}@keyframes bl-fade-out{to{opacity:0}}@keyframes bl-sheet-in{0%{transform:translate3d(var(--bl-sheet-x,100%), var(--bl-sheet-y,0), 0)}}@keyframes bl-sheet-out{to{transform:translate3d(var(--bl-sheet-x,100%), var(--bl-sheet-y,0), 0)}}@keyframes bl-accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes bl-accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes bl-collapsible-down{0%{height:0}to{height:var(--radix-collapsible-content-height)}}@keyframes bl-collapsible-up{0%{height:var(--radix-collapsible-content-height)}to{height:0}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important}}@media (pointer:coarse){[data-slot=button],[data-slot=icon-button],[data-slot=combobox-trigger]{min-width:44px;min-height:44px}[data-slot=input]{min-height:44px}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{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-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:""}}}@layer theme{:root,:host{--font-sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-7xl:4.5rem;--text-7xl--line-height:1;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--tracking-wide:.025em;--tracking-widest:.1em;--leading-snug:1.375;--leading-relaxed:1.625;--radius-xs:.375rem;--radius-sm:.5rem;--radius-md:.625rem;--radius-lg:.75rem;--radius-xl:1rem;--shadow-xs:0 1px 2px #0a080e0d;--shadow-sm:0 1px 3px #0a080e14, 0 1px 2px #0a080e0d;--shadow-md:0 10px 30px #0a080e1a, 0 2px 8px #0a080e0f;--ease-in:cubic-bezier(.4, 0, 1, 1);--ease-out:cubic-bezier(0, 0, .2, 1);--animate-spin:spin 1s linear infinite;--animate-ping:ping 1s cubic-bezier(0, 0, .2, 1) infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--animate-bounce:bounce 1s infinite;--blur-md:12px;--blur-xl:24px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--color-background:var(--background);--color-foreground:var(--foreground);--color-muted:var(--muted);--color-border:var(--border);--color-ring:var(--ring);--color-brand:var(--brand);--shadow-focus:0 0 0 3px var(--ring)}@supports (color:color-mix(in lab, red, red)){:root,:host{--shadow-focus:0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent)}}}@layer base{:where([data-slot]):focus-visible{outline:2px solid var(--ring);outline-offset:2px}@media (forced-colors:active){:where([data-slot]):focus-visible{outline:2px solid highlight}}*{border-color:var(--color-border)}:focus-visible{outline-color:var(--color-ring)}html,body{background:var(--color-background);color:var(--color-foreground)}body{font-family:var(--font-sans)}::selection{background:var(--color-brand)}@supports (color:color-mix(in lab, red, red)){::selection{background:color-mix(in srgb, var(--color-brand) 28%, transparent)}}[data-slot],[data-slot] *,[data-slot]:before,[data-slot]:after{box-sizing:border-box;border:0 solid;border-color:var(--border)}button[data-slot],[data-slot] button{font:inherit;color:inherit;cursor:pointer;background-color:#0000;padding:0}}@layer components;@layer utilities{.\@container{container-type:inline-size}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.inset-1{inset:var(--spacing)}.inset-x-0{inset-inline:0}.inset-y-0{inset-block:0}.-top-1{top:calc(var(--spacing) * -1)}.top-0{top:0}.top-1\/2{top:50%}.top-2{top:calc(var(--spacing) * 2)}.top-3{top:calc(var(--spacing) * 3)}.top-3\.5{top:calc(var(--spacing) * 3.5)}.top-14{top:calc(var(--spacing) * 14)}.top-\[20\%\]{top:20%}.top-\[60\%\]{top:60%}.top-\[calc\(env\(safe-area-inset-top\)\+0\.75rem\)\]{top:calc(env(safe-area-inset-top) + .75rem)}.top-full{top:100%}.top-px{top:1px}.right-0{right:0}.right-1{right:var(--spacing)}.right-2{right:calc(var(--spacing) * 2)}.right-3{right:calc(var(--spacing) * 3)}.right-3\.5{right:calc(var(--spacing) * 3.5)}.bottom-0{bottom:0}.bottom-3{bottom:calc(var(--spacing) * 3)}.left-0{left:0}.left-1\/2{left:50%}.left-2{left:calc(var(--spacing) * 2)}.left-2\.5{left:calc(var(--spacing) * 2.5)}.left-3{left:calc(var(--spacing) * 3)}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.z-\[1\]{z-index:1}.z-\[100\]{z-index:100}.col-span-2{grid-column:span 2/span 2}.col-span-full{grid-column:1/-1}.col-start-1{grid-column-start:1}.col-start-2{grid-column-start:2}.row-span-2{grid-row:span 2/span 2}.row-start-1{grid-row-start:1}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.-mx-1{margin-inline:calc(var(--spacing) * -1)}.-mx-1\.5{margin-inline:calc(var(--spacing) * -1.5)}.-mx-3\.5{margin-inline:calc(var(--spacing) * -3.5)}.mx-0\.5{margin-inline:calc(var(--spacing) * .5)}.mx-1{margin-inline:var(--spacing)}.mx-auto{margin-inline:auto}.-my-2\.5{margin-block:calc(var(--spacing) * -2.5)}.-my-3{margin-block:calc(var(--spacing) * -3)}.my-1{margin-block:var(--spacing)}.my-2{margin-block:calc(var(--spacing) * 2)}.my-4{margin-block:calc(var(--spacing) * 4)}.-ms-2{margin-inline-start:calc(var(--spacing) * -2)}.ms-auto{margin-inline-start:auto}.-me-1{margin-inline-end:calc(var(--spacing) * -1)}.me-1{margin-inline-end:var(--spacing)}.me-3{margin-inline-end:calc(var(--spacing) * 3)}.-mt-1{margin-top:calc(var(--spacing) * -1)}.-mt-1\.5{margin-top:calc(var(--spacing) * -1.5)}.-mt-2{margin-top:calc(var(--spacing) * -2)}.-mt-4{margin-top:calc(var(--spacing) * -4)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-7{margin-top:calc(var(--spacing) * 7)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mt-16{margin-top:calc(var(--spacing) * 16)}.mt-20{margin-top:calc(var(--spacing) * 20)}.mt-auto{margin-top:auto}.mt-px{margin-top:1px}.-mr-1\.5{margin-right:calc(var(--spacing) * -1.5)}.-mb-2{margin-bottom:calc(var(--spacing) * -2)}.-mb-3{margin-bottom:calc(var(--spacing) * -3)}.mb-0\.5{margin-bottom:calc(var(--spacing) * .5)}.mb-1{margin-bottom:var(--spacing)}.mb-1\.5{margin-bottom:calc(var(--spacing) * 1.5)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-4{margin-left:calc(var(--spacing) * 4)}.ml-auto{margin-left:auto}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.inline-grid{display:inline-grid}.table{display:table}.table-caption{display:table-caption}.table-cell{display:table-cell}.table-row{display:table-row}.field-sizing-content{field-sizing:content}.aspect-square{aspect-ratio:1}.size-1\.5{width:calc(var(--spacing) * 1.5);height:calc(var(--spacing) * 1.5)}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-3\.5{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-7{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.size-11{width:calc(var(--spacing) * 11);height:calc(var(--spacing) * 11)}.size-12{width:calc(var(--spacing) * 12);height:calc(var(--spacing) * 12)}.size-28{width:calc(var(--spacing) * 28);height:calc(var(--spacing) * 28)}.size-\[180px\]{width:180px;height:180px}.size-full{width:100%;height:100%}.h-\(--radix-navigation-menu-viewport-height\){height:var(--radix-navigation-menu-viewport-height)}.h-\(--radix-select-trigger-height\){height:var(--radix-select-trigger-height)}.h-1{height:var(--spacing)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-11{height:calc(var(--spacing) * 11)}.h-12{height:calc(var(--spacing) * 12)}.h-14{height:calc(var(--spacing) * 14)}.h-28{height:calc(var(--spacing) * 28)}.h-36{height:calc(var(--spacing) * 36)}.h-40{height:calc(var(--spacing) * 40)}.h-56{height:calc(var(--spacing) * 56)}.h-72{height:calc(var(--spacing) * 72)}.h-80{height:calc(var(--spacing) * 80)}.h-96{height:calc(var(--spacing) * 96)}.h-\[28rem\]{height:28rem}.h-\[34rem\]{height:34rem}.h-\[630px\]{height:630px}.h-\[calc\(100dvh-3\.5rem\)\]{height:calc(100dvh - 3.5rem)}.h-\[calc\(100dvh-4rem\)\]{height:calc(100dvh - 4rem)}.h-auto{height:auto}.h-full{height:100%}.h-px{height:1px}.max-h-\(--radix-context-menu-content-available-height\){max-height:var(--radix-context-menu-content-available-height)}.max-h-\(--radix-dropdown-menu-content-available-height\){max-height:var(--radix-dropdown-menu-content-available-height)}.max-h-\(--radix-menubar-content-available-height\){max-height:var(--radix-menubar-content-available-height)}.max-h-\(--radix-popover-content-available-height\){max-height:var(--radix-popover-content-available-height)}.max-h-\(--radix-select-content-available-height\){max-height:var(--radix-select-content-available-height)}.max-h-40{max-height:calc(var(--spacing) * 40)}.max-h-48{max-height:calc(var(--spacing) * 48)}.max-h-60{max-height:calc(var(--spacing) * 60)}.max-h-64{max-height:calc(var(--spacing) * 64)}.max-h-80{max-height:calc(var(--spacing) * 80)}.max-h-\[85dvh\]{max-height:85dvh}.max-h-\[calc\(100dvh-2rem\)\]{max-height:calc(100dvh - 2rem)}.max-h-dvh{max-height:100dvh}.min-h-0{min-height:0}.min-h-8{min-height:calc(var(--spacing) * 8)}.min-h-9{min-height:calc(var(--spacing) * 9)}.min-h-10{min-height:calc(var(--spacing) * 10)}.min-h-11{min-height:calc(var(--spacing) * 11)}.min-h-14{min-height:calc(var(--spacing) * 14)}.min-h-16{min-height:calc(var(--spacing) * 16)}.min-h-24{min-height:calc(var(--spacing) * 24)}.min-h-32{min-height:calc(var(--spacing) * 32)}.min-h-56{min-height:calc(var(--spacing) * 56)}.min-h-64{min-height:calc(var(--spacing) * 64)}.min-h-72{min-height:calc(var(--spacing) * 72)}.min-h-80{min-height:calc(var(--spacing) * 80)}.min-h-dvh{min-height:100dvh}.w-\(--radix-popover-trigger-width\){width:var(--radix-popover-trigger-width)}.w-1\/2{width:50%}.w-1\/3{width:33.3333%}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-3\/4{width:75%}.w-9{width:calc(var(--spacing) * 9)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-40{width:calc(var(--spacing) * 40)}.w-44{width:calc(var(--spacing) * 44)}.w-48{width:calc(var(--spacing) * 48)}.w-56{width:calc(var(--spacing) * 56)}.w-60{width:calc(var(--spacing) * 60)}.w-64{width:calc(var(--spacing) * 64)}.w-72{width:calc(var(--spacing) * 72)}.w-80{width:calc(var(--spacing) * 80)}.w-\[3px\]{width:3px}.w-\[22rem\]{width:22rem}.w-\[470px\]{width:470px}.w-\[560px\]{width:560px}.w-\[1200px\]{width:1200px}.w-\[calc\(100\%-2rem\)\]{width:calc(100% - 2rem)}.w-\[min\(20rem\,88vw\)\]{width:min(20rem,88vw)}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.w-max{width:max-content}.w-px{width:1px}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-7xl{max-width:var(--container-7xl)}.max-w-40{max-width:calc(var(--spacing) * 40)}.max-w-56{max-width:calc(var(--spacing) * 56)}.max-w-60{max-width:calc(var(--spacing) * 60)}.max-w-64{max-width:calc(var(--spacing) * 64)}.max-w-\[85\%\]{max-width:85%}.max-w-\[1600px\]{max-width:1600px}.max-w-\[calc\(100vw-2rem\)\]{max-width:calc(100vw - 2rem)}.max-w-full{max-width:100%}.max-w-lg{max-width:var(--container-lg)}.max-w-max{max-width:max-content}.max-w-md{max-width:var(--container-md)}.max-w-prose{max-width:65ch}.max-w-sm{max-width:var(--container-sm)}.max-w-xl{max-width:var(--container-xl)}.max-w-xs{max-width:var(--container-xs)}.min-w-\(--radix-select-trigger-width\){min-width:var(--radix-select-trigger-width)}.min-w-0{min-width:0}.min-w-2{min-width:calc(var(--spacing) * 2)}.min-w-4{min-width:calc(var(--spacing) * 4)}.min-w-5{min-width:calc(var(--spacing) * 5)}.min-w-11{min-width:calc(var(--spacing) * 11)}.min-w-64{min-width:calc(var(--spacing) * 64)}.min-w-\[2px\]{min-width:2px}.min-w-\[8rem\]{min-width:8rem}.flex-1{flex:1}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.basis-full{flex-basis:100%}.caption-bottom{caption-side:bottom}.origin-\(--radix-context-menu-content-transform-origin\){transform-origin:var(--radix-context-menu-content-transform-origin)}.origin-\(--radix-dropdown-menu-content-transform-origin\){transform-origin:var(--radix-dropdown-menu-content-transform-origin)}.origin-\(--radix-menubar-content-transform-origin\){transform-origin:var(--radix-menubar-content-transform-origin)}.origin-\(--radix-popover-content-transform-origin\){transform-origin:var(--radix-popover-content-transform-origin)}.origin-\(--radix-select-content-transform-origin\){transform-origin:var(--radix-select-content-transform-origin)}.origin-\(--radix-tooltip-content-transform-origin\){transform-origin:var(--radix-tooltip-content-transform-origin)}.origin-top{transform-origin:top}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-0{--tw-translate-y:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-0\.5{--tw-translate-y:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-3{--tw-translate-y:calc(var(--spacing) * 3);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-\[-0\.1em\]{--tw-translate-y:-.1em;translate:var(--tw-translate-x) var(--tw-translate-y)}.rotate-45{rotate:45deg}.rotate-90{rotate:90deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-bounce{animation:var(--animate-bounce)}.animate-in{animation:.2s cubic-bezier(.16,1,.3,1) bl-in}.animate-ping{animation:var(--animate-ping)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize{resize:both}.resize-none{resize:none}.resize-y{resize:vertical}.scroll-my-1{scroll-margin-block:var(--spacing)}.scroll-mt-20{scroll-margin-top:calc(var(--spacing) * 20)}.scroll-py-1{scroll-padding-block:var(--spacing)}.\[scrollbar-width\:thin\]{scrollbar-width:thin}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.appearance-none{appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-\[1fr_2fr_1fr\]{grid-template-columns:1fr 2fr 1fr}.grid-cols-\[1fr_auto\]{grid-template-columns:1fr auto}.grid-cols-\[180px_1fr\]{grid-template-columns:180px 1fr}.grid-cols-\[minmax\(0\,1fr\)\]{grid-template-columns:minmax(0,1fr)}.grid-rows-\[1fr_auto\]{grid-template-rows:1fr auto}.grid-rows-\[auto_1fr\]{grid-template-rows:auto 1fr}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-wrap{flex-wrap:wrap}.place-content-center{place-content:center}.place-items-center{place-items:center}.content-center{align-content:center}.content-start{align-content:flex-start}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.justify-items-center{justify-items:center}.justify-items-end{justify-items:end}.justify-items-start{justify-items:start}.gap-0{gap:0}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-10{gap:calc(var(--spacing) * 10)}.gap-\[2px\]{gap:2px}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-3{column-gap:calc(var(--spacing) * 3)}.gap-x-4{column-gap:calc(var(--spacing) * 4)}.gap-x-6{column-gap:calc(var(--spacing) * 6)}.gap-y-0\.5{row-gap:calc(var(--spacing) * .5)}.gap-y-1{row-gap:var(--spacing)}.gap-y-2{row-gap:calc(var(--spacing) * 2)}.gap-y-2\.5{row-gap:calc(var(--spacing) * 2.5)}.self-center{align-self:center}.self-start{align-self:flex-start}.justify-self-end{justify-self:flex-end}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.overscroll-contain{overscroll-behavior:contain}.rounded{border-radius:.25rem}.rounded-\[inherit\]{border-radius:inherit}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:.75rem}.rounded-md{border-radius:.625rem}.rounded-none{border-radius:0}.rounded-sm{border-radius:.5rem}.rounded-xl{border-radius:1rem}.rounded-xs{border-radius:.375rem}.rounded-t-xl{border-top-left-radius:1rem;border-top-right-radius:1rem}.rounded-tl-sm{border-top-left-radius:.5rem}.rounded-tr-xs{border-top-right-radius:.375rem}.rounded-b-xl{border-bottom-right-radius:1rem;border-bottom-left-radius:1rem}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-e{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-l-2{border-left-style:var(--tw-border-style);border-left-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-border{border-color:var(--border)}.border-border-strong{border-color:var(--border-strong)}.border-border\/70{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.border-border\/70{border-color:color-mix(in oklab, var(--border) 70%, transparent)}}.border-brand,.border-brand\/15{border-color:var(--brand)}@supports (color:color-mix(in lab, red, red)){.border-brand\/15{border-color:color-mix(in oklab, var(--brand) 15%, transparent)}}.border-brand\/20{border-color:var(--brand)}@supports (color:color-mix(in lab, red, red)){.border-brand\/20{border-color:color-mix(in oklab, var(--brand) 20%, transparent)}}.border-brand\/25{border-color:var(--brand)}@supports (color:color-mix(in lab, red, red)){.border-brand\/25{border-color:color-mix(in oklab, var(--brand) 25%, transparent)}}.border-brand\/40{border-color:var(--brand)}@supports (color:color-mix(in lab, red, red)){.border-brand\/40{border-color:color-mix(in oklab, var(--brand) 40%, transparent)}}.border-brand\/50{border-color:var(--brand)}@supports (color:color-mix(in lab, red, red)){.border-brand\/50{border-color:color-mix(in oklab, var(--brand) 50%, transparent)}}.border-current{border-color:currentColor}.border-destructive,.border-destructive\/20{border-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.border-destructive\/20{border-color:color-mix(in oklab, var(--destructive) 20%, transparent)}}.border-destructive\/25{border-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.border-destructive\/25{border-color:color-mix(in oklab, var(--destructive) 25%, transparent)}}.border-destructive\/30{border-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.border-destructive\/30{border-color:color-mix(in oklab, var(--destructive) 30%, transparent)}}.border-destructive\/40{border-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.border-destructive\/40{border-color:color-mix(in oklab, var(--destructive) 40%, transparent)}}.border-info\/20{border-color:var(--info)}@supports (color:color-mix(in lab, red, red)){.border-info\/20{border-color:color-mix(in oklab, var(--info) 20%, transparent)}}.border-info\/25{border-color:var(--info)}@supports (color:color-mix(in lab, red, red)){.border-info\/25{border-color:color-mix(in oklab, var(--info) 25%, transparent)}}.border-input{border-color:var(--input)}.border-primary{border-color:var(--primary)}.border-recording\/30{border-color:var(--recording)}@supports (color:color-mix(in lab, red, red)){.border-recording\/30{border-color:color-mix(in oklab, var(--recording) 30%, transparent)}}.border-ring{border-color:var(--ring)}.border-success\/20{border-color:var(--success)}@supports (color:color-mix(in lab, red, red)){.border-success\/20{border-color:color-mix(in oklab, var(--success) 20%, transparent)}}.border-success\/25{border-color:var(--success)}@supports (color:color-mix(in lab, red, red)){.border-success\/25{border-color:color-mix(in oklab, var(--success) 25%, transparent)}}.border-success\/30{border-color:var(--success)}@supports (color:color-mix(in lab, red, red)){.border-success\/30{border-color:color-mix(in oklab, var(--success) 30%, transparent)}}.border-transparent{border-color:#0000}.border-warning\/20{border-color:var(--warning)}@supports (color:color-mix(in lab, red, red)){.border-warning\/20{border-color:color-mix(in oklab, var(--warning) 20%, transparent)}}.border-warning\/25{border-color:var(--warning)}@supports (color:color-mix(in lab, red, red)){.border-warning\/25{border-color:color-mix(in oklab, var(--warning) 25%, transparent)}}.border-warning\/40{border-color:var(--warning)}@supports (color:color-mix(in lab, red, red)){.border-warning\/40{border-color:color-mix(in oklab, var(--warning) 40%, transparent)}}.border-white\/10{border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.border-white\/10{border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.border-t-transparent{border-top-color:#0000}.border-r-transparent{border-right-color:#0000}.border-l-transparent{border-left-color:#0000}.bg-accent{background-color:var(--accent)}.bg-background,.bg-background\/80{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/80{background-color:color-mix(in oklab, var(--background) 80%, transparent)}}.bg-background\/90{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/90{background-color:color-mix(in oklab, var(--background) 90%, transparent)}}.bg-black\/55{background-color:#0000008c}@supports (color:color-mix(in lab, red, red)){.bg-black\/55{background-color:color-mix(in oklab, var(--color-black) 55%, transparent)}}.bg-border{background-color:var(--border)}.bg-border-strong{background-color:var(--border-strong)}.bg-brand{background-color:var(--brand)}.bg-brand-soft,.bg-brand-soft\/70{background-color:var(--brand-soft)}@supports (color:color-mix(in lab, red, red)){.bg-brand-soft\/70{background-color:color-mix(in oklab, var(--brand-soft) 70%, transparent)}}.bg-brand-soft\/80{background-color:var(--brand-soft)}@supports (color:color-mix(in lab, red, red)){.bg-brand-soft\/80{background-color:color-mix(in oklab, var(--brand-soft) 80%, transparent)}}.bg-card{background-color:var(--card)}.bg-code{background-color:var(--code)}.bg-destructive,.bg-destructive\/5{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.bg-destructive\/5{background-color:color-mix(in oklab, var(--destructive) 5%, transparent)}}.bg-destructive\/10{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.bg-destructive\/10{background-color:color-mix(in oklab, var(--destructive) 10%, transparent)}}.bg-foreground,.bg-foreground\/70{background-color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.bg-foreground\/70{background-color:color-mix(in oklab, var(--foreground) 70%, transparent)}}.bg-foreground\/\[0\.06\]{background-color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.bg-foreground\/\[0\.06\]{background-color:color-mix(in oklab, var(--foreground) 6%, transparent)}}.bg-info,.bg-info\/10{background-color:var(--info)}@supports (color:color-mix(in lab, red, red)){.bg-info\/10{background-color:color-mix(in oklab, var(--info) 10%, transparent)}}.bg-muted{background-color:var(--muted)}.bg-muted-foreground,.bg-muted-foreground\/15{background-color:var(--muted-foreground)}@supports (color:color-mix(in lab, red, red)){.bg-muted-foreground\/15{background-color:color-mix(in oklab, var(--muted-foreground) 15%, transparent)}}.bg-muted-foreground\/60{background-color:var(--muted-foreground)}@supports (color:color-mix(in lab, red, red)){.bg-muted-foreground\/60{background-color:color-mix(in oklab, var(--muted-foreground) 60%, transparent)}}.bg-muted\/40{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/40{background-color:color-mix(in oklab, var(--muted) 40%, transparent)}}.bg-muted\/60{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/60{background-color:color-mix(in oklab, var(--muted) 60%, transparent)}}.bg-muted\/70{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/70{background-color:color-mix(in oklab, var(--muted) 70%, transparent)}}.bg-primary{background-color:var(--primary)}.bg-recording,.bg-recording\/8{background-color:var(--recording)}@supports (color:color-mix(in lab, red, red)){.bg-recording\/8{background-color:color-mix(in oklab, var(--recording) 8%, transparent)}}.bg-recording\/80{background-color:var(--recording)}@supports (color:color-mix(in lab, red, red)){.bg-recording\/80{background-color:color-mix(in oklab, var(--recording) 80%, transparent)}}.bg-secondary{background-color:var(--secondary)}.bg-success,.bg-success\/10{background-color:var(--success)}@supports (color:color-mix(in lab, red, red)){.bg-success\/10{background-color:color-mix(in oklab, var(--success) 10%, transparent)}}.bg-surface{background-color:var(--surface)}.bg-surface-muted,.bg-surface-muted\/50{background-color:var(--surface-muted)}@supports (color:color-mix(in lab, red, red)){.bg-surface-muted\/50{background-color:color-mix(in oklab, var(--surface-muted) 50%, transparent)}}.bg-surface-muted\/55{background-color:var(--surface-muted)}@supports (color:color-mix(in lab, red, red)){.bg-surface-muted\/55{background-color:color-mix(in oklab, var(--surface-muted) 55%, transparent)}}.bg-surface-muted\/60{background-color:var(--surface-muted)}@supports (color:color-mix(in lab, red, red)){.bg-surface-muted\/60{background-color:color-mix(in oklab, var(--surface-muted) 60%, transparent)}}.bg-surface-raised{background-color:var(--surface-raised)}.bg-surface\/95{background-color:var(--surface)}@supports (color:color-mix(in lab, red, red)){.bg-surface\/95{background-color:color-mix(in oklab, var(--surface) 95%, transparent)}}.bg-transparent{background-color:#0000}.bg-warning,.bg-warning\/5{background-color:var(--warning)}@supports (color:color-mix(in lab, red, red)){.bg-warning\/5{background-color:color-mix(in oklab, var(--warning) 5%, transparent)}}.bg-warning\/10{background-color:var(--warning)}@supports (color:color-mix(in lab, red, red)){.bg-warning\/10{background-color:color-mix(in oklab, var(--warning) 10%, transparent)}}.fill-code{fill:var(--code)}.fill-current{fill:currentColor}.object-cover{object-fit:cover}.p-0{padding:0}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-1{padding:var(--spacing)}.p-1\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-3\.5{padding:calc(var(--spacing) * 3.5)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.p-16{padding:calc(var(--spacing) * 16)}.p-px{padding:1px}.px-0{padding-inline:0}.px-1{padding-inline:var(--spacing)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-3\.5{padding-inline:calc(var(--spacing) * 3.5)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-3\.5{padding-block:calc(var(--spacing) * 3.5)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-10{padding-block:calc(var(--spacing) * 10)}.py-12{padding-block:calc(var(--spacing) * 12)}.ps-3{padding-inline-start:calc(var(--spacing) * 3)}.pe-1{padding-inline-end:var(--spacing)}.pe-2{padding-inline-end:calc(var(--spacing) * 2)}.pe-3{padding-inline-end:calc(var(--spacing) * 3)}.pt-0{padding-top:0}.pt-0\.5{padding-top:calc(var(--spacing) * .5)}.pt-1{padding-top:var(--spacing)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-5{padding-top:calc(var(--spacing) * 5)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pt-\[env\(safe-area-inset-top\)\]{padding-top:env(safe-area-inset-top)}.pr-1{padding-right:var(--spacing)}.pr-2{padding-right:calc(var(--spacing) * 2)}.pr-7{padding-right:calc(var(--spacing) * 7)}.pr-8{padding-right:calc(var(--spacing) * 8)}.pr-9{padding-right:calc(var(--spacing) * 9)}.pr-10{padding-right:calc(var(--spacing) * 10)}.pr-12{padding-right:calc(var(--spacing) * 12)}.pr-\[env\(safe-area-inset-right\)\]{padding-right:env(safe-area-inset-right)}.pb-0\.5{padding-bottom:calc(var(--spacing) * .5)}.pb-1{padding-bottom:var(--spacing)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-5{padding-bottom:calc(var(--spacing) * 5)}.pb-6{padding-bottom:calc(var(--spacing) * 6)}.pb-16{padding-bottom:calc(var(--spacing) * 16)}.pb-\[env\(safe-area-inset-bottom\)\]{padding-bottom:env(safe-area-inset-bottom)}.pl-2{padding-left:calc(var(--spacing) * 2)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-5{padding-left:calc(var(--spacing) * 5)}.pl-7{padding-left:calc(var(--spacing) * 7)}.pl-8{padding-left:calc(var(--spacing) * 8)}.pl-\[env\(safe-area-inset-left\)\]{padding-left:env(safe-area-inset-left)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-baseline{vertical-align:baseline}.align-middle{vertical-align:middle}.font-mono{font-family:JetBrains Mono,SFMono-Regular,Consolas,Liberation Mono,monospace}.font-sans{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-7xl{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[0\.85em\]{font-size:.85em}.text-\[10px\]{font-size:10px}.text-\[11\.5px\]{font-size:11.5px}.text-\[11px\]{font-size:11px}.text-\[12\.5px\]{font-size:12.5px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.leading-4{--tw-leading:calc(var(--spacing) * 4);line-height:calc(var(--spacing) * 4)}.leading-5{--tw-leading:calc(var(--spacing) * 5);line-height:calc(var(--spacing) * 5)}.leading-6{--tw-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)}.leading-7{--tw-leading:calc(var(--spacing) * 7);line-height:calc(var(--spacing) * 7)}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[-0\.01em\]{--tw-tracking:-.01em;letter-spacing:-.01em}.tracking-\[-0\.02em\]{--tw-tracking:-.02em;letter-spacing:-.02em}.tracking-\[-0\.015em\]{--tw-tracking:-.015em;letter-spacing:-.015em}.tracking-\[-0\.025em\]{--tw-tracking:-.025em;letter-spacing:-.025em}.tracking-\[-0\.035em\]{--tw-tracking:-.035em;letter-spacing:-.035em}.tracking-\[0\.06em\]{--tw-tracking:.06em;letter-spacing:.06em}.tracking-\[0\.08em\]{--tw-tracking:.08em;letter-spacing:.08em}.tracking-\[0\.12em\]{--tw-tracking:.12em;letter-spacing:.12em}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.text-balance{text-wrap:balance}.\[overflow-wrap\:anywhere\]{overflow-wrap:anywhere}.break-words{overflow-wrap:break-word}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.text-accent-foreground{color:var(--accent-foreground)}.text-brand{color:var(--brand)}.text-brand-soft-foreground{color:var(--brand-soft-foreground)}.text-card-foreground{color:var(--card-foreground)}.text-code-foreground,.text-code-foreground\/60{color:var(--code-foreground)}@supports (color:color-mix(in lab, red, red)){.text-code-foreground\/60{color:color-mix(in oklab, var(--code-foreground) 60%, transparent)}}.text-code-foreground\/80{color:var(--code-foreground)}@supports (color:color-mix(in lab, red, red)){.text-code-foreground\/80{color:color-mix(in oklab, var(--code-foreground) 80%, transparent)}}.text-current{color:currentColor}.text-destructive{color:var(--destructive)}.text-destructive-foreground{color:var(--destructive-foreground)}.text-foreground,.text-foreground\/80{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/80{color:color-mix(in oklab, var(--foreground) 80%, transparent)}}.text-info{color:var(--info)}.text-muted-foreground{color:var(--muted-foreground)}.text-popover-foreground{color:var(--popover-foreground)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-recording-foreground{color:var(--recording-foreground)}.text-secondary-foreground{color:var(--secondary-foreground)}.text-success{color:var(--success)}.text-warning{color:var(--warning)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.italic{font-style:italic}.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,)}.line-through{text-decoration-line:line-through}.overline{text-decoration-line:overline}.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.accent-foreground{accent-color:var(--foreground)}.opacity-0{opacity:0}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-100{opacity:1}.shadow{--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)}.shadow-\[0_0_0_9999px_rgb\(10_8_14\/0\.45\)\]{--tw-shadow:0 0 0 9999px var(--tw-shadow-color,#0a080e73);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_16px_48px_rgb\(0_0_0_\/_0\.18\)\]{--tw-shadow:0 16px 48px var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_24px_80px_rgb\(0_0_0_\/_0\.28\)\]{--tw-shadow:0 24px 80px var(--tw-shadow-color,#00000047);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[inset_2px_0_0_var\(--color-brand\)\]{--tw-shadow:inset 2px 0 0 var(--tw-shadow-color,var(--color-brand));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 10px 30px var(--tw-shadow-color,#0a080e1a), 0 2px 8px var(--tw-shadow-color,#0a080e0f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px var(--tw-shadow-color,#0a080e14), 0 1px 2px var(--tw-shadow-color,#0a080e0d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px var(--tw-shadow-color,#0a080e0d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-0{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--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)}.inset-ring-1{--tw-inset-ring-shadow:inset 0 0 0 1px var(--tw-inset-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-brand{--tw-ring-color:var(--brand)}.ring-current\/10{--tw-ring-color:currentcolor}@supports (color:color-mix(in lab, red, red)){.ring-current\/10{--tw-ring-color:color-mix(in oklab, currentcolor 10%, transparent)}}.ring-surface{--tw-ring-color:var(--surface)}.inset-ring-ring{--tw-inset-ring-color:var(--ring)}.outline-hidden{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.outline-hidden{outline-offset:2px;outline:2px solid #0000}}.outline-hidden\!{--tw-outline-style:none!important;outline-style:none!important}@media (forced-colors:active){.outline-hidden\!{outline-offset:2px!important;outline:2px solid #0000!important}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-\[3px\]{--tw-backdrop-blur:blur(3px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-md{--tw-backdrop-blur:blur(var(--blur-md));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-xl{--tw-backdrop-blur:blur(var(--blur-xl));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition-\[background-color\,border-color\,color\,box-shadow\,transform\]{transition-property:background-color,border-color,color,box-shadow,transform;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[background-color\,color\,box-shadow\]{transition-property:background-color,color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[border-color\,background-color\,box-shadow\,transform\]{transition-property:border-color,background-color,box-shadow,transform;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[border-color\,box-shadow\,background-color\]{transition-property:border-color,box-shadow,background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[border-color\,box-shadow\]{transition-property:border-color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[color\,box-shadow\]{transition-property:color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[height\]{transition-property:height;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[width\,height\]{transition-property:width,height;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.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(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-\[var\(--duration-fast\)\]{--tw-duration:var(--duration-fast);transition-duration:var(--duration-fast)}.ease-\[var\(--ease-standard\)\]{--tw-ease:var(--ease-standard);transition-timing-function:var(--ease-standard)}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-all{-webkit-user-select:all;user-select:all}.select-none{-webkit-user-select:none;user-select:none}.\[--bl-scale\:0\.95\]{--bl-scale:.95}.\[--bl-scale\:0\.98\]{--bl-scale:.98}.\[--bl-scale\:1\]{--bl-scale:1}.\[--bl-sheet-x\:-100\%\]{--bl-sheet-x:-100%}.\[--bl-sheet-x\:0\]{--bl-sheet-x:0}.\[--bl-sheet-x\:100\%\]{--bl-sheet-x:100%}.\[--bl-sheet-y\:-100\%\]{--bl-sheet-y:-100%}.\[--bl-sheet-y\:100\%\]{--bl-sheet-y:100%}.\[--bl-ty\:-6px\]{--bl-ty:-6px}.\[--bl-ty\:8px\]{--bl-ty:8px}.\[--bl-ty\:12px\]{--bl-ty:12px}.\[-webkit-tap-highlight-color\:transparent\]{-webkit-tap-highlight-color:transparent}.group-focus-within\/message\:opacity-100:is(:where(.group\/message):focus-within *),.group-focus-within\/tab\:opacity-100:is(:where(.group\/tab):focus-within *){opacity:1}@media (hover:hover){.group-hover\/message\:opacity-100:is(:where(.group\/message):hover *),.group-hover\/row\:opacity-100:is(:where(.group\/row):hover *){opacity:1}.group-hover\/tab\:block:is(:where(.group\/tab):hover *){display:block}.group-hover\/tab\:hidden:is(:where(.group\/tab):hover *){display:none}.group-hover\/tab\:opacity-100:is(:where(.group\/tab):hover *),.group-hover\/tree\:opacity-100:is(:where(.group\/tree):hover *){opacity:1}}.group-has-\[\>svg\]\/alert\:col-start-2:is(:where(.group\/alert):has(>svg) *){grid-column-start:2}.group-aria-\[orientation\=horizontal\]\/handle\:h-2:is(:where(.group\/handle)[aria-orientation=horizontal] *){height:calc(var(--spacing) * 2)}.group-aria-\[orientation\=horizontal\]\/handle\:h-px:is(:where(.group\/handle)[aria-orientation=horizontal] *){height:1px}.group-aria-\[orientation\=horizontal\]\/handle\:w-3:is(:where(.group\/handle)[aria-orientation=horizontal] *){width:calc(var(--spacing) * 3)}.group-aria-\[orientation\=horizontal\]\/handle\:w-6:is(:where(.group\/handle)[aria-orientation=horizontal] *){width:calc(var(--spacing) * 6)}.group-aria-\[orientation\=vertical\]\/handle\:h-3:is(:where(.group\/handle)[aria-orientation=vertical] *){height:calc(var(--spacing) * 3)}.group-aria-\[orientation\=vertical\]\/handle\:h-6:is(:where(.group\/handle)[aria-orientation=vertical] *){height:calc(var(--spacing) * 6)}.group-aria-\[orientation\=vertical\]\/handle\:w-2:is(:where(.group\/handle)[aria-orientation=vertical] *){width:calc(var(--spacing) * 2)}.group-aria-\[orientation\=vertical\]\/handle\:w-px:is(:where(.group\/handle)[aria-orientation=vertical] *){width:1px}.group-data-\[density\=compact\]\/table\:h-8:is(:where(.group\/table)[data-density=compact] *){height:calc(var(--spacing) * 8)}.group-data-\[density\=compact\]\/tree\:h-6:is(:where(.group\/tree)[data-density=compact] *){height:calc(var(--spacing) * 6)}.group-data-\[disabled\=true\]\:pointer-events-none:is(:where(.group)[data-disabled=true] *){pointer-events:none}.group-data-\[disabled\=true\]\:opacity-50:is(:where(.group)[data-disabled=true] *){opacity:.5}.group-data-\[state\=active\]\/tab\:opacity-100:is(:where(.group\/tab)[data-state=active] *){opacity:1}.group-data-\[state\=indeterminate\]\/indicator\:block:is(:where(.group\/indicator)[data-state=indeterminate] *){display:block}.group-data-\[state\=indeterminate\]\/indicator\:hidden:is(:where(.group\/indicator)[data-state=indeterminate] *){display:none}.group-data-\[state\=open\]\:rotate-180:is(:where(.group)[data-state=open] *){rotate:180deg}.group-data-\[state\=open\]\/reasoning\:rotate-90:is(:where(.group\/reasoning)[data-state=open] *),.group-data-\[state\=open\]\/tool\:rotate-90:is(:where(.group\/tool)[data-state=open] *){rotate:90deg}.group-data-\[sticky\]\/table\:sticky:is(:where(.group\/table)[data-sticky] *){position:sticky}.group-data-\[sticky\]\/table\:top-0:is(:where(.group\/table)[data-sticky] *){top:0}.group-data-\[sticky\]\/table\:z-10:is(:where(.group\/table)[data-sticky] *){z-index:10}.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\:opacity-50:is(:where(.peer):disabled~*){opacity:.5}.file\:mr-3::file-selector-button{margin-right:calc(var(--spacing) * 3)}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:text-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.file\:font-semibold::file-selector-button{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.file\:text-foreground::file-selector-button{color:var(--foreground)}.placeholder\:text-muted-foreground::placeholder,.placeholder\:text-muted-foreground\/80::placeholder{color:var(--muted-foreground)}@supports (color:color-mix(in lab, red, red)){.placeholder\:text-muted-foreground\/80::placeholder{color:color-mix(in oklab, var(--muted-foreground) 80%, transparent)}}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:inset-0:after{content:var(--tw-content);inset:0}.after\:rounded-lg:after{content:var(--tw-content);border-radius:.75rem}.after\:content-\[\"\"\]:after{--tw-content:"";content:var(--tw-content)}.first\:mt-0:first-child{margin-top:0}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}@media (hover:hover){.hover\:-translate-y-0\.5:hover{--tw-translate-y:calc(var(--spacing) * -.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:border-border-strong:hover{border-color:var(--border-strong)}.hover\:border-brand\/30:hover{border-color:var(--brand)}@supports (color:color-mix(in lab, red, red)){.hover\:border-brand\/30:hover{border-color:color-mix(in oklab, var(--brand) 30%, transparent)}}.hover\:border-brand\/35:hover{border-color:var(--brand)}@supports (color:color-mix(in lab, red, red)){.hover\:border-brand\/35:hover{border-color:color-mix(in oklab, var(--brand) 35%, transparent)}}.hover\:border-brand\/40:hover{border-color:var(--brand)}@supports (color:color-mix(in lab, red, red)){.hover\:border-brand\/40:hover{border-color:color-mix(in oklab, var(--brand) 40%, transparent)}}.hover\:border-brand\/50:hover{border-color:var(--brand)}@supports (color:color-mix(in lab, red, red)){.hover\:border-brand\/50:hover{border-color:color-mix(in oklab, var(--brand) 50%, transparent)}}.hover\:bg-accent:hover,.hover\:bg-accent\/60:hover{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-accent\/60:hover{background-color:color-mix(in oklab, var(--accent) 60%, transparent)}}.hover\:bg-background:hover{background-color:var(--background)}.hover\:bg-brand-soft:hover{background-color:var(--brand-soft)}.hover\:bg-brand\/15:hover{background-color:var(--brand)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-brand\/15:hover{background-color:color-mix(in oklab, var(--brand) 15%, transparent)}}.hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab, var(--destructive) 90%, transparent)}}.hover\:bg-muted:hover,.hover\:bg-muted\/40:hover{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/40:hover{background-color:color-mix(in oklab, var(--muted) 40%, transparent)}}.hover\:bg-muted\/60:hover{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/60:hover{background-color:color-mix(in oklab, var(--muted) 60%, transparent)}}.hover\:bg-muted\/70:hover{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/70:hover{background-color:color-mix(in oklab, var(--muted) 70%, transparent)}}.hover\:bg-recording\/90:hover{background-color:var(--recording)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-recording\/90:hover{background-color:color-mix(in oklab, var(--recording) 90%, transparent)}}.hover\:bg-transparent:hover{background-color:#0000}.hover\:bg-white\/10:hover{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/10:hover{background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.hover\:text-brand:hover{color:var(--brand)}.hover\:text-brand-hover:hover{color:var(--brand-hover)}.hover\:text-brand-soft-foreground:hover{color:var(--brand-soft-foreground)}.hover\:text-code-foreground:hover{color:var(--code-foreground)}.hover\:text-foreground:hover{color:var(--foreground)}.hover\:underline:hover{text-decoration-line:underline}.hover\:underline-offset-4:hover{text-underline-offset:4px}.hover\:shadow-md:hover{--tw-shadow:0 10px 30px var(--tw-shadow-color,#0a080e1a), 0 2px 8px var(--tw-shadow-color,#0a080e0f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:brightness-90:hover{--tw-brightness:brightness(90%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}.focus\:not-sr-only:focus{clip-path:none;white-space:normal;width:auto;height:auto;margin:0;padding:0;position:static;overflow:visible}.focus\:fixed:focus{position:fixed}.focus\:top-2:focus{top:calc(var(--spacing) * 2)}.focus\:left-2:focus{left:calc(var(--spacing) * 2)}.focus\:z-50:focus{z-index:50}.focus\:rounded-md:focus{border-radius:.625rem}.focus\:bg-background:focus{background-color:var(--background)}.focus\:bg-secondary:focus{background-color:var(--secondary)}.focus\:px-3:focus{padding-inline:calc(var(--spacing) * 3)}.focus\:py-2:focus{padding-block:calc(var(--spacing) * 2)}.focus\:text-foreground:focus{color:var(--foreground)}.focus-visible\:border-ring:focus-visible{border-color:var(--ring)}.focus-visible\:bg-muted\/60:focus-visible{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:bg-muted\/60:focus-visible{background-color:color-mix(in oklab, var(--muted) 60%, transparent)}}.focus-visible\:underline:focus-visible{text-decoration-line:underline}.focus-visible\:opacity-100:focus-visible{opacity:1}.focus-visible\:shadow-\[inset_0_0_0_1px_var\(--ring\)\]:focus-visible{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--ring));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:shadow-\[inset_2px_0_0_var\(--ring\)\]:focus-visible{--tw-shadow:inset 2px 0 0 var(--tw-shadow-color,var(--ring));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-0:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-\[3px\]:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:inset-ring-1:focus-visible{--tw-inset-ring-shadow:inset 0 0 0 1px var(--tw-inset-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-ring\/20:focus-visible{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-ring\/20:focus-visible{--tw-ring-color:color-mix(in oklab, var(--ring) 20%, transparent)}}.focus-visible\:ring-ring\/25:focus-visible{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-ring\/25:focus-visible{--tw-ring-color:color-mix(in oklab, var(--ring) 25%, transparent)}}.focus-visible\:ring-ring\/30:focus-visible{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-ring\/30:focus-visible{--tw-ring-color:color-mix(in oklab, var(--ring) 30%, transparent)}}.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:color-mix(in oklab, var(--ring) 50%, transparent)}}.focus-visible\:inset-ring-ring:focus-visible{--tw-inset-ring-color:var(--ring)}.focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-ring:focus-visible{outline-color:var(--ring)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-inset:focus-visible{--tw-ring-inset:inset}.active\:translate-y-0:active{--tw-translate-y:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.active\:translate-y-px:active{--tw-translate-y:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-default:disabled{cursor:default}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-muted:disabled{background-color:var(--muted)}.disabled\:opacity-45:disabled{opacity:.45}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-60:disabled{opacity:.6}@media (hover:hover){.disabled\:hover\:bg-transparent:disabled:hover{background-color:#0000}}.has-\[\:disabled\]\:cursor-not-allowed:has(:disabled){cursor:not-allowed}.has-\[\:disabled\]\:opacity-60:has(:disabled){opacity:.6}@media (hover:hover){.has-\[\:disabled\]\:hover\:border-border:has(:disabled):hover{border-color:var(--border)}}.has-\[\:focus-visible\]\:border-ring:has(:focus-visible){border-color:var(--ring)}.has-\[\:focus-visible\]\:inset-ring-1:has(:focus-visible){--tw-inset-ring-shadow:inset 0 0 0 1px var(--tw-inset-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)}.has-\[\:focus-visible\]\:inset-ring-ring:has(:focus-visible){--tw-inset-ring-color:var(--ring)}.has-\[\[cmdk-input\]\:focus-visible\]\:border-ring:has([cmdk-input]:focus-visible),.has-\[\[data-row-action\]\:focus-visible\]\:border-ring:has([data-row-action]:focus-visible){border-color:var(--ring)}.has-\[\[data-row-action\]\:focus-visible\]\:inset-ring-1:has([data-row-action]:focus-visible){--tw-inset-ring-shadow:inset 0 0 0 1px var(--tw-inset-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)}.has-\[\[data-row-action\]\:focus-visible\]\:inset-ring-ring:has([data-row-action]:focus-visible){--tw-inset-ring-color:var(--ring)}.has-\[\[data-state\=checked\]\]\:border-brand\/40:has([data-state=checked]){border-color:var(--brand)}@supports (color:color-mix(in lab, red, red)){.has-\[\[data-state\=checked\]\]\:border-brand\/40:has([data-state=checked]){border-color:color-mix(in oklab, var(--brand) 40%, transparent)}}.has-\[\[data-state\=checked\]\]\:bg-brand-soft\/50:has([data-state=checked]){background-color:var(--brand-soft)}@supports (color:color-mix(in lab, red, red)){.has-\[\[data-state\=checked\]\]\:bg-brand-soft\/50:has([data-state=checked]){background-color:color-mix(in oklab, var(--brand-soft) 50%, transparent)}}.has-\[textarea\:focus-visible\]\:border-ring:has(:is(textarea:focus-visible)){border-color:var(--ring)}.has-\[textarea\:focus-visible\]\:inset-ring-1:has(:is(textarea:focus-visible)){--tw-inset-ring-shadow:inset 0 0 0 1px var(--tw-inset-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)}.has-\[textarea\:focus-visible\]\:inset-ring-ring:has(:is(textarea:focus-visible)){--tw-inset-ring-color:var(--ring)}.has-\[\>svg\]\:grid-cols-\[auto_1fr\]:has(>svg){grid-template-columns:auto 1fr}.aria-disabled\:opacity-50[aria-disabled=true]{opacity:.5}.aria-invalid\:border-destructive[aria-invalid=true]{border-color:var(--destructive)}.aria-invalid\:focus-visible\:inset-ring-destructive[aria-invalid=true]:focus-visible{--tw-inset-ring-color:var(--destructive)}.aria-\[orientation\=horizontal\]\:h-px[aria-orientation=horizontal]{height:1px}.aria-\[orientation\=horizontal\]\:after\:inset-x-0[aria-orientation=horizontal]:after{content:var(--tw-content);inset-inline:0}.aria-\[orientation\=horizontal\]\:after\:-inset-y-1[aria-orientation=horizontal]:after{content:var(--tw-content);inset-block:calc(var(--spacing) * -1)}.aria-\[orientation\=vertical\]\:w-px[aria-orientation=vertical]{width:1px}.aria-\[orientation\=vertical\]\:after\:-inset-x-1[aria-orientation=vertical]:after{content:var(--tw-content);inset-inline:calc(var(--spacing) * -1)}.aria-\[orientation\=vertical\]\:after\:inset-y-0[aria-orientation=vertical]:after{content:var(--tw-content);inset-block:0}.data-\[active\]\:text-foreground[data-active]{color:var(--foreground)}.data-\[active\=true\]\:bg-muted[data-active=true]{background-color:var(--muted)}.data-\[active\=true\]\:shadow-\[inset_2px_0_0_var\(--color-brand\)\][data-active=true]{--tw-shadow:inset 2px 0 0 var(--tw-shadow-color,var(--color-brand));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.data-\[disabled\]\:pointer-events-none[data-disabled]{pointer-events:none}.data-\[disabled\]\:opacity-50[data-disabled]{opacity:.5}.data-\[disabled\=true\]\:pointer-events-none[data-disabled=true]{pointer-events:none}.data-\[disabled\=true\]\:opacity-50[data-disabled=true]{opacity:.5}.data-\[dragging\]\:border-brand[data-dragging]{border-color:var(--brand)}.data-\[dragging\]\:opacity-50[data-dragging]{opacity:.5}.data-\[dragging\]\:inset-ring-1[data-dragging]{--tw-inset-ring-shadow:inset 0 0 0 1px var(--tw-inset-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)}.data-\[dragging\]\:inset-ring-brand[data-dragging]{--tw-inset-ring-color:var(--brand)}.data-\[dragging\]\:select-none[data-dragging]{-webkit-user-select:none;user-select:none}.data-\[drop\=after\]\:shadow-\[inset_-2px_0_0_var\(--brand\)\][data-drop=after]{--tw-shadow:inset -2px 0 0 var(--tw-shadow-color,var(--brand));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.data-\[drop\=before\]\:shadow-\[inset_2px_0_0_var\(--brand\)\][data-drop=before]{--tw-shadow:inset 2px 0 0 var(--tw-shadow-color,var(--brand));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.data-\[fullscreen\]\:fixed[data-fullscreen]{position:fixed}.data-\[fullscreen\]\:inset-0[data-fullscreen]{inset:0}.data-\[fullscreen\]\:z-50[data-fullscreen]{z-index:50}.data-\[fullscreen\]\:h-dvh[data-fullscreen]{height:100dvh}.data-\[fullscreen\]\:w-screen[data-fullscreen]{width:100vw}.data-\[inset\]\:pl-8[data-inset]{padding-left:calc(var(--spacing) * 8)}.data-\[motion\=from-end\]\:\[--bl-tx\:24px\][data-motion=from-end]{--bl-tx:24px}.data-\[motion\=from-start\]\:\[--bl-tx\:-24px\][data-motion=from-start]{--bl-tx:-24px}.data-\[motion\=to-end\]\:\[--bl-tx\:24px\][data-motion=to-end]{--bl-tx:24px}.data-\[motion\=to-start\]\:\[--bl-tx\:-24px\][data-motion=to-start]{--bl-tx:-24px}.data-\[motion\^\=from-\]\:animate-in[data-motion^=from-]{animation:.2s cubic-bezier(.16,1,.3,1) bl-in}.data-\[motion\^\=to-\]\:animate-out[data-motion^=to-]{animation:.14s cubic-bezier(.4,0,1,1) forwards bl-out}.data-\[orientation\=horizontal\]\:h-px[data-orientation=horizontal]{height:1px}.data-\[orientation\=horizontal\]\:w-full[data-orientation=horizontal]{width:100%}.data-\[orientation\=vertical\]\:h-full[data-orientation=vertical]{height:100%}.data-\[orientation\=vertical\]\:w-px[data-orientation=vertical]{width:1px}.data-\[orientation\=vertical\]\:flex-col[data-orientation=vertical]{flex-direction:column}.data-\[placeholder\]\:text-muted-foreground[data-placeholder]{color:var(--muted-foreground)}.data-\[selected\=true\]\:bg-secondary[data-selected=true]{background-color:var(--secondary)}.data-\[selected\=true\]\:text-foreground[data-selected=true]{color:var(--foreground)}.data-\[separator\=active\]\:bg-brand[data-separator=active]{background-color:var(--brand)}.data-\[separator\=disabled\]\:opacity-50[data-separator=disabled]{opacity:.5}.data-\[separator\=focus\]\:bg-ring[data-separator=focus]{background-color:var(--ring)}.data-\[separator\=focus\]\:shadow-\[0_0_0_1px_var\(--ring\)\][data-separator=focus]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,var(--ring));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.data-\[separator\=hover\]\:bg-border-strong[data-separator=hover]{background-color:var(--border-strong)}.data-\[side\=bottom\]\:translate-y-1[data-side=bottom]{--tw-translate-y:var(--spacing);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[side\=bottom\]\:\[--bl-ty\:-4px\][data-side=bottom]{--bl-ty:-4px}.data-\[side\=bottom\]\:\[--bl-ty\:-6px\][data-side=bottom]{--bl-ty:-6px}.data-\[side\=left\]\:-translate-x-1[data-side=left]{--tw-translate-x:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[side\=left\]\:\[--bl-tx\:4px\][data-side=left]{--bl-tx:4px}.data-\[side\=left\]\:\[--bl-tx\:6px\][data-side=left]{--bl-tx:6px}.data-\[side\=right\]\:translate-x-1[data-side=right]{--tw-translate-x:var(--spacing);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[side\=right\]\:\[--bl-tx\:-4px\][data-side=right]{--bl-tx:-4px}.data-\[side\=right\]\:\[--bl-tx\:-6px\][data-side=right]{--bl-tx:-6px}.data-\[side\=top\]\:-translate-y-1[data-side=top]{--tw-translate-y:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[side\=top\]\:\[--bl-ty\:4px\][data-side=top]{--bl-ty:4px}.data-\[side\=top\]\:\[--bl-ty\:6px\][data-side=top]{--bl-ty:6px}:is(.\*\:data-\[slot\=select-value\]\:line-clamp-1>*)[data-slot=select-value]{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}:is(.\*\:data-\[slot\=select-value\]\:flex>*)[data-slot=select-value]{display:flex}:is(.\*\:data-\[slot\=select-value\]\:items-center>*)[data-slot=select-value]{align-items:center}:is(.\*\:data-\[slot\=select-value\]\:gap-2>*)[data-slot=select-value]{gap:calc(var(--spacing) * 2)}.data-\[state\=active\]\:animate-fade-in[data-state=active]{animation:.2s ease-out bl-fade-in}.data-\[state\=active\]\:bg-background[data-state=active]{background-color:var(--background)}.data-\[state\=active\]\:bg-surface[data-state=active]{background-color:var(--surface)}.data-\[state\=active\]\:text-foreground[data-state=active]{color:var(--foreground)}.data-\[state\=active\]\:shadow-xs[data-state=active]{--tw-shadow:0 1px 2px var(--tw-shadow-color,#0a080e0d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.data-\[state\=active\]\:before\:absolute[data-state=active]:before{content:var(--tw-content);position:absolute}.data-\[state\=active\]\:before\:inset-x-0[data-state=active]:before{content:var(--tw-content);inset-inline:0}.data-\[state\=active\]\:before\:top-0[data-state=active]:before{content:var(--tw-content);top:0}.data-\[state\=active\]\:before\:h-0\.5[data-state=active]:before{content:var(--tw-content);height:calc(var(--spacing) * .5)}.data-\[state\=active\]\:before\:bg-brand[data-state=active]:before{content:var(--tw-content);background-color:var(--brand)}.data-\[state\=active\]\:before\:content-\[\"\"\][data-state=active]:before{--tw-content:"";content:var(--tw-content)}.data-\[state\=checked\]\:translate-x-\[calc\(100\%-1px\)\][data-state=checked]{--tw-translate-x:calc(100% - 1px);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[state\=checked\]\:border-primary[data-state=checked]{border-color:var(--primary)}.data-\[state\=checked\]\:bg-primary[data-state=checked]{background-color:var(--primary)}.data-\[state\=checked\]\:font-semibold[data-state=checked]{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.data-\[state\=checked\]\:text-primary-foreground[data-state=checked]{color:var(--primary-foreground)}.data-\[state\=closed\]\:animate-accordion-up[data-state=closed]{animation:.16s ease-out bl-accordion-up}.data-\[state\=closed\]\:animate-collapsible-up[data-state=closed]{animation:.16s ease-out bl-collapsible-up}.data-\[state\=closed\]\:animate-fade-out[data-state=closed]{animation:.15s ease-in forwards bl-fade-out}.data-\[state\=closed\]\:animate-out[data-state=closed]{animation:.14s cubic-bezier(.4,0,1,1) forwards bl-out}.data-\[state\=closed\]\:animate-sheet-out[data-state=closed]{animation:.22s cubic-bezier(.4,0,1,1) forwards bl-sheet-out}.data-\[state\=hidden\]\:animate-out[data-state=hidden]{animation:.14s cubic-bezier(.4,0,1,1) forwards bl-out}.data-\[state\=open\]\:animate-accordion-down[data-state=open]{animation:.2s cubic-bezier(.16,1,.3,1) bl-accordion-down}.data-\[state\=open\]\:animate-collapsible-down[data-state=open]{animation:.2s cubic-bezier(.16,1,.3,1) bl-collapsible-down}.data-\[state\=open\]\:animate-fade-in[data-state=open]{animation:.2s ease-out bl-fade-in}.data-\[state\=open\]\:animate-in[data-state=open]{animation:.2s cubic-bezier(.16,1,.3,1) bl-in}.data-\[state\=open\]\:animate-sheet-in[data-state=open]{animation:.34s cubic-bezier(.32,.72,0,1) bl-sheet-in}.data-\[state\=open\]\:border-brand[data-state=open]{border-color:var(--brand)}.data-\[state\=open\]\:bg-muted[data-state=open]{background-color:var(--muted)}.data-\[state\=open\]\:bg-secondary[data-state=open]{background-color:var(--secondary)}.data-\[state\=open\]\:text-foreground[data-state=open]{color:var(--foreground)}.data-\[state\=open\]\:opacity-100[data-state=open]{opacity:1}.data-\[state\=selected\]\:border-brand\/40[data-state=selected]{border-color:var(--brand)}@supports (color:color-mix(in lab, red, red)){.data-\[state\=selected\]\:border-brand\/40[data-state=selected]{border-color:color-mix(in oklab, var(--brand) 40%, transparent)}}.data-\[state\=selected\]\:bg-brand-soft\/60[data-state=selected]{background-color:var(--brand-soft)}@supports (color:color-mix(in lab, red, red)){.data-\[state\=selected\]\:bg-brand-soft\/60[data-state=selected]{background-color:color-mix(in oklab, var(--brand-soft) 60%, transparent)}}.data-\[state\=selected\]\:bg-brand-soft\/70[data-state=selected]{background-color:var(--brand-soft)}@supports (color:color-mix(in lab, red, red)){.data-\[state\=selected\]\:bg-brand-soft\/70[data-state=selected]{background-color:color-mix(in oklab, var(--brand-soft) 70%, transparent)}}.data-\[state\=selected\]\:text-foreground[data-state=selected]{color:var(--foreground)}.data-\[state\=selected\]\:shadow-\[inset_2px_0_0_var\(--color-brand\)\][data-state=selected]{--tw-shadow:inset 2px 0 0 var(--tw-shadow-color,var(--color-brand));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.data-\[state\=unchecked\]\:translate-x-px[data-state=unchecked]{--tw-translate-x:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[state\=unchecked\]\:bg-border-strong[data-state=unchecked]{background-color:var(--border-strong)}.data-\[state\=visible\]\:animate-in[data-state=visible]{animation:.2s cubic-bezier(.16,1,.3,1) bl-in}.data-\[swipe\=cancel\]\:translate-x-0[data-swipe=cancel]{--tw-translate-x:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[swipe\=end\]\:translate-x-\(--radix-toast-swipe-end-x\)[data-swipe=end]{--tw-translate-x:var(--radix-toast-swipe-end-x);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[swipe\=move\]\:translate-x-\(--radix-toast-swipe-move-x\)[data-swipe=move]{--tw-translate-x:var(--radix-toast-swipe-move-x);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[swipe\=move\]\:transition-none[data-swipe=move]{transition-property:none}.data-\[variant\=destructive\]\:text-destructive[data-variant=destructive]{color:var(--destructive)}.data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant=destructive]:focus{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant=destructive]:focus{background-color:color-mix(in oklab, var(--destructive) 10%, transparent)}}@supports ((-webkit-backdrop-filter:var(--tw)) or (backdrop-filter:var(--tw))){.supports-\[backdrop-filter\]\:bg-surface\/80{background-color:var(--surface)}@supports (color:color-mix(in lab, red, red)){.supports-\[backdrop-filter\]\:bg-surface\/80{background-color:color-mix(in oklab, var(--surface) 80%, transparent)}}}@media (prefers-reduced-motion:no-preference){.motion-safe\:animate-pulse{animation:var(--animate-pulse)}.motion-safe\:transition-\[top\,left\,width\,height\]{transition-property:top,left,width,height;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.motion-safe\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.motion-safe\:duration-200{--tw-duration:.2s;transition-duration:.2s}}@media (prefers-reduced-motion:reduce){.motion-reduce\:hidden{display:none}.motion-reduce\:animate-none{animation:none}}@media not all and (min-width:64rem){.max-lg\:col-span-2{grid-column:span 2/span 2}.max-lg\:block{display:block}.max-lg\:flex{display:flex}.max-lg\:grid{display:grid}.max-lg\:hidden{display:none}.max-lg\:grid-cols-\[minmax\(0\,1fr\)_auto\]{grid-template-columns:minmax(0,1fr) auto}.max-lg\:items-baseline{align-items:baseline}.max-lg\:gap-x-3{column-gap:calc(var(--spacing) * 3)}.max-lg\:gap-y-2{row-gap:calc(var(--spacing) * 2)}.max-lg\:pt-0{padding-top:0}}@media not all and (min-width:48rem){.max-md\:col-span-2{grid-column:span 2/span 2}.max-md\:block{display:block}.max-md\:flex{display:flex}.max-md\:grid{display:grid}.max-md\:hidden{display:none}.max-md\:grid-cols-\[minmax\(0\,1fr\)_auto\]{grid-template-columns:minmax(0,1fr) auto}.max-md\:items-baseline{align-items:baseline}.max-md\:gap-x-3{column-gap:calc(var(--spacing) * 3)}.max-md\:gap-y-2{row-gap:calc(var(--spacing) * 2)}.max-md\:pt-0{padding-top:0}.max-md\:opacity-100{opacity:1}}@media not all and (min-width:40rem){.max-sm\:top-3{top:calc(var(--spacing) * 3)}.max-sm\:top-auto{top:auto}.max-sm\:right-3{right:calc(var(--spacing) * 3)}.max-sm\:bottom-0{bottom:0}.max-sm\:left-0{left:0}.max-sm\:order-1{order:1}.max-sm\:order-2{order:2}.max-sm\:order-3{order:3}.max-sm\:col-span-2{grid-column:span 2/span 2}.max-sm\:block{display:block}.max-sm\:flex{display:flex}.max-sm\:grid{display:grid}.max-sm\:hidden{display:none}.max-sm\:size-11{width:calc(var(--spacing) * 11);height:calc(var(--spacing) * 11)}.max-sm\:h-11{height:calc(var(--spacing) * 11)}.max-sm\:max-h-\[92dvh\]{max-height:92dvh}.max-sm\:w-full{width:100%}.max-sm\:max-w-none{max-width:none}.max-sm\:translate-x-0{--tw-translate-x:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.max-sm\:translate-y-0{--tw-translate-y:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.max-sm\:grid-cols-\[minmax\(0\,1fr\)_auto\]{grid-template-columns:minmax(0,1fr) auto}.max-sm\:items-baseline{align-items:baseline}.max-sm\:justify-between{justify-content:space-between}.max-sm\:gap-x-3{column-gap:calc(var(--spacing) * 3)}.max-sm\:gap-y-2{row-gap:calc(var(--spacing) * 2)}.max-sm\:rounded-b-none{border-bottom-right-radius:0;border-bottom-left-radius:0}.max-sm\:border{border-style:var(--tw-border-style);border-width:1px}.max-sm\:border-x-0{border-inline-style:var(--tw-border-style);border-inline-width:0}.max-sm\:border-b-0{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.max-sm\:border-border{border-color:var(--border)}.max-sm\:px-0{padding-inline:0}.max-sm\:pt-0{padding-top:0}.max-sm\:pb-\[max\(1\.25rem\,env\(safe-area-inset-bottom\)\)\]{padding-bottom:max(1.25rem, env(safe-area-inset-bottom))}.max-sm\:\[--bl-scale\:1\]{--bl-scale:1}.max-sm\:\[--bl-ty\:100\%\]{--bl-ty:100%}}@media (min-width:40rem){.sm\:block{display:block}.sm\:hidden{display:none}.sm\:inline{display:inline}.sm\:inline-flex{display:inline-flex}.sm\:table-cell{display:table-cell}.sm\:min-h-9{min-height:calc(var(--spacing) * 9)}.sm\:max-w-sm{max-width:var(--container-sm)}.sm\:max-w-xl{max-width:var(--container-xl)}.sm\:max-w-xs{max-width:var(--container-xs)}.sm\:flex-1{flex:1}.sm\:basis-0{flex-basis:0}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-end{align-items:flex-end}.sm\:justify-between{justify-content:space-between}.sm\:justify-end{justify-content:flex-end}.sm\:p-0{padding:0}.sm\:p-6{padding:calc(var(--spacing) * 6)}.sm\:p-8{padding:calc(var(--spacing) * 8)}.sm\:px-4{padding-inline:calc(var(--spacing) * 4)}.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:py-16{padding-block:calc(var(--spacing) * 16)}.sm\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.sm\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.sm\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.sm\:leading-8{--tw-leading:calc(var(--spacing) * 8);line-height:calc(var(--spacing) * 8)}}@media (min-width:48rem){.md\:absolute{position:absolute}.md\:col-span-2{grid-column:span 2/span 2}.md\:flex{display:flex}.md\:inline{display:inline}.md\:table-cell{display:table-cell}.md\:w-\(--radix-navigation-menu-viewport-width\){width:var(--radix-navigation-menu-viewport-width)}.md\:w-auto{width:auto}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1\.1fr\)\]{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.md\:items-center{align-items:center}}@media (min-width:64rem){.lg\:block{display:block}.lg\:hidden{display:none}.lg\:table-cell{display:table-cell}.lg\:grid-cols-\[minmax\(0\,1fr\)_26rem\]{grid-template-columns:minmax(0,1fr) 26rem}.lg\:items-end{align-items:flex-end}}@media (min-width:80rem){.xl\:table-cell{display:table-cell}}@container (min-width:28rem){.\@md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}.dark\:bg-surface-raised:where(.dark,.dark *,[data-theme=dark],[data-theme=dark] *){background-color:var(--surface-raised)}.dark\:data-\[state\=checked\]\:bg-primary-foreground:where(.dark,.dark *,[data-theme=dark],[data-theme=dark] *)[data-state=checked]{background-color:var(--primary-foreground)}.dark\:data-\[state\=unchecked\]\:bg-foreground\/80:where(.dark,.dark *,[data-theme=dark],[data-theme=dark] *)[data-state=unchecked]{background-color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.dark\:data-\[state\=unchecked\]\:bg-foreground\/80:where(.dark,.dark *,[data-theme=dark],[data-theme=dark] *)[data-state=unchecked]{background-color:color-mix(in oklab, var(--foreground) 80%, transparent)}}@media (pointer:coarse){.pointer-coarse\:size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.pointer-coarse\:size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.pointer-coarse\:size-11{width:calc(var(--spacing) * 11);height:calc(var(--spacing) * 11)}.pointer-coarse\:h-11{height:calc(var(--spacing) * 11)}.pointer-coarse\:opacity-100{opacity:1}@media not all and (min-width:40rem){.pointer-coarse\:max-sm\:size-11{width:calc(var(--spacing) * 11);height:calc(var(--spacing) * 11)}}}.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading]{padding-inline:calc(var(--spacing) * 2)}.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading]{padding-block:calc(var(--spacing) * 1.5)}.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading]{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading]{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading]{color:var(--muted-foreground)}.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item]{padding-inline:calc(var(--spacing) * 2)}.\[\&_\[cmdk-item\]\]\:py-2 [cmdk-item]{padding-block:calc(var(--spacing) * 2)}.\[\&_\[data-slot\=card-content\]\]\:px-4 [data-slot=card-content]{padding-inline:calc(var(--spacing) * 4)}.\[\&_\[data-slot\=card-content\]\]\:px-5 [data-slot=card-content]{padding-inline:calc(var(--spacing) * 5)}.\[\&_\[data-slot\=card-content\]\]\:px-6 [data-slot=card-content]{padding-inline:calc(var(--spacing) * 6)}.\[\&_\[data-slot\=card-footer\]\]\:p-4 [data-slot=card-footer]{padding:calc(var(--spacing) * 4)}.\[\&_\[data-slot\=card-footer\]\]\:p-5 [data-slot=card-footer]{padding:calc(var(--spacing) * 5)}.\[\&_\[data-slot\=card-footer\]\]\:p-6 [data-slot=card-footer]{padding:calc(var(--spacing) * 6)}.\[\&_\[data-slot\=card-header\]\]\:p-4 [data-slot=card-header]{padding:calc(var(--spacing) * 4)}.\[\&_\[data-slot\=card-header\]\]\:p-5 [data-slot=card-header]{padding:calc(var(--spacing) * 5)}.\[\&_\[data-slot\=card-header\]\]\:p-6 [data-slot=card-header]{padding:calc(var(--spacing) * 6)}.\[\&_\[data-slot\=toast-title\]\]\:text-destructive [data-slot=toast-title]{color:var(--destructive)}.\[\&_\[data-slot\=toast-title\]\]\:text-success [data-slot=toast-title]{color:var(--success)}.\[\&_a\]\:relative a{position:relative}.\[\&_a\]\:z-10 a{z-index:10}.\[\&_a\]\:text-foreground a{color:var(--foreground)}.\[\&_a\]\:underline a{text-decoration-line:underline}.\[\&_a\]\:underline-offset-4 a{text-underline-offset:4px}.\[\&_button\]\:relative button{position:relative}.\[\&_button\]\:z-10 button{z-index:10}.\[\&_code\]\:font-mono code{font-family:JetBrains Mono,SFMono-Regular,Consolas,Liberation Mono,monospace}.\[\&_code\]\:text-foreground code{color:var(--foreground)}.\[\&_input\]\:relative input{position:relative}.\[\&_input\]\:z-10 input{z-index:10}.\[\&_li\]\:leading-6 li{--tw-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)}.\[\&_select\]\:relative select{position:relative}.\[\&_select\]\:z-10 select{z-index:10}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-3 svg{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.\[\&_svg\]\:size-3\.5 svg{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&_svg\]\:size-4\.5 svg{width:calc(var(--spacing) * 4.5);height:calc(var(--spacing) * 4.5)}.\[\&_svg\]\:size-5 svg{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}@media (pointer:coarse){.pointer-coarse\:\[\&_svg\]\:size-5 svg{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*=text-]){color:var(--muted-foreground)}.\[\&_svg\:not\(\[class\*\=size-\]\)\]\:size-3\.5 svg:not([class*=size-]){width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.\[\&_textarea\]\:relative textarea{position:relative}.\[\&_textarea\]\:z-10 textarea{z-index:10}.\[\&_tr\]\:border-b tr{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.\[\&_tr\:last-child\]\:border-0 tr:last-child{border-style:var(--tw-border-style);border-width:0}.\[\&\:\:-moz-range-progress\]\:h-1\.5::-moz-range-progress{height:calc(var(--spacing) * 1.5)}.\[\&\:\:-moz-range-progress\]\:rounded-full::-moz-range-progress{border-radius:3.40282e38px}.\[\&\:\:-moz-range-progress\]\:bg-brand::-moz-range-progress{background-color:var(--brand)}.\[\&\:\:-moz-range-thumb\]\:size-4::-moz-range-thumb{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&\:\:-moz-range-thumb\]\:rounded-full::-moz-range-thumb{border-radius:3.40282e38px}.\[\&\:\:-moz-range-thumb\]\:border-2::-moz-range-thumb{border-style:var(--tw-border-style);border-width:2px}.\[\&\:\:-moz-range-thumb\]\:border-brand::-moz-range-thumb{border-color:var(--brand)}.\[\&\:\:-moz-range-thumb\]\:bg-background::-moz-range-thumb{background-color:var(--background)}.focus-visible\:\[\&\:\:-moz-range-thumb\]\:ring-\[3px\]:focus-visible::-moz-range-thumb{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:\[\&\:\:-moz-range-thumb\]\:ring-ring\/30:focus-visible::-moz-range-thumb{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:\[\&\:\:-moz-range-thumb\]\:ring-ring\/30:focus-visible::-moz-range-thumb{--tw-ring-color:color-mix(in oklab, var(--ring) 30%, transparent)}}.\[\&\:\:-moz-range-track\]\:h-1\.5::-moz-range-track{height:calc(var(--spacing) * 1.5)}.\[\&\:\:-moz-range-track\]\:rounded-full::-moz-range-track{border-radius:3.40282e38px}.\[\&\:\:-moz-range-track\]\:bg-muted::-moz-range-track{background-color:var(--muted)}.\[\&\:\:-webkit-slider-runnable-track\]\:h-1\.5::-webkit-slider-runnable-track{height:calc(var(--spacing) * 1.5)}.\[\&\:\:-webkit-slider-runnable-track\]\:rounded-full::-webkit-slider-runnable-track{border-radius:3.40282e38px}.\[\&\:\:-webkit-slider-runnable-track\]\:bg-\[linear-gradient\(to_right\,var\(--color-brand\)_var\(--bl-slider-fill\)\,var\(--color-muted\)_var\(--bl-slider-fill\)\)\]::-webkit-slider-runnable-track{background-image:linear-gradient(to right,var(--color-brand) var(--bl-slider-fill),var(--color-muted) var(--bl-slider-fill))}.\[\&\:\:-webkit-slider-thumb\]\:-mt-\[5px\]::-webkit-slider-thumb{margin-top:-5px}.\[\&\:\:-webkit-slider-thumb\]\:size-4::-webkit-slider-thumb{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&\:\:-webkit-slider-thumb\]\:appearance-none::-webkit-slider-thumb{appearance:none}.\[\&\:\:-webkit-slider-thumb\]\:rounded-full::-webkit-slider-thumb{border-radius:3.40282e38px}.\[\&\:\:-webkit-slider-thumb\]\:border-2::-webkit-slider-thumb{border-style:var(--tw-border-style);border-width:2px}.\[\&\:\:-webkit-slider-thumb\]\:border-brand::-webkit-slider-thumb{border-color:var(--brand)}.\[\&\:\:-webkit-slider-thumb\]\:bg-background::-webkit-slider-thumb{background-color:var(--background)}.\[\&\:\:-webkit-slider-thumb\]\:shadow-sm::-webkit-slider-thumb{--tw-shadow:0 1px 3px var(--tw-shadow-color,#0a080e14), 0 1px 2px var(--tw-shadow-color,#0a080e0d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:ring-\[3px\]:focus-visible::-webkit-slider-thumb{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:ring-ring\/30:focus-visible::-webkit-slider-thumb{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:ring-ring\/30:focus-visible::-webkit-slider-thumb{--tw-ring-color:color-mix(in oklab, var(--ring) 30%, transparent)}}.\[\&\:has\(\[role\=checkbox\]\)\]\:w-10:has([role=checkbox]){width:calc(var(--spacing) * 10)}.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]){padding-right:0}:is(.data-\[variant\=destructive\]\:\*\:\[svg\]\:\!text-destructive[data-variant=destructive]>*):is(svg){color:var(--destructive)!important}.\[\&\>svg\]\:mt-0\.5>svg{margin-top:calc(var(--spacing) * .5)}.\[\&\>svg\]\:size-3>svg{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.\[\&\>svg\]\:size-3\.5>svg{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.\[\&\>svg\]\:size-4>svg{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&\>svg\]\:text-brand>svg{color:var(--brand)}.\[\&\>svg\]\:text-destructive>svg{color:var(--destructive)}.\[\&\>svg\]\:text-info>svg{color:var(--info)}.\[\&\>svg\]\:text-muted-foreground>svg{color:var(--muted-foreground)}.\[\&\>svg\]\:text-success>svg{color:var(--success)}.\[\&\>svg\]\:text-warning>svg{color:var(--warning)}.\[\&\>tr\]\:last\:border-b-0>tr:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg{rotate:180deg}}:root{--background:#fbfafc;--foreground:#17131c;--surface:#fff;--surface-raised:#fff;--surface-muted:#f7f4f9;--card:#fff;--card-foreground:#17131c;--popover:#fff;--popover-foreground:#17131c;--primary:#8f0bc7;--primary-foreground:#fff;--secondary:#f1edf4;--secondary-foreground:#29212f;--muted:#f4f1f6;--muted-foreground:#6c6472;--accent:#f3e7fb;--accent-foreground:#561071;--destructive:#c92d3f;--destructive-foreground:#fff;--success:#0e7a56;--success-foreground:#fff;--warning:#9b5c08;--warning-foreground:#fff;--info:#2563eb;--info-foreground:#fff;--recording:#d6293e;--recording-foreground:#fff;--border:#e5dfe8;--border-strong:#cfc5d5;--input:#d8cfdd;--ring:#a60ee5;--brand:#a60ee5;--brand-hover:#8f0bc7;--brand-soft:#f5e8fc;--brand-soft-foreground:#5b1476;--code:#18141d;--code-foreground:#f5f0f7;--radius:.625rem;--duration-fast:.12s;--duration-standard:.18s;--duration-emphasis:.24s;--duration-exit:.14s;--ease-standard:cubic-bezier(.2, 0, 0, 1);--ease-emphasized:cubic-bezier(.16, 1, .3, 1);--ease-exit:cubic-bezier(.4, 0, 1, 1);color-scheme:light}.dark,[data-theme=dark]{--background:#0d0d12;--foreground:#f2eef5;--surface:#121218;--surface-raised:#18171f;--surface-muted:#17151c;--card:#14131a;--card-foreground:#f2eef5;--popover:#18171f;--popover-foreground:#f2eef5;--primary:#8f0bc7;--primary-foreground:#fff;--secondary:#211e28;--secondary-foreground:#e7e0eb;--muted:#1b1921;--muted-foreground:#a49ca9;--accent:#291734;--accent-foreground:#efd7fa;--destructive:#ef5b65;--destructive-foreground:#1b090b;--success:#36c58d;--success-foreground:#07160f;--warning:#f3b24c;--warning-foreground:#201304;--info:#6ea8ff;--info-foreground:#071226;--recording:#f2616d;--recording-foreground:#1b090b;--border:#2a2732;--border-strong:#403a49;--input:#34303d;--ring:#c65ef1;--brand:#c65ef1;--brand-hover:#d384f3;--brand-soft:#291734;--brand-soft-foreground:#efd7fa;--code:#09090d;--code-foreground:#f5f0f7;color-scheme:dark}@keyframes bl-in{0%{opacity:0;transform:translate3d(var(--bl-tx,0), var(--bl-ty,0), 0) scale(var(--bl-scale,.96))}}@keyframes bl-out{to{opacity:0;transform:translate3d(var(--bl-tx,0), var(--bl-ty,0), 0) scale(var(--bl-scale,.96))}}@keyframes bl-fade-in{0%{opacity:0}}@keyframes bl-fade-out{to{opacity:0}}@keyframes bl-sheet-in{0%{transform:translate3d(var(--bl-sheet-x,100%), var(--bl-sheet-y,0), 0)}}@keyframes bl-sheet-out{to{transform:translate3d(var(--bl-sheet-x,100%), var(--bl-sheet-y,0), 0)}}@keyframes bl-accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes bl-accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes bl-collapsible-down{0%{height:0}to{height:var(--radix-collapsible-content-height)}}@keyframes bl-collapsible-up{0%{height:var(--radix-collapsible-content-height)}to{height:0}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important}}@media (pointer:coarse){[data-slot=button],[data-slot=icon-button],[data-slot=combobox-trigger]{min-width:44px;min-height:44px}[data-slot=input]{min-height:44px}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{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-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@burtson-labs/ui",
|
|
3
|
-
"version": "0.13.
|
|
3
|
+
"version": "0.13.1",
|
|
4
4
|
"description": "React components for Burtson Labs products: Radix accessibility, Tailwind v4 styling, Burtson Icons. Install the package or copy the source.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": {
|