@syscore/ui-library 1.23.0 → 1.25.0

package/client/components/icons/AlphaIcon.tsx

@@ -42,7 +42,7 @@ export function AlphaIcon({
             y2="-2.36962"
             gradientUnits="userSpaceOnUse"
           >
-            <stop stop-color="#8AEFDB" />
+            <stop stopColor="#8AEFDB" />
             <stop offset="0.5" stopColor="#D4BACE" />
             <stop offset="1" stopColor="#CBE0F1" />
           </linearGradient>

package/client/components/icons/achievement-badges/BadgeCertificationBronze.tsx

@@ -21,7 +21,7 @@ export const BadgeCertificationBronze = ({
       <path
         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_265)"
-        fill-opacity="0.8"
+        fillOpacity="0.8"
       />
       <path
         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"
@@ -92,10 +92,10 @@ export const BadgeCertificationBronze = ({
           y2="0.822974"
           gradientUnits="userSpaceOnUse"
         >
-          <stop offset="0.173077" stop-color="#DCBA8E" />
-          <stop offset="0.324306" stop-color="#ECDDBA" />
-          <stop offset="0.484968" stop-color="#F2E9C9" />
-          <stop offset="0.826923" stop-color="#DFC196" />
+          <stop offset="0.173077" stopColor="#DCBA8E" />
+          <stop offset="0.324306" stopColor="#ECDDBA" />
+          <stop offset="0.484968" stopColor="#F2E9C9" />
+          <stop offset="0.826923" stopColor="#DFC196" />
         </linearGradient>
       </defs>
     </svg>

package/client/components/icons/achievement-badges/BadgeCertificationPlatinum.tsx

@@ -21,7 +21,7 @@ export const BadgeCertificationPlatinum = ({
       <path
         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_358)"
-        fill-opacity="0.8"
+        fillOpacity="0.8"
       />
       <path
         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"
@@ -92,10 +92,10 @@ export const BadgeCertificationPlatinum = ({
           y2="0.822974"
           gradientUnits="userSpaceOnUse"
         >
-          <stop offset="0.173077" stop-color="#B4B3BC" />
-          <stop offset="0.365337" stop-color="#E2E1E5" />
-          <stop offset="0.542584" stop-color="#E2E1E5" />
-          <stop offset="0.826923" stop-color="#C6C5CC" />
+          <stop offset="0.173077" stopColor="#B4B3BC" />
+          <stop offset="0.365337" stopColor="#E2E1E5" />
+          <stop offset="0.542584" stopColor="#E2E1E5" />
+          <stop offset="0.826923" stopColor="#C6C5CC" />
         </linearGradient>
       </defs>
     </svg>

package/client/components/icons/achievement-badges/BadgeCertificationSilver.tsx

@@ -21,7 +21,7 @@ export const BadgeCertificationSilver = ({
       <path
         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_296)"
-        fill-opacity="0.8"
+        fillOpacity="0.8"
       />
       <path
         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"
@@ -92,10 +92,10 @@ export const BadgeCertificationSilver = ({
           y2="0.822974"
           gradientUnits="userSpaceOnUse"
         >
-          <stop offset="0.173077" stop-color="#BCC4CD" />
-          <stop offset="0.324306" stop-color="#FCFCFD" />
-          <stop offset="0.484968" stop-color="#FCFCFD" />
-          <stop offset="0.826923" stop-color="#BCC4CD" />
+          <stop offset="0.173077" stopColor="#BCC4CD" />
+          <stop offset="0.324306" stopColor="#FCFCFD" />
+          <stop offset="0.484968" stopColor="#FCFCFD" />
+          <stop offset="0.826923" stopColor="#BCC4CD" />
         </linearGradient>
       </defs>
     </svg>

package/client/components/ui/dialog.tsx

@@ -75,7 +75,7 @@ function DialogContent({
               >
                 <UtilityClose
                   className={cn(
-                    "dialog-close-icon text-gray-400 hover:text-gray-500 transition-colors duration-200 ",
+                    "dialog-close-icon text-gray-400 hover:text-gray-600 transition-colors duration-200 ",
                     closeClassName,
                   )}
                 />

package/client/components/ui/height-container.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useLayoutEffect, useRef, ReactNode } from "react";
+import { animate } from "motion/react";
+import { cn } from "@/lib/utils";
+
+export function HeightContainer({
+  children,
+  stateKey,
+  className,
+}: {
+  children: ReactNode;
+  stateKey: string;
+  className?: string;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const innerRef = useRef<HTMLDivElement>(null);
+  const currentHeight = useRef(0);
+
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    const inner = innerRef.current;
+    if (!container || !inner) return;
+
+    // Set initial height without animation
+    const initialHeight = inner.offsetHeight;
+    if (currentHeight.current === 0 && initialHeight > 0) {
+      currentHeight.current = initialHeight;
+      container.style.height = `${initialHeight}px`;
+    }
+
+    // Keep observing so we catch post-animation height changes
+    const ro = new ResizeObserver(() => {
+      const targetHeight = inner.offsetHeight;
+      if (targetHeight > 0 && targetHeight !== currentHeight.current) {
+        const shouldAnimate = currentHeight.current > 0;
+        currentHeight.current = targetHeight;
+        if (shouldAnimate) {
+          animate(container, { height: targetHeight }, { duration: 0.25, ease: "easeInOut" });
+        } else {
+          container.style.height = `${targetHeight}px`;
+        }
+      }
+    });
+    ro.observe(inner);
+    return () => ro.disconnect();
+  }, [stateKey]);
+
+  return (
+    <div ref={containerRef} className={cn("overflow-clip", className)}>
+      <div ref={innerRef}>{children}</div>
+    </div>
+  );
+}

package/client/components/ui/tabs.tsx

@@ -8,6 +8,7 @@ import {
   useMotionValue,
 } from "motion/react";
 import { cn } from "@/lib/utils";
+import { HeightContainer } from "./height-container";
 import {
   Children,
   cloneElement,
@@ -65,49 +66,6 @@ const contentVariants = {
   exit: (dir: number) => ({ opacity: 0, x: dir * -20 }),
 };
 
-function AnimatedHeight({
-  children,
-  selectedValue,
-}: {
-  children: ReactNode;
-  selectedValue: string;
-}) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const innerRef = useRef<HTMLDivElement>(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;
-    }
-
-    // Keep observing until the height differs from current (new content has mounted)
-    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 (
-    <div ref={containerRef} className="overflow-clip">
-      <div ref={innerRef}>{children}</div>
-    </div>
-  );
-}
-
 function Tabs({
   children,
   defaultValue,
@@ -156,12 +114,12 @@ function Tabs({
     >
       <div className={cn("tabs-container", className)}>
         {nonContentChildren}
-        <AnimatedHeight selectedValue={selectedValue}>
+        <HeightContainer stateKey={selectedValue}>
           <AnimatePresence mode="wait" custom={direction}>
             {activeContent &&
               cloneElement(activeContent, { key: activeContent.props.value })}
           </AnimatePresence>
-        </AnimatedHeight>
+        </HeightContainer>
       </div>
     </TabsContext.Provider>
   );

package/client/components/ui/tooltip.tsx

@@ -245,7 +245,7 @@ function ToggleClose({ className }: { className?: string }) {
       onClick={close}
       className={className}
     >
-      <UtilityClose />
+      <UtilityClose className="text-inherit" />
     </button>
   );
 }

package/client/global.css

@@ -2054,7 +2054,7 @@ body {
 .tooltip-content {
   position: relative;
   z-index: 50;
-  border-radius: 0.5rem;
+  border-radius: 12px;
   padding: 1.5rem;
   padding-top: 2rem;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
@@ -2177,6 +2177,12 @@ body {
   top: 1rem;
   right: 1rem;
   cursor: pointer;
+  color: var(--color-gray-500, #6b7280);
+  transition: color 0.15s ease-in-out;
+}
+
+[data-slot="tooltip-close"]:hover {
+  color: var(--color-gray-300, #fff);
 }
 
 @media (max-width: 639px) {
@@ -2622,7 +2628,7 @@ body {
 @media (max-width: 639px) {
   .dialog-content {
     width: 100%;
-    padding-inline: 1rem;
+    /* padding-inline: 1rem; */
   }
 
   .dialog-content-wrapper {
@@ -7305,11 +7311,9 @@ body {
   margin-bottom: 0;
 }
 
-.page-header-description {
-  /* Uses body-large utility */
-  /* max-width: 680px; */
+/* .page-header-description {
   padding-right: 10rem;
-}
+} */
 
 @media (max-width: 640px) {
   .page-header-description {