@manamerge/mana-atomic-ui 1.0.164 → 1.0.166

package/dist/index.d.ts

@@ -37,11 +37,14 @@ declare const Heading: React.FC<HeadingTypes>;
 interface IconTypes {
     variant?: string;
     svg: FunctionComponent<SVGProps<SVGSVGElement>>;
-    color?: string;
     size?: string;
+    color?: string;
+    fill?: string;
     stroke?: string;
     hoverColor?: string;
+    hoverFill?: string;
     hoverStroke?: string;
+    hoverOpacity?: string;
     onClick?: () => void;
     onKeyDown?: (event: React.KeyboardEvent<SVGSVGElement>) => void;
     tabIndex?: number;
@@ -129,7 +132,6 @@ interface NavigationTypes {
         to: string;
     }[];
     onLogoClick?: () => void;
-    onTabClick: (label: string) => void;
 }
 declare const Navigation: React.FC<NavigationTypes>;
 

package/dist/index.js

@@ -231,41 +231,44 @@ const Heading = (_a) => {
 
 const StyledSvg = styled.svg `
     ${(_a) => {
-    var _b, _c;
+    var _b, _c, _d, _e;
     var { variant, theme } = _a, props = __rest(_a, ["variant", "theme"]);
     const iconStyles = (theme === null || theme === void 0 ? void 0 : theme.icon[variant]) || {};
     return css `
-            width: ${props.size || (iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.size) || "auto"};
-            height: ${props.size || (iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.size) || "auto"};
-            fill: ${props.color || (iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.color)};
-            color: ${props.color || (iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.color)};
-            stroke: ${props.stroke || (iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.stroke)};
+            width: ${(props === null || props === void 0 ? void 0 : props.size) || (iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.size) || "auto"};
+            height: ${(props === null || props === void 0 ? void 0 : props.size) || (iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.size) || "auto"};
+            color: ${(props === null || props === void 0 ? void 0 : props.color) || (iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.color)};
+            fill: ${(props === null || props === void 0 ? void 0 : props.fill) || (iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.fill)};
+            stroke: ${(props === null || props === void 0 ? void 0 : props.stroke) || (iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.stroke)};
             &:hover {
-                /* opacity: 0.8; */
-                stroke: ${props.hoverStroke || ((_b = iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.hover) === null || _b === void 0 ? void 0 : _b.stroke)};
-                fill: ${props.hoverColor || ((_c = iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.hover) === null || _c === void 0 ? void 0 : _c.color)};
+                color: ${(props === null || props === void 0 ? void 0 : props.hoverColor) || ((_b = iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.hover) === null || _b === void 0 ? void 0 : _b.color)};
+                fill: ${(props === null || props === void 0 ? void 0 : props.hoverFill) || ((_c = iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.hover) === null || _c === void 0 ? void 0 : _c.fill)};
+                stroke: ${(props === null || props === void 0 ? void 0 : props.hoverStroke) || ((_d = iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.hover) === null || _d === void 0 ? void 0 : _d.stroke)};
+                opacity: ${(props === null || props === void 0 ? void 0 : props.hoverOpacity) || ((_e = iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.hover) === null || _e === void 0 ? void 0 : _e.opacity)};
             }
         `;
 }}
 `;
 
 const Icon = (_a) => {
-    var { variant = "medium", svg: SvgIcon, color, size, stroke, hoverColor, hoverStroke, onClick, onKeyDown, tabIndex, role } = _a, props = __rest(_a, ["variant", "svg", "color", "size", "stroke", "hoverColor", "hoverStroke", "onClick", "onKeyDown", "tabIndex", "role"]);
+    var { variant = "md", svg: SvgIcon, size, color, fill, stroke, hoverColor, hoverFill, hoverStroke, hoverOpacity, onClick, onKeyDown, tabIndex, role } = _a, props = __rest(_a, ["variant", "svg", "size", "color", "fill", "stroke", "hoverColor", "hoverFill", "hoverStroke", "hoverOpacity", "onClick", "onKeyDown", "tabIndex", "role"]);
     if (!SvgIcon) {
         console.error("No SVG provided to the Icon component.");
         return null;
     }
-    return (jsx(StyledSvg, Object.assign({ className: classNames("Icon-" + variant), variant: "Icon-" + variant, as: SvgIcon, size: size, color: color, stroke: stroke, hoverColor: hoverColor, hoverStroke: hoverStroke, onClick: onClick, onKeyDown: onKeyDown, tabIndex: tabIndex, role: role }, props)));
+    return (jsx(StyledSvg, Object.assign({ className: classNames("Icon-" + variant), variant: "Icon-" + variant, as: SvgIcon, size: size, color: color, fill: fill, stroke: stroke, hoverColor: hoverColor, hoverFill: hoverFill, hoverStroke: hoverStroke, hoverOpacity: hoverOpacity, onClick: onClick, onKeyDown: onKeyDown, tabIndex: tabIndex, role: role }, props)));
 };
 
 const StyledLink$2 = styled.a `
-    ${({ variant = "primary-regular", theme, underline, hoverUnderline }) => {
+    ${({ variant, theme, underline, hoverUnderline }) => {
     var _a, _b;
     const linkStyles = ((_a = theme === null || theme === void 0 ? void 0 : theme.link) === null || _a === void 0 ? void 0 : _a[variant]) || {};
     return css `
-            font-size: ${linkStyles.fontSize};
-            line-height: ${linkStyles.lineHeight};
-            font-weight: ${linkStyles.fontWeight || "regular"};
+            font-size: ${linkStyles === null || linkStyles === void 0 ? void 0 : linkStyles.fontSize};
+            line-height: ${linkStyles === null || linkStyles === void 0 ? void 0 : linkStyles.lineHeight};
+            font-weight: ${(linkStyles === null || linkStyles === void 0 ? void 0 : linkStyles.fontWeight) || "regular"};
+            font-family: ${linkStyles === null || linkStyles === void 0 ? void 0 : linkStyles.fontFamily};
+            font-style: ${linkStyles === null || linkStyles === void 0 ? void 0 : linkStyles.fontStyle};
             color: ${linkStyles === null || linkStyles === void 0 ? void 0 : linkStyles.color};
             display: inline-block;
             text-decoration: ${underline ? "underline" : "none"};
@@ -276,7 +279,7 @@ const StyledLink$2 = styled.a `
             ? "underline"
             : "none"
         : "underline"};
-                color: ${(_b = linkStyles.hover) === null || _b === void 0 ? void 0 : _b.color};
+                color: ${(_b = linkStyles === null || linkStyles === void 0 ? void 0 : linkStyles.hover) === null || _b === void 0 ? void 0 : _b.color};
             }
 
             &:disabled {
@@ -605,6 +608,13 @@ const AtomIconDot = styled(Icon).attrs(({ theme, moleculeVariant }) => {
         `;
 }}
 `;
+const AtomTextBanner = styled(Text).attrs(({ theme, moleculeVariant }) => {
+    var _a, _b, _c, _d, _e, _f;
+    return ({
+        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomTextBanner) === null || _c === void 0 ? void 0 : _c.variant,
+        vColor: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.header) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.atomTextBanner) === null || _f === void 0 ? void 0 : _f.color
+    });
+}) ``;
 const AtomHeading$3 = styled(Heading).attrs(({ theme, moleculeVariant }) => {
     var _a, _b, _c, _d, _e, _f;
     return ({
@@ -613,9 +623,10 @@ const AtomHeading$3 = styled(Heading).attrs(({ theme, moleculeVariant }) => {
     });
 }) ``;
 const AtomTextTitle = styled(Text).attrs(({ theme, moleculeVariant }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
     return ({
-        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomTextTitle) === null || _c === void 0 ? void 0 : _c.variant
+        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomTextTitle) === null || _c === void 0 ? void 0 : _c.variant,
+        vColor: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.header) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.atomTextTitle) === null || _f === void 0 ? void 0 : _f.color
     });
 }) ``;
 const WrapperLineBottom = styled.div `
