@dmsi/wedgekit-react 0.0.26 → 0.0.28

package/dist/components/Modal.cjs

@@ -204,20 +204,23 @@ var Heading = (_a) => {
     as,
     color,
     align,
-    variant = "heading1"
+    variant = "heading1",
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "children",
     "as",
     "color",
     "align",
-    "variant"
+    "variant",
+    "id"
   ]);
   const defaultElement = variant === "heading1" ? "h1" : variant === "heading2" ? "h2" : "h3";
   const Element = as != null ? as : defaultElement;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       className: (0, import_clsx2.default)(
         typography[variant],
         className,
@@ -257,7 +260,8 @@ var Button = (_a) => {
     children,
     iconOnly = false,
     colorClassName,
-    href
+    href,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -270,7 +274,8 @@ var Button = (_a) => {
     "children",
     "iconOnly",
     "colorClassName",
-    "href"
+    "href",
+    "id"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx3.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -360,6 +365,7 @@ var Button = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -367,7 +373,7 @@ var Button = (_a) => {
       href,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: labelClasses, children }),
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -414,27 +420,36 @@ var ModalHeader = ({
   title,
   hideCloseIcon,
   headerIcon,
-  onClose
+  onClose,
+  id
 }) => {
-  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 })
-    ] }),
-    !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      Button,
-      {
-        iconOnly: true,
-        variant: "tertiary",
-        onClick: onClose,
-        leftIcon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "close", size: 24 }) })
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      id,
+      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, { id: id ? `${id}-title` : void 0, as: "p", children: title })
+        ] }),
+        !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Button,
+          {
+            id: id ? `${id}-close-button` : void 0,
+            iconOnly: true,
+            variant: "tertiary",
+            onClick: onClose,
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "close", size: 24 }) })
+          }
+        )
+      ]
+    }
+  );
 };
 ModalHeader.displayName = "ModalHeader";
 
@@ -443,11 +458,13 @@ var import_clsx6 = __toESM(require("clsx"), 1);
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function ModalContent({
   fixedHeightScrolling,
-  children
+  children,
+  id
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
+      id,
       className: (0, import_clsx6.default)(
         "flex-grow desktop:flex-grow-0",
         layoutPaddding,
@@ -465,30 +482,44 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 var ModalButtons = ({
   onClose,
   onContinue,
-  customActions
+  customActions,
+  id
 }) => {
-  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,
-      {
-        variant: "secondary",
-        leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "close", size: 24 }),
-        onClick: onClose,
-        className: "max-sm:w-full",
-        children: "Close"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      Button,
-      {
-        variant: "primary",
-        leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "check", size: 24 }),
-        className: "max-sm:w-full",
-        onClick: onContinue,
-        children: "Continue"
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      id,
+      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,
+          {
+            id: id ? `${id}-close-button` : void 0,
+            variant: "secondary",
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "close", size: 24 }),
+            onClick: onClose,
+            className: "max-sm:w-full",
+            children: "Close"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          Button,
+          {
+            id: id ? `${id}-continue-button` : void 0,
+            variant: "primary",
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "check", size: 24 }),
+            className: "max-sm:w-full",
+            onClick: onContinue,
+            children: "Continue"
+          }
+        )
+      ] })
+    }
+  );
 };
 ModalButtons.displayName = "ModalButtons";
 
