canvas-ui-sdk 0.1.2 → 0.1.4

package/README.md

@@ -56,6 +56,16 @@ This SDK uses CSS custom properties (variables) for theming. Define these in you
 
 See `styles/tokens.reference.css` for a complete list of available CSS variables.
 
+## Tailwind v4
+
+If you're using Tailwind CSS v4, add this to your CSS file so Tailwind scans the SDK's compiled JS for utility classes:
+
+```css
+@source "../../node_modules/canvas-ui-sdk/dist";
+```
+
+Without this, Tailwind won't generate the utility classes used by SDK components.
+
 ## Components
 
 ### UI Components

package/dist/index.d.ts

@@ -4611,6 +4611,10 @@ declare function setCSSVariable(name: string, value: string): void;
  * Sets multiple CSS variables and broadcasts them to all iframes
  */
 declare function setCSSVariables(variables: Record<string, string>): void;
+/**
+ * Removes CSS variables (makes them undefined so fallback chains work)
+ */
+declare function removeCSSVariables(names: string[]): void;
 /**
  * Broadcasts CSS variable changes to all iframes via postMessage
  */
@@ -4712,4 +4716,4 @@ interface ThemeDrawerProps {
 }
 declare function ThemeDrawer({ devOnly, triggerPosition, defaultOpen, panels: enabledPanels, onThemeChange, initialOverrides, storageKey, }: ThemeDrawerProps): react_jsx_runtime.JSX.Element | null;
 
