@laerdal/life-react-components 3.5.2 → 3.5.3

package/dist/QuizButton/QuizButton.cjs

@@ -5,95 +5,59 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _ = require("..");
 var _typography = require("../styles/typography");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["text", "type", "onClick", "resultType", "id", "className", "selected", "disabled", "size"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var TextContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  border-radius: 0 8px 8px 0;\n  display: flex;\n  background: ", ";\n  width: 100%;\n\n  transition: background 100ms ease-in-out;\n  align-items: center;\n\n  padding: ", ";\n  ", "\n"])), function (props) {
-  return _.COLORS.getColor('accent1_20', props.theme);
-}, function (props) {
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var TextContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 0 8px 8px 0;\n  display: flex;\n  background: ", ";\n  width: 100%;\n\n  transition: background 100ms ease-in-out;\n  align-items: center;\n\n  padding: ", ";\n  ", "\n"])), _.COLORS.accent1_20, function (props) {
   return props.size === _.Size.Small ? '6px 8px' : props.size === _.Size.Large ? '20px 16px' : '12px 16px';
 }, function (props) {
   return props.size === _.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null) : props.size === _.Size.Large ? (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null);
 });
-var TextWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])([""])));
-var ButtonContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  border-radius: 8px 0 0 8px;\n  display: flex;\n  background: ", ";\n\n  width: ", ";\n\n  transition: background 100ms ease-in-out;\n\n  .quiz-button-result-icon {\n    height: ", ";\n    width: ", ";\n  }\n\n  .radio-button-icon, .checkbox-icon {\n    margin: auto;\n    min-width: unset;\n    background: transparent;\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      background: transparent;\n    }\n\n    &:active {\n      background: transparent;\n    }\n  }\n\n  .small {\n    min-width: 32px;\n    min-height: 32px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n\n  .medium {\n    min-width: 48px;\n    min-height: 48px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 24px;\n        width: 24px;\n      }\n    }\n  }\n\n  .large {\n    min-width: 64px;\n    min-height: 64px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 32px;\n        width: 32px;\n      }\n    }\n  }\n"])), function (props) {
-  return _.COLORS.getColor('accent1_100', props.theme);
-}, function (props) {
+var TextWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([""])));
+var ButtonContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 8px 0 0 8px;\n  display: flex;\n  background: ", ";\n\n  width: ", ";\n\n  transition: background 100ms ease-in-out;\n\n  .quiz-button-result-icon {\n    height: ", ";\n    width: ", ";\n  }\n\n  .radio-button-icon, .checkbox-icon {\n    margin: auto;\n    min-width: unset;\n    background: transparent;\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      background: transparent;\n    }\n\n    &:active {\n      background: transparent;\n    }\n  }\n\n  .small {\n    min-width: 32px;\n    min-height: 32px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n\n  .medium {\n    min-width: 48px;\n    min-height: 48px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 24px;\n        width: 24px;\n      }\n    }\n  }\n\n  .large {\n    min-width: 64px;\n    min-height: 64px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 32px;\n        width: 32px;\n      }\n    }\n  }\n"])), _.COLORS.accent1_100, function (props) {
   return props.size === _.Size.Small ? '32px' : props.size === _.Size.Large ? '64px' : '48px';
 }, function (props) {
   return props.size === _.Size.Small ? '16px' : props.size === _.Size.Large ? '32px' : '24px';
 }, function (props) {
   return props.size === _.Size.Small ? '32px' : props.size === _.Size.Large ? '64px' : '48px';
-}, function (props) {
-  return _.COLORS.getColor('accent1_600', props.theme);
-});
-var OptionContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  max-width: 65ch;  \n  word-break: break-word;\n\n  min-height: ", ";\n  margin-bottom: ", ";\n\n  &.selected {\n    ", " {\n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    ", " {\n      pointer-events: none;\n      background: ", ";\n    }\n    ", " {\n      pointer-events: none;\n      background: ", ";\n      color: ", ";\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &.correct {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    ", "\n  }\n\n  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active,\n  &.active-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:hover:not(.disabled):not(.result),\n  &.hover-state {\n    ", " {\n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:active:not(.disabled):not(.result),\n  &.active-state {\n    ", " {\n      background: ", ";\n      transition: none;\n    }\n    ", " {\n      background: ", ";\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) {
+}, _.COLORS.accent1_600);
+var OptionContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  max-width: 65ch;  \n  word-break: break-word;\n\n  min-height: ", ";\n  margin-bottom: ", ";\n\n  &.selected {\n    ", " {\n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    ", " {\n      pointer-events: none;\n      background: ", ";\n    }\n    ", " {\n      pointer-events: none;\n      background: ", ";\n      color: ", ";\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &.correct {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    ", "\n  }\n\n  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active,\n  &.active-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:hover:not(.disabled):not(.result),\n  &.hover-state {\n    ", " {\n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:active:not(.disabled):not(.result),\n  &.active-state {\n    ", " {\n      background: ", ";\n      transition: none;\n    }\n    ", " {\n      background: ", ";\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) {
   return props.size === _.Size.Small ? '32px' : props.size === _.Size.Large ? '64px' : '48px';
 }, function (props) {
   return props.size === _.Size.Small ? '16px' : props.size === _.Size.Large ? '32px' : '24px';
-}, TextContainer, function (props) {
-  return _.COLORS.getColor('accent1_100', props.theme);
-}, ButtonContainer, function (props) {
-  return _.COLORS.getColor('accent1_200', props.theme);
-}, ButtonContainer, function (props) {
-  return _.COLORS.getColor('neutral_100', props.theme);
-}, TextContainer, function (props) {
-  return _.COLORS.getColor('neutral_20', props.theme);
-}, function (props) {
-  return _.COLORS.getColor('neutral_300', props.theme);
-}, TextContainer, function (props) {
-  return _.COLORS.getColor('correct_20', props.theme);
-}, ButtonContainer, function (props) {
-  return _.COLORS.getColor('correct_400', props.theme);
-}, TextContainer, function (props) {
-  return _.COLORS.getColor('critical_20', props.theme);
-}, ButtonContainer, function (props) {
-  return _.COLORS.getColor('critical_500', props.theme);
-}, TextContainer, function (props) {
-  return _.COLORS.getColor('warning_20', props.theme);
-}, ButtonContainer, function (props) {
-  return _.COLORS.getColor('warning_400', props.theme);
-}, _.focusStyles, ButtonContainer, function (props) {
-  return _.COLORS.getColor('accent1_300', props.theme);
-}, TextContainer, function (props) {
-  return props.isSelected ? _.COLORS.getColor('accent1_200', props.theme) : _.COLORS.getColor('accent1_100', props.theme);
-}, function (props) {
-  return _.COLORS.getColor('accent1_700', props.theme);
-}, ButtonContainer, function (props) {
-  return _.COLORS.getColor('accent1_400', props.theme);
-}, TextContainer, function (props) {
-  return props.isSelected ? _.COLORS.getColor('accent1_300', props.theme) : _.COLORS.getColor('accent1_200', props.theme);
-}, function (props) {
-  return _.COLORS.getColor('accent1_800', props.theme);
-});
-var renderResultContent = function renderResultContent(resultType, theme) {
+}, TextContainer, _.COLORS.accent1_100, ButtonContainer, _.COLORS.accent1_200, ButtonContainer, _.COLORS.neutral_100, TextContainer, _.COLORS.neutral_20, _.COLORS.neutral_300, TextContainer, _.COLORS.correct_20, ButtonContainer, _.COLORS.correct_400, TextContainer, _.COLORS.critical_20, ButtonContainer, _.COLORS.critical_500, TextContainer, _.COLORS.warning_20, ButtonContainer, _.COLORS.warning_400, _.focusStyles, ButtonContainer, _.COLORS.accent1_300, TextContainer, function (props) {
+  return props.isSelected ? _.COLORS.accent1_200 : _.COLORS.accent1_100;
+}, _.COLORS.accent1_700, ButtonContainer, _.COLORS.accent1_400, TextContainer, function (props) {
+  return props.isSelected ? _.COLORS.accent1_300 : _.COLORS.accent1_200;
+}, _.COLORS.accent1_800);
+var renderResultContent = function renderResultContent(resultType) {
   switch (resultType) {
     case 'correct':
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SystemIcons.CheckMark, {
-        color: _.COLORS.getColor('white', theme),
+        color: _.COLORS.white,
         className: 'quiz-button-result-icon'
       });
     case 'incorrect':
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SystemIcons.Close, {
-        color: _.COLORS.getColor('white', theme),
+        color: _.COLORS.white,
         className: 'quiz-button-result-icon'
       });
     default:
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SystemIcons.Close, {
-        color: _.COLORS.getColor('white', theme),
+        color: _.COLORS.white,
         className: 'quiz-button-result-icon'
       });
   }
@@ -111,8 +75,7 @@ var QuizButton = function QuizButton(_ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _.Size.Medium : _ref$size,
-    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var theme = (0, _styledComponents.useTheme)();
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(OptionContainer, _objectSpread(_objectSpread({
     onClick: onClick,
     isSelected: selected,
@@ -128,7 +91,7 @@ var QuizButton = function QuizButton(_ref) {
       "data-testid": 'btnContainer',
       className: 'quiz-button-icon',
       size: size,
-      children: resultType ? renderResultContent(resultType, theme) : type === 'radio' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.RadioButton, {
+      children: resultType ? renderResultContent(resultType) : type === 'radio' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.RadioButton, {
         selected: selected,
         disabled: disabled,
         size: size,
@@ -155,14 +118,14 @@ var QuizButton = function QuizButton(_ref) {
   }));
 };
 QuizButton.propTypes = {
-  resultType: _propTypes["default"].oneOf(['correct', 'incorrect', 'partial']),
-  text: _propTypes["default"].string.isRequired,
-  onClick: _propTypes["default"].func,
-  id: _propTypes["default"].string.isRequired,
-  selected: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool,
-  type: _propTypes["default"].oneOf(['radio', 'checkbox']).isRequired
+  resultType: _propTypes.default.oneOf(['correct', 'incorrect', 'partial']),
+  text: _propTypes.default.string.isRequired,
+  onClick: _propTypes.default.func,
+  id: _propTypes.default.string.isRequired,
+  selected: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  type: _propTypes.default.oneOf(['radio', 'checkbox']).isRequired
 };
 var _default = QuizButton;
-exports["default"] = _default;
+exports.default = _default;
 //# sourceMappingURL=QuizButton.cjs.map

package/dist/QuizButton/QuizButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"QuizButton.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_","_typography","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","TextContainer","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","size","Size","Small","Large","ComponentSStyling","ComponentTextStyle","Regular","ComponentLStyling","ComponentMStyling","TextWrapper","ButtonContainer","OptionContainer","focusStyles","isSelected","renderResultContent","resultType","jsx","SystemIcons","CheckMark","color","className","Close","QuizButton","_ref","text","type","onClick","id","_ref$selected","selected","_ref$disabled","disabled","_ref$size","Medium","rest","_objectWithoutProperties2","useTheme","jsxs","tabIndex","onMouseDown","defaultOnMouseDownHandler","concat","role","children","RadioButton","tabIndexVal","select","Checkbox","propTypes","_propTypes","oneOf","string","isRequired","func","bool","_default","exports"],"sources":["../../src/QuizButton/QuizButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, RadioButton, Size, SystemIcons} from '..';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nconst TextContainer = styled.div<{size: Size}>`\r\n  border-radius: 0 8px 8px 0;\r\n  display: flex;\r\n  background: ${props => COLORS.getColor('accent1_20', props.theme)};\r\n  width: 100%;\r\n\r\n  transition: background 100ms ease-in-out;\r\n  align-items: center;\r\n\r\n  padding: ${props=>props.size===Size.Small?'6px 8px':(props.size===Size.Large?'20px 16px':'12px 16px')};\r\n  ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Regular,null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Regular,null) : ComponentMStyling(ComponentTextStyle.Regular,null))}\r\n`;\r\n\r\nconst TextWrapper = styled.div<{size:Size}>``;\r\n\r\nconst ButtonContainer = styled.div<{size: Size}>`\r\n  border-radius: 8px 0 0 8px;\r\n  display: flex;\r\n  background: ${props => COLORS.getColor('accent1_100', props.theme)};\r\n\r\n  width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\r\n\r\n  transition: background 100ms ease-in-out;\r\n\r\n  .quiz-button-result-icon {\r\n    height: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\r\n    width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\r\n  }\r\n\r\n  .radio-button-icon, .checkbox-icon {\r\n    margin: auto;\r\n    min-width: unset;\r\n    background: transparent;\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('accent1_600', props.theme)};\r\n    }\r\n\r\n    &:hover {\r\n      background: transparent;\r\n    }\r\n\r\n    &:active {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  .small {\r\n    min-width: 32px;\r\n    min-height: 32px;\r\n    .radio-button-icon, .checkbox-icon {\r\n      svg {\r\n        height: 16px;\r\n        width: 16px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .medium {\r\n    min-width: 48px;\r\n    min-height: 48px;\r\n    .radio-button-icon, .checkbox-icon {\r\n      svg {\r\n        height: 24px;\r\n        width: 24px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .large {\r\n    min-width: 64px;\r\n    min-height: 64px;\r\n    .radio-button-icon, .checkbox-icon {\r\n      svg {\r\n        height: 32px;\r\n        width: 32px;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst OptionContainer = styled.div<{isSelected:boolean, size:Size}>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  cursor: pointer;\r\n  max-width: 65ch;  \r\n  word-break: break-word;\r\n\r\n  min-height: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\r\n  margin-bottom: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\r\n\r\n  &.selected {\r\n    ${TextContainer} {\r\n      background: ${props => COLORS.getColor('accent1_100', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('accent1_200', props.theme)};\r\n    }\r\n  }\r\n  \r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    \r\n    ${ButtonContainer} {\r\n      pointer-events: none;\r\n      background: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    }\r\n    ${TextContainer} {\r\n      pointer-events: none;\r\n      background: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  &.correct {\r\n    ${TextContainer} {    \r\n      background: ${props => COLORS.getColor('correct_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('correct_400', props.theme)};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.incorrect {\r\n    ${TextContainer} {    \r\n      background: ${props => COLORS.getColor('critical_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('critical_500', props.theme)};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.partial {\r\n    ${TextContainer} {    \r\n      background: ${props => COLORS.getColor('warning_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('warning_400', props.theme)};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled):not(.result),\r\n  &.hover-state {\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('accent1_300', props.theme)};\r\n    }\r\n    ${TextContainer} {\r\n      background: ${props=>props.isSelected ? COLORS.getColor('accent1_200', props.theme)  : COLORS.getColor('accent1_100', props.theme)};\r\n    }\r\n    \r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n      svg {\r\n        color: ${props => COLORS.getColor('accent1_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled):not(.result),\r\n  &.active-state {\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n      transition: none;\r\n    }\r\n    ${TextContainer} {\r\n      background: ${props=>props.isSelected ? COLORS.getColor('accent1_300', props.theme) : COLORS.getColor('accent1_200', props.theme)};\r\n      transition: none;\r\n    }\r\n\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n      svg {\r\n        color: ${props => COLORS.getColor('accent1_800', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst renderResultContent = (resultType: string, theme: any) => {\r\n  switch(resultType){\r\n    case 'correct' : return <SystemIcons.CheckMark color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n\r\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n\r\n    default : return <SystemIcons.Close color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n  }\r\n};\r\n\r\nexport type QuizButtonProps = {\r\n  /**\r\n   * Optional. The result type of the quiz button. Can be 'correct', 'incorrect', or 'partial'.\r\n   */\r\n  resultType?: 'correct' | 'incorrect' | 'partial';\r\n\r\n  /**\r\n   * Required. The text to be displayed on the quiz button.\r\n   */\r\n  text: string;\r\n\r\n  /**\r\n   * Optional. A function to be called when the quiz button is clicked.\r\n   */\r\n  onClick?: (arg:any)=>void;\r\n\r\n  /**\r\n   * Required. The ID of the quiz button.\r\n   */\r\n  id: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the quiz button is selected.\r\n   */\r\n  selected?: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the quiz button is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Optional. The size of the quiz button. Can be 'Small', 'Medium', or 'Large'.\r\n   */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n\r\n  /**\r\n   * Required. The type of the quiz button. Can be 'radio' or 'checkbox'.\r\n   */\r\n  type: 'radio' | 'checkbox';\r\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>\r\n\r\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({\r\n                                                                text,\r\n                                                                type,\r\n                                                                onClick,\r\n                                                                resultType,\r\n                                                                id,\r\n                                                                className,\r\n                                                                selected = false,\r\n                                                                disabled = false,\r\n                                                                size = Size.Medium,\r\n                                                                ...rest\r\n                                                              }) => {\r\n\r\n  const theme = useTheme();\r\n  return (   \r\n    <OptionContainer\r\n      onClick={onClick}\r\n      isSelected={selected}\r\n      tabIndex={(disabled || resultType) ? -1 : 0}\r\n      onMouseDown={defaultOnMouseDownHandler}\r\n      size={size}\r\n      className={'quiz-button '.concat(selected ? ' selected' : '')\r\n        .concat(disabled ? ' disabled' : '')\r\n        .concat(resultType ? ' result ' + resultType : '')\r\n        .concat(className ? ' ' + className : '')}\r\n      data-testid={'container'}\r\n      aria-checked={selected}\r\n      role={type === 'radio'? 'radio' : 'checkbox'}\r\n      {...rest}>\r\n        <ButtonContainer data-testid={'btnContainer'} className={'quiz-button-icon'} size={size}>\r\n          {\r\n            resultType ? renderResultContent(resultType, theme) : (\r\n                                type==='radio' ? <RadioButton selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\r\n                                select={()=>{}} id={id}/> : <Checkbox selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\r\n                                select={()=>{}} id={id}/>\r\n                              )\r\n          }\r\n        </ButtonContainer>\r\n\r\n        <TextContainer data-testid={'txtContainer'} className={'quiz-button-text'} size={size}>\r\n          <TextWrapper size={size}>\r\n            {text}\r\n          </TextWrapper>\r\n        </TextContainer>\r\n    </OptionContainer>\r\n  );\r\n};\r\n\r\nexport default QuizButton;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"QuizButton.cjs","names":["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,37 +1,13 @@
 import * as React from 'react';
 import { Size } from '..';
-export type QuizButtonProps = {
-    /**
-     * Optional. The result type of the quiz button. Can be 'correct', 'incorrect', or 'partial'.
-     */
+type QuizButtonProps = {
     resultType?: 'correct' | 'incorrect' | 'partial';
-    /**
-     * Required. The text to be displayed on the quiz button.
-     */
     text: string;
-    /**
-     * Optional. A function to be called when the quiz button is clicked.
-     */
     onClick?: (arg: any) => void;
-    /**
-     * Required. The ID of the quiz button.
-     */
     id: string;
-    /**
-     * Optional. A boolean indicating whether the quiz button is selected.
-     */
     selected?: boolean;
-    /**
-     * Optional. A boolean indicating whether the quiz button is disabled.
-     */
     disabled?: boolean;
-    /**
-     * Optional. The size of the quiz button. Can be 'Small', 'Medium', or 'Large'.
-     */
     size?: Size.Small | Size.Medium | Size.Large;
-    /**
-     * Required. The type of the quiz button. Can be 'radio' or 'checkbox'.
-     */
     type: 'radio' | 'checkbox';
 } & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>;
 declare const QuizButton: React.FunctionComponent<QuizButtonProps>;

package/dist/QuizButton/QuizButton.js

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

package/dist/QuizButton/QuizButton.js.map

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "QuizButton", {
   enumerable: true,
   get: function get() {
-    return _QuizButton["default"];
+    return _QuizButton.default;
   }
 });
 var _QuizButton = _interopRequireDefault(require("./QuizButton"));

package/dist/QuizButton/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["_QuizButton","_interopRequireDefault","require"],"sources":["../../src/QuizButton/index.ts"],"sourcesContent":["export { default as QuizButton } from './QuizButton';"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA","ignoreList":[]}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/QuizButton/index.ts"],"sourcesContent":["export { default as QuizButton } from './QuizButton';"],"mappings":";;;;;;;;;;;;AAAA"}

package/dist/QuizButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","QuizButton"],"sources":["../../src/QuizButton/index.ts"],"sourcesContent":["export { default as QuizButton } from './QuizButton';"],"mappings":"AAAA,SAASA,OAAO,IAAIC,UAAU,QAAQ,cAAc","ignoreList":[]}
+{"version":3,"file":"index.js","names":["default","QuizButton"],"sources":["../../src/QuizButton/index.ts"],"sourcesContent":["export { default as QuizButton } from './QuizButton';"],"mappings":"AAAA,SAASA,OAAO,IAAIC,UAAU,QAAQ,cAAc"}