@dmsi/wedgekit-react 0.0.25 → 0.0.27

package/dist/components/SideMenuItem.cjs

@@ -208,38 +208,70 @@ var useFlexClassNames = ({ items, justify, grow }) => (0, import_clsx2.default)(
   justify === "between" && "justify-between",
   justify === "around" && "justify-around"
 );
-var Stack = ({
-  children,
-  items,
-  justify,
-  grow,
-  padding,
-  paddingX,
-  horizontal,
-  horizontalMobile,
-  elevation = 0,
-  rounded,
-  centered,
-  width,
-  maxWidth,
-  minWidth,
-  height,
-  maxHeight,
-  borderColor,
-  backgroundColor,
-  sizing = "none",
-  overflowY = "inherit",
-  overflowX = "inherit",
-  flexShrink,
-  flexGrow,
-  position,
-  top,
-  left
-}) => {
+var Stack = (_a) => {
+  var _b = _a, {
+    children,
+    items,
+    justify,
+    grow,
+    padding,
+    paddingX,
+    horizontal,
+    horizontalMobile,
+    elevation = 0,
+    rounded,
+    centered,
+    width,
+    maxWidth,
+    minWidth,
+    height,
+    maxHeight,
+    borderColor,
+    backgroundColor,
+    sizing = "none",
+    overflowY = "inherit",
+    overflowX = "inherit",
+    flexShrink,
+    flexGrow,
+    position,
+    top,
+    left,
+    id
+  } = _b, props = __objRest(_b, [
+    "children",
+    "items",
+    "justify",
+    "grow",
+    "padding",
+    "paddingX",
+    "horizontal",
+    "horizontalMobile",
+    "elevation",
+    "rounded",
+    "centered",
+    "width",
+    "maxWidth",
+    "minWidth",
+    "height",
+    "maxHeight",
+    "borderColor",
+    "backgroundColor",
+    "sizing",
+    "overflowY",
+    "overflowX",
+    "flexShrink",
+    "flexGrow",
+    "position",
+    "top",
+    "left",
+    "id"
+  ]);
   const flexClassNames = useFlexClassNames({ items, justify, grow });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
-    {
+    __spreadProps(__spreadValues({
+      id
+    }, props), {
       style: {
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
         maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : void 0,
@@ -287,7 +319,7 @@ var Stack = ({
         rounded && "rounded"
       ),
       children
-    }
+    })
   );
 };
 
@@ -303,7 +335,8 @@ var Paragraph = (_a) => {
     tall,
     addOverflow,
     children,
-    as = "p"
+    as = "p",
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "color",
@@ -312,12 +345,15 @@ var Paragraph = (_a) => {
     "tall",
     "addOverflow",
     "children",
-    "as"
+    "as",
+    "id"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Element,
-    __spreadProps(__spreadValues({}, props), {
+    __spreadProps(__spreadValues({
+      id
+    }, props), {
       className: (0, import_clsx3.default)(
         typography.paragraph,
         className,
@@ -340,6 +376,7 @@ Paragraph.displayName = "Paragraph";
 // src/components/SideMenuItem.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var SideMenuItem = ({
+  id,
   label,
   leftIcon,
   rightIcon,
@@ -363,6 +400,7 @@ var SideMenuItem = ({
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "a",
     {
+      id,
       href,
       className: (0, import_clsx4.default)(
         "group flex w-full rounded border-2 cursor-pointer",
@@ -377,16 +415,34 @@ var SideMenuItem = ({
         enabledDisabledStyles
       ),
       onClick,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Stack, { horizontal: true, items: "center", sizing: "component", children: [
-        groupIndentLevel === 2 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pl-6" }),
-        groupIndentLevel === 3 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pl-13" }),
-        groupIndentLevel === 4 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pl-20" }),
-        groupIndentLevel === 5 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pl-27" }),
-        leftIcon && leftIcon,
-        !leftIcon && groupIndentLevel && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-6 h-6" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Paragraph, { as: "span", padded: true, className: "mr-auto !leading-6", children: label }),
-        rightIcon && rightIcon
-      ] })
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        Stack,
+        {
+          id: id ? `${id}-stack` : void 0,
+          horizontal: true,
+          items: "center",
+          sizing: "component",
+          children: [
+            groupIndentLevel === 2 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pl-6" }),
+            groupIndentLevel === 3 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pl-13" }),
+            groupIndentLevel === 4 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pl-20" }),
+            groupIndentLevel === 5 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pl-27" }),
+            leftIcon && leftIcon,
+            !leftIcon && groupIndentLevel && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-6 h-6" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              Paragraph,
+              {
+                id: id ? `${id}-label` : void 0,
+                as: "span",
+                padded: true,
+                className: "mr-auto !leading-6",
+                children: label
+              }
+            ),
+            rightIcon && rightIcon
+          ]
+        }
+      )
     }
   );
 };

package/dist/components/SideMenuItem.js

@@ -1,9 +1,9 @@
 import {
   Stack
-} from "../chunk-U42SKNR6.js";
+} from "../chunk-57WRM337.js";
 import {
   Paragraph
-} from "../chunk-UIQ733QP.js";
+} from "../chunk-VG4EPHJA.js";
 import {
   baseTransition,
   componentPaddingMinus2pxBorder
@@ -14,6 +14,7 @@ import "../chunk-ORMEWXMH.js";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 var SideMenuItem = ({
+  id,
   label,
   leftIcon,
   rightIcon,
@@ -37,6 +38,7 @@ var SideMenuItem = ({
   return /* @__PURE__ */ jsx(
     "a",
     {
+      id,
       href,
       className: clsx(
         "group flex w-full rounded border-2 cursor-pointer",
@@ -51,16 +53,34 @@ var SideMenuItem = ({
         enabledDisabledStyles
       ),
       onClick,
-      children: /* @__PURE__ */ jsxs(Stack, { horizontal: true, items: "center", sizing: "component", children: [
-        groupIndentLevel === 2 && /* @__PURE__ */ jsx("div", { className: "pl-6" }),
-        groupIndentLevel === 3 && /* @__PURE__ */ jsx("div", { className: "pl-13" }),
-        groupIndentLevel === 4 && /* @__PURE__ */ jsx("div", { className: "pl-20" }),
-        groupIndentLevel === 5 && /* @__PURE__ */ jsx("div", { className: "pl-27" }),
-        leftIcon && leftIcon,
-        !leftIcon && groupIndentLevel && /* @__PURE__ */ jsx("div", { className: "w-6 h-6" }),
-        /* @__PURE__ */ jsx(Paragraph, { as: "span", padded: true, className: "mr-auto !leading-6", children: label }),
-        rightIcon && rightIcon
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          id: id ? `${id}-stack` : void 0,
+          horizontal: true,
+          items: "center",
+          sizing: "component",
+          children: [
+            groupIndentLevel === 2 && /* @__PURE__ */ jsx("div", { className: "pl-6" }),
+            groupIndentLevel === 3 && /* @__PURE__ */ jsx("div", { className: "pl-13" }),
+            groupIndentLevel === 4 && /* @__PURE__ */ jsx("div", { className: "pl-20" }),
+            groupIndentLevel === 5 && /* @__PURE__ */ jsx("div", { className: "pl-27" }),
+            leftIcon && leftIcon,
+            !leftIcon && groupIndentLevel && /* @__PURE__ */ jsx("div", { className: "w-6 h-6" }),
+            /* @__PURE__ */ jsx(
+              Paragraph,
+              {
+                id: id ? `${id}-label` : void 0,
+                as: "span",
+                padded: true,
+                className: "mr-auto !leading-6",
+                children: label
+              }
+            ),
+            rightIcon && rightIcon
+          ]
+        }
+      )
     }
   );
 };

package/dist/components/Stack.cjs

@@ -1,10 +1,39 @@
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -50,38 +79,70 @@ var useFlexClassNames = ({ items, justify, grow }) => (0, import_clsx.default)(
   justify === "between" && "justify-between",
   justify === "around" && "justify-around"
 );
-var Stack = ({
-  children,
-  items,
-  justify,
-  grow,
-  padding,
-  paddingX,
-  horizontal,
-  horizontalMobile,
-  elevation = 0,
-  rounded,
-  centered,
-  width,
-  maxWidth,
-  minWidth,
-  height,
-  maxHeight,
-  borderColor,
-  backgroundColor,
-  sizing = "none",
-  overflowY = "inherit",
-  overflowX = "inherit",
-  flexShrink,
-  flexGrow,
-  position,
-  top,
-  left
-}) => {
+var Stack = (_a) => {
+  var _b = _a, {
+    children,
+    items,
+    justify,
+    grow,
+    padding,
+    paddingX,
+    horizontal,
+    horizontalMobile,
+    elevation = 0,
+    rounded,
+    centered,
+    width,
+    maxWidth,
+    minWidth,
+    height,
+    maxHeight,
+    borderColor,
+    backgroundColor,
+    sizing = "none",
+    overflowY = "inherit",
+    overflowX = "inherit",
+    flexShrink,
+    flexGrow,
+    position,
+    top,
+    left,
+    id
+  } = _b, props = __objRest(_b, [
+    "children",
+    "items",
+    "justify",
+    "grow",
+    "padding",
+    "paddingX",
+    "horizontal",
+    "horizontalMobile",
+    "elevation",
+    "rounded",
+    "centered",
+    "width",
+    "maxWidth",
+    "minWidth",
+    "height",
+    "maxHeight",
+    "borderColor",
+    "backgroundColor",
+    "sizing",
+    "overflowY",
+    "overflowX",
+    "flexShrink",
+    "flexGrow",
+    "position",
+    "top",
+    "left",
+    "id"
+  ]);
   const flexClassNames = useFlexClassNames({ items, justify, grow });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
-    {
+    __spreadProps(__spreadValues({
+      id
+    }, props), {
       style: {
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
         maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : void 0,
@@ -129,7 +190,7 @@ var Stack = ({
         rounded && "rounded"
       ),
       children
-    }
+    })
   );
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/Stack.js

@@ -1,6 +1,6 @@
 import {
   Stack
-} from "../chunk-U42SKNR6.js";
+} from "../chunk-57WRM337.js";
 import "../chunk-ORMEWXMH.js";
 export {
   Stack

package/dist/components/StatusPill.cjs

@@ -200,18 +200,21 @@ var Label = (_a) => {
     padded,
     className,
     color,
-    align
+    align,
+    id
   } = _b, props = __objRest(_b, [
     "as",
     "padded",
     "className",
     "color",
-    "align"
+    "align",
+    "id"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       className: (0, import_clsx2.default)(
         typography.label,
         align === "left" && "text-left",
@@ -236,11 +239,13 @@ var StatusPill = (_a) => {
   var _b = _a, {
     children,
     state = "in-progress",
-    intent = "neutral"
+    intent = "neutral",
+    id
   } = _b, props = __objRest(_b, [
     "children",
     "state",
-    "intent"
+    "intent",
+    "id"
   ]);
   const textColor = (0, import_clsx3.default)(
     state === "completed" && ["neutral", "critical"].includes(intent) ? "text-text-on-action-primary-normal" : "text-neutral-500"
@@ -257,7 +262,9 @@ var StatusPill = (_a) => {
   });
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
-    __spreadProps(__spreadValues({}, props), {
+    __spreadProps(__spreadValues({
+      id
+    }, props), {
       className: (0, import_clsx3.default)(
         "rounded flex items-center",
         textColor,
@@ -265,7 +272,7 @@ var StatusPill = (_a) => {
         paddingXUsingLayoutGroupGap,
         componentPaddingYUsingComponentGap
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Label, { children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Label, { id: id ? `${id}-label` : void 0, children })
     })
   );
 };

package/dist/components/StatusPill.js

@@ -1,6 +1,6 @@
 import {
   Label
-} from "../chunk-S7R37IUP.js";
+} from "../chunk-S5K22XTH.js";
 import {
   componentPaddingYUsingComponentGap,
   paddingXUsingLayoutGroupGap
@@ -18,11 +18,13 @@ var StatusPill = (_a) => {
   var _b = _a, {
     children,
     state = "in-progress",
-    intent = "neutral"
+    intent = "neutral",
+    id
   } = _b, props = __objRest(_b, [
     "children",
     "state",
-    "intent"
+    "intent",
+    "id"
   ]);
   const textColor = clsx(
     state === "completed" && ["neutral", "critical"].includes(intent) ? "text-text-on-action-primary-normal" : "text-neutral-500"
@@ -39,7 +41,9 @@ var StatusPill = (_a) => {
   });
   return /* @__PURE__ */ jsx(
     "div",
-    __spreadProps(__spreadValues({}, props), {
+    __spreadProps(__spreadValues({
+      id
+    }, props), {
       className: clsx(
         "rounded flex items-center",
         textColor,
@@ -47,7 +51,7 @@ var StatusPill = (_a) => {
         paddingXUsingLayoutGroupGap,
         componentPaddingYUsingComponentGap
       ),
-      children: /* @__PURE__ */ jsx(Label, { children })
+      children: /* @__PURE__ */ jsx(Label, { id: id ? `${id}-label` : void 0, children })
     })
   );
 };