@nulogy/components 14.8.2 → 15.0.1

package/dist/src/NDSProvider/NDSProvider.d.ts

@@ -1,14 +1,14 @@
-import React from "react";
-import { ThemeType } from "../theme";
-import { ComponentVariant } from "./ComponentVariantContext";
-import { FeatureFlags } from "./FeatureFlagsContext";
-type NDSProviderProps = {
-    theme?: ThemeType;
-    locale?: string;
-    disableGlobalStyles?: boolean;
-    children?: React.ReactNode;
-    variant?: ComponentVariant;
-    featureFlags?: FeatureFlags;
-};
-declare function NDSProvider({ theme: customTheme, children, disableGlobalStyles, locale, variant, featureFlags, }: NDSProviderProps): React.JSX.Element;
-export default NDSProvider;
+import React from "react";
+import { ThemeType } from "../theme";
+import { ComponentVariant } from "./ComponentVariantContext";
+import { FeatureFlags } from "./FeatureFlagsContext";
+type NDSProviderProps = {
+    theme?: ThemeType;
+    locale?: string;
+    disableGlobalStyles?: boolean;
+    children?: React.ReactNode;
+    variant?: ComponentVariant;
+    featureFlags?: FeatureFlags;
+};
+declare function NDSProvider({ theme: customTheme, children, disableGlobalStyles, locale, variant, featureFlags, }: NDSProviderProps): React.JSX.Element;
+export default NDSProvider;

package/dist/src/NDSProvider/NDSProvider.js

@@ -0,0 +1,22 @@
+import React, { useEffect } from "react";
+import { I18nextProvider } from "react-i18next";
+import i18n from "../i18n";
+import NDSThemeProvider from "../theme/NDSThemeProvider";
+import ComponentVariantContextProvider from "./ComponentVariantContext";
+import FeatureFlagsContextProvider from "./FeatureFlagsContext";
+import GlobalStylesComposer from "./GlobalStylesComposer";
+import { LocaleContext } from "./LocaleContext";
+function NDSProvider({ theme: customTheme, children, disableGlobalStyles = false, locale = "en_US", variant = "desktop", featureFlags = {
+    experimentalDesktopTypographyScale: false,
+}, }) {
+    useEffect(() => {
+        i18n.changeLanguage(locale);
+    }, [locale]);
+    return (React.createElement(LocaleContext.Provider, { value: { locale } },
+        React.createElement(FeatureFlagsContextProvider, { featureFlags: featureFlags },
+            React.createElement(ComponentVariantContextProvider, { variant: variant },
+                React.createElement(I18nextProvider, { i18n: i18n },
+                    React.createElement(NDSThemeProvider, { customTheme: customTheme },
+                        React.createElement(GlobalStylesComposer, { locale: locale, disableGlobalStyles: disableGlobalStyles }, children)))))));
+}
+export default NDSProvider;

package/dist/src/NDSProvider/Reset.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const Reset: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;
-export default Reset;
+/// <reference types="react" />
+declare const Reset: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;
+export default Reset;

package/dist/src/NDSProvider/Reset.js

@@ -0,0 +1,9 @@
+import { createGlobalStyle } from "styled-components";
+const Reset = createGlobalStyle(() => {
+    return {
+        body: {
+            margin: 0,
+        },
+    };
+});
+export default Reset;

package/dist/src/NDSProvider/index.d.ts

@@ -1 +1 @@
-export { default as NDSProvider } from "./NDSProvider";
+export { default as NDSProvider } from "./NDSProvider";

package/dist/src/NDSProvider/index.js

@@ -0,0 +1 @@
+export { default as NDSProvider } from "./NDSProvider";

package/dist/src/NDSProvider/mountWithNDSProvider.spec-utils.d.ts

@@ -1 +1 @@
-export declare const mountWithNDSProvider: (component: any, locale?: string) => any;
+export declare const mountWithNDSProvider: (component: any, locale?: string) => any;

package/dist/src/NDSProvider/mountWithNDSProvider.spec-utils.js

