@laerdal/life-react-components 1.8.0-dev.9 → 1.9.0

package/dist/GlobalNavigationBar/desktop/UserMenu.js

@@ -0,0 +1,163 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+
+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 '../NavigationHelper';
+import { ProfileButton } from '../../ProfileButton';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var UserMenuScrollContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n"])));
+var UserMenuPinnedContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
+var UserMenuWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  align-items: center;\n  justify-content: center;\n"])));
+var MenuSectionHeader = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 0;\n\n  ", ";\n"])), UserMenuSectionListStyling);
+var UserSectionAvatar = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\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(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  padding: 2px 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"])));
+var UserSectionInfoName = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n"])), ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
+var UserSectionInfoEmail = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500));
+var UserSectionInfoLink = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\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(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 0 24px 8px 24px;\n  gap: 16px;\n"])));
+
+var UserMenu = function UserMenu(_ref) {
+  var show = _ref.show,
+      user = _ref.user,
+      onHideUserMenu = _ref.onHideUserMenu,
+      sections = _ref.sections,
+      signOut = _ref.signOut,
+      label = _ref.label;
+
+  var _useNavigationHelper = useNavigationHelper(),
+      navigate = _useNavigationHelper.navigate,
+      isActiveRoute = _useNavigationHelper.isActiveRoute;
+
+  React.useEffect(function () {
+    if (!onHideUserMenu) return;
+
+    function handleKeyPress(e) {
+      if (e.key === 'Escape' || e.key === 'Esc') {
+        onHideUserMenu();
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyPress, false);
+    return function () {
+      document.removeEventListener('keydown', handleKeyPress, false);
+    };
+  }, [onHideUserMenu]);
+
+  var renderItem = function renderItem(item, section, index) {
+    return /*#__PURE__*/_jsx(MenuItem, {
+      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 onClickHandler() {
+        item.action && item.action();
+        navigate(item.to, !!item.external);
+      }
+    }, index);
+  };
+
+  return /*#__PURE__*/_jsxs(UserMenuWrapper, {
+    onClick: onHideUserMenu,
+    className: show ? 'show' : '',
+    role: "menu",
+    "aria-labelledby": "UserMenuButton",
+    children: [/*#__PURE__*/_jsxs(UserMenuScrollContainer, {
+      children: [/*#__PURE__*/_jsxs(UserSection, {
+        children: [/*#__PURE__*/_jsx(UserSectionAvatar, {
+          children: /*#__PURE__*/_jsx(ProfileButton, {
+            onClick: function onClick() {},
+            tabIndex: -1,
+            initials: user.firstName[0] + user.lastName[0]
+          })
+        }), /*#__PURE__*/_jsxs(UserSectionInfo, {
+          children: [/*#__PURE__*/_jsx(UserSectionInfoName, {
+            "data-hj-suppress": true,
+            children: "".concat(user.firstName, " ").concat(user.lastName)
+          }), /*#__PURE__*/_jsx(UserSectionInfoEmail, {
+            "data-hj-suppress": true,
+            children: user.email
+          }), user.link && /*#__PURE__*/_jsx(HyperLink, {
+            variant: 'default',
+            href: user.link.href,
+            target: user.link.target,
+            id: user.link.id,
+            onClick: user.link.onClick,
+            children: /*#__PURE__*/_jsxs(UserSectionInfoLink, {
+              children: [/*#__PURE__*/_jsx("span", {
+                children: user.link.label
+              }), user.link.icon && /*#__PURE__*/React.cloneElement(user.link.icon, {
+                size: '16px'
+              })]
+            })
+          })]
+        })]
+      }), sections.filter(function (a) {
+        return !a.pinned;
+      }).map(function (section, index) {
+        return /*#__PURE__*/_jsxs(MenuSection, {
+          className: section.divider ? 'divider' : '',
+          children: [section.label && /*#__PURE__*/_jsx(MenuSectionHeader, {
+            children: section.label
+          }), /*#__PURE__*/_jsx(MenuSectionList, {
+            children: section.items.map(function (item, index) {
+              return renderItem(item, section, index);
+            })
+          }, index)]
+        }, index);
+      })]
+    }), /*#__PURE__*/_jsxs(UserMenuPinnedContainer, {
+      children: [sections.filter(function (a) {
+        return !!a.pinned;
+      }).map(function (section, index) {
+        return /*#__PURE__*/_jsxs(MenuSection, {
+          className: section.divider || index === 0 ? 'divider' : '',
+          children: [section.label && /*#__PURE__*/_jsx(MenuSectionHeader, {
+            children: section.label
+          }), /*#__PURE__*/_jsx(MenuSectionList, {
+            children: section.items.map(function (item, index) {
+              return renderItem(item, section, index);
+            })
+          }, index)]
+        }, index);
+      }), signOut && /*#__PURE__*/_jsx(SignOutActionWrapper, {
+        children: /*#__PURE__*/_jsx(Button, {
+          width: '272px',
+          variant: "secondary",
+          icon: /*#__PURE__*/_jsx(SystemIcons.Logout, {}),
+          size: Size.Large,
+          onClick: function onClick(e) {
+            e.preventDefault();
+            signOut === null || signOut === void 0 ? void 0 : signOut.action();
+          },
+          children: signOut === null || signOut === void 0 ? void 0 : signOut.label
+        })
+      })]
+    })]
+  });
+};
+
+UserMenu.propTypes = {
+  show: _pt.bool,
+  onHideUserMenu: _pt.func.isRequired
+};
+export default UserMenu;
+//# sourceMappingURL=UserMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/desktop/UserMenu.tsx"],"names":["React","styled","Button","BOXSHADOWS","COLORS","ComponentLStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","Size","flowDown","UserMenuSectionListStyling","SystemIcons","HyperLink","Breakpoints","MenuItem","useNavigationHelper","ProfileButton","UserMenuScrollContainer","div","UserMenuPinnedContainer","UserMenuWrapper","white","off_canvas","MEDIUM","BOXSHADOW_CENTERED","neutral_200","fixed_menu","MenuSection","SignOutActionWrapper","MenuSectionHeader","neutral_20","Bold","neutral_500","MenuSectionList","UserSectionAvatar","UserSectionInfo","UserSectionInfoName","neutral_600","UserSectionInfoEmail","Regular","UserSectionInfoLink","UserSection","UserMenu","show","user","onHideUserMenu","sections","signOut","label","navigate","isActiveRoute","useEffect","handleKeyPress","e","key","document","addEventListener","removeEventListener","renderItem","item","section","index","external","to","exact","value","disabled","icon","displayLabel","action","firstName","lastName","email","link","href","target","id","onClick","cloneElement","size","filter","a","pinned","map","divider","items","Large","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../../Button';\nimport {\n  BOXSHADOWS,\n  COLORS,\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  Z_INDEXES\n} from '../../styles';\nimport {Size} from '../../types';\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {SystemIcons} from '../../icons';\nimport {HyperLink} from '../../HyperLink';\nimport {MenuNavigationItem, MenuNavigationItemTypeItem, MenuNavigationSection, ProfileMenu} from '../types';\nimport MobileMenuHeader from '../mobile/MobileMenuHeader';\nimport Breakpoints from '../../styles/breakpoints';\nimport {MenuItem} from '../../MenuItem';\nimport {useNavigationHelper} from '../NavigationHelper';\nimport {ProfileButton} from '../../ProfileButton';\n\nconst UserMenuScrollContainer = styled.div`\n  flex: 1;\n`;\n\nconst UserMenuPinnedContainer = styled.div``;\n\n\nconst UserMenuWrapper = styled.div`\n  margin: 0;\n  background-color: ${COLORS.white};\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: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  flex-flow: column;\n\n\n  ${Breakpoints.MEDIUM} {\n    flex-flow: initial;\n    top: initial;\n    right: initial;\n    height: initial;\n    animation: ${flowDown} 0.2s ease-in-out;\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n    border-radius: 8px;\n    border: 1px solid ${COLORS.neutral_200};\n    z-index: ${Z_INDEXES.fixed_menu};\n    padding: 24px 0;\n  }\n`;\n\n\nconst MenuSection = styled.div`\n  padding: 4px 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\nconst SignOutActionWrapper = styled(MenuSection)`\n  align-items: center;\n  justify-content: center;\n`;\n\nconst MenuSectionHeader = styled.div`\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: ${COLORS.neutral_20};\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n  margin: 0;\n  padding: 0;\n\n  ${UserMenuSectionListStyling};\n`;\n\n\nconst UserSectionAvatar = styled.div`\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\nconst UserSectionInfo = styled.div`\n  padding: 2px 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n`;\n\nconst UserSectionInfoName = styled.div`\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst UserSectionInfoEmail = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\n`;\n\nconst UserSectionInfoLink = styled.div`\n  padding: 2px 0;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n`;\n\nconst UserSection = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 0 24px 8px 24px;\n  gap: 16px;\n`;\n\ninterface UserMenuProps extends ProfileMenu {\n  show?: boolean;\n  onHideUserMenu: () => void;\n}\n\nconst UserMenu = ({show, user, onHideUserMenu, sections, signOut, label}: UserMenuProps) => {\n\n  const {navigate, isActiveRoute} = useNavigationHelper();\n\n  React.useEffect(() => {\n    if (!onHideUserMenu) return;\n\n    function handleKeyPress(e: any) {\n      if (e.key === 'Escape' || e.key === 'Esc') {\n        onHideUserMenu();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [onHideUserMenu]);\n\n  const renderItem = (item: MenuNavigationItem, section: MenuNavigationSection, index: number) =>\n    <MenuItem key={index}\n              id={`profile_${index}`}\n              active={!item.external && isActiveRoute(item.to, !!item.exact)}\n              item={{\n                value: item.to,\n                disabled: item.disabled,\n                icon: item.icon,\n                displayLabel: item.label,\n              }}\n              onClickHandler={() => {\n                item.action && item.action();\n                navigate(item.to, !!item.external);\n              }}/>\n\n  return (\n    <UserMenuWrapper onClick={onHideUserMenu}\n                     className={show ? 'show' : ''}\n                     role=\"menu\"\n                     aria-labelledby=\"UserMenuButton\">\n      <UserMenuScrollContainer>\n        <UserSection>\n          <UserSectionAvatar>\n            <ProfileButton onClick={() => {\n            }}\n                           tabIndex={-1}\n                           initials={user.firstName[0] + user.lastName[0]}/>\n          </UserSectionAvatar>\n          <UserSectionInfo>\n            <UserSectionInfoName data-hj-suppress>{`${user.firstName} ${user.lastName}`}</UserSectionInfoName>\n            <UserSectionInfoEmail data-hj-suppress>{user.email}</UserSectionInfoEmail>\n            {\n              user.link &&\n              <HyperLink variant={'default'}\n                         href={user.link.href}\n                         target={user.link.target}\n                         id={user.link.id}\n                         onClick={user.link.onClick}>\n                <UserSectionInfoLink>\n                  <span>\n                    {user.link.label}\n                  </span>\n                  {user.link.icon && React.cloneElement(user.link.icon, {size: '16px'})}\n                </UserSectionInfoLink>\n              </HyperLink>\n            }\n          </UserSectionInfo>\n        </UserSection>\n        {\n          sections.filter(a => !a.pinned).map((section, index) =>\n            <MenuSection key={index} className={section.divider ? 'divider' : ''}>\n              {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\n              <MenuSectionList key={index}>\n                {section.items.map((item, index) => renderItem(item, section, index))}\n              </MenuSectionList>\n            </MenuSection>\n          )\n        }\n      </UserMenuScrollContainer>\n      <UserMenuPinnedContainer>\n        {\n          sections.filter(a => !!a.pinned).map((section, index) =>\n            <MenuSection key={index} className={section.divider || index === 0 ? 'divider' : ''}>\n              {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\n              <MenuSectionList key={index}>\n                {section.items.map((item, index) => renderItem(item, section, index))}\n              </MenuSectionList>\n            </MenuSection>\n          )\n        }\n        {\n          signOut &&\n          <SignOutActionWrapper>\n            <Button width={'272px'}\n                    variant=\"secondary\"\n                    icon={<SystemIcons.Logout/>}\n                    size={Size.Large}\n                    onClick={e => {\n                      e.preventDefault();\n                      signOut?.action();\n                    }}>\n              {signOut?.label}\n            </Button>\n          </SignOutActionWrapper>\n        }\n      </UserMenuPinnedContainer>\n    </UserMenuWrapper>\n  );\n};\n\nexport default UserMenu;\n"],"file":"UserMenu.js"}

package/dist/GlobalNavigationBar/index.cjs

@@ -2,23 +2,12 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Avatar", {
-  enumerable: true,
-  get: function get() {
-    return _Avatar.default;
-  }
-});
-Object.defineProperty(exports, "AvatarContainer", {
-  enumerable: true,
-  get: function get() {
-    return _Avatar.AvatarContainer;
-  }
-});
+var _exportNames = {
+  GlobalNavigationBar: true
+};
 Object.defineProperty(exports, "GlobalNavigationBar", {
   enumerable: true,
   get: function get() {
@@ -28,9 +17,17 @@ Object.defineProperty(exports, "GlobalNavigationBar", {
 
 var _GlobalNavigationBar = _interopRequireDefault(require("./GlobalNavigationBar"));
 
-var _Avatar = _interopRequireWildcard(require("./Avatar"));
+var _types = require("./types");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _types[key];
+    }
+  });
+});
 //# sourceMappingURL=index.cjs.map

