Normalize organisms, PaymentStep feedback, cross-page spacing fix

- Organism normalize pass: fix FuneralFinderV3 transition timing
  (200ms → 150ms ease-in-out), add autodocs tag to V3 stories
- Navigation: fix logo a11y — div with role="link" → proper <a> tag
- ToggleButtonGroup: add align (start/center) and direction (row/column)
  props, bump description text from text.secondary to text.primary
- PaymentStep: divider under subheading, lock icon alignment, centre-
  aligned payment options, vertical payment method stack, checkbox align
- SummaryStep: save button → text variant (matches other pages), centred
- All wizard pages: heading mb: 1 → mb: 2 for better breathing room
- Style Dictionary: auto-generate tokens.d.ts, fix TS unused imports
- tokens.d.ts: generated type declarations for 398 token exports

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/atoms/ToggleButtonGroup/ToggleButtonGroup.tsx

@@ -42,6 +42,10 @@ export interface ToggleButtonGroupProps extends Omit<
   error?: boolean;
   /** Whether a selection is required */
   required?: boolean;
+  /** Text alignment inside each option button */
+  align?: 'start' | 'center';
+  /** Layout direction for the button group */
+  direction?: 'row' | 'column';
   /** MUI sx prop for the root FormControl */
   sx?: SxProps<Theme>;
 }
@@ -84,6 +88,8 @@ export const ToggleButtonGroup = React.forwardRef<HTMLFieldSetElement, ToggleBut
       helperText,
       error = false,
       required = false,
+      align = 'start',
+      direction = 'row',
       fullWidth,
       size = 'large',
       sx,
