@shohojdhara/atomix 0.4.3 → 0.4.5

package/dist/index.js

@@ -2221,7 +2221,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  React.forwardRef((({c
 }, 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 = React.useMemo((() => "atomix-glass-filter-" + ++idCounter), []), [shaderMapUrl, setShaderMapUrl] = React.useState(""), shaderGeneratorRef = React.useRef(null), shaderUtilsRef = React.useRef(null), shaderDebounceTimeoutRef = React.useRef(null);
@@ -2419,7 +2419,6 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  React.forwardRef((({c
             children: [ jsxRuntime.jsxs("div", {
                 className: ATOMIX_GLASS.FILTER_CLASS,
                 style: {
-                    zIndex: 1,
                     position: "absolute",
                     inset: 0
                 },
@@ -2455,9 +2454,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  React.forwardRef((({c
                 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
             }) ]
@@ -3330,7 +3327,6 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             effectiveWithoutEffects: effectiveWithoutEffects,
             effectiveReducedMotion: effectiveReducedMotion,
             shaderVariant: shaderVariant,
-            elasticity: elasticity,
             withLiquidBlur: withLiquidBlur,
             children: children
         }), Boolean(onClick) && jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -3355,17 +3351,9 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             }) ]
         }), withBorder && jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [ jsxRuntime.jsx("span", {
-                className: ATOMIX_GLASS.BORDER_1_CLASS,
-                style: {
-                    width: glassSize.width,
-                    height: glassSize.height
-                }
+                className: ATOMIX_GLASS.BORDER_1_CLASS
             }), jsxRuntime.jsx("span", {
-                className: ATOMIX_GLASS.BORDER_2_CLASS,
-                style: {
-                    width: glassSize.width,
-                    height: glassSize.height
-                }
+                className: ATOMIX_GLASS.BORDER_2_CLASS
             }) ]
         }) ]
     });
