@manamerge/mana-atomic-ui 1.0.243 → 1.0.245

package/dist/index.js

@@ -273,7 +273,7 @@ const Icon = (_a) => {
 
 const StyledLink$2 = styled.a `
     ${({ variant, theme, underline, hoverUnderline }) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     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 === null || linkStyles === void 0 ? void 0 : linkStyles.fontSize};
@@ -293,7 +293,10 @@ const StyledLink$2 = styled.a `
         : "underline"};
                 color: ${(_b = linkStyles === null || linkStyles === void 0 ? void 0 : linkStyles.hover) === null || _b === void 0 ? void 0 : _b.color};
             }
-
+            &:focus-visible {
+                outline: ${(_c = linkStyles === null || linkStyles === void 0 ? void 0 : linkStyles.focusVisible) === null || _c === void 0 ? void 0 : _c.outline};
+                outline-offset: ${(_d = linkStyles === null || linkStyles === void 0 ? void 0 : linkStyles.focusVisible) === null || _d === void 0 ? void 0 : _d.outlineOffset};
+            }
             &:disabled {
                 pointer-events: none;
                 color: gray;
@@ -502,35 +505,19 @@ const CDNImage = ({ src, alt = "", fetchPriority = "auto", decoding = "async", b
     return (jsxs(ImageWrapper, Object.assign({ "$aspectRatio": `${width} / ${height}` }, { children: [jsx(BlurCanvas, { ref: canvasRef, width: blurCanvasResolution, height: blurCanvasResolution, "$loaded": loaded, "aria-hidden": "true" }), jsx(StyledImage, { fetchPriority: fetchPriority, decoding: decoding, src: imageUrl, alt: alt, srcSet: srcSet || srcSetValue, sizes: sizes || "(max-width: 1200px) 100vw, 1200px", loading: loading, onLoad: () => setLoaded(true), "$loaded": loaded })] })));
 };
 
-const BackgroundImage = styled.img `
-    position: absolute;
-    inset: 0;
-
-    width: 100%;
-    height: 100%;
-
-    object-fit: cover;
-    object-position: center;
-
-    z-index: 0;
-
-    pointer-events: none;
-
-    user-select: none;
-
-    -webkit-user-drag: none;
-`;
 const WrapperBackground = styled.div `
     display: flex;
     position: relative;
     align-items: center;
     width: 100%;
-    overflow: hidden;
-    background-color: #000;
-    ${({ theme, moleculeVariant, withOverlay }) => {
+    ${({ theme, moleculeVariant, imageURLBackground, withOverlay }) => {
     var _a, _b, _c, _d, _e;
     const thisTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) || {};
     return css `
+            background-image: url(${imageURLBackground});
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-position: center;
             justify-content: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.justifyContent) || "center"};
             height: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.height) || "unset"};
             background-color: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.backgroundColor) || "unset"};
@@ -556,7 +543,6 @@ const WrapperBackground = styled.div `
                     opacity: 1;
                     transition: opacity 3s ease;
                     pointer-events: none;
-                    z-index: 1;
                 }
                 &:hover::before {
                     opacity: 0;
@@ -566,8 +552,6 @@ const WrapperBackground = styled.div `
 }};
 `;
 const WrapperHeader = styled.div `
-    position: relative;
-    z-index: 2;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -727,10 +711,8 @@ const WrapperTextTitle = styled.div `
 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 (jsxs(WrapperBackground, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant, 
-        // imageURLBackground={imageURLBackground}
-        withOverlay: withOverlay }, props, { children: [jsx(BackgroundImage, { src: imageURLBackground, alt: "", loading: "eager", fetchPriority: "high", decoding: "async" }), 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 }))] })))] })] }))] })));
+    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 }))] })))] })] })) })));
 };
 
 const NavBar = styled.nav `
@@ -795,7 +777,6 @@ const NavLinks = styled.div `
     text-align: right;
     align-items: flex-end;
     display: flex;
-
     width: 100%;
 
     overflow: hidden;
@@ -811,16 +792,18 @@ const NavLinks = styled.div `
     margin-top: ${({ isOpen }) => (isOpen ? "20px" : 0)};
 
     ${({ theme, moleculeVariant }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const thisTheme = ((_d = (_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.navLinks) === null || _c === void 0 ? void 0 : _c.responsive) === null || _d === void 0 ? void 0 : _d.largeMobileUp) || {};
     const { largeMobileUp } = theme.media;
     return css `
             gap: ${(_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.navigation) === null || _e === void 0 ? void 0 : _e[moleculeVariant]) === null || _f === void 0 ? void 0 : _f.navLinks) === null || _g === void 0 ? void 0 : _g.mobileGap};
+            padding: ${(_k = (_j = (_h = theme === null || theme === void 0 ? void 0 : theme.navigation) === null || _h === void 0 ? void 0 : _h[moleculeVariant]) === null || _j === void 0 ? void 0 : _j.navLinks) === null || _k === void 0 ? void 0 : _k.padding};
             ${largeMobileUp} {
                 max-height: none;
                 opacity: 1;
                 transform: none;
                 margin: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.margin};
+                padding: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.padding};
                 display: flex;
                 flex-direction: row;
                 gap: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.gap};