@syscore/ui-library 1.1.13 → 1.2.0

package/dist/ui/index.es.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React 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, ChevronLeft, ChevronRight, XIcon, Search, MoreHorizontal, ArrowLeft, ArrowRight, Building2 } from "lucide-react";
+import { ChevronDown, GripVertical, X, PanelLeft, Check, Circle, Dot, ChevronLeft, ChevronRight, XIcon, Search, MoreHorizontal, ArrowLeft, ArrowRight } from "lucide-react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
@@ -50,23 +50,20 @@ const AccordionItem = React.forwardRef(({ className, ...props }, ref) => /* @__P
   AccordionPrimitive.Item,
   {
     ref,
-    className: cn("border-b", className),
+    className: cn("accordion-item", className),
     ...props
   }
 ));
 AccordionItem.displayName = "AccordionItem";
-const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "accordion-header", children: /* @__PURE__ */ jsxs(
   AccordionPrimitive.Trigger,
   {
     ref,
-    className: cn(
-      "flex flex-1 items-center justify-between py-4 font-medium transition-all [&[data-state=open]>svg]:rotate-180",
-      className
-    ),
+    className: cn("accordion-trigger", className),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })
+      /* @__PURE__ */ jsx(ChevronDown, { className: "accordion-chevron" })
     ]
   }
 ) }));
@@ -75,9 +72,9 @@ const AccordionContent = React.forwardRef(({ className, children, ...props }, re
   AccordionPrimitive.Content,
   {
     ref,
-    className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+    className: "accordion-content",
     ...props,
-    children: /* @__PURE__ */ jsx("div", { className: cn("pb-4 pt-0", className), children })
+    children: /* @__PURE__ */ jsx("div", { className: cn("accordion-content-inner", className), children })
   }
 ));
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
@@ -86,21 +83,18 @@ const Card = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   "div",
   {
     ref,
-    className: cn(
-      "rounded-lg border border-gray-100 bg-cyan-50 p-6 space-y-6",
-      className
-    ),
+    className: cn("card", className),
     ...props
   }
 ));
 Card.displayName = "Card";
-const CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-6", className), ...props }));
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("card-header", className), ...props }));
 CardHeader.displayName = "CardHeader";
 const CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
-    className: cn("heading-xxsmall text-gray-800", className),
+    className: cn("card-title heading-xxsmall", className),
     ...props
   }
 ));
@@ -109,7 +103,7 @@ const CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @_
   "p",
   {
     ref,
-    className: cn("body-base text-gray-800", className),
+    className: cn("card-description body-base", className),
     ...props
   }
 ));
@@ -118,7 +112,7 @@ const CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   "div",
   {
     ref,
-    className: cn("body-base text-gray-800", className),
+    className: cn("card-content body-base", className),
     ...props
   }
 ));
@@ -127,7 +121,7 @@ const CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE
   "div",
   {
     ref,
-    className: cn("flex items-center body-base text-gray-800", className),
+    className: cn("card-footer body-base", className),
     ...props
   }
 ));
@@ -140,8 +134,8 @@ const Separator = React.forwardRef(
       decorative,
       orientation,
       className: cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        "separator",
+        orientation === "horizontal" ? "separator--horizontal" : "separator--vertical",
         className
       ),
       ...props
@@ -153,10 +147,10 @@ const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) =>
   ScrollAreaPrimitive.Root,
   {
     ref,
-    className: cn("relative overflow-hidden", className),
+    className: cn("scroll-area", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "scroll-area-viewport", children }),
       /* @__PURE__ */ jsx(ScrollBar, {}),
       /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
     ]
@@ -169,32 +163,31 @@ const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...pr
     ref,
     orientation,
     className: cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
-      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-px",
+      "scroll-bar",
+      orientation === "vertical" ? "scroll-bar--vertical" : "scroll-bar--horizontal",
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "scroll-bar-thumb" })
   }
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-const Table = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+const Table = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "table-wrapper", children: /* @__PURE__ */ jsx(
   "table",
   {
     ref,
-    className: cn("w-full caption-bottom text-sm", className),
+    className: cn("table", className),
     ...props
   }
 ) }));
 Table.displayName = "Table";
-const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("table-header", className), ...props }));
 TableHeader.displayName = "TableHeader";
 const TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tbody",
   {
     ref,
-    className: cn("[&_tr:last-child]:border-0", className),
+    className: cn("table-body", className),
     ...props
   }
 ));
@@ -203,10 +196,7 @@ const TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   "tfoot",
   {
     ref,
-    className: cn(
-      "border-t bg-muted/50 font-medium last:[&>tr]:border-b-0",
-      className
-    ),
+    className: cn("table-footer", className),
     ...props
   }
 ));
@@ -215,10 +205,7 @@ const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   "tr",
   {
     ref,
-    className: cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
-    ),
+    className: cn("table-row", className),
     ...props
   }
 ));
@@ -227,10 +214,7 @@ const TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   "th",
   {
     ref,
-    className: cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-      className
-    ),
+    className: cn("table-head", className),
     ...props
   }
 ));
@@ -239,7 +223,7 @@ const TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   "td",
   {
     ref,
-    className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
+    className: cn("table-cell", className),
     ...props
   }
 ));
@@ -248,7 +232,7 @@ const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PU
   "caption",
   {
     ref,
-    className: cn("mt-4 text-sm text-muted-foreground", className),
+    className: cn("table-caption", className),
     ...props
   }
 ));
@@ -259,10 +243,7 @@ const ResizablePanelGroup = ({
 }) => /* @__PURE__ */ jsx(
   ResizablePrimitive.PanelGroup,
   {
-    className: cn(
-      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-      className
-    ),
+    className: cn("resizable-panel-group", className),
     ...props
   }
 );
@@ -274,12 +255,9 @@ const ResizableHandle = ({
 }) => /* @__PURE__ */ jsx(
   ResizablePrimitive.PanelResizeHandle,
   {
-    className: cn(
-      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-      className
-    ),
+    className: cn("resizable-handle", className),
     ...props,
-    children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: /* @__PURE__ */ jsx(GripVertical, { className: "h-2.5 w-2.5" }) })
+    children: withHandle && /* @__PURE__ */ jsx("div", { className: "resizable-handle-grip", children: /* @__PURE__ */ jsx(GripVertical, { className: "icon-2-5" }) })
   }
 );
 const MOBILE_BREAKPOINT = 768;
@@ -299,49 +277,31 @@ function useIsMobile() {
   return !!isMobile;
 }
 const buttonVariants = cva(
-  "group inline-flex items-center justify-center rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
+  "button",
   {
     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",
-        "tertiary-light": "bg-blue-50 border border-blue-200 text-blue-600 hover:bg-blue-100 focus-visible:ring-blue-200",
+        clear: "button--clear",
+        default: "button--default",
+        "primary-gradient": "button--primary-gradient",
+        "primary-dark": "button--primary-dark",
+        "secondary-light": "button--secondary-light",
+        "tertiary-light": "button--tertiary-light",
         // Utility variants
-        "general-primary": "bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-600",
-        "general-secondary": "bg-white border border-blue-200 text-blue-600 hover:bg-blue-50 focus-visible:ring-blue-200",
-        "general-tertiary": "bg-white border border-gray-200 text-gray-600 hover:bg-gray-50 focus-visible:ring-gray-200",
-        "tooltip-primary": "bg-cyan-300 text-white hover:bg-cyan-400 focus-visible:ring-cyan-300",
-        "tooltip-secondary": "bg-gray-500 text-white hover:bg-gray-600 focus-visible:ring-gray-500"
+        "general-primary": "button--general-primary",
+        "general-secondary": "button--general-secondary",
+        "general-tertiary": "button--general-tertiary",
+        "tooltip-primary": "button--tooltip-primary",
+        "tooltip-secondary": "button--tooltip-secondary"
       },
       size: {
-        xlarge: "h-16 px-10",
-        large: "h-12 px-8",
-        utility: "h-8 px-4",
-        icon: "size-8"
+        xlarge: "button--xlarge",
+        large: "button--large",
+        utility: "button--utility",
+        icon: "button--icon"
       }
     },
-    compoundVariants: [
-      {
-        size: "xlarge",
-        className: "font-semibold"
-      },
-      {
-        size: "large",
-        className: "font-semibold"
-      },
-      {
-        size: "utility",
-        className: "font-semibold"
-      },
-      {
-        size: "icon",
-        className: "p-0 bg-white border border-gray-100 hover:border-gray-200 hover:scale-[1.02] transition-all duration-200"
-      }
-    ],
     defaultVariants: {
       variant: "default",
       size: "large"
@@ -355,20 +315,19 @@ const sizeTextClasses = {
   icon: ""
 };
 const Button = React.forwardRef(
-  ({ className, variant, size, children, style, ...props }, ref) => {
+  ({ className, variant: variant2, size, children, style, ...props }, ref) => {
     const textClass = sizeTextClasses[size || "large"];
     return /* @__PURE__ */ jsx(
       "button",
       {
         className: cn(
-          buttonVariants({ variant, size }),
-          "cursor-pointer",
+          buttonVariants({ variant: variant2, size }),
           className
         ),
         style,
         ref,
         ...props,
-        children: size === "icon" ? children : /* @__PURE__ */ jsx("span", { className: cn("relative z-10 font-semibold ", textClass), children })
+        children: size === "icon" ? children : /* @__PURE__ */ jsx("span", { className: cn("button-text", textClass), children })
       }
     );
   }
@@ -382,39 +341,23 @@ const Input = React.forwardRef(
       "div",
       {
         className: cn(
-          // 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",
+          "input-wrapper body-base font-mazzard",
           className
         ),
         children: [
-          startIcon ? /* @__PURE__ */ jsx("div", { className: "mr-3 flex items-center text-muted-foreground", children: startIcon }) : null,
+          startIcon ? /* @__PURE__ */ jsx("div", { className: "input-icon-start", 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"
-              ),
+              className: "input",
               ref,
               disabled: isDisabled,
               readOnly: isReadOnly,
               ...props
             }
           ),
-          endIcon ? /* @__PURE__ */ jsx("div", { className: "ml-3 flex items-center text-muted-foreground", children: endIcon }) : null
+          endIcon ? /* @__PURE__ */ jsx("div", { className: "input-icon-end", children: endIcon }) : null
         ]
       }
     );
@@ -428,24 +371,21 @@ const SheetPortal = SheetPrimitive.Portal;
 const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SheetPrimitive.Overlay,
   {
-    className: cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    ),
+    className: cn("sheet-overlay", className),
     ...props,
     ref
   }
 ));
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "sheet-content",
   {
     variants: {
       side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right: "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+        top: "sheet-content--top",
+        bottom: "sheet-content--bottom",
+        left: "sheet-content--left",
+        right: "sheet-content--right"
       }
     },
     defaultVariants: {
@@ -453,18 +393,18 @@ const sheetVariants = cva(
     }
   }
 );
-const SheetContent = React.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [
+const SheetContent = React.forwardRef(({ side: side2 = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [
   /* @__PURE__ */ jsx(SheetOverlay, {}),
   /* @__PURE__ */ jsxs(
     SheetPrimitive.Content,
     {
       ref,
-      className: cn(sheetVariants({ side }), className),
+      className: cn(sheetVariants({ side: side2 }), className),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
-          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "sheet-close", children: [
+          /* @__PURE__ */ jsx(X, { className: "icon-4" }),
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
         ] })
       ]
@@ -478,10 +418,7 @@ const SheetHeader = ({
 }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    ),
+    className: cn("sheet-header", className),
     ...props
   }
 );
@@ -492,10 +429,7 @@ const SheetFooter = ({
 }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    ),
+    className: cn("sheet-footer", className),
     ...props
   }
 );
@@ -504,7 +438,7 @@ const SheetTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE
   SheetPrimitive.Title,
   {
     ref,
-    className: cn("text-lg font-semibold text-foreground", className),
+    className: cn("sheet-title", className),
     ...props
   }
 ));
