@dmsi/wedgekit-react 0.0.25 → 0.0.27

package/dist/components/FilterGroup.cjs

@@ -203,18 +203,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",
@@ -279,7 +282,8 @@ var Paragraph = (_a) => {
     tall,
     addOverflow,
     children,
-    as = "p"
+    as = "p",
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "color",
@@ -288,12 +292,15 @@ var Paragraph = (_a) => {
     "tall",
     "addOverflow",
     "children",
-    "as"
+    "as",
+    "id"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Element,
-    __spreadProps(__spreadValues({}, props), {
+    __spreadProps(__spreadValues({
+      id
+    }, props), {
       className: (0, import_clsx4.default)(
         typography.paragraph,
         className,
@@ -324,7 +331,8 @@ var Checkbox = (_a) => {
     checked,
     onChange,
     indeterminate,
-    paragraphClassName
+    paragraphClassName,
+    id
   } = _b, props = __objRest(_b, [
     "label",
     "error",
@@ -333,7 +341,8 @@ var Checkbox = (_a) => {
     "checked",
     "onChange",
     "indeterminate",
-    "paragraphClassName"
+    "paragraphClassName",
+    "id"
   ]);
   const selected = indeterminate || checked;
   const normalClassName = (0, import_clsx5.default)(
@@ -361,6 +370,8 @@ var Checkbox = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "label",
     {
+      id,
+      htmlFor: `${id}-input`,
       className: (0, import_clsx5.default)(
         "flex items-center",
         componentGap,
@@ -372,12 +383,12 @@ var Checkbox = (_a) => {
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "input",
             __spreadValues({
+              id: id ? `${id}-input` : void 0,
               type: "checkbox",
               className: "sr-only peer",
               disabled,
               checked: selected,
               onChange: handleOnChange,
-              id: props.id,
               "data-indeterminate": indeterminate
             }, props)
           ),
@@ -403,6 +414,7 @@ var Checkbox = (_a) => {
         label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Paragraph,
           {
+            id: id ? `${id}-label` : void 0,
             as: "span",
             padded: true,
             className: (0, import_clsx5.default)(
@@ -445,7 +457,8 @@ var Button = (_a) => {
     children,
     iconOnly = false,
     colorClassName,
-    href
+    href,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -458,7 +471,8 @@ var Button = (_a) => {
     "children",
     "iconOnly",
     "colorClassName",
-    "href"
+    "href",
+    "id"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx6.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -548,6 +562,7 @@ var Button = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     Element,
     __spreadProps(__spreadValues({
+      id,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -555,7 +570,7 @@ var Button = (_a) => {
       href,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: labelClasses, children }),
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -567,6 +582,7 @@ Button.displayName = "Button";
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var OptionPill = (_a) => {
   var _b = _a, {
+    id,
     selected = false,
     onClick,
     onRemove,
@@ -575,6 +591,7 @@ var OptionPill = (_a) => {
     children,
     className
   } = _b, props = __objRest(_b, [
+    "id",
     "selected",
     "onClick",
     "onRemove",
@@ -605,6 +622,7 @@ var OptionPill = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     __spreadProps(__spreadValues(__spreadValues({
+      id,
       onClick: handleOnClick
     }, props), additionalAttributes), {
       className: (0, import_clsx7.default)(
@@ -618,10 +636,19 @@ var OptionPill = (_a) => {
         textColor
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Label, { padded: true, className: componentPaddingYUsingComponentGap, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          Label,
+          {
+            id: id ? `${id}-label` : void 0,
+            padded: true,
+            className: componentPaddingYUsingComponentGap,
+            children
+          }
+        ),
         removable && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           Button,
           {
+            id: id ? `${id}-remove-button` : void 0,
             onClick: handleOnRemove,
             disabled,
             className: (0, import_clsx7.default)(
@@ -775,6 +802,7 @@ function formatCurrencyDisplay(value) {
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var InputBase = (_a) => {
   var _b = _a, {
+    id,
     before,
     after,
     type,
@@ -791,6 +819,7 @@ var InputBase = (_a) => {
     wrapperClassName,
     focus
   } = _b, props = __objRest(_b, [
+    "id",
     "before",
     "after",
     "type",
@@ -812,6 +841,7 @@ var InputBase = (_a) => {
     "data-focus": focus || null
   };
   const inputRef = (0, import_react.useRef)(null);
+  const inputId = `${id}-input`;
   (0, import_react.useEffect)(() => {
     var _a2;
     const input = inputRef.current;
@@ -852,6 +882,8 @@ var InputBase = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "label",
     {
+      id,
+      htmlFor: inputId,
       ref: inputContainerRef,
       className: (0, import_clsx9.default)(
         "w-full flex flex-col",
@@ -865,6 +897,7 @@ var InputBase = (_a) => {
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             Label,
             {
+              id: id ? `${id}-label` : void 0,
               className: (0, import_clsx9.default)(
                 props.disabled || props.readOnly ? "cursor-default" : "cursor-pointer"
               ),
@@ -901,7 +934,7 @@ var InputBase = (_a) => {
                   type,
                   required
                 }, props), attributes), {
-                  id: props.id,
+                  id: inputId,
                   className: (0, import_clsx9.default)(
                     "flex-1 outline-none w-full max-w-full min-h-6 min-w-0",
                     "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
@@ -919,7 +952,7 @@ var InputBase = (_a) => {
             ]
           }
         ),
-        caption
+        caption && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { id: id ? `${id}-caption` : void 0, children: caption })
       ]
     }
   );
@@ -933,7 +966,8 @@ var Input = (_a) => {
     value: propValue,
     onChange,
     onBlur,
-    onClear
+    onClear,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -942,7 +976,8 @@ var Input = (_a) => {
     "value",
     "onChange",
     "onBlur",
-    "onClear"
+    "onClear",
+    "id"
   ]);
   const [internalValue, setInternalValue] = (0, import_react.useState)("");
   const [displayValue, setDisplayValue] = (0, import_react.useState)("");
@@ -968,7 +1003,9 @@ var Input = (_a) => {
   }, [propValue, decimals, variant]);
   const getInputProps = () => {
     var _a2;
-    const baseProps = __spreadProps(__spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals)), {
+    const baseProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
+      id
+    }), getDecimalPlaceholder(decimals)), {
       value: propValue
     });
     switch (variant) {
@@ -1015,6 +1052,7 @@ var Input = (_a) => {
         return hasValue && !props.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           Icon,
           {
+            id: id ? `${id}-clear-button` : void 0,
             name: "close",
             onClick: handleSearchReset,
             className: "cursor-pointer absolute right-2 bottom-2/4 translate-y-2/4"
@@ -1146,23 +1184,23 @@ Percentage.displayName = "Percentage";
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var Search = (_a) => {
   var _b = _a, {
+    id,
     label,
     error,
     children,
     readOnly,
     renderMenu,
     onClick,
-    className,
     wrapperClassName,
     removeRoundness
   } = _b, props = __objRest(_b, [
+    "id",
     "label",
     "error",
     "children",
     "readOnly",
     "renderMenu",
     "onClick",
-    "className",
     "wrapperClassName",
     "removeRoundness"
   ]);
@@ -1185,6 +1223,7 @@ var Search = (_a) => {
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Input,
       __spreadValues({
+        id,
         variant: "search",
         inputContainerRef,
         ref: inputRef,
@@ -1208,10 +1247,14 @@ var Search = (_a) => {
           setShow(true);
           if (["ArrowUp", "ArrowDown"].includes(e.key)) {
             e.preventDefault();
-            const menu = document.querySelector(`[data-menu="${searchMenuName}"]`);
+            const menu = document.querySelector(
+              `[data-menu="${searchMenuName}"]`
+            );
             const selectedMenuOption = menu == null ? void 0 : menu.querySelector("[data-selected]");
             if (selectedMenuOption) {
-              const allMenuOptions = Array.from((menu == null ? void 0 : menu.querySelectorAll('[role="menuitem"]')) || []);
+              const allMenuOptions = Array.from(
+                (menu == null ? void 0 : menu.querySelectorAll('[role="menuitem"]')) || []
+              );
               const currentIndex = allMenuOptions.indexOf(selectedMenuOption);
               let targetOption;
               if (e.key === "ArrowDown") {
@@ -1221,7 +1264,9 @@ var Search = (_a) => {
               }
               targetOption == null ? void 0 : targetOption.focus();
             } else {
-              const toFocusMenuOption = e.key === "ArrowDown" ? menu == null ? void 0 : menu.querySelector('[role="menuitem"]') : menu == null ? void 0 : menu.querySelector('[role="menuitem"]:last-child');
+              const toFocusMenuOption = e.key === "ArrowDown" ? menu == null ? void 0 : menu.querySelector('[role="menuitem"]') : menu == null ? void 0 : menu.querySelector(
+                '[role="menuitem"]:last-child'
+              );
               toFocusMenuOption == null ? void 0 : toFocusMenuOption.focus();
             }
           }
@@ -1233,6 +1278,7 @@ var Search = (_a) => {
       }, props)
     ),
     renderMenu ? renderMenu({
+      id: `${id}-menu`,
       positionTo: inputContainerRef,
       show,
       setShow,
@@ -1248,6 +1294,7 @@ Search.displayName = "Search";
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var FilterGroup = (_a) => {
   var _b = _a, {
+    id,
     label,
     type = "link",
     open = false,
@@ -1259,6 +1306,7 @@ var FilterGroup = (_a) => {
     searchValue,
     onSearchChange
   } = _b, props = __objRest(_b, [
+    "id",
     "label",
     "type",
     "open",
@@ -1283,7 +1331,9 @@ var FilterGroup = (_a) => {
   const showShowMoreLink = showMore && !isSummary && childArray.length > 5 && !showAllItems && isExpanded;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
-    __spreadProps(__spreadValues({}, props), {
+    __spreadProps(__spreadValues({
+      id
+    }, props), {
       className: (0, import_clsx10.default)(
         "border-b border-border-primary-normal",
         isSummary ? layoutPaddingBottom : componentPaddingBottom
@@ -1315,6 +1365,7 @@ var FilterGroup = (_a) => {
               ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 Link,
                 {
+                  id: id ? `${id}-clear-all` : void 0,
                   className: (0, import_clsx10.default)("block", componentPaddingY),
                   onClick: handleClearAll,
                   children: "Clear All"
@@ -1346,6 +1397,7 @@ var FilterGroup = (_a) => {
                   !isSummary && showSearchField && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     Search,
                     {
+                      id: id ? `${id}-search` : void 0,
                       style: { marginBottom: "2px" },
                       onChange: onSearchChange,
                       value: searchValue
@@ -1355,6 +1407,7 @@ var FilterGroup = (_a) => {
                   showShowMoreLink && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     Link,
                     {
+                      id: id ? `${id}-show-more` : void 0,
                       className: (0, import_clsx10.default)("block", "!items-start", componentPaddingY),
                       onClick: handleOnShowMore,
                       children: "Show More"
@@ -1385,10 +1438,12 @@ var FilterGroup = (_a) => {
 };
 var FilterGroupItem = (_a) => {
   var _b = _a, {
+    id,
     type = "link",
     children,
     onClick
   } = _b, props = __objRest(_b, [
+    "id",
     "type",
     "children",
     "onClick"
@@ -1396,20 +1451,29 @@ var FilterGroupItem = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
     __spreadProps(__spreadValues({
+      id,
       onClick: handleClick
     }, props), {
       className: (0, import_clsx10.default)(
         "flex items-center justify-between *:first:flex-1 cursor-pointer",
         type !== "summary" ? "*:first:py-mobile-component-padding *:first:desktop:py-desktop-component-padding *:first:compact:py-desktop-compact-component-padding" : ""
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FilterGroupItemChildComponent, __spreadProps(__spreadValues({}, props), { type, count: props.count, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center justify-between w-full", children: [
-        children,
-        type !== "summary" && props.count && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
-          "(",
-          props.count,
-          ")"
-        ] })
-      ] }) }))
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        FilterGroupItemChildComponent,
+        __spreadProps(__spreadValues({}, props), {
+          id: id ? `${id}-child` : void 0,
+          type,
+          count: props.count,
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center justify-between w-full", children: [
+            children,
+            type !== "summary" && props.count && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
+              "(",
+              props.count,
+              ")"
+            ] })
+          ] })
+        })
+      )
     })
   );
   function handleClick(e) {
@@ -1426,7 +1490,13 @@ var FilterGroupItemChildComponent = (_a) => {
     "children"
   ]);
   if (type === "checkbox") {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Checkbox, __spreadValues({ paragraphClassName: "w-full", label: children }, props));
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      Checkbox,
+      __spreadValues({
+        paragraphClassName: "w-full",
+        label: children
+      }, props)
+    );
   }
   if (type === "summary") {
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(OptionPill, __spreadProps(__spreadValues({ removable: true }, props), { children })) });

package/dist/components/FilterGroup.js

@@ -1,22 +1,22 @@
 "use client";
 import {
   OptionPill
-} from "../chunk-Z2LOGSGE.js";
+} from "../chunk-4N2PED4P.js";
 import {
   Search
-} from "../chunk-TWP6YSFO.js";
-import "../chunk-OISE6NMA.js";
+} from "../chunk-SKHSGGO3.js";
+import "../chunk-QV2EFOYF.js";
 import {
   Label
-} from "../chunk-S7R37IUP.js";
+} from "../chunk-S5K22XTH.js";
 import {
   Link
 } from "../chunk-3WTXVSHO.js";
-import "../chunk-T6HZARR7.js";
+import "../chunk-MZJS2ZAU.js";
 import {
   Checkbox
-} from "../chunk-N32PXOA5.js";
-import "../chunk-UIQ733QP.js";
+} from "../chunk-UT7XCBZF.js";
+import "../chunk-VG4EPHJA.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";
@@ -40,6 +40,7 @@ import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 var FilterGroup = (_a) => {
   var _b = _a, {
+    id,
     label,
     type = "link",
     open = false,
@@ -51,6 +52,7 @@ var FilterGroup = (_a) => {
     searchValue,
     onSearchChange
   } = _b, props = __objRest(_b, [
+    "id",
     "label",
     "type",
     "open",
@@ -75,7 +77,9 @@ var FilterGroup = (_a) => {
   const showShowMoreLink = showMore && !isSummary && childArray.length > 5 && !showAllItems && isExpanded;
   return /* @__PURE__ */ jsxs(
     "div",
-    __spreadProps(__spreadValues({}, props), {
+    __spreadProps(__spreadValues({
+      id
+    }, props), {
       className: clsx(
         "border-b border-border-primary-normal",
         isSummary ? layoutPaddingBottom : componentPaddingBottom
@@ -107,6 +111,7 @@ var FilterGroup = (_a) => {
               ) : /* @__PURE__ */ jsx(
                 Link,
                 {
+                  id: id ? `${id}-clear-all` : void 0,
                   className: clsx("block", componentPaddingY),
                   onClick: handleClearAll,
                   children: "Clear All"
@@ -138,6 +143,7 @@ var FilterGroup = (_a) => {
                   !isSummary && showSearchField && /* @__PURE__ */ jsx(
                     Search,
                     {
+                      id: id ? `${id}-search` : void 0,
                       style: { marginBottom: "2px" },
                       onChange: onSearchChange,
                       value: searchValue
@@ -147,6 +153,7 @@ var FilterGroup = (_a) => {
                   showShowMoreLink && /* @__PURE__ */ jsx(
                     Link,
                     {
+                      id: id ? `${id}-show-more` : void 0,
                       className: clsx("block", "!items-start", componentPaddingY),
                       onClick: handleOnShowMore,
                       children: "Show More"
@@ -177,10 +184,12 @@ var FilterGroup = (_a) => {
 };
 var FilterGroupItem = (_a) => {
   var _b = _a, {
+    id,
     type = "link",
     children,
     onClick
   } = _b, props = __objRest(_b, [
+    "id",
     "type",
     "children",
     "onClick"
@@ -188,20 +197,29 @@ var FilterGroupItem = (_a) => {
   return /* @__PURE__ */ jsx(
     "div",
     __spreadProps(__spreadValues({
+      id,
       onClick: handleClick
     }, props), {
       className: clsx(
         "flex items-center justify-between *:first:flex-1 cursor-pointer",
         type !== "summary" ? "*:first:py-mobile-component-padding *:first:desktop:py-desktop-component-padding *:first:compact:py-desktop-compact-component-padding" : ""
       ),
-      children: /* @__PURE__ */ jsx(FilterGroupItemChildComponent, __spreadProps(__spreadValues({}, props), { type, count: props.count, children: /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between w-full", children: [
-        children,
-        type !== "summary" && props.count && /* @__PURE__ */ jsxs("span", { children: [
-          "(",
-          props.count,
-          ")"
-        ] })
-      ] }) }))
+      children: /* @__PURE__ */ jsx(
+        FilterGroupItemChildComponent,
+        __spreadProps(__spreadValues({}, props), {
+          id: id ? `${id}-child` : void 0,
+          type,
+          count: props.count,
+          children: /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between w-full", children: [
+            children,
+            type !== "summary" && props.count && /* @__PURE__ */ jsxs("span", { children: [
+              "(",
+              props.count,
+              ")"
+            ] })
+          ] })
+        })
+      )
     })
   );
   function handleClick(e) {
@@ -218,7 +236,13 @@ var FilterGroupItemChildComponent = (_a) => {
     "children"
   ]);
   if (type === "checkbox") {
-    return /* @__PURE__ */ jsx(Checkbox, __spreadValues({ paragraphClassName: "w-full", label: children }, props));
+    return /* @__PURE__ */ jsx(
+      Checkbox,
+      __spreadValues({
+        paragraphClassName: "w-full",
+        label: children
+      }, props)
+    );
   }
   if (type === "summary") {
     return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(OptionPill, __spreadProps(__spreadValues({ removable: true }, props), { children })) });

package/dist/components/FullViewportBox.cjs

@@ -25,9 +25,17 @@ __export(FullViewportBox_exports, {
 module.exports = __toCommonJS(FullViewportBox_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 function FullViewportLayout({
-  children
+  children,
+  id
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col min-h-screen min-w-screen p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding items-center justify-center bg-background-grouped-secondary-normal", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      id,
+      className: "flex flex-col min-h-screen min-w-screen p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding items-center justify-center bg-background-grouped-secondary-normal",
+      children
+    }
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/components/FullViewportBox.js

@@ -3,9 +3,17 @@ import "../chunk-ORMEWXMH.js";
 // src/components/FullViewportBox.tsx
 import { jsx } from "react/jsx-runtime";
 function FullViewportLayout({
-  children
+  children,
+  id
 }) {
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col min-h-screen min-w-screen p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding items-center justify-center bg-background-grouped-secondary-normal", children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      className: "flex flex-col min-h-screen min-w-screen p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding items-center justify-center bg-background-grouped-secondary-normal",
+      children
+    }
+  );
 }
 export {
   FullViewportLayout

package/dist/components/Grid.cjs

@@ -97,12 +97,14 @@ var Grid = ({
   sizing = "container",
   padding,
   hasSideMenu = false,
-  columns
+  columns,
+  id
 }) => {
   const childCount = import_react.Children.count(children);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
+      id,
       className: (0, import_clsx.default)(
         padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
         padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",

package/dist/components/Grid.js

@@ -65,12 +65,14 @@ var Grid = ({
   sizing = "container",
   padding,
   hasSideMenu = false,
-  columns
+  columns,
+  id
 }) => {
   const childCount = Children.count(children);
   return /* @__PURE__ */ jsx(
     "div",
     {
+      id,
       className: clsx(
         padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
         padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",