@laerdal/life-react-components 1.7.0 → 1.8.0

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

@@ -1 +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","NavLink","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.cjs"}
+{"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","focusStyles","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","NavLink","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, focusStyles} 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    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n    svg path {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:focus:not(.disabled) {\n    ${focusStyles}\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.cjs"}

package/dist/GlobalNavigationBar/mobile/MobileMenu.js

@@ -6,7 +6,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 import * as React from 'react';
 import styled from 'styled-components';
-import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles';
+import { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles';
 import Actions from '../Actions';
 import { Close, Notification, SwitchApp } from '../../icons/systemicons/SystemIcons';
 import MobileActionMenu from './MobileActionMenu';
@@ -25,7 +25,7 @@ var SwitchButton = styled.span(_templateObject || (_templateObject = _taggedTemp
 var BottomPinnedSection = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  width: 100%;\n  bottom: 0;\n  border-top: 1px solid ", ";\n"])), COLORS.neutral_200);
 var FirstRowLayout = styled(RowLayout)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-top: 10px;\n  padding: 12px;\n"])));
 var BottomRowLayout = styled(RowLayout)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: 8px auto 0 0;\n  width: 95%;\n  height: 48px;\n  ", " {\n    height: 56px;\n  }\n"])), BREAKPOINTS.SMALL);
-var StyledNavItem = styled(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"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.primary_500, COLORS.primary_800, COLORS.primary_800, COLORS.neutral_300, COLORS.neutral_100, COLORS.primary_600, COLORS.primary_20, COLORS.primary_600, COLORS.primary_800, COLORS.primary_100, COLORS.primary_500, COLORS.primary_800, COLORS.primary_500);
+var StyledNavItem = styled(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    &:after {\n      background-color: ", ";\n    }\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &:focus:not(.disabled) {\n    ", "\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.primary_500, COLORS.primary_800, COLORS.primary_800, COLORS.neutral_300, COLORS.neutral_100, COLORS.primary_600, COLORS.primary_20, COLORS.primary_600, COLORS.primary_800, COLORS.primary_100, COLORS.primary_500, COLORS.primary_800, focusStyles);
 var SwitcherButton = styled.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) {

package/dist/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","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"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","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, focusStyles} 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    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n    svg path {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:focus:not(.disabled) {\n    ${focusStyles}\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/HyperLink/styling.cjs

@@ -15,7 +15,7 @@ var _ = require("..");
 
 var _templateObject, _templateObject2;
 
-var defaultStyle = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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.primary_400, _.COLORS.primary_700, _.COLORS.primary_800, _.COLORS.white, _.COLORS.primary_800, _.COLORS.white, _.COLORS.white);
+var defaultStyle = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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_600, _.COLORS.primary_800, _.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 = (0, _taggedTemplateLiteral2.default)(["\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;

package/dist/HyperLink/styling.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/HyperLink/styling.ts"],"names":["defaultStyle","css","COLORS","primary_500","primary_400","primary_700","primary_800","white","invertedStyle","neutral_100","neutral_800"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAEO,IAAMA,YAAY,OAAGC,qBAAH,uzBAUZC,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,yzBAWbC,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.primary_400};\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.cjs"}
+{"version":3,"sources":["../../src/HyperLink/styling.ts"],"names":["defaultStyle","css","COLORS","primary_600","primary_800","primary_700","white","invertedStyle","neutral_100","neutral_800"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAEO,IAAMA,YAAY,OAAGC,qBAAH,uzBAUZC,SAAOC,WAVK,EAcZD,SAAOE,WAdK,EAmBZF,SAAOG,WAnBK,EA0BPH,SAAOE,WA1BA,EA2BZF,SAAOI,KA3BK,EAiCPJ,SAAOE,WAjCA,EAkCZF,SAAOI,KAlCK,EA2CZJ,SAAOI,KA3CK,CAAlB;;AAgDA,IAAMC,aAAa,OAAGN,qBAAH,yzBAWbC,SAAOI,KAXM,EAebJ,SAAOM,WAfM,EAsBRN,SAAOI,KAtBC,EAuBbJ,SAAOO,WAvBM,EAmCRP,SAAOI,KAnCC,EAoCbJ,SAAOO,WApCM,EA0CbP,SAAOO,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_600};\n  }\n\n  &:visited {\n    color: ${COLORS.primary_800};\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.cjs"}

package/dist/HyperLink/styling.js

@@ -4,6 +4,6 @@ var _templateObject, _templateObject2;
 
 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.primary_400, COLORS.primary_700, COLORS.primary_800, COLORS.white, COLORS.primary_800, COLORS.white, COLORS.white);
+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_600, COLORS.primary_800, 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/HyperLink/styling.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/HyperLink/styling.ts"],"names":["css","COLORS","defaultStyle","primary_500","primary_400","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.primary_400};\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_600","primary_800","primary_700","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,CAACG,WA1BA,EA2BZH,MAAM,CAACK,KA3BK,EAiCPL,MAAM,CAACG,WAjCA,EAkCZH,MAAM,CAACK,KAlCK,EA2CZL,MAAM,CAACK,KA3CK,CAAlB;AAgDP,OAAO,IAAMC,aAAa,GAAGP,GAAH,0yBAWbC,MAAM,CAACK,KAXM,EAebL,MAAM,CAACO,WAfM,EAsBRP,MAAM,CAACK,KAtBC,EAuBbL,MAAM,CAACQ,WAvBM,EAmCRR,MAAM,CAACK,KAnCC,EAoCbL,MAAM,CAACQ,WApCM,EA0CbR,MAAM,CAACQ,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_600};\n  }\n\n  &:visited {\n    color: ${COLORS.primary_800};\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/Image/ImageWithFallbacks.cjs

@@ -104,7 +104,9 @@ var ImageWithFallbacks = /*#__PURE__*/function (_React$Component) {
             return _this2.onLoad();
           },
           alt: this.props.alt
-        }), this.props.loader && !this.state.loaded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.LoadingIndicator, {})]
+        }), this.props.loader && !this.state.loaded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.LoadingIndicator, {
+          id: "imgWithFallbackLoadingIndicator"
+        })]
       });
     }
   }]);

