@zipkito/gallery 1.0.1

package/dist/index.js

@@ -0,0 +1,900 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  GALLERY_TYPE: () => GALLERY_TYPE,
+  IframeGallery: () => IframeGallery,
+  MDXGallery: () => MDXGallery,
+  SlideGallery: () => SlideGallery
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/MDXGallery/MDXGallery.tsx
+var runtime = __toESM(require("react/jsx-runtime"));
+var import_mdx = require("@mdx-js/mdx");
+var import_shared = require("@zipkito/shared");
+var import_material2 = require("@mui/material");
+var import_react = require("react");
+
+// src/MDXGallery/MDXGallery.styled.ts
+var import_styles = require("@mui/material/styles");
+var import_material = require("@mui/material");
+var MDXGalleryRoot = (0, import_styles.styled)("div", {
+  name: "MDXGallery",
+  slot: "Root"
+})(({ theme }) => ({
+  height: "100%",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  padding: "24px",
+  background: "radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 45%)",
+  scrollbarGutter: "stable",
+  scrollbarColor: `${theme.palette.primary.main} rgba(255, 255, 255, 0.3)`,
+  scrollbarWidth: "thin",
+  position: "relative",
+  overflowX: "hidden",
+  overflowY: "auto"
+}));
+var MDXGalleryLoadingMessage = (0, import_styles.styled)(import_material.Typography, {
+  name: "MDXGallery",
+  slot: "LoadingMessage"
+})(() => ({
+  textAlign: "center",
+  padding: "40px",
+  color: "#666"
+}));
+var MDXGalleryErrorMessage = (0, import_styles.styled)(import_material.Typography, {
+  name: "MDXGallery",
+  slot: "ErrorMessage"
+})(() => ({
+  textAlign: "center",
+  padding: "40px",
+  color: "#d32f2f"
+}));
+
+// src/MDXGallery/MDXGallery.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var MDXGallery = (0, import_react.memo)((props) => {
+  const { gallery, mdxContext, actions, slots = {}, slotProps = {}, overlayProps = {}, sx } = props;
+  const [Content, setContent] = (0, import_react.useState)(null);
+  const [status, setStatus] = (0, import_react.useState)("idle");
+  const [error, setError] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    if (!gallery.visible || !gallery.file) {
+      setStatus("idle");
+      setContent(null);
+      setError(null);
+      return;
+    }
+    let cancelled = false;
+    const load = async () => {
+      try {
+        setStatus("loading");
+        setError(null);
+        const source = await mdxContext.loadSource(gallery.file);
+        const compiled = await (0, import_mdx.compile)(source, {
+          outputFormat: "function-body",
+          providerImportSource: "@mdx-js/react"
+        });
+        const evaluated = await (0, import_mdx.run)(String(compiled), {
+          ...runtime,
+          useMDXComponents: () => mdxContext.components ?? {}
+        });
+        if (!cancelled && typeof evaluated.default === "function") {
+          setContent(() => evaluated.default);
+          setStatus("ready");
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : "Failed to load MDX");
+          setStatus("error");
+        }
+      }
+    };
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, [gallery.file, gallery.visible, mdxContext]);
+  if (!gallery.visible) return null;
+  const Root = slots.root ?? MDXGalleryRoot;
+  const Container = slots.container ?? import_material2.Container;
+  const LoadingMessage = slots.loadingMessage ?? MDXGalleryLoadingMessage;
+  const ErrorMessage = slots.errorMessage ?? MDXGalleryErrorMessage;
+  const rootProps = (0, import_react.useMemo)(
+    () => ({
+      ...slotProps.root,
+      sx: (0, import_shared.getSlotSx)("root", sx)
+    }),
+    [slotProps.root, sx]
+  );
+  const containerProps = (0, import_react.useMemo)(
+    () => ({
+      ...slotProps.container,
+      sx: (0, import_shared.getSlotSx)("container", sx)
+    }),
+    [slotProps.container, sx]
+  );
+  const loadingMessageProps = (0, import_react.useMemo)(
+    () => ({
+      ...slotProps.loadingMessage,
+      sx: (0, import_shared.getSlotSx)("loadingMessage", sx)
+    }),
+    [slotProps.loadingMessage, sx]
+  );
+  const errorMessageProps = (0, import_react.useMemo)(
+    () => ({
+      ...slotProps.errorMessage,
+      sx: (0, import_shared.getSlotSx)("errorMessage", sx)
+    }),
+    [slotProps.errorMessage, sx]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_shared.Overlay, { visible: gallery.visible, ...overlayProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Container, { maxWidth: "xl", ...containerProps, children: [
+      status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingMessage, { variant: "subh2", ...loadingMessageProps, children: "Loading content..." }),
+      status === "error" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ErrorMessage, { variant: "subh2", ...errorMessageProps, children: [
+        "Error loading content: ",
+        error
+      ] }),
+      status === "ready" && Content && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, {})
+    ] }) }),
+    actions
+  ] });
+});
+MDXGallery.displayName = "MDXGallery";
+
+// src/SlideGallery/SlideGallery.tsx
+var import_react6 = require("react");
+var import_shared4 = require("@zipkito/shared");
+
+// src/ImageSlider/ImageSlider.tsx
+var import_material4 = require("@mui/material");
+var import_lucide_react2 = require("lucide-react");
+var import_shared3 = require("@zipkito/shared");
+var import_react4 = require("react");
+
+// src/ImageSlider/ImageSlider.styled.ts
+var import_styles2 = require("@mui/material/styles");
+var ImageSliderRoot = (0, import_styles2.styled)("div", {
+  name: "ImageSlider",
+  slot: "Root"
+})(() => ({
+  width: "100%",
+  height: "100%",
+  maxWidth: "100%",
+  maxHeight: "100%",
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  minHeight: 0,
+  position: "relative",
+  overflow: "hidden",
+  boxSizing: "border-box"
+}));
+var ImageSliderSliderWrapper = (0, import_styles2.styled)("div", {
+  name: "ImageSlider",
+  slot: "SliderWrapper"
+})(() => ({
+  flex: "1 1 auto",
+  minHeight: 0,
+  minWidth: 0,
+  display: "flex",
+  position: "relative",
+  overflow: "hidden",
+  width: "100%",
+  height: "100%",
+  maxWidth: "100%",
+  maxHeight: "100%",
+  boxSizing: "border-box",
+  "@media (max-width: 768px)": {
+    minHeight: 0,
+    minWidth: 0
+  }
+}));
+var ImageSliderSlidesWrapper = (0, import_styles2.styled)("div", {
+  name: "ImageSlider",
+  slot: "SlidesWrapper"
+})(({ $currentSlide, $transitionDuration }) => ({
+  display: "flex",
+  width: "100%",
+  height: "100%",
+  maxHeight: "100%",
+  transform: `translateX(-${$currentSlide * 100}%)`,
+  transition: `transform ${$transitionDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+  willChange: "transform",
+  position: "relative"
+}));
+var ImageSliderSlideItem = (0, import_styles2.styled)("div", {
+  name: "ImageSlider",
+  slot: "SlideItem"
+})(({ $isActive }) => ({
+  minWidth: "100%",
+  width: "100%",
+  height: "100%",
+  maxHeight: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  opacity: $isActive ? 1 : 0.7,
+  transition: "opacity 0.3s",
+  padding: "0",
+  overflow: "hidden",
+  position: "relative",
+  boxSizing: "border-box",
+  "@media (max-width: 768px)": {
+    padding: "0"
+  }
+}));
+var ImageSliderSlideContent = (0, import_styles2.styled)("div", {
+  name: "ImageSlider",
+  slot: "SlideContent"
+})(() => ({
+  width: "100%",
+  height: "100%",
+  maxWidth: "100%",
+  maxHeight: "100%",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "16px",
+  boxSizing: "border-box",
+  overflowY: "auto",
+  overflowX: "hidden",
+  position: "relative",
+  "&::-webkit-scrollbar": {
+    width: "6px"
+  },
+  "&::-webkit-scrollbar-track": {
+    background: "transparent"
+  },
+  "&::-webkit-scrollbar-thumb": {
+    background: "rgba(255, 255, 255, 0.3)",
+    borderRadius: "3px",
+    "&:hover": {
+      background: "rgba(255, 255, 255, 0.5)"
+    }
+  }
+}));
+var ImageSliderImageWrapper = (0, import_styles2.styled)("div", {
+  name: "ImageSlider",
+  slot: "ImageWrapper"
+})(() => ({
+  flex: "1 1 auto",
+  minHeight: "0",
+  minWidth: "0",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "100%",
+  maxWidth: "100%",
+  maxHeight: "100%",
+  overflow: "hidden",
+  position: "relative"
+}));
+var ImageSliderSlideImage = (0, import_styles2.styled)("img", {
+  name: "ImageSlider",
+  slot: "SlideImage"
+})(() => ({
+  maxWidth: "100%",
+  maxHeight: "100%",
+  width: "100%",
+  height: "100%",
+  objectFit: "contain",
+  userSelect: "none",
+  pointerEvents: "none",
+  display: "block",
+  position: "relative",
+  "@media (max-width: 768px)": {
+    maxWidth: "95%",
+    maxHeight: "95%"
+  },
+  "@media (max-width: 480px)": {
+    maxWidth: "90%",
+    maxHeight: "90%"
+  },
+  "@media (orientation: landscape) and (max-height: 600px)": {
+    maxHeight: "85%"
+  }
+}));
+var ImageSliderTextWrapper = (0, import_styles2.styled)("div", {
+  name: "ImageSlider",
+  slot: "TextWrapper"
+})(() => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "flex-start",
+  width: "100%",
+  maxWidth: "800px",
+  flexShrink: 0,
+  gap: "8px",
+  padding: "0 16px",
+  boxSizing: "border-box",
+  minWidth: "0",
+  "@media (max-width: 768px)": {
+    maxWidth: "100%",
+    padding: "0 8px",
+    gap: "6px"
+  },
+  "@media (max-width: 480px)": {
+    padding: "0 4px",
+    gap: "4px"
+  },
+  "@media (orientation: landscape) and (max-height: 600px)": {
+    gap: "4px",
+    padding: "0 8px"
+  }
+}));
+var ImageSliderSlideTitle = (0, import_styles2.styled)("h3", {
+  name: "ImageSlider",
+  slot: "SlideTitle"
+})(() => ({
+  fontWeight: 700,
+  fontSize: "clamp(20px, 4vw, 32px)",
+  lineHeight: "1.4",
+  textAlign: "center",
+  letterSpacing: "0.01em",
+  color: "#ffffff",
+  margin: 0,
+  wordWrap: "break-word",
+  overflowWrap: "break-word",
+  "@media (max-width: 768px)": {
+    fontSize: "clamp(18px, 4.5vw, 24px)"
+  },
+  "@media (max-width: 480px)": {
+    fontSize: "clamp(16px, 5vw, 20px)"
+  },
+  "@media (orientation: landscape) and (max-height: 600px)": {
+    fontSize: "clamp(16px, 3vw, 22px)"
+  }
+}));
+var ImageSliderSlideDescription = (0, import_styles2.styled)("p", {
+  name: "ImageSlider",
+  slot: "SlideDescription"
+})(() => ({
+  fontWeight: 400,
+  fontSize: "clamp(14px, 2.5vw, 16px)",
+  lineHeight: "1.6",
+  textAlign: "center",
+  color: "#ffffff",
+  maxWidth: "100%",
+  margin: 0,
+  wordWrap: "break-word",
+  overflowWrap: "break-word",
+  "@media (max-width: 768px)": {
+    fontSize: "clamp(13px, 3vw, 15px)",
+    lineHeight: "1.5"
+  },
+  "@media (max-width: 480px)": {
+    fontSize: "clamp(12px, 3.5vw, 14px)"
+  },
+  "@media (orientation: landscape) and (max-height: 600px)": {
+    fontSize: "clamp(12px, 2vw, 14px)",
+    lineHeight: "1.4"
+  }
+}));
+var ImageSliderSlideEmbed = (0, import_styles2.styled)("embed", {
+  name: "ImageSlider",
+  slot: "SlideEmbed"
+})(() => ({
+  width: "100%",
+  height: "100%",
+  display: "block",
+  margin: "0 auto",
+  borderRadius: "10px",
+  "@media (max-width: 640px), (max-width: 900px) and (orientation: landscape)": {
+    display: "none"
+  }
+}));
+var ImageSliderSlideLink = (0, import_styles2.styled)("a", {
+  name: "ImageSlider",
+  slot: "SlideLink"
+})(() => ({
+  display: "none",
+  backgroundColor: "#00263E",
+  border: `2px solid #00263E`,
+  color: "#ffffff",
+  padding: "8px 16px",
+  borderRadius: "8px",
+  columnGap: "12px",
+  flexFlow: "row nowrap",
+  alignItems: "center",
+  fontWeight: 400,
+  fontSize: "clamp(14px, 2.5vw, 16px)",
+  lineHeight: "1.6",
+  "@media (max-width: 640px), (max-width: 900px) and (orientation: landscape)": {
+    display: "flex"
+  },
+  "& path": {
+    stroke: "#ffffff"
+  }
+}));
+
+// src/ImageSlider/components/ImageSliderControls/ImageSliderControls.tsx
+var import_react3 = require("react");
+var import_shared2 = require("@zipkito/shared");
+var import_lucide_react = require("lucide-react");
+
+// src/ImageSlider/components/ImageSliderControls/ImageSliderControls.styled.ts
+var import_styles3 = require("@mui/material/styles");
+var ImageSliderControlsRoot = (0, import_styles3.styled)("div", {
+  name: "ImageSliderControls",
+  slot: "Root"
+})(() => ({
+  width: "100%",
+  height: "55px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "16px",
+  marginTop: "16px",
+  flexShrink: 0,
+  padding: "0 8px",
+  "@media (max-width: 768px)": {
+    gap: "12px",
+    marginTop: "12px"
+  },
+  "@media (max-width: 480px)": {
+    gap: "8px",
+    marginTop: "8px"
+  }
+}));
+var ImageSliderControlsDotsWrapper = (0, import_styles3.styled)("div", {
+  name: "ImageSliderControls",
+  slot: "DotsWrapper"
+})(() => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "10px"
+}));
+var ImageSliderControlsDot = (0, import_styles3.styled)("div", {
+  name: "ImageSliderControls",
+  slot: "Dot"
+})(({ $active }) => ({
+  width: $active ? "12px" : "8px",
+  height: $active ? "12px" : "8px",
+  background: $active ? "#fff" : "#5b5b5b",
+  borderRadius: "50%",
+  cursor: "pointer",
+  transition: "0.2s",
+  outline: "none",
+  "&:focus": { boxShadow: "0 0 0 2px #fff" }
+}));
+
+// src/ImageSlider/components/ArrowButton/ArrowButton.tsx
+var import_material3 = require("@mui/material");
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ArrowButton = (0, import_react2.memo)(({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.IconButton, { ...props, color: "default", children }));
+ArrowButton.displayName = "ArrowButton";
+
+// src/ImageSlider/components/ImageSliderControls/ImageSliderControls.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ImageSliderControls = (0, import_react3.memo)((props) => {
+  const {
+    showArrows,
+    showDots,
+    memoizedSlides,
+    currentSlide,
+    canGoPrev,
+    canGoNext,
+    prev,
+    next,
+    goToSlide,
+    slots = {},
+    slotProps = {},
+    sx
+  } = props;
+  const Root = slots.root ?? ImageSliderControlsRoot;
+  const DotsWrapper = slots.dotsWrapper ?? ImageSliderControlsDotsWrapper;
+  const Dot = slots.dot ?? ImageSliderControlsDot;
+  const LeftArrow = slots.leftArrow;
+  const RightArrow = slots.rightArrow;
+  const rootProps = (0, import_react3.useMemo)(
+    () => ({
+      ...slotProps.root,
+      sx: (0, import_shared2.getSlotSx)("root", sx)
+    }),
+    [slotProps.root, sx]
+  );
+  const dotsWrapperProps = (0, import_react3.useMemo)(
+    () => ({
+      ...slotProps.dotsWrapper,
+      sx: (0, import_shared2.getSlotSx)("dotsWrapper", sx)
+    }),
+    [slotProps.dotsWrapper, sx]
+  );
+  const dotProps = (0, import_react3.useMemo)(
+    () => ({
+      ...slotProps.dot,
+      sx: (0, import_shared2.getSlotSx)("dot", sx)
+    }),
+    [slotProps.dot, sx]
+  );
+  const leftArrowProps = (0, import_react3.useMemo)(
+    () => ({
+      ...slotProps.leftArrow,
+      sx: (0, import_shared2.getSlotSx)("leftArrow", sx)
+    }),
+    [slotProps.leftArrow, sx]
+  );
+  const rightArrowProps = (0, import_react3.useMemo)(
+    () => ({
+      ...slotProps.rightArrow,
+      sx: (0, import_shared2.getSlotSx)("rightArrow", sx)
+    }),
+    [slotProps.rightArrow, sx]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Root, { ...rootProps, children: [
+    showArrows && LeftArrow ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LeftArrow, { disabled: !canGoPrev, onClick: prev, ...leftArrowProps }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrowButton, { disabled: !canGoPrev, onClick: prev, ...leftArrowProps, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ArrowLeftIcon, { size: 24 }) }),
+    showDots && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DotsWrapper, { ...dotsWrapperProps, children: memoizedSlides.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Dot,
+      {
+        $active: i === currentSlide,
+        onClick: () => goToSlide(i),
+        role: "button",
+        onKeyDown: (e) => e.key === "Enter" || e.key === " " && goToSlide(i),
+        ...dotProps
+      },
+      i
+    )) }),
+    showArrows && RightArrow ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RightArrow, { disabled: !canGoNext, onClick: next, ...rightArrowProps }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrowButton, { disabled: !canGoNext, onClick: next, ...rightArrowProps, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ArrowRightIcon, { size: 24 }) })
+  ] });
+});
+ImageSliderControls.displayName = "ImageSliderControls";
+
+// src/ImageSlider/ImageSlider.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react5 = require("react");
+var ImageSlider = (props) => {
+  const {
+    loop = false,
+    showDots = true,
+    showArrows = true,
+    slides,
+    className,
+    transitionDuration = 500,
+    onSlideChange,
+    slots = {},
+    slotProps = {},
+    controlsProps = {},
+    sx
+  } = props;
+  const isTransitioningRef = (0, import_react4.useRef)(false);
+  const slidesWrapperRef = (0, import_react4.useRef)(null);
+  const [, forceUpdate] = (0, import_react4.useState)(0);
+  const [currentSlide, setCurrentSlide] = (0, import_react4.useState)(0);
+  const slidesCount = slides.length;
+  const canGoNext = loop || currentSlide < slidesCount - 1;
+  const canGoPrev = loop || currentSlide > 0;
+  const goToSlide = (0, import_react4.useCallback)(
+    (index) => {
+      if (isTransitioningRef.current || index === currentSlide || slidesCount === 0) return;
+      let newIndex = index;
+      if (loop) {
+        if (index < 0) newIndex = slidesCount - 1;
+        if (index >= slidesCount) newIndex = 0;
+      }
+      if (newIndex < 0 || newIndex >= slidesCount) return;
+      isTransitioningRef.current = true;
+      setCurrentSlide(newIndex);
+      onSlideChange?.(newIndex);
+      setTimeout(() => {
+        isTransitioningRef.current = false;
+      }, transitionDuration);
+    },
+    [currentSlide, slidesCount, transitionDuration, onSlideChange, loop]
+  );
+  const next = (0, import_react4.useCallback)(() => goToSlide(currentSlide + 1), [currentSlide, goToSlide]);
+  const prev = (0, import_react4.useCallback)(() => goToSlide(currentSlide - 1), [currentSlide, goToSlide]);
+  (0, import_react4.useEffect)(() => {
+    const handleResize = () => forceUpdate((prev2) => prev2 + 1);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    const onKey = (e) => {
+      if (e.key === "ArrowLeft") prev();
+      if (e.key === "ArrowRight") next();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [prev, next]);
+  (0, import_react4.useEffect)(() => {
+    const wrapper = slidesWrapperRef.current;
+    if (!wrapper) return;
+    let startX = null;
+    const onTouchStart = (e) => {
+      startX = e.touches[0].clientX;
+    };
+    const onTouchEnd = (e) => {
+      if (startX === null) return;
+      const deltaX = e.changedTouches[0].clientX - startX;
+      if (Math.abs(deltaX) > 50) {
+        if (deltaX > 0) prev();
+        else next();
+      }
+      startX = null;
+    };
+    wrapper.addEventListener("touchstart", onTouchStart);
+    wrapper.addEventListener("touchend", onTouchEnd);
+    return () => {
+      wrapper.removeEventListener("touchstart", onTouchStart);
+      wrapper.removeEventListener("touchend", onTouchEnd);
+    };
+  }, [prev, next]);
+  const memoizedSlides = (0, import_react4.useMemo)(() => slides, [slides]);
+  if (slidesCount === 0) return null;
+  const Root = slots.root ?? ImageSliderRoot;
+  const SliderWrapper = slots.sliderWrapper ?? ImageSliderSliderWrapper;
+  const SlidesWrapper = slots.slidesWrapper ?? ImageSliderSlidesWrapper;
+  const SlideItem = slots.slideItem ?? ImageSliderSlideItem;
+  const SlideContent = slots.slideContent ?? ImageSliderSlideContent;
+  const ImageWrapper = slots.imageWrapper ?? ImageSliderImageWrapper;
+  const SlideImage = slots.slideImage ?? ImageSliderSlideImage;
+  const TextWrapper = slots.textWrapper ?? ImageSliderTextWrapper;
+  const SlideTitle = slots.slideTitle ?? ImageSliderSlideTitle;
+  const SlideDescription = slots.slideDescription ?? ImageSliderSlideDescription;
+  const SlideEmbed = slots.slideEmbed ?? ImageSliderSlideEmbed;
+  const SlideLink = slots.slideLink ?? ImageSliderSlideLink;
+  const EmptyControls = slots.emptyControls ?? (({ height, mt }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.Box, { height, mt }));
+  const rootProps = (0, import_react4.useMemo)(
+    () => ({
+      ...slotProps.root,
+      sx: (0, import_shared3.getSlotSx)("root", sx)
+    }),
+    [slotProps.root, sx]
+  );
+  const sliderWrapperProps = (0, import_react4.useMemo)(
+    () => ({
+      ...slotProps.sliderWrapper,
+      sx: (0, import_shared3.getSlotSx)("sliderWrapper", sx)
+    }),
+    [slotProps.sliderWrapper, sx]
+  );
+  const slidesWrapperProps = (0, import_react4.useMemo)(
+    () => ({
+      ...slotProps.slidesWrapper,
+      sx: (0, import_shared3.getSlotSx)("slidesWrapper", sx)
+    }),
+    [slotProps.slidesWrapper, sx]
+  );
+  const slideItemProps = (0, import_react4.useMemo)(
+    () => ({
+      ...slotProps.slideItem,
+      sx: (0, import_shared3.getSlotSx)("slideItem", sx)
+    }),
+    [slotProps.slideItem, sx]
+  );
+  const slideContentProps = (0, import_react4.useMemo)(
+    () => ({
+      ...slotProps.slideContent,
+      sx: (0, import_shared3.getSlotSx)("slideContent", sx)
+    }),
+    [slotProps.slideContent, sx]
+  );
+  const imageWrapperProps = (0, import_react4.useMemo)(
+    () => ({
+      ...slotProps.imageWrapper,
+      sx: (0, import_shared3.getSlotSx)("imageWrapper", sx)
+    }),
+    [slotProps.imageWrapper, sx]
+  );
+  const slideImageProps = (0, import_react4.useMemo)(
+    () => ({
+      ...slotProps.slideImage,
+      sx: (0, import_shared3.getSlotSx)("slideImage", sx)
+    }),
+    [slotProps.slideImage, sx]
+  );
+  const textWrapperProps = (0, import_react4.useMemo)(
+    () => ({
+      ...slotProps.textWrapper,
+      sx: (0, import_shared3.getSlotSx)("textWrapper", sx)
+    }),
+    [slotProps.textWrapper, sx]
+  );
+  const slideTitleProps = (0, import_react4.useMemo)(
+    () => ({
+      ...slotProps.slideTitle,
+      sx: (0, import_shared3.getSlotSx)("slideTitle", sx)
+    }),
+    [slotProps.slideTitle, sx]
+  );
+  const slideDescriptionProps = (0, import_react4.useMemo)(
+    () => ({
+      ...slotProps.slideDescription,
+      sx: (0, import_shared3.getSlotSx)("slideDescription", sx)
+    }),
+    [slotProps.slideDescription, sx]
+  );
+  const slideEmbedProps = (0, import_react4.useMemo)(
+    () => ({
+      ...slotProps.slideEmbed,
+      sx: (0, import_shared3.getSlotSx)("slideEmbed", sx)
+    }),
+    [slotProps.slideEmbed, sx]
+  );
+  const slideLinkProps = (0, import_react4.useMemo)(
+    () => ({
+      ...slotProps.slideLink,
+      sx: (0, import_shared3.getSlotSx)("slideLink", sx)
+    }),
+    [slotProps.slideLink, sx]
+  );
+  const emptyControlsProps = (0, import_react4.useMemo)(
+    () => ({
+      ...slotProps.emptyControls,
+      sx: (0, import_shared3.getSlotSx)("emptyControls", sx)
+    }),
+    [slotProps.emptyControls, sx]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Root, { className, ...rootProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SliderWrapper, { ...sliderWrapperProps, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      SlidesWrapper,
+      {
+        ...slidesWrapperProps,
+        ref: slidesWrapperRef,
+        $currentSlide: currentSlide,
+        $transitionDuration: transitionDuration,
+        children: memoizedSlides.map((slide, idx) => /* @__PURE__ */ (0, import_react5.createElement)(SlideItem, { ...slideItemProps, key: idx, $isActive: idx === currentSlide }, /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SlideContent, { ...slideContentProps, children: slide.type !== "PDF" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ImageWrapper, { ...imageWrapperProps, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            SlideImage,
+            {
+              src: slide.image,
+              alt: slide.alt,
+              loading: idx === 0 ? "eager" : "lazy",
+              draggable: false,
+              tabIndex: idx === currentSlide ? 0 : -1,
+              ...slideImageProps
+            }
+          ) }),
+          (slide.title || slide.description) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(TextWrapper, { ...textWrapperProps, children: [
+            slide.title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SlideTitle, { ...slideTitleProps, children: slide.title }),
+            slide.description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SlideDescription, { ...slideDescriptionProps, children: slide.description })
+          ] })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SlideEmbed, { src: slide.file, ...slideEmbedProps }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(SlideLink, { href: slide.file, target: "_blank", rel: "noopener noreferrer", ...slideLinkProps, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.ExternalLink, { size: 24, color: "#ffffff" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: "Open file in the new tab" })
+          ] })
+        ] }) })))
+      }
+    ) }),
+    slidesCount > 1 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ImageSliderControls,
+      {
+        showArrows,
+        showDots,
+        memoizedSlides,
+        currentSlide,
+        goToSlide,
+        canGoPrev,
+        canGoNext,
+        prev,
+        next,
+        ...controlsProps
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EmptyControls, { height: 55, mt: 2, ...emptyControlsProps })
+  ] });
+};
+ImageSlider.displayName = "ImageSlider";
+
+// src/SlideGallery/SlideGallery.styled.ts
+var import_styles4 = require("@mui/material/styles");
+var SlideGalleryRoot = (0, import_styles4.styled)("div", {
+  name: "SlideGallery",
+  slot: "Root"
+})(() => ({
+  flex: 1,
+  minHeight: 0,
+  display: "flex",
+  width: "100%",
+  padding: "16px",
+  borderRadius: "16px"
+}));
+
+// src/SlideGallery/SlideGallery.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var SlideGallery = (0, import_react6.memo)((props) => {
+  const { gallery, slots = {}, slotProps = {}, imageSliderProps, controlsProps, overlayProps, sx } = props;
+  const slides = (0, import_react6.useMemo)(
+    () => gallery.slides.map((slide, idx) => ({
+      ...slide,
+      alt: slide.title ?? `Slide ${idx + 1}`
+    })),
+    [gallery.slides]
+  );
+  if (!gallery.visible || slides.length === 0) return null;
+  const Root = slots.root ?? SlideGalleryRoot;
+  const rootProps = (0, import_react6.useMemo)(
+    () => ({
+      ...slotProps.root,
+      sx: (0, import_shared4.getSlotSx)("root", sx)
+    }),
+    [slotProps.root, sx]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_shared4.Overlay, { visible: gallery.visible, ...overlayProps, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ImageSlider, { slides, ...imageSliderProps, controlsProps }) }) });
+});
+SlideGallery.displayName = "SlideGallery";
+
+// src/IframeGallery/IframeGallery.tsx
+var import_react7 = require("react");
+var import_shared5 = require("@zipkito/shared");
+
+// src/IframeGallery/IframeGallery.styled.ts
+var import_styles5 = require("@mui/material/styles");
+var IframeGalleryFrame = (0, import_styles5.styled)("iframe", {
+  name: "IframeGallery",
+  slot: "Frame"
+})(() => ({
+  border: 0,
+  width: "100%",
+  height: "100%",
+  display: "block",
+  background: "transparent",
+  borderRadius: 16,
+  boxShadow: "0 12px 30px rgba(0, 0, 0, 0.25)"
+}));
+
+// src/IframeGallery/IframeGallery.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var IframeGallery = (0, import_react7.memo)((props) => {
+  const { gallery, actions, slots = {}, slotProps = {}, overlayProps = {}, sx } = props;
+  const src = (0, import_react7.useMemo)(() => gallery?.path, [gallery?.path]);
+  if (!gallery.visible || !src) return null;
+  const Frame = slots.frame ?? IframeGalleryFrame;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_shared5.Overlay, { visible: gallery.visible, ...overlayProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Frame, { src, sx, loading: "lazy", ...slotProps.frame }),
+    actions
+  ] });
+});
+IframeGallery.displayName = "IframeGallery";
+
+// src/types/galleries.ts
+var GALLERY_TYPE = {
+  Slide: "slide",
+  MDX: "mdx",
+  Iframe: "iframe"
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GALLERY_TYPE,
+  IframeGallery,
+  MDXGallery,
+  SlideGallery
+});
+//# sourceMappingURL=index.js.map