@laerdal/life-react-components 1.4.0 → 1.4.1-dev.11

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Actions","Close","Notification","SwitchApp","MobileActionMenu","MenuSection","MenuSectionList","MenuWrapper","Right","RowLayout","NavLink","useLocation","SwitcherMenuItem","Avatar","AvatarContainer","MobileUserMenu","IconButton","LaerdalLogo","ComponentMStyling","ComponentXSStyling","SwitchButton","span","Bold","neutral_600","BottomPinnedSection","div","neutral_200","FirstRowLayout","BottomRowLayout","SMALL","StyledNavItem","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","showNotificationMenu","setShowNotificationMenu","useState","notificationMenuRef","useRef","userMenuRef","userRef","location","user","notification","fireAction","action","ref","undefined","current","blur","isPressingEnter","e","key","preventDefault","stopPropagation","useEffect","map","no","label","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"}
+{"version":3,"sources":["../../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Actions","Close","Notification","SwitchApp","MobileActionMenu","MenuSection","MenuSectionList","MenuWrapper","Right","RowLayout","NavLink","useLocation","SwitcherMenuItem","Avatar","AvatarContainer","MobileUserMenu","IconButton","LaerdalLogo","ComponentMStyling","ComponentXSStyling","SwitchButton","span","Bold","neutral_600","BottomPinnedSection","div","neutral_200","FirstRowLayout","BottomRowLayout","SMALL","StyledNavItem","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","useState","showNotificationMenu","setShowNotificationMenu","notificationMenuRef","useRef","userMenuRef","userRef","location","user","notification","fireAction","action","ref","undefined","current","blur","isPressingEnter","e","key","preventDefault","stopPropagation","useEffect","map","no","exact","to","onClick","label","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/esm/HyperLink/HyperLink.js

@@ -1,34 +1,39 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-const _excluded = ["children", "target", "variant"];
+var _excluded = ["children", "target", "variant"];
 
-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); }
+var _templateObject;
 
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import * as React from 'react';
 import styled from 'styled-components';
 import { defaultStyle, invertedStyle } from './styling';
-const StyledLink = styled.a`
-  cursor: pointer;
-  ${props => props.variant === 'inverted' ? invertedStyle : defaultStyle}
-  ${props => props.margin ? `margin: ${props.margin};` : ''}
-`;
+import { jsx as _jsx } from "react/jsx-runtime";
+var StyledLink = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  ", "\n  ", "\n"])), function (props) {
+  return props.variant === 'inverted' ? invertedStyle : defaultStyle;
+}, function (props) {
+  return props.margin ? "margin: ".concat(props.margin, ";") : '';
+});
 
-const HyperLink = _ref => {
-  let {
-    children,
-    target = '_blank',
-    variant = 'default'
-  } = _ref,
+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, {
+  return /*#__PURE__*/_jsx(StyledLink, _objectSpread(_objectSpread({}, props), {}, {
     variant: variant,
     target: target,
-    rel: "noopener noreferrer"
-  }), children);
+    rel: "noopener noreferrer",
+    children: children
+  }));
 };
 
 HyperLink.propTypes = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/HyperLink/HyperLink.tsx"],"names":["React","styled","defaultStyle","invertedStyle","StyledLink","a","props","variant","margin","HyperLink","children","target","id","href","disabled","className"],"mappings":";;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,YAAT,EAAuBC,aAAvB,QAA4C,WAA5C;AAEA,MAAMC,UAAU,GAAGH,MAAM,CAACI,CAGvB;AACH;AACA,IAAKC,KAAD,IAAYA,KAAK,CAACC,OAAN,KAAkB,UAAlB,GAA+BJ,aAA/B,GAA+CD,YAAc;AAC7E,IAAKI,KAAD,IAAYA,KAAK,CAACE,MAAN,GAAgB,WAAUF,KAAK,CAACE,MAAO,GAAvC,GAA4C,EAAI;AAChE,CAPA;;AAmBA,MAAMC,SAAkD,GAAG,QAAoF;AAAA,MAAnF;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,MAAM,GAAG,QAArB;AAA+BJ,IAAAA,OAAO,GAAG;AAAzC,GAAmF;AAAA,MAA5BD,KAA4B;;AAC7I,sBACE,oBAAC,UAAD,eAAgBA,KAAhB;AAAuB,IAAA,OAAO,EAAEC,OAAhC;AAAyC,IAAA,MAAM,EAAEI,MAAjD;AAAyD,IAAA,GAAG,EAAC;AAA7D,MACGD,QADH,CADF;AAKD,CAND;;;AATEE,EAAAA,E;AACAL,EAAAA,O,aAAS,S,EAAY,U;AACrBM,EAAAA,I;AACAC,EAAAA,Q;AACAN,EAAAA,M;AACAE,EAAAA,Q;AACAK,EAAAA,S;;AAWF,eAAeN,SAAf","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"}
