@manamerge/mana-atomic-ui 1.0.169 → 1.0.170

package/dist/index.js

@@ -526,7 +526,7 @@ const WrapperBackground = styled.div `
                     );
 
                     opacity: 1;
-                    transition: opacity 0.7s ease;
+                    transition: opacity 3s ease;
                     pointer-events: none;
                 }
                 &:hover::before {
@@ -702,10 +702,6 @@ const Header = ({ moleculeVariant = "primary", iconTop, iconDot, buttonLeftIcon,
 const NavBar = styled.nav `
     display: flex;
     align-items: flex-start;
-    position: absolute;
-    width: auto;
-    right: 0;
-    left: 0;
 
     ${({ theme, moleculeVariant }) => {
     var _a;
@@ -716,11 +712,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};
-            height: ${navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.height};
-            padding: ${navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.padding};
+            background: ${(navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.background) || "#333"};
         `;
 }}
+
+    padding: 1rem;
 `;
 const BurgerWrapper = styled.div `
     flex-direction: column;
@@ -783,46 +779,24 @@ 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, _k, _l, _m, _o, _p;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     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
-        ? ((_c = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.currentPath) === null || _c === void 0 ? void 0 : _c.fontWeight) || "900"
+        ? ((_d = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.currentPath) === null || _d === void 0 ? void 0 : _d.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: ${(_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"};
+                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"};
             }
             &:hover {
-                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;
+                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"};
             }
         `;
 }};