@sesionario/blocks 1.42.0-rc.1 → 1.42.0-rc.2

package/dist/index.cjs

@@ -14,9 +14,9 @@ var DialogPrimitive = require('@radix-ui/react-dialog');
 var nextThemes = require('next-themes');
 var framerMotion = require('framer-motion');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
+var vaul = require('vaul');
 var SliderPrimitive = require('@radix-ui/react-slider');
 var TogglePrimitive = require('@radix-ui/react-toggle');
-var vaul = require('vaul');
 var PopoverPrimitive = require('@radix-ui/react-popover');
 var cmdk = require('cmdk');
 var RPNInput = require('react-phone-number-input');
@@ -1949,50 +1949,6 @@ function DropdownMenuShortcut({
     }
   );
 }
-function DropdownMenuSub({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Sub, { "data-slot": "dropdown-menu-sub", ...props });
-}
-function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    DropdownMenuPrimitive__namespace.SubTrigger,
-    {
-      "data-slot": "dropdown-menu-sub-trigger",
-      "data-inset": inset,
-      className: cn(
-        "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-[inset]:pl-8 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[highlighted]:[&_svg:not([class*='text-'])]:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:[&_svg:not([class*='text-'])]:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:[&_svg:not([class*='text-'])]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "ml-auto size-4" })
-      ]
-    }
-  );
-}
-function DropdownMenuSubContent({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownMenuPrimitive__namespace.SubContent,
-    {
-      "data-slot": "dropdown-menu-sub-content",
-      className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
-      ),
-      ...props
-    }
-  );
-}
 var defaultLabels = {
   theme: "Theme",
   system: "System",
@@ -2751,6 +2707,181 @@ function VerifiedProfessionalBadge({
     }
   );
 }
