@festo-ui/react 5.0.0 → 5.1.0-dev.162

package/lib/components/mobile-flyout/mobile-flyout-page/MobileFlyoutPage.js

@@ -0,0 +1,47 @@
+import cn from 'classnames';
+import { forwardRef, useContext } from 'react';
+import MobileFlyoutContext from '../MobileFlyoutContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const MobileFlyoutPage = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    back,
+    children,
+    name,
+    root,
+    ...props
+  } = _ref;
+  const {
+    visible,
+    setVisible,
+    back: backContext
+  } = useContext(MobileFlyoutContext);
+  const innerVisible = root || name && visible.includes(name);
+  const innerBack = back ?? backContext ?? 'Back';
+  function handleChange() {
+    if (name) {
+      setVisible(name);
+    }
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: cn('fwe-mobile-flyout-page', {
+      'fwe-opened': innerVisible
+    }),
+    ref: ref,
+    ...props,
+    children: [!root && /*#__PURE__*/_jsxs("div", {
+      tabIndex: 0,
+      role: "button",
+      className: "fwe-page-back",
+      onClick: handleChange,
+      onKeyUp: handleChange,
+      children: [/*#__PURE__*/_jsx("i", {}), /*#__PURE__*/_jsx("div", {
+        children: innerBack
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "fwe-mobile-flyout-item-container",
+      children: children
+    })]
+  });
+});
+export default MobileFlyoutPage;

package/lib/components/modals/Modal.d.ts

@@ -1,11 +1,9 @@
-import React from 'react';
-import { ClassNamePropsWithChildren } from '../../helper/types';
 import './Modal.scss';
-export interface ModalProps extends ClassNamePropsWithChildren {
-    isOpen: boolean;
+import React from 'react';
+import { ModalBaseProps } from './ModalBase';
+export interface ModalProps extends ModalBaseProps {
     body: React.ReactNode;
-    onClose?: () => void;
-    head: React.ReactNode;
+    head?: React.ReactNode;
 }
-declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+declare const Modal: (props: ModalProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export default Modal;

package/lib/components/modals/Modal.js

@@ -1,11 +1,7 @@
-import React, { useRef, forwardRef } from 'react';
-import classNames from 'classnames';
-import { CSSTransition } from 'react-transition-group';
-import OutsideClickHandler from 'react-outside-click-handler';
-import useForkRef from '../../helper/useForkRef';
+import React, { forwardRef } from 'react';
+import ModalBase from './ModalBase';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 const Modal = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     head,
@@ -15,62 +11,33 @@ const Modal = /*#__PURE__*/forwardRef((_ref, ref) => {
     className,
     children
   } = _ref;
-  const backdropRef = useRef(null);
-  const modalRef = useRef(null);
-  const combinedRef = useForkRef(ref, modalRef);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(CSSTransition, {
-      nodeRef: backdropRef,
-      unmountOnExit: true,
-      timeout: {
-        exit: 600
-      },
-      in: isOpen,
-      classNames: "fr-modal-backdrop",
-      appear: true,
-      children: /*#__PURE__*/_jsx("div", {
-        ref: backdropRef,
-        className: "fr-modal-backdrop fwe-modal-backdrop"
+  return /*#__PURE__*/_jsxs(ModalBase, {
+    isOpen: isOpen,
+    className: className,
+    ref: ref,
+    onClose: onClose,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "fwe-modal-close",
+      children: /*#__PURE__*/_jsxs("button", {
+        type: "button",
+        "aria-label": "Close",
+        className: "fwe-btn fwe-btn-link fwe-dark",
+        onClick: onClose,
+        children: [/*#__PURE__*/_jsx("i", {
+          "aria-hidden": "true",
+          className: "fwe-icon fwe-icon-close-small"
+        }), /*#__PURE__*/_jsx("span", {
+          className: "fwe-sr-only",
+          children: "Close"
+        })]
       })
-    }), /*#__PURE__*/_jsx(OutsideClickHandler, {
-      onOutsideClick: () => onClose ? onClose() : undefined,
-      children: /*#__PURE__*/_jsx(CSSTransition, {
-        ref: modalRef,
-        unmountOnExit: true,
-        classNames: "fr-modal",
-        appear: true,
-        in: isOpen,
-        timeout: {
-          exit: 600
-        },
-        children: /*#__PURE__*/_jsxs("div", {
-          ref: combinedRef,
-          className: classNames('fr-modal fwe-modal', className),
-          children: [/*#__PURE__*/_jsx("div", {
-            className: "fwe-modal-close",
-            children: /*#__PURE__*/_jsxs("button", {
-              type: "button",
-              "aria-label": "Close",
-              className: "fwe-btn fwe-btn-link fwe-dark",
-              onClick: onClose,
-              children: [/*#__PURE__*/_jsx("i", {
-                "aria-hidden": "true",
-                className: "fwe-icon fwe-icon-close-small"
-              }), /*#__PURE__*/_jsx("span", {
-                className: "fwe-sr-only",
-                children: "Close"
-              })]
-            })
-          }), /*#__PURE__*/_jsx("div", {
-            className: "fwe-modal-header",
-            children: head
-          }), /*#__PURE__*/_jsx("div", {
-            className: "fwe-modal-body",
-            children: body
-          }), children]
-        })
-      })
-    })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "fwe-modal-header",
+      children: head
+    }), /*#__PURE__*/_jsx("div", {
+      className: "fwe-modal-body",
+      children: body
+    }), children]
   });
 });
 export default Modal;

