@laerdal/life-react-components 2.3.1-dev.1.full → 2.3.1-dev.10.full

package/dist/Footer/SiteFooter.cjs

@@ -17,14 +17,15 @@ var _FooterTop = _interopRequireDefault(require("./Components/FooterTop"));
 var _FooterNewsletterAndSocialSection = _interopRequireDefault(require("./Components/FooterNewsletterAndSocialSection"));
 var _FooterNavSection = _interopRequireDefault(require("./Components/FooterNavSection"));
 var _styles = require("../styles");
+var _Layouts = require("../Layouts");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["id", "sitename", "bottomLinks", "showBetaTag", "copyrightText", "toTopText", "placeholderEmailField", "includeNewsletterAndSocialSection", "newsletterLabel", "navOptions", "onNewsletterSignup"];
+var _excluded = ["id", "sitename", "bottomLinks", "showBetaTag", "copyrightText", "toTopText", "placeholderEmailField", "includeNewsletterAndSocialSection", "newsletterLabel", "navOptions", "onNewsletterSignup", "useMaxWidth", "maxWidth"];
 var _templateObject, _templateObject2;
 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; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var FooterContainer = _styledComponents.default.footer(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: auto;\n  background-color: ", ";\n  border-top: 8px solid ", ";\n\n  padding: 16px 16px;\n  \n  ", "{\n    padding: 24px 32px;\n  }\n  ", "{\n    padding: 24px 56px;\n  }\n  ", "{\n    padding: 32px 56px;\n  }\n"])), _styles.COLORS.neutral_800, _styles.COLORS.neutral_200, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, _styles.BREAKPOINTS.XLARGE);
+var FooterContainer = _styledComponents.default.footer(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: auto;\n  background-color: ", ";\n  border-top: 8px solid ", ";\n\n  padding-top: 0;\n  padding-bottom: 16px;\n\n  ", " {\n    padding: 16px 0;\n  }\n\n  ", " {\n    padding: 16px 0;\n  }\n"])), _styles.COLORS.neutral_800, _styles.COLORS.neutral_200, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
 var FooterLine = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-top: 1px solid ", ";\n  display: none;\n  ", " {\n    display: block;\n  }\n"])), _styles.COLORS.white, _styles.BREAKPOINTS.MEDIUM);
 var SiteFooter = function SiteFooter(_ref) {
   var id = _ref.id,
@@ -38,26 +39,34 @@ var SiteFooter = function SiteFooter(_ref) {
     newsletterLabel = _ref.newsletterLabel,
     navOptions = _ref.navOptions,
     onNewsletterSignup = _ref.onNewsletterSignup,
+    _ref$useMaxWidth = _ref.useMaxWidth,
+    useMaxWidth = _ref$useMaxWidth === void 0 ? true : _ref$useMaxWidth,
+    maxWidth = _ref.maxWidth,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(FooterContainer, _objectSpread(_objectSpread({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FooterContainer, _objectSpread(_objectSpread({
     id: id,
     "data-testid": 'footer-container'
   }, rest), {}, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FooterTop.default, {
-      sitename: sitename,
-      showBetaTag: showBetaTag,
-      toTopText: toTopText
-    }), navOptions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FooterNavSection.default, {
-      mainId: id,
-      navOptions: navOptions
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FooterLine, {}), includeNewsletterAndSocialSection && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FooterNewsletterAndSocialSection.default, {
-      placeholderEmail: placeholderEmailField,
-      actionOnNewsletterSignup: onNewsletterSignup,
-      newsletterLabel: newsletterLabel || ''
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FooterBottomLinks.default, {
-      bottomLinks: bottomLinks,
-      copyrightText: copyrightText
-    })]
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layouts.PageWidth, {
+      unsetMargin: true,
+      useMaxWidth: useMaxWidth,
+      maxWidth: maxWidth,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FooterTop.default, {
+        sitename: sitename,
+        showBetaTag: showBetaTag,
+        toTopText: toTopText
+      }), navOptions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FooterNavSection.default, {
+        mainId: id,
+        navOptions: navOptions
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FooterLine, {}), includeNewsletterAndSocialSection && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FooterNewsletterAndSocialSection.default, {
+        placeholderEmail: placeholderEmailField,
+        actionOnNewsletterSignup: onNewsletterSignup,
+        newsletterLabel: newsletterLabel || ''
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FooterBottomLinks.default, {
+        bottomLinks: bottomLinks,
+        copyrightText: copyrightText
+      })]
+    })
   }));
 };
 SiteFooter.propTypes = {
@@ -71,7 +80,9 @@ SiteFooter.propTypes = {
   newsletterLabel: _propTypes.default.string,
   toTopText: _propTypes.default.string.isRequired,
   placeholderEmailField: _propTypes.default.string,
-  onNewsletterSignup: _propTypes.default.func
+  onNewsletterSignup: _propTypes.default.func,
+  useMaxWidth: _propTypes.default.bool,
+  maxWidth: _propTypes.default.number
 };
 var _default = SiteFooter;
 exports.default = _default;

package/dist/Footer/SiteFooter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SiteFooter.cjs","names":["FooterContainer","styled","footer","COLORS","neutral_800","neutral_200","BREAKPOINTS","MEDIUM","LARGE","XLARGE","FooterLine","div","white","SiteFooter","id","sitename","bottomLinks","showBetaTag","copyrightText","toTopText","placeholderEmailField","includeNewsletterAndSocialSection","newsletterLabel","navOptions","onNewsletterSignup","rest","actionOnNewsletterSignup"],"sources":["../../src/Footer/SiteFooter.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom components.\n */\nimport FooterBottomLinks from './Components/FooterBottomLinks';\nimport FooterTop from './Components/FooterTop';\nimport FooterNewsletterAndSocialSection from './Components/FooterNewsletterAndSocialSection';\nimport FooterNavSection from './Components/FooterNavSection';\nimport { BREAKPOINTS, COLORS } from '../styles';\n\n/**\n * Import custom styles.\n */\nimport { NavLink, NavOptions } from '../types';\n\nconst FooterContainer = styled.footer`\n  margin-top: auto;\n  background-color: ${COLORS.neutral_800};\n  border-top: 8px solid ${COLORS.neutral_200};\n\n  padding: 16px 16px;\n  \n  ${BREAKPOINTS.MEDIUM}{\n    padding: 24px 32px;\n  }\n  ${BREAKPOINTS.LARGE}{\n    padding: 24px 56px;\n  }\n  ${BREAKPOINTS.XLARGE}{\n    padding: 32px 56px;\n  }\n`;\nconst FooterLine = styled.div`\n  border-top: 1px solid ${COLORS.white};\n  display: none;\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n`;\n\ninterface NewFooterProps  extends Omit<React.HTMLAttributes<HTMLElement>, 'id'> {\n  id: string;\n  sitename?: string;\n  showBetaTag?: boolean;\n  bottomLinks?: NavLink[];\n  copyrightText?: string;\n  includeNewsletterAndSocialSection?: boolean;\n  actionOnNewsletterSignup?: (email: string) => void;\n  newsletterLabel?: string;\n  toTopText: string;\n  navOptions?: NavOptions;\n  placeholderEmailField?: string;\n  onNewsletterSignup?: (email: string) => void;\n}\n\nconst SiteFooter = ({\n  id,\n  sitename,\n  bottomLinks,\n  showBetaTag,\n  copyrightText,\n  toTopText,\n  placeholderEmailField,\n  includeNewsletterAndSocialSection,\n  newsletterLabel,\n  navOptions,\n  onNewsletterSignup,\n  ...rest\n}: NewFooterProps) => {\n  return (\n    <FooterContainer id={id} data-testid={'footer-container'} {...rest}>\n      <FooterTop sitename={sitename} showBetaTag={showBetaTag} toTopText={toTopText} />\n      {navOptions && <FooterNavSection mainId={id} navOptions={navOptions} />}\n      <FooterLine />\n      {includeNewsletterAndSocialSection && (\n        <FooterNewsletterAndSocialSection placeholderEmail={placeholderEmailField} actionOnNewsletterSignup={onNewsletterSignup} newsletterLabel={newsletterLabel || ''} />\n      )}\n      <FooterBottomLinks bottomLinks={bottomLinks} copyrightText={copyrightText} />\n    </FooterContainer>\n  );\n};\n\nexport default SiteFooter;\n"],"mappings":";;;;;;;;;;;;AAGA;AAKA;AAKA;AACA;AACA;AACA;AACA;AAAgD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhD,IAAMA,eAAe,GAAGC,yBAAM,CAACC,MAAM,uTAEfC,cAAM,CAACC,WAAW,EACdD,cAAM,CAACE,WAAW,EAIxCC,mBAAW,CAACC,MAAM,EAGlBD,mBAAW,CAACE,KAAK,EAGjBF,mBAAW,CAACG,MAAM,CAGrB;AACD,IAAMC,UAAU,GAAGT,yBAAM,CAACU,GAAG,6KACHR,cAAM,CAACS,KAAK,EAElCN,mBAAW,CAACC,MAAM,CAGrB;AAiBD,IAAMM,UAAU,GAAG,SAAbA,UAAU,OAaM;EAAA,IAZpBC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IACXC,WAAW,QAAXA,WAAW;IACXC,aAAa,QAAbA,aAAa;IACbC,SAAS,QAATA,SAAS;IACTC,qBAAqB,QAArBA,qBAAqB;IACrBC,iCAAiC,QAAjCA,iCAAiC;IACjCC,eAAe,QAAfA,eAAe;IACfC,UAAU,QAAVA,UAAU;IACVC,kBAAkB,QAAlBA,kBAAkB;IACfC,IAAI;EAEP,oBACE,sBAAC,eAAe;IAAC,EAAE,EAAEX,EAAG;IAAC,eAAa;EAAmB,GAAKW,IAAI;IAAA,wBAChE,qBAAC,kBAAS;MAAC,QAAQ,EAAEV,QAAS;MAAC,WAAW,EAAEE,WAAY;MAAC,SAAS,EAAEE;IAAU,EAAG,EAChFI,UAAU,iBAAI,qBAAC,yBAAgB;MAAC,MAAM,EAAET,EAAG;MAAC,UAAU,EAAES;IAAW,EAAG,eACvE,qBAAC,UAAU,KAAG,EACbF,iCAAiC,iBAChC,qBAAC,yCAAgC;MAAC,gBAAgB,EAAED,qBAAsB;MAAC,wBAAwB,EAAEI,kBAAmB;MAAC,eAAe,EAAEF,eAAe,IAAI;IAAG,EACjK,eACD,qBAAC,0BAAiB;MAAC,WAAW,EAAEN,WAAY;MAAC,aAAa,EAAEE;IAAc,EAAG;EAAA,GAC7D;AAEtB,CAAC;AAAC;EAvCAJ,EAAE;EACFC,QAAQ;EACRE,WAAW;EACXD,WAAW;EACXE,aAAa;EACbG,iCAAiC;EACjCK,wBAAwB;EACxBJ,eAAe;EACfH,SAAS;EAETC,qBAAqB;EACrBI,kBAAkB;AAAA;AAAA,eA8BLX,UAAU;AAAA"}
+{"version":3,"file":"SiteFooter.cjs","names":["FooterContainer","styled","footer","COLORS","neutral_800","neutral_200","BREAKPOINTS","MEDIUM","LARGE","FooterLine","div","white","SiteFooter","id","sitename","bottomLinks","showBetaTag","copyrightText","toTopText","placeholderEmailField","includeNewsletterAndSocialSection","newsletterLabel","navOptions","onNewsletterSignup","useMaxWidth","maxWidth","rest","actionOnNewsletterSignup"],"sources":["../../src/Footer/SiteFooter.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom components.\n */\nimport FooterBottomLinks from './Components/FooterBottomLinks';\nimport FooterTop from './Components/FooterTop';\nimport FooterNewsletterAndSocialSection from './Components/FooterNewsletterAndSocialSection';\nimport FooterNavSection from './Components/FooterNavSection';\nimport { BREAKPOINTS, COLORS } from '../styles';\n\n/**\n * Import custom styles.\n */\nimport { NavLink, NavOptions } from '../types';\nimport {PageWidth} from \"../Layouts\";\n\nconst FooterContainer = styled.footer`\n  margin-top: auto;\n  background-color: ${COLORS.neutral_800};\n  border-top: 8px solid ${COLORS.neutral_200};\n\n  padding-top: 0;\n  padding-bottom: 16px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    padding: 16px 0;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    padding: 16px 0;\n  }\n`;\nconst FooterLine = styled.div`\n  border-top: 1px solid ${COLORS.white};\n  display: none;\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n`;\n\ninterface NewFooterProps  extends Omit<React.HTMLAttributes<HTMLElement>, 'id'> {\n  id: string;\n  sitename?: string;\n  showBetaTag?: boolean;\n  bottomLinks?: NavLink[];\n  copyrightText?: string;\n  includeNewsletterAndSocialSection?: boolean;\n  actionOnNewsletterSignup?: (email: string) => void;\n  newsletterLabel?: string;\n  toTopText: string;\n  navOptions?: NavOptions;\n  placeholderEmailField?: string;\n  onNewsletterSignup?: (email: string) => void;\n  useMaxWidth?: boolean;\n  maxWidth?: number;\n}\n\nconst SiteFooter = ({\n  id,\n  sitename,\n  bottomLinks,\n  showBetaTag,\n  copyrightText,\n  toTopText,\n  placeholderEmailField,\n  includeNewsletterAndSocialSection,\n  newsletterLabel,\n  navOptions,\n  onNewsletterSignup,\n  useMaxWidth = true,\n  maxWidth,\n  ...rest\n}: NewFooterProps) => {\n  return (\n    <FooterContainer id={id} data-testid={'footer-container'} {...rest}>\n      <PageWidth unsetMargin={true} useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n        <FooterTop sitename={sitename} showBetaTag={showBetaTag} toTopText={toTopText} />\n        {navOptions && <FooterNavSection mainId={id} navOptions={navOptions} />}\n        <FooterLine />\n        {includeNewsletterAndSocialSection && (\n          <FooterNewsletterAndSocialSection placeholderEmail={placeholderEmailField} actionOnNewsletterSignup={onNewsletterSignup} newsletterLabel={newsletterLabel || ''} />\n        )}\n        <FooterBottomLinks bottomLinks={bottomLinks} copyrightText={copyrightText} />\n      </PageWidth>\n    </FooterContainer>\n  );\n};\n\nexport default SiteFooter;\n"],"mappings":";;;;;;;;;;;;AAGA;AAKA;AAKA;AACA;AACA;AACA;AACA;AAMA;AAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAErC,IAAMA,eAAe,GAAGC,yBAAM,CAACC,MAAM,iSAEfC,cAAM,CAACC,WAAW,EACdD,cAAM,CAACE,WAAW,EAKxCC,mBAAW,CAACC,MAAM,EAIlBD,mBAAW,CAACE,KAAK,CAGpB;AACD,IAAMC,UAAU,GAAGR,yBAAM,CAACS,GAAG,6KACHP,cAAM,CAACQ,KAAK,EAElCL,mBAAW,CAACC,MAAM,CAGrB;AAmBD,IAAMK,UAAU,GAAG,SAAbA,UAAU,OAeM;EAAA,IAdpBC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IACXC,WAAW,QAAXA,WAAW;IACXC,aAAa,QAAbA,aAAa;IACbC,SAAS,QAATA,SAAS;IACTC,qBAAqB,QAArBA,qBAAqB;IACrBC,iCAAiC,QAAjCA,iCAAiC;IACjCC,eAAe,QAAfA,eAAe;IACfC,UAAU,QAAVA,UAAU;IACVC,kBAAkB,QAAlBA,kBAAkB;IAAA,wBAClBC,WAAW;IAAXA,WAAW,iCAAG,IAAI;IAClBC,QAAQ,QAARA,QAAQ;IACLC,IAAI;EAEP,oBACE,qBAAC,eAAe;IAAC,EAAE,EAAEb,EAAG;IAAC,eAAa;EAAmB,GAAKa,IAAI;IAAA,uBAChE,sBAAC,kBAAS;MAAC,WAAW,EAAE,IAAK;MAAC,WAAW,EAAEF,WAAY;MAAC,QAAQ,EAAEC,QAAS;MAAA,wBACzE,qBAAC,kBAAS;QAAC,QAAQ,EAAEX,QAAS;QAAC,WAAW,EAAEE,WAAY;QAAC,SAAS,EAAEE;MAAU,EAAG,EAChFI,UAAU,iBAAI,qBAAC,yBAAgB;QAAC,MAAM,EAAET,EAAG;QAAC,UAAU,EAAES;MAAW,EAAG,eACvE,qBAAC,UAAU,KAAG,EACbF,iCAAiC,iBAChC,qBAAC,yCAAgC;QAAC,gBAAgB,EAAED,qBAAsB;QAAC,wBAAwB,EAAEI,kBAAmB;QAAC,eAAe,EAAEF,eAAe,IAAI;MAAG,EACjK,eACD,qBAAC,0BAAiB;QAAC,WAAW,EAAEN,WAAY;QAAC,aAAa,EAAEE;MAAc,EAAG;IAAA;EACnE,GACI;AAEtB,CAAC;AAAC;EA7CAJ,EAAE;EACFC,QAAQ;EACRE,WAAW;EACXD,WAAW;EACXE,aAAa;EACbG,iCAAiC;EACjCO,wBAAwB;EACxBN,eAAe;EACfH,SAAS;EAETC,qBAAqB;EACrBI,kBAAkB;EAClBC,WAAW;EACXC,QAAQ;AAAA;AAAA,eAkCKb,UAAU;AAAA"}

package/dist/Footer/SiteFooter.d.ts

@@ -19,6 +19,8 @@ interface NewFooterProps extends Omit<React.HTMLAttributes<HTMLElement>, 'id'> {
     navOptions?: NavOptions;
     placeholderEmailField?: string;
     onNewsletterSignup?: (email: string) => void;
+    useMaxWidth?: boolean;
+    maxWidth?: number;
 }
-declare const SiteFooter: ({ id, sitename, bottomLinks, showBetaTag, copyrightText, toTopText, placeholderEmailField, includeNewsletterAndSocialSection, newsletterLabel, navOptions, onNewsletterSignup, ...rest }: NewFooterProps) => JSX.Element;
+declare const SiteFooter: ({ id, sitename, bottomLinks, showBetaTag, copyrightText, toTopText, placeholderEmailField, includeNewsletterAndSocialSection, newsletterLabel, navOptions, onNewsletterSignup, useMaxWidth, maxWidth, ...rest }: NewFooterProps) => JSX.Element;
 export default SiteFooter;

package/dist/Footer/SiteFooter.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _excluded = ["id", "sitename", "bottomLinks", "showBetaTag", "copyrightText", "toTopText", "placeholderEmailField", "includeNewsletterAndSocialSection", "newsletterLabel", "navOptions", "onNewsletterSignup"];
+var _excluded = ["id", "sitename", "bottomLinks", "showBetaTag", "copyrightText", "toTopText", "placeholderEmailField", "includeNewsletterAndSocialSection", "newsletterLabel", "navOptions", "onNewsletterSignup", "useMaxWidth", "maxWidth"];
 var _templateObject, _templateObject2;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -28,9 +28,11 @@ import { BREAKPOINTS, COLORS } from '../styles';
 /**
  * Import custom styles.
  */
+
+import { PageWidth } from "../Layouts";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var FooterContainer = styled.footer(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: auto;\n  background-color: ", ";\n  border-top: 8px solid ", ";\n\n  padding: 16px 16px;\n  \n  ", "{\n    padding: 24px 32px;\n  }\n  ", "{\n    padding: 24px 56px;\n  }\n  ", "{\n    padding: 32px 56px;\n  }\n"])), COLORS.neutral_800, COLORS.neutral_200, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, BREAKPOINTS.XLARGE);
+var FooterContainer = styled.footer(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: auto;\n  background-color: ", ";\n  border-top: 8px solid ", ";\n\n  padding-top: 0;\n  padding-bottom: 16px;\n\n  ", " {\n    padding: 16px 0;\n  }\n\n  ", " {\n    padding: 16px 0;\n  }\n"])), COLORS.neutral_800, COLORS.neutral_200, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
 var FooterLine = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-top: 1px solid ", ";\n  display: none;\n  ", " {\n    display: block;\n  }\n"])), COLORS.white, BREAKPOINTS.MEDIUM);
 var SiteFooter = function SiteFooter(_ref) {
   var id = _ref.id,
@@ -44,26 +46,34 @@ var SiteFooter = function SiteFooter(_ref) {
     newsletterLabel = _ref.newsletterLabel,
     navOptions = _ref.navOptions,
     onNewsletterSignup = _ref.onNewsletterSignup,
+    _ref$useMaxWidth = _ref.useMaxWidth,
+    useMaxWidth = _ref$useMaxWidth === void 0 ? true : _ref$useMaxWidth,
+    maxWidth = _ref.maxWidth,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsxs(FooterContainer, _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsx(FooterContainer, _objectSpread(_objectSpread({
     id: id,
     "data-testid": 'footer-container'
   }, rest), {}, {
-    children: [/*#__PURE__*/_jsx(FooterTop, {
-      sitename: sitename,
-      showBetaTag: showBetaTag,
-      toTopText: toTopText
-    }), navOptions && /*#__PURE__*/_jsx(FooterNavSection, {
-      mainId: id,
-      navOptions: navOptions
-    }), /*#__PURE__*/_jsx(FooterLine, {}), includeNewsletterAndSocialSection && /*#__PURE__*/_jsx(FooterNewsletterAndSocialSection, {
-      placeholderEmail: placeholderEmailField,
-      actionOnNewsletterSignup: onNewsletterSignup,
-      newsletterLabel: newsletterLabel || ''
-    }), /*#__PURE__*/_jsx(FooterBottomLinks, {
-      bottomLinks: bottomLinks,
-      copyrightText: copyrightText
-    })]
+    children: /*#__PURE__*/_jsxs(PageWidth, {
+      unsetMargin: true,
+      useMaxWidth: useMaxWidth,
+      maxWidth: maxWidth,
+      children: [/*#__PURE__*/_jsx(FooterTop, {
+        sitename: sitename,
+        showBetaTag: showBetaTag,
+        toTopText: toTopText
+      }), navOptions && /*#__PURE__*/_jsx(FooterNavSection, {
+        mainId: id,
+        navOptions: navOptions
+      }), /*#__PURE__*/_jsx(FooterLine, {}), includeNewsletterAndSocialSection && /*#__PURE__*/_jsx(FooterNewsletterAndSocialSection, {
+        placeholderEmail: placeholderEmailField,
+        actionOnNewsletterSignup: onNewsletterSignup,
+        newsletterLabel: newsletterLabel || ''
+      }), /*#__PURE__*/_jsx(FooterBottomLinks, {
+        bottomLinks: bottomLinks,
+        copyrightText: copyrightText
+      })]
+    })
   }));
 };
 SiteFooter.propTypes = {
@@ -77,7 +87,9 @@ SiteFooter.propTypes = {
   newsletterLabel: _pt.string,
   toTopText: _pt.string.isRequired,
   placeholderEmailField: _pt.string,
-  onNewsletterSignup: _pt.func
+  onNewsletterSignup: _pt.func,
+  useMaxWidth: _pt.bool,
+  maxWidth: _pt.number
 };
 export default SiteFooter;
 //# sourceMappingURL=SiteFooter.js.map

package/dist/Footer/SiteFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"SiteFooter.js","names":["React","styled","FooterBottomLinks","FooterTop","FooterNewsletterAndSocialSection","FooterNavSection","BREAKPOINTS","COLORS","FooterContainer","footer","neutral_800","neutral_200","MEDIUM","LARGE","XLARGE","FooterLine","div","white","SiteFooter","id","sitename","bottomLinks","showBetaTag","copyrightText","toTopText","placeholderEmailField","includeNewsletterAndSocialSection","newsletterLabel","navOptions","onNewsletterSignup","rest","actionOnNewsletterSignup"],"sources":["../../src/Footer/SiteFooter.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom components.\n */\nimport FooterBottomLinks from './Components/FooterBottomLinks';\nimport FooterTop from './Components/FooterTop';\nimport FooterNewsletterAndSocialSection from './Components/FooterNewsletterAndSocialSection';\nimport FooterNavSection from './Components/FooterNavSection';\nimport { BREAKPOINTS, COLORS } from '../styles';\n\n/**\n * Import custom styles.\n */\nimport { NavLink, NavOptions } from '../types';\n\nconst FooterContainer = styled.footer`\n  margin-top: auto;\n  background-color: ${COLORS.neutral_800};\n  border-top: 8px solid ${COLORS.neutral_200};\n\n  padding: 16px 16px;\n  \n  ${BREAKPOINTS.MEDIUM}{\n    padding: 24px 32px;\n  }\n  ${BREAKPOINTS.LARGE}{\n    padding: 24px 56px;\n  }\n  ${BREAKPOINTS.XLARGE}{\n    padding: 32px 56px;\n  }\n`;\nconst FooterLine = styled.div`\n  border-top: 1px solid ${COLORS.white};\n  display: none;\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n`;\n\ninterface NewFooterProps  extends Omit<React.HTMLAttributes<HTMLElement>, 'id'> {\n  id: string;\n  sitename?: string;\n  showBetaTag?: boolean;\n  bottomLinks?: NavLink[];\n  copyrightText?: string;\n  includeNewsletterAndSocialSection?: boolean;\n  actionOnNewsletterSignup?: (email: string) => void;\n  newsletterLabel?: string;\n  toTopText: string;\n  navOptions?: NavOptions;\n  placeholderEmailField?: string;\n  onNewsletterSignup?: (email: string) => void;\n}\n\nconst SiteFooter = ({\n  id,\n  sitename,\n  bottomLinks,\n  showBetaTag,\n  copyrightText,\n  toTopText,\n  placeholderEmailField,\n  includeNewsletterAndSocialSection,\n  newsletterLabel,\n  navOptions,\n  onNewsletterSignup,\n  ...rest\n}: NewFooterProps) => {\n  return (\n    <FooterContainer id={id} data-testid={'footer-container'} {...rest}>\n      <FooterTop sitename={sitename} showBetaTag={showBetaTag} toTopText={toTopText} />\n      {navOptions && <FooterNavSection mainId={id} navOptions={navOptions} />}\n      <FooterLine />\n      {includeNewsletterAndSocialSection && (\n        <FooterNewsletterAndSocialSection placeholderEmail={placeholderEmailField} actionOnNewsletterSignup={onNewsletterSignup} newsletterLabel={newsletterLabel || ''} />\n      )}\n      <FooterBottomLinks bottomLinks={bottomLinks} copyrightText={copyrightText} />\n    </FooterContainer>\n  );\n};\n\nexport default SiteFooter;\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;AACA,OAAOC,MAAM,MAAM,mBAAmB;;AAEtC;AACA;AACA;AACA,OAAOC,iBAAiB,MAAM,gCAAgC;AAC9D,OAAOC,SAAS,MAAM,wBAAwB;AAC9C,OAAOC,gCAAgC,MAAM,+CAA+C;AAC5F,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,SAASC,WAAW,EAAEC,MAAM,QAAQ,WAAW;;AAE/C;AACA;AACA;AAFA;AAAA;AAKA,IAAMC,eAAe,GAAGP,MAAM,CAACQ,MAAM,ySAEfF,MAAM,CAACG,WAAW,EACdH,MAAM,CAACI,WAAW,EAIxCL,WAAW,CAACM,MAAM,EAGlBN,WAAW,CAACO,KAAK,EAGjBP,WAAW,CAACQ,MAAM,CAGrB;AACD,IAAMC,UAAU,GAAGd,MAAM,CAACe,GAAG,+JACHT,MAAM,CAACU,KAAK,EAElCX,WAAW,CAACM,MAAM,CAGrB;AAiBD,IAAMM,UAAU,GAAG,SAAbA,UAAU,OAaM;EAAA,IAZpBC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IACXC,WAAW,QAAXA,WAAW;IACXC,aAAa,QAAbA,aAAa;IACbC,SAAS,QAATA,SAAS;IACTC,qBAAqB,QAArBA,qBAAqB;IACrBC,iCAAiC,QAAjCA,iCAAiC;IACjCC,eAAe,QAAfA,eAAe;IACfC,UAAU,QAAVA,UAAU;IACVC,kBAAkB,QAAlBA,kBAAkB;IACfC,IAAI;EAEP,oBACE,MAAC,eAAe;IAAC,EAAE,EAAEX,EAAG;IAAC,eAAa;EAAmB,GAAKW,IAAI;IAAA,wBAChE,KAAC,SAAS;MAAC,QAAQ,EAAEV,QAAS;MAAC,WAAW,EAAEE,WAAY;MAAC,SAAS,EAAEE;IAAU,EAAG,EAChFI,UAAU,iBAAI,KAAC,gBAAgB;MAAC,MAAM,EAAET,EAAG;MAAC,UAAU,EAAES;IAAW,EAAG,eACvE,KAAC,UAAU,KAAG,EACbF,iCAAiC,iBAChC,KAAC,gCAAgC;MAAC,gBAAgB,EAAED,qBAAsB;MAAC,wBAAwB,EAAEI,kBAAmB;MAAC,eAAe,EAAEF,eAAe,IAAI;IAAG,EACjK,eACD,KAAC,iBAAiB;MAAC,WAAW,EAAEN,WAAY;MAAC,aAAa,EAAEE;IAAc,EAAG;EAAA,GAC7D;AAEtB,CAAC;AAAC;EAvCAJ,EAAE;EACFC,QAAQ;EACRE,WAAW;EACXD,WAAW;EACXE,aAAa;EACbG,iCAAiC;EACjCK,wBAAwB;EACxBJ,eAAe;EACfH,SAAS;EAETC,qBAAqB;EACrBI,kBAAkB;AAAA;AA8BpB,eAAeX,UAAU"}
+{"version":3,"file":"SiteFooter.js","names":["React","styled","FooterBottomLinks","FooterTop","FooterNewsletterAndSocialSection","FooterNavSection","BREAKPOINTS","COLORS","PageWidth","FooterContainer","footer","neutral_800","neutral_200","MEDIUM","LARGE","FooterLine","div","white","SiteFooter","id","sitename","bottomLinks","showBetaTag","copyrightText","toTopText","placeholderEmailField","includeNewsletterAndSocialSection","newsletterLabel","navOptions","onNewsletterSignup","useMaxWidth","maxWidth","rest","actionOnNewsletterSignup"],"sources":["../../src/Footer/SiteFooter.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom components.\n */\nimport FooterBottomLinks from './Components/FooterBottomLinks';\nimport FooterTop from './Components/FooterTop';\nimport FooterNewsletterAndSocialSection from './Components/FooterNewsletterAndSocialSection';\nimport FooterNavSection from './Components/FooterNavSection';\nimport { BREAKPOINTS, COLORS } from '../styles';\n\n/**\n * Import custom styles.\n */\nimport { NavLink, NavOptions } from '../types';\nimport {PageWidth} from \"../Layouts\";\n\nconst FooterContainer = styled.footer`\n  margin-top: auto;\n  background-color: ${COLORS.neutral_800};\n  border-top: 8px solid ${COLORS.neutral_200};\n\n  padding-top: 0;\n  padding-bottom: 16px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    padding: 16px 0;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    padding: 16px 0;\n  }\n`;\nconst FooterLine = styled.div`\n  border-top: 1px solid ${COLORS.white};\n  display: none;\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n`;\n\ninterface NewFooterProps  extends Omit<React.HTMLAttributes<HTMLElement>, 'id'> {\n  id: string;\n  sitename?: string;\n  showBetaTag?: boolean;\n  bottomLinks?: NavLink[];\n  copyrightText?: string;\n  includeNewsletterAndSocialSection?: boolean;\n  actionOnNewsletterSignup?: (email: string) => void;\n  newsletterLabel?: string;\n  toTopText: string;\n  navOptions?: NavOptions;\n  placeholderEmailField?: string;\n  onNewsletterSignup?: (email: string) => void;\n  useMaxWidth?: boolean;\n  maxWidth?: number;\n}\n\nconst SiteFooter = ({\n  id,\n  sitename,\n  bottomLinks,\n  showBetaTag,\n  copyrightText,\n  toTopText,\n  placeholderEmailField,\n  includeNewsletterAndSocialSection,\n  newsletterLabel,\n  navOptions,\n  onNewsletterSignup,\n  useMaxWidth = true,\n  maxWidth,\n  ...rest\n}: NewFooterProps) => {\n  return (\n    <FooterContainer id={id} data-testid={'footer-container'} {...rest}>\n      <PageWidth unsetMargin={true} useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n        <FooterTop sitename={sitename} showBetaTag={showBetaTag} toTopText={toTopText} />\n        {navOptions && <FooterNavSection mainId={id} navOptions={navOptions} />}\n        <FooterLine />\n        {includeNewsletterAndSocialSection && (\n          <FooterNewsletterAndSocialSection placeholderEmail={placeholderEmailField} actionOnNewsletterSignup={onNewsletterSignup} newsletterLabel={newsletterLabel || ''} />\n        )}\n        <FooterBottomLinks bottomLinks={bottomLinks} copyrightText={copyrightText} />\n      </PageWidth>\n    </FooterContainer>\n  );\n};\n\nexport default SiteFooter;\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;AACA,OAAOC,MAAM,MAAM,mBAAmB;;AAEtC;AACA;AACA;AACA,OAAOC,iBAAiB,MAAM,gCAAgC;AAC9D,OAAOC,SAAS,MAAM,wBAAwB;AAC9C,OAAOC,gCAAgC,MAAM,+CAA+C;AAC5F,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,SAASC,WAAW,EAAEC,MAAM,QAAQ,WAAW;;AAE/C;AACA;AACA;;AAEA,SAAQC,SAAS,QAAO,YAAY;AAAC;AAAA;AAErC,IAAMC,eAAe,GAAGR,MAAM,CAACS,MAAM,mRAEfH,MAAM,CAACI,WAAW,EACdJ,MAAM,CAACK,WAAW,EAKxCN,WAAW,CAACO,MAAM,EAIlBP,WAAW,CAACQ,KAAK,CAGpB;AACD,IAAMC,UAAU,GAAGd,MAAM,CAACe,GAAG,+JACHT,MAAM,CAACU,KAAK,EAElCX,WAAW,CAACO,MAAM,CAGrB;AAmBD,IAAMK,UAAU,GAAG,SAAbA,UAAU,OAeM;EAAA,IAdpBC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IACXC,WAAW,QAAXA,WAAW;IACXC,aAAa,QAAbA,aAAa;IACbC,SAAS,QAATA,SAAS;IACTC,qBAAqB,QAArBA,qBAAqB;IACrBC,iCAAiC,QAAjCA,iCAAiC;IACjCC,eAAe,QAAfA,eAAe;IACfC,UAAU,QAAVA,UAAU;IACVC,kBAAkB,QAAlBA,kBAAkB;IAAA,wBAClBC,WAAW;IAAXA,WAAW,iCAAG,IAAI;IAClBC,QAAQ,QAARA,QAAQ;IACLC,IAAI;EAEP,oBACE,KAAC,eAAe;IAAC,EAAE,EAAEb,EAAG;IAAC,eAAa;EAAmB,GAAKa,IAAI;IAAA,uBAChE,MAAC,SAAS;MAAC,WAAW,EAAE,IAAK;MAAC,WAAW,EAAEF,WAAY;MAAC,QAAQ,EAAEC,QAAS;MAAA,wBACzE,KAAC,SAAS;QAAC,QAAQ,EAAEX,QAAS;QAAC,WAAW,EAAEE,WAAY;QAAC,SAAS,EAAEE;MAAU,EAAG,EAChFI,UAAU,iBAAI,KAAC,gBAAgB;QAAC,MAAM,EAAET,EAAG;QAAC,UAAU,EAAES;MAAW,EAAG,eACvE,KAAC,UAAU,KAAG,EACbF,iCAAiC,iBAChC,KAAC,gCAAgC;QAAC,gBAAgB,EAAED,qBAAsB;QAAC,wBAAwB,EAAEI,kBAAmB;QAAC,eAAe,EAAEF,eAAe,IAAI;MAAG,EACjK,eACD,KAAC,iBAAiB;QAAC,WAAW,EAAEN,WAAY;QAAC,aAAa,EAAEE;MAAc,EAAG;IAAA;EACnE,GACI;AAEtB,CAAC;AAAC;EA7CAJ,EAAE;EACFC,QAAQ;EACRE,WAAW;EACXD,WAAW;EACXE,aAAa;EACbG,iCAAiC;EACjCO,wBAAwB;EACxBN,eAAe;EACfH,SAAS;EAETC,qBAAqB;EACrBI,kBAAkB;EAClBC,WAAW;EACXC,QAAQ;AAAA;AAkCV,eAAeb,UAAU"}

package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs

@@ -32,13 +32,13 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var HeaderWrapper = _styledComponents.default.header(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: white;\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n\n  z-index: ", ";\n  position: relative;\n\n  height: 48px;\n\n  ", " {\n    height: 56px;\n  }\n\n  ", " {\n    height: 64px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n"])), _styles.COLORS.neutral_200, _styles.Z_INDEXES.sticky_menu, _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.LARGE);
+var HeaderWrapper = _styledComponents.default.header(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: white;\n  box-sizing: border-box;\n  \n  &.border:after{\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -1px;\n    height: 1px;\n    background: ", ";\n    z-index: 5;\n  }\n\n  z-index: ", ";\n  position: relative;\n\n  height: 48px;\n\n  ", " {\n    height: 64px;\n  }\n\n  ", " {\n    height: 80px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n"])), _styles.COLORS.neutral_200, _styles.Z_INDEXES.sticky_menu, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
 var RowLayout = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
-var HamburgerButton = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", " button {\n    height: 56px;\n  }\n\n  ", " {\n    display: none;\n  }\n"])), _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.LARGE);
-var RightSide = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  ", " {\n    margin: 0 0 0 auto;\n  }\n\n  &.reverse {\n    ", " {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n"])), _styles.BREAKPOINTS.XSMALL, HamburgerButton);
+var HamburgerButton = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    display: none;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
+var RightSide = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  margin: 0 0 0 auto;\n\n  &.reverse {\n    ", " {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n"])), HamburgerButton);
 var MobileMenuBackdrop = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  z-index: ", ";\n  visibility: hidden;\n\n  &.open {\n    visibility: visible;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  ", " {\n    visibility: hidden !important;\n  }\n"])), _styles.Z_INDEXES.backdrop, _CommonStyles.fadeIn, _CommonStyles.fadeOut, _styles.BREAKPOINTS.LARGE);
-var MobileWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    display: none !important;\n  }\n"])), _styles.BREAKPOINTS.LARGE);
-var UserMenuWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  display: flex;\n  position: absolute;\n\n  ", " {\n    top: 56px;\n    right: ", ";\n  }\n"])), _styles.COLORS.white, _styles.BREAKPOINTS.LARGE, function (props) {
+var MobileWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    display: none !important;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
+var UserMenuWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  display: flex;\n  position: absolute;\n\n  ", " {\n    top: 80px;\n    right: ", ";\n  }\n"])), _styles.COLORS.white, _styles.BREAKPOINTS.LARGE, function (props) {
   return props.offsetRight && (0, _utils.hasWindow)() ? "".concat(window.innerWidth - props.offsetRight + 296, "px") : '10%';
 });
 /**
@@ -58,7 +58,9 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
     _ref$useMaxWidth = _ref.useMaxWidth,
     useMaxWidth = _ref$useMaxWidth === void 0 ? true : _ref$useMaxWidth,
     maxWidth = _ref.maxWidth,
-    profileComponent = _ref.profileComponent;
+    profileComponent = _ref.profileComponent,
+    _ref$border = _ref.border,
+    border = _ref$border === void 0 ? true : _ref$border;
   var _React$useState = React.useState(false),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     showMobileMenu = _React$useState2[0],
@@ -101,9 +103,11 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderWrapper, {
       "data-testid": testId,
+      className: border ? 'border' : '',
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layouts.PageWidth, {
         useMaxWidth: useMaxWidth,
         maxWidth: maxWidth,
+        unsetMargin: true,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(RowLayout, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Logo.default, {
             name: name || '',
@@ -120,7 +124,9 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
             ref: rightSideRef,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RightSideNav.default, {
               items: desktop === null || desktop === void 0 ? void 0 : (_desktop$items = desktop.items) === null || _desktop$items === void 0 ? void 0 : _desktop$items.filter(function (a) {
-                return a.pinned;
+                return a.pinned && a.type == 'item';
+              }).map(function (x) {
+                return x;
               }),
               action: desktop === null || desktop === void 0 ? void 0 : desktop.action
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MobileWrapper, {
@@ -190,7 +196,8 @@ GlobalNavigationBar.propTypes = {
     showBetaTag: _propTypes.default.bool
   }),
   testId: _propTypes.default.string,
-  profileComponent: _propTypes.default.node
+  profileComponent: _propTypes.default.node,
+  border: _propTypes.default.bool
 };
 var _default = GlobalNavigationBar;
 exports.default = _default;

package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalNavigationBar.cjs","names":["HeaderWrapper","styled","header","COLORS","neutral_200","Z_INDEXES","sticky_menu","BREAKPOINTS","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","XSMALL","MobileMenuBackdrop","backdrop","fadeIn","fadeOut","MobileWrapper","UserMenuWrapper","white","props","offsetRight","hasWindow","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","profileComponent","React","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","usePreviousImmediate","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","useClickOutsideRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","undefined","some"],"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {SystemIcons} from '../icons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n  DesktopNavigationMenuProps, MenuProfileButton,\n  MobileNavigationMenuProps,\n  ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\nimport { hasWindow } from '../utils/utils';\n\nconst HeaderWrapper = styled.header`\n  background: white;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n\n  z-index: ${Z_INDEXES.sticky_menu};\n  position: relative;\n\n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    height: 64px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n`;\n\nconst RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n  ${BREAKPOINTS.SMALL} button {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    display: none;\n  }\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  align-items: center;\n\n  ${BREAKPOINTS.XSMALL} {\n    margin: 0 0 0 auto;\n  }\n\n  &.reverse {\n    ${HamburgerButton} {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  z-index: ${Z_INDEXES.backdrop};\n  visibility: hidden;\n\n  &.open {\n    visibility: visible;\n    animation: ${fadeIn} 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ${fadeOut} 0.3s ease-in-out;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    visibility: hidden !important;\n  }\n`;\n\nconst MobileWrapper = styled.div`\n  ${BREAKPOINTS.LARGE} {\n    display: none !important;\n  }\n`;\n\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n  background-color: ${COLORS.white};\n  display: flex;\n  position: absolute;\n\n  ${BREAKPOINTS.LARGE} {\n    top: 56px;\n    right: ${(props) => (props.offsetRight && hasWindow() ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  }\n`;\n\n\n\ntype GlobalNavigationBarProps = {\n  isAuthenticated?: boolean;\n  useMaxWidth?: boolean;\n  maxWidth?: number;\n\n  name?: string;\n  logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n  profile?: ProfileMenu;\n\n  mobile?: MobileNavigationMenuProps;\n  desktop?: DesktopNavigationMenuProps;\n\n  testId?: string;\n\n  profileComponent?: React.ReactNode\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n                               name,\n                               isAuthenticated,\n                               logo,\n                               profile,\n                               mobile,\n                               desktop,\n                               testId,\n                               useMaxWidth = true,\n                               maxWidth,\n                               profileComponent\n                             }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n  const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n  const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n  const actionsRef = React.useRef<DesktopActionsRef>(null);\n  const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n  profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n  const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  const rightSideRef = React.useRef(null);\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n  const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n  const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n  React.useEffect(() => {\n    if (!profileButtonRef.current) return;\n\n    const handleResize = () => {\n      const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n      setAvatarRight(profileRightOffset || 0);\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [profileButtonRef.current]);\n\n\n  return (\n    <>\n      <HeaderWrapper data-testid={testId}>\n        <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n          <RowLayout>\n            <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n            {\n              isAuthenticated &&\n              <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n            }\n            <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n                       ref={rightSideRef}>\n              <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n              <MobileWrapper>\n                {!!profileComponent && profileComponent }\n              </MobileWrapper>\n\n              <DesktopActions ref={actionsRef}\n                              buttons={desktop?.buttons}\n                              onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n                              user={profile?.user}\n                              profileComponent= {profileComponent}\n                              />\n              <HamburgerButton hidden={!isAuthenticated}>\n                <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n                            ref={mobileMenuButtonRef}\n                            shape={'circular'}\n                            variant={'secondary'}>\n                  <SystemIcons.Menu size=\"24px\"/>\n                </IconButton>\n              </HamburgerButton>\n            </RightSide>\n          </RowLayout>\n        </PageWidth>\n      </HeaderWrapper>\n      <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n        <MobileMenuWrapper ref={mobileMenuRef}\n                           role=\"menu\"\n                           aria-labelledby=\"UserMenuButton\">\n          <MobileMenu {...mobile}\n                      show={showMobileMenu}\n                      onClose={() => setShowMobileMenu(false)}\n                      profile={!profileComponent ? profile : undefined}/>\n        </MobileMenuWrapper>\n      </MobileMenuBackdrop>\n      {\n        desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n        <UserMenuWrapper ref={userMenuRef}\n                         offsetRight={avatarRight}\n                         data-testid=\"testUserMenuWrapper\">\n          <UserMenu {...profile}\n                    show={showUserMenu}\n                    onHideUserMenu={() => setShowUserMenu(false)}/>\n        </UserMenuWrapper>\n      }\n    </>\n  );\n};\n\nexport default GlobalNavigationBar;\n"],"mappings":"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"}
+{"version":3,"file":"GlobalNavigationBar.cjs","names":["HeaderWrapper","styled","header","COLORS","neutral_200","Z_INDEXES","sticky_menu","BREAKPOINTS","MEDIUM","LARGE","RowLayout","div","HamburgerButton","RightSide","MobileMenuBackdrop","backdrop","fadeIn","fadeOut","MobileWrapper","UserMenuWrapper","white","props","offsetRight","hasWindow","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","profileComponent","border","React","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","usePreviousImmediate","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","useClickOutsideRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","map","x","action","user","undefined","some"],"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {SystemIcons} from '../icons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n  DesktopNavigationMenuProps, MenuNavigationItemTypeItem, MenuProfileButton,\n  MobileNavigationMenuProps,\n  ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\nimport { hasWindow } from '../utils/utils';\n\nconst HeaderWrapper = styled.header`\n  background: white;\n  box-sizing: border-box;\n  \n  &.border:after{\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -1px;\n    height: 1px;\n    background: ${COLORS.neutral_200};\n    z-index: 5;\n  }\n\n  z-index: ${Z_INDEXES.sticky_menu};\n  position: relative;\n\n  height: 48px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    height: 80px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n`;\n\nconst RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n  ${BREAKPOINTS.MEDIUM} {\n    display: none;\n  }\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  align-items: center;\n\n  margin: 0 0 0 auto;\n\n  &.reverse {\n    ${HamburgerButton} {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  z-index: ${Z_INDEXES.backdrop};\n  visibility: hidden;\n\n  &.open {\n    visibility: visible;\n    animation: ${fadeIn} 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ${fadeOut} 0.3s ease-in-out;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    visibility: hidden !important;\n  }\n`;\n\nconst MobileWrapper = styled.div`\n  ${BREAKPOINTS.MEDIUM} {\n    display: none !important;\n  }\n`;\n\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n  background-color: ${COLORS.white};\n  display: flex;\n  position: absolute;\n\n  ${BREAKPOINTS.LARGE} {\n    top: 80px;\n    right: ${(props) => (props.offsetRight && hasWindow() ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  }\n`;\n\n\n\ntype GlobalNavigationBarProps = {\n  isAuthenticated?: boolean;\n  useMaxWidth?: boolean;\n  maxWidth?: number;\n\n  name?: string;\n  logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n  profile?: ProfileMenu;\n\n  mobile?: MobileNavigationMenuProps;\n  desktop?: DesktopNavigationMenuProps;\n\n  testId?: string;\n\n  profileComponent?: React.ReactNode\n  border?: boolean;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n                               name,\n                               isAuthenticated,\n                               logo,\n                               profile,\n                               mobile,\n                               desktop,\n                               testId,\n                               useMaxWidth = true,\n                               maxWidth,\n                               profileComponent,\n                               border = true\n                             }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n  const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n  const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n  const actionsRef = React.useRef<DesktopActionsRef>(null);\n  const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n  profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n  const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  const rightSideRef = React.useRef(null);\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n  const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n  const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n  React.useEffect(() => {\n    if (!profileButtonRef.current) return;\n\n    const handleResize = () => {\n      const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n      setAvatarRight(profileRightOffset || 0);\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [profileButtonRef.current]);\n\n\n  return (\n    <>\n      <HeaderWrapper data-testid={testId} className={border ? 'border' : ''}>\n        <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth} unsetMargin={true}>\n          <RowLayout>\n            <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n            {\n              isAuthenticated &&\n              <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n            }\n            <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n                       ref={rightSideRef}>\n              <RightSideNav items={desktop?.items?.filter(a => a.pinned && a.type == 'item').map(x => x as MenuNavigationItemTypeItem)} action={desktop?.action}/>\n              <MobileWrapper>\n                {!!profileComponent && profileComponent }\n              </MobileWrapper>\n\n              <DesktopActions ref={actionsRef}\n                              buttons={desktop?.buttons}\n                              onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n                              user={profile?.user}\n                              profileComponent= {profileComponent}\n                              />\n              <HamburgerButton hidden={!isAuthenticated}>\n                <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n                            ref={mobileMenuButtonRef}\n                            shape={'circular'}\n                            variant={'secondary'}>\n                  <SystemIcons.Menu size=\"24px\"/>\n                </IconButton>\n              </HamburgerButton>\n            </RightSide>\n          </RowLayout>\n        </PageWidth>\n      </HeaderWrapper>\n      <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n        <MobileMenuWrapper ref={mobileMenuRef}\n                           role=\"menu\"\n                           aria-labelledby=\"UserMenuButton\">\n          <MobileMenu {...mobile}\n                      show={showMobileMenu}\n                      onClose={() => setShowMobileMenu(false)}\n                      profile={!profileComponent ? profile : undefined}/>\n        </MobileMenuWrapper>\n      </MobileMenuBackdrop>\n      {\n        desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n        <UserMenuWrapper ref={userMenuRef}\n                         offsetRight={avatarRight}\n                         data-testid=\"testUserMenuWrapper\">\n          <UserMenu {...profile}\n                    show={showUserMenu}\n                    onHideUserMenu={() => setShowUserMenu(false)}/>\n        </UserMenuWrapper>\n      }\n    </>\n  );\n};\n\nexport default GlobalNavigationBar;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/GlobalNavigationBar.d.ts

@@ -15,11 +15,12 @@ type GlobalNavigationBarProps = {
     desktop?: DesktopNavigationMenuProps;
     testId?: string;
     profileComponent?: React.ReactNode;
+    border?: boolean;
 };
 /**
  * @param props
  * @constructor
  * @description This component is a global navigation header bar
  */
-declare const GlobalNavigationBar: ({ name, isAuthenticated, logo, profile, mobile, desktop, testId, useMaxWidth, maxWidth, profileComponent }: GlobalNavigationBarProps) => React.ReactElement<GlobalNavigationBarProps>;
+declare const GlobalNavigationBar: ({ name, isAuthenticated, logo, profile, mobile, desktop, testId, useMaxWidth, maxWidth, profileComponent, border }: GlobalNavigationBarProps) => React.ReactElement<GlobalNavigationBarProps>;
 export default GlobalNavigationBar;

package/dist/GlobalNavigationBar/GlobalNavigationBar.js

@@ -25,13 +25,13 @@ import { hasWindow } from '../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-var HeaderWrapper = styled.header(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: white;\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n\n  z-index: ", ";\n  position: relative;\n\n  height: 48px;\n\n  ", " {\n    height: 56px;\n  }\n\n  ", " {\n    height: 64px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n"])), COLORS.neutral_200, Z_INDEXES.sticky_menu, BREAKPOINTS.SMALL, BREAKPOINTS.LARGE);
+var HeaderWrapper = styled.header(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: white;\n  box-sizing: border-box;\n  \n  &.border:after{\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -1px;\n    height: 1px;\n    background: ", ";\n    z-index: 5;\n  }\n\n  z-index: ", ";\n  position: relative;\n\n  height: 48px;\n\n  ", " {\n    height: 64px;\n  }\n\n  ", " {\n    height: 80px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n"])), COLORS.neutral_200, Z_INDEXES.sticky_menu, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
 var RowLayout = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
-var HamburgerButton = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " button {\n    height: 56px;\n  }\n\n  ", " {\n    display: none;\n  }\n"])), BREAKPOINTS.SMALL, BREAKPOINTS.LARGE);
-var RightSide = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  ", " {\n    margin: 0 0 0 auto;\n  }\n\n  &.reverse {\n    ", " {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n"])), BREAKPOINTS.XSMALL, HamburgerButton);
+var HamburgerButton = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " {\n    display: none;\n  }\n"])), BREAKPOINTS.MEDIUM);
+var RightSide = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  margin: 0 0 0 auto;\n\n  &.reverse {\n    ", " {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n"])), HamburgerButton);
 var MobileMenuBackdrop = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  z-index: ", ";\n  visibility: hidden;\n\n  &.open {\n    visibility: visible;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  ", " {\n    visibility: hidden !important;\n  }\n"])), Z_INDEXES.backdrop, fadeIn, fadeOut, BREAKPOINTS.LARGE);
-var MobileWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", " {\n    display: none !important;\n  }\n"])), BREAKPOINTS.LARGE);
-var UserMenuWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: flex;\n  position: absolute;\n\n  ", " {\n    top: 56px;\n    right: ", ";\n  }\n"])), COLORS.white, BREAKPOINTS.LARGE, function (props) {
+var MobileWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", " {\n    display: none !important;\n  }\n"])), BREAKPOINTS.MEDIUM);
+var UserMenuWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: flex;\n  position: absolute;\n\n  ", " {\n    top: 80px;\n    right: ", ";\n  }\n"])), COLORS.white, BREAKPOINTS.LARGE, function (props) {
   return props.offsetRight && hasWindow() ? "".concat(window.innerWidth - props.offsetRight + 296, "px") : '10%';
 });
 /**
@@ -51,7 +51,9 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
     _ref$useMaxWidth = _ref.useMaxWidth,
     useMaxWidth = _ref$useMaxWidth === void 0 ? true : _ref$useMaxWidth,
     maxWidth = _ref.maxWidth,
-    profileComponent = _ref.profileComponent;
+    profileComponent = _ref.profileComponent,
+    _ref$border = _ref.border,
+    border = _ref$border === void 0 ? true : _ref$border;
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     showMobileMenu = _React$useState2[0],
@@ -94,9 +96,11 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(HeaderWrapper, {
       "data-testid": testId,
+      className: border ? 'border' : '',
       children: /*#__PURE__*/_jsx(PageWidth, {
         useMaxWidth: useMaxWidth,
         maxWidth: maxWidth,
+        unsetMargin: true,
         children: /*#__PURE__*/_jsxs(RowLayout, {
           children: [/*#__PURE__*/_jsx(Logo, {
             name: name || '',
@@ -113,7 +117,9 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
             ref: rightSideRef,
             children: [/*#__PURE__*/_jsx(RightSideNav, {
               items: desktop === null || desktop === void 0 ? void 0 : (_desktop$items = desktop.items) === null || _desktop$items === void 0 ? void 0 : _desktop$items.filter(function (a) {
-                return a.pinned;
+                return a.pinned && a.type == 'item';
+              }).map(function (x) {
+                return x;
               }),
               action: desktop === null || desktop === void 0 ? void 0 : desktop.action
             }), /*#__PURE__*/_jsx(MobileWrapper, {
@@ -183,7 +189,8 @@ GlobalNavigationBar.propTypes = {
     showBetaTag: _pt.bool
   }),
   testId: _pt.string,
-  profileComponent: _pt.node
+  profileComponent: _pt.node,
+  border: _pt.bool
 };
 export default GlobalNavigationBar;
 //# sourceMappingURL=GlobalNavigationBar.js.map

package/dist/GlobalNavigationBar/GlobalNavigationBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalNavigationBar.js","names":["React","styled","Logo","MainMenu","PageWidth","COLORS","BREAKPOINTS","RightSideNav","MobileMenu","SystemIcons","UserMenu","fadeIn","fadeOut","Menu","MobileMenuWrapper","Z_INDEXES","IconButton","DesktopActions","usePreviousImmediate","useClickOutsideRef","hasWindow","HeaderWrapper","header","neutral_200","sticky_menu","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","XSMALL","MobileMenuBackdrop","backdrop","MobileWrapper","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","profileComponent","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","undefined","some"],"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {SystemIcons} from '../icons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n  DesktopNavigationMenuProps, MenuProfileButton,\n  MobileNavigationMenuProps,\n  ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\nimport { hasWindow } from '../utils/utils';\n\nconst HeaderWrapper = styled.header`\n  background: white;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n\n  z-index: ${Z_INDEXES.sticky_menu};\n  position: relative;\n\n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    height: 64px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n`;\n\nconst RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n  ${BREAKPOINTS.SMALL} button {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    display: none;\n  }\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  align-items: center;\n\n  ${BREAKPOINTS.XSMALL} {\n    margin: 0 0 0 auto;\n  }\n\n  &.reverse {\n    ${HamburgerButton} {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  z-index: ${Z_INDEXES.backdrop};\n  visibility: hidden;\n\n  &.open {\n    visibility: visible;\n    animation: ${fadeIn} 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ${fadeOut} 0.3s ease-in-out;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    visibility: hidden !important;\n  }\n`;\n\nconst MobileWrapper = styled.div`\n  ${BREAKPOINTS.LARGE} {\n    display: none !important;\n  }\n`;\n\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n  background-color: ${COLORS.white};\n  display: flex;\n  position: absolute;\n\n  ${BREAKPOINTS.LARGE} {\n    top: 56px;\n    right: ${(props) => (props.offsetRight && hasWindow() ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  }\n`;\n\n\n\ntype GlobalNavigationBarProps = {\n  isAuthenticated?: boolean;\n  useMaxWidth?: boolean;\n  maxWidth?: number;\n\n  name?: string;\n  logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n  profile?: ProfileMenu;\n\n  mobile?: MobileNavigationMenuProps;\n  desktop?: DesktopNavigationMenuProps;\n\n  testId?: string;\n\n  profileComponent?: React.ReactNode\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n                               name,\n                               isAuthenticated,\n                               logo,\n                               profile,\n                               mobile,\n                               desktop,\n                               testId,\n                               useMaxWidth = true,\n                               maxWidth,\n                               profileComponent\n                             }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n  const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n  const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n  const actionsRef = React.useRef<DesktopActionsRef>(null);\n  const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n  profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n  const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  const rightSideRef = React.useRef(null);\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n  const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n  const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n  React.useEffect(() => {\n    if (!profileButtonRef.current) return;\n\n    const handleResize = () => {\n      const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n      setAvatarRight(profileRightOffset || 0);\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [profileButtonRef.current]);\n\n\n  return (\n    <>\n      <HeaderWrapper data-testid={testId}>\n        <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n          <RowLayout>\n            <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n            {\n              isAuthenticated &&\n              <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n            }\n            <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n                       ref={rightSideRef}>\n              <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n              <MobileWrapper>\n                {!!profileComponent && profileComponent }\n              </MobileWrapper>\n\n              <DesktopActions ref={actionsRef}\n                              buttons={desktop?.buttons}\n                              onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n                              user={profile?.user}\n                              profileComponent= {profileComponent}\n                              />\n              <HamburgerButton hidden={!isAuthenticated}>\n                <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n                            ref={mobileMenuButtonRef}\n                            shape={'circular'}\n                            variant={'secondary'}>\n                  <SystemIcons.Menu size=\"24px\"/>\n                </IconButton>\n              </HamburgerButton>\n            </RightSide>\n          </RowLayout>\n        </PageWidth>\n      </HeaderWrapper>\n      <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n        <MobileMenuWrapper ref={mobileMenuRef}\n                           role=\"menu\"\n                           aria-labelledby=\"UserMenuButton\">\n          <MobileMenu {...mobile}\n                      show={showMobileMenu}\n                      onClose={() => setShowMobileMenu(false)}\n                      profile={!profileComponent ? profile : undefined}/>\n        </MobileMenuWrapper>\n      </MobileMenuBackdrop>\n      {\n        desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n        <UserMenuWrapper ref={userMenuRef}\n                         offsetRight={avatarRight}\n                         data-testid=\"testUserMenuWrapper\">\n          <UserMenu {...profile}\n                    show={showUserMenu}\n                    onHideUserMenu={() => setShowUserMenu(false)}/>\n        </UserMenuWrapper>\n      }\n    </>\n  );\n};\n\nexport default GlobalNavigationBar;\n"],"mappings":"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"}
+{"version":3,"file":"GlobalNavigationBar.js","names":["React","styled","Logo","MainMenu","PageWidth","COLORS","BREAKPOINTS","RightSideNav","MobileMenu","SystemIcons","UserMenu","fadeIn","fadeOut","Menu","MobileMenuWrapper","Z_INDEXES","IconButton","DesktopActions","usePreviousImmediate","useClickOutsideRef","hasWindow","HeaderWrapper","header","neutral_200","sticky_menu","MEDIUM","LARGE","RowLayout","div","HamburgerButton","RightSide","MobileMenuBackdrop","backdrop","MobileWrapper","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","profileComponent","border","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","map","x","action","user","undefined","some"],"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {SystemIcons} from '../icons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n  DesktopNavigationMenuProps, MenuNavigationItemTypeItem, MenuProfileButton,\n  MobileNavigationMenuProps,\n  ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\nimport { hasWindow } from '../utils/utils';\n\nconst HeaderWrapper = styled.header`\n  background: white;\n  box-sizing: border-box;\n  \n  &.border:after{\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -1px;\n    height: 1px;\n    background: ${COLORS.neutral_200};\n    z-index: 5;\n  }\n\n  z-index: ${Z_INDEXES.sticky_menu};\n  position: relative;\n\n  height: 48px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    height: 64px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    height: 80px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n`;\n\nconst RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n  ${BREAKPOINTS.MEDIUM} {\n    display: none;\n  }\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  align-items: center;\n\n  margin: 0 0 0 auto;\n\n  &.reverse {\n    ${HamburgerButton} {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  z-index: ${Z_INDEXES.backdrop};\n  visibility: hidden;\n\n  &.open {\n    visibility: visible;\n    animation: ${fadeIn} 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ${fadeOut} 0.3s ease-in-out;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    visibility: hidden !important;\n  }\n`;\n\nconst MobileWrapper = styled.div`\n  ${BREAKPOINTS.MEDIUM} {\n    display: none !important;\n  }\n`;\n\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n  background-color: ${COLORS.white};\n  display: flex;\n  position: absolute;\n\n  ${BREAKPOINTS.LARGE} {\n    top: 80px;\n    right: ${(props) => (props.offsetRight && hasWindow() ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  }\n`;\n\n\n\ntype GlobalNavigationBarProps = {\n  isAuthenticated?: boolean;\n  useMaxWidth?: boolean;\n  maxWidth?: number;\n\n  name?: string;\n  logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n  profile?: ProfileMenu;\n\n  mobile?: MobileNavigationMenuProps;\n  desktop?: DesktopNavigationMenuProps;\n\n  testId?: string;\n\n  profileComponent?: React.ReactNode\n  border?: boolean;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n                               name,\n                               isAuthenticated,\n                               logo,\n                               profile,\n                               mobile,\n                               desktop,\n                               testId,\n                               useMaxWidth = true,\n                               maxWidth,\n                               profileComponent,\n                               border = true\n                             }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n  const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n  const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n  const actionsRef = React.useRef<DesktopActionsRef>(null);\n  const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n  profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n  const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  const rightSideRef = React.useRef(null);\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n  const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n  const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n  React.useEffect(() => {\n    if (!profileButtonRef.current) return;\n\n    const handleResize = () => {\n      const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n      setAvatarRight(profileRightOffset || 0);\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [profileButtonRef.current]);\n\n\n  return (\n    <>\n      <HeaderWrapper data-testid={testId} className={border ? 'border' : ''}>\n        <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth} unsetMargin={true}>\n          <RowLayout>\n            <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n            {\n              isAuthenticated &&\n              <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n            }\n            <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n                       ref={rightSideRef}>\n              <RightSideNav items={desktop?.items?.filter(a => a.pinned && a.type == 'item').map(x => x as MenuNavigationItemTypeItem)} action={desktop?.action}/>\n              <MobileWrapper>\n                {!!profileComponent && profileComponent }\n              </MobileWrapper>\n\n              <DesktopActions ref={actionsRef}\n                              buttons={desktop?.buttons}\n                              onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n                              user={profile?.user}\n                              profileComponent= {profileComponent}\n                              />\n              <HamburgerButton hidden={!isAuthenticated}>\n                <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n                            ref={mobileMenuButtonRef}\n                            shape={'circular'}\n                            variant={'secondary'}>\n                  <SystemIcons.Menu size=\"24px\"/>\n                </IconButton>\n              </HamburgerButton>\n            </RightSide>\n          </RowLayout>\n        </PageWidth>\n      </HeaderWrapper>\n      <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n        <MobileMenuWrapper ref={mobileMenuRef}\n                           role=\"menu\"\n                           aria-labelledby=\"UserMenuButton\">\n          <MobileMenu {...mobile}\n                      show={showMobileMenu}\n                      onClose={() => setShowMobileMenu(false)}\n                      profile={!profileComponent ? profile : undefined}/>\n        </MobileMenuWrapper>\n      </MobileMenuBackdrop>\n      {\n        desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n        <UserMenuWrapper ref={userMenuRef}\n                         offsetRight={avatarRight}\n                         data-testid=\"testUserMenuWrapper\">\n          <UserMenu {...profile}\n                    show={showUserMenu}\n                    onHideUserMenu={() => setShowUserMenu(false)}/>\n        </UserMenuWrapper>\n      }\n    </>\n  );\n};\n\nexport default GlobalNavigationBar;\n"],"mappings":";;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAOC,IAAI,MAAM,QAAQ;AACzB,OAAOC,QAAQ,MAAM,oBAAoB;AACzC,SAAQC,SAAS,QAAO,YAAY;AACpC,SAAQC,MAAM,EAAEC,WAAW,QAAO,WAAW;AAC7C,OAAOC,YAAY,MAAM,wBAAwB;AACjD,OAAOC,UAAU,MAAM,qBAAqB;AAC5C,SAAQC,WAAW,QAAO,UAAU;AACpC,OAAOC,QAAQ,MAAM,oBAAoB;AACzC,SAAQC,MAAM,EAAEC,OAAO,EAAEC,IAAI,IAAIC,iBAAiB,QAAO,uBAAuB;AAChF,SAAQC,SAAS,QAAO,WAAW;AAMnC,SAAQC,UAAU,QAAO,WAAW;AACpC,OAAOC,cAAc,MAA2B,0BAA0B;AAC1E,SAAQC,oBAAoB,QAAO,OAAO;AAC1C,SAAQC,kBAAkB,QAAO,WAAW;AAC5C,SAASC,SAAS,QAAQ,gBAAgB;AAAC;AAAA;AAAA;AAE3C,IAAMC,aAAa,GAAGpB,MAAM,CAACqB,MAAM,2iBAWjBjB,MAAM,CAACkB,WAAW,EAIvBR,SAAS,CAACS,WAAW,EAK9BlB,WAAW,CAACmB,MAAM,EAIlBnB,WAAW,CAACoB,KAAK,CAWpB;AAED,IAAMC,SAAS,GAAG1B,MAAM,CAAC2B,GAAG,mHAG3B;AAGD,IAAMC,eAAe,GAAG5B,MAAM,CAAC2B,GAAG,6GAC9BtB,WAAW,CAACmB,MAAM,CAGrB;AAED,IAAMK,SAAS,GAAG7B,MAAM,CAAC2B,GAAG,4OAOtBC,eAAe,CAMpB;AAED,IAAME,kBAAkB,GAAG9B,MAAM,CAAC2B,GAAG,ueASxBb,SAAS,CAACiB,QAAQ,EAKdrB,MAAM,EAKNC,OAAO,EAGpBN,WAAW,CAACoB,KAAK,CAGpB;AAED,IAAMO,aAAa,GAAGhC,MAAM,CAAC2B,GAAG,wHAC5BtB,WAAW,CAACmB,MAAM,CAGrB;AAGD,IAAMS,eAAe,GAAGjC,MAAM,CAAC2B,GAAG,iMACZvB,MAAM,CAAC8B,KAAK,EAI9B7B,WAAW,CAACoB,KAAK,EAER,UAACU,KAAK;EAAA,OAAMA,KAAK,CAACC,WAAW,IAAIjB,SAAS,EAAE,aAAMkB,MAAM,CAACC,UAAU,GAAGH,KAAK,CAACC,WAAW,GAAG,GAAG,UAAO,KAAK;AAAA,CAAC,CAEtH;AAuBD;AACA;AACA;AACA;AACA;AACA,IAAMG,mBAAmB,GAAG,SAAtBA,mBAAmB,OAYkF;EAAA;EAAA,IAX5EC,IAAI,QAAJA,IAAI;IACJC,eAAe,QAAfA,eAAe;IACfC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IAAA,wBACNC,WAAW;IAAXA,WAAW,iCAAG,IAAI;IAClBC,QAAQ,QAARA,QAAQ;IACRC,gBAAgB,QAAhBA,gBAAgB;IAAA,mBAChBC,MAAM;IAANA,MAAM,4BAAG,IAAI;EAE1C,sBAA4CnD,KAAK,CAACoD,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA1DC,cAAc;IAAEC,iBAAiB;EACxC,IAAMC,iBAAiB,GAAGrC,oBAAoB,CAACmC,cAAc,CAAC;EAE9D,uBAAwCrD,KAAK,CAACoD,QAAQ,CAAC,KAAK,CAAC;IAAA;IAAtDI,YAAY;IAAEC,eAAe;EAEpC,IAAMC,UAAU,GAAG1D,KAAK,CAAC2D,MAAM,CAAoB,IAAI,CAAC;EACxD,IAAMC,gBAAgB,GAAG5D,KAAK,CAAC2D,MAAM,EAA4F;EACjIC,gBAAgB,CAACC,OAAO,GAAGH,UAAU,aAAVA,UAAU,8CAAVA,UAAU,CAAEG,OAAO,iFAAnB,oBAAqBC,OAAO,oFAA5B,sBAA8BC,IAAI,CAAC,UAAAC,CAAC;IAAA,OAAIA,CAAC,CAACC,IAAI,KAAK,SAAS;EAAA,EAAC,qFAA7D,uBAA+DC,GAAG,2DAAlE,uBAAoEL,OAAO;EAEtG,IAAMM,mBAAmB,GAAGnE,KAAK,CAAC2D,MAAM,CAAoB,IAAI,CAAC;EAEjE,IAAMS,YAAY,GAAGpE,KAAK,CAAC2D,MAAM,CAAC,IAAI,CAAC;EACvC,uBAAsC3D,KAAK,CAACoD,QAAQ,CAAS,CAAC,CAAC;IAAA;IAAxDiB,WAAW;IAAEC,cAAc;EAGlC,IAAMC,WAAW,GAAGpD,kBAAkB,CAAC;IAAA,OAAMsC,eAAe,CAAC,KAAK,CAAC;EAAA,GAAE,CAACG,gBAAgB,CAAC,CAAC;EACxF,IAAMY,aAAa,GAAGrD,kBAAkB,CAAC;IAAA,OAAMmC,iBAAiB,CAAC,KAAK,CAAC;EAAA,GAAE,CAACa,mBAAmB,CAAC,CAAC;EAE/FnE,KAAK,CAACyE,SAAS,CAAC,YAAM;IACpB,IAAI,CAACb,gBAAgB,CAACC,OAAO,EAAE;IAE/B,IAAMa,YAAY,GAAG,SAAfA,YAAY,GAAS;MAAA;MACzB,IAAMC,kBAAkB,4BAAGf,gBAAgB,CAACC,OAAO,oFAAxB,sBAA0Be,qBAAqB,EAAE,2DAAjD,uBAAmDC,KAAK;MACnFP,cAAc,CAACK,kBAAkB,IAAI,CAAC,CAAC;IACzC,CAAC;IAEDD,YAAY,EAAE;IACdpC,MAAM,CAACwC,gBAAgB,CAAC,QAAQ,EAAEJ,YAAY,CAAC;IAC/C,OAAO;MAAA,OAAMpC,MAAM,CAACyC,mBAAmB,CAAC,QAAQ,EAAEL,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,CAACd,gBAAgB,CAACC,OAAO,CAAC,CAAC;EAG9B,oBACE;IAAA,wBACE,KAAC,aAAa;MAAC,eAAad,MAAO;MAAC,SAAS,EAAEI,MAAM,GAAG,QAAQ,GAAG,EAAG;MAAA,uBACpE,KAAC,SAAS;QAAC,WAAW,EAAEH,WAAY;QAAC,QAAQ,EAAEC,QAAS;QAAC,WAAW,EAAE,IAAK;QAAA,uBACzE,MAAC,SAAS;UAAA,wBACR,KAAC,IAAI;YAAC,IAAI,EAAER,IAAI,IAAI,EAAG;YAAC,WAAW,EAAEE,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEqC,WAAY;YAAC,OAAO,EAAErC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEsC,OAAQ;YAAC,EAAE,EAAEtC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEuC;UAAG,EAAE,EAE7FxC,eAAe,iBACf,KAAC,QAAQ;YAAC,KAAK,EAAE,CAAAI,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEqC,KAAK,CAACC,MAAM,CAAC,UAAApB,CAAC;cAAA,OAAI,CAACA,CAAC,CAACqB,MAAM;YAAA,EAAC,KAAI,EAAG;YAAC,YAAY,EAAEjB;UAAa,EAAE,eAE7F,MAAC,SAAS;YAAC,SAAS,YAAKtB,OAAO,aAAPA,OAAO,eAAPA,OAAO,CAAEwC,qBAAqB,GAAG,SAAS,GAAG,EAAE,CAAG;YAChE,GAAG,EAAElB,YAAa;YAAA,wBAC3B,KAAC,YAAY;cAAC,KAAK,EAAEtB,OAAO,aAAPA,OAAO,yCAAPA,OAAO,CAAEqC,KAAK,mDAAd,eAAgBC,MAAM,CAAC,UAAApB,CAAC;gBAAA,OAAIA,CAAC,CAACqB,MAAM,IAAIrB,CAAC,CAACC,IAAI,IAAI,MAAM;cAAA,EAAC,CAACsB,GAAG,CAAC,UAAAC,CAAC;gBAAA,OAAIA,CAAC;cAAA,CAA8B,CAAE;cAAC,MAAM,EAAE1C,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAE2C;YAAO,EAAE,eACpJ,KAAC,aAAa;cAAA,UACX,CAAC,CAACvC,gBAAgB,IAAIA;YAAgB,EACzB,eAEhB,KAAC,cAAc;cAAC,GAAG,EAAEQ,UAAW;cAChB,OAAO,EAAEZ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEgB,OAAQ;cAC1B,cAAc,EAAE;gBAAA,OAAML,eAAe,CAAC,CAACD,YAAY,CAAC;cAAA,CAAC;cACrD,IAAI,EAAEZ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAE8C,IAAK;cACpB,gBAAgB,EAAGxC;YAAiB,EAClC,eAClB,KAAC,eAAe;cAAC,MAAM,EAAE,CAACR,eAAgB;cAAA,uBACxC,KAAC,UAAU;gBAAC,MAAM,EAAE;kBAAA,OAAMY,iBAAiB,CAAC,CAACD,cAAc,CAAC;gBAAA,CAAC;gBACjD,GAAG,EAAEc,mBAAoB;gBACzB,KAAK,EAAE,UAAW;gBAClB,OAAO,EAAE,WAAY;gBAAA,uBAC/B,KAAC,WAAW,CAAC,IAAI;kBAAC,IAAI,EAAC;gBAAM;cAAE;YACpB,EACG;UAAA,EACR;QAAA;MACF;IACF,EACE,eAChB,KAAC,kBAAkB;MAAC,SAAS,EAAEd,cAAc,GAAG,MAAM,GAAG,CAACG,YAAY,IAAID,iBAAiB,GAAG,QAAQ,GAAG,EAAG;MAAA,uBAC1G,KAAC,iBAAiB;QAAC,GAAG,EAAEiB,aAAc;QACnB,IAAI,EAAC,MAAM;QACX,mBAAgB,gBAAgB;QAAA,uBACjD,KAAC,UAAU,kCAAK3B,MAAM;UACV,IAAI,EAAEQ,cAAe;UACrB,OAAO,EAAE;YAAA,OAAMC,iBAAiB,CAAC,KAAK,CAAC;UAAA,CAAC;UACxC,OAAO,EAAE,CAACJ,gBAAgB,GAAGN,OAAO,GAAG+C;QAAU;MAAE;IAC7C,EACD,EAEnB,CAAA7C,OAAO,aAAPA,OAAO,2CAAPA,OAAO,CAAEgB,OAAO,qDAAhB,iBAAkB8B,IAAI,CAAC,UAAA5B,CAAC;MAAA,OAAIA,CAAC,CAACC,IAAI,KAAK,SAAS;IAAA,EAAC,KAAI,CAAC,CAACrB,OAAO,iBAC9D,KAAC,eAAe;MAAC,GAAG,EAAE2B,WAAY;MACjB,WAAW,EAAEF,WAAY;MACzB,eAAY,qBAAqB;MAAA,uBAChD,KAAC,QAAQ,kCAAKzB,OAAO;QACX,IAAI,EAAEY,YAAa;QACnB,cAAc,EAAE;UAAA,OAAMC,eAAe,CAAC,KAAK,CAAC;QAAA;MAAC;IAAE,EACzC;EAAA,EAEnB;AAEP,CAAC;AAAC;EA7HAf,eAAe;EACfM,WAAW;EACXC,QAAQ;EAERR,IAAI;EACJE,IAAI;IAAKsC,OAAO;IAAeC,EAAE;IAAWF,WAAW;EAAA;EAOvDjC,MAAM;EAENG,gBAAgB;EAChBC,MAAM;AAAA;AAgHR,eAAeX,mBAAmB"}

package/dist/GlobalNavigationBar/Logo.cjs

@@ -21,10 +21,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var StyledLink = (0, _styledComponents.default)(_reactRouterDom.Link)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ", ";\n    ", " {\n      width: 88px;\n      height: 48px;\n    }\n  }\n"])), function (props) {
   return props.$color;
 }, _styles.BREAKPOINTS.MEDIUM);
-var LogoContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  max-width: calc(100% - 48px);\n  overflow: hidden;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ", " {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    ", "\n  }\n\n  &.inverted:focus-within {\n    ", "\n  }\n"])), _styles.BREAKPOINTS.LARGE, _styles.focusStyles, _styles.invertedFocusStyles);
-var Name = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ", ";\n  letter-spacing: -0.02em;\n  max-width: 168px;\n  ", " {\n    max-width: 200px;\n  }\n  \n  white-space: nowrap;\n  overflow: hidden;\n\n  ", "\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    margin-left: 12px;\n    padding-left: 12px;\n  }\n"])), function (props) {
+var LogoContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  max-width: calc(100% - 48px);\n  overflow: hidden;\n  align-items: center;\n  height: 40px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ", " {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    ", "\n  }\n\n  &.inverted:focus-within {\n    ", "\n  }\n"])), _styles.BREAKPOINTS.LARGE, _styles.focusStyles, _styles.invertedFocusStyles);
+var Name = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ", ";\n  letter-spacing: -0.02em;\n  max-width: 200px;\n  \n  white-space: nowrap;\n  overflow: hidden;\n\n  ", "\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    margin-left: 12px;\n    padding-left: 12px;\n  }\n"])), function (props) {
   return props.$color || _styles.COLORS.black;
-}, _styles.BREAKPOINTS.SMALL, function (props) {
+}, function (props) {
   return props.noSizeChangeOnMobile ? (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black) : (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black);
 }, _styles.BREAKPOINTS.MEDIUM, function (props) {
   return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black);