@pega/cosmos-react-core 7.0.0-build.9.2 → 7.0.0-rc.1

package/lib/components/AIButton/AIButton.d.ts

@@ -1,9 +1,37 @@
+import type { PropsWithoutRef } from 'react';
 import type { NoChildrenProp, WithAttributes } from '../../types';
 export type AIButtonProps = WithAttributes<'button', NoChildrenProp & {
+    /**
+     * Controls the styling of the Button.
+     * @default 'secondary'
+     */
+    variant?: 'primary' | 'secondary';
     /** The text content of the AIButton. */
     label: string;
-}>;
+} & ({
+    /**
+     * Icon name. Set to null to render button without an icon.
+     * @default 'polaris-solid'
+     */
+    icon?: string;
+    /**
+     * Only display the icon. The label prop will be forwarded to a tooltip.
+     * @default false
+     */
+    iconOnly: true;
+} | {
+    /**
+     * Icon name. Set to null to render button without an icon.
+     * @default 'polaris-solid'
+     */
+    icon?: string | null;
+    /**
+     * Only display the icon. The label prop will be forwarded to a tooltip.
+     * @default false
+     */
+    iconOnly?: false;
+})>;
 export declare const StyledAIButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button").ButtonProps & import("../../types").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-declare const _default: import("react").ForwardRefExoticComponent<Omit<AIButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+declare const _default: import("react").ForwardRefExoticComponent<PropsWithoutRef<AIButtonProps> & import("react").RefAttributes<HTMLButtonElement>>;
 export default _default;
 //# sourceMappingURL=AIButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AIButton.d.ts","sourceRoot":"","sources":["../../../src/components/AIButton/AIButton.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAU9E,MAAM,MAAM,aAAa,GAAG,cAAc,CACxC,QAAQ,EACR,cAAc,GAAG;IACf,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;CACf,CACF,CAAC;AAEF,eAAO,MAAM,cAAc,2MAAmB,CAAC;;AAI/C,wBAwBE"}
+{"version":3,"file":"AIButton.d.ts","sourceRoot":"","sources":["../../../src/components/AIButton/AIButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAW9E,MAAM,MAAM,aAAa,GAAG,cAAc,CACxC,QAAQ,EACR,cAAc,GAAG;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,CACE;IACE;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,EAAE,IAAI,CAAC;CAChB,GACD;IACE;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CACJ,CACJ,CAAC;AAEF,eAAO,MAAM,cAAc,2MAAmB,CAAC;;AAI/C,wBAyCE"}

package/lib/components/AIButton/AIButton.js

@@ -1,25 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled from 'styled-components';
-import * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';
 import { defaultThemeProp } from '../../theme';
 import { useTheme } from '../../hooks';
 import Button from '../Button';
-import Configuration from '../Configuration';
 import Flex from '../Flex';
 import Icon, { registerIcon } from '../Icon';
+import * as polarisSolidIcon from '../Icon/icons/polaris-solid.icon';
+import { ThemeOverride } from '../Configuration';
 registerIcon(polarisSolidIcon);
 export const StyledAIButton = styled(Button) ``;
 StyledAIButton.defaultProps = defaultThemeProp;
-export default forwardRef(function AIButton({ label, disabled = false, ...restProps }, ref) {
+export default forwardRef(function AIButton({ label, icon = 'polaris-solid', disabled = false, iconOnly, variant = 'secondary', ...restProps }, ref) {
     const theme = useTheme();
-    return (_jsx(Configuration, { theme: {
+    return (_jsx(ThemeOverride, { theme: {
             components: {
                 button: {
                     color: theme.base.palette.ai,
-                    'secondary-color': theme.base.palette['primary-background']
+                    'secondary-color': theme.base.palette.ai,
+                    'secondary-fill-style': 'outline'
                 }
             }
-        }, children: _jsx(StyledAIButton, { ...restProps, ref: ref, disabled: disabled, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'polaris-solid' }), _jsx("span", { children: label })] }) }) }));
+        }, children: _jsx(StyledAIButton, { ...restProps, variant: variant, ref: ref, disabled: disabled, icon: iconOnly, label: iconOnly ? label : undefined, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, as: 'span', children: [icon && _jsx(Icon, { name: icon }), !iconOnly && _jsx("span", { children: label })] }) }) }));
 });
 //# sourceMappingURL=AIButton.js.map