package/dist/GlobalNavigationBar/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/GlobalNavigationBar/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["import GlobalNavigationBar from './GlobalNavigationBar';\nimport Avatar, { AvatarContainer } from './Avatar';\n\nexport { GlobalNavigationBar, Avatar, AvatarContainer };\n"],"file":"index.cjs"}
+{"version":3,"sources":["../../src/GlobalNavigationBar/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AAEA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["import GlobalNavigationBar from './GlobalNavigationBar';\n\nexport * from './types';\n\nexport {GlobalNavigationBar};\n"],"file":"index.cjs"}

package/dist/GlobalNavigationBar/index.d.ts

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

package/dist/GlobalNavigationBar/index.js

@@ -1,4 +1,4 @@
 import GlobalNavigationBar from './GlobalNavigationBar';
-import Avatar, { AvatarContainer } from './Avatar';
-export { GlobalNavigationBar, Avatar, AvatarContainer };
+export * from './types';
+export { GlobalNavigationBar };
 //# sourceMappingURL=index.js.map

package/dist/GlobalNavigationBar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/GlobalNavigationBar/index.tsx"],"names":["GlobalNavigationBar","Avatar","AvatarContainer"],"mappings":"AAAA,OAAOA,mBAAP,MAAgC,uBAAhC;AACA,OAAOC,MAAP,IAAiBC,eAAjB,QAAwC,UAAxC;AAEA,SAASF,mBAAT,EAA8BC,MAA9B,EAAsCC,eAAtC","sourcesContent":["import GlobalNavigationBar from './GlobalNavigationBar';\nimport Avatar, { AvatarContainer } from './Avatar';\n\nexport { GlobalNavigationBar, Avatar, AvatarContainer };\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/GlobalNavigationBar/index.tsx"],"names":["GlobalNavigationBar"],"mappings":"AAAA,OAAOA,mBAAP,MAAgC,uBAAhC;AAEA,cAAc,SAAd;AAEA,SAAQA,mBAAR","sourcesContent":["import GlobalNavigationBar from './GlobalNavigationBar';\n\nexport * from './types';\n\nexport {GlobalNavigationBar};\n"],"file":"index.js"}

package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.flowDown = exports.UserMenuSectionListStyling = exports.SiteName = exports.RowLayout = exports.Right = exports.MenuWrapper = exports.MenuSectionList = exports.MenuSection = exports.MenuLink = exports.Menu = exports.Button = void 0;
+exports.flowDown = exports.fadeOut = exports.fadeIn = exports.UserMenuSectionListStyling = exports.SiteName = exports.RowLayout = exports.Right = exports.MenuSectionList = exports.MenuSection = exports.MenuLink = exports.Menu = exports.Button = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -17,11 +17,7 @@ var _styles = require("../../styles");
 
 var _reactRouterDom = require("react-router-dom");
 
-var _typography = require("../../styles/typography");
-
-var _zIndexes = require("../../styles/z-indexes");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -35,37 +31,35 @@ var Button = _styledComponents.default.button(_templateObject2 || (_templateObje
 
 exports.Button = Button;
 var flowLeft = (0, _styledComponents.keyframes)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n"])));
-var flowRight = (0, _styledComponents.keyframes)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n"])));
+var flowRight = (0, _styledComponents.keyframes)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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"])));
+var fadeOut = (0, _styledComponents.keyframes)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 1;\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n  }\n"])));
+exports.fadeOut = fadeOut;
+var fadeIn = (0, _styledComponents.keyframes)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n    visibility: hidden;\n  }\n  to {\n    opacity: 1;\n    visibility: visible;\n  }\n"])));
+exports.fadeIn = fadeIn;
 
-var Menu = _styledComponents.default.ul(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  list-style: none;\n  margin: 0 auto 0 auto;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  right: 0;\n  top: 0;\n  min-width: 300px;\n  position: absolute;\n  z-index: ", ";\n  align-items: center;\n  width: 320px;\n  padding-inline-start: 0;\n\n  ", " {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: block;\n    -webkit-animation: ", " 0.3s ease-in-out;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  .closed & {\n    display: block;\n    -webkit-animation: ", " 0.3s ease-in-out;\n    animation: ", " 0.3s ease-in-out;\n  }\n"])), _styles.COLORS.white, _zIndexes.Z_INDEXES.off_canvas, _styles.BREAKPOINTS.SMALL, flowLeft, flowLeft, flowRight, flowRight);
+var Menu = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.COLORS.white, _styles.Z_INDEXES.off_canvas, _styles.BREAKPOINTS.SMALL, flowLeft, flowRight);
 
 exports.Menu = Menu;
 
-var Right = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: auto;\n"])));
+var Right = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: auto;\n"])));
 
 exports.Right = Right;
 
-var SiteName = _styledComponents.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n"])), _styles.COLORS.neutral_600);
+var SiteName = _styledComponents.default.span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n"])), _styles.COLORS.neutral_600);
 
 exports.SiteName = SiteName;
 
-var MenuSection = _styledComponents.default.li(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 16px;\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])));
+var MenuSection = _styledComponents.default.li(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 16px;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])));
 
 exports.MenuSection = MenuSection;
 
