@laerdal/life-react-components 1.4.1-dev.2 → 1.4.1-dev.4.full

package/dist/umd/Footer/SiteFooter.js

@@ -0,0 +1,177 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "styled-components", "./Components/FooterBottomLinks", "./Components/FooterTop", "./Components/FooterNewsletterAndSocialSection", "./Components/FooterNavSection", "../styles"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("./Components/FooterBottomLinks"), require("./Components/FooterTop"), require("./Components/FooterNewsletterAndSocialSection"), require("./Components/FooterNavSection"), require("../styles"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.FooterBottomLinks, global.FooterTop, global.FooterNewsletterAndSocialSection, global.FooterNavSection, global.styles);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _styledComponents, _FooterBottomLinks, _FooterTop, _FooterNewsletterAndSocialSection, _FooterNavSection, _styles) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var React = _interopRequireWildcard(_react);
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  var _FooterBottomLinks2 = _interopRequireDefault(_FooterBottomLinks);
+
+  var _FooterTop2 = _interopRequireDefault(_FooterTop);
+
+  var _FooterNewsletterAndSocialSection2 = _interopRequireDefault(_FooterNewsletterAndSocialSection);
+
+  var _FooterNavSection2 = _interopRequireDefault(_FooterNavSection);
+
+  function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function (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 _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  /**
+   * Import React libraries.
+   */
+
+  /**
+   * Import third-party libraries.
+   */
+
+  /**
+   * Import custom components.
+   */
+
+  /**
+   * Import custom styles.
+   */
+  const FooterContainer = _styledComponents2.default.footer`
+  margin-top: auto;
+  background-color: ${_styles.COLORS.neutral_800};
+  border-top: 8px solid ${_styles.COLORS.neutral_200};
+
+  padding: 16px 16px;
+  
+  ${_styles.BREAKPOINTS.MEDIUM}{
+    padding: 24px 32px;
+  }
+  ${_styles.BREAKPOINTS.LARGE}{
+    padding: 24px 56px;
+  }
+  ${_styles.BREAKPOINTS.XLARGE}{
+    padding: 32px 56px;
+  }
+`;
+  const FooterLine = _styledComponents2.default.div`
+  border-top: 1px solid ${_styles.COLORS.white};
+  display: none;
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    display: block;
+  }
+`;
+
+  const SiteFooter = ({
+    id,
+    sitename,
+    bottomLinks,
+    showBetaTag,
+    copyrightText,
+    toTopText,
+    placeholderEmailField,
+    includeNewsletterAndSocialSection,
+    newsletterLabel,
+    navOptions,
+    onNewsletterSignup
+  }) => {
+    return /*#__PURE__*/React.createElement(FooterContainer, {
+      id: id
+    }, /*#__PURE__*/React.createElement(_FooterTop2.default, {
+      sitename: sitename,
+      showBetaTag: showBetaTag,
+      toTopText: toTopText
+    }), navOptions && /*#__PURE__*/React.createElement(_FooterNavSection2.default, {
+      mainId: id,
+      navOptions: navOptions
+    }), /*#__PURE__*/React.createElement(FooterLine, null), includeNewsletterAndSocialSection && /*#__PURE__*/React.createElement(_FooterNewsletterAndSocialSection2.default, {
+      placeholderEmail: placeholderEmailField,
+      actionOnNewsletterSignup: onNewsletterSignup,
+      newsletterLabel: newsletterLabel || ''
+    }), /*#__PURE__*/React.createElement(_FooterBottomLinks2.default, {
+      bottomLinks: bottomLinks,
+      copyrightText: copyrightText
+    }));
+  };
+
+  SiteFooter.propTypes = {
+    id: _propTypes2.default.string.isRequired,
+    sitename: _propTypes2.default.string,
+    showBetaTag: _propTypes2.default.bool,
+    bottomLinks: _propTypes2.default.array,
+    copyrightText: _propTypes2.default.string,
+    includeNewsletterAndSocialSection: _propTypes2.default.bool,
+    actionOnNewsletterSignup: _propTypes2.default.func,
+    newsletterLabel: _propTypes2.default.string,
+    toTopText: _propTypes2.default.string.isRequired,
+    placeholderEmailField: _propTypes2.default.string,
+    onNewsletterSignup: _propTypes2.default.func
+  };
+  exports.default = SiteFooter;
+});
+//# sourceMappingURL=SiteFooter.js.map

