@dmsi/wedgekit-react 0.0.495 → 0.0.496

package/dist/{chunk-ETAEB3TA.js → chunk-L3BXRDLP.js}

@@ -2,14 +2,20 @@
 import { jsx } from "react/jsx-runtime";
 function SkeletonParagraph({
   className = "",
-  heightClassName = "h-6"
+  heightClassName = "h-6",
+  size = "large"
 }) {
+  const sizeClassMap = {
+    small: "min-w-10 w-1/4",
+    medium: "min-w-20 w-1/2",
+    large: "min-w-32 w-full"
+  };
   return /* @__PURE__ */ jsx(
     "div",
     {
       "aria-label": "Loading content",
       role: "status",
-      className: `skeleton-paragraph ${heightClassName} w-full min-w-32 rounded-xs ${className}`
+      className: `skeleton-paragraph ${heightClassName} ${sizeClassMap[size]} rounded-xs ${className}`
     }
   );
 }

package/dist/components/CalendarRange.css

@@ -838,6 +838,12 @@
   .\!w-20 {
     width: calc(var(--spacing) * 20) !important;
   }
+  .w-1\/2 {
+    width: calc(1/2 * 100%);
+  }
+  .w-1\/4 {
+    width: calc(1/4 * 100%);
+  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
@@ -922,6 +928,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-10 {
+    min-width: calc(var(--spacing) * 10);
+  }
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
@@ -4678,6 +4687,7 @@
   position: relative;
   overflow: hidden;
   background-color: #f7f7f7;
+  opacity: 0.85;
 }
 .skeleton-paragraph::after {
   content: "";
@@ -4687,9 +4697,17 @@
   background-image:
     linear-gradient(
       90deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.6) 50%,
-      rgba(255, 255, 255, 0) 100%);
+      transparent 0%,
+      color-mix(in srgb, #ffffff 60%, transparent) 50%,
+      transparent 100%);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-image:
+      linear-gradient(
+        90deg,
+        transparent 0%,
+        color-mix(in srgb, var(--color-neutral-000) 60%, transparent) 50%,
+        transparent 100%);
+  }
   animation: skeleton-shimmer 1.4s ease-in-out infinite;
 }
 @keyframes skeleton-shimmer {

package/dist/components/CalendarRange.js

@@ -27,7 +27,7 @@ import "../chunk-AT4AWD6B.js";
 import "../chunk-EWGHVZL5.js";
 import "../chunk-7GHD74J3.js";
 import "../chunk-7BVUTFZ5.js";
-import "../chunk-ETAEB3TA.js";
+import "../chunk-L3BXRDLP.js";
 import "../chunk-GRGDX7JC.js";
 import "../chunk-HVNHTM3P.js";
 import "../chunk-X67L3NZI.js";

package/dist/components/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.css

@@ -838,6 +838,12 @@
   .\!w-20 {
     width: calc(var(--spacing) * 20) !important;
   }
+  .w-1\/2 {
+    width: calc(1/2 * 100%);
+  }
+  .w-1\/4 {
+    width: calc(1/4 * 100%);
+  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
@@ -922,6 +928,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-10 {
+    min-width: calc(var(--spacing) * 10);
+  }
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
@@ -4678,6 +4687,7 @@
   position: relative;
   overflow: hidden;
   background-color: #f7f7f7;
+  opacity: 0.85;
 }
 .skeleton-paragraph::after {
   content: "";
@@ -4687,9 +4697,17 @@
   background-image:
     linear-gradient(
       90deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.6) 50%,
-      rgba(255, 255, 255, 0) 100%);
+      transparent 0%,
+      color-mix(in srgb, #ffffff 60%, transparent) 50%,
+      transparent 100%);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-image:
+      linear-gradient(
+        90deg,
+        transparent 0%,
+        color-mix(in srgb, var(--color-neutral-000) 60%, transparent) 50%,
+        transparent 100%);
+  }
   animation: skeleton-shimmer 1.4s ease-in-out infinite;
 }
 @keyframes skeleton-shimmer {

package/dist/components/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.js

@@ -25,7 +25,7 @@ import "../../../chunk-AT4AWD6B.js";
 import "../../../chunk-EWGHVZL5.js";
 import "../../../chunk-7GHD74J3.js";
 import "../../../chunk-7BVUTFZ5.js";
-import "../../../chunk-ETAEB3TA.js";
+import "../../../chunk-L3BXRDLP.js";
 import "../../../chunk-GRGDX7JC.js";
 import "../../../chunk-HVNHTM3P.js";
 import "../../../chunk-X67L3NZI.js";

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

@@ -838,6 +838,12 @@
   .\!w-20 {
     width: calc(var(--spacing) * 20) !important;
   }
+  .w-1\/2 {
+    width: calc(1/2 * 100%);
+  }
+  .w-1\/4 {
+    width: calc(1/4 * 100%);
+  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
@@ -922,6 +928,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-10 {
+    min-width: calc(var(--spacing) * 10);
+  }
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
@@ -4678,6 +4687,7 @@
   position: relative;
   overflow: hidden;
   background-color: #f7f7f7;
+  opacity: 0.85;
 }
 .skeleton-paragraph::after {
   content: "";
@@ -4687,9 +4697,17 @@
   background-image:
     linear-gradient(
       90deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.6) 50%,
-      rgba(255, 255, 255, 0) 100%);
+      transparent 0%,
+      color-mix(in srgb, #ffffff 60%, transparent) 50%,
+      transparent 100%);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-image:
+      linear-gradient(
+        90deg,
+        transparent 0%,
+        color-mix(in srgb, var(--color-neutral-000) 60%, transparent) 50%,
+        transparent 100%);
+  }
   animation: skeleton-shimmer 1.4s ease-in-out infinite;
 }
 @keyframes skeleton-shimmer {

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

@@ -25,7 +25,7 @@ import "../../../chunk-AT4AWD6B.js";
 import "../../../chunk-EWGHVZL5.js";
 import "../../../chunk-7GHD74J3.js";
 import "../../../chunk-7BVUTFZ5.js";
-import "../../../chunk-ETAEB3TA.js";
+import "../../../chunk-L3BXRDLP.js";
 import "../../../chunk-GRGDX7JC.js";
 import "../../../chunk-HVNHTM3P.js";
 import "../../../chunk-X67L3NZI.js";

package/dist/components/DataGrid/PinnedColumns.css

@@ -838,6 +838,12 @@
   .\!w-20 {
     width: calc(var(--spacing) * 20) !important;
   }
+  .w-1\/2 {
+    width: calc(1/2 * 100%);
+  }
+  .w-1\/4 {
+    width: calc(1/4 * 100%);
+  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
@@ -922,6 +928,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-10 {
+    min-width: calc(var(--spacing) * 10);
+  }
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
@@ -4678,6 +4687,7 @@
   position: relative;
   overflow: hidden;
   background-color: #f7f7f7;
+  opacity: 0.85;
 }
 .skeleton-paragraph::after {
   content: "";
@@ -4687,9 +4697,17 @@
   background-image:
     linear-gradient(
       90deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.6) 50%,
-      rgba(255, 255, 255, 0) 100%);
+      transparent 0%,
+      color-mix(in srgb, #ffffff 60%, transparent) 50%,
+      transparent 100%);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-image:
+      linear-gradient(
+        90deg,
+        transparent 0%,
+        color-mix(in srgb, var(--color-neutral-000) 60%, transparent) 50%,
+        transparent 100%);
+  }
   animation: skeleton-shimmer 1.4s ease-in-out infinite;
 }
 @keyframes skeleton-shimmer {

package/dist/components/DataGrid/PinnedColumns.js

@@ -25,7 +25,7 @@ import "../../chunk-AT4AWD6B.js";
 import "../../chunk-EWGHVZL5.js";
 import "../../chunk-7GHD74J3.js";
 import "../../chunk-7BVUTFZ5.js";
-import "../../chunk-ETAEB3TA.js";
+import "../../chunk-L3BXRDLP.js";
 import "../../chunk-GRGDX7JC.js";
 import "../../chunk-HVNHTM3P.js";
 import "../../chunk-X67L3NZI.js";

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

@@ -838,6 +838,12 @@
   .\!w-20 {
     width: calc(var(--spacing) * 20) !important;
   }
+  .w-1\/2 {
+    width: calc(1/2 * 100%);
+  }
+  .w-1\/4 {
+    width: calc(1/4 * 100%);
+  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
@@ -922,6 +928,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-10 {
+    min-width: calc(var(--spacing) * 10);
+  }
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
@@ -4678,6 +4687,7 @@
   position: relative;
   overflow: hidden;
   background-color: #f7f7f7;
+  opacity: 0.85;
 }
 .skeleton-paragraph::after {
   content: "";
@@ -4687,9 +4697,17 @@
   background-image:
     linear-gradient(
       90deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.6) 50%,
-      rgba(255, 255, 255, 0) 100%);
+      transparent 0%,
+      color-mix(in srgb, #ffffff 60%, transparent) 50%,
+      transparent 100%);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-image:
+      linear-gradient(
+        90deg,
+        transparent 0%,
+        color-mix(in srgb, var(--color-neutral-000) 60%, transparent) 50%,
+        transparent 100%);
+  }
   animation: skeleton-shimmer 1.4s ease-in-out infinite;
 }
 @keyframes skeleton-shimmer {

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

@@ -25,7 +25,7 @@ import "../../../chunk-AT4AWD6B.js";
 import "../../../chunk-EWGHVZL5.js";
 import "../../../chunk-7GHD74J3.js";
 import "../../../chunk-7BVUTFZ5.js";
-import "../../../chunk-ETAEB3TA.js";
+import "../../../chunk-L3BXRDLP.js";
 import "../../../chunk-GRGDX7JC.js";
 import "../../../chunk-HVNHTM3P.js";
 import "../../../chunk-X67L3NZI.js";

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

@@ -838,6 +838,12 @@
   .\!w-20 {
     width: calc(var(--spacing) * 20) !important;
   }
+  .w-1\/2 {
+    width: calc(1/2 * 100%);
+  }
+  .w-1\/4 {
+    width: calc(1/4 * 100%);
+  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
@@ -922,6 +928,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-10 {
+    min-width: calc(var(--spacing) * 10);
+  }
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
@@ -4678,6 +4687,7 @@
   position: relative;
   overflow: hidden;
   background-color: #f7f7f7;
+  opacity: 0.85;
 }
 .skeleton-paragraph::after {
   content: "";
@@ -4687,9 +4697,17 @@
   background-image:
     linear-gradient(
       90deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.6) 50%,
-      rgba(255, 255, 255, 0) 100%);
+      transparent 0%,
+      color-mix(in srgb, #ffffff 60%, transparent) 50%,
+      transparent 100%);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-image:
+      linear-gradient(
+        90deg,
+        transparent 0%,
+        color-mix(in srgb, var(--color-neutral-000) 60%, transparent) 50%,
+        transparent 100%);
+  }
   animation: skeleton-shimmer 1.4s ease-in-out infinite;
 }
 @keyframes skeleton-shimmer {

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

@@ -25,7 +25,7 @@ import "../../../chunk-AT4AWD6B.js";
 import "../../../chunk-EWGHVZL5.js";
 import "../../../chunk-7GHD74J3.js";
 import "../../../chunk-7BVUTFZ5.js";
-import "../../../chunk-ETAEB3TA.js";
+import "../../../chunk-L3BXRDLP.js";
 import "../../../chunk-GRGDX7JC.js";
 import "../../../chunk-HVNHTM3P.js";
 import "../../../chunk-X67L3NZI.js";

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

@@ -838,6 +838,12 @@
   .\!w-20 {
     width: calc(var(--spacing) * 20) !important;
   }
+  .w-1\/2 {
+    width: calc(1/2 * 100%);
+  }
+  .w-1\/4 {
+    width: calc(1/4 * 100%);
+  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
@@ -922,6 +928,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-10 {
+    min-width: calc(var(--spacing) * 10);
+  }
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
@@ -4678,6 +4687,7 @@
   position: relative;
   overflow: hidden;
   background-color: #f7f7f7;
+  opacity: 0.85;
 }
 .skeleton-paragraph::after {
   content: "";
@@ -4687,9 +4697,17 @@
   background-image:
     linear-gradient(
       90deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.6) 50%,
-      rgba(255, 255, 255, 0) 100%);
+      transparent 0%,
+      color-mix(in srgb, #ffffff 60%, transparent) 50%,
+      transparent 100%);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-image:
+      linear-gradient(
+        90deg,
+        transparent 0%,
+        color-mix(in srgb, var(--color-neutral-000) 60%, transparent) 50%,
+        transparent 100%);
+  }
   animation: skeleton-shimmer 1.4s ease-in-out infinite;
 }
 @keyframes skeleton-shimmer {

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

@@ -25,7 +25,7 @@ import "../../../chunk-AT4AWD6B.js";
 import "../../../chunk-EWGHVZL5.js";
 import "../../../chunk-7GHD74J3.js";
 import "../../../chunk-7BVUTFZ5.js";
-import "../../../chunk-ETAEB3TA.js";
+import "../../../chunk-L3BXRDLP.js";
 import "../../../chunk-GRGDX7JC.js";
 import "../../../chunk-HVNHTM3P.js";
 import "../../../chunk-X67L3NZI.js";

package/dist/components/DataGrid/index.css

@@ -838,6 +838,12 @@
   .\!w-20 {
     width: calc(var(--spacing) * 20) !important;
   }
+  .w-1\/2 {
+    width: calc(1/2 * 100%);
+  }
+  .w-1\/4 {
+    width: calc(1/4 * 100%);
+  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
@@ -922,6 +928,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-10 {
+    min-width: calc(var(--spacing) * 10);
+  }
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
@@ -4678,6 +4687,7 @@
   position: relative;
   overflow: hidden;
   background-color: #f7f7f7;
+  opacity: 0.85;
 }
 .skeleton-paragraph::after {
   content: "";
@@ -4687,9 +4697,17 @@
   background-image:
     linear-gradient(
       90deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.6) 50%,
-      rgba(255, 255, 255, 0) 100%);
+      transparent 0%,
+      color-mix(in srgb, #ffffff 60%, transparent) 50%,
+      transparent 100%);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-image:
+      linear-gradient(
+        90deg,
+        transparent 0%,
+        color-mix(in srgb, var(--color-neutral-000) 60%, transparent) 50%,
+        transparent 100%);
+  }
   animation: skeleton-shimmer 1.4s ease-in-out infinite;
 }
 @keyframes skeleton-shimmer {

package/dist/components/DataGrid/index.js

@@ -27,7 +27,7 @@ import "../../chunk-AT4AWD6B.js";
 import "../../chunk-EWGHVZL5.js";
 import "../../chunk-7GHD74J3.js";
 import "../../chunk-7BVUTFZ5.js";
-import "../../chunk-ETAEB3TA.js";
+import "../../chunk-L3BXRDLP.js";
 import "../../chunk-GRGDX7JC.js";
 import "../../chunk-HVNHTM3P.js";
 import "../../chunk-X67L3NZI.js";

package/dist/components/DataGrid/utils.css

@@ -838,6 +838,12 @@
   .\!w-20 {
     width: calc(var(--spacing) * 20) !important;
   }
+  .w-1\/2 {
+    width: calc(1/2 * 100%);
+  }
+  .w-1\/4 {
+    width: calc(1/4 * 100%);
+  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
@@ -922,6 +928,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-10 {
+    min-width: calc(var(--spacing) * 10);
+  }
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
@@ -4678,6 +4687,7 @@
   position: relative;
   overflow: hidden;
   background-color: #f7f7f7;
+  opacity: 0.85;
 }
 .skeleton-paragraph::after {
   content: "";
@@ -4687,9 +4697,17 @@
   background-image:
     linear-gradient(
       90deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.6) 50%,
-      rgba(255, 255, 255, 0) 100%);
+      transparent 0%,
+      color-mix(in srgb, #ffffff 60%, transparent) 50%,
+      transparent 100%);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-image:
+      linear-gradient(
+        90deg,
+        transparent 0%,
+        color-mix(in srgb, var(--color-neutral-000) 60%, transparent) 50%,
+        transparent 100%);
+  }
   animation: skeleton-shimmer 1.4s ease-in-out infinite;
 }
 @keyframes skeleton-shimmer {

package/dist/components/DataGrid/utils.js

@@ -25,7 +25,7 @@ import "../../chunk-AT4AWD6B.js";
 import "../../chunk-EWGHVZL5.js";
 import "../../chunk-7GHD74J3.js";
 import "../../chunk-7BVUTFZ5.js";
-import "../../chunk-ETAEB3TA.js";
+import "../../chunk-L3BXRDLP.js";
 import "../../chunk-GRGDX7JC.js";
 import "../../chunk-HVNHTM3P.js";
 import "../../chunk-X67L3NZI.js";

package/dist/components/DateInput.css

@@ -838,6 +838,12 @@
   .\!w-20 {
     width: calc(var(--spacing) * 20) !important;
   }
+  .w-1\/2 {
+    width: calc(1/2 * 100%);
+  }
+  .w-1\/4 {
+    width: calc(1/4 * 100%);
+  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
@@ -922,6 +928,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-10 {
+    min-width: calc(var(--spacing) * 10);
+  }
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
@@ -4678,6 +4687,7 @@
   position: relative;
   overflow: hidden;
   background-color: #f7f7f7;
+  opacity: 0.85;
 }
 .skeleton-paragraph::after {
   content: "";
@@ -4687,9 +4697,17 @@
   background-image:
     linear-gradient(
       90deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.6) 50%,
-      rgba(255, 255, 255, 0) 100%);
+      transparent 0%,
+      color-mix(in srgb, #ffffff 60%, transparent) 50%,
+      transparent 100%);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-image:
+      linear-gradient(
+        90deg,
+        transparent 0%,
+        color-mix(in srgb, var(--color-neutral-000) 60%, transparent) 50%,
+        transparent 100%);
+  }
   animation: skeleton-shimmer 1.4s ease-in-out infinite;
 }
 @keyframes skeleton-shimmer {

package/dist/components/DateInput.js

@@ -25,7 +25,7 @@ import "../chunk-AT4AWD6B.js";
 import "../chunk-EWGHVZL5.js";
 import "../chunk-7GHD74J3.js";
 import "../chunk-7BVUTFZ5.js";
-import "../chunk-ETAEB3TA.js";
+import "../chunk-L3BXRDLP.js";
 import "../chunk-GRGDX7JC.js";
 import "../chunk-HVNHTM3P.js";
 import "../chunk-X67L3NZI.js";

package/dist/components/DateRangeInput.css

@@ -838,6 +838,12 @@
   .\!w-20 {
     width: calc(var(--spacing) * 20) !important;
   }
+  .w-1\/2 {
+    width: calc(1/2 * 100%);
+  }
+  .w-1\/4 {
+    width: calc(1/4 * 100%);
+  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
@@ -922,6 +928,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-10 {
+    min-width: calc(var(--spacing) * 10);
+  }
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
@@ -4678,6 +4687,7 @@
   position: relative;
   overflow: hidden;
   background-color: #f7f7f7;
+  opacity: 0.85;
 }
 .skeleton-paragraph::after {
   content: "";
@@ -4687,9 +4697,17 @@
   background-image:
     linear-gradient(
       90deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.6) 50%,
-      rgba(255, 255, 255, 0) 100%);
+      transparent 0%,
+      color-mix(in srgb, #ffffff 60%, transparent) 50%,
+      transparent 100%);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-image:
+      linear-gradient(
+        90deg,
+        transparent 0%,
+        color-mix(in srgb, var(--color-neutral-000) 60%, transparent) 50%,
+        transparent 100%);
+  }
   animation: skeleton-shimmer 1.4s ease-in-out infinite;
 }
 @keyframes skeleton-shimmer {

package/dist/components/DateRangeInput.js

@@ -25,7 +25,7 @@ import "../chunk-AT4AWD6B.js";
 import "../chunk-EWGHVZL5.js";
 import "../chunk-7GHD74J3.js";
 import "../chunk-7BVUTFZ5.js";
-import "../chunk-ETAEB3TA.js";
+import "../chunk-L3BXRDLP.js";
 import "../chunk-GRGDX7JC.js";
 import "../chunk-HVNHTM3P.js";
 import "../chunk-X67L3NZI.js";

package/dist/components/MobileDataGrid/ColumnSelector/index.css

@@ -838,6 +838,12 @@
   .\!w-20 {
     width: calc(var(--spacing) * 20) !important;
   }
+  .w-1\/2 {
+    width: calc(1/2 * 100%);
+  }
+  .w-1\/4 {
+    width: calc(1/4 * 100%);
+  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
@@ -922,6 +928,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-10 {
+    min-width: calc(var(--spacing) * 10);
+  }
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
@@ -4678,6 +4687,7 @@
   position: relative;
   overflow: hidden;
   background-color: #f7f7f7;
+  opacity: 0.85;
 }
 .skeleton-paragraph::after {
   content: "";
@@ -4687,9 +4697,17 @@
   background-image:
     linear-gradient(
       90deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.6) 50%,
-      rgba(255, 255, 255, 0) 100%);
+      transparent 0%,
+      color-mix(in srgb, #ffffff 60%, transparent) 50%,
+      transparent 100%);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-image:
+      linear-gradient(
+        90deg,
+        transparent 0%,
+        color-mix(in srgb, var(--color-neutral-000) 60%, transparent) 50%,
+        transparent 100%);
+  }
   animation: skeleton-shimmer 1.4s ease-in-out infinite;
 }
 @keyframes skeleton-shimmer {

package/dist/components/MobileDataGrid/ColumnSelector/index.js

@@ -25,7 +25,7 @@ import "../../../chunk-AT4AWD6B.js";
 import "../../../chunk-EWGHVZL5.js";
 import "../../../chunk-7GHD74J3.js";
 import "../../../chunk-7BVUTFZ5.js";
-import "../../../chunk-ETAEB3TA.js";
+import "../../../chunk-L3BXRDLP.js";
 import "../../../chunk-GRGDX7JC.js";
 import "../../../chunk-HVNHTM3P.js";
 import "../../../chunk-X67L3NZI.js";

package/dist/components/MobileDataGrid/MobileDataGridHeader.css

@@ -838,6 +838,12 @@
   .\!w-20 {
     width: calc(var(--spacing) * 20) !important;
   }
+  .w-1\/2 {
+    width: calc(1/2 * 100%);
+  }
+  .w-1\/4 {
+    width: calc(1/4 * 100%);
+  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
@@ -922,6 +928,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-10 {
+    min-width: calc(var(--spacing) * 10);
+  }
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
@@ -4678,6 +4687,7 @@
   position: relative;
   overflow: hidden;
   background-color: #f7f7f7;
+  opacity: 0.85;
 }
 .skeleton-paragraph::after {
   content: "";
@@ -4687,9 +4697,17 @@
   background-image:
     linear-gradient(
       90deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.6) 50%,
-      rgba(255, 255, 255, 0) 100%);
+      transparent 0%,
+      color-mix(in srgb, #ffffff 60%, transparent) 50%,
+      transparent 100%);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-image:
+      linear-gradient(
+        90deg,
+        transparent 0%,
+        color-mix(in srgb, var(--color-neutral-000) 60%, transparent) 50%,
+        transparent 100%);
+  }
   animation: skeleton-shimmer 1.4s ease-in-out infinite;
 }
 @keyframes skeleton-shimmer {

package/dist/components/MobileDataGrid/MobileDataGridHeader.js

@@ -25,7 +25,7 @@ import "../../chunk-AT4AWD6B.js";
 import "../../chunk-EWGHVZL5.js";
 import "../../chunk-7GHD74J3.js";
 import "../../chunk-7BVUTFZ5.js";
-import "../../chunk-ETAEB3TA.js";
+import "../../chunk-L3BXRDLP.js";
 import "../../chunk-GRGDX7JC.js";
 import "../../chunk-HVNHTM3P.js";
 import "../../chunk-X67L3NZI.js";

package/dist/components/MobileDataGrid/index.css

@@ -838,6 +838,12 @@
   .\!w-20 {
     width: calc(var(--spacing) * 20) !important;
   }
+  .w-1\/2 {
+    width: calc(1/2 * 100%);
+  }
+  .w-1\/4 {
+    width: calc(1/4 * 100%);
+  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
@@ -922,6 +928,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-10 {
+    min-width: calc(var(--spacing) * 10);
+  }
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
@@ -4678,6 +4687,7 @@
   position: relative;
   overflow: hidden;
   background-color: #f7f7f7;
+  opacity: 0.85;
 }
 .skeleton-paragraph::after {
   content: "";
@@ -4687,9 +4697,17 @@
   background-image:
     linear-gradient(
       90deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.6) 50%,
-      rgba(255, 255, 255, 0) 100%);
+      transparent 0%,
+      color-mix(in srgb, #ffffff 60%, transparent) 50%,
+      transparent 100%);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-image:
+      linear-gradient(
+        90deg,
+        transparent 0%,
+        color-mix(in srgb, var(--color-neutral-000) 60%, transparent) 50%,
+        transparent 100%);
+  }
   animation: skeleton-shimmer 1.4s ease-in-out infinite;
 }
 @keyframes skeleton-shimmer {

package/dist/components/MobileDataGrid/index.js

@@ -25,7 +25,7 @@ import "../../chunk-AT4AWD6B.js";
 import "../../chunk-EWGHVZL5.js";
 import "../../chunk-7GHD74J3.js";
 import "../../chunk-7BVUTFZ5.js";
-import "../../chunk-ETAEB3TA.js";
+import "../../chunk-L3BXRDLP.js";
 import "../../chunk-GRGDX7JC.js";
 import "../../chunk-HVNHTM3P.js";
 import "../../chunk-X67L3NZI.js";

package/dist/components/SkeletonParagraph.cjs

@@ -26,14 +26,20 @@ module.exports = __toCommonJS(SkeletonParagraph_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 function SkeletonParagraph({
   className = "",
-  heightClassName = "h-6"
+  heightClassName = "h-6",
+  size = "large"
 }) {
+  const sizeClassMap = {
+    small: "min-w-10 w-1/4",
+    medium: "min-w-20 w-1/2",
+    large: "min-w-32 w-full"
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       "aria-label": "Loading content",
       role: "status",
-      className: `skeleton-paragraph ${heightClassName} w-full min-w-32 rounded-xs ${className}`
+      className: `skeleton-paragraph ${heightClassName} ${sizeClassMap[size]} rounded-xs ${className}`
     }
   );
 }

package/dist/components/SkeletonParagraph.js

@@ -1,6 +1,6 @@
 import {
   SkeletonParagraph
-} from "../chunk-ETAEB3TA.js";
+} from "../chunk-L3BXRDLP.js";
 import "../chunk-ORMEWXMH.js";
 export {
   SkeletonParagraph

package/dist/components/index.cjs

@@ -8153,14 +8153,20 @@ Pagination.displayName = "Pagination";
 var import_jsx_runtime63 = require("react/jsx-runtime");
 function SkeletonParagraph({
   className = "",
-  heightClassName = "h-6"
+  heightClassName = "h-6",
+  size = "large"
 }) {
+  const sizeClassMap = {
+    small: "min-w-10 w-1/4",
+    medium: "min-w-20 w-1/2",
+    large: "min-w-32 w-full"
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     "div",
     {
       "aria-label": "Loading content",
       role: "status",
-      className: `skeleton-paragraph ${heightClassName} w-full min-w-32 rounded-xs ${className}`
+      className: `skeleton-paragraph ${heightClassName} ${sizeClassMap[size]} rounded-xs ${className}`
     }
   );
 }

package/dist/components/index.css

@@ -838,6 +838,12 @@
   .\!w-20 {
     width: calc(var(--spacing) * 20) !important;
   }
+  .w-1\/2 {
+    width: calc(1/2 * 100%);
+  }
+  .w-1\/4 {
+    width: calc(1/4 * 100%);
+  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
@@ -922,6 +928,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-10 {
+    min-width: calc(var(--spacing) * 10);
+  }
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
@@ -4678,6 +4687,7 @@
   position: relative;
   overflow: hidden;
   background-color: #f7f7f7;
+  opacity: 0.85;
 }
 .skeleton-paragraph::after {
   content: "";
@@ -4687,9 +4697,17 @@
   background-image:
     linear-gradient(
       90deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.6) 50%,
-      rgba(255, 255, 255, 0) 100%);
+      transparent 0%,
+      color-mix(in srgb, #ffffff 60%, transparent) 50%,
+      transparent 100%);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-image:
+      linear-gradient(
+        90deg,
+        transparent 0%,
+        color-mix(in srgb, var(--color-neutral-000) 60%, transparent) 50%,
+        transparent 100%);
+  }
   animation: skeleton-shimmer 1.4s ease-in-out infinite;
 }
 @keyframes skeleton-shimmer {

package/dist/components/index.js

@@ -39,7 +39,7 @@ import {
 } from "../chunk-7BVUTFZ5.js";
 import {
   SkeletonParagraph
-} from "../chunk-ETAEB3TA.js";
+} from "../chunk-L3BXRDLP.js";
 import {
   Pagination
 } from "../chunk-GRGDX7JC.js";