@@ -684,13 +695,17 @@ const WrapperTextTitle = styled.div `
 
 const Header = ({ moleculeVariant = "primary", iconTop, iconDot, buttonLeftIcon, buttonRightIcon, textBanner, headingTitle, textTitle, buttonLeftText, buttonLeftClick, buttonRightText, buttonRightClick, imageURLBackground, withOverlay }) => {
     const compVariant = `Header-${moleculeVariant}`;
-    return (jsx(WrapperBackground, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant, imageURLBackground: imageURLBackground, withOverlay: withOverlay }, { children: jsxs(WrapperHeader, Object.assign({ moleculeVariant: compVariant }, { children: [jsxs("div", { children: [iconTop && (jsx(AtomIconTop, { moleculeVariant: compVariant, svg: iconTop })), textBanner && (jsxs(WrapperLineTop, Object.assign({ moleculeVariant: compVariant }, { children: [iconDot && (jsx(AtomIconDot, { moleculeVariant: compVariant, svg: iconDot })), jsx(AtomTextTitle, Object.assign({ moleculeVariant: compVariant }, { children: textBanner }))] })))] }), headingTitle && (jsx(AtomHeading$3, Object.assign({ moleculeVariant: compVariant }, { children: headingTitle }))), jsx(WrapperTextTitle, Object.assign({ moleculeVariant: compVariant }, { children: textTitle &&
+    return (jsx(WrapperBackground, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant, imageURLBackground: imageURLBackground, withOverlay: withOverlay }, { children: jsxs(WrapperHeader, Object.assign({ moleculeVariant: compVariant }, { children: [jsxs("div", { children: [iconTop && (jsx(AtomIconTop, { moleculeVariant: compVariant, svg: iconTop })), textBanner && (jsxs(WrapperLineTop, Object.assign({ moleculeVariant: compVariant }, { children: [iconDot && (jsx(AtomIconDot, { moleculeVariant: compVariant, svg: iconDot })), jsx(AtomTextBanner, Object.assign({ moleculeVariant: compVariant }, { children: textBanner }))] })))] }), headingTitle && (jsx(AtomHeading$3, Object.assign({ moleculeVariant: compVariant }, { children: headingTitle }))), jsx(WrapperTextTitle, Object.assign({ moleculeVariant: compVariant }, { children: textTitle &&
                         (textTitle === null || textTitle === void 0 ? void 0 : textTitle.map((text, i) => (jsx(AtomTextTitle, Object.assign({ moleculeVariant: compVariant }, { children: text }), i)))) })), jsxs(WrapperLineBottom, { children: [(buttonLeftIcon || buttonLeftText) && (jsxs(AtomButtonLeft, Object.assign({ moleculeVariant: compVariant, onClick: buttonLeftClick }, { children: [buttonLeftIcon && (jsx(AtomIconLeft, { moleculeVariant: compVariant, svg: buttonLeftIcon })), buttonLeftText] }))), (buttonRightIcon || buttonRightText) && (jsxs(AtomButtonRight, Object.assign({ moleculeVariant: compVariant, onClick: buttonRightClick }, { children: [buttonRightText, buttonRightIcon && (jsx(AtomIconRight, { moleculeVariant: compVariant, svg: buttonRightIcon }))] })))] })] })) })));
 };
 
 const NavBar = styled.nav `
     display: flex;
     align-items: flex-start;