@@ -513,7 +447,7 @@ const SheetDescription = React.forwardRef(({ className, ...props }, ref) => /* @
   SheetPrimitive.Description,
   {
     ref,
-    className: cn("text-sm text-muted-foreground", className),
+    className: cn("sheet-description", className),
     ...props
   }
 ));
@@ -525,7 +459,7 @@ function Skeleton({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("animate-pulse rounded-md bg-muted", className),
+      className: cn("skeleton", className),
       ...props
     }
   );
@@ -623,7 +557,7 @@ function TooltipTrigger({
 function TooltipContent({
   className,
   sideOffset = 0,
-  side = "bottom",
+  side: side2 = "bottom",
   children,
   alignOffset = 0,
   ...props
@@ -655,14 +589,11 @@ function TooltipContent({
       "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 p-6 pt-8  shadow-sm mt-3",
-        className
-      ),
+      side: side2,
+      className: cn("tooltip-content", 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: "tooltip-arrow", "data-side": side2, children: /* @__PURE__ */ jsx(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -737,10 +668,10 @@ const SidebarProvider = React.forwardRef(
       window.addEventListener("keydown", handleKeyDown);
       return () => window.removeEventListener("keydown", handleKeyDown);
     }, [toggleSidebar]);
-    const state = open ? "expanded" : "collapsed";
+    const state2 = open ? "expanded" : "collapsed";
     const contextValue = React.useMemo(
       () => ({
-        state,
+        state: state2,
         open,
         setOpen,
         isMobile,
@@ -749,7 +680,7 @@ const SidebarProvider = React.forwardRef(
         toggleSidebar
       }),
       [
-        state,
+        state2,
         open,
         setOpen,
         isMobile,
@@ -767,7 +698,7 @@ const SidebarProvider = React.forwardRef(
           ...style
         },
         className: cn(
-          "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
+          "sidebar-wrapper",
           className
         ),
         ref,
@@ -780,20 +711,20 @@ const SidebarProvider = React.forwardRef(
 SidebarProvider.displayName = "SidebarProvider";
 const Sidebar = React.forwardRef(
   ({
-    side = "left",
-    variant = "sidebar",
-    collapsible = "offcanvas",
+    side: side2 = "left",
+    variant: variant2 = "sidebar",
+    collapsible: collapsible2 = "offcanvas",
     className,
     children,
     ...props
   }, ref) => {
-    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
-    if (collapsible === "none") {
+    const { isMobile, state: state2, openMobile, setOpenMobile } = useSidebar();
+    if (collapsible2 === "none") {
       return /* @__PURE__ */ jsx(
         "div",
         {
           className: cn(
-            "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
+            "sidebar",
             className
           ),
           ref,
@@ -808,12 +739,12 @@ const Sidebar = React.forwardRef(
         {
           "data-sidebar": "sidebar",
           "data-mobile": "true",
-          className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
+          className: "sidebar",
           style: {
             "--sidebar-width": SIDEBAR_WIDTH_MOBILE
           },
-          side,
-          children: /* @__PURE__ */ jsx("div", { className: "flex h-full w-full flex-col", children })
+          side: side2,
+          children: /* @__PURE__ */ jsx("div", { className: "sidebar-mobile-content", children })
         }
       ) });
     }
@@ -821,39 +752,30 @@ const Sidebar = React.forwardRef(
       "div",
       {
         ref,
-        className: "group peer hidden md:block text-sidebar-foreground",
-        "data-state": state,
-        "data-collapsible": state === "collapsed" ? collapsible : "",
-        "data-variant": variant,
-        "data-side": side,
+        className: "sidebar-base peer",
+        "data-state": state2,
+        "data-collapsible": state2 === "collapsed" ? collapsible2 : "",
+        "data-variant": variant2,
+        "data-side": side2,
         children: [
+          /* @__PURE__ */ jsx("div", { className: "sidebar-base" }),
           /* @__PURE__ */ jsx(
             "div",
             {
               className: cn(
-                "duration-200 relative h-svh w-(--sidebar-width) bg-transparent transition-[width] ease-linear",
-                "group-data-[collapsible=offcanvas]:w-0",
-                "group-data-[side=right]:rotate-180",
-                variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "duration-200 fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] ease-linear md:flex",
-                side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-                // Adjust the padding for floating and inset variants.
-                variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+                "sidebar-container",
                 className
               ),
+              "data-side": side2,
+              "data-collapsible": state2 === "collapsed" ? collapsible2 : "",
+              "data-variant": variant2,
               ...props,
               children: /* @__PURE__ */ jsx(
                 "div",
                 {
                   "data-sidebar": "sidebar",
-                  className: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm",
+                  className: "sidebar-inner",
+                  "data-variant": variant2,
                   children
                 }
               )
@@ -874,7 +796,7 @@ const SidebarTrigger = React.forwardRef(({ className, onClick, ...props }, ref)
       "data-sidebar": "trigger",
       variant: "general-tertiary",
       size: "icon",
-      className: cn("h-7 w-7", className),
+      className: cn("sidebar-trigger", className),
       onClick: (event) => {
         onClick == null ? void 0 : onClick(event);
         toggleSidebar();
@@ -900,14 +822,12 @@ const SidebarRail = React.forwardRef(({ className, ...props }, ref) => {
       onClick: toggleSidebar,
       title: "Toggle Sidebar",
       className: cn(
-        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
-        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        "sidebar-rail",
         className
       ),
+      "data-side": side,
+      "data-state": state,
+      "data-collapsible": collapsible,
       ...props
     }
   );
@@ -919,10 +839,11 @@ const SidebarInset = React.forwardRef(({ className, ...props }, ref) => {
     {
       ref,
       className: cn(
-        "relative flex min-h-svh flex-1 flex-col bg-background",
-        "peer-data-[variant=inset]:min-h-[calc(100svh-(--spacing(4)))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm",
+        "sidebar-inset",
         className
       ),
+      "data-variant": variant,
+      "data-state": state,
       ...props
     }
   );
@@ -935,7 +856,7 @@ const SidebarInput = React.forwardRef(({ className, ...props }, ref) => {
       ref,
       "data-sidebar": "input",
       className: cn(
-        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        "sidebar-input",
         className
       ),
       ...props
@@ -949,7 +870,7 @@ const SidebarHeader = React.forwardRef(({ className, ...props }, ref) => {
     {
       ref,
       "data-sidebar": "header",
-      className: cn("flex flex-col gap-2 p-2", className),
+      className: cn("sidebar-header", className),
       ...props
     }
   );
@@ -961,7 +882,7 @@ const SidebarFooter = React.forwardRef(({ className, ...props }, ref) => {
     {
       ref,
       "data-sidebar": "footer",
-      className: cn("flex flex-col gap-2 p-2", className),
+      className: cn("sidebar-footer", className),
       ...props
     }
   );
@@ -973,7 +894,7 @@ const SidebarSeparator = React.forwardRef(({ className, ...props }, ref) => {
     {
       ref,
       "data-sidebar": "separator",
-      className: cn("mx-2 w-auto bg-sidebar-border", className),
+      className: cn("sidebar-separator", className),
       ...props
     }
   );
@@ -986,7 +907,7 @@ const SidebarContent = React.forwardRef(({ className, ...props }, ref) => {
       ref,
       "data-sidebar": "content",
       className: cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        "sidebar-content",
         className
       ),
       ...props
@@ -1000,7 +921,7 @@ const SidebarGroup = React.forwardRef(({ className, ...props }, ref) => {
     {
       ref,
       "data-sidebar": "group",
-      className: cn("relative flex w-full min-w-0 flex-col p-2", className),
+      className: cn("sidebar-group", className),
       ...props
     }
   );
@@ -1014,8 +935,7 @@ const SidebarGroupLabel = React.forwardRef(({ className, asChild = false, ...pro
       ref,
       "data-sidebar": "group-label",
       className: cn(
-        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-hidden ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        "sidebar-group-label",
         className
       ),
       ...props
@@ -1031,10 +951,7 @@ const SidebarGroupAction = React.forwardRef(({ className, asChild = false, ...pr
       ref,
       "data-sidebar": "group-action",
       className: cn(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 md:after:hidden",
-        "group-data-[collapsible=icon]:hidden",
+        "sidebar-group-action",
         className
       ),
       ...props
@@ -1047,7 +964,7 @@ const SidebarGroupContent = React.forwardRef(({ className, ...props }, ref) => /
   {
     ref,
     "data-sidebar": "group-content",
-    className: cn("w-full text-sm", className),
+    className: cn("sidebar-group-content", className),
     ...props
   }
 ));
@@ -1057,7 +974,7 @@ const SidebarMenu = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     "data-sidebar": "menu",
-    className: cn("flex w-full min-w-0 flex-col gap-1", className),
+    className: cn("sidebar-menu", className),
     ...props
   }
 ));
@@ -1067,23 +984,23 @@ const SidebarMenuItem = React.forwardRef(({ className, ...props }, ref) => /* @_
   {
     ref,
     "data-sidebar": "menu-item",
-    className: cn("group/menu-item relative", className),
+    className: cn("sidebar-menu-item", className),
     ...props
   }
 ));
 SidebarMenuItem.displayName = "SidebarMenuItem";
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "sidebar-menu-button",
   {
     variants: {
       variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
+        default: "sidebar-menu-button--default",
+        outline: "sidebar-menu-button--outline"
       },
       size: {
-        default: "h-8 text-sm",
-        sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
+        default: "sidebar-menu-button--size-default",
+        sm: "sidebar-menu-button--size-sm",
+        lg: "sidebar-menu-button--size-lg"
       }
     },
     defaultVariants: {
@@ -1096,14 +1013,14 @@ const SidebarMenuButton = React.forwardRef(
   ({
     asChild = false,
     isActive = false,
-    variant = "default",
+    variant: variant2 = "default",
     size = "default",
     tooltip,
     className,
     ...props
   }, ref) => {
     const Comp = asChild ? Slot : "button";
-    const { isMobile, state } = useSidebar();
+    const { isMobile, state: state2 } = useSidebar();
     const button = /* @__PURE__ */ jsx(
       Comp,
       {
@@ -1111,7 +1028,7 @@ const SidebarMenuButton = React.forwardRef(
         "data-sidebar": "menu-button",
         "data-size": size,
         "data-active": isActive,
-        className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+        className: cn(sidebarMenuButtonVariants({ variant: variant2, size }), className),
         ...props
       }
     );
@@ -1130,7 +1047,7 @@ const SidebarMenuButton = React.forwardRef(
         {
           side: "right",
           align: "center",
-          hidden: state !== "collapsed" || isMobile,
+          hidden: state2 !== "collapsed" || isMobile,
           ...tooltip
         }
       )
@@ -1140,41 +1057,33 @@ const SidebarMenuButton = React.forwardRef(
 SidebarMenuButton.displayName = "SidebarMenuButton";
 const SidebarMenuAction = React.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
   const Comp = asChild ? Slot : "button";
+  const { state: state2 } = useSidebar();
   return /* @__PURE__ */ jsx(
     Comp,
     {
       ref,
       "data-sidebar": "menu-action",
       className: cn(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 md:after:hidden",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
-        showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        "sidebar-menu-action",
+        showOnHover && "sidebar-menu-action--show-on-hover",
         className
       ),
+      "data-show-on-hover": showOnHover,
       ...props
     }
   );
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
-const SidebarMenuBadge = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const SidebarMenuBadge = React.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
     "data-sidebar": "menu-badge",
     className: cn(
-      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
-      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-      "peer-data-[size=sm]/menu-button:top-1",
-      "peer-data-[size=default]/menu-button:top-1.5",
-      "peer-data-[size=lg]/menu-button:top-2.5",
-      "group-data-[collapsible=icon]:hidden",
+      "sidebar-menu-badge",
       className
     ),
+    "data-size": size,
     ...props
   }
 ));
@@ -1188,20 +1097,20 @@ const SidebarMenuSkeleton = React.forwardRef(({ className, showIcon = false, ...
     {
       ref,
       "data-sidebar": "menu-skeleton",
-      className: cn("rounded-md h-8 flex gap-2 px-2 items-center", className),
+      className: cn("sidebar-menu-skeleton", className),
       ...props,
       children: [
         showIcon && /* @__PURE__ */ jsx(
           Skeleton,
           {
-            className: "size-4 rounded-md",
+            className: "sidebar-menu-skeleton-icon",
             "data-sidebar": "menu-skeleton-icon"
           }
         ),
         /* @__PURE__ */ jsx(
           Skeleton,
           {
-            className: "h-4 flex-1 max-w-(--skeleton-width)",
+            className: "sidebar-menu-skeleton-text",
             "data-sidebar": "menu-skeleton-text",
             style: {
               "--skeleton-width": width
@@ -1219,8 +1128,7 @@ const SidebarMenuSub = React.forwardRef(({ className, ...props }, ref) => /* @__
     ref,
     "data-sidebar": "menu-sub",
     className: cn(
-      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
-      "group-data-[collapsible=icon]:hidden",
+      "sidebar-menu-sub",
       className
     ),
     ...props
@@ -1239,21 +1147,18 @@ const SidebarMenuSubButton = React.forwardRef(({ asChild = false, size = "md", i
       "data-size": size,
       "data-active": isActive,
       className: cn(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-        size === "sm" && "text-xs",
-        size === "md" && "text-sm",
-        "group-data-[collapsible=icon]:hidden",
+        "sidebar-menu-sub-button",
+        size === "sm" && "sidebar-menu-sub-button--size-sm",
+        size === "md" && "sidebar-menu-sub-button--size-md",
         className
       ),
+      "data-size": size,
       ...props
     }
   );
 });
 SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
-const labelVariants = cva(
-  "peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-gray-600 px-2"
-);
+const labelVariants = cva("label");
 const Label = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   LabelPrimitive.Root,
   {
@@ -1269,10 +1174,7 @@ const Textarea = React.forwardRef(
     return /* @__PURE__ */ jsx(
       "textarea",
       {
-        className: cn(
-          "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
-        ),
+        className: cn("textarea body-base", className),
         ref,
         ...props
       }
@@ -1284,18 +1186,9 @@ const Checkbox = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   CheckboxPrimitive.Root,
   {
     ref,
-    className: cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className
-    ),
+    className: cn("checkbox", className),
     ...props,
-    children: /* @__PURE__ */ jsx(
-      CheckboxPrimitive.Indicator,
-      {
-        className: cn("flex items-center justify-center text-current"),
-        children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
-      }
-    )
+    children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "checkbox-indicator", children: /* @__PURE__ */ jsx(Check, { className: "icon-4" }) })
   }
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
@@ -1303,7 +1196,7 @@ const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Root,
     {
-      className: cn("grid gap-2", className),
+      className: cn("radio-group", className),
       ...props,
       ref
     }
@@ -1315,12 +1208,9 @@ const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
     RadioGroupPrimitive.Item,
     {
       ref,
-      className: cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ),
+      className: cn("radio-group-item", className),
       ...props,
-      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
+      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "radio-group-indicator", children: /* @__PURE__ */ jsx(Circle, { className: "icon-2-5 fill-current text-current" }) })
     }
   );
 });
@@ -1328,20 +1218,10 @@ RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 const Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SwitchPrimitives.Root,
   {
-    className: cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className
-    ),
+    className: cn("switch", className),
     ...props,
     ref,
-    children: /* @__PURE__ */ jsx(
-      SwitchPrimitives.Thumb,
-      {
-        className: cn(
-          "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
-        )
-      }
-    )
+    children: /* @__PURE__ */ jsx(SwitchPrimitives.Thumb, { className: "switch-thumb" })
   }
 ));
 Switch.displayName = SwitchPrimitives.Root.displayName;
@@ -1349,14 +1229,11 @@ const Slider = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   SliderPrimitive.Root,
   {
     ref,
-    className: cn(
-      "relative flex w-full touch-none select-none items-center",
-      className
-    ),
+    className: cn("slider", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
-      /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" })
+      /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "slider-track", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "slider-range" }) }),
+      /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "slider-thumb" })
     ]
   }
 ));
@@ -1365,16 +1242,13 @@ const InputOTP = React.forwardRef(({ className, containerClassName, ...props },
   OTPInput,
   {
     ref,
-    containerClassName: cn(
-      "flex items-center gap-2 has-disabled:opacity-50",
-      containerClassName
-    ),
-    className: cn("disabled:cursor-not-allowed", className),
+    containerClassName: cn("input-otp-container", containerClassName),
+    className: cn("input-otp", className),
     ...props
   }
 ));
 InputOTP.displayName = "InputOTP";
-const InputOTPGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center", className), ...props }));
+const InputOTPGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("input-otp-group", className), ...props }));
 InputOTPGroup.displayName = "InputOTPGroup";
 const InputOTPSlot = React.forwardRef(({ index, className, ...props }, ref) => {
   const inputOTPContext = React.useContext(OTPInputContext);
@@ -1384,14 +1258,14 @@ const InputOTPSlot = React.forwardRef(({ index, className, ...props }, ref) => {
     {
       ref,
       className: cn(
-        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-        isActive && "z-10 ring-2 ring-ring ring-offset-background",
+        "input-otp-slot",
+        isActive && "input-otp-slot--active",
         className
       ),
       ...props,
       children: [
         char,
-        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) })
+        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "input-otp-caret", children: /* @__PURE__ */ jsx("div", { className: "input-otp-caret-line" }) })
       ]
     }
   );
@@ -1440,14 +1314,11 @@ const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref)
   SelectPrimitive.Trigger,
   {
     ref,
-    className: cn(
-      "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
-    ),
+    className: cn("select-trigger", className),
     ...props,
-    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" }) })
+    children: /* @__PURE__ */ jsxs("div", { className: "select-trigger-inner", children: [
+      /* @__PURE__ */ jsx("span", { className: "select-trigger-text font-mazzard body-base", children }),
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(UtilityChevronDown, { className: "select-icon" }) })
     ] })
   }
 ));
@@ -1456,10 +1327,7 @@ const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) =>
   SelectPrimitive.ScrollUpButton,
   {
     ref,
-    className: cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    ),
+    className: cn("select-scroll-button", className),
     ...props,
     children: /* @__PURE__ */ jsx(UtilityChevronDown, {})
   }
@@ -1469,10 +1337,7 @@ const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) =
   SelectPrimitive.ScrollDownButton,
   {
     ref,
-    className: cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    ),
+    className: cn("select-scroll-button", className),
     ...props,
     children: /* @__PURE__ */ jsx(UtilityChevronDown, {})
   }
@@ -1482,24 +1347,12 @@ const SelectContent = React.forwardRef(({ className, children, position = "poppe
   SelectPrimitive.Content,
   {
     ref,
-    className: cn(
-      "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
-    ),
+    className: cn("select-content", className),
     position,
     ...props,
     children: [
       /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
-      /* @__PURE__ */ jsx(
-        SelectPrimitive.Viewport,
-        {
-          className: cn(
-            "",
-            position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
-          ),
-          children
-        }
-      ),
+      /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { className: "select-viewport", children }),
       /* @__PURE__ */ jsx(SelectScrollDownButton, {})
     ]
   }
@@ -1509,10 +1362,7 @@ const SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   SelectPrimitive.Label,
   {
     ref,
-    className: cn(
-      "py-1.5 pl-8 pr-2 text-sm font-semibold font-mazzard",
-      className
-    ),
+    className: cn("select-label font-mazzard", className),
     ...props
   }
 ));
@@ -1521,10 +1371,7 @@ const SelectItem = React.forwardRef(({ className, children, ...props }, ref) =>
   SelectPrimitive.Item,
   {
     ref,
-    className: cn(
-      "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
-    ),
+    className: cn("select-item", className),
     ...props,
     children: /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
   }
@@ -1534,7 +1381,7 @@ const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @_
   SelectPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    className: cn("select-separator", className),
     ...props
   }
 ));
