@dmsi/wedgekit-react 0.0.388 → 0.0.390

package/dist/{chunk-BPJR54VM.js → chunk-2HMCS25C.js}

@@ -2,17 +2,17 @@ import {
   Heading3
 } from "./chunk-EU73QPW7.js";
 import {
-  Button
-} from "./chunk-WWAPK5PH.js";
+  Stack
+} from "./chunk-GB4ZTUQV.js";
 import {
   Paragraph
 } from "./chunk-OGIFIPKH.js";
-import {
-  Stack
-} from "./chunk-MX57T3HP.js";
 import {
   Icon
 } from "./chunk-NKUETCDA.js";
+import {
+  Button
+} from "./chunk-WWAPK5PH.js";
 
 // src/components/PDFViewer/PDFNavigation.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{chunk-HPQWEZJL.js → chunk-3X3Y4TMS.js}

@@ -3,6 +3,7 @@ import {
 } from "./chunk-QVWYTQKL.js";
 
 // src/components/ProductImagePreview/Thumbnail.tsx
+import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 function Thumbnail({
   width,
@@ -13,6 +14,7 @@ function Thumbnail({
   onClick,
   isPlaceholder = false
 }) {
+  const [imageError, setImageError] = useState(false);
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -29,11 +31,14 @@ function Thumbnail({
       children: isPlaceholder ? /* @__PURE__ */ jsx(ImagePlaceholder, { width: 115, height: 115 }) : /* @__PURE__ */ 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);
+          }
         }
       )
     }

package/dist/{chunk-QJTAFSQA.js → chunk-44TDIHUP.js}

@@ -4,12 +4,12 @@ import {
 import {
   MobileDataGridColumn
 } from "./chunk-M6TSTDNZ.js";
+import {
+  Stack
+} from "./chunk-GB4ZTUQV.js";
 import {
   Paragraph
 } from "./chunk-OGIFIPKH.js";
-import {
-  Stack
-} from "./chunk-MX57T3HP.js";
 
 // src/components/MobileDataGrid/RowDetailModalProvider/ModalContent.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{chunk-5Z4ODAYB.js → chunk-6I5LZ2ZC.js}

@@ -1,24 +1,24 @@
 import {
   ModalContent
-} from "./chunk-QJTAFSQA.js";
+} from "./chunk-44TDIHUP.js";
 import {
   useGridContext
 } from "./chunk-5IFPG6TS.js";
 import {
   Modal
-} from "./chunk-E4AGWXFA.js";
+} from "./chunk-D6YCMQPO.js";
 import {
   Heading2
 } from "./chunk-EU73QPW7.js";
-import {
-  Button
-} from "./chunk-WWAPK5PH.js";
 import {
   Stack
-} from "./chunk-MX57T3HP.js";
+} from "./chunk-GB4ZTUQV.js";
 import {
   Icon
 } from "./chunk-NKUETCDA.js";
+import {
+  Button
+} from "./chunk-WWAPK5PH.js";
 
 // src/components/MobileDataGrid/RowDetailModalProvider/index.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{chunk-KSAN4ZLA.js → chunk-AA6GE3TH.js}

@@ -1,6 +1,6 @@
 import {
   MobileDataGridCard
-} from "./chunk-QF654HYZ.js";
+} from "./chunk-KZZKQLKF.js";
 import {
   useGridContext
 } from "./chunk-5IFPG6TS.js";

package/dist/{chunk-E4AGWXFA.js → chunk-D6YCMQPO.js}

@@ -1,18 +1,18 @@
 import {
   useMounted
 } from "./chunk-4RJKB7LC.js";
-import {
-  ModalHeader
-} from "./chunk-EC7SC3MO.js";
-import {
-  ModalScrim
-} from "./chunk-AG43RS4Q.js";
 import {
   ModalButtons
-} from "./chunk-5OPI4GTJ.js";
+} from "./chunk-XM7IQHBU.js";
 import {
   ModalContent
 } from "./chunk-FRHPFACM.js";
