npm - @pega/cosmos-react-build - Versions diffs - 4.0.0-dev.7.0 → 4.0.0-dev.8.0 - Mend

@pega/cosmos-react-build 4.0.0-dev.7.0 → 4.0.0-dev.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

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

@@ -1,247 +1,122 @@
 import styled, { css } from 'styled-components';
-import { lighten, hideVisually } from 'polished';
+import { lighten, rgba } from 'polished';
 import { useContext } from 'react';
-import { Icon, Text, tryCatch, defaultThemeProp, Button, useDirection, StyledIcon, StyledAvatar } 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 { tryCatch, defaultThemeProp, Button, StyledIcon, useDirection, calculateFontSize } from '@pega/cosmos-react-core';
+import { StyledToggleIcon, 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%;
-    height: auto;
-    border-bottom: 0.0625rem solid ${borderColor};
-    transition: height ${theme.base.animation.speed} ${theme.base.animation.timing['ease-out']};
-    padding: calc(1.2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing});
-    div {
-      min-width: 0;
-    }
-    li {
-      color: ${theme.base.palette.info};
-    }
-    ${StyledAvatar} {
-      flex-shrink: 0;
-    }
-  `;
-});
-StyledHeader.defaultProps = defaultThemeProp;
-export const StyledDrawerHeader = styled(StyledHeader)(({ theme }) => {
-    return css `
-    padding: calc(2 * ${theme.base.spacing});
-    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};
-    word-break: break-word;
-  `;
-});
-StyledNavTitle.defaultProps = defaultThemeProp;
-export const StyledUtils = styled.div(({ theme, showDevMode }) => {
+const navWidth = '3rem';
+const navOpenWidth = '14rem';
+export const StyledUtils = styled.div(({ theme }) => {
     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;
-    }
+    padding-block: ${theme.base.spacing};
+    border-block-start: 0.0625rem solid ${borderColor};
   `;
 });
 StyledUtils.defaultProps = defaultThemeProp;
