@tenstorrent/vesper 0.1.0

package/dist/components/toggle/toggle.d.ts

@@ -0,0 +1,82 @@
+import { type ComponentProps, type ReactNode, Ref } from "react";
+export declare const TOGGLE_SIZES: readonly ["sm", "md", "lg"];
+export type ToggleSize = (typeof TOGGLE_SIZES)[number];
+export type ToggleOption = {
+    /** A unique value identifying this toggle option. */
+    value: string;
+    /** The text label displayed in the toggle option. */
+    text: string;
+    /** An optional accessible `aria-label` for the toggle option. */
+    ariaLabel?: string;
+} | {
+    /** A unique value identifying this toggle option. */
+    value: string;
+    /** An icon element displayed in place of text for the toggle option. */
+    icon: ReactNode;
+    /** A required accessible `aria-label` for icon-only toggle options. */
+    ariaLabel: string;
+};
+export interface ToggleProps extends Omit<ComponentProps<"div">, "children" | "role" | "dangerouslySetInnerHTML" | "dir"> {
+    /** The list of toggle options to render. Each option can display either text or an icon. */
+    options: ToggleOption[];
+    /** The size of the toggle and its options. Affects padding and typography. @default md */
+    size?: ToggleSize;
+    /** The currently selected value (controlled mode). */
+    value?: string;
+    /** The initially selected value (uncontrolled mode). */
+    defaultValue?: string;
+    /** Callback fired when the selected value changes. Receives the newly selected value. */
+    onValueChange?(value: string): void;
+    /** When `true`, disables all toggle options, preventing interaction. @default false */
+    disabled?: boolean;
+    /** The name of the underlying select, used as the field name when submitted with form data. */
+    name?: string;
+    /** When `true`, makes the underlying input required when rendered inside of a form. @default false */
+    required?: boolean;
+    /** A ref forwarded to the enclosing `<div>` element for direct DOM access. */
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A segmented control component for selecting one option from a group of text or icon options.
+ *
+ * Unlike `Checkbox` (which handles individual boolean selections and indeterminate state) and `Switch` (which presents a binary on/off toggle as a sliding pill), `Toggle` allows selecting one value from a set of mutually exclusive options. For usage in forms, you probably want to use either `Checkbox` or `Switch` instead.
+ *
+ * @see packages/vesper/src/components/checkbox/checkbox.tsx
+ * @see packages/vesper/src/components/switch/switch.tsx
+ *
+ * @param {ToggleOption[]} props.options - The list of toggle options to render
+ * @param {ToggleSize} [props.size] - (optional) The size of the toggle. @default md
+ * @param {string} [props.value] - (optional) The currently selected value (controlled)
+ * @param {string} [props.defaultValue] - (optional) The initially selected value (uncontrolled)
+ * @param {(value: string) => void} [props.onValueChange] - (optional) Callback fired when the selected value changes
+ * @param {boolean} [props.disabled] - (optional) Disables all toggle options. @default false
+ * @param {string} [props.name] - (optional) Form field name submitted with form data
+ * @param {boolean} [props.required] - (optional) Marks the toggle as required for form validation. @default false
+ *
+ * While an option is focused, `ArrowLeft`/`ArrowRight` move focus between options, looping around at either end of the list. The group exposes a single tab stop (roving tabindex): `Tab` moves focus to the selected option, or to the first option when nothing is selected.
+ *
+ * You may also pass any additional props to the underlying `div` element
+ *
+ * @example
+ * <Toggle
+ *   options={[
+ *     { value: "grid", icon: <Grid />, ariaLabel: "Grid view" },
+ *     { value: "list", icon: <List />, ariaLabel: "List view" },
+ *   ]}
+ *   value={view}
+ *   onValueChange={setView}
+ * />
+ *
+ * @example
+ * <Toggle
+ *   size="sm"
+ *   options={[
+ *     { value: "day", text: "Day" },
+ *     { value: "week", text: "Week" },
+ *     { value: "month", text: "Month" },
+ *   ]}
+ *   defaultValue="week"
+ * />
+ */
+export declare function Toggle(props: ToggleProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=toggle.d.ts.map

package/dist/components/toggle/toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAGnB,KAAK,SAAS,EACd,GAAG,EAKJ,MAAM,OAAO,CAAC;AAUf,eAAO,MAAM,YAAY,6BAA8B,CAAC;AAExD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAEvD,MAAM,MAAM,YAAY,GACpB;IACE,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,IAAI,EAAE,MAAM,CAAC;IACb,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GACD;IACE,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,IAAI,EAAE,SAAS,CAAC;IAChB,uEAAuE;IACvE,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,cAAc,CAAC,KAAK,CAAC,EACrB,UAAU,GAAG,MAAM,GAAG,yBAAyB,GAAG,KAAK,CACxD;IACC,4FAA4F;IAC5F,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,0FAA0F;IAC1F,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yFAAyF;IACzF,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,uFAAuF;IACvF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sGAAsG;IACtG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,2CA4LxC"}

package/dist/components/toggle/toggle.js

@@ -0,0 +1,129 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState, } from "react";
+import { Typography, } from "../typography/typography.js";
+import { cn } from "../../utils/cn.js";
+import { useMergedRefs } from "../../utils/hooks/useMergedRefs.js";
+export const TOGGLE_SIZES = ["sm", "md", "lg"];
+const TOGGLE_TYPOGRAPHY = {
+    sm: "label-sm",
+    md: "label-sm",
+    lg: "label-lg",
+};
+/**
+ * A segmented control component for selecting one option from a group of text or icon options.
+ *
+ * Unlike `Checkbox` (which handles individual boolean selections and indeterminate state) and `Switch` (which presents a binary on/off toggle as a sliding pill), `Toggle` allows selecting one value from a set of mutually exclusive options. For usage in forms, you probably want to use either `Checkbox` or `Switch` instead.
+ *
+ * @see packages/vesper/src/components/checkbox/checkbox.tsx
+ * @see packages/vesper/src/components/switch/switch.tsx
+ *
+ * @param {ToggleOption[]} props.options - The list of toggle options to render
+ * @param {ToggleSize} [props.size] - (optional) The size of the toggle. @default md
+ * @param {string} [props.value] - (optional) The currently selected value (controlled)
+ * @param {string} [props.defaultValue] - (optional) The initially selected value (uncontrolled)
+ * @param {(value: string) => void} [props.onValueChange] - (optional) Callback fired when the selected value changes
+ * @param {boolean} [props.disabled] - (optional) Disables all toggle options. @default false
+ * @param {string} [props.name] - (optional) Form field name submitted with form data
+ * @param {boolean} [props.required] - (optional) Marks the toggle as required for form validation. @default false
+ *
+ * While an option is focused, `ArrowLeft`/`ArrowRight` move focus between options, looping around at either end of the list. The group exposes a single tab stop (roving tabindex): `Tab` moves focus to the selected option, or to the first option when nothing is selected.
+ *
+ * You may also pass any additional props to the underlying `div` element
+ *
+ * @example
+ * <Toggle
+ *   options={[
+ *     { value: "grid", icon: <Grid />, ariaLabel: "Grid view" },
+ *     { value: "list", icon: <List />, ariaLabel: "List view" },
+ *   ]}
+ *   value={view}
+ *   onValueChange={setView}
+ * />
+ *
+ * @example
+ * <Toggle
+ *   size="sm"
+ *   options={[
+ *     { value: "day", text: "Day" },
+ *     { value: "week", text: "Week" },
+ *     { value: "month", text: "Month" },
+ *   ]}
+ *   defaultValue="week"
+ * />
+ */
+export function Toggle(props) {
+    const { options, className, size = "md", value, defaultValue, onValueChange, id, name, required, disabled, ref, onKeyDown, onBlur, ...rest } = props;
+    const innerRef = useRef(null);
+    const mergedRef = useMergedRefs(innerRef, ref);
+    const [innerValue, setInnerValue] = useState(value ?? defaultValue);
+    const initial = useRef(true);
+    useEffect(() => {
+        if (initial.current) {
+            initial.current = false;
+            return;
+        }
+        if (value !== innerValue) {
+            setInnerValue(value);
+        }
+        // eslint-disable-next-line
+    }, [value]);
+    const handleChangeValue = useCallback((nextValue) => {
+        setInnerValue(nextValue);
+        onValueChange?.(nextValue);
+    }, [onValueChange]);
+    // update inner value when parent form resets
+    useEffect(() => {
+        const form = innerRef.current?.closest("form");
+        if (!form)
+            return;
+        const handleReset = () => {
+            handleChangeValue(defaultValue ?? "");
+        };
+        form.addEventListener("reset", handleReset);
+        return () => form.removeEventListener("reset", handleReset);
+    }, [defaultValue, handleChangeValue]);
+    /**
+     * Mimic the keyboard accessibility of a group of radio inputs
+     * - ArrowRight moves focus forwards to the next option
+     * - ArrowLeft moves focus back to the previous option
+     * - disabled options are skipped
+     * - moving forwards/back at the last/first option loops around
+     */
+    const handleKeyDown = useCallback((e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented ||
+            (e.key !== "ArrowLeft" &&
+                e.key !== "ArrowRight" &&
+                e.key !== "ArrowUp" &&
+                e.key !== "ArrowDown")) {
+            return;
+        }
+        const items = Array.from(innerRef.current.querySelectorAll(".vesper-toggle-item:not(:disabled)"));
+        const currentIndex = items.indexOf(e.target);
+        if (currentIndex === -1)
+            return;
+        e.preventDefault();
+        const direction = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : -1;
+        const nextIndex = (currentIndex + direction + items.length) % items.length;
+        items[nextIndex]?.focus();
+    }, [onKeyDown]);
+    const handleBlur = useCallback((e) => {
+        onBlur?.(e);
+        setFocusedValue(undefined);
+    }, [onBlur]);
+    const [focusedValue, setFocusedValue] = useState(undefined);
+    const focusedIndex = options.findIndex((o) => o.value === focusedValue);
+    const selectedIndex = options.findIndex((o) => o.value === innerValue);
+    /**
+     * roving tabindex: the group only ever exposes a single tab stop, which
+     * follows focus within the group, falling back to the selected option and
+     * finally to the first option when nothing is selected
+     */
+    const tabbableIndex = [focusedIndex, selectedIndex].find((i) => i !== -1) ?? 0;
+    return (_jsxs("div", { ...rest, ref: mergedRef, role: "radiogroup", "aria-required": required, "aria-disabled": disabled, className: cn("vesper-toggle", `vesper-toggle-${size}`, disabled && "vesper-toggle-disabled", className), onKeyDown: handleKeyDown, onBlur: handleBlur, children: [_jsxs("select", { "aria-hidden": true, tabIndex: -1, id: id, name: name, required: required, disabled: disabled, className: "vesper-toggle-select", onChange: (event) => handleChangeValue(event.target.value), value: innerValue ?? "", children: [_jsx("option", { value: "" }), options.map((option) => (_jsx("option", { value: option.value }, option.value)))] }), options.map((option, index) => {
+                const isSelected = innerValue === option.value;
+                return (_jsx(Typography, { as: "button", type: "button", "aria-checked": isSelected, role: "radio", tabIndex: index === tabbableIndex ? 0 : -1, disabled: disabled, variant: TOGGLE_TYPOGRAPHY[size], className: cn("vesper-toggle-item", isSelected && "vesper-toggle-item-active"), "aria-label": option.ariaLabel, onFocus: () => setFocusedValue(option.value), onClick: () => handleChangeValue(isSelected ? "" : option.value), children: "text" in option ? (option.text) : (_jsx("span", { className: "vesper-toggle-icon", children: option.icon })) }, option.value));
+            })] }));
+}
+//# sourceMappingURL=toggle.js.map

