@laerdal/life-react-components 5.1.0 → 6.0.0-dev.1.full

package/dist/GlobalNavigationBar/mobile/CommonStyles.d.ts

@@ -1,20 +1,16 @@
-/// <reference types="react" />
-export declare const RowLayout: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Button: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const fadeOut: import("styled-components/dist/models/Keyframes").default;
-export declare const fadeIn: import("styled-components/dist/models/Keyframes").default;
-export declare const Menu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Right: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SiteName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const MenuSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
-export declare const MenuSectionList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
-export declare const UserMenuSectionListStyling: import("styled-components").RuleSet<object>;
-export declare const MenuLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react-router-dom").NavLinkProps & import("react").RefAttributes<HTMLAnchorElement>, "ref"> & {
-    ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
-}, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("react-router-dom").NavLinkProps & import("react").RefAttributes<HTMLAnchorElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const flowDown: import("styled-components/dist/models/Keyframes").default;
-export declare const MobileMenuWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ScrollableContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const MobileHeaderText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const MobileHeaderNote: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const MobileHeaderContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const RowLayout: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Button: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const fadeOut: import("styled-components/dist/models/Keyframes").default;
+export declare const fadeIn: import("styled-components/dist/models/Keyframes").default;
+export declare const Menu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Right: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SiteName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const MenuSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
+export declare const MenuSectionList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
+export declare const UserMenuSectionListStyling: import("styled-components").RuleSet<object>;
+export declare const flowDown: import("styled-components/dist/models/Keyframes").default;
+export declare const MobileMenuWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ScrollableContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const MobileHeaderText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const MobileHeaderNote: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const MobileHeaderContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/GlobalNavigationBar/mobile/CommonStyles.js

@@ -1,26 +1,220 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
 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 const RowLayout = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