+{"version":3,"sources":["../../../src/HyperLink/HyperLink.tsx"],"names":["React","styled","defaultStyle","invertedStyle","StyledLink","a","props","variant","margin","HyperLink","children","target","id","href","disabled","className"],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,YAAT,EAAuBC,aAAvB,QAA4C,WAA5C;;AAEA,IAAMC,UAAU,GAAGH,MAAM,CAACI,CAAV,4GAKZ,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,OAAN,KAAkB,UAAlB,GAA+BJ,aAA/B,GAA+CD,YAA3D;AAAA,CALY,EAMZ,UAACI,KAAD;AAAA,SAAYA,KAAK,CAACE,MAAN,qBAA0BF,KAAK,CAACE,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,0BAApDJ,OAAoD;AAAA,MAApDA,OAAoD,6BAA1C,SAA0C;AAAA,MAA5BD,KAA4B;;AAC7I,sBACE,KAAC,UAAD,kCAAgBA,KAAhB;AAAuB,IAAA,OAAO,EAAEC,OAAhC;AAAyC,IAAA,MAAM,EAAEI,MAAjD;AAAyD,IAAA,GAAG,EAAC,qBAA7D;AAAA,cACGD;AADH,KADF;AAKD,CAND;;;AATEE,EAAAA,E;AACAL,EAAAA,O,aAAS,S,EAAY,U;AACrBM,EAAAA,I;AACAC,EAAAA,Q;AACAN,EAAAA,M;AACAE,EAAAA,Q;AACAK,EAAAA,S;;AAWF,eAAeN,SAAf","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/esm/HyperLink/styling.js

@@ -1,96 +1,9 @@
-import { css } from 'styled-components';
-import { COLORS } from '..';
-export const defaultStyle = css`
-  outline: none;
-  padding: 2px 0;
-  text-decoration-thickness: 2px;
-  text-decoration-style: solid;
-  text-underline-offset: 2px;
-  text-decoration-line: none;
-
-  &:link {
-    font-weight: 700;
-    color: ${COLORS.primary_500};
-  }
-
-  &:visited {
-    color: ${COLORS.accent1_500};
-  }
-
-  &:hover,
-  &.hover-state {
-    color: ${COLORS.primary_700};
-    text-decoration-line: underline;
-  }
-
-  &:focus,
-  &.focus-state {
-    border-radius: 2px;
-    background: ${COLORS.primary_800};
-    color: ${COLORS.white};
-  }
-
-  &:active,
-  &.active-state {
-    border-radius: 2px;
-    background: ${COLORS.primary_800};
-    color: ${COLORS.white};
-  }
-
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 
-  &:focus:hover,
-  &:active:hover,
-  &.active-state:hover,
-  &.focus-state:hover{
-    text-decoration-line: none;
-    color: ${COLORS.white};
-    opacity: 0.9;
-  }
-`;
-export const invertedStyle = css`
-  outline: none;
-  padding: 2px 0;
+var _templateObject, _templateObject2;
 
-  text-decoration-thickness: 2px;
-  text-decoration-style: solid;
-  text-underline-offset: 2px;
-  text-decoration-line: underline;
-
-  &:link {
-    font-weight: 700;
-    color: ${COLORS.white};
-  }
-
-  &:visited {
-    color: ${COLORS.neutral_100};
-  }
-
-  &:focus,
-  &.focus-state {
-    border-radius: 2px;
-    text-decoration-line: none;
-    background: ${COLORS.white};
-    color: ${COLORS.neutral_800};
-  }
-
-  &:hover,
-  &.hover-state {
-    text-decoration-line: none;
-  }
-
-  &:active,
-  &.active-state {
-    border-radius: 2px;
-    text-decoration-line: none;
-    background: ${COLORS.white};
-    color: ${COLORS.neutral_800};
-  }
-
-  &:focus:hover,
-  &:active:hover {
-    text-decoration-line: none;
-    color: ${COLORS.neutral_800};
-    opacity: 0.9;
-  }
-`;
+import { css } from 'styled-components';
+import { COLORS } from '..';
+export var defaultStyle = 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);
+export var invertedStyle = 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);
 //# sourceMappingURL=styling.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/HyperLink/styling.ts"],"names":["css","COLORS","defaultStyle","primary_500","accent1_500","primary_700","primary_800","white","invertedStyle","neutral_100","neutral_800"],"mappings":"AAAA,SAASA,GAAT,QAAoB,mBAApB;AACA,SAASC,MAAT,QAAuB,IAAvB;AAEA,OAAO,MAAMC,YAAY,GAAGF,GAAI;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,MAAM,CAACE,WAAY;AAChC;AACA;AACA;AACA,aAAaF,MAAM,CAACG,WAAY;AAChC;AACA;AACA;AACA;AACA,aAAaH,MAAM,CAACI,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBJ,MAAM,CAACK,WAAY;AACrC,aAAaL,MAAM,CAACM,KAAM;AAC1B;AACA;AACA;AACA;AACA;AACA,kBAAkBN,MAAM,CAACK,WAAY;AACrC,aAAaL,MAAM,CAACM,KAAM;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaN,MAAM,CAACM,KAAM;AAC1B;AACA;AACA,CA9CO;AAgDP,OAAO,MAAMC,aAAa,GAAGR,GAAI;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,MAAM,CAACM,KAAM;AAC1B;AACA;AACA;AACA,aAAaN,MAAM,CAACQ,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBR,MAAM,CAACM,KAAM;AAC/B,aAAaN,MAAM,CAACS,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBT,MAAM,CAACM,KAAM;AAC/B,aAAaN,MAAM,CAACS,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA,aAAaT,MAAM,CAACS,WAAY;AAChC;AACA;AACA,CA7CO","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"}
