@laerdal/life-react-components 3.5.1-dev.10 → 3.5.1-dev.12

package/dist/src/GlobalNavigationBar/desktop/UserMenu.js

@@ -0,0 +1,90 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { Button } from '../../Button';
+import { BOXSHADOWS, COLORS, ComponentLStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES } from '../../styles';
+import { Size } from '../../types';
+import { flowDown, UserMenuSectionListStyling } from '../mobile/CommonStyles';
+import { SystemIcons } from '../../icons';
+import { HyperLink } from '../../HyperLink';
+import Breakpoints from '../../styles/breakpoints';
+import { MenuItem } from '../../MenuItem';
+import { useNavigationHelper } from '../../common/NavigationHelper';
+import { ProfileButton } from '../../ProfileButton';
+var UserMenuScrollContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+var UserMenuPinnedContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+var UserMenuWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  width: 320px;\n\n  position: absolute;\n\n  &.show {\n    display: block;\n  }\n\n  top: 0;\n  right: 0;\n  z-index: ", ";\n  height: 100%;\n  flex-flow: column;\n\n\n  ", " {\n    flex-flow: initial;\n    top: initial;\n    right: initial;\n    height: initial;\n    animation: ", " 0.2s ease-in-out;\n    box-shadow: ", ";\n    border-radius: 8px;\n    border: 1px solid ", ";\n    z-index: ", ";\n    padding: 24px 0;\n  }\n"], ["\n  margin: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  width: 320px;\n\n  position: absolute;\n\n  &.show {\n    display: block;\n  }\n\n  top: 0;\n  right: 0;\n  z-index: ", ";\n  height: 100%;\n  flex-flow: column;\n\n\n  ", " {\n    flex-flow: initial;\n    top: initial;\n    right: initial;\n    height: initial;\n    animation: ", " 0.2s ease-in-out;\n    box-shadow: ", ";\n    border-radius: 8px;\n    border: 1px solid ", ";\n    z-index: ", ";\n    padding: 24px 0;\n  }\n"])), COLORS.white, Z_INDEXES.off_canvas, Breakpoints.MEDIUM, flowDown, BOXSHADOWS.BOXSHADOW_CENTERED, COLORS.neutral_200, Z_INDEXES.fixed_menu);
+var MenuSection = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 4px 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ", ";\n  }\n"], ["\n  padding: 4px 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ", ";\n  }\n"])), COLORS.neutral_200);
+var SignOutActionWrapper = styled(MenuSection)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n"], ["\n  align-items: center;\n  justify-content: center;\n"])));
+var MenuSectionHeader = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 8px 24px 4px 24px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ", ";\n\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 8px 24px 4px 24px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ", ";\n\n  ", "\n"])), COLORS.neutral_20, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500));
+var MenuSectionList = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin: 0;\n  padding: 0;\n\n  ", ";\n"], ["\n  margin: 0;\n  padding: 0;\n\n  ", ";\n"])), UserMenuSectionListStyling);
+var UserSectionAvatar = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  pointer-events: none;\n\n  button {\n    padding: 0 !important;\n  }\n\n  button > div {\n    width: 48px !important;\n    height: 48px !important;\n    border-radius: 50% !important;\n  }\n"], ["\n  pointer-events: none;\n\n  button {\n    padding: 0 !important;\n  }\n\n  button > div {\n    width: 48px !important;\n    height: 48px !important;\n    border-radius: 50% !important;\n  }\n"])));
+var UserSectionInfo = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  padding: 2px 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"], ["\n  padding: 2px 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"])));
+var UserSectionInfoName = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
+var UserSectionInfoEmail = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  word-break: break-all;\n  ", "\n"], ["\n  word-break: break-all;\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500));
+var UserSectionInfoLink = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  padding: 2px 0;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  ", "\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"], ["\n  padding: 2px 0;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  ", "\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null));
+var UserSection = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: 0 24px 8px 24px;\n  gap: 16px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: 0 24px 8px 24px;\n  gap: 16px;\n"])));
+var UserMenu = function (_a) {
+    var show = _a.show, user = _a.user, onHideUserMenu = _a.onHideUserMenu, sections = _a.sections, signOut = _a.signOut, label = _a.label;
+    var _b = useNavigationHelper(), navigate = _b.navigate, isActiveRoute = _b.isActiveRoute;
+    React.useEffect(function () {
+        if (!onHideUserMenu)
+            return;
+        function handleKeyPress(e) {
+            if (e.key === 'Escape' || e.key === 'Esc') {
+                onHideUserMenu();
+            }
+        }
+        document === null || document === void 0 ? void 0 : document.addEventListener('keydown', handleKeyPress, false);
+        return function () {
+            document === null || document === void 0 ? void 0 : document.removeEventListener('keydown', handleKeyPress, false);
+        };
+    }, [onHideUserMenu]);
+    var renderItem = function (item, section, index) {
+        return React.createElement(MenuItem, { key: index, id: "profile_".concat(index), active: !item.external && isActiveRoute(item.to, !!item.exact), item: {
+                value: item.to,
+                disabled: item.disabled,
+                icon: item.icon,
+                displayLabel: item.label,
+            }, onClickHandler: function (e) {
+                item.action && item.action(e);
+                navigate(item.to, !!item.external);
+            } });
+    };
+    return (React.createElement(UserMenuWrapper, { onClick: onHideUserMenu, className: show ? 'show' : '', role: "menu", "aria-labelledby": "UserMenuButton" },
+        React.createElement(UserMenuScrollContainer, null,
+            React.createElement(UserSection, null,
+                React.createElement(UserSectionAvatar, null,
+                    React.createElement(ProfileButton, { onClick: function () {
+                        }, tabIndex: -1, initials: user.firstName[0] + user.lastName[0] })),
+                React.createElement(UserSectionInfo, null,
+                    React.createElement(UserSectionInfoName, { "data-hj-suppress": true }, "".concat(user.firstName, " ").concat(user.lastName)),
+                    React.createElement(UserSectionInfoEmail, { "data-hj-suppress": true }, user.email),
+                    user.link &&
+                        React.createElement(HyperLink, { variant: 'default', href: user.link.href, target: user.link.target, id: user.link.id, onClick: user.link.onClick },
+                            React.createElement(UserSectionInfoLink, null,
+                                React.createElement("span", null, user.link.label),
+                                user.link.icon && React.cloneElement(user.link.icon, { size: '16px' }))))),
+            sections.filter(function (a) { return !a.pinned; }).map(function (section, index) {
+                return React.createElement(MenuSection, { key: index, className: section.divider ? 'divider' : '' },
+                    section.label && React.createElement(MenuSectionHeader, null, section.label),
+                    React.createElement(MenuSectionList, { key: index }, section.items.map(function (item, index) { return renderItem(item, section, index); })));
+            })),
+        React.createElement(UserMenuPinnedContainer, null,
+            sections.filter(function (a) { return !!a.pinned; }).map(function (section, index) {
+                return React.createElement(MenuSection, { key: index, className: section.divider || index === 0 ? 'divider' : '' },
+                    section.label && React.createElement(MenuSectionHeader, null, section.label),
+                    React.createElement(MenuSectionList, { key: index }, section.items.map(function (item, index) { return renderItem(item, section, index); })));
+            }),
+            signOut &&
+                React.createElement(SignOutActionWrapper, null,
+                    React.createElement(Button, { width: '272px', variant: "secondary", icon: React.createElement(SystemIcons.Logout, null), size: Size.Large, onClick: function (e) {
+                            e.preventDefault();
+                            signOut === null || signOut === void 0 ? void 0 : signOut.action();
+                        } }, signOut === null || signOut === void 0 ? void 0 : signOut.label)))));
+};
+export default UserMenu;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

