intelicoreact 0.1.17 → 0.1.20

package/dist/Atomic/FormElements/NumericInput/NumericInput.js

@@ -252,6 +252,7 @@ var NumericInput = function NumericInput(_ref) {
     } : {});
 
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, uniProps, {
+      value: value,
       ref: inputRef,
       type: "text"
     })), /*#__PURE__*/_react.default.createElement("div", {

package/dist/Atomic/FormElements/RadioInput/RadioInput.js

@@ -37,7 +37,7 @@ var RadioInput = function RadioInput(_ref) {
     checked: checked === value,
     className: "".concat(RC, "__radio"),
     onChange: function onChange() {
-      return _onChange(checked);
+      return _onChange(value);
     },
     name: name,
     disabled: disabled

package/dist/Atomic/FormElements/RangeInputs/RangeInputs.js

@@ -33,11 +33,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+var RC = 'range-inputs';
+
 var RangeInputs = function RangeInputs(_ref) {
   var _valueObj$from, _valueObj$to;
 
-  var label = _ref.label,
-      hint = _ref.hint,
+  var isColumnPosition = _ref.isColumnPosition,
       _ref$value = _ref.value,
       valueObj = _ref$value === void 0 ? {
     from: '',
@@ -45,7 +46,6 @@ var RangeInputs = function RangeInputs(_ref) {
   } : _ref$value,
       className = _ref.className,
       onChange = _ref.onChange,
-      isRequired = _ref.isRequired,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'int' : _ref$type,
       setInnerError = _ref.setError;
@@ -97,22 +97,16 @@ var RangeInputs = function RangeInputs(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('range-inputs', className)
-  }, label && /*#__PURE__*/_react.default.createElement(_Label.default, {
-    isRequired: isRequired,
-    className: "range-inputs--label mb5",
-    label: label,
-    hint: hint
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "j4"
+    className: (0, _classnames.default)(RC, className, (0, _defineProperty2.default)({}, "".concat(RC, "_column"), isColumnPosition))
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(RC, "__wrapper")
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "j4 w50"
+    className: "".concat(RC, "__input-from")
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "range-inputs__input-label"
+    className: "".concat(RC, "__input-label")
   }, "From"), /*#__PURE__*/_react.default.createElement(_Input.default, {
     ref: inputFromRef,
     value: (_valueObj$from = valueObj === null || valueObj === void 0 ? void 0 : valueObj.from) !== null && _valueObj$from !== void 0 ? _valueObj$from : '',
-    className: "mr15",
     onChange: function onChange(val) {
       return handleChange('from', val);
     },
@@ -129,9 +123,9 @@ var RangeInputs = function RangeInputs(_ref) {
       }
     }
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "j4 w50"
+    className: "".concat(RC, "__input-to")
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "range-inputs__input-label"
+    className: "".concat(RC, "__input-label")
   }, "To"), /*#__PURE__*/_react.default.createElement(_Input.default, {
     ref: inputToRef,
     value: (_valueObj$to = valueObj === null || valueObj === void 0 ? void 0 : valueObj.to) !== null && _valueObj$to !== void 0 ? _valueObj$to : '',

package/dist/Atomic/FormElements/RangeInputs/RangeInputs.scss

@@ -1,20 +1,50 @@
 .range-inputs {
   display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  flex-direction: column;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+
+  &__wrapper {
+    width: 100%;
 
-  &--label {
     display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
     align-items: center;
+  }
+
+  &__input-from,
+  &__input-to {
+    width: fit-content;
+    display: flex;
+    flex-flow: row nowrap;
     justify-content: flex-start;
-    font-weight: 500;
-    font-size: 12px;
+    align-items: center;
+  }
+
+  &__input-from {
+    margin-right: 15px;
   }
 
   &__input-label {
     font-size: 12px;
     line-height: 24px;
-    margin-right: 16px;
+    margin-right: 15px;
+  }
+
+  &_column {
+    align-items: flex-start;
+
+    .range-inputs__wrapper {
+      width: fit-content;
+      flex-flow: column nowrap;
+      justify-content: flex-start;
+      align-items: flex-end;
+    }
+
+    .range-inputs__input-from {
+      margin-right: 0;
+      margin-bottom: 15px;
+    }
   }
 }

package/dist/Atomic/FormElements/RangeInputs/RangeInputs.stories.js

@@ -41,13 +41,15 @@ var Template = function Template(args) {
   }, [state]);
   return /*#__PURE__*/_react.default.createElement(_RangeInputs.default, (0, _extends2.default)({}, args, {
     onChange: setState,
-    value: state
+    value: state,
+    setError: function setError() {}
   }));
 };
 
 var RangeInputsTemplate = Template.bind({});
 exports.RangeInputsTemplate = RangeInputsTemplate;
 RangeInputsTemplate.args = {
-  label: 'loanAmount',
-  hint: 'Hint'
+  isColumnPosition: true,
+  className: '',
+  type: 'int'
 };

package/dist/Atomic/FormElements/RangeList/RangeList.js

@@ -0,0 +1,296 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("react");
+
+var _fi = require("react-icons/fi");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Button = _interopRequireDefault(require("./../../UI/Button/Button"));
+
+var _Input = _interopRequireDefault(require("../Input/Input"));
+
+require("./RangeList.scss");
+
+// import { numberFilter, numberFilterWithoutDots, rounded } from '../../../Functions/utils';
+var RC = 'range-list';
+
+var RangeListCell = function RangeListCell(_ref) {
+  var children = _ref.children,
+      idx = _ref.idx,
+      className = _ref.className;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)("".concat(RC, "__cell"), className, (0, _defineProperty2.default)({}, "".concat(RC, "__cell-").concat(idx), idx))
+  }, children);
+};
+
+var RangeListRow = function RangeListRow(_ref2) {
+  var from = _ref2.from,
+      to = _ref2.to,
+      idx = _ref2.idx;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)("".concat(RC, "__row"), "".concat(RC, "__values"), (0, _defineProperty2.default)({}, "".concat(RC, "__values_first-value"), idx === 0))
+  }, /*#__PURE__*/React.createElement(RangeListCell, {
+    idx: 1,
+    className: "".concat(RC, "__cell-value")
+  }, from), /*#__PURE__*/React.createElement(RangeListCell, {
+    idx: 2,
+    className: "".concat(RC, "__cell-value")
+  }, to), /*#__PURE__*/React.createElement(RangeListCell, {
+    idx: 3,
+    className: "".concat(RC, "__cell-action")
+  }, /*#__PURE__*/React.createElement(_fi.FiTrash2, null)));
+};
+
+var RangeList = function RangeList(props) {
+  // const { item, value: inputvalue, fields, onChange, type, isInteger, id: filterId, label, className } = props;
+  var className = props.className,
+      value = props.value;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)(RC, className)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)("".concat(RC, "__row"), "".concat(RC, "__labels"))
+  }, /*#__PURE__*/React.createElement(RangeListCell, {
+    className: "".concat(RC, "__cell-label")
+  }, "From"), /*#__PURE__*/React.createElement(RangeListCell, {
+    className: "".concat(RC, "__cell-label")
+  }, "To")), /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)("".concat(RC, "__row"), "".concat(RC, "__inputs"))
+  }, /*#__PURE__*/React.createElement(RangeListCell, {
+    className: "".concat(RC, "__cell-input")
+  }, /*#__PURE__*/React.createElement(_Input.default, {
+    value: 56
+  })), /*#__PURE__*/React.createElement(RangeListCell, {
+    className: "".concat(RC, "__cell-input")
+  }, /*#__PURE__*/React.createElement(_Input.default, {
+    value: 72
+  })), /*#__PURE__*/React.createElement(RangeListCell, {
+    className: "".concat(RC, "__cell-button")
+  }, /*#__PURE__*/React.createElement(_Button.default, null, "Add"))), value.map(function (row, idx) {
+    return /*#__PURE__*/React.createElement(RangeListRow, (0, _extends2.default)({}, row, {
+      idx: idx
+    }));
+  }));
+};
+
+var _default = RangeList; // import { useState } from 'react';
+// import { FiTrash2 } from 'react-icons/fi';
+// import cn from 'classnames';
+// import Button from 'intelicoreact/dist/Atomic/UI/Button/Button';
+// import { numberFilter, numberFilterWithoutDots, rounded } from '../../../Functions/utils';
+// import Input from '../Input/Input';
+// import './RangeList.scss';
+// const RC = 'range-list';
+// const RangeList = (props) => {
+//   const { item, value: inputvalue, fields, onChange, type, isInteger, id: filterId, label, className } = props;
+//   const [form, setForm] = useState(fields);
+//   const [error, setError] = useState('');
+//   const keyFrom = 'from';
+//   const keyTo = 'to';
+//   const additive = type === 'rangeList' && !isInteger ? 0.01 : 1;
+//   let value = inputvalue || [];
+//   value?.sort((a, b) => a[keyFrom] - b[keyFrom]);
+//   function removeRow(index) {
+//     value.splice(index, 1);
+//     setForm([...form]);
+//     onChange(value, 'value');
+//   }
+//   function addRange() {
+//     const from = parseFloat(rounded(form[0].value));
+//     let to = parseFloat(form[1].value);
+//     if (isNaN(to)) to = '';
+//     //const result = parseFloat(rounded(form[2]?.value)) || '0';
+//     if ((form[0] && isNaN(form[0]?.value)) || (form[1] && isNaN(form[1]?.value))) {
+//       setError('All fields required');
+//       return false;
+//     } else if (to !== '' && to <= from) {
+//       setError('Set a valid range');
+//       return false;
+//     } else if (isNaN(from) || (!from && isNaN(to)) || from < 0 || (!from && to <= 0)) {
+//       setError('Only numbers >=0 are allowed');
+//       return false;
+//     } else if (to && to - from < 0.05) {
+//       setError('range must be more than 0.05');
+//       return false;
+//     } else if (form[2]?.unit === '%') {
+//       setError(`${form[2]?.label} max 100`);
+//       return false;
+//     } else if (from > 999999 || (!!to && to > 999999)) {
+//       setError('You need to set a smaller number!');
+//       return false;
+//     } else if (from === to) {
+//       setError('You need to set a range');
+//       return false;
+//     } else if (!to) {
+//       setError('Set a valid range');
+//       return false;
+//     } else if (!!to && from > to) {
+//       setError('You need to set a valid range');
+//       return false;
+//     } else if (filterId && label === 'Age' && to > 99) {
+//       setError('99 is the maximum allowed value');
+//       return false;
+//     } else if (filterId && label === 'Age' && from < 18) {
+//       setError('18 is the minimum allowed value');
+//       return false;
+//     }
+//     const duplicate = value?.filter((e) => Number(e[keyFrom]) === from && Number(e[keyTo]) === to);
+//     if (duplicate.length) {
+//       setError('This range was already added');
+//       return false;
+//     }
+//     const newRanges = [];
+//     const prevItems = [];
+//     const postItems = [];
+//     const getRangeObject = (nFrom, nTo) => ({
+//       [keyFrom]: parseFloat(nFrom?.toFixed(3)),
+//       [keyTo]: nTo.toFixed ? parseFloat(nTo?.toFixed(3)) : nTo || '',
+//     });
+//     const [crossFrom, crossTo] = getFilter(value)?.reduce((res, data) => {
+//       if (data[keyFrom] === from) data[keyFrom] = from + additive;
+//       if (data[keyTo] === to) data[keyTo] = to - additive;
+//       if (isNaN(data[keyFrom])) data[keyFrom] = 0;
+//       if (data[keyTo] > 0 && from > data[keyTo]) {
+//         prevItems.push(data);
+//       } else if (to && data[keyFrom] > to) {
+//         postItems.push(data);
+//       } else if (!(from < data[keyFrom] && (!to || data[keyTo] < to))) {
+//         res.push(data);
+//       }
+//       return res;
+//     }, []);
+//     if (crossFrom && crossTo) {
+//       if (to === crossTo.from) {
+//         newRanges.push(...[getRangeObject(crossFrom[keyFrom], from), getRangeObject(to, crossTo[keyTo])]);
+//       } else {
+//         newRanges.push(...[getRangeObject(crossFrom[keyFrom], from), getRangeObject(from + additive, to)]);
+//         if (to) {
+//           newRanges.push(getRangeObject(to + additive, crossTo[keyTo]));
+//         }
+//       }
+//     } else if (crossFrom) {
+//       if (crossFrom[keyFrom] < from && crossFrom[keyTo] > to) {
+//         newRanges.push(getRangeObject(crossFrom[keyFrom], from));
+//         if (to) {
+//           newRanges.push(...[getRangeObject(from + additive, to), getRangeObject(to + additive, crossFrom[keyTo])]);
+//         } else {
+//           newRanges.push(getRangeObject(from + additive, ''));
+//         }
+//       } else if (crossFrom[keyFrom] > from) {
+//         newRanges.push(...[getRangeObject(from, to), getRangeObject(to + additive, crossFrom[keyTo])]);
+//       } else if (crossFrom && to - from > 1) {
+//         newRanges.push(...[getRangeObject(crossFrom[keyFrom], from), getRangeObject(from + additive, to)]);
+//       } else newRanges.push(getRangeObject(crossFrom[keyFrom], to));
+//     } else {
+//       newRanges.push(getRangeObject(from, to));
+//     }
+//     newRanges.unshift(...prevItems);
+//     newRanges.push(...postItems);
+//     value = newRanges;
+//     onChange(value);
+//     form.map((field) => (field.value = ''));
+//     setForm([...form]);
+//   }
+//   const handleFieldFocus = (key) => {
+//     if (key === keyTo && !form[0].value) {
+//       form[0].value = 0;
+//       setForm([...form]);
+//     }
+//   };
+//   const removeFiltersDots = (value) => {
+//     if (filterId) return numberFilterWithoutDots(value);
+//     return value;
+//   };
+//   function renderField(field) {
+//     return (
+//       <td key={field.key} style={{ padding: 0 }}>
+//         {field.label && <label className={`${RC}__input-label`}>{field.label}</label>}
+//         <div>
+//           <Input
+//             value={removeFiltersDots(field.value) || ''}
+//             onFocus={() => handleFieldFocus(field.key)}
+//             placeholder={field.placeholder}
+//             onChange={(e) => {
+//               let value = e || field.key !== 'max' ? numberFilter(e) : '';
+//               if (field.isInt) value = numberFilterWithoutDots(value);
+//               if (value < 0) value = '';
+//               else if (field.key === 'bonus' && value > 100) value = 100;
+//               //if (!field.value) onChange();
+//               field.value = value;
+//               setForm([...form]);
+//               setError('');
+//             }}
+//           />
+//         </div>
+//       </td>
+//     );
+//   }
+//   const renderRowNumbers = (row, field, index) => {
+//     if (field.key === 'max' && row.max === 999999999) row.max = '';
+//     else {
+//       if (field.key === 'bonus' && !row.bonus) row.bonus = '0';
+//       row[field.key] = row[field.key] !== '' ? Number(row[field.key]) : row[field.key];
+//     }
+//     return (
+//       <td key={index} className="table__cell">
+//         {filterId ? row[field.key] : row[field.key].toLocaleString('en-US', { minimumFractionDigits: isInteger ? 0 : 2 })}
+//         {row[field.key] || field.key === 'bonus' ? field.unit : ''}
+//       </td>
+//     );
+//   };
+//   function renderRow(row, index) {
+//     return (
+//       <tr key={index} className="bordered-tr">
+//         {form?.map((field, index) => renderRowNumbers(row, field, index))}
+//         <td className="table__cell range-list--trash-icon">
+//           <FiTrash2 className="pointer color--froly" onClick={() => removeRow(index)} />
+//         </td>
+//       </tr>
+//     );
+//   }
+//   function getFilter(data) {
+//     return data?.slice()?.filter(({ from, to }) => {
+//       return !([0, null].includes(from) && [0, null].includes(to));
+//     });
+//   };
+//   return (
+//     <table className={cn('range-list', ' w100', className)}>
+//       <tbody>
+//         <tr>
+//           {form?.map((field) => renderField(field))}
+//           <td style={{ padding: 0 }}>
+//             <Button type="primary" onClick={addRange} label="+ Add" />
+//           </td>
+//         </tr>
+//         <tr>
+//           <td colSpan={4}>
+//             <span className="input-classic__error">{error}</span>
+//           </td>
+//         </tr>
+//         {!value || !getFilter(value)?.length ? (
+//           <tr className="tableCustom__tr--first bordered-tr read-only">
+//             <td colSpan={4} className="table__cell text-left">
+//               Not set
+//             </td>
+//           </tr>
+//         ) : value ? (
+//           getFilter(value).map((row, index) => renderRow(row, index))
+//         ) : null}
+//       </tbody>
+//     </table>
+//   );
+// };
+// export default RangeList;
+
+exports.default = _default;

