@laerdal/life-react-components 5.1.0 → 6.0.0-dev.1

package/dist/QuizButton/QuizButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"QuizButton.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_","_typography","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","TextContainer","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","$size","Size","Small","Large","ComponentSStyling","ComponentTextStyle","Regular","ComponentLStyling","ComponentMStyling","TextWrapper","ButtonContainer","OptionContainer","focusStyles","$isSelected","renderResultContent","resultType","jsx","SystemIcons","CheckMark","color","className","Close","QuizButton","_ref","text","type","onClick","id","selected","disabled","size","Medium","rest","_objectWithoutProperties2","useTheme","jsxs","tabIndex","onMouseDown","defaultOnMouseDownHandler","concat","role","children","RadioButton","tabIndexVal","select","Checkbox","propTypes","_propTypes","oneOf","string","isRequired","func","bool","_default","exports"],"sources":["../../src/QuizButton/QuizButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } 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: ${props => COLORS.getColor('accent1_20', props.theme)};\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: ${props => COLORS.getColor('accent1_100', props.theme)};\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: ${props => COLORS.getColor('accent1_600', props.theme)};\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: ${props => COLORS.getColor('accent1_100', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('accent1_200', props.theme)};\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: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    }\r\n    ${TextContainer} {\r\n      pointer-events: none;\r\n      background: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\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: ${props => COLORS.getColor('correct_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('correct_400', props.theme)};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.incorrect {\r\n    ${TextContainer} {    \r\n      background: ${props => COLORS.getColor('critical_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('critical_500', props.theme)};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.partial {\r\n    ${TextContainer} {    \r\n      background: ${props => COLORS.getColor('warning_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('warning_400', props.theme)};\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: ${props => COLORS.getColor('accent1_300', props.theme)};\r\n    }\r\n    ${TextContainer} {\r\n      background: ${props=>props.$isSelected ? COLORS.getColor('accent1_200', props.theme)  : COLORS.getColor('accent1_100', props.theme)};\r\n    }\r\n    \r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n      svg {\r\n        color: ${props => COLORS.getColor('accent1_700', props.theme)};\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: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n      transition: none;\r\n    }\r\n    ${TextContainer} {\r\n      background: ${props=>props.$isSelected ? COLORS.getColor('accent1_300', props.theme) : COLORS.getColor('accent1_200', props.theme)};\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: ${props => COLORS.getColor('accent1_800', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst renderResultContent = (resultType: string, theme: any) => {\r\n  switch(resultType){\r\n    case 'correct' : return <SystemIcons.CheckMark color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n\r\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n\r\n    default : return <SystemIcons.Close color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n  }\r\n};\r\n\r\nexport type QuizButtonProps = {\r\n  /**\r\n   * Optional. The result type of the quiz button. Can be 'correct', 'incorrect', or 'partial'.\r\n   */\r\n  resultType?: 'correct' | 'incorrect' | 'partial';\r\n\r\n  /**\r\n   * Required. The text to be displayed on the quiz button.\r\n   */\r\n  text: string;\r\n\r\n  /**\r\n   * Optional. A function to be called when the quiz button is clicked.\r\n   */\r\n  onClick?: (arg:any)=>void;\r\n\r\n  /**\r\n   * Required. The ID of the quiz button.\r\n   */\r\n  id: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the quiz button is selected.\r\n   */\r\n  selected?: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the quiz button is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Optional. The size of the quiz button. Can be 'Small', 'Medium', or 'Large'.\r\n   */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n\r\n  /**\r\n   * Required. The type of the quiz button. Can be 'radio' or 'checkbox'.\r\n   */\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\r\n  const theme = useTheme();\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, theme) : (\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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","ignoreList":[]}
+{"version":3,"file":"QuizButton.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_","_typography","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","TextContainer","styled","div","props","COLORS","getColor","theme","$size","Size","Small","Large","ComponentSStyling","ComponentTextStyle","Regular","ComponentLStyling","ComponentMStyling","TextWrapper","ButtonContainer","OptionContainer","focusStyles","$isSelected","renderResultContent","resultType","jsx","SystemIcons","CheckMark","color","className","Close","QuizButton","_ref","text","type","onClick","id","selected","disabled","size","Medium","rest","_objectWithoutProperties2","useTheme","jsxs","tabIndex","onMouseDown","defaultOnMouseDownHandler","concat","role","children","RadioButton","tabIndexVal","select","Checkbox","propTypes","_propTypes","oneOf","string","isRequired","func","bool","_default","exports"],"sources":["../../src/QuizButton/QuizButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } 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: ${props => COLORS.getColor('accent1_20', props.theme)};\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: ${props => COLORS.getColor('accent1_100', props.theme)};\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: ${props => COLORS.getColor('accent1_600', props.theme)};\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: ${props => COLORS.getColor('accent1_100', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('accent1_200', props.theme)};\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: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    }\r\n    ${TextContainer} {\r\n      pointer-events: none;\r\n      background: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\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: ${props => COLORS.getColor('correct_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('correct_400', props.theme)};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.incorrect {\r\n    ${TextContainer} {    \r\n      background: ${props => COLORS.getColor('critical_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('critical_500', props.theme)};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.partial {\r\n    ${TextContainer} {    \r\n      background: ${props => COLORS.getColor('warning_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('warning_400', props.theme)};\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: ${props => COLORS.getColor('accent1_300', props.theme)};\r\n    }\r\n    ${TextContainer} {\r\n      background: ${props=>props.$isSelected ? COLORS.getColor('accent1_200', props.theme)  : COLORS.getColor('accent1_100', props.theme)};\r\n    }\r\n    \r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n      svg {\r\n        color: ${props => COLORS.getColor('accent1_700', props.theme)};\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: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n      transition: none;\r\n    }\r\n    ${TextContainer} {\r\n      background: ${props=>props.$isSelected ? COLORS.getColor('accent1_300', props.theme) : COLORS.getColor('accent1_200', props.theme)};\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: ${props => COLORS.getColor('accent1_800', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst renderResultContent = (resultType: string, theme: any) => {\r\n  switch(resultType){\r\n    case 'correct' : return <SystemIcons.CheckMark color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n\r\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n\r\n    default : return <SystemIcons.Close color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n  }\r\n};\r\n\r\nexport type QuizButtonProps = {\r\n  /**\r\n   * Optional. The result type of the quiz button. Can be 'correct', 'incorrect', or 'partial'.\r\n   */\r\n  resultType?: 'correct' | 'incorrect' | 'partial';\r\n\r\n  /**\r\n   * Required. The text to be displayed on the quiz button.\r\n   */\r\n  text: string;\r\n\r\n  /**\r\n   * Optional. A function to be called when the quiz button is clicked.\r\n   */\r\n  onClick?: (arg:any)=>void;\r\n\r\n  /**\r\n   * Required. The ID of the quiz button.\r\n   */\r\n  id: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the quiz button is selected.\r\n   */\r\n  selected?: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the quiz button is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Optional. The size of the quiz button. Can be 'Small', 'Medium', or 'Large'.\r\n   */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n\r\n  /**\r\n   * Required. The type of the quiz button. Can be 'radio' or 'checkbox'.\r\n   */\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\r\n  const theme = useTheme();\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, theme) : (\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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","ignoreList":[]}

