@dmsi/wedgekit-react 0.0.415 → 0.0.418

package/dist/components/ProductImagePreview/index.cjs

@@ -297,6 +297,10 @@ var Stack = (_a) => {
     padding,
     paddingX,
     paddingY,
+    paddingBottom,
+    paddingTop,
+    paddingLeft,
+    paddingRight,
     margin,
     marginX,
     marginY,
@@ -312,6 +316,10 @@ var Stack = (_a) => {
     height,
     maxHeight,
     borderColor,
+    borderTopColor,
+    borderRightColor,
+    borderBottomColor,
+    borderLeftColor,
     backgroundColor,
     sizing = "none",
     overflowY = "inherit",
@@ -337,6 +345,10 @@ var Stack = (_a) => {
     "padding",
     "paddingX",
     "paddingY",
+    "paddingBottom",
+    "paddingTop",
+    "paddingLeft",
+    "paddingRight",
     "margin",
     "marginX",
     "marginY",
@@ -352,6 +364,10 @@ var Stack = (_a) => {
     "height",
     "maxHeight",
     "borderColor",
+    "borderTopColor",
+    "borderRightColor",
+    "borderBottomColor",
+    "borderLeftColor",
     "backgroundColor",
     "sizing",
     "overflowY",
@@ -387,6 +403,10 @@ var Stack = (_a) => {
         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,
@@ -426,6 +446,22 @@ var Stack = (_a) => {
         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",
@@ -447,101 +483,77 @@ var Stack = (_a) => {
 };
 
 // src/components/Grid.tsx
-var import_react3 = 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 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 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 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 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];
+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 getChildCountBasedClasses(childCount, hasSideMenu != null ? hasSideMenu : false);
+  return classes.join(" ");
 };
-var Grid = ({
-  children,
-  sizing = "container",
-  padding,
-  hasSideMenu = false,
-  columns,
-  id,
-  testid,
-  style
-}) => {
-  const childCount = import_react3.Children.count(children);
+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)(
-        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)
+        (_a2 = GAP_BY_SIZING[sizing]) != null ? _a2 : GAP_BY_SIZING.container,
+        padding && ((_b2 = PADDING_BY_SIZING[sizing]) != null ? _b2 : PADDING_BY_SIZING.container),
+        columnClasses,
+        "grid-cols-1 desktop:grid-cols-4",
+        className
       ),
-      style,
       children
-    }
+    })
   );
 };
 
 // src/components/ProductImagePreview/ProductPrimaryImage.tsx
-var import_react4 = require("react");
+var import_react3 = require("react");
 
 // src/components/Spinner.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
