@festo-ui/react 9.0.0-dev.711 → 9.0.0-dev.713

package/lib/components/modals/Prompt.js

@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from "react";
+import TextInput from "../../forms/text-input/TextInput.js";
+import Modal from "./Modal.js";
+import ModalFooter from "./ModalFooter.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Prompt(_ref) {
+  let {
+    title,
+    subtitle,
+    hint,
+    label,
+    value,
+    onChange,
+    onOk,
+    onCancel,
+    cancel,
+    ok,
+    ...props
+  } = _ref;
+  const [innerValue, setInnerValue] = useState(value);
+  useEffect(() => {
+    setInnerValue(value);
+  }, [value]);
+  function handleChange(e) {
+    setInnerValue(e.target.value);
+    if (onChange) {
+      onChange(e);
+    }
+  }
+  return /*#__PURE__*/_jsx(Modal, {
+    head: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [subtitle && /*#__PURE__*/_jsx("h2", {
+        className: "fwe-modal-h2",
+        children: subtitle
+      }), /*#__PURE__*/_jsx("h1", {
+        className: "fwe-modal-h1",
+        children: title
+      })]
+    }),
+    body: /*#__PURE__*/_jsx(TextInput, {
+      onChange: handleChange,
+      label: label,
+      hint: hint,
+      value: innerValue,
+      autoFocus: true
+    }),
+    ...props,
+    children: (cancel || ok) && /*#__PURE__*/_jsxs(ModalFooter, {
+      children: [cancel && /*#__PURE__*/_jsx("button", {
+        type: "button",
+        "aria-label": "Cancel",
+        className: "fwe-btn fwe-btn-lg",
+        onClick: onCancel,
+        children: cancel
+      }), ok && /*#__PURE__*/_jsx("button", {
+        type: "button",
+        "aria-label": "Ok",
+        className: "fwe-btn fwe-btn-hero fwe-btn-lg",
+        onClick: () => onOk(innerValue),
+        children: ok
+      })]
+    })
+  });
+}

package/{dist → lib}/components/modals/image-gallery/ImageGallery.d.ts

@@ -1,8 +1,8 @@
-import './ImageGallery.scss';
-import { type ComponentPropsWithoutRef } from 'react';
-import { type ModalBaseProps } from '../ModalBase';
-import { type ImageGalleryItemData, type ImageGalleryItemDataBase } from './internal/BaseGallery';
-export interface ImageGalleryProps extends ComponentPropsWithoutRef<'div'>, ModalBaseProps {
+import "./ImageGallery.scss";
+import { ComponentPropsWithoutRef } from "react";
+import { ModalBaseProps } from "../ModalBase";
+import { ImageGalleryItemData, ImageGalleryItemDataBase } from "./internal/BaseGallery";
+export interface ImageGalleryProps extends ComponentPropsWithoutRef<"div">, ModalBaseProps {
     /** Index number of initial slide. */
     startIndex: number;
     images?: ImageGalleryItemData[];
@@ -15,4 +15,5 @@ export interface ImageGalleryProps extends ComponentPropsWithoutRef<'div'>, Moda
     onSlideChanged?: (index: number) => void;
     onScaleChange?: (value: boolean) => void;
 }
-export declare const ImageGallery: (props: ImageGalleryProps & import("react").RefAttributes<HTMLImageElement>) => React.ReactElement | null;
+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/image-gallery/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/image-gallery/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/image-gallery/ImageGallery.js

@@ -0,0 +1,81 @@
+import { forwardRef, useState } from "react";
+import ModalBase from "../ModalBase.js";
+import BaseGallery from "./internal/BaseGallery.js";
+import ImageGalleryContent from "./ImageGalleryContent.js";
+import ImageGalleryPagination from "./internal/ImageGalleryPagination.js";
+import getClasses from "./ImageGallery.helper.js";
+import ImageGalleryContainer from "./internal/ImageGalleryContainer.js";
+import CloseButton from "./internal/CloseButton.js";
+import ScaleButton from "./internal/ScaleButton.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function getLength(pagination, images) {
+  let length = 0;
+  if (typeof pagination === "number") {
+    length = pagination;
+  } else if (pagination === true && images?.length) {
+    length = images.length;
+  }
+  return length;
+}
+const ImageGallery = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    isOpen,
+    startIndex,
+    images,
+    thumbnailImages,
+    descriptiveContent,
+    children,
+    className,
+    pagination,
+    showScaleButton,
+    onClose,
+    onSlideChanged,
+    onScaleChange,
+    ...props
+  } = _ref;
+  const [currentIndex, setCurrentIndex] = useState(startIndex + 1);
+  function handleChange(index) {
+    setCurrentIndex(index + 1);
+    onSlideChanged?.(index);
+  }
+  function handleClose() {
+    setCurrentIndex(startIndex + 1);
+    onClose?.();
+  }
+  const hasDescriptiveContent = Boolean(descriptiveContent);
+  const classes = getClasses(thumbnailImages, hasDescriptiveContent, className);
+  const length = getLength(pagination, images);
+  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: length
+        }), showScaleButton ? /*#__PURE__*/_jsx(ScaleButton, {
+          onScaleChange: onScaleChange
+        }) : null, /*#__PURE__*/_jsx(CloseButton, {
+          showScaleButton: showScaleButton,
+          onClose: onClose
+        })]
+      }), /*#__PURE__*/_jsxs(ImageGalleryContainer, {
+        descriptiveContent: hasDescriptiveContent,
+        children: [/*#__PURE__*/_jsx(BaseGallery, {
+          startIndex: startIndex,
+          images: images,
+          thumbnailImages: thumbnailImages,
+          onSlideChanged: handleChange,
+          children: children
+        }), images && descriptiveContent === true ? /*#__PURE__*/_jsx(ImageGalleryContent, {
+          imageContent: images?.[currentIndex - 1]?.content
+        }) : null, typeof descriptiveContent === "function" ? descriptiveContent?.(currentIndex - 1) : null]
+      })]
+    })
+  });
+});
+export default ImageGallery;

