@geowiki/design-system 0.16.19 → 0.16.21

package/dist/index.d.mts

@@ -341,7 +341,11 @@ declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivE
 
 declare const Slider: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 
-declare const Switch: React$1.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+interface SwitchProps extends React$1.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
+    labels?: string[];
+    activeLabel?: string;
+}
+declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const Table: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableElement> & React$1.RefAttributes<HTMLTableElement>>;
 declare const TableHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
@@ -1081,6 +1085,7 @@ interface AppItemProps {
         description?: string;
         logoUrl: string;
         locationType: string;
+        activeAppText?: string;
         dataDownloadLinks?: string[];
         externalWebsiteLink?: string;
         totalImages?: number;
@@ -1094,6 +1099,9 @@ interface AppItemListProps {
     id: string;
     name: string;
     title: string;
+    toggleLabels?: string[];
+    currentToggleLabel?: string;
+    onToggleChange?: (checked: boolean) => void;
     allItems: {
         id: string;
         name: string;

package/dist/index.d.ts

@@ -341,7 +341,11 @@ declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivE
 
 declare const Slider: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 
-declare const Switch: React$1.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+interface SwitchProps extends React$1.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
+    labels?: string[];
+    activeLabel?: string;
+}
+declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const Table: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableElement> & React$1.RefAttributes<HTMLTableElement>>;
 declare const TableHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
@@ -1081,6 +1085,7 @@ interface AppItemProps {
         description?: string;
         logoUrl: string;
         locationType: string;
+        activeAppText?: string;
         dataDownloadLinks?: string[];
         externalWebsiteLink?: string;
         totalImages?: number;
@@ -1094,6 +1099,9 @@ interface AppItemListProps {
     id: string;
     name: string;
     title: string;
+    toggleLabels?: string[];
+    currentToggleLabel?: string;
+    onToggleChange?: (checked: boolean) => void;
     allItems: {
         id: string;
         name: string;

package/dist/index.js

@@ -2481,24 +2481,31 @@ var React26 = __toESM(require("react"));
 var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"));
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var Switch = React26.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  var _b = _a, { className, activeLabel, labels } = _b, props = __objRest(_b, ["className", "activeLabel", "labels"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     SwitchPrimitives.Root,
     __spreadProps(__spreadValues({
       className: cn(
-        "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+        `group relative peer inline-flex ${labels && labels.length > 0 ? `h-12 w-48` : `h-[24px] w-[44px]`} shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 ${activeLabel || labels && labels.length > 1 ? "bg-primary" : "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input"}`,
         className
       )
     }, props), {
       ref,
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-        SwitchPrimitives.Thumb,
-        {
-          className: cn(
-            "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
-          )
-        }
-      )
+      children: [
+        activeLabel && labels && labels.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "absolute inset-0 flex items-center justify-between px-4 z-10 pointer-events-none", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "w-16 text-center text-[15px] select-none transition-colors duration-200\n        group-data-[state=checked]:text-primary group-data-[state=unchecked]:text-secondary\n        group-data-[state=checked]:font-semibold group-data-[state=unchecked]:font-normal", children: labels[0] }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "w-16 text-center text-[15px] select-none transition-colors duration-200\n        group-data-[state=unchecked]:text-primary group-data-[state=checked]:text-secondary\n        group-data-[state=unchecked]:font-semibold group-data-[state=checked]:font-normal", children: labels[1] })
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          SwitchPrimitives.Thumb,
+          {
+            className: cn(
+              `pointer-events-none relative block z-0 ${activeLabel && labels && labels.length > 1 ? `h-10 w-24 translate-x-[92px] group-data-[state=checked]:translate-x-1
+          bg-secondary` : `h-5 w-5 bg-background data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0`} rounded-full shadow-lg ring-0 transition-transform duration-300`
+            )
+          }
+        )
+      ]
     })
   );
 });
@@ -7491,7 +7498,13 @@ var AppItem = (props) => {
     /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "w-full h-64 relative overflow-hidden rounded-xl", children: [
       /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("img", { className: "absolute w-full h-64 rounded-xl object-cover", src: props.item.logoUrl }),
       /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "inset-0 absolute bg-black/20 rounded-xl" }),
-      /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "left-4 md:left-6 top-44 absolute justify-start text-white text-base font-medium leading-5", children: props.item.locationType }),
+      /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "left-4 md:left-6 top-44 absolute justify-start text-white text-base font-medium leading-5", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex flex-row ", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { children: props.item.locationType }),
+        props.item.activeAppText && /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex flex-row items-center ml-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "w-2 h-2 mr-1 bg-primary rounded-full" }),
+          props.item.activeAppText
+        ] })
+      ] }) }),
       /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "w-80 left-4 md:left-6 top-48 mt-2 absolute justify-start text-white text-xl font-semibold leading-7", children: (_a = props.item) == null ? void 0 : _a.name }),
       /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
         "button",
