@dmsi/wedgekit-react 0.0.26 → 0.0.27

package/dist/components/Heading.cjs

@@ -202,20 +202,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,

package/dist/components/Heading.js

@@ -3,7 +3,7 @@ import {
   Heading1,
   Heading2,
   Heading3
-} from "../chunk-TJ44JJCB.js";
+} from "../chunk-J6LETUNM.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/HorizontalDivider.cjs

@@ -24,8 +24,8 @@ __export(HorizontalDivider_exports, {
 });
 module.exports = __toCommonJS(HorizontalDivider_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-function HorizontalDivider() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { className: "w-full border-t border-border-primary-normal" });
+function HorizontalDivider({ id }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { id, className: "w-full border-t border-border-primary-normal" });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/components/HorizontalDivider.js

@@ -2,8 +2,8 @@ import "../chunk-ORMEWXMH.js";
 
 // src/components/HorizontalDivider.tsx
 import { jsx } from "react/jsx-runtime";
-function HorizontalDivider() {
-  return /* @__PURE__ */ jsx("hr", { className: "w-full border-t border-border-primary-normal" });
+function HorizontalDivider({ id }) {
+  return /* @__PURE__ */ jsx("hr", { id, className: "w-full border-t border-border-primary-normal" });
 }
 export {
   HorizontalDivider

package/dist/components/Input.cjs

@@ -206,18 +206,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",
@@ -304,6 +307,7 @@ function formatCurrencyDisplay(value) {
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var InputBase = (_a) => {
   var _b = _a, {
+    id,
     before,
     after,
     type,
@@ -320,6 +324,7 @@ var InputBase = (_a) => {
     wrapperClassName,
     focus
   } = _b, props = __objRest(_b, [
+    "id",
     "before",
     "after",
     "type",
@@ -341,6 +346,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;
@@ -381,6 +387,8 @@ var InputBase = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "label",
     {
+      id,
+      htmlFor: inputId,
       ref: inputContainerRef,
       className: (0, import_clsx4.default)(
         "w-full flex flex-col",
@@ -394,6 +402,7 @@ var InputBase = (_a) => {
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             Label,
             {
+              id: id ? `${id}-label` : void 0,
               className: (0, import_clsx4.default)(
                 props.disabled || props.readOnly ? "cursor-default" : "cursor-pointer"
               ),
@@ -430,7 +439,7 @@ var InputBase = (_a) => {
                   type,
                   required
                 }, props), attributes), {
-                  id: props.id,
+                  id: inputId,
                   className: (0, import_clsx4.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",
@@ -448,7 +457,7 @@ var InputBase = (_a) => {
             ]
           }
         ),
-        caption
+        caption && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: id ? `${id}-caption` : void 0, children: caption })
       ]
     }
   );
@@ -462,7 +471,8 @@ var Input = (_a) => {
     value: propValue,
     onChange,
     onBlur,
-    onClear
+    onClear,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -471,7 +481,8 @@ var Input = (_a) => {
     "value",
     "onChange",
     "onBlur",
-    "onClear"
+    "onClear",
+    "id"
   ]);
   const [internalValue, setInternalValue] = (0, import_react.useState)("");
   const [displayValue, setDisplayValue] = (0, import_react.useState)("");
@@ -497,7 +508,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) {
@@ -544,6 +557,7 @@ var Input = (_a) => {
         return hasValue && !props.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime3.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"

package/dist/components/Input.js

@@ -6,8 +6,8 @@ import {
   InputBase,
   Percentage,
   UOM
-} from "../chunk-OISE6NMA.js";
-import "../chunk-S7R37IUP.js";
+} from "../chunk-QV2EFOYF.js";
+import "../chunk-S5K22XTH.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/InputGroup.cjs

@@ -201,18 +201,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,26 +239,30 @@ var import_react = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var InputGroup = (_a) => {
   var _b = _a, {
+    id,
     label,
     orientation = "horizontal",
     error = false,
     children,
     caption
   } = _b, props = __objRest(_b, [
+    "id",
     "label",
     "orientation",
     "error",
     "children",
     "caption"
   ]);
-  const id = (0, import_react.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", __spreadProps(__spreadValues({}, props), { className: (0, import_clsx3.default)("flex flex-col", componentGap), children: [
+  const internalId = (0, import_react.useId)();
+  const labelId = `${id}-label`;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", __spreadProps(__spreadValues({ id }, props), { className: (0, import_clsx3.default)("flex flex-col", componentGap), children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       Label,
       {
+        id: labelId,
         as: "label",
         className: (0, import_clsx3.default)({ "!text-text-primary-error": error }),
-        htmlFor: id,
+        htmlFor: internalId,
         children: label
       }
     ),
@@ -269,7 +276,7 @@ var InputGroup = (_a) => {
         children
       }
     ),
-    caption
+    caption && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { id: id ? `${id}-caption` : void 0, children: caption })
   ] }));
 };
 InputGroup.displayName = "InputGroup";