@@ -1571,7 +1418,7 @@ const FormItemContext = React.createContext(
 );
 const FormItem = React.forwardRef(({ className, ...props }, ref) => {
   const id = React.useId();
-  return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { ref, className: cn("space-y-2", className), ...props }) });
+  return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { ref, className: cn("form-item", className), ...props }) });
 });
 FormItem.displayName = "FormItem";
 const FormLabel = React.forwardRef(({ className, ...props }, ref) => {
@@ -1580,7 +1427,7 @@ const FormLabel = React.forwardRef(({ className, ...props }, ref) => {
     Label,
     {
       ref,
-      className: cn(error && "text-destructive", className),
+      className: cn(error && "form-label--error", className),
       htmlFor: formItemId,
       ...props
     }
@@ -1608,7 +1455,7 @@ const FormDescription = React.forwardRef(({ className, ...props }, ref) => {
     {
       ref,
       id: formDescriptionId,
-      className: cn("text-sm text-muted-foreground", className),
+      className: cn("form-description", className),
       ...props
     }
   );
@@ -1625,7 +1472,7 @@ const FormMessage = React.forwardRef(({ className, children, ...props }, ref) =>
     {
       ref,
       id: formMessageId,
-      className: cn("text-sm font-medium text-destructive", className),
+      className: cn("form-message", className),
       ...props,
       children: body
     }
@@ -1633,14 +1480,14 @@ 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",
+  "toggle-group-item",
   {
     variants: {
       variant: {
-        default: "bg-gray-100 text-gray-600 hover:bg-gray-200"
+        default: "toggle-group-item--default"
       },
       size: {
-        default: "h-8 px-4"
+        default: "toggle-group-item--size-default"
       }
     },
     defaultVariants: {
@@ -1653,17 +1500,17 @@ const ToggleGroupContext = React.createContext({
   size: "default",
   variant: "default"
 });
-const ToggleGroup = React.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx(
+const ToggleGroup = React.forwardRef(({ className, variant: variant2, size, children, ...props }, ref) => /* @__PURE__ */ jsx(
   ToggleGroupPrimitive.Root,
   {
     ref,
-    className: cn("flex items-center justify-center gap-1", className),
+    className: cn("toggle-group", className),
     ...props,
-    children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant: variant2, size }, children })
   }
 ));
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-const ToggleGroupItem = React.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+const ToggleGroupItem = React.forwardRef(({ className, children, variant: variant2, size, ...props }, ref) => {
   const context = React.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Item,
@@ -1671,7 +1518,7 @@ const ToggleGroupItem = React.forwardRef(({ className, children, variant, size,
       ref,
       className: cn(
         toggleVariants({
-          variant: context.variant || variant,
+          variant: context.variant || variant2,
           size: context.size || size
         }),
         className
@@ -1711,17 +1558,17 @@ function useSegmentedControl({
   };
 }
 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",
+  "toggle",
   {
     variants: {
       variant: {
-        default: "bg-transparent",
-        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground"
+        default: "toggle--default",
+        outline: "toggle--outline"
       },
       size: {
-        default: "h-10 px-3",
-        sm: "h-9 px-2.5",
-        lg: "h-11 px-5"
+        default: "toggle--size-default",
+        sm: "toggle--size-sm",
+        lg: "toggle--size-lg"
       }
     },
     defaultVariants: {
@@ -1738,18 +1585,19 @@ const SegmentedControlInner = React.forwardRef(
       defaultValue: defaultValue ?? ((_a = options[0]) == null ? void 0 : _a.value),
       onValueChange
     });
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("inline-flex", className), ...props, children: options.map((option) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("segmented-control", className), ...props, children: options.map((option) => {
       const isReactElement = React.isValidElement(option.label);
+      const isActive = selectedValue === option.value;
       return /* @__PURE__ */ jsx(
         "button",
         {
           className: cn(
-            "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"
+            "segmented-control-button",
+            isActive ? "segmented-control-button--active" : "segmented-control-button--inactive"
           ),
           onClick: () => handleValueChange(option.value),
           type: "button",
-          "data-active": selectedValue === option.value,
+          "data-active": isActive,
           children: isReactElement ? option.label : /* @__PURE__ */ jsx("span", { className: "body-small font-medium", children: option.label })
         },
         option.value
@@ -1761,14 +1609,14 @@ SegmentedControlInner.displayName = "SegmentedControl";
 const SegmentedControl = SegmentedControlInner;
 const Toggle = SegmentedControl;
 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",
+  "badge",
   {
     variants: {
       variant: {
-        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground"
+        default: "badge--default",
+        secondary: "badge--secondary",
+        destructive: "badge--destructive",
+        outline: "badge--outline"
       }
     },
     defaultVariants: {
@@ -1776,16 +1624,16 @@ const badgeVariants = cva(
     }
   }
 );
-function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
+function Badge({ className, variant: variant2, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant: variant2 }), className), ...props });
 }
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "alert",
   {
     variants: {
       variant: {
-        default: "bg-background text-foreground",
-        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
+        default: "alert--default",
+        destructive: "alert--destructive"
       }
     },
     defaultVariants: {
@@ -1793,12 +1641,12 @@ const alertVariants = cva(
     }
   }
 );
-const Alert = React.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
+const Alert = React.forwardRef(({ className, variant: variant2, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
     role: "alert",
-    className: cn(alertVariants({ variant }), className),
+    className: cn(alertVariants({ variant: variant2 }), className),
     ...props
   }
 ));
@@ -1807,7 +1655,7 @@ const AlertTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE
   "h5",
   {
     ref,
-    className: cn("mb-1 font-medium leading-none tracking-tight", className),
+    className: cn("alert-title", className),
     ...props
   }
 ));
@@ -1816,7 +1664,7 @@ const AlertDescription = React.forwardRef(({ className, ...props }, ref) => /* @
   "div",
   {
     ref,
-    className: cn("text-sm [&_p]:leading-relaxed", className),
+    className: cn("alert-description", className),
     ...props
   }
 ));
@@ -1827,10 +1675,7 @@ const AlertDialogPortal = AlertDialogPrimitive.Portal;
 const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Overlay,
   {
-    className: cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    ),
+    className: cn("alert-dialog-overlay", className),
     ...props,
     ref
   }
@@ -1842,10 +1687,7 @@ const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => /*
     AlertDialogPrimitive.Content,
     {
       ref,
-      className: cn(
-        "fixed left-[50%] top-[50%] z-50 border-green grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      ),
+      className: cn("alert-dialog-content", className),
       ...props
     }
   )
@@ -1857,10 +1699,7 @@ const AlertDialogHeader = ({
 }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    ),
+    className: cn("alert-dialog-header", className),
     ...props
   }
 );
@@ -1871,10 +1710,7 @@ const AlertDialogFooter = ({
 }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    ),
+    className: cn("alert-dialog-footer", className),
     ...props
   }
 );
@@ -1883,7 +1719,7 @@ const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @
   AlertDialogPrimitive.Title,
   {
     ref,
-    className: cn("text-lg font-semibold", className),
+    className: cn("alert-dialog-title", className),
     ...props
   }
 ));
@@ -1892,7 +1728,7 @@ const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) =
   AlertDialogPrimitive.Description,
   {
     ref,
-    className: cn("text-sm text-muted-foreground", className),
+    className: cn("alert-dialog-description", className),
     ...props
   }
 ));
@@ -1912,7 +1748,6 @@ const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => /*
     ref,
     className: cn(
       buttonVariants({ variant: "general-secondary" }),
-      "mt-2 sm:mt-0",
       className
     ),
     ...props
@@ -1923,10 +1758,7 @@ const Avatar = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   AvatarPrimitive.Root,
   {
     ref,
-    className: cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
-    ),
+    className: cn("avatar", className),
     ...props
   }
 ));
@@ -1935,7 +1767,7 @@ const AvatarImage = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   AvatarPrimitive.Image,
   {
     ref,
-    className: cn("aspect-square h-full w-full", className),
+    className: cn("avatar-image", className),
     ...props
   }
 ));
@@ -1944,10 +1776,7 @@ const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => /* @__
   AvatarPrimitive.Fallback,
   {
     ref,
-    className: cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className
-    ),
+    className: cn("avatar-fallback", className),
     ...props
   }
 ));
@@ -1958,10 +1787,7 @@ const BreadcrumbList = React.forwardRef(({ className, ...props }, ref) => /* @__
   "ol",
   {
     ref,
-    className: cn(
-      "flex flex-wrap items-center gap-1.5 wrap-break-word text-sm text-muted-foreground sm:gap-2.5",
-      className
-    ),
+    className: cn("breadcrumb-list", className),
     ...props
   }
 ));
@@ -1970,7 +1796,7 @@ const BreadcrumbItem = React.forwardRef(({ className, ...props }, ref) => /* @__
   "li",
   {
     ref,
-    className: cn("inline-flex items-center gap-1.5", className),
+    className: cn("breadcrumb-item", className),
     ...props
   }
 ));
@@ -1981,7 +1807,7 @@ const BreadcrumbLink = React.forwardRef(({ asChild, className, ...props }, ref)
     Comp,
     {
       ref,
-      className: cn("transition-colors hover:text-foreground", className),
+      className: cn("breadcrumb-link", className),
       ...props
     }
   );
@@ -1994,10 +1820,7 @@ const BreadcrumbPage = React.forwardRef(({ className, ...props }, ref) => /* @__
     role: "link",
     "aria-disabled": "true",
     "aria-current": "page",
-    className: cn(
-      "body-small font-medium text-gray-600 text-center whitespace-nowrap",
-      className
-    ),
+    className: cn("breadcrumb-page body-small font-medium", className),
     ...props
   }
 ));
@@ -2011,10 +1834,7 @@ const BreadcrumbSeparator = ({
   {
     role: "presentation",
     "aria-hidden": "true",
-    className: cn(
-      "size-4 flex items-center justify-center shrink-0",
-      className
-    ),
+    className: cn("breadcrumb-separator", className),
     ...props,
     children: children ?? /* @__PURE__ */ jsx(
       "svg",
@@ -2043,15 +1863,12 @@ const Progress = React.forwardRef(({ className, value, ...props }, ref) => /* @_
   ProgressPrimitive.Root,
   {
     ref,
-    className: cn(
-      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
-      className
-    ),
+    className: cn("progress", className),
     ...props,
     children: /* @__PURE__ */ jsx(
       ProgressPrimitive.Indicator,
       {
-        className: "h-full w-full flex-1 bg-primary transition-all",
+        className: "progress-indicator",
         style: { transform: `translateX(-${100 - (value || 0)}%)` }
       }
     )
@@ -2068,43 +1885,43 @@ function Calendar({
     DayPicker,
     {
       showOutsideDays,
-      className: cn("p-3", className),
+      className: cn("calendar", className),
       classNames: {
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
+        months: "calendar-months",
+        month: "calendar-month",
+        caption: "calendar-caption",
+        caption_label: "calendar-caption-label",
+        nav: "calendar-nav",
         nav_button: cn(
           buttonVariants({ variant: "general-secondary" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+          "calendar-nav-button"
         ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        nav_button_previous: "calendar-nav-button-previous",
+        nav_button_next: "calendar-nav-button-next",
+        table: "calendar-table",
+        head_row: "calendar-head-row",
+        head_cell: "calendar-head-cell",
+        row: "calendar-row",
+        cell: "calendar-cell",
         day: cn(
           buttonVariants({ variant: "general-tertiary" }),
-          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+          "calendar-day"
         ),
-        day_range_end: "day-range-end",
-        day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
+        day_range_end: "calendar-day-range-end",
+        day_selected: "calendar-day-selected",
+        day_today: "calendar-day-today",
+        day_outside: "calendar-day-outside",
+        day_disabled: "calendar-day-disabled",
+        day_range_middle: "calendar-day-range-middle",
+        day_hidden: "calendar-day-hidden",
         ...classNames
       },
       components: {
         Chevron: (props2) => {
           if (props2.orientation === "left") {
-            return /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" });
+            return /* @__PURE__ */ jsx(ChevronLeft, { className: "icon-4" });
           }
-          return /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" });
+          return /* @__PURE__ */ jsx(ChevronRight, { className: "icon-4" });
         }
       },
       ...props
@@ -2290,28 +2107,24 @@ const Navigation = ({
     "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"
-      ),
+      className: cn("navigation", isStrategy && "navigation--strategy"),
+      "data-strategy": isStrategy,
       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"
-            )
+            className: "navigation-overlay",
+            "data-open": isOpen
           }
         ),
-        /* @__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: [
+        /* @__PURE__ */ jsxs("div", { className: "navigation-container", children: [
+          /* @__PURE__ */ jsxs("div", { className: "navigation-logo-container", children: [
             isStrategy ? /* @__PURE__ */ jsx(
               Button,
               {
-                className: "mr-4",
+                className: "navigation-close-button",
                 size: "icon",
                 onClick: (e) => {
                   e.preventDefault();
@@ -2321,7 +2134,7 @@ const Navigation = ({
                     onLinkClick("/");
                   }
                 },
-                children: /* @__PURE__ */ jsx(UtilityClose, { className: "text-gray-700 group-hover:text-white" })
+                children: /* @__PURE__ */ jsx(UtilityClose, { className: "navigation-close-icon" })
               }
             ) : null,
             /* @__PURE__ */ jsx(
@@ -2329,856 +2142,585 @@ const Navigation = ({
               {
                 href: "/",
                 className: cn(
-                  "flex items-center  ease-in-out duration-300 will-change-transform",
-                  {
-                    "translate-x-0": isStrategy
-                  }
+                  "navigation-logo-link",
+                  isStrategy && "navigation-logo-link--strategy"
                 ),
+                "data-strategy": isStrategy,
                 "aria-label": "Home",
                 children: /* @__PURE__ */ jsx(NavLogo, { dark: isStrategy })
               }
             )
           ] }),
-          !isStrategy ? /* @__PURE__ */ jsx(
-            "div",
+          !isStrategy ? /* @__PURE__ */ jsx("div", { className: "navigation-nav-container", children: /* @__PURE__ */ jsx("ul", { className: "navigation-nav-list", children: navItems ? navItems.map((item, index) => /* @__PURE__ */ jsxs(
+            "li",
             {
-              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,
+              className: "navigation-nav-item",
+              onMouseEnter: () => handleNavItemMouseEnter(index),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "navigation-nav-link", children: item.label }),
+                activeItem === index + 1 && /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    id: "underline",
+                    className: "navigation-underline",
+                    layoutId: "underline",
+                    transition: { duration: 0.2, ease: "easeOut" },
+                    children: /* @__PURE__ */ jsx(
+                      "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"
-                            }
-                          }
-                        )
+                        className: "navigation-underline-circle navigation-underline-circle--gradient",
+                        style: {
+                          width: "10px",
+                          height: "5px",
+                          borderBottomLeftRadius: "100px",
+                          borderBottomRightRadius: "100px",
+                          borderBottom: "0",
+                          boxSizing: "border-box"
+                        }
                       }
-                    ),
-                    index === 0 && /* @__PURE__ */ jsx(
+                    )
+                  }
+                ),
+                index === 0 && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "navigation-underline navigation-underline--static",
+                    style: { transition: "all 0.2s ease-out" },
+                    children: /* @__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"
-                            }
-                          }
-                        )
+                        className: "navigation-underline-circle navigation-underline-circle--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(
+                  }
+                )
+              ]
+            },
+            index + 1
+          )) : null }) }) : null,
+          /* @__PURE__ */ jsx("div", { className: "navigation-actions", 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" : ""
-              ),
+              className: "navigation-account-link",
+              "data-open": isOpen,
+              "data-strategy": isStrategy,
               children: /* @__PURE__ */ jsx(
                 NavAccount,
                 {
-                  className: isStrategy ? "text-bronze-500" : "text-bronze-100"
+                  className: cn(
+                    "navigation-account-icon",
+                    isStrategy ? "navigation-account-icon--strategy" : "navigation-account-icon--default"
+                  )
                 }
               )
             }
           ) })
         ] }),
-        isOpen && /* @__PURE__ */ jsx("div", { className: "h-px w-full bg-[rgba(255,255,255,0.08)]" }),
-        /* @__PURE__ */ jsx(
-          "div",
+        isOpen && /* @__PURE__ */ jsx("div", { className: "navigation-divider" }),
+        /* @__PURE__ */ jsx("div", { ref: menuRef, className: "navigation-tray", "data-open": isOpen, children: /* @__PURE__ */ jsx("div", { className: "navigation-tray-content", children: /* @__PURE__ */ jsx("div", { ref: menuItemsRef, className: "navigation-tray-grid", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxs(
+          motion.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"
-                            }
-                          ) })
-                        ] })
-                      ] })
+            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: "navigation-tray-section", children: [
+                /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    className: "navigation-tray-heading",
+                    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: "navigation-tray-columns", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "navigation-tray-column", children: [
+                    /* @__PURE__ */ jsx("h3", { className: "navigation-tray-column-title", children: "Everything" }),
+                    /* @__PURE__ */ jsxs("ul", { className: "navigation-tray-column-list navigation-tray-column-list--spacing-5", children: [
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "Explore WELL" }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "Enroll in WELL" }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "What's new" }) })
                     ] })
                   ] }),
-                  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"
-                              }
-                            )
-                          ] }) })
-                        ] })
-                      ] })
+                  /* @__PURE__ */ jsxs("div", { className: "navigation-tray-column", children: [
+                    /* @__PURE__ */ jsx("h3", { className: "navigation-tray-column-title", children: "WHY WELL" }),
+                    /* @__PURE__ */ jsxs("ul", { className: "navigation-tray-column-list navigation-tray-column-list--spacing-5", children: [
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "Performance" }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "ROI" }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "Impact" }) })
                     ] })
                   ] }),
