@zipkito/gallery 1.0.0

package/dist/index.mjs

@@ -0,0 +1,860 @@
+// src/MDXGallery/MDXGallery.tsx
+import * as runtime from "react/jsx-runtime";
+import { compile, run } from "@mdx-js/mdx";
+import { getSlotSx, Overlay } from "@zipkito/shared";
+import { Container as MuiContainer } from "@mui/material";
+import { memo, useEffect, useMemo, useState } from "react";
+
+// src/MDXGallery/MDXGallery.styled.ts
+import { styled } from "@mui/material/styles";
+import { Typography } from "@mui/material";
+var MDXGalleryRoot = 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 = styled(Typography, {
+  name: "MDXGallery",
+  slot: "LoadingMessage"
+})(() => ({
+  textAlign: "center",
+  padding: "40px",
+  color: "#666"
+}));
+var MDXGalleryErrorMessage = styled(Typography, {
+  name: "MDXGallery",
+  slot: "ErrorMessage"
+})(() => ({
+  textAlign: "center",
+  padding: "40px",
+  color: "#d32f2f"
+}));
+
+// src/MDXGallery/MDXGallery.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var MDXGallery = memo((props) => {
+  const { gallery, mdxContext, actions, slots = {}, slotProps = {}, overlayProps = {}, sx } = props;
+  const [Content, setContent] = useState(null);
+  const [status, setStatus] = useState("idle");
+  const [error, setError] = useState(null);
+  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 compile(source, {
+          outputFormat: "function-body",
+          providerImportSource: "@mdx-js/react"
+        });
+        const evaluated = await 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 ?? MuiContainer;
+  const LoadingMessage = slots.loadingMessage ?? MDXGalleryLoadingMessage;
+  const ErrorMessage = slots.errorMessage ?? MDXGalleryErrorMessage;
+  const rootProps = useMemo(
+    () => ({
+      ...slotProps.root,
+      sx: getSlotSx("root", sx)
+    }),
+    [slotProps.root, sx]
+  );
+  const containerProps = useMemo(
+    () => ({
+      ...slotProps.container,
+      sx: getSlotSx("container", sx)
+    }),
+    [slotProps.container, sx]
+  );
+  const loadingMessageProps = useMemo(
+    () => ({
+      ...slotProps.loadingMessage,
+      sx: getSlotSx("loadingMessage", sx)
+    }),
+    [slotProps.loadingMessage, sx]
+  );
+  const errorMessageProps = useMemo(
+    () => ({
+      ...slotProps.errorMessage,
+      sx: getSlotSx("errorMessage", sx)
+    }),
+    [slotProps.errorMessage, sx]
+  );
+  return /* @__PURE__ */ jsxs(Overlay, { visible: gallery.visible, ...overlayProps, children: [
+    /* @__PURE__ */ jsx(Root, { ...rootProps, children: /* @__PURE__ */ jsxs(Container, { maxWidth: "xl", ...containerProps, children: [
+      status === "loading" && /* @__PURE__ */ jsx(LoadingMessage, { variant: "subh2", ...loadingMessageProps, children: "Loading content..." }),
+      status === "error" && /* @__PURE__ */ jsxs(ErrorMessage, { variant: "subh2", ...errorMessageProps, children: [
+        "Error loading content: ",
+        error
+      ] }),
+      status === "ready" && Content && /* @__PURE__ */ jsx(Content, {})
+    ] }) }),
+    actions
+  ] });
+});
+MDXGallery.displayName = "MDXGallery";
+
+// src/SlideGallery/SlideGallery.tsx
+import { memo as memo4, useMemo as useMemo4 } from "react";
+import { getSlotSx as getSlotSx4, Overlay as Overlay2 } from "@zipkito/shared";
+
+// src/ImageSlider/ImageSlider.tsx
+import { Box } from "@mui/material";
+import { ExternalLink } from "lucide-react";
+import { getSlotSx as getSlotSx3 } from "@zipkito/shared";
+import { useState as useState2, useRef, useCallback, useMemo as useMemo3, useEffect as useEffect2 } from "react";
+
+// src/ImageSlider/ImageSlider.styled.ts
+import { styled as styled2 } from "@mui/material/styles";
+var ImageSliderRoot = styled2("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 = styled2("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 = styled2("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 = styled2("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 = styled2("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 = styled2("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 = styled2("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 = styled2("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 = styled2("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 = styled2("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 = styled2("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 = styled2("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
+import { memo as memo3, useMemo as useMemo2 } from "react";
+import { getSlotSx as getSlotSx2 } from "@zipkito/shared";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+
+// src/ImageSlider/components/ImageSliderControls/ImageSliderControls.styled.ts
+import { styled as styled3 } from "@mui/material/styles";
+var ImageSliderControlsRoot = styled3("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 = styled3("div", {
+  name: "ImageSliderControls",
+  slot: "DotsWrapper"
+})(() => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "10px"
+}));
+var ImageSliderControlsDot = styled3("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
+import { IconButton } from "@mui/material";
+import { memo as memo2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ArrowButton = memo2(({ children, ...props }) => /* @__PURE__ */ jsx2(IconButton, { ...props, color: "default", children }));
+ArrowButton.displayName = "ArrowButton";
+
+// src/ImageSlider/components/ImageSliderControls/ImageSliderControls.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var ImageSliderControls = memo3((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 = useMemo2(
+    () => ({
+      ...slotProps.root,
+      sx: getSlotSx2("root", sx)
+    }),
+    [slotProps.root, sx]
+  );
+  const dotsWrapperProps = useMemo2(
+    () => ({
+      ...slotProps.dotsWrapper,
+      sx: getSlotSx2("dotsWrapper", sx)
+    }),
+    [slotProps.dotsWrapper, sx]
+  );
+  const dotProps = useMemo2(
+    () => ({
+      ...slotProps.dot,
+      sx: getSlotSx2("dot", sx)
+    }),
+    [slotProps.dot, sx]
+  );
+  const leftArrowProps = useMemo2(
+    () => ({
+      ...slotProps.leftArrow,
+      sx: getSlotSx2("leftArrow", sx)
+    }),
+    [slotProps.leftArrow, sx]
+  );
+  const rightArrowProps = useMemo2(
+    () => ({
+      ...slotProps.rightArrow,
+      sx: getSlotSx2("rightArrow", sx)
+    }),
+    [slotProps.rightArrow, sx]
+  );
+  return /* @__PURE__ */ jsxs2(Root, { ...rootProps, children: [
+    showArrows && LeftArrow ? /* @__PURE__ */ jsx3(LeftArrow, { disabled: !canGoPrev, onClick: prev, ...leftArrowProps }) : /* @__PURE__ */ jsx3(ArrowButton, { disabled: !canGoPrev, onClick: prev, ...leftArrowProps, children: /* @__PURE__ */ jsx3(ArrowLeftIcon, { size: 24 }) }),
+    showDots && /* @__PURE__ */ jsx3(DotsWrapper, { ...dotsWrapperProps, children: memoizedSlides.map((_, i) => /* @__PURE__ */ jsx3(
+      Dot,
+      {
+        $active: i === currentSlide,
+        onClick: () => goToSlide(i),
+        role: "button",
+        onKeyDown: (e) => e.key === "Enter" || e.key === " " && goToSlide(i),
+        ...dotProps
+      },
+      i
+    )) }),
+    showArrows && RightArrow ? /* @__PURE__ */ jsx3(RightArrow, { disabled: !canGoNext, onClick: next, ...rightArrowProps }) : /* @__PURE__ */ jsx3(ArrowButton, { disabled: !canGoNext, onClick: next, ...rightArrowProps, children: /* @__PURE__ */ jsx3(ArrowRightIcon, { size: 24 }) })
+  ] });
+});
+ImageSliderControls.displayName = "ImageSliderControls";
+
+// src/ImageSlider/ImageSlider.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { createElement } from "react";
+var ImageSlider = (props) => {
+  const {
+    loop = false,
+    showDots = true,
+    showArrows = true,
+    slides,
+    className,
+    transitionDuration = 500,
+    onSlideChange,
+    slots = {},
+    slotProps = {},
+    controlsProps = {},
+    sx
+  } = props;
+  const isTransitioningRef = useRef(false);
+  const slidesWrapperRef = useRef(null);
+  const [, forceUpdate] = useState2(0);
+  const [currentSlide, setCurrentSlide] = useState2(0);
+  const slidesCount = slides.length;
+  const canGoNext = loop || currentSlide < slidesCount - 1;
+  const canGoPrev = loop || currentSlide > 0;
+  const goToSlide = 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 = useCallback(() => goToSlide(currentSlide + 1), [currentSlide, goToSlide]);
+  const prev = useCallback(() => goToSlide(currentSlide - 1), [currentSlide, goToSlide]);
+  useEffect2(() => {
+    const handleResize = () => forceUpdate((prev2) => prev2 + 1);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  useEffect2(() => {
+    const onKey = (e) => {
+      if (e.key === "ArrowLeft") prev();
+      if (e.key === "ArrowRight") next();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [prev, next]);
+  useEffect2(() => {
+    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 = useMemo3(() => 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__ */ jsx4(Box, { height, mt }));
+  const rootProps = useMemo3(
+    () => ({
+      ...slotProps.root,
+      sx: getSlotSx3("root", sx)
+    }),
+    [slotProps.root, sx]
+  );
+  const sliderWrapperProps = useMemo3(
+    () => ({
+      ...slotProps.sliderWrapper,
+      sx: getSlotSx3("sliderWrapper", sx)
+    }),
+    [slotProps.sliderWrapper, sx]
+  );
+  const slidesWrapperProps = useMemo3(
+    () => ({
+      ...slotProps.slidesWrapper,
+      sx: getSlotSx3("slidesWrapper", sx)
+    }),
+    [slotProps.slidesWrapper, sx]
+  );
+  const slideItemProps = useMemo3(
+    () => ({
+      ...slotProps.slideItem,
+      sx: getSlotSx3("slideItem", sx)
+    }),
+    [slotProps.slideItem, sx]
+  );
+  const slideContentProps = useMemo3(
+    () => ({
+      ...slotProps.slideContent,
+      sx: getSlotSx3("slideContent", sx)
+    }),
+    [slotProps.slideContent, sx]
+  );
+  const imageWrapperProps = useMemo3(
+    () => ({
+      ...slotProps.imageWrapper,
+      sx: getSlotSx3("imageWrapper", sx)
+    }),
+    [slotProps.imageWrapper, sx]
+  );
+  const slideImageProps = useMemo3(
+    () => ({
+      ...slotProps.slideImage,
+      sx: getSlotSx3("slideImage", sx)
+    }),
+    [slotProps.slideImage, sx]
+  );
+  const textWrapperProps = useMemo3(
+    () => ({
+      ...slotProps.textWrapper,
+      sx: getSlotSx3("textWrapper", sx)
+    }),
+    [slotProps.textWrapper, sx]
+  );
+  const slideTitleProps = useMemo3(
+    () => ({
+      ...slotProps.slideTitle,
+      sx: getSlotSx3("slideTitle", sx)
+    }),
+    [slotProps.slideTitle, sx]
+  );
+  const slideDescriptionProps = useMemo3(
+    () => ({
+      ...slotProps.slideDescription,
+      sx: getSlotSx3("slideDescription", sx)
+    }),
+    [slotProps.slideDescription, sx]
+  );
+  const slideEmbedProps = useMemo3(
+    () => ({
+      ...slotProps.slideEmbed,
+      sx: getSlotSx3("slideEmbed", sx)
+    }),
+    [slotProps.slideEmbed, sx]
+  );
+  const slideLinkProps = useMemo3(
+    () => ({
+      ...slotProps.slideLink,
+      sx: getSlotSx3("slideLink", sx)
+    }),
+    [slotProps.slideLink, sx]
+  );
+  const emptyControlsProps = useMemo3(
+    () => ({
+      ...slotProps.emptyControls,
+      sx: getSlotSx3("emptyControls", sx)
+    }),
+    [slotProps.emptyControls, sx]
+  );
+  return /* @__PURE__ */ jsxs3(Root, { className, ...rootProps, children: [
+    /* @__PURE__ */ jsx4(SliderWrapper, { ...sliderWrapperProps, children: /* @__PURE__ */ jsx4(
+      SlidesWrapper,
+      {
+        ...slidesWrapperProps,
+        ref: slidesWrapperRef,
+        $currentSlide: currentSlide,
+        $transitionDuration: transitionDuration,
+        children: memoizedSlides.map((slide, idx) => /* @__PURE__ */ createElement(SlideItem, { ...slideItemProps, key: idx, $isActive: idx === currentSlide }, /* @__PURE__ */ jsx4(SlideContent, { ...slideContentProps, children: slide.type !== "PDF" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsx4(ImageWrapper, { ...imageWrapperProps, children: /* @__PURE__ */ jsx4(
+            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__ */ jsxs3(TextWrapper, { ...textWrapperProps, children: [
+            slide.title && /* @__PURE__ */ jsx4(SlideTitle, { ...slideTitleProps, children: slide.title }),
+            slide.description && /* @__PURE__ */ jsx4(SlideDescription, { ...slideDescriptionProps, children: slide.description })
+          ] })
+        ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsx4(SlideEmbed, { src: slide.file, ...slideEmbedProps }),
+          /* @__PURE__ */ jsxs3(SlideLink, { href: slide.file, target: "_blank", rel: "noopener noreferrer", ...slideLinkProps, children: [
+            /* @__PURE__ */ jsx4(ExternalLink, { size: 24, color: "#ffffff" }),
+            /* @__PURE__ */ jsx4("p", { children: "Open file in the new tab" })
+          ] })
+        ] }) })))
+      }
+    ) }),
+    slidesCount > 1 ? /* @__PURE__ */ jsx4(
+      ImageSliderControls,
+      {
+        showArrows,
+        showDots,
+        memoizedSlides,
+        currentSlide,
+        goToSlide,
+        canGoPrev,
+        canGoNext,
+        prev,
+        next,
+        ...controlsProps
+      }
+    ) : /* @__PURE__ */ jsx4(EmptyControls, { height: 55, mt: 2, ...emptyControlsProps })
+  ] });
+};
+ImageSlider.displayName = "ImageSlider";
+
+// src/SlideGallery/SlideGallery.styled.ts
+import { styled as styled4 } from "@mui/material/styles";
+var SlideGalleryRoot = styled4("div", {
+  name: "SlideGallery",
+  slot: "Root"
+})(() => ({
+  flex: 1,
+  minHeight: 0,
+  display: "flex",
+  width: "100%",
+  padding: "16px",
+  borderRadius: "16px"
+}));
+
+// src/SlideGallery/SlideGallery.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var SlideGallery = memo4((props) => {
+  const { gallery, slots = {}, slotProps = {}, imageSliderProps, controlsProps, overlayProps, sx } = props;
+  const slides = useMemo4(
+    () => 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 = useMemo4(
+    () => ({
+      ...slotProps.root,
+      sx: getSlotSx4("root", sx)
+    }),
+    [slotProps.root, sx]
+  );
+  return /* @__PURE__ */ jsx5(Overlay2, { visible: gallery.visible, ...overlayProps, children: /* @__PURE__ */ jsx5(Root, { ...rootProps, children: /* @__PURE__ */ jsx5(ImageSlider, { slides, ...imageSliderProps, controlsProps }) }) });
+});
+SlideGallery.displayName = "SlideGallery";
+
+// src/IframeGallery/IframeGallery.tsx
+import { memo as memo5, useMemo as useMemo5 } from "react";
+import { Overlay as Overlay3 } from "@zipkito/shared";
+
+// src/IframeGallery/IframeGallery.styled.ts
+import { styled as styled5 } from "@mui/material/styles";
+var IframeGalleryFrame = styled5("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
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var IframeGallery = memo5((props) => {
+  const { gallery, actions, slots = {}, slotProps = {}, overlayProps = {}, sx } = props;
+  const src = useMemo5(() => gallery?.path, [gallery?.path]);
+  if (!gallery.visible || !src) return null;
+  const Frame = slots.frame ?? IframeGalleryFrame;
+  return /* @__PURE__ */ jsxs4(Overlay3, { visible: gallery.visible, ...overlayProps, children: [
+    /* @__PURE__ */ jsx6(Frame, { src, sx, loading: "lazy", ...slotProps.frame }),
+    actions
+  ] });
+});
+IframeGallery.displayName = "IframeGallery";
+
+// src/types/galleries.ts
+var GALLERY_TYPE = {
+  Slide: "slide",
+  MDX: "mdx",
+  Iframe: "iframe"
+};
+export {
+  GALLERY_TYPE,
+  IframeGallery,
+  MDXGallery,
+  SlideGallery
+};
+//# sourceMappingURL=index.mjs.map