@syscore/ui-library 1.20.0 → 1.22.0

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { useState, useCallback, useEffect, useRef, createContext, useMemo, useLayoutEffect, useContext } from "react";
+import { useState, useEffect, useCallback, useRef, createContext, Children, isValidElement, cloneElement, useLayoutEffect, useContext, useMemo } from "react";
 import { motion, AnimatePresence, useMotionValue, animate } from "motion/react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -18,7 +18,6 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import * as SliderPrimitive from "@radix-ui/react-slider";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { OTPInput, OTPInputContext } from "input-otp";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { useFormContext, FormProvider, Controller } from "react-hook-form";
@@ -277,9 +276,9 @@ const Accordion = React.forwardRef(
   }
 );
 Accordion.displayName = "Accordion";
-const AccordionSectionHeader = React.forwardRef(({ title, hasExpanded, onToggleAll, className }, ref) => {
+const AccordionSectionHeader = React.forwardRef(({ title, hasExpanded, onToggleAll, className, titleClassName }, ref) => {
   return /* @__PURE__ */ jsxs("div", { ref, className: cn(className), children: [
-    /* @__PURE__ */ jsx("h2", { children: title }),
+    /* @__PURE__ */ jsx("h2", { className: cn(titleClassName), children: title }),
     onToggleAll && /* @__PURE__ */ jsx(
       motion.div,
       {
@@ -289,7 +288,6 @@ const AccordionSectionHeader = React.forwardRef(({ title, hasExpanded, onToggleA
           Button,
           {
             size: "icon",
-            variant: "clear",
             onClick: onToggleAll,
             "aria-label": hasExpanded ? "Collapse all" : "Expand all",
             children: /* @__PURE__ */ jsx(UtilityChevronDown, {})
@@ -887,7 +885,7 @@ const UtilityClose = ({ className }) => {
     "div",
     {
       className: cn(
-        "size-4 flex items-center justify-center text-gray-500 group-hover:text-gray-400",
+        "size-4 flex items-center justify-center text-gray-500 ",
         className
       ),
       children: /* @__PURE__ */ jsxs(
@@ -1085,7 +1083,7 @@ function TooltipContent({
             )
           }
         ) }),
-        variant2 !== "simple" && !hideClose && /* @__PURE__ */ jsx(ToggleClose, { className: "absolute top-4 right-4" }),
+        variant2 !== "simple" && !hideClose && /* @__PURE__ */ jsx(ToggleClose, {}),
         children
       ]
     }
@@ -1098,7 +1096,7 @@ function ToggleClose({ className }) {
     {
       "data-slot": "tooltip-close",
       onClick: close,
-      className: cn("group cursor-pointer", className),
+      className,
       children: /* @__PURE__ */ jsx(UtilityClose, {})
     }
   );
@@ -1752,172 +1750,6 @@ const Slider = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
-function useTabs({ tabs, initialTabId }) {
-  const initialIndex = tabs.findIndex((tab) => tab.value === initialTabId);
-  const [selectedTabIndex, setSelectedTabIndex] = useState(
-    initialIndex >= 0 ? initialIndex : 0
-  );
-  const setSelectedTab = useCallback(([index, direction]) => {
-    setSelectedTabIndex(index);
-  }, []);
-  const selectedTab = tabs[selectedTabIndex] || tabs[0];
-  return {
-    tabProps: {
-      tabs,
-      selectedTabIndex,
-      setSelectedTab
-    },
-    selectedTab
-  };
-}
-const transition = {
-  type: "tween",
-  ease: "easeOut",
-  duration: 0.15
-};
-const TabContent = ({ tab }) => {
-  return /* @__PURE__ */ jsx(
-    motion.div,
-    {
-      initial: { opacity: 0, y: 10 },
-      animate: { opacity: 1, y: 0 },
-      exit: { opacity: 0, y: -10 },
-      transition,
-      children: tab.content
-    },
-    tab.value
-  );
-};
-const Tabs = ({
-  tabs,
-  selectedTabIndex,
-  setSelectedTab
-}) => {
-  var _a, _b, _c;
-  const [buttonRefs, setButtonRefs] = React__default.useState([]);
-  React__default.useEffect(() => {
-    setButtonRefs((prev) => prev.slice(0, tabs.length));
-  }, [tabs.length]);
-  const navRef = React__default.useRef(null);
-  const navRect = (_a = navRef.current) == null ? void 0 : _a.getBoundingClientRect();
-  const selectedRect = (_b = buttonRefs[selectedTabIndex]) == null ? void 0 : _b.getBoundingClientRect();
-  const [hoveredTabIndex, setHoveredTabIndex] = React__default.useState(
-    null
-  );
-  (_c = buttonRefs[hoveredTabIndex ?? -1]) == null ? void 0 : _c.getBoundingClientRect();
-  return /* @__PURE__ */ jsxs(
-    "nav",
-    {
-      ref: navRef,
-      className: "tabs-nav",
-      onPointerLeave: () => setHoveredTabIndex(null),
-      children: [
-        tabs.map((item, i) => {
-          const isActive = selectedTabIndex === i;
-          return /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: "tabs-nav-button",
-              onPointerEnter: () => setHoveredTabIndex(i),
-              onFocus: () => setHoveredTabIndex(i),
-              onClick: () => setSelectedTab([i, i > selectedTabIndex ? 1 : -1]),
-              children: /* @__PURE__ */ jsx(
-                motion.span,
-                {
-                  ref: (el) => {
-                    buttonRefs[i] = el;
-                  },
-                  className: cn("tabs-nav-button-text", {
-                    "tabs-nav-button-text--inactive": !isActive,
-                    "tabs-nav-button-text--active": isActive
-                  }),
-                  children: /* @__PURE__ */ jsx(
-                    "small",
-                    {
-                      className: item.value === "danger-zone" ? "tabs-nav-button-text--danger" : "",
-                      children: item.label
-                    }
-                  )
-                }
-              )
-            },
-            item.value
-          );
-        }),
-        /* @__PURE__ */ jsx(AnimatePresence, { children: selectedRect && navRect && /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            className: cn("tabs-nav-indicator", {
-              "tabs-nav-indicator--danger": selectedTabIndex === tabs.findIndex(({ value }) => value === "danger-zone"),
-              "tabs-nav-indicator--default": selectedTabIndex !== tabs.findIndex(({ value }) => value === "danger-zone")
-            }),
-            initial: false,
-            animate: {
-              width: selectedRect.width,
-              x: selectedRect.left - navRect.left,
-              opacity: 1
-            },
-            transition
-          }
-        ) }),
-        /* @__PURE__ */ jsx("div", { className: "tabs-nav-underline" })
-      ]
-    }
-  );
-};
-function AnimatedTabs({ tabs }) {
-  const [hookProps] = React__default.useState(() => {
-    var _a;
-    const initialTabId = ((_a = tabs.find((tab) => tab.value === "home")) == null ? void 0 : _a.value) || tabs[0].value;
-    return {
-      tabs: tabs.map((tab) => ({
-        ...tab
-      })),
-      initialTabId
-    };
-  });
-  const framer = useTabs(hookProps);
-  return /* @__PURE__ */ jsxs("div", { className: "tabs-container", children: [
-    /* @__PURE__ */ jsx("div", { className: "tabs-container-inner", children: /* @__PURE__ */ jsx(Tabs, { ...framer.tabProps }) }),
-    /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(TabContent, { tab: framer.selectedTab }) })
-  ] });
-}
-const TabsRoot = React__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.Root,
-  {
-    ref,
-    className: cn("tabs", className),
-    ...props
-  }
-));
-TabsRoot.displayName = TabsPrimitive.Root.displayName;
-const TabsList = React__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.List,
-  {
-    ref,
-    className: cn("tabs-list", className),
-    ...props
-  }
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-const TabsTrigger = React__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.Trigger,
-  {
-    ref,
-    className: cn("tabs-trigger", className),
-    ...props
-  }
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-const TabsContent = React__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.Content,
-  {
-    ref,
-    className: cn("tabs-content", className),
-    ...props
-  }
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
 const InputOTP = React.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
   OTPInput,
   {
@@ -2622,15 +2454,25 @@ function DialogContent({
       ...props,
       children: /* @__PURE__ */ jsxs("div", { className: "dialog-content-wrapper", children: [
         /* @__PURE__ */ jsx("div", { className: cn("dialog-content-inner", innerClassName), children }),
-        showCloseButton && /* @__PURE__ */ jsx("div", { className: "dialog-close", children: /* @__PURE__ */ jsxs(SheetPrimitive.Close, { "data-slot": "dialog-close", children: [
-          /* @__PURE__ */ jsx(
-            UtilityClose,
-            {
-              className: cn("dialog-close-icon", closeClassName)
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-        ] }) })
+        showCloseButton && /* @__PURE__ */ jsx("div", { className: "dialog-close", children: /* @__PURE__ */ jsxs(
+          SheetPrimitive.Close,
+          {
+            "data-slot": "dialog-close",
+            className: "absolute top-4 right-4 cursor-pointer",
+            children: [
+              /* @__PURE__ */ jsx(
+                UtilityClose,
+                {
+                  className: cn(
+                    "dialog-close-icon text-gray-400 hover:text-gray-500 transition-colors duration-200 ",
+                    closeClassName
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+            ]
+          }
+        ) })
       ] })
     }
   ) }) });
@@ -2925,6 +2767,278 @@ const Tag = React.forwardRef(
   }
 );
 Tag.displayName = "Tag";
+const TabsContext = createContext(null);
+function useTabsContext() {
+  const ctx = useContext(TabsContext);
+  if (!ctx)
+    throw new Error("Tabs compound components must be used inside <Tabs>");
+  return ctx;
+}
+const TabsNavContext = createContext(null);
+function useTabsNavContext() {
+  const ctx = useContext(TabsNavContext);
+  if (!ctx) throw new Error("TabsTrigger must be used inside <TabsList>");
+  return ctx;
+}
+const transition = {
+  type: "tween",
+  ease: "easeOut",
+  duration: 0.15
+};
+const contentVariants = {
+  enter: (dir) => ({ opacity: 0, x: dir * 20 }),
+  center: { opacity: 1, x: 0 },
+  exit: (dir) => ({ opacity: 0, x: dir * -20 })
+};
+function AnimatedHeight({
+  children,
+  selectedValue
+}) {
+  const containerRef = useRef(null);
+  const innerRef = useRef(null);
+  const currentHeight = useRef(0);
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    const inner = innerRef.current;
+    if (!container || !inner) return;
+    const initialHeight = inner.offsetHeight;
+    if (currentHeight.current === 0) {
+      currentHeight.current = initialHeight;
+      container.style.height = `${initialHeight}px`;
+      return;
+    }
+    const ro = new ResizeObserver(() => {
+      const targetHeight = inner.offsetHeight;
+      if (targetHeight > 0 && targetHeight !== currentHeight.current) {
+        currentHeight.current = targetHeight;
+        ro.disconnect();
+        animate(container, { height: targetHeight }, { duration: 0.25, ease: "easeInOut" });
+      }
+    });
+    ro.observe(inner);
+    return () => ro.disconnect();
+  }, [selectedValue]);
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: "overflow-clip", children: /* @__PURE__ */ jsx("div", { ref: innerRef, children }) });
+}
+function Tabs({
+  children,
+  defaultValue,
+  className
+}) {
+  const [selectedValue, setSelectedValue] = useState(defaultValue);
+  const [direction, setDirection] = useState(0);
+  const valuesRef = useRef([]);
+  const selectedValueRef = useRef(defaultValue);
+  const registerValue = useCallback((value) => {
+    if (!valuesRef.current.includes(value)) {
+      valuesRef.current.push(value);
+    }
+  }, []);
+  const handleSetSelectedValue = useCallback((value) => {
+    const currentIdx = valuesRef.current.indexOf(selectedValueRef.current);
+    const nextIdx = valuesRef.current.indexOf(value);
+    setDirection(nextIdx > currentIdx ? 1 : -1);
+    selectedValueRef.current = value;
+    setSelectedValue(value);
+  }, []);
+  const childArray = Children.toArray(children);
+  const contentChildren = childArray.filter(
+    (child) => isValidElement(child) && child.type === TabsContent
+  );
+  const nonContentChildren = childArray.filter(
+    (child) => !(isValidElement(child) && child.type === TabsContent)
+  );
+  const activeContent = contentChildren.find(
+    (child) => child.props.value === selectedValue
+  );
+  return /* @__PURE__ */ jsx(
+    TabsContext.Provider,
+    {
+      value: { selectedValue, setSelectedValue: handleSetSelectedValue, direction, registerValue },
+      children: /* @__PURE__ */ jsxs("div", { className: cn("tabs-container", className), children: [
+        nonContentChildren,
+        /* @__PURE__ */ jsx(AnimatedHeight, { selectedValue, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", custom: direction, children: activeContent && cloneElement(activeContent, { key: activeContent.props.value }) }) })
+      ] })
+    }
+  );
+}
+function TabsList({
+  children,
+  className,
+  containerClassName,
+  fullWidth = false
+}) {
+  const { selectedValue } = useTabsContext();
+  const navRef = useRef(null);
+  const containerRef = useRef(null);
+  const buttonRefs = useRef(/* @__PURE__ */ new Map());
+  const indicatorX = useMotionValue(-999);
+  const indicatorWidth = useMotionValue(0);
+  const [indicatorColor, setIndicatorColor] = useState(null);
+  const isFirstRender = useRef(true);
+  const selectedValueRef = useRef(selectedValue);
+  selectedValueRef.current = selectedValue;
+  const updateIndicatorPosition = useCallback(() => {
+    const nav = navRef.current;
+    const selectedEl = buttonRefs.current.get(selectedValueRef.current);
+    if (!nav || !selectedEl) return;
+    const navRect = nav.getBoundingClientRect();
+    const selectedRect = selectedEl.getBoundingClientRect();
+    indicatorX.set(selectedRect.left - navRect.left);
+    indicatorWidth.set(selectedRect.width);
+  }, [indicatorX, indicatorWidth]);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const updateScroll = () => {
+      const canLeft = el.scrollLeft > 0;
+      const canRight = el.scrollLeft < el.scrollWidth - el.clientWidth - 1;
+      el.dataset.scrollLeft = canLeft ? "true" : "";
+      el.dataset.scrollRight = canRight ? "true" : "";
+    };
+    updateScroll();
+    el.addEventListener("scroll", updateScroll, { passive: true });
+    const ro = new ResizeObserver(() => {
+      updateScroll();
+      updateIndicatorPosition();
+    });
+    ro.observe(el);
+    return () => {
+      el.removeEventListener("scroll", updateScroll);
+      ro.disconnect();
+    };
+  }, [updateIndicatorPosition]);
+  const registerRef = useCallback(
+    (value, el) => {
+      buttonRefs.current.set(value, el);
+    },
+    []
+  );
+  useLayoutEffect(() => {
+    var _a;
+    const nav = navRef.current;
+    const container = containerRef.current;
+    const selectedEl = buttonRefs.current.get(selectedValue);
+    if (!nav || !container || !selectedEl) return;
+    const navRect = nav.getBoundingClientRect();
+    const selectedRect = selectedEl.getBoundingClientRect();
+    const P = selectedRect.left - navRect.left;
+    const W = selectedRect.width;
+    const danger = ((_a = selectedEl.dataset) == null ? void 0 : _a.variant) === "danger";
+    setIndicatorColor(danger ? "danger" : "default");
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      indicatorX.set(P);
+      indicatorWidth.set(W);
+      return;
+    }
+    const target = P - container.clientWidth / 2 + W / 2;
+    const clampedTarget = Math.max(
+      0,
+      Math.min(target, container.scrollWidth - container.clientWidth)
+    );
+    const needsScroll = Math.abs(clampedTarget - container.scrollLeft) > 1;
+    if (needsScroll) {
+      indicatorX.set(P);
+      indicatorWidth.set(W);
+      container.scrollTo({ left: clampedTarget, behavior: "smooth" });
+    } else {
+      animate(indicatorX, P, transition);
+      animate(indicatorWidth, W, transition);
+    }
+  }, [selectedValue, indicatorX, indicatorWidth]);
+  return /* @__PURE__ */ jsx(TabsNavContext.Provider, { value: { registerRef }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("tabs-container-inner", containerClassName),
+      children: /* @__PURE__ */ jsxs(
+        "nav",
+        {
+          ref: navRef,
+          className: cn(
+            "tabs-nav",
+            { "tabs-nav--full-width": fullWidth },
+            className
+          ),
+          children: [
+            children,
+            indicatorColor !== null && /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                className: cn("tabs-nav-indicator", {
+                  "tabs-nav-indicator--danger": indicatorColor === "danger",
+                  "tabs-nav-indicator--default": indicatorColor === "default"
+                }),
+                style: { x: indicatorX, width: indicatorWidth }
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "tabs-nav-underline" })
+          ]
+        }
+      )
+    }
+  ) });
+}
+function TabsTrigger({
+  value,
+  children,
+  className,
+  variant: variant2 = "default"
+}) {
+  const { selectedValue, setSelectedValue, registerValue } = useTabsContext();
+  const { registerRef } = useTabsNavContext();
+  useLayoutEffect(() => {
+    registerValue(value);
+  }, [registerValue, value]);
+  const isActive = selectedValue === value;
+  const refCallback = useCallback(
+    (el) => registerRef(value, el),
+    [registerRef, value]
+  );
+  const handleClick = useCallback(
+    () => setSelectedValue(value),
+    [setSelectedValue, value]
+  );
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn("tabs-nav-button", className),
+      "data-variant": variant2,
+      onClick: handleClick,
+      ref: refCallback,
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn("tabs-nav-button-text  overline-large", {
+            "tabs-nav-button-text--inactive": !isActive,
+            "tabs-nav-button-text--active": isActive
+          }),
+          children
+        }
+      )
+    }
+  );
+}
+function TabsContent({
+  children,
+  className
+}) {
+  const { direction } = useTabsContext();
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className,
+      custom: direction,
+      variants: contentVariants,
+      initial: "enter",
+      animate: "center",
+      exit: "exit",
+      transition,
+      children
+    }
+  );
+}
 const Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "nav",
   {
@@ -4816,6 +4930,24 @@ const Toaster = ({ ...props }) => {
     }
   );
 };
