@dmsi/wedgekit-react 0.0.500 → 0.0.501

package/dist/components/SideMenuItem.cjs

@@ -182,6 +182,9 @@ var layoutPaddingBottom = (0, import_clsx.default)(
 var layoutPaddingY = (0, import_clsx.default)(
   "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
 );
+var layoutPaddingX = (0, import_clsx.default)(
+  "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding"
+);
 var containerPaddingX = (0, import_clsx.default)(
   "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
 );
@@ -334,7 +337,7 @@ var Stack = (_a) => {
       id,
       "data-testid": testid
     }, props), {
-      style: {
+      style: __spreadValues({
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
         maxHeight: maxHeight !== void 0 ? isNaN(+maxHeight) ? maxHeight : `${maxHeight}px` : (_a2 = props.style) == null ? void 0 : _a2.maxHeight,
         maxWidth: maxWidth !== void 0 ? isNaN(+maxWidth) ? maxWidth : `${maxWidth}px` : (_b2 = props.style) == null ? void 0 : _b2.maxWidth,
@@ -359,7 +362,7 @@ var Stack = (_a) => {
         flexWrap,
         paddingInline: (_f = props.style) == null ? void 0 : _f.paddingInline,
         gap: (_g = props.style) == null ? void 0 : _g.gap
-      },
+      }, props.style),
       className: (0, import_clsx2.default)(
         "scrollbar-thin",
         "max-w-screen",

package/dist/components/SideMenuItem.js

@@ -1,13 +1,13 @@
 import {
   Paragraph
-} from "../chunk-ZSETMD4A.js";
+} from "../chunk-WMPWWFUJ.js";
 import {
   Stack
-} from "../chunk-DORD2EBO.js";
+} from "../chunk-TPXH53SA.js";
 import {
   baseTransition,
   componentPaddingMinus2pxBorder
-} from "../chunk-IXR65MOU.js";
+} from "../chunk-7KWFEH56.js";
 import "../chunk-ORMEWXMH.js";
 
 // src/components/SideMenuItem.tsx

package/dist/components/SimpleTable.cjs