package/dist/src/GlobalNavigationBar/index.js

@@ -0,0 +1,3 @@
+import GlobalNavigationBar from './GlobalNavigationBar';
+export * from './types';
+export { GlobalNavigationBar };

package/dist/src/GlobalNavigationBar/mobile/CommonStyles.js

@@ -0,0 +1,28 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css, keyframes } from 'styled-components';
+import { BREAKPOINTS, COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles, scrollBarStyling, Z_INDEXES } from '../../styles';
+import { NavLink } from 'react-router-dom';
+import { Size } from '../../types';
+export var RowLayout = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+export var Button = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  font-weight: bold;\n  border: 0;\n"], ["\n  background-color: ", ";\n  font-weight: bold;\n  border: 0;\n"])), COLORS.white);
+var flowLeft = keyframes(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n"], ["\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n"])));
+var flowRight = keyframes(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n    transform: translateX(100%);\n  }\n"], ["\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n    transform: translateX(100%);\n  }\n"])));
+export var fadeOut = keyframes(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  0% {\n    opacity: 1;\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n  }\n"], ["\n  0% {\n    opacity: 1;\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n  }\n"])));
+export var fadeIn = keyframes(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  0% {\n    opacity: 0;\n    visibility: hidden;\n  }\n  to {\n    opacity: 1;\n    visibility: visible;\n  }\n"], ["\n  0% {\n    opacity: 0;\n    visibility: hidden;\n  }\n  to {\n    opacity: 1;\n    visibility: visible;\n  }\n"])));
+export var Menu = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: 100%;\n  background-color: ", ";\n  box-sizing: border-box;\n  right: 0;\n  top: 0;\n  position: absolute;\n  z-index: ", ";\n  align-items: center;\n\n  width: 320px;\n\n  ", " {\n    width: 400px;\n  }\n\n  .open & {\n    visibility: visible;\n    display: flex;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  .closed & {\n    visibility: hidden;\n    animation: ", " 0.3s ease-in-out;\n  }\n"], ["\n  height: 100%;\n  background-color: ", ";\n  box-sizing: border-box;\n  right: 0;\n  top: 0;\n  position: absolute;\n  z-index: ", ";\n  align-items: center;\n\n  width: 320px;\n\n  ", " {\n    width: 400px;\n  }\n\n  .open & {\n    visibility: visible;\n    display: flex;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  .closed & {\n    visibility: hidden;\n    animation: ", " 0.3s ease-in-out;\n  }\n"])), COLORS.white, Z_INDEXES.off_canvas, BREAKPOINTS.SMALL, flowLeft, flowRight);
+export var Right = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  margin-left: auto;\n"], ["\n  display: flex;\n  margin-left: auto;\n"])));
+export var SiteName = styled.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n"], ["\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n"])), COLORS.neutral_600);
+export var MenuSection = styled.li(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  margin-top: 16px;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"], ["\n  margin-top: 16px;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])));
+export var MenuSectionList = styled.ul(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  list-style: none;\n  padding: 0;\n\n  li {\n    width: 80%;\n    height: 48px;\n    margin: 0 auto 0 12px;\n\n    a {\n      height: 100%;\n    }\n  }\n"], ["\n  list-style: none;\n  padding: 0;\n\n  li {\n    width: 80%;\n    height: 48px;\n    margin: 0 auto 0 12px;\n\n    a {\n      height: 100%;\n    }\n  }\n"])));
+export var UserMenuSectionListStyling = css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  li {\n    position: relative;\n  }\n\n  li:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n\n    a {\n      color: ", ";\n    }\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    z-index: ", ";\n\n    ", "\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    z-index: ", ";\n    background: ", ";\n\n    a {\n      color: ", ";\n    }\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .disabled {\n    a {\n      color: ", ";\n    }\n\n    svg {\n      color: ", ";\n    }\n\n    background-color: ", ";\n  }\n"], ["\n  li {\n    position: relative;\n  }\n\n  li:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n\n    a {\n      color: ", ";\n    }\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    z-index: ", ";\n\n    ", "\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    z-index: ", ";\n    background: ", ";\n\n    a {\n      color: ", ";\n    }\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .disabled {\n    a {\n      color: ", ";\n    }\n\n    svg {\n      color: ", ";\n    }\n\n    background-color: ", ";\n  }\n"])), Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_600, COLORS.primary_600, Z_INDEXES.focus, focusStyles, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_100);
+export var MenuLink = styled(NavLink)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  border: none;\n  background: transparent;\n  margin: auto;\n\n  box-sizing: border-box;\n\n  ", "\n\n  text-decoration: none;\n  text-align: center;\n  align-items: center;\n  display: flex;\n"], ["\n  border: none;\n  background: transparent;\n  margin: auto;\n\n  box-sizing: border-box;\n\n  ", "\n\n  text-decoration: none;\n  text-align: center;\n  align-items: center;\n  display: flex;\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black));
+export var flowDown = keyframes(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"], ["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
+export var MobileMenuWrapper = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n"], ["\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n"])));
+export var ScrollableContainer = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 10px;\n  }\n\n  ", "\n  ::-webkit-scrollbar-track {\n    margin: 8px;\n  }\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 10px;\n  }\n\n  ", "\n  ::-webkit-scrollbar-track {\n    margin: 8px;\n  }\n"])), scrollBarStyling(Size.Small));
+export var MobileHeaderText = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n  ", " {\n    ", "\n  }\n"], ["\n  ", "\n  ", " {\n    ", "\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
+export var MobileHeaderNote = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  word-break: break-all;\n  ", "\n"], ["\n  word-break: break-all;\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
+export var MobileHeaderContainer = styled.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  margin: 0 24px;\n  padding-bottom: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n"], ["\n  margin: 0 24px;\n  padding-bottom: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n"])), COLORS.neutral_200);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;

package/dist/src/GlobalNavigationBar/mobile/MobileActionContainer.js

@@ -0,0 +1,18 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { Button } from '../../Button';
+import { BREAKPOINTS, COLORS } from '../../styles';
+import { Size } from '../../types';
+import { useMediaMatch } from "rooks";
+var ActionContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n\n  ", " {\n    padding: 16px;\n  }\n"], ["\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n\n  ", " {\n    padding: 16px;\n  }\n"])), COLORS.neutral_200, BREAKPOINTS.SMALL);
+export var MobileActionContainer = function (_a) {
+    var disabled = _a.disabled, _b = _a.variant, variant = _b === void 0 ? 'secondary' : _b, icon = _a.icon, label = _a.label, loading = _a.loading, action = _a.action;
+    var isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));
+    return (React.createElement(ActionContainer, null,
+        React.createElement(Button, { variant: variant, size: isSmallScreen ? Size.Medium : Size.Small, disabled: disabled, icon: icon, loading: loading, onClick: action }, label)));
+};
+var templateObject_1;