-export const Button = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  font-weight: bold;\n  border: 0;\n"])), props => COLORS.getColor('white', props.theme));
-const flowLeft = keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n"])));
-const flowRight = keyframes(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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 const fadeOut = keyframes(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 1;\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n  }\n"])));
-export const fadeIn = keyframes(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    visibility: hidden;\n  }\n  to {\n    opacity: 1;\n    visibility: visible;\n  }\n"])));
-export const Menu = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\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"])), props => COLORS.getColor('white', props.theme), Z_INDEXES.off_canvas, BREAKPOINTS.SMALL, flowLeft, flowRight);
-export const Right = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: auto;\n"])));
-export const SiteName = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n"])), props => COLORS.getColor('neutral_600', props.theme));
-export const MenuSection = styled.li(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-top: 16px;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])));
-export const MenuSectionList = styled.ul(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\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 const UserMenuSectionListStyling = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\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, props => COLORS.getColor('primary_20', props.theme), props => COLORS.getColor('primary_600', props.theme), props => COLORS.getColor('primary_600', props.theme), Z_INDEXES.focus, focusStyles, Z_INDEXES.active, props => COLORS.getColor('primary_100', props.theme), props => COLORS.getColor('primary_800', props.theme), props => COLORS.getColor('primary_800', props.theme), props => COLORS.getColor('neutral_300', props.theme), props => COLORS.getColor('neutral_300', props.theme), props => COLORS.getColor('neutral_100', props.theme));
-export const MenuLink = styled(NavLink)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\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"])), props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme)));
-export const flowDown = keyframes(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
-export const MobileMenuWrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n"])));
-export const ScrollableContainer = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\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 const MobileHeaderText = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme)), BREAKPOINTS.SMALL, props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme)));
-export const MobileHeaderNote = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  word-break: break-all;\n  ", "\n"])), props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme)));
-export const MobileHeaderContainer = styled.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\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"])), props => COLORS.getColor('neutral_200', props.theme));
+export const RowLayout = styled.div`
+  display: flex;
+  align-items: center;
+`;
+export const Button = styled.button`
+  background-color: ${props => COLORS.getColor('white', props.theme)};
+  font-weight: bold;
+  border: 0;
+`;
+const flowLeft = keyframes`
+  0% {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+const flowRight = keyframes`
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+    visibility: visible;
+  }
+  to {
+    opacity: 0;
+    visibility: hidden;
+    transform: translateX(100%);
+  }
+`;
+export const fadeOut = keyframes`
+  0% {
+    opacity: 1;
+    visibility: visible;
+  }
+  to {
+    opacity: 0;
+    visibility: hidden;
+  }
+`;
+export const fadeIn = keyframes`
+  0% {
+    opacity: 0;
+    visibility: hidden;
+  }
+  to {
+    opacity: 1;
+    visibility: visible;
+  }
+`;
+export const Menu = styled.div`
+  height: 100%;
+  background-color: ${props => COLORS.getColor('white', props.theme)};
+  box-sizing: border-box;
+  right: 0;
+  top: 0;
+  position: absolute;
+  z-index: ${Z_INDEXES.off_canvas};
+  align-items: center;
+
+  width: 320px;
+
+  ${BREAKPOINTS.SMALL} {
+    width: 400px;
+  }
+
+  .open & {
+    visibility: visible;
+    display: flex;
+    animation: ${flowLeft} 0.3s ease-in-out;
+  }
+
+  .closed & {
+    visibility: hidden;
+    animation: ${flowRight} 0.3s ease-in-out;
+  }
+`;
+export const Right = styled.div`
+  display: flex;
+  margin-left: auto;
+`;
+export const SiteName = styled.span`
+  color: ${props => COLORS.getColor('neutral_600', props.theme)};
+  font-weight: bold;
+  font-size: 14px;
+  margin-left: 4px;
+`;
+export const MenuSection = styled.li`
+  margin-top: 16px;
+
+  .disabled-link {
+    color: #21212150;
+    pointer-events: none;
+    key-events: none;
+  }
+`;
+export const MenuSectionList = styled.ul`
+  list-style: none;
+  padding: 0;
+
+  li {
+    width: 80%;
+    height: 48px;
+    margin: 0 auto 0 12px;
+
+    a {
+      height: 100%;
+    }
+  }
+`;
+export const UserMenuSectionListStyling = css`
+  li {
+    position: relative;
+  }
+
+  li:hover:not(.disabled) {
+    z-index: ${Z_INDEXES.hover};
+    background-color: ${props => COLORS.getColor('primary_20', props.theme)};
+
+    a {
+      color: ${props => COLORS.getColor('primary_600', props.theme)};
+    }
+
+    svg {
+      color: ${props => COLORS.getColor('primary_600', props.theme)};
+    }
+  }
+
+  li:focus-within:not(.disabled) {
+    z-index: ${Z_INDEXES.focus};
+
+    ${focusStyles}
+    a {
+      outline: none;
+    }
+  }
+
+  li:active:not(.disabled) {
+    z-index: ${Z_INDEXES.active};
+    background: ${props => COLORS.getColor('primary_100', props.theme)};
+
+    a {
+      color: ${props => COLORS.getColor('primary_800', props.theme)};
+    }
+
+    svg {
+      color: ${props => COLORS.getColor('primary_800', props.theme)};
+    }
+  }
+
+  .disabled {
+    a {
+      color: ${props => COLORS.getColor('neutral_300', props.theme)};
+    }
+
+    svg {
+      color: ${props => COLORS.getColor('neutral_300', props.theme)};
+    }
+
+    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};
+  }
+`;
+export const flowDown = keyframes`
+  0% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+export const MobileMenuWrapper = styled.div`
+  width: 100%;
+  box-sizing: border-box;
+  flex-flow: column;
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+`;
+export const ScrollableContainer = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  max-height: 100%;
+
+  &.scrollable {
+    margin-right: 6px;
+    padding-right: 10px;
+  }
+
+  ${scrollBarStyling(Size.Small)}
+  ::-webkit-scrollbar-track {
+    margin: 8px;
+  }
+`;
+export const MobileHeaderText = styled.div`
+  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}
+  ${BREAKPOINTS.SMALL} {
+    ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}
+  }
+`;
+export const MobileHeaderNote = styled.div`
+  word-break: break-all;
+  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}
+`;
+export const MobileHeaderContainer = styled.div`
+  margin: 0 24px;
+  padding-bottom: 8px;
+  box-sizing: border-box;
+  border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};
+  display: flex;
+  flex-direction: column;
+`;
 //# sourceMappingURL=CommonStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CommonStyles.js","names":["styled","css","keyframes","BREAKPOINTS","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","focusStyles","scrollBarStyling","Z_INDEXES","NavLink","Size","RowLayout","div","_templateObject","_taggedTemplateLiteral","Button","button","_templateObject2","props","getColor","theme","flowLeft","_templateObject3","flowRight","_templateObject4","fadeOut","_templateObject5","fadeIn","_templateObject6","Menu","_templateObject7","off_canvas","SMALL","Right","_templateObject8","SiteName","span","_templateObject9","MenuSection","li","_templateObject10","MenuSectionList","ul","_templateObject11","UserMenuSectionListStyling","_templateObject12","hover","focus","active","MenuLink","_templateObject13","Regular","flowDown","_templateObject14","MobileMenuWrapper","_templateObject15","ScrollableContainer","_templateObject16","Small","MobileHeaderText","_templateObject17","Bold","MobileHeaderNote","_templateObject18","MobileHeaderContainer","_templateObject19"],"sources":["../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"sourcesContent":["import styled, {css, keyframes} from 'styled-components';\r\nimport {\r\n  BREAKPOINTS,\r\n  COLORS,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling,\r\n  focusStyles,\r\n  scrollBarStyling,\r\n  Z_INDEXES\r\n} from '../../styles';\r\nimport {NavLink} from 'react-router-dom';\r\nimport {Size} from '../../types';\r\n\r\nexport const RowLayout = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n`;\r\n\r\nexport const Button = styled.button`\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  font-weight: bold;\r\n  border: 0;\r\n`;\r\n\r\nconst flowLeft = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateX(100%);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n`;\r\n\r\nconst flowRight = keyframes`\r\n  0% {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n    visibility: visible;\r\n  }\r\n  to {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transform: translateX(100%);\r\n  }\r\n`;\r\n\r\nexport const fadeOut = keyframes`\r\n  0% {\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n  to {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n  }\r\n`;\r\n\r\nexport const fadeIn = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n`;\r\n\r\nexport const Menu = styled.div`\r\n  height: 100%;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  box-sizing: border-box;\r\n  right: 0;\r\n  top: 0;\r\n  position: absolute;\r\n  z-index: ${Z_INDEXES.off_canvas};\r\n  align-items: center;\r\n\r\n  width: 320px;\r\n\r\n  ${BREAKPOINTS.SMALL} {\r\n    width: 400px;\r\n  }\r\n\r\n  .open & {\r\n    visibility: visible;\r\n    display: flex;\r\n    animation: ${flowLeft} 0.3s ease-in-out;\r\n  }\r\n\r\n  .closed & {\r\n    visibility: hidden;\r\n    animation: ${flowRight} 0.3s ease-in-out;\r\n  }\r\n`;\r\n\r\nexport const Right = styled.div`\r\n  display: flex;\r\n  margin-left: auto;\r\n`;\r\n\r\nexport const SiteName = styled.span`\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  font-weight: bold;\r\n  font-size: 14px;\r\n  margin-left: 4px;\r\n`;\r\n\r\nexport const MenuSection = styled.li`\r\n  margin-top: 16px;\r\n\r\n  .disabled-link {\r\n    color: #21212150;\r\n    pointer-events: none;\r\n    key-events: none;\r\n  }\r\n`;\r\n\r\nexport const MenuSectionList = styled.ul`\r\n  list-style: none;\r\n  padding: 0;\r\n\r\n  li {\r\n    width: 80%;\r\n    height: 48px;\r\n    margin: 0 auto 0 12px;\r\n\r\n    a {\r\n      height: 100%;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const UserMenuSectionListStyling = css`\r\n  li {\r\n    position: relative;\r\n  }\r\n\r\n  li:hover:not(.disabled) {\r\n    z-index: ${Z_INDEXES.hover};\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    a {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  li:focus-within:not(.disabled) {\r\n    z-index: ${Z_INDEXES.focus};\r\n\r\n    ${focusStyles}\r\n    a {\r\n      outline: none;\r\n    }\r\n  }\r\n\r\n  li:active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    a {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  .disabled {\r\n    a {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const MenuLink = styled(NavLink)`\r\n  border: none;\r\n  background: transparent;\r\n  margin: auto;\r\n\r\n  box-sizing: border-box;\r\n\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n\r\n  text-decoration: none;\r\n  text-align: center;\r\n  align-items: center;\r\n  display: flex;\r\n`;\r\n\r\nexport const flowDown = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateY(-10px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n`;\r\n\r\nexport const MobileMenuWrapper = styled.div`\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  flex-flow: column;\r\n  display: flex;\r\n  flex: 1;\r\n  overflow: hidden;\r\n`;\r\n\r\nexport const ScrollableContainer = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  overflow-y: auto;\r\n  max-height: 100%;\r\n\r\n  &.scrollable {\r\n    margin-right: 6px;\r\n    padding-right: 10px;\r\n  }\r\n\r\n  ${scrollBarStyling(Size.Small)}\r\n  ::-webkit-scrollbar-track {\r\n    margin: 8px;\r\n  }\r\n`;\r\n\r\nexport const MobileHeaderText = styled.div`\r\n  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  ${BREAKPOINTS.SMALL} {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n`;\r\nexport const MobileHeaderNote = styled.div`\r\n  word-break: break-all;\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n`;\r\n\r\nexport const MobileHeaderContainer = styled.div`\r\n  margin: 0 24px;\r\n  padding-bottom: 8px;\r\n  box-sizing: border-box;\r\n  border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  display: flex;\r\n  flex-direction: column;\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CommonStyles.js","names":["styled","css","keyframes","BREAKPOINTS","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","focusStyles","scrollBarStyling","Z_INDEXES","Size","RowLayout","div","Button","button","props","getColor","theme","flowLeft","flowRight","fadeOut","fadeIn","Menu","off_canvas","SMALL","Right","SiteName","span","MenuSection","li","MenuSectionList","ul","UserMenuSectionListStyling","hover","focus","active","flowDown","MobileMenuWrapper","ScrollableContainer","Small","MobileHeaderText","Bold","MobileHeaderNote","Regular","MobileHeaderContainer"],"sources":["../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"sourcesContent":["import styled, {css, keyframes} from 'styled-components';\r\nimport {\r\n  BREAKPOINTS,\r\n  COLORS,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling,\r\n  focusStyles,\r\n  scrollBarStyling,\r\n  Z_INDEXES\r\n} from '../../styles';\r\nimport {Size} from '../../types';\r\nimport {StyledLink} from '../../HyperLink/HyperLink';\r\n\r\nexport const RowLayout = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n`;\r\n\r\nexport const Button = styled.button`\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  font-weight: bold;\r\n  border: 0;\r\n`;\r\n\r\nconst flowLeft = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateX(100%);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n`;\r\n\r\nconst flowRight = keyframes`\r\n  0% {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n    visibility: visible;\r\n  }\r\n  to {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transform: translateX(100%);\r\n  }\r\n`;\r\n\r\n\r\nexport const fadeOut = keyframes`\r\n  0% {\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n  to {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n  }\r\n`;\r\n\r\nexport const fadeIn = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n`;\r\n\r\nexport const Menu = styled.div`\r\n  height: 100%;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  box-sizing: border-box;\r\n  right: 0;\r\n  top: 0;\r\n  position: absolute;\r\n  z-index: ${Z_INDEXES.off_canvas};\r\n  align-items: center;\r\n\r\n  width: 320px;\r\n\r\n  ${BREAKPOINTS.SMALL} {\r\n    width: 400px;\r\n  }\r\n\r\n  .open & {\r\n    visibility: visible;\r\n    display: flex;\r\n    animation: ${flowLeft} 0.3s ease-in-out;\r\n  }\r\n\r\n  .closed & {\r\n    visibility: hidden;\r\n    animation: ${flowRight} 0.3s ease-in-out;\r\n  }\r\n`;\r\n\r\nexport const Right = styled.div`\r\n  display: flex;\r\n  margin-left: auto;\r\n`;\r\n\r\nexport const SiteName = styled.span`\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  font-weight: bold;\r\n  font-size: 14px;\r\n  margin-left: 4px;\r\n`;\r\n\r\nexport const MenuSection = styled.li`\r\n  margin-top: 16px;\r\n\r\n  .disabled-link {\r\n    color: #21212150;\r\n    pointer-events: none;\r\n    key-events: none;\r\n  }\r\n`;\r\n\r\nexport const MenuSectionList = styled.ul`\r\n  list-style: none;\r\n  padding: 0;\r\n\r\n  li {\r\n    width: 80%;\r\n    height: 48px;\r\n    margin: 0 auto 0 12px;\r\n\r\n    a {\r\n      height: 100%;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const UserMenuSectionListStyling = css`\r\n  li {\r\n    position: relative;\r\n  }\r\n\r\n  li:hover:not(.disabled) {\r\n    z-index: ${Z_INDEXES.hover};\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    a {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  li:focus-within:not(.disabled) {\r\n    z-index: ${Z_INDEXES.focus};\r\n\r\n    ${focusStyles}\r\n    a {\r\n      outline: none;\r\n    }\r\n  }\r\n\r\n  li:active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    a {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  .disabled {\r\n    a {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const flowDown = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateY(-10px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n`;\r\n\r\nexport const MobileMenuWrapper = styled.div`\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  flex-flow: column;\r\n  display: flex;\r\n  flex: 1;\r\n  overflow: hidden;\r\n`;\r\n\r\nexport const ScrollableContainer = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  overflow-y: auto;\r\n  max-height: 100%;\r\n\r\n  &.scrollable {\r\n    margin-right: 6px;\r\n    padding-right: 10px;\r\n  }\r\n\r\n  ${scrollBarStyling(Size.Small)}\r\n  ::-webkit-scrollbar-track {\r\n    margin: 8px;\r\n  }\r\n`;\r\n\r\nexport const MobileHeaderText = styled.div`\r\n  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  ${BREAKPOINTS.SMALL} {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n`;\r\nexport const MobileHeaderNote = styled.div`\r\n  word-break: break-all;\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n`;\r\n\r\nexport const MobileHeaderContainer = styled.div`\r\n  margin: 0 24px;\r\n  padding-bottom: 8px;\r\n  box-sizing: border-box;\r\n  border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  display: flex;\r\n  flex-direction: column;\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/GlobalNavigationBar/mobile/MobileActionContainer.cjs

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MobileActionContainer = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Button = require("../../Button");
@@ -13,8 +12,17 @@ var _styles = require("../../styles");
 var _types = require("../../types");
 var _rooks = require("rooks");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-const ActionContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), props => _styles.COLORS.getColor('neutral_200', props.theme), _styles.BREAKPOINTS.SMALL);
+const ActionContainer = _styledComponents.default.div`
+  padding: 8px 16px;
+  box-sizing: border-box;
+  border-top: 1px solid ${props => _styles.COLORS.getColor('neutral_200', props.theme)};
+  display: flex;
+  flex-direction: column;
+
+  ${_styles.BREAKPOINTS.SMALL} {
+    padding: 16px;
+  }
+`;
 const MobileActionContainer = _ref => {
   let {
     disabled,

package/dist/GlobalNavigationBar/mobile/MobileActionContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MobileActionContainer.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_Button","_styles","_types","_rooks","_jsxRuntime","_templateObject","ActionContainer","styled","div","_taggedTemplateLiteral2","default","props","COLORS","getColor","theme","BREAKPOINTS","SMALL","MobileActionContainer","_ref","disabled","variant","icon","label","loading","action","isSmallScreen","useMediaMatch","replace","jsx","children","Button","size","Size","Medium","Small","onClick","exports"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileActionContainer.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\nimport { Button } from '../../Button';\r\nimport { BREAKPOINTS, COLORS } from '../../styles';\r\nimport { Size } from '../../types';\r\nimport { MenuButton } from '../types';\r\nimport {useMediaMatch} from \"rooks\";\r\n\r\nconst ActionContainer = styled.div`\r\n  padding: 8px 16px;\r\n  box-sizing: border-box;\r\n  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  ${BREAKPOINTS.SMALL} {\r\n    padding: 16px;\r\n  }\r\n`;\r\n\r\ninterface MobileActionContainerProps extends MenuButton {}\r\n\r\nexport const MobileActionContainer: React.FunctionComponent<MobileActionContainerProps> = ({ disabled, variant = 'secondary', icon, label, loading, action }) => {\r\n  const isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));\r\n\r\n  return (\r\n    <ActionContainer>\r\n      <Button variant={variant} size={isSmallScreen ? Size.Medium : Size.Small} disabled={disabled} icon={icon} loading={loading} onClick={action}>\r\n        {label}\r\n      </Button>\r\n    </ActionContainer>\r\n  );\r\n};\r\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAEA,IAAAK,MAAA,GAAAL,OAAA;AAAoC,IAAAM,WAAA,GAAAN,OAAA;AAAA,IAAAO,eAAA;AAEpC,MAAMC,eAAe,GAAGC,yBAAM,CAACC,GAAG,CAAAH,eAAA,KAAAA,eAAA,OAAAI,uBAAA,CAAAC,OAAA,8KAGRC,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,EAI1EC,mBAAW,CAACC,KAAK,CAGpB;AAIM,MAAMC,qBAA0E,GAAGC,IAAA,IAAuE;EAAA,IAAtE;IAAEC,QAAQ;IAAEC,OAAO,GAAG,WAAW;IAAEC,IAAI;IAAEC,KAAK;IAAEC,OAAO;IAAEC;EAAO,CAAC,GAAAN,IAAA;EAC1J,MAAMO,aAAa,GAAG,IAAAC,oBAAa,EAACX,mBAAW,CAACC,KAAK,CAACW,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;EAE7E,oBACE,IAAAvB,WAAA,CAAAwB,GAAA,EAACtB,eAAe;IAAAuB,QAAA,eACd,IAAAzB,WAAA,CAAAwB,GAAA,EAAC5B,OAAA,CAAA8B,MAAM;MAACV,OAAO,EAAEA,OAAQ;MAACW,IAAI,EAAEN,aAAa,GAAGO,WAAI,CAACC,MAAM,GAAGD,WAAI,CAACE,KAAM;MAACf,QAAQ,EAAEA,QAAS;MAACE,IAAI,EAAEA,IAAK;MAACE,OAAO,EAAEA,OAAQ;MAACY,OAAO,EAAEX,MAAO;MAAAK,QAAA,EACzIP;IAAK,CACA;EAAC,CACM,CAAC;AAEtB,CAAC;AAACc,OAAA,CAAAnB,qBAAA,GAAAA,qBAAA","ignoreList":[]}
+{"version":3,"file":"MobileActionContainer.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_Button","_styles","_types","_rooks","_jsxRuntime","ActionContainer","styled","div","props","COLORS","getColor","theme","BREAKPOINTS","SMALL","MobileActionContainer","_ref","disabled","variant","icon","label","loading","action","isSmallScreen","useMediaMatch","replace","jsx","children","Button","size","Size","Medium","Small","onClick","exports"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileActionContainer.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\nimport { Button } from '../../Button';\r\nimport { BREAKPOINTS, COLORS } from '../../styles';\r\nimport { Size } from '../../types';\r\nimport { MenuButton } from '../types';\r\nimport {useMediaMatch} from \"rooks\";\r\n\r\nconst ActionContainer = styled.div`\r\n  padding: 8px 16px;\r\n  box-sizing: border-box;\r\n  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  ${BREAKPOINTS.SMALL} {\r\n    padding: 16px;\r\n  }\r\n`;\r\n\r\ninterface MobileActionContainerProps extends MenuButton {}\r\n\r\nexport const MobileActionContainer: React.FunctionComponent<MobileActionContainerProps> = ({ disabled, variant = 'secondary', icon, label, loading, action }) => {\r\n  const isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));\r\n\r\n  return (\r\n    <ActionContainer>\r\n      <Button variant={variant} size={isSmallScreen ? Size.Medium : Size.Small} disabled={disabled} icon={icon} loading={loading} onClick={action}>\r\n        {label}\r\n      </Button>\r\n    </ActionContainer>\r\n  );\r\n};\r\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAEA,IAAAK,MAAA,GAAAL,OAAA;AAAoC,IAAAM,WAAA,GAAAN,OAAA;AAEpC,MAAMO,eAAe,GAAGC,yBAAM,CAACC,GAAG;AAClC;AACA;AACA,0BAA0BC,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E;AACA;AACA;AACA,IAAIC,mBAAW,CAACC,KAAK;AACrB;AACA;AACA,CAAC;AAIM,MAAMC,qBAA0E,GAAGC,IAAA,IAAuE;EAAA,IAAtE;IAAEC,QAAQ;IAAEC,OAAO,GAAG,WAAW;IAAEC,IAAI;IAAEC,KAAK;IAAEC,OAAO;IAAEC;EAAO,CAAC,GAAAN,IAAA;EAC1J,MAAMO,aAAa,GAAG,IAAAC,oBAAa,EAACX,mBAAW,CAACC,KAAK,CAACW,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;EAE7E,oBACE,IAAApB,WAAA,CAAAqB,GAAA,EAACpB,eAAe;IAAAqB,QAAA,eACd,IAAAtB,WAAA,CAAAqB,GAAA,EAACzB,OAAA,CAAA2B,MAAM;MAACV,OAAO,EAAEA,OAAQ;MAACW,IAAI,EAAEN,aAAa,GAAGO,WAAI,CAACC,MAAM,GAAGD,WAAI,CAACE,KAAM;MAACf,QAAQ,EAAEA,QAAS;MAACE,IAAI,EAAEA,IAAK;MAACE,OAAO,EAAEA,OAAQ;MAACY,OAAO,EAAEX,MAAO;MAAAK,QAAA,EACzIP;IAAK,CACA;EAAC,CACM,CAAC;AAEtB,CAAC;AAACc,OAAA,CAAAnB,qBAAA,GAAAA,qBAAA","ignoreList":[]}

package/dist/GlobalNavigationBar/mobile/MobileActionContainer.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { MenuButton } from '../types';
-interface MobileActionContainerProps extends MenuButton {
-}
-export declare const MobileActionContainer: React.FunctionComponent<MobileActionContainerProps>;
-export {};
+import React from 'react';
+import { MenuButton } from '../types';
+interface MobileActionContainerProps extends MenuButton {
+}
+export declare const MobileActionContainer: React.FunctionComponent<MobileActionContainerProps>;
+export {};

package/dist/GlobalNavigationBar/mobile/MobileActionContainer.js

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject;
 import React from 'react';
 import styled from 'styled-components';
 import { Button } from '../../Button';
@@ -7,7 +5,17 @@ import { BREAKPOINTS, COLORS } from '../../styles';
 import { Size } from '../../types';
 import { useMediaMatch } from "rooks";
 import { jsx as _jsx } from "react/jsx-runtime";
-const ActionContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), props => COLORS.getColor('neutral_200', props.theme), BREAKPOINTS.SMALL);
+const ActionContainer = styled.div`
+  padding: 8px 16px;
+  box-sizing: border-box;
+  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};
+  display: flex;
+  flex-direction: column;
+
+  ${BREAKPOINTS.SMALL} {
+    padding: 16px;
+  }
+`;
 export const MobileActionContainer = _ref => {
   let {
     disabled,

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

@@ -1 +1 @@
-{"version":3,"file":"MobileActionContainer.js","names":["React","styled","Button","BREAKPOINTS","COLORS","Size","useMediaMatch","jsx","_jsx","ActionContainer","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","SMALL","MobileActionContainer","_ref","disabled","variant","icon","label","loading","action","isSmallScreen","replace","children","size","Medium","Small","onClick"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileActionContainer.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\nimport { Button } from '../../Button';\r\nimport { BREAKPOINTS, COLORS } from '../../styles';\r\nimport { Size } from '../../types';\r\nimport { MenuButton } from '../types';\r\nimport {useMediaMatch} from \"rooks\";\r\n\r\nconst ActionContainer = styled.div`\r\n  padding: 8px 16px;\r\n  box-sizing: border-box;\r\n  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  ${BREAKPOINTS.SMALL} {\r\n    padding: 16px;\r\n  }\r\n`;\r\n\r\ninterface MobileActionContainerProps extends MenuButton {}\r\n\r\nexport const MobileActionContainer: React.FunctionComponent<MobileActionContainerProps> = ({ disabled, variant = 'secondary', icon, label, loading, action }) => {\r\n  const isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));\r\n\r\n  return (\r\n    <ActionContainer>\r\n      <Button variant={variant} size={isSmallScreen ? Size.Medium : Size.Small} disabled={disabled} icon={icon} loading={loading} onClick={action}>\r\n        {label}\r\n      </Button>\r\n    </ActionContainer>\r\n  );\r\n};\r\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,QAAQ,cAAc;AACrC,SAASC,WAAW,EAAEC,MAAM,QAAQ,cAAc;AAClD,SAASC,IAAI,QAAQ,aAAa;AAElC,SAAQC,aAAa,QAAO,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEpC,MAAMC,eAAe,GAAGR,MAAM,CAACS,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,6KAGRC,KAAK,IAAIT,MAAM,CAACU,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,EAI1EZ,WAAW,CAACa,KAAK,CAGpB;AAID,OAAO,MAAMC,qBAA0E,GAAGC,IAAA,IAAuE;EAAA,IAAtE;IAAEC,QAAQ;IAAEC,OAAO,GAAG,WAAW;IAAEC,IAAI;IAAEC,KAAK;IAAEC,OAAO;IAAEC;EAAO,CAAC,GAAAN,IAAA;EAC1J,MAAMO,aAAa,GAAGnB,aAAa,CAACH,WAAW,CAACa,KAAK,CAACU,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;EAE7E,oBACElB,IAAA,CAACC,eAAe;IAAAkB,QAAA,eACdnB,IAAA,CAACN,MAAM;MAACkB,OAAO,EAAEA,OAAQ;MAACQ,IAAI,EAAEH,aAAa,GAAGpB,IAAI,CAACwB,MAAM,GAAGxB,IAAI,CAACyB,KAAM;MAACX,QAAQ,EAAEA,QAAS;MAACE,IAAI,EAAEA,IAAK;MAACE,OAAO,EAAEA,OAAQ;MAACQ,OAAO,EAAEP,MAAO;MAAAG,QAAA,EACzIL;IAAK,CACA;EAAC,CACM,CAAC;AAEtB,CAAC","ignoreList":[]}
+{"version":3,"file":"MobileActionContainer.js","names":["React","styled","Button","BREAKPOINTS","COLORS","Size","useMediaMatch","jsx","_jsx","ActionContainer","div","props","getColor","theme","SMALL","MobileActionContainer","_ref","disabled","variant","icon","label","loading","action","isSmallScreen","replace","children","size","Medium","Small","onClick"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileActionContainer.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\nimport { Button } from '../../Button';\r\nimport { BREAKPOINTS, COLORS } from '../../styles';\r\nimport { Size } from '../../types';\r\nimport { MenuButton } from '../types';\r\nimport {useMediaMatch} from \"rooks\";\r\n\r\nconst ActionContainer = styled.div`\r\n  padding: 8px 16px;\r\n  box-sizing: border-box;\r\n  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  ${BREAKPOINTS.SMALL} {\r\n    padding: 16px;\r\n  }\r\n`;\r\n\r\ninterface MobileActionContainerProps extends MenuButton {}\r\n\r\nexport const MobileActionContainer: React.FunctionComponent<MobileActionContainerProps> = ({ disabled, variant = 'secondary', icon, label, loading, action }) => {\r\n  const isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));\r\n\r\n  return (\r\n    <ActionContainer>\r\n      <Button variant={variant} size={isSmallScreen ? Size.Medium : Size.Small} disabled={disabled} icon={icon} loading={loading} onClick={action}>\r\n        {label}\r\n      </Button>\r\n    </ActionContainer>\r\n  );\r\n};\r\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,QAAQ,cAAc;AACrC,SAASC,WAAW,EAAEC,MAAM,QAAQ,cAAc;AAClD,SAASC,IAAI,QAAQ,aAAa;AAElC,SAAQC,aAAa,QAAO,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEpC,MAAMC,eAAe,GAAGR,MAAM,CAACS,GAAG;AAClC;AACA;AACA,0BAA0BC,KAAK,IAAIP,MAAM,CAACQ,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC9E;AACA;AACA;AACA,IAAIV,WAAW,CAACW,KAAK;AACrB;AACA;AACA,CAAC;AAID,OAAO,MAAMC,qBAA0E,GAAGC,IAAA,IAAuE;EAAA,IAAtE;IAAEC,QAAQ;IAAEC,OAAO,GAAG,WAAW;IAAEC,IAAI;IAAEC,KAAK;IAAEC,OAAO;IAAEC;EAAO,CAAC,GAAAN,IAAA;EAC1J,MAAMO,aAAa,GAAGjB,aAAa,CAACH,WAAW,CAACW,KAAK,CAACU,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;EAE7E,oBACEhB,IAAA,CAACC,eAAe;IAAAgB,QAAA,eACdjB,IAAA,CAACN,MAAM;MAACgB,OAAO,EAAEA,OAAQ;MAACQ,IAAI,EAAEH,aAAa,GAAGlB,IAAI,CAACsB,MAAM,GAAGtB,IAAI,CAACuB,KAAM;MAACX,QAAQ,EAAEA,QAAS;MAACE,IAAI,EAAEA,IAAK;MAACE,OAAO,EAAEA,OAAQ;MAACQ,OAAO,EAAEP,MAAO;MAAAG,QAAA,EACzIL;IAAK,CACA;EAAC,CACM,CAAC;AAEtB,CAAC","ignoreList":[]}

package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs

@@ -5,29 +5,63 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _icons = require("../../icons");
 var _styles = require("../../styles");
-var _reactRouterDom = require("react-router-dom");
 var _Button = require("../../Button");
 var _assets = require("../../assets");
 var _MobileMenuHeader = _interopRequireDefault(require("./MobileMenuHeader"));
 var _MobileMenuContent = _interopRequireDefault(require("./MobileMenuContent"));
 var _StackState = require("../../common/StackState");
 var _rooks = require("rooks");
+var _NavigationProvider = require("../../Navigation/NavigationProvider");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.Z_INDEXES.off_canvas, _styles.BREAKPOINTS.SMALL);
-const SwitcherLabel = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: auto;\n"])));
-const MobileFooter = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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"])), props => _styles.COLORS.getColor('neutral_200', props.theme), props => (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme)), _styles.BREAKPOINTS.SMALL, props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme)));
-const CustomContent = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n"])));
+const Wrapper = _styledComponents.default.div`
+  width: 320px;
+  z-index: ${_styles.Z_INDEXES.off_canvas};
+  height: 100%;
+  box-sizing: border-box;
+
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  ${_styles.BREAKPOINTS.SMALL} {
+    width: 400px;
+  }
+`;
+const SwitcherLabel = _styledComponents.default.div`
+  margin-left: auto;
+`;
+const MobileFooter = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 48px;
+
+  padding: 0 4px 0 16px;
+  border-top: 1px solid ${props => _styles.COLORS.getColor('neutral_200', props.theme)};
+
+  ${props => (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme))}
+  ${_styles.BREAKPOINTS.SMALL} {
+    height: 56px;
+    padding: 4px 8px 4px 16px;
+    ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme))}
+  }
+`;
+const CustomContent = _styledComponents.default.div`
+  width: 100%;
+  box-sizing: border-box;
+  flex-flow: column;
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+`;
 const MobileMenu = _ref => {
-  var _current$header;
   let {
     show,
     profile,
@@ -47,9 +81,11 @@ const MobileMenu = _ref => {
     peek
   } = (0, _StackState.useStackState)();
   const isMediumScreen = (0, _rooks.useMediaMatch)(_styles.BREAKPOINTS.LARGE.replace('@media ', ''));
-  const location = (0, _reactRouterDom.useLocation)();
+  const {
+    currentPath
+  } = (0, _NavigationProvider.useNavigation)();
   const onSubMenuOpen = menu => {
-    switch (menu === null || menu === void 0 ? void 0 : menu.type) {
+    switch (menu?.type) {
       case 'group':
         push({
           header: {
@@ -81,7 +117,7 @@ const MobileMenu = _ref => {
   };
   React.useEffect(() => {
     onClose();
-  }, [location]);
+  }, [currentPath]);
   React.useEffect(() => {
     isMediumScreen && onClose();
   }, [isMediumScreen]);
@@ -103,24 +139,24 @@ const MobileMenu = _ref => {
     }, 300);
   }, [show]);
   const current = peek();
-  const switcher = current === null || current === void 0 || (_current$header = current.header) === null || _current$header === void 0 || (_current$header = _current$header.buttons) === null || _current$header === void 0 ? void 0 : _current$header.find(a => a.type === 'switcher');
+  const switcher = current?.header?.buttons?.find(a => a.type === 'switcher');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileMenuHeader.default, {
-      buttons: current === null || current === void 0 ? void 0 : current.header.buttons,
+      buttons: current?.header.buttons,
       onGoBack: length > 1 ? pop : undefined,
       onSubMenuOpen: onSubMenuOpen,
       profile: profile,
-      label: current === null || current === void 0 ? void 0 : current.header.label,
+      label: current?.header.label,
       onClose: onClose
-    }), (current === null || current === void 0 ? void 0 : current.customContent) && /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomContent, {
-      children: current === null || current === void 0 ? void 0 : current.customContent()
-    }), (current === null || current === void 0 ? void 0 : current.content) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileMenuContent.default, {
-      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,
+    }), current?.customContent && /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomContent, {
+      children: current?.customContent()
+    }), current?.content && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileMenuContent.default, {
+      header: current?.content.header,
+      items: current?.content.items,
+      footer: current?.content.footer,
+      action: current?.content.action,
       onSubMenuOpen: onSubMenuOpen
-    }), (current === null || current === void 0 ? void 0 : current.footer) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(MobileFooter, {
+    }), current?.footer && /*#__PURE__*/(0, _jsxRuntime.jsxs)(MobileFooter, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_assets.LaerdalLogo, {
         height: '36px',
         width: '66px'