-var MenuSectionList = _styledComponents.default.ul(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\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"])));
+var MenuSectionList = _styledComponents.default.ul(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\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"])));
 
 exports.MenuSectionList = MenuSectionList;
-var UserMenuSectionListStyling = (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  li {\n    position: relative;\n  }\n  li:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    a {\n      color: ", ";\n    }\n    svg {\n      color: ", ";\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    z-index: ", ";\n    ", "\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    z-index: ", ";\n    background: ", ";\n    a {\n      color: ", ";\n    }\n    svg {\n      color: ", ";\n    }\n  }\n\n  .disabled {\n    a {\n      color: ", ";\n    }\n    svg {\n      color: ", ";\n    }\n    background-color: ", ";\n  }\n"])), _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_600, _zIndexes.Z_INDEXES.focus, _styles.focusStyles, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100);
+var UserMenuSectionListStyling = (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_600, _styles.Z_INDEXES.focus, _styles.focusStyles, _styles.Z_INDEXES.active, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100);
 exports.UserMenuSectionListStyling = UserMenuSectionListStyling;
-var MenuLink = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black));
+var MenuLink = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black));
 exports.MenuLink = MenuLink;
-
-var MenuWrapper = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  display: ", ";\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ", ";\n  }\n"])), _styles.COLORS.white, function (props) {
-  return props.isVisible ? 'flex' : 'none';
-}, _styles.COLORS.white);
-
-exports.MenuWrapper = MenuWrapper;
-var flowDown = (0, _styledComponents.keyframes)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
+var flowDown = (0, _styledComponents.keyframes)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
 exports.flowDown = flowDown;
 //# sourceMappingURL=CommonStyles.cjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"names":["RowLayout","styled","div","Button","button","COLORS","white","flowLeft","keyframes","flowRight","Menu","ul","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","css","hover","primary_20","primary_600","focus","focusStyles","active","primary_100","primary_800","neutral_300","neutral_100","MenuLink","NavLink","ComponentTextStyle","Regular","black","MenuWrapper","props","isVisible","flowDown"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEO,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,+HAAf;;;;AAKA,IAAMC,MAAM,GAAGF,0BAAOG,MAAV,uJACGC,eAAOC,KADV,CAAZ;;;AAMP,IAAMC,QAAQ,OAAGC,2BAAH,qNAAd;AAWA,IAAMC,SAAS,OAAGD,2BAAH,qNAAf;;AAWO,IAAME,IAAI,GAAGT,0BAAOU,EAAV,mqBAIKN,eAAOC,KAJZ,EAWJM,oBAAUC,UAXN,EAgBbC,oBAAYC,KAhBC,EAsBQR,QAtBR,EAuBAA,QAvBA,EA4BQE,SA5BR,EA6BAA,SA7BA,CAAV;;;;AAiCA,IAAMO,KAAK,GAAGf,0BAAOC,GAAV,+HAAX;;;;AAKA,IAAMe,QAAQ,GAAGhB,0BAAOiB,IAAV,uKACVb,eAAOc,WADG,CAAd;;;;AAOA,IAAMC,WAAW,GAAGnB,0BAAOoB,EAAV,8MAAjB;;;;AASA,IAAMC,eAAe,GAAGrB,0BAAOU,EAAV,qPAArB;;;AAeA,IAAMY,0BAA0B,OAAGC,qBAAH,oqBAKxBZ,oBAAUa,KALc,EAMfpB,eAAOqB,UANQ,EAQxBrB,eAAOsB,WARiB,EAWxBtB,eAAOsB,WAXiB,EAgBxBf,oBAAUgB,KAhBc,EAiBjCC,mBAjBiC,EAwBxBjB,oBAAUkB,MAxBc,EAyBrBzB,eAAO0B,WAzBc,EA2BxB1B,eAAO2B,WA3BiB,EA8BxB3B,eAAO2B,WA9BiB,EAoCxB3B,eAAO4B,WApCiB,EAuCxB5B,eAAO4B,WAvCiB,EAyCf5B,eAAO6B,WAzCQ,CAAhC;;AA6CA,IAAMC,QAAQ,GAAG,+BAAOC,uBAAP,CAAH,4RAOjB,mCAAkBC,+BAAmBC,OAArC,EAA8CjC,eAAOkC,KAArD,CAPiB,CAAd;;;AAeA,IAAMC,WAAW,GAAGvC,0BAAOC,GAAV,+RACFG,eAAOC,KADL,EAEX,UAACmC,KAAD;AAAA,SAAYA,KAAK,CAACC,SAAN,GAAkB,MAAlB,GAA2B,MAAvC;AAAA,CAFW,EAYNrC,eAAOC,KAZD,CAAjB;;;AAoBA,IAAMqC,QAAQ,OAAGnC,2BAAH,wNAAd","sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport {BREAKPOINTS, COLORS, focusStyles} from '../../styles';\nimport { NavLink } from 'react-router-dom';\nimport { ComponentMStyling, ComponentTextStyle } from '../../styles/typography';\nimport {Z_INDEXES} from '../../styles/z-indexes';\n\nexport const RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nexport const Button = styled.button`\n  background-color: ${COLORS.white};\n  font-weight: bold;\n  border: 0;\n`;\n\nconst flowLeft = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nconst flowRight = keyframes`\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n`;\n\nexport const Menu = styled.ul`\n  height: 100%;\n  list-style: none;\n  margin: 0 auto 0 auto;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  right: 0;\n  top: 0;\n  min-width: 300px;\n  position: absolute;\n  z-index: ${Z_INDEXES.off_canvas};\n  align-items: center;\n  width: 320px;\n  padding-inline-start: 0;\n\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: block;\n    -webkit-animation: ${flowLeft} 0.3s ease-in-out;\n    animation: ${flowLeft} 0.3s ease-in-out;\n  }\n\n  .closed & {\n    display: block;\n    -webkit-animation: ${flowRight} 0.3s ease-in-out;\n    animation: ${flowRight} 0.3s ease-in-out;\n  }\n`;\n\nexport const Right = styled.div`\n  display: flex;\n  margin-left: auto;\n`;\n\nexport const SiteName = styled.span`\n  color: ${COLORS.neutral_600};\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n`;\n\nexport const MenuSection = styled.li`\n  margin-top: 16px;\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nexport const MenuSectionList = styled.ul`\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\nexport const UserMenuSectionListStyling = css`\n  li {\n    position: relative;\n  }\n  li:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    a {\n      color: ${COLORS.primary_600};\n    }\n    svg {\n      color: ${COLORS.primary_600};\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    z-index: ${Z_INDEXES.focus};\n    ${focusStyles}\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background: ${COLORS.primary_100};\n    a {\n      color: ${COLORS.primary_800};\n    }\n    svg {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  .disabled {\n    a {\n      color: ${COLORS.neutral_300};\n    }\n    svg {\n      color: ${COLORS.neutral_300};\n    }\n    background-color: ${COLORS.neutral_100};\n  }\n`;\n\nexport const MenuLink = styled(NavLink)`\n  border: none;\n  background: transparent;\n  margin: auto;\n\n  box-sizing: border-box;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  text-decoration: none;\n  text-align: center;\n  align-items: center;\n  display: flex;\n`;\n\nexport const MenuWrapper = styled.div<MenuWrapperProps>`\n  background-color: ${COLORS.white};\n  display: ${(props) => (props.isVisible ? 'flex' : 'none')};\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\ninterface MenuWrapperProps {\n  isVisible: boolean;\n}\n\nexport const flowDown = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n"],"file":"CommonStyles.cjs"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"names":["RowLayout","styled","div","Button","button","COLORS","white","flowLeft","keyframes","flowRight","fadeOut","fadeIn","Menu","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","ul","UserMenuSectionListStyling","css","hover","primary_20","primary_600","focus","focusStyles","active","primary_100","primary_800","neutral_300","neutral_100","MenuLink","NavLink","ComponentTextStyle","Regular","black","flowDown"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAIO,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,+HAAf;;;;AAKA,IAAMC,MAAM,GAAGF,0BAAOG,MAAV,uJACGC,eAAOC,KADV,CAAZ;;;AAMP,IAAMC,QAAQ,OAAGC,2BAAH,qNAAd;AAWA,IAAMC,SAAS,OAAGD,2BAAH,wQAAf;AAaO,IAAME,OAAO,OAAGF,2BAAH,uMAAb;;AAWA,IAAMG,MAAM,OAAGH,2BAAH,uMAAZ;;;AAWA,IAAMI,IAAI,GAAGX,0BAAOC,GAAV,8eAEKG,eAAOC,KAFZ,EAOJO,kBAAUC,UAPN,EAYbC,oBAAYC,KAZC,EAmBAT,QAnBA,EAwBAE,SAxBA,CAAV;;;;AA4BA,IAAMQ,KAAK,GAAGhB,0BAAOC,GAAV,+HAAX;;;;AAKA,IAAMgB,QAAQ,GAAGjB,0BAAOkB,IAAV,uKACVd,eAAOe,WADG,CAAd;;;;AAOA,IAAMC,WAAW,GAAGpB,0BAAOqB,EAAV,kNAAjB;;;;AAUA,IAAMC,eAAe,GAAGtB,0BAAOuB,EAAV,mPAArB;;;AAeA,IAAMC,0BAA0B,OAAGC,qBAAH,orBAMxBb,kBAAUc,KANc,EAOftB,eAAOuB,UAPQ,EAUxBvB,eAAOwB,WAViB,EAcxBxB,eAAOwB,WAdiB,EAmBxBhB,kBAAUiB,KAnBc,EAqBjCC,mBArBiC,EA4BxBlB,kBAAUmB,MA5Bc,EA6BrB3B,eAAO4B,WA7Bc,EAgCxB5B,eAAO6B,WAhCiB,EAoCxB7B,eAAO6B,WApCiB,EA0CxB7B,eAAO8B,WA1CiB,EA8CxB9B,eAAO8B,WA9CiB,EAiDf9B,eAAO+B,WAjDQ,CAAhC;;AAqDA,IAAMC,QAAQ,GAAG,+BAAOC,uBAAP,CAAH,4RAOjB,+BAAkBC,2BAAmBC,OAArC,EAA8CnC,eAAOoC,KAArD,CAPiB,CAAd;;AAgBA,IAAMC,QAAQ,OAAGlC,2BAAH,wNAAd","sourcesContent":["import styled, {css, keyframes} from 'styled-components';\nimport {BREAKPOINTS, COLORS, focusStyles} from '../../styles';\nimport {NavLink} from 'react-router-dom';\nimport {ComponentMStyling, ComponentTextStyle} from '../../styles';\nimport {Z_INDEXES} from '../../styles';\n\nexport const RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nexport const Button = styled.button`\n  background-color: ${COLORS.white};\n  font-weight: bold;\n  border: 0;\n`;\n\nconst flowLeft = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nconst flowRight = keyframes`\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\nexport const fadeOut = keyframes`\n  0% {\n    opacity: 1;\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n  }\n`;\n\nexport const fadeIn = keyframes`\n  0% {\n    opacity: 0;\n    visibility: hidden;\n  }\n  to {\n    opacity: 1;\n    visibility: visible;\n  }\n`;\n\nexport const Menu = styled.div`\n  height: 100%;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  right: 0;\n  top: 0;\n  position: absolute;\n  z-index: ${Z_INDEXES.off_canvas};\n  align-items: center;\n\n  width: 320px;\n\n  ${BREAKPOINTS.SMALL} {\n    width: 400px;\n  }\n\n  .open & {\n    visibility: visible;\n    display: flex;\n    animation: ${flowLeft} 0.3s ease-in-out;\n  }\n\n  .closed & {\n    visibility: hidden;\n    animation: ${flowRight} 0.3s ease-in-out;\n  }\n`;\n\nexport const Right = styled.div`\n  display: flex;\n  margin-left: auto;\n`;\n\nexport const SiteName = styled.span`\n  color: ${COLORS.neutral_600};\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n`;\n\nexport const MenuSection = styled.li`\n  margin-top: 16px;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nexport const MenuSectionList = styled.ul`\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\nexport const UserMenuSectionListStyling = css`\n  li {\n    position: relative;\n  }\n\n  li:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n\n    a {\n      color: ${COLORS.primary_600};\n    }\n\n    svg {\n      color: ${COLORS.primary_600};\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    z-index: ${Z_INDEXES.focus};\n\n    ${focusStyles}\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background: ${COLORS.primary_100};\n\n    a {\n      color: ${COLORS.primary_800};\n    }\n\n    svg {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  .disabled {\n    a {\n      color: ${COLORS.neutral_300};\n    }\n\n    svg {\n      color: ${COLORS.neutral_300};\n    }\n\n    background-color: ${COLORS.neutral_100};\n  }\n`;\n\nexport const MenuLink = styled(NavLink)`\n  border: none;\n  background: transparent;\n  margin: auto;\n\n  box-sizing: border-box;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  text-decoration: none;\n  text-align: center;\n  align-items: center;\n  display: flex;\n`;\n\n\nexport const flowDown = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n"],"file":"CommonStyles.cjs"}

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

