@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/Toasters/Toast.js.map

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

package/dist/Toasters/ToastContext.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToastContext.cjs","names":["ToastContext","React","createContext","ToastBucket","styled","div","Z_INDEXES","toast","ToastBucketTopLeft","ToastBucketTopMiddle","ToastBucketTopRight","ToastBucketBottomLeft","ToastBucketBottomMiddle","ToastBucketBottomRight","ToastProvider","children","useState","toasts","setToasts","add","content","options","id","createUUID","prev","remove","filter","t","functions","useMemo","addToast","removeToast","position","ToastPosition","TOPLEFT","map","TOPMIDDLE","TOPRIGHT","BOTTOMLEFT","BOTTOMMIDDLE","BOTTOMRIGHT","useToast","useContext"],"sources":["../../src/Toasters/ToastContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { createUUID } from '../Services/functions';\nimport Toast, { ToastOptions } from './Toast';\nimport { ToastPosition } from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport type ToastProviderProps = {\n  children?: any;\n};\n\nexport interface toast {\n  options: ToastOptions;\n  id: string;\n  content: any;\n}\nexport type ToasterValueProps = { toasts: toast[]; addToast: (content: any, options: ToastOptions) => string; removeToast: (id: string) => void };\n\n/*export const ToastContext = React.createContext<ToasterValueProps>(null);*/\n\nexport const ToastContext = React.createContext({} as ToasterValueProps);\n\nconst ToastBucket = styled.div`\n  position: fixed;\n  z-index: ${Z_INDEXES.toast};\n  display: flex;\n  flex-direction: column-reverse;\n`;\n\nconst ToastBucketTopLeft = styled(ToastBucket)`\n  top: 16px;\n  left: 5%;\n`;\n\nconst ToastBucketTopMiddle = styled(ToastBucket)`\n  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n`;\n\nconst ToastBucketTopRight = styled(ToastBucket)`\n  top: 16px;\n  right: 5%;\n`;\n\nconst ToastBucketBottomLeft = styled(ToastBucket)`\n  bottom: 16px;\n  left: 5%;\n`;\n\nconst ToastBucketBottomMiddle = styled(ToastBucket)`\n  bottom: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n`;\n\nconst ToastBucketBottomRight = styled(ToastBucket)`\n  bottom: 16px;\n  right: 5%;\n`;\n\nexport const ToastProvider: React.FC<ToastProviderProps> = ({ children }: ToastProviderProps) => {\n  const [toasts, setToasts] = React.useState<toast[]>([]);\n\n  const add = (content: any, options: ToastOptions) => {\n    const id = createUUID();\n    setToasts(prev => [...prev, { id, content, options }]);\n    return id;\n  };\n\n  const remove = (id: string) => setToasts(toasts.filter(t => t.id !== id));\n\n  const functions = React.useMemo(() => {\n    return { addToast: add, removeToast: remove };\n  }, [toasts]);\n\n  return (\n    <ToastContext.Provider value={{ toasts, addToast: add, removeToast: remove }}>\n      <ToastBucketTopLeft>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPLEFT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopLeft>\n      <ToastBucketTopMiddle>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPMIDDLE)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopMiddle>\n      <ToastBucketTopRight>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPRIGHT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopRight>\n      <ToastBucketBottomLeft>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMLEFT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomLeft>\n      <ToastBucketBottomMiddle>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMMIDDLE)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomMiddle>\n      <ToastBucketBottomRight>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMRIGHT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomRight>\n      {children}\n    </ToastContext.Provider>\n  );\n};\n\nexport function useToast() {\n  const { addToast, removeToast } = React.useContext(ToastContext);\n  return {\n    addToast,\n    removeToast\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"ToastContext.cjs","names":["ToastContext","React","createContext","ToastBucket","styled","div","Z_INDEXES","toast","ToastBucketTopLeft","ToastBucketTopMiddle","ToastBucketTopRight","ToastBucketBottomLeft","ToastBucketBottomMiddle","ToastBucketBottomRight","ToastProvider","children","useState","toasts","setToasts","add","content","options","id","createUUID","prev","remove","filter","t","functions","useMemo","addToast","removeToast","position","ToastPosition","TOPLEFT","map","TOPMIDDLE","TOPRIGHT","BOTTOMLEFT","BOTTOMMIDDLE","BOTTOMRIGHT","useToast","useContext"],"sources":["../../src/Toasters/ToastContext.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { createUUID } from '../Services/functions';\r\nimport Toast, { ToastOptions } from './Toast';\r\nimport { ToastPosition } from '../types';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\n\r\nexport type ToastProviderProps = {\r\n  children?: any;\r\n};\r\n\r\nexport interface toast {\r\n  options: ToastOptions;\r\n  id: string;\r\n  content: any;\r\n}\r\nexport type ToasterValueProps = { toasts: toast[]; addToast: (content: any, options: ToastOptions) => string; removeToast: (id: string) => void };\r\n\r\n/*export const ToastContext = React.createContext<ToasterValueProps>(null);*/\r\n\r\nexport const ToastContext = React.createContext({} as ToasterValueProps);\r\n\r\nconst ToastBucket = styled.div`\r\n  position: fixed;\r\n  z-index: ${Z_INDEXES.toast};\r\n  display: flex;\r\n  flex-direction: column-reverse;\r\n`;\r\n\r\nconst ToastBucketTopLeft = styled(ToastBucket)`\r\n  top: 16px;\r\n  left: 5%;\r\n`;\r\n\r\nconst ToastBucketTopMiddle = styled(ToastBucket)`\r\n  top: 16px;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n`;\r\n\r\nconst ToastBucketTopRight = styled(ToastBucket)`\r\n  top: 16px;\r\n  right: 5%;\r\n`;\r\n\r\nconst ToastBucketBottomLeft = styled(ToastBucket)`\r\n  bottom: 16px;\r\n  left: 5%;\r\n`;\r\n\r\nconst ToastBucketBottomMiddle = styled(ToastBucket)`\r\n  bottom: 16px;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n`;\r\n\r\nconst ToastBucketBottomRight = styled(ToastBucket)`\r\n  bottom: 16px;\r\n  right: 5%;\r\n`;\r\n\r\nexport const ToastProvider: React.FC<ToastProviderProps> = ({ children }: ToastProviderProps) => {\r\n  const [toasts, setToasts] = React.useState<toast[]>([]);\r\n\r\n  const add = (content: any, options: ToastOptions) => {\r\n    const id = createUUID();\r\n    setToasts(prev => [...prev, { id, content, options }]);\r\n    return id;\r\n  };\r\n\r\n  const remove = (id: string) => setToasts(toasts.filter(t => t.id !== id));\r\n\r\n  const functions = React.useMemo(() => {\r\n    return { addToast: add, removeToast: remove };\r\n  }, [toasts]);\r\n\r\n  return (\r\n    <ToastContext.Provider value={{ toasts, addToast: add, removeToast: remove }}>\r\n      <ToastBucketTopLeft>\r\n        {toasts\r\n          .filter(t => t.options.position === ToastPosition.TOPLEFT)\r\n          .map(t => (\r\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\r\n          ))}\r\n      </ToastBucketTopLeft>\r\n      <ToastBucketTopMiddle>\r\n        {toasts\r\n          .filter(t => t.options.position === ToastPosition.TOPMIDDLE)\r\n          .map(t => (\r\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\r\n          ))}\r\n      </ToastBucketTopMiddle>\r\n      <ToastBucketTopRight>\r\n        {toasts\r\n          .filter(t => t.options.position === ToastPosition.TOPRIGHT)\r\n          .map(t => (\r\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\r\n          ))}\r\n      </ToastBucketTopRight>\r\n      <ToastBucketBottomLeft>\r\n        {toasts\r\n          .filter(t => t.options.position === ToastPosition.BOTTOMLEFT)\r\n          .map(t => (\r\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\r\n          ))}\r\n      </ToastBucketBottomLeft>\r\n      <ToastBucketBottomMiddle>\r\n        {toasts\r\n          .filter(t => t.options.position === ToastPosition.BOTTOMMIDDLE)\r\n          .map(t => (\r\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\r\n          ))}\r\n      </ToastBucketBottomMiddle>\r\n      <ToastBucketBottomRight>\r\n        {toasts\r\n          .filter(t => t.options.position === ToastPosition.BOTTOMRIGHT)\r\n          .map(t => (\r\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\r\n          ))}\r\n      </ToastBucketBottomRight>\r\n      {children}\r\n    </ToastContext.Provider>\r\n  );\r\n};\r\n\r\nexport function useToast() {\r\n  const { addToast, removeToast } = React.useContext(ToastContext);\r\n  return {\r\n    addToast,\r\n    removeToast\r\n  };\r\n}\r\n"],"mappings":"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"}

package/dist/Toasters/ToastContext.d.ts

@@ -1,21 +1,21 @@
-import * as React from 'react';
-import { ToastOptions } from './Toast';
-export type ToastProviderProps = {
-    children?: any;
-};
-export interface toast {
-    options: ToastOptions;
-    id: string;
-    content: any;
-}
-export type ToasterValueProps = {
-    toasts: toast[];
-    addToast: (content: any, options: ToastOptions) => string;
-    removeToast: (id: string) => void;
-};
-export declare const ToastContext: React.Context<ToasterValueProps>;
-export declare const ToastProvider: React.FC<ToastProviderProps>;
-export declare function useToast(): {
-    addToast: (content: any, options: ToastOptions) => string;
-    removeToast: (id: string) => void;
-};
+import * as React from 'react';
+import { ToastOptions } from './Toast';
+export type ToastProviderProps = {
+    children?: any;
+};
+export interface toast {
+    options: ToastOptions;
+    id: string;
+    content: any;
+}
+export type ToasterValueProps = {
+    toasts: toast[];
+    addToast: (content: any, options: ToastOptions) => string;
+    removeToast: (id: string) => void;
+};
+export declare const ToastContext: React.Context<ToasterValueProps>;
+export declare const ToastProvider: React.FC<ToastProviderProps>;
+export declare function useToast(): {
+    addToast: (content: any, options: ToastOptions) => string;
+    removeToast: (id: string) => void;
+};

package/dist/Toasters/ToastContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastContext.js","names":["React","styled","createUUID","Toast","ToastPosition","Z_INDEXES","ToastContext","createContext","ToastBucket","div","toast","ToastBucketTopLeft","ToastBucketTopMiddle","ToastBucketTopRight","ToastBucketBottomLeft","ToastBucketBottomMiddle","ToastBucketBottomRight","ToastProvider","children","useState","toasts","setToasts","add","content","options","id","prev","remove","filter","t","functions","useMemo","addToast","removeToast","position","TOPLEFT","map","TOPMIDDLE","TOPRIGHT","BOTTOMLEFT","BOTTOMMIDDLE","BOTTOMRIGHT","useToast","useContext"],"sources":["../../src/Toasters/ToastContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { createUUID } from '../Services/functions';\nimport Toast, { ToastOptions } from './Toast';\nimport { ToastPosition } from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport type ToastProviderProps = {\n  children?: any;\n};\n\nexport interface toast {\n  options: ToastOptions;\n  id: string;\n  content: any;\n}\nexport type ToasterValueProps = { toasts: toast[]; addToast: (content: any, options: ToastOptions) => string; removeToast: (id: string) => void };\n\n/*export const ToastContext = React.createContext<ToasterValueProps>(null);*/\n\nexport const ToastContext = React.createContext({} as ToasterValueProps);\n\nconst ToastBucket = styled.div`\n  position: fixed;\n  z-index: ${Z_INDEXES.toast};\n  display: flex;\n  flex-direction: column-reverse;\n`;\n\nconst ToastBucketTopLeft = styled(ToastBucket)`\n  top: 16px;\n  left: 5%;\n`;\n\nconst ToastBucketTopMiddle = styled(ToastBucket)`\n  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n`;\n\nconst ToastBucketTopRight = styled(ToastBucket)`\n  top: 16px;\n  right: 5%;\n`;\n\nconst ToastBucketBottomLeft = styled(ToastBucket)`\n  bottom: 16px;\n  left: 5%;\n`;\n\nconst ToastBucketBottomMiddle = styled(ToastBucket)`\n  bottom: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n`;\n\nconst ToastBucketBottomRight = styled(ToastBucket)`\n  bottom: 16px;\n  right: 5%;\n`;\n\nexport const ToastProvider: React.FC<ToastProviderProps> = ({ children }: ToastProviderProps) => {\n  const [toasts, setToasts] = React.useState<toast[]>([]);\n\n  const add = (content: any, options: ToastOptions) => {\n    const id = createUUID();\n    setToasts(prev => [...prev, { id, content, options }]);\n    return id;\n  };\n\n  const remove = (id: string) => setToasts(toasts.filter(t => t.id !== id));\n\n  const functions = React.useMemo(() => {\n    return { addToast: add, removeToast: remove };\n  }, [toasts]);\n\n  return (\n    <ToastContext.Provider value={{ toasts, addToast: add, removeToast: remove }}>\n      <ToastBucketTopLeft>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPLEFT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopLeft>\n      <ToastBucketTopMiddle>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPMIDDLE)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopMiddle>\n      <ToastBucketTopRight>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPRIGHT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopRight>\n      <ToastBucketBottomLeft>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMLEFT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomLeft>\n      <ToastBucketBottomMiddle>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMMIDDLE)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomMiddle>\n      <ToastBucketBottomRight>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMRIGHT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomRight>\n      {children}\n    </ToastContext.Provider>\n  );\n};\n\nexport function useToast() {\n  const { addToast, removeToast } = React.useContext(ToastContext);\n  return {\n    addToast,\n    removeToast\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"ToastContext.js","names":["React","styled","createUUID","Toast","ToastPosition","Z_INDEXES","ToastContext","createContext","ToastBucket","div","toast","ToastBucketTopLeft","ToastBucketTopMiddle","ToastBucketTopRight","ToastBucketBottomLeft","ToastBucketBottomMiddle","ToastBucketBottomRight","ToastProvider","children","useState","toasts","setToasts","add","content","options","id","prev","remove","filter","t","functions","useMemo","addToast","removeToast","position","TOPLEFT","map","TOPMIDDLE","TOPRIGHT","BOTTOMLEFT","BOTTOMMIDDLE","BOTTOMRIGHT","useToast","useContext"],"sources":["../../src/Toasters/ToastContext.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { createUUID } from '../Services/functions';\r\nimport Toast, { ToastOptions } from './Toast';\r\nimport { ToastPosition } from '../types';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\n\r\nexport type ToastProviderProps = {\r\n  children?: any;\r\n};\r\n\r\nexport interface toast {\r\n  options: ToastOptions;\r\n  id: string;\r\n  content: any;\r\n}\r\nexport type ToasterValueProps = { toasts: toast[]; addToast: (content: any, options: ToastOptions) => string; removeToast: (id: string) => void };\r\n\r\n/*export const ToastContext = React.createContext<ToasterValueProps>(null);*/\r\n\r\nexport const ToastContext = React.createContext({} as ToasterValueProps);\r\n\r\nconst ToastBucket = styled.div`\r\n  position: fixed;\r\n  z-index: ${Z_INDEXES.toast};\r\n  display: flex;\r\n  flex-direction: column-reverse;\r\n`;\r\n\r\nconst ToastBucketTopLeft = styled(ToastBucket)`\r\n  top: 16px;\r\n  left: 5%;\r\n`;\r\n\r\nconst ToastBucketTopMiddle = styled(ToastBucket)`\r\n  top: 16px;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n`;\r\n\r\nconst ToastBucketTopRight = styled(ToastBucket)`\r\n  top: 16px;\r\n  right: 5%;\r\n`;\r\n\r\nconst ToastBucketBottomLeft = styled(ToastBucket)`\r\n  bottom: 16px;\r\n  left: 5%;\r\n`;\r\n\r\nconst ToastBucketBottomMiddle = styled(ToastBucket)`\r\n  bottom: 16px;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n`;\r\n\r\nconst ToastBucketBottomRight = styled(ToastBucket)`\r\n  bottom: 16px;\r\n  right: 5%;\r\n`;\r\n\r\nexport const ToastProvider: React.FC<ToastProviderProps> = ({ children }: ToastProviderProps) => {\r\n  const [toasts, setToasts] = React.useState<toast[]>([]);\r\n\r\n  const add = (content: any, options: ToastOptions) => {\r\n    const id = createUUID();\r\n    setToasts(prev => [...prev, { id, content, options }]);\r\n    return id;\r\n  };\r\n\r\n  const remove = (id: string) => setToasts(toasts.filter(t => t.id !== id));\r\n\r\n  const functions = React.useMemo(() => {\r\n    return { addToast: add, removeToast: remove };\r\n  }, [toasts]);\r\n\r\n  return (\r\n    <ToastContext.Provider value={{ toasts, addToast: add, removeToast: remove }}>\r\n      <ToastBucketTopLeft>\r\n        {toasts\r\n          .filter(t => t.options.position === ToastPosition.TOPLEFT)\r\n          .map(t => (\r\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\r\n          ))}\r\n      </ToastBucketTopLeft>\r\n      <ToastBucketTopMiddle>\r\n        {toasts\r\n          .filter(t => t.options.position === ToastPosition.TOPMIDDLE)\r\n          .map(t => (\r\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\r\n          ))}\r\n      </ToastBucketTopMiddle>\r\n      <ToastBucketTopRight>\r\n        {toasts\r\n          .filter(t => t.options.position === ToastPosition.TOPRIGHT)\r\n          .map(t => (\r\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\r\n          ))}\r\n      </ToastBucketTopRight>\r\n      <ToastBucketBottomLeft>\r\n        {toasts\r\n          .filter(t => t.options.position === ToastPosition.BOTTOMLEFT)\r\n          .map(t => (\r\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\r\n          ))}\r\n      </ToastBucketBottomLeft>\r\n      <ToastBucketBottomMiddle>\r\n        {toasts\r\n          .filter(t => t.options.position === ToastPosition.BOTTOMMIDDLE)\r\n          .map(t => (\r\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\r\n          ))}\r\n      </ToastBucketBottomMiddle>\r\n      <ToastBucketBottomRight>\r\n        {toasts\r\n          .filter(t => t.options.position === ToastPosition.BOTTOMRIGHT)\r\n          .map(t => (\r\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\r\n          ))}\r\n      </ToastBucketBottomRight>\r\n      {children}\r\n    </ToastContext.Provider>\r\n  );\r\n};\r\n\r\nexport function useToast() {\r\n  const { addToast, removeToast } = React.useContext(ToastContext);\r\n  return {\r\n    addToast,\r\n    removeToast\r\n  };\r\n}\r\n"],"mappings":"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"}

package/dist/Toasters/index.cjs

@@ -1,9 +1,15 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  Toast: true,
+  ToastProvider: true,
+  useToast: true,
+  ToastContext: true
+};
 Object.defineProperty(exports, "Toast", {
   enumerable: true,
   get: function get() {
@@ -28,6 +34,19 @@ Object.defineProperty(exports, "useToast", {
     return _ToastContext.useToast;
   }
 });
-var _Toast = _interopRequireDefault(require("./Toast"));
+var _Toast = _interopRequireWildcard(require("./Toast"));
+Object.keys(_Toast).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Toast[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Toast[key];
+    }
+  });
+});
 var _ToastContext = require("./ToastContext");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 //# sourceMappingURL=index.cjs.map

