@orderly.network/affiliate 2.10.1 → 2.10.2

package/dist/index.mjs

@@ -347,40 +347,49 @@ var Faq = () => {
       expanded: expandedItems.has(item.id)
     }));
   }, [faqItemsData, expandedItems]);
-  return /* @__PURE__ */ jsxs(Box, { children: [
+  return /* @__PURE__ */ jsxs(Box, { className: "oui-affiliate-faq", children: [
     /* @__PURE__ */ jsx(Text, { className: "oui-text-[32px]", children: t("affiliate.faq.title") }),
-    /* @__PURE__ */ jsx(Flex, { direction: "column", itemAlign: "stretch", gap: 0, children: faqItems.map((item, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx(
-        Collapsible,
-        {
-          open: item.expanded,
-          onOpenChange: () => toggleItem(item.id),
-          children: /* @__PURE__ */ jsxs(
-            Flex,
+    /* @__PURE__ */ jsx(
+      Flex,
+      {
+        direction: "column",
+        itemAlign: "stretch",
+        gap: 0,
+        className: "oui-faq-list",
+        children: faqItems.map((item, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          /* @__PURE__ */ jsx(
+            Collapsible,
             {
-              direction: "column",
-              className: "oui-cursor-pointer oui-py-4",
-              itemAlign: "stretch",
-              onClick: () => toggleItem(item.id),
-              children: [
-                /* @__PURE__ */ jsxs(Flex, { justify: "between", itemAlign: "center", gap: 4, children: [
-                  /* @__PURE__ */ jsx(Flex, { gap: 2, itemAlign: "center", className: "oui-flex-1", children: /* @__PURE__ */ jsx(Text, { size: "2xl", weight: "semibold", children: `${index + 1}. ${item.question}` }) }),
-                  /* @__PURE__ */ jsx(ChevronIcon, { expanded: item.expanded })
-                ] }),
-                /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(
-                  Box,
-                  {
-                    className: "oui-pt-3 oui-text-base-contrast-54",
-                    dangerouslySetInnerHTML: { __html: item.answer }
-                  }
-                ) })
-              ]
+              open: item.expanded,
+              onOpenChange: () => toggleItem(item.id),
+              children: /* @__PURE__ */ jsxs(
+                Flex,
+                {
+                  direction: "column",
+                  className: "oui-cursor-pointer oui-py-4",
+                  itemAlign: "stretch",
+                  onClick: () => toggleItem(item.id),
+                  children: [
+                    /* @__PURE__ */ jsxs(Flex, { justify: "between", itemAlign: "center", gap: 4, children: [
+                      /* @__PURE__ */ jsx(Flex, { gap: 2, itemAlign: "center", className: "oui-flex-1", children: /* @__PURE__ */ jsx(Text, { size: "2xl", weight: "semibold", children: `${index + 1}. ${item.question}` }) }),
+                      /* @__PURE__ */ jsx(ChevronIcon, { expanded: item.expanded })
+                    ] }),
+                    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        className: "oui-pt-3 oui-text-base-contrast-54",
+                        dangerouslySetInnerHTML: { __html: item.answer }
+                      }
+                    ) })
+                  ]
+                }
+              )
             }
-          )
-        }
-      ),
-      index < faqItems.length - 1 && /* @__PURE__ */ jsx("div", { className: "oui-my-4 oui-h-px oui-bg-line-6" })
-    ] }, item.id)) })
+          ),
+          index < faqItems.length - 1 && /* @__PURE__ */ jsx("div", { className: "oui-my-4 oui-h-px oui-bg-line-6" })
+        ] }, item.id))
+      }
+    )
   ] });
 };
 var ChevronIcon = ({ expanded }) => /* @__PURE__ */ jsx(
@@ -632,10 +641,20 @@ var ReferralCodeForm = (props) => {
         };
     }
   }, [t, type, isEditingRefereeRebateRate, isReview, props.accountId]);
-  const titleView = /* @__PURE__ */ jsxs(Flex, { width: "100%", direction: "column", itemAlign: "start", gap: 3, children: [
-    /* @__PURE__ */ jsx(Text, { size: "base", intensity: 98, children: title }),
-    /* @__PURE__ */ jsx(Divider, { intensity: 8, className: "oui-w-full" })
-  ] });
+  const titleView = /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      width: "100%",
+      direction: "column",
+      itemAlign: "start",
+      gap: 3,
+      className: "oui-referralCodeForm-header",
+      children: [
+        /* @__PURE__ */ jsx(Text, { size: "base", intensity: 98, children: title }),
+        /* @__PURE__ */ jsx(Divider, { intensity: 8, className: "oui-w-full" })
+      ]
+    }
+  );
   const descriptionView = /* @__PURE__ */ jsx(WarningBox, { children: description });
   const referralCodeInput = /* @__PURE__ */ jsx(
     ReferralCodeInput,
@@ -689,6 +708,7 @@ var ReferralCodeForm = (props) => {
         fullWidth: true,
         onClick: props.close,
         size: "md",
+        className: "oui-referralCodeForm-cancel-btn",
         children: t("common.cancel")
       }
     ),
@@ -700,6 +720,7 @@ var ReferralCodeForm = (props) => {
         disabled: props.buttonDisabled || props.isMutating,
         loading: props.isMutating,
         size: "md",
+        className: "oui-referralCodeForm-confirm-btn",
         children: buttonText
       }
     )
@@ -739,7 +760,7 @@ var ReferralCodeForm = (props) => {
       direction: "column",
       itemAlign: "start",
       gap: 6,
-      className: "oui-font-semibold",
+      className: "oui-affiliate-referralCodeForm oui-font-semibold",
       children: [
         titleView,
         descriptionView,
@@ -956,59 +977,84 @@ var TradingVolumeProgress = (props) => {
       name: "Perp"
     });
   };
