@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/QuizButton/QuizButton.cjs.map

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

package/dist/QuizButton/QuizButton.d.ts

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

package/dist/QuizButton/QuizButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuizButton.js","names":["React","styled","Checkbox","COLORS","defaultOnMouseDownHandler","focusStyles","RadioButton","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","TextContainer","div","accent1_20","props","size","Small","Large","Regular","TextWrapper","ButtonContainer","accent1_100","accent1_600","OptionContainer","accent1_200","neutral_100","neutral_20","neutral_300","correct_20","correct_400","critical_20","critical_500","warning_20","warning_400","accent1_300","isSelected","accent1_700","accent1_400","accent1_800","renderResultContent","resultType","white","QuizButton","text","type","onClick","id","className","selected","disabled","Medium","rest","concat"],"sources":["../../src/QuizButton/QuizButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, RadioButton, Size, SystemIcons} from '..';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst TextContainer = styled.div<{size: Size}>`\n  border-radius: 0 8px 8px 0;\n  display: flex;\n  background: ${COLORS.accent1_20};\n  width: 100%;\n\n  transition: background 100ms ease-in-out;\n  align-items: center;\n\n  padding: ${props=>props.size===Size.Small?'6px 8px':(props.size===Size.Large?'20px 16px':'12px 16px')};\n  ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Regular,null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Regular,null) : ComponentMStyling(ComponentTextStyle.Regular,null))}\n`;\n\nconst TextWrapper = styled.div<{size:Size}>``;\n\nconst ButtonContainer = styled.div<{size: Size}>`\n  border-radius: 8px 0 0 8px;\n  display: flex;\n  background: ${COLORS.accent1_100};\n\n  width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n\n  transition: background 100ms ease-in-out;\n\n  .quiz-button-result-icon {\n    height: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n    width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  }\n\n  .radio-button-icon, .checkbox-icon {\n    margin: auto;\n    min-width: unset;\n    background: transparent;\n\n    svg {\n      color: ${COLORS.accent1_600};\n    }\n\n    &:hover {\n      background: transparent;\n    }\n\n    &:active {\n      background: transparent;\n    }\n  }\n\n  .small {\n    min-width: 32px;\n    min-height: 32px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n\n  .medium {\n    min-width: 48px;\n    min-height: 48px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 24px;\n        width: 24px;\n      }\n    }\n  }\n\n  .large {\n    min-width: 64px;\n    min-height: 64px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 32px;\n        width: 32px;\n      }\n    }\n  }\n`;\n\nconst OptionContainer = styled.div<{isSelected:boolean, size:Size}>`\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  max-width: 65ch;  \n  word-break: break-word;\n\n  min-height: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  margin-bottom: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n\n  &.selected {\n    ${TextContainer} {\n      background: ${COLORS.accent1_100};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_200};\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    ${ButtonContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_100};\n    }\n    ${TextContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_20};\n      color: ${COLORS.neutral_300};\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &.correct {\n    ${TextContainer} {    \n      background: ${COLORS.correct_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.correct_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    ${TextContainer} {    \n      background: ${COLORS.critical_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.critical_500};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    ${TextContainer} {    \n      background: ${COLORS.warning_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.warning_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    ${focusStyles}\n  }\n\n  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active,\n  &.active-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:hover:not(.disabled):not(.result),\n  &.hover-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_300};\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_200  : COLORS.accent1_100};\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.accent1_700};\n      }\n    }\n  }\n\n  &:active:not(.disabled):not(.result),\n  &.active-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_400};\n      transition: none;\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_300 : COLORS.accent1_200};\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.accent1_800};\n      }\n    }\n  }\n`;\n\nconst renderResultContent = (resultType: string) => {\n  switch(resultType){\n    case 'correct' : return <SystemIcons.CheckMark color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    default : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n  }\n};\n\ntype QuizButtonProps = {\n  resultType?: 'correct' | 'incorrect' | 'partial';\n  text: string;\n  onClick?: (arg:any)=>void;\n  id: string;\n  selected?: boolean;\n  disabled?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  type: 'radio' | 'checkbox';\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>\n\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({\n                                                                text,\n                                                                type,\n                                                                onClick,\n                                                                resultType,\n                                                                id,\n                                                                className,\n                                                                selected = false,\n                                                                disabled = false,\n                                                                size = Size.Medium,\n                                                                ...rest\n                                                              }) => {\n  return (   \n    <OptionContainer\n      onClick={onClick}\n      isSelected={selected}\n      tabIndex={(disabled || resultType) ? -1 : 0}\n      onMouseDown={defaultOnMouseDownHandler}\n      size={size}\n      className={'quiz-button '.concat(selected ? ' selected' : '')\n        .concat(disabled ? ' disabled' : '')\n        .concat(resultType ? ' result ' + resultType : '')\n        .concat(className ? ' ' + className : '')}\n      data-testid={'container'}\n      aria-checked={selected}\n      role={type === 'radio'? 'radio' : 'checkbox'}\n      {...rest}>\n        <ButtonContainer data-testid={'btnContainer'} className={'quiz-button-icon'} size={size}>\n          {\n            resultType ? renderResultContent(resultType) : (\n                                type==='radio' ? <RadioButton selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/> : <Checkbox selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/>\n                              )\n          }\n        </ButtonContainer>\n\n        <TextContainer data-testid={'txtContainer'} className={'quiz-button-text'} size={size}>\n          <TextWrapper size={size}>\n            {text}\n          </TextWrapper>\n        </TextContainer>\n    </OptionContainer>\n  );\n};\n\nexport default QuizButton;\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,QAAQ,EAAEC,MAAM,EAAEC,yBAAyB,EAAEC,WAAW,EAAEC,WAAW,EAAEC,IAAI,EAAEC,WAAW,QAAO,IAAI;AAC3G,SAASC,iBAAiB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,sBAAsB;AAAC;AAAA;AAEnH,IAAMC,aAAa,GAAGZ,MAAM,CAACa,GAAG,iQAGhBX,MAAM,CAACY,UAAU,EAMpB,UAAAC,KAAK;EAAA,OAAEA,KAAK,CAACC,IAAI,KAAGV,IAAI,CAACW,KAAK,GAAC,SAAS,GAAEF,KAAK,CAACC,IAAI,KAAGV,IAAI,CAACY,KAAK,GAAC,WAAW,GAAC,WAAY;AAAA,GACnG,UAAAH,KAAK;EAAA,OAAEA,KAAK,CAACC,IAAI,KAAGV,IAAI,CAACW,KAAK,GAAGP,iBAAiB,CAACC,kBAAkB,CAACQ,OAAO,EAAC,IAAI,CAAC,GAAIJ,KAAK,CAACC,IAAI,KAAGV,IAAI,CAACY,KAAK,GAAGV,iBAAiB,CAACG,kBAAkB,CAACQ,OAAO,EAAC,IAAI,CAAC,GAAGV,iBAAiB,CAACE,kBAAkB,CAACQ,OAAO,EAAC,IAAI,CAAE;AAAA,EAC5N;AAED,IAAMC,WAAW,GAAGpB,MAAM,CAACa,GAAG,uEAAe;AAE7C,IAAMQ,eAAe,GAAGrB,MAAM,CAACa,GAAG,wkCAGlBX,MAAM,CAACoB,WAAW,EAEvB,UAAAP,KAAK;EAAA,OAAEA,KAAK,CAACC,IAAI,KAAGV,IAAI,CAACW,KAAK,GAAC,MAAM,GAAEF,KAAK,CAACC,IAAI,KAAGV,IAAI,CAACY,KAAK,GAAC,MAAM,GAAC,MAAO;AAAA,GAK1E,UAAAH,KAAK;EAAA,OAAEA,KAAK,CAACC,IAAI,KAAGV,IAAI,CAACW,KAAK,GAAC,MAAM,GAAEF,KAAK,CAACC,IAAI,KAAGV,IAAI,CAACY,KAAK,GAAC,MAAM,GAAC,MAAO;AAAA,GAC9E,UAAAH,KAAK;EAAA,OAAEA,KAAK,CAACC,IAAI,KAAGV,IAAI,CAACW,KAAK,GAAC,MAAM,GAAEF,KAAK,CAACC,IAAI,KAAGV,IAAI,CAACY,KAAK,GAAC,MAAM,GAAC,MAAO;AAAA,GAS3EhB,MAAM,CAACqB,WAAW,CA4ChC;AAED,IAAMC,eAAe,GAAGxB,MAAM,CAACa,GAAG,k/DAOlB,UAAAE,KAAK;EAAA,OAAEA,KAAK,CAACC,IAAI,KAAGV,IAAI,CAACW,KAAK,GAAC,MAAM,GAAEF,KAAK,CAACC,IAAI,KAAGV,IAAI,CAACY,KAAK,GAAC,MAAM,GAAC,MAAO;AAAA,GAC1E,UAAAH,KAAK;EAAA,OAAEA,KAAK,CAACC,IAAI,KAAGV,IAAI,CAACW,KAAK,GAAC,MAAM,GAAEF,KAAK,CAACC,IAAI,KAAGV,IAAI,CAACY,KAAK,GAAC,MAAM,GAAC,MAAO;AAAA,GAG1FN,aAAa,EACCV,MAAM,CAACoB,WAAW,EAEhCD,eAAe,EACDnB,MAAM,CAACuB,WAAW,EAOhCJ,eAAe,EAEDnB,MAAM,CAACwB,WAAW,EAEhCd,aAAa,EAECV,MAAM,CAACyB,UAAU,EACtBzB,MAAM,CAAC0B,WAAW,EAS3BhB,aAAa,EACCV,MAAM,CAAC2B,UAAU,EAE/BR,eAAe,EACDnB,MAAM,CAAC4B,WAAW,EAQhClB,aAAa,EACCV,MAAM,CAAC6B,WAAW,EAEhCV,eAAe,EACDnB,MAAM,CAAC8B,YAAY,EAQjCpB,aAAa,EACCV,MAAM,CAAC+B,UAAU,EAE/BZ,eAAe,EACDnB,MAAM,CAACgC,WAAW,EAShC9B,WAAW,EAmBXiB,eAAe,EACDnB,MAAM,CAACiC,WAAW,EAEhCvB,aAAa,EACC,UAAAG,KAAK;EAAA,OAAEA,KAAK,CAACqB,UAAU,GAAGlC,MAAM,CAACuB,WAAW,GAAIvB,MAAM,CAACoB,WAAW;AAAA,GAMrEpB,MAAM,CAACmC,WAAW,EAO7BhB,eAAe,EACDnB,MAAM,CAACoC,WAAW,EAGhC1B,aAAa,EACC,UAAAG,KAAK;EAAA,OAAEA,KAAK,CAACqB,UAAU,GAAGlC,MAAM,CAACiC,WAAW,GAAGjC,MAAM,CAACuB,WAAW;AAAA,GAOpEvB,MAAM,CAACqC,WAAW,CAIlC;AAED,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,CAAIC,UAAkB,EAAK;EAClD,QAAOA,UAAU;IACf,KAAK,SAAS;MAAG,oBAAO,KAAC,WAAW,CAAC,SAAS;QAAC,KAAK,EAAEvC,MAAM,CAACwC,KAAM;QAAC,SAAS,EAAE;MAA0B,EAAE;IAE3G,KAAK,WAAW;MAAG,oBAAO,KAAC,WAAW,CAAC,KAAK;QAAC,KAAK,EAAExC,MAAM,CAACwC,KAAM;QAAC,SAAS,EAAE;MAA0B,EAAE;IAEzG;MAAU,oBAAO,KAAC,WAAW,CAAC,KAAK;QAAC,KAAK,EAAExC,MAAM,CAACwC,KAAM;QAAC,SAAS,EAAE;MAA0B,EAAE;EAAC;AAErG,CAAC;AAaD,IAAMC,UAAoD,GAAG,SAAvDA,UAAoD,OAWU;EAAA,IAVJC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACPL,UAAU,QAAVA,UAAU;IACVM,EAAE,QAAFA,EAAE;IACFC,SAAS,QAATA,SAAS;IAAA,qBACTC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,qBAChBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,iBAChBlC,IAAI;IAAJA,IAAI,0BAAGV,IAAI,CAAC6C,MAAM;IACfC,IAAI;EAErE,oBACE,MAAC,eAAe;IACd,OAAO,EAAEN,OAAQ;IACjB,UAAU,EAAEG,QAAS;IACrB,QAAQ,EAAGC,QAAQ,IAAIT,UAAU,GAAI,CAAC,CAAC,GAAG,CAAE;IAC5C,WAAW,EAAEtC,yBAA0B;IACvC,IAAI,EAAEa,IAAK;IACX,SAAS,EAAE,cAAc,CAACqC,MAAM,CAACJ,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CAC1DI,MAAM,CAACH,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CACnCG,MAAM,CAACZ,UAAU,GAAG,UAAU,GAAGA,UAAU,GAAG,EAAE,CAAC,CACjDY,MAAM,CAACL,SAAS,GAAG,GAAG,GAAGA,SAAS,GAAG,EAAE,CAAE;IAC5C,eAAa,WAAY;IACzB,gBAAcC,QAAS;IACvB,IAAI,EAAEJ,IAAI,KAAK,OAAO,GAAE,OAAO,GAAG;EAAW,GACzCO,IAAI;IAAA,wBACN,KAAC,eAAe;MAAC,eAAa,cAAe;MAAC,SAAS,EAAE,kBAAmB;MAAC,IAAI,EAAEpC,IAAK;MAAA,UAEpFyB,UAAU,GAAGD,mBAAmB,CAACC,UAAU,CAAC,GACxBI,IAAI,KAAG,OAAO,gBAAG,KAAC,WAAW;QAAC,QAAQ,EAAEI,QAAS;QAAC,QAAQ,EAAEC,QAAS;QAAC,IAAI,EAAElC,IAAK;QAAC,WAAW,EAAE,CAAC,CAAE;QAClG,MAAM,EAAE,kBAAI,CAAC,CAAE;QAAC,EAAE,EAAE+B;MAAG,EAAE,gBAAG,KAAC,QAAQ;QAAC,QAAQ,EAAEE,QAAS;QAAC,QAAQ,EAAEC,QAAS;QAAC,IAAI,EAAElC,IAAK;QAAC,WAAW,EAAE,CAAC,CAAE;QAC1G,MAAM,EAAE,kBAAI,CAAC,CAAE;QAAC,EAAE,EAAE+B;MAAG;IACxB,EAEL,eAElB,KAAC,aAAa;MAAC,eAAa,cAAe;MAAC,SAAS,EAAE,kBAAmB;MAAC,IAAI,EAAE/B,IAAK;MAAA,uBACpF,KAAC,WAAW;QAAC,IAAI,EAAEA,IAAK;QAAA,UACrB4B;MAAI;IACO,EACA;EAAA,GACF;AAEtB,CAAC;AAAC;EAtDAH,UAAU,aAAG,SAAS,EAAG,WAAW,EAAG,SAAS;EAChDG,IAAI;EACJE,OAAO;EACPC,EAAE;EACFE,QAAQ;EACRC,QAAQ;EAERL,IAAI,aAAE,OAAO,EAAG,UAAU;AAAA;AAiD5B,eAAeF,UAAU"}
+{"version":3,"file":"QuizButton.js","names":["React","styled","Checkbox","COLORS","defaultOnMouseDownHandler","focusStyles","RadioButton","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","TextContainer","div","accent1_20","props","size","Small","Large","Regular","TextWrapper","ButtonContainer","accent1_100","accent1_600","OptionContainer","accent1_200","neutral_100","neutral_20","neutral_300","correct_20","correct_400","critical_20","critical_500","warning_20","warning_400","accent1_300","isSelected","accent1_700","accent1_400","accent1_800","renderResultContent","resultType","white","QuizButton","text","type","onClick","id","className","selected","disabled","Medium","rest","concat"],"sources":["../../src/QuizButton/QuizButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, RadioButton, Size, SystemIcons} from '..';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nconst TextContainer = styled.div<{size: Size}>`\r\n  border-radius: 0 8px 8px 0;\r\n  display: flex;\r\n  background: ${COLORS.accent1_20};\r\n  width: 100%;\r\n\r\n  transition: background 100ms ease-in-out;\r\n  align-items: center;\r\n\r\n  padding: ${props=>props.size===Size.Small?'6px 8px':(props.size===Size.Large?'20px 16px':'12px 16px')};\r\n  ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Regular,null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Regular,null) : ComponentMStyling(ComponentTextStyle.Regular,null))}\r\n`;\r\n\r\nconst TextWrapper = styled.div<{size:Size}>``;\r\n\r\nconst ButtonContainer = styled.div<{size: Size}>`\r\n  border-radius: 8px 0 0 8px;\r\n  display: flex;\r\n  background: ${COLORS.accent1_100};\r\n\r\n  width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\r\n\r\n  transition: background 100ms ease-in-out;\r\n\r\n  .quiz-button-result-icon {\r\n    height: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\r\n    width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\r\n  }\r\n\r\n  .radio-button-icon, .checkbox-icon {\r\n    margin: auto;\r\n    min-width: unset;\r\n    background: transparent;\r\n\r\n    svg {\r\n      color: ${COLORS.accent1_600};\r\n    }\r\n\r\n    &:hover {\r\n      background: transparent;\r\n    }\r\n\r\n    &:active {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  .small {\r\n    min-width: 32px;\r\n    min-height: 32px;\r\n    .radio-button-icon, .checkbox-icon {\r\n      svg {\r\n        height: 16px;\r\n        width: 16px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .medium {\r\n    min-width: 48px;\r\n    min-height: 48px;\r\n    .radio-button-icon, .checkbox-icon {\r\n      svg {\r\n        height: 24px;\r\n        width: 24px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .large {\r\n    min-width: 64px;\r\n    min-height: 64px;\r\n    .radio-button-icon, .checkbox-icon {\r\n      svg {\r\n        height: 32px;\r\n        width: 32px;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst OptionContainer = styled.div<{isSelected:boolean, size:Size}>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  cursor: pointer;\r\n  max-width: 65ch;  \r\n  word-break: break-word;\r\n\r\n  min-height: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\r\n  margin-bottom: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\r\n\r\n  &.selected {\r\n    ${TextContainer} {\r\n      background: ${COLORS.accent1_100};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${COLORS.accent1_200};\r\n    }\r\n  }\r\n  \r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    \r\n    ${ButtonContainer} {\r\n      pointer-events: none;\r\n      background: ${COLORS.neutral_100};\r\n    }\r\n    ${TextContainer} {\r\n      pointer-events: none;\r\n      background: ${COLORS.neutral_20};\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  &.correct {\r\n    ${TextContainer} {    \r\n      background: ${COLORS.correct_20};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${COLORS.correct_400};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.incorrect {\r\n    ${TextContainer} {    \r\n      background: ${COLORS.critical_20};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${COLORS.critical_500};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.partial {\r\n    ${TextContainer} {    \r\n      background: ${COLORS.warning_20};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${COLORS.warning_400};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled):not(.result),\r\n  &.hover-state {\r\n    ${ButtonContainer} {\r\n      background: ${COLORS.accent1_300};\r\n    }\r\n    ${TextContainer} {\r\n      background: ${props=>props.isSelected ? COLORS.accent1_200  : COLORS.accent1_100};\r\n    }\r\n    \r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n      svg {\r\n        color: ${COLORS.accent1_700};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled):not(.result),\r\n  &.active-state {\r\n    ${ButtonContainer} {\r\n      background: ${COLORS.accent1_400};\r\n      transition: none;\r\n    }\r\n    ${TextContainer} {\r\n      background: ${props=>props.isSelected ? COLORS.accent1_300 : COLORS.accent1_200};\r\n      transition: none;\r\n    }\r\n\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n      svg {\r\n        color: ${COLORS.accent1_800};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst renderResultContent = (resultType: string) => {\r\n  switch(resultType){\r\n    case 'correct' : return <SystemIcons.CheckMark color={COLORS.white} className={'quiz-button-result-icon'}/>;\r\n\r\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\r\n\r\n    default : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\r\n  }\r\n};\r\n\r\ntype QuizButtonProps = {\r\n  resultType?: 'correct' | 'incorrect' | 'partial';\r\n  text: string;\r\n  onClick?: (arg:any)=>void;\r\n  id: string;\r\n  selected?: boolean;\r\n  disabled?: boolean;\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  type: 'radio' | 'checkbox';\r\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>\r\n\r\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({\r\n                                                                text,\r\n                                                                type,\r\n                                                                onClick,\r\n                                                                resultType,\r\n                                                                id,\r\n                                                                className,\r\n                                                                selected = false,\r\n                                                                disabled = false,\r\n                                                                size = Size.Medium,\r\n                                                                ...rest\r\n                                                              }) => {\r\n  return (   \r\n    <OptionContainer\r\n      onClick={onClick}\r\n      isSelected={selected}\r\n      tabIndex={(disabled || resultType) ? -1 : 0}\r\n      onMouseDown={defaultOnMouseDownHandler}\r\n      size={size}\r\n      className={'quiz-button '.concat(selected ? ' selected' : '')\r\n        .concat(disabled ? ' disabled' : '')\r\n        .concat(resultType ? ' result ' + resultType : '')\r\n        .concat(className ? ' ' + className : '')}\r\n      data-testid={'container'}\r\n      aria-checked={selected}\r\n      role={type === 'radio'? 'radio' : 'checkbox'}\r\n      {...rest}>\r\n        <ButtonContainer data-testid={'btnContainer'} className={'quiz-button-icon'} size={size}>\r\n          {\r\n            resultType ? renderResultContent(resultType) : (\r\n                                type==='radio' ? <RadioButton selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\r\n                                select={()=>{}} id={id}/> : <Checkbox selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\r\n                                select={()=>{}} id={id}/>\r\n                              )\r\n          }\r\n        </ButtonContainer>\r\n\r\n        <TextContainer data-testid={'txtContainer'} className={'quiz-button-text'} size={size}>\r\n          <TextWrapper size={size}>\r\n            {text}\r\n          </TextWrapper>\r\n        </TextContainer>\r\n    </OptionContainer>\r\n  );\r\n};\r\n\r\nexport default QuizButton;\r\n"],"mappings":"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"}

package/dist/QuizButton/index.d.ts

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

package/dist/Scrollbar/Scrollbar.cjs

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SegmentControlItemContent = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject;
+
+var SegmentControlItemContent = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  border-radius: 8px;\n  padding: 0 16px;\n\n  background-color: transparent;\n  color: ", ";\n"])), _styles.COLORS.neutral_600);
+
+exports.SegmentControlItemContent = SegmentControlItemContent;
+
+var Scrollbar = function Scrollbar(_ref) {
+  var size = _ref.size;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+};
+
+var _default = Scrollbar;
+exports.default = _default;
+//# sourceMappingURL=Scrollbar.cjs.map

package/dist/Scrollbar/Scrollbar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Scrollbar/Scrollbar.tsx"],"names":["SegmentControlItemContent","styled","div","COLORS","neutral_600","Scrollbar","size"],"mappings":";;;;;;;;;;;;;AAAA;;AAEA;;AACA;;;;;;AAIO,IAAMA,yBAAyB,GAAGC,0BAAOC,GAAV,2QAS3BC,eAAOC,WAToB,CAA/B;;;;AAiBP,IAAMC,SAAkD,GAAG,SAArDA,SAAqD,OAAc;AAAA,MAAXC,IAAW,QAAXA,IAAW;AACrE,sBAAO,8CAAP;AACH,CAFD;;eAIeD,S","sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {COLORS} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\n\r\nexport const SegmentControlItemContent = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n  border-radius: 8px;\r\n  padding: 0 16px;\r\n\r\n  background-color: transparent;\r\n  color: ${COLORS.neutral_600};\r\n`;\r\n\r\n\r\nexport interface ScrollbarProps {\r\n  size?: Size.Small | Size.Medium;\r\n}\r\n\r\nconst Scrollbar: React.FunctionComponent<ScrollbarProps> = ({ size }) => {\r\n    return <></>;\r\n};\r\n\r\nexport default Scrollbar;\r\n"],"file":"Scrollbar.cjs"}

package/dist/Scrollbar/Scrollbar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Size } from '../types';
+export declare const SegmentControlItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export interface ScrollbarProps {
+    size?: Size.Small | Size.Medium;
+}
+declare const Scrollbar: React.FunctionComponent<ScrollbarProps>;
+export default Scrollbar;

package/dist/Scrollbar/Scrollbar.js

@@ -0,0 +1,19 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject;
+
+import React from 'react';
+import styled from 'styled-components';
+import { COLORS } from '../styles';
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var SegmentControlItemContent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  border-radius: 8px;\n  padding: 0 16px;\n\n  background-color: transparent;\n  color: ", ";\n"])), COLORS.neutral_600);
+
+var Scrollbar = function Scrollbar(_ref) {
+  var size = _ref.size;
+  return /*#__PURE__*/_jsx(_Fragment, {});
+};
+
+export default Scrollbar;
+//# sourceMappingURL=Scrollbar.js.map

package/dist/Scrollbar/Scrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Scrollbar/Scrollbar.tsx"],"names":["React","styled","COLORS","SegmentControlItemContent","div","neutral_600","Scrollbar","size"],"mappings":";;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,QAAqB,WAArB;;;AAIA,OAAO,IAAMC,yBAAyB,GAAGF,MAAM,CAACG,GAAV,6PAS3BF,MAAM,CAACG,WAToB,CAA/B;;AAiBP,IAAMC,SAAkD,GAAG,SAArDA,SAAqD,OAAc;AAAA,MAAXC,IAAW,QAAXA,IAAW;AACrE,sBAAO,mBAAP;AACH,CAFD;;AAIA,eAAeD,SAAf","sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {COLORS} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\n\r\nexport const SegmentControlItemContent = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n  border-radius: 8px;\r\n  padding: 0 16px;\r\n\r\n  background-color: transparent;\r\n  color: ${COLORS.neutral_600};\r\n`;\r\n\r\n\r\nexport interface ScrollbarProps {\r\n  size?: Size.Small | Size.Medium;\r\n}\r\n\r\nconst Scrollbar: React.FunctionComponent<ScrollbarProps> = ({ size }) => {\r\n    return <></>;\r\n};\r\n\r\nexport default Scrollbar;\r\n"],"file":"Scrollbar.js"}

package/dist/SegmentControl/SegmentControl.cjs.map

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

package/dist/SegmentControl/SegmentControl.d.ts

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

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","SegmentControlItemContent","div","neutral_600","SegmentControlItemBackground","neutral_20","SegmentControlItemWrapper","hover","primary_100","primary_700","active","primary_200","primary_800","neutral_300","primary_500","white","neutral_100","SegmentControlWrapper","Bold","SegmentControl","items","size","Medium","onChange","selected","className","rest","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","map","a","i","content","undefined"],"sources":["../../src/SegmentControl/SegmentControl.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\nexport const SegmentControlItemContent = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  border-radius: 8px;\n  padding: 0 16px;\n\n  background-color: transparent;\n  color: ${COLORS.neutral_600};\n`\n\nexport const SegmentControlItemBackground = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${COLORS.neutral_20};\n  padding: 4px 0px;\n`;\n\nexport const SegmentControlItemWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  cursor: pointer;\n  min-height: 48px;\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n\n    ${SegmentControlItemContent} {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n\n    ${SegmentControlItemContent} {\n      background-color: ${COLORS.primary_200};\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ${SegmentControlItemContent} {\n      background-color: transparent;\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.selected {\n    cursor: default;\n    pointer-events: none;\n\n    ${SegmentControlItemContent} {\n      background-color: ${COLORS.primary_500};\n      color: ${COLORS.white};\n    }\n  }\n\n  &.selected.disabled {\n    cursor: not-allowed;\n    pointer-events: unset;\n    \n    ${SegmentControlItemContent} {\n      background-color: ${COLORS.neutral_100};\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport const SegmentControlWrapper = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  ${SegmentControlItemWrapper}:first-of-type {\n    ${SegmentControlItemBackground} {\n      border-bottom-left-radius: 12px;\n      border-top-left-radius: 12px;\n      padding-left: 4px;\n    }\n  }\n\n  ${SegmentControlItemWrapper}:last-of-type {\n    ${SegmentControlItemBackground} {\n      border-bottom-right-radius: 12px;\n      border-top-right-radius: 12px;\n      padding-right: 4px;\n    }\n  }\n\n\n  &.small {\n    ${SegmentControlItemContent} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n      min-height: 32px;\n    }\n  }\n\n  &.medium {\n    ${SegmentControlItemContent} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      min-height: 40px;\n    }\n  }\n`;\n\n\nexport interface SegmentControlItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\n  key: string\n  disabled?: boolean;\n  content: React.ReactNode | string;\n}\n\ninterface SegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  items: SegmentControlItem[];\n  selected: string;\n  onChange: (value: string) => void;\n  size?: Size.Small | Size.Medium;\n}\n\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\n                                                                        items,\n                                                                        size = Size.Medium,\n                                                                        onChange,\n                                                                        selected,\n                                                                        className,\n                                                                        ...rest\n                                                                      }) => {\n  const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      //@ts-ignore\n      document?.activeElement?.blur();\n      !item.disabled && onChange(item.key);\n    }\n  };\n\n  const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\n    !item.disabled && onChange(item.key);\n  }\n\n  return (\n    <SegmentControlWrapper className={`${size} ${className || ''}`} {...rest}>\n      {items.map((a, i) => {\n        const {key, disabled, content, className, ...rest} = a;\n        return <SegmentControlItemWrapper key={a.key || i}\n                                          className={(className || '') + (a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\n                                          tabIndex={a.disabled || a.key === selected ? -1 : 0}\n                                          onClick={a.disabled ? undefined : (e) => onClick(e, a)}\n                                          onMouseDown={defaultOnMouseDownHandler}\n                                          onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}\n                                          {...rest}>\n          <SegmentControlItemBackground>\n            <SegmentControlItemContent>\n              {a.content}\n            </SegmentControlItemContent>\n          </SegmentControlItemBackground>\n        </SegmentControlItemWrapper>;\n      })\n      }\n    </SegmentControlWrapper>\n  );\n};\n\nexport default SegmentControl;\n"],"mappings":"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"}
+{"version":3,"file":"SegmentControl.js","names":["React","Size","styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","SegmentControlItemContent","div","neutral_600","SegmentControlItemBackground","neutral_20","SegmentControlItemWrapper","hover","primary_100","primary_700","active","primary_200","primary_800","neutral_300","primary_500","white","neutral_100","SegmentControlWrapper","Bold","SegmentControl","items","size","Medium","onChange","selected","className","rest","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","map","a","i","content","undefined"],"sources":["../../src/SegmentControl/SegmentControl.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\n\r\nexport const SegmentControlItemContent = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n  border-radius: 8px;\r\n  padding: 0 16px;\r\n\r\n  background-color: transparent;\r\n  color: ${COLORS.neutral_600};\r\n`\r\n\r\nexport const SegmentControlItemBackground = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  background-color: ${COLORS.neutral_20};\r\n  padding: 4px 0px;\r\n`;\r\n\r\nexport const SegmentControlItemWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex: 1;\r\n  cursor: pointer;\r\n  min-height: 48px;\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover {\r\n    z-index: ${Z_INDEXES.hover};\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${COLORS.primary_100};\r\n      color: ${COLORS.primary_700};\r\n    }\r\n  }\r\n\r\n  &:active {\r\n    z-index: ${Z_INDEXES.active};\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${COLORS.primary_200};\r\n      color: ${COLORS.primary_800};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: transparent;\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n\r\n  &.selected {\r\n    cursor: default;\r\n    pointer-events: none;\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${COLORS.primary_500};\r\n      color: ${COLORS.white};\r\n    }\r\n  }\r\n\r\n  &.selected.disabled {\r\n    cursor: not-allowed;\r\n    pointer-events: unset;\r\n    \r\n    ${SegmentControlItemContent} {\r\n      background-color: ${COLORS.neutral_100};\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const SegmentControlWrapper = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  ${SegmentControlItemWrapper}:first-of-type {\r\n    ${SegmentControlItemBackground} {\r\n      border-bottom-left-radius: 12px;\r\n      border-top-left-radius: 12px;\r\n      padding-left: 4px;\r\n    }\r\n  }\r\n\r\n  ${SegmentControlItemWrapper}:last-of-type {\r\n    ${SegmentControlItemBackground} {\r\n      border-bottom-right-radius: 12px;\r\n      border-top-right-radius: 12px;\r\n      padding-right: 4px;\r\n    }\r\n  }\r\n\r\n\r\n  &.small {\r\n    ${SegmentControlItemContent} {\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n      min-height: 32px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${SegmentControlItemContent} {\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n      min-height: 40px;\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface SegmentControlItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  key: string\r\n  disabled?: boolean;\r\n  content: React.ReactNode | string;\r\n}\r\n\r\ninterface SegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\r\n  items: SegmentControlItem[];\r\n  selected: string;\r\n  onChange: (value: string) => void;\r\n  size?: Size.Small | Size.Medium;\r\n}\r\n\r\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\r\n                                                                        items,\r\n                                                                        size = Size.Medium,\r\n                                                                        onChange,\r\n                                                                        selected,\r\n                                                                        className,\r\n                                                                        ...rest\r\n                                                                      }) => {\r\n  const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      //@ts-ignore\r\n      document?.activeElement?.blur();\r\n      !item.disabled && onChange(item.key);\r\n    }\r\n  };\r\n\r\n  const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\r\n    !item.disabled && onChange(item.key);\r\n  }\r\n\r\n  return (\r\n    <SegmentControlWrapper className={`${size} ${className || ''}`} {...rest}>\r\n      {items.map((a, i) => {\r\n        const {key, disabled, content, className, ...rest} = a;\r\n        return <SegmentControlItemWrapper key={a.key || i}\r\n                                          className={(className || '') + (a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\r\n                                          tabIndex={a.disabled || a.key === selected ? -1 : 0}\r\n                                          onClick={a.disabled ? undefined : (e) => onClick(e, a)}\r\n                                          onMouseDown={defaultOnMouseDownHandler}\r\n                                          onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}\r\n                                          {...rest}>\r\n          <SegmentControlItemBackground>\r\n            <SegmentControlItemContent>\r\n              {a.content}\r\n            </SegmentControlItemContent>\r\n          </SegmentControlItemBackground>\r\n        </SegmentControlItemWrapper>;\r\n      })\r\n      }\r\n    </SegmentControlWrapper>\r\n  );\r\n};\r\n\r\nexport default SegmentControl;\r\n"],"mappings":";;;;;;;;;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;AAGpD,OAAO,IAAMC,yBAAyB,GAAGR,MAAM,CAACS,GAAG,6PASxCR,MAAM,CAACS,WAAW,CAC5B;AAED,OAAO,IAAMC,4BAA4B,GAAGX,MAAM,CAACS,GAAG,wMAKhCR,MAAM,CAACW,UAAU,CAEtC;AAED,OAAO,IAAMC,yBAAyB,GAAGb,MAAM,CAACS,GAAG,84BAU7CJ,WAAW,EAIFC,SAAS,CAACQ,KAAK,EAExBN,yBAAyB,EACLP,MAAM,CAACc,WAAW,EAC7Bd,MAAM,CAACe,WAAW,EAKlBV,SAAS,CAACW,MAAM,EAEzBT,yBAAyB,EACLP,MAAM,CAACiB,WAAW,EAC7BjB,MAAM,CAACkB,WAAW,EAO3BX,yBAAyB,EAEhBP,MAAM,CAACmB,WAAW,EAQ3BZ,yBAAyB,EACLP,MAAM,CAACoB,WAAW,EAC7BpB,MAAM,CAACqB,KAAK,EAQrBd,yBAAyB,EACLP,MAAM,CAACsB,WAAW,EAC7BtB,MAAM,CAACmB,WAAW,CAGhC;AAED,OAAO,IAAMI,qBAAqB,GAAGxB,MAAM,CAACS,GAAG,2mBAM3CI,yBAAyB,EACvBF,4BAA4B,EAO9BE,yBAAyB,EACvBF,4BAA4B,EAS5BH,yBAAyB,EACvBL,iBAAiB,CAACC,kBAAkB,CAACqB,IAAI,EAAE,IAAI,CAAC,EAMlDjB,yBAAyB,EACvBN,iBAAiB,CAACE,kBAAkB,CAACqB,IAAI,EAAE,IAAI,CAAC,CAIvD;AAgBD,IAAMC,cAA4D,GAAG,SAA/DA,cAA4D,OAOU;EAAA,IANJC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG7B,IAAI,CAAC8B,MAAM;IAClBC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,IAAI;EAE7E,IAAMC,UAAU,GAAG,SAAbA,UAAU,CAAIC,CAAsC,EAAEC,IAAwB,EAAK;IACvF,IAAID,CAAC,CAACE,GAAG,KAAK,OAAO,IAAIF,CAAC,CAACE,GAAG,KAAK,GAAG,EAAE;MAAA;MACtC;MACA,aAAAC,QAAQ,uEAAR,UAAUC,aAAa,0DAAvB,sBAAyBC,IAAI,EAAE;MAC/B,CAACJ,IAAI,CAACK,QAAQ,IAAIX,QAAQ,CAACM,IAAI,CAACC,GAAG,CAAC;IACtC;EACF,CAAC;EAED,IAAMK,OAAO,GAAG,SAAVA,OAAO,CAAIP,CAAmB,EAAEC,IAAwB,EAAK;IACjE,CAACA,IAAI,CAACK,QAAQ,IAAIX,QAAQ,CAACM,IAAI,CAACC,GAAG,CAAC;EACtC,CAAC;EAED,oBACE,KAAC,qBAAqB;IAAC,SAAS,YAAKT,IAAI,cAAII,SAAS,IAAI,EAAE;EAAG,GAAKC,IAAI;IAAA,UACrEN,KAAK,CAACgB,GAAG,CAAC,UAACC,CAAC,EAAEC,CAAC,EAAK;MACnB,IAAOR,GAAG,GAA2CO,CAAC,CAA/CP,GAAG;QAAEI,QAAQ,GAAiCG,CAAC,CAA1CH,QAAQ;QAAEK,OAAO,GAAwBF,CAAC,CAAhCE,OAAO;QAAEd,SAAS,GAAaY,CAAC,CAAvBZ,SAAS;QAAKC,IAAI,4BAAIW,CAAC;MACtD,oBAAO,KAAC,yBAAyB;QACC,SAAS,EAAE,CAACZ,SAAS,IAAI,EAAE,KAAKY,CAAC,CAACH,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC,IAAIG,CAAC,CAACP,GAAG,KAAKN,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAE;QACxG,QAAQ,EAAEa,CAAC,CAACH,QAAQ,IAAIG,CAAC,CAACP,GAAG,KAAKN,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;QACpD,OAAO,EAAEa,CAAC,CAACH,QAAQ,GAAGM,SAAS,GAAG,UAACZ,CAAC;UAAA,OAAKO,OAAO,CAACP,CAAC,EAAES,CAAC,CAAC;QAAA,CAAC;QACvD,WAAW,EAAErC,yBAA0B;QACvC,UAAU,EAAEqC,CAAC,CAACH,QAAQ,GAAGM,SAAS,GAAG,UAACZ,CAAC;UAAA,OAAKD,UAAU,CAACC,CAAC,EAAES,CAAC,CAAC;QAAA;MAAC,GACzDX,IAAI;QAAA,uBACxC,KAAC,4BAA4B;UAAA,uBAC3B,KAAC,yBAAyB;YAAA,UACvBW,CAAC,CAACE;UAAO;QACgB;MACC,IAXMF,CAAC,CAACP,GAAG,IAAIQ,CAAC,CAYrB;IAC9B,CAAC;EAAC,GAEoB;AAE5B,CAAC;AAAC;EA/CAlB,KAAK;IANLU,GAAG;IACHI,QAAQ;IACRK,OAAO;EAAA;EAKPf,QAAQ;EACRD,QAAQ;AAAA;AA+CV,eAAeJ,cAAc"}

package/dist/SegmentControl/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/SegmentControl/index.ts"],"sourcesContent":["import {SegmentControlItem, default as SegmentControl} from './SegmentControl'\n\nexport type {SegmentControlItem}\nexport {SegmentControl}\n"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/SegmentControl/index.ts"],"sourcesContent":["import {SegmentControlItem, default as SegmentControl} from './SegmentControl'\r\n\r\nexport type {SegmentControlItem}\r\nexport {SegmentControl}\r\n"],"mappings":";;;;;;;;;;;;AAAA"}

package/dist/SegmentControl/index.d.ts

@@ -1,3 +1,3 @@
-import { SegmentControlItem, default as SegmentControl } from './SegmentControl';
-export type { SegmentControlItem };
-export { SegmentControl };
+import { SegmentControlItem, default as SegmentControl } from './SegmentControl';
+export type { SegmentControlItem };
+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} from './SegmentControl'\n\nexport type {SegmentControlItem}\nexport {SegmentControl}\n"],"mappings":"AAAA,SAA4BA,OAAO,IAAIC,cAAc,QAAO,kBAAkB;AAG9E,SAAQA,cAAc"}
+{"version":3,"file":"index.js","names":["default","SegmentControl"],"sources":["../../src/SegmentControl/index.ts"],"sourcesContent":["import {SegmentControlItem, default as SegmentControl} from './SegmentControl'\r\n\r\nexport type {SegmentControlItem}\r\nexport {SegmentControl}\r\n"],"mappings":"AAAA,SAA4BA,OAAO,IAAIC,cAAc,QAAO,kBAAkB;AAG9E,SAAQA,cAAc"}

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() {\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,UAAU,GAAG;EAC3B,IAAIC,EAAE,GAAG,IAAIC,IAAI,EAAE,CAACC,OAAO,EAAE;EAC7B;EACA,OAAO,sCAAsC,CAACC,OAAO,CAAC,OAAO,EAAE,UAASC,CAAC,EAAE;IACzE;IACA,IAAMC,CAAC,GAAG,CAACL,EAAE,GAAGM,IAAI,CAACC,MAAM,EAAE,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"}
+{"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,UAAU,GAAG;EAC3B,IAAIC,EAAE,GAAG,IAAIC,IAAI,EAAE,CAACC,OAAO,EAAE;EAC7B;EACA,OAAO,sCAAsC,CAACC,OAAO,CAAC,OAAO,EAAE,UAASC,CAAC,EAAE;IACzE;IACA,IAAMC,CAAC,GAAG,CAACL,EAAE,GAAGM,IAAI,CAACC,MAAM,EAAE,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"}

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() {\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,UAAU,GAAG;EAC3B,IAAIC,EAAE,GAAG,IAAIC,IAAI,EAAE,CAACC,OAAO,EAAE;EAC7B;EACA,OAAO,sCAAsC,CAACC,OAAO,CAAC,OAAO,EAAE,UAASC,CAAC,EAAE;IACzE;IACA,IAAMC,CAAC,GAAG,CAACL,EAAE,GAAGM,IAAI,CAACC,MAAM,EAAE,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"}
+{"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,UAAU,GAAG;EAC3B,IAAIC,EAAE,GAAG,IAAIC,IAAI,EAAE,CAACC,OAAO,EAAE;EAC7B;EACA,OAAO,sCAAsC,CAACC,OAAO,CAAC,OAAO,EAAE,UAASC,CAAC,EAAE;IACzE;IACA,IAAMC,CAAC,GAAG,CAACL,EAAE,GAAGM,IAAI,CAACC,MAAM,EAAE,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"}

package/dist/SideMenu/SideMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SideMenu.cjs","names":["Wrapper","styled","div","Z_INDEXES","off_canvas","COLORS","white","BOXSHADOWS","BOXSHADOW_CENTERED","SideMenu","props","size","Size","Medium","className","rest","footer"],"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: ${COLORS.white};\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":";;;;;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AAA8B;AAAA;AAAA;AAAA;AAAA;AAE9B,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,wYACbC,iBAAS,CAACC,UAAU,EAGjBC,cAAM,CAACC,KAAK,EAMZC,kBAAU,CAACC,kBAAkB,CAa5C;AAGD,IAAMC,QAAgD,GAAG,SAAnDA,QAAgD,CAAIC,KAAK,EAAK;EAClE,kBAAiDA,KAAK,CAA/CC,IAAI;IAAJA,IAAI,4BAAGC,WAAI,CAACC,MAAM;IAAEC,SAAS,GAAaJ,KAAK,CAA3BI,SAAS;IAAKC,IAAI,0CAAIL,KAAK;EAEtD,oBACE,sBAAC,OAAO;IAAC,SAAS,YAAKC,IAAI,cAAIG,SAAS,IAAI,EAAE;EAAG,GAAKC,IAAI;IAAA,wBACxD,qBAAC,8BAAc,oBAAKL,KAAK,EAAI,eAC7B,qBAAC,0BAAY,oBAAKA,KAAK,EAAG,EACzBA,KAAK,CAACM,MAAM,iBAAI,qBAAC,8BAAc,oBAAKN,KAAK,EAAG;EAAA,GACrC;AAEd,CAAC;AAAA,eAEcD,QAAQ;AAAA"}
+{"version":3,"file":"SideMenu.cjs","names":["Wrapper","styled","div","Z_INDEXES","off_canvas","COLORS","white","BOXSHADOWS","BOXSHADOW_CENTERED","SideMenu","props","size","Size","Medium","className","rest","footer"],"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: ${COLORS.white};\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":";;;;;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AAA8B;AAAA;AAAA;AAAA;AAAA;AAE9B,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,wYACbC,iBAAS,CAACC,UAAU,EAGjBC,cAAM,CAACC,KAAK,EAMZC,kBAAU,CAACC,kBAAkB,CAa5C;AAGD,IAAMC,QAAgD,GAAG,SAAnDA,QAAgD,CAAIC,KAAK,EAAK;EAClE,kBAAiDA,KAAK,CAA/CC,IAAI;IAAJA,IAAI,4BAAGC,WAAI,CAACC,MAAM;IAAEC,SAAS,GAAaJ,KAAK,CAA3BI,SAAS;IAAKC,IAAI,0CAAIL,KAAK;EAEtD,oBACE,sBAAC,OAAO;IAAC,SAAS,YAAKC,IAAI,cAAIG,SAAS,IAAI,EAAE;EAAG,GAAKC,IAAI;IAAA,wBACxD,qBAAC,8BAAc,oBAAKL,KAAK,EAAI,eAC7B,qBAAC,0BAAY,oBAAKA,KAAK,EAAG,EACzBA,KAAK,CAACM,MAAM,iBAAI,qBAAC,8BAAc,oBAAKN,KAAK,EAAG;EAAA,GACrC;AAEd,CAAC;AAAA,eAEcD,QAAQ;AAAA"}

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;

package/dist/SideMenu/SideMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideMenu.js","names":["React","styled","SideMenuHeader","SideMenuFooter","SideMenuBody","BOXSHADOWS","COLORS","Z_INDEXES","Size","Wrapper","div","off_canvas","white","BOXSHADOW_CENTERED","SideMenu","props","size","Medium","className","rest","footer"],"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: ${COLORS.white};\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":";;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,SAAQC,cAAc,QAAO,kBAAkB;AAC/C,SAAQC,cAAc,QAAO,kBAAkB;AAC/C,SAAQC,YAAY,QAAO,gBAAgB;AAC3C,SAAQC,UAAU,EAAEC,MAAM,EAAEC,SAAS,QAAO,WAAW;AACvD,SAAQC,IAAI,QAAO,UAAU;AAAC;AAAA;AAE9B,IAAMC,OAAO,GAAGR,MAAM,CAACS,GAAG,0XACbH,SAAS,CAACI,UAAU,EAGjBL,MAAM,CAACM,KAAK,EAMZP,UAAU,CAACQ,kBAAkB,CAa5C;AAGD,IAAMC,QAAgD,GAAG,SAAnDA,QAAgD,CAAIC,KAAK,EAAK;EAClE,kBAAiDA,KAAK,CAA/CC,IAAI;IAAJA,IAAI,4BAAGR,IAAI,CAACS,MAAM;IAAEC,SAAS,GAAaH,KAAK,CAA3BG,SAAS;IAAKC,IAAI,4BAAIJ,KAAK;EAEtD,oBACE,MAAC,OAAO;IAAC,SAAS,YAAKC,IAAI,cAAIE,SAAS,IAAI,EAAE;EAAG,GAAKC,IAAI;IAAA,wBACxD,KAAC,cAAc,oBAAKJ,KAAK,EAAI,eAC7B,KAAC,YAAY,oBAAKA,KAAK,EAAG,EACzBA,KAAK,CAACK,MAAM,iBAAI,KAAC,cAAc,oBAAKL,KAAK,EAAG;EAAA,GACrC;AAEd,CAAC;AAED,eAAeD,QAAQ"}
+{"version":3,"file":"SideMenu.js","names":["React","styled","SideMenuHeader","SideMenuFooter","SideMenuBody","BOXSHADOWS","COLORS","Z_INDEXES","Size","Wrapper","div","off_canvas","white","BOXSHADOW_CENTERED","SideMenu","props","size","Medium","className","rest","footer"],"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: ${COLORS.white};\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":";;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,SAAQC,cAAc,QAAO,kBAAkB;AAC/C,SAAQC,cAAc,QAAO,kBAAkB;AAC/C,SAAQC,YAAY,QAAO,gBAAgB;AAC3C,SAAQC,UAAU,EAAEC,MAAM,EAAEC,SAAS,QAAO,WAAW;AACvD,SAAQC,IAAI,QAAO,UAAU;AAAC;AAAA;AAE9B,IAAMC,OAAO,GAAGR,MAAM,CAACS,GAAG,0XACbH,SAAS,CAACI,UAAU,EAGjBL,MAAM,CAACM,KAAK,EAMZP,UAAU,CAACQ,kBAAkB,CAa5C;AAGD,IAAMC,QAAgD,GAAG,SAAnDA,QAAgD,CAAIC,KAAK,EAAK;EAClE,kBAAiDA,KAAK,CAA/CC,IAAI;IAAJA,IAAI,4BAAGR,IAAI,CAACS,MAAM;IAAEC,SAAS,GAAaH,KAAK,CAA3BG,SAAS;IAAKC,IAAI,4BAAIJ,KAAK;EAEtD,oBACE,MAAC,OAAO;IAAC,SAAS,YAAKC,IAAI,cAAIE,SAAS,IAAI,EAAE;EAAG,GAAKC,IAAI;IAAA,wBACxD,KAAC,cAAc,oBAAKJ,KAAK,EAAI,eAC7B,KAAC,YAAY,oBAAKA,KAAK,EAAG,EACzBA,KAAK,CAACK,MAAM,iBAAI,KAAC,cAAc,oBAAKL,KAAK,EAAG;EAAA,GACrC;AAEd,CAAC;AAED,eAAeD,QAAQ"}

package/dist/SideMenu/SideMenuBody.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SideMenuBody.cjs","names":["Wrapper","styled","div","ScrollableContainer","scrollBarStyling","Size","Small","SideMenuBody","props","React","useState","scrollable","setScrollable","useDimensionsRef","updateOnResize","ref","dimensions","node","useEffect","clientHeight","scrollHeight","children"],"sources":["../../src/SideMenu/SideMenuBody.tsx"],"sourcesContent":["import React from 'react';\nimport {SideMenuProps} from './types';\nimport styled from 'styled-components';\nimport {scrollBarStyling} from '../styles';\nimport {Size} from '../types';\nimport {useDimensionsRef} from 'rooks';\n\nconst Wrapper = styled.div`\n  padding: 8px 0;\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\nconst ScrollableContainer = styled.div`\n  flex: 1;\n  display: flex;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 6px;\n  }\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\n\nexport const SideMenuBody = (props: SideMenuProps) => {\n  const [scrollable, setScrollable] = React.useState(false);\n  const [ref, dimensions, node] = useDimensionsRef({updateOnResize: true});\n\n  React.useEffect(() => {\n    const clientHeight = node?.clientHeight ?? 0;\n    const scrollHeight = node?.scrollHeight ?? 0;\n    setScrollable(scrollHeight > clientHeight);\n  }, [dimensions, node, props.children]);\n\n  return (\n    <Wrapper>\n      <ScrollableContainer ref={ref as any}\n                           className={scrollable ? 'scrollable' : ''}>\n        {props.children}\n      </ScrollableContainer>\n    </Wrapper>\n  )\n};\n"],"mappings":";;;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AAAuC;AAAA;AAEvC,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,4NAQzB;AAED,IAAMC,mBAAmB,GAAGF,yBAAM,CAACC,GAAG,oPAWlC,IAAAE,wBAAgB,EAACC,WAAI,CAACC,KAAK,CAAC,CAC/B;AAGM,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAoB,EAAK;EACpD,sBAAoCC,cAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAAlDC,UAAU;IAAEC,aAAa;EAChC,wBAAgC,IAAAC,uBAAgB,EAAC;MAACC,cAAc,EAAE;IAAI,CAAC,CAAC;IAAA;IAAjEC,GAAG;IAAEC,UAAU;IAAEC,IAAI;EAE5BR,cAAK,CAACS,SAAS,CAAC,YAAM;IAAA;IACpB,IAAMC,YAAY,yBAAGF,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE,YAAY,mEAAI,CAAC;IAC5C,IAAMC,YAAY,yBAAGH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEG,YAAY,mEAAI,CAAC;IAC5CR,aAAa,CAACQ,YAAY,GAAGD,YAAY,CAAC;EAC5C,CAAC,EAAE,CAACH,UAAU,EAAEC,IAAI,EAAET,KAAK,CAACa,QAAQ,CAAC,CAAC;EAEtC,oBACE,qBAAC,OAAO;IAAA,uBACN,qBAAC,mBAAmB;MAAC,GAAG,EAAEN,GAAW;MAChB,SAAS,EAAEJ,UAAU,GAAG,YAAY,GAAG,EAAG;MAAA,UAC5DH,KAAK,CAACa;IAAQ;EACK,EACd;AAEd,CAAC;AAAC"}
+{"version":3,"file":"SideMenuBody.cjs","names":["Wrapper","styled","div","ScrollableContainer","scrollBarStyling","Size","Small","SideMenuBody","props","React","useState","scrollable","setScrollable","useDimensionsRef","updateOnResize","ref","dimensions","node","useEffect","clientHeight","scrollHeight","children"],"sources":["../../src/SideMenu/SideMenuBody.tsx"],"sourcesContent":["import React from 'react';\r\nimport {SideMenuProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {scrollBarStyling} from '../styles';\r\nimport {Size} from '../types';\r\nimport {useDimensionsRef} from 'rooks';\r\n\r\nconst Wrapper = styled.div`\r\n  padding: 8px 0;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  flex-flow: column;\r\n  display: flex;\r\n  flex: 1;\r\n  overflow: hidden;\r\n`;\r\n\r\nconst ScrollableContainer = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  overflow-y: auto;\r\n  max-height: 100%;\r\n\r\n  &.scrollable {\r\n    margin-right: 6px;\r\n    padding-right: 6px;\r\n  }\r\n\r\n  ${scrollBarStyling(Size.Small)}\r\n`;\r\n\r\n\r\nexport const SideMenuBody = (props: SideMenuProps) => {\r\n  const [scrollable, setScrollable] = React.useState(false);\r\n  const [ref, dimensions, node] = useDimensionsRef({updateOnResize: true});\r\n\r\n  React.useEffect(() => {\r\n    const clientHeight = node?.clientHeight ?? 0;\r\n    const scrollHeight = node?.scrollHeight ?? 0;\r\n    setScrollable(scrollHeight > clientHeight);\r\n  }, [dimensions, node, props.children]);\r\n\r\n  return (\r\n    <Wrapper>\r\n      <ScrollableContainer ref={ref as any}\r\n                           className={scrollable ? 'scrollable' : ''}>\r\n        {props.children}\r\n      </ScrollableContainer>\r\n    </Wrapper>\r\n  )\r\n};\r\n"],"mappings":";;;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AAAuC;AAAA;AAEvC,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,4NAQzB;AAED,IAAMC,mBAAmB,GAAGF,yBAAM,CAACC,GAAG,oPAWlC,IAAAE,wBAAgB,EAACC,WAAI,CAACC,KAAK,CAAC,CAC/B;AAGM,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAoB,EAAK;EACpD,sBAAoCC,cAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAAlDC,UAAU;IAAEC,aAAa;EAChC,wBAAgC,IAAAC,uBAAgB,EAAC;MAACC,cAAc,EAAE;IAAI,CAAC,CAAC;IAAA;IAAjEC,GAAG;IAAEC,UAAU;IAAEC,IAAI;EAE5BR,cAAK,CAACS,SAAS,CAAC,YAAM;IAAA;IACpB,IAAMC,YAAY,yBAAGF,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE,YAAY,mEAAI,CAAC;IAC5C,IAAMC,YAAY,yBAAGH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEG,YAAY,mEAAI,CAAC;IAC5CR,aAAa,CAACQ,YAAY,GAAGD,YAAY,CAAC;EAC5C,CAAC,EAAE,CAACH,UAAU,EAAEC,IAAI,EAAET,KAAK,CAACa,QAAQ,CAAC,CAAC;EAEtC,oBACE,qBAAC,OAAO;IAAA,uBACN,qBAAC,mBAAmB;MAAC,GAAG,EAAEN,GAAW;MAChB,SAAS,EAAEJ,UAAU,GAAG,YAAY,GAAG,EAAG;MAAA,UAC5DH,KAAK,CAACa;IAAQ;EACK,EACd;AAEd,CAAC;AAAC"}

package/dist/SideMenu/SideMenuBody.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { SideMenuProps } from './types';
-export declare const SideMenuBody: (props: SideMenuProps) => JSX.Element;
+/// <reference types="react" />
+import { SideMenuProps } from './types';
+export declare const SideMenuBody: (props: SideMenuProps) => JSX.Element;

package/dist/SideMenu/SideMenuBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideMenuBody.js","names":["React","styled","scrollBarStyling","Size","useDimensionsRef","Wrapper","div","ScrollableContainer","Small","SideMenuBody","props","useState","scrollable","setScrollable","updateOnResize","ref","dimensions","node","useEffect","clientHeight","scrollHeight","children"],"sources":["../../src/SideMenu/SideMenuBody.tsx"],"sourcesContent":["import React from 'react';\nimport {SideMenuProps} from './types';\nimport styled from 'styled-components';\nimport {scrollBarStyling} from '../styles';\nimport {Size} from '../types';\nimport {useDimensionsRef} from 'rooks';\n\nconst Wrapper = styled.div`\n  padding: 8px 0;\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\nconst ScrollableContainer = styled.div`\n  flex: 1;\n  display: flex;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 6px;\n  }\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\n\nexport const SideMenuBody = (props: SideMenuProps) => {\n  const [scrollable, setScrollable] = React.useState(false);\n  const [ref, dimensions, node] = useDimensionsRef({updateOnResize: true});\n\n  React.useEffect(() => {\n    const clientHeight = node?.clientHeight ?? 0;\n    const scrollHeight = node?.scrollHeight ?? 0;\n    setScrollable(scrollHeight > clientHeight);\n  }, [dimensions, node, props.children]);\n\n  return (\n    <Wrapper>\n      <ScrollableContainer ref={ref as any}\n                           className={scrollable ? 'scrollable' : ''}>\n        {props.children}\n      </ScrollableContainer>\n    </Wrapper>\n  )\n};\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,gBAAgB,QAAO,WAAW;AAC1C,SAAQC,IAAI,QAAO,UAAU;AAC7B,SAAQC,gBAAgB,QAAO,OAAO;AAAC;AAEvC,IAAMC,OAAO,GAAGJ,MAAM,CAACK,GAAG,8MAQzB;AAED,IAAMC,mBAAmB,GAAGN,MAAM,CAACK,GAAG,sOAWlCJ,gBAAgB,CAACC,IAAI,CAACK,KAAK,CAAC,CAC/B;AAGD,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAoB,EAAK;EACpD,sBAAoCV,KAAK,CAACW,QAAQ,CAAC,KAAK,CAAC;IAAA;IAAlDC,UAAU;IAAEC,aAAa;EAChC,wBAAgCT,gBAAgB,CAAC;MAACU,cAAc,EAAE;IAAI,CAAC,CAAC;IAAA;IAAjEC,GAAG;IAAEC,UAAU;IAAEC,IAAI;EAE5BjB,KAAK,CAACkB,SAAS,CAAC,YAAM;IAAA;IACpB,IAAMC,YAAY,yBAAGF,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE,YAAY,mEAAI,CAAC;IAC5C,IAAMC,YAAY,yBAAGH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEG,YAAY,mEAAI,CAAC;IAC5CP,aAAa,CAACO,YAAY,GAAGD,YAAY,CAAC;EAC5C,CAAC,EAAE,CAACH,UAAU,EAAEC,IAAI,EAAEP,KAAK,CAACW,QAAQ,CAAC,CAAC;EAEtC,oBACE,KAAC,OAAO;IAAA,uBACN,KAAC,mBAAmB;MAAC,GAAG,EAAEN,GAAW;MAChB,SAAS,EAAEH,UAAU,GAAG,YAAY,GAAG,EAAG;MAAA,UAC5DF,KAAK,CAACW;IAAQ;EACK,EACd;AAEd,CAAC"}
+{"version":3,"file":"SideMenuBody.js","names":["React","styled","scrollBarStyling","Size","useDimensionsRef","Wrapper","div","ScrollableContainer","Small","SideMenuBody","props","useState","scrollable","setScrollable","updateOnResize","ref","dimensions","node","useEffect","clientHeight","scrollHeight","children"],"sources":["../../src/SideMenu/SideMenuBody.tsx"],"sourcesContent":["import React from 'react';\r\nimport {SideMenuProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {scrollBarStyling} from '../styles';\r\nimport {Size} from '../types';\r\nimport {useDimensionsRef} from 'rooks';\r\n\r\nconst Wrapper = styled.div`\r\n  padding: 8px 0;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  flex-flow: column;\r\n  display: flex;\r\n  flex: 1;\r\n  overflow: hidden;\r\n`;\r\n\r\nconst ScrollableContainer = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  overflow-y: auto;\r\n  max-height: 100%;\r\n\r\n  &.scrollable {\r\n    margin-right: 6px;\r\n    padding-right: 6px;\r\n  }\r\n\r\n  ${scrollBarStyling(Size.Small)}\r\n`;\r\n\r\n\r\nexport const SideMenuBody = (props: SideMenuProps) => {\r\n  const [scrollable, setScrollable] = React.useState(false);\r\n  const [ref, dimensions, node] = useDimensionsRef({updateOnResize: true});\r\n\r\n  React.useEffect(() => {\r\n    const clientHeight = node?.clientHeight ?? 0;\r\n    const scrollHeight = node?.scrollHeight ?? 0;\r\n    setScrollable(scrollHeight > clientHeight);\r\n  }, [dimensions, node, props.children]);\r\n\r\n  return (\r\n    <Wrapper>\r\n      <ScrollableContainer ref={ref as any}\r\n                           className={scrollable ? 'scrollable' : ''}>\r\n        {props.children}\r\n      </ScrollableContainer>\r\n    </Wrapper>\r\n  )\r\n};\r\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,gBAAgB,QAAO,WAAW;AAC1C,SAAQC,IAAI,QAAO,UAAU;AAC7B,SAAQC,gBAAgB,QAAO,OAAO;AAAC;AAEvC,IAAMC,OAAO,GAAGJ,MAAM,CAACK,GAAG,8MAQzB;AAED,IAAMC,mBAAmB,GAAGN,MAAM,CAACK,GAAG,sOAWlCJ,gBAAgB,CAACC,IAAI,CAACK,KAAK,CAAC,CAC/B;AAGD,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAoB,EAAK;EACpD,sBAAoCV,KAAK,CAACW,QAAQ,CAAC,KAAK,CAAC;IAAA;IAAlDC,UAAU;IAAEC,aAAa;EAChC,wBAAgCT,gBAAgB,CAAC;MAACU,cAAc,EAAE;IAAI,CAAC,CAAC;IAAA;IAAjEC,GAAG;IAAEC,UAAU;IAAEC,IAAI;EAE5BjB,KAAK,CAACkB,SAAS,CAAC,YAAM;IAAA;IACpB,IAAMC,YAAY,yBAAGF,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE,YAAY,mEAAI,CAAC;IAC5C,IAAMC,YAAY,yBAAGH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEG,YAAY,mEAAI,CAAC;IAC5CP,aAAa,CAACO,YAAY,GAAGD,YAAY,CAAC;EAC5C,CAAC,EAAE,CAACH,UAAU,EAAEC,IAAI,EAAEP,KAAK,CAACW,QAAQ,CAAC,CAAC;EAEtC,oBACE,KAAC,OAAO;IAAA,uBACN,KAAC,mBAAmB;MAAC,GAAG,EAAEN,GAAW;MAChB,SAAS,EAAEH,UAAU,GAAG,YAAY,GAAG,EAAG;MAAA,UAC5DF,KAAK,CAACW;IAAQ;EACK,EACd;AAEd,CAAC"}

package/dist/SideMenu/SideMenuFooter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SideMenuFooter.cjs","names":["Wrapper","styled","div","COLORS","neutral_200","ItemsContainer","ButtonsContainer","LogoContainer","neutral_20","NoteContainer","ComponentXXSStyling","ComponentTextStyle","Regular","neutral_500","SideMenuFooter","props","footer","items","length","map","item","index","size","buttons","button","label","note"],"sources":["../../src/SideMenu/SideMenuFooter.tsx"],"sourcesContent":["import React from 'react';\nimport {SideMenuProps} from './types';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentTextStyle,\n  ComponentXXSStyling\n} from '../styles';\nimport {LaerdalLogo} from '../assets';\nimport {Button} from '../Button';\nimport {MenuItem} from '../MenuItem';\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n\n  border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst ItemsContainer = styled.div`\n  padding: 8px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: 100%;\n`;\n\nconst ButtonsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 8px 16px;\n  gap: 10px;\n  width: 100%;\n\n  button {\n    flex: 1;\n  }\n\n  .small & {\n    gap: 0;\n    flex-direction: column-reverse;\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  min-height: 80px;\n  padding: 8px 16px;\n  background-color: ${COLORS.neutral_20};\n  width: 100%;\n`;\n\nconst NoteContainer = styled.div`\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\n`;\n\nexport const SideMenuFooter = (props: SideMenuProps) => {\n\n  return (\n    <Wrapper>\n      {\n        !!props.footer?.items?.length &&\n        <ItemsContainer>\n          {props.footer.items.map((item, index) =>\n            <MenuItem key={index} size={props.size} {...item}/>\n          )}\n        </ItemsContainer>\n      }\n      {\n        !!props.footer?.buttons?.length &&\n        <ButtonsContainer>\n          {\n            props.footer.buttons.map((button, index) =>\n              <Button key={index} size={props.size} {...button} >\n                {button.label}\n              </Button>\n            )\n          }\n        </ButtonsContainer>\n      }\n      {\n        !props.footer?.buttons?.length &&\n        <LogoContainer>\n          <LaerdalLogo height={'36px'} width={'66px'}/>\n          <NoteContainer>{props.footer?.note}</NoteContainer>\n        </LogoContainer>\n      }\n\n    </Wrapper>\n  )\n};\n"],"mappings":";;;;;;;;;AAAA;AAEA;AACA;AAKA;AACA;AACA;AAAqC;AAAA;AAAA;AAAA;AAErC,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,uOAOAC,cAAM,CAACC,WAAW,CAC3C;AAED,IAAMC,cAAc,GAAGJ,yBAAM,CAACC,GAAG,gMAMhC;AAED,IAAMI,gBAAgB,GAAGL,yBAAM,CAACC,GAAG,wTAgBlC;AAED,IAAMK,aAAa,GAAGN,yBAAM,CAACC,GAAG,sRAOVC,cAAM,CAACK,UAAU,CAEtC;AAED,IAAMC,aAAa,GAAGR,yBAAM,CAACC,GAAG,gGAC5B,IAAAQ,2BAAmB,EAACC,0BAAkB,CAACC,OAAO,EAAET,cAAM,CAACU,WAAW,CAAC,CACtE;AAEM,IAAMC,cAAc,GAAG,SAAjBA,cAAc,CAAIC,KAAoB,EAAK;EAAA;EAEtD,oBACE,sBAAC,OAAO;IAAA,WAEJ,CAAC,mBAACA,KAAK,CAACC,MAAM,iEAAZ,cAAcC,KAAK,gDAAnB,oBAAqBC,MAAM,kBAC7B,qBAAC,cAAc;MAAA,UACZH,KAAK,CAACC,MAAM,CAACC,KAAK,CAACE,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;QAAA,oBAClC,qBAAC,kBAAQ;UAAa,IAAI,EAAEN,KAAK,CAACO;QAAK,GAAKF,IAAI,GAAjCC,KAAK,CAA+B;MAAA;IACpD,EACc,EAGjB,CAAC,oBAACN,KAAK,CAACC,MAAM,oEAAZ,eAAcO,OAAO,kDAArB,sBAAuBL,MAAM,kBAC/B,qBAAC,gBAAgB;MAAA,UAEbH,KAAK,CAACC,MAAM,CAACO,OAAO,CAACJ,GAAG,CAAC,UAACK,MAAM,EAAEH,KAAK;QAAA,oBACrC,qBAAC,cAAM;UAAa,IAAI,EAAEN,KAAK,CAACO;QAAK,GAAKE,MAAM;UAAA,UAC7CA,MAAM,CAACC;QAAK,IADFJ,KAAK,CAET;MAAA;IACV,EAEc,EAGnB,oBAACN,KAAK,CAACC,MAAM,oEAAZ,eAAcO,OAAO,kDAArB,sBAAuBL,MAAM,kBAC9B,sBAAC,aAAa;MAAA,wBACZ,qBAAC,mBAAW;QAAC,MAAM,EAAE,MAAO;QAAC,KAAK,EAAE;MAAO,EAAE,eAC7C,qBAAC,aAAa;QAAA,4BAAEH,KAAK,CAACC,MAAM,mDAAZ,eAAcU;MAAI,EAAiB;IAAA,EACrC;EAAA,EAGV;AAEd,CAAC;AAAC"}
+{"version":3,"file":"SideMenuFooter.cjs","names":["Wrapper","styled","div","COLORS","neutral_200","ItemsContainer","ButtonsContainer","LogoContainer","neutral_20","NoteContainer","ComponentXXSStyling","ComponentTextStyle","Regular","neutral_500","SideMenuFooter","props","footer","items","length","map","item","index","size","buttons","button","label","note"],"sources":["../../src/SideMenu/SideMenuFooter.tsx"],"sourcesContent":["import React from 'react';\r\nimport {SideMenuProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentTextStyle,\r\n  ComponentXXSStyling\r\n} from '../styles';\r\nimport {LaerdalLogo} from '../assets';\r\nimport {Button} from '../Button';\r\nimport {MenuItem} from '../MenuItem';\r\n\r\nconst Wrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  width: 100%;\r\n\r\n  border-top: 1px solid ${COLORS.neutral_200};\r\n`;\r\n\r\nconst ItemsContainer = styled.div`\r\n  padding: 8px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n  width: 100%;\r\n`;\r\n\r\nconst ButtonsContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  box-sizing: border-box;\r\n  padding: 8px 16px;\r\n  gap: 10px;\r\n  width: 100%;\r\n\r\n  button {\r\n    flex: 1;\r\n  }\r\n\r\n  .small & {\r\n    gap: 0;\r\n    flex-direction: column-reverse;\r\n  }\r\n`;\r\n\r\nconst LogoContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  box-sizing: border-box;\r\n  min-height: 80px;\r\n  padding: 8px 16px;\r\n  background-color: ${COLORS.neutral_20};\r\n  width: 100%;\r\n`;\r\n\r\nconst NoteContainer = styled.div`\r\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\r\n`;\r\n\r\nexport const SideMenuFooter = (props: SideMenuProps) => {\r\n\r\n  return (\r\n    <Wrapper>\r\n      {\r\n        !!props.footer?.items?.length &&\r\n        <ItemsContainer>\r\n          {props.footer.items.map((item, index) =>\r\n            <MenuItem key={index} size={props.size} {...item}/>\r\n          )}\r\n        </ItemsContainer>\r\n      }\r\n      {\r\n        !!props.footer?.buttons?.length &&\r\n        <ButtonsContainer>\r\n          {\r\n            props.footer.buttons.map((button, index) =>\r\n              <Button key={index} size={props.size} {...button} >\r\n                {button.label}\r\n              </Button>\r\n            )\r\n          }\r\n        </ButtonsContainer>\r\n      }\r\n      {\r\n        !props.footer?.buttons?.length &&\r\n        <LogoContainer>\r\n          <LaerdalLogo height={'36px'} width={'66px'}/>\r\n          <NoteContainer>{props.footer?.note}</NoteContainer>\r\n        </LogoContainer>\r\n      }\r\n\r\n    </Wrapper>\r\n  )\r\n};\r\n"],"mappings":";;;;;;;;;AAAA;AAEA;AACA;AAKA;AACA;AACA;AAAqC;AAAA;AAAA;AAAA;AAErC,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,uOAOAC,cAAM,CAACC,WAAW,CAC3C;AAED,IAAMC,cAAc,GAAGJ,yBAAM,CAACC,GAAG,gMAMhC;AAED,IAAMI,gBAAgB,GAAGL,yBAAM,CAACC,GAAG,wTAgBlC;AAED,IAAMK,aAAa,GAAGN,yBAAM,CAACC,GAAG,sRAOVC,cAAM,CAACK,UAAU,CAEtC;AAED,IAAMC,aAAa,GAAGR,yBAAM,CAACC,GAAG,gGAC5B,IAAAQ,2BAAmB,EAACC,0BAAkB,CAACC,OAAO,EAAET,cAAM,CAACU,WAAW,CAAC,CACtE;AAEM,IAAMC,cAAc,GAAG,SAAjBA,cAAc,CAAIC,KAAoB,EAAK;EAAA;EAEtD,oBACE,sBAAC,OAAO;IAAA,WAEJ,CAAC,mBAACA,KAAK,CAACC,MAAM,iEAAZ,cAAcC,KAAK,gDAAnB,oBAAqBC,MAAM,kBAC7B,qBAAC,cAAc;MAAA,UACZH,KAAK,CAACC,MAAM,CAACC,KAAK,CAACE,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;QAAA,oBAClC,qBAAC,kBAAQ;UAAa,IAAI,EAAEN,KAAK,CAACO;QAAK,GAAKF,IAAI,GAAjCC,KAAK,CAA+B;MAAA;IACpD,EACc,EAGjB,CAAC,oBAACN,KAAK,CAACC,MAAM,oEAAZ,eAAcO,OAAO,kDAArB,sBAAuBL,MAAM,kBAC/B,qBAAC,gBAAgB;MAAA,UAEbH,KAAK,CAACC,MAAM,CAACO,OAAO,CAACJ,GAAG,CAAC,UAACK,MAAM,EAAEH,KAAK;QAAA,oBACrC,qBAAC,cAAM;UAAa,IAAI,EAAEN,KAAK,CAACO;QAAK,GAAKE,MAAM;UAAA,UAC7CA,MAAM,CAACC;QAAK,IADFJ,KAAK,CAET;MAAA;IACV,EAEc,EAGnB,oBAACN,KAAK,CAACC,MAAM,oEAAZ,eAAcO,OAAO,kDAArB,sBAAuBL,MAAM,kBAC9B,sBAAC,aAAa;MAAA,wBACZ,qBAAC,mBAAW;QAAC,MAAM,EAAE,MAAO;QAAC,KAAK,EAAE;MAAO,EAAE,eAC7C,qBAAC,aAAa;QAAA,4BAAEH,KAAK,CAACC,MAAM,mDAAZ,eAAcU;MAAI,EAAiB;IAAA,EACrC;EAAA,EAGV;AAEd,CAAC;AAAC"}

package/dist/SideMenu/SideMenuFooter.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { SideMenuProps } from './types';
-export declare const SideMenuFooter: (props: SideMenuProps) => JSX.Element;
+/// <reference types="react" />
+import { SideMenuProps } from './types';
+export declare const SideMenuFooter: (props: SideMenuProps) => JSX.Element;