@syscore/ui-library 1.1.10 → 1.1.12

package/dist/ui/index.es.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { useState, useEffect, useCallback } from "react";
+import React__default, { useState, useEffect, useCallback, useRef } from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDown, GripVertical, X, PanelLeft, Check, Circle, Dot, ChevronUp, ChevronRight, ChevronLeft, MoreHorizontal, XIcon, ArrowLeft, ArrowRight, Search } from "lucide-react";
+import { ChevronDown, GripVertical, X, PanelLeft, Check, Circle, Dot, ChevronUp, ChevronRight, ChevronLeft, XIcon, Search, MoreHorizontal, ArrowLeft, ArrowRight, Building2 } from "lucide-react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
@@ -26,7 +26,8 @@ import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import { DayPicker } from "react-day-picker";
-import "motion/react";
+import { motion, AnimatePresence } from "motion/react";
+import { Command as Command$1 } from "cmdk";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
@@ -37,7 +38,6 @@ import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import useEmblaCarousel from "embla-carousel-react";
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-import { Command as Command$1 } from "cmdk";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import * as RechartsPrimitive from "recharts";
 import { useTheme } from "next-themes";
@@ -298,7 +298,7 @@ function useIsMobile() {
   }, []);
   return !!isMobile;
 }
-const buttonVariants = cva(
+const buttonVariants$1 = cva(
   "group inline-flex items-center justify-center rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
   {
     variants: {
@@ -346,13 +346,13 @@ const buttonVariants = cva(
     }
   }
 );
-const Button = React.forwardRef(
+const Button$1 = React.forwardRef(
   ({ className, variant, size, children, style, ...props }, ref) => {
     const bodyClass = size === "xlarge" ? "body-large" : size === "large" ? "body-base" : size === "utility" ? "body-small" : "";
     return /* @__PURE__ */ jsx(
       "button",
       {
-        className: cn(buttonVariants({ variant, size }), className),
+        className: cn(buttonVariants$1({ variant, size }), className),
         style,
         ref,
         ...props,
@@ -361,7 +361,7 @@ const Button = React.forwardRef(
     );
   }
 );
-Button.displayName = "Button";
+Button$1.displayName = "Button";
 const Input = React.forwardRef(
   ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
@@ -738,7 +738,7 @@ Sidebar.displayName = "Sidebar";
 const SidebarTrigger = React.forwardRef(({ className, onClick, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsxs(
-    Button,
+    Button$1,
     {
       ref,
       "data-sidebar": "trigger",
@@ -1721,7 +1721,7 @@ const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => /*
   AlertDialogPrimitive.Action,
   {
     ref,
-    className: cn(buttonVariants(), className),
+    className: cn(buttonVariants$1(), className),
     ...props
   }
 ));
@@ -1731,7 +1731,7 @@ const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      buttonVariants({ variant: "general-secondary" }),
+      buttonVariants$1({ variant: "general-secondary" }),
       "mt-2 sm:mt-0",
       className
     ),
@@ -1871,7 +1871,7 @@ function Calendar({
         caption_label: "text-sm font-medium",
         nav: "space-x-1 flex items-center",
         nav_button: cn(
-          buttonVariants({ variant: "general-secondary" }),
+          buttonVariants$1({ variant: "general-secondary" }),
           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
         ),
         nav_button_previous: "absolute left-1",
@@ -1882,7 +1882,7 @@ function Calendar({
         row: "flex w-full mt-2",
         cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
         day: cn(
-          buttonVariants({ variant: "general-tertiary" }),
+          buttonVariants$1({ variant: "general-tertiary" }),
           "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
         ),
         day_range_end: "day-range-end",
@@ -1907,139 +1907,1854 @@ function Calendar({
   );
 }
 Calendar.displayName = "Calendar";
-const TabsRoot = React__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.Root,
-  {
-    ref,
-    className: cn("w-full", className),
-    ...props
-  }
-));
-TabsRoot.displayName = TabsPrimitive.Root.displayName;
-const TabsList = React__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.List,
-  {
-    ref,
-    className: cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className
-    ),
-    ...props
-  }
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-const TabsTrigger = React__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.Trigger,
-  {
-    ref,
-    className: cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-      className
-    ),
-    ...props
-  }
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-const TabsContent = React__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.Content,
-  {
-    ref,
-    className: cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
-    ),
-    ...props
-  }
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-const Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx(
-  "nav",
-  {
-    role: "navigation",
-    "aria-label": "pagination",
-    className: cn("mx-auto flex w-full justify-center", className),
-    ...props
-  }
-);
-Pagination.displayName = "Pagination";
-const PaginationContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "ul",
-  {
-    ref,
-    className: cn("flex flex-row items-center gap-1", className),
-    ...props
-  }
-));
-PaginationContent.displayName = "PaginationContent";
-const PaginationItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("", className), ...props }));
-PaginationItem.displayName = "PaginationItem";
-const PaginationLink = ({
-  className,
-  isActive,
-  size = "icon",
-  ...props
-}) => /* @__PURE__ */ jsx(
-  "a",
-  {
-    "aria-current": isActive ? "page" : void 0,
-    className: cn(
-      buttonVariants({
-        variant: isActive ? "general-secondary" : "general-tertiary",
-        size
-      }),
-      className
-    ),
-    ...props
-  }
-);
-PaginationLink.displayName = "PaginationLink";
-const PaginationPrevious = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxs(
-  PaginationLink,
+const UtilityClose = ({ className }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "size-4 flex items-center justify-center text-gray-500",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "12",
+          height: "12",
+          viewBox: "0 0 12 12",
+          fill: "none",
+          className: cn("size-3 text-inherit"),
+          children: [
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M10.8002 1.19995L1.2002 10.8",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M1.2002 1.19995L10.8002 10.8",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+const NavLogo = ({ dark = false }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "64",
+      height: "16",
+      viewBox: "0 0 64 16",
+      fill: "none",
+      className: cn(dark ? "text-gray-700" : "text-white"),
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M53.5868 0H55.0485C55.6026 0 56.0325 0.404706 56.0325 0.969412V12.8941H63.016C63.5701 12.8941 64 13.2988 64 13.8447V15.0306C64 15.5765 63.5701 16 63.016 16H53.5868C53.0327 16 52.6028 15.5765 52.6028 15.0306V0.969412C52.6028 0.404706 53.0423 0 53.5868 0Z",
+            fill: dark ? "currentColor" : "white"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M39.9826 0H41.4442C41.9983 0 42.4282 0.404706 42.4282 0.969412V12.8941H49.4118C49.9659 12.8941 50.3958 13.2988 50.3958 13.8447V15.0306C50.3958 15.5765 49.9659 16 49.4118 16H39.9826C39.4285 16 38.9986 15.5765 38.9986 15.0306V0.969412C38.9986 0.404706 39.4285 0 39.9826 0Z",
+            fill: dark ? "currentColor" : "white"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M25.4615 0H35.5212C36.0944 0 36.5052 0.404706 36.5052 0.969412V2.15529C36.5052 2.70118 36.0944 3.12471 35.5212 3.12471H27.9072V6.37176H34.222C34.7761 6.37176 35.206 6.77647 35.206 7.32235V8.50824C35.206 9.07294 34.7761 9.47765 34.222 9.47765H27.9072V12.8941H35.6359C36.2091 12.8941 36.6199 13.2988 36.6199 13.8447V15.0306C36.6199 15.5765 36.2091 16 35.6359 16H25.4615C24.9074 16 24.4775 15.5765 24.4775 15.0306V0.969412C24.4775 0.404706 24.9074 0 25.4615 0Z",
+            fill: dark ? "currentColor" : "white"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M2.26579 0C2.81989 0 3.37399 0.376471 3.53639 0.922353L6.56483 10.4941L9.51684 0.856471C9.66014 0.357647 10.1665 0 10.6728 0H11.6855C12.2109 0 12.7172 0.357647 12.8605 0.856471L15.8412 10.5035L18.8314 0.922353C18.9747 0.376471 19.5288 0 20.102 0H21.6401C22.1942 0 22.4808 0.404706 22.2898 0.922353L17.4653 15.1435C17.2933 15.6141 16.7965 16 16.2616 16H15.2489C14.7426 16 14.2362 15.6424 14.0929 15.1435L11.1887 5.92L8.25578 15.1435C8.11248 15.6424 7.60615 16 7.08071 16H6.08716C5.58083 16 5.0745 15.6235 4.91209 15.1435L0.0589489 0.922353C-0.13212 0.404706 0.154483 0 0.727688 0H2.26579Z",
+            fill: dark ? "currentColor" : "white"
+          }
+        )
+      ]
+    }
+  );
+};
+const NavAccount = ({ className = "" }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "32",
+      height: "32",
+      viewBox: "0 0 32 32",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: cn(
+        "transition-colors duration-300 text-bronze-500",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M16.0001 14.5C18.2093 14.5 20.0001 12.7091 20.0001 10.5C20.0001 8.29086 18.2093 6.5 16.0001 6.5C13.791 6.5 12.0001 8.29086 12.0001 10.5C12.0001 12.7091 13.791 14.5 16.0001 14.5Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M6.90759 23.3314C8.48801 19.8899 11.9649 17.5 16 17.5C20.0351 17.5 23.5121 19.89 25.0924 23.3316C22.8919 25.8841 19.6347 27.5 16.0001 27.5C12.3654 27.5 9.10818 25.8841 6.90759 23.3314Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+};
+const NavBullet = ({ color }) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "8",
+      height: "9",
+      viewBox: "0 0 8 9",
+      fill: "none",
+      children: /* @__PURE__ */ jsx("circle", { cx: "4", cy: "4.5", r: "3.5", fill: color, stroke: "#F3E7D8" })
+    }
+  );
+};
+const buttonVariants = cva(
+  "group inline-flex items-center justify-center rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
   {
-    "aria-label": "Go to previous page",
-    size: "utility",
-    className: cn("gap-1 pl-2.5", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
-      /* @__PURE__ */ jsx("span", { children: "Previous" })
-    ]
+    variants: {
+      variant: {
+        // CTA variants
+        "primary-gradient": "text-white hover:opacity-90 btn-primary-gradient",
+        "primary-dark": "bg-cyan-800 text-white hover:bg-cyan-900 focus-visible:ring-cyan-800",
+        "secondary-light": "bg-white border border-gray-200 text-cyan-800 hover:bg-gray-50 focus-visible:ring-gray-200",
+        "tertiary-light": "bg-blue-50 border border-blue-200 text-blue-600 hover:bg-blue-100 focus-visible:ring-blue-200",
+        // Utility variants
+        "general-primary": "bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-600",
+        "general-secondary": "bg-white border border-blue-200 text-blue-600 hover:bg-blue-50 focus-visible:ring-blue-200",
+        "general-tertiary": "bg-white border border-gray-200 text-gray-600 hover:bg-gray-50 focus-visible:ring-gray-200",
+        "tooltip-primary": "bg-cyan-300 text-white hover:bg-cyan-400 focus-visible:ring-cyan-300",
+        "tooltip-secondary": "bg-gray-500 text-white hover:bg-gray-600 focus-visible:ring-gray-500"
+      },
+      size: {
+        xlarge: "h-16 px-10",
+        large: "h-12 px-8",
+        utility: "h-8 px-4",
+        icon: "size-[32px]"
+      }
+    },
+    compoundVariants: [
+      {
+        size: "xlarge",
+        className: "font-semibold"
+      },
+      {
+        size: "large",
+        className: "font-semibold"
+      },
+      {
+        size: "utility",
+        className: "font-semibold"
+      },
+      {
+        size: "icon",
+        className: "p-0 bg-white border border-gray-100 "
+      }
+    ],
+    defaultVariants: {
+      variant: "primary-dark",
+      size: "large"
+    }
   }
 );
-PaginationPrevious.displayName = "PaginationPrevious";
-const PaginationNext = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxs(
-  PaginationLink,
-  {
-    "aria-label": "Go to next page",
-    size: "utility",
-    className: cn("gap-1 pr-2.5", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", { children: "Next" }),
-      /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
-    ]
+const Button = React.forwardRef(
+  ({ className, variant, size, children, style, ...props }, ref) => {
+    const bodyClass = size === "xlarge" ? "body-large" : size === "large" ? "body-base" : size === "utility" ? "body-small" : "";
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: cn(buttonVariants({ variant, size }), className),
+        style,
+        ref,
+        ...props,
+        children: size === "icon" ? children : /* @__PURE__ */ jsx("span", { className: cn("relative z-10", bodyClass), children })
+      }
+    );
   }
 );
-PaginationNext.displayName = "PaginationNext";
-const PaginationEllipsis = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxs(
-  "span",
-  {
-    "aria-hidden": true,
-    className: cn("flex h-9 w-9 items-center justify-center", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }),
-      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
-    ]
+Button.displayName = "Button";
+const Navigation = ({
+  navItems,
+  isStrategy = false,
+  onLinkClick
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [activeItem, setActiveItem] = React.useState(null);
+  const containerRef = React.useRef(null);
+  const menuRef = React.useRef(null);
+  const menuItemsRef = React.useRef(null);
+  const overlayRef = React.useRef(null);
+  const handleMouseLeave = () => {
+    setIsOpen(false);
+    setActiveItem(null);
+  };
+  const handleNavItemMouseEnter = (index) => {
+    setIsOpen(true);
+    setActiveItem(index + 1);
+  };
+  const handleLink = (href) => {
+    if (onLinkClick) {
+      onLinkClick(href);
+    }
+  };
+  const Link = ({ to, className, "aria-label": ariaLabel, children }) => /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: to,
+      className,
+      "aria-label": ariaLabel,
+      onClick: (e) => {
+        e.preventDefault();
+        handleLink(to);
+      },
+      children
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      ref: containerRef,
+      className: cn(
+        "absolute top-0 left-0 z-50 h-14 w-full",
+        isStrategy && "bg-gray-50 backdrop-blur-xl backdrop-filter border-b border-gray-100"
+      ),
+      onMouseLeave: handleMouseLeave,
+      children: [
+        !isStrategy && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: overlayRef,
+            className: cn(
+              "absolute top-0 left-0 z-[-1] h-[340px] w-full duration-300 ease-in-out will-change-transform",
+              isOpen ? "translate-y-0 bg-[rgba(62,64,73,0.90)] backdrop-blur-xl" : "-translate-y-[calc(100%-56px)] bg-black/16"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "container-lg flex h-14 items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex h-full sm:min-w-[200px] items-center", children: [
+            isStrategy ? /* @__PURE__ */ jsx(Button, { className: "mr-4", size: "icon", children: /* @__PURE__ */ jsx(UtilityClose, { className: "text-gray-700 group-hover:text-white" }) }) : null,
+            /* @__PURE__ */ jsx(
+              Link,
+              {
+                to: "/",
+                className: cn(
+                  "flex items-center  ease-in-out duration-300 will-change-transform",
+                  {
+                    "translate-x-0": isStrategy
+                  }
+                ),
+                "aria-label": "Home",
+                children: /* @__PURE__ */ jsx(NavLogo, { dark: isStrategy })
+              }
+            )
+          ] }),
+          !isStrategy ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "relative hidden h-full flex-1 items-center justify-center space-x-12 md:flex"
+              ),
+              children: /* @__PURE__ */ jsx("ul", { className: "flex h-full gap-x-12", children: navItems.map((item, index) => /* @__PURE__ */ jsxs(
+                "li",
+                {
+                  className: cn(
+                    "relative flex h-full flex-col items-center justify-center"
+                  ),
+                  onMouseEnter: () => handleNavItemMouseEnter(index),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "body-small cursor-pointer font-semibold text-white", children: item.label }),
+                    activeItem === index + 1 && /* @__PURE__ */ jsx(
+                      motion.div,
+                      {
+                        id: "underline",
+                        className: "absolute -bottom-[10px] z-50 h-[10px] w-[10px] rounded-full",
+                        layoutId: "underline",
+                        transition: { duration: 0.2, ease: "easeOut" },
+                        children: /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: "half-circle bg-gradient-to-b from-[#3EECD1] to-[#66FCD9]",
+                            style: {
+                              width: "10px",
+                              height: "5px",
+                              borderBottomLeftRadius: "100px",
+                              borderBottomRightRadius: "100px",
+                              borderBottom: "0",
+                              boxSizing: "border-box"
+                            }
+                          }
+                        )
+                      }
+                    ),
+                    index === 0 && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "absolute -bottom-[5px] z-50 h-[10px] w-[10px] rounded-full",
+                        style: { transition: "all 0.2s ease-out" },
+                        children: /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: "half-circle bg-white",
+                            style: {
+                              width: "10px",
+                              height: "5px",
+                              borderTopLeftRadius: "100px",
+                              borderTopRightRadius: "100px",
+                              borderBottom: "0",
+                              boxSizing: "border-box"
+                            }
+                          }
+                        )
+                      }
+                    )
+                  ]
+                },
+                index + 1
+              )) })
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("div", { className: "flex h-full sm:min-w-[200px] items-center justify-end gap-4", children: /* @__PURE__ */ jsx(
+            Link,
+            {
+              to: "/",
+              "aria-label": "Account link",
+              className: cn(
+                "flex h-8 w-8 items-center justify-center rounded-full transition-colors btn-icon",
+                !isOpen ? "bg-black/8" : "bg-white/12",
+                isStrategy ? "bg-white border border-gray-100" : ""
+              ),
+              children: /* @__PURE__ */ jsx(
+                NavAccount,
+                {
+                  className: isStrategy ? "text-bronze-500" : "text-bronze-100"
+                }
+              )
+            }
+          ) })
+        ] }),
+        isOpen && /* @__PURE__ */ jsx("div", { className: "h-px w-full bg-[rgba(255,255,255,0.08)]" }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: menuRef,
+            className: cn(
+              "relative max-h-[292px] pointer-events-none",
+              isOpen ? "pointer-events-auto" : ""
+            ),
+            children: /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 h-full w-full", children: /* @__PURE__ */ jsx("div", { ref: menuItemsRef, className: "relative grid", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxs(
+              motion.div,
+              {
+                initial: { y: 10, opacity: 0 },
+                animate: { y: 0, opacity: 1 },
+                exit: { y: -10, opacity: 0 },
+                transition: { duration: 0.2 },
+                children: [
+                  activeItem === 1 && /* @__PURE__ */ jsxs("div", { className: "col-span-full row-span-full container-lg mx-auto space-y-6 py-6 transition-opacity duration-200 ease-in-out", children: [
+                    /* @__PURE__ */ jsx(
+                      "h2",
+                      {
+                        className: "heading-xsmall py-1",
+                        style: {
+                          background: "linear-gradient(90deg, #41D5F6 0%, #3EECD1 25%, #66FCD9 50%, #66FCD9 75%, #3EECD1 100%)",
+                          WebkitBackgroundClip: "text",
+                          WebkitTextFillColor: "transparent",
+                          backgroundClip: "text"
+                        },
+                        children: "WELL sets the standard for people-first places"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: "flex gap-x-20", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+                        /* @__PURE__ */ jsx("h3", { className: "overline-medium font-semibold text-plum-400", children: "Everything" }),
+                        /* @__PURE__ */ jsxs("ul", { className: "space-y-5", children: [
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Explore WELL"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Enroll in WELL"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "What's new"
+                            }
+                          ) })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+                        /* @__PURE__ */ jsx("h3", { className: "overline-medium font-semibold text-plum-400", children: "WHY WELL" }),
+                        /* @__PURE__ */ jsxs("ul", { className: "space-y-5", children: [
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Performance"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "ROI"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Impact"
+                            }
+                          ) })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+                        /* @__PURE__ */ jsx("h3", { className: "overline-medium font-semibold text-plum-400", children: "Standard" }),
+                        /* @__PURE__ */ jsxs("ul", { className: "space-y-5", children: [
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Strategies"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Themes"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Milestones"
+                            }
+                          ) })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+                        /* @__PURE__ */ jsx("h3", { className: "overline-medium font-semibold text-plum-400", children: "Network" }),
+                        /* @__PURE__ */ jsxs("ul", { className: "space-y-5", children: [
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Organizations"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "People"
+                            }
+                          ) })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+                        /* @__PURE__ */ jsx("h3", { className: "overline-medium font-semibold text-plum-400", children: "Solutions" }),
+                        /* @__PURE__ */ jsxs("ul", { className: "space-y-5", children: [
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Products"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Services"
+                            }
+                          ) })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+                        /* @__PURE__ */ jsx("h3", { className: "overline-medium font-semibold text-plum-400", children: "Places" }),
+                        /* @__PURE__ */ jsxs("ul", { className: "space-y-5", children: [
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Locations"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Portfolios"
+                            }
+                          ) })
+                        ] })
+                      ] })
+                    ] })
+                  ] }),
+                  activeItem === 2 && /* @__PURE__ */ jsxs("div", { className: "col-span-full row-span-full container-lg mx-auto space-y-6 py-6 transition-opacity duration-200 ease-in-out", children: [
+                    /* @__PURE__ */ jsx(
+                      "h2",
+                      {
+                        className: "heading-xsmall py-1",
+                        style: {
+                          background: "linear-gradient(99deg, #41D5F6 3.39%, #3EECD1 57.86%, #66FCD9 112.32%)",
+                          backgroundClip: "text",
+                          WebkitBackgroundClip: "text",
+                          WebkitTextFillColor: "transparent"
+                        },
+                        children: "WELL works everywhere, at any scale"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: "flex gap-x-20", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+                        /* @__PURE__ */ jsx("h3", { className: "overline-medium font-semibold text-plum-400", children: "SUBSCRIBE" }),
+                        /* @__PURE__ */ jsxs("ul", { className: "space-y-4", children: [
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "WELL at scale"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pl-[6px]", children: [
+                            /* @__PURE__ */ jsx("div", { className: "h-1 w-1 rounded-full bg-gray-500" }),
+                            /* @__PURE__ */ jsx(Link, { to: "/", children: /* @__PURE__ */ jsx("span", { className: "body-small font-medium text-gray-100", children: "Pricing" }) })
+                          ] }) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pl-[6px]", children: [
+                            /* @__PURE__ */ jsx("div", { className: "h-1 w-1 rounded-full bg-gray-500" }),
+                            /* @__PURE__ */ jsx(Link, { to: "/", children: /* @__PURE__ */ jsx("span", { className: "body-small font-medium text-gray-100", children: "Leaderboard" }) })
+                          ] }) })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+                        /* @__PURE__ */ jsx("h3", { className: "overline-medium font-semibold text-plum-400", children: "Certify" }),
+                        /* @__PURE__ */ jsxs("ul", { className: "space-y-4", children: [
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "WELL Certification"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                            Link,
+                            {
+                              to: "/",
+                              className: "text-gray-100 hover:text-white flex items-center justify-start body-base font-medium",
+                              children: [
+                                "WELL Residence",
+                                /* @__PURE__ */ jsx("span", { className: "overline-small text-[#F0AA99] ml-1", children: "PILOT" })
+                              ]
+                            }
+                          ) })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+                        /* @__PURE__ */ jsx("h3", { className: "overline-medium font-semibold text-plum-400", children: "Get rated" }),
+                        /* @__PURE__ */ jsxs("ul", { className: "space-y-4", children: [
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "WELL Ratings"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pl-[6px]", children: [
+                            /* @__PURE__ */ jsx(NavBullet, { color: "#F3E7D8" }),
+                            /* @__PURE__ */ jsx(
+                              Link,
+                              {
+                                to: "/",
+                                className: "body-small font-medium text-gray-100",
+                                children: "Health-Safety Rating"
+                              }
+                            )
+                          ] }) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pl-[6px]", children: [
+                            /* @__PURE__ */ jsx(NavBullet, { color: "#0F748A" }),
+                            /* @__PURE__ */ jsx(
+                              Link,
+                              {
+                                to: "/",
+                                className: "body-small font-medium text-gray-100",
+                                children: "Performance Rating"
+                              }
+                            )
+                          ] }) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pl-[6px]", children: [
+                            /* @__PURE__ */ jsx(NavBullet, { color: "#17AA8D" }),
+                            /* @__PURE__ */ jsx(
+                              Link,
+                              {
+                                to: "/",
+                                className: "body-small font-medium text-gray-100",
+                                children: "Equity Rating"
+                              }
+                            )
+                          ] }) })
+                        ] })
+                      ] })
+                    ] })
+                  ] }),
+                  activeItem === 3 && /* @__PURE__ */ jsxs("div", { className: "col-span-full row-span-full container-lg mx-auto space-y-6 py-6 transition-opacity duration-200 ease-in-out", children: [
+                    /* @__PURE__ */ jsx(
+                      "h2",
+                      {
+                        className: "heading-xsmall py-1",
+                        style: {
+                          background: "linear-gradient(90deg, #41D5F6 0%, #3EECD1 25%, #66FCD9 50%, #66FCD9 75%, #3EECD1 100%)",
+                          WebkitBackgroundClip: "text",
+                          WebkitTextFillColor: "transparent"
+                        },
+                        children: "Our network drives our movement"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: "flex gap-x-20", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+                        /* @__PURE__ */ jsx("h3", { className: "overline-medium font-semibold text-plum-400", children: "JOIN" }),
+                        /* @__PURE__ */ jsxs("ul", { className: "space-y-4", children: [
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Membership"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Works with WELL"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pl-[6px]", children: [
+                            /* @__PURE__ */ jsx(NavBullet, { color: "#2E74AD" }),
+                            /* @__PURE__ */ jsx(
+                              Link,
+                              {
+                                to: "/",
+                                className: "body-small font-medium text-gray-100",
+                                children: "Enterprise Provider"
+                              }
+                            )
+                          ] }) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pl-[6px]", children: [
+                            /* @__PURE__ */ jsx(NavBullet, { color: "#149EBD" }),
+                            /* @__PURE__ */ jsx(
+                              Link,
+                              {
+                                to: "/",
+                                className: "body-small font-medium text-gray-100",
+                                children: "Product Provider"
+                              }
+                            )
+                          ] }) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pl-[6px]", children: [
+                            /* @__PURE__ */ jsx(NavBullet, { color: "#ED896F" }),
+                            /* @__PURE__ */ jsx(
+                              Link,
+                              {
+                                to: "/",
+                                className: "body-small font-medium text-gray-100",
+                                children: "Performance Testing Provider"
+                              }
+                            )
+                          ] }) })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+                        /* @__PURE__ */ jsx("h3", { className: "overline-medium font-semibold text-plum-400", children: "EARN" }),
+                        /* @__PURE__ */ jsxs("ul", { className: "space-y-4", children: [
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "WELL AP"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "WELL Faculty"
+                            }
+                          ) })
+                        ] })
+                      ] })
+                    ] })
+                  ] }),
+                  activeItem === 4 && /* @__PURE__ */ jsxs("div", { className: "col-span-full row-span-full container-lg mx-auto space-y-6 py-6 transition-opacity duration-200 ease-in-out", children: [
+                    /* @__PURE__ */ jsx(
+                      "h2",
+                      {
+                        className: "heading-xsmall py-1",
+                        style: {
+                          background: "linear-gradient(90deg, #41D5F6 0%, #3EECD1 25%, #66FCD9 50%, #66FCD9 75%, #3EECD1 100%)",
+                          WebkitBackgroundClip: "text",
+                          WebkitTextFillColor: "transparent"
+                        },
+                        children: "Learn from the experts on health"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: "flex gap-x-20", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+                        /* @__PURE__ */ jsx("h3", { className: "overline-medium font-semibold text-plum-400", children: "LEARN" }),
+                        /* @__PURE__ */ jsxs("ul", { className: "space-y-4", children: [
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "WELL Forum"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pl-[6px]", children: [
+                            /* @__PURE__ */ jsx("div", { className: "h-1 w-1 rounded-full bg-gray-500" }),
+                            /* @__PURE__ */ jsx(
+                              Link,
+                              {
+                                to: "/",
+                                className: "body-small font-medium text-gray-100",
+                                children: "Threads"
+                              }
+                            )
+                          ] }) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pl-[6px]", children: [
+                            /* @__PURE__ */ jsx("div", { className: "h-1 w-1 rounded-full bg-gray-500" }),
+                            /* @__PURE__ */ jsx(
+                              Link,
+                              {
+                                to: "/",
+                                className: "body-small font-medium text-gray-100",
+                                children: "Webcasts"
+                              }
+                            )
+                          ] }) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pl-[6px]", children: [
+                            /* @__PURE__ */ jsx("div", { className: "h-1 w-1 rounded-full bg-gray-500" }),
+                            /* @__PURE__ */ jsx(
+                              Link,
+                              {
+                                to: "/",
+                                className: "body-small font-medium text-gray-100",
+                                children: "Trainings"
+                              }
+                            )
+                          ] }) })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+                        /* @__PURE__ */ jsx("h3", { className: "overline-medium font-semibold text-plum-400", children: "ATTEND" }),
+                        /* @__PURE__ */ jsxs("ul", { className: "space-y-4", children: [
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "WELL 2025"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pl-[6px]", children: [
+                            /* @__PURE__ */ jsx("div", { className: "h-1 w-1 rounded-full bg-gray-500" }),
+                            /* @__PURE__ */ jsx(
+                              Link,
+                              {
+                                to: "/",
+                                className: "body-small font-medium text-gray-100",
+                                children: "Flagship events"
+                              }
+                            )
+                          ] }) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pl-[6px]", children: [
+                            /* @__PURE__ */ jsx("div", { className: "h-1 w-1 rounded-full bg-gray-500" }),
+                            /* @__PURE__ */ jsx(
+                              Link,
+                              {
+                                to: "/",
+                                className: "body-small font-medium text-gray-100",
+                                children: "Thematic summits"
+                              }
+                            )
+                          ] }) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pl-[6px]", children: [
+                            /* @__PURE__ */ jsx("div", { className: "h-1 w-1 rounded-full bg-gray-500" }),
+                            /* @__PURE__ */ jsx(
+                              Link,
+                              {
+                                to: "/",
+                                className: "body-small font-medium text-gray-100",
+                                children: "Regional summits"
+                              }
+                            )
+                          ] }) })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+                        /* @__PURE__ */ jsx("h3", { className: "overline-medium font-semibold text-plum-400", children: "GUIDANCE" }),
+                        /* @__PURE__ */ jsxs("ul", { className: "space-y-4", children: [
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Knowledge base"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pl-[6px]", children: [
+                            /* @__PURE__ */ jsx("div", { className: "h-1 w-1 rounded-full bg-gray-500" }),
+                            /* @__PURE__ */ jsx(
+                              Link,
+                              {
+                                to: "/",
+                                className: "body-small font-medium text-gray-100",
+                                children: "Tutorials"
+                              }
+                            )
+                          ] }) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pl-[6px]", children: [
+                            /* @__PURE__ */ jsx("div", { className: "h-1 w-1 rounded-full bg-gray-500" }),
+                            /* @__PURE__ */ jsx(
+                              Link,
+                              {
+                                to: "/",
+                                className: "body-small font-medium text-gray-100",
+                                children: "Guides"
+                              }
+                            )
+                          ] }) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pl-[6px]", children: [
+                            /* @__PURE__ */ jsx("div", { className: "h-1 w-1 rounded-full bg-gray-500" }),
+                            /* @__PURE__ */ jsx(
+                              Link,
+                              {
+                                to: "/",
+                                className: "body-small font-medium text-gray-100",
+                                children: "FAQs"
+                              }
+                            )
+                          ] }) })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+                        /* @__PURE__ */ jsx("h3", { className: "overline-medium font-semibold text-plum-400", children: "Resources" }),
+                        /* @__PURE__ */ jsxs("ul", { className: "space-y-4", children: [
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Resource library"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pl-[6px]", children: [
+                            /* @__PURE__ */ jsx("div", { className: "h-1 w-1 rounded-full bg-gray-500" }),
+                            /* @__PURE__ */ jsx(
+                              Link,
+                              {
+                                to: "/",
+                                className: "body-small font-medium text-gray-100",
+                                children: "Technical tools"
+                              }
+                            )
+                          ] }) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pl-[6px]", children: [
+                            /* @__PURE__ */ jsx("div", { className: "h-1 w-1 rounded-full bg-gray-500" }),
+                            /* @__PURE__ */ jsx(
+                              Link,
+                              {
+                                to: "/",
+                                className: "body-small font-medium text-gray-100",
+                                children: "Sales tools"
+                              }
+                            )
+                          ] }) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pl-[6px]", children: [
+                            /* @__PURE__ */ jsx("div", { className: "h-1 w-1 rounded-full bg-gray-500" }),
+                            /* @__PURE__ */ jsx(
+                              Link,
+                              {
+                                to: "/",
+                                className: "body-small font-medium text-gray-100",
+                                children: "Media"
+                              }
+                            )
+                          ] }) })
+                        ] })
+                      ] })
+                    ] })
+                  ] }),
+                  activeItem === 5 && /* @__PURE__ */ jsxs("div", { className: "col-span-full row-span-full container-lg mx-auto space-y-6 py-6 transition-opacity duration-200 ease-in-out", children: [
+                    /* @__PURE__ */ jsx(
+                      "h2",
+                      {
+                        className: "heading-xsmall py-1",
+                        style: {
+                          background: "linear-gradient(90deg, #41D5F6 0%, #3EECD1 25%, #66FCD9 50%, #66FCD9 75%, #3EECD1 100%)",
+                          WebkitBackgroundClip: "text",
+                          WebkitTextFillColor: "transparent"
+                        },
+                        children: "The International WELL Building Institute (IWBI)"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: "flex gap-x-20", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+                        /* @__PURE__ */ jsx("h3", { className: "overline-medium font-semibold text-plum-400", children: "About" }),
+                        /* @__PURE__ */ jsxs("ul", { className: "space-y-4", children: [
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "IWBI"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Research"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Advocacy"
+                            }
+                          ) })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+                        /* @__PURE__ */ jsx("h3", { className: "overline-medium font-semibold text-plum-400", children: "Meet" }),
+                        /* @__PURE__ */ jsxs("ul", { className: "space-y-4", children: [
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Team"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Advisories"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Governance Council"
+                            }
+                          ) })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+                        /* @__PURE__ */ jsx("h3", { className: "overline-medium font-semibold text-plum-400", children: "Explore" }),
+                        /* @__PURE__ */ jsxs("ul", { className: "space-y-4", children: [
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Newsroom"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Jobs"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Blog"
+                            }
+                          ) })
+                        ] })
+                      ] })
+                    ] })
+                  ] })
+                ]
+              },
+              activeItem ? activeItem + 1 : "empty"
+            ) }) }) })
+          }
+        )
+      ]
+    }
+  );
+};
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Overlay,
+    {
+      "data-slot": "dialog-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",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      SheetPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "DialogContent overflow-hidden rounded-[40px] gap-4  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 fixed top-[30%] left-[50%] z-50 grid max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] border-12 border-[rgba(255,255,255,0.20)]  duration-200 sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "p-6 bg-gray-50", children }),
+          showCloseButton && /* @__PURE__ */ jsxs(
+            SheetPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsx(XIcon, {}),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("heading-xxsmall ", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+const Command = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1,
+  {
+    ref,
+    className: cn("flex h-full w-full flex-col overflow-hidden", className),
+    ...props
+  }
+));
+Command.displayName = Command$1.displayName;
+const CommandDialog = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(Dialog, { ...props, children: /* @__PURE__ */ jsx(DialogContent, { className: "overflow-hidden p-0 shadow-lg", children: /* @__PURE__ */ jsx(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) }) });
+};
+const CommandInput = React.forwardRef(({ className, icon: Icon = Search, ...props }, ref) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: cn(
+      "group relative flex h-14 w-full  sm:min-w-[344px] items-center gap-4 rounded-lg border border-gray-200 bg-white p-4  focus:ring-0 focus:outline-none",
+      className
+    ),
+    "cmdk-input-wrapper": "",
+    children: [
+      /* @__PURE__ */ jsx(Icon, { className: " h-4 w-4 shrink-0 group-focus-within:-translate-x-4 group-focus-within:opacity-0 ease-in-out duration-200" }),
+      /* @__PURE__ */ jsx(
+        Command$1.Input,
+        {
+          ref,
+          className: cn(
+            "text-base w-full ring-0 outline-none group-focus-within:-translate-x-8 ease-in-out duration-200",
+            className
+          ),
+          ...props
+        }
+      )
+    ]
+  }
+));
+CommandInput.displayName = Command$1.Input.displayName;
+const CommandList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.List,
+  {
+    ref,
+    className: cn(
+      "max-h-[300px] overflow-y-auto overflow-x-hidden bg-gray-700  rounded-b-lg",
+      className
+    ),
+    ...props
+  }
+));
+CommandList.displayName = Command$1.List.displayName;
+const CommandEmpty = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+  Command$1.Empty,
+  {
+    ref,
+    className: "py-6 text-center text-sm",
+    ...props
+  }
+));
+CommandEmpty.displayName = Command$1.Empty.displayName;
+const CommandGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Group,
+  {
+    ref,
+    className: cn(
+      "group overflow-hidden [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground ",
+      className
+    ),
+    ...props
+  }
+));
+CommandGroup.displayName = Command$1.Group.displayName;
+const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Separator,
+  {
+    ref,
+    className: cn("-mx-1 h-px bg-border", className),
+    ...props
+  }
+));
+CommandSeparator.displayName = Command$1.Separator.displayName;
+const CommandItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full items-center gap-2 cursor-default select-none p-4 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-gray-700 hover:bg-[rgba(0,0,0,0.2)] text-gray-200",
+      className
+    ),
+    ...props
+  }
+));
+CommandItem.displayName = Command$1.Item.displayName;
+const CommandShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+const SearchField = ({
+  options,
+  placeholder,
+  emptyMessage,
+  value,
+  onValueChange,
+  disabled,
+  isLoading = false
+}) => {
+  const inputRef = useRef(null);
+  const [isOpen, setOpen] = useState(false);
+  const [selected, setSelected] = useState(value);
+  const [inputValue, setInputValue] = useState((value == null ? void 0 : value.label) || "");
+  const handleKeyDown = useCallback(
+    (event) => {
+      const input = inputRef.current;
+      if (!input) {
+        return;
+      }
+      if (!isOpen) {
+        setOpen(true);
+      }
+      if (event.key === "Enter" && input.value !== "") {
+        const optionToSelect = options.find(
+          (option) => option.label === input.value
+        );
+        if (optionToSelect) {
+          setSelected(optionToSelect);
+          onValueChange == null ? void 0 : onValueChange(optionToSelect);
+        }
+      }
+      if (event.key === "Escape") {
+        input.blur();
+      }
+    },
+    [isOpen, options, onValueChange]
+  );
+  const handleBlur = useCallback(() => {
+    setOpen(false);
+    setInputValue(selected == null ? void 0 : selected.label);
+  }, [selected]);
+  const handleSelectOption = useCallback(
+    (selectedOption) => {
+      setInputValue(selectedOption.label);
+      setSelected(selectedOption);
+      onValueChange == null ? void 0 : onValueChange(selectedOption);
+      setTimeout(() => {
+        var _a;
+        (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.blur();
+      }, 0);
+    },
+    [onValueChange]
+  );
+  return /* @__PURE__ */ jsxs(Command$1, { onKeyDown: handleKeyDown, children: [
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      CommandInput,
+      {
+        ref: inputRef,
+        value: inputValue,
+        onValueChange: isLoading ? void 0 : setInputValue,
+        onBlur: handleBlur,
+        onFocus: () => setOpen(true),
+        placeholder,
+        disabled,
+        className: cn(
+          "focus-within:border-cyan-300 focus:border-cyan-300",
+          isOpen && "rounded-b-none"
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "animate-in fade-in-0 absolute top-0 z-10 w-full rounded-xl bg-white outline-none",
+          isOpen ? "block" : "hidden"
+        ),
+        children: /* @__PURE__ */ jsxs(CommandList, { className: "border-b border-x border-cyan-300", children: [
+          (options == null ? void 0 : options.length) > 0 && !isLoading ? /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => {
+            const isSelected = (selected == null ? void 0 : selected.value) === option.value;
+            return /* @__PURE__ */ jsxs(
+              CommandItem,
+              {
+                value: option.label,
+                onMouseDown: (event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                },
+                onSelect: () => handleSelectOption(option),
+                children: [
+                  isSelected ? /* @__PURE__ */ jsx(Check, { className: "w-4" }) : null,
+                  option.label
+                ]
+              },
+              option.value
+            );
+          }) }) : null,
+          !isLoading ? /* @__PURE__ */ jsx(CommandEmpty, { className: "select-none rounded-sm px-2 py-3 text-center text-sm text-gray-200", children: emptyMessage }) : null
+        ] })
+      }
+    ) })
+  ] });
+};
+const conceptColors = {
+  mind: {
+    solid: "#0a5161",
+    light: "rgba(10,81,97,0.08)",
+    border: "rgba(10,81,97,0.16)",
+    prefix: "M"
+  },
+  community: {
+    solid: "#0f748a",
+    light: "rgba(15,116,138,0.12)",
+    border: "rgba(15,116,138,0.24)",
+    prefix: "C"
+  },
+  movement: {
+    solid: "#149ebd",
+    light: "rgba(20,158,189,0.12)",
+    border: "rgba(20,158,189,0.24)",
+    prefix: "V"
+  },
+  water: {
+    solid: "#39c9ea",
+    light: "rgba(57,201,234,0.12)",
+    border: "rgba(57,201,234,0.24)",
+    prefix: "W"
+  },
+  air: {
+    solid: "#87dff2",
+    light: "rgba(135,223,242,0.12)",
+    border: "rgba(135,223,242,0.24)",
+    prefix: "A"
+  },
+  light: {
+    solid: "#8aefdb",
+    light: "rgba(138,239,219,0.12)",
+    border: "rgba(138,239,219,0.24)",
+    prefix: "L"
+  },
+  thermalComfort: {
+    solid: "#3eddbf",
+    light: "rgba(62,221,191,0.12)",
+    border: "rgba(62,221,191,0.24)",
+    prefix: "T"
+  },
+  nourishment: {
+    solid: "#17aa8d",
+    light: "rgba(23,170,141,0.12)",
+    border: "rgba(23,170,141,0.24)",
+    prefix: "N"
+  },
+  sound: {
+    solid: "#0c705c",
+    light: "rgba(12,112,92,0.12)",
+    border: "rgba(12,112,92,0.24)",
+    prefix: "S"
+  },
+  materials: {
+    solid: "#0a4f41",
+    light: "rgba(10,79,65,0.08)",
+    border: "rgba(10,79,65,0.16)",
+    prefix: "X"
+  }
+};
+const StrategyTableRow = ({
+  data,
+  isFirst = false,
+  isLast = false,
+  showConceptHeader = true,
+  isExpanded = true
+}) => {
+  const { concept, theme, strategies } = data;
+  const colors = conceptColors[concept.type];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showConceptHeader && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-4 p-4 border border-[#DEDFE3] bg-[#FAFEFF]",
+          "border-b-0",
+          isFirst && "rounded-tl-[12px] rounded-tr-[12px]"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "size-[48px] flex items-center justify-center shrink-0", children: concept.icon }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-[#282A31] uppercase tracking-[0.5px] leading-[14px]", children: concept.name }) })
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 p-4 border border-[#DEDFE3] bg-[#FAFEFF] border-b-0", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "flex items-center justify-center h-8 w-12 rounded-[6px] shrink-0",
+          style: { backgroundColor: colors.solid },
+          children: /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-white leading-[19.6px]", children: theme.code })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("span", { className: "text-base font-medium text-[#282A31] leading-[21px]", children: theme.name }) })
+    ] }),
+    isExpanded && strategies.map((strategy, index) => {
+      var _a;
+      const isLastStrategy = index === strategies.length - 1 && isLast;
+      const scoreParts = ((_a = strategy.score) == null ? void 0 : _a.split("–")) || [];
+      const isRange = scoreParts.length > 1;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-center gap-4 pl-8 pr-4 py-4 border border-[#DEDFE3] bg-white",
+            "border-b-0",
+            isLastStrategy && "rounded-bl-[12px] rounded-br-[12px] border-b-0"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "flex items-center justify-center h-8 w-12 rounded-[6px] border shrink-0",
+                style: {
+                  backgroundColor: colors.light,
+                  borderColor: colors.border
+                },
+                children: /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "text-sm font-semibold leading-[19.6px]",
+                    style: { color: colors.solid },
+                    children: strategy.code
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("span", { className: "text-base font-medium text-[#282A31] leading-[21px]", children: strategy.name }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 shrink-0", children: [
+              strategy.hasTarget && /* @__PURE__ */ jsx("div", { className: "size-8 flex items-center justify-center", children: /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  width: "14",
+                  height: "14",
+                  viewBox: "0 0 14 14",
+                  fill: "none",
+                  className: "text-gray-400",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        cx: "7",
+                        cy: "7",
+                        r: "6.25",
+                        stroke: "currentColor",
+                        strokeWidth: "1.5"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        cx: "7",
+                        cy: "7",
+                        r: "3.5",
+                        stroke: "currentColor",
+                        strokeWidth: "1.5"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "1", fill: "currentColor" })
+                  ]
+                }
+              ) }),
+              strategy.score && /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-[4px]", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-[#282A31] leading-[25.2px]", children: strategy.score }),
+                /* @__PURE__ */ jsxs("span", { className: "text-xs font-semibold text-[#282A31] uppercase tracking-[0.5px] leading-[12px]", children: [
+                  isRange ? "PTS" : "PT",
+                  !isRange && /* @__PURE__ */ jsx("span", { className: "text-transparent", children: "S" })
+                ] })
+              ] })
+            ] })
+          ]
+        },
+        strategy.id
+      );
+    })
+  ] });
+};
+const StrategyTable = ({
+  data,
+  className,
+  isExpanded = true
+}) => {
+  const groupedData = React.useMemo(() => {
+    const groups = {};
+    data.forEach((item) => {
+      const key = item.concept.id;
+      if (!groups[key]) {
+        groups[key] = [];
+      }
+      groups[key].push(item);
+    });
+    return Object.values(groups);
+  }, [data]);
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", className), children: groupedData.map((group, groupIndex) => {
+    const isFirstGroup = groupIndex === 0;
+    const isLastGroup = groupIndex === groupedData.length - 1;
+    return group.map((item, itemIndex) => {
+      const isFirst = isFirstGroup && itemIndex === 0;
+      const isLastItemInGroup = itemIndex === group.length - 1;
+      const isLastStrategyRow = isLastGroup && isLastItemInGroup && item.strategies.length > 0;
+      const showConceptHeader = itemIndex === 0;
+      const uniqueId = `${item.concept.id}-${item.theme.id}`;
+      return /* @__PURE__ */ jsx(
+        StrategyTableRow,
+        {
+          data: item,
+          isFirst,
+          isLast: isLastStrategyRow,
+          showConceptHeader,
+          isExpanded
+        },
+        uniqueId
+      );
+    });
+  }) });
+};
+const getStatusColors = (status, variant = "light") => {
+  const colors = {
+    light: {
+      todo: {
+        bg: "bg-gray-100",
+        text: "text-gray-600"
+      },
+      low: {
+        bg: "bg-cyan-100",
+        text: "text-cyan-600"
+      },
+      medium: {
+        bg: "bg-plum-100",
+        text: "text-plum-600"
+      },
+      high: {
+        bg: "bg-coral-100",
+        text: "text-coral-600"
+      },
+      done: {
+        bg: "bg-emerald-100",
+        text: "text-emerald-600"
+      }
+    },
+    dark: {
+      todo: {
+        bg: "bg-gray-600",
+        text: "text-gray-100"
+      },
+      low: {
+        bg: "bg-cyan-700",
+        text: "text-cyan-100"
+      },
+      medium: {
+        bg: "bg-plum-700",
+        text: "text-plum-100"
+      },
+      high: {
+        bg: "bg-coral-700",
+        text: "text-coral-100"
+      },
+      done: {
+        bg: "bg-emerald-700",
+        text: "text-emerald-100"
+      }
+    }
+  };
+  return colors[variant][status];
+};
+const Tag = React.forwardRef(
+  ({
+    children,
+    active = false,
+    status,
+    variant = "light",
+    className,
+    onClick,
+    ...props
+  }, ref) => {
+    if (status) {
+      const statusColors = getStatusColors(status, variant);
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref,
+          onClick,
+          className: cn(
+            "inline-flex items-center p-[8px] rounded-[6px] w-fit",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+            "disabled:opacity-50 disabled:cursor-not-allowed",
+            statusColors.bg,
+            statusColors.text,
+            className
+          ),
+          ...props,
+          children: /* @__PURE__ */ jsx("span", { className: "overline-medium", children })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        onClick,
+        className: cn(
+          "inline-flex items-center h-[32px] px-[12px] py-0 rounded-[6px] w-fit",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          active ? "bg-white border border-cyan-300 text-gray-800 hover:border-cyan-400" : "bg-blue-100 text-blue-700 hover:bg-blue-200",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx("span", { className: "body-small font-medium", children })
+      }
+    );
+  }
+);
+Tag.displayName = "Tag";
+function useTabs({ tabs, initialTabId }) {
+  const initialIndex = tabs.findIndex((tab) => tab.value === initialTabId);
+  const [selectedTabIndex, setSelectedTabIndex] = useState(
+    initialIndex >= 0 ? initialIndex : 0
+  );
+  const setSelectedTab = useCallback(([index, direction]) => {
+    setSelectedTabIndex(index);
+  }, []);
+  const selectedTab = tabs[selectedTabIndex] || tabs[0];
+  return {
+    tabProps: {
+      tabs,
+      selectedTabIndex,
+      setSelectedTab
+    },
+    selectedTab
+  };
+}
+const TabsRoot = React__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Root,
+  {
+    ref,
+    className: cn("w-full", className),
+    ...props
+  }
+));
+TabsRoot.displayName = TabsPrimitive.Root.displayName;
+const TabsList = React__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.List,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+const TabsTrigger = React__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+const TabsContent = React__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+const Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "nav",
+  {
+    role: "navigation",
+    "aria-label": "pagination",
+    className: cn("mx-auto flex w-full justify-center", className),
+    ...props
+  }
+);
+Pagination.displayName = "Pagination";
+const PaginationContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "ul",
+  {
+    ref,
+    className: cn("flex flex-row items-center gap-1", className),
+    ...props
+  }
+));
+PaginationContent.displayName = "PaginationContent";
+const PaginationItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("", className), ...props }));
+PaginationItem.displayName = "PaginationItem";
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    "aria-current": isActive ? "page" : void 0,
+    className: cn(
+      buttonVariants$1({
+        variant: isActive ? "general-secondary" : "general-tertiary",
+        size
+      }),
+      className
+    ),
+    ...props
+  }
+);
+PaginationLink.displayName = "PaginationLink";
+const PaginationPrevious = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  PaginationLink,
+  {
+    "aria-label": "Go to previous page",
+    size: "utility",
+    className: cn("gap-1 pl-2.5", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx("span", { children: "Previous" })
+    ]
+  }
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+const PaginationNext = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  PaginationLink,
+  {
+    "aria-label": "Go to next page",
+    size: "utility",
+    className: cn("gap-1 pr-2.5", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { children: "Next" }),
+      /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+    ]
+  }
+);
+PaginationNext.displayName = "PaginationNext";
+const PaginationEllipsis = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "span",
+  {
+    "aria-hidden": true,
+    className: cn("flex h-9 w-9 items-center justify-center", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
+    ]
   }
 );
 PaginationEllipsis.displayName = "PaginationEllipsis";
