4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T3afc,// The theme's variables, which base.css reads by name; nothing imports them by value. import "./theme.stylex"; import * as stylex from "@stylexjs/stylex"; // A group `Sx` reads stays `as const`: without it the values widen to `string` and `sx` takes anything. // Grouped by family; each family's tokens share its slots, so `` names one. export const colors = stylex.defineVars({ // Surfaces. background: "var(--background)", overlay: "var(--overlay)", // Floating surfaces: popovers, menus, dialogs, toasts. raised: "var(--raised)", sidebar: "var(--sidebar)", well: "var(--well)", textPrimary: "var(--text-primary)", textSecondary: "var(--text-secondary)", textMuted: "var(--text-muted)", border: "var(--border)", borderSubtle: "var(--border-subtle)", borderStrong: "var(--border-strong)", // Translucent, so they read the same on any surface; `fillOpaque` hides what's under it. fillSubtle: "var(--fill-subtle)", fill: "var(--fill)", fillStrong: "var(--fill-strong)", fillOpaque: "var(--fill-opaque)", fillOnStrong: "var(--fill-on-strong)", accentSolid: "var(--accent-solid)", accentOnSolid: "var(--accent-on-solid)", invertedSolid: "var(--inverted-solid)", invertedOnSolid: "var(--inverted-on-solid)", invertedFill: "var(--inverted-fill)", // Status: `Text` for icons and short labels, `Subtle` tints with their hover, `Solid` // fills a shape that carries the status alone, like a dot. dangerText: "var(--danger-text)", dangerSubtle: "var(--danger-subtle)", dangerSubtleHover: "var(--danger-subtle-hover)", dangerSolid: "var(--danger-solid)", dangerBorder: "var(--danger-border)", infoText: "var(--info-text)", infoSubtle: "var(--info-subtle)", infoSubtleHover: "var(--info-subtle-hover)", infoSolid: "var(--info-solid)", infoOnSolid: "var(--info-on-solid)", successText: "var(--success-text)", successSubtle: "var(--success-subtle)", successSubtleHover: "var(--success-subtle-hover)", successSolid: "var(--success-solid)", warningText: "var(--warning-text)", warningSubtle: "var(--warning-subtle)", warningSubtleHover: "var(--warning-subtle-hover)", warningSolid: "var(--warning-solid)", // Chart series, in order; a legend or a tooltip's swatch reads them too. chart1: "var(--chart-1)", chart2: "var(--chart-2)", chart3: "var(--chart-3)", chart4: "var(--chart-4)", chart5: "var(--chart-5)", chart6: "var(--chart-6)", } as const); // Multipliers for the corners and edge where an item meets its neighbor: 1 keeps them, // 0 joins them. ButtonGroup sets them, along its row (`inline`), its column (`block`) or // either; outside a group they stay 1, so nothing changes. export const joins = stylex.defineVars({ block: "1", either: "1", inline: "1", }); // An avatar's diameter, its badge's, the hole its photo leaves for the badge, and its // corner. Avatar sets them per size, so the masks that cut it apart from its neighbors and // badge can do math on them. export const avatarVars = stylex.defineVars({ badge: "0px", badgeCut: "none", corner: "9999px", size: "0px", }); // The diameter of an avatar leading a badge. Badge sets it per size, Avatar reads it. export const badgeVars = stylex.defineVars({ avatar: "0px", }); // A card's padding, which its header, content and footer read so they line up at every size. export const cardVars = stylex.defineVars({ spacing: "0px", }); // A text field's type size over 16px, below which iOS zooms on focus. InputGroup sets it on touch screens. export const inputVars = stylex.defineVars({ scale: "1", }); export const codeBlockVars = stylex.defineVars({ padBlock: "0px", padInline: "0px", }); // Steps by height, after Interfere's: `default` under a control, `lg` under a popup, `xl` // under a dialog. A step's slots follow it: `Hover`, `Pressed`, `Invalid`, `Ring` (draws its // own edge, `Subtle` in `borderSubtle`). The theme's depth sets `default`'s drops (`--shadow-*`): // a flat theme drops them, and a ring keeps its edge. `panel`, `lg` and `xl` stand off the page, so every theme keeps them. export const shadows = stylex.defineConsts({ // The border is the control's edge, these its height. It rises a step on hover and // settles flat while pressed. default: "var(--shadow-default)", defaultHover: "var(--shadow-default-hover)", defaultPressed: "var(--shadow-default-pressed)", defaultInvalid: "0 0 0 2px var(--red-a4)", defaultRing: "0 0 0 1px var(--border), var(--shadow-default-ring)", defaultRingSubtle: "0 0 0 1px var(--border-subtle), var(--shadow-default-ring-subtle)", defaultRingInvalid: "0 0 0 1px var(--danger-border), 0 0 0 3px var(--red-a4)", // A side panel beside the page: it stands apart from the content in every depth, so the theme doesn't set it. panel: "0 0 0 0.5px var(--border-subtle), 0 1px 2px var(--black-a1), 0 4px 12px -6px var(--black-a1)", // A near shadow for contact and a far one for height, so a surface sits at a distance. lg: "0 0 0 1px var(--border-subtle), 0 1px 2px var(--black-a1), 0 4px 16px -4px var(--black-a3)", xl: "0 0 0 1px var(--border-subtle), 0 1px 3px var(--black-a1), 0 16px 40px -8px var(--black-a4)", } as const); // The theme's fonts, which base.css sets on the page and reset.css on controls and code. Figures to compare take `mono`. export const fonts = stylex.defineConsts({ mono: "var(--font-mono)", sans: "var(--font-sans)", }); // The bases the type scale multiplies, 4px at a 16px root. In rem, so text follows the // reader's browser font size; apart, so leading can change without the sizes. const typeUnit = "0.25rem"; const leadingUnit = "0.25rem"; // The type scale, after Interfere's: headings rank 1 (largest) to 6, text steps around // `textBase`. Each size has a line height of the same name; set them together. 15, 13 and // 11 add 1px to a step, as Interfere's do. export const fontSizes = stylex.defineConsts({ heading1: `calc(${typeUnit} * 14)`, heading2: `calc(${typeUnit} * 11)`, heading3: `calc(${typeUnit} * 9)`, heading4: `calc(${typeUnit} * 7)`, heading5: `calc(${typeUnit} * 6)`, heading6: `calc(${typeUnit} * 5)`, textLg: `calc(${typeUnit} * 4.5)`, // Reading copy. textBase: `calc(${typeUnit} * 3.5 + 1px)`, // A sidebar's rows. textMd: `calc(${typeUnit} * 3.5)`, // Controls and the text inside components. textSm: `calc(${typeUnit} * 3 + 1px)`, // Badges, shortcuts, group labels. captionLg: `calc(${typeUnit} * 3)`, captionBase: `calc(${typeUnit} * 2.5 + 1px)`, captionSm: `calc(${typeUnit} * 2.5)`, captionXs: `calc(${typeUnit} * 2)`, // Under 16px, iOS Safari zooms the page when a field takes focus; fields switch to this on touch. touch: "16px", } as const); export const lineHeights = stylex.defineConsts({ heading1: `calc(${leadingUnit} * 14)`, heading2: `calc(${leadingUnit} * 14)`, heading3: `calc(${leadingUnit} * 11)`, heading4: `calc(${leadingUnit} * 9)`, heading5: `calc(${leadingUnit} * 8)`, heading6: `calc(${leadingUnit} * 6)`, textLg: `calc(${leadingUnit} * 6)`, textBase: `calc(${leadingUnit} * 6)`, textMd: `calc(${leadingUnit} * 5)`, textSm: `calc(${leadingUnit} * 5)`, captionLg: `calc(${leadingUnit} * 4)`, captionBase: `calc(${leadingUnit} * 4)`, captionSm: `calc(${leadingUnit} * 4)`, captionXs: `calc(${leadingUnit} * 3)`, touch: `calc(${leadingUnit} * 6)`, }); // Large type tightens a little, so a heading doesn't read as spaced out. export const letterSpacings = stylex.defineConsts({ heading: "-0.01em", // Uppercase reads cramped at its own spacing. caps: "0.05em", }); export const fontWeights = stylex.defineConsts({ medium: "500", regular: "400", // 450 and 550 need a variable font; a static one renders them as 500 and 600. semimedium: "450", semibold: "550", }); // The base space, sizes and the theme's radius multiply, 4px at a 16px root, as Tailwind's // `--spacing`. In rem, so controls and their padding grow with the text. const spaceUnit = "0.25rem"; // Values a theme can change point at variables `base.css` defaults and a theme overrides. // `xxxs` and `xxs` stay fixed across themes: they're hairline gaps. export const space = stylex.defineConsts({ xxxs: `calc(${spaceUnit} * 0.5)`, xxs: spaceUnit, xs: "var(--space-xs)", sm: "var(--space-sm)", md: "var(--space-md)", lg: "var(--space-lg)", xl: "var(--space-xl)", // shadcn's off-grid insets, a hairline under a step so they follow the preset: a row's 6, a popup's 10. row: `calc(var(--space-xs) - ${spaceUnit} * 0.5)`, popup: `calc(var(--space-sm) - ${spaceUnit} * 0.5)`, } as const); export const radii = stylex.defineConsts({ // The 20px pieces, Badge and Kbd; off the 4px grid, as 4 reads square and 8 a pill. chip: "var(--radius-chip)", full: "9999px", lg: "var(--radius-lg)", md: "var(--radius-md)", xl: "var(--radius-xl)", sm: "var(--radius-sm)", xs: "var(--radius-xs)", } as const); export const sizes = stylex.defineConsts({ controlLg: "var(--size-control-lg)", controlMd: "var(--size-control-md)", controlSm: "var(--size-control-sm)", controlXs: "var(--size-control-xs)", controlXxs: "var(--size-control-xxs)", // A small badge: a hairline under `controlXxs`, so it follows the preset. controlXxxs: `calc(var(--size-control-xxs) - ${spaceUnit} * 0.5)`, // A vertical attachment card's width, and its wide variant's. attachment: `calc(${spaceUnit} * 24)`, attachmentWide: `calc(${spaceUnit} * 30)`, // A citation pill's widest; a longer publication name truncates. citation: `calc(${spaceUnit} * 40)`, dialog: `calc(${spaceUnit} * 96)`, dialogLg: `calc(${spaceUnit} * 128)`, dialogSm: `calc(${spaceUnit} * 80)`, // The top row the sidebar and the page share, so their headers line up. header: `calc(${spaceUnit} * 14)`, hitArea: `calc(${spaceUnit} * 10)`, icon: `calc(${spaceUnit} * 4)`, iconLg: `calc(${spaceUnit} * 5)`, iconSm: `calc(${spaceUnit} * 3.5)`, iconXs: `calc(${spaceUnit} * 3)`, iconXxs: `calc(${spaceUnit} * 2)`, kbd: `calc(${spaceUnit} * 5)`, // An item's image or avatar, beside a title and description. media: `calc(${spaceUnit} * 10)`, // The least an item's text keeps beside its actions before they drop under it. itemText: `calc(${spaceUnit} * 40)`, menu: `calc(${spaceUnit} * 36)`, // A default or large menu's least width, roomy enough for a label beside its value. menuLg: `calc(${spaceUnit} * 50)`, menuHeight: `calc(${spaceUnit} * 80)`, // A model picker's list: short names beside a search field. modelPicker: `calc(${spaceUnit} * 60)`, // A centered block of short text, like an empty state's. measure: `calc(${spaceUnit} * 96)`, popover: `calc(${spaceUnit} * 72)`, // A settings dialog's nav and page side by side, capped to the window. settingsDialog: `calc(${spaceUnit} * 250)`, settingsDialogHeight: `calc(${spaceUnit} * 160)`, // A side panel beside the content. sidePanel: `calc(${spaceUnit} * 100)`, // A sidebar open, and collapsed to its icons (a control and its group padding). sidebar: `calc(${spaceUnit} * 64)`, sidebarIcon: `calc(${spaceUnit} * 12)`, thumb: `calc(${spaceUnit} * 3)`, toast: `calc(${spaceUnit} * 89)`, tooltip: `calc(${spaceUnit} * 80)`, } as const); // Lines stay in px, so a hairline stays one crisp device pixel at any text size. export const strokes = stylex.defineConsts({ border: "1px", // Hugeicons' weight beside medium text; read in JS, so a bare number. In the icon's own // units, so it scales with the icon. icon: "1.75", // The line under a `line` tab, and the bar beside a vertical one. indicator: "2px", spinner: "1.5px", // A slider or progress bar: a size, not a line, so it grows with its thumb. track: spaceUnit, }); // Popup distances from their trigger, read in JS by Base UI, so bare numbers. export const offsets = stylex.defineConsts({ popover: "4", tooltip: "8", }); export const layers = stylex.defineConsts({ // Floats over the page, under a dialog's backdrop. bar: "30", dialog: "40", // Above a dialog, so a select or menu opened from one sits on top of it. popover: "45", toast: "50", tooltip: "60", } as const); export const opacities = stylex.defineConsts({ busy: "0.8", // A skeleton at the low point of its pulse. pulse: "0.6", disabled: "0.6", hover: "0.88", }); export const media = stylex.defineConsts({ coarse: "@media (pointer: coarse)", hover: "@media (hover: hover)", reducedMotion: "@media (prefers-reduced-motion: reduce)", sm: "@media (min-width: 640px)", // Below it, a sidebar opens as a sheet; JS reads the query. md: "@media (min-width: 768px)", }); export const presses = stylex.defineConsts({ icon: "scale(0.95)", link: "scale(0.97)", row: "scale(0.99)", }); // Shared by name so the tokens and the CSS variables below can't drift. const easeOut = "cubic-bezier(0.23, 1, 0.32, 1)"; const easeCrossfade = "cubic-bezier(0.2, 0, 0, 1)"; const popoverIn = "180ms"; const popoverOut = "120ms"; const crossfadeFor = "300ms"; const surfaceFor = "200ms"; export const easings = stylex.defineConsts({ inOut: "cubic-bezier(0.77, 0, 0.175, 1)", out: easeOut, overshoot: "cubic-bezier(0.34, 1.56, 0.64, 1)", layout: "cubic-bezier(0.32, 0.72, 0, 1)", crossfade: easeCrossfade, } as const); export const durations = stylex.defineConsts({ hover: "150ms", move: "250ms", popover: popoverIn, popoverExit: popoverOut, press: "160ms", layout: "300ms", layoutExit: surfaceFor, spin: "1s", // One breath of a skeleton: slow, so loading reads as calm. pulse: "2s", // One sweep of a shimmer across working text. shimmer: "2s", crossfade: crossfadeFor, // How long a confirmation (copied, saved) holds before it reverts; read in JS. confirm: "1500ms", dialog: surfaceFor, chart: surfaceFor, sidebar: "250ms", sidebarExit: surfaceFor, // The gap between siblings arriving one after another. stagger: "50ms", // How long an image may load before its fallback shows; read in JS. fallbackDelay: "600ms", // Half Base UI's 600ms, for a tooltip and a hover card alike. tooltipDelay: "300ms", hoverCardDelay: "300ms", hoverCardCloseDelay: "300ms", } as const); // The motion CSS outside StyleX's reach reads (view transitions in base.css and the site), // under literal names. export const motionVars = stylex.defineVars({ "--duration-crossfade": crossfadeFor, "--duration-popover": popoverIn, "--duration-popover-exit": popoverOut, "--ease-crossfade": easeCrossfade, "--ease-out": easeOut, }); // The shapes motion moves between: where a crossfade starts, how far an exit drops, // how much each surface behind a stack shrinks. export const motion = stylex.defineConsts({ // How far a row rises as it arrives. arriveOffset: "4px", dialogScale: "0.96", dotScale: "0.5", exitOffset: "8px", popoverScale: "0.96", stackScale: "0.05", crossfadeBlur: "4px", crossfadeScale: "0.25", crossfadeTextBlur: "2px", }); export const blurs = stylex.defineConsts({ backdrop: "4px", }); 51:T14e5,// Your theme: edit these to make Constella yours. Everything else in the system reads them. // // - Scales: `--neutral-*` and `--accent-*` point at Radix Colors scales by name. To change // one, import its four files and point the steps at it (the theme builder writes this). // - Roles: what components ask for (`--border`, `--fill`…), each a scale step; change one alone. // The ones that differ between light and dark live in base.css. // - Shape and density: one radius (the rest derive from it), control heights, spacing. In rem // (1rem is 16px at the default root), so they grow with the reader's browser font size. // - Depth: `--shadow-*`, the drops under controls and in-page surfaces. Raised lifts them; // flat leaves them out, so edges are borders and fills. Floating surfaces keep theirs. // - Fonts: `--font-sans` for text, `--font-mono` for code and figures. Named, not shipped: load // them or put yours first. base.css sets them on the page and reset.css on controls and code; components inherit. // // The defaults are Polaris: Radix gray, an ink accent, 8px corners, default sizing, raised depth, Inter and Geist Mono. // Literal names, so `base.css` can read them. For more themes to switch between at // runtime, `stylex.createTheme(theme, { … })` and apply it to . import * as stylex from "@stylexjs/stylex"; export const theme = stylex.defineVars({ "--neutral-1": "var(--gray-1)", "--neutral-2": "var(--gray-2)", "--neutral-3": "var(--gray-3)", "--neutral-4": "var(--gray-4)", "--neutral-5": "var(--gray-5)", "--neutral-6": "var(--gray-6)", "--neutral-7": "var(--gray-7)", "--neutral-8": "var(--gray-8)", "--neutral-9": "var(--gray-9)", "--neutral-10": "var(--gray-10)", "--neutral-11": "var(--gray-11)", "--neutral-12": "var(--gray-12)", "--neutral-a1": "var(--gray-a1)", "--neutral-a2": "var(--gray-a2)", "--neutral-a3": "var(--gray-a3)", "--neutral-a4": "var(--gray-a4)", "--neutral-a5": "var(--gray-a5)", "--neutral-a6": "var(--gray-a6)", "--neutral-a7": "var(--gray-a7)", "--neutral-a8": "var(--gray-a8)", "--neutral-a9": "var(--gray-a9)", "--neutral-a10": "var(--gray-a10)", "--neutral-a11": "var(--gray-a11)", "--neutral-a12": "var(--gray-a12)", "--accent-1": "var(--neutral-1)", "--accent-2": "var(--neutral-2)", "--accent-3": "var(--neutral-3)", "--accent-4": "var(--neutral-4)", "--accent-5": "var(--neutral-5)", "--accent-6": "var(--neutral-6)", "--accent-7": "var(--neutral-7)", "--accent-8": "var(--neutral-8)", "--accent-9": "var(--neutral-9)", "--accent-10": "var(--neutral-10)", "--accent-11": "var(--neutral-11)", "--accent-12": "var(--neutral-12)", "--accent-a1": "var(--neutral-a1)", "--accent-a2": "var(--neutral-a2)", "--accent-a3": "var(--neutral-a3)", "--accent-a4": "var(--neutral-a4)", "--accent-a5": "var(--neutral-a5)", "--accent-a6": "var(--neutral-a6)", "--accent-a7": "var(--neutral-a7)", "--accent-a8": "var(--neutral-a8)", "--accent-a9": "var(--neutral-a9)", "--accent-a10": "var(--neutral-a10)", "--accent-a11": "var(--neutral-a11)", "--accent-a12": "var(--neutral-a12)", "--accent-contrast": "var(--neutral-1)", // Roles: what components ask for, valued by a scale step. "--background": "var(--neutral-1)", "--sidebar": "var(--neutral-2)", "--text-primary": "var(--neutral-12)", "--text-secondary": "var(--neutral-11)", // Halfway to secondary: gray-10 is too faint for small labels, gray-11 would merge with secondary. "--text-muted": "color-mix(in oklab, var(--neutral-10), var(--neutral-11))", "--fill-subtle": "var(--neutral-a2)", "--fill": "var(--neutral-a3)", "--fill-strong": "var(--neutral-a4)", "--fill-opaque": "var(--neutral-3)", // Edges are solid steps: a translucent one shows whatever it crosses. "--border-subtle": "var(--neutral-4)", "--border": "var(--neutral-6)", // A control's own edge, like an empty checkbox's: 3:1 on the page, as WCAG asks of controls. "--border-strong": "var(--neutral-9)", "--inverted-solid": "var(--neutral-12)", "--inverted-on-solid": "var(--neutral-1)", "--font-mono": '"Geist Mono Variable", "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace', "--font-sans": '"Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, sans-serif', "--overlay": "var(--black-a5)", "--accent-solid": "var(--neutral-12)", "--accent-on-solid": "var(--neutral-1)", "--focus-ring": "var(--neutral-8)", "--selection": "var(--neutral-a5)", "--radius": "0.5rem", "--size-control-xxs": "1.25rem", "--size-control-xs": "1.5rem", "--size-control-sm": "1.75rem", "--size-control-md": "2rem", "--size-control-lg": "2.25rem", "--space-xs": "0.5rem", "--space-sm": "0.75rem", "--space-md": "1rem", "--space-lg": "1.5rem", "--space-xl": "3rem", // Depth: raised. Flat sets each to `0 0 transparent`, a drop that draws nothing, as `none` can't sit in a list. "--shadow-default": "0 1px 2px -1px var(--black-a1), 0 2px 4px 0 var(--black-a1)", "--shadow-default-hover": "0 1px 2px -1px var(--black-a2), 0 2px 4px 0 var(--black-a1)", "--shadow-default-pressed": "0 1px 1px -1px var(--black-a2)", "--shadow-default-ring": "0 1px 3px var(--black-a5)", "--shadow-default-ring-subtle": "0 1px 2px var(--black-a1), 0 4px 12px -6px var(--black-a1)", }); 52:T3315,@import "@radix-ui/colors/black-alpha.css"; @import "@radix-ui/colors/white-alpha.css"; @import "@radix-ui/colors/gray.css"; @import "@radix-ui/colors/gray-alpha.css"; @import "@radix-ui/colors/gray-dark.css"; @import "@radix-ui/colors/gray-dark-alpha.css"; @import "@radix-ui/colors/amber.css"; @import "@radix-ui/colors/amber-alpha.css"; @import "@radix-ui/colors/amber-dark.css"; @import "@radix-ui/colors/amber-dark-alpha.css"; @import "@radix-ui/colors/blue.css"; @import "@radix-ui/colors/blue-alpha.css"; @import "@radix-ui/colors/blue-dark.css"; @import "@radix-ui/colors/blue-dark-alpha.css"; @import "@radix-ui/colors/green.css"; @import "@radix-ui/colors/green-alpha.css"; @import "@radix-ui/colors/green-dark.css"; @import "@radix-ui/colors/green-dark-alpha.css"; @import "@radix-ui/colors/red.css"; @import "@radix-ui/colors/red-alpha.css"; @import "@radix-ui/colors/red-dark.css"; @import "@radix-ui/colors/red-dark-alpha.css"; @import "@radix-ui/colors/plum.css"; @import "@radix-ui/colors/plum-dark.css"; @import "@radix-ui/colors/teal.css"; @import "@radix-ui/colors/teal-dark.css"; @import "@radix-ui/colors/violet.css"; @import "@radix-ui/colors/violet-dark.css"; @import "@radix-ui/colors/cyan.css"; @import "@radix-ui/colors/cyan-dark.css"; @import "@radix-ui/colors/orange.css"; @import "@radix-ui/colors/orange-dark.css"; @import "@radix-ui/colors/pink.css"; @import "@radix-ui/colors/pink-dark.css"; @import "./reset.css"; @layer base { :root { color-scheme: light; font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Native controls and scrollbars follow the theme too. */ .dark { color-scheme: dark; } /* Status tints are the vivid step 9 (info, its own solid) at low opacity: Radix's dark alpha steps go muddy. Listed on each theme class, so the mix resolves where the theme's color does. */ :root, .light, .dark { --danger-subtle: color-mix(in oklab, var(--red-9) 14%, transparent); --danger-subtle-hover: color-mix(in oklab, var(--red-9) 22%, transparent); --info-subtle: color-mix(in oklab, var(--info-solid) 14%, transparent); --info-subtle-hover: color-mix( in oklab, var(--info-solid) 22%, transparent ); --success-subtle: color-mix(in oklab, var(--green-9) 14%, transparent); --success-subtle-hover: color-mix( in oklab, var(--green-9) 22%, transparent ); --warning-subtle: color-mix(in oklab, var(--amber-9) 14%, transparent); --warning-subtle-hover: color-mix( in oklab, var(--amber-9) 22%, transparent ); /* Chart series, in this order: no status hue, and each neighbor stays apart under red-green color blindness. TanStack Charts reads its palette by the `--ts-chart-*` names. */ --chart-1: var(--plum-9); --chart-2: var(--teal-9); --chart-3: var(--violet-9); --chart-4: var(--cyan-9); --chart-6: var(--pink-9); --ts-chart-1: var(--chart-1); --ts-chart-2: var(--chart-2); --ts-chart-3: var(--chart-3); --ts-chart-4: var(--chart-4); --ts-chart-5: var(--chart-5); --ts-chart-6: var(--chart-6); } /* Status dots, and corners derived from the theme's one radius. The theme's roles and scales live in theme.stylex.ts. */ :root { --danger-solid: var(--red-9); --danger-border: var(--danger-text); --info-on-solid: #fff; --success-solid: var(--green-9); /* Corners climb from the one radius a `space.xxs` step at a time, so each nests concentrically in the next; the step shrinks with a small radius so all reach 0 together. */ --radius-step: min(var(--radius), 0.25rem); --radius-xs: calc(var(--radius) - var(--radius-step)); --radius-sm: var(--radius); --radius-md: calc(var(--radius) + var(--radius-step)); --radius-lg: calc(var(--radius) + 2 * var(--radius-step)); --radius-xl: calc(var(--radius) + 3 * var(--radius-step)); --radius-chip: max(0px, var(--radius) - 0.125rem); } /* Light step 11 drops under 4.5:1 on its tint, so status text leans 30% toward step 12 (info leans its solid 40%); amber 9 is 1.5:1 on the light page, so its dot takes step 11. */ :root, .light { --inverted-fill: var(--white-a4); /* Floating surfaces sit above the page: white on the off-white page, a step lighter in dark. */ --raised: #fff; /* A prompt input's tray: a2 is enough against white; dark needs a3 to part from `raised`. */ --well: var(--neutral-a2); /* A mark on a `fillStrong` track, like a switch's off thumb: white in light; dark takes step 12 to stand off its track. */ --fill-on-strong: #fff; --danger-text: color-mix(in oklab, var(--red-11), var(--red-12) 30%); /* Radix blue 9 reads sky; info is a deeper royal blue, so a switch's on state looks set. */ --info-solid: #195eff; --info-text: color-mix(in oklab, var(--info-solid), var(--blue-12) 40%); --success-text: color-mix(in oklab, var(--green-11), var(--green-12) 30%); --warning-text: color-mix(in oklab, var(--amber-11), var(--amber-12) 30%); --warning-solid: var(--amber-11); --chart-5: var(--orange-9); } .dark { --inverted-fill: var(--black-a2); --raised: var(--neutral-2); --well: var(--neutral-a3); --fill-on-strong: var(--neutral-12); --danger-text: var(--red-11); --info-solid: #427eff; --info-text: color-mix(in oklab, var(--info-solid), #fff 35%); --success-text: var(--green-11); --warning-text: var(--amber-11); --warning-solid: var(--amber-9); /* Step 9 is too light for the dark page's chart band. */ --chart-5: var(--orange-8); } /* Selected text is the page's, not a component's, so the theme tints it here. */ ::selection { background-color: var(--selection); } /* Flush outside the edge, so it shows on any fill. */ :where( :focus-visible, [data-slot="input-group"]:has( [data-slot="input-group-control"]:focus-visible ), [data-slot="questionnaire-choice"]:has( > [data-slot="questionnaire-choice-input"]:focus-visible ) ) { outline: 1px solid var(--focus-ring); outline-offset: 0; } :where( [aria-invalid="true"], [data-invalid], [data-slot="input-group"]:has( [data-slot="input-group-control"]:is( [aria-invalid="true"], [data-invalid] ) ) ):where( :focus-visible, :has([data-slot="input-group-control"]:focus-visible), :has(> [data-slot="questionnaire-choice-input"]:focus-visible) ) { outline-color: var(--red-11); } /* The composer shows focus with its caret: a text field matches :focus-visible on a click too. */ :where([data-slot="prompt-input"] [data-slot="input-group"]) { outline: none; } /* A popup or questionnaire step takes focus to hold it, not as a control. */ :where( [role="dialog"], [role="alertdialog"], [role="menu"], [role="listbox"], [data-slot="questionnaire-item"] ):focus-visible { outline: none; } /* A list item shows the keyboard on its highlight fill, so it draws no ring. */ :where( [role="option"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"] ):focus-visible { outline: none; } /* A table row spans its scroll container, which would clip the ring's sides, so it draws inside. */ :where(tr):focus-visible { outline-offset: -1px; } /* StyleX can't style a child it didn't render, so an outline badge's icon takes its color here. */ :where([data-slot="badge"][data-variant="outline"]) { &[data-color="success"] > [data-icon] { color: var(--success-text); } &[data-color="info"] > [data-icon] { color: var(--info-text); } &[data-color="warning"] > [data-icon] { color: var(--warning-text); } &[data-color="danger"] > [data-icon] { color: var(--danger-text); } } /* StyleX can't style a child it didn't render, so an alert's icon sits beside its title, centered on the title's 20px line, and takes its color here. */ :where([data-slot="alert"]) > :where(svg) { grid-row: span 2; translate: 0 2px; } :where([data-slot="alert"][data-color="success"]) > :where(svg) { color: var(--success-text); } :where([data-slot="alert"][data-color="info"]) > :where(svg) { color: var(--info-text); } :where([data-slot="alert"][data-color="warning"]) > :where(svg) { color: var(--warning-text); } :where([data-slot="alert"][data-color="danger"]) > :where(svg) { color: var(--danger-text); } /* StyleX can't style a child it didn't render, so a row's icon keeps its size beside a long label. */ :where( [data-slot="sidebar-menu-button"], [data-slot="dropdown-menu-item"], [data-slot="dropdown-menu-sub-trigger"], [data-slot="dropdown-menu-checkbox-item"], [data-slot="dropdown-menu-radio-item"], [data-slot="command-item"] ) > :where(svg) { flex-shrink: 0; } /* A view transition's snapshots hang off the root, out of StyleX's reach, so a sidebar's section change slides here, like a stack: the old section leaves and the new arrives from the other side, `motion.exitOffset` apart under `motion.crossfadeBlur` (`durations.popoverExit` out, `durations.popover` in, on `easings.crossfade`). Each region clips to its own box, and the page swaps at once. */ :root:active-view-transition-type(sidebar-forward) { --sidebar-blur: 4px; --sidebar-shift: -8px; } :root:active-view-transition-type(sidebar-back), :root[dir="rtl"]:active-view-transition-type(sidebar-forward) { --sidebar-blur: 4px; --sidebar-shift: 8px; } :root[dir="rtl"]:active-view-transition-type(sidebar-back) { --sidebar-shift: -8px; } @media (prefers-reduced-motion: reduce) { :root:active-view-transition-type(sidebar-forward, sidebar-back) { --sidebar-blur: 0px; --sidebar-shift: 0px; } } :root:active-view-transition-type( sidebar-forward, sidebar-back )::view-transition-old(root), :root:active-view-transition-type( sidebar-forward, sidebar-back )::view-transition-new(root) { animation: none; } ::view-transition-group(*.sidebar-swap) { animation-duration: var(--duration-popover); animation-timing-function: var(--ease-crossfade); overflow: clip; } ::view-transition-old(*.sidebar-swap) { animation: sidebar-leave var(--duration-popover-exit) var(--ease-crossfade) both; } ::view-transition-new(*.sidebar-swap) { animation: sidebar-arrive var(--duration-popover) var(--ease-crossfade) both; } @keyframes sidebar-leave { to { filter: blur(var(--sidebar-blur)); opacity: 0; translate: var(--sidebar-shift) 0; } } @keyframes sidebar-arrive { from { filter: blur(var(--sidebar-blur)); opacity: 0; translate: calc(-1 * var(--sidebar-shift)) 0; } } /* Base UI renders the hover card viewport's content wrappers, so their crossfade between triggers lives here: the old content fades out on top while the new fades in (`durations.popover` on `easings.out`). */ :where([data-slot="hover-card-viewport"]) > :where([data-current], [data-previous]) { transition: opacity var(--duration-popover) var(--ease-out); } :where([data-slot="hover-card-viewport"]) > :where([data-previous]) { inset: 0 auto auto 0; position: absolute; width: 100%; } :where([data-slot="hover-card-viewport"]) > :where( [data-current][data-starting-style], [data-previous][data-ending-style] ) { opacity: 0; } /* StyleX can't style a child it didn't render, so an item's or attachment's image fills its media box here. */ :where( [data-slot="item-media"][data-variant="image"], [data-slot="attachment-media"][data-variant="image"] ) > :where(img) { height: 100%; object-fit: cover; width: 100%; } /* A directional icon is the consumer's child, which StyleX can't reach, so one attribute turns it to face the reading direction. */ :where([dir="rtl"] [data-rtl-flip]) { transform: scaleX(-1); } /* TanStack Charts renders the chart's focusable svg, which StyleX can't reach, so its ring's corners round here to nest inside a card's. */ :where([data-slot="chart"] svg.ts-chart) { border-radius: var(--radius-sm); } /* A click focuses that svg too, and the browser rings it; only the keyboard should. */ :where([data-slot="chart"] svg.ts-chart:focus:not(:focus-visible)) { outline: none; } /* An input group rings its whole box, so the borderless control inside draws none. */ :where([data-slot="input-group-control"]:focus-visible) { outline: none; } } /* Torph puts each letter of a Swap Text on its own layer, out of reach of a Shimmer's `background-clip: text`, which blanks it. Unlayered, since Torph's own rule is. */ [data-slot="shimmer"] [torph-item]:not(br) { will-change: auto; } 53:T2f17,import * as stylex from "@stylexjs/stylex"; import type { layers } from "@/lib/constella/tokens.stylex"; import { colors, durations, easings, fontSizes, fontWeights, joins, letterSpacings, lineHeights, media, radii, shadows, sizes, space, strokes, } from "@/lib/constella/tokens.stylex"; // A group's own parts, not the focus guards Base UI drops beside an open popup's trigger. const notFirst = ":not(:nth-child(1 of [data-slot]))"; const notLast = ":not(:nth-last-child(1 of [data-slot]))"; // The neighbor before draws the shared edge, or the separator does. const joined = ":not(:nth-child(1 of [data-slot]), [data-slot='button-group-separator'] + *)"; // Whole on their own; in a ButtonGroup, the corners that meet a neighbor take its join. const corners = (radius: Values) => ({ borderEndEndRadius: { default: radius, [notLast]: `calc(${radius} * ${joins.either})` as const, }, borderEndStartRadius: { default: radius, [notFirst]: `calc(${radius} * ${joins.inline})` as const, [notLast]: { default: `calc(${radius} * ${joins.block})` as const, [notFirst]: `calc(${radius} * ${joins.either})` as const, }, }, borderStartEndRadius: { default: radius, [notFirst]: `calc(${radius} * ${joins.block})` as const, [notLast]: { default: `calc(${radius} * ${joins.inline})` as const, [notFirst]: `calc(${radius} * ${joins.either})` as const, }, }, borderStartStartRadius: { default: radius, [notFirst]: `calc(${radius} * ${joins.either})` as const, }, }); /** Corners and start edge that join a neighbor in a ButtonGroup. Apply after a part's own styles. */ const joinStyles = stylex.create({ edges: { borderBlockStartWidth: { default: strokes.border, [joined]: `calc(${strokes.border} * ${joins.block})`, }, borderInlineStartWidth: { default: strokes.border, [joined]: `calc(${strokes.border} * ${joins.inline})`, }, }, full: corners(radii.full), md: corners(radii.md), sm: corners(radii.sm), xs: corners(radii.xs), }); const visuallyHidden = stylex.create({ base: { clipPath: "inset(50%)", height: 1, overflow: "hidden", position: "absolute", whiteSpace: "nowrap", width: 1, }, }); // The type scale's steps, each a size with its line height. Put one before a part's own // styles: `stylex.props(typeStyles.textSm, styles.label)`. const typeStyles = stylex.create({ heading1: { fontSize: fontSizes.heading1, letterSpacing: letterSpacings.heading, lineHeight: lineHeights.heading1, }, heading2: { fontSize: fontSizes.heading2, letterSpacing: letterSpacings.heading, lineHeight: lineHeights.heading2, }, heading3: { fontSize: fontSizes.heading3, letterSpacing: letterSpacings.heading, lineHeight: lineHeights.heading3, }, heading4: { fontSize: fontSizes.heading4, letterSpacing: letterSpacings.heading, lineHeight: lineHeights.heading4, }, heading5: { fontSize: fontSizes.heading5, letterSpacing: letterSpacings.heading, lineHeight: lineHeights.heading5, }, heading6: { fontSize: fontSizes.heading6, letterSpacing: letterSpacings.heading, lineHeight: lineHeights.heading6, }, textLg: { fontSize: fontSizes.textLg, lineHeight: lineHeights.textLg }, textBase: { fontSize: fontSizes.textBase, lineHeight: lineHeights.textBase }, textMd: { fontSize: fontSizes.textMd, lineHeight: lineHeights.textMd }, textSm: { fontSize: fontSizes.textSm, lineHeight: lineHeights.textSm }, captionLg: { fontSize: fontSizes.captionLg, lineHeight: lineHeights.captionLg, }, captionBase: { fontSize: fontSizes.captionBase, lineHeight: lineHeights.captionBase, }, captionSm: { fontSize: fontSizes.captionSm, lineHeight: lineHeights.captionSm, }, captionXs: { fontSize: fontSizes.captionXs, lineHeight: lineHeights.captionXs, }, }); // The open state repeats inside the media block, which StyleX ranks above a bare condition. const interactive = (rest: R, active: A) => ({ default: rest, ":is([data-popup-open])": active, [media.hover]: { default: rest, ":is([data-popup-open])": active, ":hover:not(:disabled)": active, }, ":active:not(:disabled)": active, }); const pressed = ":is([data-pressed])"; const hoverUnpressed = ":hover:not(:disabled, [data-pressed])"; const activeUnpressed = ":active:not(:disabled, [data-pressed])"; const hoverPressed = ":is([data-pressed]):hover:not(:disabled, :active)"; // Selected is `fill`; hover stays a step under, and hovering a selected part stacks // `fillSubtle` on its fill as an inset shadow, so the two never read alike. const selectable = (rest: R) => ({ default: rest, [media.hover]: { default: rest, [hoverUnpressed]: colors.fillSubtle, [pressed]: colors.fill, }, [activeUnpressed]: colors.fillSubtle, [pressed]: colors.fill, }); const lit = `inset 0 0 0 100vmax ${colors.fillSubtle}`; const unlit = "inset 0 0 0 100vmax transparent"; // A pressable's fill and height by variant, for a part that looks like a button but isn't // one. Apply after the part's own styles: each replaces its whole property. const stateStyles = stylex.create({ ghost: { backgroundColor: interactive("transparent", colors.fillSubtle) }, outline: { backgroundColor: interactive(colors.background, colors.fillSubtle), }, secondary: { backgroundColor: interactive(colors.fillSubtle, colors.fill) }, // A ghost toggle, selected while `[data-pressed]`. selectedFill: { backgroundColor: selectable("transparent"), boxShadow: { default: unlit, [media.hover]: { default: unlit, [hoverPressed]: lit }, }, }, // An outline toggle: `selectedFill` on a background, with the resting shadow under it. selectedFillLifted: { backgroundColor: selectable(colors.background), boxShadow: { default: `${unlit}, ${shadows.default}`, [media.hover]: { default: `${unlit}, ${shadows.default}`, ":hover:not(:disabled, :active)": `${unlit}, ${shadows.defaultHover}`, [hoverPressed]: `${lit}, ${shadows.defaultHover}`, ":active:not(:disabled)": `${unlit}, ${shadows.defaultPressed}`, }, ":active:not(:disabled)": `${unlit}, ${shadows.defaultPressed}`, }, }, }); // A control's icon by its size, for an icon the part renders itself (`size={controlIconSize[size]}`). const controlIconSize = { xs: sizes.iconXs, "icon-xs": sizes.iconXs, sm: sizes.iconSm, "icon-sm": sizes.icon, default: sizes.icon, icon: sizes.icon, lg: sizes.icon, "icon-lg": sizes.icon, } as const; // The bar Progress and Meter share, and the label and value above it. A slider's track takes `colors.fillOpaque` too. const trackStyles = stylex.create({ root: { alignItems: "center", display: "flex", flexWrap: "wrap", gap: space.sm, width: "100%", }, track: { backgroundColor: colors.fillOpaque, borderStartStartRadius: radii.full, borderStartEndRadius: radii.full, borderEndStartRadius: radii.full, borderEndEndRadius: radii.full, display: "flex", height: strokes.track, overflow: "hidden", position: "relative", width: "100%", }, indicator: { backgroundColor: colors.accentSolid, borderStartStartRadius: radii.full, borderStartEndRadius: radii.full, borderEndStartRadius: radii.full, borderEndEndRadius: radii.full, height: "100%", transitionDuration: { default: durations.move, [media.reducedMotion]: "0s", }, transitionProperty: "width, background-color", transitionTimingFunction: easings.out, }, label: { color: colors.textPrimary, fontWeight: fontWeights.medium, }, value: { color: colors.textSecondary, fontVariantNumeric: "tabular-nums", marginInlineStart: "auto", }, }); // The weights and colors Text, Heading and Caption take as props. const textWeights = ["regular", "semimedium", "medium", "semibold"] as const; const textColors = [ "primary", "secondary", "muted", "danger", "success", "warning", "info", ] as const; type TextWeight = (typeof textWeights)[number]; type TextColor = (typeof textColors)[number]; const textWeightStyles = stylex.create({ regular: { fontWeight: fontWeights.regular }, semimedium: { fontWeight: fontWeights.semimedium }, medium: { fontWeight: fontWeights.medium }, semibold: { fontWeight: fontWeights.semibold }, }); const textColorStyles = stylex.create({ primary: { color: colors.textPrimary }, secondary: { color: colors.textSecondary }, muted: { color: colors.textMuted }, danger: { color: colors.dangerText }, success: { color: colors.successText }, warning: { color: colors.warningText }, info: { color: colors.infoText }, }); type Values = T[keyof T]; type SpaceValue = Values; type ColorProperty = | "accentColor" | "backgroundColor" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockStartColor" | "borderBottomColor" | "borderColor" | "borderInlineColor" | "borderInlineEndColor" | "borderInlineStartColor" | "borderLeftColor" | "borderRightColor" | "borderTopColor" | "caretColor" | "color" | "columnRuleColor" | "fill" | "outlineColor" | "stroke" | "textDecorationColor"; type SpaceProperty = | `${"margin" | "padding"}${"" | "Block" | "BlockEnd" | "BlockStart" | "Bottom" | "Inline" | "InlineEnd" | "InlineStart" | "Left" | "Right" | "Top"}` | "columnGap" | "gap" | "rowGap"; type RadiusProperty = | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderEndEndRadius" | "borderEndStartRadius" | "borderRadius" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopLeftRadius" | "borderTopRightRadius"; type DurationProperty = | "animationDelay" | "animationDuration" | "transitionDelay" | "transitionDuration"; type EasingProperty = "animationTimingFunction" | "transitionTimingFunction"; type ShorthandProperty = | "animation" | "background" | "border" | "borderBlock" | "borderBlockEnd" | "borderBlockStart" | "borderBottom" | "borderInline" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRight" | "borderTop" | "columnRule" | "font" | "outline" | "textDecoration" | "transition"; type SpaceToken = SpaceValue | Values; type DurationValue = Values; type EasingValue = Values | "ease" | "linear"; type TokenStyles = Partial< Record< ColorProperty, | Values<(typeof colors)["__tokens"]> | "currentColor" | "inherit" | "transparent" | null > & Record< SpaceProperty, | SpaceToken | 0 | "auto" | `${"calc" | "clamp" | "max" | "min"}(${string}${SpaceToken}${string}` | null > & Record< RadiusProperty, | Values | `calc(${Values} * ${string})` | 0 | "inherit" | null > & Record< DurationProperty, DurationValue | `${DurationValue}, ${string}` | 0 | null > & Record & Record< "boxShadow", Values | `${string}var(--${string}` | "none" | null > & Record<"fontSize", Values | "inherit" | null> & Record<"zIndex", Values | 0 | "auto" | null> >; /** A part's `sx`: colors, space, radii, shadows, type sizes, layers and motion take only tokens, as longhands; other properties stay open. A property that takes a token joins the lists above. */ type Sx = stylex.StyleXStyles< Omit & TokenStyles >; export { controlIconSize, joinStyles, stateStyles, textColors, textColorStyles, textWeights, textWeightStyles, trackStyles, typeStyles, visuallyHidden, }; export type { Sx, TextColor, TextWeight }; 54:T424,import { useState } from "react"; interface OpenChangeDetails { event: Event; reason: string; } // Base UI marks only some keyboard changes `data-instant`, and differently per primitive. function skipsMotion({ event, reason }: OpenChangeDetails) { switch (reason) { case "escape-key": case "item-press": case "list-navigation": { return true; } case "trigger-press": { // A click from Enter or Space has no click count. return event instanceof UIEvent && event.detail === 0; } default: { return false; } } } /** Wraps a popup root's `onOpenChange`; `skip` is true while the keyboard, Esc or a picked item moved it. */ function useSkipMotion