+{"version":3,"sources":["../../../src/HyperLink/styling.ts"],"names":["css","COLORS","defaultStyle","primary_500","accent1_500","primary_700","primary_800","white","invertedStyle","neutral_100","neutral_800"],"mappings":";;;;AAAA,SAASA,GAAT,QAAoB,mBAApB;AACA,SAASC,MAAT,QAAuB,IAAvB;AAEA,OAAO,IAAMC,YAAY,GAAGF,GAAH,wyBAUZC,MAAM,CAACE,WAVK,EAcZF,MAAM,CAACG,WAdK,EAmBZH,MAAM,CAACI,WAnBK,EA0BPJ,MAAM,CAACK,WA1BA,EA2BZL,MAAM,CAACM,KA3BK,EAiCPN,MAAM,CAACK,WAjCA,EAkCZL,MAAM,CAACM,KAlCK,EA2CZN,MAAM,CAACM,KA3CK,CAAlB;AAgDP,OAAO,IAAMC,aAAa,GAAGR,GAAH,0yBAWbC,MAAM,CAACM,KAXM,EAebN,MAAM,CAACQ,WAfM,EAsBRR,MAAM,CAACM,KAtBC,EAuBbN,MAAM,CAACS,WAvBM,EAmCRT,MAAM,CAACM,KAnCC,EAoCbN,MAAM,CAACS,WApCM,EA0CbT,MAAM,CAACS,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/esm/InputFields/Checkbox.js

@@ -1,149 +1,44 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
+
+var _templateObject;
+
 import * as React from 'react';
 import styled from 'styled-components';
 import { CheckboxOff, CheckboxOn, CheckboxSemi } from '../icons/systemicons/SystemIcons';
 import { COLORS, ComponentTextStyle } from '../styles';
 import { Size } from '../types';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling } from '../styles/typography';
