@shohojdhara/atomix 0.4.3 → 0.4.5

package/dist/index.esm.js

@@ -2198,7 +2198,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
 }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, isHovered: isHovered = !1, isActive: isActive = !1, overLight: overLight = !1, overLightConfig: overLightConfig = {}, borderRadius: borderRadius = 0, padding: padding = "0 0", glassSize: glassSize = {
     width: 0,
     height: 0
-}, onClick: onClick, mode: mode = "standard", effectiveWithoutEffects: effectiveWithoutEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", withLiquidBlur: withLiquidBlur = !1, elasticity: elasticity = 0, contentRef: contentRef}, ref) => {
+}, onClick: onClick, mode: mode = "standard", effectiveWithoutEffects: effectiveWithoutEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", withLiquidBlur: withLiquidBlur = !1, contentRef: contentRef}, ref) => {
     // Generate a stable, deterministic ID for SSR compatibility
     // Use a module-level counter that's consistent across server and client
     const filterId = useMemo((() => "atomix-glass-filter-" + ++idCounter), []), [shaderMapUrl, setShaderMapUrl] = useState(""), shaderGeneratorRef = useRef(null), shaderUtilsRef = useRef(null), shaderDebounceTimeoutRef = useRef(null);
@@ -2394,7 +2394,6 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
             children: [ jsxs("div", {
                 className: ATOMIX_GLASS.FILTER_CLASS,
                 style: {
-                    zIndex: 1,
                     position: "absolute",
                     inset: 0
                 },
@@ -2430,9 +2429,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                 className: ATOMIX_GLASS.CONTENT_CLASS,
                 style: {
                     position: "relative",
-                    textShadow: "var(--atomix-glass-container-text-shadow)",
-                    // Ensure content is always above the filter layer (zIndex 1)
-                    zIndex: elasticity > 0 ? 100 : 2
+                    textShadow: "var(--atomix-glass-container-text-shadow)"
                 },
                 children: children
             }) ]
@@ -3305,7 +3302,6 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             effectiveWithoutEffects: effectiveWithoutEffects,
             effectiveReducedMotion: effectiveReducedMotion,
             shaderVariant: shaderVariant,
-            elasticity: elasticity,
             withLiquidBlur: withLiquidBlur,
             children: children
         }), Boolean(onClick) && jsxs(Fragment, {
@@ -3330,17 +3326,9 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             }) ]
         }), withBorder && jsxs(Fragment, {
             children: [ jsx("span", {
-                className: ATOMIX_GLASS.BORDER_1_CLASS,
-                style: {
-                    width: glassSize.width,
-                    height: glassSize.height
-                }
+                className: ATOMIX_GLASS.BORDER_1_CLASS
             }), jsx("span", {
-                className: ATOMIX_GLASS.BORDER_2_CLASS,
-                style: {
-                    width: glassSize.width,
-                    height: glassSize.height
-                }
+                className: ATOMIX_GLASS.BORDER_2_CLASS
             }) ]
         }) ]
     });