@@ -2337,208 +4052,88 @@ const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...pr
     ...props
   }
 ) }));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.Item,
-  {
-    ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      inset && "pl-8",
-      className
-    ),
-    ...props
-  }
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
-  DropdownMenuPrimitive.CheckboxItem,
-  {
-    ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    ),
-    checked,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
-      children
-    ]
-  }
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  DropdownMenuPrimitive.RadioItem,
-  {
-    ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
-      children
-    ]
-  }
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.Label,
-  {
-    ref,
-    className: cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    ),
-    ...props
-  }
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.Separator,
-  {
-    ref,
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
-    ...props
-  }
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
-      ...props
-    }
-  );
-};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-function Dialog({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "dialog", ...props });
-}
-function DialogTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
-}
-function DialogPortal({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
-}
-function DialogClose({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "dialog-close", ...props });
-}
-function DialogOverlay({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    SheetPrimitive.Overlay,
-    {
-      "data-slot": "dialog-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",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsxs(
-      SheetPrimitive.Content,
-      {
-        "data-slot": "dialog-content",
-        className: cn(
-          "DialogContent overflow-hidden rounded-[40px] gap-4  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 fixed top-[30%] left-[50%] z-50 grid max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] border-12 border-[rgba(255,255,255,0.20)]  duration-200 sm:max-w-lg",
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "p-6 bg-gray-50", children }),
-          showCloseButton && /* @__PURE__ */ jsxs(
-            SheetPrimitive.Close,
-            {
-              "data-slot": "dialog-close",
-              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-              children: [
-                /* @__PURE__ */ jsx(XIcon, {}),
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "dialog-header",
-      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
-      ...props
-    }
-  );
-}
-function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "dialog-footer",
-      className: cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DialogTitle({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    SheetPrimitive.Title,
-    {
-      "data-slot": "dialog-title",
-      className: cn("heading-xxsmall ", className),
-      ...props
-    }
-  );
-}
-function DialogDescription({
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    className: cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+const DropdownMenuShortcut = ({
   className,
   ...props
-}) {
+}) => {
   return /* @__PURE__ */ jsx(
-    SheetPrimitive.Description,
+    "span",
     {
-      "data-slot": "dialog-description",
-      className: cn("text-muted-foreground text-sm", className),
+      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
       ...props
     }
   );
-}
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 const Drawer = ({
   shouldScaleBackground = true,
   ...props
@@ -2924,7 +4519,7 @@ const CarouselPrevious = React.forwardRef(
   ({ className, variant = "general-secondary", size = "icon", ...props }, ref) => {
     const { orientation, scrollPrev, canScrollPrev } = useCarousel();
     return /* @__PURE__ */ jsxs(
-      Button,
+      Button$1,
       {
         ref,
         variant,
@@ -2950,7 +4545,7 @@ const CarouselNext = React.forwardRef(
   ({ className, variant = "general-secondary", size = "icon", ...props }, ref) => {
     const { orientation, scrollNext, canScrollNext } = useCarousel();
     return /* @__PURE__ */ jsxs(
-      Button,
+      Button$1,
       {
         ref,
         variant,
@@ -2975,113 +4570,6 @@ CarouselNext.displayName = "CarouselNext";
 const Collapsible = CollapsiblePrimitive.Root;
 const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
-const Command = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  Command$1,
-  {
-    ref,
-    className: cn("flex h-full w-full flex-col overflow-hidden", className),
-    ...props
-  }
-));
-Command.displayName = Command$1.displayName;
-const CommandDialog = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx(Dialog, { ...props, children: /* @__PURE__ */ jsx(DialogContent, { className: "overflow-hidden p-0 shadow-lg", children: /* @__PURE__ */ jsx(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) }) });
-};
-const CommandInput = React.forwardRef(({ className, icon: Icon = Search, ...props }, ref) => /* @__PURE__ */ jsxs(
-  "div",
-  {
-    className: cn(
-      "group relative flex h-14 w-full  sm:min-w-[344px] items-center gap-4 rounded-lg border border-gray-200 bg-white p-4  focus:ring-0 focus:outline-none",
-      className
-    ),
-    "cmdk-input-wrapper": "",
-    children: [
-      /* @__PURE__ */ jsx(Icon, { className: " h-4 w-4 shrink-0 group-focus-within:-translate-x-4 group-focus-within:opacity-0 ease-in-out duration-200" }),
-      /* @__PURE__ */ jsx(
-        Command$1.Input,
-        {
-          ref,
-          className: cn(
-            "text-base w-full ring-0 outline-none group-focus-within:-translate-x-8 ease-in-out duration-200",
-            className
-          ),
-          ...props
-        }
-      )
-    ]
-  }
-));
-CommandInput.displayName = Command$1.Input.displayName;
-const CommandList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  Command$1.List,
-  {
-    ref,
-    className: cn(
-      "max-h-[300px] overflow-y-auto overflow-x-hidden bg-gray-700  rounded-b-lg",
-      className
-    ),
-    ...props
-  }
-));
-CommandList.displayName = Command$1.List.displayName;
-const CommandEmpty = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
-  Command$1.Empty,
-  {
-    ref,
-    className: "py-6 text-center text-sm",
-    ...props
-  }
-));
-CommandEmpty.displayName = Command$1.Empty.displayName;
-const CommandGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  Command$1.Group,
-  {
-    ref,
-    className: cn(
-      "group overflow-hidden [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground ",
-      className
-    ),
-    ...props
-  }
-));
-CommandGroup.displayName = Command$1.Group.displayName;
-const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  Command$1.Separator,
-  {
-    ref,
-    className: cn("-mx-1 h-px bg-border", className),
-    ...props
-  }
-));
-CommandSeparator.displayName = Command$1.Separator.displayName;
-const CommandItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  Command$1.Item,
-  {
-    ref,
-    className: cn(
-      "relative flex w-full items-center gap-2 cursor-default select-none p-4 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-gray-700 hover:bg-[rgba(0,0,0,0.2)] text-gray-200",
-      className
-    ),
-    ...props
-  }
-));
-CommandItem.displayName = Command$1.Item.displayName;
-const CommandShortcut = ({
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      ),
-      ...props
-    }
-  );
-};
-CommandShortcut.displayName = "CommandShortcut";
 const ToastProvider = ToastPrimitives.Provider;
 const ToastViewport = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ToastPrimitives.Viewport,