package/dist/Image/ImageWithFallbacks.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Image/ImageWithFallbacks.tsx"],"names":["ImageWithFallbacks","props","state","src","fallbackIndex","fallbacks","split","loaded","prevProps","setState","length","onError","onLoad","alt","loader","React","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;;;;;;;;;;;IAgBMA,kB;;;;;AACJ,8BAAYC,KAAZ,EAA4C;AAAA;;AAAA;AAC1C,8BAAMA,KAAN;AACA,UAAKC,KAAL,GAAa;AACXC,MAAAA,GAAG,EAAEF,KAAK,CAACE,GADA;AAEXC,MAAAA,aAAa,EAAE,CAFJ;AAGXC,MAAAA,SAAS,EAAE,MAAKJ,KAAL,CAAWI,SAAX,CAAqBC,KAArB,CAA2B,GAA3B,CAHA;AAIXC,MAAAA,MAAM,EAAE;AAJG,KAAb;AAF0C;AAQ3C;;;;WACD,4BAAmBC,SAAnB,EAAuD;AACrD,UAAIA,SAAS,CAACL,GAAV,KAAkB,KAAKF,KAAL,CAAWE,GAA7B,IAAoCK,SAAS,CAACH,SAAV,KAAwB,KAAKJ,KAAL,CAAWI,SAA3E,EAAsF;AACpF,aAAKI,QAAL,CAAc;AACZN,UAAAA,GAAG,EAAE,KAAKF,KAAL,CAAWE,GADJ;AAEZC,UAAAA,aAAa,EAAE,CAFH;AAGZC,UAAAA,SAAS,EAAE,KAAKJ,KAAL,CAAWI,SAAX,CAAqBC,KAArB,CAA2B,GAA3B,CAHC;AAIZC,UAAAA,MAAM,EAAE;AAJI,SAAd;AAMD;AACF;;;WACD,mBAAU;AACR,UAAI,KAAKL,KAAL,CAAWE,aAAX,GAA2B,KAAKF,KAAL,CAAWG,SAAX,CAAqBK,MAApD,EAA4D;AAC1D;AACD;;AACD,WAAKD,QAAL,CAAc;AACZN,QAAAA,GAAG,EAAE,KAAKD,KAAL,CAAWG,SAAX,CAAqB,KAAKH,KAAL,CAAWE,aAAhC,CADO;AAEZA,QAAAA,aAAa,EAAE,KAAKF,KAAL,CAAWE,aAAX,GAA2B,CAF9B;AAGZC,QAAAA,SAAS,EAAE,KAAKH,KAAL,CAAWG;AAHV,OAAd;AAKD;;;WACD,kBAAS;AACP,WAAKI,QAAL,iCAAmB,KAAKP,KAAxB;AAA+BK,QAAAA,MAAM,EAAE;AAAvC;AACD;;;WACD,kBAAS;AAAA;;AACP,0BACE;AAAA,gCACE;AAAK,UAAA,GAAG,EAAE,KAAKL,KAAL,CAAWC,GAArB;AAA0B,UAAA,OAAO,EAAE;AAAA,mBAAM,MAAI,CAACQ,OAAL,EAAN;AAAA,WAAnC;AAAyD,UAAA,QAAQ,EAAE;AAAA,mBAAM,MAAI,CAACC,MAAL,EAAN;AAAA,WAAnE;AAAwF,UAAA,MAAM,EAAE;AAAA,mBAAM,MAAI,CAACA,MAAL,EAAN;AAAA,WAAhG;AAAqH,UAAA,GAAG,EAAE,KAAKX,KAAL,CAAWY;AAArI,UADF,EAEG,KAAKZ,KAAL,CAAWa,MAAX,IAAqB,CAAC,KAAKZ,KAAL,CAAWK,MAAjC,iBAA2C,qBAAC,kBAAD,KAF9C;AAAA,QADF;AAMD;;;EAxC8BQ,eAAMC,S;;8BAAjChB,kB;AAbJK,EAAAA,S;AACAF,EAAAA,G;AACAU,EAAAA,G;AACAC,EAAAA,M;;eAqDad,kB","sourcesContent":["import { LoadingIndicator } from '..';\nimport React from 'react';\n\nexport interface ImageWithFallbacksProps {\n  fallbacks: string;\n  src: string;\n  alt: string;\n  loader: boolean;\n}\n\ntype ImageWithFallbacksState = {\n  src: string;\n  fallbackIndex: number;\n  fallbacks: string[];\n  loaded: boolean;\n};\n\nclass ImageWithFallbacks extends React.Component<ImageWithFallbacksProps, ImageWithFallbacksState> {\n  constructor(props: ImageWithFallbacksProps) {\n    super(props);\n    this.state = {\n      src: props.src,\n      fallbackIndex: 0,\n      fallbacks: this.props.fallbacks.split(','),\n      loaded: false,\n    };\n  }\n  componentDidUpdate(prevProps: ImageWithFallbacksProps) {\n    if (prevProps.src !== this.props.src && prevProps.fallbacks !== this.props.fallbacks) {\n      this.setState({\n        src: this.props.src,\n        fallbackIndex: 0,\n        fallbacks: this.props.fallbacks.split(','),\n        loaded: false,\n      });\n    }\n  }\n  onError() {\n    if (this.state.fallbackIndex > this.state.fallbacks.length) {\n      return;\n    }\n    this.setState({\n      src: this.state.fallbacks[this.state.fallbackIndex],\n      fallbackIndex: this.state.fallbackIndex + 1,\n      fallbacks: this.state.fallbacks,\n    });\n  }\n  onLoad() {\n    this.setState({ ...this.state, loaded: true });\n  }\n  render() {\n    return (\n      <>\n        <img src={this.state.src} onError={() => this.onError()} onChange={() => this.onLoad()} onLoad={() => this.onLoad()} alt={this.props.alt} />\n        {this.props.loader && !this.state.loaded && <LoadingIndicator></LoadingIndicator>}\n      </>\n    );\n  }\n}\n\nexport default ImageWithFallbacks;\n"],"file":"ImageWithFallbacks.cjs"}
+{"version":3,"sources":["../../src/Image/ImageWithFallbacks.tsx"],"names":["ImageWithFallbacks","props","state","src","fallbackIndex","fallbacks","split","loaded","prevProps","setState","length","onError","onLoad","alt","loader","React","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;;;;;;;;;;;IAgBMA,kB;;;;;AACJ,8BAAYC,KAAZ,EAA4C;AAAA;;AAAA;AAC1C,8BAAMA,KAAN;AACA,UAAKC,KAAL,GAAa;AACXC,MAAAA,GAAG,EAAEF,KAAK,CAACE,GADA;AAEXC,MAAAA,aAAa,EAAE,CAFJ;AAGXC,MAAAA,SAAS,EAAE,MAAKJ,KAAL,CAAWI,SAAX,CAAqBC,KAArB,CAA2B,GAA3B,CAHA;AAIXC,MAAAA,MAAM,EAAE;AAJG,KAAb;AAF0C;AAQ3C;;;;WACD,4BAAmBC,SAAnB,EAAuD;AACrD,UAAIA,SAAS,CAACL,GAAV,KAAkB,KAAKF,KAAL,CAAWE,GAA7B,IAAoCK,SAAS,CAACH,SAAV,KAAwB,KAAKJ,KAAL,CAAWI,SAA3E,EAAsF;AACpF,aAAKI,QAAL,CAAc;AACZN,UAAAA,GAAG,EAAE,KAAKF,KAAL,CAAWE,GADJ;AAEZC,UAAAA,aAAa,EAAE,CAFH;AAGZC,UAAAA,SAAS,EAAE,KAAKJ,KAAL,CAAWI,SAAX,CAAqBC,KAArB,CAA2B,GAA3B,CAHC;AAIZC,UAAAA,MAAM,EAAE;AAJI,SAAd;AAMD;AACF;;;WACD,mBAAU;AACR,UAAI,KAAKL,KAAL,CAAWE,aAAX,GAA2B,KAAKF,KAAL,CAAWG,SAAX,CAAqBK,MAApD,EAA4D;AAC1D;AACD;;AACD,WAAKD,QAAL,CAAc;AACZN,QAAAA,GAAG,EAAE,KAAKD,KAAL,CAAWG,SAAX,CAAqB,KAAKH,KAAL,CAAWE,aAAhC,CADO;AAEZA,QAAAA,aAAa,EAAE,KAAKF,KAAL,CAAWE,aAAX,GAA2B,CAF9B;AAGZC,QAAAA,SAAS,EAAE,KAAKH,KAAL,CAAWG;AAHV,OAAd;AAKD;;;WACD,kBAAS;AACP,WAAKI,QAAL,iCAAmB,KAAKP,KAAxB;AAA+BK,QAAAA,MAAM,EAAE;AAAvC;AACD;;;WACD,kBAAS;AAAA;;AACP,0BACE;AAAA,gCACE;AAAK,UAAA,GAAG,EAAE,KAAKL,KAAL,CAAWC,GAArB;AAA0B,UAAA,OAAO,EAAE;AAAA,mBAAM,MAAI,CAACQ,OAAL,EAAN;AAAA,WAAnC;AAAyD,UAAA,QAAQ,EAAE;AAAA,mBAAM,MAAI,CAACC,MAAL,EAAN;AAAA,WAAnE;AAAwF,UAAA,MAAM,EAAE;AAAA,mBAAM,MAAI,CAACA,MAAL,EAAN;AAAA,WAAhG;AAAqH,UAAA,GAAG,EAAE,KAAKX,KAAL,CAAWY;AAArI,UADF,EAEG,KAAKZ,KAAL,CAAWa,MAAX,IAAqB,CAAC,KAAKZ,KAAL,CAAWK,MAAjC,iBAA2C,qBAAC,kBAAD;AAAkB,UAAA,EAAE,EAAC;AAArB,UAF9C;AAAA,QADF;AAMD;;;EAxC8BQ,eAAMC,S;;8BAAjChB,kB;AAbJK,EAAAA,S;AACAF,EAAAA,G;AACAU,EAAAA,G;AACAC,EAAAA,M;;eAqDad,kB","sourcesContent":["import { LoadingIndicator } from '..';\nimport React from 'react';\n\nexport interface ImageWithFallbacksProps {\n  fallbacks: string;\n  src: string;\n  alt: string;\n  loader: boolean;\n}\n\ntype ImageWithFallbacksState = {\n  src: string;\n  fallbackIndex: number;\n  fallbacks: string[];\n  loaded: boolean;\n};\n\nclass ImageWithFallbacks extends React.Component<ImageWithFallbacksProps, ImageWithFallbacksState> {\n  constructor(props: ImageWithFallbacksProps) {\n    super(props);\n    this.state = {\n      src: props.src,\n      fallbackIndex: 0,\n      fallbacks: this.props.fallbacks.split(','),\n      loaded: false,\n    };\n  }\n  componentDidUpdate(prevProps: ImageWithFallbacksProps) {\n    if (prevProps.src !== this.props.src && prevProps.fallbacks !== this.props.fallbacks) {\n      this.setState({\n        src: this.props.src,\n        fallbackIndex: 0,\n        fallbacks: this.props.fallbacks.split(','),\n        loaded: false,\n      });\n    }\n  }\n  onError() {\n    if (this.state.fallbackIndex > this.state.fallbacks.length) {\n      return;\n    }\n    this.setState({\n      src: this.state.fallbacks[this.state.fallbackIndex],\n      fallbackIndex: this.state.fallbackIndex + 1,\n      fallbacks: this.state.fallbacks,\n    });\n  }\n  onLoad() {\n    this.setState({ ...this.state, loaded: true });\n  }\n  render() {\n    return (\n      <>\n        <img src={this.state.src} onError={() => this.onError()} onChange={() => this.onLoad()} onLoad={() => this.onLoad()} alt={this.props.alt} />\n        {this.props.loader && !this.state.loaded && <LoadingIndicator id=\"imgWithFallbackLoadingIndicator\"></LoadingIndicator>}\n      </>\n    );\n  }\n}\n\nexport default ImageWithFallbacks;\n"],"file":"ImageWithFallbacks.cjs"}

package/dist/Image/ImageWithFallbacks.js

@@ -90,7 +90,9 @@ var ImageWithFallbacks = /*#__PURE__*/function (_React$Component) {
             return _this2.onLoad();
           },
           alt: this.props.alt
-        }), this.props.loader && !this.state.loaded && /*#__PURE__*/_jsx(LoadingIndicator, {})]
+        }), this.props.loader && !this.state.loaded && /*#__PURE__*/_jsx(LoadingIndicator, {
+          id: "imgWithFallbackLoadingIndicator"
+        })]
       });
     }
   }]);

