@occmundial/occ-atomic 2.0.0-beta.0 → 2.0.0-beta.2

package/build/Pill/styles.js

@@ -25,8 +25,8 @@ var _default = {
   },
   label: {
     fontFamily: _fonts["default"].body,
-    fontSize: 12,
-    lineHeight: '20px',
+    fontSize: 14,
+    lineHeight: 1.5,
     color: _colors["default"].ink,
     transition: '0.3s all',
     '& a': {
@@ -55,6 +55,10 @@ var _default = {
   },
   errorIcon: {
     marginBottom: -2
+  },
+  choiceGroup: {
+    display: 'flex',
+    flexWrap: 'wrap'
   }
 };
 exports["default"] = _default;

package/build/Placeholder/Placeholder.js

@@ -20,11 +20,11 @@ var Placeholder = function Placeholder(_ref) {
       round = _ref.round,
       top = _ref.top,
       bottom = _ref.bottom;
-  return _react["default"].createElement(_Flexbox["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
     display: "flex",
     alignItems: "center",
     className: "".concat(textSize ? classes[textSize] : '').concat(top ? " ".concat(classes["top".concat(top)]) : '').concat(bottom ? " ".concat(classes["bottom".concat(bottom)]) : '')
-  }, _react["default"].createElement("div", {
+  }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(classes.placeholder).concat(round ? " ".concat(classes.round) : '')
   }));
 };

package/build/Placeholder/Placeholder.test.js

@@ -21,13 +21,13 @@ var reduceClasses = function reduceClasses(prev, curr) {
 var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
 describe('Placeholder', function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Placeholder["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Placeholder["default"], {
       classes: classes
     }));
     expect(wrapper).toMatchSnapshot();
   });
   it('has the right classNames', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Placeholder["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Placeholder["default"], {
       classes: classes
     }));
     expect(wrapper.prop('className')).toBe('');
@@ -47,7 +47,7 @@ describe('Placeholder', function () {
 });
 describe("PlaceholderJSS", function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], null));
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null));
     expect(wrapper).toMatchSnapshot();
   });
 });

package/build/Placeholder/__snapshots__/Placeholder.test.js.snap

@@ -0,0 +1,130 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Placeholder matches the snapshot 1`] = `ShallowWrapper {}`;
+
+exports[`Placeholder styles matches the snapshot 1`] = `
+Object {
+  "@keyframes progress": Object {
+    "0%": Object {
+      "transform": "translate3d(-100%, 0, 0)",
+    },
+    "100%": Object {
+      "transform": "translate3d(100%, 0, 0)",
+    },
+  },
+  "bottombase": Object {
+    "marginBottom": 24,
+  },
+  "bottomlarge": Object {
+    "marginBottom": 48,
+  },
+  "bottommedium": Object {
+    "marginBottom": 32,
+  },
+  "bottomsmall": Object {
+    "marginBottom": 16,
+  },
+  "bottomtiny": Object {
+    "marginBottom": 8,
+  },
+  "bottomxLarge": Object {
+    "marginBottom": 64,
+  },
+  "bottomxTiny": Object {
+    "marginBottom": 4,
+  },
+  "heading": Object {
+    "& $placeholder": Object {
+      "height": 22,
+    },
+    "height": 32,
+  },
+  "headline": Object {
+    "& $placeholder": Object {
+      "height": 36,
+    },
+    "height": 48,
+  },
+  "hero": Object {
+    "& $placeholder": Object {
+      "height": 57,
+    },
+    "height": 72,
+  },
+  "large": Object {
+    "& $placeholder": Object {
+      "height": 17,
+    },
+    "height": 24,
+  },
+  "micro": Object {
+    "& $placeholder": Object {
+      "height": 11,
+    },
+    "height": 16,
+  },
+  "placeholder": Object {
+    "&:after": Object {
+      "animation": "progress 2s ease-in-out infinite",
+      "background": "linear-gradient(90deg, rgba(204, 204, 204, 0), rgba(204, 204, 204, 0.7), rgba(204, 204, 204, 0))",
+      "content": "\\"\\"",
+      "height": "100%",
+      "left": 0,
+      "position": "absolute",
+      "top": 0,
+      "width": "100%",
+    },
+    "background": "#f2f2f2",
+    "borderRadius": 4,
+    "height": [Function],
+    "mixBlendMode": "multiply",
+    "overflow": "hidden",
+    "position": "relative",
+    "width": [Function],
+  },
+  "round": Object {
+    "borderRadius": "50%",
+  },
+  "small": Object {
+    "& $placeholder": Object {
+      "height": 13,
+    },
+    "height": 16,
+  },
+  "standard": Object {
+    "& $placeholder": Object {
+      "height": 15,
+    },
+    "height": 24,
+  },
+  "subheading": Object {
+    "& $placeholder": Object {
+      "height": 17,
+    },
+    "height": 24,
+  },
+  "topbase": Object {
+    "marginTop": 24,
+  },
+  "toplarge": Object {
+    "marginTop": 48,
+  },
+  "topmedium": Object {
+    "marginTop": 32,
+  },
+  "topsmall": Object {
+    "marginTop": 16,
+  },
+  "toptiny": Object {
+    "marginTop": 8,
+  },
+  "topxLarge": Object {
+    "marginTop": 64,
+  },
+  "topxTiny": Object {
+    "marginTop": 4,
+  },
+}
+`;
+
+exports[`PlaceholderJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/Placeholder/styles.js