package/dist/umd/Footer/SiteFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Footer/SiteFooter.tsx"],"names":["FooterContainer","styled","footer","COLORS","neutral_800","neutral_200","BREAKPOINTS","MEDIUM","LARGE","XLARGE","FooterLine","div","white","id","sitename","showBetaTag","bottomLinks","copyrightText","includeNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","toTopText","placeholderEmailField","onNewsletterSignup","SiteFooter","navOptions"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAGA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAOA;AACA;AACA;AAGA,QAAMA,eAAe,GAAGC,2BAAOC,MAAO;AACtC;AACA,sBAAsBC,eAAOC,WAAY;AACzC,0BAA0BD,eAAOE,WAAY;AAC7C;AACA;AACA;AACA,IAAIC,oBAAYC,MAAO;AACvB;AACA;AACA,IAAID,oBAAYE,KAAM;AACtB;AACA;AACA,IAAIF,oBAAYG,MAAO;AACvB;AACA;AAfA,CAAA;AAiBA,QAAMC,UAAU,GAAGT,2BAAOU,GAAI;AAC9B,0BAA0BR,eAAOS,KAAM;AACvC;AACA,IAAIN,oBAAYC,MAAO;AACvB;AACA;AALA,CAAA;;AAuBA,QAAMiB,UAAU,GAAG,CAAC;AAAA,IAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IAAA,WAAA;AAAA,IAAA,WAAA;AAAA,IAAA,aAAA;AAAA,IAAA,SAAA;AAAA,IAAA,qBAAA;AAAA,IAAA,iCAAA;AAAA,IAAA,eAAA;AAAA,IAAA,UAAA;AAWlBD,IAAAA;AAXkB,GAAD,KAYG;AACpB,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAiB,MAAA,EAAE,EAAEV;AAArB,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA;AAAW,MAAA,QAAQ,EAAnB,QAAA;AAA+B,MAAA,WAAW,EAA1C,WAAA;AAAyD,MAAA,SAAS,EAAEQ;AAApE,KAAA,CADF,EAEGI,UAAU,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAkB,MAAA,MAAM,EAAxB,EAAA;AAA8B,MAAA,UAAU,EAAEA;AAA1C,KAAA,CAFjB,EAAA,aAGE,KAAA,CAAA,aAAA,CAAA,UAAA,EAHF,IAGE,CAHF,EAIGP,iCAAiC,IAAA,aAChC,KAAA,CAAA,aAAA,CAAA,0CAAA,EAAA;AAAkC,MAAA,gBAAgB,EAAlD,qBAAA;AAA2E,MAAA,wBAAwB,EAAnG,kBAAA;AAAyH,MAAA,eAAe,EAAEE,eAAe,IAAI;AAA7J,KAAA,CALJ,EAAA,aAOE,KAAA,CAAA,aAAA,CAAA,2BAAA,EAAA;AAAmB,MAAA,WAAW,EAA9B,WAAA;AAA6C,MAAA,aAAa,EAAEH;AAA5D,KAAA,CAPF,CADF;AAbF,GAAA;;;AAdEJ,IAAAA,E;AACAC,IAAAA,Q;AACAC,IAAAA,W;AACAC,IAAAA,W;AACAC,IAAAA,a;AACAC,IAAAA,iC;AACAC,IAAAA,wB;AACAC,IAAAA,e;AACAC,IAAAA,S;AAEAC,IAAAA,qB;AACAC,IAAAA,kB;;oBA6BF,U","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 {\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}: NewFooterProps) => {\n  return (\n    <FooterContainer id={id}>\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"],"file":"SiteFooter.js"}

package/dist/umd/Footer/index.js

@@ -0,0 +1,38 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "./Footer", "./SiteFooter"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("./Footer"), require("./SiteFooter"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.Footer, global.SiteFooter);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _Footer, _SiteFooter) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  Object.defineProperty(exports, "Footer", {
+    enumerable: true,
+    get: function () {
+      return _interopRequireDefault(_Footer).default;
+    }
+  });
+  Object.defineProperty(exports, "SiteFooter", {
+    enumerable: true,
+    get: function () {
+      return _interopRequireDefault(_SiteFooter).default;
+    }
+  });
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+});
+//# sourceMappingURL=index.js.map

package/dist/umd/Footer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Footer/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;6CAAA,O;;;;;;iDACA,O","sourcesContent":["export { default as Footer } from './Footer';\nexport { default as SiteFooter } from './SiteFooter';\n"],"file":"index.js"}

package/dist/umd/GlobalNavigationBar/Actions.js

