@dmsi/wedgekit-react 0.0.15 → 0.0.16

package/dist/components/Modal.cjs

@@ -63,7 +63,7 @@ __export(Modal_exports, {
   Modal: () => Modal
 });
 module.exports = __toCommonJS(Modal_exports);
-var import_clsx7 = __toESM(require("clsx"), 1);
+var import_clsx9 = __toESM(require("clsx"), 1);
 var import_react3 = require("react");
 
 // src/components/Heading.tsx
@@ -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"
 );
@@ -399,6 +408,7 @@ function Icon(_a) {
 }
 
 // src/components/ModalHeader.tsx
+var import_clsx5 = __toESM(require("clsx"), 1);
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var ModalHeader = ({
   title,
@@ -406,8 +416,12 @@ var ModalHeader = ({
   headerIcon,
   onClose
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx5.default)(
+    "flex justify-between items-center",
+    layoutPaddding,
+    layoutGroupGap
+  ), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx5.default)("flex items-center", layoutGroupGap), children: [
       headerIcon,
       title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Heading2, { as: "p", children: title })
     ] }),
@@ -425,7 +439,7 @@ var ModalHeader = ({
 ModalHeader.displayName = "ModalHeader";
 
 // src/components/ModalContent.tsx
-var import_clsx5 = __toESM(require("clsx"), 1);
+var import_clsx6 = __toESM(require("clsx"), 1);
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function ModalContent({
   fixedHeightScrolling,
@@ -434,8 +448,9 @@ function ModalContent({
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
-      className: (0, import_clsx5.default)(
-        "flex-grow desktop:flex-grow-0 p-4",
+      className: (0, import_clsx6.default)(
+        "flex-grow desktop:flex-grow-0",
+        layoutPaddding,
         fixedHeightScrolling && "overflow-auto"
       ),
       children
@@ -445,13 +460,14 @@ function ModalContent({
 ModalContent.displayName = "ModalContent";
 
 // src/components/ModalButtons.tsx
+var import_clsx7 = __toESM(require("clsx"), 1);
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var ModalButtons = ({
   onClose,
   onContinue,
   customActions
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "border-t border-neutral-300 p-4 flex justify-end space-x-2", children: customActions != null ? customActions : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_clsx7.default)("border-t border-neutral-300 flex justify-end", layoutPaddding, layoutGroupGap), children: customActions != null ? customActions : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       Button,
       {
@@ -477,7 +493,7 @@ var ModalButtons = ({
 ModalButtons.displayName = "ModalButtons";
 
 // src/components/ModalScrim.tsx
-var import_clsx6 = __toESM(require("clsx"), 1);
+var import_clsx8 = __toESM(require("clsx"), 1);
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var ModalScrim = ({
   show = false,
@@ -489,7 +505,7 @@ var ModalScrim = ({
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
-      className: (0, import_clsx6.default)(
+      className: (0, import_clsx8.default)(
         "overflow-y-auto h-screen transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center desktop:p-4 group bg-neutral-600/50 fixed opacity-0",
         !show && " pointer-events-none",
         size === "small" && "p-4",
@@ -742,7 +758,7 @@ var Modal = ({
           "div",
           {
             ref: modalRef,
-            className: (0, import_clsx7.default)(
+            className: (0, import_clsx9.default)(
               "bg-white shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
               computedFixedHeightScrolling && "desktop:max-h-[calc(100vh-32px)] desktop:h-auto",
               className,

package/dist/components/Modal.js

@@ -4,26 +4,26 @@ import {
 } from "../chunk-4RJKB7LC.js";
 import {
   ModalButtons
-} from "../chunk-6ZY524ID.js";
+} from "../chunk-DBYSGYST.js";
 import {
   ModalContent
-} from "../chunk-Q3FKEKIN.js";
+} from "../chunk-WIDBAFBU.js";
 import {
   ModalHeader
-} from "../chunk-XUIPGYP5.js";
+} from "../chunk-UK3WG7HQ.js";
 import {
   ModalScrim
 } from "../chunk-TU55CHXU.js";
-import "../chunk-TYI74BSP.js";
+import "../chunk-TJ44JJCB.js";
 import {
   useMatchesMobile
 } from "../chunk-SEKKGFM6.js";
 import {
   findDocumentRoot
 } from "../chunk-4T7F5BZZ.js";
-import "../chunk-KENSVWOY.js";
+import "../chunk-T6HZARR7.js";
 import "../chunk-IGQVA7SC.js";
-import "../chunk-KX3O6GJ6.js";
+import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 
 // src/components/Modal.tsx

package/dist/components/ModalButtons.cjs

@@ -62,6 +62,7 @@ __export(ModalButtons_exports, {
   ModalButtons: () => ModalButtons
 });
 module.exports = __toCommonJS(ModalButtons_exports);
+var import_clsx4 = __toESM(require("clsx"), 1);
 
 // src/components/Button.tsx
 var import_clsx2 = __toESM(require("clsx"), 1);
@@ -134,6 +135,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 +147,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 +165,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"
 );
@@ -355,7 +365,7 @@ var ModalButtons = ({
   onContinue,
   customActions
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "border-t border-neutral-300 p-4 flex justify-end space-x-2", children: customActions != null ? customActions : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_clsx4.default)("border-t border-neutral-300 flex justify-end", layoutPaddding, layoutGroupGap), children: customActions != null ? customActions : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       Button,
       {

package/dist/components/ModalButtons.js

@@ -1,9 +1,9 @@
 import {
   ModalButtons
-} from "../chunk-6ZY524ID.js";
-import "../chunk-KENSVWOY.js";
+} from "../chunk-DBYSGYST.js";
+import "../chunk-T6HZARR7.js";
 import "../chunk-IGQVA7SC.js";
-import "../chunk-KX3O6GJ6.js";
+import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {
   ModalButtons

package/dist/components/ModalContent.cjs

@@ -33,7 +33,135 @@ __export(ModalContent_exports, {
   ModalContent: () => ModalContent
 });
 module.exports = __toCommonJS(ModalContent_exports);
+var import_clsx2 = __toESM(require("clsx"), 1);
+
+// src/classNames.ts
 var import_clsx = __toESM(require("clsx"), 1);
+var typography = {
+  display1: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-display-1-mobile desktop:text-display-1-desktop compact:text-display-1-desktop-compact",
+    "leading-display-1-mobile desktop:leading-display-1-desktop"
+  ),
+  display2: (0, import_clsx.default)(
+    "font-sans font-bold",
+    "text-display-2-mobile desktop:text-display-2-desktop compact:text-display-2-desktop-compact",
+    "leading-display-2-mobile desktop:leading-display-2-desktop"
+  ),
+  heading1: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-heading-1-mobile desktop:text-heading-1-desktop compact:text-heading-1-desktop-compact",
+    "leading-heading-1-mobile desktop:leading-heading-1-desktop"
+  ),
+  heading2: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-heading-2-mobile desktop:text-heading-2-desktop compact:text-heading-2-desktop-compact",
+    "leading-heading-2-mobile desktop:leading-heading-2-desktop"
+  ),
+  heading3: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-heading-3-mobile desktop:text-heading-3-desktop compact:text-heading-3-desktop-compact",
+    "leading-heading-3-mobile desktop:leading-heading-3-desktop"
+  ),
+  subheader: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-subheader-mobile desktop:text-subheader-desktop compact:text-subheader-desktop-compact",
+    "leading-subheader-mobile desktop:leading-subheader-desktop"
+  ),
+  link: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-link-mobile desktop:text-link-desktop compact:text-link-desktop-compact",
+    "leading-link-mobile desktop:leading-link-desktop"
+  ),
+  buttonLabel: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop"
+  ),
+  label: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop"
+  ),
+  paragraph: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
+    "leading-paragraph-mobile desktop:leading-paragraph-desktop"
+  ),
+  caption: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-caption-mobile desktop:text-caption-desktop compact:text-caption-desktop-compact",
+    "leading-caption-mobile desktop:leading-caption-desktop"
+  )
+};
+var baseTransition = (0, import_clsx.default)(
+  "transition-colors duration-100 ease-in-out"
+);
+var componentGap = (0, import_clsx.default)(
+  "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap"
+);
+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"
+);
+var componentPadding = (0, import_clsx.default)(
+  "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
+);
+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"
+);
+var componentPaddingXUsingComponentGap = (0, import_clsx.default)(
+  "px-mobile-component-gap desktop:px-desktop-component-gap compact:px-desktop-compact-component-gap"
+);
+var componentPaddingYUsingComponentGap = (0, import_clsx.default)(
+  "py-mobile-component-gap desktop:py-desktop-component-gap compact:py-desktop-compact-component-gap"
+);
+var componentPaddingMinusBorder = (0, import_clsx.default)(
+  "p-[calc(var(--spacing-mobile-component-padding)_-_1px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_1px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_1px)]"
+);
+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"
+);
+var layoutPaddingY = (0, import_clsx.default)(
+  "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-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"
+);
+var containerPaddingY = (0, import_clsx.default)(
+  "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding"
+);
+var layoutGroupGapPaddingY = (0, import_clsx.default)(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
+);
+var layoutGroupGap = (0, import_clsx.default)(
+  "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap"
+);
+var layoutGap = (0, import_clsx.default)(
+  "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap"
+);
+var gapUsingContainerPadding = (0, import_clsx.default)(
+  "gap-mobile-container-padding desktop:gap-desktop-container-padding compact:gap-desktop-compact-container-padding"
+);
+
+// src/components/ModalContent.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function ModalContent({
   fixedHeightScrolling,
@@ -42,8 +170,9 @@ function ModalContent({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      className: (0, import_clsx.default)(
-        "flex-grow desktop:flex-grow-0 p-4",
+      className: (0, import_clsx2.default)(
+        "flex-grow desktop:flex-grow-0",
+        layoutPaddding,
         fixedHeightScrolling && "overflow-auto"
       ),
       children

package/dist/components/ModalContent.js

@@ -1,6 +1,7 @@
 import {
   ModalContent
-} from "../chunk-Q3FKEKIN.js";
+} from "../chunk-WIDBAFBU.js";
+import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {
   ModalContent

package/dist/components/ModalHeader.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"
 );
@@ -396,6 +405,7 @@ function Icon(_a) {
 }
 
 // src/components/ModalHeader.tsx
+var import_clsx5 = __toESM(require("clsx"), 1);
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var ModalHeader = ({
   title,
@@ -403,8 +413,12 @@ var ModalHeader = ({
   headerIcon,
   onClose
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx5.default)(
+    "flex justify-between items-center",
+    layoutPaddding,
+    layoutGroupGap
+  ), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx5.default)("flex items-center", layoutGroupGap), children: [
       headerIcon,
       title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Heading2, { as: "p", children: title })
     ] }),

package/dist/components/ModalHeader.js

@@ -1,10 +1,10 @@
 import {
   ModalHeader
-} from "../chunk-XUIPGYP5.js";
-import "../chunk-TYI74BSP.js";
-import "../chunk-KENSVWOY.js";
+} from "../chunk-UK3WG7HQ.js";
+import "../chunk-TJ44JJCB.js";
+import "../chunk-T6HZARR7.js";
 import "../chunk-IGQVA7SC.js";
-import "../chunk-KX3O6GJ6.js";
+import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {
   ModalHeader

package/dist/components/NavigationTab.cjs

@@ -135,6 +135,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"
 );
@@ -144,6 +147,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"
 );
@@ -159,6 +165,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/NavigationTab.js

@@ -1,9 +1,9 @@
 import {
   NavigationTab
-} from "../chunk-BNHSAFMP.js";
-import "../chunk-KENSVWOY.js";
+} from "../chunk-VELXLFMJ.js";
+import "../chunk-T6HZARR7.js";
 import "../chunk-IGQVA7SC.js";
-import "../chunk-KX3O6GJ6.js";
+import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {
   NavigationTab

package/dist/components/NavigationTabs.cjs

@@ -140,6 +140,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"
 );
@@ -149,6 +152,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"
 );
@@ -164,6 +170,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/NavigationTabs.js

@@ -1,12 +1,12 @@
 "use client";
 import {
   NavigationTab
-} from "../chunk-BNHSAFMP.js";
-import "../chunk-KENSVWOY.js";
+} from "../chunk-VELXLFMJ.js";
+import "../chunk-T6HZARR7.js";
 import "../chunk-IGQVA7SC.js";
 import {
   componentGap
-} from "../chunk-KX3O6GJ6.js";
+} from "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 
 // src/components/NavigationTabs.tsx

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

@@ -4,17 +4,17 @@ import {
 } from "../chunk-U42SKNR6.js";
 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 "../chunk-RDLEIAQU.js";
 import {
   __objRest,
   __spreadProps,

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

@@ -1,10 +1,10 @@
 import {
   OptionPill
-} from "../chunk-TWZZB4WO.js";
-import "../chunk-4C66DLIJ.js";
-import "../chunk-KENSVWOY.js";
+} from "../chunk-Z2LOGSGE.js";
+import "../chunk-S7R37IUP.js";
+import "../chunk-T6HZARR7.js";
 import "../chunk-IGQVA7SC.js";
-import "../chunk-KX3O6GJ6.js";
+import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {
   OptionPill