package/lib/components/modals/image-gallery/ImageGallery.stories.helper.d.ts

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

package/lib/components/modals/image-gallery/ImageGallery.stories.helper.js

@@ -0,0 +1,97 @@
+/* eslint-disable import/no-relative-packages */
+// @ts-ignore
+import Asset1 from "../../../../../../web-essentials/stories/assets/gallery-01.webp.js"; // @ts-ignore
+import Asset2 from "../../../../../../web-essentials/stories/assets/gallery-02.webp.js"; // @ts-ignore
+import Asset3 from "../../../../../../web-essentials/stories/assets/gallery-03.webp.js"; // @ts-ignore
+import Asset4 from "../../../../../../web-essentials/stories/assets/gallery-04.webp.js"; // @ts-ignore
+import Asset5 from "../../../../../../web-essentials/stories/assets/gallery-05.webp.js"; // @ts-ignore
+import Asset6 from "../../../../../../web-essentials/stories/assets/gallery-06.webp.js"; // @ts-ignore
+import Asset7 from "../../../../../../web-essentials/stories/assets/gallery-07.webp.js"; // @ts-ignore
+import Asset8 from "../../../../../../web-essentials/stories/assets/gallery-08.webp.js"; // @ts-ignore
+import Asset9 from "../../../../../../web-essentials/stories/assets/gallery-09.webp.js"; // @ts-ignore
+import AssetTen from "../../../../../../web-essentials/stories/assets/gallery-10.webp.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const images = [{
+  src: Asset1,
+  alt: "Asset1",
+  imageContent: {
+    title: "Asset 1",
+    body: "Asset 1 description"
+  }
+}, {
+  src: Asset2,
+  alt: "Asset2",
+  containMode: true,
+  imageContent: {
+    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,
+  imageContent: {
+    title: "Asset 3",
+    body: "Asset 3 description"
+  }
+}, {
+  src: Asset4,
+  alt: "Asset4",
+  imageContent: {
+    title: "Asset 4",
+    body: "Asset 4 description"
+  }
+}, {
+  src: Asset5,
+  alt: "Asset5",
+  imageContent: {
+    title: "Asset 5",
+    body: "Asset 5 description"
+  }
+}, {
+  src: Asset6,
+  alt: "Asset6",
+  imageContent: {
+    title: "Asset 6",
+    body: "Asset 6 description"
+  }
+}, {
+  src: Asset7,
+  alt: "Asset7",
+  imageContent: {
+    title: "Asset 7",
+    body: "Asset 7 description"
+  }
+}, {
+  src: Asset8,
+  alt: "Asset8",
+  imageContent: {
+    title: "Asset 8",
+    body: "Asset 8 description"
+  }
+}, {
+  src: Asset9,
+  alt: "Asset9",
+  imageContent: {
+    title: "Asset 9",
+    body: "Asset 9 description"
+  }
+}, {
+  src: AssetTen,
+  alt: "Asset10",
+  imageContent: {
+    title: "Asset 10",
+    body: "Asset 1ß description"
+  }
+}];
+export default images;

