@laerdal/life-react-components 1.2.2-dev.1.full → 1.2.2-dev.11.full

package/dist/esm/Tabs/TabLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tabs/TabLink.tsx"],"names":["React","NavLink","useLocation","styled","NotificationDot","COLORS","StyledTabLink","neutral_600","props","disabled","neutral_100","white","neutral_20","primary_20","primary_600","primary_100","primary_800","primary_500","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","TabLink","to","exact","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","variant","location","ref","useRef","toString","pathname","current","blur","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { COLORS } from '../styles';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.FunctionComponent<BaseProps>;\n  onLinkClick?: () => void;\n  testId?: string;\n  showNotificationDot?: boolean;\n  size?: string;\n  variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n  disabled?: boolean;\n  exact: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ${COLORS.neutral_600};\n\n  background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    background-color: ${COLORS.white};\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n\n  &.active {\n    background-color: ${COLORS.neutral_20};\n  }\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n  }\n  &.active:focus {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n  &:active {\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ${COLORS.primary_500};\n\n      border-top-left-radius: 2px;\n      border-top-right-radius: 2px;\n      border-bottom-left-radius: 2px;\n      border-bottom-right-radius: 2px;\n    }\n  }\n  &.active:hover {\n    &::after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    &::after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n  &:disabled {\n    box-shadow: none;\n    background-color: ${COLORS.white};\n    span {\n      color: ${COLORS.neutral_300};\n    }\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n\nconst TabLink = ({ to, disabled = false, exact = false, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot = false, size = 'small', variant = 'critical' }: TabLinkProps) => {\n  const location = useLocation();\n  const ref = React.useRef<any>(null);\n\n  return (\n    <StyledTabLink\n      to={to.toString()}\n      activeClassName=\"active\"\n      disabled={disabled}\n      exact={exact}\n      role=\"tab\"\n      aria-selected={to === location.pathname}\n      onClick={() => {\n        ref?.current?.blur();\n        if (onLinkClick) {\n          onLinkClick();\n        }\n      }}\n      ref={ref}\n      data-testid={testId}>\n      <TextContainer>  \n      <TopWrapper>\n        <span>{requiredLine}</span>        \n      </TopWrapper>\n      {optionalLine && OptionalLineIcon ? (\n        <OptionalLineWrapperWithIcon>\n          {OptionalLineIcon && <OptionalLineIcon size=\"16px\" />}\n          {optionalLine !== undefined && <span>{optionalLine}</span>}\n        </OptionalLineWrapperWithIcon>\n      ) : optionalLine ? (\n        <OptionalLineWrapper>\n          <span>{optionalLine}</span>\n        </OptionalLineWrapper>\n      ) : (\n        <></>\n      )}\n      </TextContainer>\n      <StyledNotification>\n        {showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}\n      </StyledNotification>\n    </StyledTabLink>\n  );\n};\n\nexport default TabLink;\n"],"file":"TabLink.js"}
+{"version":3,"sources":["../../../src/Tabs/TabLink.tsx"],"names":["React","NavLink","useLocation","styled","NotificationDot","COLORS","Z_INDEXES","StyledTabLink","neutral_600","props","disabled","neutral_100","focus","white","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","TabLink","to","exact","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","variant","location","ref","useRef","toString","pathname","current","blur","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { COLORS } from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.FunctionComponent<BaseProps>;\n  onLinkClick?: () => void;\n  testId?: string;\n  showNotificationDot?: boolean;\n  size?: string;\n  variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n  disabled?: boolean;\n  exact: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ${COLORS.neutral_600};\n\n  background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    z-index: ${Z_INDEXES.focus};\n    background-color: ${COLORS.white};\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n\n  &.active {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n  }\n\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n  }\n\n  &.active:focus {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ${COLORS.primary_500};\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    &::after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    &::after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    box-shadow: none;\n    background-color: ${COLORS.white};\n\n    span {\n      color: ${COLORS.neutral_300};\n    }\n\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n\nconst TabLink = ({ to, disabled = false, exact = false, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot = false, size = 'small', variant = 'critical' }: TabLinkProps) => {\n  const location = useLocation();\n  const ref = React.useRef<any>(null);\n\n  return (\n    <StyledTabLink\n      to={to.toString()}\n      activeClassName=\"active\"\n      disabled={disabled}\n      exact={exact}\n      role=\"tab\"\n      aria-selected={to === location.pathname}\n      onClick={() => {\n        ref?.current?.blur();\n        if (onLinkClick) {\n          onLinkClick();\n        }\n      }}\n      ref={ref}\n      data-testid={testId}>\n      <TextContainer>  \n      <TopWrapper>\n        <span>{requiredLine}</span>        \n      </TopWrapper>\n      {optionalLine && OptionalLineIcon ? (\n        <OptionalLineWrapperWithIcon>\n          {OptionalLineIcon && <OptionalLineIcon size=\"16px\" />}\n          {optionalLine !== undefined && <span>{optionalLine}</span>}\n        </OptionalLineWrapperWithIcon>\n      ) : optionalLine ? (\n        <OptionalLineWrapper>\n          <span>{optionalLine}</span>\n        </OptionalLineWrapper>\n      ) : (\n        <></>\n      )}\n      </TextContainer>\n      <StyledNotification>\n        {showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}\n      </StyledNotification>\n    </StyledTabLink>\n  );\n};\n\nexport default TabLink;\n"],"file":"TabLink.js"}

package/dist/esm/Toasters/Toast.js

@@ -242,7 +242,11 @@ const Toast = ({
   }
 
   const theme = ToastColor[opts.color ?? ToastColor.BLACK];
-  setTimeout(() => elementRef?.current?.focus());
+
+  if (!shouldRemove) {
+    setTimeout(() => elementRef?.current?.focus());
+  }
+
   return /*#__PURE__*/React.createElement(Container, {
     "data-testid": testId,
     animation: prop,

package/dist/esm/Toasters/Toast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Toasters/Toast.tsx"],"names":["React","styled","keyframes","ToastActionType","ToastColor","ToastEntryDirection","ToastPosition","BOXSHADOWS","COLORS","Close","Size","Button","IconButton","ComponentSStyling","ComponentTextStyle","HyperLinkDefaultStyling","HyperLinkInvertedStyling","LoaderAnimationKeyframes","Loader","div","props","duration","BLACK","neutral_200","neutral_800","WHITE","neutral_400","white","BLUE","accent1_200","accent1_600","GREEN","correct_200","correct_500","ORANGE","warning_200","warning_500","RED","critical_200","critical_500","Container","BOXSHADOW_L2","animation","bezier","transform","withClose","withLoader","Regular","black","ActionButtons","CloseButton","neutral_600","TextContainer","span","IconContainer","DEFAULT_OPTIONS","color","autoClose","delay","showCloseButton","position","TOPLEFT","enterFrom","TOP","Toast","content","remove","options","testId","removeRef","useRef","current","elementRef","shouldRemove","setShouldRemove","useState","dimensions","setDimensions","width","height","opts","useEffect","id","setTimeout","clearTimeout","undefined","clientHeight","clientWidth","animations","direction","fromY","fromHeight","toY","toHeight","fromX","fromWidth","toX","toWidth","prop","theme","focus","icon","action","map","i","Small","type","SECONDARY","handler","label","event","enter","BOTTOM","LEFT","RIGHT","leave"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\nimport { BOXSHADOWS, COLORS, TYPOGRAPHY } from '../styles';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { Size } from '../types' \nimport { Button, IconButton } from '../Button';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport {HyperLinkDefaultStyling, HyperLinkInvertedStyling} from '../HyperLink';\n\nconst LoaderAnimationKeyframes = keyframes`\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n`;\n\nconst Loader = styled.div<{ duration: number }>`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 4px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n\n  animation: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\n    background-size: 200% 100%;\n  }\n`;\n\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n  border-radius: 4px;\n\n  animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\n  transform: ${(props) => props.animation.transform};\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '0')} 16px;\n\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  justify-content: left;\n\n  position: relative;\n\n  width: max-content;\n  min-height: 48px;\n  box-sizing: border-box;\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}\n\n  & a {\n    display: inline;\n    ${HyperLinkInvertedStyling}\n  }\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background-color: ${COLORS.neutral_800};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background-color: ${COLORS.white};\n    color: ${COLORS.black};\n\n    & a {\n      ${HyperLinkDefaultStyling}\n    }\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background-color: ${COLORS.accent1_600};\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background-color: ${COLORS.correct_500};\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background-color: ${COLORS.warning_500};\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background-color: ${COLORS.critical_500};\n  }\n`;\n\nconst ActionButtons = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n`;\n\nconst CloseButton = styled.div`\n  & > button {\n    background-color: transparent;\n    border: none;\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  & > button:focus:not(:disabled):not(:active):not(:hover) div svg path {\n    fill: ${COLORS.white};\n  }\n\n  & div svg path {\n    fill: ${COLORS.white};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    & div svg path {\n      fill: ${COLORS.neutral_600};\n    }\n  }\n`;\n\nconst TextContainer = styled.span`\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n`;\n\nconst IconContainer = styled.span`\n  margin-right: -8px;\n`;\n\nexport type ToastOptions = {\n  color?: ToastColor;\n  autoClose?: boolean;\n  delay?: number;\n  showCloseButton?: boolean;\n  action?: {\n    label: string;\n    handler: () => void;\n    type?: ToastActionType;\n  }[];\n  position: ToastPosition;\n  enterFrom?: ToastEntryDirection;\n  icon?: React.ReactNode;\n};\n\ntype Props = {\n  remove?: any;\n  content: any;\n  options?: ToastOptions;\n  testId?: string;\n};\n\nconst DEFAULT_OPTIONS: ToastOptions = {\n  color: ToastColor.BLACK,\n  autoClose: true,\n  delay: 5000,\n  showCloseButton: false,\n  position: ToastPosition.TOPLEFT,\n  enterFrom: ToastEntryDirection.TOP,\n};\n\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\n  const removeRef = React.useRef();\n  removeRef.current = remove;\n\n  const elementRef = React.useRef<any>(null);\n\n  const [shouldRemove, setShouldRemove] = React.useState(false);\n  const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\n\n  const opts = { ...DEFAULT_OPTIONS, ...options };\n\n  React.useEffect(() => {\n    if (opts?.autoClose) {\n      // @ts-ignore\n      const id = setTimeout(() => setShouldRemove(true), opts.delay);\n      return () => clearTimeout(id);\n    }\n    return undefined;\n  }, []);\n\n  React.useEffect(() => {\n    if (shouldRemove) {\n      // @ts-ignore\n      const id = setTimeout(() => removeRef.current(), 200);\n      return () => clearTimeout(id);\n    }\n  }, [shouldRemove]);\n\n  React.useEffect(() => {\n    setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\n  }, []);\n\n  const animation = animations[shouldRemove ? 'leave' : 'enter'];\n  const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\n\n  const fromY = dimensions.height * direction.fromHeight;\n  const toY = dimensions.height * direction.toHeight;\n  const fromX = dimensions.width * direction.fromWidth;\n  const toX = dimensions.width * direction.toWidth;\n\n  let prop = {\n    duration: animation.duration,\n    bezier: animation.bezier,\n    transform: `translateY(${toY}) translateX(${toX})`,\n    keyframes: keyframes`\n        0% {\n          transform: translateY(${fromY}px) translateX(${fromX}px);\n        }\n        100% {\n          transform: translateY(${toY}px) translateX(${toX}px);\n        }`,\n  };\n\n  if (!dimensions.height) {\n    prop = {\n      ...prop,\n      ...{\n        transform: 'translateY(-1000vh) translateX(-1000vw)',\n        keyframes: keyframes``,\n      },\n    };\n  }\n\n  const theme = ToastColor[opts.color ?? ToastColor.BLACK];\n\n  setTimeout(() => elementRef?.current?.focus());\n\n  return (\n    <Container data-testid={testId} animation={prop} ref={elementRef} withLoader={!!opts.autoClose} className={theme} withClose={!!opts.showCloseButton} tabIndex={-1}>\n      {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\n      <TextContainer className={'description'}>{content}</TextContainer>\n      {opts.action && (\n        <ActionButtons>\n          {opts.action.map((action, i) => (\n            <Button\n              size={Size.Small}\n              variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\n              colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\n              key={i}\n              onClick={() => {\n                setShouldRemove(true);\n                action.handler();\n              }}\n              className={'action'}>\n              {action.label}\n            </Button>\n          ))}\n        </ActionButtons>\n      )}\n      {opts.showCloseButton && (\n        <CloseButton className={`close-button ${theme}`}>\n          <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={(event) => setShouldRemove(true)}>\n            <Close size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </CloseButton>\n      )}\n      {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\n    </Container>\n  );\n};\n\nexport default Toast;\n\nconst animations = {\n  enter: {\n    bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\n    duration: '300ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: -1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: -1,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 1,\n      toWidth: 0,\n    },\n  },\n  leave: {\n    bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\n    duration: '205ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: 0,\n      toHeight: -1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 0,\n      toHeight: 1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: -1,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 1,\n    },\n  },\n};\n"],"file":"Toast.js"}
+{"version":3,"sources":["../../../src/Toasters/Toast.tsx"],"names":["React","styled","keyframes","ToastActionType","ToastColor","ToastEntryDirection","ToastPosition","BOXSHADOWS","COLORS","Close","Size","Button","IconButton","ComponentSStyling","ComponentTextStyle","HyperLinkDefaultStyling","HyperLinkInvertedStyling","LoaderAnimationKeyframes","Loader","div","props","duration","BLACK","neutral_200","neutral_800","WHITE","neutral_400","white","BLUE","accent1_200","accent1_600","GREEN","correct_200","correct_500","ORANGE","warning_200","warning_500","RED","critical_200","critical_500","Container","BOXSHADOW_L2","animation","bezier","transform","withClose","withLoader","Regular","black","ActionButtons","CloseButton","neutral_600","TextContainer","span","IconContainer","DEFAULT_OPTIONS","color","autoClose","delay","showCloseButton","position","TOPLEFT","enterFrom","TOP","Toast","content","remove","options","testId","removeRef","useRef","current","elementRef","shouldRemove","setShouldRemove","useState","dimensions","setDimensions","width","height","opts","useEffect","id","setTimeout","clearTimeout","undefined","clientHeight","clientWidth","animations","direction","fromY","fromHeight","toY","toHeight","fromX","fromWidth","toX","toWidth","prop","theme","focus","icon","action","map","i","Small","type","SECONDARY","handler","label","event","enter","BOTTOM","LEFT","RIGHT","leave"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\nimport { BOXSHADOWS, COLORS, TYPOGRAPHY } from '../styles';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { Size } from '../types' \nimport { Button, IconButton } from '../Button';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport {HyperLinkDefaultStyling, HyperLinkInvertedStyling} from '../HyperLink';\n\nconst LoaderAnimationKeyframes = keyframes`\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n`;\n\nconst Loader = styled.div<{ duration: number }>`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 4px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n\n  animation: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\n    background-size: 200% 100%;\n  }\n`;\n\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n  border-radius: 4px;\n\n  animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\n  transform: ${(props) => props.animation.transform};\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '0')} 16px;\n\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  justify-content: left;\n\n  position: relative;\n\n  width: max-content;\n  min-height: 48px;\n  box-sizing: border-box;\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}\n\n  & a {\n    display: inline;\n    ${HyperLinkInvertedStyling}\n  }\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background-color: ${COLORS.neutral_800};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background-color: ${COLORS.white};\n    color: ${COLORS.black};\n\n    & a {\n      ${HyperLinkDefaultStyling}\n    }\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background-color: ${COLORS.accent1_600};\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background-color: ${COLORS.correct_500};\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background-color: ${COLORS.warning_500};\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background-color: ${COLORS.critical_500};\n  }\n`;\n\nconst ActionButtons = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n`;\n\nconst CloseButton = styled.div`\n  & > button {\n    background-color: transparent;\n    border: none;\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  & > button:focus:not(:disabled):not(:active):not(:hover) div svg path {\n    fill: ${COLORS.white};\n  }\n\n  & div svg path {\n    fill: ${COLORS.white};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    & div svg path {\n      fill: ${COLORS.neutral_600};\n    }\n  }\n`;\n\nconst TextContainer = styled.span`\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n`;\n\nconst IconContainer = styled.span`\n  margin-right: -8px;\n`;\n\nexport type ToastOptions = {\n  color?: ToastColor;\n  autoClose?: boolean;\n  delay?: number;\n  showCloseButton?: boolean;\n  action?: {\n    label: string;\n    handler: () => void;\n    type?: ToastActionType;\n  }[];\n  position: ToastPosition;\n  enterFrom?: ToastEntryDirection;\n  icon?: React.ReactNode;\n};\n\ntype Props = {\n  remove?: any;\n  content: any;\n  options?: ToastOptions;\n  testId?: string;\n};\n\nconst DEFAULT_OPTIONS: ToastOptions = {\n  color: ToastColor.BLACK,\n  autoClose: true,\n  delay: 5000,\n  showCloseButton: false,\n  position: ToastPosition.TOPLEFT,\n  enterFrom: ToastEntryDirection.TOP,\n};\n\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\n  const removeRef = React.useRef();\n  removeRef.current = remove;\n\n  const elementRef = React.useRef<any>(null);\n\n  const [shouldRemove, setShouldRemove] = React.useState(false);\n  const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\n\n  const opts = { ...DEFAULT_OPTIONS, ...options };\n\n  React.useEffect(() => {\n    if (opts?.autoClose) {\n      // @ts-ignore\n      const id = setTimeout(() => setShouldRemove(true), opts.delay);\n      return () => clearTimeout(id);\n    }\n    return undefined;\n  }, []);\n\n  React.useEffect(() => {\n    if (shouldRemove) {\n      // @ts-ignore\n      const id = setTimeout(() => removeRef.current(), 200);\n      return () => clearTimeout(id);\n    }\n  }, [shouldRemove]);\n\n  React.useEffect(() => {\n    setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\n  }, []);\n\n  const animation = animations[shouldRemove ? 'leave' : 'enter'];\n  const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\n\n  const fromY = dimensions.height * direction.fromHeight;\n  const toY = dimensions.height * direction.toHeight;\n  const fromX = dimensions.width * direction.fromWidth;\n  const toX = dimensions.width * direction.toWidth;\n\n  let prop = {\n    duration: animation.duration,\n    bezier: animation.bezier,\n    transform: `translateY(${toY}) translateX(${toX})`,\n    keyframes: keyframes`\n        0% {\n          transform: translateY(${fromY}px) translateX(${fromX}px);\n        }\n        100% {\n          transform: translateY(${toY}px) translateX(${toX}px);\n        }`,\n  };\n\n  if (!dimensions.height) {\n    prop = {\n      ...prop,\n      ...{\n        transform: 'translateY(-1000vh) translateX(-1000vw)',\n        keyframes: keyframes``,\n      },\n    };\n  }\n\n  const theme = ToastColor[opts.color ?? ToastColor.BLACK];\n\n  if (!shouldRemove){\n    setTimeout(() => elementRef?.current?.focus());\n  }\n\n  return (\n    <Container data-testid={testId} animation={prop} ref={elementRef} withLoader={!!opts.autoClose} className={theme} withClose={!!opts.showCloseButton} tabIndex={-1}>\n      {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\n      <TextContainer className={'description'}>{content}</TextContainer>\n      {opts.action && (\n        <ActionButtons>\n          {opts.action.map((action, i) => (\n            <Button\n              size={Size.Small}\n              variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\n              colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\n              key={i}\n              onClick={() => {\n                setShouldRemove(true);\n                action.handler();\n              }}\n              className={'action'}>\n              {action.label}\n            </Button>\n          ))}\n        </ActionButtons>\n      )}\n      {opts.showCloseButton && (\n        <CloseButton className={`close-button ${theme}`}>\n          <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={(event) => setShouldRemove(true)}>\n            <Close size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </CloseButton>\n      )}\n      {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\n    </Container>\n  );\n};\n\nexport default Toast;\n\nconst animations = {\n  enter: {\n    bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\n    duration: '300ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: -1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: -1,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 1,\n      toWidth: 0,\n    },\n  },\n  leave: {\n    bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\n    duration: '205ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: 0,\n      toHeight: -1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 0,\n      toHeight: 1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: -1,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 1,\n    },\n  },\n};\n"],"file":"Toast.js"}

package/dist/esm/Toasters/ToastContext.js

@@ -9,12 +9,13 @@ import styled from 'styled-components';
 import { createUUID } from '../Services/functions';
 import Toast from './Toast';
 import { ToastPosition } from '../types';
+import { Z_INDEXES } from '../styles/z-indexes';
 
 /*export const ToastContext = React.createContext<ToasterValueProps>(null);*/
 export const ToastContext = /*#__PURE__*/React.createContext({});
 const ToastBucket = styled.div`
   position: fixed;
-  z-index: 9999;
+  z-index: ${Z_INDEXES.toast};
   display: flex;
   flex-direction: column-reverse;
 `;

package/dist/esm/Toasters/ToastContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Toasters/ToastContext.tsx"],"names":["React","styled","createUUID","Toast","ToastPosition","ToastContext","createContext","ToastBucket","div","ToastBucketTopLeft","ToastBucketTopMiddle","ToastBucketTopRight","ToastBucketBottomLeft","ToastBucketBottomMiddle","ToastBucketBottomRight","ToastProvider","children","toasts","setToasts","useState","add","content","options","id","prev","remove","filter","t","functions","useMemo","addToast","removeToast","position","TOPLEFT","map","TOPMIDDLE","TOPRIGHT","BOTTOMLEFT","BOTTOMMIDDLE","BOTTOMRIGHT","useToast","useContext"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { createUUID } from '../Services/functions';\nimport Toast, { ToastOptions } from './Toast';\nimport { ToastPosition } from '../types';\n\ntype ProviderProps = {\n  children?: any;\n};\n\ninterface toast {\n  options: ToastOptions;\n  id: string;\n  content: any;\n}\ntype ToasterValueProps = { toasts: toast[]; addToast: (content: any, options: ToastOptions) => void; removeToast: (id: string) => void };\n\n/*export const ToastContext = React.createContext<ToasterValueProps>(null);*/\n\nexport const ToastContext = React.createContext({} as ToasterValueProps);\n\nconst ToastBucket = styled.div`\n  position: fixed;\n  z-index: 9999;\n  display: flex;\n  flex-direction: column-reverse;\n`;\n\nconst ToastBucketTopLeft = styled(ToastBucket)`\n  top: 16px;\n  left: 5%;\n`;\n\nconst ToastBucketTopMiddle = styled(ToastBucket)`\n  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n`;\n\nconst ToastBucketTopRight = styled(ToastBucket)`\n  top: 16px;\n  right: 5%;\n`;\n\nconst ToastBucketBottomLeft = styled(ToastBucket)`\n  bottom: 16px;\n  left: 5%;\n`;\n\nconst ToastBucketBottomMiddle = styled(ToastBucket)`\n  bottom: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n`;\n\nconst ToastBucketBottomRight = styled(ToastBucket)`\n  bottom: 16px;\n  right: 5%;\n`;\n\nexport const ToastProvider: React.FC = ({ children }: ProviderProps) => {\n  const [toasts, setToasts] = React.useState<toast[]>([]);\n\n  const add = (content: any, options: ToastOptions) => {\n    const id = createUUID();\n    setToasts(prev => [...prev, { id, content, options }]);\n  };\n\n  const remove = (id: string) => setToasts(toasts.filter(t => t.id !== id));\n\n  const functions = React.useMemo(() => {\n    return { addToast: add, removeToast: remove };\n  }, [toasts]);\n\n  return (\n    <ToastContext.Provider value={{ toasts, ...functions }}>\n      <ToastBucketTopLeft>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPLEFT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopLeft>\n      <ToastBucketTopMiddle>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPMIDDLE)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopMiddle>\n      <ToastBucketTopRight>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPRIGHT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopRight>\n      <ToastBucketBottomLeft>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMLEFT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomLeft>\n      <ToastBucketBottomMiddle>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMMIDDLE)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomMiddle>\n      <ToastBucketBottomRight>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMRIGHT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomRight>\n      {children}\n    </ToastContext.Provider>\n  );\n};\n\nexport function useToast() {\n  const { addToast } = React.useContext(ToastContext);\n  return {\n    addToast,\n  };\n}\n"],"file":"ToastContext.js"}
+{"version":3,"sources":["../../../src/Toasters/ToastContext.tsx"],"names":["React","styled","createUUID","Toast","ToastPosition","Z_INDEXES","ToastContext","createContext","ToastBucket","div","toast","ToastBucketTopLeft","ToastBucketTopMiddle","ToastBucketTopRight","ToastBucketBottomLeft","ToastBucketBottomMiddle","ToastBucketBottomRight","ToastProvider","children","toasts","setToasts","useState","add","content","options","id","prev","remove","filter","t","functions","useMemo","addToast","removeToast","position","TOPLEFT","map","TOPMIDDLE","TOPRIGHT","BOTTOMLEFT","BOTTOMMIDDLE","BOTTOMRIGHT","useToast","useContext"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,UAAT,QAA2B,uBAA3B;AACA,OAAOC,KAAP,MAAoC,SAApC;AACA,SAASC,aAAT,QAA8B,UAA9B;AACA,SAAQC,SAAR,QAAwB,qBAAxB;;AAaA;AAEA,OAAO,MAAMC,YAAY,gBAAGN,KAAK,CAACO,aAAN,CAAoB,EAApB,CAArB;AAEP,MAAMC,WAAW,GAAGP,MAAM,CAACQ,GAAI;AAC/B;AACA,aAAaJ,SAAS,CAACK,KAAM;AAC7B;AACA;AACA,CALA;AAOA,MAAMC,kBAAkB,GAAGV,MAAM,CAACO,WAAD,CAAc;AAC/C;AACA;AACA,CAHA;AAKA,MAAMI,oBAAoB,GAAGX,MAAM,CAACO,WAAD,CAAc;AACjD;AACA;AACA;AACA,CAJA;AAMA,MAAMK,mBAAmB,GAAGZ,MAAM,CAACO,WAAD,CAAc;AAChD;AACA;AACA,CAHA;AAKA,MAAMM,qBAAqB,GAAGb,MAAM,CAACO,WAAD,CAAc;AAClD;AACA;AACA,CAHA;AAKA,MAAMO,uBAAuB,GAAGd,MAAM,CAACO,WAAD,CAAc;AACpD;AACA;AACA;AACA,CAJA;AAMA,MAAMQ,sBAAsB,GAAGf,MAAM,CAACO,WAAD,CAAc;AACnD;AACA;AACA,CAHA;AAKA,OAAO,MAAMS,aAAuB,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAiC;AACtE,QAAM,CAACC,MAAD,EAASC,SAAT,IAAsBpB,KAAK,CAACqB,QAAN,CAAwB,EAAxB,CAA5B;;AAEA,QAAMC,GAAG,GAAG,CAACC,OAAD,EAAeC,OAAf,KAAyC;AACnD,UAAMC,EAAE,GAAGvB,UAAU,EAArB;AACAkB,IAAAA,SAAS,CAACM,IAAI,IAAI,CAAC,GAAGA,IAAJ,EAAU;AAAED,MAAAA,EAAF;AAAMF,MAAAA,OAAN;AAAeC,MAAAA;AAAf,KAAV,CAAT,CAAT;AACD,GAHD;;AAKA,QAAMG,MAAM,GAAIF,EAAD,IAAgBL,SAAS,CAACD,MAAM,CAACS,MAAP,CAAcC,CAAC,IAAIA,CAAC,CAACJ,EAAF,KAASA,EAA5B,CAAD,CAAxC;;AAEA,QAAMK,SAAS,GAAG9B,KAAK,CAAC+B,OAAN,CAAc,MAAM;AACpC,WAAO;AAAEC,MAAAA,QAAQ,EAAEV,GAAZ;AAAiBW,MAAAA,WAAW,EAAEN;AAA9B,KAAP;AACD,GAFiB,EAEf,CAACR,MAAD,CAFe,CAAlB;AAIA,sBACE,oBAAC,YAAD,CAAc,QAAd;AAAuB,IAAA,KAAK;AAAIA,MAAAA;AAAJ,OAAeW,SAAf;AAA5B,kBACE,oBAAC,kBAAD,QACGX,MAAM,CACJS,MADF,CACSC,CAAC,IAAIA,CAAC,CAACL,OAAF,CAAUU,QAAV,KAAuB9B,aAAa,CAAC+B,OADnD,EAEEC,GAFF,CAEMP,CAAC,iBACJ,oBAAC,KAAD;AAAO,IAAA,GAAG,EAAEA,CAAC,CAACJ,EAAd;AAAkB,IAAA,OAAO,EAAEI,CAAC,CAACN,OAA7B;AAAsC,IAAA,MAAM,EAAE,MAAMI,MAAM,CAACE,CAAC,CAACJ,EAAH,CAA1D;AAAkE,IAAA,OAAO,EAAEI,CAAC,CAACL;AAA7E,IAHH,CADH,CADF,eAQE,oBAAC,oBAAD,QACGL,MAAM,CACJS,MADF,CACSC,CAAC,IAAIA,CAAC,CAACL,OAAF,CAAUU,QAAV,KAAuB9B,aAAa,CAACiC,SADnD,EAEED,GAFF,CAEMP,CAAC,iBACJ,oBAAC,KAAD;AAAO,IAAA,GAAG,EAAEA,CAAC,CAACJ,EAAd;AAAkB,IAAA,OAAO,EAAEI,CAAC,CAACN,OAA7B;AAAsC,IAAA,MAAM,EAAE,MAAMI,MAAM,CAACE,CAAC,CAACJ,EAAH,CAA1D;AAAkE,IAAA,OAAO,EAAEI,CAAC,CAACL;AAA7E,IAHH,CADH,CARF,eAeE,oBAAC,mBAAD,QACGL,MAAM,CACJS,MADF,CACSC,CAAC,IAAIA,CAAC,CAACL,OAAF,CAAUU,QAAV,KAAuB9B,aAAa,CAACkC,QADnD,EAEEF,GAFF,CAEMP,CAAC,iBACJ,oBAAC,KAAD;AAAO,IAAA,GAAG,EAAEA,CAAC,CAACJ,EAAd;AAAkB,IAAA,OAAO,EAAEI,CAAC,CAACN,OAA7B;AAAsC,IAAA,MAAM,EAAE,MAAMI,MAAM,CAACE,CAAC,CAACJ,EAAH,CAA1D;AAAkE,IAAA,OAAO,EAAEI,CAAC,CAACL;AAA7E,IAHH,CADH,CAfF,eAsBE,oBAAC,qBAAD,QACGL,MAAM,CACJS,MADF,CACSC,CAAC,IAAIA,CAAC,CAACL,OAAF,CAAUU,QAAV,KAAuB9B,aAAa,CAACmC,UADnD,EAEEH,GAFF,CAEMP,CAAC,iBACJ,oBAAC,KAAD;AAAO,IAAA,GAAG,EAAEA,CAAC,CAACJ,EAAd;AAAkB,IAAA,OAAO,EAAEI,CAAC,CAACN,OAA7B;AAAsC,IAAA,MAAM,EAAE,MAAMI,MAAM,CAACE,CAAC,CAACJ,EAAH,CAA1D;AAAkE,IAAA,OAAO,EAAEI,CAAC,CAACL;AAA7E,IAHH,CADH,CAtBF,eA6BE,oBAAC,uBAAD,QACGL,MAAM,CACJS,MADF,CACSC,CAAC,IAAIA,CAAC,CAACL,OAAF,CAAUU,QAAV,KAAuB9B,aAAa,CAACoC,YADnD,EAEEJ,GAFF,CAEMP,CAAC,iBACJ,oBAAC,KAAD;AAAO,IAAA,GAAG,EAAEA,CAAC,CAACJ,EAAd;AAAkB,IAAA,OAAO,EAAEI,CAAC,CAACN,OAA7B;AAAsC,IAAA,MAAM,EAAE,MAAMI,MAAM,CAACE,CAAC,CAACJ,EAAH,CAA1D;AAAkE,IAAA,OAAO,EAAEI,CAAC,CAACL;AAA7E,IAHH,CADH,CA7BF,eAoCE,oBAAC,sBAAD,QACGL,MAAM,CACJS,MADF,CACSC,CAAC,IAAIA,CAAC,CAACL,OAAF,CAAUU,QAAV,KAAuB9B,aAAa,CAACqC,WADnD,EAEEL,GAFF,CAEMP,CAAC,iBACJ,oBAAC,KAAD;AAAO,IAAA,GAAG,EAAEA,CAAC,CAACJ,EAAd;AAAkB,IAAA,OAAO,EAAEI,CAAC,CAACN,OAA7B;AAAsC,IAAA,MAAM,EAAE,MAAMI,MAAM,CAACE,CAAC,CAACJ,EAAH,CAA1D;AAAkE,IAAA,OAAO,EAAEI,CAAC,CAACL;AAA7E,IAHH,CADH,CApCF,EA2CGN,QA3CH,CADF;AA+CD,CA7DM;AA+DP,OAAO,SAASwB,QAAT,GAAoB;AACzB,QAAM;AAAEV,IAAAA;AAAF,MAAehC,KAAK,CAAC2C,UAAN,CAAiBrC,YAAjB,CAArB;AACA,SAAO;AACL0B,IAAAA;AADK,GAAP;AAGD","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { createUUID } from '../Services/functions';\nimport Toast, { ToastOptions } from './Toast';\nimport { ToastPosition } from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype ProviderProps = {\n  children?: any;\n};\n\ninterface toast {\n  options: ToastOptions;\n  id: string;\n  content: any;\n}\ntype ToasterValueProps = { toasts: toast[]; addToast: (content: any, options: ToastOptions) => void; removeToast: (id: string) => void };\n\n/*export const ToastContext = React.createContext<ToasterValueProps>(null);*/\n\nexport const ToastContext = React.createContext({} as ToasterValueProps);\n\nconst ToastBucket = styled.div`\n  position: fixed;\n  z-index: ${Z_INDEXES.toast};\n  display: flex;\n  flex-direction: column-reverse;\n`;\n\nconst ToastBucketTopLeft = styled(ToastBucket)`\n  top: 16px;\n  left: 5%;\n`;\n\nconst ToastBucketTopMiddle = styled(ToastBucket)`\n  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n`;\n\nconst ToastBucketTopRight = styled(ToastBucket)`\n  top: 16px;\n  right: 5%;\n`;\n\nconst ToastBucketBottomLeft = styled(ToastBucket)`\n  bottom: 16px;\n  left: 5%;\n`;\n\nconst ToastBucketBottomMiddle = styled(ToastBucket)`\n  bottom: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n`;\n\nconst ToastBucketBottomRight = styled(ToastBucket)`\n  bottom: 16px;\n  right: 5%;\n`;\n\nexport const ToastProvider: React.FC = ({ children }: ProviderProps) => {\n  const [toasts, setToasts] = React.useState<toast[]>([]);\n\n  const add = (content: any, options: ToastOptions) => {\n    const id = createUUID();\n    setToasts(prev => [...prev, { id, content, options }]);\n  };\n\n  const remove = (id: string) => setToasts(toasts.filter(t => t.id !== id));\n\n  const functions = React.useMemo(() => {\n    return { addToast: add, removeToast: remove };\n  }, [toasts]);\n\n  return (\n    <ToastContext.Provider value={{ toasts, ...functions }}>\n      <ToastBucketTopLeft>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPLEFT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopLeft>\n      <ToastBucketTopMiddle>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPMIDDLE)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopMiddle>\n      <ToastBucketTopRight>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPRIGHT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopRight>\n      <ToastBucketBottomLeft>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMLEFT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomLeft>\n      <ToastBucketBottomMiddle>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMMIDDLE)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomMiddle>\n      <ToastBucketBottomRight>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMRIGHT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomRight>\n      {children}\n    </ToastContext.Provider>\n  );\n};\n\nexport function useToast() {\n  const { addToast } = React.useContext(ToastContext);\n  return {\n    addToast,\n  };\n}\n"],"file":"ToastContext.js"}

package/dist/esm/Tooltips/TooltipStyles.js

@@ -2,6 +2,7 @@ import styled, { css } from 'styled-components';
 import { Size } from '../types';
 import { BOXSHADOWS, COLORS, ComponentTextStyle } from '../styles';
 import { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';
+import { Z_INDEXES } from '../styles/z-indexes';
 
 const distanceToEdge = size => {
   return size == Size.XSmall ? '8px' : !size || size == Size.Small ? '12px' : '16px';
@@ -20,11 +21,11 @@ export const Tooltip = styled.div`
     border-radius: 2px;
     width: max-content;
     height: ${props => props.height};
-    max-width: 34ems;
+    max-width: 34em;
     background: ${COLORS.primary_800};
     position: absolute; 
     opacity: 0; 
-    z-index: 1;
+    z-index: ${Z_INDEXES.tooltip};
     ${props => props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : ''}
 
     ${props => props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : ''}

package/dist/esm/Tooltips/TooltipStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tooltips/TooltipStyles.tsx"],"names":["styled","css","Size","BOXSHADOWS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","ComponentXSStyling","distanceToEdge","size","XSmall","Small","Tooltip","div","props","Medium","Regular","white","align","BOXSHADOW_L2","height","primary_800","position","withArrow","defaultProps","TooltipTrigger","TooltipContainer"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport { BOXSHADOWS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\n\nconst distanceToEdge = (size: Size | undefined) => {\n  return size == Size.XSmall ? '8px' : (!size || size == Size.Small) ? '12px' : '16px';\n}\n\nexport const Tooltip = styled.div<{\n  withArrow?: boolean;\n  size?: Size;\n  height?: string;\n  align?: 'start' | 'end' | 'center' | undefined;\n  position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n}>`\n\n    pointer-events: none;\n    ${props => (props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.XSmall  ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.align == 'center' ? 'text-align: center;' : '')}\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n    \n    padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};\n    border-radius: 2px;\n    width: max-content;\n    height: ${props => props.height};\n    max-width: 34ems;\n    background: ${COLORS.primary_800};\n    position: absolute; \n    opacity: 0; \n    z-index: 1;\n    ${props => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n    ${props => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n    ${props => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n            \n    ${props =>\n      props.position == 'left' || props.position == 'right'\n        ? ''\n        : props.align == 'start'\n        ? 'left: 0%;'\n        : props.align == 'end'\n        ? 'right: 0%;'\n        : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n    ${props => (!props.withArrow ? 'display: none;' : '')}\n    content: \"\";\n    position: absolute;\n    ${props => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n    \n    ${props => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n    ${props => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n    ${props =>\n      props.position == 'left' || props.position == 'right' ? '' : \n      props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}\n\n    ${props => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ${props => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'right' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n  }\n`;\n\nTooltip.defaultProps = {\n  withArrow: false,\n  size: Size.Small,\n  height: 'auto',\n  align: 'center',\n  position: 'bottom'\n}\n\nexport const TooltipTrigger = css`\n  &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: 1s;\n  }\n`;\n\nexport const TooltipContainer = styled.div`\n  display: inline-block;\n  position: relative;\n\n  ${TooltipTrigger}\n`;\n"],"file":"TooltipStyles.js"}
+{"version":3,"sources":["../../../src/Tooltips/TooltipStyles.tsx"],"names":["styled","css","Size","BOXSHADOWS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","distanceToEdge","size","XSmall","Small","Tooltip","div","props","Medium","Regular","white","align","BOXSHADOW_L2","height","primary_800","tooltip","position","withArrow","defaultProps","TooltipTrigger","TooltipContainer"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport { BOXSHADOWS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst distanceToEdge = (size: Size | undefined) => {\n  return size == Size.XSmall ? '8px' : (!size || size == Size.Small) ? '12px' : '16px';\n}\n\nexport const Tooltip = styled.div<{\n  withArrow?: boolean;\n  size?: Size;\n  height?: string;\n  align?: 'start' | 'end' | 'center' | undefined;\n  position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n}>`\n\n    pointer-events: none;\n    ${props => (props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.XSmall  ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.align == 'center' ? 'text-align: center;' : '')}\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n    \n    padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};\n    border-radius: 2px;\n    width: max-content;\n    height: ${props => props.height};\n    max-width: 34em;\n    background: ${COLORS.primary_800};\n    position: absolute; \n    opacity: 0; \n    z-index: ${Z_INDEXES.tooltip};\n    ${props => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n    ${props => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n    ${props => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n            \n    ${props =>\n      props.position == 'left' || props.position == 'right'\n        ? ''\n        : props.align == 'start'\n        ? 'left: 0%;'\n        : props.align == 'end'\n        ? 'right: 0%;'\n        : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n    ${props => (!props.withArrow ? 'display: none;' : '')}\n    content: \"\";\n    position: absolute;\n    ${props => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n    \n    ${props => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n    ${props => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n    ${props =>\n      props.position == 'left' || props.position == 'right' ? '' : \n      props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}\n\n    ${props => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ${props => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'right' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n  }\n`;\n\nTooltip.defaultProps = {\n  withArrow: false,\n  size: Size.Small,\n  height: 'auto',\n  align: 'center',\n  position: 'bottom'\n}\n\nexport const TooltipTrigger = css`\n  &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: 1s;\n  }\n`;\n\nexport const TooltipContainer = styled.div`\n  display: inline-block;\n  position: relative;\n\n  ${TooltipTrigger}\n`;\n"],"file":"TooltipStyles.js"}

package/dist/esm/styles/z-indexes.js

@@ -0,0 +1,14 @@
+export const Z_INDEXES = {
+  hover: '1',
+  active: '2',
+  focus: '3',
+  dropdown: '1000',
+  sticky_menu: '1020',
+  fixed_menu: '1030',
+  backdrop: '1040',
+  off_canvas: '1050',
+  modal: '1060',
+  toast: '1070',
+  tooltip: '1080'
+};
+//# sourceMappingURL=z-indexes.js.map

package/dist/esm/styles/z-indexes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/styles/z-indexes.ts"],"names":["Z_INDEXES","hover","active","focus","dropdown","sticky_menu","fixed_menu","backdrop","off_canvas","modal","toast","tooltip"],"mappings":"AAAA,OAAO,MAAMA,SAAS,GAAG;AACvBC,EAAAA,KAAK,EAAE,GADgB;AAEvBC,EAAAA,MAAM,EAAE,GAFe;AAGvBC,EAAAA,KAAK,EAAE,GAHgB;AAMvBC,EAAAA,QAAQ,EAAE,MANa;AAOvBC,EAAAA,WAAW,EAAE,MAPU;AAQvBC,EAAAA,UAAU,EAAE,MARW;AASvBC,EAAAA,QAAQ,EAAE,MATa;AAUvBC,EAAAA,UAAU,EAAE,MAVW;AAWvBC,EAAAA,KAAK,EAAE,MAXgB;AAYvBC,EAAAA,KAAK,EAAE,MAZgB;AAavBC,EAAAA,OAAO,EAAE;AAbc,CAAlB","sourcesContent":["export const Z_INDEXES = {\n  hover: '1',\n  active: '2',\n  focus: '3',\n\n\n  dropdown: '1000',\n  sticky_menu: '1020',\n  fixed_menu: '1030',\n  backdrop: '1040',\n  off_canvas: '1050',\n  modal: '1060',\n  toast: '1070',\n  tooltip: '1080',\n}\n"],"file":"z-indexes.js"}

package/dist/js/Breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Breadcrumb/Breadcrumb.tsx"],"names":["marginRight","size","Size","Small","Medium","BreadcrumbContainer","styled","div","props","FontStyles","ComponentTextStyle","Regular","COLORS","neutral_600","primary_700","primary_800","textStyle","color","XSmall","LastBreadcrumbItem","label","Bold","neutral_800","Breadcrumb","items","homeIcon","homeLabel","homeUrl","history","dropdownItems","slice","length","map","x","value","url","displayLabel","navigate","links","push","chevronSize","neutral_500"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS} from '../styles';\nimport {ComponentTextStyle, Size, SystemIcons} from '..';\nimport {useHistory} from 'react-router';\nimport { HyperLink, IconButton } from '..';\nimport {BreadcrumbItem} from '@laerdal/life-react-components/src/Breadcrumb/BreadcrumbItem';\nimport {Link} from 'react-router-dom';\nimport {ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\nimport DropdownButton from '../Dropdown/DropdownButton';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\n\ntype BreadcrumbProps = {\n  homeIcon?: boolean;\n  homeLabel?: string;\n  homeUrl?: string;\n  items?: BreadcrumbItem[];\n  size?: Size;\n};\n\nconst marginRight = (size: Size | undefined) => {\n  return size == Size.Small || size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;'\n}\n\nconst BreadcrumbContainer = styled.div<{size: Size | undefined}>`\n  display:flex;\n  align-items: center;\n  min-height: 48px;\n    \n  a {\n    text-decoration: none;\n    ${(props) => FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${(props) => marginRight(props.size) }\n  }\n\n  .chevronicon {\n    ${(props) => marginRight(props.size) }\n  }\n\n  a:hover {\n    color: ${COLORS.primary_700};\n  }\n  a:active {\n    color: ${COLORS.primary_800};\n  }\n`;\n\nconst FontStyles = (size: Size | undefined, textStyle: ComponentTextStyle, color: string) => {\n  switch (size) {\n    case Size.XSmall:\n      return ComponentXXSStyling(textStyle, color);\n    case Size.Medium:\n      return ComponentMStyling(textStyle, color);\n    case Size.Small:\n    default:\n      return ComponentSStyling(textStyle, color);\n  }\n}\n\nconst LastBreadcrumbItem = styled.label<{size: Size}>`\n  ${(props) => FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800)}\n  ${(props) => marginRight(props.size) }\n`;\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ \n    items, \n    size = Size.Small, \n    homeIcon = true, \n    homeLabel = 'Home', \n    homeUrl = '/' }) => {\n\n  const history = useHistory();\n  const dropdownItems: DropdownItem[] = items ? items.slice(0, items.length - 2).map(x => ({ value: x.url, displayLabel: x.label })) : [];\n  const navigate = (links: string[]) => {    \n    history.push(links[0]);\n  };\n\n  const chevronSize = size == Size.Medium ? \"24px\" : size == Size.Small ? \"20px\" : \"16px\";\n\n  return (\n    <BreadcrumbContainer size={size}>\n\n      {homeIcon ? \n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => history.push(homeUrl)}>\n          <SystemIcons.Home size={chevronSize} />\n        </IconButton> : \n        <HyperLink id={\"homelink\"} variant=\"default\" href={homeUrl}>\n          {homeLabel}\n        </HyperLink>}\n\n      { !!items && items.length > 2 &&\n          (items.length > 3 ?\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <DropdownButton \n              alignLeft={true}\n              items={dropdownItems} \n              size={size}\n              icon={<SystemIcons.MoreHorizontal color={COLORS.neutral_600} size=\"20px\" />}\n              onClick={navigate} />\n          </> :\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <HyperLink id={\"link-item-\" + (items.length - 3)} target=\"_self\" variant=\"default\" href={items[items.length - 3].url}>\n              {items[items.length - 3].label}\n            </HyperLink>  \n          </>)\n      }\n\n      { !!items && items.length > 1 && \n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <HyperLink id={\"link-item-\" + (items.length - 2)} target=\"_self\" variant=\"default\" href={items[items.length - 2].url}>\n            {items[items.length - 2].label}\n          </HyperLink>\n        </>\n      }\n\n      { !!items && items.length > 0 && \n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <LastBreadcrumbItem size={size}>\n            {items[items.length - 1].label}\n          </LastBreadcrumbItem>\n        </>\n      }\n\n    </BreadcrumbContainer>);\n};\n\nexport default Breadcrumb;\n"],"file":"Breadcrumb.js"}
+{"version":3,"sources":["../../../src/Breadcrumb/Breadcrumb.tsx"],"names":["marginRight","size","Size","Small","Medium","BreadcrumbContainer","styled","div","props","FontStyles","ComponentTextStyle","Regular","COLORS","neutral_600","primary_700","primary_800","textStyle","color","XSmall","LastBreadcrumbItem","label","Bold","neutral_800","Breadcrumb","items","homeIcon","homeLabel","homeUrl","history","dropdownItems","slice","length","map","x","value","url","displayLabel","navigate","links","push","chevronSize","neutral_500"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS} from '../styles';\nimport {ComponentTextStyle, Size, SystemIcons} from '..';\nimport {useHistory} from 'react-router';\nimport { HyperLink, IconButton } from '..';\nimport {BreadcrumbItem} from '@laerdal/life-react-components/src/Breadcrumb/BreadcrumbItem';\nimport {ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\nimport DropdownButton from '../Dropdown/DropdownButton';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\n\ntype BreadcrumbProps = {\n  homeIcon?: boolean;\n  homeLabel?: string;\n  homeUrl?: string;\n  items?: BreadcrumbItem[];\n  size?: Size;\n};\n\nconst marginRight = (size: Size | undefined) => {\n  return size == Size.Small || size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;'\n}\n\nconst BreadcrumbContainer = styled.div<{size: Size | undefined}>`\n  display:flex;\n  align-items: center;\n  min-height: 48px;\n    \n  a {\n    text-decoration: none;\n    ${(props) => FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${(props) => marginRight(props.size) }\n  }\n\n  .chevronicon {\n    ${(props) => marginRight(props.size) }\n  }\n\n  a:hover {\n    color: ${COLORS.primary_700};\n  }\n  a:active {\n    color: ${COLORS.primary_800};\n  }\n`;\n\nconst FontStyles = (size: Size | undefined, textStyle: ComponentTextStyle, color: string) => {\n  switch (size) {\n    case Size.XSmall:\n      return ComponentXXSStyling(textStyle, color);\n    case Size.Medium:\n      return ComponentMStyling(textStyle, color);\n    case Size.Small:\n    default:\n      return ComponentSStyling(textStyle, color);\n  }\n}\n\nconst LastBreadcrumbItem = styled.label<{size: Size}>`\n  ${(props) => FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800)}\n  ${(props) => marginRight(props.size) }\n`;\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ \n    items, \n    size = Size.Small, \n    homeIcon = true, \n    homeLabel = 'Home', \n    homeUrl = '/' }) => {\n\n  const history = useHistory();\n  const dropdownItems: DropdownItem[] = items ? items.slice(0, items.length - 2).map(x => ({ value: x.url, displayLabel: x.label })) : [];\n  const navigate = (links: string[]) => {    \n    history.push(links[0]);\n  };\n\n  const chevronSize = size == Size.Medium ? \"24px\" : size == Size.Small ? \"20px\" : \"16px\";\n\n  return (\n    <BreadcrumbContainer size={size}>\n\n      {homeIcon ? \n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => history.push(homeUrl)}>\n          <SystemIcons.Home size={chevronSize} />\n        </IconButton> : \n        <HyperLink id={\"homelink\"} variant=\"default\" href={homeUrl}>\n          {homeLabel}\n        </HyperLink>}\n\n      { !!items && items.length > 2 &&\n          (items.length > 3 ?\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <DropdownButton \n              alignLeft={true}\n              items={dropdownItems} \n              size={size}\n              icon={<SystemIcons.MoreHorizontal color={COLORS.neutral_600} size=\"20px\" />}\n              onClick={navigate} />\n          </> :\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <HyperLink id={\"link-item-\" + (items.length - 3)} target=\"_self\" variant=\"default\" href={items[items.length - 3].url}>\n              {items[items.length - 3].label}\n            </HyperLink>  \n          </>)\n      }\n\n      { !!items && items.length > 1 && \n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <HyperLink id={\"link-item-\" + (items.length - 2)} target=\"_self\" variant=\"default\" href={items[items.length - 2].url}>\n            {items[items.length - 2].label}\n          </HyperLink>\n        </>\n      }\n\n      { !!items && items.length > 0 && \n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <LastBreadcrumbItem size={size}>\n            {items[items.length - 1].label}\n          </LastBreadcrumbItem>\n        </>\n      }\n\n    </BreadcrumbContainer>);\n};\n\nexport default Breadcrumb;\n"],"file":"Breadcrumb.js"}

package/dist/js/Button/Iconbutton.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 interface Props {
     id?: string;
     variant?: 'primary' | 'secondary';
@@ -17,6 +17,7 @@ interface Props {
     tabbedHereBackgroundColor?: string;
     type?: 'submit' | 'reset' | 'button' | undefined;
     children?: React.ReactNode;
+    hidden?: boolean;
 }
 declare const IconButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
 export default IconButton;

package/dist/js/Button/Iconbutton.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -99,7 +99,8 @@ var StyledSecondaryIconButton = (0, _styledComponents.default)(StyledIconButton)
   return props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : '';
 });
 ;
-var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+
+var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var id = _ref.id,
       variant = _ref.variant,
       shape = _ref.shape,
@@ -116,10 +117,12 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       borderRadius = _ref.borderRadius,
       onKeyPress = _ref.onKeyPress,
       tabbedHereBackgroundColor = _ref.tabbedHereBackgroundColor,
-      type = _ref.type;
-  var supressFocusRef = React.useRef(null);
+      type = _ref.type,
+      hidden = _ref.hidden;
+
+  var supressFocusRef = _react.default.useRef(null);
 
-  var _React$useState = React.useState(false),
+  var _React$useState = _react.default.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       tabbedHere = _React$useState2[0],
       setTabbedHere = _React$useState2[1];
@@ -132,12 +135,16 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
 
     return false;
-  }; // Let's render button
+  };
+
+  _react.default.useEffect(function () {
+    !!disabled && setTabbedHere(false);
+  }, [disabled]); // Let's render button
 
 
   switch (variant) {
     case 'secondary':
-      return /*#__PURE__*/React.createElement(StyledSecondaryIconButton, {
+      return /*#__PURE__*/_react.default.createElement(StyledSecondaryIconButton, {
         id: id,
         type: type !== null && type !== void 0 ? type : 'button',
         "data-testid": id,
@@ -169,12 +176,13 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         },
         tabbedHere: tabbedHere,
         onKeyPress: onKeyPress,
+        hidden: hidden,
         tabbedHereBackgroundColor: tabbedHereBackgroundColor
-      }, /*#__PURE__*/React.createElement("div", null, children));
+      }, /*#__PURE__*/_react.default.createElement("div", null, children));
 
     case 'primary':
     default:
-      return /*#__PURE__*/React.createElement(StyledPrimaryIconButton, {
+      return /*#__PURE__*/_react.default.createElement(StyledPrimaryIconButton, {
         id: id,
         type: type !== null && type !== void 0 ? type : 'button',
         "data-testid": id,
@@ -207,10 +215,12 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         },
         tabbedHere: tabbedHere,
         onKeyPress: onKeyPress,
+        hidden: hidden,
         tabbedHereBackgroundColor: tabbedHereBackgroundColor
-      }, /*#__PURE__*/React.createElement("div", null, children));
+      }, /*#__PURE__*/_react.default.createElement("div", null, children));
   }
 });
+
 IconButton.propTypes = {
   id: _propTypes.default.string,
   variant: _propTypes.default.oneOf(['primary', 'secondary']),
@@ -226,7 +236,8 @@ IconButton.propTypes = {
   borderRadius: _propTypes.default.number,
   onKeyPress: _propTypes.default.func,
   tabbedHereBackgroundColor: _propTypes.default.string,
-  children: _propTypes.default.node
+  children: _propTypes.default.node,
+  hidden: _propTypes.default.bool
 };
 var _default = IconButton;
 exports.default = _default;

package/dist/js/Button/Iconbutton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["tabbedHereStyle","variant","tabbedHereBackgroundColor","css","COLORS","primary_500","neutral_600","primary_700","white","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","styled","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","iconColor","primary_800","neutral_200","tabbedHere","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","supressFocusRef","useRef","useState","setTabbedHere","isPressingEnter","e","key","preventDefault","stopPropagation","event","current"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  tabbedHere?: boolean;\n  tabbedHereBackgroundColor?: string;\n}\n\nconst tabbedHereStyle = (variant: string, tabbedHereBackgroundColor?: string) => {\n  switch (variant) {\n    case 'secondary':\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;\n          box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.neutral_600};\n        }\n      `;\n    case 'primary':\n    default:\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || COLORS.primary_700} !important;\n          box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.white};\n        }\n      `;\n  }\n};\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px'); \n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch(props.flatEdge)\n  {\n      case 'left':\n          return `0px ${radius} ${radius} 0px`;\n      \n      case 'right':\n          return `${radius} 0px 0px ${radius}`;\n\n      case 'none':\n      default:\n          return `${radius}`;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none;\n    }\n  }\n`;\n\nconst StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : '')};\n`;\n\nconst StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : '')};\n`;\n\ninterface Props {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  tabbedHereBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n};\n\nconst IconButton = React.forwardRef<HTMLButtonElement, Props>(({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  flatEdge,\n  borderRadius,\n  onKeyPress,\n  tabbedHereBackgroundColor,\n  type,\n}: Props, ref) => {\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\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  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          flatEdge={flatEdge}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}
+{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["tabbedHereStyle","variant","tabbedHereBackgroundColor","css","COLORS","primary_500","neutral_600","primary_700","white","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","styled","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","iconColor","primary_800","neutral_200","tabbedHere","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","hidden","supressFocusRef","useRef","useState","setTabbedHere","isPressingEnter","e","key","preventDefault","stopPropagation","useEffect","event","current"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  tabbedHere?: boolean;\n  tabbedHereBackgroundColor?: string;\n}\n\nconst tabbedHereStyle = (variant: string, tabbedHereBackgroundColor?: string) => {\n  switch (variant) {\n    case 'secondary':\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;\n          box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.neutral_600};\n        }\n      `;\n    case 'primary':\n    default:\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || COLORS.primary_700} !important;\n          box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.white};\n        }\n      `;\n  }\n};\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px'); \n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch(props.flatEdge)\n  {\n      case 'left':\n          return `0px ${radius} ${radius} 0px`;\n      \n      case 'right':\n          return `${radius} 0px 0px ${radius}`;\n\n      case 'none':\n      default:\n          return `${radius}`;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none;\n    }\n  }\n`;\n\nconst StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : '')};\n`;\n\nconst StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : '')};\n`;\n\ninterface Props {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  tabbedHereBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n};\n\nconst IconButton = React.forwardRef<HTMLButtonElement, Props>(({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  flatEdge,\n  borderRadius,\n  onKeyPress,\n  tabbedHereBackgroundColor,\n  type,\n  hidden\n}: Props, ref) => {\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\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    !!disabled && setTabbedHere(false)\n  }, [disabled]);\n\n  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          flatEdge={flatEdge}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}