package/lib/components/AIButton/AIButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"AIButton.js","sourceRoot":"","sources":["../../../src/components/AIButton/AIButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,KAAK,gBAAgB,MAAM,sEAAsE,CAAC;AAGzG,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE7C,YAAY,CAAC,gBAAgB,CAAC,CAAC;AAU/B,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,EAAE,CAAC;AAE/C,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,eAAe,UAAU,CACvB,SAAS,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG;IAC9D,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;oBAC5B,iBAAiB,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;iBAC5D;aACF;SACF,YAED,KAAC,cAAc,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,YACzD,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC/C,KAAC,IAAI,IAAC,IAAI,EAAC,eAAe,GAAG,EAC7B,yBAAO,KAAK,GAAQ,IACf,GACQ,GACH,CACjB,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\n\nimport type { NoChildrenProp, RefElement, WithAttributes } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useTheme } from '../../hooks';\nimport Button from '../Button';\nimport Configuration from '../Configuration';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\n\nregisterIcon(polarisSolidIcon);\n\nexport type AIButtonProps = WithAttributes<\n  'button',\n  NoChildrenProp & {\n    /** The text content of the AIButton. */\n    label: string;\n  }\n>;\n\nexport const StyledAIButton = styled(Button)``;\n\nStyledAIButton.defaultProps = defaultThemeProp;\n\nexport default forwardRef<RefElement<AIButtonProps>, PropsWithoutRef<AIButtonProps>>(\n  function AIButton({ label, disabled = false, ...restProps }, ref) {\n    const theme = useTheme();\n\n    return (\n      <Configuration\n        theme={{\n          components: {\n            button: {\n              color: theme.base.palette.ai,\n              'secondary-color': theme.base.palette['primary-background']\n            }\n          }\n        }}\n      >\n        <StyledAIButton {...restProps} ref={ref} disabled={disabled}>\n          <Flex container={{ alignItems: 'center', gap: 1 }}>\n            <Icon name='polaris-solid' />\n            <span>{label}</span>\n          </Flex>\n        </StyledAIButton>\n      </Configuration>\n    );\n  }\n);\n"]}
+{"version":3,"file":"AIButton.js","sourceRoot":"","sources":["../../../src/components/AIButton/AIButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,gBAAgB,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,YAAY,CAAC,gBAAgB,CAAC,CAAC;AAwC/B,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,EAAE,CAAC;AAE/C,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,eAAe,UAAU,CACvB,SAAS,QAAQ,CACf,EACE,KAAK,EACL,IAAI,GAAG,eAAe,EACtB,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,OAAO,GAAG,WAAW,EACrB,GAAG,SAAS,EACb,EACD,GAAG;IAEH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;oBAC5B,iBAAiB,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;oBACxC,sBAAsB,EAAE,SAAS;iBAClC;aACF;SACF,YAED,KAAC,cAAc,OACT,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,YAEnC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAC,MAAM,aACzD,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,EAC5B,CAAC,QAAQ,IAAI,yBAAO,KAAK,GAAQ,IAC7B,GACQ,GACH,CACjB,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport type { NoChildrenProp, RefElement, WithAttributes } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useTheme } from '../../hooks';\nimport Button from '../Button';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as polarisSolidIcon from '../Icon/icons/polaris-solid.icon';\nimport { ThemeOverride } from '../Configuration';\n\nregisterIcon(polarisSolidIcon);\n\nexport type AIButtonProps = WithAttributes<\n  'button',\n  NoChildrenProp & {\n    /**\n     * Controls the styling of the Button.\n     * @default 'secondary'\n     */\n    variant?: 'primary' | 'secondary';\n    /** The text content of the AIButton. */\n    label: string;\n  } & (\n      | {\n          /**\n           * Icon name. Set to null to render button without an icon.\n           * @default 'polaris-solid'\n           */\n          icon?: string;\n          /**\n           * Only display the icon. The label prop will be forwarded to a tooltip.\n           * @default false\n           */\n          iconOnly: true;\n        }\n      | {\n          /**\n           * Icon name. Set to null to render button without an icon.\n           * @default 'polaris-solid'\n           */\n          icon?: string | null;\n          /**\n           * Only display the icon. The label prop will be forwarded to a tooltip.\n           * @default false\n           */\n          iconOnly?: false;\n        }\n    )\n>;\n\nexport const StyledAIButton = styled(Button)``;\n\nStyledAIButton.defaultProps = defaultThemeProp;\n\nexport default forwardRef<RefElement<AIButtonProps>, PropsWithoutRef<AIButtonProps>>(\n  function AIButton(\n    {\n      label,\n      icon = 'polaris-solid',\n      disabled = false,\n      iconOnly,\n      variant = 'secondary',\n      ...restProps\n    },\n    ref\n  ) {\n    const theme = useTheme();\n    return (\n      <ThemeOverride\n        theme={{\n          components: {\n            button: {\n              color: theme.base.palette.ai,\n              'secondary-color': theme.base.palette.ai,\n              'secondary-fill-style': 'outline'\n            }\n          }\n        }}\n      >\n        <StyledAIButton\n          {...restProps}\n          variant={variant}\n          ref={ref}\n          disabled={disabled}\n          icon={iconOnly}\n          label={iconOnly ? label : undefined}\n        >\n          <Flex container={{ alignItems: 'center', gap: 1 }} as='span'>\n            {icon && <Icon name={icon} />}\n            {!iconOnly && <span>{label}</span>}\n          </Flex>\n        </StyledAIButton>\n      </ThemeOverride>\n    );\n  }\n);\n"]}

package/lib/components/Actions/Actions.d.ts

@@ -1,7 +1,7 @@
 import type { Action, NoChildrenProp, WithAttributes } from '../../types';
 import type { ButtonProps } from '../Button';
 import type { MenuButtonProps } from '../MenuButton';
