@kushagradhawan/kookie-ui 0.1.41 → 0.1.43

package/dist/esm/components/sidebar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/sidebar.tsx"],
-  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from './slot.js';\nimport { Accordion } from 'radix-ui';\n\nimport { sidebarPropDefs } from './sidebar.props.js';\nimport { useThemeContext } from './theme.js';\n// import { IconButton } from './icon-button.js';\nimport { ScrollArea } from './scroll-area.js';\nimport { Separator } from './separator.js';\nimport { ThickChevronRightIcon } from './icons.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { Kbd } from './kbd.js';\nimport { Badge } from './badge.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\nimport type { BadgeProps } from './badge.js';\n\n// Badge configuration type for sidebar menu buttons\ntype BadgeConfig = {\n  content: React.ReactNode;\n  variant?: BadgeProps['variant'];\n  size?: BadgeProps['size'];\n  color?: BadgeProps['color'];\n  highContrast?: BadgeProps['highContrast'];\n  radius?: BadgeProps['radius'];\n};\n\n// Internal presentational context (not exported) for size/menu variant\ntype SidebarVisualContextValue = {\n  size: '1' | '2';\n  menuVariant: 'solid' | 'soft';\n};\nconst SidebarVisualContext = React.createContext<SidebarVisualContextValue | null>(null);\nfunction useSidebarVisual() {\n  return React.useContext(SidebarVisualContext);\n}\n\n// Context detection for Shell.Sidebar integration\ntype ShellSidebarSectionContextValue = {\n  side: 'start' | 'end';\n  section: 'rail' | 'panel';\n};\n\n// Create a context that Shell.Sidebar can provide\nconst ShellSidebarSectionContext = React.createContext<ShellSidebarSectionContextValue | null>(\n  null,\n);\n\n// This context comes from Shell.Sidebar when Sidebar is used within Shell\nfunction useShellSidebarSection(): ShellSidebarSectionContextValue | null {\n  return React.useContext(ShellSidebarSectionContext);\n}\n\n// Main Sidebar component\ntype SidebarOwnProps = GetPropDefTypes<typeof sidebarPropDefs>;\ninterface SidebarProps extends ComponentPropsWithout<'div', RemovedProps>, SidebarOwnProps {}\n\nconst Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>((props, forwardedRef) => {\n  const themeContext = useThemeContext();\n\n  const {\n    size = sidebarPropDefs.size.default,\n    variant = sidebarPropDefs.variant.default,\n    menuVariant = sidebarPropDefs.menuVariant.default,\n    layout = sidebarPropDefs.layout.default,\n    // type = sidebarPropDefs.type.default,\n    // side = sidebarPropDefs.side.default,\n    // collapsible = sidebarPropDefs.collapsible.default,\n    panelBackground,\n    color,\n    highContrast = sidebarPropDefs.highContrast.default,\n  } = props;\n\n  const { className, children, ...rootProps } = extractProps(props, sidebarPropDefs);\n  const { asChild: _, panelBackground: __, ...safeRootProps } = rootProps; // Remove asChild and panelBackground from DOM props\n  const resolvedColor = color || themeContext.accentColor;\n\n  // Detect Shell.Sidebar context to auto-resolve layout\n  const shellSection = useShellSidebarSection();\n  const resolvedLayout = layout || shellSection?.section || 'panel'; // Default to 'panel' if no context\n\n  // Update context with current props - we'll pass the resolved values\n  const resolvedSize = typeof size === 'object' ? size.initial || '2' : size;\n  return (\n    <div\n      {...safeRootProps}\n      ref={forwardedRef}\n      data-accent-color={resolvedColor}\n      className={classNames('rt-SidebarRoot', className)}\n    >\n      <SidebarVisualContext.Provider value={{ size: resolvedSize, menuVariant }}>\n        <div\n          className={classNames(\n            'rt-SidebarContainer',\n            `rt-variant-${variant}`,\n            `rt-r-size-${resolvedSize}`,\n            `rt-menu-variant-${menuVariant}`,\n            resolvedLayout && `rt-layout-${resolvedLayout}`,\n          )}\n          data-accent-color={resolvedColor}\n          data-high-contrast={highContrast || undefined}\n          data-panel-background={panelBackground}\n          data-layout={resolvedLayout}\n        >\n          {children}\n        </div>\n      </SidebarVisualContext.Provider>\n    </div>\n  );\n});\nSidebar.displayName = 'Sidebar.Root';\n\n// Sidebar content area\ninterface SidebarContentProps extends React.ComponentPropsWithoutRef<'div'> {\n  id?: string;\n  role?: 'navigation' | 'none';\n  'aria-label'?: string;\n}\n\nconst SidebarContent = React.forwardRef<HTMLDivElement, SidebarContentProps>(\n  (\n    {\n      className,\n      children,\n      role = 'navigation',\n      'aria-label': ariaLabel = 'Main navigation',\n      id,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const visual = useSidebarVisual();\n    const size = visual?.size ?? '2';\n    const menuVariant = visual?.menuVariant ?? 'soft';\n\n    return (\n      <ScrollArea type=\"hover\">\n        <div\n          {...props}\n          ref={forwardedRef}\n          id={id}\n          role={role}\n          aria-label={ariaLabel}\n          className={classNames(\n            'rt-BaseMenuContent',\n            'rt-SidebarContent',\n            `rt-r-size-${size}`,\n            `rt-menu-variant-${menuVariant}`,\n            className,\n          )}\n        >\n          {children}\n        </div>\n      </ScrollArea>\n    );\n  },\n);\nSidebarContent.displayName = 'Sidebar.Content';\n\n// Sidebar header\ninterface SidebarHeaderProps extends React.ComponentPropsWithoutRef<'div'> {\n  /**\n   * Whether to use the default flex container layout.\n   * @default true\n   */\n  asContainer?: boolean;\n}\n\nconst SidebarHeader = React.forwardRef<HTMLDivElement, SidebarHeaderProps>(\n  ({ className, asContainer = true, ...props }, forwardedRef) => {\n    const visual = useSidebarVisual();\n    const size = visual?.size ?? '2';\n    const menuVariant = visual?.menuVariant ?? 'soft';\n\n    return (\n      <div\n        {...props}\n        ref={forwardedRef}\n        className={classNames(\n          'rt-SidebarHeader',\n          `rt-r-size-${size}`,\n          `rt-menu-variant-${menuVariant}`,\n          {\n            'rt-SidebarHeader--container': asContainer,\n          },\n          className,\n        )}\n      />\n    );\n  },\n);\nSidebarHeader.displayName = 'Sidebar.Header';\n\n// Sidebar footer\ninterface SidebarFooterProps extends React.ComponentPropsWithoutRef<'div'> {\n  /**\n   * Whether to use the default flex container layout.\n   * @default true\n   */\n  asContainer?: boolean;\n}\n\nconst SidebarFooter = React.forwardRef<HTMLDivElement, SidebarFooterProps>(\n  ({ className, asContainer = true, ...props }, forwardedRef) => {\n    const visual = useSidebarVisual();\n    const size = visual?.size ?? '2';\n    const menuVariant = visual?.menuVariant ?? 'soft';\n\n    return (\n      <div\n        {...props}\n        ref={forwardedRef}\n        className={classNames(\n          'rt-SidebarFooter',\n          `rt-r-size-${size}`,\n          `rt-menu-variant-${menuVariant}`,\n          {\n            'rt-SidebarFooter--container': asContainer,\n          },\n          className,\n        )}\n      />\n    );\n  },\n);\nSidebarFooter.displayName = 'Sidebar.Footer';\n\n// Sidebar trigger button\n// removed Trigger in presentational-only Sidebar\n\n// Removed SidebarInset - not needed\n\n// Sidebar separator\ninterface SidebarSeparatorProps extends ComponentPropsWithout<typeof Separator, RemovedProps> {}\n\nconst SidebarSeparator = React.forwardRef<\n  React.ComponentRef<typeof Separator>,\n  SidebarSeparatorProps\n>(({ className, ...props }, forwardedRef) => (\n  <Separator\n    {...props}\n    ref={forwardedRef}\n    className={classNames('rt-SidebarSeparator', className)}\n  />\n));\nSidebarSeparator.displayName = 'Sidebar.Separator';\n\n// Menu components - reusing dropdown menu structure\ninterface SidebarMenuProps extends React.ComponentPropsWithoutRef<'ul'> {}\n\nconst SidebarMenu = React.forwardRef<HTMLUListElement, SidebarMenuProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <ul\n      {...props}\n      ref={forwardedRef}\n      role=\"menu\"\n      className={classNames('rt-BaseMenuViewport', 'rt-SidebarMenu', className)}\n    />\n  ),\n);\nSidebarMenu.displayName = 'Sidebar.Menu';\n\ninterface SidebarMenuItemProps extends React.ComponentPropsWithoutRef<'li'> {}\n\nconst SidebarMenuItem = React.forwardRef<HTMLLIElement, SidebarMenuItemProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <li {...props} ref={forwardedRef} className={classNames('rt-SidebarMenuItem', className)} />\n  ),\n);\nSidebarMenuItem.displayName = 'Sidebar.MenuItem';\n\ninterface SidebarMenuButtonProps extends React.ComponentPropsWithoutRef<'button'> {\n  asChild?: boolean;\n  isActive?: boolean;\n  shortcut?: React.ReactNode;\n  badge?: string | BadgeConfig;\n}\n\nconst SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(\n  (\n    {\n      asChild = false,\n      isActive = false,\n      shortcut,\n      badge,\n      className,\n      children,\n      onMouseEnter,\n      onMouseLeave,\n      onKeyDown,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const [isHighlighted, setIsHighlighted] = React.useState(false);\n    const visual = useSidebarVisual();\n    const sidebarSize = visual?.size ?? '2';\n\n    const Comp = asChild ? Slot : 'button';\n\n    const { onClick } = props;\n    const handleKeyDown = React.useCallback(\n      (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        switch (event.key) {\n          case 'Enter':\n          case ' ':\n            event.preventDefault();\n            if (onClick) onClick(event as any);\n            break;\n          case 'ArrowDown': {\n            event.preventDefault();\n            // Focus next menu item\n            const nextItem = (event.currentTarget as HTMLElement).nextElementSibling?.querySelector(\n              '[role=\"menuitem\"]',\n            ) as HTMLElement;\n            if (nextItem) nextItem.focus();\n            break;\n          }\n          case 'ArrowUp': {\n            event.preventDefault();\n            // Focus previous menu item\n            const prevItem = (\n              event.currentTarget as HTMLElement\n            ).previousElementSibling?.querySelector('[role=\"menuitem\"]') as HTMLElement;\n            if (prevItem) prevItem.focus();\n            break;\n          }\n        }\n        onKeyDown?.(event);\n      },\n      [onClick, onKeyDown],\n    );\n\n    return (\n      <Comp\n        {...props}\n        ref={forwardedRef}\n        role=\"menuitem\"\n        aria-current={isActive ? 'page' : undefined}\n        className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-SidebarMenuButton', className)}\n        data-active={isActive || undefined}\n        data-highlighted={isHighlighted || undefined}\n        onKeyDown={handleKeyDown}\n        onMouseEnter={(event) => {\n          setIsHighlighted(true);\n          onMouseEnter?.(event);\n        }}\n        onMouseLeave={(event) => {\n          setIsHighlighted(false);\n          onMouseLeave?.(event);\n        }}\n      >\n        {asChild ? (\n          children\n        ) : (\n          <>\n            {children}\n            {/* Badge with soft variant default and size mapping to sidebar size */}\n            {badge && (\n              <div className=\"rt-SidebarMenuBadge\">\n                {typeof badge === 'string' ? (\n                  <Badge size={sidebarSize} variant=\"soft\">\n                    {badge}\n                  </Badge>\n                ) : (\n                  <Badge\n                    size={badge.size || sidebarSize}\n                    variant={badge.variant || 'soft'}\n                    color={badge.color}\n                    highContrast={badge.highContrast}\n                    radius={badge.radius}\n                  >\n                    {badge.content}\n                  </Badge>\n                )}\n              </div>\n            )}\n            {shortcut && (\n              <div className=\"rt-BaseMenuShortcut rt-SidebarMenuShortcut\">\n                <Kbd size={sidebarSize}>{shortcut}</Kbd>\n              </div>\n            )}\n          </>\n        )}\n      </Comp>\n    );\n  },\n);\nSidebarMenuButton.displayName = 'Sidebar.MenuButton';\n\n// Sub-menu components using Radix Accordion\ninterface SidebarMenuSubProps extends React.ComponentPropsWithoutRef<'div'> {\n  defaultOpen?: boolean;\n}\n\nconst SidebarMenuSub = React.forwardRef<HTMLDivElement, SidebarMenuSubProps>(\n  ({ defaultOpen = false, children, ...props }, forwardedRef) => {\n    return (\n      <div {...props} ref={forwardedRef}>\n        <Accordion.Root type=\"single\" collapsible defaultValue={defaultOpen ? 'item' : undefined}>\n          <Accordion.Item value=\"item\">{children}</Accordion.Item>\n        </Accordion.Root>\n      </div>\n    );\n  },\n);\nSidebarMenuSub.displayName = 'Sidebar.MenuSub';\n\ninterface SidebarMenuSubTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof Accordion.Trigger> {\n  asChild?: boolean;\n}\n\nconst SidebarMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof Accordion.Trigger>,\n  SidebarMenuSubTriggerProps\n>(\n  (\n    { asChild = false, className, children, onMouseEnter, onMouseLeave, ...props },\n    forwardedRef,\n  ) => {\n    const [isHighlighted, setIsHighlighted] = React.useState(false);\n\n    return (\n      <Accordion.Header asChild>\n        <div>\n          <Accordion.Trigger\n            {...props}\n            ref={forwardedRef}\n            asChild={asChild}\n            role=\"menuitem\"\n            aria-haspopup=\"true\"\n            className={classNames(\n              'rt-reset',\n              'rt-BaseMenuItem',\n              'rt-SidebarMenuButton',\n              'rt-SidebarMenuSubTrigger',\n              className,\n            )}\n            data-highlighted={isHighlighted || undefined}\n            onMouseEnter={(event) => {\n              setIsHighlighted(true);\n              onMouseEnter?.(event);\n            }}\n            onMouseLeave={(event) => {\n              setIsHighlighted(false);\n              onMouseLeave?.(event);\n            }}\n          >\n            {asChild ? (\n              children\n            ) : (\n              <>\n                {children}\n                <ThickChevronRightIcon\n                  className={classNames(\n                    'rt-BaseMenuSubTriggerIcon',\n                    'rt-SidebarMenuSubTriggerIcon',\n                  )}\n                />\n              </>\n            )}\n          </Accordion.Trigger>\n        </div>\n      </Accordion.Header>\n    );\n  },\n);\nSidebarMenuSubTrigger.displayName = 'Sidebar.MenuSubTrigger';\n\ninterface SidebarMenuSubContentProps\n  extends React.ComponentPropsWithoutRef<typeof Accordion.Content> {}\n\nconst SidebarMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof Accordion.Content>,\n  SidebarMenuSubContentProps\n>(({ className, children, ...props }, forwardedRef) => {\n  return (\n    <Accordion.Content\n      {...props}\n      ref={forwardedRef}\n      className={classNames('rt-SidebarMenuSubContent', className)}\n    >\n      <div className=\"rt-SidebarMenuSubList\">{children}</div>\n    </Accordion.Content>\n  );\n});\nSidebarMenuSubContent.displayName = 'Sidebar.MenuSubContent';\n\n// Group components\ninterface SidebarGroupProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarGroup = React.forwardRef<HTMLDivElement, SidebarGroupProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <div\n      {...props}\n      ref={forwardedRef}\n      className={classNames('rt-BaseMenuGroup', 'rt-SidebarGroup', className)}\n    />\n  ),\n);\nSidebarGroup.displayName = 'Sidebar.Group';\n\ninterface SidebarGroupLabelProps extends React.ComponentPropsWithoutRef<'div'> {\n  asChild?: boolean;\n}\n\nconst SidebarGroupLabel = React.forwardRef<HTMLDivElement, SidebarGroupLabelProps>(\n  ({ asChild = false, className, ...props }, forwardedRef) => {\n    const Comp = asChild ? Slot : 'div';\n\n    return (\n      <Comp\n        {...props}\n        ref={forwardedRef}\n        role=\"group\"\n        className={classNames('rt-BaseMenuLabel', 'rt-SidebarGroupLabel', className)}\n      />\n    );\n  },\n);\nSidebarGroupLabel.displayName = 'Sidebar.GroupLabel';\n\ninterface SidebarGroupContentProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarGroupContent = React.forwardRef<HTMLDivElement, SidebarGroupContentProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <div\n      {...props}\n      ref={forwardedRef}\n      className={classNames('rt-SidebarGroupContent', className)}\n    />\n  ),\n);\nSidebarGroupContent.displayName = 'Sidebar.GroupContent';\n\n// Export all components following shadcn's pattern\nexport {\n  Sidebar as Root,\n  SidebarContent as Content,\n  SidebarHeader as Header,\n  SidebarFooter as Footer,\n  SidebarSeparator as Separator,\n  SidebarMenu as Menu,\n  SidebarMenuItem as MenuItem,\n  SidebarMenuButton as MenuButton,\n  SidebarMenuSub as MenuSub,\n  SidebarMenuSubTrigger as MenuSubTrigger,\n  SidebarMenuSubContent as MenuSubContent,\n  SidebarGroup as Group,\n  SidebarGroupLabel as GroupLabel,\n  SidebarGroupContent as GroupContent,\n};\n\n/**\n * Enhanced Sidebar Header and Footer Usage Examples:\n *\n * 1. Simple default container (backwards compatible):\n * <Sidebar.Header>\n *   <Logo />\n *   <span>App Name</span>\n * </Sidebar.Header>\n *\n * 2. Custom flex layout:\n * <Sidebar.Header className=\"rt-justify-between rt-gap-3\">\n *   <Logo />\n *   <Sidebar.MenuButton>\n *     <SettingsIcon />\n *   </Sidebar.MenuButton>\n * </Sidebar.Header>\n *\n * 3. Column layout for multiple rows:\n * <Sidebar.Header className=\"rt-flex-col rt-gap-2\" asContainer={false}>\n *   <div className=\"rt-flex rt-items-center rt-gap-2\">\n *     <Logo />\n *     <span>App Name</span>\n *   </div>\n *   <Sidebar.MenuButton>\n *     <UserAvatar />\n *     <span>John Doe</span>\n *   </Sidebar.MenuButton>\n * </Sidebar.Header>\n *\n * 4. Interactive footer with menu button:\n * <Sidebar.Footer>\n *   <Sidebar.MenuButton>\n *     <UserIcon />\n *     <span>Settings</span>\n *     <ChevronUpIcon />\n *   </Sidebar.MenuButton>\n * </Sidebar.Footer>\n *\n * 5. Custom footer layout:\n * <Sidebar.Footer className=\"rt-justify-between\">\n *   <span>v1.0.0</span>\n *   <Sidebar.MenuButton>\n *     <HelpIcon />\n *   </Sidebar.MenuButton>\n * </Sidebar.Footer>\n *\n * Available utility classes:\n * - Layout: rt-flex-row, rt-flex-col\n * - Alignment: rt-items-center, rt-items-start, rt-items-end\n * - Justification: rt-justify-between, rt-justify-center, rt-justify-start, rt-justify-end\n * - Gap: rt-gap-1, rt-gap-2, rt-gap-3, rt-gap-4\n */\n\nexport type {\n  SidebarProps as RootProps,\n  SidebarContentProps as ContentProps,\n  SidebarHeaderProps as HeaderProps,\n  SidebarFooterProps as FooterProps,\n  BadgeConfig,\n  ShellSidebarSectionContextValue,\n};\n\n// Export context for Shell.Sidebar integration\nexport { ShellSidebarSectionContext };\n"],
-  "mappings": "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",
-  "names": ["React", "classNames", "Slot", "Accordion", "sidebarPropDefs", "useThemeContext", "ScrollArea", "Separator", "ThickChevronRightIcon", "extractProps", "Kbd", "Badge", "SidebarVisualContext", "useSidebarVisual", "ShellSidebarSectionContext", "useShellSidebarSection", "Sidebar", "props", "forwardedRef", "themeContext", "size", "variant", "menuVariant", "layout", "panelBackground", "color", "highContrast", "className", "children", "rootProps", "_", "__", "safeRootProps", "resolvedColor", "shellSection", "resolvedLayout", "resolvedSize", "SidebarContent", "role", "ariaLabel", "id", "visual", "SidebarHeader", "asContainer", "SidebarFooter", "SidebarSeparator", "SidebarMenu", "SidebarMenuItem", "SidebarMenuButton", "asChild", "isActive", "shortcut", "badge", "onMouseEnter", "onMouseLeave", "onKeyDown", "isHighlighted", "setIsHighlighted", "sidebarSize", "Comp", "onClick", "handleKeyDown", "event", "nextItem", "prevItem", "SidebarMenuSub", "defaultOpen", "SidebarMenuSubTrigger", "SidebarMenuSubContent", "SidebarGroup", "SidebarGroupLabel", "SidebarGroupContent"]
+  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from './slot.js';\nimport { Accordion } from 'radix-ui';\n\nimport { sidebarPropDefs } from './sidebar.props.js';\nimport { useThemeContext } from './theme.js';\n// import { IconButton } from './icon-button.js';\nimport { ScrollArea } from './scroll-area.js';\nimport { Separator } from './separator.js';\nimport { ThickChevronRightIcon } from './icons.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { Kbd } from './kbd.js';\nimport { Badge } from './badge.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\nimport type { BadgeProps } from './badge.js';\n\n// Badge configuration type for sidebar menu buttons\ntype BadgeConfig = {\n  content: React.ReactNode;\n  variant?: BadgeProps['variant'];\n  size?: BadgeProps['size'];\n  color?: BadgeProps['color'];\n  highContrast?: BadgeProps['highContrast'];\n  radius?: BadgeProps['radius'];\n};\n\n// Internal presentational context (not exported) for size/menu variant\ntype SidebarVisualContextValue = {\n  size: '1' | '2';\n  menuVariant: 'solid' | 'soft';\n};\nconst SidebarVisualContext = React.createContext<SidebarVisualContextValue | null>(null);\nfunction useSidebarVisual() {\n  return React.useContext(SidebarVisualContext);\n}\n\n// Sidebar is now independent of Shell - no integration needed\n\n// Main Sidebar component\ntype SidebarOwnProps = GetPropDefTypes<typeof sidebarPropDefs>;\ninterface SidebarProps extends ComponentPropsWithout<'div', RemovedProps>, SidebarOwnProps {}\n\nconst Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>((props, forwardedRef) => {\n  const themeContext = useThemeContext();\n\n  const {\n    size = sidebarPropDefs.size.default,\n    variant = sidebarPropDefs.variant.default,\n    menuVariant = sidebarPropDefs.menuVariant.default,\n    layout = sidebarPropDefs.layout.default,\n    // type = sidebarPropDefs.type.default,\n    // side = sidebarPropDefs.side.default,\n    // collapsible = sidebarPropDefs.collapsible.default,\n    panelBackground,\n    color,\n    highContrast = sidebarPropDefs.highContrast.default,\n  } = props;\n\n  const { className, children, ...rootProps } = extractProps(props, sidebarPropDefs);\n  const { asChild: _, panelBackground: __, ...safeRootProps } = rootProps; // Remove asChild and panelBackground from DOM props\n  const resolvedColor = color || themeContext.accentColor;\n\n  // Resolve layout (default to 'panel')\n  const resolvedLayout = layout || 'panel';\n\n  // Update context with current props - we'll pass the resolved values\n  const resolvedSize = typeof size === 'object' ? size.initial || '2' : size;\n  return (\n    <div\n      {...safeRootProps}\n      ref={forwardedRef}\n      data-accent-color={resolvedColor}\n      className={classNames('rt-SidebarRoot', className)}\n    >\n      <SidebarVisualContext.Provider value={{ size: resolvedSize, menuVariant }}>\n        <div\n          className={classNames(\n            'rt-SidebarContainer',\n            `rt-variant-${variant}`,\n            `rt-r-size-${resolvedSize}`,\n            `rt-menu-variant-${menuVariant}`,\n            resolvedLayout && `rt-layout-${resolvedLayout}`,\n          )}\n          data-accent-color={resolvedColor}\n          data-high-contrast={highContrast || undefined}\n          data-panel-background={panelBackground}\n          data-layout={resolvedLayout}\n        >\n          {children}\n        </div>\n      </SidebarVisualContext.Provider>\n    </div>\n  );\n});\nSidebar.displayName = 'Sidebar.Root';\n\n// Sidebar content area\ninterface SidebarContentProps extends React.ComponentPropsWithoutRef<'div'> {\n  id?: string;\n  role?: 'navigation' | 'none';\n  'aria-label'?: string;\n}\n\nconst SidebarContent = React.forwardRef<HTMLDivElement, SidebarContentProps>(\n  (\n    {\n      className,\n      children,\n      role = 'navigation',\n      'aria-label': ariaLabel = 'Main navigation',\n      id,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const visual = useSidebarVisual();\n    const size = visual?.size ?? '2';\n    const menuVariant = visual?.menuVariant ?? 'soft';\n\n    return (\n      <ScrollArea type=\"hover\">\n        <div\n          {...props}\n          ref={forwardedRef}\n          id={id}\n          role={role}\n          aria-label={ariaLabel}\n          className={classNames(\n            'rt-BaseMenuContent',\n            'rt-SidebarContent',\n            `rt-r-size-${size}`,\n            `rt-menu-variant-${menuVariant}`,\n            className,\n          )}\n        >\n          <div className=\"rt-BaseMenuViewport\">{children}</div>\n        </div>\n      </ScrollArea>\n    );\n  },\n);\nSidebarContent.displayName = 'Sidebar.Content';\n\n// Sidebar header\ninterface SidebarHeaderProps extends React.ComponentPropsWithoutRef<'div'> {\n  /**\n   * Whether to use the default flex container layout.\n   * @default true\n   */\n  asContainer?: boolean;\n}\n\nconst SidebarHeader = React.forwardRef<HTMLDivElement, SidebarHeaderProps>(\n  ({ className, asContainer = true, ...props }, forwardedRef) => {\n    const visual = useSidebarVisual();\n    const size = visual?.size ?? '2';\n    const menuVariant = visual?.menuVariant ?? 'soft';\n\n    return (\n      <div\n        {...props}\n        ref={forwardedRef}\n        className={classNames(\n          'rt-SidebarHeader',\n          `rt-r-size-${size}`,\n          `rt-menu-variant-${menuVariant}`,\n          {\n            'rt-SidebarHeader--container': asContainer,\n          },\n          className,\n        )}\n      />\n    );\n  },\n);\nSidebarHeader.displayName = 'Sidebar.Header';\n\n// Sidebar footer\ninterface SidebarFooterProps extends React.ComponentPropsWithoutRef<'div'> {\n  /**\n   * Whether to use the default flex container layout.\n   * @default true\n   */\n  asContainer?: boolean;\n}\n\nconst SidebarFooter = React.forwardRef<HTMLDivElement, SidebarFooterProps>(\n  ({ className, asContainer = true, ...props }, forwardedRef) => {\n    const visual = useSidebarVisual();\n    const size = visual?.size ?? '2';\n    const menuVariant = visual?.menuVariant ?? 'soft';\n\n    return (\n      <div\n        {...props}\n        ref={forwardedRef}\n        className={classNames(\n          'rt-SidebarFooter',\n          `rt-r-size-${size}`,\n          `rt-menu-variant-${menuVariant}`,\n          {\n            'rt-SidebarFooter--container': asContainer,\n          },\n          className,\n        )}\n      />\n    );\n  },\n);\nSidebarFooter.displayName = 'Sidebar.Footer';\n\n// Sidebar trigger button\n// removed Trigger in presentational-only Sidebar\n\n// Removed SidebarInset - not needed\n\n// Sidebar separator\ninterface SidebarSeparatorProps extends ComponentPropsWithout<typeof Separator, RemovedProps> {}\n\nconst SidebarSeparator = React.forwardRef<\n  React.ComponentRef<typeof Separator>,\n  SidebarSeparatorProps\n>(({ className, ...props }, forwardedRef) => (\n  <Separator\n    {...props}\n    ref={forwardedRef}\n    className={classNames('rt-SidebarSeparator', className)}\n  />\n));\nSidebarSeparator.displayName = 'Sidebar.Separator';\n\n// Menu components - reusing dropdown menu structure\ninterface SidebarMenuProps extends React.ComponentPropsWithoutRef<'ul'> {}\n\nconst SidebarMenu = React.forwardRef<HTMLUListElement, SidebarMenuProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <ul\n      {...props}\n      ref={forwardedRef}\n      role=\"menu\"\n      className={classNames('rt-SidebarMenu', className)}\n    />\n  ),\n);\nSidebarMenu.displayName = 'Sidebar.Menu';\n\ninterface SidebarMenuItemProps extends React.ComponentPropsWithoutRef<'li'> {}\n\nconst SidebarMenuItem = React.forwardRef<HTMLLIElement, SidebarMenuItemProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <li {...props} ref={forwardedRef} className={classNames('rt-SidebarMenuItem', className)} />\n  ),\n);\nSidebarMenuItem.displayName = 'Sidebar.MenuItem';\n\ninterface SidebarMenuButtonProps extends React.ComponentPropsWithoutRef<'button'> {\n  asChild?: boolean;\n  isActive?: boolean;\n  shortcut?: React.ReactNode;\n  badge?: string | BadgeConfig;\n}\n\nconst SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(\n  (\n    {\n      asChild = false,\n      isActive = false,\n      shortcut,\n      badge,\n      className,\n      children,\n      onMouseEnter,\n      onMouseLeave,\n      onKeyDown,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const [isHighlighted, setIsHighlighted] = React.useState(false);\n    const visual = useSidebarVisual();\n    const sidebarSize = visual?.size ?? '2';\n\n    const Comp = asChild ? Slot : 'button';\n\n    const { onClick } = props;\n    const handleKeyDown = React.useCallback(\n      (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        switch (event.key) {\n          case 'Enter':\n          case ' ':\n            event.preventDefault();\n            if (onClick) onClick(event as any);\n            break;\n          case 'ArrowDown': {\n            event.preventDefault();\n            // Focus next menu item\n            const nextItem = (event.currentTarget as HTMLElement).nextElementSibling?.querySelector(\n              '[role=\"menuitem\"]',\n            ) as HTMLElement;\n            if (nextItem) nextItem.focus();\n            break;\n          }\n          case 'ArrowUp': {\n            event.preventDefault();\n            // Focus previous menu item\n            const prevItem = (\n              event.currentTarget as HTMLElement\n            ).previousElementSibling?.querySelector('[role=\"menuitem\"]') as HTMLElement;\n            if (prevItem) prevItem.focus();\n            break;\n          }\n        }\n        onKeyDown?.(event);\n      },\n      [onClick, onKeyDown],\n    );\n\n    return (\n      <Comp\n        {...props}\n        ref={forwardedRef}\n        role=\"menuitem\"\n        aria-current={isActive ? 'page' : undefined}\n        className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-SidebarMenuButton', className)}\n        data-active={isActive || undefined}\n        data-highlighted={isHighlighted || undefined}\n        onKeyDown={handleKeyDown}\n        onMouseEnter={(event) => {\n          setIsHighlighted(true);\n          onMouseEnter?.(event);\n        }}\n        onMouseLeave={(event) => {\n          setIsHighlighted(false);\n          onMouseLeave?.(event);\n        }}\n      >\n        {asChild ? (\n          children\n        ) : (\n          <>\n            {children}\n            {/* Badge with soft variant default and size mapping to sidebar size */}\n            {badge && (\n              <div className=\"rt-SidebarMenuBadge\">\n                {typeof badge === 'string' ? (\n                  <Badge size={sidebarSize} variant=\"soft\">\n                    {badge}\n                  </Badge>\n                ) : (\n                  <Badge\n                    size={badge.size || sidebarSize}\n                    variant={badge.variant || 'soft'}\n                    color={badge.color}\n                    highContrast={badge.highContrast}\n                    radius={badge.radius}\n                  >\n                    {badge.content}\n                  </Badge>\n                )}\n              </div>\n            )}\n            {shortcut && (\n              <div className=\"rt-BaseMenuShortcut rt-SidebarMenuShortcut\">\n                <Kbd size={sidebarSize}>{shortcut}</Kbd>\n              </div>\n            )}\n          </>\n        )}\n      </Comp>\n    );\n  },\n);\nSidebarMenuButton.displayName = 'Sidebar.MenuButton';\n\n// Sub-menu components using Radix Accordion\ninterface SidebarMenuSubProps extends React.ComponentPropsWithoutRef<'div'> {\n  defaultOpen?: boolean;\n}\n\nconst SidebarMenuSub = React.forwardRef<HTMLDivElement, SidebarMenuSubProps>(\n  ({ defaultOpen = false, children, ...props }, forwardedRef) => {\n    return (\n      <div {...props} ref={forwardedRef}>\n        <Accordion.Root type=\"single\" collapsible defaultValue={defaultOpen ? 'item' : undefined}>\n          <Accordion.Item value=\"item\">{children}</Accordion.Item>\n        </Accordion.Root>\n      </div>\n    );\n  },\n);\nSidebarMenuSub.displayName = 'Sidebar.MenuSub';\n\ninterface SidebarMenuSubTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof Accordion.Trigger> {\n  asChild?: boolean;\n}\n\nconst SidebarMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof Accordion.Trigger>,\n  SidebarMenuSubTriggerProps\n>(\n  (\n    { asChild = false, className, children, onMouseEnter, onMouseLeave, ...props },\n    forwardedRef,\n  ) => {\n    const [isHighlighted, setIsHighlighted] = React.useState(false);\n\n    return (\n      <Accordion.Header asChild>\n        <div>\n          <Accordion.Trigger\n            {...props}\n            ref={forwardedRef}\n            asChild={asChild}\n            role=\"menuitem\"\n            aria-haspopup=\"true\"\n            className={classNames(\n              'rt-reset',\n              'rt-BaseMenuItem',\n              'rt-SidebarMenuButton',\n              'rt-SidebarMenuSubTrigger',\n              className,\n            )}\n            data-highlighted={isHighlighted || undefined}\n            onMouseEnter={(event) => {\n              setIsHighlighted(true);\n              onMouseEnter?.(event);\n            }}\n            onMouseLeave={(event) => {\n              setIsHighlighted(false);\n              onMouseLeave?.(event);\n            }}\n          >\n            {asChild ? (\n              children\n            ) : (\n              <>\n                {children}\n                <ThickChevronRightIcon\n                  className={classNames(\n                    'rt-BaseMenuSubTriggerIcon',\n                    'rt-SidebarMenuSubTriggerIcon',\n                  )}\n                />\n              </>\n            )}\n          </Accordion.Trigger>\n        </div>\n      </Accordion.Header>\n    );\n  },\n);\nSidebarMenuSubTrigger.displayName = 'Sidebar.MenuSubTrigger';\n\ninterface SidebarMenuSubContentProps\n  extends React.ComponentPropsWithoutRef<typeof Accordion.Content> {}\n\nconst SidebarMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof Accordion.Content>,\n  SidebarMenuSubContentProps\n>(({ className, children, ...props }, forwardedRef) => {\n  return (\n    <Accordion.Content\n      {...props}\n      ref={forwardedRef}\n      className={classNames('rt-SidebarMenuSubContent', className)}\n    >\n      <div className=\"rt-SidebarMenuSubList\">{children}</div>\n    </Accordion.Content>\n  );\n});\nSidebarMenuSubContent.displayName = 'Sidebar.MenuSubContent';\n\n// Group components\ninterface SidebarGroupProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarGroup = React.forwardRef<HTMLDivElement, SidebarGroupProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <div\n      {...props}\n      ref={forwardedRef}\n      className={classNames('rt-BaseMenuGroup', 'rt-SidebarGroup', className)}\n    />\n  ),\n);\nSidebarGroup.displayName = 'Sidebar.Group';\n\ninterface SidebarGroupLabelProps extends React.ComponentPropsWithoutRef<'div'> {\n  asChild?: boolean;\n}\n\nconst SidebarGroupLabel = React.forwardRef<HTMLDivElement, SidebarGroupLabelProps>(\n  ({ asChild = false, className, ...props }, forwardedRef) => {\n    const Comp = asChild ? Slot : 'div';\n\n    return (\n      <Comp\n        {...props}\n        ref={forwardedRef}\n        role=\"group\"\n        className={classNames('rt-BaseMenuLabel', 'rt-SidebarGroupLabel', className)}\n      />\n    );\n  },\n);\nSidebarGroupLabel.displayName = 'Sidebar.GroupLabel';\n\ninterface SidebarGroupContentProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarGroupContent = React.forwardRef<HTMLDivElement, SidebarGroupContentProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <div\n      {...props}\n      ref={forwardedRef}\n      className={classNames('rt-SidebarGroupContent', className)}\n    />\n  ),\n);\nSidebarGroupContent.displayName = 'Sidebar.GroupContent';\n\n// Export all components following shadcn's pattern\nexport {\n  Sidebar as Root,\n  SidebarContent as Content,\n  SidebarHeader as Header,\n  SidebarFooter as Footer,\n  SidebarSeparator as Separator,\n  SidebarMenu as Menu,\n  SidebarMenuItem as MenuItem,\n  SidebarMenuButton as MenuButton,\n  SidebarMenuSub as MenuSub,\n  SidebarMenuSubTrigger as MenuSubTrigger,\n  SidebarMenuSubContent as MenuSubContent,\n  SidebarGroup as Group,\n  SidebarGroupLabel as GroupLabel,\n  SidebarGroupContent as GroupContent,\n};\n\n/**\n * Enhanced Sidebar Header and Footer Usage Examples:\n *\n * 1. Simple default container (backwards compatible):\n * <Sidebar.Header>\n *   <Logo />\n *   <span>App Name</span>\n * </Sidebar.Header>\n *\n * 2. Custom flex layout:\n * <Sidebar.Header className=\"rt-justify-between rt-gap-3\">\n *   <Logo />\n *   <Sidebar.MenuButton>\n *     <SettingsIcon />\n *   </Sidebar.MenuButton>\n * </Sidebar.Header>\n *\n * 3. Column layout for multiple rows:\n * <Sidebar.Header className=\"rt-flex-col rt-gap-2\" asContainer={false}>\n *   <div className=\"rt-flex rt-items-center rt-gap-2\">\n *     <Logo />\n *     <span>App Name</span>\n *   </div>\n *   <Sidebar.MenuButton>\n *     <UserAvatar />\n *     <span>John Doe</span>\n *   </Sidebar.MenuButton>\n * </Sidebar.Header>\n *\n * 4. Interactive footer with menu button:\n * <Sidebar.Footer>\n *   <Sidebar.MenuButton>\n *     <UserIcon />\n *     <span>Settings</span>\n *     <ChevronUpIcon />\n *   </Sidebar.MenuButton>\n * </Sidebar.Footer>\n *\n * 5. Custom footer layout:\n * <Sidebar.Footer className=\"rt-justify-between\">\n *   <span>v1.0.0</span>\n *   <Sidebar.MenuButton>\n *     <HelpIcon />\n *   </Sidebar.MenuButton>\n * </Sidebar.Footer>\n *\n * Available utility classes:\n * - Layout: rt-flex-row, rt-flex-col\n * - Alignment: rt-items-center, rt-items-start, rt-items-end\n * - Justification: rt-justify-between, rt-justify-center, rt-justify-start, rt-justify-end\n * - Gap: rt-gap-1, rt-gap-2, rt-gap-3, rt-gap-4\n */\n\nexport type {\n  SidebarProps as RootProps,\n  SidebarContentProps as ContentProps,\n  SidebarHeaderProps as HeaderProps,\n  SidebarFooterProps as FooterProps,\n  BadgeConfig,\n};\n"],
+  "mappings": "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",
+  "names": ["React", "classNames", "Slot", "Accordion", "sidebarPropDefs", "useThemeContext", "ScrollArea", "Separator", "ThickChevronRightIcon", "extractProps", "Kbd", "Badge", "SidebarVisualContext", "useSidebarVisual", "Sidebar", "props", "forwardedRef", "themeContext", "size", "variant", "menuVariant", "layout", "panelBackground", "color", "highContrast", "className", "children", "rootProps", "_", "__", "safeRootProps", "resolvedColor", "resolvedLayout", "resolvedSize", "SidebarContent", "role", "ariaLabel", "id", "visual", "SidebarHeader", "asContainer", "SidebarFooter", "SidebarSeparator", "SidebarMenu", "SidebarMenuItem", "SidebarMenuButton", "asChild", "isActive", "shortcut", "badge", "onMouseEnter", "onMouseLeave", "onKeyDown", "isHighlighted", "setIsHighlighted", "sidebarSize", "Comp", "onClick", "handleKeyDown", "event", "nextItem", "prevItem", "SidebarMenuSub", "defaultOpen", "SidebarMenuSubTrigger", "SidebarMenuSubContent", "SidebarGroup", "SidebarGroupLabel", "SidebarGroupContent"]
 }

