@dododog/ui 0.14.1 → 0.16.0

package/dist/{chunk-I4S3R6C6.js → chunk-JUB3NGJR.js}

@@ -54,17 +54,47 @@ var switchThumbVariants = classVarianceAuthority.cva(
   }
 );
 var Switch = React__namespace.forwardRef(
-  ({ checked = false, onCheckedChange, disabled = false, size, label, description, className, name }, ref) => {
-    const id = React__namespace.useId();
+  ({
+    checked = false,
+    onCheckedChange,
+    disabled = false,
+    size,
+    label,
+    description,
+    className,
+    name,
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy
+  }, ref) => {
+    const generatedId = React__namespace.useId();
+    const switchId = id ?? generatedId;
+    const labelId = `${switchId}-label`;
+    const descriptionId = `${switchId}-description`;
+    const labelledBy = [label ? labelId : null, ariaLabelledBy].filter(Boolean).join(" ") || void 0;
+    const resolvedAriaLabel = labelledBy ? void 0 : ariaLabel ?? name;
+    const describedBy = [description ? descriptionId : null, ariaDescribedBy].filter(Boolean).join(" ") || void 0;
+    const hasAccessibleName = Boolean(labelledBy || resolvedAriaLabel);
+    React__namespace.useEffect(() => {
+      if (hasAccessibleName) return;
+      if (typeof process === "undefined") return;
+      if (process.env.NODE_ENV === "production") return;
+      console.warn(
+        "[@dododog/ui] Switch sans nom accessible : passer `label`, `aria-labelledby` ou `aria-label`."
+      );
+    }, [hasAccessibleName]);
     const track = /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         ref,
-        id,
+        id: switchId,
         type: "button",
         role: "switch",
         "aria-checked": checked,
-        "aria-label": !label ? name : void 0,
+        "aria-labelledby": labelledBy,
+        "aria-label": resolvedAriaLabel,
+        "aria-describedby": describedBy,
         disabled,
         onClick: () => onCheckedChange?.(!checked),
         className: chunkADIDI7AJ_js.cn(
@@ -91,8 +121,23 @@ var Switch = React__namespace.forwardRef(
     if (!label && !description) return track;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkADIDI7AJ_js.cn("flex items-center justify-between gap-3", className), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "text-sm font-medium text-primary cursor-pointer", children: label }),
-        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-text-secondary mt-0.5", children: description })
+        label && /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
+          {
+            id: labelId,
+            htmlFor: switchId,
+            className: "text-sm font-medium text-primary cursor-pointer",
+            children: label
+          }
+        ),
+        description && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            id: descriptionId,
+            className: "text-xs text-text-secondary mt-0.5",
+            children: description
+          }
+        )
       ] }),
       track
     ] });

package/dist/chunk-JWQ2OUEG.js

@@ -0,0 +1,132 @@
+'use strict';
+
+var chunkADIDI7AJ_js = require('./chunk-ADIDI7AJ.js');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var SIDE_CLASSES = {
+  right: "top-0 bottom-0 right-0 w-full max-w-md",
+  left: "top-0 bottom-0 left-0 w-full max-w-md",
+  bottom: "inset-x-0 bottom-0 w-full max-h-[90dvh] rounded-t-3xl"
+};
+var Drawer = React__namespace.forwardRef(
+  ({
+    isOpen,
+    onClose,
+    children,
+    side = "right",
+    title,
+    labelledById,
+    className,
+    overlayClassName,
+    contentClassName,
+    closeLabel = "Fermer"
+  }, ref) => {
+    React__namespace.useEffect(() => {
+      if (!isOpen) return;
+      const handleKeyDown = (e) => {
+        if (e.key === "Escape") onClose();
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isOpen, onClose]);
+    React__namespace.useEffect(() => {
+      if (!isOpen) return;
+      const prev = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = prev;
+      };
+    }, [isOpen]);
+    if (!isOpen) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: chunkADIDI7AJ_js.cn("fixed inset-0 z-50", overlayClassName),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": labelledById,
+        "aria-label": labelledById ? void 0 : title,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute inset-0 bg-black/50 transition-opacity",
+              onClick: onClose,
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: chunkADIDI7AJ_js.cn(
+                "absolute bg-white shadow-xl flex flex-col overflow-hidden",
+                SIDE_CLASSES[side],
+                className
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: chunkADIDI7AJ_js.cn(
+                      "flex items-center gap-2 px-4 h-16 shrink-0",
+                      title ? "justify-between border-b border-gray-100" : "justify-end"
+                    ),
+                    children: [
+                      title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-heading font-semibold text-primary truncate", children: title }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: onClose,
+                          className: "p-2 hover:bg-gray-100 rounded-full transition-colors shrink-0",
+                          "aria-label": closeLabel,
+                          children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
+                            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
+                          ] })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    "data-drawer-content": "",
+                    className: chunkADIDI7AJ_js.cn("flex-1 overflow-y-auto overscroll-contain", contentClassName),
+                    children
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Drawer.displayName = "Drawer";
+
+exports.Drawer = Drawer;

package/dist/{chunk-EEIPCJQ2.mjs → chunk-KWQKC5TG.mjs}

@@ -63,7 +63,7 @@ var Checkbox = React.forwardRef(
           ]
         }
       ),
