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

package/dist/js/GlobalNavigationBar/mobile/MobileMenu.js

@@ -0,0 +1,271 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../../styles");
+
+var _Actions = _interopRequireDefault(require("../Actions"));
+
+var _SystemIcons = require("../../icons/systemicons/SystemIcons");
+
+var _MobileActionMenu = _interopRequireDefault(require("./MobileActionMenu"));
+
+var _CommonStyles = require("./CommonStyles");
+
+var _reactRouterDom = require("react-router-dom");
+
+var _Switcher = require("../../Switcher");
+
+var _Avatar = _interopRequireWildcard(require("../Avatar"));
+
+var _MobileUserMenu = _interopRequireDefault(require("../UserMenu/MobileUserMenu"));
+
+var _Button = require("../../Button");
+
+var _assets = require("../../assets");
+
+var _typography = require("../../styles/typography");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var SwitchButton = _styledComponents.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  \n  padding: 0;\n  border: 0;\n  margin: 0 auto 0 12px;\n  line-height: 48px;\n"])), (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600));
+
+var BottomPinnedSection = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  width: 100%;\n  bottom: 0;\n  border-top: 1px solid ", ";\n"])), _styles.COLORS.neutral_200);
+
+var FirstRowLayout = (0, _styledComponents.default)(_CommonStyles.RowLayout)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-top: 10px;\n  padding: 12px;\n"])));
+var BottomRowLayout = (0, _styledComponents.default)(_CommonStyles.RowLayout)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: 8px auto 0 0;\n  width: 95%;\n  height: 48px;\n  ", " {\n    height: 56px;\n  }\n"])), _styles.BREAKPOINTS.SMALL);
+var StyledNavItem = (0, _styledComponents.default)(_Switcher.SwitcherMenuItem)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: 0 0 0 20px;\n  margin: 0 2px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  ", "\n  text-decoration: none;\n\n  svg {\n    margin-right: 16px;\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: 4px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    font-weight: bold;\n    &:after {\n      background-color: ", ";\n    }\n\n    color: ", ";\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  &:hover:not(.disabled) {\n    color: ", ";\n    background-color: ", ";\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &:active:not(.disabled) {\n    color: ", ";\n    background-color: ", ";\n    box-shadow: none;\n    &:after {\n      background-color: ", ";\n    }\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &:focus:not(.disabled) {\n    box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.primary_500, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.primary_600, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _styles.COLORS.primary_500, _styles.COLORS.primary_800, _styles.COLORS.primary_500);
+
+var SwitcherButton = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: auto;\n\n  line-height: 48px;\n  button:last-child {\n    margin: 0 !important;\n  }\n"])));
+
+var MobileMenu = function MobileMenu(_ref) {
+  var clickMenuAction = _ref.clickMenuAction,
+      navigationOptions = _ref.navigationOptions,
+      actions = _ref.actions,
+      firstName = _ref.firstName,
+      lastName = _ref.lastName,
+      email = _ref.email,
+      signout = _ref.signout,
+      notifications = _ref.notifications,
+      accountSection = _ref.accountSection,
+      organizationSection = _ref.organizationSection,
+      supportSection = _ref.supportSection,
+      switcherAction = _ref.switcherAction,
+      accountMenuHeader = _ref.accountMenuHeader,
+      signOutLabel = _ref.signOutLabel,
+      organizationName = _ref.organizationName,
+      useUserMenu = _ref.useUserMenu,
+      showUserMenu = _ref.showUserMenu,
+      setShowUserMenu = _ref.setShowUserMenu;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      showNotificationMenu = _React$useState2[0],
+      setShowNotificationMenu = _React$useState2[1];
+
+  var notificationMenuRef = React.useRef(null);
+  var userMenuRef = React.useRef(null);
+  var userRef = React.useRef(null);
+  var location = (0, _reactRouterDom.useLocation)();
+
+  if (actions !== null && actions !== void 0 && actions.user) {
+    actions.user = function () {
+      return setShowUserMenu(true);
+    };
+  }
+
+  if (actions !== null && actions !== void 0 && actions.notification) {
+    actions.notification = function () {
+      return setShowNotificationMenu(true);
+    };
+  }
+
+  var fireAction = function fireAction(action) {
+    var _ref$current;
+
+    var ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+    ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.blur();
+    !!action && action();
+  };
+
+  var isPressingEnter = function isPressingEnter(e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.stopPropagation();
+      return true;
+    }
+
+    return false;
+  };
+
+  React.useEffect(function () {
+    clickMenuAction();
+  }, [location]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, (actions === null || actions === void 0 ? void 0 : actions.notification) && /*#__PURE__*/React.createElement(_CommonStyles.MenuWrapper, {
+    ref: notificationMenuRef,
+    className: showNotificationMenu ? 'open' : '',
+    isVisible: showNotificationMenu
+  }, /*#__PURE__*/React.createElement(_MobileActionMenu.default, {
+    name: "Notifications",
+    clickMenuAction: function clickMenuAction() {
+      return setShowNotificationMenu(false);
+    },
+    navigationOptions: notifications,
+    actionList: {
+      notification: function notification() {}
+    }
+  })), (actions === null || actions === void 0 ? void 0 : actions.user) && /*#__PURE__*/React.createElement(_CommonStyles.MenuWrapper, {
+    ref: userMenuRef,
+    className: showUserMenu ? 'open' : '',
+    isVisible: showUserMenu
+  }, /*#__PURE__*/React.createElement(_MobileUserMenu.default, {
+    accountMenuHeader: accountMenuHeader,
+    firstName: firstName,
+    lastName: lastName,
+    email: email,
+    organizationName: organizationName,
+    clickMenuAction: clickMenuAction,
+    accountSection: accountSection,
+    organizationSection: organizationSection,
+    supportSection: supportSection,
+    signOut: signout,
+    signOutLabel: signOutLabel
+  })), /*#__PURE__*/React.createElement(FirstRowLayout, null, firstName && lastName && /*#__PURE__*/React.createElement(_Avatar.AvatarContainer, {
+    id: "avatarContainer",
+    ref: userRef,
+    onClick: actions === null || actions === void 0 ? void 0 : actions.user,
+    onKeyDown: function onKeyDown(e) {
+      return isPressingEnter(e) ? fireAction(actions === null || actions === void 0 ? void 0 : actions.user, userRef) : null;
+    },
+    inMobileMenu: true,
+    hideOnLowWidth: false
+  }, /*#__PURE__*/React.createElement(_Avatar.default, {
+    size: 36,
+    firstName: firstName,
+    lastName: lastName,
+    color: _styles.COLORS.primary_500,
+    profileMenuLink: "#TODO"
+  })), (actions === null || actions === void 0 ? void 0 : actions.notification) && /*#__PURE__*/React.createElement(_Button.IconButton, {
+    variant: 'secondary',
+    shape: 'circular',
+    hideOnLowWidth: false,
+    isInMobileMenu: true,
+    action: function action() {
+      return fireAction(actions === null || actions === void 0 ? void 0 : actions.notification);
+    },
+    onKeyPress: function onKeyPress(e) {
+      return isPressingEnter(e) ? fireAction(actions === null || actions === void 0 ? void 0 : actions.notification) : null;
+    }
+  }, /*#__PURE__*/React.createElement(_SystemIcons.Notification, {
+    size: "24px"
+  })), /*#__PURE__*/React.createElement(_CommonStyles.Right, null, /*#__PURE__*/React.createElement(_Actions.default, {
+    actions: actions,
+    firstName: firstName,
+    lastName: lastName,
+    isInMobileMenu: true,
+    hideOnLowWidth: false,
+    useUserMenu: useUserMenu,
+    setShowUserMenu: setShowUserMenu
+  }), /*#__PURE__*/React.createElement(_Button.IconButton, {
+    variant: "secondary",
+    shape: "circular",
+    action: function action() {
+      return clickMenuAction();
+    },
+    isInMobileMenu: true
+  }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
+    size: "24px"
+  })))), /*#__PURE__*/React.createElement(_CommonStyles.MenuSection, null, /*#__PURE__*/React.createElement(_CommonStyles.MenuSectionList, null, navigationOptions === null || navigationOptions === void 0 ? void 0 : navigationOptions.map(function (no) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: no.label
+    }, /*#__PURE__*/React.createElement(StyledNavItem, {
+      as: _reactRouterDom.NavLink,
+      exact: no === null || no === void 0 ? void 0 : no.exact,
+      to: no.to,
+      onClick: function onClick() {
+        if (no !== null && no !== void 0 && no.onClick) {
+          no === null || no === void 0 ? void 0 : no.onClick();
+        }
+      }
+    }, no.label));
+  }))), /*#__PURE__*/React.createElement(BottomPinnedSection, null, /*#__PURE__*/React.createElement(_CommonStyles.MenuSection, {
+    style: {
+      padding: '0 12px 12px 12px',
+      margin: '0'
+    }
+  }, /*#__PURE__*/React.createElement(_CommonStyles.MenuSectionList, null, /*#__PURE__*/React.createElement(BottomRowLayout, null, /*#__PURE__*/React.createElement(_assets.LaerdalLogo, null), switcherAction && /*#__PURE__*/React.createElement(SwitcherButton, null, /*#__PURE__*/React.createElement(SwitchButton, {
+    onClick: function onClick() {
+      return switcherAction();
+    }
+  }, "Switch site"), ' ', /*#__PURE__*/React.createElement(_Button.IconButton, {
+    variant: 'secondary',
+    shape: 'circular',
+    hideOnLowWidth: false,
+    isInMobileMenu: true,
+    id: "globalNavAppsButton",
+    action: function action() {
+      return switcherAction();
+    },
+    onKeyPress: function onKeyPress(e) {
+      return isPressingEnter(e) ? switcherAction() : null;
+    }
+  }, /*#__PURE__*/React.createElement(_SystemIcons.SwitchApp, {
+    size: "24px"
+  }))))))));
+};
+
+MobileMenu.propTypes = {
+  name: _propTypes.default.string.isRequired,
+  navigationOptions: _propTypes.default.array,
+  secondaryNavigationOptions: _propTypes.default.array,
+  clickMenuAction: _propTypes.default.func.isRequired,
+  firstName: _propTypes.default.string.isRequired,
+  lastName: _propTypes.default.string.isRequired,
+  email: _propTypes.default.string.isRequired,
+  signout: _propTypes.default.func,
+  isAuthenticated: _propTypes.default.bool,
+  notifications: _propTypes.default.array,
+  switcherAction: _propTypes.default.func,
+  accountSection: _propTypes.default.array,
+  organizationSection: _propTypes.default.array,
+  supportSection: _propTypes.default.array,
+  accountMenuHeader: _propTypes.default.string.isRequired,
+  signOutLabel: _propTypes.default.string.isRequired,
+  organizationName: _propTypes.default.string.isRequired,
+  showUserMenu: _propTypes.default.bool.isRequired,
+  setShowUserMenu: _propTypes.default.func.isRequired
+};
+var _default = MobileMenu;
+exports.default = _default;
+//# sourceMappingURL=MobileMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"names":["SwitchButton","styled","span","ComponentTextStyle","Bold","COLORS","neutral_600","BottomPinnedSection","div","neutral_200","FirstRowLayout","RowLayout","BottomRowLayout","BREAKPOINTS","SMALL","StyledNavItem","SwitcherMenuItem","Regular","black","primary_500","primary_800","neutral_300","neutral_100","primary_600","primary_20","primary_100","SwitcherButton","MobileMenu","clickMenuAction","navigationOptions","actions","firstName","lastName","email","signout","notifications","accountSection","organizationSection","supportSection","switcherAction","accountMenuHeader","signOutLabel","organizationName","useUserMenu","showUserMenu","setShowUserMenu","React","useState","showNotificationMenu","setShowNotificationMenu","notificationMenuRef","useRef","userMenuRef","userRef","location","user","notification","fireAction","action","ref","undefined","current","blur","isPressingEnter","e","key","preventDefault","stopPropagation","useEffect","map","no","label","NavLink","exact","to","onClick","padding","margin","name","secondaryNavigationOptions","isAuthenticated"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles';\nimport {ActionOptions, NavButton, NavOption, UserMenuItem} from '../../types';\nimport Actions from '../Actions';\nimport {Close, Notification, SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport MobileActionMenu from './MobileActionMenu';\nimport {MenuSection, MenuSectionList, MenuWrapper, Right, RowLayout} from './CommonStyles';\nimport {NavLink, useLocation} from 'react-router-dom';\nimport {SwitcherMenuItem} from '../../Switcher';\nimport Avatar, {AvatarContainer} from '../Avatar';\nimport MobileUserMenu from '../UserMenu/MobileUserMenu';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {ComponentMStyling, ComponentXSStyling} from '../../styles/typography';\n\nconst SwitchButton = styled.span`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  \n  padding: 0;\n  border: 0;\n  margin: 0 auto 0 12px;\n  line-height: 48px;\n`;\n\nconst BottomPinnedSection = styled.div`\n  position: absolute;\n  left: 0;\n  width: 100%;\n  bottom: 0;\n  border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FirstRowLayout = styled(RowLayout)`\n  margin-top: 10px;\n  padding: 12px;\n`;\n\nconst BottomRowLayout = styled(RowLayout)`\n  margin: 8px auto 0 0;\n  width: 95%;\n  height: 48px;\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n`;\n\nconst StyledNavItem = styled(SwitcherMenuItem)`\n  padding: 0 0 0 20px;\n  margin: 0 2px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  text-decoration: none;\n\n  svg {\n    margin-right: 16px;\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: 4px;\n    background-color: transparent;\n  }\n\n  &.active:not(.disabled) {\n    font-weight: bold;\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n\n    color: ${COLORS.primary_800};\n    svg path {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n  }\n\n  &:hover:not(.disabled) {\n    color: ${COLORS.primary_600};\n    background-color: ${COLORS.primary_20};\n\n    svg path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n\n  &:active:not(.disabled) {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    box-shadow: none;\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n    svg path {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:focus:not(.disabled) {\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\nconst SwitcherButton = styled.div`\n  display: flex;\n  margin-left: auto;\n\n  line-height: 48px;\n  button:last-child {\n    margin: 0 !important;\n  }\n`;\n\ntype Props = {\n  name: string;\n  navigationOptions?: NavOption[];\n  secondaryNavigationOptions?: NavOption[];\n  secondaryButton?: NavButton;\n  actions?: ActionOptions;\n  clickMenuAction: () => void;\n  firstName: string;\n  lastName: string;\n  email: string;\n  signout?: (e: any) => void;\n  isAuthenticated?: boolean;\n  notifications?: NavOption[];\n  switcherAction?: () => void;\n  accountSection?: UserMenuItem[];\n  organizationSection?: UserMenuItem[];\n  supportSection?: UserMenuItem[];\n  accountMenuHeader: string;\n  signOutLabel: string;\n  organizationName: string;\n  useUserMenu: boolean | undefined;\n  showUserMenu: boolean;\n  setShowUserMenu: (show: boolean) => void;\n};\n\nconst MobileMenu = ({\n  clickMenuAction,\n  navigationOptions,\n  actions,\n  firstName,\n  lastName,\n  email,\n  signout,\n  notifications,\n  accountSection,\n  organizationSection,\n  supportSection,\n  switcherAction,\n  accountMenuHeader,\n  signOutLabel,\n  organizationName,\n  useUserMenu,\n  showUserMenu,\n  setShowUserMenu,\n}: Props) => {\n  const [showNotificationMenu, setShowNotificationMenu] = React.useState<boolean>(false);\n  const notificationMenuRef = React.useRef(null);\n  const userMenuRef = React.useRef(null);\n  const userRef = React.useRef(null);\n\n  const location = useLocation();\n\n  if (actions?.user) {\n    actions.user = () => setShowUserMenu(true);\n  }\n  if (actions?.notification) {\n    actions.notification = () => setShowNotificationMenu(true);\n  }\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  React.useEffect(() => {\n    clickMenuAction();\n  }, [location]);\n\n  return (\n    <>\n      {actions?.notification && (\n        <MenuWrapper ref={notificationMenuRef} className={showNotificationMenu ? 'open' : ''} isVisible={showNotificationMenu}>\n          <MobileActionMenu\n            name=\"Notifications\"\n            clickMenuAction={() => setShowNotificationMenu(false)}\n            navigationOptions={notifications}\n            actionList={{\n              notification: () => {},\n            }}\n          />\n        </MenuWrapper>\n      )}\n      {actions?.user && (\n        <MenuWrapper ref={userMenuRef} className={showUserMenu ? 'open' : ''} isVisible={showUserMenu}>\n          <MobileUserMenu\n            accountMenuHeader={accountMenuHeader}\n            firstName={firstName}\n            lastName={lastName}\n            email={email}\n            organizationName={organizationName}\n            clickMenuAction={clickMenuAction}\n            accountSection={accountSection}\n            organizationSection={organizationSection}\n            supportSection={supportSection}\n            signOut={signout}\n            signOutLabel={signOutLabel}\n          />\n        </MenuWrapper>\n      )}\n      <FirstRowLayout>\n        {firstName && lastName && (\n          <AvatarContainer\n            id=\"avatarContainer\"\n            ref={userRef}\n            onClick={actions?.user}\n            onKeyDown={(e: any) => (isPressingEnter(e) ? fireAction(actions?.user, userRef) : null)}\n            inMobileMenu={true}\n            hideOnLowWidth={false}>\n            <Avatar size={36} firstName={firstName} lastName={lastName} color={COLORS.primary_500} profileMenuLink=\"#TODO\" />\n          </AvatarContainer>\n        )}\n        {actions?.notification && (\n          <IconButton\n            variant={'secondary'}\n            shape={'circular'}\n            hideOnLowWidth={false}\n            isInMobileMenu={true}\n            action={() => fireAction(actions?.notification)}\n            onKeyPress={(e: any) => (isPressingEnter(e) ? fireAction(actions?.notification) : null)}>\n              <Notification size=\"24px\" />\n          </IconButton>\n        )}\n        <Right>\n          <Actions\n            actions={actions}\n            firstName={firstName}\n            lastName={lastName}\n            isInMobileMenu={true}\n            hideOnLowWidth={false}\n            useUserMenu={useUserMenu}\n            setShowUserMenu={setShowUserMenu}\n          />\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => clickMenuAction()} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </FirstRowLayout>\n      <MenuSection>\n        <MenuSectionList>\n          {navigationOptions?.map((no) => (\n            <li key={no.label}>\n              <StyledNavItem\n                as={NavLink}\n                exact={no?.exact}\n                to={no.to}\n                onClick={() => {\n                  if (no?.onClick) {\n                    no?.onClick();\n                  }\n                }}>\n                {no.label}\n              </StyledNavItem>\n            </li>\n          ))}\n        </MenuSectionList>\n      </MenuSection>\n\n      <BottomPinnedSection>\n        <MenuSection style={{ padding: '0 12px 12px 12px', margin: '0' }}>\n          <MenuSectionList>\n            <BottomRowLayout>\n              <LaerdalLogo />\n              {switcherAction && (\n                <SwitcherButton>\n                  <SwitchButton onClick={() => switcherAction()}>Switch site</SwitchButton>{' '}\n                  <IconButton\n                    variant={'secondary'}\n                    shape={'circular'}\n                    hideOnLowWidth={false}\n                    isInMobileMenu={true}\n                    id=\"globalNavAppsButton\"\n                    action={() => switcherAction()}\n                    onKeyPress={(e: any) => (isPressingEnter(e) ? switcherAction() : null)}>\n                      <SwitchApp size=\"24px\" />\n                  </IconButton>\n                </SwitcherButton>\n              )}\n            </BottomRowLayout>\n          </MenuSectionList>\n        </MenuSection>\n      </BottomPinnedSection>\n    </>\n  );\n};\n\nexport default MobileMenu;\n"],"file":"MobileMenu.js"}

