@nationaldesignstudio/react 0.5.0 → 0.5.2

package/dist/index.d.ts

@@ -1,52 +1,3618 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+export { cnBase as cn } from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import * as React$1 from 'react';
+import { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { useRender } from '@base-ui-components/react/use-render';
+import { ButtonProps as ButtonProps$1 } from '@base-ui-components/react/button';
+import { Popover as Popover$1 } from '@base-ui-components/react/popover';
+import { Select as Select$1 } from '@base-ui-components/react/select';
+import { Tooltip as Tooltip$1 } from '@base-ui-components/react/tooltip';
+import { CSSVariableMap, NestedStringRecord, ColorThemeName, SurfaceThemeName } from '@nds-design-system/tokens';
+
+declare const accordionVariants: tailwind_variants.TVReturnType<{
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+}, undefined, "flex flex-col", tailwind_variants_dist_config_js.TVConfig<{
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+}, {
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+}>, {
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+}, undefined, "flex flex-col", tailwind_variants_dist_config_js.TVConfig<{
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+}, {
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+}>, unknown, unknown, undefined>>;
+interface AccordionProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof accordionVariants> {
+    /**
+     * Allow multiple items to be expanded at once
+     * @default false
+     */
+    allowMultiple?: boolean;
+    /**
+     * The ID(s) of items that should be expanded by default
+     */
+    defaultExpanded?: string | string[];
+    children: React$1.ReactNode;
+}
 /**
- * @nationaldesignstudio/react
- * Design system components for React applications
- */
-export type { AccordionItemProps, AccordionProps, } from './components/atoms/accordion';
-export { Accordion, AccordionItem } from './components/atoms/accordion';
-export type { BackgroundGradientProps, BackgroundImageProps, BackgroundOverlayProps, BackgroundProps, BackgroundStreamProps, BackgroundVideoProps, } from './components/atoms/background';
-export { Background, BackgroundGradient, BackgroundImage, BackgroundOverlay, BackgroundStream, BackgroundVideo, backgroundGradientVariants, backgroundImageVariants, backgroundOverlayVariants, backgroundStreamVariants, backgroundVariants, backgroundVideoVariants, } from './components/atoms/background';
-export type { ButtonProps, IconButtonProps } from './components/atoms/button';
-export { Button, buttonVariants, IconButton, iconButtonVariants, } from './components/atoms/button';
-export type { InputGroupAddonProps, InputGroupButtonProps, InputGroupInputProps, InputGroupProps, InputGroupTextareaProps, InputGroupTextProps, InputProps, } from './components/atoms/input';
-export { Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, inputGroupAddonVariants, inputGroupVariants, inputVariants, } from './components/atoms/input';
-export type { NdstudioFooterProps } from './components/atoms/ndstudio-footer';
-export { NdstudioFooter } from './components/atoms/ndstudio-footer';
-export type { PagerControlProps } from './components/atoms/pager-control';
-export { PagerControl, pagerControlVariants, } from './components/atoms/pager-control';
-export type { PopoverArrowProps, PopoverBackdropProps, PopoverCloseProps, PopoverDescriptionProps, PopoverPopupProps, PopoverPortalProps, PopoverPositionerProps, PopoverProps, PopoverRootProps, PopoverTitleProps, PopoverTriggerProps, } from './components/atoms/popover';
-export { Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverParts, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger, popoverArrowVariants, popoverPopupVariants, } from './components/atoms/popover';
-export type { SelectGroupLabelProps, SelectGroupProps, SelectOptionProps, SelectPopupProps, SelectProps, SelectTriggerProps, } from './components/atoms/select';
-export { Select, SelectGroup, SelectGroupLabel, SelectOption, SelectPopup, SelectRoot, SelectTrigger, selectOptionVariants, selectPopupVariants, selectTriggerVariants, } from './components/atoms/select';
-export type { TooltipArrowProps, TooltipPopupProps, TooltipPortalProps, TooltipPositionerProps, TooltipProps, TooltipProviderProps, TooltipRootProps, TooltipTriggerProps, } from './components/atoms/tooltip';
-export { Tooltip, TooltipArrow, TooltipParts, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipRoot, TooltipTrigger, tooltipArrowVariants, tooltipPopupVariants, } from './components/atoms/tooltip';
-export type { DevToolbarProps, GridOverlayProps } from './components/dev-tools';
-export { DevToolbar, GridOverlay } from './components/dev-tools';
-export type { CardActionsProps, CardBodyProps, CardContentProps, CardDescriptionProps, CardEyebrowProps, CardImageProps, CardProps, CardTitleProps, } from './components/organisms/card';
-export { Card, CardActions, CardBody, CardContent, CardDescription, CardEyebrow, CardImage, CardTitle, cardVariants, } from './components/organisms/card';
-export type { NavbarActionsProps, NavbarBrandProps, NavbarLinkProps, NavbarLinksProps, NavbarMobileMenuButtonProps, NavbarMobileMenuLinkProps, NavbarMobileMenuProps, NavbarProps, } from './components/organisms/navbar';
-export { Navbar, NavbarActions, NavbarBrand, NavbarLink, NavbarLinks, NavbarMobileMenu, NavbarMobileMenuButton, NavbarMobileMenuLink, } from './components/organisms/navbar';
-export type { USGovBannerProps } from './components/organisms/us-gov-banner';
-export { USGovBanner } from './components/organisms/us-gov-banner';
-export type { BannerProps } from './components/sections/banner';
-export { Banner, bannerVariants } from './components/sections/banner';
-export type { CardGridProps } from './components/sections/card-grid';
-export { CardGrid, cardGridVariants } from './components/sections/card-grid';
-export type { FaqSectionProps } from './components/sections/faq-section';
-export { FaqSection } from './components/sections/faq-section';
-export type { HeroBackgroundImageProps, HeroBackgroundStreamProps, HeroBackgroundVideoProps, HeroContentProps, HeroGradientProps, HeroHeaderProps, HeroOverlayProps, HeroProps, } from './components/sections/hero';
-export { DEFAULT_TITLE_TYPOGRAPHY, Hero, HeroBackground, HeroBackgroundImage, HeroBackgroundStream, HeroBackgroundVideo, HeroContent, HeroGradient, HeroHeader, HeroOverlay, heroContentVariants, heroHeaderVariants, heroVariants, } from './components/sections/hero';
-export type { ProseProps, ProseSectionProps, } from './components/sections/prose';
-export { Prose, ProseSection } from './components/sections/prose';
-export type { QuoteBlockProps } from './components/sections/quote-block';
-export { QuoteBlock, quoteBlockVariants, } from './components/sections/quote-block';
-export type { RiverProps } from './components/sections/river';
-export { River, riverVariants } from './components/sections/river';
-export type { ToutProps } from './components/sections/tout';
-export { Tout } from './components/sections/tout';
-export type { TwoColumnSectionProps } from './components/sections/two-column-section';
-export { TwoColumnSection, twoColumnSectionVariants, } from './components/sections/two-column-section';
-export type { ButtonTheme, ColorToken, ComponentTheme, ComponentThemeColors, ComponentThemeSpatial, ComponentThemeSurface, FontSizeToken, RadiusToken, SpacingToken, } from './lib/theme';
-export { buttonThemeToStyleVars, FONT_SIZES, fontSizeToClass, responsiveTypographyClass, themeToStyleVars, } from './lib/theme';
-export { cn } from './lib/utils';
-export { applyTheme, createThemeStyle, filterCSSVars, getToken, mergeCSSVars, removeTheme, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, toCSSVars, useCSSVars, useTheme, useThemeTokens, } from './theme';
+ * Accordion component for expandable/collapsible content sections.
+ * Built on Base UI's Accordion primitive.
+ *
+ * Variants:
+ * - light: Light theme styling (default)
+ * - dark: Dark theme styling
+ *
+ * @example
+ * ```tsx
+ * <Accordion defaultExpanded="item-1" variant="dark">
+ *   <AccordionItem id="item-1" title="Question 1">
+ *     Answer to question 1
+ *   </AccordionItem>
+ *   <AccordionItem id="item-2" title="Question 2">
+ *     Answer to question 2
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+declare const Accordion: React$1.ForwardRefExoticComponent<AccordionProps & React$1.RefAttributes<HTMLDivElement>>;
+interface AccordionItemProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
+    /**
+     * Unique identifier for this item
+     */
+    id: string;
+    /**
+     * The question/title displayed in the header
+     */
+    title: string;
+    /**
+     * The answer/content revealed when expanded
+     */
+    children: React$1.ReactNode;
+}
+/**
+ * Individual accordion item with collapsible content.
+ * Must be used within an Accordion component.
+ */
+declare const AccordionItem: React$1.ForwardRefExoticComponent<AccordionItemProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const backgroundVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "absolute inset-0", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "absolute inset-0", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+/**
+ * Base container for background composition.
+ * Use as a wrapper to compose multiple background layers (image, video, overlay, gradient).
+ *
+ * @example
+ * ```tsx
+ * <Background>
+ *   <Background.Image src="/hero.jpg" />
+ *   <Background.Overlay opacity={0.4} />
+ *   <Background.Gradient direction="to-t" from="black" to="transparent" />
+ * </Background>
+ * ```
+ */
+interface BackgroundProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+declare const backgroundImageVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "absolute inset-0 size-full object-cover", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "absolute inset-0 size-full object-cover", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+interface BackgroundImageProps extends useRender.ComponentProps<"img">, Omit<React$1.ImgHTMLAttributes<HTMLImageElement>, "src" | "render"> {
+    /**
+     * URL for the background image
+     */
+    src: string;
+    /**
+     * Object position (default: "center")
+     */
+    position?: string;
+}
+/**
+ * Background image layer using an actual img element with object-cover.
+ * Supports native lazy loading, srcset, and better accessibility.
+ * Supports render prop for element composition.
+ */
+declare function BackgroundImage(props: BackgroundImageProps): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+declare namespace BackgroundImage {
+    var displayName: string;
+}
+declare const backgroundVideoVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "absolute inset-0 size-full object-cover", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "absolute inset-0 size-full object-cover", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+interface BackgroundVideoProps extends useRender.ComponentProps<"video">, Omit<React$1.VideoHTMLAttributes<HTMLVideoElement>, "children" | "render" | "src"> {
+    /**
+     * URL for the video source
+     */
+    src: string;
+    /**
+     * Video MIME type (default: auto-detected from src)
+     */
+    type?: string;
+    /**
+     * Poster image URL shown before video loads
+     */
+    poster?: string;
+}
+/**
+ * Background video layer using HTML5 video element.
+ * Supports render prop for element composition.
+ */
+declare function BackgroundVideo(props: BackgroundVideoProps): react_jsx_runtime.JSX.Element;
+declare namespace BackgroundVideo {
+    var displayName: string;
+}
+declare const backgroundStreamVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "absolute inset-0 size-full border-0 scale-[1.5] object-cover", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "absolute inset-0 size-full border-0 scale-[1.5] object-cover", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+interface BackgroundStreamProps extends React$1.IframeHTMLAttributes<HTMLIFrameElement> {
+    /**
+     * Cloudflare Stream video ID
+     */
+    videoId: string;
+    /**
+     * Poster image URL (Cloudflare Stream thumbnail or custom)
+     */
+    poster?: string;
+    /**
+     * Whether the video should autoplay (default: true)
+     */
+    autoplay?: boolean;
+    /**
+     * Whether the video should loop (default: true)
+     */
+    loop?: boolean;
+    /**
+     * Whether the video should be muted (default: true)
+     */
+    muted?: boolean;
+    /**
+     * Whether to show playback controls (default: false)
+     */
+    controls?: boolean;
+    /**
+     * Custom Cloudflare customer subdomain (if using custom domains)
+     */
+    customerSubdomain?: string;
+}
+/**
+ * Background video layer using Cloudflare Stream.
+ */
+declare const BackgroundStream: React$1.ForwardRefExoticComponent<BackgroundStreamProps & React$1.RefAttributes<HTMLIFrameElement>>;
+declare const backgroundOverlayVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "absolute inset-0 bg-bg-overlay", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "absolute inset-0 bg-bg-overlay", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+interface BackgroundOverlayProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Overlay opacity (0-1)
+     */
+    opacity?: number;
+}
+/**
+ * Solid color overlay layer. Uses semantic bg-overlay token by default.
+ * Override with className for different colors.
+ */
+declare const BackgroundOverlay: React$1.ForwardRefExoticComponent<BackgroundOverlayProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const backgroundGradientVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "absolute inset-0", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "absolute inset-0", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+interface BackgroundGradientProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Gradient direction (Tailwind convention: to-t, to-b, to-l, to-r, etc.)
+     * Or CSS gradient direction (to top, to bottom, 45deg, etc.)
+     */
+    direction?: string;
+    /**
+     * Starting color (from)
+     */
+    from?: string;
+    /**
+     * Optional middle color (via)
+     */
+    via?: string;
+    /**
+     * Ending color (to)
+     */
+    to?: string;
+    /**
+     * Full custom gradient string (overrides from/via/to)
+     */
+    gradient?: string;
+}
+/**
+ * Gradient overlay layer. Use for fading backgrounds or creating depth.
+ */
+declare const BackgroundGradient: React$1.ForwardRefExoticComponent<BackgroundGradientProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const BackgroundCompound: React$1.ForwardRefExoticComponent<BackgroundProps & React$1.RefAttributes<HTMLDivElement>> & {
+    Image: typeof BackgroundImage;
+    Video: typeof BackgroundVideo;
+    Stream: React$1.ForwardRefExoticComponent<BackgroundStreamProps & React$1.RefAttributes<HTMLIFrameElement>>;
+    Overlay: React$1.ForwardRefExoticComponent<BackgroundOverlayProps & React$1.RefAttributes<HTMLDivElement>>;
+    Gradient: React$1.ForwardRefExoticComponent<BackgroundGradientProps & React$1.RefAttributes<HTMLDivElement>>;
+};
+
+/**
+ * Component-level theming interface
+ *
+ * This interface defines all the customizable design tokens that can be
+ * overridden at the component level. Components accepting a `theme` prop
+ * will apply these values as CSS custom properties, allowing fine-grained
+ * control over appearance without creating new variants.
+ *
+ * All values use primitive token names (e.g., "gray-100", "spacing-40")
+ * which are converted to CSS variable references internally.
+ */
+/**
+ * Color token names - maps to `--color-{name}` CSS variables
+ * @example "gray-100", "ember-v300", "alpha-black-10"
+ */
+type ColorToken = "gray-50" | "gray-100" | "gray-200" | "gray-300" | "gray-400" | "gray-500" | "gray-600" | "gray-700" | "gray-800" | "gray-900" | "gray-1000" | "gray-1100" | "gray-1200" | "steel-50" | "steel-100" | "steel-200" | "steel-300" | "steel-400" | "steel-500" | "steel-600" | "steel-700" | "steel-800" | "steel-900" | "steel-1000" | "steel-1100" | "steel-1200" | "brown-50" | "brown-100" | "brown-200" | "brown-300" | "brown-400" | "brown-500" | "brown-600" | "brown-700" | "brown-800" | "brown-900" | "brown-1000" | "brown-1100" | "brown-1200" | "ember-50" | "ember-100" | "ember-200" | "ember-300" | "ember-400" | "ember-500" | "ember-600" | "ember-700" | "ember-800" | "ember-900" | "ember-v100" | "ember-v200" | "ember-v300" | "ember-v400" | "orange-50" | "orange-100" | "orange-200" | "orange-300" | "orange-400" | "orange-500" | "orange-600" | "orange-700" | "orange-800" | "orange-900" | "orange-v100" | "orange-v200" | "orange-v300" | "orange-v400" | "amber-50" | "amber-100" | "amber-200" | "amber-300" | "amber-400" | "amber-500" | "amber-600" | "amber-700" | "amber-800" | "amber-900" | "amber-v100" | "amber-v200" | "amber-v300" | "amber-v400" | "yellow-50" | "yellow-100" | "yellow-200" | "yellow-300" | "yellow-400" | "yellow-500" | "yellow-600" | "yellow-700" | "yellow-800" | "yellow-900" | "yellow-v100" | "yellow-v200" | "yellow-v300" | "yellow-v400" | "lime-50" | "lime-100" | "lime-200" | "lime-300" | "lime-400" | "lime-500" | "lime-600" | "lime-700" | "lime-800" | "lime-900" | "lime-v100" | "lime-v200" | "lime-v300" | "lime-v400" | "green-50" | "green-100" | "green-200" | "green-300" | "green-400" | "green-500" | "green-600" | "green-700" | "green-800" | "green-900" | "green-v100" | "green-v200" | "green-v300" | "green-v400" | "sage-50" | "sage-100" | "sage-200" | "sage-300" | "sage-400" | "sage-500" | "sage-600" | "sage-700" | "sage-800" | "sage-900" | "sage-v100" | "sage-v200" | "sage-v300" | "sage-v400" | "teal-50" | "teal-100" | "teal-200" | "teal-300" | "teal-400" | "teal-500" | "teal-600" | "teal-700" | "teal-800" | "teal-900" | "teal-v100" | "teal-v200" | "teal-v300" | "teal-v400" | "cyan-50" | "cyan-100" | "cyan-200" | "cyan-300" | "cyan-400" | "cyan-500" | "cyan-600" | "cyan-700" | "cyan-800" | "cyan-900" | "cyan-v100" | "cyan-v200" | "cyan-v300" | "cyan-v400" | "ice-50" | "ice-100" | "ice-200" | "ice-300" | "ice-400" | "ice-500" | "ice-600" | "ice-700" | "ice-800" | "ice-900" | "ice-v100" | "ice-v200" | "ice-v300" | "ice-v400" | "blue-50" | "blue-100" | "blue-200" | "blue-300" | "blue-400" | "blue-500" | "blue-600" | "blue-700" | "blue-800" | "blue-900" | "blue-v100" | "blue-v200" | "blue-v300" | "blue-v400" | "indigo-50" | "indigo-100" | "indigo-200" | "indigo-300" | "indigo-400" | "indigo-500" | "indigo-600" | "indigo-700" | "indigo-800" | "indigo-900" | "indigo-v100" | "indigo-v200" | "indigo-v300" | "indigo-v400" | "iris-50" | "iris-100" | "iris-200" | "iris-300" | "iris-400" | "iris-500" | "iris-600" | "iris-700" | "iris-800" | "iris-900" | "iris-v100" | "iris-v200" | "iris-v300" | "iris-v400" | "purple-50" | "purple-100" | "purple-200" | "purple-300" | "purple-400" | "purple-500" | "purple-600" | "purple-700" | "purple-800" | "purple-900" | "purple-v100" | "purple-v200" | "purple-v300" | "purple-v400" | "pink-50" | "pink-100" | "pink-200" | "pink-300" | "pink-400" | "pink-500" | "pink-600" | "pink-700" | "pink-800" | "pink-900" | "pink-v100" | "pink-v200" | "pink-v300" | "pink-v400" | "red-50" | "red-100" | "red-200" | "red-300" | "red-400" | "red-500" | "red-600" | "red-700" | "red-800" | "red-900" | "red-v100" | "red-v200" | "red-v300" | "red-v400" | "alpha-black-5" | "alpha-black-10" | "alpha-black-20" | "alpha-black-30" | "alpha-black-40" | "alpha-black-50" | "alpha-black-60" | "alpha-black-70" | "alpha-black-80" | "alpha-black-90" | "alpha-black-95" | "alpha-white-5" | "alpha-white-10" | "alpha-white-20" | "alpha-white-30" | "alpha-white-40" | "alpha-white-50" | "alpha-white-60" | "alpha-white-70" | "alpha-white-80" | "alpha-white-90" | "alpha-white-95" | "white" | "black";
+/**
+ * Spacing token names - maps to `--spacing-{name}` CSS variables
+ * @example "spacing-40", "spacing-72"
+ */
+type SpacingToken = "spacing-0" | "spacing-2" | "spacing-4" | "spacing-6" | "spacing-8" | "spacing-10" | "spacing-11" | "spacing-12" | "spacing-16" | "spacing-20" | "spacing-24" | "spacing-28" | "spacing-32" | "spacing-36" | "spacing-40" | "spacing-48" | "spacing-56" | "spacing-64" | "spacing-72" | "spacing-80" | "spacing-96" | "spacing-112" | "spacing-128" | "spacing-144" | "spacing-160" | "spacing-176" | "spacing-192" | "spacing-208" | "spacing-224" | "spacing-240" | "spacing-256" | "spacing-288" | "spacing-320" | "spacing-352" | "spacing-384" | "spacing-400";
+/**
+ * Radius token names - maps to `--radii-{name}` CSS variables
+ * @example "radii-4", "radii-6"
+ */
+type RadiusToken = "radii-0" | "radii-2" | "radii-4" | "radii-6" | "radii-8" | "radii-10" | "radii-11" | "radii-12" | "radii-16" | "radii-20" | "radii-24" | "radii-28" | "radii-32" | "radii-36" | "radii-40" | "radii-48" | "radii-56" | "radii-64" | "radii-72" | "radii-80" | "radii-96" | "radii-112" | "radii-128" | "radii-144" | "radii-160" | "radii-176" | "radii-192" | "radii-208" | "radii-224" | "radii-240" | "radii-256" | "radii-288" | "radii-320" | "radii-352" | "radii-384" | "radii-400";
+/**
+ * Font size token values - primitive font sizes available in the design system
+ * These correspond to Tailwind classes like `text-64`, `text-128`, etc.
+ * @example 64, 128, 192
+ */
+type FontSizeToken = 9 | 11 | 12 | 14 | 16 | 18 | 21 | 24 | 28 | 32 | 36 | 42 | 48 | 56 | 64 | 72 | 84 | 88 | 96 | 112 | 128 | 148 | 168 | 192 | 224 | 256 | 280;
+/**
+ * Array of all available font sizes for use in UI selectors/dropdowns
+ */
+declare const FONT_SIZES: FontSizeToken[];
+/**
+ * Helper to generate typography class string from font size
+ * @example fontSizeToClass(128) => "text-128 leading-128 tracking-128"
+ */
+declare function fontSizeToClass(size: FontSizeToken): string;
+/**
+ * Helper to generate responsive typography class string
+ * @example responsiveTypographyClass(64, 128, 192) => "text-64 leading-64 tracking-64 md:text-128 md:leading-128 md:tracking-128 xl:text-192 xl:leading-192 xl:tracking-192"
+ */
+declare function responsiveTypographyClass(mobile: FontSizeToken, tablet: FontSizeToken, desktop: FontSizeToken): string;
+interface ComponentThemeColors {
+    /**
+     * Background color for sections
+     * @example "gray-100"
+     */
+    bgSection?: ColorToken;
+    /**
+     * Background color for cards
+     * @example "white"
+     */
+    cardBackground?: ColorToken;
+    /**
+     * Muted background color
+     * @example "gray-50"
+     */
+    bgMuted?: ColorToken;
+    /**
+     * Primary text color
+     * @example "gray-1100"
+     */
+    textPrimary?: ColorToken;
+    /**
+     * Secondary text color
+     * @example "gray-800"
+     */
+    textSecondary?: ColorToken;
+    /**
+     * Muted text color
+     * @example "gray-600"
+     */
+    textMuted?: ColorToken;
+    /**
+     * Inverted text color (for dark backgrounds)
+     * @example "gray-100"
+     */
+    textInverted?: ColorToken;
+    /**
+     * Link text color
+     * @example "gray-1100"
+     */
+    textLink?: ColorToken;
+    /**
+     * Link hover text color
+     * @example "gray-700"
+     */
+    textLinkHover?: ColorToken;
+    /**
+     * Brand accent color
+     * @example "ember-v300"
+     */
+    accentBrand?: ColorToken;
+    /**
+     * Soft brand accent color
+     * @example "ember-100"
+     */
+    accentBrandSoft?: ColorToken;
+    /**
+     * Subtle border color
+     * @example "alpha-black-10"
+     */
+    borderSubtle?: ColorToken;
+    /**
+     * Strong border color
+     * @example "alpha-black-20"
+     */
+    borderStrong?: ColorToken;
+    /**
+     * Focus border color (uses accentBrand by default)
+     * @example "ember-v300"
+     */
+    borderFocus?: ColorToken;
+    /**
+     * Divider border color
+     * @example "alpha-black-10"
+     */
+    borderDivider?: ColorToken;
+    /**
+     * Primary button background color
+     * @example "gray-1100"
+     */
+    buttonPrimaryBg?: ColorToken;
+    /**
+     * Primary button hover background color
+     * @example "gray-600"
+     */
+    buttonPrimaryBgHover?: ColorToken;
+    /**
+     * Secondary button background color
+     * @example "white"
+     */
+    buttonSecondaryBg?: ColorToken;
+    /**
+     * Secondary button hover background color
+     * @example "gray-100"
+     */
+    buttonSecondaryBgHover?: ColorToken;
+}
+interface ComponentThemeSpatial {
+    /**
+     * Grid margin for large breakpoint
+     * @example "spacing-72"
+     */
+    gridLargeMargin?: SpacingToken;
+    /**
+     * Grid gutter for large breakpoint
+     * @example "spacing-24"
+     */
+    gridLargeGutter?: SpacingToken;
+    /**
+     * Number of grid columns for large breakpoint
+     */
+    gridLargeColumns?: number;
+    /**
+     * Grid margin for medium breakpoint
+     * @example "spacing-56"
+     */
+    gridMediumMargin?: SpacingToken;
+    /**
+     * Grid gutter for medium breakpoint
+     * @example "spacing-20"
+     */
+    gridMediumGutter?: SpacingToken;
+    /**
+     * Number of grid columns for medium breakpoint
+     */
+    gridMediumColumns?: number;
+    /**
+     * Grid margin for small breakpoint
+     * @example "spacing-24"
+     */
+    gridSmallMargin?: SpacingToken;
+    /**
+     * Grid gutter for small breakpoint
+     * @example "spacing-12"
+     */
+    gridSmallGutter?: SpacingToken;
+    /**
+     * Number of grid columns for small breakpoint
+     */
+    gridSmallColumns?: number;
+    /**
+     * Section gap for large breakpoint
+     * @example "spacing-64"
+     */
+    sectionLargeGap?: SpacingToken;
+    /**
+     * Section padding for large breakpoint
+     * @example "spacing-128"
+     */
+    sectionLargePadding?: SpacingToken;
+    /**
+     * Section gap for medium breakpoint
+     * @example "spacing-56"
+     */
+    sectionMediumGap?: SpacingToken;
+    /**
+     * Section padding for medium breakpoint
+     * @example "spacing-96"
+     */
+    sectionMediumPadding?: SpacingToken;
+    /**
+     * Section gap for small breakpoint
+     * @example "spacing-32"
+     */
+    sectionSmallGap?: SpacingToken;
+    /**
+     * Section padding for small breakpoint
+     * @example "spacing-64"
+     */
+    sectionSmallPadding?: SpacingToken;
+    /**
+     * Card gap for large size
+     * @example "spacing-10"
+     */
+    cardLargeGap?: SpacingToken;
+    /**
+     * Card padding for large size
+     * @example "spacing-24"
+     */
+    cardLargePadding?: SpacingToken;
+    /**
+     * Card gap for small size
+     * @example "spacing-12"
+     */
+    cardSmallGap?: SpacingToken;
+    /**
+     * Card padding for small size
+     * @example "spacing-16"
+     */
+    cardSmallPadding?: SpacingToken;
+}
+interface ComponentThemeSurface {
+    /**
+     * Card border radius
+     * @example "radii-4"
+     */
+    cardRadius?: RadiusToken;
+    /**
+     * Card stroke/border width in pixels
+     * @example 1
+     */
+    cardStroke?: number;
+    /**
+     * Button border radius
+     * @example "radii-6"
+     */
+    buttonRadius?: RadiusToken;
+    /**
+     * Button stroke/border weight in pixels
+     * @example 1
+     */
+    buttonStrokeWeight?: number;
+}
+/**
+ * Complete component theme interface combining colors, spatial, and surface tokens.
+ *
+ * @example
+ * ```tsx
+ * const customTheme: ComponentTheme = {
+ *   colors: {
+ *     textPrimary: "gray-100",
+ *     accentBrand: "ember-500",
+ *   },
+ *   spatial: {
+ *     sectionLargePadding: "spacing-96",
+ *   },
+ *   surface: {
+ *     cardRadius: "radii-8",
+ *   },
+ * };
+ *
+ * <Tout theme={customTheme} ... />
+ * ```
+ */
+interface ComponentTheme {
+    colors?: ComponentThemeColors;
+    spatial?: ComponentThemeSpatial;
+    surface?: ComponentThemeSurface;
+}
+/**
+ * Button-specific theme interface for customizing individual button appearance.
+ *
+ * @example
+ * ```tsx
+ * const buttonTheme: ButtonTheme = {
+ *   bg: "ember-500",
+ *   bgHover: "ember-600",
+ *   text: "white",
+ *   radius: "radii-8",
+ * };
+ *
+ * <Button theme={buttonTheme}>Themed Button</Button>
+ * ```
+ */
+interface ButtonTheme {
+    /** Background color */
+    bg?: ColorToken;
+    /** Background color on hover */
+    bgHover?: ColorToken;
+    /** Background color on active/press */
+    bgActive?: ColorToken;
+    /** Text color */
+    text?: ColorToken;
+    /** Border color (if using border) */
+    borderColor?: ColorToken;
+    /** Border width in pixels (0 for no border) */
+    borderWidth?: number;
+    /** Border radius */
+    radius?: RadiusToken;
+}
+/**
+ * Converts a ComponentTheme object to CSS custom properties (inline style object)
+ *
+ * @param theme - The theme object to convert
+ * @returns An object suitable for use as React inline styles
+ */
+declare function themeToStyleVars(theme: ComponentTheme | undefined): React.CSSProperties;
+/**
+ * Converts a ButtonTheme object to CSS custom properties (inline style object)
+ *
+ * @param theme - The button theme object to convert
+ * @returns An object suitable for use as React inline styles
+ */
+declare function buttonThemeToStyleVars(theme: ButtonTheme | undefined): React.CSSProperties;
+
+/**
+ * Button component based on Figma Button component
+ *
+ * Variants (matches Figma):
+ * - primary: Blue filled button for primary actions
+ * - default: Dark filled button for secondary prominence
+ * - secondary: Light gray filled button with subtle border
+ * - destructive: Red filled button for destructive actions
+ * - outline: Bordered button with transparent background
+ * - ghost: Transparent button with subtle hover
+ * - link: Text-only button with underline on hover
+ *
+ * Sizes (matches Figma):
+ * - sm: Small buttons (32px height)
+ * - default: Default buttons (36px height)
+ * - lg: Large buttons (40px height)
+ *
+ * For icon-only buttons, use the IconButton component instead.
+ *
+ * Theme Support:
+ * Pass a `theme` prop to override default colors via CSS custom properties.
+ */
+declare const buttonVariants: tailwind_variants.TVReturnType<{
+    variant: {
+        primary: string;
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+        themed: string;
+    };
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, "inline-flex items-center justify-center gap-spatial-ui-button-gap-icon-text whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50", tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        primary: string;
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+        themed: string;
+    };
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, {
+    variant: {
+        primary: string;
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+        themed: string;
+    };
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}>, {
+    variant: {
+        primary: string;
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+        themed: string;
+    };
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    variant: {
+        primary: string;
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+        themed: string;
+    };
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, "inline-flex items-center justify-center gap-spatial-ui-button-gap-icon-text whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50", tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        primary: string;
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+        themed: string;
+    };
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, {
+    variant: {
+        primary: string;
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+        ghost: string;
+        link: string;
+        themed: string;
+    };
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}>, unknown, unknown, undefined>>;
+type HTMLButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement>;
+type ButtonProps = ButtonProps$1 & VariantProps<typeof buttonVariants> & HTMLButtonProps & {
+    /**
+     * Theme overrides for button styling via CSS custom properties
+     */
+    theme?: ButtonTheme;
+};
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * IconButton component based on Figma Button component (icon-only variant)
+ *
+ * **IMPORTANT: Accessibility Requirement**
+ * Icon-only buttons MUST have an accessible label. Provide one of:
+ * - `aria-label`: A text description of the button's action (recommended)
+ * - `aria-labelledby`: Reference to an element containing the label
+ * - `title`: Tooltip text (less preferred, but provides a label)
+ *
+ * @example
+ * ```tsx
+ * // Correct usage with aria-label
+ * <IconButton aria-label="Close menu">
+ *   <CloseIcon />
+ * </IconButton>
+ * ```
+ *
+ * Variants (matches Figma):
+ * - primary: Filled brand button (indigo background)
+ * - primary-outline: Outlined brand button (indigo border/text)
+ * - secondary: Filled neutral button (white background, for dark backgrounds)
+ * - secondary-outline: Outlined neutral button (white border/text, for dark backgrounds)
+ * - ghost: Transparent button with subtle hover (for light backgrounds)
+ * - ghost-inverse: Transparent button with subtle hover (for dark backgrounds)
+ *
+ * Sizes:
+ * - sm: Small (28x28)
+ * - md: Medium (40x40) - default
+ * - lg: Large (56x56)
+ *
+ * Rounded:
+ * - default: Standard border radius (matches size)
+ * - full: Fully circular
+ */
+declare const iconButtonVariants: tailwind_variants.TVReturnType<{
+    variant: {
+        primary: string;
+        "primary-outline": string;
+        secondary: string;
+        "secondary-outline": string;
+        ghost: string;
+        "ghost-inverse": string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    rounded: {
+        default: string;
+        full: string;
+    };
+}, undefined, "inline-flex items-center justify-center whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        primary: string;
+        "primary-outline": string;
+        secondary: string;
+        "secondary-outline": string;
+        ghost: string;
+        "ghost-inverse": string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    rounded: {
+        default: string;
+        full: string;
+    };
+}, {
+    variant: {
+        primary: string;
+        "primary-outline": string;
+        secondary: string;
+        "secondary-outline": string;
+        ghost: string;
+        "ghost-inverse": string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    rounded: {
+        default: string;
+        full: string;
+    };
+}>, {
+    variant: {
+        primary: string;
+        "primary-outline": string;
+        secondary: string;
+        "secondary-outline": string;
+        ghost: string;
+        "ghost-inverse": string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    rounded: {
+        default: string;
+        full: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    variant: {
+        primary: string;
+        "primary-outline": string;
+        secondary: string;
+        "secondary-outline": string;
+        ghost: string;
+        "ghost-inverse": string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    rounded: {
+        default: string;
+        full: string;
+    };
+}, undefined, "inline-flex items-center justify-center whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        primary: string;
+        "primary-outline": string;
+        secondary: string;
+        "secondary-outline": string;
+        ghost: string;
+        "ghost-inverse": string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    rounded: {
+        default: string;
+        full: string;
+    };
+}, {
+    variant: {
+        primary: string;
+        "primary-outline": string;
+        secondary: string;
+        "secondary-outline": string;
+        ghost: string;
+        "ghost-inverse": string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    rounded: {
+        default: string;
+        full: string;
+    };
+}>, unknown, unknown, undefined>>;
+interface IconButtonState extends Record<string, unknown> {
+    variant: "primary" | "primary-outline" | "secondary" | "secondary-outline" | "ghost" | "ghost-inverse";
+    size: "sm" | "md" | "lg";
+    rounded: "default" | "full";
+}
+interface IconButtonProps extends useRender.ComponentProps<"button", IconButtonState>, VariantProps<typeof iconButtonVariants> {
+}
+declare function IconButton(props: IconButtonProps): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+
+/**
+ * Input variants for styling based on Figma BaseKit / Interface / Input
+ *
+ * States (handled via CSS pseudo-classes and props):
+ * - Default: White background, subtle border
+ * - Hover: Light gray background (via :hover)
+ * - Focus: Accent border with focus ring (via :focus-visible)
+ * - Error: Error border color (via error prop)
+ * - Disabled: Disabled background (via :disabled)
+ *
+ * Sizes:
+ * - sm: Smaller height and padding (36px)
+ * - default: Standard height (48px)
+ * - lg: Larger height and padding (56px)
+ */
+declare const inputVariants: tailwind_variants.TVReturnType<{
+    size: {
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
+    };
+    error: {
+        true: string;
+        false: "";
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
+    };
+    error: {
+        true: string;
+        false: "";
+    };
+}, {
+    size: {
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
+    };
+    error: {
+        true: string;
+        false: "";
+    };
+}>, {
+    size: {
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
+    };
+    error: {
+        true: string;
+        false: "";
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    size: {
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
+    };
+    error: {
+        true: string;
+        false: "";
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
+    };
+    error: {
+        true: string;
+        false: "";
+    };
+}, {
+    size: {
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
+    };
+    error: {
+        true: string;
+        false: "";
+    };
+}>, unknown, unknown, undefined>>;
+interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
+    /**
+     * Whether the input is in an error state
+     */
+    error?: boolean;
+}
+/**
+ * Input component based on Figma BaseKit / Interface / Input
+ *
+ * A styled text input with support for various states:
+ * - Default, hover, focus, error, and disabled states
+ * - Three size variants: sm, default, lg
+ *
+ * Uses semantic UI tokens for theming support.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Input placeholder="Enter your email" />
+ *
+ * // With error state
+ * <Input error placeholder="Invalid input" />
+ *
+ * // Different sizes
+ * <Input size="sm" placeholder="Small" />
+ * <Input size="lg" placeholder="Large" />
+ *
+ * // Disabled
+ * <Input disabled placeholder="Disabled input" />
+ * ```
+ */
+declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
+
+declare const inputGroupVariants: tailwind_variants.TVReturnType<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}>, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}>, unknown, unknown, undefined>>;
+declare const inputGroupAddonVariants: tailwind_variants.TVReturnType<{
+    align: {
+        "inline-start": string[];
+        "inline-end": string[];
+        "block-start": string[];
+        "block-end": string[];
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    align: {
+        "inline-start": string[];
+        "inline-end": string[];
+        "block-start": string[];
+        "block-end": string[];
+    };
+}, {
+    align: {
+        "inline-start": string[];
+        "inline-end": string[];
+        "block-start": string[];
+        "block-end": string[];
+    };
+}>, {
+    align: {
+        "inline-start": string[];
+        "inline-end": string[];
+        "block-start": string[];
+        "block-end": string[];
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    align: {
+        "inline-start": string[];
+        "inline-end": string[];
+        "block-start": string[];
+        "block-end": string[];
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    align: {
+        "inline-start": string[];
+        "inline-end": string[];
+        "block-start": string[];
+        "block-end": string[];
+    };
+}, {
+    align: {
+        "inline-start": string[];
+        "inline-end": string[];
+        "block-start": string[];
+        "block-end": string[];
+    };
+}>, unknown, unknown, undefined>>;
+interface InputGroupProps extends React$1.FieldsetHTMLAttributes<HTMLFieldSetElement>, VariantProps<typeof inputGroupVariants> {
+}
+/**
+ * InputGroup component for combining inputs with addons, buttons, and text.
+ *
+ * A container that groups an input with prefix/suffix addons, icons, or buttons.
+ * Supports inline (left/right) and block (top/bottom) addon positioning.
+ *
+ * Uses semantic UI tokens for theming support.
+ *
+ * @example
+ * ```tsx
+ * // With prefix icon
+ * <InputGroup>
+ *   <InputGroupAddon>
+ *     <SearchIcon />
+ *   </InputGroupAddon>
+ *   <InputGroupInput placeholder="Search..." />
+ * </InputGroup>
+ *
+ * // With suffix button
+ * <InputGroup>
+ *   <InputGroupInput placeholder="Enter email" />
+ *   <InputGroupAddon align="inline-end">
+ *     <InputGroupButton>Subscribe</InputGroupButton>
+ *   </InputGroupAddon>
+ * </InputGroup>
+ *
+ * // With text prefix
+ * <InputGroup>
+ *   <InputGroupAddon>
+ *     <InputGroupText>https://</InputGroupText>
+ *   </InputGroupAddon>
+ *   <InputGroupInput placeholder="example.com" />
+ * </InputGroup>
+ * ```
+ */
+declare function InputGroup({ className, size, disabled, ...props }: InputGroupProps): react_jsx_runtime.JSX.Element;
+interface InputGroupAddonProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof inputGroupAddonVariants> {
+}
+/**
+ * InputGroupAddon component for positioning addons within an InputGroup.
+ *
+ * Can contain icons, text, or buttons. Clicking the addon focuses the input.
+ *
+ * @example
+ * ```tsx
+ * // Inline start (default - left side)
+ * <InputGroupAddon>
+ *   <SearchIcon />
+ * </InputGroupAddon>
+ *
+ * // Inline end (right side)
+ * <InputGroupAddon align="inline-end">
+ *   <InputGroupButton>Submit</InputGroupButton>
+ * </InputGroupAddon>
+ *
+ * // Block positions (top/bottom)
+ * <InputGroupAddon align="block-start">
+ *   <label>Email Address</label>
+ * </InputGroupAddon>
+ * ```
+ */
+declare function InputGroupAddon({ className, align, onClick, onKeyDown, ...props }: InputGroupAddonProps): react_jsx_runtime.JSX.Element;
+declare const inputGroupButtonVariants: tailwind_variants.TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        "icon-xs": string;
+        "icon-sm": string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        "icon-xs": string;
+        "icon-sm": string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        "icon-xs": string;
+        "icon-sm": string;
+    };
+}>, {
+    size: {
+        xs: string;
+        sm: string;
+        "icon-xs": string;
+        "icon-sm": string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        "icon-xs": string;
+        "icon-sm": string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        "icon-xs": string;
+        "icon-sm": string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        "icon-xs": string;
+        "icon-sm": string;
+    };
+}>, unknown, unknown, undefined>>;
+interface InputGroupButtonProps extends Omit<ButtonProps, "size">, VariantProps<typeof inputGroupButtonVariants> {
+}
+/**
+ * InputGroupButton component for inline buttons within an InputGroup.
+ *
+ * A small button variant designed to fit inside input groups.
+ *
+ * @example
+ * ```tsx
+ * <InputGroupAddon align="inline-end">
+ *   <InputGroupButton>Submit</InputGroupButton>
+ * </InputGroupAddon>
+ *
+ * // Icon button
+ * <InputGroupAddon align="inline-end">
+ *   <InputGroupButton size="icon-xs">
+ *     <ClearIcon />
+ *   </InputGroupButton>
+ * </InputGroupAddon>
+ * ```
+ */
+declare function InputGroupButton({ className, type, variant, size, ...props }: InputGroupButtonProps): react_jsx_runtime.JSX.Element;
+interface InputGroupTextProps extends React$1.HTMLAttributes<HTMLSpanElement> {
+}
+/**
+ * InputGroupText component for static text within an InputGroup.
+ *
+ * Use for prefixes like "https://" or suffixes like ".com"
+ *
+ * @example
+ * ```tsx
+ * <InputGroupAddon>
+ *   <InputGroupText>https://</InputGroupText>
+ * </InputGroupAddon>
+ * ```
+ */
+declare function InputGroupText({ className, ...props }: InputGroupTextProps): react_jsx_runtime.JSX.Element;
+interface InputGroupInputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
+}
+/**
+ * InputGroupInput component - the input element within an InputGroup.
+ *
+ * Styled to integrate seamlessly with the InputGroup container.
+ *
+ * @example
+ * ```tsx
+ * <InputGroup>
+ *   <InputGroupInput placeholder="Enter text..." />
+ * </InputGroup>
+ * ```
+ */
+declare function InputGroupInput({ className, ...props }: InputGroupInputProps): react_jsx_runtime.JSX.Element;
+interface InputGroupTextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement> {
+}
+/**
+ * InputGroupTextarea component - a textarea element within an InputGroup.
+ *
+ * Styled to integrate seamlessly with the InputGroup container.
+ *
+ * @example
+ * ```tsx
+ * <InputGroup>
+ *   <InputGroupTextarea placeholder="Enter long text..." rows={4} />
+ * </InputGroup>
+ * ```
+ */
+declare function InputGroupTextarea({ className, ...props }: InputGroupTextareaProps): react_jsx_runtime.JSX.Element;
+
+interface NdstudioFooterProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The URL to link to
+     * @default "https://ndstudio.gov"
+     */
+    href?: string;
+}
+/**
+ * NdstudioFooter component displays a "Designed and Engineered in DC by National Design Studio" footer link.
+ *
+ * This component is designed to be used as a footer within other components like Tout,
+ * but can also be used standalone.
+ *
+ * @example
+ * ```tsx
+ * // Used within a Tout component via footer slot
+ * <Tout
+ *   headline="Feature Headline"
+ *   primaryAction={<Button>Primary</Button>}
+ *   backgroundMedia={<img src="/bg.jpg" alt="" />}
+ *   footer={<NdstudioFooter />}
+ * />
+ *
+ * // Standalone usage
+ * <NdstudioFooter className="my-custom-class" />
+ * ```
+ */
+declare const NdstudioFooter: React$1.ForwardRefExoticComponent<NdstudioFooterProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const pagerControlVariants: tailwind_variants.TVReturnType<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, "flex items-center", tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}>, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, "flex items-center", tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}>, unknown, unknown, undefined>>;
+declare const dotBaseVariants: tailwind_variants.TVReturnType<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    variant: {
+        charcoal: string;
+        ivory: string;
+    };
+}, undefined, "cursor-pointer rounded-full transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]", tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    variant: {
+        charcoal: string;
+        ivory: string;
+    };
+}, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    variant: {
+        charcoal: string;
+        ivory: string;
+    };
+}>, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    variant: {
+        charcoal: string;
+        ivory: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    variant: {
+        charcoal: string;
+        ivory: string;
+    };
+}, undefined, "cursor-pointer rounded-full transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]", tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    variant: {
+        charcoal: string;
+        ivory: string;
+    };
+}, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    variant: {
+        charcoal: string;
+        ivory: string;
+    };
+}>, unknown, unknown, undefined>>;
+interface PagerControlProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onChange">, VariantProps<typeof pagerControlVariants>, VariantProps<typeof dotBaseVariants> {
+    /**
+     * Total number of pages/items
+     */
+    count: number;
+    /**
+     * Current active page index (0-based)
+     */
+    activeIndex?: number;
+    /**
+     * Duration in milliseconds for each page before auto-advancing
+     * Set to 0 to disable auto-advance
+     * @default 5000
+     */
+    duration?: number;
+    /**
+     * Whether the pager should auto-advance
+     * @default true
+     */
+    autoPlay?: boolean;
+    /**
+     * Callback when the active page changes
+     */
+    onChange?: (index: number) => void;
+    /**
+     * Whether to pause auto-advance on hover
+     * @default true
+     */
+    pauseOnHover?: boolean;
+    /**
+     * Whether to loop back to the first page after the last
+     * @default true
+     */
+    loop?: boolean;
+}
+/**
+ * PagerControl component for indicating progress through a series of pages/slides.
+ *
+ * Features smooth width transitions when switching between dots and an animated
+ * progress fill on the active dot that shows time remaining before auto-advancing
+ * (similar to Apple's carousel indicators).
+ *
+ * Variants:
+ * - charcoal: Dark dots (for light backgrounds)
+ * - ivory: Light dots (for dark backgrounds)
+ *
+ * Sizes:
+ * - sm: Small dots (6px height)
+ * - default: Medium dots (10px height)
+ * - lg: Large dots (16px height)
+ */
+declare const PagerControl: React$1.ForwardRefExoticComponent<PagerControlProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Popover popup variants
+ *
+ * Uses semantic overlay tokens for themeable styling:
+ * - color.overlay.background - Light background
+ * - color.overlay.border - Subtle border
+ * - color.overlay.text - Primary text
+ * - surface.overlay.radius - Rounded corners
+ * - spatial.component.overlay.padding/gap - Consistent spacing
+ */
+declare const popoverPopupVariants: tailwind_variants.TVReturnType<{
+    variant: {
+        default: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        default: string;
+    };
+}, {
+    variant: {
+        default: string;
+    };
+}>, {
+    variant: {
+        default: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    variant: {
+        default: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        default: string;
+    };
+}, {
+    variant: {
+        default: string;
+    };
+}>, unknown, unknown, undefined>>;
+/**
+ * Popover arrow variants - uses shared floating arrow variants
+ */
+declare const popoverArrowVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+interface PopoverRootProps extends Popover$1.Root.Props {
+    children: React$1.ReactNode;
+}
+/**
+ * Popover Root
+ *
+ * Groups all popover parts. Does not render an element.
+ */
+declare const PopoverRoot: ({ children, ...props }: PopoverRootProps) => react_jsx_runtime.JSX.Element;
+interface PopoverTriggerProps extends React$1.ComponentProps<typeof Popover$1.Trigger> {
+    className?: string;
+}
+/**
+ * Popover Trigger
+ *
+ * The element that triggers the popover on click.
+ * Renders as the child element with popover behavior attached.
+ * When children is a single React element, uses `render` prop to avoid wrapper element.
+ */
+declare const PopoverTrigger: React$1.ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+interface PopoverPortalProps extends Popover$1.Portal.Props {
+    children: React$1.ReactNode;
+}
+/**
+ * Popover Portal
+ *
+ * Renders the popover popup in a portal outside the DOM hierarchy.
+ */
+declare const PopoverPortal: ({ children, ...props }: PopoverPortalProps) => react_jsx_runtime.JSX.Element;
+interface PopoverBackdropProps extends Omit<React$1.ComponentProps<typeof Popover$1.Backdrop>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Backdrop
+ *
+ * Optional backdrop element that can be used to close the popover on click.
+ */
+declare const PopoverBackdrop: React$1.ForwardRefExoticComponent<Omit<PopoverBackdropProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+interface PopoverPositionerProps extends Omit<React$1.ComponentProps<typeof Popover$1.Positioner>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Positioner
+ *
+ * Positions the popover popup relative to the trigger.
+ */
+declare const PopoverPositioner: React$1.ForwardRefExoticComponent<Omit<PopoverPositionerProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+interface PopoverPopupProps extends Omit<React$1.ComponentProps<typeof Popover$1.Popup>, "className">, VariantProps<typeof popoverPopupVariants> {
+    className?: string;
+}
+/**
+ * Popover Popup
+ *
+ * The popover content container with styled appearance.
+ */
+declare const PopoverPopup: React$1.ForwardRefExoticComponent<Omit<PopoverPopupProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+interface PopoverArrowProps extends Omit<React$1.ComponentProps<typeof Popover$1.Arrow>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Arrow
+ *
+ * Visual pointer element for the popover.
+ * Uses shared FloatingArrowSvg with overlay color tokens for fill and border.
+ */
+declare const PopoverArrow: React$1.ForwardRefExoticComponent<Omit<PopoverArrowProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+interface PopoverTitleProps extends Omit<React$1.ComponentProps<typeof Popover$1.Title>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Title
+ *
+ * Title element for the popover content.
+ */
+declare const PopoverTitle: React$1.ForwardRefExoticComponent<Omit<PopoverTitleProps, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
+interface PopoverDescriptionProps extends Omit<React$1.ComponentProps<typeof Popover$1.Description>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Description
+ *
+ * Description element for the popover content.
+ */
+declare const PopoverDescription: React$1.ForwardRefExoticComponent<Omit<PopoverDescriptionProps, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
+interface PopoverCloseProps extends Omit<React$1.ComponentProps<typeof Popover$1.Close>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Close
+ *
+ * Close button for the popover.
+ */
+declare const PopoverClose: React$1.ForwardRefExoticComponent<Omit<PopoverCloseProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+interface PopoverProps {
+    /** The content to show in the popover */
+    children: React$1.ReactNode;
+    /** The element that triggers the popover */
+    trigger: React$1.ReactNode;
+    /** Title for the popover (optional) */
+    title?: React$1.ReactNode;
+    /** Side of the trigger to show the popover */
+    side?: "top" | "bottom" | "left" | "right";
+    /** Offset from the trigger */
+    sideOffset?: number;
+    /** Alignment along the side */
+    align?: "start" | "center" | "end";
+    /** Whether to show an arrow */
+    showArrow?: boolean;
+    /** Whether to show a close button */
+    showClose?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Default open state */
+    defaultOpen?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional className for the popup */
+    className?: string;
+}
+/**
+ * Popover
+ *
+ * A simple, pre-composed popover component for common use cases.
+ * For more complex needs, use the compound components directly.
+ *
+ * @example
+ * ```tsx
+ * <Popover
+ *   trigger={<Button>Click me</Button>}
+ *   title="Popover Title"
+ * >
+ *   <p>This is the popover content.</p>
+ * </Popover>
+ * ```
+ */
+declare const Popover: ({ children, trigger, title, side, sideOffset, align, showArrow, showClose, open, defaultOpen, onOpenChange, className, }: PopoverProps) => react_jsx_runtime.JSX.Element;
+declare const PopoverParts: (({ children, ...props }: PopoverRootProps) => react_jsx_runtime.JSX.Element) & {
+    Root: ({ children, ...props }: PopoverRootProps) => react_jsx_runtime.JSX.Element;
+    Trigger: React$1.ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+    Portal: ({ children, ...props }: PopoverPortalProps) => react_jsx_runtime.JSX.Element;
+    Backdrop: React$1.ForwardRefExoticComponent<Omit<PopoverBackdropProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+    Positioner: React$1.ForwardRefExoticComponent<Omit<PopoverPositionerProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+    Popup: React$1.ForwardRefExoticComponent<Omit<PopoverPopupProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+    Arrow: React$1.ForwardRefExoticComponent<Omit<PopoverArrowProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+    Title: React$1.ForwardRefExoticComponent<Omit<PopoverTitleProps, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
+    Description: React$1.ForwardRefExoticComponent<Omit<PopoverDescriptionProps, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
+    Close: React$1.ForwardRefExoticComponent<Omit<PopoverCloseProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+};
+
+/**
+ * Select trigger variants based on Figma BaseKit / Interface / Dropdown
+ *
+ * States:
+ * - Default: White background, subtle border
+ * - Hover: Light gray background
+ * - Focus/Open: Accent border with focus ring
+ * - Selected: Has a value selected (darker text)
+ * - Disabled: Reduced opacity, not interactive
+ */
+declare const selectTriggerVariants: tailwind_variants.TVReturnType<{
+    size: {
+        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
+        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
+        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
+    };
+    error: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly false: "";
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
+        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
+        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
+    };
+    error: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly false: "";
+    };
+}, {
+    size: {
+        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
+        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
+        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
+    };
+    error: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly false: "";
+    };
+}>, {
+    size: {
+        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
+        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
+        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
+    };
+    error: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly false: "";
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    size: {
+        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
+        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
+        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
+    };
+    error: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly false: "";
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
+        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
+        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
+    };
+    error: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly false: "";
+    };
+}, {
+    size: {
+        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
+        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
+        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
+    };
+    error: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly false: "";
+    };
+}>, unknown, unknown, undefined>>;
+/**
+ * Select popup/menu variants
+ */
+declare const selectPopupVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+/**
+ * Select option/item variants based on Figma Menu Items
+ *
+ * States:
+ * - Default: White background
+ * - Hover/Highlighted: Light indigo tint background
+ * - Selected: Stronger indigo tint with blue text and checkmark
+ * - Disabled: Reduced opacity
+ */
+declare const selectOptionVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+interface SelectProps<Value = string> extends Select$1.Root.Props<Value> {
+    children: React$1.ReactNode;
+}
+declare const SelectRoot: <Value = string>({ children, ...props }: SelectProps<Value>) => react_jsx_runtime.JSX.Element;
+interface SelectTriggerProps extends Omit<React$1.ComponentProps<typeof Select$1.Trigger>, "className">, VariantProps<typeof selectTriggerVariants> {
+    className?: string;
+    placeholder?: string;
+}
+declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+interface SelectPopupProps extends Omit<React$1.ComponentProps<typeof Select$1.Popup>, "className"> {
+    className?: string;
+}
+declare const SelectPopup: React$1.ForwardRefExoticComponent<Omit<SelectPopupProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+interface SelectOptionProps extends Omit<React$1.ComponentProps<typeof Select$1.Item>, "className"> {
+    className?: string;
+}
+declare const SelectOption: React$1.ForwardRefExoticComponent<Omit<SelectOptionProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+interface SelectGroupProps extends Omit<React$1.ComponentProps<typeof Select$1.Group>, "className"> {
+    className?: string;
+}
+declare const SelectGroup: React$1.ForwardRefExoticComponent<Omit<SelectGroupProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+interface SelectGroupLabelProps extends Omit<React$1.ComponentProps<typeof Select$1.GroupLabel>, "className"> {
+    className?: string;
+}
+declare const SelectGroupLabel: React$1.ForwardRefExoticComponent<Omit<SelectGroupLabelProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const Select: (<Value = string>({ children, ...props }: SelectProps<Value>) => react_jsx_runtime.JSX.Element) & {
+    Trigger: React$1.ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+    Popup: React$1.ForwardRefExoticComponent<Omit<SelectPopupProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+    Option: React$1.ForwardRefExoticComponent<Omit<SelectOptionProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+    Group: React$1.ForwardRefExoticComponent<Omit<SelectGroupProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+    GroupLabel: React$1.ForwardRefExoticComponent<Omit<SelectGroupLabelProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+};
+
+/**
+ * Tooltip popup variants
+ *
+ * Uses semantic tokens for themeable styling:
+ * - color.tooltip.bg - Dark background
+ * - color.tooltip.text - Light text
+ * - surface.tooltip.radius - Small border radius
+ * - spatial.component.tooltip.padding-x/y - Consistent padding
+ */
+declare const tooltipPopupVariants: tailwind_variants.TVReturnType<{
+    variant: {
+        default: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        default: string;
+    };
+}, {
+    variant: {
+        default: string;
+    };
+}>, {
+    variant: {
+        default: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    variant: {
+        default: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        default: string;
+    };
+}, {
+    variant: {
+        default: string;
+    };
+}>, unknown, unknown, undefined>>;
+/**
+ * Tooltip arrow variants - uses shared floating arrow variants
+ */
+declare const tooltipArrowVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+interface TooltipProviderProps extends Tooltip$1.Provider.Props {
+    children: React$1.ReactNode;
+}
+/**
+ * Tooltip Provider
+ *
+ * Manages shared delays across multiple tooltips.
+ * Wrap your app or a section with this to enable tooltip delay grouping.
+ */
+declare const TooltipProvider: ({ children, ...props }: TooltipProviderProps) => react_jsx_runtime.JSX.Element;
+interface TooltipRootProps extends Tooltip$1.Root.Props {
+    children: React$1.ReactNode;
+}
+/**
+ * Tooltip Root
+ *
+ * Groups all tooltip parts. Does not render an element.
+ */
+declare const TooltipRoot: ({ children, ...props }: TooltipRootProps) => react_jsx_runtime.JSX.Element;
+interface TooltipTriggerProps extends React$1.ComponentProps<typeof Tooltip$1.Trigger> {
+    className?: string;
+}
+/**
+ * Tooltip Trigger
+ *
+ * The element that triggers the tooltip on hover/focus.
+ * Renders as the child element with tooltip behavior attached.
+ * When children is a single React element, uses `render` prop to avoid wrapper element.
+ */
+declare const TooltipTrigger: React$1.ForwardRefExoticComponent<Omit<TooltipTriggerProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+interface TooltipPortalProps extends Tooltip$1.Portal.Props {
+    children: React$1.ReactNode;
+}
+/**
+ * Tooltip Portal
+ *
+ * Renders the tooltip popup in a portal outside the DOM hierarchy.
+ */
+declare const TooltipPortal: ({ children, ...props }: TooltipPortalProps) => react_jsx_runtime.JSX.Element;
+interface TooltipPositionerProps extends Omit<React$1.ComponentProps<typeof Tooltip$1.Positioner>, "className"> {
+    className?: string;
+}
+/**
+ * Tooltip Positioner
+ *
+ * Positions the tooltip popup relative to the trigger.
+ */
+declare const TooltipPositioner: React$1.ForwardRefExoticComponent<Omit<TooltipPositionerProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+interface TooltipPopupProps extends Omit<React$1.ComponentProps<typeof Tooltip$1.Popup>, "className">, VariantProps<typeof tooltipPopupVariants> {
+    className?: string;
+}
+/**
+ * Tooltip Popup
+ *
+ * The tooltip content container with styled appearance.
+ */
+declare const TooltipPopup: React$1.ForwardRefExoticComponent<Omit<TooltipPopupProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+interface TooltipArrowProps extends Omit<React$1.ComponentProps<typeof Tooltip$1.Arrow>, "className"> {
+    className?: string;
+}
+/**
+ * Tooltip Arrow
+ *
+ * Visual pointer element for the tooltip.
+ * Uses shared FloatingArrowSvg with tooltip-bg color token.
+ */
+declare const TooltipArrow: React$1.ForwardRefExoticComponent<Omit<TooltipArrowProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+interface TooltipProps {
+    /** The content to show in the tooltip */
+    content: React$1.ReactNode;
+    /** The element that triggers the tooltip */
+    children: React$1.ReactNode;
+    /** Side of the trigger to show the tooltip */
+    side?: "top" | "bottom" | "left" | "right";
+    /** Offset from the trigger */
+    sideOffset?: number;
+    /** Alignment along the side */
+    align?: "start" | "center" | "end";
+    /** Delay before showing the tooltip (ms) */
+    delay?: number;
+    /** Delay before hiding the tooltip (ms) */
+    closeDelay?: number;
+    /** Whether to show an arrow */
+    showArrow?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Default open state */
+    defaultOpen?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional className for the popup */
+    className?: string;
+}
+/**
+ * Tooltip
+ *
+ * A simple, pre-composed tooltip component for common use cases.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="Save your changes">
+ *   <Button>Save</Button>
+ * </Tooltip>
+ * ```
+ */
+declare const Tooltip: ({ content, children, side, sideOffset, align, delay, closeDelay, showArrow, open, defaultOpen, onOpenChange, className, }: TooltipProps) => react_jsx_runtime.JSX.Element;
+declare const TooltipParts: (({ children, ...props }: TooltipRootProps) => react_jsx_runtime.JSX.Element) & {
+    Provider: ({ children, ...props }: TooltipProviderProps) => react_jsx_runtime.JSX.Element;
+    Root: ({ children, ...props }: TooltipRootProps) => react_jsx_runtime.JSX.Element;
+    Trigger: React$1.ForwardRefExoticComponent<Omit<TooltipTriggerProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+    Portal: ({ children, ...props }: TooltipPortalProps) => react_jsx_runtime.JSX.Element;
+    Positioner: React$1.ForwardRefExoticComponent<Omit<TooltipPositionerProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+    Popup: React$1.ForwardRefExoticComponent<Omit<TooltipPopupProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+    Arrow: React$1.ForwardRefExoticComponent<Omit<TooltipArrowProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+};
+
+interface DevToolbarProps {
+    defaultExpanded?: boolean;
+}
+declare function DevToolbar({ defaultExpanded }: DevToolbarProps): react_jsx_runtime.JSX.Element;
+
+interface GridOverlayProps {
+    columnOpacity?: number;
+    borderOpacity?: number;
+    visible?: boolean;
+}
+declare function GridOverlay({ columnOpacity, borderOpacity, visible, }: GridOverlayProps): react_jsx_runtime.JSX.Element;
+
+declare const cardVariants: tailwind_variants.TVReturnType<{
+    layout: {
+        vertical: string;
+        horizontal: string;
+        /**
+         * Overlay layout - content sits on top of full-bleed background.
+         * Use with Background components for images/gradients.
+         */
+        overlay: string;
+    };
+}, undefined, "relative flex overflow-hidden rounded-surface-card bg-card-background stroke-surface-card border-border-subtle border-solid", tailwind_variants_dist_config_js.TVConfig<{
+    layout: {
+        vertical: string;
+        horizontal: string;
+        /**
+         * Overlay layout - content sits on top of full-bleed background.
+         * Use with Background components for images/gradients.
+         */
+        overlay: string;
+    };
+}, {
+    layout: {
+        vertical: string;
+        horizontal: string;
+        /**
+         * Overlay layout - content sits on top of full-bleed background.
+         * Use with Background components for images/gradients.
+         */
+        overlay: string;
+    };
+}>, {
+    layout: {
+        vertical: string;
+        horizontal: string;
+        /**
+         * Overlay layout - content sits on top of full-bleed background.
+         * Use with Background components for images/gradients.
+         */
+        overlay: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    layout: {
+        vertical: string;
+        horizontal: string;
+        /**
+         * Overlay layout - content sits on top of full-bleed background.
+         * Use with Background components for images/gradients.
+         */
+        overlay: string;
+    };
+}, undefined, "relative flex overflow-hidden rounded-surface-card bg-card-background stroke-surface-card border-border-subtle border-solid", tailwind_variants_dist_config_js.TVConfig<{
+    layout: {
+        vertical: string;
+        horizontal: string;
+        /**
+         * Overlay layout - content sits on top of full-bleed background.
+         * Use with Background components for images/gradients.
+         */
+        overlay: string;
+    };
+}, {
+    layout: {
+        vertical: string;
+        horizontal: string;
+        /**
+         * Overlay layout - content sits on top of full-bleed background.
+         * Use with Background components for images/gradients.
+         */
+        overlay: string;
+    };
+}>, unknown, unknown, undefined>>;
+interface CardProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
+}
+/**
+ * Card component for displaying content in a contained, scannable format.
+ *
+ * Layouts:
+ * - vertical: Image on top, content below (default)
+ * - horizontal: Image on left, content on right
+ * - overlay: Full-bleed background with content on top
+ *
+ * Use with CardImage, CardContent, CardEyebrow, CardTitle, CardDescription, and CardActions.
+ * For overlay layout, use Background components for full-bleed backgrounds.
+ */
+declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement>>;
+interface CardImageProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The image source URL
+     */
+    src?: string;
+    /**
+     * Alt text for the image
+     */
+    alt?: string;
+}
+/**
+ * Card image area. For vertical layout, displays with 16:9 aspect ratio.
+ * For horizontal layout, takes up ~40% width and stretches to content height.
+ */
+declare const CardImage: React$1.ForwardRefExoticComponent<CardImageProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const cardContentVariants: tailwind_variants.TVReturnType<{
+    /**
+     * Vertical alignment of content within the card.
+     * Useful for overlay layouts to position content at top/center/bottom.
+     */
+    justify: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}, undefined, "flex w-full flex-1 flex-col gap-spatial-card-large-gap p-spatial-card-large-padding", tailwind_variants_dist_config_js.TVConfig<{
+    /**
+     * Vertical alignment of content within the card.
+     * Useful for overlay layouts to position content at top/center/bottom.
+     */
+    justify: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}, {
+    /**
+     * Vertical alignment of content within the card.
+     * Useful for overlay layouts to position content at top/center/bottom.
+     */
+    justify: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}>, {
+    /**
+     * Vertical alignment of content within the card.
+     * Useful for overlay layouts to position content at top/center/bottom.
+     */
+    justify: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    /**
+     * Vertical alignment of content within the card.
+     * Useful for overlay layouts to position content at top/center/bottom.
+     */
+    justify: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}, undefined, "flex w-full flex-1 flex-col gap-spatial-card-large-gap p-spatial-card-large-padding", tailwind_variants_dist_config_js.TVConfig<{
+    /**
+     * Vertical alignment of content within the card.
+     * Useful for overlay layouts to position content at top/center/bottom.
+     */
+    justify: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}, {
+    /**
+     * Vertical alignment of content within the card.
+     * Useful for overlay layouts to position content at top/center/bottom.
+     */
+    justify: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}>, unknown, unknown, undefined>>;
+interface CardContentProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardContentVariants> {
+}
+/**
+ * Card content container with proper padding and spacing.
+ * Uses spatial card tokens for consistent sizing.
+ * For overlay layout, add `relative z-10` to ensure content sits above background.
+ *
+ * @example
+ * ```tsx
+ * // Content at bottom of overlay card
+ * <Card layout="overlay">
+ *   <Background.Image src="/hero.jpg" />
+ *   <CardContent justify="end" className="relative z-10">
+ *     <CardTitle>Title</CardTitle>
+ *   </CardContent>
+ * </Card>
+ * ```
+ */
+declare const CardContent: React$1.ForwardRefExoticComponent<CardContentProps & React$1.RefAttributes<HTMLDivElement>>;
+interface CardEyebrowProps extends React$1.HTMLAttributes<HTMLParagraphElement> {
+}
+/**
+ * Optional eyebrow text above the card title.
+ */
+declare const CardEyebrow: React$1.ForwardRefExoticComponent<CardEyebrowProps & React$1.RefAttributes<HTMLParagraphElement>>;
+interface CardTitleProps extends React$1.HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * The heading level to render (h1-h6). Defaults to h3.
+     */
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+}
+/**
+ * Card title/heading. Use the `as` prop to change the heading level.
+ */
+declare const CardTitle: React$1.ForwardRefExoticComponent<CardTitleProps & React$1.RefAttributes<HTMLHeadingElement>>;
+interface CardDescriptionProps extends React$1.HTMLAttributes<HTMLParagraphElement> {
+}
+/**
+ * Card body/description text.
+ */
+declare const CardDescription: React$1.ForwardRefExoticComponent<CardDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>>;
+interface CardBodyProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Container for card text content (eyebrow, title, description).
+ * Uses spatial card tokens for consistent sizing.
+ */
+declare const CardBody: React$1.ForwardRefExoticComponent<CardBodyProps & React$1.RefAttributes<HTMLDivElement>>;
+interface CardActionsProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Container for card action buttons.
+ * Uses primitive spacing tokens.
+ */
+declare const CardActions: React$1.ForwardRefExoticComponent<CardActionsProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface NavbarProps extends React$1.HTMLAttributes<HTMLElement> {
+}
+/**
+ * Main navigation bar container.
+ * Provides responsive layout for brand, links, and actions.
+ */
+declare const Navbar: React$1.ForwardRefExoticComponent<NavbarProps & React$1.RefAttributes<HTMLElement>>;
+interface NavbarBrandProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    asChild?: boolean;
+}
+/**
+ * Brand/logo area of the navbar.
+ * Use asChild to render as a link.
+ */
+declare const NavbarBrand: React$1.ForwardRefExoticComponent<NavbarBrandProps & React$1.RefAttributes<HTMLDivElement>>;
+interface NavbarLinksProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Container for navigation links.
+ * Centers links on desktop, hidden on mobile (use NavbarMobileMenu instead).
+ */
+declare const NavbarLinks: React$1.ForwardRefExoticComponent<NavbarLinksProps & React$1.RefAttributes<HTMLDivElement>>;
+interface NavbarLinkProps extends React$1.AnchorHTMLAttributes<HTMLAnchorElement> {
+    asChild?: boolean;
+    active?: boolean;
+}
+/**
+ * Individual navigation link.
+ * Use asChild to render with a router Link component.
+ */
+declare const NavbarLink: React$1.ForwardRefExoticComponent<NavbarLinkProps & React$1.RefAttributes<HTMLAnchorElement>>;
+interface NavbarActionsProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Container for navbar action items (search, menu button, etc).
+ */
+declare const NavbarActions: React$1.ForwardRefExoticComponent<NavbarActionsProps & React$1.RefAttributes<HTMLDivElement>>;
+interface NavbarMobileMenuProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Mobile menu container that displays navigation links on mobile devices.
+ * Hidden on desktop (md and above). Should be used with NavbarMobileMenuButton.
+ * Built on Base UI Dialog for accessibility (focus trap, escape key, click-outside).
+ */
+declare const NavbarMobileMenu: React$1.ForwardRefExoticComponent<NavbarMobileMenuProps & React$1.RefAttributes<HTMLDivElement>>;
+interface NavbarMobileMenuButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+}
+/**
+ * Button to toggle the mobile menu.
+ * Should be placed in NavbarActions on mobile.
+ * Use asChild to render as a custom button component (e.g., IconButton).
+ */
+declare const NavbarMobileMenuButton: React$1.ForwardRefExoticComponent<NavbarMobileMenuButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+interface NavbarMobileMenuLinkProps extends React$1.AnchorHTMLAttributes<HTMLAnchorElement> {
+    asChild?: boolean;
+    active?: boolean;
+}
+/**
+ * Navigation link for the mobile menu.
+ * Automatically closes the mobile menu when clicked.
+ * Use asChild to render with a router Link component.
+ */
+declare const NavbarMobileMenuLink: React$1.ForwardRefExoticComponent<NavbarMobileMenuLinkProps & React$1.RefAttributes<HTMLAnchorElement>>;
+
+declare const usGovBannerVariants: tailwind_variants.TVReturnType<{
+    variant: {
+        default: {
+            root: string;
+            content: string;
+            text: string;
+        };
+        inverted: {
+            root: string;
+            content: string;
+            text: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+    text: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        default: {
+            root: string;
+            content: string;
+            text: string;
+        };
+        inverted: {
+            root: string;
+            content: string;
+            text: string;
+        };
+    };
+}, {
+    variant: {
+        default: {
+            root: string;
+            content: string;
+            text: string;
+        };
+        inverted: {
+            root: string;
+            content: string;
+            text: string;
+        };
+    };
+}>, {
+    variant: {
+        default: {
+            root: string;
+            content: string;
+            text: string;
+        };
+        inverted: {
+            root: string;
+            content: string;
+            text: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+    text: string;
+}, tailwind_variants.TVReturnType<{
+    variant: {
+        default: {
+            root: string;
+            content: string;
+            text: string;
+        };
+        inverted: {
+            root: string;
+            content: string;
+            text: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+    text: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        default: {
+            root: string;
+            content: string;
+            text: string;
+        };
+        inverted: {
+            root: string;
+            content: string;
+            text: string;
+        };
+    };
+}, {
+    variant: {
+        default: {
+            root: string;
+            content: string;
+            text: string;
+        };
+        inverted: {
+            root: string;
+            content: string;
+            text: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+interface USGovBannerProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof usGovBannerVariants> {
+    /**
+     * Custom flag icon element. Defaults to a US flag SVG.
+     */
+    flagIcon?: React$1.ReactNode;
+    /**
+     * Banner text content
+     * @default "An official website of the United States government"
+     */
+    text?: string;
+}
+/**
+ * US Government official website banner.
+ * Displays the official government website notice with flag icon.
+ * Commonly placed at the very top of government websites.
+ *
+ * Variants:
+ * - default: Light background with dark text (for light pages)
+ * - inverted: Transparent background with white text/flag (for dark backgrounds/heroes)
+ *
+ * @example
+ * ```tsx
+ * // Default (light)
+ * <USGovBanner />
+ *
+ * // Inverted (for dark backgrounds)
+ * <USGovBanner variant="inverted" />
+ * ```
+ */
+declare const USGovBanner: React$1.ForwardRefExoticComponent<USGovBannerProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Banner component based on Figma BaseKit / Banners
+ *
+ * Used to surface short, important updates or a single key action
+ * without disrupting the main page content.
+ *
+ * Responsive behavior using 24-column grid:
+ * - Mobile (sm): Stacked layout, 20px horizontal / 32px vertical padding
+ * - Tablet (md): Horizontal layout, 56px padding
+ * - Desktop (lg): Horizontal layout, 72px padding
+ *
+ * Must be placed inside a `grid-container`. Uses `col-full` to span all columns.
+ */
+declare const bannerVariants: tailwind_variants.TVReturnType<{
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+}, {
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+}>, {
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+}, {
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+}>, unknown, unknown, undefined>>;
+interface BannerProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof bannerVariants> {
+    /**
+     * The heading text displayed in the banner
+     */
+    heading: string;
+    /**
+     * The description text displayed below the heading
+     */
+    description: string;
+    /**
+     * Optional action element (typically a Button component)
+     */
+    action?: React$1.ReactNode;
+}
+/**
+ * Banner component for surfacing important updates or CTAs.
+ *
+ * Uses the 24-column grid system - must be placed inside a `grid-container`.
+ * Spans full width with `col-full`.
+ *
+ * Responsive across breakpoints:
+ * - Mobile: Stacked layout with smaller padding
+ * - Tablet: Horizontal layout with medium padding
+ * - Desktop: Horizontal layout with larger padding
+ *
+ * @example
+ * ```tsx
+ * <div className="grid-container">
+ *   <Banner
+ *     heading="Important Update"
+ *     description="Check out our new features."
+ *     action={<Button>Learn More</Button>}
+ *   />
+ * </div>
+ *
+ * // Dark colorScheme
+ * <Banner
+ *   colorScheme="dark"
+ *   heading="Still Have Questions?"
+ *   description="Contact us at support@example.com"
+ *   action={<Button variant="secondary">Email Us</Button>}
+ * />
+ * ```
+ */
+declare const Banner: React$1.ForwardRefExoticComponent<BannerProps & React$1.RefAttributes<HTMLElement>>;
+
+/**
+ * CardGrid component for displaying cards in a responsive grid layout
+ *
+ * Variants:
+ * - A: 3 columns on desktop, 2 on tablet, 1 on mobile
+ * - B: 2 columns on desktop/tablet, 1 on mobile
+ *
+ * Uses the 24-column grid system with grid-container as root.
+ */
+declare const cardGridVariants: tailwind_variants.TVReturnType<{
+    variant: {
+        A: string;
+        B: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        A: string;
+        B: string;
+    };
+}, {
+    variant: {
+        A: string;
+        B: string;
+    };
+}>, {
+    variant: {
+        A: string;
+        B: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    variant: {
+        A: string;
+        B: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        A: string;
+        B: string;
+    };
+}, {
+    variant: {
+        A: string;
+        B: string;
+    };
+}>, unknown, unknown, undefined>>;
+interface CardGridProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof cardGridVariants> {
+    /**
+     * The title text displayed above the cards
+     */
+    title: string;
+    /**
+     * The card elements to display in the grid
+     */
+    cards: React$1.ReactNode[];
+}
+/**
+ * CardGrid component for displaying cards in a responsive grid layout.
+ *
+ * Uses the 24-column grid system with grid-container as root.
+ *
+ * Layout (Variant A):
+ * - Mobile (sm): Single column, py-72
+ * - Tablet (md): 2 columns, gap-56 between title and cards, gap-y-20 between cards
+ * - Desktop (lg+): 3 columns, py-128, gap-64 between title and cards, gap-y-20 between cards
+ *
+ * Layout (Variant B):
+ * - Mobile (sm): Single column, py-72
+ * - Tablet (md): 2 columns, gap-56 between title and cards, gap-y-20 between cards
+ * - Desktop (lg+): 2 columns, py-128, gap-64 between title and cards, gap-y-20 between cards
+ *
+ * @example
+ * ```tsx
+ * <CardGrid
+ *   variant="A"
+ *   title="Featured Cards"
+ *   cards={[
+ *     <Card key="1">...</Card>,
+ *     <Card key="2">...</Card>,
+ *   ]}
+ * />
+ * ```
+ */
+declare const CardGrid: React$1.ForwardRefExoticComponent<CardGridProps & React$1.RefAttributes<HTMLElement>>;
+
+/**
+ * TwoColumnSection component for text-heavy content sections
+ *
+ * Layout:
+ * - Desktop (lg+): Title left, content right with border-top divider
+ * - Mobile/Tablet: Stacked vertically
+ *
+ * Uses the 24-column grid system.
+ */
+declare const twoColumnSectionVariants: tailwind_variants.TVReturnType<{
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+    layout: {
+        asymmetric: string;
+        equal: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+    layout: {
+        asymmetric: string;
+        equal: string;
+    };
+}, {
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+    layout: {
+        asymmetric: string;
+        equal: string;
+    };
+}>, {
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+    layout: {
+        asymmetric: string;
+        equal: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+    layout: {
+        asymmetric: string;
+        equal: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+    layout: {
+        asymmetric: string;
+        equal: string;
+    };
+}, {
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+    layout: {
+        asymmetric: string;
+        equal: string;
+    };
+}>, unknown, unknown, undefined>>;
+interface TwoColumnSectionProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof twoColumnSectionVariants> {
+    /**
+     * The title text displayed in the left column
+     */
+    title: string;
+    /**
+     * Lead content - prominently styled (brighter text)
+     * Can be a string or ReactNode for rich content
+     */
+    lead?: React$1.ReactNode;
+    /**
+     * Body content - secondary styled (muted text)
+     * Can be a string or ReactNode for rich content
+     */
+    children: React$1.ReactNode;
+    /**
+     * Layout style for the columns
+     * - "asymmetric" (default): Uses 24-column grid with ~40/60 split (title: 9, content: 15)
+     * - "equal": Simple 2-column equal-width layout at md+ breakpoints
+     */
+    layout?: "asymmetric" | "equal";
+}
+/**
+ * TwoColumnSection component for text-heavy content with title/content split.
+ *
+ * Layout:
+ * - Mobile/Tablet: Stacked (title above content)
+ * - Desktop (lg+): Title left (~40%), Content right (~60%)
+ *
+ * @example
+ * ```tsx
+ * <TwoColumnSection
+ *   title="US Tech Force"
+ *   lead="The US Tech Force is recruiting an elite corps of engineers..."
+ *   variant="dark"
+ * >
+ *   <p>Through a two-year program, participants will work...</p>
+ *   <p>Upon completing the program, engineers can seek...</p>
+ * </TwoColumnSection>
+ * ```
+ */
+declare const TwoColumnSection: React$1.ForwardRefExoticComponent<TwoColumnSectionProps & React$1.RefAttributes<HTMLElement>>;
+
+interface FaqSectionProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "title">, VariantProps<typeof twoColumnSectionVariants> {
+    /**
+     * The title text displayed in the left column
+     * @default "Frequently Asked Questions"
+     */
+    title?: string;
+    /**
+     * The FAQ content - typically an Accordion with AccordionItems
+     */
+    children: React$1.ReactNode;
+}
+/**
+ * FaqSection component for displaying FAQ content in a two-column layout.
+ *
+ * Wraps TwoColumnSection with FAQ-specific defaults and typography.
+ *
+ * Layout:
+ * - Mobile/Tablet: Stacked (title above content)
+ * - Desktop (lg+): Title left (~40%), FAQ content right (~60%)
+ *
+ * @example
+ * ```tsx
+ * <FaqSection>
+ *   <Accordion defaultExpanded="faq-1">
+ *     <AccordionItem id="faq-1" title="What is the US Tech Force?">
+ *       Tech Force will be an elite group of technology specialists...
+ *     </AccordionItem>
+ *     <AccordionItem id="faq-2" title="What skills are required?">
+ *       We're looking for expertise in software engineering...
+ *     </AccordionItem>
+ *   </Accordion>
+ * </FaqSection>
+ *
+ * // With custom title
+ * <FaqSection title="Common Questions" colorScheme="light">
+ *   ...
+ * </FaqSection>
+ * ```
+ */
+declare const FaqSection: React$1.ForwardRefExoticComponent<FaqSectionProps & React$1.RefAttributes<HTMLElement>>;
+
+declare const DEFAULT_TITLE_TYPOGRAPHY = "typography-h1-display";
+declare const heroVariants: tailwind_variants.TVReturnType<{
+    variant: {
+        A1: {
+            root: string;
+            content: string[];
+        };
+        A2: {
+            root: string;
+            content: string[];
+        };
+        A3: {
+            root: string;
+            content: string[];
+        };
+    };
+    colorScheme: {
+        dark: {
+            root: string;
+            title: string;
+        };
+        light: {
+            root: string;
+            title: string;
+        };
+    };
+    hasBackground: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    top: string;
+    content: string[];
+    title: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        A1: {
+            root: string;
+            content: string[];
+        };
+        A2: {
+            root: string;
+            content: string[];
+        };
+        A3: {
+            root: string;
+            content: string[];
+        };
+    };
+    colorScheme: {
+        dark: {
+            root: string;
+            title: string;
+        };
+        light: {
+            root: string;
+            title: string;
+        };
+    };
+    hasBackground: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    variant: {
+        A1: {
+            root: string;
+            content: string[];
+        };
+        A2: {
+            root: string;
+            content: string[];
+        };
+        A3: {
+            root: string;
+            content: string[];
+        };
+    };
+    colorScheme: {
+        dark: {
+            root: string;
+            title: string;
+        };
+        light: {
+            root: string;
+            title: string;
+        };
+    };
+    hasBackground: {
+        true: {
+            root: string;
+        };
+    };
+}>, {
+    variant: {
+        A1: {
+            root: string;
+            content: string[];
+        };
+        A2: {
+            root: string;
+            content: string[];
+        };
+        A3: {
+            root: string;
+            content: string[];
+        };
+    };
+    colorScheme: {
+        dark: {
+            root: string;
+            title: string;
+        };
+        light: {
+            root: string;
+            title: string;
+        };
+    };
+    hasBackground: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    top: string;
+    content: string[];
+    title: string;
+}, tailwind_variants.TVReturnType<{
+    variant: {
+        A1: {
+            root: string;
+            content: string[];
+        };
+        A2: {
+            root: string;
+            content: string[];
+        };
+        A3: {
+            root: string;
+            content: string[];
+        };
+    };
+    colorScheme: {
+        dark: {
+            root: string;
+            title: string;
+        };
+        light: {
+            root: string;
+            title: string;
+        };
+    };
+    hasBackground: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    top: string;
+    content: string[];
+    title: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        A1: {
+            root: string;
+            content: string[];
+        };
+        A2: {
+            root: string;
+            content: string[];
+        };
+        A3: {
+            root: string;
+            content: string[];
+        };
+    };
+    colorScheme: {
+        dark: {
+            root: string;
+            title: string;
+        };
+        light: {
+            root: string;
+            title: string;
+        };
+    };
+    hasBackground: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    variant: {
+        A1: {
+            root: string;
+            content: string[];
+        };
+        A2: {
+            root: string;
+            content: string[];
+        };
+        A3: {
+            root: string;
+            content: string[];
+        };
+    };
+    colorScheme: {
+        dark: {
+            root: string;
+            title: string;
+        };
+        light: {
+            root: string;
+            title: string;
+        };
+    };
+    hasBackground: {
+        true: {
+            root: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+declare const heroHeaderVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "relative z-10 w-full", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "relative z-10 w-full", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+declare const heroContentVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+interface HeroHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Header slot for Hero - used for navigation, gov banners, etc.
+ * Full-width with no padding, sits at the top of the hero.
+ */
+declare const HeroHeader: React$1.ForwardRefExoticComponent<HeroHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
+interface HeroContentProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Content container for Hero - use for main content.
+ * Has padding and sits above backgrounds with z-10.
+ */
+declare const HeroContent: React$1.ForwardRefExoticComponent<HeroContentProps & React$1.RefAttributes<HTMLDivElement>>;
+interface HeroProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "title">, VariantProps<typeof heroVariants> {
+    /**
+     * The title text displayed in the hero.
+     * If provided, renders an h1 with default typography.
+     * Omit to use children for custom content composition.
+     */
+    title?: string;
+    /**
+     * Custom typography class for the title using primitive tokens.
+     * Default: "typography-h1-display"
+     */
+    titleClassName?: string;
+    /**
+     * Color scheme for text content.
+     * - dark: Dark text for use on light backgrounds (default)
+     * - light: Light text for use on dark backgrounds
+     */
+    colorScheme?: "dark" | "light";
+    /**
+     * Content for the top slot (full-width, no padding).
+     * Use for USGovBanner, Navigation, etc.
+     */
+    top?: React$1.ReactNode;
+    /**
+     * Background for the hero. Can be:
+     * - A color string (hex, rgb, etc.) for solid backgrounds
+     * - A ReactNode (use HeroBackground.Image, HeroBackground.Video, or HeroBackground.Stream)
+     */
+    background?: React$1.ReactNode | string;
+    /**
+     * Opacity of the overlay (0-1, default: 0)
+     * Only applies when using a background slot
+     */
+    overlayOpacity?: number;
+    /**
+     * Color of the overlay (default: "black")
+     */
+    overlayColor?: string;
+    /**
+     * Border radius for the hero container
+     * Useful for designs with rounded bottom corners
+     */
+    borderRadius?: string;
+    /**
+     * Theme overrides for component styling via CSS custom properties
+     */
+    theme?: ComponentTheme;
+}
+/**
+ * Hero component for page headers with large display typography.
+ *
+ * Slots:
+ * - `top`: Full-width slot at top for USGovBanner, Navigation (no padding)
+ * - `children`: Main content slot with padding and alignment
+ *
+ * The `title` prop is a convenience for simple heroes - it renders an h1 with
+ * responsive typography. Children are always rendered, so you can use both
+ * or just children for full control.
+ *
+ * Variants:
+ * - A1: Content at bottom (default)
+ * - A2: Content at top
+ * - A3: Content centered
+ *
+ * @example
+ * ```tsx
+ * // Simple - just title and background
+ * <Hero title="Welcome" background="#1a1a1a" />
+ *
+ * // With top slot for banner/nav
+ * <Hero
+ *   variant="A1"
+ *   background={<HeroBackground.Image src="/hero.jpg" />}
+ *   top={
+ *     <>
+ *       <USGovBanner variant="inverted" />
+ *       <Navigation />
+ *     </>
+ *   }
+ * >
+ *   <h1>Board of Peace</h1>
+ *   <p>Subtitle goes here</p>
+ * </Hero>
+ * ```
+ */
+declare const Hero: React$1.ForwardRefExoticComponent<HeroProps & React$1.RefAttributes<HTMLElement>> & {
+    Header: typeof HeroHeader;
+    Content: typeof HeroContent;
+};
+
+interface ProseProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    children: React$1.ReactNode;
+}
+/**
+ * Prose container for long-form content with proper typography and spacing.
+ *
+ * Provides responsive spacing between content blocks:
+ * - Desktop (1440px+): 96px gap
+ * - Tablet (768px+): 72px gap
+ * - Mobile: 56px gap
+ *
+ * Use with ProseSection components for proper content structure.
+ */
+declare const Prose: React$1.ForwardRefExoticComponent<ProseProps & React$1.RefAttributes<HTMLDivElement>>;
+interface ProseSectionProps extends React$1.HTMLAttributes<HTMLElement> {
+    /**
+     * The heading text for this section
+     */
+    heading: string;
+    /**
+     * The heading level to render (h2 or h3)
+     * @default "h2"
+     */
+    as?: "h2" | "h3";
+    children: React$1.ReactNode;
+}
+/**
+ * A section within Prose content, containing a heading and body text.
+ *
+ * Responsive typography:
+ * - h2: Uses typography-h3
+ * - h3: Uses typography-h4
+ * - Body: Uses typography-body-medium
+ */
+declare const ProseSection: React$1.ForwardRefExoticComponent<ProseSectionProps & React$1.RefAttributes<HTMLElement>>;
+
+declare const quoteBlockVariants: tailwind_variants.TVReturnType<{
+    size: {
+        default: {
+            root: string;
+        };
+        compact: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    content: string[];
+    quoteWrapper: string;
+    quote: string[];
+    openQuote: string[];
+    attribution: string;
+    signature: string;
+    byline: string;
+    bylineName: string;
+    bylineTitle: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        default: {
+            root: string;
+        };
+        compact: {
+            root: string;
+        };
+    };
+}, {
+    size: {
+        default: {
+            root: string;
+        };
+        compact: {
+            root: string;
+        };
+    };
+}>, {
+    size: {
+        default: {
+            root: string;
+        };
+        compact: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    content: string[];
+    quoteWrapper: string;
+    quote: string[];
+    openQuote: string[];
+    attribution: string;
+    signature: string;
+    byline: string;
+    bylineName: string;
+    bylineTitle: string;
+}, tailwind_variants.TVReturnType<{
+    size: {
+        default: {
+            root: string;
+        };
+        compact: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    content: string[];
+    quoteWrapper: string;
+    quote: string[];
+    openQuote: string[];
+    attribution: string;
+    signature: string;
+    byline: string;
+    bylineName: string;
+    bylineTitle: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        default: {
+            root: string;
+        };
+        compact: {
+            root: string;
+        };
+    };
+}, {
+    size: {
+        default: {
+            root: string;
+        };
+        compact: {
+            root: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+interface QuoteBlockProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "children">, VariantProps<typeof quoteBlockVariants> {
+    /**
+     * The quote text to display
+     */
+    quote: string;
+    /**
+     * Whether to show decorative quote marks
+     * @default true
+     */
+    showQuoteMarks?: boolean;
+    /**
+     * Signature image URL (optional)
+     */
+    signatureImage?: string;
+    /**
+     * Alt text for signature image
+     */
+    signatureAlt?: string;
+    /**
+     * Attribution name (e.g., "Donald J. Trump")
+     */
+    attributionName?: string;
+    /**
+     * Attribution title (e.g., "45 & 47 President of the United States")
+     */
+    attributionTitle?: string;
+    /**
+     * Background element - use BackgroundImage or similar
+     */
+    background?: React$1.ReactNode;
+    /**
+     * Overlay opacity (0-1)
+     */
+    overlayOpacity?: number;
+    /**
+     * Overlay color
+     */
+    overlayColor?: string;
+    /**
+     * Custom class for the quote text
+     */
+    quoteClassName?: string;
+    /**
+     * Custom class for the byline name
+     */
+    bylineNameClassName?: string;
+    /**
+     * Custom class for the byline title
+     */
+    bylineTitleClassName?: string;
+}
+declare const QuoteBlock: React$1.ForwardRefExoticComponent<QuoteBlockProps & React$1.RefAttributes<HTMLElement>>;
+
+/**
+ * River component for content sections with text and media
+ *
+ * Variants:
+ * - A: Text on left (9 cols), media on right (15 cols) on desktop
+ * - B: Media on left (15 cols), text on right (9 cols) on desktop
+ *
+ * Uses the 24-column grid system. Must be placed inside a `grid-container`.
+ */
+declare const riverVariants: tailwind_variants.TVReturnType<{
+    variant: {
+        A: string;
+        B: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        A: string;
+        B: string;
+    };
+}, {
+    variant: {
+        A: string;
+        B: string;
+    };
+}>, {
+    variant: {
+        A: string;
+        B: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    variant: {
+        A: string;
+        B: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        A: string;
+        B: string;
+    };
+}, {
+    variant: {
+        A: string;
+        B: string;
+    };
+}>, unknown, unknown, undefined>>;
+interface RiverProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof riverVariants> {
+    /**
+     * The headline text
+     */
+    headline: string;
+    /**
+     * The body text
+     */
+    body: string;
+    /**
+     * Primary action button (required)
+     */
+    primaryAction: React$1.ReactNode;
+    /**
+     * Secondary action button (optional)
+     */
+    secondaryAction?: React$1.ReactNode;
+    /**
+     * Media content (image, video, etc.)
+     */
+    media: React$1.ReactNode;
+}
+/**
+ * River component for content sections with text and media.
+ *
+ * Uses the 24-column grid system - must be placed inside a `grid-container`.
+ *
+ * Layout:
+ * - Mobile/Tablet: Stacked (text above media)
+ * - Desktop (lg+):
+ *   - Variant A: Text (9 cols) | Media (15 cols)
+ *   - Variant B: Media (15 cols) | Text (9 cols)
+ *
+ * @example
+ * ```tsx
+ * <div className="grid-container">
+ *   <River
+ *     variant="A"
+ *     headline="Feature Headline"
+ *     body="Description of the feature..."
+ *     primaryAction={<Button>Primary</Button>}
+ *     secondaryAction={<Button variant="outline">Secondary</Button>}
+ *     media={<img src="..." alt="Feature" />}
+ *   />
+ * </div>
+ * ```
+ */
+declare const River: React$1.ForwardRefExoticComponent<RiverProps & React$1.RefAttributes<HTMLElement>>;
+
+/**
+ * Tout variants for background and content styling
+ */
+declare const toutVariants: tailwind_variants.TVReturnType<{
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+    align: {
+        left: string;
+        center: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+    align: {
+        left: string;
+        center: string;
+    };
+}, {
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+    align: {
+        left: string;
+        center: string;
+    };
+}>, {
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+    align: {
+        left: string;
+        center: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+    align: {
+        left: string;
+        center: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+    align: {
+        left: string;
+        center: string;
+    };
+}, {
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+    align: {
+        left: string;
+        center: string;
+    };
+}>, unknown, unknown, undefined>>;
+/**
+ * Tout component based on Figma BaseKit / Touts
+ *
+ * A full-bleed section with a background image and overlaid content.
+ * Content can be positioned on the left side or centered.
+ *
+ * Color schemes:
+ * - light: Light text styling (default)
+ * - dark: Dark text styling
+ *
+ * Alignment:
+ * - left: Content aligned to the left (default)
+ * - center: Content centered
+ *
+ * Responsive behavior:
+ * - Mobile (sm): 600px height, 4 columns with gap-20, content spans all 4 cols
+ * - Tablet (md): 750px height, 12 columns with gap-20, content spans 9 cols (left) or centered
+ * - Desktop (lg): 900px height, 24 columns with gap-20, content spans 9 cols (left) or centered
+ *
+ * This component is self-contained - do NOT wrap in a grid-container.
+ */
+interface ToutProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof toutVariants> {
+    /**
+     * The headline displayed in the tout
+     */
+    headline: React$1.ReactNode;
+    /**
+     * The body text displayed below the headline (optional)
+     */
+    body?: string;
+    /**
+     * Primary action button (required)
+     */
+    primaryAction: React$1.ReactNode;
+    /**
+     * Secondary action button (optional)
+     */
+    secondaryAction?: React$1.ReactNode;
+    /**
+     * Background media (image or video element)
+     * Should be a full-bleed element that covers the entire section
+     */
+    backgroundMedia: React$1.ReactNode;
+    /**
+     * Optional footer content to display at the bottom of the section.
+     * Use with NdstudioFooter component for the branded footer.
+     */
+    footer?: React$1.ReactNode;
+    /**
+     * Component-level theme overrides.
+     * Allows customization of colors, spacing, and surface properties.
+     */
+    theme?: ComponentTheme;
+}
+/**
+ * Tout component for hero-like sections with background media and overlaid content.
+ *
+ * This component is self-contained with its own grid.
+ * Grid setup:
+ * - Desktop (lg): 24 columns, gap-20, content spans 9 cols
+ * - Tablet (md): 12 columns, gap-20, content spans 9 cols
+ * - Mobile: 4 columns, gap-20, content spans all 4 cols
+ *
+ * @example
+ * ```tsx
+ * <Tout
+ *   headline="Feature Headline"
+ *   body="Description of the feature..."
+ *   primaryAction={<Button>Primary</Button>}
+ *   secondaryAction={<Button variant="outline" colorScheme="light">Secondary</Button>}
+ *   backgroundMedia={
+ *     <img
+ *       src="/background.jpg"
+ *       alt=""
+ *       className="absolute inset-0 w-full h-full object-cover"
+ *     />
+ *   }
+ *   footer={<NdstudioFooter />}
+ * />
+ * ```
+ */
+declare const Tout: React$1.ForwardRefExoticComponent<ToutProps & React$1.RefAttributes<HTMLElement>>;
+
+/**
+ * Theme context value
+ */
+interface ThemeContextValue {
+    /** CSS variables map for inline styles */
+    cssVars: CSSVariableMap;
+    /** Resolved nested tokens */
+    tokens: NestedStringRecord;
+    /** Current color theme name */
+    colorTheme: ColorThemeName;
+    /** Current surface theme name */
+    surfaceTheme: SurfaceThemeName;
+}
+/**
+ * Props for ThemeProvider
+ */
+interface ThemeProviderProps {
+    /** Color theme name (defaults to "base") */
+    color?: ColorThemeName;
+    /** Surface theme name (defaults to "base") */
+    surface?: SurfaceThemeName;
+    /** Children to render */
+    children: ReactNode;
+    /** Optional className for the wrapper div */
+    className?: string;
+    /** Whether to render a wrapper div with CSS variables applied (defaults to true) */
+    applyStyles?: boolean;
+}
+/**
+ * ThemeProvider component
+ *
+ * Applies theme tokens as CSS variables using type-safe theme names.
+ *
+ * @example
+ * ```tsx
+ * // Use default base themes
+ * <ThemeProvider>
+ *   <App />
+ * </ThemeProvider>
+ *
+ * // Use specific themes by name
+ * <ThemeProvider color="civic" surface="sharp">
+ *   <App />
+ * </ThemeProvider>
+ *
+ * // Mix and match
+ * <ThemeProvider color="institution" surface="soft">
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+declare function ThemeProvider({ color, surface, children, className, applyStyles, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Theme Hooks
+ *
+ * React hooks for accessing theme context.
+ */
+
+/**
+ * Hook to access the theme context
+ * @throws Error if used outside of ThemeProvider
+ */
+declare function useTheme(): ThemeContextValue;
+/**
+ * Hook to get just the nested tokens
+ */
+declare function useThemeTokens(): NestedStringRecord;
+/**
+ * Hook to get CSS variables for inline styles
+ */
+declare function useCSSVars(): CSSVariableMap;
+
+/**
+ * Theme Utilities
+ *
+ * Helper functions for working with theme tokens and CSS variables.
+ */
+
+/**
+ * Convert nested token object to CSS variable map
+ * @example
+ * toCSSVars({ color: { bg: { page: '#fff' } } })
+ * // Returns: { '--color-bg-page': '#fff' }
+ */
+declare function toCSSVars(tokens: NestedStringRecord): CSSVariableMap;
+/**
+ * Apply CSS variables to an element
+ * @example
+ * applyTheme(document.body, { '--color-bg-page': '#fff' })
+ */
+declare function applyTheme(element: HTMLElement, cssVars: CSSVariableMap): void;
+/**
+ * Remove CSS variables from an element
+ */
+declare function removeTheme(element: HTMLElement, cssVars: CSSVariableMap): void;
+/**
+ * Get a specific token value from nested tokens using dot notation
+ * @example
+ * getToken({ color: { bg: { page: '#fff' } } }, 'color.bg.page')
+ * // Returns: '#fff'
+ */
+declare function getToken(tokens: NestedStringRecord, path: string): string | undefined;
+/**
+ * Create a style object with CSS variables for React inline styles
+ * @example
+ * <div style={createThemeStyle(cssVars)}>...</div>
+ */
+declare function createThemeStyle(cssVars: CSSVariableMap): React.CSSProperties;
+/**
+ * Merge multiple CSS variable maps
+ */
+declare function mergeCSSVars(...maps: CSSVariableMap[]): CSSVariableMap;
+/**
+ * Filter CSS variables by prefix
+ * @example
+ * filterCSSVars(cssVars, '--color-')
+ * // Returns only variables starting with --color-
+ */
+declare function filterCSSVars(cssVars: CSSVariableMap, prefix: string): CSSVariableMap;
+
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, BackgroundCompound as Background, BackgroundGradient, type BackgroundGradientProps, BackgroundImage, type BackgroundImageProps, BackgroundOverlay, type BackgroundOverlayProps, type BackgroundProps, BackgroundStream, type BackgroundStreamProps, BackgroundVideo, type BackgroundVideoProps, Banner, type BannerProps, Button, type ButtonProps, type ButtonTheme, Card, CardActions, type CardActionsProps, CardBody, type CardBodyProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardEyebrow, type CardEyebrowProps, CardGrid, type CardGridProps, CardImage, type CardImageProps, type CardProps, CardTitle, type CardTitleProps, type ColorToken, type ComponentTheme, type ComponentThemeColors, type ComponentThemeSpatial, type ComponentThemeSurface, DEFAULT_TITLE_TYPOGRAPHY, DevToolbar, type DevToolbarProps, FONT_SIZES, FaqSection, type FaqSectionProps, type FontSizeToken, GridOverlay, type GridOverlayProps, Hero, BackgroundCompound as HeroBackground, BackgroundImage as HeroBackgroundImage, type BackgroundImageProps as HeroBackgroundImageProps, BackgroundStream as HeroBackgroundStream, type BackgroundStreamProps as HeroBackgroundStreamProps, BackgroundVideo as HeroBackgroundVideo, type BackgroundVideoProps as HeroBackgroundVideoProps, HeroContent, type HeroContentProps, BackgroundGradient as HeroGradient, type BackgroundGradientProps as HeroGradientProps, HeroHeader, type HeroHeaderProps, BackgroundOverlay as HeroOverlay, type BackgroundOverlayProps as HeroOverlayProps, type HeroProps, IconButton, type IconButtonProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputGroupText, type InputGroupTextProps, InputGroupTextarea, type InputGroupTextareaProps, type InputProps, Navbar, NavbarActions, type NavbarActionsProps, NavbarBrand, type NavbarBrandProps, NavbarLink, type NavbarLinkProps, NavbarLinks, type NavbarLinksProps, NavbarMobileMenu, NavbarMobileMenuButton, type NavbarMobileMenuButtonProps, NavbarMobileMenuLink, type NavbarMobileMenuLinkProps, type NavbarMobileMenuProps, type NavbarProps, NdstudioFooter, type NdstudioFooterProps, PagerControl, type PagerControlProps, Popover, PopoverArrow, type PopoverArrowProps, PopoverBackdrop, type PopoverBackdropProps, PopoverClose, type PopoverCloseProps, PopoverDescription, type PopoverDescriptionProps, PopoverParts, PopoverPopup, type PopoverPopupProps, PopoverPortal, type PopoverPortalProps, PopoverPositioner, type PopoverPositionerProps, type PopoverProps, PopoverRoot, type PopoverRootProps, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps, Prose, type ProseProps, ProseSection, type ProseSectionProps, QuoteBlock, type QuoteBlockProps, type RadiusToken, River, type RiverProps, Select, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectOption, type SelectOptionProps, SelectPopup, type SelectPopupProps, type SelectProps, SelectRoot, SelectTrigger, type SelectTriggerProps, type SpacingToken, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, Tooltip, TooltipArrow, type TooltipArrowProps, TooltipParts, TooltipPopup, type TooltipPopupProps, TooltipPortal, type TooltipPortalProps, TooltipPositioner, type TooltipPositionerProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipRoot, type TooltipRootProps, TooltipTrigger, type TooltipTriggerProps, Tout, type ToutProps, TwoColumnSection, type TwoColumnSectionProps, USGovBanner, type USGovBannerProps, applyTheme, backgroundGradientVariants, backgroundImageVariants, backgroundOverlayVariants, backgroundStreamVariants, backgroundVariants, backgroundVideoVariants, bannerVariants, buttonThemeToStyleVars, buttonVariants, cardGridVariants, cardVariants, createThemeStyle, filterCSSVars, fontSizeToClass, getToken, heroContentVariants, heroHeaderVariants, heroVariants, iconButtonVariants, inputGroupAddonVariants, inputGroupVariants, inputVariants, mergeCSSVars, pagerControlVariants, popoverArrowVariants, popoverPopupVariants, quoteBlockVariants, removeTheme, responsiveTypographyClass, riverVariants, selectOptionVariants, selectPopupVariants, selectTriggerVariants, themeToStyleVars, toCSSVars, tooltipArrowVariants, tooltipPopupVariants, twoColumnSectionVariants, useCSSVars, useTheme, useThemeTokens };