@rio-cloud/rio-uikit 2.0.0-beta.1 → 2.0.0

package/components/applicationHeader/ApplicationHeader.js

@@ -1,33 +1,90 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useRef, forwardRef, useCallback, useImperativeHandle } from 'react';
-import { isEmpty } from 'es-toolkit/compat';
-import classNames from 'classnames';
-import AppMenu from "./AppMenu.js";
-import ApplicationActionBar from "./ApplicationActionBar.js";
-import MobileSubmoduleNavigation from "./MobileSubmoduleNavigation.js";
-import MobileAppMenu from "./MobileAppMenu.js";
-import useResizeObserver from "../../hooks/useResizeObserver.js";
-import NavItems from "./NavItems.js";
-const SCREEN_SM = 768; // @screen-sm: 768px;
-export const ApplicationHeader = forwardRef((props, ref) => {
-    const { homeRoute = '', showHomeIcon = true, label, className, appNavigator, appNavigatorClassName, appMenuItems, navItems, actionBarItems = [], onToggleAppMenu = () => { }, ...remainingProps } = props;
-    const actionBarRef = useRef(null);
-    const [navRef, entry] = useResizeObserver();
-    const contentRect = entry?.contentRect;
-    useImperativeHandle(ref, () => navRef, [navRef]);
-    const getContentRect = useCallback((key) => {
-        if (contentRect) {
-            const value = contentRect[key];
-            return typeof value === 'number' && Math.round(value);
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import g, { forwardRef as B, useRef as H, useImperativeHandle as S, useCallback as E } from "react";
+import { isEmpty as m } from "es-toolkit/compat";
+import W from "classnames";
+import j from "./AppMenu.js";
+import b from "./ApplicationActionBar.js";
+import F from "./MobileSubmoduleNavigation.js";
+import k from "./MobileAppMenu.js";
+import z from "../../hooks/useResizeObserver.js";
+import { NavItems as D } from "./NavItems.js";
+const O = 768, X = B((R, M) => {
+  const {
+    homeRoute: c = "",
+    showHomeIcon: l = !0,
+    label: o,
+    className: p,
+    appNavigator: d,
+    appNavigatorClassName: A,
+    appMenuItems: f,
+    navItems: a,
+    actionBarItems: t = [],
+    onToggleAppMenu: u = () => {
+    },
+    ...I
+  } = R, h = H(null), [i, w] = z(), s = w?.contentRect;
+  S(M, () => i, [i]);
+  const v = E(
+    (y) => {
+      if (s) {
+        const N = s[y];
+        return typeof N == "number" && Math.round(N);
+      }
+    },
+    [s]
+  )("width") || window.innerWidth, r = v <= O, x = !m(t), C = W(
+    "ApplicationHeader",
+    "user-select-none",
+    r && "mobile",
+    p && p
+  );
+  return /* @__PURE__ */ n("nav", { ...I, className: C, ref: i, children: [
+    r && /* @__PURE__ */ n(g.Fragment, { children: [
+      /* @__PURE__ */ e(
+        k,
+        {
+          showHomeIcon: l,
+          homeRoute: c,
+          appMenuItems: f,
+          appNavigator: d,
+          onToggleAppMenu: u
         }
-    }, [contentRect]);
-    // If container width cannot be properly read initially, fall back to window width.
-    // This fixes ugly jumping on mobile header and desktop header on mount.
-    const containerWidth = getContentRect('width') || window.innerWidth;
-    const isMobileWidth = containerWidth <= SCREEN_SM;
-    const hasActionBarItems = !isEmpty(actionBarItems);
-    const wrapperClassNames = classNames('ApplicationHeader', 'user-select-none', isMobileWidth && 'mobile', className && className);
-    return (_jsxs("nav", { ...remainingProps, className: wrapperClassNames, ref: navRef, children: [isMobileWidth && (_jsxs(React.Fragment, { children: [_jsx(MobileAppMenu, { showHomeIcon: showHomeIcon, homeRoute: homeRoute, appMenuItems: appMenuItems, appNavigator: appNavigator, onToggleAppMenu: onToggleAppMenu }), _jsxs("div", { className: 'flex-1-1-0 display-flex gap-10', children: [_jsx(MobileSubmoduleNavigation, { className: 'flex-1-1', label: label, navItems: navItems }), hasActionBarItems && _jsx(Divider, {}), _jsx(ApplicationActionBar, { className: 'mobile', nodeRef: actionBarRef, items: actionBarItems })] })] })), !isMobileWidth && (_jsxs(React.Fragment, { children: [_jsx("div", { className: 'navbar-header', children: _jsx("span", { className: `navbar-brand ${showHomeIcon ? 'home-icon' : ''}`, children: homeRoute }) }), label && (_jsx(AppMenu, { label: label, appMenuItems: appMenuItems, appNavigator: appNavigator, appNavigatorClassName: appNavigatorClassName, onToggleAppMenu: onToggleAppMenu }, 'AppMenu')), isEmpty(navItems) && _jsx("ul", { className: 'SubmoduleNavigation nav' }), !isEmpty(navItems) && (_jsx(NavItems, { navItems: navItems, containerWidth: containerWidth, actionBarItems: actionBarItems }, 'NavItems')), _jsx(ApplicationActionBar, { nodeRef: actionBarRef, items: actionBarItems })] }))] }));
-});
-const Divider = () => (_jsx("div", { className: 'divider display-flex align-items-center', children: _jsx("div", { className: 'width-3 height-20 bg-lighter' }) }));
-export default ApplicationHeader;
+      ),
+      /* @__PURE__ */ n("div", { className: "flex-1-1-0 display-flex gap-10", children: [
+        /* @__PURE__ */ e(F, { className: "flex-1-1", label: o, navItems: a }),
+        x && /* @__PURE__ */ e(P, {}),
+        /* @__PURE__ */ e(b, { className: "mobile", nodeRef: h, items: t })
+      ] })
+    ] }),
+    !r && /* @__PURE__ */ n(g.Fragment, { children: [
+      /* @__PURE__ */ e("div", { className: "navbar-header", children: /* @__PURE__ */ e("span", { className: `navbar-brand ${l ? "home-icon" : ""}`, children: c }) }),
+      o && /* @__PURE__ */ e(
+        j,
+        {
+          label: o,
+          appMenuItems: f,
+          appNavigator: d,
+          appNavigatorClassName: A,
+          onToggleAppMenu: u
+        },
+        "AppMenu"
+      ),
+      m(a) && /* @__PURE__ */ e("ul", { className: "SubmoduleNavigation nav" }),
+      !m(a) && /* @__PURE__ */ e(
+        D,
+        {
+          navItems: a,
+          containerWidth: v,
+          actionBarItems: t
+        },
+        "NavItems"
+      ),
+      /* @__PURE__ */ e(b, { nodeRef: h, items: t })
+    ] })
+  ] });
+}), P = () => /* @__PURE__ */ e("div", { className: "divider display-flex align-items-center", children: /* @__PURE__ */ e("div", { className: "width-3 height-20 bg-lighter" }) });
+export {
+  X as ApplicationHeader,
+  X as default
+};
+//# sourceMappingURL=ApplicationHeader.js.map

package/components/applicationHeader/ApplicationHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApplicationHeader.js","sources":["../../../src/components/applicationHeader/ApplicationHeader.tsx"],"sourcesContent":["import React, { useRef, forwardRef, useCallback, useImperativeHandle, type ForwardedRef } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\nimport classNames from 'classnames';\n\nimport AppMenu from './AppMenu';\nimport ApplicationActionBar from './ApplicationActionBar';\nimport MobileSubmoduleNavigation from './MobileSubmoduleNavigation';\nimport MobileAppMenu from './MobileAppMenu';\nimport useResizeObserver from '../../hooks/useResizeObserver';\nimport NavItems from './NavItems';\n\nconst SCREEN_SM = 768; // @screen-sm: 768px;\n\nexport type ModulePropType = {\n    /**\n     * Unique key for the sub-module navigation component of an app.\n     */\n    key: string;\n\n    /**\n     * The navigation link component used for rendering the name and for routing.\n     *\n     * @example\n     *\n     * ```tsx\n     * <NavLink to='/app/ipsum'>{'Lorem ipsum'}</NavLink>\n     * ```\n     */\n    route: React.ReactNode;\n};\n\nexport type ApplicationHeaderProps = {\n    /**\n     * The service name shown as the navigator dropdown label.\n     */\n    label?: string | React.ReactNode;\n\n    /**\n     * The home URL that shall be used for the home button. Pass a `react-router-dom` `NavLink`\n     * as homeRoute into the header. For example:\n     *\n     * @example\n     *\n     * ```tsx\n     * <NavLink to='https://home.rio.cloud' />\n     * ```\n     */\n    homeRoute?: React.ReactNode;\n\n    /**\n     * Defines to either show the home icon or the RIO logo as brand logo.\n     */\n    showHomeIcon?: boolean;\n\n    /**\n     * The component for the navigation between apps which will be shown inside the main dropdown.\n     *\n     * Platform apps may use the default AppNavigator, but there are also cases like support apps where it's just a\n     * simple list In this case, use the prop `appMenuItems`.\n     *\n     * If no appNavigator is defined, the dropdown menu will not be rendered.\n     */\n    appNavigator?: React.ReactNode;\n\n    /**\n     * Additional class names that are added to the appNavigator.\n     */\n    appNavigatorClassName?: string;\n\n    /**\n     * List of application navigation link components.\n     */\n    appMenuItems?: ModulePropType[];\n\n    /**\n     * List of submodule navigation component of an app.\n     *\n     * Items collapse into a dropdown if remaining space in the header is not sufficient.\n     */\n    navItems?: ModulePropType[];\n\n    /**\n     * List of external smart components.\n     *\n     * For example, the rio-accountmenu or application-owned components such as a ServiceInfo icon. These components\n     * are based on the `ActionBarItem`.\n     */\n    actionBarItems?: React.ReactNode[];\n\n    /**\n     * Callback function triggered when the application menu is open or closed.\n     *\n     * @param isOpen The new \"open\" state.\n     */\n    onToggleAppMenu?: (isOpen: boolean) => void;\n\n    /**\n     * Additional class names that are added to the wrapper component.\n     */\n    className?: string;\n};\n\nexport const ApplicationHeader = forwardRef((props: ApplicationHeaderProps, ref: ForwardedRef<HTMLDivElement>) => {\n    const {\n        homeRoute = '',\n        showHomeIcon = true,\n        label,\n        className,\n        appNavigator,\n        appNavigatorClassName,\n        appMenuItems,\n        navItems,\n        actionBarItems = [],\n        onToggleAppMenu = () => {},\n        ...remainingProps\n    } = props;\n\n    const actionBarRef = useRef(null);\n\n    const [navRef, entry] = useResizeObserver();\n\n    const contentRect = entry?.contentRect;\n\n    useImperativeHandle<HTMLDivElement, any>(ref, () => navRef, [navRef]);\n\n    const getContentRect = useCallback(\n        (key: keyof DOMRectReadOnly) => {\n            if (contentRect) {\n                const value = contentRect[key];\n                return typeof value === 'number' && Math.round(value);\n            }\n        },\n        [contentRect]\n    );\n\n    // If container width cannot be properly read initially, fall back to window width.\n    // This fixes ugly jumping on mobile header and desktop header on mount.\n    const containerWidth = getContentRect('width') || window.innerWidth;\n\n    const isMobileWidth = containerWidth <= SCREEN_SM;\n\n    const hasActionBarItems = !isEmpty(actionBarItems);\n\n    const wrapperClassNames = classNames(\n        'ApplicationHeader',\n        'user-select-none',\n        isMobileWidth && 'mobile',\n        className && className\n    );\n\n    return (\n        <nav {...remainingProps} className={wrapperClassNames} ref={navRef}>\n            {isMobileWidth && (\n                <React.Fragment>\n                    <MobileAppMenu\n                        showHomeIcon={showHomeIcon}\n                        homeRoute={homeRoute}\n                        appMenuItems={appMenuItems}\n                        appNavigator={appNavigator}\n                        onToggleAppMenu={onToggleAppMenu}\n                    />\n                    <div className='flex-1-1-0 display-flex gap-10'>\n                        <MobileSubmoduleNavigation className='flex-1-1' label={label} navItems={navItems} />\n                        {hasActionBarItems && <Divider />}\n                        <ApplicationActionBar className='mobile' nodeRef={actionBarRef} items={actionBarItems} />\n                    </div>\n                </React.Fragment>\n            )}\n            {!isMobileWidth && (\n                <React.Fragment>\n                    <div className='navbar-header'>\n                        <span className={`navbar-brand ${showHomeIcon ? 'home-icon' : ''}`}>{homeRoute}</span>\n                    </div>\n                    {label && (\n                        <AppMenu\n                            label={label}\n                            key='AppMenu'\n                            appMenuItems={appMenuItems}\n                            appNavigator={appNavigator}\n                            appNavigatorClassName={appNavigatorClassName}\n                            onToggleAppMenu={onToggleAppMenu}\n                        />\n                    )}\n                    {isEmpty(navItems) && <ul className='SubmoduleNavigation nav' />}\n                    {!isEmpty(navItems) && (\n                        <NavItems\n                            key='NavItems'\n                            navItems={navItems}\n                            containerWidth={containerWidth}\n                            actionBarItems={actionBarItems}\n                        />\n                    )}\n                    <ApplicationActionBar nodeRef={actionBarRef} items={actionBarItems} />\n                </React.Fragment>\n            )}\n        </nav>\n    );\n});\n\nconst Divider = () => (\n    <div className='divider display-flex align-items-center'>\n        <div className='width-3 height-20 bg-lighter' />\n    </div>\n);\n\nexport default ApplicationHeader;\n"],"names":["SCREEN_SM","ApplicationHeader","forwardRef","props","ref","homeRoute","showHomeIcon","label","className","appNavigator","appNavigatorClassName","appMenuItems","navItems","actionBarItems","onToggleAppMenu","remainingProps","actionBarRef","useRef","navRef","entry","useResizeObserver","contentRect","useImperativeHandle","containerWidth","useCallback","key","value","isMobileWidth","hasActionBarItems","isEmpty","wrapperClassNames","classNames","jsxs","React","jsx","MobileAppMenu","MobileSubmoduleNavigation","Divider","ApplicationActionBar","AppMenu","NavItems"],"mappings":"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"}

package/components/applicationHeader/CollapsedNavItem.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { ModulePropType } from './ApplicationHeader';
+import { default as React } from 'react';
+import { ModulePropType } from './ApplicationHeader';
 type CollapsedNavItemProps = {
     show: boolean;
     navItems: ModulePropType[];

package/components/applicationHeader/CollapsedNavItem.js

@@ -1,14 +1,34 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { isEmpty } from 'es-toolkit/compat';
-const CollapsedNavItem = forwardRef((props, ref) => {
-    const { show = false, navItems, actionBarItems, onDropdownClick, onItemClick } = props;
-    if (isEmpty(navItems) && isEmpty(actionBarItems)) {
-        return null;
-    }
-    const collapsedDropdownClass = show ? 'open' : '';
-    return (_jsxs("li", { className: `CollapsedDropdown dropdown ${collapsedDropdownClass}`, ref: ref, children: [_jsx("a", { id: 'basic-nav-dropdown', role: 'button', className: 'dropdown-toggle text-color-gray', "aria-haspopup": 'true', "aria-expanded": 'true', onClick: onDropdownClick, children: _jsx("span", { className: 'rioglyph rioglyph-option-horizontal', "aria-hidden": 'true' }) }), _jsx("ul", { className: 'dropdown-menu', role: 'menu', "aria-labelledby": 'basic-nav-dropdown', children: navItems.map(navItem => {
-                    return (_jsx("li", { className: 'submodule', onClick: onItemClick, "data-nav-item-key": navItem.key, children: navItem.route }, navItem.key));
-                }) })] }, 'collapsed-dropdown'));
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { isEmpty as e } from "es-toolkit/compat";
+const f = c((l, n) => {
+  const { show: s = !1, navItems: r, actionBarItems: d, onDropdownClick: p, onItemClick: i } = l;
+  return e(r) && e(d) ? null : /* @__PURE__ */ t("li", { className: `CollapsedDropdown dropdown ${s ? "open" : ""}`, ref: n, children: [
+    /* @__PURE__ */ o(
+      "a",
+      {
+        id: "basic-nav-dropdown",
+        role: "button",
+        className: "dropdown-toggle text-color-gray",
+        "aria-haspopup": "true",
+        "aria-expanded": "true",
+        onClick: p,
+        children: /* @__PURE__ */ o("span", { className: "rioglyph rioglyph-option-horizontal", "aria-hidden": "true" })
+      }
+    ),
+    /* @__PURE__ */ o("ul", { className: "dropdown-menu", role: "menu", "aria-labelledby": "basic-nav-dropdown", children: r.map((a) => /* @__PURE__ */ o(
+      "li",
+      {
+        className: "submodule",
+        onClick: i,
+        "data-nav-item-key": a.key,
+        children: a.route
+      },
+      a.key
+    )) })
+  ] }, "collapsed-dropdown");
 });
-export default CollapsedNavItem;
+export {
+  f as default
+};
+//# sourceMappingURL=CollapsedNavItem.js.map

package/components/applicationHeader/CollapsedNavItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsedNavItem.js","sources":["../../../src/components/applicationHeader/CollapsedNavItem.tsx"],"sourcesContent":["import React, { forwardRef, type ForwardedRef } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport type { ModulePropType } from './ApplicationHeader';\n\ntype CollapsedNavItemProps = {\n    show: boolean;\n    navItems: ModulePropType[];\n    actionBarItems: React.ReactNode[];\n    onDropdownClick: () => void;\n    onItemClick: () => void;\n};\n\ntype Ref = ForwardedRef<HTMLLIElement>;\n\nconst CollapsedNavItem = forwardRef((props: CollapsedNavItemProps, ref: Ref) => {\n    const { show = false, navItems, actionBarItems, onDropdownClick, onItemClick } = props;\n\n    if (isEmpty(navItems) && isEmpty(actionBarItems)) {\n        return null;\n    }\n\n    const collapsedDropdownClass = show ? 'open' : '';\n\n    return (\n        <li className={`CollapsedDropdown dropdown ${collapsedDropdownClass}`} key='collapsed-dropdown' ref={ref}>\n            <a\n                id='basic-nav-dropdown'\n                role='button'\n                className='dropdown-toggle text-color-gray'\n                aria-haspopup='true'\n                aria-expanded='true'\n                onClick={onDropdownClick}\n            >\n                <span className='rioglyph rioglyph-option-horizontal' aria-hidden='true' />\n            </a>\n\n            <ul className='dropdown-menu' role='menu' aria-labelledby='basic-nav-dropdown'>\n                {navItems.map(navItem => {\n                    return (\n                        <li\n                            key={navItem.key}\n                            className='submodule'\n                            onClick={onItemClick}\n                            data-nav-item-key={navItem.key}\n                        >\n                            {navItem.route}\n                        </li>\n                    );\n                })}\n            </ul>\n        </li>\n    );\n});\n\nexport default CollapsedNavItem;\n"],"names":["CollapsedNavItem","forwardRef","props","ref","show","navItems","actionBarItems","onDropdownClick","onItemClick","isEmpty","jsx","navItem"],"mappings":";;;AAeA,MAAMA,IAAmBC,EAAW,CAACC,GAA8BC,MAAa;AAC5E,QAAM,EAAE,MAAAC,IAAO,IAAO,UAAAC,GAAU,gBAAAC,GAAgB,iBAAAC,GAAiB,aAAAC,MAAgBN;AAEjF,SAAIO,EAAQJ,CAAQ,KAAKI,EAAQH,CAAc,IACpC,yBAMN,MAAA,EAAG,WAAW,8BAHYF,IAAO,SAAS,EAGwB,IAA6B,KAAAD,GAC5F,UAAA;AAAA,IAAA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,MAAK;AAAA,QACL,WAAU;AAAA,QACV,iBAAc;AAAA,QACd,iBAAc;AAAA,QACd,SAASH;AAAA,QAET,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,uCAAsC,eAAY,OAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAG7E,gBAAAA,EAAC,MAAA,EAAG,WAAU,iBAAgB,MAAK,QAAO,mBAAgB,sBACrD,UAAAL,EAAS,IAAI,CAAAM,MAEN,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QAEG,WAAU;AAAA,QACV,SAASF;AAAA,QACT,qBAAmBG,EAAQ;AAAA,QAE1B,UAAAA,EAAQ;AAAA,MAAA;AAAA,MALJA,EAAQ;AAAA,IAAA,CAQxB,EAAA,CACL;AAAA,EAAA,EAAA,GAzBuE,oBA0B3E;AAER,CAAC;"}

package/components/applicationHeader/MobileAppMenu.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { ModulePropType } from './ApplicationHeader';
+import { default as React } from 'react';
+import { ModulePropType } from './ApplicationHeader';
 export type MobileAppMenuProps = {
     homeRoute: React.ReactNode;
     showHomeIcon: boolean;

package/components/applicationHeader/MobileAppMenu.js

@@ -1,17 +1,29 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from 'react';
-import { isNil } from 'es-toolkit/compat';
-import MobileHeaderModal from "./MobileHeaderModal.js";
-const MobileAppMenu = (props) => {
-    const { appMenuItems, appNavigator, showHomeIcon, homeRoute, onToggleAppMenu } = props;
-    const [isShown, setIsShown] = useState(false);
-    const handleToggleNavigation = () => {
-        const newState = !isShown;
-        setIsShown(newState);
-        onToggleAppMenu(newState);
-    };
-    const hasAppContent = !(isNil(appMenuItems) && isNil(appNavigator));
-    return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: 'navbar-header min-width-50 padding-5 ' +
-                    'overflow-hidden position-relative display-flex align-items-center', onClick: handleToggleNavigation, children: [_jsx("span", { className: `navbar-brand height-40 width-40 ${showHomeIcon ? 'home-icon' : ''}`, children: !hasAppContent && homeRoute }), hasAppContent && (_jsx("div", { className: 'position-absolute right-2 bottom-0 text-color-white rotate-45', children: _jsx("span", { className: 'rioglyph rioglyph-triangle-right' }) }))] }), appNavigator && (_jsx(MobileHeaderModal, { show: isShown, modalClassName: 'padding-top-25', onClose: handleToggleNavigation, children: _jsx("div", { className: 'width-100pct height-100pct', children: appNavigator }) })), appMenuItems && (_jsx(MobileHeaderModal, { show: isShown, modalClassName: 'padding-15', onClose: handleToggleNavigation, children: appMenuItems.map(module => (_jsx("li", { role: 'presentation', children: module.route }, `link-icon-${module.key}`))) }))] }));
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import w, { useState as N } from "react";
+import { isNil as r } from "es-toolkit/compat";
+import h from "./MobileHeaderModal.js";
+const C = (d) => {
+  const { appMenuItems: i, appNavigator: t, showHomeIcon: p, homeRoute: c, onToggleAppMenu: m } = d, [a, g] = N(!1), n = () => {
+    const o = !a;
+    g(o), m(o);
+  }, s = !(r(i) && r(t));
+  return /* @__PURE__ */ l(w.Fragment, { children: [
+    /* @__PURE__ */ l(
+      "div",
+      {
+        className: "navbar-header min-width-50 padding-5 overflow-hidden position-relative display-flex align-items-center",
+        onClick: n,
+        children: [
+          /* @__PURE__ */ e("span", { className: `navbar-brand height-40 width-40 ${p ? "home-icon" : ""}`, children: !s && c }),
+          s && /* @__PURE__ */ e("div", { className: "position-absolute right-2 bottom-0 text-color-white rotate-45", children: /* @__PURE__ */ e("span", { className: "rioglyph rioglyph-triangle-right" }) })
+        ]
+      }
+    ),
+    t && /* @__PURE__ */ e(h, { show: a, modalClassName: "padding-top-25", onClose: n, children: /* @__PURE__ */ e("div", { className: "width-100pct height-100pct", children: t }) }),
+    i && /* @__PURE__ */ e(h, { show: a, modalClassName: "padding-15", onClose: n, children: i.map((o) => /* @__PURE__ */ e("li", { role: "presentation", children: o.route }, `link-icon-${o.key}`)) })
+  ] });
 };
