@dmsi/wedgekit-react 0.0.369 → 0.0.371

package/dist/components/ProductImagePreview/index.cjs

@@ -0,0 +1,1369 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/ProductImagePreview/index.tsx
+var ProductImagePreview_exports = {};
+__export(ProductImagePreview_exports, {
+  ProductImagePreview: () => ProductImagePreview
+});
+module.exports = __toCommonJS(ProductImagePreview_exports);
+
+// src/components/ImagePlaceholder.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function ImagePlaceholder(props) {
+  const clipId = (0, import_react.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 242,
+      height: 243,
+      fill: "none"
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: props.width, height: props.width, fill: "#F7F7F7", rx: 2 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { id: clipId, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: props.width, height: props.width, fill: "#fff", rx: 2 }) }) })
+      ]
+    })
+  );
+}
+
+// src/components/ProductImagePreview/Thumbnail.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Thumbnail({
+  width,
+  height,
+  src,
+  alt,
+  isActive,
+  onClick,
+  isPlaceholder = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: [
+        "cursor-pointer relative overflow-hidden rounded aspect-square w-full",
+        // base radius, square when no explicit size
+        "focus:outline-none",
+        isActive && !isPlaceholder && "ring-[3px] ring-offset-1 ring-border-action-normal ring-offset-white opacity-70"
+      ].join(" "),
+      style: { maxWidth: width, maxHeight: height, aspectRatio: "1 / 1" },
+      "aria-pressed": isActive && !isPlaceholder ? "true" : "false",
+      children: isPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ImagePlaceholder, { width: 115, height: 115 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "img",
+        {
+          src,
+          alt,
+          className: "object-cover w-full h-full select-none",
+          draggable: false,
+          loading: "lazy"
+        }
+      )
+    }
+  );
+}
+
+// src/components/Stack.tsx
+var import_clsx2 = __toESM(require("clsx"), 1);
+
+// src/classNames.ts
+var import_clsx = __toESM(require("clsx"), 1);
+var typography = {
+  display1: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-display-1-mobile desktop:text-display-1-desktop compact:text-display-1-desktop-compact",
+    "leading-display-1-mobile desktop:leading-display-1-desktop"
+  ),
+  display2: (0, import_clsx.default)(
+    "font-sans font-bold",
+    "text-display-2-mobile desktop:text-display-2-desktop compact:text-display-2-desktop-compact",
+    "leading-display-2-mobile desktop:leading-display-2-desktop"
+  ),
+  heading1: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-heading-1-mobile desktop:text-heading-1-desktop compact:text-heading-1-desktop-compact",
+    "leading-heading-1-mobile desktop:leading-heading-1-desktop"
+  ),
+  heading2: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-heading-2-mobile desktop:text-heading-2-desktop compact:text-heading-2-desktop-compact",
+    "leading-heading-2-mobile desktop:leading-heading-2-desktop"
+  ),
+  heading3: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-heading-3-mobile desktop:text-heading-3-desktop compact:text-heading-3-desktop-compact",
+    "leading-heading-3-mobile desktop:leading-heading-3-desktop"
+  ),
+  subheader: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-subheader-mobile desktop:text-subheader-desktop compact:text-subheader-desktop-compact",
+    "leading-subheader-mobile desktop:leading-subheader-desktop"
+  ),
+  link: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-link-mobile desktop:text-link-desktop compact:text-link-desktop-compact",
+    "leading-link-mobile desktop:leading-link-desktop"
+  ),
+  buttonLabel: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop"
+  ),
+  label: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop"
+  ),
+  paragraph: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
+    "leading-paragraph-mobile desktop:leading-paragraph-desktop"
+  ),
+  caption: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-caption-mobile desktop:text-caption-desktop compact:text-caption-desktop-compact",
+    "leading-caption-mobile desktop:leading-caption-desktop"
+  ),
+  breadcrumb: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
+    "leading-mobile-breadcrumb desktop:leading-desktop-breadcrumb"
+  )
+};
+var baseTransition = (0, import_clsx.default)(
+  "transition-colors duration-100 ease-in-out"
+);
+var componentGap = (0, import_clsx.default)(
+  "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap"
+);
+var paddingUsingComponentGap = (0, import_clsx.default)(
+  "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
+);
+var paddingXUsingLayoutGroupGap = (0, import_clsx.default)(
+  "px-mobile-layout-group-gap desktop:px-desktop-layout-group-gap compact:px-desktop-compact-layout-group-gap"
+);
+var paddingYUsingLayoutGroupGap = (0, import_clsx.default)(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
+);
+var componentPadding = (0, import_clsx.default)(
+  "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
+);
+var componentPaddingBottom = (0, import_clsx.default)(
+  "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
+);
+var componentPaddingX = (0, import_clsx.default)(
+  "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding"
+);
+var componentPaddingY = (0, import_clsx.default)(
+  "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
+);
+var componentPaddingXUsingComponentGap = (0, import_clsx.default)(
+  "px-mobile-component-gap desktop:px-desktop-component-gap compact:px-desktop-compact-component-gap"
+);
+var componentPaddingYUsingComponentGap = (0, import_clsx.default)(
+  "py-mobile-component-gap desktop:py-desktop-component-gap compact:py-desktop-compact-component-gap"
+);
+var componentPaddingMinusBorder = (0, import_clsx.default)(
+  "p-[calc(var(--spacing-mobile-component-padding)_-_1px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_1px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_1px)]"
+);
+var componentPaddingMinus2pxBorder = (0, import_clsx.default)(
+  "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]"
+);
+var layoutPaddding = (0, import_clsx.default)(
+  "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding"
+);
+var layoutPaddingBottom = (0, import_clsx.default)(
+  "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
+);
+var layoutPaddingY = (0, import_clsx.default)(
+  "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
+);
+var containerPaddingX = (0, import_clsx.default)(
+  "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
+);
+var containerPaddingY = (0, import_clsx.default)(
+  "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding"
+);
+var layoutGroupGapPaddingY = (0, import_clsx.default)(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
+);
+var layoutGroupGap = (0, import_clsx.default)(
+  "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap"
+);
+var layoutGap = (0, import_clsx.default)(
+  "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap"
+);
+var gapUsingContainerPadding = (0, import_clsx.default)(
+  "gap-mobile-container-padding desktop:gap-desktop-container-padding compact:gap-desktop-compact-container-padding"
+);
+
+// src/components/Stack.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx2.default)(
+  "flex",
+  items === "start" && "items-start",
+  grow && "grow",
+  items === "start" && "items-start",
+  items === "center" && "items-center",
+  items === "end" && "items-end",
+  items === "start-center" && "items-start desktop:items-center",
+  justify === "start" && "justify-start",
+  justify === "center" && "justify-center",
+  justify === "end" && "justify-end",
+  justify === "end" && "justify-end",
+  justify === "between" && "justify-between",
+  justify === "around" && "justify-around"
+);
+var useGapClassNames = (sizing) => {
+  return (0, import_clsx2.default)(
+    sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
+    sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
+    sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
+    sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap"
+  );
+};
+var Stack = (_a) => {
+  var _b = _a, {
+    children,
+    items,
+    justify,
+    grow,
+    padding,
+    paddingX,
+    paddingY,
+    margin,
+    marginX,
+    marginY,
+    horizontal,
+    horizontalMobile,
+    elevation = 0,
+    rounded,
+    centered,
+    width,
+    minHeight,
+    maxWidth,
+    minWidth,
+    height,
+    maxHeight,
+    borderColor,
+    backgroundColor,
+    sizing = "none",
+    overflowY = "inherit",
+    overflowX = "inherit",
+    flexShrink,
+    flexGrow,
+    position,
+    top,
+    left,
+    id,
+    noGap,
+    marginTop,
+    marginBottom,
+    testid,
+    bottom,
+    zIndex
+  } = _b, props = __objRest(_b, [
+    "children",
+    "items",
+    "justify",
+    "grow",
+    "padding",
+    "paddingX",
+    "paddingY",
+    "margin",
+    "marginX",
+    "marginY",
+    "horizontal",
+    "horizontalMobile",
+    "elevation",
+    "rounded",
+    "centered",
+    "width",
+    "minHeight",
+    "maxWidth",
+    "minWidth",
+    "height",
+    "maxHeight",
+    "borderColor",
+    "backgroundColor",
+    "sizing",
+    "overflowY",
+    "overflowX",
+    "flexShrink",
+    "flexGrow",
+    "position",
+    "top",
+    "left",
+    "id",
+    "noGap",
+    "marginTop",
+    "marginBottom",
+    "testid",
+    "bottom",
+    "zIndex"
+  ]);
+  var _a2, _b2, _c, _d, _e;
+  const flexClassNames = getFlexClassNames({ items, justify, grow });
+  const gapClassNames = useGapClassNames(sizing);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    __spreadProps(__spreadValues({
+      id,
+      "data-testid": testid
+    }, props), {
+      style: {
+        height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
+        maxHeight: maxHeight !== void 0 ? isNaN(+maxHeight) ? maxHeight : `${maxHeight}px` : (_a2 = props.style) == null ? void 0 : _a2.maxHeight,
+        maxWidth: maxWidth !== void 0 ? isNaN(+maxWidth) ? maxWidth : `${maxWidth}px` : (_b2 = props.style) == null ? void 0 : _b2.maxWidth,
+        minHeight: minHeight !== void 0 ? isNaN(+minHeight) ? minHeight : `${minHeight}px` : (_c = props.style) == null ? void 0 : _c.minHeight,
+        width: width !== void 0 && typeof width === "number" ? `${width}px` : void 0,
+        minWidth: minWidth !== void 0 ? `${minWidth}px` : void 0,
+        border: borderColor ? `1px solid var(--color-${borderColor})` : void 0,
+        backgroundColor: backgroundColor ? `var(--color-${backgroundColor})` : void 0,
+        flexGrow: flexGrow !== void 0 ? flexGrow : void 0,
+        flexShrink: flexShrink !== void 0 ? flexShrink : void 0,
+        position: position !== void 0 ? position : void 0,
+        top: top !== void 0 ? `${top}px` : void 0,
+        bottom: bottom !== void 0 ? `${bottom}px` : void 0,
+        left: left !== void 0 ? `${left}px` : void 0,
+        borderBlock: (_d = props.style) == null ? void 0 : _d.borderBlock,
+        marginInline: (_e = props.style) == null ? void 0 : _e.marginInline,
+        zIndex: zIndex !== void 0 ? zIndex : void 0
+      },
+      className: (0, import_clsx2.default)(
+        "scrollbar-thin",
+        "max-w-screen",
+        width !== "fit" && "w-full",
+        width === "full" && "w-full",
+        width === "max" && "w-max",
+        centered && "mx-auto",
+        overflowY == "auto" && "overflow-y-auto",
+        overflowY == "hidden" && "overflow-y-hidden",
+        overflowY == "scroll" && "overflow-y-scroll",
+        overflowX == "auto" && "overflow-x-auto",
+        overflowX == "hidden" && "overflow-x-hidden",
+        overflowX == "scroll" && "overflow-x-scroll",
+        padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
+        padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+        padding && sizing === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
+        padding && sizing === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+        paddingX && sizing === "container" && "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding",
+        paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
+        paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
+        paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
+        paddingY && sizing === "container" && "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding",
+        paddingY && sizing === "layout" && "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
+        paddingY && sizing === "layout-group" && paddingYUsingLayoutGroupGap,
+        paddingY && sizing === "component" && "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
+        margin && sizing === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
+        marginX && sizing === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
+        marginTop && sizing === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",
+        marginBottom && sizing === "container" && "mb-mobile-container-padding desktop:mb-desktop-container-padding compact:mb-compact-container-padding",
+        marginY && sizing === "container" && "my-mobile-container-padding desktop:my-desktop-container-padding compact:my-compact-container-padding",
+        horizontal ? "desktop:flex-row" : "desktop:flex-col",
+        horizontalMobile ? "flex-row" : "flex-col",
+        flexClassNames,
+        !noGap && gapClassNames,
+        elevation === 0 && "shadow-none",
+        elevation === 2 && "shadow-2",
+        elevation === 4 && "shadow-4",
+        elevation === 16 && "shadow-16",
+        rounded && "rounded"
+      ),
+      children
+    })
+  );
+};
+
+// src/components/Grid.tsx
+var import_react2 = require("react");
+var import_clsx3 = __toESM(require("clsx"), 1);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var COLUMNS_WITH_SIDE_MENU_MAP = {
+  1: "grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 md:grid-cols-3",
+  4: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
+  5: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
+  6: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
+  7: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
+  8: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
+  9: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
+  10: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
+  11: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8",
+  12: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8"
+};
+var COLUMNS_WITHOUT_SIDE_MENU_MAP = {
+  1: "grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 md:grid-cols-3",
+  4: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
+  5: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
+  6: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6",
+  7: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-7",
+  8: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8",
+  9: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-9",
+  10: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-10",
+  11: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-11",
+  12: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12"
+};
+var getChildCountBasedClasses = (childCount, hasSideMenu) => {
+  if (hasSideMenu) {
+    if (childCount <= 1) return "grid-cols-1";
+    if (childCount <= 2) return "sm:grid-cols-2";
+    if (childCount === 3) return "sm:grid-cols-2 md:grid-cols-3";
+    if (childCount <= 5) return "sm:grid-cols-2 md:grid-cols-3";
+    return "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6";
+  }
+  if (childCount <= 1) return "grid-cols-1";
+  if (childCount <= 2) return "sm:grid-cols-2";
+  if (childCount === 3) return "sm:grid-cols-2 md:grid-cols-3";
+  if (childCount <= 5) return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4";
+  if (childCount <= 6)
+    return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
+  if (childCount === 7)
+    return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
+  if (childCount <= 11)
+    return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8";
+  return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12";
+};
+var getGridClasses = (childCount, hasSideMenu, columns) => {
+  var _a;
+  if (columns) {
+    const map = hasSideMenu ? COLUMNS_WITH_SIDE_MENU_MAP : COLUMNS_WITHOUT_SIDE_MENU_MAP;
+    return (_a = map[columns]) != null ? _a : map[12];
+  }
+  return getChildCountBasedClasses(childCount, hasSideMenu != null ? hasSideMenu : false);
+};
+var Grid = ({
+  children,
+  sizing = "container",
+  padding,
+  hasSideMenu = false,
+  columns,
+  id,
+  testid,
+  style
+}) => {
+  const childCount = import_react2.Children.count(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      id,
+      "data-testid": testid,
+      className: (0, import_clsx3.default)(
+        padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
+        padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+        padding && sizing === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
+        padding && sizing === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+        sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
+        sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
+        sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
+        sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
+        "w-full grid",
+        getGridClasses(childCount, hasSideMenu, columns)
+      ),
+      style,
+      children
+    }
+  );
+};
+
+// src/components/ProductImagePreview/ProductPrimaryImage.tsx
+var import_react3 = require("react");
+
+// src/components/Spinner.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Spinner = ({ size = "small", testid }) => {
+  const dimension = size === "large" ? 48 : 24;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "svg",
+    {
+      "data-testid": testid,
+      width: dimension,
+      height: dimension,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "#1D1E1E",
+      className: "spinner",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
+      ]
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// src/components/ProductImagePreview/ProductPrimaryImage.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function ProductPrimaryImage({
+  image,
+  width,
+  height,
+  zoomEnabled = false,
+  zoomLensSize = 140,
+  scrollToZoomEnabled = false,
+  className = "",
+  isPlaceholder = false,
+  onZoomPositionChange,
+  onScrollZoom
+}) {
+  const containerRef = (0, import_react3.useRef)(null);
+  const lastPointRef = (0, import_react3.useRef)(null);
+  const rafRef = (0, import_react3.useRef)(null);
+  const [active, setActive] = (0, import_react3.useState)(false);
+  const [, forceRerender] = (0, import_react3.useState)(0);
+  const [imageLoading, setImageLoading] = (0, import_react3.useState)(true);
+  const [imageError, setImageError] = (0, import_react3.useState)(false);
+  const imageSrc = (0, import_react3.useMemo)(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
+  const schedule = () => {
+    if (rafRef.current != null) return;
+    rafRef.current = requestAnimationFrame(() => {
+      rafRef.current = null;
+      forceRerender((n) => n + 1);
+    });
+  };
+  const handlePointerEnter = (0, import_react3.useCallback)(() => {
+    if (!zoomEnabled) return;
+    setActive(true);
+    const el = containerRef.current;
+    if (el) {
+      const r = el.getBoundingClientRect();
+      const pt2 = lastPointRef.current;
+      onZoomPositionChange == null ? void 0 : onZoomPositionChange(
+        pt2 ? __spreadProps(__spreadValues({}, pt2), { w: r.width, h: r.height, lensSize: zoomLensSize }) : null,
+        true
+      );
+    }
+  }, [zoomEnabled, onZoomPositionChange, zoomLensSize]);
+  const handlePointerLeave = (0, import_react3.useCallback)(() => {
+    if (!zoomEnabled) return;
+    setActive(false);
+    lastPointRef.current = null;
+    onZoomPositionChange == null ? void 0 : onZoomPositionChange(null, false);
+  }, [zoomEnabled, onZoomPositionChange]);
+  const handlePointerMove = (0, import_react3.useCallback)(
+    (e) => {
+      if (!zoomEnabled || !active) return;
+      if (e.pointerType === "touch") return;
+      const el = containerRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      const rawX = (e.clientX - rect.left) / rect.width;
+      const rawY = (e.clientY - rect.top) / rect.height;
+      const size = zoomLensSize != null ? zoomLensSize : 140;
+      const left = Math.max(
+        0,
+        Math.min(rect.width - size, rawX * rect.width - size / 2)
+      );
+      const top = Math.max(
+        0,
+        Math.min(rect.height - size, rawY * rect.height - size / 2)
+      );
+      const centerXNorm = (left + size / 2) / rect.width;
+      const centerYNorm = (top + size / 2) / rect.height;
+      lastPointRef.current = {
+        x: centerXNorm,
+        y: centerYNorm
+      };
+      schedule();
+      onZoomPositionChange == null ? void 0 : onZoomPositionChange(
+        lastPointRef.current ? __spreadProps(__spreadValues({}, lastPointRef.current), {
+          w: rect.width,
+          h: rect.height,
+          lensSize: zoomLensSize
+        }) : null,
+        true
+      );
+    },
+    [zoomEnabled, active, onZoomPositionChange, zoomLensSize]
+  );
+  (0, import_react3.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container || !scrollToZoomEnabled) return;
+    const handleNativeWheel = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!zoomEnabled || !active) return;
+      const delta = e.deltaY > 0 ? -0.2 : 0.2;
+      onScrollZoom == null ? void 0 : onScrollZoom(delta);
+    };
+    container.addEventListener("wheel", handleNativeWheel, { passive: false });
+    return () => {
+      container.removeEventListener("wheel", handleNativeWheel);
+    };
+  }, [scrollToZoomEnabled, zoomEnabled, active, onScrollZoom]);
+  if (!image && !isPlaceholder) return null;
+  const pt = lastPointRef.current;
+  let lensStyle;
+  if (pt && active && zoomEnabled) {
+    const size = zoomLensSize;
+    const leftRaw = pt.x * width - size / 2;
+    const topRaw = pt.y * height - size / 2;
+    lensStyle = {
+      width: size,
+      height: size,
+      left: Math.max(0, Math.min(width - size, leftRaw)),
+      top: Math.max(0, Math.min(height - size, topRaw))
+    };
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: [
+        "relative overflow-hidden bg-white rounded flex items-center justify-center select-none",
+        zoomEnabled ? "cursor-crosshair" : "",
+        className
+      ].join(" "),
+      style: { maxWidth: width, maxHeight: height, aspectRatio: "1 / 1" },
+      onPointerEnter: handlePointerEnter,
+      onPointerLeave: handlePointerLeave,
+      onPointerMove: handlePointerMove,
+      children: [
+        imageLoading && !imageError && !isPlaceholder && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-neutral-50", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Spinner, { size: "small" }) }),
+        isPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ImagePlaceholder, { width, height }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "img",
+          {
+            src: imageSrc,
+            alt: (image == null ? void 0 : image.alt) || "Product image",
+            className: "object-cover w-full h-full select-none",
+            draggable: false,
+            loading: "lazy",
+            onLoad: () => setImageLoading(false),
+            onError: () => {
+              setImageLoading(false);
+              setImageError(true);
+            }
+          },
+          imageSrc
+        ),
+        zoomEnabled && active && lensStyle && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute pointer-events-none border border-white/70 shadow-[0_0_0_1px_rgba(0,0,0,0.15)] rounded-md bg-white/10 backdrop-blur-[1px]",
+            style: lensStyle
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ProductImagePreview/ZoomWindow.tsx
+var import_react4 = require("react");
+
+// src/components/Surface.tsx
+var import_clsx4 = __toESM(require("clsx"), 1);
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Surface = (_a) => {
+  var _b = _a, {
+    children,
+    className,
+    elevation = 0,
+    id
+  } = _b, props = __objRest(_b, [
+    "children",
+    "className",
+    "elevation",
+    "id"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    __spreadProps(__spreadValues({
+      id,
+      className: (0, import_clsx4.default)(
+        "rounded-base",
+        {
+          "shadow-2": elevation === 2,
+          "shadow-4": elevation === 4,
+          "shadow-16": elevation === 16
+        },
+        className
+      )
+    }, props), {
+      children
+    })
+  );
+};
+Surface.displayName = "Surface";
+
+// src/components/ProductImagePreview/ZoomWindow.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function ZoomWindow({
+  image,
+  width,
+  height,
+  pointer,
+  active,
+  zoomFactor = 2,
+  scaleFactor = 2,
+  primaryImagePosition,
+  offset = 10,
+  className = ""
+}) {
+  const imageSrc = (0, import_react4.useMemo)(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
+  if (!image || !active || !pointer) return null;
+  const zoomWindowSize = pointer.lensSize * scaleFactor;
+  const baseW = pointer.w || width;
+  const baseH = pointer.h || height;
+  const scaledW = baseW * zoomFactor;
+  const scaledH = baseH * zoomFactor;
+  const centerX = pointer.x * baseW * zoomFactor;
+  const centerY = pointer.y * baseH * zoomFactor;
+  const imageOffsetX = zoomWindowSize / 2 - centerX;
+  const imageOffsetY = zoomWindowSize / 2 - centerY;
+  const calculatePosition = () => {
+    if (!primaryImagePosition) {
+      return {
+        position: "fixed",
+        zIndex: 999,
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)"
+      };
+    }
+    const lensLeft = primaryImagePosition.left + pointer.x * primaryImagePosition.width - pointer.lensSize / 2;
+    const lensTop = primaryImagePosition.top + pointer.y * primaryImagePosition.height - pointer.lensSize / 2;
+    let left = lensLeft + pointer.lensSize + offset;
+    let top = lensTop;
+    const { innerWidth, innerHeight } = window;
+    if (left + zoomWindowSize > innerWidth) {
+      left = lensLeft - zoomWindowSize - offset;
+    }
+    if (top + zoomWindowSize > innerHeight) {
+      top = lensTop + pointer.lensSize - zoomWindowSize;
+    }
+    if (top < 0) {
+      top = lensTop;
+    }
+    if (left < 0) {
+      left = lensLeft + pointer.lensSize + offset;
+    }
+    return {
+      position: "fixed",
+      zIndex: 999,
+      left,
+      top
+    };
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    Surface,
+    {
+      elevation: 16,
+      className,
+      style: __spreadValues({
+        width: zoomWindowSize,
+        height: zoomWindowSize,
+        position: "fixed",
+        zIndex: 999,
+        overflow: "hidden",
+        pointerEvents: "none",
+        userSelect: "none"
+      }, calculatePosition()),
+      "aria-hidden": true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "img",
+        {
+          src: imageSrc,
+          alt: "",
+          className: "pointer-events-none select-none max-w-none object-cover",
+          style: {
+            width: scaledW,
+            height: scaledH,
+            transform: `translate(${imageOffsetX}px, ${imageOffsetY}px)`
+          },
+          draggable: false,
+          loading: "lazy"
+        },
+        imageSrc
+      )
+    }
+  );
+}
+
+// src/components/ProductImagePreview/CarouselPagination.tsx
+var import_clsx5 = require("clsx");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function CarouselPagination({
+  images,
+  currentIndex,
+  onSelect,
+  className
+}) {
+  if (!(images == null ? void 0 : images.length)) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      className: (0, import_clsx5.clsx)(
+        "flex items-center justify-center w-full px-4 md:hidden",
+        className
+      ),
+      "aria-label": "Image navigation",
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "div",
+        {
+          className: "grid gap-2 place-items-center",
+          style: {
+            gridTemplateColumns: `repeat(${Math.min(images.length, 8)}, 1fr)`
+          },
+          role: "tablist",
+          children: images.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => onSelect(index),
+              className: (0, import_clsx5.clsx)(
+                "w-4 h-4 transition-all duration-200 focus:outline-none",
+                index === currentIndex ? "ring-2 ring-brand-400" : "ring ring-neutral-300"
+              ),
+              "aria-label": `Go to image ${index + 1}`,
+              role: "tab",
+              "aria-selected": index === currentIndex,
+              tabIndex: index === currentIndex ? 0 : -1
+            },
+            index
+          ))
+        }
+      )
+    }
+  );
+}
+
+// src/components/ProductImagePreview/MobileImageCarousel.tsx
+var import_react5 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function MobileImageCarousel({
+  images,
+  currentIndex,
+  width = 483,
+  height = 483,
+  onChangeIndex,
+  className = ""
+}) {
+  const containerRef = (0, import_react5.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react5.useState)(false);
+  const [startX, setStartX] = (0, import_react5.useState)(0);
+  const [currentTranslate, setCurrentTranslate] = (0, import_react5.useState)(0);
+  const [prevTranslate, setPrevTranslate] = (0, import_react5.useState)(0);
+  const [containerWidth, setContainerWidth] = (0, import_react5.useState)(width);
+  const imageSize = Math.min(containerWidth * 0.6, height * 0.6);
+  const gap = 16;
+  const getTranslateX = (0, import_react5.useCallback)(
+    (index) => {
+      const containerCenter = containerWidth / 2;
+      const imageCenter = imageSize / 2;
+      const totalOffset = index * (imageSize + gap);
+      return containerCenter - imageCenter - totalOffset;
+    },
+    [containerWidth, imageSize, gap]
+  );
+  (0, import_react5.useEffect)(() => {
+    const translateX = getTranslateX(currentIndex);
+    setCurrentTranslate(translateX);
+    setPrevTranslate(translateX);
+  }, [currentIndex, getTranslateX]);
+  (0, import_react5.useEffect)(() => {
+    const updateContainerWidth = () => {
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        setContainerWidth(rect.width);
+      }
+    };
+    updateContainerWidth();
+    const resizeObserver = new ResizeObserver(updateContainerWidth);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+    return () => resizeObserver.disconnect();
+  }, []);
+  const handleStart = (0, import_react5.useCallback)((clientX) => {
+    setIsDragging(true);
+    setStartX(clientX);
+  }, []);
+  const handleMove = (0, import_react5.useCallback)(
+    (clientX) => {
+      if (!isDragging) return;
+      const currentPosition = clientX;
+      const diff = currentPosition - startX;
+      setCurrentTranslate(prevTranslate + diff);
+    },
+    [isDragging, startX, prevTranslate]
+  );
+  const handleEnd = (0, import_react5.useCallback)(() => {
+    if (!isDragging) return;
+    setIsDragging(false);
+    const moved = currentTranslate - prevTranslate;
+    const threshold = imageSize / 3;
+    let newIndex = currentIndex;
+    if (moved > threshold && currentIndex > 0) {
+      newIndex = currentIndex - 1;
+    } else if (moved < -threshold && currentIndex < images.length - 1) {
+      newIndex = currentIndex + 1;
+    }
+    if (newIndex !== currentIndex) {
+      onChangeIndex(newIndex);
+    } else {
+      setCurrentTranslate(prevTranslate);
+    }
+  }, [
+    isDragging,
+    currentTranslate,
+    prevTranslate,
+    currentIndex,
+    imageSize,
+    images.length,
+    onChangeIndex
+  ]);
+  const handleMouseDown = (e) => {
+    e.preventDefault();
+    handleStart(e.clientX);
+  };
+  const handleMouseMove = (e) => {
+    e.preventDefault();
+    handleMove(e.clientX);
+  };
+  const handleMouseUp = () => {
+    handleEnd();
+  };
+  const handleMouseLeave = () => {
+    handleEnd();
+  };
+  const handleTouchStart = (e) => {
+    handleStart(e.touches[0].clientX);
+  };
+  const handleTouchMove = (e) => {
+    handleMove(e.touches[0].clientX);
+  };
+  const handleTouchEnd = () => {
+    handleEnd();
+  };
+  const handleImageClick = (0, import_react5.useCallback)(
+    (index) => {
+      if (!isDragging && index !== currentIndex) {
+        onChangeIndex(index);
+      }
+    },
+    [isDragging, currentIndex, onChangeIndex]
+  );
+  if (!images.length) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `md:hidden w-full ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      ref: containerRef,
+      className: "relative overflow-hidden cursor-grab active:cursor-grabbing select-none w-full",
+      style: {
+        height: imageSize
+      },
+      onMouseDown: handleMouseDown,
+      onMouseMove: handleMouseMove,
+      onMouseUp: handleMouseUp,
+      onMouseLeave: handleMouseLeave,
+      onTouchStart: handleTouchStart,
+      onTouchMove: handleTouchMove,
+      onTouchEnd: handleTouchEnd,
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "div",
+        {
+          className: "flex items-center",
+          style: {
+            transform: `translateX(${currentTranslate}px)`,
+            transition: isDragging ? "none" : "transform 0.3s ease-out",
+            gap: `${gap}px`
+          },
+          children: images.map((image, index) => {
+            const isActive = index === currentIndex;
+            const distance = Math.abs(index - currentIndex);
+            const shouldRender = distance <= 2;
+            return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "div",
+              {
+                className: "flex-shrink-0 transition-opacity duration-300",
+                style: {
+                  width: imageSize,
+                  height: imageSize,
+                  opacity: isActive ? 1 : Math.max(0.3, 1 - distance * 0.3)
+                },
+                onClick: () => handleImageClick(index),
+                children: shouldRender ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "img",
+                  {
+                    src: image.src,
+                    alt: image.alt || `Product image ${index + 1}`,
+                    className: "w-full h-full object-cover",
+                    draggable: false,
+                    loading: distance <= 1 ? "eager" : "lazy",
+                    style: {
+                      aspectRatio: "1 / 1"
+                    }
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "div",
+                  {
+                    className: "w-full h-full bg-neutral-100 rounded-md border border-gray-200",
+                    style: {
+                      aspectRatio: "1 / 1"
+                    },
+                    "aria-hidden": "true"
+                  }
+                )
+              },
+              image.src + index
+            );
+          })
+        }
+      )
+    }
+  ) });
+}
+
+// src/hooks/useKeydown.ts
+var import_react6 = require("react");
+
+// src/hooks/useInfiniteScroll.tsx
+var import_react7 = require("react");
+
+// src/hooks/useMatchesMedia.ts
+var import_react8 = require("react");
+var useMatchesMedia = (query) => {
+  const [matches, setMatches] = (0, import_react8.useState)();
+  (0, import_react8.useLayoutEffect)(() => {
+    const mediaQueryList = window.matchMedia(query);
+    const listener = () => setMatches(mediaQueryList.matches);
+    listener();
+    mediaQueryList.addEventListener("change", listener);
+    return () => mediaQueryList.removeEventListener("change", listener);
+  }, [query]);
+  return matches;
+};
+var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
+
+// src/hooks/useTableLayout.ts
+var import_react9 = require("react");
+
+// src/components/ProductImagePreview/useProductImagePreview.ts
+var import_react10 = require("react");
+function useProductImagePreview(props) {
+  const {
+    images,
+    currentIndex,
+    zoomEnabled = false,
+    zoomFactor = 2,
+    scrollToZoomEnabled = false,
+    onChangeIndex,
+    isMobile = false
+  } = props;
+  const hasImages = !!(images == null ? void 0 : images.length);
+  const safeIndex = hasImages && currentIndex >= 0 && currentIndex < images.length ? currentIndex : 0;
+  const active = (0, import_react10.useMemo)(() => {
+    return hasImages ? images[safeIndex] : void 0;
+  }, [hasImages, images, safeIndex]);
+  const [zoomPoint, setZoomPoint] = (0, import_react10.useState)(null);
+  const [zoomActive, setZoomActive] = (0, import_react10.useState)(false);
+  const [currentZoomFactor, setCurrentZoomFactor] = (0, import_react10.useState)(zoomFactor);
+  const [primaryImagePosition, setPrimaryImagePosition] = (0, import_react10.useState)(null);
+  const primaryImageRef = (0, import_react10.useRef)(null);
+  const cleanupRef = (0, import_react10.useRef)(null);
+  const effectiveZoomEnabled = zoomEnabled && !isMobile;
+  const effectiveScrollToZoomEnabled = scrollToZoomEnabled && !isMobile;
+  (0, import_react10.useEffect)(() => {
+    if (!effectiveZoomEnabled) return;
+    const setupTracking = () => {
+      const element = primaryImageRef.current;
+      if (!element) return;
+      const updatePosition = () => {
+        if (element) {
+          setPrimaryImagePosition(element.getBoundingClientRect());
+        }
+      };
+      updatePosition();
+      const resizeObserver = new ResizeObserver(updatePosition);
+      resizeObserver.observe(element);
+      window.addEventListener("scroll", updatePosition);
+      window.addEventListener("resize", updatePosition);
+      cleanupRef.current = () => {
+        resizeObserver.disconnect();
+        window.removeEventListener("scroll", updatePosition);
+        window.removeEventListener("resize", updatePosition);
+      };
+    };
+    if (primaryImageRef.current) {
+      setupTracking();
+    } else {
+      const frameId = requestAnimationFrame(setupTracking);
+      return () => cancelAnimationFrame(frameId);
+    }
+    return () => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+        cleanupRef.current = null;
+      }
+    };
+  }, [effectiveZoomEnabled]);
+  const handleSelect = (0, import_react10.useCallback)(
+    (idx) => {
+      if (idx === safeIndex) return;
+      onChangeIndex(idx);
+    },
+    [safeIndex, onChangeIndex]
+  );
+  const handleNext = (0, import_react10.useCallback)(() => {
+    if (!hasImages) return;
+    const nextIndex = (safeIndex + 1) % images.length;
+    onChangeIndex(nextIndex);
+  }, [hasImages, safeIndex, images.length, onChangeIndex]);
+  const handlePrevious = (0, import_react10.useCallback)(() => {
+    if (!hasImages) return;
+    const previousIndex = safeIndex === 0 ? images.length - 1 : safeIndex - 1;
+    onChangeIndex(previousIndex);
+  }, [hasImages, safeIndex, images.length, onChangeIndex]);
+  const handleZoomPositionChange = (0, import_react10.useCallback)(
+    (p, active2) => {
+      if (isMobile) return;
+      setZoomPoint(p);
+      setZoomActive(active2);
+    },
+    [isMobile]
+  );
+  const handleScrollZoom = (0, import_react10.useCallback)(
+    (delta) => {
+      if (!effectiveScrollToZoomEnabled) return;
+      const newZoomFactor = Math.max(1, Math.min(5, currentZoomFactor + delta));
+      setCurrentZoomFactor(newZoomFactor);
+    },
+    [effectiveScrollToZoomEnabled, currentZoomFactor]
+  );
+  (0, import_react10.useEffect)(() => {
+    setCurrentZoomFactor(zoomFactor);
+  }, [zoomFactor]);
+  return {
+    // State
+    zoomPoint,
+    zoomActive,
+    currentZoomFactor,
+    primaryImagePosition,
+    hasImages,
+    safeIndex,
+    active,
+    // Refs
+    primaryImageRef,
+    // Handlers
+    handleSelect,
+    handleZoomPositionChange,
+    handleScrollZoom,
+    handleNext,
+    handlePrevious
+  };
+}
+
+// src/components/ProductImagePreview/index.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var PLACEHOLDER_IMAGES = [
+  { src: "", alt: "placeholder" },
+  { src: "", alt: "placeholder" }
+];
+function ProductImagePreview(props) {
+  const {
+    width = 483,
+    height = 483,
+    thumbsPerRow = 4,
+    zoomEnabled = false,
+    scrollToZoomEnabled = false,
+    images,
+    currentIndex,
+    onChangeIndex,
+    zoomLensSize,
+    zoomFactor = 2,
+    zoomWindowScaleFactor = 2.5,
+    zoomWindowOffset = 10
+  } = props;
+  const isMobile = useMatchesMobile();
+  const {
+    zoomPoint,
+    zoomActive,
+    currentZoomFactor,
+    primaryImagePosition,
+    safeIndex,
+    active,
+    primaryImageRef,
+    handleSelect,
+    handleZoomPositionChange,
+    handleScrollZoom
+  } = useProductImagePreview({
+    images,
+    currentIndex,
+    zoomEnabled,
+    zoomFactor,
+    scrollToZoomEnabled,
+    onChangeIndex,
+    isMobile
+  });
+  if (typeof isMobile === "undefined") return null;
+  const effectiveZoomEnabled = zoomEnabled && !isMobile;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Stack, { sizing: "layout", style: { width, position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex gap-4 items-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: primaryImageRef, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        ProductPrimaryImage,
+        {
+          image: active,
+          width,
+          height,
+          zoomEnabled: effectiveZoomEnabled,
+          zoomLensSize,
+          scrollToZoomEnabled: scrollToZoomEnabled && !isMobile,
+          onZoomPositionChange: handleZoomPositionChange,
+          onScrollZoom: handleScrollZoom,
+          isPlaceholder: images.length === 0
+        }
+      ) }),
+      effectiveZoomEnabled && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        ZoomWindow,
+        {
+          image: active,
+          width,
+          height,
+          pointer: zoomPoint,
+          active: zoomActive,
+          zoomFactor: currentZoomFactor,
+          scaleFactor: zoomWindowScaleFactor,
+          primaryImagePosition,
+          offset: zoomWindowOffset
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      MobileImageCarousel,
+      {
+        images,
+        currentIndex: safeIndex,
+        width,
+        height,
+        onChangeIndex: handleSelect
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "hidden md:block", children: images.length <= 3 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "div",
+      {
+        className: "flex justify-center gap-4",
+        style: { width: "100%", maxWidth: width },
+        "aria-label": "Product image thumbnails",
+        children: (images.length === 0 ? PLACEHOLDER_IMAGES : images).map(
+          (img, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { maxWidth: "115px" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            Thumbnail,
+            {
+              src: img.src,
+              alt: img.alt || `Thumbnail ${i + 1}`,
+              isActive: i === safeIndex,
+              onClick: () => handleSelect(i),
+              isPlaceholder: images.length === 0
+            }
+          ) }, img.src + i)
+        )
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      Grid,
+      {
+        sizing: "layout-group",
+        "aria-label": "Product image thumbnails",
+        style: {
+          width: "100%",
+          maxWidth: width
+        },
+        columns: thumbsPerRow > 12 ? 12 : thumbsPerRow < 1 ? 1 : thumbsPerRow,
+        children: (images.length === 0 ? PLACEHOLDER_IMAGES : images).map(
+          (img, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            Thumbnail,
+            {
+              src: img.src,
+              alt: img.alt || `Thumbnail ${i + 1}`,
+              isActive: i === safeIndex,
+              onClick: () => handleSelect(i),
+              isPlaceholder: images.length === 0
+            },
+            img.src + i
+          )
+        )
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      CarouselPagination,
+      {
+        images,
+        currentIndex: safeIndex,
+        onSelect: handleSelect
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ProductImagePreview
+});