@@ -132,6 +138,7 @@ export const ToggleButtonGroup = React.forwardRef<HTMLFieldSetElement, ToggleBut
           aria-label={label}
           sx={{
             gap: 2,
+            ...(direction === 'column' && { flexDirection: 'column' }),
             // Remove MUI's connected-button styling (grouped borders)
             '& .MuiToggleButtonGroup-grouped': {
               border: '2px solid',
@@ -141,6 +148,7 @@ export const ToggleButtonGroup = React.forwardRef<HTMLFieldSetElement, ToggleBut
                 borderLeft: '2px solid',
                 borderColor: 'var(--fa-color-neutral-200)',
                 marginLeft: 0,
+                ...(direction === 'column' && { marginTop: 0 }),
               },
               '&.Mui-selected': {
                 borderColor: 'primary.main',
@@ -155,10 +163,10 @@ export const ToggleButtonGroup = React.forwardRef<HTMLFieldSetElement, ToggleBut
               value={option.value}
               disabled={option.disabled}
               sx={{
-                flex: 1,
+                flex: direction === 'row' ? 1 : undefined,
                 textTransform: 'none',
                 flexDirection: 'column',
-                alignItems: 'flex-start',
+                alignItems: align === 'center' ? 'center' : 'flex-start',
                 justifyContent: 'flex-start',
                 gap: 0.5,
                 py: option.description ? 2 : 1.5,
@@ -213,7 +221,7 @@ export const ToggleButtonGroup = React.forwardRef<HTMLFieldSetElement, ToggleBut
               {option.description && (
                 <Typography
                   variant="body2"
-                  color="text.secondary"
+                  color="text.primary"
                   component="span"
                   sx={{ fontWeight: 400, lineHeight: 1.4 }}
                 >

src/components/molecules/FilterPanel/FilterPanel.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { FilterPanel } from './FilterPanel';
 import Box from '@mui/material/Box';

src/components/molecules/ServiceOption/ServiceOption.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { ServiceOption } from './ServiceOption';
 import Box from '@mui/material/Box';

src/components/organisms/FuneralFinder/FuneralFinderV3.stories.tsx

@@ -5,6 +5,7 @@ import { FuneralFinderV3 } from './FuneralFinderV3';
 const meta: Meta<typeof FuneralFinderV3> = {
   title: 'Organisms/FuneralFinder',
   component: FuneralFinderV3,
+  tags: ['autodocs'],
   parameters: {
     layout: 'padded',
   },

src/components/organisms/FuneralFinder/FuneralFinderV3.tsx

@@ -125,7 +125,8 @@ const StatusCard = React.forwardRef<
       cursor: 'pointer',
       fontFamily: 'inherit',
       textAlign: 'center',
-      transition: 'border-color 200ms ease, background-color 200ms ease, transform 100ms ease',
+      transition:
+        'border-color 150ms ease-in-out, background-color 150ms ease-in-out, transform 150ms ease-in-out',
       '&:hover': {
         borderColor: selected
           ? 'var(--fa-color-border-brand, #BA834E)'

src/components/organisms/Navigation/Navigation.tsx

@@ -116,13 +116,23 @@ export const Navigation = React.forwardRef<HTMLDivElement, NavigationProps>(
               )}
 
               <Box
-                onClick={onLogoClick}
+                component={onLogoClick ? 'a' : 'div'}
+                href={onLogoClick ? '#' : undefined}
+                onClick={
+                  onLogoClick
+                    ? (e: React.MouseEvent) => {
+                        e.preventDefault();
+                        onLogoClick();
+                      }
+                    : undefined
+                }
                 sx={{
                   display: 'flex',
                   alignItems: 'center',
                   cursor: onLogoClick ? 'pointer' : 'default',
+                  textDecoration: 'none',
+                  color: 'inherit',
                 }}
-                role={onLogoClick ? 'link' : undefined}
                 aria-label={onLogoClick ? 'Home' : undefined}
               >
                 {logo}

src/components/pages/CemeteryStep/CemeteryStep.tsx

@@ -130,7 +130,7 @@ export const CemeteryStep: React.FC<CemeteryStepProps> = ({
       sx={sx}
     >
       {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
         Cemetery
       </Typography>
 

src/components/pages/CoffinsStep/CoffinsStep.tsx

@@ -419,7 +419,7 @@ export const CoffinsStep: React.FC<CoffinsStepProps> = ({
       {/* ─── Sidebar (left panel) ─── */}
 
       {/* Heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
         Choose a coffin
       </Typography>
 

src/components/pages/CrematoriumStep/CrematoriumStep.tsx

@@ -124,7 +124,7 @@ export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
       sx={sx}
     >
       {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
         Crematorium
       </Typography>
 

src/components/pages/DateTimeStep/DateTimeStep.tsx

@@ -161,7 +161,7 @@ export const DateTimeStep: React.FC<DateTimeStepProps> = ({
       sx={sx}
     >
       {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
         A few important details
       </Typography>
 

src/components/pages/ExtrasStep/ExtrasStep.tsx

@@ -145,7 +145,7 @@ export const ExtrasStep: React.FC<ExtrasStepProps> = ({
       sx={sx}
     >
       {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
         Optional extras
       </Typography>
 

src/components/pages/IncludedServicesStep/IncludedServicesStep.tsx

@@ -109,7 +109,7 @@ export const IncludedServicesStep: React.FC<IncludedServicesStepProps> = ({
       sx={sx}
     >
       {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
         Included services
       </Typography>
 

src/components/pages/IntroStep/IntroStep.tsx

@@ -99,7 +99,7 @@ export const IntroStep: React.FC<IntroStepProps> = ({
   return (
     <WizardLayout variant="centered-form" navigation={navigation} hideHelpBar={hideHelpBar} sx={sx}>
       {/* Page heading — receives focus on entry for screen readers */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
         Let&apos;s get started
       </Typography>
 

src/components/pages/PaymentStep/PaymentStep.tsx

@@ -125,17 +125,19 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({
       sx={sx}
     >
       {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
         Payment
       </Typography>
 
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 5 }}>
+      <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1, mb: 2 }}>
-        <LockOutlinedIcon sx={{ fontSize: 16, color: 'text.secondary' }} />
+        <LockOutlinedIcon sx={{ fontSize: 16, color: 'text.secondary', mt: '3px' }} />
         <Typography variant="body2" color="text.secondary">
           Your payment is processed securely. You won&apos;t be charged more than the total shown.
         </Typography>
       </Box>
 
+      <Divider sx={{ mb: 4 }} />
+
       {/* ─── Amount display ─── */}
       <Paper
         elevation={2}
@@ -188,6 +190,7 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({
             onChange={(v) => onChange({ ...values, paymentPlan: v as PaymentPlan })}
             error={!!errors?.paymentPlan}
             helperText={errors?.paymentPlan}
+            align="center"
             required
             fullWidth
           />
@@ -205,6 +208,7 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({
             onChange={(v) => onChange({ ...values, paymentMethod: v as PaymentMethod })}
             error={!!errors?.paymentMethod}
             helperText={errors?.paymentMethod}
+            direction="column"
             required
             fullWidth
           />
@@ -297,7 +301,7 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({
               </Link>
             </Typography>
           }
-          sx={{ mb: 1, alignItems: 'flex-start', '& .MuiCheckbox-root': { pt: 0.5 } }}
+          sx={{ mb: 1, alignItems: 'center' }}
         />
         {errors?.termsAccepted && (
           <Typography

src/components/pages/SummaryStep/SummaryStep.tsx

@@ -304,7 +304,7 @@ export const SummaryStep: React.FC<SummaryStepProps> = ({
       sx={sx}
     >
       {/* Header */}
-      <Typography variant="display3" component="h1" tabIndex={-1} sx={{ mb: 1 }}>
+      <Typography variant="display3" component="h1" tabIndex={-1} sx={{ mb: 2 }}>
         Review your plan
       </Typography>
 
@@ -709,16 +709,11 @@ export const SummaryStep: React.FC<SummaryStepProps> = ({
       </Button>
 
       {onSaveAndExit && (
-        <Button
+        <Box sx={{ display: 'flex', justifyContent: 'center', mt: 1.5 }}>
-          variant="outlined"
+          <Button variant="text" color="secondary" onClick={onSaveAndExit} type="button">
-          color="secondary"
+            Save and continue later
-          size="large"
+          </Button>
-          fullWidth
+        </Box>
-          onClick={onSaveAndExit}
-          sx={{ mt: 1.5 }}
-        >
-          Save and continue later
-        </Button>
       )}
 
       {/* Share dialog */}

src/components/pages/VenueServicesStep/VenueServicesStep.tsx

@@ -129,7 +129,7 @@ export const VenueServicesStep: React.FC<VenueServicesStepProps> = ({
       sx={sx}
     >
       {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
         Funeral Service
       </Typography>
 

src/theme/generated/tokens.d.ts

@@ -0,0 +1,401 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const BadgeHeightSm: string;
+export declare const BadgeHeightMd: string;
+export declare const BadgeHeightLg: string;
+export declare const BadgePaddingXSm: string;
+export declare const BadgePaddingXMd: string;
+export declare const BadgePaddingXLg: string;
+export declare const BadgeFontSizeSm: string;
+export declare const BadgeFontSizeMd: string;
+export declare const BadgeFontSizeLg: string;
+export declare const BadgeIconSizeSm: string;
+export declare const BadgeIconSizeMd: string;
+export declare const BadgeIconSizeLg: string;
+export declare const BadgeIconGapDefault: string;
+export declare const BadgeBorderRadiusDefault: string;
+export declare const ButtonHeightXs: string;
+export declare const ButtonHeightSm: string;
+export declare const ButtonHeightMd: string;
+export declare const ButtonHeightLg: string;
+export declare const ButtonPaddingXXs: string;
+export declare const ButtonPaddingXSm: string;
+export declare const ButtonPaddingXMd: string;
+export declare const ButtonPaddingXLg: string;
+export declare const ButtonPaddingYXs: string;
+export declare const ButtonPaddingYSm: string;
+export declare const ButtonPaddingYMd: string;
+export declare const ButtonPaddingYLg: string;
+export declare const ButtonFontSizeXs: string;
+export declare const ButtonFontSizeSm: string;
+export declare const ButtonFontSizeMd: string;
+export declare const ButtonFontSizeLg: string;
+export declare const ButtonIconSizeXs: string;
+export declare const ButtonIconSizeSm: string;
+export declare const ButtonIconSizeMd: string;
+export declare const ButtonIconSizeLg: string;
+export declare const ButtonIconGapXs: string;
+export declare const ButtonIconGapSm: string;
+export declare const ButtonIconGapMd: string;
+export declare const ButtonIconGapLg: string;
+export declare const ButtonBorderRadiusDefault: string;
+export declare const CardBorderRadiusDefault: string;
+export declare const CardPaddingDefault: string;
+export declare const CardPaddingCompact: string;
+export declare const CardShadowDefault: string;
+export declare const CardShadowHover: string;
+export declare const CardBorderDefault: string;
+export declare const CardBorderSelected: string;
+export declare const CardBackgroundDefault: string;
+export declare const CardBackgroundHover: string;
+export declare const CardBackgroundSelected: string;
+export declare const ChipHeightSm: string;
+export declare const ChipHeightMd: string;
+export declare const ChipPaddingXSm: string;
+export declare const ChipPaddingXMd: string;
+export declare const ChipFontSizeSm: string;
+export declare const ChipFontSizeMd: string;
+export declare const ChipIconSizeSm: string;
+export declare const ChipIconSizeMd: string;
+export declare const ChipDeleteIconSizeSm: string;
+export declare const ChipDeleteIconSizeMd: string;
+export declare const ChipIconGapDefault: string;
+export declare const ChipBorderRadiusDefault: string;
+export declare const InputHeightSm: string;
+export declare const InputHeightMd: string;
+export declare const InputPaddingXDefault: string;
+export declare const InputPaddingYSm: string;
+export declare const InputPaddingYMd: string;
+export declare const InputFontSizeDefault: string;
+export declare const InputBorderRadiusDefault: string;
+export declare const InputGapDefault: string;
+export declare const InputIconSizeDefault: string;
+export declare const ProviderCardImageHeight: string;
+export declare const ProviderCardLogoSize: string;
+export declare const ProviderCardLogoBorderRadius: string;
+export declare const ProviderCardContentPadding: string;
+export declare const ProviderCardContentGap: string;
+export declare const RadioSizeDefault: string;
+export declare const RadioDotSizeDefault: string;
+export declare const SwitchTrackWidth: string;
+export declare const SwitchTrackHeight: string;
+export declare const SwitchTrackBorderRadius: string;
+export declare const SwitchThumbSize: string;
+export declare const VenueCardImageHeight: string;
+export declare const VenueCardContentPadding: string;
+export declare const VenueCardContentGap: string;
+export declare const ColorBrand50: string;
+export declare const ColorBrand100: string;
+export declare const ColorBrand200: string;
+export declare const ColorBrand300: string;
+export declare const ColorBrand400: string;
+export declare const ColorBrand500: string;
+export declare const ColorBrand600: string;
+export declare const ColorBrand700: string;
+export declare const ColorBrand800: string;
+export declare const ColorBrand900: string;
+export declare const ColorBrand950: string;
+export declare const ColorSage50: string;
+export declare const ColorSage100: string;
+export declare const ColorSage200: string;
+export declare const ColorSage300: string;
+export declare const ColorSage400: string;
+export declare const ColorSage500: string;
+export declare const ColorSage600: string;
+export declare const ColorSage700: string;
+export declare const ColorSage800: string;
+export declare const ColorSage900: string;
+export declare const ColorSage950: string;
+export declare const ColorNeutral50: string;
+export declare const ColorNeutral100: string;
+export declare const ColorNeutral200: string;
+export declare const ColorNeutral300: string;
+export declare const ColorNeutral400: string;
+export declare const ColorNeutral500: string;
+export declare const ColorNeutral600: string;
+export declare const ColorNeutral700: string;
+export declare const ColorNeutral800: string;
+export declare const ColorNeutral900: string;
+export declare const ColorNeutral950: string;
+export declare const ColorRed50: string;
+export declare const ColorRed100: string;
+export declare const ColorRed200: string;
+export declare const ColorRed300: string;
+export declare const ColorRed400: string;
+export declare const ColorRed500: string;
+export declare const ColorRed600: string;
+export declare const ColorRed700: string;
+export declare const ColorRed800: string;
+export declare const ColorRed900: string;
+export declare const ColorRed950: string;
+export declare const ColorAmber50: string;
+export declare const ColorAmber100: string;
+export declare const ColorAmber200: string;
+export declare const ColorAmber300: string;
+export declare const ColorAmber400: string;
+export declare const ColorAmber500: string;
+export declare const ColorAmber600: string;
+export declare const ColorAmber700: string;
+export declare const ColorAmber800: string;
+export declare const ColorAmber900: string;
+export declare const ColorAmber950: string;
+export declare const ColorGreen50: string;
+export declare const ColorGreen100: string;
+export declare const ColorGreen200: string;
+export declare const ColorGreen300: string;
+export declare const ColorGreen400: string;
+export declare const ColorGreen500: string;
+export declare const ColorGreen600: string;
+export declare const ColorGreen700: string;
+export declare const ColorGreen800: string;
+export declare const ColorGreen900: string;
+export declare const ColorGreen950: string;
+export declare const ColorBlue50: string;
+export declare const ColorBlue100: string;
+export declare const ColorBlue200: string;
+export declare const ColorBlue300: string;
+export declare const ColorBlue400: string;
+export declare const ColorBlue500: string;
+export declare const ColorBlue600: string;
+export declare const ColorBlue700: string;
+export declare const ColorBlue800: string;
+export declare const ColorBlue900: string;
+export declare const ColorBlue950: string;
+export declare const ColorWhite: string;
+export declare const ColorBlack: string;
+export declare const ColorTextPrimary: string;
+export declare const ColorTextSecondary: string;
+export declare const ColorTextTertiary: string;
+export declare const ColorTextDisabled: string;
+export declare const ColorTextInverse: string;
+export declare const ColorTextBrand: string;
+export declare const ColorTextError: string;
+export declare const ColorTextSuccess: string;
+export declare const ColorTextWarning: string;
+export declare const ColorSurfaceDefault: string;
+export declare const ColorSurfaceSubtle: string;
+export declare const ColorSurfaceRaised: string;
+export declare const ColorSurfaceWarm: string;
+export declare const ColorSurfaceCool: string;
+export declare const ColorSurfaceOverlay: string;
+export declare const ColorBorderDefault: string;
+export declare const ColorBorderStrong: string;
+export declare const ColorBorderSubtle: string;
+export declare const ColorBorderBrand: string;
+export declare const ColorBorderError: string;
+export declare const ColorBorderSuccess: string;
+export declare const ColorInteractiveDefault: string;
+export declare const ColorInteractiveHover: string;
+export declare const ColorInteractiveActive: string;
+export declare const ColorInteractiveDisabled: string;
+export declare const ColorInteractiveFocus: string;
+export declare const ColorInteractiveSecondary: string;
+export declare const ColorInteractiveSecondaryHover: string;
+export declare const ColorFeedbackSuccess: string;
+export declare const ColorFeedbackSuccessSubtle: string;
+export declare const ColorFeedbackWarning: string;
+export declare const ColorFeedbackWarningSubtle: string;
+export declare const ColorFeedbackError: string;
+export declare const ColorFeedbackErrorSubtle: string;
+export declare const ColorFeedbackInfo: string;
+export declare const ColorFeedbackInfoSubtle: string;
+export declare const ShadowSm: string;
+export declare const ShadowMd: string;
+export declare const ShadowLg: string;
+export declare const ShadowXl: string;
+export declare const OpacityDisabled: number;
+export declare const OpacityHover: number;
+export declare const OpacityOverlay: number;
+export declare const Spacing1: string;
+export declare const Spacing2: string;
+export declare const Spacing3: string;
+export declare const Spacing4: string;
+export declare const Spacing5: string;
+export declare const Spacing6: string;
+export declare const Spacing8: string;
+export declare const Spacing10: string;
+export declare const Spacing12: string;
+export declare const Spacing16: string;
+export declare const Spacing20: string;
+export declare const Spacing05: string;
+export declare const SpacingComponentXs: string;
+export declare const SpacingComponentSm: string;
+export declare const SpacingComponentMd: string;
+export declare const SpacingComponentLg: string;
+export declare const SpacingLayoutGutter: string;
+export declare const SpacingLayoutGutterDesktop: string;
+export declare const SpacingLayoutSection: string;
+export declare const SpacingLayoutPage: string;
+export declare const SpacingLayoutPagePadding: string;
+export declare const SpacingLayoutPagePaddingDesktop: string;
+export declare const BorderRadiusNone: string;
+export declare const BorderRadiusSm: string;
+export declare const BorderRadiusMd: string;
+export declare const BorderRadiusLg: string;
+export declare const BorderRadiusXl: string;
+export declare const BorderRadiusFull: string;
+export declare const FontFamilyBody: string;
+export declare const FontFamilyDisplay: string;
+export declare const FontFamilyMono: string;
+export declare const FontSize2xs: string;
+export declare const FontSizeXs: string;
+export declare const FontSizeSm: string;
+export declare const FontSizeBase: string;
+export declare const FontSizeMd: string;
+export declare const FontSizeLg: string;
+export declare const FontSizeXl: string;
+export declare const FontSize2xl: string;
+export declare const FontSize3xl: string;
+export declare const FontSize4xl: string;
+export declare const FontSizeDisplay1: string;
+export declare const FontSizeDisplay2: string;
+export declare const FontSizeDisplay3: string;
+export declare const FontSizeDisplaySm: string;
+export declare const FontSizeDisplayHero: string;
+export declare const FontSizeMobileDisplayHero: string;
+export declare const FontSizeMobileDisplay1: string;
+export declare const FontSizeMobileDisplay2: string;
+export declare const FontSizeMobileDisplay3: string;
+export declare const FontSizeMobileDisplaySm: string;
+export declare const FontSizeMobileH1: string;
+export declare const FontSizeMobileH2: string;
+export declare const FontSizeMobileH3: string;
+export declare const FontSizeMobileH4: string;
+export declare const FontSizeMobileH5: string;
+export declare const FontSizeMobileH6: string;
+export declare const FontWeightRegular: number;
+export declare const FontWeightMedium: number;
+export declare const FontWeightSemibold: number;
+export declare const FontWeightBold: number;
+export declare const LineHeightTight: number;
+export declare const LineHeightSnug: number;
+export declare const LineHeightNormal: number;
+export declare const LineHeightRelaxed: number;
+export declare const LetterSpacingTighter: string;
+export declare const LetterSpacingTight: string;
+export declare const LetterSpacingNormal: string;
+export declare const LetterSpacingWide: string;
+export declare const LetterSpacingWider: string;
+export declare const LetterSpacingWidest: string;
+export declare const TypographyDisplayHeroFontFamily: string;
+export declare const TypographyDisplayHeroFontSize: string;
+export declare const TypographyDisplayHeroFontSizeMobile: string;
+export declare const TypographyDisplayHeroFontWeight: number;
+export declare const TypographyDisplayHeroLineHeight: number;
+export declare const TypographyDisplayHeroLetterSpacing: string;
+export declare const TypographyDisplay1FontFamily: string;
+export declare const TypographyDisplay1FontSize: string;
+export declare const TypographyDisplay1FontSizeMobile: string;
+export declare const TypographyDisplay1FontWeight: number;
+export declare const TypographyDisplay1LineHeight: number;
+export declare const TypographyDisplay1LetterSpacing: string;
+export declare const TypographyDisplay2FontFamily: string;
+export declare const TypographyDisplay2FontSize: string;
+export declare const TypographyDisplay2FontSizeMobile: string;
+export declare const TypographyDisplay2FontWeight: number;
+export declare const TypographyDisplay2LineHeight: number;
+export declare const TypographyDisplay2LetterSpacing: string;
+export declare const TypographyDisplay3FontFamily: string;
+export declare const TypographyDisplay3FontSize: string;
+export declare const TypographyDisplay3FontSizeMobile: string;
+export declare const TypographyDisplay3FontWeight: number;
+export declare const TypographyDisplay3LineHeight: number;
+export declare const TypographyDisplay3LetterSpacing: string;
+export declare const TypographyDisplaySmFontFamily: string;
+export declare const TypographyDisplaySmFontSize: string;
+export declare const TypographyDisplaySmFontSizeMobile: string;
+export declare const TypographyDisplaySmFontWeight: number;
+export declare const TypographyDisplaySmLineHeight: number;
+export declare const TypographyDisplaySmLetterSpacing: string;
+export declare const TypographyH1FontFamily: string;
+export declare const TypographyH1FontSize: string;
+export declare const TypographyH1FontSizeMobile: string;
+export declare const TypographyH1FontWeight: number;
+export declare const TypographyH1LineHeight: number;
+export declare const TypographyH1LetterSpacing: string;
+export declare const TypographyH2FontFamily: string;
+export declare const TypographyH2FontSize: string;
+export declare const TypographyH2FontSizeMobile: string;
+export declare const TypographyH2FontWeight: number;
+export declare const TypographyH2LineHeight: number;
+export declare const TypographyH2LetterSpacing: string;
+export declare const TypographyH3FontFamily: string;
+export declare const TypographyH3FontSize: string;
+export declare const TypographyH3FontSizeMobile: string;
+export declare const TypographyH3FontWeight: number;
+export declare const TypographyH3LineHeight: number;
+export declare const TypographyH3LetterSpacing: string;
+export declare const TypographyH4FontFamily: string;
+export declare const TypographyH4FontSize: string;
+export declare const TypographyH4FontSizeMobile: string;
+export declare const TypographyH4FontWeight: number;
+export declare const TypographyH4LineHeight: number;
+export declare const TypographyH4LetterSpacing: string;
+export declare const TypographyH5FontFamily: string;
+export declare const TypographyH5FontSize: string;
+export declare const TypographyH5FontSizeMobile: string;
+export declare const TypographyH5FontWeight: number;
+export declare const TypographyH5LineHeight: number;
+export declare const TypographyH5LetterSpacing: string;
+export declare const TypographyH6FontFamily: string;
+export declare const TypographyH6FontSize: string;
+export declare const TypographyH6FontSizeMobile: string;
+export declare const TypographyH6FontWeight: number;
+export declare const TypographyH6LineHeight: number;
+export declare const TypographyH6LetterSpacing: string;
+export declare const TypographyBodyLgFontFamily: string;
+export declare const TypographyBodyLgFontSize: string;
+export declare const TypographyBodyLgFontWeight: number;
+export declare const TypographyBodyLgLineHeight: number;
+export declare const TypographyBodyLgLetterSpacing: string;
+export declare const TypographyBodyFontFamily: string;
+export declare const TypographyBodyFontSize: string;
+export declare const TypographyBodyFontWeight: number;
+export declare const TypographyBodyLineHeight: number;
+export declare const TypographyBodyLetterSpacing: string;
+export declare const TypographyBodySmFontFamily: string;
+export declare const TypographyBodySmFontSize: string;
+export declare const TypographyBodySmFontWeight: number;
+export declare const TypographyBodySmLineHeight: number;
+export declare const TypographyBodySmLetterSpacing: string;
+export declare const TypographyBodyXsFontFamily: string;
+export declare const TypographyBodyXsFontSize: string;
+export declare const TypographyBodyXsFontWeight: number;
+export declare const TypographyBodyXsLineHeight: number;
+export declare const TypographyBodyXsLetterSpacing: string;
+export declare const TypographyLabelLgFontFamily: string;
+export declare const TypographyLabelLgFontSize: string;
+export declare const TypographyLabelLgFontWeight: number;
+export declare const TypographyLabelLgLineHeight: number;
+export declare const TypographyLabelLgLetterSpacing: string;
+export declare const TypographyLabelFontFamily: string;
+export declare const TypographyLabelFontSize: string;
+export declare const TypographyLabelFontWeight: number;
+export declare const TypographyLabelLineHeight: number;
+export declare const TypographyLabelLetterSpacing: string;
+export declare const TypographyLabelSmFontFamily: string;
+export declare const TypographyLabelSmFontSize: string;
+export declare const TypographyLabelSmFontWeight: number;
+export declare const TypographyLabelSmLineHeight: number;
+export declare const TypographyLabelSmLetterSpacing: string;
+export declare const TypographyCaptionFontFamily: string;
+export declare const TypographyCaptionFontSize: string;
+export declare const TypographyCaptionFontWeight: number;
+export declare const TypographyCaptionLineHeight: number;
+export declare const TypographyCaptionLetterSpacing: string;
+export declare const TypographyCaptionSmFontFamily: string;
+export declare const TypographyCaptionSmFontSize: string;
+export declare const TypographyCaptionSmFontWeight: number;
+export declare const TypographyCaptionSmLineHeight: number;
+export declare const TypographyCaptionSmLetterSpacing: string;
+export declare const TypographyOverlineFontFamily: string;
+export declare const TypographyOverlineFontSize: string;
+export declare const TypographyOverlineFontWeight: number;
+export declare const TypographyOverlineLineHeight: number;
+export declare const TypographyOverlineLetterSpacing: string;
+export declare const TypographyOverlineSmFontFamily: string;
+export declare const TypographyOverlineSmFontSize: string;
+export declare const TypographyOverlineSmFontWeight: number;
+export declare const TypographyOverlineSmLineHeight: number;
+export declare const TypographyOverlineSmLetterSpacing: string;

style-dictionary/config.js

@@ -51,3 +51,25 @@ const sd = new StyleDictionary({
 });
 
 await sd.buildAllPlatforms();
+
+// Generate TypeScript declarations for the JS token output
+import { readFileSync, writeFileSync } from 'fs';
+
+const jsPath = 'src/theme/generated/tokens.js';
+const dtsPath = 'src/theme/generated/tokens.d.ts';
+
+const jsContent = readFileSync(jsPath, 'utf-8')
+  .replace(/=\n\s+/g, '= '); // join continuation lines
+
+const declarations = ['/**', ' * Do not edit directly, this file was auto-generated.', ' */'];
+
+for (const line of jsContent.split('\n')) {
+  const m = line.match(/^export const (\w+)\s*=\s*(.+?)\s*;/);
+  if (!m) continue;
+  const [, name, val] = m;
+  const isNum = !val.startsWith('"') && !val.startsWith("'") && !isNaN(Number(val));
+  declarations.push(`export declare const ${name}: ${isNum ? 'number' : 'string'};`);
+}
+
+writeFileSync(dtsPath, declarations.join('\n') + '\n');
+console.log(`✓ Generated ${declarations.length - 3} TypeScript declarations`);