package/{dist → lib}/components/modals/image-gallery/ImageGalleryContent.d.ts

@@ -5,5 +5,5 @@ export interface ImageDescriptiveContent {
 interface ImageGalleryContentProps {
     imageContent?: ImageDescriptiveContent;
 }
-export declare function ImageGalleryContent({ imageContent, }: ImageGalleryContentProps): import("react/jsx-runtime").JSX.Element;
+export default function ImageGalleryContent({ imageContent }: ImageGalleryContentProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/modals/image-gallery/ImageGalleryContent.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs, 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/{dist → lib}/components/modals/image-gallery/ImageGalleryContext.d.ts

@@ -1,10 +1,10 @@
-import type { Swiper as SwiperClass } from 'swiper';
+import { Swiper as SwiperClass } from "swiper";
 interface ContextProps {
     thumbsSwiper: SwiperClass | null;
     setThumbsSwiper: React.Dispatch<React.SetStateAction<SwiperClass | null>>;
     onSlideChanged?: (value: number) => void;
     startIndex?: number;
 }
-export declare const ImageGalleryContext: import("react").Context<Partial<ContextProps>>;
+declare const ImageGalleryContext: import("react").Context<Partial<ContextProps>>;
 export declare const SwiperContext: import("react").Context<"gallery" | "thumbs">;
-export {};
+export default ImageGalleryContext;

package/lib/components/modals/image-gallery/ImageGalleryContext.js

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+const ImageGalleryContext = /*#__PURE__*/createContext({});
+export const SwiperContext = /*#__PURE__*/createContext("gallery");
+export default ImageGalleryContext;

package/lib/components/modals/image-gallery/ImageGallerySwiper.d.ts

@@ -0,0 +1,8 @@
+interface ImageGallerySwiperProps {
+    children: React.ReactNode;
+}
+declare function ImageGallerySwiper({ children }: ImageGallerySwiperProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ImageGallerySwiper {
+    var displayName: string;
+}
+export default ImageGallerySwiper;

package/lib/components/modals/image-gallery/ImageGallerySwiper.js

@@ -0,0 +1,32 @@
+import { Swiper } from "swiper/react";
+import { Navigation, Thumbs } from "swiper";
+import { useContext } from "react";
+import ImageGalleryContext from "./ImageGalleryContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ImageGallerySwiper(_ref) {
+  let {
+    children
+  } = _ref;
+  const {
+    thumbsSwiper,
+    startIndex,
+    onSlideChanged
+  } = useContext(ImageGalleryContext);
+  return /*#__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: children
+  });
+}
+ImageGallerySwiper.displayName = "Swiper";

package/lib/components/modals/image-gallery/ImageGalleryThumbsSwiper.d.ts

@@ -0,0 +1,5 @@
+interface ImageGalleryThumbsSwiperProps {
+    children: React.ReactNode;
+}
+export default function ImageGalleryThumbsSwiper({ children }: ImageGalleryThumbsSwiperProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/modals/image-gallery/ImageGalleryThumbsSwiper.js

@@ -0,0 +1,25 @@
+import { useContext } from "react";
+import { Thumbs } from "swiper";
+import { Swiper } from "swiper/react";
+import ImageGalleryContext, { SwiperContext } from "./ImageGalleryContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ImageGalleryThumbsSwiper(_ref) {
+  let {
+    children
+  } = _ref;
+  const {
+    setThumbsSwiper
+  } = useContext(ImageGalleryContext);
+  return /*#__PURE__*/_jsx(SwiperContext.Provider, {
+    value: "thumbs",
+    children: /*#__PURE__*/_jsx(Swiper, {
+      freeMode: true,
+      slidesPerView: "auto",
+      className: "thumbs-swiper fwe-image-gallery-thumbs",
+      modules: [Thumbs],
+      watchSlidesProgress: true,
+      onSwiper: setThumbsSwiper,
+      children: children
+    })
+  });
+}

package/lib/components/modals/image-gallery/image-gallery-item/ImageGalleryItem.d.ts

@@ -0,0 +1,11 @@
+import { SwiperSlideProps } from "swiper/react";
+import "./ImageGalleryItem.scss";
+interface ImageGalleryItemProps extends SwiperSlideProps {
+    children: React.ReactNode;
+    containMode?: boolean;
+}
+declare function ImageGalleryItem({ children, containMode, className, ...props }: ImageGalleryItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ImageGalleryItem {
+    var displayName: string;
+}
+export default ImageGalleryItem;

package/lib/components/modals/image-gallery/image-gallery-item/ImageGalleryItem.js

@@ -0,0 +1,28 @@
+import cn from "classnames";
+import { SwiperSlide } from "swiper/react";
+import { useContext } from "react";
+import { SwiperContext } from "../ImageGalleryContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ImageGalleryItem(_ref) {
+  let {
+    children,
+    containMode,
+    className,
+    ...props
+  } = _ref;
+  const swiperType = useContext(SwiperContext);
+  const isThumbsSwiper = swiperType === "thumbs";
+  return /*#__PURE__*/_jsx(SwiperSlide, {
+    ...props,
+    className: cn(className, {
+      "fr-image-gallery-item--contain": containMode && isThumbsSwiper
+    }),
+    children: isThumbsSwiper ? children : /*#__PURE__*/_jsx("div", {
+      className: cn("swiper-zoom-container", {
+        "fr-image-gallery-item--contain": containMode
+      }),
+      children: children
+    })
+  });
+}
+ImageGalleryItem.displayName = "SwiperSlide";

package/lib/components/modals/image-gallery/internal/BaseGallery.d.ts

@@ -0,0 +1,17 @@
+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, children, }: BaseGalleryProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/modals/image-gallery/internal/BaseGallery.js

@@ -0,0 +1,65 @@
+import { useMemo, useState } from "react";
+import ImageGalleryContext from "../ImageGalleryContext.js";
+import ImageGalleryItem from "../image-gallery-item/ImageGalleryItem.js";
+import ImageGalleryThumbsSwiper from "../ImageGalleryThumbsSwiper.js";
+import ImageGallerySwiper from "../ImageGallerySwiper.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export default function BaseGallery(_ref) {
+  let {
+    images,
+    thumbnailImages,
+    onSlideChanged,
+    startIndex,
+    children
+  } = _ref;
+  const [thumbsSwiper, setThumbsSwiper] = useState(null);
+  const contextValue = useMemo(() => ({
+    thumbsSwiper,
+    setThumbsSwiper,
+    onSlideChanged,
+    startIndex
+  }), [thumbsSwiper, setThumbsSwiper, onSlideChanged, startIndex]);
+  return /*#__PURE__*/_jsx(ImageGalleryContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx("div", {
+      className: "fwe-image-gallery-wrapper",
+      children: children || /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(ImageGallerySwiper, {
+          children: images?.map(_ref2 => {
+            let {
+              containMode,
+              alt,
+              content,
+              ...image
+            } = _ref2;
+            return /*#__PURE__*/_jsx(ImageGalleryItem, {
+              containMode: containMode,
+              children: /*#__PURE__*/_jsx("img", {
+                ...image,
+                className: image.className,
+                alt: alt
+              })
+            }, image.src);
+          })
+        }), thumbnailImages && /*#__PURE__*/_jsx(ImageGalleryThumbsSwiper, {
+          children: thumbnailImages.map(_ref3 => {
+            let {
+              containMode,
+              alt,
+              content,
+              ...image
+            } = _ref3;
+            return /*#__PURE__*/_jsx(ImageGalleryItem, {
+              containMode: containMode,
+              children: /*#__PURE__*/_jsx("img", {
+                ...image,
+                className: image.className,
+                alt: alt
+              })
+            }, image.src);
+          })
+        })]
+      })
+    })
+  });
+}

