@pega/cosmos-react-core 5.0.0-dev.4.9 → 5.0.0-dev.6.0

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

@@ -0,0 +1,9 @@
+import type { NoChildrenProp, WithAttributes } from '../../types';
+export type AIButtonProps = WithAttributes<'button', NoChildrenProp & {
+    /** The text content of the AIButton. */
+    label: string;
+}>;
+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>>;
+export default _default;
+//# sourceMappingURL=AIButton.d.ts.map

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

@@ -0,0 +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"}

package/lib/components/AIButton/AIButton.js

@@ -0,0 +1,25 @@
+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';
+registerIcon(polarisSolidIcon);
+export const StyledAIButton = styled(Button) ``;
+StyledAIButton.defaultProps = defaultThemeProp;
+export default forwardRef(function AIButton({ label, disabled = false, ...restProps }, ref) {
+    const theme = useTheme();
+    return (_jsx(Configuration, { theme: {
+            components: {
+                button: {
+                    color: theme.base.palette.ai,
+                    'secondary-color': theme.base.palette['primary-background']
+                }
+            }
+        }, 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 })] }) }) }));
+});
+//# sourceMappingURL=AIButton.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,3 @@
+export { default, StyledAIButton } from './AIButton';
+export type { AIButtonProps } from './AIButton';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AIButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACrD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/lib/components/AIButton/index.js

@@ -0,0 +1,2 @@
+export { default, StyledAIButton } from './AIButton';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AIButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default, StyledAIButton } from './AIButton';\nexport type { AIButtonProps } from './AIButton';\n"]}

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

@@ -0,0 +1,20 @@
+import type { Action, NoChildrenProp, WithAttributes } from '../../types';
+import type { ButtonProps } from '../Button';
+import type { MenuButtonProps } from '../MenuButton';
+export type ActionsProps = WithAttributes<'button', NoChildrenProp & {
+    items: Action[];
+    contextualLabel?: string;
+    /** @default 2 */
+    menuAt?: number;
+    menuButtonProps?: {
+        onClick?: MenuButtonProps['onClick'];
+        onKeyDown?: MenuButtonProps['onKeyDown'];
+    };
+    /** @default true */
+    iconOnly?: boolean;
+    /** @default false */
+    compact?: ButtonProps['compact'];
+}>;
+declare const _default: import("react").ForwardRefExoticComponent<Omit<ActionsProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export default _default;
+//# sourceMappingURL=Actions.d.ts.map

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

@@ -0,0 +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"}

package/lib/components/Actions/Actions.js

@@ -0,0 +1,27 @@
+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) {
+    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: {
+            items: items.map(({ text, onClick, ...restProps }) => ({
+                ...restProps,
+                primary: text,
+                onClick: onClick
+                    ? (id, e) => {
+                        onClick(id, e, menuButtonRef.current ?? undefined);
+                    }
+                    : 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));
+        }) }));
+});
+//# sourceMappingURL=Actions.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,3 @@
+export { default } from './Actions';
+export type { ActionsProps } from './Actions';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Actions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/lib/components/Actions/index.js

@@ -0,0 +1,2 @@
+export { default } from './Actions';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Actions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { default } from './Actions';\nexport type { ActionsProps } from './Actions';\n"]}

package/lib/components/AdditionalInfo/AdditionalInfo.d.ts

@@ -0,0 +1,12 @@
+import type { Ref } from 'react';
+import type { WithAttributes } from '../../types';
+import type { DialogHandleValue } from '../Dialog';
+export type AdditionalInfoProps = WithAttributes<'div', {
+    heading: string;
+    children: string | JSX.Element;
+    dialogHandle?: Ref<DialogHandleValue>;
+}>;
+export declare const StyledAdditionalInfo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const _default: import("react").ForwardRefExoticComponent<Omit<AdditionalInfoProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;
+//# sourceMappingURL=AdditionalInfo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AdditionalInfo.d.ts","sourceRoot":"","sources":["../../../src/components/AdditionalInfo/AdditionalInfo.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAIlD,OAAO,KAAK,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAI9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAOnD,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAC9C,KAAK,EACL;IACE,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,YAAY,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACvC,CACF,CAAC;AAEF,eAAO,MAAM,oBAAoB,yGAAe,CAAC;;AAEjD,wBA+CE"}