package/dist/components/InputGroup.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Label
-} from "../chunk-S7R37IUP.js";
+} from "../chunk-S5K22XTH.js";
 import {
   componentGap,
   layoutGap
@@ -18,26 +18,30 @@ import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var InputGroup = (_a) => {
   var _b = _a, {
+    id,
     label,
     orientation = "horizontal",
     error = false,
     children,
     caption
   } = _b, props = __objRest(_b, [
+    "id",
     "label",
     "orientation",
     "error",
     "children",
     "caption"
   ]);
-  const id = useId();
-  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, props), { className: clsx("flex flex-col", componentGap), children: [
+  const internalId = useId();
+  const labelId = `${id}-label`;
+  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({ id }, props), { className: clsx("flex flex-col", componentGap), children: [
     /* @__PURE__ */ jsx(
       Label,
       {
+        id: labelId,
         as: "label",
         className: clsx({ "!text-text-primary-error": error }),
-        htmlFor: id,
+        htmlFor: internalId,
         children: label
       }
     ),
@@ -51,7 +55,7 @@ var InputGroup = (_a) => {
         children
       }
     ),
-    caption
+    caption && /* @__PURE__ */ jsx("div", { id: id ? `${id}-caption` : void 0, children: caption })
   ] }));
 };
 InputGroup.displayName = "InputGroup";

package/dist/components/Label.cjs

@@ -198,18 +198,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",

package/dist/components/Label.js

@@ -1,6 +1,6 @@
 import {
   Label
-} from "../chunk-S7R37IUP.js";
+} from "../chunk-S5K22XTH.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/List.cjs