package/dist/src/GlobalNavigationBar/mobile/MobileMenu.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { MobileNavigationMenuProps, ProfileMenu } from '../types';
-type Props = MobileNavigationMenuProps & {
+declare type Props = MobileNavigationMenuProps & {
     profile?: ProfileMenu;
     show?: boolean;
     onClose: () => void;

package/dist/src/GlobalNavigationBar/mobile/MobileMenu.js

@@ -0,0 +1,94 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { SystemIcons } from '../../icons';
+import { BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES } from '../../styles';
+import { useLocation } from 'react-router-dom';
+import { IconButton } from '../../Button';
+import { LaerdalLogo } from '../../assets';
+import MobileMenuHeader from './MobileMenuHeader';
+import MobileMenuContent from './MobileMenuContent';
+import { useStackState } from '../../common/StackState';
+import { useMediaMatch } from 'rooks';
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 320px;\n  z-index: ", ";\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ", " {\n    width: 400px;\n  }\n"], ["\n  width: 320px;\n  z-index: ", ";\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ", " {\n    width: 400px;\n  }\n"])), Z_INDEXES.off_canvas, BREAKPOINTS.SMALL);
+var SwitcherLabel = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-left: auto;\n"], ["\n  margin-left: auto;\n"])));
+var MobileFooter = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: 48px;\n\n  padding: 0 4px 0 16px;\n  border-top: 1px solid ", ";\n\n  ", "\n  ", " {\n    height: 56px;\n    padding: 4px 8px 4px 16px;\n    ", "\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: 48px;\n\n  padding: 0 4px 0 16px;\n  border-top: 1px solid ", ";\n\n  ", "\n  ", " {\n    height: 56px;\n    padding: 4px 8px 4px 16px;\n    ", "\n  }\n"])), COLORS.neutral_200, ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
+var CustomContent = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n"], ["\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n"])));
+var MobileMenu = function (_a) {
+    var _b, _c;
+    var show = _a.show, profile = _a.profile, buttons = _a.buttons, label = _a.label, header = _a.header, items = _a.items, footer = _a.footer, action = _a.action, onClose = _a.onClose;
+    var _d = useStackState(), reset = _d.reset, length = _d.length, push = _d.push, pop = _d.pop, peek = _d.peek;
+    var isMediumScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));
+    var location = useLocation();
+    var onSubMenuOpen = function (menu) {
+        switch (menu === null || menu === void 0 ? void 0 : menu.type) {
+            case 'group':
+                push({
+                    header: {
+                        label: menu.label,
+                        buttons: menu.buttons,
+                    },
+                    content: {
+                        header: menu.header,
+                        items: menu.items,
+                        footer: menu.footer,
+                        action: menu.action,
+                    },
+                    footer: false,
+                });
+                break;
+            case 'custom':
+                push({
+                    header: {
+                        label: menu.label,
+                        buttons: menu.buttons,
+                    },
+                    customContent: menu.custom,
+                    footer: false,
+                });
+                break;
+            default:
+                break;
+        }
+    };
+    React.useEffect(function () {
+        onClose();
+    }, [location]);
+    React.useEffect(function () {
+        isMediumScreen && onClose();
+    }, [isMediumScreen]);
+    React.useEffect(function () {
+        setTimeout(function () {
+            reset({
+                footer: true,
+                header: {
+                    label: label,
+                    buttons: buttons,
+                },
+                content: {
+                    header: header,
+                    items: items,
+                    footer: footer,
+                    action: action,
+                },
+            });
+        }, 300);
+    }, [show]);
+    var current = peek();
+    var switcher = (_c = (_b = current === null || current === void 0 ? void 0 : current.header) === null || _b === void 0 ? void 0 : _b.buttons) === null || _c === void 0 ? void 0 : _c.find(function (a) { return a.type === 'switcher'; });
+    return (React.createElement(Wrapper, null,
+        React.createElement(MobileMenuHeader, { buttons: current === null || current === void 0 ? void 0 : current.header.buttons, onGoBack: length > 1 ? pop : undefined, onSubMenuOpen: onSubMenuOpen, profile: profile, label: current === null || current === void 0 ? void 0 : current.header.label, onClose: onClose }),
+        (current === null || current === void 0 ? void 0 : current.customContent) && React.createElement(CustomContent, null, current === null || current === void 0 ? void 0 : current.customContent()),
+        (current === null || current === void 0 ? void 0 : current.content) && (React.createElement(MobileMenuContent, { header: current === null || current === void 0 ? void 0 : current.content.header, items: current === null || current === void 0 ? void 0 : current.content.items, footer: current === null || current === void 0 ? void 0 : current.content.footer, action: current === null || current === void 0 ? void 0 : current.content.action, onSubMenuOpen: onSubMenuOpen })),
+        (current === null || current === void 0 ? void 0 : current.footer) && (React.createElement(MobileFooter, null,
+            React.createElement(LaerdalLogo, { height: '36px', width: '66px' }),
+            switcher && (React.createElement(React.Fragment, null,
+                React.createElement(SwitcherLabel, { className: 'globalNav-toggler', onClick: function () { return switcher.action && switcher.action() && onClose(); } }, label || 'Switch site'),
+                React.createElement(IconButton, { variant: 'secondary', shape: 'circular', id: "globalNavAppsButton", action: function () { return switcher.action && switcher.action() && onClose(); } },
+                    React.createElement(SystemIcons.SwitchApp, { size: "24px" }))))))));
+};
+export default MobileMenu;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/GlobalNavigationBar/mobile/MobileMenuContent.js

@@ -0,0 +1,89 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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);
+};
+import React from 'react';
+import styled from 'styled-components';
+import { BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, } from '../../styles';
+import { Size } from '../../types';
+import { HyperLink } from '../../HyperLink';
+import { useNavigationHelper } from '../../common/NavigationHelper';
+import { MenuItem } from '../../MenuItem';
+import { SystemIcons } from '../../icons';
+import { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from './CommonStyles';
+import { useScrollableContainer } from '../../common/ScrollableContainer';
+import { MobileActionContainer } from './MobileActionContainer';
+import { useMediaMatch } from "rooks";
+var MenuItemsContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n"])));
+var MenuSectionContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ", ";\n  }\n"], ["\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ", ";\n  }\n"])), COLORS.neutral_200);
+var MenuSectionHeader = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ", ";\n\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ", ";\n\n  ", "\n"])), COLORS.neutral_20, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500));
+var MenuSectionList = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var PinnedContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-top: 1px solid ", ";\n"], ["\n  border-top: 1px solid ", ";\n"])), COLORS.neutral_200);
+var FooterText = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n  ", " {\n    ", "\n  }\n"], ["\n  ", "\n  ", " {\n    ", "\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
+var FooterNote = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n  ", " {\n    ", "\n  }\n"], ["\n  ", "\n  ", " {\n    ", "\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
+var FooterLink = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  a {\n    ", "\n    ", " {\n      ", "\n    }\n  }\n"], ["\n  a {\n    ", "\n    ", " {\n      ", "\n    }\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, null));
+var FooterContainer = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n\n  ", " {\n    padding: 16px;\n  }\n"], ["\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n\n  ", " {\n    padding: 16px;\n  }\n"])), COLORS.neutral_200, COLORS.neutral_20, BREAKPOINTS.SMALL);
+var MobileMenuContent = function (_a) {
+    var header = _a.header, items = _a.items, footer = _a.footer, action = _a.action, onSubMenuOpen = _a.onSubMenuOpen;
+    var isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));
+    var _b = useNavigationHelper(), navigate = _b.navigate, isActiveRoute = _b.isActiveRoute;
+    var _c = useScrollableContainer([header, footer, action, items]), scrollContainerRef = _c[0], scrollable = _c[1];
+    var renderItem = function (item, index) {
+        switch (item.type) {
+            case 'section':
+                return (React.createElement(MenuSectionContainer, { key: index },
+                    item.label && React.createElement(MenuSectionHeader, null, item.label),
+                    React.createElement(MenuSectionList, null, item.items.map(function (item, index) { return renderItem(item, index); }))));
+            case 'group':
+                return (React.createElement(MenuItem, { key: index, id: 'menu-item-' + index, size: isSmallScreen ? Size.Medium : Size.Small, active: false, item: {
+                        value: item.label,
+                        disabled: item.disabled,
+                        icon: item.icon,
+                        displayLabel: item.label,
+                        noteLabel: item.note,
+                    }, iconRight: React.createElement(SystemIcons.ArrowDropRight, null), onClickHandler: function (e) {
+                        e.nativeEvent.stopImmediatePropagation();
+                        onSubMenuOpen && onSubMenuOpen(item);
+                    } }));
+            case 'item':
+            default:
+                return (React.createElement(MenuItem, { key: index, id: 'menu-item-' + index, active: !item.external && isActiveRoute(item.to, !!item.exact), size: isSmallScreen ? Size.Medium : Size.Small, item: {
+                        value: item.to,
+                        disabled: item.disabled,
+                        icon: item.icon,
+                        displayLabel: item.label,
+                        noteLabel: item.note,
+                    }, onClickHandler: function (e) {
+                        item.action && item.action(e);
+                        navigate(item.to, !!item.external);
+                    } }));
+        }
+    };
+    return (React.createElement(MobileMenuWrapper, null,
+        React.createElement(ScrollableContainer, { ref: scrollContainerRef, className: scrollable ? 'scrollable' : '' },
+            !!header && (React.createElement(MobileHeaderContainer, null,
+                React.createElement(MobileHeaderText, null, header.header),
+                header.note && React.createElement(MobileHeaderNote, null, header.note))),
+            React.createElement(MenuItemsContainer, null, items === null || items === void 0 ? void 0 : items.filter(function (a) { return !a.pinned; }).map(function (item, index) { return renderItem(item, index); }))),
+        (items === null || items === void 0 ? void 0 : items.some(function (a) { return a.pinned; })) && (React.createElement(PinnedContainer, null,
+            React.createElement(MenuItemsContainer, null, items === null || items === void 0 ? void 0 : items.filter(function (a) { return !!a.pinned; }).map(function (item, index) { return renderItem(item, index); })))),
+        footer && (React.createElement(FooterContainer, null,
+            React.createElement(FooterText, null, footer.header),
+            footer.note && React.createElement(FooterNote, null, footer.note),
+            footer.link && (React.createElement(FooterLink, null,
+                React.createElement(HyperLink, { variant: 'default', id: footer.link.id, target: footer.link.target, onClick: footer.link.onClick, href: footer.link.href }, footer.link.label))))),
+        action && React.createElement(MobileActionContainer, __assign({}, action))));
+};
+export default MobileMenuContent;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/src/GlobalNavigationBar/mobile/MobileMenuHeader.js