package/dist/Atomic/FormElements/RangeList/RangeList.scss

@@ -0,0 +1,124 @@
+@import "./../../../scss/vars";
+
+.range-list {
+  --border-color: black;
+  --button-size: 56px;
+
+  --labels-font-size: 16px;
+  --inputs-font-size: 14px;
+  --values-font-size: 16px;
+  --button-text-font-size: 14px;
+
+  --labels-color: black;
+  --inputs-color: black;
+  --values-color: black;
+
+  --background-color: transparent;
+  --labels-background-color: transparent;
+  --inputs-background-color: transparent;
+  --tag-input-background-color: #fff;
+  --values-background-color: #fff;
+
+  width: 500px;
+  height: fit-content;
+  background-color: transparent;
+
+  &__row {
+    display: grid;
+    width: 100%;
+    height: 30px;
+    grid-template-columns: 1fr 1fr var(--button-size);
+  }
+
+  &__labels, &__inputs {
+    grid-column-gap: 2px;
+  }
+
+  &__labels {
+    margin-bottom: 10px;
+    background-color: var(--labels-background-color);
+
+    font-family: inherit;
+    font-style: inherit;
+    font-weight: 400;
+    font-size: var(--labels-font-size);
+    line-height: 24px;
+    color: var(--labels-color);
+  }
+
+  &__inputs {
+    margin-bottom: 6px;
+    background-color: var(--inputs-background-color);
+
+    font-family: inherit;
+    font-style: inherit;
+    font-weight: 400;
+    font-size: var(--inputs-font-size);
+    line-height: 24px;
+    color: var(--inputs-color);
+
+    & input {
+      background-color: var(--tag-input-background-color);
+    }
+  }
+
+  &__values {
+    background-color: var(--values-background-color);
+    border-bottom: 1px solid var(--border-color);
+    border-left: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
+
+    &_first-value {
+      border-top: 1px solid var(--border-color);
+    }
+
+    font-family: inherit;
+    font-style: inherit;
+    font-weight: 400;
+    font-size: var(--values-font-size);
+    line-height: 24px;
+    color: var(--values-color);
+  }
+
+  &__cell {
+    &>button {
+      width: 100%;
+      font-size: var(--button-text-font-size);
+    }
+
+    &-label, &-input input, &-value {
+      font-family: inherit;
+      font-style: inherit;
+      font-weight: inherit;
+      font-size: inherit;
+      line-height: inherit;
+      color: inherit;
+    }
+
+    &-label{
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: flex-start;
+      align-items: center;
+    }
+
+    &-value {
+      padding: 0 7.5px;
+      border-right: 1px solid var(--border-color);
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: flex-start;
+      align-items: center;
+    }
+
+    &-action {
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+
+      color: $color--froly;
+    }
+  }
+}

