@dmsi/wedgekit-react 0.0.14 → 0.0.16

package/dist/components/Textarea.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"
 );
@@ -184,16 +193,11 @@ var gapUsingContainerPadding = (0, import_clsx.default)(
 
 // src/components/Textarea.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var textareaComponentPaddingMinusBorder = (0, import_clsx2.default)(
-  "p-[calc(var(--spacing-mobile-component-padding)_+_var(--spacing-mobile-component-gap)_-_1px)]",
-  "desktop:p-[calc(var(--spacing-desktop-component-padding)_+_var(--spacing-desktop-component-gap)_-_1px)]",
-  "compact:p-[calc(var(--spacing-desktop-compact-component-padding)_+_var(--spacing-desktop-compact-component-gap)_-_1px)]"
-);
 var textareaBaseClass = (0, import_clsx2.default)(
   "w-full min-h-19",
   "rounded-base border border-border-primary-normal bg-background-primary-normal caret-text-action-normal",
   "outline-transparent outline-2",
-  textareaComponentPaddingMinusBorder,
+  componentPaddingMinusBorder,
   baseTransition
 );
 var textareaInvalidClass = (0, import_clsx2.default)(
@@ -225,9 +229,10 @@ var Textarea = (_a) => {
     "label",
     {
       className: (0, import_clsx2.default)(
-        "block w-full space-y-desktop-component-gap",
+        "flex flex-col w-full",
         "text-text-primary-normal has-disabled:text-text-primary-disabled",
-        !props.disabled && !props.readOnly && "has-[[data-error]]:text-text-primary-error"
+        !props.disabled && !props.readOnly && "has-[[data-error]]:text-text-primary-error",
+        componentGap
       ),
       children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/components/Textarea.js

@@ -1,8 +1,10 @@
 "use client";
 import {
   baseTransition,
+  componentGap,
+  componentPaddingMinusBorder,
   typography
-} from "../chunk-KX3O6GJ6.js";
+} from "../chunk-RDLEIAQU.js";
 import {
   __objRest,
   __spreadProps,
@@ -12,16 +14,11 @@ import {
 // src/components/Textarea.tsx
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-var textareaComponentPaddingMinusBorder = clsx(
-  "p-[calc(var(--spacing-mobile-component-padding)_+_var(--spacing-mobile-component-gap)_-_1px)]",
-  "desktop:p-[calc(var(--spacing-desktop-component-padding)_+_var(--spacing-desktop-component-gap)_-_1px)]",
-  "compact:p-[calc(var(--spacing-desktop-compact-component-padding)_+_var(--spacing-desktop-compact-component-gap)_-_1px)]"
-);
 var textareaBaseClass = clsx(
   "w-full min-h-19",
   "rounded-base border border-border-primary-normal bg-background-primary-normal caret-text-action-normal",
   "outline-transparent outline-2",
-  textareaComponentPaddingMinusBorder,
+  componentPaddingMinusBorder,
   baseTransition
 );
 var textareaInvalidClass = clsx(
@@ -53,9 +50,10 @@ var Textarea = (_a) => {
     "label",
     {
       className: clsx(
-        "block w-full space-y-desktop-component-gap",
+        "flex flex-col w-full",
         "text-text-primary-normal has-disabled:text-text-primary-disabled",
-        !props.disabled && !props.readOnly && "has-[[data-error]]:text-text-primary-error"
+        !props.disabled && !props.readOnly && "has-[[data-error]]:text-text-primary-error",
+        componentGap
       ),
       children: [
         label && /* @__PURE__ */ jsx(

package/dist/components/Time.cjs

@@ -136,6 +136,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"
 );
@@ -145,6 +148,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"
 );
@@ -160,6 +166,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/Time.js

@@ -6,14 +6,14 @@ import {
 } from "../chunk-4T7F5BZZ.js";
 import {
   InputBase
-} from "../chunk-BWRHL2AG.js";
-import "../chunk-4C66DLIJ.js";
+} from "../chunk-OISE6NMA.js";
+import "../chunk-S7R37IUP.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";
 import {
   typography
-} from "../chunk-KX3O6GJ6.js";
+} from "../chunk-RDLEIAQU.js";
 import {
   __objRest,
   __spreadProps,

package/dist/components/Toast.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"
 );
@@ -594,15 +603,17 @@ var Toast = (_a) => {
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       className: (0, import_clsx6.default)(
-        "flex items-start gap-desktop-component-gap p-desktop-component-padding border-2 rounded-sm bg-white shadow-md cursor-pointer pointer-events-auto transition-all duration-300 ease-in-out w-fit",
+        "flex items-start border-2 rounded-sm bg-white shadow-md cursor-pointer pointer-events-auto transition-all duration-300 ease-in-out w-fit",
+        componentPadding,
+        layoutGroupGap,
         className
       )
     }, props), {
       style: props.style,
       children: [
         iconElement,
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex gap-desktop-layout-group-gap items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-desktop-component-gap w-68", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_clsx6.default)("flex items-center", layoutGroupGap), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_clsx6.default)("flex flex-col w-68", componentGap), children: [
             title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: title }),
             message && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Paragraph, { children: message })
           ] }),

