@servicetitan/navigation 10.6.1 → 11.0.0-canary.237.0c461af.0

package/dist/components/titan-layout/layout-sidebar.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';
+import SvgClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';
+import SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse.svg';
+import SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';
+import classNames from 'classnames';
+import { Children, Fragment, isValidElement, useCallback, } from 'react';
+import { getCounterTag, getSubmenuGroupTag } from '../../utils/side-nav';
+import { LayoutPlacementContext, useTitanLayoutContext } from './layout-context';
+import { InternalSideNavigationGroup, InternalSideNavigationGroupLink, InternalSideNavigationLink, } from './layout-sidebar-links-internal';
+import * as Styles from './layout-sidebar.module.less';
+import { withTooltip } from './with-tooltip';
+export const LayoutSidebar = ({ className, mobile, barExpanded, submenuExpanded, onBarExpandChange, onSubmenuExpandChange, mainItems, top, bottom, navigationComponent, }) => {
+    const handleClick = (e) => {
+        e.stopPropagation();
+    };
+    return (_jsx(LayoutPlacementContext.Provider, { value: "side", children: _jsxs("div", { className: classNames(Styles.nav, mobile && Styles.navDrawer, mobile && barExpanded && Styles.navDrawerOpened, !mobile && (barExpanded ? Styles.navWide : Styles.navSlim), className), "data-cy": "side-navigation", onClick: handleClick, children: [_jsxs(ThemeProvider, { mode: "dark", className: Styles.navMain, children: [mobile && (_jsx("div", { className: Styles.navCloseWrapper, children: _jsx("div", { className: Styles.navClose, onClick: () => onBarExpandChange(false), children: _jsx(Icon, { svg: SvgClose, size: "large" }) }) })), !!(top === null || top === void 0 ? void 0 : top.length) && _jsx(SidebarTop, { children: top }), _jsx("div", { "data-cy": "navigation-items", children: mainItems === null || mainItems === void 0 ? void 0 : mainItems.map(item => item.submenu ? (_jsx(SideNavigationGroupItem, { barExpanded: barExpanded, submenuExpanded: !!item.id && submenuExpanded === item.id, onSubmenuExpand: onSubmenuExpandChange, navigationComponent: navigationComponent, ...item }, item.id)) : (_jsx(InternalSideNavigationLink, { submenuExpanded: undefined, navigationComponent: navigationComponent, ...item, tag: getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag)) }, item.id))) }), !!bottom && _jsx(SidebarBottom, { children: bottom })] }), !mobile && (_jsxs("div", { className: Styles.navFooter, children: [_jsx("div", { className: Styles.divider }), _jsx("div", { className: Styles.toggleWrapper, children: _jsx(SideNavigationOptionsToggle, { appearance: barExpanded ? 'collapse-button' : 'expand', onExpandedChange: () => onBarExpandChange(!barExpanded) }) })] }))] }) }));
+};
+LayoutSidebar.displayName = 'LayoutSidebar';
+/** Side Navigation options toggle */
+const SideNavigationOptionsToggle = ({ appearance, onExpandedChange }) => withTooltip(_jsx("div", { "data-cy": "navigation-left-options", "data-pendo": "navigation-left-options", className: classNames(Styles.toggle), onClick: () => onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(appearance === 'expand'), children: _jsxs("div", { className: Styles.toggleContent, children: [_jsx("div", { className: Styles.toggleIconWrapper, children: _jsx(Icon, { className: Styles.toggleIcon, svg: appearance === 'expand' ? SvgExpand : SvgCollapse }) }), appearance === 'collapse-button' && (_jsx("span", { className: Styles.toggleText, children: "Collapse Menu" }))] }) }), appearance === 'expand'
+    ? 'Expand Menu'
+    : appearance === 'collapse'
+        ? 'Collapse Menu'
+        : undefined, 'right');
+/** Side Navigation menu item */
+const SideNavigationGroupItem = ({ onSubmenuExpand, barExpanded, submenuExpanded, ...props }) => {
+    var _a, _b, _c, _d;
+    const onExpandToggle = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (props.id) {
+            onSubmenuExpand === null || onSubmenuExpand === void 0 ? void 0 : onSubmenuExpand(props.id, !submenuExpanded);
+        }
+    }, [props.id, submenuExpanded, onSubmenuExpand]);
+    const { sidebar: { styles: { popoverContent }, }, } = useTitanLayoutContext();
+    const tag = getSubmenuGroupTag(props.submenu, getCounterTag(props.counter, props.tag));
+    return barExpanded ? (_jsx(InternalSideNavigationGroup, { ...props, submenuExpanded: submenuExpanded, onExpandToggle: onExpandToggle, tag: tag, children: _jsx(SideNavigationGroupContent, { groups: (_b = (_a = props.submenu) === null || _a === void 0 ? void 0 : _a.groups) !== null && _b !== void 0 ? _b : [], navigationComponent: props.navigationComponent }) })) : (_jsxs(Popover, { placement: "right-start", openOnHover: true, delay: 500, children: [_jsx(Popover.Trigger, { children: (triggerProps) => (_jsx("div", { ...triggerProps, children: _jsx(InternalSideNavigationLink, { ...props, submenuExpanded: undefined, tag: tag }) })) }), _jsx(Popover.Content, { style: popoverContent, className: "z-global-nav-i", children: _jsxs("div", { className: Styles.submenuPopover, children: [_jsx(Text, { variant: "headline", el: "h4", size: "small", className: "c-white m-b-half-i m-t-1", children: props.title }), _jsx(SideNavigationGroupContent, { groups: (_d = (_c = props.submenu) === null || _c === void 0 ? void 0 : _c.groups) !== null && _d !== void 0 ? _d : [], navigationComponent: props.navigationComponent })] }) })] }));
+};
+const SideNavigationGroupContent = ({ groups, navigationComponent, }) => {
+    return (_jsx(Fragment, { children: groups.reduce((out, group, index) => {
+            var _a, _b;
+            if (!group.links.length) {
+                return out;
+            }
+            const title = (_b = (_a = group.title) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
+            /* eslint-disable react/no-array-index-key */
+            out.push(_jsx(Text, { variant: "eyebrow", className: classNames(Styles.submenuGroupHeader, {
+                    [Styles.submenuGroupHeaderEmpty]: !title,
+                }), children: title }, `:group:${index}:title`));
+            out.push(...group.links.map((link, index) => (_jsx(InternalSideNavigationGroupLink, { ...link, navigationComponent: navigationComponent }, `:${link.id}:${index}`))));
+            /* eslint-enable react/no-array-index-key */
+            return out;
+        }, []) }));
+};
+function SidebarTop({ children }) {
+    const list = Children.map(children, child => {
+        return child && isValidElement(child) ? child : null;
+    });
+    return (list === null || list === void 0 ? void 0 : list.length) ? (_jsxs(ThemeProvider, { mode: "dark", className: Styles.navTop, "data-cy": "navigation-items-top", children: [list, _jsx("div", { className: Styles.divider })] })) : null;
+}
+function SidebarBottom({ children }) {
+    return (_jsxs(ThemeProvider, { mode: "dark", className: Styles.navBottom, "data-cy": "navigation-items-bottom", children: [_jsx("div", { className: Styles.divider }), children] }));
+}
+//# sourceMappingURL=layout-sidebar.js.map

package/dist/components/titan-layout/layout-sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-sidebar.js","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"names":[],"mappings":"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"}