-                  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"
-                            }
-                          ) })
-                        ] })
-                      ] })
+                  /* @__PURE__ */ jsxs("div", { className: "navigation-tray-column", children: [
+                    /* @__PURE__ */ jsx("h3", { className: "navigation-tray-column-title", children: "Standard" }),
+                    /* @__PURE__ */ jsxs("ul", { className: "navigation-tray-column-list navigation-tray-column-list--spacing-5", children: [
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "Strategies" }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "Themes" }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "Milestones" }) })
                     ] })
                   ] }),
-                  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"
-                              }
-                            )
-                          ] }) })
-                        ] })
-                      ] })
+                  /* @__PURE__ */ jsxs("div", { className: "navigation-tray-column", children: [
+                    /* @__PURE__ */ jsx("h3", { className: "navigation-tray-column-title", children: "Network" }),
+                    /* @__PURE__ */ jsxs("ul", { className: "navigation-tray-column-list navigation-tray-column-list--spacing-5", children: [
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "Organizations" }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "People" }) })
                     ] })
                   ] }),
-                  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"
-                            }
-                          ) })
-                        ] })
-                      ] })
+                  /* @__PURE__ */ jsxs("div", { className: "navigation-tray-column", children: [
+                    /* @__PURE__ */ jsx("h3", { className: "navigation-tray-column-title", children: "Solutions" }),
+                    /* @__PURE__ */ jsxs("ul", { className: "navigation-tray-column-list navigation-tray-column-list--spacing-5", children: [
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "Products" }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "Services" }) })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "navigation-tray-column", children: [
+                    /* @__PURE__ */ jsx("h3", { className: "navigation-tray-column-title", children: "Places" }),
+                    /* @__PURE__ */ jsxs("ul", { className: "navigation-tray-column-list navigation-tray-column-list--spacing-5", children: [
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "Locations" }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "Portfolios" }) })
                     ] })
                   ] })
