@laerdal/life-react-components 3.5.1-uss.hackathon → 4.0.0

package/dist/umd/GlobalNavigationBar/Logo.js

@@ -1,186 +0,0 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "react-router-dom", "styled-components", "../assets", "../styles", "../styles/typography"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("react-router-dom"), require("styled-components"), require("../assets"), require("../styles"), require("../styles/typography"));
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports, global.propTypes, global.react, global.reactRouterDom, global.styledComponents, global.assets, global.styles, global.typography);
-    global.undefined = mod.exports;
-  }
-})(this, function (exports, _propTypes, _react, _reactRouterDom, _styledComponents, _assets, _styles, _typography) {
-  "use strict";
-
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-
-  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 StyledLink = (0, _styledComponents2.default)(_reactRouterDom.Link)`
-  text-align: center;
-  text-decoration: none;
-  display: flex;
-  align-items: center;
-  &:focus-within {
-    outline: none;
-  }
-  svg {
-    width: 66px;
-    height: 36px;
-    color: ${props => props.$color};
-    ${_styles.BREAKPOINTS.MEDIUM} {
-      width: 88px;
-      height: 48px;
-    }
-  }
-`;
-  const LogoContainer = _styledComponents2.default.div`
-  display: flex;
-  align-items: center;
-  height: 40px;
-  margin-right: 16px;
-  box-sizing: border-box;
-  padding: 24px 0;
-
-  ${_styles.BREAKPOINTS.MEDIUM} {
-    margin-top: 8px;
-    margin-bottom: 7px;
-  }
-
-  &:focus-within {
-    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);
-    outline: none;
-  }
-`;
-  const Name = _styledComponents2.default.span`
-  margin-left: 8px;
-  padding-left: 8px;
-  border-left: 1px solid ${props => props.$color || _styles.COLORS.black};
-  letter-spacing: -0.02em;
-
-  ${props => props.noSizeChangeOnMobile ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black) : (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black)}
-
-  font-weight: 300 !important;
-  line-height: 24px !important;
-
-  ${_styles.BREAKPOINTS.MEDIUM} {
-    margin-left: 12px;
-    padding-left: 12px;
-    ${props => (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color || _styles.COLORS.black)}
-  }
-`;
-  const BetaTag = _styledComponents2.default.span`
-  background-color: ${props => props.backgroundColor || _styles.COLORS.accent2_500};
-  padding: 4px 8px;
-  margin-left: 8px;
-  margin-top: 2px;
-  border-left: none;
-  border-radius: 2px;
-
-  ${props => (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.UppercaseBold, props.$color || _styles.COLORS.white)}
-`;
-
-  const Logo = ({
-    name,
-    showBetaTag,
-    onClick,
-    to,
-    color,
-    noSizeChangeOnMobile,
-    betaTagBackgroundColor,
-    betaTagColor
-  }) => {
-    return /*#__PURE__*/React.createElement(LogoContainer, null, /*#__PURE__*/React.createElement(StyledLink, {
-      to: to || '/',
-      onMouseDown: e => e.preventDefault(),
-      onClick: () => {
-        if (onClick) {
-          onClick();
-        }
-      },
-      $color: color
-    }, color === _styles.COLORS.white ? /*#__PURE__*/React.createElement(_assets.LaerdalWhiteLogo, null) : /*#__PURE__*/React.createElement(_assets.LaerdalLogo, null), /*#__PURE__*/React.createElement(Name, {
-      $color: color,
-      noSizeChangeOnMobile: noSizeChangeOnMobile || false
-    }, name), showBetaTag && /*#__PURE__*/React.createElement(BetaTag, {
-      backgroundColor: betaTagBackgroundColor,
-      $color: betaTagColor
-    }, "BETA")));
-  };
-
-  Logo.propTypes = {
-    name: _propTypes2.default.string.isRequired,
-    showBetaTag: _propTypes2.default.bool,
-    onClick: _propTypes2.default.func,
-    to: _propTypes2.default.string,
-    color: _propTypes2.default.string,
-    noSizeChangeOnMobile: _propTypes2.default.bool,
-    betaTagBackgroundColor: _propTypes2.default.string,
-    betaTagColor: _propTypes2.default.string
-  };
-  exports.default = Logo;
-});
-//# sourceMappingURL=Logo.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","styled","props","$color","BREAKPOINTS","MEDIUM","LogoContainer","div","Name","span","COLORS","black","ComponentMStyling","ComponentTextStyle","ComponentXSStyling","BetaTag","accent2_500","name","showBetaTag","onClick","to","color","noSizeChangeOnMobile","betaTagBackgroundColor","betaTagColor","Logo","e"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport styled from 'styled-components';\r\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\r\nimport { ComponentMStyling, ComponentXSStyling } from '../styles/typography';\r\n\r\nconst StyledLink = styled(Link)<{ $color?: string }>`\r\n  text-align: center;\r\n  text-decoration: none;\r\n  display: flex;\r\n  align-items: center;\r\n  &:focus-within {\r\n    outline: none;\r\n  }\r\n  svg {\r\n    width: 66px;\r\n    height: 36px;\r\n    color: ${(props) => props.$color};\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      width: 88px;\r\n      height: 48px;\r\n    }\r\n  }\r\n`;\r\n\r\nconst LogoContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  height: 40px;\r\n  margin-right: 16px;\r\n  box-sizing: border-box;\r\n  padding: 24px 0;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin-top: 8px;\r\n    margin-bottom: 7px;\r\n  }\r\n\r\n  &:focus-within {\r\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\r\n    outline: none;\r\n  }\r\n`;\r\n\r\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\r\n  margin-left: 8px;\r\n  padding-left: 8px;\r\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\r\n  letter-spacing: -0.02em;\r\n\r\n  ${(props) =>\r\n    props.noSizeChangeOnMobile\r\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\r\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\r\n\r\n  font-weight: 300 !important;\r\n  line-height: 24px !important;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin-left: 12px;\r\n    padding-left: 12px;\r\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\r\n  }\r\n`;\r\n\r\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\r\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\r\n  padding: 4px 8px;\r\n  margin-left: 8px;\r\n  margin-top: 2px;\r\n  border-left: none;\r\n  border-radius: 2px;\r\n\r\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\r\n`;\r\n\r\ntype LogoProps = {\r\n  name: string;\r\n  showBetaTag?: boolean;\r\n  onClick?: () => void;\r\n  to?: string;\r\n  color?: string;\r\n  noSizeChangeOnMobile?: boolean;\r\n  betaTagBackgroundColor?: string;\r\n  betaTagColor?: string;\r\n};\r\n\r\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\r\n  return (\r\n    <LogoContainer>\r\n      <StyledLink\r\n        to={to || '/'}\r\n        onMouseDown={(e: any) => e.preventDefault()}\r\n        onClick={() => {\r\n          if (onClick) {\r\n            onClick();\r\n          }\r\n        }}\r\n        $color={color}>\r\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\r\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\r\n          {name}\r\n        </Name>\r\n        {showBetaTag && (\r\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\r\n            BETA\r\n          </BetaTag>\r\n        )}\r\n      </StyledLink>\r\n    </LogoContainer>\r\n  );\r\n};\r\n\r\nexport default Logo;\r\n"],"file":"Logo.js"}

