@orderly.network/ui 2.8.14 → 2.9.0-alpha.1

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React69 = require('react');
+var React70 = require('react');
 var tailwindVariants = require('tailwind-variants');
 var reactSlot = require('@radix-ui/react-slot');
 var jsxRuntime = require('react/jsx-runtime');
@@ -49,7 +49,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React69__namespace = /*#__PURE__*/_interopNamespace(React69);
+var React70__namespace = /*#__PURE__*/_interopNamespace(React70);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 var makeBlockie__default = /*#__PURE__*/_interopDefault(makeBlockie);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
@@ -468,7 +468,7 @@ var boxVariants = tv({
     __size: false
   }
 });
-var Box = React69__namespace.default.forwardRef((props, forwardedRef) => {
+var Box = React70__namespace.default.forwardRef((props, forwardedRef) => {
   const {
     asChild = false,
     as: TAG = "div",
@@ -603,7 +603,7 @@ var flexVariant = tv(
     responsiveVariants: true
   }
 );
-var Flex = React69.forwardRef((props, ref) => {
+var Flex = React70.forwardRef((props, ref) => {
   const {
     className,
     display,
@@ -702,7 +702,7 @@ var Spinner = (props) => {
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-sr-only", children: "Loading..." })
   ] });
 };
-var BaseButton = React69__namespace.default.forwardRef(
+var BaseButton = React70__namespace.default.forwardRef(
   (props, forwardedRef) => {
     const {
       asChild = false,
@@ -717,14 +717,14 @@ var BaseButton = React69__namespace.default.forwardRef(
     } = props;
     const Comp = asChild ? reactSlot.Slot : "button";
     const isDisabled = typeof disabled !== "undefined" ? disabled : loading;
-    const iconElement = React69.useMemo(() => {
-      return icon ? React69__namespace.default.cloneElement(icon, {
+    const iconElement = React70.useMemo(() => {
+      return icon ? React70__namespace.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
       }) : null;
     }, [size, icon]);
-    const content = React69.useMemo(() => {
+    const content = React70.useMemo(() => {
       if (!leading && !trailing && !iconElement) return children;
       return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", itemAlign: "center", className: "oui-space-x-1", children: [
         leading,
@@ -733,7 +733,7 @@ var BaseButton = React69__namespace.default.forwardRef(
         trailing
       ] });
     }, [children, leading, trailing, iconElement]);
-    const spinnerSize = React69.useMemo(() => {
+    const spinnerSize = React70.useMemo(() => {
       switch (size) {
         case "xl":
           return "md";
@@ -968,7 +968,7 @@ var buttonVariants = tailwindVariants.tv(
     responsiveVariants: ["md", "lg"]
   }
 );
-var Button = React69__namespace.default.forwardRef(
+var Button = React70__namespace.default.forwardRef(
   ({
     className,
     variant,
@@ -1001,9 +1001,9 @@ var Button = React69__namespace.default.forwardRef(
   }
 );
 Button.displayName = "Button";
-var ThrottledButton = React69__namespace.default.forwardRef(({ onClick, throttleDuration = 700, ...props }, ref) => {
-  const lastCall = React69.useRef(0);
-  const throttle = React69.useCallback(
+var ThrottledButton = React70__namespace.default.forwardRef(({ onClick, throttleDuration = 700, ...props }, ref) => {
+  const lastCall = React70.useRef(0);
+  const throttle = React70.useCallback(
     (delay, fn) => {
       return function(...args) {
         const now = Date.now();
@@ -1088,7 +1088,7 @@ var gridVariants = tv({
     // autoFlow: "row",
   }
 });
-var Grid = React69__namespace.default.forwardRef((props, ref) => {
+var Grid = React70__namespace.default.forwardRef((props, ref) => {
   const { className, cols, rows, gap, gapX, gapY, autoFlow, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Box,
@@ -1138,8 +1138,8 @@ var gridSpanVariants = tv({
 });
 var Span = (props) => {
   const { colSpan, rowSpan, className, ...rest } = props;
-  const ref = React69.useRef(null);
-  React69.useEffect(() => {
+  const ref = React70.useRef(null);
+  React70.useEffect(() => {
     if (ref.current) {
       const parent = ref.current.parentElement;
       if (!parent || !parent.classList.contains("oui-grid")) ;
@@ -1182,7 +1182,7 @@ var iconVariants = tailwindVariants.tv({
     color: "black"
   }
 });
-var BaseIcon = React69__namespace.default.forwardRef(
+var BaseIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const {
       size = 24,
@@ -1244,7 +1244,7 @@ var avatarVariants = tv({
     size: "sm"
   }
 });
-var AvatarBase = React69__namespace.forwardRef(({ className, size, ...props }, ref) => {
+var AvatarBase = React70__namespace.forwardRef(({ className, size, ...props }, ref) => {
   const { root } = avatarVariants({ size });
   return /* @__PURE__ */ jsxRuntime.jsx(
     AvatarPrimitive__namespace.Root,
@@ -1256,7 +1256,7 @@ var AvatarBase = React69__namespace.forwardRef(({ className, size, ...props }, r
   );
 });
 AvatarBase.displayName = AvatarPrimitive__namespace.Root.displayName;
-var AvatarImage = React69__namespace.forwardRef(({ className, ...props }, ref) => {
+var AvatarImage = React70__namespace.forwardRef(({ className, ...props }, ref) => {
   const { image } = avatarVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     AvatarPrimitive__namespace.Image,
@@ -1268,12 +1268,12 @@ var AvatarImage = React69__namespace.forwardRef(({ className, ...props }, ref) =
   );
 });
 AvatarImage.displayName = AvatarPrimitive__namespace.Image.displayName;
-var AvatarFallback = React69__namespace.forwardRef(({ className, ...props }, ref) => {
+var AvatarFallback = React70__namespace.forwardRef(({ className, ...props }, ref) => {
   const { fallback } = avatarVariants({ className });
   return /* @__PURE__ */ jsxRuntime.jsx(AvatarPrimitive__namespace.Fallback, { ref, className: fallback(), ...props });
 });
 AvatarFallback.displayName = AvatarPrimitive__namespace.Fallback.displayName;
-var Avatar = React69__namespace.forwardRef((props, ref) => {
+var Avatar = React70__namespace.forwardRef((props, ref) => {
   const { size, src, fallback, delayMs, alt, onLoadingStatusChange, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsxs(AvatarBase, { ...rest, ref, size, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -1287,13 +1287,13 @@ var Avatar = React69__namespace.forwardRef((props, ref) => {
     typeof fallback !== "undefined" && /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { delayMs, children: fallback })
   ] });
 });
-var EVMAvatar = React69__namespace.forwardRef((props, ref) => {
+var EVMAvatar = React70__namespace.forwardRef((props, ref) => {
   const { address, ...rest } = props;
-  const src = React69.useMemo(() => makeBlockie__default.default(address), [props.address]);
+  const src = React70.useMemo(() => makeBlockie__default.default(address), [props.address]);
   return /* @__PURE__ */ jsxRuntime.jsx(Avatar, { ...rest, src });
 });
 var ChainIcon = (props) => {
-  const url = React69.useMemo(() => {
+  const url = React70.useMemo(() => {
     return `https://oss.orderly.network/static/network_logo/${props.chainId}.png`;
   }, [props.chainId]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1307,7 +1307,7 @@ var ChainIcon = (props) => {
   );
 };
 var TokenIcon = (props) => {
-  const url = React69.useMemo(() => {
+  const url = React70.useMemo(() => {
     let name = props.name;
     if (typeof props.symbol === "string") {
       const arr = props.symbol?.split("_");
@@ -1327,7 +1327,7 @@ var TokenIcon = (props) => {
 };
 var CombineIcon = (props) => {
   const { secondary } = props;
-  const subElement = React69.useMemo(() => {
+  const subElement = React70.useMemo(() => {
     const className = "oui-bg-base-6 oui-absolute oui-bottom-0 oui-right-0 oui-outline oui-outline-2 oui-outline-base-1 oui-z-10";
     if (secondary.component) {
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindVariants.cnBase(className, secondary?.className), children: secondary.component });
@@ -1354,7 +1354,7 @@ var CombineIcon = (props) => {
     subElement
   ] });
 };
-var CloseIcon = React69__namespace.default.forwardRef(
+var CloseIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1368,7 +1368,7 @@ var CloseIcon = React69__namespace.default.forwardRef(
   }
 );
 CloseIcon.displayName = "CloseIcon";
-var BaseIconWithPath = React69__namespace.default.forwardRef((props, ref) => {
+var BaseIconWithPath = React70__namespace.default.forwardRef((props, ref) => {
   const { opacity = 0.54, d, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -1381,7 +1381,7 @@ var BaseIconWithPath = React69__namespace.default.forwardRef((props, ref) => {
     }
   ) });
 });
-var CheckIcon = React69__namespace.default.forwardRef(
+var CheckIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1395,7 +1395,7 @@ var CheckIcon = React69__namespace.default.forwardRef(
   }
 );
 CheckIcon.displayName = "CheckIcon";
-var ChevronDownIcon = React69__namespace.default.forwardRef(
+var ChevronDownIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1409,7 +1409,7 @@ var ChevronDownIcon = React69__namespace.default.forwardRef(
   }
 );
 ChevronDownIcon.displayName = "ChevronDownIcon";
-var ChevronUpIcon = React69__namespace.default.forwardRef(
+var ChevronUpIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1423,7 +1423,7 @@ var ChevronUpIcon = React69__namespace.default.forwardRef(
   }
 );
 ChevronUpIcon.displayName = "ChevronUpIcon";
-var CaretUpIcon = React69__namespace.default.forwardRef(
+var CaretUpIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1437,7 +1437,7 @@ var CaretUpIcon = React69__namespace.default.forwardRef(
   }
 );
 CaretUpIcon.displayName = "CaretUpIcon";
-var CaretDownIcon = React69__namespace.default.forwardRef(
+var CaretDownIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -1450,7 +1450,7 @@ var CaretDownIcon = React69__namespace.default.forwardRef(
   }
 );
 CaretDownIcon.displayName = "CaretDownIcon";
-var CaretLeftIcon = React69__namespace.default.forwardRef(
+var CaretLeftIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1464,7 +1464,7 @@ var CaretLeftIcon = React69__namespace.default.forwardRef(
   }
 );
 CaretLeftIcon.displayName = "CaretLeftIcon";
-var CaretRightIcon = React69__namespace.default.forwardRef(
+var CaretRightIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1478,7 +1478,7 @@ var CaretRightIcon = React69__namespace.default.forwardRef(
   }
 );
 CaretRightIcon.displayName = "CaretRightIcon";
-var ChevronLeftIcon = React69__namespace.default.forwardRef(
+var ChevronLeftIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -1491,7 +1491,7 @@ var ChevronLeftIcon = React69__namespace.default.forwardRef(
   }
 );
 ChevronLeftIcon.displayName = "ChevronLeftIcon";
-var ChevronRightIcon = React69__namespace.default.forwardRef(
+var ChevronRightIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1505,7 +1505,7 @@ var ChevronRightIcon = React69__namespace.default.forwardRef(
   }
 );
 ChevronRightIcon.displayName = "ChevronRightIcon";
-var CalendarMinusIcon = React69__namespace.default.forwardRef(
+var CalendarMinusIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -1518,7 +1518,7 @@ var CalendarMinusIcon = React69__namespace.default.forwardRef(
   }
 );
 CalendarMinusIcon.displayName = "CalendarMinusIcon";
-var SettingIcon = React69__namespace.default.forwardRef(
+var SettingIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1532,7 +1532,7 @@ var SettingIcon = React69__namespace.default.forwardRef(
   }
 );
 SettingIcon.displayName = "SettingIcon";
-var CloseSquareFillIcon = React69__namespace.default.forwardRef((props, ref) => {
+var CloseSquareFillIcon = React70__namespace.default.forwardRef((props, ref) => {
   const { opacity = 0.54, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -1544,7 +1544,7 @@ var CloseSquareFillIcon = React69__namespace.default.forwardRef((props, ref) =>
   ) });
 });
 CloseSquareFillIcon.displayName = "CloseSquareFillIcon";
-var CloseCircleFillIcon = React69__namespace.default.forwardRef((props, ref) => {
+var CloseCircleFillIcon = React70__namespace.default.forwardRef((props, ref) => {
   const { opacity = 0.54, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -1556,7 +1556,7 @@ var CloseCircleFillIcon = React69__namespace.default.forwardRef((props, ref) =>
   ) });
 });
 CloseCircleFillIcon.displayName = "CloseCircleFillIcon";
-var CheckedCircleFillIcon = React69__namespace.default.forwardRef((props, ref) => {
+var CheckedCircleFillIcon = React70__namespace.default.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseIconWithPath,
     {
@@ -1567,7 +1567,7 @@ var CheckedCircleFillIcon = React69__namespace.default.forwardRef((props, ref) =
   );
 });
 CheckedCircleFillIcon.displayName = "CheckedCircleFillIcon";
-var CheckedSquareFillIcon = React69__namespace.default.forwardRef((props, ref) => {
+var CheckedSquareFillIcon = React70__namespace.default.forwardRef((props, ref) => {
   const { opacity = 0.54, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -1581,7 +1581,7 @@ var CheckedSquareFillIcon = React69__namespace.default.forwardRef((props, ref) =
   ) });
 });
 CheckedSquareFillIcon.displayName = "CheckSquareFillIcon";
-var CheckSquareEmptyIcon = React69__namespace.default.forwardRef(
+var CheckSquareEmptyIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1597,7 +1597,7 @@ var CheckSquareEmptyIcon = React69__namespace.default.forwardRef(
   }
 );
 CheckSquareEmptyIcon.displayName = "CheckSquareEmptyIcon";
-var PlusIcon = React69__namespace.default.forwardRef(
+var PlusIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1611,7 +1611,7 @@ var PlusIcon = React69__namespace.default.forwardRef(
   }
 );
 PlusIcon.displayName = "PlusIcon";
-var ReduceIcon = React69__namespace.default.forwardRef(
+var ReduceIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1629,7 +1629,7 @@ var ReduceIcon = React69__namespace.default.forwardRef(
   }
 );
 ReduceIcon.displayName = "ReduceIcon";
-var CircleOutlinedIcon = React69__namespace.default.forwardRef((props, ref) => {
+var CircleOutlinedIcon = React70__namespace.default.forwardRef((props, ref) => {
   const { opacity = 0.54, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -1641,7 +1641,7 @@ var CircleOutlinedIcon = React69__namespace.default.forwardRef((props, ref) => {
   ) });
 });
 CircleOutlinedIcon.displayName = "CircleOutlinedIcon";
-var SquareOutlinedIcon = React69__namespace.default.forwardRef((props, ref) => {
+var SquareOutlinedIcon = React70__namespace.default.forwardRef((props, ref) => {
   const { opacity = 0.54, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -1653,7 +1653,7 @@ var SquareOutlinedIcon = React69__namespace.default.forwardRef((props, ref) => {
   ) });
 });
 SquareOutlinedIcon.displayName = "SquareOutlinedIcon";
-var ExclamationFillIcon = React69__namespace.default.forwardRef((props, ref) => {
+var ExclamationFillIcon = React70__namespace.default.forwardRef((props, ref) => {
   const { ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -1664,7 +1664,7 @@ var ExclamationFillIcon = React69__namespace.default.forwardRef((props, ref) =>
   ) });
 });
 ExclamationFillIcon.displayName = "ExclamationFillIcon";
-var QuestionFillIcon = React69__namespace.default.forwardRef(
+var QuestionFillIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1678,7 +1678,7 @@ var QuestionFillIcon = React69__namespace.default.forwardRef(
   }
 );
 QuestionFillIcon.displayName = "ExclamationFillIcon";
-var ArrowLeftRightIcon = React69__namespace.default.forwardRef((props, ref) => {
+var ArrowLeftRightIcon = React70__namespace.default.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseIconWithPath,
     {
@@ -1689,7 +1689,7 @@ var ArrowLeftRightIcon = React69__namespace.default.forwardRef((props, ref) => {
   );
 });
 ArrowLeftRightIcon.displayName = "ArrowLeftRightIcon";
-var ArrowDownUpIcon = React69__namespace.default.forwardRef(
+var ArrowDownUpIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -1702,7 +1702,7 @@ var ArrowDownUpIcon = React69__namespace.default.forwardRef(
   }
 );
 ArrowDownUpIcon.displayName = "ArrowDownUpIconIcon";
-var ArrowUpSquareFillIcon = React69__namespace.default.forwardRef((props, ref) => {
+var ArrowUpSquareFillIcon = React70__namespace.default.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseIconWithPath,
     {
@@ -1713,7 +1713,7 @@ var ArrowUpSquareFillIcon = React69__namespace.default.forwardRef((props, ref) =
   );
 });
 ArrowUpSquareFillIcon.displayName = "ArrowUpSquareFillIconIcon";
-var ArrowDownSquareFillIcon = React69__namespace.default.forwardRef((props, ref) => {
+var ArrowDownSquareFillIcon = React70__namespace.default.forwardRef((props, ref) => {
   const { opacity = 0.54, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -1725,7 +1725,7 @@ var ArrowDownSquareFillIcon = React69__namespace.default.forwardRef((props, ref)
   ) });
 });
 ArrowDownSquareFillIcon.displayName = "ArrowDownSquareFillIconIcon";
-var ArrowLeftRightSquareFill = React69__namespace.default.forwardRef((props, ref) => {
+var ArrowLeftRightSquareFill = React70__namespace.default.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
@@ -1751,7 +1751,7 @@ var ArrowLeftRightSquareFill = React69__namespace.default.forwardRef((props, ref
 if (process.env.NODE_ENV !== "production") {
   ArrowLeftRightSquareFill.displayName = "ArrowLeftRightSquareFill";
 }
-var ArrowRightUpSquareFillIcon = React69__namespace.default.forwardRef((props, ref) => {
+var ArrowRightUpSquareFillIcon = React70__namespace.default.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseIconWithPath,
     {
@@ -1927,7 +1927,7 @@ var BattleSolidInactiveIcon = (props) => {
     }
   ) });
 };
-var FeeTierIcon = React69__namespace.default.forwardRef(
+var FeeTierIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -1996,7 +1996,7 @@ var EarnInactiveIcon = (props) => {
     )
   ] }) });
 };
-var EditIcon = React69__namespace.default.forwardRef(
+var EditIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2010,7 +2010,7 @@ var EditIcon = React69__namespace.default.forwardRef(
   }
 );
 EditIcon.displayName = "EditIcon";
-var EyeIcon = React69__namespace.default.forwardRef(
+var EyeIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2024,7 +2024,7 @@ var EyeIcon = React69__namespace.default.forwardRef(
   }
 );
 EyeIcon.displayName = "EyeIcon";
-var ShareIcon = React69__namespace.default.forwardRef(
+var ShareIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2038,7 +2038,7 @@ var ShareIcon = React69__namespace.default.forwardRef(
   }
 );
 ShareIcon.displayName = "ShareIcon";
-var EyeCloseIcon = React69__namespace.default.forwardRef(
+var EyeCloseIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2052,7 +2052,7 @@ var EyeCloseIcon = React69__namespace.default.forwardRef(
   }
 );
 EyeCloseIcon.displayName = "EyeCloseIcon";
-var RefreshIcon = React69__namespace.default.forwardRef(
+var RefreshIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2210,7 +2210,7 @@ var EsOrderlyIcon = (props) => {
     }
   );
 };
-var InfoCircleIcon = React69__namespace.default.forwardRef(
+var InfoCircleIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { className, opacity = 0.36, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2237,14 +2237,14 @@ var InfoCircleIcon = React69__namespace.default.forwardRef(
   }
 );
 var WalletIcon = (props) => {
-  const url = React69.useMemo(() => {
+  const url = React70.useMemo(() => {
     const split = props.name?.split(" ");
     const formatWalletName = split?.[0]?.toLowerCase();
     return `https://oss.orderly.network/static/wallet_icon/${formatWalletName}.png`;
   }, [props.name]);
   return /* @__PURE__ */ jsxRuntime.jsx(Avatar, { size: props.size, src: url, alt: `${props.name}` });
 };
-var CalendarIcon = React69__namespace.default.forwardRef(
+var CalendarIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -2257,7 +2257,7 @@ var CalendarIcon = React69__namespace.default.forwardRef(
   }
 );
 CalendarIcon.displayName = "CaretLeftIcon";
-var CopyIcon = React69__namespace.default.forwardRef(
+var CopyIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -2270,7 +2270,7 @@ var CopyIcon = React69__namespace.default.forwardRef(
   }
 );
 CopyIcon.displayName = "CopyIcon";
-var ServerFillIcon = React69__namespace.default.forwardRef(
+var ServerFillIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -2283,7 +2283,7 @@ var ServerFillIcon = React69__namespace.default.forwardRef(
   }
 );
 ServerFillIcon.displayName = "ServerFillIcon";
-var SortingAscIcon = React69__namespace.default.forwardRef(
+var SortingAscIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(BaseIcon, { ref, ...rest, children: [
@@ -2307,7 +2307,7 @@ var SortingAscIcon = React69__namespace.default.forwardRef(
   }
 );
 SortingAscIcon.displayName = "SortingAscIcon";
-var SortingDescIcon = React69__namespace.default.forwardRef(
+var SortingDescIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(BaseIcon, { ref, ...rest, children: [
@@ -2331,7 +2331,7 @@ var SortingDescIcon = React69__namespace.default.forwardRef(
   }
 );
 SortingDescIcon.displayName = "SortingDescIcon";
-var ArrowUpShortIcon = React69__namespace.default.forwardRef(
+var ArrowUpShortIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -2343,7 +2343,7 @@ var ArrowUpShortIcon = React69__namespace.default.forwardRef(
     );
   }
 );
-var ArrowDownShortIcon = React69__namespace.default.forwardRef(
+var ArrowDownShortIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -2355,7 +2355,7 @@ var ArrowDownShortIcon = React69__namespace.default.forwardRef(
     );
   }
 );
-var ArrowLeftShortIcon = React69__namespace.default.forwardRef(
+var ArrowLeftShortIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -2367,7 +2367,7 @@ var ArrowLeftShortIcon = React69__namespace.default.forwardRef(
     );
   }
 );
-var ArrowRightShortIcon = React69__namespace.default.forwardRef(
+var ArrowRightShortIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -2383,7 +2383,7 @@ ArrowUpShortIcon.displayName = "ArrowUpShortIcon";
 ArrowDownShortIcon.displayName = "ArrowDownShortIcon";
 ArrowLeftShortIcon.displayName = "ArrowLeftShortIcon";
 ArrowRightShortIcon.displayName = "ArrowRightShortIcon";
-var SortingIcon = React69__namespace.default.forwardRef(
+var SortingIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3429,7 +3429,7 @@ var StarChildChatInactiveIcon = (props) => {
     )
   ] });
 };
-var CloseRoundFillIcon = React69__namespace.default.forwardRef((props, ref) => {
+var CloseRoundFillIcon = React70__namespace.default.forwardRef((props, ref) => {
   const { opacity = 0.54, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, viewBox: "0 0 28 28", children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -3629,7 +3629,7 @@ function EmptyStateIcon() {
   );
 }
 var emptyData_default = EmptyStateIcon;
-var VectorIcon = React69__namespace.default.forwardRef(
+var VectorIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
@@ -3727,7 +3727,7 @@ var PersonIcon = () => {
     }
   );
 };
-var SettingFillIcon = React69__namespace.default.forwardRef(
+var SettingFillIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3762,7 +3762,7 @@ var TradingLeftNavIcon = (props) => {
     }
   );
 };
-var VaultsIcon = React69__namespace.default.forwardRef(
+var VaultsIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "svg",
@@ -3787,7 +3787,7 @@ var VaultsIcon = React69__namespace.default.forwardRef(
 if (process.env.NODE_ENV !== "production") {
   VaultsIcon.displayName = "VaultsIcon";
 }
-var LeftNavVaultsIcon = React69.forwardRef(
+var LeftNavVaultsIcon = React70.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "svg",
@@ -3833,7 +3833,7 @@ var LeftNavVaultsIcon = React69.forwardRef(
 if (process.env.NODE_ENV !== "production") {
   LeftNavVaultsIcon.displayName = "LeftNavVaultsIcon";
 }
-var NewsFillIcon = React69__namespace.default.forwardRef(
+var NewsFillIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 1, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3847,7 +3847,7 @@ var NewsFillIcon = React69__namespace.default.forwardRef(
   }
 );
 NewsFillIcon.displayName = "NewsFillIcon";
-var BellIcon = React69__namespace.default.forwardRef(
+var BellIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -3928,7 +3928,7 @@ var ReferralSolidIcon = (props) => {
     }
   ) });
 };
-var AddCircleIcon = React69__namespace.default.forwardRef(
+var AddCircleIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { className, opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3964,7 +3964,24 @@ var AddCircleIcon = React69__namespace.default.forwardRef(
   }
 );
 AddCircleIcon.displayName = "AddCircleIcon";
-var RwaIcon = React69__namespace.default.forwardRef(
+var WarningIcon = React70__namespace.default.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        width: 20,
+        height: 20,
+        viewBox: "0 0 20 20",
+        fill: "currentColor",
+        xmlns: "http://www.w3.org/2000/svg",
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.012 1.666a8.333 8.333 0 1 0 0 16.667 8.333 8.333 0 1 0 0-16.667m0 4.167c.46 0 .833.373.833.833v4.167a.834.834 0 0 1-1.667 0V6.666c0-.46.374-.833.834-.833m0 6.666a.834.834 0 1 1 0 1.668.834.834 0 0 1 0-1.668" })
+      }
+    );
+  }
+);
+var RwaIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 1, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, viewBox: "0 0 12 12", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -4035,7 +4052,7 @@ var textVariants = tv({
     }
   }
 });
-var Text = React69__namespace.default.forwardRef((props, forwardedRef) => {
+var Text = React70__namespace.default.forwardRef((props, forwardedRef) => {
   const {
     children,
     className,
@@ -4124,7 +4141,7 @@ var isTextRule = (rule) => {
 };
 var DEFAULT_SYMBOL_FORMAT = "base-quote";
 var DEFAULT_DATE_FORMAT = "yyyy-MM-dd HH:mm:ss";
-var FormattedText = React69__namespace.default.forwardRef(
+var FormattedText = React70__namespace.default.forwardRef(
   (props, ref) => {
     const {
       rule,
@@ -4149,13 +4166,13 @@ var FormattedText = React69__namespace.default.forwardRef(
       isIcon,
       ...rest
     } = props;
-    const prefixElement = React69.useMemo(() => {
+    const prefixElement = React70.useMemo(() => {
       if (rule === "symbol" && showIcon) {
         return /* @__PURE__ */ jsxRuntime.jsx(TokenIcon, { symbol: children, size: iconSize });
       }
       return prefix;
     }, [prefix, showIcon, rule, iconSize, children]);
-    const suffix = React69.useMemo(() => {
+    const suffix = React70.useMemo(() => {
       if (typeof props.suffix !== "undefined") {
         return props.suffix;
       }
@@ -4174,7 +4191,7 @@ var FormattedText = React69__namespace.default.forwardRef(
         );
       }
     }, [props.suffix, copyable, children]);
-    const content = React69.useMemo(() => {
+    const content = React70.useMemo(() => {
       if (typeof children === "undefined") {
         return "--";
       }
@@ -4206,7 +4223,7 @@ var FormattedText = React69__namespace.default.forwardRef(
       }
       return children;
     }, [children, rule, formatString, range, symbolElement]);
-    const contentWithFix = React69.useMemo(() => {
+    const contentWithFix = React70.useMemo(() => {
       if (typeof suffix === "undefined" && typeof prefixElement === "undefined") {
         return content;
       }
@@ -4236,7 +4253,7 @@ var gradientTextVariants = tv({
     }
   }
 });
-var GradientText = React69__namespace.default.forwardRef((props, ref) => {
+var GradientText = React70__namespace.default.forwardRef((props, ref) => {
   const { color, className, angle, ...rest } = props;
   const style = parseAngleProps({ angle });
   return (
@@ -4279,7 +4296,7 @@ var Numeral = (props) => {
     ...rest
   } = props;
   const num = Number(props.children);
-  const child = React69.useMemo(() => {
+  const child = React70.useMemo(() => {
     if (props.children === "-") return props.children;
     if (isNaN(num)) return placeholder ?? "--";
     if (typeof visible !== "undefined" && !visible) return masking ?? "*****";
@@ -4299,7 +4316,7 @@ var Numeral = (props) => {
     });
   }, [num, visible, tick, dp]);
   const defaultColor = rest.color || "inherit";
-  const colorName = React69.useMemo(() => {
+  const colorName = React70.useMemo(() => {
     if (!coloring) return defaultColor;
     if (typeof visible !== "undefined" && !visible) return defaultColor;
     if (Number.isNaN(num)) {
@@ -4309,7 +4326,7 @@ var Numeral = (props) => {
     if (num < 0) return "lose";
     return "profit";
   }, [coloring, num, rest.color, props.visible]);
-  const identifier = React69.useMemo(() => {
+  const identifier = React70.useMemo(() => {
     if (!showIdentifier || Number.isNaN(num) || num === 0) return null;
     if (typeof visible !== "undefined" && !visible) return null;
     if (num < 0) {
@@ -4319,7 +4336,7 @@ var Numeral = (props) => {
     if (identifiers?.profit) return identifiers.profit;
     return /* @__PURE__ */ jsxRuntime.jsx("span", { children: "+" });
   }, [num, props.visible, showIdentifier]);
-  const childWithUnit = React69.useMemo(() => {
+  const childWithUnit = React70.useMemo(() => {
     if (typeof suffix === "undefined" && typeof prefix === "undefined" && typeof unit === "undefined" && typeof currency === "undefined" && !showIdentifier) {
       return child;
     }
@@ -4404,7 +4421,7 @@ var statisticVariants = tv({
     // color: "default",
   }
 });
-var StatisticLabel = React69__namespace.default.forwardRef(
+var StatisticLabel = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { label: labelClassName } = statisticVariants({});
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4420,10 +4437,10 @@ var StatisticLabel = React69__namespace.default.forwardRef(
   }
 );
 StatisticLabel.displayName = "StatisticLabel";
-var Statistic = React69__namespace.default.forwardRef((props, ref) => {
+var Statistic = React70__namespace.default.forwardRef((props, ref) => {
   const { label, valueProps, align, className, classNames, children, ...rest } = props;
   const { root, value: valueClassName } = statisticVariants({ align });
-  const value = React69.useMemo(() => {
+  const value = React70.useMemo(() => {
     if (typeof children === "string" || typeof children === "number") {
       const { className: valueClass, as, ...restValueProps } = valueProps ?? {};
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4467,7 +4484,7 @@ Text2.pnl = NumTypePnl;
 Text2.notional = NumTypeNotional;
 Text2.assetValue = NumTypeAssetValue;
 Text2.collateral = NumTypeCollateral;
-var BaseInput = React69.forwardRef(
+var BaseInput = React70.forwardRef(
   (props, ref) => {
     const {
       clearable,
@@ -4484,14 +4501,14 @@ var BaseInput = React69.forwardRef(
       value,
       ...inputProps
     } = props;
-    const [cursor, setCursor] = React69.useState(null);
-    const innerInputRef = React69.useRef(null);
-    const prevInputValue = React69.useRef(null);
-    const isFocused = React69.useRef(false);
-    const innerFormatters = React69.useMemo(() => {
+    const [cursor, setCursor] = React70.useState(null);
+    const innerInputRef = React70.useRef(null);
+    const prevInputValue = React70.useRef(null);
+    const isFocused = React70.useRef(false);
+    const innerFormatters = React70.useMemo(() => {
       return formatters ?? [];
     }, [formatters]);
-    React69.useEffect(() => {
+    React70.useEffect(() => {
       if (!ref) return;
       if (typeof ref === "function") {
         ref(innerInputRef.current);
@@ -4499,7 +4516,7 @@ var BaseInput = React69.forwardRef(
         ref.current = innerInputRef.current;
       }
     }, [innerInputRef, ref]);
-    const formatToRender = React69.useCallback(
+    const formatToRender = React70.useCallback(
       (value2) => {
         if (!Array.isArray(innerFormatters) || innerFormatters.length === 0)
           return value2;
@@ -4515,7 +4532,7 @@ var BaseInput = React69.forwardRef(
       },
       [innerFormatters]
     );
-    const formatToChange = React69.useCallback(
+    const formatToChange = React70.useCallback(
       (value2, originValue) => {
         if (!Array.isArray(innerFormatters) || innerFormatters.length === 0)
           return value2;
@@ -4532,11 +4549,11 @@ var BaseInput = React69.forwardRef(
       },
       [innerFormatters]
     );
-    const formattedValue = React69.useMemo(() => {
+    const formattedValue = React70.useMemo(() => {
       if (typeof value === "undefined" || value === null) return "";
       return formatToRender(value);
     }, [value, formatToRender]);
-    React69.useEffect(() => {
+    React70.useEffect(() => {
       if (document.activeElement !== innerInputRef.current) return;
       const nextValueLen = `${formattedValue}`.length;
       const prevValueLen = prevInputValue.current?.length || 0;
@@ -4758,7 +4775,7 @@ var inputVariants = tv(
     responsiveVariants: ["md", "lg"]
   }
 );
-var Input = React69__namespace.default.forwardRef((props, ref) => {
+var Input = React70__namespace.default.forwardRef((props, ref) => {
   const {
     size,
     disabled,
@@ -4785,7 +4802,7 @@ var Input = React69__namespace.default.forwardRef((props, ref) => {
     pl: typeof prefix === "undefined" || pl,
     pr: typeof suffix === "undefined" || pr
   });
-  const cid = React69.useId();
+  const cid = React70.useId();
   const suffixElement = typeof onClear !== "undefined" ? /* @__PURE__ */ jsxRuntime.jsx(
     ClearButton,
     {
@@ -4829,7 +4846,7 @@ var Input = React69__namespace.default.forwardRef((props, ref) => {
     )
   ] });
 });
-var ClearButton = React69__namespace.default.forwardRef((props, ref) => {
+var ClearButton = React70__namespace.default.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -4890,7 +4907,7 @@ var popoverVariants = tv({
 var PopoverRoot = PopoverPrimitive__namespace.Root;
 var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
 var PopoverAnchor = PopoverPrimitive__namespace.Anchor;
-var PopoverContent = React69__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+var PopoverContent = React70__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
   PopoverPrimitive__namespace.Content,
   {
     ref,
@@ -4941,7 +4958,7 @@ var scrollAreaVariants = tv({
     }
   }
 });
-var ScrollArea = React69__namespace.default.forwardRef((oriProps, ref) => {
+var ScrollArea = React70__namespace.default.forwardRef((oriProps, ref) => {
   const {
     className,
     classNames,
@@ -4971,7 +4988,7 @@ var ScrollArea = React69__namespace.default.forwardRef((oriProps, ref) => {
   );
 });
 ScrollArea.displayName = ScrollAreaPrimitive__namespace.Root.displayName;
-var ScrollBar = React69__namespace.default.forwardRef((oriProps, ref) => {
+var ScrollBar = React70__namespace.default.forwardRef((oriProps, ref) => {
   const { className, orientation = "vertical", ...props } = oriProps;
   const { bar, tumb } = scrollAreaVariants({ className, orientation });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -5144,7 +5161,7 @@ var selectVariants = tv(
 var SelectRoot = SelectPrimitive__namespace.Root;
 var SelectGroup = SelectPrimitive__namespace.Group;
 var SelectValue = SelectPrimitive__namespace.Value;
-var SelectTrigger = React69__namespace.forwardRef(
+var SelectTrigger = React70__namespace.forwardRef(
   ({
     className,
     children,
@@ -5198,7 +5215,7 @@ var SelectTrigger = React69__namespace.forwardRef(
   }
 );
 SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
-var SelectScrollUpButton = React69__namespace.forwardRef(({ className, ...props }, ref) => {
+var SelectScrollUpButton = React70__namespace.forwardRef(({ className, ...props }, ref) => {
   const { scrollUpButton } = selectVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.ScrollUpButton,
@@ -5211,7 +5228,7 @@ var SelectScrollUpButton = React69__namespace.forwardRef(({ className, ...props
   );
 });
 SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
-var SelectScrollDownButton = React69__namespace.forwardRef(({ className, ...props }, ref) => {
+var SelectScrollDownButton = React70__namespace.forwardRef(({ className, ...props }, ref) => {
   const { scrollDownButton } = selectVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.ScrollDownButton,
@@ -5224,7 +5241,7 @@ var SelectScrollDownButton = React69__namespace.forwardRef(({ className, ...prop
   );
 });
 SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
-var SelectContent = React69__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => {
+var SelectContent = React70__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => {
   const { content, viewport } = selectVariants({ position, className });
   return /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.Content,
@@ -5238,7 +5255,7 @@ var SelectContent = React69__namespace.forwardRef(({ className, children, positi
   ) });
 });
 SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
-var SelectLabel = React69__namespace.forwardRef(({ className, ...props }, ref) => {
+var SelectLabel = React70__namespace.forwardRef(({ className, ...props }, ref) => {
   const { label } = selectVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.Label,
@@ -5250,12 +5267,12 @@ var SelectLabel = React69__namespace.forwardRef(({ className, ...props }, ref) =
   );
 });
 SelectLabel.displayName = SelectPrimitive__namespace.Label.displayName;
-var SelectItem = React69__namespace.forwardRef(({ className, children, size, ...props }, ref) => {
+var SelectItem = React70__namespace.forwardRef(({ className, children, size, ...props }, ref) => {
   const { item } = selectVariants({ size });
   return /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Item, { ref, className: item({ className }), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children }) });
 });
 SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
-var SelectSeparator = React69__namespace.forwardRef(({ className, ...props }, ref) => {
+var SelectSeparator = React70__namespace.forwardRef(({ className, ...props }, ref) => {
   const { separator } = selectVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.Separator,
@@ -5269,17 +5286,17 @@ var SelectSeparator = React69__namespace.forwardRef(({ className, ...props }, re
 SelectSeparator.displayName = SelectPrimitive__namespace.Separator.displayName;
 var CombineSelect = (props) => {
   const { options, variant, valueFormatter, ...rest } = props;
-  const [keyword, setKeyword] = React69.useState("");
-  const [value, setValue] = React69.useState(props.value ?? "");
+  const [keyword, setKeyword] = React70.useState("");
+  const [value, setValue] = React70.useState(props.value ?? "");
   const { trigger } = selectVariants({
     size: props.size,
     variant
   });
-  const [selectedIndex, setSelectedIndex] = React69.useState(
+  const [selectedIndex, setSelectedIndex] = React70.useState(
     () => typeof props.value === "undefined" ? -1 : options.findIndex((option) => option.value === props.value)
   );
-  const [focused, setFocused] = React69.useState(false);
-  const inputRef = React69.useRef(null);
+  const [focused, setFocused] = React70.useState(false);
+  const inputRef = React70.useRef(null);
   const onFocus = () => {
     setFocused(true);
   };
@@ -5449,7 +5466,7 @@ var SelectWithOptions = (props) => {
     ...rest
   } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(Select, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(SelectGroup, { children: options.map((option, index) => {
-    return React69__namespace.default.cloneElement(optionRenderer(option, currentValue), {
+    return React70__namespace.default.cloneElement(optionRenderer(option, currentValue), {
       size: props.size,
       key: index,
       index
@@ -5459,7 +5476,7 @@ var SelectWithOptions = (props) => {
 var TokenSelect = (props) => {
   const { tokens, showIcon = true, iconSize, showCaret, ...rest } = props;
   const { icon } = selectVariants();
-  const options = React69.useMemo(() => {
+  const options = React70.useMemo(() => {
     return tokens.map((token) => {
       return {
         ...token,
@@ -5535,16 +5552,16 @@ var Select2 = Select;
 Select2.options = SelectWithOptions;
 Select2.combine = CombineSelect;
 Select2.tokens = TokenSelect;
-var QuantityInput = React69.forwardRef(
+var QuantityInput = React70.forwardRef(
   (props, ref) => {
     const { tokens, ...rest } = props;
-    const [token, setToken] = React69.useState(tokens[0]);
-    const tokenOptions = React69.useMemo(() => {
+    const [token, setToken] = React70.useState(tokens[0]);
+    const tokenOptions = React70.useMemo(() => {
       return props.tokens.map((token2) => ({
         name: token2
       }));
     }, [props.tokens]);
-    const inputRef = React69.useRef(null);
+    const inputRef = React70.useRef(null);
     return /* @__PURE__ */ jsxRuntime.jsx(
       Input,
       {
@@ -5610,7 +5627,7 @@ var tooltipVariants = tv({
     "data-[side=top]:oui-slide-in-from-bottom-2"
   ]
 });
-var TooltipContent = React69__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
+var TooltipContent = React70__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     TooltipPrimitive__namespace.Content,
     {
@@ -5641,7 +5658,7 @@ var TooltipArrow = (props) => {
     }
   );
 };
-var Tooltip = React69__namespace.forwardRef((originalProps, ref) => {
+var Tooltip = React70__namespace.forwardRef((originalProps, ref) => {
   const {
     children,
     content,
@@ -5673,10 +5690,10 @@ var Tooltip = React69__namespace.forwardRef((originalProps, ref) => {
   );
 });
 Tooltip.displayName = "Tooltip";
-var InputWithTooltip = React69.forwardRef((props, ref) => {
+var InputWithTooltip = React70.forwardRef((props, ref) => {
   const { tooltip, tooltipProps, triggerClassName, ...inputProps } = props;
-  const [open, setOpen] = React69.useState(false);
-  React69.useEffect(() => {
+  const [open, setOpen] = React70.useState(false);
+  React70.useEffect(() => {
     if (typeof tooltip !== "undefined" && tooltip !== "" && tooltip !== null) {
       setOpen(true);
     } else {
@@ -5873,7 +5890,7 @@ var inputHelpTextVariants = tailwindVariants.tv({
     }
   }
 });
-var InputHelpText = React69__namespace.default.forwardRef(
+var InputHelpText = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { className, asChild, color, ...rest } = props;
     const Comp = asChild ? reactSlot.Slot : "div";
@@ -5911,7 +5928,7 @@ var textFieldVariants = tv({
     direction: "column"
   }
 });
-var TextField = React69__namespace.default.forwardRef((props, ref) => {
+var TextField = React70__namespace.default.forwardRef((props, ref) => {
   const { label, helpText, direction, className, ...inputProps } = props;
   const { root, label: labelClassName } = textFieldVariants({ direction });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: root({ className, direction }), children: [
@@ -5929,7 +5946,7 @@ var TextField = React69__namespace.default.forwardRef((props, ref) => {
   ] });
 });
 TextField.displayName = "TextField";
-var InputLabel = React69__namespace.default.forwardRef(
+var InputLabel = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { asChild = false, className, ...rest } = props;
     const Comp = asChild ? reactSlot.Slot : "label";
@@ -5981,7 +5998,7 @@ var checkboxVariants = tailwindVariants.tv({
     // style: "checkBox",
   }
 });
-var Checkbox = React69__namespace.forwardRef(({ className, color = "white", variant = "checkBox", ...props }, ref) => {
+var Checkbox = React70__namespace.forwardRef(({ className, color = "white", variant = "checkBox", ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     CheckboxPrimitive__namespace.Root,
     {
@@ -6109,7 +6126,7 @@ var switchVariants = tailwindVariants.tv({
     color: "primary"
   }
 });
-var Switch = React69__namespace.default.forwardRef(({ className, color, ...props }, ref) => {
+var Switch = React70__namespace.default.forwardRef(({ className, color, ...props }, ref) => {
   const { root, thumb } = switchVariants({
     className,
     color
@@ -6230,7 +6247,7 @@ function Badge({ className, variant, color, size, ...props }) {
     }
   );
 }
-var Logo = React69__namespace.default.forwardRef(({ src, alt, href }, ref) => {
+var Logo = React70__namespace.default.forwardRef(({ src, alt, href }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "logo oui-px-3", ref, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: href ?? "/", children: /* @__PURE__ */ jsxRuntime.jsx(
     "img",
     {
@@ -6243,8 +6260,8 @@ var Logo = React69__namespace.default.forwardRef(({ src, alt, href }, ref) => {
 Logo.displayName = "LogoElement";
 function useInit(params) {
   const { dataSource, loading, ignoreLoadingCheck } = params;
-  const [initialized, setInitialized] = React69.useState(false);
-  React69.useEffect(() => {
+  const [initialized, setInitialized] = React70.useState(false);
+  React70.useEffect(() => {
     if (initialized) return;
     if (ignoreLoadingCheck || loading || Array.isArray(dataSource)) {
       setInitialized(true);
@@ -6253,10 +6270,10 @@ function useInit(params) {
   return initialized;
 }
 function useScroll(deps) {
-  const scrollRef = React69.useRef(null);
-  const [showLeftShadow, setShowLeftShadow] = React69.useState(false);
-  const [showRightShadow, setShowRightShadow] = React69.useState(false);
-  React69.useEffect(() => {
+  const scrollRef = React70.useRef(null);
+  const [showLeftShadow, setShowLeftShadow] = React70.useState(false);
+  const [showRightShadow, setShowRightShadow] = React70.useState(false);
+  React70.useEffect(() => {
     if (!scrollRef.current) {
       return;
     }
@@ -6265,7 +6282,7 @@ function useScroll(deps) {
       setShowRightShadow(!isScrolledToRight(scrollRef.current));
     });
   }, [scrollRef]);
-  React69.useEffect(() => {
+  React70.useEffect(() => {
     if (!scrollRef.current) {
       return;
     }
@@ -6287,14 +6304,14 @@ function hasHorizontalScroll(element) {
 }
 function useShowHeader(params) {
   const { dataSource, loading } = params;
-  const initShowHeader = React69.useRef(false);
-  const showHeader = React69.useMemo(() => {
+  const initShowHeader = React70.useRef(false);
+  const showHeader = React70.useMemo(() => {
     if (loading && !dataSource?.length) {
       return initShowHeader.current;
     }
     return !!dataSource?.length;
   }, [loading, dataSource]);
-  React69.useEffect(() => {
+  React70.useEffect(() => {
     if (showHeader) {
       initShowHeader.current = true;
     }
@@ -6303,8 +6320,8 @@ function useShowHeader(params) {
 }
 function useShowPagination(params) {
   const { loading, dataSource, pagination, rows } = params;
-  const initShowPagination = React69.useRef(false);
-  const showPagination = React69.useMemo(() => {
+  const initShowPagination = React70.useRef(false);
+  const showPagination = React70.useMemo(() => {
     if (loading && !dataSource?.length) {
       return initShowPagination.current;
     }
@@ -6313,7 +6330,7 @@ function useShowPagination(params) {
     }
     return false;
   }, [loading, pagination, dataSource, rows]);
-  React69.useEffect(() => {
+  React70.useEffect(() => {
     if (showPagination) {
       initShowPagination.current = true;
     }
@@ -6322,7 +6339,7 @@ function useShowPagination(params) {
 }
 function useSort(props) {
   const { onSort, initialSort } = props;
-  const [sorting, setSorting] = React69.useState(
+  const [sorting, setSorting] = React70.useState(
     initialSort ? [
       {
         id: initialSort.sortKey,
@@ -6330,15 +6347,15 @@ function useSort(props) {
       }
     ] : []
   );
-  React69.useEffect(() => {
+  React70.useEffect(() => {
     const { id, desc } = sorting[0] || {};
     onSort?.(id ? { sortKey: id, sort: desc ? "desc" : "asc" } : void 0);
   }, [sorting, onSort]);
   return [sorting, setSorting];
 }
 function useWrap(deps) {
-  const wrapRef = React69.useRef(null);
-  React69.useEffect(() => {
+  const wrapRef = React70.useRef(null);
+  React70.useEffect(() => {
     if (!wrapRef.current) return;
     const bgColor = window.getComputedStyle(wrapRef.current).backgroundColor;
     wrapRef.current.style.setProperty("--oui-table-background-color", bgColor);
@@ -6431,7 +6448,7 @@ var TableBody = (props) => {
             children: props.expandRowRender?.(row, row.index)
           }
         ) });
-        const rowView = /* @__PURE__ */ jsxRuntime.jsxs(React69.Fragment, { children: [
+        const rowView = /* @__PURE__ */ jsxRuntime.jsxs(React70.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "tr",
             {
@@ -6492,7 +6509,7 @@ var TableBody = (props) => {
           expandView
         ] }, row.id);
         if (typeof props.renderRowContainer === "function") {
-          return /* @__PURE__ */ jsxRuntime.jsx(React69.Fragment, { children: props.renderRowContainer(row.original, row.index, rowView, row) }, row.id);
+          return /* @__PURE__ */ jsxRuntime.jsx(React70.Fragment, { children: props.renderRowContainer(row.original, row.index, rowView, row) }, row.id);
         }
         return rowView;
       })
@@ -6579,7 +6596,7 @@ var DescendingIcon = () => {
 };
 function useMultiSort(props) {
   const { onSort, currentSorting } = props;
-  const handleFieldSort = React69.useCallback(
+  const handleFieldSort = React70.useCallback(
     (fieldKey) => {
       const isCurrentField = currentSorting?.sortKey === fieldKey;
       let newOrder;
@@ -6594,7 +6611,7 @@ function useMultiSort(props) {
     },
     [currentSorting, onSort]
   );
-  const getFieldSort = React69.useCallback(
+  const getFieldSort = React70.useCallback(
     (fieldKey) => {
       if (currentSorting?.sortKey === fieldKey) {
         return { sortKey: fieldKey, sort: currentSorting.sort };
@@ -6750,9 +6767,9 @@ var SortIndicator2 = ({ isSorted }) => {
     desc: /* @__PURE__ */ jsxRuntime.jsx(DescendingIcon, {})
   }[isSorted] || /* @__PURE__ */ jsxRuntime.jsx(SortingIcon2, {});
 };
-var LocaleContext = React69.createContext(void 0);
+var LocaleContext = React70.createContext(void 0);
 var LocaleProvider = (props) => {
-  const value = React69.useMemo(
+  const value = React70.useMemo(
     () => ({ ...props.locale, exist: true }),
     [props.locale]
   );
@@ -6783,8 +6800,8 @@ var localeValues = {
 
 // src/locale/useLocale.ts
 var useLocale = (componentName, defaultLocale) => {
-  const fullLocale = React69.useContext(LocaleContext);
-  const getLocale = React69.useMemo(() => {
+  const fullLocale = React70.useContext(LocaleContext);
+  const getLocale = React70.useMemo(() => {
     const locale = defaultLocale || localeValues[componentName];
     const localeFromContext = fullLocale?.[componentName] || {};
     return {
@@ -6792,7 +6809,7 @@ var useLocale = (componentName, defaultLocale) => {
       ...localeFromContext
     };
   }, [componentName, defaultLocale, fullLocale]);
-  const getLocaleCode = React69.useMemo(() => {
+  const getLocaleCode = React70.useMemo(() => {
     const localeCode = fullLocale?.locale;
     const defaultLocaleCode = localeValues.locale;
     return localeCode || defaultLocaleCode;
@@ -6812,7 +6829,7 @@ var Pagination = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   }
 );
 Pagination.displayName = "Pagination";
-var PaginationContent = React69__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var PaginationContent = React70__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "ul",
   {
     ref,
@@ -6824,7 +6841,7 @@ var PaginationContent = React69__namespace.default.forwardRef(({ className, ...p
   }
 ));
 PaginationContent.displayName = "PaginationContent";
-var PaginationItem = React69__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("li", { ref, className: tailwindVariants.cnBase("oui-leading-[0px]", className), ...props }));
+var PaginationItem = React70__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("li", { ref, className: tailwindVariants.cnBase("oui-leading-[0px]", className), ...props }));
 PaginationItem.displayName = "PaginationItem";
 var PaginationLink = ({
   className,
@@ -6956,7 +6973,7 @@ var PaginationItems = (props) => {
   if (totalPages <= 1) {
     return null;
   }
-  const pageNumbers = React69.useMemo(() => {
+  const pageNumbers = React70.useMemo(() => {
     if (typeof props.generatePageNumbers === "function") {
       return props.generatePageNumbers(currentPage, totalPages);
     }
@@ -7125,7 +7142,7 @@ var useExtensionBuilder = (position, props) => {
 var ExtensionSlot = (props) => {
   const { position, scope, defaultWidget: defaultValue, ...rest } = props;
   const elementProps = useExtensionBuilder(position, rest);
-  const Ele = React69.useMemo(() => {
+  const Ele = React70.useMemo(() => {
     const registry = OrderlyExtensionRegistry.getInstance();
     const plugin = registry.getPluginsByPosition(position);
     return plugin?.render ?? defaultValue ?? NotFound;
@@ -7366,10 +7383,10 @@ function DataTable(props) {
     onSort,
     initialSort
   });
-  const hasMultiSortColumns = React69.useMemo(() => {
+  const hasMultiSortColumns = React70.useMemo(() => {
     return columns.some((col) => col.multiSort && !col.multiSort.onSort);
   }, [columns]);
-  const effectiveManualSorting = React69.useMemo(() => {
+  const effectiveManualSorting = React70.useMemo(() => {
     if (!hasMultiSortColumns) {
       return manualSorting;
     }
@@ -7383,27 +7400,27 @@ function DataTable(props) {
     }
     return false;
   }, [hasMultiSortColumns, manualSorting, sorting, columns]);
-  const dataSource = React69.useMemo(() => {
+  const dataSource = React70.useMemo(() => {
     return Transform.dataSource(props.dataSource || [], columns, sorting);
   }, [props.dataSource, columns, sorting]);
-  const formatColumns = React69.useMemo(
+  const formatColumns = React70.useMemo(
     () => Transform.columns(columns, sorting, setSorting),
     [columns, sorting, setSorting]
   );
-  const columnPinning = React69.useMemo(
+  const columnPinning = React70.useMemo(
     () => Transform.columnPinning(columns),
     [columns]
   );
-  const rowSelection = React69.useMemo(
+  const rowSelection = React70.useMemo(
     () => props.rowSelection || {},
     [props.rowSelection]
   );
-  const { state: paginationState, config: paginationConfig } = React69.useMemo(
+  const { state: paginationState, config: paginationConfig } = React70.useMemo(
     () => Transform.pagination(pagination),
     [pagination]
   );
   const initialized = useInit({ dataSource, loading, ignoreLoadingCheck });
-  const columnFilters = React69.useMemo(() => {
+  const columnFilters = React70.useMemo(() => {
     return Array.isArray(props.columnFilters) ? props.columnFilters : props.columnFilters ? [props.columnFilters] : [];
   }, [props.columnFilters]);
   const table = reactTable.useReactTable({
@@ -7439,7 +7456,7 @@ function DataTable(props) {
     ...paginationConfig
     // ...sortConfig,
   });
-  React69.useEffect(() => {
+  React70.useEffect(() => {
     props.getTableInstance?.(table);
   }, [table]);
   const wrapRef = useWrap([className, classNames?.root]);
@@ -7630,15 +7647,15 @@ var DateRangePicker = (props) => {
     ...calendarProps
   } = props;
   const [locale] = useLocale("picker");
-  const [open, setOpen] = React69.useState(false);
-  const [dateRange, setDateRange] = React69.useState(
+  const [open, setOpen] = React70.useState(false);
+  const [dateRange, setDateRange] = React70.useState(
     value || initialValue || null
   );
-  const [isMobileView, setIsMobileView] = React69.useState(false);
+  const [isMobileView, setIsMobileView] = React70.useState(false);
   const update = useDebouncedCallback((width) => {
     setIsMobileView(width <= 768);
   }, 100);
-  React69.useEffect(() => {
+  React70.useEffect(() => {
     const handleResize = () => {
       update(window.innerWidth);
     };
@@ -7648,12 +7665,12 @@ var DateRangePicker = (props) => {
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  React69.useEffect(() => {
+  React70.useEffect(() => {
     if (value?.from && value?.to && dateRange?.from && dateRange?.to && !areDatesEqual(value, dateRange))
       setDateRange(value);
   }, [value]);
   const { trigger } = selectVariants({ size, className });
-  const formattedValue = React69.useMemo(() => {
+  const formattedValue = React70.useMemo(() => {
     if (!dateRange || !dateRange.from || !dateRange.to) {
       return placeholder ?? locale.selectDate;
     }
@@ -7727,8 +7744,8 @@ var DateRangePicker = (props) => {
 };
 DateRangePicker.displayName = "DateRangePicker";
 function useDebouncedCallback(callback, delay) {
-  const timeoutRef = React69.useRef(null);
-  const debouncedCallback = React69.useCallback(
+  const timeoutRef = React70.useRef(null);
+  const debouncedCallback = React70.useCallback(
     (args) => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
@@ -7766,8 +7783,8 @@ var DatePicker = (props) => {
   } = props;
   const [locale] = useLocale("picker");
   const { trigger } = selectVariants({ size });
-  const [open, setOpen] = React69.useState(false);
-  const formattedValue = React69.useMemo(() => {
+  const [open, setOpen] = React70.useState(false);
+  const formattedValue = React70.useMemo(() => {
     if (typeof value === "undefined") {
       return placeholder ?? locale.selectDate;
     }
@@ -7834,7 +7851,7 @@ var Sheet = DialogPrimitive__namespace.Root;
 var SheetTrigger = DialogPrimitive__namespace.Trigger;
 var SheetClose = DialogPrimitive__namespace.Close;
 var SheetPortal = DialogPrimitive__namespace.Portal;
-var SheetOverlay = React69__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SheetOverlay = React70__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Overlay,
   {
     className: tailwindVariants.cnBase(
@@ -7860,7 +7877,7 @@ var sheetVariants = tailwindVariants.tv({
     side: "bottom"
   }
 });
-var SheetContent = React69__namespace.forwardRef(
+var SheetContent = React70__namespace.forwardRef(
   ({
     side = "bottom",
     closeable = true,
@@ -7956,7 +7973,7 @@ var SheetFooter = ({
   }
 );
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React69__namespace.forwardRef(({ className, leading, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var SheetTitle = React70__namespace.forwardRef(({ className, leading, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   "div",
   {
     className: "oui-sheet-header oui-grid oui-grid-cols-[40px_1fr_40px] oui-items-center",
@@ -7977,7 +7994,7 @@ var SheetTitle = React69__namespace.forwardRef(({ className, leading, ...props }
   }
 ));
 SheetTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var SheetDescription = React69__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SheetDescription = React70__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Description,
   {
     ref,
@@ -8002,8 +8019,8 @@ var getModalId = (modal2) => {
   return modal2[symModalId];
 };
 function useModal(modal2, args) {
-  const modals = React69.useContext(ModalContext);
-  const modalIdFromContext = React69.useContext(ModalIdContext);
+  const modals = React70.useContext(ModalContext);
+  const modalIdFromContext = React70.useContext(ModalIdContext);
   let modalId;
   let isComponent = modal2 && typeof modal2 !== "string";
   if (!modal2) {
@@ -8015,19 +8032,19 @@ function useModal(modal2, args) {
     throw new Error("modalId is required");
   }
   const id = modalId;
-  React69.useEffect(() => {
+  React70.useEffect(() => {
     if (isComponent) {
       register(id, modal2, args);
     }
   }, [isComponent, modalId, modal2, args]);
   const modalInfo = modals[id];
-  const show2 = React69.useCallback(
+  const show2 = React70.useCallback(
     (args2) => modalActions.show(id, args2),
     [id]
   );
-  const hide2 = React69.useCallback(() => modalActions.hide(id), [id]);
-  const remove2 = React69.useCallback(() => modalActions.remove(id), [id]);
-  const onOpenChange = React69.useCallback(
+  const hide2 = React70.useCallback(() => modalActions.hide(id), [id]);
+  const remove2 = React70.useCallback(() => modalActions.remove(id), [id]);
+  const onOpenChange = React70.useCallback(
     (isOpen) => {
       if (!isOpen) {
         reject("cancel");
@@ -8036,33 +8053,33 @@ function useModal(modal2, args) {
     },
     [id]
   );
-  const setStates2 = React69.useCallback(
+  const setStates2 = React70.useCallback(
     (states) => {
       modalActions.setStates(id, states);
     },
     [id]
   );
-  const updateArgs2 = React69.useCallback(
+  const updateArgs2 = React70.useCallback(
     (args2) => {
       modalActions.updateArgs(id, args2);
     },
     [id]
   );
-  const resolve = React69.useCallback(
+  const resolve = React70.useCallback(
     (args2) => {
       modalCallbacks[id]?.resolve(args2);
       delete modalCallbacks[id];
     },
     [id]
   );
-  const reject = React69.useCallback(
+  const reject = React70.useCallback(
     (args2) => {
       modalCallbacks[id]?.reject(args2);
       delete modalCallbacks[id];
     },
     [id]
   );
-  const resolveHide = React69.useCallback((args2) => {
+  const resolveHide = React70.useCallback((args2) => {
     hideModalCallbacks[id]?.resolve(args2);
     delete hideModalCallbacks[id];
   }, []);
@@ -8096,9 +8113,9 @@ var MODAL_REGISTRY = /* @__PURE__ */ new Map();
 var create = (Comp) => {
   return ({ id, defaultVisible, keepMounted, ...props }) => {
     const { args, show: show2 } = useModal(id);
-    const modals = React69.useContext(ModalContext);
+    const modals = React70.useContext(ModalContext);
     const shouldMount = !!modals[id];
-    React69.useEffect(() => {
+    React70.useEffect(() => {
       if (defaultVisible) {
         show2();
       }
@@ -8109,11 +8126,11 @@ var create = (Comp) => {
         }
       };
     }, [id, show2, defaultVisible]);
-    React69.useEffect(() => {
+    React70.useEffect(() => {
       if (keepMounted) modalActions.setStates(id, { keepMounted: true });
     }, [id, keepMounted]);
     const delayVisible = modals[id]?.delayVisible;
-    React69.useEffect(() => {
+    React70.useEffect(() => {
       if (delayVisible) {
         show2(args);
       }
@@ -8134,8 +8151,8 @@ var unregister = (id) => {
 };
 var initialState = {};
 var ALREADY_MOUNTED = {};
-var ModalContext = React69.createContext(initialState);
-var ModalIdContext = React69.createContext(null);
+var ModalContext = React70.createContext(initialState);
+var ModalIdContext = React70.createContext(null);
 var modalCallbacks = {};
 var hideModalCallbacks = {};
 var dispatch = () => {
@@ -8244,7 +8261,7 @@ var reducer = (state, action) => {
   }
 };
 var ModalContainer = () => {
-  const modals = React69.useContext(ModalContext);
+  const modals = React70.useContext(ModalContext);
   const visibleModalIds = Object.keys(modals).filter((id) => !!modals[id]);
   visibleModalIds.forEach((id) => {
     if (!MODAL_REGISTRY.has(id) && !ALREADY_MOUNTED[id]) {
@@ -8263,7 +8280,7 @@ var ModalContainer = () => {
   }) });
 };
 var ModalProvider = (props) => {
-  const [state, dispatchOrigin] = React69.useReducer(reducer, initialState);
+  const [state, dispatchOrigin] = React70.useReducer(reducer, initialState);
   dispatch = dispatchOrigin;
   return /* @__PURE__ */ jsxRuntime.jsxs(ModalContext.Provider, { value: state, children: [
     props.children,
@@ -8367,7 +8384,7 @@ var dividerVariants = tv({
     intensity: 4
   }
 });
-var Divider = React69__namespace.default.forwardRef((props, ref) => {
+var Divider = React70__namespace.default.forwardRef((props, ref) => {
   const { className, intensity, direction, lineStyle, mx, my, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -8575,7 +8592,7 @@ var Dialog = DialogPrimitive__namespace.Root;
 var DialogTrigger = DialogPrimitive__namespace.Trigger;
 var DialogPortal = DialogPrimitive__namespace.Portal;
 var DialogClose = DialogPrimitive__namespace.Close;
-var DialogOverlay = React69__namespace.forwardRef(({ className, ...props }, ref) => {
+var DialogOverlay = React70__namespace.forwardRef(({ className, ...props }, ref) => {
   const { overlay } = dialogVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Overlay,
@@ -8587,7 +8604,7 @@ var DialogOverlay = React69__namespace.forwardRef(({ className, ...props }, ref)
   );
 });
 DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
-var DialogContent = React69__namespace.forwardRef(
+var DialogContent = React70__namespace.forwardRef(
   ({
     overlyClassName,
     className,
@@ -8649,7 +8666,7 @@ var DialogFooter = ({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: footer({ className }), ...props });
 };
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React69__namespace.forwardRef(({ className, ...props }, ref) => {
+var DialogTitle = React70__namespace.forwardRef(({ className, ...props }, ref) => {
   const { title } = dialogVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Title,
@@ -8661,7 +8678,7 @@ var DialogTitle = React69__namespace.forwardRef(({ className, ...props }, ref) =
   );
 });
 DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var DialogDescription = React69__namespace.forwardRef(({ className, ...props }, ref) => {
+var DialogDescription = React70__namespace.forwardRef(({ className, ...props }, ref) => {
   const { desc } = dialogVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Description,
@@ -8675,10 +8692,10 @@ var DialogDescription = React69__namespace.forwardRef(({ className, ...props },
 DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
 var SimpleDialogFooter = (props) => {
   const { actions } = props;
-  const [primaryLoading, setPrimaryLoading] = React69.useState(
+  const [primaryLoading, setPrimaryLoading] = React70.useState(
     actions?.primary?.loading ?? false
   );
-  React69.useEffect(() => {
+  React70.useEffect(() => {
     if (actions?.primary?.loading) {
       setPrimaryLoading(actions?.primary?.loading);
     }
@@ -8687,7 +8704,7 @@ var SimpleDialogFooter = (props) => {
     };
   }, [actions?.primary?.loading]);
   if (!actions) return null;
-  const buttons = React69.useMemo(() => {
+  const buttons = React70.useMemo(() => {
     const buttons2 = [];
     if (actions.secondary && typeof actions.secondary.onClick === "function") {
       const {
@@ -8786,11 +8803,11 @@ function useMediaQuery(query) {
     }
     return false;
   };
-  const [matches, setMatches] = React69.useState(getMatches(query));
+  const [matches, setMatches] = React70.useState(getMatches(query));
   function handleChange() {
     setMatches(getMatches(query));
   }
-  React69.useEffect(() => {
+  React70.useEffect(() => {
     const matchMedia = window?.matchMedia(query);
     handleChange();
     if (matchMedia?.addListener) {
@@ -8818,7 +8835,7 @@ function useScreen() {
   };
 }
 function useObserverElement(element, callback) {
-  React69.useEffect(() => {
+  React70.useEffect(() => {
     if (!element) {
       return;
     }
@@ -8834,11 +8851,11 @@ function useObserverElement(element, callback) {
   }, [element]);
 }
 function useLongPress(callback, longPressTime = 600) {
-  const timeoutRef = React69.useRef(null);
-  const targetRef = React69.useRef(null);
-  const startPositionRef = React69.useRef(null);
-  const isLongPressTriggeredRef = React69.useRef(false);
-  const clearLongPress = React69.useCallback(() => {
+  const timeoutRef = React70.useRef(null);
+  const targetRef = React70.useRef(null);
+  const startPositionRef = React70.useRef(null);
+  const isLongPressTriggeredRef = React70.useRef(false);
+  const clearLongPress = React70.useCallback(() => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
@@ -8847,7 +8864,7 @@ function useLongPress(callback, longPressTime = 600) {
     startPositionRef.current = null;
     isLongPressTriggeredRef.current = false;
   }, []);
-  const startLongPress = React69.useCallback(
+  const startLongPress = React70.useCallback(
     (e) => {
       clearLongPress();
       if ("touches" in e) {
@@ -8868,17 +8885,17 @@ function useLongPress(callback, longPressTime = 600) {
     },
     [callback, longPressTime, clearLongPress]
   );
-  const handleMouseDown = React69.useCallback(
+  const handleMouseDown = React70.useCallback(
     (e) => {
       if (e.button !== 0) return;
       startLongPress(e);
     },
     [startLongPress]
   );
-  const handleMouseUp = React69.useCallback(() => {
+  const handleMouseUp = React70.useCallback(() => {
     clearLongPress();
   }, [clearLongPress]);
-  const handleMouseMove = React69.useCallback(
+  const handleMouseMove = React70.useCallback(
     (e) => {
       if (isLongPressTriggeredRef.current) return;
       if (startPositionRef.current) {
@@ -8892,25 +8909,25 @@ function useLongPress(callback, longPressTime = 600) {
     },
     [clearLongPress]
   );
-  const handleMouseLeave = React69.useCallback(() => {
+  const handleMouseLeave = React70.useCallback(() => {
     clearLongPress();
   }, [clearLongPress]);
-  const handleContextMenu = React69.useCallback((e) => {
+  const handleContextMenu = React70.useCallback((e) => {
     if (timeoutRef.current || isLongPressTriggeredRef.current) {
       e.preventDefault();
       e.stopPropagation();
     }
   }, []);
-  const handleTouchStart = React69.useCallback(
+  const handleTouchStart = React70.useCallback(
     (e) => {
       startLongPress(e);
     },
     [startLongPress]
   );
-  const handleTouchEnd = React69.useCallback(() => {
+  const handleTouchEnd = React70.useCallback(() => {
     clearLongPress();
   }, [clearLongPress]);
-  const handleTouchMove = React69.useCallback(
+  const handleTouchMove = React70.useCallback(
     (e) => {
       if (timeoutRef.current) {
         e.preventDefault();
@@ -8931,7 +8948,7 @@ function useLongPress(callback, longPressTime = 600) {
     },
     [clearLongPress]
   );
-  const handleTouchCancel = React69.useCallback(() => {
+  const handleTouchCancel = React70.useCallback(() => {
     clearLongPress();
   }, [clearLongPress]);
   return {
@@ -8961,7 +8978,7 @@ var AlertDialog = (props) => {
     classNames
   } = props;
   const { isMobile } = useScreen();
-  const actions = React69.useMemo(() => {
+  const actions = React70.useMemo(() => {
     if (typeof onOk !== "function" && typeof onCancel !== "function")
       return void 0;
     const actions2 = {};
@@ -9014,7 +9031,7 @@ var AlertDialog = (props) => {
 var CreatedAlertDialog = create((props) => {
   const { onOk } = props;
   const { visible, hide: hide2, resolve, reject, onOpenChange } = useModal();
-  const onOkHandler = React69.useCallback(() => {
+  const onOkHandler = React70.useCallback(() => {
     return Promise.resolve().then(onOk).then(hide2);
   }, [onOk]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -9231,14 +9248,14 @@ function registerSimpleSheet(id, comp, props) {
 }
 var ActionItem = (props) => {
   const { action } = props;
-  const onItemClick = React69.useCallback(() => {
+  const onItemClick = React70.useCallback(() => {
     if (typeof action.onClick === "function") {
       action.onClick(action);
     } else {
       props.onClick?.({ ...action, index: props.index });
     }
   }, [action]);
-  const child = React69.useMemo(() => {
+  const child = React70.useMemo(() => {
     return action.label;
   }, [action.label]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -9261,7 +9278,7 @@ var ActionSheetContent = (props) => {
     if (action.type === "division") {
       return /* @__PURE__ */ jsxRuntime.jsx(ActionDivision, {}, index);
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs(React69.Fragment, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(React70.Fragment, { children: [
       action.value === "cancel" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-h-2 oui-bg-base-10" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         ActionItem,
@@ -9288,7 +9305,7 @@ var ActionSheetContent = (props) => {
 };
 var ActionSheet = (props) => {
   const [locale] = useLocale("modal");
-  const items = React69.useMemo(() => {
+  const items = React70.useMemo(() => {
     const items2 = [];
     if (Array.isArray(props.actionSheets)) {
       for (const action of props.actionSheets) {
@@ -9368,7 +9385,7 @@ var pickerVariants = tv({
     color: "base"
   }
 });
-var Picker = React69.forwardRef(
+var Picker = React70.forwardRef(
   (originalProps, ref) => {
     const {
       size,
@@ -9383,8 +9400,8 @@ var Picker = React69.forwardRef(
       valueRenderer,
       ...props
     } = originalProps;
-    const [open, setOpen] = React69.useState(false);
-    const selectedItem = React69.useMemo(() => {
+    const [open, setOpen] = React70.useState(false);
+    const selectedItem = React70.useMemo(() => {
       if (value && !!value.value) {
         return value;
       }
@@ -9395,13 +9412,13 @@ var Picker = React69.forwardRef(
         }
       }
     }, [value, options]);
-    const text = React69.useMemo(() => {
+    const text = React70.useMemo(() => {
       if (selectedItem) {
         return selectedItem.label;
       }
       return placeholder || label || "";
     }, [selectedItem, label, placeholder]);
-    const actions = React69.useMemo(() => {
+    const actions = React70.useMemo(() => {
       return [...options, "---", "Cancel"];
     }, [options]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -9532,10 +9549,10 @@ var DataFilter = (props) => {
   );
 };
 var usePagination = (initial) => {
-  const dataTotal = React69.useRef(0);
-  const [page, setPage] = React69.useState(initial?.page ?? 1);
-  const [pageSize, _setPageSize] = React69.useState(initial?.pageSize ?? 10);
-  const setPageSize = React69.useCallback(
+  const dataTotal = React70.useRef(0);
+  const [page, setPage] = React70.useState(initial?.page ?? 1);
+  const [pageSize, _setPageSize] = React70.useState(initial?.pageSize ?? 10);
+  const setPageSize = React70.useCallback(
     (size) => {
       _setPageSize(size);
       if (dataTotal.current > 0) {
@@ -9560,7 +9577,7 @@ var usePagination = (initial) => {
       pageTotal
     };
   };
-  const parsePagination = React69.useCallback(
+  const parsePagination = React70.useCallback(
     (meta) => {
       return {
         ...parseMeta(meta),
@@ -9570,7 +9587,7 @@ var usePagination = (initial) => {
     },
     [page, pageSize]
   );
-  const pagination = React69.useMemo(
+  const pagination = React70.useMemo(
     () => ({
       page,
       pageSize,
@@ -9579,7 +9596,7 @@ var usePagination = (initial) => {
     }),
     [parsePagination]
   );
-  React69.useEffect(() => {
+  React70.useEffect(() => {
     if (initial?.resetPageWhenPageSizeChange !== false) {
       setPage(1);
     }
@@ -9822,13 +9839,13 @@ var tabsVariants = tv({
   }
 });
 var TabsBase = TabsPrimitive__namespace.Root;
-var TabsList = React69__namespace.forwardRef((originProps, ref) => {
+var TabsList = React70__namespace.forwardRef((originProps, ref) => {
   const { className, size, variant, ...props } = originProps;
   const { list } = tabsVariants({ size, variant });
   return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.List, { ref, className: list({ className }), ...props });
 });
 TabsList.displayName = TabsPrimitive__namespace.List.displayName;
-var TabsTrigger = React69__namespace.forwardRef((originProps, ref) => {
+var TabsTrigger = React70__namespace.forwardRef((originProps, ref) => {
   const { className, size, children, icon, variant, ...props } = originProps;
   const { trigger, icon: iconClassName } = tabsVariants({ size, variant });
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -9838,14 +9855,14 @@ var TabsTrigger = React69__namespace.forwardRef((originProps, ref) => {
       className: trigger({ className }),
       ...props,
       children: [
-        typeof icon !== "undefined" ? React69__namespace.cloneElement(icon, { className: iconClassName(), opacity: 1 }) : null,
+        typeof icon !== "undefined" ? React70__namespace.cloneElement(icon, { className: iconClassName(), opacity: 1 }) : null,
         /* @__PURE__ */ jsxRuntime.jsx("span", { children })
       ]
     }
   );
 });
 TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
-var TabsContent = React69__namespace.forwardRef((oriProps, ref) => {
+var TabsContent = React70__namespace.forwardRef((oriProps, ref) => {
   const { className, size, children, ...props } = oriProps;
   const { content } = tabsVariants({ size });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -9859,16 +9876,16 @@ var TabsContent = React69__namespace.forwardRef((oriProps, ref) => {
   );
 });
 TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
-var OrderlyThemeContext = React69.createContext(
+var OrderlyThemeContext = React70.createContext(
   {}
 );
 var useOrderlyTheme = () => {
-  return React69.useContext(OrderlyThemeContext);
+  return React70.useContext(OrderlyThemeContext);
 };
 function useDrag(containerRef) {
-  const [isDragging, setIsDragging] = React69.useState(false);
-  const [startX, setStartX] = React69.useState(0);
-  const [scrollLeft, setScrollLeft] = React69.useState(0);
+  const [isDragging, setIsDragging] = React70.useState(false);
+  const [startX, setStartX] = React70.useState(0);
+  const [scrollLeft, setScrollLeft] = React70.useState(0);
   const handleMouseDown = (e) => {
     if (!containerRef.current) return;
     setIsDragging(true);
@@ -9893,10 +9910,10 @@ function useDrag(containerRef) {
   };
 }
 function useScroll2() {
-  const [leadingVisible, setLeadingVisible] = React69.useState(false);
-  const [tailingVisible, setTailingVisible] = React69.useState(false);
-  const containerRef = React69.useRef(null);
-  React69.useEffect(() => {
+  const [leadingVisible, setLeadingVisible] = React70.useState(false);
+  const [tailingVisible, setTailingVisible] = React70.useState(false);
+  const containerRef = React70.useRef(null);
+  React70.useEffect(() => {
     if (!containerRef.current) return;
     const handleScroll = () => {
       const container2 = containerRef.current;
@@ -9921,7 +9938,7 @@ function useScroll2() {
       intersectionObserver.disconnect();
     };
   }, []);
-  React69.useEffect(() => {
+  React70.useEffect(() => {
     if (!containerRef.current) return;
     const intersectionObserver = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {
@@ -10038,7 +10055,7 @@ var ScrollIndicator = (props) => {
     }
   );
 };
-var TabsContext = React69.createContext({});
+var TabsContext = React70.createContext({});
 var Tabs = (props) => {
   const { getComponentTheme } = useOrderlyTheme();
   const {
@@ -10051,20 +10068,20 @@ var Tabs = (props) => {
   } = props;
   const tabsOverrides = getComponentTheme("tabs", { variant: "contained" });
   const tabsVariant = variant || tabsOverrides.variant;
-  const [tabList, setTabList] = React69.useState({});
-  const registerTab = React69.useCallback((config) => {
+  const [tabList, setTabList] = React70.useState({});
+  const registerTab = React70.useCallback((config) => {
     setTabList((prev) => {
       return { ...prev, [config.value]: config };
     });
   }, []);
-  const unregisterTab = React69.useCallback((config) => {
+  const unregisterTab = React70.useCallback((config) => {
     setTabList((prev) => {
       const newTabList = { ...prev };
       delete newTabList[config.value];
       return newTabList;
     });
   }, []);
-  const memoizedValue = React69.useMemo(
+  const memoizedValue = React70.useMemo(
     () => ({ registerTab, unregisterTab }),
     [registerTab, unregisterTab]
   );
@@ -10137,8 +10154,8 @@ var Tabs = (props) => {
 Tabs.displayName = "Tabs";
 var TabPanel = (props) => {
   const { title, value, icon, className, style, testid, children } = props;
-  const { registerTab, unregisterTab } = React69.useContext(TabsContext);
-  React69.useEffect(() => {
+  const { registerTab, unregisterTab } = React70.useContext(TabsContext);
+  React70.useEffect(() => {
     const tabConfig = {
       title,
       value,
@@ -10174,7 +10191,7 @@ var cardVariants = tv({
     intensity: 900
   }
 });
-var CardBase = React69__namespace.default.forwardRef(
+var CardBase = React70__namespace.default.forwardRef(
   ({ className, intensity, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -10188,7 +10205,7 @@ var CardBase = React69__namespace.default.forwardRef(
   }
 );
 CardBase.displayName = "CardBase";
-var CardHeader = React69__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardHeader = React70__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -10201,7 +10218,7 @@ var CardHeader = React69__namespace.default.forwardRef(({ className, children, .
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React69__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardTitle = React70__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "h3",
   {
     ref,
@@ -10214,7 +10231,7 @@ var CardTitle = React69__namespace.default.forwardRef(({ className, children, ..
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React69__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardDescription = React70__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "p",
   {
     ref,
@@ -10223,7 +10240,7 @@ var CardDescription = React69__namespace.default.forwardRef(({ className, childr
     children
   }
 ));
-var CardContent = React69__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardContent = React70__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -10233,9 +10250,9 @@ var CardContent = React69__namespace.default.forwardRef(({ className, children,
   }
 ));
 CardContent.displayName = "CardContent";
-var CardFooter = React69__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className, ...props, children }));
+var CardFooter = React70__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className, ...props, children }));
 CardFooter.displayName = "CardFooter";
-var Card = React69.forwardRef(
+var Card = React70.forwardRef(
   (props, ref) => {
     const { title, children, footer, className, classNames, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(CardBase, { ...rest, className: tailwindVariants.cnBase(className, classNames?.root), ref, children: [
@@ -10248,7 +10265,7 @@ var Card = React69.forwardRef(
 Card.displayName = "Card";
 var HoverCardRoot = HoverCardPrimitive__namespace.Root;
 var HoverCardTrigger = HoverCardPrimitive__namespace.Trigger;
-var HoverCardContent = React69__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var HoverCardContent = React70__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   HoverCardPrimitive__namespace.Content,
   {
     ref,
@@ -10402,7 +10419,7 @@ var sliderVariants = tv({
     }
   }
 });
-var BaseSlider = React69__namespace.forwardRef((oriProps, ref) => {
+var BaseSlider = React70__namespace.forwardRef((oriProps, ref) => {
   const {
     className,
     color,
@@ -10418,8 +10435,8 @@ var BaseSlider = React69__namespace.forwardRef((oriProps, ref) => {
   const { track, range, thumb, root, trackInner, mark, tips } = sliderVariants({
     color
   });
-  const [innerValue, setInvalue] = React69__namespace.useState(__propsValue);
-  React69__namespace.useEffect(() => {
+  const [innerValue, setInvalue] = React70__namespace.useState(__propsValue);
+  React70__namespace.useEffect(() => {
     setInvalue((prev) => {
       if (!prev) {
         return __propsValue;
@@ -10430,7 +10447,7 @@ var BaseSlider = React69__namespace.forwardRef((oriProps, ref) => {
       return prev;
     });
   }, [__propsValue]);
-  const innerMasks = React69.useMemo(() => {
+  const innerMasks = React70.useMemo(() => {
     if (Array.isArray(marks) && marks.length > 0) {
       return marks;
     }
@@ -10469,7 +10486,7 @@ var BaseSlider = React69__namespace.forwardRef((oriProps, ref) => {
           {
             className: track({ className: classNames?.track }),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: trackInner() }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: trackInner({ className: classNames?.trackInner }) }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 SliderPrimitive__namespace.Range,
                 {
@@ -10526,14 +10543,14 @@ var Marks = (props) => {
     className,
     color = "primary"
   } = props;
-  const _value = React69.useMemo(() => value?.[0] ?? 0, [value]);
-  const selIndex = React69.useMemo(() => {
+  const _value = React70.useMemo(() => value?.[0] ?? 0, [value]);
+  const selIndex = React70.useMemo(() => {
     if (typeof props.step === "undefined") {
       return void 0;
     }
     return Math.floor(_value / props.step);
   }, [_value, props.step]);
-  const colorCls = React69.useMemo(() => {
+  const colorCls = React70.useMemo(() => {
     switch (color) {
       case "primary":
         return "oui-border-primary oui-bg-primary";
@@ -10545,7 +10562,7 @@ var Marks = (props) => {
         return "oui-border-primary-light oui-bg-primary-light";
     }
   }, [color]);
-  const textCls = React69.useMemo(() => {
+  const textCls = React70.useMemo(() => {
     switch (color) {
       case "primary":
         return "oui-text-primary";
@@ -10567,7 +10584,7 @@ var Marks = (props) => {
     const __value = isInnerMask ? mark.value : index;
     const active = (isInnerMask ? _value >= __value : _value >= mark.value) && _value >= 0 && !props.disabled;
     const classNames = active ? colorCls : "";
-    return /* @__PURE__ */ jsxRuntime.jsxs(React69.Fragment, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(React70.Fragment, { children: [
       (!isInnerMask ? mark.label : true) && /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
@@ -10597,8 +10614,8 @@ var SliderTip = (props) => {
   const percent = convertValueToPercentage(value, min, max);
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className, style: { lineHeight: "19px" }, children: props.tipFormatter?.(value, min, max, percent) ?? `${percent.toFixed()}%` });
 };
-var SingleSlider = React69__namespace.forwardRef((props, ref) => {
-  const _value = React69.useMemo(() => [props.value], [props.value]);
+var SingleSlider = React70__namespace.forwardRef((props, ref) => {
+  const _value = React70.useMemo(() => [props.value], [props.value]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseSlider,
     {
@@ -10617,7 +10634,7 @@ var SingleSlider = React69__namespace.forwardRef((props, ref) => {
 SingleSlider.displayName = "SingleSlider";
 var Slider = BaseSlider;
 Slider.single = SingleSlider;
-var ToastErrorIcon = React69__namespace.default.forwardRef(
+var ToastErrorIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 1, viewBox = "0 0 20 20", ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, viewBox, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -10630,7 +10647,7 @@ var ToastErrorIcon = React69__namespace.default.forwardRef(
     ) });
   }
 );
-var ToastSuccessIcon = React69__namespace.default.forwardRef(
+var ToastSuccessIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 1, viewBox = "0 0 20 20", ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, viewBox, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -10644,7 +10661,7 @@ var ToastSuccessIcon = React69__namespace.default.forwardRef(
     ) });
   }
 );
-var ToastLoadingIcon = React69__namespace.default.forwardRef(
+var ToastLoadingIcon = React70__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 1, viewBox = "0 0 20 20", ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, viewBox, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -10799,10 +10816,10 @@ var ToastTile = (props) => {
   );
 };
 function useEndReached(sentinelRef, onEndReached) {
-  const observer = React69.useRef();
-  const cb = React69.useRef(onEndReached);
+  const observer = React70.useRef();
+  const cb = React70.useRef(onEndReached);
   cb.current = onEndReached;
-  React69.useEffect(() => {
+  React70.useEffect(() => {
     const options = {
       root: null,
       rootMargin: "0px",
@@ -10820,22 +10837,22 @@ function useEndReached(sentinelRef, onEndReached) {
       observer.current?.disconnect();
     };
   }, []);
-  React69.useEffect(() => {
+  React70.useEffect(() => {
     observer.current?.observe(sentinelRef.current);
   }, []);
 }
 var ListViewInner = (props, ref) => {
-  const sentinelRef = React69.useRef(null);
-  const containerRef = React69.useRef(null);
+  const sentinelRef = React70.useRef(null);
+  const containerRef = React70.useRef(null);
   useEndReached(sentinelRef, () => {
     if (!props.isLoading) {
       props.loadMore?.();
     }
   });
-  const emptyDataSouce = React69.useMemo(() => {
+  const emptyDataSouce = React70.useMemo(() => {
     return Array.isArray(props.dataSource) && props.dataSource.length <= 0;
   }, [props.dataSource]);
-  const listViewElement = React69.useMemo(() => {
+  const listViewElement = React70.useMemo(() => {
     if (!props.dataSource) {
       return null;
     }
@@ -10852,16 +10869,16 @@ var ListViewInner = (props, ref) => {
         }
       );
     }
-    return props.dataSource.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(React69__namespace.default.Fragment, { children: props.renderItem(item, index, props.extraData) }, index));
+    return props.dataSource.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(React70__namespace.default.Fragment, { children: props.renderItem(item, index, props.extraData) }, index));
   }, [emptyDataSouce, props.dataSource, props.extraData, props.emptyView]);
-  const loadingViewElement = React69.useMemo(() => {
+  const loadingViewElement = React70.useMemo(() => {
     if ((props.dataSource?.length || 0) === 0) return null;
     if (!props.isLoading) {
       return null;
     }
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-flex oui-py-2 oui-justify-center oui-items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) });
   }, [props.isLoading, props.dataSource]);
-  React69.useImperativeHandle(ref, () => {
+  React70.useImperativeHandle(ref, () => {
     return {
       scroll: (direction) => {
         containerRef.current?.scroll({
@@ -10907,7 +10924,7 @@ var ListViewInner = (props, ref) => {
     }
   );
 };
-var ListView = React69.forwardRef(ListViewInner);
+var ListView = React70.forwardRef(ListViewInner);
 var Collapsible = CollapsiblePrimitive__namespace.Root;
 var CollapsibleTrigger2 = CollapsiblePrimitive__namespace.CollapsibleTrigger;
 var CollapsibleContent2 = (props) => {
@@ -10917,21 +10934,21 @@ var CollapsibleContent2 = (props) => {
       ...props,
       className: tailwindVariants.cnBase(
         props.className,
-        "data-[state=open]:oui-animate-collapsible-down data-[state=closed]:oui-animate-collapsible-up oui-overflow-hidden"
+        "oui-overflow-hidden data-[state=closed]:oui-animate-collapsible-up data-[state=open]:oui-animate-collapsible-down"
       )
     }
   );
 };
-var CollapseContext = React69.createContext(
+var CollapseContext = React70.createContext(
   {}
 );
 var useCollapseContext = () => {
-  return React69.useContext(CollapseContext);
+  return React70.useContext(CollapseContext);
 };
 var Panel = (props) => {
   const { activeKey, setActiveKey } = useCollapseContext();
   const { header, headerClassName, itemKey, disabled } = props;
-  const headerNode = React69.useMemo(() => {
+  const headerNode = React70.useMemo(() => {
     if (typeof header === "string") {
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
@@ -10976,8 +10993,8 @@ var Panel = (props) => {
 };
 var CollapseRoot = (props) => {
   const { activeKey = "", children } = props;
-  const [internalActiveKey, setInternalActiveKey] = React69.useState(activeKey);
-  const memoizedValue = React69.useMemo(() => {
+  const [internalActiveKey, setInternalActiveKey] = React70.useState(activeKey);
+  const memoizedValue = React70.useMemo(() => {
     return {
       activeKey: internalActiveKey,
       setActiveKey: setInternalActiveKey
@@ -10997,11 +11014,11 @@ var Marquee = (props) => {
     className,
     setApi
   } = props;
-  const isHorizontal = React69.useMemo(
+  const isHorizontal = React70.useMemo(
     () => carouselOptions.axis !== "y",
     [carouselOptions.axis]
   );
-  const emblaOptions = React69.useMemo(() => {
+  const emblaOptions = React70.useMemo(() => {
     return {
       loop: true,
       align: "start",
@@ -11011,7 +11028,7 @@ var Marquee = (props) => {
       ...carouselOptions
     };
   }, [carouselOptions]);
-  const autoScrollPluginOptions = React69.useMemo(() => {
+  const autoScrollPluginOptions = React70.useMemo(() => {
     return {
       speed: 1,
       direction: "forward",
@@ -11025,12 +11042,12 @@ var Marquee = (props) => {
   const [emblaRef, emblaApi] = useEmblaCarousel__default.default(emblaOptions, [
     AutoScroll__default.default(autoScrollPluginOptions)
   ]);
-  React69__namespace.default.useEffect(() => {
+  React70__namespace.default.useEffect(() => {
     if (emblaApi && setApi) {
       setApi(emblaApi);
     }
   }, [emblaApi, setApi]);
-  const renderSlides = React69.useMemo(() => {
+  const renderSlides = React70.useMemo(() => {
     if (!Array.isArray(data) || data.length === 0) {
       return null;
     }
@@ -11177,7 +11194,7 @@ var dropdownMenuVariants = tailwindVariants.tv({
     size: "lg"
   }
 });
-var DropdownMenuContent = React69__namespace.forwardRef(({ className, sideOffset = 4, size, ...props }, ref) => {
+var DropdownMenuContent = React70__namespace.forwardRef(({ className, sideOffset = 4, size, ...props }, ref) => {
   const { content } = dropdownMenuVariants({ size });
   return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuPrimitive__namespace.Content,
@@ -11190,7 +11207,7 @@ var DropdownMenuContent = React69__namespace.forwardRef(({ className, sideOffset
   ) });
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive__namespace.Content.displayName;
-var DropdownMenuItem = React69__namespace.forwardRef(({ className, inset, size, ...props }, ref) => {
+var DropdownMenuItem = React70__namespace.forwardRef(({ className, inset, size, ...props }, ref) => {
   const { item } = dropdownMenuVariants({ size });
   return /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuPrimitive__namespace.Item,
@@ -11202,7 +11219,7 @@ var DropdownMenuItem = React69__namespace.forwardRef(({ className, inset, size,
   );
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive__namespace.Item.displayName;
-var DropdownMenuLabel = React69__namespace.forwardRef(({ className, inset, ...props }, ref) => {
+var DropdownMenuLabel = React70__namespace.forwardRef(({ className, inset, ...props }, ref) => {
   const { label } = dropdownMenuVariants({
     inset
   });
@@ -11216,7 +11233,7 @@ var DropdownMenuLabel = React69__namespace.forwardRef(({ className, inset, ...pr
   );
 });
 DropdownMenuLabel.displayName = DropdownMenuPrimitive__namespace.Label.displayName;
-var DropdownMenuSeparator = React69__namespace.forwardRef(({ className, ...props }, ref) => {
+var DropdownMenuSeparator = React70__namespace.forwardRef(({ className, ...props }, ref) => {
   const { separator } = dropdownMenuVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuPrimitive__namespace.Separator,
@@ -11238,7 +11255,7 @@ var DropdownMenuShortcut = ({
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 var SimpleDropdownMenu = (props) => {
   const { currentValue, menu, render, size, children, ...contentProps } = props;
-  const items = React69.useMemo(() => {
+  const items = React70.useMemo(() => {
     if (typeof props.render === "function") {
       return props.menu.map((item, index) => {
         return props.render?.(item, index);
@@ -11277,7 +11294,7 @@ var SimpleDropdownMenu = (props) => {
   ] });
 };
 var ComponentsProvider = (props) => {
-  React69.useEffect(() => {
+  React70.useEffect(() => {
     if (props.components && Object.keys(props.components).length) {
       for (const position in props.components) {
         const Element = props.components[position];
@@ -11295,20 +11312,20 @@ var ComponentsProvider = (props) => {
 };
 var OrderlyThemeProvider = (props) => {
   const { components, overrides, children } = props;
-  const resolveComponentTheme = React69.useCallback(
+  const resolveComponentTheme = React70.useCallback(
     (component, defaultValue) => {
       return overrides?.[component] || defaultValue;
     },
     [overrides]
   );
-  const memoizedValue = React69.useMemo(() => {
+  const memoizedValue = React70.useMemo(() => {
     return { getComponentTheme: resolveComponentTheme };
   }, [resolveComponentTheme]);
   return /* @__PURE__ */ jsxRuntime.jsx(OrderlyThemeContext.Provider, { value: memoizedValue, children: /* @__PURE__ */ jsxRuntime.jsx(ComponentsProvider, { components, children }) });
 };
-var Either = React69.memo((props) => {
+var Either = React70.memo((props) => {
   const { value, children, left } = props;
-  const inputValue = React69.useMemo(
+  const inputValue = React70.useMemo(
     () => Boolean(typeof value === "function" ? value() : value),
     [value]
   );
@@ -11339,6 +11356,58 @@ __export(tailwind_exports, {
   default: () => tailwind_default
 });
 var tailwind_default = {};
+var stopPropagation = (event) => {
+  event.stopPropagation();
+};
+var Tips = ({
+  content,
+  title = "Tips",
+  trigger,
+  className,
+  classNames
+}) => {
+  const { isMobile } = useScreen();
+  const triggerElement = trigger || /* @__PURE__ */ jsxRuntime.jsx(
+    InfoCircleIcon,
+    {
+      opacity: 1,
+      className: tailwindVariants.cnBase(
+        "oui-size-3 oui-shrink-0 oui-cursor-pointer oui-text-base-contrast-36",
+        classNames?.trigger
+      )
+    }
+  );
+  if (isMobile) {
+    const handleClick = (event) => {
+      event.stopPropagation();
+      modal.alert({
+        title,
+        message: content
+      });
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className,
+        onClick: handleClick,
+        onMouseDown: stopPropagation,
+        onPointerDown: stopPropagation,
+        children: triggerElement
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Tooltip,
+    {
+      className: "oui-bg-base-6",
+      arrow: { className: "oui-fill-base-6" },
+      content: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-max-w-72", children: content }),
+      children: triggerElement
+    }
+  );
+};
+Tips.displayName = "Tips";
 var dotStatusVariants = tailwindVariants.tv({
   slots: {
     root: "oui-flex oui-items-center oui-justify-center oui-gap-1",
@@ -11632,6 +11701,7 @@ exports.TabsTrigger = TabsTrigger;
 exports.Text = Text2;
 exports.TextField = TextField;
 exports.ThrottledButton = ThrottledButton;
+exports.Tips = Tips;
 exports.ToastTile = ToastTile;
 exports.Toaster = Toaster;
 exports.TokenIcon = TokenIcon;
@@ -11652,6 +11722,7 @@ exports.TriggerDialog = TriggerDialog;
 exports.VaultsIcon = VaultsIcon;
 exports.VectorIcon = VectorIcon;
 exports.WalletIcon = WalletIcon;
+exports.WarningIcon = WarningIcon;
 exports.WoofiStakeIcon = WoofiStakeIcon;
 exports.boxVariants = boxVariants;
 exports.buttonVariants = buttonVariants;