@laerdal/life-react-components 1.5.1-dev.1.full → 1.5.1-dev.10

package/dist/InputFields/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/RadioButton.tsx"],"names":["React","styled","RadioButtonOff","RadioButtonOn","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","StyledRadioButton","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","RadioButton","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","onKeyPress","e","keyCode","Medium","preventDefault","toString","toLowerCase","concat","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, showWarning?: boolean, selected?: boolean }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n \n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label{\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .radio-button-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon{\n      background-color: ${COLORS.white};\n    }\n    \n    .radio-button-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n  tabIndexVal?: number;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n  id,\n  selected,\n  label,\n  additionalLabel,\n  showWarning,\n  select,\n  disabled,\n  margin,\n  iconPointerEventsTransparent,\n  size,\n  tabIndexVal\n}: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledRadioButton key={id} margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={e => e.preventDefault()}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                       showWarning={showWarning}\n                       selected={selected}>\n      <div className={'radio-button-icon'} id={id}>\n        { selected && <RadioButtonOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n        { !selected && <RadioButtonOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n      </div>\n      <div className={'radio-button-label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"file":"RadioButton.js"}
+{"version":3,"sources":["../../src/InputFields/RadioButton.tsx"],"names":["React","styled","RadioButtonOff","RadioButtonOn","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","StyledRadioButton","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","RadioButton","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","onKeyPress","e","keyCode","Medium","toString","toLowerCase","concat","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, showWarning?: boolean, selected?: boolean }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n \n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label{\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .radio-button-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon{\n      background-color: ${COLORS.white};\n    }\n    \n    .radio-button-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n  tabIndexVal?: number;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n  id,\n  selected,\n  label,\n  additionalLabel,\n  showWarning,\n  select,\n  disabled,\n  margin,\n  iconPointerEventsTransparent,\n  size,\n  tabIndexVal\n}: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledRadioButton key={id} margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={defaultOnMouseDownHandler}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                       showWarning={showWarning}\n                       selected={selected}>\n      <div className={'radio-button-icon'} id={id}>\n        { selected && <RadioButtonOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n        { !selected && <RadioButtonOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n      </div>\n      <div className={'radio-button-label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"file":"RadioButton.js"}

package/dist/MenuItem/MenuItem.cjs

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ItemLabel = exports.ItemIconOld = exports.ItemIcon = exports.ItemContent = exports.DropdownButtonCSS = exports.DropdownButton = void 0;
+exports.default = exports.LockedIconContainer = exports.ItemLabel = exports.ItemIcon = exports.ItemContent = exports.DropdownButtonCSS = exports.DropdownButton = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -19,6 +19,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _styles = require("../styles");
 
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
 var _types = require("../types");
 
 var _typography = require("../styles/typography");
@@ -47,16 +49,16 @@ var ItemIcon = _styledComponents.default.div(_templateObject3 || (_templateObjec
 
 exports.ItemIcon = ItemIcon;
 
-var ItemIconOld = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)([""])));
+var LockedIconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
 
-exports.ItemIconOld = ItemIconOld;
+exports.LockedIconContainer = LockedIconContainer;
 
-var ItemContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n\n    ", " {\n      flex: 1 0 calc(100% - 40px);    \n    }\n\n    ", " {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n    ", " {\n      flex: 1 0 40px;\n      display: flex;\n      justify-content: flex-end;\n    }\n"])), ItemLabel, ItemIcon, ItemIconOld);
+var ItemContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ", " {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ", " {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n\n    ", " {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n"])), ItemLabel, ItemIcon, LockedIconContainer);
 
 exports.ItemContent = ItemContent;
 
 var DropdownButtonCSS = function DropdownButtonCSS(size) {
-  return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    ", "\n    ", "\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ";\n\n    &.active {\n      background: ", ";\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 0;\n        bottom: 0;\n        left: 2px;\n        background-color: ", ";\n\n        border-radius: 2px;\n      }\n    }\n\n    &:disabled {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.active:hover {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  "])), size == _types.Size.Small && (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large && (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large ? '64px' : size == _types.Size.Medium ? '56px' : '48px', _styles.COLORS.white, _common.CommonInteractionStyling, _styles.COLORS.neutral_20, _styles.COLORS.primary_500, _styles.COLORS.neutral_200, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_500, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_500);
+  return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    ", "\n    ", "\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ";\n\n    &.active {\n      background: ", ";\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  "])), size == _types.Size.Small && (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large && (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large ? '64px' : size == _types.Size.Medium ? '56px' : '48px', _styles.COLORS.white, _common.CommonInteractionStyling, _styles.COLORS.neutral_20, _styles.COLORS.primary_500, _styles.COLORS.neutral_200, _styles.COLORS.neutral_500, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_500, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_500);
 };
 
 exports.DropdownButtonCSS = DropdownButtonCSS;
@@ -68,14 +70,15 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onClickHandler = _ref.onClickHandler,
       key = _ref.key,
       size = _ref.size,
+      className = _ref.className,
       id = _ref.id;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DropdownButton, {
     type: "button",
     size: size,
-    disabled: item.disabled,
+    disabled: item.disabled || item.locked,
     ref: ref,
     onClick: onClickHandler,
-    className: (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : ''),
+    className: className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : ''),
     id: id,
     children: [item.showDividerAbove && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "divider"
@@ -83,11 +86,22 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       children: [item.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemIcon, {
         children: item.icon
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ItemLabel, {
-        children: [(_item$displayLabel = item.displayLabel) !== null && _item$displayLabel !== void 0 ? _item$displayLabel : item.value, item.noteLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: {
-            fontSize: '12px'
-          },
-          children: item.noteLabel
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: (_item$displayLabel = item.displayLabel) !== null && _item$displayLabel !== void 0 ? _item$displayLabel : item.value
+          }), item.noteLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: {
+              fontSize: '12px',
+              lineHeight: '16px'
+            },
+            children: item.noteLabel
+          })]
+        }), item.locked && /*#__PURE__*/(0, _jsxRuntime.jsx)(LockedIconContainer, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.LockedOn, {
+            color: _styles.COLORS.neutral_400,
+            className: "extraMargin",
+            size: "24px"
+          })
         })]
       })]
     })]