-export const StyledUtilItem = styled.li(({ theme }) => {
+export const StyledAppShellToggleButton = styled(Button)(({ theme, open }) => {
     return css `
-    &[aria-current='true'] {
-      background-color: rgba(0, 0, 0, 0.4);
-      & > ${StyledBareButton} {
-        color: ${theme.base.colors.blue.light};
-      }
-    }
+    background-color: ${theme.base.palette.dark};
+    color: ${theme.base.palette.light};
+    border: none;
-    ${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});
+    ${open &&
+        css `
+      padding-inline: 1rem;
+    `}
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.4);
-      }
+    ${StyledIcon} {
+      width: 1.25rem;
+      height: 1.25rem;
+      font-weight: bold;
+    }
-      &:focus {
-        box-shadow: ${theme.base.shadow['focus-inset']};
-      }
+    &:enabled:focus,
+    :not([disabled]):focus {
+      box-shadow: ${theme.base.shadow.focus};
     }
   `;
 });
-StyledUtilItem.defaultProps = defaultThemeProp;
+StyledAppShellToggleButton.defaultProps = defaultThemeProp;
 export const StyledScrollWrap = styled.div(() => {
-    const { drawerOpen } = useContext(AppShellContext);
     return css `
-    height: ${drawerOpen ? 'calc(100% - 4rem)' : '100%'};
+    height: 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: { base: { animation, breakpoints, palette } } }) => {
+export const StyledMain = styled.main(({ navOpen, theme: { base: { animation, breakpoints, palette } } }) => {
     return css `
       position: relative;
       min-height: calc(100vh - 6rem);
       background-color: ${palette['app-background']};
-      transition: margin ${animation.speed} ${animation.timing.ease};
+      margin-inline-start: ${navWidth};
+      transition: margin-inline-start ${`${animation.speed} ${animation.timing.ease}`};
       @media (pointer: coarse) {
         min-height: calc(100vh - 8rem);
       }
       @media (min-width: ${breakpoints.md}) {
-        min-height: calc(100vh - 3rem);
+        height: calc(100vh - 3rem);
       }
-    `;
-});
-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') &&
+      ${navOpen &&
         css `
-      overflow: hidden;
-    `}
-  `;
+        margin-inline-start: ${navOpenWidth};
+      `}
+    `;
 });
-StyledInnerNav.defaultProps = defaultThemeProp;
-export const StyledNav = styled.nav(({ theme: { base: { breakpoints, colors, animation, spacing, 'custom-scrollbar': customScrollbar, 'border-radius': borderRadius, 'font-weight': fontWeight }, components: { 'app-shell': appShell } } }) => {
+StyledMain.defaultProps = defaultThemeProp;
+export const StyledNav = styled.nav(({ theme: { base: { breakpoints, colors, palette, animation, spacing, shadow, 'custom-scrollbar': customScrollbar, 'border-radius': borderRadius, 'font-size': fontSize, 'font-scale': fontScale }, components: { 'app-shell': appShell } } }) => {
     const { navState } = useContext(AppShellContext);
+    const fontSizes = calculateFontSize(fontSize, fontScale);
     return css `
       position: fixed;
       z-index: 1;
       height: calc(100vh - 6rem);
       background: ${appShell.nav['background-color']};
+      width: ${navState === 'opening' || navState === 'open' ? navOpenWidth : navWidth};
+      transition: width ${animation.speed} ${animation.timing.ease};
+      display: flex;
+      ${StyledStandardTree} {
+        background-color: ${palette.dark};
+        ${StyledNodeText}, ${StyledToggleIcon} {
+          color: rgba(255, 255, 255, 0.7);
+          font-size: ${fontSizes.xxs};
+        }
+        ${StyledNodeInteraction} {
+          padding-block-start: calc(0.5 * ${spacing});
+          padding-block-end: calc(0.5 * ${spacing});
+          &:hover {
+            background: rgba(255, 255, 255, 0.1);
+            ${StyledNodeText} {
+              color: ${palette.light};
+            }
+          }
+          &:focus {
+            box-shadow: ${shadow['focus-inset']};
+          }
+          &[aria-current='page'],
+          &[aria-current='true'] {
+            background: rgba(255, 255, 255, 0.05);
+            ${StyledNodeText} {
+              color: ${colors.blue.light};
+            }
+          }
+        }
-      &,
-      ${StyledInnerNav} {
-        width: ${navState === 'expanding' || navState === 'expanded' ? '14' : '1.5'}rem;
-        transition: width ${animation.speed} ${animation.timing.ease};
+        &:has(:focus-visible) {
+          box-shadow: inset 0 0 0 0.125rem #71c1ff99;
+        }
       }
       ${customScrollbar &&
@@ -296,65 +171,95 @@ export const StyledNav = styled.nav(({ theme: { base: { breakpoints, colors, ani
         }
       `}
-      &:not(:hover) {
-        ${StyledNavToggle}[aria-expanded='true']:not(:focus) {
-          ${hideVisually}
-        }
+      @media (pointer: coarse) {
+        height: calc(100vh - 8rem);
       }
-      /*
-     * 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 * ${spacing});
-        height: 100%;
+      @media (min-width: ${breakpoints.md}) {
+        height: calc(100vh - 3rem);
       }
+    `;
+});
+StyledNav.defaultProps = defaultThemeProp;
+export const StyledAppShellCaretIcon = styled.svg(({ nestedListCollapsed, theme }) => {
+    const { rtl } = useDirection();
+    return css `
+      transition-property: transform;
+      transition-duration: ${theme.base.animation.speed};
+      transition-timing-function: ${theme.base.animation.timing.ease};
-      ${StyledStandardTree} {
-        color: ${colors.white};
+      ${nestedListCollapsed === false &&
+        css `
+        transform: rotateZ(${rtl ? '-90deg' : '90deg'});
+      `}
+    `;
+});
+StyledAppShellCaretIcon.defaultProps = defaultThemeProp;
+export const StyledNavListItem = styled.li(({ theme }) => {
+    const { navOpen } = useContext(AppShellContext);
+    const activeBackground = tryCatch(() => rgba('#000000', theme.base.transparency['transparent-4']));
+    return css `
+    display: block;
+    position: relative;
+    ${StyledIcon} {
+      font-size: 1.25rem;
+    }
-        ${StyledNodeText} {
-          font-weight: ${fontWeight['semi-bold']};
-        }
+    > :first-child {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: calc(1.25 * ${theme.base.spacing}) 0;
+      white-space: nowrap;
+      color: rgba(255, 255, 255, 0.7);
+      cursor: pointer;
+      font-weight: ${theme.base['font-weight']['semi-bold']};
+      text-decoration: none;
-        ${StyledNodeInteraction} {
-          padding-block-start: calc(0.5 * ${spacing});
-          padding-block-end: calc(0.5 * ${spacing});
-          &:hover,
-          &[aria-current='true'] {
-            background-color: ${hoverBg};
-          }
+      span {
+        overflow: hidden;
+        color: inherit;
+      }
-          &[aria-current='true'] {
-            ${StyledNodeIcon},
-            ${StyledNodeText} {
-              color: ${colors.blue.light};
-            }
-          }
-        }
+      &:hover,
+      &:focus {
+        color: ${theme.base.palette.light};
+        background: rgba(255, 255, 255, 0.05);
       }
-      /* Style for main is here since nav(the "&") may be conditionally rendered. */
-      & + ${StyledMain} {
-        margin-inline-start: ${navState === 'expanding' || navState === 'expanded'
-        ? '14rem'
-        : '1.5rem'};
+      &:focus {
+        outline: none;
+        box-shadow: ${theme.base.shadow['focus-inset']};
       }
-      @media (pointer: coarse) {
-        height: calc(100vh - 8rem);
+      ${StyledAppShellCaretIcon}:last-child {
+        position: absolute;
+        left: ${navOpen ? 'auto' : '100%'};
+        ${navOpen &&
+        css `
+          inset-inline-end: 1rem;
+        `}
+        margin: 0;
+        opacity: ${navOpen ? '1' : '0'};
+        transition-property: opacity;
       }
-      @media (min-width: ${breakpoints.md}) {
-        height: calc(100vh - 3rem);
+      ${StyledIcon}:first-child {
+        flex-shrink: 0;
+        margin: 0 calc((${navWidth} - 1.125rem) / 2);
       }
-    `;
+    }
+    &[aria-current='page'] > :first-child,
+    &[aria-current='true'] > :first-child,
+    &:has([aria-current='page']) > :first-child,
+    &:has([aria-current='true']) > :first-child {
+      color: ${theme.base.colors.blue.light};
+      background-color: ${activeBackground};
+    }
+  `;
 });
-StyledNav.defaultProps = defaultThemeProp;
+StyledNavListItem.defaultProps = defaultThemeProp;
+export const StyledNavList = styled.ul ``;
 //# sourceMappingURL=AppShell.styles.js.map

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

	@@ -1 +1 @@
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 StyledAvatar\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 height: auto;\n border-bottom: 0.0625rem solid ${borderColor};\n transition: height ${theme.base.animation.speed} ${theme.base.animation.timing['ease-out']};\n padding: calc(1.2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing});\n\n div {\n min-width: 0;\n }\n\n li {\n color: ${theme.base.palette.info};\n }\n\n ${StyledAvatar} {\n flex-shrink: 0;\n }\n `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerHeader = styled(StyledHeader)(({ theme }) => {\n return css`\n padding: calc(2 * ${theme.base.spacing});\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 word-break: break-word;\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: ${theme.base.shadow['focus-inset']};\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(\n ({\n theme: {\n base: { animation, breakpoints, palette }\n }\n }) => {\n return css`\n position: relative;\n min-height: calc(100vh - 6rem);\n background-color: ${palette['app-background']};\n transition: margin ${animation.speed} ${animation.timing.ease};\n\n @media (pointer: coarse) {\n min-height: calc(100vh - 8rem);\n }\n\n @media (min-width: ${breakpoints.md}) {\n min-height: calc(100vh - 3rem);\n }\n `;\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(\n ({\n theme: {\n base: {\n breakpoints,\n colors,\n animation,\n spacing,\n 'custom-scrollbar': customScrollbar,\n 'border-radius': borderRadius,\n 'font-weight': fontWeight\n },\n components: { 'app-shell': appShell }\n }\n }) => {\n const { navState } = useContext(AppShellContext);\n\n return css`\n position: fixed;\n z-index: 1;\n height: calc(100vh - 6rem);\n background: ${appShell.nav['background-color']};\n\n &,\n ${StyledInnerNav} {\n width: ${navState === 'expanding' \|\| navState === 'expanded' ? '14' : '1.5'}rem;\n transition: width ${animation.speed} ${animation.timing.ease};\n }\n\n ${customScrollbar &&\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 ${borderRadius});\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 ${spacing});\n height: 100%;\n }\n\n ${StyledStandardTree} {\n color: ${colors.white};\n\n ${StyledNodeText} {\n font-weight: ${fontWeight['semi-bold']};\n }\n\n ${StyledNodeInteraction} {\n padding-block-start: calc(0.5 * ${spacing});\n padding-block-end: calc(0.5 * ${spacing});\n &:hover,\n &[aria-current='true'] {\n background-color: ${hoverBg};\n }\n\n &[aria-current='true'] {\n ${StyledNodeIcon},\n ${StyledNodeText} {\n color: ${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 @media (pointer: coarse) {\n height: calc(100vh - 8rem);\n }\n\n @media (min-width: ${breakpoints.md}) {\n height: calc(100vh - 3rem);\n }\n `;\n }\n);\n\nStyledNav.defaultProps = defaultThemeProp;\n"]}
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, rgba } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n tryCatch,\n defaultThemeProp,\n Button,\n StyledIcon,\n useDirection,\n calculateFontSize\n} from '@pega/cosmos-react-core';\nimport {\n StyledToggleIcon,\n StyledNodeText,\n StyledNodeInteraction,\n StyledStandardTree\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nimport AppShellContext from './AppShellContext';\n\nconst navWidth = '3rem';\nconst navOpenWidth = '14rem';\n\nexport const StyledUtils = styled.div(({ theme }) => {\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n\n return css`\n padding-block: ${theme.base.spacing};\n border-block-start: 0.0625rem solid ${borderColor};\n `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellToggleButton = styled(Button)<{ open: boolean }>(({ theme, open }) => {\n return css`\n background-color: ${theme.base.palette.dark};\n color: ${theme.base.palette.light};\n border: none;\n\n ${open &&\n css`\n padding-inline: 1rem;\n `}\n\n ${StyledIcon} {\n width: 1.25rem;\n height: 1.25rem;\n font-weight: bold;\n }\n\n &:enabled:focus,\n :not([disabled]):focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledAppShellToggleButton.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(() => {\n return css`\n height: 100%;\n overflow-y: auto;\n `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main<{\n navOpen: boolean;\n}>(\n ({\n navOpen,\n theme: {\n base: { animation, breakpoints, palette }\n }\n }) => {\n return css`\n position: relative;\n min-height: calc(100vh - 6rem);\n background-color: ${palette['app-background']};\n margin-inline-start: ${navWidth};\n transition: margin-inline-start ${`${animation.speed} ${animation.timing.ease}`};\n\n @media (pointer: coarse) {\n min-height: calc(100vh - 8rem);\n }\n\n @media (min-width: ${breakpoints.md}) {\n height: calc(100vh - 3rem);\n }\n\n ${navOpen &&\n css`\n margin-inline-start: ${navOpenWidth};\n `}\n `;\n }\n);\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav(\n ({\n theme: {\n base: {\n breakpoints,\n colors,\n palette,\n animation,\n spacing,\n shadow,\n 'custom-scrollbar': customScrollbar,\n 'border-radius': borderRadius,\n 'font-size': fontSize,\n 'font-scale': fontScale\n },\n components: { 'app-shell': appShell }\n }\n }) => {\n const { navState } = useContext(AppShellContext);\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n position: fixed;\n z-index: 1;\n height: calc(100vh - 6rem);\n background: ${appShell.nav['background-color']};\n width: ${navState === 'opening' \|\| navState === 'open' ? navOpenWidth : navWidth};\n transition: width ${animation.speed} ${animation.timing.ease};\n display: flex;\n\n ${StyledStandardTree} {\n background-color: ${palette.dark};\n\n ${StyledNodeText}, ${StyledToggleIcon} {\n color: rgba(255, 255, 255, 0.7);\n font-size: ${fontSizes.xxs};\n }\n\n ${StyledNodeInteraction} {\n padding-block-start: calc(0.5 * ${spacing});\n padding-block-end: calc(0.5 * ${spacing});\n\n &:hover {\n background: rgba(255, 255, 255, 0.1);\n\n ${StyledNodeText} {\n color: ${palette.light};\n }\n }\n\n &:focus {\n box-shadow: ${shadow['focus-inset']};\n }\n\n &[aria-current='page'],\n &[aria-current='true'] {\n background: rgba(255, 255, 255, 0.05);\n\n ${StyledNodeText} {\n color: ${colors.blue.light};\n }\n }\n }\n\n &:has(:focus-visible) {\n box-shadow: inset 0 0 0 0.125rem #71c1ff99;\n }\n }\n\n ${customScrollbar &&\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 ${borderRadius});\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 @media (pointer: coarse) {\n height: calc(100vh - 8rem);\n }\n\n @media (min-width: ${breakpoints.md}) {\n height: calc(100vh - 3rem);\n }\n `;\n }\n);\n\nStyledNav.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellCaretIcon = styled.svg<{ nestedListCollapsed?: boolean }>(\n ({ nestedListCollapsed, theme }) => {\n const { rtl } = useDirection();\n\n return css`\n transition-property: transform;\n transition-duration: ${theme.base.animation.speed};\n transition-timing-function: ${theme.base.animation.timing.ease};\n\n ${nestedListCollapsed === false &&\n css`\n transform: rotateZ(${rtl ? '-90deg' : '90deg'});\n `}\n `;\n }\n);\n\nStyledAppShellCaretIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNavListItem = styled.li(({ theme }) => {\n const { navOpen } = useContext(AppShellContext);\n const activeBackground = tryCatch(() =>\n rgba('#000000', theme.base.transparency['transparent-4'])\n );\n\n return css`\n display: block;\n position: relative;\n ${StyledIcon} {\n font-size: 1.25rem;\n }\n\n > :first-child {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n padding: calc(1.25 ${theme.base.spacing}) 0;\n white-space: nowrap;\n color: rgba(255, 255, 255, 0.7);\n cursor: pointer;\n font-weight: ${theme.base['font-weight']['semi-bold']};\n text-decoration: none;\n\n span {\n overflow: hidden;\n color: inherit;\n }\n\n &:hover,\n &:focus {\n color: ${theme.base.palette.light};\n background: rgba(255, 255, 255, 0.05);\n }\n\n &:focus {\n outline: none;\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n\n ${StyledAppShellCaretIcon}:last-child {\n position: absolute;\n left: ${navOpen ? 'auto' : '100%'};\n ${navOpen &&\n css`\n inset-inline-end: 1rem;\n `}\n margin: 0;\n opacity: ${navOpen ? '1' : '0'};\n transition-property: opacity;\n }\n\n ${StyledIcon}:first-child {\n flex-shrink: 0;\n margin: 0 calc((${navWidth} - 1.125rem) / 2);\n }\n }\n\n &[aria-current='page'] > :first-child,\n &[aria-current='true'] > :first-child,\n &:has([aria-current='page']) > :first-child,\n &:has([aria-current='true']) > :first-child {\n color: ${theme.base.colors.blue.light};\n background-color: ${activeBackground};\n }\n `;\n});\n\nStyledNavListItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul``;\n"]}

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

@@ -1,40 +1,67 @@
-import { Dispatch, ReactNode, Ref, SetStateAction } from 'react';
-import { StandardTreeProps, DrawerProps, NoChildrenProp, AvatarProps, OmitStrict } from '@pega/cosmos-react-core';
-import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
+import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import { AsProp, BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import { openCloseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
 import { AppHeaderProps } from './Header/AppHeader.types';
-export interface AppShellProps extends NoChildrenProp {
-    main: ReactNode;
-    appInfo: AppInfoProps;
-    appHeader: AppHeaderProps;
-    navigation: StandardTreeProps;
-    hideNav?: boolean;
-    utils?: UtilsProps;
-    ref?: Ref<HTMLElement>;
+export interface NestedNavItemProps {
+    /** Unique id for the nav item. */
+    id: string;
+    /** The display text of the nav item. */
+    label: string;
+    /** URL or DOM id to navigate to. This will render the nav item as a link. */
+    href?: string;
+    /** Click handler for the nav item. */
+    onClick?: (id: string, e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+    /** A set of nested nav items. */
+    items?: NestedNavItemProps[];
 }
-export interface UtilsProps {
-    items: UtilItem[];
-    currentItemId?: UtilItem['id'];
-    onItemClick: (id: UtilItem['id']) => void;
-    drawer?: Pick<DrawerProps, 'onBeforeOpen' | 'onAfterOpen' | 'onBeforeClose' | 'onAfterClose'>;
-    devMode?: boolean;
+interface ParentNavItemProps {
+    /** A set of nested nav items. */
+    items?: NestedNavItemProps[];
+    href?: never;
+    onClick?: never;
 }
-export interface UtilItem {
+interface NavLinkProps {
+    /** URL or DOM id to navigate to. This will render the nav item as a link. */
+    href?: string;
+    /** Click handler for the link. If no href if passed, this will render the nav item as a button. */
+    onClick?: (id: string, e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+    items?: never;
+}
+export declare type NavItemProps = {
+    /** Unique id for the nav item. */
     id: string;
+    /** The display text of the nav item. */
     label: string;
+    /** The name of the Cosmos Icon to render as a visual. Only applies to top-level nav items. */
+    icon: string;
+} & (ParentNavItemProps | NavLinkProps);
+export interface NavProps {
+    /** A set of nav items that will render as a list in the App Shell. */
+    items: NavItemProps[];
+    /** The id of the active nav item. */
+    currentItemId?: NavItemProps['id'];
 }
-export interface AppInfoProps {
-    text: string;
-    visual?: OmitStrict<AvatarProps, 'name' | 'shape' | 'size' | 'status'>;
-    meta?: string[];
+export interface AppShellProps extends NoChildrenProp {
+    /** The content of the application. */
+    main: ReactNode;
+    /** Props related to the App Shell header. */
+    appHeader: AppHeaderProps;
+    /** Props related to the App Shell side navigation. */
+    nav: NavProps;
 }
 export interface AppShellContextValue {
-    drawerOpen: boolean;
-    setDrawerOpen: Dispatch<SetStateAction<boolean>>;
-    setDrawerData: Dispatch<SetStateAction<UtilItem | undefined>>;
-    drawerData?: {
-        label: string;
-        id: string;
-    };
-    navState: typeof expandCollapseStates[keyof typeof expandCollapseStates];
+    navOpen: boolean;
+    navState: typeof openCloseStates[keyof typeof openCloseStates];
+    openNav: () => void;
+}
+export interface NavItemRenderProps extends AsProp, BaseProps, NoChildrenProp {
+    id: NavItemProps['id'];
+    label: NavItemProps['label'];
+    visual: ReactNode;
+    href?: NavLinkProps['href'];
+    onClick?: NavLinkProps['onClick'];
+    items?: NestedNavItemProps['items'];
+    currentItemId?: NavItemProps['id'];
 }
+export {};
 //# sourceMappingURL=AppShell.types.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,~~QAAQ~~,EAAE,~~SAAS~~,EAAE,~~GAAG~~,EAAE,~~cAAc,EAAE,~~MAAM,OAAO,CAAC;~~AAEjE~~,OAAO,~~EACL~~,~~iBAAiB~~,~~EACjB~~,~~WAAW~~,~~EACX~~,cAAc,~~EACd~~,~~WAAW,EACX,UAAU,EACX,~~MAAM,yBAAyB,CAAC;~~AACjC~~,OAAO,EAAE,~~oBAAoB~~,EAAE,MAAM,sDAAsD,CAAC;~~AAE5F~~,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,MAAM,WAAW,~~aAAc~~,~~SAAQ,cAAc~~;~~IACnD~~,~~IAAI~~,EAAE,~~SAAS~~,CAAC;~~IAChB~~,~~OAAO~~,EAAE,~~YAAY~~,CAAC;~~IACtB~~,~~SAAS~~,~~EAAE~~,~~cAAc,~~CAAC~~;IAC1B~~,~~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~~,CAAC,~~EAAE~~,~~UAAU~~,CAAC,WAAW,EAAE,~~MAAM~~,~~GAAG~~,~~OAAO~~,~~GAAG~~,~~MAAM~~,~~GAAG~~,~~QAAQ~~,CAAC,CAAC;~~IACvE~~,IAAI,CAAC,EAAE,~~MAAM~~,EAAE,CAAC;~~CACjB~~;AAED,MAAM,WAAW,oBAAoB;IACnC,~~UAAU~~,EAAE,OAAO,CAAC;~~IACpB~~,~~aAAa~~,EAAE,~~QAAQ~~,CAAC,~~cAAc~~,~~CAAC,~~OAAO,~~CAAC~~,CAAC,CAAC;~~IACjD~~,~~aAAa~~,EAAE,~~QAAQ~~,CAAC,~~cAAc~~,~~CAAC~~,~~QAAQ~~,~~GAAG~~,SAAS,CAAC,CAAC,CAAC;~~IAC9D~~,~~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~~"}
1	+ {"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,sDAAsD,CAAC;AAEvF,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,MAAM,WAAW,kBAAkB;IACjC,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxF,iCAAiC;IACjC,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAC9B;AAED,UAAU,kBAAkB;IAC1B,iCAAiC;IACjC,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,YAAY;IACpB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mGAAmG;IACnG,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxF,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,oBAAY,YAAY,GAAG;IACzB,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,CAAC,kBAAkB,GAAG,YAAY,CAAC,CAAC;AAExC,MAAM,WAAW,QAAQ;IACvB,sEAAsE;IACtE,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,qCAAqC;IACrC,aAAa,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;CACpC;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,sCAAsC;IACtC,IAAI,EAAE,SAAS,CAAC;IAChB,6CAA6C;IAC7C,SAAS,EAAE,cAAc,CAAC;IAC1B,sDAAsD;IACtD,GAAG,EAAE,QAAQ,CAAC;CACf;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,eAAe,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC;IAC/D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,kBAAmB,SAAQ,MAAM,EAAE,SAAS,EAAE,cAAc;IAC3E,EAAE,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;IACvB,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC7B,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpC,aAAa,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;CACpC"}