@orderly.network/ui 2.10.2 → 2.11.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import * as React70 from 'react';
-import React70__default, { forwardRef, useMemo, useRef, useCallback, useState, useEffect, useId, createContext, Fragment as Fragment$1, memo, useImperativeHandle, useContext, useReducer } from 'react';
+import * as React71 from 'react';
+import React71__default, { forwardRef, useMemo, useRef, useCallback, useState, useEffect, useId, createContext, Fragment as Fragment$1, memo, useImperativeHandle, useContext, useReducer } from 'react';
 import { createTV, tv as tv$1, cnBase, cn } from 'tailwind-variants';
 export { cnBase as cn } from 'tailwind-variants';
 import { Slot } from '@radix-ui/react-slot';
@@ -524,7 +524,7 @@ var boxVariants = tv({
     __size: false
   }
 });
-var Box = React70__default.forwardRef((props, forwardedRef) => {
+var Box = React71__default.forwardRef((props, forwardedRef) => {
   const {
     asChild = false,
     as: TAG = "div",
@@ -758,7 +758,7 @@ var Spinner = (props) => {
     /* @__PURE__ */ jsx("span", { className: "oui-sr-only", children: "Loading..." })
   ] });
 };
-var BaseButton = React70__default.forwardRef(
+var BaseButton = React71__default.forwardRef(
   (props, forwardedRef) => {
     const {
       asChild = false,
@@ -774,7 +774,7 @@ var BaseButton = React70__default.forwardRef(
     const Comp = asChild ? Slot : "button";
     const isDisabled = typeof disabled !== "undefined" ? disabled : loading;
     const iconElement = useMemo(() => {
-      return icon ? React70__default.cloneElement(icon, {
+      return icon ? React71__default.cloneElement(icon, {
         size: size === "xs" ? 12 : size === "sm" ? 12 : size === "md" ? 14 : size === "lg" ? 16 : size === "xl" ? 18 : 12,
         className: "oui-text-inherit",
         opacity: loading ? 0 : 1
@@ -1024,7 +1024,7 @@ var buttonVariants = tv$1(
     responsiveVariants: ["md", "lg"]
   }
 );
-var Button = React70__default.forwardRef(
+var Button = React71__default.forwardRef(
   ({
     className,
     variant,
@@ -1057,7 +1057,7 @@ var Button = React70__default.forwardRef(
   }
 );
 Button.displayName = "Button";
-var ThrottledButton = React70__default.forwardRef(({ onClick, throttleDuration = 700, ...props }, ref) => {
+var ThrottledButton = React71__default.forwardRef(({ onClick, throttleDuration = 700, ...props }, ref) => {
   const lastCall = useRef(0);
   const throttle = useCallback(
     (delay, fn) => {
@@ -1074,6 +1074,89 @@ var ThrottledButton = React70__default.forwardRef(({ onClick, throttleDuration =
   const debouncedClick = throttle(throttleDuration, onClick);
   return /* @__PURE__ */ jsx(Button, { onClick: debouncedClick, ref, ...props });
 });
+var iconButtonVariants = tv$1({
+  base: [
+    "oui-button",
+    "oui-inline-flex",
+    "oui-items-center",
+    "oui-justify-center",
+    "oui-transition-colors",
+    "disabled:oui-cursor-not-allowed",
+    "disabled:oui-opacity-36"
+  ],
+  variants: {
+    color: {
+      primary: [
+        "oui-text-primary-darken",
+        "hover:oui-text-primary-darken/80",
+        "active:oui-text-primary-darken/70"
+      ],
+      secondary: [
+        "oui-text-base-contrast-54",
+        "hover:oui-text-base-contrast-80",
+        "active:oui-text-base-contrast-70"
+      ],
+      success: [
+        "oui-text-success",
+        "hover:oui-text-success/80",
+        "active:oui-text-success/70"
+      ],
+      buy: [
+        "oui-text-success",
+        "hover:oui-text-success/80",
+        "active:oui-text-success/70"
+      ],
+      danger: [
+        "oui-text-danger",
+        "hover:oui-text-danger/80",
+        "active:oui-text-danger/70"
+      ],
+      sell: [
+        "oui-text-danger",
+        "hover:oui-text-danger/80",
+        "active:oui-text-danger/70"
+      ],
+      warning: [
+        "oui-text-warning-darken",
+        "hover:oui-text-warning-darken/80",
+        "active:oui-text-warning-darken/70"
+      ],
+      gray: [
+        "oui-text-base",
+        "hover:oui-text-base/80",
+        "active:oui-text-base/70"
+      ],
+      light: [
+        "oui-text-white",
+        "hover:oui-text-white/80",
+        "active:oui-text-white/70"
+      ]
+    }
+  },
+  defaultVariants: {
+    color: "secondary"
+  }
+});
+var IconButton = React71__default.forwardRef(
+  ({ className, color, angle, style, children, ...props }, ref) => {
+    const angleStyle = parseAngleProps({ angle });
+    return /* @__PURE__ */ jsx(
+      BaseButton,
+      {
+        className: iconButtonVariants({
+          color,
+          className
+        }),
+        size: "md",
+        ref,
+        style: { ...style, ...angleStyle },
+        ...props,
+        children
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
 var gridVariants = tv({
   extend: gapVariants,
   base: ["oui-grid"],
@@ -1144,7 +1227,7 @@ var gridVariants = tv({
     // autoFlow: "row",
   }
 });
-var Grid = React70__default.forwardRef((props, ref) => {
+var Grid = React71__default.forwardRef((props, ref) => {
   const { className, cols, rows, gap, gapX, gapY, autoFlow, ...rest } = props;
   return /* @__PURE__ */ jsx(
     Box,
@@ -1238,7 +1321,7 @@ var iconVariants = tv$1({
     color: "black"
   }
 });
-var BaseIcon = React70__default.forwardRef(
+var BaseIcon = React71__default.forwardRef(
   (props, ref) => {
     const {
       size = 24,
@@ -1300,7 +1383,7 @@ var avatarVariants = tv({
     size: "sm"
   }
 });
-var AvatarBase = React70.forwardRef(({ className, size, ...props }, ref) => {
+var AvatarBase = React71.forwardRef(({ className, size, ...props }, ref) => {
   const { root } = avatarVariants({ size });
   return /* @__PURE__ */ jsx(
     AvatarPrimitive.Root,
@@ -1312,7 +1395,7 @@ var AvatarBase = React70.forwardRef(({ className, size, ...props }, ref) => {
   );
 });
 AvatarBase.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React70.forwardRef(({ className, ...props }, ref) => {
+var AvatarImage = React71.forwardRef(({ className, ...props }, ref) => {
   const { image } = avatarVariants();
   return /* @__PURE__ */ jsx(
     AvatarPrimitive.Image,
@@ -1324,12 +1407,12 @@ var AvatarImage = React70.forwardRef(({ className, ...props }, ref) => {
   );
 });
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React70.forwardRef(({ className, ...props }, ref) => {
+var AvatarFallback = React71.forwardRef(({ className, ...props }, ref) => {
   const { fallback } = avatarVariants({ className });
   return /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, { ref, className: fallback(), ...props });
 });
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-var Avatar = React70.forwardRef((props, ref) => {
+var Avatar = React71.forwardRef((props, ref) => {
   const { size, src, fallback, delayMs, alt, onLoadingStatusChange, ...rest } = props;
   return /* @__PURE__ */ jsxs(AvatarBase, { ...rest, ref, size, children: [
     /* @__PURE__ */ jsx(
@@ -1343,7 +1426,7 @@ var Avatar = React70.forwardRef((props, ref) => {
     typeof fallback !== "undefined" && /* @__PURE__ */ jsx(AvatarFallback, { delayMs, children: fallback })
   ] });
 });
-var EVMAvatar = React70.forwardRef((props, ref) => {
+var EVMAvatar = React71.forwardRef((props, ref) => {
   const { address, ...rest } = props;
   const src = useMemo(() => makeBlockie(address), [props.address]);
   return /* @__PURE__ */ jsx(Avatar, { ...rest, src });
@@ -1413,7 +1496,7 @@ var CombineIcon = (props) => {
     subElement
   ] });
 };
-var CloseIcon = React70__default.forwardRef(
+var CloseIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
@@ -1427,7 +1510,7 @@ var CloseIcon = React70__default.forwardRef(
   }
 );
 CloseIcon.displayName = "CloseIcon";
-var BaseIconWithPath = React70__default.forwardRef((props, ref) => {
+var BaseIconWithPath = React71__default.forwardRef((props, ref) => {
   const { opacity = 0.54, d, ...rest } = props;
   return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
     "path",
@@ -1440,7 +1523,7 @@ var BaseIconWithPath = React70__default.forwardRef((props, ref) => {
     }
   ) });
 });
-var CheckIcon = React70__default.forwardRef(
+var CheckIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsx(
@@ -1454,7 +1537,7 @@ var CheckIcon = React70__default.forwardRef(
   }
 );
 CheckIcon.displayName = "CheckIcon";
-var ChevronDownIcon = React70__default.forwardRef(
+var ChevronDownIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
@@ -1468,7 +1551,7 @@ var ChevronDownIcon = React70__default.forwardRef(
   }
 );
 ChevronDownIcon.displayName = "ChevronDownIcon";
-var ChevronUpIcon = React70__default.forwardRef(
+var ChevronUpIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
@@ -1482,7 +1565,7 @@ var ChevronUpIcon = React70__default.forwardRef(
   }
 );
 ChevronUpIcon.displayName = "ChevronUpIcon";
-var CaretUpIcon = React70__default.forwardRef(
+var CaretUpIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
@@ -1496,7 +1579,7 @@ var CaretUpIcon = React70__default.forwardRef(
   }
 );
 CaretUpIcon.displayName = "CaretUpIcon";
-var CaretDownIcon = React70__default.forwardRef(
+var CaretDownIcon = React71__default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsx(
       BaseIconWithPath,
@@ -1509,7 +1592,7 @@ var CaretDownIcon = React70__default.forwardRef(
   }
 );
 CaretDownIcon.displayName = "CaretDownIcon";
-var CaretLeftIcon = React70__default.forwardRef(
+var CaretLeftIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
@@ -1523,7 +1606,7 @@ var CaretLeftIcon = React70__default.forwardRef(
   }
 );
 CaretLeftIcon.displayName = "CaretLeftIcon";
-var CaretRightIcon = React70__default.forwardRef(
+var CaretRightIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
@@ -1537,7 +1620,7 @@ var CaretRightIcon = React70__default.forwardRef(
   }
 );
 CaretRightIcon.displayName = "CaretRightIcon";
-var ChevronLeftIcon = React70__default.forwardRef(
+var ChevronLeftIcon = React71__default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsx(
       BaseIconWithPath,
@@ -1550,7 +1633,7 @@ var ChevronLeftIcon = React70__default.forwardRef(
   }
 );
 ChevronLeftIcon.displayName = "ChevronLeftIcon";
-var ChevronRightIcon = React70__default.forwardRef(
+var ChevronRightIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
@@ -1564,7 +1647,7 @@ var ChevronRightIcon = React70__default.forwardRef(
   }
 );
 ChevronRightIcon.displayName = "ChevronRightIcon";
-var CalendarMinusIcon = React70__default.forwardRef(
+var CalendarMinusIcon = React71__default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsx(
       BaseIconWithPath,
@@ -1577,7 +1660,7 @@ var CalendarMinusIcon = React70__default.forwardRef(
   }
 );
 CalendarMinusIcon.displayName = "CalendarMinusIcon";
-var SettingIcon = React70__default.forwardRef(
+var SettingIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
@@ -1591,7 +1674,7 @@ var SettingIcon = React70__default.forwardRef(
   }
 );
 SettingIcon.displayName = "SettingIcon";
-var CloseSquareFillIcon = React70__default.forwardRef((props, ref) => {
+var CloseSquareFillIcon = React71__default.forwardRef((props, ref) => {
   const { opacity = 0.54, ...rest } = props;
   return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
     "path",
@@ -1603,7 +1686,7 @@ var CloseSquareFillIcon = React70__default.forwardRef((props, ref) => {
   ) });
 });
 CloseSquareFillIcon.displayName = "CloseSquareFillIcon";
-var CloseCircleFillIcon = React70__default.forwardRef((props, ref) => {
+var CloseCircleFillIcon = React71__default.forwardRef((props, ref) => {
   const { opacity = 0.54, ...rest } = props;
   return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
     "path",
@@ -1615,7 +1698,7 @@ var CloseCircleFillIcon = React70__default.forwardRef((props, ref) => {
   ) });
 });
 CloseCircleFillIcon.displayName = "CloseCircleFillIcon";
-var CheckedCircleFillIcon = React70__default.forwardRef((props, ref) => {
+var CheckedCircleFillIcon = React71__default.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(
     BaseIconWithPath,
     {
@@ -1626,7 +1709,7 @@ var CheckedCircleFillIcon = React70__default.forwardRef((props, ref) => {
   );
 });
 CheckedCircleFillIcon.displayName = "CheckedCircleFillIcon";
-var CheckedSquareFillIcon = React70__default.forwardRef((props, ref) => {
+var CheckedSquareFillIcon = React71__default.forwardRef((props, ref) => {
   const { opacity = 0.54, ...rest } = props;
   return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
     "path",
@@ -1640,7 +1723,7 @@ var CheckedSquareFillIcon = React70__default.forwardRef((props, ref) => {
   ) });
 });
 CheckedSquareFillIcon.displayName = "CheckSquareFillIcon";
-var CheckSquareEmptyIcon = React70__default.forwardRef(
+var CheckSquareEmptyIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
@@ -1656,7 +1739,7 @@ var CheckSquareEmptyIcon = React70__default.forwardRef(
   }
 );
 CheckSquareEmptyIcon.displayName = "CheckSquareEmptyIcon";
-var PlusIcon = React70__default.forwardRef(
+var PlusIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
@@ -1670,7 +1753,7 @@ var PlusIcon = React70__default.forwardRef(
   }
 );
 PlusIcon.displayName = "PlusIcon";
-var ReduceIcon = React70__default.forwardRef(
+var ReduceIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
@@ -1688,7 +1771,7 @@ var ReduceIcon = React70__default.forwardRef(
   }
 );
 ReduceIcon.displayName = "ReduceIcon";
-var CircleOutlinedIcon = React70__default.forwardRef((props, ref) => {
+var CircleOutlinedIcon = React71__default.forwardRef((props, ref) => {
   const { opacity = 0.54, ...rest } = props;
   return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
     "path",
@@ -1700,7 +1783,7 @@ var CircleOutlinedIcon = React70__default.forwardRef((props, ref) => {
   ) });
 });
 CircleOutlinedIcon.displayName = "CircleOutlinedIcon";
-var SquareOutlinedIcon = React70__default.forwardRef((props, ref) => {
+var SquareOutlinedIcon = React71__default.forwardRef((props, ref) => {
   const { opacity = 0.54, ...rest } = props;
   return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
     "path",
@@ -1712,7 +1795,7 @@ var SquareOutlinedIcon = React70__default.forwardRef((props, ref) => {
   ) });
 });
 SquareOutlinedIcon.displayName = "SquareOutlinedIcon";
-var ExclamationFillIcon = React70__default.forwardRef((props, ref) => {
+var ExclamationFillIcon = React71__default.forwardRef((props, ref) => {
   const { ...rest } = props;
   return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
     "path",
@@ -1723,7 +1806,7 @@ var ExclamationFillIcon = React70__default.forwardRef((props, ref) => {
   ) });
 });
 ExclamationFillIcon.displayName = "ExclamationFillIcon";
-var QuestionFillIcon = React70__default.forwardRef(
+var QuestionFillIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
@@ -1737,7 +1820,7 @@ var QuestionFillIcon = React70__default.forwardRef(
   }
 );
 QuestionFillIcon.displayName = "ExclamationFillIcon";
-var ArrowLeftRightIcon = React70__default.forwardRef((props, ref) => {
+var ArrowLeftRightIcon = React71__default.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(
     BaseIconWithPath,
     {
@@ -1748,7 +1831,7 @@ var ArrowLeftRightIcon = React70__default.forwardRef((props, ref) => {
   );
 });
 ArrowLeftRightIcon.displayName = "ArrowLeftRightIcon";
-var ArrowDownUpIcon = React70__default.forwardRef(
+var ArrowDownUpIcon = React71__default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsx(
       BaseIconWithPath,
@@ -1761,7 +1844,7 @@ var ArrowDownUpIcon = React70__default.forwardRef(
   }
 );
 ArrowDownUpIcon.displayName = "ArrowDownUpIconIcon";
-var ArrowUpSquareFillIcon = React70__default.forwardRef((props, ref) => {
+var ArrowUpSquareFillIcon = React71__default.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(
     BaseIconWithPath,
     {
@@ -1772,7 +1855,7 @@ var ArrowUpSquareFillIcon = React70__default.forwardRef((props, ref) => {
   );
 });
 ArrowUpSquareFillIcon.displayName = "ArrowUpSquareFillIconIcon";
-var ArrowDownSquareFillIcon = React70__default.forwardRef((props, ref) => {
+var ArrowDownSquareFillIcon = React71__default.forwardRef((props, ref) => {
   const { opacity = 0.54, ...rest } = props;
   return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
     "path",
@@ -1784,7 +1867,7 @@ var ArrowDownSquareFillIcon = React70__default.forwardRef((props, ref) => {
   ) });
 });
 ArrowDownSquareFillIcon.displayName = "ArrowDownSquareFillIconIcon";
-var ArrowLeftRightSquareFill = React70__default.forwardRef((props, ref) => {
+var ArrowLeftRightSquareFill = React71__default.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -1810,7 +1893,7 @@ var ArrowLeftRightSquareFill = React70__default.forwardRef((props, ref) => {
 if (process.env.NODE_ENV !== "production") {
   ArrowLeftRightSquareFill.displayName = "ArrowLeftRightSquareFill";
 }
-var ArrowRightUpSquareFillIcon = React70__default.forwardRef((props, ref) => {
+var ArrowRightUpSquareFillIcon = React71__default.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(
     BaseIconWithPath,
     {
@@ -1979,7 +2062,7 @@ var BattleSolidInactiveIcon = (props) => {
     }
   ) });
 };
-var FeeTierIcon = React70__default.forwardRef(
+var FeeTierIcon = React71__default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsx(
       BaseIconWithPath,
@@ -2045,7 +2128,7 @@ var EarnInactiveIcon = (props) => {
     )
   ] }) });
 };
-var EditIcon = React70__default.forwardRef(
+var EditIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
@@ -2059,7 +2142,7 @@ var EditIcon = React70__default.forwardRef(
   }
 );
 EditIcon.displayName = "EditIcon";
-var EyeIcon = React70__default.forwardRef(
+var EyeIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
@@ -2073,7 +2156,7 @@ var EyeIcon = React70__default.forwardRef(
   }
 );
 EyeIcon.displayName = "EyeIcon";
-var ShareIcon = React70__default.forwardRef(
+var ShareIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
@@ -2087,7 +2170,7 @@ var ShareIcon = React70__default.forwardRef(
   }
 );
 ShareIcon.displayName = "ShareIcon";
-var EyeCloseIcon = React70__default.forwardRef(
+var EyeCloseIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
@@ -2101,7 +2184,7 @@ var EyeCloseIcon = React70__default.forwardRef(
   }
 );
 EyeCloseIcon.displayName = "EyeCloseIcon";
-var RefreshIcon = React70__default.forwardRef(
+var RefreshIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
@@ -2273,7 +2356,7 @@ var EsOrderlyIcon = (props) => {
     }
   );
 };
-var InfoCircleIcon = React70__default.forwardRef(
+var InfoCircleIcon = React71__default.forwardRef(
   (props, ref) => {
     const { className, opacity = 0.36, ...rest } = props;
     return /* @__PURE__ */ jsx(
@@ -2307,7 +2390,7 @@ var WalletIcon = (props) => {
   }, [props.name]);
   return /* @__PURE__ */ jsx(Avatar, { size: props.size, src: url, alt: `${props.name}` });
 };
-var CalendarIcon = React70__default.forwardRef(
+var CalendarIcon = React71__default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsx(
       BaseIconWithPath,
@@ -2320,7 +2403,7 @@ var CalendarIcon = React70__default.forwardRef(
   }
 );
 CalendarIcon.displayName = "CaretLeftIcon";
-var CopyIcon = React70__default.forwardRef(
+var CopyIcon = React71__default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsx(
       BaseIconWithPath,
@@ -2333,7 +2416,7 @@ var CopyIcon = React70__default.forwardRef(
   }
 );
 CopyIcon.displayName = "CopyIcon";
-var ServerFillIcon = React70__default.forwardRef(
+var ServerFillIcon = React71__default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsx(
       BaseIconWithPath,
@@ -2346,7 +2429,7 @@ var ServerFillIcon = React70__default.forwardRef(
   }
 );
 ServerFillIcon.displayName = "ServerFillIcon";
-var SortingAscIcon = React70__default.forwardRef(
+var SortingAscIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxs(BaseIcon, { ref, ...rest, children: [
@@ -2370,7 +2453,7 @@ var SortingAscIcon = React70__default.forwardRef(
   }
 );
 SortingAscIcon.displayName = "SortingAscIcon";
-var SortingDescIcon = React70__default.forwardRef(
+var SortingDescIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxs(BaseIcon, { ref, ...rest, children: [
@@ -2394,7 +2477,7 @@ var SortingDescIcon = React70__default.forwardRef(
   }
 );
 SortingDescIcon.displayName = "SortingDescIcon";
-var ArrowUpShortIcon = React70__default.forwardRef(
+var ArrowUpShortIcon = React71__default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsx(
       BaseIconWithPath,
@@ -2406,7 +2489,7 @@ var ArrowUpShortIcon = React70__default.forwardRef(
     );
   }
 );
-var ArrowDownShortIcon = React70__default.forwardRef(
+var ArrowDownShortIcon = React71__default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsx(
       BaseIconWithPath,
@@ -2418,7 +2501,7 @@ var ArrowDownShortIcon = React70__default.forwardRef(
     );
   }
 );
-var ArrowLeftShortIcon = React70__default.forwardRef(
+var ArrowLeftShortIcon = React71__default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsx(
       BaseIconWithPath,
@@ -2430,7 +2513,7 @@ var ArrowLeftShortIcon = React70__default.forwardRef(
     );
   }
 );
-var ArrowRightShortIcon = React70__default.forwardRef(
+var ArrowRightShortIcon = React71__default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsx(
       BaseIconWithPath,
@@ -2446,7 +2529,7 @@ ArrowUpShortIcon.displayName = "ArrowUpShortIcon";
 ArrowDownShortIcon.displayName = "ArrowDownShortIcon";
 ArrowLeftShortIcon.displayName = "ArrowLeftShortIcon";
 ArrowRightShortIcon.displayName = "ArrowRightShortIcon";
-var SortingIcon = React70__default.forwardRef(
+var SortingIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
@@ -3476,7 +3559,7 @@ var StarChildChatInactiveIcon = (props) => {
     )
   ] });
 };
-var CloseRoundFillIcon = React70__default.forwardRef((props, ref) => {
+var CloseRoundFillIcon = React71__default.forwardRef((props, ref) => {
   const { opacity = 0.54, ...rest } = props;
   return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, viewBox: "0 0 28 28", children: /* @__PURE__ */ jsx(
     "path",
@@ -3759,7 +3842,7 @@ function EmptyStateIcon() {
   );
 }
 var emptyData_default = EmptyStateIcon;
-var VectorIcon = React70__default.forwardRef(
+var VectorIcon = React71__default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsx(
       "svg",
@@ -3853,7 +3936,7 @@ var PersonIcon = () => {
     }
   );
 };
-var SettingFillIcon = React70__default.forwardRef(
+var SettingFillIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
@@ -3888,7 +3971,7 @@ var TradingLeftNavIcon = (props) => {
     }
   );
 };
-var VaultsIcon = React70__default.forwardRef(
+var VaultsIcon = React71__default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxs(
       "svg",
@@ -3953,7 +4036,7 @@ var LeftNavVaultsIcon = forwardRef(
     );
   }
 );
-var NewsFillIcon = React70__default.forwardRef(
+var NewsFillIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 1, ...rest } = props;
     return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsx(
@@ -3967,7 +4050,7 @@ var NewsFillIcon = React70__default.forwardRef(
   }
 );
 NewsFillIcon.displayName = "NewsFillIcon";
-var BellIcon = React70__default.forwardRef(
+var BellIcon = React71__default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsx(
       BaseIconWithPath,
@@ -4041,7 +4124,7 @@ var ReferralSolidIcon = (props) => {
     }
   ) });
 };
-var AddCircleIcon = React70__default.forwardRef(
+var AddCircleIcon = React71__default.forwardRef(
   (props, ref) => {
     const { className, opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxs(
@@ -4077,7 +4160,7 @@ var AddCircleIcon = React70__default.forwardRef(
   }
 );
 AddCircleIcon.displayName = "AddCircleIcon";
-var WarningIcon = React70__default.forwardRef(
+var WarningIcon = React71__default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsx(
       "svg",
@@ -4094,7 +4177,7 @@ var WarningIcon = React70__default.forwardRef(
     );
   }
 );
-var RwaIcon = React70__default.forwardRef(
+var RwaIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 1, ...rest } = props;
     return /* @__PURE__ */ jsx(BaseIcon, { ref, ...rest, viewBox: "0 0 12 12", children: /* @__PURE__ */ jsx(
@@ -4165,7 +4248,7 @@ var textVariants = tv({
     }
   }
 });
-var Text = React70__default.forwardRef((props, forwardedRef) => {
+var Text = React71__default.forwardRef((props, forwardedRef) => {
   const {
     children,
     className,
@@ -4254,7 +4337,7 @@ var isTextRule = (rule) => {
 };
 var DEFAULT_SYMBOL_FORMAT = "base-quote";
 var DEFAULT_DATE_FORMAT = "yyyy-MM-dd HH:mm:ss";
-var FormattedText = React70__default.forwardRef(
+var FormattedText = React71__default.forwardRef(
   (props, ref) => {
     const {
       rule,
@@ -4334,8 +4417,11 @@ var FormattedText = React70__default.forwardRef(
         const quote = arr[2];
         return (formatString ?? DEFAULT_SYMBOL_FORMAT).replace("type", type).replace("base", base).replace("quote", quote);
       }
+      if (capitalize && typeof children === "string") {
+        return children.charAt(0).toUpperCase() + children.slice(1);
+      }
       return children;
-    }, [children, rule, formatString, range, symbolElement]);
+    }, [children, rule, formatString, range, symbolElement, capitalize]);
     const contentWithFix = useMemo(() => {
       if (typeof suffix === "undefined" && typeof prefixElement === "undefined") {
         return content;
@@ -4366,7 +4452,7 @@ var gradientTextVariants = tv({
     }
   }
 });
-var GradientText = React70__default.forwardRef((props, ref) => {
+var GradientText = React71__default.forwardRef((props, ref) => {
   const { color, className, angle, ...rest } = props;
   const style = parseAngleProps({ angle });
   return (
@@ -4534,7 +4620,7 @@ var statisticVariants = tv({
     // color: "default",
   }
 });
-var StatisticLabel = React70__default.forwardRef(
+var StatisticLabel = React71__default.forwardRef(
   (props, ref) => {
     const { label: labelClassName } = statisticVariants({});
     return /* @__PURE__ */ jsx(
@@ -4550,7 +4636,7 @@ var StatisticLabel = React70__default.forwardRef(
   }
 );
 StatisticLabel.displayName = "StatisticLabel";
-var Statistic = React70__default.forwardRef((props, ref) => {
+var Statistic = React71__default.forwardRef((props, ref) => {
   const { label, valueProps, align, className, classNames, children, ...rest } = props;
   const { root, value: valueClassName } = statisticVariants({ align });
   const value = useMemo(() => {
@@ -4891,7 +4977,7 @@ var inputVariants = tv(
     responsiveVariants: ["md", "lg"]
   }
 );
-var Input = React70__default.forwardRef((props, ref) => {
+var Input = React71__default.forwardRef((props, ref) => {
   const {
     size,
     disabled,
@@ -4970,7 +5056,7 @@ var Input = React70__default.forwardRef((props, ref) => {
     )
   ] });
 });
-var ClearButton = React70__default.forwardRef((props, ref) => {
+var ClearButton = React71__default.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -5026,7 +5112,7 @@ var popoverVariants = tv({
 var PopoverRoot = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React70.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var PopoverContent = React71.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   PopoverPrimitive.Content,
   {
     ref,
@@ -5077,7 +5163,7 @@ var scrollAreaVariants = tv({
     }
   }
 });
-var ScrollArea = React70__default.forwardRef((oriProps, ref) => {
+var ScrollArea = React71__default.forwardRef((oriProps, ref) => {
   const {
     className,
     classNames,
@@ -5107,7 +5193,7 @@ var ScrollArea = React70__default.forwardRef((oriProps, ref) => {
   );
 });
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React70__default.forwardRef((oriProps, ref) => {
+var ScrollBar = React71__default.forwardRef((oriProps, ref) => {
   const { className, orientation = "vertical", ...props } = oriProps;
   const { bar, tumb } = scrollAreaVariants({ className, orientation });
   return /* @__PURE__ */ jsx(
@@ -5280,7 +5366,7 @@ var selectVariants = tv(
 var SelectRoot = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React70.forwardRef(
+var SelectTrigger = React71.forwardRef(
   ({
     className,
     children,
@@ -5334,7 +5420,7 @@ var SelectTrigger = React70.forwardRef(
   }
 );
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React70.forwardRef(({ className, ...props }, ref) => {
+var SelectScrollUpButton = React71.forwardRef(({ className, ...props }, ref) => {
   const { scrollUpButton } = selectVariants();
   return /* @__PURE__ */ jsx(
     SelectPrimitive.ScrollUpButton,
@@ -5347,7 +5433,7 @@ var SelectScrollUpButton = React70.forwardRef(({ className, ...props }, ref) =>
   );
 });
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React70.forwardRef(({ className, ...props }, ref) => {
+var SelectScrollDownButton = React71.forwardRef(({ className, ...props }, ref) => {
   const { scrollDownButton } = selectVariants();
   return /* @__PURE__ */ jsx(
     SelectPrimitive.ScrollDownButton,
@@ -5360,7 +5446,7 @@ var SelectScrollDownButton = React70.forwardRef(({ className, ...props }, ref) =
   );
 });
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React70.forwardRef(({ className, children, position = "popper", ...props }, ref) => {
+var SelectContent = React71.forwardRef(({ className, children, position = "popper", ...props }, ref) => {
   const { content, viewport } = selectVariants({ position, className });
   return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     SelectPrimitive.Content,
@@ -5374,7 +5460,7 @@ var SelectContent = React70.forwardRef(({ className, children, position = "poppe
   ) });
 });
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React70.forwardRef(({ className, ...props }, ref) => {
+var SelectLabel = React71.forwardRef(({ className, ...props }, ref) => {
   const { label } = selectVariants();
   return /* @__PURE__ */ jsx(
     SelectPrimitive.Label,
@@ -5386,12 +5472,12 @@ var SelectLabel = React70.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React70.forwardRef(({ className, children, size, ...props }, ref) => {
+var SelectItem = React71.forwardRef(({ className, children, size, ...props }, ref) => {
   const { item } = selectVariants({ size });
   return /* @__PURE__ */ jsx(SelectPrimitive.Item, { ref, className: item({ className }), ...props, children: /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children }) });
 });
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React70.forwardRef(({ className, ...props }, ref) => {
+var SelectSeparator = React71.forwardRef(({ className, ...props }, ref) => {
   const { separator } = selectVariants();
   return /* @__PURE__ */ jsx(
     SelectPrimitive.Separator,
@@ -5585,7 +5671,7 @@ var SelectWithOptions = (props) => {
     ...rest
   } = props;
   return /* @__PURE__ */ jsx(Select, { ...rest, children: /* @__PURE__ */ jsx(SelectGroup, { children: options.map((option, index) => {
-    return React70__default.cloneElement(optionRenderer(option, currentValue), {
+    return React71__default.cloneElement(optionRenderer(option, currentValue), {
       size: props.size,
       key: index,
       index
@@ -5748,7 +5834,7 @@ var tooltipVariants = tv({
     "data-[side=top]:oui-slide-in-from-bottom-2"
   ]
 });
-var TooltipContent = React70.forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
+var TooltipContent = React71.forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     TooltipPrimitive.Content,
     {
@@ -5779,7 +5865,7 @@ var TooltipArrow = (props) => {
     }
   );
 };
-var Tooltip = React70.forwardRef((originalProps, ref) => {
+var Tooltip = React71.forwardRef((originalProps, ref) => {
   const {
     children,
     content,
@@ -6011,7 +6097,7 @@ var inputHelpTextVariants = tv$1({
     }
   }
 });
-var InputHelpText = React70__default.forwardRef(
+var InputHelpText = React71__default.forwardRef(
   (props, ref) => {
     const { className, asChild, color, ...rest } = props;
     const Comp = asChild ? Slot : "div";
@@ -6049,7 +6135,7 @@ var textFieldVariants = tv({
     direction: "column"
   }
 });
-var TextField = React70__default.forwardRef((props, ref) => {
+var TextField = React71__default.forwardRef((props, ref) => {
   const { label, helpText, direction, className, ...inputProps } = props;
   const { root, label: labelClassName } = textFieldVariants({ direction });
   return /* @__PURE__ */ jsxs("div", { className: root({ className, direction }), children: [
@@ -6067,7 +6153,7 @@ var TextField = React70__default.forwardRef((props, ref) => {
   ] });
 });
 TextField.displayName = "TextField";
-var InputLabel = React70__default.forwardRef(
+var InputLabel = React71__default.forwardRef(
   (props, ref) => {
     const { asChild = false, className, ...rest } = props;
     const Comp = asChild ? Slot : "label";
@@ -6119,7 +6205,7 @@ var checkboxVariants = tv$1({
     // style: "checkBox",
   }
 });
-var Checkbox = React70.forwardRef(({ className, color = "white", variant = "checkBox", ...props }, ref) => {
+var Checkbox = React71.forwardRef(({ className, color = "white", variant = "checkBox", ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     CheckboxPrimitive.Root,
     {
@@ -6249,7 +6335,7 @@ var switchVariants = tv$1({
     color: "primary"
   }
 });
-var Switch = React70__default.forwardRef(({ className, color, ...props }, ref) => {
+var Switch = React71__default.forwardRef(({ className, color, ...props }, ref) => {
   const { root, thumb } = switchVariants({
     className,
     color
@@ -6370,7 +6456,7 @@ function Badge({ className, variant, color, size, ...props }) {
     }
   );
 }
-var Logo = React70__default.forwardRef(({ src, alt, href }, ref) => {
+var Logo = React71__default.forwardRef(({ src, alt, href }, ref) => {
   return /* @__PURE__ */ jsx("div", { className: "logo oui-px-3", ref, children: /* @__PURE__ */ jsx("a", { href: href ?? "/", children: /* @__PURE__ */ jsx(
     "img",
     {
@@ -7141,7 +7227,7 @@ var Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx(
   }
 );
 Pagination.displayName = "Pagination";
-var PaginationContent = React70__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var PaginationContent = React71__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "ul",
   {
     ref,
@@ -7153,7 +7239,7 @@ var PaginationContent = React70__default.forwardRef(({ className, ...props }, re
   }
 ));
 PaginationContent.displayName = "PaginationContent";
-var PaginationItem = React70__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cnBase("oui-leading-[0px]", className), ...props }));
+var PaginationItem = React71__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cnBase("oui-leading-[0px]", className), ...props }));
 PaginationItem.displayName = "PaginationItem";
 var PaginationLink = ({
   className,
@@ -8163,7 +8249,7 @@ var Sheet = DialogPrimitive.Root;
 var SheetTrigger = DialogPrimitive.Trigger;
 var SheetClose = DialogPrimitive.Close;
 var SheetPortal = DialogPrimitive.Portal;
-var SheetOverlay = React70.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SheetOverlay = React71.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
     className: cnBase(
@@ -8189,7 +8275,7 @@ var sheetVariants = tv$1({
     side: "bottom"
   }
 });
-var SheetContent = React70.forwardRef(
+var SheetContent = React71.forwardRef(
   ({
     side = "bottom",
     closeable = true,
@@ -8285,7 +8371,7 @@ var SheetFooter = ({
   }
 );
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React70.forwardRef(({ className, leading, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SheetTitle = React71.forwardRef(({ className, leading, ...props }, ref) => /* @__PURE__ */ jsxs(
   "div",
   {
     className: "oui-sheet-header oui-grid oui-grid-cols-[40px_1fr_40px] oui-items-center",
@@ -8306,7 +8392,7 @@ var SheetTitle = React70.forwardRef(({ className, leading, ...props }, ref) => /
   }
 ));
 SheetTitle.displayName = DialogPrimitive.Title.displayName;
-var SheetDescription = React70.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SheetDescription = React71.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Description,
   {
     ref,
@@ -8696,7 +8782,7 @@ var dividerVariants = tv({
     intensity: 4
   }
 });
-var Divider = React70__default.forwardRef((props, ref) => {
+var Divider = React71__default.forwardRef((props, ref) => {
   const { className, intensity, direction, lineStyle, mx, my, ...rest } = props;
   return /* @__PURE__ */ jsx(
     "div",
@@ -8904,7 +8990,7 @@ var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DialogClose = DialogPrimitive.Close;
-var DialogOverlay = React70.forwardRef(({ className, ...props }, ref) => {
+var DialogOverlay = React71.forwardRef(({ className, ...props }, ref) => {
   const { overlay } = dialogVariants();
   return /* @__PURE__ */ jsx(
     DialogPrimitive.Overlay,
@@ -8916,7 +9002,7 @@ var DialogOverlay = React70.forwardRef(({ className, ...props }, ref) => {
   );
 });
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React70.forwardRef(
+var DialogContent = React71.forwardRef(
   ({
     overlyClassName,
     className,
@@ -8978,7 +9064,7 @@ var DialogFooter = ({
   return /* @__PURE__ */ jsx("div", { className: footer({ className }), ...props });
 };
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React70.forwardRef(({ className, ...props }, ref) => {
+var DialogTitle = React71.forwardRef(({ className, ...props }, ref) => {
   const { title } = dialogVariants();
   return /* @__PURE__ */ jsx(
     DialogPrimitive.Title,
@@ -8990,7 +9076,7 @@ var DialogTitle = React70.forwardRef(({ className, ...props }, ref) => {
   );
 });
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React70.forwardRef(({ className, ...props }, ref) => {
+var DialogDescription = React71.forwardRef(({ className, ...props }, ref) => {
   const { desc } = dialogVariants();
   return /* @__PURE__ */ jsx(
     DialogPrimitive.Description,
@@ -9987,13 +10073,13 @@ var tabsVariants = tv({
   }
 });
 var TabsBase = TabsPrimitive.Root;
-var TabsList = React70.forwardRef((originProps, ref) => {
+var TabsList = React71.forwardRef((originProps, ref) => {
   const { className, size, variant, ...props } = originProps;
   const { list } = tabsVariants({ size, variant });
   return /* @__PURE__ */ jsx(TabsPrimitive.List, { ref, className: list({ className }), ...props });
 });
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React70.forwardRef((originProps, ref) => {
+var TabsTrigger = React71.forwardRef((originProps, ref) => {
   const { className, size, children, icon, variant, ...props } = originProps;
   const { trigger, icon: iconClassName } = tabsVariants({ size, variant });
   return /* @__PURE__ */ jsxs(
@@ -10003,14 +10089,14 @@ var TabsTrigger = React70.forwardRef((originProps, ref) => {
       className: trigger({ className }),
       ...props,
       children: [
-        typeof icon !== "undefined" ? React70.cloneElement(icon, { className: iconClassName(), opacity: 1 }) : null,
+        typeof icon !== "undefined" ? React71.cloneElement(icon, { className: iconClassName(), opacity: 1 }) : null,
         /* @__PURE__ */ jsx("span", { children })
       ]
     }
   );
 });
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React70.forwardRef((oriProps, ref) => {
+var TabsContent = React71.forwardRef((oriProps, ref) => {
   const { className, size, children, ...props } = oriProps;
   const { content } = tabsVariants({ size });
   return /* @__PURE__ */ jsx(
@@ -10342,7 +10428,7 @@ var cardVariants = tv({
     intensity: 900
   }
 });
-var CardBase = React70__default.forwardRef(
+var CardBase = React71__default.forwardRef(
   ({ className, intensity, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -10356,7 +10442,7 @@ var CardBase = React70__default.forwardRef(
   }
 );
 CardBase.displayName = "CardBase";
-var CardHeader = React70__default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardHeader = React71__default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -10369,7 +10455,7 @@ var CardHeader = React70__default.forwardRef(({ className, children, ...props },
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React70__default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React71__default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
@@ -10382,7 +10468,7 @@ var CardTitle = React70__default.forwardRef(({ className, children, ...props },
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React70__default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardDescription = React71__default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   "p",
   {
     ref,
@@ -10391,7 +10477,7 @@ var CardDescription = React70__default.forwardRef(({ className, children, ...pro
     children
   }
 ));
-var CardContent = React70__default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardContent = React71__default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -10401,7 +10487,7 @@ var CardContent = React70__default.forwardRef(({ className, children, ...props }
   }
 ));
 CardContent.displayName = "CardContent";
-var CardFooter = React70__default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className, ...props, children }));
+var CardFooter = React71__default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className, ...props, children }));
 CardFooter.displayName = "CardFooter";
 var Card = forwardRef(
   (props, ref) => {
@@ -10416,7 +10502,7 @@ var Card = forwardRef(
 Card.displayName = "Card";
 var HoverCardRoot = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
-var HoverCardContent = React70.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+var HoverCardContent = React71.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
   HoverCardPrimitive.Content,
   {
     ref,
@@ -10570,7 +10656,7 @@ var sliderVariants = tv({
     }
   }
 });
-var BaseSlider = React70.forwardRef((oriProps, ref) => {
+var BaseSlider = React71.forwardRef((oriProps, ref) => {
   const {
     className,
     color,
@@ -10586,8 +10672,8 @@ var BaseSlider = React70.forwardRef((oriProps, ref) => {
   const { track, range, thumb, root, trackInner, mark, tips } = sliderVariants({
     color
   });
-  const [innerValue, setInvalue] = React70.useState(__propsValue);
-  React70.useEffect(() => {
+  const [innerValue, setInvalue] = React71.useState(__propsValue);
+  React71.useEffect(() => {
     setInvalue((prev) => {
       if (!prev) {
         return __propsValue;
@@ -10765,7 +10851,7 @@ var SliderTip = (props) => {
   const percent = convertValueToPercentage(value, min, max);
   return /* @__PURE__ */ jsx("span", { className, style: { lineHeight: "19px" }, children: props.tipFormatter?.(value, min, max, percent) ?? `${percent.toFixed()}%` });
 };
-var SingleSlider = React70.forwardRef((props, ref) => {
+var SingleSlider = React71.forwardRef((props, ref) => {
   const _value = useMemo(() => [props.value], [props.value]);
   return /* @__PURE__ */ jsx(
     BaseSlider,
@@ -10785,7 +10871,7 @@ var SingleSlider = React70.forwardRef((props, ref) => {
 SingleSlider.displayName = "SingleSlider";
 var Slider = BaseSlider;
 Slider.single = SingleSlider;
-var ToastErrorIcon = React70__default.forwardRef(
+var ToastErrorIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 1, viewBox = "0 0 20 20", className, ...rest } = props;
     return /* @__PURE__ */ jsx(
@@ -10807,7 +10893,7 @@ var ToastErrorIcon = React70__default.forwardRef(
     );
   }
 );
-var ToastSuccessIcon = React70__default.forwardRef(
+var ToastSuccessIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 1, viewBox = "0 0 20 20", className, ...rest } = props;
     return /* @__PURE__ */ jsx(
@@ -10830,7 +10916,7 @@ var ToastSuccessIcon = React70__default.forwardRef(
     );
   }
 );
-var ToastLoadingIcon = React70__default.forwardRef(
+var ToastLoadingIcon = React71__default.forwardRef(
   (props, ref) => {
     const { opacity = 1, viewBox = "0 0 20 20", className, ...rest } = props;
     return /* @__PURE__ */ jsx(
@@ -11044,7 +11130,7 @@ var ListViewInner = (props, ref) => {
         }
       );
     }
-    return props.dataSource.map((item, index) => /* @__PURE__ */ jsx(React70__default.Fragment, { children: props.renderItem(item, index, props.extraData) }, index));
+    return props.dataSource.map((item, index) => /* @__PURE__ */ jsx(React71__default.Fragment, { children: props.renderItem(item, index, props.extraData) }, index));
   }, [emptyDataSouce, props.dataSource, props.extraData, props.emptyView]);
   const loadingViewElement = useMemo(() => {
     if ((props.dataSource?.length || 0) === 0) return null;
@@ -11081,7 +11167,7 @@ var ListViewInner = (props, ref) => {
           {
             className: cn(
               "oui-space-y-3 oui-h-full oui-w-full",
-              emptyDataSouce && "oui-absolute oui-left-0 oui-right-0 oui-top-0 oui-bottom-0",
+              emptyDataSouce && "oui-absolute oui-bottom-0 oui-left-0 oui-right-0 oui-top-0",
               props.contentClassName
             )({ twMerge: true }),
             children: listViewElement
@@ -11217,7 +11303,7 @@ var Marquee = (props) => {
   const [emblaRef, emblaApi] = useEmblaCarousel__default(emblaOptions, [
     AutoScroll__default(autoScrollPluginOptions)
   ]);
-  React70__default.useEffect(() => {
+  React71__default.useEffect(() => {
     if (emblaApi && setApi) {
       setApi(emblaApi);
     }
@@ -11371,7 +11457,7 @@ var dropdownMenuVariants = tv$1({
     size: "lg"
   }
 });
-var DropdownMenuContent = React70.forwardRef(({ className, sideOffset = 4, size, ...props }, ref) => {
+var DropdownMenuContent = React71.forwardRef(({ className, sideOffset = 4, size, ...props }, ref) => {
   const { content } = dropdownMenuVariants({ size });
   return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Content,
@@ -11384,7 +11470,7 @@ var DropdownMenuContent = React70.forwardRef(({ className, sideOffset = 4, size,
   ) });
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React70.forwardRef(({ className, inset, size, ...props }, ref) => {
+var DropdownMenuItem = React71.forwardRef(({ className, inset, size, ...props }, ref) => {
   const { item } = dropdownMenuVariants({ size });
   return /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Item,
@@ -11396,7 +11482,7 @@ var DropdownMenuItem = React70.forwardRef(({ className, inset, size, ...props },
   );
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuLabel = React70.forwardRef(({ className, inset, ...props }, ref) => {
+var DropdownMenuLabel = React71.forwardRef(({ className, inset, ...props }, ref) => {
   const { label } = dropdownMenuVariants({
     inset
   });
@@ -11410,7 +11496,7 @@ var DropdownMenuLabel = React70.forwardRef(({ className, inset, ...props }, ref)
   );
 });
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React70.forwardRef(({ className, ...props }, ref) => {
+var DropdownMenuSeparator = React71.forwardRef(({ className, ...props }, ref) => {
   const { separator } = dropdownMenuVariants();
   return /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Separator,
@@ -11840,6 +11926,6 @@ var LIGHT_THEME_CSS_VARS = {
   "--oui-spacing-xl": "33.75rem"
 };
 
-export { ActionSheet, AddCircleIcon, AffiliateIcon, AlertDialog, ArrowDownShortIcon, ArrowDownSquareFillIcon, ArrowDownUpIcon, ArrowLeftRightIcon, ArrowLeftRightSquareFill, ArrowLeftShortIcon, ArrowRightShortIcon, ArrowRightUpSquareFillIcon, ArrowUpShortIcon, ArrowUpSquareFillIcon, AssetIcon, Avatar, Badge, BarChartIcon, BattleActiveIcon, BattleIcon, BattleInactiveIcon, BattleSolidActiveIcon, BattleSolidInactiveIcon, BellIcon, Box, Button, Calendar, CalendarIcon, CalendarMinusIcon, Card, CardBase, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CaretDownIcon, CaretLeftIcon, CaretRightIcon, CaretUpIcon, ChainIcon, CheckIcon, CheckSquareEmptyIcon, Checkbox, CheckedCircleFillIcon, CheckedSquareFillIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleOutlinedIcon, CloseCircleFillIcon, CloseIcon, CloseRoundFillIcon, CloseSquareFillIcon, collapse_default as Collapse, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ConfirmDialog, CopyIcon, DARK_THEME_CSS_VARS, DataFilter, DataTable, DatePicker2 as DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DotStatus, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuTrigger, EVMAvatar, EarnActiveIcon, EarnIcon, EarnInactiveIcon, EditIcon, Either, EmptyDataState, EmptyStateIcon, EsOrderlyIcon, ExclamationFillIcon, ExtensionPositionEnum, ExtensionSlot, EyeCloseIcon, EyeIcon, FeeTierIcon, Flex, GradientText, Grid2 as Grid, HoverCard, HoverCardContent, HoverCardRoot, HoverCardTrigger, Icon, InfoCircleIcon, Input2 as Input, InputAdditional, LIGHT_THEME_CSS_VARS, LeaderboardActiveIcon, LeaderboardInactiveIcon, LeftNavVaultsIcon, ListView, LocaleContext, LocaleProvider, Logo, MarketsActiveIcon, MarketsInactiveIcon, Marquee, ModalContext, ModalIdContext, ModalProvider, MultiSortHeader, NewsFillIcon, tailwind_exports as OUITailwind, OrderlyIcon, OrderlyThemeProvider, PaginationItems, PeopleIcon, PerpsIcon, PersonIcon, Picker, PlusIcon, Popover, PopoverAnchor, PopoverContent, PopoverRoot, PopoverTrigger, PopupUnionIcon, PortfolioActiveIcon, PortfolioInactiveIcon, QuestionFillIcon, ReduceIcon, ReferralSolidIcon, RefreshIcon, RwaIcon, ScrollArea, ScrollBar, ScrollIndicator, Select2 as Select, SelectItem, SelectedChoicesFillIcon, ServerFillIcon, SettingFillIcon, SettingIcon, ShareIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SimpleDialog, SimpleDialogFooter, SimpleDropdownMenu, SimpleSheet, Slider, SortingAscIcon, SortingDescIcon, SortingIcon, Spinner, SpotIcon, SquareOutlinedIcon, StarChildChatActiveIcon, StarChildChatInactiveIcon, Statistic, StatisticLabel, SwapHorizIcon, Switch, TabPanel, features_exports as TableFeatures, Tabs, TabsBase, TabsContent, TabsList, TabsTrigger, Text2 as Text, TextField, ThrottledButton, Tips, ToastTile, Toaster, TokenIcon, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, TraderMobileIcon, TradingActiveIcon, TradingIcon, TradingInactiveIcon, TradingLeftNavIcon, TradingRewardsIcon, TriggerDialog, VaultsIcon, VectorIcon, WalletIcon, WarningIcon, WoofiStakeIcon, boxVariants, buttonVariants, capitalizeFirstLetter, convertValueToPercentage, dotStatusVariants, formatAddress, gradientTextVariants, formatter_exports as inputFormatter, installExtension, modal, parseNumber, registerSimpleDialog, registerSimpleSheet, scrollAreaVariants, setExtensionBuilder, startViewTransition, statisticVariants, textVariants, tv, useLocale, useLongPress, useMediaQuery, useModal, useMultiSort, useObserverElement, useOrderlyTheme, usePagination, useScreen, useThemeAttribute };
+export { ActionSheet, AddCircleIcon, AffiliateIcon, AlertDialog, ArrowDownShortIcon, ArrowDownSquareFillIcon, ArrowDownUpIcon, ArrowLeftRightIcon, ArrowLeftRightSquareFill, ArrowLeftShortIcon, ArrowRightShortIcon, ArrowRightUpSquareFillIcon, ArrowUpShortIcon, ArrowUpSquareFillIcon, AssetIcon, Avatar, Badge, BarChartIcon, BattleActiveIcon, BattleIcon, BattleInactiveIcon, BattleSolidActiveIcon, BattleSolidInactiveIcon, BellIcon, Box, Button, Calendar, CalendarIcon, CalendarMinusIcon, Card, CardBase, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CaretDownIcon, CaretLeftIcon, CaretRightIcon, CaretUpIcon, ChainIcon, CheckIcon, CheckSquareEmptyIcon, Checkbox, CheckedCircleFillIcon, CheckedSquareFillIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleOutlinedIcon, CloseCircleFillIcon, CloseIcon, CloseRoundFillIcon, CloseSquareFillIcon, collapse_default as Collapse, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ConfirmDialog, CopyIcon, DARK_THEME_CSS_VARS, DataFilter, DataTable, DatePicker2 as DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DotStatus, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuTrigger, EVMAvatar, EarnActiveIcon, EarnIcon, EarnInactiveIcon, EditIcon, Either, EmptyDataState, EmptyStateIcon, EsOrderlyIcon, ExclamationFillIcon, ExtensionPositionEnum, ExtensionSlot, EyeCloseIcon, EyeIcon, FeeTierIcon, Flex, GradientText, Grid2 as Grid, HoverCard, HoverCardContent, HoverCardRoot, HoverCardTrigger, Icon, IconButton, InfoCircleIcon, Input2 as Input, InputAdditional, LIGHT_THEME_CSS_VARS, LeaderboardActiveIcon, LeaderboardInactiveIcon, LeftNavVaultsIcon, ListView, LocaleContext, LocaleProvider, Logo, MarketsActiveIcon, MarketsInactiveIcon, Marquee, ModalContext, ModalIdContext, ModalProvider, MultiSortHeader, NewsFillIcon, tailwind_exports as OUITailwind, OrderlyIcon, OrderlyThemeProvider, PaginationItems, PeopleIcon, PerpsIcon, PersonIcon, Picker, PlusIcon, Popover, PopoverAnchor, PopoverContent, PopoverRoot, PopoverTrigger, PopupUnionIcon, PortfolioActiveIcon, PortfolioInactiveIcon, QuestionFillIcon, ReduceIcon, ReferralSolidIcon, RefreshIcon, RwaIcon, ScrollArea, ScrollBar, ScrollIndicator, Select2 as Select, SelectItem, SelectedChoicesFillIcon, ServerFillIcon, SettingFillIcon, SettingIcon, ShareIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SimpleDialog, SimpleDialogFooter, SimpleDropdownMenu, SimpleSheet, Slider, SortingAscIcon, SortingDescIcon, SortingIcon, Spinner, SpotIcon, SquareOutlinedIcon, StarChildChatActiveIcon, StarChildChatInactiveIcon, Statistic, StatisticLabel, SwapHorizIcon, Switch, TabPanel, features_exports as TableFeatures, Tabs, TabsBase, TabsContent, TabsList, TabsTrigger, Text2 as Text, TextField, ThrottledButton, Tips, ToastTile, Toaster, TokenIcon, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, TraderMobileIcon, TradingActiveIcon, TradingIcon, TradingInactiveIcon, TradingLeftNavIcon, TradingRewardsIcon, TriggerDialog, VaultsIcon, VectorIcon, WalletIcon, WarningIcon, WoofiStakeIcon, boxVariants, buttonVariants, capitalizeFirstLetter, convertValueToPercentage, dotStatusVariants, formatAddress, gradientTextVariants, iconButtonVariants, formatter_exports as inputFormatter, installExtension, modal, parseNumber, registerSimpleDialog, registerSimpleSheet, scrollAreaVariants, setExtensionBuilder, startViewTransition, statisticVariants, textVariants, tv, useLocale, useLongPress, useMediaQuery, useModal, useMultiSort, useObserverElement, useOrderlyTheme, usePagination, useScreen, useThemeAttribute };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map