@dmsi/wedgekit-react 0.0.415 → 0.0.417

package/dist/components/DateRangeInput.css

@@ -690,6 +690,9 @@
   .ml-auto {
     margin-left: auto;
   }
+  .box-content {
+    box-sizing: content-box;
+  }
   .block {
     display: block;
   }
@@ -1002,6 +1005,9 @@
   .cursor-grab {
     cursor: grab;
   }
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -1080,6 +1086,9 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
@@ -1290,6 +1299,10 @@
     border-inline-style: var(--tw-border-style);
     border-inline-width: 0px;
   }
+  .border-x-1 {
+    border-inline-style: var(--tw-border-style);
+    border-inline-width: 1px;
+  }
   .border-y {
     border-block-style: var(--tw-border-style);
     border-block-width: 1px;
@@ -1306,6 +1319,10 @@
     border-right-style: var(--tw-border-style);
     border-right-width: 0px;
   }
+  .border-r-1 {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
   .border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
@@ -1314,6 +1331,10 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-l-1 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+  }
   .border-dashed {
     --tw-border-style: dashed;
     border-style: dashed;
@@ -1891,6 +1912,9 @@
   .\!p-0 {
     padding: calc(var(--spacing) * 0) !important;
   }
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
   .p-0\.5 {
     padding: calc(var(--spacing) * 0.5);
   }
@@ -2005,12 +2029,33 @@
   .pt-\[7px\] {
     padding-top: 7px;
   }
+  .pt-mobile-component-padding {
+    padding-top: var(--spacing-mobile-component-padding);
+  }
+  .pt-mobile-container-padding {
+    padding-top: var(--spacing-mobile-container-padding);
+  }
+  .pt-mobile-layout-padding {
+    padding-top: var(--spacing-mobile-layout-padding);
+  }
+  .pr-mobile-component-padding {
+    padding-right: var(--spacing-mobile-component-padding);
+  }
+  .pr-mobile-container-padding {
+    padding-right: var(--spacing-mobile-container-padding);
+  }
+  .pr-mobile-layout-padding {
+    padding-right: var(--spacing-mobile-layout-padding);
+  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
   .pb-mobile-component-padding {
     padding-bottom: var(--spacing-mobile-component-padding);
   }
+  .pb-mobile-container-padding {
+    padding-bottom: var(--spacing-mobile-container-padding);
+  }
   .pb-mobile-layout-padding {
     padding-bottom: var(--spacing-mobile-layout-padding);
   }
@@ -2032,6 +2077,12 @@
   .pl-mobile-component-padding {
     padding-left: var(--spacing-mobile-component-padding);
   }
+  .pl-mobile-container-padding {
+    padding-left: var(--spacing-mobile-container-padding);
+  }
+  .pl-mobile-layout-padding {
+    padding-left: var(--spacing-mobile-layout-padding);
+  }
   .text-center {
     text-align: center;
   }
@@ -2252,6 +2303,9 @@
   .text-text-action-normal {
     color: var(--color-text-action-normal);
   }
+  .text-text-action-primary-disabled {
+    color: var(--color-text-action-primary-disabled);
+  }
   .text-text-action-primary-normal {
     color: var(--color-text-action-primary-normal);
   }
@@ -2330,6 +2384,9 @@
   .opacity-40 {
     opacity: 40%;
   }
+  .opacity-50 {
+    opacity: 50%;
+  }
   .opacity-70 {
     opacity: 70%;
   }
@@ -3069,6 +3126,13 @@
       }
     }
   }