package/dist/components/toggle/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"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"}

package/dist/components/tooltip/tooltip.css

@@ -0,0 +1 @@
+.vesper-tooltip{text-align:center;background:var(--vesper-background-inverse-primary);color:var(--vesper-text-inverse-primary);padding:var(--vesper-spacing-2) var(--vesper-spacing-3);border-radius:var(--vesper-radius-1);position:relative}@media (forced-colors:active){.vesper-tooltip{forced-color-adjust:none;color:canvas;background:canvastext}}.vesper-tooltip[data-side=top] .vesper-tooltip-arrow{top:100%}.vesper-tooltip[data-side=bottom] .vesper-tooltip-arrow{bottom:100%;transform:rotate(180deg)}.vesper-tooltip[data-side=top][data-align=center] .vesper-tooltip-arrow{left:calc(50% - .4375rem)}.vesper-tooltip[data-side=bottom][data-align=center] .vesper-tooltip-arrow{left:calc(50% - .4375rem)}.vesper-tooltip[data-side=top][data-align=start] .vesper-tooltip-arrow{left:min(calc(50% - .4375rem), var(--vesper-spacing-4))}.vesper-tooltip[data-side=bottom][data-align=start] .vesper-tooltip-arrow{left:min(calc(50% - .4375rem), var(--vesper-spacing-4))}.vesper-tooltip[data-side=top][data-align=end] .vesper-tooltip-arrow{right:min(calc(50% - .4375rem), var(--vesper-spacing-4))}.vesper-tooltip[data-side=bottom][data-align=end] .vesper-tooltip-arrow{right:min(calc(50% - .4375rem), var(--vesper-spacing-4))}.vesper-tooltip[data-side=left] .vesper-tooltip-arrow{left:100%;transform:translate(-.1875rem)rotate(-90deg)}.vesper-tooltip[data-side=right] .vesper-tooltip-arrow{right:100%;transform:translate(.1875rem)rotate(90deg)}.vesper-tooltip[data-side=right][data-align=center] .vesper-tooltip-arrow{top:calc(50% - .25rem)}.vesper-tooltip[data-side=left][data-align=center] .vesper-tooltip-arrow{top:calc(50% - .25rem)}.vesper-tooltip[data-side=right][data-align=start] .vesper-tooltip-arrow{top:min(calc(50% - .25rem), var(--vesper-spacing-3))}.vesper-tooltip[data-side=left][data-align=start] .vesper-tooltip-arrow{top:min(calc(50% - .25rem), var(--vesper-spacing-3))}.vesper-tooltip[data-side=right][data-align=end] .vesper-tooltip-arrow{bottom:min(calc(50% - .25rem), var(--vesper-spacing-3))}.vesper-tooltip[data-side=left][data-align=end] .vesper-tooltip-arrow{bottom:min(calc(50% - .25rem), var(--vesper-spacing-3))}.vesper-tooltip[data-open]{animation:vesper-tooltip-show var(--vesper-transition-duration-fast) ease}.vesper-tooltip[data-closed]{animation:vesper-tooltip-hide var(--vesper-transition-duration-fast) ease}@keyframes vesper-tooltip-show{0%{opacity:0}to{opacity:1}}@keyframes vesper-tooltip-hide{0%{opacity:1}to{opacity:0}}.vesper-tooltip-arrow{background:var(--vesper-background-inverse-primary);clip-path:polygon(0 0,100% 0,50% 100%);width:.875rem;height:.5rem;position:absolute}

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,58 @@
+import { type ReactNode } from "react";
+import { type PortalContainer } from "../../utils/getPortalContainer.js";
+export declare const TOOLTIP_SIDES: readonly ["top", "right", "bottom", "left"];
+export declare const TOOLTIP_ALIGNMENTS: readonly ["center", "start", "end"];
+export type TooltipSide = (typeof TOOLTIP_SIDES)[number];
+export type TooltipAlign = (typeof TOOLTIP_ALIGNMENTS)[number];
+export interface TooltipProps {
+    /** The content displayed inside the tooltip popup. */
+    content: ReactNode;
+    /** The preferred side of the trigger to render the tooltip against. @default top */
+    side?: TooltipSide;
+    /** The distance in pixels from the trigger to the tooltip (in addition to the arrow height). @default 4 */
+    sideOffset?: number;
+    /** The alignment of the tooltip relative to the trigger along the perpendicular axis. @default center */
+    align?: TooltipAlign;
+    /** An offset in pixels from the aligned edge of the trigger. @default 0 */
+    alignOffset?: number;
+    /** Controls the open state of the tooltip (controlled mode). */
+    open?: boolean;
+    /** Callback fired when the open state changes. Receives the new open state as an argument. */
+    onOpenChange?(value: boolean): void;
+    /** The duration in milliseconds to wait before showing the tooltip after the pointer enters the trigger. @default 500 */
+    delayDuration?: number;
+    /** Whether the tooltip is open by default (uncontrolled mode). */
+    defaultOpen?: boolean;
+    /** The trigger element that the tooltip is attached to. */
+    children?: ReactNode;
+    /** The maximum width of the tooltip in pixels. Content will wrap if it exceeds this width. @default 240 */
+    maxWidth?: number;
+    /** Specify the element or shadow root to portal the tooltip into */
+    container?: PortalContainer;
+}
+/**
+ * A tooltip popup that displays informational content when hovering or focusing a trigger element.
+ *
+ * @param {ReactNode} props.content - The content displayed inside the tooltip popup
+ * @param {ReactNode} [props.children] - (optional) The trigger element the tooltip attaches to
+ * @param {TooltipSide} [props.side] - (optional) The preferred side of the trigger to render the tooltip. @default top
+ * @param {number} [props.sideOffset] - (optional) Distance in pixels from the trigger. @default 4
+ * @param {TooltipAlign} [props.align] - (optional) Alignment relative to the trigger. @default center
+ * @param {number} [props.delayDuration] - (optional) Delay in milliseconds before showing. @default 500
+ * @param {number} [props.maxWidth] - (optional) Maximum width of the tooltip in pixels. @default 240
+ * @param {PortalContainer} [props.container] - (optional) Specify the element or shadow root to portal the tooltip into
+ * @param {boolean} [props.open] - (optional) Controls the open state (controlled)
+ * @param {(value: boolean) => void} [props.onOpenChange] - (optional) Callback fired when open state changes
+ *
+ * @example
+ * <Tooltip content="Copy to clipboard">
+ *   <IconButton icon={<Copy />} aria-label="Copy" />
+ * </Tooltip>
+ *
+ * @example
+ * <Tooltip content="Settings" side="right" delayDuration={200}>
+ *   <Button>Hover me</Button>
+ * </Tooltip>
+ */
+export declare function Tooltip(props: TooltipProps): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/components/tooltip/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAmB,MAAM,OAAO,CAAC;AAKxD,OAAO,EAEL,KAAK,eAAe,EACrB,MAAM,4BAA4B,CAAC;AAIpC,eAAO,MAAM,aAAa,6CAA8C,CAAC;AAEzE,eAAO,MAAM,kBAAkB,qCAAsC,CAAC;AAEtE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzD,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE/D,MAAM,WAAW,YAAY;IAC3B,sDAAsD;IACtD,OAAO,EAAE,SAAS,CAAC;IACnB,oFAAoF;IACpF,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,2GAA2G;IAC3G,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yGAAyG;IACzG,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gEAAgE;IAChE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8FAA8F;IAC9F,YAAY,CAAC,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IACpC,yHAAyH;IACzH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kEAAkE;IAClE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,2GAA2G;IAC3G,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,SAAS,CAAC,EAAE,eAAe,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2UAyE1C"}

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import { Typography } from "../typography/typography.js";
+import { getPortalContainer, } from "../../utils/getPortalContainer.js";
+import { useBaseRemSize } from "../../utils/hooks/useBaseRemSize.js";
+import { isSingleReactElement } from "../../utils/isSingleReactElement.js";
+export const TOOLTIP_SIDES = ["top", "right", "bottom", "left"];
+export const TOOLTIP_ALIGNMENTS = ["center", "start", "end"];
+/**
+ * A tooltip popup that displays informational content when hovering or focusing a trigger element.
+ *
+ * @param {ReactNode} props.content - The content displayed inside the tooltip popup
+ * @param {ReactNode} [props.children] - (optional) The trigger element the tooltip attaches to
+ * @param {TooltipSide} [props.side] - (optional) The preferred side of the trigger to render the tooltip. @default top
+ * @param {number} [props.sideOffset] - (optional) Distance in pixels from the trigger. @default 4
+ * @param {TooltipAlign} [props.align] - (optional) Alignment relative to the trigger. @default center
+ * @param {number} [props.delayDuration] - (optional) Delay in milliseconds before showing. @default 500
+ * @param {number} [props.maxWidth] - (optional) Maximum width of the tooltip in pixels. @default 240
+ * @param {PortalContainer} [props.container] - (optional) Specify the element or shadow root to portal the tooltip into
+ * @param {boolean} [props.open] - (optional) Controls the open state (controlled)
+ * @param {(value: boolean) => void} [props.onOpenChange] - (optional) Callback fired when open state changes
+ *
+ * @example
+ * <Tooltip content="Copy to clipboard">
+ *   <IconButton icon={<Copy />} aria-label="Copy" />
+ * </Tooltip>
+ *
+ * @example
+ * <Tooltip content="Settings" side="right" delayDuration={200}>
+ *   <Button>Hover me</Button>
+ * </Tooltip>
+ */
+export function Tooltip(props) {
+    const { children, content, defaultOpen, open, onOpenChange, delayDuration = 500, maxWidth = 240, align = "center", alignOffset = 0, side = "top", sideOffset = 4, container, } = props;
+    const [ref, setRef] = useState(null);
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);
+    const isOpen = open ?? uncontrolledOpen;
+    const id = useId();
+    const popupId = `vesper-tooltip-${id}`;
+    const baseRemSize = useBaseRemSize();
+    const portalContainer = getPortalContainer(container, ref);
+    if (!isSingleReactElement(children)) {
+        return children;
+    }
+    return (_jsx(BaseTooltip.Provider, { children: _jsxs(BaseTooltip.Root, { defaultOpen: defaultOpen, onOpenChange: (value) => {
+                setUncontrolledOpen(value);
+                onOpenChange?.(value);
+            }, open: open, children: [_jsx(BaseTooltip.Trigger, { "aria-describedby": isOpen ? popupId : undefined, delay: delayDuration, render: children, ref: setRef }), _jsx(BaseTooltip.Portal, { container: portalContainer, children: _jsx(BaseTooltip.Positioner, { align: align, alignOffset: alignOffset * (baseRemSize / 16), side: side, sideOffset: baseRemSize / 2 + sideOffset * (baseRemSize / 16), children: _jsxs(Typography, { variant: "label-xs", className: "vesper-tooltip", style: { maxWidth: `calc(${maxWidth} * (1rem / 16))` }, as: BaseTooltip.Popup, id: popupId, role: "tooltip", children: [content, _jsx("div", { className: "vesper-tooltip-arrow" })] }) }) })] }) }));
+}
+//# sourceMappingURL=tooltip.js.map