-      error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-red-500", children: error })
+      error && /* @__PURE__ */ jsx("p", { role: "alert", className: "mt-1 text-sm text-red-600", children: error })
     ] });
   }
 );

package/dist/{chunk-IJIUUBFT.js → chunk-OUN5BU4Z.js}

@@ -85,7 +85,7 @@ var Checkbox = React__namespace.forwardRef(
           ]
         }
       ),
-      error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-red-500", children: error })
+      error && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "mt-1 text-sm text-red-600", children: error })
     ] });
   }
 );

package/dist/{chunk-DMCMWOBJ.mjs → chunk-PBXH4I5N.mjs}

@@ -32,17 +32,47 @@ var switchThumbVariants = cva(
   }
 );
 var Switch = React.forwardRef(
-  ({ checked = false, onCheckedChange, disabled = false, size, label, description, className, name }, ref) => {
-    const id = React.useId();
+  ({
+    checked = false,
+    onCheckedChange,
+    disabled = false,
+    size,
+    label,
+    description,
+    className,
+    name,
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy
+  }, ref) => {
+    const generatedId = React.useId();
+    const switchId = id ?? generatedId;
+    const labelId = `${switchId}-label`;
+    const descriptionId = `${switchId}-description`;
+    const labelledBy = [label ? labelId : null, ariaLabelledBy].filter(Boolean).join(" ") || void 0;
+    const resolvedAriaLabel = labelledBy ? void 0 : ariaLabel ?? name;
+    const describedBy = [description ? descriptionId : null, ariaDescribedBy].filter(Boolean).join(" ") || void 0;
+    const hasAccessibleName = Boolean(labelledBy || resolvedAriaLabel);
+    React.useEffect(() => {
+      if (hasAccessibleName) return;
+      if (typeof process === "undefined") return;
+      if (process.env.NODE_ENV === "production") return;
+      console.warn(
+        "[@dododog/ui] Switch sans nom accessible : passer `label`, `aria-labelledby` ou `aria-label`."
+      );
+    }, [hasAccessibleName]);
     const track = /* @__PURE__ */ jsxs(
       "button",
       {
         ref,
-        id,
+        id: switchId,
         type: "button",
         role: "switch",
         "aria-checked": checked,
-        "aria-label": !label ? name : void 0,
+        "aria-labelledby": labelledBy,
+        "aria-label": resolvedAriaLabel,
+        "aria-describedby": describedBy,
         disabled,
         onClick: () => onCheckedChange?.(!checked),
         className: cn(
@@ -69,8 +99,23 @@ var Switch = React.forwardRef(
     if (!label && !description) return track;
     return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between gap-3", className), children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        label && /* @__PURE__ */ jsx("label", { htmlFor: id, className: "text-sm font-medium text-primary cursor-pointer", children: label }),
-        description && /* @__PURE__ */ jsx("p", { className: "text-xs text-text-secondary mt-0.5", children: description })
+        label && /* @__PURE__ */ jsx(
+          "label",
+          {
+            id: labelId,
+            htmlFor: switchId,
+            className: "text-sm font-medium text-primary cursor-pointer",
+            children: label
+          }
+        ),
+        description && /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: descriptionId,
+            className: "text-xs text-text-secondary mt-0.5",
+            children: description
+          }
+        )
       ] }),
       track
     ] });

package/dist/{chunk-ERL3WXNY.mjs → chunk-PZZWQ6IG.mjs}