@@ -5,22 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
-
 var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
-  '@keyframes placeholderPulse': {
+  '@keyframes progress': {
     '0%': {
-      opacity: 0.5
-    },
-    '50%': {
-      opacity: 1
+      transform: 'translate3d(-100%, 0, 0)'
     },
     '100%': {
-      opacity: 0.5
+      transform: 'translate3d(100%, 0, 0)'
     }
   },
   placeholder: {
@@ -30,9 +25,21 @@ var _default = {
     height: function height(props) {
       return props.height ? props.height : 14;
     },
-    background: _colors["default"].grey100,
-    animation: 'placeholderPulse 1s infinite ease-in-out',
-    borderRadius: _spacing["default"].xTiny
+    borderRadius: _spacing["default"].xTiny,
+    position: 'relative',
+    overflow: 'hidden',
+    background: '#f2f2f2',
+    mixBlendMode: 'multiply',
+    '&:after': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      background: "linear-gradient(90deg, rgba(204, 204, 204, 0), rgba(204, 204, 204, 0.7), rgba(204, 204, 204, 0))",
+      animation: 'progress 2s ease-in-out infinite'
+    }
   },
   round: {
     borderRadius: '50%'
@@ -58,31 +65,31 @@ var _default = {
   subheading: {
     height: 24,
     '& $placeholder': {
-      height: 16
+      height: 17
     }
   },
   large: {
     height: 24,
     '& $placeholder': {
-      height: 16
+      height: 17
     }
   },
   standard: {
     height: 24,
     '& $placeholder': {
-      height: 14
+      height: 15
     }
   },
   small: {
     height: 16,
     '& $placeholder': {
-      height: 12
+      height: 13
     }
   },
   micro: {
     height: 16,
     '& $placeholder': {
-      height: 10
+      height: 11
     }
   },
   topxTiny: {

package/build/Radio/Radio.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,7 +15,7 @@ var _Text = _interopRequireDefault(require("../Text"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
@@ -21,27 +23,31 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-var Radio =
-/*#__PURE__*/
-function (_React$Component) {
+var Radio = /*#__PURE__*/function (_React$Component) {
   _inherits(Radio, _React$Component);
 
+  var _super = _createSuper(Radio);
+
   function Radio(props) {
     var _this;
 
     _classCallCheck(this, Radio);
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(Radio).call(this, props));
+    _this = _super.call(this, props);
     _this.state = {
       selected: props.selected
     };
@@ -82,24 +88,28 @@ function (_React$Component) {
           textOverflow = _this$props.textOverflow,
           className = _this$props.className,
           style = _this$props.style;
-      return _react["default"].createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement("div", {
         id: id
       }, options.map(function (option) {
-        return _react["default"].createElement("div", {
+        return /*#__PURE__*/_react["default"].createElement("div", _extends({
           id: option.trk,
           key: option.value,
+          "data-testid": option.testId
+        }, option.testId && {
+          'data-value': selected == option.value ? 1 : 0
+        }, {
           className: "".concat(classes.cont).concat(selected == option.value ? " ".concat(classes.active) : '').concat(option.disabled ? " ".concat(classes.disabled) : '').concat(className ? " ".concat(className) : ''),
           onClick: function onClick() {
             _this2.onChange(option);
           },
           style: style
-        }, _react["default"].createElement("div", {
+        }), /*#__PURE__*/_react["default"].createElement("div", {
           className: classes.radio,
           id: option.trk
-        }), option.label && _react["default"].createElement(_Text["default"], {
+        }), option.label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
           tag: "label",
           className: "".concat(classes.label).concat(textOverflow ? " ".concat(classes.overflow) : '')
-        }, option.label), option.right && _react["default"].createElement(_Text["default"], {
+        }, option.label), option.right && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
           tag: "label",
           mid: true,
           className: classes.right
@@ -128,7 +138,11 @@ Radio.propTypes = {
     value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
     label: _propTypes["default"].string,
     right: _propTypes["default"].string,
-    trk: _propTypes["default"].string
+    trk: _propTypes["default"].string,
+
+    /** The testId property adds the data attribute data-testid to
+     *  the main element and should be used for testing only. */
+    testId: _propTypes["default"].string
   })),
 
   /** Use this prop to overflow the text of the label, adding '...' and the end. */

package/build/Radio/Radio.test.js

@@ -31,14 +31,14 @@ var options = [{
 }];
 describe("Radio", function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Radio["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
       classes: classes,
       options: options
     }));
     expect(wrapper).toMatchSnapshot();
   });
   it('has the right state', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Radio["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
       classes: classes,
       options: options,
       selected: 3
@@ -61,7 +61,7 @@ describe("Radio", function () {
       label: 'Option 3',
       disabled: true
     }];
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Radio["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
       classes: classes,
       options: options2
     }));
@@ -70,7 +70,7 @@ describe("Radio", function () {
     expect(wrapper.find('.cont').at(2).prop('className')).toEqual('cont disabled');
   });
   it('changes the value on click', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Radio["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
       classes: classes,
       options: options
     }));
@@ -80,7 +80,7 @@ describe("Radio", function () {
   });
   it('calls onChange function', function () {
     var onChange = jest.fn();
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Radio["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
       classes: classes,
       onChange: onChange,
       options: options
@@ -91,7 +91,7 @@ describe("Radio", function () {
 });
 describe("RadioJSS", function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], null));
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null));
     expect(wrapper).toMatchSnapshot();
   });
 });

package/build/Radio/__snapshots__/Radio.test.js.snap

@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Radio matches the snapshot 1`] = `ShallowWrapper {}`;
+
+exports[`Radio styles matches the snapshot 1`] = `
+Object {
+  "active": Object {
+    "& $radio:after": Object {
+      "background": Array [
+        "#083cae",
+        "!important",
+      ],
+    },
+  },
+  "cont": Object {
+    "&:after": Object {
+      "clear": "both",
+      "content": "\\"\\"",
+      "display": "table",
+    },
+    "&:hover $radio:after": Object {
+      "background": "#dddddd",
+    },
+    "alignItems": "start",
+    "boxSizing": "border-box",
+    "cursor": "pointer",
+    "display": "flex",
+    "outline": "0",
+    "paddingBottom": 8,
+    "paddingTop": 8,
+  },
+  "disabled": Object {
+    "opacity": 0.4,
+    "pointerEvents": "none",
+  },
+  "label": Object {
+    "cursor": "pointer",
+    "flex": "1",
+    "float": "left",
+    "marginLeft": 8,
+  },
+  "overflow": Object {
+    "overflow": "hidden",
+    "textOverflow": "ellipsis",
+    "whiteSpace": "nowrap",
+  },
+  "radio": Object {
+    "&:after": Object {
+      "background": "transparent",
+      "borderRadius": "50%",
+      "content": "\\"\\"",
+      "height": 6,
+      "left": "50%",
+      "position": "absolute",
+      "top": "50%",
+      "transform": "translate(-50%, -50%)",
+      "transition": "0.3s all",
+      "width": 6,
+    },
+    "&:before": Object {
+      "background": "#ffffff",
+      "border": "1px solid #dddddd",
+      "borderRadius": "50%",
+      "content": "\\"\\"",
+      "height": 16,
+      "left": "50%",
+      "position": "absolute",
+      "top": "50%",
+      "transform": "translate(-50%, -50%)",
+      "width": 16,
+    },
+    "height": 24,
+    "position": "relative",
+    "width": 24,
+  },
+  "right": Object {
+    "float": "right",
+    "marginLeft": 8,
+  },
+}
+`;
+
+exports[`RadioJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/RangeCounter/RangeCounter.js

@@ -0,0 +1,110 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+/** Use this component in lists with pagination. It will display information about the current page and its elements. */
+var RangeCounter = /*#__PURE__*/function (_React$Component) {
+  _inherits(RangeCounter, _React$Component);
+
+  var _super = _createSuper(RangeCounter);
+
+  function RangeCounter() {
+    _classCallCheck(this, RangeCounter);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(RangeCounter, [{
+    key: "numberWithCommas",
+    value: function numberWithCommas(num) {
+      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          min = _this$props.min,
+          max = _this$props.max,
+          symbol = _this$props.symbol,
+          total = _this$props.total,
+          type = _this$props.type,
+          of = _this$props.of,
+          id = _this$props.id,
+          className = _this$props.className,
+          style = _this$props.style;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "".concat(classes.cont).concat(className ? " ".concat(className) : ''),
+        id: id,
+        style: style
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        className: classes.num
+      }, this.numberWithCommas(min), symbol, this.numberWithCommas(max)), " ", of, " ", this.numberWithCommas(total), " ", type);
+    }
+  }]);
+
+  return RangeCounter;
+}(_react["default"].Component);
+
+RangeCounter.propTypes = {
+  classes: _propTypes["default"].object,
+
+  /** The number of the first item. */
+  min: _propTypes["default"].number,
+
+  /** The number of the last item. */
+  max: _propTypes["default"].number,
+
+  /** A symbol to separate the min and max numbers. */
+  symbol: _propTypes["default"].string,
+
+  /** A semantic separator between the min and max, with the total. */
+  of: _propTypes["default"].string,
+
+  /** The total number of elements on the whole list. */
+  total: _propTypes["default"].number,
+
+  /** The type of items that the list is showing. */
+  type: _propTypes["default"].string,
+  id: _propTypes["default"].string,
+  className: _propTypes["default"].string,
+  style: _propTypes["default"].object
+};
+RangeCounter.defaultProps = {
+  symbol: ' - ',
+  type: '',
+  of: '/'
+};
+var _default = RangeCounter;
+exports["default"] = _default;