+    position: absolute;
+    width: 100%;
+    right: 0;
+    left: 0;
 
     ${({ theme, moleculeVariant }) => {
     var _a;
@@ -701,11 +716,11 @@ const NavBar = styled.nav `
                 align-items: center;
             }
             gap: ${navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.gap};
-            background: ${(navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.background) || "#333"};
+            background: ${navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.background};
+            height: ${navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.height};
+            padding: ${navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.padding};
         `;
 }}
-
-    padding: 1rem;
 `;
 const BurgerWrapper = styled.div `
     flex-direction: column;
@@ -768,30 +783,52 @@ const StyledLink$1 = styled(Link).attrs(({ theme, moleculeVariant }) => {
         variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.navigation) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomLink) === null || _c === void 0 ? void 0 : _c.variant
     });
 }) `
+    position: relative;
+
     ${({ theme, moleculeVariant, currentPath }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     const linkTheme = ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.navigation) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomLink) || {};
     return css `
-            color: ${currentPath
-        ? ((_c = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.currentPath) === null || _c === void 0 ? void 0 : _c.color) || "#f0f"
-        : (linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.color) || "#0f0"};
             font-weight: ${currentPath
-        ? ((_d = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.currentPath) === null || _d === void 0 ? void 0 : _d.fontWeight) || "900"
+        ? ((_c = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.currentPath) === null || _c === void 0 ? void 0 : _c.fontWeight) || "900"
         : (linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.fontWeight) || "700"};
