@shohojdhara/atomix 0.3.15 → 0.4.0

package/dist/index.d.ts

@@ -1165,7 +1165,7 @@ type ComponentCSSVariables = {
 /**
  * Get CSS variables for a component
  */
-declare function getComponentCSSVars<T extends keyof typeof COMPONENT_CSS_VARS>(component: T): typeof COMPONENT_CSS_VARS[T];
+declare function getComponentCSSVars<T extends keyof typeof COMPONENT_CSS_VARS>(component: T): (typeof COMPONENT_CSS_VARS)[T];
 
 /**
  * Displacement mode for glass effect
@@ -1927,14 +1927,72 @@ interface HeroBackgroundSliderConfig {
      */
     customTransition?: (currentIndex: number, nextIndex: number) => string | React.CSSProperties;
 }
+/**
+ * Hero component parts for granular styling
+ */
+interface HeroParts {
+    root?: {
+        className?: string;
+        style?: React.CSSProperties;
+    };
+    container?: {
+        className?: string;
+        style?: React.CSSProperties;
+    };
+    grid?: {
+        className?: string;
+        style?: React.CSSProperties;
+    };
+    content?: {
+        className?: string;
+        style?: React.CSSProperties;
+    };
+    title?: {
+        className?: string;
+        style?: React.CSSProperties;
+    };
+    subtitle?: {
+        className?: string;
+        style?: React.CSSProperties;
+    };
+    text?: {
+        className?: string;
+        style?: React.CSSProperties;
+    };
+    actions?: {
+        className?: string;
+        style?: React.CSSProperties;
+    };
+    imageWrapper?: {
+        className?: string;
+        style?: React.CSSProperties;
+    };
+    image?: {
+        className?: string;
+        style?: React.CSSProperties;
+    };
+    background?: {
+        className?: string;
+        style?: React.CSSProperties;
+    };
+    overlay?: {
+        className?: string;
+        style?: React.CSSProperties;
+    };
+}
 /**
  * Hero component properties
  */
