@opensite/ui 0.5.4 → 0.5.6

package/dist/carousel-badge-cards.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React4 from 'react';
-import React4__default, { useState, useEffect } from 'react';
+import React4__default, { useState, useEffect, useMemo, useCallback } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Slot } from '@radix-ui/react-slot';
@@ -8,6 +8,7 @@ import { cva } from 'class-variance-authority';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
 import useEmblaCarousel from 'embla-carousel-react';
+import { Lightbox } from '@page-speed/lightbox';
 
 // components/blocks/gallery/carousel-badge-cards.tsx
 function cn(...inputs) {
@@ -1074,7 +1075,7 @@ function CarouselBadgeCards({
   heading,
   items,
   itemsSlot,
-  readMoreText = "Read more",
+  readMoreText,
   className,
   headerClassName,
   headingClassName,
@@ -1085,8 +1086,8 @@ function CarouselBadgeCards({
   cardClassName,
   imageClassName,
   badgeClassName,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -1095,6 +1096,8 @@ function CarouselBadgeCards({
   const [carouselApi, setCarouselApi] = useState();
   const [canScrollPrev, setCanScrollPrev] = useState(false);
   const [canScrollNext, setCanScrollNext] = useState(false);
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
   useEffect(() => {
     if (!carouselApi) {
       return;
@@ -1109,10 +1112,30 @@ function CarouselBadgeCards({
       carouselApi.off("select", updateSelection);
     };
   }, [carouselApi]);
-  const renderItems = () => {
+  const lightboxItems = useMemo(
+    () => (items ?? []).map((item, index) => ({
+      id: `badge-card-${index}`,
+      type: "image",
+      src: item.image,
+      alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
+      download: true,
+      share: true
+    })),
+    [items]
+  );
+  const handleImageClick = useCallback((index, e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setLightboxIndex(index);
+    setLightboxOpen(true);
+  }, []);
+  const handleLightboxClose = useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
+  const itemsContent = useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
-    return items.map((item) => /* @__PURE__ */ jsx(
+    return items.map((item, index) => /* @__PURE__ */ jsx(
       CarouselItem,
       {
         className: cn("max-w-[320px] pl-5 lg:max-w-[360px]", itemClassName),
@@ -1126,23 +1149,39 @@ function CarouselBadgeCards({
               cardClassName
             ),
             children: [
-              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: "flex aspect-3/2 overflow-clip rounded-xl", children: /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105", children: /* @__PURE__ */ jsx(
-                Img,
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: "flex aspect-3/2 overflow-clip rounded-xl", children: /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+                "div",
                 {
-                  src: item.image,
-                  alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
-                  className: cn(
-                    "h-full w-full object-cover object-center",
-                    imageClassName
-                  ),
-                  loading: "lazy",
-                  optixFlowConfig
+                  className: "relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105 cursor-pointer",
+                  onClick: (e) => handleImageClick(index, e),
+                  role: "button",
+                  tabIndex: 0,
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      handleImageClick(index, e);
+                    }
+                  },
+                  "aria-label": `View ${typeof item.title === "string" ? item.title : "image"} in lightbox`,
+                  children: /* @__PURE__ */ jsx(
+                    Img,
+                    {
+                      src: item.image,
+                      alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
+                      className: cn(
+                        "h-full w-full object-cover object-center",
+                        imageClassName
+                      ),
+                      loading: "lazy",
+                      optixFlowConfig
+                    }
+                  )
                 }
-              ) }) }) }) }),
+              ) }) }) }),
               /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(Badge, { className: badgeClassName, children: item.label }) }),
               /* @__PURE__ */ jsx("div", { className: "mb-2 line-clamp-3 pt-4 text-lg font-medium wrap-break-word md:mb-3 md:pt-4 md:text-xl lg:pt-4 lg:text-2xl", children: item.title }),
               /* @__PURE__ */ jsx("div", { className: "mb-8 line-clamp-2 text-sm text-muted-foreground md:mb-12 md:text-base lg:mb-9", children: item.description }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center text-sm", children: [
+              readMoreText && /* @__PURE__ */ jsxs("div", { className: "flex items-center text-sm", children: [
                 readMoreText,
                 " ",
                 /* @__PURE__ */ jsx(
@@ -1160,7 +1199,17 @@ function CarouselBadgeCards({
       },
       item.id
     ));
-  };
+  }, [
+    itemsSlot,
+    items,
+    itemClassName,
+    cardClassName,
+    badgeClassName,
+    imageClassName,
+    optixFlowConfig,
+    readMoreText,
+    handleImageClick
+  ]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -1239,11 +1288,32 @@ function CarouselBadgeCards({
                   "mr-5 ml-5 2xl:mr-[calc(50vw-700px+20px)] 2xl:ml-[calc(50vw-700px+20px)]",
                   carouselContentClassName
                 ),
-                children: renderItems()
+                children: itemsContent
               }
             )
           }