package/lib/components/modals/ModalBase.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import './Modal.scss';
+import { ClassNamePropsWithChildren } from '../../helper/types';
+export interface ModalBaseProps extends ClassNamePropsWithChildren {
+    isOpen: boolean;
+    onClose?: () => void;
+}
+declare const ModalBase: (props: ModalBaseProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export default ModalBase;

package/lib/components/modals/ModalBase.js

@@ -0,0 +1,68 @@
+import classNames from 'classnames';
+import { forwardRef, useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import { CSSTransition } from 'react-transition-group';
+import useForkRef from '../../helper/useForkRef';
+import useOnClickOutside from '../../helper/useOnClickOutside';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ModalBase = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    isOpen,
+    onClose,
+    className,
+    children
+  } = _ref;
+  const backdropRef = useRef(null);
+  const modalRef = useRef(null);
+  const divRef = useRef(null);
+  const combinedRef = useForkRef(ref, modalRef);
+  const allRefs = useForkRef(combinedRef, divRef);
+  const container = divRef?.current?.ownerDocument || document;
+  useOnClickOutside(divRef, () => onClose?.());
+  useEffect(() => {
+    const handleKeyDown = event => {
+      if (event.key === 'Escape') {
+        onClose?.();
+      }
+    };
+    container.addEventListener('keydown', handleKeyDown);
+    return () => container.removeEventListener('keydown', handleKeyDown);
+  }, [onClose, container]);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(CSSTransition, {
+        nodeRef: backdropRef,
+        unmountOnExit: true,
+        timeout: {
+          exit: 600
+        },
+        in: isOpen,
+        classNames: "fr-modal-backdrop",
+        appear: true,
+        component: null,
+        children: /*#__PURE__*/_jsx("div", {
+          ref: backdropRef,
+          className: "fr-modal-backdrop fwe-modal-backdrop"
+        })
+      }), /*#__PURE__*/_jsx(CSSTransition, {
+        ref: modalRef,
+        unmountOnExit: true,
+        classNames: "fr-modal",
+        appear: true,
+        in: isOpen,
+        timeout: {
+          exit: 600
+        },
+        component: null,
+        children: /*#__PURE__*/_jsx("div", {
+          ref: allRefs,
+          className: classNames('fr-modal fwe-modal', className),
+          children: children
+        })
+      })]
+    }), container.body)
+  });
+});
+export default ModalBase;