@@ -0,0 +1,224 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "styled-components", "../styles", "../icons/systemicons/SystemIcons", "./Avatar", "../Button", "../styles/typography"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../icons/systemicons/SystemIcons"), require("./Avatar"), require("../Button"), require("../styles/typography"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.SystemIcons, global.Avatar, global.Button, global.typography);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _SystemIcons, _Avatar, _Button, _typography) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var React = _interopRequireWildcard(_react);
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  var _Avatar2 = _interopRequireDefault(_Avatar);
+
+  function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function (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 _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const MenuWrapper = _styledComponents2.default.div`
+  background-color: ${_styles.COLORS.white};
+  display: flex;
+  height: 48px;
+
+  ${_styles.BREAKPOINTS.SMALL} {
+    height: ${props => props.isInMobileMenu ? '48px' : '56px'};
+  }
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    height: ${props => props.isInMobileMenu ? '48px' : '64px'};
+  }
+`;
+  const HeaderItem = _styledComponents2.default.div`
+  ${(0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black)}
+
+  padding: 0;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  position: relative;
+
+  button {
+    margin: 0;
+  }
+
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: -1px;
+    left: 20px;
+    right: 20px;
+    height: 3px;
+    background-color: transparent;
+  }
+`;
+
+  const Actions = ({
+    actions,
+    firstName,
+    lastName,
+    hideOnLowWidth,
+    isInMobileMenu,
+    setShowUserMenu,
+    useUserMenu
+  }) => {
+    const userRef = React.useRef(null);
+
+    const fireAction = (action, ref = undefined) => {
+      ref?.current?.blur();
+      !!action && action();
+    };
+
+    const isPressingEnter = e => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        e.stopPropagation();
+        return true;
+      }
+
+      return false;
+    };
+
+    return /*#__PURE__*/React.createElement(MenuWrapper, {
+      isInMobileMenu: isInMobileMenu
+    }, /*#__PURE__*/React.createElement(HeaderItem, {
+      hideOnLowWidth: hideOnLowWidth || false,
+      inMobileMenu: isInMobileMenu
+    }, actions?.search && /*#__PURE__*/React.createElement(_Button.IconButton, {
+      variant: 'secondary',
+      shape: 'circular',
+      hideOnLowWidth: hideOnLowWidth || false,
+      isInMobileMenu: isInMobileMenu,
+      action: () => fireAction(actions?.search),
+      onKeyPress: e => isPressingEnter(e) ? fireAction(actions?.search) : null
+    }, /*#__PURE__*/React.createElement(_SystemIcons.Search, {
+      size: "24px"
+    })), actions?.notification && !isInMobileMenu && /*#__PURE__*/React.createElement(_Button.IconButton, {
+      variant: 'secondary',
+      shape: 'circular',
+      hideOnLowWidth: hideOnLowWidth || false,
+      isInMobileMenu: isInMobileMenu,
+      action: () => fireAction(actions?.notification),
+      onKeyPress: e => isPressingEnter(e) ? fireAction(actions?.notification) : null
+    }, /*#__PURE__*/React.createElement(_SystemIcons.Notification, {
+      size: "24px"
+    })), actions?.language && /*#__PURE__*/React.createElement(_Button.IconButton, {
+      variant: 'secondary',
+      shape: 'circular',
+      hideOnLowWidth: hideOnLowWidth || false,
+      isInMobileMenu: isInMobileMenu,
+      action: () => fireAction(actions?.language),
+      onKeyPress: e => isPressingEnter(e) ? fireAction(actions?.language) : null
+    }, /*#__PURE__*/React.createElement(_SystemIcons.Language, {
+      size: "24px"
+    })), actions?.settings && /*#__PURE__*/React.createElement(_Button.IconButton, {
+      variant: 'secondary',
+      shape: 'circular',
+      hideOnLowWidth: hideOnLowWidth || false,
+      isInMobileMenu: isInMobileMenu,
+      action: () => fireAction(actions?.settings),
+      onKeyPress: e => isPressingEnter(e) ? fireAction(actions?.settings) : null
+    }, /*#__PURE__*/React.createElement(_SystemIcons.GearSettings, {
+      size: "24px"
+    })), firstName && lastName && !isInMobileMenu && /*#__PURE__*/React.createElement(_Avatar.AvatarContainer, {
+      id: "avatarContainer",
+      "data-testid": "testAvatarContainer",
+      ref: userRef,
+      onClick: useUserMenu ? () => setShowUserMenu(true) : () => fireAction(actions?.user, userRef),
+      onKeyDown: e => isPressingEnter(e) ? useUserMenu ? setShowUserMenu(true) : fireAction(actions?.user, userRef) : null,
+      inMobileMenu: isInMobileMenu,
+      hideOnLowWidth: hideOnLowWidth
+    }, /*#__PURE__*/React.createElement(_Avatar2.default, {
+      size: 36,
+      firstName: firstName,
+      lastName: lastName,
+      color: _styles.COLORS.primary_500,
+      profileMenuLink: "#TODO"
+    })), actions?.apps && !isInMobileMenu && window.innerWidth > 731 && /*#__PURE__*/React.createElement(_Button.IconButton, {
+      variant: 'secondary',
+      shape: 'circular',
+      hideOnLowWidth: hideOnLowWidth || false,
+      isInMobileMenu: isInMobileMenu,
+      id: "globalNavAppsButton",
+      action: () => fireAction(actions?.apps),
+      onKeyPress: e => isPressingEnter(e) ? fireAction(actions?.apps) : null
+    }, /*#__PURE__*/React.createElement(_SystemIcons.SwitchApp, {
+      size: "24px"
+    }))));
+  };
+
+  Actions.propTypes = {
+    firstName: _propTypes2.default.string,
+    lastName: _propTypes2.default.string,
+    hideOnLowWidth: _propTypes2.default.bool,
+    isInMobileMenu: _propTypes2.default.bool,
+    setShowUserMenu: _propTypes2.default.func.isRequired
+  };
+  exports.default = Actions;
+});
+//# sourceMappingURL=Actions.js.map

