@manamerge/mana-atomic-ui 1.0.206 → 1.0.207

package/dist/index.d.ts

@@ -175,7 +175,6 @@ declare const BreakerTape: React.FC<BreakerTapeTypes>;
 interface CardSimpleRenderTypes {
     moleculeVariant?: string;
     icon?: FunctionComponent<SVGProps<SVGSVGElement>>;
-    backgroundSvg?: FunctionComponent<SVGProps<SVGSVGElement>>;
     title?: string;
     description?: string;
     gradientPosition?: "center" | "top" | "bottom" | "left" | "right" | "top left" | "top right" | "bottom left" | "bottom right";

package/dist/index.js

@@ -921,8 +921,8 @@ const IconFooter = styled(Icon).attrs(({ theme, moleculeVariant }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     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.icons) === null || _c === void 0 ? void 0 : _c.variant,
-        fill: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.footer) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.icons) === null || _f === void 0 ? void 0 : _f.fill,
-        stroke: (_j = (_h = (_g = theme === null || theme === void 0 ? void 0 : theme.footer) === null || _g === void 0 ? void 0 : _g[moleculeVariant]) === null || _h === void 0 ? void 0 : _h.icons) === null || _j === void 0 ? void 0 : _j.stroke
+        stroke: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.footer) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.icons) === null || _f === void 0 ? void 0 : _f.stroke,
+        fill: (_j = (_h = (_g = theme === null || theme === void 0 ? void 0 : theme.footer) === null || _g === void 0 ? void 0 : _g[moleculeVariant]) === null || _h === void 0 ? void 0 : _h.icons) === null || _j === void 0 ? void 0 : _j.fill
     });
 }) ``;
 const StyledGradient = styled(Gradient).attrs(({ theme, moleculeVariant }) => {
@@ -938,20 +938,27 @@ const StyledLink = styled(Link).attrs(({ theme, moleculeVariant }) => {
     });
 }) `
     ${({ theme, moleculeVariant }) => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     const themeFooter = (_a = theme === null || theme === void 0 ? void 0 : theme.footer) === null || _a === void 0 ? void 0 : _a[moleculeVariant];
     const linksTheme = (themeFooter === null || themeFooter === void 0 ? void 0 : themeFooter.links) || {};
-    const iconsTheme = ((_b = themeFooter === null || themeFooter === void 0 ? void 0 : themeFooter.icons) === null || _b === void 0 ? void 0 : _b.hover) || {};
+    const iconsTheme = (themeFooter === null || themeFooter === void 0 ? void 0 : themeFooter.icons) || {};
+    const iconCustomVariant = (iconsTheme === null || iconsTheme === void 0 ? void 0 : iconsTheme.variant) || {};
+    const iconsClientThemeVariant = (theme === null || theme === void 0 ? void 0 : theme.icon["Icon-" + iconCustomVariant]) || {};
     return css `
             color: ${linksTheme === null || linksTheme === void 0 ? void 0 : linksTheme.color};
             display: flex;
             align-items: center;
             &:hover {
+                color: ${(_b = linksTheme === null || linksTheme === void 0 ? void 0 : linksTheme.hover) === null || _b === void 0 ? void 0 : _b.color};
+                transition: 0.2s;
                 text-decoration: none;
-            }
-            &:hover ${IconFooter} {
-                fill: ${iconsTheme === null || iconsTheme === void 0 ? void 0 : iconsTheme.fill};
-                stroke: ${iconsTheme === null || iconsTheme === void 0 ? void 0 : iconsTheme.stroke};
+                svg {
+                    transition: 0.2s;
+                    fill: ${((_c = iconsTheme.hover) === null || _c === void 0 ? void 0 : _c.color) ||
+        ((_d = iconsClientThemeVariant === null || iconsClientThemeVariant === void 0 ? void 0 : iconsClientThemeVariant.hover) === null || _d === void 0 ? void 0 : _d.color)};
+                    stroke: ${((_e = iconsTheme.hover) === null || _e === void 0 ? void 0 : _e.stroke) ||
+        ((_f = iconsClientThemeVariant === null || iconsClientThemeVariant === void 0 ? void 0 : iconsClientThemeVariant.hover) === null || _f === void 0 ? void 0 : _f.stroke)};
+                }
             }
         `;
 }}
@@ -1212,7 +1219,7 @@ const GradientStyle = styled(Gradient).attrs(({ theme, moleculeVariant }) => {
         variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.gradient) === null || _c === void 0 ? void 0 : _c.variant
     });
 }) ``;
-const BackgroundSvg$1 = styled(Icon) `
+const BackgroundSvg = styled(Icon) `
     ${({ theme, moleculeVariant }) => {
     var _a;
     const thisTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.cardTeaser) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) || {};
@@ -1229,7 +1236,7 @@ const BackgroundSvg$1 = styled(Icon) `
 
 const CardTeaser = ({ moleculeVariant = "primary", company, year, title, checks, onClick, buttonName, svg, backgroundSvg, cardImageSrc, separator }) => {
     const compVariant = "CardTeaser-" + moleculeVariant;
-    return (jsxs(CardBackgroundColor, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant }, { children: [backgroundSvg && (jsx(BackgroundSvg$1, { moleculeVariant: compVariant, svg: backgroundSvg })), jsxs(CardContainer, Object.assign({ moleculeVariant: compVariant }, { children: [jsxs(LeftCardContainer, Object.assign({ moleculeVariant: compVariant }, { children: [(company || year) && (jsx(GradientStyle, Object.assign({ moleculeVariant: "primary" }, { children: jsxs(HeadingCompanyDate, Object.assign({ moleculeVariant: compVariant }, { children: [company, " ", company && year && "•", " ", year] })) }))), jsx(HeadingTitle, Object.assign({ moleculeVariant: compVariant }, { children: title })), separator && jsx(Separator, { moleculeVariant: compVariant }), jsx(List, Object.assign({ moleculeVariant: compVariant }, { children: checks === null || checks === void 0 ? void 0 : checks.map((check, index) => (jsxs(ListItem, Object.assign({ moleculeVariant: compVariant }, { children: [svg && (jsx(IconCard, { moleculeVariant: compVariant, svg: svg })), jsx(TextListItem, Object.assign({ moleculeVariant: compVariant }, { children: check }))] }), index))) })), buttonName && buttonName.length > 0 && (jsx(ButtonCardContainer, { children: jsx(ButtonCard, Object.assign({ moleculeVariant: compVariant, onClick: onClick }, { children: buttonName })) }))] })), jsx(ImageContainer, { children: jsx(Image, { moleculeVariant: compVariant, src: cardImageSrc, alt: "Experience" }) })] }))] })));
+    return (jsxs(CardBackgroundColor, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant }, { children: [backgroundSvg && (jsx(BackgroundSvg, { moleculeVariant: compVariant, svg: backgroundSvg })), jsxs(CardContainer, Object.assign({ moleculeVariant: compVariant }, { children: [jsxs(LeftCardContainer, Object.assign({ moleculeVariant: compVariant }, { children: [(company || year) && (jsx(GradientStyle, Object.assign({ moleculeVariant: "primary" }, { children: jsxs(HeadingCompanyDate, Object.assign({ moleculeVariant: compVariant }, { children: [company, " ", company && year && "•", " ", year] })) }))), jsx(HeadingTitle, Object.assign({ moleculeVariant: compVariant }, { children: title })), separator && jsx(Separator, { moleculeVariant: compVariant }), jsx(List, Object.assign({ moleculeVariant: compVariant }, { children: checks === null || checks === void 0 ? void 0 : checks.map((check, index) => (jsxs(ListItem, Object.assign({ moleculeVariant: compVariant }, { children: [svg && (jsx(IconCard, { moleculeVariant: compVariant, svg: svg })), jsx(TextListItem, Object.assign({ moleculeVariant: compVariant }, { children: check }))] }), index))) })), buttonName && buttonName.length > 0 && (jsx(ButtonCardContainer, { children: jsx(ButtonCard, Object.assign({ moleculeVariant: compVariant, onClick: onClick }, { children: buttonName })) }))] })), jsx(ImageContainer, { children: jsx(Image, { moleculeVariant: compVariant, src: cardImageSrc, alt: "Experience" }) })] }))] })));
 };
 
 const scroll = keyframes `
@@ -1345,9 +1352,7 @@ const Card$1 = styled.div `
             background: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.background};
             ${gradientPosition &&
         css `
-                position: relative;
-                overflow: hidden;
-                background:
+                background-image:
                     radial-gradient(
                         circle at ${gradientPosition},
                         ${thisTheme.gradientColor}25,
@@ -1397,21 +1402,15 @@ const WrapperLine = styled.div `
     width: fit-content;
     text-align: center;
     gap: 10px;
-
-    ${({ theme, moleculeVariant }) => {
-    var _a, _b;
-    const thisTheme = ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomHeading) || {};
-    return css `
-            margin: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.margin};
-        `;
-}}
 `;
 const AtomIcon$2 = styled(Icon).attrs(({ theme, moleculeVariant }) => {
-    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, _q;
     return ({
         variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomIcon) === null || _c === void 0 ? void 0 : _c.variant,
         fill: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.atomIcon) === null || _f === void 0 ? void 0 : _f.fill,
-        stroke: (_j = (_h = (_g = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _g === void 0 ? void 0 : _g[moleculeVariant]) === null || _h === void 0 ? void 0 : _h.atomIcon) === null || _j === void 0 ? void 0 : _j.stroke
+        stroke: (_j = (_h = (_g = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _g === void 0 ? void 0 : _g[moleculeVariant]) === null || _h === void 0 ? void 0 : _h.atomIcon) === null || _j === void 0 ? void 0 : _j.stroke,
+        hoverFill: (_m = (_l = (_k = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _k === void 0 ? void 0 : _k[moleculeVariant]) === null || _l === void 0 ? void 0 : _l.atomIcon) === null || _m === void 0 ? void 0 : _m.hoverFill,
+        hoverStroke: (_q = (_p = (_o = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _o === void 0 ? void 0 : _o[moleculeVariant]) === null || _p === void 0 ? void 0 : _p.atomIcon) === null || _q === void 0 ? void 0 : _q.hoverStroke
     });
 }) `
     min-width: fit-content;
@@ -1428,26 +1427,11 @@ const AtomText$2 = styled(Text).attrs(({ theme, moleculeVariant }) => {
     return ({
         variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomText) === null || _c === void 0 ? void 0 : _c.variant
     });
-}) `
-    ${({ theme, moleculeVariant }) => {
-    var _a, _b;
-    const thisTheme = ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomText) || {};
-    return css `
-            margin: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.margin};
-        `;
-}}
-`;
-const BackgroundSvg = styled(Icon) `
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    width: 100%;
-    height: 100%;
-`;
+}) ``;
 
-const CardSimpleRender = ({ moleculeVariant = "primary", icon, backgroundSvg, title, description, gradientPosition, children, onClick }) => {
+const CardSimpleRender = ({ moleculeVariant = "primary", icon, 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 }, { children: [(icon || title || description) && (jsxs("div", { children: [(icon || title) && (jsxs(WrapperLine, { 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 `