@stenajs-webui/panels 17.4.1 → 17.7.0

package/dist/index.es.js

@@ -1,595 +1,1106 @@
-import * as React from 'react';
-import { useRef, useMemo, forwardRef, useState } from 'react';
-import { ActionMenu, ActionMenuContext, PrimaryButton, SecondaryButton, FlatButton, Icon, stenaSearch, Banner, Spinner, ButtonContent } from '@stenajs-webui/elements';
-import { useBoolean, Column, Box, Row, Indent, Heading, Clickable, Text, Space, SeparatorLine, exhaustSwitchCaseElseThrow } from '@stenajs-webui/core';
-import { Popover } from '@stenajs-webui/tooltip';
-import { faAngleDown, faChevronDown } from '@fortawesome/free-solid-svg-icons';
-import { faAngleDown as faAngleDown$1 } from '@fortawesome/free-solid-svg-icons/faAngleDown';
-import { Checkbox, TextInput } from '@stenajs-webui/forms';
-import cx from 'classnames';
-import { faBell } from '@fortawesome/free-solid-svg-icons/faBell';
-import { faUser } from '@fortawesome/free-solid-svg-icons/faUser';
-import { cssColor } from '@stenajs-webui/theme';
-import { formatDistance } from 'date-fns';
-import { faChevronUp } from '@fortawesome/free-solid-svg-icons/faChevronUp';
-import { CSSTransition } from 'react-transition-group';
-import { faInbox } from '@fortawesome/free-solid-svg-icons/faInbox';
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-var ActionMenuButton = function (_a) {
-    var renderItems = _a.renderItems, _b = _a.placement, placement = _b === void 0 ? "bottom" : _b, Button = _a.buttonComponent, _c = _a.rightIcon, rightIcon = _c === void 0 ? faAngleDown : _c, _d = _a.portalTarget, portalTarget = _d === void 0 ? "parent" : _d, zIndex = _a.zIndex, menuWidth = _a.menuWidth, menuTop = _a.menuTop, onClick = _a.onClick, _e = _a.disableArrow, disableArrow = _e === void 0 ? false : _e, buttonProps = __rest(_a, ["renderItems", "placement", "buttonComponent", "rightIcon", "portalTarget", "zIndex", "menuWidth", "menuTop", "onClick", "disableArrow"]);
-    var _f = useBoolean(false), isOpen = _f[0], open = _f[1], close = _f[2], toggle = _f[3];
-    var buttonRef = useRef(null);
-    var focusManager = {
-        name: "focusManager",
-        defaultValue: true,
-        fn: function (_a) {
-            var popper = _a.popper;
-            var restoreFocus = false;
-            var closeOnEscape = function (event) {
-                if (event.key === "Escape") {
-                    restoreFocus = true;
-                    close();
-                }
-                if (event.key === "Enter" || event.key === " ") {
-                    restoreFocus = true;
-                }
-            };
-            return {
-                onCreate: function () {
-                    popper.addEventListener("keydown", closeOnEscape);
-                },
-                onDestroy: function () {
-                    popper.removeEventListener("keydown", closeOnEscape);
-                },
-                onMount: function () {
-                    var _a;
-                    restoreFocus = false;
-                    (_a = popper
-                        .querySelector("button:not([disabled]), a[href]")) === null || _a === void 0 ? void 0 : _a.focus();
-                },
-                onHide: function () {
-                    if (buttonRef.current && restoreFocus) {
-                        buttonRef.current.focus();
-                    }
-                },
-            };
-        },
-    };
-    var contextValue = useMemo(function () { return ({ open: open, close: close }); }, [open, close]);
-    var handleClick = function (event) {
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
-        toggle();
-    };
-    return (React.createElement(Popover, { disablePadding: true, visible: isOpen, onClickOutside: close, placement: placement, content: isOpen && (React.createElement(ActionMenu, { variant: "outlined", width: menuWidth, top: menuTop, trapFocus: true },
-            React.createElement(ActionMenuContext.Provider, { value: contextValue }, renderItems(close)))), arrow: false, appendTo: portalTarget, zIndex: zIndex, plugins: [focusManager], lazy: true },
-        React.createElement(Button, __assign({ rightIcon: disableArrow ? undefined : rightIcon }, buttonProps, { ref: buttonRef, onClick: handleClick }))));
-};
-
-var ActionMenuPrimaryButton = function (props) {
-    return React.createElement(ActionMenuButton, __assign({ buttonComponent: PrimaryButton }, props));
-};
-
-var ActionMenuSecondaryButton = function (props) {
-    return React.createElement(ActionMenuButton, __assign({ buttonComponent: SecondaryButton }, props));
-};
-
-var ActionMenuFlatButton = function (props) {
-    return React.createElement(ActionMenuButton, __assign({ buttonComponent: FlatButton }, props));
-};
-
-var border = "1px solid var(--lhds-color-ui-300)";
-var CheckboxMenu = function (_a) {
-    var renderMenu = _a.renderMenu, checkboxProps = __rest(_a, ["renderMenu"]);
-    var _b = useBoolean(false), isOpen = _b[0], open = _b[1], close = _b[2];
-    return (React.createElement(Popover, { onClickOutside: close, arrow: false, visible: isOpen, disablePadding: true, content: renderMenu ? (React.createElement(Column, null,
-            React.createElement(ActionMenu, null, renderMenu(close)))) : undefined, placement: "bottom-start", variant: "outlined" },
-        React.createElement(Box, { display: "inline-block" },
-            React.createElement(Row, { spacing: 0.5, indent: true, alignItems: "center", border: border, borderRadius: "4px" },
-                React.createElement(Checkbox, __assign({}, checkboxProps)),
-                React.createElement(Indent, { num: 0.5 }),
-                React.createElement(FlatButton, { size: "small", onClick: open, leftIcon: faAngleDown$1 })))));
-};
-
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
+(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("._navBar_1qp30_1{--swui-navbar-background-color: var(--lhds-color-blue-500);--swui-navbar-item-background-color-hover: var(--lhds-color-blue-700);--swui-navbar-item-background-color-selected: var(--lhds-color-blue-600);--swui-navbar-item-background-color-selected-hover: var( --lhds-color-blue-700 );background-color:var(--swui-navbar-background-color)}._sidebarMenuButton_1x4z8_1{--swui-nav-bar-side-menu-button-text-color: var(--lhds-color-ui-50);--swui-nav-bar-side-menu-button-background-color: var(--lhds-color-blue-500);--swui-nav-bar-side-menu-button-background-color-hover: var( --lhds-color-blue-600 );--swui-nav-bar-side-menu-button-background-color-focus: var( --lhds-color-blue-600 );--swui-nav-bar-side-menu-button-background-color-active: var( --lhds-color-blue-700 );--current-background-color: var( --swui-nav-bar-side-menu-button-background-color );display:flex;align-items:center;justify-content:center;line-height:10px;background-color:var(--current-background-color);color:var(--swui-nav-bar-side-menu-button-text-color);cursor:pointer;height:var(--swui-nav-bar-height);width:var(--swui-nav-bar-height);padding:0;margin:0;box-sizing:border-box;border-radius:0;outline:none;border:none}._sidebarMenuButton_1x4z8_1:hover{--current-background-color: var( --swui-nav-bar-side-menu-button-background-color-hover )}._sidebarMenuButton_1x4z8_1:focus-visible{--current-background-color: var( --swui-nav-bar-side-menu-button-background-color-focus )}._sidebarMenuButton_1x4z8_1:active{--current-background-color: var( --swui-nav-bar-side-menu-button-background-color-active )}._sidebarMenuButton_1x4z8_1 ._icon_1x4z8_55{color:var(--swui-nav-bar-side-menu-button-text-color)}._navBarButton_1xy53_1{--swui-nav-bar-button-text-color: var(--lhds-color-ui-50);--swui-nav-bar-button-background-color: transparent;--swui-nav-bar-button-background-color-hover: var(--lhds-color-blue-900);--swui-nav-bar-button-background-color-focus: var(--lhds-color-blue-700);--swui-nav-bar-button-background-color-active: var(--lhds-color-blue-800);--swui-nav-bar-button-background-color-selected: var(--lhds-color-blue-600);--swui-nav-bar-button-background-color-selected-hover: var( --lhds-color-blue-700 );--swui-nav-bar-button-background-color-selected-focus: var( --lhds-color-blue-700 );--swui-nav-bar-button-background-color-selected-active: var( --lhds-color-blue-800 );--swui-flat-button-text-color: var(--swui-nav-bar-button-text-color);--swui-flat-button-icon-color: var(--swui-nav-bar-button-text-color);--swui-flat-button-text-color-active: var(--swui-nav-bar-button-text-color);--swui-flat-button-background-color: var( --swui-nav-bar-button-background-color );--swui-flat-button-background-color-hover: var( --swui-nav-bar-button-background-color-hover );--swui-flat-button-background-color-focus: var( --swui-nav-bar-button-background-color-focus );--swui-flat-button-background-color-active: var( --swui-nav-bar-button-background-color-active )}._navBarButton_1xy53_1._selected_1xy53_36{--swui-flat-button-background-color: var( --swui-nav-bar-button-background-color-selected );--swui-flat-button-background-color-hover: var( --swui-nav-bar-button-background-color-selected-hover );--swui-flat-button-background-color-focus: var( --swui-nav-bar-button-background-color-selected-focus );--swui-flat-button-background-color-active: var( --swui-nav-bar-button-background-color-selected-active )}._navBarNotificationButton_1wchp_1{--swui-nav-bar-notification-button-text-color: var(--lhds-color-ui-50);--swui-nav-bar-notification-button-background-color: var( --lhds-color-blue-700 );--swui-nav-bar-notification-button-background-color-hover: var( --lhds-color-blue-900 );--swui-nav-bar-notification-button-background-color-focus: var( --lhds-color-blue-700 );--swui-nav-bar-notification-button-background-color-active: var( --lhds-color-blue-800 );--swui-nav-bar-notification-button-background-color-unread: var( --lhds-color-red-500 );--swui-nav-bar-notification-button-background-color-unread-hover: var( --lhds-color-red-700 );--swui-nav-bar-notification-button-background-color-unread-focus: var( --lhds-color-red-700 );--swui-nav-bar-notification-button-background-color-unread-active: var( --lhds-color-red-800 );--swui-flat-button-text-color: var( --swui-nav-bar-notification-button-text-color );--swui-flat-button-icon-color: var( --swui-nav-bar-notification-button-text-color );--swui-flat-button-text-color-active: var( --swui-nav-bar-notification-button-text-color );--swui-flat-button-background-color: var( --swui-nav-bar-notification-button-background-color );--swui-flat-button-background-color-hover: var( --swui-nav-bar-notification-button-background-color-hover );--swui-flat-button-background-color-focus: var( --swui-nav-bar-notification-button-background-color-focus );--swui-flat-button-background-color-active: var( --swui-nav-bar-notification-button-background-color-active );--swui-button-border-radius: 16px;--swui-button-border-radius-icon-only: 16px;--swui-nav-bar-notification-shake-count: 3;transition:.5s width;width:32px}._navBarNotificationButton_1wchp_1._hasCount_1wchp_60{width:56px}._navBarNotificationButton_1wchp_1._unread_1wchp_64{--swui-flat-button-background-color: var( --swui-nav-bar-notification-button-background-color-unread );--swui-flat-button-background-color-hover: var( --swui-nav-bar-notification-button-background-color-unread-hover );--swui-flat-button-background-color-focus: var( --swui-nav-bar-notification-button-background-color-unread-focus );--swui-flat-button-background-color-active: var( --swui-nav-bar-notification-button-background-color-unread-active )}._navBarNotificationButton_1wchp_1._unread_1wchp_64._hasCount_1wchp_60 ._icon_1wchp_79{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation:_shake_1wchp_1 1.5s ease-in-out var(--swui-nav-bar-notification-shake-count);animation:_shake_1wchp_1 1.5s ease-in-out var(--swui-nav-bar-notification-shake-count)}@-webkit-keyframes _shake_1wchp_1{0%{-webkit-transform:rotate(0);transform:rotate(0)}7%{-webkit-transform:rotate(20deg);transform:rotate(20deg)}15%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}22%{-webkit-transform:rotate(16deg);transform:rotate(16deg)}30%{-webkit-transform:rotate(-16deg);transform:rotate(-16deg)}38%{-webkit-transform:rotate(6deg);transform:rotate(6deg)}42%{-webkit-transform:rotate(-6deg);transform:rotate(-6deg)}46%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}to{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes _shake_1wchp_1{0%{-webkit-transform:rotate(0);transform:rotate(0)}7%{-webkit-transform:rotate(20deg);transform:rotate(20deg)}15%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}22%{-webkit-transform:rotate(16deg);transform:rotate(16deg)}30%{-webkit-transform:rotate(-16deg);transform:rotate(-16deg)}38%{-webkit-transform:rotate(6deg);transform:rotate(6deg)}42%{-webkit-transform:rotate(-6deg);transform:rotate(-6deg)}46%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}to{-webkit-transform:rotate(0);transform:rotate(0)}}._navBarSearchFieldInput_4knxd_1{--swui-textinput-line-height: 2.7rem;--swui-textinput-text-color: var(--lhds-color-ui-50)}._navBarSearchFieldInput_4knxd_1:focus{--swui-textinput-text-color: var(--lhds-color-ui-800)}._navBarSearchField_4knxd_1{--swui-textinput-animation-time: var(--swui-animation-time-fast);--swui-textinput-placeholder-color: var(--lhds-color-ui-500);--swui-textinput-bg-color: var(--lhds-color-blue-600);--swui-textinput-border-color: transparent;--swui-textinput-border-color-hover: transparent}._navBarSearchField_4knxd_1:focus-within{--swui-textinput-text-color: var(--lhds-color-ui-800);--swui-field-text-color: var(--swui-field-text-color);--swui-textinput-icon-color: var(--lhds-color-ui-500);--swui-textinput-bg-color: var(--lhds-color-ui-50)}._navBarUserButton_1gxfr_1{--swui-nav-bar-user-button-text-color: var(--lhds-color-ui-50);--swui-nav-bar-user-button-background-color: var(--lhds-color-blue-700);--swui-nav-bar-user-button-background-color-hover: var(--lhds-color-blue-900);--swui-nav-bar-user-button-background-color-focus: var(--lhds-color-blue-700);--swui-nav-bar-user-button-background-color-active: var( --lhds-color-blue-800 );--swui-flat-button-text-color: var(--swui-nav-bar-user-button-text-color);--swui-flat-button-icon-color: var(--swui-nav-bar-user-button-text-color);--swui-flat-button-text-color-active: var( --swui-nav-bar-user-button-text-color );--swui-flat-button-background-color: var( --swui-nav-bar-user-button-background-color );--swui-flat-button-background-color-hover: var( --swui-nav-bar-user-button-background-color-hover );--swui-flat-button-background-color-focus: var( --swui-nav-bar-user-button-background-color-focus );--swui-flat-button-background-color-active: var( --swui-nav-bar-user-button-background-color-active );--swui-button-border-radius: 16px;--swui-button-border-radius-icon-only: 16px}._navBarUserButton_1gxfr_1._initials_1gxfr_33{width:32px}._collapsible_1nroa_1{--swui-collapsible-animation-time: var(--swui-animation-time-fast);--swui-collapsible-expanded-line-background-color: var( --swui-primary-action-color );--swui-collapsible-header-text-color: var(--lhds-color-ui-900);--swui-collapsible-header-background-color: var(--swui-white);--swui-collapsible-header-background-color-hover: var(--lhds-color-blue-100);--swui-collapsible-header-background-color-active: var(--lhds-color-blue-100);--swui-collapsible-header-border-color: var(--lhds-color-ui-300);--swui-collapsible-header-border-color-focus: var( --swui-primary-action-color );--swui-collapsible-header-focus-shadow: var(--swui-field-focus-shadow);--swui-collapsible-header-content-margin: calc( var(--swui-metrics-indent) * 2 );--swui-collapsible-header-font-weight: var(--swui-font-weight-text-bold);--swui-collapsible-header-indicator-color: var(--swui-primary-action-color);--swui-collapsible-header-indicator-color-collapsed: var(--lhds-color-ui-500);--swui-collapsible-header-indicator-color-hover: var( --swui-primary-action-color );--swui-collapsible-header-padding: 0 calc(var(--swui-metrics-indent) * 2) 0;--swui-collapsible-content-background-color: var(--lhds-color-ui-100);--swui-collapsible-content-border-color: var(--lhds-color-ui-300);--swui-collapsible-content-padding: var(--swui-metrics-indent) calc(var(--swui-metrics-indent) * 2);--swui-collapsible-groupheading-font-size: var(--swui-font-size-smaller);--swui-collapsible-groupheading-text-color: var(--lhds-color-ui-600);--swui-collapsible-min-height: 40px}._collapsible_1nroa_1 ._header_1nroa_46{background-color:var(--swui-collapsible-header-background-color);width:100%;text-align:left;min-height:var(--swui-collapsible-min-height);box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--swui-collapsible-header-border-color);padding:var(--swui-collapsible-header-padding)}._collapsible_1nroa_1 ._header_1nroa_46 ._indicator_1nroa_59{transition:all var(--swui-collapsible-animation-time) ease-in-out;margin-left:var(--swui-collapsible-header-content-margin);color:var(--swui-collapsible-header-indicator-color)}._collapsible_1nroa_1 ._header_1nroa_46:not(:disabled):hover:not(:active){background-color:var(--swui-collapsible-header-background-color-hover)}._collapsible_1nroa_1 ._header_1nroa_46:not(:disabled):hover:not(:active) ._indicator_1nroa_59{color:var(--swui-collapsible-header-indicator-color-hover)}._collapsible_1nroa_1 ._header_1nroa_46:focus-visible{outline:1px solid var(--swui-collapsible-header-border-color-focus);outline-offset:-1px;box-shadow:var(--swui-collapsible-header-focus-shadow)}._collapsible_1nroa_1 ._header_1nroa_46:active{background:var(--swui-collapsible-header-background-color-active)}._collapsible_1nroa_1 ._header_1nroa_46:disabled{cursor:not-allowed}._collapsible_1nroa_1{position:relative}._collapsible_1nroa_1:before{content:\"\";position:absolute;width:2px;background:var(--swui-collapsible-expanded-line-background-color);top:0;bottom:0;left:0;z-index:1}._collapsible_1nroa_1 ._headerText_1nroa_103{font-weight:var(--swui-collapsible-header-font-weight)}._collapsible_1nroa_1[aria-expanded=false]{--swui-collapsible-expanded-line-background-color: transparent}._collapsible_1nroa_1[aria-expanded=false] ._indicator_1nroa_59{color:var(--swui-collapsible-header-indicator-color-collapsed)}._collapsible_1nroa_1 ._label_1nroa_114{margin-right:auto}._collapsible_1nroa_1 ._label_1nroa_114 span{--current-line-height: 1;font-weight:var(--swui-collapsible-header-font-weight)}._collapsible_1nroa_1 ._contentLeft_1nroa_123,._collapsible_1nroa_1 ._contentRight_1nroa_124{display:flex}._collapsible_1nroa_1 ._contentLeft_1nroa_123 button,._collapsible_1nroa_1 ._contentRight_1nroa_124 button{cursor:pointer}._collapsible_1nroa_1 ._contentLeft_1nroa_123{margin-right:var(--swui-collapsible-header-content-margin)}._collapsible_1nroa_1 ._contentRight_1nroa_124{margin-left:auto}._collapsible_1nroa_1 ._content_1nroa_123{display:flex;align-items:center;justify-content:stretch;background:var(--swui-collapsible-content-background-color);padding:var(--swui-collapsible-content-padding);min-height:var(--swui-collapsible-min-height);box-sizing:border-box}._collapsible_1nroa_1 ._content_1nroa_123:last-child{border-bottom:1px solid var(--swui-collapsible-content-border-color)}._collapsible_1nroa_1 ._content_1nroa_123._groupHeading_1nroa_155{border:none;font-size:var(--swui-collapsible-groupheading-font-size);font-family:var(--swui-font-primary);color:var(--swui-collapsible-groupheading-text-color);text-transform:uppercase;font-weight:var(--swui-font-weight-text-bold);letter-spacing:.1rem}._collapsible_1nroa_1 ._content_1nroa_123 [data-hidden=true]{display:none}._collapsible_1nroa_1 ._content_1nroa_123:hover [data-hidden=true]{display:inherit}._collapsible_1nroa_1 ._content_1nroa_123:hover [data-hover=true]{color:var(--swui-collapsible-header-indicator-color-hover)}._collapsible_1nroa_1 ._contentEnter_1nroa_180{opacity:0}._collapsible_1nroa_1 ._contentEnterActive_1nroa_184{opacity:1;transition:opacity var(--swui-collapsible-animation-time) ease-in-out}._collapsible_1nroa_1 ._contentExitDone_1nroa_189{display:none}._collapsible_1nroa_1 button._content_1nroa_123{font-family:var(--swui-font-primary);font-size:inherit;width:100%;text-align:left}._collapsible_1nroa_1 button._content_1nroa_123:focus-visible{outline:1px solid var(--swui-collapsible-header-border-color-focus);outline-offset:-1px;box-shadow:var(--swui-collapsible-header-focus-shadow)}._collapsible_1nroa_1 button._content_1nroa_123:not(:disabled):hover{background-color:var(--swui-collapsible-header-background-color-hover)}._collapsible_1nroa_1 button._content_1nroa_123:disabled{cursor:not-allowed}._collapsible_1nroa_1 button._content_1nroa_123:focus-within [data-hidden=true]{display:inherit}._collapsible_1nroa_1 ._collapsible_1nroa_1{--swui-collapsible-header-background-color: var( --swui-collapsible-content-background-color );--swui-collapsible-header-font-weight: normal}._collapsible_1nroa_1 ._collapsible_1nroa_1{--swui-collapsible-content-padding: var(--swui-metrics-indent) calc(var(--swui-metrics-indent) * 2) var(--swui-metrics-indent) calc(var(--swui-metrics-indent) * 4)}._collapsible_1nroa_1 ._collapsible_1nroa_1 ._collapsible_1nroa_1{--swui-collapsible-header-padding: 0 calc(var(--swui-metrics-indent) * 2) 0 calc(var(--swui-metrics-indent) * 4);--swui-collapsible-content-padding: var(--swui-metrics-indent) calc(var(--swui-metrics-indent) * 2) var(--swui-metrics-indent) calc(var(--swui-metrics-indent) * 6)}._collapsible_1nroa_1 ._collapsible_1nroa_1 ._collapsible_1nroa_1 ._collapsible_1nroa_1{--swui-collapsible-header-padding: 0 calc(var(--swui-metrics-indent) * 2) 0 calc(var(--swui-metrics-indent) * 6);--swui-collapsible-content-padding: var(--swui-metrics-indent) calc(var(--swui-metrics-indent) * 2) var(--swui-metrics-indent) calc(var(--swui-metrics-indent) * 8)}._collapsible_1nroa_1 ._collapsible_1nroa_1 ._collapsible_1nroa_1 ._collapsible_1nroa_1 ._collapsible_1nroa_1{--swui-collapsible-header-padding: 0 calc(var(--swui-metrics-indent) * 2) 0 calc(var(--swui-metrics-indent) * 8);--swui-collapsible-content-padding: var(--swui-metrics-indent) calc(var(--swui-metrics-indent) * 2) var(--swui-metrics-indent) calc(var(--swui-metrics-indent) * 10)}._sidebarMenu_hch18_1{--swui-sidebar-menu-separator-color: var(--lhds-color-blue-700);--swui-sidebar-menu-text-color: var(--swui-white);--swui-sidebar-menu-icon-color: var(--swui-white);--swui-sidebar-menu-background-color: var(--lhds-color-blue-500);--swui-sidebar-menu-background-color-hover: var(--lhds-color-blue-700);--swui-sidebar-menu-background-color-focus: var(--lhds-color-blue-700);--swui-sidebar-menu-background-color-active: var(--lhds-color-blue-600);--swui-sidebar-menu-item-selected: var(--lhds-color-blue-800);--swui-sidebar-menu-content-padding: var(--swui-metrics-indent) var(--swui-metrics-indent) var(--swui-metrics-indent) 0;--current-separator-color: var(--swui-sidebar-menu-separator-color);--current-text-color: var(--swui-sidebar-menu-text-color);--current-icon-color: var(--swui-sidebar-menu-icon-color);--current-background-color: var(--swui-sidebar-menu-background-color);--current-background-color-hover: var( --swui-sidebar-menu-background-color-hover );--current-background-color-focus: var( --swui-sidebar-menu-background-color-focus );--current-background-color-active: var( --swui-sidebar-menu-background-color-active );--current-item-selected: var(--swui-sidebar-menu-item-selected);--current-content-padding: var(--swui-sidebar-menu-content-padding);background-color:var(--current-background-color);height:100vh}._sidebarMenu_hch18_1[data-collapsed]{width:var(--swui-sidebar-menu-item-height)}._sidebarMenu_hch18_1 button{--swui-button-text-color: var(--swui-white);--swui-button-background-color-hover: var( --swui-sidebar-menu-background-color-hover )}._sidebarMenuCloseButton_1j21u_1{--swui-sidebar-menu-close-button-text-color: var(--lhds-color-ui-50);--swui-sidebar-menu-close-button-background-color: var(--lhds-color-blue-500);--swui-sidebar-menu-close-button-background-color-hover: var( --lhds-color-blue-600 );--swui-sidebar-menu-close-button-background-color-focus: var( --lhds-color-blue-600 );--swui-sidebar-menu-close-button-background-color-active: var( --lhds-color-blue-500 );--current-background-color: var( --swui-sidebar-menu-close-button-background-color );display:flex;align-items:center;justify-content:flex-start;line-height:10px;background-color:var(--current-background-color);color:var(--swui-sidebar-menu-close-button-text-color);cursor:pointer;height:var(--swui-sidebar-menu-item-height);padding:0;margin:0;box-sizing:border-box;border-radius:0;outline:none;border:none}._sidebarMenuCloseButton_1j21u_1:hover{--current-background-color: var( --swui-sidebar-menu-close-button-background-color-hover )}._sidebarMenuCloseButton_1j21u_1:focus{--current-background-color: var( --swui-sidebar-menu-close-button-background-color-focus )}._sidebarMenuCloseButton_1j21u_1:active{--current-background-color: var( --swui-sidebar-menu-close-button-background-color-active )}._sidebarMenuCloseButton_1j21u_1 ._iconWrapper_1j21u_55{justify-content:center;align-items:center;width:var(--swui-sidebar-menu-item-height);height:var(--swui-sidebar-menu-item-height)}._sidebarMenuCloseButton_1j21u_1 ._icon_1j21u_55{color:var(--swui-sidebar-menu-close-button-text-color)}._label_mnp0f_1{font-size:var(--current-text-size, var(--swui-font-size-medium));line-height:var(--current-line-height, var(--swui-line-height-medium));font-weight:var(--swui-button-font-weight);font-family:var(--swui-font-buttons);color:var(--current-text-color)}._icon_mnp0f_9{color:var(--current-text-color);font-size:1.6rem}._spinner_mnp0f_14{color:var(--current-text-color)}._leftWrapper_mnp0f_18._leftWrapper_mnp0f_18._leftWrapper_mnp0f_18._leftWrapper_mnp0f_18{width:var(--swui-sidebar-menu-item-height);margin-right:0}._button_mnp0f_23{border:0;padding:0;background:var(--current-background-color)}[data-collapsed] [aria-expanded=true] ._button_mnp0f_23,._button_mnp0f_23:hover{background:var(--current-background-color-hover)}._button_mnp0f_23:focus{outline:none}._button_mnp0f_23:focus-visible{background:var(--current-background-color-active)}._button_mnp0f_23:active{background:var(--current-background-color-active)}._button_mnp0f_23._selected_mnp0f_45{background:var(--current-item-selected)}._sidebarMenuHeading_kvpq5_1{--swui-sidebar-menu-heading-text-color: var(--lhds-color-ui-300);text-transform:uppercase}._sidebarMenuCollapsible_1jwhs_1{--swui-collapsible-header-text-color: var(--current-text-color);--swui-collapsible-header-background-color: var(--current-background-color);--swui-collapsible-header-background-color-hover: var( --current-background-color-hover );--swui-collapsible-header-background-color-active: var( --current-background-color-active );--swui-collapsible-header-indicator-color: var(--current-text-color);--swui-collapsible-header-indicator-color-collapsed: var( --current-text-color );--swui-collapsible-header-indicator-color-hover: var(--current-text-color);--swui-collapsible-header-padding: 0 calc(var(--swui-metrics-indent) * 2) 0 0;--swui-collapsible-header-content-margin: 0;--swui-collapsible-collapsible-link-padding: var(--swui-metrics-indent) var(--swui-metrics-indent) var(--swui-metrics-indent) calc(var(--swui-metrics-indent) * 4);--swui-collapsible-header-border-color: transparent;--swui-collapsible-min-height: var(--swui-sidebar-menu-item-height)}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import { ActionMenu, ActionMenuContext, stenaAngleDown, PrimaryButton, SecondaryButton, FlatButton, stenaBell, Icon, stenaSearch, stenaUser, Banner, Spinner, ButtonContent } from "@stenajs-webui/elements";
+import * as React from "react";
+import { useRef, useMemo, forwardRef, useState } from "react";
+import { useBoolean, Column, Box, Row, Indent, Heading, Clickable, Text, Space, SeparatorLine, exhaustSwitchCaseElseThrow } from "@stenajs-webui/core";
+import { Popover } from "@stenajs-webui/tooltip";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Checkbox, TextInput } from "@stenajs-webui/forms";
+import cx from "classnames";
+import { cssColor } from "@stenajs-webui/theme";
+import { formatDistance } from "date-fns";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
+import { CSSTransition } from "react-transition-group";
+import { faInbox } from "@fortawesome/free-solid-svg-icons/faInbox";
+const ActionMenuButton = ({
+  renderItems,
+  placement = "bottom",
+  buttonComponent: Button,
+  rightIcon = stenaAngleDown,
+  portalTarget = "parent",
+  zIndex,
+  menuWidth,
+  menuTop,
+  onClick,
+  disableArrow = false,
+  ...buttonProps
+}) => {
+  const [isOpen, open, close, toggle] = useBoolean(false);
+  const buttonRef = useRef(null);
+  const focusManager = {
+    name: "focusManager",
+    defaultValue: true,
+    fn({
+      popper
+    }) {
+      let restoreFocus = false;
+      const closeOnEscape = (event) => {
+        if (event.key === "Escape") {
+          restoreFocus = true;
+          close();
+        }
+        if (event.key === "Enter" || event.key === " ") {
+          restoreFocus = true;
+        }
+      };
+      return {
+        onCreate() {
+          popper.addEventListener("keydown", closeOnEscape);
+        },
+        onDestroy() {
+          popper.removeEventListener("keydown", closeOnEscape);
+        },
+        onMount() {
+          var _a;
+          restoreFocus = false;
+          (_a = popper.querySelector("button:not([disabled]), a[href]")) == null ? void 0 : _a.focus();
+        },
+        onHide() {
+          if (buttonRef.current && restoreFocus) {
+            buttonRef.current.focus();
+          }
+        }
+      };
     }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z$b = ".NavBar-module_navBar__HOrS3 {\n  /* Theme vars */\n  --swui-navbar-background-color: var(--lhds-color-blue-500);\n  --swui-navbar-item-background-color-hover: var(--lhds-color-blue-700);\n  --swui-navbar-item-background-color-selected: var(--lhds-color-blue-600);\n  --swui-navbar-item-background-color-selected-hover: var(\n    --lhds-color-blue-700\n  );\n\n  /* Styling */\n  background-color: var(--swui-navbar-background-color);\n}\n";
-var styles$a = {"navBar":"NavBar-module_navBar__HOrS3"};
-styleInject(css_248z$b);
-
-var css_248z$a = ".NavBarSideMenuButton-module_sidebarMenuButton__SlbsU {\n  /* Theme vars */\n  --swui-nav-bar-side-menu-button-text-color: var(--lhds-color-ui-50);\n  --swui-nav-bar-side-menu-button-background-color: var(--lhds-color-blue-500);\n  --swui-nav-bar-side-menu-button-background-color-hover: var(\n    --lhds-color-blue-600\n  );\n  --swui-nav-bar-side-menu-button-background-color-focus: var(\n    --lhds-color-blue-600\n  );\n  --swui-nav-bar-side-menu-button-background-color-active: var(\n    --lhds-color-blue-700\n  );\n\n  /* State vars */\n  --current-background-color: var(\n    --swui-nav-bar-side-menu-button-background-color\n  );\n\n  /* Styling */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 10px;\n  background-color: var(--current-background-color);\n  color: var(--swui-nav-bar-side-menu-button-text-color);\n  cursor: pointer;\n  height: var(--swui-nav-bar-height);\n  width: var(--swui-nav-bar-height);\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n  border-radius: 0;\n  outline: none;\n  border: none;\n}\n\n  .NavBarSideMenuButton-module_sidebarMenuButton__SlbsU:hover {\n    --current-background-color: var(\n      --swui-nav-bar-side-menu-button-background-color-hover\n    );\n  }\n\n  .NavBarSideMenuButton-module_sidebarMenuButton__SlbsU:focus-visible {\n    --current-background-color: var(\n      --swui-nav-bar-side-menu-button-background-color-focus\n    );\n  }\n\n  .NavBarSideMenuButton-module_sidebarMenuButton__SlbsU:active {\n    --current-background-color: var(\n      --swui-nav-bar-side-menu-button-background-color-active\n    );\n  }\n\n  .NavBarSideMenuButton-module_sidebarMenuButton__SlbsU .NavBarSideMenuButton-module_icon__Art-L {\n    color: var(--swui-nav-bar-side-menu-button-text-color);\n  }\n";
-var styles$9 = {"sidebarMenuButton":"NavBarSideMenuButton-module_sidebarMenuButton__SlbsU","icon":"NavBarSideMenuButton-module_icon__Art-L"};
-styleInject(css_248z$a);
-
-function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-
-var _ref$1 = /*#__PURE__*/React.createElement("path", {
+  };
+  const contextValue = useMemo(() => ({
+    open,
+    close
+  }), [open, close]);
+  const handleClick = (event) => {
+    onClick == null ? void 0 : onClick(event);
+    toggle();
+  };
+  return /* @__PURE__ */ jsx(Popover, {
+    disablePadding: true,
+    visible: isOpen,
+    onClickOutside: close,
+    placement,
+    content: isOpen && /* @__PURE__ */ jsx(ActionMenu, {
+      variant: "outlined",
+      width: menuWidth,
+      top: menuTop,
+      trapFocus: true,
+      children: /* @__PURE__ */ jsx(ActionMenuContext.Provider, {
+        value: contextValue,
+        children: renderItems(close)
+      })
+    }),
+    arrow: false,
+    appendTo: portalTarget,
+    zIndex,
+    plugins: [focusManager],
+    lazy: true,
+    children: /* @__PURE__ */ jsx(Button, {
+      rightIcon: disableArrow ? void 0 : rightIcon,
+      ...buttonProps,
+      ref: buttonRef,
+      onClick: handleClick
+    })
+  });
+};
+const ActionMenuPrimaryButton = (props) => {
+  return /* @__PURE__ */ jsx(ActionMenuButton, {
+    buttonComponent: PrimaryButton,
+    ...props
+  });
+};
+const ActionMenuSecondaryButton = (props) => {
+  return /* @__PURE__ */ jsx(ActionMenuButton, {
+    buttonComponent: SecondaryButton,
+    ...props
+  });
+};
+const ActionMenuFlatButton = (props) => {
+  return /* @__PURE__ */ jsx(ActionMenuButton, {
+    buttonComponent: FlatButton,
+    ...props
+  });
+};
+const border = `1px solid var(--lhds-color-ui-300)`;
+const CheckboxMenu = ({
+  renderMenu,
+  ...checkboxProps
+}) => {
+  const [isOpen, open, close] = useBoolean(false);
+  return /* @__PURE__ */ jsx(Popover, {
+    onClickOutside: close,
+    arrow: false,
+    visible: isOpen,
+    disablePadding: true,
+    content: renderMenu ? /* @__PURE__ */ jsx(Column, {
+      children: /* @__PURE__ */ jsx(ActionMenu, {
+        children: renderMenu(close)
+      })
+    }) : void 0,
+    placement: "bottom-start",
+    variant: "outlined",
+    children: /* @__PURE__ */ jsx(Box, {
+      display: "inline-block",
+      children: /* @__PURE__ */ jsxs(Row, {
+        spacing: 0.5,
+        indent: true,
+        alignItems: "center",
+        border,
+        borderRadius: "4px",
+        children: [/* @__PURE__ */ jsx(Checkbox, {
+          ...checkboxProps
+        }), /* @__PURE__ */ jsx(Indent, {
+          num: 0.5
+        }), /* @__PURE__ */ jsx(FlatButton, {
+          size: "small",
+          onClick: open,
+          leftIcon: stenaAngleDown
+        })]
+      })
+    })
+  });
+};
+const navBar = "_navBar_1qp30_1";
+var styles$a = {
+  navBar
+};
+const sidebarMenuButton = "_sidebarMenuButton_1x4z8_1";
+const icon$3 = "_icon_1x4z8_55";
+var styles$9 = {
+  sidebarMenuButton,
+  icon: icon$3
+};
+const SvgBars = (props) => /* @__PURE__ */ React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 16,
+  height: 16,
+  viewBox: "0 0 24 24",
+  ...props
+}, /* @__PURE__ */ React.createElement("path", {
   fill: "#FFF",
   fillRule: "evenodd",
-  d: "M22 5H2c.12 0 0-.15 0 0V3c0 .15.12 0 0 0h20c-.12 0 0 .15 0 0v2c0-.15-.12 0 0 0zm0 8H2c.12 0 0-.15 0 0v-2c0 .15.12 0 0 0h20c-.12 0 0 .15 0 0v2c0-.15-.12 0 0 0zm0 8H2c.12 0 0-.15 0 0v-2c0 .15.12 0 0 0h20c-.12 0 0 .15 0 0v2c0-.15-.12 0 0 0z"
+  d: "M22,5 L2,5 C2.11992373,5 2,4.85076158 2,5 L2,3 C2,3.14923842 2.11992373,3 2,3 L22,3 C21.8800763,3 22,3.14923842 22,3 L22,5 C22,4.85076158 21.8800763,5 22,5 Z M22,13 L2,13 C2.11992373,13 2,12.8507616 2,13 L2,11 C2,11.1492384 2.11992373,11 2,11 L22,11 C21.8800763,11 22,11.1492384 22,11 L22,13 C22,12.8507616 21.8800763,13 22,13 Z M22,21 L2,21 C2.11992373,21 2,20.8507616 2,21 L2,19 C2,19.1492384 2.11992373,19 2,19 L22,19 C21.8800763,19 22,19.1492384 22,19 L22,21 C22,20.8507616 21.8800763,21 22,21 Z"
+}));
+const NavBarSideMenuButton = ({
+  className,
+  onClick
+}) => {
+  return /* @__PURE__ */ jsx("button", {
+    onClick,
+    className: cx(styles$9.sidebarMenuButton, className),
+    children: /* @__PURE__ */ jsx(SvgBars, {
+      className: styles$9.icon
+    })
+  });
+};
+const variantToHeight = {
+  compact: 40,
+  standard: 48,
+  relaxed: 64
+};
+const getNavbarHeight = (variant) => variantToHeight[variant] + "px";
+const NavBar = ({
+  left,
+  className,
+  showMenuButton = false,
+  menuButtonVisibility = "visible",
+  children,
+  right,
+  center,
+  variant = "standard",
+  onClickMenuButton
+}) => {
+  const currentFlex = center ? 1 : void 0;
+  const height = getNavbarHeight(variant);
+  return /* @__PURE__ */ jsxs(Row, {
+    height,
+    minHeight: height,
+    justifyContent: "space-between",
+    style: {
+      ["--swui-nav-bar-height"]: height
+    },
+    className: cx(styles$a.navBar, className),
+    children: [/* @__PURE__ */ jsxs(Row, {
+      flex: currentFlex,
+      justifyContent: "flex-start",
+      alignItems: "center",
+      children: [showMenuButton ? /* @__PURE__ */ jsxs(Fragment, {
+        children: [menuButtonVisibility === "hidden" ? /* @__PURE__ */ jsx(Box, {
+          width: "var(--swui-nav-bar-height)"
+        }) : /* @__PURE__ */ jsx(NavBarSideMenuButton, {
+          onClick: onClickMenuButton
+        }), /* @__PURE__ */ jsx(Indent, {})]
+      }) : /* @__PURE__ */ jsx(Indent, {
+        num: 2
+      }), left ? /* @__PURE__ */ jsxs(Fragment, {
+        children: [left, /* @__PURE__ */ jsx(Indent, {
+          num: 2
+        })]
+      }) : /* @__PURE__ */ jsx(Indent, {
+        num: 2
+      }), children && /* @__PURE__ */ jsx(Fragment, {
+        children: /* @__PURE__ */ jsx(Row, {
+          justifyContent: "center",
+          alignItems: "center",
+          children: React.Children.map(children, (child, index) => /* @__PURE__ */ jsxs(Fragment, {
+            children: [index > 0 && /* @__PURE__ */ jsx(Indent, {}), child]
+          }))
+        })
+      })]
+    }), center && /* @__PURE__ */ jsx(Row, {
+      justifyContent: "center",
+      alignItems: "center",
+      children: center
+    }), /* @__PURE__ */ jsxs(Row, {
+      justifyContent: "flex-end",
+      alignItems: "center",
+      flex: currentFlex,
+      children: [right, /* @__PURE__ */ jsx(Indent, {
+        num: 2
+      })]
+    })]
+  });
+};
+const navBarButton = "_navBarButton_1xy53_1";
+const selected$1 = "_selected_1xy53_36";
+var styles$8 = {
+  navBarButton,
+  selected: selected$1
+};
+const NavBarButton = ({
+  selected: selected2,
+  className,
+  ...buttonProps
+}) => {
+  return /* @__PURE__ */ jsx(FlatButton, {
+    ...buttonProps,
+    className: cx(styles$8.navBarButton, selected2 && styles$8.selected, className)
+  });
+};
+const NavBarHeading = (headingProps) => {
+  return /* @__PURE__ */ jsx(Heading, {
+    whiteSpace: "nowrap",
+    color: "#fff",
+    ...headingProps
+  });
+};
+const NavBarPopoverButton = ({
+  content: content2,
+  children,
+  ...navBarButtonProps
+}) => {
+  const [isOpen, open, close] = useBoolean(false);
+  return /* @__PURE__ */ jsx(Popover, {
+    onClickOutside: close,
+    triggerTarget: document.body,
+    visible: isOpen,
+    content: /* @__PURE__ */ jsxs(Fragment, {
+      children: [content2 && content2({
+        close
+      }), children]
+    }),
+    children: /* @__PURE__ */ jsx(NavBarButton, {
+      ...navBarButtonProps,
+      onClick: open
+    })
+  });
+};
+const navBarNotificationButton = "_navBarNotificationButton_1wchp_1";
+const hasCount = "_hasCount_1wchp_60";
+const unread = "_unread_1wchp_64";
+const icon$2 = "_icon_1wchp_79";
+const shake = "_shake_1wchp_1";
+var styles$7 = {
+  navBarNotificationButton,
+  hasCount,
+  unread,
+  icon: icon$2,
+  shake
+};
+const NavBarNotificationButton = ({
+  count,
+  unread: unread2 = false,
+  className,
+  labelClassName,
+  iconClassName,
+  icon: icon2 = stenaBell,
+  ...buttonProps
+}) => {
+  const hasCount2 = count > 0;
+  return /* @__PURE__ */ jsx(FlatButton, {
+    ...buttonProps,
+    leftIcon: icon2,
+    className: cx({
+      [styles$7.unread]: unread2
+    }, {
+      [styles$7.hasCount]: hasCount2
+    }, styles$7.navBarNotificationButton, className),
+    label: hasCount2 ? String(count) : void 0,
+    labelClassName: cx(labelClassName, styles$7.label),
+    iconClassName: cx(iconClassName, styles$7.icon)
+  });
+};
+const navBarSearchFieldInput = "_navBarSearchFieldInput_4knxd_1";
+const navBarSearchField = "_navBarSearchField_4knxd_1";
+var styles$6 = {
+  navBarSearchFieldInput,
+  navBarSearchField
+};
+const NavBarSearchField = ({
+  placeholder = "Search...",
+  className,
+  wrapperClassName,
+  ...textInputProps
+}) => {
+  return /* @__PURE__ */ jsx(TextInput, {
+    wrapperClassName: cx(styles$6.navBarSearchField, wrapperClassName),
+    className: cx(styles$6.navBarSearchFieldInput, className),
+    placeholder,
+    contentRight: /* @__PURE__ */ jsx(Clickable, {
+      children: /* @__PURE__ */ jsx(Icon, {
+        icon: stenaSearch
+      })
+    }),
+    ...textInputProps
+  });
+};
+const navBarUserButton = "_navBarUserButton_1gxfr_1";
+const initials = "_initials_1gxfr_33";
+var styles$5 = {
+  navBarUserButton,
+  initials
+};
+const NavBarUserButton = ({
+  className,
+  username,
+  initials: initials2,
+  icon: icon2 = stenaUser,
+  iconClassName,
+  ...buttonProps
+}) => {
+  return /* @__PURE__ */ jsx(ActionMenuFlatButton, {
+    ...buttonProps,
+    className: cx({
+      [styles$5.initials]: initials2 != null
+    }, styles$5.navBarUserButton, className),
+    leftIcon: username != null ? stenaUser : void 0,
+    label: initials2 != null ? initials2 : username,
+    disableArrow: true
+  });
+};
+const defaultNotificationTheme = {
+  notificationBg: "#eaeaea",
+  notificationHoverBg: "#eeeeee",
+  notificationDismissedBg: "#ffffff",
+  notificationDismissedHoverBg: "#f4f4f4"
+};
+const Notification = ({
+  onClick,
+  icon: icon2,
+  iconColor,
+  title,
+  text,
+  content: content2,
+  date,
+  dismissed,
+  theme = defaultNotificationTheme
+}) => {
+  const agoLabel = useMemo(() => {
+    if (date) {
+      return `${formatDistance(date, new Date())} ago`;
+    }
+    return void 0;
+  }, [date]);
+  return /* @__PURE__ */ jsx(Clickable, {
+    onClick,
+    style: {
+      textAlign: "left"
+    },
+    children: /* @__PURE__ */ jsx(Box, {
+      background: dismissed ? theme.notificationDismissedBg : theme.notificationBg,
+      hoverBackground: dismissed ? theme.notificationDismissedHoverBg : theme.notificationHoverBg,
+      spacing: true,
+      indent: true,
+      children: /* @__PURE__ */ jsxs(Row, {
+        width: "250px",
+        children: [icon2 && /* @__PURE__ */ jsx(Row, {
+          width: "34px",
+          alignItems: "center",
+          children: /* @__PURE__ */ jsx(Icon, {
+            icon: icon2,
+            color: iconColor
+          })
+        }), /* @__PURE__ */ jsxs(Column, {
+          flex: 1,
+          children: [title && /* @__PURE__ */ jsxs(Fragment, {
+            children: [/* @__PURE__ */ jsx(Text, {
+              children: title
+            }), /* @__PURE__ */ jsx(Space, {
+              half: true
+            })]
+          }), text && /* @__PURE__ */ jsxs(Fragment, {
+            children: [/* @__PURE__ */ jsx(Text, {
+              size: "small",
+              children: text
+            }), /* @__PURE__ */ jsx(Space, {
+              half: true
+            })]
+          }), content2 && /* @__PURE__ */ jsxs(Fragment, {
+            children: [content2, /* @__PURE__ */ jsx(Space, {
+              half: true
+            })]
+          }), /* @__PURE__ */ jsx(Text, {
+            size: "small",
+            color: cssColor("--swui-text-disabled-color"),
+            children: agoLabel
+          })]
+        })]
+      })
+    })
+  });
+};
+const collapsible = "_collapsible_1nroa_1";
+const header = "_header_1nroa_46";
+const indicator = "_indicator_1nroa_59";
+const headerText = "_headerText_1nroa_103";
+const label$1 = "_label_1nroa_114";
+const contentLeft = "_contentLeft_1nroa_123";
+const contentRight = "_contentRight_1nroa_124";
+const content = "_content_1nroa_123";
+const groupHeading = "_groupHeading_1nroa_155";
+const contentEnter = "_contentEnter_1nroa_180";
+const contentEnterActive = "_contentEnterActive_1nroa_184";
+const contentExitDone = "_contentExitDone_1nroa_189";
+var styles$4 = {
+  collapsible,
+  header,
+  indicator,
+  headerText,
+  label: label$1,
+  contentLeft,
+  contentRight,
+  content,
+  groupHeading,
+  contentEnter,
+  contentEnterActive,
+  contentExitDone
+};
+const CollapsibleEmptyContent = () => {
+  return /* @__PURE__ */ jsxs(Column, {
+    indent: true,
+    spacing: true,
+    flex: 1,
+    alignItems: "center",
+    children: [/* @__PURE__ */ jsx(Icon, {
+      icon: faInbox,
+      color: cssColor("--lhds-color-ui-500")
+    }), /* @__PURE__ */ jsx(Space, {}), /* @__PURE__ */ jsx(Text, {
+      size: "small",
+      color: cssColor("--lhds-color-ui-500"),
+      children: "No content"
+    })]
+  });
+};
+const CollapsibleContent = ({
+  contentLeft: contentLeft2,
+  contentRight: contentRight2,
+  className,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs("div", {
+    className: cx(styles$4.content, className),
+    ...props,
+    children: [contentLeft2 && /* @__PURE__ */ jsx("div", {
+      className: styles$4.contentLeft,
+      children: contentLeft2
+    }), children != null ? children : /* @__PURE__ */ jsx(CollapsibleEmptyContent, {}), contentRight2 && /* @__PURE__ */ jsx("div", {
+      className: styles$4.contentRight,
+      children: contentRight2
+    })]
+  });
+};
+const mapCSSTime = (value) => {
+  const num = parseFloat(value);
+  const match = value.match(/m?s/);
+  switch (match == null ? void 0 : match[0]) {
+    case "s":
+      return num * 1e3;
+    case "ms":
+      return num;
+    default:
+      return 0;
+  }
+};
+const Collapsible = forwardRef(function Collapsible2({
+  label: label2,
+  contentLeft: contentLeft2,
+  contentRight: contentRight2,
+  collapsed = false,
+  onClick,
+  className,
+  disabled = false,
+  unmountOnCollapse = false,
+  mountOnEnter = true,
+  icon: icon2 = faChevronUp,
+  iconCollapsed = faChevronDown,
+  iconSize = 8,
+  children,
+  autoFocus = false,
+  ...divProps
+}, ref) {
+  const divRef = React.useRef(null);
+  const timeout = divRef.current ? mapCSSTime(getComputedStyle(divRef.current).getPropertyValue("--swui-collapsible-animation-time")) : void 0;
+  return /* @__PURE__ */ jsxs("div", {
+    className: cx(styles$4.collapsible, className),
+    "aria-expanded": !collapsed,
+    ref: divRef,
+    ...divProps,
+    children: [/* @__PURE__ */ jsxs(Clickable, {
+      disableFocusHighlight: true,
+      disableOpacityOnClick: true,
+      className: styles$4.header,
+      onClick,
+      disabled,
+      autoFocus,
+      ref,
+      children: [contentLeft2 && /* @__PURE__ */ jsx("div", {
+        className: styles$4.contentLeft,
+        children: contentLeft2
+      }), /* @__PURE__ */ jsx("div", {
+        className: styles$4.label,
+        children: /* @__PURE__ */ jsx(Text, {
+          color: "var(--swui-collapsible-header-text-color)",
+          className: styles$4.headerText,
+          children: label2
+        })
+      }), contentRight2 && /* @__PURE__ */ jsx("div", {
+        className: styles$4.contentRight,
+        children: contentRight2
+      }), /* @__PURE__ */ jsx(Icon, {
+        icon: collapsed ? iconCollapsed : icon2,
+        className: styles$4.indicator,
+        size: iconSize,
+        fixedWidth: true
+      })]
+    }), /* @__PURE__ */ jsx(CSSTransition, {
+      in: !collapsed,
+      timeout: {
+        enter: timeout
+      },
+      classNames: {
+        enter: styles$4.contentEnter,
+        enterActive: styles$4.contentEnterActive,
+        exit: styles$4.contentExit,
+        exitActive: styles$4.contentExitActive,
+        exitDone: styles$4.contentExitDone
+      },
+      mountOnEnter,
+      unmountOnExit: unmountOnCollapse,
+      children: /* @__PURE__ */ jsx("div", {
+        role: "region",
+        children: children != null ? children : /* @__PURE__ */ jsx(CollapsibleContent, {
+          children: /* @__PURE__ */ jsx(CollapsibleEmptyContent, {})
+        })
+      })
+    })]
+  });
+});
+const CollapsibleWithCheckbox = ({
+  value,
+  onValueChange,
+  onChange,
+  indeterminate,
+  ...collapsibleProps
+}) => {
+  return /* @__PURE__ */ jsx(Collapsible, {
+    contentLeft: /* @__PURE__ */ jsx(Checkbox, {
+      value,
+      indeterminate,
+      onValueChange,
+      onChange,
+      onClick: (ev) => ev.stopPropagation()
+    }),
+    ...collapsibleProps
+  });
+};
+const CollapsibleClickableContent = ({
+  contentLeft: contentLeft2,
+  contentRight: contentRight2,
+  className,
+  onClick,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(Clickable, {
+    disableFocusHighlight: true,
+    disableOpacityOnClick: true,
+    className: cx(styles$4.content, className),
+    onClick,
+    ...props,
+    children: [contentLeft2 && /* @__PURE__ */ jsx("div", {
+      className: styles$4.contentLeft,
+      children: contentLeft2
+    }), children != null ? children : /* @__PURE__ */ jsx(CollapsibleEmptyContent, {}), contentRight2 && /* @__PURE__ */ jsx("div", {
+      className: styles$4.contentRight,
+      children: contentRight2
+    })]
+  });
+};
+const CollapsibleGroupHeading = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CollapsibleContent, {
+  className: cx(styles$4.groupHeading, className),
+  ...props
+});
+const ErrorPanel = ({
+  text = "Something unexpected happened."
+}) => {
+  return /* @__PURE__ */ jsx(Box, {
+    justifyContent: "center",
+    alignItems: "center",
+    children: /* @__PURE__ */ jsx(Banner, {
+      variant: "error",
+      headerText: text
+    })
+  });
+};
+const ErrorScreen = (props) => {
+  return /* @__PURE__ */ jsx(Box, {
+    width: "100%",
+    height: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+    children: /* @__PURE__ */ jsx(ErrorPanel, {
+      ...props
+    })
+  });
+};
+const LoadingPanel = ({
+  text = "Loading..."
+}) => {
+  return /* @__PURE__ */ jsxs(Box, {
+    alignItems: "center",
+    children: [/* @__PURE__ */ jsx(Spinner, {
+      size: "small"
+    }), /* @__PURE__ */ jsx(Space, {
+      num: 4
+    }), /* @__PURE__ */ jsx(Heading, {
+      variant: "h4",
+      children: text
+    })]
+  });
+};
+const LoadingScreen = (props) => {
+  return /* @__PURE__ */ jsx(Box, {
+    width: "100%",
+    height: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+    children: /* @__PURE__ */ jsx(LoadingPanel, {
+      ...props
+    })
+  });
+};
+const PageHeader = ({
+  renderBreadCrumbs,
+  renderPageHeading,
+  renderTabs,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs(Box, {
+    shadow: "box",
+    background: cssColor("--lhds-color-ui-50"),
+    children: [/* @__PURE__ */ jsxs(Box, {
+      indent: 3,
+      children: [renderBreadCrumbs && /* @__PURE__ */ jsx(Row, {
+        spacing: 1.25,
+        children: renderBreadCrumbs()
+      }), renderPageHeading == null ? void 0 : renderPageHeading(), renderTabs == null ? void 0 : renderTabs()]
+    }), children && /* @__PURE__ */ jsxs(Fragment, {
+      children: [!renderTabs && /* @__PURE__ */ jsx(Space, {}), /* @__PURE__ */ jsx(SeparatorLine, {}), children]
+    })]
+  });
+};
+const PageHeaderRow = (props) => /* @__PURE__ */ jsx(Row, {
+  indent: 3,
+  spacing: true,
+  ...props
 });
-
-function SvgBars(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    viewBox: "0 0 24 24"
-  }, props), _ref$1);
-}
-
-var NavBarSideMenuButton = function (_a) {
-    var className = _a.className, onClick = _a.onClick;
-    return (React.createElement("button", { onClick: onClick, className: cx(styles$9.sidebarMenuButton, className) },
-        React.createElement(SvgBars, { className: styles$9.icon })));
-};
-
-var variantToHeight = {
-    compact: 40,
-    standard: 48,
-    relaxed: 64,
-};
-var getNavbarHeight = function (variant) {
-    return variantToHeight[variant] + "px";
-};
-
-var NavBar = function (_a) {
-    var _b;
-    var left = _a.left, className = _a.className, _c = _a.showMenuButton, showMenuButton = _c === void 0 ? false : _c, _d = _a.menuButtonVisibility, menuButtonVisibility = _d === void 0 ? "visible" : _d, children = _a.children, right = _a.right, center = _a.center, _e = _a.variant, variant = _e === void 0 ? "standard" : _e, onClickMenuButton = _a.onClickMenuButton;
-    var currentFlex = center ? 1 : undefined;
-    var height = getNavbarHeight(variant);
-    return (React.createElement(Row, { height: height, minHeight: height, justifyContent: "space-between", style: (_b = {}, _b["--swui-nav-bar-height"] = height, _b), className: cx(styles$a.navBar, className) },
-        React.createElement(Row, { flex: currentFlex, justifyContent: "flex-start", alignItems: "center" },
-            showMenuButton ? (React.createElement(React.Fragment, null,
-                menuButtonVisibility === "hidden" ? (React.createElement(Box, { width: "var(--swui-nav-bar-height)" })) : (React.createElement(NavBarSideMenuButton, { onClick: onClickMenuButton })),
-                React.createElement(Indent, null))) : (React.createElement(Indent, { num: 2 })),
-            left ? (React.createElement(React.Fragment, null,
-                left,
-                React.createElement(Indent, { num: 2 }))) : (React.createElement(Indent, { num: 2 })),
-            children && (React.createElement(React.Fragment, null,
-                React.createElement(Row, { justifyContent: "center", alignItems: "center" }, React.Children.map(children, function (child, index) { return (React.createElement(React.Fragment, null,
-                    index > 0 && React.createElement(Indent, null),
-                    child)); }))))),
-        center && (React.createElement(Row, { justifyContent: "center", alignItems: "center" }, center)),
-        React.createElement(Row, { justifyContent: "flex-end", alignItems: "center", flex: currentFlex },
-            right,
-            React.createElement(Indent, { num: 2 }))));
-};
-
-var css_248z$9 = ".NavBarButton-module_navBarButton__3XKjB {\n  /* Theme vars */\n  --swui-nav-bar-button-text-color: var(--lhds-color-ui-50);\n  --swui-nav-bar-button-background-color: transparent;\n  --swui-nav-bar-button-background-color-hover: var(--lhds-color-blue-900);\n  --swui-nav-bar-button-background-color-focus: var(--lhds-color-blue-700);\n  --swui-nav-bar-button-background-color-active: var(--lhds-color-blue-800);\n  --swui-nav-bar-button-background-color-selected: var(--lhds-color-blue-600);\n  --swui-nav-bar-button-background-color-selected-hover: var(\n    --lhds-color-blue-700\n  );\n  --swui-nav-bar-button-background-color-selected-focus: var(\n    --lhds-color-blue-700\n  );\n  --swui-nav-bar-button-background-color-selected-active: var(\n    --lhds-color-blue-800\n  );\n\n  /* Flatbutton overrrides */\n  --swui-flat-button-text-color: var(--swui-nav-bar-button-text-color);\n  --swui-flat-button-icon-color: var(--swui-nav-bar-button-text-color);\n  --swui-flat-button-text-color-active: var(--swui-nav-bar-button-text-color);\n  --swui-flat-button-background-color: var(\n    --swui-nav-bar-button-background-color\n  );\n  --swui-flat-button-background-color-hover: var(\n    --swui-nav-bar-button-background-color-hover\n  );\n  --swui-flat-button-background-color-focus: var(\n    --swui-nav-bar-button-background-color-focus\n  );\n  --swui-flat-button-background-color-active: var(\n    --swui-nav-bar-button-background-color-active\n  );\n}\n\n  .NavBarButton-module_navBarButton__3XKjB.NavBarButton-module_selected__1ReDE {\n    --swui-flat-button-background-color: var(\n      --swui-nav-bar-button-background-color-selected\n    );\n    --swui-flat-button-background-color-hover: var(\n      --swui-nav-bar-button-background-color-selected-hover\n    );\n    --swui-flat-button-background-color-focus: var(\n      --swui-nav-bar-button-background-color-selected-focus\n    );\n    --swui-flat-button-background-color-active: var(\n      --swui-nav-bar-button-background-color-selected-active\n    );\n  }\n";
-var styles$8 = {"navBarButton":"NavBarButton-module_navBarButton__3XKjB","selected":"NavBarButton-module_selected__1ReDE"};
-styleInject(css_248z$9);
-
-var NavBarButton = function (_a) {
-    var selected = _a.selected, className = _a.className, buttonProps = __rest(_a, ["selected", "className"]);
-    return (React.createElement(FlatButton, __assign({}, buttonProps, { className: cx(styles$8.navBarButton, selected && styles$8.selected, className) })));
-};
-
-var NavBarHeading = function (headingProps) {
-    return React.createElement(Heading, __assign({ whiteSpace: "nowrap", color: "#fff" }, headingProps));
-};
-
-var NavBarPopoverButton = function (_a) {
-    var content = _a.content, children = _a.children, navBarButtonProps = __rest(_a, ["content", "children"]);
-    var _b = useBoolean(false), isOpen = _b[0], open = _b[1], close = _b[2];
-    return (React.createElement(Popover, { onClickOutside: close, triggerTarget: document.body, visible: isOpen, content: React.createElement(React.Fragment, null,
-            content && content({ close: close }),
-            children) },
-        React.createElement(NavBarButton, __assign({}, navBarButtonProps, { onClick: open }))));
-};
-
-var css_248z$8 = ".NavBarNotificationButton-module_navBarNotificationButton__20Q0f {\n  /* Theme vars */\n  --swui-nav-bar-notification-button-text-color: var(--lhds-color-ui-50);\n  --swui-nav-bar-notification-button-background-color: var(\n    --lhds-color-blue-700\n  );\n  --swui-nav-bar-notification-button-background-color-hover: var(\n    --lhds-color-blue-900\n  );\n  --swui-nav-bar-notification-button-background-color-focus: var(\n    --lhds-color-blue-700\n  );\n  --swui-nav-bar-notification-button-background-color-active: var(\n    --lhds-color-blue-800\n  );\n  --swui-nav-bar-notification-button-background-color-unread: var(\n    --lhds-color-red-500\n  );\n  --swui-nav-bar-notification-button-background-color-unread-hover: var(\n    --lhds-color-red-700\n  );\n  --swui-nav-bar-notification-button-background-color-unread-focus: var(\n    --lhds-color-red-700\n  );\n  --swui-nav-bar-notification-button-background-color-unread-active: var(\n    --lhds-color-red-800\n  );\n\n  /* FlatButton overrides */\n  --swui-flat-button-text-color: var(\n    --swui-nav-bar-notification-button-text-color\n  );\n  --swui-flat-button-icon-color: var(\n    --swui-nav-bar-notification-button-text-color\n  );\n  --swui-flat-button-text-color-active: var(\n    --swui-nav-bar-notification-button-text-color\n  );\n  --swui-flat-button-background-color: var(\n    --swui-nav-bar-notification-button-background-color\n  );\n  --swui-flat-button-background-color-hover: var(\n    --swui-nav-bar-notification-button-background-color-hover\n  );\n  --swui-flat-button-background-color-focus: var(\n    --swui-nav-bar-notification-button-background-color-focus\n  );\n  --swui-flat-button-background-color-active: var(\n    --swui-nav-bar-notification-button-background-color-active\n  );\n\n  --swui-button-border-radius: 16px;\n  --swui-button-border-radius-icon-only: 16px;\n  --swui-nav-bar-notification-shake-count: 3;\n\n  transition: 0.5s width;\n\n  width: 32px;\n}\n\n  .NavBarNotificationButton-module_navBarNotificationButton__20Q0f.NavBarNotificationButton-module_hasCount__1ecR2 {\n    width: 56px;\n  }\n\n  .NavBarNotificationButton-module_navBarNotificationButton__20Q0f.NavBarNotificationButton-module_unread__2AREp {\n    --swui-flat-button-background-color: var(\n      --swui-nav-bar-notification-button-background-color-unread\n    );\n    --swui-flat-button-background-color-hover: var(\n      --swui-nav-bar-notification-button-background-color-unread-hover\n    );\n    --swui-flat-button-background-color-focus: var(\n      --swui-nav-bar-notification-button-background-color-unread-focus\n    );\n    --swui-flat-button-background-color-active: var(\n      --swui-nav-bar-notification-button-background-color-unread-active\n    );\n  }\n\n  .NavBarNotificationButton-module_navBarNotificationButton__20Q0f.NavBarNotificationButton-module_unread__2AREp.NavBarNotificationButton-module_hasCount__1ecR2 .NavBarNotificationButton-module_icon__2hfJP {\n        -webkit-transform-origin: top center;\n                transform-origin: top center;\n        -webkit-animation: NavBarNotificationButton-module_shake__3vEP0 1.5s ease-in-out\n          var(--swui-nav-bar-notification-shake-count);\n                animation: NavBarNotificationButton-module_shake__3vEP0 1.5s ease-in-out\n          var(--swui-nav-bar-notification-shake-count);\n      }\n\n  @-webkit-keyframes NavBarNotificationButton-module_shake__3vEP0 {\n    0% {\n      -webkit-transform: rotate(0);\n              transform: rotate(0);\n    }\n    7% {\n      -webkit-transform: rotate(20deg);\n              transform: rotate(20deg);\n    }\n    15% {\n      -webkit-transform: rotate(-20deg);\n              transform: rotate(-20deg);\n    }\n    22% {\n      -webkit-transform: rotate(16deg);\n              transform: rotate(16deg);\n    }\n    30% {\n      -webkit-transform: rotate(-16deg);\n              transform: rotate(-16deg);\n    }\n    38% {\n      -webkit-transform: rotate(6deg);\n              transform: rotate(6deg);\n    }\n    42% {\n      -webkit-transform: rotate(-6deg);\n              transform: rotate(-6deg);\n    }\n    46% {\n      -webkit-transform: rotate(2deg);\n              transform: rotate(2deg);\n    }\n    100% {\n      -webkit-transform: rotate(0);\n              transform: rotate(0);\n    }\n  }\n\n  @keyframes NavBarNotificationButton-module_shake__3vEP0 {\n    0% {\n      -webkit-transform: rotate(0);\n              transform: rotate(0);\n    }\n    7% {\n      -webkit-transform: rotate(20deg);\n              transform: rotate(20deg);\n    }\n    15% {\n      -webkit-transform: rotate(-20deg);\n              transform: rotate(-20deg);\n    }\n    22% {\n      -webkit-transform: rotate(16deg);\n              transform: rotate(16deg);\n    }\n    30% {\n      -webkit-transform: rotate(-16deg);\n              transform: rotate(-16deg);\n    }\n    38% {\n      -webkit-transform: rotate(6deg);\n              transform: rotate(6deg);\n    }\n    42% {\n      -webkit-transform: rotate(-6deg);\n              transform: rotate(-6deg);\n    }\n    46% {\n      -webkit-transform: rotate(2deg);\n              transform: rotate(2deg);\n    }\n    100% {\n      -webkit-transform: rotate(0);\n              transform: rotate(0);\n    }\n  }\n";
-var styles$7 = {"navBarNotificationButton":"NavBarNotificationButton-module_navBarNotificationButton__20Q0f","hasCount":"NavBarNotificationButton-module_hasCount__1ecR2","unread":"NavBarNotificationButton-module_unread__2AREp","icon":"NavBarNotificationButton-module_icon__2hfJP","shake":"NavBarNotificationButton-module_shake__3vEP0"};
-styleInject(css_248z$8);
-
-var NavBarNotificationButton = function (_a) {
-    var _b, _c;
-    var count = _a.count, _d = _a.unread, unread = _d === void 0 ? false : _d, className = _a.className, labelClassName = _a.labelClassName, iconClassName = _a.iconClassName, _e = _a.icon, icon = _e === void 0 ? faBell : _e, buttonProps = __rest(_a, ["count", "unread", "className", "labelClassName", "iconClassName", "icon"]);
-    var hasCount = count > 0;
-    return (React.createElement(FlatButton, __assign({}, buttonProps, { leftIcon: icon, className: cx((_b = {}, _b[styles$7.unread] = unread, _b), (_c = {}, _c[styles$7.hasCount] = hasCount, _c), styles$7.navBarNotificationButton, className), label: hasCount ? String(count) : undefined, labelClassName: cx(labelClassName, styles$7.label), iconClassName: cx(iconClassName, styles$7.icon) })));
-};
-
-var css_248z$7 = ".NavBarSearchField-module_navBarSearchFieldInput__2kThv {\n  --swui-textinput-line-height: 2.7rem;\n  --swui-textinput-text-color: var(--lhds-color-ui-50);\n}\n\n  .NavBarSearchField-module_navBarSearchFieldInput__2kThv:focus {\n    --swui-textinput-text-color: var(--lhds-color-ui-800);\n  }\n\n.NavBarSearchField-module_navBarSearchField__kIe66 {\n  --swui-textinput-animation-time: var(--swui-animation-time-fast);\n\n  --swui-textinput-placeholder-color: var(--lhds-color-ui-500);\n  --swui-textinput-bg-color: var(--lhds-color-blue-600);\n  --swui-textinput-border-color: transparent;\n  --swui-textinput-border-color-hover: transparent;\n}\n\n.NavBarSearchField-module_navBarSearchField__kIe66:focus-within {\n    --swui-textinput-text-color: var(--lhds-color-ui-800);\n    --swui-field-text-color: var(--swui-field-text-color);\n    --swui-textinput-icon-color: var(--lhds-color-ui-500);\n    --swui-textinput-bg-color: var(--lhds-color-ui-50);\n  }\n";
-var styles$6 = {"navBarSearchFieldInput":"NavBarSearchField-module_navBarSearchFieldInput__2kThv","navBarSearchField":"NavBarSearchField-module_navBarSearchField__kIe66"};
-styleInject(css_248z$7);
-
-var NavBarSearchField = function (_a) {
-    var _b = _a.placeholder, placeholder = _b === void 0 ? "Search..." : _b, className = _a.className, wrapperClassName = _a.wrapperClassName, textInputProps = __rest(_a, ["placeholder", "className", "wrapperClassName"]);
-    return (React.createElement(TextInput, __assign({ wrapperClassName: cx(styles$6.navBarSearchField, wrapperClassName), className: cx(styles$6.navBarSearchFieldInput, className), placeholder: placeholder, contentRight: React.createElement(Clickable, null,
-            React.createElement(Icon, { icon: stenaSearch })) }, textInputProps)));
-};
-
-var css_248z$6 = ".NavBarUserButton-module_navBarUserButton__2iY95 {\n  /* Theme vars */\n  --swui-nav-bar-user-button-text-color: var(--lhds-color-ui-50);\n  --swui-nav-bar-user-button-background-color: var(--lhds-color-blue-700);\n  --swui-nav-bar-user-button-background-color-hover: var(--lhds-color-blue-900);\n  --swui-nav-bar-user-button-background-color-focus: var(--lhds-color-blue-700);\n  --swui-nav-bar-user-button-background-color-active: var(\n    --lhds-color-blue-800\n  );\n\n  /* FlatButton overrides */\n  --swui-flat-button-text-color: var(--swui-nav-bar-user-button-text-color);\n  --swui-flat-button-icon-color: var(--swui-nav-bar-user-button-text-color);\n  --swui-flat-button-text-color-active: var(\n    --swui-nav-bar-user-button-text-color\n  );\n  --swui-flat-button-background-color: var(\n    --swui-nav-bar-user-button-background-color\n  );\n  --swui-flat-button-background-color-hover: var(\n    --swui-nav-bar-user-button-background-color-hover\n  );\n  --swui-flat-button-background-color-focus: var(\n    --swui-nav-bar-user-button-background-color-focus\n  );\n  --swui-flat-button-background-color-active: var(\n    --swui-nav-bar-user-button-background-color-active\n  );\n\n  --swui-button-border-radius: 16px;\n  --swui-button-border-radius-icon-only: 16px;\n}\n\n  .NavBarUserButton-module_navBarUserButton__2iY95.NavBarUserButton-module_initials__1J9z5 {\n    width: 32px;\n  }\n";
-var styles$5 = {"navBarUserButton":"NavBarUserButton-module_navBarUserButton__2iY95","initials":"NavBarUserButton-module_initials__1J9z5"};
-styleInject(css_248z$6);
-
-var NavBarUserButton = function (_a) {
-    var _b;
-    var className = _a.className, username = _a.username, initials = _a.initials; _a.icon; _a.iconClassName; var buttonProps = __rest(_a, ["className", "username", "initials", "icon", "iconClassName"]);
-    return (React.createElement(ActionMenuFlatButton, __assign({}, buttonProps, { className: cx((_b = {}, _b[styles$5.initials] = initials != null, _b), styles$5.navBarUserButton, className), leftIcon: username != null ? faUser : undefined, label: initials !== null && initials !== void 0 ? initials : username, disableArrow: true })));
-};
-
-var defaultNotificationTheme = {
-    notificationBg: "#eaeaea",
-    notificationHoverBg: "#eeeeee",
-    notificationDismissedBg: "#ffffff",
-    notificationDismissedHoverBg: "#f4f4f4",
-};
-
-var Notification = function (_a) {
-    var onClick = _a.onClick, icon = _a.icon, iconColor = _a.iconColor, title = _a.title, text = _a.text, content = _a.content, date = _a.date, dismissed = _a.dismissed, _b = _a.theme, theme = _b === void 0 ? defaultNotificationTheme : _b;
-    var agoLabel = useMemo(function () {
-        if (date) {
-            return "".concat(formatDistance(date, new Date()), " ago");
-        }
-        return undefined;
-    }, [date]);
-    return (React.createElement(Clickable, { onClick: onClick, style: { textAlign: "left" } },
-        React.createElement(Box, { background: dismissed ? theme.notificationDismissedBg : theme.notificationBg, hoverBackground: dismissed
-                ? theme.notificationDismissedHoverBg
-                : theme.notificationHoverBg, spacing: true, indent: true },
-            React.createElement(Row, { width: "250px" },
-                icon && (React.createElement(Row, { width: "34px", alignItems: "center" },
-                    React.createElement(Icon, { icon: icon, color: iconColor }))),
-                React.createElement(Column, { flex: 1 },
-                    title && (React.createElement(React.Fragment, null,
-                        React.createElement(Text, null, title),
-                        React.createElement(Space, { half: true }))),
-                    text && (React.createElement(React.Fragment, null,
-                        React.createElement(Text, { size: "small" }, text),
-                        React.createElement(Space, { half: true }))),
-                    content && (React.createElement(React.Fragment, null,
-                        content,
-                        React.createElement(Space, { half: true }))),
-                    React.createElement(Text, { size: "small", color: cssColor("--swui-text-disabled-color") }, agoLabel))))));
-};
-
-var css_248z$5 = ".Collapsible-module_collapsible__2Nn8K {\n  --swui-collapsible-animation-time: var(--swui-animation-time-fast);\n\n  --swui-collapsible-expanded-line-background-color: var(\n    --swui-primary-action-color\n  );\n\n  /*\n   * Header\n   */\n  --swui-collapsible-header-text-color: var(--lhds-color-ui-900);\n  --swui-collapsible-header-background-color: var(--swui-white);\n  --swui-collapsible-header-background-color-hover: var(--lhds-color-blue-100);\n  --swui-collapsible-header-background-color-active: var(--lhds-color-blue-100);\n  --swui-collapsible-header-border-color: var(--lhds-color-ui-300);\n  --swui-collapsible-header-border-color-focus: var(\n    --swui-primary-action-color\n  );\n  --swui-collapsible-header-focus-shadow: var(--swui-field-focus-shadow);\n  --swui-collapsible-header-content-margin: calc(\n    var(--swui-metrics-indent) * 2\n  );\n  --swui-collapsible-header-font-weight: var(--swui-font-weight-text-bold);\n  --swui-collapsible-header-indicator-color: var(--swui-primary-action-color);\n  --swui-collapsible-header-indicator-color-collapsed: var(--lhds-color-ui-500);\n  --swui-collapsible-header-indicator-color-hover: var(\n    --swui-primary-action-color\n  );\n  --swui-collapsible-header-padding: 0 calc(var(--swui-metrics-indent) * 2) 0;\n\n  /*\n   * Content\n   */\n  --swui-collapsible-content-background-color: var(--lhds-color-ui-100);\n  --swui-collapsible-content-border-color: var(--lhds-color-ui-300);\n  --swui-collapsible-content-padding: var(--swui-metrics-indent)\n    calc(var(--swui-metrics-indent) * 2);\n\n  --swui-collapsible-groupheading-font-size: var(--swui-font-size-smaller);\n  --swui-collapsible-groupheading-text-color: var(--lhds-color-ui-600);\n\n  --swui-collapsible-min-height: 40px;\n}\n\n  /* Header */\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_header__IZx0y {\n    background-color: var(--swui-collapsible-header-background-color);\n    width: 100%;\n    text-align: left;\n\n    min-height: var(--swui-collapsible-min-height);\n    box-sizing: border-box;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-bottom: 1px solid var(--swui-collapsible-header-border-color);\n    padding: var(--swui-collapsible-header-padding);\n  }\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_header__IZx0y .Collapsible-module_indicator__3YBhK {\n      transition: all var(--swui-collapsible-animation-time) ease-in-out;\n      margin-left: var(--swui-collapsible-header-content-margin);\n      color: var(--swui-collapsible-header-indicator-color);\n    }\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_header__IZx0y:not(:disabled):hover:not(:active) {\n        background-color: var(--swui-collapsible-header-background-color-hover);\n      }\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_header__IZx0y:not(:disabled):hover:not(:active) .Collapsible-module_indicator__3YBhK {\n          color: var(--swui-collapsible-header-indicator-color-hover);\n        }\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_header__IZx0y:focus-visible {\n      outline: 1px solid var(--swui-collapsible-header-border-color-focus);\n      outline-offset: -1px;\n      box-shadow: var(--swui-collapsible-header-focus-shadow);\n    }\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_header__IZx0y:active {\n      background: var(--swui-collapsible-header-background-color-active);\n    }\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_header__IZx0y:disabled {\n      cursor: not-allowed;\n    }\n\n  .Collapsible-module_collapsible__2Nn8K {\n\n  position: relative;\n}\n\n  .Collapsible-module_collapsible__2Nn8K::before {\n    content: \"\";\n    position: absolute;\n    width: 2px;\n    background: var(--swui-collapsible-expanded-line-background-color);\n    top: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 1;\n  }\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_headerText__2qjzx {\n    font-weight: var(--swui-collapsible-header-font-weight);\n  }\n\n  .Collapsible-module_collapsible__2Nn8K[aria-expanded=\"false\"] {\n    --swui-collapsible-expanded-line-background-color: transparent;\n  }\n\n  .Collapsible-module_collapsible__2Nn8K[aria-expanded=\"false\"] .Collapsible-module_indicator__3YBhK {\n      color: var(--swui-collapsible-header-indicator-color-collapsed);\n    }\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_label__Hpp-R {\n    margin-right: auto;\n  }\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_label__Hpp-R span {\n      --current-line-height: 1;\n      font-weight: var(--swui-collapsible-header-font-weight);\n    }\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentLeft__2gPpu,\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentRight__bTr59 {\n    display: flex;\n  }\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentLeft__2gPpu button, .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentRight__bTr59 button {\n      cursor: pointer;\n    }\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentLeft__2gPpu {\n    margin-right: var(--swui-collapsible-header-content-margin);\n  }\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentRight__bTr59 {\n    margin-left: auto;\n  }\n\n  /* Content */\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_content__1e1C8 {\n    display: flex;\n    align-items: center;\n    justify-content: stretch;\n    background: var(--swui-collapsible-content-background-color);\n    padding: var(--swui-collapsible-content-padding);\n    min-height: var(--swui-collapsible-min-height);\n    box-sizing: border-box;\n  }\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_content__1e1C8:last-child {\n      border-bottom: 1px solid var(--swui-collapsible-content-border-color);\n    }\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_content__1e1C8.Collapsible-module_groupHeading__3BK-5 {\n      border: none;\n      font-size: var(--swui-collapsible-groupheading-font-size);\n      font-family: var(--swui-font-primary);\n      color: var(--swui-collapsible-groupheading-text-color);\n      text-transform: uppercase;\n      font-weight: var(--swui-font-weight-text-bold);\n      letter-spacing: 0.1rem;\n    }\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_content__1e1C8 [data-hidden=\"true\"] {\n      display: none;\n    }\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_content__1e1C8:hover [data-hidden=\"true\"] {\n        display: inherit;\n      }\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_content__1e1C8:hover [data-hover=\"true\"] {\n        color: var(--swui-collapsible-header-indicator-color-hover);\n      }\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentEnter__GWHoW {\n    opacity: 0;\n  }\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentEnterActive__1YdNi {\n    opacity: 1;\n    transition: opacity var(--swui-collapsible-animation-time) ease-in-out;\n  }\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentExitDone__35Iht {\n    display: none;\n  }\n\n  /** Clickable content */\n\n  .Collapsible-module_collapsible__2Nn8K button.Collapsible-module_content__1e1C8 {\n    font-family: var(--swui-font-primary);\n    font-size: inherit;\n    width: 100%;\n    text-align: left;\n  }\n\n  .Collapsible-module_collapsible__2Nn8K button.Collapsible-module_content__1e1C8:focus-visible {\n      outline: 1px solid var(--swui-collapsible-header-border-color-focus);\n      outline-offset: -1px;\n      box-shadow: var(--swui-collapsible-header-focus-shadow);\n    }\n\n  .Collapsible-module_collapsible__2Nn8K button.Collapsible-module_content__1e1C8:not(:disabled):hover {\n      background-color: var(--swui-collapsible-header-background-color-hover);\n    }\n\n  .Collapsible-module_collapsible__2Nn8K button.Collapsible-module_content__1e1C8:disabled {\n      cursor: not-allowed;\n    }\n\n  .Collapsible-module_collapsible__2Nn8K button.Collapsible-module_content__1e1C8:focus-within [data-hidden=\"true\"] {\n        display: inherit;\n      }\n\n  /* Remove header background color if not at the highest level */\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K {\n    --swui-collapsible-header-background-color: var(\n      --swui-collapsible-content-background-color\n    );\n    --swui-collapsible-header-font-weight: normal;\n  }\n\n  /* Increase padding with depth */\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K {\n    --swui-collapsible-content-padding: var(--swui-metrics-indent)\n      calc(var(--swui-metrics-indent) * 2) var(--swui-metrics-indent)\n      calc(var(--swui-metrics-indent) * 4);\n  }\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K {\n    --swui-collapsible-header-padding: 0 calc(var(--swui-metrics-indent) * 2) 0\n      calc(var(--swui-metrics-indent) * 4);\n    --swui-collapsible-content-padding: var(--swui-metrics-indent)\n      calc(var(--swui-metrics-indent) * 2) var(--swui-metrics-indent)\n      calc(var(--swui-metrics-indent) * 6);\n  }\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K {\n    --swui-collapsible-header-padding: 0 calc(var(--swui-metrics-indent) * 2) 0\n      calc(var(--swui-metrics-indent) * 6);\n    --swui-collapsible-content-padding: var(--swui-metrics-indent)\n      calc(var(--swui-metrics-indent) * 2) var(--swui-metrics-indent)\n      calc(var(--swui-metrics-indent) * 8);\n  }\n\n  .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K {\n    --swui-collapsible-header-padding: 0 calc(var(--swui-metrics-indent) * 2) 0\n      calc(var(--swui-metrics-indent) * 8);\n    --swui-collapsible-content-padding: var(--swui-metrics-indent)\n      calc(var(--swui-metrics-indent) * 2) var(--swui-metrics-indent)\n      calc(var(--swui-metrics-indent) * 10);\n  }\n";
-var styles$4 = {"collapsible":"Collapsible-module_collapsible__2Nn8K","header":"Collapsible-module_header__IZx0y","indicator":"Collapsible-module_indicator__3YBhK","headerText":"Collapsible-module_headerText__2qjzx","label":"Collapsible-module_label__Hpp-R","contentLeft":"Collapsible-module_contentLeft__2gPpu","contentRight":"Collapsible-module_contentRight__bTr59","content":"Collapsible-module_content__1e1C8","groupHeading":"Collapsible-module_groupHeading__3BK-5","contentEnter":"Collapsible-module_contentEnter__GWHoW","contentEnterActive":"Collapsible-module_contentEnterActive__1YdNi","contentExitDone":"Collapsible-module_contentExitDone__35Iht"};
-styleInject(css_248z$5);
-
-var CollapsibleEmptyContent = function () {
-    return (React.createElement(Column, { indent: true, spacing: true, flex: 1, alignItems: "center" },
-        React.createElement(Icon, { icon: faInbox, color: cssColor("--lhds-color-ui-500") }),
-        React.createElement(Space, null),
-        React.createElement(Text, { size: "small", color: cssColor("--lhds-color-ui-500") }, "No content")));
-};
-
-var CollapsibleContent = function (_a) {
-    var contentLeft = _a.contentLeft, contentRight = _a.contentRight, className = _a.className, children = _a.children, props = __rest(_a, ["contentLeft", "contentRight", "className", "children"]);
-    return (React.createElement("div", __assign({ className: cx(styles$4.content, className) }, props),
-        contentLeft && React.createElement("div", { className: styles$4.contentLeft }, contentLeft), children !== null && children !== void 0 ? children : React.createElement(CollapsibleEmptyContent, null),
-        contentRight && (React.createElement("div", { className: styles$4.contentRight }, contentRight))));
-};
-
-var mapCSSTime = function (value) {
-    var num = parseFloat(value);
-    var match = value.match(/m?s/);
-    switch (match === null || match === void 0 ? void 0 : match[0]) {
-        case "s":
-            return num * 1000;
-        case "ms":
-            return num;
-        default:
-            return 0;
-    }
-};
-var Collapsible = forwardRef(function Collapsible(_a, ref) {
-    var label = _a.label, contentLeft = _a.contentLeft, contentRight = _a.contentRight, _b = _a.collapsed, collapsed = _b === void 0 ? false : _b, onClick = _a.onClick, className = _a.className, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.unmountOnCollapse, unmountOnCollapse = _d === void 0 ? false : _d, _e = _a.mountOnEnter, mountOnEnter = _e === void 0 ? true : _e, _f = _a.icon, icon = _f === void 0 ? faChevronUp : _f, _g = _a.iconCollapsed, iconCollapsed = _g === void 0 ? faChevronDown : _g, _h = _a.iconSize, iconSize = _h === void 0 ? 8 : _h, children = _a.children, _j = _a.autoFocus, autoFocus = _j === void 0 ? false : _j, divProps = __rest(_a, ["label", "contentLeft", "contentRight", "collapsed", "onClick", "className", "disabled", "unmountOnCollapse", "mountOnEnter", "icon", "iconCollapsed", "iconSize", "children", "autoFocus"]);
-    var divRef = React.useRef(null);
-    var timeout = divRef.current
-        ? mapCSSTime(getComputedStyle(divRef.current).getPropertyValue("--swui-collapsible-animation-time"))
-        : undefined;
-    return (React.createElement("div", __assign({ className: cx(styles$4.collapsible, className), "aria-expanded": !collapsed, ref: divRef }, divProps),
-        React.createElement(Clickable, { disableFocusHighlight: true, disableOpacityOnClick: true, className: styles$4.header, onClick: onClick, disabled: disabled, autoFocus: autoFocus, ref: ref },
-            contentLeft && (React.createElement("div", { className: styles$4.contentLeft }, contentLeft)),
-            React.createElement("div", { className: styles$4.label },
-                React.createElement(Text, { color: "var(--swui-collapsible-header-text-color)", className: styles$4.headerText }, label)),
-            contentRight && (React.createElement("div", { className: styles$4.contentRight }, contentRight)),
-            React.createElement(Icon, { icon: collapsed ? iconCollapsed : icon, className: styles$4.indicator, size: iconSize, fixedWidth: true })),
-        React.createElement(CSSTransition, { in: !collapsed, timeout: {
-                enter: timeout,
-            }, classNames: {
-                enter: styles$4.contentEnter,
-                enterActive: styles$4.contentEnterActive,
-                exit: styles$4.contentExit,
-                exitActive: styles$4.contentExitActive,
-                exitDone: styles$4.contentExitDone,
-            }, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnCollapse },
-            React.createElement("div", { role: "region" }, children !== null && children !== void 0 ? children : (React.createElement(CollapsibleContent, null,
-                React.createElement(CollapsibleEmptyContent, null)))))));
+const variantToSpacing = {
+  compact: 1,
+  standard: 1.5,
+  relaxed: 2
+};
+const PageHeading = ({
+  heading,
+  variant = "standard",
+  contentLeft: contentLeft2,
+  contentRight: contentRight2
+}) => /* @__PURE__ */ jsxs(Row, {
+  spacing: variantToSpacing[variant],
+  alignItems: "center",
+  gap: 2,
+  children: [/* @__PURE__ */ jsx(Heading, {
+    variant: "h3",
+    children: heading
+  }), /* @__PURE__ */ jsx(Row, {
+    alignItems: "center",
+    children: contentLeft2
+  }), /* @__PURE__ */ jsx(Row, {
+    style: {
+      marginLeft: "auto"
+    },
+    alignItems: "center",
+    children: contentRight2
+  })]
+});
+const sidebarMenu = "_sidebarMenu_hch18_1";
+var styles$3 = {
+  sidebarMenu
+};
+const sidebarMenuCloseButton = "_sidebarMenuCloseButton_1j21u_1";
+const iconWrapper = "_iconWrapper_1j21u_55";
+const icon$1 = "_icon_1j21u_55";
+var styles$2 = {
+  sidebarMenuCloseButton,
+  iconWrapper,
+  icon: icon$1
+};
+const SvgClose = (props) => /* @__PURE__ */ React.createElement("svg", {
+  width: "16px",
+  height: "16px",
+  viewBox: "0 0 16 16",
+  xmlns: "http://www.w3.org/2000/svg",
+  ...props
+}, /* @__PURE__ */ React.createElement("path", {
+  d: "M0.928932188,0.928932188 C1.31945648,0.538407896 1.95262146,0.538407896 2.34314575,0.928932188 L2.34314575,0.928932188 L8.00003897,6.58503897 L13.6568542,0.928932188 C14.0473785,0.538407896 14.6805435,0.538407896 15.0710678,0.928932188 C15.4615921,1.31945648 15.4615921,1.95262146 15.0710678,2.34314575 L9.41503897,8.00003897 L15.0710678,13.6568542 C15.4315518,14.0173382 15.4592813,14.5845693 15.1542564,14.9768605 L15.0710678,15.0710678 C14.6805435,15.4615921 14.0473785,15.4615921 13.6568542,15.0710678 L13.6568542,15.0710678 L8.00003897,9.41503897 L2.34314575,15.0710678 C1.95262146,15.4615921 1.31945648,15.4615921 0.928932188,15.0710678 C0.538407896,14.6805435 0.538407896,14.0473785 0.928932188,13.6568542 L6.58503897,8.00003897 L0.928932188,2.34314575 C0.568448227,1.98266179 0.540718691,1.41543073 0.845743582,1.02313953 Z",
+  id: "Combined-Shape",
+  fill: "#FFFFFF"
+}));
+const SidebarMenuCloseButton = ({
+  className,
+  onClick
+}) => {
+  return /* @__PURE__ */ jsx("button", {
+    onClick,
+    className: cx(styles$2.sidebarMenuCloseButton, className),
+    children: /* @__PURE__ */ jsx(Box, {
+      className: styles$2.iconWrapper,
+      children: /* @__PURE__ */ jsx(SvgClose, {
+        className: styles$2.icon
+      })
+    })
+  });
+};
+const SidebarMenuSeparator = (separatorLineProps) => /* @__PURE__ */ jsx(SeparatorLine, {
+  color: cssColor("--lhds-color-blue-600"),
+  ...separatorLineProps
 });
-
-var CollapsibleWithCheckbox = function (_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, onChange = _a.onChange, indeterminate = _a.indeterminate, collapsibleProps = __rest(_a, ["value", "onValueChange", "onChange", "indeterminate"]);
-    return (React.createElement(Collapsible, __assign({ contentLeft: React.createElement(Checkbox, { value: value, indeterminate: indeterminate, onValueChange: onValueChange, onChange: onChange, onClick: function (ev) { return ev.stopPropagation(); } }) }, collapsibleProps)));
-};
-
-var CollapsibleClickableContent = function (_a) {
-    var contentLeft = _a.contentLeft, contentRight = _a.contentRight, className = _a.className, onClick = _a.onClick, children = _a.children, props = __rest(_a, ["contentLeft", "contentRight", "className", "onClick", "children"]);
-    return (React.createElement(Clickable, __assign({ disableFocusHighlight: true, disableOpacityOnClick: true, className: cx(styles$4.content, className), onClick: onClick }, props),
-        contentLeft && React.createElement("div", { className: styles$4.contentLeft }, contentLeft), children !== null && children !== void 0 ? children : React.createElement(CollapsibleEmptyContent, null),
-        contentRight && (React.createElement("div", { className: styles$4.contentRight }, contentRight))));
-};
-
-var CollapsibleGroupHeading = function (_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (React.createElement(CollapsibleContent, __assign({ className: cx(styles$4.groupHeading, className) }, props)));
-};
-
-var ErrorPanel = function (_a) {
-    var _b = _a.text, text = _b === void 0 ? "Something unexpected happened." : _b;
-    return (React.createElement(Box, { justifyContent: "center", alignItems: "center" },
-        React.createElement(Banner, { variant: "error", headerText: text })));
-};
-
-var ErrorScreen = function (props) {
-    return (React.createElement(Box, { width: "100%", height: "100%", justifyContent: "center", alignItems: "center" },
-        React.createElement(ErrorPanel, __assign({}, props))));
-};
-
-var LoadingPanel = function (_a) {
-    var _b = _a.text, text = _b === void 0 ? "Loading..." : _b;
-    return (React.createElement(Box, { alignItems: "center" },
-        React.createElement(Spinner, { size: "small" }),
-        React.createElement(Space, { num: 4 }),
-        React.createElement(Heading, { variant: "h4" }, text)));
-};
-
-var LoadingScreen = function (props) {
-    return (React.createElement(Box, { width: "100%", height: "100%", justifyContent: "center", alignItems: "center" },
-        React.createElement(LoadingPanel, __assign({}, props))));
-};
-
-var PageHeader = function (_a) {
-    var renderBreadCrumbs = _a.renderBreadCrumbs, renderPageHeading = _a.renderPageHeading, renderTabs = _a.renderTabs, children = _a.children;
-    return (React.createElement(Box, { shadow: "box" },
-        React.createElement(Box, { indent: 3 },
-            renderBreadCrumbs && React.createElement(Row, { spacing: 1.25 }, renderBreadCrumbs()), renderPageHeading === null || renderPageHeading === void 0 ? void 0 :
-            renderPageHeading(), renderTabs === null || renderTabs === void 0 ? void 0 :
-            renderTabs()),
-        children && (React.createElement(React.Fragment, null,
-            !renderTabs && React.createElement(Space, null),
-            React.createElement(SeparatorLine, null),
-            children))));
-};
-
-var PageHeaderRow = function (props) { return (React.createElement(Row, __assign({ indent: 3, spacing: true }, props))); };
-
-var variantToSpacing = {
-    compact: 1,
-    standard: 1.5,
-    relaxed: 2,
-};
-var PageHeading = function (_a) {
-    var heading = _a.heading, _b = _a.variant, variant = _b === void 0 ? "standard" : _b, contentLeft = _a.contentLeft, contentRight = _a.contentRight;
-    return (React.createElement(Row, { spacing: variantToSpacing[variant], alignItems: "center", gap: 2 },
-        React.createElement(Heading, { variant: "h3" }, heading),
-        React.createElement(Row, { alignItems: "center" }, contentLeft),
-        React.createElement(Row, { style: { marginLeft: "auto" }, alignItems: "center" }, contentRight)));
-};
-
-var css_248z$4 = ".SidebarMenu-module_sidebarMenu__3IOkS {\n  /* Theme vars */\n  --swui-sidebar-menu-separator-color: var(--lhds-color-blue-700);\n  --swui-sidebar-menu-text-color: var(--swui-white);\n  --swui-sidebar-menu-icon-color: var(--swui-white);\n  --swui-sidebar-menu-background-color: var(--lhds-color-blue-500);\n  --swui-sidebar-menu-background-color-hover: var(--lhds-color-blue-700);\n  --swui-sidebar-menu-background-color-focus: var(--lhds-color-blue-700);\n  --swui-sidebar-menu-background-color-active: var(--lhds-color-blue-600);\n  --swui-sidebar-menu-item-selected: var(--lhds-color-blue-800);\n  --swui-sidebar-menu-content-padding: var(--swui-metrics-indent)\n    var(--swui-metrics-indent) var(--swui-metrics-indent) 0;\n\n  /* State vars */\n  --current-separator-color: var(--swui-sidebar-menu-separator-color);\n  --current-text-color: var(--swui-sidebar-menu-text-color);\n  --current-icon-color: var(--swui-sidebar-menu-icon-color);\n  --current-background-color: var(--swui-sidebar-menu-background-color);\n  --current-background-color-hover: var(\n    --swui-sidebar-menu-background-color-hover\n  );\n  --current-background-color-focus: var(\n    --swui-sidebar-menu-background-color-focus\n  );\n  --current-background-color-active: var(\n    --swui-sidebar-menu-background-color-active\n  );\n  --current-item-selected: var(--swui-sidebar-menu-item-selected);\n  --current-content-padding: var(--swui-sidebar-menu-content-padding);\n\n  /* Styling */\n\n  background-color: var(--current-background-color);\n  height: 100vh;\n}\n\n  .SidebarMenu-module_sidebarMenu__3IOkS[data-collapsed] {\n    width: var(--swui-sidebar-menu-item-height);\n  }\n\n  .SidebarMenu-module_sidebarMenu__3IOkS button {\n    --swui-button-text-color: var(--swui-white);\n    --swui-button-background-color-hover: var(\n      --swui-sidebar-menu-background-color-hover\n    );\n  }\n";
-var styles$3 = {"sidebarMenu":"SidebarMenu-module_sidebarMenu__3IOkS"};
-styleInject(css_248z$4);
-
-var css_248z$3 = ".SidebarMenuCloseButton-module_sidebarMenuCloseButton__1h_pt {\n  /* Theme vars */\n  --swui-sidebar-menu-close-button-text-color: var(--lhds-color-ui-50);\n  --swui-sidebar-menu-close-button-background-color: var(--lhds-color-blue-500);\n  --swui-sidebar-menu-close-button-background-color-hover: var(\n    --lhds-color-blue-600\n  );\n  --swui-sidebar-menu-close-button-background-color-focus: var(\n    --lhds-color-blue-600\n  );\n  --swui-sidebar-menu-close-button-background-color-active: var(\n    --lhds-color-blue-500\n  );\n\n  /* Current */\n  --current-background-color: var(\n    --swui-sidebar-menu-close-button-background-color\n  );\n\n  /* Styling */\n\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  line-height: 10px;\n  background-color: var(--current-background-color);\n  color: var(--swui-sidebar-menu-close-button-text-color);\n  cursor: pointer;\n  height: var(--swui-sidebar-menu-item-height);\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n  border-radius: 0;\n  outline: none;\n  border: none;\n}\n\n  .SidebarMenuCloseButton-module_sidebarMenuCloseButton__1h_pt:hover {\n    --current-background-color: var(\n      --swui-sidebar-menu-close-button-background-color-hover\n    );\n  }\n\n  .SidebarMenuCloseButton-module_sidebarMenuCloseButton__1h_pt:focus {\n    --current-background-color: var(\n      --swui-sidebar-menu-close-button-background-color-focus\n    );\n  }\n\n  .SidebarMenuCloseButton-module_sidebarMenuCloseButton__1h_pt:active {\n    --current-background-color: var(\n      --swui-sidebar-menu-close-button-background-color-active\n    );\n  }\n\n  .SidebarMenuCloseButton-module_sidebarMenuCloseButton__1h_pt .SidebarMenuCloseButton-module_iconWrapper__2nLkY {\n    justify-content: center;\n    align-items: center;\n    width: var(--swui-sidebar-menu-item-height);\n    height: var(--swui-sidebar-menu-item-height);\n  }\n\n  .SidebarMenuCloseButton-module_sidebarMenuCloseButton__1h_pt .SidebarMenuCloseButton-module_icon__1lPJE {\n    color: var(--swui-sidebar-menu-close-button-text-color);\n  }\n";
-var styles$2 = {"sidebarMenuCloseButton":"SidebarMenuCloseButton-module_sidebarMenuCloseButton__1h_pt","iconWrapper":"SidebarMenuCloseButton-module_iconWrapper__2nLkY","icon":"SidebarMenuCloseButton-module_icon__1lPJE"};
-styleInject(css_248z$3);
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-var _ref = /*#__PURE__*/React.createElement("path", {
-  d: "M.929.929a1 1 0 011.414 0L8 6.585 13.657.929a1 1 0 011.414 1.414L9.415 8l5.656 5.657a1 1 0 01.083 1.32l-.083.094a1 1 0 01-1.414 0L8 9.415l-5.657 5.656A1 1 0 11.93 13.657L6.585 8 .929 2.343a1 1 0 01-.083-1.32z",
-  fill: "#FFF"
+const SidebarMenu = ({
+  className,
+  children,
+  onCloseClick,
+  collapsed = false,
+  hideCloseButton = false,
+  variant = "standard",
+  ...boxProps
+}) => {
+  const height = getNavbarHeight(variant);
+  return /* @__PURE__ */ jsxs(Box, {
+    className: cx(styles$3.sidebarMenu, collapsed ? styles$3.collapsed : null, className),
+    style: {
+      ["--swui-sidebar-menu-item-height"]: height,
+      ["--swui-nav-bar-height"]: height
+    },
+    "data-collapsed": collapsed || void 0,
+    ...boxProps,
+    children: [!hideCloseButton && /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx(SidebarMenuCloseButton, {
+        onClick: onCloseClick
+      }), /* @__PURE__ */ jsx(SidebarMenuSeparator, {}), /* @__PURE__ */ jsx(Space, {})]
+    }), /* @__PURE__ */ jsx(Box, {
+      className: styles$3.sidebarMenuContent,
+      height: "100%",
+      background: "var(--current-background-color)",
+      children: /* @__PURE__ */ jsx(Column, {
+        flex: 1,
+        children
+      })
+    })]
+  });
+};
+const SidebarRailMenu = ({
+  variant,
+  onClickMenuButton,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs(SidebarMenu, {
+    collapsed: true,
+    position: "fixed",
+    left: 0,
+    top: 0,
+    hideCloseButton: true,
+    variant,
+    children: [/* @__PURE__ */ jsx(NavBarSideMenuButton, {
+      onClick: onClickMenuButton
+    }), children]
+  });
+};
+const label = "_label_mnp0f_1";
+const icon = "_icon_mnp0f_9";
+const spinner = "_spinner_mnp0f_14";
+const leftWrapper = "_leftWrapper_mnp0f_18";
+const button = "_button_mnp0f_23";
+const selected = "_selected_mnp0f_45";
+var contentStyles = {
+  label,
+  icon,
+  spinner,
+  leftWrapper,
+  button,
+  selected
+};
+const defaultRenderLink = ({
+  activeClassName,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx("button", {
+    ...props
+  });
+};
+const SidebarMenuLink = ({
+  className,
+  children,
+  selected: selected2,
+  indent,
+  label: label2,
+  loading,
+  left,
+  leftIcon,
+  right,
+  rightIcon,
+  success,
+  width,
+  renderLink = defaultRenderLink,
+  style,
+  ...buttonProps
+}) => {
+  const hasContentLeft = left || leftIcon || loading || success;
+  const innerClassName = cx(contentStyles.button, selected2 ? contentStyles.selected : void 0, className);
+  const innerStyle = {
+    ...style,
+    width,
+    height: "var(--swui-sidebar-menu-item-height)"
+  };
+  const innerChildren = /* @__PURE__ */ jsxs(Row, {
+    spacing: 1,
+    flex: 1,
+    alignItems: "center",
+    children: [!hasContentLeft && /* @__PURE__ */ jsx(Indent, {}), indent && /* @__PURE__ */ jsx(Indent, {
+      num: 3.5
+    }), /* @__PURE__ */ jsx(ButtonContent, {
+      label: label2,
+      loading,
+      left,
+      leftIcon,
+      right,
+      rightIcon,
+      success,
+      labelClassName: contentStyles.label,
+      spinnerClassName: contentStyles.spinner,
+      iconClassName: cx(contentStyles.icon),
+      leftWrapperClassName: contentStyles.leftWrapper
+    })]
+  });
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: renderLink({
+      ...buttonProps,
+      activeClassName: contentStyles.selected,
+      className: innerClassName,
+      children: innerChildren,
+      style: innerStyle
+    })
+  });
+};
+const sidebarMenuHeading = "_sidebarMenuHeading_kvpq5_1";
+var styles$1 = {
+  sidebarMenuHeading
+};
+const SidebarMenuHeading = ({
+  className,
+  label: label2,
+  contentLeft: contentLeft2,
+  contentRight: contentRight2,
+  ...textProps
+}) => {
+  return /* @__PURE__ */ jsx(Box, {
+    spacing: 2,
+    indent: 2,
+    children: /* @__PURE__ */ jsx(CollapsibleContent, {
+      className: styles$1.sidebarMenuHeading,
+      contentLeft: contentLeft2,
+      contentRight: contentRight2,
+      children: /* @__PURE__ */ jsx(Text, {
+        variant: "overline",
+        color: "var(--swui-sidebar-menu-heading-text-color)",
+        ...textProps,
+        children: label2
+      })
+    })
+  });
+};
+const sidebarMenuCollapsible = "_sidebarMenuCollapsible_1jwhs_1";
+var styles = {
+  sidebarMenuCollapsible
+};
+const SidebarMenuCollapsible = ({
+  children,
+  label: label2,
+  leftIcon
+}) => {
+  const [collapsed, setCollapsed] = useState(false);
+  return /* @__PURE__ */ jsx(Box, {
+    background: "var(--current-background-color)",
+    children: /* @__PURE__ */ jsx(Collapsible, {
+      className: styles.sidebarMenuCollapsible,
+      label: label2,
+      collapsed,
+      onClick: () => setCollapsed(!collapsed),
+      contentLeft: leftIcon ? /* @__PURE__ */ jsx(Box, {
+        width: "var(--swui-sidebar-menu-item-height)",
+        alignItems: "center",
+        justifyContent: "center",
+        children: /* @__PURE__ */ jsx(Icon, {
+          icon: leftIcon,
+          size: 16,
+          color: "var(--current-text-color)",
+          "data-hover": true
+        })
+      }) : /* @__PURE__ */ jsx(Indent, {
+        num: 1
+      }),
+      children: /* @__PURE__ */ jsx(Column, {
+        flex: 1,
+        children
+      })
+    })
+  });
+};
+const renderItemsExpanded = (items, indent = false) => {
+  return items.map((item, index) => {
+    switch (item.type) {
+      case "heading":
+        return /* @__PURE__ */ jsx(SidebarMenuHeading, {
+          label: item.label
+        }, index);
+      case "separator":
+        return /* @__PURE__ */ jsx(SidebarMenuSeparator, {}, index);
+      case "link": {
+        const {
+          type,
+          ...linkProps
+        } = item;
+        return /* @__PURE__ */ jsx(SidebarMenuLink, {
+          indent,
+          ...linkProps
+        }, index);
+      }
+      case "grouped":
+        return /* @__PURE__ */ jsx(SidebarMenuCollapsible, {
+          leftIcon: item.leftIcon,
+          label: item.label,
+          children: renderItemsExpanded(item.items, true)
+        }, index);
+      default:
+        return exhaustSwitchCaseElseThrow(item);
+    }
+  });
+};
+const renderItemsInRail = (items, {
+  popupMinWidth
+}) => {
+  return items.map((item, index) => {
+    switch (item.type) {
+      case "heading":
+        return null;
+      case "separator":
+        return /* @__PURE__ */ jsx(SidebarMenuSeparator, {}, index);
+      case "link": {
+        const {
+          type,
+          label: label2,
+          ...linkProps
+        } = item;
+        return /* @__PURE__ */ jsx(SidebarMenuLink, {
+          title: label2,
+          width: "var(--swui-sidebar-menu-item-height)",
+          ...linkProps
+        }, index);
+      }
+      case "grouped":
+        return /* @__PURE__ */ jsx("div", {
+          children: /* @__PURE__ */ jsx(Popover, {
+            appendTo: "parent",
+            arrow: false,
+            offset: [0, 0],
+            placement: "right-start",
+            trigger: "focusin mouseenter click",
+            disablePadding: true,
+            lazy: true,
+            content: /* @__PURE__ */ jsxs(Box, {
+              minWidth: popupMinWidth,
+              background: "var(--lhds-color-blue-500)",
+              children: [/* @__PURE__ */ jsx(SidebarMenuHeading, {
+                label: item.label
+              }), renderItemsExpanded(item.items)]
+            }),
+            children: /* @__PURE__ */ jsx(SidebarMenuLink, {
+              title: item.label,
+              width: "var(--swui-sidebar-menu-item-height)",
+              leftIcon: item.leftIcon
+            })
+          })
+        }, index);
+      default:
+        return exhaustSwitchCaseElseThrow(item);
+    }
+  });
+};
+const borderTop = `1px solid ${cssColor("--lhds-color-orange-400")}`;
+const SelectedItemsActionsPanel = ({
+  numItemsSelected,
+  label: label2,
+  afterLabelContent,
+  rightContent
+}) => /* @__PURE__ */ jsxs(Row, {
+  indent: 3,
+  spacing: true,
+  minHeight: "56px",
+  justifyContent: "space-between",
+  alignItems: "center",
+  borderTop,
+  background: cssColor("--lhds-color-orange-50"),
+  children: [/* @__PURE__ */ jsxs(Row, {
+    alignItems: "center",
+    children: [numItemsSelected != null || label2 != null ? /* @__PURE__ */ jsx(Fragment, {
+      children: numItemsSelected != null ? /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(Text, {
+          variant: "bold",
+          children: numItemsSelected
+        }), /* @__PURE__ */ jsx(Space, {}), /* @__PURE__ */ jsxs(Text, {
+          children: ["item", numItemsSelected === 1 ? "" : "s", " selected"]
+        })]
+      }) : label2 != null ? /* @__PURE__ */ jsx(Fragment, {
+        children: typeof label2 === "string" ? /* @__PURE__ */ jsx(Text, {
+          children: label2
+        }) : label2
+      }) : null
+    }) : null, afterLabelContent ? /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx(Indent, {}), /* @__PURE__ */ jsx(Box, {
+        children: afterLabelContent
+      })]
+    }) : null]
+  }), /* @__PURE__ */ jsx(Box, {
+    children: rightContent
+  })]
 });