( onOpenChange?: (open: boolean, details: Details) => void ) { const [skip, setSkip] = useState(false); function handleOpenChange(open: boolean, details: Details) { setSkip(skipsMotion(details)); onOpenChange?.(open, details); } return [skip, handleOpenChange] as const; } export { useSkipMotion }; 55:T6f0,/* What the browser styles that components and pages rely on being otherwise, after Tailwind's preflight. In base's layer, so any StyleX rule wins over it. */ @layer base { /* Padding and borders count in a box's size; spacing is the layout's, never the browser's. */ *, ::before, ::after { box-sizing: border-box; margin: 0; } html { /* iOS otherwise enlarges text in wide blocks such as code. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; line-height: 1.5; text-rendering: optimizelegibility; } body { min-height: 100dvh; } :where(img, picture, video, canvas, svg) { display: block; max-width: 100%; } /* The browser gives controls a font and color of their own, so they take the page's. */ :where(button, input, select, optgroup, textarea), ::file-selector-button { color: inherit; font: inherit; letter-spacing: inherit; } :where(button) { background: none; border: none; cursor: pointer; padding: 0; text-align: unset; } :where(button:disabled) { cursor: not-allowed; } /* A link looks like its text until a part draws it, as Link does. */ :where(a) { color: inherit; text-decoration: inherit; } :where(p, li, figcaption) { overflow-wrap: break-word; text-wrap: pretty; } :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; } /* Code takes the theme's mono; a part that wants the page font names it, as Kbd does. */ :where(code, kbd, samp, pre) { font-family: var(--font-mono); } /* Important so a component's own `display` can't show what a primitive hid. */ [hidden]:not([hidden="until-found"]) { display: none !important; } } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@stylexjs/stylex",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40stylexjs%2Fstylex","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@stylexjs/stylex"}]]}]}],["$","li","@radix-ui/colors",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Fcolors","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/colors"}]]}]}]]}],["$","$L4e",null,{"namespace":"@constella","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/lib/constella/tokens.stylex.ts","content":"$50","type":"registry:lib"},{"path":"src/lib/constella/theme.stylex.ts","content":"$51","type":"registry:lib"},{"path":"src/lib/constella/base.css","content":"$52","type":"registry:lib"},{"path":"src/lib/constella/styles.ts","content":"$53","type":"registry:lib"},{"path":"src/lib/constella/motion.ts","content":"$54","type":"registry:lib"},{"path":"src/lib/constella/reset.css","content":"$55","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]