package/dist/Image/ImageWithFallbacks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Image/ImageWithFallbacks.tsx"],"names":["LoadingIndicator","React","ImageWithFallbacks","props","state","src","fallbackIndex","fallbacks","split","loaded","prevProps","setState","length","onError","onLoad","alt","loader","Component"],"mappings":";;;;;;;;;;;;;;;;AAAA,SAASA,gBAAT,QAAiC,IAAjC;AACA,OAAOC,KAAP,MAAkB,OAAlB;;;;;IAgBMC,kB;;;;;AACJ,8BAAYC,KAAZ,EAA4C;AAAA;;AAAA;;AAC1C,8BAAMA,KAAN;AACA,UAAKC,KAAL,GAAa;AACXC,MAAAA,GAAG,EAAEF,KAAK,CAACE,GADA;AAEXC,MAAAA,aAAa,EAAE,CAFJ;AAGXC,MAAAA,SAAS,EAAE,MAAKJ,KAAL,CAAWI,SAAX,CAAqBC,KAArB,CAA2B,GAA3B,CAHA;AAIXC,MAAAA,MAAM,EAAE;AAJG,KAAb;AAF0C;AAQ3C;;;;WACD,4BAAmBC,SAAnB,EAAuD;AACrD,UAAIA,SAAS,CAACL,GAAV,KAAkB,KAAKF,KAAL,CAAWE,GAA7B,IAAoCK,SAAS,CAACH,SAAV,KAAwB,KAAKJ,KAAL,CAAWI,SAA3E,EAAsF;AACpF,aAAKI,QAAL,CAAc;AACZN,UAAAA,GAAG,EAAE,KAAKF,KAAL,CAAWE,GADJ;AAEZC,UAAAA,aAAa,EAAE,CAFH;AAGZC,UAAAA,SAAS,EAAE,KAAKJ,KAAL,CAAWI,SAAX,CAAqBC,KAArB,CAA2B,GAA3B,CAHC;AAIZC,UAAAA,MAAM,EAAE;AAJI,SAAd;AAMD;AACF;;;WACD,mBAAU;AACR,UAAI,KAAKL,KAAL,CAAWE,aAAX,GAA2B,KAAKF,KAAL,CAAWG,SAAX,CAAqBK,MAApD,EAA4D;AAC1D;AACD;;AACD,WAAKD,QAAL,CAAc;AACZN,QAAAA,GAAG,EAAE,KAAKD,KAAL,CAAWG,SAAX,CAAqB,KAAKH,KAAL,CAAWE,aAAhC,CADO;AAEZA,QAAAA,aAAa,EAAE,KAAKF,KAAL,CAAWE,aAAX,GAA2B,CAF9B;AAGZC,QAAAA,SAAS,EAAE,KAAKH,KAAL,CAAWG;AAHV,OAAd;AAKD;;;WACD,kBAAS;AACP,WAAKI,QAAL,iCAAmB,KAAKP,KAAxB;AAA+BK,QAAAA,MAAM,EAAE;AAAvC;AACD;;;WACD,kBAAS;AAAA;;AACP,0BACE;AAAA,gCACE;AAAK,UAAA,GAAG,EAAE,KAAKL,KAAL,CAAWC,GAArB;AAA0B,UAAA,OAAO,EAAE;AAAA,mBAAM,MAAI,CAACQ,OAAL,EAAN;AAAA,WAAnC;AAAyD,UAAA,QAAQ,EAAE;AAAA,mBAAM,MAAI,CAACC,MAAL,EAAN;AAAA,WAAnE;AAAwF,UAAA,MAAM,EAAE;AAAA,mBAAM,MAAI,CAACA,MAAL,EAAN;AAAA,WAAhG;AAAqH,UAAA,GAAG,EAAE,KAAKX,KAAL,CAAWY;AAArI,UADF,EAEG,KAAKZ,KAAL,CAAWa,MAAX,IAAqB,CAAC,KAAKZ,KAAL,CAAWK,MAAjC,iBAA2C,KAAC,gBAAD,KAF9C;AAAA,QADF;AAMD;;;;EAxC8BR,KAAK,CAACgB,S;;gBAAjCf,kB;AAbJK,EAAAA,S;AACAF,EAAAA,G;AACAU,EAAAA,G;AACAC,EAAAA,M;;;AAqDF,eAAed,kBAAf","sourcesContent":["import { LoadingIndicator } from '..';\nimport React from 'react';\n\nexport interface ImageWithFallbacksProps {\n  fallbacks: string;\n  src: string;\n  alt: string;\n  loader: boolean;\n}\n\ntype ImageWithFallbacksState = {\n  src: string;\n  fallbackIndex: number;\n  fallbacks: string[];\n  loaded: boolean;\n};\n\nclass ImageWithFallbacks extends React.Component<ImageWithFallbacksProps, ImageWithFallbacksState> {\n  constructor(props: ImageWithFallbacksProps) {\n    super(props);\n    this.state = {\n      src: props.src,\n      fallbackIndex: 0,\n      fallbacks: this.props.fallbacks.split(','),\n      loaded: false,\n    };\n  }\n  componentDidUpdate(prevProps: ImageWithFallbacksProps) {\n    if (prevProps.src !== this.props.src && prevProps.fallbacks !== this.props.fallbacks) {\n      this.setState({\n        src: this.props.src,\n        fallbackIndex: 0,\n        fallbacks: this.props.fallbacks.split(','),\n        loaded: false,\n      });\n    }\n  }\n  onError() {\n    if (this.state.fallbackIndex > this.state.fallbacks.length) {\n      return;\n    }\n    this.setState({\n      src: this.state.fallbacks[this.state.fallbackIndex],\n      fallbackIndex: this.state.fallbackIndex + 1,\n      fallbacks: this.state.fallbacks,\n    });\n  }\n  onLoad() {\n    this.setState({ ...this.state, loaded: true });\n  }\n  render() {\n    return (\n      <>\n        <img src={this.state.src} onError={() => this.onError()} onChange={() => this.onLoad()} onLoad={() => this.onLoad()} alt={this.props.alt} />\n        {this.props.loader && !this.state.loaded && <LoadingIndicator></LoadingIndicator>}\n      </>\n    );\n  }\n}\n\nexport default ImageWithFallbacks;\n"],"file":"ImageWithFallbacks.js"}
+{"version":3,"sources":["../../src/Image/ImageWithFallbacks.tsx"],"names":["LoadingIndicator","React","ImageWithFallbacks","props","state","src","fallbackIndex","fallbacks","split","loaded","prevProps","setState","length","onError","onLoad","alt","loader","Component"],"mappings":";;;;;;;;;;;;;;;;AAAA,SAASA,gBAAT,QAAiC,IAAjC;AACA,OAAOC,KAAP,MAAkB,OAAlB;;;;;IAgBMC,kB;;;;;AACJ,8BAAYC,KAAZ,EAA4C;AAAA;;AAAA;;AAC1C,8BAAMA,KAAN;AACA,UAAKC,KAAL,GAAa;AACXC,MAAAA,GAAG,EAAEF,KAAK,CAACE,GADA;AAEXC,MAAAA,aAAa,EAAE,CAFJ;AAGXC,MAAAA,SAAS,EAAE,MAAKJ,KAAL,CAAWI,SAAX,CAAqBC,KAArB,CAA2B,GAA3B,CAHA;AAIXC,MAAAA,MAAM,EAAE;AAJG,KAAb;AAF0C;AAQ3C;;;;WACD,4BAAmBC,SAAnB,EAAuD;AACrD,UAAIA,SAAS,CAACL,GAAV,KAAkB,KAAKF,KAAL,CAAWE,GAA7B,IAAoCK,SAAS,CAACH,SAAV,KAAwB,KAAKJ,KAAL,CAAWI,SAA3E,EAAsF;AACpF,aAAKI,QAAL,CAAc;AACZN,UAAAA,GAAG,EAAE,KAAKF,KAAL,CAAWE,GADJ;AAEZC,UAAAA,aAAa,EAAE,CAFH;AAGZC,UAAAA,SAAS,EAAE,KAAKJ,KAAL,CAAWI,SAAX,CAAqBC,KAArB,CAA2B,GAA3B,CAHC;AAIZC,UAAAA,MAAM,EAAE;AAJI,SAAd;AAMD;AACF;;;WACD,mBAAU;AACR,UAAI,KAAKL,KAAL,CAAWE,aAAX,GAA2B,KAAKF,KAAL,CAAWG,SAAX,CAAqBK,MAApD,EAA4D;AAC1D;AACD;;AACD,WAAKD,QAAL,CAAc;AACZN,QAAAA,GAAG,EAAE,KAAKD,KAAL,CAAWG,SAAX,CAAqB,KAAKH,KAAL,CAAWE,aAAhC,CADO;AAEZA,QAAAA,aAAa,EAAE,KAAKF,KAAL,CAAWE,aAAX,GAA2B,CAF9B;AAGZC,QAAAA,SAAS,EAAE,KAAKH,KAAL,CAAWG;AAHV,OAAd;AAKD;;;WACD,kBAAS;AACP,WAAKI,QAAL,iCAAmB,KAAKP,KAAxB;AAA+BK,QAAAA,MAAM,EAAE;AAAvC;AACD;;;WACD,kBAAS;AAAA;;AACP,0BACE;AAAA,gCACE;AAAK,UAAA,GAAG,EAAE,KAAKL,KAAL,CAAWC,GAArB;AAA0B,UAAA,OAAO,EAAE;AAAA,mBAAM,MAAI,CAACQ,OAAL,EAAN;AAAA,WAAnC;AAAyD,UAAA,QAAQ,EAAE;AAAA,mBAAM,MAAI,CAACC,MAAL,EAAN;AAAA,WAAnE;AAAwF,UAAA,MAAM,EAAE;AAAA,mBAAM,MAAI,CAACA,MAAL,EAAN;AAAA,WAAhG;AAAqH,UAAA,GAAG,EAAE,KAAKX,KAAL,CAAWY;AAArI,UADF,EAEG,KAAKZ,KAAL,CAAWa,MAAX,IAAqB,CAAC,KAAKZ,KAAL,CAAWK,MAAjC,iBAA2C,KAAC,gBAAD;AAAkB,UAAA,EAAE,EAAC;AAArB,UAF9C;AAAA,QADF;AAMD;;;;EAxC8BR,KAAK,CAACgB,S;;gBAAjCf,kB;AAbJK,EAAAA,S;AACAF,EAAAA,G;AACAU,EAAAA,G;AACAC,EAAAA,M;;;AAqDF,eAAed,kBAAf","sourcesContent":["import { LoadingIndicator } from '..';\nimport React from 'react';\n\nexport interface ImageWithFallbacksProps {\n  fallbacks: string;\n  src: string;\n  alt: string;\n  loader: boolean;\n}\n\ntype ImageWithFallbacksState = {\n  src: string;\n  fallbackIndex: number;\n  fallbacks: string[];\n  loaded: boolean;\n};\n\nclass ImageWithFallbacks extends React.Component<ImageWithFallbacksProps, ImageWithFallbacksState> {\n  constructor(props: ImageWithFallbacksProps) {\n    super(props);\n    this.state = {\n      src: props.src,\n      fallbackIndex: 0,\n      fallbacks: this.props.fallbacks.split(','),\n      loaded: false,\n    };\n  }\n  componentDidUpdate(prevProps: ImageWithFallbacksProps) {\n    if (prevProps.src !== this.props.src && prevProps.fallbacks !== this.props.fallbacks) {\n      this.setState({\n        src: this.props.src,\n        fallbackIndex: 0,\n        fallbacks: this.props.fallbacks.split(','),\n        loaded: false,\n      });\n    }\n  }\n  onError() {\n    if (this.state.fallbackIndex > this.state.fallbacks.length) {\n      return;\n    }\n    this.setState({\n      src: this.state.fallbacks[this.state.fallbackIndex],\n      fallbackIndex: this.state.fallbackIndex + 1,\n      fallbacks: this.state.fallbacks,\n    });\n  }\n  onLoad() {\n    this.setState({ ...this.state, loaded: true });\n  }\n  render() {\n    return (\n      <>\n        <img src={this.state.src} onError={() => this.onError()} onChange={() => this.onLoad()} onLoad={() => this.onLoad()} alt={this.props.alt} />\n        {this.props.loader && !this.state.loaded && <LoadingIndicator id=\"imgWithFallbackLoadingIndicator\"></LoadingIndicator>}\n      </>\n    );\n  }\n}\n\nexport default ImageWithFallbacks;\n"],"file":"ImageWithFallbacks.js"}

