@laerdal/life-react-components 2.0.1-dev.9.full → 2.1.0-dev.7

package/dist/QuizButton/QuizButton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Size } from '..';
-declare type QuizButtonProps = {
+type QuizButtonProps = {
     resultType?: 'correct' | 'incorrect' | 'partial';
     text: string;
     onClick?: (arg: any) => void;

package/dist/QuizButton/QuizButton.js

@@ -3,13 +3,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import * as React from 'react';
 import styled from 'styled-components';
 import { Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, RadioButton, Size, SystemIcons } from '..';
@@ -38,7 +34,6 @@ var OptionContainer = styled.div(_templateObject4 || (_templateObject4 = _tagged
 }, 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':
@@ -46,13 +41,11 @@ var renderResultContent = function renderResultContent(resultType) {
         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,
@@ -60,22 +53,20 @@ var renderResultContent = function renderResultContent(resultType) {
       });
   }
 };
-
 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);
-
+    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,
@@ -117,7 +108,6 @@ var QuizButton = function QuizButton(_ref) {
     })]
   }));
 };
-
 QuizButton.propTypes = {
   resultType: _pt.oneOf(['correct', 'incorrect', 'partial']),
   text: _pt.string.isRequired,

package/dist/QuizButton/QuizButton.js.map

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

package/dist/QuizButton/index.cjs

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,6 +10,5 @@ Object.defineProperty(exports, "QuizButton", {
     return _QuizButton.default;
   }
 });
-
 var _QuizButton = _interopRequireDefault(require("./QuizButton"));
 //# sourceMappingURL=index.cjs.map

package/dist/QuizButton/index.cjs.map

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

package/dist/QuizButton/index.js.map

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

package/dist/SegmentControl/SegmentControl.cjs

@@ -1,89 +1,61 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _types = require("../types");
-
 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"],
-    _excluded2 = ["key", "disabled", "content", "className"];
-
+  _excluded2 = ["key", "disabled", "content", "className"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var SegmentControlItemContent = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  border-radius: 8px;\n  padding: 0 16px;\n\n  background-color: transparent;\n  color: ", ";\n"])), _styles.COLORS.neutral_600);
-
 exports.SegmentControlItemContent = SegmentControlItemContent;
-
 var 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"])), _styles.COLORS.neutral_20);
-
 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, _styles.COLORS.primary_100, _styles.COLORS.primary_700, _styles.Z_INDEXES.active, SegmentControlItemContent, _styles.COLORS.primary_200, _styles.COLORS.primary_800, SegmentControlItemContent, _styles.COLORS.neutral_300, SegmentControlItemContent, _styles.COLORS.primary_500, _styles.COLORS.white, SegmentControlItemContent, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
-
 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);
-
+    _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) {
     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__*/(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);
+        disabled = a.disabled,
+        content = a.content,
+        className = a.className,
+        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,
@@ -104,7 +76,6 @@ var SegmentControl = function SegmentControl(_ref) {
     })
   }));
 };
-
 SegmentControl.propTypes = {
   items: _propTypes.default.arrayOf(_propTypes.default.shape({
     key: _propTypes.default.string.isRequired,

package/dist/SegmentControl/SegmentControl.cjs.map

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

package/dist/SegmentControl/SegmentControl.js

@@ -3,14 +3,10 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 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"];
-
+  _excluded2 = ["key", "disabled", "content", "className"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React from 'react';
 import { Size } from '../types';
 import styled from 'styled-components';
@@ -21,40 +17,34 @@ export var SegmentControlItemContent = styled.div(_templateObject || (_templateO
 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);
-
+    _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);
-
+        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,
@@ -75,7 +65,6 @@ var SegmentControl = function SegmentControl(_ref) {
     })
   }));
 };
