@eleventheye/asui 2.5.5 → 2.7.0

package/dist/asnavbar/ASNavBar.js

@@ -1,61 +1,62 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultNavBarStyleOptions = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const uuid_1 = require("uuid");
 const ASUI_types_1 = require("../apptypes/ASUI.types");
-const ASNavBarItem_1 = tslib_1.__importDefault(require("../asnavbar/ASNavBarItem"));
-const styles_1 = require("../asnavbar/styles");
 const astheme_1 = tslib_1.__importDefault(require("../astheme"));
-const INIT_VALUE = (0, uuid_1.v4)();
-const ASNavBar = ({ className = '', navItems = [], selectedItemId = '', onItemSelected = () => undefined, theme = astheme_1.default, size = ASUI_types_1.ComponentSize.Medium, options = {}, }) => {
-    const selectedItemIdRef = (0, react_1.useRef)(INIT_VALUE);
-    const navBarRef = (0, react_1.useRef)(null);
-    const navBarHighlightBoxRef = (0, react_1.useRef)(null);
-    const [selected, setSelected] = (0, react_1.useState)(selectedItemId);
-    const slideHighlightToSelectedItem = (selectedItemEl, itemId) => {
-        if (!navBarHighlightBoxRef.current || !navBarRef.current)
-            return;
-        const selectedElRect = selectedItemEl.getBoundingClientRect();
-        const parentRect = navBarRef.current.getBoundingClientRect();
-        const offsetToSelectedEl = selectedElRect.left - parentRect.left;
-        const selectedBox = navBarHighlightBoxRef.current;
-        const selectedBoxWidth = selectedElRect.width;
-        selectedBox.style.transform = `translateX(${offsetToSelectedEl}px)`;
-        selectedBox.style.width = `${selectedBoxWidth}px`;
-        selectedItemIdRef.current = itemId;
-        onItemSelected(itemId);
-    };
-    const locateTargetSelectedElement = (selectedId) => {
-        const selectedItemEl = document.getElementById(selectedId);
-        if (selectedItemEl) {
-            slideHighlightToSelectedItem(selectedItemEl, selectedId);
-            selectedItemIdRef.current = selectedId;
-            setSelected(selectedId);
-        }
-    };
+const screenSizeHelpers_1 = require("../asutils/screenSizeHelpers");
+const desktop_1 = tslib_1.__importDefault(require("./desktop"));
+const mobile_1 = tslib_1.__importDefault(require("./mobile"));
+const styles_1 = require("./styles");
+exports.defaultNavBarStyleOptions = {
+    $displayModeOverride: ASUI_types_1.DisplayMode.None,
+    $disableTransitionsBetweenDisplayModes: false,
+    $mobileBreakpoint: 768,
+    $hideNavArrowButtonsInDW: false,
+};
+const ASNavBar = ({ className = '', navItems = [], selectedItemId = '', onItemSelected = () => undefined, theme = astheme_1.default, size = ASUI_types_1.ComponentSize.Medium, styleOptions = { ...exports.defaultNavBarStyleOptions }, }) => {
+    const visitedCountRef = (0, react_1.useRef)(0);
+    const [navBarComponentId] = (0, react_1.useState)(`asnavbar-${(0, uuid_1.v4)()}`);
+    const [isMobile, setIsMobile] = (0, react_1.useState)(false);
+    const [selectedId, setSelectedId] = (0, react_1.useState)(selectedItemId);
+    const { $mobileBreakpoint, $disableTransitionsBetweenDisplayModes, $displayModeOverride, $hideNavArrowButtonsInDW } = styleOptions;
     (0, react_1.useEffect)(() => {
-        const isItemSameOrNull = selectedItemIdRef.current === selectedItemId || selectedItemId.length === 0;
-        if (!navBarHighlightBoxRef.current || !navBarRef.current || isItemSameOrNull)
-            return;
-        locateTargetSelectedElement(selectedItemId);
+        const screenSize = (0, screenSizeHelpers_1.getScreenSize)();
+        console.log(`Screen size detected: ${screenSize}`);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        setSelectedId(selectedItemId);
     }, [selectedItemId]);
     (0, react_1.useEffect)(() => {
-        if (selectedItemIdRef.current === INIT_VALUE && navItems && navItems.length > 0 && !selectedItemId) {
-            locateTargetSelectedElement(navItems[0].itemId);
+        if ($displayModeOverride !== ASUI_types_1.DisplayMode.None) {
+            setIsMobile($displayModeOverride === ASUI_types_1.DisplayMode.Mobile);
+            return;
+        }
+        if ($disableTransitionsBetweenDisplayModes) {
+            setIsMobile(window.innerWidth < $mobileBreakpoint);
+            return;
         }
-    }, [selectedItemId, navItems]);
-    const onItemSelectedHandler = (itemId, e) => {
-        const selectedItemEl = e.target;
-        if (selectedItemEl)
-            slideHighlightToSelectedItem(selectedItemEl, itemId);
-        selectedItemIdRef.current = itemId;
-        setSelected(itemId);
+        visitedCountRef.current += 1;
+        console.log(`Initializing display mode, visited count: ${visitedCountRef.current}`);
+        window.addEventListener('resize', () => {
+            const width = window.innerWidth;
+            setIsMobile(width < $mobileBreakpoint);
+        });
+        setIsMobile(window.innerWidth < $mobileBreakpoint);
+        return () => {
+            window.removeEventListener('resize', () => {
+                const width = window.innerWidth;
+                setIsMobile(width < $mobileBreakpoint);
+            });
+        };
+    }, [$disableTransitionsBetweenDisplayModes, $mobileBreakpoint, $displayModeOverride]);
+    const onItemSelectedHandler = (itemId) => {
+        setSelectedId(itemId);
         onItemSelected(itemId);
     };
-    const onItemResizedHandler = (itemId, item) => slideHighlightToSelectedItem(item, itemId);
-    const isSelected = (itemId) => selected === itemId;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.ASNavBarStyled, { ref: navBarRef, className: `${className} ${size}`, theme: theme, ...options, children: [(0, jsx_runtime_1.jsx)(styles_1.ASSelectedBoxStyled, { ref: navBarHighlightBoxRef, theme: theme }), navItems.map((item, index) => ((0, jsx_runtime_1.jsx)(ASNavBarItem_1.default, { theme: theme, itemId: item.itemId, selected: isSelected(item.itemId), displayText: item.displayText, icon: item.icon, onItemResized: onItemResizedHandler, onItemClick: onItemSelectedHandler }, `key_${index}_${item.itemId}`)))] }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarStyled, { id: navBarComponentId, theme: theme, ...styleOptions, children: isMobile ? ((0, jsx_runtime_1.jsx)(mobile_1.default, { id: `asnavbar-mw-${(0, uuid_1.v4)()}`, className: className, navItems: navItems, selectedItemId: selectedId, onItemSelected: onItemSelectedHandler, theme: theme, size: size, styleOptions: styleOptions })) : ((0, jsx_runtime_1.jsx)(desktop_1.default, { id: `asnavbar-dw-${(0, uuid_1.v4)()}`, className: className, navItems: navItems, selectedItemId: selectedId, onItemSelected: onItemSelectedHandler, theme: theme, size: size, styleOptions: styleOptions })) }));
 };
 exports.default = ASNavBar;