package/{dist → lib}/components/modals/image-gallery/internal/CloseButton.d.ts

@@ -2,5 +2,5 @@ interface CloseButtonProps {
     onClose?: () => void;
     showScaleButton?: boolean;
 }
-export declare function CloseButton({ onClose, showScaleButton }: CloseButtonProps): import("react/jsx-runtime").JSX.Element;
+export default function CloseButton({ onClose, showScaleButton }: CloseButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/modals/image-gallery/internal/CloseButton.js

@@ -0,0 +1,17 @@
+import cn from "classnames";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function CloseButton(_ref) {
+  let {
+    onClose,
+    showScaleButton
+  } = _ref;
+  return /*#__PURE__*/_jsx("button", {
+    type: "button",
+    "aria-label": "close",
+    className: cn("fwe-image-gallery-close-btn", {
+      "fwe-ml-auto": !showScaleButton,
+      "fwe-ml-3": showScaleButton
+    }),
+    onClick: onClose
+  });
+}

package/lib/components/modals/image-gallery/internal/ImageGalleryContainer.d.ts

@@ -0,0 +1,6 @@
+interface ImageGalleryContainerProps {
+    children: React.ReactNode;
+    descriptiveContent?: boolean;
+}
+export default function ImageGalleryContainer({ children, descriptiveContent, }: ImageGalleryContainerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/modals/image-gallery/internal/ImageGalleryContainer.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export default function ImageGalleryContainer(_ref) {
+  let {
+    children,
+    descriptiveContent
+  } = _ref;
+  return descriptiveContent ? /*#__PURE__*/_jsx("div", {
+    className: "fwe-image-gallery-container",
+    children: children
+  }) : /*#__PURE__*/_jsx(_Fragment, {
+    children: children
+  });
+}

package/{dist → lib}/components/modals/image-gallery/internal/ImageGalleryPagination.d.ts

@@ -1,5 +1,6 @@
-export interface ImageGalleryPaginationProps {
+interface ImageGalleryPaginationProps {
     currentIndex: number;
     length?: number;
 }
-export declare function ImageGalleryPagination({ currentIndex, length, }: ImageGalleryPaginationProps): import("react/jsx-runtime").JSX.Element;
+export default function ImageGalleryPagination({ currentIndex, length, }: ImageGalleryPaginationProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/modals/image-gallery/internal/ImageGalleryPagination.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export default function ImageGalleryPagination(_ref) {
+  let {
+    currentIndex,
+    length
+  } = _ref;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: length && /*#__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"
+      })]
+    })
+  });
+}

package/lib/components/modals/image-gallery/internal/ScaleButton.d.ts

@@ -0,0 +1,5 @@
+interface ScaleButtonProps {
+    onScaleChange?: (value: boolean) => void;
+}
+export default function ScaleButton({ onScaleChange }: ScaleButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/modals/image-gallery/internal/ScaleButton.js

@@ -0,0 +1,19 @@
+import { useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ScaleButton(_ref) {
+  let {
+    onScaleChange
+  } = _ref;
+  const [isScaled, setScaled] = useState(false);
+  function handleScale() {
+    const newScaled = !isScaled;
+    setScaled(newScaled);
+    onScaleChange?.(newScaled);
+  }
+  return /*#__PURE__*/_jsx("button", {
+    type: "button",
+    "aria-label": "scale up",
+    className: "fwe-image-gallery-scale-btn fwe-ml-auto",
+    onClick: handleScale
+  });
+}