@@ -26,10 +26,11 @@ module.exports = __toCommonJS(List_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 function List({
   children,
-  ordered
+  ordered,
+  id
 }) {
   const Element = ordered ? "ol" : "ul";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Element, { className: "list-disc list-inside", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Element, { id, className: "list-disc list-inside", children });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/components/List.js

@@ -4,10 +4,11 @@ import "../chunk-ORMEWXMH.js";
 import { jsx } from "react/jsx-runtime";
 function List({
   children,
-  ordered
+  ordered,
+  id
 }) {
   const Element = ordered ? "ol" : "ul";
-  return /* @__PURE__ */ jsx(Element, { className: "list-disc list-inside", children });
+  return /* @__PURE__ */ jsx(Element, { id, className: "list-disc list-inside", children });
 }
 export {
   List

package/dist/components/LogoAgilityTopBar.cjs

@@ -1,8 +1,25 @@
 "use strict";
 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 __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 __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -24,13 +41,14 @@ __export(LogoAgilityTopBar_exports, {
 });
 module.exports = __toCommonJS(LogoAgilityTopBar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-function LogoAgilityTopBar() {
+function LogoAgilityTopBar(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "svg",
-    {
+    __spreadProps(__spreadValues({
       xmlns: "http://www.w3.org/2000/svg",
       width: "148",
-      height: "24",
+      height: "24"
+    }, props), {
       viewBox: "0 0 148 24",
       fill: "none",
       children: [
@@ -106,7 +124,7 @@ function LogoAgilityTopBar() {
           }
         )
       ]
-    }
+    })
   );
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/LogoAgilityTopBar.js

@@ -1,14 +1,18 @@
-import "../chunk-ORMEWXMH.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
 
 // src/components/LogoAgilityTopBar.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-function LogoAgilityTopBar() {
+function LogoAgilityTopBar(props) {
   return /* @__PURE__ */ jsxs(
     "svg",
-    {
+    __spreadProps(__spreadValues({
       xmlns: "http://www.w3.org/2000/svg",
       width: "148",
-      height: "24",
+      height: "24"
+    }, props), {
       viewBox: "0 0 148 24",
       fill: "none",
       children: [
@@ -84,7 +88,7 @@ function LogoAgilityTopBar() {
           }
         )
       ]
-    }
+    })
   );
 }
 export {

package/dist/components/LogoDMSiTopBar.cjs

@@ -1,8 +1,25 @@
 "use strict";
 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 __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 __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -24,13 +41,14 @@ __export(LogoDMSiTopBar_exports, {
 });
 module.exports = __toCommonJS(LogoDMSiTopBar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-function LogoDMSiTopBar() {
+function LogoDMSiTopBar(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "svg",
-    {
+    __spreadProps(__spreadValues({
       width: "106",
       height: "24",
-      viewBox: "0 0 106 24",
+      viewBox: "0 0 106 24"
+    }, props), {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
@@ -70,7 +88,7 @@ function LogoDMSiTopBar() {
           }
         )
       ]
-    }
+    })
   );
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/LogoDMSiTopBar.js

@@ -1,6 +1,6 @@
 import {
   LogoDMSiTopBar
-} from "../chunk-4RD5ZF2V.js";
+} from "../chunk-QBIEU25R.js";
 import "../chunk-ORMEWXMH.js";
 export {
   LogoDMSiTopBar

package/dist/components/LogoMillworkTopBar.cjs

@@ -1,8 +1,25 @@
 "use strict";
 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 __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 __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -24,15 +41,16 @@ __export(LogoMillworkTopBar_exports, {
 });
 module.exports = __toCommonJS(LogoMillworkTopBar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-function LogoMillworkTopBar() {
+function LogoMillworkTopBar(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "svg",
-    {
+    __spreadProps(__spreadValues({
       xmlns: "http://www.w3.org/2000/svg",
       width: "94",
       height: "25",
       viewBox: "0 0 94 25",
-      fill: "none",
+      fill: "none"
+    }, props), {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "mask",
@@ -212,7 +230,7 @@ function LogoMillworkTopBar() {
           )
         ] })
       ]
-    }
+    })
   );
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/LogoMillworkTopBar.js

@@ -1,16 +1,20 @@
-import "../chunk-ORMEWXMH.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
 
 // src/components/LogoMillworkTopBar.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-function LogoMillworkTopBar() {
+function LogoMillworkTopBar(props) {
   return /* @__PURE__ */ jsxs(
     "svg",
-    {
+    __spreadProps(__spreadValues({
       xmlns: "http://www.w3.org/2000/svg",
       width: "94",
       height: "25",
       viewBox: "0 0 94 25",
-      fill: "none",
+      fill: "none"
+    }, props), {
       children: [
         /* @__PURE__ */ jsx(
           "mask",
@@ -190,7 +194,7 @@ function LogoMillworkTopBar() {
           )
         ] })
       ]
-    }
+    })
   );
 }
 export {

package/dist/components/MainBar.cjs

@@ -164,6 +164,7 @@ var gapUsingContainerPadding = (0, import_clsx.default)(
 // src/components/MainBar.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var MainBar = ({
+  id,
   leftContent: left,
   rightContent: right,
   mobileLeftContent: mobileLeft,
@@ -177,6 +178,7 @@ var MainBar = ({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
+      id,
       className: (0, import_clsx2.default)(
         "min-h-mobile-container-padding",
         "bg-background-brand-normal items-center justify-between",

package/dist/components/MainBar.js

@@ -11,6 +11,7 @@ import "../chunk-ORMEWXMH.js";
 import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var MainBar = ({
+  id,
   leftContent: left,
   rightContent: right,
   mobileLeftContent: mobileLeft,
@@ -24,6 +25,7 @@ var MainBar = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      id,
       className: clsx(
         "min-h-mobile-container-padding",
         "bg-background-brand-normal items-center justify-between",

package/dist/components/Menu.cjs

@@ -208,6 +208,7 @@ function findDocumentRoot(element) {
 var import_jsx_runtime = require("react/jsx-runtime");
 var Menu = (_a) => {
   var _b = _a, {
+    id,
     children,
     className,
     ref,
@@ -224,6 +225,7 @@ var Menu = (_a) => {
     autoFocusOff,
     menuName
   } = _b, props = __objRest(_b, [
+    "id",
     "children",
     "className",
     "ref",
@@ -303,6 +305,7 @@ var Menu = (_a) => {
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       __spreadProps(__spreadValues({
+        id,
         ref: setRefs,
         className: (0, import_clsx.default)(
           "shadow-4 rounded-base bg-background-grouped-primary-normal overflow-x-hidden overflow-y-auto flex flex-col outline-0",

package/dist/components/Menu.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Menu
-} from "../chunk-L4UM372R.js";
+} from "../chunk-VC3R5EUH.js";
 import "../chunk-Z4UCFUF7.js";
 import "../chunk-SEKKGFM6.js";
 import "../chunk-4T7F5BZZ.js";