package/dist/Atomic/FormElements/RangeList/RangeList.stories.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RangeListTemplate = exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _RangeList = _interopRequireDefault(require("./RangeList"));
+
+require("./partial/AnyOuterClass.scss");
+
+var _excluded = ["includeOuterStyles"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+global.lng = 'en';
+var _default = {
+  title: 'RangeList',
+  component: _RangeList.default
+};
+exports.default = _default;
+var rootStyles = {
+  with: '100%',
+  padding: '20px',
+  backgroundColor: '#f7fafc'
+};
+
+var Template = function Template(args) {
+  var includeOuterStyles = args.includeOuterStyles,
+      restArgs = (0, _objectWithoutProperties2.default)(args, _excluded);
+
+  var _useState = (0, _react.useState)([{
+    from: 1,
+    to: 2
+  }, {
+    from: 5,
+    to: 7
+  }, {
+    from: 8,
+    to: 9
+  }]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1]; // { from: 1, to: 2 }, { from: 5, to: 7 }, { from: 8, to: 9 }
+
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: rootStyles
+  }, /*#__PURE__*/_react.default.createElement(_RangeList.default, (0, _extends2.default)({}, restArgs, {
+    className: includeOuterStyles ? 'any-outer-class__range-list' : null,
+    value: value,
+    onChange: function (_onChange) {
+      function onChange(_x) {
+        return _onChange.apply(this, arguments);
+      }
+
+      onChange.toString = function () {
+        return _onChange.toString();
+      };
+
+      return onChange;
+    }(function (e) {
+      return onChange(e, 'value');
+    })
+  })));
+}; // const { fields, onChange, type, isInteger, id: filterId, label, className } = props;
+
+
+var RangeListTemplate = Template.bind({});
+exports.RangeListTemplate = RangeListTemplate;
+RangeListTemplate.args = {
+  includeOuterStyles: false // fields: [
+  //   {label: 'From', key: 'from', type: 'number', init: '$'},
+  //   {label: 'To', key: 'to', type: 'number', init: '$'}
+  // ],
+  // id: 306
+  // isActive: true
+  // isInteger: true
+  // isLabelBold: true
+  // isNoLabel: true
+  // label: "Age"
+  // listType: "rangeList"
+  // onChange: ƒ onChange(e)
+  // type: "switcherRangeList"
+  // value: (2) [{…}, {…}]
+
+};