-        ) })
+        ) }),
+        lightboxOpen && /* @__PURE__ */ jsx(
+          Lightbox,
+          {
+            items: lightboxItems,
+            initialIndex: lightboxIndex,
+            layout: "horizontal",
+            controls: {
+              navigation: true,
+              thumbnails: true,
+              download: true,
+              share: true,
+              fullscreen: true,
+              captions: true,
+              counter: true
+            },
+            onClose: handleLightboxClose,
+            enableKeyboardShortcuts: true,
+            closeOnEscape: true,
+            closeOnBackdropClick: true
+          }
+        )
       ]
     }
   );

package/dist/carousel-demo-link.cjs

@@ -8,6 +8,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var img = require('@page-speed/img');
 var useEmblaCarousel = require('embla-carousel-react');
 var classVarianceAuthority = require('class-variance-authority');
+var lightbox = require('@page-speed/lightbox');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -1067,7 +1068,7 @@ function CarouselDemoLink({
   demoActionSlot,
   items,
   itemsSlot,
-  readMoreText = "Read more",
+  readMoreText,
   className,
   headerClassName,
   headingClassName,
@@ -1078,8 +1079,8 @@ function CarouselDemoLink({
   itemClassName,
   cardClassName,
   imageClassName,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -1088,6 +1089,8 @@ function CarouselDemoLink({
   const [carouselApi, setCarouselApi] = React4.useState();
   const [canScrollPrev, setCanScrollPrev] = React4.useState(false);
   const [canScrollNext, setCanScrollNext] = React4.useState(false);
+  const [lightboxOpen, setLightboxOpen] = React4.useState(false);
+  const [lightboxIndex, setLightboxIndex] = React4.useState(0);
   React4.useEffect(() => {
     if (!carouselApi) {
       return;
@@ -1102,7 +1105,27 @@ function CarouselDemoLink({
       carouselApi.off("select", updateSelection);
     };
   }, [carouselApi]);
-  const renderDemoAction = () => {
+  const lightboxItems = React4.useMemo(
+    () => (items ?? []).map((item, index) => ({
+      id: `demo-card-${index}`,
+      type: "image",
+      src: item.image,
+      alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
+      download: true,
+      share: true
+    })),
+    [items]
+  );
+  const handleImageClick = React4.useCallback((index, e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setLightboxIndex(index);
+    setLightboxOpen(true);
+  }, []);
+  const handleLightboxClose = React4.useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
+  const demoActionContent = React4.useMemo(() => {
     if (demoActionSlot) return demoActionSlot;
     if (!demoAction) return null;
     const {
@@ -1136,11 +1159,11 @@ function CarouselDemoLink({
         ] })
       }
     );
-  };
-  const renderItems = () => {
+  }, [demoActionSlot, demoAction, demoLinkClassName]);
+  const itemsContent = React4.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
-    return items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+    return items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
       CarouselItem,
       {
         className: cn("ml-8 md:max-w-[452px]", itemClassName),
@@ -1154,22 +1177,38 @@ function CarouselDemoLink({
               cardClassName
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex aspect-3/2 overflow-clip rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105", children: /* @__PURE__ */ jsxRuntime.jsx(
-                img.Img,
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex aspect-3/2 overflow-clip rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
                 {
-                  src: item.image,
-                  alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
-                  className: cn(
-                    "h-full w-full object-cover object-center",
-                    imageClassName
-                  ),
-                  loading: "lazy",
-                  optixFlowConfig
+                  className: "relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105 cursor-pointer",
+                  onClick: (e) => handleImageClick(index, e),
+                  role: "button",
+                  tabIndex: 0,
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      handleImageClick(index, e);
+                    }
+                  },
+                  "aria-label": `View ${typeof item.title === "string" ? item.title : "image"} in lightbox`,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    img.Img,
+                    {
+                      src: item.image,
+                      alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
+                      className: cn(
+                        "h-full w-full object-cover object-center",
+                        imageClassName
+                      ),
+                      loading: "lazy",
+                      optixFlowConfig
+                    }
+                  )
                 }
-              ) }) }) }) }),
+              ) }) }) }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 line-clamp-3 pt-4 text-lg font-medium wrap-break-word md:mb-3 md:pt-4 md:text-xl lg:pt-4 lg:text-2xl", children: item.title }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 line-clamp-2 text-sm text-muted-foreground md:mb-12 md:text-base lg:mb-9", children: item.summary }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-sm", children: [
+              readMoreText && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-sm", children: [
                 readMoreText,
                 " ",
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -1187,7 +1226,16 @@ function CarouselDemoLink({
       },
       item.id
     ));
