@laerdal/life-react-components 1.11.0 → 2.0.0-dev.1.full

package/dist/Popover/Popover.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Popover/Popover.tsx"],"names":["Container","styled","div","props","size","Size","Small","Large","COLORS","white","BOXSHADOWS","BOXSHADOW_CENTERED","Z_INDEXES","popover","position","Position","Bottom","Top","Left","Right","showArrowPointer","renderArrowStyles","TopContainer","MiddleContainer","BottomContainer","TextContainer","renderMargins","note","NoteContainer","ComponentTextStyle","Regular","neutral_600","LabelContainer","Bold","CloseButtonContainer","TextButtonContainer","IconButtonContainer","Wrapper","showOnClick","showPopover","isNotePresent","Popover","Medium","topSectionProps","bottomSectionProps","mainContent","children","React","useState","setShowPopover","popoverRef","useRef","useEffect","checkIfClickedOutside","e","current","contains","target","document","addEventListener","removeEventListener","text","textButton","icon","action","label","iconButtons","map","iconButton"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\nimport { Button, IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';\nimport { Position, Size } from '../types';\n\nconst Container = styled.div<{ size: Size; position: Position; showArrowPointer: boolean }>`\n  //height: ${(props) => (props.size === Size.Small ? '240px' : props.size === Size.Large ? '480px' : '360px')};\n  min-width: ${(props) => (props.size === Size.Small ? '320px' : props.size === Size.Large ? '640px' : '480px')};\n  border-radius: 4px;\n  background: ${COLORS.white};\n  cursor: default;\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n\n  position: absolute;  \n  visibility: hidden;\n  opacity: 0;\n  z-index: ${Z_INDEXES.popover};\n\n  ${(props) => (props.position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '')}\n  ${(props) => (props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '')}\n\n  ${(props) => (props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '')}\n  ${(props) => (props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '')}\n\n  &::after {\n    ${(props) => (props.showArrowPointer ? renderArrowStyles(props.position) : '')}\n`;\n\nconst TopContainer = styled.div<{ size: Size }>`\n  height: ${(props) => (props.size === Size.Small ? '56px' : props.size === Size.Large ? '72px' : '64px')};\n  display: flex;\n`;\n\nconst MiddleContainer = styled.div<{ size: Size }>`\n  margin: 8px;\n  height: ${(props) => (props.size === Size.Small ? '104px' : props.size === Size.Large ? '304px' : '208px')};\n  padding: ${(props) => (props.size === Size.Small ? '0 8px' : props.size === Size.Large ? '0 16px' : '0 12px')};\n  overflow-y: auto;\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst BottomContainer = styled.div<{ size: Size }>`\n  height: ${(props) => (props.size === Size.Small ? '64px' : props.size === Size.Large ? '88px' : '72px')};  \n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n`;\n\nconst TextContainer = styled.div<{ note: boolean; size: Size }>`\n  display: flex;\n  flex-direction: column;\n  margin: ${(props) => renderMargins(props.note, props.size)};\n  flex-grow: 1;\n`;\n\nconst NoteContainer = styled.div<{ size: Size }>`\n  ${(props) =>\n    props.size === Size.Small\n      ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)\n      : props.size === Size.Large\n      ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)\n      : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst LabelContainer = styled.div<{ size: Size }>`\n  ${(props) =>\n    props.size === Size.Small\n      ? ComponentSStyling(ComponentTextStyle.Bold, null)\n      : props.size === Size.Large\n      ? ComponentLStyling(ComponentTextStyle.Bold, null)\n      : ComponentMStyling(ComponentTextStyle.Bold, null)}\n`;\n\nconst CloseButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '4px 16px 4px 0' : props.size === Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0')};\n`;\n\nconst TextButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '8px 0 8px 16px' : props.size === Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px')};\n`;\n\nconst IconButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '8px 16px 8px 0' : props.size === Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0')};\n  display: flex;\n`;\n\nconst Wrapper = styled.div<{ position: Position; showOnClick: boolean; showPopover: boolean }>`\n  position: relative;\n\n  .pointer-space {\n    height: ${(props) => (props.position === Position.Top || props.position === Position.Bottom ? '16px' : '100%')};\n    width: ${(props) => (props.position === Position.Left || props.position === Position.Right ? '16px' : '100%')};\n    position: absolute;\n\n    ${(props) => (props.position === Position.Left ? 'right:100%; bottom: 0%' : '')};\n    ${(props) => (props.position === Position.Right ? 'left:100%; bottom: 0%' : '')};\n\n    ${(props) => (props.position === Position.Top ? 'bottom: 100%' : '')};\n    ${(props) => (props.position === Position.Bottom ? 'top: 100%' : '')};\n  }\n\n  ${(props) =>\n    props.showOnClick\n      ? `${Container} {\n        visibility: ${props.showPopover ? 'visible' : 'hidden'};\n        opacity: ${props.showPopover ? '1' : '0'};\n    }\n    cursor: pointer;`\n      : `&:hover {\n      ${Container} {\n        visibility: visible;\n        opacity: 1;\n      }\n    }`}\n`;\n\nconst renderMargins = (isNotePresent: boolean, size: Size): string => {\n  if (isNotePresent) {\n    return size === Size.Small ? '10px 16px' : size === Size.Large ? '14px 24px' : '12px 20px';\n  } else {\n    return size === Size.Small ? '18px 16px' : size === Size.Large ? '24px' : '20px';\n  }\n};\n\nconst renderArrowStyles = (position: Position) => {\n  if (position === Position.Bottom) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 16px solid transparent;\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid rgb(255,255,255);\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            bottom: calc(100% - 1px);`;\n  }\n\n  if (position === Position.Top) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 16px solid rgb(255,255,255);\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid transparent;\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            top: calc(100% - 1px);`;\n  }\n\n  if (position === Position.Left) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid transparent;\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid rgb(255,255,255);\n            content: \"\";\n            position: absolute;\n            left: calc(100% - 1px);\n            bottom: calc(50% - 12px);`;\n  }\n\n  if (position === Position.Right) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid rgb(255,255,255);\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(100% - 1px);\n            bottom: calc(50% - 12px);`;\n  }\n};\n\ntype topSectionProps = {\n  text: string;\n  note?: string;\n};\n\ntype actionButtonProps = {\n  icon: React.ReactNode;\n  action: () => void;\n  label?: string;\n};\n\ntype bottomSectionProps = {\n  iconButtons?: actionButtonProps[];\n  textButton?: actionButtonProps;\n};\n\ntype PopoverProps = {\n  size?: Size.Small | Size.Medium | Size.Large;\n  topSectionProps?: topSectionProps;\n  bottomSectionProps?: bottomSectionProps;\n  mainContent: React.ReactNode;\n  children: React.ReactNode;\n  position: Position.Top | Position.Bottom | Position.Right | Position.Left;\n  showOnClick: boolean;\n  showArrowPointer?: boolean;\n};\n\nconst Popover: React.FunctionComponent<PopoverProps> = ({\n  size = Size.Medium,\n  topSectionProps,\n  bottomSectionProps,\n  mainContent,\n  children,\n  position,\n  showOnClick = false,\n  showArrowPointer = false,\n}) => {\n  const [showPopover, setShowPopover] = React.useState(false);\n  const popoverRef = React.useRef<any>();\n\n  React.useEffect(() => {\n    const checkIfClickedOutside = (e: { target: any }) => {\n      if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {\n        setShowPopover(false);\n      }\n    };\n\n    document.addEventListener('mousedown', checkIfClickedOutside);\n\n    return () => {\n      document.removeEventListener('mousedown', checkIfClickedOutside);\n    };\n  }, [showPopover]);\n\n  return (\n    <Wrapper position={position} showOnClick={showOnClick} showPopover={showPopover}>\n      <Container size={size} position={position} ref={popoverRef} showArrowPointer={showArrowPointer}>\n        {!!topSectionProps && (\n          <TopContainer size={size}>\n            <TextContainer note={!!topSectionProps?.note} size={size}>\n              {topSectionProps?.note && <NoteContainer size={size}>{topSectionProps.note}</NoteContainer>}\n              <LabelContainer size={size}>{topSectionProps?.text}</LabelContainer>\n            </TextContainer>\n\n            {showOnClick && (\n              <CloseButtonContainer size={size} data-testid={'closeBtn'}>\n                <IconButton action={() => setShowPopover(false)} useTransparentBackground iconColor={COLORS.neutral_600} variant=\"secondary\" shape=\"circular\">\n                  <SystemIcons.Close />\n                </IconButton>\n              </CloseButtonContainer>\n            )}\n          </TopContainer>\n        )}\n\n        <MiddleContainer size={size}>{mainContent}</MiddleContainer>\n\n        {!!bottomSectionProps && (\n          <BottomContainer size={size}>\n            {!!bottomSectionProps?.textButton?.icon && (\n              <TextButtonContainer size={size} data-testid={'textBtn'}>\n                <Button size={size} variant=\"secondary\" icon={bottomSectionProps.textButton.icon} onClick={bottomSectionProps.textButton.action}>\n                  {bottomSectionProps.textButton.label}\n                </Button>\n              </TextButtonContainer>\n            )}\n\n            <div className=\"bottom-flex\" />\n\n            <IconButtonContainer size={size} data-testid={'iconBtn'}>\n              {bottomSectionProps?.iconButtons?.map((iconButton) => (\n                <IconButton action={iconButton.action} variant=\"secondary\" shape=\"circular\" useTransparentBackground>\n                  {iconButton.icon}\n                </IconButton>\n              ))}\n            </IconButtonContainer>\n          </BottomContainer>\n        )}\n      </Container>\n\n      <div onClick={() => showOnClick && setShowPopover(!showPopover)}>\n        {children}\n\n        <div className=\"pointer-space\" />\n      </div>\n    </Wrapper>\n  );\n};\n\nexport default Popover;\n"],"file":"Popover.cjs"}
+{"version":3,"file":"Popover.cjs","names":["Container","styled","div","props","size","Size","Small","Large","COLORS","white","BOXSHADOWS","BOXSHADOW_CENTERED","Z_INDEXES","popover","position","Position","Bottom","Top","Left","Right","showArrowPointer","renderArrowStyles","TopContainer","MiddleContainer","scrollBarStyling","BottomContainer","TextContainer","renderMargins","note","NoteContainer","ComponentXXSStyling","ComponentTextStyle","Regular","neutral_600","ComponentSStyling","ComponentXSStyling","LabelContainer","Bold","ComponentLStyling","ComponentMStyling","CloseButtonContainer","TextButtonContainer","IconButtonContainer","Wrapper","showOnClick","showPopover","isNotePresent","Popover","Medium","topSectionProps","bottomSectionProps","mainContent","children","React","useState","setShowPopover","popoverRef","useRef","useEffect","checkIfClickedOutside","e","current","contains","target","document","addEventListener","removeEventListener","text","textButton","icon","action","label","iconButtons","map","iconButton"],"sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\nimport { Button, IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';\nimport { Position, Size } from '../types';\n\nconst Container = styled.div<{ size: Size; position: Position; showArrowPointer: boolean }>`\n  //height: ${(props) => (props.size === Size.Small ? '240px' : props.size === Size.Large ? '480px' : '360px')};\n  min-width: ${(props) => (props.size === Size.Small ? '320px' : props.size === Size.Large ? '640px' : '480px')};\n  border-radius: 4px;\n  background: ${COLORS.white};\n  cursor: default;\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n\n  position: absolute;  \n  visibility: hidden;\n  opacity: 0;\n  z-index: ${Z_INDEXES.popover};\n\n  ${(props) => (props.position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '')}\n  ${(props) => (props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '')}\n\n  ${(props) => (props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '')}\n  ${(props) => (props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '')}\n\n  &::after {\n    ${(props) => (props.showArrowPointer ? renderArrowStyles(props.position) : '')}\n`;\n\nconst TopContainer = styled.div<{ size: Size }>`\n  height: ${(props) => (props.size === Size.Small ? '56px' : props.size === Size.Large ? '72px' : '64px')};\n  display: flex;\n`;\n\nconst MiddleContainer = styled.div<{ size: Size }>`\n  margin: 8px;\n  height: ${(props) => (props.size === Size.Small ? '104px' : props.size === Size.Large ? '304px' : '208px')};\n  padding: ${(props) => (props.size === Size.Small ? '0 8px' : props.size === Size.Large ? '0 16px' : '0 12px')};\n  overflow-y: auto;\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst BottomContainer = styled.div<{ size: Size }>`\n  height: ${(props) => (props.size === Size.Small ? '64px' : props.size === Size.Large ? '88px' : '72px')};  \n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n`;\n\nconst TextContainer = styled.div<{ note: boolean; size: Size }>`\n  display: flex;\n  flex-direction: column;\n  margin: ${(props) => renderMargins(props.note, props.size)};\n  flex-grow: 1;\n`;\n\nconst NoteContainer = styled.div<{ size: Size }>`\n  ${(props) =>\n    props.size === Size.Small\n      ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)\n      : props.size === Size.Large\n      ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)\n      : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst LabelContainer = styled.div<{ size: Size }>`\n  ${(props) =>\n    props.size === Size.Small\n      ? ComponentSStyling(ComponentTextStyle.Bold, null)\n      : props.size === Size.Large\n      ? ComponentLStyling(ComponentTextStyle.Bold, null)\n      : ComponentMStyling(ComponentTextStyle.Bold, null)}\n`;\n\nconst CloseButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '4px 16px 4px 0' : props.size === Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0')};\n`;\n\nconst TextButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '8px 0 8px 16px' : props.size === Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px')};\n`;\n\nconst IconButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '8px 16px 8px 0' : props.size === Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0')};\n  display: flex;\n`;\n\nconst Wrapper = styled.div<{ position: Position; showOnClick: boolean; showPopover: boolean }>`\n  position: relative;\n\n  .pointer-space {\n    height: ${(props) => (props.position === Position.Top || props.position === Position.Bottom ? '16px' : '100%')};\n    width: ${(props) => (props.position === Position.Left || props.position === Position.Right ? '16px' : '100%')};\n    position: absolute;\n\n    ${(props) => (props.position === Position.Left ? 'right:100%; bottom: 0%' : '')};\n    ${(props) => (props.position === Position.Right ? 'left:100%; bottom: 0%' : '')};\n\n    ${(props) => (props.position === Position.Top ? 'bottom: 100%' : '')};\n    ${(props) => (props.position === Position.Bottom ? 'top: 100%' : '')};\n  }\n\n  ${(props) =>\n    props.showOnClick\n      ? `${Container} {\n        visibility: ${props.showPopover ? 'visible' : 'hidden'};\n        opacity: ${props.showPopover ? '1' : '0'};\n    }\n    cursor: pointer;`\n      : `&:hover {\n      ${Container} {\n        visibility: visible;\n        opacity: 1;\n      }\n    }`}\n`;\n\nconst renderMargins = (isNotePresent: boolean, size: Size): string => {\n  if (isNotePresent) {\n    return size === Size.Small ? '10px 16px' : size === Size.Large ? '14px 24px' : '12px 20px';\n  } else {\n    return size === Size.Small ? '18px 16px' : size === Size.Large ? '24px' : '20px';\n  }\n};\n\nconst renderArrowStyles = (position: Position) => {\n  if (position === Position.Bottom) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 16px solid transparent;\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid rgb(255,255,255);\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            bottom: calc(100% - 1px);`;\n  }\n\n  if (position === Position.Top) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 16px solid rgb(255,255,255);\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid transparent;\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            top: calc(100% - 1px);`;\n  }\n\n  if (position === Position.Left) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid transparent;\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid rgb(255,255,255);\n            content: \"\";\n            position: absolute;\n            left: calc(100% - 1px);\n            bottom: calc(50% - 12px);`;\n  }\n\n  if (position === Position.Right) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid rgb(255,255,255);\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(100% - 1px);\n            bottom: calc(50% - 12px);`;\n  }\n};\n\ntype topSectionProps = {\n  text: string;\n  note?: string;\n};\n\ntype actionButtonProps = {\n  icon: React.ReactNode;\n  action: () => void;\n  label?: string;\n};\n\ntype bottomSectionProps = {\n  iconButtons?: actionButtonProps[];\n  textButton?: actionButtonProps;\n};\n\ntype PopoverProps = {\n  size?: Size.Small | Size.Medium | Size.Large;\n  topSectionProps?: topSectionProps;\n  bottomSectionProps?: bottomSectionProps;\n  mainContent: React.ReactNode;\n  children: React.ReactNode;\n  position: Position.Top | Position.Bottom | Position.Right | Position.Left;\n  showOnClick: boolean;\n  showArrowPointer?: boolean;\n};\n\nconst Popover: React.FunctionComponent<PopoverProps> = ({\n  size = Size.Medium,\n  topSectionProps,\n  bottomSectionProps,\n  mainContent,\n  children,\n  position,\n  showOnClick = false,\n  showArrowPointer = false,\n}) => {\n  const [showPopover, setShowPopover] = React.useState(false);\n  const popoverRef = React.useRef<any>();\n\n  React.useEffect(() => {\n    const checkIfClickedOutside = (e: { target: any }) => {\n      if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {\n        setShowPopover(false);\n      }\n    };\n\n    document.addEventListener('mousedown', checkIfClickedOutside);\n\n    return () => {\n      document.removeEventListener('mousedown', checkIfClickedOutside);\n    };\n  }, [showPopover]);\n\n  return (\n    <Wrapper position={position} showOnClick={showOnClick} showPopover={showPopover}>\n      <Container size={size} position={position} ref={popoverRef} showArrowPointer={showArrowPointer}>\n        {!!topSectionProps && (\n          <TopContainer size={size}>\n            <TextContainer note={!!topSectionProps?.note} size={size}>\n              {topSectionProps?.note && <NoteContainer size={size}>{topSectionProps.note}</NoteContainer>}\n              <LabelContainer size={size}>{topSectionProps?.text}</LabelContainer>\n            </TextContainer>\n\n            {showOnClick && (\n              <CloseButtonContainer size={size} data-testid={'closeBtn'}>\n                <IconButton action={() => setShowPopover(false)} useTransparentBackground iconColor={COLORS.neutral_600} variant=\"secondary\" shape=\"circular\">\n                  <SystemIcons.Close />\n                </IconButton>\n              </CloseButtonContainer>\n            )}\n          </TopContainer>\n        )}\n\n        <MiddleContainer size={size}>{mainContent}</MiddleContainer>\n\n        {!!bottomSectionProps && (\n          <BottomContainer size={size}>\n            {!!bottomSectionProps?.textButton?.icon && (\n              <TextButtonContainer size={size} data-testid={'textBtn'}>\n                <Button size={size} variant=\"secondary\" icon={bottomSectionProps.textButton.icon} onClick={bottomSectionProps.textButton.action}>\n                  {bottomSectionProps.textButton.label}\n                </Button>\n              </TextButtonContainer>\n            )}\n\n            <div className=\"bottom-flex\" />\n\n            <IconButtonContainer size={size} data-testid={'iconBtn'}>\n              {bottomSectionProps?.iconButtons?.map((iconButton) => (\n                <IconButton action={iconButton.action} variant=\"secondary\" shape=\"circular\" useTransparentBackground>\n                  {iconButton.icon}\n                </IconButton>\n              ))}\n            </IconButtonContainer>\n          </BottomContainer>\n        )}\n      </Container>\n\n      <div onClick={() => showOnClick && setShowPopover(!showPopover)}>\n        {children}\n\n        <div className=\"pointer-space\" />\n      </div>\n    </Wrapper>\n  );\n};\n\nexport default Popover;\n"],"mappings":"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"}

