@pega/cosmos-react-build 4.1.1 → 5.0.0-dev.10.0

package/LICENSE

@@ -0,0 +1,185 @@
+                                 Cosmos License
+                           Version 1.0, September 2020
+   This is a proprietary license that is based on the Apache 2.0 license and
+is intended to provide a similar set of rights with the exception that any and
+     all Cosmos components shall be used only with Pegasystems Software.
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work.
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+      "Pegasystems" (or "Pega") shall mean Pegasystems Inc., a Massachusetts
+      Corporation, having an office at One Rogers Street, Cambridge, MA 02142.
+
+      "Pegasystems Software" shall mean duly licensed Pegasystems software
+      and/or subscription services including but not limited to the Pega
+      Platform.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form solely for
+      use with Pegasystems Software.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License including the limitation that
+      the Work be used only with Pegasystems Software.
+
+   5. Submission of Contributions. Any Contribution intentionally submitted
+      for inclusion in the Work by You to the Licensor shall be under the
+      terms and conditions of this License, without any additional terms or
+      conditions. Notwithstanding the above, nothing herein shall supersede
+      or modify the terms of any separate license agreement you may have
+      executed with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS

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

@@ -1,5 +1,5 @@
-import { FunctionComponent } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
+import type { FunctionComponent } from 'react';
+import type { ForwardProps } from '@pega/cosmos-react-core';
 import type { AppShellProps } from './AppShell.types';
 declare const AppShell: FunctionComponent<AppShellProps & ForwardProps>;
 export default AppShell;

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

@@ -1 +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"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAcrE,OAAO,KAAK,EAAE,YAAY,EAAkB,MAAM,yBAAyB,CAAC;AAkB5E,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.map