package/dist/esm/components/theme.d.ts

@@ -9,6 +9,7 @@ type ThemeMaterial = (typeof themePropDefs.material.values)[number];
 type ThemePanelBackground = (typeof themePropDefs.panelBackground.values)[number];
 type ThemeRadius = (typeof themePropDefs.radius.values)[number];
 type ThemeScaling = (typeof themePropDefs.scaling.values)[number];
+type ThemeFontFamily = (typeof themePropDefs.fontFamily.values)[number];
 interface ThemeChangeHandlers {
     onAppearanceChange: (appearance: ThemeAppearance) => void;
     onAccentColorChange: (accentColor: ThemeAccentColor) => void;
@@ -17,6 +18,7 @@ interface ThemeChangeHandlers {
     onPanelBackgroundChange: (panelBackground: ThemePanelBackground) => void;
     onRadiusChange: (radius: ThemeRadius) => void;
     onScalingChange: (scaling: ThemeScaling) => void;
+    onFontFamilyChange: (fontFamily: ThemeFontFamily) => void;
 }
 interface ThemeContextValue extends ThemeChangeHandlers {
     appearance: ThemeAppearance;
@@ -27,6 +29,7 @@ interface ThemeContextValue extends ThemeChangeHandlers {
     panelBackground: ThemePanelBackground;
     radius: ThemeRadius;
     scaling: ThemeScaling;
+    fontFamily: ThemeFontFamily;
 }
 declare const ThemeContext: React.Context<ThemeContextValue | undefined>;
 declare function useThemeContext(): ThemeContextValue;

package/dist/esm/components/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/components/theme.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAIzF,KAAK,eAAe,GAAG,CAAC,OAAO,aAAa,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AACxE,KAAK,gBAAgB,GAAG,CAAC,OAAO,aAAa,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAC1E,KAAK,cAAc,GAAG,CAAC,OAAO,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AACtE,KAAK,aAAa,GAAG,CAAC,OAAO,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AACpE,KAAK,oBAAoB,GAAG,CAAC,OAAO,aAAa,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAClF,KAAK,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAChE,KAAK,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAElE,UAAU,mBAAmB;IAC3B,kBAAkB,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1D,mBAAmB,EAAE,CAAC,WAAW,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7D,iBAAiB,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;IACvD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IACpD,uBAAuB,EAAE,CAAC,eAAe,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACzE,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;CAClD;AAED,UAAU,iBAAkB,SAAQ,mBAAmB;IACrD,UAAU,EAAE,eAAe,CAAC;IAC5B,WAAW,EAAE,gBAAgB,CAAC;IAC9B,SAAS,EAAE,cAAc,CAAC;IAC1B,iBAAiB,EAAE,cAAc,CAAC;IAClC,QAAQ,EAAE,aAAa,CAAC;IACxB,eAAe,EAAE,oBAAoB,CAAC;IACtC,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,YAAY,CAAC;CACvB;AACD,QAAA,MAAM,YAAY,8CAAgE,CAAC;AAEnF,iBAAS,eAAe,sBAMvB;AAED,UAAU,UAAW,SAAQ,oBAAoB;CAAG;AACpD,QAAA,MAAM,KAAK,mFAaT,CAAC;AAiFH,UAAU,oBACR,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,GAAG,KAAK,CAAC,EACxD,aAAa;CAAG;AAuGpB,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,CAAC;AAChD,YAAY,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/components/theme.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAIzF,KAAK,eAAe,GAAG,CAAC,OAAO,aAAa,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AACxE,KAAK,gBAAgB,GAAG,CAAC,OAAO,aAAa,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAC1E,KAAK,cAAc,GAAG,CAAC,OAAO,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AACtE,KAAK,aAAa,GAAG,CAAC,OAAO,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AACpE,KAAK,oBAAoB,GAAG,CAAC,OAAO,aAAa,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAClF,KAAK,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAChE,KAAK,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAClE,KAAK,eAAe,GAAG,CAAC,OAAO,aAAa,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAExE,UAAU,mBAAmB;IAC3B,kBAAkB,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1D,mBAAmB,EAAE,CAAC,WAAW,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7D,iBAAiB,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;IACvD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IACpD,uBAAuB,EAAE,CAAC,eAAe,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACzE,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACjD,kBAAkB,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;CAC3D;AAED,UAAU,iBAAkB,SAAQ,mBAAmB;IACrD,UAAU,EAAE,eAAe,CAAC;IAC5B,WAAW,EAAE,gBAAgB,CAAC;IAC9B,SAAS,EAAE,cAAc,CAAC;IAC1B,iBAAiB,EAAE,cAAc,CAAC;IAClC,QAAQ,EAAE,aAAa,CAAC;IACxB,eAAe,EAAE,oBAAoB,CAAC;IACtC,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,YAAY,CAAC;IACtB,UAAU,EAAE,eAAe,CAAC;CAC7B;AACD,QAAA,MAAM,YAAY,8CAAgE,CAAC;AAEnF,iBAAS,eAAe,sBAMvB;AAED,UAAU,UAAW,SAAQ,oBAAoB;CAAG;AACpD,QAAA,MAAM,KAAK,mFAaT,CAAC;AAuFH,UAAU,oBACR,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,GAAG,KAAK,CAAC,EACxD,aAAa;CAAG;AA8GpB,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,CAAC;AAChD,YAAY,EAAE,UAAU,EAAE,CAAC"}

package/dist/esm/components/theme.js

@@ -1,2 +1,2 @@
-"use client";import*as e from"react";import M from"classnames";import{Direction as w,Slot as N,Tooltip as H}from"radix-ui";import{getMatchingGrayColor as W}from"../helpers/get-matching-gray-color.js";import{themePropDefs as o}from"./theme.props.js";const c=()=>{},k=e.createContext(void 0);function j(){const a=e.useContext(k);if(a===void 0)throw new Error("`useThemeContext` must be used within a `Theme`");return a}const G=e.forwardRef((a,s)=>e.useContext(k)===void 0?e.createElement(H.Provider,{delayDuration:200},e.createElement(w.Provider,{dir:"ltr"},e.createElement(D,{...a,ref:s}))):e.createElement(S,{...a,ref:s}));G.displayName="Theme";const D=e.forwardRef((a,s)=>{const{appearance:r=o.appearance.default,accentColor:i=o.accentColor.default,grayColor:m=o.grayColor.default,material:h=o.material.default,panelBackground:l=o.panelBackground.default,radius:n=o.radius.default,scaling:t=o.scaling.default,hasBackground:g=o.hasBackground.default,...f}=a;e.useEffect(()=>{a.panelBackground!==void 0&&console.warn("Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.")},[a.panelBackground]);const[C,d]=e.useState(r);e.useEffect(()=>d(r),[r]);const[B,T]=e.useState(i);e.useEffect(()=>T(i),[i]);const[x,P]=e.useState(m);e.useEffect(()=>P(m),[m]);const p=h!==o.material.default?h:l,[u,y]=e.useState(p);e.useEffect(()=>y(p),[p]);const[b,A]=e.useState(l);e.useEffect(()=>A(u),[u]);const[v,E]=e.useState(n);e.useEffect(()=>E(n),[n]);const[R,I]=e.useState(t);return e.useEffect(()=>I(t),[t]),e.createElement(S,{...f,ref:s,isRoot:!0,hasBackground:g,appearance:C,accentColor:B,grayColor:x,material:u,panelBackground:b,radius:v,scaling:R,onAppearanceChange:d,onAccentColorChange:T,onGrayColorChange:P,onMaterialChange:y,onPanelBackgroundChange:A,onRadiusChange:E,onScalingChange:I})});D.displayName="ThemeRoot";const S=e.forwardRef((a,s)=>{const r=e.useContext(k),{asChild:i,isRoot:m,hasBackground:h,appearance:l=a.appearance??r?.appearance??o.appearance.default,accentColor:n=a.accentColor??r?.accentColor??o.accentColor.default,grayColor:t=a.grayColor??r?.resolvedGrayColor??o.grayColor.default,material:g=a.material??r?.material??o.material.default,panelBackground:f=a.panelBackground??r?.panelBackground??o.panelBackground.default,radius:C=a.radius??r?.radius??o.radius.default,scaling:d=a.scaling??r?.scaling??o.scaling.default,onAppearanceChange:B=c,onAccentColorChange:T=c,onGrayColorChange:x=c,onMaterialChange:P=c,onPanelBackgroundChange:p=c,onRadiusChange:u=c,onScalingChange:y=c,...b}=a,A=i?N.Root:"div",v=t==="auto"?W(n):t,E=a.appearance==="light"||a.appearance==="dark",R=h===void 0?m||E:h;return e.createElement(k.Provider,{value:e.useMemo(()=>({appearance:l,accentColor:n,grayColor:t,resolvedGrayColor:v,material:g,panelBackground:f,radius:C,scaling:d,onAppearanceChange:B,onAccentColorChange:T,onGrayColorChange:x,onMaterialChange:P,onPanelBackgroundChange:p,onRadiusChange:u,onScalingChange:y}),[l,n,t,v,g,f,C,d,B,T,x,P,p,u,y])},e.createElement(A,{"data-is-root-theme":m?"true":"false","data-accent-color":n,"data-gray-color":v,"data-has-background":R?"true":"false","data-material":g,"data-panel-background":f,"data-radius":C,"data-scaling":d,ref:s,...b,className:M("radix-themes",{light:l==="light",dark:l==="dark"},b.className)}))});S.displayName="ThemeImpl";export{G as Theme,k as ThemeContext,j as useThemeContext};
+"use client";import*as e from"react";import N from"classnames";import{Direction as H,Slot as W,Tooltip as j}from"radix-ui";import{getMatchingGrayColor as O}from"../helpers/get-matching-gray-color.js";import{themePropDefs as o}from"./theme.props.js";const l=()=>{},F=e.createContext(void 0);function V(){const a=e.useContext(F);if(a===void 0)throw new Error("`useThemeContext` must be used within a `Theme`");return a}const G=e.forwardRef((a,s)=>e.useContext(F)===void 0?e.createElement(j.Provider,{delayDuration:200},e.createElement(H.Provider,{dir:"ltr"},e.createElement(M,{...a,ref:s}))):e.createElement(I,{...a,ref:s}));G.displayName="Theme";const M=e.forwardRef((a,s)=>{const{appearance:n=o.appearance.default,accentColor:m=o.accentColor.default,grayColor:d=o.grayColor.default,material:g=o.material.default,panelBackground:i=o.panelBackground.default,radius:r=o.radius.default,scaling:t=o.scaling.default,fontFamily:c=o.fontFamily.default,hasBackground:C=o.hasBackground.default,...y}=a;e.useEffect(()=>{a.panelBackground!==void 0&&console.warn("Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.")},[a.panelBackground]);const[T,u]=e.useState(n);e.useEffect(()=>u(n),[n]);const[x,P]=e.useState(m);e.useEffect(()=>P(m),[m]);const[b,v]=e.useState(d);e.useEffect(()=>v(d),[d]);const p=g!==o.material.default?g:i,[h,k]=e.useState(p);e.useEffect(()=>k(p),[p]);const[E,B]=e.useState(i);e.useEffect(()=>B(h),[h]);const[A,f]=e.useState(r);e.useEffect(()=>f(r),[r]);const[R,S]=e.useState(t);e.useEffect(()=>S(t),[t]);const[w,D]=e.useState(c);return e.useEffect(()=>D(c),[c]),e.createElement(I,{...y,ref:s,isRoot:!0,hasBackground:C,appearance:T,accentColor:x,grayColor:b,material:h,panelBackground:E,radius:A,scaling:R,fontFamily:w,onAppearanceChange:u,onAccentColorChange:P,onGrayColorChange:v,onMaterialChange:k,onPanelBackgroundChange:B,onRadiusChange:f,onScalingChange:S,onFontFamilyChange:D})});M.displayName="ThemeRoot";const I=e.forwardRef((a,s)=>{const n=e.useContext(F),{asChild:m,isRoot:d,hasBackground:g,appearance:i=a.appearance??n?.appearance??o.appearance.default,accentColor:r=a.accentColor??n?.accentColor??o.accentColor.default,grayColor:t=a.grayColor??n?.resolvedGrayColor??o.grayColor.default,material:c=a.material??n?.material??o.material.default,panelBackground:C=a.panelBackground??n?.panelBackground??o.panelBackground.default,radius:y=a.radius??n?.radius??o.radius.default,scaling:T=a.scaling??n?.scaling??o.scaling.default,fontFamily:u=a.fontFamily??n?.fontFamily??o.fontFamily.default,onAppearanceChange:x=l,onAccentColorChange:P=l,onGrayColorChange:b=l,onMaterialChange:v=l,onPanelBackgroundChange:p=l,onRadiusChange:h=l,onScalingChange:k=l,onFontFamilyChange:E=l,...B}=a,A=m?W.Root:"div",f=t==="auto"?O(r):t,R=a.appearance==="light"||a.appearance==="dark",S=g===void 0?d||R:g;return e.createElement(F.Provider,{value:e.useMemo(()=>({appearance:i,accentColor:r,grayColor:t,resolvedGrayColor:f,material:c,panelBackground:C,radius:y,scaling:T,fontFamily:u,onAppearanceChange:x,onAccentColorChange:P,onGrayColorChange:b,onMaterialChange:v,onPanelBackgroundChange:p,onRadiusChange:h,onScalingChange:k,onFontFamilyChange:E}),[i,r,t,f,c,C,y,T,u,x,P,b,v,p,h,k,E])},e.createElement(A,{"data-is-root-theme":d?"true":"false","data-accent-color":r,"data-gray-color":f,"data-has-background":S?"true":"false","data-material":c,"data-panel-background":C,"data-radius":y,"data-scaling":T,"data-font-family":u,ref:s,...B,className:N("radix-themes",{light:i==="light",dark:i==="dark"},B.className)}))});I.displayName="ThemeImpl";export{G as Theme,F as ThemeContext,V as useThemeContext};
 //# sourceMappingURL=theme.js.map

package/dist/esm/components/theme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/theme.tsx"],
-  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Direction, Slot, Tooltip as TooltipPrimitive } from 'radix-ui';\n\nimport { getMatchingGrayColor } from '../helpers/get-matching-gray-color.js';\nimport { themePropDefs } from './theme.props.js';\n\nimport type { ThemeOwnProps } from './theme.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\n\nconst noop = () => {};\n\ntype ThemeAppearance = (typeof themePropDefs.appearance.values)[number];\ntype ThemeAccentColor = (typeof themePropDefs.accentColor.values)[number];\ntype ThemeGrayColor = (typeof themePropDefs.grayColor.values)[number];\ntype ThemeMaterial = (typeof themePropDefs.material.values)[number];\ntype ThemePanelBackground = (typeof themePropDefs.panelBackground.values)[number];\ntype ThemeRadius = (typeof themePropDefs.radius.values)[number];\ntype ThemeScaling = (typeof themePropDefs.scaling.values)[number];\n\ninterface ThemeChangeHandlers {\n  onAppearanceChange: (appearance: ThemeAppearance) => void;\n  onAccentColorChange: (accentColor: ThemeAccentColor) => void;\n  onGrayColorChange: (grayColor: ThemeGrayColor) => void;\n  onMaterialChange: (material: ThemeMaterial) => void;\n  onPanelBackgroundChange: (panelBackground: ThemePanelBackground) => void;\n  onRadiusChange: (radius: ThemeRadius) => void;\n  onScalingChange: (scaling: ThemeScaling) => void;\n}\n\ninterface ThemeContextValue extends ThemeChangeHandlers {\n  appearance: ThemeAppearance;\n  accentColor: ThemeAccentColor;\n  grayColor: ThemeGrayColor;\n  resolvedGrayColor: ThemeGrayColor;\n  material: ThemeMaterial;\n  panelBackground: ThemePanelBackground;\n  radius: ThemeRadius;\n  scaling: ThemeScaling;\n}\nconst ThemeContext = React.createContext<ThemeContextValue | undefined>(undefined);\n\nfunction useThemeContext() {\n  const context = React.useContext(ThemeContext);\n  if (context === undefined) {\n    throw new Error('`useThemeContext` must be used within a `Theme`');\n  }\n  return context;\n}\n\ninterface ThemeProps extends ThemeImplPublicProps {}\nconst Theme = React.forwardRef<ThemeImplElement, ThemeProps>((props, forwardedRef) => {\n  const context = React.useContext(ThemeContext);\n  const isRoot = context === undefined;\n  if (isRoot) {\n    return (\n      <TooltipPrimitive.Provider delayDuration={200}>\n        <Direction.Provider dir=\"ltr\">\n          <ThemeRoot {...props} ref={forwardedRef} />\n        </Direction.Provider>\n      </TooltipPrimitive.Provider>\n    );\n  }\n  return <ThemeImpl {...props} ref={forwardedRef} />;\n});\nTheme.displayName = 'Theme';\n\nconst ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(\n  (props, forwardedRef) => {\n    const {\n      appearance: appearanceProp = themePropDefs.appearance.default,\n      accentColor: accentColorProp = themePropDefs.accentColor.default,\n      grayColor: grayColorProp = themePropDefs.grayColor.default,\n      material: materialProp = themePropDefs.material.default,\n      panelBackground: panelBackgroundProp = themePropDefs.panelBackground.default,\n      radius: radiusProp = themePropDefs.radius.default,\n      scaling: scalingProp = themePropDefs.scaling.default,\n      hasBackground = themePropDefs.hasBackground.default,\n      ...rootProps\n    } = props;\n\n    // Show deprecation warning for panelBackground when used\n    React.useEffect(() => {\n      if (props.panelBackground !== undefined) {\n        console.warn(\n          'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',\n        );\n      }\n    }, [props.panelBackground]);\n\n    const [appearance, setAppearance] = React.useState(appearanceProp);\n    React.useEffect(() => setAppearance(appearanceProp), [appearanceProp]);\n\n    const [accentColor, setAccentColor] = React.useState(accentColorProp);\n    React.useEffect(() => setAccentColor(accentColorProp), [accentColorProp]);\n\n    const [grayColor, setGrayColor] = React.useState(grayColorProp);\n    React.useEffect(() => setGrayColor(grayColorProp), [grayColorProp]);\n\n    // Material takes precedence over panelBackground\n    const effectiveMaterial =\n      materialProp !== themePropDefs.material.default ? materialProp : panelBackgroundProp;\n    const [material, setMaterial] = React.useState(effectiveMaterial);\n    React.useEffect(() => setMaterial(effectiveMaterial), [effectiveMaterial]);\n\n    // Keep panelBackground in sync with material for backward compatibility\n    const [panelBackground, setPanelBackground] = React.useState(panelBackgroundProp);\n    React.useEffect(() => setPanelBackground(material), [material]);\n\n    const [radius, setRadius] = React.useState(radiusProp);\n    React.useEffect(() => setRadius(radiusProp), [radiusProp]);\n\n    const [scaling, setScaling] = React.useState(scalingProp);\n    React.useEffect(() => setScaling(scalingProp), [scalingProp]);\n\n    return (\n      <ThemeImpl\n        {...rootProps}\n        ref={forwardedRef}\n        isRoot\n        hasBackground={hasBackground}\n        //\n        appearance={appearance}\n        accentColor={accentColor}\n        grayColor={grayColor}\n        material={material}\n        panelBackground={panelBackground}\n        radius={radius}\n        scaling={scaling}\n        //\n        onAppearanceChange={setAppearance}\n        onAccentColorChange={setAccentColor}\n        onGrayColorChange={setGrayColor}\n        onMaterialChange={setMaterial}\n        onPanelBackgroundChange={setPanelBackground}\n        onRadiusChange={setRadius}\n        onScalingChange={setScaling}\n      />\n    );\n  },\n);\nThemeRoot.displayName = 'ThemeRoot';\n\ntype ThemeImplElement = React.ElementRef<'div'>;\ninterface ThemeImplProps extends ThemeImplPublicProps, ThemeImplPrivateProps {}\ninterface ThemeImplPublicProps\n  extends ComponentPropsWithout<'div', RemovedProps | 'dir'>,\n    ThemeOwnProps {}\ninterface ThemeImplPrivateProps extends Partial<ThemeChangeHandlers> {\n  isRoot?: boolean;\n}\nconst ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, forwardedRef) => {\n  const context = React.useContext(ThemeContext);\n  const {\n    asChild,\n    isRoot,\n    hasBackground: hasBackgroundProp,\n    //\n    appearance = props.appearance ?? context?.appearance ?? themePropDefs.appearance.default,\n    accentColor = props.accentColor ?? context?.accentColor ?? themePropDefs.accentColor.default,\n    grayColor = props.grayColor ?? context?.resolvedGrayColor ?? themePropDefs.grayColor.default,\n    material = props.material ?? context?.material ?? themePropDefs.material.default,\n    panelBackground = props.panelBackground ??\n      context?.panelBackground ??\n      themePropDefs.panelBackground.default,\n    radius = props.radius ?? context?.radius ?? themePropDefs.radius.default,\n    scaling = props.scaling ?? context?.scaling ?? themePropDefs.scaling.default,\n    //\n    onAppearanceChange = noop,\n    onAccentColorChange = noop,\n    onGrayColorChange = noop,\n    onMaterialChange = noop,\n    onPanelBackgroundChange = noop,\n    onRadiusChange = noop,\n    onScalingChange = noop,\n    //\n    ...themeProps\n  } = props;\n  const Comp = asChild ? Slot.Root : 'div';\n  const resolvedGrayColor = grayColor === 'auto' ? getMatchingGrayColor(accentColor) : grayColor;\n  const isExplicitAppearance = props.appearance === 'light' || props.appearance === 'dark';\n  const hasBackground =\n    hasBackgroundProp === undefined ? isRoot || isExplicitAppearance : hasBackgroundProp;\n  return (\n    <ThemeContext.Provider\n      value={React.useMemo(\n        () => ({\n          appearance,\n          accentColor,\n          grayColor,\n          resolvedGrayColor,\n          material,\n          panelBackground,\n          radius,\n          scaling,\n          //\n          onAppearanceChange,\n          onAccentColorChange,\n          onGrayColorChange,\n          onMaterialChange,\n          onPanelBackgroundChange,\n          onRadiusChange,\n          onScalingChange,\n        }),\n        [\n          appearance,\n          accentColor,\n          grayColor,\n          resolvedGrayColor,\n          material,\n          panelBackground,\n          radius,\n          scaling,\n          //\n          onAppearanceChange,\n          onAccentColorChange,\n          onGrayColorChange,\n          onMaterialChange,\n          onPanelBackgroundChange,\n          onRadiusChange,\n          onScalingChange,\n        ],\n      )}\n    >\n      <Comp\n        data-is-root-theme={isRoot ? 'true' : 'false'}\n        data-accent-color={accentColor}\n        data-gray-color={resolvedGrayColor}\n        // for nested `Theme` background\n        data-has-background={hasBackground ? 'true' : 'false'}\n        data-material={material}\n        data-panel-background={panelBackground}\n        data-radius={radius}\n        data-scaling={scaling}\n        ref={forwardedRef}\n        {...themeProps}\n        className={classNames(\n          'radix-themes',\n          {\n            light: appearance === 'light',\n            dark: appearance === 'dark',\n          },\n          themeProps.className,\n        )}\n      />\n    </ThemeContext.Provider>\n  );\n});\nThemeImpl.displayName = 'ThemeImpl';\n\nexport { Theme, ThemeContext, useThemeContext };\nexport type { ThemeProps };\n"],
-  "mappings": "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",
-  "names": ["React", "classNames", "Direction", "Slot", "TooltipPrimitive", "getMatchingGrayColor", "themePropDefs", "noop", "ThemeContext", "useThemeContext", "context", "Theme", "props", "forwardedRef", "ThemeRoot", "ThemeImpl", "appearanceProp", "accentColorProp", "grayColorProp", "materialProp", "panelBackgroundProp", "radiusProp", "scalingProp", "hasBackground", "rootProps", "appearance", "setAppearance", "accentColor", "setAccentColor", "grayColor", "setGrayColor", "effectiveMaterial", "material", "setMaterial", "panelBackground", "setPanelBackground", "radius", "setRadius", "scaling", "setScaling", "asChild", "isRoot", "hasBackgroundProp", "onAppearanceChange", "onAccentColorChange", "onGrayColorChange", "onMaterialChange", "onPanelBackgroundChange", "onRadiusChange", "onScalingChange", "themeProps", "Comp", "resolvedGrayColor", "isExplicitAppearance"]
+  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Direction, Slot, Tooltip as TooltipPrimitive } from 'radix-ui';\n\nimport { getMatchingGrayColor } from '../helpers/get-matching-gray-color.js';\nimport { themePropDefs } from './theme.props.js';\n\nimport type { ThemeOwnProps } from './theme.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\n\nconst noop = () => {};\n\ntype ThemeAppearance = (typeof themePropDefs.appearance.values)[number];\ntype ThemeAccentColor = (typeof themePropDefs.accentColor.values)[number];\ntype ThemeGrayColor = (typeof themePropDefs.grayColor.values)[number];\ntype ThemeMaterial = (typeof themePropDefs.material.values)[number];\ntype ThemePanelBackground = (typeof themePropDefs.panelBackground.values)[number];\ntype ThemeRadius = (typeof themePropDefs.radius.values)[number];\ntype ThemeScaling = (typeof themePropDefs.scaling.values)[number];\ntype ThemeFontFamily = (typeof themePropDefs.fontFamily.values)[number];\n\ninterface ThemeChangeHandlers {\n  onAppearanceChange: (appearance: ThemeAppearance) => void;\n  onAccentColorChange: (accentColor: ThemeAccentColor) => void;\n  onGrayColorChange: (grayColor: ThemeGrayColor) => void;\n  onMaterialChange: (material: ThemeMaterial) => void;\n  onPanelBackgroundChange: (panelBackground: ThemePanelBackground) => void;\n  onRadiusChange: (radius: ThemeRadius) => void;\n  onScalingChange: (scaling: ThemeScaling) => void;\n  onFontFamilyChange: (fontFamily: ThemeFontFamily) => void;\n}\n\ninterface ThemeContextValue extends ThemeChangeHandlers {\n  appearance: ThemeAppearance;\n  accentColor: ThemeAccentColor;\n  grayColor: ThemeGrayColor;\n  resolvedGrayColor: ThemeGrayColor;\n  material: ThemeMaterial;\n  panelBackground: ThemePanelBackground;\n  radius: ThemeRadius;\n  scaling: ThemeScaling;\n  fontFamily: ThemeFontFamily;\n}\nconst ThemeContext = React.createContext<ThemeContextValue | undefined>(undefined);\n\nfunction useThemeContext() {\n  const context = React.useContext(ThemeContext);\n  if (context === undefined) {\n    throw new Error('`useThemeContext` must be used within a `Theme`');\n  }\n  return context;\n}\n\ninterface ThemeProps extends ThemeImplPublicProps {}\nconst Theme = React.forwardRef<ThemeImplElement, ThemeProps>((props, forwardedRef) => {\n  const context = React.useContext(ThemeContext);\n  const isRoot = context === undefined;\n  if (isRoot) {\n    return (\n      <TooltipPrimitive.Provider delayDuration={200}>\n        <Direction.Provider dir=\"ltr\">\n          <ThemeRoot {...props} ref={forwardedRef} />\n        </Direction.Provider>\n      </TooltipPrimitive.Provider>\n    );\n  }\n  return <ThemeImpl {...props} ref={forwardedRef} />;\n});\nTheme.displayName = 'Theme';\n\nconst ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(\n  (props, forwardedRef) => {\n    const {\n      appearance: appearanceProp = themePropDefs.appearance.default,\n      accentColor: accentColorProp = themePropDefs.accentColor.default,\n      grayColor: grayColorProp = themePropDefs.grayColor.default,\n      material: materialProp = themePropDefs.material.default,\n      panelBackground: panelBackgroundProp = themePropDefs.panelBackground.default,\n      radius: radiusProp = themePropDefs.radius.default,\n      scaling: scalingProp = themePropDefs.scaling.default,\n      fontFamily: fontFamilyProp = themePropDefs.fontFamily.default,\n      hasBackground = themePropDefs.hasBackground.default,\n      ...rootProps\n    } = props;\n\n    // Show deprecation warning for panelBackground when used\n    React.useEffect(() => {\n      if (props.panelBackground !== undefined) {\n        console.warn(\n          'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',\n        );\n      }\n    }, [props.panelBackground]);\n\n    const [appearance, setAppearance] = React.useState(appearanceProp);\n    React.useEffect(() => setAppearance(appearanceProp), [appearanceProp]);\n\n    const [accentColor, setAccentColor] = React.useState(accentColorProp);\n    React.useEffect(() => setAccentColor(accentColorProp), [accentColorProp]);\n\n    const [grayColor, setGrayColor] = React.useState(grayColorProp);\n    React.useEffect(() => setGrayColor(grayColorProp), [grayColorProp]);\n\n    // Material takes precedence over panelBackground\n    const effectiveMaterial =\n      materialProp !== themePropDefs.material.default ? materialProp : panelBackgroundProp;\n    const [material, setMaterial] = React.useState(effectiveMaterial);\n    React.useEffect(() => setMaterial(effectiveMaterial), [effectiveMaterial]);\n\n    // Keep panelBackground in sync with material for backward compatibility\n    const [panelBackground, setPanelBackground] = React.useState(panelBackgroundProp);\n    React.useEffect(() => setPanelBackground(material), [material]);\n\n    const [radius, setRadius] = React.useState(radiusProp);\n    React.useEffect(() => setRadius(radiusProp), [radiusProp]);\n\n    const [scaling, setScaling] = React.useState(scalingProp);\n    React.useEffect(() => setScaling(scalingProp), [scalingProp]);\n\n    const [fontFamily, setFontFamily] = React.useState(fontFamilyProp);\n    React.useEffect(() => setFontFamily(fontFamilyProp), [fontFamilyProp]);\n\n    return (\n      <ThemeImpl\n        {...rootProps}\n        ref={forwardedRef}\n        isRoot\n        hasBackground={hasBackground}\n        //\n        appearance={appearance}\n        accentColor={accentColor}\n        grayColor={grayColor}\n        material={material}\n        panelBackground={panelBackground}\n        radius={radius}\n        scaling={scaling}\n        fontFamily={fontFamily}\n        //\n        onAppearanceChange={setAppearance}\n        onAccentColorChange={setAccentColor}\n        onGrayColorChange={setGrayColor}\n        onMaterialChange={setMaterial}\n        onPanelBackgroundChange={setPanelBackground}\n        onRadiusChange={setRadius}\n        onScalingChange={setScaling}\n        onFontFamilyChange={setFontFamily}\n      />\n    );\n  },\n);\nThemeRoot.displayName = 'ThemeRoot';\n\ntype ThemeImplElement = React.ElementRef<'div'>;\ninterface ThemeImplProps extends ThemeImplPublicProps, ThemeImplPrivateProps {}\ninterface ThemeImplPublicProps\n  extends ComponentPropsWithout<'div', RemovedProps | 'dir'>,\n    ThemeOwnProps {}\ninterface ThemeImplPrivateProps extends Partial<ThemeChangeHandlers> {\n  isRoot?: boolean;\n}\nconst ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, forwardedRef) => {\n  const context = React.useContext(ThemeContext);\n  const {\n    asChild,\n    isRoot,\n    hasBackground: hasBackgroundProp,\n    //\n    appearance = props.appearance ?? context?.appearance ?? themePropDefs.appearance.default,\n    accentColor = props.accentColor ?? context?.accentColor ?? themePropDefs.accentColor.default,\n    grayColor = props.grayColor ?? context?.resolvedGrayColor ?? themePropDefs.grayColor.default,\n    material = props.material ?? context?.material ?? themePropDefs.material.default,\n    panelBackground = props.panelBackground ??\n      context?.panelBackground ??\n      themePropDefs.panelBackground.default,\n    radius = props.radius ?? context?.radius ?? themePropDefs.radius.default,\n    scaling = props.scaling ?? context?.scaling ?? themePropDefs.scaling.default,\n    fontFamily = props.fontFamily ?? context?.fontFamily ?? themePropDefs.fontFamily.default,\n    //\n    onAppearanceChange = noop,\n    onAccentColorChange = noop,\n    onGrayColorChange = noop,\n    onMaterialChange = noop,\n    onPanelBackgroundChange = noop,\n    onRadiusChange = noop,\n    onScalingChange = noop,\n    onFontFamilyChange = noop,\n    //\n    ...themeProps\n  } = props;\n  const Comp = asChild ? Slot.Root : 'div';\n  const resolvedGrayColor = grayColor === 'auto' ? getMatchingGrayColor(accentColor) : grayColor;\n  const isExplicitAppearance = props.appearance === 'light' || props.appearance === 'dark';\n  const hasBackground =\n    hasBackgroundProp === undefined ? isRoot || isExplicitAppearance : hasBackgroundProp;\n  return (\n    <ThemeContext.Provider\n      value={React.useMemo(\n        () => ({\n          appearance,\n          accentColor,\n          grayColor,\n          resolvedGrayColor,\n          material,\n          panelBackground,\n          radius,\n          scaling,\n          fontFamily,\n          //\n          onAppearanceChange,\n          onAccentColorChange,\n          onGrayColorChange,\n          onMaterialChange,\n          onPanelBackgroundChange,\n          onRadiusChange,\n          onScalingChange,\n          onFontFamilyChange,\n        }),\n        [\n          appearance,\n          accentColor,\n          grayColor,\n          resolvedGrayColor,\n          material,\n          panelBackground,\n          radius,\n          scaling,\n          fontFamily,\n          //\n          onAppearanceChange,\n          onAccentColorChange,\n          onGrayColorChange,\n          onMaterialChange,\n          onPanelBackgroundChange,\n          onRadiusChange,\n          onScalingChange,\n          onFontFamilyChange,\n        ],\n      )}\n    >\n      <Comp\n        data-is-root-theme={isRoot ? 'true' : 'false'}\n        data-accent-color={accentColor}\n        data-gray-color={resolvedGrayColor}\n        // for nested `Theme` background\n        data-has-background={hasBackground ? 'true' : 'false'}\n        data-material={material}\n        data-panel-background={panelBackground}\n        data-radius={radius}\n        data-scaling={scaling}\n        data-font-family={fontFamily}\n        ref={forwardedRef}\n        {...themeProps}\n        className={classNames(\n          'radix-themes',\n          {\n            light: appearance === 'light',\n            dark: appearance === 'dark',\n          },\n          themeProps.className,\n        )}\n      />\n    </ThemeContext.Provider>\n  );\n});\nThemeImpl.displayName = 'ThemeImpl';\n\nexport { Theme, ThemeContext, useThemeContext };\nexport type { ThemeProps };\n"],
+  "mappings": "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",
+  "names": ["React", "classNames", "Direction", "Slot", "TooltipPrimitive", "getMatchingGrayColor", "themePropDefs", "noop", "ThemeContext", "useThemeContext", "context", "Theme", "props", "forwardedRef", "ThemeRoot", "ThemeImpl", "appearanceProp", "accentColorProp", "grayColorProp", "materialProp", "panelBackgroundProp", "radiusProp", "scalingProp", "fontFamilyProp", "hasBackground", "rootProps", "appearance", "setAppearance", "accentColor", "setAccentColor", "grayColor", "setGrayColor", "effectiveMaterial", "material", "setMaterial", "panelBackground", "setPanelBackground", "radius", "setRadius", "scaling", "setScaling", "fontFamily", "setFontFamily", "asChild", "isRoot", "hasBackgroundProp", "onAppearanceChange", "onAccentColorChange", "onGrayColorChange", "onMaterialChange", "onPanelBackgroundChange", "onRadiusChange", "onScalingChange", "onFontFamilyChange", "themeProps", "Comp", "resolvedGrayColor", "isExplicitAppearance"]
 }