package/dist/js/HyperLink/HyperLink.js

@@ -0,0 +1,68 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styling = require("./styling");
+
+var _excluded = ["children", "target", "variant"];
+
+var _templateObject;
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var StyledLink = _styledComponents.default.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  ", "\n  ", "\n"])), function (props) {
+  return props.variant === 'inverted' ? _styling.invertedStyle : _styling.defaultStyle;
+}, function (props) {
+  return props.margin ? "margin: ".concat(props.margin, ";") : '';
+});
+
+var HyperLink = function HyperLink(_ref) {
+  var children = _ref.children,
+      _ref$target = _ref.target,
+      target = _ref$target === void 0 ? '_blank' : _ref$target,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(StyledLink, _extends({}, props, {
+    variant: variant,
+    target: target,
+    rel: "noopener noreferrer"
+  }), children);
+};
+
+HyperLink.propTypes = {
+  id: _propTypes.default.string,
+  variant: _propTypes.default.oneOf(['default', 'inverted']).isRequired,
+  href: _propTypes.default.string.isRequired,
+  disabled: _propTypes.default.bool,
+  margin: _propTypes.default.string,
+  children: _propTypes.default.any,
+  className: _propTypes.default.string
+};
+var _default = HyperLink;
+exports.default = _default;
+//# sourceMappingURL=HyperLink.js.map

