@desynova-digital/components 9.0.26 → 9.1.0

package/molecules/pageHeader/pageHeader.js

@@ -1,35 +1,18 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledPageHeader = undefined;
-
-var _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  width: 100%;\n  max-height: 50px;\n  align-items: center;\n  padding: 10px 20px;\n  background: ', ';\n  .heading {\n    color: ', ';\n    font-size: 16px;\n    font-family: \'SFUIText-Regular\';\n  }\n  .sub-heading {\n    color: ', ';\n    font-size: 16px;\n    font-family: \'SFUIText-Regular\';\n    margin-left: 2px;\n  }\n  .header-left,\n  .header-right {\n    width: 50%;\n    display: flex;\n    align-items: center;\n  }\n  .header-right {\n    align-items: center;\n    justify-content: flex-end;\n    & .tab-list .tab-list-item {\n      border-bottom: 1px solid\n        ', ';\n\n      &.active {\n        border-bottom: 1px solid\n          ', ';\n      }\n    }\n  }\n  .header-left {\n    ', ' {\n      margin: 0;\n      margin-right: 13px;\n      box-shadow: 0 10px 10px 0 rgba(0, 206, 198, 0.2);\n      pointer-events: none;\n      border-radius: 2px;\n    }\n  }\n'], ['\n  display: flex;\n  width: 100%;\n  max-height: 50px;\n  align-items: center;\n  padding: 10px 20px;\n  background: ', ';\n  .heading {\n    color: ', ';\n    font-size: 16px;\n    font-family: \'SFUIText-Regular\';\n  }\n  .sub-heading {\n    color: ', ';\n    font-size: 16px;\n    font-family: \'SFUIText-Regular\';\n    margin-left: 2px;\n  }\n  .header-left,\n  .header-right {\n    width: 50%;\n    display: flex;\n    align-items: center;\n  }\n  .header-right {\n    align-items: center;\n    justify-content: flex-end;\n    & .tab-list .tab-list-item {\n      border-bottom: 1px solid\n        ', ';\n\n      &.active {\n        border-bottom: 1px solid\n          ', ';\n      }\n    }\n  }\n  .header-left {\n    ', ' {\n      margin: 0;\n      margin-right: 13px;\n      box-shadow: 0 10px 10px 0 rgba(0, 206, 198, 0.2);\n      pointer-events: none;\n      border-radius: 2px;\n    }\n  }\n']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _tokens = require('@desynova-digital/tokens');
-
-var _button = require('../../atoms/button');
-
-var _button2 = _interopRequireDefault(_button);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var StyledPageHeader = _styledComponents2.default.div(_templateObject, function (props) {
+exports["default"] = exports.StyledPageHeader = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _tokens = require("@desynova-digital/tokens");
+var _button = _interopRequireDefault(require("../../atoms/button"));
+var _templateObject;
+var StyledPageHeader = exports.StyledPageHeader = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  width: 100%;\n  max-height: 50px;\n  align-items: center;\n  padding: 10px 20px;\n  background: ", ";\n  .heading {\n    color: ", ";\n    font-size: 16px;\n    font-family: 'SFUIText-Regular';\n  }\n  .sub-heading {\n    color: ", ";\n    font-size: 16px;\n    font-family: 'SFUIText-Regular';\n    margin-left: 2px;\n  }\n  .header-left,\n  .header-right {\n    width: 50%;\n    display: flex;\n    align-items: center;\n  }\n  .header-right {\n    align-items: center;\n    justify-content: flex-end;\n    & .tab-list .tab-list-item {\n      border-bottom: 1px solid\n        ", ";\n\n      &.active {\n        border-bottom: 1px solid\n          ", ";\n      }\n    }\n  }\n  .header-left {\n    ", " {\n      margin: 0;\n      margin-right: 13px;\n      box-shadow: 0 10px 10px 0 rgba(0, 206, 198, 0.2);\n      pointer-events: none;\n      border-radius: 2px;\n    }\n  }\n"])), function (props) {
   return _tokens.colors[props.theme].pageHeader.background;
 }, function (props) {
   return _tokens.colors[props.theme].pageHeader.heading;
@@ -39,65 +22,41 @@ var StyledPageHeader = _styledComponents2.default.div(_templateObject, function
   return _tokens.colors[props.theme].pageHeader.background;
 }, function (props) {
   return _tokens.colors[props.theme].tabs.navsSelectedBorder;
-}, _button2.default.Element);
-
+}, _button["default"].Element);
 var PageHeader = function PageHeader(props) {
-  return _react2.default.createElement(
-    StyledPageHeader,
-    props,
-    _react2.default.createElement(
-      'div',
-      { className: 'header-left' },
-      _react2.default.createElement(
-        'span',
-        {
-          onClick: function onClick() {
-            props.headerIconClickHandler ? props.headerIconClickHandler() : console.log('pass func as props named headerIconClickHandler... receive args as actionItem name and event obj.');
-          }
-        },
-        _react2.default.createElement(_button2.default, {
-          theme: props.theme,
-          appearance: 'cta',
-          icon: props.icon,
-          iconWidth: 14,
-          iconHeight: 14,
-          width: 30,
-          height: 30
-        })
-      ),
-      _react2.default.createElement(
-        'p',
-        { className: 'heading' },
-        props.title
-      ),
-      _react2.default.createElement(
-        'p',
-        { className: 'sub-heading' },
-        props.subHeading
-      )
-    ),
-    props.rightPart ? _react2.default.createElement(
-      'div',
-      { className: 'header-right' },
-      props.rightPart
-    ) : null
-  );
+  return /*#__PURE__*/_react["default"].createElement(StyledPageHeader, props, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "header-left"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    onClick: function onClick() {
+      props.headerIconClickHandler ? props.headerIconClickHandler() : console.log('pass func as props named headerIconClickHandler... receive args as actionItem name and event obj.');
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
+    theme: props.theme,
+    appearance: "cta",
+    icon: props.icon,
+    iconWidth: 14,
+    iconHeight: 14,
+    width: 30,
+    height: 30
+  })), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "heading"
+  }, props.title), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "sub-heading"
+  }, props.subHeading)), props.rightPart ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: "header-right"
+  }, props.rightPart) : null);
 };
