@dmsi/wedgekit-react 0.0.29 → 0.0.30

package/dist/components/DateRangeInput.js

@@ -1,3 +1,11 @@
+import {
+  calculateCursorPosition,
+  formatDate,
+  formatInputValue,
+  isValidDate,
+  isValidDateRangeOrder,
+  parseInputDate
+} from "../chunk-KHQX42T7.js";
 import {
   findDocumentRoot
 } from "../chunk-4T7F5BZZ.js";
@@ -7,7 +15,7 @@ import {
 import "../chunk-S5K22XTH.js";
 import {
   CalendarRange
-} from "../chunk-OUSNH76S.js";
+} from "../chunk-PCCJ7L3N.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";
@@ -19,7 +27,7 @@ import {
 } from "../chunk-ORMEWXMH.js";
 
 // src/components/DateRangeInput.tsx
-import { useRef, useEffect, useState } from "react";
+import { useRef, useEffect, useState, useLayoutEffect } from "react";
 import { createPortal } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 var DateRangeInput = (_a) => {
@@ -31,7 +39,8 @@ var DateRangeInput = (_a) => {
     disabled,
     readOnly = false,
     single = false,
-    label: label
+    disableRange = false,
+    label
   } = _b, props = __objRest(_b, [
     "id",
     "value",
@@ -40,10 +49,12 @@ var DateRangeInput = (_a) => {
     "disabled",
     "readOnly",
     "single",
-    // Enables single date selection instead of range
+    "disableRange",
     "label"
   ]);
   const [visible, setVisible] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [isTyping, setIsTyping] = useState(false);
   const popoverRef = useRef(null);
   const triggerRef = useRef(null);
   const [calendarPosition, setCalendarPosition] = useState({
@@ -52,15 +63,23 @@ var DateRangeInput = (_a) => {
     width: 0
   });
   const [from, to] = value.split("|");
+  useEffect(() => {
+    if (!isTyping) {
+      setInputValue(formatDisplayValue(from, to));
+    }
+  }, [from, to, isTyping, disableRange]);
+  useLayoutEffect(() => {
+    if (visible) {
+      updatePosition();
+    }
+  }, [visible]);
   const updatePosition = () => {
     if (triggerRef.current) {
-      requestAnimationFrame(() => {
-        const rect = triggerRef.current.getBoundingClientRect();
-        setCalendarPosition({
-          top: rect.bottom + window.scrollY,
-          left: rect.left + window.scrollX,
-          width: rect.width
-        });
+      const rect = triggerRef.current.getBoundingClientRect();
+      setCalendarPosition({
+        top: rect.bottom + window.scrollY,
+        left: rect.left + window.scrollX,
+        width: rect.width
       });
     }
   };
@@ -77,18 +96,18 @@ var DateRangeInput = (_a) => {
     };
   }, []);
   useEffect(() => {
-    const handleKeyDown = (event) => {
+    const handleKeyDown2 = (event) => {
       var _a2;
       if (event.key === "Escape" && popoverRef.current) {
         setVisible(false);
         (_a2 = triggerRef.current) == null ? void 0 : _a2.blur();
       }
     };
-    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("keydown", handleKeyDown2);
     return () => {
-      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("keydown", handleKeyDown2);
     };
-  });
+  }, []);
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (popoverRef.current && !popoverRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
@@ -101,24 +120,312 @@ var DateRangeInput = (_a) => {
     };
   }, []);
   function handleRangeChange(fromValue, toValue) {
-    onChange(`${fromValue}|${toValue}`);
+    if (disableRange) {
+      onChange(`${fromValue}|${fromValue}`);
+    } else {
+      onChange(`${fromValue}|${toValue}`);
+    }
     setVisible(false);
+    setIsTyping(false);
   }
   const handleFocus = () => {
     if (readOnly) return;
     setVisible(true);
-    updatePosition();
   };
-  function formatDisplayValue(from2, to2) {
-    if (!from2 && !to2) return "";
-    if (from2 && to2) return `${formatDate(from2)} - ${formatDate(to2)}`;
-    if (from2) return `${formatDate(from2)} -`;
-    return "";
-  }
-  function formatDate(date) {
-    const [y, m, d] = date.split("-");
-    return `${m}/${d}/${y}`;
-  }
+  const handleClick = () => {
+    handleFocus();
+  };
+  const handleInputChange = (event) => {
+    if (readOnly) return;
+    const rawValue = event.target.value;
+    const cursorPosition = event.target.selectionStart || 0;
+    if (shouldPreventManualDash(rawValue)) {
+      handleManualDashRemoval(rawValue, cursorPosition);
+      return;
+    }
+    setIsTyping(true);
+    const formattedValue = formatInputValue2(rawValue);
+    const finalValue = shouldAutoInsertDash(formattedValue, rawValue) ? `${formattedValue} - ` : formattedValue;
+    setInputValue(finalValue);
+    const newCursorPosition = calculateNewCursorPosition(
+      rawValue,
+      formattedValue,
+      finalValue,
+      cursorPosition
+    );
+    requestAnimationFrame(() => {
+      setCursorPosition(newCursorPosition);
+    });
+    updateParentValue(finalValue);
+  };
+  const shouldPreventManualDash = (value2) => {
+    return !disableRange && value2.includes("-") && !value2.includes(" - ");
+  };
+  const handleManualDashRemoval = (rawValue, cursorPosition) => {
+    const cleanValue = rawValue.replace(/-/g, "");
+    const formattedCleanValue = formatInputValue2(cleanValue);
+    setInputValue(formattedCleanValue);
+    requestAnimationFrame(() => {
+      const newPosition = Math.min(cursorPosition - 1, formattedCleanValue.length);
+      setCursorPosition(newPosition);
+    });
+  };
+  const shouldAutoInsertDash = (formattedValue, rawValue) => {
+    if (disableRange || formattedValue.includes(" - ")) {
+      return false;
+    }
+    const completeDate = formattedValue.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+    if (!completeDate || rawValue.length !== formattedValue.length) {
+      return false;
+    }
+    const prevLength = rawValue.length - 1;
+    const prevFormatted = formatInputValue2(rawValue.slice(0, prevLength));
+    return !prevFormatted.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+  };
+  const calculateNewCursorPosition = (rawValue, formattedValue, finalValue, originalPosition) => {
+    if (finalValue !== formattedValue) {
+      return finalValue.length;
+    }
+    return calculateCursorPositionHelper(rawValue, finalValue, originalPosition, disableRange);
+  };
+  const setCursorPosition = (position) => {
+    if (triggerRef.current) {
+      triggerRef.current.setSelectionRange(position, position);
+    }
+  };
+  const updateParentValue = (value2) => {
+    if (disableRange) {
+      updateSingleDateValue(value2);
+    } else {
+      updateRangeValue(value2);
+    }
+  };
+  const updateSingleDateValue = (value2) => {
+    const parsedDate = parseInputDate(value2);
+    if (parsedDate && isValidDate(parsedDate)) {
+      onChange(`${parsedDate}|${parsedDate}`);
+    }
+  };
+  const updateRangeValue = (value2) => {
+    if (value2 === "") {
+      onChange("");
+      return;
+    }
+    const rangeMatch = value2.match(/^(.+?)\s*-\s*(.+)$/);
+    if (rangeMatch) {
+      updateCompleteRange(rangeMatch);
+    } else {
+      updatePartialRange(value2);
+    }
+  };
+  const updateCompleteRange = (rangeMatch) => {
+    const [, fromStr, toStr] = rangeMatch;
+    const fromDate = parseInputDate(fromStr.trim());
+    const toDate = parseInputDate(toStr.trim());
+    if (fromDate && toDate && isValidDateRange(fromDate, toDate)) {
+      onChange(`${fromDate}|${toDate}`);
+    }
+  };
+  const updatePartialRange = (value2) => {
+    const singleDate = parseInputDate(value2);
+    if (singleDate && isValidDate(singleDate)) {
+      onChange(`${singleDate}|`);
+    }
+  };
+  const handleBlur = () => {
+    setIsTyping(false);
+    if (disableRange) {
+      const parsedDate = parseInputDate(inputValue);
+      if (!parsedDate || !isValidDate(parsedDate)) {
+        const lastValidValue = formatDisplayValue(from, to);
+        setInputValue(lastValidValue || "");
+      }
+    } else {
+      const rangeMatch = inputValue.match(/^(.+?)\s*-\s*(.+)$/);
+      if (rangeMatch) {
+        const [, fromStr, toStr] = rangeMatch;
+        const fromDate = parseInputDate(fromStr.trim());
+        const toDate = parseInputDate(toStr.trim());
+        if (!fromDate || !toDate || !isValidDateRange(fromDate, toDate)) {
+          setInputValue("");
+          onChange("");
+        }
+      } else {
+        if (inputValue.includes(" - ")) {
+          setInputValue("");
+          onChange("");
+        } else {
+          const singleDate = parseInputDate(inputValue);
+          if (!singleDate || !isValidDate(singleDate)) {
+            setInputValue("");
+            onChange("");
+          } else {
+            setInputValue("");
+            onChange("");
+          }
+        }
+      }
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (!disableRange && event.key === "-") {
+      event.preventDefault();
+      return;
+    }
+    if (event.key === "Backspace") {
+      const input = event.target;
+      const cursorPosition = input.selectionStart || 0;
+      const value2 = input.value;
+      if (cursorPosition > 0 && value2[cursorPosition - 1] === "/") {
+        event.preventDefault();
+        const newValue = value2.slice(0, cursorPosition - 2) + value2.slice(cursorPosition);
+        const formattedValue = formatInputValue2(newValue);
+        setInputValue(formattedValue);
+        requestAnimationFrame(() => {
+          if (triggerRef.current) {
+            const newPosition = Math.max(0, cursorPosition - 2);
+            triggerRef.current.setSelectionRange(newPosition, newPosition);
+          }
+        });
+        setIsTyping(true);
+        return;
+      }
+      if (!disableRange && value2.includes(" - ")) {
+        const dashIndex = value2.indexOf(" - ");
+        const dashStart = dashIndex;
+        const dashEnd = dashIndex + 3;
+        if (cursorPosition >= dashStart && cursorPosition <= dashEnd) {
+          event.preventDefault();
+          const beforeDash = value2.slice(0, dashStart).trim();
+          const yearMatch = beforeDash.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+          if (yearMatch) {
+            const [, month, day, year] = yearMatch;
+            const truncatedYear = year.slice(0, -1);
+            const newValue = `${month}/${day}/${truncatedYear}`;
+            const formattedValue = formatInputValue2(newValue);
+            setInputValue(formattedValue);
+            onChange("");
+            requestAnimationFrame(() => {
+              if (triggerRef.current) {
+                triggerRef.current.setSelectionRange(formattedValue.length, formattedValue.length);
+              }
+            });
+          } else {
+            const formattedValue = formatInputValue2(beforeDash);
+            setInputValue(formattedValue);
+            const singleDate = parseInputDate(beforeDash);
+            if (singleDate && isValidDate(singleDate)) {
+              onChange(`${singleDate}|`);
+            } else {
+              onChange("");
+            }
+            requestAnimationFrame(() => {
+              if (triggerRef.current) {
+                const newPosition = formattedValue.length;
+                triggerRef.current.setSelectionRange(newPosition, newPosition);
+              }
+            });
+          }
+          setIsTyping(true);
+          return;
+        }
+        if (cursorPosition === dashEnd) {
+          event.preventDefault();
+          const beforeDash = value2.slice(0, dashStart).trim();
+          const newValue = `${beforeDash} - `;
+          setInputValue(newValue);
+          const singleDate = parseInputDate(beforeDash);
+          if (singleDate && isValidDate(singleDate)) {
+            onChange(`${singleDate}|`);
+          }
+          requestAnimationFrame(() => {
+            if (triggerRef.current) {
+              triggerRef.current.setSelectionRange(newValue.length, newValue.length);
+            }
+          });
+          setIsTyping(true);
+          return;
+        }
+      }
+    }
+    if (event.key === "Delete") {
+      const input = event.target;
+      const cursorPosition = input.selectionStart || 0;
+      const value2 = input.value;
+      if (!disableRange && value2.includes(" - ")) {
+        const dashIndex = value2.indexOf(" - ");
+        const dashStart = dashIndex;
+        const dashEnd = dashIndex + 3;
+        if (cursorPosition >= dashStart && cursorPosition <= dashEnd) {
+          event.preventDefault();
+          const beforeDash = value2.slice(0, dashStart).trim();
+          const yearMatch = beforeDash.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+          if (yearMatch) {
+            const [, month, day, year] = yearMatch;
+            const truncatedYear = year.slice(0, -1);
+            const newValue = `${month}/${day}/${truncatedYear}`;
+            const formattedValue = formatInputValue2(newValue);
+            setInputValue(formattedValue);
+            onChange("");
+            requestAnimationFrame(() => {
+              if (triggerRef.current) {
+                triggerRef.current.setSelectionRange(formattedValue.length, formattedValue.length);
+              }
+            });
+          } else {
+            const formattedValue = formatInputValue2(beforeDash);
+            setInputValue(formattedValue);
+            const singleDate = parseInputDate(beforeDash);
+            if (singleDate && isValidDate(singleDate)) {
+              onChange(`${singleDate}|`);
+            } else {
+              onChange("");
+            }
+            requestAnimationFrame(() => {
+              if (triggerRef.current) {
+                const newPosition = formattedValue.length;
+                triggerRef.current.setSelectionRange(newPosition, newPosition);
+              }
+            });
+          }
+          setIsTyping(true);
+          return;
+        }
+      }
+    }
+    if (event.key === "Enter") {
+      if (disableRange) {
+        const parsedDate = parseInputDate(inputValue);
+        if (parsedDate && isValidDate(parsedDate)) {
+          onChange(`${parsedDate}|${parsedDate}`);
+          setVisible(false);
+          setIsTyping(false);
+        }
+      } else {
+        const rangeMatch = inputValue.match(/^(.+?)\s*-\s*(.+)$/);
+        if (rangeMatch) {
+          const [, fromStr, toStr] = rangeMatch;
+          const fromDate = parseInputDate(fromStr.trim());
+          const toDate = parseInputDate(toStr.trim());
+          if (fromDate && toDate && isValidDateRange(fromDate, toDate)) {
+            onChange(`${fromDate}|${toDate}`);
+            setVisible(false);
+            setIsTyping(false);
+          } else {
+            setInputValue("");
+            onChange("");
+            setVisible(false);
+            setIsTyping(false);
+          }
+        } else {
+          setInputValue("");
+          onChange("");
+          setVisible(false);
+          setIsTyping(false);
+        }
+      }
+    }
+  };
   return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsx(
       InputBase,
@@ -128,15 +435,17 @@ var DateRangeInput = (_a) => {
           triggerRef.current = el;
         }
       }, props), {
-        value: formatDisplayValue(from, to),
-        placeholder,
+        value: inputValue,
+        placeholder: disableRange ? "MM/DD/YYYY" : placeholder,
         disabled,
+        readOnly,
         after: /* @__PURE__ */ jsx(Icon, { name: "calendar_month" }),
         onFocus: handleFocus,
-        readOnly,
-        label,
-        onChange: () => {
-        }
+        onClick: handleClick,
+        onChange: handleInputChange,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        label
       })
     ),
     visible && !readOnly && createPortal(
@@ -160,7 +469,8 @@ var DateRangeInput = (_a) => {
               to,
               onChange: handleRangeChange,
               cardStyle: true,
-              mode: single ? "single" : "double"
+              mode: single ? "single" : "double",
+              disableRange
             }
           )
         }
