@dmsi/wedgekit-react 0.0.369 → 0.0.371

package/dist/components/ProductImagePreview/index.js

@@ -0,0 +1,22 @@
+import {
+  ProductImagePreview
+} from "../../chunk-JGJUVJKD.js";
+import "../../chunk-HPQWEZJL.js";
+import "../../chunk-BQNPOGD5.js";
+import "../../chunk-MBZ55T2D.js";
+import "../../chunk-2IKT6IHB.js";
+import "../../chunk-CQFPNZTN.js";
+import "../../chunk-AT4AWD6B.js";
+import "../../chunk-SBRRNFOP.js";
+import "../../chunk-ER6RCOH3.js";
+import "../../chunk-QVWYTQKL.js";
+import "../../chunk-JUJBS4ZV.js";
+import "../../chunk-VXWSAIB5.js";
+import "../../chunk-TYTD4FLW.js";
+import "../../chunk-5UH6QUFB.js";
+import "../../chunk-V6U7LU6M.js";
+import "../../chunk-6CTCHYIS.js";
+import "../../chunk-ORMEWXMH.js";
+export {
+  ProductImagePreview
+};

package/dist/components/Search.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   Search
-} from "../chunk-6GAYJCFE.js";
-import "../chunk-RJUN52HJ.js";
-import "../chunk-5UH6QUFB.js";
+} from "../chunk-6DPFKSCT.js";
+import "../chunk-ZL5X7KP6.js";
 import "../chunk-7CS736EF.js";
+import "../chunk-5UH6QUFB.js";
 import "../chunk-NKUETCDA.js";
 import "../chunk-6CTCHYIS.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/Select.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   Select
-} from "../chunk-I3WFZOFY.js";
-import "../chunk-RJUN52HJ.js";
-import "../chunk-5UH6QUFB.js";
+} from "../chunk-J5V2JRIK.js";
+import "../chunk-ZL5X7KP6.js";
 import "../chunk-7CS736EF.js";
+import "../chunk-5UH6QUFB.js";
 import "../chunk-NKUETCDA.js";
 import "../chunk-6CTCHYIS.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/SideMenuGroup.cjs

@@ -306,7 +306,9 @@ var Stack = (_a) => {
     noGap,
     marginTop,
     marginBottom,
-    testid
+    testid,
+    bottom,
+    zIndex
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -343,8 +345,11 @@ var Stack = (_a) => {
     "noGap",
     "marginTop",
     "marginBottom",
-    "testid"
+    "testid",
+    "bottom",
+    "zIndex"
   ]);