@@ -97,7 +111,8 @@ MenuItem.propTypes = {
   onClickHandler: _propTypes.default.func.isRequired,
   active: _propTypes.default.bool.isRequired,
   id: _propTypes.default.string.isRequired,
-  key: _propTypes.default.string.isRequired
+  key: _propTypes.default.string.isRequired,
+  className: _propTypes.default.string
 };
 var _default = MenuItem;
 exports.default = _default;

package/dist/MenuItem/MenuItem.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["DropdownButton","styled","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","ItemIconOld","ItemContent","css","Size","Small","ComponentTextStyle","Regular","COLORS","neutral_600","Medium","Large","white","CommonInteractionStyling","neutral_20","primary_500","neutral_200","primary_20","primary_600","primary_100","primary_800","MenuItem","React","forwardRef","ref","active","item","onClickHandler","key","id","disabled","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronRight} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport { CommonInteractionStyling } from '../common';\n\nexport interface MenuItemProps {\n   item: DropdownItem;\n   onClickHandler: (e: any) => void;\n   active: boolean;\n   id: string;\n   key: string;\n   size?: Size;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\nexport const ItemIcon = styled.div``;\nexport const ItemIconOld = styled.div``;\n\nexport const ItemContent = styled.div`\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n\n    ${ItemLabel} {\n      flex: 1 0 calc(100% - 40px);    \n    }\n\n    ${ItemIcon} {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n    ${ItemIconOld} {\n      flex: 1 0 40px;\n      display: flex;\n      justify-content: flex-end;\n    }\n`;\n\nexport const DropdownButtonCSS = (size?: Size) => {\n  return css`\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n    background-color: ${COLORS.white};\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ${CommonInteractionStyling};\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 0;\n        bottom: 0;\n        left: 2px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 2px;\n      }\n    }\n\n    &:disabled {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200};\n    }\n\n    &.active:hover {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_600};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n\n    &.active:active {\n      background-color: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n  `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n    active,\n    item,\n    onClickHandler,\n    key,\n    size,\n    id }: MenuItemProps, ref) => {\n  return (\n    <DropdownButton\n        type=\"button\"\n        size={size}\n        disabled={item.disabled}\n        ref={ref}\n        onClick={onClickHandler}\n        className={ (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n        key={key}\n        id={id}>\n        {item.showDividerAbove && <div className=\"divider\" />}\n        <ItemContent>\n          {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n          <ItemLabel>\n              {item.displayLabel ?? item.value}\n              {item.noteLabel && <div style={{ fontSize: '12px' }}>{item.noteLabel}</div>}\n          </ItemLabel>\n        </ItemContent>\n  </DropdownButton>\n  );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.cjs"}
+{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["DropdownButton","styled","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","LockedIconContainer","ItemContent","css","Size","Small","ComponentTextStyle","Regular","COLORS","neutral_600","Medium","Large","white","CommonInteractionStyling","neutral_20","primary_500","neutral_200","neutral_500","primary_20","primary_600","primary_100","primary_800","MenuItem","React","forwardRef","ref","active","item","onClickHandler","key","className","id","disabled","locked","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronRight, LockedOn} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport { CommonInteractionStyling } from '../common';\n\nexport interface MenuItemProps {\n   item: DropdownItem;\n   onClickHandler: (e: any) => void;\n   active: boolean;\n   id: string;\n   key: string;\n   size?: Size;\n   className?: string;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\nexport const ItemIcon = styled.div``;\n\nexport const LockedIconContainer = styled.div`\n\n`;\n\nexport const ItemContent = styled.div`\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ${ItemLabel} {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ${ItemIcon} {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n\n    ${LockedIconContainer} {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n`;\n\n\nexport const DropdownButtonCSS = (size?: Size) => {\n  return css`\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n    background-color: ${COLORS.white};\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ${CommonInteractionStyling};\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 4px;\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200};\n    }\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_500};\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_600};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n  `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n    active,\n    item,\n    onClickHandler,\n    key,\n    size,\n    className,\n    id }: MenuItemProps, ref) => {\n  return (\n    <DropdownButton\n        type=\"button\"\n        size={size}\n        disabled={item.disabled || item.locked}\n        ref={ref}\n        onClick={onClickHandler}\n        className={ className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n        key={key}\n        id={id}>\n        {item.showDividerAbove && <div className=\"divider\" />}\n        <ItemContent>\n          {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n          <ItemLabel>\n              <div>\n                <div>{item.displayLabel ?? item.value}</div>\n                {item.noteLabel && <div style={{ fontSize: '12px', lineHeight: '16px' }}>{item.noteLabel}</div>}\n              </div>\n              {item.locked && <LockedIconContainer>\n                <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\" />\n              </LockedIconContainer>}\n          </ItemLabel>\n        </ItemContent>\n  </DropdownButton>\n  );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.cjs"}

package/dist/MenuItem/MenuItem.d.ts

@@ -8,13 +8,14 @@ export interface MenuItemProps {
     id: string;
     key: string;
     size?: Size;
+    className?: string;
 }
 export declare const DropdownButton: import("styled-components").StyledComponent<"button", any, {
     size?: Size | undefined;
 }, never>;
 export declare const ItemLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ItemIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ItemIconOld: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LockedIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DropdownButtonCSS: (size?: Size | undefined) => import("styled-components").FlattenSimpleInterpolation;
 declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/MenuItem/MenuItem.js

@@ -6,6 +6,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 import { COLORS, ComponentTextStyle } from '../styles';
+import { LockedOn } from '../icons/systemicons/SystemIcons';
 import { Size } from '../types';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling } from '../styles/typography';
 import { CommonInteractionStyling } from '../common';