package/lib/components/modals/ModalFooter.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ClassNamePropsWithChildren } from '../../helper/types';
-declare const ModalFooter: import("react").ForwardRefExoticComponent<ClassNamePropsWithChildren & import("react").RefAttributes<HTMLDivElement>>;
+declare const ModalFooter: (props: ClassNamePropsWithChildren & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 export default ModalFooter;

package/lib/components/modals/imageGallery/BaseGallery.d.ts

@@ -0,0 +1,18 @@
+import 'swiper/css';
+import { ComponentPropsWithoutRef } from 'react';
+import { ClassNamePropsWithChildren } from '../../../helper/types';
+import { ImageDescriptiveContent } from './ImageGalleryContent';
+export interface ImageGalleryItemDataBase extends ComponentPropsWithoutRef<'img'>, Record<string, unknown> {
+    containMode?: boolean;
+}
+export type ImageGalleryItemData = {
+    content?: ImageDescriptiveContent;
+} & ImageGalleryItemDataBase;
+interface BaseGalleryProps extends ClassNamePropsWithChildren {
+    images: ImageGalleryItemData[];
+    thumbnailImages?: ImageGalleryItemDataBase[];
+    onSlideChanged?: (value: number) => void;
+    startIndex?: number;
+}
+export default function BaseGallery({ images, thumbnailImages, onSlideChanged, startIndex, }: BaseGalleryProps): JSX.Element;
+export {};

package/lib/components/modals/imageGallery/BaseGallery.js

@@ -0,0 +1,77 @@
+import 'swiper/css';
+import cn from 'classnames';
+import { useState } from 'react';
+import { Navigation, Thumbs } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function BaseGallery(_ref) {
+  let {
+    images,
+    thumbnailImages,
+    onSlideChanged,
+    startIndex
+  } = _ref;
+  const [thumbsSwiper, setThumbsSwiper] = useState(null);
+  return /*#__PURE__*/_jsxs("div", {
+    className: "fwe-image-gallery-wrapper",
+    children: [/*#__PURE__*/_jsx(Swiper, {
+      initialSlide: startIndex,
+      thumbs: {
+        swiper: thumbsSwiper
+      },
+      modules: [Thumbs, Navigation],
+      navigation: {
+        nextEl: '.fwe-navigate-btn-up',
+        prevEl: '.fwe-navigate-btn-down'
+      },
+      zoom: true,
+      className: "gallery-swiper fwe-image-gallery",
+      spaceBetween: 0,
+      onSlideChange: slider => onSlideChanged?.(slider.activeIndex),
+      children: images.map(_ref2 => {
+        let {
+          containMode,
+          alt,
+          content,
+          ...image
+        } = _ref2;
+        return /*#__PURE__*/_jsx(SwiperSlide, {
+          children: /*#__PURE__*/_jsx("div", {
+            className: "swiper-zoom-container",
+            children: /*#__PURE__*/_jsx("img", {
+              ...image,
+              className: cn({
+                'fwe-object-fit-contain fwe-p-m': containMode
+              }, image.className),
+              alt: alt
+            })
+          })
+        }, image.src);
+      })
+    }), thumbnailImages && /*#__PURE__*/_jsx(Swiper, {
+      freeMode: true,
+      slidesPerView: "auto",
+      className: "thumbs-swiper fwe-image-gallery-thumbs",
+      modules: [Thumbs],
+      watchSlidesProgress: true,
+      onSwiper: setThumbsSwiper,
+      children: thumbnailImages.map(_ref3 => {
+        let {
+          containMode,
+          alt,
+          ...image
+        } = _ref3;
+        return /*#__PURE__*/_jsx(SwiperSlide, {
+          children: /*#__PURE__*/_jsx("img", {
+            ...image,
+            className: cn({
+              'fwe-object-fit-contain fwe-p-xxxs': containMode
+            }, image.className),
+            alt: alt
+          })
+        }, image.src);
+      })
+    })]
+  });
+}

package/lib/components/modals/imageGallery/ImageGallery.d.ts

@@ -0,0 +1,15 @@
+import './ImageGallery.scss';
+import { ComponentPropsWithoutRef } from 'react';
+import { ModalBaseProps } from '../ModalBase';
+import { ImageGalleryItemData, ImageGalleryItemDataBase } from './BaseGallery';
+interface ImageGalleryProps extends ComponentPropsWithoutRef<'div'>, ModalBaseProps {
+    /** Index number of initial slide. */
+    startIndex: number;
+    images: ImageGalleryItemData[];
+    thumbnailImages?: ImageGalleryItemDataBase[];
+    pagination?: boolean;
+    descriptiveContent?: boolean;
+    onSlideChanged?: (index: number) => void;
+}
+declare const ImageGallery: (props: ImageGalleryProps & import("react").RefAttributes<HTMLImageElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export default ImageGallery;

package/lib/components/modals/imageGallery/ImageGallery.helper.d.ts

@@ -0,0 +1,3 @@
+import { Argument } from 'classnames';
+declare const getClasses: (thumbnailImages: Argument, descriptiveContent: Argument, className: Argument) => string;
+export default getClasses;

package/lib/components/modals/imageGallery/ImageGallery.helper.js

@@ -0,0 +1,11 @@
+import cn from 'classnames';
+const getClasses = (thumbnailImages, descriptiveContent, className) => {
+  const base = 'fwe-modal-image-gallery';
+  const thumbnail = `${base}--with-thumbnails`;
+  const container = `${base}--with-container`;
+  return cn(base, {
+    [thumbnail]: [thumbnailImages],
+    [container]: descriptiveContent
+  }, className);
+};
+export default getClasses;

package/lib/components/modals/imageGallery/ImageGallery.js

@@ -0,0 +1,77 @@
+import { forwardRef, useState } from 'react';
+import ModalBase from '../ModalBase';
+import BaseGallery from './BaseGallery';
+import ImageGalleryContent from './ImageGalleryContent';
+import ImageGalleryPagination from './ImageGalleryPagination';
+import getClasses from './ImageGallery.helper';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const ImageGallery = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    isOpen,
+    startIndex,
+    images,
+    thumbnailImages,
+    descriptiveContent,
+    children,
+    className,
+    pagination,
+    onClose,
+    onSlideChanged,
+    ...props
+  } = _ref;
+  const [currentIndex, setCurrentIndex] = useState(startIndex + 1);
+  function handleChange(index) {
+    setCurrentIndex(index + 1);
+    onSlideChanged?.(index);
+  }
+  function handleClose() {
+    setCurrentIndex(startIndex + 1);
+    onClose?.();
+  }
+  const classes = getClasses(thumbnailImages, descriptiveContent, className);
+  return /*#__PURE__*/_jsx(ModalBase, {
+    onClose: handleClose,
+    className: classes,
+    ...props,
+    isOpen: isOpen,
+    ref: ref,
+    children: isOpen && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "fwe-image-gallery-header",
+        children: [/*#__PURE__*/_jsx(ImageGalleryPagination, {
+          currentIndex: currentIndex,
+          length: images.length,
+          pagination: pagination
+        }), /*#__PURE__*/_jsx("button", {
+          "aria-label": "close",
+          type: "button",
+          className: "fwe-btn fwe-btn-link fwe-ml-auto",
+          onClick: handleClose,
+          children: /*#__PURE__*/_jsx("i", {
+            className: "fwe-icon fwe-icon-lg fwe-color-white fwe-icon-menu-close fwe-modal-image-gallery-close"
+          })
+        })]
+      }), descriptiveContent ? /*#__PURE__*/_jsxs("div", {
+        className: "fwe-image-gallery-container",
+        children: [/*#__PURE__*/_jsx(BaseGallery, {
+          startIndex: startIndex,
+          images: images,
+          thumbnailImages: thumbnailImages,
+          onSlideChanged: handleChange,
+          children: children
+        }), /*#__PURE__*/_jsx(ImageGalleryContent, {
+          imageContent: images[currentIndex - 1]?.content
+        })]
+      }) : /*#__PURE__*/_jsx(BaseGallery, {
+        startIndex: startIndex,
+        images: images,
+        thumbnailImages: thumbnailImages,
+        onSlideChanged: handleChange,
+        children: children
+      })]
+    })
+  });
+});
+export default ImageGallery;