package/dist/umd/GlobalNavigationBar/Actions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/Actions.tsx"],"names":["MenuWrapper","styled","div","COLORS","white","BREAKPOINTS","SMALL","props","MEDIUM","HeaderItem","ComponentMStyling","ComponentTextStyle","firstName","lastName","hideOnLowWidth","isInMobileMenu","setShowUserMenu","Actions","useUserMenu","userRef","React","fireAction","ref","action","isPressingEnter","e","actions","window"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,QAAMA,WAAW,GAAGC,2BAAOC,GAAkC;AAC7D,sBAAsBC,eAAOC,KAAM;AACnC;AACA;AACA;AACA,IAAIC,oBAAYC,KAAM;AACtB,cAAeC,KAAD,IAAYA,KAAK,CAALA,cAAAA,GAAAA,MAAAA,GAAgC,MAAQ;AAClE;AACA,IAAIF,oBAAYG,MAAO;AACvB,cAAeD,KAAD,IAAYA,KAAK,CAALA,cAAAA,GAAAA,MAAAA,GAAgC,MAAQ;AAClE;AAVA,CAAA;AAiBA,QAAME,UAAU,GAAGR,2BAAOC,GAAqB;AAC/C,IAAIQ,mCAAkBC,+BAAD,OAAjBD,EAA8CP,eAA7B,KAAjBO,CAA4D;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAtBA,CAAA;;AAmCA,QAAMO,OAAO,GAAG,CAAC;AAAA,IAAA,OAAA;AAAA,IAAA,SAAA;AAAA,IAAA,QAAA;AAAA,IAAA,cAAA;AAAA,IAAA,cAAA;AAAA,IAAA,eAAA;AAAiFC,IAAAA;AAAjF,GAAD,KAAsI;AACpJ,UAAMC,OAAO,GAAGC,KAAK,CAALA,MAAAA,CAAhB,IAAgBA,CAAhB;;AAEA,UAAMC,UAAU,GAAG,CAAA,MAAA,EAAmCC,GAAiE,GAApG,SAAA,KAAqH;AACpIA,MAAAA,GAAG,EAAHA,OAAAA,EAAAA,IAAAA;AACA,OAAC,CAAD,MAAA,IAAYC,MAAZ,EAAA;AAFJ,KAAA;;AAKA,UAAMC,eAAe,GAAIC,CAAD,IAAY;AAClC,UAAIA,CAAC,CAADA,GAAAA,KAAJ,OAAA,EAAuB;AACrBA,QAAAA,CAAC,CAADA,cAAAA;AACAA,QAAAA,CAAC,CAADA,eAAAA;AACA,eAAA,IAAA;AACD;;AACD,aAAA,KAAA;AANF,KAAA;;AASA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAa,MAAA,cAAc,EAAEV;AAA7B,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAY,MAAA,cAAc,EAAED,cAAc,IAA1C,KAAA;AAAqD,MAAA,YAAY,EAAEC;AAAnE,KAAA,EACGW,OAAO,EAAPA,MAAAA,IAAAA,aACC,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AACE,MAAA,OAAO,EADT,WAAA;AAEE,MAAA,KAAK,EAFP,UAAA;AAGE,MAAA,cAAc,EAAEZ,cAAc,IAHhC,KAAA;AAIE,MAAA,cAAc,EAJhB,cAAA;AAKE,MAAA,MAAM,EAAE,MAAMO,UAAU,CAACK,OAAO,EALlC,MAK0B,CAL1B;AAME,MAAA,UAAU,EAAGD,CAAD,IAAaD,eAAe,CAAfA,CAAe,CAAfA,GAAqBH,UAAU,CAACK,OAAO,EAAvCF,MAA+B,CAA/BA,GAAmD;AAN9E,KAAA,EAAA,aAOI,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA;AAAQ,MAAA,IAAI,EAAC;AAAb,KAAA,CAPJ,CAFJ,EAYGE,OAAO,EAAPA,YAAAA,IAAyB,CAAzBA,cAAAA,IAAAA,aACC,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AACE,MAAA,OAAO,EADT,WAAA;AAEE,MAAA,KAAK,EAFP,UAAA;AAGE,MAAA,cAAc,EAAEZ,cAAc,IAHhC,KAAA;AAIE,MAAA,cAAc,EAJhB,cAAA;AAKE,MAAA,MAAM,EAAE,MAAMO,UAAU,CAACK,OAAO,EALlC,YAK0B,CAL1B;AAME,MAAA,UAAU,EAAGD,CAAD,IAAaD,eAAe,CAAfA,CAAe,CAAfA,GAAqBH,UAAU,CAACK,OAAO,EAAvCF,YAA+B,CAA/BA,GAAyD;AANpF,KAAA,EAAA,aAOI,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AAAc,MAAA,IAAI,EAAC;AAAnB,KAAA,CAPJ,CAbJ,EAuBGE,OAAO,EAAPA,QAAAA,IAAAA,aACC,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AACE,MAAA,OAAO,EADT,WAAA;AAEE,MAAA,KAAK,EAFP,UAAA;AAGE,MAAA,cAAc,EAAEZ,cAAc,IAHhC,KAAA;AAIE,MAAA,cAAc,EAJhB,cAAA;AAKE,MAAA,MAAM,EAAE,MAAMO,UAAU,CAACK,OAAO,EALlC,QAK0B,CAL1B;AAME,MAAA,UAAU,EAAGD,CAAD,IAAaD,eAAe,CAAfA,CAAe,CAAfA,GAAqBH,UAAU,CAACK,OAAO,EAAvCF,QAA+B,CAA/BA,GAAqD;AANhF,KAAA,EAAA,aAOI,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA;AAAU,MAAA,IAAI,EAAC;AAAf,KAAA,CAPJ,CAxBJ,EAkCGE,OAAO,EAAPA,QAAAA,IAAAA,aACC,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AACE,MAAA,OAAO,EADT,WAAA;AAEE,MAAA,KAAK,EAFP,UAAA;AAGE,MAAA,cAAc,EAAEZ,cAAc,IAHhC,KAAA;AAIE,MAAA,cAAc,EAJhB,cAAA;AAKE,MAAA,MAAM,EAAE,MAAMO,UAAU,CAACK,OAAO,EALlC,QAK0B,CAL1B;AAME,MAAA,UAAU,EAAGD,CAAD,IAAaD,eAAe,CAAfA,CAAe,CAAfA,GAAqBH,UAAU,CAACK,OAAO,EAAvCF,QAA+B,CAA/BA,GAAqD;AANhF,KAAA,EAAA,aAOI,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AAAc,MAAA,IAAI,EAAC;AAAnB,KAAA,CAPJ,CAnCJ,EA6CGZ,SAAS,IAATA,QAAAA,IAAyB,CAAzBA,cAAAA,IAAAA,aACC,KAAA,CAAA,aAAA,CAAA,uBAAA,EAAA;AACE,MAAA,EAAE,EADJ,iBAAA;AAEE,qBAFF,qBAAA;AAGE,MAAA,GAAG,EAHL,OAAA;AAIE,MAAA,OAAO,EAAEM,WAAW,GAAG,MAAMF,eAAe,CAAxB,IAAwB,CAAxB,GAAiC,MAAMK,UAAU,CAACK,OAAO,EAAR,IAAA,EAJvE,OAIuE,CAJvE;AAKE,MAAA,SAAS,EAAGD,CAAD,IAAaD,eAAe,CAAfA,CAAe,CAAfA,GAAsBN,WAAW,GAAGF,eAAe,CAAlB,IAAkB,CAAlB,GAA2BK,UAAU,CAACK,OAAO,EAAR,IAAA,EAAtEF,OAAsE,CAAtEA,GAL1B,IAAA;AAME,MAAA,YAAY,EANd,cAAA;AAOE,MAAA,cAAc,EAAEV;AAPlB,KAAA,EAAA,aAQE,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA;AAAQ,MAAA,IAAI,EAAZ,EAAA;AAAkB,MAAA,SAAS,EAA3B,SAAA;AAAwC,MAAA,QAAQ,EAAhD,QAAA;AAA4D,MAAA,KAAK,EAAEX,eAAnE,WAAA;AAAuF,MAAA,eAAe,EAAC;AAAvG,KAAA,CARF,CA9CJ,EAyDGuB,OAAO,EAAPA,IAAAA,IAAiB,CAAjBA,cAAAA,IAAoCC,MAAM,CAANA,UAAAA,GAApCD,GAAAA,IAAAA,aACC,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AACE,MAAA,OAAO,EADT,WAAA;AAEE,MAAA,KAAK,EAFP,UAAA;AAGE,MAAA,cAAc,EAAEZ,cAAc,IAHhC,KAAA;AAIE,MAAA,cAAc,EAJhB,cAAA;AAKE,MAAA,EAAE,EALJ,qBAAA;AAME,MAAA,MAAM,EAAE,MAAMO,UAAU,CAACK,OAAO,EANlC,IAM0B,CAN1B;AAOE,MAAA,UAAU,EAAGD,CAAD,IAAaD,eAAe,CAAfA,CAAe,CAAfA,GAAqBH,UAAU,CAACK,OAAO,EAAvCF,IAA+B,CAA/BA,GAAiD;AAP5E,KAAA,EAAA,aAQI,KAAA,CAAA,aAAA,CAAA,sBAAA,EAAA;AAAW,MAAA,IAAI,EAAC;AAAhB,KAAA,CARJ,CA1DJ,CADF,CADF;AAjBF,GAAA;;;AATEZ,IAAAA,S;AACAC,IAAAA,Q;AAEAC,IAAAA,c;AACAC,IAAAA,c;AACAC,IAAAA,e;;oBAiGF,O","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { COLORS, BREAKPOINTS } from '../styles';\nimport { Search, GearSettings, Notification, Language, SwitchApp } from '../icons/systemicons/SystemIcons';\nimport Avatar, { AvatarContainer } from './Avatar';\nimport { ActionOptions } from '../types';\nimport {IconButton} from '../Button';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\n\nconst MenuWrapper = styled.div<{ isInMobileMenu?: boolean }>`\n  background-color: ${COLORS.white};\n  display: flex;\n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: ${(props) => (props.isInMobileMenu ? '48px' : '56px')};\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    height: ${(props) => (props.isInMobileMenu ? '48px' : '64px')};\n  }\n`;\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n}\n\nconst HeaderItem = styled.div<HeaderItemProps>`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  padding: 0;\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  button {\n    margin: 0;\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    bottom: -1px;\n    left: 20px;\n    right: 20px;\n    height: 3px;\n    background-color: transparent;\n  }\n`;\n\ntype Props = {\n  firstName?: string;\n  lastName?: string;\n  actions?: ActionOptions;\n  hideOnLowWidth?: boolean;\n  isInMobileMenu?: boolean;\n  setShowUserMenu: (open: boolean) => void;\n  useUserMenu: boolean | undefined;\n};\n\nconst Actions = ({ actions, firstName, lastName, hideOnLowWidth, isInMobileMenu, setShowUserMenu, useUserMenu }: Props): React.ReactElement<Props> => {\n  const userRef = React.useRef(null);\n\n  const fireAction = (action: (() => void) | undefined, ref: React.MutableRefObject<HTMLButtonElement | null> | undefined = undefined) => {\n      ref?.current?.blur();\n      !!action && action();\n  }\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <MenuWrapper isInMobileMenu={isInMobileMenu}>\n      <HeaderItem hideOnLowWidth={hideOnLowWidth || false} inMobileMenu={isInMobileMenu}>\n        {actions?.search && (\n          <IconButton\n            variant={'secondary'}\n            shape={'circular'}\n            hideOnLowWidth={hideOnLowWidth || false}\n            isInMobileMenu={isInMobileMenu}\n            action={() => fireAction(actions?.search)}\n            onKeyPress={(e: any) => (isPressingEnter(e) ? fireAction(actions?.search) : null)}>\n              <Search size=\"24px\" />\n          </IconButton>\n        )}\n        {actions?.notification && !isInMobileMenu && (\n          <IconButton\n            variant={'secondary'}\n            shape={'circular'}\n            hideOnLowWidth={hideOnLowWidth || false}\n            isInMobileMenu={isInMobileMenu}\n            action={() => fireAction(actions?.notification)}\n            onKeyPress={(e: any) => (isPressingEnter(e) ? fireAction(actions?.notification) : null)}>\n              <Notification size=\"24px\" />\n          </IconButton>\n        )}\n        {actions?.language && (\n          <IconButton\n            variant={'secondary'}\n            shape={'circular'}\n            hideOnLowWidth={hideOnLowWidth || false}\n            isInMobileMenu={isInMobileMenu}\n            action={() => fireAction(actions?.language)}\n            onKeyPress={(e: any) => (isPressingEnter(e) ? fireAction(actions?.language) : null)}>\n              <Language size=\"24px\" />\n          </IconButton>\n        )}\n        {actions?.settings && (\n          <IconButton\n            variant={'secondary'}\n            shape={'circular'}\n            hideOnLowWidth={hideOnLowWidth || false}\n            isInMobileMenu={isInMobileMenu}\n            action={() => fireAction(actions?.settings)}\n            onKeyPress={(e: any) => (isPressingEnter(e) ? fireAction(actions?.settings) : null)}>\n              <GearSettings size=\"24px\" />\n          </IconButton>\n        )}\n        {firstName && lastName && !isInMobileMenu && (\n          <AvatarContainer\n            id=\"avatarContainer\"\n            data-testid=\"testAvatarContainer\"\n            ref={userRef}\n            onClick={useUserMenu ? () => setShowUserMenu(true) : () => fireAction(actions?.user, userRef)}\n            onKeyDown={(e: any) => (isPressingEnter(e) ? (useUserMenu ? setShowUserMenu(true) : fireAction(actions?.user, userRef)) : null)}\n            inMobileMenu={isInMobileMenu}\n            hideOnLowWidth={hideOnLowWidth}>\n            <Avatar size={36} firstName={firstName} lastName={lastName} color={COLORS.primary_500} profileMenuLink=\"#TODO\" />\n          </AvatarContainer>\n        )}\n        {actions?.apps && !isInMobileMenu && window.innerWidth > 731 && (\n          <IconButton\n            variant={'secondary'}\n            shape={'circular'}\n            hideOnLowWidth={hideOnLowWidth || false}\n            isInMobileMenu={isInMobileMenu}\n            id=\"globalNavAppsButton\"\n            action={() => fireAction(actions?.apps)}\n            onKeyPress={(e: any) => (isPressingEnter(e) ? fireAction(actions?.apps) : null)}>\n              <SwitchApp size=\"24px\" />\n          </IconButton>\n        )}\n      </HeaderItem>\n    </MenuWrapper>\n  );\n};\n\nexport default Actions;\n"],"file":"Actions.js"}

