@dmsi/wedgekit-react 0.0.417 → 0.0.419

package/dist/components/MobileDataGrid/index.cjs

@@ -5041,6 +5041,9 @@ var Pagination = ({
 };
 Pagination.displayName = "Pagination";
 
+// src/components/SkeletonParagraph.tsx
+var import_jsx_runtime51 = require("react/jsx-runtime");
+
 // src/components/MobileDataGrid/GridContextProvider/useGridContext.ts
 var import_react34 = require("react");
 
@@ -5058,7 +5061,7 @@ function useGridContext() {
 }
 
 // src/components/MobileDataGrid/ColumnSelector/index.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function ColumnSelector() {
   const context = useGridContext();
   const ref = (0, import_react35.useRef)(null);
@@ -5079,7 +5082,7 @@ function ColumnSelector() {
     },
     [dispatch]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
     "div",
     {
       id: id ? `${id}-column-selector` : void 0,
@@ -5087,7 +5090,7 @@ function ColumnSelector() {
       className: "text-text-secondary-normal border-l border-brand-200 p-mobile-container-padding",
       ref,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           Button,
           {
             id: id ? `${id}-button` : void 0,
@@ -5096,10 +5099,10 @@ function ColumnSelector() {
             variant: "navigation",
             iconOnly: true,
             size: 24,
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon, { name: "tune" })
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon, { name: "tune" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
           Menu,
           {
             id: id ? `${id}-menu` : void 0,
@@ -5110,7 +5113,7 @@ function ColumnSelector() {
             setShow,
             calculateMinMaxHeight: true,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
                 Button,
                 {
                   id: id ? `${id}-reset-button` : void 0,
@@ -5128,11 +5131,11 @@ function ColumnSelector() {
                 return (_a = x.meta) == null ? void 0 : _a.inVisibilityMenu;
               }).map((column) => {
                 var _a, _b, _c;
-                return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
                   MenuOption,
                   {
                     testid: testid ? `${testid}-option-${column.id}` : void 0,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
                       Checkbox,
                       {
                         id: id ? `${id}-checkbox-${column.id}` : void 0,
@@ -5162,7 +5165,7 @@ function ColumnSelector() {
 }
 
 // src/components/MobileDataGrid/MobileDataGridHeader.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function MobileDataGridHeader({
   header: Header,
   enableColumnSelector,
@@ -5180,15 +5183,15 @@ function MobileDataGridHeader({
     handleRowSelectAll
   } = ctx;
   if (typeof Header === "undefined" && !primaryKey) return null;
-  if (typeof Header === "function") return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Header, __spreadValues({}, ctx));
+  if (typeof Header === "function") return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Header, __spreadValues({}, ctx));
   if (typeof Header === "string" || primaryKey)
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "div",
       {
         id: id ? `${id}-header` : void 0,
         "data-testid": testid ? `${testid}-header` : void 0,
         className: "sticky top-0",
-        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Theme, { theme: "brand", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Theme, { theme: "brand", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
           Stack,
           {
             horizontal: true,
@@ -5197,7 +5200,7 @@ function MobileDataGridHeader({
             justify: "between",
             backgroundColor: "background-primary-normal",
             children: [
-              enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "p-mobile-component-padding border-r border-brand-200 max-w-fit h-full", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+              enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "p-mobile-component-padding border-r border-brand-200 max-w-fit h-full", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                 Checkbox,
                 {
                   id: id ? `${id}-select-all-checkbox` : void 0,
@@ -5207,7 +5210,7 @@ function MobileDataGridHeader({
                   onChange: handleRowSelectAll
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
                 Stack,
                 {
                   horizontal: true,
@@ -5215,10 +5218,10 @@ function MobileDataGridHeader({
                   items: "center",
                   sizing: "component",
                   padding: true,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Heading3, { as: "span", color: "text-primary-normal", children: typeof Header === "string" ? Header : (_b = (_a = columns.find((col) => col.id === primaryKey)) == null ? void 0 : _a.header) == null ? void 0 : _b.toString() })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Heading3, { as: "span", color: "text-primary-normal", children: typeof Header === "string" ? Header : (_b = (_a = columns.find((col) => col.id === primaryKey)) == null ? void 0 : _a.header) == null ? void 0 : _b.toString() })
                 }
               ),
-              enableColumnSelector && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ColumnSelector, {})
+              enableColumnSelector && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ColumnSelector, {})
             ]
           }
         ) })
@@ -5257,7 +5260,7 @@ function dataGridReducer(state, action) {
 }
 
 // src/components/MobileDataGrid/GridContextProvider/index.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function GridContextProvider(props) {
   const {
     initialColumns,
@@ -5328,7 +5331,7 @@ function GridContextProvider(props) {
       return ((_a = x.meta) == null ? void 0 : _a.visible) !== false;
     }).slice(0, effectiveLimit);
   }, [columns, numberOfColumnsToShow, primaryKey]);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     GridContext.Provider,
     {
       value: {
@@ -5356,12 +5359,12 @@ function GridContextProvider(props) {
 }
 
 // src/components/MobileDataGrid/MobileDataGridCard/MobileDataGridColumn.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function MobileDataGridColumn(props) {
   var _a;
   const { column, data } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "mb-2 grid grid-cols-2 gap-2 px-3 flex-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "mb-2 grid grid-cols-2 gap-2 px-3 flex-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
       (_a = column.header) == null ? void 0 : _a.toString(),
       ":"
     ] }),
@@ -5371,28 +5374,28 @@ function MobileDataGridColumn(props) {
 }
 
 // src/components/MobileDataGrid/RowDetailModalProvider/ModalContent.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function ModalContent2() {
   const context = useGridContext();
   const { columns, currentRow } = context;
   if (!currentRow) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Stack, { sizing: "layout-group", children: columns.filter((x) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Stack, { sizing: "layout-group", children: columns.filter((x) => {
     var _a;
     return !((_a = x.id) == null ? void 0 : _a.startsWith("__"));
   }).map(
     (column, index) => {
       var _a, _b;
-      return ((_a = column.meta) == null ? void 0 : _a.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+      return ((_a = column.meta) == null ? void 0 : _a.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
         "div",
         {
           className: "mb-2 grid grid-cols-2 gap-2 px-3 items-center flex-1",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
               (_b = column.header) == null ? void 0 : _b.toString(),
               ":"
             ] }),
             " ",
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               column.meta.mobileCell,
               {
                 column,
@@ -5403,7 +5406,7 @@ function ModalContent2() {
           ]
         },
         `${column.id}-${index}`
-      ) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         MobileDataGridColumn,
         {
           column,
@@ -5416,7 +5419,7 @@ function ModalContent2() {
 }
 
 // src/components/MobileDataGrid/RowDetailModalProvider/index.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function RowDetailModalProvider() {
   var _a;
   const context = useGridContext();
@@ -5428,7 +5431,7 @@ function RowDetailModalProvider() {
     primaryKey,
     closeRowDetail
   } = context;
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     Modal,
     {
       fixedHeightScrolling: true,
@@ -5437,7 +5440,7 @@ function RowDetailModalProvider() {
       hideCloseIcon: true,
       size: "medium",
       className: "!p-0",
-      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
         Stack,
         {
           horizontal: true,
@@ -5446,8 +5449,8 @@ function RowDetailModalProvider() {
           justify: "between",
           width: "full",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Heading2, { children: (_a = currentRow == null ? void 0 : currentRow[primaryKey != null ? primaryKey : "id"]) != null ? _a : "Grid Detail" }),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Heading2, { children: (_a = currentRow == null ? void 0 : currentRow[primaryKey != null ? primaryKey : "id"]) != null ? _a : "Grid Detail" }),
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
               Button,
               {
                 id: id ? `${id}-open-in-new-button` : void 0,
@@ -5455,15 +5458,15 @@ function RowDetailModalProvider() {
                 iconOnly: true,
                 variant: "tertiary",
                 onClick: closeRowDetail,
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Icon, { name: "open_in_new", size: 24 }) })
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Icon, { name: "open_in_new", size: 24 }) })
               }
             )
           ]
         }
       ),
-      customActions: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Button, { onClick: closeRowDetail, className: "w-full", children: "Close" }),
+      customActions: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Button, { onClick: closeRowDetail, className: "w-full", children: "Close" }),
       showButtons: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "bg-white max-h-full flex flex-col flex-grow-1", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ModalContent2, {}) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "bg-white max-h-full flex flex-col flex-grow-1", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ModalContent2, {}) })
     }
   );
 }