package/dist/InputFields/Checkbox.cjs

@@ -35,11 +35,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var StyledCheckBox = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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) {
+var StyledCheckBox = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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    ", "\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\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\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\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\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);
+}, (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.focusStyles, _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, _styles.COLORS.primary_20, _styles.COLORS.primary_700);
 
 exports.StyledCheckBox = StyledCheckBox;
 var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -57,7 +57,8 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       semiSelected = _ref.semiSelected,
       children = _ref.children,
       readonly = _ref.readonly,
-      tabIndexVal = _ref.tabIndexVal;
+      tabIndexVal = _ref.tabIndexVal,
+      className = _ref.className;
 
   var onKeyPress = function onKeyPress(e) {
     if (e.keyCode === 13 && !disabled && !readonly) {
@@ -74,10 +75,11 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
 
   size = (_size = size) !== null && _size !== void 0 ? _size : _types.Size.Medium;
+  var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '', " ").concat(readonly ? ' readonly' : '');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledCheckBox, {
     ref: ref,
     disabled: disabled,
-    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(readonly ? ' readonly' : ''),
+    className: cls,
     selected: selected,
     tabIndex: disabled || readonly ? -1 : tabIndexVal ? tabIndexVal : 0,
     showWarning: showWarning,
@@ -89,13 +91,13 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       id: id,
       className: 'checkbox-icon',
       children: selected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.CheckboxOn, {
-        className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+        className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
         size: "24px"
       }) : semiSelected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.CheckboxSemi, {
-        className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+        className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
         size: "24px"
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.CheckboxOff, {
-        className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+        className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
         size: "24px"
       })
     }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