-
 PageHeader.propTypes = {
   /** Page title of the section */
-  title: _propTypes2.default.string.isRequired,
-  subHeading: _propTypes2.default.string,
-  icon: _propTypes2.default.string,
-  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc'])
+  title: _propTypes["default"].string.isRequired,
+  subHeading: _propTypes["default"].string,
+  icon: _propTypes["default"].string,
+  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc'])
 };
-
 PageHeader.defaultProps = {
   title: '',
   subHeading: '',
   icon: '',
   theme: 'light'
 };
-
-exports.default = PageHeader;
-exports.StyledPageHeader = StyledPageHeader;
+var _default = exports["default"] = PageHeader;

package/molecules/pageHeader/pageHeader.story.js

@@ -1,17 +1,10 @@
-'use strict';
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _react3 = require('@storybook/react');
-
-var _storyHelpers = require('../../_helpers/story-helpers');
-
-var _components = require('../../components');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@storybook/react");
+var _storyHelpers = require("../../_helpers/story-helpers");
+var _components = require("../../components");
 // import React from 'react'
 // import { storiesOf } from '@storybook/react'
 // import { Example, Stack } from '../../'
@@ -26,48 +19,34 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 //     </Example>
 // ))
 
-(0, _react3.storiesOf)('Page Header').add('page-header', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Page Header Appearence' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(_components.PageHeader, { title: 'Dashboard', icon: 'dashboard', subHeading: 'Today (Jul 9 2018)' })
-    )
-  );
+(0, _react2.storiesOf)('Page Header').add('page-header', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Page Header Appearence"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.PageHeader, {
+    title: "Dashboard",
+    icon: "dashboard",
+    subHeading: "Today (Jul 9 2018)"
+  })));
 });