package/lib/components/AdditionalInfo/AdditionalInfo.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import styled from 'styled-components';
+import Icon, { registerIcon } from '../Icon';
+import HTML from '../HTML';
+import Button from '../Button';
+import { InfoDialog } from '../Dialog';
+import * as informationIcon from '../Icon/icons/information.icon';
+import { useConsolidatedRef, useI18n } from '../../hooks';
+import Flex from '../Flex';
+registerIcon(informationIcon);
+export const StyledAdditionalInfo = styled.div ``;
+export default forwardRef(function AdditionalInfo({ heading, children, dialogHandle, ...restProps }, ref) {
+    const t = useI18n();
+    const [target, setTarget] = useState(null);
+    const buttonRef = useRef(null);
+    const handleRef = useConsolidatedRef(dialogHandle);
+    useImperativeHandle(handleRef, () => {
+        return {
+            open: () => {
+                setTarget(buttonRef.current);
+            },
+            close: () => {
+                setTarget(null);
+            }
+        };
+    });
+    return (_jsxs(Flex, { container: true, as: StyledAdditionalInfo, ref: ref, ...restProps, children: [_jsx(Button, { variant: 'simple', label: t('additional_info'), compact: true, icon: true, ref: buttonRef, onClick: () => {
+                    handleRef.current?.open();
+                }, "aria-label": `${t('additional_info')} - ${heading}`, children: _jsx(Icon, { name: 'information' }) }), target && (_jsx(InfoDialog, { heading: heading, target: target, onDismiss: () => {
+                    handleRef.current?.close();
+                }, children: typeof children === 'string' ? _jsx(HTML, { content: children }) : children }))] }));
+});
+//# sourceMappingURL=AdditionalInfo.js.map

package/lib/components/AdditionalInfo/AdditionalInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdditionalInfo.js","sourceRoot":"","sources":["../../../src/components/AdditionalInfo/AdditionalInfo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE7C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAEvC,OAAO,KAAK,eAAe,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,YAAY,CAAC,eAAe,CAAC,CAAC;AAW9B,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEjD,eAAe,UAAU,CACvB,SAAS,cAAc,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG;IAC5E,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAA2B,IAAI,CAAC,CAAC;IACrE,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAEnD,mBAAmB,CAAC,SAAS,EAAE,GAAG,EAAE;QAClC,OAAO;YACL,IAAI,EAAE,GAAG,EAAE;gBACT,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;YAC/B,CAAC;YACD,KAAK,EAAE,GAAG,EAAE;gBACV,SAAS,CAAC,IAAI,CAAC,CAAC;YAClB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,QAAC,EAAE,EAAE,oBAAoB,EAAE,GAAG,EAAE,GAAG,KAAM,SAAS,aAC/D,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC3B,OAAO,QACP,IAAI,QACJ,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,GAAG,EAAE;oBACZ,SAAS,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC;gBAC5B,CAAC,gBACW,GAAG,CAAC,CAAC,iBAAiB,CAAC,MAAM,OAAO,EAAE,YAElD,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,GACpB,EACR,MAAM,IAAI,CACT,KAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,GAAG,EAAE;oBACd,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gBAC7B,CAAC,YAEA,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,OAAO,EAAE,QAAQ,GAAI,CAAC,CAAC,CAAC,QAAQ,GAC3D,CACd,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import { forwardRef, useImperativeHandle, useRef, useState } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport Icon, { registerIcon } from '../Icon';\nimport type { RefElement, WithAttributes } from '../../types';\nimport HTML from '../HTML';\nimport Button from '../Button';\nimport { InfoDialog } from '../Dialog';\nimport type { DialogHandleValue } from '../Dialog';\nimport * as informationIcon from '../Icon/icons/information.icon';\nimport { useConsolidatedRef, useI18n } from '../../hooks';\nimport Flex from '../Flex';\n\nregisterIcon(informationIcon);\n\nexport type AdditionalInfoProps = WithAttributes<\n  'div',\n  {\n    heading: string;\n    children: string | JSX.Element;\n    dialogHandle?: Ref<DialogHandleValue>;\n  }\n>;\n\nexport const StyledAdditionalInfo = styled.div``;\n\nexport default forwardRef<RefElement<AdditionalInfoProps>, PropsWithoutRef<AdditionalInfoProps>>(\n  function AdditionalInfo({ heading, children, dialogHandle, ...restProps }, ref) {\n    const t = useI18n();\n    const [target, setTarget] = useState<HTMLButtonElement | null>(null);\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const handleRef = useConsolidatedRef(dialogHandle);\n\n    useImperativeHandle(handleRef, () => {\n      return {\n        open: () => {\n          setTarget(buttonRef.current);\n        },\n        close: () => {\n          setTarget(null);\n        }\n      };\n    });\n\n    return (\n      <Flex container as={StyledAdditionalInfo} ref={ref} {...restProps}>\n        <Button\n          variant='simple'\n          label={t('additional_info')}\n          compact\n          icon\n          ref={buttonRef}\n          onClick={() => {\n            handleRef.current?.open();\n          }}\n          aria-label={`${t('additional_info')} - ${heading}`}\n        >\n          <Icon name='information' />\n        </Button>\n        {target && (\n          <InfoDialog\n            heading={heading}\n            target={target}\n            onDismiss={() => {\n              handleRef.current?.close();\n            }}\n          >\n            {typeof children === 'string' ? <HTML content={children} /> : children}\n          </InfoDialog>\n        )}\n      </Flex>\n    );\n  }\n);\n"]}