package/lib/components/modals/imageGallery/ImageGallery.stories.helper.d.ts

@@ -0,0 +1,3 @@
+import { ImageGalleryItemData } from './BaseGallery';
+declare const images: ImageGalleryItemData[];
+export default images;

package/lib/components/modals/imageGallery/ImageGallery.stories.helper.js

@@ -0,0 +1,108 @@
+/* eslint-disable import/no-relative-packages */
+// @ts-ignore
+import Asset1 from '../../../../../../web-essentials/stories/assets/gallery-01.webp';
+// @ts-ignore
+import Asset2 from '../../../../../../web-essentials/stories/assets/gallery-02.webp';
+// @ts-ignore
+import Asset3 from '../../../../../../web-essentials/stories/assets/gallery-03.webp';
+// @ts-ignore
+import Asset4 from '../../../../../../web-essentials/stories/assets/gallery-04.webp';
+// @ts-ignore
+import Asset5 from '../../../../../../web-essentials/stories/assets/gallery-05.webp';
+// @ts-ignore
+import Asset6 from '../../../../../../web-essentials/stories/assets/gallery-06.webp';
+// @ts-ignore
+import Asset7 from '../../../../../../web-essentials/stories/assets/gallery-07.webp';
+// @ts-ignore
+import Asset8 from '../../../../../../web-essentials/stories/assets/gallery-08.webp';
+// @ts-ignore
+import Asset9 from '../../../../../../web-essentials/stories/assets/gallery-09.webp';
+// @ts-ignore
+import AssetTen from '../../../../../../web-essentials/stories/assets/gallery-10.webp';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const images = [{
+  src: Asset1,
+  alt: 'Asset1',
+  content: {
+    title: 'Asset 1',
+    body: 'Asset 1 description'
+  }
+}, {
+  src: Asset2,
+  alt: 'Asset2',
+  containMode: true,
+  content: {
+    title: 'Asset 2',
+    body: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("p", {
+        children: "Asset 2 description with some html inside."
+      }), /*#__PURE__*/_jsxs("ul", {
+        children: [/*#__PURE__*/_jsx("li", {
+          children: "bullet point 1"
+        }), /*#__PURE__*/_jsx("li", {
+          children: "bullet point 2"
+        })]
+      })]
+    })
+  }
+}, {
+  src: Asset3,
+  alt: 'Asset3',
+  containMode: true,
+  content: {
+    title: 'Asset 3',
+    body: 'Asset 3 description'
+  }
+}, {
+  src: Asset4,
+  alt: 'Asset4',
+  content: {
+    title: 'Asset 4',
+    body: 'Asset 4 description'
+  }
+}, {
+  src: Asset5,
+  alt: 'Asset5',
+  content: {
+    title: 'Asset 5',
+    body: 'Asset 5 description'
+  }
+}, {
+  src: Asset6,
+  alt: 'Asset6',
+  content: {
+    title: 'Asset 6',
+    body: 'Asset 6 description'
+  }
+}, {
+  src: Asset7,
+  alt: 'Asset7',
+  content: {
+    title: 'Asset 7',
+    body: 'Asset 7 description'
+  }
+}, {
+  src: Asset8,
+  alt: 'Asset8',
+  content: {
+    title: 'Asset 8',
+    body: 'Asset 8 description'
+  }
+}, {
+  src: Asset9,
+  alt: 'Asset9',
+  content: {
+    title: 'Asset 9',
+    body: 'Asset 9 description'
+  }
+}, {
+  src: AssetTen,
+  alt: 'Asset10',
+  content: {
+    title: 'Asset 10',
+    body: 'Asset 1ß description'
+  }
+}];
+export default images;