@@ -587,14 +599,14 @@ function ProductPrimaryImage({
   onZoomPositionChange,
   onScrollZoom
 }) {
-  const containerRef = (0, import_react4.useRef)(null);
-  const lastPointRef = (0, import_react4.useRef)(null);
-  const rafRef = (0, import_react4.useRef)(null);
-  const [active, setActive] = (0, import_react4.useState)(false);
-  const [, forceRerender] = (0, import_react4.useState)(0);
-  const [imageLoading, setImageLoading] = (0, import_react4.useState)(true);
-  const [imageError, setImageError] = (0, import_react4.useState)(false);
-  const imageSrc = (0, import_react4.useMemo)(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
+  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(() => {
@@ -602,7 +614,7 @@ function ProductPrimaryImage({
       forceRerender((n) => n + 1);
     });
   };
-  const handlePointerEnter = (0, import_react4.useCallback)(() => {
+  const handlePointerEnter = (0, import_react3.useCallback)(() => {
     if (!zoomEnabled) return;
     setActive(true);
     const el = containerRef.current;
@@ -615,13 +627,13 @@ function ProductPrimaryImage({
       );
     }
   }, [zoomEnabled, onZoomPositionChange, zoomLensSize]);
-  const handlePointerLeave = (0, import_react4.useCallback)(() => {
+  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_react4.useCallback)(
+  const handlePointerMove = (0, import_react3.useCallback)(
     (e) => {
       if (!zoomEnabled || !active || imageError) return;
       if (e.pointerType === "touch") return;
@@ -657,7 +669,7 @@ function ProductPrimaryImage({
     },
     [zoomEnabled, active, imageError, zoomLensSize, onZoomPositionChange]
   );
-  (0, import_react4.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const container = containerRef.current;
     if (!container || !scrollToZoomEnabled) return;
     const handleNativeWheel = (e) => {
@@ -672,7 +684,7 @@ function ProductPrimaryImage({
       container.removeEventListener("wheel", handleNativeWheel);
     };
   }, [scrollToZoomEnabled, zoomEnabled, active, onScrollZoom]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     setImageLoading(true);
     setImageError(false);
   }, [image]);
@@ -741,7 +753,7 @@ function ProductPrimaryImage({
 }
 
 // src/components/ProductImagePreview/ZoomWindow.tsx
-var import_react5 = require("react");
+var import_react4 = require("react");
 
 // src/components/Surface.tsx
 var import_clsx4 = __toESM(require("clsx"), 1);
@@ -792,7 +804,7 @@ function ZoomWindow({
   offset = 10,
   className = ""
 }) {
-  const imageSrc = (0, import_react5.useMemo)(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
+  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;
@@ -921,7 +933,7 @@ function CarouselPagination({
 }
 
 // src/components/ProductImagePreview/MobileImageCarousel.tsx
-var import_react6 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function MobileImageCarousel({
   images,
@@ -931,15 +943,15 @@ function MobileImageCarousel({
   onChangeIndex,
   className = ""
 }) {
-  const containerRef = (0, import_react6.useRef)(null);
-  const [isDragging, setIsDragging] = (0, import_react6.useState)(false);
-  const [startX, setStartX] = (0, import_react6.useState)(0);
-  const [currentTranslate, setCurrentTranslate] = (0, import_react6.useState)(0);
-  const [prevTranslate, setPrevTranslate] = (0, import_react6.useState)(0);
-  const [containerWidth, setContainerWidth] = (0, import_react6.useState)(width);
+  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_react6.useCallback)(
+  const getTranslateX = (0, import_react5.useCallback)(
     (index) => {
       const containerCenter = containerWidth / 2;
       const imageCenter = imageSize / 2;
@@ -948,12 +960,12 @@ function MobileImageCarousel({
     },
     [containerWidth, imageSize, gap]
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const translateX = getTranslateX(currentIndex);
     setCurrentTranslate(translateX);
     setPrevTranslate(translateX);
   }, [currentIndex, getTranslateX]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const updateContainerWidth = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -967,11 +979,11 @@ function MobileImageCarousel({
     }
     return () => resizeObserver.disconnect();
   }, []);
-  const handleStart = (0, import_react6.useCallback)((clientX) => {
+  const handleStart = (0, import_react5.useCallback)((clientX) => {
     setIsDragging(true);
     setStartX(clientX);
   }, []);
-  const handleMove = (0, import_react6.useCallback)(
+  const handleMove = (0, import_react5.useCallback)(
     (clientX) => {
       if (!isDragging) return;
       const currentPosition = clientX;
@@ -980,7 +992,7 @@ function MobileImageCarousel({
     },
     [isDragging, startX, prevTranslate]
   );
-  const handleEnd = (0, import_react6.useCallback)(() => {
+  const handleEnd = (0, import_react5.useCallback)(() => {
     if (!isDragging) return;
     setIsDragging(false);
     const moved = currentTranslate - prevTranslate;
@@ -1028,7 +1040,7 @@ function MobileImageCarousel({
   const handleTouchEnd = () => {
     handleEnd();
   };
-  const handleImageClick = (0, import_react6.useCallback)(
+  const handleImageClick = (0, import_react5.useCallback)(
     (index) => {
       if (!isDragging && index !== currentIndex) {
         onChangeIndex(index);
@@ -1108,16 +1120,16 @@ function MobileImageCarousel({
 }
 
 // src/hooks/useKeydown.ts
-var import_react7 = require("react");
+var import_react6 = require("react");
 
 // src/hooks/useInfiniteScroll.tsx
-var import_react8 = require("react");
+var import_react7 = require("react");
 
 // src/hooks/useMatchesMedia.ts
-var import_react9 = require("react");
+var import_react8 = require("react");
 var useMatchesMedia = (query) => {
-  const [matches, setMatches] = (0, import_react9.useState)();
-  (0, import_react9.useLayoutEffect)(() => {
+  const [matches, setMatches] = (0, import_react8.useState)();
+  (0, import_react8.useLayoutEffect)(() => {
     const mediaQueryList = window.matchMedia(query);
     const listener = () => setMatches(mediaQueryList.matches);
     listener();
@@ -1129,10 +1141,10 @@ var useMatchesMedia = (query) => {
 var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
 
 // src/hooks/useTableLayout.ts
-var import_react10 = require("react");
+var import_react9 = require("react");
 
 // src/components/ProductImagePreview/useProductImagePreview.ts
-var import_react11 = require("react");
+var import_react10 = require("react");
 function useProductImagePreview(props) {
   const {
     images,
@@ -1145,18 +1157,18 @@ function useProductImagePreview(props) {
   } = 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)(() => {
+  const active = (0, import_react10.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 [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_react11.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!effectiveZoomEnabled) return;
     const setupTracking = () => {
       const element = primaryImageRef.current;
@@ -1190,24 +1202,24 @@ function useProductImagePreview(props) {
       }
     };
   }, [effectiveZoomEnabled]);
-  const handleSelect = (0, import_react11.useCallback)(
+  const handleSelect = (0, import_react10.useCallback)(
     (idx) => {
       if (idx === safeIndex) return;
       onChangeIndex(idx);
     },
     [safeIndex, onChangeIndex]
   );
-  const handleNext = (0, import_react11.useCallback)(() => {
+  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_react11.useCallback)(() => {
+  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_react11.useCallback)(
+  const handleZoomPositionChange = (0, import_react10.useCallback)(
     (p, active2) => {
       if (isMobile) return;
       setZoomPoint(p);
@@ -1215,7 +1227,7 @@ function useProductImagePreview(props) {
     },
     [isMobile]
   );
-  const handleScrollZoom = (0, import_react11.useCallback)(
+  const handleScrollZoom = (0, import_react10.useCallback)(
     (delta) => {
       if (!effectiveScrollToZoomEnabled) return;
       const newZoomFactor = Math.max(1, Math.min(5, currentZoomFactor + delta));
@@ -1223,7 +1235,7 @@ function useProductImagePreview(props) {
     },
     [effectiveScrollToZoomEnabled, currentZoomFactor]
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     setCurrentZoomFactor(zoomFactor);
   }, [zoomFactor]);
   return {

package/dist/components/ProductImagePreview/index.js

@@ -1,20 +1,20 @@
 import {
   ProductImagePreview
-} from "../../chunk-ZHZIIVJN.js";
+} from "../../chunk-IMOIZFJZ.js";
+import "../../chunk-MBZ55T2D.js";
 import "../../chunk-2IKT6IHB.js";
 import "../../chunk-G5DEC7H3.js";
 import "../../chunk-3X3Y4TMS.js";
 import "../../chunk-BQNPOGD5.js";
-import "../../chunk-MBZ55T2D.js";
 import "../../chunk-AT4AWD6B.js";
 import "../../chunk-SBRRNFOP.js";
-import "../../chunk-ER6RCOH3.js";
+import "../../chunk-Y2GK27RX.js";
 import "../../chunk-QVWYTQKL.js";
 import "../../chunk-MYKYZHEO.js";
 import "../../chunk-VXWSAIB5.js";
 import "../../chunk-TYTD4FLW.js";
 import "../../chunk-5UH6QUFB.js";
-import "../../chunk-GB4ZTUQV.js";
+import "../../chunk-DTW7JCBR.js";
 import "../../chunk-6CTCHYIS.js";
 import "../../chunk-ORMEWXMH.js";
 export {

package/dist/components/SideMenuGroup.cjs

@@ -278,6 +278,10 @@ var Stack = (_a) => {
     padding,
     paddingX,
     paddingY,
+    paddingBottom,
+    paddingTop,
+    paddingLeft,
+    paddingRight,
     margin,
     marginX,
     marginY,
@@ -293,6 +297,10 @@ var Stack = (_a) => {
     height,
     maxHeight,
     borderColor,
+    borderTopColor,
+    borderRightColor,
+    borderBottomColor,
+    borderLeftColor,
     backgroundColor,
     sizing = "none",
     overflowY = "inherit",
@@ -318,6 +326,10 @@ var Stack = (_a) => {
     "padding",
     "paddingX",
     "paddingY",
+    "paddingBottom",
+    "paddingTop",
+    "paddingLeft",
+    "paddingRight",
     "margin",
     "marginX",
     "marginY",
@@ -333,6 +345,10 @@ var Stack = (_a) => {
     "height",
     "maxHeight",
     "borderColor",
+    "borderTopColor",
+    "borderRightColor",
+    "borderBottomColor",
+    "borderLeftColor",
     "backgroundColor",
     "sizing",
     "overflowY",
@@ -368,6 +384,10 @@ var Stack = (_a) => {
         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,
@@ -407,6 +427,22 @@ var Stack = (_a) => {
         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",

package/dist/components/SideMenuGroup.js

@@ -4,7 +4,7 @@ import {
 } from "../chunk-7CS736EF.js";
 import {
   Stack
-} from "../chunk-GB4ZTUQV.js";
+} from "../chunk-DTW7JCBR.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";