@pega/cosmos-react-build 2.1.6 → 2.1.7

package/lib/components/AppShell/AppShell.styles.js

@@ -0,0 +1,331 @@
+import styled, { css } from 'styled-components';
+import { lighten, hideVisually } from 'polished';
+import { useContext } from 'react';
+import { Icon, Text, tryCatch, defaultThemeProp, Button, useDirection, StyledIcon } from '@pega/cosmos-react-core';
+import { StyledSwitch, SwitchLabel } from '@pega/cosmos-react-core/lib/components/Switch/Switch';
+import { StyledBareButton } from '@pega/cosmos-react-core/lib/components/Button/BareButton';
+import { StyledNodeIcon, StyledNodeText, StyledNodeInteraction, StyledStandardTree } from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';
+import AppShellContext from './AppShellContext';
+const hoverBg = 'rgba(0, 0, 0, 0.4)';
+export const StyledNavToggle = styled(Button)(({ theme }) => {
+    const { ltr } = useDirection();
+    return css `
+    position: absolute;
+    z-index: 1;
+    inset-block-start: calc(2 * ${theme.base.spacing});
+    inset-inline-end: 0;
+    min-width: 1.5rem;
+    min-height: 1.5rem;
+    border: none;
+    color: ${theme.base.palette['foreground-color']};
+    box-shadow: ${theme.base.shadow.low};
+    border-radius: 50%;
+    transition-property: background-color;
+    transform: translateX(${ltr ? '50%' : '-50%'});
+
+    ${StyledIcon} {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+
+    &[aria-expanded='${ltr ? 'true' : 'false'}'] {
+      ${StyledIcon} {
+        transform: rotateY(180deg);
+      }
+    }
+  `;
+});
+StyledNavToggle.defaultProps = defaultThemeProp;
+export const StyledHeader = styled.div(({ theme }) => {
+    const borderColor = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
+    return css `
+    width: 100%;
+    min-height: 4rem;
+    border-bottom: 0.0625rem solid ${borderColor};
+  `;
+});
+StyledHeader.defaultProps = defaultThemeProp;
+export const StyledDrawerHeader = styled(StyledHeader)(({ theme }) => {
+    return css `
+    padding-inline-start: ${theme.base.spacing};
+  `;
+});
+StyledDrawerHeader.defaultProps = defaultThemeProp;
+export const StyledNavHeaderIcon = styled(Icon)(({ theme }) => {
+    return css `
+    color: ${theme.base.colors.white};
+  `;
+});
+StyledNavHeaderIcon.defaultProps = defaultThemeProp;
+export const StyledNavTitle = styled(Text)(({ theme }) => {
+    return css `
+    color: ${theme.base.colors.white};
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow-x: hidden;
+  `;
+});
+StyledNavTitle.defaultProps = defaultThemeProp;
+export const StyledUtils = styled.div(({ theme, showDevMode }) => {
+    const borderColor = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
+    return css `
+    padding-bottom: calc(${showDevMode ? 2 : 0} * ${theme.base.spacing});
+    border-top: 0.0625rem solid ${borderColor};
+    ${StyledSwitch} {
+      &:hover {
+        background-color: ${hoverBg};
+      }
+
+      ${SwitchLabel} {
+        height: calc(2rem + 4 * ${theme.base.spacing});
+        padding: calc(2 * ${theme.base.spacing});
+        text-transform: capitalize;
+        color: ${theme.base.colors.gray.light};
+        font-weight: ${theme.base['font-weight'].bold};
+
+        &::before,
+        &::after {
+          margin-inline-end: calc(2 * ${theme.base.spacing});
+        }
+      }
+    }
+    & > ul {
+      list-style: none;
+    }
+  `;
+});
+StyledUtils.defaultProps = defaultThemeProp;
+export const StyledUtilItem = styled.li(({ theme }) => {
+    return css `
+    &[aria-current='true'] {
+      background-color: rgba(0, 0, 0, 0.4);
+
+      & > ${StyledBareButton} {
+        color: ${theme.base.colors.blue.light};
+      }
+    }
+
+    ${StyledBareButton} {
+      font-weight: ${theme.base['font-weight']['semi-bold']};
+      color: ${theme.base.colors.white};
+      width: 100%;
+      height: 100%;
+      text-align: start;
+      padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.4);
+      }
+
+      &:focus {
+        box-shadow: inset ${theme.base.shadow['focus-inverted']};
+      }
+    }
+  `;
+});
+StyledUtilItem.defaultProps = defaultThemeProp;
+export const StyledScrollWrap = styled.div(() => {
+    const { drawerOpen } = useContext(AppShellContext);
+    return css `
+    height: ${drawerOpen ? 'calc(100% - 4rem)' : '100%'};
+    overflow-y: auto;
+  `;
+});
+StyledScrollWrap.defaultProps = defaultThemeProp;
+export const StyledNavContent = styled.div(({ theme }) => {
+    const { navState } = useContext(AppShellContext);
+    return css `
+    width: 14rem;
+    height: 100%;
+    opacity: 0;
+    transition: opacity ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
+
+    ${navState === 'collapsed' &&
+        css `
+      display: none;
+    `}
+
+    ${(navState === 'expanding' || navState === 'expanded') &&
+        css `
+      opacity: 1;
+    `}
+  `;
+});
+StyledNavContent.defaultProps = defaultThemeProp;
+export const StyledMain = styled.main(({ theme }) => {
+    return css `
+    position: relative;
+    min-height: calc(100vh - 3rem);
+    background-color: ${theme.base.palette['app-background']};
+    transition: margin ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
+  `;
+});
+StyledMain.defaultProps = defaultThemeProp;
+export const StyledDrawerWrapper = styled.div(() => {
+    const { drawerOpen } = useContext(AppShellContext);
+    return css `
+    position: relative;
+    z-index: 1;
+    height: ${drawerOpen ? '100%' : 'auto'};
+  `;
+});
+StyledDrawerWrapper.defaultProps = defaultThemeProp;
+export const StyledNavHeaderVisual = styled.div(({ theme, bgColor }) => {
+    return css `
+    min-width: 2rem;
+    min-height: 2rem;
+    border-radius: 0.4rem;
+    background-color: ${bgColor};
+    margin-inline-end: ${theme.base.spacing};
+    color: ${theme.base.colors.white};
+    & svg {
+      color: ${theme.base.colors.white};
+    }
+  `;
+});
+StyledNavHeaderVisual.defaultProps = defaultThemeProp;
+export const StyledDrawerCloseButton = styled(Button)(({ theme }) => {
+    return css `
+    margin-inline-end: ${theme.base.spacing};
+    min-width: 1.5rem;
+    min-height: 1.5rem;
+    color: ${theme.base.colors.white};
+
+    ${StyledIcon} {
+      width: 1em;
+      height: 1em;
+    }
+  `;
+});
+StyledDrawerCloseButton.defaultProps = defaultThemeProp;
+export const StyledInnerNav = styled.div(() => {
+    const { navState } = useContext(AppShellContext);
+    return css `
+    height: 100%;
+    ${(navState === 'collapsing' || navState === 'expanding') &&
+        css `
+      overflow: hidden;
+    `}
+  `;
+});
+StyledInnerNav.defaultProps = defaultThemeProp;
+export const StyledNav = styled.nav(({ theme }) => {
+    const { navState } = useContext(AppShellContext);
+    return css `
+    position: fixed;
+    z-index: 1;
+    height: calc(100vh - 3rem);
+    background: ${theme.components['app-shell'].nav['background-color']};
+
+    &,
+    ${StyledInnerNav} {
+      width: ${navState === 'expanding' || navState === 'expanded' ? '14' : '1.5'}rem;
+      transition: width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
+    }
+
+    ${theme.base['custom-scrollbar'] &&
+        css `
+      * {
+        scrollbar-color: rgba(255, 255, 255, 0.6) rgba(0, 0, 0, 0.2);
+        scrollbar-width: thin;
+      }
+
+      @supports not ((scrollbar-width: thin) or (scrollbar-color: black white)) {
+        /* stylelint-disable unit-allowed-list */
+
+        *::-webkit-scrollbar {
+          width: 12px;
+          height: 12px;
+        }
+
+        *::-webkit-scrollbar-track {
+          background-color: rgba(0, 0, 0, 0.2);
+        }
+
+        *::-webkit-scrollbar-corner {
+          background-color: rgba(0, 0, 0, 0.2);
+          border-bottom-right-radius: inherit;
+        }
+
+        *::-webkit-scrollbar-thumb {
+          background-color: transparent;
+          border: 3px solid transparent;
+          border-radius: calc(1.125 * ${theme.base['border-radius']});
+          box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.6);
+        }
+
+        *::-webkit-scrollbar-thumb:hover {
+          box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.7);
+        }
+
+        *::-webkit-scrollbar-track:horizontal {
+          border-bottom-left-radius: inherit;
+        }
+
+        *::-webkit-scrollbar-track:vertical {
+          border-top-right-radius: inherit;
+        }
+
+        /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
+        *::-webkit-scrollbar-track:not(:corner-present) {
+          border-bottom-right-radius: inherit;
+        }
+
+        /* stylelint-enable unit-allowed-list */
+      }
+    `}
+
+    &:not(:hover) {
+      ${StyledNavToggle}[aria-expanded='true']:not(:focus) {
+        ${hideVisually}
+      }
+    }
+
+    /*
+     * A hoverable area just outside the nav for easier mouse interaction with the collapse button.
+     * As the collpase button straddles the nav boundary, so maybe too should the hoverable area.
+     */
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 100%;
+      width: calc(2 * ${theme.base.spacing});
+      height: 100%;
+    }
+
+    ${StyledStandardTree} {
+      color: ${theme.base.colors.white};
+
+      ${StyledNodeText} {
+        font-weight: ${theme.base['font-weight']['semi-bold']};
+      }
+
+      ${StyledNodeInteraction} {
+        padding-block-start: calc(0.5 * ${theme.base.spacing});
+        padding-block-end: calc(0.5 * ${theme.base.spacing});
+        &:hover,
+        &[aria-current='true'] {
+          background-color: ${hoverBg};
+        }
+
+        &[aria-current='true'] {
+          ${StyledNodeIcon},
+          ${StyledNodeText} {
+            color: ${theme.base.colors.blue.light};
+          }
+        }
+      }
+    }
+
+    /* Style for main is here since nav(the "&") may be conditionally rendered. */
+    & + ${StyledMain} {
+      margin-inline-start: ${navState === 'expanding' || navState === 'expanded'
+        ? '14rem'
+        : '1.5rem'};
+    }
+  `;
+});
+StyledNav.defaultProps = defaultThemeProp;
+//# sourceMappingURL=AppShell.styles.js.map

