@enadhq/enad-react-sdk 1.0.2 → 1.1.0

package/dist/client/storefront/components/quick-view.mjs

@@ -1,149 +1,155 @@
 "use client";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { cn } from "../../ui/utils.mjs";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "../../ui-resolver/sheet.mjs";
+import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { cn } from "../../ui/utils";
-import { useIcon } from "../../icons/icon-context";
-import { Sheet, SheetContent, SheetHeader, SheetTitle } from "../../ui-resolver/sheet";
-function QuickView({
-  open,
-  onOpenChange,
-  product,
-  mode = "sheet",
-  side = "right",
-  viewDetailsLabel = "View full details",
-  children,
-  className
-}) {
-  const CloseIcon = useIcon("close");
-  const titleId = React.useId();
-  if (!product) return null;
-  const { title, images = [], price, description, href } = product;
-  const imageContent = /* @__PURE__ */ jsx(QuickViewGallery, { images });
-  const content = /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6", className), children: [
-    imageContent,
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 px-1", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx("h3", { id: titleId, className: "font-enad text-lg font-semibold leading-tight", children: title }),
-        price && /* @__PURE__ */ jsx("div", { className: "text-base", children: price })
-      ] }),
-      description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground leading-relaxed", children: description }),
-      children,
-      href && /* @__PURE__ */ jsx(
-        "a",
-        {
-          href,
-          className: "mt-2 text-sm font-medium underline underline-offset-4 hover:text-primary transition-colors",
-          children: viewDetailsLabel
-        }
-      )
-    ] })
-  ] });
-  if (mode === "modal") {
-    return /* @__PURE__ */ jsx(ModalOverlay, { open, onOpenChange, labelId: titleId, children: /* @__PURE__ */ jsxs("div", { className: "relative max-h-[85vh] overflow-y-auto rounded-lg bg-background p-6 shadow-lg sm:max-w-lg w-full", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => onOpenChange(false),
-          className: "absolute right-4 top-4 z-10 rounded-sm p-1 opacity-70 hover:opacity-100 transition-opacity",
-          "aria-label": "Close",
-          children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
-        }
-      ),
-      content
-    ] }) });
-  }
-  return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs(SheetContent, { side, className: "overflow-y-auto sm:max-w-md", children: [
-    /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: title }) }),
-    content
-  ] }) });
+//#region src/client/storefront/components/quick-view.tsx
+function QuickView({ open, onOpenChange, product, mode = "sheet", side = "right", viewDetailsLabel = "View full details", children, className }) {
+	const CloseIcon = useIcon("close");
+	const titleId = React$1.useId();
+	if (!product) return null;
+	const { title, images = [], price, description, href } = product;
+	const imageContent = /* @__PURE__ */ jsx(QuickViewGallery, { images });
+	const content = /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-6", className),
+		children: [imageContent, /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4 px-1",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ jsx("h3", {
+						id: titleId,
+						className: "font-enad text-lg font-semibold leading-tight",
+						children: title
+					}), price && /* @__PURE__ */ jsx("div", {
+						className: "text-base",
+						children: price
+					})]
+				}),
+				description && /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground leading-relaxed",
+					children: description
+				}),
+				children,
+				href && /* @__PURE__ */ jsx("a", {
+					href,
+					className: "mt-2 text-sm font-medium underline underline-offset-4 hover:text-primary transition-colors",
+					children: viewDetailsLabel
+				})
+			]
+		})]
+	});
+	if (mode === "modal") return /* @__PURE__ */ jsx(ModalOverlay, {
+		open,
+		onOpenChange,
+		labelId: titleId,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative max-h-[85vh] overflow-y-auto rounded-lg bg-background p-6 shadow-lg sm:max-w-lg w-full",
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => onOpenChange(false),
+				className: "absolute right-4 top-4 z-10 rounded-sm p-1 opacity-70 hover:opacity-100 transition-opacity",
+				"aria-label": "Close",
+				children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
+			}), content]
+		})
+	});
+	return /* @__PURE__ */ jsx(Sheet, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(SheetContent, {
+			side,
+			className: "overflow-y-auto sm:max-w-md",
+			children: [/* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, {
+				className: "sr-only",
+				children: title
+			}) }), content]
+		})
+	});
 }
 function QuickViewGallery({ images }) {
-  const [activeIndex, setActiveIndex] = React.useState(0);
-  if (images.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: "aspect-[4/5] w-full rounded-md bg-muted" });
-  }
-  const active = images[activeIndex];
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsx("div", { className: "relative aspect-[4/5] w-full overflow-hidden rounded-md bg-muted", children: /* @__PURE__ */ jsx("img", { src: active.src, alt: active.alt ?? "", className: "size-full object-cover" }) }),
-    images.length > 1 && /* @__PURE__ */ jsx("div", { className: "flex gap-2 overflow-x-auto pb-1", children: images.map((img, i) => /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => setActiveIndex(i),
-        className: cn(
-          "relative size-14 shrink-0 overflow-hidden rounded-md border-2 transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none",
-          i === activeIndex ? "border-primary" : "border-transparent hover:border-muted-foreground/30"
-        ),
-        children: /* @__PURE__ */ jsx("img", { src: img.src, alt: img.alt ?? "", className: "size-full object-cover" })
-      },
-      i
-    )) })
-  ] });
+	const [activeIndex, setActiveIndex] = React$1.useState(0);
+	if (images.length === 0) return /* @__PURE__ */ jsx("div", { className: "aspect-[4/5] w-full rounded-md bg-muted" });
+	const active = images[activeIndex];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "relative aspect-[4/5] w-full overflow-hidden rounded-md bg-muted",
+			children: /* @__PURE__ */ jsx("img", {
+				src: active.src,
+				alt: active.alt ?? "",
+				className: "size-full object-cover"
+			})
+		}), images.length > 1 && /* @__PURE__ */ jsx("div", {
+			className: "flex gap-2 overflow-x-auto pb-1",
+			children: images.map((img, i) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => setActiveIndex(i),
+				className: cn("relative size-14 shrink-0 overflow-hidden rounded-md border-2 transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none", i === activeIndex ? "border-primary" : "border-transparent hover:border-muted-foreground/30"),
+				children: /* @__PURE__ */ jsx("img", {
+					src: img.src,
+					alt: img.alt ?? "",
+					loading: "lazy",
+					className: "size-full object-cover"
+				})
+			}, i))
+		})]
+	});
 }