@@ -168,8 +478,77 @@ var DateRangeInput = (_a) => {
       findDocumentRoot(popoverRef.current)
     )
   ] });
+  function formatInputValue2(value2) {
+    return formatInputValueHelper(value2, disableRange);
+  }
+  function formatDisplayValue(from2, to2) {
+    return formatDisplayValueHelper(from2, to2, disableRange);
+  }
 };
 DateRangeInput.displayName = "DateRangeInput";
+function isValidDateRange(fromDate, toDate) {
+  return isValidDateRangeOrder(fromDate, toDate);
+}
+function formatInputValueHelper(value, disableRange) {
+  if (disableRange) {
+    return formatInputValue(value);
+  }
+  if (value.includes(" - ")) {
+    const [from, to] = value.split(" - ");
+    const fromFormatted = formatInputValue(from);
+    const toFormatted = formatInputValue(to || "");
+    return `${fromFormatted} - ${toFormatted}`;
+  }
+  const cleanValue = value.replace(/-/g, "");
+  return formatInputValue(cleanValue);
+}
+function calculateCursorPositionHelper(originalValue, formattedValue, originalPosition, disableRange) {
+  if (!disableRange && formattedValue.includes(" - ")) {
+    const dashPosition = formattedValue.indexOf(" - ");
+    const originalDashPosition = originalValue.indexOf("-");
+    if (originalDashPosition !== -1 && originalPosition > originalDashPosition) {
+      const afterDashDigits = originalValue.slice(originalDashPosition + 1).replace(/\D/g, "").length;
+      const formattedAfterDash = formattedValue.slice(dashPosition + 3);
+      let newPosition = dashPosition + 3;
+      let digitCount = 0;
+      for (let i = 0; i < formattedAfterDash.length; i++) {
+        if (/\d/.test(formattedAfterDash[i])) {
+          digitCount++;
+          if (digitCount >= afterDashDigits) {
+            if (i + 1 < formattedAfterDash.length && formattedAfterDash[i + 1] === "/") {
+              newPosition = dashPosition + 3 + i + 2;
+            } else {
+              newPosition = dashPosition + 3 + i + 1;
+            }
+            break;
+          }
+        }
+        if (digitCount < afterDashDigits) {
+          newPosition = dashPosition + 3 + i + 1;
+        }
+      }
+      return Math.min(newPosition, formattedValue.length);
+    }
+  }
+  return calculateCursorPosition(originalValue, formattedValue, originalPosition);
+}
+function formatDisplayValueHelper(from, to, disableRange) {
+  if (!from && !to) {
+    return "";
+  }
+  const fromValid = from ? isValidDate(from) : false;
+  const toValid = to ? isValidDate(to) : false;
+  if (disableRange) {
+    return fromValid && from ? formatDate(from) : "";
+  }
+  if (fromValid && toValid && from && to && isValidDateRange(from, to)) {
+    return `${formatDate(from)} - ${formatDate(to)}`;
+  }
+  if (fromValid && !to && from) {
+    return `${formatDate(from)} - `;
+  }
+  return "";
+}
 export {
   DateRangeInput
 };

