@manamerge/mana-atomic-ui 1.0.227 → 1.0.229

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode, FunctionComponent, SVGProps, AnchorHTMLAttributes, ElementType } from 'react';
+import React, { ReactNode, HTMLAttributes, FunctionComponent, SVGProps, AnchorHTMLAttributes, ElementType } from 'react';
 
 interface ButtonTypes {
     disabled?: boolean;
@@ -26,7 +26,7 @@ interface TextTypes {
 }
 declare const Text: React.FC<TextTypes>;
 
-interface HeadingTypes {
+interface HeadingTypes extends HTMLAttributes<HTMLHeadingElement> {
     variant?: string;
     children: ReactNode;
     vColor?: string;

package/dist/index.js

@@ -705,9 +705,10 @@ const WrapperTextTitle = styled.div `
 }}
 `;
 
-const Header = ({ moleculeVariant = "primary", iconTop, iconDot, buttonLeftIcon, buttonRightIcon, textBanner, headingTitle, textTitle, buttonLeftText, buttonLeftClick, buttonRightText, buttonRightClick, imageURLBackground, withOverlay }) => {
+const Header = (_a) => {
+    var { moleculeVariant = "primary", iconTop, iconDot, buttonLeftIcon, buttonRightIcon, textBanner, headingTitle, textTitle, buttonLeftText, buttonLeftClick, buttonRightText, buttonRightClick, imageURLBackground, withOverlay } = _a, props = __rest(_a, ["moleculeVariant", "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(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 &&
+    return (jsx(WrapperBackground, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant, imageURLBackground: imageURLBackground, withOverlay: withOverlay }, props, { 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 }))] })))] })] })) })));
 };
 
@@ -873,7 +874,8 @@ const Backdrop = styled.div `
     z-index: 0;
 `;
 
-const Navigation = ({ moleculeVariant = "primary", logo, onLogoClick, iconBurger, tabs }) => {
+const Navigation = (_a) => {
+    var { moleculeVariant = "primary", logo, onLogoClick, iconBurger, tabs } = _a, props = __rest(_a, ["moleculeVariant", "logo", "onLogoClick", "iconBurger", "tabs"]);
     const location = useLocation();
     const currentPath = location.pathname;
     const [isOpen, setIsOpen] = useState(false);
@@ -881,7 +883,7 @@ const Navigation = ({ moleculeVariant = "primary", logo, onLogoClick, iconBurger
         setIsOpen(!isOpen);
     };
     const compVariant = `Navigation-${moleculeVariant}`;
-    return (jsxs(Fragment, { children: [jsx(Backdrop, { isOpen: isOpen, onClick: () => setIsOpen(false) }), 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
+    return (jsxs(Fragment, { children: [jsx(Backdrop, { isOpen: isOpen, onClick: () => setIsOpen(false) }), jsxs(NavBar, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant }, props, { 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.to === currentPath, onClick: () => setIsOpen(false) }, { children: tab.label }), tab.label)))
                                     : "no tabs available" }))] }))] }))] }));
 };