-export { AccountSettingsShell, type AccountTab, ActivityFeed, Avatar, AvatarFallback, AvatarImage, BadgesCard, BlogCards, BottomInputChatWidget, type BrandAsset, Button, Calendar, CanvasItem, CategoryGrid, CenteredHero, ChatBubble, type ChatBubbleMessage, ChatDateSeparator, ChatInput, ChatMessageList, Checkbox, CheckboxWithLabel, CircularProgressBar, CircularProgressBarList, type CircularProgressBarListProps, type CircularProgressBarProps, ComponentPalette, ComponentSearch, ContentDropzone, ContentWithImage, CoreValuesGrid, CreditCardDisplay, CtaBanner, type CustomButtonStyle, CustomComponentHelper, DashboardShell, DateInput, DescriptionCard, DestinationCards, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DoubleSidebar, type DoubleSidebarSection, DoubleSidebarShell, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FaqAccordion, FaqsTable, FeatureWithImage, FeaturedNewsCards, FeaturedPlaces, FeaturesComparison, FileUploader, type FilterCheckboxGroupConfig, type FilterDateRangeConfig, type FilterDropdownConfig, type FilterOption$c as FilterOption, FilterPopover, type FilterState, FixedColumnDataTable, FlairBanner, FooterNavbar, FormGroup, GallerySection, GradientBanner, GridTilesList, Header, HeroDarkCentered, HeroDarkWithImage, HeroFullwidthImage, HeroSection, HowItWorks, type IconNavItemConfig, type IconShapeId, IconSidebar, IconSidebarShell, ImageFeedWithNestedComments, type ImageKey, ImageUploader, InfoCard, type InfoCardProps, Input, Label, LargeImageLabelsList, Sidebar as LayoutSidebar, type LineTab, LineTabs, type LinkItem, LinksCard, type LinksCardProps, Loader, LoginBrandingPanel, MenuSection, type MenufocusItem, MenufocusTemplate, type MenufocusTemplateProps, MessengerInput, MessengerSidebar, MetricsSection, MobileBottomNav, MobileMenuShell, type MobileNavTabConfig, MonthlyCalendarWidget, MultiselectCheckboxField, MultiselectTags, MultistepProgressBarShell, type MultistepProgressBarShellProps, type MultistepProgressBarStep, MultistepShell, MultistepSidebarShell, type NavItem, type NavSection, type NavTab, NestedCommentsTable, NestedDataTable, OfficeLocations, PageHeaderSection, Pagination, ParticipantList, type Persona, PersonaCard, PersonaGrid, PillTabs, type PillTabsProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortfolioCard, PreviewBrandingContext, PricingCards, PricingCta, ProfileCard, ProfileGridTilesList, ProfileImageUploader, ProgressBar, type ProjectContext, ProjectContextShell, type ProjectContextTab, PromptChipsRow, PromptTemplate, RadioGroup, RadioGroupItem, RangeInput, ReviewsGrid, ReviewsTable, type Screen, type ScreenConnection, ScreenFlowchart, ScreenPromptBuilder, ScreenPromptTemplate, type ScreenStatus, type ScreenType, ScrollArea, ScrollBar, SearchBar, SearchBarShell, SearchSidebar, Searchbox, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectablePills, Separator, SettingsListRow, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar$1 as Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarNav, SidebarProfileCard, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SkillsCard, Slider, SlideshowGridTiles, SocialFeed, SocialProof, type SortOption$b as SortOption, StandardDataTable, StandardListWithImage, StandardPageShell, StatsCard, type Step, StepTracker, Switch, type TableColumn, type TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TeamCardsGrid, TeamCircularGrid, TestimonialCarousel, TextInput, Textarea, type ThemeBranding, ThemeContext, ThemeDrawer, type ThemeImages, ThemeProvider, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography, UpvotingPostsTable, VerticalHowItWorks, VerticalMultistepShell, VerticalStepTracker, VideoChatControls, VideoContentSection, VideoPlaylistCard, VideoPlaylistItem, WebcamPreview, YouTubePlayer, accountTabs, allColorVariables, blocks, broadcastCSSVariables, buttonVariants, canvasBlocks, cn, colorVariables, defaultBranding, defaultButtonColorStyles, defaultButtonColors, defaultButtonSizes, defaultColors, defaultCustomButtonStyles, defaultDoubleSidebarSections, defaultIconNavItems, defaultImages, defaultInputSizes, defaultProgressBarSteps, defaultSteps, defaultSupportLinks, defaultTypography, defaultVerticalSteps, getChildScreens, getScreenUrl, getTopLevelScreens, groupModalDrawerBlocks, layoutPrimitives, layoutShells, marketingBlocks, pageTemplates, pricingBlocks, setCSSVariable, setCSSVariables, setupCSSVariableListener, useCSSVariableSync, useIsMobile, usePreviewBranding, useSidebar, useThemeBrandAssets, useThemeBranding, useThemeImages, videoBlocks };
+export { AccountSettingsShell, type AccountTab, ActivityFeed, Avatar, AvatarFallback, AvatarImage, BadgesCard, BlogCards, BottomInputChatWidget, type BrandAsset, Button, Calendar, CanvasItem, CategoryGrid, CenteredHero, ChatBubble, type ChatBubbleMessage, ChatDateSeparator, ChatInput, ChatMessageList, Checkbox, CheckboxWithLabel, CircularProgressBar, CircularProgressBarList, type CircularProgressBarListProps, type CircularProgressBarProps, ComponentPalette, ComponentSearch, ContentDropzone, ContentWithImage, CoreValuesGrid, CreditCardDisplay, CtaBanner, type CustomButtonStyle, CustomComponentHelper, DashboardShell, DateInput, DescriptionCard, DestinationCards, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DoubleSidebar, type DoubleSidebarSection, DoubleSidebarShell, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FaqAccordion, FaqsTable, FeatureWithImage, FeaturedNewsCards, FeaturedPlaces, FeaturesComparison, FileUploader, type FilterCheckboxGroupConfig, type FilterDateRangeConfig, type FilterDropdownConfig, type FilterOption$c as FilterOption, FilterPopover, type FilterState, FixedColumnDataTable, FlairBanner, FooterNavbar, FormGroup, GallerySection, GradientBanner, GridTilesList, Header, HeroDarkCentered, HeroDarkWithImage, HeroFullwidthImage, HeroSection, HowItWorks, type IconNavItemConfig, type IconShapeId, IconSidebar, IconSidebarShell, ImageFeedWithNestedComments, type ImageKey, ImageUploader, InfoCard, type InfoCardProps, Input, Label, LargeImageLabelsList, Sidebar as LayoutSidebar, type LineTab, LineTabs, type LinkItem, LinksCard, type LinksCardProps, Loader, LoginBrandingPanel, MenuSection, type MenufocusItem, MenufocusTemplate, type MenufocusTemplateProps, MessengerInput, MessengerSidebar, MetricsSection, MobileBottomNav, MobileMenuShell, type MobileNavTabConfig, MonthlyCalendarWidget, MultiselectCheckboxField, MultiselectTags, MultistepProgressBarShell, type MultistepProgressBarShellProps, type MultistepProgressBarStep, MultistepShell, MultistepSidebarShell, type NavItem, type NavSection, type NavTab, NestedCommentsTable, NestedDataTable, OfficeLocations, PageHeaderSection, Pagination, ParticipantList, type Persona, PersonaCard, PersonaGrid, PillTabs, type PillTabsProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortfolioCard, PreviewBrandingContext, PricingCards, PricingCta, ProfileCard, ProfileGridTilesList, ProfileImageUploader, ProgressBar, type ProjectContext, ProjectContextShell, type ProjectContextTab, PromptChipsRow, PromptTemplate, RadioGroup, RadioGroupItem, RangeInput, ReviewsGrid, ReviewsTable, type Screen, type ScreenConnection, ScreenFlowchart, ScreenPromptBuilder, ScreenPromptTemplate, type ScreenStatus, type ScreenType, ScrollArea, ScrollBar, SearchBar, SearchBarShell, SearchSidebar, Searchbox, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectablePills, Separator, SettingsListRow, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar$1 as Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarNav, SidebarProfileCard, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SkillsCard, Slider, SlideshowGridTiles, SocialFeed, SocialProof, type SortOption$b as SortOption, StandardDataTable, StandardListWithImage, StandardPageShell, StatsCard, type Step, StepTracker, Switch, type TableColumn, type TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TeamCardsGrid, TeamCircularGrid, TestimonialCarousel, TextInput, Textarea, type ThemeBranding, ThemeContext, ThemeDrawer, type ThemeImages, ThemeProvider, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography, UpvotingPostsTable, VerticalHowItWorks, VerticalMultistepShell, VerticalStepTracker, VideoChatControls, VideoContentSection, VideoPlaylistCard, VideoPlaylistItem, WebcamPreview, YouTubePlayer, accountTabs, allColorVariables, blocks, broadcastCSSVariables, buttonVariants, canvasBlocks, cn, colorVariables, defaultBranding, defaultButtonColorStyles, defaultButtonColors, defaultButtonSizes, defaultColors, defaultCustomButtonStyles, defaultDoubleSidebarSections, defaultIconNavItems, defaultImages, defaultInputSizes, defaultProgressBarSteps, defaultSteps, defaultSupportLinks, defaultTypography, defaultVerticalSteps, getChildScreens, getScreenUrl, getTopLevelScreens, groupModalDrawerBlocks, layoutPrimitives, layoutShells, marketingBlocks, pageTemplates, pricingBlocks, removeCSSVariables, setCSSVariable, setCSSVariables, setupCSSVariableListener, useCSSVariableSync, useIsMobile, usePreviewBranding, useSidebar, useThemeBrandAssets, useThemeBranding, useThemeImages, videoBlocks };