package/dist/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Popover/Popover.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Button","IconButton","SystemIcons","BOXSHADOWS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","scrollBarStyling","Z_INDEXES","Position","Size","Container","div","props","size","Small","Large","white","BOXSHADOW_CENTERED","popover","position","Bottom","Top","Left","Right","showArrowPointer","renderArrowStyles","TopContainer","MiddleContainer","BottomContainer","TextContainer","renderMargins","note","NoteContainer","Regular","neutral_600","LabelContainer","Bold","CloseButtonContainer","TextButtonContainer","IconButtonContainer","Wrapper","showOnClick","showPopover","isNotePresent","Popover","Medium","topSectionProps","bottomSectionProps","mainContent","children","useState","setShowPopover","popoverRef","useRef","useEffect","checkIfClickedOutside","e","current","contains","target","document","addEventListener","removeEventListener","text","textButton","icon","action","label","iconButtons","map","iconButton"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\nimport { Button, IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';\nimport { Position, Size } from '../types';\n\nconst Container = styled.div<{ size: Size; position: Position; showArrowPointer: boolean }>`\n  //height: ${(props) => (props.size === Size.Small ? '240px' : props.size === Size.Large ? '480px' : '360px')};\n  min-width: ${(props) => (props.size === Size.Small ? '320px' : props.size === Size.Large ? '640px' : '480px')};\n  border-radius: 4px;\n  background: ${COLORS.white};\n  cursor: default;\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n\n  position: absolute;  \n  visibility: hidden;\n  opacity: 0;\n  z-index: ${Z_INDEXES.popover};\n\n  ${(props) => (props.position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '')}\n  ${(props) => (props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '')}\n\n  ${(props) => (props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '')}\n  ${(props) => (props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '')}\n\n  &::after {\n    ${(props) => (props.showArrowPointer ? renderArrowStyles(props.position) : '')}\n`;\n\nconst TopContainer = styled.div<{ size: Size }>`\n  height: ${(props) => (props.size === Size.Small ? '56px' : props.size === Size.Large ? '72px' : '64px')};\n  display: flex;\n`;\n\nconst MiddleContainer = styled.div<{ size: Size }>`\n  margin: 8px;\n  height: ${(props) => (props.size === Size.Small ? '104px' : props.size === Size.Large ? '304px' : '208px')};\n  padding: ${(props) => (props.size === Size.Small ? '0 8px' : props.size === Size.Large ? '0 16px' : '0 12px')};\n  overflow-y: auto;\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst BottomContainer = styled.div<{ size: Size }>`\n  height: ${(props) => (props.size === Size.Small ? '64px' : props.size === Size.Large ? '88px' : '72px')};  \n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n`;\n\nconst TextContainer = styled.div<{ note: boolean; size: Size }>`\n  display: flex;\n  flex-direction: column;\n  margin: ${(props) => renderMargins(props.note, props.size)};\n  flex-grow: 1;\n`;\n\nconst NoteContainer = styled.div<{ size: Size }>`\n  ${(props) =>\n    props.size === Size.Small\n      ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)\n      : props.size === Size.Large\n      ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)\n      : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst LabelContainer = styled.div<{ size: Size }>`\n  ${(props) =>\n    props.size === Size.Small\n      ? ComponentSStyling(ComponentTextStyle.Bold, null)\n      : props.size === Size.Large\n      ? ComponentLStyling(ComponentTextStyle.Bold, null)\n      : ComponentMStyling(ComponentTextStyle.Bold, null)}\n`;\n\nconst CloseButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '4px 16px 4px 0' : props.size === Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0')};\n`;\n\nconst TextButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '8px 0 8px 16px' : props.size === Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px')};\n`;\n\nconst IconButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '8px 16px 8px 0' : props.size === Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0')};\n  display: flex;\n`;\n\nconst Wrapper = styled.div<{ position: Position; showOnClick: boolean; showPopover: boolean }>`\n  position: relative;\n\n  .pointer-space {\n    height: ${(props) => (props.position === Position.Top || props.position === Position.Bottom ? '16px' : '100%')};\n    width: ${(props) => (props.position === Position.Left || props.position === Position.Right ? '16px' : '100%')};\n    position: absolute;\n\n    ${(props) => (props.position === Position.Left ? 'right:100%; bottom: 0%' : '')};\n    ${(props) => (props.position === Position.Right ? 'left:100%; bottom: 0%' : '')};\n\n    ${(props) => (props.position === Position.Top ? 'bottom: 100%' : '')};\n    ${(props) => (props.position === Position.Bottom ? 'top: 100%' : '')};\n  }\n\n  ${(props) =>\n    props.showOnClick\n      ? `${Container} {\n        visibility: ${props.showPopover ? 'visible' : 'hidden'};\n        opacity: ${props.showPopover ? '1' : '0'};\n    }\n    cursor: pointer;`\n      : `&:hover {\n      ${Container} {\n        visibility: visible;\n        opacity: 1;\n      }\n    }`}\n`;\n\nconst renderMargins = (isNotePresent: boolean, size: Size): string => {\n  if (isNotePresent) {\n    return size === Size.Small ? '10px 16px' : size === Size.Large ? '14px 24px' : '12px 20px';\n  } else {\n    return size === Size.Small ? '18px 16px' : size === Size.Large ? '24px' : '20px';\n  }\n};\n\nconst renderArrowStyles = (position: Position) => {\n  if (position === Position.Bottom) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 16px solid transparent;\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid rgb(255,255,255);\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            bottom: calc(100% - 1px);`;\n  }\n\n  if (position === Position.Top) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 16px solid rgb(255,255,255);\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid transparent;\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            top: calc(100% - 1px);`;\n  }\n\n  if (position === Position.Left) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid transparent;\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid rgb(255,255,255);\n            content: \"\";\n            position: absolute;\n            left: calc(100% - 1px);\n            bottom: calc(50% - 12px);`;\n  }\n\n  if (position === Position.Right) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid rgb(255,255,255);\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(100% - 1px);\n            bottom: calc(50% - 12px);`;\n  }\n};\n\ntype topSectionProps = {\n  text: string;\n  note?: string;\n};\n\ntype actionButtonProps = {\n  icon: React.ReactNode;\n  action: () => void;\n  label?: string;\n};\n\ntype bottomSectionProps = {\n  iconButtons?: actionButtonProps[];\n  textButton?: actionButtonProps;\n};\n\ntype PopoverProps = {\n  size?: Size.Small | Size.Medium | Size.Large;\n  topSectionProps?: topSectionProps;\n  bottomSectionProps?: bottomSectionProps;\n  mainContent: React.ReactNode;\n  children: React.ReactNode;\n  position: Position.Top | Position.Bottom | Position.Right | Position.Left;\n  showOnClick: boolean;\n  showArrowPointer?: boolean;\n};\n\nconst Popover: React.FunctionComponent<PopoverProps> = ({\n  size = Size.Medium,\n  topSectionProps,\n  bottomSectionProps,\n  mainContent,\n  children,\n  position,\n  showOnClick = false,\n  showArrowPointer = false,\n}) => {\n  const [showPopover, setShowPopover] = React.useState(false);\n  const popoverRef = React.useRef<any>();\n\n  React.useEffect(() => {\n    const checkIfClickedOutside = (e: { target: any }) => {\n      if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {\n        setShowPopover(false);\n      }\n    };\n\n    document.addEventListener('mousedown', checkIfClickedOutside);\n\n    return () => {\n      document.removeEventListener('mousedown', checkIfClickedOutside);\n    };\n  }, [showPopover]);\n\n  return (\n    <Wrapper position={position} showOnClick={showOnClick} showPopover={showPopover}>\n      <Container size={size} position={position} ref={popoverRef} showArrowPointer={showArrowPointer}>\n        {!!topSectionProps && (\n          <TopContainer size={size}>\n            <TextContainer note={!!topSectionProps?.note} size={size}>\n              {topSectionProps?.note && <NoteContainer size={size}>{topSectionProps.note}</NoteContainer>}\n              <LabelContainer size={size}>{topSectionProps?.text}</LabelContainer>\n            </TextContainer>\n\n            {showOnClick && (\n              <CloseButtonContainer size={size} data-testid={'closeBtn'}>\n                <IconButton action={() => setShowPopover(false)} useTransparentBackground iconColor={COLORS.neutral_600} variant=\"secondary\" shape=\"circular\">\n                  <SystemIcons.Close />\n                </IconButton>\n              </CloseButtonContainer>\n            )}\n          </TopContainer>\n        )}\n\n        <MiddleContainer size={size}>{mainContent}</MiddleContainer>\n\n        {!!bottomSectionProps && (\n          <BottomContainer size={size}>\n            {!!bottomSectionProps?.textButton?.icon && (\n              <TextButtonContainer size={size} data-testid={'textBtn'}>\n                <Button size={size} variant=\"secondary\" icon={bottomSectionProps.textButton.icon} onClick={bottomSectionProps.textButton.action}>\n                  {bottomSectionProps.textButton.label}\n                </Button>\n              </TextButtonContainer>\n            )}\n\n            <div className=\"bottom-flex\" />\n\n            <IconButtonContainer size={size} data-testid={'iconBtn'}>\n              {bottomSectionProps?.iconButtons?.map((iconButton) => (\n                <IconButton action={iconButton.action} variant=\"secondary\" shape=\"circular\" useTransparentBackground>\n                  {iconButton.icon}\n                </IconButton>\n              ))}\n            </IconButtonContainer>\n          </BottomContainer>\n        )}\n      </Container>\n\n      <div onClick={() => showOnClick && setShowPopover(!showPopover)}>\n        {children}\n\n        <div className=\"pointer-space\" />\n      </div>\n    </Wrapper>\n  );\n};\n\nexport default Popover;\n"],"file":"Popover.js"}
+{"version":3,"file":"Popover.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Button","IconButton","SystemIcons","BOXSHADOWS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","scrollBarStyling","Z_INDEXES","Position","Size","Container","div","props","size","Small","Large","white","BOXSHADOW_CENTERED","popover","position","Bottom","Top","Left","Right","showArrowPointer","renderArrowStyles","TopContainer","MiddleContainer","BottomContainer","TextContainer","renderMargins","note","NoteContainer","Regular","neutral_600","LabelContainer","Bold","CloseButtonContainer","TextButtonContainer","IconButtonContainer","Wrapper","showOnClick","showPopover","isNotePresent","Popover","Medium","topSectionProps","bottomSectionProps","mainContent","children","useState","setShowPopover","popoverRef","useRef","useEffect","checkIfClickedOutside","e","current","contains","target","document","addEventListener","removeEventListener","text","textButton","icon","action","label","iconButtons","map","iconButton"],"sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\nimport { Button, IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';\nimport { Position, Size } from '../types';\n\nconst Container = styled.div<{ size: Size; position: Position; showArrowPointer: boolean }>`\n  //height: ${(props) => (props.size === Size.Small ? '240px' : props.size === Size.Large ? '480px' : '360px')};\n  min-width: ${(props) => (props.size === Size.Small ? '320px' : props.size === Size.Large ? '640px' : '480px')};\n  border-radius: 4px;\n  background: ${COLORS.white};\n  cursor: default;\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n\n  position: absolute;  \n  visibility: hidden;\n  opacity: 0;\n  z-index: ${Z_INDEXES.popover};\n\n  ${(props) => (props.position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '')}\n  ${(props) => (props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '')}\n\n  ${(props) => (props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '')}\n  ${(props) => (props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '')}\n\n  &::after {\n    ${(props) => (props.showArrowPointer ? renderArrowStyles(props.position) : '')}\n`;\n\nconst TopContainer = styled.div<{ size: Size }>`\n  height: ${(props) => (props.size === Size.Small ? '56px' : props.size === Size.Large ? '72px' : '64px')};\n  display: flex;\n`;\n\nconst MiddleContainer = styled.div<{ size: Size }>`\n  margin: 8px;\n  height: ${(props) => (props.size === Size.Small ? '104px' : props.size === Size.Large ? '304px' : '208px')};\n  padding: ${(props) => (props.size === Size.Small ? '0 8px' : props.size === Size.Large ? '0 16px' : '0 12px')};\n  overflow-y: auto;\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst BottomContainer = styled.div<{ size: Size }>`\n  height: ${(props) => (props.size === Size.Small ? '64px' : props.size === Size.Large ? '88px' : '72px')};  \n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n`;\n\nconst TextContainer = styled.div<{ note: boolean; size: Size }>`\n  display: flex;\n  flex-direction: column;\n  margin: ${(props) => renderMargins(props.note, props.size)};\n  flex-grow: 1;\n`;\n\nconst NoteContainer = styled.div<{ size: Size }>`\n  ${(props) =>\n    props.size === Size.Small\n      ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)\n      : props.size === Size.Large\n      ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)\n      : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst LabelContainer = styled.div<{ size: Size }>`\n  ${(props) =>\n    props.size === Size.Small\n      ? ComponentSStyling(ComponentTextStyle.Bold, null)\n      : props.size === Size.Large\n      ? ComponentLStyling(ComponentTextStyle.Bold, null)\n      : ComponentMStyling(ComponentTextStyle.Bold, null)}\n`;\n\nconst CloseButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '4px 16px 4px 0' : props.size === Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0')};\n`;\n\nconst TextButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '8px 0 8px 16px' : props.size === Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px')};\n`;\n\nconst IconButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '8px 16px 8px 0' : props.size === Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0')};\n  display: flex;\n`;\n\nconst Wrapper = styled.div<{ position: Position; showOnClick: boolean; showPopover: boolean }>`\n  position: relative;\n\n  .pointer-space {\n    height: ${(props) => (props.position === Position.Top || props.position === Position.Bottom ? '16px' : '100%')};\n    width: ${(props) => (props.position === Position.Left || props.position === Position.Right ? '16px' : '100%')};\n    position: absolute;\n\n    ${(props) => (props.position === Position.Left ? 'right:100%; bottom: 0%' : '')};\n    ${(props) => (props.position === Position.Right ? 'left:100%; bottom: 0%' : '')};\n\n    ${(props) => (props.position === Position.Top ? 'bottom: 100%' : '')};\n    ${(props) => (props.position === Position.Bottom ? 'top: 100%' : '')};\n  }\n\n  ${(props) =>\n    props.showOnClick\n      ? `${Container} {\n        visibility: ${props.showPopover ? 'visible' : 'hidden'};\n        opacity: ${props.showPopover ? '1' : '0'};\n    }\n    cursor: pointer;`\n      : `&:hover {\n      ${Container} {\n        visibility: visible;\n        opacity: 1;\n      }\n    }`}\n`;\n\nconst renderMargins = (isNotePresent: boolean, size: Size): string => {\n  if (isNotePresent) {\n    return size === Size.Small ? '10px 16px' : size === Size.Large ? '14px 24px' : '12px 20px';\n  } else {\n    return size === Size.Small ? '18px 16px' : size === Size.Large ? '24px' : '20px';\n  }\n};\n\nconst renderArrowStyles = (position: Position) => {\n  if (position === Position.Bottom) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 16px solid transparent;\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid rgb(255,255,255);\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            bottom: calc(100% - 1px);`;\n  }\n\n  if (position === Position.Top) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 16px solid rgb(255,255,255);\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid transparent;\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            top: calc(100% - 1px);`;\n  }\n\n  if (position === Position.Left) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid transparent;\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid rgb(255,255,255);\n            content: \"\";\n            position: absolute;\n            left: calc(100% - 1px);\n            bottom: calc(50% - 12px);`;\n  }\n\n  if (position === Position.Right) {\n    return `height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid rgb(255,255,255);\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(100% - 1px);\n            bottom: calc(50% - 12px);`;\n  }\n};\n\ntype topSectionProps = {\n  text: string;\n  note?: string;\n};\n\ntype actionButtonProps = {\n  icon: React.ReactNode;\n  action: () => void;\n  label?: string;\n};\n\ntype bottomSectionProps = {\n  iconButtons?: actionButtonProps[];\n  textButton?: actionButtonProps;\n};\n\ntype PopoverProps = {\n  size?: Size.Small | Size.Medium | Size.Large;\n  topSectionProps?: topSectionProps;\n  bottomSectionProps?: bottomSectionProps;\n  mainContent: React.ReactNode;\n  children: React.ReactNode;\n  position: Position.Top | Position.Bottom | Position.Right | Position.Left;\n  showOnClick: boolean;\n  showArrowPointer?: boolean;\n};\n\nconst Popover: React.FunctionComponent<PopoverProps> = ({\n  size = Size.Medium,\n  topSectionProps,\n  bottomSectionProps,\n  mainContent,\n  children,\n  position,\n  showOnClick = false,\n  showArrowPointer = false,\n}) => {\n  const [showPopover, setShowPopover] = React.useState(false);\n  const popoverRef = React.useRef<any>();\n\n  React.useEffect(() => {\n    const checkIfClickedOutside = (e: { target: any }) => {\n      if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {\n        setShowPopover(false);\n      }\n    };\n\n    document.addEventListener('mousedown', checkIfClickedOutside);\n\n    return () => {\n      document.removeEventListener('mousedown', checkIfClickedOutside);\n    };\n  }, [showPopover]);\n\n  return (\n    <Wrapper position={position} showOnClick={showOnClick} showPopover={showPopover}>\n      <Container size={size} position={position} ref={popoverRef} showArrowPointer={showArrowPointer}>\n        {!!topSectionProps && (\n          <TopContainer size={size}>\n            <TextContainer note={!!topSectionProps?.note} size={size}>\n              {topSectionProps?.note && <NoteContainer size={size}>{topSectionProps.note}</NoteContainer>}\n              <LabelContainer size={size}>{topSectionProps?.text}</LabelContainer>\n            </TextContainer>\n\n            {showOnClick && (\n              <CloseButtonContainer size={size} data-testid={'closeBtn'}>\n                <IconButton action={() => setShowPopover(false)} useTransparentBackground iconColor={COLORS.neutral_600} variant=\"secondary\" shape=\"circular\">\n                  <SystemIcons.Close />\n                </IconButton>\n              </CloseButtonContainer>\n            )}\n          </TopContainer>\n        )}\n\n        <MiddleContainer size={size}>{mainContent}</MiddleContainer>\n\n        {!!bottomSectionProps && (\n          <BottomContainer size={size}>\n            {!!bottomSectionProps?.textButton?.icon && (\n              <TextButtonContainer size={size} data-testid={'textBtn'}>\n                <Button size={size} variant=\"secondary\" icon={bottomSectionProps.textButton.icon} onClick={bottomSectionProps.textButton.action}>\n                  {bottomSectionProps.textButton.label}\n                </Button>\n              </TextButtonContainer>\n            )}\n\n            <div className=\"bottom-flex\" />\n\n            <IconButtonContainer size={size} data-testid={'iconBtn'}>\n              {bottomSectionProps?.iconButtons?.map((iconButton) => (\n                <IconButton action={iconButton.action} variant=\"secondary\" shape=\"circular\" useTransparentBackground>\n                  {iconButton.icon}\n                </IconButton>\n              ))}\n            </IconButtonContainer>\n          </BottomContainer>\n        )}\n      </Container>\n\n      <div onClick={() => showOnClick && setShowPopover(!showPopover)}>\n        {children}\n\n        <div className=\"pointer-space\" />\n      </div>\n    </Wrapper>\n  );\n};\n\nexport default Popover;\n"],"mappings":"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"}