@@ -976,7 +978,8 @@ const FooterChildren = styled(Text).attrs(({ theme, moleculeVariant }) => {
 }}
 `;
 
-const Footer = ({ moleculeVariant = "primary", children, svg, routes }) => {
+const Footer = (_a) => {
+    var { moleculeVariant = "primary", children, svg, routes } = _a, props = __rest(_a, ["moleculeVariant", "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;
@@ -987,7 +990,7 @@ const Footer = ({ moleculeVariant = "primary", children, svg, routes }) => {
         const target = route.blank ? "_blank" : undefined;
         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(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) }))] })));
+    return (jsxs(FooterWrapper, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant }, props, { 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 `
@@ -1325,11 +1328,12 @@ const TextBreakerTape = styled(Text).attrs(({ theme, moleculeVariant }) => {
 }}
 `;
 
-const BreakerTape = ({ moleculeVariant = "primary", words, svg }) => {
+const BreakerTape = (_a) => {
+    var { moleculeVariant = "primary", words, svg } = _a, props = __rest(_a, ["moleculeVariant", "words", "svg"]);
     // Duplicate words to ensure continuous flow
     const repeatedWords = [...words, ...words];
     const compVariant = `BreakerTape-${moleculeVariant}`;
-    return (jsx(TapeContainer, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant }, { children: jsx(FadeOverlay, { children: jsx(TapeContent, Object.assign({ moleculeVariant: compVariant }, { children: repeatedWords.map((word, index) => (jsxs(Fragment, { children: [svg && (jsx(IconBreakerTape, { moleculeVariant: compVariant, svg: svg })), jsx(TextBreakerTape, Object.assign({ moleculeVariant: compVariant }, { children: word }), index)] }))) })) }) })));
+    return (jsx(TapeContainer, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant }, props, { children: jsx(FadeOverlay, { children: jsx(TapeContent, Object.assign({ moleculeVariant: compVariant }, { children: repeatedWords.map((word, index) => (jsxs(Fragment, { children: [svg && (jsx(IconBreakerTape, { moleculeVariant: compVariant, svg: svg })), jsx(TextBreakerTape, Object.assign({ moleculeVariant: compVariant }, { children: word }), index)] }))) })) }) })));
 };
 
 const Card$1 = styled.div `
@@ -1447,9 +1451,10 @@ const BackgroundSvg = styled(Icon) `
     height: 100%;
 `;
 
-const CardSimpleRender = ({ moleculeVariant = "primary", icon, backgroundSvg, title, description, gradientPosition, children, onClick }) => {
+const CardSimpleRender = (_a) => {
+    var { moleculeVariant = "primary", icon, backgroundSvg, title, description, gradientPosition, children, onClick } = _a, props = __rest(_a, ["moleculeVariant", "icon", "backgroundSvg", "title", "description", "gradientPosition", "children", "onClick"]);
     const compVariant = `CardSimpleRender-${moleculeVariant}`;
-    return (jsxs(Card$1, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant, as: onClick ? "button" : "div", onClick: onClick, cardHover: !!onClick, gradientPosition: gradientPosition }, { children: [backgroundSvg && (jsx(BackgroundSvg, { moleculeVariant: compVariant, svg: backgroundSvg })), (icon || title || description) && (jsxs("div", { children: [(icon || title) && (jsxs(WrapperLine, Object.assign({ moleculeVariant: compVariant }, { children: [icon && (jsx(AtomIcon$2, { moleculeVariant: compVariant, svg: icon })), title && (jsx(AtomHeading$2, Object.assign({ moleculeVariant: compVariant }, { children: title })))] }))), description && (jsx(AtomText$2, Object.assign({ moleculeVariant: compVariant }, { children: description })))] })), children] })));
+    return (jsxs(Card$1, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant, as: onClick ? "button" : "div", onClick: onClick, cardHover: !!onClick, gradientPosition: gradientPosition }, props, { children: [backgroundSvg && (jsx(BackgroundSvg, { moleculeVariant: compVariant, svg: backgroundSvg })), (icon || title || description) && (jsxs("div", { children: [(icon || title) && (jsxs(WrapperLine, Object.assign({ moleculeVariant: compVariant }, { children: [icon && (jsx(AtomIcon$2, { moleculeVariant: compVariant, svg: icon })), title && (jsx(AtomHeading$2, Object.assign({ moleculeVariant: compVariant }, { children: title })))] }))), description && (jsx(AtomText$2, Object.assign({ moleculeVariant: compVariant }, { children: description })))] })), children] })));
 };
 
 const Card = styled.div `
@@ -1510,8 +1515,9 @@ const AtomIcon$1 = styled(Icon).attrs(({ theme, moleculeVariant }) => {
     });
 }) ``;
 
-const CardBanner = ({ moleculeVariant = "primary", icon, title, description, buttonText, buttonClick }) => {
-    return (jsxs(Card, Object.assign({ className: classNames("CardBanner-", moleculeVariant), moleculeVariant: "CardBanner-" + moleculeVariant }, { children: [jsxs("div", { children: [jsx(AtomHeading$1, Object.assign({ moleculeVariant: "CardBanner-" + moleculeVariant }, { children: title })), jsx(AtomText$1, Object.assign({ moleculeVariant: "CardBanner-" + moleculeVariant }, { children: description }))] }), buttonClick && (jsxs(AtomButton, Object.assign({ moleculeVariant: "CardBanner-" + moleculeVariant, onClick: buttonClick }, { children: [buttonText, icon && (jsx(AtomIcon$1, { moleculeVariant: "CardBanner-" + moleculeVariant, svg: icon }))] })))] })));
+const CardBanner = (_a) => {
+    var { moleculeVariant = "primary", icon, title, description, buttonText, buttonClick } = _a, props = __rest(_a, ["moleculeVariant", "icon", "title", "description", "buttonText", "buttonClick"]);
+    return (jsxs(Card, Object.assign({ className: classNames("CardBanner-", moleculeVariant), moleculeVariant: "CardBanner-" + moleculeVariant }, props, { children: [jsxs("div", { children: [jsx(AtomHeading$1, Object.assign({ moleculeVariant: "CardBanner-" + moleculeVariant }, { children: title })), jsx(AtomText$1, Object.assign({ moleculeVariant: "CardBanner-" + moleculeVariant }, { children: description }))] }), buttonClick && (jsxs(AtomButton, Object.assign({ moleculeVariant: "CardBanner-" + moleculeVariant, onClick: buttonClick }, { children: [buttonText, icon && (jsx(AtomIcon$1, { moleculeVariant: "CardBanner-" + moleculeVariant, svg: icon }))] })))] })));
 };
 
 const AccordionContainer = styled.div `