package/dist/components/titan-layout/layout-sidebar.module.less

@@ -0,0 +1,516 @@
+/* stylelint-disable no-descending-specificity */
+@import (reference) '@servicetitan/tokens/core/tokens.less';
+
+@text-color: var(--colorsTextInverted, @color-white);
+@text-color-active: var(--colorsTextPrimarySubdued, @color-blue-300);
+@border-color: var(--colorsTextOnGrey, @color-neutral-200);
+@bg-color: #0f1d26;
+@bg-color-hover: rgba(255, 255, 255, 0.08);
+@bg-color-active: rgba(120, 187, 250, 0.2);
+
+.nav {
+    background-color: @bg-color;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+// mobile version
+.nav-drawer {
+    display: none;
+    position: fixed;
+    max-width: 400px;
+    width: 0;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 991;
+
+    .nav-main {
+        padding-left: @spacing-2;
+        padding-right: @spacing-2;
+    }
+    .nav-close-wrapper {
+        display: flex;
+        justify-content: flex-end;
+        margin-right: -@spacing-2;
+
+        .nav-close {
+            padding-top: @spacing-2;
+            padding-left: @spacing-2;
+            padding-right: @spacing-2;
+        }
+    }
+
+    .nav-item {
+        margin-bottom: @spacing-half;
+    }
+    .nav-top {
+        margin-bottom: @spacing-half;
+    }
+    .nav-bottom {
+        .divider {
+            margin-bottom: @spacing-half;
+        }
+    }
+
+    .submenu {
+        .submenu-item {
+            margin-bottom: @spacing-half;
+        }
+    }
+}
+
+// mobile version opened
+.nav-drawer-opened {
+    display: flex;
+    width: 90vw;
+}
+
+@media only screen and (min-width: 361px) {
+    width: 85vw;
+}
+@media only screen and (min-width: 481px) {
+    width: 80vw;
+}
+
+// desktop version collapsed
+.nav-slim {
+    width: 64px;
+
+    .toggle {
+        width: 64px;
+        margin-top: @spacing-1;
+        margin-bottom: 12px;
+        display: flex;
+        justify-content: center;
+
+        .toggle-icon-wrapper {
+            padding-left: @spacing-half;
+            padding-right: @spacing-half;
+        }
+    }
+
+    .nav-item {
+        flex-direction: column;
+        width: 64px;
+        overflow-x: hidden;
+        padding-top: @spacing-1;
+
+        &:not(:first-child) {
+            margin-top: @spacing-half;
+        }
+
+        .nav-item-counter[data-anv][data-anv] {
+            position: absolute;
+            right: 0;
+            top: 4px;
+            z-index: auto;
+
+            &.nav-item-counter-long {
+                right: 2px;
+            }
+        }
+
+        .nav-item-icon-wrapper {
+            flex: 1;
+            padding: @spacing-half;
+        }
+
+        .nav-item-text-expanded {
+            display: none;
+        }
+        .nav-item-text-collapsed {
+            font-family: @base-font-family;
+            font-size: 11px;
+            line-height: 11px;
+            margin: 2px @spacing-half @spacing-0;
+            text-align: center;
+        }
+
+        .nav-item-text-collapsed.nav-item-text-small {
+            font-size: 10.5px;
+        }
+    }
+
+    .nav-top .divider {
+        margin-top: @spacing-1;
+    }
+}
+
+// desktop version expanded
+.nav-wide {
+    width: var(--nav-offset-left);
+
+    .toggle {
+        .toggle-content {
+            margin: @spacing-2;
+
+            .toggle-icon-wrapper {
+                padding-left: @spacing-half;
+                padding-right: @spacing-half;
+            }
+
+            .toggle-text {
+                padding-left: @spacing-0 !important;
+            }
+        }
+    }
+
+    .nav-top .divider {
+        margin-top: @spacing-1;
+        margin-bottom: @spacing-1;
+    }
+
+    .nav-main {
+        padding-top: @spacing-1;
+    }
+}
+
+.nav-drawer,
+.nav-wide {
+    .nav-item {
+        flex-direction: row;
+        margin-left: @spacing-1;
+        margin-right: @spacing-1;
+
+        .nav-item-icon-wrapper {
+            flex: 1;
+            padding: @spacing-1 @spacing-half;
+        }
+
+        .nav-item-text-expanded {
+            font-family: @base-font-family;
+            font-size: @typescale-3;
+            padding-left: @spacing-1;
+            flex: 1;
+        }
+
+        .nav-item-text-collapsed {
+            display: none;
+        }
+
+        .nav-item-counter[data-anv][data-anv] {
+            margin-right: @spacing-1;
+            position: relative;
+            transform: unset;
+        }
+    }
+}
+.divider {
+    border-top: 1px solid @border-color;
+}
+
+.nav-main {
+    position: relative;
+    overflow-y: auto;
+    padding-bottom: @spacing-1;
+    flex-grow: 1;
+    flex-basis: 0;
+
+    &::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+    }
+}
+
+.nav-top {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.nav-bottom {
+    display: flex;
+    flex-direction: column;
+}
+
+.nav-footer {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    background-color: @bg-color;
+
+    .toggle-wrapper {
+        display: block;
+
+        .toggle {
+            font-family: @base-font-family;
+            color: @text-color;
+            position: relative;
+            cursor: pointer;
+            outline: none;
+
+            &:hover {
+                .toggle-content {
+                    background-color: @bg-color-hover;
+                }
+            }
+
+            .toggle-content {
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+                flex-wrap: nowrap;
+                text-wrap: nowrap;
+                height: 32px;
+
+                border-radius: @border-radius-2;
+            }
+
+            .toggle-icon-wrapper {
+                height: 24px;
+                width: 24px;
+
+                .toggle-icon[data-anv][data-anv] > svg {
+                    height: 24px;
+                    width: 24px;
+                    color: @text-color;
+                }
+            }
+
+            .toggle-text {
+                font-family: @base-font-family;
+                font-size: @typescale-3;
+                flex: 1;
+            }
+        }
+    }
+}
+
+.nav-item {
+    font-family: @base-font-family;
+    color: @text-color;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    outline: none;
+    overflow: hidden;
+
+    .nav-item-icon-wrapper {
+        border-radius: @border-radius-2;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-wrap: nowrap;
+        text-wrap: nowrap;
+        position: relative;
+    }
+
+    &.nav-item-active {
+        color: @text-color-active;
+
+        .nav-item-icon-wrapper {
+            background-color: @bg-color-active;
+        }
+    }
+
+    &.nav-item-icon-switch {
+        &.nav-item-active {
+            .nav-icon-inactive[data-anv][data-anv] {
+                display: none;
+            }
+            .nav-icon-active[data-anv][data-anv] {
+                display: block;
+            }
+        }
+        &:not(.nav-item-active) {
+            .nav-icon-inactive[data-anv][data-anv] {
+                display: block;
+            }
+            .nav-icon-active[data-anv][data-anv] {
+                display: none;
+            }
+        }
+    }
+
+    .nav-item-counter {
+        min-width: 12px !important;
+        min-height: 12px !important;
+    }
+
+    .nav-item-group-toggle-wrapper {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .nav-item-group-toggle[data-anv][data-anv] {
+            color: inherit;
+            font-weight: @font-weight-semibold;
+        }
+
+        .nav-item-group-toggle-click {
+            position: absolute;
+            left: -@spacing-2;
+            right: -@spacing-half;
+            top: -@spacing-1;
+            bottom: -@spacing-1;
+        }
+    }
+
+    .nav-icon[data-anv][data-anv] {
+        height: 24px;
+        width: 24px;
+        color: inherit;
+
+        & > svg {
+            height: 24px;
+            width: 24px;
+        }
+    }
+}
+
+.nav-link {
+    cursor: pointer;
+
+    &:hover:not(.nav-item-active) .nav-item-icon-wrapper {
+        background-color: @bg-color-hover;
+    }
+}
+.nav-group-wrapper {
+    .nav-group-item {
+        position: relative;
+    }
+
+    .submenu-wrapper:not(.submenu-wrapper-collapsed) {
+        max-height: 2000px;
+        transition: max-height 0.7s ease-in-out;
+    }
+}
+
+.submenu-wrapper {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height unset;
+}
+
+.submenu {
+    margin-left: @spacing-3;
+
+    padding-left: @spacing-1;
+    padding-right: @spacing-1;
+    margin-bottom: @spacing-1;
+    position: relative;
+    font-family: @base-font-family;
+
+    .submenu-group-header[data-anv][data-anv] {
+        padding-top: @spacing-2;
+        padding-bottom: @spacing-half;
+    }
+    .submenu-group-header.submenu-group-header-empty[data-anv][data-anv] {
+        padding-top: @spacing-1;
+    }
+
+    .submenu-item {
+        padding: @spacing-1;
+    }
+
+    .submenu-link-active {
+        position: relative;
+    }
+
+    .submenu-link-active:before {
+        content: '';
+        position: absolute;
+        background-color: @text-color-active;
+        width: 3px;
+        top: @spacing-1;
+        bottom: @spacing-1;
+        left: -12px;
+    }
+
+    .submenu-item:before:not(.submenu-link-active) {
+        background-color: @bg-color-hover;
+    }
+
+    .divider + .divider {
+        display: none;
+    }
+
+    .divider:last-child {
+        display: none;
+    }
+
+    > *,
+    > *[data-anv][data-anv] {
+        border-left: 3px solid transparent;
+        padding-left: @spacing-1;
+    }
+
+    > *:last-child {
+        margin-bottom: @spacing-0;
+    }
+}
+
+.submenu-popover {
+    margin-left: -@spacing-1;
+    margin-right: -@spacing-1;
+    min-width: 240px;
+
+    .submenu-group-header[data-anv][data-anv] {
+        margin-top: @spacing-2;
+        padding-bottom: @spacing-half;
+    }
+
+    .submenu-group-header.submenu-group-header-empty[data-anv][data-anv] {
+        margin-top: @spacing-1;
+    }
+
+    .submenu-item {
+        padding-top: @spacing-1;
+        padding-bottom: @spacing-1;
+    }
+
+    .submenu-link-active {
+        background-color: @bg-color-active;
+    }
+    .submenu-link:hover:not(.submenu-link-active) {
+        background-color: @bg-color-hover;
+    }
+
+    > *,
+    > *[data-anv][data-anv] {
+        padding-left: @spacing-1;
+        padding-right: @spacing-1;
+    }
+}
+
+.submenu,
+.submenu-popover {
+    display: flex;
+    flex-direction: column;
+
+    .submenu-group-header[data-anv][data-anv] {
+        color: @color-neutral-70;
+    }
+
+    .submenu-item {
+        color: @text-color;
+        font-size: @typescale-2;
+        border-radius: @border-radius-2;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .submenu-link {
+        cursor: pointer;
+    }
+
+    .submenu-link-active {
+        color: @text-color-active;
+    }
+
+    .submenu-link-counter {
+        position: relative !important;
+        transform: unset !important;
+    }
+
+    .submenu-link:hover:not(.submenu-link-active) {
+        background-color: @bg-color-hover;
+    }
+}

package/dist/components/titan-layout/titan-layout.d.ts

@@ -0,0 +1,38 @@
+import { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';
+import { NavigationItemData } from '../../utils/navigation';
+import { NavLinkComponentProps } from '../../utils/navigation-context';
+import { TitanLayoutState } from './interface';
+import { TitanLayoutLogoProps } from './layout-logo';
+import { TitanLayoutSidebarLink, TitanLayoutSidebarTrigger } from './layout-sidebar-links';
+type TitanLayoutChild = ReactElement<TitanLayoutContentProps> | ReactElement<TitanLayoutLogoProps>;
+export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {
+    empty?: boolean;
+    appearance?: 'legacy' | 'anvil1' | 'anvil2';
+    /** component used for navigation */
+    navigationComponent?: FC<NavLinkComponentProps>;
+    /** data for main navigation links */
+    navigationMainItems?: NavigationItemData[];
+    /** layout's content */
+    children?: TitanLayoutChild | TitanLayoutChild[];
+    state?: TitanLayoutState;
+    onStateChange?: (state: TitanLayoutState) => void;
+    header?: ReactElement;
+    top?: ReactElement;
+    sideTop?: ReactElement[];
+    profile?: ReactElement;
+    extraLinks?: ReactElement;
+    extraLinksTop?: ReactElement;
+    extraText?: string;
+    minContentWidth?: number;
+};
+export interface TitanLayoutContentProps {
+    children: ReactNode;
+}
+export declare const TitanLayout: FC<TitanLayoutProps> & {
+    Content: FC<TitanLayoutContentProps>;
+    Logo: FC<TitanLayoutLogoProps>;
+    Link: typeof TitanLayoutSidebarLink;
+    Trigger: typeof TitanLayoutSidebarTrigger;
+};
+export {};
+//# sourceMappingURL=titan-layout.d.ts.map

package/dist/components/titan-layout/titan-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"titan-layout.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAGH,wBAAwB,EACxB,EAAE,EAEF,YAAY,EACZ,SAAS,EAOZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAA2B,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEhG,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAQ/C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAEtE,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAI3F,KAAK,gBAAgB,GAAG,YAAY,CAAC,uBAAuB,CAAC,GAAG,YAAY,CAAC,oBAAoB,CAAC,CAAC;AAEnG,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACzF,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAE5C,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAEhD,qCAAqC;IACrC,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE3C,uBAAuB;IACvB,QAAQ,CAAC,EAAE,gBAAgB,GAAG,gBAAgB,EAAE,CAAC;IAEjD,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAElD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAyPF,MAAM,WAAW,uBAAuB;IACpC,QAAQ,EAAE,SAAS,CAAC;CACvB;AAgDD,eAAO,MAAM,WAAW;;;;;CAKtB,CAAC"}