@dmsi/wedgekit-react 0.0.26 → 0.0.28

package/dist/{chunk-KDEPZ6I7.js → chunk-2S2Z3L56.js}

@@ -1,6 +1,6 @@
 import {
   InputBase
-} from "./chunk-OISE6NMA.js";
+} from "./chunk-QV2EFOYF.js";
 import {
   Icon
 } from "./chunk-IGQVA7SC.js";
@@ -16,6 +16,7 @@ import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var Select = (_a) => {
   var _b = _a, {
+    id,
     label,
     error,
     children,
@@ -28,6 +29,7 @@ var Select = (_a) => {
     displayValue,
     value
   } = _b, props = __objRest(_b, [
+    "id",
     "label",
     "error",
     "children",
@@ -56,6 +58,7 @@ var Select = (_a) => {
     /* @__PURE__ */ jsx(
       InputBase,
       __spreadProps(__spreadValues({
+        id,
         inputContainerRef,
         ref: inputRef,
         label,
@@ -95,6 +98,7 @@ var Select = (_a) => {
       })
     ),
     renderMenu ? renderMenu({
+      id: `${id}-menu`,
       positionTo: inputContainerRef,
       show,
       setShow,

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

@@ -6,11 +6,13 @@ var ModalScrim = ({
   size = "small",
   children,
   onClick,
-  ref
+  ref,
+  id
 }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
+      id,
       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-Z2LOGSGE.js → chunk-4N2PED4P.js}

@@ -1,9 +1,9 @@
 import {
   Label
-} from "./chunk-S7R37IUP.js";
+} from "./chunk-S5K22XTH.js";
 import {
   Button
-} from "./chunk-T6HZARR7.js";
+} from "./chunk-MZJS2ZAU.js";
 import {
   Icon
 } from "./chunk-IGQVA7SC.js";
@@ -25,6 +25,7 @@ import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 var OptionPill = (_a) => {
   var _b = _a, {
+    id,
     selected = false,
     onClick,
     onRemove,
@@ -33,6 +34,7 @@ var OptionPill = (_a) => {
     children,
     className
   } = _b, props = __objRest(_b, [
+    "id",
     "selected",
     "onClick",
     "onRemove",
@@ -63,6 +65,7 @@ var OptionPill = (_a) => {
   return /* @__PURE__ */ jsxs(
     "div",
     __spreadProps(__spreadValues(__spreadValues({
+      id,
       onClick: handleOnClick
     }, props), additionalAttributes), {
       className: clsx(
@@ -76,10 +79,19 @@ var OptionPill = (_a) => {
         textColor
       ),
       children: [
-        /* @__PURE__ */ jsx(Label, { padded: true, className: componentPaddingYUsingComponentGap, children }),
+        /* @__PURE__ */ jsx(
+          Label,
+          {
+            id: id ? `${id}-label` : void 0,
+            padded: true,
+            className: componentPaddingYUsingComponentGap,
+            children
+          }
+        ),
         removable && /* @__PURE__ */ jsx(
           Button,
           {
+            id: id ? `${id}-remove-button` : void 0,
             onClick: handleOnRemove,
             disabled,
             className: clsx(

package/dist/{chunk-U42SKNR6.js → chunk-57WRM337.js}

@@ -1,3 +1,9 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
 // src/components/Stack.tsx
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
@@ -16,38 +22,70 @@ var useFlexClassNames = ({ items, justify, grow }) => clsx(
   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__ */ 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,
@@ -95,7 +133,7 @@ var Stack = ({
         rounded && "rounded"
       ),
       children
-    }
+    })
   );
 };
 

package/dist/{chunk-ZFGGZXB6.js → chunk-AY7ELVQY.js}

@@ -17,20 +17,23 @@ var Display = (_a) => {
     as,
     color,
     align,
-    variant = "display1"
+    variant = "display1",
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "children",
     "as",
     "color",
     "align",
-    "variant"
+    "variant",
+    "id"
   ]);
   const defaultElement = variant === "display1" ? "h1" : "h2";
   const Element = as != null ? as : defaultElement;
   return /* @__PURE__ */ jsx(
     Element,
     __spreadProps(__spreadValues({
+      id,
       className: clsx(
         typography[variant],
         className,

package/dist/{chunk-I2UVVKQI.js → chunk-CHTO7PW4.js}

@@ -2,9 +2,10 @@
 import { jsx } from "react/jsx-runtime";
 function Theme({
   theme,
-  children
+  children,
+  id
 }) {
-  return /* @__PURE__ */ jsx("div", { className: "contents", "data-theme": theme, children });
+  return /* @__PURE__ */ jsx("div", { id, className: "contents", "data-theme": theme, children });
 }
 
 export {

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

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

package/dist/{chunk-5TLFMKSR.js → chunk-INYI65WW.js}

@@ -1,6 +1,6 @@
 import {
   Button
-} from "./chunk-T6HZARR7.js";
+} from "./chunk-MZJS2ZAU.js";
 import {
   __objRest,
   __spreadProps,
@@ -18,14 +18,16 @@ var ContentTab = (_a) => {
     className,
     disabled = false,
     onClick,
-    ref
+    ref,
+    id
   } = _b, props = __objRest(_b, [
     "label",
     "selected",
     "className",
     "disabled",
     "onClick",
-    "ref"
+    "ref",
+    "id"
   ]);
   const [active, setActive] = useState(false);
   const handleClick = useCallback(
@@ -45,10 +47,11 @@ var ContentTab = (_a) => {
     !active && disabled && "bg-text-action-primary-disabled",
     className
   );
-  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+  return /* @__PURE__ */ jsxs("div", { id, className: "relative", children: [
     /* @__PURE__ */ jsx(
       Button,
       __spreadProps(__spreadValues({
+        id: id ? `${id}-button` : void 0,
         ref,
         variant: "tertiary",
         disabled,
@@ -62,7 +65,14 @@ var ContentTab = (_a) => {
         children: label
       })
     ),
-    selected && /* @__PURE__ */ jsx("div", { className: computedClassName, children: " " })
+    selected && /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: id ? `${id}-indicator` : void 0,
+        className: computedClassName,
+        children: " "
+      }
+    )
   ] });
 };
 ContentTab.displayName = "ContentTab";

package/dist/{chunk-TJ44JJCB.js → chunk-J6LETUNM.js}

@@ -17,20 +17,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__ */ jsx(
     Element,
     __spreadProps(__spreadValues({
+      id,
       className: clsx(
         typography[variant],
         className,

package/dist/{chunk-T6HZARR7.js → chunk-MZJS2ZAU.js}

@@ -28,7 +28,8 @@ var Button = (_a) => {
     children,
     iconOnly = false,
     colorClassName,
-    href
+    href,
+    id
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -41,7 +42,8 @@ var Button = (_a) => {
     "children",
     "iconOnly",
     "colorClassName",
-    "href"
+    "href",
+    "id"
   ]);
   const primaryVariantStyles = variant === "primary" && clsx(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -131,6 +133,7 @@ var Button = (_a) => {
   return /* @__PURE__ */ jsxs(
     Element,
     __spreadProps(__spreadValues({
+      id,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -138,7 +141,7 @@ var Button = (_a) => {
       href,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ jsx("span", { className: labelClasses, children }),
+        !iconOnly && children && /* @__PURE__ */ jsx("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })

package/dist/{chunk-ZCBSLV7U.js → chunk-O4M2GISS.js}

@@ -17,19 +17,22 @@ var Subheader = (_a) => {
     as = "span",
     align,
     color,
-    tall
+    tall,
+    id
   } = _b, props = __objRest(_b, [
     "className",
     "children",
     "as",
     "align",
     "color",
-    "tall"
+    "tall",
+    "id"
   ]);
   const Element = as;
   return /* @__PURE__ */ jsx(
     Element,
     __spreadProps(__spreadValues({
+      id,
       className: clsx(
         typography.subheader,
         className,

package/dist/{chunk-OUTEIXV4.js → chunk-OUSNH76S.js}

@@ -35,7 +35,8 @@ function DateCell(_a) {
     onMouseEnter,
     onMouseLeave,
     cellPadding = "",
-    isRangeDisabled = false
+    isRangeDisabled = false,
+    id
   } = _b, props = __objRest(_b, [
     "date",
     "isInMonth",
@@ -49,11 +50,13 @@ function DateCell(_a) {
     "onMouseEnter",
     "onMouseLeave",
     "cellPadding",
-    "isRangeDisabled"
+    "isRangeDisabled",
+    "id"
   ]);
   return /* @__PURE__ */ jsx(
     "span",
     __spreadProps(__spreadValues({}, props), {
+      id,
       className: clsx(
         "flex items-center justify-center aspect-square select-none transition-colors border duration-100 font-medium",
         typography.caption,
@@ -99,7 +102,8 @@ function CalendarRange({
   isDateAvailable,
   mode = "double",
   cardStyle = false,
-  disableRange = false
+  disableRange = false,
+  id
 }) {
   const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
   const parseDate = (d) => {
@@ -168,6 +172,7 @@ function CalendarRange({
   return /* @__PURE__ */ jsx(
     "div",
     {
+      id,
       className: clsx(
         "relative bg-background-grouped-primary-normal rounded-base w-fit",
         layoutPaddding,
@@ -207,6 +212,7 @@ function CalendarRange({
                           idx === 0 ? /* @__PURE__ */ jsx(
                             "button",
                             {
+                              id: id ? `${id}-prev-month-button` : void 0,
                               type: "button",
                               className: clsx(
                                 "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
@@ -224,6 +230,7 @@ function CalendarRange({
                           (mode === "double" ? idx === 1 : true) ? /* @__PURE__ */ jsx(
                             "button",
                             {
+                              id: id ? `${id}-next-month-button` : void 0,
                               type: "button",
                               className: clsx(
                                 "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
@@ -266,6 +273,7 @@ function CalendarRange({
                       return /* @__PURE__ */ jsx(
                         DateCell,
                         {
+                          id: id ? `${id}-date-${date.toString()}` : void 0,
                           date,
                           isInMonth: !!isInMonth,
                           isToday: !!isToday,

package/dist/{chunk-YDREJNAS.js → chunk-PDDZ5PMY.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk-SEKKGFM6.js";
 import {
   Label
-} from "./chunk-S7R37IUP.js";
+} from "./chunk-S5K22XTH.js";
 import {
   Paragraph
-} from "./chunk-UIQ733QP.js";
+} from "./chunk-VG4EPHJA.js";
 import {
   Icon
 } from "./chunk-IGQVA7SC.js";
@@ -25,6 +25,7 @@ import clsx from "clsx";
 import { useId, useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var MenuOption = ({
+  id,
   children,
   disabled = false,
   variant = "normal",
@@ -96,6 +97,7 @@ var MenuOption = ({
     /* @__PURE__ */ jsxs(
       "div",
       __spreadProps(__spreadValues({
+        id,
         ref: actualRef,
         className: clsx(
           "flex items-center cursor-pointer w-full text-left relative outline-none",
@@ -136,7 +138,15 @@ var MenuOption = ({
         onMouseLeave: handleMouseLeave,
         "data-submenu-parent": menuId.current,
         "data-menu-level": subMenuLevel + 1,
-        children: subMenu({ menuId: menuId.current, positionTo: actualRef, mobilePositionTo, position: "right", subMenuLevel, mobileBackMenuOption, mobileHide: isMobile && activeMenu !== menuId.current })
+        children: subMenu({
+          menuId: menuId.current,
+          positionTo: actualRef,
+          mobilePositionTo,
+          position: "right",
+          subMenuLevel,
+          mobileBackMenuOption,
+          mobileHide: isMobile && activeMenu !== menuId.current
+        })
       }
     )
   ] });
@@ -155,6 +165,7 @@ var MenuOption = ({
     return /* @__PURE__ */ jsx(
       MenuOption,
       {
+        id: id ? `${id}-back` : void 0,
         onClick: () => {
           closeSubMenuLevel == null ? void 0 : closeSubMenuLevel(currentSubMenuLevel != null ? currentSubMenuLevel : 0);
         },
@@ -170,7 +181,10 @@ function highlightMatch(text, searchValue) {
   if (!searchValue || !searchValue.trim()) {
     return text;
   }
-  const regex = new RegExp(`(${searchValue.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
+  const regex = new RegExp(
+    `(${searchValue.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`,
+    "gi"
+  );
   const parts = text.split(regex);
   return parts.map(
     (part, index) => regex.test(part) ? /* @__PURE__ */ jsx("span", { className: "font-bold", children: part }, index) : part

package/dist/{chunk-4RD5ZF2V.js → chunk-QBIEU25R.js}

@@ -1,12 +1,18 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+
 // src/components/LogoDMSiTopBar.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-function LogoDMSiTopBar() {
+function LogoDMSiTopBar(props) {
   return /* @__PURE__ */ 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: [
@@ -46,7 +52,7 @@ function LogoDMSiTopBar() {
           }
         )
       ]
-    }
+    })
   );
 }
 

package/dist/chunk-QUPHLL7D.js

@@ -0,0 +1,61 @@
+import {
+  Button
+} from "./chunk-MZJS2ZAU.js";
+import {
+  Icon
+} from "./chunk-IGQVA7SC.js";
+import {
+  layoutGroupGap,
+  layoutPaddding
+} from "./chunk-RDLEIAQU.js";
+
+// src/components/ModalButtons.tsx
+import clsx from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ModalButtons = ({
+  onClose,
+  onContinue,
+  customActions,
+  id
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      className: clsx(
+        "border-t border-neutral-300 flex justify-end",
+        layoutPaddding,
+        layoutGroupGap
+      ),
+      children: customActions != null ? customActions : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            id: id ? `${id}-close-button` : void 0,
+            variant: "secondary",
+            leftIcon: /* @__PURE__ */ jsx(Icon, { name: "close", size: 24 }),
+            onClick: onClose,
+            className: "max-sm:w-full",
+            children: "Close"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            id: id ? `${id}-continue-button` : void 0,
+            variant: "primary",
+            leftIcon: /* @__PURE__ */ jsx(Icon, { name: "check", size: 24 }),
+            className: "max-sm:w-full",
+            onClick: onContinue,
+            children: "Continue"
+          }
+        )
+      ] })
+    }
+  );
+};
+ModalButtons.displayName = "ModalButtons";
+
+export {
+  ModalButtons
+};