-function ModalOverlay({
-  open,
-  onOpenChange,
-  children,
-  labelId
-}) {
-  const overlayRef = React.useRef(null);
-  const previousFocusRef = React.useRef(null);
-  React.useEffect(() => {
-    if (open) {
-      previousFocusRef.current = document.activeElement;
-      requestAnimationFrame(() => overlayRef.current?.focus());
-    } else if (previousFocusRef.current) {
-      previousFocusRef.current.focus();
-      previousFocusRef.current = null;
-    }
-  }, [open]);
-  React.useEffect(() => {
-    if (!open) return;
-    const handleKey = (e) => {
-      if (e.key === "Escape") {
-        onOpenChange(false);
-        return;
-      }
-      if (e.key === "Tab") {
-        const dialog = overlayRef.current;
-        if (!dialog) return;
-        const focusable = dialog.querySelectorAll(
-          'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
-        );
-        if (focusable.length === 0) return;
-        const first = focusable[0];
-        const last = focusable[focusable.length - 1];
-        if (e.shiftKey && document.activeElement === first) {
-          e.preventDefault();
-          last.focus();
-        } else if (!e.shiftKey && document.activeElement === last) {
-          e.preventDefault();
-          first.focus();
-        }
-      }
-    };
-    document.addEventListener("keydown", handleKey);
-    return () => document.removeEventListener("keydown", handleKey);
-  }, [open, onOpenChange]);
-  if (!open) return null;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: overlayRef,
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-labelledby": labelId,
-      tabIndex: -1,
-      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-[2px] outline-none",
-      onClick: (e) => {
-        if (e.target === overlayRef.current) onOpenChange(false);
-      },
-      children
-    }
-  );
+function ModalOverlay({ open, onOpenChange, children, labelId }) {
+	const overlayRef = React$1.useRef(null);
+	const previousFocusRef = React$1.useRef(null);
+	React$1.useEffect(() => {
+		if (open) {
+			previousFocusRef.current = document.activeElement;
+			requestAnimationFrame(() => overlayRef.current?.focus());
+		} else if (previousFocusRef.current) {
+			previousFocusRef.current.focus();
+			previousFocusRef.current = null;
+		}
+	}, [open]);
+	React$1.useEffect(() => {
+		if (!open) return;
+		const handleKey = (e) => {
+			if (e.key === "Escape") {
+				onOpenChange(false);
+				return;
+			}
+			if (e.key === "Tab") {
+				const dialog = overlayRef.current;
+				if (!dialog) return;
+				const focusable = dialog.querySelectorAll("a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex=\"-1\"])");
+				if (focusable.length === 0) return;
+				const first = focusable[0];
+				const last = focusable[focusable.length - 1];
+				if (e.shiftKey && document.activeElement === first) {
+					e.preventDefault();
+					last.focus();
+				} else if (!e.shiftKey && document.activeElement === last) {
+					e.preventDefault();
+					first.focus();
+				}
+			}
+		};
+		document.addEventListener("keydown", handleKey);
+		return () => document.removeEventListener("keydown", handleKey);
+	}, [open, onOpenChange]);
+	if (!open) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref: overlayRef,
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-labelledby": labelId,
+		tabIndex: -1,
+		className: "fixed inset-0 z-50 flex items-center justify-center bg-(--enad-overlay-color)/50 backdrop-blur-[2px] outline-none",
+		onClick: (e) => {
+			if (e.target === overlayRef.current) onOpenChange(false);
+		},
+		children
+	});
 }
-export {
-  QuickView
-};
+//#endregion
+export { QuickView };
+
 //# sourceMappingURL=quick-view.mjs.map