@@ -0,0 +1,108 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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);
+};
+var __rest = (this && this.__rest) || function (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;
+};
+import React from 'react';
+import styled from 'styled-components';
+import Breakpoints from '../../styles/breakpoints';
+import { IconButton } from '../../Button';
+import { SystemIcons } from '../../icons';
+import { BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling } from '../../styles';
+import { ProfileButton } from '../../ProfileButton';
+export var MobileMenuHeaderActions = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n  justify-content: flex-end;\n  display: flex;\n  flex-direction: row;\n"], ["\n  flex: 1;\n  justify-content: flex-end;\n  display: flex;\n  flex-direction: row;\n"])));
+var MobileMenuHeaderLabel = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  ", " {\n    ", "\n  }\n"], ["\n  ", "\n  ", " {\n    ", "\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
+export var MobileMenuHeaderWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0 4px;\n\n  ", " {\n    padding: 4px 8px;\n  }\n\n  ", " {\n    display: none;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0 4px;\n\n  ", " {\n    padding: 4px 8px;\n  }\n\n  ", " {\n    display: none;\n  }\n"])), Breakpoints.SMALL, Breakpoints.LARGE);
+var MobileMenuHeader = function (_a) {
+    var onGoBack = _a.onGoBack, onClose = _a.onClose, label = _a.label, profile = _a.profile, buttons = _a.buttons, onSubMenuOpen = _a.onSubMenuOpen;
+    var buildProfileSubMenu = function () {
+        var _a, _b, _c, _d;
+        return !!profile ? {
+            type: 'group',
+            label: profile.label,
+            header: {
+                header: profile.user.firstName + ' ' + profile.user.lastName,
+                note: profile.user.email,
+                link: profile.user.link
+            },
+            action: {
+                label: (_a = profile.signOut) === null || _a === void 0 ? void 0 : _a.label,
+                action: (_b = profile.signOut) === null || _b === void 0 ? void 0 : _b.action,
+                icon: (_c = profile.signOut) === null || _c === void 0 ? void 0 : _c.icon,
+                disabled: (_d = profile.signOut) === null || _d === void 0 ? void 0 : _d.disabled
+            },
+            items: profile.sections.map(function (a) { return (__assign(__assign({}, a), { type: 'section' })); })
+        } : undefined;
+    };
+    var renderItem = function (item, index) {
+        var _a, _b, _c, _d, _e, _f;
+        switch (item.type) {
+            case 'profile': {
+                var placement = item.placement, type = item.type, action = item.action, rest = __rest(item, ["placement", "type", "action"]);
+                if (!!profile)
+                    return React.createElement(ProfileButton, __assign({ key: index, onClick: function (e) {
+                            e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
+                            item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu());
+                        }, icon: !profile && React.createElement(SystemIcons.User, null), initials: ((_c = (_b = (_a = profile === null || profile === void 0 ? void 0 : profile.user) === null || _a === void 0 ? void 0 : _a.firstName) === null || _b === void 0 ? void 0 : _b.charAt(0)) !== null && _c !== void 0 ? _c : '') + ((_f = (_e = (_d = profile === null || profile === void 0 ? void 0 : profile.user) === null || _d === void 0 ? void 0 : _d.lastName) === null || _e === void 0 ? void 0 : _e.charAt(0)) !== null && _f !== void 0 ? _f : '') }, rest));
+                else
+                    return React.createElement(React.Fragment, null);
+            }
+            case 'submenu': {
+                var placement = item.placement, type = item.type, icon = item.icon, menu = item.menu, rest = __rest(item, ["placement", "type", "icon", "menu"]);
+                return React.createElement(IconButton, __assign({ key: index, variant: 'secondary', shape: 'circular', action: function (e) {
+                        e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
+                        onSubMenuOpen && onSubMenuOpen(item.menu);
+                    } }, rest), item.icon);
+            }
+            case 'action': {
+                var placement = item.placement, type = item.type, icon = item.icon, action = item.action, rest = __rest(item, ["placement", "type", "icon", "action"]);
+                return React.createElement(IconButton, __assign({ key: index, disabled: item.disabled, variant: 'secondary', shape: 'circular', action: function (e) {
+                        e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
+                        item.action && item.action(e === null || e === void 0 ? void 0 : e.target) && onClose();
+                    } }, rest), item.icon);
+            }
+        }
+    };
+    return (React.createElement(MobileMenuHeaderWrapper, null,
+        onGoBack &&
+            React.createElement(IconButton, { action: function (e) {
+                    e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
+                    onGoBack();
+                }, variant: 'secondary', shape: 'circular' },
+                React.createElement(SystemIcons.ArrowLineLeft, null)), buttons === null || buttons === void 0 ? void 0 :
+        buttons.filter(function (a) { return a.placement === 'left'; }).map(renderItem),
+        label &&
+            React.createElement(MobileMenuHeaderLabel, null, label),
+        React.createElement(MobileMenuHeaderActions, null, buttons === null || buttons === void 0 ? void 0 :
+            buttons.filter(function (a) { return a.placement !== 'left'; }).map(renderItem),
+            onClose &&
+                React.createElement("div", { style: { marginLeft: '8px' } },
+                    React.createElement(IconButton, { variant: 'secondary', action: function (e) {
+                            e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
+                            onClose();
+                        }, shape: 'circular' },
+                        React.createElement(SystemIcons.Close, null))))));
+};
+export default MobileMenuHeader;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/GlobalNavigationBar/types.d.ts

@@ -62,8 +62,8 @@ export interface MenuSwitcherButton extends Omit<IconButtonProps, 'id' | 'type'
     placement?: 'left' | 'right';
     action?: (button?: EventTarget) => boolean | void;
 }
