@festo-ui/react 5.0.1 → 5.1.0-dev.164

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

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MobileFlyoutPage = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _MobileFlyoutContext = _interopRequireDefault(require("../MobileFlyoutContext"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const MobileFlyoutPage = exports.MobileFlyoutPage = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    back,
+    children,
+    name,
+    root,
+    ...props
+  } = _ref;
+  const {
+    visible,
+    setVisible,
+    back: backContext
+  } = (0, _react.useContext)(_MobileFlyoutContext.default);
+  const innerVisible = root || name && visible.includes(name);
+  const innerBack = back ?? backContext ?? 'Back';
+  function handleChange() {
+    if (name) {
+      setVisible(name);
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)('fwe-mobile-flyout-page', {
+      'fwe-opened': innerVisible
+    }),
+    ref: ref,
+    ...props,
+    children: [!root && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      tabIndex: 0,
+      role: "button",
+      className: "fwe-page-back",
+      onClick: handleChange,
+      onKeyUp: handleChange,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: innerBack
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-mobile-flyout-item-container",
+      children: children
+    })]
+  });
+});
+var _default = exports.default = MobileFlyoutPage;

package/node/lib/components/modals/AlertModal.js

@@ -78,5 +78,4 @@ function AlertModal(_ref) {
     })
   });
 }
-var _default = AlertModal;
-exports.default = _default;
+var _default = exports.default = AlertModal;

package/node/lib/components/modals/ConfirmModal.js

@@ -58,5 +58,4 @@ function ConfirmModal(_ref) {
     })
   });
 }
-var _default = ConfirmModal;
-exports.default = _default;
+var _default = exports.default = ConfirmModal;

package/node/lib/components/modals/Modal.js

@@ -5,14 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _reactTransitionGroup = require("react-transition-group");
-var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
-var _useForkRef = _interopRequireDefault(require("../../helper/useForkRef"));
+var _ModalBase = _interopRequireDefault(require("./ModalBase"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     head,
@@ -22,63 +19,33 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     className,
     children
   } = _ref;
-  const backdropRef = (0, _react.useRef)(null);
-  const modalRef = (0, _react.useRef)(null);
-  const combinedRef = (0, _useForkRef.default)(ref, modalRef);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
-      nodeRef: backdropRef,
-      unmountOnExit: true,
-      timeout: {
-        exit: 600
-      },
-      in: isOpen,
-      classNames: "fr-modal-backdrop",
-      appear: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        ref: backdropRef,
-        className: "fr-modal-backdrop fwe-modal-backdrop"
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalBase.default, {
+    isOpen: isOpen,
+    className: className,
+    ref: ref,
+    onClose: onClose,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-modal-close",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+        type: "button",
+        "aria-label": "Close",
+        className: "fwe-btn fwe-btn-link fwe-dark",
+        onClick: onClose,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          "aria-hidden": "true",
+          className: "fwe-icon fwe-icon-close-small"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "fwe-sr-only",
+          children: "Close"
+        })]
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactOutsideClickHandler.default, {
-      onOutsideClick: () => onClose ? onClose() : undefined,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
-        ref: modalRef,
-        unmountOnExit: true,
-        classNames: "fr-modal",
-        appear: true,
-        in: isOpen,
-        timeout: {
-          exit: 600
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          ref: combinedRef,
-          className: (0, _classnames.default)('fr-modal fwe-modal', className),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "fwe-modal-close",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-              type: "button",
-              "aria-label": "Close",
-              className: "fwe-btn fwe-btn-link fwe-dark",
-              onClick: onClose,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-                "aria-hidden": "true",
-                className: "fwe-icon fwe-icon-close-small"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: "fwe-sr-only",
-                children: "Close"
-              })]
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "fwe-modal-header",
-            children: head
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "fwe-modal-body",
-            children: body
-          }), children]
-        })
-      })
-    })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-modal-header",
+      children: head
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-modal-body",
+      children: body
+    }), children]
   });
 });
-var _default = Modal;
-exports.default = _default;
+var _default = exports.default = Modal;

package/node/lib/components/modals/ModalBase.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _reactTransitionGroup = require("react-transition-group");
+var _useForkRef = _interopRequireDefault(require("../../helper/useForkRef"));
+var _useOnClickOutside = _interopRequireDefault(require("../../helper/useOnClickOutside"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ModalBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    isOpen,
+    onClose,
+    className,
+    children
+  } = _ref;
+  const backdropRef = (0, _react.useRef)(null);
+  const modalRef = (0, _react.useRef)(null);
+  const divRef = (0, _react.useRef)(null);
+  const combinedRef = (0, _useForkRef.default)(ref, modalRef);
+  const allRefs = (0, _useForkRef.default)(combinedRef, divRef);
+  const container = divRef?.current?.ownerDocument || document;
+  (0, _useOnClickOutside.default)(divRef, () => onClose?.());
+  (0, _react.useEffect)(() => {
+    const handleKeyDown = event => {
+      if (event.key === 'Escape') {
+        onClose?.();
+      }
+    };
+    container.addEventListener('keydown', handleKeyDown);
+    return () => container.removeEventListener('keydown', handleKeyDown);
+  }, [onClose, container]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+        nodeRef: backdropRef,
+        unmountOnExit: true,
+        timeout: {
+          exit: 600
+        },
+        in: isOpen,
+        classNames: "fr-modal-backdrop",
+        appear: true,
+        component: null,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          ref: backdropRef,
+          className: "fr-modal-backdrop fwe-modal-backdrop"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+        ref: modalRef,
+        unmountOnExit: true,
+        classNames: "fr-modal",
+        appear: true,
+        in: isOpen,
+        timeout: {
+          exit: 600
+        },
+        component: null,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          ref: allRefs,
+          className: (0, _classnames.default)('fr-modal fwe-modal', className),
+          children: children
+        })
+      })]
+    }), container.body)
+  });
+});
+var _default = exports.default = ModalBase;