+  .hover\:bg-background-grouped-secondary-normal {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-background-grouped-secondary-normal);
+      }
+    }
+  }
   .hover\:\!text-brand-text-on-action-primary-hover {
     &:hover {
       @media (hover: hover) {
@@ -3215,6 +3279,11 @@
       background-color: var(--color-background-action-secondary-hover);
     }
   }
+  .focus\:bg-background-grouped-secondary-normal {
+    &:focus {
+      background-color: var(--color-background-grouped-secondary-normal);
+    }
+  }
   .focus\:text-text-action-critical-hover {
     &:focus {
       color: var(--color-text-action-critical-hover);
@@ -3425,6 +3494,11 @@
       pointer-events: none;
     }
   }
+  .disabled\:cursor-default {
+    &:disabled {
+      cursor: default;
+    }
+  }
   .disabled\:\!border-border-primary-normal {
     &:disabled {
       border-color: var(--color-border-primary-normal) !important;
@@ -3731,11 +3805,6 @@
       width: 100%;
     }
   }
-  .sm\:grid-cols-2 {
-    @media (width >= 320px) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
   .md\:block {
     @media (width >= 768px) {
       display: block;
@@ -3766,66 +3835,6 @@
       gap: calc(var(--spacing) * 2);
     }
   }
-  .lg\:grid-cols-4 {
-    @media (width >= 1024px) {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-  }
-  .xl\:grid-cols-4 {
-    @media (width >= 1280px) {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-  }
-  .xl\:grid-cols-5 {
-    @media (width >= 1280px) {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-  }
-  .xl\:grid-cols-6 {
-    @media (width >= 1280px) {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-  }
-  .xl\:grid-cols-8 {
-    @media (width >= 1280px) {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-  }
-  .\32xl\:grid-cols-6 {
-    @media (width >= 1536px) {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-  }
-  .\32xl\:grid-cols-7 {
-    @media (width >= 1536px) {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-  }
-  .\32xl\:grid-cols-8 {
-    @media (width >= 1536px) {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-  }
-  .\32xl\:grid-cols-9 {
-    @media (width >= 1536px) {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-  }
-  .\32xl\:grid-cols-10 {
-    @media (width >= 1536px) {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-  }
-  .\32xl\:grid-cols-11 {
-    @media (width >= 1536px) {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-  }
-  .\32xl\:grid-cols-12 {
-    @media (width >= 1536px) {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-  }
   .compact\:mt-desktop-compact-component-gap {
     &:where([data-compact]) {
       margin-top: var(--spacing-desktop-compact-component-gap);
@@ -3931,11 +3940,46 @@
       padding-block: var(--spacing-desktop-compact-layout-padding);
     }
   }
+  .compact\:pt-desktop-compact-component-padding {
+    &:where([data-compact]) {
+      padding-top: var(--spacing-desktop-compact-component-padding);
+    }
+  }
+  .compact\:pt-desktop-compact-container-padding {
+    &:where([data-compact]) {
+      padding-top: var(--spacing-desktop-compact-container-padding);
+    }
+  }
+  .compact\:pt-desktop-compact-layout-padding {
+    &:where([data-compact]) {
+      padding-top: var(--spacing-desktop-compact-layout-padding);
+    }
+  }
+  .compact\:pr-desktop-compact-component-padding {
+    &:where([data-compact]) {
+      padding-right: var(--spacing-desktop-compact-component-padding);
+    }
+  }
+  .compact\:pr-desktop-compact-container-padding {
+    &:where([data-compact]) {
+      padding-right: var(--spacing-desktop-compact-container-padding);
+    }
+  }
+  .compact\:pr-desktop-compact-layout-padding {
+    &:where([data-compact]) {
+      padding-right: var(--spacing-desktop-compact-layout-padding);
+    }
+  }
   .compact\:pb-desktop-compact-component-padding {
     &:where([data-compact]) {
       padding-bottom: var(--spacing-desktop-compact-component-padding);
     }
   }
+  .compact\:pb-desktop-compact-container-padding {
+    &:where([data-compact]) {
+      padding-bottom: var(--spacing-desktop-compact-container-padding);
+    }
+  }
   .compact\:pb-desktop-compact-layout-padding {
     &:where([data-compact]) {
       padding-bottom: var(--spacing-desktop-compact-layout-padding);
@@ -3946,6 +3990,16 @@
       padding-left: var(--spacing-desktop-compact-component-padding);
     }
   }
+  .compact\:pl-desktop-compact-container-padding {
+    &:where([data-compact]) {
+      padding-left: var(--spacing-desktop-compact-container-padding);
+    }
+  }
+  .compact\:pl-desktop-compact-layout-padding {
+    &:where([data-compact]) {
+      padding-left: var(--spacing-desktop-compact-layout-padding);
+    }
+  }
   .compact\:text-caption-desktop-compact {
     &:where([data-compact]) {
       font-size: var(--text-caption-desktop-compact);
@@ -4117,6 +4171,11 @@
       flex-grow: 0;
     }
   }
+  .desktop\:grid-cols-4 {
+    @container root (width >= 48rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
   .desktop\:flex-col {
     @container root (width >= 48rem) {
       flex-direction: column;
@@ -4252,16 +4311,51 @@
       padding-block: var(--spacing-desktop-layout-padding);
     }
   }
+  .desktop\:pt-desktop-component-padding {
+    @container root (width >= 48rem) {
+      padding-top: var(--spacing-desktop-component-padding);
+    }
+  }
+  .desktop\:pt-desktop-container-padding {
+    @container root (width >= 48rem) {
+      padding-top: var(--spacing-desktop-container-padding);
+    }
+  }
   .desktop\:pt-desktop-layout-gap {
     @container root (width >= 48rem) {
       padding-top: var(--spacing-desktop-layout-gap);
     }
   }
+  .desktop\:pt-desktop-layout-padding {
+    @container root (width >= 48rem) {
+      padding-top: var(--spacing-desktop-layout-padding);
+    }
+  }
+  .desktop\:pr-desktop-component-padding {
+    @container root (width >= 48rem) {
+      padding-right: var(--spacing-desktop-component-padding);
+    }
+  }
+  .desktop\:pr-desktop-container-padding {
+    @container root (width >= 48rem) {
+      padding-right: var(--spacing-desktop-container-padding);
+    }
+  }
+  .desktop\:pr-desktop-layout-padding {
+    @container root (width >= 48rem) {
+      padding-right: var(--spacing-desktop-layout-padding);
+    }
+  }
   .desktop\:pb-desktop-component-padding {
     @container root (width >= 48rem) {
       padding-bottom: var(--spacing-desktop-component-padding);
     }
   }
+  .desktop\:pb-desktop-container-padding {
+    @container root (width >= 48rem) {
+      padding-bottom: var(--spacing-desktop-container-padding);
+    }
+  }
   .desktop\:pb-desktop-layout-padding {
     @container root (width >= 48rem) {
       padding-bottom: var(--spacing-desktop-layout-padding);
@@ -4272,6 +4366,16 @@
       padding-left: var(--spacing-desktop-component-padding);
     }
   }
+  .desktop\:pl-desktop-container-padding {
+    @container root (width >= 48rem) {
+      padding-left: var(--spacing-desktop-container-padding);
+    }
+  }
+  .desktop\:pl-desktop-layout-padding {
+    @container root (width >= 48rem) {
+      padding-left: var(--spacing-desktop-layout-padding);
+    }
+  }
   .desktop\:text-caption-desktop {
     @container root (width >= 48rem) {
       font-size: var(--text-caption-desktop);

package/dist/components/DateRangeInput.js

@@ -1,38 +1,45 @@
 import {
   CalendarRange
 } from "../chunk-UOHCOOC2.js";
-import "../chunk-BK7SPR6Y.js";
-import "../chunk-6I5LZ2ZC.js";
+import "../chunk-HYJIDHAK.js";
 import "../chunk-M7INAUAJ.js";
-import "../chunk-44TDIHUP.js";
-import "../chunk-ZHZIIVJN.js";
+import "../chunk-7AXHAWJX.js";
+import "../chunk-P3MIP2FD.js";
+import "../chunk-3HBYDOYE.js";
+import "../chunk-IMOIZFJZ.js";
+import "../chunk-MBZ55T2D.js";
 import "../chunk-2IKT6IHB.js";
 import "../chunk-G5DEC7H3.js";
 import "../chunk-3X3Y4TMS.js";
 import "../chunk-BQNPOGD5.js";
-import "../chunk-MBZ55T2D.js";
-import "../chunk-AA6GE3TH.js";
-import "../chunk-KZZKQLKF.js";
+import "../chunk-LUPHOXAQ.js";
+import "../chunk-W55J2KJZ.js";
 import "../chunk-5IFPG6TS.js";
 import "../chunk-AJ5M6MVX.js";
 import "../chunk-M6TSTDNZ.js";
+import "../chunk-EJSPFQCY.js";
+import "../chunk-RQLWSLVE.js";
+import "../chunk-6LHBY2IH.js";
+import "../chunk-VJVY6NPF.js";
 import "../chunk-EWGHVZL5.js";
-import "../chunk-QQ5G773N.js";
+import "../chunk-DCLNAUC4.js";
+import "../chunk-PQWWVBSR.js";
 import "../chunk-AT4AWD6B.js";
 import "../chunk-J5V2JRIK.js";
-import "../chunk-7ULLUUVJ.js";
-import "../chunk-D6YCMQPO.js";
+import "../chunk-TYAQWVIM.js";
+import "../chunk-SBCFBHNG.js";
 import "../chunk-4RJKB7LC.js";
+import "../chunk-AG43RS4Q.js";
 import "../chunk-XM7IQHBU.js";
 import "../chunk-FRHPFACM.js";
 import "../chunk-T36HX6QY.js";
-import "../chunk-AG43RS4Q.js";
+import "../chunk-NRNWEQD7.js";
 import "../chunk-SBRRNFOP.js";
-import "../chunk-ER6RCOH3.js";
+import "../chunk-Y2GK27RX.js";
 import "../chunk-EU73QPW7.js";
 import "../chunk-QVWYTQKL.js";
 import "../chunk-NO5BIKWS.js";
-import "../chunk-MQX7GFLX.js";
+import "../chunk-CAQWLY5V.js";
 import "../chunk-V47RTW7E.js";
 import "../chunk-22VBZWJG.js";
 import "../chunk-NVOZAVEX.js";
@@ -57,9 +64,9 @@ import {
 } from "../chunk-TYTD4FLW.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-FA7IFW66.js";
-import "../chunk-JIMJIJOF.js";
-import "../chunk-EZCH4PQS.js";
-import "../chunk-GB4ZTUQV.js";
+import "../chunk-5TGP5EFM.js";
+import "../chunk-KBJZUVLM.js";
+import "../chunk-DTW7JCBR.js";
 import "../chunk-OGIFIPKH.js";
 import {
   Icon

package/dist/components/Grid.cjs

@@ -1,10 +1,39 @@
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -33,96 +62,72 @@ __export(Grid_exports, {
   Grid: () => Grid
 });
 module.exports = __toCommonJS(Grid_exports);
-var import_react = require("react");
 var import_clsx = __toESM(require("clsx"), 1);
 var import_jsx_runtime = 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 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 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 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 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";
+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}`);
+    });
   }
-  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";
+  return classes.join(" ");
 };
-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];
-  }
-  return getChildCountBasedClasses(childCount, hasSideMenu != null ? hasSideMenu : false);
-};
-var Grid = ({
-  children,
-  sizing = "container",
-  padding,
-  hasSideMenu = false,
-  columns,
-  id,
-  testid,
-  style
-}) => {
-  const childCount = import_react.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_runtime.jsx)(
     "div",
-    {
+    __spreadProps(__spreadValues({
       id,
       "data-testid": testid,
+      style
+    }, rest), {
       className: (0, import_clsx.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
-    }
+    })
   );
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/Grid.js

@@ -1,6 +1,6 @@
 import {
   Grid
-} from "../chunk-ER6RCOH3.js";
+} from "../chunk-Y2GK27RX.js";
 import "../chunk-ORMEWXMH.js";
 export {
   Grid