+import {
+  ModalHeader
+} from "./chunk-T36HX6QY.js";
+import {
+  ModalScrim
+} from "./chunk-AG43RS4Q.js";
 import {
   useMatchesMobile
 } from "./chunk-MYKYZHEO.js";

package/dist/{chunk-DCCTNHNL.js → chunk-ERW5DEIO.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-SBRRNFOP.js";
 import {
   Stack
-} from "./chunk-MX57T3HP.js";
+} from "./chunk-GB4ZTUQV.js";
 
 // src/components/PDFViewer/PDFElement.tsx
 import { usePdf } from "@mikecousins/react-pdf";

package/dist/{chunk-4LXG6QNT.js → chunk-EZCH4PQS.js}

@@ -9,8 +9,9 @@ import clsx from "clsx";
 import { jsx } from "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__ */ jsx(
-    "div",
+    CardComponent,
     __spreadProps(__spreadValues({}, rest), {
       "data-testid": testid,
       className: clsx(

package/dist/{chunk-CQFPNZTN.js → chunk-G5DEC7H3.js}

@@ -60,7 +60,7 @@ function ProductPrimaryImage({
   }, [zoomEnabled, onZoomPositionChange]);
   const handlePointerMove = useCallback(
     (e) => {
-      if (!zoomEnabled || !active) return;
+      if (!zoomEnabled || !active || imageError) return;
       if (e.pointerType === "touch") return;
       const el = containerRef.current;
       if (!el) return;
@@ -92,7 +92,7 @@ function ProductPrimaryImage({
         true
       );
     },
-    [zoomEnabled, active, onZoomPositionChange, zoomLensSize]
+    [zoomEnabled, active, imageError, zoomLensSize, onZoomPositionChange]
   );
   useEffect(() => {
     const container = containerRef.current;
@@ -109,6 +109,10 @@ function ProductPrimaryImage({
       container.removeEventListener("wheel", handleNativeWheel);
     };
   }, [scrollToZoomEnabled, zoomEnabled, active, onScrollZoom]);
+  useEffect(() => {
+    setImageLoading(true);
+    setImageError(false);
+  }, [image]);
   if (!image && !isPlaceholder) return null;
   const pt = lastPointRef.current;
   let lensStyle;
@@ -132,7 +136,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,
@@ -141,9 +151,9 @@ function ProductPrimaryImage({
         isPlaceholder ? /* @__PURE__ */ jsx(ImagePlaceholder, { width, height }) : /* @__PURE__ */ 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),

package/dist/{chunk-MX57T3HP.js → chunk-GB4ZTUQV.js}

@@ -72,7 +72,8 @@ var Stack = (_a) => {
     marginBottom,
     testid,
     bottom,
-    zIndex
+    zIndex,
+    flexWrap
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -111,9 +112,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__ */ jsx(
@@ -140,7 +142,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: clsx(
         "scrollbar-thin",

package/dist/{chunk-JRHYNZM6.js → chunk-JIMJIJOF.js}

@@ -1,12 +1,12 @@
 import {
   Card
-} from "./chunk-4LXG6QNT.js";
+} from "./chunk-EZCH4PQS.js";
+import {
+  Stack
+} from "./chunk-GB4ZTUQV.js";
 import {
   Paragraph
 } from "./chunk-OGIFIPKH.js";
-import {
-  Stack
-} from "./chunk-MX57T3HP.js";
 import {
   Icon
 } from "./chunk-NKUETCDA.js";

package/dist/{chunk-QF654HYZ.js → chunk-KZZKQLKF.js}

@@ -10,12 +10,12 @@ import {
 import {
   Subheader
 } from "./chunk-FA7IFW66.js";
+import {
+  Stack
+} from "./chunk-GB4ZTUQV.js";
 import {
   Paragraph
 } from "./chunk-OGIFIPKH.js";
-import {
-  Stack
-} from "./chunk-MX57T3HP.js";
 import {
   Icon
 } from "./chunk-NKUETCDA.js";

package/dist/{chunk-4XTTJOQA.js → chunk-LCJZRP5S.js}

@@ -1,12 +1,12 @@
 import {
   Label
 } from "./chunk-7CS736EF.js";
-import {
-  Button
-} from "./chunk-WWAPK5PH.js";
 import {
   Icon
 } from "./chunk-NKUETCDA.js";
+import {
+  Button
+} from "./chunk-WWAPK5PH.js";
 import {
   baseTransition,
   componentGap,
@@ -31,6 +31,7 @@ var OptionPill = (_a) => {
     onClick,
     onRemove,
     removable = false,
+    active = false,
     disabled = false,
     children,
     className
@@ -41,19 +42,27 @@ var OptionPill = (_a) => {
     "onClick",
     "onRemove",
     "removable",
+    "active",
     "disabled",
     "children",
     "className"
   ]);
   const additionalAttributes = {
     "data-disabled": disabled || null,
-    "data-selected": selected || null
+    "data-selected": selected || null,
+    "data-active": active || null
   };
   const classNames = clsx(
     {
+      // Base interactive (only when not disabled)
       "hover:border-border-action-hover active:border-border-action-active": !disabled,
+      // Disabled base
       "data-disabled:cursor-default data-disabled:border-border-primary-normal": disabled,
+      // Active (Figma: filled blue background, white text)
+      "data-active:bg-background-action-primary-normal data-active:text-white data-active:border-transparent": active && !selected,
+      // Selected (filled style) overrides background & border, but keeps outline interaction chain.
       "data-selected:border-transparent data-selected:bg-background-action-secondary-hover data-selected:outline-border-action-normal data-selected:hover:outline-border-action-hover data-selected:active:outline-border-action-active": selected,
+      // Disabled + Selected combination
       "data-selected:data-disabled:bg-background-action-secondary-disabled data-selected:data-disabled:border-border-action-disabled data-selected:data-disabled:outline-transparent": disabled && selected
     },
     !removable && componentPadding,
@@ -105,7 +114,7 @@ var OptionPill = (_a) => {
             ),
             iconOnly: true,
             variant: "tertiary",
-            leftIcon: /* @__PURE__ */ jsx(Icon, { name: "close" })
+            leftIcon: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 })
           }
         )
       ]

package/dist/{chunk-2XHBPMHQ.js → chunk-LLZ3SSZJ.js}

@@ -1,15 +1,15 @@
 import {
   DownloadIcon
-} from "./chunk-XFZRKXMV.js";
+} from "./chunk-EJSPFQCY.js";
 import {
   PDFElement
-} from "./chunk-DCCTNHNL.js";
+} from "./chunk-ERW5DEIO.js";
 import {
   PdfNavigation
-} from "./chunk-BPJR54VM.js";
+} from "./chunk-2HMCS25C.js";
 import {
   Modal
-} from "./chunk-E4AGWXFA.js";
+} from "./chunk-D6YCMQPO.js";
 
 // src/components/PDFViewer/index.tsx
 import { useCallback, useState } from "react";

package/dist/{chunk-A7CEYUVE.js → chunk-LZGYABCX.js}

@@ -1,9 +1,9 @@
 import {
   ProductPrimaryImage
-} from "./chunk-CQFPNZTN.js";
+} from "./chunk-G5DEC7H3.js";
 import {
   Thumbnail
-} from "./chunk-HPQWEZJL.js";
+} from "./chunk-3X3Y4TMS.js";
 import {
   ZoomWindow
 } from "./chunk-BQNPOGD5.js";