package/dist/esm/components/theme.props.d.ts

@@ -92,6 +92,16 @@ declare const themePropDefs: {
         values: readonly ["90%", "95%", "100%", "105%", "110%"];
         default: "100%";
     };
+    /**
+     * Sets the font family for the theme.
+     *
+     * @default 'sans'
+     */
+    fontFamily: {
+        type: "enum";
+        values: readonly ["sans", "mono"];
+        default: "sans";
+    };
     asChild: {
         type: "boolean";
     };

package/dist/esm/components/theme.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.props.d.ts","sourceRoot":"","sources":["../../../src/components/theme.props.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAI3D,OAAO,KAAK,EAAE,eAAe,EAAW,MAAM,sBAAsB,CAAC;AAOrE,QAAA,MAAM,aAAa;IAEjB;;;;;OAKG;;;;;IAEH;;;;;OAKG;;;;;;IAEH;;;;;OAKG;;;;;;IAEH;;;;;OAKG;;;;;;IAEH;;;;;;OAMG;;;;;;IAEH;;;;;;;;OAQG;;;;;;IAEH;;;;;OAKG;;;;;;IAEH;;;;;OAKG;;;;;;;;;CAWJ,CAAC;AAEF,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,GAAG,OAAO,cAAc,CAAC,CAAC;AAEnF,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,YAAY,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"theme.props.d.ts","sourceRoot":"","sources":["../../../src/components/theme.props.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAI3D,OAAO,KAAK,EAAE,eAAe,EAAW,MAAM,sBAAsB,CAAC;AAQrE,QAAA,MAAM,aAAa;IAEjB;;;;;OAKG;;;;;IAEH;;;;;OAKG;;;;;;IAEH;;;;;OAKG;;;;;;IAEH;;;;;OAKG;;;;;;IAEH;;;;;;OAMG;;;;;;IAEH;;;;;;;;OAQG;;;;;;IAEH;;;;;OAKG;;;;;;IAEH;;;;;OAKG;;;;;;IAEH;;;;OAIG;;;;;;;;;CAYJ,CAAC;AAEF,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,GAAG,OAAO,cAAc,CAAC,CAAC;AAEnF,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/esm/components/theme.props.js

@@ -1,2 +1,2 @@
-import{asChildPropDef as e}from"../props/as-child.prop.js";import{accentColors as a,grayColors as o}from"../props/color.prop.js";import{radii as r}from"../props/radius.prop.js";const t=["inherit","light","dark"],p=["solid","translucent"],s=["solid","translucent"],n=["90%","95%","100%","105%","110%"],l={...e,hasBackground:{type:"boolean",default:!0},appearance:{type:"enum",values:t,default:"inherit"},accentColor:{type:"enum",values:a,default:"blue"},grayColor:{type:"enum",values:o,default:"slate"},material:{type:"enum",values:s,default:"translucent"},panelBackground:{type:"enum",values:p,default:"translucent"},radius:{type:"enum",values:r,default:"medium"},scaling:{type:"enum",values:n,default:"100%"}};export{l as themePropDefs};
+import{asChildPropDef as e}from"../props/as-child.prop.js";import{accentColors as a,grayColors as o}from"../props/color.prop.js";import{radii as t}from"../props/radius.prop.js";const r=["inherit","light","dark"],n=["solid","translucent"],s=["solid","translucent"],p=["90%","95%","100%","105%","110%"],l=["sans","mono"],u={...e,hasBackground:{type:"boolean",default:!0},appearance:{type:"enum",values:r,default:"inherit"},accentColor:{type:"enum",values:a,default:"blue"},grayColor:{type:"enum",values:o,default:"slate"},material:{type:"enum",values:s,default:"translucent"},panelBackground:{type:"enum",values:n,default:"translucent"},radius:{type:"enum",values:t,default:"medium"},scaling:{type:"enum",values:p,default:"100%"},fontFamily:{type:"enum",values:l,default:"sans"}};export{u as themePropDefs};
 //# sourceMappingURL=theme.props.js.map

package/dist/esm/components/theme.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/theme.props.tsx"],
-  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\nimport { accentColors, grayColors } from '../props/color.prop.js';\nimport { radii } from '../props/radius.prop.js';\n\nimport type { GetPropDefTypes, PropDef } from '../props/prop-def.js';\n\nconst appearances = ['inherit', 'light', 'dark'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\nconst materials = ['solid', 'translucent'] as const;\nconst scalings = ['90%', '95%', '100%', '105%', '110%'] as const;\n\nconst themePropDefs = {\n  ...asChildPropDef,\n  /**\n   * Whether to apply background color to the Theme element.\n   *\n   * Defaults to true for the root Theme and for Theme elements that\n   * have an explicit light or dark appearance prop.\n   */\n  hasBackground: { type: 'boolean', default: true },\n  /**\n   * Sets the color scheme of the theme, typcially referred to as light and dark mode.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/dark-mode\n   */\n  appearance: { type: 'enum', values: appearances, default: 'inherit' },\n  /**\n   * Selects one of the accent color options to use in the Theme.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/color\n   */\n  accentColor: { type: 'enum', values: accentColors, default: 'blue' },\n  /**\n   * Selects one of the gray color options to use in the Theme.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/color\n   */\n  grayColor: { type: 'enum', values: grayColors, default: 'slate' },\n  /**\n   * Controls whether to use a solid or translucent background color on panelled\n   * elements such as Card or Table is solid or translucent.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/visual-style\n   */\n  material: { type: 'enum', values: materials, default: 'translucent' },\n  /**\n   * Controls whether to use a solid or translucent background color on panelled\n   * elements such as Card or Table is solid or translucent.\n   *\n   * @deprecated Use `material` prop instead. This prop will be removed in a future version.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/visual-style\n   */\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: 'translucent' },\n  /**\n   * Sets the default radius of the components.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/visual-style\n   */\n  radius: { type: 'enum', values: radii, default: 'medium' },\n  /**\n   * Sets a scaling multiplier for values like spacing, font sizes, line heights, etc. are scaled.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/layout\n   */\n  scaling: { type: 'enum', values: scalings, default: '100%' },\n} satisfies {\n  hasBackground: PropDef<boolean>;\n  appearance: PropDef<(typeof appearances)[number]>;\n  accentColor: PropDef<(typeof accentColors)[number]>;\n  grayColor: PropDef<(typeof grayColors)[number]>;\n  material: PropDef<(typeof materials)[number]>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number]>;\n  radius: PropDef<(typeof radii)[number]>;\n  scaling: PropDef<(typeof scalings)[number]>;\n};\n\ntype ThemeOwnProps = GetPropDefTypes<typeof themePropDefs & typeof asChildPropDef>;\n\nexport { themePropDefs };\nexport type { ThemeOwnProps };\n"],
-  "mappings": "AAAA,OAAS,kBAAAA,MAAsB,4BAC/B,OAAS,gBAAAC,EAAc,cAAAC,MAAkB,yBACzC,OAAS,SAAAC,MAAa,0BAItB,MAAMC,EAAc,CAAC,UAAW,QAAS,MAAM,EACzCC,EAAmB,CAAC,QAAS,aAAa,EAC1CC,EAAY,CAAC,QAAS,aAAa,EACnCC,EAAW,CAAC,MAAO,MAAO,OAAQ,OAAQ,MAAM,EAEhDC,EAAgB,CACpB,GAAGR,EAOH,cAAe,CAAE,KAAM,UAAW,QAAS,EAAK,EAOhD,WAAY,CAAE,KAAM,OAAQ,OAAQI,EAAa,QAAS,SAAU,EAOpE,YAAa,CAAE,KAAM,OAAQ,OAAQH,EAAc,QAAS,MAAO,EAOnE,UAAW,CAAE,KAAM,OAAQ,OAAQC,EAAY,QAAS,OAAQ,EAQhE,SAAU,CAAE,KAAM,OAAQ,OAAQI,EAAW,QAAS,aAAc,EAUpE,gBAAiB,CAAE,KAAM,OAAQ,OAAQD,EAAkB,QAAS,aAAc,EAOlF,OAAQ,CAAE,KAAM,OAAQ,OAAQF,EAAO,QAAS,QAAS,EAOzD,QAAS,CAAE,KAAM,OAAQ,OAAQI,EAAU,QAAS,MAAO,CAC7D",
-  "names": ["asChildPropDef", "accentColors", "grayColors", "radii", "appearances", "panelBackgrounds", "materials", "scalings", "themePropDefs"]
+  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\nimport { accentColors, grayColors } from '../props/color.prop.js';\nimport { radii } from '../props/radius.prop.js';\n\nimport type { GetPropDefTypes, PropDef } from '../props/prop-def.js';\n\nconst appearances = ['inherit', 'light', 'dark'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\nconst materials = ['solid', 'translucent'] as const;\nconst scalings = ['90%', '95%', '100%', '105%', '110%'] as const;\nconst fontFamilies = ['sans', 'mono'] as const;\n\nconst themePropDefs = {\n  ...asChildPropDef,\n  /**\n   * Whether to apply background color to the Theme element.\n   *\n   * Defaults to true for the root Theme and for Theme elements that\n   * have an explicit light or dark appearance prop.\n   */\n  hasBackground: { type: 'boolean', default: true },\n  /**\n   * Sets the color scheme of the theme, typcially referred to as light and dark mode.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/dark-mode\n   */\n  appearance: { type: 'enum', values: appearances, default: 'inherit' },\n  /**\n   * Selects one of the accent color options to use in the Theme.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/color\n   */\n  accentColor: { type: 'enum', values: accentColors, default: 'blue' },\n  /**\n   * Selects one of the gray color options to use in the Theme.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/color\n   */\n  grayColor: { type: 'enum', values: grayColors, default: 'slate' },\n  /**\n   * Controls whether to use a solid or translucent background color on panelled\n   * elements such as Card or Table is solid or translucent.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/visual-style\n   */\n  material: { type: 'enum', values: materials, default: 'translucent' },\n  /**\n   * Controls whether to use a solid or translucent background color on panelled\n   * elements such as Card or Table is solid or translucent.\n   *\n   * @deprecated Use `material` prop instead. This prop will be removed in a future version.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/visual-style\n   */\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: 'translucent' },\n  /**\n   * Sets the default radius of the components.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/visual-style\n   */\n  radius: { type: 'enum', values: radii, default: 'medium' },\n  /**\n   * Sets a scaling multiplier for values like spacing, font sizes, line heights, etc. are scaled.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/layout\n   */\n  scaling: { type: 'enum', values: scalings, default: '100%' },\n  /**\n   * Sets the font family for the theme.\n   *\n   * @default 'sans'\n   */\n  fontFamily: { type: 'enum', values: fontFamilies, default: 'sans' },\n} satisfies {\n  hasBackground: PropDef<boolean>;\n  appearance: PropDef<(typeof appearances)[number]>;\n  accentColor: PropDef<(typeof accentColors)[number]>;\n  grayColor: PropDef<(typeof grayColors)[number]>;\n  material: PropDef<(typeof materials)[number]>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number]>;\n  radius: PropDef<(typeof radii)[number]>;\n  scaling: PropDef<(typeof scalings)[number]>;\n  fontFamily: PropDef<(typeof fontFamilies)[number]>;\n};\n\ntype ThemeOwnProps = GetPropDefTypes<typeof themePropDefs & typeof asChildPropDef>;\n\nexport { themePropDefs };\nexport type { ThemeOwnProps };\n"],
+  "mappings": "AAAA,OAAS,kBAAAA,MAAsB,4BAC/B,OAAS,gBAAAC,EAAc,cAAAC,MAAkB,yBACzC,OAAS,SAAAC,MAAa,0BAItB,MAAMC,EAAc,CAAC,UAAW,QAAS,MAAM,EACzCC,EAAmB,CAAC,QAAS,aAAa,EAC1CC,EAAY,CAAC,QAAS,aAAa,EACnCC,EAAW,CAAC,MAAO,MAAO,OAAQ,OAAQ,MAAM,EAChDC,EAAe,CAAC,OAAQ,MAAM,EAE9BC,EAAgB,CACpB,GAAGT,EAOH,cAAe,CAAE,KAAM,UAAW,QAAS,EAAK,EAOhD,WAAY,CAAE,KAAM,OAAQ,OAAQI,EAAa,QAAS,SAAU,EAOpE,YAAa,CAAE,KAAM,OAAQ,OAAQH,EAAc,QAAS,MAAO,EAOnE,UAAW,CAAE,KAAM,OAAQ,OAAQC,EAAY,QAAS,OAAQ,EAQhE,SAAU,CAAE,KAAM,OAAQ,OAAQI,EAAW,QAAS,aAAc,EAUpE,gBAAiB,CAAE,KAAM,OAAQ,OAAQD,EAAkB,QAAS,aAAc,EAOlF,OAAQ,CAAE,KAAM,OAAQ,OAAQF,EAAO,QAAS,QAAS,EAOzD,QAAS,CAAE,KAAM,OAAQ,OAAQI,EAAU,QAAS,MAAO,EAM3D,WAAY,CAAE,KAAM,OAAQ,OAAQC,EAAc,QAAS,MAAO,CACpE",
+  "names": ["asChildPropDef", "accentColors", "grayColors", "radii", "appearances", "panelBackgrounds", "materials", "scalings", "fontFamilies", "themePropDefs"]
 }