@@ -0,0 +1,4 @@
+import React from "react";
+import { mount } from "enzyme";
+import NDSProvider from "./NDSProvider";
+export const mountWithNDSProvider = (component, locale = "en_US") => mount(React.createElement(NDSProvider, { locale: locale }, component));

package/dist/src/NDSProvider/renderWithNDSProvider.spec-utils.d.ts

@@ -1 +1 @@
-export declare const renderWithNDSProvider: (component: any, locale?: string) => import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
+export declare const renderWithNDSProvider: (component: any, locale?: string) => import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;

package/dist/src/NDSProvider/renderWithNDSProvider.spec-utils.js

@@ -0,0 +1,4 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import NDSProvider from "./NDSProvider";
+export const renderWithNDSProvider = (component, locale = "en_US") => render(React.createElement(NDSProvider, { locale: locale }, component));

package/dist/src/NavBarSearch/NavBarSearch.d.ts

@@ -0,0 +1,11 @@
+export default NavBarSearch;
+declare const NavBarSearch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<{
+    [x: string]: any;
+    name?: string;
+    onSubmit: any;
+}, never>> & string & Omit<({ name, onSubmit, ...props }: {
+    [x: string]: any;
+    name?: string;
+    onSubmit: any;
+}) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+import React from "react";

package/dist/src/NavBarSearch/NavBarSearch.js

@@ -0,0 +1,78 @@
+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 { darken, transparentize } from "polished";
+import { useTranslation } from "react-i18next";
+import { Flex } from "../Flex";
+import { Input } from "../Input";
+import { Icon } from "../Icon";
+import { subPx } from "../utils";
+const BaseNavBarSearch = (_a) => {
+    var { name = "global-search", onSubmit } = _a, props = __rest(_a, ["name", "onSubmit"]);
+    const handleOnSubmit = (e) => {
+        e.preventDefault();
+        onSubmit(e);
+    };
+    const { t } = useTranslation();
+    return (React.createElement("form", Object.assign({}, props, { onSubmit: handleOnSubmit }),
+        React.createElement(Flex, { role: "search" },
+            React.createElement(Input, { id: "navbar-search", type: "search", "aria-labelledby": name, required: true, placeholder: t("search nulogy") }),
+            React.createElement("button", { id: name, "aria-label": name },
+                React.createElement(Icon, { icon: "search" })))));
+};
+const NavBarSearch = styled(BaseNavBarSearch)(({ theme }) => ({
+    background: theme.colors.lightBlue,
+    borderRadius: theme.radii.medium,
+    height: theme.space.x5,
+    minWidth: "7em",
+    width: "100%",
+    button: {
+        padding: subPx(theme.space.x1),
+        color: theme.colors.blackBlue,
+        background: "transparent",
+        border: "solid 1px transparent",
+        borderRadius: theme.radii.medium,
+        minWidth: theme.space.x5,
+        "&:focus": {
+            color: theme.colors.white,
+            background: darken(0.1, theme.colors.blue),
+            border: `solid 1px ${theme.colors.lightBlue}`,
+            outline: "none",
+            boxShadow: "none",
+        },
+        svg: {
+            display: "block",
+        },
+    },
+    Input: {
+        color: theme.colors.blackBlue,
+        background: "transparent",
+        border: "solid 1px transparent",
+        borderRadius: theme.radii.medium,
+        "&:focus": {
+            background: theme.colors.white,
+            border: "solid 1px transparent",
+            boxShadow: "none",
+        },
+        "::placeholder": {
+            color: transparentize(0.4, theme.colors.black),
+        },
+        "&[type='search']": {
+            "-webkit-appearance": "textfield",
+            "::-webkit-search-decoration": {
+                "-webkit-appearance": "none",
+            },
+        },
+    },
+}));
+export default NavBarSearch;

package/dist/src/NavBarSearch/index.d.ts

@@ -0,0 +1 @@
+export { default as NavBarSearch } from "./NavBarSearch";

