@dmsi/wedgekit-react 0.0.387 → 0.0.389

package/dist/components/Swatch.cjs

@@ -313,7 +313,8 @@ var Stack = (_a) => {
     marginBottom,
     testid,
     bottom,
-    zIndex
+    zIndex,
+    flexWrap
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -352,9 +353,10 @@ var Stack = (_a) => {
     "marginBottom",
     "testid",
     "bottom",
-    "zIndex"
+    "zIndex",
+    "flexWrap"
   ]);
-  var _a2, _b2, _c, _d, _e, _f;
+  var _a2, _b2, _c, _d, _e, _f, _g;
   const flexClassNames = getFlexClassNames({ items, justify, grow });
   const gapClassNames = useGapClassNames(sizing);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -381,7 +383,9 @@ var Stack = (_a) => {
         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,
-        gap: (_f = props.style) == null ? void 0 : _f.gap
+        flexWrap,
+        paddingInline: (_f = props.style) == null ? void 0 : _f.paddingInline,
+        gap: (_g = props.style) == null ? void 0 : _g.gap
       },
       className: (0, import_clsx3.default)(
         "scrollbar-thin",

package/dist/components/Swatch.js

@@ -7,7 +7,7 @@ import {
 } from "../chunk-EU73QPW7.js";
 import {
   Stack
-} from "../chunk-MX57T3HP.js";
+} from "../chunk-GB4ZTUQV.js";
 import {
   Paragraph
 } from "../chunk-OGIFIPKH.js";

package/dist/components/Time.cjs

@@ -806,7 +806,8 @@ var Stack = (_a) => {
     marginBottom,
     testid,
     bottom,
-    zIndex
+    zIndex,
+    flexWrap
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -845,9 +846,10 @@ var Stack = (_a) => {
     "marginBottom",
     "testid",
     "bottom",
-    "zIndex"
+    "zIndex",
+    "flexWrap"
   ]);
-  var _a2, _b2, _c, _d, _e, _f;
+  var _a2, _b2, _c, _d, _e, _f, _g;
   const flexClassNames = getFlexClassNames({ items, justify, grow });
   const gapClassNames = useGapClassNames(sizing);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -874,7 +876,9 @@ var Stack = (_a) => {
         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,
-        gap: (_f = props.style) == null ? void 0 : _f.gap
+        flexWrap,
+        paddingInline: (_f = props.style) == null ? void 0 : _f.paddingInline,
+        gap: (_g = props.style) == null ? void 0 : _g.gap
       },
       className: (0, import_clsx5.default)(
         "scrollbar-thin",

package/dist/components/Time.js

@@ -9,7 +9,7 @@ import "../chunk-TYTD4FLW.js";
 import "../chunk-5UH6QUFB.js";
 import {
   Stack
-} from "../chunk-MX57T3HP.js";
+} from "../chunk-GB4ZTUQV.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";

package/dist/components/Upload.cjs

@@ -487,7 +487,8 @@ var Stack = (_a) => {
     marginBottom,
     testid,
     bottom,
-    zIndex
+    zIndex,
+    flexWrap
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -526,9 +527,10 @@ var Stack = (_a) => {
     "marginBottom",
     "testid",
     "bottom",
-    "zIndex"
+    "zIndex",
+    "flexWrap"
   ]);
-  var _a2, _b2, _c, _d, _e, _f;
+  var _a2, _b2, _c, _d, _e, _f, _g;
   const flexClassNames = getFlexClassNames({ items, justify, grow });
   const gapClassNames = useGapClassNames(sizing);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -555,7 +557,9 @@ var Stack = (_a) => {
         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,
-        gap: (_f = props.style) == null ? void 0 : _f.gap
+        flexWrap,
+        paddingInline: (_f = props.style) == null ? void 0 : _f.paddingInline,
+        gap: (_g = props.style) == null ? void 0 : _g.gap
       },
       className: (0, import_clsx5.default)(
         "scrollbar-thin",

package/dist/components/Upload.js

@@ -3,7 +3,7 @@ import {
 } from "../chunk-SBRRNFOP.js";
 import {
   Stack
-} from "../chunk-MX57T3HP.js";
+} from "../chunk-GB4ZTUQV.js";
 import {
   Paragraph
 } from "../chunk-OGIFIPKH.js";