package/dist/client/storefront/components/quick-view.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/client/storefront/components/quick-view.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetClose } from \"../../ui-resolver/sheet\";\nimport type { ImageAsset } from \"../types\";\n\n/* ─── Types ─── */\n\nexport interface QuickViewProduct {\n  title: string;\n  images?: ImageAsset[];\n  price?: React.ReactNode;\n  description?: string;\n  href?: string;\n}\n\nexport interface QuickViewProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  product: QuickViewProduct | null;\n  /** Presentation mode */\n  mode?: \"sheet\" | \"modal\";\n  /** Side when mode is \"sheet\" */\n  side?: \"right\" | \"left\";\n  /** Slot for variant selector, add-to-cart, wishlist, etc. */\n  children?: React.ReactNode;\n  /** Link label for \"View full details\" */\n  viewDetailsLabel?: string;\n  className?: string;\n}\n\n/* ─── Component ─── */\n\nexport function QuickView({\n  open,\n  onOpenChange,\n  product,\n  mode = \"sheet\",\n  side = \"right\",\n  viewDetailsLabel = \"View full details\",\n  children,\n  className,\n}: QuickViewProps) {\n  const CloseIcon = useIcon(\"close\");\n  const titleId = React.useId();\n\n  if (!product) return null;\n\n  const { title, images = [], price, description, href } = product;\n\n  const imageContent = <QuickViewGallery images={images} />;\n\n  const content = (\n    <div className={cn(\"flex flex-col gap-6\", className)}>\n      {imageContent}\n\n      <div className=\"flex flex-col gap-4 px-1\">\n        <div className=\"flex flex-col gap-1\">\n          <h3 id={titleId} className=\"font-enad text-lg font-semibold leading-tight\">\n            {title}\n          </h3>\n          {price && <div className=\"text-base\">{price}</div>}\n        </div>\n\n        {description && (\n          <p className=\"text-sm text-muted-foreground leading-relaxed\">{description}</p>\n        )}\n\n        {children}\n\n        {href && (\n          <a\n            href={href}\n            className=\"mt-2 text-sm font-medium underline underline-offset-4 hover:text-primary transition-colors\"\n          >\n            {viewDetailsLabel}\n          </a>\n        )}\n      </div>\n    </div>\n  );\n\n  if (mode === \"modal\") {\n    return (\n      <ModalOverlay open={open} onOpenChange={onOpenChange} labelId={titleId}>\n        <div className=\"relative max-h-[85vh] overflow-y-auto rounded-lg bg-background p-6 shadow-lg sm:max-w-lg w-full\">\n          <button\n            type=\"button\"\n            onClick={() => onOpenChange(false)}\n            className=\"absolute right-4 top-4 z-10 rounded-sm p-1 opacity-70 hover:opacity-100 transition-opacity\"\n            aria-label=\"Close\"\n          >\n            <CloseIcon className=\"size-4\" />\n          </button>\n          {content}\n        </div>\n      </ModalOverlay>\n    );\n  }\n\n  return (\n    <Sheet open={open} onOpenChange={onOpenChange}>\n      <SheetContent side={side} className=\"overflow-y-auto sm:max-w-md\">\n        <SheetHeader>\n          <SheetTitle className=\"sr-only\">{title}</SheetTitle>\n        </SheetHeader>\n        {content}\n      </SheetContent>\n    </Sheet>\n  );\n}\n\n/* ─── Gallery (internal) ─── */\n\nfunction QuickViewGallery({ images }: { images: ImageAsset[] }) {\n  const [activeIndex, setActiveIndex] = React.useState(0);\n\n  if (images.length === 0) {\n    return <div className=\"aspect-[4/5] w-full rounded-md bg-muted\" />;\n  }\n\n  const active = images[activeIndex]!;\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div className=\"relative aspect-[4/5] w-full overflow-hidden rounded-md bg-muted\">\n        <img src={active.src} alt={active.alt ?? \"\"} className=\"size-full object-cover\" />\n      </div>\n\n      {images.length > 1 && (\n        <div className=\"flex gap-2 overflow-x-auto pb-1\">\n          {images.map((img, i) => (\n            <button\n              key={i}\n              type=\"button\"\n              onClick={() => setActiveIndex(i)}\n              className={cn(\n                \"relative size-14 shrink-0 overflow-hidden rounded-md border-2 transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none\",\n                i === activeIndex\n                  ? \"border-primary\"\n                  : \"border-transparent hover:border-muted-foreground/30\",\n              )}\n            >\n              <img src={img.src} alt={img.alt ?? \"\"} className=\"size-full object-cover\" />\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/* ─── Modal overlay (internal) ─── */\n\nfunction ModalOverlay({\n  open,\n  onOpenChange,\n  children,\n  labelId,\n}: {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  children: React.ReactNode;\n  labelId?: string;\n}) {\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n  const previousFocusRef = React.useRef<HTMLElement | null>(null);\n\n  // Capture triggering element and manage focus\n  React.useEffect(() => {\n    if (open) {\n      previousFocusRef.current = document.activeElement as HTMLElement | null;\n      // Focus the dialog container after mount\n      requestAnimationFrame(() => overlayRef.current?.focus());\n    } else if (previousFocusRef.current) {\n      previousFocusRef.current.focus();\n      previousFocusRef.current = null;\n    }\n  }, [open]);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handleKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        onOpenChange(false);\n        return;\n      }\n      // Focus trap: cycle Tab within the dialog\n      if (e.key === \"Tab\") {\n        const dialog = overlayRef.current;\n        if (!dialog) return;\n        const focusable = dialog.querySelectorAll<HTMLElement>(\n          'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex=\"-1\"])',\n        );\n        if (focusable.length === 0) return;\n        const first = focusable[0]!;\n        const last = focusable[focusable.length - 1]!;\n        if (e.shiftKey && document.activeElement === first) {\n          e.preventDefault();\n          last.focus();\n        } else if (!e.shiftKey && document.activeElement === last) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    };\n    document.addEventListener(\"keydown\", handleKey);\n    return () => document.removeEventListener(\"keydown\", handleKey);\n  }, [open, onOpenChange]);\n\n  if (!open) return null;\n\n  return (\n    <div\n      ref={overlayRef}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={labelId}\n      tabIndex={-1}\n      className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-[2px] outline-none\"\n      onClick={(e) => {\n        if (e.target === overlayRef.current) onOpenChange(false);\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"file":"quick-view.mjs","names":["React"],"sources":["../../../../src/client/storefront/components/quick-view.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { Sheet, SheetContent, SheetHeader, SheetTitle } from \"../../ui-resolver/sheet\";\nimport type { ImageAsset } from \"../types\";\n\n/* ─── Types ─── */\n\nexport interface QuickViewProduct {\n  title: string;\n  images?: ImageAsset[];\n  price?: React.ReactNode;\n  description?: string;\n  href?: string;\n}\n\nexport interface QuickViewProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  product: QuickViewProduct | null;\n  /** Presentation mode */\n  mode?: \"sheet\" | \"modal\";\n  /** Side when mode is \"sheet\" */\n  side?: \"right\" | \"left\";\n  /** Slot for variant selector, add-to-cart, wishlist, etc. */\n  children?: React.ReactNode;\n  /** Link label for \"View full details\" */\n  viewDetailsLabel?: string;\n  className?: string;\n}\n\n/* ─── Component ─── */\n\nexport function QuickView({\n  open,\n  onOpenChange,\n  product,\n  mode = \"sheet\",\n  side = \"right\",\n  viewDetailsLabel = \"View full details\",\n  children,\n  className,\n}: QuickViewProps) {\n  const CloseIcon = useIcon(\"close\");\n  const titleId = React.useId();\n\n  if (!product) return null;\n\n  const { title, images = [], price, description, href } = product;\n\n  const imageContent = <QuickViewGallery images={images} />;\n\n  const content = (\n    <div className={cn(\"flex flex-col gap-6\", className)}>\n      {imageContent}\n\n      <div className=\"flex flex-col gap-4 px-1\">\n        <div className=\"flex flex-col gap-1\">\n          <h3 id={titleId} className=\"font-enad text-lg font-semibold leading-tight\">\n            {title}\n          </h3>\n          {price && <div className=\"text-base\">{price}</div>}\n        </div>\n\n        {description && (\n          <p className=\"text-sm text-muted-foreground leading-relaxed\">{description}</p>\n        )}\n\n        {children}\n\n        {href && (\n          <a\n            href={href}\n            className=\"mt-2 text-sm font-medium underline underline-offset-4 hover:text-primary transition-colors\"\n          >\n            {viewDetailsLabel}\n          </a>\n        )}\n      </div>\n    </div>\n  );\n\n  if (mode === \"modal\") {\n    return (\n      <ModalOverlay open={open} onOpenChange={onOpenChange} labelId={titleId}>\n        <div className=\"relative max-h-[85vh] overflow-y-auto rounded-lg bg-background p-6 shadow-lg sm:max-w-lg w-full\">\n          <button\n            type=\"button\"\n            onClick={() => onOpenChange(false)}\n            className=\"absolute right-4 top-4 z-10 rounded-sm p-1 opacity-70 hover:opacity-100 transition-opacity\"\n            aria-label=\"Close\"\n          >\n            <CloseIcon className=\"size-4\" />\n          </button>\n          {content}\n        </div>\n      </ModalOverlay>\n    );\n  }\n\n  return (\n    <Sheet open={open} onOpenChange={onOpenChange}>\n      <SheetContent side={side} className=\"overflow-y-auto sm:max-w-md\">\n        <SheetHeader>\n          <SheetTitle className=\"sr-only\">{title}</SheetTitle>\n        </SheetHeader>\n        {content}\n      </SheetContent>\n    </Sheet>\n  );\n}\n\n/* ─── Gallery (internal) ─── */\n\nfunction QuickViewGallery({ images }: { images: ImageAsset[] }) {\n  const [activeIndex, setActiveIndex] = React.useState(0);\n\n  if (images.length === 0) {\n    return <div className=\"aspect-[4/5] w-full rounded-md bg-muted\" />;\n  }\n\n  const active = images[activeIndex]!;\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div className=\"relative aspect-[4/5] w-full overflow-hidden rounded-md bg-muted\">\n        <img src={active.src} alt={active.alt ?? \"\"} className=\"size-full object-cover\" />\n      </div>\n\n      {images.length > 1 && (\n        <div className=\"flex gap-2 overflow-x-auto pb-1\">\n          {images.map((img, i) => (\n            <button\n              key={i}\n              type=\"button\"\n              onClick={() => setActiveIndex(i)}\n              className={cn(\n                \"relative size-14 shrink-0 overflow-hidden rounded-md border-2 transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none\",\n                i === activeIndex\n                  ? \"border-primary\"\n                  : \"border-transparent hover:border-muted-foreground/30\",\n              )}\n            >\n              <img\n                src={img.src}\n                alt={img.alt ?? \"\"}\n                loading=\"lazy\"\n                className=\"size-full object-cover\"\n              />\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/* ─── Modal overlay (internal) ─── */\n\nfunction ModalOverlay({\n  open,\n  onOpenChange,\n  children,\n  labelId,\n}: {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  children: React.ReactNode;\n  labelId?: string;\n}) {\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n  const previousFocusRef = React.useRef<HTMLElement | null>(null);\n\n  // Capture triggering element and manage focus\n  React.useEffect(() => {\n    if (open) {\n      previousFocusRef.current = document.activeElement as HTMLElement | null;\n      // Focus the dialog container after mount\n      requestAnimationFrame(() => overlayRef.current?.focus());\n    } else if (previousFocusRef.current) {\n      previousFocusRef.current.focus();\n      previousFocusRef.current = null;\n    }\n  }, [open]);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handleKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        onOpenChange(false);\n        return;\n      }\n      // Focus trap: cycle Tab within the dialog\n      if (e.key === \"Tab\") {\n        const dialog = overlayRef.current;\n        if (!dialog) return;\n        const focusable = dialog.querySelectorAll<HTMLElement>(\n          'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex=\"-1\"])',\n        );\n        if (focusable.length === 0) return;\n        const first = focusable[0]!;\n        const last = focusable[focusable.length - 1]!;\n        if (e.shiftKey && document.activeElement === first) {\n          e.preventDefault();\n          last.focus();\n        } else if (!e.shiftKey && document.activeElement === last) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    };\n    document.addEventListener(\"keydown\", handleKey);\n    return () => document.removeEventListener(\"keydown\", handleKey);\n  }, [open, onOpenChange]);\n\n  if (!open) return null;\n\n  return (\n    <div\n      ref={overlayRef}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={labelId}\n      tabIndex={-1}\n      className=\"fixed inset-0 z-50 flex items-center justify-center bg-(--enad-overlay-color)/50 backdrop-blur-[2px] outline-none\"\n      onClick={(e) => {\n        if (e.target === overlayRef.current) onOpenChange(false);\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/client/storefront/components/review-summary.d.ts

