@laerdal/life-react-components 5.0.6-dev.2 → 5.0.6

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","_typeof","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","_ref$selected","selected","_ref$disabled","disabled","_ref$size","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","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","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","_ref$selected","selected","_ref$disabled","disabled","_ref$size","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';\nimport styled, { useTheme } 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: ${props => COLORS.getColor('accent1_20', props.theme)};\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: ${props => COLORS.getColor('accent1_100', props.theme)};\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: ${props => COLORS.getColor('accent1_600', props.theme)};\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: ${props => COLORS.getColor('accent1_100', props.theme)};\n    }\n    ${ButtonContainer} {\n      background: ${props => COLORS.getColor('accent1_200', props.theme)};\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    ${ButtonContainer} {\n      pointer-events: none;\n      background: ${props => COLORS.getColor('neutral_100', props.theme)};\n    }\n    ${TextContainer} {\n      pointer-events: none;\n      background: ${props => COLORS.getColor('neutral_20', props.theme)};\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &.correct {\n    ${TextContainer} {    \n      background: ${props => COLORS.getColor('correct_20', props.theme)};\n    }\n    ${ButtonContainer} {\n      background: ${props => COLORS.getColor('correct_400', props.theme)};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    ${TextContainer} {    \n      background: ${props => COLORS.getColor('critical_20', props.theme)};\n    }\n    ${ButtonContainer} {\n      background: ${props => COLORS.getColor('critical_500', props.theme)};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    ${TextContainer} {    \n      background: ${props => COLORS.getColor('warning_20', props.theme)};\n    }\n    ${ButtonContainer} {\n      background: ${props => COLORS.getColor('warning_400', props.theme)};\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: ${props => COLORS.getColor('accent1_300', props.theme)};\n    }\n    ${TextContainer} {\n      background: ${props=>props.$isSelected ? COLORS.getColor('accent1_200', props.theme)  : COLORS.getColor('accent1_100', props.theme)};\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${props => COLORS.getColor('accent1_700', props.theme)};\n      }\n    }\n  }\n\n  &:active:not(.disabled):not(.result),\n  &.active-state {\n    ${ButtonContainer} {\n      background: ${props => COLORS.getColor('accent1_400', props.theme)};\n      transition: none;\n    }\n    ${TextContainer} {\n      background: ${props=>props.$isSelected ? COLORS.getColor('accent1_300', props.theme) : COLORS.getColor('accent1_200', props.theme)};\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${props => COLORS.getColor('accent1_800', props.theme)};\n      }\n    }\n  }\n`;\n\nconst renderResultContent = (resultType: string, theme: any) => {\n  switch(resultType){\n    case 'correct' : return <SystemIcons.CheckMark color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\n\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\n\n    default : return <SystemIcons.Close color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\n  }\n};\n\nexport type QuizButtonProps = {\n  /**\n   * Optional. The result type of the quiz button. Can be 'correct', 'incorrect', or 'partial'.\n   */\n  resultType?: 'correct' | 'incorrect' | 'partial';\n\n  /**\n   * Required. The text to be displayed on the quiz button.\n   */\n  text: string;\n\n  /**\n   * Optional. A function to be called when the quiz button is clicked.\n   */\n  onClick?: (arg:any)=>void;\n\n  /**\n   * Required. The ID of the quiz button.\n   */\n  id: string;\n\n  /**\n   * Optional. A boolean indicating whether the quiz button is selected.\n   */\n  selected?: boolean;\n\n  /**\n   * Optional. A boolean indicating whether the quiz button is disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * Optional. The size of the quiz button. Can be 'Small', 'Medium', or 'Large'.\n   */\n  size?: Size.Small | Size.Medium | Size.Large;\n\n  /**\n   * Required. The type of the quiz button. Can be 'radio' or 'checkbox'.\n   */\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\n  const theme = useTheme();\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, theme) : (\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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","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.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","_ref$selected","selected","_ref$disabled","disabled","_ref$size","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","_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","_ref$selected","selected","_ref$disabled","disabled","_ref$size","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';\nimport styled, { useTheme } 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: ${props => COLORS.getColor('accent1_20', props.theme)};\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: ${props => COLORS.getColor('accent1_100', props.theme)};\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: ${props => COLORS.getColor('accent1_600', props.theme)};\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: ${props => COLORS.getColor('accent1_100', props.theme)};\n    }\n    ${ButtonContainer} {\n      background: ${props => COLORS.getColor('accent1_200', props.theme)};\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    ${ButtonContainer} {\n      pointer-events: none;\n      background: ${props => COLORS.getColor('neutral_100', props.theme)};\n    }\n    ${TextContainer} {\n      pointer-events: none;\n      background: ${props => COLORS.getColor('neutral_20', props.theme)};\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &.correct {\n    ${TextContainer} {    \n      background: ${props => COLORS.getColor('correct_20', props.theme)};\n    }\n    ${ButtonContainer} {\n      background: ${props => COLORS.getColor('correct_400', props.theme)};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    ${TextContainer} {    \n      background: ${props => COLORS.getColor('critical_20', props.theme)};\n    }\n    ${ButtonContainer} {\n      background: ${props => COLORS.getColor('critical_500', props.theme)};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    ${TextContainer} {    \n      background: ${props => COLORS.getColor('warning_20', props.theme)};\n    }\n    ${ButtonContainer} {\n      background: ${props => COLORS.getColor('warning_400', props.theme)};\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: ${props => COLORS.getColor('accent1_300', props.theme)};\n    }\n    ${TextContainer} {\n      background: ${props=>props.$isSelected ? COLORS.getColor('accent1_200', props.theme)  : COLORS.getColor('accent1_100', props.theme)};\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${props => COLORS.getColor('accent1_700', props.theme)};\n      }\n    }\n  }\n\n  &:active:not(.disabled):not(.result),\n  &.active-state {\n    ${ButtonContainer} {\n      background: ${props => COLORS.getColor('accent1_400', props.theme)};\n      transition: none;\n    }\n    ${TextContainer} {\n      background: ${props=>props.$isSelected ? COLORS.getColor('accent1_300', props.theme) : COLORS.getColor('accent1_200', props.theme)};\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${props => COLORS.getColor('accent1_800', props.theme)};\n      }\n    }\n  }\n`;\n\nconst renderResultContent = (resultType: string, theme: any) => {\n  switch(resultType){\n    case 'correct' : return <SystemIcons.CheckMark color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\n\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\n\n    default : return <SystemIcons.Close color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\n  }\n};\n\nexport type QuizButtonProps = {\n  /**\n   * Optional. The result type of the quiz button. Can be 'correct', 'incorrect', or 'partial'.\n   */\n  resultType?: 'correct' | 'incorrect' | 'partial';\n\n  /**\n   * Required. The text to be displayed on the quiz button.\n   */\n  text: string;\n\n  /**\n   * Optional. A function to be called when the quiz button is clicked.\n   */\n  onClick?: (arg:any)=>void;\n\n  /**\n   * Required. The ID of the quiz button.\n   */\n  id: string;\n\n  /**\n   * Optional. A boolean indicating whether the quiz button is selected.\n   */\n  selected?: boolean;\n\n  /**\n   * Optional. A boolean indicating whether the quiz button is disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * Optional. The size of the quiz button. Can be 'Small', 'Medium', or 'Large'.\n   */\n  size?: Size.Small | Size.Medium | Size.Large;\n\n  /**\n   * Required. The type of the quiz button. Can be 'radio' or 'checkbox'.\n   */\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\n  const theme = useTheme();\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, theme) : (\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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","ignoreList":[]}

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":["_react","_interopRequireDefault","require","_types","_styledComponents","_styles","_common","_jsxRuntime","_excluded","_excluded2","_templateObject","_templateObject2","_templateObject3","_templateObject4","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","SegmentControlItemContent","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","exports","SegmentControlItemBackground","SegmentControlItemWrapper","focusStyles","Z_INDEXES","hover","active","SegmentControlWrapper","ComponentSStyling","ComponentTextStyle","Bold","ComponentMStyling","SegmentControl","_ref","items","_ref$size","size","Size","Medium","onChange","selected","className","rest","_objectWithoutProperties2","onKeyPress","item","key","_document","_document$activeEleme","document","activeElement","blur","disabled","onClick","jsx","concat","children","map","a","i","content","tabIndex","undefined","onMouseDown","defaultOnMouseDownHandler","propTypes","_propTypes","arrayOf","shape","string","isRequired","bool","oneOfType","node","func","_default"],"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: ${props => COLORS.getColor('neutral_600', props.theme)};\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: ${props => COLORS.getColor('neutral_20', props.theme)};\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: ${props => COLORS.getColor('primary_100', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\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: ${props => COLORS.getColor('primary_200', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\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: ${props => COLORS.getColor('neutral_300', props.theme)};\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: ${props => COLORS.getColor('primary_500', props.theme)};\r\n      color: ${props => COLORS.getColor('white', props.theme)};\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: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\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' | 'content' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  /**\r\n   * Required. The key of the segment control item. This should be unique among all items in the segment control.\r\n   */\r\n  key: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the segment control item is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Required. The content of the segment control item. This can be a string or a React node.\r\n   */\r\n  content: React.ReactNode | string;\r\n}\r\n\r\nexport interface SegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\r\n  /**\r\n   * Required. An array of SegmentControlItem objects representing the items in the segment control.\r\n   */\r\n  items: SegmentControlItem[];\r\n\r\n  /**\r\n   * Optional. The key of the currently selected item in the segment control. In order to change selected item\r\n   * when user clicks on it, you should update this prop to display item as 'selected'.\r\n   */\r\n  selected: string;\r\n\r\n  /**\r\n   * Required. A function to be called when the selected item in the segment control changes.\r\n   * It should take a string representing the key of the new selected item.\r\n   */\r\n  onChange: (value: string) => void;\r\n\r\n  /**\r\n   * Optional. The size of the segment control. Can be 'Small' or 'Medium'.\r\n   */\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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","ignoreList":[]}
+{"version":3,"file":"SegmentControl.cjs","names":["_react","_interopRequireDefault","require","_types","_styledComponents","_styles","_common","_jsxRuntime","_excluded","_excluded2","_templateObject","_templateObject2","_templateObject3","_templateObject4","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","SegmentControlItemContent","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","exports","SegmentControlItemBackground","SegmentControlItemWrapper","focusStyles","Z_INDEXES","hover","active","SegmentControlWrapper","ComponentSStyling","ComponentTextStyle","Bold","ComponentMStyling","SegmentControl","_ref","items","_ref$size","size","Size","Medium","onChange","selected","className","rest","_objectWithoutProperties2","onKeyPress","item","key","_document","_document$activeEleme","document","activeElement","blur","disabled","onClick","jsx","concat","children","map","a","i","content","tabIndex","undefined","onMouseDown","defaultOnMouseDownHandler","propTypes","_propTypes","arrayOf","shape","string","isRequired","bool","oneOfType","node","func","_default"],"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: ${props => COLORS.getColor('neutral_600', props.theme)};\n`\n\nexport const SegmentControlItemBackground = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\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: ${props => COLORS.getColor('primary_100', props.theme)};\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\n    }\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n\n    ${SegmentControlItemContent} {\n      background-color: ${props => COLORS.getColor('primary_200', props.theme)};\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ${SegmentControlItemContent} {\n      background-color: transparent;\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\n    }\n  }\n\n  &.selected {\n    cursor: default;\n    pointer-events: none;\n\n    ${SegmentControlItemContent} {\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\n      color: ${props => COLORS.getColor('white', props.theme)};\n    }\n  }\n\n  &.selected.disabled {\n    cursor: not-allowed;\n    pointer-events: unset;\n    \n    ${SegmentControlItemContent} {\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\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' | 'content' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\n  /**\n   * Required. The key of the segment control item. This should be unique among all items in the segment control.\n   */\n  key: string;\n\n  /**\n   * Optional. A boolean indicating whether the segment control item is disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * Required. The content of the segment control item. This can be a string or a React node.\n   */\n  content: React.ReactNode | string;\n}\n\nexport interface SegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /**\n   * Required. An array of SegmentControlItem objects representing the items in the segment control.\n   */\n  items: SegmentControlItem[];\n\n  /**\n   * Optional. The key of the currently selected item in the segment control. In order to change selected item\n   * when user clicks on it, you should update this prop to display item as 'selected'.\n   */\n  selected: string;\n\n  /**\n   * Required. A function to be called when the selected item in the segment control changes.\n   * It should take a string representing the key of the new selected item.\n   */\n  onChange: (value: string) => void;\n\n  /**\n   * Optional. The size of the segment control. Can be 'Small' or 'Medium'.\n   */\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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","ignoreList":[]}

package/dist/SegmentControl/SegmentControl.d.ts

@@ -1,42 +1,42 @@
-import React from 'react';
-import { Size } from '../types';
-export declare const SegmentControlItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SegmentControlItemBackground: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SegmentControlItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SegmentControlWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export interface SegmentControlItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'content' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {
-    /**
-     * Required. The key of the segment control item. This should be unique among all items in the segment control.
-     */
-    key: string;
-    /**
-     * Optional. A boolean indicating whether the segment control item is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Required. The content of the segment control item. This can be a string or a React node.
-     */
-    content: React.ReactNode | string;
-}
-export interface SegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
-    /**
-     * Required. An array of SegmentControlItem objects representing the items in the segment control.
-     */
-    items: SegmentControlItem[];
-    /**
-     * Optional. The key of the currently selected item in the segment control. In order to change selected item
-     * when user clicks on it, you should update this prop to display item as 'selected'.
-     */
-    selected: string;
-    /**
-     * Required. A function to be called when the selected item in the segment control changes.
-     * It should take a string representing the key of the new selected item.
-     */
-    onChange: (value: string) => void;
-    /**
-     * Optional. The size of the segment control. Can be 'Small' or 'Medium'.
-     */
-    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/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SegmentControlItemBackground: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SegmentControlItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SegmentControlWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export interface SegmentControlItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'content' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {
+    /**
+     * Required. The key of the segment control item. This should be unique among all items in the segment control.
+     */
+    key: string;
+    /**
+     * Optional. A boolean indicating whether the segment control item is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Required. The content of the segment control item. This can be a string or a React node.
+     */
+    content: React.ReactNode | string;
+}
+export interface SegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Required. An array of SegmentControlItem objects representing the items in the segment control.
+     */
+    items: SegmentControlItem[];
+    /**
+     * Optional. The key of the currently selected item in the segment control. In order to change selected item
+     * when user clicks on it, you should update this prop to display item as 'selected'.
+     */
+    selected: string;
+    /**
+     * Required. A function to be called when the selected item in the segment control changes.
+     * It should take a string representing the key of the new selected item.
+     */
+    onChange: (value: string) => void;
+    /**
+     * Optional. The size of the segment control. Can be 'Small' or 'Medium'.
+     */
+    size?: Size.Small | Size.Medium;
+}
+declare const SegmentControl: React.FunctionComponent<SegmentControlProps>;
+export default SegmentControl;

package/dist/SegmentControl/SegmentControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentControl.js","names":["React","Size","styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","jsx","_jsx","SegmentControlItemContent","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","SegmentControlItemBackground","_templateObject2","SegmentControlItemWrapper","_templateObject3","hover","active","SegmentControlWrapper","_templateObject4","Bold","SegmentControl","_ref","items","_ref$size","size","Medium","onChange","selected","className","rest","_objectWithoutProperties","_excluded","onKeyPress","e","item","key","_document","_document$activeEleme","document","activeElement","blur","disabled","onClick","_objectSpread","concat","children","map","a","i","content","_excluded2","tabIndex","undefined","onMouseDown","propTypes","_pt","arrayOf","shape","string","isRequired","bool","oneOfType","node","func"],"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: ${props => COLORS.getColor('neutral_600', props.theme)};\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: ${props => COLORS.getColor('neutral_20', props.theme)};\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: ${props => COLORS.getColor('primary_100', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\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: ${props => COLORS.getColor('primary_200', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\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: ${props => COLORS.getColor('neutral_300', props.theme)};\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: ${props => COLORS.getColor('primary_500', props.theme)};\r\n      color: ${props => COLORS.getColor('white', props.theme)};\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: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\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' | 'content' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  /**\r\n   * Required. The key of the segment control item. This should be unique among all items in the segment control.\r\n   */\r\n  key: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the segment control item is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Required. The content of the segment control item. This can be a string or a React node.\r\n   */\r\n  content: React.ReactNode | string;\r\n}\r\n\r\nexport interface SegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\r\n  /**\r\n   * Required. An array of SegmentControlItem objects representing the items in the segment control.\r\n   */\r\n  items: SegmentControlItem[];\r\n\r\n  /**\r\n   * Optional. The key of the currently selected item in the segment control. In order to change selected item\r\n   * when user clicks on it, you should update this prop to display item as 'selected'.\r\n   */\r\n  selected: string;\r\n\r\n  /**\r\n   * Required. A function to be called when the selected item in the segment control changes.\r\n   * It should take a string representing the key of the new selected item.\r\n   */\r\n  onChange: (value: string) => void;\r\n\r\n  /**\r\n   * Optional. The size of the segment control. Can be 'Small' or 'Medium'.\r\n   */\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":";;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAQC,IAAI,QAAO,UAAU;AAC7B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAEC,WAAW,EAAEC,SAAS,QAAO,WAAW;AAClH,SAAQC,yBAAyB,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGpD,OAAO,IAAMC,yBAAyB,GAAGV,MAAM,CAACW,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,gMASxC,UAAAC,KAAK;EAAA,OAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,EAC9D;AAED,OAAO,IAAMC,4BAA4B,GAAGjB,MAAM,CAACW,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAL,sBAAA,yIAKhC,UAAAC,KAAK;EAAA,OAAIb,MAAM,CAACc,QAAQ,CAAC,YAAY,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,EAExE;AAED,OAAO,IAAMG,yBAAyB,GAAGnB,MAAM,CAACW,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAP,sBAAA,+0BAU7CR,WAAW,EAIFC,SAAS,CAACe,KAAK,EAExBX,yBAAyB,EACL,UAAAI,KAAK;EAAA,OAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAC/D,UAAAF,KAAK;EAAA,OAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAKpDV,SAAS,CAACgB,MAAM,EAEzBZ,yBAAyB,EACL,UAAAI,KAAK;EAAA,OAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAC/D,UAAAF,KAAK;EAAA,OAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAO7DN,yBAAyB,EAEhB,UAAAI,KAAK;EAAA,OAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAQ7DN,yBAAyB,EACL,UAAAI,KAAK;EAAA,OAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAC/D,UAAAF,KAAK;EAAA,OAAIb,MAAM,CAACc,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAQvDN,yBAAyB,EACL,UAAAI,KAAK;EAAA,OAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAC/D,UAAAF,KAAK;EAAA,OAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,EAGlE;AAED,OAAO,IAAMO,qBAAqB,GAAGvB,MAAM,CAACW,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAX,sBAAA,4iBAM3CM,yBAAyB,EACvBF,4BAA4B,EAO9BE,yBAAyB,EACvBF,4BAA4B,EAS5BP,yBAAyB,EACvBP,iBAAiB,CAACC,kBAAkB,CAACqB,IAAI,EAAE,IAAI,CAAC,EAMlDf,yBAAyB,EACvBR,iBAAiB,CAACE,kBAAkB,CAACqB,IAAI,EAAE,IAAI,CAAC,CAIvD;AA4CD,IAAMC,cAA4D,GAAG,SAA/DA,cAA4DA,CAAAC,IAAA,EAOU;EAAA,IANJC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAAC,SAAA,GAAAF,IAAA,CACLG,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG9B,IAAI,CAACgC,MAAM,GAAAF,SAAA;IAClBG,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;IACRC,SAAS,GAAAP,IAAA,CAATO,SAAS;IACNC,IAAI,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA;EAE7E,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAIC,CAAsC,EAAEC,IAAwB,EAAK;IACvF,IAAID,CAAC,CAACE,GAAG,KAAK,OAAO,IAAIF,CAAC,CAACE,GAAG,KAAK,GAAG,EAAE;MAAA,IAAAC,SAAA,EAAAC,qBAAA;MACtC;MACA,CAAAD,SAAA,GAAAE,QAAQ,cAAAF,SAAA,wBAAAC,qBAAA,GAARD,SAAA,CAAUG,aAAa,cAAAF,qBAAA,uBAAvBA,qBAAA,CAAyBG,IAAI,CAAC,CAAC;MAC/B,CAACN,IAAI,CAACO,QAAQ,IAAIf,QAAQ,CAACQ,IAAI,CAACC,GAAG,CAAC;IACtC;EACF,CAAC;EAED,IAAMO,OAAO,GAAG,SAAVA,OAAOA,CAAIT,CAAmB,EAAEC,IAAwB,EAAK;IACjE,CAACA,IAAI,CAACO,QAAQ,IAAIf,QAAQ,CAACQ,IAAI,CAACC,GAAG,CAAC;EACtC,CAAC;EAED,oBACEhC,IAAA,CAACc,qBAAqB,EAAA0B,aAAA,CAAAA,aAAA;IAACf,SAAS,KAAAgB,MAAA,CAAKpB,IAAI,OAAAoB,MAAA,CAAIhB,SAAS,IAAI,EAAE;EAAG,GAAKC,IAAI;IAAAgB,QAAA,EACrEvB,KAAK,CAACwB,GAAG,CAAC,UAACC,CAAC,EAAEC,CAAC,EAAK;MACnB,IAAOb,GAAG,GAA2CY,CAAC,CAA/CZ,GAAG;QAAEM,QAAQ,GAAiCM,CAAC,CAA1CN,QAAQ;QAAEQ,OAAO,GAAwBF,CAAC,CAAhCE,OAAO;QAAErB,SAAS,GAAamB,CAAC,CAAvBnB,SAAS;QAAKC,IAAI,GAAAC,wBAAA,CAAIiB,CAAC,EAAAG,UAAA;MACtD,oBAAO/C,IAAA,CAACU,yBAAyB,EAAA8B,aAAA,CAAAA,aAAA;QACCf,SAAS,EAAE,CAACA,SAAS,IAAI,EAAE,KAAKmB,CAAC,CAACN,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC,IAAIM,CAAC,CAACZ,GAAG,KAAKR,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAE;QACxGwB,QAAQ,EAAEJ,CAAC,CAACN,QAAQ,IAAIM,CAAC,CAACZ,GAAG,KAAKR,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;QACpDe,OAAO,EAAEK,CAAC,CAACN,QAAQ,GAAGW,SAAS,GAAG,UAACnB,CAAC;UAAA,OAAKS,OAAO,CAACT,CAAC,EAAEc,CAAC,CAAC;QAAA,CAAC;QACvDM,WAAW,EAAEpD,yBAA0B;QACvC+B,UAAU,EAAEe,CAAC,CAACN,QAAQ,GAAGW,SAAS,GAAG,UAACnB,CAAC;UAAA,OAAKD,UAAU,CAACC,CAAC,EAAEc,CAAC,CAAC;QAAA;MAAC,GACzDlB,IAAI;QAAAgB,QAAA,eACxC1C,IAAA,CAACQ,4BAA4B;UAAAkC,QAAA,eAC3B1C,IAAA,CAACC,yBAAyB;YAAAyC,QAAA,EACvBE,CAAC,CAACE;UAAO,CACe;QAAC,CACA;MAAC,IAXMF,CAAC,CAACZ,GAAG,IAAIa,CAYrB,CAAC;IAC9B,CAAC;EAAC,EAEmB,CAAC;AAE5B,CAAC;AAAC5B,cAAA,CAAAkC,SAAA;EA7DAhC,KAAK,EAAAiC,GAAA,CAAAC,OAAA,CAAAD,GAAA,CAAAE,KAAA;IAjBLtB,GAAG,EAAAoB,GAAA,CAAAG,MAAA,CAAAC,UAAA;IAKHlB,QAAQ,EAAAc,GAAA,CAAAK,IAAA;IAKRX,OAAO,EAAAM,GAAA,CAAAM,SAAA,EAAAN,GAAA,CAAAO,IAAA,EAAAP,GAAA,CAAAG,MAAA,GAAAC;EAAA,IAAAA,UAAA;EAaPhC,QAAQ,EAAA4B,GAAA,CAAAG,MAAA,CAAAC,UAAA;EAMRjC,QAAQ,EAAA6B,GAAA,CAAAQ,IAAA,CAAAJ;AAAA;AAmDV,eAAevC,cAAc","ignoreList":[]}
+{"version":3,"file":"SegmentControl.js","names":["React","Size","styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","jsx","_jsx","SegmentControlItemContent","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","SegmentControlItemBackground","_templateObject2","SegmentControlItemWrapper","_templateObject3","hover","active","SegmentControlWrapper","_templateObject4","Bold","SegmentControl","_ref","items","_ref$size","size","Medium","onChange","selected","className","rest","_objectWithoutProperties","_excluded","onKeyPress","e","item","key","_document","_document$activeEleme","document","activeElement","blur","disabled","onClick","_objectSpread","concat","children","map","a","i","content","_excluded2","tabIndex","undefined","onMouseDown","propTypes","_pt","arrayOf","shape","string","isRequired","bool","oneOfType","node","func"],"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: ${props => COLORS.getColor('neutral_600', props.theme)};\n`\n\nexport const SegmentControlItemBackground = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\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: ${props => COLORS.getColor('primary_100', props.theme)};\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\n    }\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n\n    ${SegmentControlItemContent} {\n      background-color: ${props => COLORS.getColor('primary_200', props.theme)};\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ${SegmentControlItemContent} {\n      background-color: transparent;\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\n    }\n  }\n\n  &.selected {\n    cursor: default;\n    pointer-events: none;\n\n    ${SegmentControlItemContent} {\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\n      color: ${props => COLORS.getColor('white', props.theme)};\n    }\n  }\n\n  &.selected.disabled {\n    cursor: not-allowed;\n    pointer-events: unset;\n    \n    ${SegmentControlItemContent} {\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\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' | 'content' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\n  /**\n   * Required. The key of the segment control item. This should be unique among all items in the segment control.\n   */\n  key: string;\n\n  /**\n   * Optional. A boolean indicating whether the segment control item is disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * Required. The content of the segment control item. This can be a string or a React node.\n   */\n  content: React.ReactNode | string;\n}\n\nexport interface SegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /**\n   * Required. An array of SegmentControlItem objects representing the items in the segment control.\n   */\n  items: SegmentControlItem[];\n\n  /**\n   * Optional. The key of the currently selected item in the segment control. In order to change selected item\n   * when user clicks on it, you should update this prop to display item as 'selected'.\n   */\n  selected: string;\n\n  /**\n   * Required. A function to be called when the selected item in the segment control changes.\n   * It should take a string representing the key of the new selected item.\n   */\n  onChange: (value: string) => void;\n\n  /**\n   * Optional. The size of the segment control. Can be 'Small' or 'Medium'.\n   */\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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","ignoreList":[]}

package/dist/SegmentControl/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["_SegmentControl","_interopRequireDefault","require"],"sources":["../../src/SegmentControl/index.ts"],"sourcesContent":["import {SegmentControlItem, default as SegmentControl, SegmentControlProps} from './SegmentControl'\r\n\r\nexport type {SegmentControlItem, SegmentControlProps}\r\nexport {SegmentControl}\r\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,eAAA,GAAAC,sBAAA,CAAAC,OAAA","ignoreList":[]}
+{"version":3,"file":"index.cjs","names":["_SegmentControl","_interopRequireDefault","require"],"sources":["../../src/SegmentControl/index.ts"],"sourcesContent":["import {SegmentControlItem, default as SegmentControl, SegmentControlProps} from './SegmentControl'\n\nexport type {SegmentControlItem, SegmentControlProps}\nexport {SegmentControl}\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,eAAA,GAAAC,sBAAA,CAAAC,OAAA","ignoreList":[]}

package/dist/SegmentControl/index.d.ts

@@ -1,3 +1,3 @@
-import { SegmentControlItem, default as SegmentControl, SegmentControlProps } from './SegmentControl';
-export type { SegmentControlItem, SegmentControlProps };
-export { SegmentControl };
+import { SegmentControlItem, default as SegmentControl, SegmentControlProps } from './SegmentControl';
+export type { SegmentControlItem, SegmentControlProps };
+export { SegmentControl };

package/dist/SegmentControl/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","SegmentControl"],"sources":["../../src/SegmentControl/index.ts"],"sourcesContent":["import {SegmentControlItem, default as SegmentControl, SegmentControlProps} from './SegmentControl'\r\n\r\nexport type {SegmentControlItem, SegmentControlProps}\r\nexport {SegmentControl}\r\n"],"mappings":"AAAA,SAA4BA,OAAO,IAAIC,cAAc,QAA4B,kBAAkB;AAGnG,SAAQA,cAAc","ignoreList":[]}
+{"version":3,"file":"index.js","names":["default","SegmentControl"],"sources":["../../src/SegmentControl/index.ts"],"sourcesContent":["import {SegmentControlItem, default as SegmentControl, SegmentControlProps} from './SegmentControl'\n\nexport type {SegmentControlItem, SegmentControlProps}\nexport {SegmentControl}\n"],"mappings":"AAAA,SAA4BA,OAAO,IAAIC,cAAc,QAA4B,kBAAkB;AAGnG,SAAQA,cAAc","ignoreList":[]}

package/dist/Services/functions.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"functions.cjs","names":["createUUID","dt","Date","getTime","replace","c","r","Math","random","floor","toString"],"sources":["../../src/Services/functions.ts"],"sourcesContent":["export function createUUID() {\r\n  let dt = new Date().getTime();\r\n  // eslint-disable-next-line func-names\r\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\r\n    // eslint-disable-next-line no-bitwise\r\n    const r = (dt + Math.random() * 16) % 16 | 0;\r\n    dt = Math.floor(dt / 16);\r\n    // eslint-disable-next-line no-bitwise\r\n    return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);\r\n  });\r\n}\r\n"],"mappings":";;;;;;AAAO,SAASA,UAAUA,CAAA,EAAG;EAC3B,IAAIC,EAAE,GAAG,IAAIC,IAAI,CAAC,CAAC,CAACC,OAAO,CAAC,CAAC;EAC7B;EACA,OAAO,sCAAsC,CAACC,OAAO,CAAC,OAAO,EAAE,UAASC,CAAC,EAAE;IACzE;IACA,IAAMC,CAAC,GAAG,CAACL,EAAE,GAAGM,IAAI,CAACC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,GAAG,CAAC;IAC5CP,EAAE,GAAGM,IAAI,CAACE,KAAK,CAACR,EAAE,GAAG,EAAE,CAAC;IACxB;IACA,OAAO,CAACI,CAAC,KAAK,GAAG,GAAGC,CAAC,GAAIA,CAAC,GAAG,GAAG,GAAI,GAAG,EAAEI,QAAQ,CAAC,EAAE,CAAC;EACvD,CAAC,CAAC;AACJ","ignoreList":[]}
+{"version":3,"file":"functions.cjs","names":["createUUID","dt","Date","getTime","replace","c","r","Math","random","floor","toString"],"sources":["../../src/Services/functions.ts"],"sourcesContent":["export function createUUID() {\n  let dt = new Date().getTime();\n  // eslint-disable-next-line func-names\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\n    // eslint-disable-next-line no-bitwise\n    const r = (dt + Math.random() * 16) % 16 | 0;\n    dt = Math.floor(dt / 16);\n    // eslint-disable-next-line no-bitwise\n    return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);\n  });\n}\n"],"mappings":";;;;;;AAAO,SAASA,UAAUA,CAAA,EAAG;EAC3B,IAAIC,EAAE,GAAG,IAAIC,IAAI,CAAC,CAAC,CAACC,OAAO,CAAC,CAAC;EAC7B;EACA,OAAO,sCAAsC,CAACC,OAAO,CAAC,OAAO,EAAE,UAASC,CAAC,EAAE;IACzE;IACA,IAAMC,CAAC,GAAG,CAACL,EAAE,GAAGM,IAAI,CAACC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,GAAG,CAAC;IAC5CP,EAAE,GAAGM,IAAI,CAACE,KAAK,CAACR,EAAE,GAAG,EAAE,CAAC;IACxB;IACA,OAAO,CAACI,CAAC,KAAK,GAAG,GAAGC,CAAC,GAAIA,CAAC,GAAG,GAAG,GAAI,GAAG,EAAEI,QAAQ,CAAC,EAAE,CAAC;EACvD,CAAC,CAAC;AACJ","ignoreList":[]}

package/dist/Services/functions.d.ts

@@ -1 +1 @@
-export declare function createUUID(): string;
+export declare function createUUID(): string;

package/dist/Services/functions.js.map

@@ -1 +1 @@
-{"version":3,"file":"functions.js","names":["createUUID","dt","Date","getTime","replace","c","r","Math","random","floor","toString"],"sources":["../../src/Services/functions.ts"],"sourcesContent":["export function createUUID() {\r\n  let dt = new Date().getTime();\r\n  // eslint-disable-next-line func-names\r\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\r\n    // eslint-disable-next-line no-bitwise\r\n    const r = (dt + Math.random() * 16) % 16 | 0;\r\n    dt = Math.floor(dt / 16);\r\n    // eslint-disable-next-line no-bitwise\r\n    return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);\r\n  });\r\n}\r\n"],"mappings":"AAAA,OAAO,SAASA,UAAUA,CAAA,EAAG;EAC3B,IAAIC,EAAE,GAAG,IAAIC,IAAI,CAAC,CAAC,CAACC,OAAO,CAAC,CAAC;EAC7B;EACA,OAAO,sCAAsC,CAACC,OAAO,CAAC,OAAO,EAAE,UAASC,CAAC,EAAE;IACzE;IACA,IAAMC,CAAC,GAAG,CAACL,EAAE,GAAGM,IAAI,CAACC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,GAAG,CAAC;IAC5CP,EAAE,GAAGM,IAAI,CAACE,KAAK,CAACR,EAAE,GAAG,EAAE,CAAC;IACxB;IACA,OAAO,CAACI,CAAC,KAAK,GAAG,GAAGC,CAAC,GAAIA,CAAC,GAAG,GAAG,GAAI,GAAG,EAAEI,QAAQ,CAAC,EAAE,CAAC;EACvD,CAAC,CAAC;AACJ","ignoreList":[]}
+{"version":3,"file":"functions.js","names":["createUUID","dt","Date","getTime","replace","c","r","Math","random","floor","toString"],"sources":["../../src/Services/functions.ts"],"sourcesContent":["export function createUUID() {\n  let dt = new Date().getTime();\n  // eslint-disable-next-line func-names\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\n    // eslint-disable-next-line no-bitwise\n    const r = (dt + Math.random() * 16) % 16 | 0;\n    dt = Math.floor(dt / 16);\n    // eslint-disable-next-line no-bitwise\n    return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);\n  });\n}\n"],"mappings":"AAAA,OAAO,SAASA,UAAUA,CAAA,EAAG;EAC3B,IAAIC,EAAE,GAAG,IAAIC,IAAI,CAAC,CAAC,CAACC,OAAO,CAAC,CAAC;EAC7B;EACA,OAAO,sCAAsC,CAACC,OAAO,CAAC,OAAO,EAAE,UAASC,CAAC,EAAE;IACzE;IACA,IAAMC,CAAC,GAAG,CAACL,EAAE,GAAGM,IAAI,CAACC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,GAAG,CAAC;IAC5CP,EAAE,GAAGM,IAAI,CAACE,KAAK,CAACR,EAAE,GAAG,EAAE,CAAC;IACxB;IACA,OAAO,CAACI,CAAC,KAAK,GAAG,GAAGC,CAAC,GAAIA,CAAC,GAAG,GAAG,GAAI,GAAG,EAAEI,QAAQ,CAAC,EAAE,CAAC;EACvD,CAAC,CAAC;AACJ","ignoreList":[]}

package/dist/SideMenu/SideMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SideMenu.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_SideMenuHeader","_SideMenuFooter","_SideMenuBody","_styles","_types","_jsxRuntime","_excluded","_templateObject","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","Wrapper","styled","div","_taggedTemplateLiteral2","Z_INDEXES","off_canvas","props","COLORS","getColor","theme","BOXSHADOWS","BOXSHADOW_CENTERED","SideMenu","_props$size","size","Size","Medium","className","rest","_objectWithoutProperties2","jsxs","concat","children","jsx","SideMenuHeader","SideMenuBody","footer","SideMenuFooter","_default","exports"],"sources":["../../src/SideMenu/SideMenu.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SideMenuProps} from './types';\r\nimport {SideMenuHeader} from './SideMenuHeader';\r\nimport {SideMenuFooter} from './SideMenuFooter';\r\nimport {SideMenuBody} from './SideMenuBody';\r\nimport {BOXSHADOWS, COLORS, Z_INDEXES} from '../styles';\r\nimport {Size} from '../types';\r\n\r\nconst Wrapper = styled.div`\r\n  z-index: ${Z_INDEXES.off_canvas};\r\n  height: 100%;\r\n  box-sizing: border-box;\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  width: fit-content;\r\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\r\n\r\n  &.small {\r\n    min-width: 320px;\r\n  }\r\n\r\n  &.medium {\r\n    min-width: 400px;\r\n  }\r\n\r\n  &.large {\r\n    min-width: 480px;\r\n  }\r\n`;\r\n\r\n\r\nconst SideMenu: React.FunctionComponent<SideMenuProps> = (props) => {\r\n  const {size = Size.Medium, className, ...rest} = props;\r\n\r\n  return (\r\n    <Wrapper className={`${size} ${className || ''}`} {...rest}>\r\n      <SideMenuHeader {...props} />\r\n      <SideMenuBody {...props}/>\r\n      {props.footer && <SideMenuFooter {...props}/>}\r\n    </Wrapper>\r\n  );\r\n}\r\n\r\nexport default SideMenu;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SideMenu.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_SideMenuHeader","_SideMenuFooter","_SideMenuBody","_styles","_types","_jsxRuntime","_excluded","_templateObject","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","Wrapper","styled","div","_taggedTemplateLiteral2","Z_INDEXES","off_canvas","props","COLORS","getColor","theme","BOXSHADOWS","BOXSHADOW_CENTERED","SideMenu","_props$size","size","Size","Medium","className","rest","_objectWithoutProperties2","jsxs","concat","children","jsx","SideMenuHeader","SideMenuBody","footer","SideMenuFooter","_default","exports"],"sources":["../../src/SideMenu/SideMenu.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {SideMenuProps} from './types';\nimport {SideMenuHeader} from './SideMenuHeader';\nimport {SideMenuFooter} from './SideMenuFooter';\nimport {SideMenuBody} from './SideMenuBody';\nimport {BOXSHADOWS, COLORS, Z_INDEXES} from '../styles';\nimport {Size} from '../types';\n\nconst Wrapper = styled.div`\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  box-sizing: border-box;\n  background: ${props => COLORS.getColor('white', props.theme)};\n\n  display: flex;\n  flex-direction: column;\n\n  width: fit-content;\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n\n  &.small {\n    min-width: 320px;\n  }\n\n  &.medium {\n    min-width: 400px;\n  }\n\n  &.large {\n    min-width: 480px;\n  }\n`;\n\n\nconst SideMenu: React.FunctionComponent<SideMenuProps> = (props) => {\n  const {size = Size.Medium, className, ...rest} = props;\n\n  return (\n    <Wrapper className={`${size} ${className || ''}`} {...rest}>\n      <SideMenuHeader {...props} />\n      <SideMenuBody {...props}/>\n      {props.footer && <SideMenuFooter {...props}/>}\n    </Wrapper>\n  );\n}\n\nexport default SideMenu;\n"],"mappings":"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","ignoreList":[]}

package/dist/SideMenu/SideMenu.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { SideMenuProps } from './types';
-declare const SideMenu: React.FunctionComponent<SideMenuProps>;
-export default SideMenu;
+import React from 'react';
+import { SideMenuProps } from './types';
+declare const SideMenu: React.FunctionComponent<SideMenuProps>;
+export default SideMenu;