-interface HeroProps extends BaseComponentProps {
+interface HeroProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'content'>, BaseComponentProps {
     /**
      * Hero title
      */
-    title: string;
+    title: ReactNode;
+    /**
+     * HTML Heading level for the title
+     * @default 'h1'
+     */
+    headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
     /**
      * Hero subtitle
      */
@@ -1975,10 +2033,26 @@ interface HeroProps extends BaseComponentProps {
      * Custom grid column size for image (default is 7)
      */
     imageColSize?: number;
+    /**
+     * Custom grid column class name for image
+     */
+    imageColClassName?: string;
+    /**
+     * Custom inline style for image column
+     */
+    imageColStyle?: React.CSSProperties;
     /**
      * Custom grid column size for content (default is 5)
      */
     contentColSize?: number;
+    /**
+     * Custom grid column class name for content
+     */
+    contentColClassName?: string;
+    /**
+     * Custom inline style for content column
+     */
+    contentColStyle?: React.CSSProperties;
     /**
      * Custom width for the hero content (overrides the default CSS variable)
      */
@@ -2030,6 +2104,15 @@ interface HeroProps extends BaseComponentProps {
      * Takes precedence over backgroundImageSrc and videoBackground props
      */
     backgroundSlider?: HeroBackgroundSliderConfig;
+    /**
+     * Reverse the stacking order of content and image on mobile devices
+     * @default false
+     */
+    reverseOnMobile?: boolean;
+    /**
+     * Granular part-based styling
+     */
+    parts?: HeroParts;
 }
 /**
  * Spinner component properties
@@ -8383,6 +8466,7 @@ type __lib_types_GlassSize = GlassSize;
 type __lib_types_HeroAlignment = HeroAlignment;
 type __lib_types_HeroBackgroundSlide = HeroBackgroundSlide;
 type __lib_types_HeroBackgroundSliderConfig = HeroBackgroundSliderConfig;
+type __lib_types_HeroParts = HeroParts;
 type __lib_types_HeroProps = HeroProps;
 type __lib_types_IconPosition = IconPosition;
 type __lib_types_ImageType = ImageType;
@@ -8453,7 +8537,7 @@ type __lib_types_VideoQuality = VideoQuality;
 type __lib_types_VideoSubtitle = VideoSubtitle;
 type __lib_types_listvariant = listvariant;
 declare namespace __lib_types {
-  export type { AccordionProps$1 as AccordionProps, __lib_types_AccordionState as AccordionState, __lib_types_AtomixGlassProps as AtomixGlassProps, __lib_types_AvatarGroupProps as AvatarGroupProps, __lib_types_AvatarProps as AvatarProps, __lib_types_AvatarSize as AvatarSize, __lib_types_BadgeProps as BadgeProps, __lib_types_BaseComponentProps as BaseComponentProps, __lib_types_BreadcrumbInstance as BreadcrumbInstance, BreadcrumbItem$1 as BreadcrumbItem, BreadcrumbOptions$1 as BreadcrumbOptions, __lib_types_ButtonGroupProps as ButtonGroupProps, __lib_types_ButtonProps as ButtonProps, __lib_types_CalloutProps as CalloutProps, __lib_types_CardProps as CardProps, ChartAxis$1 as ChartAxis, ChartConfig$1 as ChartConfig, ChartDataPoint$1 as ChartDataPoint, ChartDataset$1 as ChartDataset, ChartProps$1 as ChartProps, ChartSize$1 as ChartSize, ChartType$1 as ChartType, __lib_types_CheckboxProps as CheckboxProps, __lib_types_CodeBlockProps as CodeBlockProps, __lib_types_DataTableColumn as DataTableColumn, __lib_types_DataTableProps as DataTableProps, __lib_types_DisplacementMode as DisplacementMode, __lib_types_DropdownDividerProps as DropdownDividerProps, __lib_types_DropdownHeaderProps as DropdownHeaderProps, __lib_types_DropdownItemProps as DropdownItemProps, __lib_types_DropdownPlacement as DropdownPlacement, __lib_types_DropdownProps as DropdownProps, __lib_types_DropdownTrigger as DropdownTrigger, __lib_types_EdgePanelMode as EdgePanelMode, __lib_types_EdgePanelPosition as EdgePanelPosition, __lib_types_EdgePanelProps as EdgePanelProps, __lib_types_ElementRefs as ElementRefs, __lib_types_ElevationCardProps as ElevationCardProps, __lib_types_ExportFormat as ExportFormat, __lib_types_FooterLayout as FooterLayout, __lib_types_FooterLinkProps as FooterLinkProps, __lib_types_FooterProps as FooterProps, __lib_types_FooterSectionProps as FooterSectionProps, __lib_types_FooterSocialLinkProps as FooterSocialLinkProps, __lib_types_FormGroupProps as FormGroupProps, __lib_types_FormProps as FormProps, __lib_types_GlassContainerProps as GlassContainerProps, __lib_types_GlassMode as GlassMode, __lib_types_GlassSize as GlassSize, __lib_types_HeroAlignment as HeroAlignment, __lib_types_HeroBackgroundSlide as HeroBackgroundSlide, __lib_types_HeroBackgroundSliderConfig as HeroBackgroundSliderConfig, __lib_types_HeroProps as HeroProps, __lib_types_IconPosition as IconPosition, IconSize$1 as IconSize, IconWeight$1 as IconWeight, __lib_types_ImageType as ImageType, __lib_types_InputProps as InputProps, ListGroupProps$1 as ListGroupProps, __lib_types_ListProps as ListProps, __lib_types_MegaMenuColumnProps as MegaMenuColumnProps, __lib_types_MegaMenuLinkProps as MegaMenuLinkProps, __lib_types_MegaMenuProps as MegaMenuProps, __lib_types_MenuItemProps as MenuItemProps, __lib_types_MenuProps as MenuProps, __lib_types_MessageItem as MessageItem, __lib_types_MessagesProps as MessagesProps, __lib_types_ModalProps as ModalProps, __lib_types_MousePosition as MousePosition, __lib_types_NavAlignment as NavAlignment, __lib_types_NavDropdownProps as NavDropdownProps, __lib_types_NavItemProps as NavItemProps, __lib_types_NavProps as NavProps, __lib_types_NavVariant as NavVariant, __lib_types_NavbarPosition as NavbarPosition, __lib_types_NavbarProps as NavbarProps, __lib_types_OverLightConfig as OverLightConfig, __lib_types_OverLightObjectConfig as OverLightObjectConfig, __lib_types_PaginationProps as PaginationProps, PhosphorIconsType$1 as PhosphorIconsType, __lib_types_PhotoViewerProps as PhotoViewerProps, __lib_types_PopoverProps as PopoverProps, __lib_types_PopoverTriggerProps as PopoverTriggerProps, __lib_types_ProgressProps as ProgressProps, __lib_types_RadioProps as RadioProps, __lib_types_RatingProps as RatingProps, __lib_types_SelectOption as SelectOption, __lib_types_SelectProps as SelectProps, __lib_types_SelectionMode as SelectionMode, __lib_types_SideMenuItemProps as SideMenuItemProps, __lib_types_SideMenuListProps as SideMenuListProps, __lib_types_SideMenuProps as SideMenuProps, __lib_types_Size as Size, __lib_types_SliderAutoplay as SliderAutoplay, __lib_types_SliderBreakpoint as SliderBreakpoint, __lib_types_SliderEffect as SliderEffect, __lib_types_SliderLazy as SliderLazy, __lib_types_SliderNavigation as SliderNavigation, __lib_types_SliderPagination as SliderPagination, __lib_types_SliderProps as SliderProps, __lib_types_SliderRefs as SliderRefs, __lib_types_SliderScrollbar as SliderScrollbar, __lib_types_SliderSlide as SliderSlide, __lib_types_SliderState as SliderState, __lib_types_SliderThumbs as SliderThumbs, __lib_types_SliderVirtual as SliderVirtual, __lib_types_SliderZoom as SliderZoom, __lib_types_SocialLink as SocialLink, __lib_types_SocialPlatform as SocialPlatform, __lib_types_SortConfig as SortConfig, __lib_types_SpinnerProps as SpinnerProps, __lib_types_StateModifier as StateModifier, __lib_types_TextareaProps as TextareaProps, __lib_types_ThemeColor as ThemeColor, __lib_types_ThemeName as ThemeName, __lib_types_TodoItem as TodoItem, __lib_types_TodoProps as TodoProps, __lib_types_UseCardOptions as UseCardOptions, __lib_types_UseCardReturn as UseCardReturn, __lib_types_Variant as Variant, __lib_types_VideoChapter as VideoChapter, __lib_types_VideoPlayerProps as VideoPlayerProps, __lib_types_VideoQuality as VideoQuality, __lib_types_VideoSubtitle as VideoSubtitle, __lib_types_listvariant as listvariant };
+  export type { AccordionProps$1 as AccordionProps, __lib_types_AccordionState as AccordionState, __lib_types_AtomixGlassProps as AtomixGlassProps, __lib_types_AvatarGroupProps as AvatarGroupProps, __lib_types_AvatarProps as AvatarProps, __lib_types_AvatarSize as AvatarSize, __lib_types_BadgeProps as BadgeProps, __lib_types_BaseComponentProps as BaseComponentProps, __lib_types_BreadcrumbInstance as BreadcrumbInstance, BreadcrumbItem$1 as BreadcrumbItem, BreadcrumbOptions$1 as BreadcrumbOptions, __lib_types_ButtonGroupProps as ButtonGroupProps, __lib_types_ButtonProps as ButtonProps, __lib_types_CalloutProps as CalloutProps, __lib_types_CardProps as CardProps, ChartAxis$1 as ChartAxis, ChartConfig$1 as ChartConfig, ChartDataPoint$1 as ChartDataPoint, ChartDataset$1 as ChartDataset, ChartProps$1 as ChartProps, ChartSize$1 as ChartSize, ChartType$1 as ChartType, __lib_types_CheckboxProps as CheckboxProps, __lib_types_CodeBlockProps as CodeBlockProps, __lib_types_DataTableColumn as DataTableColumn, __lib_types_DataTableProps as DataTableProps, __lib_types_DisplacementMode as DisplacementMode, __lib_types_DropdownDividerProps as DropdownDividerProps, __lib_types_DropdownHeaderProps as DropdownHeaderProps, __lib_types_DropdownItemProps as DropdownItemProps, __lib_types_DropdownPlacement as DropdownPlacement, __lib_types_DropdownProps as DropdownProps, __lib_types_DropdownTrigger as DropdownTrigger, __lib_types_EdgePanelMode as EdgePanelMode, __lib_types_EdgePanelPosition as EdgePanelPosition, __lib_types_EdgePanelProps as EdgePanelProps, __lib_types_ElementRefs as ElementRefs, __lib_types_ElevationCardProps as ElevationCardProps, __lib_types_ExportFormat as ExportFormat, __lib_types_FooterLayout as FooterLayout, __lib_types_FooterLinkProps as FooterLinkProps, __lib_types_FooterProps as FooterProps, __lib_types_FooterSectionProps as FooterSectionProps, __lib_types_FooterSocialLinkProps as FooterSocialLinkProps, __lib_types_FormGroupProps as FormGroupProps, __lib_types_FormProps as FormProps, __lib_types_GlassContainerProps as GlassContainerProps, __lib_types_GlassMode as GlassMode, __lib_types_GlassSize as GlassSize, __lib_types_HeroAlignment as HeroAlignment, __lib_types_HeroBackgroundSlide as HeroBackgroundSlide, __lib_types_HeroBackgroundSliderConfig as HeroBackgroundSliderConfig, __lib_types_HeroParts as HeroParts, __lib_types_HeroProps as HeroProps, __lib_types_IconPosition as IconPosition, IconSize$1 as IconSize, IconWeight$1 as IconWeight, __lib_types_ImageType as ImageType, __lib_types_InputProps as InputProps, ListGroupProps$1 as ListGroupProps, __lib_types_ListProps as ListProps, __lib_types_MegaMenuColumnProps as MegaMenuColumnProps, __lib_types_MegaMenuLinkProps as MegaMenuLinkProps, __lib_types_MegaMenuProps as MegaMenuProps, __lib_types_MenuItemProps as MenuItemProps, __lib_types_MenuProps as MenuProps, __lib_types_MessageItem as MessageItem, __lib_types_MessagesProps as MessagesProps, __lib_types_ModalProps as ModalProps, __lib_types_MousePosition as MousePosition, __lib_types_NavAlignment as NavAlignment, __lib_types_NavDropdownProps as NavDropdownProps, __lib_types_NavItemProps as NavItemProps, __lib_types_NavProps as NavProps, __lib_types_NavVariant as NavVariant, __lib_types_NavbarPosition as NavbarPosition, __lib_types_NavbarProps as NavbarProps, __lib_types_OverLightConfig as OverLightConfig, __lib_types_OverLightObjectConfig as OverLightObjectConfig, __lib_types_PaginationProps as PaginationProps, PhosphorIconsType$1 as PhosphorIconsType, __lib_types_PhotoViewerProps as PhotoViewerProps, __lib_types_PopoverProps as PopoverProps, __lib_types_PopoverTriggerProps as PopoverTriggerProps, __lib_types_ProgressProps as ProgressProps, __lib_types_RadioProps as RadioProps, __lib_types_RatingProps as RatingProps, __lib_types_SelectOption as SelectOption, __lib_types_SelectProps as SelectProps, __lib_types_SelectionMode as SelectionMode, __lib_types_SideMenuItemProps as SideMenuItemProps, __lib_types_SideMenuListProps as SideMenuListProps, __lib_types_SideMenuProps as SideMenuProps, __lib_types_Size as Size, __lib_types_SliderAutoplay as SliderAutoplay, __lib_types_SliderBreakpoint as SliderBreakpoint, __lib_types_SliderEffect as SliderEffect, __lib_types_SliderLazy as SliderLazy, __lib_types_SliderNavigation as SliderNavigation, __lib_types_SliderPagination as SliderPagination, __lib_types_SliderProps as SliderProps, __lib_types_SliderRefs as SliderRefs, __lib_types_SliderScrollbar as SliderScrollbar, __lib_types_SliderSlide as SliderSlide, __lib_types_SliderState as SliderState, __lib_types_SliderThumbs as SliderThumbs, __lib_types_SliderVirtual as SliderVirtual, __lib_types_SliderZoom as SliderZoom, __lib_types_SocialLink as SocialLink, __lib_types_SocialPlatform as SocialPlatform, __lib_types_SortConfig as SortConfig, __lib_types_SpinnerProps as SpinnerProps, __lib_types_StateModifier as StateModifier, __lib_types_TextareaProps as TextareaProps, __lib_types_ThemeColor as ThemeColor, __lib_types_ThemeName as ThemeName, __lib_types_TodoItem as TodoItem, __lib_types_TodoProps as TodoProps, __lib_types_UseCardOptions as UseCardOptions, __lib_types_UseCardReturn as UseCardReturn, __lib_types_Variant as Variant, __lib_types_VideoChapter as VideoChapter, __lib_types_VideoPlayerProps as VideoPlayerProps, __lib_types_VideoQuality as VideoQuality, __lib_types_VideoSubtitle as VideoSubtitle, __lib_types_listvariant as listvariant };
 }
 
 /**
@@ -10573,11 +10657,11 @@ interface UseHeroResult {
     /**
      * Generate image column class based on size
      */
-    generateImageColClass: (size?: number) => string;
+    generateImageColClass: (size?: number, customClass?: string) => string;
     /**
      * Generate content column class based on size
      */
-    generateContentColClass: (size?: number) => string;
+    generateContentColClass: (size?: number, customClass?: string) => string;
     /**
      * Determine if the hero has a background image
      */
@@ -10620,7 +10704,7 @@ interface UseHeroResult {
  * @param initialProps - Initial hero props
  * @returns Hero methods
  */
-declare function useHero(initialProps?: Partial<HeroProps>): UseHeroResult;
+declare function useHero(initialProps?: HeroProps): UseHeroResult;
 
 /**
  * River content column interface
@@ -12557,14 +12641,14 @@ declare const VideoPlayer: React__default.ForwardRefExoticComponent<VideoPlayerP
  * Keys use kebab-case format matching CSS variable names (without --atomix- prefix).
  */
 interface DesignTokens {
-    'primary': string;
-    'secondary': string;
-    'success': string;
-    'info': string;
-    'warning': string;
-    'error': string;
-    'light': string;
-    'dark': string;
+    primary: string;
+    secondary: string;
+    success: string;
+    info: string;
+    warning: string;
+    error: string;
+    light: string;
+    dark: string;
     'primary-rgb': string;
     'secondary-rgb': string;
     'success-rgb': string;
@@ -12681,7 +12765,7 @@ interface DesignTokens {
     'info-gradient': string;
     'warning-gradient': string;
     'error-gradient': string;
-    'gradient': string;
+    gradient: string;
     'font-sans-serif': string;
     'font-monospace': string;
     'body-font-family': string;
@@ -14719,6 +14803,48 @@ declare const types: typeof __lib_types;
 declare const constants: typeof __lib_constants;
 declare const theme: typeof themeImport;
 
+/**
+ * Theme Tools for Library Users
+ *
+ * Developer-friendly utilities for working with Atomix themes
+ */
+
+/**
+ * Quick theme creator with sensible defaults
+ */
+declare function quickTheme(name: string, primaryColor: string, secondaryColor?: string): Theme;
+/**
+ * Create a dark theme variant from a light theme
+ */
+declare function createDarkVariant(lightTheme: Theme): Theme;
+/**
+ * Validate theme structure
+ */
+declare function validateTheme(theme: Theme): {
+    valid: boolean;
+    errors: string[];
+};
+/**
+ * Generate CSS string from theme
+ */
+declare function themeToCSS(theme: Theme, selector?: string): string;
+/**
+ * Get theme metadata
+ */
+declare function getThemeMetadata(theme: Theme): ThemeMetadata;
+/**
+ * Check if theme supports dark mode
+ */
+declare function supportsDarkMode(theme: Theme): boolean;
+/**
+ * Export theme as JSON
+ */
+declare function exportTheme(theme: Theme): string;
+/**
+ * Import theme from JSON
+ */
+declare function importTheme(json: string): Theme;
+
 interface GridProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * The content to be rendered within the grid
@@ -15100,5 +15226,5 @@ declare const atomix: {
     VideoPlayer: React$1.ForwardRefExoticComponent<VideoPlayerProps & React$1.RefAttributes<HTMLVideoElement>>;
 };
 
-export { ACCORDION, ATOMIX_GLASS, AVATAR, AVATAR_GROUP, Accordion, AnimatedChart, AreaChart, AtomixGlass, AtomixLogo, Avatar, AvatarGroup, BADGE, BADGE_CSS_VARS, BLOCK, BREADCRUMB, BUTTON, BUTTON_CSS_VARS, BUTTON_GROUP, Badge, BarChart, Block, Breadcrumb, BubbleChart, Button, ButtonGroup, CALLOUT, CARD, CARD_CSS_VARS, CHART, CHECKBOX_CSS_VARS, CLASS_PREFIX, CODE_SNIPPET, COMPONENT_CSS_VARS, COUNTDOWN, Callout, CandlestickChart, Card, Chart, ChartRenderer, Checkbox, ColorModeToggle, Container, Countdown, DATA_TABLE_CLASSES, DATA_TABLE_SELECTORS, DATEPICKER, DEFAULT_ATOMIX_FONTS, DOTS, DROPDOWN, DROPDOWN_CSS_VARS, DataTable, DatePicker, DesignTokensCustomizer, DonutChart, Dropdown, EDGE_PANEL, EdgePanel, ElevationCard, FOOTER, FORM, FORM_GROUP, Footer, FooterLink, FooterSection, FooterSocialLink, Form, FormGroup, FunnelChart, GaugeChart, Grid, GridCol, HERO, HeatmapChart, Hero, INPUT, INPUT_CSS_VARS, Icon, Input, LIST, LIST_GROUP, LineChart, List, ListGroup, MESSAGES, MODAL, MODAL_CSS_VARS, MasonryGrid, MasonryGridItem, MegaMenu, MegaMenuColumn, MegaMenuLink, Menu, MenuDivider, MenuItem, Messages, Modal, MultiAxisChart, NAV, NAVBAR, Nav, NavDropdown, NavItem, Navbar, PAGINATION_DEFAULTS, PHOTOVIEWER, POPOVER, PROGRESS, PROGRESS_CSS_VARS, Pagination, PhotoViewer, PieChart, Popover, ProductReview, Progress, RADIO, RADIO_CSS_VARS, RATING, RIVER, RTLManager, RadarChart, Radio, Rating, River, Row, SECTION_INTRO, SELECT, SIDE_MENU, SIZES, SLIDER, SPINNER, STEPS, ScatterChart, SectionIntro, Select, SideMenu, SideMenuItem, SideMenuList, Slider, Spinner, Steps, TAB, TABS_CSS_VARS, TESTIMONIAL, TEXTAREA, THEME_COLORS, THEME_NAMING, TODO, TOGGLE, TOOLTIP, TOOLTIP_CSS_VARS, Tabs, Testimonial, Textarea, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeValidator, Todo, Toggle, Tooltip, TreemapChart, UPLOAD, Upload, VIDEO_PLAYER, VideoPlayer, WaterfallChart, applyCSSVariables, applyCSSVarsToStyle, applyComponentTheme, applyPartStyles, applyTheme, camelToKebab, clearThemes, composables, constants, createCSSVarStyle, createDebugAttrs, createFontPreloadLink, createPartProps, createSlotComponent, createSlotProps, createTheme, createThemeRegistry, createTokens, cssVarsToStyle, deepMerge, atomix as default, defaultTokens, defineConfig, designTokensToCSSVars, extendTheme, extractComponentName, extractYouTubeId, generateCSSVariableName, generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, generateFontPreloadTags, generateUUID, getAllThemes, getCSSVariable, getComponentCSSVars, getComponentThemeValue, getPartStyles, getTheme, getThemeApplicator, getThemeCount, getThemeIds, hasCustomization, hasTheme, injectCSS, injectTheme, isCSSInjected, isDesignTokens, isSlot, isValidCSSVariableName, isYouTubeUrl, mapSCSSTokensToCSSVars, mergeCSSVars, mergeClassNames, mergeComponentProps, mergePartStyles, mergeSlots, mergeTheme, normalizeThemeTokens, preloadFonts, registerTheme, removeCSS, removeCSSVariables, removeTheme, renderSlot, sliderConstants, theme, themePropertyToCSSVar, types, unregisterTheme, useAccordion, useAtomixGlass, useBadge, useBarChart, useBlock, useBreadcrumb, useCard, useChartData, useChartInteraction, useChartScale, useComponentCustomization, useComponentDefaultProps, useComponentTheme, useDataTable, useEdgePanel, useForm, useFormGroup, useGlassContainer, useHero, useHistory, useInput, useLineChart, useMergedProps, useModal, useNav, useNavDropdown, useNavItem, useNavbar, usePagination, usePieChart, useRadio, useRiver, useSelect, useSideMenu, useSideMenuItem, useSlider, useSlot, useSpinner, useTextarea, useTheme, useThemeTokens, useTodo, utils };
-export type { A11yIssue, AccordionParts, AccordionProps$1 as AccordionProps, AccordionState, AnimatedChartProps, AreaChartProps, AtomixConfig, AtomixGlassProps, AtomixLogoProps, AvatarGroupProps, AvatarParts, AvatarProps, AvatarSize, BadgeCSSVariable, BadgeParts, BadgeProps, BarChartOptions, BarChartProps, BarDimensions, BaseComponentProps, BlockProps, BreadcrumbInstance, BreadcrumbItem$1 as BreadcrumbItem, BreadcrumbOptions$1 as BreadcrumbOptions, BreadcrumbProps, BubbleChartProps, BubbleDataPoint, BuildConfig, ButtonCSSVariable, ButtonGroupProps, ButtonIconSlotProps, ButtonLabelSlotProps, ButtonParts, ButtonProps, ButtonRootSlotProps, ButtonSpinnerSlotProps, CSSThemeDefinition, CSSVariableConfig, CSSVariableNamingOptions, CalloutProps, CandlestickChartProps, CandlestickDataPoint, CardBodySlotProps, CardCSSVariable, CardFooterSlotProps, CardHeaderSlotProps, CardParts, CardProps, CardRootSlotProps, ChartAxis$1 as ChartAxis, ChartConfig$1 as ChartConfig, ChartDataPoint$1 as ChartDataPoint, ChartDataset$1 as ChartDataset, ChartProps$1 as ChartProps, ChartSize$1 as ChartSize, ChartType$1 as ChartType, CheckboxCSSVariable, CheckboxParts, CheckboxProps, CodeBlockProps, ColorModeToggleProps, ColorScale, ComponentCSSVariables, ComponentCustomization, ComponentName, ComponentParts, ComponentPartsMap, ComponentThemeOptions, ComponentThemeOverride, ContainerProps, CountdownProps, CustomizableComponentProps, DataTableColumn, DataTableParts, DataTableProps, DatePickerProps, DesignTokens, DesignTokensCustomizerProps, DisplacementMode, DonutChartProps, DropdownCSSVariable, DropdownDividerProps, DropdownHeaderProps, DropdownItemProps, DropdownMenuSlotProps, DropdownParts, DropdownPlacement, DropdownProps, DropdownRootSlotProps, DropdownToggleSlotProps, DropdownTrigger, EdgePanelMode, EdgePanelPosition, EdgePanelProps, ElementRefs, ElevationCardProps, ExportFormat, FontPreloadConfig, FooterLayout, FooterLinkProps, FooterProps, FooterSectionProps, FooterSocialLinkProps, FormGroupParts, FormGroupProps, FormProps, FunnelChartProps, FunnelDataPoint, GaugeChartProps, GenerateCSSVariablesOptions, GlassContainerProps, GlassMode, GlassSize, GridColProps, GridProps, HeatmapChartProps, HeatmapDataPoint, HeroAlignment, HeroBackgroundSlide, HeroBackgroundSliderConfig, HeroProps, IconPosition, IconProps, IconSize$1 as IconSize, IconWeight$1 as IconWeight, ImageType, InputCSSVariable, InputElementSlotProps, InputParts, InputProps, InputRootSlotProps, IntegrationConfig, JSThemeDefinition, LineChartOptions, LineChartProps, ListGroupProps$1 as ListGroupProps, ListParts, ListProps, MasonryGridItemProps, MasonryGridProps, MegaMenuColumnProps, MegaMenuLinkProps, MegaMenuProps, MenuDividerProps, MenuItemProps, MenuProps, MergePropsOptions, MessageItem, MessagesProps, ModalBackdropSlotProps, ModalCSSVariable, ModalContentSlotProps, ModalDialogSlotProps, ModalParts, ModalProps, ModalRootSlotProps, MousePosition, MultiAxisChartProps, NamingOptions, NavAlignment, NavDropdownProps, NavItemProps, NavProps, NavVariant, NavbarParts, NavbarPosition, NavbarProps, OverLightConfig, OverLightObjectConfig, PaginationProps, PaletteColorOptions, PartStyleProps, PhosphorIconsType$1 as PhosphorIconsType, PhotoViewerProps, PieChartOptions, PieChartProps, PieSlice, PopoverProps, PopoverTriggerProps, ProductReviewProps, ProgressCSSVariable, ProgressParts, ProgressProps, RTLConfig, RadarChartProps, RadioCSSVariable, RadioParts, RadioProps, RatingProps, RiverContentColumn, RiverProps, RowProps, RuntimeConfig, ScatterChartProps, ScatterDataPoint, SectionIntroProps, SelectOption, SelectParts, SelectProps, SelectionMode, SideMenuItemProps, SideMenuListProps, SideMenuProps, Size, SliderAutoplay, SliderBreakpoint, SliderEffect, SliderLazy, SliderNavigation, SliderPagination, SliderProps, SliderRefs, SliderScrollbar, SliderSlide, SliderState, SliderThumbs, SliderVirtual, SliderZoom, SlotProps, SocialLink, SocialPlatform, SortConfig, SpinnerProps, StateModifier, StepsProps, TabsCSSVariable, TabsParts, TabsProps, TestimonialProps, TextareaParts, TextareaProps, Theme, ThemeChangeEvent, ThemeColor, ThemeComparatorProps, ThemeComponentOverrides, ThemeContextValue, ThemeDefinition, ThemeErrorBoundaryProps, ThemeInspectorProps, ThemeLiveEditorProps, ThemeLoadOptions, ThemeName, ThemePreviewProps, ThemeProviderProps, ThemeTokens, ThemeValidationResult, TodoItem, TodoProps, ToggleProps, TooltipCSSVariable, TooltipParts, TooltipProps, TreemapChartProps, TreemapDataPoint, TreemapNode, UploadProps, UseBlockOptions, UseBlockReturn, UseCardOptions, UseCardReturn, UseDataTableProps, UseDataTableReturn, UseHistoryOptions, UseHistoryReturn, UseModalProps, UseModalReturn, UseSliderOptions, UseSliderReturn, UseThemeReturn, ValidationResult, Variant, VideoChapter, VideoPlayerProps, VideoQuality, VideoSubtitle, WaterfallChartProps, WaterfallDataPoint, listvariant };
+export { ACCORDION, ATOMIX_GLASS, AVATAR, AVATAR_GROUP, Accordion, AnimatedChart, AreaChart, AtomixGlass, AtomixLogo, Avatar, AvatarGroup, BADGE, BADGE_CSS_VARS, BLOCK, BREADCRUMB, BUTTON, BUTTON_CSS_VARS, BUTTON_GROUP, Badge, BarChart, Block, Breadcrumb, BubbleChart, Button, ButtonGroup, CALLOUT, CARD, CARD_CSS_VARS, CHART, CHECKBOX_CSS_VARS, CLASS_PREFIX, CODE_SNIPPET, COMPONENT_CSS_VARS, COUNTDOWN, Callout, CandlestickChart, Card, Chart, ChartRenderer, Checkbox, ColorModeToggle, Container, Countdown, DATA_TABLE_CLASSES, DATA_TABLE_SELECTORS, DATEPICKER, DEFAULT_ATOMIX_FONTS, DOTS, DROPDOWN, DROPDOWN_CSS_VARS, DataTable, DatePicker, DesignTokensCustomizer, DonutChart, Dropdown, EDGE_PANEL, EdgePanel, ElevationCard, FOOTER, FORM, FORM_GROUP, Footer, FooterLink, FooterSection, FooterSocialLink, Form, FormGroup, FunnelChart, GaugeChart, Grid, GridCol, HERO, HeatmapChart, Hero, INPUT, INPUT_CSS_VARS, Icon, Input, LIST, LIST_GROUP, LineChart, List, ListGroup, MESSAGES, MODAL, MODAL_CSS_VARS, MasonryGrid, MasonryGridItem, MegaMenu, MegaMenuColumn, MegaMenuLink, Menu, MenuDivider, MenuItem, Messages, Modal, MultiAxisChart, NAV, NAVBAR, Nav, NavDropdown, NavItem, Navbar, PAGINATION_DEFAULTS, PHOTOVIEWER, POPOVER, PROGRESS, PROGRESS_CSS_VARS, Pagination, PhotoViewer, PieChart, Popover, ProductReview, Progress, RADIO, RADIO_CSS_VARS, RATING, RIVER, RTLManager, RadarChart, Radio, Rating, River, Row, SECTION_INTRO, SELECT, SIDE_MENU, SIZES, SLIDER, SPINNER, STEPS, ScatterChart, SectionIntro, Select, SideMenu, SideMenuItem, SideMenuList, Slider, Spinner, Steps, TAB, TABS_CSS_VARS, TESTIMONIAL, TEXTAREA, THEME_COLORS, THEME_NAMING, TODO, TOGGLE, TOOLTIP, TOOLTIP_CSS_VARS, Tabs, Testimonial, Textarea, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeValidator, Todo, Toggle, Tooltip, TreemapChart, UPLOAD, Upload, VIDEO_PLAYER, VideoPlayer, WaterfallChart, applyCSSVariables, applyCSSVarsToStyle, applyComponentTheme, applyPartStyles, applyTheme, camelToKebab, clearThemes, composables, constants, createCSSVarStyle, createDarkVariant, createDebugAttrs, createFontPreloadLink, createPartProps, createSlotComponent, createSlotProps, createTheme, createThemeRegistry, createTokens, cssVarsToStyle, deepMerge, atomix as default, defaultTokens, defineConfig, designTokensToCSSVars, exportTheme, extendTheme, extractComponentName, extractYouTubeId, generateCSSVariableName, generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, generateFontPreloadTags, generateUUID, getAllThemes, getCSSVariable, getComponentCSSVars, getComponentThemeValue, getPartStyles, getTheme, getThemeApplicator, getThemeCount, getThemeIds, getThemeMetadata, hasCustomization, hasTheme, importTheme, injectCSS, injectTheme, isCSSInjected, isDesignTokens, isSlot, isValidCSSVariableName, isYouTubeUrl, mapSCSSTokensToCSSVars, mergeCSSVars, mergeClassNames, mergeComponentProps, mergePartStyles, mergeSlots, mergeTheme, normalizeThemeTokens, preloadFonts, quickTheme, registerTheme, removeCSS, removeCSSVariables, removeTheme, renderSlot, sliderConstants, supportsDarkMode, theme, themePropertyToCSSVar, themeToCSS, types, unregisterTheme, useAccordion, useAtomixGlass, useBadge, useBarChart, useBlock, useBreadcrumb, useCard, useChartData, useChartInteraction, useChartScale, useComponentCustomization, useComponentDefaultProps, useComponentTheme, useDataTable, useEdgePanel, useForm, useFormGroup, useGlassContainer, useHero, useHistory, useInput, useLineChart, useMergedProps, useModal, useNav, useNavDropdown, useNavItem, useNavbar, usePagination, usePieChart, useRadio, useRiver, useSelect, useSideMenu, useSideMenuItem, useSlider, useSlot, useSpinner, useTextarea, useTheme, useThemeTokens, useTodo, utils, validateTheme };
+export type { A11yIssue, AccordionParts, AccordionProps$1 as AccordionProps, AccordionState, AnimatedChartProps, AreaChartProps, AtomixConfig, AtomixGlassProps, AtomixLogoProps, AvatarGroupProps, AvatarParts, AvatarProps, AvatarSize, BadgeCSSVariable, BadgeParts, BadgeProps, BarChartOptions, BarChartProps, BarDimensions, BaseComponentProps, BlockProps, BreadcrumbInstance, BreadcrumbItem$1 as BreadcrumbItem, BreadcrumbOptions$1 as BreadcrumbOptions, BreadcrumbProps, BubbleChartProps, BubbleDataPoint, BuildConfig, ButtonCSSVariable, ButtonGroupProps, ButtonIconSlotProps, ButtonLabelSlotProps, ButtonParts, ButtonProps, ButtonRootSlotProps, ButtonSpinnerSlotProps, CSSThemeDefinition, CSSVariableConfig, CSSVariableNamingOptions, CalloutProps, CandlestickChartProps, CandlestickDataPoint, CardBodySlotProps, CardCSSVariable, CardFooterSlotProps, CardHeaderSlotProps, CardParts, CardProps, CardRootSlotProps, ChartAxis$1 as ChartAxis, ChartConfig$1 as ChartConfig, ChartDataPoint$1 as ChartDataPoint, ChartDataset$1 as ChartDataset, ChartProps$1 as ChartProps, ChartSize$1 as ChartSize, ChartType$1 as ChartType, CheckboxCSSVariable, CheckboxParts, CheckboxProps, CodeBlockProps, ColorModeToggleProps, ColorScale, ComponentCSSVariables, ComponentCustomization, ComponentName, ComponentParts, ComponentPartsMap, ComponentThemeOptions, ComponentThemeOverride, ContainerProps, CountdownProps, CustomizableComponentProps, DataTableColumn, DataTableParts, DataTableProps, DatePickerProps, DesignTokens, DesignTokensCustomizerProps, DisplacementMode, DonutChartProps, DropdownCSSVariable, DropdownDividerProps, DropdownHeaderProps, DropdownItemProps, DropdownMenuSlotProps, DropdownParts, DropdownPlacement, DropdownProps, DropdownRootSlotProps, DropdownToggleSlotProps, DropdownTrigger, EdgePanelMode, EdgePanelPosition, EdgePanelProps, ElementRefs, ElevationCardProps, ExportFormat, FontPreloadConfig, FooterLayout, FooterLinkProps, FooterProps, FooterSectionProps, FooterSocialLinkProps, FormGroupParts, FormGroupProps, FormProps, FunnelChartProps, FunnelDataPoint, GaugeChartProps, GenerateCSSVariablesOptions, GlassContainerProps, GlassMode, GlassSize, GridColProps, GridProps, HeatmapChartProps, HeatmapDataPoint, HeroAlignment, HeroBackgroundSlide, HeroBackgroundSliderConfig, HeroParts, HeroProps, IconPosition, IconProps, IconSize$1 as IconSize, IconWeight$1 as IconWeight, ImageType, InputCSSVariable, InputElementSlotProps, InputParts, InputProps, InputRootSlotProps, IntegrationConfig, JSThemeDefinition, LineChartOptions, LineChartProps, ListGroupProps$1 as ListGroupProps, ListParts, ListProps, MasonryGridItemProps, MasonryGridProps, MegaMenuColumnProps, MegaMenuLinkProps, MegaMenuProps, MenuDividerProps, MenuItemProps, MenuProps, MergePropsOptions, MessageItem, MessagesProps, ModalBackdropSlotProps, ModalCSSVariable, ModalContentSlotProps, ModalDialogSlotProps, ModalParts, ModalProps, ModalRootSlotProps, MousePosition, MultiAxisChartProps, NamingOptions, NavAlignment, NavDropdownProps, NavItemProps, NavProps, NavVariant, NavbarParts, NavbarPosition, NavbarProps, OverLightConfig, OverLightObjectConfig, PaginationProps, PaletteColorOptions, PartStyleProps, PhosphorIconsType$1 as PhosphorIconsType, PhotoViewerProps, PieChartOptions, PieChartProps, PieSlice, PopoverProps, PopoverTriggerProps, ProductReviewProps, ProgressCSSVariable, ProgressParts, ProgressProps, RTLConfig, RadarChartProps, RadioCSSVariable, RadioParts, RadioProps, RatingProps, RiverContentColumn, RiverProps, RowProps, RuntimeConfig, ScatterChartProps, ScatterDataPoint, SectionIntroProps, SelectOption, SelectParts, SelectProps, SelectionMode, SideMenuItemProps, SideMenuListProps, SideMenuProps, Size, SliderAutoplay, SliderBreakpoint, SliderEffect, SliderLazy, SliderNavigation, SliderPagination, SliderProps, SliderRefs, SliderScrollbar, SliderSlide, SliderState, SliderThumbs, SliderVirtual, SliderZoom, SlotProps, SocialLink, SocialPlatform, SortConfig, SpinnerProps, StateModifier, StepsProps, TabsCSSVariable, TabsParts, TabsProps, TestimonialProps, TextareaParts, TextareaProps, Theme, ThemeChangeEvent, ThemeColor, ThemeComparatorProps, ThemeComponentOverrides, ThemeContextValue, ThemeDefinition, ThemeErrorBoundaryProps, ThemeInspectorProps, ThemeLiveEditorProps, ThemeLoadOptions, ThemeName, ThemePreviewProps, ThemeProviderProps, ThemeTokens, ThemeValidationResult, TodoItem, TodoProps, ToggleProps, TooltipCSSVariable, TooltipParts, TooltipProps, TreemapChartProps, TreemapDataPoint, TreemapNode, UploadProps, UseBlockOptions, UseBlockReturn, UseCardOptions, UseCardReturn, UseDataTableProps, UseDataTableReturn, UseHistoryOptions, UseHistoryReturn, UseModalProps, UseModalReturn, UseSliderOptions, UseSliderReturn, UseThemeReturn, ValidationResult, Variant, VideoChapter, VideoPlayerProps, VideoQuality, VideoSubtitle, WaterfallChartProps, WaterfallDataPoint, listvariant };

package/dist/index.esm.js

@@ -9037,7 +9037,9 @@ function getRowId$1(row, rowKey) {
             }))) return !1;
             // Apply column-specific filters
                         for (let i = 0; i < activeColumnFilters.length; i++) {
-                const {key: key, value: value, lowercaseValue: lowercaseValue, column: column} = activeColumnFilters[i], cellValue = row[key];
+                const filter = activeColumnFilters[i];
+                if (!filter) continue;
+                const {key: key, value: value, lowercaseValue: lowercaseValue, column: column} = filter, cellValue = row[key];
                 if (null == cellValue) return !1;
                 // Use custom filter function if provided
                                 var _context2;
@@ -11016,6 +11018,8 @@ function useHero(initialProps) {
         contentWidth: void 0,
         parallax: !1,
         parallaxIntensity: .5,
+        headingLevel: "h1",
+        reverseOnMobile: !1,
         ...initialProps
     }, hasBackgroundSlider = !!defaultProps.backgroundSlider, backgroundSliderResult = 
     /**
@@ -11096,7 +11100,9 @@ function useHero(initialProps) {
         autoplay: {
             delay: 5e3,
             pauseOnHover: !0
-        }
+        },
+        transition: "fade",
+        transitionDuration: 1e3
     }), backgroundSlider = hasBackgroundSlider && defaultProps.backgroundSlider ? backgroundSliderResult : void 0, hasBackgroundImage = !!hasBackgroundSlider || !!defaultProps.backgroundImageSrc || !!defaultProps.videoBackground, hasForegroundImage = !!defaultProps.imageSrc, useGridLayout = hasForegroundImage && "center" !== defaultProps.alignment, applyParallaxEffect = (element, intensity = .5) => {
         if (!element) return;
         // Ensure intensity is between 0 and 1
@@ -11147,13 +11153,20 @@ function useHero(initialProps) {
             defaultProps.videoBackground && classes.push("c-hero--video"), baseClassName && classes.push(baseClassName), 
             classes.join(" ");
         },
-        generateImageColClass: (size = defaultProps.imageColSize || 7) => {
+        generateImageColClass: (size = defaultProps.imageColSize || 7, customClass) => {
             const classes = [ `o-grid__col o-grid__col--md-${size}` ];
             // Add responsive margin if needed for mobile view
                         return "left" === defaultProps.alignment && classes.push("u-mt-5 u-mt-md-0"), 
-            classes.join(" ");
+            // Handle mobile stacking order
+            defaultProps.reverseOnMobile && ("right" === defaultProps.alignment || "center" === defaultProps.alignment ? classes.push("u-order-first u-order-md-last") : classes.push("u-order-last u-order-md-first")), 
+            customClass && classes.push(customClass), classes.join(" ");
+        },
+        generateContentColClass: (size = defaultProps.contentColSize || 5, customClass) => {
+            const classes = [ `o-grid__col o-grid__col--md-${size}` ];
+            // Handle mobile stacking order
+                        return defaultProps.reverseOnMobile && ("right" === defaultProps.alignment || "center" === defaultProps.alignment ? classes.push("u-order-last u-order-md-first") : classes.push("u-order-first u-order-md-last")), 
+            customClass && classes.push(customClass), classes.join(" ");
         },
-        generateContentColClass: (size = defaultProps.contentColSize || 5) => `o-grid__col o-grid__col--md-${size}`,
         hasBackgroundImage: hasBackgroundImage,
         hasForegroundImage: hasForegroundImage,
         useGridLayout: useGridLayout,
@@ -13427,12 +13440,14 @@ const FooterLink =  forwardRef((({href: href, icon: icon, external: external = !
 
 FooterLink.displayName = "FooterLink";
 
-const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc, imageAlt: imageAlt = "Hero image", alignment: alignment = "left", backgroundImageSrc: backgroundImageSrc, showOverlay: showOverlay = !0, fullViewportHeight: fullViewportHeight = !1, actions: actions, imageColSize: imageColSize = 7, contentColSize: contentColSize = 5, contentWidth: contentWidth, className: className = "", style: style, parallax: parallax = !1, parallaxIntensity: parallaxIntensity = .5, videoBackground: videoBackground, children: children, glass: glass, videoOptions: videoOptions = {
+const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc, imageAlt: imageAlt = "Hero image", alignment: alignment = "left", backgroundImageSrc: backgroundImageSrc, showOverlay: showOverlay = !0, fullViewportHeight: fullViewportHeight = !1, actions: actions, imageColSize: imageColSize = 7, imageColClassName: imageColClassName, imageColStyle: imageColStyle, contentColSize: contentColSize = 5, contentColClassName: contentColClassName, contentColStyle: contentColStyle, contentWidth: contentWidth, className: className = "", style: style, parallax: parallax = !1, parallaxIntensity: parallaxIntensity = .5, videoBackground: videoBackground, children: children, glass: glass, videoOptions: videoOptions = {
     autoplay: !0,
     loop: !0,
     muted: !0
-}, backgroundSlider: backgroundSlider}) => {
-    const {generateHeroClassNames: generateHeroClassNames, generateImageColClass: generateImageColClass, generateContentColClass: generateContentColClass, hasBackgroundImage: hasBackgroundImage, hasForegroundImage: hasForegroundImage, useGridLayout: useGridLayout, heroRef: heroRef, videoRef: videoRef, backgroundSlider: sliderHook, hasBackgroundSlider: hasBackgroundSlider} = useHero({
+}, backgroundSlider: backgroundSlider, headingLevel: headingLevel = "h1", reverseOnMobile: reverseOnMobile = !1, parts: parts, ...rest}) => {
+    // Define dynamic heading tag
+    const HeadingTag = headingLevel, {generateHeroClassNames: generateHeroClassNames, generateImageColClass: generateImageColClass, generateContentColClass: generateContentColClass, hasBackgroundImage: hasBackgroundImage, hasForegroundImage: hasForegroundImage, useGridLayout: useGridLayout, heroRef: heroRef, videoRef: videoRef, backgroundSlider: sliderHook, hasBackgroundSlider: hasBackgroundSlider} = useHero({
+        title: title,
         alignment: alignment,
         imageColSize: imageColSize,
         contentColSize: contentColSize,
@@ -13444,7 +13459,8 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
         parallax: parallax,
         parallaxIntensity: parallaxIntensity,
         videoBackground: videoBackground,
-        backgroundSlider: backgroundSlider
+        backgroundSlider: backgroundSlider,
+        reverseOnMobile: reverseOnMobile
     }), heroStyle = {
         ...contentWidth ? {
             "--atomix-hero-content-width": contentWidth
@@ -13468,18 +13484,23 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
         });
     }, renderContent = () => {
         const content = jsxs("div", {
-            className: HERO.SELECTORS.CONTENT.replace(".", ""),
+            className: `${HERO.SELECTORS.CONTENT.replace(".", "")} ${parts?.content?.className || ""}`.trim(),
+            style: parts?.content?.style,
             children: [ subtitle && jsx("p", {
-                className: HERO.SELECTORS.SUBTITLE.replace(".", ""),
+                className: `${HERO.SELECTORS.SUBTITLE.replace(".", "")} ${parts?.subtitle?.className || ""}`.trim(),
+                style: parts?.subtitle?.style,
                 children: subtitle
-            }), jsx("h1", {
-                className: HERO.SELECTORS.TITLE.replace(".", ""),
+            }), jsx(HeadingTag, {
+                className: `${HERO.SELECTORS.TITLE.replace(".", "")} ${parts?.title?.className || ""}`.trim(),
+                style: parts?.title?.style,
                 children: title
             }), text && jsx("p", {
-                className: HERO.SELECTORS.TEXT.replace(".", ""),
+                className: `${HERO.SELECTORS.TEXT.replace(".", "")} ${parts?.text?.className || ""}`.trim(),
+                style: parts?.text?.style,
                 children: text
             }), actions && jsx("div", {
-                className: HERO.SELECTORS.ACTIONS.replace(".", ""),
+                className: `${HERO.SELECTORS.ACTIONS.replace(".", "")} ${parts?.actions?.className || ""}`.trim(),
+                style: parts?.actions?.style,
                 children: actions
             }) ]
         });
@@ -13489,7 +13510,8 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
         glass ? jsx("div", 
         // If glass is true, use default glass props
         !0 === glass ? {
-            className: HERO.SELECTORS.CONTENT.replace(".", ""),
+            className: `${HERO.SELECTORS.CONTENT.replace(".", "")} ${parts?.content?.className || ""}`.trim(),
+            style: parts?.content?.style,
             children: jsx(AtomixGlass, {
                 displacementScale: 60,
                 blurAmount: 3,
@@ -13501,71 +13523,93 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
                 children: jsxs("div", {
                     className: "u-p-4",
                     children: [ subtitle && jsx("p", {
-                        className: HERO.SELECTORS.SUBTITLE.replace(".", ""),
+                        className: `${HERO.SELECTORS.SUBTITLE.replace(".", "")} ${parts?.subtitle?.className || ""}`.trim(),
+                        style: parts?.subtitle?.style,
                         children: subtitle
-                    }), jsx("h1", {
-                        className: HERO.SELECTORS.TITLE.replace(".", ""),
+                    }), jsx(HeadingTag, {
+                        className: `${HERO.SELECTORS.TITLE.replace(".", "")} ${parts?.title?.className || ""}`.trim(),
+                        style: parts?.title?.style,
                         children: title
                     }), text && jsx("p", {
-                        className: HERO.SELECTORS.TEXT.replace(".", ""),
+                        className: `${HERO.SELECTORS.TEXT.replace(".", "")} ${parts?.text?.className || ""}`.trim(),
+                        style: parts?.text?.style,
                         children: text
                     }), actions && jsx("div", {
-                        className: HERO.SELECTORS.ACTIONS.replace(".", ""),
+                        className: `${HERO.SELECTORS.ACTIONS.replace(".", "")} ${parts?.actions?.className || ""}`.trim(),
+                        style: parts?.actions?.style,
                         children: actions
                     }) ]
                 })
             })
         } : {
-            className: HERO.SELECTORS.CONTENT.replace(".", ""),
+            className: `${HERO.SELECTORS.CONTENT.replace(".", "")} ${parts?.content?.className || ""}`.trim(),
+            style: parts?.content?.style,
             children: jsx(AtomixGlass, {
                 ...glass,
                 children: jsxs("div", {
                     className: "u-p-4",
                     children: [ subtitle && jsx("p", {
-                        className: HERO.SELECTORS.SUBTITLE.replace(".", ""),
+                        className: `${HERO.SELECTORS.SUBTITLE.replace(".", "")} ${parts?.subtitle?.className || ""}`.trim(),
+                        style: parts?.subtitle?.style,
                         children: subtitle
-                    }), jsx("h1", {
-                        className: HERO.SELECTORS.TITLE.replace(".", ""),
+                    }), jsx(HeadingTag, {
+                        className: `${HERO.SELECTORS.TITLE.replace(".", "")} ${parts?.title?.className || ""}`.trim(),
+                        style: parts?.title?.style,
                         children: title
                     }), text && jsx("p", {
-                        className: HERO.SELECTORS.TEXT.replace(".", ""),
+                        className: `${HERO.SELECTORS.TEXT.replace(".", "")} ${parts?.text?.className || ""}`.trim(),
+                        style: parts?.text?.style,
                         children: text
                     }), actions && jsx("div", {
-                        className: HERO.SELECTORS.ACTIONS.replace(".", ""),
+                        className: `${HERO.SELECTORS.ACTIONS.replace(".", "")} ${parts?.actions?.className || ""}`.trim(),
+                        style: parts?.actions?.style,
                         children: actions
                     }) ]
                 })
             })
         }) : content;
     }, renderForegroundImage = () => hasForegroundImage ? jsx("div", "center" === alignment ? {
-        className: HERO.SELECTORS.IMAGE_WRAPPER.replace(".", ""),
+        className: `${HERO.SELECTORS.IMAGE_WRAPPER.replace(".", "")} ${imageColClassName || ""} ${parts?.imageWrapper?.className || ""}`.trim(),
+        style: {
+            ...imageColStyle,
+            ...parts?.imageWrapper?.style
+        },
         children: jsx("img", {
             src: imageSrc,
             alt: imageAlt,
-            className: HERO.SELECTORS.IMAGE.replace(".", "")
+            className: `${HERO.SELECTORS.IMAGE.replace(".", "")} ${parts?.image?.className || ""}`.trim(),
+            style: parts?.image?.style
         })
     } : {
-        className: generateImageColClass(),
+        className: `${generateImageColClass(imageColSize, imageColClassName)} ${parts?.imageWrapper?.className || ""}`.trim(),
+        style: {
+            ...imageColStyle,
+            ...parts?.imageWrapper?.style
+        },
         children: jsx("img", {
             src: imageSrc,
             alt: imageAlt,
-            className: HERO.SELECTORS.IMAGE.replace(".", "")
+            className: `${HERO.SELECTORS.IMAGE.replace(".", "")} ${parts?.image?.className || ""}`.trim(),
+            style: parts?.image?.style
         })
     }) : null;
-    // Create custom style for hero element with content width if provided
-        return jsxs("div", {
+    return jsxs("div", {
         ref: heroRef,
-        className: generateHeroClassNames(className),
-        style: heroStyle,
+        className: `${generateHeroClassNames(className)} ${parts?.root?.className || ""}`.trim(),
+        style: {
+            ...heroStyle,
+            ...parts?.root?.style
+        },
         "data-parallax": parallax ? "true" : void 0,
         "data-parallax-intensity": parallax ? parallaxIntensity : void 0,
+        ...rest,
         children: [ (() => {
             // Render background slider if configured
             if (hasBackgroundSlider && backgroundSlider && sliderHook) {
                 const {slides: slides, transition: transition = "fade", transitionDuration: transitionDuration = 1e3} = backgroundSlider, {currentIndex: currentIndex, slideRefs: slideRefs, videoRefs: videoRefs} = sliderHook;
                 // Determine transition class
                 let transitionClass = HERO.CLASSES.SLIDER_FADE;
-                return "slide" === transition ? transitionClass = HERO.CLASSES.SLIDER_SLIDE : "custom" === transition && (transitionClass = HERO.CLASSES.SLIDER_CUSTOM), 
+                return "slide" === transition && (transitionClass = HERO.CLASSES.SLIDER_SLIDE), 
                 jsxs("div", {
                     className: `${HERO.SELECTORS.SLIDER.replace(".", "")} ${transitionClass}`,
                     style: {
@@ -13582,57 +13626,68 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
                         return jsx("div", {
                             ref: slideRef,
                             className: `${HERO.SELECTORS.SLIDER_ITEM.replace(".", "")} ${isActive ? HERO.CLASSES.SLIDER_ITEM_ACTIVE : ""}`,
-                            children: "image" === slide.type ? jsx("img", {
-                                src: slide.src,
-                                alt: slide.alt || "Background slide",
-                                className: HERO.SELECTORS.BG_IMAGE.replace(".", "")
-                            }) : jsxs("video", {
+                            "aria-hidden": !isActive,
+                            children: "video" === slide.type ? jsxs("video", {
                                 ref: videoRef,
-                                className: "c-hero__video",
-                                autoPlay: !1 !== slide.videoOptions?.autoplay,
-                                loop: !1 !== slide.videoOptions?.loop,
-                                muted: !1 !== slide.videoOptions?.muted,
+                                className: "c-hero__bg-video",
+                                src: slide.src,
+                                poster: slide.videoOptions?.posterUrl || slide.alt,
+                                muted: slide.videoOptions?.muted ?? !0,
+                                loop: slide.videoOptions?.loop ?? !0,
                                 playsInline: !0,
-                                poster: slide.videoOptions?.posterUrl,
+                                "aria-hidden": "true",
+                                autoPlay: !1 !== slide.videoOptions?.autoplay,
                                 children: [ jsx("source", {
                                     src: slide.src,
                                     type: `video/${slide.src.split(".").pop() || "mp4"}`
                                 }), "Your browser does not support the video tag." ]
+                            }) : jsx("img", {
+                                src: slide.src,
+                                alt: slide.alt || "Background slide",
+                                className: HERO.SELECTORS.BG_IMAGE.replace(".", "")
                             })
                         }, index);
                     })), showOverlay && jsx("div", {
-                        className: HERO.SELECTORS.OVERLAY.replace(".", "")
+                        className: `${HERO.SELECTORS.OVERLAY.replace(".", "")} ${parts?.overlay?.className || ""}`.trim(),
+                        style: parts?.overlay?.style
                     }) ]
                 });
             }
             // Fall back to single background image/video
                         return hasBackgroundImage || videoBackground ? jsxs("div", {
-                className: HERO.SELECTORS.BG.replace(".", ""),
+                className: `${HERO.SELECTORS.BG.replace(".", "")} ${parts?.background?.className || ""}`.trim(),
+                style: parts?.background?.style,
                 children: [ backgroundImageSrc && jsx("img", {
                     src: backgroundImageSrc,
                     alt: "Background",
                     className: HERO.SELECTORS.BG_IMAGE.replace(".", "")
                 }), renderVideoBackground(), showOverlay && jsx("div", {
-                    className: HERO.SELECTORS.OVERLAY.replace(".", "")
+                    className: `${HERO.SELECTORS.OVERLAY.replace(".", "")} ${parts?.overlay?.className || ""}`.trim(),
+                    style: parts?.overlay?.style
                 }) ]
             }) : null;
         })(), jsx("div", {
-            className: `${HERO.SELECTORS.CONTAINER.replace(".", "")} o-container`,
+            className: `${HERO.SELECTORS.CONTAINER.replace(".", "")} o-container ${parts?.container?.className || ""}`.trim(),
+            style: parts?.container?.style,
             children: children ? jsx("div", {
-                className: HERO.SELECTORS.GRID.replace(".", ""),
+                className: `${HERO.SELECTORS.GRID.replace(".", "")} ${parts?.grid?.className || ""}`.trim(),
+                style: parts?.grid?.style,
                 children: children
             }) : useGridLayout ? jsx("div", {
-                className: `${HERO.SELECTORS.GRID.replace(".", "")} o-grid`,
+                className: `${HERO.SELECTORS.GRID.replace(".", "")} o-grid ${parts?.grid?.className || ""}`.trim(),
+                style: parts?.grid?.style,
                 children: jsxs(Fragment, 
                 // For left-aligned content, render content first then image
                 "left" === alignment ? {
                     children: [ jsx("div", {
-                        className: generateContentColClass(),
+                        className: generateContentColClass(contentColSize, contentColClassName),
+                        style: contentColStyle,
                         children: renderContent()
                     }), renderForegroundImage() ]
                 } : {
                     children: [ renderForegroundImage(), jsx("div", {
-                        className: generateContentColClass(),
+                        className: generateContentColClass(contentColSize, contentColClassName),
+                        style: contentColStyle,
                         children: renderContent()
                     }) ]
                 })
@@ -17275,7 +17330,7 @@ const Toggle = ({checked: controlledChecked, defaultChecked: defaultChecked = !1
         if (disabled) return;
         const nextChecked = !isChecked;
         isControlled || setInternalChecked(nextChecked), onChange?.(nextChecked);
-    }), [ disabled, isChecked, isControlled, onChange ]), toggleClass = [ "c-toggle", isChecked && TOGGLE.CLASSES.IS_ON, disabled && "is-disabled", className ].filter(Boolean).join(" "), toggleContent = jsx("div", {
+    }), [ disabled, isChecked, isControlled, onChange ]), toggleClass = [ "c-toggle", isChecked && TOGGLE.CLASSES.IS_ON, disabled && "is-disabled", glass && "c-toggle--glass", className ].filter(Boolean).join(" "), toggleContent = jsx("div", {
         className: toggleClass,
         style: style,
         onClick: handleClick,