@@ -4132,7 +4120,7 @@ const BreadcrumbItem =  React.forwardRef((({children: children, href: href, acti
 
 BreadcrumbItem.displayName = "BreadcrumbItem";
 
-const Breadcrumb =  React.memo((function({items: items, divider: divider, className: className = "", "aria-label": ariaLabel = "Breadcrumb", LinkComponent: LinkComponent, style: style, children: children}) {
+const Breadcrumb =  React.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) 
@@ -4146,7 +4134,7 @@ const Breadcrumb =  React.memo((function({items: items, divider: divider, classN
             onClick: item.onClick,
             className: item.className,
             style: item.style,
-            linkAs: LinkComponent,
+            linkAs: linkComponent,
             children: item.label
         }, index);
     })); else {
@@ -4156,7 +4144,7 @@ const Breadcrumb =  React.memo((function({items: items, divider: divider, classN
             if ( React.isValidElement(child)) {
                 const isLast = index === childrenCount - 1, childProps = child.props, {active: active, linkAs: linkAs, ...otherProps} = childProps, newProps = {
                     active: active ?? (!!isLast || void 0),
-                    linkAs: linkAs ?? LinkComponent
+                    linkAs: linkAs ?? linkComponent
                 };
                 
                 return React.cloneElement(child, newProps);
@@ -4332,7 +4320,7 @@ class ThemeNaming {
 
 ThemeNaming.prefix = "atomix";
 
-const Button =  React__default.default.memo( React.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__default.default.memo( React.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 ? jsxRuntime.jsx(Icon, {
         name: iconName,
         size: iconSize
@@ -4383,12 +4371,12 @@ const Button =  React__default.default.memo( React.forwardRef((({label: label, c
         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,
@@ -4686,7 +4674,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
@@ -4771,8 +4759,8 @@ className: className = "", style: style, ...rest}, ref) => {
     // Render as anchor if href is provided
     if (href && !isDisabled) {
         let anchorElement;
-        if (LinkComponent) {
-            const LinkComp = LinkComponent;
+        if (linkComponent) {
+            const LinkComp = linkComponent;
             anchorElement = jsxRuntime.jsx(LinkComp, {
                 ...commonProps,
                 ref: ref,
@@ -9877,7 +9865,7 @@ DropdownTrigger.displayName = "DropdownTrigger";
 /**
  * DropdownItem component for menu items
  */
-const DropdownItem =  React.memo((({children: children, href: href, active: active = !1, disabled: disabled = !1, icon: icon, onClick: onClick, className: className = "", LinkComponent: LinkComponent, ...props}) => {
+const DropdownItem =  React.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} = React.useContext(DropdownContext), handleClick = e => {
         disabled ? e.preventDefault() : (onClick && onClick(e), 
         // Always close the dropdown when an item is clicked
@@ -9885,6 +9873,7 @@ const DropdownItem =  React.memo((({children: children, href: href, active: acti
     }, 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",
@@ -9892,8 +9881,8 @@ const DropdownItem =  React.memo((({children: children, href: href, active: acti
         ...props
     };
     return href && !disabled ? jsxRuntime.jsx("li", {
-        children: LinkComponent ? (() => {
-            const Component = LinkComponent;
+        children: linkComponent ? (() => {
+            const Component = linkComponent;
             return jsxRuntime.jsxs(Component, {
                 ...linkProps,
                 children: [ icon && jsxRuntime.jsx("span", {
@@ -12622,7 +12611,7 @@ const DEFAULT_ATOMIX_FONTS = [ {
 }
 
 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 = React.useRef(null), wrapperRef = React.useRef(null), repositioningRef = React.useRef(!1), autoplayRef = React.useRef(null), [autoplayRunning, setAutoplayRunning] = React.useState(!1), sliderStateRef = React.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 = React.useRef(null), wrapperRef = React.useRef(null), repositioningRef = React.useRef(!1), autoplayRef = React.useRef(null), [autoplayRunning, setAutoplayRunning] = React.useState(!1), sliderStateRef = React.useRef({
         isTransitioning: !1,
         loop: loop,
         slides: slides,
@@ -13322,7 +13311,60 @@ const Textarea =  React.memo( React.forwardRef((({value: value, defaultValue: de
 
 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 iconName ? jsxRuntime.jsx(Icon, {
+        name: iconName
+    }) : jsxRuntime.jsx(Icon, {
+        name: "Link"
+    });
+}, FooterSocialLink =  React.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
@@ -13330,30 +13372,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 =  React.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 jsxRuntime.jsxs("a", {
         ref: ref,
         href: disabled ? void 0 : url,
@@ -13365,35 +13384,7 @@ const FooterSocialLink =  React.forwardRef((({platform: platform, url: url, icon
         ...props,
         children: [ jsxRuntime.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 iconName ? jsxRuntime.jsx(Icon, {
-                    name: iconName
-                }) : jsxRuntime.jsx(Icon, {
-                    name: "Link"
-                });
-            })(platform)
+            children: icon || getPlatformIcon(platform)
         }), jsxRuntime.jsx("span", {
             className: "c-footer__social-link-label u-visually-hidden",
             children: ariaLabel
@@ -13516,17 +13507,83 @@ Row.displayName = "Row";
  * ```
  */
 const Footer =  React.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 = React.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 = React.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 = React.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 {
+                    brand: "auto",
+                    content: "auto",
+                    newsletter: "auto"
+                };
+
+              case "sidebar":
+                return {
+                    brand: 3,
+                    content: 9,
+                    newsletter: showNewsletter ? 9 : 0
+                };
+
+              case "wide":
                 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: 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({
@@ -13534,8 +13591,11 @@ const Footer =  React.forwardRef((({brand: brand, brandLogo: brandLogo, brandDes
                     behavior: "smooth"
                 });
             },
+            // Pass-through state
             socialLinks: socialLinks,
-            showNewsletter: showNewsletter
+            showNewsletter: showNewsletter,
+            showBackToTop: showBackToTop,
+            showDivider: showDivider
         };
     }({
         layout: layout,
@@ -13544,73 +13604,19 @@ const Footer =  React.forwardRef((({brand: brand, brandLogo: brandLogo, brandDes
         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 = jsxRuntime.jsxs("div", {
+    }), footerContent = jsxRuntime.jsxs("div", {
         className: containerClass,
         children: [ jsxRuntime.jsxs(Grid, {
             className: sectionsClass,
             alignItems: "start",
             justifyContent: "centered" === layout ? "center" : void 0,
-            children: [ (brand || brandLogo || brandDescription) && jsxRuntime.jsxs(GridCol, {
+            children: [ brand || brandLogo || brandDescription ? jsxRuntime.jsxs(GridCol, {
                 ...getResponsiveColumnProps("brand"),
                 className: brandClass,
                 children: [ brandLogo && jsxRuntime.jsx("div", {
@@ -13638,19 +13644,17 @@ const Footer =  React.forwardRef((({brand: brand, brandLogo: brandLogo, brandDes
                         size: size
                     }, `${link.platform}-${index}`)))
                 }) ]
-            }), children && jsxRuntime.jsx(GridCol, {
+            }) : null, children ? jsxRuntime.jsx(GridCol, {
                 ...getResponsiveColumnProps("content"),
                 className: "c-footer__content",
                 children: jsxRuntime.jsx(Grid, {
                     className: "c-footer__sections",
                     alignItems: "centered" === layout || "stacked" === layout ? "center" : void 0,
-                    children: React__default.default.Children.map(children, (child => 
-                    // Check if the child is a valid React element
-                     React__default.default.isValidElement(child) ?  React__default.default.cloneElement(child, {
+                    children: React__default.default.Children.map(children, (child =>  React__default.default.isValidElement(child) ?  React__default.default.cloneElement(child, {
                         showNewsletter: showNewsletter
                     }) : child))
                 })
-            }), showNewsletter && jsxRuntime.jsxs(GridCol, {
+            }) : null, showNewsletter ? jsxRuntime.jsxs(GridCol, {
                 ...getResponsiveColumnProps("newsletter"),
                 className: "c-footer__newsletter",
                 children: [ jsxRuntime.jsx("h4", {
@@ -13681,32 +13685,41 @@ const Footer =  React.forwardRef((({brand: brand, brandLogo: brandLogo, brandDes
                         }) ]
                     })
                 }) ]
-            }) ]
-        }), (copyright || showBackToTop) && jsxRuntime.jsxs("div", {
-            className: bottomClass,
-            children: [ copyright && jsxRuntime.jsx("div", {
-                className: "c-footer__copyright",
-                children: copyright
-            }), showBackToTop && jsxRuntime.jsxs(Button, {
-                variant: "ghost",
-                className: "c-footer__back-to-top",
-                onClick: handleBackToTop,
-                disabled: disabled,
-                "aria-label": backToTopText,
-                children: [ jsxRuntime.jsx("span", {
-                    className: "c-footer__back-to-top-icon",
-                    children: "↑"
-                }), jsxRuntime.jsx("span", {
-                    className: "c-footer__back-to-top-text",
-                    children: backToTopText
+            }) : null ]
+        }), copyright || showBackToTop ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [ showDivider && jsxRuntime.jsx("hr", {
+                className: "c-footer__divider"
+            }), jsxRuntime.jsxs("div", {
+                className: bottomClass,
+                children: [ copyright && jsxRuntime.jsx("div", {
+                    className: "c-footer__copyright",
+                    children: copyright
+                }), showBackToTop && jsxRuntime.jsxs(Button, {
+                    variant: "ghost",
+                    className: "c-footer__back-to-top",
+                    onClick: handleBackToTop,
+                    disabled: disabled,
+                    "aria-label": backToTopText,
+                    children: [ jsxRuntime.jsx("span", {
+                        className: "c-footer__back-to-top-icon",
+                        children: "↑"
+                    }), jsxRuntime.jsx("span", {
+                        className: "c-footer__back-to-top-text",
+                        children: backToTopText
+                    }) ]
                 }) ]
             }) ]
-        }) ]
+        }) : null ]
     });
-    // Calculate grid column sizes based on layout
-        return jsxRuntime.jsx("footer", {
+    // ──────────────────────────────────────────
+    // Render helpers
+    // ──────────────────────────────────────────
+        // ──────────────────────────────────────────
+    // Root element
+    // ──────────────────────────────────────────
+    return jsxRuntime.jsx("footer", {
         ref: ref,
-        className: footerClass + " c-footer " + (glass ? "c-footer--glass" : ""),
+        className: footerClass,
         ...props,
         children: glass ? jsxRuntime.jsx(AtomixGlass, {
             ...glass,
@@ -13954,7 +13967,7 @@ var layouts =  Object.freeze({
  * </FooterSection>
  * ```
  */ const FooterSection =  React.forwardRef((({title: title, icon: icon, collapsible: collapsible = !1, defaultCollapsed: defaultCollapsed = !1, showNewsletter: showNewsletter = !1, children: children, className: className = "", ...props}, ref) => {
-    const [isCollapsed, setIsCollapsed] = React__default.default.useState(defaultCollapsed), sectionClass = [ "c-footer__section", collapsible && "c-footer__section--collapsible", isCollapsed && "c-footer__section--collapsed", className ].filter(Boolean).join(" ");
+    const [isCollapsed, setIsCollapsed] = React.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 jsxRuntime.jsx(GridCol, {
         xs: 12,
         md: showNewsletter ? 6 : 3,
@@ -13963,16 +13976,16 @@ var layouts =  Object.freeze({
             ref: ref,
             className: sectionClass,
             ...props,
-            children: [ title && jsxRuntime.jsx("div", {
+            children: [ title ? collapsible ? jsxRuntime.jsx("div", {
                 className: "c-footer__section-header",
-                children: collapsible ? jsxRuntime.jsxs("button", {
+                children: jsxRuntime.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 && jsxRuntime.jsx("span", {
                         className: "c-footer__section-icon",
                         children: icon
@@ -13983,7 +13996,10 @@ var layouts =  Object.freeze({
                         className: "c-footer__section-chevron",
                         children: isCollapsed ? "▼" : "▲"
                     }) ]
-                }) : jsxRuntime.jsxs("div", {
+                })
+            }) : jsxRuntime.jsx("div", {
+                className: "c-footer__section-header",
+                children: jsxRuntime.jsxs("div", {
                     className: "c-footer__section-header-content",
                     children: [ icon && jsxRuntime.jsx("span", {
                         className: "c-footer__section-icon",
@@ -13993,12 +14009,9 @@ var layouts =  Object.freeze({
                         children: title
                     }) ]
                 })
-            }), jsxRuntime.jsx("div", {
+            }) : null, jsxRuntime.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
             }) ]
         })
@@ -14017,8 +14030,8 @@ FooterSection.displayName = "FooterSection";
  * </FooterLink>
  * ```
  */
-const FooterLink =  React.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 =  React.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,
@@ -14027,35 +14040,7 @@ const FooterLink =  React.forwardRef((({href: href, icon: icon, external: extern
             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 jsxRuntime.jsxs(Component, {
-            ...componentProps,
-            children: [ icon && jsxRuntime.jsx("span", {
-                className: "c-footer__link-icon",
-                children: icon
-            }), jsxRuntime.jsx("span", {
-                className: "c-footer__link-text",
-                children: children
-            }), external && jsxRuntime.jsx("span", {
-                className: "c-footer__link-external",
-                children: "↗"
-            }) ]
-        });
-    }
-    return jsxRuntime.jsxs("a", {
-        ref: ref,
-        href: disabled ? void 0 : href,
-        ...linkProps,
+    }, linkContent = jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [ icon && jsxRuntime.jsx("span", {
             className: "c-footer__link-icon",
             children: icon
@@ -14067,11 +14052,37 @@ const FooterLink =  React.forwardRef((({href: href, icon: icon, external: extern
             children: "↗"
         }) ]
     });
+    if (linkComponent) {
+        const Component = linkComponent;
+        return jsxRuntime.jsx(Component, {
+            ref: ref,
+            ...href && !disabled ? {
+                href: href,
+                to: href
+            } : {},
+            ...sharedProps,
+            children: linkContent
+        });
+    }
+    return jsxRuntime.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
@@ -14114,9 +14125,8 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
             }), "Your browser does not support the video tag." ]
         });
     }, renderContent = () => {
-        const content = jsxRuntime.jsxs("div", {
-            className: `${HERO.SELECTORS.CONTENT.replace(".", "")} ${parts?.content?.className || ""}`.trim(),
-            style: parts?.content?.style,
+        // Build inner content elements ONCE — no duplication
+        const innerElements = jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [ subtitle && jsxRuntime.jsx("p", {
                 className: `${HERO.SELECTORS.SUBTITLE.replace(".", "")} ${parts?.subtitle?.className || ""}`.trim(),
                 style: parts?.subtitle?.style,
@@ -14134,71 +14144,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 ? 
-        // If glass is true, use default glass props
-        !0 === glass ? jsxRuntime.jsx("div", {
-            className: `${HERO.SELECTORS.CONTENT.replace(".", "")} ${parts?.content?.className || ""}`.trim(),
-            style: parts?.content?.style,
-            children: jsxRuntime.jsx(AtomixGlass, {
-                displacementScale: 60,
-                blurAmount: 3,
-                saturation: 180,
-                aberrationIntensity: 0,
-                borderRadius: 8,
-                overLight: !1,
-                mode: "standard",
-                children: jsxRuntime.jsxs("div", {
+        }), contentBody = glass ? (() => {
+            const glassProps = !0 === glass ? HERO_DEFAULT_GLASS_PROPS : {
+                ...HERO_DEFAULT_GLASS_PROPS,
+                ...glass
+            };
+            return jsxRuntime.jsx(AtomixGlass, {
+                ...glassProps,
+                children: jsxRuntime.jsx("div", {
                     className: "u-p-4",
-                    children: [ subtitle && jsxRuntime.jsx("p", {
-                        className: `${HERO.SELECTORS.SUBTITLE.replace(".", "")} ${parts?.subtitle?.className || ""}`.trim(),
-                        style: parts?.subtitle?.style,
-                        children: subtitle
-                    }), jsxRuntime.jsx(HeadingTag, {
-                        className: `${HERO.SELECTORS.TITLE.replace(".", "")} ${parts?.title?.className || ""}`.trim(),
-                        style: parts?.title?.style,
-                        children: title
-                    }), text && jsxRuntime.jsx("p", {
-                        className: `${HERO.SELECTORS.TEXT.replace(".", "")} ${parts?.text?.className || ""}`.trim(),
-                        style: parts?.text?.style,
-                        children: text
-                    }), actions && jsxRuntime.jsx("div", {
-                        className: `${HERO.SELECTORS.ACTIONS.replace(".", "")} ${parts?.actions?.className || ""}`.trim(),
-                        style: parts?.actions?.style,
-                        children: actions
-                    }) ]
+                    children: innerElements
                 })
-            })
-        }) : jsxRuntime.jsx("div", {
+            });
+        })() : innerElements;
+        // Conditionally wrap with AtomixGlass using the standard glass prop pattern
+                return jsxRuntime.jsx("div", {
             className: `${HERO.SELECTORS.CONTENT.replace(".", "")} ${parts?.content?.className || ""}`.trim(),
             style: parts?.content?.style,
-            children: jsxRuntime.jsx(AtomixGlass, {
-                ...glass,
-                children: jsxRuntime.jsxs("div", {
-                    className: "u-p-4",
-                    children: [ subtitle && jsxRuntime.jsx("p", {
-                        className: `${HERO.SELECTORS.SUBTITLE.replace(".", "")} ${parts?.subtitle?.className || ""}`.trim(),
-                        style: parts?.subtitle?.style,
-                        children: subtitle
-                    }), jsxRuntime.jsx(HeadingTag, {
-                        className: `${HERO.SELECTORS.TITLE.replace(".", "")} ${parts?.title?.className || ""}`.trim(),
-                        style: parts?.title?.style,
-                        children: title
-                    }), text && jsxRuntime.jsx("p", {
-                        className: `${HERO.SELECTORS.TEXT.replace(".", "")} ${parts?.text?.className || ""}`.trim(),
-                        style: parts?.text?.style,
-                        children: text
-                    }), actions && jsxRuntime.jsx("div", {
-                        className: `${HERO.SELECTORS.ACTIONS.replace(".", "")} ${parts?.actions?.className || ""}`.trim(),
-                        style: parts?.actions?.style,
-                        children: actions
-                    }) ]
-                })
-            })
-        }) : content;
+            children: contentBody
+        });
     }, renderForegroundImage = () => hasForegroundImage ? "center" === alignment ? jsxRuntime.jsx("div", {
         className: `${HERO.SELECTORS.IMAGE_WRAPPER.replace(".", "")} ${imageColClassName || ""} ${parts?.imageWrapper?.className || ""}`.trim(),
         style: {
@@ -14349,35 +14313,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 jsxRuntime.jsx("div", {
-            className: contentClass,
-            style: style,
-            ...props,
-            children: jsxRuntime.jsx(AtomixGlass, {
-                ...glassProps,
-                children: jsxRuntime.jsx("div", {
-                    className: "u-p-4",
-                    children: children
-                })
-            })
+    const contentClass = `${HERO.SELECTORS.CONTENT.replace(".", "")} ${className || ""}`.trim(), innerContent = glass ? jsxRuntime.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 jsxRuntime.jsx(AtomixGlass, {
+            ...glassProps,
+            children: innerContent
         });
-    }
+    })() : innerContent;
     return jsxRuntime.jsx("div", {
         className: contentClass,
         style: style,
         ...props,
-        children: children
+        children: wrappedContent
     });
 }, Hero.Image = ({src: src, alt: alt = "", className: className, wrapperClassName: wrapperClassName, wrapperStyle: wrapperStyle, ...props}) => jsxRuntime.jsx("div", {
     className: `${HERO.SELECTORS.IMAGE_WRAPPER.replace(".", "")} ${wrapperClassName || ""}`.trim(),
@@ -14920,7 +14873,7 @@ function setRef(ref, value) {
  * ```
  */ Nav.displayName = "Nav";
 
-const NavItem =  React.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 =  React.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,
@@ -14960,6 +14913,7 @@ const NavItem =  React.forwardRef((({children: children, dropdown: dropdown = !1
         ref: combinedRef,
         href: href || "#",
         to: href || "#",
+        target: target,
         className: navLinkClass,
         onClick: dropdown || megaMenu ? e => {
             (dropdown || megaMenu) && (e.preventDefault(), setIsActive(!isActive));
@@ -14972,8 +14926,8 @@ const NavItem =  React.forwardRef((({children: children, dropdown: dropdown = !1
         className: navItemClass,
         role: "menuitem",
         "aria-haspopup": dropdown || megaMenu,
-        children: [ LinkComponent ? (() => {
-            const Component = LinkComponent;
+        children: [ linkComponent ? (() => {
+            const Component = linkComponent;
             return jsxRuntime.jsx(Component, {
                 ...linkProps,
                 children: dropdown || megaMenu ? childContent[0] : children
@@ -15159,7 +15113,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>
  *
@@ -15174,7 +15128,7 @@ SideMenuList.displayName = "SideMenuList";
  * </SideMenuItem>
  * ```
  */
-const SideMenuItem =  React.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 =  React.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,
@@ -15182,8 +15136,8 @@ const SideMenuItem =  React.forwardRef((({children: children, href: href, onClic
     }), itemClass = generateSideMenuItemClass();
     // Render as link if href is provided
     if (href) {
-        if (LinkComponentProp) {
-            const LinkComp = LinkComponentProp, linkProps = {
+        if (linkComponentProp) {
+            const LinkComp = linkComponentProp, linkProps = {
                 ref: ref,
                 className: itemClass,
                 onClick: disabled ? e => {
@@ -15269,7 +15223,7 @@ SideMenuItem.displayName = "SideMenuItem";
  * </SideMenu>
  * ```
  */
-const SideMenu =  React.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 =  React.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,
@@ -15423,7 +15377,7 @@ const SideMenu =  React.forwardRef((({title: title, children: children, menuItem
                                         active: subItem.active,
                                         disabled: subItem.disabled,
                                         icon: subItem.icon,
-                                        LinkComponent: LinkComponent,
+                                        linkComponent: linkComponent,
                                         children: subItem.title
                                     }, subIndex)))
                                 })
@@ -15490,31 +15444,43 @@ const Menu =  React.forwardRef((({children: children, className: className = "",
 
 Menu.displayName = "Menu";
 
-const MenuItem =  React.forwardRef((({children: children, href: href = "#", 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}`;
+const MenuItem =  React.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
+    }, content = jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [ icon && ("string" == typeof icon ? icon.startsWith("c-icon-") ? jsxRuntime.jsx(Icon, {
+            name: mapIconName(icon.replace("c-icon-", "")),
+            size: "sm",
+            className: "c-menu__icon"
+        }) : jsxRuntime.jsx("i", {
+            className: `c-menu__icon ${icon}`,
+            children: "string" != typeof icon && icon
+        }) : jsxRuntime.jsx("span", {
+            className: "c-menu__icon",
+            children: icon
+        })), children ]
+    });
     return jsxRuntime.jsx("li", {
         ref: ref,
         className: itemClass,
         role: "menuitem",
-        children: jsxRuntime.jsxs("a", {
-            href: href,
-            className: "c-menu__link",
-            onClick: e => {
-                disabled ? e.preventDefault() : onClick && onClick();
-            },
-            "aria-disabled": disabled,
-            "aria-current": active ? "page" : void 0,
-            children: [ icon && ("string" == typeof icon ? icon.startsWith("c-icon-") ? jsxRuntime.jsx(Icon, {
-                name: mapIconName(icon.replace("c-icon-", "")),
-                size: "sm",
-                className: "c-menu__icon"
-            }) : jsxRuntime.jsx("i", {
-                className: `c-menu__icon ${icon}`,
-                children: "string" != typeof icon && icon
-            }) : jsxRuntime.jsx("span", {
-                className: "c-menu__icon",
-                children: icon
-            })), children ]
+        children: linkComponent ? (() => {
+            const Component = linkComponent;
+            return jsxRuntime.jsx(Component, {
+                ...linkProps,
+                children: content
+            });
+        })() : jsxRuntime.jsx("a", {
+            ...linkProps,
+            children: content
         })
     });
 }));
@@ -15615,16 +15581,30 @@ const MegaMenuColumn =  React.forwardRef((({title: title, icon: icon, children:
 
 MegaMenuColumn.displayName = "MegaMenuColumn";
 
-const MegaMenuLink =  React.forwardRef((({href: href, children: children, className: className = "", disabled: disabled = !1, onClick: onClick}, ref) => jsxRuntime.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 =  React.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
+    };
+    if (linkComponent) {
+        const Component = linkComponent;
+        return jsxRuntime.jsx(Component, {
+            ...linkProps,
+            children: children
+        });
+    }
+    return jsxRuntime.jsx("a", {
+        ...linkProps,
+        children: children
+    });
+}));
 
 MegaMenuLink.displayName = "MegaMenuLink";
 
@@ -17607,8 +17587,8 @@ const SectionIntro = ({title: title, label: label, text: text, actions: actions,
 SectionIntro.displayName = "SectionIntro";
 
 const Slider =  React.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,
@@ -17620,8 +17600,8 @@ const Slider =  React.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 = React.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 jsxRuntime.jsx("div", {
+    // Ensure slides is an array to prevent .map errors
+        if (0 === validSlides.length) return jsxRuntime.jsx("div", {
         className: "c-slider c-slider--empty",
         style: {
             height: height,
@@ -17665,7 +17645,7 @@ const Slider =  React.forwardRef(((props, ref) => {
                 willChange: "transform"
             },
             children: allSlides.map(((slide, index) => jsxRuntime.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%",
@@ -17727,7 +17707,7 @@ const Slider =  React.forwardRef(((props, ref) => {
             }) ]
         }), pagination && jsxRuntime.jsx("div", {
             className: "c-slider__pagination",
-            children: slides.map(((_, index) => jsxRuntime.jsx("button", {
+            children: validSlides.map(((_, index) => jsxRuntime.jsx("button", {
                 type: "button",
                 className: "c-slider__pagination-bullet " + (index === realIndex ? "c-slider__pagination-bullet--active" : ""),
                 onClick: () => goToSlide(index),