@@ -7519,13 +7532,61 @@ var AppItem = (props) => {
 };
 
 // src/components/DesignElements/AppItemsList.tsx
+var import_react23 = require("react");
+var import_lucide_react20 = require("lucide-react");
 var import_jsx_runtime130 = require("react/jsx-runtime");
 var AppItemsList = (props) => {
-  var _a;
+  const [toggle, setToggle] = (0, import_react23.useState)(true);
+  const [currentPage, setCurrentPage] = (0, import_react23.useState)(1);
+  const itemsPerPage = 6;
+  const totalPages = Math.ceil(props.allItems.length / itemsPerPage);
+  const currentItems = props.allItems.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
   return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "w-full relative mt-10 pt-5", id: props.id, children: [
     /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "justify-start text-black text-lg font-normal leading-6 mb-2", children: props.name }),
-    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "justify-center text-gray-900 text-3xl md:text-5xl font-light", children: props.title }),
-    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "md:grid md:grid-cols-3 gap-4 md:mt-12 mt-5", children: props.allItems && ((_a = props.allItems) == null ? void 0 : _a.map((x, index) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(AppItem, { item: x }, index))) })
+    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex flex-row justify-between items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: " text-gray-900 text-3xl md:text-5xl font-light", children: props.title }),
+      props.toggleLabels && props.onToggleChange && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "flex flex-row space-x-2", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "hidden lg:block", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+        Switch,
+        {
+          className: "border-2 border-primary rounded-full",
+          checked: toggle,
+          onCheckedChange: (checked) => {
+            setToggle(checked);
+            props.onToggleChange && props.onToggleChange(checked);
+          },
+          labels: props.toggleLabels,
+          activeLabel: props.currentToggleLabel
+        }
+      ) }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "md:grid md:grid-cols-3 gap-4 md:mt-12 mt-5", children: currentItems.map((x, index) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(AppItem, { item: __spreadProps(__spreadValues({}, x), { activeAppText: props.currentToggleLabel }) }, index)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex justify-center mt-8 items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+        "button",
+        {
+          className: "disabled:text-[#DCDCDF] disabled:bg-gray-100 transition-colors text-[#686873] flex items-center justify-center w-10 h-10 rounded-full bg-[#F3F3F4] hover:bg-gray-300 disabled:cursor-not-allowed",
+          onClick: () => setCurrentPage((prev) => Math.max(prev - 1, 1)),
+          disabled: currentPage === 1,
+          children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_lucide_react20.ChevronLeft, {})
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("span", { className: "mx-5 text-gray-700 font-semibold flex-row flex", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "text-primary w-3", children: currentPage }),
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "text-[#DCDCDF]", children: [
+          " / ",
+          totalPages
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+        "button",
+        {
+          className: "disabled:text-[#DCDCDF] disabled:bg-gray-100 transition-colors text-[#686873] flex items-center justify-center w-10 h-10 rounded-full bg-[#F3F3F4] hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed",
+          onClick: () => setCurrentPage((prev) => Math.min(prev + 1, totalPages)),
+          disabled: currentPage === totalPages,
+          children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_lucide_react20.ChevronRight, {})
+        }
+      )
+    ] })
   ] });
 };
 
@@ -7595,11 +7656,11 @@ var CarouselGalleryItem = ({ text, url, id }) => {
 };
 
 // src/components/DesignElements/Carousel/CarouselOpen.tsx
-var import_react23 = require("react");
-var import_react24 = require("@headlessui/react");
+var import_react24 = require("react");
+var import_react25 = require("@headlessui/react");
 var import_outline5 = require("@heroicons/react/24/outline");