package/dist/src/NavBarSearch/index.js

@@ -0,0 +1 @@
+export { default as NavBarSearch } from "./NavBarSearch";

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

@@ -1,16 +1,16 @@
-import React from "react";
-import type { MenuItems, UserMenu } from "./types";
-import { AppSwitcherConfig } from "./components/AppSwitcher/NulogyAppSwitcher";
-export interface BaseNavigationProps {
-    appSwitcher?: AppSwitcherConfig;
-    primaryLogo?: React.ReactNode;
-    secondaryLogo?: React.ReactNode;
-    primaryNavigation?: MenuItems;
-    secondaryNavigation?: MenuItems;
-    userMenu?: UserMenu;
-}
-export interface NavigationProps extends BaseNavigationProps {
-    breakpoint?: string;
-}
-declare const Navigation: ({ breakpoint, ...props }: NavigationProps) => React.JSX.Element;
-export default Navigation;
+import React from "react";
+import type { MenuItems, UserMenu } from "./types";
+import { AppSwitcherConfig } from "./components/AppSwitcher/NulogyAppSwitcher";
+export interface BaseNavigationProps {
+    appSwitcher?: AppSwitcherConfig;
+    primaryLogo?: React.ReactNode;
+    secondaryLogo?: React.ReactNode;
+    primaryNavigation?: MenuItems;
+    secondaryNavigation?: MenuItems;
+    userMenu?: UserMenu;
+}
+export interface NavigationProps extends BaseNavigationProps {
+    breakpoint?: string;
+}
+declare const Navigation: ({ breakpoint, ...props }: NavigationProps) => React.JSX.Element;
+export default Navigation;

package/dist/src/Navigation/Navigation.js

@@ -0,0 +1,26 @@
+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 { useTheme } from "styled-components";
+import useMediaQuery from "../hooks/useMediaQuery";
+import DesktopNav from "./components/DesktopNav/DesktopNav";
+import MobileNav from "./components/MobileNav/MobileNav";
+import { NAVIGATION_DEFAULT_BREAKPOINT_THEME_KEY } from "./components/shared/constants";
+const Navigation = (_a) => {
+    var _b;
+    var { breakpoint = NAVIGATION_DEFAULT_BREAKPOINT_THEME_KEY } = _a, props = __rest(_a, ["breakpoint"]);
+    const theme = useTheme();
+    const query = ((_b = theme === null || theme === void 0 ? void 0 : theme.breakpoints) === null || _b === void 0 ? void 0 : _b[breakpoint]) ? breakpoint : `(min-width: ${breakpoint})`;
+    const largeScreen = useMediaQuery(query);
+    return React.createElement(React.Fragment, null, largeScreen ? React.createElement(DesktopNav, Object.assign({}, props)) : React.createElement(MobileNav, Object.assign({}, props)));
+};
+export default Navigation;

package/dist/src/Navigation/components/AppSwitcher/NulogyAppSwitcher.d.ts

@@ -1,14 +1,14 @@
-import React from "react";
-import { NulogyAppName } from "../../../types/NulogyApp";
-export type AppSwitcherConfig = false | {
-    apps: Partial<Record<NulogyAppName, {
-        url: string;
-        indicator?: React.ReactNode;
-        visible?: boolean;
-    }>>;
-};
-type AppSwitcherProps = {
-    config: AppSwitcherConfig;
-};
-export declare function NulogyAppSwitcher({ config }: AppSwitcherProps): React.JSX.Element;
-export {};
+import React from "react";
+import { NulogyAppName } from "../../../types/NulogyApp";
+export type AppSwitcherConfig = false | {
+    apps: Partial<Record<NulogyAppName, {
+        url: string;
+        indicator?: React.ReactNode;
+        visible?: boolean;
+    }>>;
+};
+type AppSwitcherProps = {
+    config: AppSwitcherConfig;
+};
+export declare function NulogyAppSwitcher({ config }: AppSwitcherProps): React.JSX.Element;
+export {};