@@ -500,11 +531,13 @@ var ModalScrim = ({
   size = "small",
   children,
   onClick,
-  ref
+  ref,
+  id
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
+      id,
       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",
@@ -643,6 +676,7 @@ var sizes = {
   }
 };
 var Modal = ({
+  id,
   title,
   open = false,
   size = "small",
@@ -750,6 +784,7 @@ var Modal = ({
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       ModalScrim,
       {
+        id: id ? `${id}-scrim` : void 0,
         size,
         ref: bgRef,
         show: open,
@@ -757,6 +792,7 @@ var Modal = ({
         children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
+            id,
             ref: modalRef,
             className: (0, import_clsx9.default)(
               "bg-white shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
@@ -769,16 +805,25 @@ var Modal = ({
               /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 ModalHeader,
                 {
+                  id: id ? `${id}-header` : void 0,
                   title,
                   onClose: handleClose,
                   hideCloseIcon,
                   headerIcon
                 }
               ),
-              children && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ModalContent, { fixedHeightScrolling: computedFixedHeightScrolling, children }),
+              children && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                ModalContent,
+                {
+                  id: id ? `${id}-content` : void 0,
+                  fixedHeightScrolling: computedFixedHeightScrolling,
+                  children
+                }
+              ),
               showButtons && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 ModalButtons,
                 {
+                  id: id ? `${id}-buttons` : void 0,
                   onClose: handleClose,
                   onContinue,
                   customActions

package/dist/components/Modal.js

@@ -4,24 +4,24 @@ import {
 } from "../chunk-4RJKB7LC.js";
 import {
   ModalContent
-} from "../chunk-WIDBAFBU.js";
+} from "../chunk-FWPJ73IK.js";
 import {
   ModalHeader
-} from "../chunk-UK3WG7HQ.js";
+} from "../chunk-TVDFTRGL.js";
 import {
   ModalScrim
-} from "../chunk-TU55CHXU.js";
+} from "../chunk-4JLU7TAC.js";
 import {
   ModalButtons
-} from "../chunk-DBYSGYST.js";
-import "../chunk-TJ44JJCB.js";
+} from "../chunk-QUPHLL7D.js";
+import "../chunk-J6LETUNM.js";
 import {
   useMatchesMobile
 } from "../chunk-SEKKGFM6.js";
 import {
   findDocumentRoot
 } from "../chunk-4T7F5BZZ.js";
-import "../chunk-T6HZARR7.js";
+import "../chunk-MZJS2ZAU.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
@@ -90,6 +90,7 @@ var sizes = {
   }
 };
 var Modal = ({
+  id,
   title,
   open = false,
   size = "small",
@@ -197,6 +198,7 @@ var Modal = ({
     /* @__PURE__ */ jsx(
       ModalScrim,
       {
+        id: id ? `${id}-scrim` : void 0,
         size,
         ref: bgRef,
         show: open,
@@ -204,6 +206,7 @@ var Modal = ({
         children: /* @__PURE__ */ jsxs(
           "div",
           {
+            id,
             ref: modalRef,
             className: clsx(
               "bg-white shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
@@ -216,16 +219,25 @@ var Modal = ({
               /* @__PURE__ */ jsx(
                 ModalHeader,
                 {
+                  id: id ? `${id}-header` : void 0,
                   title,
                   onClose: handleClose,
                   hideCloseIcon,
                   headerIcon
                 }
               ),
-              children && /* @__PURE__ */ jsx(ModalContent, { fixedHeightScrolling: computedFixedHeightScrolling, children }),
+              children && /* @__PURE__ */ jsx(
+                ModalContent,
+                {
+                  id: id ? `${id}-content` : void 0,
+                  fixedHeightScrolling: computedFixedHeightScrolling,
+                  children
+                }
+              ),
               showButtons && /* @__PURE__ */ jsx(
                 ModalButtons,
                 {
+                  id: id ? `${id}-buttons` : void 0,
                   onClose: handleClose,
                   onContinue,
                   customActions

package/dist/components/ModalButtons.cjs

@@ -208,7 +208,8 @@ var Button = (_a) => {
     children,
     iconOnly = false,
     colorClassName,
-    href
+    href,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -221,7 +222,8 @@ var Button = (_a) => {
     "children",
     "iconOnly",
     "colorClassName",
-    "href"
+    "href",
+    "id"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx2.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -311,6 +313,7 @@ var Button = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -318,7 +321,7 @@ var Button = (_a) => {
       href,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: labelClasses, children }),
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -363,30 +366,44 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var ModalButtons = ({
   onClose,
   onContinue,
-  customActions
+  customActions,
+  id
 }) => {
-  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,
-      {
-        variant: "secondary",
-        leftIcon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "close", size: 24 }),
-        onClick: onClose,
-        className: "max-sm:w-full",
-        children: "Close"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      Button,
-      {
-        variant: "primary",
-        leftIcon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "check", size: 24 }),
-        className: "max-sm:w-full",
-        onClick: onContinue,
-        children: "Continue"
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      id,
+      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,
+          {
+            id: id ? `${id}-close-button` : void 0,
+            variant: "secondary",
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "close", size: 24 }),
+            onClick: onClose,
+            className: "max-sm:w-full",
+            children: "Close"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Button,
+          {
+            id: id ? `${id}-continue-button` : void 0,
+            variant: "primary",
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "check", size: 24 }),
+            className: "max-sm:w-full",
+            onClick: onContinue,
+            children: "Continue"
+          }
+        )
+      ] })
+    }
+  );
 };
 ModalButtons.displayName = "ModalButtons";
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/ModalButtons.js

@@ -1,7 +1,7 @@
 import {
   ModalButtons
-} from "../chunk-DBYSGYST.js";
-import "../chunk-T6HZARR7.js";
+} from "../chunk-QUPHLL7D.js";
+import "../chunk-MZJS2ZAU.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/ModalContent.cjs

@@ -165,11 +165,13 @@ var gapUsingContainerPadding = (0, import_clsx.default)(
 var import_jsx_runtime = require("react/jsx-runtime");
 function ModalContent({
   fixedHeightScrolling,
-  children
+  children,
+  id
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
+      id,
       className: (0, import_clsx2.default)(
         "flex-grow desktop:flex-grow-0",
         layoutPaddding,

package/dist/components/ModalContent.js

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

package/dist/components/ModalHeader.cjs

@@ -201,20 +201,23 @@ var Heading = (_a) => {
     as,
     color,
     align,
-    variant = "heading1"
+    variant = "heading1",
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "children",
     "as",
     "color",
     "align",
-    "variant"
+    "variant",
+    "id"
   ]);
   const defaultElement = variant === "heading1" ? "h1" : variant === "heading2" ? "h2" : "h3";
   const Element = as != null ? as : defaultElement;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       className: (0, import_clsx2.default)(
         typography[variant],
         className,
@@ -254,7 +257,8 @@ var Button = (_a) => {
     children,
     iconOnly = false,
     colorClassName,
-    href
+    href,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -267,7 +271,8 @@ var Button = (_a) => {
     "children",
     "iconOnly",
     "colorClassName",
-    "href"
+    "href",
+    "id"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx3.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -357,6 +362,7 @@ var Button = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -364,7 +370,7 @@ var Button = (_a) => {
       href,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: labelClasses, children }),
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -411,27 +417,36 @@ var ModalHeader = ({
   title,
   hideCloseIcon,
   headerIcon,
-  onClose
+  onClose,
+  id
 }) => {
-  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 })
-    ] }),
-    !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      Button,
-      {
-        iconOnly: true,
-        variant: "tertiary",
-        onClick: onClose,
-        leftIcon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "close", size: 24 }) })
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      id,
+      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, { id: id ? `${id}-title` : void 0, as: "p", children: title })
+        ] }),
+        !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Button,
+          {
+            id: id ? `${id}-close-button` : void 0,
+            iconOnly: true,
+            variant: "tertiary",
+            onClick: onClose,
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "close", size: 24 }) })
+          }
+        )
+      ]
+    }
+  );
 };
 ModalHeader.displayName = "ModalHeader";
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/ModalHeader.js

@@ -1,8 +1,8 @@
 import {
   ModalHeader
-} from "../chunk-UK3WG7HQ.js";
-import "../chunk-TJ44JJCB.js";
-import "../chunk-T6HZARR7.js";
+} from "../chunk-TVDFTRGL.js";
+import "../chunk-J6LETUNM.js";
+import "../chunk-MZJS2ZAU.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/ModalScrim.cjs

@@ -40,11 +40,13 @@ var ModalScrim = ({
   size = "small",
   children,
   onClick,
-  ref
+  ref,
+  id
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
+      id,
       className: (0, import_clsx.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",

package/dist/components/ModalScrim.js

@@ -1,6 +1,6 @@
 import {
   ModalScrim
-} from "../chunk-TU55CHXU.js";
+} from "../chunk-4JLU7TAC.js";
 import "../chunk-ORMEWXMH.js";
 export {
   ModalScrim