@nationaldesignstudio/react 0.5.4 → 0.5.5

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as tailwind_variants from 'tailwind-variants';
 import { VariantProps } from 'tailwind-variants';
-export { cnBase as cn } from 'tailwind-variants';
+export { cnBase as twMerge } 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';
@@ -10,6 +10,7 @@ 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 { ClassValue } from 'clsx';
 import { CSSVariableMap, NestedStringRecord, ColorThemeName, SurfaceThemeName } from '@nds-design-system/tokens';
 
 declare const accordionVariants: tailwind_variants.TVReturnType<{
@@ -3494,6 +3495,8 @@ interface ToutProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<ty
  */
 declare const Tout: React$1.ForwardRefExoticComponent<ToutProps & React$1.RefAttributes<HTMLElement>>;
 
+declare function cn(...inputs: ClassValue[]): tailwind_variants.CnReturn;
+
 /**
  * Theme context value
  */
@@ -3615,4 +3618,4 @@ declare function mergeCSSVars(...maps: CSSVariableMap[]): CSSVariableMap;
  */
 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 };
+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, cn, 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 };

package/dist/index.js

@@ -2,7 +2,8 @@ import { Accordion as Accordion$1 } from '@base-ui-components/react/accordion';
 import * as React11 from 'react';
 import { createContext, useState, useRef, useCallback, useEffect, useMemo, useContext } from 'react';
 import { tv, cnBase } from 'tailwind-variants';
-export { cnBase as cn } from 'tailwind-variants';
+export { cnBase as twMerge } from 'tailwind-variants';
+import { clsx } from 'clsx';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRender } from '@base-ui-components/react/use-render';
 import { Button as Button$1 } from '@base-ui-components/react/button';
@@ -13,6 +14,9 @@ import { Dialog } from '@base-ui-components/react/dialog';
 import { Slot } from '@radix-ui/react-slot';
 
 // src/components/atoms/accordion/accordion.tsx