@@ -184,6 +184,9 @@ var layoutPaddingBottom = (0, import_clsx.default)(
 var layoutPaddingY = (0, import_clsx.default)(
   "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
 );
+var layoutPaddingX = (0, import_clsx.default)(
+  "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding"
+);
 var containerPaddingX = (0, import_clsx.default)(
   "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
 );
@@ -385,7 +388,7 @@ var Stack = (_a) => {
       id,
       "data-testid": testid
     }, props), {
-      style: {
+      style: __spreadValues({
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
         maxHeight: maxHeight !== void 0 ? isNaN(+maxHeight) ? maxHeight : `${maxHeight}px` : (_a2 = props.style) == null ? void 0 : _a2.maxHeight,
         maxWidth: maxWidth !== void 0 ? isNaN(+maxWidth) ? maxWidth : `${maxWidth}px` : (_b2 = props.style) == null ? void 0 : _b2.maxWidth,
@@ -410,7 +413,7 @@ var Stack = (_a) => {
         flexWrap,
         paddingInline: (_f = props.style) == null ? void 0 : _f.paddingInline,
         gap: (_g = props.style) == null ? void 0 : _g.gap
-      },
+      }, props.style),
       className: (0, import_clsx3.default)(
         "scrollbar-thin",
         "max-w-screen",

package/dist/components/SimpleTable.js

@@ -1,9 +1,9 @@
 import {
   SimpleTable
-} from "../chunk-7BVUTFZ5.js";
-import "../chunk-UCJUC5AZ.js";
-import "../chunk-DORD2EBO.js";
-import "../chunk-IXR65MOU.js";
+} from "../chunk-OWHPPZZA.js";
+import "../chunk-BYC6QID5.js";
+import "../chunk-TPXH53SA.js";
+import "../chunk-7KWFEH56.js";
 import "../chunk-ORMEWXMH.js";
 export {
   SimpleTable

package/dist/components/Stack.cjs

@@ -182,6 +182,9 @@ var layoutPaddingBottom = (0, import_clsx.default)(
 var layoutPaddingY = (0, import_clsx.default)(
   "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
 );
+var layoutPaddingX = (0, import_clsx.default)(
+  "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding"
+);
 var containerPaddingX = (0, import_clsx.default)(
   "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
 );
@@ -333,7 +336,7 @@ var Stack = (_a) => {
       id,
       "data-testid": testid
     }, props), {
-      style: {
+      style: __spreadValues({
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
         maxHeight: maxHeight !== void 0 ? isNaN(+maxHeight) ? maxHeight : `${maxHeight}px` : (_a2 = props.style) == null ? void 0 : _a2.maxHeight,
         maxWidth: maxWidth !== void 0 ? isNaN(+maxWidth) ? maxWidth : `${maxWidth}px` : (_b2 = props.style) == null ? void 0 : _b2.maxWidth,
@@ -358,7 +361,7 @@ var Stack = (_a) => {
         flexWrap,
         paddingInline: (_f = props.style) == null ? void 0 : _f.paddingInline,
         gap: (_g = props.style) == null ? void 0 : _g.gap
-      },
+      }, props.style),
       className: (0, import_clsx2.default)(
         "scrollbar-thin",
         "max-w-screen",

package/dist/components/Stack.js

@@ -1,7 +1,7 @@
 import {
   Stack
-} from "../chunk-DORD2EBO.js";
-import "../chunk-IXR65MOU.js";
+} from "../chunk-TPXH53SA.js";
+import "../chunk-7KWFEH56.js";
 import "../chunk-ORMEWXMH.js";
 export {
   Stack

package/dist/components/StatusPill.cjs

@@ -184,6 +184,9 @@ var layoutPaddingBottom = (0, import_clsx.default)(
 var layoutPaddingY = (0, import_clsx.default)(
   "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
 );
+var layoutPaddingX = (0, import_clsx.default)(
+  "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding"
+);
 var containerPaddingX = (0, import_clsx.default)(
   "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
 );

package/dist/components/StatusPill.js

@@ -1,10 +1,10 @@
 import {
   Label
-} from "../chunk-AL5QIRY3.js";
+} from "../chunk-HXGJVYGQ.js";
 import {
   componentPaddingYUsingComponentGap,
   paddingXUsingLayoutGroupGap
-} from "../chunk-IXR65MOU.js";
+} from "../chunk-7KWFEH56.js";
 import {
   __objRest,
   __spreadProps,

package/dist/components/Stepper.cjs

@@ -185,6 +185,9 @@ var layoutPaddingBottom = (0, import_clsx.default)(
 var layoutPaddingY = (0, import_clsx.default)(
   "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
 );
+var layoutPaddingX = (0, import_clsx.default)(
+  "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding"
+);
 var containerPaddingX = (0, import_clsx.default)(
   "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
 );

package/dist/components/Stepper.js

@@ -1,19 +1,19 @@
 "use client";
 import {
   InputBase
-} from "../chunk-G4AWTFBQ.js";
-import "../chunk-AL5QIRY3.js";
+} from "../chunk-KPBG7D3V.js";
+import "../chunk-HXGJVYGQ.js";
 import "../chunk-5UH6QUFB.js";
-import "../chunk-ZSETMD4A.js";
+import "../chunk-WMPWWFUJ.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";
 import {
   Button
-} from "../chunk-LPY6PMAY.js";
+} from "../chunk-45AHDOAU.js";
 import {
   componentGap
-} from "../chunk-IXR65MOU.js";
+} from "../chunk-7KWFEH56.js";
 import {
   __objRest,
   __spreadProps,

package/dist/components/Subheader.cjs

@@ -182,6 +182,9 @@ var layoutPaddingBottom = (0, import_clsx.default)(
 var layoutPaddingY = (0, import_clsx.default)(
   "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
 );
+var layoutPaddingX = (0, import_clsx.default)(
+  "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding"
+);
 var containerPaddingX = (0, import_clsx.default)(
   "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
 );

package/dist/components/Subheader.js

@@ -1,7 +1,7 @@
 import {
   Subheader
-} from "../chunk-UCJUC5AZ.js";
-import "../chunk-IXR65MOU.js";
+} from "../chunk-BYC6QID5.js";
+import "../chunk-7KWFEH56.js";
 import "../chunk-ORMEWXMH.js";
 export {
   Subheader

package/dist/components/Swatch.cjs

@@ -185,6 +185,9 @@ var layoutPaddingBottom = (0, import_clsx.default)(
 var layoutPaddingY = (0, import_clsx.default)(
   "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
 );
+var layoutPaddingX = (0, import_clsx.default)(
+  "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding"
+);
 var containerPaddingX = (0, import_clsx.default)(
   "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
 );
@@ -387,7 +390,7 @@ var Stack = (_a) => {
       id,
       "data-testid": testid
     }, props), {
-      style: {
+      style: __spreadValues({
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
         maxHeight: maxHeight !== void 0 ? isNaN(+maxHeight) ? maxHeight : `${maxHeight}px` : (_a2 = props.style) == null ? void 0 : _a2.maxHeight,
         maxWidth: maxWidth !== void 0 ? isNaN(+maxWidth) ? maxWidth : `${maxWidth}px` : (_b2 = props.style) == null ? void 0 : _b2.maxWidth,
@@ -412,7 +415,7 @@ var Stack = (_a) => {
         flexWrap,
         paddingInline: (_f = props.style) == null ? void 0 : _f.paddingInline,
         gap: (_g = props.style) == null ? void 0 : _g.gap
-      },
+      }, props.style),
       className: (0, import_clsx3.default)(
         "scrollbar-thin",
         "max-w-screen",

package/dist/components/Swatch.js

@@ -1,19 +1,19 @@
 import {
   Display1
-} from "../chunk-KHIJYWZ7.js";
+} from "../chunk-KIAF4N7M.js";
 import {
   Heading2,
   Heading3
-} from "../chunk-H2KC5XUY.js";
+} from "../chunk-MXSJF6TW.js";
 import {
   Paragraph
-} from "../chunk-ZSETMD4A.js";
+} from "../chunk-WMPWWFUJ.js";
 import {
   Stack
-} from "../chunk-DORD2EBO.js";
+} from "../chunk-TPXH53SA.js";
 import {
   typography
-} from "../chunk-IXR65MOU.js";
+} from "../chunk-7KWFEH56.js";
 import "../chunk-ORMEWXMH.js";
 
 // src/components/Swatch.tsx

package/dist/components/Textarea.cjs

@@ -183,6 +183,9 @@ var layoutPaddingBottom = (0, import_clsx.default)(
 var layoutPaddingY = (0, import_clsx.default)(
   "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
 );
+var layoutPaddingX = (0, import_clsx.default)(
+  "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding"
+);
 var containerPaddingX = (0, import_clsx.default)(
   "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
 );

package/dist/components/Textarea.js

@@ -4,7 +4,7 @@ import {
   componentGap,
   componentPaddingMinusBorder,
   typography
-} from "../chunk-IXR65MOU.js";
+} from "../chunk-7KWFEH56.js";
 import {
   __objRest,
   __spreadProps,

package/dist/components/Time.cjs

@@ -186,6 +186,9 @@ var layoutPaddingBottom = (0, import_clsx.default)(
 var layoutPaddingY = (0, import_clsx.default)(
   "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
 );
+var layoutPaddingX = (0, import_clsx.default)(
+  "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding"
+);
 var containerPaddingX = (0, import_clsx.default)(
   "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
 );
@@ -945,7 +948,7 @@ var Stack = (_a) => {
       id,
       "data-testid": testid
     }, props), {
-      style: {
+      style: __spreadValues({
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
         maxHeight: maxHeight !== void 0 ? isNaN(+maxHeight) ? maxHeight : `${maxHeight}px` : (_a2 = props.style) == null ? void 0 : _a2.maxHeight,
         maxWidth: maxWidth !== void 0 ? isNaN(+maxWidth) ? maxWidth : `${maxWidth}px` : (_b2 = props.style) == null ? void 0 : _b2.maxWidth,
@@ -970,7 +973,7 @@ var Stack = (_a) => {
         flexWrap,
         paddingInline: (_f = props.style) == null ? void 0 : _f.paddingInline,
         gap: (_g = props.style) == null ? void 0 : _g.gap
-      },
+      }, props.style),
       className: (0, import_clsx6.default)(
         "scrollbar-thin",
         "max-w-screen",

package/dist/components/Time.js

@@ -1,22 +1,22 @@
 import {
   InputBase
-} from "../chunk-G4AWTFBQ.js";
-import "../chunk-AL5QIRY3.js";
+} from "../chunk-KPBG7D3V.js";
+import "../chunk-HXGJVYGQ.js";
 import {
   findDocumentRoot
 } from "../chunk-VXWSAIB5.js";
 import "../chunk-R3EQIDBX.js";
 import "../chunk-5UH6QUFB.js";
-import "../chunk-ZSETMD4A.js";
+import "../chunk-WMPWWFUJ.js";
 import {
   Stack
-} from "../chunk-DORD2EBO.js";
+} from "../chunk-TPXH53SA.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";
 import {
   typography
-} from "../chunk-IXR65MOU.js";
+} from "../chunk-7KWFEH56.js";
 import {
   __objRest,
   __spreadProps,

package/dist/components/Toast.cjs

@@ -188,6 +188,9 @@ var layoutPaddingBottom = (0, import_clsx.default)(
 var layoutPaddingY = (0, import_clsx.default)(
   "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
 );
+var layoutPaddingX = (0, import_clsx.default)(
+  "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding"
+);
 var containerPaddingX = (0, import_clsx.default)(
   "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
 );

package/dist/components/Toast.js

@@ -1,21 +1,21 @@
 "use client";
 import {
   Heading3
-} from "../chunk-H2KC5XUY.js";
+} from "../chunk-MXSJF6TW.js";
 import {
   Paragraph
-} from "../chunk-ZSETMD4A.js";
+} from "../chunk-WMPWWFUJ.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";
 import {
   Button
-} from "../chunk-LPY6PMAY.js";
+} from "../chunk-45AHDOAU.js";
 import {
   componentGap,
   componentPadding,
   layoutGroupGap
-} from "../chunk-IXR65MOU.js";
+} from "../chunk-7KWFEH56.js";
 import {
   __objRest,
   __spreadProps,

package/dist/components/Tooltip.cjs

@@ -156,6 +156,9 @@ var layoutPaddingBottom = (0, import_clsx.default)(
 var layoutPaddingY = (0, import_clsx.default)(
   "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
 );
+var layoutPaddingX = (0, import_clsx.default)(
+  "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding"
+);
 var containerPaddingX = (0, import_clsx.default)(
   "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
 );

package/dist/components/Tooltip.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   Tooltip
-} from "../chunk-7GHD74J3.js";
-import "../chunk-IXR65MOU.js";
+} from "../chunk-MDB26F6T.js";
+import "../chunk-7KWFEH56.js";
 import "../chunk-ORMEWXMH.js";
 export {
   Tooltip

package/dist/components/TopBar.cjs

@@ -183,6 +183,9 @@ var layoutPaddingBottom = (0, import_clsx.default)(
 var layoutPaddingY = (0, import_clsx.default)(
   "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
 );
+var layoutPaddingX = (0, import_clsx.default)(
+  "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding"
+);
 var containerPaddingX = (0, import_clsx.default)(
   "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
 );

package/dist/components/TopBar.js

@@ -7,7 +7,7 @@ import {
   layoutGap,
   layoutGroupGap,
   layoutGroupGapPaddingY
-} from "../chunk-IXR65MOU.js";
+} from "../chunk-7KWFEH56.js";
 import {
   __objRest,
   __spreadProps,

package/dist/components/Upload.cjs

@@ -182,6 +182,9 @@ var layoutPaddingBottom = (0, import_clsx.default)(
 var layoutPaddingY = (0, import_clsx.default)(
   "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
 );
+var layoutPaddingX = (0, import_clsx.default)(
+  "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding"
+);
 var containerPaddingX = (0, import_clsx.default)(
   "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
 );
@@ -561,7 +564,7 @@ var Stack = (_a) => {
       id,
       "data-testid": testid
     }, props), {
-      style: {
+      style: __spreadValues({
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
         maxHeight: maxHeight !== void 0 ? isNaN(+maxHeight) ? maxHeight : `${maxHeight}px` : (_a2 = props.style) == null ? void 0 : _a2.maxHeight,
         maxWidth: maxWidth !== void 0 ? isNaN(+maxWidth) ? maxWidth : `${maxWidth}px` : (_b2 = props.style) == null ? void 0 : _b2.maxWidth,
@@ -586,7 +589,7 @@ var Stack = (_a) => {
         flexWrap,
         paddingInline: (_f = props.style) == null ? void 0 : _f.paddingInline,
         gap: (_g = props.style) == null ? void 0 : _g.gap
-      },
+      }, props.style),
       className: (0, import_clsx5.default)(
         "scrollbar-thin",
         "max-w-screen",

package/dist/components/Upload.js

@@ -3,19 +3,19 @@ import {
 } from "../chunk-SBRRNFOP.js";
 import {
   Paragraph
-} from "../chunk-ZSETMD4A.js";
+} from "../chunk-WMPWWFUJ.js";
 import {
   Stack
-} from "../chunk-DORD2EBO.js";
+} from "../chunk-TPXH53SA.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";
 import {
   Button
-} from "../chunk-LPY6PMAY.js";
+} from "../chunk-45AHDOAU.js";
 import {
   componentGap
-} from "../chunk-IXR65MOU.js";
+} from "../chunk-7KWFEH56.js";
 import {
   __objRest,
   __spreadProps,

package/dist/components/index.cjs

@@ -267,6 +267,9 @@ var layoutPaddingBottom = (0, import_clsx.default)(
 var layoutPaddingY = (0, import_clsx.default)(
   "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
 );
+var layoutPaddingX = (0, import_clsx.default)(
+  "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding"
+);
 var containerPaddingX = (0, import_clsx.default)(
   "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
 );
@@ -5176,7 +5179,7 @@ var Stack = (_a) => {
       id,
       "data-testid": testid
     }, props), {
-      style: {
+      style: __spreadValues({
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
         maxHeight: maxHeight !== void 0 ? isNaN(+maxHeight) ? maxHeight : `${maxHeight}px` : (_a2 = props.style) == null ? void 0 : _a2.maxHeight,
         maxWidth: maxWidth !== void 0 ? isNaN(+maxWidth) ? maxWidth : `${maxWidth}px` : (_b2 = props.style) == null ? void 0 : _b2.maxWidth,
@@ -5201,7 +5204,7 @@ var Stack = (_a) => {
         flexWrap,
         paddingInline: (_f = props.style) == null ? void 0 : _f.paddingInline,
         gap: (_g = props.style) == null ? void 0 : _g.gap
-      },
+      }, props.style),
       className: (0, import_clsx22.default)(
         "scrollbar-thin",
         "max-w-screen",
@@ -5592,6 +5595,7 @@ function MobileDataGridHeader({
             items: "center",
             justify: "between",
             backgroundColor: "background-primary-normal",
+            style: { borderTopRightRadius: 4, borderTopLeftRadius: 4 },
             children: [
               enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "p-mobile-component-padding border-r border-brand-200 max-w-fit h-full", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                 Checkbox,
@@ -6181,15 +6185,22 @@ Modal.displayName = "Modal";
 // src/components/MobileDataGrid/MobileDataGridCard/MobileDataGridColumn.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function MobileDataGridColumn(props) {
-  var _a;
+  var _a, _b;
   const { column, data } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "grid grid-cols-2 gap-2 px-3 flex-1", children: [
+  let value;
+  if (column.id) {
+    value = data[column.id];
+    if (((_a = column.meta) == null ? void 0 : _a.format) === "date" && typeof value === "string") {
+      value = formatDate(value);
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "grid grid-cols-2 gap-2 flex-1", children: [
     /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
-      (_a = column.header) == null ? void 0 : _a.toString(),
+      (_b = column.header) == null ? void 0 : _b.toString(),
       ":"
     ] }),
     " ",
-    column.id && data[column.id] ? data[column.id] : null
+    value ? value : null
   ] });
 }
 
@@ -6208,7 +6219,7 @@ function ModalContent2() {
       return ((_a = column.meta) == null ? void 0 : _a.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
         "div",
         {
-          className: "grid grid-cols-2 gap-2 px-3 items-center flex-1",
+          className: "grid grid-cols-2 gap-2 items-center flex-1",
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
               (_b = column.header) == null ? void 0 : _b.toString(),
@@ -6314,8 +6325,12 @@ function MobileDataGridCard({
       id: id ? `${id}-card-${getId(data)}` : void 0,
       "data-testid": testid ? `${testid}-card-${getId(data)}` : void 0,
       className: (0, import_clsx30.default)(
+        "flex flex-col",
         "hover:bg-action-100 cursor-pointer list-none",
-        selected ? "bg-action-100" : "bg-background-grouped-primary-normal"
+        selected ? "bg-action-100" : "bg-background-grouped-primary-normal",
+        layoutGroupGap,
+        layoutPaddingX,
+        paddingYUsingLayoutGroupGap
       ),
       onClick: () => openRowDetail(data),
       children: [
@@ -6327,6 +6342,7 @@ function MobileDataGridCard({
                 sizing: "component",
                 padding: true,
                 width: "fit",
+                style: { paddingLeft: 0, paddingRight: 8 },
                 onClick: (e) => e.stopPropagation(),
                 children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                   Checkbox,
@@ -6345,6 +6361,7 @@ function MobileDataGridCard({
                 sizing: "component",
                 padding: true,
                 onClick: (e) => e.stopPropagation(),
+                style: { paddingInline: 0 },
                 children: renderLink ? renderLink(data) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Subheader, { children: String((_a = data[context.primaryKey]) != null ? _a : "") })
               }
             ),
@@ -6370,7 +6387,7 @@ function MobileDataGridCard({
               return ((_a2 = column.meta) == null ? void 0 : _a2.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
                 "div",
                 {
-                  className: "grid grid-cols-2 gap-2 px-3 items-center flex-1",
+                  className: "grid grid-cols-2 gap-2 items-center flex-1",
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
                       Paragraph,
@@ -6406,7 +6423,7 @@ function MobileDataGridCard({
             }
           ) })
         ] }),
-        renderChevron && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Stack, { items: "center", justify: "center", horizontal: true, horizontalMobile: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: "keyboard_arrow_down" }) })
+        renderChevron && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Stack, { items: "center", justify: "center", horizontal: true, horizontalMobile: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-icon-primary-normal", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: "keyboard_arrow_down" }) }) })
       ]
     }
   );

package/dist/components/index.css

@@ -2102,6 +2102,9 @@
   .font-sans {
     font-family: var(--font-sans);
   }
+  .\!text-caption-desktop {
+    font-size: var(--text-caption-desktop) !important;
+  }
   .text-\[0\.6rem\] {
     font-size: 0.6rem;
   }