@@ -1,16 +1,13 @@
 import { NavLink } from 'react-router-dom';
 export declare const RowLayout: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Button: import("styled-components").StyledComponent<"button", any, {}, never>;
-export declare const Menu: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const fadeOut: import("styled-components").Keyframes;
+export declare const fadeIn: import("styled-components").Keyframes;
+export declare const Menu: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Right: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SiteName: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const MenuSection: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const MenuSectionList: import("styled-components").StyledComponent<"ul", any, {}, never>;
 export declare const UserMenuSectionListStyling: import("styled-components").FlattenSimpleInterpolation;
 export declare const MenuLink: import("styled-components").StyledComponent<typeof NavLink, any, {}, never>;
-export declare const MenuWrapper: import("styled-components").StyledComponent<"div", any, MenuWrapperProps, never>;
-interface MenuWrapperProps {
-    isVisible: boolean;
-}
 export declare const flowDown: import("styled-components").Keyframes;
-export {};

package/dist/GlobalNavigationBar/mobile/CommonStyles.js

@@ -1,25 +1,24 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 
 import styled, { css, keyframes } from 'styled-components';
 import { BREAKPOINTS, COLORS, focusStyles } from '../../styles';
 import { NavLink } from 'react-router-dom';
-import { ComponentMStyling, ComponentTextStyle } from '../../styles/typography';
-import { Z_INDEXES } from '../../styles/z-indexes';
+import { ComponentMStyling, ComponentTextStyle } from '../../styles';
+import { Z_INDEXES } from '../../styles';
 export var RowLayout = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
 export var Button = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  font-weight: bold;\n  border: 0;\n"])), COLORS.white);
 var 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"])));
