analytica-frontend-lib 1.0.43 → 1.0.45

package/dist/index.js

@@ -39,6 +39,7 @@ __export(src_exports, {
   MenuItem: () => MenuItem,
   MenuLabel: () => MenuLabel,
   MenuSeparator: () => MenuSeparator,
+  Modal: () => Modal_default,
   NavButton: () => NavButton_default,
   ProfileMenuFooter: () => ProfileMenuFooter,
   ProfileMenuHeader: () => ProfileMenuHeader,
@@ -1301,7 +1302,7 @@ var STATE_CLASSES4 = {
   default: "border-border-300 placeholder:text-text-600 hover:border-border-400",
   error: "border-2 border-indicator-error placeholder:text-text-600",
   disabled: "border-border-300 placeholder:text-text-600 cursor-not-allowed opacity-40",
-  "read-only": "border-border-300 !text-text-600 cursor-default focus:outline-none bg-background-50"
+  "read-only": "border-transparent !text-text-600 cursor-default focus:outline-none bg-transparent"
 };
 var VARIANT_CLASSES = {
   outlined: "border rounded-lg",
@@ -1340,6 +1341,9 @@ var getCombinedClasses = (actualState, variant) => {
   if (actualState === "error" && variant === "underlined") {
     return "border-0 border-b-2 border-indicator-error rounded-none bg-transparent focus:outline-none focus:border-primary-950 placeholder:text-text-600";
   }
+  if (actualState === "read-only" && variant === "underlined") {
+    return "border-0 border-b-0 rounded-none bg-transparent focus:outline-none !text-text-900 cursor-default";
+  }
   return `${stateClasses} ${variantClasses}`;
 };
 var Input = (0, import_react8.forwardRef)(
@@ -1370,7 +1374,7 @@ var Input = (0, import_react8.forwardRef)(
       [actualState, variant]
     );
     const iconSize = getIconSize(size);
-    const baseClasses = "bg-background w-full py-2 px-3 font-normal text-text-900 focus:outline-primary-950";
+    const baseClasses = `bg-background w-full py-2 ${actualState === "read-only" ? "px-0" : "px-3"} font-normal text-text-900 focus:outline-primary-950`;
     const generatedId = (0, import_react8.useId)();
     const inputId = id ?? `input-${generatedId}`;
     const togglePasswordVisibility = () => setShowPassword(!showPassword);
@@ -1522,101 +1526,397 @@ var VARIANT_CLASSES2 = {
     // Green for performance (#84D3A2)
   }
 };
-var ProgressBar = ({
-  value,
-  max = 100,
-  size = "medium",
-  variant = "blue",
-  label,
-  showPercentage = false,
-  className = "",
-  labelClassName = "",
-  percentageClassName = ""
-}) => {
+var calculateProgressValues = (value, max) => {
   const safeValue = isNaN(value) ? 0 : value;
   const clampedValue = Math.max(0, Math.min(safeValue, max));
   const percentage = max === 0 ? 0 : clampedValue / max * 100;
-  const sizeClasses = SIZE_CLASSES7[size];
-  const variantClasses = VARIANT_CLASSES2[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return { clampedValue, percentage };
+};
+var shouldShowHeader = (label, showPercentage, showHitCount) => {
+  return !!(label || showPercentage || showHitCount);
+};
+var getDisplayPriority = (showHitCount, showPercentage, label, clampedValue, max, percentage) => {
+  if (showHitCount) {
+    return {
+      type: "hitCount",
+      content: `${Math.round(clampedValue)} de ${max}`,
+      hasMetrics: true
+    };
+  }
+  if (showPercentage) {
+    return {
+      type: "percentage",
+      content: `${Math.round(percentage)}%`,
+      hasMetrics: true
+    };
+  }
+  return {
+    type: "label",
+    content: label,
+    hasMetrics: false
+  };
+};
+var getCompactLayoutConfig = ({
+  showPercentage,
+  showHitCount,
+  percentage,
+  clampedValue,
+  max,
+  label,
+  percentageClassName,
+  labelClassName
+}) => {
+  const displayPriority = getDisplayPriority(
+    showHitCount,
+    showPercentage,
+    label,
+    clampedValue,
+    max,
+    percentage
+  );
+  return {
+    color: displayPriority.hasMetrics ? "text-primary-600" : "text-primary-700",
+    className: displayPriority.hasMetrics ? percentageClassName : labelClassName,
+    content: displayPriority.content
+  };
+};
+var getDefaultLayoutDisplayConfig = (size, label, showPercentage) => ({
+  showHeader: size === "small" && !!(label || showPercentage),
+  showPercentage: size === "medium" && showPercentage,
+  showLabel: size === "medium" && !!label && !showPercentage
+  // Only show label when percentage is not shown
+});
+var renderStackedHitCountDisplay = (showHitCount, showPercentage, clampedValue, max, percentage, percentageClassName) => {
+  if (!showHitCount && !showPercentage) return null;
+  const displayPriority = getDisplayPriority(
+    showHitCount,
+    showPercentage,
+    null,
+    // label is not relevant for stacked layout metrics display
+    clampedValue,
+    max,
+    percentage
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "div",
     {
-      className: `flex ${sizeClasses.layout} ${size === "medium" ? "gap-2" : sizeClasses.spacing} ${className}`,
-      children: [
-        size === "small" && (label || showPercentage) && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-row items-center justify-between w-full", children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-            Text_default,
-            {
-              as: "div",
-              size: "xs",
-              weight: "medium",
-              className: `text-text-950 leading-none tracking-normal text-center ${labelClassName}`,
-              children: label
-            }
-          ),
-          showPercentage && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-            Text_default,
-            {
-              size: "xs",
-              weight: "medium",
-              className: `text-text-950 leading-none tracking-normal text-center ${percentageClassName}`,
-              children: [
-                Math.round(percentage),
-                "%"
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-          "div",
-          {
-            className: `${size === "medium" ? "flex-grow" : "w-full"} ${sizeClasses.container} ${variantClasses.background} ${sizeClasses.borderRadius} overflow-hidden relative`,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                "progress",
-                {
-                  value: clampedValue,
-                  max,
-                  "aria-label": typeof label === "string" ? label : "Progress",
-                  className: "absolute inset-0 w-full h-full opacity-0"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                "div",
-                {
-                  className: `${sizeClasses.bar} ${variantClasses.fill} ${sizeClasses.borderRadius} transition-all duration-300 ease-out shadow-hard-shadow-3`,
-                  style: { width: `${percentage}%` }
-                }
-              )
-            ]
-          }
-        ),
-        size === "medium" && showPercentage && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      className: `text-xs font-medium leading-[14px] text-right ${percentageClassName}`,
+      children: displayPriority.type === "hitCount" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-success-200", children: Math.round(clampedValue) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "text-text-600", children: [
+          " de ",
+          max
+        ] })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Text_default, { size: "xs", weight: "medium", className: "text-success-200", children: [
+        Math.round(percentage),
+        "%"
+      ] })
+    }
+  );
+};
+var ProgressBarBase = ({
+  clampedValue,
+  max,
+  percentage,
+  label,
+  variantClasses,
+  containerClassName,
+  fillClassName
+}) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  "div",
+  {
+    className: `${containerClassName} ${variantClasses.background} overflow-hidden relative`,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "progress",
+        {
+          value: clampedValue,
+          max,
+          "aria-label": typeof label === "string" ? `${label}: ${Math.round(percentage)}% complete` : `Progress: ${Math.round(percentage)}% of ${max}`,
+          className: "absolute inset-0 w-full h-full opacity-0"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "div",
+        {
+          className: `${fillClassName} ${variantClasses.fill} transition-all duration-300 ease-out`,
+          style: { width: `${percentage}%` }
+        }
+      )
+    ]
+  }
+);
+var StackedLayout = ({
+  className,
+  label,
+  showPercentage,
+  showHitCount,
+  labelClassName,
+  percentageClassName,
+  clampedValue,
+  max,
+  percentage,
+  variantClasses,
+  dimensions
+}) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  "div",
+  {
+    className: `flex flex-col items-start gap-2 ${dimensions.width} ${dimensions.height} ${className}`,
+    children: [
+      shouldShowHeader(label, showPercentage, showHitCount) && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-row justify-between items-center w-full h-[19px]", children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           Text_default,
           {
-            size: "xs",
+            as: "div",
+            size: "md",
             weight: "medium",
-            className: `text-text-950 leading-none tracking-normal text-center flex-none ${percentageClassName}`,
-            children: [
-              Math.round(percentage),
-              "%"
-            ]
+            className: `text-text-600 leading-[19px] ${labelClassName}`,
+            children: label
           }
         ),
-        size === "medium" && label && !showPercentage && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        renderStackedHitCountDisplay(
+          showHitCount,
+          showPercentage,
+          clampedValue,
+          max,
+          percentage,
+          percentageClassName
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        ProgressBarBase,
+        {
+          clampedValue,
+          max,
+          percentage,
+          label,
+          variantClasses,
+          containerClassName: "w-full h-2 rounded-lg",
+          fillClassName: "h-2 rounded-lg shadow-hard-shadow-3"
+        }
+      )
+    ]
+  }
+);
+var CompactLayout = ({
+  className,
+  label,
+  showPercentage,
+  showHitCount,
+  labelClassName,
+  percentageClassName,
+  clampedValue,
+  max,
+  percentage,
+  variantClasses,
+  dimensions
+}) => {
+  const {
+    color,
+    className: compactClassName,
+    content
+  } = getCompactLayoutConfig({
+    showPercentage,
+    showHitCount,
+    percentage,
+    clampedValue,
+    max,
+    label,
+    percentageClassName,
+    labelClassName
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "div",
+    {
+      className: `flex flex-col items-start gap-1 ${dimensions.width} ${dimensions.height} ${className}`,
+      children: [
+        shouldShowHeader(label, showPercentage, showHitCount) && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           Text_default,
           {
             as: "div",
-            size: "xs",
+            size: "sm",
             weight: "medium",
-            className: `text-text-950 leading-none tracking-normal text-center flex-none ${labelClassName}`,
-            children: label
+            color,
+            className: `leading-4 w-full ${compactClassName}`,
+            children: content
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          ProgressBarBase,
+          {
+            clampedValue,
+            max,
+            percentage,
+            label,
+            variantClasses,
+            containerClassName: "w-full h-1 rounded-full",
+            fillClassName: "h-1 rounded-full"
           }
         )
       ]
     }
   );
 };
+var DefaultLayout = ({
+  className,
+  size,
+  sizeClasses,
+  variantClasses,
+  label,
+  showPercentage,
+  labelClassName,
+  percentageClassName,
+  clampedValue,
+  max,
+  percentage
+}) => {
+  const gapClass = size === "medium" ? "gap-2" : sizeClasses.spacing;
+  const progressBarClass = size === "medium" ? "flex-grow" : "w-full";
+  const displayConfig = getDefaultLayoutDisplayConfig(
+    size,
+    label,
+    showPercentage
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: `flex ${sizeClasses.layout} ${gapClass} ${className}`, children: [
+    displayConfig.showHeader && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-row items-center justify-between w-full", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        Text_default,
+        {
+          as: "div",
+          size: "xs",
+          weight: "medium",
+          className: `text-text-950 leading-none tracking-normal text-center ${labelClassName}`,
+          children: label
+        }
+      ),
+      showPercentage && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        Text_default,
+        {
+          size: "xs",
+          weight: "medium",
+          className: `text-text-950 leading-none tracking-normal text-center ${percentageClassName}`,
+          children: [
+            Math.round(percentage),
+            "%"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      ProgressBarBase,
+      {
+        clampedValue,
+        max,
+        percentage,
+        label,
+        variantClasses,
+        containerClassName: `${progressBarClass} ${sizeClasses.container} ${sizeClasses.borderRadius}`,
+        fillClassName: `${sizeClasses.bar} ${sizeClasses.borderRadius} shadow-hard-shadow-3`
+      }
+    ),
+    displayConfig.showPercentage && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      Text_default,
+      {
+        size: "xs",
+        weight: "medium",
+        className: `text-text-950 leading-none tracking-normal text-center flex-none ${percentageClassName}`,
+        children: [
+          Math.round(percentage),
+          "%"
+        ]
+      }
+    ),
+    displayConfig.showLabel && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      Text_default,
+      {
+        as: "div",
+        size: "xs",
+        weight: "medium",
+        className: `text-text-950 leading-none tracking-normal text-center flex-none ${labelClassName}`,
+        children: label
+      }
+    )
+  ] });
+};
+var ProgressBar = ({
+  value,
+  max = 100,
+  size = "medium",
+  variant = "blue",
+  layout = "default",
+  label,
+  showPercentage = false,
+  showHitCount = false,
+  className = "",
+  labelClassName = "",
+  percentageClassName = "",
+  stackedWidth,
+  stackedHeight,
+  compactWidth,
+  compactHeight
+}) => {
+  const { clampedValue, percentage } = calculateProgressValues(value, max);
+  const sizeClasses = SIZE_CLASSES7[size];
+  const variantClasses = VARIANT_CLASSES2[variant];
+  if (layout === "stacked") {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      StackedLayout,
+      {
+        className,
+        label,
+        showPercentage,
+        showHitCount,
+        labelClassName,
+        percentageClassName,
+        clampedValue,
+        max,
+        percentage,
+        variantClasses,
+        dimensions: {
+          width: stackedWidth ?? "w-[380px]",
+          height: stackedHeight ?? "h-[35px]"
+        }
+      }
+    );
+  }
+  if (layout === "compact") {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      CompactLayout,
+      {
+        className,
+        label,
+        showPercentage,
+        showHitCount,
+        labelClassName,
+        percentageClassName,
+        clampedValue,
+        max,
+        percentage,
+        variantClasses,
+        dimensions: {
+          width: compactWidth ?? "w-[131px]",
+          height: compactHeight ?? "h-[24px]"
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    DefaultLayout,
+    {
+      className,
+      size,
+      sizeClasses,
+      variantClasses,
+      label,
+      showPercentage,
+      labelClassName,
+      percentageClassName,
+      clampedValue,
+      max,
+      percentage
+    }
+  );
+};
 var ProgressBar_default = ProgressBar;
 
 // src/components/ProgressCircle/ProgressCircle.tsx
@@ -1860,7 +2160,7 @@ var getDayStyles = (day, variant, showActivities) => {
     dayStyle = "bg-primary-800";
     textStyle = "text-white";
   } else if (day.isToday) {
-    textStyle = "text-[#1c61b2]";
+    textStyle = "text-primary-800";
   } else if (variant === "navigation" && showActivities && day.activities?.length) {
     const primaryActivity = day.activities[0];
     if (primaryActivity.status === "near-deadline") {
@@ -2096,7 +2396,7 @@ var Calendar = ({
         );
         let spanClass = "";
         if (day.isSelected && day.isToday) {
-          spanClass = "h-6 w-6 rounded-full bg-[#1c61b2] text-text";
+          spanClass = "h-6 w-6 rounded-full bg-primary-800 text-text";
         } else if (day.isSelected) {
           spanClass = "h-6 w-6 rounded-full bg-primary-950 text-text";
         }
@@ -2108,12 +2408,12 @@ var Calendar = ({
               "button",
               {
                 className: `
-                    w-9 h-9 
-                    flex items-center justify-center 
-                    text-md font-normal 
-                    cursor-pointer 
+                    w-9 h-9
+                    flex items-center justify-center
+                    text-md font-normal
+                    cursor-pointer
                     rounded-full
-                    ${dayStyle} 
+                    ${dayStyle}
                     ${textStyle}
                   `,
                 onClick: () => handleDateSelect(day),
@@ -2262,13 +2562,13 @@ var Calendar = ({
             "button",
             {
               className: `
-                  w-10 h-10 
-                  flex items-center justify-center 
-                  text-xl font-normal 
-                  cursor-pointer 
+                  w-10 h-10
+                  flex items-center justify-center
+                  text-xl font-normal
+                  cursor-pointer
                   rounded-full
                   focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-1
-                  ${dayStyle} 
+                  ${dayStyle}
                   ${textStyle}
                 `,
               onClick: () => handleDateSelect(day),
@@ -2286,11 +2586,107 @@ var Calendar = ({
 };
 var Calendar_default = Calendar;
 
-// src/components/DropdownMenu/DropdownMenu.tsx
-var import_phosphor_react7 = require("phosphor-react");
+// src/components/Modal/Modal.tsx
 var import_react10 = require("react");
-var import_zustand2 = require("zustand");
+var import_phosphor_react7 = require("phosphor-react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
+var SIZE_CLASSES9 = {
+  xs: "max-w-[360px]",
+  sm: "max-w-[420px]",
+  md: "max-w-[510px]",
+  lg: "max-w-[640px]",
+  xl: "max-w-[970px]"
+};
+var Modal = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  size = "md",
+  className = "",
+  closeOnBackdropClick = true,
+  closeOnEscape = true,
+  footer,
+  hideCloseButton = false
+}) => {
+  (0, import_react10.useEffect)(() => {
+    if (!isOpen || !closeOnEscape) return;
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, closeOnEscape, onClose]);
+  (0, import_react10.useEffect)(() => {
+    const originalOverflow = document.body.style.overflow;
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = originalOverflow;
+    }
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, [isOpen]);
+  const handleBackdropClick = (event) => {
+    if (closeOnBackdropClick && event.target === event.currentTarget) {
+      onClose();
+    }
+  };
+  const handleBackdropKeyDown = (event) => {
+    if (closeOnBackdropClick && (event.key === "Enter" || event.key === " ")) {
+      onClose();
+    }
+  };
+  if (!isOpen) return null;
+  const sizeClasses = SIZE_CLASSES9[size];
+  const baseClasses = "bg-background rounded-3xl shadow-hard-shadow-2 border border-border-100 w-full mx-4";
+  const modalClasses = `${baseClasses} ${sizeClasses} ${className}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs",
+      onClick: handleBackdropClick,
+      onKeyDown: handleBackdropKeyDown,
+      role: "none",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        "div",
+        {
+          className: modalClasses,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": "modal-title",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between px-6 py-6", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { id: "modal-title", className: "text-lg font-semibold text-text-950", children: title }),
+              !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                "button",
+                {
+                  onClick: onClose,
+                  className: "p-1 text-text-500 hover:text-text-700 hover:bg-background-50 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-indicator-info focus:ring-offset-2",
+                  "aria-label": "Fechar modal",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_phosphor_react7.X, { size: 18 })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "px-6 pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "text-text-500 font-normal text-sm leading-6", children }) }),
+            footer && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex justify-end gap-3 px-6 pb-6", children: footer })
+          ]
+        }
+      )
+    }
+  );
+};
+var Modal_default = Modal;
+
+// src/components/DropdownMenu/DropdownMenu.tsx
+var import_phosphor_react8 = require("phosphor-react");
+var import_react11 = require("react");
+var import_zustand2 = require("zustand");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function createDropdownStore() {
   return (0, import_zustand2.create)((set) => ({
     open: false,
@@ -2306,8 +2702,8 @@ var useDropdownStore = (externalStore) => {
   return externalStore;
 };
 var injectStore = (children, store) => {
-  return import_react10.Children.map(children, (child) => {
-    if ((0, import_react10.isValidElement)(child)) {
+  return import_react11.Children.map(children, (child) => {
+    if ((0, import_react11.isValidElement)(child)) {
       const typedChild = child;
       const newProps = {
         store
@@ -2315,23 +2711,24 @@ var injectStore = (children, store) => {
       if (typedChild.props.children) {
         newProps.children = injectStore(typedChild.props.children, store);
       }
-      return (0, import_react10.cloneElement)(typedChild, newProps);
+      return (0, import_react11.cloneElement)(typedChild, newProps);
     }
     return child;
   });
 };
-var DropdownMenu = ({ children, open, onOpenChange }) => {
-  const storeRef = (0, import_react10.useRef)(null);
+var DropdownMenu = ({
+  children,
+  open: propOpen,
+  onOpenChange
+}) => {
+  const storeRef = (0, import_react11.useRef)(null);
   storeRef.current ??= createDropdownStore();
   const store = storeRef.current;
-  const isControlled = open !== void 0;
-  const uncontrolledOpen = (0, import_zustand2.useStore)(store, (s) => s.open);
-  const currentOpen = isControlled ? open : uncontrolledOpen;
+  const { open, setOpen: storeSetOpen } = (0, import_zustand2.useStore)(store, (s) => s);
   const setOpen = (newOpen) => {
-    onOpenChange?.(newOpen);
-    if (!isControlled) store.setState({ open: newOpen });
+    storeSetOpen(newOpen);
   };
-  const menuRef = (0, import_react10.useRef)(null);
+  const menuRef = (0, import_react11.useRef)(null);
   const handleArrowDownOrArrowUp = (event) => {
     const menuContent = menuRef.current?.querySelector('[role="menu"]');
     if (menuContent) {
@@ -2365,9 +2762,8 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
       setOpen(false);
     }
   };
-  (0, import_react10.useEffect)(() => {
-    onOpenChange?.(currentOpen);
-    if (currentOpen) {
+  (0, import_react11.useEffect)(() => {
+    if (open) {
       document.addEventListener("mousedown", handleClickOutside);
       document.addEventListener("keydown", handleDownkey);
     }
@@ -2375,13 +2771,17 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
       document.removeEventListener("mousedown", handleClickOutside);
       document.removeEventListener("keydown", handleDownkey);
     };
-  }, [currentOpen]);
-  (0, import_react10.useEffect)(() => {
-    if (isControlled) {
-      store.setState({ open });
+  }, [open]);
+  (0, import_react11.useEffect)(() => {
+    setOpen(open);
+    onOpenChange?.(open);
+  }, [open, onOpenChange]);
+  (0, import_react11.useEffect)(() => {
+    if (propOpen) {
+      setOpen(propOpen);
     }
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
+  }, [propOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
 };
 var DropdownMenuTrigger = ({
   className,
@@ -2393,7 +2793,7 @@ var DropdownMenuTrigger = ({
   const store = useDropdownStore(externalStore);
   const open = (0, import_zustand2.useStore)(store, (s) => s.open);
   const toggleOpen = () => store.setState({ open: !open });
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     Button_default,
     {
       variant: "outline",
@@ -2429,8 +2829,8 @@ var MENUCONTENT_VARIANT_CLASSES = {
   menu: "p-1",
   profile: "p-6"
 };
-var MenuLabel = (0, import_react10.forwardRef)(({ className, inset, store: _store, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+var MenuLabel = (0, import_react11.forwardRef)(({ className, inset, store: _store, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "div",
     {
       ref,
@@ -2440,7 +2840,7 @@ var MenuLabel = (0, import_react10.forwardRef)(({ className, inset, store: _stor
   );
 });
 MenuLabel.displayName = "MenuLabel";
-var MenuContent = (0, import_react10.forwardRef)(
+var MenuContent = (0, import_react11.forwardRef)(
   ({
     className,
     align = "start",
@@ -2453,8 +2853,8 @@ var MenuContent = (0, import_react10.forwardRef)(
   }, ref) => {
     const store = useDropdownStore(externalStore);
     const open = (0, import_zustand2.useStore)(store, (s) => s.open);
-    const [isVisible, setIsVisible] = (0, import_react10.useState)(open);
-    (0, import_react10.useEffect)(() => {
+    const [isVisible, setIsVisible] = (0, import_react11.useState)(open);
+    (0, import_react11.useEffect)(() => {
       if (open) {
         setIsVisible(true);
       } else {
@@ -2469,7 +2869,7 @@ var MenuContent = (0, import_react10.forwardRef)(
       return `absolute ${vertical} ${horizontal}`;
     };
     const variantClasses = MENUCONTENT_VARIANT_CLASSES[variant];
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "div",
       {
         ref,
@@ -2494,7 +2894,7 @@ var MenuContent = (0, import_react10.forwardRef)(
   }
 );
 MenuContent.displayName = "MenuContent";
-var DropdownMenuItem = (0, import_react10.forwardRef)(
+var DropdownMenuItem = (0, import_react11.forwardRef)(
   ({
     className,
     size = "small",
@@ -2528,7 +2928,7 @@ var DropdownMenuItem = (0, import_react10.forwardRef)(
     const getVariantProps = () => {
       return variant === "profile" ? { "data-variant": "profile" } : {};
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       "div",
       {
         ref,
@@ -2550,7 +2950,7 @@ var DropdownMenuItem = (0, import_react10.forwardRef)(
         ...props,
         children: [
           iconLeft,
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "w-full text-md", children }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "w-full text-md", children }),
           iconRight
         ]
       }
@@ -2558,7 +2958,7 @@ var DropdownMenuItem = (0, import_react10.forwardRef)(
   }
 );
 DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuSeparator = (0, import_react10.forwardRef)(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+var DropdownMenuSeparator = (0, import_react11.forwardRef)(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
   "div",
   {
     ref,
@@ -2567,11 +2967,11 @@ var DropdownMenuSeparator = (0, import_react10.forwardRef)(({ className, store:
   }
 ));
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
-var ProfileMenuTrigger = (0, import_react10.forwardRef)(({ className, onClick, store: externalStore, ...props }, ref) => {
+var ProfileMenuTrigger = (0, import_react11.forwardRef)(({ className, onClick, store: externalStore, ...props }, ref) => {
   const store = useDropdownStore(externalStore);
   const open = (0, import_zustand2.useStore)(store, (s) => s.open);
   const toggleOpen = () => store.setState({ open: !open });
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "button",
     {
       ref,
@@ -2583,13 +2983,13 @@ var ProfileMenuTrigger = (0, import_react10.forwardRef)(({ className, onClick, s
       },
       "aria-expanded": open,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "size-6 rounded-full bg-background-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_phosphor_react7.User, { className: "text-background-950", size: 18 }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "size-6 rounded-full bg-background-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_phosphor_react8.User, { className: "text-background-950", size: 18 }) })
     }
   );
 });
 ProfileMenuTrigger.displayName = "ProfileMenuTrigger";
-var ProfileMenuHeader = (0, import_react10.forwardRef)(({ className, name, email, store: _store, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+var ProfileMenuHeader = (0, import_react11.forwardRef)(({ className, name, email, store: _store, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
       ref,
@@ -2600,18 +3000,18 @@ var ProfileMenuHeader = (0, import_react10.forwardRef)(({ className, name, email
         `,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "size-16 bg-background-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_phosphor_react7.User, { size: 34, className: "text-background-950" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col ", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-xl font-bold text-text-950", children: name }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-md text-text-600", children: email })
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "size-16 bg-background-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_phosphor_react8.User, { size: 34, className: "text-background-950" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col ", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-xl font-bold text-text-950", children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-md text-text-600", children: email })
         ] })
       ]
     }
   );
 });
 ProfileMenuHeader.displayName = "ProfileMenuHeader";