package/dist/index.mjs

@@ -3192,7 +3192,6 @@ var defaultTypography = {
   // Global Font
   "--typo-global-font": "Inter",
   // H1 - Hero headlines
-  "--typo-h1-font": "",
   "--typo-h1-size": "72px",
   "--typo-h1-size-mobile": "48px",
   "--typo-h1-weight": "700",
@@ -3201,7 +3200,6 @@ var defaultTypography = {
   "--typo-h1-color": "var(--canvas-text)",
   "--typo-h1-color-muted": "var(--canvas-text-muted)",
   // H2 - Major section headers
-  "--typo-h2-font": "",
   "--typo-h2-size": "60px",
   "--typo-h2-size-mobile": "40px",
   "--typo-h2-weight": "700",
@@ -3210,7 +3208,6 @@ var defaultTypography = {
   "--typo-h2-color": "var(--canvas-text)",
   "--typo-h2-color-muted": "var(--canvas-text-muted)",
   // H3 - Banner titles
-  "--typo-h3-font": "",
   "--typo-h3-size": "48px",
   "--typo-h3-size-mobile": "32px",
   "--typo-h3-weight": "700",
@@ -3219,7 +3216,6 @@ var defaultTypography = {
   "--typo-h3-color": "var(--canvas-text)",
   "--typo-h3-color-muted": "var(--canvas-text-muted)",
   // H4 - Page titles
-  "--typo-h4-font": "",
   "--typo-h4-size": "36px",
   "--typo-h4-size-mobile": "28px",
   "--typo-h4-weight": "600",
@@ -3228,7 +3224,6 @@ var defaultTypography = {
   "--typo-h4-color": "var(--canvas-text)",
   "--typo-h4-color-muted": "var(--canvas-text-muted)",
   // H5 - Large section headers
-  "--typo-h5-font": "",
   "--typo-h5-size": "30px",
   "--typo-h5-size-mobile": "24px",
   "--typo-h5-weight": "600",
@@ -3237,7 +3232,6 @@ var defaultTypography = {
   "--typo-h5-color": "var(--canvas-text)",
   "--typo-h5-color-muted": "var(--canvas-text-muted)",
   // H6 - Section titles
-  "--typo-h6-font": "",
   "--typo-h6-size": "24px",
   "--typo-h6-size-mobile": "20px",
   "--typo-h6-weight": "600",
@@ -3246,7 +3240,6 @@ var defaultTypography = {
   "--typo-h6-color": "var(--canvas-text)",
   "--typo-h6-color-muted": "var(--canvas-text-muted)",
   // Body XL - Lead paragraphs, card titles
-  "--typo-body-xl-font": "",
   "--typo-body-xl-size": "20px",
   "--typo-body-xl-size-mobile": "18px",
   "--typo-body-xl-weight": "400",
@@ -3255,7 +3248,6 @@ var defaultTypography = {
   "--typo-body-xl-color": "var(--canvas-text)",
   "--typo-body-xl-color-muted": "var(--canvas-text-muted)",
   // Body L - Descriptions
-  "--typo-body-l-font": "",
   "--typo-body-l-size": "18px",
   "--typo-body-l-size-mobile": "16px",
   "--typo-body-l-weight": "400",
@@ -3264,7 +3256,6 @@ var defaultTypography = {
   "--typo-body-l-color": "var(--canvas-text)",
   "--typo-body-l-color-muted": "var(--canvas-text-muted)",
   // Body M - Standard body text
-  "--typo-body-m-font": "",
   "--typo-body-m-size": "16px",
   "--typo-body-m-size-mobile": "15px",
   "--typo-body-m-weight": "400",
@@ -3273,7 +3264,6 @@ var defaultTypography = {
   "--typo-body-m-color": "var(--canvas-text)",
   "--typo-body-m-color-muted": "var(--canvas-text-muted)",
   // Body S - Captions, metadata
-  "--typo-body-s-font": "",
   "--typo-body-s-size": "14px",
   "--typo-body-s-size-mobile": "13px",
   "--typo-body-s-weight": "400",
@@ -3282,7 +3272,6 @@ var defaultTypography = {
   "--typo-body-s-color": "var(--canvas-text)",
   "--typo-body-s-color-muted": "var(--canvas-text-muted)",
   // Body XS - Fine print, labels
-  "--typo-body-xs-font": "",
   "--typo-body-xs-size": "12px",
   "--typo-body-xs-size-mobile": "11px",
   "--typo-body-xs-weight": "400",
@@ -3291,7 +3280,6 @@ var defaultTypography = {
   "--typo-body-xs-color": "var(--canvas-text)",
   "--typo-body-xs-color-muted": "var(--canvas-text-muted)",
   // Menu Label
-  "--typo-menu-label-font": "",
   "--typo-menu-label-size": "18px",
   "--typo-menu-label-size-mobile": "16px",
   "--typo-menu-label-weight": "600",
@@ -3299,7 +3287,6 @@ var defaultTypography = {
   "--typo-menu-label-line-height": "1.55",
   "--typo-menu-label-color": "var(--canvas-text)",
   // Sidebar Labels
-  "--typo-sidebar-label-font": "",
   "--typo-sidebar-label-size": "12px",
   "--typo-sidebar-label-size-mobile": "11px",
   "--typo-sidebar-label-weight": "600",
@@ -3307,7 +3294,6 @@ var defaultTypography = {
   "--typo-sidebar-label-line-height": "1.5",
   "--typo-sidebar-label-color": "var(--canvas-text)",
   // Sidebar Tabs
-  "--typo-sidebar-tab-font": "",
   "--typo-sidebar-tab-size": "14px",
   "--typo-sidebar-tab-size-mobile": "14px",
   "--typo-sidebar-tab-weight": "500",
@@ -3315,7 +3301,6 @@ var defaultTypography = {
   "--typo-sidebar-tab-line-height": "1.5",
   "--typo-sidebar-tab-color": "var(--canvas-text)",
   // Sidebar Subtabs
-  "--typo-sidebar-subtab-font": "",
   "--typo-sidebar-subtab-size": "14px",
   "--typo-sidebar-subtab-size-mobile": "14px",
   "--typo-sidebar-subtab-weight": "500",
@@ -3323,7 +3308,6 @@ var defaultTypography = {
   "--typo-sidebar-subtab-line-height": "1.5",
   "--typo-sidebar-subtab-color": "var(--canvas-text)",
   // Header Texts
-  "--typo-header-font": "",
   "--typo-header-size": "14px",
   "--typo-header-size-mobile": "14px",
   "--typo-header-weight": "400",
@@ -3331,7 +3315,6 @@ var defaultTypography = {
   "--typo-header-line-height": "1.5",
   "--typo-header-color": "var(--canvas-text)",
   // Input Labels
-  "--typo-input-label-font": "",
   "--typo-input-label-size": "14px",
   "--typo-input-label-size-mobile": "13px",
   "--typo-input-label-weight": "500",
@@ -3339,7 +3322,6 @@ var defaultTypography = {
   "--typo-input-label-line-height": "1.4",
   "--typo-input-label-color": "var(--canvas-text-muted)",
   // Button Text
-  "--typo-button-font": "",
   "--typo-button-size": "14px",
   "--typo-button-size-mobile": "14px",
   "--typo-button-weight": "500",
@@ -3353,7 +3335,6 @@ var defaultButtonSizes = {
   "--btn-mini-font-size": "12px",
   "--btn-mini-px": "10px",
   "--btn-mini-radius": "4px",
-  "--btn-mini-font-family": "",
   "--btn-mini-font-weight": "500",
   "--btn-mini-letter-spacing": "0em",
   // Small
@@ -3361,7 +3342,6 @@ var defaultButtonSizes = {
   "--btn-small-font-size": "14px",
   "--btn-small-px": "12px",
   "--btn-small-radius": "6px",
-  "--btn-small-font-family": "",
   "--btn-small-font-weight": "500",
   "--btn-small-letter-spacing": "0em",
   // Standard
@@ -3369,7 +3349,6 @@ var defaultButtonSizes = {
   "--btn-standard-font-size": "14px",
   "--btn-standard-px": "16px",
   "--btn-standard-radius": "8px",
-  "--btn-standard-font-family": "",
   "--btn-standard-font-weight": "500",
   "--btn-standard-letter-spacing": "0em",
   // Large
@@ -3377,7 +3356,6 @@ var defaultButtonSizes = {
   "--btn-large-font-size": "16px",
   "--btn-large-px": "20px",
   "--btn-large-radius": "10px",
-  "--btn-large-font-family": "",
   "--btn-large-font-weight": "500",
   "--btn-large-letter-spacing": "0em"
 };
@@ -4580,6 +4558,21 @@ function setCSSVariables(variables) {
   });
   broadcastCSSVariables(variables);
 }
+function removeCSSVariables(names) {
+  names.forEach((name) => {
+    document.documentElement.style.removeProperty(name);
+  });
+  const iframes = document.querySelectorAll("iframe");
+  iframes.forEach((iframe) => {
+    try {
+      iframe.contentWindow?.postMessage(
+        { type: "css-vars-remove", names },
+        "*"
+      );
+    } catch {
+    }
+  });
+}
 function broadcastCSSVariables(variables) {
   const iframes = document.querySelectorAll("iframe");
   iframes.forEach((iframe) => {
@@ -4601,6 +4594,11 @@ function setupCSSVariableListener() {
         document.documentElement.style.setProperty(name, value);
       });
     }
+    if (event.data?.type === "css-vars-remove" && Array.isArray(event.data.names)) {
+      event.data.names.forEach((name) => {
+        document.documentElement.style.removeProperty(name);
+      });
+    }
   };
   window.addEventListener("message", handler);
   return () => window.removeEventListener("message", handler);
@@ -24112,6 +24110,30 @@ function importJSON(json) {
 }
 
 // src/components/theme-drawer/hooks/use-theme-state.ts
+var FONT_VARS = [
+  "--typo-h1-font",
+  "--typo-h2-font",
+  "--typo-h3-font",
+  "--typo-h4-font",
+  "--typo-h5-font",
+  "--typo-h6-font",
+  "--typo-body-xl-font",
+  "--typo-body-l-font",
+  "--typo-body-m-font",
+  "--typo-body-s-font",
+  "--typo-body-xs-font",
+  "--typo-menu-label-font",
+  "--typo-sidebar-label-font",
+  "--typo-sidebar-tab-font",
+  "--typo-sidebar-subtab-font",
+  "--typo-header-font",
+  "--typo-input-label-font",
+  "--typo-button-font",
+  "--btn-mini-font-family",
+  "--btn-small-font-family",
+  "--btn-standard-font-family",
+  "--btn-large-font-family"
+];
 var allDefaults = {
   ...defaultColors,
   ...defaultTypography,
@@ -24178,6 +24200,10 @@ function useThemeState(options) {
           localStorage.setItem(storageKey, exportJSON(next));
         } catch {
         }
+        const fontVarsToRemove = FONT_VARS.filter((v) => v.startsWith(prefix));
+        if (fontVarsToRemove.length > 0) {
+          removeCSSVariables(fontVarsToRemove);
+        }
         if (Object.keys(resetVars).length > 0) {
           setCSSVariables(resetVars);
         }
@@ -24193,6 +24219,7 @@ function useThemeState(options) {
       localStorage.removeItem(storageKey);
     } catch {
     }
+    removeCSSVariables(FONT_VARS);
     setCSSVariables(allDefaults);
     onThemeChangeRef.current?.({});
   }, [storageKey]);
@@ -24205,6 +24232,7 @@ function useThemeState(options) {
         localStorage.setItem(storageKey, exportJSON(parsed));
       } catch {
       }
+      removeCSSVariables(FONT_VARS);
       setCSSVariables({ ...allDefaults, ...parsed });
       onThemeChangeRef.current?.(parsed);
       return true;
@@ -25391,6 +25419,6 @@ function getTopLevelScreens(allScreens) {
   return allScreens.filter((s) => !s.parentId);
 }
 
-export { AccountSettingsShell, ActivityFeed, Avatar, AvatarFallback, AvatarImage, BadgesCard, BlogCards, BottomInputChatWidget, Button, Calendar, CanvasItem, CategoryGrid, CenteredHero, ChatBubble, ChatDateSeparator, ChatInput, ChatMessageList, Checkbox, CheckboxWithLabel, CircularProgressBar, CircularProgressBarList, ComponentPalette, ComponentSearch, ContentDropzone, ContentWithImage, CoreValuesGrid, CreditCardDisplay, CtaBanner, CustomComponentHelper, DashboardHeader, DashboardShell, DateInput, DescriptionCard, DestinationCards, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DonutChartWidget, DoubleSidebar, DoubleSidebarShell, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FaqAccordion, FaqsTable, FeatureWithImage, FeaturedNewsCards, FeaturedPlaces, FeaturesComparison, FileUploader, FilterPopover, FixedColumnDataTable, FlairBanner, FooterNavbar, FormGroup, GallerySection, GradientBanner, GraphMetricTilesDemo, GridTilesList, Header, HeroDarkCentered, HeroDarkWithImage, HeroFullwidthImage, HeroSection, HowItWorks, IconSidebar, IconSidebarShell, ImageFeedWithNestedComments, ImageUploader, InfoCard, Input, Label2 as Label, LargeImageLabelsList, Sidebar2 as LayoutSidebar, LineChartWidget, LineTabs, LinksCard, Loader, LoginBrandingPanel, MenuSection, MenufocusTemplate, MessengerInput, MessengerSidebar, MetricCard, MetricCardsRow, MetricListCard, MetricsSection, MobileBottomNav, MobileMenuShell, MonthlyCalendarWidget, MultiselectCheckboxField, MultiselectTags, MultistepProgressBarShell, MultistepShell, MultistepSidebarShell, NestedCommentsTable, NestedDataTable, OfficeLocations, PageHeaderSection, Pagination, ParticipantList, PersonaCard, PersonaGrid, PillTabs, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortfolioCard, PreviewBrandingContext, PricingCards, PricingCta, ProfileCard, ProfileGridTilesList, ProfileImageUploader, ProgressBar, ProgressMetricCard, ProjectContextShell, PromptChipsRow, PromptTemplate, RadioGroup2 as RadioGroup, RadioGroupItem, RangeInput, ReviewsGrid, ReviewsTable, ScreenFlowchart, ScreenPromptBuilder, ScreenPromptTemplate, ScrollArea, ScrollBar, SearchBar, SearchBarShell, SearchSidebar, Searchbox, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectablePills, Separator3 as Separator, SettingsListRow, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarNav, SidebarProfileCard, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SkillsCard, Slider, SlideshowGridTiles, SocialFeed, SocialProof, StandardDataTable, StandardListWithImage, StandardPageShell, StatsCard, StepTracker, Switch, Tabs, TabsContent, TabsList, TabsTrigger, TeamCardsGrid, TeamCircularGrid, TestimonialCarousel, TextInput, Textarea, ThemeContext, ThemeDrawer, ThemeProvider, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TwoColumnWidgets, Typography, UpvotingPostsTable, VerticalHowItWorks, VerticalMultistepShell, VerticalStepTracker, VideoChatControls, VideoContentSection, VideoPlaylistCard, VideoPlaylistItem, WebcamPreview, YouTubePlayer, accountTabs, allColorVariables, blocks, broadcastCSSVariables, buttonVariants, canvasBlocks, cn, colorVariables, defaultBranding, defaultButtonColorStyles, defaultButtonColors, defaultButtonSizes, defaultColors, defaultCustomButtonStyles, defaultDoubleSidebarSections, defaultIconNavItems, defaultImages, defaultInputSizes, defaultProgressBarSteps, defaultSteps, defaultSupportLinks, defaultTypography, defaultVerticalSteps, getChildScreens, getScreenUrl, getTopLevelScreens, groupModalDrawerBlocks, layoutPrimitives, layoutShells, marketingBlocks, pageTemplates, pricingBlocks, setCSSVariable, setCSSVariables, setupCSSVariableListener, useCSSVariableSync, useIsMobile, usePreviewBranding, useSidebar, useThemeBrandAssets, useThemeBranding, useThemeImages, videoBlocks };
+export { AccountSettingsShell, ActivityFeed, Avatar, AvatarFallback, AvatarImage, BadgesCard, BlogCards, BottomInputChatWidget, Button, Calendar, CanvasItem, CategoryGrid, CenteredHero, ChatBubble, ChatDateSeparator, ChatInput, ChatMessageList, Checkbox, CheckboxWithLabel, CircularProgressBar, CircularProgressBarList, ComponentPalette, ComponentSearch, ContentDropzone, ContentWithImage, CoreValuesGrid, CreditCardDisplay, CtaBanner, CustomComponentHelper, DashboardHeader, DashboardShell, DateInput, DescriptionCard, DestinationCards, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DonutChartWidget, DoubleSidebar, DoubleSidebarShell, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FaqAccordion, FaqsTable, FeatureWithImage, FeaturedNewsCards, FeaturedPlaces, FeaturesComparison, FileUploader, FilterPopover, FixedColumnDataTable, FlairBanner, FooterNavbar, FormGroup, GallerySection, GradientBanner, GraphMetricTilesDemo, GridTilesList, Header, HeroDarkCentered, HeroDarkWithImage, HeroFullwidthImage, HeroSection, HowItWorks, IconSidebar, IconSidebarShell, ImageFeedWithNestedComments, ImageUploader, InfoCard, Input, Label2 as Label, LargeImageLabelsList, Sidebar2 as LayoutSidebar, LineChartWidget, LineTabs, LinksCard, Loader, LoginBrandingPanel, MenuSection, MenufocusTemplate, MessengerInput, MessengerSidebar, MetricCard, MetricCardsRow, MetricListCard, MetricsSection, MobileBottomNav, MobileMenuShell, MonthlyCalendarWidget, MultiselectCheckboxField, MultiselectTags, MultistepProgressBarShell, MultistepShell, MultistepSidebarShell, NestedCommentsTable, NestedDataTable, OfficeLocations, PageHeaderSection, Pagination, ParticipantList, PersonaCard, PersonaGrid, PillTabs, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortfolioCard, PreviewBrandingContext, PricingCards, PricingCta, ProfileCard, ProfileGridTilesList, ProfileImageUploader, ProgressBar, ProgressMetricCard, ProjectContextShell, PromptChipsRow, PromptTemplate, RadioGroup2 as RadioGroup, RadioGroupItem, RangeInput, ReviewsGrid, ReviewsTable, ScreenFlowchart, ScreenPromptBuilder, ScreenPromptTemplate, ScrollArea, ScrollBar, SearchBar, SearchBarShell, SearchSidebar, Searchbox, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectablePills, Separator3 as Separator, SettingsListRow, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarNav, SidebarProfileCard, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SkillsCard, Slider, SlideshowGridTiles, SocialFeed, SocialProof, StandardDataTable, StandardListWithImage, StandardPageShell, StatsCard, StepTracker, Switch, Tabs, TabsContent, TabsList, TabsTrigger, TeamCardsGrid, TeamCircularGrid, TestimonialCarousel, TextInput, Textarea, ThemeContext, ThemeDrawer, ThemeProvider, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TwoColumnWidgets, Typography, UpvotingPostsTable, VerticalHowItWorks, VerticalMultistepShell, VerticalStepTracker, VideoChatControls, VideoContentSection, VideoPlaylistCard, VideoPlaylistItem, WebcamPreview, YouTubePlayer, accountTabs, allColorVariables, blocks, broadcastCSSVariables, buttonVariants, canvasBlocks, cn, colorVariables, defaultBranding, defaultButtonColorStyles, defaultButtonColors, defaultButtonSizes, defaultColors, defaultCustomButtonStyles, defaultDoubleSidebarSections, defaultIconNavItems, defaultImages, defaultInputSizes, defaultProgressBarSteps, defaultSteps, defaultSupportLinks, defaultTypography, defaultVerticalSteps, getChildScreens, getScreenUrl, getTopLevelScreens, groupModalDrawerBlocks, layoutPrimitives, layoutShells, marketingBlocks, pageTemplates, pricingBlocks, removeCSSVariables, setCSSVariable, setCSSVariables, setupCSSVariableListener, useCSSVariableSync, useIsMobile, usePreviewBranding, useSidebar, useThemeBrandAssets, useThemeBranding, useThemeImages, videoBlocks };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map