@laerdal/life-react-components 3.4.3 → 3.5.1-dev.10

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

package/dist/QuizButton/index.cjs

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

package/dist/QuizButton/index.cjs.map

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

package/dist/QuizButton/index.d.ts

@@ -1 +1 @@
-export { default as QuizButton } from './QuizButton';
+export { default as QuizButton } from './QuizButton';

package/dist/QuizButton/index.js.map

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

package/dist/Scrollbar/Scrollbar.cjs

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SegmentControlItemContent = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject;
+
+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 Scrollbar = function Scrollbar(_ref) {
+  var size = _ref.size;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+};
+
+var _default = Scrollbar;
+exports.default = _default;
+//# sourceMappingURL=Scrollbar.cjs.map

package/dist/Scrollbar/Scrollbar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Scrollbar/Scrollbar.tsx"],"names":["SegmentControlItemContent","styled","div","COLORS","neutral_600","Scrollbar","size"],"mappings":";;;;;;;;;;;;;AAAA;;AAEA;;AACA;;;;;;AAIO,IAAMA,yBAAyB,GAAGC,0BAAOC,GAAV,2QAS3BC,eAAOC,WAToB,CAA/B;;;;AAiBP,IAAMC,SAAkD,GAAG,SAArDA,SAAqD,OAAc;AAAA,MAAXC,IAAW,QAAXA,IAAW;AACrE,sBAAO,8CAAP;AACH,CAFD;;eAIeD,S","sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {COLORS} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\n\r\nexport const SegmentControlItemContent = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n  border-radius: 8px;\r\n  padding: 0 16px;\r\n\r\n  background-color: transparent;\r\n  color: ${COLORS.neutral_600};\r\n`;\r\n\r\n\r\nexport interface ScrollbarProps {\r\n  size?: Size.Small | Size.Medium;\r\n}\r\n\r\nconst Scrollbar: React.FunctionComponent<ScrollbarProps> = ({ size }) => {\r\n    return <></>;\r\n};\r\n\r\nexport default Scrollbar;\r\n"],"file":"Scrollbar.cjs"}

package/dist/Scrollbar/Scrollbar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Size } from '../types';
+export declare const SegmentControlItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export interface ScrollbarProps {
+    size?: Size.Small | Size.Medium;
+}
+declare const Scrollbar: React.FunctionComponent<ScrollbarProps>;
+export default Scrollbar;

package/dist/Scrollbar/Scrollbar.js

@@ -0,0 +1,19 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject;
+
+import React from 'react';
+import styled from 'styled-components';
+import { COLORS } from '../styles';
+import { Fragment as _Fragment } from "react/jsx-runtime";
+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);
+
+var Scrollbar = function Scrollbar(_ref) {
+  var size = _ref.size;
+  return /*#__PURE__*/_jsx(_Fragment, {});
+};
+
+export default Scrollbar;
+//# sourceMappingURL=Scrollbar.js.map

package/dist/Scrollbar/Scrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Scrollbar/Scrollbar.tsx"],"names":["React","styled","COLORS","SegmentControlItemContent","div","neutral_600","Scrollbar","size"],"mappings":";;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,QAAqB,WAArB;;;AAIA,OAAO,IAAMC,yBAAyB,GAAGF,MAAM,CAACG,GAAV,6PAS3BF,MAAM,CAACG,WAToB,CAA/B;;AAiBP,IAAMC,SAAkD,GAAG,SAArDA,SAAqD,OAAc;AAAA,MAAXC,IAAW,QAAXA,IAAW;AACrE,sBAAO,mBAAP;AACH,CAFD;;AAIA,eAAeD,SAAf","sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {COLORS} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\n\r\nexport const SegmentControlItemContent = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n  border-radius: 8px;\r\n  padding: 0 16px;\r\n\r\n  background-color: transparent;\r\n  color: ${COLORS.neutral_600};\r\n`;\r\n\r\n\r\nexport interface ScrollbarProps {\r\n  size?: Size.Small | Size.Medium;\r\n}\r\n\r\nconst Scrollbar: React.FunctionComponent<ScrollbarProps> = ({ size }) => {\r\n    return <></>;\r\n};\r\n\r\nexport default Scrollbar;\r\n"],"file":"Scrollbar.js"}