package/dist/asnavbar/ASNavBar.types.d.ts

@@ -1,5 +1,5 @@
 import { MouseEvent, PropsWithChildren } from 'react';
-import { ASComponentSize, ASStyleOptions, ASTheme } from '../apptypes';
+import { ASComponentSize, ASNavBarStyleOptions, ASTheme } from '../apptypes';
 export type ASNavBarItemType = {
     itemId: string;
     displayText: string;
@@ -14,18 +14,21 @@ export type ASNavBarItemProps = {
     displayText?: string;
     selected?: boolean;
     icon?: React.ReactNode;
+    itemIndex?: number;
     size?: ASComponentSize;
-    onItemClick?: (id: string, e: MouseEvent) => void;
+    title?: string;
+    onItemClick?: (e: MouseEvent, id: string, index: number) => void;
     onItemResized?: (id: string, element: HTMLDivElement) => void;
 };
 export type ASNavBarOwnProps = {
+    id?: string;
     className?: string;
     theme?: ASTheme;
     selectedItemId?: string;
     onItemSelected?: (itemId: string) => void;
     navItems?: ASNavBarItemType[];
     size?: ASComponentSize;
-    options?: ASStyleOptions;
+    styleOptions?: ASNavBarStyleOptions;
 };
 export type ASNavBarProps = PropsWithChildren<ASNavBarOwnProps>;
 //# sourceMappingURL=ASNavBar.types.d.ts.map

package/dist/asnavbar/ASNavBar.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ASNavBar.types.d.ts","sourceRoot":"","sources":["../../src/asnavbar/ASNavBar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEvE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClD,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;CAC/D,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"ASNavBar.types.d.ts","sourceRoot":"","sources":["../../src/asnavbar/ASNavBar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE7E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjE,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;CAC/D,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC"}

package/dist/asnavbar/desktop/ASNavBarDW.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ASNavBarProps } from '../../asnavbar/ASNavBar.types';
+declare const ASNavBarDW: React.FC<ASNavBarProps>;
+export default ASNavBarDW;
+//# sourceMappingURL=ASNavBarDW.d.ts.map