@@ -3525,6 +5013,292 @@ function getPayloadConfigFromPayload(config, payload, key) {
   }
   return configLabelKey in config ? config[configLabelKey] : config[key];
 }
+const defaultCertifications = [
+  { name: "Platinum", locations: 1, color: "#A8A7AE", icon: "platinum" },
+  { name: "Gold", locations: 1, color: "#D7C686", icon: "gold" },
+  { name: "Silver", locations: 1, color: "#C0C2C4", icon: "silver" },
+  { name: "Bronze", locations: 1, color: "#D1A778", icon: "bronze" },
+  {
+    name: "Precertified",
+    locations: 1,
+    color: "#44B0BC",
+    icon: "precertified"
+  }
+];
+const defaultRatings = [
+  {
+    name: "Health-Safety",
+    locations: 1,
+    color: "#7FB3DC",
+    percentage: 50,
+    icon: "health"
+  },
+  {
+    name: "Equity",
+    locations: 1,
+    color: "#41937D",
+    percentage: 67,
+    icon: "equity"
+  },
+  {
+    name: "Performance",
+    locations: "Not Pursued",
+    color: "#0B667F",
+    percentage: 2,
+    icon: "performance",
+    inactive: true
+  },
+  {
+    name: "Coworking",
+    locations: "Not Pursued",
+    color: "#AD7DA3",
+    percentage: 2,
+    icon: "coworking",
+    inactive: true
+  }
+];
+const WELLDashboard = React.forwardRef(
+  ({
+    certifiedPercentage = 60,
+    certifications = defaultCertifications,
+    ratings = defaultRatings,
+    className
+  }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-4", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 rounded-md border border-[#DEDEE5] bg-white/0 p-4 shadow-xs", children: [
+          /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: "text-xl font-medium text-[#3D3E46] text-center mb-6",
+              style: { fontFamily: "'DM Sans', sans-serif" },
+              children: "WELL Certified Locations"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row justify-center items-center gap-10", children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative w-60 h-60 shrink-0", children: [
+              /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  width: "240",
+                  height: "240",
+                  viewBox: "0 0 240 240",
+                  className: "transform -rotate-90",
+                  children: [
+                    /* @__PURE__ */ jsx("circle", { cx: "120", cy: "120", r: "120", fill: "#F5F9FB" }),
+                    /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        cx: "120",
+                        cy: "120",
+                        r: "100",
+                        fill: "none",
+                        stroke: "#327DB9",
+                        strokeWidth: "20",
+                        strokeDasharray: `${certifiedPercentage / 100 * 628} 628`,
+                        strokeLinecap: "round"
+                      }
+                    ),
+                    certifications.map((cert, index) => {
+                      const totalSegments = certifications.length;
+                      const segmentAngle = certifiedPercentage / 100 * 360 / totalSegments;
+                      const startAngle = index * segmentAngle;
+                      const arcLength = segmentAngle * Math.PI * 100 / 180;
+                      const offset = startAngle * Math.PI * 100 / 180;
+                      return /* @__PURE__ */ jsx(
+                        "circle",
+                        {
+                          cx: "120",
+                          cy: "120",
+                          r: "100",
+                          fill: "none",
+                          stroke: cert.color,
+                          strokeWidth: "20",
+                          strokeDasharray: `${arcLength} 628`,
+                          strokeDashoffset: -offset,
+                          opacity: "0.7"
+                        },
+                        cert.name
+                      );
+                    }),
+                    /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        cx: "120",
+                        cy: "120",
+                        r: "80",
+                        fill: "white",
+                        filter: "drop-shadow(0 0 16px rgba(0,0,0,0.04))"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "text-5xl font-medium text-[#327DB9]",
+                    style: { fontFamily: "'DM Sans', sans-serif" },
+                    children: [
+                      certifiedPercentage,
+                      "%"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "text-sm font-medium text-[#78777F] mt-1",
+                    style: { fontFamily: "'DM Sans', sans-serif" },
+                    children: "Certified"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 min-w-[160px]", children: certifications.map((cert) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "w-10 h-10 rounded-full shrink-0 flex items-center justify-center",
+                  style: { backgroundColor: cert.color },
+                  children: cert.icon === "precertified" && /* @__PURE__ */ jsx("div", { className: "w-9 h-6 bg-[#44B0BC] rounded-sm flex items-center justify-center text-white text-[10px] font-bold", children: "WELL" })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1", children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "text-base font-medium text-[#3D3E46]",
+                    style: { fontFamily: "'DM Sans', sans-serif" },
+                    children: cert.name
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsx(
+                    Building2,
+                    {
+                      size: 16,
+                      className: "text-[#327DB9]",
+                      strokeWidth: 1.2
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: "text-xs font-medium text-[#327DB9]",
+                      style: { fontFamily: "'DM Sans', sans-serif" },
+                      children: [
+                        cert.locations,
+                        " Location",
+                        cert.locations !== 1 ? "s" : ""
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            ] }, cert.name)) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 rounded-md border border-[#DEDEE5] bg-white/0 p-4 shadow-xs", children: [
+          /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: "text-xl font-medium text-[#3D3E46] text-center mb-6",
+              style: { fontFamily: "'DM Sans', sans-serif" },
+              children: "WELL Rated Locations"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row justify-center items-center gap-10", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-4 h-60 px-4", children: [
+              ratings.map((rating) => /* @__PURE__ */ jsxs("div", { className: "w-10 h-60 relative", children: [
+                /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-t border border-[#DEDEE5] bg-[#F5F9FB]" }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "absolute bottom-0 left-0 right-0 rounded-t transition-all",
+                    style: {
+                      backgroundColor: rating.color,
+                      height: `${rating.percentage}%`
+                    }
+                  }
+                )
+              ] }, rating.name)),
+              /* @__PURE__ */ jsx("div", { className: "w-px h-60 bg-[#DEDEE5]" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 min-w-[160px]", children: ratings.map((rating) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex items-center gap-2",
+                  rating.inactive && "opacity-50"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "w-10 h-10 rounded-full shrink-0 flex items-center justify-center",
+                      style: { backgroundColor: rating.color }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1", children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "text-base font-medium text-[#3D3E46]",
+                        style: { fontFamily: "'DM Sans', sans-serif" },
+                        children: rating.name
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                      /* @__PURE__ */ jsx(
+                        Building2,
+                        {
+                          size: 16,
+                          className: rating.inactive ? "text-[#78777F]" : "text-[#327DB9]",
+                          strokeWidth: 1.2
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "text-xs font-medium",
+                            rating.inactive ? "text-[#78777F]" : "text-[#327DB9]"
+                          ),
+                          style: { fontFamily: "'DM Sans', sans-serif" },
+                          children: typeof rating.locations === "number" ? `${rating.locations} Location${rating.locations !== 1 ? "s" : ""}` : rating.locations
+                        }
+                      )
+                    ] })
+                  ] })
+                ]
+              },
+              rating.name
+            )) })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "p",
+        {
+          className: "text-[10px] leading-3 font-medium text-[#78777F] text-center",
+          style: { fontFamily: "'DM Sans', sans-serif" },
+          children: [
+            "Achievement metrics reflect all active program achievements, as of",
+            " ",
+            (/* @__PURE__ */ new Date()).toLocaleDateString("en-US", {
+              month: "long",
+              day: "numeric",
+              year: "numeric"
+            })
+          ]
+        }
+      )
+    ] });
+  }
+);
+WELLDashboard.displayName = "WELLDashboard";
 const Toaster = ({ ...props }) => {
   const { theme = "system" } = useTheme();
   return /* @__PURE__ */ jsx(
@@ -3572,7 +5346,7 @@ export {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-  Button,
+  Button$1 as Button,
   Calendar,
   Card,
   CardContent,
@@ -3624,6 +5398,8 @@ export {
   DialogDescription,
   DialogFooter,
   DialogHeader,
+  DialogOverlay,
+  DialogPortal,
   DialogTitle,
   DialogTrigger,
   Drawer,
@@ -3679,6 +5455,7 @@ export {
   MenubarSubContent,
   MenubarSubTrigger,
   MenubarTrigger,
+  Navigation,
   NavigationMenu,
   NavigationMenuContent,
   NavigationMenuItem,
@@ -3703,6 +5480,7 @@ export {
   ResizablePanelGroup,
   ScrollArea,
   ScrollBar,
+  SearchField,
   Select,
   SelectContent,
   SelectGroup,
@@ -3738,6 +5516,7 @@ export {
   Skeleton,
   Slider,
   Toaster as Sonner,
+  StrategyTable,
   Switch,
   Table,
   TableBody,
@@ -3751,6 +5530,7 @@ export {
   TabsContent,
   TabsList,
   TabsTrigger,
+  Tag,
   Textarea,
   Toast,
   ToastAction,
@@ -3767,8 +5547,14 @@ export {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
+  WELLDashboard,
   badgeVariants,
-  buttonVariants,
+  buttonVariants$1 as buttonVariants,
+  cn,
+  conceptColors,
   navigationMenuTriggerStyle,
+  useIsMobile,
+  useSegmentedControl,
+  useTabs,
   useToast
 };