-
 SegmentControl.propTypes = {
   items: _pt.arrayOf(_pt.shape({
     key: _pt.string.isRequired,

package/dist/SegmentControl/SegmentControl.js.map

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

package/dist/SegmentControl/index.cjs

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,6 +10,5 @@ Object.defineProperty(exports, "SegmentControl", {
     return _SegmentControl.default;
   }
 });
-
 var _SegmentControl = _interopRequireDefault(require("./SegmentControl"));
 //# sourceMappingURL=index.cjs.map

package/dist/SegmentControl/index.cjs.map

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

package/dist/SegmentControl/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","SegmentControl"],"sources":["../../src/SegmentControl/index.ts"],"sourcesContent":["import {SegmentControlItem, default as SegmentControl} from './SegmentControl'\n\nexport type {SegmentControlItem}\nexport {SegmentControl}\n"],"mappings":"AAAA,SAA4BA,OAAO,IAAIC,cAAvC,QAA4D,kBAA5D;AAGA,SAAQA,cAAR"}
+{"version":3,"file":"index.js","names":["default","SegmentControl"],"sources":["../../src/SegmentControl/index.ts"],"sourcesContent":["import {SegmentControlItem, default as SegmentControl} from './SegmentControl'\n\nexport type {SegmentControlItem}\nexport {SegmentControl}\n"],"mappings":"AAAA,SAA4BA,OAAO,IAAIC,cAAc,QAAO,kBAAkB;AAG9E,SAAQA,cAAc"}

package/dist/Services/functions.cjs

@@ -4,15 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createUUID = createUUID;
-
 function createUUID() {
-  var dt = new Date().getTime(); // eslint-disable-next-line func-names
-
+  var dt = new Date().getTime();
+  // eslint-disable-next-line func-names
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
     // eslint-disable-next-line no-bitwise
     var r = (dt + Math.random() * 16) % 16 | 0;
-    dt = Math.floor(dt / 16); // eslint-disable-next-line no-bitwise
-
+    dt = Math.floor(dt / 16);
+    // eslint-disable-next-line no-bitwise
     return (c === 'x' ? r : r & 0x3 | 0x8).toString(16);
   });
 }

package/dist/Services/functions.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"functions.cjs","names":["createUUID","dt","Date","getTime","replace","c","r","Math","random","floor","toString"],"sources":["../../src/Services/functions.ts"],"sourcesContent":["export function createUUID() {\n  let dt = new Date().getTime();\n  // eslint-disable-next-line func-names\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\n    // eslint-disable-next-line no-bitwise\n    const r = (dt + Math.random() * 16) % 16 | 0;\n    dt = Math.floor(dt / 16);\n    // eslint-disable-next-line no-bitwise\n    return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);\n  });\n}\n"],"mappings":";;;;;;;AAAO,SAASA,UAAT,GAAsB;EAC3B,IAAIC,EAAE,GAAG,IAAIC,IAAJ,GAAWC,OAAX,EAAT,CAD2B,CAE3B;;EACA,OAAO,uCAAuCC,OAAvC,CAA+C,OAA/C,EAAwD,UAASC,CAAT,EAAY;IACzE;IACA,IAAMC,CAAC,GAAG,CAACL,EAAE,GAAGM,IAAI,CAACC,MAAL,KAAgB,EAAtB,IAA4B,EAA5B,GAAiC,CAA3C;IACAP,EAAE,GAAGM,IAAI,CAACE,KAAL,CAAWR,EAAE,GAAG,EAAhB,CAAL,CAHyE,CAIzE;;IACA,OAAO,CAACI,CAAC,KAAK,GAAN,GAAYC,CAAZ,GAAiBA,CAAC,GAAG,GAAL,GAAY,GAA7B,EAAkCI,QAAlC,CAA2C,EAA3C,CAAP;EACD,CANM,CAAP;AAOD"}
+{"version":3,"file":"functions.cjs","names":["createUUID","dt","Date","getTime","replace","c","r","Math","random","floor","toString"],"sources":["../../src/Services/functions.ts"],"sourcesContent":["export function createUUID() {\n  let dt = new Date().getTime();\n  // eslint-disable-next-line func-names\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\n    // eslint-disable-next-line no-bitwise\n    const r = (dt + Math.random() * 16) % 16 | 0;\n    dt = Math.floor(dt / 16);\n    // eslint-disable-next-line no-bitwise\n    return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);\n  });\n}\n"],"mappings":";;;;;;AAAO,SAASA,UAAU,GAAG;EAC3B,IAAIC,EAAE,GAAG,IAAIC,IAAI,EAAE,CAACC,OAAO,EAAE;EAC7B;EACA,OAAO,sCAAsC,CAACC,OAAO,CAAC,OAAO,EAAE,UAASC,CAAC,EAAE;IACzE;IACA,IAAMC,CAAC,GAAG,CAACL,EAAE,GAAGM,IAAI,CAACC,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,CAAC;IAC5CP,EAAE,GAAGM,IAAI,CAACE,KAAK,CAACR,EAAE,GAAG,EAAE,CAAC;IACxB;IACA,OAAO,CAACI,CAAC,KAAK,GAAG,GAAGC,CAAC,GAAIA,CAAC,GAAG,GAAG,GAAI,GAAG,EAAEI,QAAQ,CAAC,EAAE,CAAC;EACvD,CAAC,CAAC;AACJ"}

