@nulogy/components 14.8.2 → 15.0.1

package/dist/src/Navigation/components/UserMenu/UserMenu.js

@@ -0,0 +1,16 @@
+import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
+import styled from "styled-components";
+import { addStyledProps } from "../../../StyledProps";
+import { Header } from "./parts/Header";
+import Item from "./parts/Item";
+import MobileItem from "./parts/MobileItem";
+const Container = styled(RadixNavigationMenu.Sub).attrs({
+    orientation: "vertical",
+})(addStyledProps);
+const UserMenu = {
+    Header,
+    Container,
+    Item,
+    MobileItem,
+};
+export default UserMenu;

package/dist/src/Navigation/components/UserMenu/parts/Header.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
-import { UserMenuInfo } from "../../../types";
-import { FlexProps } from "../../../../Flex/Flex";
-export interface HeaderProps extends UserMenuInfo {
-    containerProps?: FlexProps;
-}
-export declare const Header: ({ title, subtitle1, subtitle2, containerProps }: HeaderProps) => React.JSX.Element;
+import React from "react";
+import { UserMenuInfo } from "../../../types";
+import { FlexProps } from "../../../../Flex/Flex";
+export interface HeaderProps extends UserMenuInfo {
+    containerProps?: FlexProps;
+}
+export declare const Header: ({ title, subtitle1, subtitle2, containerProps }: HeaderProps) => React.JSX.Element;

package/dist/src/Navigation/components/UserMenu/parts/Header.js

@@ -0,0 +1,39 @@
+import React from "react";
+import styled from "styled-components";
+import { Text } from "../../../../Type";
+import { Flex } from "../../../../Flex";
+import BackgroundTriangles from "../../../../Decorations";
+const USER_MENU_HEADER_HEIGHT = "104px";
+const HeaderText = styled(Text).attrs({
+    color: "darkGrey",
+    fontSize: "small",
+    fontStyle: "normal",
+    lineHeight: "smallTextBase",
+    m: "none",
+})({});
+const HeaderWrapper = styled(Flex).attrs({
+    position: "relative",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "flex-start",
+    alignSelf: "stretch",
+    px: "x3",
+    py: "none",
+    bg: "whiteGrey",
+    borderTopLeftRadius: "large",
+    borderTopRightRadius: "large",
+    height: USER_MENU_HEADER_HEIGHT,
+    overflow: "hidden",
+})(({ theme }) => ({
+    "&:last-child": {
+        borderBottomLeftRadius: theme.radii.large,
+        borderBottomRightRadius: theme.radii.large,
+    },
+}));
+export const Header = ({ title, subtitle1, subtitle2, containerProps }) => {
+    return (React.createElement(HeaderWrapper, Object.assign({}, containerProps),
+        React.createElement(HeaderText, { fontWeight: "bold" }, title),
+        React.createElement(HeaderText, { fontWeight: "normal" }, subtitle1),
+        React.createElement(HeaderText, { fontWeight: "normal" }, subtitle2),
+        React.createElement(BackgroundTriangles, null)));
+};

package/dist/src/Navigation/components/UserMenu/parts/Item.d.ts

@@ -1,10 +1,10 @@
-import React from "react";
-import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
-import type { UserMenuItem as UserMenuItemType } from "../../../types";
-export interface UserMenuItemProps extends RadixNavigationMenu.NavigationMenuItemProps {
-    item: UserMenuItemType;
-}
-declare const Item: React.ForwardRefExoticComponent<UserMenuItemProps & {
-    level?: number;
-} & React.RefAttributes<HTMLLIElement>>;
-export default Item;
+import React from "react";
+import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
+import type { UserMenuItem as UserMenuItemType } from "../../../types";
+export interface UserMenuItemProps extends RadixNavigationMenu.NavigationMenuItemProps {
+    item: UserMenuItemType;
+}
+declare const Item: React.ForwardRefExoticComponent<UserMenuItemProps & {
+    level?: number;
+} & React.RefAttributes<HTMLLIElement>>;
+export default Item;

package/dist/src/Navigation/components/UserMenu/parts/Item.js

