@pega/cosmos-react-core 9.0.0-build.9.8 → 9.0.0

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

@@ -1,6 +1,6 @@
 import { mix, rgba, transparentize } from 'polished';
 import styled, { css } from 'styled-components';
-import { calculateFontSize, getHoverColors, calculateForegroundColor, calculateBackgroundAndContrastColor } from '../../styles';
+import { calculateFontSize, getHoverColors, calculateForegroundColor } from '../../styles';
 import { defaultThemeProp } from '../../theme';
 import { tryCatch } from '../../utils';
 import { StyledImage } from '../Image';
@@ -9,6 +9,7 @@ import { StyledPopover } from '../Popover';
 import { StyledSearchInput } from '../SearchInput';
 import { StyledSearchButton, StyledSearchFiltersButton, StyledSearchTextInput } from '../SearchInput/SearchInput.styles';
 import Text from '../Text';
+import { StyledVisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText';
 import { headerHeight, navWidth } from './AppShell.styles';
 export const StyledContextSwitcher = styled.div(({ theme }) => {
     return css `
@@ -35,7 +36,7 @@ export const StyledAppHeaderInfo = styled.div(({ centerLogo, theme }) => {
     }
 
     ${StyledImage} {
-      height: 1.625rem;
+      height: 1.0725rem;
 
       ${centerLogo &&
         css `
@@ -45,9 +46,11 @@ export const StyledAppHeaderInfo = styled.div(({ centerLogo, theme }) => {
   `;
 });
 StyledAppHeaderInfo.defaultProps = defaultThemeProp;
-export const StyledAppHeaderSearchForm = styled.form(({ isMediumOrAbove, theme: { base: { animation, palette }, components: { 'app-shell': { header: { background: headerBg, 'foreground-color': headerFgColor } } } } }) => {
-    const foregroundColor = calculateForegroundColor(headerBg, headerFgColor);
-    const { backgroundColor } = calculateBackgroundAndContrastColor(headerBg, headerFgColor);
+export const StyledAppHeaderSearchForm = styled.form(({ isMediumOrAbove, theme: { base: { animation }, components: { 'app-shell': { header } } } }) => {
+    const { background: headerBg, 'search-input': { 'background-color': searchInputBg, 'foreground-color': searchInputFg, 'border-color': searchInputBorder } } = header;
+    const searchBg = searchInputBg;
+    const searchFg = calculateForegroundColor(headerBg, searchInputFg);
+    const searchBorder = calculateForegroundColor(headerBg, searchInputBorder);
     return css `
       max-width: 33vw;
       min-width: 10rem;
@@ -58,7 +61,7 @@ export const StyledAppHeaderSearchForm = styled.form(({ isMediumOrAbove, theme:
       transition: max-width ${animation.speed} ${animation.timing.ease};
 
       ${StyledSearchInput} input::placeholder {
-        color: ${transparentize(0.4, palette['foreground-color'])};
+        color: ${transparentize(0.4, searchFg)};
       }
 
       ${!isMediumOrAbove &&
@@ -73,20 +76,24 @@ export const StyledAppHeaderSearchForm = styled.form(({ isMediumOrAbove, theme:
       `}
       &:not([focused]) {
         ${StyledSearchInput} {
-          background: ${backgroundColor};
+          background: ${searchBg};
+          border-color: ${searchBorder};
           ${StyledSearchButton} {
-            background: ${backgroundColor};
-            color: ${foregroundColor};
+            background: ${searchBg};
+            color: ${searchFg};
+            border-color: ${searchBorder};
           }
 
           ${StyledSearchTextInput} {
-            background: ${backgroundColor};
-            color: ${foregroundColor};
+            background: ${searchBg};
+            color: ${searchFg};
+            border-color: ${searchBorder};
           }
 
           ${StyledSearchFiltersButton} {
-            background: ${backgroundColor};
-            color: ${foregroundColor};
+            background: ${searchBg};
+            color: ${searchFg};
+            border-color: ${searchBorder};
           }
         }
       }
@@ -105,7 +112,9 @@ StyledAppHeaderLogo.defaultProps = defaultThemeProp;
 export const StyledAppHeaderText = styled(Text)(({ theme, variant }) => {
     const headerBg = theme.components['app-shell'].header.background;
     const headerFgColor = theme.components['app-shell'].header['foreground-color'];
-    const foregroundColor = calculateForegroundColor(headerBg, headerFgColor);
+    const foregroundColor = theme.components['app-shell'].header['app-name-color'] === 'auto'
+        ? calculateForegroundColor(headerBg, headerFgColor)
+        : theme.components['app-shell'].header['app-name-color'];
     const secondaryColor = tryCatch(() => rgba(foregroundColor ?? theme.base.palette['foreground-color'], theme.base.transparency['transparent-2']));
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     return css `
@@ -113,13 +122,24 @@ export const StyledAppHeaderText = styled(Text)(({ theme, variant }) => {
     overflow: hidden;
     white-space: nowrap;
     color: ${variant === 'secondary' ? secondaryColor : foregroundColor};
-    font-size: ${fontSize[theme.components.text['brand-primary']['font-size']]};
     font-family: ${theme.components.text['brand-primary']['font-family']};
 
-    ${variant !== 'secondary' &&
+    ${variant === 'primary' &&
         css `
+      font-size: ${fontSize[theme.components.text['brand-primary']['font-size']]};
       font-weight: ${theme.components.text['brand-primary']['font-weight']};
     `}
+
+    ${variant === 'secondary' &&
+        css `
+      display: inline;
+      font-size: ${fontSize};
+      align-self: flex-end;
+
+      &:not(${StyledVisuallyHiddenText}) + & {
+        margin-inline-start: ${theme.base.spacing};
+      }
+    `}
   `;
 });
 StyledAppHeaderText.defaultProps = defaultThemeProp;

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mix, rgba, transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport {\n  calculateFontSize,\n  getHoverColors,\n  calculateForegroundColor,\n  calculateBackgroundAndContrastColor,\n  type FontSize\n} from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { StyledImage } from '../Image';\nimport { StyledMenuListContainer } from '../Menu/Menu.styles';\nimport { StyledPopover } from '../Popover';\nimport { StyledSearchInput } from '../SearchInput';\nimport {\n  StyledSearchButton,\n  StyledSearchFiltersButton,\n  StyledSearchTextInput\n} from '../SearchInput/SearchInput.styles';\nimport Text from '../Text';\nimport type { TextProps } from '../Text';\n\nimport { headerHeight, navWidth } from './AppShell.styles';\n\nexport const StyledContextSwitcher = styled.div(({ theme }) => {\n  return css`\n    width: calc(${navWidth} - 2 * ${theme.base.spacing});\n  `;\n});\n\nStyledContextSwitcher.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderInfo = styled.div<{ centerLogo: boolean }>(({ centerLogo, theme }) => {\n  return css`\n    & > :first-child {\n      vertical-align: top;\n    }\n\n    & > :is(a, button) {\n      cursor: pointer;\n      text-decoration: none;\n      user-select: none;\n      -webkit-user-select: none;\n    }\n\n    & > :is(a, button):focus {\n      box-shadow: ${theme.base.shadow.focus};\n      outline: none;\n    }\n\n    ${StyledImage} {\n      height: 1.625rem;\n\n      ${centerLogo &&\n      css`\n        padding-inline-start: ${theme.base.spacing};\n      `}\n    }\n  `;\n});\n\nStyledAppHeaderInfo.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSearchForm = styled.form<{ isMediumOrAbove: boolean }>(\n  ({\n    isMediumOrAbove,\n    theme: {\n      base: { animation, palette },\n      components: {\n        'app-shell': {\n          header: { background: headerBg, 'foreground-color': headerFgColor }\n        }\n      }\n    }\n  }) => {\n    const foregroundColor = calculateForegroundColor(headerBg, headerFgColor);\n    const { backgroundColor } = calculateBackgroundAndContrastColor(headerBg, headerFgColor);\n\n    return css`\n      max-width: 33vw;\n      min-width: 10rem;\n      width: 100%;\n      justify-self: center;\n      margin-inline-start: 0;\n      margin-inline-end: auto;\n      transition: max-width ${animation.speed} ${animation.timing.ease};\n\n      ${StyledSearchInput} input::placeholder {\n        color: ${transparentize(0.4, palette['foreground-color'])};\n      }\n\n      ${!isMediumOrAbove &&\n      css`\n        max-width: 75%;\n        min-width: 2rem;\n        margin-inline-start: auto;\n\n        &:focus-within {\n          min-width: 10rem;\n        }\n      `}\n      &:not([focused]) {\n        ${StyledSearchInput} {\n          background: ${backgroundColor};\n          ${StyledSearchButton} {\n            background: ${backgroundColor};\n            color: ${foregroundColor};\n          }\n\n          ${StyledSearchTextInput} {\n            background: ${backgroundColor};\n            color: ${foregroundColor};\n          }\n\n          ${StyledSearchFiltersButton} {\n            background: ${backgroundColor};\n            color: ${foregroundColor};\n          }\n        }\n      }\n    `;\n  }\n);\n\nStyledAppHeaderSearchForm.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSpacer = styled.div`\n  margin: auto;\n`;\n\nexport const StyledAppHeaderLogo = styled.div(({ theme }) => {\n  return css`\n    max-width: min(${theme.base['content-width'].sm}, 25vw);\n  `;\n});\nStyledAppHeaderLogo.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderText = styled(Text)<{ variant: TextProps['variant'] }>(({\n  theme,\n  variant\n}) => {\n  const headerBg = theme.components['app-shell'].header.background;\n  const headerFgColor = theme.components['app-shell'].header['foreground-color'];\n\n  const foregroundColor = calculateForegroundColor(headerBg, headerFgColor);\n\n  const secondaryColor = tryCatch(() =>\n    rgba(\n      foregroundColor ?? theme.base.palette['foreground-color'],\n      theme.base.transparency['transparent-2']\n    )\n  );\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    color: ${variant === 'secondary' ? secondaryColor : foregroundColor};\n    font-size: ${fontSize[theme.components.text['brand-primary']['font-size'] as FontSize]};\n    font-family: ${theme.components.text['brand-primary']['font-family']};\n\n    ${variant !== 'secondary' &&\n    css`\n      font-weight: ${theme.components.text['brand-primary']['font-weight']};\n    `}\n  `;\n});\n\nStyledAppHeaderText.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderOperator = styled.button(\n  ({ theme }) => css`\n    border-radius: 50%;\n\n    :focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `\n);\n\nStyledAppHeaderOperator.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeader = styled.header<{ hideTitle: boolean; drawerOpen: boolean }>(\n  ({ hideTitle, drawerOpen, theme }) => {\n    const headerBg = theme.components['app-shell'].header.background;\n    const headerFgColor = theme.components['app-shell'].header['foreground-color'];\n\n    const foregroundColor = calculateForegroundColor(headerBg, headerFgColor);\n\n    const hoverColors = getHoverColors(\n      tryCatch(\n        () => mix(0.01, theme.base.palette.interactive, headerBg),\n        () => theme.base.palette.interactive\n      )\n    );\n\n    return css`\n      position: sticky;\n      z-index: calc(${theme.base['z-index'].backdrop} - 1);\n      ${drawerOpen &&\n      css`\n        z-index: calc(${theme.base['z-index'].backdrop} - 2);\n      `}\n      top: 0;\n      gap: ${theme.base.spacing};\n      max-width: 100%;\n      height: ${headerHeight};\n      background: ${headerBg};\n      color: ${foregroundColor};\n      border-bottom: solid 0.0625rem ${theme.components['app-shell'].header['border-color']};\n\n      ${StyledAppHeaderInfo} {\n        justify-self: flex-start;\n        min-width: 33vw;\n\n        ${hideTitle &&\n        css`\n          min-width: fit-content;\n        `}\n      }\n\n      ${StyledSearchFiltersButton} {\n        color: ${foregroundColor};\n      }\n\n      > ${StyledAppHeaderOperator} {\n        justify-self: flex-end;\n\n        + ${StyledPopover} {\n          &,\n          ${StyledMenuListContainer} {\n            background: ${headerBg};\n          }\n\n          ${StyledMenuListContainer} li {\n            color: ${foregroundColor};\n            background-color: transparent;\n\n            &:hover,\n            &[data-current='true'] {\n              color: ${hoverColors.foreground};\n              background-color: ${hoverColors.background};\n            }\n          }\n        }\n      }\n    `;\n  }\n);\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mix, rgba, transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport {\n  calculateFontSize,\n  getHoverColors,\n  calculateForegroundColor,\n  type FontSize\n} from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { StyledImage } from '../Image';\nimport { StyledMenuListContainer } from '../Menu/Menu.styles';\nimport { StyledPopover } from '../Popover';\nimport { StyledSearchInput } from '../SearchInput';\nimport {\n  StyledSearchButton,\n  StyledSearchFiltersButton,\n  StyledSearchTextInput\n} from '../SearchInput/SearchInput.styles';\nimport Text from '../Text';\nimport type { TextProps } from '../Text';\nimport { StyledVisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText';\n\nimport { headerHeight, navWidth } from './AppShell.styles';\n\nexport const StyledContextSwitcher = styled.div(({ theme }) => {\n  return css`\n    width: calc(${navWidth} - 2 * ${theme.base.spacing});\n  `;\n});\n\nStyledContextSwitcher.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderInfo = styled.div<{ centerLogo: boolean }>(({ centerLogo, theme }) => {\n  return css`\n    & > :first-child {\n      vertical-align: top;\n    }\n\n    & > :is(a, button) {\n      cursor: pointer;\n      text-decoration: none;\n      user-select: none;\n      -webkit-user-select: none;\n    }\n\n    & > :is(a, button):focus {\n      box-shadow: ${theme.base.shadow.focus};\n      outline: none;\n    }\n\n    ${StyledImage} {\n      height: 1.0725rem;\n\n      ${centerLogo &&\n      css`\n        padding-inline-start: ${theme.base.spacing};\n      `}\n    }\n  `;\n});\n\nStyledAppHeaderInfo.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSearchForm = styled.form<{ isMediumOrAbove: boolean }>(\n  ({\n    isMediumOrAbove,\n    theme: {\n      base: { animation },\n      components: {\n        'app-shell': { header }\n      }\n    }\n  }) => {\n    const {\n      background: headerBg,\n      'search-input': {\n        'background-color': searchInputBg,\n        'foreground-color': searchInputFg,\n        'border-color': searchInputBorder\n      }\n    } = header;\n\n    const searchBg = searchInputBg;\n    const searchFg = calculateForegroundColor(headerBg, searchInputFg);\n    const searchBorder = calculateForegroundColor(headerBg, searchInputBorder);\n\n    return css`\n      max-width: 33vw;\n      min-width: 10rem;\n      width: 100%;\n      justify-self: center;\n      margin-inline-start: 0;\n      margin-inline-end: auto;\n      transition: max-width ${animation.speed} ${animation.timing.ease};\n\n      ${StyledSearchInput} input::placeholder {\n        color: ${transparentize(0.4, searchFg)};\n      }\n\n      ${!isMediumOrAbove &&\n      css`\n        max-width: 75%;\n        min-width: 2rem;\n        margin-inline-start: auto;\n\n        &:focus-within {\n          min-width: 10rem;\n        }\n      `}\n      &:not([focused]) {\n        ${StyledSearchInput} {\n          background: ${searchBg};\n          border-color: ${searchBorder};\n          ${StyledSearchButton} {\n            background: ${searchBg};\n            color: ${searchFg};\n            border-color: ${searchBorder};\n          }\n\n          ${StyledSearchTextInput} {\n            background: ${searchBg};\n            color: ${searchFg};\n            border-color: ${searchBorder};\n          }\n\n          ${StyledSearchFiltersButton} {\n            background: ${searchBg};\n            color: ${searchFg};\n            border-color: ${searchBorder};\n          }\n        }\n      }\n    `;\n  }\n);\n\nStyledAppHeaderSearchForm.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSpacer = styled.div`\n  margin: auto;\n`;\n\nexport const StyledAppHeaderLogo = styled.div(({ theme }) => {\n  return css`\n    max-width: min(${theme.base['content-width'].sm}, 25vw);\n  `;\n});\nStyledAppHeaderLogo.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderText = styled(Text)<{ variant: TextProps['variant'] }>(({\n  theme,\n  variant\n}) => {\n  const headerBg = theme.components['app-shell'].header.background;\n  const headerFgColor = theme.components['app-shell'].header['foreground-color'];\n\n  const foregroundColor =\n    theme.components['app-shell'].header['app-name-color'] === 'auto'\n      ? calculateForegroundColor(headerBg, headerFgColor)\n      : theme.components['app-shell'].header['app-name-color'];\n\n  const secondaryColor = tryCatch(() =>\n    rgba(\n      foregroundColor ?? theme.base.palette['foreground-color'],\n      theme.base.transparency['transparent-2']\n    )\n  );\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    color: ${variant === 'secondary' ? secondaryColor : foregroundColor};\n    font-family: ${theme.components.text['brand-primary']['font-family']};\n\n    ${variant === 'primary' &&\n    css`\n      font-size: ${fontSize[theme.components.text['brand-primary']['font-size'] as FontSize]};\n      font-weight: ${theme.components.text['brand-primary']['font-weight']};\n    `}\n\n    ${variant === 'secondary' &&\n    css`\n      display: inline;\n      font-size: ${fontSize};\n      align-self: flex-end;\n\n      &:not(${StyledVisuallyHiddenText}) + & {\n        margin-inline-start: ${theme.base.spacing};\n      }\n    `}\n  `;\n});\n\nStyledAppHeaderText.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderOperator = styled.button(\n  ({ theme }) => css`\n    border-radius: 50%;\n\n    :focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `\n);\n\nStyledAppHeaderOperator.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeader = styled.header<{ hideTitle: boolean; drawerOpen: boolean }>(\n  ({ hideTitle, drawerOpen, theme }) => {\n    const headerBg = theme.components['app-shell'].header.background;\n    const headerFgColor = theme.components['app-shell'].header['foreground-color'];\n\n    const foregroundColor = calculateForegroundColor(headerBg, headerFgColor);\n\n    const hoverColors = getHoverColors(\n      tryCatch(\n        () => mix(0.01, theme.base.palette.interactive, headerBg),\n        () => theme.base.palette.interactive\n      )\n    );\n\n    return css`\n      position: sticky;\n      z-index: calc(${theme.base['z-index'].backdrop} - 1);\n      ${drawerOpen &&\n      css`\n        z-index: calc(${theme.base['z-index'].backdrop} - 2);\n      `}\n      top: 0;\n      gap: ${theme.base.spacing};\n      max-width: 100%;\n      height: ${headerHeight};\n      background: ${headerBg};\n      color: ${foregroundColor};\n      border-bottom: solid 0.0625rem ${theme.components['app-shell'].header['border-color']};\n\n      ${StyledAppHeaderInfo} {\n        justify-self: flex-start;\n        min-width: 33vw;\n\n        ${hideTitle &&\n        css`\n          min-width: fit-content;\n        `}\n      }\n\n      ${StyledSearchFiltersButton} {\n        color: ${foregroundColor};\n      }\n\n      > ${StyledAppHeaderOperator} {\n        justify-self: flex-end;\n\n        + ${StyledPopover} {\n          &,\n          ${StyledMenuListContainer} {\n            background: ${headerBg};\n          }\n\n          ${StyledMenuListContainer} li {\n            color: ${foregroundColor};\n            background-color: transparent;\n\n            &:hover,\n            &[data-current='true'] {\n              color: ${hoverColors.foreground};\n              background-color: ${hoverColors.background};\n            }\n          }\n        }\n      }\n    `;\n  }\n);\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,14 @@
+import type { CaseTypeProps, LinkProps, UtilsProps } from './AppShell.types';
+import type { AppNavigationPanelProps } from './AppNavigationPanel.types';
+export declare const CaseTypes: ({ caseTypes, mobileNavBar }: {
+    caseTypes: CaseTypeProps[];
+    mobileNavBar?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Links: (props: {
+    links: LinkProps[];
+    mobileNavBar?: boolean;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Utils: ({ items }: UtilsProps) => import("react/jsx-runtime").JSX.Element;
+declare const AppNavigationPanel: ({ appInfo, navState, searchInput, searchLabel, onClick, caseTypes, links, cases, utils, agent }: AppNavigationPanelProps) => import("react/jsx-runtime").JSX.Element;
+export default AppNavigationPanel;
+//# sourceMappingURL=AppNavigationPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppNavigationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppNavigationPanel.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAIV,aAAa,EACb,SAAS,EAGT,UAAU,EACX,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAE1E,eAAO,MAAM,SAAS,GAAI,6BAGvB;IACD,SAAS,EAAE,aAAa,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,4CA4BA,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,OAAO;IAAE,KAAK,EAAE,SAAS,EAAE,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,CAAA;CAAE,mDA6B1E,CAAC;AAwDF,eAAO,MAAM,KAAK,GAAI,WAAW,UAAU,4CA0G1C,CAAC;AA8DF,QAAA,MAAM,kBAAkB,GAAI,iGAWzB,uBAAuB,4CAgCzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/components/AppShell/AppNavigationPanel.js

@@ -0,0 +1,173 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useMemo, useContext } from 'react';
+import Button from '../Button';
+import Grid from '../Grid';
+import Icon from '../Icon';
+import Image from '../Image';
+import Link from '../Link';
+import Tooltip from '../Tooltip';
+import VisuallyHiddenText from '../VisuallyHiddenText';
+import { useI18n, useElement } from '../../hooks';
+import { isValidElement } from '../../utils';
+import NavigationList from './NavigationList';
+import AppShellContext, { AppShellDrawerContext } from './AppShellContext';
+import AppShellDrawer from './Drawer';
+import { AppShellSearch } from './AppShellSearch';
+import { StyledAppInfo, StyledCaseTypes, StyledScrollWrap, StyledUtils, StyledNavCasesList, StyledCountIcon, StyledUtilIconCount, StyledAppShellTooltip, StyledUtilsSeparator, StyledAIAssistant, headerHeight } from './AppShell.styles';
+export const CaseTypes = ({ caseTypes, mobileNavBar }) => {
+    const t = useI18n();
+    const transformedCaseTypes = caseTypes.map(caseType => {
+        return {
+            ...caseType,
+            visual: caseType.icon ? _jsx(Icon, { name: caseType.icon }) : undefined,
+            primary: caseType.name
+        };
+    });
+    return useMemo(() => (_jsx(StyledCaseTypes, { children: _jsx(NavigationList, { items: [
+                {
+                    primary: t('app_shell_create'),
+                    visual: _jsx(Icon, { name: 'plus' }),
+                    items: transformedCaseTypes
+                }
+            ], mobileNavBar: mobileNavBar }) })), [caseTypes, mobileNavBar]);
+};
+export const Links = (props) => {
+    const { links, mobileNavBar } = props;
+    const [transformedLinks, setTransformedLinks] = useState([]);
+    // TODO: Can this be a memo instead of a state and an effect?
+    const mergedNavLinks = (items) => {
+        return items.map((link) => {
+            return {
+                ...link,
+                primary: link.name,
+                'aria-current': link.active ? 'page' : null,
+                visual: link.icon ? _jsx(Icon, { name: link.icon }) : null,
+                onClick: link.links ? undefined : link.onClick,
+                items: link.links ? mergedNavLinks(link.links) : undefined
+            };
+        });
+    };
+    useEffect(() => {
+        setTransformedLinks(mergedNavLinks(links));
+    }, [links]);
+    if (!links.length)
+        return null;
+    return (_jsx("div", { children: _jsx(NavigationList, { items: transformedLinks, mobileNavBar: mobileNavBar }) }));
+};
+const AIAssistant = ({ agent }) => (_jsx(StyledAIAssistant, { children: _jsx(NavigationList, { items: [
+            {
+                id: agent.id,
+                primary: agent.name,
+                visual: agent.icon,
+                'aria-current': agent.active ? 'page' : null,
+                onClick: agent.onClick
+            }
+        ] }) }));
+const Cases = (props) => {
+    const { cases } = props;
+    const setupCases = (items) => {
+        return items.map((item) => {
+            const { id, primary, secondary, collapsedItemInfo, visual = _jsx(Icon, { name: 'case-solid' }), active, onClick, onDismiss, ...restProps } = item;
+            return {
+                ...restProps,
+                id,
+                'aria-current': active ? 'page' : undefined,
+                primary,
+                secondary,
+                collapsedItemInfo,
+                active: !!active,
+                onClick,
+                onDismiss,
+                visual
+            };
+        });
+    };
+    return (_jsx(StyledNavCasesList, { children: _jsx(NavigationList, { items: setupCases(cases) }) }));
+};
+export const Utils = ({ items }) => {
+    const { navOpen, navState, drawerOpen, setDrawerOpen, appHeaderEl } = useContext(AppShellContext);
+    const [item, setItem] = useState();
+    useEffect(() => {
+        if (drawerOpen && item) {
+            setItem(items?.find((utilItem) => !isValidElement(utilItem) && utilItem.name === item.name));
+        }
+    }, [items]);
+    const transform = useCallback((utilItem) => {
+        const uItem = { ...utilItem };
+        delete uItem.onDrawerClose;
+        delete uItem.onDrawerOpen;
+        return {
+            onClick: () => {
+                if (utilItem.drawerView) {
+                    setItem(utilItem);
+                }
+            },
+            ...uItem,
+            primary: utilItem.name,
+            visual: utilItem.count ? (_jsxs(StyledUtilIconCount, { children: [utilItem.visual, _jsx(StyledCountIcon, { variant: 'urgent', id: `${utilItem.name}-count`, children: utilItem.count })] })) : (utilItem.visual),
+            collapseItems: !navOpen
+        };
+    }, [navOpen]);
+    const utilItems = useMemo(() => {
+        return [
+            ...(items ?? []).map(uItem => {
+                return isValidElement(uItem) ? uItem : transform(uItem);
+            })
+        ];
+    }, [items, transform]);
+    useEffect(() => {
+        if (item)
+            setDrawerOpen(true);
+    }, [item]);
+    useEffect(() => {
+        if (navState === 'closed' || navState === 'closing')
+            setDrawerOpen(false);
+    }, [navState]);
+    // setDrawerOpen comes from AppShellContext (raw useState setter — stable reference).
+    // setItem is the local useState setter — also stable. Neither needs to be in deps.
+    // openDrawer and refreshDrawer have identical bodies: both spread `next` to create
+    // a new object reference so useEffect([item]) always fires, even when the same item
+    // is re-opened. The semantic distinction is: openDrawer starts a new drawer session
+    // (useEffect triggers setDrawerOpen(true)); refreshDrawer replaces an already-open
+    // item's content (setDrawerOpen(true) is a no-op when already open).
+    const ctxValue = useMemo(() => ({
+        drawerOpen,
+        openItemName: item?.name,
+        closeDrawer: () => {
+            setDrawerOpen(false);
+        },
+        openDrawer: (next) => {
+            setItem({ ...next });
+        },
+        refreshDrawer: (next) => {
+            setItem({ ...next });
+        }
+    }), [drawerOpen, item?.name]);
+    return (_jsxs(AppShellDrawerContext.Provider, { value: ctxValue, children: [_jsx(StyledUtils, { children: _jsx(NavigationList, { items: utilItems, collapsed: true }) }), item && (_jsx(AppShellDrawer, { drawerOpen: drawerOpen, setDrawerOpen: setDrawerOpen, content: item.drawerView, header: item.drawerHeader || item.name, topOffset: appHeaderEl ? headerHeight : '0', onDrawerClose: () => {
+                    setItem(undefined);
+                    item.onDrawerClose?.();
+                }, onDrawerOpen: item.onDrawerOpen }))] }));
+};
+const AppInfo = ({ appInfo }) => {
+    const [appInfoEl, setAppInfoEl] = useElement();
+    const { navState } = useContext(AppShellContext);
+    const { appName, portalName, href: appInfoHref, onClick: appInfoOnClick, imageSrc: logoSrc, appNameHidden, ...appInfoRestProps } = appInfo;
+    let appInfoAs = 'div';
+    if (appInfoHref)
+        appInfoAs = Link;
+    else if (appInfoOnClick)
+        appInfoAs = Button;
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledAppInfo, { as: Grid, forwardedAs: appInfoAs, variant: 'link', href: appInfoHref, onClick: appInfoOnClick, "aria-label": `${appName}${portalName ? ` - ${portalName}` : ''}`, ...appInfoRestProps, container: {
+                    alignItems: 'center',
+                    areas: portalName ? '"logo app" "logo portal"' : '"logo app"'
+                }, ref: setAppInfoEl, icon: true, children: [_jsx(Grid, { item: { area: 'logo' }, as: Image, src: logoSrc, alt: appName }), _jsx(Grid, { item: { area: 'app' }, as: appNameHidden ? VisuallyHiddenText : 'span', children: appName }), portalName && (_jsx(Grid, { item: { area: 'portal' }, as: 'span', children: portalName }))] }), navState === 'closed' && (!appNameHidden || portalName) && (_jsx(Tooltip, { target: appInfoEl, placement: 'right', as: StyledAppShellTooltip, showDelay: 'none', hideDelay: 'none', children: `${appNameHidden ? '' : appName} ${portalName ?? ''}`.trim() }))] }));
+};
+const AppNavigationPanel = ({ appInfo, navState, searchInput, searchLabel, onClick, caseTypes, links, cases, utils, agent }) => {
+    return (_jsxs(_Fragment, { children: [appInfo && _jsx(AppInfo, { appInfo: appInfo }), searchInput && (_jsx(AppShellSearch, { searchLabel: searchLabel, collapsed: ['closed', 'closing'].includes(navState), searchInput: searchInput })), _jsxs(StyledScrollWrap, { container: { direction: 'column' }, item: { grow: 1 }, tabIndex: -1, onClick: (e) => {
+                    // Ensure that clicks on the container (not on interactive child elements) trigger the onClick handler
+                    if (e.target === e.currentTarget)
+                        onClick?.();
+                }, children: [caseTypes && caseTypes.length > 0 && _jsx(CaseTypes, { caseTypes: caseTypes }), links && _jsx(Links, { links: links }), cases && _jsx(Cases, { cases: cases }), ['open', 'opening'].includes(navState) && (_jsx(StyledUtilsSeparator, { navOpen: ['open', 'opening'].includes(navState) }))] }), ['closed', 'closing'].includes(navState) && _jsx(StyledUtilsSeparator, {}), _jsx(Utils, { items: utils }), agent && _jsx(AIAssistant, { agent: agent })] }));
+};
+export default AppNavigationPanel;
+//# sourceMappingURL=AppNavigationPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppNavigationPanel.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppNavigationPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, useCallback, useMemo, useContext } from 'react';\nimport type { ElementType, MouseEvent } from 'react';\n\nimport Button from '../Button';\nimport Grid from '../Grid';\nimport Icon from '../Icon';\nimport Image from '../Image';\nimport Link from '../Link';\nimport Tooltip from '../Tooltip';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { useI18n, useElement } from '../../hooks';\nimport { isValidElement } from '../../utils';\n\nimport NavigationList from './NavigationList';\nimport AppShellContext, { AppShellDrawerContext } from './AppShellContext';\nimport AppShellDrawer from './Drawer';\nimport { AppShellSearch } from './AppShellSearch';\nimport {\n  StyledAppInfo,\n  StyledCaseTypes,\n  StyledScrollWrap,\n  StyledUtils,\n  StyledNavCasesList,\n  StyledCountIcon,\n  StyledUtilIconCount,\n  StyledAppShellTooltip,\n  StyledUtilsSeparator,\n  StyledAIAssistant,\n  headerHeight\n} from './AppShell.styles';\nimport type {\n  AgentProps,\n  AppInfoProps,\n  CaseProps,\n  CaseTypeProps,\n  LinkProps,\n  NavListItemProps,\n  UtilItemProps,\n  UtilsProps\n} from './AppShell.types';\nimport type { AppNavigationPanelProps } from './AppNavigationPanel.types';\n\nexport const CaseTypes = ({\n  caseTypes,\n  mobileNavBar\n}: {\n  caseTypes: CaseTypeProps[];\n  mobileNavBar?: boolean;\n}) => {\n  const t = useI18n();\n\n  const transformedCaseTypes = caseTypes.map(caseType => {\n    return {\n      ...caseType,\n      visual: caseType.icon ? <Icon name={caseType.icon} /> : undefined,\n      primary: caseType.name\n    };\n  });\n\n  return useMemo(\n    () => (\n      <StyledCaseTypes>\n        <NavigationList\n          items={[\n            {\n              primary: t('app_shell_create'),\n              visual: <Icon name='plus' />,\n              items: transformedCaseTypes\n            }\n          ]}\n          mobileNavBar={mobileNavBar}\n        />\n      </StyledCaseTypes>\n    ),\n    [caseTypes, mobileNavBar]\n  );\n};\n\nexport const Links = (props: { links: LinkProps[]; mobileNavBar?: boolean }) => {\n  const { links, mobileNavBar } = props;\n  const [transformedLinks, setTransformedLinks] = useState<NavListItemProps[]>([]);\n\n  // TODO: Can this be a memo instead of a state and an effect?\n  const mergedNavLinks = (items: LinkProps[]): NavListItemProps[] => {\n    return items.map((link: LinkProps) => {\n      return {\n        ...link,\n        primary: link.name,\n        'aria-current': link.active ? 'page' : null,\n        visual: link.icon ? <Icon name={link.icon} /> : null,\n        onClick: link.links ? undefined : link.onClick,\n        items: link.links ? mergedNavLinks(link.links) : undefined\n      };\n    });\n  };\n\n  useEffect(() => {\n    setTransformedLinks(mergedNavLinks(links));\n  }, [links]);\n\n  if (!links.length) return null;\n\n  return (\n    <div>\n      <NavigationList items={transformedLinks} mobileNavBar={mobileNavBar} />\n    </div>\n  );\n};\n\nconst AIAssistant = ({ agent }: { agent: AgentProps }) => (\n  <StyledAIAssistant>\n    <NavigationList\n      items={[\n        {\n          id: agent.id,\n          primary: agent.name,\n          visual: agent.icon,\n          'aria-current': agent.active ? 'page' : null,\n          onClick: agent.onClick\n        }\n      ]}\n    />\n  </StyledAIAssistant>\n);\n\nconst Cases = (props: { cases: CaseProps[] }) => {\n  const { cases } = props;\n\n  const setupCases = (items: CaseProps[]): NavListItemProps[] => {\n    return items.map((item: CaseProps) => {\n      const {\n        id,\n        primary,\n        secondary,\n        collapsedItemInfo,\n        visual = <Icon name='case-solid' />,\n        active,\n        onClick,\n        onDismiss,\n        ...restProps\n      } = item;\n      return {\n        ...restProps,\n        id,\n        'aria-current': active ? 'page' : undefined,\n        primary,\n        secondary,\n        collapsedItemInfo,\n        active: !!active,\n        onClick,\n        onDismiss,\n        visual\n      };\n    });\n  };\n\n  return (\n    <StyledNavCasesList>\n      <NavigationList items={setupCases(cases)} />\n    </StyledNavCasesList>\n  );\n};\n\nexport const Utils = ({ items }: UtilsProps) => {\n  const { navOpen, navState, drawerOpen, setDrawerOpen, appHeaderEl } = useContext(AppShellContext);\n  const [item, setItem] = useState<UtilItemProps>();\n\n  useEffect(() => {\n    if (drawerOpen && item) {\n      setItem(\n        items?.find<UtilItemProps>(\n          (utilItem): utilItem is UtilItemProps =>\n            !isValidElement(utilItem) && utilItem.name === item.name\n        )\n      );\n    }\n  }, [items]);\n\n  const transform = useCallback(\n    (utilItem: UtilItemProps): NavListItemProps => {\n      const uItem = { ...utilItem };\n      delete uItem.onDrawerClose;\n      delete uItem.onDrawerOpen;\n      return {\n        onClick: () => {\n          if (utilItem.drawerView) {\n            setItem(utilItem);\n          }\n        },\n        ...uItem,\n        primary: utilItem.name,\n        visual: utilItem.count ? (\n          <StyledUtilIconCount>\n            {utilItem.visual}\n            <StyledCountIcon variant='urgent' id={`${utilItem.name}-count`}>\n              {utilItem.count}\n            </StyledCountIcon>\n          </StyledUtilIconCount>\n        ) : (\n          utilItem.visual\n        ),\n        collapseItems: !navOpen\n      };\n    },\n    [navOpen]\n  );\n\n  const utilItems = useMemo(() => {\n    return [\n      ...(items ?? []).map(uItem => {\n        return isValidElement(uItem) ? uItem : transform(uItem);\n      })\n    ];\n  }, [items, transform]);\n\n  useEffect(() => {\n    if (item) setDrawerOpen(true);\n  }, [item]);\n\n  useEffect(() => {\n    if (navState === 'closed' || navState === 'closing') setDrawerOpen(false);\n  }, [navState]);\n\n  // setDrawerOpen comes from AppShellContext (raw useState setter — stable reference).\n  // setItem is the local useState setter — also stable. Neither needs to be in deps.\n  // openDrawer and refreshDrawer have identical bodies: both spread `next` to create\n  // a new object reference so useEffect([item]) always fires, even when the same item\n  // is re-opened. The semantic distinction is: openDrawer starts a new drawer session\n  // (useEffect triggers setDrawerOpen(true)); refreshDrawer replaces an already-open\n  // item's content (setDrawerOpen(true) is a no-op when already open).\n  const ctxValue = useMemo(\n    () => ({\n      drawerOpen,\n      openItemName: item?.name,\n      closeDrawer: () => {\n        setDrawerOpen(false);\n      },\n      openDrawer: (next: UtilItemProps) => {\n        setItem({ ...next });\n      },\n      refreshDrawer: (next: UtilItemProps) => {\n        setItem({ ...next });\n      }\n    }),\n    [drawerOpen, item?.name]\n  );\n\n  return (\n    <AppShellDrawerContext.Provider value={ctxValue}>\n      <StyledUtils>\n        <NavigationList items={utilItems} collapsed />\n      </StyledUtils>\n\n      {item && (\n        <AppShellDrawer\n          drawerOpen={drawerOpen}\n          setDrawerOpen={setDrawerOpen}\n          content={item.drawerView}\n          header={item.drawerHeader || item.name}\n          topOffset={appHeaderEl ? headerHeight : '0'}\n          onDrawerClose={() => {\n            setItem(undefined);\n            item.onDrawerClose?.();\n          }}\n          onDrawerOpen={item.onDrawerOpen}\n        />\n      )}\n    </AppShellDrawerContext.Provider>\n  );\n};\n\nconst AppInfo = ({ appInfo }: { appInfo: AppInfoProps }) => {\n  const [appInfoEl, setAppInfoEl] = useElement<HTMLAnchorElement>();\n  const { navState } = useContext(AppShellContext);\n\n  const {\n    appName,\n    portalName,\n    href: appInfoHref,\n    onClick: appInfoOnClick,\n    imageSrc: logoSrc,\n    appNameHidden,\n    ...appInfoRestProps\n  } = appInfo;\n\n  let appInfoAs: ElementType = 'div';\n  if (appInfoHref) appInfoAs = Link;\n  else if (appInfoOnClick) appInfoAs = Button;\n\n  return (\n    <>\n      <StyledAppInfo\n        as={Grid}\n        forwardedAs={appInfoAs}\n        variant='link'\n        href={appInfoHref}\n        onClick={appInfoOnClick}\n        aria-label={`${appName}${portalName ? ` - ${portalName}` : ''}`}\n        {...appInfoRestProps}\n        container={{\n          alignItems: 'center',\n          areas: portalName ? '\"logo app\" \"logo portal\"' : '\"logo app\"'\n        }}\n        ref={setAppInfoEl}\n        icon\n      >\n        <Grid item={{ area: 'logo' }} as={Image} src={logoSrc} alt={appName} />\n        <Grid item={{ area: 'app' }} as={appNameHidden ? VisuallyHiddenText : 'span'}>\n          {appName}\n        </Grid>\n        {portalName && (\n          <Grid item={{ area: 'portal' }} as='span'>\n            {portalName}\n          </Grid>\n        )}\n      </StyledAppInfo>\n      {navState === 'closed' && (!appNameHidden || portalName) && (\n        <Tooltip\n          target={appInfoEl}\n          placement='right'\n          as={StyledAppShellTooltip}\n          showDelay='none'\n          hideDelay='none'\n        >\n          {`${appNameHidden ? '' : appName} ${portalName ?? ''}`.trim()}\n        </Tooltip>\n      )}\n    </>\n  );\n};\n\nconst AppNavigationPanel = ({\n  appInfo,\n  navState,\n  searchInput,\n  searchLabel,\n  onClick,\n  caseTypes,\n  links,\n  cases,\n  utils,\n  agent\n}: AppNavigationPanelProps) => {\n  return (\n    <>\n      {appInfo && <AppInfo appInfo={appInfo} />}\n      {searchInput && (\n        <AppShellSearch\n          searchLabel={searchLabel}\n          collapsed={['closed', 'closing'].includes(navState)}\n          searchInput={searchInput}\n        />\n      )}\n      <StyledScrollWrap\n        container={{ direction: 'column' }}\n        item={{ grow: 1 }}\n        tabIndex={-1}\n        onClick={(e: MouseEvent<HTMLElement>) => {\n          // Ensure that clicks on the container (not on interactive child elements) trigger the onClick handler\n          if (e.target === e.currentTarget) onClick?.();\n        }}\n      >\n        {caseTypes && caseTypes.length > 0 && <CaseTypes caseTypes={caseTypes} />}\n        {links && <Links links={links} />}\n        {cases && <Cases cases={cases} />}\n        {['open', 'opening'].includes(navState) && (\n          <StyledUtilsSeparator navOpen={['open', 'opening'].includes(navState)} />\n        )}\n      </StyledScrollWrap>\n      {['closed', 'closing'].includes(navState) && <StyledUtilsSeparator />}\n      <Utils items={utils} />\n      {agent && <AIAssistant agent={agent} />}\n    </>\n  );\n};\n\nexport default AppNavigationPanel;\n"]}

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

@@ -0,0 +1,28 @@
+import type { ReactElement } from 'react';
+import type { openCloseStates } from '../../hooks/useTransitionState';
+import type { BaseProps, NoChildrenProp } from '../../types';
+import type { SearchInputProps } from '../SearchInput';
+import type { AgentProps, AppInfoProps, CaseProps, CaseTypeProps, LinkProps, UtilItemProps } from './AppShell.types';
+export interface AppNavigationPanelProps extends BaseProps, NoChildrenProp {
+    /** Props related to the App Shell header. */
+    appInfo?: AppInfoProps;
+    /** Current transition state of the navigation panel. */
+    navState: (typeof openCloseStates)[keyof typeof openCloseStates];
+    /** Props for the search input rendered in the sidebar. */
+    searchInput?: SearchInputProps;
+    /** Aria-label for the search input. */
+    searchLabel: string;
+    /** Click event handler for the navigation container. */
+    onClick?: () => void;
+    /** Case types for the create case action. */
+    caseTypes?: CaseTypeProps[];
+    /** Navigation links. */
+    links?: LinkProps[];
+    /** Open cases. */
+    cases?: CaseProps[];
+    /** Utility items rendered at the bottom of the sidebar. */
+    utils?: (UtilItemProps | ReactElement)[];
+    /** AI Assistant agent configuration. */
+    agent?: AgentProps;
+}
+//# sourceMappingURL=AppNavigationPanel.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppNavigationPanel.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppNavigationPanel.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,OAAO,KAAK,EACV,UAAU,EACV,YAAY,EACZ,SAAS,EACT,aAAa,EACb,SAAS,EACT,aAAa,EACd,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,uBAAwB,SAAQ,SAAS,EAAE,cAAc;IACxE,6CAA6C;IAC7C,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,wDAAwD;IACxD,QAAQ,EAAE,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC;IACjE,0DAA0D;IAC1D,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,uCAAuC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,aAAa,EAAE,CAAC;IAC5B,wBAAwB;IACxB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,kBAAkB;IAClB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,CAAC,aAAa,GAAG,YAAY,CAAC,EAAE,CAAC;IACzC,wCAAwC;IACxC,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppNavigationPanel.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppNavigationPanel.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactElement } from 'react';\n\nimport type { openCloseStates } from '../../hooks/useTransitionState';\nimport type { BaseProps, NoChildrenProp } from '../../types';\nimport type { SearchInputProps } from '../SearchInput';\n\nimport type {\n  AgentProps,\n  AppInfoProps,\n  CaseProps,\n  CaseTypeProps,\n  LinkProps,\n  UtilItemProps\n} from './AppShell.types';\n\nexport interface AppNavigationPanelProps extends BaseProps, NoChildrenProp {\n  /** Props related to the App Shell header. */\n  appInfo?: AppInfoProps;\n  /** Current transition state of the navigation panel. */\n  navState: (typeof openCloseStates)[keyof typeof openCloseStates];\n  /** Props for the search input rendered in the sidebar. */\n  searchInput?: SearchInputProps;\n  /** Aria-label for the search input. */\n  searchLabel: string;\n  /** Click event handler for the navigation container. */\n  onClick?: () => void;\n  /** Case types for the create case action. */\n  caseTypes?: CaseTypeProps[];\n  /** Navigation links. */\n  links?: LinkProps[];\n  /** Open cases. */\n  cases?: CaseProps[];\n  /** Utility items rendered at the bottom of the sidebar. */\n  utils?: (UtilItemProps | ReactElement)[];\n  /** AI Assistant agent configuration. */\n  agent?: AgentProps;\n}\n"]}

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

@@ -1,7 +1,4 @@
-import type { FunctionComponent, FC } from 'react';
-import type { ForwardProps } from '../../types';
-import type { AppShellProps, UtilsProps } from './AppShell.types';
-export declare const Utils: FC<UtilsProps>;
-declare const AppShell: FunctionComponent<AppShellProps & ForwardProps>;
+import type { AppShellProps } from './AppShell.types';
+declare const AppShell: import("react").ForwardRefExoticComponent<AppShellProps & import("react").RefAttributes<HTMLDivElement>>;
 export default AppShell;
 //# sourceMappingURL=AppShell.d.ts.map

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":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAqC,EAAE,EAAE,MAAM,OAAO,CAAC;AAYtF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AA4ChD,OAAO,KAAK,EACV,aAAa,EAMb,UAAU,EACX,MAAM,kBAAkB,CAAC;AA8G1B,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CA0IhC,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAqZ5D,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AAsEA,OAAO,KAAK,EAAE,aAAa,EAAiB,MAAM,kBAAkB,CAAC;AAgFrE,QAAA,MAAM,QAAQ,0GAsiBZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}