package/lib/components/AppShell/AppShell.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, hideVisually } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n  Icon,\n  Text,\n  tryCatch,\n  defaultThemeProp,\n  Button,\n  useDirection,\n  StyledIcon\n} from '@pega/cosmos-react-core';\nimport { StyledSwitch, SwitchLabel } from '@pega/cosmos-react-core/lib/components/Switch/Switch';\nimport { StyledBareButton } from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport {\n  StyledNodeIcon,\n  StyledNodeText,\n  StyledNodeInteraction,\n  StyledStandardTree\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nimport AppShellContext from './AppShellContext';\n\nconst hoverBg = 'rgba(0, 0, 0, 0.4)';\n\nexport const StyledNavToggle = styled(Button)(({ theme }) => {\n  const { ltr } = useDirection();\n\n  return css`\n    position: absolute;\n    z-index: 1;\n    inset-block-start: calc(2 * ${theme.base.spacing});\n    inset-inline-end: 0;\n    min-width: 1.5rem;\n    min-height: 1.5rem;\n    border: none;\n    color: ${theme.base.palette['foreground-color']};\n    box-shadow: ${theme.base.shadow.low};\n    border-radius: 50%;\n    transition-property: background-color;\n    transform: translateX(${ltr ? '50%' : '-50%'});\n\n    ${StyledIcon} {\n      width: 1.5rem;\n      height: 1.5rem;\n    }\n\n    &[aria-expanded='${ltr ? 'true' : 'false'}'] {\n      ${StyledIcon} {\n        transform: rotateY(180deg);\n      }\n    }\n  `;\n});\n\nStyledNavToggle.defaultProps = defaultThemeProp;\n\nexport const StyledHeader = styled.div(({ theme }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n\n  return css`\n    width: 100%;\n    min-height: 4rem;\n    border-bottom: 0.0625rem solid ${borderColor};\n  `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerHeader = styled(StyledHeader)(({ theme }) => {\n  return css`\n    padding-inline-start: ${theme.base.spacing};\n  `;\n});\n\nStyledDrawerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderIcon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.colors.white};\n  `;\n});\n\nStyledNavHeaderIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNavTitle = styled(Text)(({ theme }) => {\n  return css`\n    color: ${theme.base.colors.white};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow-x: hidden;\n  `;\n});\n\nStyledNavTitle.defaultProps = defaultThemeProp;\n\nexport const StyledUtils = styled.div<{ showDevMode: boolean }>(({ theme, showDevMode }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n\n  return css`\n    padding-bottom: calc(${showDevMode ? 2 : 0} * ${theme.base.spacing});\n    border-top: 0.0625rem solid ${borderColor};\n    ${StyledSwitch} {\n      &:hover {\n        background-color: ${hoverBg};\n      }\n\n      ${SwitchLabel} {\n        height: calc(2rem + 4 * ${theme.base.spacing});\n        padding: calc(2 * ${theme.base.spacing});\n        text-transform: capitalize;\n        color: ${theme.base.colors.gray.light};\n        font-weight: ${theme.base['font-weight'].bold};\n\n        &::before,\n        &::after {\n          margin-inline-end: calc(2 * ${theme.base.spacing});\n        }\n      }\n    }\n    & > ul {\n      list-style: none;\n    }\n  `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledUtilItem = styled.li(({ theme }) => {\n  return css`\n    &[aria-current='true'] {\n      background-color: rgba(0, 0, 0, 0.4);\n\n      & > ${StyledBareButton} {\n        color: ${theme.base.colors.blue.light};\n      }\n    }\n\n    ${StyledBareButton} {\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n      color: ${theme.base.colors.white};\n      width: 100%;\n      height: 100%;\n      text-align: start;\n      padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n\n      &:hover {\n        background-color: rgba(0, 0, 0, 0.4);\n      }\n\n      &:focus {\n        box-shadow: inset ${theme.base.shadow['focus-inverted']};\n      }\n    }\n  `;\n});\n\nStyledUtilItem.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(() => {\n  const { drawerOpen } = useContext(AppShellContext);\n\n  return css`\n    height: ${drawerOpen ? 'calc(100% - 4rem)' : '100%'};\n    overflow-y: auto;\n  `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledNavContent = styled.div(({ theme }) => {\n  const { navState } = useContext(AppShellContext);\n\n  return css`\n    width: 14rem;\n    height: 100%;\n    opacity: 0;\n    transition: opacity ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n    ${navState === 'collapsed' &&\n    css`\n      display: none;\n    `}\n\n    ${(navState === 'expanding' || navState === 'expanded') &&\n    css`\n      opacity: 1;\n    `}\n  `;\n});\n\nStyledNavContent.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main(({ theme }) => {\n  return css`\n    position: relative;\n    min-height: calc(100vh - 3rem);\n    background-color: ${theme.base.palette['app-background']};\n    transition: margin ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n  `;\n});\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerWrapper = styled.div(() => {\n  const { drawerOpen } = useContext(AppShellContext);\n\n  return css`\n    position: relative;\n    z-index: 1;\n    height: ${drawerOpen ? '100%' : 'auto'};\n  `;\n});\n\nStyledDrawerWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderVisual = styled.div<{ bgColor: string }>(({ theme, bgColor }) => {\n  return css`\n    min-width: 2rem;\n    min-height: 2rem;\n    border-radius: 0.4rem;\n    background-color: ${bgColor};\n    margin-inline-end: ${theme.base.spacing};\n    color: ${theme.base.colors.white};\n    & svg {\n      color: ${theme.base.colors.white};\n    }\n  `;\n});\n\nStyledNavHeaderVisual.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerCloseButton = styled(Button)(({ theme }) => {\n  return css`\n    margin-inline-end: ${theme.base.spacing};\n    min-width: 1.5rem;\n    min-height: 1.5rem;\n    color: ${theme.base.colors.white};\n\n    ${StyledIcon} {\n      width: 1em;\n      height: 1em;\n    }\n  `;\n});\n\nStyledDrawerCloseButton.defaultProps = defaultThemeProp;\n\nexport const StyledInnerNav = styled.div(() => {\n  const { navState } = useContext(AppShellContext);\n\n  return css`\n    height: 100%;\n    ${(navState === 'collapsing' || navState === 'expanding') &&\n    css`\n      overflow: hidden;\n    `}\n  `;\n});\n\nStyledInnerNav.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav(({ theme }) => {\n  const { navState } = useContext(AppShellContext);\n\n  return css`\n    position: fixed;\n    z-index: 1;\n    height: calc(100vh - 3rem);\n    background: ${theme.components['app-shell'].nav['background-color']};\n\n    &,\n    ${StyledInnerNav} {\n      width: ${navState === 'expanding' || navState === 'expanded' ? '14' : '1.5'}rem;\n      transition: width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n    }\n\n    ${theme.base['custom-scrollbar'] &&\n    css`\n      * {\n        scrollbar-color: rgba(255, 255, 255, 0.6) rgba(0, 0, 0, 0.2);\n        scrollbar-width: thin;\n      }\n\n      @supports not ((scrollbar-width: thin) or (scrollbar-color: black white)) {\n        /* stylelint-disable unit-allowed-list */\n\n        *::-webkit-scrollbar {\n          width: 12px;\n          height: 12px;\n        }\n\n        *::-webkit-scrollbar-track {\n          background-color: rgba(0, 0, 0, 0.2);\n        }\n\n        *::-webkit-scrollbar-corner {\n          background-color: rgba(0, 0, 0, 0.2);\n          border-bottom-right-radius: inherit;\n        }\n\n        *::-webkit-scrollbar-thumb {\n          background-color: transparent;\n          border: 3px solid transparent;\n          border-radius: calc(1.125 * ${theme.base['border-radius']});\n          box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.6);\n        }\n\n        *::-webkit-scrollbar-thumb:hover {\n          box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.7);\n        }\n\n        *::-webkit-scrollbar-track:horizontal {\n          border-bottom-left-radius: inherit;\n        }\n\n        *::-webkit-scrollbar-track:vertical {\n          border-top-right-radius: inherit;\n        }\n\n        /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n        *::-webkit-scrollbar-track:not(:corner-present) {\n          border-bottom-right-radius: inherit;\n        }\n\n        /* stylelint-enable unit-allowed-list */\n      }\n    `}\n\n    &:not(:hover) {\n      ${StyledNavToggle}[aria-expanded='true']:not(:focus) {\n        ${hideVisually}\n      }\n    }\n\n    /*\n     * A hoverable area just outside the nav for easier mouse interaction with the collapse button.\n     * As the collpase button straddles the nav boundary, so maybe too should the hoverable area.\n     */\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 100%;\n      width: calc(2 * ${theme.base.spacing});\n      height: 100%;\n    }\n\n    ${StyledStandardTree} {\n      color: ${theme.base.colors.white};\n\n      ${StyledNodeText} {\n        font-weight: ${theme.base['font-weight']['semi-bold']};\n      }\n\n      ${StyledNodeInteraction} {\n        padding-block-start: calc(0.5 * ${theme.base.spacing});\n        padding-block-end: calc(0.5 * ${theme.base.spacing});\n        &:hover,\n        &[aria-current='true'] {\n          background-color: ${hoverBg};\n        }\n\n        &[aria-current='true'] {\n          ${StyledNodeIcon},\n          ${StyledNodeText} {\n            color: ${theme.base.colors.blue.light};\n          }\n        }\n      }\n    }\n\n    /* Style for main is here since nav(the \"&\") may be conditionally rendered. */\n    & + ${StyledMain} {\n      margin-inline-start: ${navState === 'expanding' || navState === 'expanded'\n        ? '14rem'\n        : '1.5rem'};\n    }\n  `;\n});\n\nStyledNav.defaultProps = defaultThemeProp;\n"]}

package/lib/components/AppShell/AppShell.types.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode, Ref } from 'react';
+import { StandardTreeProps, DrawerProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
+import { AppBarProps } from '../AppHeader';
+import { VisualProps } from '../Visual';
+export interface AppShellProps extends NoChildrenProp {
+    main: ReactNode;
+    appInfo: AppInfoProps;
+    appHeader: AppBarProps;
+    navigation: StandardTreeProps;
+    hideNav?: boolean;
+    utils?: UtilsProps;
+    ref?: Ref<HTMLElement>;
+}
+export interface UtilsProps {
+    items: UtilItem[];
+    currentItemId?: UtilItem['id'];
+    onItemClick: (id: UtilItem['id']) => void;
+    drawer?: Pick<DrawerProps, 'onBeforeOpen' | 'onAfterOpen' | 'onBeforeClose' | 'onAfterClose'>;
+    devMode?: boolean;
+}
+export interface UtilItem {
+    id: string;
+    label: string;
+}
+export interface AppInfoProps {
+    text: string;
+    visual: VisualProps;
+}
+export interface AppShellContextValue {
+    drawerOpen: boolean;
+    setDrawerOpen: (open: boolean) => void;
+    setDrawerData: (data: {
+        label: string;
+        id: string;
+    }) => void;
+    drawerData?: {
+        label: string;
+        id: string;
+    };
+    navState: typeof expandCollapseStates[keyof typeof expandCollapseStates];
+}
+//# sourceMappingURL=AppShell.types.d.ts.map

package/lib/components/AppShell/AppShell.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAE5F,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;IACtB,SAAS,EAAE,WAAW,CAAC;IACvB,UAAU,EAAE,iBAAiB,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,WAAW,EAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,GAAG,aAAa,GAAG,eAAe,GAAG,cAAc,CAAC,CAAC;IAC9F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,aAAa,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7D,UAAU,CAAC,EAAE;QACX,KAAK,EAAE,MAAM,CAAC;QACd,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,QAAQ,EAAE,OAAO,oBAAoB,CAAC,MAAM,OAAO,oBAAoB,CAAC,CAAC;CAC1E"}

package/lib/components/AppShell/AppShell.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AppShell.types.js.map

package/lib/components/AppShell/AppShell.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport { StandardTreeProps, DrawerProps, NoChildrenProp } from '@pega/cosmos-react-core';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nimport { AppBarProps } from '../AppHeader';\nimport { VisualProps } from '../Visual';\n\nexport interface AppShellProps extends NoChildrenProp {\n  main: ReactNode;\n  appInfo: AppInfoProps;\n  appHeader: AppBarProps;\n  navigation: StandardTreeProps;\n  hideNav?: boolean;\n  utils?: UtilsProps;\n  ref?: Ref<HTMLElement>;\n}\n\nexport interface UtilsProps {\n  items: UtilItem[];\n  currentItemId?: UtilItem['id'];\n  onItemClick: (id: UtilItem['id']) => void;\n  drawer?: Pick<DrawerProps, 'onBeforeOpen' | 'onAfterOpen' | 'onBeforeClose' | 'onAfterClose'>;\n  devMode?: boolean;\n}\n\nexport interface UtilItem {\n  id: string;\n  label: string;\n}\n\nexport interface AppInfoProps {\n  text: string;\n  visual: VisualProps;\n}\n\nexport interface AppShellContextValue {\n  drawerOpen: boolean;\n  setDrawerOpen: (open: boolean) => void;\n  setDrawerData: (data: { label: string; id: string }) => void;\n  drawerData?: {\n    label: string;\n    id: string;\n  };\n  navState: typeof expandCollapseStates[keyof typeof expandCollapseStates];\n}\n"]}

package/lib/components/AppShell/AppShellContext.d.ts

@@ -0,0 +1,4 @@
+import { AppShellContextValue } from './AppShell.types';
+declare const AppShellContext: import("react").Context<AppShellContextValue>;
+export default AppShellContext;
+//# sourceMappingURL=AppShellContext.d.ts.map

package/lib/components/AppShell/AppShellContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShellContext.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,QAAA,MAAM,eAAe,+CAMnB,CAAC;AAEH,eAAe,eAAe,CAAC"}

package/lib/components/AppShell/AppShellContext.js

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+const AppShellContext = createContext({
+    drawerOpen: false,
+    setDrawerOpen: () => { },
+    drawerData: undefined,
+    setDrawerData: () => { },
+    navState: 'expanded'
+});
+export default AppShellContext;
+//# sourceMappingURL=AppShellContext.js.map

package/lib/components/AppShell/AppShellContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShellContext.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,MAAM,eAAe,GAAG,aAAa,CAAuB;IAC1D,UAAU,EAAE,KAAK;IACjB,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC;IACvB,UAAU,EAAE,SAAS;IACrB,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC;IACvB,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC;AAEH,eAAe,eAAe,CAAC","sourcesContent":["import { createContext } from 'react';\n\nimport { AppShellContextValue } from './AppShell.types';\n\nconst AppShellContext = createContext<AppShellContextValue>({\n  drawerOpen: false,\n  setDrawerOpen: () => {},\n  drawerData: undefined,\n  setDrawerData: () => {},\n  navState: 'expanded'\n});\n\nexport default AppShellContext;\n"]}

package/lib/components/AppShell/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './AppShell';
+export { AppShellProps } from './AppShell.types';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/AppShell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/components/AppShell/index.js

@@ -0,0 +1,2 @@
+export { default } from './AppShell';
+//# sourceMappingURL=index.js.map

package/lib/components/AppShell/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default } from './AppShell';\nexport { AppShellProps } from './AppShell.types';\n"]}

package/lib/components/FlowModeller/AddNode.d.ts

@@ -0,0 +1,16 @@
+import { FC, MouseEvent } from 'react';
+import { RendererNodeProps } from './Renderer/Renderer.types';
+export declare const StyledDot: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").IconProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledPlus: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").IconProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+interface AddBtnProps {
+    addNodeHandler: (e: MouseEvent<HTMLButtonElement>) => void;
+}
+export interface AddNodeProps extends RendererNodeProps {
+    onClick?: (ev: Event) => void;
+}
+export declare const StyledConnectorLabel: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const AddButton: FC<AddBtnProps>;
+export {};
+//# sourceMappingURL=AddNode.d.ts.map

package/lib/components/FlowModeller/AddNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddNode.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/AddNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAYvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,eAAO,MAAM,SAAS,mOAKpB,CAAC;AAIH,eAAO,MAAM,UAAU,mOAAiB,CAAC;AACzC,eAAO,MAAM,aAAa,yGAUxB,CAAC;AAIH,eAAO,MAAM,YAAY,qOAsBvB,CAAC;AAIH,UAAU,WAAW;IACnB,cAAc,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,MAAM,WAAW,YAAa,SAAQ,iBAAiB;IACrD,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,KAAK,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,oBAAoB,mOAQ/B,CAAC;AAIH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,WAAW,CAWrC,CAAC"}

package/lib/components/FlowModeller/AddNode.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { Button, defaultThemeProp, Flex, Icon, useI18n, StyledTooltip, Text } from '@pega/cosmos-react-core';
+export const StyledDot = styled(Icon)(({ theme }) => {
+    return css `
+    position: absolute;
+    color: ${theme.base.colors.slate.dark};
+  `;
+});
+StyledDot.defaultProps = defaultThemeProp;
+export const StyledPlus = styled(Icon) ``;
+export const StyledWrapper = styled.div(({ theme }) => {
+    return css `
+    margin-block-start: ${theme.base.spacing};
+    ${StyledTooltip} {
+      ${css `
+        min-width: 12ch;
+        text-align: center;
+      `}
+    }
+  `;
+});
+StyledWrapper.defaultProps = defaultThemeProp;
+export const StyledButton = styled(Button)(({ theme }) => {
+    return css `
+    top: -0.25rem;
+    border: 0;
+    background: transparent;
+    color: ${theme.base.colors.black};
+    ${StyledPlus} {
+      opacity: 0;
+    }
+    &:hover,
+    &:active,
+    &:focus {
+      opacity: 1;
+      background: ${theme.base.colors.white};
+      ${StyledDot} {
+        opacity: 0;
+      }
+      ${StyledPlus} {
+        opacity: 1;
+      }
+    }
+  `;
+});
+StyledButton.defaultProps = defaultThemeProp;
+export const StyledConnectorLabel = styled(Text)(({ theme }) => {
+    return css `
+    border-radius: ${theme.base['border-radius']};
+    background: ${theme.base.colors.slate.dark};
+    color: ${theme.base.colors.white};
+    text-align: center;
+    padding: calc(0.5 * ${theme.base.spacing});
+  `;
+});
+StyledConnectorLabel.defaultProps = defaultThemeProp;
+export const AddButton = ({ addNodeHandler }) => {
+    const t = useI18n();
+    return (_jsx(Flex, { container: { justify: 'center' }, as: StyledWrapper, children: _jsxs(StyledButton, { label: t('add_node'), icon: true, onClick: addNodeHandler, children: [_jsx(StyledDot, { name: 'circle-solid' }, void 0), _jsx(StyledPlus, { name: 'plus' }, void 0)] }, void 0) }, void 0));
+};
+//# sourceMappingURL=AddNode.js.map

package/lib/components/FlowModeller/AddNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddNode.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/AddNode.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,IAAI,EACL,MAAM,yBAAyB,CAAC;AAIjC,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;;aAEC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;GACtC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,EAAE,CAAC;AACzC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;0BACc,KAAK,CAAC,IAAI,CAAC,OAAO;MACtC,aAAa;QACX,GAAG,CAAA;;;OAGJ;;GAEJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;;;aAIC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;MAC9B,UAAU;;;;;;;oBAOI,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;QACnC,SAAS;;;QAGT,UAAU;;;;GAIf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAU7C,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;qBACS,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;kBAC9B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;aACjC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;0BAEV,KAAK,CAAC,IAAI,CAAC,OAAO;GACzC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,SAAS,GAAoB,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE;IAC/D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,aAAa,YACvD,MAAC,YAAY,IAAC,KAAK,EAAE,CAAC,CAAC,UAAU,CAAC,EAAE,IAAI,QAAC,OAAO,EAAE,cAAc,aAC9D,KAAC,SAAS,IAAC,IAAI,EAAC,cAAc,WAAG,EACjC,KAAC,UAAU,IAAC,IAAI,EAAC,MAAM,WAAG,YACb,WACV,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { FC, MouseEvent } from 'react';\n\nimport {\n  Button,\n  defaultThemeProp,\n  Flex,\n  Icon,\n  useI18n,\n  StyledTooltip,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { RendererNodeProps } from './Renderer/Renderer.types';\n\nexport const StyledDot = styled(Icon)(({ theme }) => {\n  return css`\n    position: absolute;\n    color: ${theme.base.colors.slate.dark};\n  `;\n});\n\nStyledDot.defaultProps = defaultThemeProp;\n\nexport const StyledPlus = styled(Icon)``;\nexport const StyledWrapper = styled.div(({ theme }) => {\n  return css`\n    margin-block-start: ${theme.base.spacing};\n    ${StyledTooltip} {\n      ${css`\n        min-width: 12ch;\n        text-align: center;\n      `}\n    }\n  `;\n});\n\nStyledWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledButton = styled(Button)(({ theme }) => {\n  return css`\n    top: -0.25rem;\n    border: 0;\n    background: transparent;\n    color: ${theme.base.colors.black};\n    ${StyledPlus} {\n      opacity: 0;\n    }\n    &:hover,\n    &:active,\n    &:focus {\n      opacity: 1;\n      background: ${theme.base.colors.white};\n      ${StyledDot} {\n        opacity: 0;\n      }\n      ${StyledPlus} {\n        opacity: 1;\n      }\n    }\n  `;\n});\n\nStyledButton.defaultProps = defaultThemeProp;\n\ninterface AddBtnProps {\n  addNodeHandler: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport interface AddNodeProps extends RendererNodeProps {\n  onClick?: (ev: Event) => void;\n}\n\nexport const StyledConnectorLabel = styled(Text)(({ theme }) => {\n  return css`\n    border-radius: ${theme.base['border-radius']};\n    background: ${theme.base.colors.slate.dark};\n    color: ${theme.base.colors.white};\n    text-align: center;\n    padding: calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledConnectorLabel.defaultProps = defaultThemeProp;\n\nexport const AddButton: FC<AddBtnProps> = ({ addNodeHandler }) => {\n  const t = useI18n();\n\n  return (\n    <Flex container={{ justify: 'center' }} as={StyledWrapper}>\n      <StyledButton label={t('add_node')} icon onClick={addNodeHandler}>\n        <StyledDot name='circle-solid' />\n        <StyledPlus name='plus' />\n      </StyledButton>\n    </Flex>\n  );\n};\n"]}

package/lib/components/FlowModeller/FlowModeller.d.ts

@@ -0,0 +1,21 @@
+import { PropsWithoutRef, MouseEvent } from 'react';
+import { Action } from '@pega/cosmos-react-core';
+import { GraphData, ConnectorProps } from './Renderer/Utils/Graph';
+import { AddNodeHandlerParams } from './Renderer/Renderer.types';
+import { ActionParams, NodeProps, NodeLibraryItem, NodeType } from './Node/Node.types';
+export interface FlowModellerProps {
+    graphData: GraphData<NodeProps, ConnectorProps>;
+    /** Node actions */
+    actions?: Action[];
+    /** Callback to add node from connector */
+    onNodeAdd: (nodeType: NodeType, params: AddNodeHandlerParams) => void;
+    /** Callback for handling the click on the node */
+    onNodeClick?: (nodeId: string) => void;
+    /** Callback for actions on Node */
+    onNodeActionClick?: (param: ActionParams, e: MouseEvent) => void;
+    /** Types of nodes */
+    nodeLibrary: NodeLibraryItem[];
+}
+declare const FlowModeller: ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, nodeLibrary, actions }: PropsWithoutRef<FlowModellerProps>) => JSX.Element;
+export default FlowModeller;
+//# sourceMappingURL=FlowModeller.d.ts.map

package/lib/components/FlowModeller/FlowModeller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowModeller.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAEf,UAAU,EAMX,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,MAAM,EAOP,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EACL,oBAAoB,EAGrB,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EACL,YAAY,EACZ,SAAS,EACT,eAAe,EAGf,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAQ3B,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,SAAS,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;IAChD,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,0CAA0C;IAC1C,SAAS,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACtE,kDAAkD;IAClD,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjE,qBAAqB;IACrB,WAAW,EAAE,eAAe,EAAE,CAAC;CAChC;AAsED,QAAA,MAAM,YAAY,mFAOf,gBAAgB,iBAAiB,CAAC,gBAuMpC,CAAC;AAEF,eAAe,YAAY,CAAC"}