@dmsi/wedgekit-react 0.0.1277 → 1.0.1

package/dist/components/ProductImagePreview/index.cjs

@@ -1,1447 +0,0 @@
-"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/ProductImagePreview/Thumbnail.tsx
-var import_react2 = require("react");
-
-// 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,
-  onImageError
-}) {
-  const [imageError, setImageError] = (0, import_react2.useState)(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: imageError ? "/placeholder.svg" : src,
-          alt,
-          className: "object-contain w-full h-full select-none",
-          draggable: false,
-          loading: "lazy",
-          onError: () => {
-            onImageError == null ? void 0 : onImageError(src);
-            setImageError(true);
-          }
-        }
-      )
-    }
-  );
-}
-
-// 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 componentPaddingYUsingComponentGap2xMobile = (0, import_clsx.default)(
-  "py-[calc(var(--spacing-mobile-component-gap)_+_8px)] 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 componentPaddingMinusBorderDesktop = (0, import_clsx.default)(
-  "p-[calc(var(--spacing-desktop-component-padding)_-_1px)]"
-);
-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 layoutPaddingX = (0, import_clsx.default)(
-  "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-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,
-    paddingBottom,
-    paddingTop,
-    paddingLeft,
-    paddingRight,
-    margin,
-    marginX,
-    marginY,
-    horizontal,
-    horizontalMobile,
-    elevation = 0,
-    rounded,
-    centered,
-    width,
-    minHeight,
-    maxWidth,
-    minWidth,
-    height,
-    maxHeight,
-    borderColor,
-    borderTopColor,
-    borderRightColor,
-    borderBottomColor,
-    borderLeftColor,
-    backgroundColor,
-    sizing = "none",
-    overflowY = "inherit",
-    overflowX = "inherit",
-    flexShrink,
-    flexGrow,
-    position,
-    top,
-    left,
-    id,
-    noGap,
-    marginTop,
-    marginBottom,
-    testid,
-    bottom,
-    zIndex,
-    flexWrap,
-    className,
-    unclipEdges
-  } = _b, props = __objRest(_b, [
-    "children",
-    "items",
-    "justify",
-    "grow",
-    "padding",
-    "paddingX",
-    "paddingY",
-    "paddingBottom",
-    "paddingTop",
-    "paddingLeft",
-    "paddingRight",
-    "margin",
-    "marginX",
-    "marginY",
-    "horizontal",
-    "horizontalMobile",
-    "elevation",
-    "rounded",
-    "centered",
-    "width",
-    "minHeight",
-    "maxWidth",
-    "minWidth",
-    "height",
-    "maxHeight",
-    "borderColor",
-    "borderTopColor",
-    "borderRightColor",
-    "borderBottomColor",
-    "borderLeftColor",
-    "backgroundColor",
-    "sizing",
-    "overflowY",
-    "overflowX",
-    "flexShrink",
-    "flexGrow",
-    "position",
-    "top",
-    "left",
-    "id",
-    "noGap",
-    "marginTop",
-    "marginBottom",
-    "testid",
-    "bottom",
-    "zIndex",
-    "flexWrap",
-    "className",
-    "unclipEdges"
-  ]);
-  var _a2, _b2, _c, _d, _e, _f, _g;
-  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: __spreadValues({
-        height: height === "screen" ? "100vh" : height === "full" ? "100%" : height === void 0 ? void 0 : height === "fit" ? "fit-content" : typeof height === "string" && isNaN(+height) ? height : `${height}px`,
-        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,
-        borderTop: borderTopColor ? `1px solid var(--color-${borderTopColor})` : void 0,
-        borderRight: borderRightColor ? `1px solid var(--color-${borderRightColor})` : void 0,
-        borderBottom: borderBottomColor ? `1px solid var(--color-${borderBottomColor})` : void 0,
-        borderLeft: borderLeftColor ? `1px solid var(--color-${borderLeftColor})` : 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,
-        flexWrap,
-        paddingInline: (_f = props.style) == null ? void 0 : _f.paddingInline,
-        gap: (_g = props.style) == null ? void 0 : _g.gap
-      }, props.style),
-      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",
-        paddingBottom && sizing === "container" && "pb-mobile-container-padding desktop:pb-desktop-container-padding compact:pb-desktop-compact-container-padding",
-        paddingBottom && sizing === "layout" && "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding",
-        paddingBottom && sizing === "layout-group" && "pb-mobile-layout-group-padding desktop:pb-desktop-layout-group-padding compact:pb-desktop-compact-layout-group-padding",
-        paddingBottom && sizing === "component" && "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding",
-        paddingTop && sizing === "container" && "pt-mobile-container-padding desktop:pt-desktop-container-padding compact:pt-desktop-compact-container-padding",
-        paddingTop && sizing === "layout" && "pt-mobile-layout-padding desktop:pt-desktop-layout-padding compact:pt-desktop-compact-layout-padding",
-        paddingTop && sizing === "layout-group" && "pt-mobile-layout-group-padding desktop:pt-desktop-layout-group-padding compact:pt-desktop-compact-layout-group-padding",
-        paddingTop && sizing === "component" && "pt-mobile-component-padding desktop:pt-desktop-component-padding compact:pt-desktop-compact-component-padding",
-        paddingLeft && sizing === "container" && "pl-mobile-container-padding desktop:pl-desktop-container-padding compact:pl-desktop-compact-container-padding",
-        paddingLeft && sizing === "layout" && "pl-mobile-layout-padding desktop:pl-desktop-layout-padding compact:pl-desktop-compact-layout-padding",
-        paddingLeft && sizing === "layout-group" && "pl-mobile-layout-group-padding desktop:pl-desktop-layout-group-padding compact:pl-desktop-compact-layout-group-padding",
-        paddingLeft && sizing === "component" && "pl-mobile-component-padding desktop:pl-desktop-component-padding compact:pl-desktop-compact-component-padding",
-        paddingRight && sizing === "container" && "pr-mobile-container-padding desktop:pr-desktop-container-padding compact:pr-desktop-compact-container-padding",
-        paddingRight && sizing === "layout" && "pr-mobile-layout-padding desktop:pr-desktop-layout-padding compact:pr-desktop-compact-layout-padding",
-        paddingRight && sizing === "layout-group" && "pr-mobile-layout-group-padding desktop:pr-desktop-layout-group-padding compact:pr-desktop-compact-layout-group-padding",
-        paddingRight && sizing === "component" && "pr-mobile-component-padding desktop:pr-desktop-component-padding compact:pr-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",
-        unclipEdges && "-m-0.75 p-1",
-        className
-      ),
-      children
-    })
-  );
-};
-
-// src/components/Grid.tsx
-var import_clsx3 = __toESM(require("clsx"), 1);
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var GAP_BY_SIZING = {
-  none: "gap-0",
-  "layout-group": "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
-  layout: "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
-  container: "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
-  component: "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap"
-};
-var PADDING_BY_SIZING = {
-  none: "p-0",
-  container: "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
-  layout: "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
-  "layout-group": "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
-  component: "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
-};
-var buildColumnClasses = (base, responsive) => {
-  const classes = [`grid-cols-${base}`];
-  if (responsive) {
-    Object.entries(responsive).forEach(([bp, value]) => {
-      if (value && value > 0) classes.push(`${bp}:grid-cols-${value}`);
-    });
-  }
-  return classes.join(" ");
-};
-var Grid = (_a) => {
-  var _b = _a, {
-    children,
-    sizing = "container",
-    padding,
-    columns,
-    responsive,
-    id,
-    testid,
-    style,
-    className
-  } = _b, rest = __objRest(_b, [
-    "children",
-    "sizing",
-    "padding",
-    "columns",
-    "responsive",
-    "id",
-    "testid",
-    "style",
-    "className"
-  ]);
-  var _a2, _b2;
-  const columnClasses = buildColumnClasses(columns, responsive);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "div",
-    __spreadProps(__spreadValues({
-      id,
-      "data-testid": testid,
-      style
-    }, rest), {
-      className: (0, import_clsx3.default)(
-        "w-full grid",
-        (_a2 = GAP_BY_SIZING[sizing]) != null ? _a2 : GAP_BY_SIZING.container,
-        padding && ((_b2 = PADDING_BY_SIZING[sizing]) != null ? _b2 : PADDING_BY_SIZING.container),
-        columnClasses,
-        className
-      ),
-      children
-    })
-  );
-};
-
-// src/components/ProductImagePreview/ProductPrimaryImage.tsx
-var import_react3 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var placeholderImageUri = "/placeholder.svg";
-function ProductPrimaryImage({
-  image,
-  width,
-  height,
-  zoomEnabled = false,
-  zoomLensSize = 140,
-  scrollToZoomEnabled = false,
-  className = "",
-  isPlaceholder = false,
-  onImageError,
-  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 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 (isPlaceholder) return;
-      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
-      );
-    },
-    [isPlaceholder, zoomEnabled, active, zoomLensSize, onZoomPositionChange]
-  );
-  (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]);
-  const handleImgError = (0, import_react3.useCallback)(
-    (e) => {
-      onImageError == null ? void 0 : onImageError(imageSrc);
-      if (!placeholderImageUri) return;
-      const img = e.currentTarget;
-      if (img.src === placeholderImageUri) return;
-      img.src = placeholderImageUri;
-    },
-    [imageSrc, onImageError]
-  );
-  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_runtime5.jsxs)(
-    "div",
-    {
-      ref: containerRef,
-      className: [
-        "relative overflow-hidden bg-white rounded flex items-center justify-center select-none",
-        zoomEnabled ? "cursor-crosshair" : "",
-        className
-      ].join(" "),
-      onPointerEnter: handlePointerEnter,
-      onPointerLeave: handlePointerLeave,
-      onPointerMove: handlePointerMove,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "img",
-          {
-            src: imageSrc != null ? imageSrc : placeholderImageUri,
-            alt: (image == null ? void 0 : image.alt) || "Product image",
-            style: {
-              maxWidth: width,
-              maxHeight: height,
-              minWidth: width,
-              minHeight: height,
-              aspectRatio: "1 / 1",
-              objectFit: "contain",
-              userSelect: "none"
-            },
-            draggable: false,
-            loading: "lazy",
-            onError: handleImgError
-          },
-          imageSrc
-        ),
-        zoomEnabled && active && lensStyle && /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime6 = 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_runtime6.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_runtime7 = 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_runtime7.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_runtime7.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_runtime8 = require("react/jsx-runtime");
-function CarouselPagination({
-  images,
-  currentIndex,
-  onSelect,
-  className
-}) {
-  if (!(images == null ? void 0 : images.length)) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.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_runtime8.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_runtime9 = require("react/jsx-runtime");
-function MobileImageCarousel({
-  images,
-  currentIndex,
-  width = 483,
-  height = 483,
-  onChangeIndex,
-  onImageError,
-  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_runtime9.jsx)("div", { className: `md:hidden w-full ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.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_runtime9.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_runtime9.jsx)(
-                  "img",
-                  {
-                    src: image.src,
-                    alt: image.alt || `Product image ${index + 1}`,
-                    className: "w-full h-full object-contain",
-                    draggable: false,
-                    loading: distance <= 1 ? "eager" : "lazy",
-                    onError: () => onImageError == null ? void 0 : onImageError(image.src),
-                    style: {
-                      aspectRatio: "1 / 1"
-                    }
-                  }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime9.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/useTableLayout.ts
-var import_react9 = require("react");
-
-// src/utils/index.ts
-var LocalStoragePrefixVersion = `dmsi-acc-v1.1.5`;
-
-// src/hooks/useTableLayout/storage.ts
-var STORAGE_PREFIX = `${LocalStoragePrefixVersion}-tablePrefs`;
-var LEGACY_STORAGE_PREFIX = `${LocalStoragePrefixVersion}-tableLayout`;
-
-// src/hooks/useEditCell.tsx
-var import_react10 = require("react");
-
-// src/components/ProductImagePreview/useProductImagePreview.ts
-var import_react11 = 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_react11.useMemo)(() => {
-    return hasImages ? images[safeIndex] : void 0;
-  }, [hasImages, images, safeIndex]);
-  const [zoomPoint, setZoomPoint] = (0, import_react11.useState)(null);
-  const [zoomActive, setZoomActive] = (0, import_react11.useState)(false);
-  const [currentZoomFactor, setCurrentZoomFactor] = (0, import_react11.useState)(zoomFactor);
-  const [primaryImagePosition, setPrimaryImagePosition] = (0, import_react11.useState)(null);
-  const primaryImageRef = (0, import_react11.useRef)(null);
-  const cleanupRef = (0, import_react11.useRef)(null);
-  const effectiveZoomEnabled = zoomEnabled && !isMobile;
-  const effectiveScrollToZoomEnabled = scrollToZoomEnabled && !isMobile;
-  (0, import_react11.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_react11.useCallback)(
-    (idx) => {
-      if (idx === safeIndex) return;
-      onChangeIndex(idx);
-    },
-    [safeIndex, onChangeIndex]
-  );
-  const handleNext = (0, import_react11.useCallback)(() => {
-    if (!hasImages) return;
-    const nextIndex = (safeIndex + 1) % images.length;
-    onChangeIndex(nextIndex);
-  }, [hasImages, safeIndex, images.length, onChangeIndex]);
-  const handlePrevious = (0, import_react11.useCallback)(() => {
-    if (!hasImages) return;
-    const previousIndex = safeIndex === 0 ? images.length - 1 : safeIndex - 1;
-    onChangeIndex(previousIndex);
-  }, [hasImages, safeIndex, images.length, onChangeIndex]);
-  const handleZoomPositionChange = (0, import_react11.useCallback)(
-    (p, active2) => {
-      if (isMobile) return;
-      setZoomPoint(p);
-      setZoomActive(active2);
-    },
-    [isMobile]
-  );
-  const handleScrollZoom = (0, import_react11.useCallback)(
-    (delta) => {
-      if (!effectiveScrollToZoomEnabled) return;
-      const newZoomFactor = Math.max(1, Math.min(5, currentZoomFactor + delta));
-      setCurrentZoomFactor(newZoomFactor);
-    },
-    [effectiveScrollToZoomEnabled, currentZoomFactor]
-  );
-  (0, import_react11.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_react12 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var placeholderImageUri2 = "/placeholder.svg";
-function hasValidImageSource(src) {
-  const normalizedSrc = src == null ? void 0 : src.trim();
-  return !!normalizedSrc && normalizedSrc !== placeholderImageUri2 && !normalizedSrc.endsWith("/placeholder.svg") && !normalizedSrc.includes("/placeholder.svg?");
-}
-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,
-    testid
-  } = props;
-  const [failedImageSources, setFailedImageSources] = (0, import_react12.useState)([]);
-  const imageSourceKey = (0, import_react12.useMemo)(
-    () => images.map((image) => image.src).join("|"),
-    [images]
-  );
-  const validImages = (0, import_react12.useMemo)(
-    () => images.filter(
-      (image) => hasValidImageSource(image.src) && failedImageSources.indexOf(image.src) === -1
-    ),
-    [failedImageSources, images]
-  );
-  const handleImageError = (0, import_react12.useCallback)((src) => {
-    if (!src) return;
-    setFailedImageSources(
-      (previousSources) => previousSources.indexOf(src) >= 0 ? previousSources : [...previousSources, src]
-    );
-  }, []);
-  (0, import_react12.useEffect)(() => {
-    setFailedImageSources([]);
-  }, [imageSourceKey]);
-  const isMobile = useMatchesMobile();
-  const {
-    zoomPoint,
-    zoomActive,
-    currentZoomFactor,
-    primaryImagePosition,
-    safeIndex,
-    active,
-    primaryImageRef,
-    handleSelect,
-    handleZoomPositionChange,
-    handleScrollZoom
-  } = useProductImagePreview({
-    images: validImages,
-    currentIndex,
-    zoomEnabled,
-    zoomFactor,
-    scrollToZoomEnabled,
-    onChangeIndex,
-    isMobile
-  });
-  if (typeof isMobile === "undefined") return null;
-  if (isMobile && !validImages.length)
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      "img",
-      {
-        src: placeholderImageUri2,
-        alt: "Placeholder Image",
-        draggable: false,
-        loading: "eager",
-        style: {
-          aspectRatio: "1 / 1",
-          objectFit: "cover",
-          height: "100%",
-          width: "100%"
-        }
-      }
-    );
-  const effectiveZoomEnabled = zoomEnabled && !isMobile;
-  const showDesktopThumbnails = validImages.length > 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-    Stack,
-    {
-      sizing: "layout-group",
-      style: { width, position: "relative" },
-      testid,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex gap-4 items-start", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: primaryImageRef, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            ProductPrimaryImage,
-            {
-              image: active,
-              width,
-              height,
-              zoomEnabled: effectiveZoomEnabled,
-              zoomLensSize,
-              scrollToZoomEnabled: scrollToZoomEnabled && !isMobile,
-              onZoomPositionChange: handleZoomPositionChange,
-              onScrollZoom: handleScrollZoom,
-              isPlaceholder: validImages.length === 0,
-              onImageError: handleImageError
-            }
-          ) }),
-          effectiveZoomEnabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            ZoomWindow,
-            {
-              image: active,
-              width,
-              height,
-              pointer: zoomPoint,
-              active: zoomActive,
-              zoomFactor: currentZoomFactor,
-              scaleFactor: zoomWindowScaleFactor,
-              primaryImagePosition,
-              offset: zoomWindowOffset
-            }
-          )
-        ] }) }),
-        isMobile && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          MobileImageCarousel,
-          {
-            images: validImages,
-            currentIndex: safeIndex,
-            width,
-            height,
-            onChangeIndex: handleSelect,
-            onImageError: handleImageError
-          }
-        ),
-        showDesktopThumbnails && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hidden md:block", children: validImages.length <= 3 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          "div",
-          {
-            className: "flex justify-center gap-4",
-            style: { width: "100%", maxWidth: width },
-            "aria-label": "Product image thumbnails",
-            children: validImages.map((img, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { maxWidth: "115px" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              Thumbnail,
-              {
-                src: img.src,
-                alt: img.alt || `Thumbnail ${i + 1}`,
-                isActive: i === safeIndex,
-                onClick: () => handleSelect(i),
-                onImageError: handleImageError
-              }
-            ) }, img.src + i))
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          Grid,
-          {
-            sizing: "layout-group",
-            "aria-label": "Product image thumbnails",
-            style: {
-              width: "100%",
-              maxWidth: width
-            },
-            columns: thumbsPerRow > 12 ? 12 : thumbsPerRow < 1 ? 1 : thumbsPerRow,
-            children: validImages.map((img, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              Thumbnail,
-              {
-                src: img.src,
-                alt: img.alt || `Thumbnail ${i + 1}`,
-                isActive: i === safeIndex,
-                onClick: () => handleSelect(i),
-                onImageError: handleImageError
-              },
-              img.src + i
-            ))
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          CarouselPagination,
-          {
-            images: validImages,
-            currentIndex: safeIndex,
-            onSelect: handleSelect
-          }
-        )
-      ]
-    }
-  );
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ProductImagePreview
-});