@dmsi/wedgekit-react 0.0.14 → 0.0.16

package/dist/{chunk-SY3HT54E.js → chunk-3WTXVSHO.js}

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

package/dist/{chunk-UU3FA6LV.js → chunk-5TLFMKSR.js}

@@ -1,6 +1,6 @@
 import {
   Button
-} from "./chunk-KENSVWOY.js";
+} from "./chunk-T6HZARR7.js";
 import {
   __objRest,
   __spreadProps,

package/dist/{chunk-6ZY524ID.js → chunk-DBYSGYST.js}

@@ -1,18 +1,23 @@
 import {
   Button
-} from "./chunk-KENSVWOY.js";
+} from "./chunk-T6HZARR7.js";
 import {
   Icon
 } from "./chunk-IGQVA7SC.js";
+import {
+  layoutGroupGap,
+  layoutPaddding
+} from "./chunk-RDLEIAQU.js";
 
 // src/components/ModalButtons.tsx
+import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ModalButtons = ({
   onClose,
   onContinue,
   customActions
 }) => {
-  return /* @__PURE__ */ jsx("div", { className: "border-t border-neutral-300 p-4 flex justify-end space-x-2", children: customActions != null ? customActions : /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx("div", { className: clsx("border-t border-neutral-300 flex justify-end", layoutPaddding, layoutGroupGap), children: customActions != null ? customActions : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Button,
       {

package/dist/{chunk-TAW5ZZ4Z.js → chunk-GCPJH5R6.js}

@@ -6,10 +6,10 @@ import {
 } from "./chunk-Z4UCFUF7.js";
 import {
   MenuOption
-} from "./chunk-E5ALT5W7.js";
+} from "./chunk-YDREJNAS.js";
 import {
   Search
-} from "./chunk-GTCSRHPF.js";
+} from "./chunk-TWP6YSFO.js";
 import {
   CSS
 } from "./chunk-WVUIIBRR.js";
@@ -17,8 +17,9 @@ import {
   Icon
 } from "./chunk-IGQVA7SC.js";
 import {
+  componentPadding,
   paddingUsingComponentGap
-} from "./chunk-KX3O6GJ6.js";
+} from "./chunk-RDLEIAQU.js";
 import {
   __objRest,
   __spreadProps,
@@ -125,7 +126,7 @@ var DataGridCell = 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/{chunk-TRUPPHBQ.js → chunk-KDEPZ6I7.js}

@@ -1,6 +1,6 @@
 import {
   InputBase
-} from "./chunk-BWRHL2AG.js";
+} from "./chunk-OISE6NMA.js";
 import {
   Icon
 } from "./chunk-IGQVA7SC.js";

package/dist/{chunk-DKKYR6DS.js → chunk-N32PXOA5.js}

@@ -1,13 +1,13 @@
 import {
   Paragraph
-} from "./chunk-K3IKUSZW.js";
+} from "./chunk-UIQ733QP.js";
 import {
   Icon
 } from "./chunk-IGQVA7SC.js";
 import {
   baseTransition,
   componentGap
-} from "./chunk-KX3O6GJ6.js";
+} from "./chunk-RDLEIAQU.js";
 import {
   __objRest,
   __spreadValues

package/dist/{chunk-BWRHL2AG.js → chunk-OISE6NMA.js}

@@ -1,6 +1,6 @@
 import {
   Label
-} from "./chunk-4C66DLIJ.js";
+} from "./chunk-S7R37IUP.js";
 import {
   Icon
 } from "./chunk-IGQVA7SC.js";
@@ -10,7 +10,7 @@ import {
   componentPaddingMinusBorder,
   componentPaddingXUsingComponentGap,
   typography
-} from "./chunk-KX3O6GJ6.js";
+} from "./chunk-RDLEIAQU.js";
 import {
   __objRest,
   __spreadProps,

package/dist/{chunk-FY7PTP6E.js → chunk-OUTEIXV4.js}

@@ -2,13 +2,11 @@ import {
   Icon
 } from "./chunk-IGQVA7SC.js";
 import {
-  componentGap,
   componentPadding,
-  componentPaddingXUsingComponentGap,
-  componentPaddingYUsingComponentGap,
-  paddingUsingComponentGap,
+  layoutGap,
+  layoutPaddding,
   typography
-} from "./chunk-KX3O6GJ6.js";
+} from "./chunk-RDLEIAQU.js";
 import {
   __objRest,
   __spreadProps,
@@ -172,8 +170,8 @@ function CalendarRange({
     {
       className: clsx(
         "relative bg-background-grouped-primary-normal rounded-base w-fit",
-        componentPadding,
-        componentGap,
+        layoutPaddding,
+        layoutGap,
         cardStyle && "shadow-4",
         // baseTransition,
         "overflow-hidden"
@@ -183,8 +181,7 @@ function CalendarRange({
         {
           className: clsx(
             "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);
@@ -195,9 +192,7 @@ function CalendarRange({
                 "div",
                 {
                   className: clsx(
-                    "flex flex-col",
-                    componentGap,
-                    componentPadding
+                    "flex flex-col"
                   ),
                   children: [
                     /* @__PURE__ */ jsxs(
@@ -205,10 +200,6 @@ function CalendarRange({
                       {
                         className: clsx(
                           "flex flex-row items-center justify-between",
-                          componentGap,
-                          componentPaddingXUsingComponentGap,
-                          componentPaddingYUsingComponentGap,
-                          "mb-3",
                           typography.label,
                           "text-text-action-primary-normal"
                         ),
@@ -218,9 +209,8 @@ function CalendarRange({
                             {
                               type: "button",
                               className: clsx(
-                                "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 })),
@@ -236,9 +226,8 @@ function CalendarRange({
                             {
                               type: "button",
                               className: clsx(
-                                "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 })),
@@ -248,12 +237,13 @@ function CalendarRange({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsx("div", { className: clsx("grid grid-cols-7 mb-1", componentGap), children: weekDays.map((d) => /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx("div", { className: clsx("grid grid-cols-7"), children: weekDays.map((d) => /* @__PURE__ */ jsx(
                       "span",
                       {
                         className: clsx(
                           typography.caption,
-                          "text-text-secondary-normal text-center"
+                          "text-text-secondary-normal text-center",
+                          "w-10"
                         ),
                         children: d
                       },
@@ -288,7 +278,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
                       );
@@ -300,7 +290,7 @@ function CalendarRange({
                 "div",
                 {
                   className: clsx(
-                    "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/{chunk-KX3O6GJ6.js → chunk-RDLEIAQU.js}

@@ -66,6 +66,9 @@ var componentGap = clsx(
 var paddingUsingComponentGap = clsx(
   "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
 );
+var paddingXUsingLayoutGroupGap = clsx(
+  "px-mobile-layout-group-gap desktop:px-desktop-layout-group-gap compact:px-desktop-compact-layout-group-gap"
+);
 var paddingYUsingLayoutGroupGap = clsx(
   "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
 );
@@ -75,6 +78,9 @@ var componentPadding = clsx(
 var componentPaddingBottom = clsx(
   "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
 );
+var componentPaddingX = clsx(
+  "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding"
+);
 var componentPaddingY = clsx(
   "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
 );
@@ -90,6 +96,9 @@ var componentPaddingMinusBorder = clsx(
 var componentPaddingMinus2pxBorder = clsx(
   "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 = clsx(
+  "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding"
+);
 var layoutPaddingBottom = clsx(
   "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
 );
@@ -120,6 +129,7 @@ export {
   baseTransition,
   componentGap,
   paddingUsingComponentGap,
+  paddingXUsingLayoutGroupGap,
   paddingYUsingLayoutGroupGap,
   componentPadding,
   componentPaddingBottom,
@@ -128,6 +138,7 @@ export {
   componentPaddingYUsingComponentGap,
   componentPaddingMinusBorder,
   componentPaddingMinus2pxBorder,
+  layoutPaddding,
   layoutPaddingBottom,
   containerPaddingX,
   containerPaddingY,

package/dist/{chunk-4C66DLIJ.js → chunk-S7R37IUP.js}

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

package/dist/{chunk-KENSVWOY.js → chunk-T6HZARR7.js}

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

package/dist/{chunk-TYI74BSP.js → chunk-TJ44JJCB.js}

@@ -1,6 +1,6 @@
 import {
   typography
-} from "./chunk-KX3O6GJ6.js";
+} from "./chunk-RDLEIAQU.js";
 import {
   __objRest,
   __spreadProps,

package/dist/{chunk-GTCSRHPF.js → chunk-TWP6YSFO.js}

@@ -1,6 +1,6 @@
 import {
   Input
-} from "./chunk-BWRHL2AG.js";
+} from "./chunk-OISE6NMA.js";
 import {
   __objRest,
   __spreadValues

package/dist/{chunk-K3IKUSZW.js → chunk-UIQ733QP.js}

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

package/dist/{chunk-XUIPGYP5.js → chunk-UK3WG7HQ.js}

@@ -1,14 +1,19 @@
 import {
   Heading2
-} from "./chunk-TYI74BSP.js";
+} from "./chunk-TJ44JJCB.js";
 import {
   Button
-} from "./chunk-KENSVWOY.js";
+} from "./chunk-T6HZARR7.js";
 import {
   Icon
 } from "./chunk-IGQVA7SC.js";
+import {
+  layoutGroupGap,
+  layoutPaddding
+} from "./chunk-RDLEIAQU.js";
 
 // src/components/ModalHeader.tsx
+import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ModalHeader = ({
   title,
@@ -16,8 +21,12 @@ var ModalHeader = ({
   headerIcon,
   onClose
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-desktop-compact-container-gap", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx(
+    "flex justify-between items-center",
+    layoutPaddding,
+    layoutGroupGap
+  ), children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx("flex items-center", layoutGroupGap), children: [
       headerIcon,
       title && /* @__PURE__ */ jsx(Heading2, { as: "p", children: title })
     ] }),

package/dist/{chunk-BNHSAFMP.js → chunk-VELXLFMJ.js}

@@ -1,6 +1,6 @@
 import {
   Button
-} from "./chunk-KENSVWOY.js";
+} from "./chunk-T6HZARR7.js";
 import {
   Icon
 } from "./chunk-IGQVA7SC.js";

package/dist/{chunk-Q3FKEKIN.js → chunk-WIDBAFBU.js}

@@ -1,3 +1,7 @@
+import {
+  layoutPaddding
+} from "./chunk-RDLEIAQU.js";
+
 // src/components/ModalContent.tsx
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
@@ -9,7 +13,8 @@ function ModalContent({
     "div",
     {
       className: clsx(
-        "flex-grow desktop:flex-grow-0 p-4",
+        "flex-grow desktop:flex-grow-0",
+        layoutPaddding,
         fixedHeightScrolling && "overflow-auto"
       ),
       children

package/dist/{chunk-E5ALT5W7.js → chunk-YDREJNAS.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk-SEKKGFM6.js";
 import {
   Label
-} from "./chunk-4C66DLIJ.js";
+} from "./chunk-S7R37IUP.js";
 import {
   Paragraph
-} from "./chunk-K3IKUSZW.js";
+} from "./chunk-UIQ733QP.js";
 import {
   Icon
 } from "./chunk-IGQVA7SC.js";
@@ -14,7 +14,7 @@ import {
   baseTransition,
   componentGap,
   componentPadding
-} from "./chunk-KX3O6GJ6.js";
+} from "./chunk-RDLEIAQU.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-2G2E2JMA.js → chunk-YZQNTOIF.js}

@@ -1,6 +1,7 @@
 import {
+  componentPadding,
   typography
-} from "./chunk-KX3O6GJ6.js";
+} from "./chunk-RDLEIAQU.js";
 
 // src/components/Tooltip.tsx
 import clsx from "clsx";
@@ -93,7 +94,8 @@ var Tooltip = ({
               },
               className: clsx(
                 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/{chunk-TWZZB4WO.js → chunk-Z2LOGSGE.js}

@@ -1,9 +1,9 @@
 import {
   Label
-} from "./chunk-4C66DLIJ.js";
+} from "./chunk-S7R37IUP.js";
 import {
   Button
-} from "./chunk-KENSVWOY.js";
+} from "./chunk-T6HZARR7.js";
 import {
   Icon
 } from "./chunk-IGQVA7SC.js";
@@ -13,7 +13,7 @@ import {
   componentPadding,
   componentPaddingMinusBorder,
   componentPaddingYUsingComponentGap
-} from "./chunk-KX3O6GJ6.js";
+} from "./chunk-RDLEIAQU.js";
 import {
   __objRest,
   __spreadProps,

package/dist/{chunk-5GOBP2JS.js → chunk-ZCBSLV7U.js}

@@ -1,6 +1,6 @@
 import {
   typography
-} from "./chunk-KX3O6GJ6.js";
+} from "./chunk-RDLEIAQU.js";
 import {
   __objRest,
   __spreadProps,

package/dist/{chunk-27KIIUAR.js → chunk-ZFGGZXB6.js}

@@ -1,6 +1,6 @@
 import {
   typography
-} from "./chunk-KX3O6GJ6.js";
+} from "./chunk-RDLEIAQU.js";
 import {
   __objRest,
   __spreadProps,

package/dist/components/Breadcrumbs.cjs

@@ -138,6 +138,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"
 );
@@ -147,6 +150,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"
 );
@@ -162,6 +168,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"
 );
@@ -299,7 +308,10 @@ function Icon(_a) {
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Breadcrumb = ({ href, children, onClick }) => {
   const linkPadding = (0, import_clsx4.default)(
-    "py-[calc(var(--spacing-mobile-component-padding)_+_3px)] !text-text-link-normal  whitespace-nowrap"
+    "!text-text-link-normal  whitespace-nowrap",
+    "py-[calc(var(--spacing-mobile-component-padding)_+_3px)]",
+    "desktop:py-[calc(var(--spacing-desktop-component-padding)_+_3px)]",
+    "compact:py-[calc(var(--spacing-desktop-compact-component-padding)_+_3px)]"
   );
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Link, { className: linkPadding, href, onClick, children }) }, href);
 };
@@ -331,8 +343,8 @@ var Breadcrumbs = ({
       className: (0, import_clsx4.default)(
         "relative select-none flex items-center  max-w-full w-full",
         {
-          "bg-white rounded-base shadow-4 px-desktop-layout-padding": asCardStyle,
-          "px-desktop-container-padding": !asCardStyle
+          "bg-white rounded-base shadow-4 px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding": asCardStyle,
+          "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding": !asCardStyle
         }
       ),
       "aria-label": "Breadcrumb",

package/dist/components/Breadcrumbs.js

@@ -1,11 +1,11 @@
 "use client";
 import {
   Link
-} from "../chunk-SY3HT54E.js";
+} from "../chunk-3WTXVSHO.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";
-import "../chunk-KX3O6GJ6.js";
+import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 
 // src/components/Breadcrumbs.tsx
@@ -14,7 +14,10 @@ import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Breadcrumb = ({ href, children, onClick }) => {
   const linkPadding = clsx(
-    "py-[calc(var(--spacing-mobile-component-padding)_+_3px)] !text-text-link-normal  whitespace-nowrap"
+    "!text-text-link-normal  whitespace-nowrap",
+    "py-[calc(var(--spacing-mobile-component-padding)_+_3px)]",
+    "desktop:py-[calc(var(--spacing-desktop-component-padding)_+_3px)]",
+    "compact:py-[calc(var(--spacing-desktop-compact-component-padding)_+_3px)]"
   );
   return /* @__PURE__ */ jsx("li", { className: "flex items-center", children: /* @__PURE__ */ jsx(Link, { className: linkPadding, href, onClick, children }) }, href);
 };
@@ -46,8 +49,8 @@ var Breadcrumbs = ({
       className: clsx(
         "relative select-none flex items-center  max-w-full w-full",
         {
-          "bg-white rounded-base shadow-4 px-desktop-layout-padding": asCardStyle,
-          "px-desktop-container-padding": !asCardStyle
+          "bg-white rounded-base shadow-4 px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding": asCardStyle,
+          "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding": !asCardStyle
         }
       ),
       "aria-label": "Breadcrumb",

package/dist/components/Button.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/Button.js

@@ -1,7 +1,7 @@
 import {
   Button
-} from "../chunk-KENSVWOY.js";
-import "../chunk-KX3O6GJ6.js";
+} from "../chunk-T6HZARR7.js";
+import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {
   Button