@@ -4099,7 +4087,7 @@ const BreadcrumbItem =  forwardRef((({children: children, href: href, active: ac
 
 BreadcrumbItem.displayName = "BreadcrumbItem";
 
-const Breadcrumb =  memo((function({items: items, divider: divider, className: className = "", "aria-label": ariaLabel = "Breadcrumb", LinkComponent: LinkComponent, style: style, children: children}) {
+const Breadcrumb =  memo((function({items: items, divider: divider, className: className = "", "aria-label": ariaLabel = "Breadcrumb", linkComponent: linkComponent, style: style, children: children}) {
     const breadcrumbClasses = [ BREADCRUMB.CLASSES.BASE, className ].filter(Boolean).join(" ");
     let content;
     if (items && items.length > 0) 
@@ -4113,7 +4101,7 @@ const Breadcrumb =  memo((function({items: items, divider: divider, className: c
             onClick: item.onClick,
             className: item.className,
             style: item.style,
-            linkAs: LinkComponent,
+            linkAs: linkComponent,
             children: item.label
         }, index);
     })); else {
@@ -4125,7 +4113,7 @@ const Breadcrumb =  memo((function({items: items, divider: divider, className: c
                 
                 return cloneElement(child, {
                     active: active ?? (!!isLast || void 0),
-                    linkAs: linkAs ?? LinkComponent
+                    linkAs: linkAs ?? linkComponent
                 });
             }
             return child;
@@ -4299,7 +4287,7 @@ class ThemeNaming {
 
 ThemeNaming.prefix = "atomix";
 
-const Button =  React.memo( forwardRef((({label: label, children: children, onClick: onClick, variant: variant = "primary", size: size = "md", disabled: disabled = !1, loading: loading = !1, loadingText: loadingText, icon: icon, iconName: iconName, iconSize: iconSize = "sm", iconPosition: iconPosition = "start", iconOnly: iconOnly = !1, rounded: rounded = !1, fullWidth: fullWidth = !1, block: block = !1, active: active = !1, selected: selected = !1, type: type = "button", className: className = "", as: Component = "button", href: href, target: target, glass: glass, onHover: onHover, onFocus: onFocus, onBlur: onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, tabIndex: tabIndex, style: style, LinkComponent: LinkComponent, ...props}, ref) => {
+const Button =  React.memo( forwardRef((({label: label, children: children, onClick: onClick, variant: variant = "primary", size: size = "md", disabled: disabled = !1, loading: loading = !1, loadingText: loadingText, icon: icon, iconName: iconName, iconSize: iconSize = "sm", iconPosition: iconPosition = "start", iconOnly: iconOnly = !1, rounded: rounded = !1, fullWidth: fullWidth = !1, block: block = !1, active: active = !1, selected: selected = !1, type: type = "button", className: className = "", as: Component = "button", href: href, target: target, glass: glass, onHover: onHover, onFocus: onFocus, onBlur: onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, tabIndex: tabIndex, style: style, linkComponent: linkComponent, ...props}, ref) => {
     const isDisabled = disabled || loading, shouldRenderAsLink = Boolean(href && !isDisabled), iconElement = iconName ? jsx(Icon, {
         name: iconName,
         size: iconSize
@@ -4350,12 +4338,12 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
         let content;
     // Render as anchor if href is provided
         if (shouldRenderAsLink) 
-    // Use custom LinkComponent if provided (e.g., Next.js Link)
-    if (LinkComponent) {
-        const LinkComp = LinkComponent, linkProps = {
+    // Use custom linkComponent if provided (e.g., Next.js Link)
+    if (linkComponent) {
+        const LinkComp = linkComponent, linkProps = {
             ...buttonProps,
             ref: ref,
-            // LinkComponent usually forwards ref to anchor
+            // linkComponent usually forwards ref to anchor
             href: href,
             to: href,
             target: target,
@@ -4653,7 +4641,7 @@ header: header, image: image, imageAlt: imageAlt = "", title: title, text: text,
 // Interaction
 onClick: onClick, onHover: onHover, onFocus: onFocus, href: href, target: target, 
 // Custom Link
-LinkComponent: LinkComponent, 
+linkComponent: linkComponent, 
 // Glass
 glass: glass, 
 // Accessibility
@@ -4738,7 +4726,7 @@ className: className = "", style: style, ...rest}, ref) => {
     // Render as anchor if href is provided
     if (href && !isDisabled) {
         let anchorElement;
-        return anchorElement = LinkComponent ? jsx(LinkComponent, {
+        return anchorElement = linkComponent ? jsx(linkComponent, {
             ...commonProps,
             ref: ref,
             href: href,
@@ -9829,7 +9817,7 @@ DropdownTrigger.displayName = "DropdownTrigger";
 /**
  * DropdownItem component for menu items
  */
-const DropdownItem =  memo((({children: children, href: href, active: active = !1, disabled: disabled = !1, icon: icon, onClick: onClick, className: className = "", LinkComponent: LinkComponent, ...props}) => {
+const DropdownItem =  memo((({children: children, href: href, target: target, active: active = !1, disabled: disabled = !1, icon: icon, onClick: onClick, className: className = "", linkComponent: linkComponent, ...props}) => {
     const {close: close} = useContext(DropdownContext), handleClick = e => {
         disabled ? e.preventDefault() : (onClick && onClick(e), 
         // Always close the dropdown when an item is clicked
@@ -9837,6 +9825,7 @@ const DropdownItem =  memo((({children: children, href: href, active: active = !
     }, itemClasses = [ "c-dropdown__menu-item", active ? "is-active" : "", disabled ? "is-disabled" : "", className ].filter(Boolean).join(" "), linkProps = {
         href: href,
         to: href,
+        target: target,
         className: itemClasses,
         onClick: handleClick,
         role: "menuitem",
@@ -9844,7 +9833,7 @@ const DropdownItem =  memo((({children: children, href: href, active: active = !
         ...props
     };
     return jsx("li", href && !disabled ? {
-        children: jsxs(LinkComponent || "a", {
+        children: jsxs(linkComponent || "a", {
             ...linkProps,
             children: [ icon && jsx("span", {
                 className: "c-dropdown__menu-item-icon",
@@ -12567,7 +12556,7 @@ function useTodo(initialProps) {
 }
 
 function useSlider(options) {
-    const {slides: slides, slidesToShow: slidesToShow = 1, spaceBetween: spaceBetween = 0, loop: loop = !1, initialSlide: initialSlide = 0, direction: direction = "horizontal", speed: speed = 300, allowTouchMove: allowTouchMove = !0, threshold: threshold = 50, autoplay: autoplay, onSlideChange: onSlideChange} = options, containerRef = useRef(null), wrapperRef = useRef(null), repositioningRef = useRef(!1), autoplayRef = useRef(null), [autoplayRunning, setAutoplayRunning] = useState(!1), sliderStateRef = useRef({
+    const {slides: rawSlides, slidesToShow: slidesToShow = 1, spaceBetween: spaceBetween = 0, loop: loop = !1, initialSlide: initialSlide = 0, direction: direction = "horizontal", speed: speed = 300, allowTouchMove: allowTouchMove = !0, threshold: threshold = 50, autoplay: autoplay, onSlideChange: onSlideChange} = options, slides = Array.isArray(rawSlides) ? rawSlides : [], containerRef = useRef(null), wrapperRef = useRef(null), repositioningRef = useRef(!1), autoplayRef = useRef(null), [autoplayRunning, setAutoplayRunning] = useState(!1), sliderStateRef = useRef({
         isTransitioning: !1,
         loop: loop,
         slides: slides,
@@ -13267,7 +13256,60 @@ const Textarea =  memo( forwardRef((({value: value, defaultValue: defaultValue,
 
 Textarea.displayName = "Textarea";
 
-/**
+// ─── Platform Maps ───────────────────────────────────────────────
+const PLATFORM_ICON_MAP = {
+    facebook: "FacebookLogo",
+    twitter: "TwitterLogo",
+    instagram: "InstagramLogo",
+    linkedin: "LinkedinLogo",
+    youtube: "YoutubeLogo",
+    github: "GithubLogo",
+    discord: "DiscordLogo",
+    tiktok: "TiktokLogo",
+    pinterest: "PinterestLogo",
+    snapchat: "SnapchatLogo",
+    whatsapp: "WhatsappLogo",
+    telegram: "TelegramLogo",
+    reddit: "RedditLogo",
+    twitch: "TwitchLogo",
+    spotify: "SpotifyLogo",
+    dribbble: "DribbbleLogo",
+    behance: "BehanceLogo",
+    medium: "MediumLogo",
+    dev: "DevToLogo",
+    codepen: "CodepenLogo"
+}, PLATFORM_LABEL_MAP = {
+    facebook: "Facebook",
+    twitter: "Twitter",
+    instagram: "Instagram",
+    linkedin: "LinkedIn",
+    youtube: "YouTube",
+    github: "GitHub",
+    discord: "Discord",
+    tiktok: "TikTok",
+    pinterest: "Pinterest",
+    snapchat: "Snapchat",
+    whatsapp: "WhatsApp",
+    telegram: "Telegram",
+    reddit: "Reddit",
+    twitch: "Twitch",
+    spotify: "Spotify",
+    dribbble: "Dribbble",
+    behance: "Behance",
+    medium: "Medium",
+    dev: "Dev.to",
+    codepen: "CodePen"
+}, getPlatformIcon = platform => {
+    const iconName = PLATFORM_ICON_MAP[platform];
+    return jsx(Icon, iconName ? {
+        name: iconName
+    } : {
+        name: "Link"
+    });
+}, FooterSocialLink =  forwardRef((({platform: platform, url: url, icon: icon, label: label, size: size = "md", variant: variant = "default", disabled: disabled = !1, className: className = "", ...props}, ref) => {
+    const linkClass = [ "c-footer__social-link", `c-footer__social-link--${platform}`, `c-footer__social-link--${size}`, `c-footer__social-link--${variant}`, disabled && "c-footer__social-link--disabled", className ].filter(Boolean).join(" "), ariaLabel = label || `Follow us on ${(platform => PLATFORM_LABEL_MAP[platform] || platform)
+    // ─── Component ───────────────────────────────────────────────────
+    /**
  * FooterSocialLink component provides styled social media links with platform-specific icons.
  *
  * @example
@@ -13275,30 +13317,7 @@ Textarea.displayName = "Textarea";
  * <FooterSocialLink platform="twitter" url="https://twitter.com/company" />
  * <FooterSocialLink platform="custom" url="https://example.com" icon={<CustomIcon />} label="Custom Platform" />
  * ```
- */
-const FooterSocialLink =  forwardRef((({platform: platform, url: url, icon: icon, label: label, size: size = "md", variant: variant = "default", disabled: disabled = !1, className: className = "", ...props}, ref) => {
-    const linkClass = [ "c-footer__social-link", `c-footer__social-link--${platform}`, `c-footer__social-link--${size}`, `c-footer__social-link--${variant}`, disabled && "c-footer__social-link--disabled", className ].filter(Boolean).join(" "), ariaLabel = label || `Follow us on ${(platform => ({
-        facebook: "Facebook",
-        twitter: "Twitter",
-        instagram: "Instagram",
-        linkedin: "LinkedIn",
-        youtube: "YouTube",
-        github: "GitHub",
-        discord: "Discord",
-        tiktok: "TikTok",
-        pinterest: "Pinterest",
-        snapchat: "Snapchat",
-        whatsapp: "WhatsApp",
-        telegram: "Telegram",
-        reddit: "Reddit",
-        twitch: "Twitch",
-        spotify: "Spotify",
-        dribbble: "Dribbble",
-        behance: "Behance",
-        medium: "Medium",
-        dev: "Dev.to",
-        codepen: "CodePen"
-    }[platform] || platform))(platform)}`;
+ */ (platform)}`;
     return jsxs("a", {
         ref: ref,
         href: disabled ? void 0 : url,
@@ -13310,35 +13329,7 @@ const FooterSocialLink =  forwardRef((({platform: platform, url: url, icon: icon
         ...props,
         children: [ jsx("span", {
             className: "c-footer__social-link-icon",
-            children: icon || (platform => {
-                const iconName = {
-                    facebook: "FacebookLogo",
-                    twitter: "TwitterLogo",
-                    instagram: "InstagramLogo",
-                    linkedin: "LinkedinLogo",
-                    youtube: "YoutubeLogo",
-                    github: "GithubLogo",
-                    discord: "DiscordLogo",
-                    tiktok: "TiktokLogo",
-                    pinterest: "PinterestLogo",
-                    snapchat: "SnapchatLogo",
-                    whatsapp: "WhatsappLogo",
-                    telegram: "TelegramLogo",
-                    reddit: "RedditLogo",
-                    twitch: "TwitchLogo",
-                    spotify: "SpotifyLogo",
-                    dribbble: "DribbbleLogo",
-                    behance: "BehanceLogo",
-                    medium: "MediumLogo",
-                    dev: "DevToLogo",
-                    codepen: "CodepenLogo"
-                }[platform];
-                return jsx(Icon, iconName ? {
-                    name: iconName
-                } : {
-                    name: "Link"
-                });
-            })(platform)
+            children: icon || getPlatformIcon(platform)
         }), jsx("span", {
             className: "c-footer__social-link-label u-visually-hidden",
             children: ariaLabel
@@ -13461,17 +13452,83 @@ Row.displayName = "Row";
  * ```
  */
 const Footer =  forwardRef((({brand: brand, brandLogo: brandLogo, brandDescription: brandDescription, copyright: copyright, layout: layout = "columns", variant: variant = "primary", size: size = "md", showNewsletter: showNewsletter = !1, newsletterTitle: newsletterTitle = "Stay Updated", newsletterDescription: newsletterDescription = "Subscribe to our newsletter for the latest updates.", newsletterPlaceholder: newsletterPlaceholder = "Enter your email", newsletterButtonText: newsletterButtonText = "Subscribe", onNewsletterSubmit: onNewsletterSubmit, socialLinks: socialLinks = [], showBackToTop: showBackToTop = !1, backToTopText: backToTopText = "Back to Top", onBackToTop: onBackToTop, showDivider: showDivider = !0, sticky: sticky = !1, children: children, className: className = "", disabled: disabled = !1, glass: glass, ...props}, ref) => {
-    const {footerClass: footerClass, containerClass: containerClass, brandClass: brandClass, sectionsClass: sectionsClass, bottomClass: bottomClass, handleNewsletterSubmit: handleNewsletterSubmit, handleBackToTop: handleBackToTop, socialLinks: footerSocialLinks} = function(options = {}) {
-        const {layout: layout = FOOTER.DEFAULTS.LAYOUT, variant: variant = FOOTER.DEFAULTS.VARIANT, size: size = FOOTER.DEFAULTS.SIZE, sticky: sticky = FOOTER.DEFAULTS.STICKY, showNewsletter: showNewsletter = FOOTER.DEFAULTS.SHOW_NEWSLETTER, showBackToTop: showBackToTop = FOOTER.DEFAULTS.SHOW_BACK_TO_TOP, socialLinks: socialLinks = [], onNewsletterSubmit: onNewsletterSubmit, onBackToTop: onBackToTop, className: className = ""} = options;
-        // Generate footer classes
+    const {footerClass: footerClass, containerClass: containerClass, brandClass: brandClass, sectionsClass: sectionsClass, bottomClass: bottomClass, getResponsiveColumnProps: getResponsiveColumnProps, handleNewsletterSubmit: handleNewsletterSubmit, handleBackToTop: handleBackToTop} = function(options = {}) {
+        const {layout: layout = FOOTER.DEFAULTS.LAYOUT, variant: variant = FOOTER.DEFAULTS.VARIANT, size: size = FOOTER.DEFAULTS.SIZE, sticky: sticky = FOOTER.DEFAULTS.STICKY, showNewsletter: showNewsletter = FOOTER.DEFAULTS.SHOW_NEWSLETTER, showBackToTop: showBackToTop = FOOTER.DEFAULTS.SHOW_BACK_TO_TOP, showDivider: showDivider = FOOTER.DEFAULTS.SHOW_DIVIDER, socialLinks: socialLinks = [], onNewsletterSubmit: onNewsletterSubmit, onBackToTop: onBackToTop, glass: glass = !1, className: className = ""} = options, footerClass = useMemo((() => {
+            const layoutKey = layout.toUpperCase(), sizeKey = size.toUpperCase();
+            return [ FOOTER.CLASSES.BASE, FOOTER.CLASSES[layoutKey] || FOOTER.CLASSES.COLUMNS, `c-footer--${variant}`, FOOTER.CLASSES[sizeKey] || FOOTER.CLASSES.MD, sticky && FOOTER.CLASSES.STICKY, showNewsletter && "c-footer--with-newsletter", glass && "c-footer--glass", className ].filter(Boolean).join(" ");
+        }), [ layout, variant, size, sticky, showNewsletter, glass, className ]), containerClass = FOOTER.CLASSES.CONTAINER, brandClass = FOOTER.CLASSES.BRAND, sectionsClass = useMemo((() => [ FOOTER.CLASSES.SECTIONS, "columns" === layout && "c-footer__sections--columns", "centered" === layout && "c-footer__sections--centered", "stacked" === layout && "c-footer__sections--stacked" ].filter(Boolean).join(" ")), [ layout ]), bottomClass = FOOTER.CLASSES.BOTTOM, columnSizes = useMemo((() => 
+        /**
+ * Resolves grid column size map for a given layout.
+ */
+        function(layout, showNewsletter) {
+            switch (layout) {
+              case "columns":
+              default:
+                return {
+                    brand: 4,
+                    content: showNewsletter ? 4 : 8,
+                    newsletter: showNewsletter ? 4 : 0
+                };
+
+              case "centered":
+              case "minimal":
+              case "stacked":
+                return {
+                    brand: 12,
+                    content: 12,
+                    newsletter: showNewsletter ? 12 : 0
+                };
+
+              case "flexible":
                 return {
-            footerClass: [ FOOTER.CLASSES.BASE, FOOTER.CLASSES[layout.toUpperCase()] || FOOTER.CLASSES.COLUMNS, `c-footer--${variant}`, FOOTER.CLASSES[size.toUpperCase()] || FOOTER.CLASSES.MD, sticky && FOOTER.CLASSES.STICKY, showNewsletter && "c-footer--with-newsletter", className ].filter(Boolean).join(" "),
-            containerClass: FOOTER.CLASSES.CONTAINER,
-            brandClass: FOOTER.CLASSES.BRAND,
-            sectionsClass: [ FOOTER.CLASSES.SECTIONS, "columns" === layout && "c-footer__sections--columns", "centered" === layout && "c-footer__sections--centered", "stacked" === layout && "c-footer__sections--stacked" ].filter(Boolean).join(" "),
-            bottomClass: FOOTER.CLASSES.BOTTOM,
+                    brand: "auto",
+                    content: "auto",
+                    newsletter: "auto"
+                };
+
+              case "sidebar":
+                return {
+                    brand: 3,
+                    content: 9,
+                    newsletter: showNewsletter ? 9 : 0
+                };
+
+              case "wide":
+                return {
+                    brand: 3,
+                    content: 6,
+                    newsletter: showNewsletter ? 3 : 0
+                };
+            }
+        }
+        /**
+ * Computes responsive GridCol props for a given column type.
+ */ (layout, showNewsletter)), [ layout, showNewsletter ]);
+        // ---------- CSS class strings ----------
+                return {
+            // Classes
+            footerClass: footerClass,
+            containerClass: containerClass,
+            brandClass: brandClass,
+            sectionsClass: sectionsClass,
+            bottomClass: bottomClass,
+            // Grid helpers
+            columnSizes: columnSizes,
+            getResponsiveColumnProps: columnType => function(columnType, layout, columnSizes) {
+                return "flexible" === layout && "auto" === columnSizes[columnType] ? {
+                    xs: 12,
+                    sm: !0,
+                    md: !0
+                } : {
+                    xs: 12,
+                    md: "columns" === layout || "sidebar" === layout || "wide" === layout ? columnSizes[columnType] : 12
+                };
+            }(columnType, layout, columnSizes)
+            // ---------- Handlers ----------
+            ,
+            // Handlers
             handleNewsletterSubmit: email => {
-                onNewsletterSubmit && onNewsletterSubmit(email);
+                onNewsletterSubmit?.(email);
             },
             handleBackToTop: () => {
                 onBackToTop ? onBackToTop() : window.scrollTo({
@@ -13479,8 +13536,11 @@ const Footer =  forwardRef((({brand: brand, brandLogo: brandLogo, brandDescripti
                     behavior: "smooth"
                 });
             },
+            // Pass-through state
             socialLinks: socialLinks,
-            showNewsletter: showNewsletter
+            showNewsletter: showNewsletter,
+            showBackToTop: showBackToTop,
+            showDivider: showDivider
         };
     }({
         layout: layout,
@@ -13489,73 +13549,19 @@ const Footer =  forwardRef((({brand: brand, brandLogo: brandLogo, brandDescripti
         sticky: sticky,
         showNewsletter: showNewsletter,
         showBackToTop: showBackToTop,
+        showDivider: showDivider,
         socialLinks: socialLinks,
         onNewsletterSubmit: onNewsletterSubmit,
         onBackToTop: onBackToTop,
+        glass: Boolean(glass),
         className: className
-    }), columnSizes = (() => {
-        switch (layout) {
-          case "columns":
-          default:
-            return {
-                brand: 4,
-                content: showNewsletter ? 4 : 8,
-                newsletter: showNewsletter ? 4 : 0
-            };
-
-          case "centered":
-          case "minimal":
-          case "stacked":
-            // For stacked layout, everything takes full width but stacked vertically
-            return {
-                brand: 12,
-                content: 12,
-                newsletter: showNewsletter ? 12 : 0
-            };
-
-          case "flexible":
-            // For flexible layout, adjust based on content
-            return {
-                brand: "auto",
-                content: "auto",
-                newsletter: "auto"
-            };
-
-          case "sidebar":
-            // For sidebar layout, brand on left, content and newsletter on right
-            return {
-                brand: 3,
-                content: 9,
-                newsletter: showNewsletter ? 9 : 0
-            };
-
-          case "wide":
-            // For wide layout, content takes more space
-            return {
-                brand: 3,
-                content: 6,
-                newsletter: showNewsletter ? 3 : 0
-            };
-        }
-    })(), getResponsiveColumnProps = columnType => {
-        const baseMd = "columns" === layout || "sidebar" === layout || "wide" === layout ? columnSizes[columnType] : 12;
-        // For flexible layout, we want auto-sizing
-                return "flexible" === layout && "auto" === columnSizes[columnType] ? {
-            xs: 12,
-            sm: !0,
-            md: !0
-        } : {
-            xs: 12,
-            md: baseMd
-        };
-        // For other layouts, we use specific sizes
-        }, footerContent = jsxs("div", {
+    }), footerContent = jsxs("div", {
         className: containerClass,
         children: [ jsxs(Grid, {
             className: sectionsClass,
             alignItems: "start",
             justifyContent: "centered" === layout ? "center" : void 0,
-            children: [ (brand || brandLogo || brandDescription) && jsxs(GridCol, {
+            children: [ brand || brandLogo || brandDescription ? jsxs(GridCol, {
                 ...getResponsiveColumnProps("brand"),
                 className: brandClass,
                 children: [ brandLogo && jsx("div", {
@@ -13583,19 +13589,17 @@ const Footer =  forwardRef((({brand: brand, brandLogo: brandLogo, brandDescripti
                         size: size
                     }, `${link.platform}-${index}`)))
                 }) ]
-            }), children && jsx(GridCol, {
+            }) : null, children ? jsx(GridCol, {
                 ...getResponsiveColumnProps("content"),
                 className: "c-footer__content",
                 children: jsx(Grid, {
                     className: "c-footer__sections",
                     alignItems: "centered" === layout || "stacked" === layout ? "center" : void 0,
-                    children: React.Children.map(children, (child => 
-                    // Check if the child is a valid React element
-                     React.isValidElement(child) ?  React.cloneElement(child, {
+                    children: React.Children.map(children, (child =>  React.isValidElement(child) ?  React.cloneElement(child, {
                         showNewsletter: showNewsletter
                     }) : child))
                 })
-            }), showNewsletter && jsxs(GridCol, {
+            }) : null, showNewsletter ? jsxs(GridCol, {
                 ...getResponsiveColumnProps("newsletter"),
                 className: "c-footer__newsletter",
                 children: [ jsx("h4", {
@@ -13626,32 +13630,41 @@ const Footer =  forwardRef((({brand: brand, brandLogo: brandLogo, brandDescripti
                         }) ]
                     })
                 }) ]
-            }) ]
-        }), (copyright || showBackToTop) && jsxs("div", {
-            className: bottomClass,
-            children: [ copyright && jsx("div", {
-                className: "c-footer__copyright",
-                children: copyright
-            }), showBackToTop && jsxs(Button, {
-                variant: "ghost",
-                className: "c-footer__back-to-top",
-                onClick: handleBackToTop,
-                disabled: disabled,
-                "aria-label": backToTopText,
-                children: [ jsx("span", {
-                    className: "c-footer__back-to-top-icon",
-                    children: "↑"
-                }), jsx("span", {
-                    className: "c-footer__back-to-top-text",
-                    children: backToTopText
+            }) : null ]
+        }), copyright || showBackToTop ? jsxs(Fragment, {
+            children: [ showDivider && jsx("hr", {
+                className: "c-footer__divider"
+            }), jsxs("div", {
+                className: bottomClass,
+                children: [ copyright && jsx("div", {
+                    className: "c-footer__copyright",
+                    children: copyright
+                }), showBackToTop && jsxs(Button, {
+                    variant: "ghost",
+                    className: "c-footer__back-to-top",
+                    onClick: handleBackToTop,
+                    disabled: disabled,
+                    "aria-label": backToTopText,
+                    children: [ jsx("span", {
+                        className: "c-footer__back-to-top-icon",
+                        children: "↑"
+                    }), jsx("span", {
+                        className: "c-footer__back-to-top-text",
+                        children: backToTopText
+                    }) ]
                 }) ]
             }) ]
-        }) ]
+        }) : null ]
     });
-    // Calculate grid column sizes based on layout
-        return jsx("footer", {
+    // ──────────────────────────────────────────
+    // Render helpers
+    // ──────────────────────────────────────────
+        // ──────────────────────────────────────────
+    // Root element
+    // ──────────────────────────────────────────
+    return jsx("footer", {
         ref: ref,
-        className: footerClass + " c-footer " + (glass ? "c-footer--glass" : ""),
+        className: footerClass,
         ...props,
         children: glass ? jsx(AtomixGlass, {
             ...glass,
@@ -13889,7 +13902,7 @@ const layouts =  Object.freeze( Object.defineProperty({
 }, Symbol.toStringTag, {
     value: "Module"
 })), FooterSection =  forwardRef((({title: title, icon: icon, collapsible: collapsible = !1, defaultCollapsed: defaultCollapsed = !1, showNewsletter: showNewsletter = !1, children: children, className: className = "", ...props}, ref) => {
-    const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed), sectionClass = [ "c-footer__section", collapsible && "c-footer__section--collapsible", isCollapsed && "c-footer__section--collapsed", className ].filter(Boolean).join(" ");
+    const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed), sectionId = title ? `footer-section-${title.toString().toLowerCase().replace(/\s+/g, "-")}` : void 0, sectionClass = [ "c-footer__section", collapsible && "c-footer__section--collapsible", isCollapsed && "c-footer__section--collapsed", className ].filter(Boolean).join(" ");
     return jsx(GridCol, {
         xs: 12,
         md: showNewsletter ? 6 : 3,
@@ -13898,16 +13911,16 @@ const layouts =  Object.freeze( Object.defineProperty({
             ref: ref,
             className: sectionClass,
             ...props,
-            children: [ title && jsx("div", {
+            children: [ title ? jsx("div", collapsible ? {
                 className: "c-footer__section-header",
-                children: collapsible ? jsxs("button", {
+                children: jsxs("button", {
                     type: "button",
                     className: "c-footer__section-toggle",
                     onClick: () => {
-                        collapsible && setIsCollapsed(!isCollapsed);
+                        collapsible && setIsCollapsed((prev => !prev));
                     },
                     "aria-expanded": !isCollapsed,
-                    "aria-controls": `footer-section-${title.toString().toLowerCase().replace(/\s+/g, "-")}`,
+                    "aria-controls": sectionId,
                     children: [ icon && jsx("span", {
                         className: "c-footer__section-icon",
                         children: icon
@@ -13918,7 +13931,10 @@ const layouts =  Object.freeze( Object.defineProperty({
                         className: "c-footer__section-chevron",
                         children: isCollapsed ? "▼" : "▲"
                     }) ]
-                }) : jsxs("div", {
+                })
+            } : {
+                className: "c-footer__section-header",
+                children: jsxs("div", {
                     className: "c-footer__section-header-content",
                     children: [ icon && jsx("span", {
                         className: "c-footer__section-icon",
@@ -13928,12 +13944,9 @@ const layouts =  Object.freeze( Object.defineProperty({
                         children: title
                     }) ]
                 })
-            }), jsx("div", {
+            }) : null, jsx("div", {
                 className: "c-footer__section-content",
-                id: title ? `footer-section-${title.toString().toLowerCase().replace(/\s+/g, "-")}` : void 0,
-                style: {
-                    display: collapsible && isCollapsed ? "none" : "flex"
-                },
+                id: sectionId,
                 children: children
             }) ]
         })
@@ -13962,8 +13975,8 @@ const layouts =  Object.freeze( Object.defineProperty({
  * </FooterLink>
  * ```
  */
-const FooterLink =  forwardRef((({href: href, icon: icon, external: external = !1, active: active = !1, disabled: disabled = !1, onClick: onClick, children: children, className: className = "", LinkComponent: LinkComponent, ...props}, ref) => {
-    const linkProps = {
+const FooterLink =  forwardRef((({href: href, icon: icon, external: external = !1, active: active = !1, disabled: disabled = !1, onClick: onClick, children: children, className: className = "", linkComponent: linkComponent, ...props}, ref) => {
+    const sharedProps = {
         className: [ "c-footer__link", active && "c-footer__link--active", disabled && "c-footer__link--disabled", className ].filter(Boolean).join(" "),
         onClick: disabled ? void 0 : onClick,
         "aria-disabled": disabled,
@@ -13972,35 +13985,7 @@ const FooterLink =  forwardRef((({href: href, icon: icon, external: external = !
             rel: "noopener noreferrer"
         },
         ...props
-    };
-    if (LinkComponent) {
-        const Component = LinkComponent, componentProps = {
-            ref: ref,
-            ...href && !disabled ? {
-                href: href,
-                to: href
-            } : {},
-            ...linkProps
-        };
-        // Only pass href/to if the link is not disabled and href exists
-                return jsxs(Component, {
-            ...componentProps,
-            children: [ icon && jsx("span", {
-                className: "c-footer__link-icon",
-                children: icon
-            }), jsx("span", {
-                className: "c-footer__link-text",
-                children: children
-            }), external && jsx("span", {
-                className: "c-footer__link-external",
-                children: "↗"
-            }) ]
-        });
-    }
-    return jsxs("a", {
-        ref: ref,
-        href: disabled ? void 0 : href,
-        ...linkProps,
+    }, linkContent = jsxs(Fragment, {
         children: [ icon && jsx("span", {
             className: "c-footer__link-icon",
             children: icon
@@ -14012,11 +13997,33 @@ const FooterLink =  forwardRef((({href: href, icon: icon, external: external = !
             children: "↗"
         }) ]
     });
+    return linkComponent ? jsx(linkComponent, {
+        ref: ref,
+        ...href && !disabled ? {
+            href: href,
+            to: href
+        } : {},
+        ...sharedProps,
+        children: linkContent
+    }) : jsx("a", {
+        ref: ref,
+        href: disabled ? void 0 : href,
+        ...sharedProps,
+        children: linkContent
+    });
 }));
 
 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, 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 = {
+const HERO_DEFAULT_GLASS_PROPS = {
+    displacementScale: 60,
+    blurAmount: 3,
+    saturation: 180,
+    aberrationIntensity: 0,
+    borderRadius: 8,
+    overLight: !1,
+    mode: "standard"
+}, 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
@@ -14059,9 +14066,8 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
             }), "Your browser does not support the video tag." ]
         });
     }, renderContent = () => {
-        const content = jsxs("div", {
-            className: `${HERO.SELECTORS.CONTENT.replace(".", "")} ${parts?.content?.className || ""}`.trim(),
-            style: parts?.content?.style,
+        // Build inner content elements ONCE — no duplication
+        const innerElements = jsxs(Fragment, {
             children: [ subtitle && jsx("p", {
                 className: `${HERO.SELECTORS.SUBTITLE.replace(".", "")} ${parts?.subtitle?.className || ""}`.trim(),
                 style: parts?.subtitle?.style,
@@ -14079,71 +14085,25 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
                 style: parts?.actions?.style,
                 children: actions
             }) ]
-        });
-        // If glass is explicitly set to false, don't apply glass effect
-                return !1 === glass ? content : 
-        // If glass is true or an object, apply glass effect
-        glass ? jsx("div", 
-        // If glass is true, use default glass props
-        !0 === glass ? {
-            className: `${HERO.SELECTORS.CONTENT.replace(".", "")} ${parts?.content?.className || ""}`.trim(),
-            style: parts?.content?.style,
-            children: jsx(AtomixGlass, {
-                displacementScale: 60,
-                blurAmount: 3,
-                saturation: 180,
-                aberrationIntensity: 0,
-                borderRadius: 8,
-                overLight: !1,
-                mode: "standard",
-                children: jsxs("div", {
+        }), contentBody = glass ? (() => {
+            const glassProps = !0 === glass ? HERO_DEFAULT_GLASS_PROPS : {
+                ...HERO_DEFAULT_GLASS_PROPS,
+                ...glass
+            };
+            return jsx(AtomixGlass, {
+                ...glassProps,
+                children: jsx("div", {
                     className: "u-p-4",
-                    children: [ subtitle && jsx("p", {
-                        className: `${HERO.SELECTORS.SUBTITLE.replace(".", "")} ${parts?.subtitle?.className || ""}`.trim(),
-                        style: parts?.subtitle?.style,
-                        children: subtitle
-                    }), 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(".", "")} ${parts?.text?.className || ""}`.trim(),
-                        style: parts?.text?.style,
-                        children: text
-                    }), actions && jsx("div", {
-                        className: `${HERO.SELECTORS.ACTIONS.replace(".", "")} ${parts?.actions?.className || ""}`.trim(),
-                        style: parts?.actions?.style,
-                        children: actions
-                    }) ]
+                    children: innerElements
                 })
-            })
-        } : {
+            });
+        })() : innerElements;
+        // Conditionally wrap with AtomixGlass using the standard glass prop pattern
+                return jsx("div", {
             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(".", "")} ${parts?.subtitle?.className || ""}`.trim(),
-                        style: parts?.subtitle?.style,
-                        children: subtitle
-                    }), 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(".", "")} ${parts?.text?.className || ""}`.trim(),
-                        style: parts?.text?.style,
-                        children: text
-                    }), actions && jsx("div", {
-                        className: `${HERO.SELECTORS.ACTIONS.replace(".", "")} ${parts?.actions?.className || ""}`.trim(),
-                        style: parts?.actions?.style,
-                        children: actions
-                    }) ]
-                })
-            })
-        }) : content;
+            children: contentBody
+        });
     }, renderForegroundImage = () => hasForegroundImage ? jsx("div", "center" === alignment ? {
         className: `${HERO.SELECTORS.IMAGE_WRAPPER.replace(".", "")} ${imageColClassName || ""} ${parts?.imageWrapper?.className || ""}`.trim(),
         style: {
@@ -14291,35 +14251,24 @@ Hero.Title = ({children: children, className: className, level: level = "h1", ..
     ...props,
     children: children
 }), Hero.Content = ({children: children, className: className, style: style, glass: glass, ...props}) => {
-    const contentClass = `${HERO.SELECTORS.CONTENT.replace(".", "")} ${className || ""}`.trim();
-    if (glass) {
-        const glassProps = "boolean" == typeof glass ? {
-            displacementScale: 60,
-            blurAmount: 3,
-            saturation: 180,
-            aberrationIntensity: 0,
-            borderRadius: 8,
-            overLight: !1,
-            mode: "standard"
-        } : glass;
-        return jsx("div", {
-            className: contentClass,
-            style: style,
-            ...props,
-            children: jsx(AtomixGlass, {
-                ...glassProps,
-                children: jsx("div", {
-                    className: "u-p-4",
-                    children: children
-                })
-            })
+    const contentClass = `${HERO.SELECTORS.CONTENT.replace(".", "")} ${className || ""}`.trim(), innerContent = glass ? jsx("div", {
+        className: "u-p-4",
+        children: children
+    }) : children, wrappedContent = glass ? (() => {
+        const glassProps = !0 === glass ? HERO_DEFAULT_GLASS_PROPS : {
+            ...HERO_DEFAULT_GLASS_PROPS,
+            ...glass
+        };
+        return jsx(AtomixGlass, {
+            ...glassProps,
+            children: innerContent
         });
-    }
+    })() : innerContent;
     return jsx("div", {
         className: contentClass,
         style: style,
         ...props,
-        children: children
+        children: wrappedContent
     });
 }, Hero.Image = ({src: src, alt: alt = "", className: className, wrapperClassName: wrapperClassName, wrapperStyle: wrapperStyle, ...props}) => jsx("div", {
     className: `${HERO.SELECTORS.IMAGE_WRAPPER.replace(".", "")} ${wrapperClassName || ""}`.trim(),
@@ -14862,7 +14811,7 @@ function setRef(ref, value) {
  * ```
  */ Nav.displayName = "Nav";
 
-const NavItem =  forwardRef((({children: children, dropdown: dropdown = !1, megaMenu: megaMenu = !1, active: active = !1, href: href, onClick: onClick, className: className = "", disabled: disabled = !1, "aria-expanded": ariaExpanded, LinkComponent: LinkComponent}, ref) => {
+const NavItem =  forwardRef((({children: children, dropdown: dropdown = !1, megaMenu: megaMenu = !1, active: active = !1, href: href, target: target, onClick: onClick, className: className = "", disabled: disabled = !1, "aria-expanded": ariaExpanded, linkComponent: linkComponent}, ref) => {
     const {generateNavItemClass: generateNavItemClass, generateNavLinkClass: generateNavLinkClass, handleClick: handleClick} = useNavItem({
         dropdown: dropdown,
         megaMenu: megaMenu,
@@ -14902,6 +14851,7 @@ const NavItem =  forwardRef((({children: children, dropdown: dropdown = !1, mega
         ref: combinedRef,
         href: href || "#",
         to: href || "#",
+        target: target,
         className: navLinkClass,
         onClick: dropdown || megaMenu ? e => {
             (dropdown || megaMenu) && (e.preventDefault(), setIsActive(!isActive));
@@ -14914,7 +14864,7 @@ const NavItem =  forwardRef((({children: children, dropdown: dropdown = !1, mega
         className: navItemClass,
         role: "menuitem",
         "aria-haspopup": dropdown || megaMenu,
-        children: [ jsx(LinkComponent || "a", {
+        children: [ jsx(linkComponent || "a", {
             ...linkProps,
             children: dropdown || megaMenu ? childContent[0] : children
         }), (dropdown || megaMenu) && childContent.length > 1 && childContent[1] ]
@@ -15095,7 +15045,7 @@ SideMenuList.displayName = "SideMenuList";
  *
  * // With icon and custom link component
  * import Link from 'next/link';
- * <SideMenuItem href="/settings" icon={<Icon name="Settings" />} LinkComponent={Link}>
+ * <SideMenuItem href="/settings" icon={<Icon name="Settings" />} linkComponent={Link}>
  *   Settings
  * </SideMenuItem>
  *
@@ -15110,7 +15060,7 @@ SideMenuList.displayName = "SideMenuList";
  * </SideMenuItem>
  * ```
  */
-const SideMenuItem =  forwardRef((({children: children, href: href, onClick: onClick, active: active = !1, disabled: disabled = !1, icon: icon, className: className = "", target: target, rel: rel, LinkComponent: LinkComponentProp}, ref) => {
+const SideMenuItem =  forwardRef((({children: children, href: href, onClick: onClick, active: active = !1, disabled: disabled = !1, icon: icon, className: className = "", target: target, rel: rel, linkComponent: linkComponentProp}, ref) => {
     const {generateSideMenuItemClass: generateSideMenuItemClass, handleClick: handleClick} = useSideMenuItem({
         active: active,
         disabled: disabled,
@@ -15118,7 +15068,7 @@ const SideMenuItem =  forwardRef((({children: children, href: href, onClick: onC
     }), itemClass = generateSideMenuItemClass();
     // Render as link if href is provided
     if (href) {
-        if (LinkComponentProp) {
+        if (linkComponentProp) {
             const linkProps = {
                 ref: ref,
                 className: itemClass,
@@ -15135,7 +15085,7 @@ const SideMenuItem =  forwardRef((({children: children, href: href, onClick: onC
                     to: href
                 }
             };
-            return jsxs(LinkComponentProp, {
+            return jsxs(linkComponentProp, {
                 ...linkProps,
                 children: [ icon && jsx("span", {
                     className: "c-side-menu__link-icon",
@@ -15205,7 +15155,7 @@ SideMenuItem.displayName = "SideMenuItem";
  * </SideMenu>
  * ```
  */
-const SideMenu =  forwardRef((({title: title, children: children, menuItems: menuItems = [], isOpen: isOpen, onToggle: onToggle, collapsible: collapsible = !0, collapsibleDesktop: collapsibleDesktop = !1, defaultCollapsedDesktop: defaultCollapsedDesktop = !1, className: className = "", style: style, disabled: disabled = !1, toggleIcon: toggleIcon, id: id, glass: glass, LinkComponent: LinkComponent}, ref) => {
+const SideMenu =  forwardRef((({title: title, children: children, menuItems: menuItems = [], isOpen: isOpen, onToggle: onToggle, collapsible: collapsible = !0, collapsibleDesktop: collapsibleDesktop = !1, defaultCollapsedDesktop: defaultCollapsedDesktop = !1, className: className = "", style: style, disabled: disabled = !1, toggleIcon: toggleIcon, id: id, glass: glass, linkComponent: linkComponent}, ref) => {
     const {isOpenState: isOpenState, wrapperRef: wrapperRef, innerRef: innerRef, sideMenuRef: sideMenuRef, generateSideMenuClass: generateSideMenuClass, generateWrapperClass: generateWrapperClass, handleToggle: handleToggle} = useSideMenu({
         isOpen: isOpen,
         onToggle: onToggle,
@@ -15359,7 +15309,7 @@ const SideMenu =  forwardRef((({title: title, children: children, menuItems: men
                                         active: subItem.active,
                                         disabled: subItem.disabled,
                                         icon: subItem.icon,
-                                        LinkComponent: LinkComponent,
+                                        linkComponent: linkComponent,
                                         children: subItem.title
                                     }, subIndex)))
                                 })
@@ -15426,18 +15376,18 @@ const Menu =  forwardRef((({children: children, className: className = "", style
 
 Menu.displayName = "Menu";
 
-const MenuItem =  forwardRef((({children: children, href: href = "#", icon: icon, active: active = !1, disabled: disabled = !1, onClick: onClick, className: className = ""}, ref) => jsx("li", {
-    ref: ref,
-    className: `c-menu__item ${active ? "is-active" : ""} ${disabled ? "is-disabled" : ""} ${className}`,
-    role: "menuitem",
-    children: jsxs("a", {
+const MenuItem =  forwardRef((({children: children, href: href = "#", target: target, linkComponent: linkComponent, icon: icon, active: active = !1, disabled: disabled = !1, onClick: onClick, className: className = ""}, ref) => {
+    const itemClass = `c-menu__item ${active ? "is-active" : ""} ${disabled ? "is-disabled" : ""} ${className}`, linkProps = {
         href: href,
+        to: href,
+        target: target,
         className: "c-menu__link",
         onClick: e => {
             disabled ? e.preventDefault() : onClick && onClick();
         },
         "aria-disabled": disabled,
-        "aria-current": active ? "page" : void 0,
+        "aria-current": active ? "page" : void 0
+    }, content = jsxs(Fragment, {
         children: [ icon && ("string" == typeof icon ? icon.startsWith("c-icon-") ? jsx(Icon, {
             name: mapIconName(icon.replace("c-icon-", "")),
             size: "sm",
@@ -15449,8 +15399,17 @@ const MenuItem =  forwardRef((({children: children, href: href = "#", icon: icon
             className: "c-menu__icon",
             children: icon
         })), children ]
-    })
-})));
+    });
+    return jsx("li", {
+        ref: ref,
+        className: itemClass,
+        role: "menuitem",
+        children: jsx(linkComponent || "a", {
+            ...linkProps,
+            children: content
+        })
+    });
+}));
 
 MenuItem.displayName = "MenuItem";
 
@@ -15545,16 +15504,23 @@ const MegaMenuColumn =  forwardRef((({title: title, icon: icon, children: childr
 
 MegaMenuColumn.displayName = "MegaMenuColumn";
 
-const MegaMenuLink =  forwardRef((({href: href, children: children, className: className = "", disabled: disabled = !1, onClick: onClick}, ref) => jsx("a", {
-    ref: ref,
-    href: href,
-    className: `c-menu__subitem-link ${disabled ? "is-disabled" : ""} ${className}`,
-    onClick: e => {
-        disabled ? e.preventDefault() : onClick && onClick();
-    },
-    "aria-disabled": disabled,
-    children: children
-})));
+const MegaMenuLink =  forwardRef((({href: href, target: target, linkComponent: linkComponent, children: children, className: className = "", disabled: disabled = !1, onClick: onClick}, ref) => {
+    const linkProps = {
+        ref: ref,
+        href: href,
+        to: href,
+        target: target,
+        className: `c-menu__subitem-link ${disabled ? "is-disabled" : ""} ${className}`,
+        onClick: e => {
+            disabled ? e.preventDefault() : onClick && onClick();
+        },
+        "aria-disabled": disabled
+    };
+    return jsx(linkComponent || "a", {
+        ...linkProps,
+        children: children
+    });
+}));
 
 MegaMenuLink.displayName = "MegaMenuLink";
 
@@ -17537,8 +17503,8 @@ const SectionIntro = ({title: title, label: label, text: text, actions: actions,
 SectionIntro.displayName = "SectionIntro";
 
 const Slider =  forwardRef(((props, ref) => {
-    const {slides: slides = [], height: height = 300, width: width = "100%", slidesToShow: slidesToShow = 1, spaceBetween: spaceBetween = 0, loop: loop = !1, initialSlide: initialSlide = 0, direction: direction = "horizontal", speed: speed = 300, allowTouchMove: allowTouchMove = !0, threshold: threshold = 50, grabCursor: grabCursor = !0, autoplay: autoplay, navigation: navigation, pagination: pagination, className: className, style: style, onSlideChange: onSlideChange, ...rest} = props, slider = useSlider({
-        slides: slides || [],
+    const {slides: slides = [], height: height = 300, width: width = "100%", slidesToShow: slidesToShow = 1, spaceBetween: spaceBetween = 0, loop: loop = !1, initialSlide: initialSlide = 0, direction: direction = "horizontal", speed: speed = 300, allowTouchMove: allowTouchMove = !0, threshold: threshold = 50, grabCursor: grabCursor = !0, autoplay: autoplay, navigation: navigation, pagination: pagination, className: className, style: style, onSlideChange: onSlideChange, ...rest} = props, validSlides = Array.isArray(slides) ? slides : [], slider = useSlider({
+        slides: validSlides,
         slidesToShow: slidesToShow,
         spaceBetween: spaceBetween,
         loop: loop,
@@ -17550,8 +17516,8 @@ const Slider =  forwardRef(((props, ref) => {
         autoplay: autoplay,
         onSlideChange: onSlideChange
     }), {containerRef: containerRef, wrapperRef: wrapperRef, allSlides: allSlides, realIndex: realIndex, translateValue: translateValue, slideWidth: slideWidth, transitioning: transitioning, touching: touching, slideNext: slideNext, slidePrev: slidePrev, goToSlide: goToSlide, canSlideNext: canSlideNext, canSlidePrev: canSlidePrev, handleTouchStart: handleTouchStart, handleTouchMove: handleTouchMove, handleTouchEnd: handleTouchEnd, loopedSlides: loopedSlides} = slider, totalWrapperWidth = useMemo((() => 0 === slideWidth ? 0 : allSlides.length * (slideWidth + spaceBetween) - spaceBetween), [ allSlides.length, slideWidth, spaceBetween ]);
-    // Hooks must be called unconditionally - before early return
-        if (!slides || 0 === slides.length) return jsx("div", {
+    // Ensure slides is an array to prevent .map errors
+        if (0 === validSlides.length) return jsx("div", {
         className: "c-slider c-slider--empty",
         style: {
             height: height,
@@ -17595,7 +17561,7 @@ const Slider =  forwardRef(((props, ref) => {
                 willChange: "transform"
             },
             children: allSlides.map(((slide, index) => jsxs("div", {
-                className: [ "c-slider__slide", (loop ? index % slides.length === realIndex : index === realIndex) && "c-slider__slide--active", slide.isClone && "c-slider__slide--duplicate" ].filter(Boolean).join(" "),
+                className: [ "c-slider__slide", (loop ? index % validSlides.length === realIndex : index === realIndex) && "c-slider__slide--active", slide.isClone && "c-slider__slide--duplicate" ].filter(Boolean).join(" "),
                 style: {
                     width: "vertical" === direction ? "100%" : `${slideWidth}px`,
                     height: "vertical" === direction ? `${slideWidth}px` : "100%",
@@ -17657,7 +17623,7 @@ const Slider =  forwardRef(((props, ref) => {
             }) ]
         }), pagination && jsx("div", {
             className: "c-slider__pagination",
-            children: slides.map(((_, index) => jsx("button", {
+            children: validSlides.map(((_, index) => jsx("button", {
                 type: "button",
                 className: "c-slider__pagination-bullet " + (index === realIndex ? "c-slider__pagination-bullet--active" : ""),
                 onClick: () => goToSlide(index),