@@ -21,7 +21,7 @@ import {
 } from "./chunk-MYKYZHEO.js";
 import {
   Stack
-} from "./chunk-MX57T3HP.js";
+} from "./chunk-GB4ZTUQV.js";
 
 // src/components/ProductImagePreview/useProductImagePreview.ts
 import { useCallback, useEffect, useRef, useState, useMemo } from "react";

package/dist/{chunk-FSLETAX4.js → chunk-MQX7GFLX.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-MYKYZHEO.js";
 import {
   Stack
-} from "./chunk-MX57T3HP.js";
+} from "./chunk-GB4ZTUQV.js";
 
 // src/components/CompactImagesPreview.tsx
 import { useCallback } from "react";
@@ -36,7 +36,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"
       }
@@ -49,7 +54,8 @@ function CompactImagesPreview(props) {
         style: {
           width: isMobile ? "100%" : activeImageWidth,
           height: activeImageHeight,
-          objectPosition: "center"
+          objectPosition: "center",
+          objectFit: "cover"
         },
         src: currentSource.uri,
         alt: currentSource.name
@@ -74,7 +80,8 @@ function CompactImagesPreview(props) {
             style: {
               width: thumbnailWidth,
               height: thumbnailHeight,
-              objectPosition: "center"
+              objectPosition: "center",
+              objectFit: "cover"
             }
           }
         )