-const StyledCheckBox = styled.div`
-  display: flex;
-  width: 100%;
-  min-height: 48px;
-  min-width: 48px;
-
-  ${props => props.margin ? `margin: ${props.margin};` : ''}
-  cursor: pointer;
-
-  color: ${COLORS.black};
-
-  .pointerTransparent {
-    pointer-events: none;
-  }
-
-  .checkbox-icon {
-    margin: 6px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    height: 36px;
-    min-width: 36px;
-    border-radius: 50%;
-
-    svg {
-      color: ${props => props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600};
-    }
-  }
-
-  .checkbox-label {
-    user-select: none;
-    cursor: inherit;
-  }
-
-  &.small {
-    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}
-    .checkbox-label {
-      padding-top: 14px;
-    }
-  }
-
-  &.medium {
-    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
-    .checkbox-label {
-      padding-top: 12px;
-    }
-  }
-
-  &.large {
-    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}
-    .checkbox-label {
-      padding-top: 12px;
-    }
-  }
-
-  &:not(.disabled):not(.readonly):focus {
-    outline: none;
-
-    .checkbox-icon {
-      background-color: ${COLORS.white};
-      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
-
-      svg {
-        color: ${COLORS.neutral_600};
-      }
-    }
-  }
-
-  &:not(.disabled):not(.readonly):hover {
-    .checkbox-icon {
-      background-color: ${COLORS.primary_20};
-
-      svg {
-        color: ${COLORS.primary_700};
-      }
-    }
-  }
-
-  &:not(.disabled):not(.readonly):active {
-    .checkbox-icon {
-      background: ${COLORS.primary_100};
-      box-shadow: none;
-
-      svg {
-        color: ${COLORS.primary_800};
-      }
-    }
-  }
-
-  &.readonly{
-    cursor: inherit;
-    .checkbox-icon,
-    .checkbox-label {
-      pointer-events: none;
-    }
-  }
-  
-  &.disabled {
-    box-shadow: none;
-    cursor: not-allowed;
-
-    color: ${COLORS.neutral_300};
-
-    .checkbox-icon,
-    .checkbox-label {
-      pointer-events: none;
-    }
-
-    .checkbox-icon{
-      background-color: ${COLORS.white};
-    }
-
-    .checkbox-icon svg {
-      color: ${COLORS.neutral_300};
-    }
-  }
-`;
-const Checkbox = /*#__PURE__*/React.forwardRef(({
-  id,
-  selected,
-  select,
-  label,
-  showWarning,
-  iconPointerEventsTransparent,
-  disabled,
-  margin,
-  size,
-  semiSelected,
-  children,
-  readonly
-}, ref) => {
-  const onKeyPress = e => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var StyledCheckBox = styled.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, ";") : '';
+}, COLORS.black, function (props) {
+  return props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600;
+}, ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentLStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.white, COLORS.primary_500, COLORS.neutral_600, COLORS.primary_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, COLORS.neutral_300, COLORS.white, 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);
     }
   };
 