-
-(0, _react3.storiesOf)('Page Header').add('page-header-dark', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Page Header Appearence', background: 'dark' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(_components.PageHeader, {
-        title: 'Dashboard',
-        icon: 'dashboard',
-        theme: 'dark',
-        subHeading: 'Today (Jul 9 2018)'
-      })
-    )
-  );
+(0, _react2.storiesOf)('Page Header').add('page-header-dark', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Page Header Appearence",
+    background: "dark"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.PageHeader, {
+    title: "Dashboard",
+    icon: "dashboard",
+    theme: "dark",
+    subHeading: "Today (Jul 9 2018)"
+  })));
 });
-
-(0, _react3.storiesOf)('Page Header').add('page-header-nexc', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Page Header Appearence', background: 'dark' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(_components.PageHeader, {
-        title: 'Dashboard',
-        icon: 'dashboard',
-        theme: 'nexc',
-        subHeading: 'Today (Jul 9 2018)'
-      })
-    )
-  );
+(0, _react2.storiesOf)('Page Header').add('page-header-nexc', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Page Header Appearence",
+    background: "dark"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(_components.PageHeader, {
+    title: "Dashboard",
+    icon: "dashboard",
+    theme: "nexc",
+    subHeading: "Today (Jul 9 2018)"
+  })));
 });

package/molecules/pagination/index.js

@@ -1,13 +1,9 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _pagination = require("./pagination");
-
-var _pagination2 = _interopRequireDefault(_pagination);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _pagination2.default;
+exports["default"] = void 0;
+var _pagination = _interopRequireDefault(require("./pagination"));
+var _default = exports["default"] = _pagination["default"];

package/molecules/pagination/pagination.js

