@laerdal/life-react-components 5.0.9 → 5.1.1

package/dist/QuizButton/QuizButton.js

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

package/dist/QuizButton/QuizButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuizButton.js","names":["React","styled","useTheme","Checkbox","COLORS","defaultOnMouseDownHandler","focusStyles","RadioButton","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","jsx","_jsx","jsxs","_jsxs","TextContainer","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","$size","Small","Large","Regular","TextWrapper","_templateObject2","ButtonContainer","_templateObject3","OptionContainer","_templateObject4","$isSelected","renderResultContent","resultType","CheckMark","color","className","Close","QuizButton","_ref","text","type","onClick","id","_ref$selected","selected","_ref$disabled","disabled","_ref$size","size","Medium","rest","_objectWithoutProperties","_excluded","_objectSpread","tabIndex","onMouseDown","concat","role","children","tabIndexVal","select","propTypes","_pt","oneOf","string","isRequired","func","bool"],"sources":["../../src/QuizButton/QuizButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, RadioButton, Size, SystemIcons} from '..';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nconst TextContainer = styled.div<{$size: Size}>`\r\n  border-radius: 0 8px 8px 0;\r\n  display: flex;\r\n  background: ${props => COLORS.getColor('accent1_20', props.theme)};\r\n  width: 100%;\r\n\r\n  transition: background 100ms ease-in-out;\r\n  align-items: center;\r\n\r\n  padding: ${props=>props.$size===Size.Small?'6px 8px':(props.$size===Size.Large?'20px 16px':'12px 16px')};\r\n  ${props=>props.$size===Size.Small ? ComponentSStyling(ComponentTextStyle.Regular,null) : (props.$size===Size.Large ? ComponentLStyling(ComponentTextStyle.Regular,null) : ComponentMStyling(ComponentTextStyle.Regular,null))}\r\n`;\r\n\r\nconst TextWrapper = styled.div<{$size:Size}>``;\r\n\r\nconst ButtonContainer = styled.div<{$size: Size}>`\r\n  border-radius: 8px 0 0 8px;\r\n  display: flex;\r\n  background: ${props => COLORS.getColor('accent1_100', props.theme)};\r\n\r\n  width: ${props=>props.$size===Size.Small?'32px':(props.$size===Size.Large?'64px':'48px')};\r\n\r\n  transition: background 100ms ease-in-out;\r\n\r\n  .quiz-button-result-icon {\r\n    height: ${props=>props.$size===Size.Small?'16px':(props.$size===Size.Large?'32px':'24px')};\r\n    width: ${props=>props.$size===Size.Small?'32px':(props.$size===Size.Large?'64px':'48px')};\r\n  }\r\n\r\n  .radio-button-icon, .checkbox-icon {\r\n    margin: auto;\r\n    min-width: unset;\r\n    background: transparent;\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('accent1_600', props.theme)};\r\n    }\r\n\r\n    &:hover {\r\n      background: transparent;\r\n    }\r\n\r\n    &:active {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  .small {\r\n    min-width: 32px;\r\n    min-height: 32px;\r\n    .radio-button-icon, .checkbox-icon {\r\n      svg {\r\n        height: 16px;\r\n        width: 16px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .medium {\r\n    min-width: 48px;\r\n    min-height: 48px;\r\n    .radio-button-icon, .checkbox-icon {\r\n      svg {\r\n        height: 24px;\r\n        width: 24px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .large {\r\n    min-width: 64px;\r\n    min-height: 64px;\r\n    .radio-button-icon, .checkbox-icon {\r\n      svg {\r\n        height: 32px;\r\n        width: 32px;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst OptionContainer = styled.div<{$isSelected:boolean, $size:Size}>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  cursor: pointer;\r\n  max-width: 65ch;  \r\n  word-break: break-word;\r\n\r\n  min-height: ${props=>props.$size===Size.Small?'32px':(props.$size===Size.Large?'64px':'48px')};\r\n  margin-bottom: ${props=>props.$size===Size.Small?'16px':(props.$size===Size.Large?'32px':'24px')};\r\n\r\n  &.selected {\r\n    ${TextContainer} {\r\n      background: ${props => COLORS.getColor('accent1_100', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('accent1_200', props.theme)};\r\n    }\r\n  }\r\n  \r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    \r\n    ${ButtonContainer} {\r\n      pointer-events: none;\r\n      background: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    }\r\n    ${TextContainer} {\r\n      pointer-events: none;\r\n      background: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  &.correct {\r\n    ${TextContainer} {    \r\n      background: ${props => COLORS.getColor('correct_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('correct_400', props.theme)};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.incorrect {\r\n    ${TextContainer} {    \r\n      background: ${props => COLORS.getColor('critical_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('critical_500', props.theme)};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.partial {\r\n    ${TextContainer} {    \r\n      background: ${props => COLORS.getColor('warning_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('warning_400', props.theme)};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled):not(.result),\r\n  &.hover-state {\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('accent1_300', props.theme)};\r\n    }\r\n    ${TextContainer} {\r\n      background: ${props=>props.$isSelected ? COLORS.getColor('accent1_200', props.theme)  : COLORS.getColor('accent1_100', props.theme)};\r\n    }\r\n    \r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n      svg {\r\n        color: ${props => COLORS.getColor('accent1_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled):not(.result),\r\n  &.active-state {\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n      transition: none;\r\n    }\r\n    ${TextContainer} {\r\n      background: ${props=>props.$isSelected ? COLORS.getColor('accent1_300', props.theme) : COLORS.getColor('accent1_200', props.theme)};\r\n      transition: none;\r\n    }\r\n\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n      svg {\r\n        color: ${props => COLORS.getColor('accent1_800', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst renderResultContent = (resultType: string, theme: any) => {\r\n  switch(resultType){\r\n    case 'correct' : return <SystemIcons.CheckMark color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n\r\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n\r\n    default : return <SystemIcons.Close color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n  }\r\n};\r\n\r\nexport type QuizButtonProps = {\r\n  /**\r\n   * Optional. The result type of the quiz button. Can be 'correct', 'incorrect', or 'partial'.\r\n   */\r\n  resultType?: 'correct' | 'incorrect' | 'partial';\r\n\r\n  /**\r\n   * Required. The text to be displayed on the quiz button.\r\n   */\r\n  text: string;\r\n\r\n  /**\r\n   * Optional. A function to be called when the quiz button is clicked.\r\n   */\r\n  onClick?: (arg:any)=>void;\r\n\r\n  /**\r\n   * Required. The ID of the quiz button.\r\n   */\r\n  id: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the quiz button is selected.\r\n   */\r\n  selected?: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the quiz button is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Optional. The size of the quiz button. Can be 'Small', 'Medium', or 'Large'.\r\n   */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n\r\n  /**\r\n   * Required. The type of the quiz button. Can be 'radio' or 'checkbox'.\r\n   */\r\n  type: 'radio' | 'checkbox';\r\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>\r\n\r\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({\r\n                                                                text,\r\n                                                                type,\r\n                                                                onClick,\r\n                                                                resultType,\r\n                                                                id,\r\n                                                                className,\r\n                                                                selected = false,\r\n                                                                disabled = false,\r\n                                                                size = Size.Medium,\r\n                                                                ...rest\r\n                                                              }) => {\r\n\r\n  const theme = useTheme();\r\n  return (   \r\n    <OptionContainer\r\n      onClick={onClick}\r\n      $isSelected={selected}\r\n      tabIndex={(disabled || resultType) ? -1 : 0}\r\n      onMouseDown={defaultOnMouseDownHandler}\r\n      $size={size}\r\n      className={'quiz-button '.concat(selected ? ' selected' : '')\r\n        .concat(disabled ? ' disabled' : '')\r\n        .concat(resultType ? ' result ' + resultType : '')\r\n        .concat(className ? ' ' + className : '')}\r\n      data-testid={'container'}\r\n      aria-checked={selected}\r\n      role={type === 'radio'? 'radio' : 'checkbox'}\r\n      {...rest}>\r\n        <ButtonContainer data-testid={'btnContainer'} className={'quiz-button-icon'} $size={size}>\r\n          {\r\n            resultType ? renderResultContent(resultType, theme) : (\r\n                                type==='radio' ? <RadioButton selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\r\n                                select={()=>{}} id={id}/> : <Checkbox selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\r\n                                select={()=>{}} id={id}/>\r\n                              )\r\n          }\r\n        </ButtonContainer>\r\n\r\n        <TextContainer data-testid={'txtContainer'} className={'quiz-button-text'} $size={size}>\r\n          <TextWrapper $size={size}>\r\n            {text}\r\n          </TextWrapper>\r\n        </TextContainer>\r\n    </OptionContainer>\r\n  );\r\n};\r\n\r\nexport default QuizButton;\r\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,IAAIC,QAAQ,QAAQ,mBAAmB;AACpD,SAAQC,QAAQ,EAAEC,MAAM,EAAEC,yBAAyB,EAAEC,WAAW,EAAEC,WAAW,EAAEC,IAAI,EAAEC,WAAW,QAAO,IAAI;AAC3G,SAASC,iBAAiB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEnH,IAAMC,aAAa,GAAGjB,MAAM,CAACkB,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,oMAGhB,UAAAC,KAAK;EAAA,OAAIlB,MAAM,CAACmB,QAAQ,CAAC,YAAY,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAMtD,UAAAF,KAAK;EAAA,OAAEA,KAAK,CAACG,KAAK,KAAGjB,IAAI,CAACkB,KAAK,GAAC,SAAS,GAAEJ,KAAK,CAACG,KAAK,KAAGjB,IAAI,CAACmB,KAAK,GAAC,WAAW,GAAC,WAAY;AAAA,GACrG,UAAAL,KAAK;EAAA,OAAEA,KAAK,CAACG,KAAK,KAAGjB,IAAI,CAACkB,KAAK,GAAGd,iBAAiB,CAACC,kBAAkB,CAACe,OAAO,EAAC,IAAI,CAAC,GAAIN,KAAK,CAACG,KAAK,KAAGjB,IAAI,CAACmB,KAAK,GAAGjB,iBAAiB,CAACG,kBAAkB,CAACe,OAAO,EAAC,IAAI,CAAC,GAAGjB,iBAAiB,CAACE,kBAAkB,CAACe,OAAO,EAAC,IAAI,CAAE;AAAA,EAC9N;AAED,IAAMC,WAAW,GAAG5B,MAAM,CAACkB,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAT,sBAAA,QAAgB;AAE9C,IAAMU,eAAe,GAAG9B,MAAM,CAACkB,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAX,sBAAA,ygCAGlB,UAAAC,KAAK;EAAA,OAAIlB,MAAM,CAACmB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAEzD,UAAAF,KAAK;EAAA,OAAEA,KAAK,CAACG,KAAK,KAAGjB,IAAI,CAACkB,KAAK,GAAC,MAAM,GAAEJ,KAAK,CAACG,KAAK,KAAGjB,IAAI,CAACmB,KAAK,GAAC,MAAM,GAAC,MAAO;AAAA,GAK5E,UAAAL,KAAK;EAAA,OAAEA,KAAK,CAACG,KAAK,KAAGjB,IAAI,CAACkB,KAAK,GAAC,MAAM,GAAEJ,KAAK,CAACG,KAAK,KAAGjB,IAAI,CAACmB,KAAK,GAAC,MAAM,GAAC,MAAO;AAAA,GAChF,UAAAL,KAAK;EAAA,OAAEA,KAAK,CAACG,KAAK,KAAGjB,IAAI,CAACkB,KAAK,GAAC,MAAM,GAAEJ,KAAK,CAACG,KAAK,KAAGjB,IAAI,CAACmB,KAAK,GAAC,MAAM,GAAC,MAAO;AAAA,GAS7E,UAAAL,KAAK;EAAA,OAAIlB,MAAM,CAACmB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,EA4ClE;AAED,IAAMS,eAAe,GAAGhC,MAAM,CAACkB,GAAG,CAAAe,gBAAA,KAAAA,gBAAA,GAAAb,sBAAA,m7DAOlB,UAAAC,KAAK;EAAA,OAAEA,KAAK,CAACG,KAAK,KAAGjB,IAAI,CAACkB,KAAK,GAAC,MAAM,GAAEJ,KAAK,CAACG,KAAK,KAAGjB,IAAI,CAACmB,KAAK,GAAC,MAAM,GAAC,MAAO;AAAA,GAC5E,UAAAL,KAAK;EAAA,OAAEA,KAAK,CAACG,KAAK,KAAGjB,IAAI,CAACkB,KAAK,GAAC,MAAM,GAAEJ,KAAK,CAACG,KAAK,KAAGjB,IAAI,CAACmB,KAAK,GAAC,MAAM,GAAC,MAAO;AAAA,GAG5FT,aAAa,EACC,UAAAI,KAAK;EAAA,OAAIlB,MAAM,CAACmB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAElEO,eAAe,EACD,UAAAT,KAAK;EAAA,OAAIlB,MAAM,CAACmB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAOlEO,eAAe,EAED,UAAAT,KAAK;EAAA,OAAIlB,MAAM,CAACmB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAElEN,aAAa,EAEC,UAAAI,KAAK;EAAA,OAAIlB,MAAM,CAACmB,QAAQ,CAAC,YAAY,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GACxD,UAAAF,KAAK;EAAA,OAAIlB,MAAM,CAACmB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAS7DN,aAAa,EACC,UAAAI,KAAK;EAAA,OAAIlB,MAAM,CAACmB,QAAQ,CAAC,YAAY,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAEjEO,eAAe,EACD,UAAAT,KAAK;EAAA,OAAIlB,MAAM,CAACmB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAQlEN,aAAa,EACC,UAAAI,KAAK;EAAA,OAAIlB,MAAM,CAACmB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAElEO,eAAe,EACD,UAAAT,KAAK;EAAA,OAAIlB,MAAM,CAACmB,QAAQ,CAAC,cAAc,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAQnEN,aAAa,EACC,UAAAI,KAAK;EAAA,OAAIlB,MAAM,CAACmB,QAAQ,CAAC,YAAY,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAEjEO,eAAe,EACD,UAAAT,KAAK;EAAA,OAAIlB,MAAM,CAACmB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GASlElB,WAAW,EAmBXyB,eAAe,EACD,UAAAT,KAAK;EAAA,OAAIlB,MAAM,CAACmB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAElEN,aAAa,EACC,UAAAI,KAAK;EAAA,OAAEA,KAAK,CAACa,WAAW,GAAG/B,MAAM,CAACmB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,GAAIpB,MAAM,CAACmB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAMxH,UAAAF,KAAK;EAAA,OAAIlB,MAAM,CAACmB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAO/DO,eAAe,EACD,UAAAT,KAAK;EAAA,OAAIlB,MAAM,CAACmB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAGlEN,aAAa,EACC,UAAAI,KAAK;EAAA,OAAEA,KAAK,CAACa,WAAW,GAAG/B,MAAM,CAACmB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,GAAGpB,MAAM,CAACmB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAOvH,UAAAF,KAAK;EAAA,OAAIlB,MAAM,CAACmB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,EAIpE;AAED,IAAMY,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAIC,UAAkB,EAAEb,KAAU,EAAK;EAC9D,QAAOa,UAAU;IACf,KAAK,SAAS;MAAG,oBAAOtB,IAAA,CAACN,WAAW,CAAC6B,SAAS;QAACC,KAAK,EAAEnC,MAAM,CAACmB,QAAQ,CAAC,OAAO,EAAEC,KAAK,CAAE;QAACgB,SAAS,EAAE;MAA0B,CAAC,CAAC;IAE9H,KAAK,WAAW;MAAG,oBAAOzB,IAAA,CAACN,WAAW,CAACgC,KAAK;QAACF,KAAK,EAAEnC,MAAM,CAACmB,QAAQ,CAAC,OAAO,EAAEC,KAAK,CAAE;QAACgB,SAAS,EAAE;MAA0B,CAAC,CAAC;IAE5H;MAAU,oBAAOzB,IAAA,CAACN,WAAW,CAACgC,KAAK;QAACF,KAAK,EAAEnC,MAAM,CAACmB,QAAQ,CAAC,OAAO,EAAEC,KAAK,CAAE;QAACgB,SAAS,EAAE;MAA0B,CAAC,CAAC;EACrH;AACF,CAAC;AA4CD,IAAME,UAAoD,GAAG,SAAvDA,UAAoDA,CAAAC,IAAA,EAWU;EAAA,IAVJC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IACJC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPT,UAAU,GAAAM,IAAA,CAAVN,UAAU;IACVU,EAAE,GAAAJ,IAAA,CAAFI,EAAE;IACFP,SAAS,GAAAG,IAAA,CAATH,SAAS;IAAAQ,aAAA,GAAAL,IAAA,CACTM,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAAE,aAAA,GAAAP,IAAA,CAChBQ,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAAE,SAAA,GAAAT,IAAA,CAChBU,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG5C,IAAI,CAAC8C,MAAM,GAAAF,SAAA;IACfG,IAAI,GAAAC,wBAAA,CAAAb,IAAA,EAAAc,SAAA;EAGrE,IAAMjC,KAAK,GAAGtB,QAAQ,CAAC,CAAC;EACxB,oBACEe,KAAA,CAACgB,eAAe,EAAAyB,aAAA,CAAAA,aAAA;IACdZ,OAAO,EAAEA,OAAQ;IACjBX,WAAW,EAAEc,QAAS;IACtBU,QAAQ,EAAGR,QAAQ,IAAId,UAAU,GAAI,CAAC,CAAC,GAAG,CAAE;IAC5CuB,WAAW,EAAEvD,yBAA0B;IACvCoB,KAAK,EAAE4B,IAAK;IACZb,SAAS,EAAE,cAAc,CAACqB,MAAM,CAACZ,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CAC1DY,MAAM,CAACV,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CACnCU,MAAM,CAACxB,UAAU,GAAG,UAAU,GAAGA,UAAU,GAAG,EAAE,CAAC,CACjDwB,MAAM,CAACrB,SAAS,GAAG,GAAG,GAAGA,SAAS,GAAG,EAAE,CAAE;IAC5C,eAAa,WAAY;IACzB,gBAAcS,QAAS;IACvBa,IAAI,EAAEjB,IAAI,KAAK,OAAO,GAAE,OAAO,GAAG;EAAW,GACzCU,IAAI;IAAAQ,QAAA,gBACNhD,IAAA,CAACgB,eAAe;MAAC,eAAa,cAAe;MAACS,SAAS,EAAE,kBAAmB;MAACf,KAAK,EAAE4B,IAAK;MAAAU,QAAA,EAErF1B,UAAU,GAAGD,mBAAmB,CAACC,UAAU,EAAEb,KAAK,CAAC,GAC/BqB,IAAI,KAAG,OAAO,gBAAG9B,IAAA,CAACR,WAAW;QAAC0C,QAAQ,EAAEA,QAAS;QAACE,QAAQ,EAAEA,QAAS;QAACE,IAAI,EAAEA,IAAK;QAACW,WAAW,EAAE,CAAC,CAAE;QAClGC,MAAM,EAAE,SAAAA,OAAA,EAAI,CAAC,CAAE;QAAClB,EAAE,EAAEA;MAAG,CAAC,CAAC,gBAAGhC,IAAA,CAACZ,QAAQ;QAAC8C,QAAQ,EAAEA,QAAS;QAACE,QAAQ,EAAEA,QAAS;QAACE,IAAI,EAAEA,IAAK;QAACW,WAAW,EAAE,CAAC,CAAE;QAC1GC,MAAM,EAAE,SAAAA,OAAA,EAAI,CAAC,CAAE;QAAClB,EAAE,EAAEA;MAAG,CAAC;IACzB,CAEN,CAAC,eAElBhC,IAAA,CAACG,aAAa;MAAC,eAAa,cAAe;MAACsB,SAAS,EAAE,kBAAmB;MAACf,KAAK,EAAE4B,IAAK;MAAAU,QAAA,eACrFhD,IAAA,CAACc,WAAW;QAACJ,KAAK,EAAE4B,IAAK;QAAAU,QAAA,EACtBnB;MAAI,CACM;IAAC,CACD,CAAC;EAAA,EACH,CAAC;AAEtB,CAAC;AAACF,UAAA,CAAAwB,SAAA;EApFA7B,UAAU,EAAA8B,GAAA,CAAAC,KAAA,EAAG,SAAS,EAAG,WAAW,EAAG,SAAS;EAKhDxB,IAAI,EAAAuB,GAAA,CAAAE,MAAA,CAAAC,UAAA;EAKJxB,OAAO,EAAAqB,GAAA,CAAAI,IAAA;EAKPxB,EAAE,EAAAoB,GAAA,CAAAE,MAAA,CAAAC,UAAA;EAKFrB,QAAQ,EAAAkB,GAAA,CAAAK,IAAA;EAKRrB,QAAQ,EAAAgB,GAAA,CAAAK,IAAA;EAUR3B,IAAI,EAAAsB,GAAA,CAAAC,KAAA,EAAE,OAAO,EAAG,UAAU,GAAAE;AAAA;AAmD5B,eAAe5B,UAAU","ignoreList":[]}
+{"version":3,"file":"QuizButton.js","names":["React","styled","useTheme","Checkbox","COLORS","defaultOnMouseDownHandler","focusStyles","RadioButton","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","jsx","_jsx","jsxs","_jsxs","TextContainer","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","$size","Small","Large","Regular","TextWrapper","_templateObject2","ButtonContainer","_templateObject3","OptionContainer","_templateObject4","$isSelected","renderResultContent","resultType","CheckMark","color","className","Close","QuizButton","_ref","text","type","onClick","id","selected","disabled","size","Medium","rest","_objectWithoutProperties","_excluded","_objectSpread","tabIndex","onMouseDown","concat","role","children","tabIndexVal","select","propTypes","_pt","oneOf","string","isRequired","func","bool"],"sources":["../../src/QuizButton/QuizButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, RadioButton, Size, SystemIcons} from '..';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nconst TextContainer = styled.div<{$size: Size}>`\r\n  border-radius: 0 8px 8px 0;\r\n  display: flex;\r\n  background: ${props => COLORS.getColor('accent1_20', props.theme)};\r\n  width: 100%;\r\n\r\n  transition: background 100ms ease-in-out;\r\n  align-items: center;\r\n\r\n  padding: ${props=>props.$size===Size.Small?'6px 8px':(props.$size===Size.Large?'20px 16px':'12px 16px')};\r\n  ${props=>props.$size===Size.Small ? ComponentSStyling(ComponentTextStyle.Regular,null) : (props.$size===Size.Large ? ComponentLStyling(ComponentTextStyle.Regular,null) : ComponentMStyling(ComponentTextStyle.Regular,null))}\r\n`;\r\n\r\nconst TextWrapper = styled.div<{$size:Size}>``;\r\n\r\nconst ButtonContainer = styled.div<{$size: Size}>`\r\n  border-radius: 8px 0 0 8px;\r\n  display: flex;\r\n  background: ${props => COLORS.getColor('accent1_100', props.theme)};\r\n\r\n  width: ${props=>props.$size===Size.Small?'32px':(props.$size===Size.Large?'64px':'48px')};\r\n\r\n  transition: background 100ms ease-in-out;\r\n\r\n  .quiz-button-result-icon {\r\n    height: ${props=>props.$size===Size.Small?'16px':(props.$size===Size.Large?'32px':'24px')};\r\n    width: ${props=>props.$size===Size.Small?'32px':(props.$size===Size.Large?'64px':'48px')};\r\n  }\r\n\r\n  .radio-button-icon, .checkbox-icon {\r\n    margin: auto;\r\n    min-width: unset;\r\n    background: transparent;\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('accent1_600', props.theme)};\r\n    }\r\n\r\n    &:hover {\r\n      background: transparent;\r\n    }\r\n\r\n    &:active {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  .small {\r\n    min-width: 32px;\r\n    min-height: 32px;\r\n    .radio-button-icon, .checkbox-icon {\r\n      svg {\r\n        height: 16px;\r\n        width: 16px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .medium {\r\n    min-width: 48px;\r\n    min-height: 48px;\r\n    .radio-button-icon, .checkbox-icon {\r\n      svg {\r\n        height: 24px;\r\n        width: 24px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .large {\r\n    min-width: 64px;\r\n    min-height: 64px;\r\n    .radio-button-icon, .checkbox-icon {\r\n      svg {\r\n        height: 32px;\r\n        width: 32px;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst OptionContainer = styled.div<{$isSelected:boolean, $size:Size}>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  cursor: pointer;\r\n  max-width: 65ch;  \r\n  word-break: break-word;\r\n\r\n  min-height: ${props=>props.$size===Size.Small?'32px':(props.$size===Size.Large?'64px':'48px')};\r\n  margin-bottom: ${props=>props.$size===Size.Small?'16px':(props.$size===Size.Large?'32px':'24px')};\r\n\r\n  &.selected {\r\n    ${TextContainer} {\r\n      background: ${props => COLORS.getColor('accent1_100', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('accent1_200', props.theme)};\r\n    }\r\n  }\r\n  \r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    \r\n    ${ButtonContainer} {\r\n      pointer-events: none;\r\n      background: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    }\r\n    ${TextContainer} {\r\n      pointer-events: none;\r\n      background: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  &.correct {\r\n    ${TextContainer} {    \r\n      background: ${props => COLORS.getColor('correct_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('correct_400', props.theme)};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.incorrect {\r\n    ${TextContainer} {    \r\n      background: ${props => COLORS.getColor('critical_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('critical_500', props.theme)};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.partial {\r\n    ${TextContainer} {    \r\n      background: ${props => COLORS.getColor('warning_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('warning_400', props.theme)};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled):not(.result),\r\n  &.hover-state {\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('accent1_300', props.theme)};\r\n    }\r\n    ${TextContainer} {\r\n      background: ${props=>props.$isSelected ? COLORS.getColor('accent1_200', props.theme)  : COLORS.getColor('accent1_100', props.theme)};\r\n    }\r\n    \r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n      svg {\r\n        color: ${props => COLORS.getColor('accent1_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled):not(.result),\r\n  &.active-state {\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n      transition: none;\r\n    }\r\n    ${TextContainer} {\r\n      background: ${props=>props.$isSelected ? COLORS.getColor('accent1_300', props.theme) : COLORS.getColor('accent1_200', props.theme)};\r\n      transition: none;\r\n    }\r\n\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n      svg {\r\n        color: ${props => COLORS.getColor('accent1_800', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst renderResultContent = (resultType: string, theme: any) => {\r\n  switch(resultType){\r\n    case 'correct' : return <SystemIcons.CheckMark color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n\r\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n\r\n    default : return <SystemIcons.Close color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n  }\r\n};\r\n\r\nexport type QuizButtonProps = {\r\n  /**\r\n   * Optional. The result type of the quiz button. Can be 'correct', 'incorrect', or 'partial'.\r\n   */\r\n  resultType?: 'correct' | 'incorrect' | 'partial';\r\n\r\n  /**\r\n   * Required. The text to be displayed on the quiz button.\r\n   */\r\n  text: string;\r\n\r\n  /**\r\n   * Optional. A function to be called when the quiz button is clicked.\r\n   */\r\n  onClick?: (arg:any)=>void;\r\n\r\n  /**\r\n   * Required. The ID of the quiz button.\r\n   */\r\n  id: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the quiz button is selected.\r\n   */\r\n  selected?: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the quiz button is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Optional. The size of the quiz button. Can be 'Small', 'Medium', or 'Large'.\r\n   */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n\r\n  /**\r\n   * Required. The type of the quiz button. Can be 'radio' or 'checkbox'.\r\n   */\r\n  type: 'radio' | 'checkbox';\r\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>\r\n\r\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({\r\n                                                                text,\r\n                                                                type,\r\n                                                                onClick,\r\n                                                                resultType,\r\n                                                                id,\r\n                                                                className,\r\n                                                                selected = false,\r\n                                                                disabled = false,\r\n                                                                size = Size.Medium,\r\n                                                                ...rest\r\n                                                              }) => {\r\n\r\n  const theme = useTheme();\r\n  return (   \r\n    <OptionContainer\r\n      onClick={onClick}\r\n      $isSelected={selected}\r\n      tabIndex={(disabled || resultType) ? -1 : 0}\r\n      onMouseDown={defaultOnMouseDownHandler}\r\n      $size={size}\r\n      className={'quiz-button '.concat(selected ? ' selected' : '')\r\n        .concat(disabled ? ' disabled' : '')\r\n        .concat(resultType ? ' result ' + resultType : '')\r\n        .concat(className ? ' ' + className : '')}\r\n      data-testid={'container'}\r\n      aria-checked={selected}\r\n      role={type === 'radio'? 'radio' : 'checkbox'}\r\n      {...rest}>\r\n        <ButtonContainer data-testid={'btnContainer'} className={'quiz-button-icon'} $size={size}>\r\n          {\r\n            resultType ? renderResultContent(resultType, theme) : (\r\n                                type==='radio' ? <RadioButton selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\r\n                                select={()=>{}} id={id}/> : <Checkbox selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\r\n                                select={()=>{}} id={id}/>\r\n                              )\r\n          }\r\n        </ButtonContainer>\r\n\r\n        <TextContainer data-testid={'txtContainer'} className={'quiz-button-text'} $size={size}>\r\n          <TextWrapper $size={size}>\r\n            {text}\r\n          </TextWrapper>\r\n        </TextContainer>\r\n    </OptionContainer>\r\n  );\r\n};\r\n\r\nexport default QuizButton;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/QuizButton/index.cjs

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

package/dist/SegmentControl/SegmentControl.cjs

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.SegmentControlWrapper = exports.SegmentControlItemWrapper = exports.SegmentControlItemContent = exports.SegmentControlItemBackground = void 0;
+exports.default = exports.SegmentControlWrapper = exports.SegmentControlItemWrapper = exports.SegmentControlItemContent = exports.SegmentControlItemBackground = 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"));
@@ -15,79 +15,52 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _styles = require("../styles");
 var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["items", "size", "onChange", "selected", "className"],
+const _excluded = ["items", "size", "onChange", "selected", "className"],
   _excluded2 = ["key", "disabled", "content", "className"];
 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) { (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 SegmentControlItemContent = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  border-radius: 8px;\n  padding: 0 16px;\n\n  background-color: transparent;\n  color: ", ";\n"])), function (props) {
-  return _styles.COLORS.getColor('neutral_600', props.theme);
-});
-exports.SegmentControlItemContent = SegmentControlItemContent;
-var SegmentControlItemBackground = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ", ";\n  padding: 4px 0px;\n"])), function (props) {
-  return _styles.COLORS.getColor('neutral_20', props.theme);
-});
-exports.SegmentControlItemBackground = SegmentControlItemBackground;
-var SegmentControlItemWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  cursor: pointer;\n  min-height: 48px;\n\n  &:focus {\n    ", "\n  }\n\n  &:hover {\n    z-index: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &:active {\n    z-index: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ", " {\n      background-color: transparent;\n      color: ", ";\n    }\n  }\n\n  &.selected {\n    cursor: default;\n    pointer-events: none;\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.selected.disabled {\n    cursor: not-allowed;\n    pointer-events: unset;\n    \n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), _styles.focusStyles, _styles.Z_INDEXES.hover, SegmentControlItemContent, function (props) {
-  return _styles.COLORS.getColor('primary_100', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_700', props.theme);
-}, _styles.Z_INDEXES.active, SegmentControlItemContent, function (props) {
-  return _styles.COLORS.getColor('primary_200', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_800', props.theme);
-}, SegmentControlItemContent, function (props) {
-  return _styles.COLORS.getColor('neutral_300', props.theme);
-}, SegmentControlItemContent, function (props) {
-  return _styles.COLORS.getColor('primary_500', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('white', props.theme);
-}, SegmentControlItemContent, function (props) {
-  return _styles.COLORS.getColor('neutral_100', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_300', props.theme);
-});
-exports.SegmentControlItemWrapper = SegmentControlItemWrapper;
-var SegmentControlWrapper = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  ", ":first-of-type {\n    ", " {\n      border-bottom-left-radius: 12px;\n      border-top-left-radius: 12px;\n      padding-left: 4px;\n    }\n  }\n\n  ", ":last-of-type {\n    ", " {\n      border-bottom-right-radius: 12px;\n      border-top-right-radius: 12px;\n      padding-right: 4px;\n    }\n  }\n\n\n  &.small {\n    ", " {\n      ", "\n      min-height: 32px;\n    }\n  }\n\n  &.medium {\n    ", " {\n      ", "\n      min-height: 40px;\n    }\n  }\n"])), SegmentControlItemWrapper, SegmentControlItemBackground, SegmentControlItemWrapper, SegmentControlItemBackground, SegmentControlItemContent, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), SegmentControlItemContent, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null));
-exports.SegmentControlWrapper = SegmentControlWrapper;
-var SegmentControl = function SegmentControl(_ref) {
-  var items = _ref.items,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
-    onChange = _ref.onChange,
-    selected = _ref.selected,
-    className = _ref.className,
-    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var onKeyPress = function onKeyPress(e, item) {
+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; }
+const SegmentControlItemContent = exports.SegmentControlItemContent = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  border-radius: 8px;\n  padding: 0 16px;\n\n  background-color: transparent;\n  color: ", ";\n"])), props => _styles.COLORS.getColor('neutral_600', props.theme));
+const SegmentControlItemBackground = exports.SegmentControlItemBackground = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ", ";\n  padding: 4px 0px;\n"])), props => _styles.COLORS.getColor('neutral_20', props.theme));
+const SegmentControlItemWrapper = exports.SegmentControlItemWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  cursor: pointer;\n  min-height: 48px;\n\n  &:focus {\n    ", "\n  }\n\n  &:hover {\n    z-index: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &:active {\n    z-index: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ", " {\n      background-color: transparent;\n      color: ", ";\n    }\n  }\n\n  &.selected {\n    cursor: default;\n    pointer-events: none;\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.selected.disabled {\n    cursor: not-allowed;\n    pointer-events: unset;\n    \n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), _styles.focusStyles, _styles.Z_INDEXES.hover, SegmentControlItemContent, props => _styles.COLORS.getColor('primary_100', props.theme), props => _styles.COLORS.getColor('primary_700', props.theme), _styles.Z_INDEXES.active, SegmentControlItemContent, props => _styles.COLORS.getColor('primary_200', props.theme), props => _styles.COLORS.getColor('primary_800', props.theme), SegmentControlItemContent, props => _styles.COLORS.getColor('neutral_300', props.theme), SegmentControlItemContent, props => _styles.COLORS.getColor('primary_500', props.theme), props => _styles.COLORS.getColor('white', props.theme), SegmentControlItemContent, props => _styles.COLORS.getColor('neutral_100', props.theme), props => _styles.COLORS.getColor('neutral_300', props.theme));
+const SegmentControlWrapper = exports.SegmentControlWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  ", ":first-of-type {\n    ", " {\n      border-bottom-left-radius: 12px;\n      border-top-left-radius: 12px;\n      padding-left: 4px;\n    }\n  }\n\n  ", ":last-of-type {\n    ", " {\n      border-bottom-right-radius: 12px;\n      border-top-right-radius: 12px;\n      padding-right: 4px;\n    }\n  }\n\n\n  &.small {\n    ", " {\n      ", "\n      min-height: 32px;\n    }\n  }\n\n  &.medium {\n    ", " {\n      ", "\n      min-height: 40px;\n    }\n  }\n"])), SegmentControlItemWrapper, SegmentControlItemBackground, SegmentControlItemWrapper, SegmentControlItemBackground, SegmentControlItemContent, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), SegmentControlItemContent, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null));
+const SegmentControl = _ref => {
+  let {
+      items,
+      size = _types.Size.Medium,
+      onChange,
+      selected,
+      className
+    } = _ref,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  const onKeyPress = (e, item) => {
     if (e.key === 'Enter' || e.key === ' ') {
-      var _document, _document$activeEleme;
+      var _document;
       //@ts-ignore
-      (_document = document) === null || _document === void 0 ? void 0 : (_document$activeEleme = _document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.blur();
+      (_document = document) === null || _document === void 0 || (_document = _document.activeElement) === null || _document === void 0 || _document.blur();
       !item.disabled && onChange(item.key);
     }
   };
-  var onClick = function onClick(e, item) {
+  const onClick = (e, item) => {
     !item.disabled && onChange(item.key);
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(SegmentControlWrapper, _objectSpread(_objectSpread({
     className: "".concat(size, " ").concat(className || '')
   }, rest), {}, {
-    children: items.map(function (a, i) {
-      var key = a.key,
-        disabled = a.disabled,
-        content = a.content,
-        className = a.className,
-        rest = (0, _objectWithoutProperties2["default"])(a, _excluded2);
+    children: items.map((a, i) => {
+      const {
+          key,
+          disabled,
+          content,
+          className
+        } = a,
+        rest = (0, _objectWithoutProperties2.default)(a, _excluded2);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(SegmentControlItemWrapper, _objectSpread(_objectSpread({
         className: (className || '') + (a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : ''),
         tabIndex: a.disabled || a.key === selected ? -1 : 0,
-        onClick: a.disabled ? undefined : function (e) {
-          return onClick(e, a);
-        },
+        onClick: a.disabled ? undefined : e => onClick(e, a),
         onMouseDown: _common.defaultOnMouseDownHandler,
-        onKeyPress: a.disabled ? undefined : function (e) {
-          return onKeyPress(e, a);
-        }
+        onKeyPress: a.disabled ? undefined : e => onKeyPress(e, a)
       }, rest), {}, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SegmentControlItemBackground, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SegmentControlItemContent, {
@@ -99,14 +72,13 @@ var SegmentControl = function SegmentControl(_ref) {
   }));
 };
 SegmentControl.propTypes = {
-  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    key: _propTypes["default"].string.isRequired,
-    disabled: _propTypes["default"].bool,
-    content: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].string]).isRequired
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    key: _propTypes.default.string.isRequired,
+    disabled: _propTypes.default.bool,
+    content: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]).isRequired
   })).isRequired,
-  selected: _propTypes["default"].string.isRequired,
-  onChange: _propTypes["default"].func.isRequired
+  selected: _propTypes.default.string.isRequired,
+  onChange: _propTypes.default.func.isRequired
 };
-var _default = SegmentControl;
-exports["default"] = _default;
+var _default = exports.default = SegmentControl;
 //# sourceMappingURL=SegmentControl.cjs.map

package/dist/SegmentControl/SegmentControl.cjs.map

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

package/dist/SegmentControl/SegmentControl.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _excluded = ["items", "size", "onChange", "selected", "className"],
+const _excluded = ["items", "size", "onChange", "selected", "className"],
   _excluded2 = ["key", "disabled", "content", "className"];
 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; }
@@ -13,70 +13,47 @@ import styled from 'styled-components';
 import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, Z_INDEXES } from '../styles';
 import { defaultOnMouseDownHandler } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
-export var SegmentControlItemContent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  border-radius: 8px;\n  padding: 0 16px;\n\n  background-color: transparent;\n  color: ", ";\n"])), function (props) {
-  return COLORS.getColor('neutral_600', props.theme);
-});
-export var SegmentControlItemBackground = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ", ";\n  padding: 4px 0px;\n"])), function (props) {
-  return COLORS.getColor('neutral_20', props.theme);
-});
-export var SegmentControlItemWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  cursor: pointer;\n  min-height: 48px;\n\n  &:focus {\n    ", "\n  }\n\n  &:hover {\n    z-index: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &:active {\n    z-index: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ", " {\n      background-color: transparent;\n      color: ", ";\n    }\n  }\n\n  &.selected {\n    cursor: default;\n    pointer-events: none;\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.selected.disabled {\n    cursor: not-allowed;\n    pointer-events: unset;\n    \n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), focusStyles, Z_INDEXES.hover, SegmentControlItemContent, function (props) {
-  return COLORS.getColor('primary_100', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_700', props.theme);
-}, Z_INDEXES.active, SegmentControlItemContent, function (props) {
-  return COLORS.getColor('primary_200', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_800', props.theme);
-}, SegmentControlItemContent, function (props) {
-  return COLORS.getColor('neutral_300', props.theme);
-}, SegmentControlItemContent, function (props) {
-  return COLORS.getColor('primary_500', props.theme);
-}, function (props) {
-  return COLORS.getColor('white', props.theme);
-}, SegmentControlItemContent, function (props) {
-  return COLORS.getColor('neutral_100', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_300', props.theme);
-});
-export var SegmentControlWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  ", ":first-of-type {\n    ", " {\n      border-bottom-left-radius: 12px;\n      border-top-left-radius: 12px;\n      padding-left: 4px;\n    }\n  }\n\n  ", ":last-of-type {\n    ", " {\n      border-bottom-right-radius: 12px;\n      border-top-right-radius: 12px;\n      padding-right: 4px;\n    }\n  }\n\n\n  &.small {\n    ", " {\n      ", "\n      min-height: 32px;\n    }\n  }\n\n  &.medium {\n    ", " {\n      ", "\n      min-height: 40px;\n    }\n  }\n"])), SegmentControlItemWrapper, SegmentControlItemBackground, SegmentControlItemWrapper, SegmentControlItemBackground, SegmentControlItemContent, ComponentSStyling(ComponentTextStyle.Bold, null), SegmentControlItemContent, ComponentMStyling(ComponentTextStyle.Bold, null));
-var SegmentControl = function SegmentControl(_ref) {
-  var items = _ref.items,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? Size.Medium : _ref$size,
-    onChange = _ref.onChange,
-    selected = _ref.selected,
-    className = _ref.className,
+export const SegmentControlItemContent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  border-radius: 8px;\n  padding: 0 16px;\n\n  background-color: transparent;\n  color: ", ";\n"])), props => COLORS.getColor('neutral_600', props.theme));
+export const SegmentControlItemBackground = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ", ";\n  padding: 4px 0px;\n"])), props => COLORS.getColor('neutral_20', props.theme));
+export const SegmentControlItemWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  cursor: pointer;\n  min-height: 48px;\n\n  &:focus {\n    ", "\n  }\n\n  &:hover {\n    z-index: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &:active {\n    z-index: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ", " {\n      background-color: transparent;\n      color: ", ";\n    }\n  }\n\n  &.selected {\n    cursor: default;\n    pointer-events: none;\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.selected.disabled {\n    cursor: not-allowed;\n    pointer-events: unset;\n    \n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), focusStyles, Z_INDEXES.hover, SegmentControlItemContent, props => COLORS.getColor('primary_100', props.theme), props => COLORS.getColor('primary_700', props.theme), Z_INDEXES.active, SegmentControlItemContent, props => COLORS.getColor('primary_200', props.theme), props => COLORS.getColor('primary_800', props.theme), SegmentControlItemContent, props => COLORS.getColor('neutral_300', props.theme), SegmentControlItemContent, props => COLORS.getColor('primary_500', props.theme), props => COLORS.getColor('white', props.theme), SegmentControlItemContent, props => COLORS.getColor('neutral_100', props.theme), props => COLORS.getColor('neutral_300', props.theme));
+export const SegmentControlWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  ", ":first-of-type {\n    ", " {\n      border-bottom-left-radius: 12px;\n      border-top-left-radius: 12px;\n      padding-left: 4px;\n    }\n  }\n\n  ", ":last-of-type {\n    ", " {\n      border-bottom-right-radius: 12px;\n      border-top-right-radius: 12px;\n      padding-right: 4px;\n    }\n  }\n\n\n  &.small {\n    ", " {\n      ", "\n      min-height: 32px;\n    }\n  }\n\n  &.medium {\n    ", " {\n      ", "\n      min-height: 40px;\n    }\n  }\n"])), SegmentControlItemWrapper, SegmentControlItemBackground, SegmentControlItemWrapper, SegmentControlItemBackground, SegmentControlItemContent, ComponentSStyling(ComponentTextStyle.Bold, null), SegmentControlItemContent, ComponentMStyling(ComponentTextStyle.Bold, null));
+const SegmentControl = _ref => {
+  let {
+      items,
+      size = Size.Medium,
+      onChange,
+      selected,
+      className
+    } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var onKeyPress = function onKeyPress(e, item) {
+  const onKeyPress = (e, item) => {
     if (e.key === 'Enter' || e.key === ' ') {
-      var _document, _document$activeEleme;
+      var _document;
       //@ts-ignore
-      (_document = document) === null || _document === void 0 ? void 0 : (_document$activeEleme = _document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.blur();
+      (_document = document) === null || _document === void 0 || (_document = _document.activeElement) === null || _document === void 0 || _document.blur();
       !item.disabled && onChange(item.key);
     }
   };
-  var onClick = function onClick(e, item) {
+  const onClick = (e, item) => {
     !item.disabled && onChange(item.key);
   };
   return /*#__PURE__*/_jsx(SegmentControlWrapper, _objectSpread(_objectSpread({
     className: "".concat(size, " ").concat(className || '')
   }, rest), {}, {
-    children: items.map(function (a, i) {
-      var key = a.key,
-        disabled = a.disabled,
-        content = a.content,
-        className = a.className,
+    children: items.map((a, i) => {
+      const {
+          key,
+          disabled,
+          content,
+          className
+        } = a,
         rest = _objectWithoutProperties(a, _excluded2);
       return /*#__PURE__*/_jsx(SegmentControlItemWrapper, _objectSpread(_objectSpread({
         className: (className || '') + (a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : ''),
         tabIndex: a.disabled || a.key === selected ? -1 : 0,
-        onClick: a.disabled ? undefined : function (e) {
-          return onClick(e, a);
-        },
+        onClick: a.disabled ? undefined : e => onClick(e, a),
         onMouseDown: defaultOnMouseDownHandler,
-        onKeyPress: a.disabled ? undefined : function (e) {
-          return onKeyPress(e, a);
-        }
+        onKeyPress: a.disabled ? undefined : e => onKeyPress(e, a)
       }, rest), {}, {
         children: /*#__PURE__*/_jsx(SegmentControlItemBackground, {
           children: /*#__PURE__*/_jsx(SegmentControlItemContent, {