@@ -30,12 +30,12 @@ var DualRangeSlider = React.forwardRef(
     const labelMin = formatLabel ? formatLabel(valueMin, "min") : String(valueMin);
     const labelMax = formatLabel ? formatLabel(valueMax, "max") : String(valueMax);
     return /* @__PURE__ */ jsxs("div", { ref, className: cn("w-full", className), children: [
-      /* @__PURE__ */ jsxs("div", { className: "relative h-2", children: [
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full bg-gray-200" }),
+      /* @__PURE__ */ jsxs("div", { className: "relative h-6", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-1/2 h-2 -translate-y-1/2 rounded-full bg-gray-200" }),
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "absolute h-full rounded-full bg-secondary",
+            className: "absolute top-1/2 h-2 -translate-y-1/2 rounded-full bg-secondary",
             style: { left: `${leftPercent}%`, right: `${rightPercent}%` }
           }
         ),
@@ -50,7 +50,7 @@ var DualRangeSlider = React.forwardRef(
             onChange: handleMinChange,
             "aria-label": "Minimum",
             className: cn(
-              "absolute w-full h-2 appearance-none bg-transparent pointer-events-none",
+              "absolute inset-0 h-6 w-full appearance-none bg-transparent pointer-events-none",
               // Webkit thumb
               "[&::-webkit-slider-thumb]:pointer-events-auto",
               "[&::-webkit-slider-thumb]:appearance-none",
@@ -82,7 +82,7 @@ var DualRangeSlider = React.forwardRef(
             onChange: handleMaxChange,
             "aria-label": "Maximum",
             className: cn(
-              "absolute w-full h-2 appearance-none bg-transparent pointer-events-none",
+              "absolute inset-0 h-6 w-full appearance-none bg-transparent pointer-events-none",
               "[&::-webkit-slider-thumb]:pointer-events-auto",
               "[&::-webkit-slider-thumb]:appearance-none",
               "[&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5",

package/dist/{chunk-L7OYR6U3.js → chunk-R4G5LFPN.js}

@@ -65,7 +65,7 @@ var Textarea = React__namespace.forwardRef(
           ...props
         }
       ),
-      error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-red-500", children: error })
+      error && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "mt-1 text-sm text-red-600", children: error })
     ] });
   }
 );

package/dist/{chunk-F2BUMJYW.mjs → chunk-RBVTV3LA.mjs}

@@ -55,7 +55,7 @@ var RadioGroup = React.forwardRef(
           })
         }
       ),
-      error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-red-500", children: error })
+      error && /* @__PURE__ */ jsx("p", { role: "alert", className: "mt-1 text-sm text-red-600", children: error })
     ] });
   }
 );

package/dist/{chunk-B47HQHX3.mjs → chunk-RGZHSI2G.mjs}

@@ -178,7 +178,7 @@ var Autocomplete = React.forwardRef(
           }
         )
       ] }),
-      error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-red-500", children: error })
+      error && /* @__PURE__ */ jsx("p", { role: "alert", className: "mt-1 text-sm text-red-600", children: error })
     ] });
   }
 );

package/dist/{chunk-GXKON34B.js → chunk-RTI25IBR.js}

@@ -77,7 +77,7 @@ var RadioGroup = React__namespace.forwardRef(
           })
         }
       ),
-      error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-red-500", children: error })
+      error && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "mt-1 text-sm text-red-600", children: error })
     ] });
   }
 );

package/dist/{chunk-GBWVIY3C.mjs → chunk-UJEIFKSK.mjs}

@@ -2,10 +2,30 @@ import { cn } from './chunk-IMKLN273.mjs';
 import * as React from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
