@dmsi/wedgekit-react 0.0.415 → 0.0.418

package/dist/components/index.cjs

@@ -72,14 +72,18 @@ __export(components_exports, {
   Icon: () => Icon,
   Input: () => Input,
   Label: () => Label,
+  ListGroup: () => ListGroup,
   Menu: () => Menu,
   MenuOption: () => MenuOption,
   MobileDataGrid: () => MobileDataGrid,
+  PDFViewer: () => PDFViewer,
+  Pagination: () => Pagination,
   Paragraph: () => Paragraph,
   ProductImagePreview: () => ProductImagePreview,
   Search: () => Search,
   Select: () => Select,
   SimpleTable: () => SimpleTable,
+  SkeletonParagraph: () => SkeletonParagraph,
   Subheader: () => Subheader,
   Tooltip: () => Tooltip
 });
@@ -3993,7 +3997,7 @@ var Tooltip = ({
       id,
       "data-testid": testid,
       ref,
-      className: "relative inline-grid grid-cols-[auto_1fr] items-center",
+      className: "relative inline-grid grid-cols-[auto_1fr] items-center cursor-pointer",
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: [
@@ -4045,14 +4049,50 @@ var import_clsx21 = __toESM(require("clsx"), 1);
 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 _a = props, {
+    children,
+    selected,
+    testid,
+    padding,
+    paddingX,
+    paddingY,
+    paddingBottom,
+    paddingTop,
+    paddingLeft,
+    paddingRight
+  } = _a, rest = __objRest(_a, [
+    "children",
+    "selected",
+    "testid",
+    "padding",
+    "paddingX",
+    "paddingY",
+    "paddingBottom",
+    "paddingTop",
+    "paddingLeft",
+    "paddingRight"
+  ]);
   const CardComponent = props.as || "div";
+  const anyPaddingPropSpecified = padding !== void 0 || paddingX !== void 0 || paddingY !== void 0 || paddingBottom !== void 0 || paddingTop !== void 0 || paddingLeft !== void 0 || paddingRight !== void 0;
+  const paddingClasses = (0, import_clsx19.default)(
+    // Backward compatibility: if no new padding props provided keep existing class.
+    !anyPaddingPropSpecified && "p-desktop-layout-padding",
+    // New responsive spacing tokens (mirrors Stack for layout sizing)
+    padding && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+    paddingX && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
+    paddingY && "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
+    paddingBottom && "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding",
+    paddingTop && "pt-mobile-layout-padding desktop:pt-desktop-layout-padding compact:pt-desktop-compact-layout-padding",
+    paddingLeft && "pl-mobile-layout-padding desktop:pl-desktop-layout-padding compact:pl-desktop-compact-layout-padding",
+    paddingRight && "pr-mobile-layout-padding desktop:pr-desktop-layout-padding compact:pr-desktop-compact-layout-padding"
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     CardComponent,
     __spreadProps(__spreadValues({}, rest), {
       "data-testid": testid,
       className: (0, import_clsx19.default)(
-        "rounded-sm p-desktop-layout-padding",
+        "rounded-sm",
+        paddingClasses,
         selected ? "border-2 border-border-primary-focus" : "border border-border-primary-normal",
         rest.className
       ),
@@ -4096,6 +4136,10 @@ var Stack = (_a) => {
     padding,
     paddingX,
     paddingY,
+    paddingBottom,
+    paddingTop,
+    paddingLeft,
+    paddingRight,
     margin,
     marginX,
     marginY,
@@ -4111,6 +4155,10 @@ var Stack = (_a) => {
     height,
     maxHeight,
     borderColor,
+    borderTopColor,
+    borderRightColor,
+    borderBottomColor,
+    borderLeftColor,
     backgroundColor,
     sizing = "none",
     overflowY = "inherit",
@@ -4136,6 +4184,10 @@ var Stack = (_a) => {
     "padding",
     "paddingX",
     "paddingY",
+    "paddingBottom",
+    "paddingTop",
+    "paddingLeft",
+    "paddingRight",
     "margin",
     "marginX",
     "marginY",
@@ -4151,6 +4203,10 @@ var Stack = (_a) => {
     "height",
     "maxHeight",
     "borderColor",
+    "borderTopColor",
+    "borderRightColor",
+    "borderBottomColor",
+    "borderLeftColor",
     "backgroundColor",
     "sizing",
     "overflowY",
@@ -4186,6 +4242,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,
@@ -4225,6 +4285,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",
@@ -5582,101 +5658,77 @@ function Thumbnail({
 }
 
 // src/components/Grid.tsx
-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 = {
-  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_react27.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_runtime43.jsx)(
     "div",
-    {
+    __spreadProps(__spreadValues({
       id,
       "data-testid": testid,
+      style
+    }, rest), {
       className: (0, import_clsx30.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_react28 = require("react");
+var import_react27 = require("react");
 
 // src/components/Spinner.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
@@ -5722,14 +5774,14 @@ function ProductPrimaryImage({
   onZoomPositionChange,
   onScrollZoom
 }) {
-  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 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 schedule = () => {
     if (rafRef.current != null) return;
     rafRef.current = requestAnimationFrame(() => {
@@ -5737,7 +5789,7 @@ function ProductPrimaryImage({
       forceRerender((n) => n + 1);
     });
   };
-  const handlePointerEnter = (0, import_react28.useCallback)(() => {
+  const handlePointerEnter = (0, import_react27.useCallback)(() => {
     if (!zoomEnabled) return;
     setActive(true);
     const el = containerRef.current;
@@ -5750,13 +5802,13 @@ function ProductPrimaryImage({
       );
     }
   }, [zoomEnabled, onZoomPositionChange, zoomLensSize]);
-  const handlePointerLeave = (0, import_react28.useCallback)(() => {
+  const handlePointerLeave = (0, import_react27.useCallback)(() => {
     if (!zoomEnabled) return;
     setActive(false);
     lastPointRef.current = null;
     onZoomPositionChange == null ? void 0 : onZoomPositionChange(null, false);
   }, [zoomEnabled, onZoomPositionChange]);
-  const handlePointerMove = (0, import_react28.useCallback)(
+  const handlePointerMove = (0, import_react27.useCallback)(
     (e) => {
       if (!zoomEnabled || !active || imageError) return;
       if (e.pointerType === "touch") return;
@@ -5792,7 +5844,7 @@ function ProductPrimaryImage({
     },
     [zoomEnabled, active, imageError, zoomLensSize, onZoomPositionChange]
   );
-  (0, import_react28.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     const container = containerRef.current;
     if (!container || !scrollToZoomEnabled) return;
     const handleNativeWheel = (e) => {
@@ -5807,7 +5859,7 @@ function ProductPrimaryImage({
       container.removeEventListener("wheel", handleNativeWheel);
     };
   }, [scrollToZoomEnabled, zoomEnabled, active, onScrollZoom]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     setImageLoading(true);
     setImageError(false);
   }, [image]);
@@ -5876,7 +5928,7 @@ function ProductPrimaryImage({
 }
 
 // src/components/ProductImagePreview/ZoomWindow.tsx
-var import_react29 = require("react");
+var import_react28 = require("react");
 
 // src/components/Surface.tsx
 var import_clsx31 = __toESM(require("clsx"), 1);
@@ -5927,7 +5979,7 @@ function ZoomWindow({
   offset = 10,
   className = ""
 }) {
-  const imageSrc = (0, import_react29.useMemo)(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
+  const imageSrc = (0, import_react28.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;
@@ -6056,7 +6108,7 @@ function CarouselPagination({
 }
 
 // src/components/ProductImagePreview/MobileImageCarousel.tsx
-var import_react30 = require("react");
+var import_react29 = require("react");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 function MobileImageCarousel({
   images,
@@ -6066,15 +6118,15 @@ function MobileImageCarousel({
   onChangeIndex,
   className = ""
 }) {
-  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 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 imageSize = Math.min(containerWidth * 0.6, height * 0.6);
   const gap = 16;
-  const getTranslateX = (0, import_react30.useCallback)(
+  const getTranslateX = (0, import_react29.useCallback)(
     (index) => {
       const containerCenter = containerWidth / 2;
       const imageCenter = imageSize / 2;
@@ -6083,12 +6135,12 @@ function MobileImageCarousel({
     },
     [containerWidth, imageSize, gap]
   );
-  (0, import_react30.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const translateX = getTranslateX(currentIndex);
     setCurrentTranslate(translateX);
     setPrevTranslate(translateX);
   }, [currentIndex, getTranslateX]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const updateContainerWidth = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -6102,11 +6154,11 @@ function MobileImageCarousel({
     }
     return () => resizeObserver.disconnect();
   }, []);
-  const handleStart = (0, import_react30.useCallback)((clientX) => {
+  const handleStart = (0, import_react29.useCallback)((clientX) => {
     setIsDragging(true);
     setStartX(clientX);
   }, []);
-  const handleMove = (0, import_react30.useCallback)(
+  const handleMove = (0, import_react29.useCallback)(
     (clientX) => {
       if (!isDragging) return;
       const currentPosition = clientX;
@@ -6115,7 +6167,7 @@ function MobileImageCarousel({
     },
     [isDragging, startX, prevTranslate]
   );
-  const handleEnd = (0, import_react30.useCallback)(() => {
+  const handleEnd = (0, import_react29.useCallback)(() => {
     if (!isDragging) return;
     setIsDragging(false);
     const moved = currentTranslate - prevTranslate;
@@ -6163,7 +6215,7 @@ function MobileImageCarousel({
   const handleTouchEnd = () => {
     handleEnd();
   };
-  const handleImageClick = (0, import_react30.useCallback)(
+  const handleImageClick = (0, import_react29.useCallback)(
     (index) => {
       if (!isDragging && index !== currentIndex) {
         onChangeIndex(index);
@@ -6243,7 +6295,7 @@ function MobileImageCarousel({
 }
 
 // src/components/ProductImagePreview/useProductImagePreview.ts
-var import_react31 = require("react");
+var import_react30 = require("react");
 function useProductImagePreview(props) {
   const {
     images,
@@ -6256,18 +6308,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_react31.useMemo)(() => {
+  const active = (0, import_react30.useMemo)(() => {
     return hasImages ? images[safeIndex] : void 0;
   }, [hasImages, images, safeIndex]);
-  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 [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 effectiveZoomEnabled = zoomEnabled && !isMobile;
   const effectiveScrollToZoomEnabled = scrollToZoomEnabled && !isMobile;
-  (0, import_react31.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (!effectiveZoomEnabled) return;
     const setupTracking = () => {
       const element = primaryImageRef.current;
@@ -6301,24 +6353,24 @@ function useProductImagePreview(props) {
       }
     };
   }, [effectiveZoomEnabled]);
-  const handleSelect = (0, import_react31.useCallback)(
+  const handleSelect = (0, import_react30.useCallback)(
     (idx) => {
       if (idx === safeIndex) return;
       onChangeIndex(idx);
     },
     [safeIndex, onChangeIndex]
   );
-  const handleNext = (0, import_react31.useCallback)(() => {
+  const handleNext = (0, import_react30.useCallback)(() => {
     if (!hasImages) return;
     const nextIndex = (safeIndex + 1) % images.length;
     onChangeIndex(nextIndex);
   }, [hasImages, safeIndex, images.length, onChangeIndex]);
-  const handlePrevious = (0, import_react31.useCallback)(() => {
+  const handlePrevious = (0, import_react30.useCallback)(() => {
     if (!hasImages) return;
     const previousIndex = safeIndex === 0 ? images.length - 1 : safeIndex - 1;
     onChangeIndex(previousIndex);
   }, [hasImages, safeIndex, images.length, onChangeIndex]);
-  const handleZoomPositionChange = (0, import_react31.useCallback)(
+  const handleZoomPositionChange = (0, import_react30.useCallback)(
     (p, active2) => {
       if (isMobile) return;
       setZoomPoint(p);
@@ -6326,7 +6378,7 @@ function useProductImagePreview(props) {
     },
     [isMobile]
   );
-  const handleScrollZoom = (0, import_react31.useCallback)(
+  const handleScrollZoom = (0, import_react30.useCallback)(
     (delta) => {
       if (!effectiveScrollToZoomEnabled) return;
       const newZoomFactor = Math.max(1, Math.min(5, currentZoomFactor + delta));
@@ -6334,7 +6386,7 @@ function useProductImagePreview(props) {
     },
     [effectiveScrollToZoomEnabled, currentZoomFactor]
   );
-  (0, import_react31.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     setCurrentZoomFactor(zoomFactor);
   }, [zoomFactor]);
   return {
@@ -6498,7 +6550,7 @@ function ProductImagePreview(props) {
 }
 
 // src/components/CompactImagesPreview.tsx
-var import_react32 = require("react");
+var import_react31 = require("react");
 var import_clsx33 = __toESM(require("clsx"), 1);
 var import_jsx_runtime51 = require("react/jsx-runtime");
 function CompactImagesPreview(props) {
@@ -6511,11 +6563,23 @@ function CompactImagesPreview(props) {
     thumbnailHeight = 30,
     enableThumbnailBorder = false,
     placeholderImageUri,
-    onChangeSource
+    placeholderAlt = "placeholder image",
+    onChangeSource,
+    onMainImageClick
   } = props;
   const isMobile = useMatchesMobile();
   const imagesCount = sources.length;
-  const handleThumbnailClick = (0, import_react32.useCallback)(
+  const handleImgError = (0, import_react31.useCallback)(
+    (e) => {
+      if (!placeholderImageUri) return;
+      const img = e.currentTarget;
+      if (img.src === placeholderImageUri) return;
+      img.src = placeholderImageUri;
+      if (!img.alt) img.alt = placeholderAlt;
+    },
+    [placeholderImageUri, placeholderAlt]
+  );
+  const handleThumbnailClick = (0, import_react31.useCallback)(
     (newIndex) => {
       if (newIndex === currentSourceIndex) return;
       if (newIndex < 0 || newIndex >= imagesCount) return;
@@ -6535,7 +6599,9 @@ function CompactImagesPreview(props) {
           objectFit: "cover"
         },
         src: placeholderImageUri,
-        alt: "placeholder image"
+        alt: placeholderAlt,
+        onError: handleImgError,
+        onClick: onMainImageClick
       }
     );
   const currentSource = sources[currentSourceIndex];
@@ -6543,6 +6609,7 @@ function CompactImagesPreview(props) {
     /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       "img",
       {
+        className: (0, import_clsx33.default)("object-center", onMainImageClick && "cursor-pointer"),
         style: {
           width: isMobile ? "100%" : activeImageWidth,
           height: activeImageHeight,
@@ -6550,10 +6617,12 @@ function CompactImagesPreview(props) {
           objectFit: "cover"
         },
         src: currentSource.uri,
-        alt: currentSource.name
+        alt: currentSource.name,
+        onError: handleImgError,
+        onClick: onMainImageClick
       }
     ),
-    sources.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex flex-row flex-wrap items-center gap-3", children: sources.map((source, index) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex flex-row flex-wrap items-center gap-3", children: sources.slice(0, 4).map((source, index) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       "button",
       {
         onClick: (e) => {
@@ -6574,7 +6643,8 @@ function CompactImagesPreview(props) {
               height: thumbnailHeight,
               objectPosition: "center",
               objectFit: "cover"
-            }
+            },
+            onError: handleImgError
           }
         )
       },
@@ -6633,6 +6703,495 @@ function SimpleTable({
     )) })
   ] }) });
 }
+
+// src/components/PDFViewer/index.tsx
+var import_react34 = require("react");
+
+// src/components/PDFViewer/PDFElement.tsx
+var import_react_pdf2 = require("@mikecousins/react-pdf");
+var import_react33 = require("react");
+
+// src/components/PDFViewer/PDFPage.tsx
+var import_react_pdf = require("@mikecousins/react-pdf");
+var import_react32 = require("react");
+var import_jsx_runtime53 = require("react/jsx-runtime");
+function PdfPage({
+  file,
+  pageNumber,
+  testid,
+  isMobile
+}) {
+  const canvasRef = (0, import_react32.useRef)(null);
+  const { pdfDocument } = (0, import_react_pdf.usePdf)({
+    file,
+    page: pageNumber,
+    canvasRef,
+    workerSrc: "/scripts/pdf.worker.min.mjs",
+    scale: isMobile ? 1 : 1.3
+  });
+  if (!pdfDocument) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    "canvas",
+    {
+      ref: canvasRef,
+      "data-testid": testid,
+      style: { width: "100%", height: "auto" }
+    }
+  );
+}
+
+// src/components/PDFViewer/PDFElement.tsx
+var import_clsx35 = __toESM(require("clsx"), 1);
+var import_jsx_runtime54 = require("react/jsx-runtime");
+function PDFElement({
+  b64,
+  testid,
+  isMobile,
+  error
+}) {
+  var _a;
+  const canvasRef = (0, import_react33.useRef)(null);
+  const { pdfDocument } = (0, import_react_pdf2.usePdf)({
+    file: `data:application/pdf;base64,${b64}`,
+    workerSrc: "/scripts/pdf.worker.min.mjs",
+    scale: isMobile ? 1 : 1.3,
+    canvasRef
+  });
+  const pagesArr = new Array((_a = pdfDocument == null ? void 0 : pdfDocument.numPages) != null ? _a : 1).fill(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    "div",
+    {
+      className: "flex flex-col space-y-4",
+      style: !isMobile ? {
+        minHeight: 871,
+        minWidth: 654
+      } : void 0,
+      children: !!pdfDocument && !!b64 && !error ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Stack, { sizing: "layout-group", children: pagesArr.length > 1 ? pagesArr.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        "div",
+        {
+          className: (0, import_clsx35.default)(
+            "flex justify-center border-border-primary-normal",
+            isMobile ? "border-0" : "border"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            PdfPage,
+            {
+              testid: testid ? `${testid}-pdf_page_${i + 1}` : void 0,
+              file: `data:application/pdf;base64,${b64}`,
+              pageNumber: i + 1
+            }
+          )
+        },
+        `${testid}-pdf-page-${i + 1}`
+      )) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        "div",
+        {
+          className: (0, import_clsx35.default)(
+            "flex justify-center border-border-primary-normal",
+            isMobile ? "border-0" : "border"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            "canvas",
+            {
+              "data-testid": testid ? `${testid}-pdf-content` : void 0,
+              ref: canvasRef,
+              style: { width: "100%", height: "auto" }
+            }
+          )
+        }
+      ) }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        Stack,
+        {
+          justify: "center",
+          items: "center",
+          height: "full",
+          flexGrow: 1,
+          "data-testid": testid ? `${testid}-pdf-${error ? "error" : "loading"}` : void 0,
+          children: error ? error : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Spinner, { size: "large" })
+        }
+      )
+    }
+  );
+}
+
+// src/components/PDFViewer/DownloadIcon.tsx
+var import_jsx_runtime55 = require("react/jsx-runtime");
+function DownloadIcon({
+  onClick,
+  isDownloading,
+  testid
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    Button,
+    {
+      testid,
+      iconOnly: true,
+      variant: "tertiary",
+      leftIcon: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icon, { name: isDownloading ? "cached" : "download" }),
+      onClick
+    }
+  );
+}
+
+// src/components/PDFViewer/PDFNavigation.tsx
+var import_jsx_runtime56 = require("react/jsx-runtime");
+function PdfNavigation({
+  currentIndex,
+  total,
+  onPrev,
+  onNext,
+  disablePrev,
+  disableNext,
+  extraActions,
+  testid,
+  fileName
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+    Stack,
+    {
+      horizontal: true,
+      items: "center",
+      justify: "between",
+      sizing: "layout-group",
+      testid: testid ? `${testid}-pdf-navigation` : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Stack, { horizontal: true, items: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            Button,
+            {
+              iconOnly: true,
+              variant: "tertiary",
+              onClick: onPrev,
+              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Icon, { name: "chevron_backward" }),
+              disabled: disablePrev,
+              testid: testid ? `${testid}-pdf-file-previous-button` : void 0
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Heading3, { className: "text-text-primary-normal whitespace-nowrap", children: [
+            currentIndex + 1,
+            " / ",
+            total
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            Button,
+            {
+              iconOnly: true,
+              variant: "tertiary",
+              onClick: onNext,
+              rightIcon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Icon, { name: "chevron_forward" }),
+              disabled: disableNext,
+              testid: testid ? `${testid}-pdf-file-next-button` : void 0
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Paragraph, { children: (fileName == null ? void 0 : fileName.endsWith(".pdf")) ? fileName : `${fileName}.pdf` })
+        ] }),
+        extraActions && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex items-center gap-2", children: extraActions })
+      ]
+    }
+  ) });
+}
+
+// src/components/PDFViewer/index.tsx
+var import_jsx_runtime57 = require("react/jsx-runtime");
+function PDFViewer(props) {
+  const {
+    isOpen,
+    onClose,
+    encodedPdfs,
+    customActions,
+    testid,
+    isMobile,
+    title,
+    customFooter = false,
+    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)(() => {
+    setIsDownloading(true);
+    const link = document.createElement("a");
+    const currentPdf = encodedPdfs[currentIndex];
+    if (!currentPdf) {
+      setIsDownloading(false);
+      return;
+    }
+    link.href = `data:application/pdf;base64,${currentPdf.base64}`;
+    link.download = currentPdf.fileName.endsWith(".pdf") ? currentPdf.fileName : `${currentPdf.fileName}.pdf`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    setIsDownloading(false);
+  }, [currentIndex, encodedPdfs]);
+  if (!encodedPdfs.length) return null;
+  function handleNextFile() {
+    if (currentIndex < encodedPdfs.length - 1) {
+      setCurrentIndex((prev) => prev + 1);
+    }
+  }
+  function handlePreviousFile() {
+    if (currentIndex > 0) {
+      setCurrentIndex((prev) => prev - 1);
+    }
+  }
+  function handleClose() {
+    setCurrentIndex(0);
+    setIsDownloading(false);
+    onClose();
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    Modal,
+    {
+      testid,
+      open: isOpen,
+      customFooter,
+      onClose: handleClose,
+      noWrapper: true,
+      showButtons: isMobile && customFooter ? !!customActions : !!encodedPdfs.length,
+      customActions: !!encodedPdfs.length && !isMobile && withPagination ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        PdfNavigation,
+        {
+          testid,
+          currentIndex,
+          total: encodedPdfs.length,
+          onPrev: handlePreviousFile,
+          onNext: handleNextFile,
+          disablePrev: currentIndex === 0,
+          disableNext: currentIndex === encodedPdfs.length - 1,
+          extraActions: customActions,
+          fileName: encodedPdfs[currentIndex].fileName
+        }
+      ) : customActions,
+      fixedHeightScrolling: true,
+      headerIconAlign: "right",
+      headerIcon: !isMobile ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        DownloadIcon,
+        {
+          testid: testid ? `${testid}-download-icon` : void 0,
+          onClick: handleDownload,
+          isDownloading
+        }
+      ) : void 0,
+      title: isMobile ? title != null ? title : encodedPdfs[currentIndex].fileName : void 0,
+      size: isMobile ? "screen" : "large",
+      headerClassname: "bg-brand-400 desktop:bg-background-grouped-primary-normal p-mobile-layout-padding text-brand-text-action-primary-normal",
+      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        PDFElement,
+        {
+          testid,
+          b64: encodedPdfs[currentIndex].base64,
+          isMobile,
+          error
+        }
+      )
+    }
+  );
+}
+
+// src/components/ListGroup.tsx
+var import_react35 = require("react");
+var import_clsx36 = __toESM(require("clsx"), 1);
+var import_jsx_runtime58 = require("react/jsx-runtime");
+function ListGroup({
+  title,
+  defaultOpen = false,
+  open: controlledOpen,
+  onToggle,
+  testid,
+  disabled,
+  className,
+  children
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react35.useState)(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+  const toggle = () => {
+    if (disabled) return;
+    const next = !isOpen;
+    if (!isControlled) setUncontrolledOpen(next);
+    onToggle == null ? void 0 : onToggle(next);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { "data-testid": testid, className: (0, import_clsx36.default)("rounded-sm", className), children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Stack, { sizing: "layout", noGap: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: toggle,
+        className: (0, import_clsx36.default)(
+          "w-full flex items-center justify-between text-left",
+          disabled && "opacity-50 cursor-not-allowed"
+        ),
+        "aria-expanded": isOpen,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Label, { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+            Icon,
+            {
+              name: "expand_more",
+              className: (0, import_clsx36.default)(
+                "transition-transform duration-200",
+                isOpen ? "rotate-180" : "rotate-0"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Stack, { sizing: "layout", paddingTop: true, children })
+  ] }) });
+}
+
+// src/components/Pagination.tsx
+var import_react36 = require("react");
+var import_clsx37 = __toESM(require("clsx"), 1);
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var Pagination = ({
+  totalPages,
+  currentPage,
+  onPageChange,
+  id,
+  testid,
+  className,
+  disabled
+}) => {
+  const goTo = (0, import_react36.useCallback)(
+    (page) => {
+      if (disabled) return;
+      onPageChange(page);
+    },
+    [onPageChange, disabled]
+  );
+  const handleKey = (e) => {
+    if (disabled) return;
+    if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      goTo(currentPage - 1);
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      goTo(currentPage + 1);
+    }
+  };
+  const pageTokens = (0, import_react36.useMemo)(() => {
+    if (totalPages <= 5) {
+      return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+    const pages = /* @__PURE__ */ new Set();
+    pages.add(1);
+    pages.add(totalPages);
+    if (currentPage <= 3) {
+      pages.add(2);
+      pages.add(3);
+      pages.add(4);
+    } else if (currentPage >= totalPages - 2) {
+      pages.add(totalPages - 1);
+      pages.add(totalPages - 2);
+      pages.add(totalPages - 3);
+    } else {
+      pages.add(currentPage - 1);
+      pages.add(currentPage);
+      pages.add(currentPage + 1);
+    }
+    const sorted = Array.from(pages).sort((a, b) => a - b);
+    const tokens = [];
+    for (let i = 0; i < sorted.length; i++) {
+      const value = sorted[i];
+      const prev = sorted[i - 1];
+      if (i > 0) {
+        if (value - prev === 2) {
+          tokens.push(prev + 1);
+        } else if (value - prev > 2) {
+          tokens.push("ellipsis");
+        }
+      }
+      tokens.push(value);
+    }
+    return tokens;
+  }, [totalPages, currentPage]);
+  if (totalPages <= 1) return null;
+  const buttonClass = (0, import_clsx37.default)(
+    "cursor-pointer disabled:cursor-default",
+    paddingUsingComponentGap,
+    "w-8 h-8",
+    "flex items-center justify-center",
+    "bg-transparent",
+    "box-content",
+    "hover:bg-background-grouped-secondary-normal",
+    "focus:bg-background-grouped-secondary-normal focus:outline-0",
+    "disabled:bg-transparent disabled:text-text-action-primary-disabled"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+    "nav",
+    {
+      id,
+      "data-testid": testid,
+      "aria-label": "Pagination",
+      onKeyDown: handleKey,
+      className: (0, import_clsx37.default)(
+        "flex items-center",
+        "border border-border-primary-normal",
+        "bg-background-grouped-primary-normal",
+        "rounded-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          "button",
+          {
+            disabled: disabled || currentPage <= 1,
+            "aria-label": "Previous page",
+            onClick: () => goTo(currentPage - 1),
+            className: (0, import_clsx37.default)(buttonClass, "border-r-1 border-border-primary-normal"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon, { name: "keyboard_arrow_left" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("ul", { className: (0, import_clsx37.default)("flex items-center"), children: pageTokens.map((token, index) => {
+          if (token === "ellipsis") {
+            return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+              "li",
+              {
+                className: "w-8 h-8 select-none text-text-action-primary-disabled",
+                children: "\u2026"
+              },
+              `ellipsis-${index}`
+            );
+          }
+          const selected = token === currentPage;
+          return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+            "button",
+            {
+              "aria-label": `Page ${token}`,
+              "aria-current": selected ? "page" : void 0,
+              disabled,
+              onClick: () => goTo(token),
+              className: (0, import_clsx37.default)(
+                buttonClass,
+                selected && "border-x-1 bg-background-grouped-secondary-normal border-border-primary-normal"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Subheader, { align: "center", weight: "bold", children: token })
+            }
+          ) }, token);
+        }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          "button",
+          {
+            disabled: disabled || currentPage >= totalPages,
+            "aria-label": "Next page",
+            onClick: () => goTo(currentPage + 1),
+            className: (0, import_clsx37.default)(buttonClass, "border-l-1 border-border-primary-normal"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon, { name: "keyboard_arrow_right" })
+          }
+        )
+      ]
+    }
+  );
+};
+Pagination.displayName = "Pagination";
+
+// src/components/SkeletonParagraph.tsx
+var import_jsx_runtime60 = require("react/jsx-runtime");
+function SkeletonParagraph() {
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "h-[24px] bg-gradient-to-r from-neutral-100 to-[#f7f7f7] w-full rounded-xs min-w-32 " });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -6648,14 +7207,18 @@ function SimpleTable({
   Icon,
   Input,
   Label,
+  ListGroup,
   Menu,
   MenuOption,
   MobileDataGrid,
+  PDFViewer,
+  Pagination,
   Paragraph,
   ProductImagePreview,
   Search,
   Select,
   SimpleTable,
+  SkeletonParagraph,
   Subheader,
   Tooltip
 });