package/dist/esm/helpers/font-config.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Font configuration utilities for Kookie UI
+ *
+ * These utilities help users configure custom fonts through CSS variables
+ * and provide type-safe font configuration options.
+ */
+/**
+ * Font family configuration interface
+ */
+export interface FontConfig {
+    /** Sans-serif font stack for fontFamily="sans" */
+    sans?: string;
+    /** Monospace font stack for fontFamily="mono" */
+    mono?: string;
+    /** Base Inter font replacement */
+    inter?: string;
+    /** Base JetBrains Mono font replacement */
+    jetbrainsMono?: string;
+}
+/**
+ * CSS variable names used by Kookie UI for fonts
+ */
+export declare const FONT_CSS_VARIABLES: {
+    readonly sans: "--font-sans";
+    readonly mono: "--font-mono";
+    readonly inter: "--font-inter";
+    readonly jetbrainsMono: "--font-jetbrains-mono";
+    readonly defaultFamily: "--default-font-family";
+    readonly headingFamily: "--heading-font-family";
+    readonly strongFamily: "--strong-font-family";
+    readonly codeFamily: "--code-font-family";
+};
+/**
+ * Popular font stacks for common use cases
+ */
+export declare const FONT_STACKS: {
+    readonly inter: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+    readonly system: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+    readonly poppins: "'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif";
+    readonly openSans: "'Open Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif";
+    readonly jetbrainsMono: "'JetBrains Mono', 'Fira Code', 'Consolas', 'Liberation Mono', monospace";
+    readonly firaCode: "'Fira Code', 'JetBrains Mono', 'Consolas', 'Liberation Mono', monospace";
+    readonly sourceCodePro: "'Source Code Pro', 'JetBrains Mono', 'Consolas', monospace";
+    readonly systemMono: "'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Courier New', monospace";
+};
+/**
+ * Apply font configuration to CSS variables
+ *
+ * @param config Font configuration object
+ * @param target Target element (defaults to document.documentElement)
+ *
+ * @example
+ * ```ts
+ * // Use Google Fonts
+ * applyFontConfig({
+ *   sans: FONT_STACKS.poppins,
+ *   mono: FONT_STACKS.firaCode
+ * });
+ *
+ * // Use system fonts only
+ * applyFontConfig({
+ *   sans: FONT_STACKS.system,
+ *   mono: FONT_STACKS.systemMono
+ * });
+ * ```
+ */
+export declare function applyFontConfig(config: FontConfig, target?: HTMLElement): void;
+/**
+ * Generate CSS string for font configuration
+ *
+ * @param config Font configuration object
+ * @returns CSS string that can be injected into a stylesheet
+ *
+ * @example
+ * ```ts
+ * const css = generateFontCSS({
+ *   sans: FONT_STACKS.poppins,
+ *   mono: FONT_STACKS.firaCode
+ * });
+ *
+ * // Inject into document
+ * const style = document.createElement('style');
+ * style.textContent = css;
+ * document.head.appendChild(style);
+ * ```
+ */
+export declare function generateFontCSS(config: FontConfig): string;
+/**
+ * Reset fonts to Kookie UI defaults
+ */
+export declare function resetFonts(target?: HTMLElement): void;
+/**
+ * Get current font configuration from CSS variables
+ */
+export declare function getCurrentFontConfig(target?: HTMLElement): FontConfig;
+//# sourceMappingURL=font-config.d.ts.map