package/dist/asnavbar/desktop/ASNavBarDW.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ASNavBarDW.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/desktop/ASNavBarDW.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAI7F,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAQ9D,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA8HvC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/asnavbar/desktop/ASNavBarDW.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uuid_1 = require("uuid");
+const ASUI_types_1 = require("../../apptypes/ASUI.types");
+const ASNavBar_1 = require("../../asnavbar/ASNavBar");
+const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
+const navbararrowbuttons_1 = tslib_1.__importDefault(require("../navbararrowbuttons"));
+const navbaritem_1 = tslib_1.__importDefault(require("../navbaritem"));
+const styles_1 = require("./styles");
+const INIT_VALUE = (0, uuid_1.v4)();
+const ASNavBarDW = ({ id = `asnavbar-dw-${(0, uuid_1.v4)()}`, className = '', navItems = [], selectedItemId = '', onItemSelected = () => undefined, theme = astheme_1.default, size = ASUI_types_1.ComponentSize.Medium, styleOptions = { ...ASNavBar_1.defaultNavBarStyleOptions }, }) => {
+    const selectedItemIdRef = (0, react_1.useRef)(INIT_VALUE);
+    const navBarRef = (0, react_1.useRef)(null);
+    const navBarHighlightBoxRef = (0, react_1.useRef)(null);
+    const [selected, setSelected] = (0, react_1.useState)(selectedItemId);
+    const slideHighlightToSelectedItem = (selectedItemEl, itemId) => {
+        if (!navBarHighlightBoxRef.current || !navBarRef.current)
+            return;
+        const selectedElRect = selectedItemEl.getBoundingClientRect();
+        const parentRect = navBarRef.current.getBoundingClientRect();
+        const offsetToSelectedEl = selectedElRect.left - parentRect.left;
+        const selectedBox = navBarHighlightBoxRef.current;
+        const selectedBoxWidth = selectedElRect.width;
+        selectedBox.style.transform = `translateX(${offsetToSelectedEl}px)`;
+        selectedBox.style.width = `${selectedBoxWidth}px`;
+        selectedItemIdRef.current = itemId;
+        onItemSelected(itemId);
+        selectedItemEl.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+            inline: 'center',
+        });
+    };
+    const locateSelectedItemInDOM = (selectedId) => {
+        const selectedItemEl = document.getElementById(selectedId);
+        if (selectedItemEl) {
+            slideHighlightToSelectedItem(selectedItemEl, selectedId);
+            selectedItemIdRef.current = selectedId;
+            setSelected(selectedId);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        const isItemSameOrNull = selectedItemIdRef.current === selectedItemId || selectedItemId.length === 0;
+        if (!navBarHighlightBoxRef.current || !navBarRef.current || isItemSameOrNull)
+            return;
+        locateSelectedItemInDOM(selectedItemId);
+    }, [selectedItemId]);
+    (0, react_1.useEffect)(() => {
+        if (selectedItemIdRef.current === INIT_VALUE && navItems && navItems.length > 0 && !selectedItemId) {
+            locateSelectedItemInDOM(navItems[0].itemId);
+        }
+    }, [selectedItemId, navItems]);
+    const totalItemCount = (0, react_1.useMemo)(() => navItems.length, [navItems]);
+    const selectedIndex = (0, react_1.useMemo)(() => {
+        const index = navItems.findIndex((i) => i.itemId === selected);
+        return Math.max(index, 0);
+    }, [navItems, selected]);
+    const scrollToDirection = (0, react_1.useCallback)((e, direction) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (!navItems || navItems.length === 0)
+            return;
+        if (!navBarRef.current || !navBarHighlightBoxRef.current)
+            return;
+        if (direction === ASUI_types_1.ArrowButtonDirection.Left && selectedIndex <= 0)
+            return;
+        if (direction === ASUI_types_1.ArrowButtonDirection.Right && selectedIndex >= navItems.length - 1)
+            return;
+        const newSelectedIndex = direction === ASUI_types_1.ArrowButtonDirection.Left ? selectedIndex - 1 : selectedIndex + 1;
+        locateSelectedItemInDOM(navItems[newSelectedIndex].itemId);
+    }, [navItems, selectedIndex]);
+    const onItemSelectedHandler = (e, itemId) => {
+        const selectedItemEl = e.target;
+        if (selectedItemEl)
+            slideHighlightToSelectedItem(selectedItemEl, itemId);
+        selectedItemIdRef.current = itemId;
+        setSelected(itemId);
+        onItemSelected(itemId);
+    };
+    const onItemResizedHandler = (itemId, item) => slideHighlightToSelectedItem(item, itemId);
+    const isSelected = (itemId) => selected === itemId;
+    console.log(`What is inside styleOptions? ${styleOptions}`, styleOptions);
+    return ((0, jsx_runtime_1.jsxs)(styles_1.ASNavBarDWStyled, { id: id, ref: navBarRef, className: `${className} ${size}`, theme: theme, ...styleOptions, children: [(0, jsx_runtime_1.jsx)(styles_1.ASSelectedBoxStyled, { ref: navBarHighlightBoxRef, theme: theme }), (0, jsx_runtime_1.jsx)(styles_1.ASScrollContainerStyled, { children: navItems.map((item, index) => ((0, jsx_runtime_1.jsx)(navbaritem_1.default, { theme: theme, itemId: item.itemId, selected: isSelected(item.itemId), displayText: item.displayText, icon: item.icon, onItemResized: onItemResizedHandler, onItemClick: onItemSelectedHandler, size: size }, `key_${index}_${item.itemId}`))) }), (0, jsx_runtime_1.jsx)(navbararrowbuttons_1.default, { onArrowButtonClicked: scrollToDirection, className: styles_1.ASNavButtonsDWContainer, theme: theme, size: size, totalItemCount: totalItemCount, selectedIndex: selectedIndex, styleOptions: styleOptions })] }));
+};
+exports.default = ASNavBarDW;