@@ -1 +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"]}
+{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport {\n  registerIcon,\n  useI18n,\n  Icon,\n  useDirection,\n  useConsolidatedRef,\n  useElement,\n  useTransitionState,\n  Flex,\n  Tooltip,\n  SkipLinks\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, SkipLinksProps } 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

@@ -7,7 +7,7 @@ export declare const StyledMain: import("styled-components").StyledComponent<"ma
     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<"svg", import("styled-components").DefaultTheme, {
+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, {

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":";AAwBA,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"}
+{"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

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 import { lighten, rgba } from 'polished';
 import { useContext } from 'react';
-import { tryCatch, defaultThemeProp, Button, StyledIcon, useDirection, calculateFontSize } from '@pega/cosmos-react-core';
+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';
@@ -182,7 +182,7 @@ export const StyledNav = styled.nav(({ theme: { base: { breakpoints, colors, pal
     `;
 });
 StyledNav.defaultProps = defaultThemeProp;
-export const StyledAppShellCaretIcon = styled.svg(({ nestedListCollapsed, theme }) => {
+export const StyledAppShellCaretIcon = styled(Icon)(({ nestedListCollapsed, theme }) => {
     const { rtl } = useDirection();
     return css `
       transition-property: transform;

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

@@ -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, 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)(({ 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.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<{ 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"]}
+{"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

@@ -1,7 +1,7 @@
-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';
+import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import type { AsProp, BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import type { openCloseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
+import type { AppHeaderProps } from './Header/AppHeader.types';
 export interface NestedNavItemProps {
     /** Unique id for the nav item. */
     id: string;

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

@@ -1 +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"}
+{"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACjF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sDAAsD,CAAC;AAE5F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE/D,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.map

@@ -1 +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"]}
+{"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';\n\nimport type { AsProp, BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\nimport type { openCloseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nimport type { 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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { AppShellContextValue } from './AppShell.types';
+import type { 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

@@ -1 +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"}
+{"version":3,"file":"AppShellContext.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAE7D,QAAA,MAAM,eAAe,+CAInB,CAAC;AAEH,eAAe,eAAe,CAAC"}

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

@@ -1 +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"]}
+{"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 type { 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

@@ -1,6 +1,6 @@
-import { FunctionComponent } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
-import { AppHeaderProps } from './AppHeader.types';
+import type { FunctionComponent } from 'react';
+import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { 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

@@ -1 +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"}
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAE,YAAY,EAAoB,MAAM,yBAAyB,CAAC;AAmB9E,OAAO,KAAK,EAAE,cAAc,EAAyB,MAAM,mBAAmB,CAAC;AAkJ/E,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAiG9D,CAAC;AAEH,eAAe,SAAS,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  MouseEvent,\n  FC,\n  PropsWithoutRef,\n  useCallback,\n  useEffect,\n  useState,\n  useRef,\n  Dispatch,\n  SetStateAction\n} from 'react';\n\nimport {\n  ContextSwitcher,\n  Flex,\n  SearchInput,\n  ForwardProps,\n  SearchInputProps,\n  useBreakpoint,\n  Button,\n  Icon,\n  useI18n,\n  Tooltip,\n  useElement,\n  Avatar\n} from '@pega/cosmos-react-core';\nimport AppShellOperator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';\nimport {\n  StyledAppHeaderSearchForm,\n  StyledAppHeaderOperator\n} from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\n\nimport {\n  StyledAppHeader,\n  StyledTabs,\n  StyledUtilsContainer,\n  StyledBrandContainer,\n  StyledAppHeaderSearch,\n  StyledAppName,\n  StyledAppVersion,\n  StyledBrandButton,\n  StyledBrandImage,\n  StyledContext\n} from './AppHeader.styles';\nimport { AppHeaderProps, LinkProps, UtilsProps } from './AppHeader.types';\nimport BranchButton from './BranchButton';\n\nconst Links: FC<{ links: LinkProps[] }> = ({ links }) => {\n  const [currentTabId, setCurrentTabId] = useState(links[0].id);\n\n  useEffect(() => {\n    setCurrentTabId(links[0].id);\n  }, [links]);\n\n  const handleTabClick = useCallback(\n    (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      const newActiveTab = links.find(item => item.id === id);\n      if (newActiveTab) {\n        newActiveTab.onClick?.(id, e);\n        setCurrentTabId(newActiveTab.id);\n      }\n    },\n    [links]\n  );\n\n  return <StyledTabs tabs={links} currentTabId={currentTabId} onTabClick={handleTabClick} />;\n};\n\nconst AppHeaderSearch: FC<\n  SearchInputProps & {\n    showSearchButton: boolean;\n    setShowSearchButton: Dispatch<SetStateAction<boolean>>;\n  }\n> = ({ showSearchButton, setShowSearchButton, ...restProps }) => {\n  const isMediumOrAbove = useBreakpoint('md');\n  const t = useI18n();\n\n  const searchInputRef = useCallback(\n    node => {\n      if (!showSearchButton && node) {\n        node.focus();\n      }\n    },\n    [showSearchButton]\n  );\n  const focusSearchBtn = useRef(false);\n  const searchButtonRef = useCallback(node => {\n    if (node && focusSearchBtn.current) {\n      node.focus();\n    }\n  }, []);\n\n  return isMediumOrAbove || !showSearchButton ? (\n    <Flex\n      as={StyledAppHeaderSearch}\n      item={{ shrink: 0, grow: 1 }}\n      md={{ item: { grow: 0, shrink: 1 } }}\n      container={{ justify: 'between', alignItems: 'center', gap: 1 }}\n    >\n      <StyledAppHeaderSearchForm\n        role='search'\n        aria-label={t('sitewide')}\n        onSubmit={e => e.preventDefault()}\n        isMediumOrAbove={isMediumOrAbove}\n      >\n        <SearchInput {...restProps} ref={searchInputRef} />\n      </StyledAppHeaderSearchForm>\n      <Button\n        variant='simple'\n        icon\n        onClick={() => {\n          setShowSearchButton(true);\n          focusSearchBtn.current = true;\n        }}\n        label={t('collapse_search')}\n      >\n        <Icon name='times' />\n      </Button>\n    </Flex>\n  ) : (\n    <Button\n      variant='simple'\n      icon\n      onClick={() => setShowSearchButton(false)}\n      ref={searchButtonRef}\n      label={t('expand_search')}\n    >\n      <Icon name='search' />\n    </Button>\n  );\n};\n\nconst Utils: FC<UtilsProps> = ({ operator, branch, action, appInfo }) => {\n  const isMediumOrAbove = useBreakpoint('md');\n  const isSmallOrAbove = useBreakpoint('sm');\n  const [appInfoEl, setAppInfoEl] = useElement(null);\n\n  return (\n    <Flex\n      container={{ justify: 'between', alignItems: 'center' }}\n      md={{ container: { justify: 'end' } }}\n      item={{ shrink: 1 }}\n      as={StyledUtilsContainer}\n    >\n      {appInfo && (\n        <Flex\n          container={{ justify: 'between', alignItems: 'center', gap: 0.5 }}\n          item={{ shrink: 1 }}\n          ref={setAppInfoEl}\n        >\n          <Flex as={StyledAppName} item={{ shrink: 1 }}>\n            {appInfo.name}\n          </Flex>\n          <StyledAppVersion>{appInfo.version}</StyledAppVersion>\n          <Tooltip target={appInfoEl} hideDelay='none'>\n            {`${appInfo.name} ${appInfo.version}`}\n          </Tooltip>\n        </Flex>\n      )}\n      <Flex container={{ alignItems: 'center' }}>\n        {branch && <BranchButton {...branch} compact={isSmallOrAbove ? branch.compact : true} />}\n        {action && (\n          <Flex\n            container={{ justify: 'between', alignItems: 'center', gap: 0.5 }}\n            item={{ shrink: 0 }}\n            as={Button}\n            variant='secondary'\n            icon={!isMediumOrAbove}\n            label={isMediumOrAbove ? undefined : action.text}\n            onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick?.(action.id, e)}\n            disabled={action.disabled}\n          >\n            {action.icon && <Icon name={action.icon} />}\n            {isMediumOrAbove && action.text}\n          </Flex>\n        )}\n      </Flex>\n      {isMediumOrAbove && (\n        <AppShellOperator\n          as={StyledAppHeaderOperator}\n          actions={operator.actions}\n          popover={{ placement: 'bottom-end' }}\n        >\n          <Avatar {...operator.avatar} />\n        </AppShellOperator>\n      )}\n    </Flex>\n  );\n};\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(function AppHeader(\n  {\n    contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n    brand,\n    utils,\n    links\n  }: PropsWithoutRef<AppHeaderProps>,\n  ref: AppHeaderProps['ref']\n) {\n  const selectedContext = contexts?.length > 1 ? contexts.find(ctx => ctx.selected)! : contexts[0];\n\n  const isMediumOrAbove = useBreakpoint('md');\n  const [showSearchButton, setShowSearchButton] = useState(true);\n\n  useEffect(() => {\n    if (isMediumOrAbove && !showSearchButton) {\n      setShowSearchButton(true);\n    }\n  }, [isMediumOrAbove]);\n\n  return (\n    <Flex\n      as={StyledAppHeader}\n      container={{\n        justify: 'between',\n        alignItems: 'center',\n        colGap: 2,\n        wrap: 'wrap',\n        pad: [0, 1]\n      }}\n      md={{ container: { wrap: 'nowrap' } }}\n      ref={ref}\n    >\n      {showSearchButton && (\n        <Flex\n          as={StyledBrandContainer}\n          container={{\n            justify: 'between',\n            alignItems: 'center',\n            gap: 1\n          }}\n          item={{ shrink: 0, alignSelf: 'stretch' }}\n        >\n          {contexts && onContextClick && contexts.length > 1 && (\n            <ContextSwitcher\n              contexts={contexts}\n              onContextClick={onContextClick}\n              label={contextSwitcherLabel}\n            />\n          )}\n          <Flex\n            as={brand.onClick || brand.href ? StyledBrandButton : 'div'}\n            variant='simple'\n            container={{ alignItems: 'center', justify: 'between', gap: 2, pad: 1 }}\n            aria-label={`${brand.label} - ${selectedContext.primary}`}\n            onClick={brand.onClick}\n            href={brand.href}\n          >\n            <Flex item={{ shrink: 0 }} as={StyledBrandImage} src={brand.logo} alt={brand.label} />\n            <Flex container={{ justify: 'between', alignItems: 'center', gap: 1 }}>\n              {selectedContext.visual}\n              <StyledContext>{selectedContext.primary}</StyledContext>\n            </Flex>\n          </Flex>\n        </Flex>\n      )}\n      {links && links.length > 0 && <Links links={links} />}\n\n      <Flex\n        container={{\n          gap: 1,\n          justify: 'center',\n          alignItems: 'center'\n        }}\n        item={{ grow: showSearchButton ? 0 : 1 }}\n        md={{ item: { grow: showSearchButton ? 1 : 0 } }}\n      >\n        {utils?.search && (\n          <AppHeaderSearch\n            {...utils.search}\n            showSearchButton={showSearchButton}\n            setShowSearchButton={setShowSearchButton}\n          />\n        )}\n        {showSearchButton && !isMediumOrAbove && utils?.operator && (\n          <AppShellOperator\n            as={StyledAppHeaderOperator}\n            actions={utils.operator.actions}\n            popover={{ placement: 'bottom-start' }}\n          >\n            <Avatar {...utils.operator.avatar} />\n          </AppShellOperator>\n        )}\n      </Flex>\n      {utils && <Utils {...utils} />}\n    </Flex>\n  );\n});\n\nexport default AppHeader;\n"]}
+{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useEffect, useState, useRef } from 'react';\nimport type {\n  FunctionComponent,\n  MouseEvent,\n  FC,\n  PropsWithoutRef,\n  Dispatch,\n  SetStateAction\n} from 'react';\n\nimport {\n  ContextSwitcher,\n  Flex,\n  SearchInput,\n  useBreakpoint,\n  Button,\n  Icon,\n  useI18n,\n  Tooltip,\n  useElement,\n  Avatar\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, SearchInputProps } from '@pega/cosmos-react-core';\nimport AppShellOperator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';\nimport {\n  StyledAppHeaderSearchForm,\n  StyledAppHeaderOperator\n} from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\n\nimport {\n  StyledAppHeader,\n  StyledTabs,\n  StyledUtilsContainer,\n  StyledBrandContainer,\n  StyledAppHeaderSearch,\n  StyledAppName,\n  StyledAppVersion,\n  StyledBrandButton,\n  StyledBrandImage,\n  StyledContext\n} from './AppHeader.styles';\nimport type { AppHeaderProps, LinkProps, UtilsProps } from './AppHeader.types';\nimport BranchButton from './BranchButton';\n\nconst Links: FC<{ links: LinkProps[] }> = ({ links }) => {\n  const [currentTabId, setCurrentTabId] = useState(links[0].id);\n\n  useEffect(() => {\n    setCurrentTabId(links[0].id);\n  }, [links]);\n\n  const handleTabClick = useCallback(\n    (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      const newActiveTab = links.find(item => item.id === id);\n      if (newActiveTab) {\n        newActiveTab.onClick?.(id, e);\n        setCurrentTabId(newActiveTab.id);\n      }\n    },\n    [links]\n  );\n\n  return <StyledTabs tabs={links} currentTabId={currentTabId} onTabClick={handleTabClick} />;\n};\n\nconst AppHeaderSearch: FC<\n  SearchInputProps & {\n    showSearchButton: boolean;\n    setShowSearchButton: Dispatch<SetStateAction<boolean>>;\n  }\n> = ({ showSearchButton, setShowSearchButton, ...restProps }) => {\n  const isMediumOrAbove = useBreakpoint('md');\n  const t = useI18n();\n\n  const searchInputRef = useCallback(\n    node => {\n      if (!showSearchButton && node) {\n        node.focus();\n      }\n    },\n    [showSearchButton]\n  );\n  const focusSearchBtn = useRef(false);\n  const searchButtonRef = useCallback(node => {\n    if (node && focusSearchBtn.current) {\n      node.focus();\n    }\n  }, []);\n\n  return isMediumOrAbove || !showSearchButton ? (\n    <Flex\n      as={StyledAppHeaderSearch}\n      item={{ shrink: 0, grow: 1 }}\n      md={{ item: { grow: 0, shrink: 1 } }}\n      container={{ justify: 'between', alignItems: 'center', gap: 1 }}\n    >\n      <StyledAppHeaderSearchForm\n        role='search'\n        aria-label={t('sitewide')}\n        onSubmit={e => e.preventDefault()}\n        isMediumOrAbove={isMediumOrAbove}\n      >\n        <SearchInput {...restProps} ref={searchInputRef} />\n      </StyledAppHeaderSearchForm>\n      <Button\n        variant='simple'\n        icon\n        onClick={() => {\n          setShowSearchButton(true);\n          focusSearchBtn.current = true;\n        }}\n        label={t('collapse_search')}\n      >\n        <Icon name='times' />\n      </Button>\n    </Flex>\n  ) : (\n    <Button\n      variant='simple'\n      icon\n      onClick={() => setShowSearchButton(false)}\n      ref={searchButtonRef}\n      label={t('expand_search')}\n    >\n      <Icon name='search' />\n    </Button>\n  );\n};\n\nconst Utils: FC<UtilsProps> = ({ operator, branch, action, appInfo }) => {\n  const isMediumOrAbove = useBreakpoint('md');\n  const isSmallOrAbove = useBreakpoint('sm');\n  const [appInfoEl, setAppInfoEl] = useElement(null);\n\n  return (\n    <Flex\n      container={{ justify: 'between', alignItems: 'center' }}\n      md={{ container: { justify: 'end' } }}\n      item={{ shrink: 1 }}\n      as={StyledUtilsContainer}\n    >\n      {appInfo && (\n        <Flex\n          container={{ justify: 'between', alignItems: 'center', gap: 0.5 }}\n          item={{ shrink: 1 }}\n          ref={setAppInfoEl}\n        >\n          <Flex as={StyledAppName} item={{ shrink: 1 }}>\n            {appInfo.name}\n          </Flex>\n          <StyledAppVersion>{appInfo.version}</StyledAppVersion>\n          <Tooltip target={appInfoEl} hideDelay='none'>\n            {`${appInfo.name} ${appInfo.version}`}\n          </Tooltip>\n        </Flex>\n      )}\n      <Flex container={{ alignItems: 'center' }}>\n        {branch && <BranchButton {...branch} compact={isSmallOrAbove ? branch.compact : true} />}\n        {action && (\n          <Flex\n            container={{ justify: 'between', alignItems: 'center', gap: 0.5 }}\n            item={{ shrink: 0 }}\n            as={Button}\n            variant='secondary'\n            icon={!isMediumOrAbove}\n            label={isMediumOrAbove ? undefined : action.text}\n            onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick?.(action.id, e)}\n            disabled={action.disabled}\n          >\n            {action.icon && <Icon name={action.icon} />}\n            {isMediumOrAbove && action.text}\n          </Flex>\n        )}\n      </Flex>\n      {isMediumOrAbove && (\n        <AppShellOperator\n          as={StyledAppHeaderOperator}\n          actions={operator.actions}\n          popover={{ placement: 'bottom-end' }}\n        >\n          <Avatar {...operator.avatar} />\n        </AppShellOperator>\n      )}\n    </Flex>\n  );\n};\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(function AppHeader(\n  {\n    contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n    brand,\n    utils,\n    links\n  }: PropsWithoutRef<AppHeaderProps>,\n  ref: AppHeaderProps['ref']\n) {\n  const selectedContext = contexts?.length > 1 ? contexts.find(ctx => ctx.selected)! : contexts[0];\n\n  const isMediumOrAbove = useBreakpoint('md');\n  const [showSearchButton, setShowSearchButton] = useState(true);\n\n  useEffect(() => {\n    if (isMediumOrAbove && !showSearchButton) {\n      setShowSearchButton(true);\n    }\n  }, [isMediumOrAbove]);\n\n  return (\n    <Flex\n      as={StyledAppHeader}\n      container={{\n        justify: 'between',\n        alignItems: 'center',\n        colGap: 2,\n        wrap: 'wrap',\n        pad: [0, 1]\n      }}\n      md={{ container: { wrap: 'nowrap' } }}\n      ref={ref}\n    >\n      {showSearchButton && (\n        <Flex\n          as={StyledBrandContainer}\n          container={{\n            justify: 'between',\n            alignItems: 'center',\n            gap: 1\n          }}\n          item={{ shrink: 0, alignSelf: 'stretch' }}\n        >\n          {contexts && onContextClick && contexts.length > 1 && (\n            <ContextSwitcher\n              contexts={contexts}\n              onContextClick={onContextClick}\n              label={contextSwitcherLabel}\n            />\n          )}\n          <Flex\n            as={brand.onClick || brand.href ? StyledBrandButton : 'div'}\n            variant='simple'\n            container={{ alignItems: 'center', justify: 'between', gap: 2, pad: 1 }}\n            aria-label={`${brand.label} - ${selectedContext.primary}`}\n            onClick={brand.onClick}\n            href={brand.href}\n          >\n            <Flex item={{ shrink: 0 }} as={StyledBrandImage} src={brand.logo} alt={brand.label} />\n            <Flex container={{ justify: 'between', alignItems: 'center', gap: 1 }}>\n              {selectedContext.visual}\n              <StyledContext>{selectedContext.primary}</StyledContext>\n            </Flex>\n          </Flex>\n        </Flex>\n      )}\n      {links && links.length > 0 && <Links links={links} />}\n\n      <Flex\n        container={{\n          gap: 1,\n          justify: 'center',\n          alignItems: 'center'\n        }}\n        item={{ grow: showSearchButton ? 0 : 1 }}\n        md={{ item: { grow: showSearchButton ? 1 : 0 } }}\n      >\n        {utils?.search && (\n          <AppHeaderSearch\n            {...utils.search}\n            showSearchButton={showSearchButton}\n            setShowSearchButton={setShowSearchButton}\n          />\n        )}\n        {showSearchButton && !isMediumOrAbove && utils?.operator && (\n          <AppShellOperator\n            as={StyledAppHeaderOperator}\n            actions={utils.operator.actions}\n            popover={{ placement: 'bottom-start' }}\n          >\n            <Avatar {...utils.operator.avatar} />\n          </AppShellOperator>\n        )}\n      </Flex>\n      {utils && <Utils {...utils} />}\n    </Flex>\n  );\n});\n\nexport default AppHeader;\n"]}

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

@@ -1,7 +1,7 @@
-import { Ref, MouseEvent } from 'react';
-import { AppShellProps, OmitStrict, Action, BaseProps, NoChildrenProp, Tab, AvatarProps, SearchInputProps } from '@pega/cosmos-react-core';
-import { ContextSwitcherProps } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';
-import { BranchButtonProps } from './BranchButton';
+import type { Ref, MouseEvent } from 'react';
+import type { AppShellProps, OmitStrict, Action, BaseProps, NoChildrenProp, Tab, AvatarProps, SearchInputProps } from '@pega/cosmos-react-core';
+import type { ContextSwitcherProps } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';
+import type { BranchButtonProps } from './BranchButton';
 export interface OperatorProps extends OmitStrict<AppShellProps['operator'], 'avatar'> {
     avatar: Pick<AvatarProps, 'name' | 'imageSrc'>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.types.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EACL,aAAa,EACb,UAAU,EACV,MAAM,EACN,SAAS,EACT,cAAc,EACd,GAAG,EACH,WAAW,EACX,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,gEAAgE,CAAC;AAEtG,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnD,MAAM,WAAW,aAAc,SAAQ,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,QAAQ,CAAC;IACpF,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC;CAChD;AACD,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D,eAAe,EAAE,oBAAoB,CAAC;IACtC,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;KAC1E,CAAC;IACF,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,SAAU,SAAQ,GAAG;IACpC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACvF;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,aAAa,CAAC;IACxB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC,CAAC;IACvE,OAAO,CAAC,EAAE;QACR,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;CACH"}
+{"version":3,"file":"AppHeader.types.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,KAAK,EACV,aAAa,EACb,UAAU,EACV,MAAM,EACN,SAAS,EACT,cAAc,EACd,GAAG,EACH,WAAW,EACX,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gEAAgE,CAAC;AAE3G,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,MAAM,WAAW,aAAc,SAAQ,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,QAAQ,CAAC;IACpF,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC;CAChD;AACD,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D,eAAe,EAAE,oBAAoB,CAAC;IACtC,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;KAC1E,CAAC;IACF,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,SAAU,SAAQ,GAAG;IACpC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACvF;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,aAAa,CAAC;IACxB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC,CAAC;IACvE,OAAO,CAAC,EAAE;QACR,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;CACH"}

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.types.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref, MouseEvent } from 'react';\n\nimport {\n  AppShellProps,\n  OmitStrict,\n  Action,\n  BaseProps,\n  NoChildrenProp,\n  Tab,\n  AvatarProps,\n  SearchInputProps\n} from '@pega/cosmos-react-core';\nimport { ContextSwitcherProps } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';\n\nimport { BranchButtonProps } from './BranchButton';\n\nexport interface OperatorProps extends OmitStrict<AppShellProps['operator'], 'avatar'> {\n  avatar: Pick<AvatarProps, 'name' | 'imageSrc'>;\n}\nexport interface AppHeaderProps extends BaseProps, NoChildrenProp {\n  contextSwitcher: ContextSwitcherProps;\n  brand: {\n    label: string;\n    logo: string;\n    href?: string;\n    onClick?: (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  };\n  links?: LinkProps[];\n  utils?: UtilsProps;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface LinkProps extends Tab {\n  onClick?: (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n}\n\nexport interface UtilsProps {\n  operator: OperatorProps;\n  search?: SearchInputProps;\n  branch?: BranchButtonProps;\n  action?: Pick<Action, 'id' | 'text' | 'onClick' | 'disabled' | 'icon'>;\n  appInfo?: {\n    name: string;\n    version: string;\n  };\n}\n"]}
+{"version":3,"file":"AppHeader.types.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref, MouseEvent } from 'react';\n\nimport type {\n  AppShellProps,\n  OmitStrict,\n  Action,\n  BaseProps,\n  NoChildrenProp,\n  Tab,\n  AvatarProps,\n  SearchInputProps\n} from '@pega/cosmos-react-core';\nimport type { ContextSwitcherProps } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';\n\nimport type { BranchButtonProps } from './BranchButton';\n\nexport interface OperatorProps extends OmitStrict<AppShellProps['operator'], 'avatar'> {\n  avatar: Pick<AvatarProps, 'name' | 'imageSrc'>;\n}\nexport interface AppHeaderProps extends BaseProps, NoChildrenProp {\n  contextSwitcher: ContextSwitcherProps;\n  brand: {\n    label: string;\n    logo: string;\n    href?: string;\n    onClick?: (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  };\n  links?: LinkProps[];\n  utils?: UtilsProps;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface LinkProps extends Tab {\n  onClick?: (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n}\n\nexport interface UtilsProps {\n  operator: OperatorProps;\n  search?: SearchInputProps;\n  branch?: BranchButtonProps;\n  action?: Pick<Action, 'id' | 'text' | 'onClick' | 'disabled' | 'icon'>;\n  appInfo?: {\n    name: string;\n    version: string;\n  };\n}\n"]}

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

@@ -1,5 +1,7 @@
-import { FunctionComponent } from 'react';
-import { Button, CountProps, Icon, MenuProps, StatusProps } from '@pega/cosmos-react-core';
+import type { FunctionComponent } from 'react';
+import type { DefaultTheme } from 'styled-components';
+import { Button } from '@pega/cosmos-react-core';
+import type { CountProps, MenuProps, StatusProps } from '@pega/cosmos-react-core';
 export interface BranchButtonProps {
     /** The text for the BranchButton also used to set the aria-label. */
     text: string;
@@ -13,7 +15,7 @@ export interface BranchButtonProps {
     items: MenuProps['items'];
 }
 export declare const StyledBranchButton: typeof Button;
-export declare const StyledWarnIcon: typeof Icon;
+export declare const StyledWarnIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, DefaultTheme, {}, never>;
 declare const BranchButton: FunctionComponent<BranchButtonProps>;
 export default BranchButton;
 //# sourceMappingURL=BranchButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BranchButton.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/BranchButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,iBAAiB,EAAiB,MAAM,OAAO,CAAC;AAInE,OAAO,EACL,MAAM,EACN,UAAU,EAGV,IAAI,EAGJ,SAAS,EAMT,WAAW,EAGZ,MAAM,yBAAyB,CAAC;AAQjC,MAAM,WAAW,iBAAiB;IAChC,qEAAqE;IACrE,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC,CAAC;IAChE,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mEAAmE;IACnE,KAAK,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IAC/B,iCAAiC;IACjC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,kBAAkB,EAAE,OAAO,MAuDvC,CAAC;AAqBF,eAAO,MAAM,cAAc,EAAE,OAAO,IAIlC,CAAC;AAgBH,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAoEtD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"BranchButton.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/BranchButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAiB,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGtD,OAAO,EACL,MAAM,EAaP,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAQlF,MAAM,WAAW,iBAAiB;IAChC,qEAAqE;IACrE,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC,CAAC;IAChE,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mEAAmE;IACnE,KAAK,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IAC/B,iCAAiC;IACjC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,kBAAkB,EAAE,OAAO,MAuDvC,CAAC;AAqBF,eAAO,MAAM,cAAc,8JAIzB,CAAC;AAgBH,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAoEtD,CAAC;AAEF,eAAe,YAAY,CAAC"}