package/node/lib/components/modals/ModalFooter.js

@@ -22,5 +22,4 @@ const ModalFooter = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     })
   });
 });
-var _default = ModalFooter;
-exports.default = _default;
+var _default = exports.default = ModalFooter;

package/node/lib/components/modals/Prompt.js

@@ -10,8 +10,8 @@ var _Modal = _interopRequireDefault(require("./Modal"));
 var _ModalFooter = _interopRequireDefault(require("./ModalFooter"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function Prompt(_ref) {
   let {
     title,

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

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BaseGallery;
+require("swiper/css");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _swiper = require("swiper");
+var _react2 = require("swiper/react");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function BaseGallery(_ref) {
+  let {
+    images,
+    thumbnailImages,
+    onSlideChanged,
+    startIndex
+  } = _ref;
+  const [thumbsSwiper, setThumbsSwiper] = (0, _react.useState)(null);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fwe-image-gallery-wrapper",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Swiper, {
+      initialSlide: startIndex,
+      thumbs: {
+        swiper: thumbsSwiper
+      },
+      modules: [_swiper.Thumbs, _swiper.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__*/(0, _jsxRuntime.jsx)(_react2.SwiperSlide, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "swiper-zoom-container",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+              ...image,
+              className: (0, _classnames.default)({
+                'fwe-object-fit-contain fwe-p-m': containMode
+              }, image.className),
+              alt: alt
+            })
+          })
+        }, image.src);
+      })
+    }), thumbnailImages && /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Swiper, {
+      freeMode: true,
+      slidesPerView: "auto",
+      className: "thumbs-swiper fwe-image-gallery-thumbs",
+      modules: [_swiper.Thumbs],
+      watchSlidesProgress: true,
+      onSwiper: setThumbsSwiper,
+      children: thumbnailImages.map(_ref3 => {
+        let {
+          containMode,
+          alt,
+          ...image
+        } = _ref3;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.SwiperSlide, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            ...image,
+            className: (0, _classnames.default)({
+              'fwe-object-fit-contain fwe-p-xxxs': containMode
+            }, image.className),
+            alt: alt
+          })
+        }, image.src);
+      })
+    })]
+  });
+}

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const getClasses = (thumbnailImages, descriptiveContent, className) => {
+  const base = 'fwe-modal-image-gallery';
+  const thumbnail = `${base}--with-thumbnails`;
+  const container = `${base}--with-container`;
+  return (0, _classnames.default)(base, {
+    [thumbnail]: [thumbnailImages],
+    [container]: descriptiveContent
+  }, className);
+};
+var _default = exports.default = getClasses;

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

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _ModalBase = _interopRequireDefault(require("../ModalBase"));
+var _BaseGallery = _interopRequireDefault(require("./BaseGallery"));
+var _ImageGalleryContent = _interopRequireDefault(require("./ImageGalleryContent"));
+var _ImageGalleryPagination = _interopRequireDefault(require("./ImageGalleryPagination"));
+var _ImageGallery = _interopRequireDefault(require("./ImageGallery.helper"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ImageGallery = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    isOpen,
+    startIndex,
+    images,
+    thumbnailImages,
+    descriptiveContent,
+    children,
+    className,
+    pagination,
+    onClose,
+    onSlideChanged,
+    ...props
+  } = _ref;
+  const [currentIndex, setCurrentIndex] = (0, _react.useState)(startIndex + 1);
+  function handleChange(index) {
+    setCurrentIndex(index + 1);
+    onSlideChanged?.(index);
+  }
+  function handleClose() {
+    setCurrentIndex(startIndex + 1);
+    onClose?.();
+  }
+  const classes = (0, _ImageGallery.default)(thumbnailImages, descriptiveContent, className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalBase.default, {
+    onClose: handleClose,
+    className: classes,
+    ...props,
+    isOpen: isOpen,
+    ref: ref,
+    children: isOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fwe-image-gallery-header",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageGalleryPagination.default, {
+          currentIndex: currentIndex,
+          length: images.length,
+          pagination: pagination
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          "aria-label": "close",
+          type: "button",
+          className: "fwe-btn fwe-btn-link fwe-ml-auto",
+          onClick: handleClose,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: "fwe-icon fwe-icon-lg fwe-color-white fwe-icon-menu-close fwe-modal-image-gallery-close"
+          })
+        })]
+      }), descriptiveContent ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fwe-image-gallery-container",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseGallery.default, {
+          startIndex: startIndex,
+          images: images,
+          thumbnailImages: thumbnailImages,
+          onSlideChanged: handleChange,
+          children: children
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageGalleryContent.default, {
+          imageContent: images[currentIndex - 1]?.content
+        })]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseGallery.default, {
+        startIndex: startIndex,
+        images: images,
+        thumbnailImages: thumbnailImages,
+        onSlideChanged: handleChange,
+        children: children
+      })]
+    })
+  });
+});
+var _default = exports.default = ImageGallery;

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

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _gallery = _interopRequireDefault(require("../../../../../../web-essentials/stories/assets/gallery-01.webp"));
+var _gallery2 = _interopRequireDefault(require("../../../../../../web-essentials/stories/assets/gallery-02.webp"));
+var _gallery3 = _interopRequireDefault(require("../../../../../../web-essentials/stories/assets/gallery-03.webp"));
+var _gallery4 = _interopRequireDefault(require("../../../../../../web-essentials/stories/assets/gallery-04.webp"));
+var _gallery5 = _interopRequireDefault(require("../../../../../../web-essentials/stories/assets/gallery-05.webp"));
+var _gallery6 = _interopRequireDefault(require("../../../../../../web-essentials/stories/assets/gallery-06.webp"));
+var _gallery7 = _interopRequireDefault(require("../../../../../../web-essentials/stories/assets/gallery-07.webp"));
+var _gallery8 = _interopRequireDefault(require("../../../../../../web-essentials/stories/assets/gallery-08.webp"));
+var _gallery9 = _interopRequireDefault(require("../../../../../../web-essentials/stories/assets/gallery-09.webp"));
+var _gallery10 = _interopRequireDefault(require("../../../../../../web-essentials/stories/assets/gallery-10.webp"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable import/no-relative-packages */
+// @ts-ignore
+
+// @ts-ignore
+
+// @ts-ignore
+
+// @ts-ignore
+
+// @ts-ignore
+
+// @ts-ignore
+
+// @ts-ignore
+
+// @ts-ignore
+
+// @ts-ignore
+
+// @ts-ignore
+
+const images = [{
+  src: _gallery.default,
+  alt: 'Asset1',
+  content: {
+    title: 'Asset 1',
+    body: 'Asset 1 description'
+  }
+}, {
+  src: _gallery2.default,
+  alt: 'Asset2',
+  containMode: true,
+  content: {
+    title: 'Asset 2',
+    body: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: "Asset 2 description with some html inside."
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+          children: "bullet point 1"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+          children: "bullet point 2"
+        })]
+      })]
+    })
+  }
+}, {
+  src: _gallery3.default,
+  alt: 'Asset3',
+  containMode: true,
+  content: {
+    title: 'Asset 3',
+    body: 'Asset 3 description'
+  }
+}, {
+  src: _gallery4.default,
+  alt: 'Asset4',
+  content: {
+    title: 'Asset 4',
+    body: 'Asset 4 description'
+  }
+}, {
+  src: _gallery5.default,
+  alt: 'Asset5',
+  content: {
+    title: 'Asset 5',
+    body: 'Asset 5 description'
+  }
+}, {
+  src: _gallery6.default,
+  alt: 'Asset6',
+  content: {
+    title: 'Asset 6',
+    body: 'Asset 6 description'
+  }
+}, {
+  src: _gallery7.default,
+  alt: 'Asset7',
+  content: {
+    title: 'Asset 7',
+    body: 'Asset 7 description'
+  }
+}, {
+  src: _gallery8.default,
+  alt: 'Asset8',
+  content: {
+    title: 'Asset 8',
+    body: 'Asset 8 description'
+  }
+}, {
+  src: _gallery9.default,
+  alt: 'Asset9',
+  content: {
+    title: 'Asset 9',
+    body: 'Asset 9 description'
+  }
+}, {
+  src: _gallery10.default,
+  alt: 'Asset10',
+  content: {
+    title: 'Asset 10',
+    body: 'Asset 1ß description'
+  }
+}];
+var _default = exports.default = images;

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ImageGalleryContent;
+var _jsxRuntime = require("react/jsx-runtime");
+function ImageGalleryContent(_ref) {
+  let {
+    imageContent
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: imageContent && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fwe-image-gallery-content",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+        children: imageContent.title
+      }), imageContent.body]
+    })
+  });
+}

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

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ImageGalleryPagination;
+var _jsxRuntime = require("react/jsx-runtime");
+function ImageGalleryPagination(_ref) {
+  let {
+    pagination,
+    currentIndex,
+    length
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: pagination && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fwe-pagination fwe-pagination--on-dark-bg",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        "aria-label": "previous",
+        type: "button",
+        className: "fwe-navigate-btn-down"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "fwe-page-current",
+        children: currentIndex
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "fwe-page-max",
+        children: length
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        "aria-label": "next",
+        type: "button",
+        className: "fwe-navigate-btn-up"
+      })]
+    })
+  });
+}

package/node/lib/components/modals/imageGallery/useClasses.js

@@ -0,0 +1 @@
+"use strict";