package/dist/esm/helpers/font-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-config.d.ts","sourceRoot":"","sources":["../../../src/helpers/font-config.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;CASrB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,WAAW;;;;;;;;;CAad,CAAC;AAEX;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,UAAU,EAClB,MAAM,GAAE,WAAsC,GAC7C,IAAI,CAkBN;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,UAAU,GAAG,MAAM,CAsB1D;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,MAAM,GAAE,WAAsC,GAAG,IAAI,CAQ/E;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,GAAE,WAAsC,GAAG,UAAU,CAU/F"}

package/dist/esm/helpers/font-config.js

@@ -0,0 +1,3 @@
+const n={sans:"--font-sans",mono:"--font-mono",inter:"--font-inter",jetbrainsMono:"--font-jetbrains-mono",defaultFamily:"--default-font-family",headingFamily:"--heading-font-family",strongFamily:"--strong-font-family",codeFamily:"--code-font-family"},s={inter:"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",system:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",poppins:"'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif",openSans:"'Open Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif",jetbrainsMono:"'JetBrains Mono', 'Fira Code', 'Consolas', 'Liberation Mono', monospace",firaCode:"'Fira Code', 'JetBrains Mono', 'Consolas', 'Liberation Mono', monospace",sourceCodePro:"'Source Code Pro', 'JetBrains Mono', 'Consolas', monospace",systemMono:"'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Courier New', monospace"};function r(o,e=document.documentElement){const t=e.style;o.sans&&t.setProperty(n.sans,o.sans),o.mono&&t.setProperty(n.mono,o.mono),o.inter&&t.setProperty(n.inter,o.inter),o.jetbrainsMono&&t.setProperty(n.jetbrainsMono,o.jetbrainsMono)}function i(o){const e=[":root {"];return o.sans&&e.push(`  ${n.sans}: ${o.sans};`),o.mono&&e.push(`  ${n.mono}: ${o.mono};`),o.inter&&e.push(`  ${n.inter}: ${o.inter};`),o.jetbrainsMono&&e.push(`  ${n.jetbrainsMono}: ${o.jetbrainsMono};`),e.push("}"),e.join(`
+`)}function a(o=document.documentElement){const e=o.style;e.removeProperty(n.sans),e.removeProperty(n.mono),e.removeProperty(n.inter),e.removeProperty(n.jetbrainsMono)}function m(o=document.documentElement){const e=getComputedStyle(o);return{sans:e.getPropertyValue(n.sans).trim()||void 0,mono:e.getPropertyValue(n.mono).trim()||void 0,inter:e.getPropertyValue(n.inter).trim()||void 0,jetbrainsMono:e.getPropertyValue(n.jetbrainsMono).trim()||void 0}}export{n as FONT_CSS_VARIABLES,s as FONT_STACKS,r as applyFontConfig,i as generateFontCSS,m as getCurrentFontConfig,a as resetFonts};
+//# sourceMappingURL=font-config.js.map

package/dist/esm/helpers/font-config.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/font-config.ts"],
+  "sourcesContent": ["/**\n * Font configuration utilities for Kookie UI\n *\n * These utilities help users configure custom fonts through CSS variables\n * and provide type-safe font configuration options.\n */\n\n/**\n * Font family configuration interface\n */\nexport interface FontConfig {\n  /** Sans-serif font stack for fontFamily=\"sans\" */\n  sans?: string;\n  /** Monospace font stack for fontFamily=\"mono\" */\n  mono?: string;\n  /** Base Inter font replacement */\n  inter?: string;\n  /** Base JetBrains Mono font replacement */\n  jetbrainsMono?: string;\n}\n\n/**\n * CSS variable names used by Kookie UI for fonts\n */\nexport const FONT_CSS_VARIABLES = {\n  sans: '--font-sans',\n  mono: '--font-mono',\n  inter: '--font-inter',\n  jetbrainsMono: '--font-jetbrains-mono',\n  defaultFamily: '--default-font-family',\n  headingFamily: '--heading-font-family',\n  strongFamily: '--strong-font-family',\n  codeFamily: '--code-font-family',\n} as const;\n\n/**\n * Popular font stacks for common use cases\n */\nexport const FONT_STACKS = {\n  // Sans-serif options\n  inter: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\",\n  system:\n    \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif\",\n  poppins: \"'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif\",\n  openSans: \"'Open Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif\",\n\n  // Monospace options\n  jetbrainsMono: \"'JetBrains Mono', 'Fira Code', 'Consolas', 'Liberation Mono', monospace\",\n  firaCode: \"'Fira Code', 'JetBrains Mono', 'Consolas', 'Liberation Mono', monospace\",\n  sourceCodePro: \"'Source Code Pro', 'JetBrains Mono', 'Consolas', monospace\",\n  systemMono: \"'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Courier New', monospace\",\n} as const;\n\n/**\n * Apply font configuration to CSS variables\n *\n * @param config Font configuration object\n * @param target Target element (defaults to document.documentElement)\n *\n * @example\n * ```ts\n * // Use Google Fonts\n * applyFontConfig({\n *   sans: FONT_STACKS.poppins,\n *   mono: FONT_STACKS.firaCode\n * });\n *\n * // Use system fonts only\n * applyFontConfig({\n *   sans: FONT_STACKS.system,\n *   mono: FONT_STACKS.systemMono\n * });\n * ```\n */\nexport function applyFontConfig(\n  config: FontConfig,\n  target: HTMLElement = document.documentElement,\n): void {\n  const style = target.style;\n\n  if (config.sans) {\n    style.setProperty(FONT_CSS_VARIABLES.sans, config.sans);\n  }\n\n  if (config.mono) {\n    style.setProperty(FONT_CSS_VARIABLES.mono, config.mono);\n  }\n\n  if (config.inter) {\n    style.setProperty(FONT_CSS_VARIABLES.inter, config.inter);\n  }\n\n  if (config.jetbrainsMono) {\n    style.setProperty(FONT_CSS_VARIABLES.jetbrainsMono, config.jetbrainsMono);\n  }\n}\n\n/**\n * Generate CSS string for font configuration\n *\n * @param config Font configuration object\n * @returns CSS string that can be injected into a stylesheet\n *\n * @example\n * ```ts\n * const css = generateFontCSS({\n *   sans: FONT_STACKS.poppins,\n *   mono: FONT_STACKS.firaCode\n * });\n *\n * // Inject into document\n * const style = document.createElement('style');\n * style.textContent = css;\n * document.head.appendChild(style);\n * ```\n */\nexport function generateFontCSS(config: FontConfig): string {\n  const rules: string[] = [':root {'];\n\n  if (config.sans) {\n    rules.push(`  ${FONT_CSS_VARIABLES.sans}: ${config.sans};`);\n  }\n\n  if (config.mono) {\n    rules.push(`  ${FONT_CSS_VARIABLES.mono}: ${config.mono};`);\n  }\n\n  if (config.inter) {\n    rules.push(`  ${FONT_CSS_VARIABLES.inter}: ${config.inter};`);\n  }\n\n  if (config.jetbrainsMono) {\n    rules.push(`  ${FONT_CSS_VARIABLES.jetbrainsMono}: ${config.jetbrainsMono};`);\n  }\n\n  rules.push('}');\n\n  return rules.join('\\n');\n}\n\n/**\n * Reset fonts to Kookie UI defaults\n */\nexport function resetFonts(target: HTMLElement = document.documentElement): void {\n  const style = target.style;\n\n  // Remove custom font variables to fall back to defaults\n  style.removeProperty(FONT_CSS_VARIABLES.sans);\n  style.removeProperty(FONT_CSS_VARIABLES.mono);\n  style.removeProperty(FONT_CSS_VARIABLES.inter);\n  style.removeProperty(FONT_CSS_VARIABLES.jetbrainsMono);\n}\n\n/**\n * Get current font configuration from CSS variables\n */\nexport function getCurrentFontConfig(target: HTMLElement = document.documentElement): FontConfig {\n  const computedStyle = getComputedStyle(target);\n\n  return {\n    sans: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.sans).trim() || undefined,\n    mono: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.mono).trim() || undefined,\n    inter: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.inter).trim() || undefined,\n    jetbrainsMono:\n      computedStyle.getPropertyValue(FONT_CSS_VARIABLES.jetbrainsMono).trim() || undefined,\n  };\n}\n"],
+  "mappings": "AAwBO,MAAMA,EAAqB,CAChC,KAAM,cACN,KAAM,cACN,MAAO,eACP,cAAe,wBACf,cAAe,wBACf,cAAe,wBACf,aAAc,uBACd,WAAY,oBACd,EAKaC,EAAc,CAEzB,MAAO,6EACP,OACE,6FACF,QAAS,oEACT,SAAU,sEAGV,cAAe,0EACf,SAAU,0EACV,cAAe,6DACf,WAAY,6EACd,EAuBO,SAASC,EACdC,EACAC,EAAsB,SAAS,gBACzB,CACN,MAAMC,EAAQD,EAAO,MAEjBD,EAAO,MACTE,EAAM,YAAYL,EAAmB,KAAMG,EAAO,IAAI,EAGpDA,EAAO,MACTE,EAAM,YAAYL,EAAmB,KAAMG,EAAO,IAAI,EAGpDA,EAAO,OACTE,EAAM,YAAYL,EAAmB,MAAOG,EAAO,KAAK,EAGtDA,EAAO,eACTE,EAAM,YAAYL,EAAmB,cAAeG,EAAO,aAAa,CAE5E,CAqBO,SAASG,EAAgBH,EAA4B,CAC1D,MAAMI,EAAkB,CAAC,SAAS,EAElC,OAAIJ,EAAO,MACTI,EAAM,KAAK,KAAKP,EAAmB,IAAI,KAAKG,EAAO,IAAI,GAAG,EAGxDA,EAAO,MACTI,EAAM,KAAK,KAAKP,EAAmB,IAAI,KAAKG,EAAO,IAAI,GAAG,EAGxDA,EAAO,OACTI,EAAM,KAAK,KAAKP,EAAmB,KAAK,KAAKG,EAAO,KAAK,GAAG,EAG1DA,EAAO,eACTI,EAAM,KAAK,KAAKP,EAAmB,aAAa,KAAKG,EAAO,aAAa,GAAG,EAG9EI,EAAM,KAAK,GAAG,EAEPA,EAAM,KAAK;AAAA,CAAI,CACxB,CAKO,SAASC,EAAWJ,EAAsB,SAAS,gBAAuB,CAC/E,MAAMC,EAAQD,EAAO,MAGrBC,EAAM,eAAeL,EAAmB,IAAI,EAC5CK,EAAM,eAAeL,EAAmB,IAAI,EAC5CK,EAAM,eAAeL,EAAmB,KAAK,EAC7CK,EAAM,eAAeL,EAAmB,aAAa,CACvD,CAKO,SAASS,EAAqBL,EAAsB,SAAS,gBAA6B,CAC/F,MAAMM,EAAgB,iBAAiBN,CAAM,EAE7C,MAAO,CACL,KAAMM,EAAc,iBAAiBV,EAAmB,IAAI,EAAE,KAAK,GAAK,OACxE,KAAMU,EAAc,iBAAiBV,EAAmB,IAAI,EAAE,KAAK,GAAK,OACxE,MAAOU,EAAc,iBAAiBV,EAAmB,KAAK,EAAE,KAAK,GAAK,OAC1E,cACEU,EAAc,iBAAiBV,EAAmB,aAAa,EAAE,KAAK,GAAK,MAC/E,CACF",
+  "names": ["FONT_CSS_VARIABLES", "FONT_STACKS", "applyFontConfig", "config", "target", "style", "generateFontCSS", "rules", "resetFonts", "getCurrentFontConfig", "computedStyle"]
+}