package/dist/components/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAkB,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAEhE,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAEhE,OAAO,EACL,kBAAkB,GAEnB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAEpE,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAC;AAEzE,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAU,CAAC;AAiCtE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,OAAO,CAAC,KAAmB;IACzC,MAAM,EACJ,QAAQ,EACR,OAAO,EACP,WAAW,EACX,IAAI,EACJ,YAAY,EACZ,aAAa,GAAG,GAAG,EACnB,QAAQ,GAAG,GAAG,EACd,KAAK,GAAG,QAAQ,EAChB,WAAW,GAAG,CAAC,EACf,IAAI,GAAG,KAAK,EACZ,UAAU,GAAG,CAAC,EACd,SAAS,GACV,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAiB,IAAI,CAAC,CAAC;IAErD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CACtD,WAAW,IAAI,KAAK,CACrB,CAAC;IACF,MAAM,MAAM,GAAG,IAAI,IAAI,gBAAgB,CAAC;IAExC,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,MAAM,OAAO,GAAG,kBAAkB,EAAE,EAAE,CAAC;IAEvC,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAErC,MAAM,eAAe,GAAG,kBAAkB,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;IAE3D,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,EAAE,CAAC;QACpC,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,OAAO,CACL,KAAC,WAAW,CAAC,QAAQ,cACnB,MAAC,WAAW,CAAC,IAAI,IACf,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE;gBACtB,mBAAmB,CAAC,KAAK,CAAC,CAAC;gBAC3B,YAAY,EAAE,CAAC,KAAK,CAAC,CAAC;YACxB,CAAC,EACD,IAAI,EAAE,IAAI,aAEV,KAAC,WAAW,CAAC,OAAO,wBACA,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAC9C,KAAK,EAAE,aAAa,EACpB,MAAM,EAAE,QAAQ,EAChB,GAAG,EAAE,MAAM,GACX,EACF,KAAC,WAAW,CAAC,MAAM,IAAC,SAAS,EAAE,eAAe,YAC5C,KAAC,WAAW,CAAC,UAAU,IACrB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,GAAG,CAAC,WAAW,GAAG,EAAE,CAAC,EAC7C,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,WAAW,GAAG,CAAC,GAAG,UAAU,GAAG,CAAC,WAAW,GAAG,EAAE,CAAC,YAE7D,MAAC,UAAU,IACT,OAAO,EAAC,UAAU,EAClB,SAAS,EAAC,gBAAgB,EAC1B,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,QAAQ,iBAAiB,EAAE,EACtD,EAAE,EAAE,WAAW,CAAC,KAAK,EACrB,EAAE,EAAE,OAAO,EACX,IAAI,EAAC,SAAS,aAEb,OAAO,EACR,cAAK,SAAS,EAAC,sBAAsB,GAAG,IAC7B,GACU,GACN,IACJ,GACE,CACxB,CAAC;AACJ,CAAC"}

package/dist/components/typography/typography.css

@@ -0,0 +1 @@
+.vesper-typography{-webkit-font-smoothing:antialiased;color:currentColor;widows:2;orphans:2;white-space:pre-wrap;font-weight:400}@media (forced-colors:active){.vesper-typography:focus-visible{outline:var(--vesper-stroke-strong) solid CanvasText}}@media not (forced-colors:active){.vesper-typography:focus-visible{box-shadow:var(--vesper-shadow-focus-ring)}}.vesper-typography-display-lg{font-family:var(--vesper-font-sans);font-size:4.5rem;line-height:var(--vesper-leading-none);letter-spacing:var(--vesper-tracking-tighter);text-wrap:pretty}.vesper-typography-display-md{font-family:var(--vesper-font-sans);font-size:4rem;line-height:var(--vesper-leading-none);letter-spacing:var(--vesper-tracking-tighter);text-wrap:pretty}.vesper-typography-display-sm{font-family:var(--vesper-font-sans);font-size:3.5rem;line-height:var(--vesper-leading-none);letter-spacing:var(--vesper-tracking-tighter);text-wrap:pretty}.vesper-typography-heading-2xl{font-family:var(--vesper-font-sans);font-size:3rem;line-height:var(--vesper-leading-tight);letter-spacing:var(--vesper-tracking-tighter);text-wrap:pretty;font-weight:500}.vesper-typography-heading-xl{font-family:var(--vesper-font-sans);font-size:2.5rem;line-height:var(--vesper-leading-tight);letter-spacing:var(--vesper-tracking-tighter);text-wrap:pretty;font-weight:500}.vesper-typography-heading-lg{font-family:var(--vesper-font-sans);font-size:2rem;line-height:var(--vesper-leading-tight);letter-spacing:var(--vesper-tracking-tighter);text-wrap:pretty;font-weight:500}.vesper-typography-heading-md{font-family:var(--vesper-font-sans);font-size:1.5rem;line-height:var(--vesper-leading-snug);letter-spacing:var(--vesper-tracking-tight);text-wrap:pretty;font-weight:500}.vesper-typography-heading-sm{font-family:var(--vesper-font-sans);font-size:1.25rem;line-height:var(--vesper-leading-snug);letter-spacing:var(--vesper-tracking-tight);text-wrap:pretty;font-weight:500}.vesper-typography-heading-xs{font-family:var(--vesper-font-sans);font-size:1rem;line-height:var(--vesper-leading-snug);letter-spacing:var(--vesper-tracking-tight);text-wrap:pretty;font-weight:500}.vesper-typography-copy-xl{font-family:var(--vesper-font-sans);font-size:1.25rem;line-height:var(--vesper-leading-snug);letter-spacing:var(--vesper-tracking-normal)}.vesper-typography-copy-xl-bold{font-family:var(--vesper-font-sans);font-size:1.25rem;line-height:var(--vesper-leading-snug);letter-spacing:var(--vesper-tracking-normal);font-weight:500}.vesper-typography-copy-lg{font-family:var(--vesper-font-sans);font-size:1.125rem;line-height:var(--vesper-leading-snug);letter-spacing:var(--vesper-tracking-normal)}.vesper-typography-copy-lg-bold{font-family:var(--vesper-font-sans);font-size:1.125rem;line-height:var(--vesper-leading-snug);letter-spacing:var(--vesper-tracking-normal);font-weight:500}.vesper-typography-copy-md{font-family:var(--vesper-font-sans);font-size:1rem;line-height:var(--vesper-leading-snug);letter-spacing:var(--vesper-tracking-normal)}.vesper-typography-copy-md-bold{font-family:var(--vesper-font-sans);font-size:1rem;line-height:var(--vesper-leading-snug);letter-spacing:var(--vesper-tracking-normal);font-weight:500}.vesper-typography-copy-sm{font-family:var(--vesper-font-sans);font-size:.875rem;line-height:var(--vesper-leading-normal);letter-spacing:var(--vesper-tracking-normal)}.vesper-typography-copy-sm-bold{font-family:var(--vesper-font-sans);font-size:.875rem;line-height:var(--vesper-leading-normal);letter-spacing:var(--vesper-tracking-normal);font-weight:500}.vesper-typography-copy-xs{font-family:var(--vesper-font-sans);font-size:.8125rem;line-height:var(--vesper-leading-normal);letter-spacing:var(--vesper-tracking-normal)}.vesper-typography-copy-xs-bold{font-family:var(--vesper-font-sans);font-size:.8125rem;line-height:var(--vesper-leading-normal);letter-spacing:var(--vesper-tracking-normal);font-weight:500}.vesper-typography-copy-xs-mono{font-family:var(--vesper-font-mono);font-size:.8125rem;line-height:var(--vesper-leading-normal);letter-spacing:var(--vesper-tracking-normal)}.vesper-typography-label-lg{font-family:var(--vesper-font-sans);font-size:1rem;line-height:var(--vesper-leading-none);letter-spacing:var(--vesper-tracking-normal)}.vesper-typography-label-lg-bold{font-family:var(--vesper-font-sans);font-size:1rem;line-height:var(--vesper-leading-none);letter-spacing:var(--vesper-tracking-normal);font-weight:500}.vesper-typography-label-md{font-family:var(--vesper-font-sans);font-size:.875rem;line-height:var(--vesper-leading-none);letter-spacing:var(--vesper-tracking-normal)}.vesper-typography-label-md-bold{font-family:var(--vesper-font-sans);font-size:.875rem;line-height:var(--vesper-leading-none);letter-spacing:var(--vesper-tracking-normal);font-weight:500}.vesper-typography-label-md-mono{font-family:var(--vesper-font-mono);font-size:.875rem;line-height:var(--vesper-leading-none);letter-spacing:var(--vesper-tracking-normal)}.vesper-typography-label-sm{font-family:var(--vesper-font-sans);font-size:.8125rem;line-height:var(--vesper-leading-none);letter-spacing:var(--vesper-tracking-normal)}.vesper-typography-label-sm-bold{font-family:var(--vesper-font-sans);font-size:.8125rem;line-height:var(--vesper-leading-none);letter-spacing:var(--vesper-tracking-normal);font-weight:500}.vesper-typography-label-sm-mono{font-family:var(--vesper-font-mono);font-size:.8125rem;line-height:var(--vesper-leading-none);letter-spacing:var(--vesper-tracking-normal)}.vesper-typography-label-xs{font-family:var(--vesper-font-sans);font-size:.75rem;line-height:var(--vesper-leading-none);letter-spacing:var(--vesper-tracking-wide)}.vesper-typography-label-xs-bold{font-family:var(--vesper-font-sans);font-size:.75rem;line-height:var(--vesper-leading-none);letter-spacing:var(--vesper-tracking-wide);font-weight:500}.vesper-typography-label-xs-mono{font-family:var(--vesper-font-mono);font-size:.75rem;line-height:var(--vesper-leading-none);letter-spacing:var(--vesper-tracking-wide)}