@@ -1,17 +1,28 @@
-export interface ReviewDistribution {
-    /** Star count (1-5) */
-    stars: number;
-    /** Number of reviews with this rating */
-    count: number;
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/components/review-summary.d.ts
+interface ReviewDistribution {
+  /** Star count (1-5) */
+  stars: number;
+  /** Number of reviews with this rating */
+  count: number;
 }
-export interface ReviewSummaryProps {
-    averageRating: number;
-    totalReviews: number;
-    /** Distribution from 5 stars to 1 star. Missing entries default to 0. */
-    distribution: ReviewDistribution[];
-    /** Called when user clicks a distribution bar (for filtering) */
-    onBarClick?: (stars: number) => void;
-    className?: string;
+interface ReviewSummaryProps {
+  averageRating: number;
+  totalReviews: number;
+  /** Distribution from 5 stars to 1 star. Missing entries default to 0. */
+  distribution: ReviewDistribution[];
+  /** Called when user clicks a distribution bar (for filtering) */
+  onBarClick?: (stars: number) => void;
+  className?: string;
 }
-export declare function ReviewSummary({ averageRating, totalReviews, distribution, onBarClick, className, }: ReviewSummaryProps): import("react/jsx-runtime").JSX.Element;
+declare function ReviewSummary({
+  averageRating,
+  totalReviews,
+  distribution,
+  onBarClick,
+  className
+}: ReviewSummaryProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ReviewDistribution, ReviewSummary, ReviewSummaryProps };
 //# sourceMappingURL=review-summary.d.ts.map

package/dist/client/storefront/components/review-summary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"review-summary.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/components/review-summary.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,kBAAkB;IACjC,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,YAAY,EAAE,kBAAkB,EAAE,CAAC;IACnC,iEAAiE;IACjE,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,aAAa,CAAC,EAC5B,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,SAAS,GACV,EAAE,kBAAkB,2CA2DpB"}
+{"version":3,"file":"review-summary.d.ts","names":[],"sources":["../../../../src/client/storefront/components/review-summary.tsx"],"mappings":";;;UAQiB,kBAAA;;EAEf,KAAA;EAFe;EAIf,KAAA;AAAA;AAAA,UAGe,kBAAA;EACf,aAAA;EACA,YAAA;EAFiC;EAIjC,YAAA,EAAc,kBAAA;EAAkB;EAEhC,UAAA,IAAc,KAAA;EACd,SAAA;AAAA;AAAA,iBAKc,aAAA,CAAA;EACd,aAAA;EACA,YAAA;EACA,YAAA;EACA,UAAA;EACA;AAAA,GACC,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/components/review-summary.mjs

@@ -1,66 +1,79 @@
 "use client";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { cn } from "../../ui/utils.mjs";
+import { StarRating } from "./star-rating.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "../../ui/utils";
-import { StarRating } from "./star-rating";
-function ReviewSummary({
-  averageRating,
-  totalReviews,
-  distribution,
-  onBarClick,
-  className
-}) {
-  const maxCount = Math.max(1, ...distribution.map((d) => d.count));
-  const distributionMap = new Map(distribution.map((d) => [d.stars, d.count]));
-  const rows = [5, 4, 3, 2, 1].map((stars) => ({
-    stars,
-    count: distributionMap.get(stars) ?? 0
-  }));
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4 sm:flex-row sm:gap-8", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 sm:min-w-[120px]", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-4xl font-bold font-enad tabular-nums", children: averageRating.toFixed(1) }),
-      /* @__PURE__ */ jsx(StarRating, { rating: averageRating, size: "sm" }),
-      /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
-        totalReviews.toLocaleString(),
-        " ",
-        totalReviews === 1 ? "review" : "reviews"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col gap-2", children: rows.map(({ stars, count }) => {
-      const pct = maxCount > 0 ? count / maxCount * 100 : 0;
-      const isClickable = onBarClick && count > 0;
-      const Tag = isClickable ? "button" : "div";
-      return /* @__PURE__ */ jsxs(
-        Tag,
-        {
-          ...isClickable && {
-            type: "button",
-            onClick: () => onBarClick(stars)
-          },
-          className: cn(
-            "flex items-center gap-3 text-sm",
-            isClickable && "cursor-pointer hover:opacity-80 transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 rounded-sm"
-          ),
-          children: [
-            /* @__PURE__ */ jsxs("span", { className: "w-8 shrink-0 text-right tabular-nums font-enad", children: [
-              stars,
-              "\u2605"
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "relative h-2.5 flex-1 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "absolute inset-y-0 left-0 rounded-full bg-(--enad-star-color) transition-all duration-300",
-                style: { width: `${pct}%` }
-              }
-            ) }),
-            /* @__PURE__ */ jsx("span", { className: "w-10 shrink-0 text-right tabular-nums text-muted-foreground", children: count })
-          ]
-        },
-        stars
-      );
-    }) })
-  ] });
+//#region src/client/storefront/components/review-summary.tsx
+function ReviewSummary({ averageRating, totalReviews, distribution, onBarClick, className }) {
+	const StarFilledIcon = useIcon("starFilled");
+	const maxCount = Math.max(1, ...distribution.map((d) => d.count));
+	const distributionMap = new Map(distribution.map((d) => [d.stars, d.count]));
+	const rows = [
+		5,
+		4,
+		3,
+		2,
+		1
+	].map((stars) => ({
+		stars,
+		count: distributionMap.get(stars) ?? 0
+	}));
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-4 sm:flex-row sm:gap-8", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center gap-1 sm:min-w-[120px]",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "text-4xl font-bold font-enad tabular-nums",
+					children: averageRating.toFixed(1)
+				}),
+				/* @__PURE__ */ jsx(StarRating, {
+					rating: averageRating,
+					size: "sm"
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "text-sm text-muted-foreground",
+					children: [
+						totalReviews.toLocaleString(),
+						" ",
+						totalReviews === 1 ? "review" : "reviews"
+					]
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-1 flex-col gap-2",
+			children: rows.map(({ stars, count }) => {
+				const pct = maxCount > 0 ? count / maxCount * 100 : 0;
+				const isClickable = onBarClick && count > 0;
+				return /* @__PURE__ */ jsxs(isClickable ? "button" : "div", {
+					...isClickable && {
+						type: "button",
+						onClick: () => onBarClick(stars)
+					},
+					className: cn("flex items-center gap-3 text-sm", isClickable && "cursor-pointer hover:opacity-80 transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 rounded-sm"),
+					children: [
+						/* @__PURE__ */ jsxs("span", {
+							className: "w-8 shrink-0 text-right tabular-nums font-enad inline-flex items-center justify-end gap-0.5",
+							children: [stars, /* @__PURE__ */ jsx(StarFilledIcon, { className: "size-3 text-(--enad-star-color)" })]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "relative h-2.5 flex-1 overflow-hidden rounded-full bg-muted",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "absolute inset-y-0 left-0 rounded-full bg-(--enad-star-color) transition-all duration-300",
+								style: { width: `${pct}%` }
+							})
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "w-10 shrink-0 text-right tabular-nums text-muted-foreground",
+							children: count
+						})
+					]
+				}, stars);
+			})
+		})]
+	});
 }