package/dist/Services/functions.js

@@ -1,11 +1,11 @@
 export function createUUID() {
-  var dt = new Date().getTime(); // eslint-disable-next-line func-names
-
+  var dt = new Date().getTime();
+  // eslint-disable-next-line func-names
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
     // eslint-disable-next-line no-bitwise
     var r = (dt + Math.random() * 16) % 16 | 0;
-    dt = Math.floor(dt / 16); // eslint-disable-next-line no-bitwise
-
+    dt = Math.floor(dt / 16);
+    // eslint-disable-next-line no-bitwise
     return (c === 'x' ? r : r & 0x3 | 0x8).toString(16);
   });
 }

package/dist/Services/functions.js.map

@@ -1 +1 @@
-{"version":3,"file":"functions.js","names":["createUUID","dt","Date","getTime","replace","c","r","Math","random","floor","toString"],"sources":["../../src/Services/functions.ts"],"sourcesContent":["export function createUUID() {\n  let dt = new Date().getTime();\n  // eslint-disable-next-line func-names\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\n    // eslint-disable-next-line no-bitwise\n    const r = (dt + Math.random() * 16) % 16 | 0;\n    dt = Math.floor(dt / 16);\n    // eslint-disable-next-line no-bitwise\n    return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);\n  });\n}\n"],"mappings":"AAAA,OAAO,SAASA,UAAT,GAAsB;EAC3B,IAAIC,EAAE,GAAG,IAAIC,IAAJ,GAAWC,OAAX,EAAT,CAD2B,CAE3B;;EACA,OAAO,uCAAuCC,OAAvC,CAA+C,OAA/C,EAAwD,UAASC,CAAT,EAAY;IACzE;IACA,IAAMC,CAAC,GAAG,CAACL,EAAE,GAAGM,IAAI,CAACC,MAAL,KAAgB,EAAtB,IAA4B,EAA5B,GAAiC,CAA3C;IACAP,EAAE,GAAGM,IAAI,CAACE,KAAL,CAAWR,EAAE,GAAG,EAAhB,CAAL,CAHyE,CAIzE;;IACA,OAAO,CAACI,CAAC,KAAK,GAAN,GAAYC,CAAZ,GAAiBA,CAAC,GAAG,GAAL,GAAY,GAA7B,EAAkCI,QAAlC,CAA2C,EAA3C,CAAP;EACD,CANM,CAAP;AAOD"}
+{"version":3,"file":"functions.js","names":["createUUID","dt","Date","getTime","replace","c","r","Math","random","floor","toString"],"sources":["../../src/Services/functions.ts"],"sourcesContent":["export function createUUID() {\n  let dt = new Date().getTime();\n  // eslint-disable-next-line func-names\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\n    // eslint-disable-next-line no-bitwise\n    const r = (dt + Math.random() * 16) % 16 | 0;\n    dt = Math.floor(dt / 16);\n    // eslint-disable-next-line no-bitwise\n    return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);\n  });\n}\n"],"mappings":"AAAA,OAAO,SAASA,UAAU,GAAG;EAC3B,IAAIC,EAAE,GAAG,IAAIC,IAAI,EAAE,CAACC,OAAO,EAAE;EAC7B;EACA,OAAO,sCAAsC,CAACC,OAAO,CAAC,OAAO,EAAE,UAASC,CAAC,EAAE;IACzE;IACA,IAAMC,CAAC,GAAG,CAACL,EAAE,GAAGM,IAAI,CAACC,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,CAAC;IAC5CP,EAAE,GAAGM,IAAI,CAACE,KAAK,CAACR,EAAE,GAAG,EAAE,CAAC;IACxB;IACA,OAAO,CAACI,CAAC,KAAK,GAAG,GAAGC,CAAC,GAAIA,CAAC,GAAG,GAAG,GAAI,GAAG,EAAEI,QAAQ,CAAC,EAAE,CAAC;EACvD,CAAC,CAAC;AACJ"}