package/lib/components/modals/imageGallery/ImageGalleryContent.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface ImageDescriptiveContent {
+    title: string;
+    body: React.ReactNode;
+}
+interface ImageGalleryContentProps {
+    imageContent?: ImageDescriptiveContent;
+}
+export default function ImageGalleryContent({ imageContent }: ImageGalleryContentProps): JSX.Element;
+export {};

package/lib/components/modals/imageGallery/ImageGalleryContent.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function ImageGalleryContent(_ref) {
+  let {
+    imageContent
+  } = _ref;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: imageContent && /*#__PURE__*/_jsxs("div", {
+      className: "fwe-image-gallery-content",
+      children: [/*#__PURE__*/_jsx("h3", {
+        children: imageContent.title
+      }), imageContent.body]
+    })
+  });
+}

package/lib/components/modals/imageGallery/ImageGalleryPagination.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface ImageGalleryPaginationProps {
+    pagination?: boolean;
+    currentIndex: number;
+    length: number;
+}
+export default function ImageGalleryPagination({ pagination, currentIndex, length, }: ImageGalleryPaginationProps): JSX.Element;
+export {};

package/lib/components/modals/imageGallery/ImageGalleryPagination.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function ImageGalleryPagination(_ref) {
+  let {
+    pagination,
+    currentIndex,
+    length
+  } = _ref;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: pagination && /*#__PURE__*/_jsxs("div", {
+      className: "fwe-pagination fwe-pagination--on-dark-bg",
+      children: [/*#__PURE__*/_jsx("button", {
+        "aria-label": "previous",
+        type: "button",
+        className: "fwe-navigate-btn-down"
+      }), /*#__PURE__*/_jsx("span", {
+        className: "fwe-page-current",
+        children: currentIndex
+      }), /*#__PURE__*/_jsx("span", {
+        className: "fwe-page-max",
+        children: length
+      }), /*#__PURE__*/_jsx("button", {
+        "aria-label": "next",
+        type: "button",
+        className: "fwe-navigate-btn-up"
+      })]
+    })
+  });
+}