@syscore/ui-library 1.1.11 → 1.1.13

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, Building2 } from "lucide-react";
+import { ChevronDown, GripVertical, X, PanelLeft, Check, Circle, Dot, ChevronLeft, ChevronRight, 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";
@@ -87,7 +87,7 @@ const Card = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   {
     ref,
     className: cn(
-      "rounded-lg border border-gray-100 bg-cyan-50  shadow-xs p-6 space-y-6",
+      "rounded-lg border border-gray-100 bg-cyan-50 p-6 space-y-6",
       className
     ),
     ...props
@@ -304,6 +304,8 @@ const buttonVariants = cva(
     variants: {
       variant: {
         // CTA variants
+        clear: "bg-none border-none",
+        default: "bg-white border border-gray-gray-100",
         "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",
@@ -319,7 +321,7 @@ const buttonVariants = cva(
         xlarge: "h-16 px-10",
         large: "h-12 px-8",
         utility: "h-8 px-4",
-        icon: "size-[32px]"
+        icon: "size-8"
       }
     },
     compoundVariants: [
@@ -337,43 +339,83 @@ const buttonVariants = cva(
       },
       {
         size: "icon",
-        className: "p-0 bg-white border border-gray-100 "
+        className: "p-0 bg-white border border-gray-100 hover:border-gray-200 hover:scale-[1.02] transition-all duration-200"
       }
     ],
     defaultVariants: {
-      variant: "primary-dark",
+      variant: "default",
       size: "large"
     }
   }
 );
+const sizeTextClasses = {
+  xlarge: "body-large",
+  large: "body-base",
+  utility: "body-small",
+  icon: ""
+};
 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" : "";
+    const textClass = sizeTextClasses[size || "large"];
     return /* @__PURE__ */ jsx(
       "button",
       {
-        className: cn(buttonVariants({ variant, size }), className),
+        className: cn(
+          buttonVariants({ variant, size }),
+          "cursor-pointer",
+          className
+        ),
         style,
         ref,
         ...props,
-        children: size === "icon" ? children : /* @__PURE__ */ jsx("span", { className: cn("relative z-10", bodyClass), children })
+        children: size === "icon" ? children : /* @__PURE__ */ jsx("span", { className: cn("relative z-10 font-semibold ", textClass), children })
       }
     );
   }
 );
 Button.displayName = "Button";
 const Input = React.forwardRef(
-  ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "input",
+  ({ className, type, startIcon, endIcon, ...props }, ref) => {
+    const isReadOnly = props.readOnly;
+    const isDisabled = props.disabled;
+    return /* @__PURE__ */ jsxs(
+      "div",
       {
-        type,
         className: cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          // Base wrapper styles (visual input)
+          "flex h-12 w-full items-center rounded-[6px] border border-gray-200 bg-white px-4 transition-shadow",
+          // Typography inheritance
+          "body-base font-medium font-mazzard text-gray-800",
+          // Focus states (focus-within matches input focus)
+          "focus-within:border-cyan-300",
+          // Disabled states
+          isDisabled && "opacity-50 cursor-not-allowed",
+          // Read-only states
+          isReadOnly && "bg-gray-50 border-blue-200 text-gray-600 focus-within:border-blue-200 cursor-default",
           className
         ),
-        ref,
-        ...props
+        children: [
+          startIcon ? /* @__PURE__ */ jsx("div", { className: "mr-3 flex items-center text-muted-foreground", children: startIcon }) : null,
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type,
+              className: cn(
+                // Reset styles to be transparent inside wrapper
+                "flex-1 w-full bg-transparent outline-none placeholder:text-gray-500",
+                // File input specific overrides
+                type === "file" && "p-0 italic text-muted-foreground/70 file:me-3 file:h-full file:border-0 file:border-r file:border-solid file:border-gray-200 file:bg-transparent file:px-3 file:text-base file:font-medium file:not-italic file:text-gray-800",
+                // Search input specific overrides
+                type === "search" && "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none"
+              ),
+              ref,
+              disabled: isDisabled,
+              readOnly: isReadOnly,
+              ...props
+            }
+          ),
+          endIcon ? /* @__PURE__ */ jsx("div", { className: "ml-3 flex items-center text-muted-foreground", children: endIcon }) : null
+        ]
       }
     );
   }