+function cn(...inputs) {
+  return cnBase(clsx(inputs));
+}
 var accordionVariants = tv({
   base: "flex flex-col",
   variants: {
@@ -114,7 +118,7 @@ var AccordionItem = React11.forwardRef(
                 /* @__PURE__ */ jsx(
                   "span",
                   {
-                    className: cnBase(
+                    className: cn(
                       "text-base transition-transform duration-200",
                       "[[data-open]_&]:rotate-45"
                     ),
@@ -127,7 +131,7 @@ var AccordionItem = React11.forwardRef(
           /* @__PURE__ */ jsx(
             Accordion$1.Panel,
             {
-              className: cnBase(
+              className: cn(
                 "h-[var(--accordion-panel-height)] overflow-hidden",
                 "transition-[height] duration-300 ease-out",
                 "[&[data-starting-style]]:h-0 [&[data-ending-style]]:h-0"
@@ -711,7 +715,7 @@ var Input = React11.forwardRef(
         ref,
         type,
         "aria-invalid": error || void 0,
-        className: cnBase(inputVariants({ size, error, class: className })),
+        className: cn(inputVariants({ size, error, class: className })),
         "data-size": size ?? "default",
         "data-error": error ?? false,
         ...props
@@ -803,7 +807,7 @@ function InputGroup({ className, size, disabled, ...props }) {
       "data-slot": "input-group",
       "data-disabled": disabled || void 0,
       disabled,
-      className: cnBase(
+      className: cn(
         "p-0 m-0 min-w-0",
         inputGroupVariants({ size, class: className })
       ),
@@ -842,7 +846,7 @@ function InputGroupAddon({
       {
         "data-slot": "input-group-addon",
         "data-align": align,
-        className: cnBase(inputGroupAddonVariants({ align, class: className })),
+        className: cn(inputGroupAddonVariants({ align, class: className })),
         onClick: handleClick,
         onKeyDown: handleKeyDown,
         ...props
@@ -881,7 +885,7 @@ function InputGroupButton({
       type,
       "data-size": size,
       variant,
-      className: cnBase(inputGroupButtonVariants({ size, class: className })),
+      className: cn(inputGroupButtonVariants({ size, class: className })),
       ...props
     }
   );
@@ -890,7 +894,7 @@ function InputGroupText({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: cnBase(
+      className: cn(
         "flex items-center gap-6 typography-ui-text-sm text-text-muted",
         "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-16",
         className
@@ -904,7 +908,7 @@ function InputGroupInput({ className, ...props }) {
     "input",
     {
       "data-slot": "input-group-control",
-      className: cnBase(
+      className: cn(
         "flex-1 min-w-0 h-full w-full",
         "border-0 bg-transparent shadow-none outline-none",
         "typography-ui-text-sm text-left placeholder:text-text-muted",
@@ -921,7 +925,7 @@ function InputGroupTextarea({ className, ...props }) {
     "textarea",
     {
       "data-slot": "input-group-control",
-      className: cnBase(
+      className: cn(
         "flex-1 min-w-0 w-full resize-none",
         "border-0 bg-transparent shadow-none outline-none",
         "typography-ui-text-sm text-left placeholder:text-text-muted",
@@ -935,7 +939,7 @@ function InputGroupTextarea({ className, ...props }) {
 }
 var NdstudioFooter = React11.forwardRef(
   ({ className, href = "https://ndstudio.gov", ...props }, ref) => {
-    return /* @__PURE__ */ jsx("div", { ref, className: cnBase("text-center", className), ...props, children: /* @__PURE__ */ jsxs("p", { className: "typography-label-large uppercase text-ivory-alpha-75", children: [
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("text-center", className), ...props, children: /* @__PURE__ */ jsxs("p", { className: "typography-label-large uppercase text-ivory-alpha-75", children: [
       "Designed and Engineered in DC by",
       " ",
       /* @__PURE__ */ jsxs(
@@ -1163,7 +1167,7 @@ var PagerControl = React11.forwardRef(
                 role: "tab",
                 "aria-selected": true,
                 "aria-label": `Page ${index + 1} of ${count}, current`,
-                className: cnBase(
+                className: cn(
                   "relative cursor-pointer overflow-hidden rounded-full transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]",
                   dotBaseVariants({ size, variant }),
                   getDotWidth(true),
@@ -1173,7 +1177,7 @@ var PagerControl = React11.forwardRef(
                 children: /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: cnBase(
+                    className: cn(
                       "absolute top-0 bottom-0 left-0 h-full rounded-full",
                       getProgressFillClass()
                     ),
@@ -1193,7 +1197,7 @@ var PagerControl = React11.forwardRef(
               role: "tab",
               "aria-selected": false,
               "aria-label": `Go to page ${index + 1} of ${count}`,
-              className: cnBase(
+              className: cn(
                 dotBaseVariants({ size, variant }),
                 getDotWidth(false),
                 getInactiveClasses()
@@ -1233,7 +1237,7 @@ var FloatingArrowSvg = ({
     height: "10",
     viewBox: "0 0 20 10",
     fill: "none",
-    className: cnBase("block", className),
+    className: cn("block", className),
     "aria-hidden": "true",
     children: [
       /* @__PURE__ */ jsx(
@@ -1320,7 +1324,7 @@ var PopoverBackdrop = React11.forwardRef(
       Popover$1.Backdrop,
       {
         ref,
-        className: cnBase("fixed inset-0 z-40", className),
+        className: cn("fixed inset-0 z-40", className),
         ...props
       }
     );
@@ -1334,7 +1338,7 @@ var PopoverPositioner = React11.forwardRef(({ className, side = "bottom", sideOf
       ref,
       side,
       sideOffset,
-      className: cnBase("z-50", className),
+      className: cn("z-50", className),
       ...props
     }
   );
@@ -1346,7 +1350,7 @@ var PopoverPopup = React11.forwardRef(
       Popover$1.Popup,
       {
         ref,
-        className: cnBase(popoverPopupVariants({ variant }), className),
+        className: cn(popoverPopupVariants({ variant }), className),
         ...props
       }
     );
@@ -1359,7 +1363,7 @@ var PopoverArrow = React11.forwardRef(
       Popover$1.Arrow,
       {
         ref,
-        className: cnBase(popoverArrowVariants(), className),
+        className: cn(popoverArrowVariants(), className),
         ...props,
         children: /* @__PURE__ */ jsx(
           FloatingArrowSvg,
@@ -1379,7 +1383,7 @@ var PopoverTitle = React11.forwardRef(
       Popover$1.Title,
       {
         ref,
-        className: cnBase("typography-body-md-md font-semibold", className),
+        className: cn("typography-body-md-md font-semibold", className),
         ...props
       }
     );
@@ -1391,7 +1395,7 @@ var PopoverDescription = React11.forwardRef(({ className, ...props }, ref) => {
     Popover$1.Description,
     {
       ref,
-      className: cnBase(
+      className: cn(
         "typography-body-sm-md text-overlay-text-muted mt-8",
         className
       ),
@@ -1406,7 +1410,7 @@ var PopoverClose = React11.forwardRef(
       Popover$1.Close,
       {
         ref,
-        className: cnBase(
+        className: cn(
           "absolute right-8 top-8 rounded-surface-ui-small p-4",
           "text-overlay-text-muted hover:text-overlay-text",
           "hover:bg-bg-section focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
@@ -1545,7 +1549,7 @@ var selectOptionVariants = tv({
 var SelectChevronIcon = ({ className }) => /* @__PURE__ */ jsx(
   "svg",
   {
-    className: cnBase("size-16 text-gray-500 shrink-0", className),
+    className: cn("size-16 text-gray-500 shrink-0", className),
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
@@ -1565,7 +1569,7 @@ var SelectChevronIcon = ({ className }) => /* @__PURE__ */ jsx(
 var CheckIcon = ({ className }) => /* @__PURE__ */ jsx(
   "svg",
   {
-    className: cnBase("size-14 shrink-0", className),
+    className: cn("size-14 shrink-0", className),
     viewBox: "0 0 14 14",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
@@ -1594,7 +1598,7 @@ var SelectTrigger = React11.forwardRef(
       Select$1.Trigger,
       {
         ref,
-        className: cnBase(selectTriggerVariants({ size, error }), className),
+        className: cn(selectTriggerVariants({ size, error }), className),
         ...props,
         children: [
           /* @__PURE__ */ jsx(Select$1.Value, { children: (value) => value ? value : /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: placeholder }) }),
@@ -1611,7 +1615,7 @@ var SelectPopup = React11.forwardRef(
       Select$1.Popup,
       {
         ref,
-        className: cnBase(selectPopupVariants(), className),
+        className: cn(selectPopupVariants(), className),
         ...props,
         children
       }
@@ -1625,7 +1629,7 @@ var SelectOption = React11.forwardRef(
       Select$1.Item,
       {
         ref,
-        className: cnBase(selectOptionVariants(), className),
+        className: cn(selectOptionVariants(), className),
         ...props,
         children: [
           /* @__PURE__ */ jsx(Select$1.ItemText, { children }),
@@ -1647,7 +1651,7 @@ var SelectGroupLabel = React11.forwardRef(({ className, children, ...props }, re
     Select$1.GroupLabel,
     {
       ref,
-      className: cnBase(
+      className: cn(
         "px-12 py-6 typography-body-sm-sm font-medium text-text-muted uppercase tracking-wide",
         className
       ),
@@ -1744,7 +1748,7 @@ var TooltipPopup = React11.forwardRef(
       {
         ref,
         role: "tooltip",
-        className: cnBase(tooltipPopupVariants({ variant }), className),
+        className: cn(tooltipPopupVariants({ variant }), className),
         ...props
       }
     );
@@ -1757,7 +1761,7 @@ var TooltipArrow = React11.forwardRef(
       Tooltip$1.Arrow,
       {
         ref,
-        className: cnBase(tooltipArrowVariants(), className),
+        className: cn(tooltipArrowVariants(), className),
         ...props,
         children: /* @__PURE__ */ jsx(FloatingArrowSvg, { fillClassName: "fill-tooltip-bg" })
       }
@@ -2204,19 +2208,19 @@ var Navbar = React11.forwardRef(
       "nav",
       {
         ref: mergedRef,
-        className: cnBase("relative z-50 w-full bg-gray-50", className),
+        className: cn("relative z-50 w-full bg-gray-50", className),
         ...props,
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: cnBase(
+            className: cn(
               "flex w-full items-center justify-between",
               // Mobile
-              "px-spacing-component-navbar-padding-x-mobile py-spacing-component-navbar-padding-y-mobile",
+              "px-spatial-component-navbar-padding-x-mobile py-spatial-component-navbar-padding-y-mobile",
               // Tablet
-              "md:px-spacing-component-navbar-padding-x-tablet md:py-spacing-component-navbar-padding-y-tablet",
+              "md:px-spatial-component-navbar-padding-x-tablet md:py-spatial-component-navbar-padding-y-tablet",
               // Desktop
-              "xl:px-spacing-component-navbar-padding-x-desktop xl:py-spacing-component-navbar-padding-y-desktop"
+              "xl:px-spatial-component-navbar-padding-x-desktop xl:py-spatial-component-navbar-padding-y-desktop"
             ),
             children
           }
@@ -2229,7 +2233,7 @@ Navbar.displayName = "Navbar";
 var NavbarBrand = React11.forwardRef(
   ({ className, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "div";
-    return /* @__PURE__ */ jsx(Comp, { ref, className: cnBase("shrink-0", className), ...props });
+    return /* @__PURE__ */ jsx(Comp, { ref, className: cn("shrink-0", className), ...props });
   }
 );
 NavbarBrand.displayName = "NavbarBrand";
@@ -2239,8 +2243,8 @@ var NavbarLinks = React11.forwardRef(
       "div",
       {
         ref,
-        className: cnBase(
-          "hidden items-center gap-spacing-component-navbar-gap-links md:flex",
+        className: cn(
+          "hidden items-center gap-spatial-component-navbar-gap-links md:flex",
           className
         ),
         ...props
@@ -2256,7 +2260,7 @@ var NavbarLink = React11.forwardRef(
       Comp,
       {
         ref,
-        className: cnBase(
+        className: cn(
           "typography-body-small font-medium text-gray-900 transition-colors hover:text-gray-700",
           active && "text-gray-1100",
           className
@@ -2273,8 +2277,8 @@ var NavbarActions = React11.forwardRef(
       "div",
       {
         ref,
-        className: cnBase(
-          "flex items-center gap-spacing-component-navbar-gap-actions",
+        className: cn(
+          "flex items-center gap-spatial-component-navbar-gap-actions",
           className
         ),
         ...props
@@ -2289,7 +2293,7 @@ var NavbarMobileMenu = React11.forwardRef(({ className, children, ...props }, re
     Dialog.Popup,
     {
       ref,
-      className: cnBase(
+      className: cn(
         "fixed inset-0 z-50 bg-gray-50 md:hidden",
         // Position below navbar
         "pt-[calc(var(--navbar-height,60px)+1px)]",
@@ -2303,12 +2307,12 @@ var NavbarMobileMenu = React11.forwardRef(({ className, children, ...props }, re
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: cnBase(
+            className: cn(
               "flex flex-col",
               // Padding matching navbar
-              "px-spacing-component-navbar-padding-x-mobile py-spacing-component-navbar-padding-y-tablet",
+              "px-spatial-component-navbar-padding-x-mobile py-spatial-component-navbar-padding-y-tablet",
               // Gap between links
-              "gap-spacing-component-navbar-gap-mobile-menu"
+              "gap-spatial-component-navbar-gap-mobile-menu"
             ),
             children
           }
@@ -2347,7 +2351,7 @@ var NavbarMobileMenuButton = React11.forwardRef(({ className, asChild = false, c
       "aria-expanded": isMobileMenuOpen,
       "aria-controls": "navbar-mobile-menu",
       onClick: handleClick,
-      className: cnBase("transition-colors", className),
+      className: cn("transition-colors", className),
       ...props,
       children
     }
@@ -2365,9 +2369,9 @@ var NavbarMobileMenuLink = React11.forwardRef(({ className, asChild = false, act
     Comp,
     {
       ref,
-      className: cnBase(
+      className: cn(
         "typography-body-medium font-medium text-gray-900 transition-colors hover:text-gray-700",
-        "py-spacing-component-navbar-padding-y-mobile",
+        "py-spatial-component-navbar-padding-y-mobile",
         active && "text-gray-1100",
         className
       ),
@@ -2499,7 +2503,7 @@ var Banner = React11.forwardRef(
         children: /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cnBase(
+            className: cn(
               // Uses primitive spacing tokens
               "flex flex-col md:flex-row gap-20 items-start md:items-center md:justify-between",
               colorScheme === "dark" && "border-t border-gray-700 py-36"
@@ -2509,7 +2513,7 @@ var Banner = React11.forwardRef(
                 /* @__PURE__ */ jsx(
                   "h2",
                   {
-                    className: cnBase(
+                    className: cn(
                       "typography-subheading-small",
                       colorScheme === "dark" ? "text-gray-100" : "text-gray-900"
                     ),
@@ -2519,7 +2523,7 @@ var Banner = React11.forwardRef(
                 /* @__PURE__ */ jsx(
                   "p",
                   {
-                    className: cnBase(
+                    className: cn(
                       "typography-body-small",
                       colorScheme === "dark" ? "text-gray-500" : "text-gray-800"
                     ),
@@ -2567,7 +2571,7 @@ var CardGrid = React11.forwardRef(
           /* @__PURE__ */ jsx(
             "h2",
             {
-              className: cnBase(
+              className: cn(
                 "col-full",
                 "typography-h4 text-gray-900",
                 // Gap after title: mobile default, md: 56px, lg: 64px
@@ -2579,7 +2583,7 @@ var CardGrid = React11.forwardRef(
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: cnBase(
+              className: cn(
                 "col-full",
                 // Mobile: single column
                 "grid grid-cols-1 gap-20",
@@ -2646,7 +2650,7 @@ var TwoColumnSection = React11.forwardRef(
         children: /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cnBase(
+            className: cn(
               "border-t pt-36",
               colorScheme === "dark" ? "border-gray-700" : "border-gray-300",
               // Grid layout - uses primitive spacing tokens
@@ -2657,7 +2661,7 @@ var TwoColumnSection = React11.forwardRef(
               /* @__PURE__ */ jsx(
                 "h2",
                 {
-                  className: cnBase(
+                  className: cn(
                     "typography-subheading-medium",
                     colorScheme === "dark" ? "text-gray-100" : "text-gray-900",
                     // Column span based on layout
@@ -2669,7 +2673,7 @@ var TwoColumnSection = React11.forwardRef(
               /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: cnBase(
+                  className: cn(
                     "flex flex-col gap-56",
                     layout !== "equal" && "lg:col-span-15"
                   ),
@@ -2677,7 +2681,7 @@ var TwoColumnSection = React11.forwardRef(
                     lead && /* @__PURE__ */ jsx(
                       "div",
                       {
-                        className: cnBase(
+                        className: cn(
                           "typography-body-large",
                           colorScheme === "dark" ? "text-gray-100" : "text-gray-900"
                         ),
@@ -2687,7 +2691,7 @@ var TwoColumnSection = React11.forwardRef(
                     /* @__PURE__ */ jsx(
                       "div",
                       {
-                        className: cnBase(
+                        className: cn(
                           "typography-body-medium flex flex-col gap-[1em]",
                           colorScheme === "dark" ? "text-gray-400" : "text-gray-600"
                         ),
@@ -2721,7 +2725,7 @@ var FaqSection = React11.forwardRef(
         colorScheme,
         layout: layout ?? void 0,
         title,
-        className: cnBase(
+        className: cn(
           // Override title typography to be larger
           "[&_h2]:typography-h4",
           // Accordion typography overrides
@@ -2887,7 +2891,7 @@ var Prose = React11.forwardRef(
       "div",
       {
         ref,
-        className: cnBase(
+        className: cn(
           "flex w-full max-w-[700px] flex-col overflow-hidden",
           // Responsive gap between sections
           "gap-56 md:gap-72 xl:gap-96",
@@ -2908,7 +2912,7 @@ var ProseSection = React11.forwardRef(
       "section",
       {
         ref,
-        className: cnBase(
+        className: cn(
           "flex w-full flex-col",
           // Responsive gap between heading and body
           "gap-24 md:gap-40",
@@ -2916,7 +2920,7 @@ var ProseSection = React11.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx(Heading, { className: cnBase(headingClass, "text-gray-900"), children: heading }),
+          /* @__PURE__ */ jsx(Heading, { className: cn(headingClass, "text-gray-900"), children: heading }),
           /* @__PURE__ */ jsx("div", { className: "typography-body-medium flex flex-col gap-[1em] text-gray-800 break-words", children })
         ]
       }
@@ -3081,7 +3085,7 @@ var River = React11.forwardRef(
     const contentColumn = /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cnBase(
+        className: cn(
           "flex flex-col",
           // Full width on mobile/tablet, 9 cols on desktop
           "lg:col-span-9"
@@ -3094,7 +3098,7 @@ var River = React11.forwardRef(
           /* @__PURE__ */ jsxs(
             "div",
             {
-              className: cnBase("flex flex-row gap-16 mt-36", "[&>*]:flex-shrink-0"),
+              className: cn("flex flex-row gap-16 mt-36", "[&>*]:flex-shrink-0"),
               children: [
                 primaryAction,
                 secondaryAction
@@ -3107,7 +3111,7 @@ var River = React11.forwardRef(
     const mediaColumn = /* @__PURE__ */ jsx(
       "div",
       {
-        className: cnBase(
+        className: cn(
           // Full width on mobile/tablet, 15 cols on desktop
           "lg:col-span-15",
           // Ensure media fills the container
@@ -3125,7 +3129,7 @@ var River = React11.forwardRef(
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: cnBase("grid grid-cols-1 gap-36", "lg:grid-cols-24 lg:gap-36"),
+            className: cn("grid grid-cols-1 gap-36", "lg:grid-cols-24 lg:gap-36"),
             children: variant === "B" ? /* @__PURE__ */ jsxs(Fragment, { children: [
               mediaColumn,
               contentColumn
@@ -3204,7 +3208,7 @@ var Tout = React11.forwardRef(
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: cnBase(
+              className: cn(
                 // Position above background
                 "relative z-10",
                 // Grid setup with responsive columns
@@ -3235,7 +3239,7 @@ var Tout = React11.forwardRef(
               children: /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: cnBase(
+                  className: cn(
                     // Flex container for content
                     "flex flex-col",
                     isCentered ? "justify-start items-center" : "justify-end",
@@ -3250,7 +3254,7 @@ var Tout = React11.forwardRef(
                     /* @__PURE__ */ jsxs(
                       "div",
                       {
-                        className: cnBase(
+                        className: cn(
                           "flex flex-col gap-16",
                           isCentered && "items-center text-center"
                         ),
@@ -3258,7 +3262,7 @@ var Tout = React11.forwardRef(
                           /* @__PURE__ */ jsx(
                             "h2",
                             {
-                              className: cnBase(
+                              className: cn(
                                 "typography-h4",
                                 isDark ? "text-gray-100" : "text-gray-900"
                               ),
@@ -3271,7 +3275,7 @@ var Tout = React11.forwardRef(
                           body && /* @__PURE__ */ jsx(
                             "p",
                             {
-                              className: cnBase(
+                              className: cn(
                                 "typography-body-small",
                                 isDark ? "text-gray-400" : "text-gray-800"
                               ),
@@ -3287,7 +3291,7 @@ var Tout = React11.forwardRef(
                     /* @__PURE__ */ jsxs(
                       "div",
                       {
-                        className: cnBase(
+                        className: cn(
                           "flex flex-row",
                           isCentered ? "justify-center" : "items-start",
                           // Responsive gap between buttons
@@ -7282,6 +7286,6 @@ function filterCSSVars(cssVars, prefix) {
   return result;
 }
 
-export { Accordion, AccordionItem, BackgroundCompound as Background, BackgroundGradient, BackgroundImage, BackgroundOverlay, BackgroundStream, BackgroundVideo, Banner, Button, Card, CardActions, CardBody, CardContent, CardDescription, CardEyebrow, CardGrid, CardImage, CardTitle, DEFAULT_TITLE_TYPOGRAPHY, DevToolbar, FONT_SIZES, FaqSection, GridOverlay, Hero, BackgroundCompound as HeroBackground, BackgroundImage as HeroBackgroundImage, BackgroundStream as HeroBackgroundStream, BackgroundVideo as HeroBackgroundVideo, HeroContent, BackgroundGradient as HeroGradient, HeroHeader, BackgroundOverlay as HeroOverlay, IconButton, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Navbar, NavbarActions, NavbarBrand, NavbarLink, NavbarLinks, NavbarMobileMenu, NavbarMobileMenuButton, NavbarMobileMenuLink, NdstudioFooter, PagerControl, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverParts, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger, Prose, ProseSection, QuoteBlock, River, Select, SelectGroup, SelectGroupLabel, SelectOption, SelectPopup, SelectRoot, SelectTrigger, ThemeProvider, Tooltip, TooltipArrow, TooltipParts, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipRoot, TooltipTrigger, Tout, TwoColumnSection, USGovBanner, 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 };
+export { Accordion, AccordionItem, BackgroundCompound as Background, BackgroundGradient, BackgroundImage, BackgroundOverlay, BackgroundStream, BackgroundVideo, Banner, Button, Card, CardActions, CardBody, CardContent, CardDescription, CardEyebrow, CardGrid, CardImage, CardTitle, DEFAULT_TITLE_TYPOGRAPHY, DevToolbar, FONT_SIZES, FaqSection, GridOverlay, Hero, BackgroundCompound as HeroBackground, BackgroundImage as HeroBackgroundImage, BackgroundStream as HeroBackgroundStream, BackgroundVideo as HeroBackgroundVideo, HeroContent, BackgroundGradient as HeroGradient, HeroHeader, BackgroundOverlay as HeroOverlay, IconButton, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Navbar, NavbarActions, NavbarBrand, NavbarLink, NavbarLinks, NavbarMobileMenu, NavbarMobileMenuButton, NavbarMobileMenuLink, NdstudioFooter, PagerControl, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverParts, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger, Prose, ProseSection, QuoteBlock, River, Select, SelectGroup, SelectGroupLabel, SelectOption, SelectPopup, SelectRoot, SelectTrigger, ThemeProvider, Tooltip, TooltipArrow, TooltipParts, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipRoot, TooltipTrigger, Tout, TwoColumnSection, USGovBanner, applyTheme, backgroundGradientVariants, backgroundImageVariants, backgroundOverlayVariants, backgroundStreamVariants, backgroundVariants, backgroundVideoVariants, bannerVariants, buttonThemeToStyleVars, buttonVariants, cardGridVariants, cardVariants, cn, 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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map