package/dist/umd/GlobalNavigationBar/MainMenu.js

@@ -1,218 +0,0 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "react-router-dom", "styled-components", "../NavItem", "../icons/systemicons/SystemIcons", "../styles", "./ExtendedMainMenu", "../Button"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("react-router-dom"), require("styled-components"), require("../NavItem"), require("../icons/systemicons/SystemIcons"), require("../styles"), require("./ExtendedMainMenu"), require("../Button"));
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports, global.propTypes, global.react, global.reactRouterDom, global.styledComponents, global.NavItem, global.SystemIcons, global.styles, global.ExtendedMainMenu, global.Button);
-    global.undefined = mod.exports;
-  }
-})(this, function (exports, _propTypes, _react, _reactRouterDom, _styledComponents, _NavItem, _SystemIcons, _styles, _ExtendedMainMenu, _Button) {
-  "use strict";
-
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-
-  var _propTypes2 = _interopRequireDefault(_propTypes);
-
-  var React = _interopRequireWildcard(_react);
-
-  var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-  var _ExtendedMainMenu2 = _interopRequireDefault(_ExtendedMainMenu);
-
-  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 NavContainer = _styledComponents2.default.div`
-  display: none;
-  justify-content: center;
-  align-items: center;
-
-  ${_styles.BREAKPOINTS.MEDIUM} {
-    display: flex;
-  }
-
-  a {
-    text-decoration: none;
-  }
-`;
-  const NavButton = _styledComponents2.default.button`
-  background: ${_styles.COLORS.white};
-  border: 0;
-`;
-  const ExtendedMenuWrapper = _styledComponents2.default.div`
-  display: flex;
-  margin-left: ${props => props.floatRight ? 'auto' : 'unset'};
-
-  position: absolute;
-  flex-direction: column;
-  left: 290px;
-  top: 22px;
-
-  height: 0;
-  width: 0;
-
-  &:focus-within,
-  &:hover,
-  &.open {
-    background: ${_styles.COLORS.white};
-  }
-`;
-  const ExtendedSection = _styledComponents2.default.div`
-  position: relative;
-`;
-
-  const MainMenu = ({
-    navigationOptions,
-    rightSideRef
-  }) => {
-    const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);
-    const extendedMenuRef = React.useRef(null);
-    const mainMenuRef = React.useRef(null);
-    const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState(1);
-    const widthOfItem = 150;
-
-    const recalculateNumberOfItemsAllowed = () => {
-      if (rightSideRef?.current && mainMenuRef?.current) {
-        const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);
-
-        if (number !== numberOfItemsAllowed) {
-          setNumberOfItemsAllowed(number);
-        }
-      }
-    };
-
-    const handleClickExtendedMenuAction = () => {
-      setShowExtendedMenu(false);
-    };
-
-    const handleClickOutside = e => {
-      if (extendedMenuRef?.current && !extendedMenuRef?.current?.contains(e.target)) {
-        if (showExtendedMenu) {
-          setShowExtendedMenu(false);
-        }
-      }
-    };
-
-    React.useEffect(() => {
-      recalculateNumberOfItemsAllowed(); // Bind the event listener
-
-      document.addEventListener('click', handleClickOutside);
-      window.addEventListener('resize', recalculateNumberOfItemsAllowed);
-      return () => {
-        // Unbind the event listener on clean up
-        document.removeEventListener('click', handleClickOutside);
-        window.removeEventListener('resize', recalculateNumberOfItemsAllowed);
-      };
-    });
-
-    const preventFocusOnClick = e => {
-      e.preventDefault();
-    };
-
-    return /*#__PURE__*/React.createElement(NavContainer, {
-      className: "GlobalNavigationMainMenu",
-      ref: mainMenuRef,
-      open: showExtendedMenu
-    }, navigationOptions?.map((no, index) => index > numberOfItemsAllowed - 2 ? null : no?.disabled ? /*#__PURE__*/React.createElement(_NavItem.NavItem, {
-      as: NavButton,
-      exact: no?.exact,
-      className: "disabled",
-      key: no?.label,
-      onMouseDown: preventFocusOnClick,
-      onClick: () => {
-        if (no?.onClick) {
-          no?.onClick();
-        }
-      }
-    }, no?.label) : /*#__PURE__*/React.createElement(_NavItem.NavItem, {
-      as: _reactRouterDom.NavLink,
-      exact: no?.exact,
-      to: no?.to || '',
-      key: no?.label,
-      onMouseDown: preventFocusOnClick,
-      onClick: () => {
-        if (no?.onClick) {
-          no?.onClick();
-        }
-      }
-    }, no?.label)), navigationOptions.length + 1 > numberOfItemsAllowed && /*#__PURE__*/React.createElement(ExtendedSection, null, /*#__PURE__*/React.createElement(_Button.IconButton, {
-      variant: 'secondary',
-      shape: 'circular',
-      action: () => setShowExtendedMenu(true)
-    }, /*#__PURE__*/React.createElement(_SystemIcons.MoreHorizontal, {
-      size: "24px"
-    })), /*#__PURE__*/React.createElement(ExtendedMenuWrapper, {
-      ref: extendedMenuRef,
-      className: showExtendedMenu ? 'open' : '',
-      floatRight: false
-    }, /*#__PURE__*/React.createElement(_ExtendedMainMenu2.default, {
-      clickMenuAction: handleClickExtendedMenuAction,
-      navigationOptions: navigationOptions.slice(numberOfItemsAllowed - 1)
-    }))));
-  };
-
-  MainMenu.propTypes = {
-    navigationOptions: _propTypes2.default.array.isRequired
-  };
-  exports.default = MainMenu;
-});
-//# sourceMappingURL=MainMenu.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/MainMenu.tsx"],"names":["NavContainer","styled","div","BREAKPOINTS","MEDIUM","NavButton","button","COLORS","white","ExtendedMenuWrapper","props","ExtendedSection","navigationOptions","MainMenu","rightSideRef","React","extendedMenuRef","mainMenuRef","widthOfItem","recalculateNumberOfItemsAllowed","number","Math","setNumberOfItemsAllowed","handleClickExtendedMenuAction","setShowExtendedMenu","handleClickOutside","e","document","window","preventFocusOnClick","showExtendedMenu","index","numberOfItemsAllowed","no"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport { NavLink } from 'react-router-dom';\r\nimport styled from 'styled-components';\r\n\r\nimport { NavItem } from '../NavItem';\r\nimport { MoreHorizontal } from '../icons/systemicons/SystemIcons';\r\nimport { COLORS, BREAKPOINTS } from '../styles';\r\nimport { NavOption } from '../types';\r\nimport ExtendedMainMenu from './ExtendedMainMenu';\r\nimport {IconButton} from '../Button';\r\n\r\nconst NavContainer = styled.div<{ open: boolean }>`\r\n  display: none;\r\n  justify-content: center;\r\n  align-items: center;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    display: flex;\r\n  }\r\n\r\n  a {\r\n    text-decoration: none;\r\n  }\r\n`;\r\n\r\nconst NavButton = styled.button`\r\n  background: ${COLORS.white};\r\n  border: 0;\r\n`;\r\n\r\ninterface ExtendedMenuWrapperProps {\r\n  floatRight: boolean;\r\n}\r\n\r\nconst ExtendedMenuWrapper = styled.div<ExtendedMenuWrapperProps>`\r\n  display: flex;\r\n  margin-left: ${props => (props.floatRight ? 'auto' : 'unset')};\r\n\r\n  position: absolute;\r\n  flex-direction: column;\r\n  left: 290px;\r\n  top: 22px;\r\n\r\n  height: 0;\r\n  width: 0;\r\n\r\n  &:focus-within,\r\n  &:hover,\r\n  &.open {\r\n    background: ${COLORS.white};\r\n  }\r\n`;\r\n\r\nconst ExtendedSection = styled.div`\r\n  position: relative;\r\n`;\r\n\r\ntype Props = {\r\n  navigationOptions: NavOption[];\r\n  rightSideRef?: React.RefObject<HTMLDivElement> | null | undefined;\r\n};\r\n\r\nconst MainMenu = ({ navigationOptions, rightSideRef }: Props): React.ReactElement<Props> => {\r\n  const [showExtendedMenu, setShowExtendedMenu] = React.useState(false);\r\n  const extendedMenuRef = React.useRef<any>(null);\r\n  const mainMenuRef: React.RefObject<HTMLDivElement> | null | undefined = React.useRef(null);\r\n  const [numberOfItemsAllowed, setNumberOfItemsAllowed] = React.useState<number>(1);\r\n\r\n  const widthOfItem = 150;\r\n  const recalculateNumberOfItemsAllowed = () => {\r\n    if (rightSideRef?.current && mainMenuRef?.current) {\r\n      const number = Math.floor((rightSideRef?.current?.offsetLeft - mainMenuRef?.current?.offsetLeft) / widthOfItem);\r\n      if (number !== numberOfItemsAllowed) {\r\n        setNumberOfItemsAllowed(number);\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleClickExtendedMenuAction = () => {\r\n    setShowExtendedMenu(false);\r\n  };\r\n\r\n  const handleClickOutside = (e: any) => {\r\n    if (extendedMenuRef?.current && !extendedMenuRef?.current?.contains(e.target)) {\r\n      if (showExtendedMenu) {\r\n        setShowExtendedMenu(false);\r\n      }\r\n    }\r\n  };\r\n  React.useEffect(() => {\r\n    recalculateNumberOfItemsAllowed();\r\n    // Bind the event listener\r\n    document.addEventListener('click', handleClickOutside);\r\n    window.addEventListener('resize', recalculateNumberOfItemsAllowed);\r\n    return () => {\r\n      // Unbind the event listener on clean up\r\n      document.removeEventListener('click', handleClickOutside);\r\n      window.removeEventListener('resize', recalculateNumberOfItemsAllowed);\r\n    };\r\n  });\r\n\r\n  const preventFocusOnClick = (e: any) => {\r\n    e.preventDefault();\r\n  };\r\n\r\n  return (\r\n    <NavContainer className=\"GlobalNavigationMainMenu\" ref={mainMenuRef} open={showExtendedMenu}>\r\n      {navigationOptions?.map((no: NavOption, index: number) =>\r\n        index > numberOfItemsAllowed - 2 ? null : no?.disabled ? (\r\n          <NavItem\r\n            as={NavButton}\r\n            exact={no?.exact}\r\n            className=\"disabled\"\r\n            key={no?.label}\r\n            onMouseDown={preventFocusOnClick}\r\n            onClick={() => {\r\n              if (no?.onClick) {\r\n                no?.onClick();\r\n              }\r\n            }}>\r\n            {no?.label}\r\n          </NavItem>\r\n        ) : (\r\n          <NavItem\r\n            as={NavLink}\r\n            exact={no?.exact}\r\n            to={no?.to || ''}\r\n            key={no?.label}\r\n            onMouseDown={preventFocusOnClick}\r\n            onClick={() => {\r\n              if (no?.onClick) {\r\n                no?.onClick();\r\n              }\r\n            }}>\r\n            {no?.label}\r\n          </NavItem>\r\n        ),\r\n      )}\r\n      {navigationOptions.length + 1 > numberOfItemsAllowed && (\r\n        <ExtendedSection>\r\n          <IconButton\r\n            variant={'secondary'}\r\n            shape={'circular'}\r\n            action={() => setShowExtendedMenu(true)}>\r\n            <MoreHorizontal size=\"24px\" />\r\n          </IconButton>\r\n          <ExtendedMenuWrapper ref={extendedMenuRef} className={showExtendedMenu ? 'open' : ''} floatRight={false}>\r\n            <ExtendedMainMenu clickMenuAction={handleClickExtendedMenuAction} navigationOptions={navigationOptions.slice(numberOfItemsAllowed - 1)} />\r\n          </ExtendedMenuWrapper>\r\n        </ExtendedSection>\r\n      )}\r\n    </NavContainer>\r\n  );\r\n};\r\n\r\nexport default MainMenu;\r\n"],"file":"MainMenu.js"}