-export type DesktopMenuButtonTypes = MenuIconButton | MenuProfileButton | MenuSwitcherButton;
-export type MobileMenuButtonTypes = MenuIconSubMenuButton | MenuIconButton | MenuProfileButton | MenuSwitcherButton | MenuSearchButton;
+export declare type DesktopMenuButtonTypes = MenuIconButton | MenuProfileButton | MenuSwitcherButton;
+export declare type MobileMenuButtonTypes = MenuIconSubMenuButton | MenuIconButton | MenuProfileButton | MenuSwitcherButton | MenuSearchButton;
 export interface MobileNavigationMenuProps {
     label?: string;
     buttons?: MobileMenuButtonTypes[];
@@ -87,7 +87,7 @@ export interface MenuNavigationGroup<T = MenuNavigationItemTypeDesktopGroup | Me
     footer?: MenuGroupFooter;
     action?: MenuButton;
 }
-export type MenuNavigationItem = {
+export declare type MenuNavigationItem = {
     icon?: React.ReactNode;
     to: string;
     exact?: boolean;
@@ -105,10 +105,10 @@ export interface MenuNavigationSection<T = MenuNavigationItem> {
     label?: string;
     items: T[];
 }
-export type MenuNavigationItemTypeItem = MenuNavigationItem & {
+export declare type MenuNavigationItemTypeItem = MenuNavigationItem & {
     type?: 'item';
 };
-export type MenuNavigationItemTypeDesktopGroup = {
+export declare type MenuNavigationItemTypeDesktopGroup = {
     id: string;
     label?: string;
     disabled?: boolean;
@@ -117,16 +117,16 @@ export type MenuNavigationItemTypeDesktopGroup = {
     expanded?: boolean;
     items: (MenuNavigationItemTypeItem | MenuNavigationItemTypeDesktopGroup)[];
 };
-export type MenuNavigationItemTypeGroup = MenuNavigationGroup<MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection> & {
+export declare type MenuNavigationItemTypeGroup = MenuNavigationGroup<MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection> & {
     type: 'group';
     icon?: React.ReactNode;
     pinned?: boolean;
     disabled?: boolean;
 };
-export type MenuNavigationItemTypeSection = MenuNavigationSection<MenuNavigationItemTypeItem> & {
+export declare type MenuNavigationItemTypeSection = MenuNavigationSection<MenuNavigationItemTypeItem> & {
     type: 'section';
 };
-export type MenuNavigationCustomSubMenu = {
+export declare type MenuNavigationCustomSubMenu = {
     type: 'custom';
     label?: string;
     buttons?: MobileMenuButtonTypes[];

package/dist/src/GlobalNavigationBar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/GlobalNavigationBar/utils.js

@@ -0,0 +1,7 @@
+export var checkIfContainsItem = function (item, activeId) {
+    if (item.id == activeId)
+        return true;
+    if (item.items.findIndex(function (x) { return x.type == 'item' && x.to == activeId; }) >= 0)
+        return true;
+    return item.items.some(function (x) { return x.type == 'desktopgroup' && checkIfContainsItem(x, activeId); });
+};

package/dist/src/HyperLink/HyperLink.js

@@ -0,0 +1,36 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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);
+};
+var __rest = (this && this.__rest) || function (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;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { defaultStyle, invertedStyle } from './styling';
+export var StyledLink = styled.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: pointer;\n  ", "\n  ", "\n"], ["\n  cursor: pointer;\n  ", "\n  ", "\n"])), function (props) { return (props.variant === 'inverted' ? invertedStyle : defaultStyle); }, function (props) { return (props.margin ? "margin: ".concat(props.margin, ";") : ''); });
+var HyperLink = function (_a) {
+    var children = _a.children, _b = _a.target, target = _b === void 0 ? '_blank' : _b, _c = _a.variant, variant = _c === void 0 ? 'default' : _c, props = __rest(_a, ["children", "target", "variant"]);
+    return (React.createElement(StyledLink, __assign({}, props, { variant: variant, target: target, rel: "noopener noreferrer" }), children));
+};
+export default HyperLink;
+var templateObject_1;

package/dist/src/HyperLink/index.js

@@ -0,0 +1,3 @@
+import HyperLink, { StyledLink } from './HyperLink';
+import { defaultStyle as HyperLinkDefaultStyling, invertedStyle as HyperLinkInvertedStyling } from './styling';
+export { HyperLink, HyperLinkInvertedStyling, HyperLinkDefaultStyling, StyledLink };

package/dist/src/HyperLink/styling.js

@@ -0,0 +1,9 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { css } from 'styled-components';
+import { COLORS } from '..';
+export var defaultStyle = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ", ";\n  }\n\n  &:visited {\n    color: ", ";\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ", ";\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    background: ", ";\n    color: ", ";\n  }\n\n\n  &:focus:hover,\n  &:active:hover,\n  &.active-state:hover,\n  &.focus-state:hover{\n    text-decoration-line: none;\n    color: ", ";\n    opacity: 0.9;\n  }\n"], ["\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ", ";\n  }\n\n  &:visited {\n    color: ", ";\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ", ";\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    background: ", ";\n    color: ", ";\n  }\n\n\n  &:focus:hover,\n  &:active:hover,\n  &.active-state:hover,\n  &.focus-state:hover{\n    text-decoration-line: none;\n    color: ", ";\n    opacity: 0.9;\n  }\n"])), COLORS.primary_600, COLORS.primary_800, COLORS.primary_700, COLORS.primary_800, COLORS.white, COLORS.primary_800, COLORS.white, COLORS.white);
+export var invertedStyle = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  outline: none;\n  padding: 2px 0;\n\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: underline;\n\n  &:link {\n    font-weight: 700;\n    color: ", ";\n  }\n\n  &:visited {\n    color: ", ";\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:hover,\n  &.hover-state {\n    text-decoration-line: none;\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:focus:hover,\n  &:active:hover {\n    text-decoration-line: none;\n    color: ", ";\n    opacity: 0.9;\n  }\n"], ["\n  outline: none;\n  padding: 2px 0;\n\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: underline;\n\n  &:link {\n    font-weight: 700;\n    color: ", ";\n  }\n\n  &:visited {\n    color: ", ";\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:hover,\n  &.hover-state {\n    text-decoration-line: none;\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:focus:hover,\n  &:active:hover {\n    text-decoration-line: none;\n    color: ", ";\n    opacity: 0.9;\n  }\n"])), COLORS.white, COLORS.neutral_100, COLORS.white, COLORS.neutral_800, COLORS.white, COLORS.neutral_800, COLORS.neutral_800);
+var templateObject_1, templateObject_2;

package/dist/src/Image/ImageWithFallbacks.d.ts

@@ -5,7 +5,7 @@ export interface ImageWithFallbacksProps extends Omit<React.ImgHTMLAttributes<HT
     alt?: string;
     loader?: boolean;
 }
-type ImageWithFallbacksState = {
+declare type ImageWithFallbacksState = {
     src: string;
     fallbackIndex: number;
     fallbacks: string[];