package/dist/asnavbar/desktop/index.d.ts

@@ -0,0 +1,3 @@
+export type { ASNavBarItemType, ASNavBarOwnProps, ASNavBarProps } from '../ASNavBar.types';
+export { default } from './ASNavBarDW';
+//# sourceMappingURL=index.d.ts.map

package/dist/asnavbar/desktop/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/desktop/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC3F,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/asnavbar/desktop/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var ASNavBarDW_1 = require("./ASNavBarDW");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(ASNavBarDW_1).default; } });

package/dist/asnavbar/desktop/styles.d.ts

@@ -0,0 +1,37 @@
+import { ASStyleOptions, ASTheme } from '../../apptypes/ASUI.types';
+interface ASNavBarStyledProps {
+    theme: ASTheme;
+    $mobileMode?: boolean;
+    $gap?: number;
+    $maxWidth?: number;
+    $minWidth?: number;
+    $borderRadius?: number;
+    $padding?: string;
+}
+export declare const ASNavBarDWStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarStyledProps>> & string;
+interface ASNavBarSelectedBoxStyledProps {
+    theme: ASTheme;
+    $mobileMode?: boolean;
+    $height?: number;
+    $borderRadius?: number;
+}
+export declare const ASSelectedBoxStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, ASNavBarSelectedBoxStyledProps>> & string;
+interface ASNavBarItemStyledProps {
+    theme: ASTheme;
+    $mobileMode?: boolean;
+    $selected?: boolean;
+    $margin?: string;
+    $padding?: string;
+}
+export declare const ASNavBarItemStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarItemStyledProps>> & string;
+interface ASNavBarItemPaddingProps {
+    theme: ASTheme;
+    $mobileMode?: boolean;
+    $styleOptions?: ASStyleOptions | {};
+    $selected?: boolean;
+}
+export declare const ASNavBarItemPadding: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarItemPaddingProps>> & string;
+export declare const ASNavButtonsDWContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ASScrollContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarStyledProps>> & string;
+export {};
+//# sourceMappingURL=styles.d.ts.map