@@ -5473,7 +5476,7 @@ var import_clsx37 = __toESM(require("clsx"), 1);
 
 // src/components/MobileDataGrid/MobileDataGridCard/index.tsx
 var import_clsx36 = __toESM(require("clsx"), 1);
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function MobileDataGridCard({
   renderLink,
   renderChevron = true,
@@ -5485,7 +5488,7 @@ function MobileDataGridCard({
   var _a;
   const context = useGridContext();
   const { id, testid, visibleColumns, getId, handleRowSelect, openRowDetail } = context;
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
     "li",
     {
       id: id ? `${id}-card-${getId(data)}` : void 0,
@@ -5496,16 +5499,16 @@ function MobileDataGridCard({
       ),
       onClick: () => openRowDetail(data),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Stack, { sizing: "component", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "between", children: [
-            enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Stack, { sizing: "component", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "between", children: [
+            enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
               Stack,
               {
                 sizing: "component",
                 padding: true,
                 width: "fit",
                 onClick: (e) => e.stopPropagation(),
-                children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
                   Checkbox,
                   {
                     id: id ? `${id}-${getId(data)}-select-checkbox` : void 0,
@@ -5516,16 +5519,16 @@ function MobileDataGridCard({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
               Stack,
               {
                 sizing: "component",
                 padding: true,
                 onClick: (e) => e.stopPropagation(),
-                children: renderLink ? renderLink(data) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Subheader, { children: String((_a = data[context.primaryKey]) != null ? _a : "") })
+                children: renderLink ? renderLink(data) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Subheader, { children: String((_a = data[context.primaryKey]) != null ? _a : "") })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
               Stack,
               {
                 horizontal: true,
@@ -5538,18 +5541,18 @@ function MobileDataGridCard({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Stack, { sizing: "layout-group", children: visibleColumns.filter((x) => {
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Stack, { sizing: "layout-group", children: visibleColumns.filter((x) => {
             var _a2, _b;
             return ((_a2 = x.meta) == null ? void 0 : _a2.visible) !== false && !((_b = x.id) == null ? void 0 : _b.startsWith("__"));
           }).map(
             (column, index) => {
               var _a2, _b;
-              return ((_a2 = column.meta) == null ? void 0 : _a2.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+              return ((_a2 = column.meta) == null ? void 0 : _a2.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
                 "div",
                 {
                   className: "mb-2 grid grid-cols-2 gap-2 px-3 items-center flex-1",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
                       Paragraph,
                       {
                         color: "text-secondary-normal",
@@ -5561,7 +5564,7 @@ function MobileDataGridCard({
                       }
                     ),
                     " ",
-                    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
                       column.meta.mobileCell,
                       {
                         column,
@@ -5572,7 +5575,7 @@ function MobileDataGridCard({
                   ]
                 },
                 `${column.id}-${index}`
-              ) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
                 MobileDataGridColumn,
                 {
                   column,
@@ -5583,14 +5586,14 @@ function MobileDataGridCard({
             }
           ) })
         ] }),
-        renderChevron && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Stack, { items: "center", justify: "center", horizontal: true, horizontalMobile: true, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Icon, { name: "keyboard_arrow_down" }) })
+        renderChevron && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Stack, { items: "center", justify: "center", horizontal: true, horizontalMobile: true, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon, { name: "keyboard_arrow_down" }) })
       ]
     }
   );
 }
 
 // src/components/MobileDataGrid/ColumnList.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function ColumnList(props) {
   const {
     withBorder,
@@ -5602,14 +5605,14 @@ function ColumnList(props) {
   } = props;
   const ctx = useGridContext();
   const { id, testid, data, getId, selectedRowIds } = ctx;
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     "div",
     {
       className: (0, import_clsx37.default)(
         "flex flex-col flex-1 relative overflow-y-auto overflow-x-hidden",
         !!Footer && "mb-20"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
         "ul",
         {
           id,
@@ -5622,7 +5625,7 @@ function ColumnList(props) {
           children: [
             data.map((item) => {
               const id2 = getId(item);
-              return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                 MobileDataGridCard,
                 {
                   data: item,
@@ -5635,7 +5638,7 @@ function ColumnList(props) {
                 id2
               );
             }),
-            !!Footer && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "fixed left-0 right-0 bottom-0 flex flex-col w-full min-h-20", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Footer, __spreadValues({}, ctx)) })
+            !!Footer && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "fixed left-0 right-0 bottom-0 flex flex-col w-full min-h-20", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Footer, __spreadValues({}, ctx)) })
           ]
         }
       )
@@ -5644,7 +5647,7 @@ function ColumnList(props) {
 }
 
 // src/components/MobileDataGrid/index.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 function MobileDataGrid(props) {
   const {
     columns,
@@ -5666,7 +5669,7 @@ function MobileDataGrid(props) {
     rowActions,
     rounded
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
     GridContextProvider,
     {
       initialColumns: columns,
@@ -5678,7 +5681,7 @@ function MobileDataGrid(props) {
       numberOfColumnsToShow,
       primaryKey,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
           Stack,
           {
             height: "full",
@@ -5686,7 +5689,7 @@ function MobileDataGrid(props) {
             overflowX: "hidden",
             overflowY: "hidden",
             children: [
-              !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+              !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                 MobileDataGridHeader,
                 {
                   header,
@@ -5694,7 +5697,7 @@ function MobileDataGrid(props) {
                   enableRowSelection
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                 ColumnList,
                 {
                   withBorder,
@@ -5708,7 +5711,7 @@ function MobileDataGrid(props) {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(RowDetailModalProvider, {})
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(RowDetailModalProvider, {})
       ]
     }
   );

package/dist/components/MobileDataGrid/index.js

@@ -1,9 +1,9 @@
 import {
   MobileDataGrid
-} from "../../chunk-HYJIDHAK.js";
-import "../../chunk-M7INAUAJ.js";
+} from "../../chunk-TQIKP534.js";
 import "../../chunk-7AXHAWJX.js";
 import "../../chunk-P3MIP2FD.js";
+import "../../chunk-M7INAUAJ.js";
 import "../../chunk-3HBYDOYE.js";
 import "../../chunk-IMOIZFJZ.js";
 import "../../chunk-MBZ55T2D.js";
@@ -23,6 +23,7 @@ import "../../chunk-VJVY6NPF.js";
 import "../../chunk-EWGHVZL5.js";
 import "../../chunk-DCLNAUC4.js";
 import "../../chunk-PQWWVBSR.js";
+import "../../chunk-ESCNCQGI.js";
 import "../../chunk-AT4AWD6B.js";
 import "../../chunk-J5V2JRIK.js";
 import "../../chunk-TYAQWVIM.js";
@@ -32,13 +33,13 @@ import "../../chunk-AG43RS4Q.js";
 import "../../chunk-XM7IQHBU.js";
 import "../../chunk-FRHPFACM.js";
 import "../../chunk-T36HX6QY.js";
-import "../../chunk-NRNWEQD7.js";
+import "../../chunk-IFHMGICR.js";
 import "../../chunk-SBRRNFOP.js";
 import "../../chunk-Y2GK27RX.js";
 import "../../chunk-EU73QPW7.js";
 import "../../chunk-QVWYTQKL.js";
 import "../../chunk-NO5BIKWS.js";
-import "../../chunk-CAQWLY5V.js";
+import "../../chunk-CANJ2YPW.js";
 import "../../chunk-V47RTW7E.js";
 import "../../chunk-22VBZWJG.js";
 import "../../chunk-NVOZAVEX.js";

package/dist/components/SkeletonParagraph.js

@@ -1,10 +1,7 @@
+import {
+  SkeletonParagraph
+} from "../chunk-ESCNCQGI.js";
 import "../chunk-ORMEWXMH.js";
-
-// src/components/SkeletonParagraph.tsx
-import { jsx } from "react/jsx-runtime";
-function SkeletonParagraph() {
-  return /* @__PURE__ */ jsx("div", { className: "h-[24px] bg-gradient-to-r from-neutral-100 to-[#f7f7f7] w-full rounded-xs min-w-32 " });
-}
 export {
   SkeletonParagraph
 };

package/dist/components/index.cjs

@@ -83,6 +83,7 @@ __export(components_exports, {
   Search: () => Search,
   Select: () => Select,
   SimpleTable: () => SimpleTable,
+  SkeletonParagraph: () => SkeletonParagraph,
   Subheader: () => Subheader,
   Tooltip: () => Tooltip
 });
@@ -6621,7 +6622,7 @@ function CompactImagesPreview(props) {
         onClick: onMainImageClick
       }
     ),
-    /* @__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) => {
@@ -7036,7 +7037,7 @@ function ListGroup({
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Stack, { sizing: "layout", paddingY: true, children })
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Stack, { sizing: "layout", paddingTop: true, children })
   ] }) });
 }
 
@@ -7185,6 +7186,12 @@ var Pagination = ({
   );
 };
 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,
@@ -7211,6 +7218,7 @@ Pagination.displayName = "Pagination";
   Search,
   Select,
   SimpleTable,
+  SkeletonParagraph,
   Subheader,
   Tooltip
 });

package/dist/components/index.js

@@ -1,10 +1,10 @@
 import {
   DataGrid,
   MobileDataGrid
-} from "../chunk-HYJIDHAK.js";
-import "../chunk-M7INAUAJ.js";
+} from "../chunk-TQIKP534.js";
 import "../chunk-7AXHAWJX.js";
 import "../chunk-P3MIP2FD.js";
+import "../chunk-M7INAUAJ.js";
 import {
   PDFViewer
 } from "../chunk-3HBYDOYE.js";
@@ -32,6 +32,9 @@ import {
 import {
   SimpleTable
 } from "../chunk-PQWWVBSR.js";
+import {
+  SkeletonParagraph
+} from "../chunk-ESCNCQGI.js";
 import "../chunk-AT4AWD6B.js";
 import {
   Select
@@ -47,7 +50,7 @@ import "../chunk-FRHPFACM.js";
 import "../chunk-T36HX6QY.js";
 import {
   ListGroup
-} from "../chunk-NRNWEQD7.js";
+} from "../chunk-IFHMGICR.js";
 import "../chunk-SBRRNFOP.js";
 import "../chunk-Y2GK27RX.js";
 import "../chunk-EU73QPW7.js";
@@ -57,7 +60,7 @@ import {
 } from "../chunk-NO5BIKWS.js";
 import {
   CompactImagesPreview
-} from "../chunk-CAQWLY5V.js";
+} from "../chunk-CANJ2YPW.js";
 import {
   DataCellHeader,
   DataGridCell,
@@ -131,6 +134,7 @@ export {
   Search,
   Select,
   SimpleTable,
+  SkeletonParagraph,
   Subheader,
   Tooltip
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.417",
+  "version": "0.0.419",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/CompactImagesPreview.tsx

@@ -97,7 +97,7 @@ export function CompactImagesPreview(props: CompactImagesPreviewProps) {
         onClick={onMainImageClick}
       />
       <div className="flex flex-row flex-wrap items-center gap-3">
-        {sources.map((source, index) => (
+        {sources.slice(0, 4).map((source, index) => (
           <button
             key={`compact-image-${source.uri}-${index}`}
             onClick={(e) => {

package/src/components/ListGroup.tsx

@@ -72,7 +72,7 @@ export function ListGroup({
           />
         </button>
         {isOpen && (
-          <Stack sizing="layout" paddingY>
+          <Stack sizing="layout" paddingTop>
             {children}
           </Stack>
         )}

package/src/components/index.ts

@@ -27,3 +27,4 @@ export { SimpleTable } from "./SimpleTable";
 export { PDFViewer } from "./PDFViewer";
 export { ListGroup } from "./ListGroup";
 export { Pagination } from "./Pagination";
+export { SkeletonParagraph } from "./SkeletonParagraph";

package/dist/{chunk-HYJIDHAK.js → chunk-TQIKP534.js}

@@ -1,9 +1,9 @@
-import {
-  GridContextProvider
-} from "./chunk-M7INAUAJ.js";
 import {
   RowDetailModalProvider
 } from "./chunk-7AXHAWJX.js";
+import {
+  GridContextProvider
+} from "./chunk-M7INAUAJ.js";
 import {
   ColumnList
 } from "./chunk-LUPHOXAQ.js";