@dmsi/wedgekit-react 0.0.440 → 0.0.442

package/dist/components/DataGrid/TableBody/TableBodyRow.cjs

@@ -4466,46 +4466,14 @@ var import_jsx_runtime42 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/ProductPrimaryImage.tsx
 var import_react26 = require("react");
-
-// src/components/Spinner.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
-var Spinner = ({ size = "small", testid }) => {
-  const dimension = size === "large" ? 48 : 24;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-    "svg",
-    {
-      "data-testid": testid,
-      width: dimension,
-      height: dimension,
-      viewBox: "0 0 24 24",
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "#1D1E1E",
-      className: "spinner",
-      "aria-label": "Loading",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
-      ]
-    }
-  );
-};
-Spinner.displayName = "Spinner";
-
-// src/components/ProductImagePreview/ProductPrimaryImage.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/ZoomWindow.tsx
 var import_react27 = require("react");
 
 // src/components/Surface.tsx
 var import_clsx30 = __toESM(require("clsx"), 1);
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var Surface = (_a) => {
   var _b = _a, {
     children,
@@ -4518,7 +4486,7 @@ var Surface = (_a) => {
     "elevation",
     "id"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     "div",
     __spreadProps(__spreadValues({
       id,
@@ -4539,30 +4507,30 @@ var Surface = (_a) => {
 Surface.displayName = "Surface";
 
 // src/components/ProductImagePreview/ZoomWindow.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/CarouselPagination.tsx
 var import_clsx31 = require("clsx");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/MobileImageCarousel.tsx
 var import_react28 = require("react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/useProductImagePreview.ts
 var import_react29 = require("react");
 
 // src/components/ProductImagePreview/index.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 
 // src/components/CompactImagesPreview.tsx
 var import_react30 = require("react");
 var import_clsx32 = __toESM(require("clsx"), 1);
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 
 // src/components/SimpleTable.tsx
 var import_clsx33 = __toESM(require("clsx"), 1);
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 
 // src/components/PDFViewer/index.tsx
 var import_react33 = require("react");
@@ -4571,6 +4539,36 @@ var import_react33 = require("react");
 var import_react_pdf2 = require("@mikecousins/react-pdf");
 var import_react32 = require("react");
 
+// src/components/Spinner.tsx
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var Spinner = ({ size = "small", testid }) => {
+  const dimension = size === "large" ? 48 : 24;
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+    "svg",
+    {
+      "data-testid": testid,
+      width: dimension,
+      height: dimension,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "#1D1E1E",
+      className: "spinner",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
+      ]
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
 // src/components/PDFViewer/PDFPage.tsx
 var import_react_pdf = require("@mikecousins/react-pdf");
 var import_react31 = require("react");

package/dist/components/DataGrid/TableBody/TableBodyRow.css

@@ -778,9 +778,6 @@
   .h-60 {
     height: calc(var(--spacing) * 60);
   }
-  .h-\[24px\] {
-    height: 24px;
-  }
   .h-\[166px\] {
     height: 166px;
   }
@@ -1870,10 +1867,6 @@
     --tw-gradient-position: to right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
-  .from-neutral-100 {
-    --tw-gradient-from: var(--color-neutral-100);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .from-neutral-300\/\[12\%\] {
     --tw-gradient-from: color-mix(in srgb, #c1c1c1 12%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1885,10 +1878,6 @@
     --tw-gradient-from: var(--color-white);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .to-\[\#f7f7f7\] {
-    --tw-gradient-to: #f7f7f7;
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .to-neutral-300\/\[24\%\] {
     --tw-gradient-to: color-mix(in srgb, #c1c1c1 24%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -4674,6 +4663,29 @@
   --color-background-action-critical-secondary-disabled: var( --color-neutral-200 );
   --color-background-brand-normal: var( --color-brand-400 );
 }
+.skeleton-paragraph {
+  position: relative;
+  overflow: hidden;
+  background-color: #f7f7f7;
+}
+.skeleton-paragraph::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background-image:
+    linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.6) 50%,
+      rgba(255, 255, 255, 0) 100%);
+  animation: skeleton-shimmer 1.4s ease-in-out infinite;
+}
+@keyframes skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
 @media (prefers-color-scheme: dark) {
   :root {
     --color-text-primary-normal: var(--color-neutral-000);

package/dist/components/DataGrid/TableBody/TableBodyRow.js

@@ -5,10 +5,10 @@ import "../../../chunk-7AXHAWJX.js";
 import "../../../chunk-P3MIP2FD.js";
 import "../../../chunk-M7INAUAJ.js";
 import "../../../chunk-3HBYDOYE.js";
-import "../../../chunk-IMOIZFJZ.js";
+import "../../../chunk-DNYGKNQM.js";
 import "../../../chunk-MBZ55T2D.js";
 import "../../../chunk-2IKT6IHB.js";
-import "../../../chunk-G5DEC7H3.js";
+import "../../../chunk-YCDDBSVU.js";
 import "../../../chunk-3X3Y4TMS.js";
 import "../../../chunk-BQNPOGD5.js";
 import "../../../chunk-LUPHOXAQ.js";
@@ -23,7 +23,7 @@ import "../../../chunk-VJVY6NPF.js";
 import "../../../chunk-EWGHVZL5.js";
 import "../../../chunk-DCLNAUC4.js";
 import "../../../chunk-PQWWVBSR.js";
-import "../../../chunk-ESCNCQGI.js";
+import "../../../chunk-ETAEB3TA.js";
 import "../../../chunk-AT4AWD6B.js";
 import "../../../chunk-J5V2JRIK.js";
 import "../../../chunk-TYAQWVIM.js";

package/dist/components/DataGrid/TableBody/index.cjs

@@ -4285,46 +4285,14 @@ var import_jsx_runtime40 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/ProductPrimaryImage.tsx
 var import_react26 = require("react");
-
-// src/components/Spinner.tsx
 var import_jsx_runtime41 = require("react/jsx-runtime");
-var Spinner = ({ size = "small", testid }) => {
-  const dimension = size === "large" ? 48 : 24;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-    "svg",
-    {
-      "data-testid": testid,
-      width: dimension,
-      height: dimension,
-      viewBox: "0 0 24 24",
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "#1D1E1E",
-      className: "spinner",
-      "aria-label": "Loading",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
-      ]
-    }
-  );
-};
-Spinner.displayName = "Spinner";
-
-// src/components/ProductImagePreview/ProductPrimaryImage.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/ZoomWindow.tsx
 var import_react27 = require("react");
 
 // src/components/Surface.tsx
 var import_clsx29 = __toESM(require("clsx"), 1);
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var Surface = (_a) => {
   var _b = _a, {
     children,
@@ -4337,7 +4305,7 @@ var Surface = (_a) => {
     "elevation",
     "id"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     "div",
     __spreadProps(__spreadValues({
       id,
@@ -4358,30 +4326,30 @@ var Surface = (_a) => {
 Surface.displayName = "Surface";
 
 // src/components/ProductImagePreview/ZoomWindow.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/CarouselPagination.tsx
 var import_clsx30 = require("clsx");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/MobileImageCarousel.tsx
 var import_react28 = require("react");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/useProductImagePreview.ts
 var import_react29 = require("react");
 
 // src/components/ProductImagePreview/index.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 
 // src/components/CompactImagesPreview.tsx
 var import_react30 = require("react");
 var import_clsx31 = __toESM(require("clsx"), 1);
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 
 // src/components/SimpleTable.tsx
 var import_clsx32 = __toESM(require("clsx"), 1);
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 
 // src/components/PDFViewer/index.tsx
 var import_react33 = require("react");
@@ -4390,6 +4358,36 @@ var import_react33 = require("react");
 var import_react_pdf2 = require("@mikecousins/react-pdf");
 var import_react32 = require("react");
 
+// src/components/Spinner.tsx
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var Spinner = ({ size = "small", testid }) => {
+  const dimension = size === "large" ? 48 : 24;
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+    "svg",
+    {
+      "data-testid": testid,
+      width: dimension,
+      height: dimension,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "#1D1E1E",
+      className: "spinner",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
+      ]
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
 // src/components/PDFViewer/PDFPage.tsx
 var import_react_pdf = require("@mikecousins/react-pdf");
 var import_react31 = require("react");

package/dist/components/DataGrid/TableBody/index.css

@@ -778,9 +778,6 @@
   .h-60 {
     height: calc(var(--spacing) * 60);
   }
-  .h-\[24px\] {
-    height: 24px;
-  }
   .h-\[166px\] {
     height: 166px;
   }
@@ -1870,10 +1867,6 @@
     --tw-gradient-position: to right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
-  .from-neutral-100 {
-    --tw-gradient-from: var(--color-neutral-100);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .from-neutral-300\/\[12\%\] {
     --tw-gradient-from: color-mix(in srgb, #c1c1c1 12%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1885,10 +1878,6 @@
     --tw-gradient-from: var(--color-white);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .to-\[\#f7f7f7\] {
-    --tw-gradient-to: #f7f7f7;
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .to-neutral-300\/\[24\%\] {
     --tw-gradient-to: color-mix(in srgb, #c1c1c1 24%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -4674,6 +4663,29 @@
   --color-background-action-critical-secondary-disabled: var( --color-neutral-200 );
   --color-background-brand-normal: var( --color-brand-400 );
 }
+.skeleton-paragraph {
+  position: relative;
+  overflow: hidden;
+  background-color: #f7f7f7;
+}
+.skeleton-paragraph::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background-image:
+    linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.6) 50%,
+      rgba(255, 255, 255, 0) 100%);
+  animation: skeleton-shimmer 1.4s ease-in-out infinite;
+}
+@keyframes skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
 @media (prefers-color-scheme: dark) {
   :root {
     --color-text-primary-normal: var(--color-neutral-000);

package/dist/components/DataGrid/TableBody/index.js

@@ -5,10 +5,10 @@ import "../../../chunk-7AXHAWJX.js";
 import "../../../chunk-P3MIP2FD.js";
 import "../../../chunk-M7INAUAJ.js";
 import "../../../chunk-3HBYDOYE.js";
-import "../../../chunk-IMOIZFJZ.js";
+import "../../../chunk-DNYGKNQM.js";
 import "../../../chunk-MBZ55T2D.js";
 import "../../../chunk-2IKT6IHB.js";
-import "../../../chunk-G5DEC7H3.js";
+import "../../../chunk-YCDDBSVU.js";
 import "../../../chunk-3X3Y4TMS.js";
 import "../../../chunk-BQNPOGD5.js";
 import "../../../chunk-LUPHOXAQ.js";
@@ -23,7 +23,7 @@ import "../../../chunk-VJVY6NPF.js";
 import "../../../chunk-EWGHVZL5.js";
 import "../../../chunk-DCLNAUC4.js";
 import "../../../chunk-PQWWVBSR.js";
-import "../../../chunk-ESCNCQGI.js";
+import "../../../chunk-ETAEB3TA.js";
 import "../../../chunk-AT4AWD6B.js";
 import "../../../chunk-J5V2JRIK.js";
 import "../../../chunk-TYAQWVIM.js";

package/dist/components/DataGrid/index.cjs

@@ -3436,46 +3436,14 @@ var import_jsx_runtime35 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/ProductPrimaryImage.tsx
 var import_react22 = require("react");
-
-// src/components/Spinner.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var Spinner = ({ size = "small", testid }) => {
-  const dimension = size === "large" ? 48 : 24;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-    "svg",
-    {
-      "data-testid": testid,
-      width: dimension,
-      height: dimension,
-      viewBox: "0 0 24 24",
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "#1D1E1E",
-      className: "spinner",
-      "aria-label": "Loading",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
-      ]
-    }
-  );
-};
-Spinner.displayName = "Spinner";
-
-// src/components/ProductImagePreview/ProductPrimaryImage.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/ZoomWindow.tsx
 var import_react23 = require("react");
 
 // src/components/Surface.tsx
 var import_clsx26 = __toESM(require("clsx"), 1);
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var Surface = (_a) => {
   var _b = _a, {
     children,
@@ -3488,7 +3456,7 @@ var Surface = (_a) => {
     "elevation",
     "id"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     __spreadProps(__spreadValues({
       id,
@@ -3509,30 +3477,30 @@ var Surface = (_a) => {
 Surface.displayName = "Surface";
 
 // src/components/ProductImagePreview/ZoomWindow.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/CarouselPagination.tsx
 var import_clsx27 = require("clsx");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/MobileImageCarousel.tsx
 var import_react24 = require("react");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 
 // src/components/ProductImagePreview/useProductImagePreview.ts
 var import_react25 = require("react");
 
 // src/components/ProductImagePreview/index.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 
 // src/components/CompactImagesPreview.tsx
 var import_react26 = require("react");
 var import_clsx28 = __toESM(require("clsx"), 1);
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 
 // src/components/SimpleTable.tsx
 var import_clsx29 = __toESM(require("clsx"), 1);
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 
 // src/components/PDFViewer/index.tsx
 var import_react29 = require("react");
@@ -3541,6 +3509,36 @@ var import_react29 = require("react");
 var import_react_pdf2 = require("@mikecousins/react-pdf");
 var import_react28 = require("react");
 
+// src/components/Spinner.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var Spinner = ({ size = "small", testid }) => {
+  const dimension = size === "large" ? 48 : 24;
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    "svg",
+    {
+      "data-testid": testid,
+      width: dimension,
+      height: dimension,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "#1D1E1E",
+      className: "spinner",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
+      ]
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
 // src/components/PDFViewer/PDFPage.tsx
 var import_react_pdf = require("@mikecousins/react-pdf");
 var import_react27 = require("react");

package/dist/components/DataGrid/index.css

@@ -778,9 +778,6 @@
   .h-60 {
     height: calc(var(--spacing) * 60);
   }
-  .h-\[24px\] {
-    height: 24px;
-  }
   .h-\[166px\] {
     height: 166px;
   }
@@ -1870,10 +1867,6 @@
     --tw-gradient-position: to right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
-  .from-neutral-100 {
-    --tw-gradient-from: var(--color-neutral-100);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .from-neutral-300\/\[12\%\] {
     --tw-gradient-from: color-mix(in srgb, #c1c1c1 12%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1885,10 +1878,6 @@
     --tw-gradient-from: var(--color-white);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .to-\[\#f7f7f7\] {
-    --tw-gradient-to: #f7f7f7;
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .to-neutral-300\/\[24\%\] {
     --tw-gradient-to: color-mix(in srgb, #c1c1c1 24%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -4674,6 +4663,29 @@
   --color-background-action-critical-secondary-disabled: var( --color-neutral-200 );
   --color-background-brand-normal: var( --color-brand-400 );
 }
+.skeleton-paragraph {
+  position: relative;
+  overflow: hidden;
+  background-color: #f7f7f7;
+}
+.skeleton-paragraph::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background-image:
+    linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.6) 50%,
+      rgba(255, 255, 255, 0) 100%);
+  animation: skeleton-shimmer 1.4s ease-in-out infinite;
+}
+@keyframes skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
 @media (prefers-color-scheme: dark) {
   :root {
     --color-text-primary-normal: var(--color-neutral-000);

package/dist/components/DataGrid/index.js

@@ -7,10 +7,10 @@ import "../../chunk-7AXHAWJX.js";
 import "../../chunk-P3MIP2FD.js";
 import "../../chunk-M7INAUAJ.js";
 import "../../chunk-3HBYDOYE.js";
-import "../../chunk-IMOIZFJZ.js";
+import "../../chunk-DNYGKNQM.js";
 import "../../chunk-MBZ55T2D.js";
 import "../../chunk-2IKT6IHB.js";
-import "../../chunk-G5DEC7H3.js";
+import "../../chunk-YCDDBSVU.js";
 import "../../chunk-3X3Y4TMS.js";
 import "../../chunk-BQNPOGD5.js";
 import "../../chunk-LUPHOXAQ.js";
@@ -25,7 +25,7 @@ import "../../chunk-VJVY6NPF.js";
 import "../../chunk-EWGHVZL5.js";
 import "../../chunk-DCLNAUC4.js";
 import "../../chunk-PQWWVBSR.js";
-import "../../chunk-ESCNCQGI.js";
+import "../../chunk-ETAEB3TA.js";
 import "../../chunk-AT4AWD6B.js";
 import "../../chunk-J5V2JRIK.js";
 import "../../chunk-TYAQWVIM.js";