@@ -1610,7 +1616,8 @@ const AtomText = styled(Text).attrs(({ theme, moleculeVariant }) => {
 }};
 `;
 
-const Accordion = ({ moleculeVariant = "primary", iconPlus, iconMinus, content = [] }) => {
+const Accordion = (_a) => {
+    var { moleculeVariant = "primary", iconPlus, iconMinus, content = [] } = _a, props = __rest(_a, ["moleculeVariant", "iconPlus", "iconMinus", "content"]);
     const [openIndices, setOpenIndices] = useState([]);
     const toggleAccordion = (index) => {
         setOpenIndices((prev) => {
@@ -1620,7 +1627,7 @@ const Accordion = ({ moleculeVariant = "primary", iconPlus, iconMinus, content =
         });
     };
     const compVariant = `Accordion-${moleculeVariant}`;
-    return (jsx(AccordionContainer, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant }, { children: content === null || content === void 0 ? void 0 : content.map((item, index) => (jsxs("div", { children: [jsxs(AccordionTitle, Object.assign({ moleculeVariant: compVariant, onClick: () => toggleAccordion(index), "aria-pressed": openIndices[index] }, { children: [jsx(AtomHeading, Object.assign({ moleculeVariant: compVariant }, { children: item.title })), iconPlus && iconMinus && (jsx(AtomIcon, { moleculeVariant: compVariant, svg: openIndices[index] ? iconMinus : iconPlus }))] })), jsx(AccordionDescription, Object.assign({ moleculeVariant: compVariant, isOpen: openIndices[index], onTransitionEnd: () => !openIndices[index] }, { children: jsx(AtomText, Object.assign({ moleculeVariant: compVariant }, { children: item.description })) }))] }, index))) })));
+    return (jsx(AccordionContainer, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant }, props, { children: content === null || content === void 0 ? void 0 : content.map((item, index) => (jsxs("div", { children: [jsxs(AccordionTitle, Object.assign({ moleculeVariant: compVariant, onClick: () => toggleAccordion(index), "aria-pressed": openIndices[index] }, { children: [jsx(AtomHeading, Object.assign({ moleculeVariant: compVariant }, { children: item.title })), iconPlus && iconMinus && (jsx(AtomIcon, { moleculeVariant: compVariant, svg: openIndices[index] ? iconMinus : iconPlus }))] })), jsx(AccordionDescription, Object.assign({ moleculeVariant: compVariant, isOpen: openIndices[index], onTransitionEnd: () => !openIndices[index] }, { children: jsx(AtomText, Object.assign({ moleculeVariant: compVariant }, { children: item.description })) }))] }, index))) })));
 };
 
 const Layout = styled.div `