+function useTabs({ tabs, initialTabId }) {
+  const initialIndex = tabs.findIndex((tab) => tab.value === initialTabId);
+  const [selectedTabIndex, setSelectedTabIndex] = useState(
+    initialIndex >= 0 ? initialIndex : 0
+  );
+  const setSelectedTab = useCallback(([index, direction]) => {
+    setSelectedTabIndex(index);
+  }, []);
+  const selectedTab = tabs[selectedTabIndex] || tabs[0];
+  return {
+    tabProps: {
+      tabs,
+      selectedTabIndex,
+      setSelectedTab
+    },
+    selectedTab
+  };
+}
 const conceptColors = {
   mind: {
     solid: "#0a5161",
@@ -5898,9 +6030,9 @@ function UtilityCompare({ className }) {
                 d: "M10.6002 5.79905C10.6002 8.44949 8.45114 10.5981 5.80011 10.5981C3.14908 10.5981 1 8.44949 1 5.79905C1 3.14861 3.14908 1 5.80011 1C8.45114 1 10.6002 3.14861 10.6002 5.79905Z",
                 fill: "#E0FBF5",
                 stroke: "currentColor",
-                "stroke-width": "2",
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round"
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
               }
             ),
             /* @__PURE__ */ jsx(
@@ -5908,9 +6040,9 @@ function UtilityCompare({ className }) {
               {
                 d: "M5.80078 16.998L5.80078 24.9965C5.80078 25.845 6.13793 26.6588 6.73806 27.2587C7.33819 27.8587 8.15214 28.1958 9.00086 28.1958L20.2011 28.1958",
                 stroke: "currentColor",
-                "stroke-width": "2",
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round"
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
               }
             ),
             /* @__PURE__ */ jsx(
@@ -5918,9 +6050,9 @@ function UtilityCompare({ className }) {
               {
                 d: "M10.6002 21.7971L5.80011 16.998L1 21.7971",
                 stroke: "currentColor",
-                "stroke-width": "2",
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round"
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
               }
             ),
             /* @__PURE__ */ jsx(
@@ -5929,9 +6061,9 @@ function UtilityCompare({ className }) {
                 d: "M29.8001 28.2014C29.8001 30.8518 27.651 33.0004 24.9999 33.0004C22.3489 33.0004 20.1998 30.8518 20.1998 28.2014C20.1998 25.551 22.3489 23.4023 24.9999 23.4023C27.651 23.4023 29.8001 25.5509 29.8001 28.2014Z",
                 fill: "#EFF5FB",
                 stroke: "currentColor",
-                "stroke-width": "2",
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round"
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
               }
             ),
             /* @__PURE__ */ jsx(
@@ -5939,9 +6071,9 @@ function UtilityCompare({ className }) {
               {
                 d: "M25.0002 16.9946V8.99624C25.0002 8.14771 24.663 7.33394 24.0629 6.73395C23.4628 6.13395 22.6488 5.79687 21.8001 5.79687L10.5999 5.79688",
                 stroke: "currentColor",
-                "stroke-width": "2",
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round"
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
               }
             ),
             /* @__PURE__ */ jsx(
@@ -5949,9 +6081,9 @@ function UtilityCompare({ className }) {
               {
                 d: "M20.1998 12.2012L24.9999 17.0002L29.8001 12.2012",
                 stroke: "currentColor",
-                "stroke-width": "2",
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round"
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
               }
             )
           ]
@@ -6113,11 +6245,11 @@ const UtilityMessage = ({
             {
               d: "M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H5.828C5.29761 17.0001 4.78899 17.2109 4.414 17.586L2.212 19.788C2.1127 19.8873 1.9862 19.9549 1.84849 19.9823C1.71077 20.0097 1.56803 19.9956 1.43831 19.9419C1.30858 19.8881 1.1977 19.7971 1.11969 19.6804C1.04167 19.5637 1.00002 19.4264 1 19.286V3C1 2.46957 1.21071 1.96086 1.58579 1.58579C1.96086 1.21071 2.46957 1 3 1H19C19.5304 1 20.0391 1.21071 20.4142 1.58579C20.7893 1.96086 21 2.46957 21 3V15Z",
               fill: "currentColor",
-              "fill-opacity": "0.2",
+              fillOpacity: "0.2",
               stroke: "currentColor",
-              "stroke-width": "2",
-              "stroke-linecap": "round",
-              "stroke-linejoin": "round"
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
             }
           )
         }
@@ -6921,9 +7053,9 @@ const UtilityTrash = ({ className }) => {
               {
                 d: "M11.9504 3.5498V13.3498C11.9504 13.7211 11.8029 14.0772 11.5403 14.3398C11.2778 14.6023 10.9217 14.7498 10.5504 14.7498H3.55039C3.17909 14.7498 2.82299 14.6023 2.56044 14.3398C2.29789 14.0772 2.15039 13.7211 2.15039 13.3498V3.5498",
                 stroke: "currentColor",
-                "stroke-width": "1.5",
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round"
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
               }
             ),
             /* @__PURE__ */ jsx(
@@ -6931,9 +7063,9 @@ const UtilityTrash = ({ className }) => {
               {
                 d: "M0.75 3.5498H13.35",
                 stroke: "currentColor",
-                "stroke-width": "1.5",
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round"
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
               }
             ),
             /* @__PURE__ */ jsx(
@@ -6941,9 +7073,9 @@ const UtilityTrash = ({ className }) => {
               {
                 d: "M4.25 3.55V2.15C4.25 1.7787 4.3975 1.4226 4.66005 1.16005C4.9226 0.8975 5.2787 0.75 5.65 0.75H8.45C8.8213 0.75 9.1774 0.8975 9.43995 1.16005C9.7025 1.4226 9.85 1.7787 9.85 2.15V3.55",
                 stroke: "currentColor",
-                "stroke-width": "1.5",
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round"
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
               }
             )
           ]
@@ -7008,9 +7140,9 @@ function UtilityFeedback({ className }) {
               d: "M29 20.162C29 20.888 28.705 21.5843 28.1799 22.0977C27.6548 22.611 26.9426 22.8995 26.2 22.8995H7.7592C7.01665 22.8996 6.30458 23.1881 5.7796 23.7015L2.6968 26.7154C2.55779 26.8513 2.38068 26.9438 2.18788 26.9813C1.99508 27.0188 1.79524 26.9996 1.61363 26.926C1.43202 26.8525 1.27678 26.728 1.16756 26.5682C1.05834 26.4084 1.00003 26.2205 1 26.0283V3.73743C1 3.01142 1.295 2.31514 1.8201 1.80178C2.3452 1.28841 3.05739 1 3.8 1H26.2C26.9426 1 27.6548 1.28841 28.1799 1.80178C28.705 2.31514 29 3.01142 29 3.73743V20.162Z",
               fill: "#D6F4FB",
               stroke: "#71747D",
-              "stroke-width": "2",
-              "stroke-linecap": "round",
-              "stroke-linejoin": "round"
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
             }
           )
         }
@@ -10867,7 +10999,7 @@ const BadgeCertificationGold = ({
           {
             d: "M26.8122 52.8121C24.5706 52.8121 22.2424 52.5414 20.0875 51.9133C17.9325 51.2853 15.7884 50.4839 13.8176 49.3144C11.8467 48.1449 10.0491 46.8021 8.43565 45.1886C6.82216 43.5751 5.47939 41.7884 4.30987 39.8067C3.14036 37.8359 2.33903 35.7784 1.71096 33.5368C1.08288 31.3819 0.812164 29.0537 0.812164 26.8121C0.812164 24.5706 1.08288 22.2424 1.71096 20.0874C2.33903 17.9325 3.14036 15.7884 4.30987 13.8175C5.47939 11.8467 6.82216 10.0491 8.43565 8.43562C10.0491 6.82213 11.8359 5.47936 13.8176 4.30984C15.7884 3.14033 17.8459 2.339 20.0875 1.71093C22.2424 1.08285 24.5706 0.812134 26.8122 0.812134C29.0537 0.812134 31.3819 1.08285 33.5369 1.71093C35.6918 2.339 37.8359 3.14033 39.8067 4.30984C41.7776 5.47936 43.5752 6.82213 45.1887 8.43562C46.8022 10.0491 48.1449 11.8359 49.3145 13.8175C50.484 15.7884 51.2853 17.8459 51.9134 20.0874C52.5414 22.2424 52.8122 24.5706 52.8122 26.8121C52.8122 29.0537 52.5414 31.3819 51.9134 33.5368C51.2853 35.6918 50.484 37.8359 49.3145 39.8067C48.1449 41.7776 46.8022 43.5751 45.1887 45.1886C43.5752 46.8021 41.7884 48.1449 39.8067 49.3144C37.8359 50.4839 35.7784 51.2853 33.5369 51.9133C31.3819 52.5414 29.0537 52.8121 26.8122 52.8121Z",
             fill: "url(#paint0_linear_9834_327)",
-            "fill-opacity": "0.8"
+            fillOpacity: "0.8"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -10875,8 +11007,8 @@ const BadgeCertificationGold = ({
           {
             d: "M26.8122 52.8121C24.5706 52.8121 22.2424 52.5414 20.0875 51.9133C17.9325 51.2853 15.7884 50.4839 13.8176 49.3144C11.8467 48.1449 10.0492 46.8021 8.43566 45.1886C6.82216 43.5752 5.47939 41.7884 4.30987 39.8067C3.14036 37.8359 2.33903 35.7784 1.71096 33.5368C1.08288 31.3819 0.812164 29.0537 0.812164 26.8121C0.812164 24.5706 1.08288 22.2424 1.71096 20.0874C2.33903 17.9325 3.14036 15.7884 4.30987 13.8175C5.47939 11.8467 6.82216 10.0491 8.43566 8.43562C10.0492 6.82213 11.8359 5.47936 13.8176 4.30984C15.7884 3.14033 17.8459 2.339 20.0875 1.71093C22.2424 1.08285 24.5706 0.812134 26.8122 0.812134C29.0537 0.812134 31.3819 1.08285 33.5369 1.71093C35.6918 2.339 37.8359 3.14033 39.8068 4.30984C41.7776 5.47936 43.5752 6.82213 45.1887 8.43562C46.8022 10.0491 48.1449 11.8359 49.3145 13.8175C50.484 15.7884 51.2853 17.8459 51.9134 20.0874C52.5414 22.2424 52.8122 24.5706 52.8122 26.8121C52.8122 29.0537 52.5414 31.3819 51.9134 33.5368C51.2853 35.6918 50.484 37.8359 49.3145 39.8067C48.1449 41.7776 46.8022 43.5752 45.1887 45.1886C43.5752 46.8021 41.7884 48.1449 39.8068 49.3144C37.8359 50.4839 35.7784 51.2853 33.5369 51.9133C31.3819 52.5414 29.0537 52.8121 26.8122 52.8121Z",
             stroke: "white",
-            "stroke-width": "1.62432",
-            "stroke-linecap": "round"
+            strokeWidth: "1.62432",
+            strokeLinecap: "round"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -10884,8 +11016,8 @@ const BadgeCertificationGold = ({
           {
             d: "M32.6923 48.7839C30.8081 49.3362 28.7723 49.5636 26.8123 49.5636C24.8523 49.5636 22.8165 49.3254 20.9322 48.7839C19.048 48.2425 17.1638 47.5278 15.442 46.5099C13.7202 45.4919 12.1501 44.3116 10.7423 42.9039C9.33457 41.4961 8.15423 39.9259 7.13632 38.2041C6.11841 36.4824 5.41454 34.674 4.86227 32.7139C4.31 30.8297 4.0826 28.7939 4.0826 26.8339C4.0826 24.8739 4.32083 22.8381 4.86227 20.9538C5.40371 19.0696 6.11841 17.1854 7.13632 15.4636C8.15423 13.7418 9.33457 12.1717 10.7423 10.7639",
             stroke: "white",
-            "stroke-width": "1.62432",
-            "stroke-linecap": "round"
+            strokeWidth: "1.62432",
+            strokeLinecap: "round"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -10893,8 +11025,8 @@ const BadgeCertificationGold = ({
           {
             d: "M49.5526 26.8231C49.5526 28.7831 49.3144 30.819 48.773 32.7032C48.2315 34.5874 47.5168 36.4716 46.4989 38.1934C45.481 39.9152 44.3007 41.4853 42.8929 42.8931",
             stroke: "white",
-            "stroke-width": "1.62432",
-            "stroke-linecap": "round"
+            strokeWidth: "1.62432",
+            strokeLinecap: "round"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -10902,8 +11034,8 @@ const BadgeCertificationGold = ({
           {
             d: "M20.9323 4.86219C22.8165 4.30992 24.8523 4.08252 26.8124 4.08252C28.7724 4.08252 30.8082 4.32075 32.6924 4.86219C34.5766 5.40364 36.4608 6.11834 38.1826 7.13625C39.9044 8.15416 41.4746 9.3345 42.8823 10.7422C44.2901 12.15 45.4704 13.7202 46.4883 15.442",
             stroke: "white",
-            "stroke-width": "1.62432",
-            "stroke-linecap": "round"
+            strokeWidth: "1.62432",
+            strokeLinecap: "round"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -10911,8 +11043,8 @@ const BadgeCertificationGold = ({
           {
             d: "M17.0661 43.6944C15.5825 42.8173 14.2398 41.8102 13.0378 40.5974C11.8249 39.3846 10.8179 38.0418 9.94072 36.5691C9.06359 35.0855 8.45717 33.5478 7.99153 31.8694C7.52589 30.2559 7.32014 28.5124 7.32014 26.8231",
             stroke: "white",
-            "stroke-width": "1.62432",
-            "stroke-linecap": "round"
+            strokeWidth: "1.62432",
+            strokeLinecap: "round"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -10920,8 +11052,8 @@ const BadgeCertificationGold = ({
           {
             d: "M45.6327 21.7767C46.0983 23.3902 46.3041 25.1337 46.3041 26.823C46.3041 28.5123 46.0983 30.2557 45.6327 31.8692C45.167 33.4827 44.5606 35.0962 43.6835 36.5689C42.8064 38.0525 41.7993 39.3952 40.5864 40.5972C39.3736 41.8101 38.0308 42.8171 36.5581 43.6943C35.0746 44.5714 33.5369 45.1778 31.8584 45.6435",
             stroke: "white",
-            "stroke-width": "1.62432",
-            "stroke-linecap": "round"
+            strokeWidth: "1.62432",
+            strokeLinecap: "round"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -10929,8 +11061,8 @@ const BadgeCertificationGold = ({
           {
             d: "M9.94115 17.0771C10.8183 15.5936 11.8254 14.2508 13.0382 13.0488C14.251 11.836 15.5938 10.8289 17.0665 9.95175C18.5501 9.07462 20.0878 8.4682 21.7662 8.00256C23.3797 7.53692 25.1232 7.33118 26.8125 7.33118C28.5017 7.33118 30.2452 7.53692 31.8587 8.00256C33.4722 8.4682 35.0857 9.07462 36.5584 9.95175C38.0419 10.8289 39.3847 11.836 40.5867 13.0488",
             stroke: "white",
-            "stroke-width": "1.62432",
-            "stroke-linecap": "round"
+            strokeWidth: "1.62432",
+            strokeLinecap: "round"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -10938,8 +11070,8 @@ const BadgeCertificationGold = ({
           {
             d: "M40.8678 34.9447C40.1423 36.1792 39.2977 37.2946 38.2906 38.3016C37.2835 39.3087 36.1573 40.1534 34.9337 40.8789C33.6992 41.6044 32.4105 42.1134 31.0136 42.5032C29.6708 42.8931 28.209 43.0663 26.812 43.0663C25.4151 43.0663 23.9532 42.8931 22.6105 42.5032C21.2677 42.1134 19.9249 41.6044 18.6904 40.8789C17.4559 40.1534 16.3406 39.3087 15.3335 38.3016C14.3264 37.2946 13.4818 36.1684 12.7562 34.9447",
             stroke: "white",
-            "stroke-width": "1.62432",
-            "stroke-linecap": "round"
+            strokeWidth: "1.62432",
+            strokeLinecap: "round"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -10947,8 +11079,8 @@ const BadgeCertificationGold = ({
           {
             d: "M31.014 11.1429C32.3568 11.5328 33.6995 12.0417 34.934 12.7673C36.1685 13.4928 37.2839 14.3374 38.291 15.3445C39.298 16.3516 40.1427 17.4778 40.8682 18.7015C41.5938 19.9359 42.1027 21.2246 42.4925 22.6215C42.8824 23.9643 43.0556 25.4262 43.0556 26.8231",
             stroke: "white",
-            "stroke-width": "1.62432",
-            "stroke-linecap": "round"
+            strokeWidth: "1.62432",
+            strokeLinecap: "round"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -10956,8 +11088,8 @@ const BadgeCertificationGold = ({
           {
             d: "M10.5688 26.8231C10.5688 25.4262 10.742 23.9643 11.1319 22.6216C11.5217 21.2788 12.0307 19.936 12.7562 18.7015C13.4817 17.467 14.3264 16.3517 15.3335 15.3446C16.3405 14.3375 17.4667 13.4929 18.6904 12.7673",
             stroke: "white",
-            "stroke-width": "1.62432",
-            "stroke-linecap": "round"
+            strokeWidth: "1.62432",
+            strokeLinecap: "round"
           }
         ),
         /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
@@ -10970,10 +11102,10 @@ const BadgeCertificationGold = ({
             y2: "0.822974",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ jsx("stop", { offset: "0.173077", "stop-color": "#EADA94" }),
-              /* @__PURE__ */ jsx("stop", { offset: "0.365337", "stop-color": "white" }),
-              /* @__PURE__ */ jsx("stop", { offset: "0.542584", "stop-color": "#F6EFD0" }),
-              /* @__PURE__ */ jsx("stop", { offset: "0.826923", "stop-color": "#EEE2AA" })
+              /* @__PURE__ */ jsx("stop", { offset: "0.173077", stopColor: "#EADA94" }),
+              /* @__PURE__ */ jsx("stop", { offset: "0.365337", stopColor: "white" }),
+              /* @__PURE__ */ jsx("stop", { offset: "0.542584", stopColor: "#F6EFD0" }),
+              /* @__PURE__ */ jsx("stop", { offset: "0.826923", stopColor: "#EEE2AA" })
             ]
           }
         ) })
@@ -12387,9 +12519,9 @@ const BadgeImperativePrimary = ({
           {
             d: "M9.68994 5.5V16.5023",
             stroke: "white",
-            "stroke-width": "1.5",
-            "stroke-linecap": "round",
-            "stroke-linejoin": "round"
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -12397,9 +12529,9 @@ const BadgeImperativePrimary = ({
           {
             d: "M14.4542 8.25055L4.92627 13.7517",
             stroke: "white",
-            "stroke-width": "1.5",
-            "stroke-linecap": "round",
-            "stroke-linejoin": "round"
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -12407,9 +12539,9 @@ const BadgeImperativePrimary = ({
           {
             d: "M4.92627 8.25055L14.4542 13.7517",
             stroke: "white",
-            "stroke-width": "1.5",
-            "stroke-linecap": "round",
-            "stroke-linejoin": "round"
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
           }
         )
       ]
@@ -12433,7 +12565,7 @@ const BadgeImperativeSecondary = ({
           {
             d: "M19.2133 7.81921C19.2133 6.38498 18.4454 5.06051 17.2008 4.3479L11.5941 1.13788C10.3629 0.432974 8.85042 0.432974 7.61921 1.13788L2.01255 4.3479C0.767878 5.06051 0 6.38498 0 7.81921V14.1808C0 15.615 0.767878 16.9395 2.01255 17.6521L7.61921 20.8621C8.85042 21.567 10.3629 21.567 11.5941 20.8621L17.2008 17.6521C18.4454 16.9395 19.2133 15.615 19.2133 14.1808V7.81921Z",
             fill: "#128BA6",
-            "fill-opacity": "0.08"
+            fillOpacity: "0.08"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -12441,9 +12573,9 @@ const BadgeImperativeSecondary = ({
           {
             d: "M7.86719 1.57227C8.9445 0.955469 10.2684 0.955469 11.3457 1.57227L16.9521 4.78223C18.0412 5.40577 18.7129 6.56439 18.7129 7.81934V14.1807C18.7129 15.4356 18.0412 16.5942 16.9521 17.2178L11.3457 20.4277C10.2684 21.0445 8.9445 21.0445 7.86719 20.4277L2.26074 17.2178C1.17187 16.5942 0.5 15.4355 0.5 14.1807V7.81934C0.5 6.56452 1.17187 5.40582 2.26074 4.78223L7.86719 1.57227Z",
             stroke: "#128BA6",
-            "stroke-opacity": "0.16",
-            "stroke-linecap": "round",
-            "stroke-linejoin": "round"
+            strokeOpacity: "0.16",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -12451,9 +12583,9 @@ const BadgeImperativeSecondary = ({
           {
             d: "M9.68994 5.5V16.5023",
             stroke: "#0F748A",
-            "stroke-width": "1.5",
-            "stroke-linecap": "round",
-            "stroke-linejoin": "round"
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -12461,9 +12593,9 @@ const BadgeImperativeSecondary = ({
           {
             d: "M14.4542 8.25055L4.92627 13.7517",
             stroke: "#0F748A",
-            "stroke-width": "1.5",
-            "stroke-linecap": "round",
-            "stroke-linejoin": "round"
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -12471,9 +12603,9 @@ const BadgeImperativeSecondary = ({
           {
             d: "M4.92627 8.25055L14.4542 13.7517",
             stroke: "#0F748A",
-            "stroke-width": "1.5",
-            "stroke-linecap": "round",
-            "stroke-linejoin": "round"
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
           }
         )
       ]
@@ -13231,9 +13363,12 @@ const StandardNavigation = ({
 };
 const ALPHA_PATH = "M5.3387 0.0229882C5.37971 0.0229882 5.45295 0.0199228 5.5584 0.0137925C5.66386 0.00459714 5.74442 0 5.80007 0C6.72867 0 7.49908 0.269732 8.11131 0.809196C8.72354 1.34559 9.14097 2.09195 9.3636 3.04828C9.44855 3.47433 9.49835 3.96628 9.513 4.52414V5.16782C10.2014 4.07663 10.7287 2.85517 11.0948 1.50345C11.1505 1.29808 11.1959 1.17701 11.2311 1.14023C11.2662 1.10345 11.3761 1.08506 11.5606 1.08506C11.8535 1.08506 12 1.13563 12 1.23678C12 1.25211 11.9722 1.37778 11.9165 1.61379C11.5093 3.24751 10.7931 4.77701 9.76785 6.2023L9.53497 6.51034L9.55694 7.04368C9.59795 8.23295 9.72391 8.9318 9.93482 9.14023C9.97583 9.16782 10.0388 9.18161 10.1238 9.18161C10.32 9.15402 10.5031 9.06973 10.673 8.92874C10.8429 8.78774 10.963 8.62222 11.0333 8.43218C11.0597 8.32797 11.0948 8.26513 11.1388 8.24368C11.1798 8.22222 11.2852 8.21149 11.4551 8.21149C11.7364 8.21149 11.877 8.27739 11.877 8.40919C11.877 8.49808 11.8345 8.63142 11.7495 8.8092C11.5943 9.13103 11.3687 9.4069 11.0729 9.63678C10.777 9.8636 10.4475 9.97701 10.0842 9.97701H9.93482C8.97986 9.97701 8.3398 9.44674 8.01465 8.38621L7.95313 8.23448C7.20615 8.74942 6.79165 9.02835 6.70963 9.07126C5.66679 9.69042 4.61809 10 3.56353 10C2.56756 10 1.76346 9.70575 1.15123 9.11724C0.538997 8.52874 0.162578 7.75632 0.02197 6.8C0.0073233 6.71111 0 6.54866 0 6.31264C0 5.9295 0.02197 5.62146 0.0659099 5.38851C0.276822 4.06437 0.887587 2.8751 1.89821 1.82069C2.91175 0.769348 4.05859 0.170115 5.3387 0.0229882ZM1.83669 7.10805C1.83669 7.73946 1.9978 8.24368 2.32003 8.62069C2.64518 8.99464 3.09484 9.18161 3.66899 9.18161C4.03515 9.18161 4.44379 9.12337 4.89491 9.0069C5.6829 8.80153 6.44892 8.4046 7.19297 7.81609C7.29257 7.74253 7.38777 7.66437 7.47858 7.58161C7.56939 7.50192 7.64262 7.43295 7.69828 7.37471L7.78176 7.28276L7.76419 7.08506C7.76419 6.95326 7.75979 6.75862 7.75101 6.50115C7.74515 6.24368 7.74222 5.98927 7.74222 5.73793C7.72757 5.18008 7.71732 4.74636 7.71146 4.43678C7.70267 4.1272 7.67338 3.74866 7.62358 3.30115C7.57671 2.85364 7.5108 2.50728 7.42585 2.26207C7.3409 2.01992 7.22519 1.77471 7.07873 1.52644C6.92933 1.2751 6.73892 1.09425 6.50751 0.983908C6.27609 0.873563 6.00513 0.81839 5.69462 0.81839C4.72501 0.81839 3.87404 1.35479 3.14171 2.42759C2.79019 2.97318 2.49579 3.71647 2.25851 4.65747C1.9773 5.73333 1.83669 6.55019 1.83669 7.10805Z";
 const PATH_LENGTH = 60;
-function AlphaIcon({ dark = false }) {
+function AlphaIcon({
+  dark = false,
+  className = ""
+}) {
   if (dark) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -13241,9 +13376,41 @@ function AlphaIcon({ dark = false }) {
         height: "10",
         viewBox: "0 0 12 10",
         fill: "none",
-        className: "mt-1.5",
+        className: cn("mt-[6px]", className),
         style: { overflow: "visible" },
-        children: /* @__PURE__ */ jsx("path", { d: ALPHA_PATH, fill: "currentColor" })
+        children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M5.3387 0.0229882C5.37971 0.0229882 5.45295 0.0199228 5.5584 0.0137925C5.66386 0.00459714 5.74442 0 5.80007 0C6.72867 0 7.49908 0.269732 8.11131 0.809196C8.72354 1.34559 9.14097 2.09195 9.3636 3.04828C9.44855 3.47433 9.49835 3.96628 9.513 4.52414V5.16782C10.2014 4.07663 10.7287 2.85517 11.0948 1.50345C11.1505 1.29808 11.1959 1.17701 11.2311 1.14023C11.2662 1.10345 11.3761 1.08506 11.5606 1.08506C11.8535 1.08506 12 1.13563 12 1.23678C12 1.25211 11.9722 1.37778 11.9165 1.61379C11.5093 3.24751 10.7931 4.77701 9.76785 6.2023L9.53497 6.51034L9.55694 7.04368C9.59795 8.23295 9.72391 8.9318 9.93482 9.14023C9.97583 9.16782 10.0388 9.18161 10.1238 9.18161C10.32 9.15402 10.5031 9.06973 10.673 8.92874C10.8429 8.78774 10.963 8.62222 11.0333 8.43218C11.0597 8.32797 11.0948 8.26513 11.1388 8.24368C11.1798 8.22222 11.2852 8.21149 11.4551 8.21149C11.7364 8.21149 11.877 8.27739 11.877 8.40919C11.877 8.49808 11.8345 8.63142 11.7495 8.8092C11.5943 9.13103 11.3687 9.4069 11.0729 9.63678C10.777 9.8636 10.4475 9.97701 10.0842 9.97701H9.93482C8.97986 9.97701 8.3398 9.44674 8.01465 8.38621L7.95313 8.23448C7.20615 8.74942 6.79165 9.02835 6.70963 9.07126C5.66679 9.69042 4.61809 10 3.56353 10C2.56756 10 1.76346 9.70575 1.15123 9.11724C0.538997 8.52874 0.162578 7.75632 0.02197 6.8C0.0073233 6.71111 0 6.54866 0 6.31264C0 5.9295 0.02197 5.62146 0.0659099 5.38851C0.276822 4.06437 0.887587 2.8751 1.89821 1.82069C2.91175 0.769348 4.05859 0.170115 5.3387 0.0229882ZM1.83669 7.10805C1.83669 7.73946 1.9978 8.24368 2.32003 8.62069C2.64518 8.99464 3.09484 9.18161 3.66899 9.18161C4.03515 9.18161 4.44379 9.12337 4.89491 9.0069C5.6829 8.80153 6.44892 8.4046 7.19297 7.81609C7.29257 7.74253 7.38777 7.66437 7.47858 7.58161C7.56939 7.50192 7.64262 7.43295 7.69828 7.37471L7.78176 7.28276L7.76419 7.08506C7.76419 6.95326 7.75979 6.75862 7.75101 6.50115C7.74515 6.24368 7.74222 5.98927 7.74222 5.73793C7.72757 5.18008 7.71732 4.74636 7.71146 4.43678C7.70267 4.1272 7.67338 3.74866 7.62358 3.30115C7.57671 2.85364 7.5108 2.50728 7.42585 2.26207C7.3409 2.01992 7.22519 1.77471 7.07873 1.52644C6.92933 1.2751 6.73892 1.09425 6.50751 0.983908C6.27609 0.873563 6.00513 0.81839 5.69462 0.81839C4.72501 0.81839 3.87404 1.35479 3.14171 2.42759C2.79019 2.97318 2.49579 3.71647 2.25851 4.65747C1.9773 5.73333 1.83669 6.55019 1.83669 7.10805Z",
+              fill: "url(#paint0_linear_12203_82399)"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M5.3387 0.0229882C5.37971 0.0229882 5.45295 0.0199228 5.5584 0.0137925C5.66386 0.00459714 5.74442 0 5.80007 0C6.72867 0 7.49908 0.269732 8.11131 0.809196C8.72354 1.34559 9.14097 2.09195 9.3636 3.04828C9.44855 3.47433 9.49835 3.96628 9.513 4.52414V5.16782C10.2014 4.07663 10.7287 2.85517 11.0948 1.50345C11.1505 1.29808 11.1959 1.17701 11.2311 1.14023C11.2662 1.10345 11.3761 1.08506 11.5606 1.08506C11.8535 1.08506 12 1.13563 12 1.23678C12 1.25211 11.9722 1.37778 11.9165 1.61379C11.5093 3.24751 10.7931 4.77701 9.76785 6.2023L9.53497 6.51034L9.55694 7.04368C9.59795 8.23295 9.72391 8.9318 9.93482 9.14023C9.97583 9.16782 10.0388 9.18161 10.1238 9.18161C10.32 9.15402 10.5031 9.06973 10.673 8.92874C10.8429 8.78774 10.963 8.62222 11.0333 8.43218C11.0597 8.32797 11.0948 8.26513 11.1388 8.24368C11.1798 8.22222 11.2852 8.21149 11.4551 8.21149C11.7364 8.21149 11.877 8.27739 11.877 8.40919C11.877 8.49808 11.8345 8.63142 11.7495 8.8092C11.5943 9.13103 11.3687 9.4069 11.0729 9.63678C10.777 9.8636 10.4475 9.97701 10.0842 9.97701H9.93482C8.97986 9.97701 8.3398 9.44674 8.01465 8.38621L7.95313 8.23448C7.20615 8.74942 6.79165 9.02835 6.70963 9.07126C5.66679 9.69042 4.61809 10 3.56353 10C2.56756 10 1.76346 9.70575 1.15123 9.11724C0.538997 8.52874 0.162578 7.75632 0.02197 6.8C0.0073233 6.71111 0 6.54866 0 6.31264C0 5.9295 0.02197 5.62146 0.0659099 5.38851C0.276822 4.06437 0.887587 2.8751 1.89821 1.82069C2.91175 0.769348 4.05859 0.170115 5.3387 0.0229882ZM1.83669 7.10805C1.83669 7.73946 1.9978 8.24368 2.32003 8.62069C2.64518 8.99464 3.09484 9.18161 3.66899 9.18161C4.03515 9.18161 4.44379 9.12337 4.89491 9.0069C5.6829 8.80153 6.44892 8.4046 7.19297 7.81609C7.29257 7.74253 7.38777 7.66437 7.47858 7.58161C7.56939 7.50192 7.64262 7.43295 7.69828 7.37471L7.78176 7.28276L7.76419 7.08506C7.76419 6.95326 7.75979 6.75862 7.75101 6.50115C7.74515 6.24368 7.74222 5.98927 7.74222 5.73793C7.72757 5.18008 7.71732 4.74636 7.71146 4.43678C7.70267 4.1272 7.67338 3.74866 7.62358 3.30115C7.57671 2.85364 7.5108 2.50728 7.42585 2.26207C7.3409 2.01992 7.22519 1.77471 7.07873 1.52644C6.92933 1.2751 6.73892 1.09425 6.50751 0.983908C6.27609 0.873563 6.00513 0.81839 5.69462 0.81839C4.72501 0.81839 3.87404 1.35479 3.14171 2.42759C2.79019 2.97318 2.49579 3.71647 2.25851 4.65747C1.9773 5.73333 1.83669 6.55019 1.83669 7.10805Z",
+              fill: "#282A31",
+              fillOpacity: "0.2"
+            }
+          ),
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: "paint0_linear_12203_82399",
+              x1: "-3.27254",
+              y1: "4.99923",
+              x2: "6.36738",
+              y2: "-2.36962",
+              gradientUnits: "userSpaceOnUse",
+              children: [
+                /* @__PURE__ */ jsx("stop", { "stop-color": "#8AEFDB" }),
+                /* @__PURE__ */ jsx("stop", { offset: "0.5", stopColor: "#D4BACE" }),
+                /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#CBE0F1" })
+              ]
+            }
+          ) })
+        ]
       }
     );
   }
@@ -13255,7 +13422,7 @@ function AlphaIcon({ dark = false }) {
       height: "10",
       viewBox: "0 0 12 10",
       fill: "none",
-      className: "mt-1.5",
+      className: cn("mt-[6px]", className),
       style: { overflow: "visible" },
       children: [
         /* @__PURE__ */ jsx("path", { d: ALPHA_PATH, fill: "url(#paint0_linear_nav)", opacity: "0.4" }),
@@ -13340,7 +13507,6 @@ export {
   AlertDialogTrigger,
   AlertTitle,
   AlphaIcon,
-  AnimatedTabs,
   AspectRatio,
   Avatar,
   AvatarFallback,
@@ -13614,7 +13780,7 @@ export {
   TableHead,
   TableHeader,
   TableRow,
-  TabsRoot as Tabs,
+  Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,