package/dist/umd/GlobalNavigationBar/Avatar.js

@@ -0,0 +1,177 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "styled-components", "../styles"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.AvatarContainer = undefined;
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var React = _interopRequireWildcard(_react);
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function (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 _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const LinkStyling = _styledComponents.css`
+  &:focus {
+    background: ${_styles.COLORS.primary_500};
+    outline: none;
+  }
+  &:focus-within {
+    box-shadow: 0px 0px 8px ${_styles.COLORS.primary}, 0px 4px 12px rgba(46, 127, 161, 0.25);
+  }
+`;
+  const ImageStyling = _styledComponents.css`
+  &:hover {
+    background-color: ${_styles.COLORS.primary_700};
+  }
+
+  &:active {
+    background: ${_styles.COLORS.primary_800};
+  }
+`;
+  const AvatarLink = _styledComponents2.default.div`
+  text-decoration: none;
+
+  ${props => props.useInteractionStyling ? LinkStyling : ''};
+  &:focus {
+    outline: none;
+  }
+  &:focus-within {
+    border-radius: ${props => props.useInteractionStyling ? `${props.size ? props.size : 48}px` : ''};
+  }
+`;
+  const AvatarImage = _styledComponents2.default.div`
+  background-color: ${props => props.$color};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: ${props => props.size ? props.size : 48}px;
+  height: ${props => props.size ? props.size : 48}px;
+  width: ${props => props.size ? props.size : 48}px;
+  cursor: pointer;
+
+  ${props => props.useInteractionStyling ? ImageStyling : ''};
+`;
+  const AvatarLetter = _styledComponents2.default.div`
+  font-size: ${props => props.size / 2 - 2}px;
+  color: white;
+  font-weight: bold;
+  text-transform: uppercase;
+  display: inline-block;
+  line-height: ${props => props.size ? props.size : 48}px;
+`;
+  const AvatarContainer = exports.AvatarContainer = _styledComponents2.default.div`
+  flex-direction: column;
+  align-self: center;
+  margin-right: ${props => props.inMobileMenu ? '6px' : '8px'};
+  margin-left: ${props => props.inMobileMenu ? '0' : 'auto'};
+  display: ${props => props.hideOnLowWidth ? 'none' : 'flex'};
+
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    display: flex;
+    ${props => !props.hidePadding ? 'padding: 6px;' : ''};
+  }
+`;
+
+  const Avatar = ({
+    firstName,
+    lastName,
+    size,
+    color,
+    useInteractionStyling = true
+  }) => {
+    return /*#__PURE__*/React.createElement(AvatarLink, {
+      size: size,
+      tabIndex: 0,
+      useInteractionStyling: useInteractionStyling,
+      onMouseDown: e => e.preventDefault()
+    }, /*#__PURE__*/React.createElement(AvatarImage, {
+      size: size,
+      $color: color,
+      useInteractionStyling: useInteractionStyling
+    }, /*#__PURE__*/React.createElement(AvatarLetter, {
+      "data-hj-suppress": true,
+      size: size
+    }, firstName[0], lastName[0])));
+  };
+
+  Avatar.propTypes = {
+    firstName: _propTypes2.default.string.isRequired,
+    lastName: _propTypes2.default.string.isRequired,
+    size: _propTypes2.default.number.isRequired,
+    color: _propTypes2.default.string.isRequired,
+    profileMenuLink: _propTypes2.default.string.isRequired,
+    useInteractionStyling: _propTypes2.default.bool
+  };
+  exports.default = Avatar;
+});
+//# sourceMappingURL=Avatar.js.map