-export default MobileAppMenu;
+export {
+  C as default
+};
+//# sourceMappingURL=MobileAppMenu.js.map

package/components/applicationHeader/MobileAppMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileAppMenu.js","sources":["../../../src/components/applicationHeader/MobileAppMenu.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { isNil } from 'es-toolkit/compat';\n\nimport MobileHeaderModal from './MobileHeaderModal';\nimport type { ModulePropType } from './ApplicationHeader';\n\nexport type MobileAppMenuProps = {\n    homeRoute: React.ReactNode;\n    showHomeIcon: boolean;\n    appMenuItems?: ModulePropType[];\n    appNavigator?: React.ReactNode;\n    onToggleAppMenu: (isShown: boolean) => void;\n};\n\nconst MobileAppMenu = (props: MobileAppMenuProps) => {\n    const { appMenuItems, appNavigator, showHomeIcon, homeRoute, onToggleAppMenu } = props;\n\n    const [isShown, setIsShown] = useState(false);\n\n    const handleToggleNavigation = () => {\n        const newState = !isShown;\n        setIsShown(newState);\n        onToggleAppMenu(newState);\n    };\n\n    const hasAppContent = !(isNil(appMenuItems) && isNil(appNavigator));\n\n    return (\n        <React.Fragment>\n            <div\n                className={\n                    'navbar-header min-width-50 padding-5 ' +\n                    'overflow-hidden position-relative display-flex align-items-center'\n                }\n                onClick={handleToggleNavigation}\n            >\n                <span className={`navbar-brand height-40 width-40 ${showHomeIcon ? 'home-icon' : ''}`}>\n                    {!hasAppContent && homeRoute}\n                </span>\n                {hasAppContent && (\n                    <div className='position-absolute right-2 bottom-0 text-color-white rotate-45'>\n                        <span className='rioglyph rioglyph-triangle-right' />\n                    </div>\n                )}\n            </div>\n            {appNavigator && (\n                <MobileHeaderModal show={isShown} modalClassName='padding-top-25' onClose={handleToggleNavigation}>\n                    <div className='width-100pct height-100pct'>{appNavigator}</div>\n                </MobileHeaderModal>\n            )}\n            {appMenuItems && (\n                <MobileHeaderModal show={isShown} modalClassName='padding-15' onClose={handleToggleNavigation}>\n                    {appMenuItems.map(module => (\n                        <li role='presentation' key={`link-icon-${module.key}`}>\n                            {module.route}\n                        </li>\n                    ))}\n                </MobileHeaderModal>\n            )}\n        </React.Fragment>\n    );\n};\n\nexport default MobileAppMenu;\n"],"names":["MobileAppMenu","props","appMenuItems","appNavigator","showHomeIcon","homeRoute","onToggleAppMenu","isShown","setIsShown","useState","handleToggleNavigation","newState","hasAppContent","isNil","jsxs","React","jsx","MobileHeaderModal","module"],"mappings":";;;;AAcA,MAAMA,IAAgB,CAACC,MAA8B;AACjD,QAAM,EAAE,cAAAC,GAAc,cAAAC,GAAc,cAAAC,GAAc,WAAAC,GAAW,iBAAAC,MAAoBL,GAE3E,CAACM,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAyB,MAAM;AACjC,UAAMC,IAAW,CAACJ;AAClB,IAAAC,EAAWG,CAAQ,GACnBL,EAAgBK,CAAQ;AAAA,EAC5B,GAEMC,IAAgB,EAAEC,EAAMX,CAAY,KAAKW,EAAMV,CAAY;AAEjE,SACI,gBAAAW,EAACC,EAAM,UAAN,EACG,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WACI;AAAA,QAGJ,SAASJ;AAAA,QAET,UAAA;AAAA,UAAA,gBAAAM,EAAC,QAAA,EAAK,WAAW,mCAAmCZ,IAAe,cAAc,EAAE,IAC9E,UAAA,CAACQ,KAAiBP,EAAA,CACvB;AAAA,UACCO,uBACI,OAAA,EAAI,WAAU,iEACX,UAAA,gBAAAI,EAAC,QAAA,EAAK,WAAU,mCAAA,CAAmC,EAAA,CACvD;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGPb,KACG,gBAAAa,EAACC,GAAA,EAAkB,MAAMV,GAAS,gBAAe,kBAAiB,SAASG,GACvE,UAAA,gBAAAM,EAAC,OAAA,EAAI,WAAU,8BAA8B,aAAa,GAC9D;AAAA,IAEHd,uBACIe,GAAA,EAAkB,MAAMV,GAAS,gBAAe,cAAa,SAASG,GAClE,UAAAR,EAAa,IAAI,OACd,gBAAAc,EAAC,MAAA,EAAG,MAAK,gBACJ,UAAAE,EAAO,MAAA,GADiB,aAAaA,EAAO,GAAG,EAEpD,CACH,EAAA,CACL;AAAA,EAAA,GAER;AAER;"}