package/dist/umd/GlobalNavigationBar/RightSideNav.js

@@ -1,155 +0,0 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "react-router-dom", "../NavItem", "../styles", "../Button", "../styles/typography"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("react-router-dom"), require("../NavItem"), require("../styles"), require("../Button"), require("../styles/typography"));
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.reactRouterDom, global.NavItem, global.styles, global.Button, global.typography);
-    global.undefined = mod.exports;
-  }
-})(this, function (exports, _propTypes, _react, _styledComponents, _reactRouterDom, _NavItem, _styles, _Button, _typography) {
-  "use strict";
-
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-
-  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 NavContainer = _styledComponents2.default.div`
-  display: flex;
-  margin: auto 0 auto auto;
-  align-items: center;
-  height: 48px;
-  
-  a {
-    text-decoration: none;
-  }
-
-  ${_styles.BREAKPOINTS.SMALL} {
-    height: 56px;
-  }
-  ${_styles.BREAKPOINTS.MEDIUM} {
-    height: 64px;
-  }
-
-  button,
-  div {
-    &:hover {
-      cursor: pointer;
-    }
-  }
-`;
-  const SecondaryButton = (0, _styledComponents2.default)(_Button.Button)`
-  height: 40px;
-  margin: 0 8px;
-
-  ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Bold, 'unset')}
-`;
-
-  const RightSideNav = ({
-    navigationOptions,
-    secondaryButton
-  }) => {
-    const preventFocusOnClick = e => {
-      e.preventDefault();
-    };
-
-    const getNavItem = navOption => {
-      if (navOption?.disabled) {
-        return /*#__PURE__*/React.createElement(_NavItem.NavItem, {
-          as: _Button.Button,
-          className: "disabled",
-          key: navOption?.label
-        }, navOption?.label);
-      } else {
-        return /*#__PURE__*/React.createElement(_NavItem.NavItem, {
-          as: _reactRouterDom.NavLink,
-          exact: navOption?.exact,
-          to: navOption?.to || '',
-          key: navOption?.label,
-          onMouseDown: preventFocusOnClick,
-          onClick: () => {
-            if (navOption?.onClick) {
-              navOption?.onClick();
-            }
-          }
-        }, navOption?.label);
-      }
-    };
-
-    return /*#__PURE__*/React.createElement(NavContainer, null, navigationOptions?.reverse().map(no => getNavItem(no)), secondaryButton && /*#__PURE__*/React.createElement(SecondaryButton, {
-      variant: "secondary",
-      onClick: secondaryButton?.action
-    }, secondaryButton.label));
-  };
-
-  RightSideNav.propTypes = {
-    navigationOptions: _propTypes2.default.array
-  };
-  exports.default = RightSideNav;
-});
-//# sourceMappingURL=RightSideNav.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/RightSideNav.tsx"],"names":["NavContainer","styled","div","BREAKPOINTS","SMALL","MEDIUM","SecondaryButton","ComponentMStyling","ComponentTextStyle","navigationOptions","RightSideNav","secondaryButton","preventFocusOnClick","e","getNavItem","navOption","label","no","action"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,QAAMA,YAAY,GAAGC,2BAAOC,GAAI;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,oBAAYC,KAAM;AACtB;AACA;AACA,IAAID,oBAAYE,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAtBA,CAAA;AAyBA,QAAMC,eAAe,GAAGL,gCAAM,cAANA,CAAe;AACvC;AACA;AACA;AACA,IAAIM,mCAAkBC,2BAAD,IAAjBD,EAAiB,OAAjBA,CAAoD;AAJxD,CAAA;;AAYA,QAAMG,YAAY,GAAG,CAAC;AAAA,IAAA,iBAAA;AAAqBC,IAAAA;AAArB,GAAD,KAA8E;AACjG,UAAMC,mBAAmB,GAAIC,CAAD,IAAY;AACtCA,MAAAA,CAAC,CAADA,cAAAA;AADF,KAAA;;AAGA,UAAMC,UAAU,GAAIC,SAAD,IAA0B;AAC3C,UAAIA,SAAS,EAAb,QAAA,EAAyB;AACvB,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA;AAAS,UAAA,EAAE,EAAX,cAAA;AAAqB,UAAA,SAAS,EAA9B,UAAA;AAA0C,UAAA,GAAG,EAAEA,SAAS,EAAEC;AAA1D,SAAA,EACGD,SAAS,EAFd,KACE,CADF;AADF,OAAA,MAMO;AACL,eAAA,aACE,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA;AACE,UAAA,EAAE,EADJ,uBAAA;AAEE,UAAA,KAAK,EAAEA,SAAS,EAFlB,KAAA;AAGE,UAAA,EAAE,EAAEA,SAAS,EAATA,EAAAA,IAHN,EAAA;AAIE,UAAA,GAAG,EAAEA,SAAS,EAJhB,KAAA;AAKE,UAAA,WAAW,EALb,mBAAA;AAME,UAAA,OAAO,EAAE,MAAM;AACb,gBAAIA,SAAS,EAAb,OAAA,EAAwB;AACtBA,cAAAA,SAAS,EAATA,OAAAA;AACD;AACF;AAVH,SAAA,EAWGA,SAAS,EAZd,KACE,CADF;AAeD;AAvBH,KAAA;;AAyBA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,IAAA,EACGN,iBAAiB,EAAjBA,OAAAA,GAAAA,GAAAA,CAAiCQ,EAAE,IAAIH,UAAU,CADpD,EACoD,CAAjDL,CADH,EAGGE,eAAe,IAAA,aACd,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAiB,MAAA,OAAO,EAAxB,WAAA;AAAqC,MAAA,OAAO,EAAEA,eAAe,EAAEO;AAA/D,KAAA,EACGP,eAAe,CANxB,KAKM,CAJJ,CADF;AA7BF,GAAA;;;AAJEF,IAAAA,iB;;oBA8CF,Y","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {NavLink} from 'react-router-dom';\r\n\r\nimport {NavItem} from '../NavItem';\r\nimport {NavButton, NavOption} from '../types';\r\nimport {BREAKPOINTS, ComponentTextStyle} from '../styles';\r\nimport {Button} from '../Button';\r\nimport {ComponentMStyling} from '../styles/typography';\r\n\r\nconst NavContainer = styled.div`\r\n  display: flex;\r\n  margin: auto 0 auto auto;\r\n  align-items: center;\r\n  height: 48px;\r\n  \r\n  a {\r\n    text-decoration: none;\r\n  }\r\n\r\n  ${BREAKPOINTS.SMALL} {\r\n    height: 56px;\r\n  }\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    height: 64px;\r\n  }\r\n\r\n  button,\r\n  div {\r\n    &:hover {\r\n      cursor: pointer;\r\n    }\r\n  }\r\n`;\r\n\r\nconst SecondaryButton = styled(Button)`\r\n  height: 40px;\r\n  margin: 0 8px;\r\n\r\n  ${ComponentMStyling(ComponentTextStyle.Bold, 'unset')}\r\n`;\r\n\r\ntype Props = {\r\n  navigationOptions?: NavOption[];\r\n  secondaryButton?: NavButton;\r\n};\r\n\r\nconst RightSideNav = ({ navigationOptions, secondaryButton }: Props): React.ReactElement<Props> => {\r\n  const preventFocusOnClick = (e: any) => {\r\n    e.preventDefault();\r\n  };\r\n  const getNavItem = (navOption: NavOption) => {\r\n    if (navOption?.disabled) {\r\n      return (\r\n        <NavItem as={Button} className=\"disabled\" key={navOption?.label}>\r\n          {navOption?.label}\r\n        </NavItem>\r\n      );\r\n    } else {\r\n      return (\r\n        <NavItem\r\n          as={NavLink}\r\n          exact={navOption?.exact}\r\n          to={navOption?.to || ''}\r\n          key={navOption?.label}\r\n          onMouseDown={preventFocusOnClick}\r\n          onClick={() => {\r\n            if (navOption?.onClick) {\r\n              navOption?.onClick();\r\n            }\r\n          }}>\r\n          {navOption?.label}\r\n        </NavItem>\r\n      );\r\n    }\r\n  };\r\n  return (\r\n    <NavContainer>\r\n      {navigationOptions?.reverse().map(no => getNavItem(no))}\r\n\r\n      {secondaryButton && (\r\n        <SecondaryButton variant=\"secondary\" onClick={secondaryButton?.action}>\r\n          {secondaryButton.label}\r\n        </SecondaryButton>\r\n      )}\r\n    </NavContainer>\r\n  );\r\n};\r\n\r\nexport default RightSideNav;\r\n"],"file":"RightSideNav.js"}