package/dist/Popover/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Popover/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as Popover } from './Popover';"],"file":"index.cjs"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Popover/index.ts"],"sourcesContent":["export { default as Popover } from './Popover';"],"mappings":";;;;;;;;;;;;;;AAAA"}

package/dist/Popover/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Popover/index.ts"],"names":["default","Popover"],"mappings":"AAAA,SAASA,OAAO,IAAIC,OAApB,QAAmC,WAAnC","sourcesContent":["export { default as Popover } from './Popover';"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["default","Popover"],"sources":["../../src/Popover/index.ts"],"sourcesContent":["export { default as Popover } from './Popover';"],"mappings":"AAAA,SAASA,OAAO,IAAIC,OAApB,QAAmC,WAAnC"}

package/dist/ProfileButton/ProfileButton.cjs

@@ -39,9 +39,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function 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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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) { (0, _defineProperty2.default)(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; }
 
 var PortraitOverlay = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ", ";\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n"])), _.COLORS.black);
 

package/dist/ProfileButton/ProfileButton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ProfileButton/ProfileButton.tsx"],"names":["PortraitOverlay","styled","div","COLORS","black","ProfileButtonContainer","StyledPrimaryIconButton","props","hideOnLowWidth","BREAKPOINTS","MEDIUM","IconButtonContent","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","React","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","renderIcon","ComponentTextStyle","Bold","white","Size","Medium"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAWA,IAAMA,eAAe,GAAGC,0BAAOC,GAAV,0OAICC,SAAOC,KAJR,CAArB;;AAWO,IAAMC,sBAAsB,GAAGJ,0BAAOC,GAAV,8vBAM/BI,mCAN+B,EAOpB,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,QAArC;AAAA,CAPe,EAS7BC,oBAAYC,MATiB,EAkB3BC,6BAlB2B,EAmBPR,SAAOS,WAnBA,EAsBjBT,SAAOU,WAtBU,EA6B3Bb,eA7B2B,EAqC3BA,eArC2B,CAA5B;;;;AA6CP,IAAMc,qBAAqB,GAAGb,0BAAOC,GAAV,8IAA3B;;AAMA,IAAMa,YAAY,GAAGd,0BAAOC,GAAV,qPAAlB;;AAaA,IAAMc,aAAa,gBAAGC,KAAK,CAACC,UAAN,CAAwD,gBAWIC,GAXJ,EAWY;AAAA,MAVTC,WAUS,QAVTA,WAUS;AAAA,MATTC,IASS,QATTA,IASS;AAAA,MARTC,QAQS,QARTA,QAQS;AAAA,MAPTC,OAOS,QAPTA,OAOS;AAAA,MANTf,cAMS,QANTA,cAMS;AAAA,MALTgB,QAKS,QALTA,QAKS;AAAA,MAJTC,mBAIS,QAJTA,mBAIS;AAAA,MAHTC,SAGS,QAHTA,SAGS;AAAA,MAFTC,QAES,QAFTA,QAES;AAAA,MADNC,IACM;;AACxF,MAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,WACGT,WAAW,iBACV,sBAAC,YAAD;AAAA,8BACE;AAAK,QAAA,GAAG,EAAEA;AAAV,QADF,eAEE,qBAAC,eAAD,KAFF;AAAA,MADF,IAMCE,QAAQ,iBACP,qBAAC,kBAAD;AAAY,MAAA,SAAS,EAAC,UAAtB;AAAiC,MAAA,SAAS,EAAEQ,2BAAmBC,IAA/D;AACY,MAAA,KAAK,EAAEP,QAAQ,GAAGrB,SAAOU,WAAV,GAAwBV,SAAO6B,KAD1D;AAAA,gBAEGV;AAFH,MAPF,iBAWM;AAAA,gBAAGD;AAAH,MAZR;AAcD,GAfD;;AAiBA,sBACE,qBAAC,sBAAD;AAAwB,IAAA,cAAc,EAAEb,cAAxC;AAAA,2BACE,sBAAC,YAAD;AAAY,MAAA,GAAG,EAAEW,GAAjB;AACY,MAAA,SAAS,EAAEO,SADvB;AAEY,MAAA,QAAQ,EAAEF,QAFtB;AAGY,MAAA,MAAM,EAAED,OAHpB;AAIY,MAAA,OAAO,EAAC,SAJpB;AAKY,MAAA,QAAQ,EAAEI,QALtB;AAMY,MAAA,KAAK,EAAC,UANlB;AAOY,MAAA,cAAc,EAAEnB;AAP5B,OAQgBoB,IARhB;AAAA,iBASGC,UAAU,EATb,EAUGJ,mBAAmB,iBAClB,qBAAC,qBAAD;AAAA,+BACE,qBAAC,gCAAD;AAAiB,UAAA,IAAI,EAAEQ,OAAKC,MAA5B;AAAoC,UAAA,OAAO,EAAET;AAA7C;AADF,QAXJ;AAAA;AADF,IADF;AAoBD,CAjDqB,CAAtB;;AAnFEL,EAAAA,W;AACAC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,O;AACAE,EAAAA,mB,4BAAsB,U,EAAa,U;AACnCjB,EAAAA,c;;eAiIaQ,a","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContent, StyledPrimaryIconButton} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\n\nexport type ProfileButtonProps = {\n  portraitSrc?: string;\n  icon?: React.ReactNode;\n  initials?: string;\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  notificationVariant?: 'positive' | 'critical';\n  hideOnLowWidth?: boolean;\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\n\nconst PortraitOverlay = styled.div`\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ${COLORS.black};\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n`;\n\nexport const ProfileButtonContainer = styled.div<{ hideOnLowWidth?: boolean }>`\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ${StyledPrimaryIconButton} {\n    display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\n\n    ${BREAKPOINTS.MEDIUM} {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ${IconButtonContent} {\n        background-color: ${COLORS.neutral_100};\n\n        svg, svg path {\n          fill: ${COLORS.neutral_300};\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ${PortraitOverlay} {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ${PortraitOverlay} {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n`;\n\nconst NotificationContainer = styled.div`\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n                                                                                 portraitSrc,\n                                                                                 icon,\n                                                                                 initials,\n                                                                                 onClick,\n                                                                                 hideOnLowWidth,\n                                                                                 disabled,\n                                                                                 notificationVariant,\n                                                                                 className,\n                                                                                 tabIndex,\n                                                                                 ...rest\n                                                                               }, ref) => {\n  const renderIcon = () => {\n    return (\n      (portraitSrc && (\n        <ImageWrapper>\n          <img src={portraitSrc}/>\n          <PortraitOverlay/>\n        </ImageWrapper>\n      )) ||\n      (initials && (\n        <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\n                    color={disabled ? COLORS.neutral_300 : COLORS.white}>\n          {initials}\n        </ComponentS>\n      )) || <>{icon}</>\n    );\n  };\n\n  return (\n    <ProfileButtonContainer hideOnLowWidth={hideOnLowWidth}>\n      <IconButton ref={ref}\n                  className={className}\n                  disabled={disabled}\n                  action={onClick}\n                  variant=\"primary\"\n                  tabIndex={tabIndex}\n                  shape=\"circular\"\n                  hideOnLowWidth={hideOnLowWidth}\n                  {...rest}>\n        {renderIcon()}\n        {notificationVariant && (\n          <NotificationContainer>\n            <NotificationDot size={Size.Medium} variant={notificationVariant}/>\n          </NotificationContainer>\n        )}\n      </IconButton>\n    </ProfileButtonContainer>\n  );\n});\n\nexport default ProfileButton;\n"],"file":"ProfileButton.cjs"}
+{"version":3,"file":"ProfileButton.cjs","names":["PortraitOverlay","styled","div","COLORS","black","ProfileButtonContainer","StyledPrimaryIconButton","props","hideOnLowWidth","BREAKPOINTS","MEDIUM","IconButtonContent","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","React","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","renderIcon","ComponentTextStyle","Bold","white","Size","Medium"],"sources":["../../src/ProfileButton/ProfileButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContent, StyledPrimaryIconButton} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\n\nexport type ProfileButtonProps = {\n  portraitSrc?: string;\n  icon?: React.ReactNode;\n  initials?: string;\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  notificationVariant?: 'positive' | 'critical';\n  hideOnLowWidth?: boolean;\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\n\nconst PortraitOverlay = styled.div`\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ${COLORS.black};\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n`;\n\nexport const ProfileButtonContainer = styled.div<{ hideOnLowWidth?: boolean }>`\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ${StyledPrimaryIconButton} {\n    display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\n\n    ${BREAKPOINTS.MEDIUM} {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ${IconButtonContent} {\n        background-color: ${COLORS.neutral_100};\n\n        svg, svg path {\n          fill: ${COLORS.neutral_300};\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ${PortraitOverlay} {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ${PortraitOverlay} {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n`;\n\nconst NotificationContainer = styled.div`\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n                                                                                 portraitSrc,\n                                                                                 icon,\n                                                                                 initials,\n                                                                                 onClick,\n                                                                                 hideOnLowWidth,\n                                                                                 disabled,\n                                                                                 notificationVariant,\n                                                                                 className,\n                                                                                 tabIndex,\n                                                                                 ...rest\n                                                                               }, ref) => {\n  const renderIcon = () => {\n    return (\n      (portraitSrc && (\n        <ImageWrapper>\n          <img src={portraitSrc}/>\n          <PortraitOverlay/>\n        </ImageWrapper>\n      )) ||\n      (initials && (\n        <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\n                    color={disabled ? COLORS.neutral_300 : COLORS.white}>\n          {initials}\n        </ComponentS>\n      )) || <>{icon}</>\n    );\n  };\n\n  return (\n    <ProfileButtonContainer hideOnLowWidth={hideOnLowWidth}>\n      <IconButton ref={ref}\n                  className={className}\n                  disabled={disabled}\n                  action={onClick}\n                  variant=\"primary\"\n                  tabIndex={tabIndex}\n                  shape=\"circular\"\n                  hideOnLowWidth={hideOnLowWidth}\n                  {...rest}>\n        {renderIcon()}\n        {notificationVariant && (\n          <NotificationContainer>\n            <NotificationDot size={Size.Medium} variant={notificationVariant}/>\n          </NotificationContainer>\n        )}\n      </IconButton>\n    </ProfileButtonContainer>\n  );\n});\n\nexport default ProfileButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAWA,IAAMA,eAAe,GAAGC,yBAAA,CAAOC,GAAV,0OAICC,QAAA,CAAOC,KAJR,CAArB;;AAWO,IAAMC,sBAAsB,GAAGJ,yBAAA,CAAOC,GAAV,8vBAM/BI,mCAN+B,EAOpB,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,QAArC;AAAA,CAPe,EAS7BC,mBAAA,CAAYC,MATiB,EAkB3BC,6BAlB2B,EAmBPR,QAAA,CAAOS,WAnBA,EAsBjBT,QAAA,CAAOU,WAtBU,EA6B3Bb,eA7B2B,EAqC3BA,eArC2B,CAA5B;;;;AA6CP,IAAMc,qBAAqB,GAAGb,yBAAA,CAAOC,GAAV,8IAA3B;;AAMA,IAAMa,YAAY,GAAGd,yBAAA,CAAOC,GAAV,qPAAlB;;AAaA,IAAMc,aAAa,gBAAGC,KAAK,CAACC,UAAN,CAAwD,gBAWIC,GAXJ,EAWY;EAAA,IAVTC,WAUS,QAVTA,WAUS;EAAA,IATTC,IASS,QATTA,IASS;EAAA,IARTC,QAQS,QARTA,QAQS;EAAA,IAPTC,OAOS,QAPTA,OAOS;EAAA,IANTf,cAMS,QANTA,cAMS;EAAA,IALTgB,QAKS,QALTA,QAKS;EAAA,IAJTC,mBAIS,QAJTA,mBAIS;EAAA,IAHTC,SAGS,QAHTA,SAGS;EAAA,IAFTC,QAES,QAFTA,QAES;EAAA,IADNC,IACM;;EACxF,IAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;IACvB,OACGT,WAAW,iBACV,sBAAC,YAAD;MAAA,wBACE;QAAK,GAAG,EAAEA;MAAV,EADF,eAEE,qBAAC,eAAD,KAFF;IAAA,EADF,IAMCE,QAAQ,iBACP,qBAAC,kBAAD;MAAY,SAAS,EAAC,UAAtB;MAAiC,SAAS,EAAEQ,0BAAA,CAAmBC,IAA/D;MACY,KAAK,EAAEP,QAAQ,GAAGrB,QAAA,CAAOU,WAAV,GAAwBV,QAAA,CAAO6B,KAD1D;MAAA,UAEGV;IAFH,EAPF,iBAWM;MAAA,UAAGD;IAAH,EAZR;EAcD,CAfD;;EAiBA,oBACE,qBAAC,sBAAD;IAAwB,cAAc,EAAEb,cAAxC;IAAA,uBACE,sBAAC,YAAD;MAAY,GAAG,EAAEW,GAAjB;MACY,SAAS,EAAEO,SADvB;MAEY,QAAQ,EAAEF,QAFtB;MAGY,MAAM,EAAED,OAHpB;MAIY,OAAO,EAAC,SAJpB;MAKY,QAAQ,EAAEI,QALtB;MAMY,KAAK,EAAC,UANlB;MAOY,cAAc,EAAEnB;IAP5B,GAQgBoB,IARhB;MAAA,WASGC,UAAU,EATb,EAUGJ,mBAAmB,iBAClB,qBAAC,qBAAD;QAAA,uBACE,qBAAC,gCAAD;UAAiB,IAAI,EAAEQ,MAAA,CAAKC,MAA5B;UAAoC,OAAO,EAAET;QAA7C;MADF,EAXJ;IAAA;EADF,EADF;AAoBD,CAjDqB,CAAtB;;EAnFEL,W;EACAC,I;EACAC,Q;EACAC,O;EACAE,mB,4BAAsB,U,EAAa,U;EACnCjB,c;;eAiIaQ,a"}

package/dist/ProfileButton/ProfileButton.d.ts

@@ -14,7 +14,7 @@ declare const ProfileButton: React.ForwardRefExoticComponent<{
     portraitSrc?: string | undefined;
     icon?: React.ReactNode;
     initials?: string | undefined;
-    onClick: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void;
+    onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
     notificationVariant?: "positive" | "critical" | undefined;
     hideOnLowWidth?: boolean | undefined;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/ProfileButton/ProfileButton.js

@@ -6,9 +6,9 @@ var _excluded = ["portraitSrc", "icon", "initials", "onClick", "hideOnLowWidth",
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function 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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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 * as React from 'react';
 import styled from 'styled-components';

package/dist/ProfileButton/ProfileButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ProfileButton/ProfileButton.tsx"],"names":["React","styled","COLORS","IconButton","Size","IconButtonContent","StyledPrimaryIconButton","NotificationDot","BREAKPOINTS","ComponentS","ComponentTextStyle","PortraitOverlay","div","black","ProfileButtonContainer","props","hideOnLowWidth","MEDIUM","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","renderIcon","Bold","white","Medium"],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,UAAhB,EAA4BC,IAA5B,QAAuC,IAAvC;AACA,SAAQC,iBAAR,EAA2BC,uBAA3B,QAAyD,sBAAzD;AACA,SAAQC,eAAR,QAA8B,oBAA9B;AACA,SAAQC,WAAR,EAAqBC,UAArB,EAAiCC,kBAAjC,QAA0D,WAA1D;;;;AAWA,IAAMC,eAAe,GAAGV,MAAM,CAACW,GAAV,4NAICV,MAAM,CAACW,KAJR,CAArB;AAWA,OAAO,IAAMC,sBAAsB,GAAGb,MAAM,CAACW,GAAV,gvBAM/BN,uBAN+B,EAOpB,UAAAS,KAAK;AAAA,SAAKA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,QAArC;AAAA,CAPe,EAS7BR,WAAW,CAACS,MATiB,EAkB3BZ,iBAlB2B,EAmBPH,MAAM,CAACgB,WAnBA,EAsBjBhB,MAAM,CAACiB,WAtBU,EA6B3BR,eA7B2B,EAqC3BA,eArC2B,CAA5B;AA6CP,IAAMS,qBAAqB,GAAGnB,MAAM,CAACW,GAAV,gIAA3B;AAMA,IAAMS,YAAY,GAAGpB,MAAM,CAACW,GAAV,uOAAlB;AAaA,IAAMU,aAAa,gBAAGtB,KAAK,CAACuB,UAAN,CAAwD,gBAWIC,GAXJ,EAWY;AAAA,MAVTC,WAUS,QAVTA,WAUS;AAAA,MATTC,IASS,QATTA,IASS;AAAA,MARTC,QAQS,QARTA,QAQS;AAAA,MAPTC,OAOS,QAPTA,OAOS;AAAA,MANTZ,cAMS,QANTA,cAMS;AAAA,MALTa,QAKS,QALTA,QAKS;AAAA,MAJTC,mBAIS,QAJTA,mBAIS;AAAA,MAHTC,SAGS,QAHTA,SAGS;AAAA,MAFTC,QAES,QAFTA,QAES;AAAA,MADNC,IACM;;AACxF,MAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,WACGT,WAAW,iBACV,MAAC,YAAD;AAAA,8BACE;AAAK,QAAA,GAAG,EAAEA;AAAV,QADF,eAEE,KAAC,eAAD,KAFF;AAAA,MADF,IAMCE,QAAQ,iBACP,KAAC,UAAD;AAAY,MAAA,SAAS,EAAC,UAAtB;AAAiC,MAAA,SAAS,EAAEjB,kBAAkB,CAACyB,IAA/D;AACY,MAAA,KAAK,EAAEN,QAAQ,GAAG3B,MAAM,CAACiB,WAAV,GAAwBjB,MAAM,CAACkC,KAD1D;AAAA,gBAEGT;AAFH,MAPF,iBAWM;AAAA,gBAAGD;AAAH,MAZR;AAcD,GAfD;;AAiBA,sBACE,KAAC,sBAAD;AAAwB,IAAA,cAAc,EAAEV,cAAxC;AAAA,2BACE,MAAC,UAAD;AAAY,MAAA,GAAG,EAAEQ,GAAjB;AACY,MAAA,SAAS,EAAEO,SADvB;AAEY,MAAA,QAAQ,EAAEF,QAFtB;AAGY,MAAA,MAAM,EAAED,OAHpB;AAIY,MAAA,OAAO,EAAC,SAJpB;AAKY,MAAA,QAAQ,EAAEI,QALtB;AAMY,MAAA,KAAK,EAAC,UANlB;AAOY,MAAA,cAAc,EAAEhB;AAP5B,OAQgBiB,IARhB;AAAA,iBASGC,UAAU,EATb,EAUGJ,mBAAmB,iBAClB,KAAC,qBAAD;AAAA,+BACE,KAAC,eAAD;AAAiB,UAAA,IAAI,EAAE1B,IAAI,CAACiC,MAA5B;AAAoC,UAAA,OAAO,EAAEP;AAA7C;AADF,QAXJ;AAAA;AADF,IADF;AAoBD,CAjDqB,CAAtB;;AAnFEL,EAAAA,W;AACAC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,O;AACAE,EAAAA,mB,aAAsB,U,EAAa,U;AACnCd,EAAAA,c;;AAiIF,eAAeM,aAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContent, StyledPrimaryIconButton} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\n\nexport type ProfileButtonProps = {\n  portraitSrc?: string;\n  icon?: React.ReactNode;\n  initials?: string;\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  notificationVariant?: 'positive' | 'critical';\n  hideOnLowWidth?: boolean;\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\n\nconst PortraitOverlay = styled.div`\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ${COLORS.black};\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n`;\n\nexport const ProfileButtonContainer = styled.div<{ hideOnLowWidth?: boolean }>`\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ${StyledPrimaryIconButton} {\n    display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\n\n    ${BREAKPOINTS.MEDIUM} {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ${IconButtonContent} {\n        background-color: ${COLORS.neutral_100};\n\n        svg, svg path {\n          fill: ${COLORS.neutral_300};\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ${PortraitOverlay} {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ${PortraitOverlay} {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n`;\n\nconst NotificationContainer = styled.div`\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n                                                                                 portraitSrc,\n                                                                                 icon,\n                                                                                 initials,\n                                                                                 onClick,\n                                                                                 hideOnLowWidth,\n                                                                                 disabled,\n                                                                                 notificationVariant,\n                                                                                 className,\n                                                                                 tabIndex,\n                                                                                 ...rest\n                                                                               }, ref) => {\n  const renderIcon = () => {\n    return (\n      (portraitSrc && (\n        <ImageWrapper>\n          <img src={portraitSrc}/>\n          <PortraitOverlay/>\n        </ImageWrapper>\n      )) ||\n      (initials && (\n        <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\n                    color={disabled ? COLORS.neutral_300 : COLORS.white}>\n          {initials}\n        </ComponentS>\n      )) || <>{icon}</>\n    );\n  };\n\n  return (\n    <ProfileButtonContainer hideOnLowWidth={hideOnLowWidth}>\n      <IconButton ref={ref}\n                  className={className}\n                  disabled={disabled}\n                  action={onClick}\n                  variant=\"primary\"\n                  tabIndex={tabIndex}\n                  shape=\"circular\"\n                  hideOnLowWidth={hideOnLowWidth}\n                  {...rest}>\n        {renderIcon()}\n        {notificationVariant && (\n          <NotificationContainer>\n            <NotificationDot size={Size.Medium} variant={notificationVariant}/>\n          </NotificationContainer>\n        )}\n      </IconButton>\n    </ProfileButtonContainer>\n  );\n});\n\nexport default ProfileButton;\n"],"file":"ProfileButton.js"}
+{"version":3,"file":"ProfileButton.js","names":["React","styled","COLORS","IconButton","Size","IconButtonContent","StyledPrimaryIconButton","NotificationDot","BREAKPOINTS","ComponentS","ComponentTextStyle","PortraitOverlay","div","black","ProfileButtonContainer","props","hideOnLowWidth","MEDIUM","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","renderIcon","Bold","white","Medium"],"sources":["../../src/ProfileButton/ProfileButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContent, StyledPrimaryIconButton} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\n\nexport type ProfileButtonProps = {\n  portraitSrc?: string;\n  icon?: React.ReactNode;\n  initials?: string;\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  notificationVariant?: 'positive' | 'critical';\n  hideOnLowWidth?: boolean;\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\n\nconst PortraitOverlay = styled.div`\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ${COLORS.black};\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n`;\n\nexport const ProfileButtonContainer = styled.div<{ hideOnLowWidth?: boolean }>`\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ${StyledPrimaryIconButton} {\n    display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\n\n    ${BREAKPOINTS.MEDIUM} {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ${IconButtonContent} {\n        background-color: ${COLORS.neutral_100};\n\n        svg, svg path {\n          fill: ${COLORS.neutral_300};\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ${PortraitOverlay} {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ${PortraitOverlay} {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n`;\n\nconst NotificationContainer = styled.div`\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n                                                                                 portraitSrc,\n                                                                                 icon,\n                                                                                 initials,\n                                                                                 onClick,\n                                                                                 hideOnLowWidth,\n                                                                                 disabled,\n                                                                                 notificationVariant,\n                                                                                 className,\n                                                                                 tabIndex,\n                                                                                 ...rest\n                                                                               }, ref) => {\n  const renderIcon = () => {\n    return (\n      (portraitSrc && (\n        <ImageWrapper>\n          <img src={portraitSrc}/>\n          <PortraitOverlay/>\n        </ImageWrapper>\n      )) ||\n      (initials && (\n        <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\n                    color={disabled ? COLORS.neutral_300 : COLORS.white}>\n          {initials}\n        </ComponentS>\n      )) || <>{icon}</>\n    );\n  };\n\n  return (\n    <ProfileButtonContainer hideOnLowWidth={hideOnLowWidth}>\n      <IconButton ref={ref}\n                  className={className}\n                  disabled={disabled}\n                  action={onClick}\n                  variant=\"primary\"\n                  tabIndex={tabIndex}\n                  shape=\"circular\"\n                  hideOnLowWidth={hideOnLowWidth}\n                  {...rest}>\n        {renderIcon()}\n        {notificationVariant && (\n          <NotificationContainer>\n            <NotificationDot size={Size.Medium} variant={notificationVariant}/>\n          </NotificationContainer>\n        )}\n      </IconButton>\n    </ProfileButtonContainer>\n  );\n});\n\nexport default ProfileButton;\n"],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,UAAhB,EAA4BC,IAA5B,QAAuC,IAAvC;AACA,SAAQC,iBAAR,EAA2BC,uBAA3B,QAAyD,sBAAzD;AACA,SAAQC,eAAR,QAA8B,oBAA9B;AACA,SAAQC,WAAR,EAAqBC,UAArB,EAAiCC,kBAAjC,QAA0D,WAA1D;;;;AAWA,IAAMC,eAAe,GAAGV,MAAM,CAACW,GAAV,4NAICV,MAAM,CAACW,KAJR,CAArB;AAWA,OAAO,IAAMC,sBAAsB,GAAGb,MAAM,CAACW,GAAV,gvBAM/BN,uBAN+B,EAOpB,UAAAS,KAAK;EAAA,OAAKA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,QAArC;AAAA,CAPe,EAS7BR,WAAW,CAACS,MATiB,EAkB3BZ,iBAlB2B,EAmBPH,MAAM,CAACgB,WAnBA,EAsBjBhB,MAAM,CAACiB,WAtBU,EA6B3BR,eA7B2B,EAqC3BA,eArC2B,CAA5B;AA6CP,IAAMS,qBAAqB,GAAGnB,MAAM,CAACW,GAAV,gIAA3B;AAMA,IAAMS,YAAY,GAAGpB,MAAM,CAACW,GAAV,uOAAlB;AAaA,IAAMU,aAAa,gBAAGtB,KAAK,CAACuB,UAAN,CAAwD,gBAWIC,GAXJ,EAWY;EAAA,IAVTC,WAUS,QAVTA,WAUS;EAAA,IATTC,IASS,QATTA,IASS;EAAA,IARTC,QAQS,QARTA,QAQS;EAAA,IAPTC,OAOS,QAPTA,OAOS;EAAA,IANTZ,cAMS,QANTA,cAMS;EAAA,IALTa,QAKS,QALTA,QAKS;EAAA,IAJTC,mBAIS,QAJTA,mBAIS;EAAA,IAHTC,SAGS,QAHTA,SAGS;EAAA,IAFTC,QAES,QAFTA,QAES;EAAA,IADNC,IACM;;EACxF,IAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;IACvB,OACGT,WAAW,iBACV,MAAC,YAAD;MAAA,wBACE;QAAK,GAAG,EAAEA;MAAV,EADF,eAEE,KAAC,eAAD,KAFF;IAAA,EADF,IAMCE,QAAQ,iBACP,KAAC,UAAD;MAAY,SAAS,EAAC,UAAtB;MAAiC,SAAS,EAAEjB,kBAAkB,CAACyB,IAA/D;MACY,KAAK,EAAEN,QAAQ,GAAG3B,MAAM,CAACiB,WAAV,GAAwBjB,MAAM,CAACkC,KAD1D;MAAA,UAEGT;IAFH,EAPF,iBAWM;MAAA,UAAGD;IAAH,EAZR;EAcD,CAfD;;EAiBA,oBACE,KAAC,sBAAD;IAAwB,cAAc,EAAEV,cAAxC;IAAA,uBACE,MAAC,UAAD;MAAY,GAAG,EAAEQ,GAAjB;MACY,SAAS,EAAEO,SADvB;MAEY,QAAQ,EAAEF,QAFtB;MAGY,MAAM,EAAED,OAHpB;MAIY,OAAO,EAAC,SAJpB;MAKY,QAAQ,EAAEI,QALtB;MAMY,KAAK,EAAC,UANlB;MAOY,cAAc,EAAEhB;IAP5B,GAQgBiB,IARhB;MAAA,WASGC,UAAU,EATb,EAUGJ,mBAAmB,iBAClB,KAAC,qBAAD;QAAA,uBACE,KAAC,eAAD;UAAiB,IAAI,EAAE1B,IAAI,CAACiC,MAA5B;UAAoC,OAAO,EAAEP;QAA7C;MADF,EAXJ;IAAA;EADF,EADF;AAoBD,CAjDqB,CAAtB;;EAnFEL,W;EACAC,I;EACAC,Q;EACAC,O;EACAE,mB,aAAsB,U,EAAa,U;EACnCd,c;;AAiIF,eAAeM,aAAf"}

package/dist/ProfileButton/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ProfileButton/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as ProfileButton } from './ProfileButton';"],"file":"index.cjs"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/ProfileButton/index.tsx"],"sourcesContent":["export { default as ProfileButton } from './ProfileButton';"],"mappings":";;;;;;;;;;;;;;AAAA"}