-  const handleClick = () => {
+  var handleClick = function handleClick() {
     if (disabled || readonly) {
       return;
     }
@@ -151,9 +46,8 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
     select && select(!selected);
   };
 
-  size = size ?? Size.Medium;
-  return /*#__PURE__*/React.createElement(StyledCheckBox, {
-    key: id,
+  size = (_size = size) !== null && _size !== void 0 ? _size : Size.Medium;
+  return /*#__PURE__*/_jsxs(StyledCheckBox, {
     ref: ref,
     disabled: disabled,
     className: size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(readonly ? ' readonly' : ''),
@@ -163,26 +57,32 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
     margin: margin,
     onClick: handleClick,
     onKeyDown: onKeyPress,
-    onMouseDown: e => e.preventDefault()
-  }, /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: 'checkbox-icon'
-  }, selected ? /*#__PURE__*/React.createElement(CheckboxOn, {
-    className: iconPointerEventsTransparent ? "pointerTransparent" : "",
-    size: "24px"
-  }) : semiSelected ? /*#__PURE__*/React.createElement(CheckboxSemi, {
-    className: iconPointerEventsTransparent ? "pointerTransparent" : "",
-    size: "24px"
-  }) : /*#__PURE__*/React.createElement(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));
+    onMouseDown: function onMouseDown(e) {
+      return e.preventDefault();
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      id: id,
+      className: 'checkbox-icon',
+      children: selected ? /*#__PURE__*/_jsx(CheckboxOn, {
+        className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+        size: "24px"
+      }) : semiSelected ? /*#__PURE__*/_jsx(CheckboxSemi, {
+        className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+        size: "24px"
+      }) : /*#__PURE__*/_jsx(CheckboxOff, {
+        className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+        size: "24px"
+      })
+    }), label && /*#__PURE__*/_jsx("label", {
+      className: 'checkbox-label',
+      htmlFor: id,
+      children: label
+    }), !label && /*#__PURE__*/_jsx("label", {
+      className: 'checkbox-label',
+      htmlFor: id,
+      children: children
+    })]
+  }, id);
 });
 Checkbox.propTypes = {
   id: _pt.string,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["React","styled","CheckboxOff","CheckboxOn","CheckboxSemi","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","StyledCheckBox","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","forwardRef","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readonly","ref","onKeyPress","e","keyCode","handleClick","Medium","toString","toLowerCase","concat","preventDefault"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,WAAR,EAAqBC,UAArB,EAAiCC,YAAjC,QAAoD,kCAApD;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,EAA8CC,iBAA9C,QAAsE,sBAAtE;AAEA,MAAMC,cAAc,GAAGV,MAAM,CAACW,GAAwF;AACtH;AACA;AACA;AACA;AACA;AACA,IAAIC,KAAK,IAAKA,KAAK,CAACC,MAAN,GAAgB,WAAUD,KAAK,CAACC,MAAO,GAAvC,GAA4C,EAAI;AAC9D;AACA;AACA,WAAWT,MAAM,CAACU,KAAM;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeF,KAAK,IAAKA,KAAK,CAACG,QAAN,GAAiBX,MAAM,CAACY,WAAxB,GAAsCJ,KAAK,CAACK,WAAN,GAAoBb,MAAM,CAACc,WAA3B,GAAyCd,MAAM,CAACe,WAAa;AAC5H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMV,iBAAiB,CAACJ,kBAAkB,CAACe,OAApB,EAA6BhB,MAAM,CAACU,KAApC,CAA2C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA,MAAMN,iBAAiB,CAACH,kBAAkB,CAACe,OAApB,EAA6BhB,MAAM,CAACU,KAApC,CAA2C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA,MAAMP,iBAAiB,CAACF,kBAAkB,CAACe,OAApB,EAA6BhB,MAAM,CAACU,KAApC,CAA2C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BV,MAAM,CAACiB,KAAM;AACvC,4BAA4BjB,MAAM,CAACY,WAAY;AAC/C;AACA;AACA,iBAAiBZ,MAAM,CAACe,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0Bf,MAAM,CAACkB,UAAW;AAC5C;AACA;AACA,iBAAiBlB,MAAM,CAACmB,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoBnB,MAAM,CAACoB,WAAY;AACvC;AACA;AACA;AACA,iBAAiBpB,MAAM,CAACqB,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAarB,MAAM,CAACsB,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BtB,MAAM,CAACiB,KAAM;AACvC;AACA;AACA;AACA,eAAejB,MAAM,CAACsB,WAAY;AAClC;AACA;AACA,CArHA;AAqIA,MAAMC,QAAQ,gBAAG5B,KAAK,CAAC6B,UAAN,CAAwC,CAAC;AACEC,EAAAA,EADF;AAEEd,EAAAA,QAFF;AAGEe,EAAAA,MAHF;AAIEC,EAAAA,KAJF;AAKEd,EAAAA,WALF;AAMEe,EAAAA,4BANF;AAOEC,EAAAA,QAPF;AAQEpB,EAAAA,MARF;AASEqB,EAAAA,IATF;AAUEC,EAAAA,YAVF;AAWEC,EAAAA,QAXF;AAYEC,EAAAA;AAZF,CAAD,EAaIC,GAbJ,KAaY;AACnE,QAAMC,UAAU,GAAIC,CAAD,IAAY;AAC7B,QAAIA,CAAC,CAACC,OAAF,KAAc,EAAd,IAAoB,CAACR,QAArB,IAAiC,CAACI,QAAtC,EAAgD;AAC9CP,MAAAA,MAAM,IAAIA,MAAM,CAAC,CAACf,QAAF,CAAhB;AACD;AACF,GAJD;;AAMA,QAAM2B,WAAW,GAAG,MAAM;AACxB,QAAIT,QAAQ,IAAII,QAAhB,EAA0B;AACxB;AACD;;AACDP,IAAAA,MAAM,IAAIA,MAAM,CAAC,CAACf,QAAF,CAAhB;AACD,GALD;;AAOAmB,EAAAA,IAAI,GAAGA,IAAI,IAAI5B,IAAI,CAACqC,MAApB;AAEA,sBACE,oBAAC,cAAD;AAAgB,IAAA,GAAG,EAAEd,EAArB;AACgB,IAAA,GAAG,EAAES,GADrB;AAEgB,IAAA,QAAQ,EAAEL,QAF1B;AAGgB,IAAA,SAAS,EAAEC,IAAI,CAACU,QAAL,GAAgBC,WAAhB,GAA8BC,MAA9B,CAAqCb,QAAQ,GAAG,WAAH,GAAiB,EAA9D,EAAkEa,MAAlE,CAAyET,QAAQ,GAAG,WAAH,GAAiB,EAAlG,CAH3B;AAIgB,IAAA,QAAQ,EAAEtB,QAJ1B;AAKgB,IAAA,QAAQ,EAAEkB,QAAQ,IAAII,QAAZ,GAAuB,CAAC,CAAxB,GAA4B,CALtD;AAMgB,IAAA,WAAW,EAAEpB,WAN7B;AAOgB,IAAA,MAAM,EAAEJ,MAPxB;AAQgB,IAAA,OAAO,EAAE6B,WARzB;AASgB,IAAA,SAAS,EAAEH,UAT3B;AAUgB,IAAA,WAAW,EAAEC,CAAC,IAAIA,CAAC,CAACO,cAAF;AAVlC,kBAWE;AAAK,IAAA,EAAE,EAAElB,EAAT;AAAa,IAAA,SAAS,EAAE;AAAxB,KAEId,QAAQ,gBACJ,oBAAC,UAAD;AAAY,IAAA,SAAS,EAAEiB,4BAA4B,GAAG,oBAAH,GAA0B,EAA7E;AAAiF,IAAA,IAAI,EAAC;AAAtF,IADI,GAEJG,YAAY,gBACV,oBAAC,YAAD;AAAc,IAAA,SAAS,EAAEH,4BAA4B,GAAG,oBAAH,GAA0B,EAA/E;AAAmF,IAAA,IAAI,EAAC;AAAxF,IADU,gBAEV,oBAAC,WAAD;AAAa,IAAA,SAAS,EAAEA,4BAA4B,GAAG,oBAAH,GAA0B,EAA9E;AAAkF,IAAA,IAAI,EAAC;AAAvF,IANV,CAXF,EAqBID,KAAK,iBAEH;AAAO,IAAA,SAAS,EAAE,gBAAlB;AACO,IAAA,OAAO,EAAEF;AADhB,KAEGE,KAFH,CAvBN,EA8BI,CAACA,KAAD,iBACA;AAAO,IAAA,SAAS,EAAE,gBAAlB;AACO,IAAA,OAAO,EAAEF;AADhB,KAEGO,QAFH,CA/BJ,CADF;AAuCD,CApEgB,CAAjB;;AAbEP,EAAAA,E;AACAd,EAAAA,Q;AACAe,EAAAA,M;AACAC,EAAAA,K;AACAd,EAAAA,W;AACAgB,EAAAA,Q;AACApB,EAAAA,M;AAEAmB,EAAAA,4B;AACAG,EAAAA,Y;AACAE,EAAAA,Q;;AAyEF,eAAeV,QAAf","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"}
+{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["React","styled","CheckboxOff","CheckboxOn","CheckboxSemi","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","StyledCheckBox","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readonly","onKeyPress","e","keyCode","handleClick","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"}