-export type ActionsProps = WithAttributes<'button', NoChildrenProp & {
+export type ActionsProps = WithAttributes<'button', NoChildrenProp & Pick<ButtonProps, 'compact' | 'disabled'> & {
     items: Action[];
     contextualLabel?: string;
     /** @default 2 */

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

@@ -1 +1 @@
-{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAEtF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAG7C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,MAAM,MAAM,YAAY,GAAG,cAAc,CACvC,QAAQ,EACR,cAAc,GAAG;IACf,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE;QAChB,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;QACrC,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;KAC1C,CAAC;IACF,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC,CACF,CAAC;;AAEF,wBAsDG"}
+{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAEtF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAG7C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,MAAM,MAAM,YAAY,GAAG,cAAc,CACvC,QAAQ,EACR,cAAc,GACZ,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,UAAU,CAAC,GAAG;IAC1C,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE;QAChB,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;QACrC,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;KAC1C,CAAC;IACF,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC,CACJ,CAAC;;AAEF,wBAsEG"}

package/lib/components/Actions/Actions.js

@@ -1,16 +1,19 @@
+import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useConsolidatedRef, useI18n } from '../../hooks';
 import Button from '../Button';
 import Icon from '../Icon';
 import MenuButton from '../MenuButton';
-export default forwardRef(function Actions({ items, menuAt = 2, iconOnly = true, menuButtonProps, contextualLabel, compact = false }, ref) {
+export default forwardRef(function Actions({ 
+// @ts-expect-error
+'data-testid': dataTestId, items, menuAt = 2, iconOnly = true, menuButtonProps, contextualLabel, compact = false, disabled = false, tabIndex }, ref) {
     const t = useI18n();
     const menuButtonRef = useConsolidatedRef(ref);
     if (!items || items.length === 0) {
         return null;
     }
-    return items.length >= menuAt ? (_jsx(MenuButton, { ref: menuButtonRef, text: t('actions'), "aria-label": contextualLabel && t('actions_for', [contextualLabel]), iconOnly: true, icon: 'more', variant: 'simple', compact: compact, onClick: menuButtonProps?.onClick, onKeyDown: menuButtonProps?.onKeyDown, menu: {
+    return items.length >= menuAt ? (_jsx(MenuButton, { ...(dataTestId ? { 'data-testid': dataTestId } : {}), ref: menuButtonRef, text: t('actions'), "aria-label": contextualLabel && t('actions_for', [contextualLabel]), iconOnly: true, icon: 'more', variant: 'simple', compact: compact, onClick: menuButtonProps?.onClick, onKeyDown: menuButtonProps?.onKeyDown, disabled: disabled, tabIndex: tabIndex, menu: {
             items: items.map(({ text, onClick, ...restProps }) => ({
                 ...restProps,
                 primary: text,
@@ -21,7 +24,7 @@ export default forwardRef(function Actions({ items, menuAt = 2, iconOnly = true,
                     : undefined
             }))
         } })) : (_jsx(_Fragment, { children: items.map(({ id, icon, text, onClick, ...restProps }) => {
-            return (_jsx(Button, { variant: icon && iconOnly ? 'simple' : undefined, onClick: (event) => onClick?.(id, event), label: icon ? text : undefined, icon: !!icon && iconOnly, compact: compact, "aria-label": contextualLabel ? `${text} - ${contextualLabel}` : text, ...restProps, children: icon && iconOnly ? _jsx(Icon, { name: icon }) : text }, id));
+            return (_createElement(Button, { ...(dataTestId ? { 'data-testid': dataTestId } : {}), key: id, variant: icon && iconOnly ? 'simple' : undefined, onClick: (event) => onClick?.(id, event), label: icon ? text : undefined, icon: !!icon && iconOnly, compact: compact, "aria-label": contextualLabel ? `${text} - ${contextualLabel}` : text, disabled: disabled, ...restProps }, icon && iconOnly ? _jsx(Icon, { name: icon }) : text));
         }) }));
 });
 //# sourceMappingURL=Actions.js.map

package/lib/components/Actions/Actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE1D,OAAO,MAAM,MAAM,WAAW,CAAC;AAE/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,UAAU,MAAM,eAAe,CAAC;AAqBvC,eAAe,UAAU,CAA0D,SAAS,OAAO,CACjG,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,EAAE,eAAe,EAAE,eAAe,EAAE,OAAO,GAAG,KAAK,EAAE,EACzF,GAAG;IAEH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,aAAa,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE9C,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QAChC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,CAC9B,KAAC,UAAU,IACT,GAAG,EAAE,aAAa,EAClB,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,gBACN,eAAe,IAAI,CAAC,CAAC,aAAa,EAAE,CAAC,eAAe,CAAC,CAAC,EAClE,QAAQ,QACR,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,eAAe,EAAE,OAAO,EACjC,SAAS,EAAE,eAAe,EAAE,SAAS,EACrC,IAAI,EAAE;YACJ,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC;gBACrD,GAAG,SAAS;gBACZ,OAAO,EAAE,IAAI;gBACb,OAAO,EAAE,OAAO;oBACd,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;wBACR,OAAO,CAAC,EAAE,EAAE,CAAC,EAAE,aAAa,CAAC,OAAO,IAAI,SAAS,CAAC,CAAC;oBACrD,CAAC;oBACH,CAAC,CAAC,SAAS;aACd,CAAC,CAAC;SACJ,GACD,CACH,CAAC,CAAC,CAAC,CACF,4BACG,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;YACvD,OAAO,CACL,KAAC,MAAM,IAEL,OAAO,EAAE,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAChD,OAAO,EAAE,CAAC,KAAoC,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,CAAC,EACvE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC9B,IAAI,EAAE,CAAC,CAAC,IAAI,IAAI,QAAQ,EACxB,OAAO,EAAE,OAAO,gBACJ,eAAe,CAAC,CAAC,CAAC,GAAG,IAAI,MAAM,eAAe,EAAE,CAAC,CAAC,CAAC,IAAI,KAC/D,SAAS,YAEZ,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC,CAAC,CAAC,IAAI,IAT1C,EAAE,CAUA,CACV,CAAC;QACJ,CAAC,CAAC,GACD,CACJ,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, MouseEvent } from 'react';\n\nimport { useConsolidatedRef, useI18n } from '../../hooks';\nimport type { Action, NoChildrenProp, RefElement, WithAttributes } from '../../types';\nimport Button from '../Button';\nimport type { ButtonProps } from '../Button';\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport type { MenuButtonProps } from '../MenuButton';\n\nexport type ActionsProps = WithAttributes<\n  'button',\n  NoChildrenProp & {\n    items: Action[];\n    contextualLabel?: string;\n    /** @default 2 */\n    menuAt?: number;\n    menuButtonProps?: {\n      onClick?: MenuButtonProps['onClick'];\n      onKeyDown?: MenuButtonProps['onKeyDown'];\n    };\n    /** @default true */\n    iconOnly?: boolean;\n    /** @default false */\n    compact?: ButtonProps['compact'];\n  }\n>;\n\nexport default forwardRef<RefElement<ActionsProps>, PropsWithoutRef<ActionsProps>>(function Actions(\n  { items, menuAt = 2, iconOnly = true, menuButtonProps, contextualLabel, compact = false },\n  ref\n) {\n  const t = useI18n();\n  const menuButtonRef = useConsolidatedRef(ref);\n\n  if (!items || items.length === 0) {\n    return null;\n  }\n\n  return items.length >= menuAt ? (\n    <MenuButton\n      ref={menuButtonRef}\n      text={t('actions')}\n      aria-label={contextualLabel && t('actions_for', [contextualLabel])}\n      iconOnly\n      icon='more'\n      variant='simple'\n      compact={compact}\n      onClick={menuButtonProps?.onClick}\n      onKeyDown={menuButtonProps?.onKeyDown}\n      menu={{\n        items: items.map(({ text, onClick, ...restProps }) => ({\n          ...restProps,\n          primary: text,\n          onClick: onClick\n            ? (id, e) => {\n                onClick(id, e, menuButtonRef.current ?? undefined);\n              }\n            : undefined\n        }))\n      }}\n    />\n  ) : (\n    <>\n      {items.map(({ id, icon, text, onClick, ...restProps }) => {\n        return (\n          <Button\n            key={id}\n            variant={icon && iconOnly ? 'simple' : undefined}\n            onClick={(event: MouseEvent<HTMLButtonElement>) => onClick?.(id, event)}\n            label={icon ? text : undefined}\n            icon={!!icon && iconOnly}\n            compact={compact}\n            aria-label={contextualLabel ? `${text} - ${contextualLabel}` : text}\n            {...restProps}\n          >\n            {icon && iconOnly ? <Icon name={icon} /> : text}\n          </Button>\n        );\n      })}\n    </>\n  );\n});\n"]}
+{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, MouseEvent } from 'react';\n\nimport { useConsolidatedRef, useI18n } from '../../hooks';\nimport type { Action, NoChildrenProp, RefElement, WithAttributes } from '../../types';\nimport Button from '../Button';\nimport type { ButtonProps } from '../Button';\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport type { MenuButtonProps } from '../MenuButton';\n\nexport type ActionsProps = WithAttributes<\n  'button',\n  NoChildrenProp &\n    Pick<ButtonProps, 'compact' | 'disabled'> & {\n      items: Action[];\n      contextualLabel?: string;\n      /** @default 2 */\n      menuAt?: number;\n      menuButtonProps?: {\n        onClick?: MenuButtonProps['onClick'];\n        onKeyDown?: MenuButtonProps['onKeyDown'];\n      };\n      /** @default true */\n      iconOnly?: boolean;\n      /** @default false */\n      compact?: ButtonProps['compact'];\n    }\n>;\n\nexport default forwardRef<RefElement<ActionsProps>, PropsWithoutRef<ActionsProps>>(function Actions(\n  {\n    // @ts-expect-error\n    'data-testid': dataTestId,\n    items,\n    menuAt = 2,\n    iconOnly = true,\n    menuButtonProps,\n    contextualLabel,\n    compact = false,\n    disabled = false,\n    tabIndex\n  },\n  ref\n) {\n  const t = useI18n();\n  const menuButtonRef = useConsolidatedRef(ref);\n\n  if (!items || items.length === 0) {\n    return null;\n  }\n\n  return items.length >= menuAt ? (\n    <MenuButton\n      {...(dataTestId ? { 'data-testid': dataTestId } : {})}\n      ref={menuButtonRef}\n      text={t('actions')}\n      aria-label={contextualLabel && t('actions_for', [contextualLabel])}\n      iconOnly\n      icon='more'\n      variant='simple'\n      compact={compact}\n      onClick={menuButtonProps?.onClick}\n      onKeyDown={menuButtonProps?.onKeyDown}\n      disabled={disabled}\n      tabIndex={tabIndex}\n      menu={{\n        items: items.map(({ text, onClick, ...restProps }) => ({\n          ...restProps,\n          primary: text,\n          onClick: onClick\n            ? (id, e) => {\n                onClick(id, e, menuButtonRef.current ?? undefined);\n              }\n            : undefined\n        }))\n      }}\n    />\n  ) : (\n    <>\n      {items.map(({ id, icon, text, onClick, ...restProps }) => {\n        return (\n          <Button\n            {...(dataTestId ? { 'data-testid': dataTestId } : {})}\n            key={id}\n            variant={icon && iconOnly ? 'simple' : undefined}\n            onClick={(event: MouseEvent<HTMLButtonElement>) => onClick?.(id, event)}\n            label={icon ? text : undefined}\n            icon={!!icon && iconOnly}\n            compact={compact}\n            aria-label={contextualLabel ? `${text} - ${contextualLabel}` : text}\n            disabled={disabled}\n            {...restProps}\n          >\n            {icon && iconOnly ? <Icon name={icon} /> : text}\n          </Button>\n        );\n      })}\n    </>\n  );\n});\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAMjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAIhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAavD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAwG9D,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAMjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAIhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAcvD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAsG9D,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/lib/components/AppShell/AppHeader.js

@@ -1,19 +1,23 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useContext, useEffect } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext, useEffect, useMemo } from 'react';
 import Flex from '../Flex';
 import Image from '../Image';
 import SearchInput from '../SearchInput';
-import { useBreakpoint, useElement } from '../../hooks';
-import BareButton from '../Button/BareButton';
+import { useBreakpoint, useElement, useI18n, useTheme } from '../../hooks';
 import VisuallyHiddenText from '../VisuallyHiddenText';
+import { ThemeOverride } from '../Configuration';
 import AppShellOperator from './Operator';
 import ContextSwitcher from './ContextSwitcher';
 import { StyledAppHeader, StyledAppHeaderInfo, StyledAppHeaderSearchForm, StyledAppHeaderSpacer, StyledAppHeaderText, StyledAppHeaderOperator } from './AppHeader.styles';
 import AppShellContext from './AppShellContext';
+import { getHeaderTheme } from './style-utils';
 const AppHeader = forwardRef(function AppHeader({ appName, contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {}, fullImageSrc, imageSrc, href, onClick, portalName, target, appNameHidden, operator, searchInput, searchLabel, searchPage }, ref) {
+    const t = useI18n();
     const isMediumOrAbove = useBreakpoint('md');
     const [searchContainer, setSearchContainer] = useElement();
     const { drawerOpen, setSearchContainerEl } = useContext(AppShellContext);
+    const theme = useTheme();
+    const headerTheme = useMemo(() => getHeaderTheme(theme), [theme]);
     useEffect(() => {
         if (searchPage && searchContainer) {
             setSearchContainerEl(searchContainer);
@@ -25,9 +29,7 @@ const AppHeader = forwardRef(function AppHeader({ appName, contextSwitcher: { co
     let appInfoAs = 'div';
     if (href)
         appInfoAs = 'a';
-    else if (onClick)
-        appInfoAs = BareButton;
-    return (_jsxs(Flex, { as: StyledAppHeader, container: { alignItems: 'center', pad: 1 }, hideTitle: !isMediumOrAbove, drawerOpen: drawerOpen, ref: ref, children: [contexts && contexts.length > 1 && onContextClick && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel })), _jsx(StyledAppHeaderInfo, { centerLogo: !fullImageSrc, children: _jsxs(Flex, { container: { inline: true, alignItems: 'center', gap: 1 }, as: appInfoAs, href: href, onClick: onClick, target: target, children: [_jsx(Image, { src: fullImageSrc || imageSrc, alt: '', "aria-hidden": 'true' }), isMediumOrAbove && (_jsxs(_Fragment, { children: [_jsx(StyledAppHeaderText, { as: appNameHidden ? VisuallyHiddenText : 'span', variant: 'primary', children: appName }), portalName && (_jsx(StyledAppHeaderText, { as: appNameHidden ? VisuallyHiddenText : 'span', variant: 'secondary', children: portalName }))] }))] }) }), _jsx(Flex, { item: { grow: 1 }, container: { justify: 'end' }, children: searchInput ? (_jsx(StyledAppHeaderSearchForm, { ref: setSearchContainer, role: 'search', "aria-label": searchLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: !searchPage && _jsx(SearchInput, { ...searchInput }) })) : (_jsx(StyledAppHeaderSpacer, {})) }), _jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, children: operator.avatar })] }));
+    return (_jsx(ThemeOverride, { theme: headerTheme, children: _jsxs(Flex, { as: StyledAppHeader, container: { alignItems: 'center', pad: 1 }, hideTitle: !isMediumOrAbove, drawerOpen: drawerOpen, ref: ref, children: [contexts && contexts.length > 1 && onContextClick && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel })), _jsx(StyledAppHeaderInfo, { centerLogo: !fullImageSrc, children: _jsxs(Flex, { container: { inline: true, alignItems: 'center', gap: 1 }, as: appInfoAs, href: href, onClick: href ? onClick : undefined, target: target, children: [_jsx(Image, { src: fullImageSrc || imageSrc, alt: t('application_logo') }), _jsx(StyledAppHeaderText, { as: appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span', variant: 'primary', children: appName }), portalName && (_jsx(StyledAppHeaderText, { as: appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span', variant: 'secondary', children: portalName }))] }) }), _jsx(Flex, { item: { grow: 1 }, container: { justify: 'end' }, children: searchInput ? (_jsx(StyledAppHeaderSearchForm, { ref: setSearchContainer, role: 'search', "aria-label": searchLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: !searchPage && _jsx(SearchInput, { ...searchInput }) })) : (_jsx(StyledAppHeaderSpacer, {})) }), _jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, children: operator.avatar })] }) }));
 });
 export default AppHeader;
 //# sourceMappingURL=AppHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useContext, useEffect } from 'react';\nimport type { FunctionComponent, Ref, ElementType } from 'react';\n\nimport Flex from '../Flex';\nimport Image from '../Image';\nimport SearchInput from '../SearchInput';\nimport { useBreakpoint, useElement } from '../../hooks';\nimport type { ForwardProps } from '../../types';\nimport BareButton from '../Button/BareButton';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport type { AppHeaderProps } from './AppShell.types';\nimport AppShellOperator from './Operator';\nimport ContextSwitcher from './ContextSwitcher';\nimport {\n  StyledAppHeader,\n  StyledAppHeaderInfo,\n  StyledAppHeaderSearchForm,\n  StyledAppHeaderSpacer,\n  StyledAppHeaderText,\n  StyledAppHeaderOperator\n} from './AppHeader.styles';\nimport AppShellContext from './AppShellContext';\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(function AppHeader(\n  {\n    appName,\n    contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n    fullImageSrc,\n    imageSrc,\n    href,\n    onClick,\n    portalName,\n    target,\n    appNameHidden,\n    operator,\n    searchInput,\n    searchLabel,\n    searchPage\n  }: AppHeaderProps,\n  ref: Ref<Element>\n) {\n  const isMediumOrAbove = useBreakpoint('md');\n  const [searchContainer, setSearchContainer] = useElement<HTMLElement>();\n  const { drawerOpen, setSearchContainerEl } = useContext(AppShellContext);\n\n  useEffect(() => {\n    if (searchPage && searchContainer) {\n      setSearchContainerEl(searchContainer);\n    } else {\n      setSearchContainerEl(null);\n    }\n  }, [searchPage, searchContainer, setSearchContainerEl]);\n\n  let appInfoAs: ElementType = 'div';\n  if (href) appInfoAs = 'a';\n  else if (onClick) appInfoAs = BareButton;\n\n  return (\n    <Flex\n      as={StyledAppHeader}\n      container={{ alignItems: 'center', pad: 1 }}\n      hideTitle={!isMediumOrAbove}\n      drawerOpen={drawerOpen}\n      ref={ref}\n    >\n      {contexts && contexts.length > 1 && onContextClick && (\n        <ContextSwitcher\n          contexts={contexts}\n          onContextClick={onContextClick}\n          label={contextSwitcherLabel}\n        />\n      )}\n\n      <StyledAppHeaderInfo centerLogo={!fullImageSrc}>\n        <Flex\n          container={{ inline: true, alignItems: 'center', gap: 1 }}\n          as={appInfoAs}\n          href={href}\n          onClick={onClick}\n          target={target}\n        >\n          <Image src={fullImageSrc || imageSrc} alt='' aria-hidden='true' />\n          {isMediumOrAbove && (\n            <>\n              <StyledAppHeaderText\n                as={appNameHidden ? VisuallyHiddenText : 'span'}\n                variant='primary'\n              >\n                {appName}\n              </StyledAppHeaderText>\n              {portalName && (\n                <StyledAppHeaderText\n                  as={appNameHidden ? VisuallyHiddenText : 'span'}\n                  variant='secondary'\n                >\n                  {portalName}\n                </StyledAppHeaderText>\n              )}\n            </>\n          )}\n        </Flex>\n      </StyledAppHeaderInfo>\n      <Flex item={{ grow: 1 }} container={{ justify: 'end' }}>\n        {searchInput ? (\n          <StyledAppHeaderSearchForm\n            ref={setSearchContainer}\n            role='search'\n            aria-label={searchLabel}\n            onSubmit={e => e.preventDefault()}\n            isMediumOrAbove={isMediumOrAbove}\n          >\n            {!searchPage && <SearchInput {...searchInput} />}\n          </StyledAppHeaderSearchForm>\n        ) : (\n          <StyledAppHeaderSpacer />\n        )}\n      </Flex>\n\n      <AppShellOperator\n        as={StyledAppHeaderOperator}\n        actions={operator.actions}\n        popover={{ placement: 'bottom-start' }}\n      >\n        {operator.avatar}\n      </AppShellOperator>\n    </Flex>\n  );\n});\n\nexport default AppHeader;\n"]}
+{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useContext, useEffect, useMemo } from 'react';\nimport type { FunctionComponent, Ref, ElementType } from 'react';\n\nimport Flex from '../Flex';\nimport Image from '../Image';\nimport SearchInput from '../SearchInput';\nimport { useBreakpoint, useElement, useI18n, useTheme } from '../../hooks';\nimport type { ForwardProps } from '../../types';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { ThemeOverride } from '../Configuration';\n\nimport type { AppHeaderProps } from './AppShell.types';\nimport AppShellOperator from './Operator';\nimport ContextSwitcher from './ContextSwitcher';\nimport {\n  StyledAppHeader,\n  StyledAppHeaderInfo,\n  StyledAppHeaderSearchForm,\n  StyledAppHeaderSpacer,\n  StyledAppHeaderText,\n  StyledAppHeaderOperator\n} from './AppHeader.styles';\nimport AppShellContext from './AppShellContext';\nimport { getHeaderTheme } from './style-utils';\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(function AppHeader(\n  {\n    appName,\n    contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n    fullImageSrc,\n    imageSrc,\n    href,\n    onClick,\n    portalName,\n    target,\n    appNameHidden,\n    operator,\n    searchInput,\n    searchLabel,\n    searchPage\n  }: AppHeaderProps,\n  ref: Ref<Element>\n) {\n  const t = useI18n();\n  const isMediumOrAbove = useBreakpoint('md');\n  const [searchContainer, setSearchContainer] = useElement<HTMLElement>();\n  const { drawerOpen, setSearchContainerEl } = useContext(AppShellContext);\n  const theme = useTheme();\n  const headerTheme = useMemo(() => getHeaderTheme(theme), [theme]);\n  useEffect(() => {\n    if (searchPage && searchContainer) {\n      setSearchContainerEl(searchContainer);\n    } else {\n      setSearchContainerEl(null);\n    }\n  }, [searchPage, searchContainer, setSearchContainerEl]);\n\n  let appInfoAs: ElementType = 'div';\n  if (href) appInfoAs = 'a';\n  return (\n    <ThemeOverride theme={headerTheme}>\n      <Flex\n        as={StyledAppHeader}\n        container={{ alignItems: 'center', pad: 1 }}\n        hideTitle={!isMediumOrAbove}\n        drawerOpen={drawerOpen}\n        ref={ref}\n      >\n        {contexts && contexts.length > 1 && onContextClick && (\n          <ContextSwitcher\n            contexts={contexts}\n            onContextClick={onContextClick}\n            label={contextSwitcherLabel}\n          />\n        )}\n\n        <StyledAppHeaderInfo centerLogo={!fullImageSrc}>\n          <Flex\n            container={{ inline: true, alignItems: 'center', gap: 1 }}\n            as={appInfoAs}\n            href={href}\n            onClick={href ? onClick : undefined}\n            target={target}\n          >\n            <Image src={fullImageSrc || imageSrc} alt={t('application_logo')} />\n            <StyledAppHeaderText\n              as={appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span'}\n              variant='primary'\n            >\n              {appName}\n            </StyledAppHeaderText>\n            {portalName && (\n              <StyledAppHeaderText\n                as={appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span'}\n                variant='secondary'\n              >\n                {portalName}\n              </StyledAppHeaderText>\n            )}\n          </Flex>\n        </StyledAppHeaderInfo>\n        <Flex item={{ grow: 1 }} container={{ justify: 'end' }}>\n          {searchInput ? (\n            <StyledAppHeaderSearchForm\n              ref={setSearchContainer}\n              role='search'\n              aria-label={searchLabel}\n              onSubmit={e => e.preventDefault()}\n              isMediumOrAbove={isMediumOrAbove}\n            >\n              {!searchPage && <SearchInput {...searchInput} />}\n            </StyledAppHeaderSearchForm>\n          ) : (\n            <StyledAppHeaderSpacer />\n          )}\n        </Flex>\n\n        <AppShellOperator\n          as={StyledAppHeaderOperator}\n          actions={operator.actions}\n          popover={{ placement: 'bottom-start' }}\n        >\n          {operator.avatar}\n        </AppShellOperator>\n      </Flex>\n    </ThemeOverride>\n  );\n});\n\nexport default AppHeader;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIzC,eAAO,MAAM,qBAAqB,yGAIhC,CAAC;AAIH,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;SAuBjE,CAAC;AAIH,eAAO,MAAM,yBAAyB;qBAAkC,OAAO;SAuC9E,CAAC;AAIF,eAAO,MAAM,qBAAqB,yGAEjC,CAAC;AAEF,eAAO,MAAM,mBAAmB;aAA2B,SAAS,CAAC,SAAS,CAAC;SA0B9E,CAAC;AAIF,eAAO,MAAM,uBAAuB,4GAQnC,CAAC;AAIF,eAAO,MAAM,eAAe;eAA8B,OAAO;gBAAc,OAAO;SAqDrF,CAAC"}
+{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIzC,eAAO,MAAM,qBAAqB,yGAIhC,CAAC;AAIH,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;SA2BjE,CAAC;AAIH,eAAO,MAAM,yBAAyB;qBAAkC,OAAO;SAgD9E,CAAC;AAIF,eAAO,MAAM,qBAAqB,yGAEjC,CAAC;AAEF,eAAO,MAAM,mBAAmB;aAA2B,SAAS,CAAC,SAAS,CAAC;SA2B7E,CAAC;AAIH,eAAO,MAAM,uBAAuB,4GAQnC,CAAC;AAIF,eAAO,MAAM,eAAe;eAA8B,OAAO;gBAAc,OAAO;SAsDrF,CAAC"}

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

@@ -1,4 +1,4 @@
-import { mix, rgba } from 'polished';
+import { mix, rgba, transparentize } from 'polished';
 import styled, { css } from 'styled-components';
 import { calculateFontSize, getHoverColors, readableColor } from '../../styles';
 import { defaultThemeProp } from '../../theme';
@@ -22,14 +22,18 @@ export const StyledAppHeaderInfo = styled.div(({ centerLogo, theme }) => {
       vertical-align: top;
     }
 
-    & > a,
-    & > button {
+    & > :is(a, button) {
       cursor: pointer;
       text-decoration: none;
       user-select: none;
       -webkit-user-select: none;
     }
 
+    & > :is(a, button):focus {
+      box-shadow: ${theme.base.shadow.focus};
+      outline: none;
+    }
+
     ${StyledImage} {
       height: 1.625rem;
 
@@ -41,9 +45,7 @@ export const StyledAppHeaderInfo = styled.div(({ centerLogo, theme }) => {
   `;
 });
 StyledAppHeaderInfo.defaultProps = defaultThemeProp;
-export const StyledAppHeaderSearchForm = styled.form(({ isMediumOrAbove, theme }) => {
-    const headerColor = theme.components['app-shell'].header['background-color'];
-    const contrastColor = tryCatch(() => readableColor(headerColor));
+export const StyledAppHeaderSearchForm = styled.form(({ isMediumOrAbove, theme: { base: { animation, palette }, components: { 'app-shell': { header } } } }) => {
     return css `
       max-width: 33vw;
       min-width: 10rem;
@@ -51,7 +53,11 @@ export const StyledAppHeaderSearchForm = styled.form(({ isMediumOrAbove, theme }
       justify-self: center;
       margin-inline-start: 0;
       margin-inline-end: auto;
-      transition: max-width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
+      transition: max-width ${animation.speed} ${animation.timing.ease};
+
+      ${StyledSearchInput} input::placeholder {
+        color: ${transparentize(0.4, palette['foreground-color'])};
+      }
 
       ${!isMediumOrAbove &&
         css `
@@ -62,12 +68,12 @@ export const StyledAppHeaderSearchForm = styled.form(({ isMediumOrAbove, theme }
         &:not([focused]) {
           ${StyledSearchInput} {
             ${StyledSearchButton} {
-              background: ${headerColor};
-              color: ${contrastColor};
+              background: ${header['background-color']};
+              color: ${palette['foreground-color']};
             }
 
             ${StyledSearchTextInput} {
-              background: ${headerColor};
+              background: ${header['background-color']};
             }
           }
         }
@@ -87,17 +93,17 @@ export const StyledAppHeaderText = styled(Text)(({ theme, variant }) => {
     const secondaryColor = tryCatch(() => rgba(contrastColor ?? theme.base.palette['foreground-color'], theme.base.transparency['transparent-2']));
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     return css `
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      color: ${variant === 'secondary' ? secondaryColor : contrastColor};
-      font-size: ${fontSize.s};
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    color: ${variant === 'secondary' ? secondaryColor : contrastColor};
+    font-size: ${fontSize.s};
 
-      ${variant !== 'secondary' &&
+    ${variant !== 'secondary' &&
         css `
-        font-weight: ${theme.base['font-weight']['semi-bold']};
-      `}
-    `;
+      font-weight: ${theme.base['font-weight']['semi-bold']};
+    `}
+  `;
 });
 StyledAppHeaderText.defaultProps = defaultThemeProp;
 export const StyledAppHeaderOperator = styled.button(({ theme }) => css `
@@ -124,6 +130,7 @@ export const StyledAppHeader = styled.header(({ hideTitle, drawerOpen, theme })
       max-width: 100%;
       height: ${headerHeight};
       background-color: ${headerColor};
+      color: ${contrastColor};
       border-bottom: solid 0.0625rem ${theme.base.palette['border-line']};
 
       ${StyledAppHeaderInfo} {

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 } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { calculateFontSize, getHoverColors, readableColor } 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 { StyledSearchButton, StyledSearchTextInput } 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    & > a,\n    & > button {\n      cursor: pointer;\n      text-decoration: none;\n      user-select: none;\n      -webkit-user-select: 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  ({ isMediumOrAbove, theme }) => {\n    const headerColor = theme.components['app-shell'].header['background-color'];\n    const contrastColor = tryCatch(() => readableColor(headerColor));\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 ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n      ${!isMediumOrAbove &&\n      css`\n        max-width: 75%;\n        min-width: 2rem;\n        margin-inline-start: auto;\n\n        &:not([focused]) {\n          ${StyledSearchInput} {\n            ${StyledSearchButton} {\n              background: ${headerColor};\n              color: ${contrastColor};\n            }\n\n            ${StyledSearchTextInput} {\n              background: ${headerColor};\n            }\n          }\n        }\n\n        &:focus-within {\n          min-width: 10rem;\n        }\n      `}\n    `;\n  }\n);\n\nStyledAppHeaderSearchForm.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSpacer = styled.div`\n  margin: auto;\n`;\n\nexport const StyledAppHeaderText = styled(Text)<{ variant: TextProps['variant'] }>(\n  ({ theme, variant }) => {\n    const contrastColor = tryCatch(() =>\n      readableColor(theme.components['app-shell'].header['background-color'])\n    );\n    const secondaryColor = tryCatch(() =>\n      rgba(\n        contrastColor ?? 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 : contrastColor};\n      font-size: ${fontSize.s};\n\n      ${variant !== 'secondary' &&\n      css`\n        font-weight: ${theme.base['font-weight']['semi-bold']};\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 headerColor = theme.components['app-shell'].header['background-color'];\n    const contrastColor = tryCatch(() => readableColor(headerColor));\n    const hoverColors = getHoverColors(mix(0.01, theme.base.palette.interactive, headerColor));\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-color: ${headerColor};\n      border-bottom: solid 0.0625rem ${theme.base.palette['border-line']};\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      > ${StyledAppHeaderOperator} {\n        justify-self: flex-end;\n\n        + ${StyledPopover} {\n          &,\n          ${StyledMenuListContainer} {\n            background-color: ${headerColor};\n          }\n\n          ${StyledMenuListContainer} li {\n            color: ${contrastColor};\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 { calculateFontSize, getHoverColors, readableColor } 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 { StyledSearchButton, StyledSearchTextInput } 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': { header }\n      }\n    }\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        &:not([focused]) {\n          ${StyledSearchInput} {\n            ${StyledSearchButton} {\n              background: ${header['background-color']};\n              color: ${palette['foreground-color']};\n            }\n\n            ${StyledSearchTextInput} {\n              background: ${header['background-color']};\n            }\n          }\n        }\n\n        &:focus-within {\n          min-width: 10rem;\n        }\n      `}\n    `;\n  }\n);\n\nStyledAppHeaderSearchForm.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSpacer = styled.div`\n  margin: auto;\n`;\n\nexport const StyledAppHeaderText = styled(Text)<{ variant: TextProps['variant'] }>(({\n  theme,\n  variant\n}) => {\n  const contrastColor = tryCatch(() =>\n    readableColor(theme.components['app-shell'].header['background-color'])\n  );\n  const secondaryColor = tryCatch(() =>\n    rgba(\n      contrastColor ?? 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 : contrastColor};\n    font-size: ${fontSize.s};\n\n    ${variant !== 'secondary' &&\n    css`\n      font-weight: ${theme.base['font-weight']['semi-bold']};\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 headerColor = theme.components['app-shell'].header['background-color'];\n    const contrastColor = tryCatch(() => readableColor(headerColor));\n    const hoverColors = getHoverColors(mix(0.01, theme.base.palette.interactive, headerColor));\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-color: ${headerColor};\n      color: ${contrastColor};\n      border-bottom: solid 0.0625rem ${theme.base.palette['border-line']};\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      > ${StyledAppHeaderOperator} {\n        justify-self: flex-end;\n\n        + ${StyledPopover} {\n          &,\n          ${StyledMenuListContainer} {\n            background-color: ${headerColor};\n          }\n\n          ${StyledMenuListContainer} li {\n            color: ${contrastColor};\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/AppShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,iBAAiB,EAAqC,EAAE,EAAE,MAAM,OAAO,CAAC;AAYtF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AA2ChD,OAAO,KAAK,EACV,aAAa,EAMb,UAAU,EACX,MAAM,kBAAkB,CAAC;AA4G1B,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CA0IhC,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA8X5D,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,iBAAiB,EAAqC,EAAE,EAAE,MAAM,OAAO,CAAC;AAYtF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AA2ChD,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,CA0Y5D,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/lib/components/AppShell/AppShell.js

@@ -73,13 +73,14 @@ const Cases = (props) => {
     const { cases } = props;
     const setupCases = (items) => {
         return items.map((item) => {
-            const { id, primary, secondary, visual = _jsx(Icon, { name: 'case-solid' }), active, onClick, onDismiss, ...restProps } = 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,
@@ -184,6 +185,7 @@ const AppShell = forwardRef(function AppShell(props, ref) {
     const [mobileNavOpen, setMobileNavOpen] = useState(false);
     const [mobileNavBackdrop, setMobileNavBackdrop] = useState(false);
     const [drawerOpen, setDrawerOpen] = useState(false);
+    const [previewActive, setPreviewActive] = useState(false);
     const focusedImperatively = useRef(false);
     const [headerEl, setHeaderEl] = useElement();
     const [mobileHeaderEl, setMobileHeaderEl] = useElement();
@@ -285,7 +287,7 @@ const AppShell = forwardRef(function AppShell(props, ref) {
         }, ref: isSmallOrAbove ? navRef : undefined, as: StyledAppNav, appHeader: showAppHeader, navOpen: mobileNavOpen, onFocus: onFocus, "data-app-region": true, "aria-label": t('app_shell_main_navigation_label'), children: [!showAppHeader && (_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: appNameHidden ? VisuallyHiddenText : 'span', children: portalName }))] }), navState === 'closed' && !appNameHidden && (_jsx(Tooltip, { target: appInfoEl, placement: 'right', as: StyledAppShellTooltip, showDelay: 'none', hideDelay: 'none', children: appName }))] })), searchInput && !showAppHeader && (_jsx(AppShellSearch, { searchLabel: searchLabel, collapsed: !mobileNavOpen && ['closed', 'closing'].includes(navState), searchInput: searchInput })), _jsxs(StyledScrollWrap, { onClick: isSmallOrAbove
+                        }, 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() }))] })), searchInput && !showAppHeader && (_jsx(AppShellSearch, { searchLabel: searchLabel, collapsed: !mobileNavOpen && ['closed', 'closing'].includes(navState), searchInput: searchInput })), _jsxs(StyledScrollWrap, { onClick: isSmallOrAbove
                     ? () => {
                         if (['closing', 'closed'].includes(navState)) {
                             openNav(0);
@@ -308,13 +310,23 @@ const AppShell = forwardRef(function AppShell(props, ref) {
             previewTriggerRef,
             searchContainerEl,
             setSearchContainerEl,
-            mobileNavOpen
-        }), [navState, drawerOpen, mobileNavOpen, headerEl, mobileHeaderEl, searchContainerEl]), children: [_jsx(SkipLinks, { items: skipLinks }), showAppHeader && (_jsx(AppHeader, { ...appInfo, contextSwitcher: contextSwitcher, searchInput: searchInput, searchLabel: searchLabel, operator: operator, searchPage: searchPage, ref: setHeaderEl })), isSmallOrAbove ? (appNav) : (_jsxs(_Fragment, { children: [_jsx(Flex, { as: StyledMobileNav, container: { alignItems: 'center' }, ref: setMobileHeaderEl, children: _jsx(Button, { variant: 'simple', onClick: () => setMobileNavBackdrop(true), "aria-label": t('app_shell_open_nav'), icon: true, children: _jsx(Icon, { name: 'bars' }) }) }), _jsx(Backdrop, { open: mobileNavBackdrop, transitionSpeed: 'none', onAfterTransitionIn: () => setMobileNavOpen(true), onBeforeTransitionOut: () => setMobileNavOpen(false), onClick: e => {
+            mobileNavOpen,
+            previewActive,
+            setPreviewActive
+        }), [
+            navState,
+            drawerOpen,
+            mobileNavOpen,
+            headerEl,
+            mobileHeaderEl,
+            searchContainerEl,
+            previewActive
+        ]), children: [_jsx(SkipLinks, { items: skipLinks }), showAppHeader && (_jsx(AppHeader, { ...appInfo, contextSwitcher: contextSwitcher, searchInput: searchInput, searchLabel: searchLabel, operator: operator, searchPage: searchPage, ref: setHeaderEl })), isSmallOrAbove ? (appNav) : (_jsxs(_Fragment, { children: [_jsx(Flex, { as: StyledMobileNav, container: { alignItems: 'center' }, ref: setMobileHeaderEl, children: _jsx(Button, { variant: 'simple', onClick: () => setMobileNavBackdrop(true), "aria-label": t('app_shell_open_nav'), icon: true, children: _jsx(Icon, { name: 'bars' }) }) }), _jsx(Backdrop, { open: mobileNavBackdrop, transitionSpeed: 'none', onAfterTransitionIn: () => setMobileNavOpen(true), onBeforeTransitionOut: () => setMobileNavOpen(false), onClick: e => {
                             if (e.currentTarget === e.target)
                                 setMobileNavOpen(false);
                         }, children: _jsx(Drawer, { open: mobileNavOpen, ref: mobileNavRef, onAfterClose: () => {
                                 setMobileNavBackdrop(false);
-                            }, position: 'fixed', placement: start, size: 'min(18.75rem, calc(100vw - 3.5rem))', nullWhenClosed: true, children: appNav }) })] })), showMainContent && (_jsxs(StyledAppMain, { appHeader: showAppHeader, mobileNav: !isSmallOrAbove, headerOffset: isSmallOrAbove ? headerEl?.offsetHeight : mobileHeaderEl?.offsetHeight, navOpen: ['open', 'opening'].includes(navState), "aria-busy": progress ? 'true' : 'false', "data-app-region": true, children: [_jsx(Progress, { visible: !!progress, placement: 'local', message: typeof progress === 'string' ? progress : t('loading') }), banners && _jsx(StyledBannerRegion, { children: banners }), main] }))] }));
+                            }, position: 'fixed', placement: start, size: 'min(18.75rem, calc(100vw - 3.5rem))', nullWhenClosed: true, children: appNav }) })] })), showMainContent && (_jsxs(StyledAppMain, { appHeader: showAppHeader, mobileNav: !isSmallOrAbove, previewActive: previewActive, headerOffset: isSmallOrAbove ? headerEl?.offsetHeight : mobileHeaderEl?.offsetHeight, navOpen: ['open', 'opening'].includes(navState), "aria-busy": progress ? 'true' : 'false', "data-app-region": true, children: [_jsx(Progress, { visible: !!progress, placement: 'local', message: typeof progress === 'string' ? progress : t('loading') }), banners && _jsx(StyledBannerRegion, { children: banners }), main] }))] }));
 });
 export default AppShell;
 //# sourceMappingURL=AppShell.js.map