-                ]
-              },
-              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
-        ),
+                ] })
+              ] }),
+              activeItem === 2 && /* @__PURE__ */ jsxs("div", { className: "navigation-tray-section", children: [
+                /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    className: "navigation-tray-heading",
+                    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: "navigation-tray-columns", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "navigation-tray-column", children: [
+                    /* @__PURE__ */ jsx("h3", { className: "navigation-tray-column-title", children: "SUBSCRIBE" }),
+                    /* @__PURE__ */ jsxs("ul", { className: "navigation-tray-column-list", children: [
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "WELL at scale" }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "navigation-tray-bullet-item", children: [
+                        /* @__PURE__ */ jsx("div", { className: "navigation-tray-bullet" }),
+                        /* @__PURE__ */ jsx(NavLink, { href: "/", children: /* @__PURE__ */ jsx("span", { className: "navigation-tray-link-small", children: "Pricing" }) })
+                      ] }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "navigation-tray-bullet-item", children: [
+                        /* @__PURE__ */ jsx("div", { className: "navigation-tray-bullet" }),
+                        /* @__PURE__ */ jsx(NavLink, { href: "/", children: /* @__PURE__ */ jsx("span", { className: "navigation-tray-link-small", children: "Leaderboard" }) })
+                      ] }) })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "navigation-tray-column", children: [
+                    /* @__PURE__ */ jsx("h3", { className: "navigation-tray-column-title", children: "Certify" }),
+                    /* @__PURE__ */ jsxs("ul", { className: "navigation-tray-column-list", children: [
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "WELL Certification" }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                        NavLink,
+                        {
+                          href: "/",
+                          className: "navigation-tray-link navigation-tray-link--with-badge",
+                          children: [
+                            "WELL Residence",
+                            /* @__PURE__ */ jsx("span", { className: "navigation-tray-badge", children: "PILOT" })
+                          ]
+                        }
+                      ) })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "navigation-tray-column", children: [
+                    /* @__PURE__ */ jsx("h3", { className: "navigation-tray-column-title", children: "Get rated" }),
+                    /* @__PURE__ */ jsxs("ul", { className: "navigation-tray-column-list", children: [
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "WELL Ratings" }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "navigation-tray-bullet-item", children: [
+                        /* @__PURE__ */ jsx(NavBullet, { color: "#F3E7D8" }),
+                        /* @__PURE__ */ jsx(
+                          NavLink,
+                          {
+                            href: "/",
+                            className: "navigation-tray-link-small",
+                            children: "Health-Safety Rating"
+                          }
+                        )
+                      ] }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "navigation-tray-bullet-item", children: [
+                        /* @__PURE__ */ jsx(NavBullet, { color: "#0F748A" }),
+                        /* @__PURE__ */ jsx(
+                          NavLink,
+                          {
+                            href: "/",
+                            className: "navigation-tray-link-small",
+                            children: "Performance Rating"
+                          }
+                        )
+                      ] }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "navigation-tray-bullet-item", children: [
+                        /* @__PURE__ */ jsx(NavBullet, { color: "#17AA8D" }),
+                        /* @__PURE__ */ jsx(
+                          NavLink,
+                          {
+                            href: "/",
+                            className: "navigation-tray-link-small",
+                            children: "Equity Rating"
+                          }
+                        )
+                      ] }) })
+                    ] })
+                  ] })
+                ] })
+              ] }),
+              activeItem === 3 && /* @__PURE__ */ jsxs("div", { className: "navigation-tray-section", children: [
+                /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    className: "navigation-tray-heading",
+                    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: "navigation-tray-columns", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "navigation-tray-column", children: [
+                    /* @__PURE__ */ jsx("h3", { className: "navigation-tray-column-title", children: "JOIN" }),
+                    /* @__PURE__ */ jsxs("ul", { className: "navigation-tray-column-list", children: [
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "Membership" }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "Works with WELL" }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "navigation-tray-bullet-item", children: [
+                        /* @__PURE__ */ jsx(NavBullet, { color: "#2E74AD" }),
+                        /* @__PURE__ */ jsx(
+                          NavLink,
+                          {
+                            href: "/",
+                            className: "navigation-tray-link-small",
+                            children: "Enterprise Provider"
+                          }
+                        )
+                      ] }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "navigation-tray-bullet-item", children: [
+                        /* @__PURE__ */ jsx(NavBullet, { color: "#149EBD" }),
+                        /* @__PURE__ */ jsx(
+                          NavLink,
+                          {
+                            href: "/",
+                            className: "navigation-tray-link-small",
+                            children: "Product Provider"
+                          }
+                        )
+                      ] }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "navigation-tray-bullet-item", children: [
+                        /* @__PURE__ */ jsx(NavBullet, { color: "#ED896F" }),
+                        /* @__PURE__ */ jsx(
+                          NavLink,
+                          {
+                            href: "/",
+                            className: "navigation-tray-link-small",
+                            children: "Performance Testing Provider"
+                          }
+                        )
+                      ] }) })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "navigation-tray-column", children: [
+                    /* @__PURE__ */ jsx("h3", { className: "navigation-tray-column-title", children: "EARN" }),
+                    /* @__PURE__ */ jsxs("ul", { className: "navigation-tray-column-list", children: [
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "WELL AP" }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "WELL Faculty" }) })
+                    ] })
+                  ] })
+                ] })
+              ] }),
+              activeItem === 4 && /* @__PURE__ */ jsxs("div", { className: "navigation-tray-section", children: [
+                /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    className: "navigation-tray-heading",
+                    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: "navigation-tray-columns", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "navigation-tray-column", children: [
+                    /* @__PURE__ */ jsx("h3", { className: "navigation-tray-column-title", children: "LEARN" }),
+                    /* @__PURE__ */ jsxs("ul", { className: "navigation-tray-column-list", children: [
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "WELL Forum" }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "navigation-tray-bullet-item", children: [
+                        /* @__PURE__ */ jsx("div", { className: "navigation-tray-bullet" }),
+                        /* @__PURE__ */ jsx(
+                          NavLink,
+                          {
+                            href: "/",
+                            className: "navigation-tray-link-small",
+                            children: "Threads"
+                          }
+                        )
+                      ] }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "navigation-tray-bullet-item", children: [
+                        /* @__PURE__ */ jsx("div", { className: "navigation-tray-bullet" }),
+                        /* @__PURE__ */ jsx(
+                          NavLink,
+                          {
+                            href: "/",
+                            className: "navigation-tray-link-small",
+                            children: "Webcasts"
+                          }
+                        )
+                      ] }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "navigation-tray-bullet-item", children: [
+                        /* @__PURE__ */ jsx("div", { className: "navigation-tray-bullet" }),
+                        /* @__PURE__ */ jsx(
+                          NavLink,
+                          {
+                            href: "/",
+                            className: "navigation-tray-link-small",
+                            children: "Trainings"
+                          }
+                        )
+                      ] }) })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "navigation-tray-column", children: [
+                    /* @__PURE__ */ jsx("h3", { className: "navigation-tray-column-title", children: "ATTEND" }),
+                    /* @__PURE__ */ jsxs("ul", { className: "navigation-tray-column-list", children: [
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "WELL 2025" }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "navigation-tray-bullet-item", children: [
+                        /* @__PURE__ */ jsx("div", { className: "navigation-tray-bullet" }),
+                        /* @__PURE__ */ jsx(
+                          NavLink,
+                          {
+                            href: "/",
+                            className: "navigation-tray-link-small",
+                            children: "Flagship events"
+                          }
+                        )
+                      ] }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "navigation-tray-bullet-item", children: [
+                        /* @__PURE__ */ jsx("div", { className: "navigation-tray-bullet" }),
+                        /* @__PURE__ */ jsx(
+                          NavLink,
+                          {
+                            href: "/",
+                            className: "navigation-tray-link-small",
+                            children: "Thematic summits"
+                          }
+                        )
+                      ] }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "navigation-tray-bullet-item", children: [
+                        /* @__PURE__ */ jsx("div", { className: "navigation-tray-bullet" }),
+                        /* @__PURE__ */ jsx(
+                          NavLink,
+                          {
+                            href: "/",
+                            className: "navigation-tray-link-small",
+                            children: "Regional summits"
+                          }
+                        )
+                      ] }) })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "navigation-tray-column", children: [
+                    /* @__PURE__ */ jsx("h3", { className: "navigation-tray-column-title", children: "GUIDANCE" }),
+                    /* @__PURE__ */ jsxs("ul", { className: "navigation-tray-column-list", children: [
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "Knowledge base" }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "navigation-tray-bullet-item", children: [
+                        /* @__PURE__ */ jsx("div", { className: "navigation-tray-bullet" }),
+                        /* @__PURE__ */ jsx(
+                          NavLink,
+                          {
+                            href: "/",
+                            className: "navigation-tray-link-small",
+                            children: "Tutorials"
+                          }
+                        )
+                      ] }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "navigation-tray-bullet-item", children: [
+                        /* @__PURE__ */ jsx("div", { className: "navigation-tray-bullet" }),
+                        /* @__PURE__ */ jsx(
+                          NavLink,
+                          {
+                            href: "/",
+                            className: "navigation-tray-link-small",
+                            children: "Guides"
+                          }
+                        )
+                      ] }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "navigation-tray-bullet-item", children: [
+                        /* @__PURE__ */ jsx("div", { className: "navigation-tray-bullet" }),
+                        /* @__PURE__ */ jsx(
+                          NavLink,
+                          {
+                            href: "/",
+                            className: "navigation-tray-link-small",
+                            children: "FAQs"
+                          }
+                        )
+                      ] }) })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "navigation-tray-column", children: [
+                    /* @__PURE__ */ jsx("h3", { className: "navigation-tray-column-title", children: "Resources" }),
+                    /* @__PURE__ */ jsxs("ul", { className: "navigation-tray-column-list", children: [
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "Resource library" }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "navigation-tray-bullet-item", children: [
+                        /* @__PURE__ */ jsx("div", { className: "navigation-tray-bullet" }),
+                        /* @__PURE__ */ jsx(
+                          NavLink,
+                          {
+                            href: "/",
+                            className: "navigation-tray-link-small",
+                            children: "Technical tools"
+                          }
+                        )
+                      ] }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "navigation-tray-bullet-item", children: [
+                        /* @__PURE__ */ jsx("div", { className: "navigation-tray-bullet" }),
+                        /* @__PURE__ */ jsx(
+                          NavLink,
+                          {
+                            href: "/",
+                            className: "navigation-tray-link-small",
+                            children: "Sales tools"
+                          }
+                        )
+                      ] }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "navigation-tray-bullet-item", children: [
+                        /* @__PURE__ */ jsx("div", { className: "navigation-tray-bullet" }),
+                        /* @__PURE__ */ jsx(
+                          NavLink,
+                          {
+                            href: "/",
+                            className: "navigation-tray-link-small",
+                            children: "Media"
+                          }
+                        )
+                      ] }) })
+                    ] })
+                  ] })
+                ] })
+              ] }),
+              activeItem === 5 && /* @__PURE__ */ jsxs("div", { className: "navigation-tray-section", children: [
+                /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    className: "navigation-tray-heading",
+                    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: "navigation-tray-columns", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "navigation-tray-column", children: [
+                    /* @__PURE__ */ jsx("h3", { className: "navigation-tray-column-title", children: "About" }),
+                    /* @__PURE__ */ jsxs("ul", { className: "navigation-tray-column-list", children: [
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "IWBI" }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "Research" }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "Advocacy" }) })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "navigation-tray-column", children: [
+                    /* @__PURE__ */ jsx("h3", { className: "navigation-tray-column-title", children: "Meet" }),
+                    /* @__PURE__ */ jsxs("ul", { className: "navigation-tray-column-list", children: [
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "Team" }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "Advisories" }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "Governance Council" }) })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "navigation-tray-column", children: [
+                    /* @__PURE__ */ jsx("h3", { className: "navigation-tray-column-title", children: "Explore" }),
+                    /* @__PURE__ */ jsxs("ul", { className: "navigation-tray-column-list", children: [
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "Newsroom" }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", children: "Jobs" }) }),
+                      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: "/", className: "navigation-tray-link", 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("dialog-overlay", 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("dialog-content", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx("div", { className: "p-6 bg-gray-50", children }),
+          /* @__PURE__ */ jsx("div", { className: "dialog-content-inner", 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",
+              className: "dialog-close",
               children: [
                 /* @__PURE__ */ jsx(XIcon, {}),
                 /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
@@ -3195,7 +2737,7 @@ function DialogHeader({ className, ...props }) {
     "div",
     {
       "data-slot": "dialog-header",
-      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      className: cn("dialog-header", className),
       ...props
     }
   );
@@ -3205,10 +2747,7 @@ function DialogFooter({ className, ...props }) {
     "div",
     {
       "data-slot": "dialog-footer",
-      className: cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      ),
+      className: cn("dialog-footer", className),
       ...props
     }
   );
@@ -3221,7 +2760,7 @@ function DialogTitle({
     SheetPrimitive.Title,
     {
       "data-slot": "dialog-title",
-      className: cn("heading-xxsmall ", className),
+      className: cn("dialog-title heading-xxsmall", className),
       ...props
     }
   );
@@ -3234,77 +2773,44 @@ function DialogDescription({
     SheetPrimitive.Description,
     {
       "data-slot": "dialog-description",
-      className: cn("text-muted-foreground text-sm", className),
+      className: cn("dialog-description", 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
-  }
-));
+const Command = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command$1, { ref, className: cn("command", 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 }) }) });
+  return /* @__PURE__ */ jsx(Dialog, { ...props, children: /* @__PURE__ */ jsx(DialogContent, { className: "command-dialog-content", children: /* @__PURE__ */ jsx(Command, { 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
-        }
-      )
-    ]
-  }
-));
+const CommandInput = React.forwardRef(({ className, icon: Icon = Search, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: cn("command-input-wrapper", className), "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ jsx(Icon, { className: "icon-4 icon-shrink-0" }),
+  /* @__PURE__ */ jsx(
+    Command$1.Input,
+    {
+      ref,
+      className: cn("command-input", 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
-    ),
+    className: cn("command-list", 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
-  }
-));
+const CommandEmpty = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, { ref, className: "command-empty", ...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
-    ),
+    className: cn("command-group", className),
     ...props
   }
 ));
@@ -3313,7 +2819,7 @@ const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => /* @
   Command$1.Separator,
   {
     ref,
-    className: cn("-mx-1 h-px bg-border", className),
+    className: cn("command-separator", className),
     ...props
   }
 ));
@@ -3322,10 +2828,7 @@ const CommandItem = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   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
-    ),
+    className: cn("command-item", className),
     ...props
   }
 ));
@@ -3334,16 +2837,7 @@ const CommandShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      ),
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx("span", { className: cn("command-shortcut", className), ...props });
 };
 CommandShortcut.displayName = "CommandShortcut";
 const SearchField = ({
@@ -3411,19 +2905,16 @@ const SearchField = ({
         placeholder,
         disabled,
         className: cn(
-          "focus-within:border-cyan-300 focus:border-cyan-300",
-          isOpen && "rounded-b-none"
+          "search-field-input--focused",
+          isOpen && "search-field-input--open"
         )
       }
     ) }),
     /* @__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: [
+        className: cn("search-field-dropdown", isOpen ? "block" : "hidden"),
+        children: /* @__PURE__ */ jsxs(CommandList, { className: "search-field-list", 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(
@@ -3436,93 +2927,40 @@ const SearchField = ({
                 },
                 onSelect: () => handleSelectOption(option),
                 children: [
-                  isSelected ? /* @__PURE__ */ jsx(Check, { className: "w-4" }) : null,
+                  isSelected ? /* @__PURE__ */ jsx(Check, { className: "icon-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
+          !isLoading ? /* @__PURE__ */ jsx(CommandEmpty, { className: "search-field-empty", 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 getStatusClass = (status, variant2 = "light") => {
+  return `tag tag--${variant2}-${status}`;
 };
 const Tag = React.forwardRef(
   ({
     children,
     active = false,
     status,
-    variant = "light",
+    variant: variant2 = "light",
     className,
     onClick,
     ...props
   }, ref) => {
     if (status) {
-      const statusColors = getStatusColors(status, variant);
+      const statusClass = getStatusClass(status, variant2);
       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
-          ),
+          className: cn(statusClass, className),
           ...props,
           children: /* @__PURE__ */ jsx("span", { className: "overline-medium", children })
         }
@@ -3534,11 +2972,8 @@ const Tag = React.forwardRef(
         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",
+          "tag-general",
+          active ? "tag-general--active" : "tag-general--inactive",
           className
         ),
         ...props,
@@ -3570,7 +3005,7 @@ const TabsRoot = React__default.forwardRef(({ className, ...props }, ref) => /*
   TabsPrimitive.Root,
   {
     ref,
-    className: cn("w-full", className),
+    className: cn("tabs", className),
     ...props
   }
 ));
@@ -3579,10 +3014,7 @@ const TabsList = React__default.forwardRef(({ className, ...props }, ref) => /*
   TabsPrimitive.List,
   {
     ref,
-    className: cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className
-    ),
+    className: cn("tabs-list", className),
     ...props
   }
 ));
@@ -3591,10 +3023,7 @@ const TabsTrigger = React__default.forwardRef(({ className, ...props }, ref) =>
   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
-    ),
+    className: cn("tabs-trigger", className),
     ...props
   }
 ));
@@ -3603,10 +3032,7 @@ const TabsContent = React__default.forwardRef(({ className, ...props }, ref) =>
   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
-    ),
+    className: cn("tabs-content", className),
     ...props
   }
 ));
@@ -3616,7 +3042,7 @@ const Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx(
   {
     role: "navigation",
     "aria-label": "pagination",
-    className: cn("mx-auto flex w-full justify-center", className),
+    className: cn("pagination", className),
     ...props
   }
 );
@@ -3625,7 +3051,7 @@ const PaginationContent = React.forwardRef(({ className, ...props }, ref) => /*
   "ul",
   {
     ref,
-    className: cn("flex flex-row items-center gap-1", className),
+    className: cn("pagination-content", className),
     ...props
   }
 ));
@@ -3660,10 +3086,10 @@ const PaginationPrevious = ({
   {
     "aria-label": "Go to previous page",
     size: "utility",
-    className: cn("gap-1 pl-2.5", className),
+    className: cn("pagination-previous", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx(ChevronLeft, { className: "icon-4" }),
       /* @__PURE__ */ jsx("span", { children: "Previous" })
     ]
   }
@@ -3677,11 +3103,11 @@ const PaginationNext = ({
   {
     "aria-label": "Go to next page",
     size: "utility",
-    className: cn("gap-1 pr-2.5", className),
+    className: cn("pagination-next", className),
     ...props,
     children: [
       /* @__PURE__ */ jsx("span", { children: "Next" }),
-      /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+      /* @__PURE__ */ jsx(ChevronRight, { className: "icon-4" })
     ]
   }
 );
@@ -3693,10 +3119,10 @@ const PaginationEllipsis = ({
   "span",
   {
     "aria-hidden": true,
-    className: cn("flex h-9 w-9 items-center justify-center", className),
+    className: cn("pagination-ellipsis", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx(MoreHorizontal, { className: "icon-4" }),
       /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
     ]
   }
@@ -3706,10 +3132,7 @@ const NavigationMenu = React.forwardRef(({ className, children, ...props }, ref)
   NavigationMenuPrimitive.Root,
   {
     ref,
-    className: cn(
-      "relative z-10 flex max-w-max flex-1 items-center justify-center",
-      className
-    ),
+    className: cn("navigation-menu", className),
     ...props,
     children: [
       children,
@@ -3722,23 +3145,18 @@ const NavigationMenuList = React.forwardRef(({ className, ...props }, ref) => /*
   NavigationMenuPrimitive.List,
   {
     ref,
-    className: cn(
-      "group flex flex-1 list-none items-center justify-center space-x-1",
-      className
-    ),
+    className: cn("navigation-menu-list", className),
     ...props
   }
 ));
 NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
-const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-active:bg-accent/50 data-[state=open]:bg-accent/50"
-);
+const navigationMenuTriggerStyle = cva("navigation-menu-trigger");
 const NavigationMenuTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   NavigationMenuPrimitive.Trigger,
   {
     ref,
-    className: cn(navigationMenuTriggerStyle(), "group", className),
+    className: cn(navigationMenuTriggerStyle(), className),
     ...props,
     children: [
       children,
@@ -3746,7 +3164,7 @@ const NavigationMenuTrigger = React.forwardRef(({ className, children, ...props
       /* @__PURE__ */ jsx(
         ChevronDown,
         {
-          className: "relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180",
+          className: "navigation-menu-trigger-icon",
           "aria-hidden": "true"
         }
       )
@@ -3758,22 +3176,16 @@ const NavigationMenuContent = React.forwardRef(({ className, ...props }, ref) =>
   NavigationMenuPrimitive.Content,
   {
     ref,
-    className: cn(
-      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
-      className
-    ),
+    className: cn("navigation-menu-content", className),
     ...props
   }
 ));
 NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 const NavigationMenuLink = NavigationMenuPrimitive.Link;
-const NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ jsx(
+const NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "navigation-menu-viewport-wrapper", children: /* @__PURE__ */ jsx(
   NavigationMenuPrimitive.Viewport,
   {
-    className: cn(
-      "origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-(--radix-navigation-menu-viewport-width)",
-      className
-    ),
+    className: cn("navigation-menu-viewport", className),
     ref,
     ...props
   }
@@ -3783,12 +3195,8 @@ const NavigationMenuIndicator = React.forwardRef(({ className, ...props }, ref)
   NavigationMenuPrimitive.Indicator,
   {
     ref,
-    className: cn(
-      "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" })
+    className: cn("navigation-menu-indicator", className),
+    ...props
   }
 ));
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
@@ -3799,10 +3207,7 @@ const Menubar = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   MenubarPrimitive.Root,
   {
     ref,
-    className: cn(
-      "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
-      className
-    ),
+    className: cn("menubar", className),
     ...props
   }
 ));
@@ -3811,10 +3216,7 @@ const MenubarTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__
   MenubarPrimitive.Trigger,
   {
     ref,
-    className: cn(
-      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      className
-    ),
+    className: cn("menubar-trigger", className),
     ...props
   }
 ));
@@ -3824,14 +3226,14 @@ const MenubarSubTrigger = React.forwardRef(({ className, inset, children, ...pro
   {
     ref,
     className: cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
+      "menubar-sub-trigger",
+      inset && "menubar-sub-trigger--inset",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
+      /* @__PURE__ */ jsx(ChevronRight, { className: "icon-4" })
     ]
   }
 ));
@@ -3840,10 +3242,7 @@ const MenubarSubContent = React.forwardRef(({ className, ...props }, ref) => /*
   MenubarPrimitive.SubContent,
   {
     ref,
-    className: cn(
-      "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    ),
+    className: cn("menubar-sub-content", className),
     ...props
   }
 ));
@@ -3856,10 +3255,7 @@ const MenubarContent = React.forwardRef(
       align,
       alignOffset,
       sideOffset,
-      className: cn(
-        "z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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
-      ),
+      className: cn("menubar-content", className),
       ...props
     }
   ) })
@@ -3870,8 +3266,8 @@ const MenubarItem = React.forwardRef(({ className, inset, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      inset && "pl-8",
+      "menubar-item",
+      inset && "menubar-item--inset",
       className
     ),
     ...props
@@ -3882,14 +3278,11 @@ const MenubarCheckboxItem = React.forwardRef(({ className, children, checked, ..
   MenubarPrimitive.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 focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    ),
+    className: cn("menubar-checkbox-item", 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(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "menubar-item-indicator", children: /* @__PURE__ */ jsx(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "icon-4" }) }) }),
       children
     ]
   }
@@ -3899,13 +3292,10 @@ const MenubarRadioItem = React.forwardRef(({ className, children, ...props }, re
   MenubarPrimitive.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 focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    ),
+    className: cn("menubar-radio-item", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "menubar-item-indicator", children: /* @__PURE__ */ jsx(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "icon-2 fill-current" }) }) }),
       children
     ]
   }
@@ -3916,8 +3306,8 @@ const MenubarLabel = React.forwardRef(({ className, inset, ...props }, ref) => /
   {
     ref,
     className: cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
+      "menubar-label",
+      inset && "menubar-label--inset",
       className
     ),
     ...props
@@ -3928,7 +3318,7 @@ const MenubarSeparator = React.forwardRef(({ className, ...props }, ref) => /* @
   MenubarPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    className: cn("menubar-separator", className),
     ...props
   }
 ));
@@ -3940,10 +3330,7 @@ const MenubarShortcut = ({
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      ),
+      className: cn("menubar-shortcut", className),
       ...props
     }
   );
@@ -3960,14 +3347,14 @@ const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, .
   {
     ref,
     className: cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent",
-      inset && "pl-8",
+      "dropdown-menu-sub-trigger",
+      inset && "dropdown-menu-sub-trigger--inset",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
+      /* @__PURE__ */ jsx(ChevronRight, { className: "dropdown-menu-sub-trigger-icon icon-4" })
     ]
   }
 ));
@@ -3976,10 +3363,7 @@ const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) =
   DropdownMenuPrimitive.SubContent,
   {
     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
-    ),
+    className: cn("dropdown-menu-sub-content", className),
     ...props
   }
 ));