-var flowRight = keyframes(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n"])));
-export var Menu = styled.ul(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  height: 100%;\n  list-style: none;\n  margin: 0 auto 0 auto;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  right: 0;\n  top: 0;\n  min-width: 300px;\n  position: absolute;\n  z-index: ", ";\n  align-items: center;\n  width: 320px;\n  padding-inline-start: 0;\n\n  ", " {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: block;\n    -webkit-animation: ", " 0.3s ease-in-out;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  .closed & {\n    display: block;\n    -webkit-animation: ", " 0.3s ease-in-out;\n    animation: ", " 0.3s ease-in-out;\n  }\n"])), COLORS.white, Z_INDEXES.off_canvas, BREAKPOINTS.SMALL, flowLeft, flowLeft, flowRight, flowRight);
-export var Right = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: auto;\n"])));
-export var SiteName = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n"])), COLORS.neutral_600);
-export var MenuSection = styled.li(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin-top: 16px;\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])));
-export var MenuSectionList = styled.ul(_templateObject9 || (_templateObject9 = _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 var UserMenuSectionListStyling = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  li {\n    position: relative;\n  }\n  li:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    a {\n      color: ", ";\n    }\n    svg {\n      color: ", ";\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    z-index: ", ";\n    ", "\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    z-index: ", ";\n    background: ", ";\n    a {\n      color: ", ";\n    }\n    svg {\n      color: ", ";\n    }\n  }\n\n  .disabled {\n    a {\n      color: ", ";\n    }\n    svg {\n      color: ", ";\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)(_templateObject11 || (_templateObject11 = _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"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black));
-export var MenuWrapper = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: ", ";\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ", ";\n  }\n"])), COLORS.white, function (props) {
-  return props.isVisible ? 'flex' : 'none';
-}, COLORS.white);
-export var flowDown = keyframes(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
+var 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 var 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 var 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 var 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"])), COLORS.white, Z_INDEXES.off_canvas, BREAKPOINTS.SMALL, flowLeft, flowRight);
+export var Right = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: auto;\n"])));
+export var SiteName = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n"])), COLORS.neutral_600);
+export var 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 var 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 var 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, 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)(_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"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black));
+export var 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"])));
 //# sourceMappingURL=CommonStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"names":["styled","css","keyframes","BREAKPOINTS","COLORS","focusStyles","NavLink","ComponentMStyling","ComponentTextStyle","Z_INDEXES","RowLayout","div","Button","button","white","flowLeft","flowRight","Menu","ul","off_canvas","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","hover","primary_20","primary_600","focus","active","primary_100","primary_800","neutral_300","neutral_100","MenuLink","Regular","black","MenuWrapper","props","isVisible","flowDown"],"mappings":";;;;AAAA,OAAOA,MAAP,IAAiBC,GAAjB,EAAsBC,SAAtB,QAAuC,mBAAvC;AACA,SAAQC,WAAR,EAAqBC,MAArB,EAA6BC,WAA7B,QAA+C,cAA/C;AACA,SAASC,OAAT,QAAwB,kBAAxB;AACA,SAASC,iBAAT,EAA4BC,kBAA5B,QAAsD,yBAAtD;AACA,SAAQC,SAAR,QAAwB,wBAAxB;AAEA,OAAO,IAAMC,SAAS,GAAGV,MAAM,CAACW,GAAV,iHAAf;AAKP,OAAO,IAAMC,MAAM,GAAGZ,MAAM,CAACa,MAAV,yIACGT,MAAM,CAACU,KADV,CAAZ;AAMP,IAAMC,QAAQ,GAAGb,SAAH,sMAAd;AAWA,IAAMc,SAAS,GAAGd,SAAH,sMAAf;AAWA,OAAO,IAAMe,IAAI,GAAGjB,MAAM,CAACkB,EAAV,qpBAIKd,MAAM,CAACU,KAJZ,EAWJL,SAAS,CAACU,UAXN,EAgBbhB,WAAW,CAACiB,KAhBC,EAsBQL,QAtBR,EAuBAA,QAvBA,EA4BQC,SA5BR,EA6BAA,SA7BA,CAAV;AAiCP,OAAO,IAAMK,KAAK,GAAGrB,MAAM,CAACW,GAAV,iHAAX;AAKP,OAAO,IAAMW,QAAQ,GAAGtB,MAAM,CAACuB,IAAV,yJACVnB,MAAM,CAACoB,WADG,CAAd;AAOP,OAAO,IAAMC,WAAW,GAAGzB,MAAM,CAAC0B,EAAV,gMAAjB;AASP,OAAO,IAAMC,eAAe,GAAG3B,MAAM,CAACkB,EAAV,uOAArB;AAeP,OAAO,IAAMU,0BAA0B,GAAG3B,GAAH,qpBAKxBQ,SAAS,CAACoB,KALc,EAMfzB,MAAM,CAAC0B,UANQ,EAQxB1B,MAAM,CAAC2B,WARiB,EAWxB3B,MAAM,CAAC2B,WAXiB,EAgBxBtB,SAAS,CAACuB,KAhBc,EAiBjC3B,WAjBiC,EAwBxBI,SAAS,CAACwB,MAxBc,EAyBrB7B,MAAM,CAAC8B,WAzBc,EA2BxB9B,MAAM,CAAC+B,WA3BiB,EA8BxB/B,MAAM,CAAC+B,WA9BiB,EAoCxB/B,MAAM,CAACgC,WApCiB,EAuCxBhC,MAAM,CAACgC,WAvCiB,EAyCfhC,MAAM,CAACiC,WAzCQ,CAAhC;AA6CP,OAAO,IAAMC,QAAQ,GAAGtC,MAAM,CAACM,OAAD,CAAT,8QAOjBC,iBAAiB,CAACC,kBAAkB,CAAC+B,OAApB,EAA6BnC,MAAM,CAACoC,KAApC,CAPA,CAAd;AAeP,OAAO,IAAMC,WAAW,GAAGzC,MAAM,CAACW,GAAV,iRACFP,MAAM,CAACU,KADL,EAEX,UAAC4B,KAAD;AAAA,SAAYA,KAAK,CAACC,SAAN,GAAkB,MAAlB,GAA2B,MAAvC;AAAA,CAFW,EAYNvC,MAAM,CAACU,KAZD,CAAjB;AAoBP,OAAO,IAAM8B,QAAQ,GAAG1C,SAAH,yMAAd","sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport {BREAKPOINTS, COLORS, focusStyles} from '../../styles';\nimport { NavLink } from 'react-router-dom';\nimport { ComponentMStyling, ComponentTextStyle } from '../../styles/typography';\nimport {Z_INDEXES} from '../../styles/z-indexes';\n\nexport const RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nexport const Button = styled.button`\n  background-color: ${COLORS.white};\n  font-weight: bold;\n  border: 0;\n`;\n\nconst flowLeft = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nconst flowRight = keyframes`\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n`;\n\nexport const Menu = styled.ul`\n  height: 100%;\n  list-style: none;\n  margin: 0 auto 0 auto;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  right: 0;\n  top: 0;\n  min-width: 300px;\n  position: absolute;\n  z-index: ${Z_INDEXES.off_canvas};\n  align-items: center;\n  width: 320px;\n  padding-inline-start: 0;\n\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: block;\n    -webkit-animation: ${flowLeft} 0.3s ease-in-out;\n    animation: ${flowLeft} 0.3s ease-in-out;\n  }\n\n  .closed & {\n    display: block;\n    -webkit-animation: ${flowRight} 0.3s ease-in-out;\n    animation: ${flowRight} 0.3s ease-in-out;\n  }\n`;\n\nexport const Right = styled.div`\n  display: flex;\n  margin-left: auto;\n`;\n\nexport const SiteName = styled.span`\n  color: ${COLORS.neutral_600};\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n`;\n\nexport const MenuSection = styled.li`\n  margin-top: 16px;\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nexport const MenuSectionList = styled.ul`\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\nexport const UserMenuSectionListStyling = css`\n  li {\n    position: relative;\n  }\n  li:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    a {\n      color: ${COLORS.primary_600};\n    }\n    svg {\n      color: ${COLORS.primary_600};\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    z-index: ${Z_INDEXES.focus};\n    ${focusStyles}\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background: ${COLORS.primary_100};\n    a {\n      color: ${COLORS.primary_800};\n    }\n    svg {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  .disabled {\n    a {\n      color: ${COLORS.neutral_300};\n    }\n    svg {\n      color: ${COLORS.neutral_300};\n    }\n    background-color: ${COLORS.neutral_100};\n  }\n`;\n\nexport const MenuLink = styled(NavLink)`\n  border: none;\n  background: transparent;\n  margin: auto;\n\n  box-sizing: border-box;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  text-decoration: none;\n  text-align: center;\n  align-items: center;\n  display: flex;\n`;\n\nexport const MenuWrapper = styled.div<MenuWrapperProps>`\n  background-color: ${COLORS.white};\n  display: ${(props) => (props.isVisible ? 'flex' : 'none')};\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n\n  &:focus-within,\n  &:hover,\n  &.open {\n    background: ${COLORS.white};\n  }\n`;\n\ninterface MenuWrapperProps {\n  isVisible: boolean;\n}\n\nexport const flowDown = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n"],"file":"CommonStyles.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"names":["styled","css","keyframes","BREAKPOINTS","COLORS","focusStyles","NavLink","ComponentMStyling","ComponentTextStyle","Z_INDEXES","RowLayout","div","Button","button","white","flowLeft","flowRight","fadeOut","fadeIn","Menu","off_canvas","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","ul","UserMenuSectionListStyling","hover","primary_20","primary_600","focus","active","primary_100","primary_800","neutral_300","neutral_100","MenuLink","Regular","black","flowDown"],"mappings":";;;;AAAA,OAAOA,MAAP,IAAgBC,GAAhB,EAAqBC,SAArB,QAAqC,mBAArC;AACA,SAAQC,WAAR,EAAqBC,MAArB,EAA6BC,WAA7B,QAA+C,cAA/C;AACA,SAAQC,OAAR,QAAsB,kBAAtB;AACA,SAAQC,iBAAR,EAA2BC,kBAA3B,QAAoD,cAApD;AACA,SAAQC,SAAR,QAAwB,cAAxB;AAEA,OAAO,IAAMC,SAAS,GAAGV,MAAM,CAACW,GAAV,iHAAf;AAKP,OAAO,IAAMC,MAAM,GAAGZ,MAAM,CAACa,MAAV,yIACGT,MAAM,CAACU,KADV,CAAZ;AAMP,IAAMC,QAAQ,GAAGb,SAAH,sMAAd;AAWA,IAAMc,SAAS,GAAGd,SAAH,yPAAf;AAaA,OAAO,IAAMe,OAAO,GAAGf,SAAH,wLAAb;AAWP,OAAO,IAAMgB,MAAM,GAAGhB,SAAH,wLAAZ;AAWP,OAAO,IAAMiB,IAAI,GAAGnB,MAAM,CAACW,GAAV,geAEKP,MAAM,CAACU,KAFZ,EAOJL,SAAS,CAACW,UAPN,EAYbjB,WAAW,CAACkB,KAZC,EAmBAN,QAnBA,EAwBAC,SAxBA,CAAV;AA4BP,OAAO,IAAMM,KAAK,GAAGtB,MAAM,CAACW,GAAV,iHAAX;AAKP,OAAO,IAAMY,QAAQ,GAAGvB,MAAM,CAACwB,IAAV,yJACVpB,MAAM,CAACqB,WADG,CAAd;AAOP,OAAO,IAAMC,WAAW,GAAG1B,MAAM,CAAC2B,EAAV,oMAAjB;AAUP,OAAO,IAAMC,eAAe,GAAG5B,MAAM,CAAC6B,EAAV,qOAArB;AAeP,OAAO,IAAMC,0BAA0B,GAAG7B,GAAH,qqBAMxBQ,SAAS,CAACsB,KANc,EAOf3B,MAAM,CAAC4B,UAPQ,EAUxB5B,MAAM,CAAC6B,WAViB,EAcxB7B,MAAM,CAAC6B,WAdiB,EAmBxBxB,SAAS,CAACyB,KAnBc,EAqBjC7B,WArBiC,EA4BxBI,SAAS,CAAC0B,MA5Bc,EA6BrB/B,MAAM,CAACgC,WA7Bc,EAgCxBhC,MAAM,CAACiC,WAhCiB,EAoCxBjC,MAAM,CAACiC,WApCiB,EA0CxBjC,MAAM,CAACkC,WA1CiB,EA8CxBlC,MAAM,CAACkC,WA9CiB,EAiDflC,MAAM,CAACmC,WAjDQ,CAAhC;AAqDP,OAAO,IAAMC,QAAQ,GAAGxC,MAAM,CAACM,OAAD,CAAT,8QAOjBC,iBAAiB,CAACC,kBAAkB,CAACiC,OAApB,EAA6BrC,MAAM,CAACsC,KAApC,CAPA,CAAd;AAgBP,OAAO,IAAMC,QAAQ,GAAGzC,SAAH,yMAAd","sourcesContent":["import styled, {css, keyframes} from 'styled-components';\nimport {BREAKPOINTS, COLORS, focusStyles} from '../../styles';\nimport {NavLink} from 'react-router-dom';\nimport {ComponentMStyling, ComponentTextStyle} from '../../styles';\nimport {Z_INDEXES} from '../../styles';\n\nexport const RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nexport const Button = styled.button`\n  background-color: ${COLORS.white};\n  font-weight: bold;\n  border: 0;\n`;\n\nconst flowLeft = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nconst flowRight = keyframes`\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\nexport const fadeOut = keyframes`\n  0% {\n    opacity: 1;\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n  }\n`;\n\nexport const fadeIn = keyframes`\n  0% {\n    opacity: 0;\n    visibility: hidden;\n  }\n  to {\n    opacity: 1;\n    visibility: visible;\n  }\n`;\n\nexport const Menu = styled.div`\n  height: 100%;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  right: 0;\n  top: 0;\n  position: absolute;\n  z-index: ${Z_INDEXES.off_canvas};\n  align-items: center;\n\n  width: 320px;\n\n  ${BREAKPOINTS.SMALL} {\n    width: 400px;\n  }\n\n  .open & {\n    visibility: visible;\n    display: flex;\n    animation: ${flowLeft} 0.3s ease-in-out;\n  }\n\n  .closed & {\n    visibility: hidden;\n    animation: ${flowRight} 0.3s ease-in-out;\n  }\n`;\n\nexport const Right = styled.div`\n  display: flex;\n  margin-left: auto;\n`;\n\nexport const SiteName = styled.span`\n  color: ${COLORS.neutral_600};\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n`;\n\nexport const MenuSection = styled.li`\n  margin-top: 16px;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nexport const MenuSectionList = styled.ul`\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\nexport const UserMenuSectionListStyling = css`\n  li {\n    position: relative;\n  }\n\n  li:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n\n    a {\n      color: ${COLORS.primary_600};\n    }\n\n    svg {\n      color: ${COLORS.primary_600};\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    z-index: ${Z_INDEXES.focus};\n\n    ${focusStyles}\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background: ${COLORS.primary_100};\n\n    a {\n      color: ${COLORS.primary_800};\n    }\n\n    svg {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  .disabled {\n    a {\n      color: ${COLORS.neutral_300};\n    }\n\n    svg {\n      color: ${COLORS.neutral_300};\n    }\n\n    background-color: ${COLORS.neutral_100};\n  }\n`;\n\nexport const MenuLink = styled(NavLink)`\n  border: none;\n  background: transparent;\n  margin: auto;\n\n  box-sizing: border-box;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  text-decoration: none;\n  text-align: center;\n  align-items: center;\n  display: flex;\n`;\n\n\nexport const flowDown = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n"],"file":"CommonStyles.js"}