@dmsi/wedgekit-react 0.0.139 → 0.0.141

package/dist/{chunk-OB3URVCR.js → chunk-PMBEIP24.js}

@@ -1,6 +1,6 @@
 import {
   Input
-} from "./chunk-R5TLUWDD.js";
+} from "./chunk-4T3DRGLF.js";
 import {
   __objRest,
   __spreadValues
@@ -17,6 +17,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var Search = (_a) => {
   var _b = _a, {
     id,
+    testid,
     label,
     error,
     children,
@@ -27,6 +28,7 @@ var Search = (_a) => {
     removeRoundness
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "label",
     "error",
     "children",
@@ -56,6 +58,7 @@ var Search = (_a) => {
       Input,
       __spreadValues({
         id,
+        testid,
         variant: "search",
         inputContainerRef,
         ref: inputRef,
@@ -111,6 +114,7 @@ var Search = (_a) => {
     ),
     renderMenu ? renderMenu({
       id: id ? `${id}-menu` : void 0,
+      testid: testid ? `${testid}-menu` : void 0,
       positionTo: inputContainerRef,
       show,
       setShow,

package/dist/{chunk-6UI5GABI.js → chunk-R7ELP5C5.js}

@@ -1,12 +1,12 @@
 import {
   Heading2
-} from "./chunk-J6LETUNM.js";
+} from "./chunk-AZ7LVLOK.js";
 import {
   Button
-} from "./chunk-H6LXXGX6.js";
+} from "./chunk-FKMKHLQH.js";
 import {
   Icon
-} from "./chunk-IGQVA7SC.js";
+} from "./chunk-NKUETCDA.js";
 import {
   layoutGroupGap,
   layoutPaddding
@@ -20,12 +20,14 @@ var ModalHeader = ({
   hideCloseIcon,
   headerIcon,
   onClose,
-  id
+  id,
+  testid
 }) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
       id,
+      "data-testid": testid,
       className: clsx(
         "flex justify-between items-center",
         layoutPaddding,
@@ -34,12 +36,13 @@ var ModalHeader = ({
       children: [
         /* @__PURE__ */ jsxs("div", { className: clsx("flex items-center", layoutGroupGap), children: [
           headerIcon,
-          title && /* @__PURE__ */ jsx(Heading2, { id: id ? `${id}-title` : void 0, as: "p", children: title })
+          title && /* @__PURE__ */ jsx(Heading2, { id: id ? `${id}-title` : void 0, testid: testid ? `${testid}-title` : void 0, as: "p", children: title })
         ] }),
         !hideCloseIcon && /* @__PURE__ */ jsx(
           Button,
           {
             id: id ? `${id}-close-button` : void 0,
+            testid: testid ? `${testid}-close-button` : void 0,
             iconOnly: true,
             variant: "tertiary",
             onClick: onClose,

package/dist/{chunk-FWPJ73IK.js → chunk-SYEJVSE4.js}

@@ -8,12 +8,14 @@ import { jsx } from "react/jsx-runtime";
 function ModalContent({
   fixedHeightScrolling,
   children,
-  id
+  id,
+  testid
 }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
       id,
+      "data-testid": testid,
       className: clsx(
         "flex-grow desktop:flex-grow-0",
         layoutPaddding,

package/dist/{chunk-WT5XXW6G.js → chunk-WFQEE2OO.js}

@@ -1,9 +1,9 @@
 import {
   Paragraph
-} from "./chunk-VG4EPHJA.js";
+} from "./chunk-HVI3CL7Y.js";
 import {
   Icon
-} from "./chunk-IGQVA7SC.js";
+} from "./chunk-NKUETCDA.js";
 import {
   baseTransition,
   componentGap
@@ -26,7 +26,8 @@ var Checkbox = (_a) => {
     onChange,
     indeterminate,
     paragraphClassName,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "label",
     "error",
@@ -36,7 +37,8 @@ var Checkbox = (_a) => {
     "onChange",
     "indeterminate",
     "paragraphClassName",
-    "id"
+    "id",
+    "testid"
   ]);
   const selected = indeterminate || checked;
   const normalClassName = clsx(
@@ -65,6 +67,7 @@ var Checkbox = (_a) => {
     "label",
     {
       id,
+      "data-testid": testid,
       htmlFor: id ? `${id}-input` : void 0,
       className: clsx(
         "flex items-center",
@@ -78,6 +81,7 @@ var Checkbox = (_a) => {
             "input",
             __spreadValues({
               id: id ? `${id}-input` : void 0,
+              "data-testid": testid ? `${testid}-input` : void 0,
               type: "checkbox",
               className: "sr-only peer",
               disabled,
@@ -109,6 +113,7 @@ var Checkbox = (_a) => {
           Paragraph,
           {
             id: id ? `${id}-label` : void 0,
+            testid: testid ? `${testid}-label` : void 0,
             as: "span",
             padded: true,
             className: clsx(

package/dist/{chunk-QTD7K43M.js → chunk-WSS2DFTP.js}

@@ -1,15 +1,15 @@
 import {
   Stack
-} from "./chunk-EO3JJWFW.js";
+} from "./chunk-N6JVLYEE.js";
 import {
   Card
-} from "./chunk-4OS6APPF.js";
+} from "./chunk-4LXG6QNT.js";
 import {
   Paragraph
-} from "./chunk-VG4EPHJA.js";
+} from "./chunk-HVI3CL7Y.js";
 import {
   Icon
-} from "./chunk-IGQVA7SC.js";
+} from "./chunk-NKUETCDA.js";
 import {
   typography
 } from "./chunk-RDLEIAQU.js";
@@ -18,7 +18,7 @@ import {
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Accordion(props) {
-  const { isOpen, onClick, className, disabled } = props;
+  const { isOpen, onClick, className, disabled, testid } = props;
   const {
     title,
     before,
@@ -49,11 +49,12 @@ function Accordion(props) {
       ),
       selected: isOpen,
       onClick: handleClick,
+      testid,
       children: [
         /* @__PURE__ */ jsxs(Stack, { sizing: "component", horizontal: true, justify: "between", items: "center", children: [
           /* @__PURE__ */ jsxs(Stack, { sizing: "layout-group", horizontal: true, items: "center", children: [
             before,
-            typeof title === "string" ? /* @__PURE__ */ jsx(Paragraph, { className: "text-text-primary-normal", children: title }) : title
+            typeof title === "string" ? /* @__PURE__ */ jsx(Paragraph, { testid: testid ? `${testid}-title` : void 0, className: "text-text-primary-normal", children: title }) : title
           ] }),
           after
         ] }),
@@ -64,6 +65,7 @@ function Accordion(props) {
             style: {
               gridTemplateRows: isOpen ? "1fr" : "0fr"
             },
+            "data-testid": testid ? `${testid}-content-container` : void 0,
             children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx(
               "div",
               {

package/dist/{chunk-37TJJQL3.js → chunk-YR7JUKYO.js}

@@ -25,6 +25,7 @@ import { jsxs } from "react/jsx-runtime";
 var Menu = (_a) => {
   var _b = _a, {
     id,
+    testid,
     children,
     className,
     ref,
@@ -42,6 +43,7 @@ var Menu = (_a) => {
     menuName
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "children",
     "className",
     "ref",
@@ -122,6 +124,7 @@ var Menu = (_a) => {
       "div",
       __spreadProps(__spreadValues({
         id,
+        "data-testid": testid,
         ref: setRefs,
         className: clsx(
           "shadow-4 rounded-base bg-background-grouped-primary-normal overflow-x-hidden overflow-y-auto flex flex-col outline-0",

package/dist/{chunk-4JLU7TAC.js → chunk-ZFOANBWG.js}

@@ -7,12 +7,14 @@ var ModalScrim = ({
   children,
   onClick,
   ref,
-  id
+  id,
+  testid
 }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
       id,
+      "data-testid": testid,
       className: clsx(
         "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/{chunk-P242H6OU.js → chunk-ZGFQN47L.js}

@@ -1,9 +1,9 @@
 import {
   Button
-} from "./chunk-H6LXXGX6.js";
+} from "./chunk-FKMKHLQH.js";
 import {
   Icon
-} from "./chunk-IGQVA7SC.js";
+} from "./chunk-NKUETCDA.js";
 import {
   __objRest,
   __spreadProps,
@@ -16,6 +16,7 @@ import { jsx } from "react/jsx-runtime";
 var NavigationTab = (_a) => {
   var _b = _a, {
     id,
+    testid,
     label,
     onClick,
     selected = false,
@@ -24,6 +25,7 @@ var NavigationTab = (_a) => {
     href
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "label",
     "onClick",
     "selected",
@@ -67,6 +69,7 @@ var NavigationTab = (_a) => {
     Button,
     __spreadProps(__spreadValues({
       id,
+      testid,
       variant: "tertiary-critical",
       colorClassName: textClassName,
       className: clsx(

package/dist/components/AccessChangerTabItem.cjs

@@ -203,7 +203,8 @@ var Subheader = (_a) => {
     align,
     color,
     tall,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "children",
@@ -211,13 +212,15 @@ var Subheader = (_a) => {
     "align",
     "color",
     "tall",
-    "id"
+    "id",
+    "testid"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       className: (0, import_clsx2.default)(
         typography.subheader,
         className,
@@ -243,17 +246,20 @@ function Icon(_a) {
   var _b = _a, {
     name,
     size = 24,
-    variant = "outline"
+    variant = "outline",
+    testid
   } = _b, props = __objRest(_b, [
     "name",
     "size",
-    "variant"
+    "variant",
+    "testid"
   ]);
   const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
   const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "span",
     __spreadProps(__spreadValues({}, props), {
+      "data-testid": testid,
       className: (0, import_clsx3.default)(
         "icon",
         `icon-${size}`,

package/dist/components/AccessChangerTabItem.js

@@ -1,9 +1,9 @@
 import {
   Subheader
-} from "../chunk-O4M2GISS.js";
+} from "../chunk-CYZL57LH.js";
 import {
   Icon
-} from "../chunk-IGQVA7SC.js";
+} from "../chunk-NKUETCDA.js";
 import "../chunk-RDLEIAQU.js";
 import {
   __objRest,

package/dist/components/Accordion.cjs

@@ -195,10 +195,11 @@ var gapUsingContainerPadding = (0, import_clsx.default)(
 var import_clsx2 = __toESM(require("clsx"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
 function Card(props) {
-  const _a = props, { children, selected } = _a, rest = __objRest(_a, ["children", "selected"]);
+  const _a = props, { children, selected, testid } = _a, rest = __objRest(_a, ["children", "selected", "testid"]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     __spreadProps(__spreadValues({}, rest), {
+      "data-testid": testid,
       className: (0, import_clsx2.default)(
         "rounded-sm p-desktop-layout-padding",
         selected ? "border-2 border-border-primary-focus" : "border border-border-primary-normal",
@@ -216,17 +217,20 @@ function Icon(_a) {
   var _b = _a, {
     name,
     size = 24,
-    variant = "outline"
+    variant = "outline",
+    testid
   } = _b, props = __objRest(_b, [
     "name",
     "size",
-    "variant"
+    "variant",
+    "testid"
   ]);
   const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
   const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "span",
     __spreadProps(__spreadValues({}, props), {
+      "data-testid": testid,
       className: (0, import_clsx3.default)(
         "icon",
         `icon-${size}`,
@@ -303,7 +307,8 @@ var Stack = (_a) => {
     id,
     noGap,
     marginTop,
-    marginBottom
+    marginBottom,
+    testid
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -339,14 +344,16 @@ var Stack = (_a) => {
     "id",
     "noGap",
     "marginTop",
-    "marginBottom"
+    "marginBottom",
+    "testid"
   ]);
   const flexClassNames = getFlexClassNames({ items, justify, grow });
   const gapClassNames = useGapClassNames(sizing);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
     __spreadProps(__spreadValues({
-      id
+      id,
+      "data-testid": testid
     }, props), {
       style: {
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
@@ -421,7 +428,8 @@ var Paragraph = (_a) => {
     addOverflow,
     children,
     as = "p",
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "color",
@@ -431,13 +439,15 @@ var Paragraph = (_a) => {
     "addOverflow",
     "children",
     "as",
-    "id"
+    "id",
+    "testid"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     Element,
     __spreadProps(__spreadValues({
-      id
+      id,
+      "data-testid": testid
     }, props), {
       className: (0, import_clsx5.default)(
         typography.paragraph,
@@ -461,7 +471,7 @@ Paragraph.displayName = "Paragraph";
 // src/components/Accordion.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function Accordion(props) {
-  const { isOpen, onClick, className, disabled } = props;
+  const { isOpen, onClick, className, disabled, testid } = props;
   const {
     title,
     before,
@@ -492,11 +502,12 @@ function Accordion(props) {
       ),
       selected: isOpen,
       onClick: handleClick,
+      testid,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Stack, { sizing: "component", horizontal: true, justify: "between", items: "center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Stack, { sizing: "layout-group", horizontal: true, items: "center", children: [
             before,
-            typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Paragraph, { className: "text-text-primary-normal", children: title }) : title
+            typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Paragraph, { testid: testid ? `${testid}-title` : void 0, className: "text-text-primary-normal", children: title }) : title
           ] }),
           after
         ] }),
@@ -507,6 +518,7 @@ function Accordion(props) {
             style: {
               gridTemplateRows: isOpen ? "1fr" : "0fr"
             },
+            "data-testid": testid ? `${testid}-content-container` : void 0,
             children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "div",
               {

package/dist/components/Accordion.js

@@ -1,11 +1,11 @@
 "use client";
 import {
   Accordion
-} from "../chunk-QTD7K43M.js";
-import "../chunk-EO3JJWFW.js";
-import "../chunk-4OS6APPF.js";
-import "../chunk-VG4EPHJA.js";
-import "../chunk-IGQVA7SC.js";
+} from "../chunk-WSS2DFTP.js";
+import "../chunk-N6JVLYEE.js";
+import "../chunk-4LXG6QNT.js";
+import "../chunk-HVI3CL7Y.js";
+import "../chunk-NKUETCDA.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/Breadcrumbs.cjs

@@ -208,7 +208,8 @@ var Link = (_a) => {
     color,
     paddedY,
     align,
-    underline = false
+    underline = false,
+    testid
   } = _b, props = __objRest(_b, [
     "as",
     "className",
@@ -218,7 +219,8 @@ var Link = (_a) => {
     "color",
     "paddedY",
     "align",
-    "underline"
+    "underline",
+    "testid"
   ]);
   const Component = as;
   const primaryStateStyles = variant === "primary" && !disabled && (0, import_clsx2.default)(
@@ -266,7 +268,8 @@ var Link = (_a) => {
         color: color ? `var(--color-${color})` : void 0
       }),
       "aria-disabled": disabled,
-      tabIndex: disabled ? -1 : void 0
+      tabIndex: disabled ? -1 : void 0,
+      "data-testid": testid
     })
   );
 };
@@ -279,17 +282,20 @@ function Icon(_a) {
   var _b = _a, {
     name,
     size = 24,
-    variant = "outline"
+    variant = "outline",
+    testid
   } = _b, props = __objRest(_b, [
     "name",
     "size",
-    "variant"
+    "variant",
+    "testid"
   ]);
   const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
   const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "span",
     __spreadProps(__spreadValues({}, props), {
+      "data-testid": testid,
       className: (0, import_clsx3.default)(
         "icon",
         `icon-${size}`,
@@ -310,7 +316,8 @@ var Breadcrumb = ({
   href,
   children,
   onClick,
-  id
+  id,
+  testid
 }) => {
   const linkPadding = (0, import_clsx4.default)(
     "!text-text-link-normal  whitespace-nowrap",
@@ -318,10 +325,11 @@ var Breadcrumb = ({
     "desktop:py-[calc(var(--spacing-desktop-component-padding)_+_3px)]",
     "compact:py-[calc(var(--spacing-desktop-compact-component-padding)_+_3px)]"
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { id, className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { id, "data-testid": testid, className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Link,
     {
       id: id ? `${id}-link` : void 0,
+      "data-testid": testid ? `${testid}-link` : void 0,
       className: linkPadding,
       href,
       onClick,
@@ -330,7 +338,7 @@ var Breadcrumb = ({
   ) }, href);
 };
 var Chevron = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "flex items-center", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "chevron_right", size: 16 }) });
-var Breadcrumbs = ({ asCardStyle, id, crumbs }) => {
+var Breadcrumbs = ({ asCardStyle, id, testid, crumbs }) => {
   const scrollableElement = import_react.default.useRef(null);
   const [isOverflow, setIsOverflow] = (0, import_react.useState)(false);
   (0, import_react.useLayoutEffect)(() => {
@@ -351,6 +359,7 @@ var Breadcrumbs = ({ asCardStyle, id, crumbs }) => {
     "nav",
     {
       id,
+      "data-testid": testid,
       className: (0, import_clsx4.default)(
         "relative select-none flex items-center  max-w-full w-full",
         {
@@ -373,6 +382,7 @@ var Breadcrumbs = ({ asCardStyle, id, crumbs }) => {
           "ol",
           {
             id: id ? `${id}-list` : void 0,
+            "data-testid": testid ? `${testid}-list` : void 0,
             className: "flex items-center overflow-x-scroll",
             style: { scrollbarWidth: "none" },
             onScroll: updateOverflow,
@@ -389,6 +399,7 @@ var Breadcrumbs = ({ asCardStyle, id, crumbs }) => {
                     href,
                     onClick,
                     id: id ? `${id}-crumb-${index}` : void 0,
+                    testid: testid ? `${testid}-crumb-${index}` : void 0,
                     children
                   }
                 )

package/dist/components/Breadcrumbs.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   Link
-} from "../chunk-AOELEEUS.js";
+} from "../chunk-I6GEUF6Y.js";
 import {
   Icon
-} from "../chunk-IGQVA7SC.js";
+} from "../chunk-NKUETCDA.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 
@@ -16,7 +16,8 @@ var Breadcrumb = ({
   href,
   children,
   onClick,
-  id
+  id,
+  testid
 }) => {
   const linkPadding = clsx(
     "!text-text-link-normal  whitespace-nowrap",
@@ -24,10 +25,11 @@ var Breadcrumb = ({
     "desktop:py-[calc(var(--spacing-desktop-component-padding)_+_3px)]",
     "compact:py-[calc(var(--spacing-desktop-compact-component-padding)_+_3px)]"
   );
-  return /* @__PURE__ */ jsx("li", { id, className: "flex items-center", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("li", { id, "data-testid": testid, className: "flex items-center", children: /* @__PURE__ */ jsx(
     Link,
     {
       id: id ? `${id}-link` : void 0,
+      "data-testid": testid ? `${testid}-link` : void 0,
       className: linkPadding,
       href,
       onClick,
@@ -36,7 +38,7 @@ var Breadcrumb = ({
   ) }, href);
 };
 var Chevron = () => /* @__PURE__ */ jsx("li", { className: "flex items-center", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { name: "chevron_right", size: 16 }) });
-var Breadcrumbs = ({ asCardStyle, id, crumbs }) => {
+var Breadcrumbs = ({ asCardStyle, id, testid, crumbs }) => {
   const scrollableElement = React.useRef(null);
   const [isOverflow, setIsOverflow] = useState(false);
   useLayoutEffect(() => {
@@ -57,6 +59,7 @@ var Breadcrumbs = ({ asCardStyle, id, crumbs }) => {
     "nav",
     {
       id,
+      "data-testid": testid,
       className: clsx(
         "relative select-none flex items-center  max-w-full w-full",
         {
@@ -79,6 +82,7 @@ var Breadcrumbs = ({ asCardStyle, id, crumbs }) => {
           "ol",
           {
             id: id ? `${id}-list` : void 0,
+            "data-testid": testid ? `${testid}-list` : void 0,
             className: "flex items-center overflow-x-scroll",
             style: { scrollbarWidth: "none" },
             onScroll: updateOverflow,
@@ -95,6 +99,7 @@ var Breadcrumbs = ({ asCardStyle, id, crumbs }) => {
                     href,
                     onClick,
                     id: id ? `${id}-crumb-${index}` : void 0,
+                    testid: testid ? `${testid}-crumb-${index}` : void 0,
                     children
                   }
                 )