+            color: ${currentPath
+        ? (_d = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.currentPath) === null || _d === void 0 ? void 0 : _d.color
+        : linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.color};
+
+            /* ---------- CENTER EXPANDING UNDERLINE ---------- */
+            &::after {
+                content: "";
+                position: absolute;
+                left: 0;
+                bottom: ${((_e = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _e === void 0 ? void 0 : _e.bottom) || "2px"};
+                width: 100%;
+                height: ${((_f = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _f === void 0 ? void 0 : _f.height) || "2px"};
+                background: ${(_g = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _g === void 0 ? void 0 : _g.background};
+                transform: scaleX(${currentPath ? 1 : 0});
+                transform-origin: ${(_h = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _h === void 0 ? void 0 : _h.transformOrigin};
+                transition: transform ${(_j = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _j === void 0 ? void 0 : _j.transition};
+            }
+
+            &:hover::after {
+                transform: scaleX(1);
+            }
+
             &:focus {
-                color: ${((_e = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _e === void 0 ? void 0 : _e.color) || "gold"};
-                box-shadow: ${((_f = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _f === void 0 ? void 0 : _f.boxShadow) || "none"};
-                transform: ${((_g = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _g === void 0 ? void 0 : _g.transform) || "none"};
+                color: ${(_k = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _k === void 0 ? void 0 : _k.color};
+                box-shadow: ${((_l = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _l === void 0 ? void 0 : _l.boxShadow) || "none"};
+                transform: ${((_m = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _m === void 0 ? void 0 : _m.transform) || "none"};
             }
             &:hover {
-                color: ${((_h = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.hover) === null || _h === void 0 ? void 0 : _h.color) || "purple"};
-                transition: ${((_j = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.hover) === null || _j === void 0 ? void 0 : _j.transition) || "none"};
+                color: ${(_o = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.hover) === null || _o === void 0 ? void 0 : _o.color};
+                transition: ${((_p = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.hover) === null || _p === void 0 ? void 0 : _p.transition) || "none"};
+                text-decoration: none;
             }
         `;
 }};
 `;
 
-const Navigation = ({ moleculeVariant = "primary", logo, onLogoClick, iconBurger, tabs, onTabClick }) => {
+const Navigation = ({ moleculeVariant = "primary", logo, onLogoClick, iconBurger, tabs }) => {
     const location = useLocation();
     const currentPath = location.pathname.slice(1);
     const [isOpen, setIsOpen] = useState(false);
@@ -800,10 +837,7 @@ const Navigation = ({ moleculeVariant = "primary", logo, onLogoClick, iconBurger
     };
     const compVariant = `Navigation-${moleculeVariant}`;
     return (jsxs(NavBar, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant }, { children: [logo && (jsx(AtomIcon$3, { moleculeVariant: compVariant, svg: logo, onClick: onLogoClick, onKeyDown: onLogoClick, "aria-label": "Logo", tabIndex: 0, role: "button" })), jsxs("div", Object.assign({ style: { width: "100%" } }, { children: [jsx(BurgerWrapper, { children: jsx(AtomIcon$3, { moleculeVariant: compVariant, svg: iconBurger, onClick: handleToggle, onKeyDown: handleToggle, "aria-pressed": isOpen, "aria-label": "Burger", tabIndex: 0, role: "button" }) }), jsx(NavLinks, Object.assign({ isOpen: isOpen, moleculeVariant: compVariant }, { children: tabs.length > 0
-                            ? tabs.map((tab) => (jsx(StyledLink$1, Object.assign({ moleculeVariant: compVariant, to: tab.to, currentPath: tab.label === currentPath, onClick: () => {
-                                    onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(tab.label);
-                                    setIsOpen(false);
-                                } }, { children: tab.label }), tab.label)))
+                            ? tabs.map((tab) => (jsx(StyledLink$1, Object.assign({ moleculeVariant: compVariant, to: tab.to, currentPath: tab.label === currentPath }, { children: tab.label }), tab.label)))
                             : "no tabs available" }))] }))] })));
 };
 
@@ -845,6 +879,12 @@ const IconFooter = styled(Icon).attrs(({ theme, moleculeVariant }) => {
         variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.footer) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.icons) === null || _c === void 0 ? void 0 : _c.variant
     });
 }) ``;
+const StyledGradient = styled(Gradient).attrs(({ theme, moleculeVariant }) => {
+    var _a, _b, _c;
+    return ({
+        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.footer) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.gradient) === null || _c === void 0 ? void 0 : _c.color
+    });
+}) ``;
 const StyledLink = styled(Link).attrs(({ theme, moleculeVariant }) => {
     var _a, _b, _c;
     return ({
@@ -877,11 +917,6 @@ const StyledLink = styled(Link).attrs(({ theme, moleculeVariant }) => {
         `;
 }}
 
-    &:focus {
-        outline: 2px solid red;
-        outline-offset: 4px;
-    }
-
     ${({ theme }) => theme.media.largeMobileUp} {
         margin: 0 10px;
     }
@@ -908,14 +943,15 @@ const FooterChildren = styled(Text).attrs(({ theme, moleculeVariant }) => {
 const Footer = ({ moleculeVariant = "primary", children, svg, routes }) => {
     // Memoize sorted routes to prevent redundant sorting
     const sortedRoutes = useMemo(() => [...routes].sort((a, b) => a.order - b.order), [routes]);
+    const compVariant = "Footer-" + moleculeVariant;
     const renderRouteLink = (route) => {
         const isExternal = route.type === "external";
         const href = isExternal ? route.url : undefined;
         const to = !isExternal ? route.slug : undefined;
         const target = route.blank ? "_blank" : undefined;
-        return (jsxs(StyledLink, Object.assign({ moleculeVariant: "Footer-" + moleculeVariant, href: href, to: to, target: target }, { children: [route.label, svg && (jsx(IconFooter, { moleculeVariant: "Footer-" + moleculeVariant, svg: svg }))] }), route.order));
+        return (jsxs(StyledLink, Object.assign({ moleculeVariant: compVariant, href: href, to: to, target: target }, { children: [route.label, svg && jsx(IconFooter, { moleculeVariant: compVariant, svg: svg })] }), route.order));
     };
-    return (jsxs(FooterWrapper, Object.assign({ className: classNames("Footer-", moleculeVariant), moleculeVariant: "Footer-" + moleculeVariant }, { children: [children && (jsx(FooterChildren, Object.assign({ moleculeVariant: "Footer-" + moleculeVariant }, { children: children }))), jsx(FooterNav, Object.assign({ moleculeVariant: "Footer-" + moleculeVariant }, { children: sortedRoutes.map(renderRouteLink) }))] })));
+    return (jsxs(FooterWrapper, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant }, { children: [children && (jsx(StyledGradient, Object.assign({ moleculeVariant: compVariant }, { children: jsx(FooterChildren, Object.assign({ moleculeVariant: compVariant }, { children: children })) }))), jsx(FooterNav, Object.assign({ moleculeVariant: compVariant }, { children: sortedRoutes.map(renderRouteLink) }))] })));
 };
 
 const CardContainer = styled.div `
@@ -1430,7 +1466,7 @@ const AtomHeading = styled(Heading).attrs(({ theme, moleculeVariant }) => {
 const AtomIcon = styled(Icon).attrs(({ theme, moleculeVariant }) => {
     var _a, _b, _c;
     return ({
-        variant: ((_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomIcon) === null || _c === void 0 ? void 0 : _c.variant) || "small"
+        variant: ((_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.accordion) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomIcon) === null || _c === void 0 ? void 0 : _c.variant) || "sm"
     });
 }) `
     min-width: fit-content;