package/dist/js/HyperLink/HyperLink.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/HyperLink/HyperLink.tsx"],"names":["StyledLink","styled","a","props","variant","invertedStyle","defaultStyle","margin","HyperLink","children","target","id","href","disabled","className"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,UAAU,GAAGC,0BAAOC,CAAV,4GAKZ,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,OAAN,KAAkB,UAAlB,GAA+BC,sBAA/B,GAA+CC,qBAA3D;AAAA,CALY,EAMZ,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACI,MAAN,qBAA0BJ,KAAK,CAACI,MAAhC,SAA4C,EAAxD;AAAA,CANY,CAAhB;;AAmBA,IAAMC,SAAkD,GAAG,SAArDA,SAAqD,OAAoF;AAAA,MAAjFC,QAAiF,QAAjFA,QAAiF;AAAA,yBAAvEC,MAAuE;AAAA,MAAvEA,MAAuE,4BAA9D,QAA8D;AAAA,0BAApDN,OAAoD;AAAA,MAApDA,OAAoD,6BAA1C,SAA0C;AAAA,MAA5BD,KAA4B;;AAC7I,sBACE,oBAAC,UAAD,eAAgBA,KAAhB;AAAuB,IAAA,OAAO,EAAEC,OAAhC;AAAyC,IAAA,MAAM,EAAEM,MAAjD;AAAyD,IAAA,GAAG,EAAC;AAA7D,MACGD,QADH,CADF;AAKD,CAND;;;AATEE,EAAAA,E;AACAP,EAAAA,O,4BAAS,S,EAAY,U;AACrBQ,EAAAA,I;AACAC,EAAAA,Q;AACAN,EAAAA,M;AACAE,EAAAA,Q;AACAK,EAAAA,S;;eAWaN,S","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nconst StyledLink = styled.a<{\n  variant: 'default' | 'inverted';\n  margin?: string;\n}>`\n  cursor: pointer;\n  ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nexport interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  id?: string;\n  variant: 'default' | 'inverted';\n  href: string;\n  disabled?: boolean;\n  margin?: string;\n  children?: any;\n  className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<HyperlinkProps> = ({ children, target = '_blank', variant = 'default', ...props }: HyperlinkProps) => {\n  return (\n    <StyledLink {...props} variant={variant} target={target} rel=\"noopener noreferrer\">\n      {children}\n    </StyledLink>\n  );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.js"}