package/dist/components/MenuOption.cjs

@@ -409,7 +409,8 @@ var MenuOption = ({
   );
   const actionDisabledStyles = variant === "action" && disabled && (0, import_clsx5.default)("text-text-action-disabled");
   const disabledStyles = disabled && (0, import_clsx5.default)("bg-transparent cursor-default pointer-events-none");
-  const renderChildren = typeof children === "string" && highlightMatchingText ? highlightMatch(children, menuValue) : children;
+  const processChildren = typeof children === "string" && highlightMatchingText ? highlightMatch(children, menuValue) : children;
+  const renderChildren = typeof children === "object" ? children : variant === "action" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Label, { padded: true, className: textLabelStyles, children: processChildren }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Paragraph, { padded: true, className: textLabelStyles, children: processChildren });
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",
@@ -443,7 +444,7 @@ var MenuOption = ({
         "aria-haspopup": subMenu ? "menu" : void 0,
         children: [
           before && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "shrink-0 flex items-center", children: before }),
-          variant === "action" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Label, { padded: true, className: textLabelStyles, children: renderChildren }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Paragraph, { padded: true, className: textLabelStyles, children: renderChildren }),
+          renderChildren,
           renderAfterProp()
         ]
       })

package/dist/components/MenuOption.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   MenuOption
-} from "../chunk-PDDZ5PMY.js";
+} from "../chunk-S46RZBT4.js";
 import "../chunk-SEKKGFM6.js";
 import "../chunk-S5K22XTH.js";
 import "../chunk-VG4EPHJA.js";