+var FOCUSABLE_SELECTOR = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 var Lightbox = React.forwardRef(
-  ({ images, initialIndex = 0, open, onClose, className }, ref) => {
+  ({
+    images,
+    initialIndex = 0,
+    open,
+    onClose,
+    className,
+    "aria-label": ariaLabel = "Visionneuse d'images"
+  }, ref) => {
     const [current, setCurrent] = React.useState(initialIndex);
     const touchStartX = React.useRef(0);
+    const containerRef = React.useRef(null);
+    const setRefs = React.useCallback(
+      (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
     React.useEffect(() => {
       if (open) setCurrent(initialIndex);
     }, [open, initialIndex]);
@@ -15,6 +35,28 @@ var Lightbox = React.forwardRef(
         if (e.key === "Escape") onClose();
         if (e.key === "ArrowLeft") setCurrent((c) => (c - 1 + images.length) % images.length);
         if (e.key === "ArrowRight") setCurrent((c) => (c + 1) % images.length);
+        if (e.key === "Tab") {
+          const node = containerRef.current;
+          if (!node) return;
+          const items = Array.from(
+            node.querySelectorAll(FOCUSABLE_SELECTOR)
+          );
+          if (items.length === 0) {
+            e.preventDefault();
+            return;
+          }
+          const first = items[0];
+          const last = items[items.length - 1];
+          const active = document.activeElement;
+          const inside = active instanceof Node && node.contains(active);
+          if (e.shiftKey && (!inside || active === first)) {
+            e.preventDefault();
+            last.focus();
+          } else if (!e.shiftKey && (!inside || active === last)) {
+            e.preventDefault();
+            first.focus();
+          }
+        }
       }
       document.addEventListener("keydown", handleKeyDown);
       document.body.style.overflow = "hidden";
@@ -23,13 +65,24 @@ var Lightbox = React.forwardRef(
         document.body.style.overflow = "";
       };
     }, [open, images.length, onClose]);
+    React.useEffect(() => {
+      if (!open) return;
+      const previouslyFocused = document.activeElement;
+      const node = containerRef.current;
+      const target = node?.querySelector(FOCUSABLE_SELECTOR) ?? node ?? null;
+      target?.focus?.();
+      return () => {
+        previouslyFocused?.focus?.();
+      };
+    }, [open]);
     if (!open || images.length === 0) return null;
     const prev = () => setCurrent((c) => (c - 1 + images.length) % images.length);
     const next = () => setCurrent((c) => (c + 1) % images.length);
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        ref,
+        ref: setRefs,
+        tabIndex: -1,
         className: cn(
           "fixed inset-0 z-50 flex items-center justify-center bg-black/90",
           className
@@ -37,14 +90,14 @@ var Lightbox = React.forwardRef(
         onClick: onClose,
         role: "dialog",
         "aria-modal": "true",
-        "aria-label": "Image viewer",
+        "aria-label": ariaLabel,
         children: [
           /* @__PURE__ */ jsx(
             "button",
             {
               onClick: onClose,
               className: "absolute top-4 right-4 z-10 w-10 h-10 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center text-white hover:bg-white/20 transition-colors",
-              "aria-label": "Close",
+              "aria-label": "Fermer la visionneuse",
               children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
                 /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
                 /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
@@ -52,9 +105,12 @@ var Lightbox = React.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "absolute top-4 left-4 z-10 px-3 py-1.5 rounded-full bg-white/10 backdrop-blur-sm text-white text-sm", children: [
-            current + 1,
-            " / ",
-            images.length
+            /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
+              current + 1,
+              " / ",
+              images.length
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: `Image ${current + 1} sur ${images.length}` })
           ] }),
           /* @__PURE__ */ jsx(
             "div",
@@ -90,7 +146,7 @@ var Lightbox = React.forwardRef(
                   prev();
                 },
                 className: "absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center text-white hover:bg-white/20 transition-colors",
-                "aria-label": "Previous image",
+                "aria-label": "Image pr\xE9c\xE9dente",
                 children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) })
               }
             ),
@@ -102,33 +158,44 @@ var Lightbox = React.forwardRef(
                   next();
                 },
                 className: "absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center text-white hover:bg-white/20 transition-colors",
-                "aria-label": "Next image",
+                "aria-label": "Image suivante",
                 children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) })
               }
             )
           ] }),
-          images.length > 1 && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 max-w-[80vw] overflow-x-auto px-4 py-2", children: images.map((img, i) => /* @__PURE__ */ jsx(
-            "button",
+          images.length > 1 && /* @__PURE__ */ jsx(
+            "div",
             {
-              onClick: (e) => {
-                e.stopPropagation();
-                setCurrent(i);
-              },
-              className: cn(
-                "w-16 h-12 rounded-lg overflow-hidden flex-shrink-0 border-2 transition-all",
-                i === current ? "border-white opacity-100" : "border-transparent opacity-50 hover:opacity-75"
-              ),
-              children: /* @__PURE__ */ jsx(
-                "img",
+              role: "group",
+              "aria-label": "Vignettes des images",
+              className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 max-w-[80vw] overflow-x-auto px-4 py-2",
+              children: images.map((img, i) => /* @__PURE__ */ jsx(
+                "button",
                 {
-                  src: img.src,
-                  alt: img.alt,
-                  className: "w-full h-full object-cover"
-                }
-              )
-            },
-            i
-          )) })
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setCurrent(i);
+                  },
+                  "aria-label": `Afficher l'image ${i + 1} : ${img.alt}`,
+                  "aria-current": i === current ? "true" : void 0,
+                  className: cn(
+                    "w-16 h-12 rounded-lg overflow-hidden flex-shrink-0 border-2 transition-all",
+                    i === current ? "border-white opacity-100" : "border-transparent opacity-50 hover:opacity-75"
+                  ),
+                  children: /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: img.src,
+                      alt: "",
+                      "aria-hidden": "true",
+                      className: "w-full h-full object-cover"
+                    }
+                  )
+                },
+                i
+              ))
+            }
+          )
         ]
       }
     );