@@ -120,7 +122,8 @@ Checkbox.propTypes = {
   iconPointerEventsTransparent: _propTypes.default.bool,
   semiSelected: _propTypes.default.bool,
   readonly: _propTypes.default.bool,
-  tabIndexVal: _propTypes.default.number
+  tabIndexVal: _propTypes.default.number,
+  className: _propTypes.default.string
 };
 var _default = Checkbox;
 exports.default = _default;

package/dist/InputFields/Checkbox.cjs.map

@@ -1 +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","tabIndexVal","onKeyPress","e","keyCode","handleClick","Size","Medium","toString","toLowerCase","concat","defaultOnMouseDownHandler"],"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';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const 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  tabIndexVal?: number;\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                                                            tabIndexVal\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 : (tabIndexVal ? tabIndexVal : 0)}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={defaultOnMouseDownHandler}>\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.cjs"}
+{"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","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readonly","tabIndexVal","className","onKeyPress","e","keyCode","handleClick","Size","Medium","cls","defaultOnMouseDownHandler"],"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, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const 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    ${focusStyles}\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\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\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  &.dropdown-hover:not(.disabled) {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\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  tabIndexVal?: number;\n  className?: string;\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                                                            tabIndexVal,\n                                                            className\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  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readonly ? ' readonly' : ''}`;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={cls}\n                    selected={selected}\n                    tabIndex={disabled || readonly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={defaultOnMouseDownHandler}>\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.cjs"}