package/dist/umd/GlobalNavigationBar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/GlobalNavigationBar/Avatar.tsx"],"names":["LinkStyling","css","COLORS","primary_500","primary","ImageStyling","primary_700","primary_800","AvatarLink","styled","div","props","AvatarImage","$color","AvatarLetter","AvatarContainer","BREAKPOINTS","MEDIUM","firstName","lastName","size","color","profileMenuLink","useInteractionStyling","Avatar","e"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { COLORS, BREAKPOINTS } from '../styles';\n\nconst LinkStyling = css`\n  &:focus {\n    background: ${COLORS.primary_500};\n    outline: none;\n  }\n  &:focus-within {\n    box-shadow: 0px 0px 8px ${COLORS.primary}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n  }\n`;\n\nconst ImageStyling = css`\n  &:hover {\n    background-color: ${COLORS.primary_700};\n  }\n\n  &:active {\n    background: ${COLORS.primary_800};\n  }\n`;\n\nconst AvatarLink = styled.div<{ size: number; useInteractionStyling: boolean }>`\n  text-decoration: none;\n\n  ${(props) => (props.useInteractionStyling ? LinkStyling : '')};\n  &:focus {\n    outline: none;\n  }\n  &:focus-within {\n    border-radius: ${(props) => (props.useInteractionStyling ? `${props.size ? props.size : 48}px` : '')};\n  }\n`;\n\nconst AvatarImage = styled.div<{ size: number; $color: string; useInteractionStyling: boolean }>`\n  background-color: ${(props) => props.$color};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ${(props) => (props.size ? props.size : 48)}px;\n  height: ${(props) => (props.size ? props.size : 48)}px;\n  width: ${(props) => (props.size ? props.size : 48)}px;\n  cursor: pointer;\n\n  ${(props) => (props.useInteractionStyling ? ImageStyling : '')};\n`;\n\nconst AvatarLetter = styled.div<{ size: number }>`\n  font-size: ${(props) => props.size / 2 - 2}px;\n  color: white;\n  font-weight: bold;\n  text-transform: uppercase;\n  display: inline-block;\n  line-height: ${(props) => (props.size ? props.size : 48)}px;\n`;\n\nexport const AvatarContainer = styled.div<{ hideOnLowWidth?: boolean; inMobileMenu?: boolean; hidePadding?: boolean }>`\n  flex-direction: column;\n  align-self: center;\n  margin-right: ${(props) => (props.inMobileMenu ? '6px' : '8px')};\n  margin-left: ${(props) => (props.inMobileMenu ? '0' : 'auto')};\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'flex')};\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n    ${(props) => (!props.hidePadding ? 'padding: 6px;' : '')};\n  }\n`;\n\ninterface AvatarProps {\n  firstName: string;\n  lastName: string;\n  size: number;\n  color: string;\n  profileMenuLink: string;\n  useInteractionStyling?: boolean;\n}\n\nconst Avatar = ({ firstName, lastName, size, color, useInteractionStyling = true }: AvatarProps) => {\n  return (\n    <AvatarLink size={size} tabIndex={0} useInteractionStyling={useInteractionStyling} onMouseDown={(e: any) => e.preventDefault()}>\n      <AvatarImage size={size} $color={color} useInteractionStyling={useInteractionStyling}>\n        <AvatarLetter data-hj-suppress size={size}>\n          {firstName[0]}\n          {lastName[0]}\n        </AvatarLetter>\n      </AvatarImage>\n    </AvatarLink>\n  );\n};\n\nexport default Avatar;\n"],"file":"Avatar.js"}