-  return /* @__PURE__ */ jsxs(Flex, { width: "100%", direction: "column", gap: 4, className: classNames?.root, children: [
-    /* @__PURE__ */ jsx(
-      Text,
-      {
-        size: "sm",
-        intensity: 54,
-        className: cn("oui-text-center", classNames?.description),
-        children: t("affiliate.newReferralProgram.tradeUnlock.description", {
-          volume: formatRequiredVolume
-        })
-      }
-    ),
-    /* @__PURE__ */ jsxs(Flex, { width: "100%", direction: "column", gap: 2, children: [
-      /* @__PURE__ */ jsxs(
-        Flex,
-        {
-          width: "100%",
-          justify: "between",
-          className: "oui-text-2xs oui-text-base-contrast",
-          children: [
-            /* @__PURE__ */ jsx(Text, { children: t("common.current") }),
-            /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
-              /* @__PURE__ */ jsx(Text.numeral, { rule: "price", dp: 0, children: current_volume }),
-              /* @__PURE__ */ jsx(
-                Text.numeral,
-                {
-                  intensity: 54,
-                  rule: "price",
-                  dp: 0,
-                  prefix: "/ ",
-                  suffix: " USDC",
-                  children: required_volume
-                }
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      width: "100%",
+      direction: "column",
+      gap: 4,
+      className: cn("oui-tradingVolumeProgress", classNames?.root),
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "sm",
+            intensity: 54,
+            className: cn(
+              "oui-tradingVolumeProgress-description",
+              "oui-text-center",
+              classNames?.description
+            ),
+            children: t("affiliate.newReferralProgram.tradeUnlock.description", {
+              volume: formatRequiredVolume
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxs(Flex, { width: "100%", direction: "column", gap: 2, children: [
+          /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              width: "100%",
+              justify: "between",
+              className: "oui-text-2xs oui-text-base-contrast",
+              children: [
+                /* @__PURE__ */ jsx(Text, { children: t("common.current") }),
+                /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
+                  /* @__PURE__ */ jsx(Text.numeral, { rule: "price", dp: 0, children: current_volume }),
+                  /* @__PURE__ */ jsx(
+                    Text.numeral,
+                    {
+                      intensity: 54,
+                      rule: "price",
+                      dp: 0,
+                      prefix: "/ ",
+                      suffix: " USDC",
+                      children: required_volume
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "oui-h-[8px] oui-w-full oui-rounded-full oui-bg-base-contrast-4", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                width: `${progressPercentage}%`
+              },
+              className: cn(
+                "oui-tradingVolumeProgress-bar oui-h-full oui-rounded-l-full oui-bg-primary-light",
+                progressPercentage === 100 && "oui-rounded-r-full"
               )
-            ] })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "oui-h-[8px] oui-w-full oui-rounded-full oui-bg-base-contrast-4", children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            width: `${progressPercentage}%`
-          },
-          className: cn(
-            "oui-h-full oui-rounded-l-full oui-bg-primary-light",
-            progressPercentage === 100 && "oui-rounded-r-full"
-          )
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsx(Button, { size: "md", onClick: gotoTrade, ...props.buttonProps, children: t("affiliate.newReferralProgram.tradeUnlock") })
-  ] });
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "md",
+            onClick: gotoTrade,
+            className: cn(
+              "oui-tradingVolumeProgress-cta-btn",
+              props.buttonProps?.className
+            ),
+            ...props.buttonProps,
+            children: t("affiliate.newReferralProgram.tradeUnlock")
+          }
+        )
+      ]
+    }
+  );
 };
 var Hero = () => {
   const { t } = useTranslation();
@@ -1072,7 +1118,7 @@ var Hero = () => {
     Flex,
     {
       gap: 8,
-      className: "oui-flex-col-reverse md:oui-flex-row",
+      className: "oui-affiliate-hero oui-flex-col-reverse md:oui-flex-row",
       id: "oui-affiliate-landing-hero",
       itemAlign: "center",
       children: [
@@ -1121,7 +1167,7 @@ var Hero = () => {
   );
 };
 var StepCard = (props) => {
-  const { step, icon, title, description } = props;
+  const { step, icon, title, description, className } = props;
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -1130,13 +1176,16 @@ var StepCard = (props) => {
       r: "2xl",
       p: 5,
       itemAlign: "start",
-      className: "oui-bg-base-9",
+      className: cn("oui-stepCard", "oui-bg-base-9", className),
       children: [
         /* @__PURE__ */ jsx(
           Flex,
           {
             justify: "center",
-            className: "oui-rounded-full oui-bg-base-7 lg:oui-justify-start",
+            className: cn(
+              "oui-stepCard-icon",
+              "oui-rounded-full oui-bg-base-7 lg:oui-justify-start"
+            ),
             p: 3,
             width: 48,
             height: 48,
@@ -1144,8 +1193,8 @@ var StepCard = (props) => {
             children: renderIcon(icon)
           }
         ),
-        /* @__PURE__ */ jsx(Text, { size: "xl", weight: "semibold", children: `${step}. ${title}` }),
-        /* @__PURE__ */ jsx(Text, { intensity: 54, size: "sm", children: description })
+        /* @__PURE__ */ jsx(Text, { size: "xl", weight: "semibold", className: "oui-stepCard-title", children: `${step}. ${title}` }),
+        /* @__PURE__ */ jsx(Text, { intensity: 54, size: "sm", className: "oui-stepCard-description", children: description })
       ]
     }
   );
@@ -1170,14 +1219,8 @@ var WalletIcon = () => /* @__PURE__ */ jsx(
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M7.006 2.93a4 4 0 0 0-4 4v10a4 4 0 0 0 4 4h10c1.552 0 3-1.448 3-3l-.004-1.163a3.025 3.025 0 0 0 2.004-2.837v-4c0-1.268-.822-2.428-1.994-2.815l-.006-1.185c0-1.553-1.448-3-3-3zm0 2h10c.448 0 1 .552 1 1v1h-3a3 3 0 0 0-3 3v4a3 3 0 0 0 3 3h3v1c0 .447-.552 1-1 1h-10a2 2 0 0 1-2-2v-10a2 2 0 0 1 2-2m8 4h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1m2 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2",
-        fill: "#fff",
-        fillOpacity: ".54"
-      }
-    )
+    className: "oui-fill-base-contrast-54",
+    children: /* @__PURE__ */ jsx("path", { d: "M7.006 2.93a4 4 0 0 0-4 4v10a4 4 0 0 0 4 4h10c1.552 0 3-1.448 3-3l-.004-1.163a3.025 3.025 0 0 0 2.004-2.837v-4c0-1.268-.822-2.428-1.994-2.815l-.006-1.185c0-1.553-1.448-3-3-3zm0 2h10c.448 0 1 .552 1 1v1h-3a3 3 0 0 0-3 3v4a3 3 0 0 0 3 3h3v1c0 .447-.552 1-1 1h-10a2 2 0 0 1-2-2v-10a2 2 0 0 1 2-2m8 4h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1m2 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2" })
   }
 );
 var SettingsIcon = () => /* @__PURE__ */ jsx(
@@ -1188,14 +1231,8 @@ var SettingsIcon = () => /* @__PURE__ */ jsx(
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M14.99 2.93c-1.267 0-2.45.832-2.818 2.002L3.99 4.93a1 1 0 0 0 0 2l8.18-.001c.449 1.225 1.552 2 2.82 2s2.382-.777 2.838-2.008l2.162.009a1 1 0 0 0 0-2h-2.17c-.482-1.22-1.562-2-2.83-2m0 2a1 1 0 1 1 0 2 1 1 0 0 1 0-2m-6 4c-1.317 0-2.42.82-2.823 2.002-.14.009-2.176-.002-2.176-.002a1 1 0 0 0 0 2s2.052-.021 2.18-.008a2.95 2.95 0 0 0 2.82 2.008c1.268 0 2.354-.777 2.83-1.997l8.17-.003a1 1 0 0 0 0-2l-8.176-.01A3.01 3.01 0 0 0 8.99 8.93m0 2a1 1 0 1 1 0 2 1 1 0 0 1 0-2m6 4c-1.267 0-2.427.835-2.819 1.99l-8.18.01a1 1 0 0 0 0 2h8.165a3.02 3.02 0 0 0 2.835 2c1.268 0 2.36-.793 2.842-2h2.158a1 1 0 0 0 0-2l-2.167-.006a3.03 3.03 0 0 0-2.833-1.994m0 2a1 1 0 1 1 0 2 1 1 0 0 1 0-2",
-        fill: "#fff",
-        fillOpacity: ".54"
-      }
-    )
+    className: "oui-fill-base-contrast-54",
+    children: /* @__PURE__ */ jsx("path", { d: "M14.99 2.93c-1.267 0-2.45.832-2.818 2.002L3.99 4.93a1 1 0 0 0 0 2l8.18-.001c.449 1.225 1.552 2 2.82 2s2.382-.777 2.838-2.008l2.162.009a1 1 0 0 0 0-2h-2.17c-.482-1.22-1.562-2-2.83-2m0 2a1 1 0 1 1 0 2 1 1 0 0 1 0-2m-6 4c-1.317 0-2.42.82-2.823 2.002-.14.009-2.176-.002-2.176-.002a1 1 0 0 0 0 2s2.052-.021 2.18-.008a2.95 2.95 0 0 0 2.82 2.008c1.268 0 2.354-.777 2.83-1.997l8.17-.003a1 1 0 0 0 0-2l-8.176-.01A3.01 3.01 0 0 0 8.99 8.93m0 2a1 1 0 1 1 0 2 1 1 0 0 1 0-2m6 4c-1.267 0-2.427.835-2.819 1.99l-8.18.01a1 1 0 0 0 0 2h8.165a3.02 3.02 0 0 0 2.835 2c1.268 0 2.36-.793 2.842-2h2.158a1 1 0 0 0 0-2l-2.167-.006a3.03 3.03 0 0 0-2.833-1.994m0 2a1 1 0 1 1 0 2 1 1 0 0 1 0-2" })
   }
 );
 var RocketIcon = () => /* @__PURE__ */ jsx(
@@ -1206,14 +1243,8 @@ var RocketIcon = () => /* @__PURE__ */ jsx(
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M18.527 13.88c-.423.424-.884.808-1.345 1.154a.63.63 0 0 0-.269.423 9.2 9.2 0 0 1-2.459 4.346 10 10 0 0 1-1.883 1.462c-.576.346-1.268-.231-1.037-.885.384-1 .538-2.076.538-3.192-.077 0-.192.039-.27.039a39 39 0 0 1-2.612-2.423 51 51 0 0 1-2.42-2.615c0-.077.038-.193.038-.27-1.115 0-2.19.193-3.19.539-.614.23-1.23-.462-.883-1.039a10 10 0 0 1 1.46-1.884 9.2 9.2 0 0 1 4.342-2.461c.153-.039.307-.154.422-.27.346-.5.73-.923 1.153-1.346 2.997-3 7.185-4.038 11.066-3.153a.76.76 0 0 1 .538.538c.845 3.846-.192 8.038-3.189 11.038m-1.69-6.73a2.41 2.41 0 0 0-3.382 0 2.416 2.416 0 0 0 0 3.385 2.41 2.41 0 0 0 3.381 0c.96-.962.96-2.462 0-3.385M8.266 18.92c-.73.73-5.225 3.807-6.109 2.923-.884-.885 2.19-5.385 2.92-6.115s2.037-.616 2.92.269c.884.885 1 2.192.27 2.923",
-        fill: "#fff",
-        fillOpacity: ".54"
-      }
-    )
+    className: "oui-fill-base-contrast-54",
+    children: /* @__PURE__ */ jsx("path", { d: "M18.527 13.88c-.423.424-.884.808-1.345 1.154a.63.63 0 0 0-.269.423 9.2 9.2 0 0 1-2.459 4.346 10 10 0 0 1-1.883 1.462c-.576.346-1.268-.231-1.037-.885.384-1 .538-2.076.538-3.192-.077 0-.192.039-.27.039a39 39 0 0 1-2.612-2.423 51 51 0 0 1-2.42-2.615c0-.077.038-.193.038-.27-1.115 0-2.19.193-3.19.539-.614.23-1.23-.462-.883-1.039a10 10 0 0 1 1.46-1.884 9.2 9.2 0 0 1 4.342-2.461c.153-.039.307-.154.422-.27.346-.5.73-.923 1.153-1.346 2.997-3 7.185-4.038 11.066-3.153a.76.76 0 0 1 .538.538c.845 3.846-.192 8.038-3.189 11.038m-1.69-6.73a2.41 2.41 0 0 0-3.382 0 2.416 2.416 0 0 0 0 3.385 2.41 2.41 0 0 0 3.381 0c.96-.962.96-2.462 0-3.385M8.266 18.92c-.73.73-5.225 3.807-6.109 2.923-.884-.885 2.19-5.385 2.92-6.115s2.037-.616 2.92.269c.884.885 1 2.192.27 2.923" })
   }
 );
 var HowItWorks = () => {
@@ -1240,22 +1271,36 @@ var HowItWorks = () => {
       }
     ];
   }, [t]);