package/dist/asnavbar/desktop/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/desktop/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAGpE,UAAU,mBAAmB;IAC3B,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAsBD,eAAO,MAAM,gBAAgB,wPAoB5B,CAAC;AAEF,UAAU,8BAA8B;IACtC,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,mBAAmB,qQAa/B,CAAC;AAEF,UAAU,uBAAuB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AACD,eAAO,MAAM,kBAAkB,4PAuC9B,CAAC;AAEF,UAAU,wBAAwB;IAChC,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,cAAc,GAAG,EAAE,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;CAKrB;AAED,eAAO,MAAM,mBAAmB,6PAiB/B,CAAC;AAEF,eAAO,MAAM,uBAAuB,6NAInC,CAAC;AAEF,eAAO,MAAM,uBAAuB,wPAYnC,CAAC"}

package/dist/asnavbar/desktop/styles.js

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ASScrollContainerStyled = exports.ASNavButtonsDWContainer = exports.ASNavBarItemPadding = exports.ASNavBarItemStyled = exports.ASSelectedBoxStyled = exports.ASNavBarDWStyled = void 0;
+const tslib_1 = require("tslib");
+const styled_components_1 = tslib_1.__importStar(require("styled-components"));
+const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
+const dimensionsForSizes = (0, styled_components_1.css) `
+  &.ASSmall {
+    height: 30px;
+    font-size: 1.3rem;
+    font-weight: 400;
+  }
+
+  &.ASMedium {
+    height: 40px;
+    font-size: 1.7rem;
+    font-weight: 500;
+  }
+
+  &.ASLarge {
+    height: 50px;
+    font-size: 2.1rem;
+    font-weight: 600;
+  }
+`;
+exports.ASNavBarDWStyled = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  position: relative;
+  gap: ${({ $gap = 30 }) => $gap}px;
+  width: fit-content;
+  grid-row: 1;
+
+  min-width: ${({ $minWidth = 300 }) => $minWidth}px;
+  padding: ${({ $padding = '0 44px' }) => $padding};
+  border-radius: ${({ $borderRadius = 6 }) => $borderRadius}px;
+  background-color: ${({ theme }) => theme.navbar.navBarBackgroundColor};
+  box-shadow: ${({ theme }) => theme.navbar.navBarBoxShadow};
+  overflow: hidden;
+  overflow-x: overlay;
+
+  ${dimensionsForSizes}
+`;
+exports.ASSelectedBoxStyled = styled_components_1.default.span `
+  position: absolute;
+  height: 85%;
+  border-radius: ${({ $borderRadius = 4 }) => $borderRadius}px;
+  background-color: ${({ theme }) => theme.navbar.navBarSelectedBoxBackgroundColor};
+  z-index: 0;
+  left: 0;
+  transition: all 0.3s ease-in-out 0.1s allow-discrete;
+
+  @starting-style {
+    z-index: 0;
+    left: 0;
+  }
+`;
+exports.ASNavBarItemStyled = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  transition: color 0.3s ease-in-out 0.1s;
+  text-transform: uppercase;
+  margin: ${({ $margin = '4px 0' }) => $margin};
+  padding: ${({ $padding = '0 8px' }) => $padding};
+  z-index: 1;
+  white-space: nowrap;
+  user-select: none;
+
+  ${dimensionsForSizes}
+
+  ${({ $selected = false, theme = astheme_1.default }) => $selected
+    ? `
+    transition: all 0.3s ease-in-out 0.2s;
+    color: ${theme.navbar.navBarItemColorSelected};
+  `
+    : `color: ${theme.navbar.navBarItemColor};`}
+
+  @media (hover) {
+    &:hover {
+      ${({ $selected = false, theme = astheme_1.default }) => $selected
+    ? `color: ${theme.navbar.navBarItemColorSelected};`
+    : `cursor: pointer;
+        transition: color 0.3s ease-in-out;
+        color: ${theme.navbar.navBarItemColorHover};
+        & > div > div > svg > path {
+          stroke-width: 0.4;
+          stroke: ${theme.navbar.navBarItemColorHover};
+        }
+      `}
+    }
+  }
+`;
+exports.ASNavBarItemPadding = styled_components_1.default.div `
+  padding: 0 4px;
+  pointer-events: none;
+  user-select: none;
+  ${({ $selected = false, theme = astheme_1.default }) => $selected
+    ? `
+      & > div > svg > path {
+        stroke-width: 0.4;
+        stroke: ${theme.navbar.navBarItemColorSelected};
+      }`
+    : `
+      & > div > svg > path {
+        stroke-width: 0.4;
+        stroke: ${theme.navbar.navBarItemColor};
+      }
+  `};
+`;
+exports.ASNavButtonsDWContainer = styled_components_1.default.div `
+  position: fixed;
+  max-width: inherit;
+  height: inherit;
+`;
+exports.ASScrollContainerStyled = styled_components_1.default.div `
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  position: relative;
+  overflow: hidden;
+  gap: 16px;
+  width: 100%;
+  @supports (width: -webkit-fill-available) {
+    width: -webkit-fill-available;
+  }
+`;

