@laerdal/life-react-components 3.0.1-dev.9.full → 3.1.0-dev.1

package/dist/Popover/Popover.js.map

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

@@ -1 +1 @@
-export { default as Popover } from './Popover';
+export { default as Popover } from './Popover';

package/dist/ProfileButton/ProfileButton.cjs

@@ -26,7 +26,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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);
 var ProfileButtonContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ", " {\n    display: ", ";\n\n    ", " {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ", " {\n        background-color: ", ";\n\n        svg, svg path {\n          fill: ", ";\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ", " {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ", " {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n"])), _Iconbutton.StyledPrimaryIconButton, function (props) {
   return props.hideOnLowWidth ? 'none' : 'inline';
-}, _styles.BREAKPOINTS.MEDIUM, _Iconbutton.IconButtonContent, _.COLORS.neutral_100, _.COLORS.neutral_300, PortraitOverlay, PortraitOverlay);
+}, _styles.BREAKPOINTS.MEDIUM, _Iconbutton.IconButtonContentStyles, _.COLORS.neutral_100, _.COLORS.neutral_300, PortraitOverlay, PortraitOverlay);
 exports.ProfileButtonContainer = ProfileButtonContainer;
 var NotificationContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n"])));
 var ImageWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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"])));

package/dist/ProfileButton/ProfileButton.cjs.map

@@ -1 +1 @@
-{"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';\r\nimport styled from 'styled-components';\r\nimport {COLORS, IconButton, Size} from '..';\r\nimport {IconButtonContent, StyledPrimaryIconButton} from '../Button/Iconbutton';\r\nimport {NotificationDot} from '../NotificationDot';\r\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\r\n\r\nexport type ProfileButtonProps = {\r\n  portraitSrc?: string;\r\n  icon?: React.ReactNode;\r\n  initials?: string;\r\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n  notificationVariant?: 'positive' | 'critical';\r\n  hideOnLowWidth?: boolean;\r\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\r\n\r\nconst PortraitOverlay = styled.div`\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 50%;\r\n  background-color: ${COLORS.black};\r\n  opacity: 0;\r\n  position: absolute;\r\n  top: 0px;\r\n  left: 0px;\r\n`;\r\n\r\nexport const ProfileButtonContainer = styled.div<{ hideOnLowWidth?: boolean }>`\r\n  width: 48px;\r\n  height: 48px;\r\n  display: inline;\r\n  user-select: none;\r\n  \r\n  ${StyledPrimaryIconButton} {\r\n    display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\r\n\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      display: inline;\r\n    }\r\n\r\n    :disabled {\r\n      img {\r\n        filter: grayscale(100%);\r\n      }\r\n\r\n      ${IconButtonContent} {\r\n        background-color: ${COLORS.neutral_100};\r\n\r\n        svg, svg path {\r\n          fill: ${COLORS.neutral_300};\r\n        }\r\n      }\r\n    }\r\n\r\n    :hover:not(:disabled):not(:active),\r\n    &.hover-state {\r\n      ${PortraitOverlay} {\r\n        opacity: 0.25;\r\n        transition: opacity 100ms ease-in-out;\r\n      }\r\n    }\r\n\r\n    :active:not(:disabled),\r\n    &.active-state {\r\n      ${PortraitOverlay} {\r\n        opacity: 0.5;\r\n        transition: opacity 0ms ease-in-out;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst NotificationContainer = styled.div`\r\n  position: absolute;\r\n  left: 30px;\r\n  bottom: 30px;\r\n`;\r\n\r\nconst ImageWrapper = styled.div`\r\n  width: 36px;\r\n  height: 36px;\r\n  position: relative;\r\n\r\n  img {\r\n    width: 100%;\r\n    height: 100%;\r\n    border-radius: 50%;\r\n    object-fit: cover;\r\n  }\r\n`;\r\n\r\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\r\n                                                                                 portraitSrc,\r\n                                                                                 icon,\r\n                                                                                 initials,\r\n                                                                                 onClick,\r\n                                                                                 hideOnLowWidth,\r\n                                                                                 disabled,\r\n                                                                                 notificationVariant,\r\n                                                                                 className,\r\n                                                                                 tabIndex,\r\n                                                                                 ...rest\r\n                                                                               }, ref) => {\r\n  const renderIcon = () => {\r\n    return (\r\n      (portraitSrc && (\r\n        <ImageWrapper>\r\n          <img src={portraitSrc}/>\r\n          <PortraitOverlay/>\r\n        </ImageWrapper>\r\n      )) ||\r\n      (initials && (\r\n        <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\r\n                    color={disabled ? COLORS.neutral_300 : COLORS.white}>\r\n          {initials}\r\n        </ComponentS>\r\n      )) || <>{icon}</>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <ProfileButtonContainer hideOnLowWidth={hideOnLowWidth}>\r\n      <IconButton ref={ref}\r\n                  className={className}\r\n                  disabled={disabled}\r\n                  action={onClick}\r\n                  variant=\"primary\"\r\n                  tabIndex={tabIndex}\r\n                  shape=\"circular\"\r\n                  hideOnLowWidth={hideOnLowWidth}\r\n                  {...rest}>\r\n        {renderIcon()}\r\n        {notificationVariant && (\r\n          <NotificationContainer>\r\n            <NotificationDot size={Size.Medium} variant={notificationVariant}/>\r\n          </NotificationContainer>\r\n        )}\r\n      </IconButton>\r\n    </ProfileButtonContainer>\r\n  );\r\n});\r\n\r\nexport default ProfileButton;\r\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAAsE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWtE,IAAMA,eAAe,GAAGC,yBAAM,CAACC,GAAG,0OAIZC,QAAM,CAACC,KAAK,CAKjC;AAEM,IAAMC,sBAAsB,GAAGJ,yBAAM,CAACC,GAAG,8vBAM5CI,mCAAuB,EACZ,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAC,EAE5DC,mBAAW,CAACC,MAAM,EAShBC,6BAAiB,EACGR,QAAM,CAACS,WAAW,EAG5BT,QAAM,CAACU,WAAW,EAO5Bb,eAAe,EAQfA,eAAe,CAMtB;AAAC;AAEF,IAAMc,qBAAqB,GAAGb,yBAAM,CAACC,GAAG,8IAIvC;AAED,IAAMa,YAAY,GAAGd,yBAAM,CAACC,GAAG,qPAW9B;AAED,IAAMc,aAAa,gBAAGC,KAAK,CAACC,UAAU,CAAwC,gBAWIC,GAAG,EAAK;EAAA,IAVTC,WAAW,QAAXA,WAAW;IACXC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPf,cAAc,QAAdA,cAAc;IACdgB,QAAQ,QAARA,QAAQ;IACRC,mBAAmB,QAAnBA,mBAAmB;IACnBC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACLC,IAAI;EAEtF,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;IACvB,OACGT,WAAW,iBACV,sBAAC,YAAY;MAAA,wBACX;QAAK,GAAG,EAAEA;MAAY,EAAE,eACxB,qBAAC,eAAe,KAAE;IAAA,EAErB,IACAE,QAAQ,iBACP,qBAAC,kBAAU;MAAC,SAAS,EAAC,UAAU;MAAC,SAAS,EAAEQ,0BAAkB,CAACC,IAAK;MACxD,KAAK,EAAEP,QAAQ,GAAGrB,QAAM,CAACU,WAAW,GAAGV,QAAM,CAAC6B,KAAM;MAAA,UAC7DV;IAAQ,EAEX,iBAAI;MAAA,UAAGD;IAAI,EAAI;EAErB,CAAC;EAED,oBACE,qBAAC,sBAAsB;IAAC,cAAc,EAAEb,cAAe;IAAA,uBACrD,sBAAC,YAAU;MAAC,GAAG,EAAEW,GAAI;MACT,SAAS,EAAEO,SAAU;MACrB,QAAQ,EAAEF,QAAS;MACnB,MAAM,EAAED,OAAQ;MAChB,OAAO,EAAC,SAAS;MACjB,QAAQ,EAAEI,QAAS;MACnB,KAAK,EAAC,UAAU;MAChB,cAAc,EAAEnB;IAAe,GAC3BoB,IAAI;MAAA,WACjBC,UAAU,EAAE,EACZJ,mBAAmB,iBAClB,qBAAC,qBAAqB;QAAA,uBACpB,qBAAC,gCAAe;UAAC,IAAI,EAAEQ,MAAI,CAACC,MAAO;UAAC,OAAO,EAAET;QAAoB;MAAE,EAEtE;IAAA;EACU,EACU;AAE7B,CAAC,CAAC;AAAC;EApIDL,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,OAAO;EACPE,mBAAmB,4BAAG,UAAU,EAAG,UAAU;EAC7CjB,cAAc;AAAA;AAAA,eAiIDQ,aAAa;AAAA"}
+{"version":3,"file":"ProfileButton.cjs","names":["PortraitOverlay","styled","div","COLORS","black","ProfileButtonContainer","StyledPrimaryIconButton","props","hideOnLowWidth","BREAKPOINTS","MEDIUM","IconButtonContentStyles","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 {IconButtonContentStyles, 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      ${IconButtonContentStyles} {\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;AAAsE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWtE,IAAMA,eAAe,GAAGC,yBAAM,CAACC,GAAG,0OAIZC,QAAM,CAACC,KAAK,CAKjC;AAEM,IAAMC,sBAAsB,GAAGJ,yBAAM,CAACC,GAAG,8vBAM5CI,mCAAuB,EACZ,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAC,EAE5DC,mBAAW,CAACC,MAAM,EAShBC,mCAAuB,EACHR,QAAM,CAACS,WAAW,EAG5BT,QAAM,CAACU,WAAW,EAO5Bb,eAAe,EAQfA,eAAe,CAMtB;AAAC;AAEF,IAAMc,qBAAqB,GAAGb,yBAAM,CAACC,GAAG,8IAIvC;AAED,IAAMa,YAAY,GAAGd,yBAAM,CAACC,GAAG,qPAW9B;AAED,IAAMc,aAAa,gBAAGC,KAAK,CAACC,UAAU,CAAwC,gBAWIC,GAAG,EAAK;EAAA,IAVTC,WAAW,QAAXA,WAAW;IACXC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPf,cAAc,QAAdA,cAAc;IACdgB,QAAQ,QAARA,QAAQ;IACRC,mBAAmB,QAAnBA,mBAAmB;IACnBC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACLC,IAAI;EAEtF,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;IACvB,OACGT,WAAW,iBACV,sBAAC,YAAY;MAAA,wBACX;QAAK,GAAG,EAAEA;MAAY,EAAE,eACxB,qBAAC,eAAe,KAAE;IAAA,EAErB,IACAE,QAAQ,iBACP,qBAAC,kBAAU;MAAC,SAAS,EAAC,UAAU;MAAC,SAAS,EAAEQ,0BAAkB,CAACC,IAAK;MACxD,KAAK,EAAEP,QAAQ,GAAGrB,QAAM,CAACU,WAAW,GAAGV,QAAM,CAAC6B,KAAM;MAAA,UAC7DV;IAAQ,EAEX,iBAAI;MAAA,UAAGD;IAAI,EAAI;EAErB,CAAC;EAED,oBACE,qBAAC,sBAAsB;IAAC,cAAc,EAAEb,cAAe;IAAA,uBACrD,sBAAC,YAAU;MAAC,GAAG,EAAEW,GAAI;MACT,SAAS,EAAEO,SAAU;MACrB,QAAQ,EAAEF,QAAS;MACnB,MAAM,EAAED,OAAQ;MAChB,OAAO,EAAC,SAAS;MACjB,QAAQ,EAAEI,QAAS;MACnB,KAAK,EAAC,UAAU;MAChB,cAAc,EAAEnB;IAAe,GAC3BoB,IAAI;MAAA,WACjBC,UAAU,EAAE,EACZJ,mBAAmB,iBAClB,qBAAC,qBAAqB;QAAA,uBACpB,qBAAC,gCAAe;UAAC,IAAI,EAAEQ,MAAI,CAACC,MAAO;UAAC,OAAO,EAAET;QAAoB;MAAE,EAEtE;IAAA;EACU,EACU;AAE7B,CAAC,CAAC;AAAC;EApIDL,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,OAAO;EACPE,mBAAmB,4BAAG,UAAU,EAAG,UAAU;EAC7CjB,cAAc;AAAA;AAAA,eAiIDQ,aAAa;AAAA"}

package/dist/ProfileButton/ProfileButton.d.ts

@@ -1,21 +1,21 @@
-import * as React from 'react';
-export type ProfileButtonProps = {
-    portraitSrc?: string;
-    icon?: React.ReactNode;
-    initials?: string;
-    onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
-    notificationVariant?: 'positive' | 'critical';
-    hideOnLowWidth?: boolean;
-} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>;
-export declare const ProfileButtonContainer: import("styled-components").StyledComponent<"div", any, {
-    hideOnLowWidth?: boolean | undefined;
-}, never>;
-declare const ProfileButton: React.ForwardRefExoticComponent<{
-    portraitSrc?: string | undefined;
-    icon?: React.ReactNode;
-    initials?: string | undefined;
-    onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
-    notificationVariant?: "positive" | "critical" | undefined;
-    hideOnLowWidth?: boolean | undefined;
-} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & React.RefAttributes<HTMLButtonElement>>;
-export default ProfileButton;
+import * as React from 'react';
+export type ProfileButtonProps = {
+    portraitSrc?: string;
+    icon?: React.ReactNode;
+    initials?: string;
+    onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    notificationVariant?: 'positive' | 'critical';
+    hideOnLowWidth?: boolean;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>;
+export declare const ProfileButtonContainer: import("styled-components").StyledComponent<"div", any, {
+    hideOnLowWidth?: boolean | undefined;
+}, never>;
+declare const ProfileButton: React.ForwardRefExoticComponent<{
+    portraitSrc?: string | undefined;
+    icon?: React.ReactNode;
+    initials?: string | undefined;
+    onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    notificationVariant?: "positive" | "critical" | undefined;
+    hideOnLowWidth?: boolean | undefined;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & React.RefAttributes<HTMLButtonElement>>;
+export default ProfileButton;

package/dist/ProfileButton/ProfileButton.js

@@ -9,7 +9,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import * as React from 'react';
 import styled from 'styled-components';
 import { COLORS, IconButton, Size } from '..';
-import { IconButtonContent, StyledPrimaryIconButton } from '../Button/Iconbutton';
+import { IconButtonContentStyles, StyledPrimaryIconButton } from '../Button/Iconbutton';
 import { NotificationDot } from '../NotificationDot';
 import { BREAKPOINTS, ComponentS, ComponentTextStyle } from '../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -18,7 +18,7 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 var PortraitOverlay = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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);
 export var ProfileButtonContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ", " {\n    display: ", ";\n\n    ", " {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ", " {\n        background-color: ", ";\n\n        svg, svg path {\n          fill: ", ";\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ", " {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ", " {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n"])), StyledPrimaryIconButton, function (props) {
   return props.hideOnLowWidth ? 'none' : 'inline';
-}, BREAKPOINTS.MEDIUM, IconButtonContent, COLORS.neutral_100, COLORS.neutral_300, PortraitOverlay, PortraitOverlay);
+}, BREAKPOINTS.MEDIUM, IconButtonContentStyles, COLORS.neutral_100, COLORS.neutral_300, PortraitOverlay, PortraitOverlay);
 var NotificationContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n"])));
 var ImageWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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"])));
 var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {

package/dist/ProfileButton/ProfileButton.js.map

@@ -1 +1 @@
-{"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';\r\nimport styled from 'styled-components';\r\nimport {COLORS, IconButton, Size} from '..';\r\nimport {IconButtonContent, StyledPrimaryIconButton} from '../Button/Iconbutton';\r\nimport {NotificationDot} from '../NotificationDot';\r\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\r\n\r\nexport type ProfileButtonProps = {\r\n  portraitSrc?: string;\r\n  icon?: React.ReactNode;\r\n  initials?: string;\r\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n  notificationVariant?: 'positive' | 'critical';\r\n  hideOnLowWidth?: boolean;\r\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\r\n\r\nconst PortraitOverlay = styled.div`\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 50%;\r\n  background-color: ${COLORS.black};\r\n  opacity: 0;\r\n  position: absolute;\r\n  top: 0px;\r\n  left: 0px;\r\n`;\r\n\r\nexport const ProfileButtonContainer = styled.div<{ hideOnLowWidth?: boolean }>`\r\n  width: 48px;\r\n  height: 48px;\r\n  display: inline;\r\n  user-select: none;\r\n  \r\n  ${StyledPrimaryIconButton} {\r\n    display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\r\n\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      display: inline;\r\n    }\r\n\r\n    :disabled {\r\n      img {\r\n        filter: grayscale(100%);\r\n      }\r\n\r\n      ${IconButtonContent} {\r\n        background-color: ${COLORS.neutral_100};\r\n\r\n        svg, svg path {\r\n          fill: ${COLORS.neutral_300};\r\n        }\r\n      }\r\n    }\r\n\r\n    :hover:not(:disabled):not(:active),\r\n    &.hover-state {\r\n      ${PortraitOverlay} {\r\n        opacity: 0.25;\r\n        transition: opacity 100ms ease-in-out;\r\n      }\r\n    }\r\n\r\n    :active:not(:disabled),\r\n    &.active-state {\r\n      ${PortraitOverlay} {\r\n        opacity: 0.5;\r\n        transition: opacity 0ms ease-in-out;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst NotificationContainer = styled.div`\r\n  position: absolute;\r\n  left: 30px;\r\n  bottom: 30px;\r\n`;\r\n\r\nconst ImageWrapper = styled.div`\r\n  width: 36px;\r\n  height: 36px;\r\n  position: relative;\r\n\r\n  img {\r\n    width: 100%;\r\n    height: 100%;\r\n    border-radius: 50%;\r\n    object-fit: cover;\r\n  }\r\n`;\r\n\r\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\r\n                                                                                 portraitSrc,\r\n                                                                                 icon,\r\n                                                                                 initials,\r\n                                                                                 onClick,\r\n                                                                                 hideOnLowWidth,\r\n                                                                                 disabled,\r\n                                                                                 notificationVariant,\r\n                                                                                 className,\r\n                                                                                 tabIndex,\r\n                                                                                 ...rest\r\n                                                                               }, ref) => {\r\n  const renderIcon = () => {\r\n    return (\r\n      (portraitSrc && (\r\n        <ImageWrapper>\r\n          <img src={portraitSrc}/>\r\n          <PortraitOverlay/>\r\n        </ImageWrapper>\r\n      )) ||\r\n      (initials && (\r\n        <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\r\n                    color={disabled ? COLORS.neutral_300 : COLORS.white}>\r\n          {initials}\r\n        </ComponentS>\r\n      )) || <>{icon}</>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <ProfileButtonContainer hideOnLowWidth={hideOnLowWidth}>\r\n      <IconButton ref={ref}\r\n                  className={className}\r\n                  disabled={disabled}\r\n                  action={onClick}\r\n                  variant=\"primary\"\r\n                  tabIndex={tabIndex}\r\n                  shape=\"circular\"\r\n                  hideOnLowWidth={hideOnLowWidth}\r\n                  {...rest}>\r\n        {renderIcon()}\r\n        {notificationVariant && (\r\n          <NotificationContainer>\r\n            <NotificationDot size={Size.Medium} variant={notificationVariant}/>\r\n          </NotificationContainer>\r\n        )}\r\n      </IconButton>\r\n    </ProfileButtonContainer>\r\n  );\r\n});\r\n\r\nexport default ProfileButton;\r\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,UAAU,EAAEC,IAAI,QAAO,IAAI;AAC3C,SAAQC,iBAAiB,EAAEC,uBAAuB,QAAO,sBAAsB;AAC/E,SAAQC,eAAe,QAAO,oBAAoB;AAClD,SAAQC,WAAW,EAAEC,UAAU,EAAEC,kBAAkB,QAAO,WAAW;AAAC;AAAA;AAAA;AAWtE,IAAMC,eAAe,GAAGV,MAAM,CAACW,GAAG,4NAIZV,MAAM,CAACW,KAAK,CAKjC;AAED,OAAO,IAAMC,sBAAsB,GAAGb,MAAM,CAACW,GAAG,gvBAM5CN,uBAAuB,EACZ,UAAAS,KAAK;EAAA,OAAKA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAC,EAE5DR,WAAW,CAACS,MAAM,EAShBZ,iBAAiB,EACGH,MAAM,CAACgB,WAAW,EAG5BhB,MAAM,CAACiB,WAAW,EAO5BR,eAAe,EAQfA,eAAe,CAMtB;AAED,IAAMS,qBAAqB,GAAGnB,MAAM,CAACW,GAAG,gIAIvC;AAED,IAAMS,YAAY,GAAGpB,MAAM,CAACW,GAAG,uOAW9B;AAED,IAAMU,aAAa,gBAAGtB,KAAK,CAACuB,UAAU,CAAwC,gBAWIC,GAAG,EAAK;EAAA,IAVTC,WAAW,QAAXA,WAAW;IACXC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPZ,cAAc,QAAdA,cAAc;IACda,QAAQ,QAARA,QAAQ;IACRC,mBAAmB,QAAnBA,mBAAmB;IACnBC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACLC,IAAI;EAEtF,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;IACvB,OACGT,WAAW,iBACV,MAAC,YAAY;MAAA,wBACX;QAAK,GAAG,EAAEA;MAAY,EAAE,eACxB,KAAC,eAAe,KAAE;IAAA,EAErB,IACAE,QAAQ,iBACP,KAAC,UAAU;MAAC,SAAS,EAAC,UAAU;MAAC,SAAS,EAAEjB,kBAAkB,CAACyB,IAAK;MACxD,KAAK,EAAEN,QAAQ,GAAG3B,MAAM,CAACiB,WAAW,GAAGjB,MAAM,CAACkC,KAAM;MAAA,UAC7DT;IAAQ,EAEX,iBAAI;MAAA,UAAGD;IAAI,EAAI;EAErB,CAAC;EAED,oBACE,KAAC,sBAAsB;IAAC,cAAc,EAAEV,cAAe;IAAA,uBACrD,MAAC,UAAU;MAAC,GAAG,EAAEQ,GAAI;MACT,SAAS,EAAEO,SAAU;MACrB,QAAQ,EAAEF,QAAS;MACnB,MAAM,EAAED,OAAQ;MAChB,OAAO,EAAC,SAAS;MACjB,QAAQ,EAAEI,QAAS;MACnB,KAAK,EAAC,UAAU;MAChB,cAAc,EAAEhB;IAAe,GAC3BiB,IAAI;MAAA,WACjBC,UAAU,EAAE,EACZJ,mBAAmB,iBAClB,KAAC,qBAAqB;QAAA,uBACpB,KAAC,eAAe;UAAC,IAAI,EAAE1B,IAAI,CAACiC,MAAO;UAAC,OAAO,EAAEP;QAAoB;MAAE,EAEtE;IAAA;EACU,EACU;AAE7B,CAAC,CAAC;AAAC;EApIDL,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,OAAO;EACPE,mBAAmB,aAAG,UAAU,EAAG,UAAU;EAC7Cd,cAAc;AAAA;AAiIhB,eAAeM,aAAa"}
+{"version":3,"file":"ProfileButton.js","names":["React","styled","COLORS","IconButton","Size","IconButtonContentStyles","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 {IconButtonContentStyles, 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      ${IconButtonContentStyles} {\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,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,UAAU,EAAEC,IAAI,QAAO,IAAI;AAC3C,SAAQC,uBAAuB,EAAEC,uBAAuB,QAAO,sBAAsB;AACrF,SAAQC,eAAe,QAAO,oBAAoB;AAClD,SAAQC,WAAW,EAAEC,UAAU,EAAEC,kBAAkB,QAAO,WAAW;AAAC;AAAA;AAAA;AAWtE,IAAMC,eAAe,GAAGV,MAAM,CAACW,GAAG,4NAIZV,MAAM,CAACW,KAAK,CAKjC;AAED,OAAO,IAAMC,sBAAsB,GAAGb,MAAM,CAACW,GAAG,gvBAM5CN,uBAAuB,EACZ,UAAAS,KAAK;EAAA,OAAKA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAC,EAE5DR,WAAW,CAACS,MAAM,EAShBZ,uBAAuB,EACHH,MAAM,CAACgB,WAAW,EAG5BhB,MAAM,CAACiB,WAAW,EAO5BR,eAAe,EAQfA,eAAe,CAMtB;AAED,IAAMS,qBAAqB,GAAGnB,MAAM,CAACW,GAAG,gIAIvC;AAED,IAAMS,YAAY,GAAGpB,MAAM,CAACW,GAAG,uOAW9B;AAED,IAAMU,aAAa,gBAAGtB,KAAK,CAACuB,UAAU,CAAwC,gBAWIC,GAAG,EAAK;EAAA,IAVTC,WAAW,QAAXA,WAAW;IACXC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPZ,cAAc,QAAdA,cAAc;IACda,QAAQ,QAARA,QAAQ;IACRC,mBAAmB,QAAnBA,mBAAmB;IACnBC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACLC,IAAI;EAEtF,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;IACvB,OACGT,WAAW,iBACV,MAAC,YAAY;MAAA,wBACX;QAAK,GAAG,EAAEA;MAAY,EAAE,eACxB,KAAC,eAAe,KAAE;IAAA,EAErB,IACAE,QAAQ,iBACP,KAAC,UAAU;MAAC,SAAS,EAAC,UAAU;MAAC,SAAS,EAAEjB,kBAAkB,CAACyB,IAAK;MACxD,KAAK,EAAEN,QAAQ,GAAG3B,MAAM,CAACiB,WAAW,GAAGjB,MAAM,CAACkC,KAAM;MAAA,UAC7DT;IAAQ,EAEX,iBAAI;MAAA,UAAGD;IAAI,EAAI;EAErB,CAAC;EAED,oBACE,KAAC,sBAAsB;IAAC,cAAc,EAAEV,cAAe;IAAA,uBACrD,MAAC,UAAU;MAAC,GAAG,EAAEQ,GAAI;MACT,SAAS,EAAEO,SAAU;MACrB,QAAQ,EAAEF,QAAS;MACnB,MAAM,EAAED,OAAQ;MAChB,OAAO,EAAC,SAAS;MACjB,QAAQ,EAAEI,QAAS;MACnB,KAAK,EAAC,UAAU;MAChB,cAAc,EAAEhB;IAAe,GAC3BiB,IAAI;MAAA,WACjBC,UAAU,EAAE,EACZJ,mBAAmB,iBAClB,KAAC,qBAAqB;QAAA,uBACpB,KAAC,eAAe;UAAC,IAAI,EAAE1B,IAAI,CAACiC,MAAO;UAAC,OAAO,EAAEP;QAAoB;MAAE,EAEtE;IAAA;EACU,EACU;AAE7B,CAAC,CAAC;AAAC;EApIDL,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,OAAO;EACPE,mBAAmB,aAAG,UAAU,EAAG,UAAU;EAC7Cd,cAAc;AAAA;AAiIhB,eAAeM,aAAa"}

package/dist/ProfileButton/index.d.ts

@@ -1 +1 @@
-export { default as ProfileButton } from './ProfileButton';
+export { default as ProfileButton } from './ProfileButton';

package/dist/QuizButton/QuizButton.cjs.map

@@ -1 +1 @@
-{"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';\r\nimport styled from 'styled-components';\r\nimport {Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, RadioButton, Size, SystemIcons} from '..';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nconst TextContainer = styled.div<{size: Size}>`\r\n  border-radius: 0 8px 8px 0;\r\n  display: flex;\r\n  background: ${COLORS.accent1_20};\r\n  width: 100%;\r\n\r\n  transition: background 100ms ease-in-out;\r\n  align-items: center;\r\n\r\n  padding: ${props=>props.size===Size.Small?'6px 8px':(props.size===Size.Large?'20px 16px':'12px 16px')};\r\n  ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Regular,null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Regular,null) : ComponentMStyling(ComponentTextStyle.Regular,null))}\r\n`;\r\n\r\nconst TextWrapper = styled.div<{size:Size}>``;\r\n\r\nconst ButtonContainer = styled.div<{size: Size}>`\r\n  border-radius: 8px 0 0 8px;\r\n  display: flex;\r\n  background: ${COLORS.accent1_100};\r\n\r\n  width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\r\n\r\n  transition: background 100ms ease-in-out;\r\n\r\n  .quiz-button-result-icon {\r\n    height: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\r\n    width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\r\n  }\r\n\r\n  .radio-button-icon, .checkbox-icon {\r\n    margin: auto;\r\n    min-width: unset;\r\n    background: transparent;\r\n\r\n    svg {\r\n      color: ${COLORS.accent1_600};\r\n    }\r\n\r\n    &:hover {\r\n      background: transparent;\r\n    }\r\n\r\n    &:active {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  .small {\r\n    min-width: 32px;\r\n    min-height: 32px;\r\n    .radio-button-icon, .checkbox-icon {\r\n      svg {\r\n        height: 16px;\r\n        width: 16px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .medium {\r\n    min-width: 48px;\r\n    min-height: 48px;\r\n    .radio-button-icon, .checkbox-icon {\r\n      svg {\r\n        height: 24px;\r\n        width: 24px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .large {\r\n    min-width: 64px;\r\n    min-height: 64px;\r\n    .radio-button-icon, .checkbox-icon {\r\n      svg {\r\n        height: 32px;\r\n        width: 32px;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst OptionContainer = styled.div<{isSelected:boolean, size:Size}>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  cursor: pointer;\r\n  max-width: 65ch;  \r\n  word-break: break-word;\r\n\r\n  min-height: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\r\n  margin-bottom: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\r\n\r\n  &.selected {\r\n    ${TextContainer} {\r\n      background: ${COLORS.accent1_100};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${COLORS.accent1_200};\r\n    }\r\n  }\r\n  \r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    \r\n    ${ButtonContainer} {\r\n      pointer-events: none;\r\n      background: ${COLORS.neutral_100};\r\n    }\r\n    ${TextContainer} {\r\n      pointer-events: none;\r\n      background: ${COLORS.neutral_20};\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  &.correct {\r\n    ${TextContainer} {    \r\n      background: ${COLORS.correct_20};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${COLORS.correct_400};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.incorrect {\r\n    ${TextContainer} {    \r\n      background: ${COLORS.critical_20};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${COLORS.critical_500};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.partial {\r\n    ${TextContainer} {    \r\n      background: ${COLORS.warning_20};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${COLORS.warning_400};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled):not(.result),\r\n  &.hover-state {\r\n    ${ButtonContainer} {\r\n      background: ${COLORS.accent1_300};\r\n    }\r\n    ${TextContainer} {\r\n      background: ${props=>props.isSelected ? COLORS.accent1_200  : COLORS.accent1_100};\r\n    }\r\n    \r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n      svg {\r\n        color: ${COLORS.accent1_700};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled):not(.result),\r\n  &.active-state {\r\n    ${ButtonContainer} {\r\n      background: ${COLORS.accent1_400};\r\n      transition: none;\r\n    }\r\n    ${TextContainer} {\r\n      background: ${props=>props.isSelected ? COLORS.accent1_300 : COLORS.accent1_200};\r\n      transition: none;\r\n    }\r\n\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n      svg {\r\n        color: ${COLORS.accent1_800};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst renderResultContent = (resultType: string) => {\r\n  switch(resultType){\r\n    case 'correct' : return <SystemIcons.CheckMark color={COLORS.white} className={'quiz-button-result-icon'}/>;\r\n\r\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\r\n\r\n    default : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\r\n  }\r\n};\r\n\r\ntype QuizButtonProps = {\r\n  resultType?: 'correct' | 'incorrect' | 'partial';\r\n  text: string;\r\n  onClick?: (arg:any)=>void;\r\n  id: string;\r\n  selected?: boolean;\r\n  disabled?: boolean;\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  type: 'radio' | 'checkbox';\r\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>\r\n\r\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({\r\n                                                                text,\r\n                                                                type,\r\n                                                                onClick,\r\n                                                                resultType,\r\n                                                                id,\r\n                                                                className,\r\n                                                                selected = false,\r\n                                                                disabled = false,\r\n                                                                size = Size.Medium,\r\n                                                                ...rest\r\n                                                              }) => {\r\n  return (   \r\n    <OptionContainer\r\n      onClick={onClick}\r\n      isSelected={selected}\r\n      tabIndex={(disabled || resultType) ? -1 : 0}\r\n      onMouseDown={defaultOnMouseDownHandler}\r\n      size={size}\r\n      className={'quiz-button '.concat(selected ? ' selected' : '')\r\n        .concat(disabled ? ' disabled' : '')\r\n        .concat(resultType ? ' result ' + resultType : '')\r\n        .concat(className ? ' ' + className : '')}\r\n      data-testid={'container'}\r\n      aria-checked={selected}\r\n      role={type === 'radio'? 'radio' : 'checkbox'}\r\n      {...rest}>\r\n        <ButtonContainer data-testid={'btnContainer'} className={'quiz-button-icon'} size={size}>\r\n          {\r\n            resultType ? renderResultContent(resultType) : (\r\n                                type==='radio' ? <RadioButton selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\r\n                                select={()=>{}} id={id}/> : <Checkbox selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\r\n                                select={()=>{}} id={id}/>\r\n                              )\r\n          }\r\n        </ButtonContainer>\r\n\r\n        <TextContainer data-testid={'txtContainer'} className={'quiz-button-text'} size={size}>\r\n          <TextWrapper size={size}>\r\n            {text}\r\n          </TextWrapper>\r\n        </TextContainer>\r\n    </OptionContainer>\r\n  );\r\n};\r\n\r\nexport default QuizButton;\r\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AAAmH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEnH,IAAMA,aAAa,GAAGC,yBAAM,CAACC,GAAG,+QAGhBC,QAAM,CAACC,UAAU,EAMpB,UAAAC,KAAK;EAAA,OAAEA,KAAK,CAACC,IAAI,KAAGC,MAAI,CAACC,KAAK,GAAC,SAAS,GAAEH,KAAK,CAACC,IAAI,KAAGC,MAAI,CAACE,KAAK,GAAC,WAAW,GAAC,WAAY;AAAA,GACnG,UAAAJ,KAAK;EAAA,OAAEA,KAAK,CAACC,IAAI,KAAGC,MAAI,CAACC,KAAK,GAAG,IAAAE,6BAAiB,EAACC,8BAAkB,CAACC,OAAO,EAAC,IAAI,CAAC,GAAIP,KAAK,CAACC,IAAI,KAAGC,MAAI,CAACE,KAAK,GAAG,IAAAI,6BAAiB,EAACF,8BAAkB,CAACC,OAAO,EAAC,IAAI,CAAC,GAAG,IAAAE,6BAAiB,EAACH,8BAAkB,CAACC,OAAO,EAAC,IAAI,CAAE;AAAA,EAC5N;AAED,IAAMG,WAAW,GAAGd,yBAAM,CAACC,GAAG,qFAAe;AAE7C,IAAMc,eAAe,GAAGf,yBAAM,CAACC,GAAG,slCAGlBC,QAAM,CAACc,WAAW,EAEvB,UAAAZ,KAAK;EAAA,OAAEA,KAAK,CAACC,IAAI,KAAGC,MAAI,CAACC,KAAK,GAAC,MAAM,GAAEH,KAAK,CAACC,IAAI,KAAGC,MAAI,CAACE,KAAK,GAAC,MAAM,GAAC,MAAO;AAAA,GAK1E,UAAAJ,KAAK;EAAA,OAAEA,KAAK,CAACC,IAAI,KAAGC,MAAI,CAACC,KAAK,GAAC,MAAM,GAAEH,KAAK,CAACC,IAAI,KAAGC,MAAI,CAACE,KAAK,GAAC,MAAM,GAAC,MAAO;AAAA,GAC9E,UAAAJ,KAAK;EAAA,OAAEA,KAAK,CAACC,IAAI,KAAGC,MAAI,CAACC,KAAK,GAAC,MAAM,GAAEH,KAAK,CAACC,IAAI,KAAGC,MAAI,CAACE,KAAK,GAAC,MAAM,GAAC,MAAO;AAAA,GAS3EN,QAAM,CAACe,WAAW,CA4ChC;AAED,IAAMC,eAAe,GAAGlB,yBAAM,CAACC,GAAG,ggEAOlB,UAAAG,KAAK;EAAA,OAAEA,KAAK,CAACC,IAAI,KAAGC,MAAI,CAACC,KAAK,GAAC,MAAM,GAAEH,KAAK,CAACC,IAAI,KAAGC,MAAI,CAACE,KAAK,GAAC,MAAM,GAAC,MAAO;AAAA,GAC1E,UAAAJ,KAAK;EAAA,OAAEA,KAAK,CAACC,IAAI,KAAGC,MAAI,CAACC,KAAK,GAAC,MAAM,GAAEH,KAAK,CAACC,IAAI,KAAGC,MAAI,CAACE,KAAK,GAAC,MAAM,GAAC,MAAO;AAAA,GAG1FT,aAAa,EACCG,QAAM,CAACc,WAAW,EAEhCD,eAAe,EACDb,QAAM,CAACiB,WAAW,EAOhCJ,eAAe,EAEDb,QAAM,CAACkB,WAAW,EAEhCrB,aAAa,EAECG,QAAM,CAACmB,UAAU,EACtBnB,QAAM,CAACoB,WAAW,EAS3BvB,aAAa,EACCG,QAAM,CAACqB,UAAU,EAE/BR,eAAe,EACDb,QAAM,CAACsB,WAAW,EAQhCzB,aAAa,EACCG,QAAM,CAACuB,WAAW,EAEhCV,eAAe,EACDb,QAAM,CAACwB,YAAY,EAQjC3B,aAAa,EACCG,QAAM,CAACyB,UAAU,EAE/BZ,eAAe,EACDb,QAAM,CAAC0B,WAAW,EAShCC,aAAW,EAmBXd,eAAe,EACDb,QAAM,CAAC4B,WAAW,EAEhC/B,aAAa,EACC,UAAAK,KAAK;EAAA,OAAEA,KAAK,CAAC2B,UAAU,GAAG7B,QAAM,CAACiB,WAAW,GAAIjB,QAAM,CAACc,WAAW;AAAA,GAMrEd,QAAM,CAAC8B,WAAW,EAO7BjB,eAAe,EACDb,QAAM,CAAC+B,WAAW,EAGhClC,aAAa,EACC,UAAAK,KAAK;EAAA,OAAEA,KAAK,CAAC2B,UAAU,GAAG7B,QAAM,CAAC4B,WAAW,GAAG5B,QAAM,CAACiB,WAAW;AAAA,GAOpEjB,QAAM,CAACgC,WAAW,CAIlC;AAED,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,CAAIC,UAAkB,EAAK;EAClD,QAAOA,UAAU;IACf,KAAK,SAAS;MAAG,oBAAO,qBAAC,aAAW,CAAC,SAAS;QAAC,KAAK,EAAElC,QAAM,CAACmC,KAAM;QAAC,SAAS,EAAE;MAA0B,EAAE;IAE3G,KAAK,WAAW;MAAG,oBAAO,qBAAC,aAAW,CAAC,KAAK;QAAC,KAAK,EAAEnC,QAAM,CAACmC,KAAM;QAAC,SAAS,EAAE;MAA0B,EAAE;IAEzG;MAAU,oBAAO,qBAAC,aAAW,CAAC,KAAK;QAAC,KAAK,EAAEnC,QAAM,CAACmC,KAAM;QAAC,SAAS,EAAE;MAA0B,EAAE;EAAC;AAErG,CAAC;AAaD,IAAMC,UAAoD,GAAG,SAAvDA,UAAoD,OAWU;EAAA,IAVJC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACPL,UAAU,QAAVA,UAAU;IACVM,EAAE,QAAFA,EAAE;IACFC,SAAS,QAATA,SAAS;IAAA,qBACTC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,qBAChBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,iBAChBxC,IAAI;IAAJA,IAAI,0BAAGC,MAAI,CAACwC,MAAM;IACfC,IAAI;EAErE,oBACE,sBAAC,eAAe;IACd,OAAO,EAAEN,OAAQ;IACjB,UAAU,EAAEG,QAAS;IACrB,QAAQ,EAAGC,QAAQ,IAAIT,UAAU,GAAI,CAAC,CAAC,GAAG,CAAE;IAC5C,WAAW,EAAEY,2BAA0B;IACvC,IAAI,EAAE3C,IAAK;IACX,SAAS,EAAE,cAAc,CAAC4C,MAAM,CAACL,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CAC1DK,MAAM,CAACJ,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CACnCI,MAAM,CAACb,UAAU,GAAG,UAAU,GAAGA,UAAU,GAAG,EAAE,CAAC,CACjDa,MAAM,CAACN,SAAS,GAAG,GAAG,GAAGA,SAAS,GAAG,EAAE,CAAE;IAC5C,eAAa,WAAY;IACzB,gBAAcC,QAAS;IACvB,IAAI,EAAEJ,IAAI,KAAK,OAAO,GAAE,OAAO,GAAG;EAAW,GACzCO,IAAI;IAAA,wBACN,qBAAC,eAAe;MAAC,eAAa,cAAe;MAAC,SAAS,EAAE,kBAAmB;MAAC,IAAI,EAAE1C,IAAK;MAAA,UAEpF+B,UAAU,GAAGD,mBAAmB,CAACC,UAAU,CAAC,GACxBI,IAAI,KAAG,OAAO,gBAAG,qBAAC,aAAW;QAAC,QAAQ,EAAEI,QAAS;QAAC,QAAQ,EAAEC,QAAS;QAAC,IAAI,EAAExC,IAAK;QAAC,WAAW,EAAE,CAAC,CAAE;QAClG,MAAM,EAAE,kBAAI,CAAC,CAAE;QAAC,EAAE,EAAEqC;MAAG,EAAE,gBAAG,qBAAC,UAAQ;QAAC,QAAQ,EAAEE,QAAS;QAAC,QAAQ,EAAEC,QAAS;QAAC,IAAI,EAAExC,IAAK;QAAC,WAAW,EAAE,CAAC,CAAE;QAC1G,MAAM,EAAE,kBAAI,CAAC,CAAE;QAAC,EAAE,EAAEqC;MAAG;IACxB,EAEL,eAElB,qBAAC,aAAa;MAAC,eAAa,cAAe;MAAC,SAAS,EAAE,kBAAmB;MAAC,IAAI,EAAErC,IAAK;MAAA,uBACpF,qBAAC,WAAW;QAAC,IAAI,EAAEA,IAAK;QAAA,UACrBkC;MAAI;IACO,EACA;EAAA,GACF;AAEtB,CAAC;AAAC;EAtDAH,UAAU,4BAAG,SAAS,EAAG,WAAW,EAAG,SAAS;EAChDG,IAAI;EACJE,OAAO;EACPC,EAAE;EACFE,QAAQ;EACRC,QAAQ;EAERL,IAAI,4BAAE,OAAO,EAAG,UAAU;AAAA;AAAA,eAiDbF,UAAU;AAAA"}
+{"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.d.ts

@@ -1,14 +1,14 @@
-import * as React from 'react';
-import { Size } from '..';
-type QuizButtonProps = {
-    resultType?: 'correct' | 'incorrect' | 'partial';
-    text: string;
-    onClick?: (arg: any) => void;
-    id: string;
-    selected?: boolean;
-    disabled?: boolean;
-    size?: Size.Small | Size.Medium | Size.Large;
-    type: 'radio' | 'checkbox';
-} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>;
-declare const QuizButton: React.FunctionComponent<QuizButtonProps>;
-export default QuizButton;
+import * as React from 'react';
+import { Size } from '..';
+type QuizButtonProps = {
+    resultType?: 'correct' | 'incorrect' | 'partial';
+    text: string;
+    onClick?: (arg: any) => void;
+    id: string;
+    selected?: boolean;
+    disabled?: boolean;
+    size?: Size.Small | Size.Medium | Size.Large;
+    type: 'radio' | 'checkbox';
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>;
+declare const QuizButton: React.FunctionComponent<QuizButtonProps>;
+export default QuizButton;

package/dist/QuizButton/QuizButton.js.map

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

@@ -1 +1 @@
-export { default as QuizButton } from './QuizButton';
+export { default as QuizButton } from './QuizButton';

package/dist/SegmentControl/SegmentControl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentControl.cjs","names":["SegmentControlItemContent","styled","div","COLORS","neutral_600","SegmentControlItemBackground","neutral_20","SegmentControlItemWrapper","focusStyles","Z_INDEXES","hover","primary_100","primary_700","active","primary_200","primary_800","neutral_300","primary_500","white","neutral_100","SegmentControlWrapper","ComponentSStyling","ComponentTextStyle","Bold","ComponentMStyling","SegmentControl","items","size","Size","Medium","onChange","selected","className","rest","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","map","a","i","content","undefined","defaultOnMouseDownHandler"],"sources":["../../src/SegmentControl/SegmentControl.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\n\r\nexport const SegmentControlItemContent = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n  border-radius: 8px;\r\n  padding: 0 16px;\r\n\r\n  background-color: transparent;\r\n  color: ${COLORS.neutral_600};\r\n`\r\n\r\nexport const SegmentControlItemBackground = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  background-color: ${COLORS.neutral_20};\r\n  padding: 4px 0px;\r\n`;\r\n\r\nexport const SegmentControlItemWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex: 1;\r\n  cursor: pointer;\r\n  min-height: 48px;\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover {\r\n    z-index: ${Z_INDEXES.hover};\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${COLORS.primary_100};\r\n      color: ${COLORS.primary_700};\r\n    }\r\n  }\r\n\r\n  &:active {\r\n    z-index: ${Z_INDEXES.active};\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${COLORS.primary_200};\r\n      color: ${COLORS.primary_800};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: transparent;\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n\r\n  &.selected {\r\n    cursor: default;\r\n    pointer-events: none;\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${COLORS.primary_500};\r\n      color: ${COLORS.white};\r\n    }\r\n  }\r\n\r\n  &.selected.disabled {\r\n    cursor: not-allowed;\r\n    pointer-events: unset;\r\n    \r\n    ${SegmentControlItemContent} {\r\n      background-color: ${COLORS.neutral_100};\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const SegmentControlWrapper = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  ${SegmentControlItemWrapper}:first-of-type {\r\n    ${SegmentControlItemBackground} {\r\n      border-bottom-left-radius: 12px;\r\n      border-top-left-radius: 12px;\r\n      padding-left: 4px;\r\n    }\r\n  }\r\n\r\n  ${SegmentControlItemWrapper}:last-of-type {\r\n    ${SegmentControlItemBackground} {\r\n      border-bottom-right-radius: 12px;\r\n      border-top-right-radius: 12px;\r\n      padding-right: 4px;\r\n    }\r\n  }\r\n\r\n\r\n  &.small {\r\n    ${SegmentControlItemContent} {\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n      min-height: 32px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${SegmentControlItemContent} {\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n      min-height: 40px;\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface SegmentControlItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  key: string\r\n  disabled?: boolean;\r\n  content: React.ReactNode | string;\r\n}\r\n\r\ninterface SegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\r\n  items: SegmentControlItem[];\r\n  selected: string;\r\n  onChange: (value: string) => void;\r\n  size?: Size.Small | Size.Medium;\r\n}\r\n\r\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\r\n                                                                        items,\r\n                                                                        size = Size.Medium,\r\n                                                                        onChange,\r\n                                                                        selected,\r\n                                                                        className,\r\n                                                                        ...rest\r\n                                                                      }) => {\r\n  const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      //@ts-ignore\r\n      document?.activeElement?.blur();\r\n      !item.disabled && onChange(item.key);\r\n    }\r\n  };\r\n\r\n  const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\r\n    !item.disabled && onChange(item.key);\r\n  }\r\n\r\n  return (\r\n    <SegmentControlWrapper className={`${size} ${className || ''}`} {...rest}>\r\n      {items.map((a, i) => {\r\n        const {key, disabled, content, className, ...rest} = a;\r\n        return <SegmentControlItemWrapper key={a.key || i}\r\n                                          className={(className || '') + (a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\r\n                                          tabIndex={a.disabled || a.key === selected ? -1 : 0}\r\n                                          onClick={a.disabled ? undefined : (e) => onClick(e, a)}\r\n                                          onMouseDown={defaultOnMouseDownHandler}\r\n                                          onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}\r\n                                          {...rest}>\r\n          <SegmentControlItemBackground>\r\n            <SegmentControlItemContent>\r\n              {a.content}\r\n            </SegmentControlItemContent>\r\n          </SegmentControlItemBackground>\r\n        </SegmentControlItemWrapper>;\r\n      })\r\n      }\r\n    </SegmentControlWrapper>\r\n  );\r\n};\r\n\r\nexport default SegmentControl;\r\n"],"mappings":"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"}
+{"version":3,"file":"SegmentControl.cjs","names":["SegmentControlItemContent","styled","div","COLORS","neutral_600","SegmentControlItemBackground","neutral_20","SegmentControlItemWrapper","focusStyles","Z_INDEXES","hover","primary_100","primary_700","active","primary_200","primary_800","neutral_300","primary_500","white","neutral_100","SegmentControlWrapper","ComponentSStyling","ComponentTextStyle","Bold","ComponentMStyling","SegmentControl","items","size","Size","Medium","onChange","selected","className","rest","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","map","a","i","content","undefined","defaultOnMouseDownHandler"],"sources":["../../src/SegmentControl/SegmentControl.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\nexport const SegmentControlItemContent = styled.div`\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: ${COLORS.neutral_600};\n`\n\nexport const SegmentControlItemBackground = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${COLORS.neutral_20};\n  padding: 4px 0px;\n`;\n\nexport const SegmentControlItemWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  cursor: pointer;\n  min-height: 48px;\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n\n    ${SegmentControlItemContent} {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n\n    ${SegmentControlItemContent} {\n      background-color: ${COLORS.primary_200};\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ${SegmentControlItemContent} {\n      background-color: transparent;\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.selected {\n    cursor: default;\n    pointer-events: none;\n\n    ${SegmentControlItemContent} {\n      background-color: ${COLORS.primary_500};\n      color: ${COLORS.white};\n    }\n  }\n\n  &.selected.disabled {\n    cursor: not-allowed;\n    pointer-events: unset;\n    \n    ${SegmentControlItemContent} {\n      background-color: ${COLORS.neutral_100};\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport const SegmentControlWrapper = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  ${SegmentControlItemWrapper}:first-of-type {\n    ${SegmentControlItemBackground} {\n      border-bottom-left-radius: 12px;\n      border-top-left-radius: 12px;\n      padding-left: 4px;\n    }\n  }\n\n  ${SegmentControlItemWrapper}:last-of-type {\n    ${SegmentControlItemBackground} {\n      border-bottom-right-radius: 12px;\n      border-top-right-radius: 12px;\n      padding-right: 4px;\n    }\n  }\n\n\n  &.small {\n    ${SegmentControlItemContent} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n      min-height: 32px;\n    }\n  }\n\n  &.medium {\n    ${SegmentControlItemContent} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      min-height: 40px;\n    }\n  }\n`;\n\n\nexport interface SegmentControlItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\n  key: string\n  disabled?: boolean;\n  content: React.ReactNode | string;\n}\n\ninterface SegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  items: SegmentControlItem[];\n  selected: string;\n  onChange: (value: string) => void;\n  size?: Size.Small | Size.Medium;\n}\n\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\n                                                                        items,\n                                                                        size = Size.Medium,\n                                                                        onChange,\n                                                                        selected,\n                                                                        className,\n                                                                        ...rest\n                                                                      }) => {\n  const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      //@ts-ignore\n      document?.activeElement?.blur();\n      !item.disabled && onChange(item.key);\n    }\n  };\n\n  const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\n    !item.disabled && onChange(item.key);\n  }\n\n  return (\n    <SegmentControlWrapper className={`${size} ${className || ''}`} {...rest}>\n      {items.map((a, i) => {\n        const {key, disabled, content, className, ...rest} = a;\n        return <SegmentControlItemWrapper key={a.key || i}\n                                          className={(className || '') + (a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\n                                          tabIndex={a.disabled || a.key === selected ? -1 : 0}\n                                          onClick={a.disabled ? undefined : (e) => onClick(e, a)}\n                                          onMouseDown={defaultOnMouseDownHandler}\n                                          onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}\n                                          {...rest}>\n          <SegmentControlItemBackground>\n            <SegmentControlItemContent>\n              {a.content}\n            </SegmentControlItemContent>\n          </SegmentControlItemBackground>\n        </SegmentControlItemWrapper>;\n      })\n      }\n    </SegmentControlWrapper>\n  );\n};\n\nexport default SegmentControl;\n"],"mappings":"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"}

package/dist/SegmentControl/SegmentControl.d.ts

@@ -1,19 +1,19 @@
-import React from 'react';
-import { Size } from '../types';
-export declare const SegmentControlItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SegmentControlItemBackground: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SegmentControlItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SegmentControlWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export interface SegmentControlItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {
-    key: string;
-    disabled?: boolean;
-    content: React.ReactNode | string;
-}
-interface SegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
-    items: SegmentControlItem[];
-    selected: string;
-    onChange: (value: string) => void;
-    size?: Size.Small | Size.Medium;
-}
-declare const SegmentControl: React.FunctionComponent<SegmentControlProps>;
-export default SegmentControl;
+import React from 'react';
+import { Size } from '../types';
+export declare const SegmentControlItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SegmentControlItemBackground: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SegmentControlItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SegmentControlWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export interface SegmentControlItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {
+    key: string;
+    disabled?: boolean;
+    content: React.ReactNode | string;
+}
+interface SegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    items: SegmentControlItem[];
+    selected: string;
+    onChange: (value: string) => void;
+    size?: Size.Small | Size.Medium;
+}
+declare const SegmentControl: React.FunctionComponent<SegmentControlProps>;
+export default SegmentControl;