package/dist/QuizButton/QuizButton.d.ts

@@ -1,38 +1,38 @@
-import * as React from 'react';
-import { Size } from '..';
-export type QuizButtonProps = {
-    /**
-     * Optional. The result type of the quiz button. Can be 'correct', 'incorrect', or 'partial'.
-     */
-    resultType?: 'correct' | 'incorrect' | 'partial';
-    /**
-     * Required. The text to be displayed on the quiz button.
-     */
-    text: string;
-    /**
-     * Optional. A function to be called when the quiz button is clicked.
-     */
-    onClick?: (arg: any) => void;
-    /**
-     * Required. The ID of the quiz button.
-     */
-    id: string;
-    /**
-     * Optional. A boolean indicating whether the quiz button is selected.
-     */
-    selected?: boolean;
-    /**
-     * Optional. A boolean indicating whether the quiz button is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Optional. The size of the quiz button. Can be 'Small', 'Medium', or 'Large'.
-     */
-    size?: Size.Small | Size.Medium | Size.Large;
-    /**
-     * Required. The type of the quiz button. Can be 'radio' or 'checkbox'.
-     */
-    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 '..';
+export type QuizButtonProps = {
+    /**
+     * Optional. The result type of the quiz button. Can be 'correct', 'incorrect', or 'partial'.
+     */
+    resultType?: 'correct' | 'incorrect' | 'partial';
+    /**
+     * Required. The text to be displayed on the quiz button.
+     */
+    text: string;
+    /**
+     * Optional. A function to be called when the quiz button is clicked.
+     */
+    onClick?: (arg: any) => void;
+    /**
+     * Required. The ID of the quiz button.
+     */
+    id: string;
+    /**
+     * Optional. A boolean indicating whether the quiz button is selected.
+     */
+    selected?: boolean;
+    /**
+     * Optional. A boolean indicating whether the quiz button is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Optional. The size of the quiz button. Can be 'Small', 'Medium', or 'Large'.
+     */
+    size?: Size.Small | Size.Medium | Size.Large;
+    /**
+     * Required. The type of the quiz button. Can be 'radio' or 'checkbox'.
+     */
+    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

@@ -1,9 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 const _excluded = ["text", "type", "onClick", "resultType", "id", "className", "selected", "disabled", "size"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import * as React from 'react';
@@ -11,10 +9,212 @@ import styled, { useTheme } from 'styled-components';
 import { Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, RadioButton, Size, SystemIcons } from '..';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const TextContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 0 8px 8px 0;\n  display: flex;\n  background: ", ";\n  width: 100%;\n\n  transition: background 100ms ease-in-out;\n  align-items: center;\n\n  padding: ", ";\n  ", "\n"])), props => COLORS.getColor('accent1_20', props.theme), props => props.$size === Size.Small ? '6px 8px' : props.$size === Size.Large ? '20px 16px' : '12px 16px', props => props.$size === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, null) : props.$size === Size.Large ? ComponentLStyling(ComponentTextStyle.Regular, null) : ComponentMStyling(ComponentTextStyle.Regular, null));
-const TextWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
-const ButtonContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border-radius: 8px 0 0 8px;\n  display: flex;\n  background: ", ";\n\n  width: ", ";\n\n  transition: background 100ms ease-in-out;\n\n  .quiz-button-result-icon {\n    height: ", ";\n    width: ", ";\n  }\n\n  .radio-button-icon, .checkbox-icon {\n    margin: auto;\n    min-width: unset;\n    background: transparent;\n\n    svg {\n      color: ", ";\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"])), props => COLORS.getColor('accent1_100', props.theme), props => props.$size === Size.Small ? '32px' : props.$size === Size.Large ? '64px' : '48px', props => props.$size === Size.Small ? '16px' : props.$size === Size.Large ? '32px' : '24px', props => props.$size === Size.Small ? '32px' : props.$size === Size.Large ? '64px' : '48px', props => COLORS.getColor('accent1_600', props.theme));
-const OptionContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  max-width: 65ch;  \n  word-break: break-word;\n\n  min-height: ", ";\n  margin-bottom: ", ";\n\n  &.selected {\n    ", " {\n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    ", " {\n      pointer-events: none;\n      background: ", ";\n    }\n    ", " {\n      pointer-events: none;\n      background: ", ";\n      color: ", ";\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &.correct {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    ", "\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    ", " {\n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:active:not(.disabled):not(.result),\n  &.active-state {\n    ", " {\n      background: ", ";\n      transition: none;\n    }\n    ", " {\n      background: ", ";\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ", ";\n      }\n    }\n  }\n"])), props => props.$size === Size.Small ? '32px' : props.$size === Size.Large ? '64px' : '48px', props => props.$size === Size.Small ? '16px' : props.$size === Size.Large ? '32px' : '24px', TextContainer, props => COLORS.getColor('accent1_100', props.theme), ButtonContainer, props => COLORS.getColor('accent1_200', props.theme), ButtonContainer, props => COLORS.getColor('neutral_100', props.theme), TextContainer, props => COLORS.getColor('neutral_20', props.theme), props => COLORS.getColor('neutral_300', props.theme), TextContainer, props => COLORS.getColor('correct_20', props.theme), ButtonContainer, props => COLORS.getColor('correct_400', props.theme), TextContainer, props => COLORS.getColor('critical_20', props.theme), ButtonContainer, props => COLORS.getColor('critical_500', props.theme), TextContainer, props => COLORS.getColor('warning_20', props.theme), ButtonContainer, props => COLORS.getColor('warning_400', props.theme), focusStyles, ButtonContainer, props => COLORS.getColor('accent1_300', props.theme), TextContainer, props => props.$isSelected ? COLORS.getColor('accent1_200', props.theme) : COLORS.getColor('accent1_100', props.theme), props => COLORS.getColor('accent1_700', props.theme), ButtonContainer, props => COLORS.getColor('accent1_400', props.theme), TextContainer, props => props.$isSelected ? COLORS.getColor('accent1_300', props.theme) : COLORS.getColor('accent1_200', props.theme), props => COLORS.getColor('accent1_800', props.theme));
+const TextContainer = styled.div`
+  border-radius: 0 8px 8px 0;
+  display: flex;
+  background: ${props => COLORS.getColor('accent1_20', props.theme)};
+  width: 100%;
+
+  transition: background 100ms ease-in-out;
+  align-items: center;
+
+  padding: ${props => props.$size === Size.Small ? '6px 8px' : props.$size === Size.Large ? '20px 16px' : '12px 16px'};
+  ${props => props.$size === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, null) : props.$size === Size.Large ? ComponentLStyling(ComponentTextStyle.Regular, null) : ComponentMStyling(ComponentTextStyle.Regular, null)}
+`;
+const TextWrapper = styled.div``;
+const ButtonContainer = styled.div`
+  border-radius: 8px 0 0 8px;
+  display: flex;
+  background: ${props => COLORS.getColor('accent1_100', props.theme)};
+
+  width: ${props => props.$size === Size.Small ? '32px' : props.$size === Size.Large ? '64px' : '48px'};
+
+  transition: background 100ms ease-in-out;
+
+  .quiz-button-result-icon {
+    height: ${props => props.$size === Size.Small ? '16px' : props.$size === Size.Large ? '32px' : '24px'};
+    width: ${props => props.$size === Size.Small ? '32px' : props.$size === Size.Large ? '64px' : '48px'};
+  }
+
+  .radio-button-icon, .checkbox-icon {
+    margin: auto;
+    min-width: unset;
+    background: transparent;
+
+    svg {
+      color: ${props => COLORS.getColor('accent1_600', props.theme)};
+    }
+
+    &:hover {
+      background: transparent;
+    }
+
+    &:active {
+      background: transparent;
+    }
+  }
+
+  .small {
+    min-width: 32px;
+    min-height: 32px;
+    .radio-button-icon, .checkbox-icon {
+      svg {
+        height: 16px;
+        width: 16px;
+      }
+    }
+  }
+
+  .medium {
+    min-width: 48px;
+    min-height: 48px;
+    .radio-button-icon, .checkbox-icon {
+      svg {
+        height: 24px;
+        width: 24px;
+      }
+    }
+  }
+
+  .large {
+    min-width: 64px;
+    min-height: 64px;
+    .radio-button-icon, .checkbox-icon {
+      svg {
+        height: 32px;
+        width: 32px;
+      }
+    }
+  }
+`;
+const OptionContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+  max-width: 65ch;  
+  word-break: break-word;
+
+  min-height: ${props => props.$size === Size.Small ? '32px' : props.$size === Size.Large ? '64px' : '48px'};
+  margin-bottom: ${props => props.$size === Size.Small ? '16px' : props.$size === Size.Large ? '32px' : '24px'};
+
+  &.selected {
+    ${TextContainer} {
+      background: ${props => COLORS.getColor('accent1_100', props.theme)};
+    }
+    ${ButtonContainer} {
+      background: ${props => COLORS.getColor('accent1_200', props.theme)};
+    }
+  }
+  
+  &.disabled {
+    cursor: not-allowed;
+    
+    ${ButtonContainer} {
+      pointer-events: none;
+      background: ${props => COLORS.getColor('neutral_100', props.theme)};
+    }
+    ${TextContainer} {
+      pointer-events: none;
+      background: ${props => COLORS.getColor('neutral_20', props.theme)};
+      color: ${props => COLORS.getColor('neutral_300', props.theme)};
+    }
+
+    .radio-button-icon, .checkbox-icon {
+      background: transparent;
+    }
+  }
+
+  &.correct {
+    ${TextContainer} {    
+      background: ${props => COLORS.getColor('correct_20', props.theme)};
+    }
+    ${ButtonContainer} {
+      background: ${props => COLORS.getColor('correct_400', props.theme)};
+      svg {
+        margin: auto;
+      }
+    }
+  }
+
+  &.incorrect {
+    ${TextContainer} {    
+      background: ${props => COLORS.getColor('critical_20', props.theme)};
+    }
+    ${ButtonContainer} {
+      background: ${props => COLORS.getColor('critical_500', props.theme)};
+      svg {
+        margin: auto;
+      }
+    }
+  }
+
+  &.partial {
+    ${TextContainer} {    
+      background: ${props => COLORS.getColor('warning_20', props.theme)};
+    }
+    ${ButtonContainer} {
+      background: ${props => COLORS.getColor('warning_400', props.theme)};
+      svg {
+        margin: auto;
+      }
+    }
+  }
+
+  &:focus,
+  &.focus-state {
+    ${focusStyles}
+  }
+
+  &:hover,
+  &.hover-state {
+    .radio-button-icon, .checkbox-icon {
+      background: transparent;
+    }
+  }
+
+  &:active,
+  &.active-state {
+    .radio-button-icon, .checkbox-icon {
+      background: transparent;
+    }
+  }
+
+  &:hover:not(.disabled):not(.result),
+  &.hover-state {
+    ${ButtonContainer} {
+      background: ${props => COLORS.getColor('accent1_300', props.theme)};
+    }
+    ${TextContainer} {
+      background: ${props => props.$isSelected ? COLORS.getColor('accent1_200', props.theme) : COLORS.getColor('accent1_100', props.theme)};
+    }
+    
+    .radio-button-icon, .checkbox-icon {
+      background: transparent;
+      svg {
+        color: ${props => COLORS.getColor('accent1_700', props.theme)};
+      }
+    }
+  }
+
+  &:active:not(.disabled):not(.result),
+  &.active-state {
+    ${ButtonContainer} {
+      background: ${props => COLORS.getColor('accent1_400', props.theme)};
+      transition: none;
+    }
+    ${TextContainer} {
+      background: ${props => props.$isSelected ? COLORS.getColor('accent1_300', props.theme) : COLORS.getColor('accent1_200', props.theme)};
+      transition: none;
+    }
+
+    .radio-button-icon, .checkbox-icon {
+      background: transparent;
+      svg {
+        color: ${props => COLORS.getColor('accent1_800', props.theme)};
+      }
+    }
+  }
+`;
 const renderResultContent = (resultType, theme) => {
   switch (resultType) {
     case 'correct':

package/dist/QuizButton/QuizButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuizButton.js","names":["React","styled","useTheme","Checkbox","COLORS","defaultOnMouseDownHandler","focusStyles","RadioButton","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","jsx","_jsx","jsxs","_jsxs","TextContainer","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","$size","Small","Large","Regular","TextWrapper","_templateObject2","ButtonContainer","_templateObject3","OptionContainer","_templateObject4","$isSelected","renderResultContent","resultType","CheckMark","color","className","Close","QuizButton","_ref","text","type","onClick","id","selected","disabled","size","Medium","rest","_objectWithoutProperties","_excluded","_objectSpread","tabIndex","onMouseDown","concat","role","children","tabIndexVal","select","propTypes","_pt","oneOf","string","isRequired","func","bool"],"sources":["../../src/QuizButton/QuizButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } 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: ${props => COLORS.getColor('accent1_20', props.theme)};\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: ${props => COLORS.getColor('accent1_100', props.theme)};\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: ${props => COLORS.getColor('accent1_600', props.theme)};\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: ${props => COLORS.getColor('accent1_100', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('accent1_200', props.theme)};\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: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    }\r\n    ${TextContainer} {\r\n      pointer-events: none;\r\n      background: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\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: ${props => COLORS.getColor('correct_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('correct_400', props.theme)};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.incorrect {\r\n    ${TextContainer} {    \r\n      background: ${props => COLORS.getColor('critical_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('critical_500', props.theme)};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.partial {\r\n    ${TextContainer} {    \r\n      background: ${props => COLORS.getColor('warning_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('warning_400', props.theme)};\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: ${props => COLORS.getColor('accent1_300', props.theme)};\r\n    }\r\n    ${TextContainer} {\r\n      background: ${props=>props.$isSelected ? COLORS.getColor('accent1_200', props.theme)  : COLORS.getColor('accent1_100', props.theme)};\r\n    }\r\n    \r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n      svg {\r\n        color: ${props => COLORS.getColor('accent1_700', props.theme)};\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: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n      transition: none;\r\n    }\r\n    ${TextContainer} {\r\n      background: ${props=>props.$isSelected ? COLORS.getColor('accent1_300', props.theme) : COLORS.getColor('accent1_200', props.theme)};\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: ${props => COLORS.getColor('accent1_800', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst renderResultContent = (resultType: string, theme: any) => {\r\n  switch(resultType){\r\n    case 'correct' : return <SystemIcons.CheckMark color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n\r\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n\r\n    default : return <SystemIcons.Close color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n  }\r\n};\r\n\r\nexport type QuizButtonProps = {\r\n  /**\r\n   * Optional. The result type of the quiz button. Can be 'correct', 'incorrect', or 'partial'.\r\n   */\r\n  resultType?: 'correct' | 'incorrect' | 'partial';\r\n\r\n  /**\r\n   * Required. The text to be displayed on the quiz button.\r\n   */\r\n  text: string;\r\n\r\n  /**\r\n   * Optional. A function to be called when the quiz button is clicked.\r\n   */\r\n  onClick?: (arg:any)=>void;\r\n\r\n  /**\r\n   * Required. The ID of the quiz button.\r\n   */\r\n  id: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the quiz button is selected.\r\n   */\r\n  selected?: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the quiz button is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Optional. The size of the quiz button. Can be 'Small', 'Medium', or 'Large'.\r\n   */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n\r\n  /**\r\n   * Required. The type of the quiz button. Can be 'radio' or 'checkbox'.\r\n   */\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\r\n  const theme = useTheme();\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, theme) : (\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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","ignoreList":[]}
+{"version":3,"file":"QuizButton.js","names":["React","styled","useTheme","Checkbox","COLORS","defaultOnMouseDownHandler","focusStyles","RadioButton","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","jsx","_jsx","jsxs","_jsxs","TextContainer","div","props","getColor","theme","$size","Small","Large","Regular","TextWrapper","ButtonContainer","OptionContainer","$isSelected","renderResultContent","resultType","CheckMark","color","className","Close","QuizButton","_ref","text","type","onClick","id","selected","disabled","size","Medium","rest","_objectWithoutProperties","_excluded","_objectSpread","tabIndex","onMouseDown","concat","role","children","tabIndexVal","select","propTypes","_pt","oneOf","string","isRequired","func","bool"],"sources":["../../src/QuizButton/QuizButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } 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: ${props => COLORS.getColor('accent1_20', props.theme)};\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: ${props => COLORS.getColor('accent1_100', props.theme)};\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: ${props => COLORS.getColor('accent1_600', props.theme)};\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: ${props => COLORS.getColor('accent1_100', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('accent1_200', props.theme)};\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: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    }\r\n    ${TextContainer} {\r\n      pointer-events: none;\r\n      background: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\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: ${props => COLORS.getColor('correct_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('correct_400', props.theme)};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.incorrect {\r\n    ${TextContainer} {    \r\n      background: ${props => COLORS.getColor('critical_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('critical_500', props.theme)};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.partial {\r\n    ${TextContainer} {    \r\n      background: ${props => COLORS.getColor('warning_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('warning_400', props.theme)};\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: ${props => COLORS.getColor('accent1_300', props.theme)};\r\n    }\r\n    ${TextContainer} {\r\n      background: ${props=>props.$isSelected ? COLORS.getColor('accent1_200', props.theme)  : COLORS.getColor('accent1_100', props.theme)};\r\n    }\r\n    \r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n      svg {\r\n        color: ${props => COLORS.getColor('accent1_700', props.theme)};\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: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n      transition: none;\r\n    }\r\n    ${TextContainer} {\r\n      background: ${props=>props.$isSelected ? COLORS.getColor('accent1_300', props.theme) : COLORS.getColor('accent1_200', props.theme)};\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: ${props => COLORS.getColor('accent1_800', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst renderResultContent = (resultType: string, theme: any) => {\r\n  switch(resultType){\r\n    case 'correct' : return <SystemIcons.CheckMark color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n\r\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n\r\n    default : return <SystemIcons.Close color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n  }\r\n};\r\n\r\nexport type QuizButtonProps = {\r\n  /**\r\n   * Optional. The result type of the quiz button. Can be 'correct', 'incorrect', or 'partial'.\r\n   */\r\n  resultType?: 'correct' | 'incorrect' | 'partial';\r\n\r\n  /**\r\n   * Required. The text to be displayed on the quiz button.\r\n   */\r\n  text: string;\r\n\r\n  /**\r\n   * Optional. A function to be called when the quiz button is clicked.\r\n   */\r\n  onClick?: (arg:any)=>void;\r\n\r\n  /**\r\n   * Required. The ID of the quiz button.\r\n   */\r\n  id: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the quiz button is selected.\r\n   */\r\n  selected?: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the quiz button is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Optional. The size of the quiz button. Can be 'Small', 'Medium', or 'Large'.\r\n   */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n\r\n  /**\r\n   * Required. The type of the quiz button. Can be 'radio' or 'checkbox'.\r\n   */\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\r\n  const theme = useTheme();\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, theme) : (\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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","ignoreList":[]}

package/dist/QuizButton/index.d.ts

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