package/dist/js/Dropdown/CommonStyling.js

@@ -17,6 +17,8 @@ var _typography = require("../styles/typography");
 
 var _types = require("../types");
 
+var _zIndexes = require("../styles/z-indexes");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -59,7 +61,7 @@ exports.StyledField = StyledField;
 var ButtonDropdownContentStyling = (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  min-width: 344px;\n  right: 0;\n"])));
 exports.ButtonDropdownContentStyling = ButtonDropdownContentStyling;
 
-var DropdownContentStyling = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: none;\n  position: absolute;\n  background-color: ", ";\n  width: 100%;\n  z-index: 1;\n  margin-top: ", ";\n\n  &.show {\n    display: block;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ", ";\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  padding: 4px 0;\n\n  max-height: 240px;\n  overflow-y: auto;\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), _styles.COLORS.white, function (props) {
+var DropdownContentStyling = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: none;\n  position: absolute;\n  background-color: ", ";\n  width: 100%;\n  z-index: ", ";\n  margin-top: ", ";\n\n  &.show {\n    display: block;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ", ";\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  padding: 4px 0;\n\n  max-height: 240px;\n  overflow-y: auto;\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), _styles.COLORS.white, _zIndexes.Z_INDEXES.dropdown, function (props) {
   return props.isButton ? '-4px' : '2px';
 }, function (props) {
   return props.isButton ? ButtonDropdownContentStyling : '';