-export {
-  ReviewSummary
-};
+//#endregion
+export { ReviewSummary };
+
 //# sourceMappingURL=review-summary.mjs.map

package/dist/client/storefront/components/review-summary.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/client/storefront/components/review-summary.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../../ui/utils\";\nimport { StarRating } from \"./star-rating\";\n\n/* ─── Types ─── */\n\nexport interface ReviewDistribution {\n  /** Star count (1-5) */\n  stars: number;\n  /** Number of reviews with this rating */\n  count: number;\n}\n\nexport interface ReviewSummaryProps {\n  averageRating: number;\n  totalReviews: number;\n  /** Distribution from 5 stars to 1 star. Missing entries default to 0. */\n  distribution: ReviewDistribution[];\n  /** Called when user clicks a distribution bar (for filtering) */\n  onBarClick?: (stars: number) => void;\n  className?: string;\n}\n\n/* ─── Component ─── */\n\nexport function ReviewSummary({\n  averageRating,\n  totalReviews,\n  distribution,\n  onBarClick,\n  className,\n}: ReviewSummaryProps) {\n  const maxCount = Math.max(1, ...distribution.map((d) => d.count));\n\n  // Build full 5-to-1 distribution, filling missing entries with 0\n  const distributionMap = new Map(distribution.map((d) => [d.stars, d.count]));\n  const rows = [5, 4, 3, 2, 1].map((stars) => ({\n    stars,\n    count: distributionMap.get(stars) ?? 0,\n  }));\n\n  return (\n    <div className={cn(\"flex flex-col gap-4 sm:flex-row sm:gap-8\", className)}>\n      {/* Left: average */}\n      <div className=\"flex flex-col items-center gap-1 sm:min-w-[120px]\">\n        <span className=\"text-4xl font-bold font-enad tabular-nums\">\n          {averageRating.toFixed(1)}\n        </span>\n        <StarRating rating={averageRating} size=\"sm\" />\n        <span className=\"text-sm text-muted-foreground\">\n          {totalReviews.toLocaleString()} {totalReviews === 1 ? \"review\" : \"reviews\"}\n        </span>\n      </div>\n\n      {/* Right: distribution bars */}\n      <div className=\"flex flex-1 flex-col gap-2\">\n        {rows.map(({ stars, count }) => {\n          const pct = maxCount > 0 ? (count / maxCount) * 100 : 0;\n          const isClickable = onBarClick && count > 0;\n          const Tag = isClickable ? \"button\" : \"div\";\n\n          return (\n            <Tag\n              key={stars}\n              {...(isClickable && {\n                type: \"button\" as const,\n                onClick: () => onBarClick(stars),\n              })}\n              className={cn(\n                \"flex items-center gap-3 text-sm\",\n                isClickable &&\n                  \"cursor-pointer hover:opacity-80 transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 rounded-sm\",\n              )}\n            >\n              <span className=\"w-8 shrink-0 text-right tabular-nums font-enad\">{stars}★</span>\n              <div className=\"relative h-2.5 flex-1 overflow-hidden rounded-full bg-muted\">\n                <div\n                  className=\"absolute inset-y-0 left-0 rounded-full bg-(--enad-star-color) transition-all duration-300\"\n                  style={{ width: `${pct}%` }}\n                />\n              </div>\n              <span className=\"w-10 shrink-0 text-right tabular-nums text-muted-foreground\">\n                {count}\n              </span>\n            </Tag>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AA8CQ,cAIA,YAJA;AA5CR,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAuBpB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,WAAW,KAAK,IAAI,GAAG,GAAG,aAAa,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;AAGhE,QAAM,kBAAkB,IAAI,IAAI,aAAa,IAAI,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;AAC3E,QAAM,OAAO,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,WAAW;AAAA,IAC3C;AAAA,IACA,OAAO,gBAAgB,IAAI,KAAK,KAAK;AAAA,EACvC,EAAE;AAEF,SACE,qBAAC,SAAI,WAAW,GAAG,4CAA4C,SAAS,GAEtE;AAAA,yBAAC,SAAI,WAAU,qDACb;AAAA,0BAAC,UAAK,WAAU,6CACb,wBAAc,QAAQ,CAAC,GAC1B;AAAA,MACA,oBAAC,cAAW,QAAQ,eAAe,MAAK,MAAK;AAAA,MAC7C,qBAAC,UAAK,WAAU,iCACb;AAAA,qBAAa,eAAe;AAAA,QAAE;AAAA,QAAE,iBAAiB,IAAI,WAAW;AAAA,SACnE;AAAA,OACF;AAAA,IAGA,oBAAC,SAAI,WAAU,8BACZ,eAAK,IAAI,CAAC,EAAE,OAAO,MAAM,MAAM;AAC9B,YAAM,MAAM,WAAW,IAAK,QAAQ,WAAY,MAAM;AACtD,YAAM,cAAc,cAAc,QAAQ;AAC1C,YAAM,MAAM,cAAc,WAAW;AAErC,aACE;AAAA,QAAC;AAAA;AAAA,UAEE,GAAI,eAAe;AAAA,YAClB,MAAM;AAAA,YACN,SAAS,MAAM,WAAW,KAAK;AAAA,UACjC;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA,eACE;AAAA,UACJ;AAAA,UAEA;AAAA,iCAAC,UAAK,WAAU,kDAAkD;AAAA;AAAA,cAAM;AAAA,eAAC;AAAA,YACzE,oBAAC,SAAI,WAAU,+DACb;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,OAAO,GAAG,GAAG,IAAI;AAAA;AAAA,YAC5B,GACF;AAAA,YACA,oBAAC,UAAK,WAAU,+DACb,iBACH;AAAA;AAAA;AAAA,QApBK;AAAA,MAqBP;AAAA,IAEJ,CAAC,GACH;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"file":"review-summary.mjs","names":[],"sources":["../../../../src/client/storefront/components/review-summary.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../../ui/utils\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { StarRating } from \"./star-rating\";\n\n/* ─── Types ─── */\n\nexport interface ReviewDistribution {\n  /** Star count (1-5) */\n  stars: number;\n  /** Number of reviews with this rating */\n  count: number;\n}\n\nexport interface ReviewSummaryProps {\n  averageRating: number;\n  totalReviews: number;\n  /** Distribution from 5 stars to 1 star. Missing entries default to 0. */\n  distribution: ReviewDistribution[];\n  /** Called when user clicks a distribution bar (for filtering) */\n  onBarClick?: (stars: number) => void;\n  className?: string;\n}\n\n/* ─── Component ─── */\n\nexport function ReviewSummary({\n  averageRating,\n  totalReviews,\n  distribution,\n  onBarClick,\n  className,\n}: ReviewSummaryProps) {\n  const StarFilledIcon = useIcon(\"starFilled\");\n  const maxCount = Math.max(1, ...distribution.map((d) => d.count));\n\n  // Build full 5-to-1 distribution, filling missing entries with 0\n  const distributionMap = new Map(distribution.map((d) => [d.stars, d.count]));\n  const rows = [5, 4, 3, 2, 1].map((stars) => ({\n    stars,\n    count: distributionMap.get(stars) ?? 0,\n  }));\n\n  return (\n    <div className={cn(\"flex flex-col gap-4 sm:flex-row sm:gap-8\", className)}>\n      {/* Left: average */}\n      <div className=\"flex flex-col items-center gap-1 sm:min-w-[120px]\">\n        <span className=\"text-4xl font-bold font-enad tabular-nums\">\n          {averageRating.toFixed(1)}\n        </span>\n        <StarRating rating={averageRating} size=\"sm\" />\n        <span className=\"text-sm text-muted-foreground\">\n          {totalReviews.toLocaleString()} {totalReviews === 1 ? \"review\" : \"reviews\"}\n        </span>\n      </div>\n\n      {/* Right: distribution bars */}\n      <div className=\"flex flex-1 flex-col gap-2\">\n        {rows.map(({ stars, count }) => {\n          const pct = maxCount > 0 ? (count / maxCount) * 100 : 0;\n          const isClickable = onBarClick && count > 0;\n          const Tag = isClickable ? \"button\" : \"div\";\n\n          return (\n            <Tag\n              key={stars}\n              {...(isClickable && {\n                type: \"button\" as const,\n                onClick: () => onBarClick(stars),\n              })}\n              className={cn(\n                \"flex items-center gap-3 text-sm\",\n                isClickable &&\n                  \"cursor-pointer hover:opacity-80 transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 rounded-sm\",\n              )}\n            >\n              <span className=\"w-8 shrink-0 text-right tabular-nums font-enad inline-flex items-center justify-end gap-0.5\">\n                {stars}\n                <StarFilledIcon className=\"size-3 text-(--enad-star-color)\" />\n              </span>\n              <div className=\"relative h-2.5 flex-1 overflow-hidden rounded-full bg-muted\">\n                <div\n                  className=\"absolute inset-y-0 left-0 rounded-full bg-(--enad-star-color) transition-all duration-300\"\n                  style={{ width: `${pct}%` }}\n                />\n              </div>\n              <span className=\"w-10 shrink-0 text-right tabular-nums text-muted-foreground\">\n                {count}\n              </span>\n            </Tag>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AA2BA,SAAgB,cAAc,EAC5B,eACA,cACA,cACA,YACA,aACqB;CACrB,MAAM,iBAAiB,QAAQ,aAAa;CAC5C,MAAM,WAAW,KAAK,IAAI,GAAG,GAAG,aAAa,KAAK,MAAM,EAAE,MAAM,CAAC;CAGjE,MAAM,kBAAkB,IAAI,IAAI,aAAa,KAAK,MAAM,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;CAC5E,MAAM,OAAO;EAAC;EAAG;EAAG;EAAG;EAAG;EAAE,CAAC,KAAK,WAAW;EAC3C;EACA,OAAO,gBAAgB,IAAI,MAAM,IAAI;EACtC,EAAE;AAEH,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,4CAA4C,UAAU;YAAzE,CAEE,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,QAAD;KAAM,WAAU;eACb,cAAc,QAAQ,EAAE;KACpB,CAAA;IACP,oBAAC,YAAD;KAAY,QAAQ;KAAe,MAAK;KAAO,CAAA;IAC/C,qBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,aAAa,gBAAgB;MAAC;MAAE,iBAAiB,IAAI,WAAW;MAC5D;;IACH;MAGN,oBAAC,OAAD;GAAK,WAAU;aACZ,KAAK,KAAK,EAAE,OAAO,YAAY;IAC9B,MAAM,MAAM,WAAW,IAAK,QAAQ,WAAY,MAAM;IACtD,MAAM,cAAc,cAAc,QAAQ;AAG1C,WACE,qBAHU,cAAc,WAAW,OAGnC;KAEE,GAAK,eAAe;MAClB,MAAM;MACN,eAAe,WAAW,MAAM;MACjC;KACD,WAAW,GACT,mCACA,eACE,oKACH;eAVH;MAYE,qBAAC,QAAD;OAAM,WAAU;iBAAhB,CACG,OACD,oBAAC,gBAAD,EAAgB,WAAU,mCAAoC,CAAA,CACzD;;MACP,oBAAC,OAAD;OAAK,WAAU;iBACb,oBAAC,OAAD;QACE,WAAU;QACV,OAAO,EAAE,OAAO,GAAG,IAAI,IAAI;QAC3B,CAAA;OACE,CAAA;MACN,oBAAC,QAAD;OAAM,WAAU;iBACb;OACI,CAAA;MACH;OAxBC,MAwBD;KAER;GACE,CAAA,CACF"}