package/dist/js/HyperLink/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "HyperLink", {
+  enumerable: true,
+  get: function get() {
+    return _HyperLink.default;
+  }
+});
+Object.defineProperty(exports, "HyperLinkDefaultStyling", {
+  enumerable: true,
+  get: function get() {
+    return _styling.defaultStyle;
+  }
+});
+Object.defineProperty(exports, "HyperLinkInvertedStyling", {
+  enumerable: true,
+  get: function get() {
+    return _styling.invertedStyle;
+  }
+});
+
+var _HyperLink = _interopRequireDefault(require("./HyperLink"));
+
+var _styling = require("./styling");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

package/dist/js/HyperLink/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/HyperLink/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["import HyperLink from './HyperLink';\nimport {defaultStyle as HyperLinkDefaultStyling, invertedStyle as HyperLinkInvertedStyling} from './styling';\n\nexport { HyperLink, HyperLinkInvertedStyling, HyperLinkDefaultStyling };\n"],"file":"index.js"}

package/dist/js/HyperLink/styling.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.invertedStyle = exports.defaultStyle = void 0;
+
+var _styledComponents = require("styled-components");
+
+var _ = require("..");
+
+var _templateObject, _templateObject2;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var defaultStyle = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ", ";\n  }\n\n  &:visited {\n    color: ", ";\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ", ";\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    background: ", ";\n    color: ", ";\n  }\n\n\n  &:focus:hover,\n  &:active:hover,\n  &.active-state:hover,\n  &.focus-state:hover{\n    text-decoration-line: none;\n    color: ", ";\n    opacity: 0.9;\n  }\n"])), _.COLORS.primary_500, _.COLORS.accent1_500, _.COLORS.primary_700, _.COLORS.primary_800, _.COLORS.white, _.COLORS.primary_800, _.COLORS.white, _.COLORS.white);
+exports.defaultStyle = defaultStyle;
+var invertedStyle = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  outline: none;\n  padding: 2px 0;\n\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: underline;\n\n  &:link {\n    font-weight: 700;\n    color: ", ";\n  }\n\n  &:visited {\n    color: ", ";\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:hover,\n  &.hover-state {\n    text-decoration-line: none;\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ", ";\n    color: ", ";\n  }\n\n  &:focus:hover,\n  &:active:hover {\n    text-decoration-line: none;\n    color: ", ";\n    opacity: 0.9;\n  }\n"])), _.COLORS.white, _.COLORS.neutral_100, _.COLORS.white, _.COLORS.neutral_800, _.COLORS.white, _.COLORS.neutral_800, _.COLORS.neutral_800);
+exports.invertedStyle = invertedStyle;
+//# sourceMappingURL=styling.js.map

package/dist/js/HyperLink/styling.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/HyperLink/styling.ts"],"names":["defaultStyle","css","COLORS","primary_500","accent1_500","primary_700","primary_800","white","invertedStyle","neutral_100","neutral_800"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AAEO,IAAMA,YAAY,OAAGC,qBAAH,yyBAUZC,SAAOC,WAVK,EAcZD,SAAOE,WAdK,EAmBZF,SAAOG,WAnBK,EA0BPH,SAAOI,WA1BA,EA2BZJ,SAAOK,KA3BK,EAiCPL,SAAOI,WAjCA,EAkCZJ,SAAOK,KAlCK,EA2CZL,SAAOK,KA3CK,CAAlB;;AAgDA,IAAMC,aAAa,OAAGP,qBAAH,2yBAWbC,SAAOK,KAXM,EAebL,SAAOO,WAfM,EAsBRP,SAAOK,KAtBC,EAuBbL,SAAOQ,WAvBM,EAmCRR,SAAOK,KAnCC,EAoCbL,SAAOQ,WApCM,EA0CbR,SAAOQ,WA1CM,CAAnB","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '..';\n\nexport const defaultStyle = css`\n  outline: none;\n  padding: 2px 0;\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: none;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.primary_500};\n  }\n\n  &:visited {\n    color: ${COLORS.accent1_500};\n  }\n\n  &:hover,\n  &.hover-state {\n    color: ${COLORS.primary_700};\n    text-decoration-line: underline;\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    background: ${COLORS.primary_800};\n    color: ${COLORS.white};\n  }\n\n\n  &:focus:hover,\n  &:active:hover,\n  &.active-state:hover,\n  &.focus-state:hover{\n    text-decoration-line: none;\n    color: ${COLORS.white};\n    opacity: 0.9;\n  }\n`;\n\nexport const invertedStyle = css`\n  outline: none;\n  padding: 2px 0;\n\n  text-decoration-thickness: 2px;\n  text-decoration-style: solid;\n  text-underline-offset: 2px;\n  text-decoration-line: underline;\n\n  &:link {\n    font-weight: 700;\n    color: ${COLORS.white};\n  }\n\n  &:visited {\n    color: ${COLORS.neutral_100};\n  }\n\n  &:focus,\n  &.focus-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:hover,\n  &.hover-state {\n    text-decoration-line: none;\n  }\n\n  &:active,\n  &.active-state {\n    border-radius: 2px;\n    text-decoration-line: none;\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &:focus:hover,\n  &:active:hover {\n    text-decoration-line: none;\n    color: ${COLORS.neutral_800};\n    opacity: 0.9;\n  }\n`;\n"],"file":"styling.js"}