package/dist/index.css

@@ -816,6 +816,12 @@
   .\!w-20 {
     width: calc(var(--spacing) * 20) !important;
   }
+  .w-1\/2 {
+    width: calc(1/2 * 100%);
+  }
+  .w-1\/4 {
+    width: calc(1/4 * 100%);
+  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
@@ -900,6 +906,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-10 {
+    min-width: calc(var(--spacing) * 10);
+  }
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
@@ -4656,6 +4665,7 @@
   position: relative;
   overflow: hidden;
   background-color: #f7f7f7;
+  opacity: 0.85;
 }
 .skeleton-paragraph::after {
   content: "";
@@ -4665,9 +4675,17 @@
   background-image:
     linear-gradient(
       90deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.6) 50%,
-      rgba(255, 255, 255, 0) 100%);
+      transparent 0%,
+      color-mix(in srgb, #ffffff 60%, transparent) 50%,
+      transparent 100%);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-image:
+      linear-gradient(
+        90deg,
+        transparent 0%,
+        color-mix(in srgb, var(--color-neutral-000) 60%, transparent) 50%,
+        transparent 100%);
+  }
   animation: skeleton-shimmer 1.4s ease-in-out infinite;
 }
 @keyframes skeleton-shimmer {

package/package.json

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

package/src/components/SkeletonParagraph.tsx

@@ -3,6 +3,8 @@ interface SkeletonParagraphProps {
   className?: string;
   /** Height of the skeleton (tailwind height utility), defaults to h-6 */
   heightClassName?: string;
+  /** Size of the skeleton, affects widthClassName */
+  size?: "small" | "medium" | "large";
 }
 
 /**
@@ -12,12 +14,18 @@ interface SkeletonParagraphProps {
 export function SkeletonParagraph({
   className = "",
   heightClassName = "h-6",
+  size = "large",
 }: SkeletonParagraphProps) {
+  const sizeClassMap: Record<string, string> = {
+    small: "min-w-10 w-1/4",
+    medium: "min-w-20 w-1/2",
+    large: "min-w-32 w-full",
+  };
   return (
     <div
       aria-label="Loading content"
       role="status"
-      className={`skeleton-paragraph ${heightClassName} w-full min-w-32 rounded-xs ${className}`}
+      className={`skeleton-paragraph ${heightClassName} ${sizeClassMap[size]} rounded-xs ${className}`}
     />
   );
 }

package/src/index.css

@@ -639,6 +639,7 @@
   position: relative;
   overflow: hidden;
   background-color: theme("colors.neutral.100");
+  opacity: 0.85;
 }
 
 .skeleton-paragraph::after {
@@ -648,9 +649,9 @@
   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%
+    transparent 0%,
+    color-mix(in srgb, var(--color-neutral-000) 60%, transparent) 50%,
+    transparent 100%
   );
   animation: skeleton-shimmer 1.4s ease-in-out infinite;
 }