package/dist/Toasters/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Toasters/index.tsx"],"sourcesContent":["import Toast from './Toast';\nimport { ToastProvider, useToast, ToastContext } from './ToastContext';\n\nexport { Toast, ToastProvider, useToast, ToastContext };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Toasters/index.tsx"],"sourcesContent":["import Toast from './Toast';\r\nimport { ToastProvider, useToast, ToastContext } from './ToastContext';\r\n\r\nexport * from './Toast';\r\nexport { Toast, ToastProvider, useToast, ToastContext };\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAGA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAFA;AAAuE;AAAA"}

package/dist/Toasters/index.d.ts

@@ -1,3 +1,4 @@
-import Toast from './Toast';
-import { ToastProvider, useToast, ToastContext } from './ToastContext';
-export { Toast, ToastProvider, useToast, ToastContext };
+import Toast from './Toast';
+import { ToastProvider, useToast, ToastContext } from './ToastContext';
+export * from './Toast';
+export { Toast, ToastProvider, useToast, ToastContext };

package/dist/Toasters/index.js

@@ -1,4 +1,5 @@
 import Toast from './Toast';
 import { ToastProvider, useToast, ToastContext } from './ToastContext';
+export * from './Toast';
 export { Toast, ToastProvider, useToast, ToastContext };
 //# sourceMappingURL=index.js.map

