@laerdal/life-react-components 1.7.0-dev.5 → 1.7.0-dev.7

package/dist/Toasters/Toast.js

@@ -158,6 +158,7 @@ var Toast = function Toast(_ref) {
           size: Size.Small,
           variant: action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary',
           colorTheme: opts.color !== ToastColor.WHITE ? 'dark' : 'teal',
+          invertFocus: opts.color === ToastColor.BLACK,
           onClick: function onClick() {
             setShouldRemove(true);
             action.handler();
@@ -172,6 +173,7 @@ var Toast = function Toast(_ref) {
         variant: 'secondary',
         shape: "circular",
         useTransparentBackground: true,
+        invertFocus: opts.color === ToastColor.BLACK,
         action: function action(event) {
           return setShouldRemove(true);
         },

package/dist/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","useState","shouldRemove","setShouldRemove","width","height","dimensions","setDimensions","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    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  button svg path{\n    fill: ${COLORS.white} !important;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    button svg path {\n      fill: ${COLORS.neutral_600} !important;\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'}\n                      shape=\"circular\"\n                      useTransparentBackground={true}\n                      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","useState","shouldRemove","setShouldRemove","width","height","dimensions","setDimensions","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    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  button svg path{\n    fill: ${COLORS.white} !important;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    button svg path {\n      fill: ${COLORS.neutral_600} !important;\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              invertFocus={opts.color === ToastColor.BLACK}\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'}\n                      shape=\"circular\"\n                      useTransparentBackground={true}\n                      invertFocus={opts.color === ToastColor.BLACK}\n                      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/Toggles/ToggleSwitch.cjs

@@ -40,19 +40,21 @@ var ToggleSwitch = function ToggleSwitch(_ref) {
   /**
    * Does all required pre-requisites and toggles the switcher state.
    */
-  var handleClick = function handleClick() {
+  var toggle = function toggle() {
     // If disabled, don't do anything
-    if (disabled) {
-      return;
-    } // Toggle state change
-
+    if (disabled) return; // Toggle state change
 
     onToggle(!selected);
   };
 
   size = (_size = size) !== null && _size !== void 0 ? _size : _.Size.Medium;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TogglerStyles.StyledSwitch, {
-    onClick: handleClick,
+    onClick: function onClick(e) {
+      return toggle();
+    },
+    onKeyUp: function onKeyUp(e) {
+      return e.key === 'Enter' && toggle();
+    },
     className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
     selected: selected,
     tabIndex: disabled ? -1 : 0,

package/dist/Toggles/ToggleSwitch.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Toggles/ToggleSwitch.tsx"],"names":["ToggleSwitch","id","disabled","selected","label","isSemantic","size","onToggle","handleClick","Size","Medium","toString","toLowerCase","concat"],"mappings":";;;;;;;;;AAGA;;AAUA;;AACA;;;;;;;;AAdA;AACA;AACA;;AAQA;AACA;AACA;AAIA,IAAMA,YAAY,GAAG,SAAfA,YAAe,OAAsF;AAAA;;AAAA,MAAnFC,EAAmF,QAAnFA,EAAmF;AAAA,MAA/EC,QAA+E,QAA/EA,QAA+E;AAAA,MAArEC,QAAqE,QAArEA,QAAqE;AAAA,MAA3DC,KAA2D,QAA3DA,KAA2D;AAAA,MAApDC,UAAoD,QAApDA,UAAoD;AAAA,MAAxCC,IAAwC,QAAxCA,IAAwC;AAAA,MAAlCC,QAAkC,QAAlCA,QAAkC;;AACzG;AACF;AACA;AACE,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB;AACA,QAAIN,QAAJ,EAAc;AACZ;AACD,KAJuB,CAMxB;;;AACAK,IAAAA,QAAQ,CAAC,CAACJ,QAAF,CAAR;AACD,GARD;;AAUAG,EAAAA,IAAI,YAAGA,IAAH,yCAAWG,OAAKC,MAApB;AAEA,sBACE,sBAAC,2BAAD;AACE,IAAA,OAAO,EAAEF,WADX;AAEE,IAAA,SAAS,EAAEF,IAAI,CACZK,QADQ,GAERC,WAFQ,GAGRC,MAHQ,CAGDX,QAAQ,GAAG,WAAH,GAAiB,EAHxB,CAFb;AAME,IAAA,QAAQ,EAAEC,QANZ;AAOE,IAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAP5B;AAAA,4BAQE,qBAAC,oCAAD;AAAA,6BACE,qBAAC,2BAAD;AAAQ,QAAA,SAAS,EAAEG,UAAU,GAAG,UAAH,GAAgB;AAA7C;AADF,MARF,EAWGD,KAAK,iBACJ;AAAO,MAAA,SAAS,EAAE,OAAlB;AAA2B,MAAA,OAAO,EAAEH,EAApC;AAAA,gBACGG;AADH,MAZJ;AAAA,IADF;AAmBD,CAnCD;;eAqCeJ,Y","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom types.\n */\nimport { ToggleSwitchProps } from './TogglerTypes';\n\n/**\n * Import custom styles.\n */\nimport { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';\nimport { Size } from '..';\n\nconst ToggleSwitch = ({ id, disabled, selected, label, isSemantic, size, onToggle }: ToggleSwitchProps) => {\n  /**\n   * Does all required pre-requisites and toggles the switcher state.\n   */\n  const handleClick = () => {\n    // If disabled, don't do anything\n    if (disabled) {\n      return;\n    }\n\n    // Toggle state change\n    onToggle(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledSwitch\n      onClick={handleClick}\n      className={size\n        .toString()\n        .toLowerCase()\n        .concat(disabled ? ' disabled' : '')}\n      selected={selected}\n      tabIndex={disabled ? -1 : 0}>\n      <ToggleSwitchContainer>\n        <Switch className={isSemantic ? 'semantic' : ''} />\n      </ToggleSwitchContainer>\n      {label && (\n        <label className={'label'} htmlFor={id}>\n          {label}\n        </label>\n      )}\n    </StyledSwitch>\n  );\n};\n\nexport default ToggleSwitch;\n"],"file":"ToggleSwitch.cjs"}
+{"version":3,"sources":["../../src/Toggles/ToggleSwitch.tsx"],"names":["ToggleSwitch","id","disabled","selected","label","isSemantic","size","onToggle","toggle","Size","Medium","e","key","toString","toLowerCase","concat"],"mappings":";;;;;;;;;AAGA;;AAUA;;AACA;;;;;;;;AAdA;AACA;AACA;;AAQA;AACA;AACA;AAIA,IAAMA,YAAY,GAAG,SAAfA,YAAe,OAAsF;AAAA;;AAAA,MAAnFC,EAAmF,QAAnFA,EAAmF;AAAA,MAA/EC,QAA+E,QAA/EA,QAA+E;AAAA,MAArEC,QAAqE,QAArEA,QAAqE;AAAA,MAA3DC,KAA2D,QAA3DA,KAA2D;AAAA,MAApDC,UAAoD,QAApDA,UAAoD;AAAA,MAAxCC,IAAwC,QAAxCA,IAAwC;AAAA,MAAlCC,QAAkC,QAAlCA,QAAkC;;AACzG;AACF;AACA;AACE,MAAMC,MAAM,GAAG,SAATA,MAAS,GAAM;AACnB;AACA,QAAIN,QAAJ,EAAc,OAFK,CAInB;;AACAK,IAAAA,QAAQ,CAAC,CAACJ,QAAF,CAAR;AACD,GAND;;AAQAG,EAAAA,IAAI,YAAGA,IAAH,yCAAWG,OAAKC,MAApB;AAEA,sBACE,sBAAC,2BAAD;AACE,IAAA,OAAO,EAAE,iBAAAC,CAAC;AAAA,aAAIH,MAAM,EAAV;AAAA,KADZ;AAEE,IAAA,OAAO,EAAE,iBAAAG,CAAC;AAAA,aAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBJ,MAAM,EAA/B;AAAA,KAFZ;AAGE,IAAA,SAAS,EAAEF,IAAI,CACZO,QADQ,GAERC,WAFQ,GAGRC,MAHQ,CAGDb,QAAQ,GAAG,WAAH,GAAiB,EAHxB,CAHb;AAOE,IAAA,QAAQ,EAAEC,QAPZ;AAQE,IAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAR5B;AAAA,4BASE,qBAAC,oCAAD;AAAA,6BACE,qBAAC,2BAAD;AAAQ,QAAA,SAAS,EAAEG,UAAU,GAAG,UAAH,GAAgB;AAA7C;AADF,MATF,EAYGD,KAAK,iBACJ;AAAO,MAAA,SAAS,EAAE,OAAlB;AAA2B,MAAA,OAAO,EAAEH,EAApC;AAAA,gBACGG;AADH,MAbJ;AAAA,IADF;AAoBD,CAlCD;;eAoCeJ,Y","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom types.\n */\nimport { ToggleSwitchProps } from './TogglerTypes';\n\n/**\n * Import custom styles.\n */\nimport { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';\nimport { Size } from '..';\n\nconst ToggleSwitch = ({ id, disabled, selected, label, isSemantic, size, onToggle }: ToggleSwitchProps) => {\n  /**\n   * Does all required pre-requisites and toggles the switcher state.\n   */\n  const toggle = () => {\n    // If disabled, don't do anything\n    if (disabled) return;\n\n    // Toggle state change\n    onToggle(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledSwitch\n      onClick={e => toggle()}\n      onKeyUp={e => e.key === 'Enter' && toggle()}\n      className={size\n        .toString()\n        .toLowerCase()\n        .concat(disabled ? ' disabled' : '')}\n      selected={selected}\n      tabIndex={disabled ? -1 : 0}>\n      <ToggleSwitchContainer>\n        <Switch className={isSemantic ? 'semantic' : ''} />\n      </ToggleSwitchContainer>\n      {label && (\n        <label className={'label'} htmlFor={id}>\n          {label}\n        </label>\n      )}\n    </StyledSwitch>\n  );\n};\n\nexport default ToggleSwitch;\n"],"file":"ToggleSwitch.cjs"}

package/dist/Toggles/ToggleSwitch.js

@@ -28,19 +28,21 @@ var ToggleSwitch = function ToggleSwitch(_ref) {
   /**
    * Does all required pre-requisites and toggles the switcher state.
    */
-  var handleClick = function handleClick() {
+  var toggle = function toggle() {
     // If disabled, don't do anything
-    if (disabled) {
-      return;
-    } // Toggle state change
-
+    if (disabled) return; // Toggle state change
 
     onToggle(!selected);
   };
 
   size = (_size = size) !== null && _size !== void 0 ? _size : Size.Medium;
   return /*#__PURE__*/_jsxs(StyledSwitch, {
-    onClick: handleClick,
+    onClick: function onClick(e) {
+      return toggle();
+    },
+    onKeyUp: function onKeyUp(e) {
+      return e.key === 'Enter' && toggle();
+    },
     className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
     selected: selected,
     tabIndex: disabled ? -1 : 0,

package/dist/Toggles/ToggleSwitch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Toggles/ToggleSwitch.tsx"],"names":["React","ToggleSwitchContainer","ToggleSwitch","Switch","StyledSwitch","Size","id","disabled","selected","label","isSemantic","size","onToggle","handleClick","Medium","toString","toLowerCase","concat"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASC,qBAAT,EAAgCC,YAAY,IAAIC,MAAhD,EAAwDC,YAAxD,QAA4E,iBAA5E;AACA,SAASC,IAAT,QAAqB,IAArB;;;;AAEA,IAAMH,YAAY,GAAG,SAAfA,YAAe,OAAsF;AAAA;;AAAA,MAAnFI,EAAmF,QAAnFA,EAAmF;AAAA,MAA/EC,QAA+E,QAA/EA,QAA+E;AAAA,MAArEC,QAAqE,QAArEA,QAAqE;AAAA,MAA3DC,KAA2D,QAA3DA,KAA2D;AAAA,MAApDC,UAAoD,QAApDA,UAAoD;AAAA,MAAxCC,IAAwC,QAAxCA,IAAwC;AAAA,MAAlCC,QAAkC,QAAlCA,QAAkC;;AACzG;AACF;AACA;AACE,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB;AACA,QAAIN,QAAJ,EAAc;AACZ;AACD,KAJuB,CAMxB;;;AACAK,IAAAA,QAAQ,CAAC,CAACJ,QAAF,CAAR;AACD,GARD;;AAUAG,EAAAA,IAAI,YAAGA,IAAH,yCAAWN,IAAI,CAACS,MAApB;AAEA,sBACE,MAAC,YAAD;AACE,IAAA,OAAO,EAAED,WADX;AAEE,IAAA,SAAS,EAAEF,IAAI,CACZI,QADQ,GAERC,WAFQ,GAGRC,MAHQ,CAGDV,QAAQ,GAAG,WAAH,GAAiB,EAHxB,CAFb;AAME,IAAA,QAAQ,EAAEC,QANZ;AAOE,IAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAP5B;AAAA,4BAQE,KAAC,qBAAD;AAAA,6BACE,KAAC,MAAD;AAAQ,QAAA,SAAS,EAAEG,UAAU,GAAG,UAAH,GAAgB;AAA7C;AADF,MARF,EAWGD,KAAK,iBACJ;AAAO,MAAA,SAAS,EAAE,OAAlB;AAA2B,MAAA,OAAO,EAAEH,EAApC;AAAA,gBACGG;AADH,MAZJ;AAAA,IADF;AAmBD,CAnCD;;AAqCA,eAAeP,YAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom types.\n */\nimport { ToggleSwitchProps } from './TogglerTypes';\n\n/**\n * Import custom styles.\n */\nimport { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';\nimport { Size } from '..';\n\nconst ToggleSwitch = ({ id, disabled, selected, label, isSemantic, size, onToggle }: ToggleSwitchProps) => {\n  /**\n   * Does all required pre-requisites and toggles the switcher state.\n   */\n  const handleClick = () => {\n    // If disabled, don't do anything\n    if (disabled) {\n      return;\n    }\n\n    // Toggle state change\n    onToggle(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledSwitch\n      onClick={handleClick}\n      className={size\n        .toString()\n        .toLowerCase()\n        .concat(disabled ? ' disabled' : '')}\n      selected={selected}\n      tabIndex={disabled ? -1 : 0}>\n      <ToggleSwitchContainer>\n        <Switch className={isSemantic ? 'semantic' : ''} />\n      </ToggleSwitchContainer>\n      {label && (\n        <label className={'label'} htmlFor={id}>\n          {label}\n        </label>\n      )}\n    </StyledSwitch>\n  );\n};\n\nexport default ToggleSwitch;\n"],"file":"ToggleSwitch.js"}
+{"version":3,"sources":["../../src/Toggles/ToggleSwitch.tsx"],"names":["React","ToggleSwitchContainer","ToggleSwitch","Switch","StyledSwitch","Size","id","disabled","selected","label","isSemantic","size","onToggle","toggle","Medium","e","key","toString","toLowerCase","concat"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASC,qBAAT,EAAgCC,YAAY,IAAIC,MAAhD,EAAwDC,YAAxD,QAA4E,iBAA5E;AACA,SAASC,IAAT,QAAqB,IAArB;;;;AAEA,IAAMH,YAAY,GAAG,SAAfA,YAAe,OAAsF;AAAA;;AAAA,MAAnFI,EAAmF,QAAnFA,EAAmF;AAAA,MAA/EC,QAA+E,QAA/EA,QAA+E;AAAA,MAArEC,QAAqE,QAArEA,QAAqE;AAAA,MAA3DC,KAA2D,QAA3DA,KAA2D;AAAA,MAApDC,UAAoD,QAApDA,UAAoD;AAAA,MAAxCC,IAAwC,QAAxCA,IAAwC;AAAA,MAAlCC,QAAkC,QAAlCA,QAAkC;;AACzG;AACF;AACA;AACE,MAAMC,MAAM,GAAG,SAATA,MAAS,GAAM;AACnB;AACA,QAAIN,QAAJ,EAAc,OAFK,CAInB;;AACAK,IAAAA,QAAQ,CAAC,CAACJ,QAAF,CAAR;AACD,GAND;;AAQAG,EAAAA,IAAI,YAAGA,IAAH,yCAAWN,IAAI,CAACS,MAApB;AAEA,sBACE,MAAC,YAAD;AACE,IAAA,OAAO,EAAE,iBAAAC,CAAC;AAAA,aAAIF,MAAM,EAAV;AAAA,KADZ;AAEE,IAAA,OAAO,EAAE,iBAAAE,CAAC;AAAA,aAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBH,MAAM,EAA/B;AAAA,KAFZ;AAGE,IAAA,SAAS,EAAEF,IAAI,CACZM,QADQ,GAERC,WAFQ,GAGRC,MAHQ,CAGDZ,QAAQ,GAAG,WAAH,GAAiB,EAHxB,CAHb;AAOE,IAAA,QAAQ,EAAEC,QAPZ;AAQE,IAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAR5B;AAAA,4BASE,KAAC,qBAAD;AAAA,6BACE,KAAC,MAAD;AAAQ,QAAA,SAAS,EAAEG,UAAU,GAAG,UAAH,GAAgB;AAA7C;AADF,MATF,EAYGD,KAAK,iBACJ;AAAO,MAAA,SAAS,EAAE,OAAlB;AAA2B,MAAA,OAAO,EAAEH,EAApC;AAAA,gBACGG;AADH,MAbJ;AAAA,IADF;AAoBD,CAlCD;;AAoCA,eAAeP,YAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom types.\n */\nimport { ToggleSwitchProps } from './TogglerTypes';\n\n/**\n * Import custom styles.\n */\nimport { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';\nimport { Size } from '..';\n\nconst ToggleSwitch = ({ id, disabled, selected, label, isSemantic, size, onToggle }: ToggleSwitchProps) => {\n  /**\n   * Does all required pre-requisites and toggles the switcher state.\n   */\n  const toggle = () => {\n    // If disabled, don't do anything\n    if (disabled) return;\n\n    // Toggle state change\n    onToggle(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledSwitch\n      onClick={e => toggle()}\n      onKeyUp={e => e.key === 'Enter' && toggle()}\n      className={size\n        .toString()\n        .toLowerCase()\n        .concat(disabled ? ' disabled' : '')}\n      selected={selected}\n      tabIndex={disabled ? -1 : 0}>\n      <ToggleSwitchContainer>\n        <Switch className={isSemantic ? 'semantic' : ''} />\n      </ToggleSwitchContainer>\n      {label && (\n        <label className={'label'} htmlFor={id}>\n          {label}\n        </label>\n      )}\n    </StyledSwitch>\n  );\n};\n\nexport default ToggleSwitch;\n"],"file":"ToggleSwitch.js"}

package/dist/Toggles/TogglerStyles.cjs

@@ -23,9 +23,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var StyledSwitch = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ", "\n  }\n\n  &.medium {\n    ", "\n  }\n\n  &.large {\n    ", "\n  }\n  &.disabled {\n    color: ", ";\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  ", "\n  &:not(.disabled):focus label:first-of-type span {\n    box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", ";\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.neutral_300, _styles.COLORS.primary_100, function (props) {
+var StyledSwitch = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ", "\n  }\n\n  &.medium {\n    ", "\n  }\n\n  &.large {\n    ", "\n  }\n  &.disabled {\n    color: ", ";\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  ", "\n  &:not(.disabled):focus {\n    ", "\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.neutral_300, _styles.COLORS.primary_100, function (props) {
   return props.selected ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n          &.disabled label:first-of-type span {\n            background-color: ", " !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ", " !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover span {\n            &.semantic {\n              background-color: ", ";\n            }\n\n            &:before {\n              background-color: ", ";\n            }\n          }\n          label:first-of-type span {\n            background-color: ", ";\n\n            &.semantic {\n              background-color: ", ";\n            }\n\n            &:before {\n              -webkit-transform: translateX(20px);\n              -ms-transform: translateX(20px);\n              transform: translateX(20px);\n            }\n          }\n        "])), _styles.COLORS.neutral_300, _styles.COLORS.neutral_200, _styles.COLORS.correct_500, _styles.COLORS.primary_20, _styles.COLORS.primary_500, _styles.COLORS.correct_500) : (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n          &.disabled label:first-of-type span {\n            background-color: ", " !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ", " !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover label:first-of-type span {\n            &.semantic {\n              background-color: ", ";\n            }\n\n            &:before {\n              background-color: ", ";\n            }\n          }\n        "])), _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.critical_500, _styles.COLORS.primary_20);
-}, _styles.COLORS.focus_25, _styles.COLORS.focus);
+}, _styles.focusStyles);
 
 exports.StyledSwitch = StyledSwitch;
 

package/dist/Toggles/TogglerStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Toggles/TogglerStyles.ts"],"names":["StyledSwitch","styled","div","ComponentTextStyle","Regular","COLORS","black","neutral_300","primary_100","props","selected","css","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","focus_25","focus","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AACA;;;;;;;;AAEO,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,ixBASnB,mCAAkBC,+BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CATmB,EAanB,mCAAkBH,+BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CAbmB,EAiBnB,mCAAkBH,+BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CAjBmB,EAoBZD,eAAOE,WApBK,EAiCCF,eAAOG,WAjCR,EAqCrB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,OACIC,qBADJ,05BAG4BN,eAAOE,WAHnC,EAO8BF,eAAOO,WAPrC,EAa8BP,eAAOQ,WAbrC,EAiB8BR,eAAOS,UAjBrC,EAqB4BT,eAAOU,WArBnC,EAwB8BV,eAAOQ,WAxBrC,QAkCIF,qBAlCJ,2kBAoC4BN,eAAOE,WApCnC,EAwC8BF,eAAOW,WAxCrC,EA8C8BX,eAAOY,YA9CrC,EAkD8BZ,eAAOS,UAlDrC,CADA;AAAA,CArCqB,EA6FMT,eAAOa,QA7Fb,EA6FsCb,eAAOc,KA7F7C,CAAlB;;;;AAqGA,IAAMC,qBAAqB,GAAGnB,0BAAOoB,KAAV,sNAA3B;;;;AASA,IAAMC,YAAY,GAAGrB,0BAAOsB,IAAV,8rBAWHlB,eAAOmB,WAXJ,EAeDnB,eAAOY,YAfN,EAyBDZ,eAAOoB,KAzBN,CAAlB","sourcesContent":["/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n  &.disabled {\n    color: ${COLORS.neutral_300};\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ${COLORS.primary_100};\n    }\n  }\n\n  ${(props) =>\n    props.selected\n      ? css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_200} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover span {\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n          label:first-of-type span {\n            background-color: ${COLORS.primary_500};\n\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              -webkit-transform: translateX(20px);\n              -ms-transform: translateX(20px);\n              transform: translateX(20px);\n            }\n          }\n        `\n      : css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_100} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover label:first-of-type span {\n            &.semantic {\n              background-color: ${COLORS.critical_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n        `}\n  &:not(.disabled):focus label:first-of-type span {\n    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n`;\n\nexport const ToggleSwitchContainer = styled.label`\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n  height: 28px;\n  width: auto;\n  padding: 10px 6px;\n`;\n\nexport const ToggleSwitch = styled.span`\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 36px;\n  height: 16px;\n  background-color: ${COLORS.neutral_500};\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ${COLORS.critical_500};\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 12px;\n    width: 12px;\n    left: 2px;\n    top: calc(50% - 6px);\n    background-color: ${COLORS.white};\n    -webkit-transition: background-color 0.1s, transform 0.1s;\n    transition: 0.1s;\n    transition-timing-function: ease-in-out;\n    border-radius: 50%;\n  }\n`;\n"],"file":"TogglerStyles.cjs"}
+{"version":3,"sources":["../../src/Toggles/TogglerStyles.ts"],"names":["StyledSwitch","styled","div","ComponentTextStyle","Regular","COLORS","black","neutral_300","primary_100","props","selected","css","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","focusStyles","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AACA;;;;;;;;AAEO,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,4sBASnB,mCAAkBC,+BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CATmB,EAanB,mCAAkBH,+BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CAbmB,EAiBnB,mCAAkBH,+BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CAjBmB,EAoBZD,eAAOE,WApBK,EAiCCF,eAAOG,WAjCR,EAqCrB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,OACIC,qBADJ,05BAG4BN,eAAOE,WAHnC,EAO8BF,eAAOO,WAPrC,EAa8BP,eAAOQ,WAbrC,EAiB8BR,eAAOS,UAjBrC,EAqB4BT,eAAOU,WArBnC,EAwB8BV,eAAOQ,WAxBrC,QAkCIF,qBAlCJ,2kBAoC4BN,eAAOE,WApCnC,EAwC8BF,eAAOW,WAxCrC,EA8C8BX,eAAOY,YA9CrC,EAkD8BZ,eAAOS,UAlDrC,CADA;AAAA,CArCqB,EA6FnBI,mBA7FmB,CAAlB;;;;AAqGA,IAAMC,qBAAqB,GAAGlB,0BAAOmB,KAAV,sNAA3B;;;;AASA,IAAMC,YAAY,GAAGpB,0BAAOqB,IAAV,8rBAWHjB,eAAOkB,WAXJ,EAeDlB,eAAOY,YAfN,EAyBDZ,eAAOmB,KAzBN,CAAlB","sourcesContent":["/**\n * Import custom styles.\n */\nimport {COLORS, focusStyles} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n  &.disabled {\n    color: ${COLORS.neutral_300};\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ${COLORS.primary_100};\n    }\n  }\n\n  ${(props) =>\n    props.selected\n      ? css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_200} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover span {\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n          label:first-of-type span {\n            background-color: ${COLORS.primary_500};\n\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              -webkit-transform: translateX(20px);\n              -ms-transform: translateX(20px);\n              transform: translateX(20px);\n            }\n          }\n        `\n      : css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_100} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover label:first-of-type span {\n            &.semantic {\n              background-color: ${COLORS.critical_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n        `}\n  &:not(.disabled):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n`;\n\nexport const ToggleSwitchContainer = styled.label`\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n  height: 28px;\n  width: auto;\n  padding: 10px 6px;\n`;\n\nexport const ToggleSwitch = styled.span`\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 36px;\n  height: 16px;\n  background-color: ${COLORS.neutral_500};\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ${COLORS.critical_500};\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 12px;\n    width: 12px;\n    left: 2px;\n    top: calc(50% - 6px);\n    background-color: ${COLORS.white};\n    -webkit-transition: background-color 0.1s, transform 0.1s;\n    transition: 0.1s;\n    transition-timing-function: ease-in-out;\n    border-radius: 50%;\n  }\n`;\n"],"file":"TogglerStyles.cjs"}

package/dist/Toggles/TogglerStyles.js

@@ -5,16 +5,16 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 /**
  * Import custom styles.
  */
-import { COLORS } from '../styles';
+import { COLORS, focusStyles } from '../styles';
 /**
  * Import third-party libraries.
  */
 
 import styled, { css } from 'styled-components';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
-export var StyledSwitch = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ", "\n  }\n\n  &.medium {\n    ", "\n  }\n\n  &.large {\n    ", "\n  }\n  &.disabled {\n    color: ", ";\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  ", "\n  &:not(.disabled):focus label:first-of-type span {\n    box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", ";\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentLStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.neutral_300, COLORS.primary_100, function (props) {
+export var StyledSwitch = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ", "\n  }\n\n  &.medium {\n    ", "\n  }\n\n  &.large {\n    ", "\n  }\n  &.disabled {\n    color: ", ";\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  ", "\n  &:not(.disabled):focus {\n    ", "\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentLStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.neutral_300, COLORS.primary_100, function (props) {
   return props.selected ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          &.disabled label:first-of-type span {\n            background-color: ", " !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ", " !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover span {\n            &.semantic {\n              background-color: ", ";\n            }\n\n            &:before {\n              background-color: ", ";\n            }\n          }\n          label:first-of-type span {\n            background-color: ", ";\n\n            &.semantic {\n              background-color: ", ";\n            }\n\n            &:before {\n              -webkit-transform: translateX(20px);\n              -ms-transform: translateX(20px);\n              transform: translateX(20px);\n            }\n          }\n        "])), COLORS.neutral_300, COLORS.neutral_200, COLORS.correct_500, COLORS.primary_20, COLORS.primary_500, COLORS.correct_500) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          &.disabled label:first-of-type span {\n            background-color: ", " !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ", " !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover label:first-of-type span {\n            &.semantic {\n              background-color: ", ";\n            }\n\n            &:before {\n              background-color: ", ";\n            }\n          }\n        "])), COLORS.neutral_300, COLORS.neutral_100, COLORS.critical_500, COLORS.primary_20);
-}, COLORS.focus_25, COLORS.focus);
+}, focusStyles);
 export var ToggleSwitchContainer = styled.label(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n  height: 28px;\n  width: auto;\n  padding: 10px 6px;\n"])));
 export var ToggleSwitch = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 36px;\n  height: 16px;\n  background-color: ", ";\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ", ";\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 12px;\n    width: 12px;\n    left: 2px;\n    top: calc(50% - 6px);\n    background-color: ", ";\n    -webkit-transition: background-color 0.1s, transform 0.1s;\n    transition: 0.1s;\n    transition-timing-function: ease-in-out;\n    border-radius: 50%;\n  }\n"])), COLORS.neutral_500, COLORS.critical_500, COLORS.white);
 //# sourceMappingURL=TogglerStyles.js.map

package/dist/Toggles/TogglerStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Toggles/TogglerStyles.ts"],"names":["COLORS","styled","css","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","StyledSwitch","div","Regular","black","neutral_300","primary_100","props","selected","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","focus_25","focus","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"mappings":";;;;AAAA;AACA;AACA;AACA,SAASA,MAAT,QAAuB,WAAvB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,iBAAT,EAA4BC,iBAA5B,EAA+CC,iBAA/C,EAAkEC,kBAAlE,QAA4F,sBAA5F;AAEA,OAAO,IAAMC,YAAY,GAAGN,MAAM,CAACO,GAAV,mwBASnBH,iBAAiB,CAACC,kBAAkB,CAACG,OAApB,EAA6BT,MAAM,CAACU,KAApC,CATE,EAanBN,iBAAiB,CAACE,kBAAkB,CAACG,OAApB,EAA6BT,MAAM,CAACU,KAApC,CAbE,EAiBnBP,iBAAiB,CAACG,kBAAkB,CAACG,OAApB,EAA6BT,MAAM,CAACU,KAApC,CAjBE,EAoBZV,MAAM,CAACW,WApBK,EAiCCX,MAAM,CAACY,WAjCR,EAqCrB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,GACIZ,GADJ,24BAG4BF,MAAM,CAACW,WAHnC,EAO8BX,MAAM,CAACe,WAPrC,EAa8Bf,MAAM,CAACgB,WAbrC,EAiB8BhB,MAAM,CAACiB,UAjBrC,EAqB4BjB,MAAM,CAACkB,WArBnC,EAwB8BlB,MAAM,CAACgB,WAxBrC,IAkCId,GAlCJ,4jBAoC4BF,MAAM,CAACW,WApCnC,EAwC8BX,MAAM,CAACmB,WAxCrC,EA8C8BnB,MAAM,CAACoB,YA9CrC,EAkD8BpB,MAAM,CAACiB,UAlDrC,CADA;AAAA,CArCqB,EA6FMjB,MAAM,CAACqB,QA7Fb,EA6FsCrB,MAAM,CAACsB,KA7F7C,CAAlB;AAqGP,OAAO,IAAMC,qBAAqB,GAAGtB,MAAM,CAACuB,KAAV,wMAA3B;AASP,OAAO,IAAMC,YAAY,GAAGxB,MAAM,CAACyB,IAAV,grBAWH1B,MAAM,CAAC2B,WAXJ,EAeD3B,MAAM,CAACoB,YAfN,EAyBDpB,MAAM,CAAC4B,KAzBN,CAAlB","sourcesContent":["/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n  &.disabled {\n    color: ${COLORS.neutral_300};\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ${COLORS.primary_100};\n    }\n  }\n\n  ${(props) =>\n    props.selected\n      ? css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_200} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover span {\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n          label:first-of-type span {\n            background-color: ${COLORS.primary_500};\n\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              -webkit-transform: translateX(20px);\n              -ms-transform: translateX(20px);\n              transform: translateX(20px);\n            }\n          }\n        `\n      : css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_100} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover label:first-of-type span {\n            &.semantic {\n              background-color: ${COLORS.critical_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n        `}\n  &:not(.disabled):focus label:first-of-type span {\n    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n`;\n\nexport const ToggleSwitchContainer = styled.label`\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n  height: 28px;\n  width: auto;\n  padding: 10px 6px;\n`;\n\nexport const ToggleSwitch = styled.span`\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 36px;\n  height: 16px;\n  background-color: ${COLORS.neutral_500};\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ${COLORS.critical_500};\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 12px;\n    width: 12px;\n    left: 2px;\n    top: calc(50% - 6px);\n    background-color: ${COLORS.white};\n    -webkit-transition: background-color 0.1s, transform 0.1s;\n    transition: 0.1s;\n    transition-timing-function: ease-in-out;\n    border-radius: 50%;\n  }\n`;\n"],"file":"TogglerStyles.js"}
+{"version":3,"sources":["../../src/Toggles/TogglerStyles.ts"],"names":["COLORS","focusStyles","styled","css","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","StyledSwitch","div","Regular","black","neutral_300","primary_100","props","selected","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"mappings":";;;;AAAA;AACA;AACA;AACA,SAAQA,MAAR,EAAgBC,WAAhB,QAAkC,WAAlC;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,iBAAT,EAA4BC,iBAA5B,EAA+CC,iBAA/C,EAAkEC,kBAAlE,QAA4F,sBAA5F;AAEA,OAAO,IAAMC,YAAY,GAAGN,MAAM,CAACO,GAAV,8rBASnBH,iBAAiB,CAACC,kBAAkB,CAACG,OAApB,EAA6BV,MAAM,CAACW,KAApC,CATE,EAanBN,iBAAiB,CAACE,kBAAkB,CAACG,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAbE,EAiBnBP,iBAAiB,CAACG,kBAAkB,CAACG,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAjBE,EAoBZX,MAAM,CAACY,WApBK,EAiCCZ,MAAM,CAACa,WAjCR,EAqCrB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,GACIZ,GADJ,24BAG4BH,MAAM,CAACY,WAHnC,EAO8BZ,MAAM,CAACgB,WAPrC,EAa8BhB,MAAM,CAACiB,WAbrC,EAiB8BjB,MAAM,CAACkB,UAjBrC,EAqB4BlB,MAAM,CAACmB,WArBnC,EAwB8BnB,MAAM,CAACiB,WAxBrC,IAkCId,GAlCJ,4jBAoC4BH,MAAM,CAACY,WApCnC,EAwC8BZ,MAAM,CAACoB,WAxCrC,EA8C8BpB,MAAM,CAACqB,YA9CrC,EAkD8BrB,MAAM,CAACkB,UAlDrC,CADA;AAAA,CArCqB,EA6FnBjB,WA7FmB,CAAlB;AAqGP,OAAO,IAAMqB,qBAAqB,GAAGpB,MAAM,CAACqB,KAAV,wMAA3B;AASP,OAAO,IAAMC,YAAY,GAAGtB,MAAM,CAACuB,IAAV,grBAWHzB,MAAM,CAAC0B,WAXJ,EAeD1B,MAAM,CAACqB,YAfN,EAyBDrB,MAAM,CAAC2B,KAzBN,CAAlB","sourcesContent":["/**\n * Import custom styles.\n */\nimport {COLORS, focusStyles} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n  &.disabled {\n    color: ${COLORS.neutral_300};\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ${COLORS.primary_100};\n    }\n  }\n\n  ${(props) =>\n    props.selected\n      ? css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_200} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover span {\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n          label:first-of-type span {\n            background-color: ${COLORS.primary_500};\n\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              -webkit-transform: translateX(20px);\n              -ms-transform: translateX(20px);\n              transform: translateX(20px);\n            }\n          }\n        `\n      : css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_100} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover label:first-of-type span {\n            &.semantic {\n              background-color: ${COLORS.critical_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n        `}\n  &:not(.disabled):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n`;\n\nexport const ToggleSwitchContainer = styled.label`\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n  height: 28px;\n  width: auto;\n  padding: 10px 6px;\n`;\n\nexport const ToggleSwitch = styled.span`\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 36px;\n  height: 16px;\n  background-color: ${COLORS.neutral_500};\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ${COLORS.critical_500};\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 12px;\n    width: 12px;\n    left: 2px;\n    top: calc(50% - 6px);\n    background-color: ${COLORS.white};\n    -webkit-transition: background-color 0.1s, transform 0.1s;\n    transition: 0.1s;\n    transition-timing-function: ease-in-out;\n    border-radius: 50%;\n  }\n`;\n"],"file":"TogglerStyles.js"}

package/dist/Tooltips/TooltipStyles.cjs

@@ -88,9 +88,9 @@ var TooltipTrigger = function TooltipTrigger(delay) {
 
 exports.TooltipTrigger = TooltipTrigger;
 
-var TooltipContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  position: relative;\n\n  ", "\n"])), function (props) {
+var TooltipContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  position: relative;\n\n  ", "\n  \n  &:focus{\n    ", "\n  }\n"])), function (props) {
   return TooltipTrigger(props.delay);
-});
+}, _styles.focusStyles);
 
 exports.TooltipContainer = TooltipContainer;
 //# sourceMappingURL=TooltipStyles.cjs.map

package/dist/Tooltips/TooltipStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tooltips/TooltipStyles.tsx"],"names":["distanceToEdge","size","Size","XSmall","Small","Tooltip","styled","div","props","Medium","ComponentTextStyle","Regular","COLORS","white","align","BOXSHADOWS","BOXSHADOW_L2","height","primary_800","Z_INDEXES","tooltip","position","withArrow","defaultProps","TooltipTrigger","delay","css","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 = (delay?: string) => css`\n  &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: ${delay ?? '1s'};\n  }\n`;\n\nexport const TooltipContainer = styled.div<{delay?: string}>`\n  display: inline-block;\n  position: relative;\n\n  ${props => TooltipTrigger(props.delay)}\n`;\n"],"file":"TooltipStyles.cjs"}
+{"version":3,"sources":["../../src/Tooltips/TooltipStyles.tsx"],"names":["distanceToEdge","size","Size","XSmall","Small","Tooltip","styled","div","props","Medium","ComponentTextStyle","Regular","COLORS","white","align","BOXSHADOWS","BOXSHADOW_L2","height","primary_800","Z_INDEXES","tooltip","position","withArrow","defaultProps","TooltipTrigger","delay","css","TooltipContainer","focusStyles"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport {BOXSHADOWS, COLORS, ComponentTextStyle, focusStyles} 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 = (delay?: string) => css`\n  &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: ${delay ?? '1s'};\n  }\n`;\n\nexport const TooltipContainer = styled.div<{delay?: string}>`\n  display: inline-block;\n  position: relative;\n\n  ${props => TooltipTrigger(props.delay)}\n  \n  &:focus{\n    ${focusStyles}\n  }\n`;\n"],"file":"TooltipStyles.cjs"}

package/dist/Tooltips/TooltipStyles.js

@@ -4,7 +4,7 @@ var _templateObject, _templateObject2, _templateObject3;
 
 import styled, { css } from 'styled-components';
 import { Size } from '../types';
-import { BOXSHADOWS, COLORS, ComponentTextStyle } from '../styles';
+import { BOXSHADOWS, COLORS, ComponentTextStyle, focusStyles } from '../styles';
 import { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';
 import { Z_INDEXES } from '../styles/z-indexes';
 
@@ -63,7 +63,7 @@ Tooltip.defaultProps = {
 export var TooltipTrigger = function TooltipTrigger(delay) {
   return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &:hover ", ", &:focus-within ", ", &:focus ", " {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: ", ";\n  }\n"])), Tooltip, Tooltip, Tooltip, delay !== null && delay !== void 0 ? delay : '1s');
 };
-export var TooltipContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  position: relative;\n\n  ", "\n"])), function (props) {
+export var TooltipContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  position: relative;\n\n  ", "\n  \n  &:focus{\n    ", "\n  }\n"])), function (props) {
   return TooltipTrigger(props.delay);
-});
+}, focusStyles);
 //# sourceMappingURL=TooltipStyles.js.map

package/dist/Tooltips/TooltipStyles.js.map

@@ -1 +1 @@
-{"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","delay","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 = (delay?: string) => css`\n  &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: ${delay ?? '1s'};\n  }\n`;\n\nexport const TooltipContainer = styled.div<{delay?: string}>`\n  display: inline-block;\n  position: relative;\n\n  ${props => TooltipTrigger(props.delay)}\n`;\n"],"file":"TooltipStyles.js"}
+{"version":3,"sources":["../../src/Tooltips/TooltipStyles.tsx"],"names":["styled","css","Size","BOXSHADOWS","COLORS","ComponentTextStyle","focusStyles","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","delay","TooltipContainer"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport {BOXSHADOWS, COLORS, ComponentTextStyle, focusStyles} 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 = (delay?: string) => css`\n  &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: ${delay ?? '1s'};\n  }\n`;\n\nexport const TooltipContainer = styled.div<{delay?: string}>`\n  display: inline-block;\n  position: relative;\n\n  ${props => TooltipTrigger(props.delay)}\n  \n  &:focus{\n    ${focusStyles}\n  }\n`;\n"],"file":"TooltipStyles.js"}

package/dist/Tooltips/TooltipTypes.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tooltips/TooltipTypes.tsx"],"names":[],"mappings":";;;;;;AAEA;AACA;AACA;AAWG","sourcesContent":["import { Size } from \"../types\";\n\n/**\n * Types for the table.\n */\n export interface TooltipProps {\n    label?: string;\n    withArrow?: boolean;\n    width?: string;\n    size?: Size;\n    delay?: string;\n    height?: string;\n    align? : 'start' | 'end' | 'center' | undefined;\n    position? : 'top' | 'right' | 'bottom' | 'left' | undefined;\n    children?: React.ReactNode;\n  };\n  "],"file":"TooltipTypes.cjs"}
+{"version":3,"sources":["../../src/Tooltips/TooltipTypes.tsx"],"names":[],"mappings":";;;;;;AAEA;AACA;AACA;AAYG","sourcesContent":["import { Size } from \"../types\";\n\n/**\n * Types for the table.\n */\n export interface TooltipProps {\n    label?: string;\n    withArrow?: boolean;\n    width?: string;\n    size?: Size;\n    delay?: string;\n    tabIndex?: number;\n    height?: string;\n    align? : 'start' | 'end' | 'center' | undefined;\n    position? : 'top' | 'right' | 'bottom' | 'left' | undefined;\n    children?: React.ReactNode;\n  };\n"],"file":"TooltipTypes.cjs"}

package/dist/Tooltips/TooltipTypes.d.ts

@@ -8,6 +8,7 @@ export interface TooltipProps {
     width?: string;
     size?: Size;
     delay?: string;
+    tabIndex?: number;
     height?: string;
     align?: 'start' | 'end' | 'center' | undefined;
     position?: 'top' | 'right' | 'bottom' | 'left' | undefined;

package/dist/Tooltips/TooltipTypes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tooltips/TooltipTypes.tsx"],"names":[],"mappings":"AAEA;AACA;AACA;AAWG","sourcesContent":["import { Size } from \"../types\";\n\n/**\n * Types for the table.\n */\n export interface TooltipProps {\n    label?: string;\n    withArrow?: boolean;\n    width?: string;\n    size?: Size;\n    delay?: string;\n    height?: string;\n    align? : 'start' | 'end' | 'center' | undefined;\n    position? : 'top' | 'right' | 'bottom' | 'left' | undefined;\n    children?: React.ReactNode;\n  };\n  "],"file":"TooltipTypes.js"}
+{"version":3,"sources":["../../src/Tooltips/TooltipTypes.tsx"],"names":[],"mappings":"AAEA;AACA;AACA;AAYG","sourcesContent":["import { Size } from \"../types\";\n\n/**\n * Types for the table.\n */\n export interface TooltipProps {\n    label?: string;\n    withArrow?: boolean;\n    width?: string;\n    size?: Size;\n    delay?: string;\n    tabIndex?: number;\n    height?: string;\n    align? : 'start' | 'end' | 'center' | undefined;\n    position? : 'top' | 'right' | 'bottom' | 'left' | undefined;\n    children?: React.ReactNode;\n  };\n"],"file":"TooltipTypes.js"}

package/dist/Tooltips/TooltipWrapper.cjs

@@ -23,6 +23,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
   var label = _ref.label,
       children = _ref.children,
       withArrow = _ref.withArrow,
+      tabIndex = _ref.tabIndex,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? _.Size.Small : _ref$size,
       _ref$height = _ref.height,
@@ -35,6 +36,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
       position = _ref$position === void 0 ? 'bottom' : _ref$position;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TooltipStyles.TooltipContainer, {
     delay: delay,
+    tabIndex: tabIndex,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipStyles.Tooltip, {
       align: align,
       height: height,

package/dist/Tooltips/TooltipWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tooltips/TooltipWrapper.tsx"],"names":["TooltipWrapper","label","children","withArrow","size","Size","Small","height","delay","undefined","align","position"],"mappings":";;;;;;;;;AACA;;AAIA;;AACA;;;;;;;;AAEC,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,OAOoB;AAAA,MANzCC,KAMyC,QANzCA,KAMyC;AAAA,MANlCC,QAMkC,QANlCA,QAMkC;AAAA,MALzCC,SAKyC,QALzCA,SAKyC;AAAA,uBAJzCC,IAIyC;AAAA,MAJzCA,IAIyC,0BAJlCC,OAAKC,KAI6B;AAAA,yBAHzCC,MAGyC;AAAA,MAHzCA,MAGyC,4BAHhC,MAGgC;AAAA,wBAFzCC,KAEyC;AAAA,MAFzCA,KAEyC,2BAFjCC,SAEiC;AAAA,wBADzCC,KACyC;AAAA,MADzCA,KACyC,2BADjC,QACiC;AAAA,2BAAzCC,QAAyC;AAAA,MAAzCA,QAAyC,8BAA9B,QAA8B;AAExC,sBAAO,sBAAC,+BAAD;AAAkB,IAAA,KAAK,EAAEH,KAAzB;AAAA,4BACC,qBAAC,sBAAD;AAAS,MAAA,KAAK,EAAEE,KAAhB;AACG,MAAA,MAAM,EAAEH,MADX;AAEG,MAAA,IAAI,EAAEH,IAFT;AAGG,MAAA,SAAS,EAAED,SAHd;AAIG,MAAA,QAAQ,EAAEQ,QAJb;AAAA,gBAKIV;AALJ,MADD,EAQDC,QARC;AAAA,IAAP;AAUF,CAnBD;;eAqBeF,c","sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \n const TooltipWrapper = ({\n   label, children,\n   withArrow,\n   size = Size.Small,\n   height = 'auto',\n   delay = undefined,\n   align = 'center', \n   position = 'bottom' } : TooltipProps) => {\n \n    return <TooltipContainer delay={delay}>\n            <Tooltip align={align}\n               height={height}\n               size={size}\n               withArrow={withArrow}\n               position={position}>\n               {label}\n            </Tooltip>\n         {children}\n       </TooltipContainer>;\n };\n \n export default TooltipWrapper;"],"file":"TooltipWrapper.cjs"}
+{"version":3,"sources":["../../src/Tooltips/TooltipWrapper.tsx"],"names":["TooltipWrapper","label","children","withArrow","tabIndex","size","Size","Small","height","delay","undefined","align","position"],"mappings":";;;;;;;;;AACA;;AAIA;;AACA;;;;;;;;AAEC,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,OAQoB;AAAA,MAPzCC,KAOyC,QAPzCA,KAOyC;AAAA,MAPlCC,QAOkC,QAPlCA,QAOkC;AAAA,MANzCC,SAMyC,QANzCA,SAMyC;AAAA,MALzCC,QAKyC,QALzCA,QAKyC;AAAA,uBAJzCC,IAIyC;AAAA,MAJzCA,IAIyC,0BAJlCC,OAAKC,KAI6B;AAAA,yBAHzCC,MAGyC;AAAA,MAHzCA,MAGyC,4BAHhC,MAGgC;AAAA,wBAFzCC,KAEyC;AAAA,MAFzCA,KAEyC,2BAFjCC,SAEiC;AAAA,wBADzCC,KACyC;AAAA,MADzCA,KACyC,2BADjC,QACiC;AAAA,2BAAzCC,QAAyC;AAAA,MAAzCA,QAAyC,8BAA9B,QAA8B;AAExC,sBAAO,sBAAC,+BAAD;AAAkB,IAAA,KAAK,EAAEH,KAAzB;AAAgC,IAAA,QAAQ,EAAEL,QAA1C;AAAA,4BACC,qBAAC,sBAAD;AAAS,MAAA,KAAK,EAAEO,KAAhB;AACG,MAAA,MAAM,EAAEH,MADX;AAEG,MAAA,IAAI,EAAEH,IAFT;AAGG,MAAA,SAAS,EAAEF,SAHd;AAIG,MAAA,QAAQ,EAAES,QAJb;AAAA,gBAKIX;AALJ,MADD,EAQDC,QARC;AAAA,IAAP;AAUF,CApBD;;eAsBeF,c","sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \n const TooltipWrapper = ({\n   label, children,\n   withArrow,\n   tabIndex,\n   size = Size.Small,\n   height = 'auto',\n   delay = undefined,\n   align = 'center', \n   position = 'bottom' } : TooltipProps) => {\n \n    return <TooltipContainer delay={delay} tabIndex={tabIndex}>\n            <Tooltip align={align}\n               height={height}\n               size={size}\n               withArrow={withArrow}\n               position={position}>\n               {label}\n            </Tooltip>\n         {children}\n       </TooltipContainer>;\n };\n \n export default TooltipWrapper;\n"],"file":"TooltipWrapper.cjs"}

package/dist/Tooltips/TooltipWrapper.d.ts

@@ -1,3 +1,3 @@
 import { TooltipProps } from './TooltipTypes';
-declare const TooltipWrapper: ({ label, children, withArrow, size, height, delay, align, position }: TooltipProps) => JSX.Element;
+declare const TooltipWrapper: ({ label, children, withArrow, tabIndex, size, height, delay, align, position }: TooltipProps) => JSX.Element;
 export default TooltipWrapper;

package/dist/Tooltips/TooltipWrapper.js

@@ -8,6 +8,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
   var label = _ref.label,
       children = _ref.children,
       withArrow = _ref.withArrow,
+      tabIndex = _ref.tabIndex,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? Size.Small : _ref$size,
       _ref$height = _ref.height,
@@ -20,6 +21,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
       position = _ref$position === void 0 ? 'bottom' : _ref$position;
   return /*#__PURE__*/_jsxs(TooltipContainer, {
     delay: delay,
+    tabIndex: tabIndex,
     children: [/*#__PURE__*/_jsx(Tooltip, {
       align: align,
       height: height,

package/dist/Tooltips/TooltipWrapper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tooltips/TooltipWrapper.tsx"],"names":["React","TooltipContainer","Tooltip","Size","TooltipWrapper","label","children","withArrow","size","Small","height","delay","undefined","align","position"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAIA,SAASC,gBAAT,EAA2BC,OAA3B,QAA0C,iBAA1C;AACA,SAASC,IAAT,QAAqB,IAArB;;;;AAEC,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,OAOoB;AAAA,MANzCC,KAMyC,QANzCA,KAMyC;AAAA,MANlCC,QAMkC,QANlCA,QAMkC;AAAA,MALzCC,SAKyC,QALzCA,SAKyC;AAAA,uBAJzCC,IAIyC;AAAA,MAJzCA,IAIyC,0BAJlCL,IAAI,CAACM,KAI6B;AAAA,yBAHzCC,MAGyC;AAAA,MAHzCA,MAGyC,4BAHhC,MAGgC;AAAA,wBAFzCC,KAEyC;AAAA,MAFzCA,KAEyC,2BAFjCC,SAEiC;AAAA,wBADzCC,KACyC;AAAA,MADzCA,KACyC,2BADjC,QACiC;AAAA,2BAAzCC,QAAyC;AAAA,MAAzCA,QAAyC,8BAA9B,QAA8B;AAExC,sBAAO,MAAC,gBAAD;AAAkB,IAAA,KAAK,EAAEH,KAAzB;AAAA,4BACC,KAAC,OAAD;AAAS,MAAA,KAAK,EAAEE,KAAhB;AACG,MAAA,MAAM,EAAEH,MADX;AAEG,MAAA,IAAI,EAAEF,IAFT;AAGG,MAAA,SAAS,EAAED,SAHd;AAIG,MAAA,QAAQ,EAAEO,QAJb;AAAA,gBAKIT;AALJ,MADD,EAQDC,QARC;AAAA,IAAP;AAUF,CAnBD;;AAqBA,eAAeF,cAAf","sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \n const TooltipWrapper = ({\n   label, children,\n   withArrow,\n   size = Size.Small,\n   height = 'auto',\n   delay = undefined,\n   align = 'center', \n   position = 'bottom' } : TooltipProps) => {\n \n    return <TooltipContainer delay={delay}>\n            <Tooltip align={align}\n               height={height}\n               size={size}\n               withArrow={withArrow}\n               position={position}>\n               {label}\n            </Tooltip>\n         {children}\n       </TooltipContainer>;\n };\n \n export default TooltipWrapper;"],"file":"TooltipWrapper.js"}
+{"version":3,"sources":["../../src/Tooltips/TooltipWrapper.tsx"],"names":["React","TooltipContainer","Tooltip","Size","TooltipWrapper","label","children","withArrow","tabIndex","size","Small","height","delay","undefined","align","position"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAIA,SAASC,gBAAT,EAA2BC,OAA3B,QAA0C,iBAA1C;AACA,SAASC,IAAT,QAAqB,IAArB;;;;AAEC,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,OAQoB;AAAA,MAPzCC,KAOyC,QAPzCA,KAOyC;AAAA,MAPlCC,QAOkC,QAPlCA,QAOkC;AAAA,MANzCC,SAMyC,QANzCA,SAMyC;AAAA,MALzCC,QAKyC,QALzCA,QAKyC;AAAA,uBAJzCC,IAIyC;AAAA,MAJzCA,IAIyC,0BAJlCN,IAAI,CAACO,KAI6B;AAAA,yBAHzCC,MAGyC;AAAA,MAHzCA,MAGyC,4BAHhC,MAGgC;AAAA,wBAFzCC,KAEyC;AAAA,MAFzCA,KAEyC,2BAFjCC,SAEiC;AAAA,wBADzCC,KACyC;AAAA,MADzCA,KACyC,2BADjC,QACiC;AAAA,2BAAzCC,QAAyC;AAAA,MAAzCA,QAAyC,8BAA9B,QAA8B;AAExC,sBAAO,MAAC,gBAAD;AAAkB,IAAA,KAAK,EAAEH,KAAzB;AAAgC,IAAA,QAAQ,EAAEJ,QAA1C;AAAA,4BACC,KAAC,OAAD;AAAS,MAAA,KAAK,EAAEM,KAAhB;AACG,MAAA,MAAM,EAAEH,MADX;AAEG,MAAA,IAAI,EAAEF,IAFT;AAGG,MAAA,SAAS,EAAEF,SAHd;AAIG,MAAA,QAAQ,EAAEQ,QAJb;AAAA,gBAKIV;AALJ,MADD,EAQDC,QARC;AAAA,IAAP;AAUF,CApBD;;AAsBA,eAAeF,cAAf","sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \n const TooltipWrapper = ({\n   label, children,\n   withArrow,\n   tabIndex,\n   size = Size.Small,\n   height = 'auto',\n   delay = undefined,\n   align = 'center', \n   position = 'bottom' } : TooltipProps) => {\n \n    return <TooltipContainer delay={delay} tabIndex={tabIndex}>\n            <Tooltip align={align}\n               height={height}\n               size={size}\n               withArrow={withArrow}\n               position={position}>\n               {label}\n            </Tooltip>\n         {children}\n       </TooltipContainer>;\n };\n \n export default TooltipWrapper;\n"],"file":"TooltipWrapper.js"}

package/dist/common/FocusVisible.cjs

@@ -9,6 +9,12 @@ exports.useFocusVisibleRef = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 var useFocusVisibleRef = function useFocusVisibleRef() {
   var focusWithinList = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var ref = arguments.length > 1 ? arguments[1] : undefined;
@@ -56,7 +62,7 @@ var useFocusVisibleRef = function useFocusVisibleRef() {
     var focusFn = elementRef.current.focus;
 
     elementRef.current.focus = function (e) {
-      suppress.current = true;
+      suppress.current = !(e !== null && e !== void 0 && e.focusVisible);
       focusFn.call(instance, e);
     };
 
@@ -67,6 +73,23 @@ var useFocusVisibleRef = function useFocusVisibleRef() {
       instance.removeEventListener('mousedown', handleMouseDown);
       instance.removeEventListener('focus', handleFocus);
       instance.removeEventListener('blur', handleBlur);
+      instance.classList.remove('focus-visible');
+
+      var _iterator = _createForOfIteratorHelper(focusWithinList),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _el$current;
+
+          var el = _step.value;
+          (_el$current = el.current) === null || _el$current === void 0 ? void 0 : _el$current.classList.remove('focus-visible-within');
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
     };
   }, [elementRef]);