package/components/applicationHeader/MobileHeaderModal.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 export type MobileHeaderModalProps = {
     show?: boolean;
     showClose?: boolean;

package/components/applicationHeader/MobileHeaderModal.js

@@ -1,18 +1,62 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from 'react';
-import ReactDOM from 'react-dom';
-import classNames from 'classnames';
-import { AnimatePresence, motion } from 'motion/react';
-import { getOrCreatePortalRoot } from "../../utils/portalRoot.js";
-const OFFSET_POSITION = -1000;
-const MobileHeaderModal = (props) => {
-    const { show = false, showClose = true, modalClassName, className, onClose = () => { }, children } = props;
-    const wrapperClasses = classNames('MobileHeaderModal', 'position-fixed left-0 right-0 bottom-0', 'z-index-max', className);
-    const modalClasses = classNames('display-flex flex-column justify-content-center', 'margin-15', 'text-center', 'rounded', 'bg-white', 'shadow-hard', 'overflow-auto', modalClassName);
-    const modalRoot = getOrCreatePortalRoot();
-    const pageHeight = window.innerHeight - 30;
-    const offset = OFFSET_POSITION - window.innerHeight;
-    return (_jsx(_Fragment, { children: ReactDOM.createPortal(_jsxs(React.Fragment, { children: [_jsx(AnimatePresence, { children: show && (_jsxs(motion.div, { className: wrapperClasses, initial: { opacity: 0, top: offset }, animate: { opacity: 1, y: 0, top: 0 }, exit: { opacity: 0, transition: { duration: 0.3 }, top: offset }, children: [_jsx("div", { className: modalClasses, style: { height: `${pageHeight}px` }, children: children }), showClose && (_jsx("div", { className: 'position-absolute top-15 right-15 margin-top-15 margin-right-15 ' +
-                                    'text-size-20 text-color-dark', onClick: onClose, children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) }))] })) }), _jsx(AnimatePresence, { children: show && (_jsx(motion.div, { className: 'bottom-sheet-backdrop', initial: { opacity: 0 }, animate: { opacity: 0.5 }, exit: { opacity: 0 } })) })] }), modalRoot) }));
+import { jsx as t, Fragment as y, jsxs as i } from "react/jsx-runtime";
+import w from "react";
+import u from "react-dom";
+import a from "classnames";
+import { AnimatePresence as r, motion as s } from "motion/react";
+import { getOrCreatePortalRoot as N } from "../../utils/portalRoot.js";
+const b = -1e3, P = (n) => {
+  const { show: e = !1, showClose: l = !0, modalClassName: c, className: m, onClose: d = () => {
+  }, children: p } = n, h = a(
+    "MobileHeaderModal",
+    "position-fixed left-0 right-0 bottom-0",
+    "z-index-max",
+    m
+  ), g = a(
+    "display-flex flex-column justify-content-center",
+    "margin-15",
+    "text-center",
+    "rounded",
+    "bg-white",
+    "shadow-hard",
+    "overflow-auto",
+    c
+  ), f = N(), x = window.innerHeight - 30, o = b - window.innerHeight;
+  return /* @__PURE__ */ t(y, { children: u.createPortal(
+    /* @__PURE__ */ i(w.Fragment, { children: [
+      /* @__PURE__ */ t(r, { children: e && /* @__PURE__ */ i(
+        s.div,
+        {
+          className: h,
+          initial: { opacity: 0, top: o },
+          animate: { opacity: 1, y: 0, top: 0 },
+          exit: { opacity: 0, transition: { duration: 0.3 }, top: o },
+          children: [
+            /* @__PURE__ */ t("div", { className: g, style: { height: `${x}px` }, children: p }),
+            l && /* @__PURE__ */ t(
+              "div",
+              {
+                className: "position-absolute top-15 right-15 margin-top-15 margin-right-15 text-size-20 text-color-dark",
+                onClick: d,
+                children: /* @__PURE__ */ t("span", { className: "rioglyph rioglyph-remove" })
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ t(r, { children: e && /* @__PURE__ */ t(
+        s.div,
+        {
+          className: "bottom-sheet-backdrop",
+          initial: { opacity: 0 },
+          animate: { opacity: 0.5 },
+          exit: { opacity: 0 }
+        }
+      ) })
+    ] }),
+    f
+  ) });
 };
-export default MobileHeaderModal;
+export {
+  P as default
+};
+//# sourceMappingURL=MobileHeaderModal.js.map

package/components/applicationHeader/MobileHeaderModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileHeaderModal.js","sources":["../../../src/components/applicationHeader/MobileHeaderModal.tsx"],"sourcesContent":["import React, { type PropsWithChildren } from 'react';\nimport ReactDOM from 'react-dom';\nimport classNames from 'classnames';\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\n\nconst OFFSET_POSITION = -1000;\n\nexport type MobileHeaderModalProps = {\n    show?: boolean;\n    showClose?: boolean;\n    modalClassName?: string;\n    onClose?: () => void;\n    className?: string;\n};\n\nconst MobileHeaderModal = (props: PropsWithChildren<MobileHeaderModalProps>) => {\n    const { show = false, showClose = true, modalClassName, className, onClose = () => {}, children } = props;\n\n    const wrapperClasses = classNames(\n        'MobileHeaderModal',\n        'position-fixed left-0 right-0 bottom-0',\n        'z-index-max',\n        className\n    );\n\n    const modalClasses = classNames(\n        'display-flex flex-column justify-content-center',\n        'margin-15',\n        'text-center',\n        'rounded',\n        'bg-white',\n        'shadow-hard',\n        'overflow-auto',\n        modalClassName\n    );\n\n    const modalRoot = getOrCreatePortalRoot();\n\n    const pageHeight = window.innerHeight - 30;\n    const offset = OFFSET_POSITION - window.innerHeight;\n\n    return (\n        <>\n            {ReactDOM.createPortal(\n                <React.Fragment>\n                    <AnimatePresence>\n                        {show && (\n                            <motion.div\n                                className={wrapperClasses}\n                                initial={{ opacity: 0, top: offset }}\n                                animate={{ opacity: 1, y: 0, top: 0 }}\n                                exit={{ opacity: 0, transition: { duration: 0.3 }, top: offset }}\n                            >\n                                <div className={modalClasses} style={{ height: `${pageHeight}px` }}>\n                                    {children}\n                                </div>\n                                {showClose && (\n                                    <div\n                                        className={\n                                            'position-absolute top-15 right-15 margin-top-15 margin-right-15 ' +\n                                            'text-size-20 text-color-dark'\n                                        }\n                                        onClick={onClose}\n                                    >\n                                        <span className='rioglyph rioglyph-remove' />\n                                    </div>\n                                )}\n                            </motion.div>\n                        )}\n                    </AnimatePresence>\n                    <AnimatePresence>\n                        {show && (\n                            <motion.div\n                                className='bottom-sheet-backdrop'\n                                initial={{ opacity: 0 }}\n                                animate={{ opacity: 0.5 }}\n                                exit={{ opacity: 0 }}\n                            />\n                        )}\n                    </AnimatePresence>\n                </React.Fragment>,\n                modalRoot\n            )}\n        </>\n    );\n};\n\nexport default MobileHeaderModal;\n"],"names":["OFFSET_POSITION","MobileHeaderModal","props","show","showClose","modalClassName","className","onClose","children","wrapperClasses","classNames","modalClasses","modalRoot","getOrCreatePortalRoot","pageHeight","offset","ReactDOM","jsxs","React","jsx","AnimatePresence","motion"],"mappings":";;;;;;AAOA,MAAMA,IAAkB,MAUlBC,IAAoB,CAACC,MAAqD;AAC5E,QAAM,EAAE,MAAAC,IAAO,IAAO,WAAAC,IAAY,IAAM,gBAAAC,GAAgB,WAAAC,GAAW,SAAAC,IAAU,MAAM;AAAA,EAAC,GAAG,UAAAC,MAAaN,GAE9FO,IAAiBC;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACAJ;AAAA,EAAA,GAGEK,IAAeD;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAL;AAAA,EAAA,GAGEO,IAAYC,EAAA,GAEZC,IAAa,OAAO,cAAc,IAClCC,IAASf,IAAkB,OAAO;AAExC,gCAES,UAAAgB,EAAS;AAAA,IACN,gBAAAC,EAACC,EAAM,UAAN,EACG,UAAA;AAAA,MAAA,gBAAAC,EAACC,KACI,UAAAjB,KACG,gBAAAc;AAAA,QAACI,EAAO;AAAA,QAAP;AAAA,UACG,WAAWZ;AAAA,UACX,SAAS,EAAE,SAAS,GAAG,KAAKM,EAAA;AAAA,UAC5B,SAAS,EAAE,SAAS,GAAG,GAAG,GAAG,KAAK,EAAA;AAAA,UAClC,MAAM,EAAE,SAAS,GAAG,YAAY,EAAE,UAAU,IAAA,GAAO,KAAKA,EAAA;AAAA,UAExD,UAAA;AAAA,YAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWR,GAAc,OAAO,EAAE,QAAQ,GAAGG,CAAU,KAAA,GACvD,UAAAN,EAAA,CACL;AAAA,YACCJ,KACG,gBAAAe;AAAA,cAAC;AAAA,cAAA;AAAA,gBACG,WACI;AAAA,gBAGJ,SAASZ;AAAA,gBAET,UAAA,gBAAAY,EAAC,QAAA,EAAK,WAAU,2BAAA,CAA2B;AAAA,cAAA;AAAA,YAAA;AAAA,UAC/C;AAAA,QAAA;AAAA,MAAA,GAIhB;AAAA,MACA,gBAAAA,EAACC,KACI,UAAAjB,KACG,gBAAAgB;AAAA,QAACE,EAAO;AAAA,QAAP;AAAA,UACG,WAAU;AAAA,UACV,SAAS,EAAE,SAAS,EAAA;AAAA,UACpB,SAAS,EAAE,SAAS,IAAA;AAAA,UACpB,MAAM,EAAE,SAAS,EAAA;AAAA,QAAE;AAAA,MAAA,EACvB,CAER;AAAA,IAAA,GACJ;AAAA,IACAT;AAAA,EAAA,GAER;AAER;"}

package/components/applicationHeader/MobileSubmoduleNavigation.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { ModulePropType } from './ApplicationHeader';
+import { default as React } from 'react';
+import { ModulePropType } from './ApplicationHeader';
 export type MobileSubmoduleNavigationProps = {
     label: React.ReactNode;
     navItems?: ModulePropType[];

package/components/applicationHeader/MobileSubmoduleNavigation.js

@@ -1,22 +1,34 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from 'react';
-import classNames from 'classnames';
-import { isEmpty } from 'es-toolkit/compat';
-import MobileHeaderModal from "./MobileHeaderModal.js";
-const MobileSubmoduleNavigation = (props) => {
-    const { navItems = [], label, className } = props;
-    const [isShown, setIsShown] = useState(false);
-    const handleToggleNavigation = () => setIsShown(!isShown);
-    const hasNavItems = !isEmpty(navItems);
-    const classes = classNames('MobileSubmoduleNavigation', 'display-flex gap-10 align-items-center', 'padding-x-10', 'cursor-pointer', className);
-    const labelClasses = classNames(hasNavItems
-        ? 'text-size-12 text-color-dark line-height-14'
-        : 'text-size-16 line-height-16 text-color-darkest text-medium text-uppercase', 'width-100pct ellipsis-1');
-    return (_jsxs("div", { className: classes, onClick: handleToggleNavigation, children: [_jsxs("div", { className: 'flex-1-1 display-flex flex-column align-items-center width-0', children: [_jsx("div", { className: labelClasses, children: label }), _jsx("div", { className: 'text-medium width-100pct', children: navItems.map(navItem => (_jsx("div", { className: 'ellipsis-1', children: React.cloneElement(navItem.route, {
-                                className: 'text-size-16 line-height-16 text-color-darkest text-decoration-none',
-                                onClick: (event) => event.preventDefault(),
-                            }) }, navItem.key))) })] }), hasNavItems && (_jsx("div", { className: 'text-size-16 text-color-dark', children: _jsx("span", { className: 'rioglyph rioglyph-chevron-down' }) })), hasNavItems && (_jsx(MobileHeaderModal, { show: isShown, children: navItems.map(navItem => (_jsx("div", { className: 'margin-y-15 font-size-20', children: React.cloneElement(navItem.route, {
-                        className: 'text-size-20 text-color-darker',
-                    }) }, navItem.key))) }))] }));
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import o, { useState as g } from "react";
+import c from "classnames";
+import { isEmpty as u } from "es-toolkit/compat";
+import f from "./MobileHeaderModal.js";
+const z = (r) => {
+  const { navItems: s = [], label: n, className: d } = r, [l, m] = g(!1), h = () => m(!l), i = !u(s), p = c(
+    "MobileSubmoduleNavigation",
+    "display-flex gap-10 align-items-center",
+    "padding-x-10",
+    "cursor-pointer",
+    d
+  ), x = c(
+    i ? "text-size-12 text-color-dark line-height-14" : "text-size-16 line-height-16 text-color-darkest text-medium text-uppercase",
+    "width-100pct ellipsis-1"
+  );
+  return /* @__PURE__ */ a("div", { className: p, onClick: h, children: [
+    /* @__PURE__ */ a("div", { className: "flex-1-1 display-flex flex-column align-items-center width-0", children: [
+      /* @__PURE__ */ e("div", { className: x, children: n }),
+      /* @__PURE__ */ e("div", { className: "text-medium width-100pct", children: s.map((t) => /* @__PURE__ */ e("div", { className: "ellipsis-1", children: o.cloneElement(t.route, {
+        className: "text-size-16 line-height-16 text-color-darkest text-decoration-none",
+        onClick: (N) => N.preventDefault()
+      }) }, t.key)) })
+    ] }),
+    i && /* @__PURE__ */ e("div", { className: "text-size-16 text-color-dark", children: /* @__PURE__ */ e("span", { className: "rioglyph rioglyph-chevron-down" }) }),
+    i && /* @__PURE__ */ e(f, { show: l, children: s.map((t) => /* @__PURE__ */ e("div", { className: "margin-y-15 font-size-20", children: o.cloneElement(t.route, {
+      className: "text-size-20 text-color-darker"
+    }) }, t.key)) })
+  ] });
 };
-export default MobileSubmoduleNavigation;
+export {
+  z as default
+};
+//# sourceMappingURL=MobileSubmoduleNavigation.js.map

package/components/applicationHeader/MobileSubmoduleNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileSubmoduleNavigation.js","sources":["../../../src/components/applicationHeader/MobileSubmoduleNavigation.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classNames from 'classnames';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport MobileHeaderModal from './MobileHeaderModal';\nimport type { ModulePropType } from './ApplicationHeader';\n\nexport type MobileSubmoduleNavigationProps = {\n    label: React.ReactNode;\n    navItems?: ModulePropType[];\n    className?: string;\n};\n\nconst MobileSubmoduleNavigation = (props: MobileSubmoduleNavigationProps) => {\n    const { navItems = [], label, className } = props;\n\n    const [isShown, setIsShown] = useState(false);\n\n    const handleToggleNavigation = () => setIsShown(!isShown);\n\n    const hasNavItems = !isEmpty(navItems);\n\n    const classes = classNames(\n        'MobileSubmoduleNavigation',\n        'display-flex gap-10 align-items-center',\n        'padding-x-10',\n        'cursor-pointer',\n        className\n    );\n\n    const labelClasses = classNames(\n        hasNavItems\n            ? 'text-size-12 text-color-dark line-height-14'\n            : 'text-size-16 line-height-16 text-color-darkest text-medium text-uppercase',\n        'width-100pct ellipsis-1'\n    );\n\n    return (\n        <div className={classes} onClick={handleToggleNavigation}>\n            <div className='flex-1-1 display-flex flex-column align-items-center width-0'>\n                <div className={labelClasses}>{label}</div>\n                <div className='text-medium width-100pct'>\n                    {navItems.map(navItem => (\n                        <div key={navItem.key} className='ellipsis-1'>\n                            {React.cloneElement(navItem.route as React.ReactElement, {\n                                className: 'text-size-16 line-height-16 text-color-darkest text-decoration-none',\n                                onClick: (event: MouseEvent) => event.preventDefault(),\n                            })}\n                        </div>\n                    ))}\n                </div>\n            </div>\n            {hasNavItems && (\n                <div className='text-size-16 text-color-dark'>\n                    <span className='rioglyph rioglyph-chevron-down' />\n                </div>\n            )}\n            {hasNavItems && (\n                <MobileHeaderModal show={isShown}>\n                    {navItems.map(navItem => (\n                        <div key={navItem.key} className='margin-y-15 font-size-20'>\n                            {React.cloneElement(navItem.route as React.ReactElement, {\n                                className: 'text-size-20 text-color-darker',\n                            })}\n                        </div>\n                    ))}\n                </MobileHeaderModal>\n            )}\n        </div>\n    );\n};\n\nexport default MobileSubmoduleNavigation;\n"],"names":["MobileSubmoduleNavigation","props","navItems","label","className","isShown","setIsShown","useState","handleToggleNavigation","hasNavItems","isEmpty","classes","classNames","labelClasses","jsxs","jsx","navItem","React","event","MobileHeaderModal"],"mappings":";;;;;AAaA,MAAMA,IAA4B,CAACC,MAA0C;AACzE,QAAM,EAAE,UAAAC,IAAW,CAAA,GAAI,OAAAC,GAAO,WAAAC,MAAcH,GAEtC,CAACI,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAyB,MAAMF,EAAW,CAACD,CAAO,GAElDI,IAAc,CAACC,EAAQR,CAAQ,GAE/BS,IAAUC;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAR;AAAA,EAAA,GAGES,IAAeD;AAAA,IACjBH,IACM,gDACA;AAAA,IACN;AAAA,EAAA;AAGJ,SACI,gBAAAK,EAAC,OAAA,EAAI,WAAWH,GAAS,SAASH,GAC9B,UAAA;AAAA,IAAA,gBAAAM,EAAC,OAAA,EAAI,WAAU,gEACX,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWF,GAAe,UAAAV,GAAM;AAAA,MACrC,gBAAAY,EAAC,OAAA,EAAI,WAAU,4BACV,YAAS,IAAI,CAAAC,MACV,gBAAAD,EAAC,OAAA,EAAsB,WAAU,cAC5B,UAAAE,EAAM,aAAaD,EAAQ,OAA6B;AAAA,QACrD,WAAW;AAAA,QACX,SAAS,CAACE,MAAsBA,EAAM,eAAA;AAAA,MAAe,CACxD,KAJKF,EAAQ,GAKlB,CACH,EAAA,CACL;AAAA,IAAA,GACJ;AAAA,IACCP,uBACI,OAAA,EAAI,WAAU,gCACX,UAAA,gBAAAM,EAAC,QAAA,EAAK,WAAU,iCAAA,CAAiC,EAAA,CACrD;AAAA,IAEHN,KACG,gBAAAM,EAACI,GAAA,EAAkB,MAAMd,GACpB,UAAAH,EAAS,IAAI,CAAAc,MACV,gBAAAD,EAAC,SAAsB,WAAU,4BAC5B,UAAAE,EAAM,aAAaD,EAAQ,OAA6B;AAAA,MACrD,WAAW;AAAA,IAAA,CACd,KAHKA,EAAQ,GAIlB,CACH,EAAA,CACL;AAAA,EAAA,GAER;AAER;"}

package/components/applicationHeader/NavItems.d.ts

@@ -1,5 +1,5 @@
-import type React from 'react';
-import type { ModulePropType } from './ApplicationHeader';
+import { default as React } from 'react';
+import { ModulePropType } from './ApplicationHeader';
 export type NavItemsProps = {
     navItems?: ModulePropType[];
     containerWidth: number;