package/dist/asnavbar/mobile/ASNavBarMW.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ASNavBarProps } from '../ASNavBar.types';
+declare const ASNavBarMW: React.FC<ASNavBarProps>;
+export default ASNavBarMW;
+//# sourceMappingURL=ASNavBarMW.d.ts.map

package/dist/asnavbar/mobile/ASNavBarMW.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ASNavBarMW.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/mobile/ASNavBarMW.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoE,MAAM,OAAO,CAAC;AAMzF,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAalD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA0KvC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/asnavbar/mobile/ASNavBarMW.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uuid_1 = require("uuid");
+const ASUI_types_1 = require("../../apptypes/ASUI.types");
+const asmodal_1 = tslib_1.__importDefault(require("../../asmodal"));
+const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
+const icons_1 = require("../../icons");
+const navbarpickpanel_1 = tslib_1.__importDefault(require("../navbarpickpanel"));
+const styles_1 = require("./styles");
+const INIT_VALUE = (0, uuid_1.v4)();
+const ASNavBarMW = ({ id = `asnavbar-mw-${(0, uuid_1.v4)()}`, className = '', navItems = [], selectedItemId = '', onItemSelected = () => undefined, theme = astheme_1.default, size = ASUI_types_1.ComponentSize.Medium, styleOptions: options = {}, }) => {
+    const scrollContainerRef = (0, react_1.useRef)(null);
+    const selectedItemIdRef = (0, react_1.useRef)(INIT_VALUE);
+    const navBarRef = (0, react_1.useRef)(null);
+    const navBarHighlightBoxRef = (0, react_1.useRef)(null);
+    const [selected, setSelected] = (0, react_1.useState)(selectedItemId);
+    const [showSelectionPanel, setShowSelectionPanel] = (0, react_1.useState)(false);
+    const isSelected = (itemId) => selected === itemId;
+    const selectedScrolledIntoViewItem = (offset) => {
+        if (scrollContainerRef.current) {
+            scrollContainerRef.current.scrollLeft = offset > navItems.length * 200 ? navItems.length * 200 : offset;
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (selectedItemId !== '') {
+            const index = navItems.findIndex((item) => item.itemId === selectedItemId);
+            if (index > -1) {
+                setSelected(selectedItemId);
+                selectedScrolledIntoViewItem(index * 200);
+            }
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const isItemSameOrNull = selectedItemIdRef.current === selectedItemId || selectedItemId.length === 0;
+        if (!navBarHighlightBoxRef.current || !navBarRef.current || isItemSameOrNull)
+            return;
+        setSelected(selectedItemId);
+    }, [selectedItemId]);
+    (0, react_1.useEffect)(() => {
+        if (selectedItemIdRef.current === INIT_VALUE && navItems && navItems.length > 0 && selectedItemId === '') {
+            setSelected(navItems[0].itemId);
+        }
+    }, [navItems]);
+    (0, react_1.useEffect)(() => {
+        if (selectedItemIdRef.current === selected)
+            return;
+        console.log(`🟢 NEW ITEM SELECTED ${selected}`);
+        selectedItemIdRef.current = selected;
+        onItemSelected(selected);
+    }, [selected]);
+    const selectPrev = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (scrollContainerRef.current) {
+            const offset = scrollContainerRef.current.scrollLeft - 200;
+            selectedScrolledIntoViewItem(offset);
+        }
+        return false;
+    };
+    const selectNext = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (scrollContainerRef.current) {
+            const offset = scrollContainerRef.current.scrollLeft + 200;
+            selectedScrolledIntoViewItem(offset);
+        }
+        return false;
+    };
+    const onNavBarItemPickedHandler = (itemId, deltaIndex) => {
+        if (selectedItemIdRef.current !== itemId && scrollContainerRef.current) {
+            setShowSelectionPanel(false);
+            const offset = scrollContainerRef.current.scrollLeft + 200 * deltaIndex;
+            selectedScrolledIntoViewItem(offset);
+        }
+    };
+    const selectedIndex = (0, react_1.useMemo)(() => {
+        if (selected) {
+            const index = navItems.findIndex((item) => item.itemId === selected);
+            return index >= 0 ? index : 0;
+        }
+        return 0;
+    }, [navItems, selected]);
+    const onScrollEndedHandler = (e) => {
+        if (scrollContainerRef.current) {
+            const offset = scrollContainerRef.current.scrollLeft;
+            const itemIndex = Math.round(offset / 200);
+            if (itemIndex >= 0 && itemIndex < navItems?.length) {
+                const itemId = navItems[itemIndex].itemId;
+                setSelected(itemId);
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(styles_1.ASNavBarMWStyled, { id: id, ref: navBarRef, className: `${className} ${size}`, theme: theme, ...options, children: [(0, jsx_runtime_1.jsx)(styles_1.ASSelectedBoxMWStyled, { ref: navBarHighlightBoxRef, theme: theme }), (0, jsx_runtime_1.jsx)(styles_1.ScrollableNavBarItems, { id: "ScrollableNavBarItems", ref: scrollContainerRef, onScrollEnd: onScrollEndedHandler, children: navItems.map((item, index) => ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarItemMWStyled, { theme: theme, itemId: item.itemId, selected: isSelected(item.itemId), displayText: item.displayText, icon: item.icon, size: size, title: item.displayText, onItemClick: () => setShowSelectionPanel(true) }, `key_${index}_${item.itemId}`))) }), (0, jsx_runtime_1.jsxs)(styles_1.NavButtonsContainer, { children: [(0, jsx_runtime_1.jsx)(styles_1.ASIconButtonStyled, { role: "button", icon: icons_1.ArrowLeftIcon, onMouseOver: (e) => { }, onClick: selectPrev, theme: theme, size: size, disabled: selectedIndex <= 0, id: "LeftButtonId", iconSize: size === ASUI_types_1.ComponentSize.Large ? 32 : size === ASUI_types_1.ComponentSize.Medium ? 28 : 24, fillColor: theme.button.buttonIconColor }), (0, jsx_runtime_1.jsx)(styles_1.ASIconButtonStyled, { icon: icons_1.ArrowRightIcon, id: "RightButtonId", iconSize: size === ASUI_types_1.ComponentSize.Large ? 32 : size === ASUI_types_1.ComponentSize.Medium ? 28 : 24, size: size, fillColor: theme.button.buttonIconColor, disabled: selectedIndex >= navItems.length - 1, onClick: selectNext })] }), (0, jsx_runtime_1.jsx)(asmodal_1.default, { isOpen: showSelectionPanel, onBackdropClick: () => setShowSelectionPanel(false), className: className, children: (0, jsx_runtime_1.jsx)(navbarpickpanel_1.default, { theme: theme, size: size, className: className, navItems: navItems, selectedId: selected, selectedIndex: selectedIndex, onItemSelected: onNavBarItemPickedHandler }) })] }));
+};
+exports.default = ASNavBarMW;