@@ -1,49 +1,25 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _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; };
-
-var _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  justify-content: center;\n  ', ' {\n    div span {\n      color: ', ';\n    }\n  }\n'], ['\n  display: flex;\n  justify-content: center;\n  ', ' {\n    div span {\n      color: ', ';\n    }\n  }\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  padding: 4px 8px;\n  margin: 0 5px;\n  ', ';\n  ', ';\n  ', ';\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &:hover {\n    color: ', ';\n    background: #121d29;\n    border-color: #121d29;\n  }\n\n  &:focus {\n    color: #fff;\n    background: ', ';\n    border-color: ', ';\n  }\n\n  &:active {\n    color: #fff;\n    background: ', ';\n    border-color: ', ';\n  }\n'], ['\n  padding: 4px 8px;\n  margin: 0 5px;\n  ', ';\n  ', ';\n  ', ';\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &:hover {\n    color: ', ';\n    background: #121d29;\n    border-color: #121d29;\n  }\n\n  &:focus {\n    color: #fff;\n    background: ', ';\n    border-color: ', ';\n  }\n\n  &:active {\n    color: #fff;\n    background: ', ';\n    border-color: ', ';\n  }\n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n  display: flex;\n  align-items: center;\n  margin: 0 10px;\n  cursor: pointer;\n  span {\n    margin: 0 5px;\n    font-family: \'SFUIText-Regular\';\n    font-size: 14px;\n  }\n  ', ' {\n    transform: translate(0, 10%);\n  }\n  &:hover {\n    div {\n      i {\n        path {\n          fill: #fff;\n          stroke: #fff;\n          transition: all 0.4s ease-in-out;\n        }\n      }\n    }\n  }\n'], ['\n  display: flex;\n  align-items: center;\n  margin: 0 10px;\n  cursor: pointer;\n  span {\n    margin: 0 5px;\n    font-family: \'SFUIText-Regular\';\n    font-size: 14px;\n  }\n  ', ' {\n    transform: translate(0, 10%);\n  }\n  &:hover {\n    div {\n      i {\n        path {\n          fill: #fff;\n          stroke: #fff;\n          transition: all 0.4s ease-in-out;\n        }\n      }\n    }\n  }\n']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _button = require('../../atoms/button');
-
-var _button2 = _interopRequireDefault(_button);
-
-var _icon = require('../../atoms/icon');
-
-var _icon2 = _interopRequireDefault(_icon);
-
-var _pagination = require('../../_helpers/pagination');
-
-var _tokens = require('@desynova-digital/tokens');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _button = _interopRequireDefault(require("../../atoms/button"));
+var _icon = _interopRequireDefault(require("../../atoms/icon"));
+var _pagination = require("../../_helpers/pagination");
+var _tokens = require("@desynova-digital/tokens");
+var _templateObject, _templateObject2, _templateObject3;
 var defaultPaginationAppearance = 'default';
-
-var StyledPagination = _styledComponents2.default.div(_templateObject, StyledLink, function (props) {
+var StyledPagination = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: center;\n  ", " {\n    div span {\n      color: ", ";\n    }\n  }\n"])), StyledLink, function (props) {
   return _tokens.colors[props.theme].pagination.color;
 });
-var StyledPaginationItem = (0, _styledComponents2.default)(_button2.default)(_templateObject2, function (props) {
+var StyledPaginationItem = (0, _styledComponents["default"])(_button["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  padding: 4px 8px;\n  margin: 0 5px;\n  ", ";\n  ", ";\n  ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &:hover {\n    color: ", ";\n    background: #121d29;\n    border-color: #121d29;\n  }\n\n  &:focus {\n    color: #fff;\n    background: ", ";\n    border-color: ", ";\n  }\n\n  &:active {\n    color: #fff;\n    background: ", ";\n    border-color: ", ";\n  }\n"])), function (props) {
   return props.appearance == 'cta' ? '' : 'background:' + _tokens.colors[props.theme].pagination.pageButton;
 }, function (props) {
   return props.appearance == 'cta' ? '' : 'border-color:' + _tokens.colors[props.theme].pagination.pageButton;
@@ -60,191 +36,139 @@ var StyledPaginationItem = (0, _styledComponents2.default)(_button2.default)(_te
 }, function (props) {
   return _tokens.colors[props.theme].pagination.commonColor;
 });
-var StyledLink = _styledComponents2.default.div(_templateObject3, _icon2.default.Element);
+var StyledLink = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  margin: 0 10px;\n  cursor: pointer;\n  span {\n    margin: 0 5px;\n    font-family: 'SFUIText-Regular';\n    font-size: 14px;\n  }\n  ", " {\n    transform: translate(0, 10%);\n  }\n  &:hover {\n    div {\n      i {\n        path {\n          fill: #fff;\n          stroke: #fff;\n          transition: all 0.4s ease-in-out;\n        }\n      }\n    }\n  }\n"])), _icon["default"].Element);
 var PaginationItem = function PaginationItem(props) {
-  return _react2.default.createElement(StyledPaginationItem, _extends({}, props, {
-    display: 'rounded',
+  return /*#__PURE__*/_react["default"].createElement(StyledPaginationItem, (0, _extends2["default"])({}, props, {
+    display: "rounded",
     theme: props.theme,
     appearance: props.selected ? 'cta' : props.appearance || defaultPaginationAppearance
   }));
 };
-
 var renderPaginationLink = function renderPaginationLink(_ref) {
   var toPage = _ref.toPage,
-      content = _ref.content,
-      items = _ref.items,
-      perPage = _ref.perPage,
-      onPageChanged = _ref.onPageChanged,
-      icon = _ref.icon,
-      iconLocation = _ref.iconLocation,
-      theme = _ref.theme;
-  return _react2.default.createElement(
-    StyledLink,
-    { onClick: function onClick() {
-        return (0, _pagination.changePageIfAppropiate)(toPage, items, perPage, onPageChanged);
-      } },
-    iconLocation === 'left' ? icon === 'first-page' ? _react2.default.createElement(
-      _react2.default.Fragment,
-      null,
-      _react2.default.createElement(
-        'div',
-        { style: { marginTop: '-5px' } },
-        _react2.default.createElement(_icon2.default, {
-          name: icon,
-          color: _tokens.colors[theme].pagination.color,
-          stroke: _tokens.colors[theme].pagination.color
-        })
-      ),
-      _react2.default.createElement(
-        'span',
-        null,
-        content
-      )
-    ) : _react2.default.createElement(
-      _react2.default.Fragment,
-      null,
-      _react2.default.createElement(_icon2.default, { name: icon, color: 'none', stroke: _tokens.colors[theme].pagination.color }),
-      _react2.default.createElement(
-        'span',
-        null,
-        content
-      )
-    ) : icon === 'last-page' ? _react2.default.createElement(
-      _react2.default.Fragment,
-      null,
-      _react2.default.createElement(
-        'div',
-        { style: { marginTop: '-5px' } },
-        _react2.default.createElement(_icon2.default, {
-          name: icon,
-          color: _tokens.colors[theme].pagination.color,
-          stroke: _tokens.colors[theme].pagination.color
-        })
-      ),
-      _react2.default.createElement(
-        'span',
-        null,
-        content
-      )
-    ) : _react2.default.createElement(
-      _react2.default.Fragment,
-      null,
-      _react2.default.createElement(_icon2.default, { name: icon, color: 'none', stroke: _tokens.colors[theme].pagination.color }),
-      _react2.default.createElement(
-        'span',
-        null,
-        content
-      )
-    )
-  );
+    content = _ref.content,
+    items = _ref.items,
+    perPage = _ref.perPage,
+    onPageChanged = _ref.onPageChanged,
+    icon = _ref.icon,
+    iconLocation = _ref.iconLocation,
+    theme = _ref.theme;
+  return /*#__PURE__*/_react["default"].createElement(StyledLink, {
+    onClick: function onClick() {
+      return (0, _pagination.changePageIfAppropiate)(toPage, items, perPage, onPageChanged);
+    }
+  }, iconLocation === 'left' ? icon === 'first-page' ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginTop: '-5px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+    name: icon,
+    color: _tokens.colors[theme].pagination.color,
+    stroke: _tokens.colors[theme].pagination.color
+  })), /*#__PURE__*/_react["default"].createElement("span", null, content)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+    name: icon,
+    color: "none",
+    stroke: _tokens.colors[theme].pagination.color
+  }), /*#__PURE__*/_react["default"].createElement("span", null, content)) : icon === 'last-page' ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginTop: '-5px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+    name: icon,
+    color: _tokens.colors[theme].pagination.color,
+    stroke: _tokens.colors[theme].pagination.color
+  })), /*#__PURE__*/_react["default"].createElement("span", null, content)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+    name: icon,
+    color: "none",
+    stroke: _tokens.colors[theme].pagination.color
+  }), /*#__PURE__*/_react["default"].createElement("span", null, content)));
 };