package/dist/components/Toast.js

@@ -1,17 +1,21 @@
 "use client";
 import {
   Heading3
-} from "../chunk-TYI74BSP.js";
+} from "../chunk-TJ44JJCB.js";
 import {
   Button
-} from "../chunk-KENSVWOY.js";
+} from "../chunk-T6HZARR7.js";
 import {
   Paragraph
-} from "../chunk-K3IKUSZW.js";
+} from "../chunk-UIQ733QP.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";
-import "../chunk-KX3O6GJ6.js";
+import {
+  componentGap,
+  componentPadding,
+  layoutGroupGap
+} from "../chunk-RDLEIAQU.js";
 import {
   __objRest,
   __spreadProps,
@@ -169,15 +173,17 @@ var Toast = (_a) => {
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       className: clsx(
-        "flex items-start gap-desktop-component-gap p-desktop-component-padding border-2 rounded-sm bg-white shadow-md cursor-pointer pointer-events-auto transition-all duration-300 ease-in-out w-fit",
+        "flex items-start border-2 rounded-sm bg-white shadow-md cursor-pointer pointer-events-auto transition-all duration-300 ease-in-out w-fit",
+        componentPadding,
+        layoutGroupGap,
         className
       )
     }, props), {
       style: props.style,
       children: [
         iconElement,
-        /* @__PURE__ */ jsxs("div", { className: "flex gap-desktop-layout-group-gap items-center", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-desktop-component-gap w-68", children: [
+        /* @__PURE__ */ jsxs("div", { className: clsx("flex items-center", layoutGroupGap), children: [
+          /* @__PURE__ */ jsxs("div", { className: clsx("flex flex-col w-68", componentGap), children: [
             title && /* @__PURE__ */ jsx(Heading3, { children: title }),
             message && /* @__PURE__ */ jsx(Paragraph, { children: message })
           ] }),

package/dist/components/Tooltip.cjs

@@ -106,6 +106,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"
 );
@@ -115,6 +118,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"
 );
@@ -130,6 +136,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"
 );
@@ -243,7 +252,8 @@ var Tooltip = ({
               },
               className: (0, import_clsx2.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/Tooltip.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   Tooltip
-} from "../chunk-2G2E2JMA.js";
-import "../chunk-KX3O6GJ6.js";
+} from "../chunk-YZQNTOIF.js";
+import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {
   Tooltip

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

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

package/dist/index.css

@@ -593,9 +593,6 @@
   .mx-auto {
     margin-inline: auto;
   }
-  .mx-mobile-component-padding {
-    margin-inline: var(--spacing-mobile-component-padding);
-  }
   .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }
@@ -623,9 +620,6 @@
   .mr-auto {
     margin-right: auto;
   }
-  .mb-1 {
-    margin-bottom: calc(var(--spacing) * 1);
-  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -1006,9 +1000,6 @@
   .gap-desktop-component-gap {
     gap: var(--spacing-desktop-component-gap);
   }
-  .gap-desktop-layout-group-gap {
-    gap: var(--spacing-desktop-layout-group-gap);
-  }
   .gap-desktop-layout-padding {
     gap: var(--spacing-desktop-layout-padding);
   }
@@ -1027,13 +1018,6 @@
   .gap-mobile-layout-group-gap {
     gap: var(--spacing-mobile-layout-group-gap);
   }
-  .space-y-desktop-component-gap {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(var(--spacing-desktop-component-gap) * var(--tw-space-y-reverse));
-      margin-block-end: calc(var(--spacing-desktop-component-gap) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
   .space-x-1 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -1744,9 +1728,6 @@
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
-  .p-1\.5 {
-    padding: calc(var(--spacing) * 1.5);
-  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
@@ -1756,18 +1737,12 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
-  .p-\[calc\(var\(--spacing-mobile-component-padding\)_\+_var\(--spacing-mobile-component-gap\)_-_1px\)\] {
-    padding: calc(var(--spacing-mobile-component-padding) + var(--spacing-mobile-component-gap) - 1px);
-  }
   .p-\[calc\(var\(--spacing-mobile-component-padding\)_-_1px\)\] {
     padding: calc(var(--spacing-mobile-component-padding) - 1px);
   }
   .p-\[calc\(var\(--spacing-mobile-component-padding\)_-_2px\)\] {
     padding: calc(var(--spacing-mobile-component-padding) - 2px);
   }
-  .p-desktop-component-padding {
-    padding: var(--spacing-desktop-component-padding);
-  }
   .p-mobile-component-gap {
     padding: var(--spacing-mobile-component-gap);
   }
@@ -1795,15 +1770,6 @@
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
-  .px-desktop-component-padding {
-    padding-inline: var(--spacing-desktop-component-padding);
-  }
-  .px-desktop-container-padding {
-    padding-inline: var(--spacing-desktop-container-padding);
-  }
-  .px-desktop-layout-padding {
-    padding-inline: var(--spacing-desktop-layout-padding);
-  }
   .px-mobile-component-gap {
     padding-inline: var(--spacing-mobile-component-gap);
   }
@@ -1813,6 +1779,9 @@
   .px-mobile-container-padding {
     padding-inline: var(--spacing-mobile-container-padding);
   }
+  .px-mobile-layout-group-gap {
+    padding-inline: var(--spacing-mobile-layout-group-gap);
+  }
   .px-mobile-layout-padding {
     padding-inline: var(--spacing-mobile-layout-padding);
   }
@@ -1840,9 +1809,6 @@
   .py-\[calc\(var\(--spacing-mobile-component-padding\)_\+_3px\)\] {
     padding-block: calc(var(--spacing-mobile-component-padding) + 3px);
   }
-  .py-desktop-compact-component-padding {
-    padding-block: var(--spacing-desktop-compact-component-padding);
-  }
   .py-mobile-component-gap {
     padding-block: var(--spacing-mobile-component-gap);
   }
@@ -3502,21 +3468,11 @@
       gap: calc(var(--spacing) * 2);
     }
   }
-  .md\:p-2 {
-    @media (width >= 768px) {
-      padding: calc(var(--spacing) * 2);
-    }
-  }
   .lg\:grid-cols-4 {
     @media (width >= 1024px) {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
-  .lg\:p-2\.5 {
-    @media (width >= 1024px) {
-      padding: calc(var(--spacing) * 2.5);
-    }
-  }
   .xl\:grid-cols-4 {
     @media (width >= 1280px) {
       grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -3572,11 +3528,6 @@
       grid-template-columns: repeat(12, minmax(0, 1fr));
     }
   }
-  .compact\:mx-desktop-compact-component-padding {
-    &:where([data-compact]) {
-      margin-inline: var(--spacing-desktop-compact-component-padding);
-    }
-  }
   .compact\:mt-desktop-compact-component-gap {
     &:where([data-compact]) {
       margin-top: var(--spacing-desktop-compact-component-gap);
@@ -3607,11 +3558,6 @@
       gap: var(--spacing-desktop-compact-layout-group-gap);
     }
   }
-  .compact\:p-\[calc\(var\(--spacing-desktop-compact-component-padding\)_\+_var\(--spacing-desktop-compact-component-gap\)_-_1px\)\] {
-    &:where([data-compact]) {
-      padding: calc(var(--spacing-desktop-compact-component-padding) + var(--spacing-desktop-compact-component-gap) - 1px);
-    }
-  }
   .compact\:p-\[calc\(var\(--spacing-desktop-compact-component-padding\)_-_1px\)\] {
     &:where([data-compact]) {
       padding: calc(var(--spacing-desktop-compact-component-padding) - 1px);
@@ -3657,11 +3603,21 @@
       padding-inline: var(--spacing-desktop-compact-container-padding);
     }
   }
+  .compact\:px-desktop-compact-layout-group-gap {
+    &:where([data-compact]) {
+      padding-inline: var(--spacing-desktop-compact-layout-group-gap);
+    }
+  }
   .compact\:px-desktop-compact-layout-padding {
     &:where([data-compact]) {
       padding-inline: var(--spacing-desktop-compact-layout-padding);
     }
   }
+  .compact\:py-\[calc\(var\(--spacing-desktop-compact-component-padding\)_\+_3px\)\] {
+    &:where([data-compact]) {
+      padding-block: calc(var(--spacing-desktop-compact-component-padding) + 3px);
+    }
+  }
   .compact\:py-desktop-compact-component-gap {
     &:where([data-compact]) {
       padding-block: var(--spacing-desktop-compact-component-gap);
@@ -3768,11 +3724,6 @@
       }
     }
   }
-  .desktop\:mx-desktop-component-padding {
-    @container root (width >= 48rem) {
-      margin-inline: var(--spacing-desktop-component-padding);
-    }
-  }
   .desktop\:mt-0 {
     @container root (width >= 48rem) {
       margin-top: calc(var(--spacing) * 0);
@@ -3888,11 +3839,6 @@
       padding: calc(var(--spacing) * 4);
     }
   }
-  .desktop\:p-\[calc\(var\(--spacing-desktop-component-padding\)_\+_var\(--spacing-desktop-component-gap\)_-_1px\)\] {
-    @container root (width >= 48rem) {
-      padding: calc(var(--spacing-desktop-component-padding) + var(--spacing-desktop-component-gap) - 1px);
-    }
-  }
   .desktop\:p-\[calc\(var\(--spacing-desktop-component-padding\)_-_1px\)\] {
     @container root (width >= 48rem) {
       padding: calc(var(--spacing-desktop-component-padding) - 1px);
@@ -3938,11 +3884,21 @@
       padding-inline: var(--spacing-desktop-container-padding);
     }
   }
+  .desktop\:px-desktop-layout-group-gap {
+    @container root (width >= 48rem) {
+      padding-inline: var(--spacing-desktop-layout-group-gap);
+    }
+  }
   .desktop\:px-desktop-layout-padding {
     @container root (width >= 48rem) {
       padding-inline: var(--spacing-desktop-layout-padding);
     }
   }
+  .desktop\:py-\[calc\(var\(--spacing-desktop-component-padding\)_\+_3px\)\] {
+    @container root (width >= 48rem) {
+      padding-block: calc(var(--spacing-desktop-component-padding) + 3px);
+    }
+  }
   .desktop\:py-desktop-component-gap {
     @container root (width >= 48rem) {
       padding-block: var(--spacing-desktop-component-gap);
@@ -4279,7 +4235,6 @@ body {
 @property --tw-rotate-z { syntax: "*"; inherits: false; }
 @property --tw-skew-x { syntax: "*"; inherits: false; }
 @property --tw-skew-y { syntax: "*"; inherits: false; }
-@property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-divide-x-reverse { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
@@ -4344,7 +4299,6 @@ body {
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
-      --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
       --tw-divide-x-reverse: 0;
       --tw-border-style: solid;

package/package.json

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

package/src/classNames.ts

@@ -79,6 +79,10 @@ export const paddingUsingComponentGap = clsx(
   "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap",
 );
 
+export const paddingXUsingLayoutGroupGap = clsx(
+  "px-mobile-layout-group-gap desktop:px-desktop-layout-group-gap compact:px-desktop-compact-layout-group-gap",
+);
+
 export const paddingYUsingLayoutGroupGap = clsx(
   "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap",
 );
@@ -91,6 +95,10 @@ export const componentPaddingBottom = clsx(
   "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding",
 );
 
+export const componentPaddingX = clsx(
+  "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding"
+)
+
 export const componentPaddingY = clsx(
   "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
 );
@@ -111,6 +119,10 @@ export const 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)]",
 );
 
+export const layoutPaddding = clsx(
+  "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding"
+);
+
 export const layoutPaddingBottom = clsx(
   "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding",
 );

package/src/components/Breadcrumbs.tsx

@@ -20,7 +20,10 @@ type BreadcrumbProps = {
 
 export const Breadcrumb = ({ href, children, onClick }: BreadcrumbProps) => {
   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 (
@@ -74,9 +77,9 @@ export const Breadcrumbs = ({
       className={clsx(
         "relative select-none flex items-center  max-w-full w-full",
         {
-          "bg-white rounded-base shadow-4 px-desktop-layout-padding":
+          "bg-white rounded-base shadow-4 px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding":
             asCardStyle,
-          "px-desktop-container-padding": !asCardStyle,
+          "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding": !asCardStyle,
         },
       )}
       aria-label="Breadcrumb"