+  var _a2, _b2, _c, _d, _e;
   const flexClassNames = getFlexClassNames({ items, justify, grow });
   const gapClassNames = useGapClassNames(sizing);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -355,9 +360,9 @@ var Stack = (_a) => {
     }, props), {
       style: {
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
-        maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : void 0,
-        minHeight: minHeight !== void 0 ? `${minHeight}px` : void 0,
-        maxWidth: maxWidth !== void 0 ? `${maxWidth}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,
+        minHeight: minHeight !== void 0 ? isNaN(+minHeight) ? minHeight : `${minHeight}px` : (_c = props.style) == null ? void 0 : _c.minHeight,
         width: width !== void 0 && typeof width === "number" ? `${width}px` : void 0,
         minWidth: minWidth !== void 0 ? `${minWidth}px` : void 0,
         border: borderColor ? `1px solid var(--color-${borderColor})` : void 0,
@@ -366,7 +371,11 @@ var Stack = (_a) => {
         flexShrink: flexShrink !== void 0 ? flexShrink : void 0,
         position: position !== void 0 ? position : void 0,
         top: top !== void 0 ? `${top}px` : void 0,
-        left: left !== void 0 ? `${left}px` : void 0
+        bottom: bottom !== void 0 ? `${bottom}px` : void 0,
+        left: left !== void 0 ? `${left}px` : void 0,
+        borderBlock: (_d = props.style) == null ? void 0 : _d.borderBlock,
+        marginInline: (_e = props.style) == null ? void 0 : _e.marginInline,
+        zIndex: zIndex !== void 0 ? zIndex : void 0
       },
       className: (0, import_clsx3.default)(
         "scrollbar-thin",

package/dist/components/SideMenuGroup.js

@@ -4,7 +4,7 @@ import {
 } from "../chunk-7CS736EF.js";
 import {
   Stack
-} from "../chunk-NQXZBWDZ.js";
+} from "../chunk-V6U7LU6M.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";

package/dist/components/SideMenuItem.cjs

@@ -258,7 +258,9 @@ var Stack = (_a) => {
     noGap,
     marginTop,
     marginBottom,
-    testid
+    testid,
+    bottom,
+    zIndex
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -295,8 +297,11 @@ var Stack = (_a) => {
     "noGap",
     "marginTop",
     "marginBottom",
-    "testid"
+    "testid",
+    "bottom",
+    "zIndex"
   ]);
+  var _a2, _b2, _c, _d, _e;
   const flexClassNames = getFlexClassNames({ items, justify, grow });
   const gapClassNames = useGapClassNames(sizing);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -307,9 +312,9 @@ var Stack = (_a) => {
     }, props), {
       style: {
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
-        maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : void 0,
-        minHeight: minHeight !== void 0 ? `${minHeight}px` : void 0,
-        maxWidth: maxWidth !== void 0 ? `${maxWidth}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,
+        minHeight: minHeight !== void 0 ? isNaN(+minHeight) ? minHeight : `${minHeight}px` : (_c = props.style) == null ? void 0 : _c.minHeight,
         width: width !== void 0 && typeof width === "number" ? `${width}px` : void 0,
         minWidth: minWidth !== void 0 ? `${minWidth}px` : void 0,
         border: borderColor ? `1px solid var(--color-${borderColor})` : void 0,
@@ -318,7 +323,11 @@ var Stack = (_a) => {
         flexShrink: flexShrink !== void 0 ? flexShrink : void 0,
         position: position !== void 0 ? position : void 0,
         top: top !== void 0 ? `${top}px` : void 0,
-        left: left !== void 0 ? `${left}px` : void 0
+        bottom: bottom !== void 0 ? `${bottom}px` : void 0,
+        left: left !== void 0 ? `${left}px` : void 0,
+        borderBlock: (_d = props.style) == null ? void 0 : _d.borderBlock,
+        marginInline: (_e = props.style) == null ? void 0 : _e.marginInline,
+        zIndex: zIndex !== void 0 ? zIndex : void 0
       },
       className: (0, import_clsx2.default)(
         "scrollbar-thin",

package/dist/components/SideMenuItem.js

@@ -1,6 +1,6 @@
 import {
   Stack
-} from "../chunk-NQXZBWDZ.js";
+} from "../chunk-V6U7LU6M.js";
 import {
   Paragraph
 } from "../chunk-OGIFIPKH.js";

package/dist/components/SkeletonParagraph.cjs

@@ -0,0 +1,33 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/SkeletonParagraph.tsx
+var SkeletonParagraph_exports = {};
+__export(SkeletonParagraph_exports, {
+  SkeletonParagraph: () => SkeletonParagraph
+});
+module.exports = __toCommonJS(SkeletonParagraph_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function SkeletonParagraph() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-[24px] bg-gradient-to-r from-neutral-100 to-[#f7f7f7] w-full rounded-xs min-w-32 " });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SkeletonParagraph
+});

package/dist/components/SkeletonParagraph.js

@@ -0,0 +1,10 @@
+import "../chunk-ORMEWXMH.js";
+
+// src/components/SkeletonParagraph.tsx
+import { jsx } from "react/jsx-runtime";
+function SkeletonParagraph() {
+  return /* @__PURE__ */ jsx("div", { className: "h-[24px] bg-gradient-to-r from-neutral-100 to-[#f7f7f7] w-full rounded-xs min-w-32 " });
+}
+export {
+  SkeletonParagraph
+};

package/dist/components/Stack.cjs

@@ -257,7 +257,9 @@ var Stack = (_a) => {
     noGap,
     marginTop,
     marginBottom,
-    testid
+    testid,
+    bottom,
+    zIndex
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -294,8 +296,11 @@ var Stack = (_a) => {
     "noGap",
     "marginTop",
     "marginBottom",
-    "testid"
+    "testid",
+    "bottom",
+    "zIndex"
   ]);
+  var _a2, _b2, _c, _d, _e;
   const flexClassNames = getFlexClassNames({ items, justify, grow });
   const gapClassNames = useGapClassNames(sizing);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -306,9 +311,9 @@ var Stack = (_a) => {
     }, props), {
       style: {
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
-        maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : void 0,
-        minHeight: minHeight !== void 0 ? `${minHeight}px` : void 0,
-        maxWidth: maxWidth !== void 0 ? `${maxWidth}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,
+        minHeight: minHeight !== void 0 ? isNaN(+minHeight) ? minHeight : `${minHeight}px` : (_c = props.style) == null ? void 0 : _c.minHeight,
         width: width !== void 0 && typeof width === "number" ? `${width}px` : void 0,
         minWidth: minWidth !== void 0 ? `${minWidth}px` : void 0,
         border: borderColor ? `1px solid var(--color-${borderColor})` : void 0,
@@ -317,7 +322,11 @@ var Stack = (_a) => {
         flexShrink: flexShrink !== void 0 ? flexShrink : void 0,
         position: position !== void 0 ? position : void 0,
         top: top !== void 0 ? `${top}px` : void 0,
-        left: left !== void 0 ? `${left}px` : void 0
+        bottom: bottom !== void 0 ? `${bottom}px` : void 0,
+        left: left !== void 0 ? `${left}px` : void 0,
+        borderBlock: (_d = props.style) == null ? void 0 : _d.borderBlock,
+        marginInline: (_e = props.style) == null ? void 0 : _e.marginInline,
+        zIndex: zIndex !== void 0 ? zIndex : void 0
       },
       className: (0, import_clsx2.default)(
         "scrollbar-thin",

package/dist/components/Stack.js

@@ -1,6 +1,6 @@
 import {
   Stack
-} from "../chunk-NQXZBWDZ.js";
+} from "../chunk-V6U7LU6M.js";
 import "../chunk-6CTCHYIS.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/Stepper.cjs

@@ -886,66 +886,74 @@ var Stepper = (_a) => {
     setValue((prevVal) => prevVal - 1);
     onDecrease == null ? void 0 : onDecrease();
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { id, "data-testid": testid, className: (0, import_clsx6.default)("flex items-center", componentGap), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      Button,
-      {
-        id: id ? `${id}-decrease-button` : void 0,
-        testid: testid ? `${testid}-decrease-button` : void 0,
-        iconOnly: true,
-        variant: "tertiary",
-        leftIcon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "span",
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      id,
+      "data-testid": testid,
+      className: (0, import_clsx6.default)("flex items-center", componentGap),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          Button,
           {
-            className: (0, import_clsx6.default)(
-              !disabled || value > 0 && "text-icon-action-primary-normal",
-              disabled || value === 0 && "text-icon-action-primary-disabled",
-              "contents"
+            id: id ? `${id}-decrease-button` : void 0,
+            testid: testid ? `${testid}-decrease-button` : void 0,
+            iconOnly: true,
+            variant: "tertiary",
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "span",
+              {
+                className: (0, import_clsx6.default)(
+                  !disabled || value > 0 && "text-icon-action-primary-normal",
+                  disabled || value === 0 && "text-icon-action-primary-disabled",
+                  "contents"
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "remove" })
+              }
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "remove" })
+            onClick: handleDecrease,
+            disabled: disabled || value === 0
           }
         ),
-        onClick: handleDecrease,
-        disabled: disabled || value === 0
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      InputBase,
-      __spreadProps(__spreadValues({}, props), {
-        id: id ? `${id}-input` : void 0,
-        testid: testid ? `${testid}-input` : void 0,
-        type: "number",
-        align: "center",
-        value,
-        onChange: (e) => setValue(+e.target.value),
-        error,
-        disabled,
-        className: "!w-6 !h-4.5 !px-0 disabled:!text-text-on-action-primary-disabled disabled:!bg-background-action-secondary-disabled disabled:!border-border-primary-normal"
-      })
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      Button,
-      {
-        id: id ? `${id}-increase-button` : void 0,
-        testid: testid ? `${testid}-increase-button` : void 0,
-        iconOnly: true,
-        variant: "tertiary",
-        leftIcon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "span",
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          InputBase,
+          __spreadProps(__spreadValues({}, props), {
+            id: id ? `${id}-input` : void 0,
+            testid: testid ? `${testid}-input` : void 0,
+            type: "number",
+            align: "center",
+            value,
+            onChange: (e) => setValue(+e.target.value),
+            error,
+            disabled,
+            className: "!w-6 !h-4.5 !px-0 disabled:!text-text-on-action-primary-disabled disabled:!bg-background-action-secondary-disabled disabled:!border-border-primary-normal"
+          })
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          Button,
           {
-            className: (0, import_clsx6.default)(
-              !disabled && "text-icon-action-primary-normal",
-              disabled && "text-icon-action-primary-disabled",
-              "contents"
+            id: id ? `${id}-increase-button` : void 0,
+            testid: testid ? `${testid}-increase-button` : void 0,
+            iconOnly: true,
+            variant: "tertiary",
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "span",
+              {
+                className: (0, import_clsx6.default)(
+                  !disabled && "text-icon-action-primary-normal",
+                  disabled && "text-icon-action-primary-disabled",
+                  "contents"
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "add" })
+              }
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "add" })
+            onClick: handleIncrease,
+            disabled
           }
-        ),
-        onClick: handleIncrease,
-        disabled
-      }
-    )
-  ] });
+        )
+      ]
+    }
+  );
 };
 Stepper.displayName = "Stepper";
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/Stepper.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   InputBase
-} from "../chunk-RJUN52HJ.js";
-import "../chunk-5UH6QUFB.js";
+} from "../chunk-ZL5X7KP6.js";
 import "../chunk-7CS736EF.js";
+import "../chunk-5UH6QUFB.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";
@@ -50,66 +50,74 @@ var Stepper = (_a) => {
     setValue((prevVal) => prevVal - 1);
     onDecrease == null ? void 0 : onDecrease();
   }
-  return /* @__PURE__ */ jsxs("div", { id, "data-testid": testid, className: clsx("flex items-center", componentGap), children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        id: id ? `${id}-decrease-button` : void 0,
-        testid: testid ? `${testid}-decrease-button` : void 0,
-        iconOnly: true,
-        variant: "tertiary",
-        leftIcon: /* @__PURE__ */ jsx(
-          "span",
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      "data-testid": testid,
+      className: clsx("flex items-center", componentGap),
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
           {
-            className: clsx(
-              !disabled || value > 0 && "text-icon-action-primary-normal",
-              disabled || value === 0 && "text-icon-action-primary-disabled",
-              "contents"
+            id: id ? `${id}-decrease-button` : void 0,
+            testid: testid ? `${testid}-decrease-button` : void 0,
+            iconOnly: true,
+            variant: "tertiary",
+            leftIcon: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: clsx(
+                  !disabled || value > 0 && "text-icon-action-primary-normal",
+                  disabled || value === 0 && "text-icon-action-primary-disabled",
+                  "contents"
+                ),
+                children: /* @__PURE__ */ jsx(Icon, { name: "remove" })
+              }
             ),
-            children: /* @__PURE__ */ jsx(Icon, { name: "remove" })
+            onClick: handleDecrease,
+            disabled: disabled || value === 0
           }
         ),
-        onClick: handleDecrease,
-        disabled: disabled || value === 0
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
-      InputBase,
-      __spreadProps(__spreadValues({}, props), {
-        id: id ? `${id}-input` : void 0,
-        testid: testid ? `${testid}-input` : void 0,
-        type: "number",
-        align: "center",
-        value,
-        onChange: (e) => setValue(+e.target.value),
-        error,
-        disabled,
-        className: "!w-6 !h-4.5 !px-0 disabled:!text-text-on-action-primary-disabled disabled:!bg-background-action-secondary-disabled disabled:!border-border-primary-normal"
-      })
-    ) }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        id: id ? `${id}-increase-button` : void 0,
-        testid: testid ? `${testid}-increase-button` : void 0,
-        iconOnly: true,
-        variant: "tertiary",
-        leftIcon: /* @__PURE__ */ jsx(
-          "span",
+        /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+          InputBase,
+          __spreadProps(__spreadValues({}, props), {
+            id: id ? `${id}-input` : void 0,
+            testid: testid ? `${testid}-input` : void 0,
+            type: "number",
+            align: "center",
+            value,
+            onChange: (e) => setValue(+e.target.value),
+            error,
+            disabled,
+            className: "!w-6 !h-4.5 !px-0 disabled:!text-text-on-action-primary-disabled disabled:!bg-background-action-secondary-disabled disabled:!border-border-primary-normal"
+          })
+        ) }),
+        /* @__PURE__ */ jsx(
+          Button,
           {
-            className: clsx(
-              !disabled && "text-icon-action-primary-normal",
-              disabled && "text-icon-action-primary-disabled",
-              "contents"
+            id: id ? `${id}-increase-button` : void 0,
+            testid: testid ? `${testid}-increase-button` : void 0,
+            iconOnly: true,
+            variant: "tertiary",
+            leftIcon: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: clsx(
+                  !disabled && "text-icon-action-primary-normal",
+                  disabled && "text-icon-action-primary-disabled",
+                  "contents"
+                ),
+                children: /* @__PURE__ */ jsx(Icon, { name: "add" })
+              }
             ),
-            children: /* @__PURE__ */ jsx(Icon, { name: "add" })
+            onClick: handleIncrease,
+            disabled
           }
-        ),
-        onClick: handleIncrease,
-        disabled
-      }
-    )
-  ] });
+        )
+      ]
+    }
+  );
 };
 Stepper.displayName = "Stepper";
 export {

package/dist/components/Surface.js

@@ -1,43 +1,7 @@
 import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "../chunk-ORMEWXMH.js";
-
-// src/components/Surface.tsx
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-var Surface = (_a) => {
-  var _b = _a, {
-    children,
-    className,
-    elevation = 0,
-    id
-  } = _b, props = __objRest(_b, [
-    "children",
-    "className",
-    "elevation",
-    "id"
-  ]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    __spreadProps(__spreadValues({
-      id,
-      className: clsx(
-        "rounded-base",
-        {
-          "shadow-2": elevation === 2,
-          "shadow-4": elevation === 4,
-          "shadow-16": elevation === 16
-        },
-        className
-      )
-    }, props), {
-      children
-    })
-  );
-};
-Surface.displayName = "Surface";
+  Surface
+} from "../chunk-AT4AWD6B.js";
+import "../chunk-ORMEWXMH.js";
 export {
   Surface
 };

package/dist/components/Swatch.cjs

@@ -311,7 +311,9 @@ var Stack = (_a) => {
     noGap,
     marginTop,
     marginBottom,
-    testid
+    testid,
+    bottom,
+    zIndex
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -348,8 +350,11 @@ var Stack = (_a) => {
     "noGap",
     "marginTop",
     "marginBottom",
-    "testid"
+    "testid",
+    "bottom",
+    "zIndex"
   ]);
+  var _a2, _b2, _c, _d, _e;
   const flexClassNames = getFlexClassNames({ items, justify, grow });
   const gapClassNames = useGapClassNames(sizing);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -360,9 +365,9 @@ var Stack = (_a) => {
     }, props), {
       style: {
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
-        maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : void 0,
-        minHeight: minHeight !== void 0 ? `${minHeight}px` : void 0,
-        maxWidth: maxWidth !== void 0 ? `${maxWidth}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,
+        minHeight: minHeight !== void 0 ? isNaN(+minHeight) ? minHeight : `${minHeight}px` : (_c = props.style) == null ? void 0 : _c.minHeight,
         width: width !== void 0 && typeof width === "number" ? `${width}px` : void 0,
         minWidth: minWidth !== void 0 ? `${minWidth}px` : void 0,
         border: borderColor ? `1px solid var(--color-${borderColor})` : void 0,
@@ -371,7 +376,11 @@ var Stack = (_a) => {
         flexShrink: flexShrink !== void 0 ? flexShrink : void 0,
         position: position !== void 0 ? position : void 0,
         top: top !== void 0 ? `${top}px` : void 0,
-        left: left !== void 0 ? `${left}px` : void 0
+        bottom: bottom !== void 0 ? `${bottom}px` : void 0,
+        left: left !== void 0 ? `${left}px` : void 0,
+        borderBlock: (_d = props.style) == null ? void 0 : _d.borderBlock,
+        marginInline: (_e = props.style) == null ? void 0 : _e.marginInline,
+        zIndex: zIndex !== void 0 ? zIndex : void 0
       },
       className: (0, import_clsx3.default)(
         "scrollbar-thin",