@pega/cosmos-react-build 5.0.0-dev.4.8 → 5.0.0-dev.5.0

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

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import type { AppShellProps } from './AppShell.types';
+declare const AppShell: FunctionComponent<AppShellProps & ForwardProps>;
+export default AppShell;
+//# sourceMappingURL=AppShell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA6C,MAAM,OAAO,CAAC;AAErF,OAAO,EAIL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAkBjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKtD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA0G5D,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/lib/components/AppShell/AppShell.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { registerIcon, useI18n, Icon, useDirection, useConsolidatedRef, useElement, useTransitionState, Flex, Tooltip, SkipLinks } from '@pega/cosmos-react-core';
+import { openCloseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
+import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
+import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
+import * as caseSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/case-solid.icon';
+import * as barsIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bars.icon';
+import * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';
+import * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';
+import AppHeader from './Header/AppHeader';
+import { StyledScrollWrap, StyledMain, StyledUtils, StyledNav, StyledAppShellToggleButton } from './AppShell.styles';
+import AppShellContext from './AppShellContext';
+import NavigationList from './NavigationList';
+registerIcon(timesIcon, plusIcon, caseSolidIcon, barsIcon, caretRightIcon, caretLeftIcon);
+const AppShell = forwardRef(function AppShell({ main, appHeader, nav, ...restProps }, ref) {
+    const t = useI18n();
+    const { start, end } = useDirection();
+    const navRef = useConsolidatedRef(ref);
+    const [expandCollapseEl, setExpandCollapseEl] = useElement();
+    const { state: navState, set: setNavState } = useTransitionState({
+        ref: navRef,
+        property: 'width',
+        states: openCloseStates,
+        defaultState: nav?.defaultExpanded === false ? 'closed' : 'open'
+    });
+    const skipLinks = useMemo(() => [
+        {
+            label: t('go_to_main_content'),
+            target: { ariaLabel: t('main_content'), selector: 'main' }
+        }
+    ], [t]);
+    const openNav = () => {
+        setNavState('open');
+    };
+    const closeNav = () => {
+        setNavState('closed');
+    };
+    return (_jsxs(AppShellContext.Provider, { value: useMemo(() => ({
+            navOpen: navState === 'open' || navState === 'opening',
+            navState,
+            openNav
+        }), [navState]), children: [_jsx(SkipLinks, { items: skipLinks }), _jsx(AppHeader, { ...appHeader }), nav && (_jsxs(Flex, { ...restProps, container: {
+                    direction: 'column',
+                    justify: 'between'
+                }, ref: navRef, as: StyledNav, children: [_jsx(StyledScrollWrap, { onClick: () => {
+                            if (['closing', 'closed'].includes(navState)) {
+                                openNav();
+                            }
+                            else {
+                                closeNav();
+                            }
+                        }, children: _jsx(NavigationList, { ...nav }) }), _jsxs(Flex, { as: StyledUtils, container: { justify: 'center' }, children: [_jsx(StyledAppShellToggleButton, { icon: true, ref: setExpandCollapseEl, compact: true, variant: 'simple', onClick: () => {
+                                    setNavState(navState === 'closed' ? 'open' : 'closed');
+                                }, "aria-label": navState === 'closed' ? t('expand_navigation') : t('collapse_navigation'), children: _jsx(Icon, { name: `arrow-micro-${['closed', 'closing'].includes(navState) ? end : start}` }) }), ['open', 'closed'].includes(navState) && (_jsx(Tooltip, { target: expandCollapseEl, placement: 'right', showDelay: 'none', hideDelay: 'none', children: t(navState === 'closed' ? 'expand_navigation' : 'collapse_navigation') }))] })] })), _jsx(StyledMain, { navOpen: ['open', 'opening'].includes(navState), hideNav: !nav, children: main })] }));
+});
+export default AppShell;
+//# sourceMappingURL=AppShell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, Ref, useMemo } from 'react';\n\nimport {\n  registerIcon,\n  useI18n,\n  Icon,\n  ForwardProps,\n  useDirection,\n  useConsolidatedRef,\n  useElement,\n  useTransitionState,\n  SkipLinksProps,\n  Flex,\n  Tooltip,\n  SkipLinks\n} from '@pega/cosmos-react-core';\nimport { openCloseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\nimport * as caseSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/case-solid.icon';\nimport * as barsIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bars.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\n\nimport AppHeader from './Header/AppHeader';\nimport {\n  StyledScrollWrap,\n  StyledMain,\n  StyledUtils,\n  StyledNav,\n  StyledAppShellToggleButton\n} from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\nimport type { AppShellProps } from './AppShell.types';\nimport NavigationList from './NavigationList';\n\nregisterIcon(timesIcon, plusIcon, caseSolidIcon, barsIcon, caretRightIcon, caretLeftIcon);\n\nconst AppShell: FunctionComponent<AppShellProps & ForwardProps> = forwardRef(function AppShell(\n  { main, appHeader, nav, ...restProps }: PropsWithoutRef<AppShellProps>,\n  ref: Ref<HTMLDivElement>\n) {\n  const t = useI18n();\n\n  const { start, end } = useDirection();\n  const navRef = useConsolidatedRef(ref);\n\n  const [expandCollapseEl, setExpandCollapseEl] = useElement<HTMLButtonElement>();\n\n  const { state: navState, set: setNavState } = useTransitionState({\n    ref: navRef,\n    property: 'width',\n    states: openCloseStates,\n    defaultState: nav?.defaultExpanded === false ? 'closed' : 'open'\n  });\n\n  const skipLinks: SkipLinksProps['items'] = useMemo(\n    () => [\n      {\n        label: t('go_to_main_content'),\n        target: { ariaLabel: t('main_content'), selector: 'main' }\n      }\n    ],\n    [t]\n  );\n\n  const openNav = () => {\n    setNavState('open');\n  };\n\n  const closeNav = () => {\n    setNavState('closed');\n  };\n\n  return (\n    <AppShellContext.Provider\n      value={useMemo(\n        () => ({\n          navOpen: navState === 'open' || navState === 'opening',\n          navState,\n          openNav\n        }),\n        [navState]\n      )}\n    >\n      <SkipLinks items={skipLinks} />\n      <AppHeader {...appHeader} />\n\n      {nav && (\n        <Flex\n          {...restProps}\n          container={{\n            direction: 'column',\n            justify: 'between'\n          }}\n          ref={navRef}\n          as={StyledNav}\n        >\n          <StyledScrollWrap\n            onClick={() => {\n              if (['closing', 'closed'].includes(navState)) {\n                openNav();\n              } else {\n                closeNav();\n              }\n            }}\n          >\n            <NavigationList {...nav} />\n          </StyledScrollWrap>\n\n          <Flex as={StyledUtils} container={{ justify: 'center' }}>\n            <StyledAppShellToggleButton\n              icon\n              ref={setExpandCollapseEl}\n              compact\n              variant='simple'\n              onClick={() => {\n                setNavState(navState === 'closed' ? 'open' : 'closed');\n              }}\n              aria-label={navState === 'closed' ? t('expand_navigation') : t('collapse_navigation')}\n            >\n              <Icon\n                name={`arrow-micro-${['closed', 'closing'].includes(navState) ? end : start}`}\n              />\n            </StyledAppShellToggleButton>\n            {['open', 'closed'].includes(navState) && (\n              <Tooltip\n                target={expandCollapseEl}\n                placement='right'\n                showDelay='none'\n                hideDelay='none'\n              >\n                {t(navState === 'closed' ? 'expand_navigation' : 'collapse_navigation')}\n              </Tooltip>\n            )}\n          </Flex>\n        </Flex>\n      )}\n\n      <StyledMain navOpen={['open', 'opening'].includes(navState)} hideNav={!nav}>\n        {main}\n      </StyledMain>\n    </AppShellContext.Provider>\n  );\n});\n\nexport default AppShell;\n"]}

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const StyledUtils: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAppShellToggleButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledScrollWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledMain: import("styled-components").StyledComponent<"main", import("styled-components").DefaultTheme, {
+    navOpen: boolean;
+    hideNav: boolean;
+}, never>;
+export declare const StyledNav: import("styled-components").StyledComponent<"nav", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAppShellCaretIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, import("styled-components").DefaultTheme, {
+    nestedListCollapsed?: boolean | undefined;
+}, never>;
+export declare const StyledNavListItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
+    activeTreeRoot?: boolean | undefined;
+}, never>;
+export declare const StyledNavList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=AppShell.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":";AAyBA,eAAO,MAAM,WAAW,yGAStB,CAAC;AAIH,eAAO,MAAM,0BAA0B,qOAiBrC,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAK3B,CAAC;AAIH,eAAO,MAAM,UAAU;aACZ,OAAO;aACP,OAAO;SAoCjB,CAAC;AAIF,eAAO,MAAM,SAAS,yGAkIrB,CAAC;AAIF,eAAO,MAAM,uBAAuB;;SAenC,CAAC;AAIF,eAAO,MAAM,iBAAiB;;SAwE7B,CAAC;AAIF,eAAO,MAAM,aAAa,wGAAc,CAAC"}

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