-var ProfileMenuSection = (0, import_react10.forwardRef)(({ className, children, store: _store, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+var ProfileMenuSection = (0, import_react11.forwardRef)(({ className, children, store: _store, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "div",
     {
       ref,
@@ -2634,7 +3034,7 @@ var ProfileMenuFooter = ({
 }) => {
   const store = useDropdownStore(externalStore);
   const setOpen = (0, import_zustand2.useStore)(store, (s) => s.setOpen);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     Button_default,
     {
       variant: "outline",
@@ -2646,8 +3046,8 @@ var ProfileMenuFooter = ({
       },
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_phosphor_react7.SignOut, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Sair" })
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_phosphor_react8.SignOut, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: "Sair" })
       ]
     }
   );
@@ -2657,15 +3057,15 @@ var DropdownMenu_default = DropdownMenu;
 
 // src/components/Select/Select.tsx
 var import_zustand3 = require("zustand");
-var import_react11 = require("react");
-var import_phosphor_react8 = require("phosphor-react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_phosphor_react9 = require("phosphor-react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var VARIANT_CLASSES4 = {
   outlined: "border-2 rounded-sm focus:border-primary-950",
   underlined: "border-b-2 focus:border-primary-950",
   rounded: "border-2 rounded-4xl focus:border-primary-950"
 };
-var SIZE_CLASSES9 = {
+var SIZE_CLASSES10 = {
   small: "text-sm",
   medium: "text-md",
   large: "text-lg"
@@ -2703,13 +3103,13 @@ function getLabelAsNode(children) {
   if (typeof children === "string" || typeof children === "number") {
     return children;
   }
-  const flattened = import_react11.Children.toArray(children);
+  const flattened = import_react12.Children.toArray(children);
   if (flattened.length === 1) return flattened[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: flattened });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: flattened });
 }
 var injectStore2 = (children, store) => {
-  return import_react11.Children.map(children, (child) => {
-    if ((0, import_react11.isValidElement)(child)) {
+  return import_react12.Children.map(children, (child) => {
+    if ((0, import_react12.isValidElement)(child)) {
       const typedChild = child;
       const newProps = {
         store
@@ -2717,7 +3117,7 @@ var injectStore2 = (children, store) => {
       if (typedChild.props.children) {
         newProps.children = injectStore2(typedChild.props.children, store);
       }
-      return (0, import_react11.cloneElement)(typedChild, newProps);
+      return (0, import_react12.cloneElement)(typedChild, newProps);
     }
     return child;
   });
@@ -2729,21 +3129,19 @@ var Select = ({
   onValueChange,
   size = "small"
 }) => {
-  const storeRef = (0, import_react11.useRef)(null);
+  const storeRef = (0, import_react12.useRef)(null);
   storeRef.current ??= createSelectStore();
   const store = storeRef.current;
-  const selectRef = (0, import_react11.useRef)(null);
+  const selectRef = (0, import_react12.useRef)(null);
   const { open, setOpen, setValue, value, selectedLabel } = (0, import_zustand3.useStore)(
     store,
     (s) => s
   );
-  const isControlled = propValue !== void 0;
-  const currentValue = isControlled ? propValue : value;
   const findLabelForValue = (children2, targetValue) => {
     let found = null;
     const search = (nodes) => {
-      import_react11.Children.forEach(nodes, (child) => {
-        if (!(0, import_react11.isValidElement)(child)) return;
+      import_react12.Children.forEach(nodes, (child) => {
+        if (!(0, import_react12.isValidElement)(child)) return;
         const typedChild = child;
         if (typedChild.type === SelectItem && typedChild.props.value === targetValue) {
           if (typeof typedChild.props.children === "string")
@@ -2756,14 +3154,13 @@ var Select = ({
     search(children2);
     return found;
   };
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!selectedLabel && defaultValue) {
       const label = findLabelForValue(children, defaultValue);
       if (label) store.setState({ selectedLabel: label });
     }
   }, [children, defaultValue, selectedLabel]);
-  (0, import_react11.useEffect)(() => {
-    setValue(currentValue);
+  (0, import_react12.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (selectRef.current && !selectRef.current.contains(event.target)) {
         setOpen(false);
@@ -2798,13 +3195,19 @@ var Select = ({
       document.removeEventListener("keydown", handleArrowKeys);
     };
   }, [open]);
-  (0, import_react11.useEffect)(() => {
-    if (onValueChange) {
-      onValueChange(value);
+  (0, import_react12.useEffect)(() => {
+    setValue(value);
+    onValueChange?.(value);
+  }, [value, onValueChange]);
+  (0, import_react12.useEffect)(() => {
+    if (propValue) {
+      setValue(propValue);
+      const label = findLabelForValue(children, propValue);
+      if (label) store.setState({ selectedLabel: label });
     }
-  }, [value]);
-  const sizeClasses = SIZE_CLASSES9[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: `relative ${sizeClasses} w-[288px]`, ref: selectRef, children: injectStore2(children, store) });
+  }, [propValue]);
+  const sizeClasses = SIZE_CLASSES10[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: `relative ${sizeClasses} w-[288px]`, ref: selectRef, children: injectStore2(children, store) });
 };
 var SelectValue = ({
   placeholder,
@@ -2813,9 +3216,9 @@ var SelectValue = ({
   const store = useSelectStore(externalStore);
   const selectedLabel = (0, import_zustand3.useStore)(store, (s) => s.selectedLabel);
   const value = (0, import_zustand3.useStore)(store, (s) => s.value);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-inherit", children: selectedLabel || placeholder || value });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-inherit", children: selectedLabel || placeholder || value });
 };
-var SelectTrigger = (0, import_react11.forwardRef)(
+var SelectTrigger = (0, import_react12.forwardRef)(
   ({
     className,
     invalid = false,
@@ -2828,7 +3231,7 @@ var SelectTrigger = (0, import_react11.forwardRef)(
     const open = (0, import_zustand3.useStore)(store, (s) => s.open);
     const toggleOpen = () => store.setState({ open: !open });
     const variantClasses = VARIANT_CLASSES4[variant];
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "button",
       {
         ref,
@@ -2847,8 +3250,8 @@ var SelectTrigger = (0, import_react11.forwardRef)(
         ...props,
         children: [
           props.children,
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-            import_phosphor_react8.CaretDown,
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_phosphor_react9.CaretDown,
             {
               className: `h-[1em] w-[1em] opacity-50 transition-transform ${open ? "rotate-180" : ""}`
             }
@@ -2859,7 +3262,7 @@ var SelectTrigger = (0, import_react11.forwardRef)(
   }
 );
 SelectTrigger.displayName = "SelectTrigger";
-var SelectContent = (0, import_react11.forwardRef)(
+var SelectContent = (0, import_react12.forwardRef)(
   ({
     children,
     className,
@@ -2872,7 +3275,7 @@ var SelectContent = (0, import_react11.forwardRef)(
     const open = (0, import_zustand3.useStore)(store, (s) => s.open);
     if (!open) return null;
     const getPositionClasses = () => `w-full min-w-full absolute ${SIDE_CLASSES2[side]} ${ALIGN_CLASSES2[align]}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "div",
       {
         role: "menu",
@@ -2885,7 +3288,7 @@ var SelectContent = (0, import_react11.forwardRef)(
   }
 );
 SelectContent.displayName = "SelectContent";
-var SelectItem = (0, import_react11.forwardRef)(
+var SelectItem = (0, import_react12.forwardRef)(
   ({
     className,
     children,
@@ -2895,8 +3298,12 @@ var SelectItem = (0, import_react11.forwardRef)(
     ...props
   }, ref) => {
     const store = useSelectStore(externalStore);
-    const selectedValue = (0, import_zustand3.useStore)(store, (s) => s.value);
-    const { setValue, setSelectedLabel, setOpen } = store.getState();
+    const {
+      value: selectedValue,
+      setValue,
+      setOpen,
+      setSelectedLabel
+    } = (0, import_zustand3.useStore)(store, (s) => s);
     const handleClick = (e) => {
       const labelNode = getLabelAsNode(children);
       if (!disabled) {
@@ -2906,7 +3313,7 @@ var SelectItem = (0, import_react11.forwardRef)(
       }
       props.onClick?.(e);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "div",
       {
         role: "menuitem",
@@ -2926,7 +3333,7 @@ var SelectItem = (0, import_react11.forwardRef)(
         tabIndex: disabled ? -1 : 0,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_phosphor_react8.Check, { className: "" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react9.Check, { className: "" }) }),
           children
         ]
       }
@@ -2938,9 +3345,9 @@ var Select_default = Select;
 
 // src/components/Menu/Menu.tsx
 var import_zustand4 = require("zustand");
-var import_react12 = require("react");
-var import_phosphor_react9 = require("phosphor-react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_phosphor_react10 = require("phosphor-react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var createMenuStore = () => (0, import_zustand4.create)((set) => ({
   value: "",
   setValue: (value) => set({ value })
@@ -2954,7 +3361,7 @@ var VARIANT_CLASSES5 = {
   menu2: "overflow-x-auto scroll-smooth",
   breadcrumb: ""
 };
-var Menu = (0, import_react12.forwardRef)(
+var Menu = (0, import_react13.forwardRef)(
   ({
     className,
     children,
@@ -2964,19 +3371,19 @@ var Menu = (0, import_react12.forwardRef)(
     onValueChange,
     ...props
   }, ref) => {
-    const storeRef = (0, import_react12.useRef)(null);
+    const storeRef = (0, import_react13.useRef)(null);
     storeRef.current ??= createMenuStore();
     const store = storeRef.current;
     const { setValue, value } = (0, import_zustand4.useStore)(store, (s) => s);
-    (0, import_react12.useEffect)(() => {
+    (0, import_react13.useEffect)(() => {
       setValue(propValue ?? defaultValue);
     }, [defaultValue, propValue, setValue]);
-    (0, import_react12.useEffect)(() => {
+    (0, import_react13.useEffect)(() => {
       onValueChange?.(value);
     }, [value, onValueChange]);
     const baseClasses = "w-full flex flex-row items-center gap-2 py-2 px-6";
     const variantClasses = VARIANT_CLASSES5[variant];
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "ul",
       {
         ref,
@@ -2993,7 +3400,7 @@ var Menu = (0, import_react12.forwardRef)(
   }
 );
 Menu.displayName = "Menu";
-var MenuItem = (0, import_react12.forwardRef)(
+var MenuItem = (0, import_react13.forwardRef)(
   ({
     className,
     children,
@@ -3021,7 +3428,7 @@ var MenuItem = (0, import_react12.forwardRef)(
       ...props
     };
     const variants = {
-      menu: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      menu: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "li",
         {
           "data-variant": "menu",
@@ -3036,7 +3443,7 @@ var MenuItem = (0, import_react12.forwardRef)(
           children
         }
       ),
-      menu2: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      menu2: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "li",
         {
           "data-variant": "menu2",
@@ -3048,7 +3455,7 @@ var MenuItem = (0, import_react12.forwardRef)(
           children
         }
       ),
-      breadcrumb: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      breadcrumb: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "li",
         {
           "data-variant": "breadcrumb",
@@ -3059,7 +3466,7 @@ var MenuItem = (0, import_react12.forwardRef)(
             ${className ?? ""}
           `,
           ...commonProps,
-          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "span",
             {
               className: `
@@ -3076,24 +3483,24 @@ var MenuItem = (0, import_react12.forwardRef)(
   }
 );
 MenuItem.displayName = "MenuItem";
-var MenuSeparator = (0, import_react12.forwardRef)(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+var MenuSeparator = (0, import_react13.forwardRef)(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "li",
     {
       ref,
       "aria-hidden": "true",
       className: `[&>svg]:w-4 [&>svg]:h-4 text-text-600 ${className ?? ""}`,
       ...props,
-      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react9.CaretRight, {})
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_phosphor_react10.CaretRight, {})
     }
   )
 );
 MenuSeparator.displayName = "MenuSeparator";
-var injectStore3 = (children, store) => import_react12.Children.map(children, (child) => {
-  if (!(0, import_react12.isValidElement)(child)) return child;
+var injectStore3 = (children, store) => import_react13.Children.map(children, (child) => {
+  if (!(0, import_react13.isValidElement)(child)) return child;
   const typedChild = child;
   const shouldInject = typedChild.type === MenuItem;
-  return (0, import_react12.cloneElement)(typedChild, {
+  return (0, import_react13.cloneElement)(typedChild, {
     ...shouldInject ? { store } : {},
     ...typedChild.props.children ? { children: injectStore3(typedChild.props.children, store) } : {}
   });
@@ -3120,6 +3527,7 @@ var Menu_default = Menu;
   MenuItem,
   MenuLabel,
   MenuSeparator,
+  Modal,
   NavButton,
   ProfileMenuFooter,
   ProfileMenuHeader,