-  };
+  }, [
+    itemsSlot,
+    items,
+    itemClassName,
+    cardClassName,
+    imageClassName,
+    optixFlowConfig,
+    readMoreText,
+    handleImageClick
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -1217,7 +1265,7 @@ function CarouselDemoLink({
                     children: heading
                   }
                 ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-3 md:mb-4 lg:mb-6", headingClassName), children: heading })),
-                renderDemoAction()
+                demoActionContent
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
@@ -1281,11 +1329,32 @@ function CarouselDemoLink({
                   "hide-scrollbar w-full max-w-full md:-mr-4 md:ml-8 2xl:mr-[max(0rem,calc(50vw-700px-1rem))] 2xl:ml-[max(8rem,calc(50vw-700px+1rem))]",
                   carouselContentClassName
                 ),
-                children: renderItems()
+                children: itemsContent
               }
             )
           }
-        ) })
+        ) }),
+        lightboxOpen && /* @__PURE__ */ jsxRuntime.jsx(
+          lightbox.Lightbox,
+          {
+            items: lightboxItems,
+            initialIndex: lightboxIndex,
+            layout: "horizontal",
+            controls: {
+              navigation: true,
+              thumbnails: true,
+              download: true,
+              share: true,
+              fullscreen: true,
+              captions: true,
+              counter: true
+            },
+            onClose: handleLightboxClose,
+            enableKeyboardShortcuts: true,
+            closeOnEscape: true,
+            closeOnBackdropClick: true
+          }
+        )
       ]
     }
   );