@@ -16,10 +17,10 @@ export var DropdownButton = styled.button(_templateObject || (_templateObject =
 });
 export var ItemLabel = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
 export var ItemIcon = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
-export var ItemIconOld = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([""])));
-export var ItemContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n\n    ", " {\n      flex: 1 0 calc(100% - 40px);    \n    }\n\n    ", " {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n    ", " {\n      flex: 1 0 40px;\n      display: flex;\n      justify-content: flex-end;\n    }\n"])), ItemLabel, ItemIcon, ItemIconOld);
+export var LockedIconContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\n"])));
+export var ItemContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ", " {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ", " {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n\n    ", " {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n"])), ItemLabel, ItemIcon, LockedIconContainer);
 export var DropdownButtonCSS = function DropdownButtonCSS(size) {
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    ", "\n    ", "\n    ", "\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ";\n\n    &.active {\n      background: ", ";\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 0;\n        bottom: 0;\n        left: 2px;\n        background-color: ", ";\n\n        border-radius: 2px;\n      }\n    }\n\n    &:disabled {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.active:hover {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  "])), size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px', COLORS.white, CommonInteractionStyling, COLORS.neutral_20, COLORS.primary_500, COLORS.neutral_200, COLORS.primary_20, COLORS.primary_600, COLORS.primary_500, COLORS.primary_100, COLORS.primary_800, COLORS.primary_500);
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    ", "\n    ", "\n    ", "\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ", ";\n    background-color: ", ";\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ", ";\n\n    &.active {\n      background: ", ";\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ", ";\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  "])), size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600), size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px', COLORS.white, CommonInteractionStyling, COLORS.neutral_20, COLORS.primary_500, COLORS.neutral_200, COLORS.neutral_500, COLORS.primary_20, COLORS.primary_600, COLORS.primary_500, COLORS.primary_100, COLORS.primary_800, COLORS.primary_500);
 };
 var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _item$displayLabel;
@@ -29,14 +30,15 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onClickHandler = _ref.onClickHandler,
       key = _ref.key,
       size = _ref.size,
+      className = _ref.className,
       id = _ref.id;
   return /*#__PURE__*/_jsxs(DropdownButton, {
     type: "button",
     size: size,
-    disabled: item.disabled,
+    disabled: item.disabled || item.locked,
     ref: ref,
     onClick: onClickHandler,
-    className: (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : ''),
+    className: className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : ''),
     id: id,
     children: [item.showDividerAbove && /*#__PURE__*/_jsx("div", {
       className: "divider"
@@ -44,11 +46,22 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       children: [item.icon && /*#__PURE__*/_jsx(ItemIcon, {
         children: item.icon
       }), /*#__PURE__*/_jsxs(ItemLabel, {
-        children: [(_item$displayLabel = item.displayLabel) !== null && _item$displayLabel !== void 0 ? _item$displayLabel : item.value, item.noteLabel && /*#__PURE__*/_jsx("div", {
-          style: {
-            fontSize: '12px'
-          },
-          children: item.noteLabel
+        children: [/*#__PURE__*/_jsxs("div", {
+          children: [/*#__PURE__*/_jsx("div", {
+            children: (_item$displayLabel = item.displayLabel) !== null && _item$displayLabel !== void 0 ? _item$displayLabel : item.value
+          }), item.noteLabel && /*#__PURE__*/_jsx("div", {
+            style: {
+              fontSize: '12px',
+              lineHeight: '16px'
+            },
+            children: item.noteLabel
+          })]
+        }), item.locked && /*#__PURE__*/_jsx(LockedIconContainer, {
+          children: /*#__PURE__*/_jsx(LockedOn, {
+            color: COLORS.neutral_400,
+            className: "extraMargin",
+            size: "24px"
+          })
         })]
       })]
     })]
@@ -58,7 +71,8 @@ MenuItem.propTypes = {
   onClickHandler: _pt.func.isRequired,
   active: _pt.bool.isRequired,
   id: _pt.string.isRequired,
-  key: _pt.string.isRequired
+  key: _pt.string.isRequired,
+  className: _pt.string
 };
 export default MenuItem;
 //# sourceMappingURL=MenuItem.js.map

package/dist/MenuItem/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["React","styled","css","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","CommonInteractionStyling","DropdownButton","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","ItemIconOld","ItemContent","Small","Regular","neutral_600","Medium","Large","white","neutral_20","primary_500","neutral_200","primary_20","primary_600","primary_100","primary_800","MenuItem","forwardRef","ref","active","item","onClickHandler","key","id","disabled","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronRight} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport { CommonInteractionStyling } from '../common';\n\nexport interface MenuItemProps {\n   item: DropdownItem;\n   onClickHandler: (e: any) => void;\n   active: boolean;\n   id: string;\n   key: string;\n   size?: Size;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\nexport const ItemIcon = styled.div``;\nexport const ItemIconOld = styled.div``;\n\nexport const ItemContent = styled.div`\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n\n    ${ItemLabel} {\n      flex: 1 0 calc(100% - 40px);    \n    }\n\n    ${ItemIcon} {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n    ${ItemIconOld} {\n      flex: 1 0 40px;\n      display: flex;\n      justify-content: flex-end;\n    }\n`;\n\nexport const DropdownButtonCSS = (size?: Size) => {\n  return css`\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n    background-color: ${COLORS.white};\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ${CommonInteractionStyling};\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 0;\n        bottom: 0;\n        left: 2px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 2px;\n      }\n    }\n\n    &:disabled {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200};\n    }\n\n    &.active:hover {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_600};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n\n    &.active:active {\n      background-color: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n  `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n    active,\n    item,\n    onClickHandler,\n    key,\n    size,\n    id }: MenuItemProps, ref) => {\n  return (\n    <DropdownButton\n        type=\"button\"\n        size={size}\n        disabled={item.disabled}\n        ref={ref}\n        onClick={onClickHandler}\n        className={ (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n        key={key}\n        id={id}>\n        {item.showDividerAbove && <div className=\"divider\" />}\n        <ItemContent>\n          {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n          <ItemLabel>\n              {item.displayLabel ?? item.value}\n              {item.noteLabel && <div style={{ fontSize: '12px' }}>{item.noteLabel}</div>}\n          </ItemLabel>\n        </ItemContent>\n  </DropdownButton>\n  );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.js"}
+{"version":3,"sources":["../../src/MenuItem/MenuItem.tsx"],"names":["React","styled","css","COLORS","ComponentTextStyle","LockedOn","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","CommonInteractionStyling","DropdownButton","button","props","DropdownButtonCSS","size","ItemLabel","div","ItemIcon","LockedIconContainer","ItemContent","Small","Regular","neutral_600","Medium","Large","white","neutral_20","primary_500","neutral_200","neutral_500","primary_20","primary_600","primary_100","primary_800","MenuItem","forwardRef","ref","active","item","onClickHandler","key","className","id","disabled","locked","showDividerAbove","icon","displayLabel","value","noteLabel","fontSize","lineHeight","neutral_400"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAAqBC,MAArB,EAA6BC,kBAA7B,QAAsD,WAAtD;AACA,SAAsBC,QAAtB,QAAqC,kCAArC;AACA,SAAiBC,IAAjB,QAA4B,UAA5B;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,EAA8CC,iBAA9C,QAAsE,sBAAtE;AAEA,SAASC,wBAAT,QAAyC,WAAzC;;;AAYA,OAAO,IAAMC,cAAc,GAAGV,MAAM,CAACW,MAAV,gFACvB,UAACC,KAAD;AAAA,SAAWC,iBAAiB,CAACD,KAAK,CAACE,IAAP,CAA5B;AAAA,CADuB,CAApB;AAIP,OAAO,IAAMC,SAAS,GAAGf,MAAM,CAACgB,GAAV,uEAAf;AACP,OAAO,IAAMC,QAAQ,GAAGjB,MAAM,CAACgB,GAAV,uEAAd;AAEP,OAAO,IAAME,mBAAmB,GAAGlB,MAAM,CAACgB,GAAV,2EAAzB;AAIP,OAAO,IAAMG,WAAW,GAAGnB,MAAM,CAACgB,GAAV,0hBAMlBD,SANkB,EAalBE,QAbkB,EAqBlBC,mBArBkB,CAAjB;AA+BP,OAAO,IAAML,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,IAAD,EAAiB;AAChD,SAAOb,GAAP,m3CACIa,IAAI,IAAIT,IAAI,CAACe,KAAb,IAAsBZ,iBAAiB,CAACL,kBAAkB,CAACkB,OAApB,EAA6BnB,MAAM,CAACoB,WAApC,CAD3C,EAEIR,IAAI,IAAIT,IAAI,CAACkB,MAAb,IAAuBhB,iBAAiB,CAACJ,kBAAkB,CAACkB,OAApB,EAA6BnB,MAAM,CAACoB,WAApC,CAF5C,EAGIR,IAAI,IAAIT,IAAI,CAACmB,KAAb,IAAsBlB,iBAAiB,CAACH,kBAAkB,CAACkB,OAApB,EAA6BnB,MAAM,CAACoB,WAApC,CAH3C,EAUgBR,IAAI,IAAIT,IAAI,CAACmB,KAAb,GAAqB,MAArB,GAA8BV,IAAI,IAAIT,IAAI,CAACkB,MAAb,GAAsB,MAAtB,GAA+B,MAV7E,EAWsBrB,MAAM,CAACuB,KAX7B,EAuBIhB,wBAvBJ,EA0BkBP,MAAM,CAACwB,UA1BzB,EAmC0BxB,MAAM,CAACyB,WAnCjC,EA4CazB,MAAM,CAAC0B,WA5CpB,EAkDa1B,MAAM,CAAC2B,WAlDpB,EAsDwB3B,MAAM,CAAC4B,UAtD/B,EAyDe5B,MAAM,CAAC6B,WAzDtB,EA6D0B7B,MAAM,CAACyB,WA7DjC,EAkEwBzB,MAAM,CAAC8B,WAlE/B,EAqEe9B,MAAM,CAAC+B,WArEtB,EAyE0B/B,MAAM,CAACyB,WAzEjC;AA6ED,CA9EM;AAgFP,IAAMO,QAAQ,gBAAGnC,KAAK,CAACoC,UAAN,CAAmD,gBAO3CC,GAP2C,EAOnC;AAAA;;AAAA,MAN7BC,MAM6B,QAN7BA,MAM6B;AAAA,MAL7BC,IAK6B,QAL7BA,IAK6B;AAAA,MAJ7BC,cAI6B,QAJ7BA,cAI6B;AAAA,MAH7BC,GAG6B,QAH7BA,GAG6B;AAAA,MAF7B1B,IAE6B,QAF7BA,IAE6B;AAAA,MAD7B2B,SAC6B,QAD7BA,SAC6B;AAAA,MAA7BC,EAA6B,QAA7BA,EAA6B;AAC/B,sBACE,MAAC,cAAD;AACI,IAAA,IAAI,EAAC,QADT;AAEI,IAAA,IAAI,EAAE5B,IAFV;AAGI,IAAA,QAAQ,EAAEwB,IAAI,CAACK,QAAL,IAAiBL,IAAI,CAACM,MAHpC;AAII,IAAA,GAAG,EAAER,GAJT;AAKI,IAAA,OAAO,EAAEG,cALb;AAMI,IAAA,SAAS,EAAGE,SAAS,GAAG,GAAZ,IAAmBH,IAAI,CAACM,MAAL,GAAc,QAAd,GAAyB,EAA5C,IAAkD,GAAlD,IAAyDN,IAAI,CAACO,gBAAL,GAAwB,oBAAxB,GAA+C,EAAxG,IAA8G,GAA9G,IAAqHR,MAAM,GAAG,QAAH,GAAc,EAAzI,CANhB;AAQI,IAAA,EAAE,EAAEK,EARR;AAAA,eASKJ,IAAI,CAACO,gBAAL,iBAAyB;AAAK,MAAA,SAAS,EAAC;AAAf,MAT9B,eAUI,MAAC,WAAD;AAAA,iBACGP,IAAI,CAACQ,IAAL,iBAAa,KAAC,QAAD;AAAA,kBAAWR,IAAI,CAACQ;AAAhB,QADhB,eAEE,MAAC,SAAD;AAAA,gCACI;AAAA,kCACE;AAAA,4CAAMR,IAAI,CAACS,YAAX,mEAA2BT,IAAI,CAACU;AAAhC,YADF,EAEGV,IAAI,CAACW,SAAL,iBAAkB;AAAK,YAAA,KAAK,EAAE;AAAEC,cAAAA,QAAQ,EAAE,MAAZ;AAAoBC,cAAAA,UAAU,EAAE;AAAhC,aAAZ;AAAA,sBAAuDb,IAAI,CAACW;AAA5D,YAFrB;AAAA,UADJ,EAKKX,IAAI,CAACM,MAAL,iBAAe,KAAC,mBAAD;AAAA,iCACd,KAAC,QAAD;AAAU,YAAA,KAAK,EAAE1C,MAAM,CAACkD,WAAxB;AAAqC,YAAA,SAAS,EAAC,aAA/C;AAA6D,YAAA,IAAI,EAAC;AAAlE;AADc,UALpB;AAAA,QAFF;AAAA,MAVJ;AAAA,KAOSZ,GAPT,CADF;AAyBD,CAjCgB,CAAjB;;AAlIGD,EAAAA,c;AACAF,EAAAA,M;AACAK,EAAAA,E;AACAF,EAAAA,G;AAEAC,EAAAA,S;;AAgKH,eAAeP,QAAf","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronRight, LockedOn} from '../icons/systemicons/SystemIcons';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport { CommonInteractionStyling } from '../common';\n\nexport interface MenuItemProps {\n   item: DropdownItem;\n   onClickHandler: (e: any) => void;\n   active: boolean;\n   id: string;\n   key: string;\n   size?: Size;\n   className?: string;\n}\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const ItemLabel = styled.div``;\nexport const ItemIcon = styled.div``;\n\nexport const LockedIconContainer = styled.div`\n\n`;\n\nexport const ItemContent = styled.div`\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n    flex-grow: 2;\n\n    ${ItemLabel} {\n      flex: 1 0 calc(100% - 40px);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    ${ItemIcon} {\n      margin-right: 6px;\n      svg {\n        display: block;\n        margin: auto;\n      }\n    }\n\n    ${LockedIconContainer} {\n      flex-grow: 2;\n\n      .extraMargin {\n        margin-left: calc(100% - 24px);\n      }\n    }\n`;\n\n\nexport const DropdownButtonCSS = (size?: Size) => {\n  return css`\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n    background-color: ${COLORS.white};\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    ${CommonInteractionStyling};\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 4px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 4px;\n      }\n    }\n\n    &:disabled, &.disabled-state {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200};\n    }\n\n    &.locked {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_500};\n    }\n\n    &.active:hover, &.active-hover-state {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_600};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n\n    &.active:active, &.active-active-state {\n      background-color: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n  `;\n};\n\nconst MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n    active,\n    item,\n    onClickHandler,\n    key,\n    size,\n    className,\n    id }: MenuItemProps, ref) => {\n  return (\n    <DropdownButton\n        type=\"button\"\n        size={size}\n        disabled={item.disabled || item.locked}\n        ref={ref}\n        onClick={onClickHandler}\n        className={ className + ' ' + (item.locked ? 'locked' : '') + ' ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (active ? 'active' : '')}\n        key={key}\n        id={id}>\n        {item.showDividerAbove && <div className=\"divider\" />}\n        <ItemContent>\n          {item.icon && <ItemIcon>{item.icon}</ItemIcon>}\n          <ItemLabel>\n              <div>\n                <div>{item.displayLabel ?? item.value}</div>\n                {item.noteLabel && <div style={{ fontSize: '12px', lineHeight: '16px' }}>{item.noteLabel}</div>}\n              </div>\n              {item.locked && <LockedIconContainer>\n                <LockedOn color={COLORS.neutral_400} className=\"extraMargin\" size=\"24px\" />\n              </LockedIconContainer>}\n          </ItemLabel>\n        </ItemContent>\n  </DropdownButton>\n  );\n});\n\nexport default MenuItem;\n"],"file":"MenuItem.js"}

package/dist/MenuItem/index.cjs

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MenuItem", {
+  enumerable: true,
+  get: function get() {
+    return _MenuItem.default;
+  }
+});
+
+var _MenuItem = _interopRequireDefault(require("./MenuItem"));
+//# sourceMappingURL=index.cjs.map

package/dist/MenuItem/index.cjs.map

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

package/dist/MenuItem/index.d.ts

@@ -0,0 +1 @@
+export { default as MenuItem } from './MenuItem';

package/dist/MenuItem/index.js

@@ -0,0 +1,2 @@
+export { default as MenuItem } from './MenuItem';
+//# sourceMappingURL=index.js.map

package/dist/MenuItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/MenuItem/index.tsx"],"names":["default","MenuItem"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,QAAnB,QAAkC,YAAlC","sourcesContent":["export {default as MenuItem} from './MenuItem';"],"file":"index.js"}

package/dist/QuizButton/QuizButton.cjs

@@ -98,9 +98,7 @@ var QuizButton = function QuizButton(_ref) {
     onClick: onClick,
     isSelected: selected,
     tabIndex: disabled || resultType ? -1 : 0,
-    onMouseDown: function onMouseDown(e) {
-      return e.preventDefault();
-    },
+    onMouseDown: _.defaultOnMouseDownHandler,
     size: size,
     className: 'quiz-button '.concat(selected ? ' selected' : '').concat(disabled ? ' disabled' : '').concat(resultType ? ' result ' + resultType : '').concat(className ? ' ' + className : ''),
     "data-testid": 'container',

package/dist/QuizButton/QuizButton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/QuizButton/QuizButton.tsx"],"names":["TextContainer","styled","div","COLORS","accent1_20","props","size","Size","Small","Large","ComponentTextStyle","Regular","TextWrapper","ButtonContainer","accent1_100","accent1_600","OptionContainer","accent1_200","neutral_100","neutral_20","neutral_300","correct_20","correct_400","critical_20","critical_500","warning_20","warning_400","focus_25","focus","accent1_300","isSelected","accent1_700","accent1_400","accent1_800","renderResultContent","resultType","white","QuizButton","text","type","onClick","id","className","selected","disabled","Medium","e","preventDefault","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Checkbox, COLORS, 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    &:focus {\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  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};\n    border-radius: 8px;\n    outline: none;\n\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  &:focus:not(.disabled):not(.result),\n  &.focus-state {\n    ${ButtonContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_200 : COLORS.accent1_100};\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_100  : COLORS.accent1_20};\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\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.CheckComplete 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  className?: string;\n}\n\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({text, type, onClick, resultType, id, className, selected=false, disabled=false, size=Size.Medium}) => {\n  return (   \n    <OptionContainer onClick={onClick} isSelected={selected} tabIndex={(disabled || resultType )?-1 : 0} onMouseDown={e=>e.preventDefault()} 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        <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;"],"file":"QuizButton.cjs"}
+{"version":3,"sources":["../../src/QuizButton/QuizButton.tsx"],"names":["TextContainer","styled","div","COLORS","accent1_20","props","size","Size","Small","Large","ComponentTextStyle","Regular","TextWrapper","ButtonContainer","accent1_100","accent1_600","OptionContainer","accent1_200","neutral_100","neutral_20","neutral_300","correct_20","correct_400","critical_20","critical_500","warning_20","warning_400","focus_25","focus","accent1_300","isSelected","accent1_700","accent1_400","accent1_800","renderResultContent","resultType","white","QuizButton","text","type","onClick","id","className","selected","disabled","Medium","defaultOnMouseDownHandler","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Checkbox, COLORS, defaultOnMouseDownHandler, 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    &:focus {\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  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};\n    border-radius: 8px;\n    outline: none;\n\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  &:focus:not(.disabled):not(.result),\n  &.focus-state {\n    ${ButtonContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_200 : COLORS.accent1_100};\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_100  : COLORS.accent1_20};\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\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.CheckComplete 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  className?: string;\n}\n\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({text, type, onClick, resultType, id, className, selected=false, disabled=false, size=Size.Medium}) => {\n  return (   \n    <OptionContainer onClick={onClick} isSelected={selected} tabIndex={(disabled || resultType )?-1 : 0} onMouseDown={defaultOnMouseDownHandler} 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        <ButtonContainer data-testid={'btnContainer'} className={'quiz-button-icon'} size={size}>\n          {\n            resultType ? renderResultContent(resultType) : (\n                                type==='radio' ? <RadioButton selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/> : <Checkbox selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/>\n                              )\n          }\n        </ButtonContainer>\n\n        <TextContainer data-testid={'txtContainer'} className={'quiz-button-text'} size={size}>\n          <TextWrapper size={size}>\n            {text}\n          </TextWrapper>\n        </TextContainer>\n    </OptionContainer>\n  );\n};\n\nexport default QuizButton;\n"],"file":"QuizButton.cjs"}

package/dist/QuizButton/QuizButton.js

@@ -5,7 +5,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import * as React from 'react';
 import styled from 'styled-components';
-import { Checkbox, COLORS, RadioButton, Size, SystemIcons } from '..';
+import { Checkbox, COLORS, defaultOnMouseDownHandler, RadioButton, Size, SystemIcons } from '..';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -75,9 +75,7 @@ var QuizButton = function QuizButton(_ref) {
     onClick: onClick,
     isSelected: selected,
     tabIndex: disabled || resultType ? -1 : 0,
-    onMouseDown: function onMouseDown(e) {
-      return e.preventDefault();
-    },
+    onMouseDown: defaultOnMouseDownHandler,
     size: size,
     className: 'quiz-button '.concat(selected ? ' selected' : '').concat(disabled ? ' disabled' : '').concat(resultType ? ' result ' + resultType : '').concat(className ? ' ' + className : ''),
     "data-testid": 'container',

package/dist/QuizButton/QuizButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/QuizButton/QuizButton.tsx"],"names":["React","styled","Checkbox","COLORS","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","focus_25","focus","accent1_300","isSelected","accent1_700","accent1_400","accent1_800","renderResultContent","resultType","white","QuizButton","text","type","onClick","id","className","selected","disabled","Medium","e","preventDefault","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Checkbox, COLORS, 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    &:focus {\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  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};\n    border-radius: 8px;\n    outline: none;\n\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  &:focus:not(.disabled):not(.result),\n  &.focus-state {\n    ${ButtonContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_200 : COLORS.accent1_100};\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_100  : COLORS.accent1_20};\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\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.CheckComplete 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  className?: string;\n}\n\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({text, type, onClick, resultType, id, className, selected=false, disabled=false, size=Size.Medium}) => {\n  return (   \n    <OptionContainer onClick={onClick} isSelected={selected} tabIndex={(disabled || resultType )?-1 : 0} onMouseDown={e=>e.preventDefault()} 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        <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;"],"file":"QuizButton.js"}
+{"version":3,"sources":["../../src/QuizButton/QuizButton.tsx"],"names":["React","styled","Checkbox","COLORS","defaultOnMouseDownHandler","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","focus_25","focus","accent1_300","isSelected","accent1_700","accent1_400","accent1_800","renderResultContent","resultType","white","QuizButton","text","type","onClick","id","className","selected","disabled","Medium","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Checkbox, COLORS, defaultOnMouseDownHandler, 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    &:focus {\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  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};\n    border-radius: 8px;\n    outline: none;\n\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  &:focus:not(.disabled):not(.result),\n  &.focus-state {\n    ${ButtonContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_200 : COLORS.accent1_100};\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_100  : COLORS.accent1_20};\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\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.CheckComplete 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  className?: string;\n}\n\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({text, type, onClick, resultType, id, className, selected=false, disabled=false, size=Size.Medium}) => {\n  return (   \n    <OptionContainer onClick={onClick} isSelected={selected} tabIndex={(disabled || resultType )?-1 : 0} onMouseDown={defaultOnMouseDownHandler} 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        <ButtonContainer data-testid={'btnContainer'} className={'quiz-button-icon'} size={size}>\n          {\n            resultType ? renderResultContent(resultType) : (\n                                type==='radio' ? <RadioButton selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/> : <Checkbox selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/>\n                              )\n          }\n        </ButtonContainer>\n\n        <TextContainer data-testid={'txtContainer'} className={'quiz-button-text'} size={size}>\n          <TextWrapper size={size}>\n            {text}\n          </TextWrapper>\n        </TextContainer>\n    </OptionContainer>\n  );\n};\n\nexport default QuizButton;\n"],"file":"QuizButton.js"}