@@ -488,6 +530,14 @@ function Skeleton({
     }
   );
 }
+const TooltipContext = React.createContext({
+  trigger: "hover",
+  toggle: () => {
+  },
+  close: () => {
+  },
+  triggerRef: { current: null }
+});
 function TooltipProvider({
   delayDuration = 0,
   ...props
@@ -502,14 +552,73 @@ function TooltipProvider({
   );
 }
 function Tooltip({
+  trigger = "hover",
+  open: controlledOpen,
+  onOpenChange,
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+  const triggerRef = React.useRef(null);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+  const handleOpenChange = React.useCallback(
+    (newOpen) => {
+      if (trigger === "click") return;
+      if (!isControlled) {
+        setUncontrolledOpen(newOpen);
+      }
+      onOpenChange == null ? void 0 : onOpenChange(newOpen);
+    },
+    [isControlled, onOpenChange, trigger]
+  );
+  const close = React.useCallback(() => {
+    if (!isControlled) {
+      setUncontrolledOpen(false);
+    }
+    onOpenChange == null ? void 0 : onOpenChange(false);
+  }, [isControlled, onOpenChange]);
+  const toggle = React.useCallback(() => {
+    const newOpen = !isOpen;
+    if (!isControlled) {
+      setUncontrolledOpen(newOpen);
+    }
+    onOpenChange == null ? void 0 : onOpenChange(newOpen);
+  }, [isOpen, isControlled, onOpenChange]);
+  const tooltipProps = trigger === "click" ? {
+    open: isOpen,
+    onOpenChange: handleOpenChange
+  } : {
+    open: isControlled ? controlledOpen : void 0,
+    onOpenChange
+  };
+  return /* @__PURE__ */ jsx(TooltipContext.Provider, { value: { trigger, toggle, close, triggerRef }, children: /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: trigger === "click" ? 1e5 : 0, children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...tooltipProps, ...props, children }) }) });
 }
 function TooltipTrigger({
+  onClick,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+  const { trigger, toggle, triggerRef } = React.useContext(TooltipContext);
+  const handleClick = React.useCallback(
+    (e) => {
+      if (trigger === "click") {
+        e.preventDefault();
+        e.stopPropagation();
+        toggle();
+      }
+      onClick == null ? void 0 : onClick(e);
+    },
+    [trigger, toggle, onClick]
+  );
+  return /* @__PURE__ */ jsx(
+    TooltipPrimitive.Trigger,
+    {
+      ref: triggerRef,
+      "data-slot": "tooltip-trigger",
+      onClick: handleClick,
+      ...props
+    }
+  );
 }
 function TooltipContent({
   className,
@@ -519,20 +628,41 @@ function TooltipContent({
   alignOffset = 0,
   ...props
 }) {
+  const { trigger, close, triggerRef } = React.useContext(TooltipContext);
+  const contentRef = React.useRef(null);
+  React.useEffect(() => {
+    if (trigger !== "click") return;
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      const isOutsideContent = contentRef.current && !contentRef.current.contains(target);
+      const isOutsideTrigger = triggerRef.current && !triggerRef.current.contains(target);
+      if (isOutsideContent && isOutsideTrigger) {
+        close();
+      }
+    };
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("click", handleClickOutside);
+    }, 0);
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [trigger, close, triggerRef]);
   return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
     TooltipPrimitive.Content,
     {
+      ref: contentRef,
       "data-slot": "tooltip-content",
       sideOffset,
       alignOffset,
       side,
       className: cn(
-        "group relative bg-gray-700 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-lg px-6 pt-8 pb-6  text-balance shadow-sm",
+        "group relative bg-gray-700 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-lg p-6 pt-8  shadow-sm mt-3",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "absolute  left-1/2 -translate-x-1/2 flex justify-center group-data-[side=top]:bottom-0 group-data-[side=top]:rotate-180 group-data-[side=bottom]:top-0 group-data-[side=left]:right-0 group-data-[side=right]:left-0", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "absolute  left-1/2 -translate-x-1/2 flex justify-center group-data-[side=top]:bottom-0 group-data-[side=top]:rotate-180 group-data-[side=bottom]:top-0 group-data-[side=left]:right-0 group-data-[side=right]:left-0 ", children: /* @__PURE__ */ jsx(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -1122,7 +1252,7 @@ const SidebarMenuSubButton = React.forwardRef(({ asChild = false, size = "md", i
 });
 SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
 const labelVariants = cva(
-  "overline-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-gray-600 px-2"
 );
 const Label = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   LabelPrimitive.Root,
@@ -1130,7 +1260,7 @@ const Label = React.forwardRef(({ className, children, ...props }, ref) => /* @_
     ref,
     className: cn(labelVariants(), className),
     ...props,
-    children
+    children: /* @__PURE__ */ jsx("span", { className: "overline-medium", children })
   }
 ));
 Label.displayName = LabelPrimitive.Root.displayName;
@@ -1140,7 +1270,7 @@ const Textarea = React.forwardRef(
       "textarea",
       {
         className: cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[80px] w-full rounded-[6px] border border-gray-200 bg-white p-4 body-base font-medium text-gray-800 placeholder:font-normal placeholder:text-gray-500 focus:border-cyan-300 focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:border-blue-200 disabled:bg-transparent ring-0",
           className
         ),
         ref,
@@ -1269,22 +1399,56 @@ const InputOTPSlot = React.forwardRef(({ index, className, ...props }, ref) => {
 InputOTPSlot.displayName = "InputOTPSlot";
 const InputOTPSeparator = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx(Dot, {}) }));
 InputOTPSeparator.displayName = "InputOTPSeparator";
+const UtilityChevronDown = ({
+  className
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "size-4 flex items-center justify-center text-gray-500",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "12",
+          height: "6",
+          viewBox: "0 0 12 6",
+          fill: "none",
+          className: cn("text-inherit"),
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M11 0.75L6 5.25L1 0.75",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        }
+      )
+    }
+  );
+};
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
-const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Trigger,
   {
     ref,
     className: cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "group flex h-12 w-full rounded-[6px] border border-gray-200 bg-white p-4  text-gray-800 ring-offset-background placeholder:font-normal placeholder:text-gray-500 focus:outline-none focus:ring-0 data-[state=open]:border-cyan-300 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     ),
     ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
-    ]
+    children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
+      /* @__PURE__ */ jsx("span", { className: " text-gray-800 font-mazzard body-base font-medium", children }),
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(UtilityChevronDown, { className: " text-gray-600 group-data-[state=open]:rotate-180 transition-transform duration-200" }) })
+    ] })
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
@@ -1297,7 +1461,7 @@ const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) =>
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ jsx(UtilityChevronDown, {})
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
@@ -1310,7 +1474,7 @@ const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) =
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ jsx(UtilityChevronDown, {})
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
@@ -1319,8 +1483,7 @@ const SelectContent = React.forwardRef(({ className, children, position = "poppe
   {
     ref,
     className: cn(
-      "relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      "relative z-50 max-h-96 min-w-32 overflow-hidden border-cyan-300 bg-gray-700 text-gray-200 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:-mt-1 data-[side=bottom]:rounded-t-none data-[side=bottom]:rounded-b-[6px] data-[side=top]:border-b-0 data-[side=top]:rounded-t-[6px] data-[side=top]:rounded-b-none data-[side=top]:-mb-1 data-[side=top]:border-t data-[side=bottom]:border-b",
       className
     ),
     position,
@@ -1331,7 +1494,7 @@ const SelectContent = React.forwardRef(({ className, children, position = "poppe
         SelectPrimitive.Viewport,
         {
           className: cn(
-            "p-1",
+            "",
             position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
           ),
           children
@@ -1346,24 +1509,24 @@ const SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   SelectPrimitive.Label,
   {
     ref,
-    className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
+    className: cn(
+      "py-1.5 pl-8 pr-2 text-sm font-semibold font-mazzard",
+      className
+    ),
     ...props
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Item,
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+      "relative flex h-12 w-full cursor-default select-none items-center border-x border-cyan-300 px-4 outline-none  focus:bg-[rgba(0,0,0,0.2)] 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(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
-    ]
+    children: /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
@@ -1469,6 +1632,56 @@ const FormMessage = React.forwardRef(({ className, children, ...props }, ref) =>
   );
 });
 FormMessage.displayName = "FormMessage";
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "bg-gray-100 text-gray-600 hover:bg-gray-200"
+      },
+      size: {
+        default: "h-8 px-4"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+const ToggleGroupContext = React.createContext({
+  size: "default",
+  variant: "default"
+});
+const ToggleGroup = React.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToggleGroupPrimitive.Root,
+  {
+    ref,
+    className: cn("flex items-center justify-center gap-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+  }
+));
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+const ToggleGroupItem = React.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 function useSegmentedControl({
   value,
   defaultValue,
@@ -1497,7 +1710,7 @@ function useSegmentedControl({
     onValueChange: handleValueChange
   };
 }
-const toggleVariants = cva(
+cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground 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=on]:bg-accent data-[state=on]:text-accent-foreground",
   {
     variants: {
@@ -1525,13 +1738,13 @@ const SegmentedControlInner = React.forwardRef(
       defaultValue: defaultValue ?? ((_a = options[0]) == null ? void 0 : _a.value),
       onValueChange
     });
-    return /* @__PURE__ */ jsx("div", { ref, className: cn(className), ...props, children: options.map((option) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("inline-flex", className), ...props, children: options.map((option) => {
       const isReactElement = React.isValidElement(option.label);
       return /* @__PURE__ */ jsx(
         "button",
         {
           className: cn(
-            "inline-flex items-center justify-center h-8 px-6  rounded-full transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+            "inline-flex items-center justify-center h-8 px-4 rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer",
             selectedValue === option.value ? "bg-cyan-700 text-white font-semibold" : "text-gray-600 hover:bg-gray-50 font-medium"
           ),
           onClick: () => handleValueChange(option.value),
@@ -1547,39 +1760,6 @@ const SegmentedControlInner = React.forwardRef(
 SegmentedControlInner.displayName = "SegmentedControl";
 const SegmentedControl = SegmentedControlInner;
 const Toggle = SegmentedControl;
-const ToggleGroupContext = React.createContext({
-  size: "default",
-  variant: "default"
-});
-const ToggleGroup = React.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx(
-  ToggleGroupPrimitive.Root,
-  {
-    ref,
-    className: cn("flex items-center justify-center gap-1", className),
-    ...props,
-    children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
-  }
-));
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-const ToggleGroupItem = React.forwardRef(({ className, children, variant, size, ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ jsx(
-    ToggleGroupPrimitive.Item,
-    {
-      ref,
-      className: cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size
-        }),
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-});
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 const badgeVariants = cva(
   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
@@ -1814,7 +1994,10 @@ const BreadcrumbPage = React.forwardRef(({ className, ...props }, ref) => /* @__
     role: "link",
     "aria-disabled": "true",
     "aria-current": "page",
-    className: cn("font-normal text-foreground", className),
+    className: cn(
+      "body-small font-medium text-gray-600 text-center whitespace-nowrap",
+      className
+    ),
     ...props
   }
 ));
@@ -1828,9 +2011,31 @@ const BreadcrumbSeparator = ({
   {
     role: "presentation",
     "aria-hidden": "true",
-    className: cn("[&>svg]:size-3.5", className),
+    className: cn(
+      "size-4 flex items-center justify-center shrink-0",
+      className
+    ),
     ...props,
-    children: children ?? /* @__PURE__ */ jsx(ChevronRight, {})
+    children: children ?? /* @__PURE__ */ jsx(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "5",
+        height: "8",
+        viewBox: "0 0 5 8",
+        fill: "none",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M0.75 6.75L3.75 3.75L0.75 0.75",
+            stroke: "#CBCDD2",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      }
+    )
   }
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
@@ -1907,103 +2112,1557 @@ 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,
-  {
-    "aria-label": "Go to previous page",
-    size: "utility",
-    className: cn("gap-1 pl-2.5", className),
-    ...props,
-    children: [
+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: "currentColor"
+          }
+        ),
+        /* @__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: "currentColor"
+          }
+        ),
+        /* @__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: "currentColor"
+          }
+        ),
+        /* @__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: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+};
+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 Navigation = ({
+  navItems,
+  isStrategy = false,
+  Link: LinkComponent,
+  onLinkClick,
+  onClose
+}) => {
+  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 NavLink = ({ href, className, "aria-label": ariaLabel, children }) => {
+    if (LinkComponent) {
+      return /* @__PURE__ */ jsx(LinkComponent, { href, className, "aria-label": ariaLabel, children });
+    }
+    if (onLinkClick) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          href,
+          className,
+          "aria-label": ariaLabel,
+          onClick: (e) => {
+            e.preventDefault();
+            onLinkClick(href);
+          },
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("a", { href, className, "aria-label": ariaLabel, 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",
+                onClick: (e) => {
+                  e.preventDefault();
+                  if (onClose) {
+                    onClose();
+                  } else if (onLinkClick) {
+                    onLinkClick("/");
+                  }
+                },
+                children: /* @__PURE__ */ jsx(UtilityClose, { className: "text-gray-700 group-hover:text-white" })
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              NavLink,
+              {
+                href: "/",
+                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 ? 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 })
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("div", { className: "flex h-full sm:min-w-[200px] items-center justify-end gap-4", children: /* @__PURE__ */ jsx(
+            NavLink,
+            {
+              href: "/",
+              "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(
+                            NavLink,
+                            {
+                              href: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Explore WELL"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            NavLink,
+                            {
+                              href: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Enroll in WELL"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            NavLink,
+                            {
+                              href: "/",
+                              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(
+                            NavLink,
+                            {
+                              href: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Performance"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            NavLink,
+                            {
+                              href: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "ROI"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            NavLink,
+                            {
+                              href: "/",
+                              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(
+                            NavLink,
+                            {
+                              href: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Strategies"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            NavLink,
+                            {
+                              href: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Themes"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            NavLink,
+                            {
+                              href: "/",
+                              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(
+                            NavLink,
+                            {
+                              href: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Organizations"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            NavLink,
+                            {
+                              href: "/",
+                              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(
+                            NavLink,
+                            {
+                              href: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Products"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            NavLink,
+                            {
+                              href: "/",
+                              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(
+                            NavLink,
+                            {
+                              href: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Locations"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            NavLink,
+                            {
+                              href: "/",
+                              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(
+                            NavLink,
+                            {
+                              href: "/",
+                              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(NavLink, { href: "/", 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(NavLink, { href: "/", 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(
+                            NavLink,
+                            {
+                              href: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "WELL Certification"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                            NavLink,
+                            {
+                              href: "/",
+                              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(
+                            NavLink,
+                            {
+                              href: "/",
+                              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(
+                              NavLink,
+                              {
+                                href: "/",
+                                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(
+                              NavLink,
+                              {
+                                href: "/",
+                                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(
+                              NavLink,
+                              {
+                                href: "/",
+                                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(
+                            NavLink,
+                            {
+                              href: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Membership"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            NavLink,
+                            {
+                              href: "/",
+                              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(
+                              NavLink,
+                              {
+                                href: "/",
+                                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(
+                              NavLink,
+                              {
+                                href: "/",
+                                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(
+                              NavLink,
+                              {
+                                href: "/",
+                                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(
+                            NavLink,
+                            {
+                              href: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "WELL AP"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            NavLink,
+                            {
+                              href: "/",
+                              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(
+                            NavLink,
+                            {
+                              href: "/",
+                              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(
+                              NavLink,
+                              {
+                                href: "/",
+                                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(
+                              NavLink,
+                              {
+                                href: "/",
+                                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(
+                              NavLink,
+                              {
+                                href: "/",
+                                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(
+                            NavLink,
+                            {
+                              href: "/",
+                              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(
+                              NavLink,
+                              {
+                                href: "/",
+                                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(
+                              NavLink,
+                              {
+                                href: "/",
+                                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(
+                              NavLink,
+                              {
+                                href: "/",
+                                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(
+                            NavLink,
+                            {
+                              href: "/",
+                              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(
+                              NavLink,
+                              {
+                                href: "/",
+                                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(
+                              NavLink,
+                              {
+                                href: "/",
+                                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(
+                              NavLink,
+                              {
+                                href: "/",
+                                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(
+                            NavLink,
+                            {
+                              href: "/",
+                              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(
+                              NavLink,
+                              {
+                                href: "/",
+                                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(
+                              NavLink,
+                              {
+                                href: "/",
+                                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(
+                              NavLink,
+                              {
+                                href: "/",
+                                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(
+                            NavLink,
+                            {
+                              href: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "IWBI"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            NavLink,
+                            {
+                              href: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Research"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            NavLink,
+                            {
+                              href: "/",
+                              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(
+                            NavLink,
+                            {
+                              href: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Team"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            NavLink,
+                            {
+                              href: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Advisories"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            NavLink,
+                            {
+                              href: "/",
+                              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(
+                            NavLink,
+                            {
+                              href: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Newsroom"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            NavLink,
+                            {
+                              href: "/",
+                              className: "body-base block font-medium text-gray-100 hover:text-white",
+                              children: "Jobs"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                            NavLink,
+                            {
+                              href: "/",
+                              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-1/2 left-1/2 z-50 grid  -translate-x-1/2 -translate-y-1/2 border-12 border-[rgba(255,255,255,0.20)]  duration-200 ",
+          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 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-sm 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-sm w-fit cursor-pointer",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          "transition-all duration-200",
+          active ? "bg-cyan-700  text-white hover:border-cyan-700" : "bg-blue-100 text-blue-700 hover:bg-cyan-700 hover:text-white",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx("span", { className: "body-small font-semibold", 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({
+        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" })
     ]
@@ -2320,225 +3979,105 @@ const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) =
     className: cn(
       "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
-    ),
-    ...props
-  }
-));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn(
-      "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    ),
-    ...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({
+    ),
+    ...props
+  }
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...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(
-    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
@@ -2975,113 +4514,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,
@@ -3530,67 +4962,142 @@ const defaultCertifications = [
   { 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" }
+  {
+    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 }
+  {
+    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) => {
+  ({
+    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__ */ 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",
+              /* @__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",
                   {
-                    cx: "120",
-                    cy: "120",
-                    r: "100",
-                    fill: "none",
-                    stroke: "#327DB9",
-                    strokeWidth: "20",
-                    strokeDasharray: `${certifiedPercentage / 100 * 628} 628`,
-                    strokeLinecap: "round"
+                    className: "text-5xl font-medium text-[#327DB9]",
+                    style: { fontFamily: "'DM Sans', sans-serif" },
+                    children: [
+                      certifiedPercentage,
+                      "%"
+                    ]
                   }
                 ),
-                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: "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: [
@@ -3603,21 +5110,49 @@ const WELLDashboard = React.forwardRef(
                 }
               ),
               /* @__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__ */ 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" : ""
-                  ] })
+                  /* @__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__ */ 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: [
@@ -3638,7 +5173,10 @@ const WELLDashboard = React.forwardRef(
             /* @__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"),
+                className: cn(
+                  "flex items-center gap-2",
+                  rating.inactive && "opacity-50"
+                ),
                 children: [
                   /* @__PURE__ */ jsx(
                     "div",
@@ -3648,7 +5186,14 @@ const WELLDashboard = React.forwardRef(
                     }
                   ),
                   /* @__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__ */ 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,
@@ -3678,10 +5223,22 @@ const WELLDashboard = React.forwardRef(
           ] })
         ] })
       ] }),
-      /* @__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" })
-      ] })
+      /* @__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"
+            })
+          ]
+        }
+      )
     ] });
   }
 );
@@ -3785,6 +5342,8 @@ export {
   DialogDescription,
   DialogFooter,
   DialogHeader,
+  DialogOverlay,
+  DialogPortal,
   DialogTitle,
   DialogTrigger,
   Drawer,
@@ -3840,6 +5399,7 @@ export {
   MenubarSubContent,
   MenubarSubTrigger,
   MenubarTrigger,
+  Navigation,
   NavigationMenu,
   NavigationMenuContent,
   NavigationMenuItem,
@@ -3864,6 +5424,7 @@ export {
   ResizablePanelGroup,
   ScrollArea,
   ScrollBar,
+  SearchField,
   Select,
   SelectContent,
   SelectGroup,
@@ -3912,6 +5473,7 @@ export {
   TabsContent,
   TabsList,
   TabsTrigger,
+  Tag,
   Textarea,
   Toast,
   ToastAction,
@@ -3931,6 +5493,10 @@ export {
   WELLDashboard,
   badgeVariants,
   buttonVariants,
+  cn,
   navigationMenuTriggerStyle,
+  useIsMobile,
+  useSegmentedControl,
+  useTabs,
   useToast
 };