@@ -3989,10 +3373,7 @@ const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...pr
   {
     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
-    ),
+    className: cn("dropdown-menu-content", className),
     ...props
   }
 ) }));
@@ -4002,8 +3383,8 @@ const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref)
   {
     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",
+      "dropdown-menu-item",
+      inset && "dropdown-menu-item--inset",
       className
     ),
     ...props
@@ -4014,14 +3395,11 @@ const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checke
   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
-    ),
+    className: cn("dropdown-menu-checkbox-item", 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" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "dropdown-menu-item-indicator", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "icon-4" }) }) }),
       children
     ]
   }
@@ -4031,13 +3409,10 @@ const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props
   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
-    ),
+    className: cn("dropdown-menu-radio-item", 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" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "dropdown-menu-item-indicator", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "icon-2 fill-current" }) }) }),
       children
     ]
   }
@@ -4048,8 +3423,8 @@ const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref)
   {
     ref,
     className: cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
+      "dropdown-menu-label",
+      inset && "dropdown-menu-label--inset",
       className
     ),
     ...props
@@ -4060,7 +3435,7 @@ const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) =>
   DropdownMenuPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    className: cn("dropdown-menu-separator", className),
     ...props
   }
 ));
@@ -4072,7 +3447,7 @@ const DropdownMenuShortcut = ({
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+      className: cn("dropdown-menu-shortcut", className),
       ...props
     }
   );
@@ -4096,7 +3471,7 @@ const DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__P
   Drawer$1.Overlay,
   {
     ref,
-    className: cn("fixed inset-0 z-50 bg-black/80", className),
+    className: cn("drawer-overlay", className),
     ...props
   }
 ));