package/dist/esm/helpers/index.d.ts

@@ -1,6 +1,7 @@
 export * from './component-props.js';
 export * from './extract-margin-props.js';
 export * from './extract-props.js';
+export * from './font-config.js';
 export * from './get-margin-styles.js';
 export * from './get-matching-gray-color.js';
 export * from './get-responsive-styles.js';

package/dist/esm/helpers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC"}

package/dist/esm/helpers/index.js

@@ -1,2 +1,2 @@
-export*from"./component-props.js";export*from"./extract-margin-props.js";export*from"./extract-props.js";export*from"./get-margin-styles.js";export*from"./get-matching-gray-color.js";export*from"./get-responsive-styles.js";export*from"./get-subtree.js";export*from"./has-own-property.js";export*from"./input-attributes.js";export*from"./is-responsive-object.js";export*from"./map-prop-values.js";export*from"./merge-styles.js";export*from"./require-react-element.js";
+export*from"./component-props.js";export*from"./extract-margin-props.js";export*from"./extract-props.js";export*from"./font-config.js";export*from"./get-margin-styles.js";export*from"./get-matching-gray-color.js";export*from"./get-responsive-styles.js";export*from"./get-subtree.js";export*from"./has-own-property.js";export*from"./input-attributes.js";export*from"./is-responsive-object.js";export*from"./map-prop-values.js";export*from"./merge-styles.js";export*from"./require-react-element.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/helpers/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/index.ts"],
-  "sourcesContent": ["export * from './component-props.js';\nexport * from './extract-margin-props.js';\nexport * from './extract-props.js';\nexport * from './get-margin-styles.js';\nexport * from './get-matching-gray-color.js';\nexport * from './get-responsive-styles.js';\nexport * from './get-subtree.js';\nexport * from './has-own-property.js';\nexport * from './input-attributes.js';\nexport * from './is-responsive-object.js';\nexport * from './map-prop-values.js';\nexport * from './merge-styles.js';\nexport * from './require-react-element.js';\n"],
-  "mappings": "AAAA,WAAc,uBACd,WAAc,4BACd,WAAc,qBACd,WAAc,yBACd,WAAc,+BACd,WAAc,6BACd,WAAc,mBACd,WAAc,wBACd,WAAc,wBACd,WAAc,4BACd,WAAc,uBACd,WAAc,oBACd,WAAc",
+  "sourcesContent": ["export * from './component-props.js';\nexport * from './extract-margin-props.js';\nexport * from './extract-props.js';\nexport * from './font-config.js';\nexport * from './get-margin-styles.js';\nexport * from './get-matching-gray-color.js';\nexport * from './get-responsive-styles.js';\nexport * from './get-subtree.js';\nexport * from './has-own-property.js';\nexport * from './input-attributes.js';\nexport * from './is-responsive-object.js';\nexport * from './map-prop-values.js';\nexport * from './merge-styles.js';\nexport * from './require-react-element.js';\n"],
+  "mappings": "AAAA,WAAc,uBACd,WAAc,4BACd,WAAc,qBACd,WAAc,mBACd,WAAc,yBACd,WAAc,+BACd,WAAc,6BACd,WAAc,mBACd,WAAc,wBACd,WAAc,wBACd,WAAc,4BACd,WAAc,uBACd,WAAc,oBACd,WAAc",
   "names": []
 }