@orderly.network/trading 2.10.1 → 2.10.2

package/dist/index.mjs

@@ -284,24 +284,25 @@ var init_setting_ui = __esm({
           size: "xs",
           type: "button",
           variant: "contained",
-          className: "oui-bg-transparent hover:oui-bg-transparent",
+          className: "oui-preference-trigger-btn oui-bg-transparent hover:oui-bg-transparent",
           children: /* @__PURE__ */ jsx(
             SettingFillIcon,
             {
               size: 16,
               color: "white",
               opacity: 1,
-              className: "oui-text-white/[.36] hover:oui-text-white/80"
+              className: "oui-text-base-contrast-36 hover:oui-text-base-contrast-80"
             }
           )
         }
       );
-      return /* @__PURE__ */ jsxs(Flex, { gap: 0, children: [
+      return /* @__PURE__ */ jsxs(Flex, { className: "oui-preference", gap: 0, children: [
         /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
           /* @__PURE__ */ jsx(
             Checkbox,
             {
               id: "oui-checkbox-hideOtherSymbols",
+              className: "oui-checkbox-hideOtherSymbols",
               color: "white",
               checked: props.hideOtherSymbols,
               onCheckedChange: (checked) => {
@@ -411,13 +412,13 @@ var init_setting_ui = __esm({
           gap: 1,
           className: "oui-cursor-pointer",
           children: [
-            sel ? /* @__PURE__ */ jsx(SelIcon, {}) : /* @__PURE__ */ jsx(UnselIcon, {}),
+            sel ? /* @__PURE__ */ jsx(SelIcon, { className: "oui-fill-base-contrast" }) : /* @__PURE__ */ jsx(UnselIcon, { className: "oui-fill-base-contrast-54" }),
             /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: sel ? 98 : 54, children: label })
           ]
         }
       );
     };
-    SelIcon = () => {
+    SelIcon = (props) => {
       return /* @__PURE__ */ jsxs(
         "svg",
         {
@@ -426,38 +427,25 @@ var init_setting_ui = __esm({
           viewBox: "0 0 16 16",
           fill: "currentColor",
           xmlns: "http://www.w3.org/2000/svg",
-          className: "oui-fill-white",
+          className: props.className,
           children: [
-            /* @__PURE__ */ jsx(
-              "path",
-              {
-                d: "M8.01 1.333a6.667 6.667 0 1 0 0 13.333 6.667 6.667 0 0 0 0-13.333m0 1.333a5.334 5.334 0 1 1-.001 10.667 5.334 5.334 0 0 1 0-10.667",
-                fill: "#fff",
-                fillOpacity: ".36"
-              }
-            ),
+            /* @__PURE__ */ jsx("path", { d: "M8.01 1.333a6.667 6.667 0 1 0 0 13.333 6.667 6.667 0 0 0 0-13.333m0 1.333a5.334 5.334 0 1 1-.001 10.667 5.334 5.334 0 0 1 0-10.667" }),
             /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "3.333" })
           ]
         }
       );
     };
-    UnselIcon = () => {
+    UnselIcon = (props) => {
       return /* @__PURE__ */ jsx(
         "svg",
         {
           width: "16",
           height: "16",
           viewBox: "0 0 16 16",
-          fill: "none",
+          fill: "currentColor",
           xmlns: "http://www.w3.org/2000/svg",
-          children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: "M8.01 1.333a6.667 6.667 0 1 0 0 13.333 6.667 6.667 0 0 0 0-13.333m0 1.333a5.334 5.334 0 1 1-.001 10.667 5.334 5.334 0 0 1 0-10.667",
-              fill: "#fff",
-              fillOpacity: ".54"
-            }
-          )
+          className: props.className,
+          children: /* @__PURE__ */ jsx("path", { d: "M8.01 1.333a6.667 6.667 0 1 0 0 13.333 6.667 6.667 0 0 0 0-13.333m0 1.333a5.334 5.334 0 1 1-.001 10.667 5.334 5.334 0 0 1 0-10.667" })
         }
       );
     };
@@ -513,12 +501,12 @@ var init_positionHeader_ui = __esm({
       return /* @__PURE__ */ jsxs(
         Flex,
         {
+          className: "oui-positionHeader oui-rounded-b-xl oui-bg-base-9",
           direction: "column",
           gap: 2,
           width: "100%",
           itemAlign: "start",
           p: 2,
-          className: "oui-rounded-b-xl oui-bg-base-9",
           children: [
             /* @__PURE__ */ jsxs(Flex, { width: "100%", justify: "between", gap: 2, children: [
               /* @__PURE__ */ jsx(
@@ -572,25 +560,36 @@ var init_positionHeader_ui = __esm({
       );
     };
     DesktopLayout = (props) => {
-      return /* @__PURE__ */ jsxs(Flex, { py: 2, px: 3, gap: 6, width: "100%", justify: "between", children: [
-        /* @__PURE__ */ jsxs(Flex, { gap: 5, children: [
-          /* @__PURE__ */ jsx(
-            UnrealPnL,
-            {
-              ...props,
-              classNames: { label: "oui-text-base-contrast-54" }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Notional,
-            {
-              ...props,
-              classNames: { label: "oui-text-base-contrast-54" }
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(CloseAllPositionsWidget, { symbol: props.symbol })
-      ] });
+      return /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          className: "oui-positionHeader",
+          py: 2,
+          px: 3,
+          gap: 6,
+          width: "100%",
+          justify: "between",
+          children: [
+            /* @__PURE__ */ jsxs(Flex, { gap: 5, children: [
+              /* @__PURE__ */ jsx(
+                UnrealPnL,
+                {
+                  ...props,
+                  classNames: { label: "oui-text-base-contrast-54" }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Notional,
+                {
+                  ...props,
+                  classNames: { label: "oui-text-base-contrast-54" }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(CloseAllPositionsWidget, { symbol: props.symbol })
+          ]
+        }
+      );
     };
     UnrealPnL = (props) => {
       const { t } = useTranslation();
@@ -891,6 +890,7 @@ var init_dataList_ui = __esm({
       return /* @__PURE__ */ jsx(
         Tabs,
         {
+          className: "oui-trading-dataList-tabs oui-h-full",
           defaultValue: current || "Positions" /* positions */,
           variant: "contained",
           trailing: /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
@@ -905,7 +905,6 @@ var init_dataList_ui = __esm({
             }
           ) }),
           size: "lg",
-          className: "oui-h-full",
           classNames: {
             trigger: "oui-group",
             tabsContent: "oui-h-[calc(100%_-_32px)]"
@@ -951,6 +950,7 @@ var init_lastTrades_ui = __esm({
         Box,
         {
           className: cn(
+            "oui-lastTrades",
             "oui-grid oui-grid-rows=[auto,1fr] oui-h-full oui-w-full",
             props.classNames?.root
           ),
@@ -1125,7 +1125,7 @@ function FaucetUi(props) {
       size: "md",
       onClick: props.getFaucet,
       loading: props.loading,
-      className: "oui-text-primary-light oui-border-primary-light oui-rounded",
+      className: "oui-faucet-btn oui-rounded oui-border-primary-light oui-text-primary-light",
       "data-testid": "oui-testid-assetView-getFaucet-button",
       children: t("trading.faucet.getTestUSDC")
     }
@@ -1269,7 +1269,7 @@ var init_assetView_ui = __esm({
       const { description, formula } = props;
       return /* @__PURE__ */ jsxs("div", { className: "oui-min-w-[204px] oui-max-w-[240px] oui-text-2xs oui-leading-normal oui-text-base-contrast-80", children: [
         typeof description !== "undefined" && description !== null && /* @__PURE__ */ jsx("span", { children: description }),
-        /* @__PURE__ */ jsx(Divider, { className: "oui-border-white/10", my: 2 }),
+        /* @__PURE__ */ jsx(Divider, { color: "oui-border-line-10", my: 2 }),
         typeof formula !== "undefined" && formula !== null && /* @__PURE__ */ jsx("span", { children: formula })
       ] });
     };
@@ -1299,7 +1299,14 @@ var init_assetView_ui = __esm({
             ),
             /* @__PURE__ */ jsxs(Flex, { gap: 1, itemAlign: "center", children: [
               /* @__PURE__ */ jsx(Text, { size: "2xs", color: "neutral", weight: "semibold", children: `${t("trading.asset.myAssets")} (USDC)` }),
-              /* @__PURE__ */ jsx("button", { onClick: onToggleVisibility, children: visible ? /* @__PURE__ */ jsx(EyeIcon, { size: 18, className: "oui-text-base-contrast-54" }) : /* @__PURE__ */ jsx(EyeCloseIcon, { size: 18, className: "oui-text-base-contrast-54" }) })
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "oui-assetView-toggle-visibility-btn",
+                  onClick: onToggleVisibility,
+                  children: visible ? /* @__PURE__ */ jsx(EyeIcon, { size: 18, className: "oui-text-base-contrast-54" }) : /* @__PURE__ */ jsx(EyeCloseIcon, { size: 18, className: "oui-text-base-contrast-54" })
+                }
+              )
             ] })
           ]
         }
@@ -1533,6 +1540,7 @@ var init_assetView_ui = __esm({
       const transferButton = hasSubAccount && /* @__PURE__ */ jsx(
         Button,
         {
+          className: "oui-assetView-transfer-btn",
           fullWidth: true,
           color: "secondary",
           size: "md",
@@ -1544,6 +1552,7 @@ var init_assetView_ui = __esm({
       const depositButton = isMainAccount && /* @__PURE__ */ jsxs(
         Button,
         {
+          className: "oui-assetView-deposit-btn",
           "data-testid": "oui-testid-assetView-deposit-button",
           fullWidth: true,
           size: "md",
@@ -1557,6 +1566,7 @@ var init_assetView_ui = __esm({
       const withdrawButton = isMainAccount && /* @__PURE__ */ jsxs(
         Button,
         {
+          className: "oui-assetView-withdraw-btn",
           fullWidth: true,
           color: "secondary",
           size: "md",
@@ -1575,7 +1585,7 @@ var init_assetView_ui = __esm({
           ]
         }
       );
-      return /* @__PURE__ */ jsxs(Box, { className: "oui-relative", children: [
+      return /* @__PURE__ */ jsxs(Box, { className: "oui-assetView oui-relative", children: [
         title && description && /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, className: "oui-mb-[32px]", children: [
           /* @__PURE__ */ jsx(
             Text,
@@ -1611,6 +1621,7 @@ var init_assetView_ui = __esm({
               /* @__PURE__ */ jsxs(
                 Button,
                 {
+                  className: "oui-assetView-deposit-btn",
                   "data-testid": "oui-testid-assetView-deposit-button",
                   fullWidth: true,
                   size: "md",
@@ -1674,7 +1685,7 @@ var init_assetView_ui = __esm({
               "oui-pointer-events-none oui-rounded-2xl oui-blur-[200px]"
             ),
             style: {
-              background: "conic-gradient(from -40.91deg at 40.63% 50.41%, rgba(159, 115, 241, 0) -48.92deg, rgba(242, 98, 181, 0) 125.18deg, #5FC5FF 193.41deg, #FFAC89 216.02deg, #8155FF 236.07deg, #789DFF 259.95deg, rgba(159, 115, 241, 0) 311.08deg, rgba(242, 98, 181, 0) 485.18deg)"
+              background: "conic-gradient(from -40.91deg at 40.63% 50.41%, rgba(var(--oui-color-base-foreground)/0) -48.92deg, rgba(var(--oui-color-base-foreground)/0) 125.18deg, rgb(var(--oui-color-primary)) 193.41deg, rgb(var(--oui-color-warning)) 216.02deg, rgb(var(--oui-color-link)) 236.07deg, rgb(var(--oui-color-primary-light)) 259.95deg, rgba(var(--oui-color-base-foreground)/0) 311.08deg, rgba(var(--oui-color-base-foreground)/0) 485.18deg)"
             }
           }
         )
@@ -1985,7 +1996,7 @@ var init_cell_desktop = __esm({
                 style: { top: `${cellHeight / 2 - 2}px` }
               }
             ),
-            props.isHover && /* @__PURE__ */ jsx("div", { className: "oui-absolute oui-inset-0 oui-bg-white oui-opacity-[.12]" }),
+            props.isHover && /* @__PURE__ */ jsx("div", { className: "oui-absolute oui-inset-0 oui-bg-base-contrast-12" }),
             currentHover && /* @__PURE__ */ jsx(
               "div",
               {
@@ -2066,7 +2077,7 @@ var init_listBox_desktop = __esm({
         return data.reduce((a, b) => Math.max(a, b[1]), 0);
       }, [data]);
       const [hoverIndex, setHoverIndex] = useState(-1);
-      return /* @__PURE__ */ jsx("div", { className: "oui-order-book-list oui-flex oui-flex-col oui-gap-px", children: data.map((item, index) => {
+      return /* @__PURE__ */ jsx("div", { className: "oui-order-book-list oui-orderBook-list oui-flex oui-flex-col oui-gap-px", children: data.map((item, index) => {
         return /* @__PURE__ */ jsx(
           Tip,
           {
@@ -2407,7 +2418,7 @@ var init_header_desktop = __esm({
                 Title,
                 {
                   id: "oui-order-book-header-price",
-                  className: "oui-text-base-contrast-36",
+                  className: "oui-orderBook-header-price oui-text-base-contrast-36",
                   children: `${t("common.price")}(${quote})`
                 }
               ) }),
@@ -2416,7 +2427,7 @@ var init_header_desktop = __esm({
                 {
                   justifyEnd: true,
                   id: "oui-order-book-header-qty",
-                  className: "oui-text-base-contrast-36",
+                  className: "oui-orderBook-header-qty oui-text-base-contrast-36",
                   children: `${t("common.qty")}(${optimizedBase})`
                 }
               ) })
@@ -2430,8 +2441,24 @@ var init_header_desktop = __esm({
             pr: 3,
             className: cn("oui-basis-5/12", showTotal && "oui-basis-1/2"),
             children: showTotal ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Box, { className: "oui-text-base-contrast-36", width: "100%", children: /* @__PURE__ */ jsx(Title, { id: "oui-order-book-header-total-quote", justifyEnd: true, children: `${t("common.total")}(${optimizedBase})` }) }),
-              /* @__PURE__ */ jsx(Box, { className: "oui-text-base-contrast-36", width: "100%", children: /* @__PURE__ */ jsx(Title, { justifyEnd: true, id: "oui-order-book-header-total-base", children: `${t("common.total")}(${quote})` }) })
+              /* @__PURE__ */ jsx(Box, { className: "oui-text-base-contrast-36", width: "100%", children: /* @__PURE__ */ jsx(
+                Title,
+                {
+                  id: "oui-order-book-header-total-quote",
+                  className: "oui-orderBook-header-total-quote",
+                  justifyEnd: true,
+                  children: `${t("common.total")}(${optimizedBase})`
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Box, { className: "oui-text-base-contrast-36", width: "100%", children: /* @__PURE__ */ jsx(
+                Title,
+                {
+                  id: "oui-order-book-header-total-base",
+                  className: "oui-orderBook-header-total-base",
+                  justifyEnd: true,
+                  children: `${t("common.total")}(${quote})`
+                }
+              ) })
             ] }) : /* @__PURE__ */ jsx(Box, { width: "100%", children: /* @__PURE__ */ jsx(
               Popover,
               {
@@ -2464,7 +2491,15 @@ var init_header_desktop = __esm({
                     itemAlign: "center",
                     className: "oui-cursor-pointer oui-select-none oui-text-base-contrast-36 oui-transition-all hover:oui-text-base-contrast",
                     children: [
-                      /* @__PURE__ */ jsx(Title, { justifyEnd: true, id: "oui-order-book-header-total-base", children: `${t("common.total")}(${optimizedCoinType})` }),
+                      /* @__PURE__ */ jsx(
+                        Title,
+                        {
+                          id: "oui-order-book-header-total-base",
+                          className: "oui-orderBook-header-total-base",
+                          justifyEnd: true,
+                          children: `${t("common.total")}(${optimizedCoinType})`
+                        }
+                      ),
                       /* @__PURE__ */ jsx(
                         TriggerIcon,
                         {
@@ -2855,6 +2890,7 @@ var init_index_desktop = __esm({
               id: "oui-orderbook-desktop",
               ref: divRef,
               className: cn(
+                "oui-orderBook",
                 "oui-relative oui-size-full",
                 showBuySellRatio ? "oui-grid-rows-[auto,auto,1fr,auto,1fr,auto]" : "oui-grid-rows-[auto,auto,1fr,auto,1fr]"
               ),
@@ -3224,7 +3260,7 @@ var init_listBox = __esm({
     ListBox = (props) => {
       const { data } = props;
       const { mode } = useOrderBookContext();
-      return /* @__PURE__ */ jsx(Box, { className: "oui-order-book-list oui-flex oui-w-full oui-flex-col oui-gap-px", children: data.map((item, index) => {
+      return /* @__PURE__ */ jsx(Box, { className: "oui-orderBook-list oui-order-book-list oui-flex oui-w-full oui-flex-col oui-gap-px", children: data.map((item, index) => {
         return /* @__PURE__ */ jsx(
           OrderBookCell,
           {
@@ -3294,19 +3330,26 @@ var init_depthSelect = __esm({
           label: `${d}`
         }));
       }, [props.depth]);
-      return /* @__PURE__ */ jsx(Box, { id: "oui-order-book-depth", className: "oui-w-full oui-pt-2", children: /* @__PURE__ */ jsx(
-        Picker,
+      return /* @__PURE__ */ jsx(
+        Box,
         {
-          options,
-          fullWidth: true,
-          size: "sm",
-          value: props.value,
-          className: "oui-text-2xs oui-text-base-contrast-54",
-          onValueChange: (value) => {
-            props.onChange?.(value);
-          }
+          id: "oui-order-book-depth",
+          className: "oui-orderBook-depth oui-w-full oui-pt-2",
+          children: /* @__PURE__ */ jsx(
+            Picker,
+            {
+              options,
+              fullWidth: true,
+              size: "sm",
+              value: props.value,
+              className: "oui-text-2xs oui-text-base-contrast-54",
+              onValueChange: (value) => {
+                props.onChange?.(value);
+              }
+            }
+          )
         }
-      ) });
+      );
     };
   }
 });
@@ -3353,6 +3396,7 @@ var init_header = __esm({
                 direction: "column",
                 itemAlign: "start",
                 id: "oui-order-book-header-price",
+                className: "oui-orderBook-header-price",
                 children: [
                   /* @__PURE__ */ jsx(Text, { children: t("common.price") }),
                   /* @__PURE__ */ jsx(Text, { children: `(${quote})` })
@@ -3400,7 +3444,7 @@ var init_markPrice2 = __esm({
         Flex,
         {
           id: "oui-order-book-mark-price",
-          className: "oui-py-[6px]",
+          className: "oui-orderBook-markPrice oui-py-[6px]",
           width: "100%",
           justify: "between",
           children: [
@@ -3477,7 +3521,10 @@ var init_orderBook = __esm({
               direction: "column",
               p: 2,
               id: "oui-orderbook-mobile",
-              className: cn("oui-relative oui-size-full", props.className),
+              className: cn(
+                "oui-orderBook oui-relative oui-size-full",
+                props.className
+              ),
               justify: "start",
               itemAlign: "start",
               children: [
@@ -3525,52 +3572,60 @@ var init_orderBook_ui = __esm({
     init_index_desktop();
     init_orderBook();
     OrderBook2 = (props) => {
-      return /* @__PURE__ */ jsx(Box, { className: "oui-font-semibold", width: "100%", height: "100%", children: props.isMobile ? /* @__PURE__ */ jsx(
-        OrderBook,
-        {
-          level: props.level,
-          asks: props.asks,
-          bids: props.bids,
-          markPrice: props.markPrice,
-          lastPrice: props.lastPrice,
-          depths: props.depths,
-          activeDepth: props.selDepth,
-          base: props.base,
-          quote: props.quote,
-          isLoading: props.isLoading,
-          onItemClick: props.onItemClick,
-          cellHeight: props.cellHeight,
-          onDepthChange: props.onDepthChange,
-          className: props.className,
-          symbolInfo: props.symbolInfo,
-          showBuySellRatio: props.showBuySellRatio,
-          setShowBuySellRatio: props.setShowBuySellRatio,
-          buySellRatio: props.buySellRatio
-        }
-      ) : /* @__PURE__ */ jsx(
-        DesktopOrderBook,
+      return /* @__PURE__ */ jsx(
+        Box,
         {
-          level: props.level,
-          asks: props.asks,
-          bids: props.bids,
-          markPrice: props.markPrice,
-          lastPrice: props.lastPrice,
-          depths: props.depths,
-          activeDepth: props.selDepth,
-          base: props.base,
-          quote: props.quote,
-          isLoading: props.isLoading,
-          onItemClick: props.onItemClick,
-          cellHeight: props.cellHeight,
-          onDepthChange: props.onDepthChange,
-          className: props.className,
-          pendingOrders: props.pendingOrders,
-          symbolInfo: props.symbolInfo,
-          showBuySellRatio: props.showBuySellRatio,
-          setShowBuySellRatio: props.setShowBuySellRatio,
-          buySellRatio: props.buySellRatio
+          className: "oui-orderBook oui-font-semibold",
+          width: "100%",
+          height: "100%",
+          children: props.isMobile ? /* @__PURE__ */ jsx(
+            OrderBook,
+            {
+              level: props.level,
+              asks: props.asks,
+              bids: props.bids,
+              markPrice: props.markPrice,
+              lastPrice: props.lastPrice,
+              depths: props.depths,
+              activeDepth: props.selDepth,
+              base: props.base,
+              quote: props.quote,
+              isLoading: props.isLoading,
+              onItemClick: props.onItemClick,
+              cellHeight: props.cellHeight,
+              onDepthChange: props.onDepthChange,
+              className: props.className,
+              symbolInfo: props.symbolInfo,
+              showBuySellRatio: props.showBuySellRatio,
+              setShowBuySellRatio: props.setShowBuySellRatio,
+              buySellRatio: props.buySellRatio
+            }
+          ) : /* @__PURE__ */ jsx(
+            DesktopOrderBook,
+            {
+              level: props.level,
+              asks: props.asks,
+              bids: props.bids,
+              markPrice: props.markPrice,
+              lastPrice: props.lastPrice,
+              depths: props.depths,
+              activeDepth: props.selDepth,
+              base: props.base,
+              quote: props.quote,
+              isLoading: props.isLoading,
+              onItemClick: props.onItemClick,
+              cellHeight: props.cellHeight,
+              onDepthChange: props.onDepthChange,
+              className: props.className,
+              pendingOrders: props.pendingOrders,
+              symbolInfo: props.symbolInfo,
+              showBuySellRatio: props.showBuySellRatio,
+              setShowBuySellRatio: props.setShowBuySellRatio,
+              buySellRatio: props.buySellRatio
+            }
+          )
         }
-      ) });
+      );
     };
   }
 });
@@ -3755,9 +3810,9 @@ var init_buySellRatioBar = __esm({
               height: "4px",
               position: "relative",
               borderRadius: "2px",
-              overflow: "hidden",
-              backgroundColor: "rgb(var(--oui-line-4))"
+              overflow: "hidden"
             },
+            className: "oui-bg-line-4",
             children: [
               /* @__PURE__ */ jsx(
                 "div",
@@ -3826,8 +3881,8 @@ var init_riskRate_ui = __esm({
       const { wrongNetwork } = useAppContext();
       const { t } = useTranslation();
       const textColor = wrongNetwork ? "" : isHigh ? "oui-text-danger" : isMedium ? "oui-text-warning-darken" : isLow ? gradientTextVariants({ color: "brand" }) : "";
-      const boxClsName = wrongNetwork ? "oui-bg-gradient-to-r oui-opacity-20 oui-from-[#26fefe]  oui-via-[#ff7d00] oui-to-[#d92d6b] oui-h-1.5 oui-rounded-full" : isHigh ? "oui-bg-gradient-to-tr oui-from-[#791438] oui-to-[#ff447c] oui-h-1.5 oui-rounded-full" : isMedium ? "oui-bg-gradient-to-tr oui-from-[#792e00] oui-to-[#ffb65d] oui-h-1.5 oui-rounded-full" : isLow ? "oui-bg-gradient-to-tr oui-from-[#59b0fe] oui-to-[#26fefe] oui-h-1.5 oui-rounded-full" : "oui-bg-gradient-to-r oui-opacity-20 oui-from-[#26fefe]  oui-via-[#ff7d00] oui-to-[#d92d6b] oui-h-1.5 oui-rounded-full";
-      return /* @__PURE__ */ jsxs(Box, { "data-risk": "", className: "oui-space-y-2", children: [
+      const boxClsName = wrongNetwork ? "oui-bg-gradient-to-r oui-opacity-20 oui-from-[rgb(var(--oui-gradient-brand-start))] oui-via-[rgb(var(--oui-color-warning-darken))] oui-to-[rgb(var(--oui-color-danger-darken))] oui-h-1.5 oui-rounded-full" : isHigh ? "oui-bg-gradient-to-tr oui-from-[rgb(var(--oui-gradient-danger-end))] oui-to-[rgb(var(--oui-gradient-danger-start))] oui-h-1.5 oui-rounded-full" : isMedium ? "oui-bg-gradient-to-tr oui-from-[rgb(var(--oui-gradient-warning-end))] oui-to-[rgb(var(--oui-gradient-warning-start))] oui-h-1.5 oui-rounded-full" : isLow ? "oui-bg-gradient-to-tr oui-from-[rgb(var(--oui-gradient-brand-end))] oui-to-[rgb(var(--oui-gradient-brand-start))] oui-h-1.5 oui-rounded-full" : "oui-bg-gradient-to-r oui-opacity-20 oui-from-[rgb(var(--oui-gradient-brand-start))] oui-via-[rgb(var(--oui-color-warning-darken))] oui-to-[rgb(var(--oui-color-danger-darken))] oui-h-1.5 oui-rounded-full";
+      return /* @__PURE__ */ jsxs(Box, { className: "oui-riskRate oui-space-y-2", "data-risk": "", children: [
         /* @__PURE__ */ jsx(
           Flex,
           {
@@ -4108,7 +4163,14 @@ var init_orderBookAndTrades_ui = __esm({
     };
     OrderBookAndTrades = (props) => {
       const { containerRef, containerSize } = props;
-      return /* @__PURE__ */ jsx("div", { ref: containerRef, className: "oui-h-full", children: (containerSize?.width ?? 0) >= 572 ? /* @__PURE__ */ jsx(TwoColLayout, { ...props }) : /* @__PURE__ */ jsx(TabLayout, { ...props }) });
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: containerRef,
+          className: "oui-trading-orderBookAndTrades oui-h-full",
+          children: (containerSize?.width ?? 0) >= 572 ? /* @__PURE__ */ jsx(TwoColLayout, { ...props }) : /* @__PURE__ */ jsx(TabLayout, { ...props })
+        }
+      );
     };
   }
 });
@@ -4198,6 +4260,7 @@ var init_switchLayout = __esm({
         {
           px: 3,
           className: cn(
+            "oui-switchLayout",
             "oui-rounded-md",
             "oui-h-[28px]",
             "oui-cursor-pointer oui-transition-all",
@@ -4399,9 +4462,27 @@ var init_switchLayout = __esm({
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         children: [
-          /* @__PURE__ */ jsx("rect", { width: "36", height: "17", rx: "2", fill: "#181C23" }),
-          /* @__PURE__ */ jsx("rect", { y: "19", width: "36", height: "54", rx: "2", fill: "#181C23" }),
-          /* @__PURE__ */ jsx("rect", { y: "75", width: "36", height: "9", rx: "2", fill: "#181C23" }),
+          /* @__PURE__ */ jsx("rect", { width: "36", height: "17", rx: "2", fill: "rgb(var(--oui-color-base-7))" }),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              y: "19",
+              width: "36",
+              height: "54",
+              rx: "2",
+              fill: "rgb(var(--oui-color-base-7))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              y: "75",
+              width: "36",
+              height: "9",
+              rx: "2",
+              fill: "rgb(var(--oui-color-base-7))"
+            }
+          ),
           /* @__PURE__ */ jsx(
             "rect",
             {
@@ -4413,11 +4494,61 @@ var init_switchLayout = __esm({
               fill: "url(#paint0_linear_17647_26849)"
             }
           ),
-          /* @__PURE__ */ jsx("rect", { x: "3", y: "22", width: "14", height: "6", rx: "2", fill: "#008676" }),
-          /* @__PURE__ */ jsx("rect", { x: "19", y: "22", width: "14", height: "6", rx: "2", fill: "#D92D6B" }),
-          /* @__PURE__ */ jsx("rect", { x: "3", y: "11", width: "14", height: "3", rx: "1.5", fill: "#333948" }),
-          /* @__PURE__ */ jsx("rect", { x: "19", y: "11", width: "14", height: "3", rx: "1.5", fill: "#335FFC" }),
-          /* @__PURE__ */ jsx("rect", { x: "3", y: "62", width: "30", height: "8", rx: "2", fill: "#008676" }),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "3",
+              y: "22",
+              width: "14",
+              height: "6",
+              rx: "2",
+              fill: "rgb(var(--oui-color-success-darken))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "19",
+              y: "22",
+              width: "14",
+              height: "6",
+              rx: "2",
+              fill: "rgb(var(--oui-color-danger-darken))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "3",
+              y: "11",
+              width: "14",
+              height: "3",
+              rx: "1.5",
+              fill: "rgb(var(--oui-color-base-4))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "19",
+              y: "11",
+              width: "14",
+              height: "3",
+              rx: "1.5",
+              fill: "rgb(var(--oui-color-primary-darken))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "3",
+              y: "62",
+              width: "30",
+              height: "8",
+              rx: "2",
+              fill: "rgb(var(--oui-color-success-darken))"
+            }
+          ),
           /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
             "linearGradient",
             {
@@ -4428,8 +4559,8 @@ var init_switchLayout = __esm({
               y2: "79.5",
               gradientUnits: "userSpaceOnUse",
               children: [
-                /* @__PURE__ */ jsx("stop", { stopColor: "#779eff" }),
-                /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#26FEFE" })
+                /* @__PURE__ */ jsx("stop", { stopColor: "rgb(var(--oui-color-primary-light))" }),
+                /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-gradient-brand-start))" })
               ]
             }
           ) })
@@ -4460,17 +4591,77 @@ var init_switchLayout = __esm({
                 width: "144",
                 height: "96",
                 rx: "10",
-                fill: "#07080A",
+                fill: "rgb(var(--oui-color-base-10))",
                 stroke: getStrokeColor(),
                 strokeWidth: "4"
               }
             ),
-            /* @__PURE__ */ jsx("rect", { x: "8", y: "8", width: "24", height: "84", rx: "2", fill: "#181C23" }),
-            /* @__PURE__ */ jsx("rect", { x: "16", y: "10", width: "4", height: "2", rx: "1", fill: "#333948" }),
-            /* @__PURE__ */ jsx("rect", { x: "21", y: "10", width: "4", height: "2", rx: "1", fill: "#333948" }),
-            /* @__PURE__ */ jsx("rect", { x: "26", y: "10", width: "4", height: "2", rx: "1", fill: "#333948" }),
-            /* @__PURE__ */ jsx("rect", { x: "10", y: "10", width: "5", height: "2", rx: "1", fill: "#335FFC" }),
-            /* @__PURE__ */ jsx("rect", { x: "10", y: "14", width: "20", height: "76", rx: "2", fill: "#282E3A" })
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: "8",
+                y: "8",
+                width: "24",
+                height: "84",
+                rx: "2",
+                fill: "rgb(var(--oui-color-base-7))"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: "16",
+                y: "10",
+                width: "4",
+                height: "2",
+                rx: "1",
+                fill: "rgb(var(--oui-color-base-4))"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: "21",
+                y: "10",
+                width: "4",
+                height: "2",
+                rx: "1",
+                fill: "rgb(var(--oui-color-base-4))"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: "26",
+                y: "10",
+                width: "4",
+                height: "2",
+                rx: "1",
+                fill: "rgb(var(--oui-color-base-4))"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: "10",
+                y: "10",
+                width: "5",
+                height: "2",
+                rx: "1",
+                fill: "rgb(var(--oui-color-primary-darken))"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: "10",
+                y: "14",
+                width: "20",
+                height: "76",
+                rx: "2",
+                fill: "rgb(var(--oui-color-base-5))"
+              }
+            )
           ]
         }
       );
@@ -4499,28 +4690,118 @@ var init_switchLayout = __esm({
                 width: "144",
                 height: "96",
                 rx: "10",
-                fill: "#07080A",
+                fill: "rgb(var(--oui-color-base-10))",
                 stroke: getStrokeColor(),
                 strokeWidth: "4"
               }
             ),
-            /* @__PURE__ */ jsx("rect", { x: "8", y: "8", width: "132", height: "8", rx: "2", fill: "#181C23" }),
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: "8",
+                y: "8",
+                width: "132",
+                height: "8",
+                rx: "2",
+                fill: "rgb(var(--oui-color-base-7))"
+              }
+            ),
             /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_31319_74729)", children: [
-              /* @__PURE__ */ jsx("rect", { x: "10", y: "10", width: "16", height: "4", rx: "2", fill: "#335FFC" }),
-              /* @__PURE__ */ jsx("rect", { x: "28", y: "10", width: "16", height: "4", rx: "2", fill: "#333948" }),
-              /* @__PURE__ */ jsx("rect", { x: "46", y: "10", width: "16", height: "4", rx: "2", fill: "#333948" }),
-              /* @__PURE__ */ jsx("rect", { x: "64", y: "10", width: "16", height: "4", rx: "2", fill: "#333948" }),
-              /* @__PURE__ */ jsx("rect", { x: "82", y: "10", width: "16", height: "4", rx: "2", fill: "#333948" }),
-              /* @__PURE__ */ jsx("rect", { x: "100", y: "10", width: "16", height: "4", rx: "2", fill: "#333948" }),
-              /* @__PURE__ */ jsx("rect", { x: "118", y: "10", width: "16", height: "4", rx: "2", fill: "#333948" }),
-              /* @__PURE__ */ jsx("rect", { x: "136", y: "10", width: "16", height: "4", rx: "2", fill: "#333948" })
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: "10",
+                  y: "10",
+                  width: "16",
+                  height: "4",
+                  rx: "2",
+                  fill: "rgb(var(--oui-color-primary-darken))"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: "28",
+                  y: "10",
+                  width: "16",
+                  height: "4",
+                  rx: "2",
+                  fill: "rgb(var(--oui-color-base-4))"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: "46",
+                  y: "10",
+                  width: "16",
+                  height: "4",
+                  rx: "2",
+                  fill: "rgb(var(--oui-color-base-4))"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: "64",
+                  y: "10",
+                  width: "16",
+                  height: "4",
+                  rx: "2",
+                  fill: "rgb(var(--oui-color-base-4))"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: "82",
+                  y: "10",
+                  width: "16",
+                  height: "4",
+                  rx: "2",
+                  fill: "rgb(var(--oui-color-base-4))"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: "100",
+                  y: "10",
+                  width: "16",
+                  height: "4",
+                  rx: "2",
+                  fill: "rgb(var(--oui-color-base-4))"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: "118",
+                  y: "10",
+                  width: "16",
+                  height: "4",
+                  rx: "2",
+                  fill: "rgb(var(--oui-color-base-4))"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: "136",
+                  y: "10",
+                  width: "16",
+                  height: "4",
+                  rx: "2",
+                  fill: "rgb(var(--oui-color-base-4))"
+                }
+              )
             ] }),
             /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_31319_74729", children: /* @__PURE__ */ jsx(
               "rect",
               {
                 width: "130",
                 height: "4",
-                fill: "white",
+                fill: "rgb(var(--oui-color-base-foreground))",
                 transform: "translate(10 10)"
               }
             ) }) })
@@ -4552,28 +4833,118 @@ var init_switchLayout = __esm({
                 width: "144",
                 height: "96",
                 rx: "10",
-                fill: "#07080A",
+                fill: "rgb(var(--oui-color-base-10))",
                 stroke: getStrokeColor(),
                 strokeWidth: "4"
               }
             ),
-            /* @__PURE__ */ jsx("rect", { x: "8", y: "84", width: "132", height: "8", rx: "2", fill: "#181C23" }),
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: "8",
+                y: "84",
+                width: "132",
+                height: "8",
+                rx: "2",
+                fill: "rgb(var(--oui-color-base-7))"
+              }
+            ),
             /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_31319_74743)", children: [
-              /* @__PURE__ */ jsx("rect", { x: "10", y: "86", width: "16", height: "4", rx: "2", fill: "#335FFC" }),
-              /* @__PURE__ */ jsx("rect", { x: "28", y: "86", width: "16", height: "4", rx: "2", fill: "#333948" }),
-              /* @__PURE__ */ jsx("rect", { x: "46", y: "86", width: "16", height: "4", rx: "2", fill: "#333948" }),
-              /* @__PURE__ */ jsx("rect", { x: "64", y: "86", width: "16", height: "4", rx: "2", fill: "#333948" }),
-              /* @__PURE__ */ jsx("rect", { x: "82", y: "86", width: "16", height: "4", rx: "2", fill: "#333948" }),
-              /* @__PURE__ */ jsx("rect", { x: "100", y: "86", width: "16", height: "4", rx: "2", fill: "#333948" }),
-              /* @__PURE__ */ jsx("rect", { x: "118", y: "86", width: "16", height: "4", rx: "2", fill: "#333948" }),
-              /* @__PURE__ */ jsx("rect", { x: "136", y: "86", width: "16", height: "4", rx: "2", fill: "#333948" })
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: "10",
+                  y: "86",
+                  width: "16",
+                  height: "4",
+                  rx: "2",
+                  fill: "rgb(var(--oui-color-primary-darken))"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: "28",
+                  y: "86",
+                  width: "16",
+                  height: "4",
+                  rx: "2",
+                  fill: "rgb(var(--oui-color-base-4))"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: "46",
+                  y: "86",
+                  width: "16",
+                  height: "4",
+                  rx: "2",
+                  fill: "rgb(var(--oui-color-base-4))"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: "64",
+                  y: "86",
+                  width: "16",
+                  height: "4",
+                  rx: "2",
+                  fill: "rgb(var(--oui-color-base-4))"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: "82",
+                  y: "86",
+                  width: "16",
+                  height: "4",
+                  rx: "2",
+                  fill: "rgb(var(--oui-color-base-4))"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: "100",
+                  y: "86",
+                  width: "16",
+                  height: "4",
+                  rx: "2",
+                  fill: "rgb(var(--oui-color-base-4))"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: "118",
+                  y: "86",
+                  width: "16",
+                  height: "4",
+                  rx: "2",
+                  fill: "rgb(var(--oui-color-base-4))"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: "136",
+                  y: "86",
+                  width: "16",
+                  height: "4",
+                  rx: "2",
+                  fill: "rgb(var(--oui-color-base-4))"
+                }
+              )
             ] }),
             /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_31319_74743", children: /* @__PURE__ */ jsx(
               "rect",
               {
                 width: "130",
                 height: "4",
-                fill: "white",
+                fill: "rgb(var(--oui-color-base-foreground))",
                 transform: "translate(10 86)"
               }
             ) }) })
@@ -4605,13 +4976,23 @@ var init_switchLayout = __esm({
                 width: "144",
                 height: "96",
                 rx: "10",
-                fill: "#07080A",
+                fill: "rgb(var(--oui-color-base-10))",
                 stroke: getStrokeColor(),
                 strokeWidth: "4"
               }
             ),
             /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_31319_74757)", children: [
-              /* @__PURE__ */ jsx("rect", { x: "8", y: "8", width: "132", height: "84", rx: "2", fill: "#181C23" }),
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: "8",
+                  y: "8",
+                  width: "132",
+                  height: "84",
+                  rx: "2",
+                  fill: "rgb(var(--oui-color-base-7))"
+                }
+              ),
               /* @__PURE__ */ jsx(
                 "rect",
                 {
@@ -4621,7 +5002,7 @@ var init_switchLayout = __esm({
                   height: "188",
                   rx: "2",
                   transform: "rotate(45 66.8789 -76)",
-                  fill: "#20252F"
+                  fill: "rgb(var(--oui-color-base-6))"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -4633,7 +5014,7 @@ var init_switchLayout = __esm({
                   height: "188",
                   rx: "2",
                   transform: "rotate(45 73.9492 -68.929)",
-                  fill: "#20252F"
+                  fill: "rgb(var(--oui-color-base-6))"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -4645,7 +5026,7 @@ var init_switchLayout = __esm({
                   height: "188",
                   rx: "2",
                   transform: "rotate(45 81.0195 -61.8579)",
-                  fill: "#20252F"
+                  fill: "rgb(var(--oui-color-base-6))"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -4657,7 +5038,7 @@ var init_switchLayout = __esm({
                   height: "188",
                   rx: "2",
                   transform: "rotate(45 88.0938 -54.7867)",
-                  fill: "#20252F"
+                  fill: "rgb(var(--oui-color-base-6))"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -4669,7 +5050,7 @@ var init_switchLayout = __esm({
                   height: "188",
                   rx: "2",
                   transform: "rotate(45 95.1641 -47.7157)",
-                  fill: "#20252F"
+                  fill: "rgb(var(--oui-color-base-6))"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -4681,7 +5062,7 @@ var init_switchLayout = __esm({
                   height: "188",
                   rx: "2",
                   transform: "rotate(45 102.234 -40.6447)",
-                  fill: "#20252F"
+                  fill: "rgb(var(--oui-color-base-6))"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -4693,7 +5074,7 @@ var init_switchLayout = __esm({
                   height: "188",
                   rx: "2",
                   transform: "rotate(45 109.305 -33.5736)",
-                  fill: "#20252F"
+                  fill: "rgb(var(--oui-color-base-6))"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -4705,7 +5086,7 @@ var init_switchLayout = __esm({
                   height: "188",
                   rx: "2",
                   transform: "rotate(45 116.375 -26.5026)",
-                  fill: "#20252F"
+                  fill: "rgb(var(--oui-color-base-6))"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -4717,7 +5098,7 @@ var init_switchLayout = __esm({
                   height: "188",
                   rx: "2",
                   transform: "rotate(45 123.449 -19.4315)",
-                  fill: "#20252F"
+                  fill: "rgb(var(--oui-color-base-6))"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -4729,7 +5110,7 @@ var init_switchLayout = __esm({
                   height: "188",
                   rx: "2",
                   transform: "rotate(45 130.52 -12.3604)",
-                  fill: "#20252F"
+                  fill: "rgb(var(--oui-color-base-6))"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -4741,7 +5122,7 @@ var init_switchLayout = __esm({
                   height: "188",
                   rx: "2",
                   transform: "rotate(45 137.59 -5.28931)",
-                  fill: "#20252F"
+                  fill: "rgb(var(--oui-color-base-6))"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -4753,7 +5134,7 @@ var init_switchLayout = __esm({
                   height: "188",
                   rx: "2",
                   transform: "rotate(45 144.66 1.78174)",
-                  fill: "#20252F"
+                  fill: "rgb(var(--oui-color-base-6))"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -4765,7 +5146,7 @@ var init_switchLayout = __esm({
                   height: "188",
                   rx: "2",
                   transform: "rotate(45 151.73 8.85278)",
-                  fill: "#20252F"
+                  fill: "rgb(var(--oui-color-base-6))"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -4777,7 +5158,7 @@ var init_switchLayout = __esm({
                   height: "188",
                   rx: "2",
                   transform: "rotate(45 158.805 15.9238)",
-                  fill: "#20252F"
+                  fill: "rgb(var(--oui-color-base-6))"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -4789,7 +5170,7 @@ var init_switchLayout = __esm({
                   height: "188",
                   rx: "2",
                   transform: "rotate(45 165.875 22.995)",
-                  fill: "#20252F"
+                  fill: "rgb(var(--oui-color-base-6))"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -4801,7 +5182,7 @@ var init_switchLayout = __esm({
                   height: "188",
                   rx: "2",
                   transform: "rotate(45 172.945 30.066)",
-                  fill: "#20252F"
+                  fill: "rgb(var(--oui-color-base-6))"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -4813,7 +5194,7 @@ var init_switchLayout = __esm({
                   height: "188",
                   rx: "2",
                   transform: "rotate(45 180.016 37.1371)",
-                  fill: "#20252F"
+                  fill: "rgb(var(--oui-color-base-6))"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -4825,7 +5206,7 @@ var init_switchLayout = __esm({
                   height: "188",
                   rx: "2",
                   transform: "rotate(45 187.086 44.2081)",
-                  fill: "#20252F"
+                  fill: "rgb(var(--oui-color-base-6))"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -4837,7 +5218,7 @@ var init_switchLayout = __esm({
                   height: "188",
                   rx: "2",
                   transform: "rotate(45 194.156 51.2792)",
-                  fill: "#20252F"
+                  fill: "rgb(var(--oui-color-base-6))"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -4849,7 +5230,7 @@ var init_switchLayout = __esm({
                   height: "188",
                   rx: "2",
                   transform: "rotate(45 201.23 58.3503)",
-                  fill: "#20252F"
+                  fill: "rgb(var(--oui-color-base-6))"
                 }
               )
             ] }),
@@ -4858,7 +5239,7 @@ var init_switchLayout = __esm({
               {
                 width: "132",
                 height: "84",
-                fill: "white",
+                fill: "rgb(var(--oui-color-base-foreground))",
                 transform: "translate(8 8)"
               }
             ) }) })
@@ -4996,7 +5377,7 @@ var init_tradingview_ui = __esm({
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "oui-pb-1 oui-flex oui-flex-col oui-gap-1",
+          className: "oui-trading-tradingview oui-pb-1 oui-flex oui-flex-col oui-gap-1",
           style: { height: props.height },
           ref: props.boxRef,
           children: [
@@ -5247,7 +5628,7 @@ var init_topTab_ui = __esm({
             props.setTab(e);
             props.setVisible(true);
           },
-          className: props.className,
+          className: cn("oui-trading-topTab", props.className),
           classNames: {
             tabsList: "oui-p-2",
             tabsContent: "oui-min-h-[176px] oui-max-h-[396px]"
@@ -5373,7 +5754,7 @@ var init_orderBookAndEntry_ui = __esm({
         "div",
         {
           className: cn(
-            "oui-mx-1 oui-grid oui-gap-1",
+            "oui-trading-orderBookAndEntry oui-mx-1 oui-grid oui-gap-1",
             props.layout === "right" ? "oui-grid-cols-[4fr,6fr]" : "oui-grid-cols-[6fr,4fr]",
             props.className
           ),
@@ -5767,7 +6148,7 @@ var init_dataList_ui2 = __esm({
           defaultValue: "Position" /* position */,
           onValueChange: (e) => setTab(e),
           size: "lg",
-          className,
+          className: cn("oui-trading-dataList-tabs", className),
           classNames: {
             tabsList: "oui-bg-base-9 oui-rounded-t-xl oui-p-2 oui-overflow-x-scroll oui-hide-scrollbar"
           },
@@ -5884,25 +6265,33 @@ var HeadIcon = () => {
             "path",
             {
               d: "m31.002 14.493-8.326-22.51L.166.31l8.327 22.51z",
-              fill: "#03435D"
+              fill: "rgb(var(--oui-color-base-5))"
             }
           ),
           /* @__PURE__ */ jsx(
             "path",
             {
               d: "m4.456-8.716-18.03 15.84 15.84 18.03 18.03-15.84z",
-              fill: "#157CF2"
+              fill: "rgb(var(--oui-color-primary))"
             }
           ),
           /* @__PURE__ */ jsx(
             "path",
             {
               d: "m17.548 38.67 22.825-7.416-7.416-22.825-22.826 7.416z",
-              fill: "#F3E200"
+              fill: "rgb(var(--oui-color-warning))"
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "a", children: /* @__PURE__ */ jsx("rect", { width: "24", height: "24", rx: "12", fill: "#fff" }) }) })
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "a", children: /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "24",
+            height: "24",
+            rx: "12",
+            fill: "rgb(var(--oui-color-base-foreground))"
+          }
+        ) }) })
       ]
     }
   );
@@ -5942,14 +6331,14 @@ var USDCIcon = (props) => {
             "path",
             {
               d: "M10 20c5.542 0 10-4.458 10-10S15.542 0 10 0 0 4.458 0 10s4.458 10 10 10",
-              fill: "#2775CA"
+              fill: "rgb(var(--oui-color-primary))"
             }
           ),
           /* @__PURE__ */ jsx(
             "path",
             {
               d: "M13 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-.996C12.105 13.465 13 12.593 13 11.473",
-              fill: "#fff",
+              fill: "rgb(var(--oui-color-base-foreground))",
               fillOpacity: ".98"
             }
           ),
@@ -5957,11 +6346,17 @@ var USDCIcon = (props) => {
             "path",
             {
               d: "M7.74 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 .399-.173.044-.043.044-.087.044-.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))"
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "a", children: /* @__PURE__ */ jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "a", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "rgb(var(--oui-color-base-foreground))",
+            d: "M0 0h20v20H0z"
+          }
+        ) }) })
       ]
     }
   );
@@ -5991,7 +6386,7 @@ var OrderlyIcon = (props) => {
               fillRule: "evenodd",
               clipRule: "evenodd",
               d: "M14.1553 4.89304C14.2199 4.94541 14.1821 5.04758 14.0989 5.04758H5.95035C5.86716 5.04758 5.82936 4.94541 5.894 4.89304C7.0223 3.97912 8.45953 3.43164 10.0246 3.43164C11.5898 3.43164 13.0269 3.97912 14.1553 4.89304Z",
-              fill: "white"
+              fill: "rgb(var(--oui-color-base-foreground))"
             }
           ),
           /* @__PURE__ */ jsx(
@@ -6000,7 +6395,7 @@ var OrderlyIcon = (props) => {
               fillRule: "evenodd",
               clipRule: "evenodd",
               d: "M7.47013 11.7869C7.42315 11.7199 7.34748 11.6777 7.26565 11.6777H3.82985C3.75113 11.6777 3.69375 11.7525 3.71563 11.8281C4.5078 14.565 7.0326 16.566 10.0247 16.566C13.017 16.566 15.5417 14.565 16.3339 11.8281C16.3558 11.7525 16.2984 11.6777 16.2197 11.6777H12.7839C12.702 11.6777 12.6264 11.7199 12.5795 11.7869C12.0155 12.5911 11.0815 13.1167 10.0248 13.1167C8.96803 13.1167 8.03406 12.5911 7.47013 11.7869Z",
-              fill: "white"
+              fill: "rgb(var(--oui-color-base-foreground))"
             }
           ),
           /* @__PURE__ */ jsx(
@@ -6009,7 +6404,7 @@ var OrderlyIcon = (props) => {
               fillRule: "evenodd",
               clipRule: "evenodd",
               d: "M12.3347 7.90519C12.3822 7.95756 12.449 7.9891 12.5196 7.9891H16.1137C16.1952 7.9891 16.253 7.90983 16.2261 7.83301C15.9724 7.10689 15.5948 6.43893 15.1187 5.85447C15.074 5.79961 15.0067 5.76855 14.9358 5.76855H5.11323C5.04247 5.76855 4.97512 5.79961 4.93044 5.85447C4.45429 6.43893 4.0767 7.10689 3.82306 7.83301C3.79622 7.90983 3.85398 7.9891 3.93536 7.9891H7.52952C7.60022 7.9891 7.66694 7.95756 7.71445 7.90519C8.28491 7.2763 9.10861 6.88136 10.0246 6.88136C10.9405 6.88136 11.7643 7.2763 12.3347 7.90519Z",
-              fill: "white"
+              fill: "rgb(var(--oui-color-base-foreground))"
             }
           ),
           /* @__PURE__ */ jsx(
@@ -6018,7 +6413,7 @@ var OrderlyIcon = (props) => {
               fillRule: "evenodd",
               clipRule: "evenodd",
               d: "M13.1164 10.9586C13.0553 10.9586 13.0118 10.899 13.0284 10.8401C13.1033 10.5722 13.1433 10.2898 13.1433 9.9981C13.1433 9.58758 13.064 9.19556 12.9199 8.83657C12.8954 8.77581 12.9392 8.70801 13.0046 8.70801H16.392C16.4349 8.70801 16.472 8.73831 16.4799 8.78052C16.5538 9.17511 16.5925 9.58216 16.5925 9.9982C16.5925 10.2978 16.5724 10.5926 16.5337 10.8815C16.5277 10.9258 16.4897 10.9586 16.4451 10.9586H13.1164ZM7.02223 10.8401C7.03868 10.899 6.99532 10.9586 6.93421 10.9586H3.60551C3.56084 10.9586 3.52285 10.9258 3.5169 10.8815C3.47807 10.5926 3.45801 10.2978 3.45801 9.9982C3.45801 9.58216 3.4967 9.17511 3.57069 8.78052C3.57859 8.73831 3.61563 8.70801 3.65856 8.70801H7.04593C7.11141 8.70801 7.15516 8.77581 7.13076 8.83657C6.98657 9.19556 6.90722 9.58758 6.90722 9.9981C6.90722 10.2898 6.94728 10.5722 7.02223 10.8401Z",
-              fill: "white"
+              fill: "rgb(var(--oui-color-base-foreground))"
             }
           )
         ] }),
@@ -6033,12 +6428,19 @@ var OrderlyIcon = (props) => {
               y2: "19.9493",
               gradientUnits: "userSpaceOnUse",
               children: [
-                /* @__PURE__ */ jsx("stop", { stopColor: "#C750FF" }),
-                /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#5800E8" })
+                /* @__PURE__ */ jsx("stop", { stopColor: "rgb(var(--oui-gradient-secondary-start))" }),
+                /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-gradient-secondary-end))" })
               ]
             }
           ),
-          /* @__PURE__ */ jsx("clipPath", { id: "clip0_6403_64483", children: /* @__PURE__ */ jsx("rect", { width: "20", height: "20", fill: "white" }) })
+          /* @__PURE__ */ jsx("clipPath", { id: "clip0_6403_64483", children: /* @__PURE__ */ jsx(
+            "rect",
+            {
+              width: "20",
+              height: "20",
+              fill: "rgb(var(--oui-color-base-foreground))"
+            }
+          ) })
         ] })
       ]
     }
@@ -6046,7 +6448,7 @@ var OrderlyIcon = (props) => {
 };
 var AccountSheet = (props) => {
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, children: [
+  return /* @__PURE__ */ jsxs(Flex, { className: "oui-accountSheet", direction: "column", gap: 4, children: [
     /* @__PURE__ */ jsx(AccountInfo, { ...props }),
     /* @__PURE__ */ jsx(ReferralInfo, { ...props }),
     /* @__PURE__ */ jsx(TradingRewardsInfo, { ...props }),
@@ -6059,7 +6461,7 @@ var AccountSheet = (props) => {
           onClick: props.onGetTestUSDC,
           fullWidth: true,
           loading: props.gettingTestUSDC,
-          className: "oui-border-primary-light oui-text-primary-light",
+          className: "oui-accountSheet-getTestUSDC-btn oui-border-primary-light oui-text-primary-light",
           children: t("trading.faucet.getTestUSDC")
         }
       ),
@@ -6249,7 +6651,7 @@ var TradingRewardsInfo = (props) => {
             width: "100%",
             angle: 180,
             justify: "between",
-            className: "oui-bg-gradient-to-t oui-from-[#2d0061] oui-to-[#bd6bed]",
+            className: "oui-bg-gradient-to-t oui-from-[rgb(var(--oui-gradient-secondary-end))] oui-to-[rgb(var(--oui-gradient-secondary-start))]",
             children: [
               /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 80, children: t("tradingRewards.myEstRewards") }),
               /* @__PURE__ */ jsxs(Flex, { className: "oui-gap-[6px]", children: [
@@ -6585,7 +6987,7 @@ var BottomNavBar = (props) => {
     return /* @__PURE__ */ jsx(ChainWidget, {});
   };
   const showScanQRCode = !props.disabledConnect && props.status !== AccountStatusEnum.EnableTradingWithoutConnected && props.status < AccountStatusEnum.EnableTrading;
-  return /* @__PURE__ */ jsxs("div", { className: "oui-bg-base-9 oui-border-t oui-border-line-4", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "oui-bottomNavBar oui-bg-base-9 oui-border-t oui-border-line-4", children: [
     /* @__PURE__ */ jsxs(
       Flex,
       {
@@ -6972,7 +7374,7 @@ var RiskIndicator = (props) => {
         "div",
         {
           className: cn(
-            "oui-relative oui-w-[2px] oui-h-[2px] oui-rounded-full oui-bg-white after:oui-block after:oui-content-[''] after:oui-absolute after:oui-right-0 after:oui-w-[10px] after:oui-h-[2px] after:oui-bg-white/50",
+            "oui-relative oui-w-[2px] oui-h-[2px] oui-rounded-full oui-bg-base-contrast after:oui-block after:oui-content-[''] after:oui-absolute after:oui-right-0 after:oui-w-[10px] after:oui-h-[2px] after:oui-bg-base-contrast-50",
             className
             // {
             //   "oui-rotate-0": value > 1,
@@ -6986,12 +7388,21 @@ var RiskIndicator = (props) => {
   );
 };
 var PortfolioSheet = (props) => {
-  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, width: "100%", children: [
-    /* @__PURE__ */ jsx(Asset, { ...props }),
-    /* @__PURE__ */ jsx(Divider, { className: "oui-w-full" }),
-    /* @__PURE__ */ jsx(MarginRatio, { ...props }),
-    /* @__PURE__ */ jsx(Buttons, { ...props })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      className: "oui-portfolioSheet",
+      direction: "column",
+      gap: 4,
+      width: "100%",
+      children: [
+        /* @__PURE__ */ jsx(Asset, { ...props }),
+        /* @__PURE__ */ jsx(Divider, { className: "oui-w-full" }),
+        /* @__PURE__ */ jsx(MarginRatio, { ...props }),
+        /* @__PURE__ */ jsx(Buttons, { ...props })
+      ]
+    }
+  );
 };
 var Asset = (props) => {
   const { t } = useTranslation();
@@ -7992,6 +8403,7 @@ var DesktopLayout4 = (props) => {
     Box,
     {
       className: cn(
+        "oui-trading-markets-container",
         "oui-bg-base-10",
         // -8 is for reducing the container's padding
         "oui-sticky oui-z-30 oui-mb-[-8px] oui-py-2",
@@ -8024,7 +8436,7 @@ var DesktopLayout4 = (props) => {
       height: "100%",
       width: marketsWidth,
       style: { minWidth: marketsWidth },
-      className: "oui-transition-all oui-duration-150",
+      className: "oui-trading-markets-container oui-transition-all oui-duration-150",
       onTransitionEnd: () => setAnimating(false),
       children: !animating && marketLayout === "left" && marketsWidget
     }
@@ -8032,6 +8444,7 @@ var DesktopLayout4 = (props) => {
   const symbolInfoBarView = /* @__PURE__ */ jsx(
     Box,
     {
+      className: "oui-trading-symbolInfoBar-container",
       intensity: 900,
       r: "2xl",
       px: 3,
@@ -8085,7 +8498,7 @@ var DesktopLayout4 = (props) => {
       intensity: 900,
       r: "2xl",
       style: { flex: 1, minWidth: tradingViewMinWidth },
-      className: "oui-overflow-hidden",
+      className: "oui-trading-tradingview-container oui-overflow-hidden",
       children: tradingviewWidget
     }
   );
@@ -8100,7 +8513,7 @@ var DesktopLayout4 = (props) => {
         maxWidth: horizontalDraggable ? orderbookMaxWidth : orderbookMinWidth,
         width: orderBookSplitSize
       },
-      className: "oui-overflow-hidden",
+      className: "oui-trading-orderBook-container oui-overflow-hidden",
       children: orderbookWidget
     }
   );
@@ -8124,18 +8537,18 @@ var DesktopLayout4 = (props) => {
         minHeight: dataListInitialHeight
         // minHeight: `max(${dataListMinHeight}px, calc(100vh - ${symbolInfoBarHeight}px - ${orderbookMaxHeight}px - ${space}px))`,
       },
-      className: "oui-overflow-hidden",
+      className: "oui-trading-dataList-container oui-overflow-hidden",
       children: dataListWidget
     }
   );
   const orderInteractionWidgets = useMemo(() => {
     return {
       margin: {
-        className: "",
+        className: "oui-trading-riskRate-container",
         element: /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyRiskRateWidget, {}) })
       },
       assets: {
-        className: "oui-border oui-border-line-12",
+        className: "oui-trading-assetsView-container oui-border oui-border-line-12",
         element: /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
             LazyAssetViewWidget,
@@ -8153,7 +8566,7 @@ var DesktopLayout4 = (props) => {
         ] })
       },
       orderEntry: {
-        className: "",
+        className: "oui-trading-orderEntry-container",
         element: /* @__PURE__ */ jsx(
           OrderEntryWidget,
           {
@@ -8172,6 +8585,7 @@ var DesktopLayout4 = (props) => {
   const orderEntryView = /* @__PURE__ */ jsx(
     Flex,
     {
+      className: "oui-trading-orderEntry-container",
       gapY: 2,
       direction: "column",
       height: "100%",
@@ -8287,7 +8701,10 @@ var DesktopLayout4 = (props) => {
                 marketLayout === "top" && /* @__PURE__ */ jsx(
                   Box,
                   {
-                    className: cn("oui-mt-2 oui-max-h-8 oui-px-3", props.className),
+                    className: cn(
+                      "oui-trading-markets-container oui-mt-2 oui-max-h-8 oui-px-3",
+                      props.className
+                    ),
                     children: horizontalMarketsView
                   }
                 ),
@@ -8683,14 +9100,8 @@ var MaybeEqual = () => {
       viewBox: "0 0 8 8",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M6.456 3.48a3.5 3.5 0 0 0 .431-.567 9 9 0 0 0 .361-.654l-.648-.66-.107.185q-.071.12-.142.244a3 3 0 0 1-.27.396 1.4 1.4 0 0 1-.318.29.67.67 0 0 1-.38.114q-.307 0-.666-.194t-.742-.42q-.383-.227-.777-.42a1.7 1.7 0 0 0-.771-.194q-.401.001-.72.154a2.1 2.1 0 0 0-.57.404 2.6 2.6 0 0 0-.43.574 5 5 0 0 0-.307.646l.649.66q.165-.437.464-.833.298-.395.742-.396.347 0 .7.194.354.193.721.42.37.227.763.42.396.195.826.195.374.001.665-.155.29-.151.526-.404m.352 2.941a3.5 3.5 0 0 0 .431-.566q.196-.315.361-.654l-.648-.66-.107.184-.142.244a3 3 0 0 1-.27.396 1.4 1.4 0 0 1-.318.29.67.67 0 0 1-.38.115q-.307 0-.666-.195-.36-.193-.742-.42-.383-.226-.778-.42a1.7 1.7 0 0 0-.77-.194q-.401.001-.72.154a2.1 2.1 0 0 0-.57.405 2.6 2.6 0 0 0-.43.574 5 5 0 0 0-.307.646l.649.66q.165-.437.464-.833.297-.395.742-.396.347 0 .7.194.354.193.721.42.369.226.763.42.396.194.826.194.374.001.665-.154.29-.152.526-.404",
-          fill: "#fff",
-          fillOpacity: ".54"
-        }
-      )
+      className: "oui-fill-base-contrast-54",
+      children: /* @__PURE__ */ jsx("path", { d: "M6.456 3.48a3.5 3.5 0 0 0 .431-.567 9 9 0 0 0 .361-.654l-.648-.66-.107.185q-.071.12-.142.244a3 3 0 0 1-.27.396 1.4 1.4 0 0 1-.318.29.67.67 0 0 1-.38.114q-.307 0-.666-.194t-.742-.42q-.383-.227-.777-.42a1.7 1.7 0 0 0-.771-.194q-.401.001-.72.154a2.1 2.1 0 0 0-.57.404 2.6 2.6 0 0 0-.43.574 5 5 0 0 0-.307.646l.649.66q.165-.437.464-.833.298-.395.742-.396.347 0 .7.194.354.193.721.42.37.227.763.42.396.195.826.195.374.001.665-.155.29-.151.526-.404m.352 2.941a3.5 3.5 0 0 0 .431-.566q.196-.315.361-.654l-.648-.66-.107.184-.142.244a3 3 0 0 1-.27.396 1.4 1.4 0 0 1-.318.29.67.67 0 0 1-.38.115q-.307 0-.666-.195-.36-.193-.742-.42-.383-.226-.778-.42a1.7 1.7 0 0 0-.77-.194q-.401.001-.72.154a2.1 2.1 0 0 0-.57.405 2.6 2.6 0 0 0-.43.574 5 5 0 0 0-.307.646l.649.66q.165-.437.464-.833.297-.395.742-.396.347 0 .7.194.354.193.721.42.369.226.763.42.396.194.826.194.374.001.665-.154.29-.152.526-.404" })
     }
   );
 };