-var import_react25 = require("react");
-var import_lucide_react20 = require("lucide-react");
+var import_react26 = require("react");
+var import_lucide_react21 = require("lucide-react");
 var import_react_zoom_pan_pinch = require("react-zoom-pan-pinch");
 var import_jsx_runtime134 = require("react/jsx-runtime");
 var GalleryCarouselOpen = ({
@@ -7613,21 +7674,25 @@ var GalleryCarouselOpen = ({
   selectImageText,
   imageRotation
 }) => {
-  const [defaultPhoto, setDefaultPhoto] = (0, import_react25.useState)(currentPhoto);
-  const [text, setDefaultText] = (0, import_react25.useState)("");
-  const [id, setDefaultId] = (0, import_react25.useState)("");
-  const [rotation, setRotation] = (0, import_react25.useState)(imageRotation);
-  (0, import_react25.useEffect)(() => {
-    setDefaultPhoto(currentPhoto);
-  }, [currentPhoto]);
+  const [defaultPhoto, setDefaultPhoto] = (0, import_react26.useState)(currentPhoto);
+  const [text, setDefaultText] = (0, import_react26.useState)("");
+  const [id, setDefaultId] = (0, import_react26.useState)("");
+  const [rotation, setRotation] = (0, import_react26.useState)(imageRotation);
+  const imageRef = (0, import_react26.useRef)(null);
+  const currentPhotoUrl = currentPhoto.imageUrl;
+  const currentPhotoId = currentPhoto.id;
+  (0, import_react26.useEffect)(() => {
+    setDefaultPhoto({ imageUrl: currentPhotoUrl, id: currentPhotoId });
+    setRotation(imageRotation);
+  }, [currentPhotoUrl, currentPhotoId, imageRotation]);
   const handlePrevious = () => {
     const currentIndex = list.findIndex(
       (item) => item.url === defaultPhoto.imageUrl
     );
     if (currentIndex > 0) {
       const previousIndex = currentIndex - 1;
-      setDefaultPhoto({ imageUrl: list[previousIndex].url });
-      setDefaultId(list[previousIndex].id);
+      setDefaultPhoto({ imageUrl: list[previousIndex].url, id: list[previousIndex].id });
+      setRotation(0);
     }
   };
   const handleNext = () => {
@@ -7636,13 +7701,13 @@ var GalleryCarouselOpen = ({
     );
     if (currentIndex < list.length - 1) {
       const nextIndex = currentIndex + 1;
-      setDefaultPhoto({ imageUrl: list[nextIndex].url });
-      setDefaultId(list[nextIndex].id);
+      setDefaultPhoto({ imageUrl: list[nextIndex].url, id: list[nextIndex].id });
+      setRotation(0);
     }
   };
   const generateBase64ofImage = () => {
-    const img = document.getElementById(id);
-    let base64;
+    const img = imageRef.current;
+    if (!img || !img.complete || img.naturalWidth === 0) return null;
     const canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");
     if (!ctx) return null;
@@ -7654,21 +7719,20 @@ var GalleryCarouselOpen = ({
     ctx.translate(canvas.width / 2, canvas.height / 2);
     ctx.rotate(radians);
     ctx.drawImage(img, -img.naturalWidth / 2, -img.naturalHeight / 2);
-    base64 = canvas.toDataURL("image/jpeg");
-    return base64;
+    return canvas.toDataURL("image/jpeg");
   };
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     const foundPhoto = list.find((list2) => list2.url === defaultPhoto.imageUrl);
     if (foundPhoto) {
       setDefaultText(foundPhoto.text);
       setDefaultId(foundPhoto.id);
     }
   }, [defaultPhoto, list]);
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_react24.Transition.Root, { show: open, as: import_react23.Fragment, "data-component": "ResourceView", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_react24.Dialog, { as: "div", className: "relative z-10", onClose: setOpen, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_react25.Transition.Root, { show: open, as: import_react24.Fragment, "data-component": "ResourceView", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_react25.Dialog, { as: "div", className: "relative z-10", onClose: setOpen, children: [
     /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
-      import_react24.Transition.Child,
+      import_react25.Transition.Child,
       {
-        as: import_react23.Fragment,
+        as: import_react24.Fragment,
         enter: "ease-out duration-300",
         enterFrom: "opacity-0",
         enterTo: "opacity-100",
@@ -7678,7 +7742,7 @@ var GalleryCarouselOpen = ({
         children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "fixed inset-0 bg-black bg-opacity-90 transition-opacity" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_react24.Dialog.Panel, { className: "relative ", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "fixed inset-0 flex items-center justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_react25.Dialog.Panel, { className: "relative ", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "fixed inset-0 flex items-center justify-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "absolute top-0 right-0 pt-4 pr-4 z-40", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
         "button",
         {
@@ -7705,7 +7769,7 @@ var GalleryCarouselOpen = ({
               type: "button",
               className: " rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 z-40 ",
               onClick: handlePrevious,
-              children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_lucide_react20.ChevronLeft, { className: "h-8 w-8 disabled:pointer-events-none disabled:opacity-60 text-white", onClick: () => setRotation(0) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_lucide_react21.ChevronLeft, { className: "h-8 w-8 disabled:pointer-events-none disabled:opacity-60 text-white" })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
@@ -7754,6 +7818,7 @@ var GalleryCarouselOpen = ({
                       !defaultPhoto.imageUrl.includes(".mp4") && !defaultPhoto.imageUrl.includes(".mov") && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
                         "img",
                         {
+                          ref: imageRef,
                           id,
                           src: defaultPhoto.imageUrl,
                           crossOrigin: "anonymous",
@@ -7786,16 +7851,16 @@ var GalleryCarouselOpen = ({
               type: "button",
               className: " rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 z-40",
               onClick: handleNext,
-              children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_lucide_react20.ChevronRight, { className: "h-8 w-8 disabled:pointer-events-none disabled:opacity-60 text-white", onClick: () => setRotation(0) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_lucide_react21.ChevronRight, { className: "h-8 w-8 disabled:pointer-events-none disabled:opacity-60 text-white" })
             }
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "justify-between flex flex-row mb-5", children: [
           /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "gap-2 flex flex-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_lucide_react20.RotateCcw, { className: "h-6 w-6 text-white cursor-pointer", onClick: () => {
+            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_lucide_react21.RotateCcw, { className: "h-6 w-6 text-white cursor-pointer", onClick: () => {
               setRotation(rotation - 90);
             } }),
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_lucide_react20.RotateCw, { className: "h-6 w-6 text-white cursor-pointer", onClick: () => {
+            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_lucide_react21.RotateCw, { className: "h-6 w-6 text-white cursor-pointer", onClick: () => {
               setRotation(rotation + 90);
             } })
           ] }),
@@ -7804,7 +7869,11 @@ var GalleryCarouselOpen = ({
             {
               className: "z-40 text-white hover:cursor-pointer",
               onClick: () => {
-                saveRotationChanges(generateBase64ofImage(), id);
+                const base64 = generateBase64ofImage();
+                saveRotationChanges(base64, id);
+                if (base64) {
+                  setDefaultPhoto({ imageUrl: base64, id });
+                }
                 setRotation(0);
               },
               children: "Save rotation changes"
@@ -7825,12 +7894,12 @@ var GalleryCarouselOpen = ({
 };
 
 // src/components/DesignElements/Carousel/CarouselGalleryItemList.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_jsx_runtime135 = require("react/jsx-runtime");
 var CarouselItemList = (props) => {
-  const [open, setOpen] = (0, import_react26.useState)(false);
-  const [selectedItemId, setSelectedItemId] = (0, import_react26.useState)("");
-  const [selectedImageId, setSelectedImageId] = (0, import_react26.useState)(null);
+  const [open, setOpen] = (0, import_react27.useState)(false);
+  const [selectedItemId, setSelectedItemId] = (0, import_react27.useState)("");
+  const [selectedImageId, setSelectedImageId] = (0, import_react27.useState)(null);
   const handleOpenGallery = (id, imageId) => {
     setOpen(true);
     setSelectedItemId(id);
@@ -8007,11 +8076,11 @@ var FeatureDisabled = () => {
 };
 
 // src/components/Elements/IframeViewer.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_jsx_runtime140 = require("react/jsx-runtime");
 var IframeViewer = ({ html, className }) => {
-  const containerRef = (0, import_react27.useRef)(null);
-  (0, import_react27.useEffect)(() => {
+  const containerRef = (0, import_react28.useRef)(null);
+  (0, import_react28.useEffect)(() => {
     if (containerRef.current) {
       containerRef.current.innerHTML = "";
       const tempDiv = document.createElement("div");
@@ -8217,12 +8286,12 @@ var FeaturedItemWithBannerImage = (props) => {
 };
 
 // src/components/Elements/NewsLetter.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_jsx_runtime150 = require("react/jsx-runtime");
 var NewsLetter = (props) => {
-  const [loading, setLoading] = (0, import_react28.useState)(false);
-  const [isAccepted, setIsAccepted] = (0, import_react28.useState)(false);
-  const [email, setEmail] = (0, import_react28.useState)("");
+  const [loading, setLoading] = (0, import_react29.useState)(false);
+  const [isAccepted, setIsAccepted] = (0, import_react29.useState)(false);
+  const [email, setEmail] = (0, import_react29.useState)("");
   const isEmailValid = (email2) => {
     return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email2);
   };
@@ -8381,7 +8450,7 @@ var HeroImage = ({ path, cmsUrl }) => {
 };
 
 // src/components/Hero/HeroImageRightWithAppButtons.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // src/components/HeadingTextBlocks/H1BodyButton.tsx
 var import_core6 = require("@geowiki/core");
@@ -8574,8 +8643,8 @@ var H1BodyButtonWithApp = (props) => {
 // src/components/Hero/HeroImageRightWithAppButtons.tsx
 var import_jsx_runtime153 = require("react/jsx-runtime");
 var HeroImageRightWithAppButtons = (props) => {
-  const [description, setDescription] = (0, import_react29.useState)(props.description);
-  (0, import_react29.useEffect)(() => {
+  const [description, setDescription] = (0, import_react30.useState)(props.description);
+  (0, import_react30.useEffect)(() => {
     var _a;
     if (typeof window !== "undefined") {
       const desc = window.innerWidth < 700 ? (_a = props.description) == null ? void 0 : _a.replaceAll("<br>", "") : props.description;