@@ -4107,13 +3482,10 @@ const DrawerContent = React.forwardRef(({ className, children, ...props }, ref)
     Drawer$1.Content,
     {
       ref,
-      className: cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-        className
-      ),
+      className: cn("drawer-content", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" }),
+        /* @__PURE__ */ jsx("div", { className: "drawer-handle" }),
         children
       ]
     }
@@ -4126,7 +3498,7 @@ const DrawerHeader = ({
 }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: cn("grid gap-1.5 p-4 text-center sm:text-left", className),
+    className: cn("drawer-header", className),
     ...props
   }
 );
@@ -4137,7 +3509,7 @@ const DrawerFooter = ({
 }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: cn("mt-auto flex flex-col gap-2 p-4", className),
+    className: cn("drawer-footer", className),
     ...props
   }
 );
@@ -4146,10 +3518,7 @@ const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   Drawer$1.Title,
   {
     ref,
-    className: cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    ),
+    className: cn("drawer-title", className),
     ...props
   }
 ));
@@ -4158,7 +3527,7 @@ const DrawerDescription = React.forwardRef(({ className, ...props }, ref) => /*
   Drawer$1.Description,
   {
     ref,
-    className: cn("text-sm text-muted-foreground", className),
+    className: cn("drawer-description", className),
     ...props
   }
 ));
@@ -4171,10 +3540,7 @@ const PopoverContent = React.forwardRef(({ className, align = "center", sideOffs
     ref,
     align,
     sideOffset,
-    className: cn(
-      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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
-    ),
+    className: cn("popover-content", className),
     ...props
   }
 ) }));
@@ -4187,10 +3553,7 @@ const HoverCardContent = React.forwardRef(({ className, align = "center", sideOf
     ref,
     align,
     sideOffset,
-    className: cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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
-    ),
+    className: cn("hover-card-content", className),
     ...props
   }
 ));
@@ -4206,14 +3569,14 @@ const ContextMenuSubTrigger = React.forwardRef(({ className, inset, children, ..
   {
     ref,
     className: cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
+      "context-menu-sub-trigger",
+      inset && "context-menu-sub-trigger--inset",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
+      /* @__PURE__ */ jsx(ChevronRight, { className: "icon-4" })
     ]
   }
 ));
@@ -4222,10 +3585,7 @@ const ContextMenuSubContent = React.forwardRef(({ className, ...props }, ref) =>
   ContextMenuPrimitive.SubContent,
   {
     ref,
-    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
-    ),
+    className: cn("context-menu-sub-content", className),
     ...props
   }
 ));