-
-function SvgClose(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    width: 16,
-    height: 16,
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _ref);
-}
-
-var SidebarMenuCloseButton = function (_a) {
-    var className = _a.className, onClick = _a.onClick;
-    return (React.createElement("button", { onClick: onClick, className: cx(styles$2.sidebarMenuCloseButton, className) },
-        React.createElement(Box, { className: styles$2.iconWrapper },
-            React.createElement(SvgClose, { className: styles$2.icon }))));
-};
-
-var SidebarMenuSeparator = function (separatorLineProps) { return (React.createElement(SeparatorLine, __assign({ color: cssColor("--lhds-color-blue-600") }, separatorLineProps))); };
-
-var SidebarMenu = function (_a) {
-    var _b;
-    var className = _a.className, children = _a.children, onCloseClick = _a.onCloseClick, _c = _a.collapsed, collapsed = _c === void 0 ? false : _c, _d = _a.hideCloseButton, hideCloseButton = _d === void 0 ? false : _d, _e = _a.variant, variant = _e === void 0 ? "standard" : _e, boxProps = __rest(_a, ["className", "children", "onCloseClick", "collapsed", "hideCloseButton", "variant"]);
-    var height = getNavbarHeight(variant);
-    return (React.createElement(Box, __assign({ className: cx(styles$3.sidebarMenu, collapsed ? styles$3.collapsed : null, className), style: (_b = {},
-            _b["--swui-sidebar-menu-item-height"] = height,
-            _b["--swui-nav-bar-height"] = height,
-            _b), "data-collapsed": collapsed || undefined }, boxProps),
-        !hideCloseButton && (React.createElement(React.Fragment, null,
-            React.createElement(SidebarMenuCloseButton, { onClick: onCloseClick }),
-            React.createElement(SidebarMenuSeparator, null),
-            React.createElement(Space, null))),
-        React.createElement(Box, { className: styles$3.sidebarMenuContent, height: "100%", background: "var(--current-background-color)" },
-            React.createElement(Column, { flex: 1 }, children))));
-};
-
-var SidebarRailMenu = function (_a) {
-    var variant = _a.variant, onClickMenuButton = _a.onClickMenuButton, children = _a.children;
-    return (React.createElement(SidebarMenu, { collapsed: true, position: "fixed", left: 0, top: 0, hideCloseButton: true, variant: variant },
-        React.createElement(NavBarSideMenuButton, { onClick: onClickMenuButton }),
-        children));
-};
-
-var css_248z$2 = ".SidebarMenuContent-module_label__3NyDU {\n  font-size: var(--current-text-size, var(--swui-font-size-medium));\n  line-height: var(--current-line-height, var(--swui-line-height-medium));\n  font-weight: var(--swui-button-font-weight);\n  font-family: var(--swui-font-buttons);\n  color: var(--current-text-color);\n}\n\n.SidebarMenuContent-module_icon__1kQOa {\n  color: var(--current-text-color);\n  font-size: 1.6rem;\n}\n\n.SidebarMenuContent-module_spinner__K0lsy {\n  color: var(--current-text-color);\n}\n\n.SidebarMenuContent-module_leftWrapper__2sA9a.SidebarMenuContent-module_leftWrapper__2sA9a.SidebarMenuContent-module_leftWrapper__2sA9a.SidebarMenuContent-module_leftWrapper__2sA9a {\n  width: var(--swui-sidebar-menu-item-height);\n  margin-right: 0;\n}\n\n.SidebarMenuContent-module_button__3x5IE {\n  border: 0;\n  padding: 0;\n  background: var(--current-background-color);\n}\n\n[data-collapsed] [aria-expanded=\"true\"] .SidebarMenuContent-module_button__3x5IE,\n  .SidebarMenuContent-module_button__3x5IE:hover {\n    background: var(--current-background-color-hover);\n  }\n\n.SidebarMenuContent-module_button__3x5IE:focus {\n    outline: none;\n  }\n\n.SidebarMenuContent-module_button__3x5IE:focus-visible {\n    background: var(--current-background-color-active);\n  }\n\n.SidebarMenuContent-module_button__3x5IE:active {\n    background: var(--current-background-color-active);\n  }\n\n.SidebarMenuContent-module_button__3x5IE.SidebarMenuContent-module_selected__aeI_K {\n    background: var(--current-item-selected);\n  }\n";
-var contentStyles = {"label":"SidebarMenuContent-module_label__3NyDU","icon":"SidebarMenuContent-module_icon__1kQOa","spinner":"SidebarMenuContent-module_spinner__K0lsy","leftWrapper":"SidebarMenuContent-module_leftWrapper__2sA9a","button":"SidebarMenuContent-module_button__3x5IE","selected":"SidebarMenuContent-module_selected__aeI_K"};
-styleInject(css_248z$2);
-
-var defaultRenderLink = function (_a) {
-    _a.activeClassName; var props = __rest(_a, ["activeClassName"]);
-    return React.createElement("button", __assign({}, props));
-};
-var SidebarMenuLink = function (_a) {
-    var className = _a.className; _a.children; var selected = _a.selected, indent = _a.indent, label = _a.label, loading = _a.loading, left = _a.left, leftIcon = _a.leftIcon, right = _a.right, rightIcon = _a.rightIcon, success = _a.success, width = _a.width, _b = _a.renderLink, renderLink = _b === void 0 ? defaultRenderLink : _b, style = _a.style, buttonProps = __rest(_a, ["className", "children", "selected", "indent", "label", "loading", "left", "leftIcon", "right", "rightIcon", "success", "width", "renderLink", "style"]);
-    var hasContentLeft = left || leftIcon || loading || success;
-    var innerClassName = cx(contentStyles.button, selected ? contentStyles.selected : undefined, className);
-    var innerStyle = __assign(__assign({}, style), { width: width, height: "var(--swui-sidebar-menu-item-height)" });
-    var innerChildren = (React.createElement(Row, { spacing: 1, flex: 1, alignItems: "center" },
-        !hasContentLeft && React.createElement(Indent, null),
-        indent && React.createElement(Indent, { num: 3.5 }),
-        React.createElement(ButtonContent, { label: label, loading: loading, left: left, leftIcon: leftIcon, right: right, rightIcon: rightIcon, success: success, labelClassName: contentStyles.label, spinnerClassName: contentStyles.spinner, iconClassName: cx(contentStyles.icon), leftWrapperClassName: contentStyles.leftWrapper })));
-    return (React.createElement(React.Fragment, null, renderLink(__assign(__assign({}, buttonProps), { activeClassName: contentStyles.selected, className: innerClassName, children: innerChildren, style: innerStyle }))));
-};
-
-var css_248z$1 = ".SidebarMenuHeading-module_sidebarMenuHeading__2Z8R_ {\n  --swui-sidebar-menu-heading-text-color: var(--lhds-color-ui-300);\n\n  /* Styling */\n\n  text-transform: uppercase;\n}\n";
-var styles$1 = {"sidebarMenuHeading":"SidebarMenuHeading-module_sidebarMenuHeading__2Z8R_"};
-styleInject(css_248z$1);
-
-var SidebarMenuHeading = function (_a) {
-    _a.className; var label = _a.label, contentLeft = _a.contentLeft, contentRight = _a.contentRight, textProps = __rest(_a, ["className", "label", "contentLeft", "contentRight"]);
-    return (React.createElement(Box, { spacing: 2, indent: 2 },
-        React.createElement(CollapsibleContent, { className: styles$1.sidebarMenuHeading, contentLeft: contentLeft, contentRight: contentRight },
-            React.createElement(Text, __assign({ variant: "overline", color: "var(--swui-sidebar-menu-heading-text-color)" }, textProps), label))));
-};
-
-var css_248z = ".SidebarMenuCollapsible-module_sidebarMenuCollapsible__3g5N3 {\n  --swui-collapsible-header-text-color: var(--current-text-color);\n  --swui-collapsible-header-background-color: var(--current-background-color);\n  --swui-collapsible-header-background-color-hover: var(\n    --current-background-color-hover\n  );\n  --swui-collapsible-header-background-color-active: var(\n    --current-background-color-active\n  );\n  --swui-collapsible-header-indicator-color: var(--current-text-color);\n  --swui-collapsible-header-indicator-color-collapsed: var(\n    --current-text-color\n  );\n  --swui-collapsible-header-indicator-color-hover: var(--current-text-color);\n  --swui-collapsible-header-padding: 0 calc(var(--swui-metrics-indent) * 2) 0 0;\n  --swui-collapsible-header-content-margin: 0;\n  --swui-collapsible-collapsible-link-padding: var(--swui-metrics-indent)\n    var(--swui-metrics-indent) var(--swui-metrics-indent)\n    calc(var(--swui-metrics-indent) * 4);\n  --swui-collapsible-header-border-color: transparent;\n\n  --swui-collapsible-min-height: var(--swui-sidebar-menu-item-height);\n}\n";
-var styles = {"sidebarMenuCollapsible":"SidebarMenuCollapsible-module_sidebarMenuCollapsible__3g5N3"};
-styleInject(css_248z);
-
-var SidebarMenuCollapsible = function (_a) {
-    var children = _a.children, label = _a.label, leftIcon = _a.leftIcon;
-    var _b = useState(false), collapsed = _b[0], setCollapsed = _b[1];
-    return (React.createElement(Box, { background: "var(--current-background-color)" },
-        React.createElement(Collapsible, { className: styles.sidebarMenuCollapsible, label: label, collapsed: collapsed, onClick: function () { return setCollapsed(!collapsed); }, contentLeft: leftIcon ? (React.createElement(Box, { width: "var(--swui-sidebar-menu-item-height)", alignItems: "center", justifyContent: "center" },
-                React.createElement(Icon, { icon: leftIcon, size: 16, color: "var(--current-text-color)", "data-hover": true }))) : (React.createElement(Indent, { num: 1 })) },
-            React.createElement(Column, { flex: 1 }, children))));
-};
-
-var renderItemsExpanded = function (items, indent) {
-    if (indent === void 0) { indent = false; }
-    return items.map(function (item, index) {
-        switch (item.type) {
-            case "heading":
-                return React.createElement(SidebarMenuHeading, { key: index, label: item.label });
-            case "separator":
-                return React.createElement(SidebarMenuSeparator, { key: index });
-            case "link": {
-                item.type; var linkProps = __rest(item, ["type"]);
-                return React.createElement(SidebarMenuLink, __assign({ key: index, indent: indent }, linkProps));
-            }
-            case "grouped":
-                return (React.createElement(SidebarMenuCollapsible, { key: index, leftIcon: item.leftIcon, label: item.label }, renderItemsExpanded(item.items, true)));
-            default:
-                return exhaustSwitchCaseElseThrow(item);
-        }
-    });
-};
-var renderItemsInRail = function (items, _a) {
-    var popupMinWidth = _a.popupMinWidth;
-    return items.map(function (item, index) {
-        switch (item.type) {
-            case "heading":
-                return null;
-            case "separator":
-                return React.createElement(SidebarMenuSeparator, { key: index });
-            case "link": {
-                item.type; var label = item.label, linkProps = __rest(item, ["type", "label"]);
-                return (React.createElement(SidebarMenuLink, __assign({ key: index, title: label, width: "var(--swui-sidebar-menu-item-height)" }, linkProps)));
-            }
-            case "grouped":
-                return (React.createElement("div", { key: index },
-                    React.createElement(Popover, { appendTo: "parent", arrow: false, offset: [0, 0], placement: "right-start", trigger: "focusin mouseenter click", disablePadding: true, lazy: true, content: React.createElement(Box, { minWidth: popupMinWidth, background: "var(--lhds-color-blue-500)" },
-                            React.createElement(SidebarMenuHeading, { label: item.label }),
-                            renderItemsExpanded(item.items)) },
-                        React.createElement(SidebarMenuLink, { title: item.label, width: "var(--swui-sidebar-menu-item-height)", leftIcon: item.leftIcon }))));
-            default:
-                return exhaustSwitchCaseElseThrow(item);
-        }
-    });
-};
-
-var borderTop = "1px solid ".concat(cssColor("--lhds-color-orange-400"));
-var SelectedItemsActionsPanel = function (_a) {
-    var numItemsSelected = _a.numItemsSelected, label = _a.label, afterLabelContent = _a.afterLabelContent, rightContent = _a.rightContent;
-    return (React.createElement(Row, { indent: 3, spacing: true, minHeight: "56px", justifyContent: "space-between", alignItems: "center", borderTop: borderTop, background: cssColor("--lhds-color-orange-50") },
-        React.createElement(Row, { alignItems: "center" },
-            numItemsSelected != null || label != null ? (React.createElement(React.Fragment, null, numItemsSelected != null ? (React.createElement(React.Fragment, null,
-                React.createElement(Text, { variant: "bold" }, numItemsSelected),
-                React.createElement(Space, null),
-                React.createElement(Text, null,
-                    "item",
-                    numItemsSelected === 1 ? "" : "s",
-                    " selected"))) : label != null ? (React.createElement(React.Fragment, null, typeof label === "string" ? React.createElement(Text, null, label) : label)) : null)) : null,
-            afterLabelContent ? (React.createElement(React.Fragment, null,
-                React.createElement(Indent, null),
-                React.createElement(Box, null, afterLabelContent))) : null),
-        React.createElement(Box, null, rightContent)));
-};
-
 export { ActionMenuFlatButton, ActionMenuPrimaryButton, ActionMenuSecondaryButton, CheckboxMenu, Collapsible, CollapsibleClickableContent, CollapsibleContent, CollapsibleEmptyContent, CollapsibleGroupHeading, CollapsibleWithCheckbox, ErrorPanel, ErrorScreen, LoadingPanel, LoadingScreen, NavBar, NavBarButton, NavBarHeading, NavBarNotificationButton, NavBarPopoverButton, NavBarSearchField, NavBarUserButton, Notification, PageHeader, PageHeaderRow, PageHeading, SelectedItemsActionsPanel, SidebarMenu, SidebarMenuCollapsible, SidebarMenuHeading, SidebarMenuLink, SidebarMenuSeparator, SidebarRailMenu, defaultNotificationTheme, defaultRenderLink, mapCSSTime, renderItemsExpanded, renderItemsInRail };
 //# sourceMappingURL=index.es.js.map