@@ -0,0 +1,269 @@
+import styled, { css } from 'styled-components';
+import { lighten, rgba } from 'polished';
+import { useContext } from 'react';
+import { tryCatch, defaultThemeProp, Button, StyledIcon, useDirection, calculateFontSize, Icon } 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 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-block: ${theme.base.spacing};
+    border-block-start: 0.0625rem solid ${borderColor};
+  `;
+});
+StyledUtils.defaultProps = defaultThemeProp;
+export const StyledAppShellToggleButton = styled(Button)(({ theme }) => {
+    return css `
+    background-color: ${theme.base.palette.dark};
+    color: ${theme.base.palette.light};
+    border: none;
+
+    ${StyledIcon} {
+      width: 1.25rem;
+      height: 1.25rem;
+      font-weight: bold;
+    }
+
+    &:enabled:focus,
+    :not([disabled]):focus {
+      box-shadow: ${theme.base.shadow.focus};
+    }
+  `;
+});
+StyledAppShellToggleButton.defaultProps = defaultThemeProp;
+export const StyledScrollWrap = styled.div(() => {
+    return css `
+    height: 100%;
+    overflow-y: auto;
+  `;
+});
+StyledScrollWrap.defaultProps = defaultThemeProp;
+export const StyledMain = styled.main(({ navOpen, hideNav, theme: { base: { animation, breakpoints, palette } } }) => {
+    return css `
+      position: relative;
+      min-height: calc(100vh - 6rem);
+      background-color: ${palette['app-background']};
+      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);
+      }
+
+      ${navOpen &&
+        css `
+        margin-inline-start: ${navOpenWidth};
+      `}
+
+      ${hideNav &&
+        css `
+        transition-duration: 0s;
+        margin-inline-start: 0;
+      `}
+    `;
+});
+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.s};
+        }
+
+        ${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};
+            }
+          }
+        }
+
+        &:has(:focus-visible) {
+          box-shadow: inset 0 0 0 0.125rem #71c1ff99;
+        }
+      }
+
+      ${customScrollbar &&
+        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 * ${borderRadius});
+            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 */
+        }
+      `}
+
+      @media (pointer: coarse) {
+        height: calc(100vh - 8rem);
+      }
+
+      @media (min-width: ${breakpoints.md}) {
+        height: calc(100vh - 3rem);
+      }
+    `;
+});
+StyledNav.defaultProps = defaultThemeProp;
+export const StyledAppShellCaretIcon = styled(Icon)(({ nestedListCollapsed, theme }) => {
+    const { rtl } = useDirection();
+    return css `
+      transition-property: transform;
+      transition-duration: ${theme.base.animation.speed};
+      transition-timing-function: ${theme.base.animation.timing.ease};
+
+      ${nestedListCollapsed === false &&
+        css `
+        transform: rotateZ(${rtl ? '-90deg' : '90deg'});
+      `}
+    `;
+});
+StyledAppShellCaretIcon.defaultProps = defaultThemeProp;
+export const StyledNavListItem = styled.li(({ activeTreeRoot, 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;
+      }
+
+      > :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;
+
+        span {
+          overflow: hidden;
+          color: inherit;
+        }
+
+        &:hover,
+        &:focus {
+          color: ${theme.base.palette.light};
+          background: rgba(255, 255, 255, 0.05);
+        }
+
+        &:focus {
+          outline: none;
+          box-shadow: ${theme.base.shadow['focus-inset']};
+        }
+
+        ${activeTreeRoot &&
+        css `
+          color: ${theme.base.colors.blue.light};
+          background-color: ${activeBackground};
+        `}
+
+        ${StyledAppShellCaretIcon}:last-child {
+          position: absolute;
+          left: ${navOpen ? 'auto' : '100%'};
+          ${navOpen &&
+        css `
+            inset-inline-end: 1rem;
+          `}
+          margin: 0;
+          opacity: ${navOpen ? '1' : '0'};
+          transition-property: opacity;
+        }
+
+        ${StyledIcon}:first-child {
+          margin: 0 calc((${navWidth} - 1.125rem) / 2);
+        }
+      }
+
+      &[aria-current='page'] > :first-child,
+      &[aria-current='true'] > :first-child {
+        color: ${theme.base.colors.blue.light};
+        background-color: ${activeBackground};
+      }
+    `;
+});
+StyledNavListItem.defaultProps = defaultThemeProp;
+export const StyledNavList = styled.ul ``;
+//# 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, rgba } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n  tryCatch,\n  defaultThemeProp,\n  Button,\n  StyledIcon,\n  useDirection,\n  calculateFontSize,\n  Icon\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)(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette.dark};\n    color: ${theme.base.palette.light};\n    border: none;\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  hideNav: boolean;\n}>(\n  ({\n    navOpen,\n    hideNav,\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        min-height: calc(100vh - 3rem);\n      }\n\n      ${navOpen &&\n      css`\n        margin-inline-start: ${navOpenWidth};\n      `}\n\n      ${hideNav &&\n      css`\n        transition-duration: 0s;\n        margin-inline-start: 0;\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.s};\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(Icon)<{ 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<{ activeTreeRoot?: boolean }>(\n  ({ activeTreeRoot, 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        ${activeTreeRoot &&\n        css`\n          color: ${theme.base.colors.blue.light};\n          background-color: ${activeBackground};\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          margin: 0 calc((${navWidth} - 1.125rem) / 2);\n        }\n      }\n\n      &[aria-current='page'] > :first-child,\n      &[aria-current='true'] > :first-child {\n        color: ${theme.base.colors.blue.light};\n        background-color: ${activeBackground};\n      }\n    `;\n  }\n);\n\nStyledNavListItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul``;\n"]}

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