-
 var renderPaginationItem = function renderPaginationItem(_ref2) {
   var toPage = _ref2.toPage,
-      content = _ref2.content,
-      appearance = _ref2.appearance,
-      items = _ref2.items,
-      perPage = _ref2.perPage,
-      onPageChanged = _ref2.onPageChanged;
-  return _react2.default.createElement(
-    PaginationItem,
-    {
-      appearance: appearance,
-      onClick: function onClick() {
-        return (0, _pagination.changePageIfAppropiate)(toPage, items, perPage, onPageChanged);
-      }
-    },
-    content
-  );
+    content = _ref2.content,
+    appearance = _ref2.appearance,
+    items = _ref2.items,
+    perPage = _ref2.perPage,
+    onPageChanged = _ref2.onPageChanged;
+  return /*#__PURE__*/_react["default"].createElement(PaginationItem, {
+    appearance: appearance,
+    onClick: function onClick() {
+      return (0, _pagination.changePageIfAppropiate)(toPage, items, perPage, onPageChanged);
+    }
+  }, content);
 };
-
 var handlePaginationButtonClick = function handlePaginationButtonClick(page, items, perPage, onPageChanged) {
   if (page.clickable === false) return;
-
   return (0, _pagination.changePageIfAppropiate)(page.label, items, perPage, onPageChanged);
 };