package/dist/asnavbar/mobile/index.d.ts

@@ -0,0 +1,3 @@
+export type { ASNavBarItemType, ASNavBarOwnProps, ASNavBarProps } from '../ASNavBar.types';
+export { default } from './ASNavBarMW';
+//# sourceMappingURL=index.d.ts.map

package/dist/asnavbar/mobile/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/mobile/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC3F,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/asnavbar/mobile/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var ASNavBarMW_1 = require("./ASNavBarMW");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(ASNavBarMW_1).default; } });

package/dist/asnavbar/mobile/styles.d.ts

@@ -0,0 +1,59 @@
+import { ASComponentSize, ASTheme } from '../../apptypes/ASUI.types';
+interface ASNavBarIconButtonStyledProps {
+    theme: ASTheme;
+    $mobileMode?: boolean;
+    $gap?: number;
+    $maxWidth?: number;
+    $borderRadius?: number;
+    $padding?: string;
+    size?: ASComponentSize;
+}
+export declare const ASIconButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<{
+    className?: string;
+    text?: string;
+    selected?: boolean;
+    toggle?: boolean;
+    size?: ASComponentSize;
+    iconSize?: number;
+    theme?: ASTheme;
+    paddingSize?: import("../../apptypes/ASUI.types").ASPaddingSize;
+    isLoading?: boolean;
+    icon: import("react").FC<import("react").PropsWithChildren<import("../../icons").IconProps>>;
+} & import("../../icons").IconProps & Omit<import("react").HTMLProps<HTMLDivElement>, "size"> & {
+    children?: import("react").ReactNode | undefined;
+}, ASNavBarIconButtonStyledProps>> & string & Omit<import("react").FC<import("../..").ASIconButtonProps>, keyof import("react").Component<any, {}, any>>;
+export declare const NavControlLeftButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../../icons").IconProps, never>> & string & Omit<import("react").FC<import("../../icons").IconProps>, keyof import("react").Component<any, {}, any>>;
+export declare const NavControlRightButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../../icons").IconProps, never>> & string & Omit<import("react").FC<import("../../icons").IconProps>, keyof import("react").Component<any, {}, any>>;
+interface ASNavBarSelectedBoxStyledProps {
+    theme: ASTheme;
+    $mobileMode?: boolean;
+    $height?: number;
+    $borderRadius?: number;
+}
+export declare const ASSelectedBoxMWStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, ASNavBarSelectedBoxStyledProps>> & string;
+interface ASNavBarStyledProps {
+    theme: ASTheme;
+    $mobileMode?: boolean;
+    $gap?: number;
+    $maxWidth?: number;
+    $borderRadius?: number;
+    $padding?: string;
+}
+export declare const NavButtonsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarStyledProps>> & string;
+interface ASNavBarItemStyledProps {
+    theme: ASTheme;
+    $mobileMode?: boolean;
+    $selected?: boolean;
+    $margin?: string;
+    $padding?: string;
+}
+export declare const ASNavBarItemMWStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../ASNavBar.types").ASNavBarItemProps, ASNavBarItemStyledProps>> & string & Omit<import("react").FC<import("../ASNavBar.types").ASNavBarItemProps>, keyof import("react").Component<any, {}, any>>;
+export declare const ScrollableNavBarItems: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ASNavBarMWStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarStyledProps>> & string;
+interface ASNavBarItemPaddingProps {
+    theme: ASTheme;
+    $selected?: boolean;
+}
+export declare const ASNavBarItemPadding: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarItemPaddingProps>> & string;
+export {};
+//# sourceMappingURL=styles.d.ts.map

package/dist/asnavbar/mobile/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/mobile/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAiB,MAAM,2BAA2B,CAAC;AA2BpF,UAAU,6BAA6B;IACrC,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;wJAM9B,CAAC;AAEF,eAAO,MAAM,oBAAoB,sQAQhC,CAAC;AACF,eAAO,MAAM,qBAAqB,sQASjC,CAAC;AAEF,UAAU,8BAA8B;IACtC,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AACD,eAAO,MAAM,qBAAqB,qQAgBjC,CAAC;AAEF,UAAU,mBAAmB;IAC3B,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AACD,eAAO,MAAM,mBAAmB,wPAgC/B,CAAC;AAEF,UAAU,uBAAuB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AACD,eAAO,MAAM,oBAAoB,iUAuDhC,CAAC;AAEF,eAAO,MAAM,qBAAqB,6NA0BjC,CAAC;AAEF,eAAO,MAAM,gBAAgB,wPA4C5B,CAAC;AAEF,UAAU,wBAAwB;IAChC,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,mBAAmB,6PAiB/B,CAAC"}