package/dist/js/InputFields/Checkbox.js

@@ -0,0 +1,119 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _styles = require("../styles");
+
+var _types = require("../types");
+
+var _typography = require("../styles/typography");
+
+var _templateObject;
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var StyledCheckBox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n\n  color: ", ";\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ", "\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    outline: none;\n\n    .checkbox-icon {\n      background-color: ", ";\n      box-shadow: 0 0 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ", ";\n      box-shadow: none;\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.readonly{\n    cursor: inherit;\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n  \n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon{\n      background-color: ", ";\n    }\n\n    .checkbox-icon svg {\n      color: ", ";\n    }\n  }\n"])), function (props) {
+  return props.margin ? "margin: ".concat(props.margin, ";") : '';
+}, _styles.COLORS.black, function (props) {
+  return props.selected ? _styles.COLORS.primary_500 : props.showWarning ? _styles.COLORS.warning_400 : _styles.COLORS.neutral_600;
+}, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.white, _styles.COLORS.primary_500, _styles.COLORS.neutral_600, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.neutral_300, _styles.COLORS.white, _styles.COLORS.neutral_300);
+
+var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _size;
+
+  var id = _ref.id,
+      selected = _ref.selected,
+      select = _ref.select,
+      label = _ref.label,
+      showWarning = _ref.showWarning,
+      iconPointerEventsTransparent = _ref.iconPointerEventsTransparent,
+      disabled = _ref.disabled,
+      margin = _ref.margin,
+      size = _ref.size,
+      semiSelected = _ref.semiSelected,
+      children = _ref.children,
+      readonly = _ref.readonly;
+
+  var onKeyPress = function onKeyPress(e) {
+    if (e.keyCode === 13 && !disabled && !readonly) {
+      select && select(!selected);
+    }
+  };
+
+  var handleClick = function handleClick() {
+    if (disabled || readonly) {
+      return;
+    }
+
+    select && select(!selected);
+  };
+
+  size = (_size = size) !== null && _size !== void 0 ? _size : _types.Size.Medium;
+  return /*#__PURE__*/React.createElement(StyledCheckBox, {
+    key: id,
+    ref: ref,
+    disabled: disabled,
+    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(readonly ? ' readonly' : ''),
+    selected: selected,
+    tabIndex: disabled || readonly ? -1 : 0,
+    showWarning: showWarning,
+    margin: margin,
+    onClick: handleClick,
+    onKeyDown: onKeyPress,
+    onMouseDown: function onMouseDown(e) {
+      return e.preventDefault();
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: 'checkbox-icon'
+  }, selected ? /*#__PURE__*/React.createElement(_SystemIcons.CheckboxOn, {
+    className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+    size: "24px"
+  }) : semiSelected ? /*#__PURE__*/React.createElement(_SystemIcons.CheckboxSemi, {
+    className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+    size: "24px"
+  }) : /*#__PURE__*/React.createElement(_SystemIcons.CheckboxOff, {
+    className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+    size: "24px"
+  })), label && /*#__PURE__*/React.createElement("label", {
+    className: 'checkbox-label',
+    htmlFor: id
+  }, label), !label && /*#__PURE__*/React.createElement("label", {
+    className: 'checkbox-label',
+    htmlFor: id
+  }, children));
+});
+Checkbox.propTypes = {
+  id: _propTypes.default.string,
+  selected: _propTypes.default.bool.isRequired,
+  select: _propTypes.default.func,
+  label: _propTypes.default.string,
+  showWarning: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  margin: _propTypes.default.string,
+  iconPointerEventsTransparent: _propTypes.default.bool,
+  semiSelected: _propTypes.default.bool,
+  readonly: _propTypes.default.bool
+};
+var _default = Checkbox;
+exports.default = _default;
+//# sourceMappingURL=Checkbox.js.map

package/dist/js/InputFields/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readonly","onKeyPress","e","keyCode","handleClick","Size","Medium","toString","toLowerCase","concat","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    outline: none;\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly{\n    cursor: inherit;\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n  \n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon{\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readonly?: boolean;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            showWarning,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readonly\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readonly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readonly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(readonly ? ' readonly' : '')}\n                    selected={selected}\n                    tabIndex={disabled || readonly ? -1 : 0}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={e => e.preventDefault()}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}