package/dist/src/Navigation/components/AppSwitcher/NulogyAppSwitcher.js

@@ -0,0 +1,74 @@
+import React, { useMemo } from "react";
+import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../../Icon";
+import { NavigationMenuIconTrigger } from "../shared/components";
+import NavigationMenuContent from "../shared/NavigationMenuContent";
+import AppSwitcher from "./parts";
+const apps = (t) => [
+    {
+        id: "connections",
+        label: t("Connections"),
+        description: t("connections app description"),
+    },
+    {
+        id: "digital-quality-inspection",
+        label: t("Digital Quality Inspection"),
+        description: t("digital quality inspection app description"),
+    },
+    {
+        id: "production-scheduling",
+        label: t("Production Scheduling"),
+        description: t("production scheduling app description"),
+    },
+    {
+        id: "shop-floor",
+        label: t("Shop Floor Control"),
+        description: t("shop floor control app description"),
+    },
+    {
+        id: "supplier-collaboration",
+        label: t("Supplier Collaboration"),
+        description: t("supplier collaboration app description"),
+    },
+    {
+        id: "smart-factory",
+        label: t("Smart Factory"),
+        description: t("smart factory app description"),
+    },
+    {
+        id: "data",
+        label: t("Data"),
+        description: t("data app description"),
+    },
+];
+export function NulogyAppSwitcher({ config }) {
+    const { t } = useTranslation();
+    const includedApps = useMemo(() => {
+        if (!config)
+            return [];
+        return apps(t)
+            .filter((app) => {
+            var _a;
+            const appConfig = config.apps[app.id];
+            return Boolean(appConfig) && ((_a = appConfig.visible) !== null && _a !== void 0 ? _a : true);
+        })
+            .map((app) => {
+            const appConfig = config.apps[app.id];
+            return Object.assign(Object.assign({}, app), { url: appConfig.url, indicator: appConfig.indicator });
+        });
+    }, [config, t]);
+    if (!config)
+        return null;
+    return (React.createElement(RadixNavigationMenu.Item, null,
+        React.createElement(NavigationMenuIconTrigger, { "aria-label": t("toggle app switcher") },
+            React.createElement(Icon, { icon: "apps", size: "x3" })),
+        React.createElement(NavigationMenuContent, { left: 0, "aria-label": t("app switcher") },
+            React.createElement(RadixNavigationMenu.Sub, null,
+                React.createElement(AppSwitcher.List, null, includedApps.map((app) => (React.createElement(AppSwitcher.Item, { key: app.id },
+                    React.createElement(AppSwitcher.Link, { href: app.url, "aria-label": app.label },
+                        app.indicator ? (React.createElement(AppSwitcher.Header, null,
+                            React.createElement(AppSwitcher.Title, null, app.label),
+                            app.indicator)) : (React.createElement(AppSwitcher.Title, null, app.label)),
+                        React.createElement(AppSwitcher.Description, null, app.description))))))))));
+}

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

@@ -1,4 +1,4 @@
-import React from "react";
-import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
-declare const Item: React.ForwardRefExoticComponent<Omit<import("styled-components").FastOmit<RadixNavigationMenu.NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>, never>, "ref"> & React.RefAttributes<HTMLLIElement>>;
-export default Item;
+import React from "react";
+import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
+declare const Item: React.ForwardRefExoticComponent<Omit<import("styled-components").FastOmit<RadixNavigationMenu.NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>, never>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export default Item;

package/dist/src/Navigation/components/AppSwitcher/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 { styled } from "styled-components";
+import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
+const FullWidthItem = styled(RadixNavigationMenu.Item)({
+    width: "100%",
+});
+const Item = React.forwardRef((_a, forwardedRef) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (React.createElement(FullWidthItem, Object.assign({}, props, { ref: forwardedRef }), children));
+});
+Item.displayName = "Item";
+export default Item;