package/dist/components/typography/typography.d.ts

@@ -0,0 +1,33 @@
+import type { ElementType } from "react";
+import type { Polymorphic } from "../../utils/polymorphic.js";
+export declare const TYPOGRAPHY_VARIANTS: readonly ["display-sm", "display-md", "display-lg", "heading-xs", "heading-sm", "heading-md", "heading-lg", "heading-xl", "heading-2xl", "copy-xs", "copy-xs-bold", "copy-xs-mono", "copy-sm", "copy-sm-bold", "copy-md", "copy-md-bold", "copy-lg", "copy-lg-bold", "copy-xl", "copy-xl-bold", "label-xs", "label-xs-bold", "label-xs-mono", "label-sm", "label-sm-bold", "label-sm-mono", "label-md", "label-md-bold", "label-md-mono", "label-lg", "label-lg-bold"];
+export type TypographyVariant = (typeof TYPOGRAPHY_VARIANTS)[number];
+export type TypographyProps<E extends ElementType = "p"> = Polymorphic<{
+    /** The typographic style variant to apply, controlling font size, weight, line height, and font family. @default copy-md. */
+    variant?: TypographyVariant;
+}, E>;
+/**
+ * A polymorphic component for rendering text with consistent typographic styles. It applies a predefined set of font size, weight, line height, and font family based on the selected `variant`, with options for:
+ * - `display-*`
+ * - `heading-*`
+ * - `label-*`
+ * - `copy-*`
+ *
+ * @param {React.ElementType} [props.as] - (optional) Element type to render. @default p
+ * @param {TypographyVariant} [props.variant] - (optional) Text style variant to apply. See {@link TYPOGRAPHY_VARIANTS} for available options. @default copy-md
+ * @param {string} [props.className] - (optional) Additional CSS `class` names to apply
+ *
+ * You may also pass any additional props to the underlying element
+ *
+ * @example
+ * <Typography variant="heading-lg" as="h1">
+ *   Welcome to Vesper
+ * </Typography>
+ *
+ * @example
+ * <Typography variant="copy-md">
+ *   This is a paragraph of body text.
+ * </Typography>
+ */
+export declare function Typography<E extends ElementType = "p">(props: TypographyProps<E>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=typography.d.ts.map

package/dist/components/typography/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../src/components/typography/typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAGzC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,eAAO,MAAM,mBAAmB,wcAgCtB,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AAErE,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,IAAI,WAAW,CACpE;IACE,6HAA6H;IAC7H,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B,EACD,CAAC,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,EACpD,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,2CAmB1B"}

package/dist/components/typography/typography.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+export const TYPOGRAPHY_VARIANTS = [
+    "display-sm",
+    "display-md",
+    "display-lg",
+    "heading-xs",
+    "heading-sm",
+    "heading-md",
+    "heading-lg",
+    "heading-xl",
+    "heading-2xl",
+    "copy-xs",
+    "copy-xs-bold",
+    "copy-xs-mono",
+    "copy-sm",
+    "copy-sm-bold",
+    "copy-md",
+    "copy-md-bold",
+    "copy-lg",
+    "copy-lg-bold",
+    "copy-xl",
+    "copy-xl-bold",
+    "label-xs",
+    "label-xs-bold",
+    "label-xs-mono",
+    "label-sm",
+    "label-sm-bold",
+    "label-sm-mono",
+    "label-md",
+    "label-md-bold",
+    "label-md-mono",
+    "label-lg",
+    "label-lg-bold",
+];
+/**
+ * A polymorphic component for rendering text with consistent typographic styles. It applies a predefined set of font size, weight, line height, and font family based on the selected `variant`, with options for:
+ * - `display-*`
+ * - `heading-*`
+ * - `label-*`
+ * - `copy-*`
+ *
+ * @param {React.ElementType} [props.as] - (optional) Element type to render. @default p
+ * @param {TypographyVariant} [props.variant] - (optional) Text style variant to apply. See {@link TYPOGRAPHY_VARIANTS} for available options. @default copy-md
+ * @param {string} [props.className] - (optional) Additional CSS `class` names to apply
+ *
+ * You may also pass any additional props to the underlying element
+ *
+ * @example
+ * <Typography variant="heading-lg" as="h1">
+ *   Welcome to Vesper
+ * </Typography>
+ *
+ * @example
+ * <Typography variant="copy-md">
+ *   This is a paragraph of body text.
+ * </Typography>
+ */
+export function Typography(props) {
+    const { as: Component = "p", className, variant = "copy-md", ...rest } = props;
+    return (_jsx(Component, { className: cn("vesper-typography", `vesper-typography-${variant}`, className), ...rest }));
+}
+//# sourceMappingURL=typography.js.map

package/dist/components/typography/typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../../src/components/typography/typography.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAGhC,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,aAAa;IACb,SAAS;IACT,cAAc;IACd,cAAc;IACd,SAAS;IACT,cAAc;IACd,SAAS;IACT,cAAc;IACd,SAAS;IACT,cAAc;IACd,SAAS;IACT,cAAc;IACd,UAAU;IACV,eAAe;IACf,eAAe;IACf,UAAU;IACV,eAAe;IACf,eAAe;IACf,UAAU;IACV,eAAe;IACf,eAAe;IACf,UAAU;IACV,eAAe;CACP,CAAC;AAYX;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,UAAU,UAAU,CACxB,KAAyB;IAEzB,MAAM,EACJ,EAAE,EAAE,SAAS,GAAG,GAAG,EACnB,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,KAAC,SAAS,IACR,SAAS,EAAE,EAAE,CACX,mBAAmB,EACnB,qBAAqB,OAAO,EAAE,EAC9B,SAAS,CACV,KACG,IAAI,GACR,CACH,CAAC;AACJ,CAAC"}

package/dist/styles/animation.css

@@ -0,0 +1 @@
+:root{--vesper-transition-duration-fast:.2s;--vesper-transition-duration-default:.3s;--vesper-transition-duration-slow:.6s}@media (prefers-reduced-motion:reduce){:root{--vesper-transition-duration-fast:0s!important;--vesper-transition-duration-default:0s!important;--vesper-transition-duration-slow:0s!important}}

package/dist/styles/backgrounds.css

@@ -0,0 +1 @@
+:root{--vesper-image-dot:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgZmlsbD0iIzY3ODU4MyIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+Cjwvc3ZnPgo=);--vesper-image-dot-inverse:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgZmlsbD0iI0YxRjhGOCIgZmlsbC1vcGFjaXR5PSIwLjE1Ii8+Cjwvc3ZnPgo=);--vesper-bg-dot-pattern-primary:var(--vesper-image-dot) repeat top var(--vesper-background-primary);--vesper-bg-dot-pattern-secondary:var(--vesper-image-dot) repeat top var(--vesper-background-secondary);--vesper-bg-dot-pattern-tertiary:var(--vesper-image-dot) repeat top var(--vesper-background-tertiary);--vesper-bg-dot-pattern-inverse:var(--vesper-image-dot-inverse) repeat top var(--vesper-background-inverse-primary)}

package/dist/styles/colors.css