@@ -0,0 +1,23 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { RadixNavigationMenuItem } from "../../shared/components";
+import { UserMenuLink, UserMenuTrigger } from "./styled";
+const Item = React.forwardRef((_a, forwardedRef) => {
+    var { item, level = 0 } = _a, props = __rest(_a, ["item", "level"]);
+    return (React.createElement(RadixNavigationMenuItem, Object.assign({ ref: forwardedRef }, props),
+        item.type === "link" && (React.createElement(UserMenuLink, { asChild: true }, item.element ? (React.cloneElement(item.element, Object.assign(Object.assign({}, item.props), { children: item.label }))) : (React.createElement("a", Object.assign({}, item.props), item.label)))),
+        item.type === "button" && React.createElement(UserMenuTrigger, Object.assign({}, item.props), item.label),
+        item.type === "custom" && item.render({ level, withinMobileNav: false })));
+});
+Item.displayName = "Item";
+export default Item;

package/dist/src/Navigation/components/UserMenu/parts/MobileItem.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
-import { UserMenuItemProps } from "./Item";
-declare const MobileItem: React.ForwardRefExoticComponent<UserMenuItemProps & {
-    level?: number;
-} & React.RefAttributes<HTMLLIElement>>;
-export default MobileItem;
+import React from "react";
+import { UserMenuItemProps } from "./Item";
+declare const MobileItem: React.ForwardRefExoticComponent<UserMenuItemProps & {
+    level?: number;
+} & React.RefAttributes<HTMLLIElement>>;
+export default MobileItem;

package/dist/src/Navigation/components/UserMenu/parts/MobileItem.js

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { RadixNavigationMenuItem } from "../../shared/components";
+import { IndentedContainer } from "../../MobileNav/parts/styled";
+import { UserMenuLink, UserMenuTrigger } from "./styled";
+const MobileItem = React.forwardRef((_a, forwardedRef) => {
+    var { item, level = 0 } = _a, props = __rest(_a, ["item", "level"]);
+    const content = (React.createElement(React.Fragment, null,
+        item.type === "link" && (React.createElement(IndentedContainer, { level: level },
+            React.createElement(UserMenuLink, { asChild: true, "$isMobile": true }, item.element ? (React.cloneElement(item.element, Object.assign(Object.assign({}, item.props), { children: item.label }))) : (React.createElement("a", Object.assign({}, item.props), item.label))))),
+        item.type === "button" && (React.createElement(IndentedContainer, { level: level },
+            React.createElement(UserMenuTrigger, Object.assign({}, item.props, { "$isMobile": true }), item.label))),
+        item.type === "custom" && item.render({ level, withinMobileNav: true })));
+    return (React.createElement(RadixNavigationMenuItem, Object.assign({ ref: forwardedRef }, props), content));
+});
+MobileItem.displayName = "MobileItem";
+export default MobileItem;