-
 var Pagination = function Pagination(_ref3) {
   var page = _ref3.page,
-      perPage = _ref3.perPage,
-      items = _ref3.items,
-      appearance = _ref3.appearance,
-      onPageChanged = _ref3.onPageChanged,
-      pagesPerSlice = _ref3.pagesPerSlice,
-      theme = _ref3.theme;
-  return _react2.default.createElement(
-    StyledPagination,
-    { theme: theme },
-    renderPaginationLink({
-      toPage: 1,
-      appearance: appearance,
-      items: items,
-      perPage: perPage,
-      onPageChanged: onPageChanged,
-      icon: 'first-page',
-      iconLocation: 'left',
-      theme: theme
-    }),
-    renderPaginationLink({
-      toPage: page - 1,
+    perPage = _ref3.perPage,
+    items = _ref3.items,
+    appearance = _ref3.appearance,
+    onPageChanged = _ref3.onPageChanged,
+    pagesPerSlice = _ref3.pagesPerSlice,
+    theme = _ref3.theme;
+  return /*#__PURE__*/_react["default"].createElement(StyledPagination, {
+    theme: theme
+  }, renderPaginationLink({
+    toPage: 1,
+    appearance: appearance,
+    items: items,
+    perPage: perPage,
+    onPageChanged: onPageChanged,
+    icon: 'first-page',
+    iconLocation: 'left',
+    theme: theme
+  }), renderPaginationLink({
+    toPage: page - 1,
+    appearance: appearance,
+    items: items,
+    perPage: perPage,
+    onPageChanged: onPageChanged,
+    icon: 'angle-left',
+    iconLocation: 'left',
+    theme: theme
+  }), (0, _pagination.getPaginationSlice)(page, items, perPage, pagesPerSlice).map(function (page) {
+    return /*#__PURE__*/_react["default"].createElement(PaginationItem, {
+      theme: theme,
+      key: page.label,
       appearance: appearance,
-      items: items,
-      perPage: perPage,
-      onPageChanged: onPageChanged,
-      icon: 'angle-left',
-      iconLocation: 'left',
-      theme: theme
-    }),
-    (0, _pagination.getPaginationSlice)(page, items, perPage, pagesPerSlice).map(function (page) {
-      return _react2.default.createElement(
-        PaginationItem,
-        {
-          theme: theme,
-          key: page.label,
-          appearance: appearance,
-          selected: page.selected,
-          onClick: function onClick() {
-            return handlePaginationButtonClick(page, items, perPage, onPageChanged);
-          }
-        },
-        page.label
-      );
-    }),
-    renderPaginationLink({
-      toPage: page + 1,
-      appearance: appearance,
-      items: items,
-      perPage: perPage,
-      onPageChanged: onPageChanged,
-      icon: 'angle-right',
-      iconLocation: 'right',
-      theme: theme
-    }),
-    renderPaginationLink({
-      toPage: (0, _pagination.pagesFromItems)(items, perPage),
-      appearance: appearance,
-      items: items,
-      perPage: perPage,
-      onPageChanged: onPageChanged,
-      icon: 'last-page',
-      iconLocation: 'right',
-      theme: theme
-    })
-  );
+      selected: page.selected,
+      onClick: function onClick() {
+        return handlePaginationButtonClick(page, items, perPage, onPageChanged);
+      }
+    }, page.label);
+  }), renderPaginationLink({
+    toPage: page + 1,
+    appearance: appearance,
+    items: items,
+    perPage: perPage,
+    onPageChanged: onPageChanged,
+    icon: 'angle-right',
+    iconLocation: 'right',
+    theme: theme
+  }), renderPaginationLink({
+    toPage: (0, _pagination.pagesFromItems)(items, perPage),
+    appearance: appearance,
+    items: items,
+    perPage: perPage,
+    onPageChanged: onPageChanged,
+    icon: 'last-page',
+    iconLocation: 'right',
+    theme: theme
+  }));
 };
-
 Pagination.propTypes = {
-  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
-  page: _propTypes2.default.number.isRequired,
-  perPage: _propTypes2.default.number.isRequired,
-  items: _propTypes2.default.number.isRequired,
-  pagesPerSlice: _propTypes2.default.number,
-  onPageChanged: _propTypes2.default.func
+  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
+  page: _propTypes["default"].number.isRequired,
+  perPage: _propTypes["default"].number.isRequired,
+  items: _propTypes["default"].number.isRequired,
+  pagesPerSlice: _propTypes["default"].number,
+  onPageChanged: _propTypes["default"].func
 };
-
 Pagination.defaultProps = {
   theme: 'dark',
   pagesPerSlice: 3
 };
-
-exports.default = Pagination;
+var _default = exports["default"] = Pagination;