package/dist/carousel-demo-link.d.cts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { SectionBackground, SectionSpacing } from './types.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BudEyO90.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -63,7 +63,6 @@ interface CarouselDemoLinkProps {
     itemsSlot?: React.ReactNode;
     /**
      * Text for the "Read more" link
-     * @default "Read more"
      */
     readMoreText?: React.ReactNode;
     /**

package/dist/carousel-demo-link.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { SectionBackground, SectionSpacing } from './types.js';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 /**
@@ -63,7 +63,6 @@ interface CarouselDemoLinkProps {
     itemsSlot?: React.ReactNode;
     /**
      * Text for the "Read more" link
-     * @default "Read more"
      */
     readMoreText?: React.ReactNode;
     /**

package/dist/carousel-demo-link.js

@@ -1,12 +1,13 @@
 "use client";
 import * as React4 from 'react';
-import React4__default, { useState, useEffect } from 'react';
+import React4__default, { useState, useEffect, useMemo, useCallback } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
 import useEmblaCarousel from 'embla-carousel-react';
 import { cva } from 'class-variance-authority';
+import { Lightbox } from '@page-speed/lightbox';
 
 // components/blocks/gallery/carousel-demo-link.tsx
 function cn(...inputs) {
@@ -1043,7 +1044,7 @@ function CarouselDemoLink({
   demoActionSlot,
   items,
   itemsSlot,
-  readMoreText = "Read more",
+  readMoreText,
   className,
   headerClassName,
   headingClassName,
@@ -1054,8 +1055,8 @@ function CarouselDemoLink({
   itemClassName,
   cardClassName,
   imageClassName,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -1064,6 +1065,8 @@ function CarouselDemoLink({
   const [carouselApi, setCarouselApi] = useState();
   const [canScrollPrev, setCanScrollPrev] = useState(false);
   const [canScrollNext, setCanScrollNext] = useState(false);
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
   useEffect(() => {
     if (!carouselApi) {
       return;
@@ -1078,7 +1081,27 @@ function CarouselDemoLink({
       carouselApi.off("select", updateSelection);
     };
   }, [carouselApi]);
-  const renderDemoAction = () => {
+  const lightboxItems = useMemo(
+    () => (items ?? []).map((item, index) => ({
+      id: `demo-card-${index}`,
+      type: "image",
+      src: item.image,
+      alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
+      download: true,
+      share: true
+    })),
+    [items]
+  );
+  const handleImageClick = useCallback((index, e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setLightboxIndex(index);
+    setLightboxOpen(true);
+  }, []);
+  const handleLightboxClose = useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
+  const demoActionContent = useMemo(() => {
     if (demoActionSlot) return demoActionSlot;
     if (!demoAction) return null;
     const {
@@ -1112,11 +1135,11 @@ function CarouselDemoLink({
         ] })
       }
     );
-  };
-  const renderItems = () => {
+  }, [demoActionSlot, demoAction, demoLinkClassName]);
+  const itemsContent = useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
-    return items.map((item) => /* @__PURE__ */ jsx(
+    return items.map((item, index) => /* @__PURE__ */ jsx(
       CarouselItem,
       {
         className: cn("ml-8 md:max-w-[452px]", itemClassName),
@@ -1130,22 +1153,38 @@ function CarouselDemoLink({
               cardClassName
             ),
             children: [
-              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: "flex aspect-3/2 overflow-clip rounded-xl", children: /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105", children: /* @__PURE__ */ jsx(
-                Img,
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: "flex aspect-3/2 overflow-clip rounded-xl", children: /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+                "div",
                 {
-                  src: item.image,
-                  alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
-                  className: cn(
-                    "h-full w-full object-cover object-center",
-                    imageClassName
-                  ),
-                  loading: "lazy",
-                  optixFlowConfig
+                  className: "relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105 cursor-pointer",
+                  onClick: (e) => handleImageClick(index, e),
+                  role: "button",
+                  tabIndex: 0,
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      handleImageClick(index, e);
+                    }
+                  },
+                  "aria-label": `View ${typeof item.title === "string" ? item.title : "image"} in lightbox`,
+                  children: /* @__PURE__ */ jsx(
+                    Img,
+                    {
+                      src: item.image,
+                      alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
+                      className: cn(
+                        "h-full w-full object-cover object-center",
+                        imageClassName
+                      ),
+                      loading: "lazy",
+                      optixFlowConfig
+                    }
+                  )
                 }
-              ) }) }) }) }),
+              ) }) }) }),
               /* @__PURE__ */ jsx("div", { className: "mb-2 line-clamp-3 pt-4 text-lg font-medium wrap-break-word md:mb-3 md:pt-4 md:text-xl lg:pt-4 lg:text-2xl", children: item.title }),
               /* @__PURE__ */ jsx("div", { className: "mb-8 line-clamp-2 text-sm text-muted-foreground md:mb-12 md:text-base lg:mb-9", children: item.summary }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center text-sm", children: [
+              readMoreText && /* @__PURE__ */ jsxs("div", { className: "flex items-center text-sm", children: [
                 readMoreText,
                 " ",
                 /* @__PURE__ */ jsx(
@@ -1163,7 +1202,16 @@ function CarouselDemoLink({
       },
       item.id
     ));
-  };
+  }, [
+    itemsSlot,
+    items,
+    itemClassName,
+    cardClassName,
+    imageClassName,
+    optixFlowConfig,
+    readMoreText,
+    handleImageClick
+  ]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -1193,7 +1241,7 @@ function CarouselDemoLink({
                     children: heading
                   }
                 ) : /* @__PURE__ */ jsx("div", { className: cn("mb-3 md:mb-4 lg:mb-6", headingClassName), children: heading })),
-                renderDemoAction()
+                demoActionContent
               ] }),
               /* @__PURE__ */ jsxs(
                 "div",
@@ -1257,11 +1305,32 @@ function CarouselDemoLink({
                   "hide-scrollbar w-full max-w-full md:-mr-4 md:ml-8 2xl:mr-[max(0rem,calc(50vw-700px-1rem))] 2xl:ml-[max(8rem,calc(50vw-700px+1rem))]",
                   carouselContentClassName
                 ),
-                children: renderItems()
+                children: itemsContent
               }
             )
           }
-        ) })
+        ) }),
+        lightboxOpen && /* @__PURE__ */ jsx(
+          Lightbox,
+          {
+            items: lightboxItems,
+            initialIndex: lightboxIndex,
+            layout: "horizontal",
+            controls: {
+              navigation: true,
+              thumbnails: true,
+              download: true,
+              share: true,
+              fullscreen: true,
+              captions: true,
+              counter: true
+            },
+            onClose: handleLightboxClose,
+            enableKeyboardShortcuts: true,
+            closeOnEscape: true,
+            closeOnBackdropClick: true
+          }
+        )
       ]
     }
   );