package/dist/components/index.cjs

@@ -4046,8 +4046,9 @@ var import_clsx19 = __toESM(require("clsx"), 1);
 var import_jsx_runtime22 = require("react/jsx-runtime");
 function Card(props) {
   const _a = props, { children, selected, testid } = _a, rest = __objRest(_a, ["children", "selected", "testid"]);
+  const CardComponent = props.as || "div";
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-    "div",
+    CardComponent,
     __spreadProps(__spreadValues({}, rest), {
       "data-testid": testid,
       className: (0, import_clsx19.default)(
@@ -4125,7 +4126,8 @@ var Stack = (_a) => {
     marginBottom,
     testid,
     bottom,
-    zIndex
+    zIndex,
+    flexWrap
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -4164,9 +4166,10 @@ var Stack = (_a) => {
     "marginBottom",
     "testid",
     "bottom",
-    "zIndex"
+    "zIndex",
+    "flexWrap"
   ]);
-  var _a2, _b2, _c, _d, _e, _f;
+  var _a2, _b2, _c, _d, _e, _f, _g;
   const flexClassNames = getFlexClassNames({ items, justify, grow });
   const gapClassNames = useGapClassNames(sizing);
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -4193,7 +4196,9 @@ var Stack = (_a) => {
         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,
-        gap: (_f = props.style) == null ? void 0 : _f.gap
+        flexWrap,
+        paddingInline: (_f = props.style) == null ? void 0 : _f.paddingInline,
+        gap: (_g = props.style) == null ? void 0 : _g.gap
       },
       className: (0, import_clsx20.default)(
         "scrollbar-thin",
@@ -5510,6 +5515,9 @@ function MobileDataGrid(props) {
   );
 }
 
+// src/components/ProductImagePreview/Thumbnail.tsx
+var import_react26 = require("react");
+
 // src/components/ImagePlaceholder.tsx
 var import_react25 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
@@ -5542,6 +5550,7 @@ function Thumbnail({
   onClick,
   isPlaceholder = false
 }) {
+  const [imageError, setImageError] = (0, import_react26.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     "button",
     {
@@ -5558,11 +5567,14 @@ function Thumbnail({
       children: isPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ImagePlaceholder, { width: 115, height: 115 }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         "img",
         {
-          src,
+          src: imageError ? "/placeholder.svg" : src,
           alt,
           className: "object-cover w-full h-full select-none",
           draggable: false,
-          loading: "lazy"
+          loading: "lazy",
+          onError: () => {
+            setImageError(true);
+          }
         }
       )
     }
@@ -5570,7 +5582,7 @@ function Thumbnail({
 }
 
 // src/components/Grid.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_clsx30 = __toESM(require("clsx"), 1);
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var COLUMNS_WITH_SIDE_MENU_MAP = {
@@ -5639,7 +5651,7 @@ var Grid = ({
   testid,
   style
 }) => {
-  const childCount = import_react26.Children.count(children);
+  const childCount = import_react27.Children.count(children);
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "div",
     {
@@ -5664,7 +5676,7 @@ var Grid = ({
 };
 
 // src/components/ProductImagePreview/ProductPrimaryImage.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // src/components/Spinner.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
@@ -5710,14 +5722,14 @@ function ProductPrimaryImage({
   onZoomPositionChange,
   onScrollZoom
 }) {
-  const containerRef = (0, import_react27.useRef)(null);
-  const lastPointRef = (0, import_react27.useRef)(null);
-  const rafRef = (0, import_react27.useRef)(null);
-  const [active, setActive] = (0, import_react27.useState)(false);
-  const [, forceRerender] = (0, import_react27.useState)(0);
-  const [imageLoading, setImageLoading] = (0, import_react27.useState)(true);
-  const [imageError, setImageError] = (0, import_react27.useState)(false);
-  const imageSrc = (0, import_react27.useMemo)(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
+  const containerRef = (0, import_react28.useRef)(null);
+  const lastPointRef = (0, import_react28.useRef)(null);
+  const rafRef = (0, import_react28.useRef)(null);
+  const [active, setActive] = (0, import_react28.useState)(false);
+  const [, forceRerender] = (0, import_react28.useState)(0);
+  const [imageLoading, setImageLoading] = (0, import_react28.useState)(true);
+  const [imageError, setImageError] = (0, import_react28.useState)(false);
+  const imageSrc = (0, import_react28.useMemo)(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
   const schedule = () => {
     if (rafRef.current != null) return;
     rafRef.current = requestAnimationFrame(() => {
@@ -5725,7 +5737,7 @@ function ProductPrimaryImage({
       forceRerender((n) => n + 1);
     });
   };
-  const handlePointerEnter = (0, import_react27.useCallback)(() => {
+  const handlePointerEnter = (0, import_react28.useCallback)(() => {
     if (!zoomEnabled) return;
     setActive(true);
     const el = containerRef.current;
@@ -5738,15 +5750,15 @@ function ProductPrimaryImage({
       );
     }
   }, [zoomEnabled, onZoomPositionChange, zoomLensSize]);
-  const handlePointerLeave = (0, import_react27.useCallback)(() => {
+  const handlePointerLeave = (0, import_react28.useCallback)(() => {
     if (!zoomEnabled) return;
     setActive(false);
     lastPointRef.current = null;
     onZoomPositionChange == null ? void 0 : onZoomPositionChange(null, false);
   }, [zoomEnabled, onZoomPositionChange]);
-  const handlePointerMove = (0, import_react27.useCallback)(
+  const handlePointerMove = (0, import_react28.useCallback)(
     (e) => {
-      if (!zoomEnabled || !active) return;
+      if (!zoomEnabled || !active || imageError) return;
       if (e.pointerType === "touch") return;
       const el = containerRef.current;
       if (!el) return;
@@ -5778,9 +5790,9 @@ function ProductPrimaryImage({
         true
       );
     },
-    [zoomEnabled, active, onZoomPositionChange, zoomLensSize]
+    [zoomEnabled, active, imageError, zoomLensSize, onZoomPositionChange]
   );
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const container = containerRef.current;
     if (!container || !scrollToZoomEnabled) return;
     const handleNativeWheel = (e) => {
@@ -5795,6 +5807,10 @@ function ProductPrimaryImage({
       container.removeEventListener("wheel", handleNativeWheel);
     };
   }, [scrollToZoomEnabled, zoomEnabled, active, onScrollZoom]);
+  (0, import_react28.useEffect)(() => {
+    setImageLoading(true);
+    setImageError(false);
+  }, [image]);
   if (!image && !isPlaceholder) return null;
   const pt = lastPointRef.current;
   let lensStyle;
@@ -5818,7 +5834,13 @@ function ProductPrimaryImage({
         zoomEnabled ? "cursor-crosshair" : "",
         className
       ].join(" "),
-      style: { maxWidth: width, maxHeight: height, aspectRatio: "1 / 1" },
+      style: {
+        maxWidth: width,
+        maxHeight: height,
+        minWidth: width,
+        minHeight: height,
+        aspectRatio: "1 / 1"
+      },
       onPointerEnter: handlePointerEnter,
       onPointerLeave: handlePointerLeave,
       onPointerMove: handlePointerMove,
@@ -5827,9 +5849,9 @@ function ProductPrimaryImage({
         isPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ImagePlaceholder, { width, height }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           "img",
           {
-            src: imageSrc,
+            src: imageError ? "/placeholder.svg" : imageSrc,
             alt: (image == null ? void 0 : image.alt) || "Product image",
-            className: "object-cover w-full h-full select-none",
+            className: "object-cover min-w-full min-h-full select-none",
             draggable: false,
             loading: "lazy",
             onLoad: () => setImageLoading(false),
@@ -5854,7 +5876,7 @@ function ProductPrimaryImage({
 }
 
 // src/components/ProductImagePreview/ZoomWindow.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 
 // src/components/Surface.tsx
 var import_clsx31 = __toESM(require("clsx"), 1);
@@ -5905,7 +5927,7 @@ function ZoomWindow({
   offset = 10,
   className = ""
 }) {
-  const imageSrc = (0, import_react28.useMemo)(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
+  const imageSrc = (0, import_react29.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;
@@ -6034,7 +6056,7 @@ function CarouselPagination({
 }
 
 // src/components/ProductImagePreview/MobileImageCarousel.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 function MobileImageCarousel({
   images,
@@ -6044,15 +6066,15 @@ function MobileImageCarousel({
   onChangeIndex,
   className = ""
 }) {
-  const containerRef = (0, import_react29.useRef)(null);
-  const [isDragging, setIsDragging] = (0, import_react29.useState)(false);
-  const [startX, setStartX] = (0, import_react29.useState)(0);
-  const [currentTranslate, setCurrentTranslate] = (0, import_react29.useState)(0);
-  const [prevTranslate, setPrevTranslate] = (0, import_react29.useState)(0);
-  const [containerWidth, setContainerWidth] = (0, import_react29.useState)(width);
+  const containerRef = (0, import_react30.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react30.useState)(false);
+  const [startX, setStartX] = (0, import_react30.useState)(0);
+  const [currentTranslate, setCurrentTranslate] = (0, import_react30.useState)(0);
+  const [prevTranslate, setPrevTranslate] = (0, import_react30.useState)(0);
+  const [containerWidth, setContainerWidth] = (0, import_react30.useState)(width);
   const imageSize = Math.min(containerWidth * 0.6, height * 0.6);
   const gap = 16;
-  const getTranslateX = (0, import_react29.useCallback)(
+  const getTranslateX = (0, import_react30.useCallback)(
     (index) => {
       const containerCenter = containerWidth / 2;
       const imageCenter = imageSize / 2;
@@ -6061,12 +6083,12 @@ function MobileImageCarousel({
     },
     [containerWidth, imageSize, gap]
   );
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     const translateX = getTranslateX(currentIndex);
     setCurrentTranslate(translateX);
     setPrevTranslate(translateX);
   }, [currentIndex, getTranslateX]);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     const updateContainerWidth = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -6080,11 +6102,11 @@ function MobileImageCarousel({
     }
     return () => resizeObserver.disconnect();
   }, []);
-  const handleStart = (0, import_react29.useCallback)((clientX) => {
+  const handleStart = (0, import_react30.useCallback)((clientX) => {
     setIsDragging(true);
     setStartX(clientX);
   }, []);
-  const handleMove = (0, import_react29.useCallback)(
+  const handleMove = (0, import_react30.useCallback)(
     (clientX) => {
       if (!isDragging) return;
       const currentPosition = clientX;
@@ -6093,7 +6115,7 @@ function MobileImageCarousel({
     },
     [isDragging, startX, prevTranslate]
   );
-  const handleEnd = (0, import_react29.useCallback)(() => {
+  const handleEnd = (0, import_react30.useCallback)(() => {
     if (!isDragging) return;
     setIsDragging(false);
     const moved = currentTranslate - prevTranslate;
@@ -6141,7 +6163,7 @@ function MobileImageCarousel({
   const handleTouchEnd = () => {
     handleEnd();
   };
-  const handleImageClick = (0, import_react29.useCallback)(
+  const handleImageClick = (0, import_react30.useCallback)(
     (index) => {
       if (!isDragging && index !== currentIndex) {
         onChangeIndex(index);
@@ -6221,7 +6243,7 @@ function MobileImageCarousel({
 }
 
 // src/components/ProductImagePreview/useProductImagePreview.ts
-var import_react30 = require("react");
+var import_react31 = require("react");
 function useProductImagePreview(props) {
   const {
     images,
@@ -6234,18 +6256,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_react30.useMemo)(() => {
+  const active = (0, import_react31.useMemo)(() => {
     return hasImages ? images[safeIndex] : void 0;
   }, [hasImages, images, safeIndex]);
-  const [zoomPoint, setZoomPoint] = (0, import_react30.useState)(null);
-  const [zoomActive, setZoomActive] = (0, import_react30.useState)(false);
-  const [currentZoomFactor, setCurrentZoomFactor] = (0, import_react30.useState)(zoomFactor);
-  const [primaryImagePosition, setPrimaryImagePosition] = (0, import_react30.useState)(null);
-  const primaryImageRef = (0, import_react30.useRef)(null);
-  const cleanupRef = (0, import_react30.useRef)(null);
+  const [zoomPoint, setZoomPoint] = (0, import_react31.useState)(null);
+  const [zoomActive, setZoomActive] = (0, import_react31.useState)(false);
+  const [currentZoomFactor, setCurrentZoomFactor] = (0, import_react31.useState)(zoomFactor);
+  const [primaryImagePosition, setPrimaryImagePosition] = (0, import_react31.useState)(null);
+  const primaryImageRef = (0, import_react31.useRef)(null);
+  const cleanupRef = (0, import_react31.useRef)(null);
   const effectiveZoomEnabled = zoomEnabled && !isMobile;
   const effectiveScrollToZoomEnabled = scrollToZoomEnabled && !isMobile;
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!effectiveZoomEnabled) return;
     const setupTracking = () => {
       const element = primaryImageRef.current;
@@ -6279,24 +6301,24 @@ function useProductImagePreview(props) {
       }
     };
   }, [effectiveZoomEnabled]);
-  const handleSelect = (0, import_react30.useCallback)(
+  const handleSelect = (0, import_react31.useCallback)(
     (idx) => {
       if (idx === safeIndex) return;
       onChangeIndex(idx);
     },
     [safeIndex, onChangeIndex]
   );
-  const handleNext = (0, import_react30.useCallback)(() => {
+  const handleNext = (0, import_react31.useCallback)(() => {
     if (!hasImages) return;
     const nextIndex = (safeIndex + 1) % images.length;
     onChangeIndex(nextIndex);
   }, [hasImages, safeIndex, images.length, onChangeIndex]);
-  const handlePrevious = (0, import_react30.useCallback)(() => {
+  const handlePrevious = (0, import_react31.useCallback)(() => {
     if (!hasImages) return;
     const previousIndex = safeIndex === 0 ? images.length - 1 : safeIndex - 1;
     onChangeIndex(previousIndex);
   }, [hasImages, safeIndex, images.length, onChangeIndex]);
-  const handleZoomPositionChange = (0, import_react30.useCallback)(
+  const handleZoomPositionChange = (0, import_react31.useCallback)(
     (p, active2) => {
       if (isMobile) return;
       setZoomPoint(p);
@@ -6304,7 +6326,7 @@ function useProductImagePreview(props) {
     },
     [isMobile]
   );
-  const handleScrollZoom = (0, import_react30.useCallback)(
+  const handleScrollZoom = (0, import_react31.useCallback)(
     (delta) => {
       if (!effectiveScrollToZoomEnabled) return;
       const newZoomFactor = Math.max(1, Math.min(5, currentZoomFactor + delta));
@@ -6312,7 +6334,7 @@ function useProductImagePreview(props) {
     },
     [effectiveScrollToZoomEnabled, currentZoomFactor]
   );
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     setCurrentZoomFactor(zoomFactor);
   }, [zoomFactor]);
   return {
@@ -6476,7 +6498,7 @@ function ProductImagePreview(props) {
 }
 
 // src/components/CompactImagesPreview.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_clsx33 = __toESM(require("clsx"), 1);
 var import_jsx_runtime51 = require("react/jsx-runtime");
 function CompactImagesPreview(props) {
@@ -6493,7 +6515,7 @@ function CompactImagesPreview(props) {
   } = props;
   const isMobile = useMatchesMobile();
   const imagesCount = sources.length;
-  const handleThumbnailClick = (0, import_react31.useCallback)(
+  const handleThumbnailClick = (0, import_react32.useCallback)(
     (newIndex) => {
       if (newIndex === currentSourceIndex) return;
       if (newIndex < 0 || newIndex >= imagesCount) return;
@@ -6506,7 +6528,12 @@ function CompactImagesPreview(props) {
       "img",
       {
         className: "object-center",
-        style: { width: activeImageWidth, height: activeImageHeight },
+        style: {
+          width: activeImageWidth,
+          height: activeImageHeight,
+          objectPosition: "center",
+          objectFit: "cover"
+        },
         src: placeholderImageUri,
         alt: "placeholder image"
       }
@@ -6519,7 +6546,8 @@ function CompactImagesPreview(props) {
         style: {
           width: isMobile ? "100%" : activeImageWidth,
           height: activeImageHeight,
-          objectPosition: "center"
+          objectPosition: "center",
+          objectFit: "cover"
         },
         src: currentSource.uri,
         alt: currentSource.name
@@ -6544,7 +6572,8 @@ function CompactImagesPreview(props) {
             style: {
               width: thumbnailWidth,
               height: thumbnailHeight,
-              objectPosition: "center"
+              objectPosition: "center",
+              objectFit: "cover"
             }
           }
         )
@@ -6555,15 +6584,15 @@ function CompactImagesPreview(props) {
 }
 
 // src/components/PDFViewer/index.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // src/components/PDFViewer/PDFElement.tsx
 var import_react_pdf2 = require("@mikecousins/react-pdf");
-var import_react33 = require("react");
+var import_react34 = require("react");
 
 // src/components/PDFViewer/PDFPage.tsx
 var import_react_pdf = require("@mikecousins/react-pdf");
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 function PdfPage({
   file,
@@ -6571,7 +6600,7 @@ function PdfPage({
   testid,
   isMobile
 }) {
-  const canvasRef = (0, import_react32.useRef)(null);
+  const canvasRef = (0, import_react33.useRef)(null);
   const { pdfDocument } = (0, import_react_pdf.usePdf)({
     file,
     page: pageNumber,
@@ -6600,7 +6629,7 @@ function PDFElement({
   error
 }) {
   var _a;
-  const canvasRef = (0, import_react33.useRef)(null);
+  const canvasRef = (0, import_react34.useRef)(null);
   const { pdfDocument } = (0, import_react_pdf2.usePdf)({
     file: `data:application/pdf;base64,${b64}`,
     workerSrc: "/scripts/pdf.worker.min.mjs",
@@ -6756,9 +6785,9 @@ function PDFViewer(props) {
     withPagination = true,
     error
   } = props;
-  const [currentIndex, setCurrentIndex] = (0, import_react34.useState)(0);
-  const [isDownloading, setIsDownloading] = (0, import_react34.useState)(false);
-  const handleDownload = (0, import_react34.useCallback)(() => {
+  const [currentIndex, setCurrentIndex] = (0, import_react35.useState)(0);
+  const [isDownloading, setIsDownloading] = (0, import_react35.useState)(false);
+  const handleDownload = (0, import_react35.useCallback)(() => {
     setIsDownloading(true);
     const link = document.createElement("a");
     const currentPdf = encodedPdfs[currentIndex];

package/dist/components/index.css

@@ -823,6 +823,9 @@
   .min-h-\[120px\] {
     min-height: 120px;
   }
+  .min-h-full {
+    min-height: 100%;
+  }
   .min-h-min {
     min-height: min-content;
   }
@@ -3594,6 +3597,21 @@
       outline-style: none;
     }
   }
+  .data-active\:border-transparent {
+    &[data-active] {
+      border-color: transparent;
+    }
+  }
+  .data-active\:bg-background-action-primary-normal {
+    &[data-active] {
+      background-color: var(--color-background-action-primary-normal);
+    }
+  }
+  .data-active\:text-white {
+    &[data-active] {
+      color: var(--color-white);
+    }
+  }
   .data-disabled\:cursor-default {
     &[data-disabled] {
       cursor: default;