@manamerge/mana-atomic-ui 0.0.68 → 0.0.70

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import React, { ReactNode, FunctionComponent, SVGProps, AnchorHTMLAttributes, El
 
 interface ButtonTypes {
     disabled?: boolean;
-    className?: string;
+    variant?: string;
     image?: string | null;
     background?: string;
     alt?: string;
@@ -54,8 +54,8 @@ interface ISizes {
     big?: string | number;
 }
 interface HeadingTypes {
+    variant?: string;
     children: ReactNode;
-    className: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
     color?: string;
     margin?: ISizes;
     fontSize?: ISizes;
@@ -72,24 +72,13 @@ interface IconTypes {
     stroke?: string;
     hoverColor?: string;
     hoverStroke?: string;
+    onClick?: () => void;
+    onKeyDown?: (event: React.KeyboardEvent<SVGSVGElement>) => void;
+    tabIndex?: number;
+    role?: string;
 }
 declare const Icon: React.FC<IconTypes>;
 
-interface Route {
-    order: number;
-    type: "internal" | "external";
-    url?: string;
-    slug?: string;
-    label: string;
-    blank?: boolean;
-}
-interface FooterTypes {
-    children?: string;
-    svg?: FunctionComponent<SVGProps<SVGSVGElement>>;
-    routes: Route[];
-}
-declare const Footer: React.FC<FooterTypes>;
-
 interface LinkTypes extends AnchorHTMLAttributes<HTMLAnchorElement> {
     to?: string;
     color?: string;
@@ -104,4 +93,44 @@ interface LinkTypes extends AnchorHTMLAttributes<HTMLAnchorElement> {
 }
 declare const Link: React.FC<LinkTypes>;
 
-export { Button, Footer, Heading, Icon, Link, LinkTypes, Text };
+interface HeaderTypes {
+    iconTop?: FunctionComponent<SVGProps<SVGSVGElement>>;
+    iconDot?: FunctionComponent<SVGProps<SVGSVGElement>>;
+    iconLeft?: FunctionComponent<SVGProps<SVGSVGElement>>;
+    iconRight?: FunctionComponent<SVGProps<SVGSVGElement>>;
+    textBanner?: string;
+    headingTitle?: string;
+    textTitle?: string[];
+    buttonLeftText?: string;
+    buttonLeftClick?: React.MouseEventHandler<HTMLElement>;
+    buttonRightText?: string;
+    buttonRightClick?: React.MouseEventHandler<HTMLElement>;
+}
+declare const Header: React.FC<HeaderTypes>;
+
+interface NavigationTypes {
+    iconBurger: FunctionComponent<SVGProps<SVGSVGElement>>;
+    tabs: {
+        label: string;
+        to: string;
+    }[];
+    onTabClick: (label: string) => void;
+}
+declare const Navigation: React.FC<NavigationTypes>;
+
+interface RouteTypes {
+    order: number;
+    type: "internal" | "external";
+    url?: string;
+    slug?: string;
+    label: string;
+    blank?: boolean;
+}
+interface FooterTypes {
+    children?: string;
+    svg?: FunctionComponent<SVGProps<SVGSVGElement>>;
+    routes: RouteTypes[];
+}
+declare const Footer: React.FC<FooterTypes>;
+
+export { Button, Footer, Header, Heading, Icon, Link, Navigation, Text };

package/dist/index.js

@@ -1,7 +1,7 @@
-import React, { useMemo } from 'react';
+import React, { useState, useMemo } from 'react';
 import classNames from 'classnames';
 import styled, { css } from 'styled-components';
-import { Link as Link$1 } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -40,8 +40,8 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 const ButtonStyle = styled.button `
     ${(_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-    var { className, theme, disabled } = _a, props = __rest(_a, ["className", "theme", "disabled"]);
-    const buttonStyles = (theme === null || theme === void 0 ? void 0 : theme.button[className]) || {};
+    var { variant, theme, disabled } = _a, props = __rest(_a, ["variant", "theme", "disabled"]);
+    const buttonStyles = (theme === null || theme === void 0 ? void 0 : theme.button[variant]) || {};
     return css `
             /* Default State */
             background: ${disabled
@@ -145,16 +145,17 @@ const ImgStyle = styled.svg `
     height: 1em;
 `;
 
-const Button = ({ className = "", disabled = false, image, opacity = "0", background, alt, children, onClick, type = "submit", color, altColor, frame, border, text, fill, effects, padding, flexbox, cursor, margin, display, radius, fontWeight, letterSpacing, shadow, transition, width, height, gap, align }) => {
+const Button = (_a) => {
+    var { variant, disabled = false, image, opacity = "0", background, alt, children, onClick, type = "submit", color, altColor, frame, border, text, fill, effects, padding, flexbox, cursor, margin, display, radius, fontWeight, letterSpacing, shadow, transition, width, height, gap, align } = _a, props = __rest(_a, ["variant", "disabled", "image", "opacity", "background", "alt", "children", "onClick", "type", "color", "altColor", "frame", "border", "text", "fill", "effects", "padding", "flexbox", "cursor", "margin", "display", "radius", "fontWeight", "letterSpacing", "shadow", "transition", "width", "height", "gap", "align"]);
     // Log a warning if both `children` and `alt` are missing for accessibility
     if (!children && !alt) {
         console.error(`Provide either "children" or "alt" property to the Button.`);
     }
-    return (React.createElement(ButtonStyle, { disabled: disabled, className: classNames("Button", className), type: type, "aria-label": alt || "", background: background, color: color, opacity: opacity, altColor: altColor, frame: frame, border: border, text: text, fill: fill, effects: effects, padding: padding, flexbox: flexbox, cursor: cursor, margin: margin, display: display, radius: radius, fontWeight: fontWeight, letterSpacing: letterSpacing, shadow: shadow, transition: transition, width: width, height: height, gap: gap, align: align, onClick: (e) => {
+    return (React.createElement(ButtonStyle, Object.assign({ disabled: disabled, className: classNames("Button", variant), variant: "Button-" + variant, type: type, "aria-label": alt || "", background: background, color: color, opacity: opacity, altColor: altColor, frame: frame, border: border, text: text, fill: fill, effects: effects, padding: padding, flexbox: flexbox, cursor: cursor, margin: margin, display: display, radius: radius, fontWeight: fontWeight, letterSpacing: letterSpacing, shadow: shadow, transition: transition, width: width, height: height, gap: gap, align: align, onClick: (e) => {
             if (!disabled && onClick) {
                 onClick(e);
             }
-        } },
+        } }, props),
         image && (React.createElement(ImgStyle, { viewBox: "0 0 100 100" },
             React.createElement("defs", null,
                 React.createElement("mask", { id: `${image}-mask` },
@@ -206,10 +207,10 @@ const Text = (_a) => {
 };
 
 const HeadingContainer = styled.h1 `
-    ${({ className, theme, color, margin, fontSize, fontWeight, lineHeight }) => {
+    ${({ variant = "h1", theme, margin, fontSize, fontWeight, lineHeight, color }) => {
     const { media, heading } = theme;
     const { tinyMobileUp, largeMobileUp, superLargeDesktopUp } = media;
-    const headingStyles = (heading === null || heading === void 0 ? void 0 : heading[className]) || {};
+    const headingStyles = (heading === null || heading === void 0 ? void 0 : heading[variant]) || {};
     const { mobile, tablet, desktop } = headingStyles;
     return css `
             ${tinyMobileUp} {
@@ -237,7 +238,10 @@ const HeadingContainer = styled.h1 `
 }}
 `;
 
-const Heading = ({ className, children, margin, color, fontSize, lineHeight, fontWeight }) => (React.createElement(HeadingContainer, { className: classNames("Heading", className), as: className, margin: margin, color: color, fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight }, children));
+const Heading = (_a) => {
+    var { variant, children, margin, color, fontSize, lineHeight, fontWeight } = _a, props = __rest(_a, ["variant", "children", "margin", "color", "fontSize", "lineHeight", "fontWeight"]);
+    return (React.createElement(HeadingContainer, Object.assign({ className: classNames("Heading-", variant), variant: "Heading-" + variant, as: variant, margin: margin, color: color, fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight }, props), children));
+};
 
 const StyledSvg = styled.svg `
     ${(_a) => {
@@ -248,6 +252,7 @@ const StyledSvg = styled.svg `
             width: ${props.size || (iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.size) || "auto"};
             height: ${props.size || (iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.size) || "auto"};
             fill: ${props.color || (iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.color)};
+            color: ${props.color || (iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.color)};
             stroke: ${props.stroke || (iconStyles === null || iconStyles === void 0 ? void 0 : iconStyles.stroke)};
             &:hover {
                 /* opacity: 0.8; */
@@ -258,15 +263,16 @@ const StyledSvg = styled.svg `
 }}
 `;
 
-const Icon = ({ variant, svg: SvgIcon, color, size, stroke, hoverColor, hoverStroke }) => {
+const Icon = (_a) => {
+    var { variant, svg: SvgIcon, color, size, stroke, hoverColor, hoverStroke, onClick, onKeyDown, tabIndex, role } = _a, props = __rest(_a, ["variant", "svg", "color", "size", "stroke", "hoverColor", "hoverStroke", "onClick", "onKeyDown", "tabIndex", "role"]);
     if (!SvgIcon) {
         console.error("No SVG provided to the Icon component.");
         return null;
     }
-    return (React.createElement(StyledSvg, { className: classNames("Icon-" + variant), variant: "Icon-" + variant, as: SvgIcon, size: size, color: color, stroke: stroke, hoverColor: hoverColor, hoverStroke: hoverStroke }));
+    return (React.createElement(StyledSvg, Object.assign({ className: classNames("Icon-" + variant), variant: "Icon-" + variant, as: SvgIcon, size: size, color: color, stroke: stroke, hoverColor: hoverColor, hoverStroke: hoverStroke, onClick: onClick, onKeyDown: onKeyDown, tabIndex: tabIndex, role: role }, props)));
 };
 
-const StyledLink$1 = styled.a `
+const StyledLink$2 = styled.a `
     ${({ variant = "regular", theme, underline, hoverUnderline, color, hoverColor, fontSize, lineHeight, fontWeight }) => {
     var _a, _b;
     const linkStyles = ((_a = theme === null || theme === void 0 ? void 0 : theme.link) === null || _a === void 0 ? void 0 : _a[variant]) || {};
@@ -309,7 +315,7 @@ const Link = (_a) => {
         console.warn("A Link with an internal href should use the `to` prop instead for client-side routing.");
     }
     // Determine what component to render
-    const Component = to ? Link$1 : as || "a";
+    const Component = to ? NavLink : as || "a";
     const componentProps = to
         ? { to } // Use react-router-dom's `to` prop
         : {
@@ -317,7 +323,294 @@ const Link = (_a) => {
             target,
             rel: target === "_blank" ? "noopener noreferrer" : undefined
         };
-    return (React.createElement(StyledLink$1, Object.assign({ className: classNames("Link-" + variant), variant: "Link-" + variant, as: Component, fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight }, componentProps, props), children));
+    return (React.createElement(StyledLink$2, Object.assign({ className: classNames("Link-" + variant), variant: "Link-" + variant, as: Component, fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight }, componentProps, props), children));
+};
+
+const WrapperHeader = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    text-align: center;
+    gap: 15px;
+
+    border-radius: 50%;
+    position: relative;
+
+    &::before {
+        content: "";
+        position: absolute;
+        top: -200px;
+        left: -200px;
+        right: -200px;
+        bottom: -200px;
+        border-radius: 50%;
+        ${({ theme }) => {
+    const atomTheme = (theme === null || theme === void 0 ? void 0 : theme.header) || {};
+    return css `
+                background: radial-gradient(
+                    circle,
+                    ${(atomTheme === null || atomTheme === void 0 ? void 0 : atomTheme.backgroundColor1) || "none"} 10%,
+                    ${(atomTheme === null || atomTheme === void 0 ? void 0 : atomTheme.backgroundColor2) || "none"} 30%,
+                    transparent 50%
+                );
+            `;
+}}
+
+        z-index: -1;
+    }
+
+    &::before {
+        animation: glow 3s infinite alternate ease-in-out;
+    }
+
+    @keyframes glow {
+        0% {
+            transform: scale(1);
+            opacity: 0.5;
+        }
+        100% {
+            transform: scale(1.5);
+            opacity: 1;
+        }
+    }
+`;
+const WrapperLineTop = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    border-radius: 45px;
+    padding-left: 8px;
+    padding-right: 8px;
+    ${({ theme }) => {
+    const atomTheme = (theme === null || theme === void 0 ? void 0 : theme.header) || {};
+    return css `
+            background-color: ${(atomTheme === null || atomTheme === void 0 ? void 0 : atomTheme.bannerColor) || "none"};
+        `;
+}}
+    gap: 5px;
+`;
+const AtomIconTop = styled(Icon).attrs(({ theme }) => {
+    var _a, _b;
+    return ({
+        variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a.atomIconTop) === null || _b === void 0 ? void 0 : _b.variant) || "large"
+    });
+}) `
+    ${({ theme }) => {
+    var _a, _b, _c;
+    const atomTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a.atomIconTop) || {};
+    return css `
+            stroke: ${(atomTheme === null || atomTheme === void 0 ? void 0 : atomTheme.stroke) || "none"};
+            fill: ${(atomTheme === null || atomTheme === void 0 ? void 0 : atomTheme.fill) || "none"};
+            &:hover {
+                stroke: ${((_b = atomTheme === null || atomTheme === void 0 ? void 0 : atomTheme.hover) === null || _b === void 0 ? void 0 : _b.stroke) || "gold"};
+                fill: ${((_c = atomTheme === null || atomTheme === void 0 ? void 0 : atomTheme.hover) === null || _c === void 0 ? void 0 : _c.fill) || "gold"};
+            }
+        `;
+}}
+`;
+const AtomIconDot = styled(Icon).attrs(({ theme }) => {
+    var _a, _b, _c, _d;
+    return ({
+        variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a.atomIconDot) === null || _b === void 0 ? void 0 : _b.variant) || "small",
+        size: ((_d = (_c = theme === null || theme === void 0 ? void 0 : theme.header) === null || _c === void 0 ? void 0 : _c.atomIconDot) === null || _d === void 0 ? void 0 : _d.size) || "10px"
+    });
+}) `
+    ${({ theme }) => {
+    var _a, _b;
+    const atomTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a.atomIconDot) || {};
+    return css `
+            fill: ${(atomTheme === null || atomTheme === void 0 ? void 0 : atomTheme.fill) || "none"};
+            stroke: ${(atomTheme === null || atomTheme === void 0 ? void 0 : atomTheme.stroke) || "none"};
+            &:hover {
+                stroke: ${((_b = atomTheme === null || atomTheme === void 0 ? void 0 : atomTheme.hover) === null || _b === void 0 ? void 0 : _b.stroke) || "none"};
+            }
+        `;
+}}
+`;
+const AtomHeading = styled(Heading).attrs(({ theme }) => {
+    var _a, _b;
+    return ({
+        variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a.atomHeading) === null || _b === void 0 ? void 0 : _b.variant) || "h1"
+    });
+}) ``;
+const AtomTextTitle = styled(Text).attrs(({ theme }) => {
+    var _a, _b;
+    return ({
+        variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a.atomTextTitle) === null || _b === void 0 ? void 0 : _b.variant) || "medium"
+    });
+}) ``;
+const WrapperLineBottom = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    gap: 20px;
+`;
+const AtomButtonLeft = styled(Button).attrs(({ theme }) => {
+    var _a, _b;
+    return ({
+        variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a.atomButtonLeft) === null || _b === void 0 ? void 0 : _b.variant) || "primary"
+    });
+}) ``;
+const AtomButtonRight = styled(Button).attrs(({ theme }) => {
+    var _a, _b;
+    return ({
+        variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a.atomButtonRight) === null || _b === void 0 ? void 0 : _b.variant) || "secondary"
+    });
+}) ``;
+const AtomTextLeft = styled(Text).attrs(({ theme }) => {
+    var _a, _b;
+    return ({
+        variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a.atomTextLeft) === null || _b === void 0 ? void 0 : _b.variant) || "light"
+    });
+}) ``;
+const AtomTextRight = styled(Text).attrs(({ theme }) => {
+    var _a, _b;
+    return ({
+        variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a.atomTextRight) === null || _b === void 0 ? void 0 : _b.variant) || "light"
+    });
+}) ``;
+const AtomIconLeft = styled(Icon).attrs(({ theme }) => {
+    var _a, _b;
+    return ({
+        variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a.atomIconLeft) === null || _b === void 0 ? void 0 : _b.variant) || "small"
+    });
+}) ``;
+const AtomIconRight = styled(Icon).attrs(({ theme }) => {
+    var _a, _b;
+    return ({
+        variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.header) === null || _a === void 0 ? void 0 : _a.atomIconRight) === null || _b === void 0 ? void 0 : _b.variant) || "small"
+    });
+}) ``;
+
+const Header = ({ iconTop, iconDot, iconLeft, iconRight, textBanner, headingTitle, textTitle, buttonLeftText, buttonLeftClick, buttonRightText, buttonRightClick }) => {
+    return (React.createElement(WrapperHeader, null,
+        React.createElement("div", null,
+            iconTop && React.createElement(AtomIconTop, { svg: iconTop }),
+            React.createElement(WrapperLineTop, null,
+                iconDot && React.createElement(AtomIconDot, { svg: iconDot }),
+                React.createElement(AtomTextTitle, null, textBanner))),
+        React.createElement(AtomHeading, null, headingTitle),
+        React.createElement("div", null, textTitle &&
+            textTitle.map((text, i) => (React.createElement(AtomTextTitle, { key: i }, text)))),
+        React.createElement(WrapperLineBottom, null,
+            React.createElement(AtomButtonLeft, { onClick: buttonLeftClick },
+                iconLeft && React.createElement(AtomIconLeft, { svg: iconLeft }),
+                React.createElement(AtomTextLeft, null, buttonLeftText)),
+            React.createElement(AtomButtonRight, { onClick: buttonRightClick },
+                React.createElement(AtomTextRight, null, buttonRightText),
+                iconRight && React.createElement(AtomIconRight, { svg: iconRight })))));
+};
+
+const NavBar = styled.nav `
+    ${({ theme }) => {
+    const navigationTheme = (theme === null || theme === void 0 ? void 0 : theme.navigation) || {};
+    return css `
+            background: ${navigationTheme.background || "#333"};
+        `;
+}}
+
+    padding: 1rem;
+`;
+const BurgerWrapper = styled.div `
+    flex-direction: column;
+    align-items: flex-end;
+    display: flex;
+    padding: 3px;
+    ${({ theme }) => theme.media.largeMobileUp} {
+        display: none;
+    }
+`;
+const BurgerIcon = styled(Icon).attrs(({ theme }) => {
+    var _a, _b;
+    return ({
+        variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.navigation) === null || _a === void 0 ? void 0 : _a.atomIcon) === null || _b === void 0 ? void 0 : _b.variant) || "medium"
+    });
+}) `
+    ${({ theme }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const atomLinkTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.navigation) === null || _a === void 0 ? void 0 : _a.atomIcon) || {};
+    return css `
+            cursor: pointer;
+            color: ${(atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.color) || "#1a3"};
+            &:focus {
+                color: ${((_b = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.focus) === null || _b === void 0 ? void 0 : _b.color) || "gold"};
+                outline: ${((_c = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.focus) === null || _c === void 0 ? void 0 : _c.outline) || "none"};
+                outline-offset: ${((_d = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.focus) === null || _d === void 0 ? void 0 : _d.outlineOffset) ||
+        "none"};
+                box-shadow: ${((_e = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.focus) === null || _e === void 0 ? void 0 : _e.boxShadow) || "none"};
+            }
+            &:hover {
+                color: ${((_f = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.hover) === null || _f === void 0 ? void 0 : _f.color) || "purple"};
+                transition: ${((_g = atomLinkTheme === null || atomLinkTheme === void 0 ? void 0 : atomLinkTheme.hover) === null || _g === void 0 ? void 0 : _g.color) || "none"};
+            }
+        `;
+}}
+`;
+const NavLinks = styled.div `
+    flex-direction: column;
+    text-align: right;
+    display: ${({ isOpen }) => (isOpen ? "flex" : "none")};
+    width: 100%;
+    ${({ theme }) => theme.media.largeMobileUp} {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+    }
+`;
+const StyledLink$1 = styled(Link).attrs(({ theme }) => {
+    var _a, _b;
+    return ({
+        variant: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.navigation) === null || _a === void 0 ? void 0 : _a.atomLink) === null || _b === void 0 ? void 0 : _b.variant) || "bold"
+    });
+}) `
+    ${({ theme, currentPath }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const linkTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.navigation) === null || _a === void 0 ? void 0 : _a.atomLink) || {};
+    return css `
+            color: ${currentPath
+        ? ((_b = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.currentPath) === null || _b === void 0 ? void 0 : _b.color) || "#1ff"
+        : (linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.color) || "#1a3"};
+            font-weight: ${currentPath
+        ? ((_c = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.currentPath) === null || _c === void 0 ? void 0 : _c.fontWeight) || "900"
+        : (linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.fontWeight) || "700"};
+            &:focus {
+                color: ${((_d = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _d === void 0 ? void 0 : _d.color) || "gold"};
+                box-shadow: ${((_e = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _e === void 0 ? void 0 : _e.boxShadow) || "none"};
+                transform: ${((_f = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _f === void 0 ? void 0 : _f.transform) || "none"};
+            }
+            &:hover {
+                color: ${((_g = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.hover) === null || _g === void 0 ? void 0 : _g.color) || "purple"};
+                transition: ${((_h = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.hover) === null || _h === void 0 ? void 0 : _h.transition) || "none"};
+            }
+        `;
+}};
+`;
+
+const Navigation = ({ iconBurger, tabs, onTabClick }) => {
+    const location = useLocation();
+    const currentPath = location.pathname.slice(1);
+    const [isOpen, setIsOpen] = useState(false);
+    const handleToggle = () => {
+        setIsOpen(!isOpen);
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+            handleToggle();
+        }
+    };
+    return (React.createElement(NavBar, null,
+        React.createElement(BurgerWrapper, null,
+            React.createElement(BurgerIcon, { onClick: handleToggle, onKeyDown: handleKeyDown, tabIndex: 0, role: "button", "aria-pressed": isOpen, svg: iconBurger })),
+        React.createElement(NavLinks, { isOpen: isOpen }, tabs.length > 0
+            ? tabs.map((tab) => (React.createElement(StyledLink$1, { key: tab.label, to: tab.to, currentPath: tab.label === currentPath, onClick: () => {
+                    onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(tab.label);
+                    setIsOpen(false);
+                } }, tab.label)))
+            : "no tabs available")));
 };
 
 // Wrapper for the footer
@@ -434,5 +727,5 @@ const Footer = ({ children, svg, routes }) => {
         React.createElement(FooterNav, null, sortedRoutes.map(renderRouteLink))));
 };
 
-export { Button, Footer, Heading, Icon, Link, Text };
+export { Button, Footer, Header, Heading, Icon, Link, Navigation, Text };
 //# sourceMappingURL=index.js.map