@@ -0,0 +1 @@
+:root{--vesper-static-black:#071614;--vesper-static-white:#f1f8f8;--vesper-transparent:transparent;--vesper-stone-0:#f8fcfb;--vesper-stone-50:#eef6f6;--vesper-stone-100:#e8f2f1;--vesper-stone-200:#dfecea;--vesper-stone-300:#d0e1e0;--vesper-stone-400:#bdd1cf;--vesper-stone-500:#a2b9b7;--vesper-stone-600:#718e8c;--vesper-stone-700:#51706d;--vesper-stone-800:#344b49;--vesper-stone-900:#050f0e;--vesper-teal-0:#f7fbfd;--vesper-teal-50:#e7f7fd;--vesper-teal-100:#d3eff8;--vesper-teal-200:#aae5f8;--vesper-teal-300:#8ad2ea;--vesper-teal-400:#5cbcdb;--vesper-teal-500:#32abd2;--vesper-teal-600:#1b8eb1;--vesper-teal-700:#176782;--vesper-teal-800:#144a5d;--vesper-teal-900:#0c2f3b;--vesper-purple-0:#f8f7fd;--vesper-purple-50:#efedfd;--vesper-purple-100:#dedafb;--vesper-purple-200:#c9c2fa;--vesper-purple-300:#a89eea;--vesper-purple-400:#7e71d0;--vesper-purple-500:#6458b6;--vesper-purple-600:#4d429a;--vesper-purple-700:#342b6e;--vesper-purple-800:#272150;--vesper-purple-900:#1d1b2d;--vesper-mint-0:#f1fdfb;--vesper-mint-50:#e3fcf9;--vesper-mint-100:#d2f4ef;--vesper-mint-200:#b6ede2;--vesper-mint-300:#7cdecc;--vesper-mint-400:#40bfa8;--vesper-mint-500:#29a38d;--vesper-mint-600:#227767;--vesper-mint-700:#13584b;--vesper-mint-800:#0f3d35;--vesper-mint-900:#112c26;--vesper-pink-0:#fdf7fb;--vesper-pink-50:#fdedf7;--vesper-pink-100:#fcd9ef;--vesper-pink-200:#ffc2e8;--vesper-pink-300:#f17ec5;--vesper-pink-400:#e557af;--vesper-pink-500:#be378a;--vesper-pink-600:#91306c;--vesper-pink-700:#6b2450;--vesper-pink-800:#441d35;--vesper-pink-900:#2e0f22;--vesper-yellow-0:#fff7e5;--vesper-yellow-50:#fff2d6;--vesper-yellow-100:#ffeabd;--vesper-yellow-200:#ffe0a3;--vesper-yellow-300:#ffca61;--vesper-yellow-400:#ffb71b;--vesper-yellow-500:#d99a12;--vesper-yellow-600:#986f16;--vesper-yellow-700:#6d5217;--vesper-yellow-800:#473715;--vesper-yellow-900:#2e2614;--vesper-green-0:#f1fdf8;--vesper-green-50:#e3fcf4;--vesper-green-100:#d2f4e9;--vesper-green-200:#b1ecd6;--vesper-green-300:#78ddb8;--vesper-green-400:#40bf90;--vesper-green-500:#29a376;--vesper-green-600:#227758;--vesper-green-700:#13583f;--vesper-green-800:#0f3d2c;--vesper-green-900:#112c21;--vesper-red-0:#feebe7;--vesper-red-50:#fcdfd9;--vesper-red-100:#fccac0;--vesper-red-200:#f99a86;--vesper-red-300:#f56447;--vesper-red-400:#ef3f1a;--vesper-red-500:#cb2c0b;--vesper-red-600:#9b2208;--vesper-red-700:#6e1d0c;--vesper-red-800:#531609;--vesper-red-900:#2f140e;--vesper-amber-0:#fff4e5;--vesper-amber-50:#ffedd6;--vesper-amber-100:#ffe4c2;--vesper-amber-200:#ffd4a3;--vesper-amber-300:#ffba6b;--vesper-amber-400:#ffa033;--vesper-amber-500:#ed881d;--vesper-amber-600:#a8610b;--vesper-amber-700:#8d5107;--vesper-amber-800:#523614;--vesper-amber-900:#35230d;--vesper-sky-0:#f5fbfe;--vesper-sky-50:#e5f5ff;--vesper-sky-100:#d0e9fb;--vesper-sky-200:#acd7f6;--vesper-sky-300:#7ebeed;--vesper-sky-400:#55aae7;--vesper-sky-500:#2375c7;--vesper-sky-600:#1059a2;--vesper-sky-700:#134272;--vesper-sky-800:#135;--vesper-sky-900:#122130;--vesper-alpha-stone-0:rgba(28,161,157,.024);--vesper-alpha-stone-50:rgba(14,129,115,.043);--vesper-alpha-stone-100:rgba(19,124,99,.075);--vesper-alpha-stone-200:rgba(38,126,112,.125);--vesper-alpha-stone-300:rgba(15,97,87,.17);--vesper-alpha-stone-400:rgba(8,78,75,.255);--vesper-alpha-stone-500:rgba(3,58,56,.345);--vesper-alpha-stone-600:rgba(7,60,57,.573);--vesper-alpha-stone-700:rgba(17,59,55,.73);--vesper-alpha-stone-800:rgba(14,42,39,.84);--vesper-alpha-stone-900:rgba(0,15,15,.973);--vesper-alpha-contrast-0:transparent;--vesper-alpha-contrast-50:rgba(7,22,20,.05);--vesper-alpha-contrast-100:rgba(7,22,20,.1);--vesper-alpha-contrast-200:rgba(7,22,20,.2);--vesper-alpha-contrast-300:rgba(7,22,20,.3);--vesper-alpha-contrast-400:rgba(7,22,20,.4);--vesper-alpha-contrast-500:rgba(7,22,20,.5);--vesper-alpha-contrast-600:rgba(7,22,20,.6);--vesper-alpha-contrast-700:rgba(7,22,20,.7);--vesper-alpha-contrast-800:rgba(7,22,20,.8);--vesper-alpha-contrast-900:rgba(7,22,20,.9);--vesper-alpha-inverse-0:transparent;--vesper-alpha-inverse-50:rgba(241,248,248,.05);--vesper-alpha-inverse-100:rgba(241,248,248,.1);--vesper-alpha-inverse-200:rgba(241,248,248,.2);--vesper-alpha-inverse-300:rgba(241,248,248,.3);--vesper-alpha-inverse-400:rgba(241,248,248,.4);--vesper-alpha-inverse-500:rgba(241,248,248,.5);--vesper-alpha-inverse-600:rgba(241,248,248,.6);--vesper-alpha-inverse-700:rgba(241,248,248,.7);--vesper-alpha-inverse-800:rgba(241,248,248,.8);--vesper-alpha-inverse-900:rgba(241,248,248,.9);--vesper-alpha-black-0:transparent;--vesper-alpha-black-50:rgba(7,22,20,.05);--vesper-alpha-black-100:rgba(7,22,20,.1);--vesper-alpha-black-200:rgba(7,22,20,.2);--vesper-alpha-black-300:rgba(7,22,20,.3);--vesper-alpha-black-400:rgba(7,22,20,.4);--vesper-alpha-black-500:rgba(7,22,20,.5);--vesper-alpha-black-600:rgba(7,22,20,.6);--vesper-alpha-black-700:rgba(7,22,20,.7);--vesper-alpha-black-800:rgba(7,22,20,.8);--vesper-alpha-black-900:rgba(7,22,20,.9);--vesper-alpha-white-0:transparent;--vesper-alpha-white-50:rgba(241,248,248,.05);--vesper-alpha-white-100:rgba(241,248,248,.1);--vesper-alpha-white-200:rgba(241,248,248,.2);--vesper-alpha-white-300:rgba(241,248,248,.3);--vesper-alpha-white-400:rgba(241,248,248,.4);--vesper-alpha-white-500:rgba(241,248,248,.5);--vesper-alpha-white-600:rgba(241,248,248,.6);--vesper-alpha-white-700:rgba(241,248,248,.7);--vesper-alpha-white-800:rgba(241,248,248,.8);--vesper-alpha-white-900:rgba(241,248,248,.9)}@media (prefers-color-scheme:dark){:root{--vesper-static-black:#071614;--vesper-static-white:#f1f8f8;--vesper-transparent:transparent;--vesper-stone-0:#050f0e;--vesper-stone-50:#0b1817;--vesper-stone-100:#13201e;--vesper-stone-200:#1b2826;--vesper-stone-300:#233431;--vesper-stone-400:#2d4340;--vesper-stone-500:#395651;--vesper-stone-600:#5e7d78;--vesper-stone-700:#7d9b97;--vesper-stone-800:#b3ccc8;--vesper-stone-900:#e7f0ee;--vesper-teal-0:#05181e;--vesper-teal-50:#0a2229;--vesper-teal-100:#0e303a;--vesper-teal-200:#073e4f;--vesper-teal-300:#0d4659;--vesper-teal-400:#0f546b;--vesper-teal-500:#136b86;--vesper-teal-600:#1a8fb2;--vesper-teal-700:#46afd2;--vesper-teal-800:#7dcde8;--vesper-teal-900:#a3e0f5;--vesper-purple-0:#0f0e1b;--vesper-purple-50:#141127;--vesper-purple-100:#1d1938;--vesper-purple-200:#27214a;--vesper-purple-300:#2f285d;--vesper-purple-400:#382f74;--vesper-purple-500:#5145a1;--vesper-purple-600:#7e71d0;--vesper-purple-700:#9c91e3;--vesper-purple-800:#b4a8ff;--vesper-purple-900:#cdc6fa;--vesper-mint-0:#041f19;--vesper-mint-50:#073128;--vesper-mint-100:#0b4137;--vesper-mint-200:#0b5144;--vesper-mint-300:#116959;--vesper-mint-400:#15937c;--vesper-mint-500:#1bbb9e;--vesper-mint-600:#39c6ac;--vesper-mint-700:#4ce5c9;--vesper-mint-800:#82edd9;--vesper-mint-900:#caf7f1;--vesper-pink-0:#1f0a17;--vesper-pink-50:#2e0f22;--vesper-pink-100:#3d152e;--vesper-pink-200:#491d38;--vesper-pink-300:#6b2450;--vesper-pink-400:#91306c;--vesper-pink-500:#be378a;--vesper-pink-600:#e34faa;--vesper-pink-700:#f17ec5;--vesper-pink-800:#ffc2e8;--vesper-pink-900:#fde2f3;--vesper-yellow-0:#211908;--vesper-yellow-50:#31260c;--vesper-yellow-100:#3f3112;--vesper-yellow-200:#534018;--vesper-yellow-300:#7a5c1a;--vesper-yellow-400:#9c7217;--vesper-yellow-500:#d09311;--vesper-yellow-600:#ffb71b;--vesper-yellow-700:#ffc757;--vesper-yellow-800:#ffd88a;--vesper-yellow-900:#fec;--vesper-green-0:#041f15;--vesper-green-50:#073120;--vesper-green-100:#0b412e;--vesper-green-200:#0b5137;--vesper-green-300:#106043;--vesper-green-400:#128159;--vesper-green-500:#19ae77;--vesper-green-600:#38c28f;--vesper-green-700:#4ce5ad;--vesper-green-800:#82edc6;--vesper-green-900:#caf7e9;--vesper-red-0:#1d0f0c;--vesper-red-50:#2b130d;--vesper-red-100:#3d170f;--vesper-red-200:#5c180a;--vesper-red-300:#85230f;--vesper-red-400:#af290e;--vesper-red-500:#cb2c0b;--vesper-red-600:#f04b28;--vesper-red-700:#f37358;--vesper-red-800:#f99b86;--vesper-red-900:#fac6b7;--vesper-amber-0:#211608;--vesper-amber-50:#31210c;--vesper-amber-100:#432b0e;--vesper-amber-200:#523614;--vesper-amber-300:#8a530f;--vesper-amber-400:#bb690c;--vesper-amber-500:#ed881d;--vesper-amber-600:#ffa333;--vesper-amber-700:#ffb35c;--vesper-amber-800:#ffcf99;--vesper-amber-900:#ffe7cc;--vesper-sky-0:#09101b;--vesper-sky-50:#0f1b2d;--vesper-sky-100:#10243e;--vesper-sky-200:#092e53;--vesper-sky-300:#0f4d86;--vesper-sky-400:#135ea7;--vesper-sky-500:#1671c9;--vesper-sky-600:#0091ff;--vesper-sky-700:#33a3ff;--vesper-sky-800:#70b8ff;--vesper-sky-900:#c2e0ff;--vesper-alpha-stone-0:rgba(33,60,61,.03);--vesper-alpha-stone-50:rgba(154,246,244,.035);--vesper-alpha-stone-100:rgba(184,244,243,.075);--vesper-alpha-stone-200:rgba(204,245,241,.11);--vesper-alpha-stone-300:rgba(184,245,233,.16);--vesper-alpha-stone-400:rgba(168,225,217,.247);--vesper-alpha-stone-500:rgba(144,213,203,.357);--vesper-alpha-stone-600:rgba(195,255,247,.463);--vesper-alpha-stone-700:rgba(207,252,246,.592);--vesper-alpha-stone-800:rgba(212,242,237,.835);--vesper-alpha-stone-900:rgba(245,255,253,.937);--vesper-alpha-contrast-0:transparent;--vesper-alpha-contrast-50:rgba(241,248,248,.05);--vesper-alpha-contrast-100:rgba(241,248,248,.1);--vesper-alpha-contrast-200:rgba(241,248,248,.2);--vesper-alpha-contrast-300:rgba(241,248,248,.3);--vesper-alpha-contrast-400:rgba(241,248,248,.4);--vesper-alpha-contrast-500:rgba(241,248,248,.5);--vesper-alpha-contrast-600:rgba(241,248,248,.6);--vesper-alpha-contrast-700:rgba(241,248,248,.7);--vesper-alpha-contrast-800:rgba(241,248,248,.8);--vesper-alpha-contrast-900:rgba(241,248,248,.9);--vesper-alpha-inverse-0:transparent;--vesper-alpha-inverse-50:rgba(7,22,20,.05);--vesper-alpha-inverse-100:rgba(7,22,20,.1);--vesper-alpha-inverse-200:rgba(7,22,20,.2);--vesper-alpha-inverse-300:rgba(7,22,20,.3);--vesper-alpha-inverse-400:rgba(7,22,20,.4);--vesper-alpha-inverse-500:rgba(7,22,20,.5);--vesper-alpha-inverse-600:rgba(7,22,20,.6);--vesper-alpha-inverse-700:rgba(7,22,20,.7);--vesper-alpha-inverse-800:rgba(7,22,20,.8);--vesper-alpha-inverse-900:rgba(7,22,20,.9)}}html[data-vesper-theme=light]{--vesper-static-black:#071614;--vesper-static-white:#f1f8f8;--vesper-transparent:transparent;--vesper-stone-0:#f8fcfb;--vesper-stone-50:#eef6f6;--vesper-stone-100:#e8f2f1;--vesper-stone-200:#dfecea;--vesper-stone-300:#d0e1e0;--vesper-stone-400:#bdd1cf;--vesper-stone-500:#a2b9b7;--vesper-stone-600:#718e8c;--vesper-stone-700:#51706d;--vesper-stone-800:#344b49;--vesper-stone-900:#050f0e;--vesper-teal-0:#f7fbfd;--vesper-teal-50:#e7f7fd;--vesper-teal-100:#d3eff8;--vesper-teal-200:#aae5f8;--vesper-teal-300:#8ad2ea;--vesper-teal-400:#5cbcdb;--vesper-teal-500:#32abd2;--vesper-teal-600:#1b8eb1;--vesper-teal-700:#176782;--vesper-teal-800:#144a5d;--vesper-teal-900:#0c2f3b;--vesper-purple-0:#f8f7fd;--vesper-purple-50:#efedfd;--vesper-purple-100:#dedafb;--vesper-purple-200:#c9c2fa;--vesper-purple-300:#a89eea;--vesper-purple-400:#7e71d0;--vesper-purple-500:#6458b6;--vesper-purple-600:#4d429a;--vesper-purple-700:#342b6e;--vesper-purple-800:#272150;--vesper-purple-900:#1d1b2d;--vesper-mint-0:#f1fdfb;--vesper-mint-50:#e3fcf9;--vesper-mint-100:#d2f4ef;--vesper-mint-200:#b6ede2;--vesper-mint-300:#7cdecc;--vesper-mint-400:#40bfa8;--vesper-mint-500:#29a38d;--vesper-mint-600:#227767;--vesper-mint-700:#13584b;--vesper-mint-800:#0f3d35;--vesper-mint-900:#112c26;--vesper-pink-0:#fdf7fb;--vesper-pink-50:#fdedf7;--vesper-pink-100:#fcd9ef;--vesper-pink-200:#ffc2e8;--vesper-pink-300:#f17ec5;--vesper-pink-400:#e557af;--vesper-pink-500:#be378a;--vesper-pink-600:#91306c;--vesper-pink-700:#6b2450;--vesper-pink-800:#441d35;--vesper-pink-900:#2e0f22;--vesper-yellow-0:#fff7e5;--vesper-yellow-50:#fff2d6;--vesper-yellow-100:#ffeabd;--vesper-yellow-200:#ffe0a3;--vesper-yellow-300:#ffca61;--vesper-yellow-400:#ffb71b;--vesper-yellow-500:#d99a12;--vesper-yellow-600:#986f16;--vesper-yellow-700:#6d5217;--vesper-yellow-800:#473715;--vesper-yellow-900:#2e2614;--vesper-green-0:#f1fdf8;--vesper-green-50:#e3fcf4;--vesper-green-100:#d2f4e9;--vesper-green-200:#b1ecd6;--vesper-green-300:#78ddb8;--vesper-green-400:#40bf90;--vesper-green-500:#29a376;--vesper-green-600:#227758;--vesper-green-700:#13583f;--vesper-green-800:#0f3d2c;--vesper-green-900:#112c21;--vesper-red-0:#feebe7;--vesper-red-50:#fcdfd9;--vesper-red-100:#fccac0;--vesper-red-200:#f99a86;--vesper-red-300:#f56447;--vesper-red-400:#ef3f1a;--vesper-red-500:#cb2c0b;--vesper-red-600:#9b2208;--vesper-red-700:#6e1d0c;--vesper-red-800:#531609;--vesper-red-900:#2f140e;--vesper-amber-0:#fff4e5;--vesper-amber-50:#ffedd6;--vesper-amber-100:#ffe4c2;--vesper-amber-200:#ffd4a3;--vesper-amber-300:#ffba6b;--vesper-amber-400:#ffa033;--vesper-amber-500:#ed881d;--vesper-amber-600:#a8610b;--vesper-amber-700:#8d5107;--vesper-amber-800:#523614;--vesper-amber-900:#35230d;--vesper-sky-0:#f5fbfe;--vesper-sky-50:#e5f5ff;--vesper-sky-100:#d0e9fb;--vesper-sky-200:#acd7f6;--vesper-sky-300:#7ebeed;--vesper-sky-400:#55aae7;--vesper-sky-500:#2375c7;--vesper-sky-600:#1059a2;--vesper-sky-700:#134272;--vesper-sky-800:#135;--vesper-sky-900:#122130;--vesper-alpha-stone-0:rgba(28,161,157,.024);--vesper-alpha-stone-50:rgba(14,129,115,.043);--vesper-alpha-stone-100:rgba(19,124,99,.075);--vesper-alpha-stone-200:rgba(38,126,112,.125);--vesper-alpha-stone-300:rgba(15,97,87,.17);--vesper-alpha-stone-400:rgba(8,78,75,.255);--vesper-alpha-stone-500:rgba(3,58,56,.345);--vesper-alpha-stone-600:rgba(7,60,57,.573);--vesper-alpha-stone-700:rgba(17,59,55,.73);--vesper-alpha-stone-800:rgba(14,42,39,.84);--vesper-alpha-stone-900:rgba(0,15,15,.973);--vesper-alpha-contrast-0:transparent;--vesper-alpha-contrast-50:rgba(7,22,20,.05);--vesper-alpha-contrast-100:rgba(7,22,20,.1);--vesper-alpha-contrast-200:rgba(7,22,20,.2);--vesper-alpha-contrast-300:rgba(7,22,20,.3);--vesper-alpha-contrast-400:rgba(7,22,20,.4);--vesper-alpha-contrast-500:rgba(7,22,20,.5);--vesper-alpha-contrast-600:rgba(7,22,20,.6);--vesper-alpha-contrast-700:rgba(7,22,20,.7);--vesper-alpha-contrast-800:rgba(7,22,20,.8);--vesper-alpha-contrast-900:rgba(7,22,20,.9);--vesper-alpha-inverse-0:transparent;--vesper-alpha-inverse-50:rgba(241,248,248,.05);--vesper-alpha-inverse-100:rgba(241,248,248,.1);--vesper-alpha-inverse-200:rgba(241,248,248,.2);--vesper-alpha-inverse-300:rgba(241,248,248,.3);--vesper-alpha-inverse-400:rgba(241,248,248,.4);--vesper-alpha-inverse-500:rgba(241,248,248,.5);--vesper-alpha-inverse-600:rgba(241,248,248,.6);--vesper-alpha-inverse-700:rgba(241,248,248,.7);--vesper-alpha-inverse-800:rgba(241,248,248,.8);--vesper-alpha-inverse-900:rgba(241,248,248,.9)}html[data-vesper-theme=dark]{--vesper-static-black:#071614;--vesper-static-white:#f1f8f8;--vesper-transparent:transparent;--vesper-stone-0:#050f0e;--vesper-stone-50:#0b1817;--vesper-stone-100:#13201e;--vesper-stone-200:#1b2826;--vesper-stone-300:#233431;--vesper-stone-400:#2d4340;--vesper-stone-500:#395651;--vesper-stone-600:#5e7d78;--vesper-stone-700:#7d9b97;--vesper-stone-800:#b3ccc8;--vesper-stone-900:#e7f0ee;--vesper-teal-0:#05181e;--vesper-teal-50:#0a2229;--vesper-teal-100:#0e303a;--vesper-teal-200:#073e4f;--vesper-teal-300:#0d4659;--vesper-teal-400:#0f546b;--vesper-teal-500:#136b86;--vesper-teal-600:#1a8fb2;--vesper-teal-700:#46afd2;--vesper-teal-800:#7dcde8;--vesper-teal-900:#a3e0f5;--vesper-purple-0:#0f0e1b;--vesper-purple-50:#141127;--vesper-purple-100:#1d1938;--vesper-purple-200:#27214a;--vesper-purple-300:#2f285d;--vesper-purple-400:#382f74;--vesper-purple-500:#5145a1;--vesper-purple-600:#7e71d0;--vesper-purple-700:#9c91e3;--vesper-purple-800:#b4a8ff;--vesper-purple-900:#cdc6fa;--vesper-mint-0:#041f19;--vesper-mint-50:#073128;--vesper-mint-100:#0b4137;--vesper-mint-200:#0b5144;--vesper-mint-300:#116959;--vesper-mint-400:#15937c;--vesper-mint-500:#1bbb9e;--vesper-mint-600:#39c6ac;--vesper-mint-700:#4ce5c9;--vesper-mint-800:#82edd9;--vesper-mint-900:#caf7f1;--vesper-pink-0:#1f0a17;--vesper-pink-50:#2e0f22;--vesper-pink-100:#3d152e;--vesper-pink-200:#491d38;--vesper-pink-300:#6b2450;--vesper-pink-400:#91306c;--vesper-pink-500:#be378a;--vesper-pink-600:#e34faa;--vesper-pink-700:#f17ec5;--vesper-pink-800:#ffc2e8;--vesper-pink-900:#fde2f3;--vesper-yellow-0:#211908;--vesper-yellow-50:#31260c;--vesper-yellow-100:#3f3112;--vesper-yellow-200:#534018;--vesper-yellow-300:#7a5c1a;--vesper-yellow-400:#9c7217;--vesper-yellow-500:#d09311;--vesper-yellow-600:#ffb71b;--vesper-yellow-700:#ffc757;--vesper-yellow-800:#ffd88a;--vesper-yellow-900:#fec;--vesper-green-0:#041f15;--vesper-green-50:#073120;--vesper-green-100:#0b412e;--vesper-green-200:#0b5137;--vesper-green-300:#106043;--vesper-green-400:#128159;--vesper-green-500:#19ae77;--vesper-green-600:#38c28f;--vesper-green-700:#4ce5ad;--vesper-green-800:#82edc6;--vesper-green-900:#caf7e9;--vesper-red-0:#1d0f0c;--vesper-red-50:#2b130d;--vesper-red-100:#3d170f;--vesper-red-200:#5c180a;--vesper-red-300:#85230f;--vesper-red-400:#af290e;--vesper-red-500:#cb2c0b;--vesper-red-600:#f04b28;--vesper-red-700:#f37358;--vesper-red-800:#f99b86;--vesper-red-900:#fac6b7;--vesper-amber-0:#211608;--vesper-amber-50:#31210c;--vesper-amber-100:#432b0e;--vesper-amber-200:#523614;--vesper-amber-300:#8a530f;--vesper-amber-400:#bb690c;--vesper-amber-500:#ed881d;--vesper-amber-600:#ffa333;--vesper-amber-700:#ffb35c;--vesper-amber-800:#ffcf99;--vesper-amber-900:#ffe7cc;--vesper-sky-0:#09101b;--vesper-sky-50:#0f1b2d;--vesper-sky-100:#10243e;--vesper-sky-200:#092e53;--vesper-sky-300:#0f4d86;--vesper-sky-400:#135ea7;--vesper-sky-500:#1671c9;--vesper-sky-600:#0091ff;--vesper-sky-700:#33a3ff;--vesper-sky-800:#70b8ff;--vesper-sky-900:#c2e0ff;--vesper-alpha-stone-0:rgba(33,60,61,.03);--vesper-alpha-stone-50:rgba(154,246,244,.035);--vesper-alpha-stone-100:rgba(184,244,243,.075);--vesper-alpha-stone-200:rgba(204,245,241,.11);--vesper-alpha-stone-300:rgba(184,245,233,.16);--vesper-alpha-stone-400:rgba(168,225,217,.247);--vesper-alpha-stone-500:rgba(144,213,203,.357);--vesper-alpha-stone-600:rgba(195,255,247,.463);--vesper-alpha-stone-700:rgba(207,252,246,.592);--vesper-alpha-stone-800:rgba(212,242,237,.835);--vesper-alpha-stone-900:rgba(245,255,253,.937);--vesper-alpha-contrast-0:transparent;--vesper-alpha-contrast-50:rgba(241,248,248,.05);--vesper-alpha-contrast-100:rgba(241,248,248,.1);--vesper-alpha-contrast-200:rgba(241,248,248,.2);--vesper-alpha-contrast-300:rgba(241,248,248,.3);--vesper-alpha-contrast-400:rgba(241,248,248,.4);--vesper-alpha-contrast-500:rgba(241,248,248,.5);--vesper-alpha-contrast-600:rgba(241,248,248,.6);--vesper-alpha-contrast-700:rgba(241,248,248,.7);--vesper-alpha-contrast-800:rgba(241,248,248,.8);--vesper-alpha-contrast-900:rgba(241,248,248,.9);--vesper-alpha-inverse-0:transparent;--vesper-alpha-inverse-50:rgba(7,22,20,.05);--vesper-alpha-inverse-100:rgba(7,22,20,.1);--vesper-alpha-inverse-200:rgba(7,22,20,.2);--vesper-alpha-inverse-300:rgba(7,22,20,.3);--vesper-alpha-inverse-400:rgba(7,22,20,.4);--vesper-alpha-inverse-500:rgba(7,22,20,.5);--vesper-alpha-inverse-600:rgba(7,22,20,.6);--vesper-alpha-inverse-700:rgba(7,22,20,.7);--vesper-alpha-inverse-800:rgba(7,22,20,.8);--vesper-alpha-inverse-900:rgba(7,22,20,.9)}:root{--vesper-background-primary:var(--vesper-stone-0);--vesper-background-secondary:var(--vesper-stone-50);--vesper-background-tertiary:var(--vesper-stone-100);--vesper-background-disabled:var(--vesper-alpha-stone-50);--vesper-background-inverse-primary:var(--vesper-alpha-stone-900);--vesper-background-inverse-secondary:var(--vesper-alpha-stone-800);--vesper-background-inverse-disabled:var(--vesper-alpha-inverse-50);--vesper-background-accent-subtle:var(--vesper-teal-50);--vesper-background-accent-base:var(--vesper-teal-400);--vesper-background-success-subtle:var(--vesper-green-50);--vesper-background-success-base:var(--vesper-green-600);--vesper-background-warning-subtle:var(--vesper-amber-0);--vesper-background-warning-base:var(--vesper-amber-600);--vesper-background-error-subtle:var(--vesper-red-0);--vesper-background-error-base:var(--vesper-red-500);--vesper-background-info-subtle:var(--vesper-sky-50);--vesper-background-info-base:var(--vesper-sky-600);--vesper-background-static-white:var(--vesper-static-white);--vesper-background-static-black:var(--vesper-static-black);--vesper-background-brand-purple-subtle:var(--vesper-purple-100);--vesper-background-brand-purple-base:var(--vesper-purple-600);--vesper-background-brand-mint-subtle:var(--vesper-mint-50);--vesper-background-brand-mint-base:var(--vesper-mint-600);--vesper-background-brand-pink-subtle:var(--vesper-pink-50);--vesper-background-brand-pink-base:var(--vesper-pink-600);--vesper-background-brand-yellow-subtle:var(--vesper-yellow-50);--vesper-background-brand-yellow-base:var(--vesper-yellow-400);--vesper-text-primary:var(--vesper-stone-900);--vesper-text-secondary:var(--vesper-stone-800);--vesper-text-tertiary:var(--vesper-stone-700);--vesper-text-disabled:var(--vesper-alpha-stone-500);--vesper-text-inverse-primary:var(--vesper-stone-0);--vesper-text-inverse-secondary:var(--vesper-stone-300);--vesper-text-inverse-tertiary:var(--vesper-stone-500);--vesper-text-alpha-disabled:var(--vesper-alpha-inverse-300);--vesper-text-on-color:var(--vesper-static-white);--vesper-text-accent:var(--vesper-teal-700);--vesper-text-success:var(--vesper-mint-600);--vesper-text-warning:var(--vesper-amber-700);--vesper-text-error:var(--vesper-red-600);--vesper-text-info:var(--vesper-sky-600);--vesper-text-static-black:var(--vesper-static-black);--vesper-text-static-white:var(--vesper-static-white);--vesper-text-link-default:var(--vesper-teal-700);--vesper-text-link-hover:var(--vesper-teal-600);--vesper-text-link-visited:var(--vesper-teal-800);--vesper-text-link-disabled:var(--vesper-alpha-stone-400);--vesper-text-brand-purple:var(--vesper-purple-700);--vesper-text-brand-mint:var(--vesper-mint-600);--vesper-text-brand-pink:var(--vesper-pink-600);--vesper-text-brand-yellow:var(--vesper-yellow-600);--vesper-icon-primary:var(--vesper-stone-900);--vesper-icon-secondary:var(--vesper-stone-800);--vesper-icon-tertiary:var(--vesper-stone-700);--vesper-icon-disabled:var(--vesper-alpha-stone-500);--vesper-icon-inverse-primary:var(--vesper-stone-0);--vesper-icon-inverse-secondary:var(--vesper-stone-300);--vesper-icon-inverse-tertiary:var(--vesper-stone-500);--vesper-icon-inverse-disabled:var(--vesper-alpha-inverse-300);--vesper-icon-on-color:var(--vesper-static-white);--vesper-icon-accent:var(--vesper-teal-700);--vesper-icon-success:var(--vesper-mint-600);--vesper-icon-warning:var(--vesper-amber-700);--vesper-icon-error:var(--vesper-red-600);--vesper-icon-info:var(--vesper-sky-600);--vesper-icon-static-black:var(--vesper-static-black);--vesper-icon-static-white:var(--vesper-static-white);--vesper-icon-brand-purple:var(--vesper-purple-700);--vesper-icon-brand-mint:var(--vesper-mint-600);--vesper-icon-brand-pink:var(--vesper-pink-600);--vesper-icon-brand-yellow:var(--vesper-yellow-600);--vesper-border-primary:var(--vesper-stone-400);--vesper-border-secondary:var(--vesper-stone-300);--vesper-border-tertiary:var(--vesper-stone-200);--vesper-border-strong:var(--vesper-stone-900);--vesper-border-disabled:var(--vesper-alpha-stone-200);--vesper-border-focus:var(--vesper-teal-200);--vesper-border-inverse-primary:var(--vesper-stone-400);--vesper-border-inverse-secondary:var(--vesper-stone-600);--vesper-border-inverse-strong:var(--vesper-stone-0);--vesper-border-inverse-disabled:var(--vesper-alpha-inverse-100);--vesper-border-inverse-focus:var(--vesper-teal-500);--vesper-border-static-white:var(--vesper-static-white);--vesper-border-static-black:var(--vesper-static-black);--vesper-border-accent-subtle:var(--vesper-teal-200);--vesper-border-accent-base:var(--vesper-teal-600);--vesper-border-success-subtle:var(--vesper-green-200);--vesper-border-success-base:var(--vesper-green-500);--vesper-border-warning-subtle:var(--vesper-amber-200);--vesper-border-warning-base:var(--vesper-amber-500);--vesper-border-error-subtle:var(--vesper-red-200);--vesper-border-error-base:var(--vesper-red-500);--vesper-border-info-subtle:var(--vesper-sky-200);--vesper-border-info-base:var(--vesper-sky-500);--vesper-border-brand-purple-subtle:var(--vesper-purple-200);--vesper-border-brand-purple-base:var(--vesper-purple-500);--vesper-border-brand-mint-subtle:var(--vesper-mint-200);--vesper-border-brand-mint-base:var(--vesper-mint-500);--vesper-border-brand-pink-subtle:var(--vesper-pink-200);--vesper-border-brand-pink-base:var(--vesper-pink-500);--vesper-border-brand-yellow-subtle:var(--vesper-yellow-200);--vesper-border-brand-yellow-base:var(--vesper-yellow-500);--vesper-scrim-contrast-subtle:var(--vesper-alpha-black-300);--vesper-scrim-contrast-base:var(--vesper-alpha-black-600);--vesper-scrim-inverse-subtle:var(--vesper-alpha-white-300);--vesper-scrim-inverse-base:var(--vesper-alpha-white-600);--vesper-state-neutral-hover:var(--vesper-alpha-stone-50);--vesper-state-neutral-active:var(--vesper-alpha-stone-100);--vesper-state-contrast-hover:var(--vesper-alpha-contrast-50);--vesper-state-contrast-active:var(--vesper-alpha-contrast-100);--vesper-state-inverse-hover:var(--vesper-alpha-inverse-100);--vesper-state-inverse-active:var(--vesper-alpha-inverse-200);--vesper-tint-neutral-100:var(--vesper-alpha-stone-50);--vesper-tint-neutral-200:var(--vesper-alpha-stone-100);--vesper-tint-neutral-300:var(--vesper-alpha-stone-200);--vesper-tint-neutral-400:var(--vesper-alpha-stone-300);--vesper-tint-contrast-100:var(--vesper-alpha-contrast-50);--vesper-tint-contrast-200:var(--vesper-alpha-contrast-100);--vesper-tint-contrast-300:var(--vesper-alpha-contrast-200);--vesper-tint-contrast-400:var(--vesper-alpha-contrast-300);--vesper-tint-inverse-100:var(--vesper-alpha-inverse-300);--vesper-tint-inverse-200:var(--vesper-alpha-inverse-500);--vesper-tint-inverse-300:var(--vesper-alpha-inverse-700);--vesper-tint-inverse-400:var(--vesper-alpha-inverse-800)}

package/dist/styles/fonts.css

@@ -0,0 +1 @@
+:root{--vesper-font-sans:"Inter Tight", system-ui, sans-serif;--vesper-font-mono:"IBM Plex Mono", monospace}

package/dist/styles/globals.css

@@ -0,0 +1 @@
+:where([class^=vesper-],[class*=\ vesper-]){box-sizing:border-box;background-color:transparent;border:none;outline:none;margin:0;padding:0}:where([class^=vesper-],[class*=\ vesper-]):before{box-sizing:border-box}:where([class^=vesper-],[class*=\ vesper-]):after{box-sizing:border-box}

package/dist/styles/leading.css

@@ -0,0 +1 @@
+:root{--vesper-leading-none:100%;--vesper-leading-tight:110%;--vesper-leading-snug:120%;--vesper-leading-normal:140%;--vesper-leading-relaxed:150%;--vesper-leading-loose:175%}

package/dist/styles/radius.css

@@ -0,0 +1 @@
+:root{--vesper-radius-1:.25rem;--vesper-radius-2:.5rem;--vesper-radius-3:.75rem;--vesper-radius-4:1rem;--vesper-radius-6:1.5rem;--vesper-radius-7:1.75rem;--vesper-radius-half:.125rem}

package/dist/styles/shadows.css

@@ -0,0 +1 @@
+:root{--vesper-shadow-100:0 .125rem .375rem .0625rem rgba(9,34,33,.1);--vesper-shadow-200:0 .25rem .75rem 0 rgba(9,34,33,.1);--vesper-shadow-300:0 .75rem 2rem 0 rgba(9,34,33,.15);--vesper-shadow-400:0 1.5rem 4rem 0 rgba(9,34,33,.2);--vesper-shadow-inset-100:0 .125rem .375rem 0 var(--vesper-alpha-contrast-100) inset;--vesper-shadow-inset-200:0 .125rem .75rem 0 var(--vesper-tint-contrast-200) inset;--vesper-shadow-focus-ring:0 0 0 .1875rem var(--vesper-border-focus)}

package/dist/styles/spacing.css

@@ -0,0 +1 @@
+:root{--vesper-spacing-0:0rem;--vesper-spacing-1:.25rem;--vesper-spacing-2:.5rem;--vesper-spacing-3:.75rem;--vesper-spacing-4:1rem;--vesper-spacing-5:1.25rem;--vesper-spacing-6:1.5rem;--vesper-spacing-8:2rem;--vesper-spacing-10:2.5rem;--vesper-spacing-12:3rem;--vesper-spacing-14:3.5rem;--vesper-spacing-16:4rem;--vesper-spacing-20:5rem;--vesper-spacing-24:6rem;--vesper-spacing-28:7rem;--vesper-spacing-32:8rem;--vesper-spacing-40:10rem;--vesper-spacing-half:.125rem;--vesper-spacing-micro:.0625rem}

package/dist/styles/strokes.css

@@ -0,0 +1 @@
+:root{--vesper-stroke-base:.0625rem;--vesper-stroke-strong:.125rem}

package/dist/styles/styles.css

@@ -0,0 +1 @@
+@import "./globals.css" layer(vesper);@import "./colors.css" layer(vesper);@import "./fonts.css" layer(vesper);@import "./leading.css" layer(vesper);@import "./radius.css" layer(vesper);@import "./shadows.css" layer(vesper);@import "./spacing.css" layer(vesper);@import "./tracking.css" layer(vesper);@import "./animation.css" layer(vesper);@import "./backgrounds.css" layer(vesper);@import "./strokes.css" layer(vesper);@import "../components/typography/typography.css" layer(vesper);@import "../components/combobox/combobox.css" layer(vesper);@import "../components/text-area/text-area.css" layer(vesper);@import "../components/form-input-message/form-input-message.css" layer(vesper);@import "../components/select/select.css" layer(vesper);@import "../components/material/material.css" layer(vesper);@import "../components/code/code.css" layer(vesper);@import "../components/snippet/snippet.css" layer(vesper);@import "../components/code-block/code-block.css" layer(vesper);@import "../components/toast/toast.css" layer(vesper);@import "../components/sheet/sheet.css" layer(vesper);@import "../components/modal/modal.css" layer(vesper);@import "../components/status-indicator/status-indicator.css" layer(vesper);@import "../components/choicebox/choicebox.css" layer(vesper);@import "../components/skeleton/skeleton.css" layer(vesper);@import "../components/show-more/show-more.css" layer(vesper);@import "../components/tag/tag.css" layer(vesper);@import "../components/range/range.css" layer(vesper);@import "../components/checkbox/checkbox.css" layer(vesper);@import "../components/radio-group/radio-group.css" layer(vesper);@import "../components/switch/switch.css" layer(vesper);@import "../components/text-input/text-input.css" layer(vesper);@import "../components/toggle/toggle.css" layer(vesper);@import "../components/tabs/tabs.css" layer(vesper);@import "../components/chip/chip.css" layer(vesper);@import "../components/tooltip/tooltip.css" layer(vesper);@import "../components/theme-switcher/theme-switcher.css" layer(vesper);@import "../components/admonition/admonition.css" layer(vesper);@import "../components/badge/badge.css" layer(vesper);@import "../components/accordion/accordion.css" layer(vesper);@import "../components/avatar-group/avatar-group.css" layer(vesper);@import "../components/avatar/avatar.css" layer(vesper);@import "../components/progress-bar/progress-bar.css" layer(vesper);@import "../components/text-button/text-button.css" layer(vesper);@import "../components/button/button.css" layer(vesper);@import "../components/icon-button/icon-button.css" layer(vesper);@import "../components/menu/menu.css" layer(vesper);@import "../components/split-button/split-button.css" layer(vesper);

package/dist/styles/tailwind-utilities.css

@@ -0,0 +1 @@
+@utility bg-vesper-dot-pattern-primary{background: var(--vesper-bg-dot-pattern-primary);}@utility bg-vesper-dot-pattern-secondary{background: var(--vesper-bg-dot-pattern-secondary);}@utility bg-vesper-dot-pattern-tertiary{background: var(--vesper-bg-dot-pattern-tertiary);}@utility bg-vesper-dot-pattern-*{background: var(--vesper-bg-dot-pattern-primary); background-color: --value(--color-vesper-*);}@utility bg-vesper-dot-pattern-inverse{background: var(--vesper-bg-dot-pattern-inverse);}@utility bg-vesper-dot-pattern-inverse-*{background: var(--vesper-bg-dot-pattern-inverse); background-color: --value(--color-vesper-*);}