+function useMediaQuery(query) {
+  const [matches, setMatches] = React2.useState(false);
+  React2.useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mql = window.matchMedia(query);
+    const onChange = () => setMatches(mql.matches);
+    onChange();
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+  return matches;
+}
+function Drawer({
+  repositionInputs = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    vaul.Drawer.Root,
+    {
+      "data-slot": "drawer",
+      repositionInputs,
+      ...props
+    }
+  );
+}
+function DrawerPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Close, { "data-slot": "drawer-close", ...props });
+}
+function DrawerOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    vaul.Drawer.Overlay,
+    {
+      "data-slot": "drawer-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 dark:bg-black/80",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      vaul.Drawer.Content,
+      {
+        "data-slot": "drawer-content",
+        className: cn(
+          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          children
+        ]
+      }
+    )
+  ] });
+}
+function DrawerHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "drawer-header",
+      className: cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "drawer-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-4", className),
+      ...props
+    }
+  );
+}
+function DrawerTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    vaul.Drawer.Title,
+    {
+      "data-slot": "drawer-title",
+      className: cn("text-foreground font-semibold", className),
+      ...props
+    }
+  );
+}
+var ResponsiveMenuSurfaceContext = React2.createContext("dropdown");
+function useResponsiveMenuSurface() {
+  return React2.useContext(ResponsiveMenuSurfaceContext);
+}
+function ResponsiveMenu({
+  trigger,
+  children,
+  open,
+  onOpenChange,
+  title,
+  align = "end",
+  side,
+  sideOffset,
+  contentClassName,
+  drawerClassName
+}) {
+  const isMobile = useMediaQuery("(max-width: 767px)");
+  if (isMobile) {
+    const triggerNode = React2.isValidElement(trigger) ? React2.cloneElement(trigger, {
+      onClick: (event) => {
+        const original = trigger.props.onClick;
+        original?.(event);
+        if (!event.defaultPrevented) {
+          onOpenChange(true);
+        }
+      }
+    }) : /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => onOpenChange(true), children: trigger });
+    return /* @__PURE__ */ jsxRuntime.jsxs(ResponsiveMenuSurfaceContext.Provider, { value: "drawer", children: [
+      triggerNode,
+      /* @__PURE__ */ jsxRuntime.jsx(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        DrawerContent,
+        {
+          className: cn(
+            "mx-auto flex max-h-[90vh] max-w-lg flex-col",
+            drawerClassName
+          ),
+          "data-testid": "responsive-menu-drawer",
+          children: [
+            title ? /* @__PURE__ */ jsxRuntime.jsx(DrawerHeader, { className: "text-left", children: /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle, { children: title }) }) : /* @__PURE__ */ jsxRuntime.jsx(DrawerHeader, { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle, { children: "Menu" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-1 pb-4", children })
+          ]
+        }
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ResponsiveMenuSurfaceContext.Provider, { value: "dropdown", children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DropdownMenuContent,
+      {
+        align,
+        side,
+        sideOffset,
+        className: contentClassName,
+        "data-testid": "responsive-menu-dropdown",
+        children
+      }
+    )
+  ] }) });
+}
 var defaultLabels3 = {
   accountMenu: "Account menu",
   settingsMenu: "Settings",
@@ -2771,6 +2902,8 @@ var defaultLabels3 = {
   accountSettings: "Account settings"
 };
 var PLATFORM_ACCOUNT_ORG_COLLAPSE_AT = 4;
+var menuItemClassName = "relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive";
+var radioItemClassName = "relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0";
 function mergePlatformAccountOrgs(memberOrgs, manageableOrgs) {
   const manageableIds = new Set(manageableOrgs.map((org) => org.id));
   const byId = /* @__PURE__ */ new Map();
@@ -2794,6 +2927,82 @@ function mergePlatformAccountOrgs(memberOrgs, manageableOrgs) {
   }
   return Array.from(byId.values());
 }
+function PlatformAccountMenuItem({
+  className,
+  inset,
+  variant = "default",
+  disabled,
+  asChild = false,
+  onSelect,
+  children,
+  onClick
+}) {
+  const surface = useResponsiveMenuSurface();
+  if (surface === "dropdown") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DropdownMenuItem,
+      {
+        className,
+        inset,
+        variant,
+        disabled,
+        asChild,
+        onSelect: (event) => {
+          onSelect?.(event);
+        },
+        onClick,
+        children
+      }
+    );
+  }
+  const Comp = asChild ? reactSlot.Slot : "button";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      type: asChild ? void 0 : "button",
+      role: "menuitem",
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset || void 0,
+      "data-variant": variant,
+      "data-disabled": disabled || void 0,
+      disabled: asChild ? void 0 : disabled,
+      "aria-disabled": disabled || void 0,
+      className: cn(menuItemClassName, className),
+      onClick: (event) => {
+        if (disabled) {
+          event.preventDefault();
+          return;
+        }
+        onClick?.(event);
+        onSelect?.({ preventDefault: () => void 0 });
+      },
+      children
+    }
+  );
+}
+function AccountMenuLabel({
+  className,
+  children
+}) {
+  const surface = useResponsiveMenuSurface();
+  if (surface === "dropdown") {
+    return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuLabel, { className, children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-2 py-1.5 text-sm font-medium", className), children });
+}
+function AccountMenuSeparator({ className }) {
+  const surface = useResponsiveMenuSurface();
+  if (surface === "dropdown") {
+    return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, { className });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "separator",
+      className: cn("bg-border -mx-1 my-1 h-px", className)
+    }
+  );
+}
 function MenuAvatar({
   name,
   image,
@@ -2823,7 +3032,7 @@ function MenuAvatar({
     }
   );
 }
-function LanguageThemeSubs({
+function LanguageThemeExpand({
   languages,
   currentLanguage,
   onLanguageChange,
@@ -2831,32 +3040,76 @@ function LanguageThemeSubs({
 }) {
   const { theme, setTheme } = nextThemes.useTheme();
   const themeValue = theme ?? "system";
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSub, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSubTrigger, { className: "gap-2 [&>svg:last-child]:ml-0", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.language }),
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Languages, { className: "size-4" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSubContent, { className: "min-w-40", children: /* @__PURE__ */ jsxRuntime.jsx(
-        DropdownMenuRadioGroup,
+  const surface = useResponsiveMenuSurface();
+  const [languageOpen, setLanguageOpen] = React2.useState(false);
+  const [themeOpen, setThemeOpen] = React2.useState(false);
+  function renderRadioOptions(value, onValueChange, options) {
+    if (surface === "dropdown") {
+      return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuRadioGroup, { value, onValueChange, children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuRadioItem, { value: option.value, children: option.label }, option.value)) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "group", children: options.map((option) => {
+      const checked = value === option.value;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
         {
-          value: currentLanguage,
-          onValueChange: onLanguageChange,
-          children: languages.map((lang) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuRadioItem, { value: lang.key, children: lang.nativeName }, lang.key))
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSub, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSubTrigger, { className: "gap-2 [&>svg:last-child]:ml-0", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.theme }),
-        themeValue === "light" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { className: "size-4" }) : themeValue === "dark" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Monitor, { className: "size-4" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSubContent, { className: "min-w-40", children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuRadioGroup, { value: themeValue, onValueChange: setTheme, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuRadioItem, { value: "system", children: labels.themeSystem }),
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuRadioItem, { value: "light", children: labels.themeLight }),
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuRadioItem, { value: "dark", children: labels.themeDark })
-      ] }) })
-    ] })
+          type: "button",
+          role: "menuitemradio",
+          "aria-checked": checked,
+          className: radioItemClassName,
+          onClick: () => onValueChange(option.value),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: checked ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-4" }) : null }),
+            option.label
+          ]
+        },
+        option.value
+      );
+    }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      PlatformAccountMenuItem,
+      {
+        className: "gap-2",
+        onSelect: (event) => {
+          event.preventDefault();
+          setLanguageOpen((open) => !open);
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.language }),
+          languageOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Languages, { className: "size-4" })
+        ]
+      }
+    ),
+    languageOpen ? renderRadioOptions(
+      currentLanguage,
+      onLanguageChange,
+      languages.map((lang) => ({
+        value: lang.key,
+        label: lang.nativeName
+      }))
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      PlatformAccountMenuItem,
+      {
+        className: "gap-2",
+        onSelect: (event) => {
+          event.preventDefault();
+          setThemeOpen((open) => !open);
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.theme }),
+          themeOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-4" }),
+          themeValue === "light" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { className: "size-4" }) : themeValue === "dark" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Monitor, { className: "size-4" })
+        ]
+      }
+    ),
+    themeOpen ? renderRadioOptions(themeValue, setTheme, [
+      { value: "system", label: labels.themeSystem },
+      { value: "light", label: labels.themeLight },
+      { value: "dark", label: labels.themeDark }
+    ]) : null
   ] });
 }
 function OrgMenuRows({
@@ -2887,7 +3140,7 @@ function OrgMenuRows({
               "data-testid": `platform-account-org-${org.id}`,
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  DropdownMenuItem,
+                  PlatformAccountMenuItem,
                   {
                     asChild: true,
                     className: cn("gap-2", org.canManage && "pr-9"),
@@ -2905,7 +3158,7 @@ function OrgMenuRows({
                   }
                 ),
                 org.canManage ? /* @__PURE__ */ jsxRuntime.jsx(
-                  DropdownMenuItem,
+                  PlatformAccountMenuItem,
                   {
                     asChild: true,
                     className: "absolute right-0.5 top-1/2 size-7 -translate-y-1/2 justify-center p-0",
@@ -2918,7 +3171,7 @@ function OrgMenuRows({
           );
         }),
         collapsible ? /* @__PURE__ */ jsxRuntime.jsxs(
-          DropdownMenuItem,
+          PlatformAccountMenuItem,
           {
             className: "gap-2",
             onSelect: (event) => {
@@ -2958,6 +3211,7 @@ function PlatformAccountMenu({
   className
 }) {
   const labels = { ...defaultLabels3, ...labelsProp };
+  const [open, setOpen] = React2.useState(false);
   const [signingOut, setSigningOut] = React2.useState(false);
   const mergedOrgs = React2.useMemo(
     () => mergePlatformAccountOrgs(memberOrgs, manageableOrgs),
@@ -3008,120 +3262,180 @@ function PlatformAccountMenu({
       children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "size-4" })
     }
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: triggerProp ?? defaultTrigger }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      DropdownMenuContent,
-      {
-        side: contentSide,
-        align: contentAlign,
-        sideOffset: contentSideOffset,
-        className: cn("min-w-60 rounded-lg", contentClassName),
-        children: user ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuLabel, { className: "flex items-center gap-3 p-2 font-normal", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              MenuAvatar,
-              {
-                name: user.name,
-                image: user.image,
-                sizeClass: "size-9"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-1.5 truncate text-sm font-medium leading-tight", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: user.name }),
-                variant === "platform" ? /* @__PURE__ */ jsxRuntime.jsx(
-                  VerifiedProfessionalBadge,
-                  {
-                    status: verificationStatus,
-                    professionLabel,
-                    className: "shrink-0"
-                  }
-                ) : null
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs text-muted-foreground leading-tight", children: user.email })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
-          variant === "platform" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            hasOrgs ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                OrgMenuRows,
-                {
-                  orgs: mergedOrgs,
-                  appUrl: urls.appUrl,
-                  adminUrl: urls.adminUrl,
-                  labels
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {})
-            ] }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: accountHref, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.personalProfile }),
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "size-4" })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: activityHref, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.activity }),
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Activity, { className: "size-4" })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: profileHref, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.professionalProfile }),
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "size-4" })
-            ] }) }),
-            extraItems,
-            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {})
-          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: accountHref, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.accountSettings }),
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "size-4" })
-            ] }) }),
-            extraItems,
-            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {})
-          ] }),
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ResponsiveMenu,
+    {
+      open,
+      onOpenChange: setOpen,
+      trigger: triggerProp ?? defaultTrigger,
+      align: contentAlign,
+      side: contentSide,
+      sideOffset: contentSideOffset,
+      contentClassName: cn("min-w-60 rounded-lg", contentClassName),
+      title: user ? labels.accountMenu : labels.settingsMenu,
+      children: user ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(AccountMenuLabel, { className: "flex items-center gap-3 p-2 font-normal", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            LanguageThemeSubs,
+            MenuAvatar,
             {
-              languages,
-              currentLanguage,
-              onLanguageChange,
-              labels
+              name: user.name,
+              image: user.image,
+              sizeClass: "size-9"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            DropdownMenuItem,
-            {
-              variant: "destructive",
-              className: "gap-2",
-              disabled: signingOut || !onSignOut,
-              onSelect: (event) => {
-                event.preventDefault();
-                void handleSignOut();
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: signingOut ? labels.signingOut : labels.signOut }),
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { className: "size-4" })
-              ]
-            }
-          )
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-1.5 truncate text-sm font-medium leading-tight", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: user.name }),
+              variant === "platform" ? /* @__PURE__ */ jsxRuntime.jsx(
+                VerifiedProfessionalBadge,
+                {
+                  status: verificationStatus,
+                  professionLabel,
+                  className: "shrink-0"
+                }
+              ) : null
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs text-muted-foreground leading-tight", children: user.email })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(AccountMenuSeparator, {}),
+        variant === "platform" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          hasOrgs ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              OrgMenuRows,
+              {
+                orgs: mergedOrgs,
+                appUrl: urls.appUrl,
+                adminUrl: urls.adminUrl,
+                labels
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(AccountMenuSeparator, {})
+          ] }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(PlatformAccountMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: accountHref, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.personalProfile }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "size-4" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(PlatformAccountMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: activityHref, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.activity }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Activity, { className: "size-4" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(PlatformAccountMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: profileHref, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.professionalProfile }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "size-4" })
+          ] }) }),
+          extraItems,
+          /* @__PURE__ */ jsxRuntime.jsx(AccountMenuSeparator, {})
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            LanguageThemeSubs,
-            {
-              languages,
-              currentLanguage,
-              onLanguageChange,
-              labels
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: loginHref, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.signIn }),
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogIn, { className: "size-4" })
-          ] }) })
-        ] })
-      }
-    )
-  ] });
+          /* @__PURE__ */ jsxRuntime.jsx(PlatformAccountMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: accountHref, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.accountSettings }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "size-4" })
+          ] }) }),
+          extraItems,
+          /* @__PURE__ */ jsxRuntime.jsx(AccountMenuSeparator, {})
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LanguageThemeExpand,
+          {
+            languages,
+            currentLanguage,
+            onLanguageChange,
+            labels
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          PlatformAccountMenuItem,
+          {
+            variant: "destructive",
+            className: "gap-2",
+            disabled: signingOut || !onSignOut,
+            onSelect: (event) => {
+              event.preventDefault();
+              void handleSignOut();
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: signingOut ? labels.signingOut : labels.signOut }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { className: "size-4" })
+            ]
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LanguageThemeExpand,
+          {
+            languages,
+            currentLanguage,
+            onLanguageChange,
+            labels
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(AccountMenuSeparator, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(PlatformAccountMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: loginHref, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.signIn }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogIn, { className: "size-4" })
+        ] }) })
+      ] })
+    }
+  );
+}
+function defaultFormatTime(isoDate, language) {
+  return new Date(isoDate).toLocaleString(
+    language === "es" ? "es-ES" : "en-US",
+    {
+      dateStyle: "short",
+      timeStyle: "short"
+    }
+  );
+}
+function NotificationInbox({
+  notifications,
+  labels,
+  language = "es",
+  formatTime,
+  viewAllHref,
+  renderLeading,
+  emptyIcon: EmptyIcon = lucideReact.Bell,
+  className,
+  listClassName
+}) {
+  const surface = useResponsiveMenuSurface();
+  const format = formatTime ?? ((iso) => defaultFormatTime(iso, language));
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("flex flex-col", className),
+      "data-testid": "notification-inbox",
+      children: [
+        surface === "dropdown" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between border-b px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold", children: labels.title }) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("max-h-80 overflow-y-auto", listClassName), children: notifications.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { variant: "compact", icon: EmptyIcon, title: labels.empty }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col", children: notifications.map((notification, index) => {
+          const leading = renderLeading?.(notification) ?? null;
+          const body = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            leading,
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium leading-none", children: notification.title }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "line-clamp-2 text-xs text-muted-foreground", children: notification.message }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground/70", children: format(notification.createdAt) })
+            ] })
+          ] });
+          const rowClass = cn(
+            "flex gap-3 px-4 py-3",
+            !notification.read && "bg-muted/30",
+            notification.link && "transition-colors hover:bg-muted/50",
+            index < notifications.length - 1 && "border-b"
+          );
+          return /* @__PURE__ */ jsxRuntime.jsx("li", { children: notification.link ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: notification.link, className: rowClass, children: body }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: rowClass, children: body }) }, notification.id);
+        }) }) }),
+        viewAllHref && labels.viewAll ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t px-4 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href: viewAllHref,
+            className: "block text-center text-sm font-medium text-primary hover:underline",
+            children: labels.viewAll
+          }
+        ) }) : null
+      ]
+    }
+  );
 }
 function Slider({
   className,
@@ -3729,110 +4043,7 @@ function AvatarEditor({
     }
   );
 }
-function Drawer({
-  repositionInputs = false,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    vaul.Drawer.Root,
-    {
-      "data-slot": "drawer",
-      repositionInputs,
-      ...props
-    }
-  );
-}
-function DrawerPortal({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Portal, { "data-slot": "drawer-portal", ...props });
-}
-function DrawerClose({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Close, { "data-slot": "drawer-close", ...props });
-}
-function DrawerOverlay({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    vaul.Drawer.Overlay,
-    {
-      "data-slot": "drawer-overlay",
-      className: cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 dark:bg-black/80",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DrawerContent({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DrawerOverlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      vaul.Drawer.Content,
-      {
-        "data-slot": "drawer-content",
-        className: cn(
-          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
-          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
-          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
-          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
-          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
-          children
-        ]
-      }
-    )
-  ] });
-}
-function DrawerHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "drawer-header",
-      className: cn(
-        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DrawerFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "drawer-footer",
-      className: cn("mt-auto flex flex-col gap-2 p-4", className),
-      ...props
-    }
-  );
-}
-function DrawerTitle({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    vaul.Drawer.Title,
-    {
-      "data-slot": "drawer-title",
-      className: cn("text-foreground font-semibold", className),
-      ...props
-    }
-  );
-}
-function useMediaQuery(query) {
+function useMediaQuery2(query) {
   const [matches, setMatches] = React2.useState(false);
   React2.useEffect(() => {
     const media = window.matchMedia(query);
@@ -3867,7 +4078,7 @@ function AvatarEditorDialog({
   const [editedValue, setEditedValue] = React2.useState(value ?? null);
   const [isSaving, setIsSaving] = React2.useState(false);
   const [feedback, setFeedback] = React2.useState(null);
-  const isMobile = useMediaQuery("(max-width: 640px)");
+  const isMobile = useMediaQuery2("(max-width: 640px)");
   const caption = (placeholder ?? "").trim();
   const handleOpenChange = React2.useCallback(
     (open) => {
@@ -4813,18 +5024,6 @@ function useDebouncedValueStrict(value, delayMs) {
   }, [value, delayMs]);
   return debounced;
 }
-function useMediaQuery2(query) {
-  const [matches, setMatches] = React2.useState(false);
-  React2.useEffect(() => {
-    if (typeof window === "undefined" || !window.matchMedia) return;
-    const mql = window.matchMedia(query);
-    const onChange = () => setMatches(mql.matches);
-    onChange();
-    mql.addEventListener("change", onChange);
-    return () => mql.removeEventListener("change", onChange);
-  }, [query]);
-  return matches;
-}
 function readMetrics() {
   if (typeof window === "undefined") {
     return { height: 0, offsetTop: 0, keyboardInset: 0 };
@@ -5753,7 +5952,7 @@ function SearchablePicker(props) {
   const mode = props.mode ?? "single";
   const labels = { ...defaultLabels4, ...userLabels };
   const resolvedEmptyLabel = emptyLabel ?? labels.emptyOption;
-  const isMobile = useMediaQuery2("(max-width: 767px)");
+  const isMobile = useMediaQuery("(max-width: 767px)");
   const generatedId = React2.useId();
   const triggerId = id ?? generatedId;
   const [uncontrolledOpen, setUncontrolledOpen] = React2.useState(false);
@@ -8041,7 +8240,7 @@ function SupportMessengerProvider({
   searchThreshold = 8,
   className
 }) {
-  const isMobile = useMediaQuery2("(max-width: 767px)");
+  const isMobile = useMediaQuery("(max-width: 767px)");
   const { height: viewportHeight, keyboardInset } = useVisualViewportMetrics();
   const dockRef = React2.useRef(null);
   const [listOpen, setListOpen] = React2.useState(false);
@@ -9243,12 +9442,15 @@ exports.MessageScrollerItem = MessageScrollerItem;
 exports.MessageScrollerProvider = MessageScrollerProvider;
 exports.MessageScrollerViewport = MessageScrollerViewport;
 exports.MexicoMap = MexicoMap;
+exports.NotificationInbox = NotificationInbox;
 exports.OrgSwitcher = OrgSwitcher;
 exports.PLATFORM_ACCOUNT_ORG_COLLAPSE_AT = PLATFORM_ACCOUNT_ORG_COLLAPSE_AT;
 exports.PaymentIcon = PaymentIcon;
 exports.PhoneInput = PhoneInput;
 exports.PlatformAccountMenu = PlatformAccountMenu;
+exports.PlatformAccountMenuItem = PlatformAccountMenuItem;
 exports.PlatformNavbar = PlatformNavbar;
+exports.ResponsiveMenu = ResponsiveMenu;
 exports.RfcInput = RfcInput;
 exports.SafeImage = SafeImage;
 exports.ScrollRestorationProvider = ScrollRestorationProvider;
@@ -9288,9 +9490,10 @@ exports.useDebouncedValue = useDebouncedValue;
 exports.useDebouncedValueStrict = useDebouncedValueStrict;
 exports.useEditableSection = useEditableSection;
 exports.useLanguageContext = useLanguageContext;
-exports.useMediaQuery = useMediaQuery2;
+exports.useMediaQuery = useMediaQuery;
 exports.useRealtimeChannel = useRealtimeChannel;
 exports.useRegisterScrollContainer = useRegisterScrollContainer;
+exports.useResponsiveMenuSurface = useResponsiveMenuSurface;
 exports.useRestorableState = useRestorableState;
 exports.useScrollFadeXEdges = useScrollFadeXEdges;
 exports.useScrollRestorationContext = useScrollRestorationContext;