@@ -0,0 +1,72 @@
+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 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[];
+}
+interface ParentNavItemProps {
+    /** A set of nested nav items. */
+    items?: NestedNavItemProps[];
+    href?: never;
+    onClick?: never;
+}
+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 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'];
+    /**
+     * If true, the nav will be expanded on initial load.
+     * @default true
+     */
+    defaultExpanded?: boolean;
+}
+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 {
+    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

@@ -0,0 +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,MAAM,MAAM,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;IACnC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,sCAAsC;IACtC,IAAI,EAAE,SAAS,CAAC;IAChB,6CAA6C;IAC7C,SAAS,EAAE,cAAc,CAAC;IAC1B,sDAAsD;IACtD,GAAG,CAAC,EAAE,QAAQ,CAAC;CAChB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC;IACjE,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"}

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 { KeyboardEvent, MouseEvent, ReactNode } from 'react';\n\nimport { AsProp, BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\nimport { openCloseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nimport { AppHeaderProps } from './Header/AppHeader.types';\n\nexport interface NestedNavItemProps {\n  /** Unique id for the nav item. */\n  id: string;\n  /** The display text of the nav item. */\n  label: string;\n  /** URL or DOM id to navigate to. This will render the nav item as a link. */\n  href?: string;\n  /** Click handler for the nav item. */\n  onClick?: (id: string, e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;\n  /** A set of nested nav items. */\n  items?: NestedNavItemProps[];\n}\n\ninterface ParentNavItemProps {\n  /** A set of nested nav items. */\n  items?: NestedNavItemProps[];\n  href?: never;\n  onClick?: never;\n}\n\ninterface NavLinkProps {\n  /** URL or DOM id to navigate to. This will render the nav item as a link. */\n  href?: string;\n  /** Click handler for the link. If no href if passed, this will render the nav item as a button. */\n  onClick?: (id: string, e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;\n  items?: never;\n}\n\nexport type NavItemProps = {\n  /** Unique id for the nav item. */\n  id: string;\n  /** The display text of the nav item. */\n  label: string;\n  /** The name of the Cosmos Icon to render as a visual. Only applies to top-level nav items. */\n  icon: string;\n} & (ParentNavItemProps | NavLinkProps);\n\nexport interface NavProps {\n  /** A set of nav items that will render as a list in the App Shell. */\n  items: NavItemProps[];\n  /** The id of the active nav item. */\n  currentItemId?: NavItemProps['id'];\n  /**\n   * If true, the nav will be expanded on initial load.\n   * @default true\n   */\n  defaultExpanded?: boolean;\n}\n\nexport interface AppShellProps extends NoChildrenProp {\n  /** The content of the application. */\n  main: ReactNode;\n  /** Props related to the App Shell header. */\n  appHeader: AppHeaderProps;\n  /** Props related to the App Shell side navigation. */\n  nav?: NavProps;\n}\n\nexport interface AppShellContextValue {\n  navOpen: boolean;\n  navState: (typeof openCloseStates)[keyof typeof openCloseStates];\n  openNav: () => void;\n}\n\nexport interface NavItemRenderProps extends AsProp, BaseProps, NoChildrenProp {\n  id: NavItemProps['id'];\n  label: NavItemProps['label'];\n  visual: ReactNode;\n  href?: NavLinkProps['href'];\n  onClick?: NavLinkProps['onClick'];\n  items?: NestedNavItemProps['items'];\n  currentItemId?: NavItemProps['id'];\n}\n"]}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+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,+CAInB,CAAC;AAEH,eAAe,eAAe,CAAC"}

package/lib/components/AppShell/AppShellContext.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+const AppShellContext = createContext({
+    navOpen: false,
+    navState: 'closed',
+    openNav: () => { }
+});
+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,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;CAClB,CAAC,CAAC;AAEH,eAAe,eAAe,CAAC","sourcesContent":["import { createContext } from 'react';\n\nimport { AppShellContextValue } from './AppShell.types';\n\nconst AppShellContext = createContext<AppShellContextValue>({\n  navOpen: false,\n  navState: 'closed',\n  openNav: () => {}\n});\n\nexport default AppShellContext;\n"]}

package/lib/components/AppShell/Header/AppHeader.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { AppHeaderProps } from './AppHeader.types';
+declare const AppHeader: FunctionComponent<AppHeaderProps & ForwardProps>;
+export default AppHeader;
+//# sourceMappingURL=AppHeader.d.ts.map

package/lib/components/AppShell/Header/AppHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAIL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAmBjC,OAAO,EAAE,cAAc,EAAyB,MAAM,mBAAmB,CAAC;AAkJ1E,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAiG9D,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/lib/components/AppShell/Header/AppHeader.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useState, useRef } from 'react';
+import { ContextSwitcher, Flex, SearchInput, useBreakpoint, Button, Icon, useI18n, Tooltip, useElement, Avatar } from '@pega/cosmos-react-core';
+import AppShellOperator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';
+import { StyledAppHeaderSearchForm, StyledAppHeaderOperator } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';
+import { StyledAppHeader, StyledTabs, StyledUtilsContainer, StyledBrandContainer, StyledAppHeaderSearch, StyledAppName, StyledAppVersion, StyledBrandButton, StyledBrandImage, StyledContext } from './AppHeader.styles';
+import BranchButton from './BranchButton';
+const Links = ({ links }) => {
+    const [currentTabId, setCurrentTabId] = useState(links[0].id);
+    useEffect(() => {
+        setCurrentTabId(links[0].id);
+    }, [links]);
+    const handleTabClick = useCallback((id, e) => {
+        const newActiveTab = links.find(item => item.id === id);
+        if (newActiveTab) {
+            newActiveTab.onClick?.(id, e);
+            setCurrentTabId(newActiveTab.id);
+        }
+    }, [links]);
+    return _jsx(StyledTabs, { tabs: links, currentTabId: currentTabId, onTabClick: handleTabClick });
+};
+const AppHeaderSearch = ({ showSearchButton, setShowSearchButton, ...restProps }) => {
+    const isMediumOrAbove = useBreakpoint('md');
+    const t = useI18n();
+    const searchInputRef = useCallback(node => {
+        if (!showSearchButton && node) {
+            node.focus();
+        }
+    }, [showSearchButton]);
+    const focusSearchBtn = useRef(false);
+    const searchButtonRef = useCallback(node => {
+        if (node && focusSearchBtn.current) {
+            node.focus();
+        }
+    }, []);
+    return isMediumOrAbove || !showSearchButton ? (_jsxs(Flex, { as: StyledAppHeaderSearch, item: { shrink: 0, grow: 1 }, md: { item: { grow: 0, shrink: 1 } }, container: { justify: 'between', alignItems: 'center', gap: 1 }, children: [_jsx(StyledAppHeaderSearchForm, { role: 'search', "aria-label": t('sitewide'), onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: _jsx(SearchInput, { ...restProps, ref: searchInputRef }) }), _jsx(Button, { variant: 'simple', icon: true, onClick: () => {
+                    setShowSearchButton(true);
+                    focusSearchBtn.current = true;
+                }, label: t('collapse_search'), children: _jsx(Icon, { name: 'times' }) })] })) : (_jsx(Button, { variant: 'simple', icon: true, onClick: () => setShowSearchButton(false), ref: searchButtonRef, label: t('expand_search'), children: _jsx(Icon, { name: 'search' }) }));
+};
+const Utils = ({ operator, branch, action, appInfo }) => {
+    const isMediumOrAbove = useBreakpoint('md');
+    const isSmallOrAbove = useBreakpoint('sm');
+    const [appInfoEl, setAppInfoEl] = useElement(null);
+    return (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, md: { container: { justify: 'end' } }, item: { shrink: 1 }, as: StyledUtilsContainer, children: [appInfo && (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 0.5 }, item: { shrink: 1 }, ref: setAppInfoEl, children: [_jsx(Flex, { as: StyledAppName, item: { shrink: 1 }, children: appInfo.name }), _jsx(StyledAppVersion, { children: appInfo.version }), _jsx(Tooltip, { target: appInfoEl, hideDelay: 'none', children: `${appInfo.name} ${appInfo.version}` })] })), _jsxs(Flex, { container: { alignItems: 'center' }, children: [branch && _jsx(BranchButton, { ...branch, compact: isSmallOrAbove ? branch.compact : true }), action && (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 0.5 }, item: { shrink: 0 }, as: Button, variant: 'secondary', icon: !isMediumOrAbove, label: isMediumOrAbove ? undefined : action.text, onClick: (e) => action.onClick?.(action.id, e), disabled: action.disabled, children: [action.icon && _jsx(Icon, { name: action.icon }), isMediumOrAbove && action.text] }))] }), isMediumOrAbove && (_jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-end' }, children: _jsx(Avatar, { ...operator.avatar }) }))] }));
+};
+const AppHeader = forwardRef(function AppHeader({ contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {}, brand, utils, links }, ref) {
+    const selectedContext = contexts?.length > 1 ? contexts.find(ctx => ctx.selected) : contexts[0];
+    const isMediumOrAbove = useBreakpoint('md');
+    const [showSearchButton, setShowSearchButton] = useState(true);
+    useEffect(() => {
+        if (isMediumOrAbove && !showSearchButton) {
+            setShowSearchButton(true);
+        }
+    }, [isMediumOrAbove]);
+    return (_jsxs(Flex, { as: StyledAppHeader, container: {
+            justify: 'between',
+            alignItems: 'center',
+            colGap: 2,
+            wrap: 'wrap',
+            pad: [0, 1]
+        }, md: { container: { wrap: 'nowrap' } }, ref: ref, children: [showSearchButton && (_jsxs(Flex, { as: StyledBrandContainer, container: {
+                    justify: 'between',
+                    alignItems: 'center',
+                    gap: 1
+                }, item: { shrink: 0, alignSelf: 'stretch' }, children: [contexts && onContextClick && contexts.length > 1 && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel })), _jsxs(Flex, { as: brand.onClick || brand.href ? StyledBrandButton : 'div', variant: 'simple', container: { alignItems: 'center', justify: 'between', gap: 2, pad: 1 }, "aria-label": `${brand.label} - ${selectedContext.primary}`, onClick: brand.onClick, href: brand.href, children: [_jsx(Flex, { item: { shrink: 0 }, as: StyledBrandImage, src: brand.logo, alt: brand.label }), _jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 1 }, children: [selectedContext.visual, _jsx(StyledContext, { children: selectedContext.primary })] })] })] })), links && links.length > 0 && _jsx(Links, { links: links }), _jsxs(Flex, { container: {
+                    gap: 1,
+                    justify: 'center',
+                    alignItems: 'center'
+                }, item: { grow: showSearchButton ? 0 : 1 }, md: { item: { grow: showSearchButton ? 1 : 0 } }, children: [utils?.search && (_jsx(AppHeaderSearch, { ...utils.search, showSearchButton: showSearchButton, setShowSearchButton: setShowSearchButton })), showSearchButton && !isMediumOrAbove && utils?.operator && (_jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: utils.operator.actions, popover: { placement: 'bottom-start' }, children: _jsx(Avatar, { ...utils.operator.avatar }) }))] }), utils && _jsx(Utils, { ...utils })] }));
+});
+export default AppHeader;
+//# sourceMappingURL=AppHeader.js.map