@@ -1663,9 +1670,10 @@ const Element = styled.div `
 }}
 `;
 
-const Pint3 = ({ moleculeVariant = "primary", cards, minHeight }) => {
+const Pint3 = (_a) => {
+    var { moleculeVariant = "primary", cards, minHeight } = _a, props = __rest(_a, ["moleculeVariant", "cards", "minHeight"]);
     const compVariant = `Pint3-${moleculeVariant}`;
-    return (jsxs(Layout, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant, minHeight: minHeight }, { children: [jsxs(Column, Object.assign({ moleculeVariant: compVariant, minHeight: minHeight }, { children: [jsx(Element, Object.assign({ weight: 2 }, { children: cards === null || cards === void 0 ? void 0 : cards[0] })), jsx(Element, Object.assign({ weight: 8 }, { children: cards === null || cards === void 0 ? void 0 : cards[1] }))] })), jsxs(Column, Object.assign({ moleculeVariant: compVariant, minHeight: minHeight }, { children: [jsx(Element, Object.assign({ weight: 2 }, { children: cards === null || cards === void 0 ? void 0 : cards[2] })), jsx(Element, Object.assign({ weight: 1 }, { children: cards === null || cards === void 0 ? void 0 : cards[3] })), jsx(Element, Object.assign({ weight: 7 }, { children: cards === null || cards === void 0 ? void 0 : cards[4] }))] })), jsxs(Column, Object.assign({ moleculeVariant: compVariant, minHeight: minHeight }, { children: [jsx(Element, Object.assign({ weight: 3.5 }, { children: cards === null || cards === void 0 ? void 0 : cards[5] })), jsx(Element, Object.assign({ weight: 6.5 }, { children: cards === null || cards === void 0 ? void 0 : cards[6] }))] }))] })));
+    return (jsxs(Layout, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant, minHeight: minHeight }, props, { children: [jsxs(Column, Object.assign({ moleculeVariant: compVariant, minHeight: minHeight }, { children: [jsx(Element, Object.assign({ weight: 2 }, { children: cards === null || cards === void 0 ? void 0 : cards[0] })), jsx(Element, Object.assign({ weight: 8 }, { children: cards === null || cards === void 0 ? void 0 : cards[1] }))] })), jsxs(Column, Object.assign({ moleculeVariant: compVariant, minHeight: minHeight }, { children: [jsx(Element, Object.assign({ weight: 2 }, { children: cards === null || cards === void 0 ? void 0 : cards[2] })), jsx(Element, Object.assign({ weight: 1 }, { children: cards === null || cards === void 0 ? void 0 : cards[3] })), jsx(Element, Object.assign({ weight: 7 }, { children: cards === null || cards === void 0 ? void 0 : cards[4] }))] })), jsxs(Column, Object.assign({ moleculeVariant: compVariant, minHeight: minHeight }, { children: [jsx(Element, Object.assign({ weight: 3.5 }, { children: cards === null || cards === void 0 ? void 0 : cards[5] })), jsx(Element, Object.assign({ weight: 6.5 }, { children: cards === null || cards === void 0 ? void 0 : cards[6] }))] }))] })));
 };
 
 export { Accordion, BreakerTape, Button, CDNImage, CardBanner, CardSimpleRender, CardTeaser, Divider, Footer, Gradient, Header, Heading, Icon, Link, Navigation, Pint3, Text };