package/dist/components/MobileDataGrid.cjs

@@ -99,7 +99,7 @@ function Icon(_a) {
 // src/components/Stack.tsx
 var import_clsx2 = __toESM(require("clsx"), 1);
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var useFlexClassNames = ({ items, justify, grow }) => (0, import_clsx2.default)(
+var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx2.default)(
   "flex",
   items === "start" && "items-start",
   grow && "grow",
@@ -172,7 +172,7 @@ var Stack = (_a) => {
     "left",
     "id"
   ]);
-  const flexClassNames = useFlexClassNames({ items, justify, grow });
+  const flexClassNames = getFlexClassNames({ items, justify, grow });
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     __spreadProps(__spreadValues({
@@ -194,6 +194,7 @@ var Stack = (_a) => {
       },
       className: (0, import_clsx2.default)(
         "scrollbar-thin",
+        "max-w-screen",
         width !== "fit" && "w-full",
         width === "full" && "w-full",
         centered && "mx-auto",

package/dist/components/MobileDataGrid.js

@@ -3,7 +3,7 @@ import {
 } from "../chunk-CHTO7PW4.js";
 import {
   Stack
-} from "../chunk-57WRM337.js";
+} from "../chunk-5POWRPIO.js";
 import {
   Heading3
 } from "../chunk-J6LETUNM.js";

package/dist/components/NestedMenu.cjs

@@ -412,7 +412,8 @@ var MenuOption = ({
   );
   const actionDisabledStyles = variant === "action" && disabled && (0, import_clsx5.default)("text-text-action-disabled");
   const disabledStyles = disabled && (0, import_clsx5.default)("bg-transparent cursor-default pointer-events-none");
-  const renderChildren = typeof children === "string" && highlightMatchingText ? highlightMatch(children, menuValue) : children;
+  const processChildren = typeof children === "string" && highlightMatchingText ? highlightMatch(children, menuValue) : children;
+  const renderChildren = typeof children === "object" ? children : variant === "action" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Label, { padded: true, className: textLabelStyles, children: processChildren }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Paragraph, { padded: true, className: textLabelStyles, children: processChildren });
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",
@@ -446,7 +447,7 @@ var MenuOption = ({
         "aria-haspopup": subMenu ? "menu" : void 0,
         children: [
           before && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "shrink-0 flex items-center", children: before }),
-          variant === "action" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Label, { padded: true, className: textLabelStyles, children: renderChildren }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Paragraph, { padded: true, className: textLabelStyles, children: renderChildren }),
+          renderChildren,
           renderAfterProp()
         ]
       })

package/dist/components/NestedMenu.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   MenuOption
-} from "../chunk-PDDZ5PMY.js";
+} from "../chunk-S46RZBT4.js";
 import "../chunk-SEKKGFM6.js";
 import "../chunk-S5K22XTH.js";
 import "../chunk-VG4EPHJA.js";

package/dist/components/Notification.cjs

@@ -466,7 +466,7 @@ function Icon(_a) {
 // src/components/Stack.tsx
 var import_clsx6 = __toESM(require("clsx"), 1);
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var useFlexClassNames = ({ items, justify, grow }) => (0, import_clsx6.default)(
+var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx6.default)(
   "flex",
   items === "start" && "items-start",
   grow && "grow",
@@ -539,7 +539,7 @@ var Stack = (_a) => {
     "left",
     "id"
   ]);
-  const flexClassNames = useFlexClassNames({ items, justify, grow });
+  const flexClassNames = getFlexClassNames({ items, justify, grow });
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     __spreadProps(__spreadValues({
@@ -561,6 +561,7 @@ var Stack = (_a) => {
       },
       className: (0, import_clsx6.default)(
         "scrollbar-thin",
+        "max-w-screen",
         width !== "fit" && "w-full",
         width === "full" && "w-full",
         centered && "mx-auto",

package/dist/components/Notification.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Stack
-} from "../chunk-57WRM337.js";
+} from "../chunk-5POWRPIO.js";
 import {
   Heading3
 } from "../chunk-J6LETUNM.js";