@laerdal/life-react-components 3.5.1-dev.11 → 3.5.1-dev.12

package/dist/ProfileButton/ProfileButton.js

@@ -1,75 +1,52 @@
-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 = ["portraitSrc", "icon", "initials", "onClick", "disabled", "notificationVariant", "className", "tabIndex"];
-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; }
-import * as React from 'react';
-import styled from 'styled-components';
-import { COLORS, IconButton, Size } from '..';
-import { IconButtonContentStyles, IconButtonStyledPrimary } from '../Button/Iconbutton';
-import { NotificationDot } from '../NotificationDot';
-import { BREAKPOINTS, ComponentS, ComponentTextStyle } from '../styles';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-var PortraitOverlay = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ", ";\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n"])), COLORS.black);
-export var ProfileButtonContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ", " {\n    display: ", ";\n\n    ", " {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ", " {\n        background-color: ", ";\n\n        svg, svg path {\n          fill: ", ";\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ", " {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ", " {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n"])), IconButtonStyledPrimary, function (props) {
-  return props.hideOnLowWidth ? 'none' : 'inline';
-}, BREAKPOINTS.MEDIUM, IconButtonContentStyles, COLORS.neutral_100, COLORS.neutral_300, PortraitOverlay, PortraitOverlay);
-var NotificationContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n"])));
-var ImageWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n"])));
-var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var portraitSrc = _ref.portraitSrc,
-    icon = _ref.icon,
-    initials = _ref.initials,
-    onClick = _ref.onClick,
-    disabled = _ref.disabled,
-    notificationVariant = _ref.notificationVariant,
-    className = _ref.className,
-    tabIndex = _ref.tabIndex,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var renderIcon = function renderIcon() {
-    return portraitSrc && /*#__PURE__*/_jsxs(ImageWrapper, {
-      children: [/*#__PURE__*/_jsx("img", {
-        src: portraitSrc
-      }), /*#__PURE__*/_jsx(PortraitOverlay, {})]
-    }) || initials && /*#__PURE__*/_jsx(ComponentS, {
-      className: "initials",
-      textStyle: ComponentTextStyle.Bold,
-      color: disabled ? COLORS.neutral_300 : COLORS.white,
-      children: initials
-    }) || /*#__PURE__*/_jsx(_Fragment, {
-      children: icon
-    });
-  };
-  return /*#__PURE__*/_jsx(ProfileButtonContainer, {
-    children: /*#__PURE__*/_jsxs(IconButton, _objectSpread(_objectSpread({
-      ref: ref,
-      className: className,
-      disabled: disabled,
-      action: onClick,
-      variant: "primary",
-      tabIndex: tabIndex,
-      shape: "circular"
-    }, rest), {}, {
-      children: [renderIcon(), notificationVariant && /*#__PURE__*/_jsx(NotificationContainer, {
-        children: /*#__PURE__*/_jsx(NotificationDot, {
-          size: Size.Medium,
-          variant: notificationVariant
-        })
-      })]
-    }))
-  });
-});
-ProfileButton.propTypes = {
-  portraitSrc: _pt.string,
-  icon: _pt.node,
-  initials: _pt.string,
-  onClick: _pt.func.isRequired,
-  notificationVariant: _pt.oneOf(['positive', 'critical'])
-};
-export default ProfileButton;
-//# sourceMappingURL=ProfileButton.js.map
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS, IconButton, Size } from '..';
+import { IconButtonContentStyles, IconButtonStyledPrimary } from '../Button/Iconbutton';
+import { NotificationDot } from '../NotificationDot';
+import { BREAKPOINTS, ComponentS, ComponentTextStyle } from '../styles';
+var PortraitOverlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ", ";\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n"], ["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ", ";\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n"])), COLORS.black);
+export var ProfileButtonContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ", " {\n    display: ", ";\n\n    ", " {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ", " {\n        background-color: ", ";\n\n        svg, svg path {\n          fill: ", ";\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ", " {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ", " {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n"], ["\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ", " {\n    display: ", ";\n\n    ", " {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ", " {\n        background-color: ", ";\n\n        svg, svg path {\n          fill: ", ";\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ", " {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ", " {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n"])), IconButtonStyledPrimary, function (props) { return (props.hideOnLowWidth ? 'none' : 'inline'); }, BREAKPOINTS.MEDIUM, IconButtonContentStyles, COLORS.neutral_100, COLORS.neutral_300, PortraitOverlay, PortraitOverlay);
+var NotificationContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n"], ["\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n"])));
+var ImageWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n"], ["\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n"])));
+var ProfileButton = React.forwardRef(function (_a, ref) {
+    var portraitSrc = _a.portraitSrc, icon = _a.icon, initials = _a.initials, onClick = _a.onClick, disabled = _a.disabled, notificationVariant = _a.notificationVariant, className = _a.className, tabIndex = _a.tabIndex, rest = __rest(_a, ["portraitSrc", "icon", "initials", "onClick", "disabled", "notificationVariant", "className", "tabIndex"]);
+    var renderIcon = function () {
+        return ((portraitSrc && (React.createElement(ImageWrapper, null,
+            React.createElement("img", { src: portraitSrc }),
+            React.createElement(PortraitOverlay, null)))) ||
+            (initials && (React.createElement(ComponentS, { className: "initials", textStyle: ComponentTextStyle.Bold, color: disabled ? COLORS.neutral_300 : COLORS.white }, initials))) || React.createElement(React.Fragment, null, icon));
+    };
+    return (React.createElement(ProfileButtonContainer, null,
+        React.createElement(IconButton, __assign({ ref: ref, className: className, disabled: disabled, action: onClick, variant: "primary", tabIndex: tabIndex, shape: "circular" }, rest),
+            renderIcon(),
+            notificationVariant && (React.createElement(NotificationContainer, null,
+                React.createElement(NotificationDot, { size: Size.Medium, variant: notificationVariant }))))));
+});
+export default ProfileButton;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/ProfileButton/index.js

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

package/dist/QuizButton/QuizButton.d.ts

@@ -1,13 +1,37 @@
 import * as React from 'react';
 import { Size } from '..';
-type QuizButtonProps = {
+export declare type QuizButtonProps = {
+    /**
+     * Optional. The result type of the quiz button. Can be 'correct', 'incorrect', or 'partial'.
+     */
     resultType?: 'correct' | 'incorrect' | 'partial';
+    /**
+     * Required. The text to be displayed on the quiz button.
+     */
     text: string;
+    /**
+     * Optional. A function to be called when the quiz button is clicked.
+     */
     onClick?: (arg: any) => void;
+    /**
+     * Required. The ID of the quiz button.
+     */
     id: string;
+    /**
+     * Optional. A boolean indicating whether the quiz button is selected.
+     */
     selected?: boolean;
+    /**
+     * Optional. A boolean indicating whether the quiz button is disabled.
+     */
     disabled?: boolean;
+    /**
+     * Optional. The size of the quiz button. Can be 'Small', 'Medium', or 'Large'.
+     */
     size?: Size.Small | Size.Medium | Size.Large;
+    /**
+     * Required. The type of the quiz button. Can be 'radio' or 'checkbox'.
+     */
     type: 'radio' | 'checkbox';
 } & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>;
 declare const QuizButton: React.FunctionComponent<QuizButtonProps>;

package/dist/QuizButton/QuizButton.js

@@ -1,121 +1,53 @@
-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"];
-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; }
-import * as React from 'react';
-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"])), 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"])), 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';
-}, 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, 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.white,
-        className: 'quiz-button-result-icon'
-      });
-    case 'incorrect':
-      return /*#__PURE__*/_jsx(SystemIcons.Close, {
-        color: COLORS.white,
-        className: 'quiz-button-result-icon'
-      });
-    default:
-      return /*#__PURE__*/_jsx(SystemIcons.Close, {
-        color: COLORS.white,
-        className: 'quiz-button-result-icon'
-      });
-  }
-};
-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,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsxs(OptionContainer, _objectSpread(_objectSpread({
-    onClick: onClick,
-    isSelected: selected,
-    tabIndex: disabled || resultType ? -1 : 0,
-    onMouseDown: defaultOnMouseDownHandler,
-    size: size,
-    className: 'quiz-button '.concat(selected ? ' selected' : '').concat(disabled ? ' disabled' : '').concat(resultType ? ' result ' + resultType : '').concat(className ? ' ' + className : ''),
-    "data-testid": 'container',
-    "aria-checked": selected,
-    role: type === 'radio' ? 'radio' : 'checkbox'
-  }, rest), {}, {
-    children: [/*#__PURE__*/_jsx(ButtonContainer, {
-      "data-testid": 'btnContainer',
-      className: 'quiz-button-icon',
-      size: size,
-      children: resultType ? renderResultContent(resultType) : type === 'radio' ? /*#__PURE__*/_jsx(RadioButton, {
-        selected: selected,
-        disabled: disabled,
-        size: size,
-        tabIndexVal: -1,
-        select: function select() {},
-        id: id
-      }) : /*#__PURE__*/_jsx(Checkbox, {
-        selected: selected,
-        disabled: disabled,
-        size: size,
-        tabIndexVal: -1,
-        select: function select() {},
-        id: id
-      })
-    }), /*#__PURE__*/_jsx(TextContainer, {
-      "data-testid": 'txtContainer',
-      className: 'quiz-button-text',
-      size: size,
-      children: /*#__PURE__*/_jsx(TextWrapper, {
-        size: size,
-        children: text
-      })
-    })]
-  }));
-};
-QuizButton.propTypes = {
-  resultType: _pt.oneOf(['correct', 'incorrect', 'partial']),
-  text: _pt.string.isRequired,
-  onClick: _pt.func,
-  id: _pt.string.isRequired,
-  selected: _pt.bool,
-  disabled: _pt.bool,
-  type: _pt.oneOf(['radio', 'checkbox']).isRequired
-};
-export default QuizButton;
-//# sourceMappingURL=QuizButton.js.map
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, RadioButton, Size, SystemIcons } from '..';
+import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
+var TextContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\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(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+var ButtonContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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"], ["\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'); }, COLORS.accent1_600);
+var OptionContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\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"], ["\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, 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 (resultType) {
+    switch (resultType) {
+        case 'correct': return React.createElement(SystemIcons.CheckMark, { color: COLORS.white, className: 'quiz-button-result-icon' });
+        case 'incorrect': return React.createElement(SystemIcons.Close, { color: COLORS.white, className: 'quiz-button-result-icon' });
+        default: return React.createElement(SystemIcons.Close, { color: COLORS.white, className: 'quiz-button-result-icon' });
+    }
+};
+var QuizButton = function (_a) {
+    var text = _a.text, type = _a.type, onClick = _a.onClick, resultType = _a.resultType, id = _a.id, className = _a.className, _b = _a.selected, selected = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? Size.Medium : _d, rest = __rest(_a, ["text", "type", "onClick", "resultType", "id", "className", "selected", "disabled", "size"]);
+    return (React.createElement(OptionContainer, __assign({ onClick: onClick, isSelected: selected, tabIndex: (disabled || resultType) ? -1 : 0, onMouseDown: defaultOnMouseDownHandler, size: size, className: 'quiz-button '.concat(selected ? ' selected' : '')
+            .concat(disabled ? ' disabled' : '')
+            .concat(resultType ? ' result ' + resultType : '')
+            .concat(className ? ' ' + className : ''), "data-testid": 'container', "aria-checked": selected, role: type === 'radio' ? 'radio' : 'checkbox' }, rest),
+        React.createElement(ButtonContainer, { "data-testid": 'btnContainer', className: 'quiz-button-icon', size: size }, resultType ? renderResultContent(resultType) : (type === 'radio' ? React.createElement(RadioButton, { selected: selected, disabled: disabled, size: size, tabIndexVal: -1, select: function () { }, id: id }) : React.createElement(Checkbox, { selected: selected, disabled: disabled, size: size, tabIndexVal: -1, select: function () { }, id: id }))),
+        React.createElement(TextContainer, { "data-testid": 'txtContainer', className: 'quiz-button-text', size: size },
+            React.createElement(TextWrapper, { size: size }, text))));
+};
+export default QuizButton;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/QuizButton/index.js

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

package/dist/SegmentControl/SegmentControl.d.ts

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

package/dist/SegmentControl/SegmentControl.js

@@ -1,78 +1,57 @@
-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"],
-  _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) { _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; }
-import React from 'react';
-import { Size } from '../types';
-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"])), COLORS.neutral_600);
-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"])), COLORS.neutral_20);
-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, COLORS.primary_100, COLORS.primary_700, Z_INDEXES.active, SegmentControlItemContent, COLORS.primary_200, COLORS.primary_800, SegmentControlItemContent, COLORS.neutral_300, SegmentControlItemContent, COLORS.primary_500, COLORS.white, SegmentControlItemContent, COLORS.neutral_100, COLORS.neutral_300);
-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,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var onKeyPress = function onKeyPress(e, item) {
-    if (e.key === 'Enter' || e.key === ' ') {
-      var _document, _document$activeEleme;
-      //@ts-ignore
-      (_document = document) === null || _document === void 0 ? void 0 : (_document$activeEleme = _document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.blur();
-      !item.disabled && onChange(item.key);
-    }
-  };
-  var onClick = function 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,
-        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);
-        },
-        onMouseDown: defaultOnMouseDownHandler,
-        onKeyPress: a.disabled ? undefined : function (e) {
-          return onKeyPress(e, a);
-        }
-      }, rest), {}, {
-        children: /*#__PURE__*/_jsx(SegmentControlItemBackground, {
-          children: /*#__PURE__*/_jsx(SegmentControlItemContent, {
-            children: a.content
-          })
-        })
-      }), a.key || i);
-    })
-  }));
-};
-SegmentControl.propTypes = {
-  items: _pt.arrayOf(_pt.shape({
-    key: _pt.string.isRequired,
-    disabled: _pt.bool,
-    content: _pt.oneOfType([_pt.node, _pt.string]).isRequired
-  })).isRequired,
-  selected: _pt.string.isRequired,
-  onChange: _pt.func.isRequired
-};
-export default SegmentControl;
-//# sourceMappingURL=SegmentControl.js.map
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { Size } from '../types';
+import styled from 'styled-components';
+import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, Z_INDEXES } from '../styles';
+import { defaultOnMouseDownHandler } from '../common';
+export var SegmentControlItemContent = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  border-radius: 8px;\n  padding: 0 16px;\n\n  background-color: transparent;\n  color: ", ";\n"])), COLORS.neutral_600);
+export var SegmentControlItemBackground = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ", ";\n  padding: 4px 0px;\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ", ";\n  padding: 4px 0px;\n"])), COLORS.neutral_20);
+export var SegmentControlItemWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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"], ["\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, COLORS.primary_100, COLORS.primary_700, Z_INDEXES.active, SegmentControlItemContent, COLORS.primary_200, COLORS.primary_800, SegmentControlItemContent, COLORS.neutral_300, SegmentControlItemContent, COLORS.primary_500, COLORS.white, SegmentControlItemContent, COLORS.neutral_100, COLORS.neutral_300);
+export var SegmentControlWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\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"], ["\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 (_a) {
+    var items = _a.items, _b = _a.size, size = _b === void 0 ? Size.Medium : _b, onChange = _a.onChange, selected = _a.selected, className = _a.className, rest = __rest(_a, ["items", "size", "onChange", "selected", "className"]);
+    var onKeyPress = function (e, item) {
+        var _a;
+        if (e.key === 'Enter' || e.key === ' ') {
+            //@ts-ignore
+            (_a = document === null || document === void 0 ? void 0 : document.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
+            !item.disabled && onChange(item.key);
+        }
+    };
+    var onClick = function (e, item) {
+        !item.disabled && onChange(item.key);
+    };
+    return (React.createElement(SegmentControlWrapper, __assign({ className: "".concat(size, " ").concat(className || '') }, rest), items.map(function (a, i) {
+        var key = a.key, disabled = a.disabled, content = a.content, className = a.className, rest = __rest(a, ["key", "disabled", "content", "className"]);
+        return React.createElement(SegmentControlItemWrapper, __assign({ key: a.key || i, 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); }, onMouseDown: defaultOnMouseDownHandler, onKeyPress: a.disabled ? undefined : function (e) { return onKeyPress(e, a); } }, rest),
+            React.createElement(SegmentControlItemBackground, null,
+                React.createElement(SegmentControlItemContent, null, a.content)));
+    })));
+};
+export default SegmentControl;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/SegmentControl/index.d.ts

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