package/dist/src/Navigation/components/AppSwitcher/parts/Link.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
-declare const Link: React.ForwardRefExoticComponent<Omit<import("styled-components").FastOmit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
-    ref?: React.Ref<HTMLAnchorElement>;
-}, never>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
-export default Link;
-export declare const A: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
-    ref?: React.Ref<HTMLAnchorElement>;
-}, never>> & string;
+import React from "react";
+declare const Link: React.ForwardRefExoticComponent<Omit<import("styled-components").FastOmit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    ref?: React.Ref<HTMLAnchorElement>;
+}, never>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export default Link;
+export declare const A: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    ref?: React.Ref<HTMLAnchorElement>;
+}, never>> & string;

package/dist/src/Navigation/components/AppSwitcher/parts/Link.js

@@ -0,0 +1,39 @@
+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";
+const Link = React.forwardRef((_a, forwardedRef) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (React.createElement(RadixNavigationMenu.Link, { asChild: true },
+        React.createElement(A, Object.assign({}, props, { ref: forwardedRef }), children)));
+});
+Link.displayName = "Link";
+export default Link;
+export const A = styled("a")(({ theme }) => ({
+    textDecoration: "none",
+    width: "100%",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    alignSelf: "stretch",
+    paddingTop: theme.space.x1_5,
+    paddingRight: theme.space.x3,
+    paddingBottom: theme.space.x2,
+    paddingLeft: theme.space.x3,
+    transition: "background-color 250ms ease",
+    "&:hover, &:focus": {
+        backgroundColor: theme.colors.lightBlue,
+        color: theme.colors.darkBlue,
+        outline: "none",
+    },
+}));

package/dist/src/Navigation/components/AppSwitcher/parts/index.d.ts