package/dist/InputFields/Checkbox.d.ts

@@ -19,6 +19,7 @@ interface Props {
     semiSelected?: boolean;
     readonly?: boolean;
     tabIndexVal?: number;
+    className?: string;
 }
 declare const Checkbox: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default Checkbox;

package/dist/InputFields/Checkbox.js

@@ -6,17 +6,17 @@ 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 { COLORS, ComponentTextStyle, focusStyles } from '../styles';
 import { Size } from '../types';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling } from '../styles/typography';
 import { defaultOnMouseDownHandler } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export 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) {
+export 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    ", "\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\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\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\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\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);
+}, ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentLStyling(ComponentTextStyle.Regular, COLORS.black), focusStyles, COLORS.primary_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, COLORS.neutral_300, COLORS.white, COLORS.neutral_300, COLORS.primary_20, COLORS.primary_700);
 var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _size;
 
@@ -32,7 +32,8 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       semiSelected = _ref.semiSelected,
       children = _ref.children,
       readonly = _ref.readonly,
-      tabIndexVal = _ref.tabIndexVal;
+      tabIndexVal = _ref.tabIndexVal,
+      className = _ref.className;
 
   var onKeyPress = function onKeyPress(e) {
     if (e.keyCode === 13 && !disabled && !readonly) {
@@ -49,10 +50,11 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
 
   size = (_size = size) !== null && _size !== void 0 ? _size : Size.Medium;
+  var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '', " ").concat(readonly ? ' readonly' : '');
   return /*#__PURE__*/_jsxs(StyledCheckBox, {
     ref: ref,
     disabled: disabled,
-    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(readonly ? ' readonly' : ''),
+    className: cls,
     selected: selected,
     tabIndex: disabled || readonly ? -1 : tabIndexVal ? tabIndexVal : 0,
     showWarning: showWarning,
@@ -64,13 +66,13 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       id: id,
       className: 'checkbox-icon',
       children: selected ? /*#__PURE__*/_jsx(CheckboxOn, {
-        className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+        className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
         size: "24px"
       }) : semiSelected ? /*#__PURE__*/_jsx(CheckboxSemi, {
-        className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+        className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
         size: "24px"
       }) : /*#__PURE__*/_jsx(CheckboxOff, {
-        className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+        className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
         size: "24px"
       })
     }), label && /*#__PURE__*/_jsx("label", {
@@ -95,7 +97,8 @@ Checkbox.propTypes = {
   iconPointerEventsTransparent: _pt.bool,
   semiSelected: _pt.bool,
   readonly: _pt.bool,
-  tabIndexVal: _pt.number
+  tabIndexVal: _pt.number,
+  className: _pt.string
 };
 export default Checkbox;
 //# sourceMappingURL=Checkbox.js.map