@giddaa-housing/ui 0.1.0 → 1.0.0

package/dist/photo-gallery.js

@@ -1,342 +1,36 @@
-// src/components/ui/photo-gallery.tsx
+"use client";
+import {
+  Button
+} from "./chunk-B4H6RNDH.js";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem
+} from "./chunk-FZDSVMKY.js";
+import "./chunk-HL3ZSYES.js";
+import {
+  cn
+} from "./chunk-Y4TTYVNE.js";
+
+// src/photo-gallery.tsx
 import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
 import {
-  ChevronLeftIcon as ChevronLeftIcon2,
-  ChevronRightIcon as ChevronRightIcon2,
+  ChevronLeftIcon,
+  ChevronRightIcon,
   Fullscreen,
   XIcon
 } from "lucide-react";
-import * as React2 from "react";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/button.tsx
-import { Button as ButtonPrimitive } from "@base-ui/react/button";
-import { cva } from "class-variance-authority";
-import { Loader } from "lucide-react";
-
-// src/components/ui/size-context.tsx
-import { createContext, useContext } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-var SizeContext = createContext(void 0);
-function useComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext(SizeContext);
-  return size ?? inheritedSize ?? fallback;
-}
-
-// src/components/ui/button.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-full bg-clip-padding whitespace-nowrap font-bold transition-[background-color,color,border-color,box-shadow,transform] outline-none select-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        primary: "bg-action-primary text-fg-on-brand hover:bg-action-primary-hover active:bg-action-primary-pressed",
-        "primary-outline": "border-2 border-action-primary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
-        secondary: "bg-surface-brand-subtle text-fg-brand hover:bg-action-primary-hover hover:text-fg-on-brand active:bg-action-primary-pressed active:text-fg-on-brand data-focused:bg-action-primary-hover data-pressed:bg-action-primary-pressed data-focused:text-fg-on-brand data-pressed:text-fg-on-brand",
-        "secondary-outline": "border-2 border-action-secondary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
-        tertiary: "bg-action-tertiary text-fg-primary hover:bg-action-tertiary-hover active:bg-action-tertiary-pressed data-focused:bg-action-tertiary-hover data-pressed:bg-action-tertiary-pressed",
-        "tertiary-outline": "border border-line-strong bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
-        ghost: "bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
-        danger: "bg-action-danger text-fg-on-brand hover:bg-action-danger-hover active:bg-action-danger-pressed data-focused:bg-action-danger-hover data-pressed:bg-action-danger-pressed",
-        "glass-overlay": "bg-surface-glass-overlay-button text-fg-on-brand",
-        "link-brand": "border-transparent bg-transparent px-0 text-fg-brand hover:underline active:underline active:opacity-70",
-        "link-neutral": "border-transparent bg-transparent px-0 text-fg-secondary hover:underline active:underline active:opacity-70"
-      },
-      size: {
-        sm: "h-8 gap-2 px-3.5 text-gdt-xs has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-3.5",
-        md: "h-10 gap-2 px-4.5 text-gdt-sm has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
-        lg: "h-12.5 gap-2.5 px-5.5 text-gdt-md has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5 [&_svg:not([class*='size-'])]:size-4.5",
-        xl: "h-14 gap-3 px-6.5 text-gdt-lg has-data-[icon=inline-end]:pr-6 has-data-[icon=inline-start]:pl-6 [&_svg:not([class*='size-'])]:size-5",
-        icon: "size-10",
-        "icon-xs": "size-6 text-gdt-xs [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8 text-gdt-sm [&_svg:not([class*='size-'])]:size-3.5",
-        "icon-lg": "size-12.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5",
-        "icon-xl": "size-14 text-gdt-lg [&_svg:not([class*='size-'])]:size-5"
-      }
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "md"
-    }
-  }
-);
-function Button({
-  className,
-  variant = "primary",
-  size,
-  isLoading = false,
-  children,
-  disabled = false,
-  ...props
-}) {
-  const inheritedSize = useComponentSize();
-  const resolvedSize = size ?? inheritedSize;
-  const _disabled = disabled || isLoading;
-  return /* @__PURE__ */ jsxs(
-    ButtonPrimitive,
-    {
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size: resolvedSize, className })),
-      disabled: _disabled,
-      ...props,
-      children: [
-        isLoading && /* @__PURE__ */ jsx2(Loader, { className: "size-4 animate-spin" }),
-        " ",
-        children
-      ]
-    }
-  );
-}
-
-// src/components/ui/carousel.tsx
-import { cva as cva2 } from "class-variance-authority";
-import useEmblaCarousel from "embla-carousel-react";
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import * as React from "react";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var glassChrome = "border border-fg-on-brand/[0.18] bg-surface-glass-overlay-button backdrop-blur-[16px]";
-var carouselVariants = cva2(
-  "relative overflow-hidden rounded-2xl bg-surface-brand-subtle",
-  {
-    variants: {
-      imageSize: {
-        sm: "w-[320px] max-w-full aspect-[320/220]",
-        md: "w-[520px] max-w-full aspect-[520/340]",
-        lg: "w-[800px] max-w-full aspect-[800/500]",
-        full: "w-full"
-      }
-    },
-    defaultVariants: {
-      imageSize: "md"
-    }
-  }
-);
-var CarouselContext = React.createContext(null);
-function useCarousel() {
-  const context = React.useContext(CarouselContext);
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />");
-  }
-  return context;
-}
-function Carousel({
-  orientation = "horizontal",
-  opts,
-  setApi,
-  plugins,
-  size,
-  imageSize,
-  className,
-  children,
-  ...props
-}) {
-  const resolvedSize = useComponentSize(size);
-  const [carouselRef, api] = useEmblaCarousel(
-    {
-      ...opts,
-      axis: orientation === "horizontal" ? "x" : "y"
-    },
-    plugins
-  );
-  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-  const [canScrollNext, setCanScrollNext] = React.useState(false);
-  const [selectedIndex, setSelectedIndex] = React.useState(0);
-  const [scrollSnaps, setScrollSnaps] = React.useState([]);
-  const onSelect = React.useCallback((api2) => {
-    if (!api2) return;
-    setCanScrollPrev(api2.canScrollPrev());
-    setCanScrollNext(api2.canScrollNext());
-    setSelectedIndex(api2.selectedScrollSnap());
-  }, []);
-  const onReInit = React.useCallback(
-    (api2) => {
-      if (!api2) return;
-      setScrollSnaps(api2.scrollSnapList());
-      onSelect(api2);
-    },
-    [onSelect]
-  );
-  const scrollPrev = React.useCallback(() => {
-    api?.scrollPrev();
-  }, [api]);
-  const scrollNext = React.useCallback(() => {
-    api?.scrollNext();
-  }, [api]);
-  const scrollTo = React.useCallback(
-    (index) => {
-      api?.scrollTo(index);
-    },
-    [api]
-  );
-  const handleKeyDown = React.useCallback(
-    (event) => {
-      if (event.key === "ArrowLeft") {
-        event.preventDefault();
-        scrollPrev();
-      } else if (event.key === "ArrowRight") {
-        event.preventDefault();
-        scrollNext();
-      }
-    },
-    [scrollPrev, scrollNext]
-  );
-  React.useEffect(() => {
-    if (!api || !setApi) return;
-    setApi(api);
-  }, [api, setApi]);
-  React.useEffect(() => {
-    if (!api) return;
-    onReInit(api);
-    api.on("reInit", onReInit);
-    api.on("select", onSelect);
-    return () => {
-      api?.off("reInit", onReInit);
-      api?.off("select", onSelect);
-    };
-  }, [api, onReInit, onSelect]);
-  return /* @__PURE__ */ jsx3(
-    CarouselContext.Provider,
-    {
-      value: {
-        carouselRef,
-        api,
-        orientation,
-        size: resolvedSize,
-        scrollPrev,
-        scrollNext,
-        scrollTo,
-        canScrollPrev,
-        canScrollNext,
-        selectedIndex,
-        scrollSnaps
-      },
-      children: /* @__PURE__ */ jsx3(
-        "div",
-        {
-          onKeyDownCapture: handleKeyDown,
-          className: cn(carouselVariants({ imageSize }), className),
-          role: "region",
-          "aria-roledescription": "carousel",
-          "data-slot": "carousel",
-          ...props,
-          children
-        }
-      )
-    }
-  );
-}
-function CarouselContent({ className, ...props }) {
-  const { carouselRef, orientation } = useCarousel();
-  return /* @__PURE__ */ jsx3(
-    "div",
-    {
-      ref: carouselRef,
-      className: "h-full overflow-hidden",
-      "data-slot": "carousel-content",
-      children: /* @__PURE__ */ jsx3(
-        "div",
-        {
-          className: cn(
-            "flex h-full",
-            orientation === "horizontal" ? "" : "flex-col",
-            className
-          ),
-          ...props
-        }
-      )
-    }
-  );
-}
-function CarouselItem({ className, ...props }) {
-  return (
-    // biome-ignore lint/a11y/useSemanticElements: a carousel slide is a role="group" with aria-roledescription per the W3C pattern, not a fieldset.
-    /* @__PURE__ */ jsx3(
-      "div",
-      {
-        role: "group",
-        "aria-roledescription": "slide",
-        "data-slot": "carousel-item",
-        className: cn("min-w-0 shrink-0 grow-0 basis-full", className),
-        ...props
-      }
-    )
-  );
-}
-var arrowVariants = cva2(
-  cn(
-    "absolute top-1/2 z-10 grid -translate-y-1/2 place-items-center rounded-full text-fg-on-brand/95 shadow-1 transition-[transform,opacity] outline-none",
-    glassChrome,
-    "hover:scale-105 focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:scale-95 disabled:pointer-events-none disabled:opacity-40"
-  ),
-  {
-    variants: {
-      size: {
-        sm: "size-8 [&_svg]:size-4",
-        md: "size-10 [&_svg]:size-[18px]",
-        lg: "size-12 [&_svg]:size-5"
-      },
-      side: {
-        prev: "",
-        next: ""
-      }
-    },
-    compoundVariants: [
-      { size: "sm", side: "prev", className: "left-3" },
-      { size: "sm", side: "next", className: "right-3" },
-      { size: "md", side: "prev", className: "left-4" },
-      { size: "md", side: "next", className: "right-4" },
-      { size: "lg", side: "prev", className: "left-5" },
-      { size: "lg", side: "next", className: "right-5" }
-    ],
-    defaultVariants: {
-      size: "md",
-      side: "prev"
-    }
-  }
-);
-
-// src/components/ui/photo-gallery.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function useGalleryCarousel(index, onIndexChange) {
-  const [api, setApi] = React2.useState();
-  const [selectedIndex, setSelectedIndex] = React2.useState(index ?? 0);
-  const initialIndexRef = React2.useRef(index ?? 0);
-  const onIndexChangeRef = React2.useRef(onIndexChange);
-  React2.useEffect(() => {
+  const [api, setApi] = React.useState();
+  const [selectedIndex, setSelectedIndex] = React.useState(index ?? 0);
+  const initialIndexRef = React.useRef(index ?? 0);
+  const onIndexChangeRef = React.useRef(onIndexChange);
+  React.useEffect(() => {
     onIndexChangeRef.current = onIndexChange;
   });
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (!api) return;
     const onSelect = () => {
       const next = api.selectedScrollSnap();
@@ -349,17 +43,17 @@ function useGalleryCarousel(index, onIndexChange) {
       api.off("select", onSelect).off("reInit", onSelect);
     };
   }, [api]);
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (api && index !== void 0 && index !== api.selectedScrollSnap()) {
       api.scrollTo(index, false);
     }
   }, [api, index]);
