@dmsi/wedgekit-react 0.0.15 → 0.0.16

package/dist/components/CalendarRange.cjs

@@ -134,6 +134,9 @@ var componentGap = (0, import_clsx.default)(
 var paddingUsingComponentGap = (0, import_clsx.default)(
   "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
 );
+var paddingXUsingLayoutGroupGap = (0, import_clsx.default)(
+  "px-mobile-layout-group-gap desktop:px-desktop-layout-group-gap compact:px-desktop-compact-layout-group-gap"
+);
 var paddingYUsingLayoutGroupGap = (0, import_clsx.default)(
   "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
 );
@@ -143,6 +146,9 @@ var componentPadding = (0, import_clsx.default)(
 var componentPaddingBottom = (0, import_clsx.default)(
   "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
 );
+var componentPaddingX = (0, import_clsx.default)(
+  "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding"
+);
 var componentPaddingY = (0, import_clsx.default)(
   "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
 );
@@ -158,6 +164,9 @@ var componentPaddingMinusBorder = (0, import_clsx.default)(
 var componentPaddingMinus2pxBorder = (0, import_clsx.default)(
   "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]"
 );
+var layoutPaddding = (0, import_clsx.default)(
+  "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding"
+);
 var layoutPaddingBottom = (0, import_clsx.default)(
   "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
 );
@@ -371,8 +380,8 @@ function CalendarRange({
     {
       className: (0, import_clsx3.default)(
         "relative bg-background-grouped-primary-normal rounded-base w-fit",
-        componentPadding,
-        componentGap,
+        layoutPaddding,
+        layoutGap,
         cardStyle && "shadow-4",
         // baseTransition,
         "overflow-hidden"
@@ -382,8 +391,7 @@ function CalendarRange({
         {
           className: (0, import_clsx3.default)(
             "flex flex-row items-start justify-start bg-background-primary-normal overflow-clip",
-            componentGap,
-            paddingUsingComponentGap
+            layoutGap
           ),
           children: (mode === "double" ? [0, 1] : [0]).map((offset, idx) => {
             const month = getMonthData(offset);
@@ -394,9 +402,7 @@ function CalendarRange({
                 "div",
                 {
                   className: (0, import_clsx3.default)(
-                    "flex flex-col",
-                    componentGap,
-                    componentPadding
+                    "flex flex-col"
                   ),
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -404,10 +410,6 @@ function CalendarRange({
                       {
                         className: (0, import_clsx3.default)(
                           "flex flex-row items-center justify-between",
-                          componentGap,
-                          componentPaddingXUsingComponentGap,
-                          componentPaddingYUsingComponentGap,
-                          "mb-3",
                           typography.label,
                           "text-text-action-primary-normal"
                         ),
@@ -417,9 +419,8 @@ function CalendarRange({
                             {
                               type: "button",
                               className: (0, import_clsx3.default)(
-                                "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-primary-normal",
-                                componentPadding,
-                                "mr-1"
+                                "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
+                                componentPadding
                               ),
                               "aria-label": "Previous month",
                               onClick: () => setBaseMonth(baseMonth.subtract({ months: 1 })),
@@ -435,9 +436,8 @@ function CalendarRange({
                             {
                               type: "button",
                               className: (0, import_clsx3.default)(
-                                "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-primary-normal",
-                                componentPadding,
-                                "ml-1"
+                                "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
+                                componentPadding
                               ),
                               "aria-label": "Next month",
                               onClick: () => setBaseMonth(baseMonth.add({ months: 1 })),
@@ -447,12 +447,13 @@ function CalendarRange({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_clsx3.default)("grid grid-cols-7 mb-1", componentGap), children: weekDays.map((d) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_clsx3.default)("grid grid-cols-7"), children: weekDays.map((d) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       "span",
                       {
                         className: (0, import_clsx3.default)(
                           typography.caption,
-                          "text-text-secondary-normal text-center"
+                          "text-text-secondary-normal text-center",
+                          "w-10"
                         ),
                         children: d
                       },
@@ -487,7 +488,7 @@ function CalendarRange({
                           isRangeStart: !!isRangeStart,
                           isRangeEnd: !!isRangeEnd,
                           isRangeDisabled: mode === "single" && disableRange,
-                          cellPadding: "p-1.5 md:p-2 lg:p-2.5"
+                          cellPadding: componentPadding
                         },
                         i
                       );
@@ -499,7 +500,7 @@ function CalendarRange({
                 "div",
                 {
                   className: (0, import_clsx3.default)(
-                    "self-stretch bg-border-primary-normal rounded-base mx-mobile-component-padding desktop:mx-desktop-component-padding compact:mx-desktop-compact-component-padding",
+                    "self-stretch bg-border-primary-normal rounded-base",
                     // 1px width, full height, matches Figma divider
                     "w-px"
                   )

package/dist/components/CalendarRange.js

@@ -2,9 +2,9 @@ import {
   CalendarRange,
   CalendarRange_default,
   isWeekend
-} from "../chunk-FY7PTP6E.js";
+} from "../chunk-OUTEIXV4.js";
 import "../chunk-IGQVA7SC.js";
-import "../chunk-KX3O6GJ6.js";
+import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {
   CalendarRange,

package/dist/components/Caption.cjs

@@ -132,6 +132,9 @@ var componentGap = (0, import_clsx.default)(
 var paddingUsingComponentGap = (0, import_clsx.default)(
   "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
 );
+var paddingXUsingLayoutGroupGap = (0, import_clsx.default)(
+  "px-mobile-layout-group-gap desktop:px-desktop-layout-group-gap compact:px-desktop-compact-layout-group-gap"
+);
 var paddingYUsingLayoutGroupGap = (0, import_clsx.default)(
   "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
 );
@@ -141,6 +144,9 @@ var componentPadding = (0, import_clsx.default)(
 var componentPaddingBottom = (0, import_clsx.default)(
   "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
 );
+var componentPaddingX = (0, import_clsx.default)(
+  "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding"
+);
 var componentPaddingY = (0, import_clsx.default)(
   "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
 );
@@ -156,6 +162,9 @@ var componentPaddingMinusBorder = (0, import_clsx.default)(
 var componentPaddingMinus2pxBorder = (0, import_clsx.default)(
   "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]"
 );
+var layoutPaddding = (0, import_clsx.default)(
+  "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding"
+);
 var layoutPaddingBottom = (0, import_clsx.default)(
   "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
 );

package/dist/components/Caption.js

@@ -3,7 +3,7 @@ import {
 } from "../chunk-IGQVA7SC.js";
 import {
   typography
-} from "../chunk-KX3O6GJ6.js";
+} from "../chunk-RDLEIAQU.js";
 import {
   __objRest,
   __spreadProps,

package/dist/components/Checkbox.cjs

@@ -133,6 +133,9 @@ var componentGap = (0, import_clsx.default)(
 var paddingUsingComponentGap = (0, import_clsx.default)(
   "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
 );
+var paddingXUsingLayoutGroupGap = (0, import_clsx.default)(
+  "px-mobile-layout-group-gap desktop:px-desktop-layout-group-gap compact:px-desktop-compact-layout-group-gap"
+);
 var paddingYUsingLayoutGroupGap = (0, import_clsx.default)(
   "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
 );
@@ -142,6 +145,9 @@ var componentPadding = (0, import_clsx.default)(
 var componentPaddingBottom = (0, import_clsx.default)(
   "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
 );
+var componentPaddingX = (0, import_clsx.default)(
+  "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding"
+);
 var componentPaddingY = (0, import_clsx.default)(
   "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
 );
@@ -157,6 +163,9 @@ var componentPaddingMinusBorder = (0, import_clsx.default)(
 var componentPaddingMinus2pxBorder = (0, import_clsx.default)(
   "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]"
 );
+var layoutPaddding = (0, import_clsx.default)(
+  "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding"
+);
 var layoutPaddingBottom = (0, import_clsx.default)(
   "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
 );

package/dist/components/Checkbox.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   Checkbox
-} from "../chunk-DKKYR6DS.js";
-import "../chunk-K3IKUSZW.js";
+} from "../chunk-N32PXOA5.js";
+import "../chunk-UIQ733QP.js";
 import "../chunk-IGQVA7SC.js";
-import "../chunk-KX3O6GJ6.js";
+import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {
   Checkbox

package/dist/components/ContentTab.cjs

@@ -137,6 +137,9 @@ var componentGap = (0, import_clsx.default)(
 var paddingUsingComponentGap = (0, import_clsx.default)(
   "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
 );
+var paddingXUsingLayoutGroupGap = (0, import_clsx.default)(
+  "px-mobile-layout-group-gap desktop:px-desktop-layout-group-gap compact:px-desktop-compact-layout-group-gap"
+);
 var paddingYUsingLayoutGroupGap = (0, import_clsx.default)(
   "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
 );
@@ -146,6 +149,9 @@ var componentPadding = (0, import_clsx.default)(
 var componentPaddingBottom = (0, import_clsx.default)(
   "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
 );
+var componentPaddingX = (0, import_clsx.default)(
+  "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding"
+);
 var componentPaddingY = (0, import_clsx.default)(
   "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
 );
@@ -161,6 +167,9 @@ var componentPaddingMinusBorder = (0, import_clsx.default)(
 var componentPaddingMinus2pxBorder = (0, import_clsx.default)(
   "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]"
 );
+var layoutPaddding = (0, import_clsx.default)(
+  "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding"
+);
 var layoutPaddingBottom = (0, import_clsx.default)(
   "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
 );

package/dist/components/ContentTab.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   ContentTab
-} from "../chunk-UU3FA6LV.js";
-import "../chunk-KENSVWOY.js";
-import "../chunk-KX3O6GJ6.js";
+} from "../chunk-5TLFMKSR.js";
+import "../chunk-T6HZARR7.js";
+import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {
   ContentTab

package/dist/components/ContentTabs.cjs

@@ -141,6 +141,9 @@ var componentGap = (0, import_clsx.default)(
 var paddingUsingComponentGap = (0, import_clsx.default)(
   "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
 );
+var paddingXUsingLayoutGroupGap = (0, import_clsx.default)(
+  "px-mobile-layout-group-gap desktop:px-desktop-layout-group-gap compact:px-desktop-compact-layout-group-gap"
+);
 var paddingYUsingLayoutGroupGap = (0, import_clsx.default)(
   "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
 );
@@ -150,6 +153,9 @@ var componentPadding = (0, import_clsx.default)(
 var componentPaddingBottom = (0, import_clsx.default)(
   "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
 );
+var componentPaddingX = (0, import_clsx.default)(
+  "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding"
+);
 var componentPaddingY = (0, import_clsx.default)(
   "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
 );
@@ -165,6 +171,9 @@ var componentPaddingMinusBorder = (0, import_clsx.default)(
 var componentPaddingMinus2pxBorder = (0, import_clsx.default)(
   "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]"
 );
+var layoutPaddding = (0, import_clsx.default)(
+  "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding"
+);
 var layoutPaddingBottom = (0, import_clsx.default)(
   "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
 );

package/dist/components/ContentTabs.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   ContentTab
-} from "../chunk-UU3FA6LV.js";
-import "../chunk-KENSVWOY.js";
-import "../chunk-KX3O6GJ6.js";
+} from "../chunk-5TLFMKSR.js";
+import "../chunk-T6HZARR7.js";
+import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 
 // src/components/ContentTabs.tsx

package/dist/components/DataGrid.cjs

@@ -141,6 +141,9 @@ var componentGap = (0, import_clsx.default)(
 var paddingUsingComponentGap = (0, import_clsx.default)(
   "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
 );
+var paddingXUsingLayoutGroupGap = (0, import_clsx.default)(
+  "px-mobile-layout-group-gap desktop:px-desktop-layout-group-gap compact:px-desktop-compact-layout-group-gap"
+);
 var paddingYUsingLayoutGroupGap = (0, import_clsx.default)(
   "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
 );
@@ -150,6 +153,9 @@ var componentPadding = (0, import_clsx.default)(
 var componentPaddingBottom = (0, import_clsx.default)(
   "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
 );
+var componentPaddingX = (0, import_clsx.default)(
+  "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding"
+);
 var componentPaddingY = (0, import_clsx.default)(
   "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
 );
@@ -165,6 +171,9 @@ var componentPaddingMinusBorder = (0, import_clsx.default)(
 var componentPaddingMinus2pxBorder = (0, import_clsx.default)(
   "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]"
 );
+var layoutPaddding = (0, import_clsx.default)(
+  "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding"
+);
 var layoutPaddingBottom = (0, import_clsx.default)(
   "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
 );
@@ -1942,7 +1951,7 @@ var DataGridCell = (0, import_react8.memo)(
       component === "input" && !error && !warning && "border-border-primary-normal",
       component === "input" && error && "border-border-primary-error",
       component === "input" && warning && "border-background-warning-normal",
-      !["button", "icon"].includes(component) && !noPadding && "p-2",
+      !["button", "icon"].includes(component) && !noPadding && componentPadding,
       paddedLeft && "pl-2",
       component === "icon" && "border-l",
       isGrabbing && "!cursor-grabbing",
@@ -2382,7 +2391,8 @@ var Tooltip = ({
               },
               className: (0, import_clsx13.default)(
                 typography.caption,
-                "p-2 bg-neutral-500 text-neutral-100 rounded whitespace-nowrap shadow-2 pointer-events-none transition-opacity duration-100 ease-in-out",
+                "bg-neutral-500 text-neutral-100 rounded whitespace-nowrap shadow-2 pointer-events-none transition-opacity duration-100 ease-in-out",
+                componentPadding,
                 !removeOpacity && "opacity-0"
               ),
               children: message

package/dist/components/DataGrid.js

@@ -1,56 +1,56 @@
 "use client";
 import {
   Tooltip
-} from "../chunk-2G2E2JMA.js";
+} from "../chunk-YZQNTOIF.js";
 import {
   useInfiniteScroll
 } from "../chunk-AWQSSKCK.js";
 import {
   Subheader
-} from "../chunk-5GOBP2JS.js";
+} from "../chunk-ZCBSLV7U.js";
 import {
   Select
-} from "../chunk-TRUPPHBQ.js";
+} from "../chunk-KDEPZ6I7.js";
 import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-TAW5ZZ4Z.js";
+} from "../chunk-GCPJH5R6.js";
 import {
   Menu
 } from "../chunk-L4UM372R.js";
 import "../chunk-Z4UCFUF7.js";
 import {
   MenuOption
-} from "../chunk-E5ALT5W7.js";
+} from "../chunk-YDREJNAS.js";
 import "../chunk-SEKKGFM6.js";
 import {
   Search
-} from "../chunk-GTCSRHPF.js";
+} from "../chunk-TWP6YSFO.js";
 import "../chunk-WVUIIBRR.js";
 import "../chunk-4T7F5BZZ.js";
 import {
   Input
-} from "../chunk-BWRHL2AG.js";
+} from "../chunk-OISE6NMA.js";
 import {
   Label
-} from "../chunk-4C66DLIJ.js";
+} from "../chunk-S7R37IUP.js";
 import {
   Button
-} from "../chunk-KENSVWOY.js";
+} from "../chunk-T6HZARR7.js";
 import {
   Checkbox
-} from "../chunk-DKKYR6DS.js";
+} from "../chunk-N32PXOA5.js";
 import {
   Paragraph
-} from "../chunk-K3IKUSZW.js";
+} from "../chunk-UIQ733QP.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";
 import {
   componentGap,
   componentPadding
-} from "../chunk-KX3O6GJ6.js";
+} from "../chunk-RDLEIAQU.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/components/DataGridCell.cjs

@@ -187,6 +187,9 @@ var componentGap = (0, import_clsx.default)(
 var paddingUsingComponentGap = (0, import_clsx.default)(
   "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
 );
+var paddingXUsingLayoutGroupGap = (0, import_clsx.default)(
+  "px-mobile-layout-group-gap desktop:px-desktop-layout-group-gap compact:px-desktop-compact-layout-group-gap"
+);
 var paddingYUsingLayoutGroupGap = (0, import_clsx.default)(
   "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
 );
@@ -196,6 +199,9 @@ var componentPadding = (0, import_clsx.default)(
 var componentPaddingBottom = (0, import_clsx.default)(
   "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
 );
+var componentPaddingX = (0, import_clsx.default)(
+  "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding"
+);
 var componentPaddingY = (0, import_clsx.default)(
   "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
 );
@@ -211,6 +217,9 @@ var componentPaddingMinusBorder = (0, import_clsx.default)(
 var componentPaddingMinus2pxBorder = (0, import_clsx.default)(
   "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]"
 );
+var layoutPaddding = (0, import_clsx.default)(
+  "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding"
+);
 var layoutPaddingBottom = (0, import_clsx.default)(
   "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
 );
@@ -1686,7 +1695,7 @@ var DataGridCell = (0, import_react8.memo)(
       component === "input" && !error && !warning && "border-border-primary-normal",
       component === "input" && error && "border-border-primary-error",
       component === "input" && warning && "border-background-warning-normal",
-      !["button", "icon"].includes(component) && !noPadding && "p-2",
+      !["button", "icon"].includes(component) && !noPadding && componentPadding,
       paddedLeft && "pl-2",
       component === "icon" && "border-l",
       isGrabbing && "!cursor-grabbing",

package/dist/components/DataGridCell.js

@@ -3,19 +3,19 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-TAW5ZZ4Z.js";
+} from "../chunk-GCPJH5R6.js";
 import "../chunk-L4UM372R.js";
 import "../chunk-Z4UCFUF7.js";
-import "../chunk-E5ALT5W7.js";
+import "../chunk-YDREJNAS.js";
 import "../chunk-SEKKGFM6.js";
-import "../chunk-GTCSRHPF.js";
+import "../chunk-TWP6YSFO.js";
 import "../chunk-WVUIIBRR.js";
 import "../chunk-4T7F5BZZ.js";
-import "../chunk-BWRHL2AG.js";
-import "../chunk-4C66DLIJ.js";
-import "../chunk-K3IKUSZW.js";
+import "../chunk-OISE6NMA.js";
+import "../chunk-S7R37IUP.js";
+import "../chunk-UIQ733QP.js";
 import "../chunk-IGQVA7SC.js";
-import "../chunk-KX3O6GJ6.js";
+import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {
   DataGridCell,

package/dist/components/DateInput.cjs

@@ -137,6 +137,9 @@ var componentGap = (0, import_clsx.default)(
 var paddingUsingComponentGap = (0, import_clsx.default)(
   "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
 );
+var paddingXUsingLayoutGroupGap = (0, import_clsx.default)(
+  "px-mobile-layout-group-gap desktop:px-desktop-layout-group-gap compact:px-desktop-compact-layout-group-gap"
+);
 var paddingYUsingLayoutGroupGap = (0, import_clsx.default)(
   "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
 );
@@ -146,6 +149,9 @@ var componentPadding = (0, import_clsx.default)(
 var componentPaddingBottom = (0, import_clsx.default)(
   "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
 );
+var componentPaddingX = (0, import_clsx.default)(
+  "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding"
+);
 var componentPaddingY = (0, import_clsx.default)(
   "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
 );
@@ -161,6 +167,9 @@ var componentPaddingMinusBorder = (0, import_clsx.default)(
 var componentPaddingMinus2pxBorder = (0, import_clsx.default)(
   "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]"
 );
+var layoutPaddding = (0, import_clsx.default)(
+  "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding"
+);
 var layoutPaddingBottom = (0, import_clsx.default)(
   "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
 );
@@ -814,8 +823,8 @@ function CalendarRange({
     {
       className: (0, import_clsx5.default)(
         "relative bg-background-grouped-primary-normal rounded-base w-fit",
-        componentPadding,
-        componentGap,
+        layoutPaddding,
+        layoutGap,
         cardStyle && "shadow-4",
         // baseTransition,
         "overflow-hidden"
@@ -825,8 +834,7 @@ function CalendarRange({
         {
           className: (0, import_clsx5.default)(
             "flex flex-row items-start justify-start bg-background-primary-normal overflow-clip",
-            componentGap,
-            paddingUsingComponentGap
+            layoutGap
           ),
           children: (mode === "double" ? [0, 1] : [0]).map((offset, idx) => {
             const month = getMonthData(offset);
@@ -837,9 +845,7 @@ function CalendarRange({
                 "div",
                 {
                   className: (0, import_clsx5.default)(
-                    "flex flex-col",
-                    componentGap,
-                    componentPadding
+                    "flex flex-col"
                   ),
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
@@ -847,10 +853,6 @@ function CalendarRange({
                       {
                         className: (0, import_clsx5.default)(
                           "flex flex-row items-center justify-between",
-                          componentGap,
-                          componentPaddingXUsingComponentGap,
-                          componentPaddingYUsingComponentGap,
-                          "mb-3",
                           typography.label,
                           "text-text-action-primary-normal"
                         ),
@@ -860,9 +862,8 @@ function CalendarRange({
                             {
                               type: "button",
                               className: (0, import_clsx5.default)(
-                                "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-primary-normal",
-                                componentPadding,
-                                "mr-1"
+                                "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
+                                componentPadding
                               ),
                               "aria-label": "Previous month",
                               onClick: () => setBaseMonth(baseMonth.subtract({ months: 1 })),
@@ -878,9 +879,8 @@ function CalendarRange({
                             {
                               type: "button",
                               className: (0, import_clsx5.default)(
-                                "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-primary-normal",
-                                componentPadding,
-                                "ml-1"
+                                "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
+                                componentPadding
                               ),
                               "aria-label": "Next month",
                               onClick: () => setBaseMonth(baseMonth.add({ months: 1 })),
@@ -890,12 +890,13 @@ function CalendarRange({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_clsx5.default)("grid grid-cols-7 mb-1", componentGap), children: weekDays.map((d) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_clsx5.default)("grid grid-cols-7"), children: weekDays.map((d) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                       "span",
                       {
                         className: (0, import_clsx5.default)(
                           typography.caption,
-                          "text-text-secondary-normal text-center"
+                          "text-text-secondary-normal text-center",
+                          "w-10"
                         ),
                         children: d
                       },
@@ -930,7 +931,7 @@ function CalendarRange({
                           isRangeStart: !!isRangeStart,
                           isRangeEnd: !!isRangeEnd,
                           isRangeDisabled: mode === "single" && disableRange,
-                          cellPadding: "p-1.5 md:p-2 lg:p-2.5"
+                          cellPadding: componentPadding
                         },
                         i
                       );
@@ -942,7 +943,7 @@ function CalendarRange({
                 "div",
                 {
                   className: (0, import_clsx5.default)(
-                    "self-stretch bg-border-primary-normal rounded-base mx-mobile-component-padding desktop:mx-desktop-component-padding compact:mx-desktop-compact-component-padding",
+                    "self-stretch bg-border-primary-normal rounded-base",
                     // 1px width, full height, matches Figma divider
                     "w-px"
                   )

package/dist/components/DateInput.js

@@ -3,15 +3,15 @@ import {
 } from "../chunk-4T7F5BZZ.js";
 import {
   InputBase
-} from "../chunk-BWRHL2AG.js";
-import "../chunk-4C66DLIJ.js";
+} from "../chunk-OISE6NMA.js";
+import "../chunk-S7R37IUP.js";
 import {
   CalendarRange
-} from "../chunk-FY7PTP6E.js";
+} from "../chunk-OUTEIXV4.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";
-import "../chunk-KX3O6GJ6.js";
+import "../chunk-RDLEIAQU.js";
 import {
   __objRest,
   __spreadProps,