package/dist/SegmentControl/SegmentControl.cjs

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.SegmentControlWrapper = exports.SegmentControlItemWrapper = exports.SegmentControlItemContent = exports.SegmentControlItemBackground = void 0;
+exports["default"] = exports.SegmentControlWrapper = exports.SegmentControlItemWrapper = exports.SegmentControlItemContent = exports.SegmentControlItemBackground = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -18,15 +18,15 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["items", "size", "onChange", "selected", "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);
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SegmentControlItemContent = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  border-radius: 8px;\n  padding: 0 16px;\n\n  background-color: transparent;\n  color: ", ";\n"])), _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);
+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);
+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));
+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,
@@ -35,7 +35,7 @@ var SegmentControl = function SegmentControl(_ref) {
     onChange = _ref.onChange,
     selected = _ref.selected,
     className = _ref.className,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var onKeyPress = function onKeyPress(e, item) {
     if (e.key === 'Enter' || e.key === ' ') {
       var _document, _document$activeEleme;
@@ -55,7 +55,7 @@ var SegmentControl = function SegmentControl(_ref) {
         disabled = a.disabled,
         content = a.content,
         className = a.className,
-        rest = (0, _objectWithoutProperties2.default)(a, _excluded2);
+        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,
@@ -77,14 +77,14 @@ var SegmentControl = function SegmentControl(_ref) {
   }));
 };
 SegmentControl.propTypes = {
-  items: _propTypes.default.arrayOf(_propTypes.default.shape({
-    key: _propTypes.default.string.isRequired,
-    disabled: _propTypes.default.bool,
-    content: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]).isRequired
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    key: _propTypes["default"].string.isRequired,
+    disabled: _propTypes["default"].bool,
+    content: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].string]).isRequired
   })).isRequired,
-  selected: _propTypes.default.string.isRequired,
-  onChange: _propTypes.default.func.isRequired
+  selected: _propTypes["default"].string.isRequired,
+  onChange: _propTypes["default"].func.isRequired
 };
 var _default = SegmentControl;
-exports.default = _default;
+exports["default"] = _default;
 //# sourceMappingURL=SegmentControl.cjs.map

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

package/dist/SegmentControl/SegmentControl.d.ts

@@ -1,19 +1,19 @@
-import React from 'react';
-import { Size } from '../types';
-export declare const SegmentControlItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-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'> {
-    key: string;
-    disabled?: boolean;
-    content: React.ReactNode | string;
-}
-interface SegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
-    items: SegmentControlItem[];
-    selected: string;
-    onChange: (value: string) => void;
-    size?: Size.Small | Size.Medium;
-}
-declare const SegmentControl: React.FunctionComponent<SegmentControlProps>;
-export default SegmentControl;
+import React from 'react';
+import { Size } from '../types';
+export declare const SegmentControlItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+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'> {
+    key: string;
+    disabled?: boolean;
+    content: React.ReactNode | string;
+}
+interface SegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    items: SegmentControlItem[];
+    selected: string;
+    onChange: (value: string) => void;
+    size?: Size.Small | Size.Medium;
+}
+declare const SegmentControl: React.FunctionComponent<SegmentControlProps>;
+export default SegmentControl;

package/dist/SegmentControl/SegmentControl.js

@@ -5,8 +5,8 @@ import _pt from "prop-types";
 var _excluded = ["items", "size", "onChange", "selected", "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; }
+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';

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

package/dist/SegmentControl/index.cjs

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

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":["_SegmentControl","_interopRequireDefault","require"],"sources":["../../src/SegmentControl/index.ts"],"sourcesContent":["import {SegmentControlItem, default as SegmentControl, SegmentControlProps} from './SegmentControl'\r\n\r\nexport type {SegmentControlItem, SegmentControlProps}\r\nexport {SegmentControl}\r\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,eAAA,GAAAC,sBAAA,CAAAC,OAAA","ignoreList":[]}

package/dist/SegmentControl/index.d.ts

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

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,cAAc,QAAO,kBAAkB;AAG9E,SAAQA,cAAc"}
+{"version":3,"file":"index.js","names":["default","SegmentControl"],"sources":["../../src/SegmentControl/index.ts"],"sourcesContent":["import {SegmentControlItem, default as SegmentControl, SegmentControlProps} from './SegmentControl'\r\n\r\nexport type {SegmentControlItem, SegmentControlProps}\r\nexport {SegmentControl}\r\n"],"mappings":"AAAA,SAA4BA,OAAO,IAAIC,cAAc,QAA4B,kBAAkB;AAGnG,SAAQA,cAAc","ignoreList":[]}

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,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"}
+{"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() {\r\n  let dt = new Date().getTime();\r\n  // eslint-disable-next-line func-names\r\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\r\n    // eslint-disable-next-line no-bitwise\r\n    const r = (dt + Math.random() * 16) % 16 | 0;\r\n    dt = Math.floor(dt / 16);\r\n    // eslint-disable-next-line no-bitwise\r\n    return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);\r\n  });\r\n}\r\n"],"mappings":";;;;;;AAAO,SAASA,UAAUA,CAAA,EAAG;EAC3B,IAAIC,EAAE,GAAG,IAAIC,IAAI,CAAC,CAAC,CAACC,OAAO,CAAC,CAAC;EAC7B;EACA,OAAO,sCAAsC,CAACC,OAAO,CAAC,OAAO,EAAE,UAASC,CAAC,EAAE;IACzE;IACA,IAAMC,CAAC,GAAG,CAACL,EAAE,GAAGM,IAAI,CAACC,MAAM,CAAC,CAAC,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","ignoreList":[]}

