@pega/cosmos-react-core 4.0.0-dev.2.0 → 4.0.0-dev.21.0

package/README.md

@@ -30,8 +30,8 @@ With that, please take a moment to setup [Visual Studio Code](https://code.visua
 - [ESLint](vscode:extension/dbaeumer.vscode-eslint)
 - [Prettier](vscode:extension/esbenp.prettier-vscode)
 - [stylelint](vscode:extension/stylelint.vscode-stylelint)
-- [cSpell](vscode:extension/streetsidesoftware.code-spell-checker)
-- [styled-components](vscode:extension/jpoissonnier.vscode-styled-components)
+- [cspell](vscode:extension/streetsidesoftware.code-spell-checker)
+- [styled-components](vscode:extension/styled-components.vscode-styled-components)
 
 Cosmos will [check the format of your code on commit](https://prettier.io/docs/en/precommit.html#option-1-lint-stagedhttpsgithubcomokonetlint-staged)
 and fail builds on linting errors so best to have your

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

@@ -0,0 +1,9 @@
+import type { Attributes, NoChildrenProp, OmitStrict } from '../../types';
+export interface AIButtonProps extends NoChildrenProp, OmitStrict<Attributes<'button'>, 'children'> {
+    /** 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<Pick<AIButtonProps, "hidden" | "color" | "style" | "translate" | "disabled" | "prefix" | "form" | "label" | "slot" | "title" | "children" | "key" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "type" | "value" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & 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":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,UAAU,EAAc,MAAM,aAAa,CAAC;AAUtF,MAAM,WAAW,aACf,SAAQ,cAAc,EACpB,UAAU,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC;IAC9C,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,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,EAAmB,MAAM,OAAO,CAAC;AACpD,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;AAS/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, 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 { Attributes, NoChildrenProp, OmitStrict, RefElement } 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 interface AIButtonProps\n  extends NoChildrenProp,\n    OmitStrict<Attributes<'button'>, 'children'> {\n  /** The text content of the AIButton. */\n  label: string;\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

@@ -3,6 +3,7 @@ import { Action, ForwardProps, NoChildrenProp } from '../../types';
 import { MenuButtonProps } from '../MenuButton';
 export interface ActionsProps extends NoChildrenProp {
     items: Action[];
+    contextualLabel?: string;
     /** @default 2 */
     menuAt?: number;
     menuButtonProps?: {

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":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAc,MAAM,OAAO,CAAC;AAGxF,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGnE,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,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,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CA+C3D,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAc,MAAM,OAAO,CAAC;AAGxF,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGnE,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD,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,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CA4D3D,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Actions/Actions.js

@@ -1,21 +1,27 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { useI18n } from '../../hooks';
+import { useConsolidatedRef, useI18n } from '../../hooks';
 import Button from '../Button';
 import Icon from '../Icon';
 import MenuButton from '../MenuButton';
-const Actions = forwardRef(({ items, menuAt = 2, iconOnly = true, menuButtonProps }, ref) => {
+const Actions = forwardRef(({ items, menuAt = 2, iconOnly = true, menuButtonProps, contextualLabel }, ref) => {
     const t = useI18n();
+    const menuButtonRef = useConsolidatedRef(ref);
     if (!items || items.length === 0) {
         return null;
     }
-    return items.length >= menuAt ? (_jsx(MenuButton, { ref: ref, text: t('actions'), iconOnly: true, icon: 'more', variant: 'simple', onClick: menuButtonProps?.onClick, onKeyDown: menuButtonProps?.onKeyDown, menu: {
-            items: items.map(({ text, ...restProps }) => ({
+    return items.length >= menuAt ? (_jsx(MenuButton, { ref: menuButtonRef, text: t('actions'), "aria-label": contextualLabel && t('actions_for', [contextualLabel]), iconOnly: true, icon: 'more', variant: 'simple', onClick: menuButtonProps?.onClick, onKeyDown: menuButtonProps?.onKeyDown, menu: {
+            items: items.map(({ text, onClick, ...restProps }) => ({
+                ...restProps,
                 primary: text,
-                ...restProps
+                onClick: onClick
+                    ? (id, e) => {
+                        onClick(id, e, menuButtonRef.current ?? undefined);
+                    }
+                    : undefined
             }))
         } })) : (_jsx(_Fragment, { children: items.map(({ id, icon, text, onClick, ...restProps }) => {
-            return (_jsx(Button, { ref: ref, variant: icon && iconOnly ? 'simple' : undefined, onClick: (event) => onClick?.(id, event), label: icon ? text : undefined, icon: !!icon && iconOnly, ...restProps, children: icon && iconOnly ? _jsx(Icon, { name: icon }) : text }, id));
+            return (_jsx(Button, { variant: icon && iconOnly ? 'simple' : undefined, onClick: (event) => onClick?.(id, event), label: icon ? text : undefined, icon: !!icon && iconOnly, "aria-label": contextualLabel ? `${text} - ${contextualLabel}` : text, ...restProps, children: icon && iconOnly ? _jsx(Icon, { name: icon }) : text }, id));
         }) }));
 });
 export default Actions;

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,EAAuD,MAAM,OAAO,CAAC;AAExF,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,UAA+B,MAAM,eAAe,CAAC;AAe5D,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,EAAE,eAAe,EAAiC,EACtF,GAAwB,EACxB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,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,GAAG,EACR,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,EAClB,QAAQ,QACR,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,QAAQ,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,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC;gBAC5C,OAAO,EAAE,IAAI;gBACb,GAAG,SAAS;aACb,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,GAAG,EAAE,GAAG,EACR,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,KACpB,SAAS,YAEZ,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC,CAAC,CAAC,IAAI,IAR1C,EAAE,CASA,CACV,CAAC;QACJ,CAAC,CAAC,GACD,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, MouseEvent } from 'react';\n\nimport { useI18n } from '../../hooks';\nimport { Action, ForwardProps, NoChildrenProp } from '../../types';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport MenuButton, { MenuButtonProps } from '../MenuButton';\n\nexport interface ActionsProps extends NoChildrenProp {\n  items: Action[];\n  /** @default 2 */\n  menuAt?: number;\n  menuButtonProps?: {\n    onClick?: MenuButtonProps['onClick'];\n    onKeyDown?: MenuButtonProps['onKeyDown'];\n  };\n  /** @default true */\n  iconOnly?: boolean;\n  ref?: Ref<HTMLButtonElement>;\n}\n\nconst Actions: FunctionComponent<ActionsProps & ForwardProps> = forwardRef(\n  (\n    { items, menuAt = 2, iconOnly = true, menuButtonProps }: PropsWithoutRef<ActionsProps>,\n    ref: ActionsProps['ref']\n  ) => {\n    const t = useI18n();\n\n    if (!items || items.length === 0) {\n      return null;\n    }\n\n    return items.length >= menuAt ? (\n      <MenuButton\n        ref={ref}\n        text={t('actions')}\n        iconOnly\n        icon='more'\n        variant='simple'\n        onClick={menuButtonProps?.onClick}\n        onKeyDown={menuButtonProps?.onKeyDown}\n        menu={{\n          items: items.map(({ text, ...restProps }) => ({\n            primary: text,\n            ...restProps\n          }))\n        }}\n      />\n    ) : (\n      <>\n        {items.map(({ id, icon, text, onClick, ...restProps }) => {\n          return (\n            <Button\n              key={id}\n              ref={ref}\n              variant={icon && iconOnly ? 'simple' : undefined}\n              onClick={(event: MouseEvent<HTMLButtonElement>) => onClick?.(id, event)}\n              label={icon ? text : undefined}\n              icon={!!icon && iconOnly}\n              {...restProps}\n            >\n              {icon && iconOnly ? <Icon name={icon} /> : text}\n            </Button>\n          );\n        })}\n      </>\n    );\n  }\n);\n\nexport default Actions;\n"]}
+{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuD,MAAM,OAAO,CAAC;AAExF,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE1D,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,UAA+B,MAAM,eAAe,CAAC;AAgB5D,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EACE,KAAK,EACL,MAAM,GAAG,CAAC,EACV,QAAQ,GAAG,IAAI,EACf,eAAe,EACf,eAAe,EACe,EAChC,GAAwB,EACxB,EAAE;IACF,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,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,gBACZ,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,IAR1C,EAAE,CASA,CACV,CAAC;QACJ,CAAC,CAAC,GACD,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, MouseEvent } from 'react';\n\nimport { useConsolidatedRef, useI18n } from '../../hooks';\nimport { Action, ForwardProps, NoChildrenProp } from '../../types';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport MenuButton, { MenuButtonProps } from '../MenuButton';\n\nexport interface ActionsProps extends 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  ref?: Ref<HTMLButtonElement>;\n}\n\nconst Actions: FunctionComponent<ActionsProps & ForwardProps> = forwardRef(\n  (\n    {\n      items,\n      menuAt = 2,\n      iconOnly = true,\n      menuButtonProps,\n      contextualLabel\n    }: PropsWithoutRef<ActionsProps>,\n    ref: ActionsProps['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        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              aria-label={contextualLabel ? `${text} - ${contextualLabel}` : text}\n              {...restProps}\n            >\n              {icon && iconOnly ? <Icon name={icon} /> : text}\n            </Button>\n          );\n        })}\n      </>\n    );\n  }\n);\n\nexport default Actions;\n"]}

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

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

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

@@ -1 +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,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}
+{"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.map

@@ -1 +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 { ActionsProps } from './Actions';\n"]}
+{"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

@@ -1,8 +1,10 @@
 import { FunctionComponent, Ref } from 'react';
 import { BaseProps, ForwardProps } from '../../types';
+import { DialogHandleValue } from '../Dialog';
 export interface AdditionalInfoProps extends BaseProps {
     heading: string;
     children: string | JSX.Element;
+    dialogHandle?: Ref<DialogHandleValue>;
     ref?: Ref<HTMLDivElement>;
 }
 export declare const StyledAdditionalInfo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -1 +1 @@
-{"version":3,"file":"AdditionalInfo.d.ts","sourceRoot":"","sources":["../../../src/components/AdditionalInfo/AdditionalInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAK5E,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAUtD,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,oBAAoB,yGAMhC,CAAC;AAIF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAmBzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"AdditionalInfo.d.ts","sourceRoot":"","sources":["../../../src/components/AdditionalInfo/AdditionalInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGtD,OAAO,EAAE,iBAAiB,EAAc,MAAM,WAAW,CAAC;AAM1D,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,YAAY,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACtC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,oBAAoB,yGAAe,CAAC;AAEjD,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAkDzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/AdditionalInfo/AdditionalInfo.js

@@ -1,25 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import styled from 'styled-components';
 import Icon, { registerIcon } from '../Icon';
-import { defaultThemeProp } from '../../theme';
 import HTML from '../HTML';
 import Button from '../Button';
-import Dialog, { useDialog } from '../Dialog';
+import { InfoDialog } from '../Dialog';
 import * as informationIcon from '../Icon/icons/information.icon';
-import { useI18n } from '../../hooks';
-import { StyledDialog } from '../Dialog/Dialog';
+import { useConsolidatedRef, useI18n } from '../../hooks';
 registerIcon(informationIcon);
-export const StyledAdditionalInfo = styled.div(({ theme }) => css `
-    & > ${StyledDialog} {
-      max-width: ${theme.base['content-width'].md};
-    }
-  `);
-StyledAdditionalInfo.defaultProps = defaultThemeProp;
-const AdditionalInfo = forwardRef(({ heading, children, ...restProps }, ref) => {
-    const { target, events } = useDialog();
+export const StyledAdditionalInfo = styled.div ``;
+const AdditionalInfo = forwardRef(({ heading, children, dialogHandle, ...restProps }, ref) => {
     const t = useI18n();
-    return (_jsxs(StyledAdditionalInfo, { ref: ref, ...restProps, children: [_jsx(Button, { variant: 'simple', label: t('additional_info'), compact: true, icon: true, ...events, children: _jsx(Icon, { name: 'information' }) }), _jsx(Dialog, { heading: heading, target: target, children: typeof children === 'string' ? _jsx(HTML, { content: children }) : children })] }));
+    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(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 }))] }));
 });
 export default AdditionalInfo;
 //# sourceMappingURL=AdditionalInfo.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AdditionalInfo.js","sourceRoot":"","sources":["../../../src/components/AdditionalInfo/AdditionalInfo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,KAAK,eAAe,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,YAAY,CAAC,eAAe,CAAC,CAAC;AAQ9B,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAC5C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;UACV,YAAY;mBACH,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;GAE9C,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAwC,EACzE,GAA+B,EAC/B,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,CAAC;IACvC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,oBAAoB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,aAC3C,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAAE,OAAO,QAAC,IAAI,WAAK,MAAM,YAC3E,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,GACpB,EACT,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,YACrC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,OAAO,EAAE,QAAQ,GAAI,CAAC,CAAC,CAAC,QAAQ,GAC/D,IACY,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Icon, { registerIcon } from '../Icon';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport HTML from '../HTML';\nimport Button from '../Button';\nimport Dialog, { useDialog } from '../Dialog';\nimport * as informationIcon from '../Icon/icons/information.icon';\nimport { useI18n } from '../../hooks';\nimport { StyledDialog } from '../Dialog/Dialog';\n\nregisterIcon(informationIcon);\n\nexport interface AdditionalInfoProps extends BaseProps {\n  heading: string;\n  children: string | JSX.Element;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledAdditionalInfo = styled.div(\n  ({ theme }) => css`\n    & > ${StyledDialog} {\n      max-width: ${theme.base['content-width'].md};\n    }\n  `\n);\n\nStyledAdditionalInfo.defaultProps = defaultThemeProp;\n\nconst AdditionalInfo: FunctionComponent<AdditionalInfoProps & ForwardProps> = forwardRef(\n  (\n    { heading, children, ...restProps }: PropsWithoutRef<AdditionalInfoProps>,\n    ref: AdditionalInfoProps['ref']\n  ) => {\n    const { target, events } = useDialog();\n    const t = useI18n();\n\n    return (\n      <StyledAdditionalInfo ref={ref} {...restProps}>\n        <Button variant='simple' label={t('additional_info')} compact icon {...events}>\n          <Icon name='information' />\n        </Button>\n        <Dialog heading={heading} target={target}>\n          {typeof children === 'string' ? <HTML content={children} /> : children}\n        </Dialog>\n      </StyledAdditionalInfo>\n    );\n  }\n);\n\nexport default AdditionalInfo;\n"]}
+{"version":3,"file":"AdditionalInfo.js","sourceRoot":"","sources":["../../../src/components/AdditionalInfo/AdditionalInfo.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAIV,mBAAmB,EACnB,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,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,EAAqB,UAAU,EAAE,MAAM,WAAW,CAAC;AAC1D,OAAO,KAAK,eAAe,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE1D,YAAY,CAAC,eAAe,CAAC,CAAC;AAS9B,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEjD,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,SAAS,EAAwC,EACvF,GAA+B,EAC/B,EAAE;IACF,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,oBAAoB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,aAC3C,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,IACoB,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useImperativeHandle,\n  useRef,\n  useState\n} from 'react';\nimport styled from 'styled-components';\n\nimport Icon, { registerIcon } from '../Icon';\nimport { BaseProps, ForwardProps } from '../../types';\nimport HTML from '../HTML';\nimport Button from '../Button';\nimport { DialogHandleValue, InfoDialog } from '../Dialog';\nimport * as informationIcon from '../Icon/icons/information.icon';\nimport { useConsolidatedRef, useI18n } from '../../hooks';\n\nregisterIcon(informationIcon);\n\nexport interface AdditionalInfoProps extends BaseProps {\n  heading: string;\n  children: string | JSX.Element;\n  dialogHandle?: Ref<DialogHandleValue>;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledAdditionalInfo = styled.div``;\n\nconst AdditionalInfo: FunctionComponent<AdditionalInfoProps & ForwardProps> = forwardRef(\n  (\n    { heading, children, dialogHandle, ...restProps }: PropsWithoutRef<AdditionalInfoProps>,\n    ref: AdditionalInfoProps['ref']\n  ) => {\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      <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      </StyledAdditionalInfo>\n    );\n  }\n);\n\nexport default AdditionalInfo;\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AdditionalInfo/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}
+{"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.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AdditionalInfo/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,oBAAoB,EAAuB,MAAM,kBAAkB,CAAC","sourcesContent":["export { default, StyledAdditionalInfo, AdditionalInfoProps } from './AdditionalInfo';\n"]}
+{"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.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAA2C,MAAM,OAAO,CAAC;AAM/F,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAI3C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAYlD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAgG/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAA2C,MAAM,OAAO,CAAC;AAM/F,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAI3C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAalD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CA0G/D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/AppShell/AppHeader.js

@@ -7,12 +7,13 @@ 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(({ appName, fullImageSrc, imageSrc, href, onClick, portalName, target, appNameHidden, operator, searchInput, searchLabel, searchPage }, ref) => {
+const AppHeader = forwardRef(({ 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 { setSearchContainerEl } = useContext(AppShellContext);
+    const { drawerOpen, setSearchContainerEl } = useContext(AppShellContext);
     useEffect(() => {
         if (searchPage && searchContainer) {
             setSearchContainerEl(searchContainer);
@@ -26,7 +27,7 @@ const AppHeader = forwardRef(({ appName, fullImageSrc, imageSrc, href, onClick,
         appInfoAs = 'a';
     else if (onClick)
         appInfoAs = BareButton;
-    return (_jsxs(Flex, { as: StyledAppHeader, container: { alignItems: 'center', pad: 1 }, hideTitle: !isMediumOrAbove, ref: ref, children: [_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 (_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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, Ref, ElementType, useContext, useEffect } from 'react';\n\nimport Flex from '../Flex';\nimport Image from '../Image';\nimport SearchInput from '../SearchInput';\nimport { useBreakpoint, useElement } from '../../hooks';\nimport { ForwardProps } from '../../types';\nimport BareButton from '../Button/BareButton';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport { AppHeaderProps } from './AppShell.types';\nimport AppShellOperator from './Operator';\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(\n  (\n    {\n      appName,\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 { 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        ref={ref}\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);\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, FunctionComponent, Ref, ElementType, useContext, useEffect } from 'react';\n\nimport Flex from '../Flex';\nimport Image from '../Image';\nimport SearchInput from '../SearchInput';\nimport { useBreakpoint, useElement } from '../../hooks';\nimport { ForwardProps } from '../../types';\nimport BareButton from '../Button/BareButton';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport { 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(\n  (\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);\n\nexport default AppHeader;\n"]}

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

@@ -1,4 +1,5 @@
 import { 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>;
@@ -12,5 +13,6 @@ export declare const StyledAppHeaderText: import("styled-components").StyledComp
 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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"AAaA,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAI1C,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;SAuBjE,CAAC;AAIH,eAAO,MAAM,yBAAyB;qBAAkC,OAAO;SAwC9E,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;SA+C/D,CAAC"}
+{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"AAWA,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAI1C,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

@@ -1,4 +1,3 @@
-/* AppHeader styles */
 import { mix, readableColor, rgba } from 'polished';
 import styled, { css } from 'styled-components';
 import { calculateFontSize, getHoverColors } from '../../styles';
@@ -10,7 +9,13 @@ import { StyledPopover } from '../Popover';
 import { StyledSearchInput } from '../SearchInput';
 import { StyledSearchButton, StyledSearchTextInput } from '../SearchInput/SearchInput.styles';
 import Text from '../Text';
-import { headerHeight } from './AppShell.styles';
+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 {
@@ -68,7 +73,6 @@ export const StyledAppHeaderSearchForm = styled.form(({ isMediumOrAbove, theme }
         }
 
         &:focus-within {
-          /* max-width: 100%; */
           min-width: 10rem;
         }
       `}
@@ -104,52 +108,56 @@ export const StyledAppHeaderOperator = styled.button(({ theme }) => css `
     }
   `);
 StyledAppHeaderOperator.defaultProps = defaultThemeProp;
-export const StyledAppHeader = styled.header(({ hideTitle, theme }) => {
+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: ${theme.base['z-index'].drawer};
-    top: 0;
-    gap: ${theme.base.spacing};
-    max-width: 100%;
-    height: ${headerHeight};
-    background-color: ${headerColor};
-    border-bottom: solid 0.0625rem ${theme.base.palette['border-line']};
+      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']};
 
-    > :first-child {
-      justify-self: flex-start;
-      min-width: 33vw;
+      ${StyledAppHeaderInfo} {
+        justify-self: flex-start;
+        min-width: 33vw;
 
-      ${hideTitle &&
+        ${hideTitle &&
         css `
-        min-width: fit-content;
-      `}
-    }
+          min-width: fit-content;
+        `}
+      }
 
-    > ${StyledAppHeaderOperator} {
-      justify-self: flex-end;
+      > ${StyledAppHeaderOperator} {
+        justify-self: flex-end;
 
-      + ${StyledPopover} {
-        &,
-        ${StyledMenuListContainer} {
-          background-color: ${headerColor};
-        }
+        + ${StyledPopover} {
+          &,
+          ${StyledMenuListContainer} {
+            background-color: ${headerColor};
+          }
 
-        ${StyledMenuListContainer} li {
-          color: ${contrastColor};
-          background-color: transparent;
+          ${StyledMenuListContainer} li {
+            color: ${contrastColor};
+            background-color: transparent;
 
-          &:hover,
-          &[data-current='true'] {
-            color: ${hoverColors.foreground};
-            background-color: ${hoverColors.background};
+            &: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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"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","sourcesContent":["/* AppHeader styles */\n\nimport { 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, { TextProps } from '../Text';\n\nimport { headerHeight } from './AppShell.styles';\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          /* max-width: 100%; */\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 }>(({ hideTitle, 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: ${theme.base['z-index'].drawer};\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    > :first-child {\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\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, 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, { 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.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAWjB,EAAE,EAEH,MAAM,OAAO,CAAC;AAaf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAuChD,OAAO,EACL,aAAa,EAMb,UAAU,EACX,MAAM,kBAAkB,CAAC;AAsG1B,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CA2GhC,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAkU7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAWjB,EAAE,EAEH,MAAM,OAAO,CAAC;AAaf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAyChD,OAAO,EACL,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,CAwX7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}