package/dist/src/Navigation/components/UserMenu/parts/styled.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
-export declare const UserMenuLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<RadixNavigationMenu.NavigationMenuLinkProps & import("react").RefAttributes<HTMLAnchorElement>, {
-    $isMobile?: boolean;
-}>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuLinkProps & import("react").RefAttributes<HTMLAnchorElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const UserMenuTrigger: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<RadixNavigationMenu.NavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>, {
-    $isMobile?: boolean;
-}>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+/// <reference types="react" />
+import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
+export declare const UserMenuLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<RadixNavigationMenu.NavigationMenuLinkProps & import("react").RefAttributes<HTMLAnchorElement>, {
+    $isMobile?: boolean;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuLinkProps & import("react").RefAttributes<HTMLAnchorElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const UserMenuTrigger: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<RadixNavigationMenu.NavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>, {
+    $isMobile?: boolean;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;

package/dist/src/Navigation/components/UserMenu/parts/styled.js

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
+import { addStyledProps } from "../../../../StyledProps";
+const baseUserMenuItemStyles = (theme, isMobile) => (Object.assign(Object.assign({ width: "100%", color: theme.colors.darkGrey, fontSize: theme.fontSizes.small, fontWeight: theme.fontWeights.bold, lineHeight: theme.lineHeights.smallTextBase, paddingTop: theme.space.x1_5, paddingBottom: theme.space.x1_5, paddingLeft: theme.space.x2, paddingRight: theme.space.x2 }, (!isMobile && {
+    "&:hover, &:focus": {
+        backgroundColor: theme.colors.lightBlue,
+        color: theme.colors.darkBlue,
+        outline: "none",
+    },
+})), (isMobile && {
+    "&:hover": {
+    // No background or color change on hover for mobile
+    },
+    "&:focus": {
+        backgroundColor: "transparent",
+        color: theme.colors.darkBlue,
+        outline: "none",
+    },
+})));
+export const UserMenuLink = styled(RadixNavigationMenu.Link)(({ theme, $isMobile }) => (Object.assign(Object.assign({}, baseUserMenuItemStyles(theme, $isMobile)), { display: "block", textDecoration: "none" })), addStyledProps);
+export const UserMenuTrigger = styled(RadixNavigationMenu.Trigger)(({ theme, $isMobile }) => (Object.assign(Object.assign({}, baseUserMenuItemStyles(theme, $isMobile)), { background: "none", border: "none", userSelect: "none", display: "flex", justifyContent: "space-between", alignItems: "center", textAlign: "left" })), addStyledProps);

package/dist/src/Navigation/components/shared/NavigationLogo.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
-interface NavigationLogoProps {
-    maxWidth?: string;
-    maxHeight?: string;
-    children: React.ReactNode;
-}
-export declare const NavigationLogo: ({ children, maxWidth, maxHeight, ...props }: NavigationLogoProps) => React.JSX.Element;
-export {};
+import React from "react";
+interface NavigationLogoProps {
+    maxWidth?: string;
+    maxHeight?: string;
+    children: React.ReactNode;
+}
+export declare const NavigationLogo: ({ children, maxWidth, maxHeight, ...props }: NavigationLogoProps) => React.JSX.Element;
+export {};

package/dist/src/Navigation/components/shared/NavigationLogo.js

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import styled from "styled-components";
+const LogoContainer = styled.div(({ $maxWidth, $maxHeight }) => ({
+    display: "flex",
+    alignItems: "center",
+    maxWidth: $maxWidth !== null && $maxWidth !== void 0 ? $maxWidth : "184px",
+    maxHeight: $maxHeight !== null && $maxHeight !== void 0 ? $maxHeight : "36px",
+    "& > *": {
+        width: "100%",
+        objectFit: "contain",
+    },
+}));
+export const NavigationLogo = (_a) => {
+    var { children, maxWidth, maxHeight } = _a, props = __rest(_a, ["children", "maxWidth", "maxHeight"]);
+    return (React.createElement(LogoContainer, Object.assign({ "$maxWidth": maxWidth, "$maxHeight": maxHeight }, props), children));
+};

package/dist/src/Navigation/components/shared/NavigationLogoLink.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
-import type { NavigationMenuLinkProps } from "@radix-ui/react-navigation-menu";
-interface NavigationLogoLinkProps extends Omit<NavigationMenuLinkProps, "asChild"> {
-    renderAsFragment?: boolean;
-}
-export declare const NavigationLogoLink: ({ href, renderAsFragment, ...props }: NavigationLogoLinkProps) => React.JSX.Element;
-export {};
+import React from "react";
+import type { NavigationMenuLinkProps } from "@radix-ui/react-navigation-menu";
+interface NavigationLogoLinkProps extends Omit<NavigationMenuLinkProps, "asChild"> {
+    renderAsFragment?: boolean;
+}
+export declare const NavigationLogoLink: ({ href, renderAsFragment, ...props }: NavigationLogoLinkProps) => React.JSX.Element;
+export {};

package/dist/src/Navigation/components/shared/NavigationLogoLink.js

@@ -0,0 +1,23 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import styled from "styled-components";
+import { NavigationMenuLink as BaseNavigationMenuLink } from "./components";
+const NavigationMenuLink = styled(BaseNavigationMenuLink)(({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    padding: theme.space.x1,
+}));
+export const NavigationLogoLink = (_a) => {
+    var { href, renderAsFragment = false } = _a, props = __rest(_a, ["href", "renderAsFragment"]);
+    return React.createElement(NavigationMenuLink, Object.assign({ href: href, asChild: renderAsFragment }, props));
+};

package/dist/src/Navigation/components/shared/NavigationMenuContent.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
-import { StyledProps } from "../../../StyledProps";
-export interface NavigationMenuContentProps extends RadixNavigationMenu.NavigationMenuContentProps, StyledProps {
-}
-declare const NavigationMenuContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<RadixNavigationMenu.NavigationMenuContentProps & import("react").RefAttributes<HTMLDivElement>, RadixNavigationMenu.NavigationMenuContentProps & import("react").RefAttributes<HTMLDivElement>>, never>, NavigationMenuContentProps>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuContentProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
-export default NavigationMenuContent;
+/// <reference types="react" />
+import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
+import { StyledProps } from "../../../StyledProps";
+export interface NavigationMenuContentProps extends RadixNavigationMenu.NavigationMenuContentProps, StyledProps {
+}
+declare const NavigationMenuContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<RadixNavigationMenu.NavigationMenuContentProps & import("react").RefAttributes<HTMLDivElement>, RadixNavigationMenu.NavigationMenuContentProps & import("react").RefAttributes<HTMLDivElement>>, never>, NavigationMenuContentProps>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuContentProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export default NavigationMenuContent;

package/dist/src/Navigation/components/shared/NavigationMenuContent.js

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
+import { addStyledProps } from "../../../StyledProps";
+import { NAVIGATION_MENU_CONTENT_WIDTH_MAX_WIDTH_PX, NAVIGATION_MENU_HEIGHT_STYLED_UNITS } from "./constants";
+import { disableHoverEvents } from "./disableHoverEvents";
+const NavigationMenuContent = styled(RadixNavigationMenu.Content).attrs(disableHoverEvents)(({ theme }) => ({
+    position: "absolute",
+    top: `calc(100% + ${theme.space.x1})`,
+    maxHeight: `calc(100dvh - ${theme.space.x2} - ${theme.space[NAVIGATION_MENU_HEIGHT_STYLED_UNITS]})`,
+    overflowY: "auto",
+    display: "flex",
+    flexDirection: "column",
+    borderRadius: theme.radii.large,
+    background: theme.colors.white,
+    boxShadow: theme.shadows.large,
+    width: `calc(100vw - (${theme.space.x4}))`,
+    maxWidth: NAVIGATION_MENU_CONTENT_WIDTH_MAX_WIDTH_PX,
+    paddingTop: theme.space.x2,
+    paddingBottom: theme.space.x2,
+    paddingLeft: theme.space.none,
+    paddingRight: theme.space.none,
+}), addStyledProps);
+export default NavigationMenuContent;

package/dist/src/Navigation/components/shared/NavigationMenuItem.d.ts

@@ -1,12 +1,12 @@
-import React from "react";
-import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
-import type { MenuItem } from "../../types";
-export interface NavigationMenuItemProps extends RadixNavigationMenu.NavigationMenuItemProps {
-    item: MenuItem;
-    level?: number;
-}
-/**
- * A single Radix <NavigationMenu.Item> that can represent any MenuItem variant.
- */
-export declare const NavigationMenuItem: React.ForwardRefExoticComponent<NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>>;
-export declare const NavigationMenuSubList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<RadixNavigationMenu.NavigationMenuListProps & React.RefAttributes<HTMLUListElement>, never>> & string & Omit<React.ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuListProps & React.RefAttributes<HTMLUListElement>>, keyof React.Component<any, {}, any>>;
+import React from "react";
+import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
+import type { MenuItem } from "../../types";
+export interface NavigationMenuItemProps extends RadixNavigationMenu.NavigationMenuItemProps {
+    item: MenuItem;
+    level?: number;
+}
+/**
+ * A single Radix <NavigationMenu.Item> that can represent any MenuItem variant.
+ */
+export declare const NavigationMenuItem: React.ForwardRefExoticComponent<NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>>;
+export declare const NavigationMenuSubList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<RadixNavigationMenu.NavigationMenuListProps & React.RefAttributes<HTMLUListElement>, never>> & string & Omit<React.ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuListProps & React.RefAttributes<HTMLUListElement>>, keyof React.Component<any, {}, any>>;

package/dist/src/Navigation/components/shared/NavigationMenuItem.js

@@ -0,0 +1,76 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
+import styled from "styled-components";
+import { Text } from "../../../Type";
+import { Icon } from "../../../Icon";
+import { VerticalDivider } from "../../../VerticalDivider";
+import { Divider } from "../../../Divider";
+import { MiniTooltip } from "../../../MiniTooltip";
+import { MenuSubItem } from "../MenuSubItem/MenuSubItem";
+import { SubMenuContent } from "../MenuSubItem/parts/styled";
+import { CaretDown, NavigationMenuLink, NavigationMenuTrigger, RadixNavigationMenuItem } from "./components";
+/**
+ * A single Radix <NavigationMenu.Item> that can represent any MenuItem variant.
+ */
+export const NavigationMenuItem = React.forwardRef((_a, forwardedRef) => {
+    var _b;
+    var { item, level = 0 } = _a, props = __rest(_a, ["item", "level"]);
+    if (item.type === "separator") {
+        return (React.createElement(RadixNavigationMenuItem, Object.assign({ ref: forwardedRef }, props),
+            React.createElement(VerticalDivider, { mx: "x1" })));
+    }
+    /* ---------------------------------------------------------------------
+     * Handle "custom” items
+     * -------------------------------------------------------------------*/
+    if (item.type === "custom") {
+        return (React.createElement(RadixNavigationMenuItem, Object.assign({ ref: forwardedRef }, props), item.render({ withinSubMenu: level > 0, level, withinMobileNav: false })));
+    }
+    const hasIcon = "icon" in item;
+    const isLink = item.type === "link";
+    const hasSubMenu = item.type === "button" && !!item.items && item.items.length > 0;
+    const hasLabel = "label" in item && item.label;
+    const hasIconOnly = hasIcon && !hasLabel;
+    const hasTooltip = hasIconOnly && Boolean(item.tooltip);
+    const Content = (React.createElement(React.Fragment, null,
+        hasIcon && React.createElement(Icon, { icon: item.icon, size: "x3", "aria-hidden": true }),
+        "label" in item && item.label && (React.createElement(Text, { fontSize: "small", lineHeight: "smallTextCompressed" }, item.label)),
+        hasSubMenu && React.createElement(CaretDown, { "aria-hidden": true, size: "x2" })));
+    if (isLink) {
+        const Item = (React.createElement(RadixNavigationMenuItem, Object.assign({ ref: forwardedRef }, props),
+            React.createElement(NavigationMenuLink, { asChild: true, "aria-label": hasIconOnly && item.tooltip ? item.tooltip : item.label, borderRadius: hasIconOnly ? "rounded" : undefined, p: hasIcon ? "x1" : undefined }, item.element ? (React.cloneElement(item.element, Object.assign(Object.assign({}, item.props), { children: Content }))) : (React.createElement("a", Object.assign({}, item.props), Content)))));
+        return hasTooltip ? (React.createElement(MiniTooltip, { delayDuration: 0, sideOffset: 0, content: item.tooltip }, Item)) : (Item);
+    }
+    const Item = (React.createElement(RadixNavigationMenuItem, Object.assign({ ref: forwardedRef }, props),
+        React.createElement(NavigationMenuTrigger, { asChild: true, position: "relative", "aria-label": hasIconOnly && item.tooltip ? item.tooltip : hasLabel ? item.label : undefined, borderRadius: hasIconOnly ? "rounded" : undefined, p: hasIcon ? "x1" : undefined },
+            React.createElement(Button, Object.assign({}, item.props), Content)),
+        hasSubMenu && (React.createElement(SubMenuContent, null,
+            React.createElement(RadixNavigationMenu.Sub, { orientation: "vertical" },
+                React.createElement(NavigationMenuSubList, null, (_b = item.items) === null || _b === void 0 ? void 0 : _b.map((sub) => React.createElement(MenuSubItem, { key: sub.key, item: sub, level: level + 1 }))))))));
+    return hasTooltip ? (React.createElement(MiniTooltip, { delayDuration: 0, sideOffset: 0, content: item.tooltip }, Item)) : (Item);
+});
+NavigationMenuItem.displayName = "NavigationMenuItem";
+export const NavigationMenuSubList = styled(RadixNavigationMenu.List) `
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  & > ${Divider}:first-child {
+    display: none;
+  }
+`;
+const Button = React.forwardRef((_a, forwardedRef) => {
+    var { onPointerEnter: _, onPointerLeave: __, onPointerMove: ___ } = _a, props = __rest(_a, ["onPointerEnter", "onPointerLeave", "onPointerMove"]);
+    return React.createElement("button", Object.assign({}, props, { ref: forwardedRef }));
+});
+Button.displayName = "Button";

package/dist/src/Navigation/components/shared/components.d.ts

@@ -1,17 +1,17 @@
-/// <reference types="react" />
-import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
-import { IconProps } from "../../../Icon/Icon";
-import { StyledProps } from "../../../StyledProps";
-export declare const NavigationMenuRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<RadixNavigationMenu.NavigationMenuProps & import("react").RefAttributes<HTMLElement>, StyledProps>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuProps & import("react").RefAttributes<HTMLElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const NavigationMenuList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<RadixNavigationMenu.NavigationMenuListProps & import("react").RefAttributes<HTMLUListElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuListProps & import("react").RefAttributes<HTMLUListElement>>, keyof import("react").Component<any, {}, any>>;
-interface NavigationMenuTriggerProps extends RadixNavigationMenu.NavigationMenuTriggerProps, StyledProps {
-    disableMenuToggleOnHover?: boolean;
-}
-export declare const NavigationMenuTrigger: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<RadixNavigationMenu.NavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>, RadixNavigationMenu.NavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>, NavigationMenuTriggerProps>, never>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const NavigationMenuLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<RadixNavigationMenu.NavigationMenuLinkProps & import("react").RefAttributes<HTMLAnchorElement>, StyledProps>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuLinkProps & import("react").RefAttributes<HTMLAnchorElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const NavigationMenuIconLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<RadixNavigationMenu.NavigationMenuLinkProps & import("react").RefAttributes<HTMLAnchorElement>, keyof StyledProps> & StyledProps, never>> & string;
-export declare const NavigationMenuIconTrigger: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<RadixNavigationMenu.NavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>, RadixNavigationMenu.NavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>, NavigationMenuTriggerProps>, never>, never>> & string;
-export declare const CaretDown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<IconProps & import("react").RefAttributes<SVGSVGElement>, keyof IconProps> & IconProps, import("styled-components").FastOmit<IconProps & import("react").RefAttributes<SVGSVGElement>, keyof IconProps> & IconProps>, never>, Partial<IconProps>>> & string;
-export declare const CaretRight: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<IconProps & import("react").RefAttributes<SVGSVGElement>, keyof IconProps> & IconProps, import("styled-components").FastOmit<IconProps & import("react").RefAttributes<SVGSVGElement>, keyof IconProps> & IconProps>, never>, Partial<IconProps>>> & string;
-export declare const RadixNavigationMenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<RadixNavigationMenu.NavigationMenuItemProps & import("react").RefAttributes<HTMLLIElement>, StyledProps>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuItemProps & import("react").RefAttributes<HTMLLIElement>>, keyof import("react").Component<any, {}, any>>;
-export {};
+/// <reference types="react" />
+import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
+import { IconProps } from "../../../Icon/Icon";
+import { StyledProps } from "../../../StyledProps";
+export declare const NavigationMenuRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<RadixNavigationMenu.NavigationMenuProps & import("react").RefAttributes<HTMLElement>, StyledProps>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuProps & import("react").RefAttributes<HTMLElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const NavigationMenuList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<RadixNavigationMenu.NavigationMenuListProps & import("react").RefAttributes<HTMLUListElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuListProps & import("react").RefAttributes<HTMLUListElement>>, keyof import("react").Component<any, {}, any>>;
+interface NavigationMenuTriggerProps extends RadixNavigationMenu.NavigationMenuTriggerProps, StyledProps {
+    disableMenuToggleOnHover?: boolean;
+}
+export declare const NavigationMenuTrigger: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<RadixNavigationMenu.NavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>, RadixNavigationMenu.NavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>, NavigationMenuTriggerProps>, never>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const NavigationMenuLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<RadixNavigationMenu.NavigationMenuLinkProps & import("react").RefAttributes<HTMLAnchorElement>, StyledProps>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuLinkProps & import("react").RefAttributes<HTMLAnchorElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const NavigationMenuIconLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<RadixNavigationMenu.NavigationMenuLinkProps & import("react").RefAttributes<HTMLAnchorElement>, keyof StyledProps> & StyledProps, never>> & string;
+export declare const NavigationMenuIconTrigger: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<RadixNavigationMenu.NavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>, RadixNavigationMenu.NavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>, NavigationMenuTriggerProps>, never>, never>> & string;
+export declare const CaretDown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<IconProps & import("react").RefAttributes<SVGSVGElement>, keyof IconProps> & IconProps, import("styled-components").FastOmit<IconProps & import("react").RefAttributes<SVGSVGElement>, keyof IconProps> & IconProps>, never>, Partial<IconProps>>> & string;
+export declare const CaretRight: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<IconProps & import("react").RefAttributes<SVGSVGElement>, keyof IconProps> & IconProps, import("styled-components").FastOmit<IconProps & import("react").RefAttributes<SVGSVGElement>, keyof IconProps> & IconProps>, never>, Partial<IconProps>>> & string;
+export declare const RadixNavigationMenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<RadixNavigationMenu.NavigationMenuItemProps & import("react").RefAttributes<HTMLLIElement>, StyledProps>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuItemProps & import("react").RefAttributes<HTMLLIElement>>, keyof import("react").Component<any, {}, any>>;
+export {};

package/dist/src/Navigation/components/shared/components.js

@@ -0,0 +1,87 @@
+import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
+import styled from "styled-components";
+import { Icon } from "../../../Icon";
+import { addStyledProps } from "../../../StyledProps";
+import { NAVIGATION_MENU_HEIGHT_STYLED_UNITS } from "./constants";
+import { disableHoverEvents } from "./disableHoverEvents";
+function itemStyles(theme) {
+    return {
+        paddingLeft: theme.space.x2,
+        paddingRight: theme.space.x2,
+        paddingTop: theme.space.x1_5,
+        paddingBottom: theme.space.x1_5,
+        outline: "none",
+        userSelect: "none",
+        fontWeight: theme.fontWeights.medium,
+        fontSize: theme.fontSizes.small,
+        lineHeight: theme.lineHeights.smallTextCompressed,
+        borderRadius: theme.radii.large,
+        color: theme.colors.darkGrey,
+        transition: "background-color 250ms ease",
+        whiteSpace: "nowrap",
+    };
+}
+export const NavigationMenuRoot = styled(RadixNavigationMenu.Root)(({ theme }) => ({
+    height: theme.space[NAVIGATION_MENU_HEIGHT_STYLED_UNITS],
+    display: "flex",
+    width: "100%",
+    justifyContent: "space-between",
+    padding: "0px 16px",
+    backgroundColor: "white",
+    borderBottom: "1px solid #E4E7EB",
+    "& > div": {
+        display: "flex",
+    },
+}), addStyledProps);
+export const NavigationMenuList = styled(RadixNavigationMenu.List)(({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    padding: theme.space.none,
+    listStyle: "none",
+    gap: theme.space.x1,
+    margin: theme.space.none,
+}));
+export const NavigationMenuTrigger = styled(RadixNavigationMenu.Trigger).attrs(({ disableMenuToggleOnHover = true }) => {
+    if (disableMenuToggleOnHover) {
+        return Object.assign({}, disableHoverEvents);
+    }
+})(({ theme }) => (Object.assign(Object.assign({ all: "unset" }, itemStyles(theme)), { display: "flex", alignItems: "center", justifyContent: "space-between", gap: theme.space.half, "&:focus": { boxShadow: theme.shadows.focus }, "&:hover": { backgroundColor: theme.colors.lightBlue, color: theme.colors.darkBlue }, "&:disabled": {
+        cursor: "default",
+        "&:hover": {
+            backgroundColor: "transparent",
+            color: theme.colors.darkGrey,
+        },
+    } })), addStyledProps);
+export const NavigationMenuLink = styled(RadixNavigationMenu.Link)(({ theme }) => (Object.assign(Object.assign({}, itemStyles(theme)), { display: "flex", alignItems: "center", justifyContent: "space-between", gap: theme.space.half, textDecoration: "none", fontSize: theme.fontSizes.small, lineHeight: theme.lineHeights.smallTextCompressed, "&:focus": { boxShadow: theme.shadows.focus }, "&:hover": { backgroundColor: theme.colors.lightBlue, color: theme.colors.darkBlue }, "&:disabled": {
+        cursor: "default",
+        "&:hover": {
+            backgroundColor: "transparent",
+            color: theme.colors.darkGrey,
+        },
+    } })), addStyledProps);
+export const NavigationMenuIconLink = styled(NavigationMenuLink)(({ theme }) => ({
+    paddingRight: theme.space.x1,
+    borderRadius: theme.radii.rounded,
+}));
+export const NavigationMenuIconTrigger = styled(NavigationMenuTrigger)(({ theme }) => ({
+    padding: theme.space.x1,
+    borderRadius: theme.radii.rounded,
+}));
+export const CaretDown = styled(Icon).attrs({
+    icon: "downArrow",
+})({
+    position: "relative",
+    color: "currentColor",
+    transition: "transform 250ms ease",
+    "[data-state=open] &": { transform: "rotate(-180deg)" },
+});
+export const CaretRight = styled(Icon).attrs({
+    icon: "rightArrow",
+})({
+    position: "relative",
+    color: "currentColor",
+});
+export const RadixNavigationMenuItem = styled(RadixNavigationMenu.Item)({
+    position: "relative",
+}, addStyledProps);

package/dist/src/Navigation/components/shared/constants.d.ts

@@ -1,6 +1,6 @@
-import { Breakpoints } from "../../../theme/theme.type";
-export declare const NAVIGATION_MENU_HEIGHT_STYLED_UNITS = "x8";
-export declare const NAVIGATION_MENU_CONTENT_WIDTH_MAX_WIDTH_PX = 400;
-export declare const NAVIGATION_DEFAULT_BREAKPOINT_THEME_KEY: keyof Breakpoints;
-export declare const NAVIGATION_SUB_MENU_MIN_WIDTH_PX = 180;
-export declare const MIN_DISTANCE_BETWEEN_MENUS_PX = 64;
+import { Breakpoints } from "../../../theme/theme.type";
+export declare const NAVIGATION_MENU_HEIGHT_STYLED_UNITS = "x8";
+export declare const NAVIGATION_MENU_CONTENT_WIDTH_MAX_WIDTH_PX = 400;
+export declare const NAVIGATION_DEFAULT_BREAKPOINT_THEME_KEY: keyof Breakpoints;
+export declare const NAVIGATION_SUB_MENU_MIN_WIDTH_PX = 180;
+export declare const MIN_DISTANCE_BETWEEN_MENUS_PX = 64;

package/dist/src/Navigation/components/shared/constants.js

@@ -0,0 +1,5 @@
+export const NAVIGATION_MENU_HEIGHT_STYLED_UNITS = "x8";
+export const NAVIGATION_MENU_CONTENT_WIDTH_MAX_WIDTH_PX = 400;
+export const NAVIGATION_DEFAULT_BREAKPOINT_THEME_KEY = "medium";
+export const NAVIGATION_SUB_MENU_MIN_WIDTH_PX = 180;
+export const MIN_DISTANCE_BETWEEN_MENUS_PX = 64;

package/dist/src/Navigation/components/shared/disableHoverEvents.d.ts

@@ -1,6 +1,6 @@
-import { PointerEvent } from "react";
-export declare const disableHoverEvents: {
-    onPointerMove: (e: PointerEvent<Element>) => void;
-    onPointerEnter: (e: PointerEvent<Element>) => void;
-    onPointerLeave: (e: PointerEvent<Element>) => void;
-};
+import { PointerEvent } from "react";
+export declare const disableHoverEvents: {
+    onPointerMove: (e: PointerEvent<Element>) => void;
+    onPointerEnter: (e: PointerEvent<Element>) => void;
+    onPointerLeave: (e: PointerEvent<Element>) => void;
+};

package/dist/src/Navigation/components/shared/disableHoverEvents.js

@@ -0,0 +1,5 @@
+export const disableHoverEvents = {
+    onPointerMove: (e) => e.preventDefault(),
+    onPointerEnter: (e) => e.preventDefault(),
+    onPointerLeave: (e) => e.preventDefault(),
+};