package/dist/Services/functions.d.ts

@@ -1 +1 @@
-export declare function createUUID(): string;
+export declare function createUUID(): string;

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,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"}
+{"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() {\r\n  let dt = new Date().getTime();\r\n  // eslint-disable-next-line func-names\r\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\r\n    // eslint-disable-next-line no-bitwise\r\n    const r = (dt + Math.random() * 16) % 16 | 0;\r\n    dt = Math.floor(dt / 16);\r\n    // eslint-disable-next-line no-bitwise\r\n    return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);\r\n  });\r\n}\r\n"],"mappings":"AAAA,OAAO,SAASA,UAAUA,CAAA,EAAG;EAC3B,IAAIC,EAAE,GAAG,IAAIC,IAAI,CAAC,CAAC,CAACC,OAAO,CAAC,CAAC;EAC7B;EACA,OAAO,sCAAsC,CAACC,OAAO,CAAC,OAAO,EAAE,UAASC,CAAC,EAAE;IACzE;IACA,IAAMC,CAAC,GAAG,CAACL,EAAE,GAAGM,IAAI,CAACC,MAAM,CAAC,CAAC,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","ignoreList":[]}

package/dist/SideMenu/SideMenu.cjs

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -18,14 +18,14 @@ var _types = require("../types");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["size", "className"];
 var _templateObject;
-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 Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  z-index: ", ";\n  height: 100%;\n  box-sizing: border-box;\n  background: ", ";\n\n  display: flex;\n  flex-direction: column;\n\n  width: fit-content;\n  box-shadow: ", ";\n\n  &.small {\n    min-width: 320px;\n  }\n\n  &.medium {\n    min-width: 400px;\n  }\n\n  &.large {\n    min-width: 480px;\n  }\n"])), _styles.Z_INDEXES.off_canvas, _styles.COLORS.white, _styles.BOXSHADOWS.BOXSHADOW_CENTERED);
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  z-index: ", ";\n  height: 100%;\n  box-sizing: border-box;\n  background: ", ";\n\n  display: flex;\n  flex-direction: column;\n\n  width: fit-content;\n  box-shadow: ", ";\n\n  &.small {\n    min-width: 320px;\n  }\n\n  &.medium {\n    min-width: 400px;\n  }\n\n  &.large {\n    min-width: 480px;\n  }\n"])), _styles.Z_INDEXES.off_canvas, _styles.COLORS.white, _styles.BOXSHADOWS.BOXSHADOW_CENTERED);
 var SideMenu = function SideMenu(props) {
   var _props$size = props.size,
     size = _props$size === void 0 ? _types.Size.Medium : _props$size,
     className = props.className,
-    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, _objectSpread(_objectSpread({
     className: "".concat(size, " ").concat(className || '')
   }, rest), {}, {
@@ -33,5 +33,5 @@ var SideMenu = function SideMenu(props) {
   }));
 };
 var _default = SideMenu;
-exports.default = _default;
+exports["default"] = _default;
 //# sourceMappingURL=SideMenu.cjs.map