-  return /* @__PURE__ */ jsxs(Box, { id: "oui-affiliate-landing-how-it-works", children: [
-    /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", children: [
-      /* @__PURE__ */ jsx(Text, { weight: "semibold", className: "oui-text-[32px]", children: t("affiliate.howItWorks.title") }),
-      /* @__PURE__ */ jsx(Box, { py: 4, children: /* @__PURE__ */ jsx(Text, { intensity: 54, children: t("affiliate.howItWorks.description") }) })
-    ] }),
-    /* @__PURE__ */ jsx(Grid, { className: "oui-grid-cols-1 md:oui-grid-cols-3", gap: 6, children: steps.map((step) => /* @__PURE__ */ jsx(
-      StepCard,
-      {
-        step: step.step,
-        icon: step.icon,
-        title: step.title,
-        description: step.description
-      },
-      step.step
-    )) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      id: "oui-affiliate-landing-how-it-works",
+      className: "oui-affiliate-howItWorks",
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", children: [
+          /* @__PURE__ */ jsx(Text, { weight: "semibold", className: "oui-text-[32px]", children: t("affiliate.howItWorks.title") }),
+          /* @__PURE__ */ jsx(Box, { py: 4, children: /* @__PURE__ */ jsx(Text, { intensity: 54, children: t("affiliate.howItWorks.description") }) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Grid,
+          {
+            className: "oui-howItWorks-steps oui-grid-cols-1 md:oui-grid-cols-3",
+            gap: 6,
+            children: steps.map((step) => /* @__PURE__ */ jsx(
+              StepCard,
+              {
+                step: step.step,
+                icon: step.icon,
+                title: step.title,
+                description: step.description
+              },
+              step.step
+            ))
+          }
+        )
+      ]
+    }
+  );
 };
 var LandingPage = () => {
   return /* @__PURE__ */ jsxs(
@@ -1265,7 +1310,7 @@ var LandingPage = () => {
       direction: "column",
       gap: 10,
       itemAlign: "stretch",
-      className: "oui-mx-auto oui-w-full oui-p-5 md:oui-w-[1040px] md:oui-py-12",
+      className: "oui-affiliate-landing-page oui-mx-auto oui-w-full oui-p-5 md:oui-w-[1040px] md:oui-py-12",
       children: [
         /* @__PURE__ */ jsx(Hero, {}),
         /* @__PURE__ */ jsx(HowItWorks, {}),
@@ -1279,27 +1324,34 @@ var CommissionChart = (props) => {
   return /* @__PURE__ */ jsxs(
     Flex,
     {
-      id: "oui-affiliate-affiliate-titleStatistic",
       r: "2xl",
       p: 6,
       width: "100%",
       gap: 4,
       direction: "column",
-      className: "oui-border oui-border-line-6 oui-bg-base-9",
+      className: "oui-affiliate-commissionChart oui-border oui-border-line-6 oui-bg-base-9",
       children: [
-        /* @__PURE__ */ jsxs(Flex, { justify: "between", width: "100%", children: [
-          /* @__PURE__ */ jsx(Text, { size: "lg", children: `${t("affiliate.commission")} (USDC)` }),
-          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-            Select.options,
-            {
-              size: "xs",
-              value: props.period,
-              onValueChange: props.onPeriodChange,
-              options: props.periodTypes
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsx(Flex, { className: "oui-flex oui-h-[170px] oui-w-full oui-flex-row oui-items-stretch 2xl:oui-h-[196px]", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            justify: "between",
+            width: "100%",
+            className: "oui-commissionChart-header",
+            children: [
+              /* @__PURE__ */ jsx(Text, { size: "lg", children: `${t("affiliate.commission")} (USDC)` }),
+              /* @__PURE__ */ jsx("div", { className: "oui-commissionChart-period-select", children: /* @__PURE__ */ jsx(
+                Select.options,
+                {
+                  size: "xs",
+                  value: props.period,
+                  onValueChange: props.onPeriodChange,
+                  options: props.periodTypes
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Flex, { className: "oui-commissionChart-body oui-flex oui-h-[170px] oui-w-full oui-flex-row oui-items-stretch 2xl:oui-h-[196px]", children: /* @__PURE__ */ jsx(
           VolBarChart,
           {
             data: props.dataSource,
@@ -1402,7 +1454,10 @@ var MultiLevelReferral = (props) => {
       p: 5,
       direction: "column",
       intensity: 900,
-      className: "oui-border oui-border-line-6",
+      className: cn(
+        "oui-affiliate-multiLevelReferral",
+        "oui-border oui-border-line-6"
+      ),
       children: [
         /* @__PURE__ */ jsx(Text, { size: "lg", className: "oui-w-full oui-text-start", children: t("affiliate.referral") }),
         /* @__PURE__ */ jsxs(
@@ -1504,21 +1559,30 @@ var ReferralInfo = (props) => {
       p: 5,
       direction: "column",
       intensity: 900,
-      className: "oui-border oui-border-line-6",
+      className: "oui-affiliate-referralInfo oui-border oui-border-line-6",
       children: [
-        /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "between", width: "100%", children: [
-          /* @__PURE__ */ jsx(Text, { size: "lg", children: t("affiliate.referral") }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              size: "xs",
-              color: "secondary",
-              onClick: () => props.onEdit("referralCode" /* ReferralCode */),
-              children: t("affiliate.configure")
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs(Container, { className: "oui-flex-col oui-items-start oui-gap-4 oui-p-5", children: [
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            direction: "row",
+            justify: "between",
+            width: "100%",
+            className: "oui-referralInfo-header",
+            children: [
+              /* @__PURE__ */ jsx(Text, { size: "lg", children: t("affiliate.referral") }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "xs",
+                  color: "secondary",
+                  onClick: () => props.onEdit("referralCode" /* ReferralCode */),
+                  children: t("affiliate.configure")
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(Container, { className: "oui-referralInfo-code oui-flex-col oui-items-start oui-gap-4 oui-p-5", children: [
           /* @__PURE__ */ jsx(
             Flex,
             {
@@ -1536,7 +1600,7 @@ var ReferralInfo = (props) => {
             /* @__PURE__ */ jsx(CopyButton, { value: props.referralCode })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs(Container, { className: "oui-p-5", children: [
+        /* @__PURE__ */ jsxs(Container, { className: "oui-referralInfo-link oui-p-5", children: [
           /* @__PURE__ */ jsx(Text, { size: "lg", color: "primaryLight", children: props.referralLink }),
           /* @__PURE__ */ jsx(CopyButton, { value: props.referralLink })
         ] }),
@@ -1549,7 +1613,16 @@ var ReferralInfo = (props) => {
             children: [
               /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "between", width: "100%", children: [
                 /* @__PURE__ */ jsx(Text, { size: "sm", children: t("affiliate.revenueSplitStrategy") }),
-                /* @__PURE__ */ jsx(Button, { size: "xs", color: "secondary", onClick: () => props.onEdit(), children: t("common.edit") })
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "xs",
+                    color: "secondary",
+                    className: "oui-affiliate-referralInfo-editSplit-btn",
+                    onClick: () => props.onEdit(),
+                    children: t("common.edit")
+                  }
+                )
               ] }),
               /* @__PURE__ */ jsxs(Flex, { justify: "between", width: "100%", mt: 4, children: [
                 /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 54, children: t("affiliate.youKeep") }),
@@ -2017,18 +2090,26 @@ var CommissionTableUI = (props) => {
       }
     ];
   }, [t]);
-  return /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-w-full oui-flex-col", children: [
-    /* @__PURE__ */ jsx(Flex, { width: "100%", height: 49, className: "oui-border-b oui-border-line-6", children: /* @__PURE__ */ jsx("div", { className: "oui-px-3", children: /* @__PURE__ */ jsx(
-      DatePicker.range,
+  return /* @__PURE__ */ jsxs("div", { className: "oui-affiliate-commissionTable oui-flex oui-w-full oui-flex-col", children: [
+    /* @__PURE__ */ jsx(
+      Flex,
       {
-        size: "xs",
-        value: props.dateRange,
-        onChange: props.setDateRange,
-        max: 90,
-        disabled: { after: /* @__PURE__ */ new Date() }
+        width: "100%",
+        height: 49,
+        className: "oui-commissionTable-header oui-border-b oui-border-line-6",
+        children: /* @__PURE__ */ jsx("div", { className: "oui-px-3", children: /* @__PURE__ */ jsx(
+          DatePicker.range,
+          {
+            size: "xs",
+            value: props.dateRange,
+            onChange: props.setDateRange,
+            max: 90,
+            disabled: { after: /* @__PURE__ */ new Date() }
+          }
+        ) })
       }
-    ) }) }),
-    isMobile ? /* @__PURE__ */ jsx("div", { className: "oui-flex oui-flex-col oui-px-4", children: /* @__PURE__ */ jsx(
+    ),
+    isMobile ? /* @__PURE__ */ jsx("div", { className: "oui-affiliate-commissionTable-list oui-flex oui-flex-col oui-px-4", children: /* @__PURE__ */ jsx(
       ListView,
       {
         dataSource: props.commissionData,
@@ -2038,19 +2119,25 @@ var CommissionTableUI = (props) => {
           /* @__PURE__ */ jsx(Divider, { intensity: 8 })
         ] }, index)
       }
-    ) }) : /* @__PURE__ */ jsx("div", { className: `oui-px-3 ${showPagination ? "" : "oui-pb-3"}`, children: /* @__PURE__ */ jsx(
-      AuthGuardDataTable,
+    ) }) : /* @__PURE__ */ jsx(
+      "div",
       {
-        bordered: true,
-        columns,
-        dataSource: props.commissionData,
-        loading: props.isLoading,
-        pagination: showPagination ? props.pagination : void 0,
-        onSort: props.onSort,
-        onRow: () => ({ className: "oui-h-12" }),
-        className: "[&_.oui-h-10.oui-w-full]:!oui-mx-0 [&_.oui-table-pagination]:!oui-justify-end [&_th]:!oui-tracking-[0.03em] [&_th]:!oui-px-3 [&_td]:!oui-px-3"
+        className: `oui-affiliate-commissionTable-container oui-px-3 ${showPagination ? "" : "oui-pb-3"}`,
+        children: /* @__PURE__ */ jsx(
+          AuthGuardDataTable,
+          {
+            bordered: true,
+            columns,
+            dataSource: props.commissionData,
+            loading: props.isLoading,
+            pagination: showPagination ? props.pagination : void 0,
+            onSort: props.onSort,
+            onRow: () => ({ className: "oui-commissionTable-row oui-h-12" }),
+            className: "oui-commissionTable-table [&_.oui-h-10.oui-w-full]:!oui-mx-0 [&_.oui-table-pagination]:!oui-justify-end [&_th]:!oui-tracking-[0.03em] [&_th]:!oui-px-3 [&_td]:!oui-px-3"
+          }
+        )
       }
-    ) })
+    )
   ] });
 };
 var CommissionTableWidget = (props) => {
@@ -2261,7 +2348,7 @@ var MobileRefereeItem = ({ item, onEditReferee }) => {
           /* @__PURE__ */ jsx(
             Text,
             {
-              className: "oui-cursor-pointer oui-text-primary-light",
+              className: "oui-refereesTable-edit-btn oui-cursor-pointer oui-text-primary-light",
               onClick: () => onEditReferee("edit" /* Edit */, item),
               children: t("common.edit")
             }
@@ -2269,7 +2356,7 @@ var MobileRefereeItem = ({ item, onEditReferee }) => {
           !item.is_default_rate && /* @__PURE__ */ jsx(
             Text,
             {
-              className: "oui-cursor-pointer oui-text-primary-light",
+              className: "oui-refereesTable-reset-btn oui-cursor-pointer oui-text-primary-light",
               onClick: () => onEditReferee("reset" /* Reset */, item),
               children: t("common.reset")
             }
@@ -2382,7 +2469,7 @@ var RefereesTableUI = (props) => {
           /* @__PURE__ */ jsx(
             Text,
             {
-              className: "oui-cursor-pointer oui-text-primary-light",
+              className: "oui-refereesTable-edit-btn oui-cursor-pointer oui-text-primary-light",
               onClick: () => props.onEditReferee("edit" /* Edit */, record),
               children: t("common.edit")
             }
@@ -2390,7 +2477,7 @@ var RefereesTableUI = (props) => {
           !record.is_default_rate && /* @__PURE__ */ jsx(
             Text,
             {
-              className: "oui-ml-2 oui-cursor-pointer oui-text-primary-light",
+              className: "oui-refereesTable-reset-btn oui-ml-2 oui-cursor-pointer oui-text-primary-light",
               onClick: () => props.onEditReferee("reset" /* Reset */, record),
               children: t("common.reset")
             }
@@ -2399,7 +2486,7 @@ var RefereesTableUI = (props) => {
       }
     ];
   }, [t, props.onEditReferee]);
-  return /* @__PURE__ */ jsx(Fragment, { children: isMobile ? /* @__PURE__ */ jsx("div", { className: "oui-flex oui-flex-col oui-px-4", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment, { children: isMobile ? /* @__PURE__ */ jsx("div", { className: "oui-affiliate-refereesTable oui-flex oui-flex-col oui-px-4", children: /* @__PURE__ */ jsx(
     ListView,
     {
       dataSource: props.refereesData,
@@ -2415,19 +2502,25 @@ var RefereesTableUI = (props) => {
         /* @__PURE__ */ jsx(Divider, { intensity: 8 })
       ] }, index)
     }
-  ) }) : /* @__PURE__ */ jsx("div", { className: `oui-px-3 ${showPagination ? "" : "oui-pb-3"}`, children: /* @__PURE__ */ jsx(
-    AuthGuardDataTable,
+  ) }) : /* @__PURE__ */ jsx(
+    "div",
     {
-      bordered: true,
-      columns: refereeColumns,
-      dataSource: props.refereesData,
-      loading: props.isRefereesLoading,
-      pagination: showPagination ? props.refereesPagination : void 0,
-      onSort: props.onRefereesSort,
-      onRow: () => ({ className: "oui-h-12" }),
-      className: "[&_.oui-h-10.oui-w-full]:!oui-mx-0 [&_.oui-table-pagination]:!oui-justify-end [&_th]:!oui-tracking-[0.03em] [&_th]:!oui-px-3 [&_td]:!oui-px-3"
+      className: `oui-affiliate-refereesTable oui-px-3 ${showPagination ? "" : "oui-pb-3"}`,
+      children: /* @__PURE__ */ jsx(
+        AuthGuardDataTable,
+        {
+          bordered: true,
+          columns: refereeColumns,
+          dataSource: props.refereesData,
+          loading: props.isRefereesLoading,
+          pagination: showPagination ? props.refereesPagination : void 0,
+          onSort: props.onRefereesSort,
+          onRow: () => ({ className: "oui-refereesTable-row oui-h-12" }),
+          className: "oui-refereesTable-table [&_.oui-h-10.oui-w-full]:!oui-mx-0 [&_.oui-table-pagination]:!oui-justify-end [&_th]:!oui-tracking-[0.03em] [&_th]:!oui-px-3 [&_td]:!oui-px-3"
+        }
+      )
     }
-  ) }) });
+  ) });
 };
 var RefereesTableWidget = (props) => {
   const state = useRefereesTableScript(props);
@@ -2653,7 +2746,7 @@ var MobileReferralCodeItem = ({ item, copyCode }) => {
     /* @__PURE__ */ jsx(MobileCell, { label: t("common.action"), children: /* @__PURE__ */ jsx(
       Text,
       {
-        className: "oui-cursor-pointer oui-text-primary-light",
+        className: "oui-referralCodesTable-copyCode-btn oui-cursor-pointer oui-text-primary-light",
         onClick: (e) => {
           e.stopPropagation();
           copyCode(item.code);
@@ -2781,7 +2874,7 @@ var ReferralCodesTableUI = (props) => {
       }
     ];
   }, [t, props.copyCode]);
-  return /* @__PURE__ */ jsx(Fragment, { children: isMobile ? /* @__PURE__ */ jsx("div", { className: "oui-flex oui-flex-col oui-px-4", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment, { children: isMobile ? /* @__PURE__ */ jsx("div", { className: "oui-affiliate-referralCodesTable oui-flex oui-flex-col oui-px-4", children: /* @__PURE__ */ jsx(
     ListView,
     {
       dataSource: props.sortedCodes,
@@ -2791,7 +2884,7 @@ var ReferralCodesTableUI = (props) => {
         /* @__PURE__ */ jsx(Divider, { intensity: 8 })
       ] }, index)
     }
-  ) }) : /* @__PURE__ */ jsx("div", { className: "oui-px-3", children: /* @__PURE__ */ jsx(
+  ) }) : /* @__PURE__ */ jsx("div", { className: "oui-affiliate-referralCodesTable oui-px-3", children: /* @__PURE__ */ jsx(
     AuthGuardDataTable,
     {
       bordered: true,
@@ -2799,8 +2892,8 @@ var ReferralCodesTableUI = (props) => {
       dataSource: props.sortedCodes,
       loading: props.isLoading,
       onSort: props.onSort,
-      onRow: () => ({ className: "oui-h-12" }),
-      className: "oui-pb-3 [&_.oui-h-10.oui-w-full]:!oui-mx-0 [&_.oui-table-pagination]:!oui-justify-end [&_th]:!oui-tracking-[0.03em] [&_th]:!oui-px-3 [&_td]:!oui-px-3"
+      onRow: () => ({ className: "oui-referralCodesTable-row oui-h-12" }),
+      className: "oui-referralCodesTable-table oui-pb-3 [&_.oui-h-10.oui-w-full]:!oui-mx-0 [&_.oui-table-pagination]:!oui-justify-end [&_th]:!oui-tracking-[0.03em] [&_th]:!oui-px-3 [&_td]:!oui-px-3"
     }
   ) }) });
 };
@@ -2814,7 +2907,7 @@ var ReferrerTableUI = (props) => {
     Flex,
     {
       direction: "column",
-      className: "oui-rounded-2xl oui-bg-base-9 [&_td]:oui-font-medium [&_td]:oui-tracking-[0.03em] [&_th]:oui-font-semibold",
+      className: "oui-affiliate-referrerTable oui-rounded-2xl oui-bg-base-9 [&_td]:oui-font-medium [&_td]:oui-tracking-[0.03em] [&_th]:oui-font-semibold",
       px: 3,
       pt: 4,
       gap: 4,
@@ -2824,7 +2917,7 @@ var ReferrerTableUI = (props) => {
         {
           value: props.activeTab,
           onValueChange: (value) => props.setActiveTab(value),
-          className: "oui-w-full oui-text-base",
+          className: "oui-referrerTable-tabs oui-w-full oui-text-base",
           variant: "text",
           classNames: {
             tabsListContainer: "oui-px-3",
@@ -2860,7 +2953,7 @@ var Summary = (props) => {
       gap: 6,
       direction: "column",
       intensity: 900,
-      className: "oui-border oui-border-line-6",
+      className: "oui-affiliate-summary oui-border oui-border-line-6",
       children: [
         /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "between", width: "100%", children: [
           /* @__PURE__ */ jsx(Text, { className: "oui-text-lg", children: t("affiliate.summary") }),
@@ -3054,8 +3147,12 @@ var MultiLevelAffiliatePage = () => {
   return /* @__PURE__ */ jsx(
     Flex,
     {
-      id: "oui-affiliate-affiliate-page",
-      className: cn("oui-h-lvw", "oui-font-semibold", "oui-pb-24 oui-pt-16"),
+      className: cn(
+        "oui-multiLevel-affiliate-page",
+        "oui-h-lvw",
+        "oui-font-semibold",
+        "oui-pb-24 oui-pt-16"
+      ),
       direction: "column",
       gap: 4,
       children: /* @__PURE__ */ jsx("div", { className: "oui-w-full oui-px-5 md:oui-mx-auto md:oui-max-w-[1040px]", children: /* @__PURE__ */ jsxs(
@@ -3079,13 +3176,13 @@ var MultiLevelAffiliatePage = () => {
                 rows: 1,
                 className: "md:oui-grid-cols-2",
                 children: [
-                  /* @__PURE__ */ jsx("div", { className: "oui-order-2 md:oui-order-1", children: /* @__PURE__ */ jsx(SummaryWidget, {}) }),
+                  /* @__PURE__ */ jsx("div", { className: "oui-multiLevel-affiliate-summary-container oui-order-2 md:oui-order-1", children: /* @__PURE__ */ jsx(SummaryWidget, {}) }),
                   /* @__PURE__ */ jsx("div", { className: "oui-order-1 md:oui-order-2", children: multiLevelRebateInfo?.referral_code ? /* @__PURE__ */ jsx(ReferralInfoWidget, {}) : /* @__PURE__ */ jsx(MultiLevelReferralWidget, {}) })
                 ]
               }
             ),
             /* @__PURE__ */ jsx(CommissionChartWidget, {}),
-            /* @__PURE__ */ jsx(ReferrerTableWidget, {})
+            /* @__PURE__ */ jsx("div", { className: "oui-multiLevel-affiliate-referrerTables-container", children: /* @__PURE__ */ jsx(ReferrerTableWidget, {}) })
           ]
         }
       ) })
@@ -3093,17 +3190,15 @@ var MultiLevelAffiliatePage = () => {
   );
 };
 var AffiliateIcon = (props) => {
-  const { size = 16, className, ...rest } = props;
+  const { size = 16, ...rest } = props;
   return /* @__PURE__ */ jsxs(
     "svg",
     {
       width: size,
       height: size,
       viewBox: "0 0 16 16",
-      fill: "#fff",
-      fillOpacity: ".98",
+      fill: "currentColor",
       xmlns: "http://www.w3.org/2000/svg",
-      className: props.className,
       ...rest,
       children: [
         /* @__PURE__ */ jsx("path", { d: "M8 1.302c-3.683 0-6.655 2.985-6.667 6.667-.013 3.676 2.987 6.68 6.666 6.687s6.674-3.037 6.667-6.687c-.007-3.682-2.985-6.667-6.667-6.667m0 1.333a5.333 5.333 0 0 1 5.333 5.334c0 1.5-.625 2.852-1.622 3.821-.49-1.062-1.545-1.821-2.753-1.821H7.04c-1.207 0-2.259.75-2.75 1.812A5.3 5.3 0 0 1 2.666 7.97a5.333 5.333 0 0 1 5.333-5.334M8 3.97a2.667 2.667 0 1 0 0 5.333A2.667 2.667 0 0 0 8 3.97" }),
@@ -3111,7 +3206,7 @@ var AffiliateIcon = (props) => {
           "path",
           {
             d: "M16 12.667a3.333 3.333 0 1 1-6.667 0 3.333 3.333 0 0 1 6.667 0",
-            fill: "#1828C3"
+            fill: "rgb(var(--oui-color-primary-darken))"
           }
         ),
         /* @__PURE__ */ jsx("path", { d: "M11.917 11.433a.917.917 0 0 0-.917.917c0 .53.302 1.031.802 1.49a4.6 4.6 0 0 0 .713.53l.068.043c.05.027.117.027.167 0l.068-.042q.08-.05.177-.115c.182-.123.366-.26.536-.416.5-.459.802-.96.802-1.49a.917.917 0 0 0-.917-.917.97.97 0 0 0-.744.386.95.95 0 0 0-.756-.386" })
@@ -3120,33 +3215,35 @@ var AffiliateIcon = (props) => {
   );
 };
 var TraderIcon = (props) => {
-  const { size = 16, className, ...rest } = props;
+  const { size = 16, ...rest } = props;
   return /* @__PURE__ */ jsxs(
     "svg",
     {
       width: size,
       height: size,
       viewBox: "0 0 16 16",
-      fill: "white",
-      fillOpacity: "0.36",
       xmlns: "http://www.w3.org/2000/svg",
-      className: props.className,
       ...rest,
       children: [
-        /* @__PURE__ */ jsx("path", { d: "M7.99929 1.30212C4.31735 1.30212 1.34509 4.28679 1.33262 7.96878C1.32015 11.6454 4.32042 14.6488 7.99929 14.6561C11.6782 14.6634 14.6726 11.6194 14.666 7.96878C14.6593 4.28679 11.6812 1.30212 7.99929 1.30212ZM7.99929 2.63546C10.9448 2.63546 13.3326 5.02345 13.3326 7.96878C13.3326 9.46878 12.7078 10.8208 11.7112 11.7901C11.2202 10.7281 10.1656 9.96878 8.95762 9.96878C8.71802 9.96878 7.28042 9.96878 7.04095 9.96878C5.83369 9.96878 4.78215 10.7188 4.29095 11.7814C3.29429 10.8121 2.66595 9.46878 2.66595 7.96878C2.66595 5.02345 5.05375 2.63546 7.99929 2.63546ZM7.99929 3.96879C6.52649 3.96879 5.33255 5.16279 5.33262 6.63545C5.33262 8.10812 6.52649 9.30212 7.99929 9.30212C9.47202 9.30212 10.666 8.10812 10.666 6.63545C10.666 5.16279 9.47202 3.96879 7.99929 3.96879Z" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M7.99929 1.30212C4.31735 1.30212 1.34509 4.28679 1.33262 7.96878C1.32015 11.6454 4.32042 14.6488 7.99929 14.6561C11.6782 14.6634 14.6726 11.6194 14.666 7.96878C14.6593 4.28679 11.6812 1.30212 7.99929 1.30212ZM7.99929 2.63546C10.9448 2.63546 13.3326 5.02345 13.3326 7.96878C13.3326 9.46878 12.7078 10.8208 11.7112 11.7901C11.2202 10.7281 10.1656 9.96878 8.95762 9.96878C8.71802 9.96878 7.28042 9.96878 7.04095 9.96878C5.83369 9.96878 4.78215 10.7188 4.29095 11.7814C3.29429 10.8121 2.66595 9.46878 2.66595 7.96878C2.66595 5.02345 5.05375 2.63546 7.99929 2.63546ZM7.99929 3.96879C6.52649 3.96879 5.33255 5.16279 5.33262 6.63545C5.33262 8.10812 6.52649 9.30212 7.99929 9.30212C9.47202 9.30212 10.666 8.10812 10.666 6.63545C10.666 5.16279 9.47202 3.96879 7.99929 3.96879Z",
+            fill: "currentColor"
+          }
+        ),
         /* @__PURE__ */ jsx(
           "path",
           {
             d: "M16 12.6667C16 14.5076 14.5076 16 12.6666 16C10.8257 16 9.33331 14.5076 9.33331 12.6667C9.33331 10.8257 10.8257 9.33333 12.6666 9.33333C14.5076 9.33333 16 10.8257 16 12.6667Z",
-            fill: "#005A4F"
+            className: "oui-fill-success-darken"
           }
         ),
         /* @__PURE__ */ jsx(
           "path",
           {
             d: "M14.3325 13.3345C14.3325 13.2918 14.3182 13.2473 14.2857 13.2147L13.6658 12.6002L13.4315 12.8345L13.7595 13.1678H11.3325C11.2405 13.1678 11.1658 13.2425 11.1658 13.3345C11.1658 13.4265 11.2405 13.5012 11.3325 13.5012H13.7595L13.4315 13.8345L13.6658 14.0688L14.2857 13.4543C14.3182 13.4217 14.3325 13.3772 14.3325 13.3345ZM14.1658 12.0012C14.1658 11.9092 14.0912 11.8345 13.9992 11.8345H11.572L11.9002 11.5012L11.6658 11.2668L11.046 11.8813C10.981 11.9465 10.981 12.0558 11.046 12.121L11.6658 12.7355L11.9002 12.5012L11.572 12.1678H13.9992C14.0912 12.1678 14.1658 12.0932 14.1658 12.0012Z",
-            fill: "white",
-            fillOpacity: "0.98"
+            fill: "currentColor"
           }
         )
       ]
@@ -3169,14 +3266,14 @@ var USDCIcon = (props) => {
             "path",
             {
               d: "M10.5 20c5.542 0 10-4.458 10-10s-4.458-10-10-10S.5 4.458.5 10s4.458 10 10 10",
-              fill: "#2775CA"
+              fill: "rgb(var(--oui-color-primary))"
             }
           ),
           /* @__PURE__ */ jsx(
             "path",
             {
               d: "M13.5 11.473c0-1.452-.94-1.95-2.82-2.158-1.344-.166-1.613-.498-1.613-1.078s.448-.955 1.343-.955c.806 0 1.254.25 1.478.872.045.124.18.207.313.207h.717c.179 0 .313-.125.313-.29v-.042c-.179-.913-.985-1.618-2.015-1.701v-.996c0-.166-.134-.29-.358-.332h-.671c-.18 0-.314.124-.359.332v.954c-1.343.166-2.194.996-2.194 2.034 0 1.369.896 1.908 2.776 2.116 1.254.207 1.657.456 1.657 1.12s-.627 1.12-1.477 1.12c-1.165 0-1.568-.456-1.702-1.078a.32.32 0 0 0-.313-.25h-.762c-.179 0-.313.125-.313.291v.042c.179 1.037.895 1.784 2.373 1.991v.996c0 .166.134.29.358.332h.672c.18 0 .313-.124.358-.332v-.996c1.344-.207 2.239-1.079 2.239-2.199",
-              fill: "#fff",
+              fill: "rgb(var(--oui-color-base-foreground))",
               fillOpacity: ".98"
             }
           ),
@@ -3184,12 +3281,18 @@ var USDCIcon = (props) => {
             "path",
             {
               d: "M8.24 16.57c-3.458-1.215-5.23-4.986-3.945-8.324.665-1.821 2.127-3.208 3.944-3.859.178-.086.266-.216.266-.433v-.607c0-.174-.088-.304-.266-.347-.044 0-.133 0-.177.043-4.21 1.3-6.516 5.68-5.186 9.798.798 2.428 2.704 4.292 5.186 5.072.177.087.355 0 .4-.173.043-.043.043-.087.043-.173v-.608c0-.13-.133-.303-.266-.39m4.698-13.527c-.178-.086-.355 0-.4.174-.043.043-.043.086-.043.173v.607c0 .174.133.347.266.434 3.457 1.213 5.23 4.985 3.944 8.323-.664 1.821-2.127 3.209-3.944 3.859-.178.086-.266.216-.266.433v.607c0 .174.088.304.266.347.044 0 .133 0 .177-.043 4.21-1.3 6.515-5.68 5.186-9.798-.798-2.471-2.748-4.335-5.186-5.116",
-              fill: "#fff",
+              fill: "rgb(var(--oui-color-base-foreground))",
               fillOpacity: ".98"
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "a", children: /* @__PURE__ */ jsx("path", { fill: "#fff", d: "M.5 0h20v20H.5z" }) }) })
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "a", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "rgb(var(--oui-color-base-foreground))",
+            d: "M.5 0h20v20H.5z"
+          }
+        ) }) })
       ]
     }
   );
@@ -3735,7 +3838,7 @@ var TitleStatistic = (props) => {
           VolBarChart,
           {
             data: props.dataSource || EMPTY_LIST,
-            colors: { fill: "rgba(0, 180, 158, 1)" },
+            colors: { fill: "rgb(var(--oui-color-success))" },
             className: "oui-w-full oui-flex-1",
             tooltip: {
               rm: Decimal.ROUND_DOWN,
@@ -3851,9 +3954,7 @@ var EditIcon = (props) => {
       height: "13",
       viewBox: "0 0 12 13",
       xmlns: "http://www.w3.org/2000/svg",
-      fill: "white",
-      fillOpacity: "0.36",
-      className,
+      className: cn(className, "oui-fill-base-contrast-36"),
       ...rest,
       children: /* @__PURE__ */ jsx("path", { d: "M8.49773 1.47656C8.36523 1.47656 8.23223 1.52357 8.13823 1.61707C7.86023 1.89507 6.85973 2.89558 6.63773 3.11808L2.13523 7.62059L1.63473 8.12059C1.56523 8.19059 1.52923 8.28958 1.50973 8.38658L1.00973 10.8881C0.939727 11.2381 1.23773 11.5361 1.58773 11.4666C1.90073 11.4036 3.77673 11.0286 4.08923 10.9661C4.18623 10.9466 4.28523 10.9106 4.35523 10.8411L4.85523 10.3406L9.35773 5.83808C9.58023 5.61608 10.5807 4.61506 10.8587 4.33756C10.9522 4.24356 10.9992 4.11056 10.9992 3.97806C10.9992 3.15956 10.7907 2.57456 10.3582 2.13306C9.92173 1.68756 9.33873 1.47656 8.49773 1.47656ZM8.69473 2.48606C9.14623 2.51256 9.43873 2.61608 9.63923 2.82108C9.84423 3.03008 9.97373 3.32008 10.0017 3.76258C9.72773 4.03608 9.32673 4.43106 8.99823 4.75956C8.60173 4.36306 8.11273 3.87407 7.71623 3.47757C8.04523 3.14907 8.42123 2.75956 8.69473 2.48606ZM6.99723 4.19657L8.27923 5.47858L4.49573 9.26207L3.21373 7.98009L6.99723 4.19657ZM2.49473 8.69908L3.77673 9.98107L3.72973 10.0281C3.39973 10.0941 2.73323 10.2336 2.11923 10.3566L2.44773 8.74608L2.49473 8.69908Z" })
     }
@@ -3880,16 +3981,13 @@ var PinBtn = (props) => {
       children: props.pinned === false ? /* @__PURE__ */ jsx(
         UnPinIcon,
         {
-          size: props.size,
-          fillOpacity: 1,
-          className: "orderly-fill-primary-darken hover:orderly-fill-primary-darken/80"
+          size: props.size
         }
       ) : /* @__PURE__ */ jsx(
         PinnedIcon,
         {
           size: props.size,
-          fillOpacity: 1,
-          className: "orderly-fill-base-contrast-36 hover:orderly-fill-base-contrast"
+          className: "oui-text-base-contrast-36 hover:oui-text-base-contrast"
         }
       )
     }
@@ -3903,8 +4001,9 @@ var PinnedIcon = (props) => {
       width: size,
       height: size,
       viewBox: "0 0 16 16",
-      fill: "#608CFF",
+      fill: "currentColor",
       xmlns: "http://www.w3.org/2000/svg",
+      ...props,
       children: /* @__PURE__ */ jsx("path", { d: "M10.008 1.302a.74.74 0 0 0-.486.215c-1.033.988-1.349 1.815-.972 2.947-.88.675-1.437.841-2.536.841-1.503 0-2.484.181-3.152.848v.021a1.583 1.583 0 0 0 0 2.249l1.867 1.881-3.181 3.18c-.26.26-.28.696-.02.956.261.26.699.26.959 0l3.193-3.193 1.87 1.86a1.585 1.585 0 0 0 2.25 0h.02c.668-.667.854-1.522.854-3.144 0-1.03.212-1.758.853-2.523 1.232.361 1.95.015 2.96-.995a.68.68 0 0 0 .188-.479c0-.234-.06-.594-.209-1.041a5.34 5.34 0 0 0-1.312-2.103A5.35 5.35 0 0 0 11.05 1.51c-.448-.149-.808-.208-1.042-.208" })
     }
   );
@@ -3917,9 +4016,9 @@ var UnPinIcon = (props) => {
       width: size,
       height: size,
       viewBox: "0 0 16 16",
-      fill: "#fff",
-      fillOpacity: ".36",
+      fill: "currentColor",
       xmlns: "http://www.w3.org/2000/svg",
+      ...props,
       children: /* @__PURE__ */ jsx("path", { d: "M10.008 1.302a.74.74 0 0 0-.486.215c-1.033.988-1.349 1.815-.972 2.947-.88.675-1.437.841-2.536.841-1.503 0-2.484.181-3.152.848v.021a1.583 1.583 0 0 0 0 2.249l1.867 1.881-3.181 3.18c-.26.26-.28.696-.02.956.261.26.699.26.959 0l3.193-3.193 1.87 1.86a1.585 1.585 0 0 0 2.25 0h.02c.668-.667.854-1.522.854-3.144 0-1.03.212-1.758.853-2.523 1.232.361 1.95.015 2.96-.995a.68.68 0 0 0 .188-.479c0-.234-.06-.594-.209-1.041a5.34 5.34 0 0 0-1.312-2.103A5.35 5.35 0 0 0 11.05 1.51c-.448-.149-.808-.208-1.042-.208m.258 1.37c.708.131 1.421.6 1.93 1.108.507.507.94 1.13 1.119 1.944-.636.61-1.026.659-1.662.324a.67.67 0 0 0-.779.116c-1.214 1.213-1.533 2.314-1.533 3.8 0 1.293-.076 1.774-.48 2.207-.113.123-.27.104-.374 0L3.799 7.486a.24.24 0 0 1-.017-.34c.239-.29.769-.514 2.226-.514 1.742.001 2.668-.447 3.812-1.52a.67.67 0 0 0 .125-.77c-.343-.685-.29-1.046.321-1.67" })
     }
   );
@@ -4005,7 +4104,7 @@ var MobileCellItem = (props) => {
         editRate && /* @__PURE__ */ jsx(
           EditIcon,
           {
-            className: "oui-mt-px oui-cursor-pointer oui-fill-white/[.36] hover:oui-fill-white/80",
+            className: "oui-mt-px oui-cursor-pointer oui-fill-base-contrast-36 hover:oui-fill-base-contrast-80",
             fillOpacity: 1,
             fill: "currentColor",
             onClick: () => editRate()
@@ -4184,7 +4283,7 @@ var DesktopLayout = (props) => {
             /* @__PURE__ */ jsx(
               EditIcon,
               {
-                className: "oui-mt-[6px] oui-cursor-pointer oui-fill-white/[.36] hover:oui-fill-white/80",
+                className: "oui-mt-[6px] oui-cursor-pointer oui-fill-base-contrast-36 hover:oui-fill-base-contrast-80",
                 fillOpacity: 1,
                 fill: "currentColor",
                 onClick: (e) => props.editRate?.(data)
@@ -5225,7 +5324,7 @@ var ApplyIcon = () => {
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M24.941 5.4h-6.682a.6.6 0 0 0-.593.509l-.462 3a.6.6 0 0 0 .593.691h7.606a.6.6 0 0 0 .593-.691l-.462-3a.6.6 0 0 0-.593-.509m-6.682-1.8a2.4 2.4 0 0 0-2.372 2.035l-.462 3a2.4 2.4 0 0 0 2.372 2.765h7.606a2.4 2.4 0 0 0 2.372-2.765l-.462-3A2.4 2.4 0 0 0 24.941 3.6z",
-            fill: "#fff",
+            fill: "rgb(var(--oui-color-base-foreground))",
             fillOpacity: ".36"
           }
         ),
@@ -5233,14 +5332,14 @@ var ApplyIcon = () => {
           "path",
           {
             d: "M32.721 28.2c.924-1.6 3.233-1.6 4.157 0l7.275 12.6c.924 1.6-.231 3.6-2.079 3.6H27.525c-1.848 0-3.002-2-2.078-3.6z",
-            fill: "#335FFC"
+            fill: "rgb(var(--oui-color-primary-darken))"
           }
         ),
         /* @__PURE__ */ jsx(
           "path",
           {
             d: "M33.492 38.12H31.56c-.252 0-.426-.276-.336-.535l1.92-5.53a.4.4 0 0 1 .132-.185.34.34 0 0 1 .204-.07h3.24c.255 0 .43.284.333.544l-1.118 3.011h2.104c.31 0 .475.4.27.656l-5.158 6.453c-.251.313-.716.041-.619-.362z",
-            fill: "#fff",
+            fill: "rgb(var(--oui-color-base-foreground))",
             fillOpacity: ".98"
           }
         ),
@@ -5250,7 +5349,7 @@ var ApplyIcon = () => {
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M14.4 16.8v2.4h2.4v-2.4zM13.2 15a.6.6 0 0 0-.6.6v4.8a.6.6 0 0 0 .6.6H18a.6.6 0 0 0 .6-.6v-4.8a.6.6 0 0 0-.6-.6z",
-            fill: "#fff",
+            fill: "rgb(var(--oui-color-base-foreground))",
             fillOpacity: ".36"
           }
         ),
@@ -5258,7 +5357,7 @@ var ApplyIcon = () => {
           "path",
           {
             d: "M20.4 16.2a.6.6 0 0 1 .6-.6h2.4a.6.6 0 0 1 .6.6v.6a.6.6 0 0 1-.6.6H21a.6.6 0 0 1-.6-.6zm0 3a.6.6 0 0 1 .6-.6h9a.6.6 0 0 1 .6.6v.6a.6.6 0 0 1-.6.6h-9a.6.6 0 0 1-.6-.6zm-7.8 5.4a.6.6 0 0 1 .6-.6H30a.6.6 0 0 1 .6.6v.6a.6.6 0 0 1-.6.6H13.2a.6.6 0 0 1-.6-.6zm0 3.6a.6.6 0 0 1 .6-.6H30a.6.6 0 0 1 .6.6v.6a.6.6 0 0 1-.6.6H13.2a.6.6 0 0 1-.6-.6zm0 3.6a.6.6 0 0 1 .6-.6h9a.6.6 0 0 1 .6.6v.6a.6.6 0 0 1-.6.6h-9a.6.6 0 0 1-.6-.6z",
-            fill: "#fff",
+            fill: "rgb(var(--oui-color-base-foreground))",
             fillOpacity: ".36"
           }
         ),
@@ -5268,7 +5367,7 @@ var ApplyIcon = () => {
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M15.739 6.6H10.2A2.4 2.4 0 0 0 7.8 9v30a2.4 2.4 0 0 0 2.4 2.4h13.84l1.014-1.8H10.2a.6.6 0 0 1-.6-.6V9a.6.6 0 0 1 .6-.6h5.262zm12 1.8H33a.6.6 0 0 1 .6.6v16.47a2.8 2.8 0 0 1 1.8-.205V9A2.4 2.4 0 0 0 33 6.6h-5.538z",
-            fill: "#fff",
+            fill: "rgb(var(--oui-color-base-foreground))",
             fillOpacity: ".36"
           }
         )
@@ -5287,14 +5386,20 @@ var ShareIcon = () => {
       xmlns: "http://www.w3.org/2000/svg",
       className: "lg:oui-w-[64px] lg:oui-h-[64px] 2xl:oui-w-[80px] 2xl:oui-h-[80px]",
       children: [
-        /* @__PURE__ */ jsx("path", { d: "M24 33a9 9 0 1 1-18 0 9 9 0 0 1 18 0", fill: "#335FFC" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M24 33a9 9 0 1 1-18 0 9 9 0 0 1 18 0",
+            fill: "rgb(var(--oui-color-primary-darken))"
+          }
+        ),
         /* @__PURE__ */ jsx(
           "path",
           {
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M15 32.4a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6m0 1.8a3.6 3.6 0 1 0 0-7.2 3.6 3.6 0 0 0 0 7.2m-6.578 4.942A4.8 4.8 0 0 1 13.2 34.8h3.6a4.8 4.8 0 0 1 4.778 4.342 9 9 0 0 1-1.778 1.473V39.6a3 3 0 0 0-3-3h-3.6a3 3 0 0 0-3 3v1.015a9 9 0 0 1-1.778-1.473",
-            fill: "#fff",
+            fill: "rgb(var(--oui-color-base-foreground))",
             fillOpacity: ".98"
           }
         ),
@@ -5304,7 +5409,7 @@ var ShareIcon = () => {
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M16.2 12a4.2 4.2 0 1 1-8.4 0 4.2 4.2 0 0 1 8.4 0m1.8 0c0 1.37-.459 2.632-1.231 3.642l2.308 2.308a7.76 7.76 0 0 1 4.023-1.7v-.764A3.602 3.602 0 0 1 24 8.4a3.6 3.6 0 0 1 .9 7.087v.764c1.48.17 2.833.754 3.942 1.633l2.326-2.326a6 6 0 1 1 1.273 1.273l-2.326 2.326a7.76 7.76 0 0 1 1.634 3.943h.764a3.602 3.602 0 0 1 7.087.9 3.6 3.6 0 0 1-7.087.9h-.764a7.76 7.76 0 0 1-1.699 4.023l2.308 2.308a6 6 0 1 1-1.25 1.295l-2.347-2.347a7.8 7.8 0 0 1-3.05 1.433 11 11 0 0 0-.377-1.76 6 6 0 1 0-7.185-7.185q-.855-.261-1.76-.379a7.8 7.8 0 0 1 1.432-3.049l-2.347-2.347A6 6 0 1 1 18 12m7.8 0a1.8 1.8 0 1 1-3.6 0 1.8 1.8 0 0 1 3.6 0M36 25.8a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6m0-9.6a4.2 4.2 0 1 0 0-8.4 4.2 4.2 0 0 0 0 8.4M40.2 36a4.2 4.2 0 1 1-8.4 0 4.2 4.2 0 0 1 8.4 0",
-            fill: "#fff",
+            fill: "rgb(var(--oui-color-base-foreground))",
             fillOpacity: ".36"
           }
         )
@@ -5329,18 +5434,24 @@ var EarnIcon = () => {
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M24 24a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8m0 1.8a4.2 4.2 0 1 0 0-8.4 4.2 4.2 0 0 0 0 8.4",
-            fill: "#fff",
+            fill: "rgb(var(--oui-color-base-foreground))",
             fillOpacity: ".36"
           }
         ),
-        /* @__PURE__ */ jsx("path", { d: "M45 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0", fill: "#335FFC" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M45 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0",
+            fill: "rgb(var(--oui-color-primary-darken))"
+          }
+        ),
         /* @__PURE__ */ jsx(
           "path",
           {
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M35.1 6.6a.9.9 0 1 1 1.8 0v.437A3 3 0 0 1 39 9.9h-1.8a1.2 1.2 0 1 0-1.2 1.2 3 3 0 0 1 .9 5.863v.437a.9.9 0 0 1-1.8 0v-.437A3 3 0 0 1 33 14.1h1.8a1.2 1.2 0 1 0 1.2-1.2 3 3 0 0 1-.9-5.863z",
-            fill: "#fff",
+            fill: "rgb(var(--oui-color-base-foreground))",
             fillOpacity: ".98"
           }
         ),
@@ -5350,7 +5461,7 @@ var EarnIcon = () => {
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M40.2 23.7a.9.9 0 0 1 1.8 0v.6q0 .045-.004.086c-.197 9.351-7.525 16.948-16.765 17.573l1.205 1.205a.9.9 0 1 1-1.272 1.272l-2.7-2.7a.9.9 0 0 1 0-1.272l2.7-2.7a.9.9 0 1 1 1.272 1.272l-1.11 1.11c8.325-.674 14.87-7.642 14.874-16.14zM21.564 4.836a.9.9 0 1 1 1.272-1.272l2.7 2.7a.9.9 0 0 1 0 1.272l-2.7 2.7a.9.9 0 1 1-1.272-1.272l1.11-1.11C14.347 8.528 7.8 15.5 7.8 24v.3a.9.9 0 1 1-1.8 0v-.6l.004-.086C6.201 14.263 13.53 6.666 22.77 6.042z",
-            fill: "#fff",
+            fill: "rgb(var(--oui-color-base-foreground))",
             fillOpacity: ".36"
           }
         ),
@@ -5360,7 +5471,7 @@ var EarnIcon = () => {
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M24 11.4q.615 0 1.213.058a11 11 0 0 0 .061 1.816Q24.647 13.2 24 13.2c-5.965 0-10.8 4.835-10.8 10.8 0 2.898 1.142 5.53 3 7.47a4.8 4.8 0 0 1 4.8-4.79h6a4.8 4.8 0 0 1 4.8 4.789c1.858-1.94 3-4.572 3-7.47q0-.647-.074-1.274a11 11 0 0 0 1.816.06q.057.6.058 1.214c0 6.959-5.641 12.6-12.6 12.6S11.4 30.959 11.4 24 17.041 11.4 24 11.4m6 21.581v-1.5a3 3 0 0 0-3-3h-6a3 3 0 0 0-3 3v1.5a10.75 10.75 0 0 0 6 1.819c2.22 0 4.284-.67 6-1.819",
-            fill: "#fff",
+            fill: "rgb(var(--oui-color-base-foreground))",
             fillOpacity: ".36"
           }
         )
@@ -5381,7 +5492,7 @@ var ArrowDownIcon = () => {
         "path",
         {
           d: "M8.5048 4.00806C8.8728 4.00806 9.1708 4.30626 9.1708 4.67406C9.1708 4.99259 9.1708 8.71739 9.1708 9.71072L11.1688 7.73339L12.1055 8.67005L8.98346 11.8127C8.85346 11.9434 8.6788 12.0081 8.50413 12.0081C8.33013 12.0081 8.15612 11.9427 8.02612 11.8127L4.90413 8.67005L5.8408 7.73339L7.83881 9.71072C7.83881 8.71739 7.83881 4.99259 7.83881 4.67406C7.83881 4.30626 8.1368 4.00806 8.5048 4.00806Z",
-          fill: "#608CFF"
+          fill: "rgb(var(--oui-color-primary))"
         }
       )
     }
@@ -5501,10 +5612,8 @@ var ArrowRightIcon = (props) => {
       width: "16",
       height: "16",
       viewBox: "0 0 16 16",
-      fill: "white",
-      fillOpacity: "0.98",
       xmlns: "http://www.w3.org/2000/svg",
-      className: props.className,
+      className: cn(props.className, "oui-fill-base-contrast"),
       children: /* @__PURE__ */ jsx("path", { d: "M4.00806 7.9952C4.00806 7.6272 4.30626 7.3292 4.67406 7.3292C4.99259 7.3292 8.71739 7.3292 9.71072 7.3292L7.73339 5.3312L8.67005 4.39453L11.8127 7.51654C11.9434 7.64654 12.0081 7.8212 12.0081 7.99587C12.0081 8.16987 11.9427 8.34388 11.8127 8.47388L8.67005 11.5959L7.73339 10.6592L9.71072 8.66119C8.71739 8.66119 4.99259 8.66119 4.67406 8.66119C4.30626 8.66119 4.00806 8.3632 4.00806 7.9952Z" })
     }
   );
@@ -5580,7 +5689,7 @@ var Icon = () => {
           "path",
           {
             d: "M44.996 7.324c-20.71 0-37.43 16.79-37.5 37.5-.07 20.682 16.806 37.575 37.5 37.617 20.694.04 37.537-17.082 37.5-37.617-.037-20.71-16.79-37.5-37.5-37.5m0 7.5c16.569 0 30 13.433 30 30 0 8.438-3.514 16.043-9.12 21.495-2.762-5.973-8.694-10.245-15.49-10.245h-10.78c-6.791 0-12.706 4.22-15.47 10.197-5.606-5.453-9.14-13.01-9.14-21.447 0-16.567 13.431-30 30-30m0 7.5c-8.284 0-15 6.717-15 15s6.716 15 15 15 15-6.716 15-15-6.716-15-15-15",
-            fill: "#fff",
+            fill: "rgb(var(--oui-color-base-foreground))",
             fillOpacity: ".2"
           }
         ),
@@ -5588,14 +5697,14 @@ var Icon = () => {
           "path",
           {
             d: "M90 71.25C90 81.605 81.605 90 71.25 90S52.5 81.605 52.5 71.25 60.895 52.5 71.25 52.5 90 60.895 90 71.25",
-            fill: "#005A4F"
+            fill: "rgb(var(--oui-color-success-darken))"
           }
         ),
         /* @__PURE__ */ jsx(
           "path",
           {
             d: "M80.62 75.007c0-.24-.08-.49-.263-.675l-3.487-3.456-1.318 1.318 1.845 1.875H63.745a.938.938 0 0 0 0 1.875h13.652l-1.845 1.875 1.318 1.318 3.487-3.456a.95.95 0 0 0 .263-.674m-.937-7.5a.94.94 0 0 0-.938-.938H65.093l1.846-1.875-1.319-1.318-3.486 3.456a.966.966 0 0 0 0 1.349l3.486 3.456 1.319-1.318-1.846-1.875h13.652c.518 0 .938-.42.938-.937",
-            fill: "#fff",
+            fill: "rgb(var(--oui-color-base-foreground))",
             fillOpacity: ".98"
           }
         )
@@ -5873,7 +5982,7 @@ var Icon2 = () => {
           "path",
           {
             d: "M35.997 5.86c-16.569 0-29.944 13.43-30 30-.056 16.545 13.445 30.06 30 30.093s30.03-13.665 30-30.093c-.03-16.57-13.432-30-30-30m0 6c13.255 0 24 10.746 24 24 0 6.75-2.812 12.834-7.297 17.196-2.209-4.78-6.955-8.196-12.39-8.196h-8.626c-5.432 0-10.164 3.375-12.375 8.157-4.485-4.362-7.312-10.407-7.312-17.157 0-13.254 10.745-24 24-24m0 6c-6.628 0-12 5.373-12 12s5.372 12 12 12c6.627 0 12-5.373 12-12s-5.373-12-12-12",
-            fill: "#fff",
+            fill: "rgb(var(--oui-color-base-foreground))",
             fillOpacity: ".2"
           }
         ),
@@ -5881,14 +5990,14 @@ var Icon2 = () => {
           "path",
           {
             d: "M72 57c0 8.284-6.716 15-15 15s-15-6.716-15-15 6.716-15 15-15 15 6.716 15 15",
-            fill: "#1828C3"
+            fill: "rgb(var(--oui-gradient-primary-end))"
           }
         ),
         /* @__PURE__ */ jsx(
           "path",
           {
             d: "M53.624 51.45a4.125 4.125 0 0 0-4.125 4.125c0 2.388 1.36 4.641 3.61 6.703a21 21 0 0 0 2.414 1.875c.287.194.556.37.797.516.147.089.243.154.304.187a.79.79 0 0 0 .75 0c.061-.033.158-.098.305-.187.24-.147.51-.322.797-.516a21 21 0 0 0 2.414-1.875c2.25-2.062 3.61-4.315 3.61-6.703a4.125 4.125 0 0 0-4.126-4.125c-1.294 0-2.557.705-3.351 1.734-.775-1.047-2.034-1.734-3.399-1.734",
-            fill: "#fff",
+            fill: "rgb(var(--oui-color-base-foreground))",
             fillOpacity: ".98"
           }
         )
@@ -6258,7 +6367,7 @@ var TitleStatistic2 = (props) => {
           VolBarChart,
           {
             data: props.dataSource,
-            colors: { fill: "rgba(0, 180, 158, 1)" },
+            colors: { fill: "rgb(var(--oui-color-success))" },
             className: "oui-w-full oui-flex-1",
             tooltip: {
               rm: Decimal.ROUND_DOWN,
@@ -6633,7 +6742,7 @@ var Tab = (props) => {
             props.anATrader();
           },
           children: [
-            /* @__PURE__ */ jsx(TraderIcon, {}),
+            /* @__PURE__ */ jsx(TraderIcon, { className: "oui-text-base-contrast" }),
             /* @__PURE__ */ jsx(Text, { children: t("affiliate.asTrader.title") })
           ]
         }
@@ -6657,7 +6766,7 @@ var Tab = (props) => {
             props.anAnAffiliate();
           },
           children: [
-            /* @__PURE__ */ jsx(AffiliateIcon, {}),
+            /* @__PURE__ */ jsx(AffiliateIcon, { className: "oui-text-base-contrast" }),
             /* @__PURE__ */ jsx(Text, { children: t("affiliate.asAffiliate.title") })
           ]
         }
@@ -6701,9 +6810,7 @@ var Tab = (props) => {
                     /* @__PURE__ */ jsx(
                       AffiliateIcon,
                       {
-                        fillOpacity: 1,
-                        fill: "currentColor",
-                        className: props.tab === "affiliate" /* affiliate */ ? "oui-fill-white/[.98]" : "oui-fill-white/[.36]"
+                        className: props.tab === "affiliate" /* affiliate */ ? "oui-text-base-contrast" : "oui-text-base-contrast-36"
                       }
                     ),
                     /* @__PURE__ */ jsx(Text, { children: t("common.affiliate") })
@@ -6719,9 +6826,7 @@ var Tab = (props) => {
                     /* @__PURE__ */ jsx(
                       TraderIcon,
                       {
-                        fillOpacity: 1,
-                        fill: "currentColor",
-                        className: props.tab === "trader" /* trader */ ? "oui-fill-white/[.98]" : "oui-fill-white/[.36]"
+                        className: props.tab === "trader" /* trader */ ? "oui-text-base-contrast" : "oui-text-base-contrast-36"
                       }
                     ),
                     /* @__PURE__ */ jsx(Text, { children: t("affiliate.trader") })
@@ -6902,7 +7007,7 @@ var useLayoutBuilder = () => {
                 fillRule: "evenodd",
                 clipRule: "evenodd",
                 d: "M5.625 4.95c0-.746.604-1.35 1.35-1.35h4.05c.746 0 1.35.604 1.35 1.35v4.62L9 12.195 5.625 9.57zm8.624 3.163-.524.407v-.96l.074.05c.193.128.346.302.45.502m-4.42 5.148L14.4 9.705v3.345a1.35 1.35 0 0 1-1.35 1.35h-8.1a1.35 1.35 0 0 1-1.35-1.35V9.705l4.571 3.556c.488.379 1.17.379 1.658 0M4.275 8.52l-.524-.407c.104-.2.257-.374.45-.503l.074-.049zm0-2.581V4.95a2.7 2.7 0 0 1 2.7-2.7h4.05a2.7 2.7 0 0 1 2.7 2.7v.989l.823.548a2.7 2.7 0 0 1 1.202 2.247v4.316a2.7 2.7 0 0 1-2.7 2.7h-8.1a2.7 2.7 0 0 1-2.7-2.7V8.734a2.7 2.7 0 0 1 1.202-2.247zM9 6.089l.111-.118.005-.005a1.08 1.08 0 0 1 1.58.004 1.223 1.223 0 0 1 0 1.668l-1.515 1.62-.004.004c-.1.102-.26.1-.358-.004l-1.516-1.62a1.223 1.223 0 0 1 0-1.668l.004-.004a1.08 1.08 0 0 1 1.58.004z",
-                fill: "#fff",
+                fill: "rgb(var(--oui-color-base-foreground))",
                 fillOpacity: ".54"
               }
             )