-  const scrollTo = React2.useCallback(
+  const scrollTo = React.useCallback(
     (i) => api?.scrollTo(i, false),
     [api]
   );
-  const scrollPrev = React2.useCallback(() => api?.scrollPrev(false), [api]);
-  const scrollNext = React2.useCallback(() => api?.scrollNext(false), [api]);
+  const scrollPrev = React.useCallback(() => api?.scrollPrev(false), [api]);
+  const scrollNext = React.useCallback(() => api?.scrollNext(false), [api]);
   return {
     setApi,
     selectedIndex,
@@ -374,7 +68,7 @@ function GalleryFrame({
   fit = "cover",
   className
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot": "photo-gallery-frame",
@@ -382,22 +76,21 @@ function GalleryFrame({
         "relative flex size-full items-center justify-center overflow-hidden",
         className
       ),
-      children: image?.src ? /* @__PURE__ */ jsx4(
+      children: image?.src ? /* @__PURE__ */ jsx(
         "img",
         {
           src: image.src,
           alt: image.alt ?? "Property image",
           className: cn(
-            "size-full",
-            fit === "contain" ? "object-contain" : "object-cover"
+            fit === "contain" ? "max-h-full max-w-full rounded-lg object-contain" : "size-full object-cover"
           ),
           draggable: false
         }
-      ) : /* @__PURE__ */ jsx4("span", { className: "text-gdt-sm font-medium text-fg-caption-placeholder", children: "Property Image" })
+      ) : /* @__PURE__ */ jsx("span", { className: "text-gdt-sm font-medium text-fg-caption-placeholder", children: "Property Image" })
     }
   );
 }
-var Images = (props) => /* @__PURE__ */ jsxs3(
+var Images = (props) => /* @__PURE__ */ jsxs(
   "svg",
   {
     "aria-hidden": "true",
@@ -408,14 +101,14 @@ var Images = (props) => /* @__PURE__ */ jsxs3(
     fill: "none",
     ...props,
     children: [
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx(
         "path",
         {
           fill: "currentColor",
           d: "M6.72 14.332c-.705 0-1.38-.3-1.878-.83a2.935 2.935 0 0 1-.779-2.003V2.012l-3.02.738c-.36.102-.667.353-.853.697a1.587 1.587 0 0 0-.143 1.136l2.589 10.309c.083.318.261.598.507.798.246.2.546.309.856.31.115 0 .233-.015.349-.048l6.3-1.62H6.72ZM8.125 6c.69 0 1.25-.597 1.25-1.333 0-.735-.56-1.333-1.25-1.333s-1.25.598-1.25 1.333c0 .736.56 1.333 1.25 1.333Z"
         }
       ),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx(
         "path",
         {
           fill: "currentColor",
@@ -431,7 +124,7 @@ function GalleryCounter({
   className
 }) {
   if (total <= 1) return null;
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-slot": "photo-gallery-counter",
@@ -440,8 +133,8 @@ function GalleryCounter({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx4(Images, { "aria-hidden": "true", className: "size-3.5" }),
-        /* @__PURE__ */ jsxs3("span", { children: [
+        /* @__PURE__ */ jsx(Images, { "aria-hidden": "true", className: "size-3.5" }),
+        /* @__PURE__ */ jsxs("span", { children: [
           current,
           " / ",
           total
@@ -455,7 +148,7 @@ function GalleryButton({
   variant = "ghost",
   ...rest
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx(
     Button,
     {
       size: "icon",
@@ -473,8 +166,8 @@ function GalleryArrow({
   onClick,
   className
 }) {
-  const Icon = side === "prev" ? ChevronLeftIcon2 : ChevronRightIcon2;
-  return /* @__PURE__ */ jsx4(
+  const Icon = side === "prev" ? ChevronLeftIcon : ChevronRightIcon;
+  return /* @__PURE__ */ jsx(
     GalleryButton,
     {
       type: "button",
@@ -489,7 +182,7 @@ function GalleryArrow({
         side === "prev" ? "left-2 sm:left-4" : "right-2 sm:right-4",
         className
       ),
-      children: /* @__PURE__ */ jsx4(Icon, { className: "cn-rtl-flip size-4 sm:size-5" })
+      children: /* @__PURE__ */ jsx(Icon, { className: "cn-rtl-flip size-4 sm:size-5" })
     }
   );
 }
@@ -498,32 +191,45 @@ function GalleryThumbnails({
   selectedIndex,
   onSelect,
   colsClassName,
-  className,
-  activeVariant = "focus"
+  className
 }) {
-  const containerRef = React2.useRef(null);
-  React2.useEffect(() => {
+  const containerRef = React.useRef(null);
+  const hasPositionedRef = React.useRef(false);
+  const [overflowing, setOverflowing] = React.useState(false);
+  React.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const update = () => setOverflowing(el.scrollWidth > el.clientWidth + 1);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  React.useEffect(() => {
     const active = containerRef.current?.children[selectedIndex];
-    active?.scrollIntoView({
-      behavior: "smooth",
+    if (!active) return;
+    active.scrollIntoView({
+      behavior: hasPositionedRef.current ? "smooth" : "auto",
       inline: "center",
       block: "nearest"
     });
+    hasPositionedRef.current = true;
   }, [selectedIndex]);
   if (images.length <= 1) return null;
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       ref: containerRef,
       "data-slot": "photo-gallery-thumbnails",
       className: cn(
         "flex gap-2 overflow-x-auto [--gallery-gap:0.5rem] scrollbar-none [&::-webkit-scrollbar]:hidden",
+        overflowing ? "justify-start" : "justify-center",
         colsClassName,
         className
       ),
       children: images.map((image, index) => {
         const isActive = index === selectedIndex;
-        return /* @__PURE__ */ jsx4(
+        return /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -535,10 +241,9 @@ function GalleryThumbnails({
             },
             className: cn(
               "relative aspect-4/3 shrink-0 overflow-hidden rounded-lg border-2 bg-surface-raised transition-[border-color,opacity] outline-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]",
-              activeVariant === "subtle" && "focus-visible:border-line-subtle focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-subtle)]",
-              isActive ? activeVariant === "subtle" ? "border-line-subtle" : "border-line-focus" : "border-transparent opacity-80 hover:opacity-100"
+              isActive ? "border-line-focus" : "border-transparent opacity-80 hover:opacity-100"
             ),
-            children: image.src ? /* @__PURE__ */ jsx4(
+            children: image.src ? /* @__PURE__ */ jsx(
               "img",
               {
                 src: image.src,
@@ -571,7 +276,7 @@ function PhotoGallery({
     scrollNext
   } = useGalleryCarousel(index, onIndexChange);
   const hasMany = images.length > 1;
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-slot": "photo-gallery",
@@ -581,7 +286,7 @@ function PhotoGallery({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsxs(
           Carousel,
           {
             imageSize: "full",
@@ -589,22 +294,22 @@ function PhotoGallery({
             opts: { loop: true, startIndex: initialIndex, watchDrag: hasMany },
             className: "aspect-video rounded-xl bg-surface-raised",
             children: [
-              /* @__PURE__ */ jsx4(CarouselContent, { children: images.map((image, i) => /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx(CarouselContent, { children: images.map((image, i) => /* @__PURE__ */ jsx(
                 CarouselItem,
                 {
-                  children: /* @__PURE__ */ jsx4(GalleryFrame, { image })
+                  children: /* @__PURE__ */ jsx(GalleryFrame, { image })
                 },
                 i
               )) }),
-              onImageClick && /* @__PURE__ */ jsx4(
+              onImageClick && /* @__PURE__ */ jsx(
                 GalleryButton,
                 {
                   className: "absolute bottom-2 right-2 sm:bottom-4 sm:right-4",
                   onClick: () => onImageClick(selectedIndex),
-                  children: /* @__PURE__ */ jsx4(Fullscreen, { className: "size-4 md:size-5" })
+                  children: /* @__PURE__ */ jsx(Fullscreen, { className: "size-4 md:size-5" })
                 }
               ),
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx(
                 GalleryCounter,
                 {
                   current: selectedIndex + 1,
@@ -612,14 +317,14 @@ function PhotoGallery({
                   className: "top-2 right-2 sm:top-4 md:right-4"
                 }
               ),
-              hasMany && /* @__PURE__ */ jsxs3(Fragment2, { children: [
-                /* @__PURE__ */ jsx4(GalleryArrow, { side: "prev", onClick: scrollPrev }),
-                /* @__PURE__ */ jsx4(GalleryArrow, { side: "next", onClick: scrollNext })
+              hasMany && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(GalleryArrow, { side: "prev", onClick: scrollPrev }),
+                /* @__PURE__ */ jsx(GalleryArrow, { side: "next", onClick: scrollNext })
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx(
           GalleryThumbnails,
           {
             images,
@@ -658,24 +363,24 @@ function PhotoGalleryFullscreen({
       scrollNext();
     }
   };
-  return /* @__PURE__ */ jsx4(DialogPrimitive.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs3(DialogPrimitive.Portal, { children: [
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsx(
       DialogPrimitive.Backdrop,
       {
         "data-slot": "photo-gallery-fullscreen-backdrop",
-        className: "fixed inset-0 z-50 bg-black/50 transition-opacity duration-150 data-closed:opacity-0 data-open:opacity-100"
+        className: "fixed inset-0 z-50 bg-black/90 transition-opacity duration-150 data-closed:opacity-0 data-open:opacity-100"
       }
     ),
-    /* @__PURE__ */ jsxs3(
+    /* @__PURE__ */ jsxs(
       DialogPrimitive.Popup,
       {
         "data-slot": "photo-gallery-fullscreen",
         onKeyDown: handleKeyDown,
         className: "fixed inset-0 z-50 flex flex-col gap-4 p-4 sm:p-6 xl:p-8 outline-none transition-opacity duration-150 data-closed:opacity-0 data-open:opacity-100",
         children: [
-          /* @__PURE__ */ jsx4(DialogPrimitive.Title, { className: "sr-only", children: "Photo Gallery" }),
-          /* @__PURE__ */ jsxs3("div", { className: "w-full flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: "sr-only", children: "Photo Gallery" }),
+          /* @__PURE__ */ jsxs("div", { className: "w-full flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx(
               GalleryCounter,
               {
                 current: selectedIndex + 1,
@@ -683,34 +388,34 @@ function PhotoGalleryFullscreen({
                 className: "static"
               }
             ),
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx(
               DialogPrimitive.Close,
               {
                 "data-slot": "photo-gallery-fullscreen-close",
                 "aria-label": "Close gallery",
-                render: /* @__PURE__ */ jsx4(GalleryButton, {}),
-                children: /* @__PURE__ */ jsx4(XIcon, { className: "size-4 sm:size-5" })
+                render: /* @__PURE__ */ jsx(GalleryButton, {}),
+                children: /* @__PURE__ */ jsx(XIcon, { className: "size-4 sm:size-5" })
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsxs(
             Carousel,
             {
               imageSize: "full",
               setApi,
               opts: { loop: true, startIndex: initialIndex, watchDrag: hasMany },
-              className: "flex-1 w-full rounded-xl bg-transparent",
+              className: "min-h-0 flex-1 w-full rounded-xl bg-transparent",
               children: [
-                /* @__PURE__ */ jsx4(CarouselContent, { className: "items-center", children: images.map((image, i) => /* @__PURE__ */ jsx4(
+                /* @__PURE__ */ jsx(CarouselContent, { className: "items-center", children: images.map((image, i) => /* @__PURE__ */ jsx(
                   CarouselItem,
                   {
                     className: "h-full",
-                    children: /* @__PURE__ */ jsx4(GalleryFrame, { image, fit: "contain" })
+                    children: /* @__PURE__ */ jsx(GalleryFrame, { image, fit: "contain" })
                   },
                   i
                 )) }),
-                hasMany && /* @__PURE__ */ jsxs3(Fragment2, { children: [
-                  /* @__PURE__ */ jsx4(
+                hasMany && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
                     GalleryArrow,
                     {
                       side: "prev",
@@ -718,7 +423,7 @@ function PhotoGalleryFullscreen({
                       className: "left-0!"
                     }
                   ),
-                  /* @__PURE__ */ jsx4(
+                  /* @__PURE__ */ jsx(
                     GalleryArrow,
                     {
                       side: "next",
@@ -730,17 +435,16 @@ function PhotoGalleryFullscreen({
               ]
             }
           ),
-          hasMany && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-3", children: [
-            /* @__PURE__ */ jsx4("p", { className: "hidden text-center text-gdt-xs text-fg-secondary sm:block", children: "\u2190 \u2192 to navigate \xB7 ESC to close" }),
-            /* @__PURE__ */ jsx4(
+          hasMany && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+            /* @__PURE__ */ jsx("p", { className: "hidden text-center text-gdt-xs text-fg-secondary sm:block", children: "\u2190 \u2192 to navigate \xB7 ESC to close" }),
+            /* @__PURE__ */ jsx(
               GalleryThumbnails,
               {
                 images,
                 selectedIndex,
                 onSelect: scrollTo,
                 colsClassName: "[--gallery-cols:5] sm:[--gallery-cols:10]",
-                className: "mx-auto w-full max-w-3xl",
-                activeVariant: "subtle"
+                className: "mx-auto w-full max-w-3xl"
               }
             )
           ] })