package/dist/SideMenu/SideMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SideMenu.cjs","names":["Wrapper","styled","div","Z_INDEXES","off_canvas","COLORS","white","BOXSHADOWS","BOXSHADOW_CENTERED","SideMenu","props","size","Size","Medium","className","rest","footer"],"sources":["../../src/SideMenu/SideMenu.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {SideMenuProps} from './types';\nimport {SideMenuHeader} from './SideMenuHeader';\nimport {SideMenuFooter} from './SideMenuFooter';\nimport {SideMenuBody} from './SideMenuBody';\nimport {BOXSHADOWS, COLORS, Z_INDEXES} from '../styles';\nimport {Size} from '../types';\n\nconst Wrapper = styled.div`\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  box-sizing: border-box;\n  background: ${COLORS.white};\n\n  display: flex;\n  flex-direction: column;\n\n  width: fit-content;\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n\n  &.small {\n    min-width: 320px;\n  }\n\n  &.medium {\n    min-width: 400px;\n  }\n\n  &.large {\n    min-width: 480px;\n  }\n`;\n\n\nconst SideMenu: React.FunctionComponent<SideMenuProps> = (props) => {\n  const {size = Size.Medium, className, ...rest} = props;\n\n  return (\n    <Wrapper className={`${size} ${className || ''}`} {...rest}>\n      <SideMenuHeader {...props} />\n      <SideMenuBody {...props}/>\n      {props.footer && <SideMenuFooter {...props}/>}\n    </Wrapper>\n  );\n}\n\nexport default SideMenu;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AAA8B;AAAA;AAAA;AAAA;AAAA;AAE9B,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,wYACbC,iBAAS,CAACC,UAAU,EAGjBC,cAAM,CAACC,KAAK,EAMZC,kBAAU,CAACC,kBAAkB,CAa5C;AAGD,IAAMC,QAAgD,GAAG,SAAnDA,QAAgD,CAAIC,KAAK,EAAK;EAClE,kBAAiDA,KAAK,CAA/CC,IAAI;IAAJA,IAAI,4BAAGC,WAAI,CAACC,MAAM;IAAEC,SAAS,GAAaJ,KAAK,CAA3BI,SAAS;IAAKC,IAAI,0CAAIL,KAAK;EAEtD,oBACE,sBAAC,OAAO;IAAC,SAAS,YAAKC,IAAI,cAAIG,SAAS,IAAI,EAAE;EAAG,GAAKC,IAAI;IAAA,wBACxD,qBAAC,8BAAc,oBAAKL,KAAK,EAAI,eAC7B,qBAAC,0BAAY,oBAAKA,KAAK,EAAG,EACzBA,KAAK,CAACM,MAAM,iBAAI,qBAAC,8BAAc,oBAAKN,KAAK,EAAG;EAAA,GACrC;AAEd,CAAC;AAAA,eAEcD,QAAQ;AAAA"}
+{"version":3,"file":"SideMenu.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_SideMenuHeader","_SideMenuFooter","_SideMenuBody","_styles","_types","_jsxRuntime","_excluded","_templateObject","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","Wrapper","styled","div","_taggedTemplateLiteral2","Z_INDEXES","off_canvas","COLORS","white","BOXSHADOWS","BOXSHADOW_CENTERED","SideMenu","props","_props$size","size","Size","Medium","className","rest","_objectWithoutProperties2","jsxs","concat","children","jsx","SideMenuHeader","SideMenuBody","footer","SideMenuFooter","_default","exports"],"sources":["../../src/SideMenu/SideMenu.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SideMenuProps} from './types';\r\nimport {SideMenuHeader} from './SideMenuHeader';\r\nimport {SideMenuFooter} from './SideMenuFooter';\r\nimport {SideMenuBody} from './SideMenuBody';\r\nimport {BOXSHADOWS, COLORS, Z_INDEXES} from '../styles';\r\nimport {Size} from '../types';\r\n\r\nconst Wrapper = styled.div`\r\n  z-index: ${Z_INDEXES.off_canvas};\r\n  height: 100%;\r\n  box-sizing: border-box;\r\n  background: ${COLORS.white};\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  width: fit-content;\r\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\r\n\r\n  &.small {\r\n    min-width: 320px;\r\n  }\r\n\r\n  &.medium {\r\n    min-width: 400px;\r\n  }\r\n\r\n  &.large {\r\n    min-width: 480px;\r\n  }\r\n`;\r\n\r\n\r\nconst SideMenu: React.FunctionComponent<SideMenuProps> = (props) => {\r\n  const {size = Size.Medium, className, ...rest} = props;\r\n\r\n  return (\r\n    <Wrapper className={`${size} ${className || ''}`} {...rest}>\r\n      <SideMenuHeader {...props} />\r\n      <SideMenuBody {...props}/>\r\n      {props.footer && <SideMenuFooter {...props}/>}\r\n    </Wrapper>\r\n  );\r\n}\r\n\r\nexport default SideMenu;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/SideMenu/SideMenu.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { SideMenuProps } from './types';
-declare const SideMenu: React.FunctionComponent<SideMenuProps>;
-export default SideMenu;
+import React from 'react';
+import { SideMenuProps } from './types';
+declare const SideMenu: React.FunctionComponent<SideMenuProps>;
+export default SideMenu;

package/dist/SideMenu/SideMenu.js

@@ -3,8 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _excluded = ["size", "className"];
 var _templateObject;
-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; }
+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 styled from 'styled-components';
 import { SideMenuHeader } from './SideMenuHeader';