@@ -1,56 +1,56 @@
-/// <reference types="react" />
-import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
-declare const AppSwitcher: {
-    Content: 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>, import("../../shared/NavigationMenuContent").NavigationMenuContentProps>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuContentProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
-    List: 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>>;
-    Item: import("react").ForwardRefExoticComponent<Omit<import("styled-components").FastOmit<RadixNavigationMenu.NavigationMenuItemProps & import("react").RefAttributes<HTMLLIElement>, never>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
-    Link: import("react").ForwardRefExoticComponent<Omit<import("styled-components").FastOmit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
-        ref?: import("react").Ref<HTMLAnchorElement>;
-    }, never>, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
-    Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: import("react").Ref<HTMLDivElement>;
-    }, never>> & string;
-    Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "inline" | "compact" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "textTransform" | keyof import("../../../..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
-        variant?: import("../../../../NDSProvider/ComponentVariantContext").ComponentVariant;
-        inline?: boolean;
-        compact?: boolean;
-        disabled?: boolean;
-        textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
-        fontSize?: string;
-    } & import("../../../..").StyledProps, "ref"> & {
-        ref?: import("react").Ref<HTMLParagraphElement>;
-    }, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
-        ref?: import("react").Ref<HTMLHeadingElement>;
-    }>, never>, never>, import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "inline" | "compact" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "textTransform" | keyof import("../../../..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
-        variant?: import("../../../../NDSProvider/ComponentVariantContext").ComponentVariant;
-        inline?: boolean;
-        compact?: boolean;
-        disabled?: boolean;
-        textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
-        fontSize?: string;
-    } & import("../../../..").StyledProps, "ref"> & {
-        ref?: import("react").Ref<HTMLParagraphElement>;
-    }, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
-        ref?: import("react").Ref<HTMLHeadingElement>;
-    }>, never>, never>>, never>, never>> & string;
-    Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "inline" | "compact" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "textTransform" | keyof import("../../../..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
-        variant?: import("../../../../NDSProvider/ComponentVariantContext").ComponentVariant;
-        inline?: boolean;
-        compact?: boolean;
-        disabled?: boolean;
-        textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
-        fontSize?: string;
-    } & import("../../../..").StyledProps, "ref"> & {
-        ref?: import("react").Ref<HTMLParagraphElement>;
-    }, Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "inline" | "compact" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "textTransform" | keyof import("../../../..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
-        variant?: import("../../../../NDSProvider/ComponentVariantContext").ComponentVariant;
-        inline?: boolean;
-        compact?: boolean;
-        disabled?: boolean;
-        textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
-        fontSize?: string;
-    } & import("../../../..").StyledProps, "ref"> & {
-        ref?: import("react").Ref<HTMLParagraphElement>;
-    }>, never>, never>> & string;
-};
-export default AppSwitcher;
+/// <reference types="react" />
+import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
+declare const AppSwitcher: {
+    Content: 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>, import("../../shared/NavigationMenuContent").NavigationMenuContentProps>> & string & Omit<import("react").ForwardRefExoticComponent<RadixNavigationMenu.NavigationMenuContentProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+    List: 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>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<import("styled-components").FastOmit<RadixNavigationMenu.NavigationMenuItemProps & import("react").RefAttributes<HTMLLIElement>, never>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+    Link: import("react").ForwardRefExoticComponent<Omit<import("styled-components").FastOmit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+        ref?: import("react").Ref<HTMLAnchorElement>;
+    }, never>, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+    Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: import("react").Ref<HTMLDivElement>;
+    }, never>> & string;
+    Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("../../../..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+        variant?: import("../../../../NDSProvider/ComponentVariantContext").ComponentVariant;
+        inline?: boolean;
+        compact?: boolean;
+        disabled?: boolean;
+        textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
+        fontSize?: string;
+    } & import("../../../..").StyledProps, "ref"> & {
+        ref?: import("react").Ref<HTMLParagraphElement>;
+    }, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+        ref?: import("react").Ref<HTMLHeadingElement>;
+    }>, never>, never>, import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("../../../..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+        variant?: import("../../../../NDSProvider/ComponentVariantContext").ComponentVariant;
+        inline?: boolean;
+        compact?: boolean;
+        disabled?: boolean;
+        textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
+        fontSize?: string;
+    } & import("../../../..").StyledProps, "ref"> & {
+        ref?: import("react").Ref<HTMLParagraphElement>;
+    }, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+        ref?: import("react").Ref<HTMLHeadingElement>;
+    }>, never>, never>>, never>, never>> & string;
+    Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("../../../..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+        variant?: import("../../../../NDSProvider/ComponentVariantContext").ComponentVariant;
+        inline?: boolean;
+        compact?: boolean;
+        disabled?: boolean;
+        textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
+        fontSize?: string;
+    } & import("../../../..").StyledProps, "ref"> & {
+        ref?: import("react").Ref<HTMLParagraphElement>;
+    }, Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("../../../..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+        variant?: import("../../../../NDSProvider/ComponentVariantContext").ComponentVariant;
+        inline?: boolean;
+        compact?: boolean;
+        disabled?: boolean;
+        textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
+        fontSize?: string;
+    } & import("../../../..").StyledProps, "ref"> & {
+        ref?: import("react").Ref<HTMLParagraphElement>;
+    }>, never>, never>> & string;
+};
+export default AppSwitcher;

package/dist/src/Navigation/components/AppSwitcher/parts/index.js

@@ -0,0 +1,35 @@
+import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
+import styled from "styled-components";
+import { Heading4, Text } from "../../../../Type";
+import Content from "../../shared/NavigationMenuContent";
+import Link from "./Link";
+import Item from "./Item";
+const List = styled(RadixNavigationMenu.List)(({ theme }) => ({
+    margin: 0,
+    padding: 0,
+    gap: theme.space.x2,
+    listStyle: "none",
+}));
+const Header = styled("div")(({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.space.x1,
+}));
+const Title = styled(Heading4).attrs({
+    color: "darkGrey",
+    compact: true,
+})({});
+const Description = styled(Text).attrs({
+    color: "midGrey",
+    fontSize: "smaller",
+})({});
+const AppSwitcher = {
+    Content,
+    List,
+    Item,
+    Link,
+    Header,
+    Title,
+    Description,
+};
+export default AppSwitcher;