package/dist/Toasters/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Toast","ToastProvider","useToast","ToastContext"],"sources":["../../src/Toasters/index.tsx"],"sourcesContent":["import Toast from './Toast';\nimport { ToastProvider, useToast, ToastContext } from './ToastContext';\n\nexport { Toast, ToastProvider, useToast, ToastContext };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,SAAS;AAC3B,SAASC,aAAa,EAAEC,QAAQ,EAAEC,YAAY,QAAQ,gBAAgB;AAEtE,SAASH,KAAK,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,YAAY"}
+{"version":3,"file":"index.js","names":["Toast","ToastProvider","useToast","ToastContext"],"sources":["../../src/Toasters/index.tsx"],"sourcesContent":["import Toast from './Toast';\r\nimport { ToastProvider, useToast, ToastContext } from './ToastContext';\r\n\r\nexport * from './Toast';\r\nexport { Toast, ToastProvider, useToast, ToastContext };\r\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,SAAS;AAC3B,SAASC,aAAa,EAAEC,QAAQ,EAAEC,YAAY,QAAQ,gBAAgB;AAEtE,cAAc,SAAS;AACvB,SAASH,KAAK,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,YAAY"}

package/dist/Toggles/ToggleButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.cjs","names":["Wrapper","styled","div","IconButtonContentStyles","COLORS","white","primary_500","neutral_300","ToggleButton","React","forwardRef","ref","id","active","onChange","disabled","defaultState","activeState","className","rest","useState","isActive","setIsActive","useEffect","cls","color","icon"],"sources":["../../src/Toggles/ToggleButton.tsx"],"sourcesContent":["import React from 'react';\nimport { IconButton } from '../Button';\nimport styled from 'styled-components';\nimport { IconButtonContentStyles } from '../Button/Iconbutton';\nimport { COLORS } from '../styles';\n\nconst Wrapper = styled.div`\n  ${IconButtonContentStyles} {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ${IconButtonContentStyles} {\n      background: ${COLORS.white};\n    }\n  }\n\n  &.active:not(.state-change) {\n    ${IconButtonContentStyles}:after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ${COLORS.primary_500};\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ${IconButtonContentStyles}:after {\n      background: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface ToggleButtonState {\n  icon: React.ReactNode;\n  color?: string;\n}\n\nexport interface ToggleButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'onClick'> {\n  active: boolean;\n  onChange?: (value: boolean) => void;\n  disabled?: boolean;\n\n  defaultState: ToggleButtonState;\n  activeState?: ToggleButtonState;\n}\n\nexport const ToggleButton = React.forwardRef(({\n                                                id,\n                                                active,\n                                                onChange,\n                                                disabled,\n                                                defaultState,\n                                                activeState,\n                                                className,\n                                                ...rest\n                                              }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n  const [isActive, setIsActive] = React.useState(false);\n\n  React.useEffect(() => setIsActive(active), [active]);\n\n  const cls = `${className || ''} ${isActive ? 'active' : ''} ${activeState ? 'state-change' : ''} ${disabled ? 'disabled' : ''}`;\n\n  return (\n    <Wrapper className={cls}>\n      <IconButton\n        variant={'secondary'}\n        ref={ref}\n        useTransparentBackground={true}\n        shape={'circular'}\n        action={() => {\n          setIsActive(!isActive);\n          if (onChange) {\n            onChange(!isActive);\n          }\n        }}\n        id={id}\n        iconColor={isActive ? activeState?.color ?? defaultState.color : defaultState.color}\n        disabled={disabled}\n        aria-pressed={isActive}\n        {...rest}>\n        {isActive ? activeState?.icon ?? defaultState.icon : defaultState.icon}\n      </IconButton>\n    </Wrapper>\n  );\n});\n\nexport default ToggleButton;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAmC;AAAA;AAAA;AAAA;AAAA;AAEnC,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,okBACtBC,mCAAuB,EAMrBA,mCAAuB,EACTC,cAAM,CAACC,KAAK,EAK1BF,mCAAuB,EAKHC,cAAM,CAACE,WAAW,EAQtCH,mCAAuB,EACTC,cAAM,CAACG,WAAW,CAGrC;AAgBM,IAAMC,YAAY,gBAAGC,cAAK,CAACC,UAAU,CAAC,gBASuBC,GAAiC,EAAK;EAAA;EAAA,IAR1DC,EAAE,QAAFA,EAAE;IACFC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;IACZC,WAAW,QAAXA,WAAW;IACXC,SAAS,QAATA,SAAS;IACNC,IAAI;EAErD,sBAAgCV,cAAK,CAACW,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA9CC,QAAQ;IAAEC,WAAW;EAE5Bb,cAAK,CAACc,SAAS,CAAC;IAAA,OAAMD,WAAW,CAACT,MAAM,CAAC;EAAA,GAAE,CAACA,MAAM,CAAC,CAAC;EAEpD,IAAMW,GAAG,aAAMN,SAAS,IAAI,EAAE,cAAIG,QAAQ,GAAG,QAAQ,GAAG,EAAE,cAAIJ,WAAW,GAAG,cAAc,GAAG,EAAE,cAAIF,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE;EAE/H,oBACE,qBAAC,OAAO;IAAC,SAAS,EAAES,GAAI;IAAA,uBACtB,qBAAC,kBAAU;MACT,OAAO,EAAE,WAAY;MACrB,GAAG,EAAEb,GAAI;MACT,wBAAwB,EAAE,IAAK;MAC/B,KAAK,EAAE,UAAW;MAClB,MAAM,EAAE,kBAAM;QACZW,WAAW,CAAC,CAACD,QAAQ,CAAC;QACtB,IAAIP,QAAQ,EAAE;UACZA,QAAQ,CAAC,CAACO,QAAQ,CAAC;QACrB;MACF,CAAE;MACF,EAAE,EAAET,EAAG;MACP,SAAS,EAAES,QAAQ,yBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEQ,KAAK,mEAAIT,YAAY,CAACS,KAAK,GAAGT,YAAY,CAACS,KAAM;MACpF,QAAQ,EAAEV,QAAS;MACnB,gBAAcM;IAAS,GACnBF,IAAI;MAAA,UACPE,QAAQ,wBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAES,IAAI,iEAAIV,YAAY,CAACU,IAAI,GAAGV,YAAY,CAACU;IAAI;EAC3D,EACL;AAEd,CAAC,CAAC;AAAC;AAAA;EA9CDb,MAAM;EACNC,QAAQ;EACRC,QAAQ;EAERC,YAAY;IATZU,IAAI;IACJD,KAAK;EAAA;EASLR,WAAW;IAVXS,IAAI;IACJD,KAAK;EAAA;AAAA;AAAA,eAoDQjB,YAAY;AAAA"}
+{"version":3,"file":"ToggleButton.cjs","names":["Wrapper","styled","div","IconButtonContentStyles","COLORS","white","primary_500","neutral_300","ToggleButton","React","forwardRef","ref","id","active","onChange","disabled","defaultState","activeState","className","rest","useState","isActive","setIsActive","useEffect","cls","color","icon"],"sources":["../../src/Toggles/ToggleButton.tsx"],"sourcesContent":["import React from 'react';\r\nimport { IconButton } from '../Button';\r\nimport styled from 'styled-components';\r\nimport { IconButtonContentStyles } from '../Button/Iconbutton';\r\nimport { COLORS } from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  ${IconButtonContentStyles} {\r\n    transition: all 0.1s ease-in-out;\r\n  }\r\n\r\n  &.disabled,\r\n  &.active:not(.state-change) {\r\n    ${IconButtonContentStyles} {\r\n      background: ${COLORS.white};\r\n    }\r\n  }\r\n\r\n  &.active:not(.state-change) {\r\n    ${IconButtonContentStyles}:after {\r\n      content: '';\r\n      position: absolute;\r\n      left: 12px;\r\n      bottom: 1px;\r\n      background-color: ${COLORS.primary_500};\r\n      border-radius: 4px;\r\n      height: 4px;\r\n      width: 24px;\r\n    }\r\n  }\r\n\r\n  &.disabled:not(.state-change) {\r\n    ${IconButtonContentStyles}:after {\r\n      background: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface ToggleButtonState {\r\n  icon: React.ReactNode;\r\n  color?: string;\r\n}\r\n\r\nexport interface ToggleButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'onClick'> {\r\n  active: boolean;\r\n  onChange?: (value: boolean) => void;\r\n  disabled?: boolean;\r\n\r\n  defaultState: ToggleButtonState;\r\n  activeState?: ToggleButtonState;\r\n}\r\n\r\nexport const ToggleButton = React.forwardRef(({\r\n                                                id,\r\n                                                active,\r\n                                                onChange,\r\n                                                disabled,\r\n                                                defaultState,\r\n                                                activeState,\r\n                                                className,\r\n                                                ...rest\r\n                                              }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement>) => {\r\n  const [isActive, setIsActive] = React.useState(false);\r\n\r\n  React.useEffect(() => setIsActive(active), [active]);\r\n\r\n  const cls = `${className || ''} ${isActive ? 'active' : ''} ${activeState ? 'state-change' : ''} ${disabled ? 'disabled' : ''}`;\r\n\r\n  return (\r\n    <Wrapper className={cls}>\r\n      <IconButton\r\n        variant={'secondary'}\r\n        ref={ref}\r\n        useTransparentBackground={true}\r\n        shape={'circular'}\r\n        action={() => {\r\n          setIsActive(!isActive);\r\n          if (onChange) {\r\n            onChange(!isActive);\r\n          }\r\n        }}\r\n        id={id}\r\n        iconColor={isActive ? activeState?.color ?? defaultState.color : defaultState.color}\r\n        disabled={disabled}\r\n        aria-pressed={isActive}\r\n        {...rest}>\r\n        {isActive ? activeState?.icon ?? defaultState.icon : defaultState.icon}\r\n      </IconButton>\r\n    </Wrapper>\r\n  );\r\n});\r\n\r\nexport default ToggleButton;\r\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAmC;AAAA;AAAA;AAAA;AAAA;AAEnC,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,okBACtBC,mCAAuB,EAMrBA,mCAAuB,EACTC,cAAM,CAACC,KAAK,EAK1BF,mCAAuB,EAKHC,cAAM,CAACE,WAAW,EAQtCH,mCAAuB,EACTC,cAAM,CAACG,WAAW,CAGrC;AAgBM,IAAMC,YAAY,gBAAGC,cAAK,CAACC,UAAU,CAAC,gBASuBC,GAAiC,EAAK;EAAA;EAAA,IAR1DC,EAAE,QAAFA,EAAE;IACFC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;IACZC,WAAW,QAAXA,WAAW;IACXC,SAAS,QAATA,SAAS;IACNC,IAAI;EAErD,sBAAgCV,cAAK,CAACW,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA9CC,QAAQ;IAAEC,WAAW;EAE5Bb,cAAK,CAACc,SAAS,CAAC;IAAA,OAAMD,WAAW,CAACT,MAAM,CAAC;EAAA,GAAE,CAACA,MAAM,CAAC,CAAC;EAEpD,IAAMW,GAAG,aAAMN,SAAS,IAAI,EAAE,cAAIG,QAAQ,GAAG,QAAQ,GAAG,EAAE,cAAIJ,WAAW,GAAG,cAAc,GAAG,EAAE,cAAIF,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE;EAE/H,oBACE,qBAAC,OAAO;IAAC,SAAS,EAAES,GAAI;IAAA,uBACtB,qBAAC,kBAAU;MACT,OAAO,EAAE,WAAY;MACrB,GAAG,EAAEb,GAAI;MACT,wBAAwB,EAAE,IAAK;MAC/B,KAAK,EAAE,UAAW;MAClB,MAAM,EAAE,kBAAM;QACZW,WAAW,CAAC,CAACD,QAAQ,CAAC;QACtB,IAAIP,QAAQ,EAAE;UACZA,QAAQ,CAAC,CAACO,QAAQ,CAAC;QACrB;MACF,CAAE;MACF,EAAE,EAAET,EAAG;MACP,SAAS,EAAES,QAAQ,yBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEQ,KAAK,mEAAIT,YAAY,CAACS,KAAK,GAAGT,YAAY,CAACS,KAAM;MACpF,QAAQ,EAAEV,QAAS;MACnB,gBAAcM;IAAS,GACnBF,IAAI;MAAA,UACPE,QAAQ,wBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAES,IAAI,iEAAIV,YAAY,CAACU,IAAI,GAAGV,YAAY,CAACU;IAAI;EAC3D,EACL;AAEd,CAAC,CAAC;AAAC;AAAA;EA9CDb,MAAM;EACNC,QAAQ;EACRC,QAAQ;EAERC,YAAY;IATZU,IAAI;IACJD,KAAK;EAAA;EASLR,WAAW;IAVXS,IAAI;IACJD,KAAK;EAAA;AAAA;AAAA,eAoDQjB,YAAY;AAAA"}

package/dist/Toggles/ToggleButton.d.ts

@@ -1,14 +1,14 @@
-import React from 'react';
-export interface ToggleButtonState {
-    icon: React.ReactNode;
-    color?: string;
-}
-export interface ToggleButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'onClick'> {
-    active: boolean;
-    onChange?: (value: boolean) => void;
-    disabled?: boolean;
-    defaultState: ToggleButtonState;
-    activeState?: ToggleButtonState;
-}
-export declare const ToggleButton: React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export default ToggleButton;
+import React from 'react';
+export interface ToggleButtonState {
+    icon: React.ReactNode;
+    color?: string;
+}
+export interface ToggleButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'onClick'> {
+    active: boolean;
+    onChange?: (value: boolean) => void;
+    disabled?: boolean;
+    defaultState: ToggleButtonState;
+    activeState?: ToggleButtonState;
+}
+export declare const ToggleButton: React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default ToggleButton;

package/dist/Toggles/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","names":["React","IconButton","styled","IconButtonContentStyles","COLORS","Wrapper","div","white","primary_500","neutral_300","ToggleButton","forwardRef","ref","id","active","onChange","disabled","defaultState","activeState","className","rest","useState","isActive","setIsActive","useEffect","cls","color","icon"],"sources":["../../src/Toggles/ToggleButton.tsx"],"sourcesContent":["import React from 'react';\nimport { IconButton } from '../Button';\nimport styled from 'styled-components';\nimport { IconButtonContentStyles } from '../Button/Iconbutton';\nimport { COLORS } from '../styles';\n\nconst Wrapper = styled.div`\n  ${IconButtonContentStyles} {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ${IconButtonContentStyles} {\n      background: ${COLORS.white};\n    }\n  }\n\n  &.active:not(.state-change) {\n    ${IconButtonContentStyles}:after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ${COLORS.primary_500};\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ${IconButtonContentStyles}:after {\n      background: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface ToggleButtonState {\n  icon: React.ReactNode;\n  color?: string;\n}\n\nexport interface ToggleButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'onClick'> {\n  active: boolean;\n  onChange?: (value: boolean) => void;\n  disabled?: boolean;\n\n  defaultState: ToggleButtonState;\n  activeState?: ToggleButtonState;\n}\n\nexport const ToggleButton = React.forwardRef(({\n                                                id,\n                                                active,\n                                                onChange,\n                                                disabled,\n                                                defaultState,\n                                                activeState,\n                                                className,\n                                                ...rest\n                                              }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n  const [isActive, setIsActive] = React.useState(false);\n\n  React.useEffect(() => setIsActive(active), [active]);\n\n  const cls = `${className || ''} ${isActive ? 'active' : ''} ${activeState ? 'state-change' : ''} ${disabled ? 'disabled' : ''}`;\n\n  return (\n    <Wrapper className={cls}>\n      <IconButton\n        variant={'secondary'}\n        ref={ref}\n        useTransparentBackground={true}\n        shape={'circular'}\n        action={() => {\n          setIsActive(!isActive);\n          if (onChange) {\n            onChange(!isActive);\n          }\n        }}\n        id={id}\n        iconColor={isActive ? activeState?.color ?? defaultState.color : defaultState.color}\n        disabled={disabled}\n        aria-pressed={isActive}\n        {...rest}>\n        {isActive ? activeState?.icon ?? defaultState.icon : defaultState.icon}\n      </IconButton>\n    </Wrapper>\n  );\n});\n\nexport default ToggleButton;\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,WAAW;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,uBAAuB,QAAQ,sBAAsB;AAC9D,SAASC,MAAM,QAAQ,WAAW;AAAC;AAEnC,IAAMC,OAAO,GAAGH,MAAM,CAACI,GAAG,sjBACtBH,uBAAuB,EAMrBA,uBAAuB,EACTC,MAAM,CAACG,KAAK,EAK1BJ,uBAAuB,EAKHC,MAAM,CAACI,WAAW,EAQtCL,uBAAuB,EACTC,MAAM,CAACK,WAAW,CAGrC;AAgBD,OAAO,IAAMC,YAAY,gBAAGV,KAAK,CAACW,UAAU,CAAC,gBASuBC,GAAiC,EAAK;EAAA;EAAA,IAR1DC,EAAE,QAAFA,EAAE;IACFC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;IACZC,WAAW,QAAXA,WAAW;IACXC,SAAS,QAATA,SAAS;IACNC,IAAI;EAErD,sBAAgCpB,KAAK,CAACqB,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA9CC,QAAQ;IAAEC,WAAW;EAE5BvB,KAAK,CAACwB,SAAS,CAAC;IAAA,OAAMD,WAAW,CAACT,MAAM,CAAC;EAAA,GAAE,CAACA,MAAM,CAAC,CAAC;EAEpD,IAAMW,GAAG,aAAMN,SAAS,IAAI,EAAE,cAAIG,QAAQ,GAAG,QAAQ,GAAG,EAAE,cAAIJ,WAAW,GAAG,cAAc,GAAG,EAAE,cAAIF,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE;EAE/H,oBACE,KAAC,OAAO;IAAC,SAAS,EAAES,GAAI;IAAA,uBACtB,KAAC,UAAU;MACT,OAAO,EAAE,WAAY;MACrB,GAAG,EAAEb,GAAI;MACT,wBAAwB,EAAE,IAAK;MAC/B,KAAK,EAAE,UAAW;MAClB,MAAM,EAAE,kBAAM;QACZW,WAAW,CAAC,CAACD,QAAQ,CAAC;QACtB,IAAIP,QAAQ,EAAE;UACZA,QAAQ,CAAC,CAACO,QAAQ,CAAC;QACrB;MACF,CAAE;MACF,EAAE,EAAET,EAAG;MACP,SAAS,EAAES,QAAQ,yBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEQ,KAAK,mEAAIT,YAAY,CAACS,KAAK,GAAGT,YAAY,CAACS,KAAM;MACpF,QAAQ,EAAEV,QAAS;MACnB,gBAAcM;IAAS,GACnBF,IAAI;MAAA,UACPE,QAAQ,wBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAES,IAAI,iEAAIV,YAAY,CAACU,IAAI,GAAGV,YAAY,CAACU;IAAI;EAC3D,EACL;AAEd,CAAC,CAAC;AAAC;EA9CDb,MAAM;EACNC,QAAQ;EACRC,QAAQ;EAERC,YAAY;IATZU,IAAI;IACJD,KAAK;EAAA;EASLR,WAAW;IAVXS,IAAI;IACJD,KAAK;EAAA;AAAA;AAoDP,eAAehB,YAAY"}
+{"version":3,"file":"ToggleButton.js","names":["React","IconButton","styled","IconButtonContentStyles","COLORS","Wrapper","div","white","primary_500","neutral_300","ToggleButton","forwardRef","ref","id","active","onChange","disabled","defaultState","activeState","className","rest","useState","isActive","setIsActive","useEffect","cls","color","icon"],"sources":["../../src/Toggles/ToggleButton.tsx"],"sourcesContent":["import React from 'react';\r\nimport { IconButton } from '../Button';\r\nimport styled from 'styled-components';\r\nimport { IconButtonContentStyles } from '../Button/Iconbutton';\r\nimport { COLORS } from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  ${IconButtonContentStyles} {\r\n    transition: all 0.1s ease-in-out;\r\n  }\r\n\r\n  &.disabled,\r\n  &.active:not(.state-change) {\r\n    ${IconButtonContentStyles} {\r\n      background: ${COLORS.white};\r\n    }\r\n  }\r\n\r\n  &.active:not(.state-change) {\r\n    ${IconButtonContentStyles}:after {\r\n      content: '';\r\n      position: absolute;\r\n      left: 12px;\r\n      bottom: 1px;\r\n      background-color: ${COLORS.primary_500};\r\n      border-radius: 4px;\r\n      height: 4px;\r\n      width: 24px;\r\n    }\r\n  }\r\n\r\n  &.disabled:not(.state-change) {\r\n    ${IconButtonContentStyles}:after {\r\n      background: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface ToggleButtonState {\r\n  icon: React.ReactNode;\r\n  color?: string;\r\n}\r\n\r\nexport interface ToggleButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'onClick'> {\r\n  active: boolean;\r\n  onChange?: (value: boolean) => void;\r\n  disabled?: boolean;\r\n\r\n  defaultState: ToggleButtonState;\r\n  activeState?: ToggleButtonState;\r\n}\r\n\r\nexport const ToggleButton = React.forwardRef(({\r\n                                                id,\r\n                                                active,\r\n                                                onChange,\r\n                                                disabled,\r\n                                                defaultState,\r\n                                                activeState,\r\n                                                className,\r\n                                                ...rest\r\n                                              }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement>) => {\r\n  const [isActive, setIsActive] = React.useState(false);\r\n\r\n  React.useEffect(() => setIsActive(active), [active]);\r\n\r\n  const cls = `${className || ''} ${isActive ? 'active' : ''} ${activeState ? 'state-change' : ''} ${disabled ? 'disabled' : ''}`;\r\n\r\n  return (\r\n    <Wrapper className={cls}>\r\n      <IconButton\r\n        variant={'secondary'}\r\n        ref={ref}\r\n        useTransparentBackground={true}\r\n        shape={'circular'}\r\n        action={() => {\r\n          setIsActive(!isActive);\r\n          if (onChange) {\r\n            onChange(!isActive);\r\n          }\r\n        }}\r\n        id={id}\r\n        iconColor={isActive ? activeState?.color ?? defaultState.color : defaultState.color}\r\n        disabled={disabled}\r\n        aria-pressed={isActive}\r\n        {...rest}>\r\n        {isActive ? activeState?.icon ?? defaultState.icon : defaultState.icon}\r\n      </IconButton>\r\n    </Wrapper>\r\n  );\r\n});\r\n\r\nexport default ToggleButton;\r\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,WAAW;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,uBAAuB,QAAQ,sBAAsB;AAC9D,SAASC,MAAM,QAAQ,WAAW;AAAC;AAEnC,IAAMC,OAAO,GAAGH,MAAM,CAACI,GAAG,sjBACtBH,uBAAuB,EAMrBA,uBAAuB,EACTC,MAAM,CAACG,KAAK,EAK1BJ,uBAAuB,EAKHC,MAAM,CAACI,WAAW,EAQtCL,uBAAuB,EACTC,MAAM,CAACK,WAAW,CAGrC;AAgBD,OAAO,IAAMC,YAAY,gBAAGV,KAAK,CAACW,UAAU,CAAC,gBASuBC,GAAiC,EAAK;EAAA;EAAA,IAR1DC,EAAE,QAAFA,EAAE;IACFC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;IACZC,WAAW,QAAXA,WAAW;IACXC,SAAS,QAATA,SAAS;IACNC,IAAI;EAErD,sBAAgCpB,KAAK,CAACqB,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA9CC,QAAQ;IAAEC,WAAW;EAE5BvB,KAAK,CAACwB,SAAS,CAAC;IAAA,OAAMD,WAAW,CAACT,MAAM,CAAC;EAAA,GAAE,CAACA,MAAM,CAAC,CAAC;EAEpD,IAAMW,GAAG,aAAMN,SAAS,IAAI,EAAE,cAAIG,QAAQ,GAAG,QAAQ,GAAG,EAAE,cAAIJ,WAAW,GAAG,cAAc,GAAG,EAAE,cAAIF,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE;EAE/H,oBACE,KAAC,OAAO;IAAC,SAAS,EAAES,GAAI;IAAA,uBACtB,KAAC,UAAU;MACT,OAAO,EAAE,WAAY;MACrB,GAAG,EAAEb,GAAI;MACT,wBAAwB,EAAE,IAAK;MAC/B,KAAK,EAAE,UAAW;MAClB,MAAM,EAAE,kBAAM;QACZW,WAAW,CAAC,CAACD,QAAQ,CAAC;QACtB,IAAIP,QAAQ,EAAE;UACZA,QAAQ,CAAC,CAACO,QAAQ,CAAC;QACrB;MACF,CAAE;MACF,EAAE,EAAET,EAAG;MACP,SAAS,EAAES,QAAQ,yBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEQ,KAAK,mEAAIT,YAAY,CAACS,KAAK,GAAGT,YAAY,CAACS,KAAM;MACpF,QAAQ,EAAEV,QAAS;MACnB,gBAAcM;IAAS,GACnBF,IAAI;MAAA,UACPE,QAAQ,wBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAES,IAAI,iEAAIV,YAAY,CAACU,IAAI,GAAGV,YAAY,CAACU;IAAI;EAC3D,EACL;AAEd,CAAC,CAAC;AAAC;EA9CDb,MAAM;EACNC,QAAQ;EACRC,QAAQ;EAERC,YAAY;IATZU,IAAI;IACJD,KAAK;EAAA;EASLR,WAAW;IAVXS,IAAI;IACJD,KAAK;EAAA;AAAA;AAoDP,eAAehB,YAAY"}

package/dist/Toggles/ToggleSwitch.cjs

@@ -33,8 +33,8 @@ var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onToggle = _ref.onToggle,
     className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  /**
-   * Does all required pre-requisites and toggles the switcher state.
+  /**
+   * Does all required pre-requisites and toggles the switcher state.
    */
   var toggle = function toggle() {
     // If disabled, don't do anything

package/dist/Toggles/ToggleSwitch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleSwitch.cjs","names":["CheckmarkContainer","styled","div","ToggleSwitch","React","forwardRef","ref","id","disabled","selected","label","isSemantic","size","onToggle","className","rest","toggle","focusVisibleRef","useFocusVisibleRef","useImperativeHandle","current","Size","Medium","e","key","toString","toLowerCase","concat","COLORS","white"],"sources":["../../src/Toggles/ToggleSwitch.tsx"],"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 {COLORS, Size, SystemIcons} from '..';\nimport {useFocusVisibleRef} from '../common';\nimport styled from \"styled-components\";\n\nconst CheckmarkContainer =  styled.div`\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  left: 2px;\n`;\n\nconst ToggleSwitch = React.forwardRef(({\n                                         id,\n                                         disabled,\n                                         selected,\n                                         label,\n                                         isSemantic,\n                                         size,\n                                         onToggle,\n                                         className,\n                                         ...rest\n                                       }: ToggleSwitchProps, ref) => {\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  const focusVisibleRef = useFocusVisibleRef([]);\n\n  React.useImperativeHandle(ref, () => focusVisibleRef.current, [focusVisibleRef]);\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledSwitch\n      ref={focusVisibleRef}\n      onClick={(e) => toggle()}\n      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && toggle()}\n      className={size\n        .toString()\n        .toLowerCase()\n        .concat(disabled ? ' disabled' : '')\n        .concat(className ? ` ${className}` : '')}\n      selected={selected}\n      id={id}\n      role=\"switch\"\n      aria-pressed={selected}\n      tabIndex={disabled ? -1 : 0}\n      {...rest}>\n      <ToggleSwitchContainer id=\"switchContainer\">\n        <Switch className={isSemantic ? 'semantic' : ''} >\n          {selected && <CheckmarkContainer><SystemIcons.CheckMark size={'14px'} color={COLORS.white}/></CheckmarkContainer>}\n        </Switch>\n      </ToggleSwitchContainer>\n      {label && (\n        <label className={'label'} htmlFor={id}>\n          {label}\n        </label>\n      )}\n    </StyledSwitch>\n  );\n});\n\nexport default ToggleSwitch;\n"],"mappings":";;;;;;;;;;;AAGA;AAUA;AACA;AACA;AACA;AAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEvC,IAAMA,kBAAkB,GAAIC,yBAAM,CAACC,GAAG,iOAQrC;AAED,IAAMC,YAAY,gBAAGC,KAAK,CAACC,UAAU,CAAC,gBAUuBC,GAAG,EAAK;EAAA;EAAA,IAT5BC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,IAAI;EAE9C;AACF;AACA;EACE,IAAMC,MAAM,GAAG,SAATA,MAAM,GAAS;IACnB;IACA,IAAIR,QAAQ,EAAE;;IAEd;IACAK,QAAQ,CAAC,CAACJ,QAAQ,CAAC;EACrB,CAAC;EAED,IAAMQ,eAAe,GAAG,IAAAC,0BAAkB,EAAC,EAAE,CAAC;EAE9Cd,KAAK,CAACe,mBAAmB,CAACb,GAAG,EAAE;IAAA,OAAMW,eAAe,CAACG,OAAO;EAAA,GAAE,CAACH,eAAe,CAAC,CAAC;EAEhFL,IAAI,YAAGA,IAAI,yCAAIS,MAAI,CAACC,MAAM;EAE1B,oBACE,sBAAC,2BAAY;IACX,GAAG,EAAEL,eAAgB;IACrB,OAAO,EAAE,iBAACM,CAAC;MAAA,OAAKP,MAAM,EAAE;IAAA,CAAC;IACzB,SAAS,EAAE,mBAAAO,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAKR,MAAM,EAAE;IAAA,CAAC;IACjE,SAAS,EAAEJ,IAAI,CACZa,QAAQ,EAAE,CACVC,WAAW,EAAE,CACbC,MAAM,CAACnB,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CACnCmB,MAAM,CAACb,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAE;IAC5C,QAAQ,EAAEL,QAAS;IACnB,EAAE,EAAEF,EAAG;IACP,IAAI,EAAC,QAAQ;IACb,gBAAcE,QAAS;IACvB,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAC,GAAG;EAAE,GACxBO,IAAI;IAAA,wBACR,qBAAC,oCAAqB;MAAC,EAAE,EAAC,iBAAiB;MAAA,uBACzC,qBAAC,2BAAM;QAAC,SAAS,EAAEJ,UAAU,GAAG,UAAU,GAAG,EAAG;QAAA,UAC7CF,QAAQ,iBAAI,qBAAC,kBAAkB;UAAA,uBAAC,qBAAC,aAAW,CAAC,SAAS;YAAC,IAAI,EAAE,MAAO;YAAC,KAAK,EAAEmB,QAAM,CAACC;UAAM;QAAE;MAAqB;IAC1G,EACa,EACvBnB,KAAK,iBACJ;MAAO,SAAS,EAAE,OAAQ;MAAC,OAAO,EAAEH,EAAG;MAAA,UACpCG;IAAK,EAET;EAAA,GACY;AAEnB,CAAC,CAAC;AAAC,eAEYP,YAAY;AAAA"}
+{"version":3,"file":"ToggleSwitch.cjs","names":["CheckmarkContainer","styled","div","ToggleSwitch","React","forwardRef","ref","id","disabled","selected","label","isSemantic","size","onToggle","className","rest","toggle","focusVisibleRef","useFocusVisibleRef","useImperativeHandle","current","Size","Medium","e","key","toString","toLowerCase","concat","COLORS","white"],"sources":["../../src/Toggles/ToggleSwitch.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {ToggleSwitchProps} from './TogglerTypes';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch} from './TogglerStyles';\r\nimport {COLORS, Size, SystemIcons} from '..';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport styled from \"styled-components\";\r\n\r\nconst CheckmarkContainer =  styled.div`\r\n  position: absolute;\r\n  width: 14px;\r\n  height: 14px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  left: 2px;\r\n`;\r\n\r\nconst ToggleSwitch = React.forwardRef(({\r\n                                         id,\r\n                                         disabled,\r\n                                         selected,\r\n                                         label,\r\n                                         isSemantic,\r\n                                         size,\r\n                                         onToggle,\r\n                                         className,\r\n                                         ...rest\r\n                                       }: ToggleSwitchProps, ref) => {\r\n  /**\r\n   * Does all required pre-requisites and toggles the switcher state.\r\n   */\r\n  const toggle = () => {\r\n    // If disabled, don't do anything\r\n    if (disabled) return;\r\n\r\n    // Toggle state change\r\n    onToggle(!selected);\r\n  };\r\n\r\n  const focusVisibleRef = useFocusVisibleRef([]);\r\n\r\n  React.useImperativeHandle(ref, () => focusVisibleRef.current, [focusVisibleRef]);\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  return (\r\n    <StyledSwitch\r\n      ref={focusVisibleRef}\r\n      onClick={(e) => toggle()}\r\n      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && toggle()}\r\n      className={size\r\n        .toString()\r\n        .toLowerCase()\r\n        .concat(disabled ? ' disabled' : '')\r\n        .concat(className ? ` ${className}` : '')}\r\n      selected={selected}\r\n      id={id}\r\n      role=\"switch\"\r\n      aria-pressed={selected}\r\n      tabIndex={disabled ? -1 : 0}\r\n      {...rest}>\r\n      <ToggleSwitchContainer id=\"switchContainer\">\r\n        <Switch className={isSemantic ? 'semantic' : ''} >\r\n          {selected && <CheckmarkContainer><SystemIcons.CheckMark size={'14px'} color={COLORS.white}/></CheckmarkContainer>}\r\n        </Switch>\r\n      </ToggleSwitchContainer>\r\n      {label && (\r\n        <label className={'label'} htmlFor={id}>\r\n          {label}\r\n        </label>\r\n      )}\r\n    </StyledSwitch>\r\n  );\r\n});\r\n\r\nexport default ToggleSwitch;\r\n"],"mappings":";;;;;;;;;;;AAGA;AAUA;AACA;AACA;AACA;AAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEvC,IAAMA,kBAAkB,GAAIC,yBAAM,CAACC,GAAG,iOAQrC;AAED,IAAMC,YAAY,gBAAGC,KAAK,CAACC,UAAU,CAAC,gBAUuBC,GAAG,EAAK;EAAA;EAAA,IAT5BC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,IAAI;EAE9C;AACF;AACA;EACE,IAAMC,MAAM,GAAG,SAATA,MAAM,GAAS;IACnB;IACA,IAAIR,QAAQ,EAAE;;IAEd;IACAK,QAAQ,CAAC,CAACJ,QAAQ,CAAC;EACrB,CAAC;EAED,IAAMQ,eAAe,GAAG,IAAAC,0BAAkB,EAAC,EAAE,CAAC;EAE9Cd,KAAK,CAACe,mBAAmB,CAACb,GAAG,EAAE;IAAA,OAAMW,eAAe,CAACG,OAAO;EAAA,GAAE,CAACH,eAAe,CAAC,CAAC;EAEhFL,IAAI,YAAGA,IAAI,yCAAIS,MAAI,CAACC,MAAM;EAE1B,oBACE,sBAAC,2BAAY;IACX,GAAG,EAAEL,eAAgB;IACrB,OAAO,EAAE,iBAACM,CAAC;MAAA,OAAKP,MAAM,EAAE;IAAA,CAAC;IACzB,SAAS,EAAE,mBAAAO,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAKR,MAAM,EAAE;IAAA,CAAC;IACjE,SAAS,EAAEJ,IAAI,CACZa,QAAQ,EAAE,CACVC,WAAW,EAAE,CACbC,MAAM,CAACnB,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CACnCmB,MAAM,CAACb,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAE;IAC5C,QAAQ,EAAEL,QAAS;IACnB,EAAE,EAAEF,EAAG;IACP,IAAI,EAAC,QAAQ;IACb,gBAAcE,QAAS;IACvB,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAC,GAAG;EAAE,GACxBO,IAAI;IAAA,wBACR,qBAAC,oCAAqB;MAAC,EAAE,EAAC,iBAAiB;MAAA,uBACzC,qBAAC,2BAAM;QAAC,SAAS,EAAEJ,UAAU,GAAG,UAAU,GAAG,EAAG;QAAA,UAC7CF,QAAQ,iBAAI,qBAAC,kBAAkB;UAAA,uBAAC,qBAAC,aAAW,CAAC,SAAS;YAAC,IAAI,EAAE,MAAO;YAAC,KAAK,EAAEmB,QAAM,CAACC;UAAM;QAAE;MAAqB;IAC1G,EACa,EACvBnB,KAAK,iBACJ;MAAO,SAAS,EAAE,OAAQ;MAAC,OAAO,EAAEH,EAAG;MAAA,UACpCG;IAAK,EAET;EAAA,GACY;AAEnB,CAAC,CAAC;AAAC,eAEYP,YAAY;AAAA"}

package/dist/Toggles/ToggleSwitch.d.ts

@@ -1,10 +1,10 @@
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-/**
- * Import custom types.
- */
-import { ToggleSwitchProps } from './TogglerTypes';
-declare const ToggleSwitch: React.ForwardRefExoticComponent<ToggleSwitchProps & React.RefAttributes<unknown>>;
-export default ToggleSwitch;
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+/**
+ * Import custom types.
+ */
+import { ToggleSwitchProps } from './TogglerTypes';
+declare const ToggleSwitch: React.ForwardRefExoticComponent<ToggleSwitchProps & React.RefAttributes<unknown>>;
+export default ToggleSwitch;

package/dist/Toggles/ToggleSwitch.js

@@ -5,17 +5,17 @@ var _excluded = ["id", "disabled", "selected", "label", "isSemantic", "size", "o
 var _templateObject;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-/**
- * Import React libraries.
+/**
+ * Import React libraries.
  */
 import * as React from 'react';
 
-/**
- * Import custom types.
+/**
+ * Import custom types.
  */
 
-/**
- * Import custom styles.
+/**
+ * Import custom styles.
  */
 import { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';
 import { COLORS, Size, SystemIcons } from '..';
@@ -35,8 +35,8 @@ var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onToggle = _ref.onToggle,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  /**
-   * Does all required pre-requisites and toggles the switcher state.
+  /**
+   * Does all required pre-requisites and toggles the switcher state.
    */
   var toggle = function toggle() {
     // If disabled, don't do anything

package/dist/Toggles/ToggleSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleSwitch.js","names":["React","ToggleSwitchContainer","ToggleSwitch","Switch","StyledSwitch","COLORS","Size","SystemIcons","useFocusVisibleRef","styled","CheckmarkContainer","div","forwardRef","ref","id","disabled","selected","label","isSemantic","size","onToggle","className","rest","toggle","focusVisibleRef","useImperativeHandle","current","Medium","e","key","toString","toLowerCase","concat","white"],"sources":["../../src/Toggles/ToggleSwitch.tsx"],"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 {COLORS, Size, SystemIcons} from '..';\nimport {useFocusVisibleRef} from '../common';\nimport styled from \"styled-components\";\n\nconst CheckmarkContainer =  styled.div`\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  left: 2px;\n`;\n\nconst ToggleSwitch = React.forwardRef(({\n                                         id,\n                                         disabled,\n                                         selected,\n                                         label,\n                                         isSemantic,\n                                         size,\n                                         onToggle,\n                                         className,\n                                         ...rest\n                                       }: ToggleSwitchProps, ref) => {\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  const focusVisibleRef = useFocusVisibleRef([]);\n\n  React.useImperativeHandle(ref, () => focusVisibleRef.current, [focusVisibleRef]);\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledSwitch\n      ref={focusVisibleRef}\n      onClick={(e) => toggle()}\n      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && toggle()}\n      className={size\n        .toString()\n        .toLowerCase()\n        .concat(disabled ? ' disabled' : '')\n        .concat(className ? ` ${className}` : '')}\n      selected={selected}\n      id={id}\n      role=\"switch\"\n      aria-pressed={selected}\n      tabIndex={disabled ? -1 : 0}\n      {...rest}>\n      <ToggleSwitchContainer id=\"switchContainer\">\n        <Switch className={isSemantic ? 'semantic' : ''} >\n          {selected && <CheckmarkContainer><SystemIcons.CheckMark size={'14px'} color={COLORS.white}/></CheckmarkContainer>}\n        </Switch>\n      </ToggleSwitchContainer>\n      {label && (\n        <label className={'label'} htmlFor={id}>\n          {label}\n        </label>\n      )}\n    </StyledSwitch>\n  );\n});\n\nexport default ToggleSwitch;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;;AAGA;AACA;AACA;AACA,SAAQC,qBAAqB,EAAEC,YAAY,IAAIC,MAAM,EAAEC,YAAY,QAAO,iBAAiB;AAC3F,SAAQC,MAAM,EAAEC,IAAI,EAAEC,WAAW,QAAO,IAAI;AAC5C,SAAQC,kBAAkB,QAAO,WAAW;AAC5C,OAAOC,MAAM,MAAM,mBAAmB;AAAC;AAAA;AAEvC,IAAMC,kBAAkB,GAAID,MAAM,CAACE,GAAG,mNAQrC;AAED,IAAMT,YAAY,gBAAGF,KAAK,CAACY,UAAU,CAAC,gBAUuBC,GAAG,EAAK;EAAA;EAAA,IAT5BC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,IAAI;EAE9C;AACF;AACA;EACE,IAAMC,MAAM,GAAG,SAATA,MAAM,GAAS;IACnB;IACA,IAAIR,QAAQ,EAAE;;IAEd;IACAK,QAAQ,CAAC,CAACJ,QAAQ,CAAC;EACrB,CAAC;EAED,IAAMQ,eAAe,GAAGhB,kBAAkB,CAAC,EAAE,CAAC;EAE9CR,KAAK,CAACyB,mBAAmB,CAACZ,GAAG,EAAE;IAAA,OAAMW,eAAe,CAACE,OAAO;EAAA,GAAE,CAACF,eAAe,CAAC,CAAC;EAEhFL,IAAI,YAAGA,IAAI,yCAAIb,IAAI,CAACqB,MAAM;EAE1B,oBACE,MAAC,YAAY;IACX,GAAG,EAAEH,eAAgB;IACrB,OAAO,EAAE,iBAACI,CAAC;MAAA,OAAKL,MAAM,EAAE;IAAA,CAAC;IACzB,SAAS,EAAE,mBAAAK,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAKN,MAAM,EAAE;IAAA,CAAC;IACjE,SAAS,EAAEJ,IAAI,CACZW,QAAQ,EAAE,CACVC,WAAW,EAAE,CACbC,MAAM,CAACjB,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CACnCiB,MAAM,CAACX,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAE;IAC5C,QAAQ,EAAEL,QAAS;IACnB,EAAE,EAAEF,EAAG;IACP,IAAI,EAAC,QAAQ;IACb,gBAAcE,QAAS;IACvB,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAC,GAAG;EAAE,GACxBO,IAAI;IAAA,wBACR,KAAC,qBAAqB;MAAC,EAAE,EAAC,iBAAiB;MAAA,uBACzC,KAAC,MAAM;QAAC,SAAS,EAAEJ,UAAU,GAAG,UAAU,GAAG,EAAG;QAAA,UAC7CF,QAAQ,iBAAI,KAAC,kBAAkB;UAAA,uBAAC,KAAC,WAAW,CAAC,SAAS;YAAC,IAAI,EAAE,MAAO;YAAC,KAAK,EAAEX,MAAM,CAAC4B;UAAM;QAAE;MAAqB;IAC1G,EACa,EACvBhB,KAAK,iBACJ;MAAO,SAAS,EAAE,OAAQ;MAAC,OAAO,EAAEH,EAAG;MAAA,UACpCG;IAAK,EAET;EAAA,GACY;AAEnB,CAAC,CAAC;AAEF,eAAef,YAAY"}
+{"version":3,"file":"ToggleSwitch.js","names":["React","ToggleSwitchContainer","ToggleSwitch","Switch","StyledSwitch","COLORS","Size","SystemIcons","useFocusVisibleRef","styled","CheckmarkContainer","div","forwardRef","ref","id","disabled","selected","label","isSemantic","size","onToggle","className","rest","toggle","focusVisibleRef","useImperativeHandle","current","Medium","e","key","toString","toLowerCase","concat","white"],"sources":["../../src/Toggles/ToggleSwitch.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {ToggleSwitchProps} from './TogglerTypes';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch} from './TogglerStyles';\r\nimport {COLORS, Size, SystemIcons} from '..';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport styled from \"styled-components\";\r\n\r\nconst CheckmarkContainer =  styled.div`\r\n  position: absolute;\r\n  width: 14px;\r\n  height: 14px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  left: 2px;\r\n`;\r\n\r\nconst ToggleSwitch = React.forwardRef(({\r\n                                         id,\r\n                                         disabled,\r\n                                         selected,\r\n                                         label,\r\n                                         isSemantic,\r\n                                         size,\r\n                                         onToggle,\r\n                                         className,\r\n                                         ...rest\r\n                                       }: ToggleSwitchProps, ref) => {\r\n  /**\r\n   * Does all required pre-requisites and toggles the switcher state.\r\n   */\r\n  const toggle = () => {\r\n    // If disabled, don't do anything\r\n    if (disabled) return;\r\n\r\n    // Toggle state change\r\n    onToggle(!selected);\r\n  };\r\n\r\n  const focusVisibleRef = useFocusVisibleRef([]);\r\n\r\n  React.useImperativeHandle(ref, () => focusVisibleRef.current, [focusVisibleRef]);\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  return (\r\n    <StyledSwitch\r\n      ref={focusVisibleRef}\r\n      onClick={(e) => toggle()}\r\n      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && toggle()}\r\n      className={size\r\n        .toString()\r\n        .toLowerCase()\r\n        .concat(disabled ? ' disabled' : '')\r\n        .concat(className ? ` ${className}` : '')}\r\n      selected={selected}\r\n      id={id}\r\n      role=\"switch\"\r\n      aria-pressed={selected}\r\n      tabIndex={disabled ? -1 : 0}\r\n      {...rest}>\r\n      <ToggleSwitchContainer id=\"switchContainer\">\r\n        <Switch className={isSemantic ? 'semantic' : ''} >\r\n          {selected && <CheckmarkContainer><SystemIcons.CheckMark size={'14px'} color={COLORS.white}/></CheckmarkContainer>}\r\n        </Switch>\r\n      </ToggleSwitchContainer>\r\n      {label && (\r\n        <label className={'label'} htmlFor={id}>\r\n          {label}\r\n        </label>\r\n      )}\r\n    </StyledSwitch>\r\n  );\r\n});\r\n\r\nexport default ToggleSwitch;\r\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;;AAGA;AACA;AACA;AACA,SAAQC,qBAAqB,EAAEC,YAAY,IAAIC,MAAM,EAAEC,YAAY,QAAO,iBAAiB;AAC3F,SAAQC,MAAM,EAAEC,IAAI,EAAEC,WAAW,QAAO,IAAI;AAC5C,SAAQC,kBAAkB,QAAO,WAAW;AAC5C,OAAOC,MAAM,MAAM,mBAAmB;AAAC;AAAA;AAEvC,IAAMC,kBAAkB,GAAID,MAAM,CAACE,GAAG,mNAQrC;AAED,IAAMT,YAAY,gBAAGF,KAAK,CAACY,UAAU,CAAC,gBAUuBC,GAAG,EAAK;EAAA;EAAA,IAT5BC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,IAAI;EAE9C;AACF;AACA;EACE,IAAMC,MAAM,GAAG,SAATA,MAAM,GAAS;IACnB;IACA,IAAIR,QAAQ,EAAE;;IAEd;IACAK,QAAQ,CAAC,CAACJ,QAAQ,CAAC;EACrB,CAAC;EAED,IAAMQ,eAAe,GAAGhB,kBAAkB,CAAC,EAAE,CAAC;EAE9CR,KAAK,CAACyB,mBAAmB,CAACZ,GAAG,EAAE;IAAA,OAAMW,eAAe,CAACE,OAAO;EAAA,GAAE,CAACF,eAAe,CAAC,CAAC;EAEhFL,IAAI,YAAGA,IAAI,yCAAIb,IAAI,CAACqB,MAAM;EAE1B,oBACE,MAAC,YAAY;IACX,GAAG,EAAEH,eAAgB;IACrB,OAAO,EAAE,iBAACI,CAAC;MAAA,OAAKL,MAAM,EAAE;IAAA,CAAC;IACzB,SAAS,EAAE,mBAAAK,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAKN,MAAM,EAAE;IAAA,CAAC;IACjE,SAAS,EAAEJ,IAAI,CACZW,QAAQ,EAAE,CACVC,WAAW,EAAE,CACbC,MAAM,CAACjB,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CACnCiB,MAAM,CAACX,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAE;IAC5C,QAAQ,EAAEL,QAAS;IACnB,EAAE,EAAEF,EAAG;IACP,IAAI,EAAC,QAAQ;IACb,gBAAcE,QAAS;IACvB,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAC,GAAG;EAAE,GACxBO,IAAI;IAAA,wBACR,KAAC,qBAAqB;MAAC,EAAE,EAAC,iBAAiB;MAAA,uBACzC,KAAC,MAAM;QAAC,SAAS,EAAEJ,UAAU,GAAG,UAAU,GAAG,EAAG;QAAA,UAC7CF,QAAQ,iBAAI,KAAC,kBAAkB;UAAA,uBAAC,KAAC,WAAW,CAAC,SAAS;YAAC,IAAI,EAAE,MAAO;YAAC,KAAK,EAAEX,MAAM,CAAC4B;UAAM;QAAE;MAAqB;IAC1G,EACa,EACvBhB,KAAK,iBACJ;MAAO,SAAS,EAAE,OAAQ;MAAC,OAAO,EAAEH,EAAG;MAAA,UACpCG;IAAK,EAET;EAAA,GACY;AAEnB,CAAC,CAAC;AAEF,eAAef,YAAY"}

package/dist/Toggles/TogglerStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TogglerStyles.cjs","names":["StyledSwitch","styled","div","ComponentSStyling","ComponentTextStyle","Regular","COLORS","black","ComponentMStyling","ComponentLStyling","neutral_300","primary_100","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","focusStyles","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"sources":["../../src/Toggles/TogglerStyles.ts"],"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  &.disabled[aria-pressed='true'] 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\n  &[aria-pressed='true']:hover span {\n    &.semantic {\n      background-color: ${COLORS.correct_500};\n    }\n\n    &:before {\n      background-color: ${COLORS.primary_20};\n    }\n  }\n\n  &[aria-pressed='true'] 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  &.disabled[aria-pressed='false'] 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\n  &[aria-pressed='false']: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-visible {\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: flex;\n  align-items: center;\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"],"mappings":";;;;;;;;AAGA;AAKA;AACA;AAAmH;AAE5G,IAAMA,YAAY,GAAGC,yBAAM,CAACC,GAAG,8wDAShC,IAAAC,6BAAiB,EAACC,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,EAI3D,IAAAC,6BAAiB,EAACJ,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,EAI3D,IAAAE,6BAAiB,EAACL,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,EAGpDD,cAAM,CAACI,WAAW,EAaLJ,cAAM,CAACK,WAAW,EAKpBL,cAAM,CAACI,WAAW,EAIhBJ,cAAM,CAACM,WAAW,EAOlBN,cAAM,CAACO,WAAW,EAIlBP,cAAM,CAACQ,UAAU,EAKnBR,cAAM,CAACS,WAAW,EAGhBT,cAAM,CAACO,WAAW,EAWpBP,cAAM,CAACI,WAAW,EAIhBJ,cAAM,CAACU,WAAW,EAOlBV,cAAM,CAACW,YAAY,EAInBX,cAAM,CAACQ,UAAU,EAKrCI,mBAAW,CAMhB;AAAC;AAEK,IAAMC,qBAAqB,GAAGlB,yBAAM,CAACmB,KAAK,sNAOhD;AAAC;AAEK,IAAMC,YAAY,GAAGpB,yBAAM,CAACqB,IAAI,8sBAYjBhB,cAAM,CAACiB,WAAW,EAIhBjB,cAAM,CAACW,YAAY,EAUnBX,cAAM,CAACkB,KAAK,CAMnC;AAAC"}
+{"version":3,"file":"TogglerStyles.cjs","names":["StyledSwitch","styled","div","ComponentSStyling","ComponentTextStyle","Regular","COLORS","black","ComponentMStyling","ComponentLStyling","neutral_300","primary_100","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","focusStyles","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\r\n * Import custom styles.\r\n */\r\nimport { COLORS, focusStyles } from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { css } from 'styled-components';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  width: max-content;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  }\r\n\r\n  &.large {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  }\r\n  &.disabled {\r\n    color: ${COLORS.neutral_300};\r\n\r\n    .label {\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n  .label {\r\n    cursor: inherit;\r\n    margin-left: 8px;\r\n  }\r\n\r\n  &:not(.disabled):active label:first-of-type span {\r\n    &:before {\r\n      background-color: ${COLORS.primary_100};\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${COLORS.neutral_300} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${COLORS.neutral_200} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true']:hover span {\r\n    &.semantic {\r\n      background-color: ${COLORS.correct_500};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${COLORS.primary_20};\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${COLORS.primary_500};\r\n\r\n    &.semantic {\r\n      background-color: ${COLORS.correct_500};\r\n    }\r\n\r\n    &:before {\r\n      -webkit-transform: translateX(20px);\r\n      -ms-transform: translateX(20px);\r\n      transform: translateX(20px);\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='false'] label:first-of-type span {\r\n    background-color: ${COLORS.neutral_300} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${COLORS.neutral_100} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='false']:hover label:first-of-type span {\r\n    &.semantic {\r\n      background-color: ${COLORS.critical_500};\r\n    }\r\n\r\n    &:before {\r\n      background-color: ${COLORS.primary_20};\r\n    }\r\n  }\r\n\r\n  &:not(.disabled).focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled) label:first-of-type {\r\n    cursor: inherit;\r\n  }\r\n`;\r\n\r\nexport const ToggleSwitchContainer = styled.label`\r\n  position: relative;\r\n  align-items: center;\r\n  display: inline-flex;\r\n  height: 28px;\r\n  width: auto;\r\n  padding: 10px 6px;\r\n`;\r\n\r\nexport const ToggleSwitch = styled.span`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  vertical-align: middle;\r\n  cursor: pointer;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  width: 36px;\r\n  height: 16px;\r\n  background-color: ${COLORS.neutral_500};\r\n  border-radius: 100px;\r\n\r\n  &.semantic {\r\n    background-color: ${COLORS.critical_500};\r\n  }\r\n\r\n  &:before {\r\n    position: absolute;\r\n    content: '';\r\n    height: 12px;\r\n    width: 12px;\r\n    left: 2px;\r\n    top: calc(50% - 6px);\r\n    background-color: ${COLORS.white};\r\n    -webkit-transition: background-color 0.1s, transform 0.1s;\r\n    transition: 0.1s;\r\n    transition-timing-function: ease-in-out;\r\n    border-radius: 50%;\r\n  }\r\n`;\r\n"],"mappings":";;;;;;;;AAGA;AAKA;AACA;AAAmH;AAE5G,IAAMA,YAAY,GAAGC,yBAAM,CAACC,GAAG,8wDAShC,IAAAC,6BAAiB,EAACC,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,EAI3D,IAAAC,6BAAiB,EAACJ,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,EAI3D,IAAAE,6BAAiB,EAACL,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,EAGpDD,cAAM,CAACI,WAAW,EAaLJ,cAAM,CAACK,WAAW,EAKpBL,cAAM,CAACI,WAAW,EAIhBJ,cAAM,CAACM,WAAW,EAOlBN,cAAM,CAACO,WAAW,EAIlBP,cAAM,CAACQ,UAAU,EAKnBR,cAAM,CAACS,WAAW,EAGhBT,cAAM,CAACO,WAAW,EAWpBP,cAAM,CAACI,WAAW,EAIhBJ,cAAM,CAACU,WAAW,EAOlBV,cAAM,CAACW,YAAY,EAInBX,cAAM,CAACQ,UAAU,EAKrCI,mBAAW,CAMhB;AAAC;AAEK,IAAMC,qBAAqB,GAAGlB,yBAAM,CAACmB,KAAK,sNAOhD;AAAC;AAEK,IAAMC,YAAY,GAAGpB,yBAAM,CAACqB,IAAI,8sBAYjBhB,cAAM,CAACiB,WAAW,EAIhBjB,cAAM,CAACW,YAAY,EAUnBX,cAAM,CAACkB,KAAK,CAMnC;AAAC"}

package/dist/Toggles/TogglerStyles.d.ts

@@ -1,5 +1,5 @@
-export declare const StyledSwitch: import("styled-components").StyledComponent<"div", any, {
-    selected: boolean | undefined;
-}, never>;
-export declare const ToggleSwitchContainer: import("styled-components").StyledComponent<"label", any, {}, never>;
-export declare const ToggleSwitch: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledSwitch: import("styled-components").StyledComponent<"div", any, {
+    selected: boolean | undefined;
+}, never>;
+export declare const ToggleSwitchContainer: import("styled-components").StyledComponent<"label", any, {}, never>;
+export declare const ToggleSwitch: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/Toggles/TogglerStyles.js

@@ -1,12 +1,12 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3;
-/**
- * Import custom styles.
+/**
+ * Import custom styles.
  */
 import { COLORS, focusStyles } from '../styles';
 
-/**
- * Import third-party libraries.
+/**
+ * Import third-party libraries.
  */
 import styled from 'styled-components';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';