@@ -4234,10 +3594,7 @@ const ContextMenuContent = React.forwardRef(({ className, ...props }, ref) => /*
   ContextMenuPrimitive.Content,
   {
     ref,
-    className: cn(
-      "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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
-    ),
+    className: cn("context-menu-content", className),
     ...props
   }
 ) }));
@@ -4247,8 +3604,8 @@ const ContextMenuItem = React.forwardRef(({ className, inset, ...props }, ref) =
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      inset && "pl-8",
+      "context-menu-item",
+      inset && "context-menu-item--inset",
       className
     ),
     ...props
@@ -4259,14 +3616,11 @@ const ContextMenuCheckboxItem = React.forwardRef(({ className, children, checked
   ContextMenuPrimitive.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 focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    ),
+    className: cn("context-menu-checkbox-item", 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(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "context-menu-item-indicator", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "icon-4" }) }) }),
       children
     ]
   }
@@ -4276,13 +3630,10 @@ const ContextMenuRadioItem = React.forwardRef(({ className, children, ...props }
   ContextMenuPrimitive.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 focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    ),
+    className: cn("context-menu-radio-item", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "context-menu-item-indicator", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "icon-2 fill-current" }) }) }),
       children
     ]
   }
@@ -4293,8 +3644,8 @@ const ContextMenuLabel = React.forwardRef(({ className, inset, ...props }, ref)
   {
     ref,
     className: cn(
-      "px-2 py-1.5 text-sm font-semibold text-foreground",
-      inset && "pl-8",
+      "context-menu-label",
+      inset && "context-menu-label--inset",
       className
     ),
     ...props
@@ -4305,7 +3656,7 @@ const ContextMenuSeparator = React.forwardRef(({ className, ...props }, ref) =>
   ContextMenuPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-border", className),
+    className: cn("context-menu-separator", className),
     ...props
   }
 ));
@@ -4317,10 +3668,7 @@ const ContextMenuShortcut = ({
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      ),
+      className: cn("context-menu-shortcut", className),
       ...props
     }
   );
@@ -4413,7 +3761,7 @@ const Carousel = React.forwardRef(
           {
             ref,
             onKeyDownCapture: handleKeyDown,
-            className: cn("relative", className),
+            className: cn("carousel", className),
             role: "region",
             "aria-roledescription": "carousel",
             ...props,
@@ -4427,13 +3775,13 @@ const Carousel = React.forwardRef(
 Carousel.displayName = "Carousel";
 const CarouselContent = React.forwardRef(({ className, ...props }, ref) => {
   const { carouselRef, orientation } = useCarousel();
-  return /* @__PURE__ */ jsx("div", { ref: carouselRef, className: "overflow-hidden", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { ref: carouselRef, className: "carousel-viewport", children: /* @__PURE__ */ jsx(
     "div",
     {
       ref,
       className: cn(
-        "flex",
-        orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+        "carousel-content",
+        orientation === "horizontal" ? "carousel-content--horizontal" : "carousel-content--vertical",
         className
       ),
       ...props
@@ -4450,8 +3798,8 @@ const CarouselItem = React.forwardRef(({ className, ...props }, ref) => {
       role: "group",
       "aria-roledescription": "slide",
       className: cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
+        "carousel-item",
+        orientation === "horizontal" ? "carousel-item--horizontal" : "carousel-item--vertical",
         className
       ),
       ...props
@@ -4460,24 +3808,24 @@ const CarouselItem = React.forwardRef(({ className, ...props }, ref) => {
 });
 CarouselItem.displayName = "CarouselItem";
 const CarouselPrevious = React.forwardRef(
-  ({ className, variant = "general-secondary", size = "icon", ...props }, ref) => {
+  ({ className, variant: variant2 = "general-secondary", size = "icon", ...props }, ref) => {
     const { orientation, scrollPrev, canScrollPrev } = useCarousel();
     return /* @__PURE__ */ jsxs(
       Button,
       {
         ref,
-        variant,
+        variant: variant2,
         size,
         className: cn(
-          "absolute  h-8 w-8 rounded-full",
-          orientation === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          "carousel-button carousel-button--previous",
+          orientation === "horizontal" ? "carousel-button--horizontal" : "carousel-button--vertical",
           className
         ),
         disabled: !canScrollPrev,
         onClick: scrollPrev,
         ...props,
         children: [
-          /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(ArrowLeft, { className: "icon-4" }),
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous slide" })
         ]
       }
@@ -4486,24 +3834,24 @@ const CarouselPrevious = React.forwardRef(
 );
 CarouselPrevious.displayName = "CarouselPrevious";
 const CarouselNext = React.forwardRef(
-  ({ className, variant = "general-secondary", size = "icon", ...props }, ref) => {
+  ({ className, variant: variant2 = "general-secondary", size = "icon", ...props }, ref) => {
     const { orientation, scrollNext, canScrollNext } = useCarousel();
     return /* @__PURE__ */ jsxs(
       Button,
       {
         ref,
-        variant,
+        variant: variant2,
         size,
         className: cn(
-          "absolute h-8 w-8 rounded-full",
-          orientation === "horizontal" ? "-right-12 top-1/2 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          "carousel-button carousel-button--next",
+          orientation === "horizontal" ? "carousel-button--horizontal" : "carousel-button--vertical",
           className
         ),
         disabled: !canScrollNext,
         onClick: scrollNext,
         ...props,
         children: [
-          /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(ArrowRight, { className: "icon-4" }),
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next slide" })
         ]
       }
@@ -4519,21 +3867,18 @@ const ToastViewport = React.forwardRef(({ className, ...props }, ref) => /* @__P
   ToastPrimitives.Viewport,
   {
     ref,
-    className: cn(
-      "fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
-    ),
+    className: cn("toast-viewport", className),
     ...props
   }
 ));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full",
+  "toast",
   {
     variants: {
       variant: {
-        default: "border bg-background text-foreground",
-        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground"
+        default: "toast--default",
+        destructive: "toast--destructive"
       }
     },
     defaultVariants: {
@@ -4541,12 +3886,12 @@ const toastVariants = cva(
     }
   }
 );
-const Toast = React.forwardRef(({ className, variant, ...props }, ref) => {
+const Toast = React.forwardRef(({ className, variant: variant2, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     ToastPrimitives.Root,
     {
       ref,
-      className: cn(toastVariants({ variant }), className),
+      className: cn(toastVariants({ variant: variant2 }), className),
       ...props
     }
   );
@@ -4556,10 +3901,7 @@ const ToastAction = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   ToastPrimitives.Action,
   {
     ref,
-    className: cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground focus:group-[.destructive]:ring-destructive",
-      className
-    ),
+    className: cn("toast-action", className),
     ...props
   }
 ));
@@ -4568,13 +3910,10 @@ const ToastClose = React.forwardRef(({ className, ...props }, ref) => /* @__PURE
   ToastPrimitives.Close,
   {
     ref,
-    className: cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-50 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600",
-      className
-    ),
+    className: cn("toast-close", className),
     "toast-close": "",
     ...props,
-    children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ jsx(X, { className: "icon-4" })
   }
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
@@ -4582,7 +3921,7 @@ const ToastTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE
   ToastPrimitives.Title,
   {
     ref,
-    className: cn("text-sm font-semibold", className),
+    className: cn("toast-title", className),
     ...props
   }
 ));
@@ -4591,7 +3930,7 @@ const ToastDescription = React.forwardRef(({ className, ...props }, ref) => /* @
   ToastPrimitives.Description,
   {
     ref,
-    className: cn("text-sm opacity-90", className),
+    className: cn("toast-description", className),
     ...props
   }
 ));
@@ -4617,17 +3956,17 @@ const addToRemoveQueue = (toastId) => {
   }, TOAST_REMOVE_DELAY);
   toastTimeouts.set(toastId, timeout);
 };
-const reducer = (state, action) => {
+const reducer = (state2, action) => {
   switch (action.type) {
     case "ADD_TOAST":
       return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
+        ...state2,
+        toasts: [action.toast, ...state2.toasts].slice(0, TOAST_LIMIT)
       };
     case "UPDATE_TOAST":
       return {
-        ...state,
-        toasts: state.toasts.map(
+        ...state2,
+        toasts: state2.toasts.map(
           (t) => t.id === action.toast.id ? { ...t, ...action.toast } : t
         )
       };
@@ -4636,13 +3975,13 @@ const reducer = (state, action) => {
       if (toastId) {
         addToRemoveQueue(toastId);
       } else {
-        state.toasts.forEach((toast2) => {
+        state2.toasts.forEach((toast2) => {
           addToRemoveQueue(toast2.id);
         });
       }
       return {
-        ...state,
-        toasts: state.toasts.map(
+        ...state2,
+        toasts: state2.toasts.map(
           (t) => t.id === toastId || toastId === void 0 ? {
             ...t,
             open: false
@@ -4653,13 +3992,13 @@ const reducer = (state, action) => {
     case "REMOVE_TOAST":
       if (action.toastId === void 0) {
         return {
-          ...state,
+          ...state2,
           toasts: []
         };
       }
       return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId)
+        ...state2,
+        toasts: state2.toasts.filter((t) => t.id !== action.toastId)
       };
   }
 };
@@ -4696,7 +4035,7 @@ function toast({ ...props }) {
   };
 }
 function useToast() {
-  const [state, setState] = React.useState(memoryState);
+  const [state2, setState] = React.useState(memoryState);
   React.useEffect(() => {
     listeners.push(setState);
     return () => {
@@ -4705,9 +4044,9 @@ function useToast() {
         listeners.splice(index, 1);
       }
     };
-  }, [state]);
+  }, [state2]);
   return {
-    ...state,
+    ...state2,
     toast,
     dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId })
   };
@@ -4717,7 +4056,7 @@ function Toaster$1() {
   return /* @__PURE__ */ jsxs(ToastProvider, { children: [
     toasts.map(function({ id, title, description, action, ...props }) {
       return /* @__PURE__ */ jsxs(Toast, { ...props, children: [
-        /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "toast-content", children: [
           title && /* @__PURE__ */ jsx(ToastTitle, { children: title }),
           description && /* @__PURE__ */ jsx(ToastDescription, { children: description })
         ] }),
@@ -4746,7 +4085,7 @@ const ChartContainer = React.forwardRef(({ id, className, children, config, ...p
       "data-chart": chartId,
       ref,
       className: cn(
-        "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden",
+        "chart-container",
         className
       ),
       ...props,
@@ -4812,12 +4151,12 @@ const ChartTooltipContent = React.forwardRef(
       const itemConfig = getPayloadConfigFromPayload(config, item, key);
       const value = !labelKey && typeof label === "string" ? ((_a = config[label]) == null ? void 0 : _a.label) || label : itemConfig == null ? void 0 : itemConfig.label;
       if (labelFormatter) {
-        return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+        return /* @__PURE__ */ jsx("div", { className: cn("chart-tooltip-label", labelClassName), children: labelFormatter(value, payload) });
       }
       if (!value) {
         return null;
       }
-      return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: value });
+      return /* @__PURE__ */ jsx("div", { className: cn("chart-tooltip-label", labelClassName), children: value });
     }, [
       label,
       labelFormatter,
@@ -4836,12 +4175,12 @@ const ChartTooltipContent = React.forwardRef(
       {
         ref,
         className: cn(
-          "grid min-w-32 items-start gap-1.5 rounded-lg border  bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          "chart-tooltip",
           className
         ),
         children: [
           !nestLabel ? tooltipLabel : null,
-          /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children: payload.map((item, index) => {
+          /* @__PURE__ */ jsx("div", { className: "chart-tooltip-content", children: payload.map((item, index) => {
             const key = `${nameKey || item.name || item.dataKey || "value"}`;
             const itemConfig = getPayloadConfigFromPayload(config, item, key);
             const indicatorColor = color || item.payload.fill || item.color;
@@ -4849,20 +4188,20 @@ const ChartTooltipContent = React.forwardRef(
               "div",
               {
                 className: cn(
-                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
-                  indicator === "dot" && "items-center"
+                  "chart-tooltip-item",
+                  indicator === "dot" && "chart-tooltip-item--dot"
                 ),
                 children: formatter && (item == null ? void 0 : item.value) !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [
                   (itemConfig == null ? void 0 : itemConfig.icon) ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx(
                     "div",
                     {
                       className: cn(
-                        "shrink-0 rounded-[2px] border-border bg-(--color-bg)",
+                        "chart-tooltip-indicator",
                         {
-                          "h-2.5 w-2.5": indicator === "dot",
-                          "w-1": indicator === "line",
-                          "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
-                          "my-0.5": nestLabel && indicator === "dashed"
+                          "chart-tooltip-indicator--dot": indicator === "dot",
+                          "chart-tooltip-indicator--line": indicator === "line",
+                          "chart-tooltip-indicator--dashed": indicator === "dashed",
+                          "chart-tooltip-indicator--dashed-nested": nestLabel && indicator === "dashed"
                         }
                       ),
                       style: {
@@ -4875,15 +4214,15 @@ const ChartTooltipContent = React.forwardRef(
                     "div",
                     {
                       className: cn(
-                        "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center"
+                        "chart-tooltip-item-content",
+                        nestLabel ? "chart-tooltip-item-content--nested" : ""
                       ),
                       children: [
-                        /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
+                        /* @__PURE__ */ jsxs("div", { className: "chart-tooltip-item-details", children: [
                           nestLabel ? tooltipLabel : null,
-                          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: (itemConfig == null ? void 0 : itemConfig.label) || item.name })
+                          /* @__PURE__ */ jsx("span", { className: "chart-tooltip-item-label", children: (itemConfig == null ? void 0 : itemConfig.label) || item.name })
                         ] }),
-                        item.value && /* @__PURE__ */ jsx("span", { className: "font-mono font-medium tabular-nums text-foreground", children: item.value.toLocaleString() })
+                        item.value && /* @__PURE__ */ jsx("span", { className: "chart-tooltip-item-value", children: item.value.toLocaleString() })
                       ]
                     }
                   )
@@ -4910,8 +4249,8 @@ const ChartLegendContent = React.forwardRef(
       {
         ref,
         className: cn(
-          "flex items-center justify-center gap-4",
-          verticalAlign === "top" ? "pb-3" : "pt-3",
+          "chart-legend",
+          verticalAlign === "top" ? "chart-legend--top" : "chart-legend--bottom",
           className
         ),
         children: payload.map((item) => {
@@ -4920,14 +4259,12 @@ const ChartLegendContent = React.forwardRef(
           return /* @__PURE__ */ jsxs(
             "div",
             {
-              className: cn(
-                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
-              ),
+              className: "chart-legend-item",
               children: [
                 (itemConfig == null ? void 0 : itemConfig.icon) && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: "h-2 w-2 shrink-0 rounded-[2px]",
+                    className: "chart-legend-indicator",
                     style: {
                       backgroundColor: item.color
                     }
@@ -4957,305 +4294,19 @@ function getPayloadConfigFromPayload(config, payload, key) {
   }
   return configLabelKey in config ? config[configLabelKey] : config[key];
 }
-const defaultCertifications = [
-  { name: "Platinum", locations: 1, color: "#A8A7AE", icon: "platinum" },
-  { name: "Gold", locations: 1, color: "#D7C686", icon: "gold" },
-  { name: "Silver", locations: 1, color: "#C0C2C4", icon: "silver" },
-  { name: "Bronze", locations: 1, color: "#D1A778", icon: "bronze" },
-  {
-    name: "Precertified",
-    locations: 1,
-    color: "#44B0BC",
-    icon: "precertified"
-  }
-];
-const defaultRatings = [
-  {
-    name: "Health-Safety",
-    locations: 1,
-    color: "#7FB3DC",
-    percentage: 50,
-    icon: "health"
-  },
-  {
-    name: "Equity",
-    locations: 1,
-    color: "#41937D",
-    percentage: 67,
-    icon: "equity"
-  },
-  {
-    name: "Performance",
-    locations: "Not Pursued",
-    color: "#0B667F",
-    percentage: 2,
-    icon: "performance",
-    inactive: true
-  },
-  {
-    name: "Coworking",
-    locations: "Not Pursued",
-    color: "#AD7DA3",
-    percentage: 2,
-    icon: "coworking",
-    inactive: true
-  }
-];
-const WELLDashboard = React.forwardRef(
-  ({
-    certifiedPercentage = 60,
-    certifications = defaultCertifications,
-    ratings = defaultRatings,
-    className
-  }, ref) => {
-    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-4", className), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row gap-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 rounded-md border border-[#DEDEE5] bg-white/0 p-4 shadow-xs", children: [
-          /* @__PURE__ */ jsx(
-            "h2",
-            {
-              className: "text-xl font-medium text-[#3D3E46] text-center mb-6",
-              style: { fontFamily: "'DM Sans', sans-serif" },
-              children: "WELL Certified Locations"
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row justify-center items-center gap-10", children: [
-            /* @__PURE__ */ jsxs("div", { className: "relative w-60 h-60 shrink-0", children: [
-              /* @__PURE__ */ jsxs(
-                "svg",
-                {
-                  width: "240",
-                  height: "240",
-                  viewBox: "0 0 240 240",
-                  className: "transform -rotate-90",
-                  children: [
-                    /* @__PURE__ */ jsx("circle", { cx: "120", cy: "120", r: "120", fill: "#F5F9FB" }),
-                    /* @__PURE__ */ jsx(
-                      "circle",
-                      {
-                        cx: "120",
-                        cy: "120",
-                        r: "100",
-                        fill: "none",
-                        stroke: "#327DB9",
-                        strokeWidth: "20",
-                        strokeDasharray: `${certifiedPercentage / 100 * 628} 628`,
-                        strokeLinecap: "round"
-                      }
-                    ),
-                    certifications.map((cert, index) => {
-                      const totalSegments = certifications.length;
-                      const segmentAngle = certifiedPercentage / 100 * 360 / totalSegments;
-                      const startAngle = index * segmentAngle;
-                      const arcLength = segmentAngle * Math.PI * 100 / 180;
-                      const offset = startAngle * Math.PI * 100 / 180;
-                      return /* @__PURE__ */ jsx(
-                        "circle",
-                        {
-                          cx: "120",
-                          cy: "120",
-                          r: "100",
-                          fill: "none",
-                          stroke: cert.color,
-                          strokeWidth: "20",
-                          strokeDasharray: `${arcLength} 628`,
-                          strokeDashoffset: -offset,
-                          opacity: "0.7"
-                        },
-                        cert.name
-                      );
-                    }),
-                    /* @__PURE__ */ jsx(
-                      "circle",
-                      {
-                        cx: "120",
-                        cy: "120",
-                        r: "80",
-                        fill: "white",
-                        filter: "drop-shadow(0 0 16px rgba(0,0,0,0.04))"
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: [
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: "text-5xl font-medium text-[#327DB9]",
-                    style: { fontFamily: "'DM Sans', sans-serif" },
-                    children: [
-                      certifiedPercentage,
-                      "%"
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "text-sm font-medium text-[#78777F] mt-1",
-                    style: { fontFamily: "'DM Sans', sans-serif" },
-                    children: "Certified"
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 min-w-[160px]", children: certifications.map((cert) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "w-10 h-10 rounded-full shrink-0 flex items-center justify-center",
-                  style: { backgroundColor: cert.color },
-                  children: cert.icon === "precertified" && /* @__PURE__ */ jsx("div", { className: "w-9 h-6 bg-[#44B0BC] rounded-sm flex items-center justify-center text-white text-[10px] font-bold", children: "WELL" })
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1", children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "text-base font-medium text-[#3D3E46]",
-                    style: { fontFamily: "'DM Sans', sans-serif" },
-                    children: cert.name
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                  /* @__PURE__ */ jsx(
-                    Building2,
-                    {
-                      size: 16,
-                      className: "text-[#327DB9]",
-                      strokeWidth: 1.2
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(
-                    "span",
-                    {
-                      className: "text-xs font-medium text-[#327DB9]",
-                      style: { fontFamily: "'DM Sans', sans-serif" },
-                      children: [
-                        cert.locations,
-                        " Location",
-                        cert.locations !== 1 ? "s" : ""
-                      ]
-                    }
-                  )
-                ] })
-              ] })
-            ] }, cert.name)) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 rounded-md border border-[#DEDEE5] bg-white/0 p-4 shadow-xs", children: [
-          /* @__PURE__ */ jsx(
-            "h2",
-            {
-              className: "text-xl font-medium text-[#3D3E46] text-center mb-6",
-              style: { fontFamily: "'DM Sans', sans-serif" },
-              children: "WELL Rated Locations"
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row justify-center items-center gap-10", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-4 h-60 px-4", children: [
-              ratings.map((rating) => /* @__PURE__ */ jsxs("div", { className: "w-10 h-60 relative", children: [
-                /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-t border border-[#DEDEE5] bg-[#F5F9FB]" }),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "absolute bottom-0 left-0 right-0 rounded-t transition-all",
-                    style: {
-                      backgroundColor: rating.color,
-                      height: `${rating.percentage}%`
-                    }
-                  }
-                )
-              ] }, rating.name)),
-              /* @__PURE__ */ jsx("div", { className: "w-px h-60 bg-[#DEDEE5]" })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 min-w-[160px]", children: ratings.map((rating) => /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: cn(
-                  "flex items-center gap-2",
-                  rating.inactive && "opacity-50"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: "w-10 h-10 rounded-full shrink-0 flex items-center justify-center",
-                      style: { backgroundColor: rating.color }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1", children: [
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: "text-base font-medium text-[#3D3E46]",
-                        style: { fontFamily: "'DM Sans', sans-serif" },
-                        children: rating.name
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                      /* @__PURE__ */ jsx(
-                        Building2,
-                        {
-                          size: 16,
-                          className: rating.inactive ? "text-[#78777F]" : "text-[#327DB9]",
-                          strokeWidth: 1.2
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: cn(
-                            "text-xs font-medium",
-                            rating.inactive ? "text-[#78777F]" : "text-[#327DB9]"
-                          ),
-                          style: { fontFamily: "'DM Sans', sans-serif" },
-                          children: typeof rating.locations === "number" ? `${rating.locations} Location${rating.locations !== 1 ? "s" : ""}` : rating.locations
-                        }
-                      )
-                    ] })
-                  ] })
-                ]
-              },
-              rating.name
-            )) })
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs(
-        "p",
-        {
-          className: "text-[10px] leading-3 font-medium text-[#78777F] text-center",
-          style: { fontFamily: "'DM Sans', sans-serif" },
-          children: [
-            "Achievement metrics reflect all active program achievements, as of",
-            " ",
-            (/* @__PURE__ */ new Date()).toLocaleDateString("en-US", {
-              month: "long",
-              day: "numeric",
-              year: "numeric"
-            })
-          ]
-        }
-      )
-    ] });
-  }
-);
-WELLDashboard.displayName = "WELLDashboard";
 const Toaster = ({ ...props }) => {
   const { theme = "system" } = useTheme();
   return /* @__PURE__ */ jsx(
     Toaster$2,
     {
       theme,
-      className: "toaster group",
+      className: "toaster",
       toastOptions: {
         classNames: {
-          toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster] group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground"
+          toast: "toast",
+          description: "toast-description",
+          actionButton: "toast-action",
+          cancelButton: "toast-cancel"
         }
       },
       ...props
@@ -5490,7 +4541,6 @@ export {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-  WELLDashboard,
   badgeVariants,
   buttonVariants,
   cn,