@uncinc/uncinc-react-kitchen-sink 2.3.5 → 2.4.0

package/dist/components/Form/Select/Input/index.js

@@ -62,8 +62,8 @@ const SelectInput = props => {
   }) => {
     return /*#__PURE__*/React.createElement(SelectStyled, {
       id: id,
-      className: c("Select__select", className),
-      classNamePrefix: c("Select__inner", wrapperClassName),
+      className: c('Select__select', className),
+      classNamePrefix: c('Select__inner', wrapperClassName),
       value: selectedOption,
       defaultValue: defaultValue,
       disabled: disabled,
@@ -77,10 +77,8 @@ const SelectInput = props => {
           } else {
             value = e.value;
           }
-        } else {
-          if (multiple) {
-            value = [];
-          }
+        } else if (multiple) {
+          value = [];
         }
         if (onChange) {
           onChange(value);
@@ -104,23 +102,23 @@ const SelectInput = props => {
       theme: {
         borderRadius: 0,
         colors: {
-          danger: "#DE350B",
-          dangerLight: "#FFBDAD",
-          neutral0: "hsl(0, 0%, 100%)",
-          neutral10: "hsl(0, 0%, 90%)",
-          neutral20: "hsl(0, 0%, 80%)",
-          neutral30: "hsl(0, 0%, 70%)",
-          neutral40: "hsl(0, 0%, 60%)",
-          neutral5: "hsl(0, 0%, 95%)",
-          neutral50: "hsl(0, 0%, 50%)",
-          neutral60: "hsl(0, 0%, 40%)",
-          neutral70: "hsl(0, 0%, 30%)",
-          neutral80: "hsl(0, 0%, 20%)",
-          neutral90: "hsl(0, 0%, 10%)",
-          primary: "#f0694b",
-          primary25: "hsla(0,0%,0%, 0)",
-          primary50: "hsla(0,0%,0%, 0)",
-          primary75: "hsla(0,0%,0%, 0)"
+          danger: '#DE350B',
+          dangerLight: '#FFBDAD',
+          neutral0: 'hsl(0, 0%, 100%)',
+          neutral10: 'hsl(0, 0%, 90%)',
+          neutral20: 'hsl(0, 0%, 80%)',
+          neutral30: 'hsl(0, 0%, 70%)',
+          neutral40: 'hsl(0, 0%, 60%)',
+          neutral5: 'hsl(0, 0%, 95%)',
+          neutral50: 'hsl(0, 0%, 50%)',
+          neutral60: 'hsl(0, 0%, 40%)',
+          neutral70: 'hsl(0, 0%, 30%)',
+          neutral80: 'hsl(0, 0%, 20%)',
+          neutral90: 'hsl(0, 0%, 10%)',
+          primary: '#f0694b',
+          primary25: 'hsla(0,0%,0%, 0)',
+          primary50: 'hsla(0,0%,0%, 0)',
+          primary75: 'hsla(0,0%,0%, 0)'
         }
       }
     });

package/dist/components/Form/Select/index.js

@@ -19,7 +19,7 @@ const Select = props => {
     multiple = false
   } = props;
   return /*#__PURE__*/React.createElement(GenericFormElement, {
-    className: c("Select", wrapperClassName),
+    className: c('Select', wrapperClassName),
     title: title,
     required: required,
     description: description,

package/dist/components/Form/TextField/index.js

@@ -21,7 +21,7 @@ const TextField = props => {
     wrapperClassName,
     disabled = false
   } = props;
-  const type = props.type || "text";
+  const type = props.type || 'text';
   const handleChange = e => {
     const {
       handleChange
@@ -34,7 +34,7 @@ const TextField = props => {
     }
   };
   return /*#__PURE__*/React.createElement(GenericFormElement, {
-    className: c("TextField", wrapperClassName),
+    className: c('TextField', wrapperClassName),
     title: title,
     required: required,
     description: description,

package/dist/components/Form/TextField/index.test.js

@@ -29,7 +29,7 @@ describe('<TextField />', () => {
     expect(wrapper.find('div.TextField__error')).to.have.lengthOf(1);
   });
   it('sets the correct value', async () => {
-    const value = "My First Name";
+    const value = 'My First Name';
     const onSubmitCallback = sinon.spy();
     const wrapper = mount( /*#__PURE__*/React.createElement(TextField, {
       onSubmit: onSubmitCallback

package/dist/components/Form/TextField/stories.js

@@ -8,7 +8,7 @@ export default {
 export const TextField = props => {
   return /*#__PURE__*/React.createElement(FormikWrapper, _extends({}, props, {
     initialValues: {
-      firstname: ""
+      firstname: ''
     },
     displayRequiredIndicator: "required"
   }), /*#__PURE__*/React.createElement(FormikTextField, {

package/dist/components/Form/Textarea/index.js

@@ -21,7 +21,7 @@ const Textarea = props => {
     disabled = false
   } = props;
   return /*#__PURE__*/React.createElement(GenericFormElement, {
-    className: c("Textarea", wrapperClassName),
+    className: c('Textarea', wrapperClassName),
     title: title,
     required: required,
     description: description,

package/dist/components/Hamburger/stories.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import Hamburger from './';
+import Hamburger from '.';
 export default {
   title: 'Atoms/Hamburger'
 };
 export const Default = () => {
   const [active, setActive] = React.useState(false);
-  const className = active ? "show-nav" : '';
+  const className = active ? 'show-nav' : '';
   return /*#__PURE__*/React.createElement("div", {
     className: className
   }, /*#__PURE__*/React.createElement(Hamburger, {
@@ -14,7 +14,7 @@ export const Default = () => {
 };
 export const TwoLines = () => {
   const [active, setActive] = React.useState(false);
-  const className = active ? "show-nav" : '';
+  const className = active ? 'show-nav' : '';
   return /*#__PURE__*/React.createElement("div", {
     className: className
   }, /*#__PURE__*/React.createElement(Hamburger, {

package/dist/components/Header/index.js

@@ -19,9 +19,9 @@ const Header = ({
   });
   const [active, setActive] = React.useState(false);
   const className = classnames('Header', {
-    "Header--default": !forceHamburger,
-    "Header--force-hamburger": forceHamburger,
-    "show-nav": active
+    'Header--default': !forceHamburger,
+    'Header--force-hamburger': forceHamburger,
+    'show-nav': active
   });
   if (forceHamburger) {
     import('./style-force-hamburger.scss').then(() => {

package/dist/components/Header/stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Header from './';
+import Header from '.';
 import './stories.scss';
 export default {
   title: 'Organisms/Header'

package/dist/components/Image/Picture/index.js

@@ -54,7 +54,6 @@ const Picture = ({
       if (image !== false) {
         return image;
       }
-      ;
       return null;
     });
 

package/dist/components/Image/stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Image from './';
+import Image from '.';
 import ImageBackground from './Background';
 import './stories.scss';
 export default {
@@ -32,9 +32,9 @@ export const Responsive = () => /*#__PURE__*/React.createElement("div", {
   className: "ImageWrapper"
 }, /*#__PURE__*/React.createElement(Image, {
   src: {
-    400: "https://dummyimage.com/400x400/000/fff.gif",
-    600: "https://dummyimage.com/600x400/f2788f/fff.png",
-    1000: "https://dummyimage.com/1000x400/73cac4/fff.jpg"
+    400: 'https://dummyimage.com/400x400/000/fff.gif',
+    600: 'https://dummyimage.com/600x400/f2788f/fff.png',
+    1000: 'https://dummyimage.com/1000x400/73cac4/fff.jpg'
   },
   alt: "Image 1"
 }));
@@ -48,9 +48,9 @@ export const BackgroundImageResponsive = () => /*#__PURE__*/React.createElement(
   className: "ImageWrapper"
 }, /*#__PURE__*/React.createElement(ImageBackground, {
   src: {
-    400: "https://dummyimage.com/400x400/000/fff.gif",
-    600: "https://dummyimage.com/600x400/f2788f/fff.png",
-    1000: "https://dummyimage.com/1000x400/73cac4/fff.jpg"
+    400: 'https://dummyimage.com/400x400/000/fff.gif',
+    600: 'https://dummyimage.com/600x400/f2788f/fff.png',
+    1000: 'https://dummyimage.com/1000x400/73cac4/fff.jpg'
   },
   alt: "Image 1"
 }));
@@ -59,8 +59,8 @@ export const ImageResponsiveFail = () => /*#__PURE__*/React.createElement("div",
 }, /*#__PURE__*/React.createElement(Image, {
   src: {
     400: null,
-    600: "https://dummyimage.com/600x400/f2788f/fff.png",
-    1000: "https://dummyimage.com/1000x400/73cac4/fff.jpg"
+    600: 'https://dummyimage.com/600x400/f2788f/fff.png',
+    1000: 'https://dummyimage.com/1000x400/73cac4/fff.jpg'
   },
   alt: "Image 1"
 }));

package/dist/components/InlineMenu/index.js

@@ -31,7 +31,7 @@ const InlineMenu = ({
     if (!element) return null;
     window.scrollTo({
       top: offset(element).top - scrollToTopOffset,
-      behavior: "smooth"
+      behavior: 'smooth'
     });
   };
   const handleActiveState = (currentId, nextId, activeByDefault) => {
@@ -60,9 +60,7 @@ const InlineMenu = ({
   }, menuItemName || 'missing menuItemName'))));
 };
 InlineMenu.defaultProps = {
-  items: [],
-  scrollToTopOffset: 0,
-  activeByDefault: false
+  scrollToTopOffset: 0
 };
 InlineMenu.propTypes = {
   items: PropTypes.arrayOf(PropTypes.shape({

package/dist/components/InlineMenu/stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import InlineMenu from './';
+import InlineMenu from '.';
 import Header from '../Header';
 import './stories.scss';
 export default {

package/dist/components/Layout/Container/stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Container from './';
+import Container from '.';
 import './stories.scss';
 export default {
   title: 'Templates/Grid'
@@ -10,71 +10,71 @@ const Filler = () => /*#__PURE__*/React.createElement("div", {
 const Columns = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
   className: "row"
 }, /*#__PURE__*/React.createElement("div", {
-  class: "col-12"
+  className: "col-12"
 }, /*#__PURE__*/React.createElement(Filler, null))), /*#__PURE__*/React.createElement("div", {
   className: "row"
 }, /*#__PURE__*/React.createElement("div", {
-  class: "col-6"
+  className: "col-6"
 }, /*#__PURE__*/React.createElement(Filler, null)), /*#__PURE__*/React.createElement("div", {
-  class: "col-6"
+  className: "col-6"
 }, /*#__PURE__*/React.createElement(Filler, null))), /*#__PURE__*/React.createElement("div", {
   className: "row"
 }, /*#__PURE__*/React.createElement("div", {
-  class: "col-4"
+  className: "col-4"
 }, /*#__PURE__*/React.createElement(Filler, null)), /*#__PURE__*/React.createElement("div", {
-  class: "col-4"
+  className: "col-4"
 }, /*#__PURE__*/React.createElement(Filler, null)), /*#__PURE__*/React.createElement("div", {
-  class: "col-4"
+  className: "col-4"
 }, /*#__PURE__*/React.createElement(Filler, null))), /*#__PURE__*/React.createElement("div", {
   className: "row"
 }, /*#__PURE__*/React.createElement("div", {
-  class: "col-3"
+  className: "col-3"
 }, /*#__PURE__*/React.createElement(Filler, null)), /*#__PURE__*/React.createElement("div", {
-  class: "col-3"
+  className: "col-3"
 }, /*#__PURE__*/React.createElement(Filler, null)), /*#__PURE__*/React.createElement("div", {
-  class: "col-3"
+  className: "col-3"
 }, /*#__PURE__*/React.createElement(Filler, null)), /*#__PURE__*/React.createElement("div", {
-  class: "col-3"
+  className: "col-3"
 }, /*#__PURE__*/React.createElement(Filler, null))), /*#__PURE__*/React.createElement("div", {
   className: "row"
 }, /*#__PURE__*/React.createElement("div", {
-  class: "col-2"
+  className: "col-2"
 }, /*#__PURE__*/React.createElement(Filler, null)), /*#__PURE__*/React.createElement("div", {
-  class: "col-2"
+  className: "col-2"
 }, /*#__PURE__*/React.createElement(Filler, null)), /*#__PURE__*/React.createElement("div", {
-  class: "col-2"
+  className: "col-2"
 }, /*#__PURE__*/React.createElement(Filler, null)), /*#__PURE__*/React.createElement("div", {
-  class: "col-2"
+  className: "col-2"
 }, /*#__PURE__*/React.createElement(Filler, null)), /*#__PURE__*/React.createElement("div", {
-  class: "col-2"
+  className: "col-2"
 }, /*#__PURE__*/React.createElement(Filler, null)), /*#__PURE__*/React.createElement("div", {
-  class: "col-2"
+  className: "col-2"
 }, /*#__PURE__*/React.createElement(Filler, null))), /*#__PURE__*/React.createElement("div", {
   className: "row"
 }, /*#__PURE__*/React.createElement("div", {
-  class: "col-1"
+  className: "col-1"
 }, /*#__PURE__*/React.createElement(Filler, null)), /*#__PURE__*/React.createElement("div", {
-  class: "col-1"
+  className: "col-1"
 }, /*#__PURE__*/React.createElement(Filler, null)), /*#__PURE__*/React.createElement("div", {
-  class: "col-1"
+  className: "col-1"
 }, /*#__PURE__*/React.createElement(Filler, null)), /*#__PURE__*/React.createElement("div", {
-  class: "col-1"
+  className: "col-1"
 }, /*#__PURE__*/React.createElement(Filler, null)), /*#__PURE__*/React.createElement("div", {
-  class: "col-1"
+  className: "col-1"
 }, /*#__PURE__*/React.createElement(Filler, null)), /*#__PURE__*/React.createElement("div", {
-  class: "col-1"
+  className: "col-1"
 }, /*#__PURE__*/React.createElement(Filler, null)), /*#__PURE__*/React.createElement("div", {
-  class: "col-1"
+  className: "col-1"
 }, /*#__PURE__*/React.createElement(Filler, null)), /*#__PURE__*/React.createElement("div", {
-  class: "col-1"
+  className: "col-1"
 }, /*#__PURE__*/React.createElement(Filler, null)), /*#__PURE__*/React.createElement("div", {
-  class: "col-1"
+  className: "col-1"
 }, /*#__PURE__*/React.createElement(Filler, null)), /*#__PURE__*/React.createElement("div", {
-  class: "col-1"
+  className: "col-1"
 }, /*#__PURE__*/React.createElement(Filler, null)), /*#__PURE__*/React.createElement("div", {
-  class: "col-1"
+  className: "col-1"
 }, /*#__PURE__*/React.createElement(Filler, null)), /*#__PURE__*/React.createElement("div", {
-  class: "col-1"
+  className: "col-1"
 }, /*#__PURE__*/React.createElement(Filler, null))));
 export const Default = () => /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Columns, null));
 export const Small = () => /*#__PURE__*/React.createElement(Container, {

package/dist/components/Layout/QuickLayout/stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import QuickLayout from './';
+import QuickLayout from '.';
 export default {
   title: 'Templates/QuickLayout'
 };

package/dist/components/Lottie/LottieAnimation/index.js

@@ -17,8 +17,8 @@ const LottieAnimation = /*#__PURE__*/React.forwardRef((props, ref) => {
   const lottieId = id || (data ? data.nm : null);
 
   /*
-   * Initial load of the Lottie animation
-   */
+  * Initial load of the Lottie animation
+  */
   const loadAnimation = useCallback(() => {
     const {
       renderer,
@@ -59,8 +59,8 @@ const LottieAnimation = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [data, lottieAnimation, lottieId, props]);
 
   /*
-   * Reverse direction on Mouse enter.
-   */
+  * Reverse direction on Mouse enter.
+  */
   const onMouseEnter = e => {
     const {
       activateOnHover
@@ -72,8 +72,8 @@ const LottieAnimation = /*#__PURE__*/React.forwardRef((props, ref) => {
   };
 
   /*
-   * Reverse direction on Mouse leave
-   */
+  * Reverse direction on Mouse leave
+  */
   const onMouseLeave = () => {
     const {
       activateOnHover
@@ -85,8 +85,8 @@ const LottieAnimation = /*#__PURE__*/React.forwardRef((props, ref) => {
   };
 
   /*
-   * Toggle the animation on click
-   */
+  * Toggle the animation on click
+  */
   const onClick = () => {
     const {
       pauseOnClick
@@ -111,14 +111,18 @@ const LottieAnimation = /*#__PURE__*/React.forwardRef((props, ref) => {
       lottieAnimation.current.destroy();
     };
   }, [props, loadAnimation, lottieAnimation]);
-  return /*#__PURE__*/React.createElement("div", {
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    onClick: onClick,
-    className: lottieClasses,
-    id: `lottie--${lottieId}`,
-    "aria-label": ariaLabel,
-    role: "button"
-  });
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+    React.createElement("div", {
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onClick: onClick,
+      className: lottieClasses,
+      id: `lottie--${lottieId}`,
+      "aria-label": ariaLabel,
+      role: "button"
+    })
+  );
 });
 export default LottieAnimation;

package/dist/components/Lottie/LottieAnimationWithMousePosition.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 import React, { useRef } from 'react';
-import Lottie from './';
-import Ola from "ola";
+import Ola from 'ola';
+import Lottie from '.';
 const LottieAnimationWithMousePosition = ({
   olaTime,
   ...props
@@ -13,8 +13,8 @@ const LottieAnimationWithMousePosition = ({
   const interpolatedFrame = Ola(0, olaTime);
 
   /*
-   * Follow mouse position for animation on Mouse move.
-   */
+  * Follow mouse position for animation on Mouse move.
+  */
   const onMouseMove = e => {
     if (ref && ref.current) {
       // Determine the mouse position relative to the current Lottie.

package/dist/components/Lottie/index.js

@@ -10,7 +10,7 @@ const Lottie = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = props;
   const LottieAnimation = loadable(() => {
     return new Promise(resolve => {
-      setTimeout(() => resolve(import("./LottieAnimation")), delay);
+      setTimeout(() => resolve(import('./LottieAnimation')), delay);
     });
   });
   return /*#__PURE__*/React.createElement(LottieAnimation, _extends({
@@ -39,7 +39,8 @@ Lottie.propTypes = {
   activateOnHover: PropTypes.bool,
   pauseOnClick: PropTypes.bool,
   olaTime: PropTypes.number,
-  startPosition: PropTypes.number
+  startPosition: PropTypes.number,
+  ariaLabel: PropTypes.string
 };
 Lottie.defaultProps = {
   id: null,

package/dist/components/Lottie/stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Lottie from './';
+import Lottie from '.';
 import LottieAnimationWithMousePosition from './LottieAnimationWithMousePosition';
 import exampleLottie from '../../assets/lottie/example.json';
 import exampleLottieEspero from '../../assets/lottie/data.json';

package/dist/components/MagicLine/index.js

@@ -1,7 +1,7 @@
 import React, { useRef, useState, useEffect } from 'react';
 import c from 'classnames';
 const MagicLine = ({
-  activeClassName = "Menu__item--active",
+  activeClassName = 'Menu__item--active',
   children
 }) => {
   const magicLineParentRef = useRef(null);
@@ -47,10 +47,10 @@ const MagicLine = ({
     };
     document.fonts.ready.then(initialize);
     window.addEventListener('load', initialize);
-    window.addEventListener("resize", handleResize);
+    window.addEventListener('resize', handleResize);
     return () => {
       window.removeEventListener('load', initialize);
-      window.removeEventListener("resize", handleResize);
+      window.removeEventListener('resize', handleResize);
     };
   }, []);
   return /*#__PURE__*/React.createElement("div", {

package/dist/components/MagicLine/stories.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import c from 'classnames';
-import MagicLine from './';
+import MagicLine from '.';
 import './stories.scss';
 export default {
   title: 'Molecules/MagicLine'
 };
 export const Default = () => /*#__PURE__*/React.createElement(MagicLine, null, (setInitialMagicLine, hoverMagicLine, setActiveItemInNavigation) => {
-  const items = ["one", "two with a longer name", "three"];
+  const items = ['one', 'two with a longer name', 'three'];
   return /*#__PURE__*/React.createElement("div", {
     className: "Menu"
   }, items.map(item => {
-    const active = item === "three";
+    const active = item === 'three';
     if (active) {
       setActiveItemInNavigation(true);
     }
@@ -30,7 +30,7 @@ export const Default = () => /*#__PURE__*/React.createElement(MagicLine, null, (
   }));
 });
 export const NoActiveItem = () => /*#__PURE__*/React.createElement(MagicLine, null, (setInitialMagicLine, hoverMagicLine, setActiveItemInNavigation) => {
-  const items = ["one", "two with a longer name", "three"];
+  const items = ['one', 'two with a longer name', 'three'];
   return /*#__PURE__*/React.createElement("div", {
     className: "Menu"
   }, items.map(item => {

package/dist/components/NavigationScroll/index.js

@@ -11,12 +11,6 @@ const NavigationScroll = props => {
     scrolledPastNavHeight: false,
     _previousPos: 0
   });
-  useEffect(() => {
-    window.addEventListener('scroll', handleScroll);
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  });
   const getScrollPos = element => {
     if (typeof element.pageYOffset !== 'undefined') {
       return element.pageYOffset;
@@ -52,6 +46,12 @@ const NavigationScroll = props => {
       _previousPos: scrollPos
     }));
   };
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  });
   const {
     reachedTop,
     reachedBottom,
@@ -77,10 +77,7 @@ const NavigationScroll = props => {
   }, children);
 };
 NavigationScroll.propTypes = {
-  children: PropTypes.element.isRequired,
-  onUpdate: PropTypes.func
-};
-NavigationScroll.defaultProps = {
-  onUpdate: () => {}
+  children: PropTypes.element.isRequired
 };
+NavigationScroll.defaultProps = {};
 export default NavigationScroll;

package/dist/components/NavigationScroll/stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import c from 'classnames';
-import NavigationScroll from './';
+import NavigationScroll from '.';
 import './stories.scss';
 export default {
   title: 'Molecules/NavigationScroll'

package/dist/components/Pagination/index.js

@@ -75,6 +75,12 @@ Pagination.propTypes = {
   showWhenOnePage: PropTypes.bool
 };
 Pagination.defaultProps = {
+  setCurrentPage: null,
+  previousLabel: null,
+  nextLabel: null,
+  containerClassName: null,
+  disabledClassName: null,
+  activeClassName: null,
   pageRangeDisplayed: 5,
   marginPagesDisplayed: 1,
   showWhenOnePage: false

package/dist/components/Pagination/stories.js

@@ -1,30 +1,30 @@
 import React from 'react';
-import Pagination from './';
+import Pagination from '.';
 import './stories.scss';
 export default {
   title: 'Molecules/Pagination'
 };
-export const Default = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pagination, {
+export const Default = () => /*#__PURE__*/React.createElement(Pagination, {
   currentPage: 1,
   totalPages: 10
-}));
-export const FewPages = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pagination, {
+});
+export const FewPages = () => /*#__PURE__*/React.createElement(Pagination, {
   currentPage: 2,
   totalPages: 4
-}));
-export const ManyPages = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pagination, {
+});
+export const ManyPages = () => /*#__PURE__*/React.createElement(Pagination, {
   currentPage: 4000,
   totalPages: 9001
-}));
-export const LargePageRange = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pagination, {
+});
+export const LargePageRange = () => /*#__PURE__*/React.createElement(Pagination, {
   currentPage: 20,
   totalPages: 100,
   pageRangeDisplayed: 15,
   marginPagesDisplayed: 3
-}));
-export const TextualButtons = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pagination, {
+});
+export const TextualButtons = () => /*#__PURE__*/React.createElement(Pagination, {
   currentPage: 10,
   totalPages: 30,
   previousLabel: /*#__PURE__*/React.createElement("a", null, "Previous"),
   nextLabel: /*#__PURE__*/React.createElement("a", null, "Next")
-}));
+});