package/lib/components/AdditionalInfo/index.d.ts

@@ -0,0 +1,3 @@
+export { default, StyledAdditionalInfo } from './AdditionalInfo';
+export type { AdditionalInfoProps } from './AdditionalInfo';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/AdditionalInfo/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AdditionalInfo/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACjE,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/components/AdditionalInfo/index.js

@@ -0,0 +1,2 @@
+export { default, StyledAdditionalInfo } from './AdditionalInfo';
+//# sourceMappingURL=index.js.map

package/lib/components/AdditionalInfo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AdditionalInfo/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { default, StyledAdditionalInfo } from './AdditionalInfo';\nexport type { AdditionalInfoProps } from './AdditionalInfo';\n"]}

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

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

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

@@ -0,0 +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"}

package/lib/components/AppShell/AppHeader.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext, useEffect } 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 VisuallyHiddenText from '../VisuallyHiddenText';
+import AppShellOperator from './Operator';
+import ContextSwitcher from './ContextSwitcher';
+import { StyledAppHeader, StyledAppHeaderInfo, StyledAppHeaderSearchForm, StyledAppHeaderSpacer, StyledAppHeaderText, StyledAppHeaderOperator } from './AppHeader.styles';
+import AppShellContext from './AppShellContext';
+const AppHeader = forwardRef(function AppHeader({ appName, contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {}, fullImageSrc, imageSrc, href, onClick, portalName, target, appNameHidden, operator, searchInput, searchLabel, searchPage }, ref) {
+    const isMediumOrAbove = useBreakpoint('md');
+    const [searchContainer, setSearchContainer] = useElement();
+    const { drawerOpen, setSearchContainerEl } = useContext(AppShellContext);
+    useEffect(() => {
+        if (searchPage && searchContainer) {
+            setSearchContainerEl(searchContainer);
+        }
+        else {
+            setSearchContainerEl(null);
+        }
+    }, [searchPage, searchContainer, setSearchContainerEl]);
+    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 })] }));
+});
+export default AppHeader;
+//# sourceMappingURL=AppHeader.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,18 @@
+import type { TextProps } from '../Text';
+export declare const StyledContextSwitcher: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAppHeaderInfo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    centerLogo: boolean;
+}, never>;
+export declare const StyledAppHeaderSearchForm: import("styled-components").StyledComponent<"form", import("styled-components").DefaultTheme, {
+    isMediumOrAbove: boolean;
+}, never>;
+export declare const StyledAppHeaderSpacer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAppHeaderText: import("styled-components").StyledComponent<import("react").FunctionComponent<TextProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {
+    variant: TextProps['variant'];
+}, never>;
+export declare const StyledAppHeaderOperator: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAppHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {
+    hideTitle: boolean;
+    drawerOpen: boolean;
+}, never>;
+//# sourceMappingURL=AppHeader.styles.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,163 @@
+import { mix, readableColor, rgba } from 'polished';
+import styled, { css } from 'styled-components';
+import { calculateFontSize, getHoverColors } from '../../styles';
+import { defaultThemeProp } from '../../theme';
+import { tryCatch } from '../../utils';
+import { StyledImage } from '../Image';
+import { StyledMenuListContainer } from '../Menu/Menu.styles';
+import { StyledPopover } from '../Popover';
+import { StyledSearchInput } from '../SearchInput';
+import { StyledSearchButton, StyledSearchTextInput } from '../SearchInput/SearchInput.styles';
+import Text from '../Text';
+import { headerHeight, navWidth } from './AppShell.styles';
+export const StyledContextSwitcher = styled.div(({ theme }) => {
+    return css `
+    width: calc(${navWidth} - 2 * ${theme.base.spacing});
+  `;
+});
+StyledContextSwitcher.defaultProps = defaultThemeProp;
+export const StyledAppHeaderInfo = styled.div(({ centerLogo, theme }) => {
+    return css `
+    & > :first-child {
+      vertical-align: top;
+    }
+
+    & > a,
+    & > button {
+      cursor: pointer;
+      text-decoration: none;
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
+    ${StyledImage} {
+      height: 1.625rem;
+
+      ${centerLogo &&
+        css `
+        padding-inline-start: ${theme.base.spacing};
+      `}
+    }
+  `;
+});
+StyledAppHeaderInfo.defaultProps = defaultThemeProp;
+export const StyledAppHeaderSearchForm = styled.form(({ isMediumOrAbove, theme }) => {
+    const headerColor = theme.components['app-shell'].header['background-color'];
+    const contrastColor = tryCatch(() => readableColor(headerColor));
+    return css `
+      max-width: 33vw;
+      min-width: 10rem;
+      width: 100%;
+      justify-self: center;
+      margin-inline-start: 0;
+      margin-inline-end: auto;
+      transition: max-width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
+
+      ${!isMediumOrAbove &&
+        css `
+        max-width: 75%;
+        min-width: 2rem;
+        margin-inline-start: auto;
+
+        &:not([focused]) {
+          ${StyledSearchInput} {
+            ${StyledSearchButton} {
+              background: ${headerColor};
+              color: ${contrastColor};
+            }
+
+            ${StyledSearchTextInput} {
+              background: ${headerColor};
+            }
+          }
+        }
+
+        &:focus-within {
+          min-width: 10rem;
+        }
+      `}
+    `;
+});
+StyledAppHeaderSearchForm.defaultProps = defaultThemeProp;
+export const StyledAppHeaderSpacer = styled.div `
+  margin: auto;
+`;
+export const StyledAppHeaderText = styled(Text)(({ theme, variant }) => {
+    const contrastColor = tryCatch(() => readableColor(theme.components['app-shell'].header['background-color']));
+    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};
+
+      ${variant !== 'secondary' &&
+        css `
+        font-weight: ${theme.base['font-weight']['semi-bold']};
+      `}
+    `;
+});
+StyledAppHeaderText.defaultProps = defaultThemeProp;
+export const StyledAppHeaderOperator = styled.button(({ theme }) => css `
+    border-radius: 50%;
+
+    :focus {
+      box-shadow: ${theme.base.shadow.focus};
+    }
+  `);
+StyledAppHeaderOperator.defaultProps = defaultThemeProp;
+export const StyledAppHeader = styled.header(({ hideTitle, drawerOpen, theme }) => {
+    const headerColor = theme.components['app-shell'].header['background-color'];
+    const contrastColor = tryCatch(() => readableColor(headerColor));
+    const hoverColors = getHoverColors(mix(0.01, theme.base.palette.interactive, headerColor));
+    return css `
+      position: sticky;
+      z-index: calc(${theme.base['z-index'].backdrop} - 1);
+      ${drawerOpen &&
+        css `
+        z-index: calc(${theme.base['z-index'].backdrop} - 2);
+      `}
+      top: 0;
+      gap: ${theme.base.spacing};
+      max-width: 100%;
+      height: ${headerHeight};
+      background-color: ${headerColor};
+      border-bottom: solid 0.0625rem ${theme.base.palette['border-line']};
+
+      ${StyledAppHeaderInfo} {
+        justify-self: flex-start;
+        min-width: 33vw;
+
+        ${hideTitle &&
+        css `
+          min-width: fit-content;
+        `}
+      }
+
+      > ${StyledAppHeaderOperator} {
+        justify-self: flex-end;
+
+        + ${StyledPopover} {
+          &,
+          ${StyledMenuListContainer} {
+            background-color: ${headerColor};
+          }
+
+          ${StyledMenuListContainer} li {
+            color: ${contrastColor};
+            background-color: transparent;
+
+            &:hover,
+            &[data-current='true'] {
+              color: ${hoverColors.foreground};
+              background-color: ${hoverColors.background};
+            }
+          }
+        }
+      }
+    `;
+});
+StyledAppHeader.defaultProps = defaultThemeProp;
+//# sourceMappingURL=AppHeader.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAC9F,OAAO,IAAI,MAAM,SAAS,CAAC;AAG3B,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE3D,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,OAAO,GAAG,CAAA;kBACM,QAAQ,UAAU,KAAK,CAAC,IAAI,CAAC,OAAO;GACnD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAA0B,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/F,OAAO,GAAG,CAAA;;;;;;;;;;;;;MAaN,WAAW;;;QAGT,UAAU;QACZ,GAAG,CAAA;gCACuB,KAAK,CAAC,IAAI,CAAC,OAAO;OAC3C;;GAEJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,IAAI,CAClD,CAAC,EAAE,eAAe,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7B,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;IAC7E,MAAM,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjE,OAAO,GAAG,CAAA;;;;;;;8BAOgB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;QAEpF,CAAC,eAAe;QAClB,GAAG,CAAA;;;;;;YAMG,iBAAiB;cACf,kBAAkB;4BACJ,WAAW;uBAChB,aAAa;;;cAGtB,qBAAqB;4BACP,WAAW;;;;;;;;OAQhC;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE9C,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,CAC7C,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IACrB,MAAM,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE,CAClC,aAAa,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CACxE,CAAC;IACF,MAAM,cAAc,GAAG,QAAQ,CAAC,GAAG,EAAE,CACnC,IAAI,CACF,aAAa,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,EACvD,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CACzC,CACF,CAAC;IACF,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;;;;eAIC,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa;mBACpD,QAAQ,CAAC,CAAC;;QAErB,OAAO,KAAK,WAAW;QACzB,GAAG,CAAA;uBACc,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;OACtD;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,CAClD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;oBAIA,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAC1C,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,EAAE;IACnC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;IAC7E,MAAM,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC;IACjE,MAAM,WAAW,GAAG,cAAc,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC;IAE3F,OAAO,GAAG,CAAA;;sBAEQ,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ;QAC5C,UAAU;QACZ,GAAG,CAAA;wBACe,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ;OAC/C;;aAEM,KAAK,CAAC,IAAI,CAAC,OAAO;;gBAEf,YAAY;0BACF,WAAW;uCACE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;QAEhE,mBAAmB;;;;UAIjB,SAAS;QACX,GAAG,CAAA;;SAEF;;;UAGC,uBAAuB;;;YAGrB,aAAa;;YAEb,uBAAuB;gCACH,WAAW;;;YAG/B,uBAAuB;qBACd,aAAa;;;;;uBAKX,WAAW,CAAC,UAAU;kCACX,WAAW,CAAC,UAAU;;;;;KAKnD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import { mix, readableColor, rgba } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { calculateFontSize, getHoverColors } 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"]}

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

@@ -0,0 +1,7 @@
+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>;
+export default AppShell;
+//# sourceMappingURL=AppShell.d.ts.map

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

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