package/dist/{chunk-B6FYJZG7.js → chunk-OW3WN3JV.js}

@@ -3,31 +3,34 @@ import {
 } from "./chunk-M7INAUAJ.js";
 import {
   RowDetailModalProvider
-} from "./chunk-5Z4ODAYB.js";
+} from "./chunk-6I5LZ2ZC.js";
 import {
   ColumnList
-} from "./chunk-KSAN4ZLA.js";
+} from "./chunk-AA6GE3TH.js";
 import {
   useGridContext
 } from "./chunk-5IFPG6TS.js";
-import {
-  Theme
-} from "./chunk-EWGHVZL5.js";
 import {
   Tooltip
 } from "./chunk-QQ5G773N.js";
+import {
+  Theme
+} from "./chunk-EWGHVZL5.js";
 import {
   Select
 } from "./chunk-J5V2JRIK.js";
 import {
   Heading3
 } from "./chunk-EU73QPW7.js";
+import {
+  Checkbox
+} from "./chunk-NO5BIKWS.js";
 import {
   DataCellHeader,
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "./chunk-77IGUML3.js";
+} from "./chunk-V47RTW7E.js";
 import {
   Menu
 } from "./chunk-22VBZWJG.js";
@@ -43,12 +46,6 @@ import {
 import {
   Label
 } from "./chunk-7CS736EF.js";
-import {
-  Checkbox
-} from "./chunk-NO5BIKWS.js";
-import {
-  Button
-} from "./chunk-WWAPK5PH.js";
 import {
   useInfiniteScroll,
   useTableLayout
@@ -62,15 +59,18 @@ import {
 import {
   Subheader
 } from "./chunk-FA7IFW66.js";
+import {
+  Stack
+} from "./chunk-GB4ZTUQV.js";
 import {
   Paragraph
 } from "./chunk-OGIFIPKH.js";
-import {
-  Stack
-} from "./chunk-MX57T3HP.js";
 import {
   Icon
 } from "./chunk-NKUETCDA.js";
+import {
+  Button
+} from "./chunk-WWAPK5PH.js";
 import {
   componentGap,
   componentPadding

package/dist/components/Accordion.cjs

@@ -201,8 +201,9 @@ var import_clsx2 = __toESM(require("clsx"), 1);
 var import_jsx_runtime = 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_runtime.jsx)(
-    "div",
+    CardComponent,
     __spreadProps(__spreadValues({}, rest), {
       "data-testid": testid,
       className: (0, import_clsx2.default)(
@@ -315,7 +316,8 @@ var Stack = (_a) => {
     marginBottom,
     testid,
     bottom,
-    zIndex
+    zIndex,
+    flexWrap
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -354,9 +356,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_runtime3.jsx)(
@@ -383,7 +386,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_clsx4.default)(
         "scrollbar-thin",

package/dist/components/Accordion.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   Accordion
-} from "../chunk-JRHYNZM6.js";
-import "../chunk-4LXG6QNT.js";
+} from "../chunk-JIMJIJOF.js";
+import "../chunk-EZCH4PQS.js";
+import "../chunk-GB4ZTUQV.js";
 import "../chunk-OGIFIPKH.js";
-import "../chunk-MX57T3HP.js";
 import "../chunk-NKUETCDA.js";
 import "../chunk-6CTCHYIS.js";
 import "../chunk-ORMEWXMH.js";