@manamerge/mana-atomic-ui 1.0.241 → 1.0.243

package/dist/index.js

@@ -273,7 +273,7 @@ const Icon = (_a) => {
 
 const StyledLink$2 = styled.a `
     ${({ variant, theme, underline, hoverUnderline }) => {
-    var _a, _b, _c, _d;
+    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 === null || linkStyles === void 0 ? void 0 : linkStyles.fontSize};
@@ -293,10 +293,7 @@ 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;
@@ -505,19 +502,35 @@ 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%;
-    ${({ theme, moleculeVariant, imageURLBackground, withOverlay }) => {
+    overflow: hidden;
+    background-color: #000;
+    ${({ theme, moleculeVariant, 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"};
@@ -543,6 +556,7 @@ const WrapperBackground = styled.div `
                     opacity: 1;
                     transition: opacity 3s ease;
                     pointer-events: none;
+                    z-index: 1;
                 }
                 &:hover::before {
                     opacity: 0;
@@ -552,6 +566,8 @@ const WrapperBackground = styled.div `
 }};
 `;
 const WrapperHeader = styled.div `
+    position: relative;
+    z-index: 2;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -711,8 +727,10 @@ 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 (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 }))] })))] })] })) })));
+    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 }))] })))] })] }))] })));
 };
 
 const NavBar = styled.nav `
@@ -777,6 +795,7 @@ const NavLinks = styled.div `
     text-align: right;
     align-items: flex-end;
     display: flex;
+
     width: 100%;
 
     overflow: hidden;
@@ -797,13 +816,11 @@ const NavLinks = styled.div `
     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: 10px 10px 10px 0;
             ${largeMobileUp} {
                 max-height: none;
                 opacity: 1;
                 transform: none;
                 margin: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.margin};
-                padding: 10px;
                 display: flex;
                 flex-direction: row;
                 gap: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.gap};