package/dist/ProfileButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ProfileButton/index.tsx"],"names":["default","ProfileButton"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAApB,QAAyC,iBAAzC","sourcesContent":["export { default as ProfileButton } from './ProfileButton';"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["default","ProfileButton"],"sources":["../../src/ProfileButton/index.tsx"],"sourcesContent":["export { default as ProfileButton } from './ProfileButton';"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAApB,QAAyC,iBAAzC"}

package/dist/QuizButton/QuizButton.cjs

@@ -35,9 +35,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function 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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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) { (0, _defineProperty2.default)(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; }
 
 var TextContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 0 8px 8px 0;\n  display: flex;\n  background: ", ";\n  width: 100%;\n\n  transition: background 100ms ease-in-out;\n  align-items: center;\n\n  padding: ", ";\n  ", "\n"])), _.COLORS.accent1_20, function (props) {
   return props.size === _.Size.Small ? '6px 8px' : props.size === _.Size.Large ? '20px 16px' : '12px 16px';
@@ -108,7 +108,9 @@ var QuizButton = function QuizButton(_ref) {
     onMouseDown: _.defaultOnMouseDownHandler,
     size: size,
     className: 'quiz-button '.concat(selected ? ' selected' : '').concat(disabled ? ' disabled' : '').concat(resultType ? ' result ' + resultType : '').concat(className ? ' ' + className : ''),
-    "data-testid": 'container'
+    "data-testid": 'container',
+    "aria-checked": selected,
+    role: type === 'radio' ? 'radio' : 'checkbox'
   }, rest), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContainer, {
       "data-testid": 'btnContainer',

package/dist/QuizButton/QuizButton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/QuizButton/QuizButton.tsx"],"names":["TextContainer","styled","div","COLORS","accent1_20","props","size","Size","Small","Large","ComponentTextStyle","Regular","TextWrapper","ButtonContainer","accent1_100","accent1_600","OptionContainer","accent1_200","neutral_100","neutral_20","neutral_300","correct_20","correct_400","critical_20","critical_500","warning_20","warning_400","focusStyles","accent1_300","isSelected","accent1_700","accent1_400","accent1_800","renderResultContent","resultType","white","QuizButton","text","type","onClick","id","className","selected","disabled","Medium","rest","defaultOnMouseDownHandler","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, RadioButton, Size, SystemIcons} from '..';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst TextContainer = styled.div<{size: Size}>`\n  border-radius: 0 8px 8px 0;\n  display: flex;\n  background: ${COLORS.accent1_20};\n  width: 100%;\n\n  transition: background 100ms ease-in-out;\n  align-items: center;\n\n  padding: ${props=>props.size===Size.Small?'6px 8px':(props.size===Size.Large?'20px 16px':'12px 16px')};\n  ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Regular,null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Regular,null) : ComponentMStyling(ComponentTextStyle.Regular,null))}\n`;\n\nconst TextWrapper = styled.div<{size:Size}>``;\n\nconst ButtonContainer = styled.div<{size: Size}>`\n  border-radius: 8px 0 0 8px;\n  display: flex;\n  background: ${COLORS.accent1_100};\n\n  width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n\n  transition: background 100ms ease-in-out;\n\n  .quiz-button-result-icon {\n    height: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n    width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  }\n\n  .radio-button-icon, .checkbox-icon {\n    margin: auto;\n    min-width: unset;\n    background: transparent;\n\n    svg {\n      color: ${COLORS.accent1_600};\n    }\n\n    &:hover {\n      background: transparent;\n    }\n\n    &:active {\n      background: transparent;\n    }\n  }\n\n  .small {\n    min-width: 32px;\n    min-height: 32px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n\n  .medium {\n    min-width: 48px;\n    min-height: 48px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 24px;\n        width: 24px;\n      }\n    }\n  }\n\n  .large {\n    min-width: 64px;\n    min-height: 64px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 32px;\n        width: 32px;\n      }\n    }\n  }\n`;\n\nconst OptionContainer = styled.div<{isSelected:boolean, size:Size}>`\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  max-width: 65ch;  \n  word-break: break-word;\n\n  min-height: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  margin-bottom: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n\n  &.selected {\n    ${TextContainer} {\n      background: ${COLORS.accent1_100};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_200};\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    ${ButtonContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_100};\n    }\n    ${TextContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_20};\n      color: ${COLORS.neutral_300};\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &.correct {\n    ${TextContainer} {    \n      background: ${COLORS.correct_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.correct_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    ${TextContainer} {    \n      background: ${COLORS.critical_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.critical_500};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    ${TextContainer} {    \n      background: ${COLORS.warning_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.warning_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    ${focusStyles}\n  }\n\n  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active,\n  &.active-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:hover:not(.disabled):not(.result),\n  &.hover-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_300};\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_200  : COLORS.accent1_100};\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.accent1_700};\n      }\n    }\n  }\n\n  &:active:not(.disabled):not(.result),\n  &.active-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_400};\n      transition: none;\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_300 : COLORS.accent1_200};\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.accent1_800};\n      }\n    }\n  }\n`;\n\nconst renderResultContent = (resultType: string) => {\n  switch(resultType){\n    case 'correct' : return <SystemIcons.CheckMark color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    default : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n  }\n};\n\ntype QuizButtonProps = {\n  resultType?: 'correct' | 'incorrect' | 'partial';\n  text: string;\n  onClick?: (arg:any)=>void;\n  id: string;\n  selected?: boolean;\n  disabled?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  type: 'radio' | 'checkbox';\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>\n\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({\n                                                                text,\n                                                                type,\n                                                                onClick,\n                                                                resultType,\n                                                                id,\n                                                                className,\n                                                                selected = false,\n                                                                disabled = false,\n                                                                size = Size.Medium,\n                                                                ...rest\n                                                              }) => {\n  return (   \n    <OptionContainer\n      onClick={onClick}\n      isSelected={selected}\n      tabIndex={(disabled || resultType) ? -1 : 0}\n      onMouseDown={defaultOnMouseDownHandler}\n      size={size}\n      className={'quiz-button '.concat(selected ? ' selected' : '')\n        .concat(disabled ? ' disabled' : '')\n        .concat(resultType ? ' result ' + resultType : '')\n        .concat(className ? ' ' + className : '')}\n      data-testid={'container'}\n      {...rest}>\n        <ButtonContainer data-testid={'btnContainer'} className={'quiz-button-icon'} size={size}>\n          {\n            resultType ? renderResultContent(resultType) : (\n                                type==='radio' ? <RadioButton selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/> : <Checkbox selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/>\n                              )\n          }\n        </ButtonContainer>\n\n        <TextContainer data-testid={'txtContainer'} className={'quiz-button-text'} size={size}>\n          <TextWrapper size={size}>\n            {text}\n          </TextWrapper>\n        </TextContainer>\n    </OptionContainer>\n  );\n};\n\nexport default QuizButton;\n"],"file":"QuizButton.cjs"}
+{"version":3,"file":"QuizButton.cjs","names":["TextContainer","styled","div","COLORS","accent1_20","props","size","Size","Small","Large","ComponentSStyling","ComponentTextStyle","Regular","ComponentLStyling","ComponentMStyling","TextWrapper","ButtonContainer","accent1_100","accent1_600","OptionContainer","accent1_200","neutral_100","neutral_20","neutral_300","correct_20","correct_400","critical_20","critical_500","warning_20","warning_400","focusStyles","accent1_300","isSelected","accent1_700","accent1_400","accent1_800","renderResultContent","resultType","white","QuizButton","text","type","onClick","id","className","selected","disabled","Medium","rest","defaultOnMouseDownHandler","concat"],"sources":["../../src/QuizButton/QuizButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, RadioButton, Size, SystemIcons} from '..';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst TextContainer = styled.div<{size: Size}>`\n  border-radius: 0 8px 8px 0;\n  display: flex;\n  background: ${COLORS.accent1_20};\n  width: 100%;\n\n  transition: background 100ms ease-in-out;\n  align-items: center;\n\n  padding: ${props=>props.size===Size.Small?'6px 8px':(props.size===Size.Large?'20px 16px':'12px 16px')};\n  ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Regular,null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Regular,null) : ComponentMStyling(ComponentTextStyle.Regular,null))}\n`;\n\nconst TextWrapper = styled.div<{size:Size}>``;\n\nconst ButtonContainer = styled.div<{size: Size}>`\n  border-radius: 8px 0 0 8px;\n  display: flex;\n  background: ${COLORS.accent1_100};\n\n  width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n\n  transition: background 100ms ease-in-out;\n\n  .quiz-button-result-icon {\n    height: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n    width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  }\n\n  .radio-button-icon, .checkbox-icon {\n    margin: auto;\n    min-width: unset;\n    background: transparent;\n\n    svg {\n      color: ${COLORS.accent1_600};\n    }\n\n    &:hover {\n      background: transparent;\n    }\n\n    &:active {\n      background: transparent;\n    }\n  }\n\n  .small {\n    min-width: 32px;\n    min-height: 32px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n\n  .medium {\n    min-width: 48px;\n    min-height: 48px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 24px;\n        width: 24px;\n      }\n    }\n  }\n\n  .large {\n    min-width: 64px;\n    min-height: 64px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 32px;\n        width: 32px;\n      }\n    }\n  }\n`;\n\nconst OptionContainer = styled.div<{isSelected:boolean, size:Size}>`\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  max-width: 65ch;  \n  word-break: break-word;\n\n  min-height: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  margin-bottom: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n\n  &.selected {\n    ${TextContainer} {\n      background: ${COLORS.accent1_100};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_200};\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    ${ButtonContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_100};\n    }\n    ${TextContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_20};\n      color: ${COLORS.neutral_300};\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &.correct {\n    ${TextContainer} {    \n      background: ${COLORS.correct_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.correct_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    ${TextContainer} {    \n      background: ${COLORS.critical_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.critical_500};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    ${TextContainer} {    \n      background: ${COLORS.warning_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.warning_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    ${focusStyles}\n  }\n\n  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active,\n  &.active-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:hover:not(.disabled):not(.result),\n  &.hover-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_300};\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_200  : COLORS.accent1_100};\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.accent1_700};\n      }\n    }\n  }\n\n  &:active:not(.disabled):not(.result),\n  &.active-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_400};\n      transition: none;\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_300 : COLORS.accent1_200};\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.accent1_800};\n      }\n    }\n  }\n`;\n\nconst renderResultContent = (resultType: string) => {\n  switch(resultType){\n    case 'correct' : return <SystemIcons.CheckMark color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    default : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n  }\n};\n\ntype QuizButtonProps = {\n  resultType?: 'correct' | 'incorrect' | 'partial';\n  text: string;\n  onClick?: (arg:any)=>void;\n  id: string;\n  selected?: boolean;\n  disabled?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  type: 'radio' | 'checkbox';\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>\n\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({\n                                                                text,\n                                                                type,\n                                                                onClick,\n                                                                resultType,\n                                                                id,\n                                                                className,\n                                                                selected = false,\n                                                                disabled = false,\n                                                                size = Size.Medium,\n                                                                ...rest\n                                                              }) => {\n  return (   \n    <OptionContainer\n      onClick={onClick}\n      isSelected={selected}\n      tabIndex={(disabled || resultType) ? -1 : 0}\n      onMouseDown={defaultOnMouseDownHandler}\n      size={size}\n      className={'quiz-button '.concat(selected ? ' selected' : '')\n        .concat(disabled ? ' disabled' : '')\n        .concat(resultType ? ' result ' + resultType : '')\n        .concat(className ? ' ' + className : '')}\n      data-testid={'container'}\n      aria-checked={selected}\n      role={type === 'radio'? 'radio' : 'checkbox'}\n      {...rest}>\n        <ButtonContainer data-testid={'btnContainer'} className={'quiz-button-icon'} size={size}>\n          {\n            resultType ? renderResultContent(resultType) : (\n                                type==='radio' ? <RadioButton selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/> : <Checkbox selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/>\n                              )\n          }\n        </ButtonContainer>\n\n        <TextContainer data-testid={'txtContainer'} className={'quiz-button-text'} size={size}>\n          <TextWrapper size={size}>\n            {text}\n          </TextWrapper>\n        </TextContainer>\n    </OptionContainer>\n  );\n};\n\nexport default QuizButton;\n"],"mappings":"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"}

package/dist/QuizButton/QuizButton.js

@@ -6,9 +6,9 @@ var _excluded = ["text", "type", "onClick", "resultType", "id", "className", "se
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function 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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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 * as React from 'react';
 import styled from 'styled-components';
@@ -83,7 +83,9 @@ var QuizButton = function QuizButton(_ref) {
     onMouseDown: defaultOnMouseDownHandler,
     size: size,
     className: 'quiz-button '.concat(selected ? ' selected' : '').concat(disabled ? ' disabled' : '').concat(resultType ? ' result ' + resultType : '').concat(className ? ' ' + className : ''),
-    "data-testid": 'container'
+    "data-testid": 'container',
+    "aria-checked": selected,
+    role: type === 'radio' ? 'radio' : 'checkbox'
   }, rest), {}, {
     children: [/*#__PURE__*/_jsx(ButtonContainer, {
       "data-testid": 'btnContainer',

package/dist/QuizButton/QuizButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/QuizButton/QuizButton.tsx"],"names":["React","styled","Checkbox","COLORS","defaultOnMouseDownHandler","focusStyles","RadioButton","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","TextContainer","div","accent1_20","props","size","Small","Large","Regular","TextWrapper","ButtonContainer","accent1_100","accent1_600","OptionContainer","accent1_200","neutral_100","neutral_20","neutral_300","correct_20","correct_400","critical_20","critical_500","warning_20","warning_400","accent1_300","isSelected","accent1_700","accent1_400","accent1_800","renderResultContent","resultType","white","QuizButton","text","type","onClick","id","className","selected","disabled","Medium","rest","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, RadioButton, Size, SystemIcons} from '..';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst TextContainer = styled.div<{size: Size}>`\n  border-radius: 0 8px 8px 0;\n  display: flex;\n  background: ${COLORS.accent1_20};\n  width: 100%;\n\n  transition: background 100ms ease-in-out;\n  align-items: center;\n\n  padding: ${props=>props.size===Size.Small?'6px 8px':(props.size===Size.Large?'20px 16px':'12px 16px')};\n  ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Regular,null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Regular,null) : ComponentMStyling(ComponentTextStyle.Regular,null))}\n`;\n\nconst TextWrapper = styled.div<{size:Size}>``;\n\nconst ButtonContainer = styled.div<{size: Size}>`\n  border-radius: 8px 0 0 8px;\n  display: flex;\n  background: ${COLORS.accent1_100};\n\n  width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n\n  transition: background 100ms ease-in-out;\n\n  .quiz-button-result-icon {\n    height: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n    width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  }\n\n  .radio-button-icon, .checkbox-icon {\n    margin: auto;\n    min-width: unset;\n    background: transparent;\n\n    svg {\n      color: ${COLORS.accent1_600};\n    }\n\n    &:hover {\n      background: transparent;\n    }\n\n    &:active {\n      background: transparent;\n    }\n  }\n\n  .small {\n    min-width: 32px;\n    min-height: 32px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n\n  .medium {\n    min-width: 48px;\n    min-height: 48px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 24px;\n        width: 24px;\n      }\n    }\n  }\n\n  .large {\n    min-width: 64px;\n    min-height: 64px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 32px;\n        width: 32px;\n      }\n    }\n  }\n`;\n\nconst OptionContainer = styled.div<{isSelected:boolean, size:Size}>`\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  max-width: 65ch;  \n  word-break: break-word;\n\n  min-height: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  margin-bottom: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n\n  &.selected {\n    ${TextContainer} {\n      background: ${COLORS.accent1_100};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_200};\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    ${ButtonContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_100};\n    }\n    ${TextContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_20};\n      color: ${COLORS.neutral_300};\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &.correct {\n    ${TextContainer} {    \n      background: ${COLORS.correct_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.correct_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    ${TextContainer} {    \n      background: ${COLORS.critical_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.critical_500};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    ${TextContainer} {    \n      background: ${COLORS.warning_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.warning_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    ${focusStyles}\n  }\n\n  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active,\n  &.active-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:hover:not(.disabled):not(.result),\n  &.hover-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_300};\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_200  : COLORS.accent1_100};\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.accent1_700};\n      }\n    }\n  }\n\n  &:active:not(.disabled):not(.result),\n  &.active-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_400};\n      transition: none;\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_300 : COLORS.accent1_200};\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.accent1_800};\n      }\n    }\n  }\n`;\n\nconst renderResultContent = (resultType: string) => {\n  switch(resultType){\n    case 'correct' : return <SystemIcons.CheckMark color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    default : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n  }\n};\n\ntype QuizButtonProps = {\n  resultType?: 'correct' | 'incorrect' | 'partial';\n  text: string;\n  onClick?: (arg:any)=>void;\n  id: string;\n  selected?: boolean;\n  disabled?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  type: 'radio' | 'checkbox';\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>\n\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({\n                                                                text,\n                                                                type,\n                                                                onClick,\n                                                                resultType,\n                                                                id,\n                                                                className,\n                                                                selected = false,\n                                                                disabled = false,\n                                                                size = Size.Medium,\n                                                                ...rest\n                                                              }) => {\n  return (   \n    <OptionContainer\n      onClick={onClick}\n      isSelected={selected}\n      tabIndex={(disabled || resultType) ? -1 : 0}\n      onMouseDown={defaultOnMouseDownHandler}\n      size={size}\n      className={'quiz-button '.concat(selected ? ' selected' : '')\n        .concat(disabled ? ' disabled' : '')\n        .concat(resultType ? ' result ' + resultType : '')\n        .concat(className ? ' ' + className : '')}\n      data-testid={'container'}\n      {...rest}>\n        <ButtonContainer data-testid={'btnContainer'} className={'quiz-button-icon'} size={size}>\n          {\n            resultType ? renderResultContent(resultType) : (\n                                type==='radio' ? <RadioButton selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/> : <Checkbox selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/>\n                              )\n          }\n        </ButtonContainer>\n\n        <TextContainer data-testid={'txtContainer'} className={'quiz-button-text'} size={size}>\n          <TextWrapper size={size}>\n            {text}\n          </TextWrapper>\n        </TextContainer>\n    </OptionContainer>\n  );\n};\n\nexport default QuizButton;\n"],"file":"QuizButton.js"}
+{"version":3,"file":"QuizButton.js","names":["React","styled","Checkbox","COLORS","defaultOnMouseDownHandler","focusStyles","RadioButton","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","TextContainer","div","accent1_20","props","size","Small","Large","Regular","TextWrapper","ButtonContainer","accent1_100","accent1_600","OptionContainer","accent1_200","neutral_100","neutral_20","neutral_300","correct_20","correct_400","critical_20","critical_500","warning_20","warning_400","accent1_300","isSelected","accent1_700","accent1_400","accent1_800","renderResultContent","resultType","white","QuizButton","text","type","onClick","id","className","selected","disabled","Medium","rest","concat"],"sources":["../../src/QuizButton/QuizButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, RadioButton, Size, SystemIcons} from '..';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst TextContainer = styled.div<{size: Size}>`\n  border-radius: 0 8px 8px 0;\n  display: flex;\n  background: ${COLORS.accent1_20};\n  width: 100%;\n\n  transition: background 100ms ease-in-out;\n  align-items: center;\n\n  padding: ${props=>props.size===Size.Small?'6px 8px':(props.size===Size.Large?'20px 16px':'12px 16px')};\n  ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Regular,null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Regular,null) : ComponentMStyling(ComponentTextStyle.Regular,null))}\n`;\n\nconst TextWrapper = styled.div<{size:Size}>``;\n\nconst ButtonContainer = styled.div<{size: Size}>`\n  border-radius: 8px 0 0 8px;\n  display: flex;\n  background: ${COLORS.accent1_100};\n\n  width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n\n  transition: background 100ms ease-in-out;\n\n  .quiz-button-result-icon {\n    height: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n    width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  }\n\n  .radio-button-icon, .checkbox-icon {\n    margin: auto;\n    min-width: unset;\n    background: transparent;\n\n    svg {\n      color: ${COLORS.accent1_600};\n    }\n\n    &:hover {\n      background: transparent;\n    }\n\n    &:active {\n      background: transparent;\n    }\n  }\n\n  .small {\n    min-width: 32px;\n    min-height: 32px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n\n  .medium {\n    min-width: 48px;\n    min-height: 48px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 24px;\n        width: 24px;\n      }\n    }\n  }\n\n  .large {\n    min-width: 64px;\n    min-height: 64px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 32px;\n        width: 32px;\n      }\n    }\n  }\n`;\n\nconst OptionContainer = styled.div<{isSelected:boolean, size:Size}>`\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  max-width: 65ch;  \n  word-break: break-word;\n\n  min-height: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  margin-bottom: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n\n  &.selected {\n    ${TextContainer} {\n      background: ${COLORS.accent1_100};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_200};\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    ${ButtonContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_100};\n    }\n    ${TextContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_20};\n      color: ${COLORS.neutral_300};\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &.correct {\n    ${TextContainer} {    \n      background: ${COLORS.correct_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.correct_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    ${TextContainer} {    \n      background: ${COLORS.critical_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.critical_500};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    ${TextContainer} {    \n      background: ${COLORS.warning_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.warning_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    ${focusStyles}\n  }\n\n  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active,\n  &.active-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:hover:not(.disabled):not(.result),\n  &.hover-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_300};\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_200  : COLORS.accent1_100};\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.accent1_700};\n      }\n    }\n  }\n\n  &:active:not(.disabled):not(.result),\n  &.active-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_400};\n      transition: none;\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_300 : COLORS.accent1_200};\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.accent1_800};\n      }\n    }\n  }\n`;\n\nconst renderResultContent = (resultType: string) => {\n  switch(resultType){\n    case 'correct' : return <SystemIcons.CheckMark color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    default : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n  }\n};\n\ntype QuizButtonProps = {\n  resultType?: 'correct' | 'incorrect' | 'partial';\n  text: string;\n  onClick?: (arg:any)=>void;\n  id: string;\n  selected?: boolean;\n  disabled?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  type: 'radio' | 'checkbox';\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>\n\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({\n                                                                text,\n                                                                type,\n                                                                onClick,\n                                                                resultType,\n                                                                id,\n                                                                className,\n                                                                selected = false,\n                                                                disabled = false,\n                                                                size = Size.Medium,\n                                                                ...rest\n                                                              }) => {\n  return (   \n    <OptionContainer\n      onClick={onClick}\n      isSelected={selected}\n      tabIndex={(disabled || resultType) ? -1 : 0}\n      onMouseDown={defaultOnMouseDownHandler}\n      size={size}\n      className={'quiz-button '.concat(selected ? ' selected' : '')\n        .concat(disabled ? ' disabled' : '')\n        .concat(resultType ? ' result ' + resultType : '')\n        .concat(className ? ' ' + className : '')}\n      data-testid={'container'}\n      aria-checked={selected}\n      role={type === 'radio'? 'radio' : 'checkbox'}\n      {...rest}>\n        <ButtonContainer data-testid={'btnContainer'} className={'quiz-button-icon'} size={size}>\n          {\n            resultType ? renderResultContent(resultType) : (\n                                type==='radio' ? <RadioButton selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/> : <Checkbox selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/>\n                              )\n          }\n        </ButtonContainer>\n\n        <TextContainer data-testid={'txtContainer'} className={'quiz-button-text'} size={size}>\n          <TextWrapper size={size}>\n            {text}\n          </TextWrapper>\n        </TextContainer>\n    </OptionContainer>\n  );\n};\n\nexport default QuizButton;\n"],"mappings":"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"}

package/dist/QuizButton/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/QuizButton/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as QuizButton } from './QuizButton';"],"file":"index.cjs"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/QuizButton/index.ts"],"sourcesContent":["export { default as QuizButton } from './QuizButton';"],"mappings":";;;;;;;;;;;;;;AAAA"}

package/dist/QuizButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/QuizButton/index.ts"],"names":["default","QuizButton"],"mappings":"AAAA,SAASA,OAAO,IAAIC,UAApB,QAAsC,cAAtC","sourcesContent":["export { default as QuizButton } from './QuizButton';"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["default","QuizButton"],"sources":["../../src/QuizButton/index.ts"],"sourcesContent":["export { default as QuizButton } from './QuizButton';"],"mappings":"AAAA,SAASA,OAAO,IAAIC,UAApB,QAAsC,cAAtC"}

package/dist/SegmentControl/SegmentControl.cjs

@@ -32,9 +32,9 @@ var _excluded = ["items", "size", "onChange", "selected", "className"],
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function 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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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) { (0, _defineProperty2.default)(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; }
 
 var SegmentControlItemContent = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  border-radius: 8px;\n  padding: 0 16px;\n\n  background-color: transparent;\n  color: ", ";\n"])), _styles.COLORS.neutral_600);