@orderly.network/ui 2.8.8 → 2.8.9

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React67 = require('react');
+var React68 = 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 React67__namespace = /*#__PURE__*/_interopNamespace(React67);
+var React68__namespace = /*#__PURE__*/_interopNamespace(React68);
 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 = React67__namespace.default.forwardRef((props, forwardedRef) => {
+var Box = React68__namespace.default.forwardRef((props, forwardedRef) => {
   const {
     asChild = false,
     as: TAG = "div",
@@ -603,7 +603,7 @@ var flexVariant = tv(
     responsiveVariants: true
   }
 );
-var Flex = React67.forwardRef((props, ref) => {
+var Flex = React68.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 = React67__namespace.default.forwardRef(
+var BaseButton = React68__namespace.default.forwardRef(
   (props, forwardedRef) => {
     const {
       asChild = false,
@@ -717,14 +717,14 @@ var BaseButton = React67__namespace.default.forwardRef(
     } = props;
     const Comp = asChild ? reactSlot.Slot : "button";
     const isDisabled = typeof disabled !== "undefined" ? disabled : loading;
-    const iconElement = React67.useMemo(() => {
-      return icon ? React67__namespace.default.cloneElement(icon, {
+    const iconElement = React68.useMemo(() => {
+      return icon ? React68__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 = React67.useMemo(() => {
+    const content = React68.useMemo(() => {
       if (!leading && !trailing && !iconElement)
         return children;
       return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", itemAlign: "center", className: "oui-space-x-1", children: [
@@ -734,7 +734,7 @@ var BaseButton = React67__namespace.default.forwardRef(
         trailing
       ] });
     }, [children, leading, trailing, iconElement]);
-    const spinnerSize = React67.useMemo(() => {
+    const spinnerSize = React68.useMemo(() => {
       switch (size) {
         case "xl":
           return "md";
@@ -969,7 +969,7 @@ var buttonVariants = tailwindVariants.tv(
     responsiveVariants: ["md", "lg"]
   }
 );
-var Button = React67__namespace.default.forwardRef(
+var Button = React68__namespace.default.forwardRef(
   ({
     className,
     variant,
@@ -1002,9 +1002,9 @@ var Button = React67__namespace.default.forwardRef(
   }
 );
 Button.displayName = "Button";
-var ThrottledButton = React67__namespace.default.forwardRef(({ onClick, throttleDuration = 700, ...props }, ref) => {
-  const lastCall = React67.useRef(0);
-  const throttle = React67.useCallback(
+var ThrottledButton = React68__namespace.default.forwardRef(({ onClick, throttleDuration = 700, ...props }, ref) => {
+  const lastCall = React68.useRef(0);
+  const throttle = React68.useCallback(
     (delay, fn) => {
       return function(...args) {
         const now = Date.now();
@@ -1089,7 +1089,7 @@ var gridVariants = tv({
     // autoFlow: "row",
   }
 });
-var Grid = React67__namespace.default.forwardRef((props, ref) => {
+var Grid = React68__namespace.default.forwardRef((props, ref) => {
   const { className, cols, rows, gap, gapX, gapY, autoFlow, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Box,
@@ -1139,8 +1139,8 @@ var gridSpanVariants = tv({
 });
 var Span = (props) => {
   const { colSpan, rowSpan, className, ...rest } = props;
-  const ref = React67.useRef(null);
-  React67.useEffect(() => {
+  const ref = React68.useRef(null);
+  React68.useEffect(() => {
     if (ref.current) {
       const parent = ref.current.parentElement;
       if (!parent || !parent.classList.contains("oui-grid")) ;
@@ -1183,7 +1183,7 @@ var iconVariants = tailwindVariants.tv({
     color: "black"
   }
 });
-var BaseIcon = React67__namespace.default.forwardRef(
+var BaseIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     const {
       size = 24,
@@ -1218,6 +1218,9 @@ var avatarVariants = tv({
   },
   variants: {
     size: {
+      "3xs": {
+        root: "oui-w-3.5 oui-h-3.5"
+      },
       "2xs": {
         root: "oui-w-4 oui-h-4"
       },
@@ -1242,7 +1245,7 @@ var avatarVariants = tv({
     size: "sm"
   }
 });
-var AvatarBase = React67__namespace.forwardRef(({ className, size, ...props }, ref) => {
+var AvatarBase = React68__namespace.forwardRef(({ className, size, ...props }, ref) => {
   const { root } = avatarVariants({ size });
   return /* @__PURE__ */ jsxRuntime.jsx(
     AvatarPrimitive__namespace.Root,
@@ -1254,7 +1257,7 @@ var AvatarBase = React67__namespace.forwardRef(({ className, size, ...props }, r
   );
 });
 AvatarBase.displayName = AvatarPrimitive__namespace.Root.displayName;
-var AvatarImage = React67__namespace.forwardRef(({ className, ...props }, ref) => {
+var AvatarImage = React68__namespace.forwardRef(({ className, ...props }, ref) => {
   const { image } = avatarVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     AvatarPrimitive__namespace.Image,
@@ -1266,12 +1269,12 @@ var AvatarImage = React67__namespace.forwardRef(({ className, ...props }, ref) =
   );
 });
 AvatarImage.displayName = AvatarPrimitive__namespace.Image.displayName;
-var AvatarFallback = React67__namespace.forwardRef(({ className, ...props }, ref) => {
+var AvatarFallback = React68__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 = React67__namespace.forwardRef((props, ref) => {
+var Avatar = React68__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(
@@ -1285,13 +1288,13 @@ var Avatar = React67__namespace.forwardRef((props, ref) => {
     typeof fallback !== "undefined" && /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { delayMs, children: fallback })
   ] });
 });
-var EVMAvatar = React67__namespace.forwardRef((props, ref) => {
+var EVMAvatar = React68__namespace.forwardRef((props, ref) => {
   const { address, ...rest } = props;
-  const src = React67.useMemo(() => makeBlockie__default.default(address), [props.address]);
+  const src = React68.useMemo(() => makeBlockie__default.default(address), [props.address]);
   return /* @__PURE__ */ jsxRuntime.jsx(Avatar, { ...rest, src });
 });
 var ChainIcon = (props) => {
-  const url = React67.useMemo(() => {
+  const url = React68.useMemo(() => {
     return `https://oss.orderly.network/static/network_logo/${props.chainId}.png`;
   }, [props.chainId]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1305,7 +1308,7 @@ var ChainIcon = (props) => {
   );
 };
 var TokenIcon = (props) => {
-  const url = React67.useMemo(() => {
+  const url = React68.useMemo(() => {
     let name = props.name;
     if (typeof props.symbol === "string") {
       const arr = props.symbol?.split("_");
@@ -1325,7 +1328,7 @@ var TokenIcon = (props) => {
 };
 var CombineIcon = (props) => {
   const { secondary } = props;
-  const subElement = React67.useMemo(() => {
+  const subElement = React68.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 });
@@ -1352,7 +1355,7 @@ var CombineIcon = (props) => {
     subElement
   ] });
 };
-var CloseIcon = React67__namespace.default.forwardRef(
+var CloseIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1366,7 +1369,7 @@ var CloseIcon = React67__namespace.default.forwardRef(
   }
 );
 CloseIcon.displayName = "CloseIcon";
-var BaseIconWithPath = React67__namespace.default.forwardRef((props, ref) => {
+var BaseIconWithPath = React68__namespace.default.forwardRef((props, ref) => {
   const { opacity = 0.54, d, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -1379,7 +1382,7 @@ var BaseIconWithPath = React67__namespace.default.forwardRef((props, ref) => {
     }
   ) });
 });
-var CheckIcon = React67__namespace.default.forwardRef(
+var CheckIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1393,7 +1396,7 @@ var CheckIcon = React67__namespace.default.forwardRef(
   }
 );
 CheckIcon.displayName = "CheckIcon";
-var ChevronDownIcon = React67__namespace.default.forwardRef(
+var ChevronDownIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1407,7 +1410,7 @@ var ChevronDownIcon = React67__namespace.default.forwardRef(
   }
 );
 ChevronDownIcon.displayName = "ChevronDownIcon";
-var ChevronUpIcon = React67__namespace.default.forwardRef(
+var ChevronUpIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1421,7 +1424,7 @@ var ChevronUpIcon = React67__namespace.default.forwardRef(
   }
 );
 ChevronUpIcon.displayName = "ChevronUpIcon";
-var CaretUpIcon = React67__namespace.default.forwardRef(
+var CaretUpIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1435,7 +1438,7 @@ var CaretUpIcon = React67__namespace.default.forwardRef(
   }
 );
 CaretUpIcon.displayName = "CaretUpIcon";
-var CaretDownIcon = React67__namespace.default.forwardRef(
+var CaretDownIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -1448,7 +1451,7 @@ var CaretDownIcon = React67__namespace.default.forwardRef(
   }
 );
 CaretDownIcon.displayName = "CaretDownIcon";
-var CaretLeftIcon = React67__namespace.default.forwardRef(
+var CaretLeftIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1462,7 +1465,7 @@ var CaretLeftIcon = React67__namespace.default.forwardRef(
   }
 );
 CaretLeftIcon.displayName = "CaretLeftIcon";
-var CaretRightIcon = React67__namespace.default.forwardRef(
+var CaretRightIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1476,7 +1479,7 @@ var CaretRightIcon = React67__namespace.default.forwardRef(
   }
 );
 CaretRightIcon.displayName = "CaretRightIcon";
-var ChevronLeftIcon = React67__namespace.default.forwardRef(
+var ChevronLeftIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -1489,7 +1492,7 @@ var ChevronLeftIcon = React67__namespace.default.forwardRef(
   }
 );
 ChevronLeftIcon.displayName = "ChevronLeftIcon";
-var ChevronRightIcon = React67__namespace.default.forwardRef(
+var ChevronRightIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1503,7 +1506,7 @@ var ChevronRightIcon = React67__namespace.default.forwardRef(
   }
 );
 ChevronRightIcon.displayName = "ChevronRightIcon";
-var CalendarMinusIcon = React67__namespace.default.forwardRef(
+var CalendarMinusIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -1516,7 +1519,7 @@ var CalendarMinusIcon = React67__namespace.default.forwardRef(
   }
 );
 CalendarMinusIcon.displayName = "CalendarMinusIcon";
-var SettingIcon = React67__namespace.default.forwardRef(
+var SettingIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1530,7 +1533,7 @@ var SettingIcon = React67__namespace.default.forwardRef(
   }
 );
 SettingIcon.displayName = "SettingIcon";
-var CloseSquareFillIcon = React67__namespace.default.forwardRef((props, ref) => {
+var CloseSquareFillIcon = React68__namespace.default.forwardRef((props, ref) => {
   const { opacity = 0.54, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -1542,7 +1545,7 @@ var CloseSquareFillIcon = React67__namespace.default.forwardRef((props, ref) =>
   ) });
 });
 CloseSquareFillIcon.displayName = "CloseSquareFillIcon";
-var CloseCircleFillIcon = React67__namespace.default.forwardRef((props, ref) => {
+var CloseCircleFillIcon = React68__namespace.default.forwardRef((props, ref) => {
   const { opacity = 0.54, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -1554,7 +1557,7 @@ var CloseCircleFillIcon = React67__namespace.default.forwardRef((props, ref) =>
   ) });
 });
 CloseCircleFillIcon.displayName = "CloseCircleFillIcon";
-var CheckedCircleFillIcon = React67__namespace.default.forwardRef((props, ref) => {
+var CheckedCircleFillIcon = React68__namespace.default.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseIconWithPath,
     {
@@ -1565,7 +1568,7 @@ var CheckedCircleFillIcon = React67__namespace.default.forwardRef((props, ref) =
   );
 });
 CheckedCircleFillIcon.displayName = "CheckedCircleFillIcon";
-var CheckedSquareFillIcon = React67__namespace.default.forwardRef((props, ref) => {
+var CheckedSquareFillIcon = React68__namespace.default.forwardRef((props, ref) => {
   const { opacity = 0.54, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -1579,7 +1582,7 @@ var CheckedSquareFillIcon = React67__namespace.default.forwardRef((props, ref) =
   ) });
 });
 CheckedSquareFillIcon.displayName = "CheckSquareFillIcon";
-var CheckSquareEmptyIcon = React67__namespace.default.forwardRef(
+var CheckSquareEmptyIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1595,7 +1598,7 @@ var CheckSquareEmptyIcon = React67__namespace.default.forwardRef(
   }
 );
 CheckSquareEmptyIcon.displayName = "CheckSquareEmptyIcon";
-var PlusIcon = React67__namespace.default.forwardRef(
+var PlusIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1609,7 +1612,7 @@ var PlusIcon = React67__namespace.default.forwardRef(
   }
 );
 PlusIcon.displayName = "PlusIcon";
-var ReduceIcon = React67__namespace.default.forwardRef(
+var ReduceIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1627,7 +1630,7 @@ var ReduceIcon = React67__namespace.default.forwardRef(
   }
 );
 ReduceIcon.displayName = "ReduceIcon";
-var CircleOutlinedIcon = React67__namespace.default.forwardRef((props, ref) => {
+var CircleOutlinedIcon = React68__namespace.default.forwardRef((props, ref) => {
   const { opacity = 0.54, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -1639,7 +1642,7 @@ var CircleOutlinedIcon = React67__namespace.default.forwardRef((props, ref) => {
   ) });
 });
 CircleOutlinedIcon.displayName = "CircleOutlinedIcon";
-var SquareOutlinedIcon = React67__namespace.default.forwardRef((props, ref) => {
+var SquareOutlinedIcon = React68__namespace.default.forwardRef((props, ref) => {
   const { opacity = 0.54, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -1651,7 +1654,7 @@ var SquareOutlinedIcon = React67__namespace.default.forwardRef((props, ref) => {
   ) });
 });
 SquareOutlinedIcon.displayName = "SquareOutlinedIcon";
-var ExclamationFillIcon = React67__namespace.default.forwardRef((props, ref) => {
+var ExclamationFillIcon = React68__namespace.default.forwardRef((props, ref) => {
   const { ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -1662,7 +1665,7 @@ var ExclamationFillIcon = React67__namespace.default.forwardRef((props, ref) =>
   ) });
 });
 ExclamationFillIcon.displayName = "ExclamationFillIcon";
-var QuestionFillIcon = React67__namespace.default.forwardRef(
+var QuestionFillIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1676,7 +1679,7 @@ var QuestionFillIcon = React67__namespace.default.forwardRef(
   }
 );
 QuestionFillIcon.displayName = "ExclamationFillIcon";
-var ArrowLeftRightIcon = React67__namespace.default.forwardRef((props, ref) => {
+var ArrowLeftRightIcon = React68__namespace.default.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseIconWithPath,
     {
@@ -1687,7 +1690,7 @@ var ArrowLeftRightIcon = React67__namespace.default.forwardRef((props, ref) => {
   );
 });
 ArrowLeftRightIcon.displayName = "ArrowLeftRightIcon";
-var ArrowDownUpIcon = React67__namespace.default.forwardRef(
+var ArrowDownUpIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -1700,7 +1703,7 @@ var ArrowDownUpIcon = React67__namespace.default.forwardRef(
   }
 );
 ArrowDownUpIcon.displayName = "ArrowDownUpIconIcon";
-var ArrowUpSquareFillIcon = React67__namespace.default.forwardRef((props, ref) => {
+var ArrowUpSquareFillIcon = React68__namespace.default.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseIconWithPath,
     {
@@ -1711,7 +1714,7 @@ var ArrowUpSquareFillIcon = React67__namespace.default.forwardRef((props, ref) =
   );
 });
 ArrowUpSquareFillIcon.displayName = "ArrowUpSquareFillIconIcon";
-var ArrowDownSquareFillIcon = React67__namespace.default.forwardRef((props, ref) => {
+var ArrowDownSquareFillIcon = React68__namespace.default.forwardRef((props, ref) => {
   const { opacity = 0.54, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -1723,7 +1726,7 @@ var ArrowDownSquareFillIcon = React67__namespace.default.forwardRef((props, ref)
   ) });
 });
 ArrowDownSquareFillIcon.displayName = "ArrowDownSquareFillIconIcon";
-var ArrowLeftRightSquareFill = React67__namespace.default.forwardRef((props, ref) => {
+var ArrowLeftRightSquareFill = React68__namespace.default.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
@@ -1749,7 +1752,7 @@ var ArrowLeftRightSquareFill = React67__namespace.default.forwardRef((props, ref
 if (process.env.NODE_ENV !== "production") {
   ArrowLeftRightSquareFill.displayName = "ArrowLeftRightSquareFill";
 }
-var ArrowRightUpSquareFillIcon = React67__namespace.default.forwardRef((props, ref) => {
+var ArrowRightUpSquareFillIcon = React68__namespace.default.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseIconWithPath,
     {
@@ -1925,7 +1928,7 @@ var BattleSolidInactiveIcon = (props) => {
     }
   ) });
 };
-var FeeTierIcon = React67__namespace.default.forwardRef(
+var FeeTierIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -1994,7 +1997,7 @@ var EarnInactiveIcon = (props) => {
     )
   ] }) });
 };
-var EditIcon = React67__namespace.default.forwardRef(
+var EditIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2008,7 +2011,7 @@ var EditIcon = React67__namespace.default.forwardRef(
   }
 );
 EditIcon.displayName = "EditIcon";
-var EyeIcon = React67__namespace.default.forwardRef(
+var EyeIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2022,7 +2025,7 @@ var EyeIcon = React67__namespace.default.forwardRef(
   }
 );
 EyeIcon.displayName = "EyeIcon";
-var ShareIcon = React67__namespace.default.forwardRef(
+var ShareIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2036,7 +2039,7 @@ var ShareIcon = React67__namespace.default.forwardRef(
   }
 );
 ShareIcon.displayName = "ShareIcon";
-var EyeCloseIcon = React67__namespace.default.forwardRef(
+var EyeCloseIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2050,7 +2053,7 @@ var EyeCloseIcon = React67__namespace.default.forwardRef(
   }
 );
 EyeCloseIcon.displayName = "EyeCloseIcon";
-var RefreshIcon = React67__namespace.default.forwardRef(
+var RefreshIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2208,7 +2211,7 @@ var EsOrderlyIcon = (props) => {
     }
   );
 };
-var InfoCircleIcon = React67__namespace.default.forwardRef(
+var InfoCircleIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { className, opacity = 0.36, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2235,14 +2238,14 @@ var InfoCircleIcon = React67__namespace.default.forwardRef(
   }
 );
 var WalletIcon = (props) => {
-  const url = React67.useMemo(() => {
+  const url = React68.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 = React67__namespace.default.forwardRef(
+var CalendarIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -2255,7 +2258,7 @@ var CalendarIcon = React67__namespace.default.forwardRef(
   }
 );
 CalendarIcon.displayName = "CaretLeftIcon";
-var CopyIcon = React67__namespace.default.forwardRef(
+var CopyIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -2268,7 +2271,7 @@ var CopyIcon = React67__namespace.default.forwardRef(
   }
 );
 CopyIcon.displayName = "CopyIcon";
-var ServerFillIcon = React67__namespace.default.forwardRef(
+var ServerFillIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -2281,7 +2284,7 @@ var ServerFillIcon = React67__namespace.default.forwardRef(
   }
 );
 ServerFillIcon.displayName = "ServerFillIcon";
-var SortingAscIcon = React67__namespace.default.forwardRef(
+var SortingAscIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(BaseIcon, { ref, ...rest, children: [
@@ -2305,7 +2308,7 @@ var SortingAscIcon = React67__namespace.default.forwardRef(
   }
 );
 SortingAscIcon.displayName = "SortingAscIcon";
-var SortingDescIcon = React67__namespace.default.forwardRef(
+var SortingDescIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(BaseIcon, { ref, ...rest, children: [
@@ -2329,7 +2332,7 @@ var SortingDescIcon = React67__namespace.default.forwardRef(
   }
 );
 SortingDescIcon.displayName = "SortingDescIcon";
-var ArrowUpShortIcon = React67__namespace.default.forwardRef(
+var ArrowUpShortIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -2341,7 +2344,7 @@ var ArrowUpShortIcon = React67__namespace.default.forwardRef(
     );
   }
 );
-var ArrowDownShortIcon = React67__namespace.default.forwardRef(
+var ArrowDownShortIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -2353,7 +2356,7 @@ var ArrowDownShortIcon = React67__namespace.default.forwardRef(
     );
   }
 );
-var ArrowLeftShortIcon = React67__namespace.default.forwardRef(
+var ArrowLeftShortIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -2365,7 +2368,7 @@ var ArrowLeftShortIcon = React67__namespace.default.forwardRef(
     );
   }
 );
-var ArrowRightShortIcon = React67__namespace.default.forwardRef(
+var ArrowRightShortIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -2381,7 +2384,7 @@ ArrowUpShortIcon.displayName = "ArrowUpShortIcon";
 ArrowDownShortIcon.displayName = "ArrowDownShortIcon";
 ArrowLeftShortIcon.displayName = "ArrowLeftShortIcon";
 ArrowRightShortIcon.displayName = "ArrowRightShortIcon";
-var SortingIcon = React67__namespace.default.forwardRef(
+var SortingIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3427,16 +3430,18 @@ var StarChildChatInactiveIcon = (props) => {
     )
   ] });
 };
-var CloseRoundFillIcon = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ...props, viewBox: "0 0 28 28", children: /* @__PURE__ */ jsxRuntime.jsx(
+var CloseRoundFillIcon = React68__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",
     {
       d: "M13.9987 2.27881C7.55546 2.27881 2.33206 7.50198 2.33206 13.9455C2.33206 20.389 7.55546 25.6121 13.9987 25.6121C20.4422 25.6121 25.6654 20.389 25.6654 13.9455C25.6654 7.50198 20.4422 2.27881 13.9987 2.27881ZM10.4987 9.27881C10.7972 9.27881 11.1095 9.37915 11.3373 9.60665L13.9987 12.2678L16.6599 9.60665C16.8886 9.37915 17.2001 9.27881 17.4987 9.27881C17.7974 9.27881 18.1089 9.37915 18.3376 9.60665C18.7926 10.0628 18.7926 10.8281 18.3376 11.2843L15.6764 13.9455L18.3376 16.6066C18.7926 17.0628 18.7926 17.8281 18.3376 18.2843C17.8814 18.7393 17.1161 18.7393 16.6599 18.2843L13.9987 15.6231L11.3373 18.2843C10.8817 18.7393 10.1158 18.7393 9.66012 18.2843C9.20454 17.8281 9.20454 17.0628 9.66012 16.6066L12.3211 13.9455L9.66012 11.2843C9.20454 10.8281 9.20454 10.0628 9.66012 9.60665C9.88809 9.37915 10.2002 9.27881 10.4987 9.27881Z",
-      fill: "white",
-      fillOpacity: "0.54"
+      fill: "currentcolor",
+      fillOpacity: opacity
     }
   ) });
-};
+});
+CloseRoundFillIcon.displayName = "CloseRoundFillIcon";
 var SelectedChoicesFillIcon = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ...props, viewBox: "0 0 14 14", children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -3625,7 +3630,7 @@ function EmptyStateIcon() {
   );
 }
 var emptyData_default = EmptyStateIcon;
-var VectorIcon = React67__namespace.default.forwardRef(
+var VectorIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
@@ -3723,7 +3728,7 @@ var PersonIcon = () => {
     }
   );
 };
-var SettingFillIcon = React67__namespace.default.forwardRef(
+var SettingFillIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3758,7 +3763,7 @@ var TradingLeftNavIcon = (props) => {
     }
   );
 };
-var VaultsIcon = React67__namespace.default.forwardRef(
+var VaultsIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "svg",
@@ -3783,7 +3788,7 @@ var VaultsIcon = React67__namespace.default.forwardRef(
 if (process.env.NODE_ENV !== "production") {
   VaultsIcon.displayName = "VaultsIcon";
 }
-var LeftNavVaultsIcon = React67.forwardRef(
+var LeftNavVaultsIcon = React68.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "svg",
@@ -3829,7 +3834,7 @@ var LeftNavVaultsIcon = React67.forwardRef(
 if (process.env.NODE_ENV !== "production") {
   LeftNavVaultsIcon.displayName = "LeftNavVaultsIcon";
 }
-var NewsFillIcon = React67__namespace.default.forwardRef(
+var NewsFillIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 1, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3843,7 +3848,7 @@ var NewsFillIcon = React67__namespace.default.forwardRef(
   }
 );
 NewsFillIcon.displayName = "NewsFillIcon";
-var BellIcon = React67__namespace.default.forwardRef(
+var BellIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -3924,7 +3929,7 @@ var ReferralSolidIcon = (props) => {
     }
   ) });
 };
-var AddCircleIcon = React67__namespace.default.forwardRef(
+var AddCircleIcon = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { className, opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4017,7 +4022,7 @@ var textVariants = tv({
     }
   }
 });
-var Text = React67__namespace.default.forwardRef((props, forwardedRef) => {
+var Text = React68__namespace.default.forwardRef((props, forwardedRef) => {
   const {
     children,
     className,
@@ -4106,7 +4111,7 @@ var isTextRule = (rule) => {
 };
 var DEFAULT_SYMBOL_FORMAT = "base-quote";
 var DEFAULT_DATE_FORMAT = "yyyy-MM-dd HH:mm:ss";
-var FormattedText = React67__namespace.default.forwardRef(
+var FormattedText = React68__namespace.default.forwardRef(
   (props, ref) => {
     const {
       rule,
@@ -4131,13 +4136,13 @@ var FormattedText = React67__namespace.default.forwardRef(
       isIcon,
       ...rest
     } = props;
-    const prefixElement = React67.useMemo(() => {
+    const prefixElement = React68.useMemo(() => {
       if (rule === "symbol" && showIcon) {
         return /* @__PURE__ */ jsxRuntime.jsx(TokenIcon, { symbol: children, size: iconSize });
       }
       return prefix;
     }, [prefix, showIcon, rule, iconSize, children]);
-    const suffix = React67.useMemo(() => {
+    const suffix = React68.useMemo(() => {
       if (typeof props.suffix !== "undefined") {
         return props.suffix;
       }
@@ -4156,7 +4161,7 @@ var FormattedText = React67__namespace.default.forwardRef(
         );
       }
     }, [props.suffix, copyable, children]);
-    const content = React67.useMemo(() => {
+    const content = React68.useMemo(() => {
       if (typeof children === "undefined") {
         return "--";
       }
@@ -4188,7 +4193,7 @@ var FormattedText = React67__namespace.default.forwardRef(
       }
       return children;
     }, [children, rule, formatString, range, symbolElement]);
-    const contentWithFix = React67.useMemo(() => {
+    const contentWithFix = React68.useMemo(() => {
       if (typeof suffix === "undefined" && typeof prefixElement === "undefined") {
         return content;
       }
@@ -4218,7 +4223,7 @@ var gradientTextVariants = tv({
     }
   }
 });
-var GradientText = React67__namespace.default.forwardRef((props, ref) => {
+var GradientText = React68__namespace.default.forwardRef((props, ref) => {
   const { color, className, angle, ...rest } = props;
   const style = parseAngleProps({ angle });
   return (
@@ -4261,7 +4266,7 @@ var Numeral = (props) => {
     ...rest
   } = props;
   const num = Number(props.children);
-  const child = React67.useMemo(() => {
+  const child = React68.useMemo(() => {
     if (props.children === "-")
       return props.children;
     if (isNaN(num))
@@ -4284,7 +4289,7 @@ var Numeral = (props) => {
     });
   }, [num, visible, tick, dp]);
   const defaultColor = rest.color || "inherit";
-  const colorName = React67.useMemo(() => {
+  const colorName = React68.useMemo(() => {
     if (!coloring)
       return defaultColor;
     if (typeof visible !== "undefined" && !visible)
@@ -4298,7 +4303,7 @@ var Numeral = (props) => {
       return "lose";
     return "profit";
   }, [coloring, num, rest.color, props.visible]);
-  const identifier = React67.useMemo(() => {
+  const identifier = React68.useMemo(() => {
     if (!showIdentifier || Number.isNaN(num) || num === 0)
       return null;
     if (typeof visible !== "undefined" && !visible)
@@ -4312,7 +4317,7 @@ var Numeral = (props) => {
       return identifiers.profit;
     return /* @__PURE__ */ jsxRuntime.jsx("span", { children: "+" });
   }, [num, props.visible, showIdentifier]);
-  const childWithUnit = React67.useMemo(() => {
+  const childWithUnit = React68.useMemo(() => {
     if (typeof suffix === "undefined" && typeof prefix === "undefined" && typeof unit === "undefined" && typeof currency === "undefined" && !showIdentifier) {
       return child;
     }
@@ -4397,7 +4402,7 @@ var statisticVariants = tv({
     // color: "default",
   }
 });
-var StatisticLabel = React67__namespace.default.forwardRef(
+var StatisticLabel = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { label: labelClassName } = statisticVariants({});
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4413,10 +4418,10 @@ var StatisticLabel = React67__namespace.default.forwardRef(
   }
 );
 StatisticLabel.displayName = "StatisticLabel";
-var Statistic = React67__namespace.default.forwardRef((props, ref) => {
+var Statistic = React68__namespace.default.forwardRef((props, ref) => {
   const { label, valueProps, align, className, classNames, children, ...rest } = props;
   const { root, value: valueClassName } = statisticVariants({ align });
-  const value = React67.useMemo(() => {
+  const value = React68.useMemo(() => {
     if (typeof children === "string" || typeof children === "number") {
       const { className: valueClass, as, ...restValueProps } = valueProps ?? {};
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4460,7 +4465,7 @@ Text2.pnl = NumTypePnl;
 Text2.notional = NumTypeNotional;
 Text2.assetValue = NumTypeAssetValue;
 Text2.collateral = NumTypeCollateral;
-var BaseInput = React67.forwardRef(
+var BaseInput = React68.forwardRef(
   (props, ref) => {
     const {
       clearable,
@@ -4477,14 +4482,14 @@ var BaseInput = React67.forwardRef(
       value,
       ...inputProps
     } = props;
-    const [cursor, setCursor] = React67.useState(null);
-    const innerInputRef = React67.useRef(null);
-    const prevInputValue = React67.useRef(null);
-    const isFocused = React67.useRef(false);
-    const innerFormatters = React67.useMemo(() => {
+    const [cursor, setCursor] = React68.useState(null);
+    const innerInputRef = React68.useRef(null);
+    const prevInputValue = React68.useRef(null);
+    const isFocused = React68.useRef(false);
+    const innerFormatters = React68.useMemo(() => {
       return formatters ?? [];
     }, [formatters]);
-    React67.useEffect(() => {
+    React68.useEffect(() => {
       if (!ref)
         return;
       if (typeof ref === "function") {
@@ -4493,7 +4498,7 @@ var BaseInput = React67.forwardRef(
         ref.current = innerInputRef.current;
       }
     }, [innerInputRef, ref]);
-    const formatToRender = React67.useCallback(
+    const formatToRender = React68.useCallback(
       (value2) => {
         if (!Array.isArray(innerFormatters) || innerFormatters.length === 0)
           return value2;
@@ -4510,7 +4515,7 @@ var BaseInput = React67.forwardRef(
       },
       [innerFormatters]
     );
-    const formatToChange = React67.useCallback(
+    const formatToChange = React68.useCallback(
       (value2, originValue) => {
         if (!Array.isArray(innerFormatters) || innerFormatters.length === 0)
           return value2;
@@ -4528,12 +4533,12 @@ var BaseInput = React67.forwardRef(
       },
       [innerFormatters]
     );
-    const formattedValue = React67.useMemo(() => {
+    const formattedValue = React68.useMemo(() => {
       if (typeof value === "undefined" || value === null)
         return "";
       return formatToRender(value);
     }, [value, formatToRender]);
-    React67.useEffect(() => {
+    React68.useEffect(() => {
       if (document.activeElement !== innerInputRef.current)
         return;
       const nextValueLen = `${formattedValue}`.length;
@@ -4756,7 +4761,7 @@ var inputVariants = tv(
     responsiveVariants: ["md", "lg"]
   }
 );
-var Input = React67__namespace.default.forwardRef((props, ref) => {
+var Input = React68__namespace.default.forwardRef((props, ref) => {
   const {
     size,
     disabled,
@@ -4783,7 +4788,7 @@ var Input = React67__namespace.default.forwardRef((props, ref) => {
     pl: typeof prefix === "undefined" || pl,
     pr: typeof suffix === "undefined" || pr
   });
-  const cid = React67.useId();
+  const cid = React68.useId();
   const suffixElement = typeof onClear !== "undefined" ? /* @__PURE__ */ jsxRuntime.jsx(
     ClearButton,
     {
@@ -4827,7 +4832,7 @@ var Input = React67__namespace.default.forwardRef((props, ref) => {
     )
   ] });
 });
-var ClearButton = React67__namespace.default.forwardRef((props, ref) => {
+var ClearButton = React68__namespace.default.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -4888,7 +4893,7 @@ var popoverVariants = tv({
 var PopoverRoot = PopoverPrimitive__namespace.Root;
 var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
 var PopoverAnchor = PopoverPrimitive__namespace.Anchor;
-var PopoverContent = React67__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+var PopoverContent = React68__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
   PopoverPrimitive__namespace.Content,
   {
     ref,
@@ -4939,7 +4944,7 @@ var scrollAreaVariants = tv({
     }
   }
 });
-var ScrollArea = React67__namespace.default.forwardRef((oriProps, ref) => {
+var ScrollArea = React68__namespace.default.forwardRef((oriProps, ref) => {
   const {
     className,
     classNames,
@@ -4969,7 +4974,7 @@ var ScrollArea = React67__namespace.default.forwardRef((oriProps, ref) => {
   );
 });
 ScrollArea.displayName = ScrollAreaPrimitive__namespace.Root.displayName;
-var ScrollBar = React67__namespace.default.forwardRef((oriProps, ref) => {
+var ScrollBar = React68__namespace.default.forwardRef((oriProps, ref) => {
   const { className, orientation = "vertical", ...props } = oriProps;
   const { bar, tumb } = scrollAreaVariants({ className, orientation });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -5142,7 +5147,7 @@ var selectVariants = tv(
 var SelectRoot = SelectPrimitive__namespace.Root;
 var SelectGroup = SelectPrimitive__namespace.Group;
 var SelectValue = SelectPrimitive__namespace.Value;
-var SelectTrigger = React67__namespace.forwardRef(
+var SelectTrigger = React68__namespace.forwardRef(
   ({
     className,
     children,
@@ -5196,7 +5201,7 @@ var SelectTrigger = React67__namespace.forwardRef(
   }
 );
 SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
-var SelectScrollUpButton = React67__namespace.forwardRef(({ className, ...props }, ref) => {
+var SelectScrollUpButton = React68__namespace.forwardRef(({ className, ...props }, ref) => {
   const { scrollUpButton } = selectVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.ScrollUpButton,
@@ -5209,7 +5214,7 @@ var SelectScrollUpButton = React67__namespace.forwardRef(({ className, ...props
   );
 });
 SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
-var SelectScrollDownButton = React67__namespace.forwardRef(({ className, ...props }, ref) => {
+var SelectScrollDownButton = React68__namespace.forwardRef(({ className, ...props }, ref) => {
   const { scrollDownButton } = selectVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.ScrollDownButton,
@@ -5222,7 +5227,7 @@ var SelectScrollDownButton = React67__namespace.forwardRef(({ className, ...prop
   );
 });
 SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
-var SelectContent = React67__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => {
+var SelectContent = React68__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,
@@ -5236,7 +5241,7 @@ var SelectContent = React67__namespace.forwardRef(({ className, children, positi
   ) });
 });
 SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
-var SelectLabel = React67__namespace.forwardRef(({ className, ...props }, ref) => {
+var SelectLabel = React68__namespace.forwardRef(({ className, ...props }, ref) => {
   const { label } = selectVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.Label,
@@ -5248,12 +5253,12 @@ var SelectLabel = React67__namespace.forwardRef(({ className, ...props }, ref) =
   );
 });
 SelectLabel.displayName = SelectPrimitive__namespace.Label.displayName;
-var SelectItem = React67__namespace.forwardRef(({ className, children, size, ...props }, ref) => {
+var SelectItem = React68__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 = React67__namespace.forwardRef(({ className, ...props }, ref) => {
+var SelectSeparator = React68__namespace.forwardRef(({ className, ...props }, ref) => {
   const { separator } = selectVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.Separator,
@@ -5267,17 +5272,17 @@ var SelectSeparator = React67__namespace.forwardRef(({ className, ...props }, re
 SelectSeparator.displayName = SelectPrimitive__namespace.Separator.displayName;
 var CombineSelect = (props) => {
   const { options, variant, valueFormatter, ...rest } = props;
-  const [keyword, setKeyword] = React67.useState("");
-  const [value, setValue] = React67.useState(props.value ?? "");
+  const [keyword, setKeyword] = React68.useState("");
+  const [value, setValue] = React68.useState(props.value ?? "");
   const { trigger } = selectVariants({
     size: props.size,
     variant
   });
-  const [selectedIndex, setSelectedIndex] = React67.useState(
+  const [selectedIndex, setSelectedIndex] = React68.useState(
     () => typeof props.value === "undefined" ? -1 : options.findIndex((option) => option.value === props.value)
   );
-  const [focused, setFocused] = React67.useState(false);
-  const inputRef = React67.useRef(null);
+  const [focused, setFocused] = React68.useState(false);
+  const inputRef = React68.useRef(null);
   const onFocus = () => {
     setFocused(true);
   };
@@ -5447,7 +5452,7 @@ var SelectWithOptions = (props) => {
     ...rest
   } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(Select, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(SelectGroup, { children: options.map((option, index) => {
-    return React67__namespace.default.cloneElement(optionRenderer(option, currentValue), {
+    return React68__namespace.default.cloneElement(optionRenderer(option, currentValue), {
       size: props.size,
       key: index,
       index
@@ -5457,7 +5462,7 @@ var SelectWithOptions = (props) => {
 var TokenSelect = (props) => {
   const { tokens, showIcon = true, iconSize, showCaret, ...rest } = props;
   const { icon } = selectVariants();
-  const options = React67.useMemo(() => {
+  const options = React68.useMemo(() => {
     return tokens.map((token) => {
       return {
         ...token,
@@ -5533,16 +5538,16 @@ var Select2 = Select;
 Select2.options = SelectWithOptions;
 Select2.combine = CombineSelect;
 Select2.tokens = TokenSelect;
-var QuantityInput = React67.forwardRef(
+var QuantityInput = React68.forwardRef(
   (props, ref) => {
     const { tokens, ...rest } = props;
-    const [token, setToken] = React67.useState(tokens[0]);
-    const tokenOptions = React67.useMemo(() => {
+    const [token, setToken] = React68.useState(tokens[0]);
+    const tokenOptions = React68.useMemo(() => {
       return props.tokens.map((token2) => ({
         name: token2
       }));
     }, [props.tokens]);
-    const inputRef = React67.useRef(null);
+    const inputRef = React68.useRef(null);
     return /* @__PURE__ */ jsxRuntime.jsx(
       Input,
       {
@@ -5608,7 +5613,7 @@ var tooltipVariants = tv({
     "data-[side=top]:oui-slide-in-from-bottom-2"
   ]
 });
-var TooltipContent = React67__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
+var TooltipContent = React68__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     TooltipPrimitive__namespace.Content,
     {
@@ -5639,7 +5644,7 @@ var TooltipArrow = (props) => {
     }
   );
 };
-var Tooltip = React67__namespace.forwardRef((originalProps, ref) => {
+var Tooltip = React68__namespace.forwardRef((originalProps, ref) => {
   const {
     children,
     content,
@@ -5671,10 +5676,10 @@ var Tooltip = React67__namespace.forwardRef((originalProps, ref) => {
   );
 });
 Tooltip.displayName = "Tooltip";
-var InputWithTooltip = React67.forwardRef((props, ref) => {
+var InputWithTooltip = React68.forwardRef((props, ref) => {
   const { tooltip, tooltipProps, triggerClassName, ...inputProps } = props;
-  const [open, setOpen] = React67.useState(false);
-  React67.useEffect(() => {
+  const [open, setOpen] = React68.useState(false);
+  React68.useEffect(() => {
     if (typeof tooltip !== "undefined" && tooltip !== "" && tooltip !== null) {
       setOpen(true);
     } else {
@@ -5889,7 +5894,7 @@ var inputHelpTextVariants = tailwindVariants.tv({
     }
   }
 });
-var InputHelpText = React67__namespace.default.forwardRef(
+var InputHelpText = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { className, asChild, color, ...rest } = props;
     const Comp = asChild ? reactSlot.Slot : "div";
@@ -5927,7 +5932,7 @@ var textFieldVariants = tv({
     direction: "column"
   }
 });
-var TextField = React67__namespace.default.forwardRef((props, ref) => {
+var TextField = React68__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: [
@@ -5945,7 +5950,7 @@ var TextField = React67__namespace.default.forwardRef((props, ref) => {
   ] });
 });
 TextField.displayName = "TextField";
-var InputLabel = React67__namespace.default.forwardRef(
+var InputLabel = React68__namespace.default.forwardRef(
   (props, ref) => {
     const { asChild = false, className, ...rest } = props;
     const Comp = asChild ? reactSlot.Slot : "label";
@@ -5997,7 +6002,7 @@ var checkboxVariants = tailwindVariants.tv({
     // style: "checkBox",
   }
 });
-var Checkbox = React67__namespace.forwardRef(({ className, color = "white", variant = "checkBox", ...props }, ref) => {
+var Checkbox = React68__namespace.forwardRef(({ className, color = "white", variant = "checkBox", ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     CheckboxPrimitive__namespace.Root,
     {
@@ -6125,7 +6130,7 @@ var switchVariants = tailwindVariants.tv({
     color: "primary"
   }
 });
-var Switch = React67__namespace.default.forwardRef(({ className, color, ...props }, ref) => {
+var Switch = React68__namespace.default.forwardRef(({ className, color, ...props }, ref) => {
   const { root, thumb } = switchVariants({
     className,
     color
@@ -6246,7 +6251,7 @@ function Badge({ className, variant, color, size, ...props }) {
     }
   );
 }
-var Logo = React67__namespace.default.forwardRef(({ src, alt, href }, ref) => {
+var Logo = React68__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",
     {
@@ -6259,8 +6264,8 @@ var Logo = React67__namespace.default.forwardRef(({ src, alt, href }, ref) => {
 Logo.displayName = "LogoElement";
 function useInit(params) {
   const { dataSource, loading, ignoreLoadingCheck } = params;
-  const [initialized, setInitialized] = React67.useState(false);
-  React67.useEffect(() => {
+  const [initialized, setInitialized] = React68.useState(false);
+  React68.useEffect(() => {
     if (initialized)
       return;
     if (ignoreLoadingCheck || loading || Array.isArray(dataSource)) {
@@ -6270,10 +6275,10 @@ function useInit(params) {
   return initialized;
 }
 function useScroll(deps) {
-  const scrollRef = React67.useRef(null);
-  const [showLeftShadow, setShowLeftShadow] = React67.useState(false);
-  const [showRightShadow, setShowRightShadow] = React67.useState(false);
-  React67.useEffect(() => {
+  const scrollRef = React68.useRef(null);
+  const [showLeftShadow, setShowLeftShadow] = React68.useState(false);
+  const [showRightShadow, setShowRightShadow] = React68.useState(false);
+  React68.useEffect(() => {
     if (!scrollRef.current) {
       return;
     }
@@ -6282,7 +6287,7 @@ function useScroll(deps) {
       setShowRightShadow(!isScrolledToRight(scrollRef.current));
     });
   }, [scrollRef]);
-  React67.useEffect(() => {
+  React68.useEffect(() => {
     if (!scrollRef.current) {
       return;
     }
@@ -6304,14 +6309,14 @@ function hasHorizontalScroll(element) {
 }
 function useShowHeader(params) {
   const { dataSource, loading } = params;
-  const initShowHeader = React67.useRef(false);
-  const showHeader = React67.useMemo(() => {
+  const initShowHeader = React68.useRef(false);
+  const showHeader = React68.useMemo(() => {
     if (loading && !dataSource?.length) {
       return initShowHeader.current;
     }
     return !!dataSource?.length;
   }, [loading, dataSource]);
-  React67.useEffect(() => {
+  React68.useEffect(() => {
     if (showHeader) {
       initShowHeader.current = true;
     }
@@ -6320,8 +6325,8 @@ function useShowHeader(params) {
 }
 function useShowPagination(params) {
   const { loading, dataSource, pagination, rows } = params;
-  const initShowPagination = React67.useRef(false);
-  const showPagination = React67.useMemo(() => {
+  const initShowPagination = React68.useRef(false);
+  const showPagination = React68.useMemo(() => {
     if (loading && !dataSource?.length) {
       return initShowPagination.current;
     }
@@ -6330,7 +6335,7 @@ function useShowPagination(params) {
     }
     return false;
   }, [loading, pagination, dataSource, rows]);
-  React67.useEffect(() => {
+  React68.useEffect(() => {
     if (showPagination) {
       initShowPagination.current = true;
     }
@@ -6339,7 +6344,7 @@ function useShowPagination(params) {
 }
 function useSort(props) {
   const { onSort, initialSort } = props;
-  const [sorting, setSorting] = React67.useState(
+  const [sorting, setSorting] = React68.useState(
     initialSort ? [
       {
         id: initialSort.sortKey,
@@ -6347,15 +6352,15 @@ function useSort(props) {
       }
     ] : []
   );
-  React67.useEffect(() => {
+  React68.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 = React67.useRef(null);
-  React67.useEffect(() => {
+  const wrapRef = React68.useRef(null);
+  React68.useEffect(() => {
     if (!wrapRef.current)
       return;
     const bgColor = window.getComputedStyle(wrapRef.current).backgroundColor;
@@ -6449,7 +6454,7 @@ var TableBody = (props) => {
             children: props.expandRowRender?.(row, row.index)
           }
         ) });
-        const rowView = /* @__PURE__ */ jsxRuntime.jsxs(React67.Fragment, { children: [
+        const rowView = /* @__PURE__ */ jsxRuntime.jsxs(React68.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "tr",
             {
@@ -6510,7 +6515,7 @@ var TableBody = (props) => {
           expandView
         ] }, row.id);
         if (typeof props.renderRowContainer === "function") {
-          return /* @__PURE__ */ jsxRuntime.jsx(React67.Fragment, { children: props.renderRowContainer(row.original, row.index, rowView, row) }, row.id);
+          return /* @__PURE__ */ jsxRuntime.jsx(React68.Fragment, { children: props.renderRowContainer(row.original, row.index, rowView, row) }, row.id);
         }
         return rowView;
       })
@@ -6597,7 +6602,7 @@ var DescendingIcon = () => {
 };
 function useMultiSort(props) {
   const { onSort, currentSorting } = props;
-  const handleFieldSort = React67.useCallback(
+  const handleFieldSort = React68.useCallback(
     (fieldKey) => {
       const isCurrentField = currentSorting?.sortKey === fieldKey;
       let newOrder;
@@ -6612,7 +6617,7 @@ function useMultiSort(props) {
     },
     [currentSorting, onSort]
   );
-  const getFieldSort = React67.useCallback(
+  const getFieldSort = React68.useCallback(
     (fieldKey) => {
       if (currentSorting?.sortKey === fieldKey) {
         return { sortKey: fieldKey, sort: currentSorting.sort };
@@ -6768,9 +6773,9 @@ var SortIndicator2 = ({ isSorted }) => {
     desc: /* @__PURE__ */ jsxRuntime.jsx(DescendingIcon, {})
   }[isSorted] || /* @__PURE__ */ jsxRuntime.jsx(SortingIcon2, {});
 };
-var LocaleContext = React67.createContext(void 0);
+var LocaleContext = React68.createContext(void 0);
 var LocaleProvider = (props) => {
-  const value = React67.useMemo(
+  const value = React68.useMemo(
     () => ({ ...props.locale, exist: true }),
     [props.locale]
   );
@@ -6801,8 +6806,8 @@ var localeValues = {
 
 // src/locale/useLocale.ts
 var useLocale = (componentName, defaultLocale) => {
-  const fullLocale = React67.useContext(LocaleContext);
-  const getLocale = React67.useMemo(() => {
+  const fullLocale = React68.useContext(LocaleContext);
+  const getLocale = React68.useMemo(() => {
     const locale = defaultLocale || localeValues[componentName];
     const localeFromContext = fullLocale?.[componentName] || {};
     return {
@@ -6810,7 +6815,7 @@ var useLocale = (componentName, defaultLocale) => {
       ...localeFromContext
     };
   }, [componentName, defaultLocale, fullLocale]);
-  const getLocaleCode = React67.useMemo(() => {
+  const getLocaleCode = React68.useMemo(() => {
     const localeCode = fullLocale?.locale;
     const defaultLocaleCode = localeValues.locale;
     return localeCode || defaultLocaleCode;
@@ -6830,7 +6835,7 @@ var Pagination = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   }
 );
 Pagination.displayName = "Pagination";
-var PaginationContent = React67__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var PaginationContent = React68__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "ul",
   {
     ref,
@@ -6842,7 +6847,7 @@ var PaginationContent = React67__namespace.default.forwardRef(({ className, ...p
   }
 ));
 PaginationContent.displayName = "PaginationContent";
-var PaginationItem = React67__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("li", { ref, className: tailwindVariants.cnBase("oui-leading-[0px]", className), ...props }));
+var PaginationItem = React68__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,
@@ -6974,7 +6979,7 @@ var PaginationItems = (props) => {
   if (totalPages <= 1) {
     return null;
   }
-  const pageNumbers = React67.useMemo(() => {
+  const pageNumbers = React68.useMemo(() => {
     if (typeof props.generatePageNumbers === "function") {
       return props.generatePageNumbers(currentPage, totalPages);
     }
@@ -7143,7 +7148,7 @@ var useExtensionBuilder = (position, props) => {
 var ExtensionSlot = (props) => {
   const { position, scope, defaultWidget: defaultValue, ...rest } = props;
   const elementProps = useExtensionBuilder(position, rest);
-  const Ele = React67.useMemo(() => {
+  const Ele = React68.useMemo(() => {
     const registry = OrderlyExtensionRegistry.getInstance();
     const plugin = registry.getPluginsByPosition(position);
     return plugin?.render ?? defaultValue ?? NotFound;
@@ -7391,10 +7396,10 @@ function DataTable(props) {
     onSort,
     initialSort
   });
-  const hasMultiSortColumns = React67.useMemo(() => {
+  const hasMultiSortColumns = React68.useMemo(() => {
     return columns.some((col) => col.multiSort && !col.multiSort.onSort);
   }, [columns]);
-  const effectiveManualSorting = React67.useMemo(() => {
+  const effectiveManualSorting = React68.useMemo(() => {
     if (!hasMultiSortColumns) {
       return manualSorting;
     }
@@ -7408,27 +7413,27 @@ function DataTable(props) {
     }
     return false;
   }, [hasMultiSortColumns, manualSorting, sorting, columns]);
-  const dataSource = React67.useMemo(() => {
+  const dataSource = React68.useMemo(() => {
     return Transform.dataSource(props.dataSource || [], columns, sorting);
   }, [props.dataSource, columns, sorting]);
-  const formatColumns = React67.useMemo(
+  const formatColumns = React68.useMemo(
     () => Transform.columns(columns, sorting, setSorting),
     [columns, sorting, setSorting]
   );
-  const columnPinning = React67.useMemo(
+  const columnPinning = React68.useMemo(
     () => Transform.columnPinning(columns),
     [columns]
   );
-  const rowSelection = React67.useMemo(
+  const rowSelection = React68.useMemo(
     () => props.rowSelection || {},
     [props.rowSelection]
   );
-  const { state: paginationState, config: paginationConfig } = React67.useMemo(
+  const { state: paginationState, config: paginationConfig } = React68.useMemo(
     () => Transform.pagination(pagination),
     [pagination]
   );
   const initialized = useInit({ dataSource, loading, ignoreLoadingCheck });
-  const columnFilters = React67.useMemo(() => {
+  const columnFilters = React68.useMemo(() => {
     return Array.isArray(props.columnFilters) ? props.columnFilters : props.columnFilters ? [props.columnFilters] : [];
   }, [props.columnFilters]);
   const table = reactTable.useReactTable({
@@ -7464,7 +7469,7 @@ function DataTable(props) {
     ...paginationConfig
     // ...sortConfig,
   });
-  React67.useEffect(() => {
+  React68.useEffect(() => {
     props.getTableInstance?.(table);
   }, [table]);
   const wrapRef = useWrap([className, classNames?.root]);
@@ -7655,15 +7660,15 @@ var DateRangePicker = (props) => {
     ...calendarProps
   } = props;
   const [locale] = useLocale("picker");
-  const [open, setOpen] = React67.useState(false);
-  const [dateRange, setDateRange] = React67.useState(
+  const [open, setOpen] = React68.useState(false);
+  const [dateRange, setDateRange] = React68.useState(
     value || initialValue || null
   );
-  const [isMobileView, setIsMobileView] = React67.useState(false);
+  const [isMobileView, setIsMobileView] = React68.useState(false);
   const update = useDebouncedCallback((width) => {
     setIsMobileView(width <= 768);
   }, 100);
-  React67.useEffect(() => {
+  React68.useEffect(() => {
     const handleResize = () => {
       update(window.innerWidth);
     };
@@ -7673,12 +7678,12 @@ var DateRangePicker = (props) => {
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  React67.useEffect(() => {
+  React68.useEffect(() => {
     if (value?.from && value?.to && dateRange?.from && dateRange?.to && !areDatesEqual(value, dateRange))
       setDateRange(value);
   }, [value]);
   const { trigger } = selectVariants({ size, className });
-  const formattedValue = React67.useMemo(() => {
+  const formattedValue = React68.useMemo(() => {
     if (!dateRange || !dateRange.from || !dateRange.to) {
       return placeholder ?? locale.selectDate;
     }
@@ -7754,8 +7759,8 @@ var DateRangePicker = (props) => {
 };
 DateRangePicker.displayName = "DateRangePicker";
 function useDebouncedCallback(callback, delay) {
-  const timeoutRef = React67.useRef(null);
-  const debouncedCallback = React67.useCallback(
+  const timeoutRef = React68.useRef(null);
+  const debouncedCallback = React68.useCallback(
     (args) => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
@@ -7792,8 +7797,8 @@ var DatePicker = (props) => {
   } = props;
   const [locale] = useLocale("picker");
   const { trigger } = selectVariants({ size, className });
-  const [open, setOpen] = React67.useState(false);
-  const formattedValue = React67.useMemo(() => {
+  const [open, setOpen] = React68.useState(false);
+  const formattedValue = React68.useMemo(() => {
     if (typeof value === "undefined") {
       return placeholder ?? locale.selectDate;
     }
@@ -7842,7 +7847,7 @@ var Sheet = DialogPrimitive__namespace.Root;
 var SheetTrigger = DialogPrimitive__namespace.Trigger;
 var SheetClose = DialogPrimitive__namespace.Close;
 var SheetPortal = DialogPrimitive__namespace.Portal;
-var SheetOverlay = React67__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SheetOverlay = React68__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Overlay,
   {
     className: tailwindVariants.cnBase(
@@ -7868,7 +7873,7 @@ var sheetVariants = tailwindVariants.tv({
     side: "bottom"
   }
 });
-var SheetContent = React67__namespace.forwardRef(
+var SheetContent = React68__namespace.forwardRef(
   ({
     side = "bottom",
     closeable = true,
@@ -7964,7 +7969,7 @@ var SheetFooter = ({
   }
 );
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React67__namespace.forwardRef(({ className, leading, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var SheetTitle = React68__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",
@@ -7985,7 +7990,7 @@ var SheetTitle = React67__namespace.forwardRef(({ className, leading, ...props }
   }
 ));
 SheetTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var SheetDescription = React67__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SheetDescription = React68__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Description,
   {
     ref,
@@ -8011,8 +8016,8 @@ var getModalId = (modal2) => {
   return modal2[symModalId];
 };
 function useModal(modal2, args) {
-  const modals = React67.useContext(ModalContext);
-  const modalIdFromContext = React67.useContext(ModalIdContext);
+  const modals = React68.useContext(ModalContext);
+  const modalIdFromContext = React68.useContext(ModalIdContext);
   let modalId;
   let isComponent = modal2 && typeof modal2 !== "string";
   if (!modal2) {
@@ -8024,19 +8029,19 @@ function useModal(modal2, args) {
     throw new Error("modalId is required");
   }
   const id = modalId;
-  React67.useEffect(() => {
+  React68.useEffect(() => {
     if (isComponent) {
       register(id, modal2, args);
     }
   }, [isComponent, modalId, modal2, args]);
   const modalInfo = modals[id];
-  const show2 = React67.useCallback(
+  const show2 = React68.useCallback(
     (args2) => modalActions.show(id, args2),
     [id]
   );
-  const hide2 = React67.useCallback(() => modalActions.hide(id), [id]);
-  const remove2 = React67.useCallback(() => modalActions.remove(id), [id]);
-  const onOpenChange = React67.useCallback(
+  const hide2 = React68.useCallback(() => modalActions.hide(id), [id]);
+  const remove2 = React68.useCallback(() => modalActions.remove(id), [id]);
+  const onOpenChange = React68.useCallback(
     (isOpen) => {
       if (!isOpen) {
         reject("cancel");
@@ -8045,33 +8050,33 @@ function useModal(modal2, args) {
     },
     [id]
   );
-  const setStates2 = React67.useCallback(
+  const setStates2 = React68.useCallback(
     (states) => {
       modalActions.setStates(id, states);
     },
     [id]
   );
-  const updateArgs2 = React67.useCallback(
+  const updateArgs2 = React68.useCallback(
     (args2) => {
       modalActions.updateArgs(id, args2);
     },
     [id]
   );
-  const resolve = React67.useCallback(
+  const resolve = React68.useCallback(
     (args2) => {
       modalCallbacks[id]?.resolve(args2);
       delete modalCallbacks[id];
     },
     [id]
   );
-  const reject = React67.useCallback(
+  const reject = React68.useCallback(
     (args2) => {
       modalCallbacks[id]?.reject(args2);
       delete modalCallbacks[id];
     },
     [id]
   );
-  const resolveHide = React67.useCallback((args2) => {
+  const resolveHide = React68.useCallback((args2) => {
     hideModalCallbacks[id]?.resolve(args2);
     delete hideModalCallbacks[id];
   }, []);
@@ -8105,9 +8110,9 @@ var MODAL_REGISTRY = /* @__PURE__ */ new Map();
 var create = (Comp) => {
   return ({ id, defaultVisible, keepMounted, ...props }) => {
     const { args, show: show2 } = useModal(id);
-    const modals = React67.useContext(ModalContext);
+    const modals = React68.useContext(ModalContext);
     const shouldMount = !!modals[id];
-    React67.useEffect(() => {
+    React68.useEffect(() => {
       if (defaultVisible) {
         show2();
       }
@@ -8118,12 +8123,12 @@ var create = (Comp) => {
         }
       };
     }, [id, show2, defaultVisible]);
-    React67.useEffect(() => {
+    React68.useEffect(() => {
       if (keepMounted)
         modalActions.setStates(id, { keepMounted: true });
     }, [id, keepMounted]);
     const delayVisible = modals[id]?.delayVisible;
-    React67.useEffect(() => {
+    React68.useEffect(() => {
       if (delayVisible) {
         show2(args);
       }
@@ -8145,8 +8150,8 @@ var unregister = (id) => {
 };
 var initialState = {};
 var ALREADY_MOUNTED = {};
-var ModalContext = React67.createContext(initialState);
-var ModalIdContext = React67.createContext(null);
+var ModalContext = React68.createContext(initialState);
+var ModalIdContext = React68.createContext(null);
 var modalCallbacks = {};
 var hideModalCallbacks = {};
 var dispatch = () => {
@@ -8255,7 +8260,7 @@ var reducer = (state, action) => {
   }
 };
 var ModalContainer = () => {
-  const modals = React67.useContext(ModalContext);
+  const modals = React68.useContext(ModalContext);
   const visibleModalIds = Object.keys(modals).filter((id) => !!modals[id]);
   visibleModalIds.forEach((id) => {
     if (!MODAL_REGISTRY.has(id) && !ALREADY_MOUNTED[id]) {
@@ -8274,7 +8279,7 @@ var ModalContainer = () => {
   }) });
 };
 var ModalProvider = (props) => {
-  const [state, dispatchOrigin] = React67.useReducer(reducer, initialState);
+  const [state, dispatchOrigin] = React68.useReducer(reducer, initialState);
   dispatch = dispatchOrigin;
   return /* @__PURE__ */ jsxRuntime.jsxs(ModalContext.Provider, { value: state, children: [
     props.children,
@@ -8378,7 +8383,7 @@ var dividerVariants = tv({
     intensity: 4
   }
 });
-var Divider = React67__namespace.default.forwardRef((props, ref) => {
+var Divider = React68__namespace.default.forwardRef((props, ref) => {
   const { className, intensity, direction, lineStyle, mx, my, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -8586,7 +8591,7 @@ var Dialog = DialogPrimitive__namespace.Root;
 var DialogTrigger = DialogPrimitive__namespace.Trigger;
 var DialogPortal = DialogPrimitive__namespace.Portal;
 var DialogClose = DialogPrimitive__namespace.Close;
-var DialogOverlay = React67__namespace.forwardRef(({ className, ...props }, ref) => {
+var DialogOverlay = React68__namespace.forwardRef(({ className, ...props }, ref) => {
   const { overlay } = dialogVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Overlay,
@@ -8598,7 +8603,7 @@ var DialogOverlay = React67__namespace.forwardRef(({ className, ...props }, ref)
   );
 });
 DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
-var DialogContent = React67__namespace.forwardRef(
+var DialogContent = React68__namespace.forwardRef(
   ({
     overlyClassName,
     className,
@@ -8660,7 +8665,7 @@ var DialogFooter = ({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: footer({ className }), ...props });
 };
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React67__namespace.forwardRef(({ className, ...props }, ref) => {
+var DialogTitle = React68__namespace.forwardRef(({ className, ...props }, ref) => {
   const { title } = dialogVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Title,
@@ -8672,7 +8677,7 @@ var DialogTitle = React67__namespace.forwardRef(({ className, ...props }, ref) =
   );
 });
 DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var DialogDescription = React67__namespace.forwardRef(({ className, ...props }, ref) => {
+var DialogDescription = React68__namespace.forwardRef(({ className, ...props }, ref) => {
   const { desc } = dialogVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Description,
@@ -8686,10 +8691,10 @@ var DialogDescription = React67__namespace.forwardRef(({ className, ...props },
 DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
 var SimpleDialogFooter = (props) => {
   const { actions } = props;
-  const [primaryLoading, setPrimaryLoading] = React67.useState(
+  const [primaryLoading, setPrimaryLoading] = React68.useState(
     actions?.primary?.loading ?? false
   );
-  React67.useEffect(() => {
+  React68.useEffect(() => {
     if (actions?.primary?.loading) {
       setPrimaryLoading(actions?.primary?.loading);
     }
@@ -8699,7 +8704,7 @@ var SimpleDialogFooter = (props) => {
   }, [actions?.primary?.loading]);
   if (!actions)
     return null;
-  const buttons = React67.useMemo(() => {
+  const buttons = React68.useMemo(() => {
     const buttons2 = [];
     if (actions.secondary && typeof actions.secondary.onClick === "function") {
       const {
@@ -8799,11 +8804,11 @@ function useMediaQuery(query) {
     }
     return false;
   };
-  const [matches, setMatches] = React67.useState(getMatches(query));
+  const [matches, setMatches] = React68.useState(getMatches(query));
   function handleChange() {
     setMatches(getMatches(query));
   }
-  React67.useEffect(() => {
+  React68.useEffect(() => {
     const matchMedia = window?.matchMedia(query);
     handleChange();
     if (matchMedia?.addListener) {
@@ -8831,7 +8836,7 @@ function useScreen() {
   };
 }
 function useObserverElement(element, callback) {
-  React67.useEffect(() => {
+  React68.useEffect(() => {
     if (!element) {
       return;
     }
@@ -8847,11 +8852,11 @@ function useObserverElement(element, callback) {
   }, [element]);
 }
 function useLongPress(callback, longPressTime = 600) {
-  const timeoutRef = React67.useRef(null);
-  const targetRef = React67.useRef(null);
-  const startPositionRef = React67.useRef(null);
-  const isLongPressTriggeredRef = React67.useRef(false);
-  const clearLongPress = React67.useCallback(() => {
+  const timeoutRef = React68.useRef(null);
+  const targetRef = React68.useRef(null);
+  const startPositionRef = React68.useRef(null);
+  const isLongPressTriggeredRef = React68.useRef(false);
+  const clearLongPress = React68.useCallback(() => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
@@ -8860,7 +8865,7 @@ function useLongPress(callback, longPressTime = 600) {
     startPositionRef.current = null;
     isLongPressTriggeredRef.current = false;
   }, []);
-  const startLongPress = React67.useCallback(
+  const startLongPress = React68.useCallback(
     (e) => {
       clearLongPress();
       if ("touches" in e) {
@@ -8881,7 +8886,7 @@ function useLongPress(callback, longPressTime = 600) {
     },
     [callback, longPressTime, clearLongPress]
   );
-  const handleMouseDown = React67.useCallback(
+  const handleMouseDown = React68.useCallback(
     (e) => {
       if (e.button !== 0)
         return;
@@ -8889,10 +8894,10 @@ function useLongPress(callback, longPressTime = 600) {
     },
     [startLongPress]
   );
-  const handleMouseUp = React67.useCallback(() => {
+  const handleMouseUp = React68.useCallback(() => {
     clearLongPress();
   }, [clearLongPress]);
-  const handleMouseMove = React67.useCallback(
+  const handleMouseMove = React68.useCallback(
     (e) => {
       if (isLongPressTriggeredRef.current)
         return;
@@ -8907,25 +8912,25 @@ function useLongPress(callback, longPressTime = 600) {
     },
     [clearLongPress]
   );
-  const handleMouseLeave = React67.useCallback(() => {
+  const handleMouseLeave = React68.useCallback(() => {
     clearLongPress();
   }, [clearLongPress]);
-  const handleContextMenu = React67.useCallback((e) => {
+  const handleContextMenu = React68.useCallback((e) => {
     if (timeoutRef.current || isLongPressTriggeredRef.current) {
       e.preventDefault();
       e.stopPropagation();
     }
   }, []);
-  const handleTouchStart = React67.useCallback(
+  const handleTouchStart = React68.useCallback(
     (e) => {
       startLongPress(e);
     },
     [startLongPress]
   );
-  const handleTouchEnd = React67.useCallback(() => {
+  const handleTouchEnd = React68.useCallback(() => {
     clearLongPress();
   }, [clearLongPress]);
-  const handleTouchMove = React67.useCallback(
+  const handleTouchMove = React68.useCallback(
     (e) => {
       if (timeoutRef.current) {
         e.preventDefault();
@@ -8947,7 +8952,7 @@ function useLongPress(callback, longPressTime = 600) {
     },
     [clearLongPress]
   );
-  const handleTouchCancel = React67.useCallback(() => {
+  const handleTouchCancel = React68.useCallback(() => {
     clearLongPress();
   }, [clearLongPress]);
   return {
@@ -8977,7 +8982,7 @@ var AlertDialog = (props) => {
     classNames
   } = props;
   const { isMobile } = useScreen();
-  const actions = React67.useMemo(() => {
+  const actions = React68.useMemo(() => {
     if (typeof onOk !== "function" && typeof onCancel !== "function")
       return void 0;
     const actions2 = {};
@@ -9030,7 +9035,7 @@ var AlertDialog = (props) => {
 var CreatedAlertDialog = create((props) => {
   const { onOk } = props;
   const { visible, hide: hide2, resolve, reject, onOpenChange } = useModal();
-  const onOkHandler = React67.useCallback(() => {
+  const onOkHandler = React68.useCallback(() => {
     return Promise.resolve().then(onOk).then(hide2);
   }, [onOk]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -9247,14 +9252,14 @@ function registerSimpleSheet(id, comp, props) {
 }
 var ActionItem = (props) => {
   const { action } = props;
-  const onItemClick = React67.useCallback(() => {
+  const onItemClick = React68.useCallback(() => {
     if (typeof action.onClick === "function") {
       action.onClick(action);
     } else {
       props.onClick?.({ ...action, index: props.index });
     }
   }, [action]);
-  const child = React67.useMemo(() => {
+  const child = React68.useMemo(() => {
     return action.label;
   }, [action.label]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -9277,7 +9282,7 @@ var ActionSheetContent = (props) => {
     if (action.type === "division") {
       return /* @__PURE__ */ jsxRuntime.jsx(ActionDivision, {}, index);
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs(React67.Fragment, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(React68.Fragment, { children: [
       action.value === "cancel" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-h-2 oui-bg-base-10" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         ActionItem,
@@ -9304,7 +9309,7 @@ var ActionSheetContent = (props) => {
 };
 var ActionSheet = (props) => {
   const [locale] = useLocale("modal");
-  const items = React67.useMemo(() => {
+  const items = React68.useMemo(() => {
     const items2 = [];
     if (Array.isArray(props.actionSheets)) {
       for (const action of props.actionSheets) {
@@ -9384,7 +9389,7 @@ var pickerVariants = tv({
     color: "base"
   }
 });
-var Picker = React67.forwardRef(
+var Picker = React68.forwardRef(
   (originalProps, ref) => {
     const {
       size,
@@ -9399,8 +9404,8 @@ var Picker = React67.forwardRef(
       valueRenderer,
       ...props
     } = originalProps;
-    const [open, setOpen] = React67.useState(false);
-    const selectedItem = React67.useMemo(() => {
+    const [open, setOpen] = React68.useState(false);
+    const selectedItem = React68.useMemo(() => {
       if (value && !!value.value) {
         return value;
       }
@@ -9411,13 +9416,13 @@ var Picker = React67.forwardRef(
         }
       }
     }, [value, options]);
-    const text = React67.useMemo(() => {
+    const text = React68.useMemo(() => {
       if (selectedItem) {
         return selectedItem.label;
       }
       return placeholder || label || "";
     }, [selectedItem, label, placeholder]);
-    const actions = React67.useMemo(() => {
+    const actions = React68.useMemo(() => {
       return [...options, "---", "Cancel"];
     }, [options]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -9548,10 +9553,10 @@ var DataFilter = (props) => {
   );
 };
 var usePagination = (initial) => {
-  const dataTotal = React67.useRef(0);
-  const [page, setPage] = React67.useState(initial?.page ?? 1);
-  const [pageSize, _setPageSize] = React67.useState(initial?.pageSize ?? 10);
-  const setPageSize = React67.useCallback(
+  const dataTotal = React68.useRef(0);
+  const [page, setPage] = React68.useState(initial?.page ?? 1);
+  const [pageSize, _setPageSize] = React68.useState(initial?.pageSize ?? 10);
+  const setPageSize = React68.useCallback(
     (size) => {
       _setPageSize(size);
       if (dataTotal.current > 0) {
@@ -9576,7 +9581,7 @@ var usePagination = (initial) => {
       pageTotal
     };
   };
-  const parsePagination = React67.useCallback(
+  const parsePagination = React68.useCallback(
     (meta) => {
       return {
         ...parseMeta(meta),
@@ -9586,7 +9591,7 @@ var usePagination = (initial) => {
     },
     [page, pageSize]
   );
-  const pagination = React67.useMemo(
+  const pagination = React68.useMemo(
     () => ({
       page,
       pageSize,
@@ -9595,7 +9600,7 @@ var usePagination = (initial) => {
     }),
     [parsePagination]
   );
-  React67.useEffect(() => {
+  React68.useEffect(() => {
     if (initial?.resetPageWhenPageSizeChange !== false) {
       setPage(1);
     }
@@ -9836,13 +9841,13 @@ var tabsVariants = tv({
   }
 });
 var TabsBase = TabsPrimitive__namespace.Root;
-var TabsList = React67__namespace.forwardRef((originProps, ref) => {
+var TabsList = React68__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 = React67__namespace.forwardRef((originProps, ref) => {
+var TabsTrigger = React68__namespace.forwardRef((originProps, ref) => {
   const { className, size, children, icon, variant, ...props } = originProps;
   const { trigger, icon: iconClassName } = tabsVariants({ size, variant });
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -9852,14 +9857,14 @@ var TabsTrigger = React67__namespace.forwardRef((originProps, ref) => {
       className: trigger({ className }),
       ...props,
       children: [
-        typeof icon !== "undefined" ? React67__namespace.cloneElement(icon, { className: iconClassName(), opacity: 1 }) : null,
+        typeof icon !== "undefined" ? React68__namespace.cloneElement(icon, { className: iconClassName(), opacity: 1 }) : null,
         /* @__PURE__ */ jsxRuntime.jsx("span", { children })
       ]
     }
   );
 });
 TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
-var TabsContent = React67__namespace.forwardRef((oriProps, ref) => {
+var TabsContent = React68__namespace.forwardRef((oriProps, ref) => {
   const { className, size, children, ...props } = oriProps;
   const { content } = tabsVariants({ size });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -9873,16 +9878,16 @@ var TabsContent = React67__namespace.forwardRef((oriProps, ref) => {
   );
 });
 TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
-var OrderlyThemeContext = React67.createContext(
+var OrderlyThemeContext = React68.createContext(
   {}
 );
 var useOrderlyTheme = () => {
-  return React67.useContext(OrderlyThemeContext);
+  return React68.useContext(OrderlyThemeContext);
 };
 function useDrag(containerRef) {
-  const [isDragging, setIsDragging] = React67.useState(false);
-  const [startX, setStartX] = React67.useState(0);
-  const [scrollLeft, setScrollLeft] = React67.useState(0);
+  const [isDragging, setIsDragging] = React68.useState(false);
+  const [startX, setStartX] = React68.useState(0);
+  const [scrollLeft, setScrollLeft] = React68.useState(0);
   const handleMouseDown = (e) => {
     if (!containerRef.current)
       return;
@@ -9909,10 +9914,10 @@ function useDrag(containerRef) {
   };
 }
 function useScroll2() {
-  const [leadingVisible, setLeadingVisible] = React67.useState(false);
-  const [tailingVisible, setTailingVisible] = React67.useState(false);
-  const containerRef = React67.useRef(null);
-  React67.useEffect(() => {
+  const [leadingVisible, setLeadingVisible] = React68.useState(false);
+  const [tailingVisible, setTailingVisible] = React68.useState(false);
+  const containerRef = React68.useRef(null);
+  React68.useEffect(() => {
     if (!containerRef.current)
       return;
     const handleScroll = () => {
@@ -9939,7 +9944,7 @@ function useScroll2() {
       intersectionObserver.disconnect();
     };
   }, []);
-  React67.useEffect(() => {
+  React68.useEffect(() => {
     if (!containerRef.current)
       return;
     const intersectionObserver = new IntersectionObserver((entries) => {
@@ -10057,7 +10062,7 @@ var ScrollIndicator = (props) => {
     }
   );
 };
-var TabsContext = React67.createContext({});
+var TabsContext = React68.createContext({});
 var Tabs = (props) => {
   const { getComponentTheme } = useOrderlyTheme();
   const {
@@ -10070,20 +10075,20 @@ var Tabs = (props) => {
   } = props;
   const tabsOverrides = getComponentTheme("tabs", { variant: "contained" });
   const tabsVariant = variant || tabsOverrides.variant;
-  const [tabList, setTabList] = React67.useState({});
-  const registerTab = React67.useCallback((config) => {
+  const [tabList, setTabList] = React68.useState({});
+  const registerTab = React68.useCallback((config) => {
     setTabList((prev) => {
       return { ...prev, [config.value]: config };
     });
   }, []);
-  const unregisterTab = React67.useCallback((config) => {
+  const unregisterTab = React68.useCallback((config) => {
     setTabList((prev) => {
       const newTabList = { ...prev };
       delete newTabList[config.value];
       return newTabList;
     });
   }, []);
-  const memoizedValue = React67.useMemo(
+  const memoizedValue = React68.useMemo(
     () => ({ registerTab, unregisterTab }),
     [registerTab, unregisterTab]
   );
@@ -10156,8 +10161,8 @@ var Tabs = (props) => {
 Tabs.displayName = "Tabs";
 var TabPanel = (props) => {
   const { title, value, icon, className, style, testid, children } = props;
-  const { registerTab, unregisterTab } = React67.useContext(TabsContext);
-  React67.useEffect(() => {
+  const { registerTab, unregisterTab } = React68.useContext(TabsContext);
+  React68.useEffect(() => {
     const tabConfig = {
       title,
       value,
@@ -10193,7 +10198,7 @@ var cardVariants = tv({
     intensity: 900
   }
 });
-var CardBase = React67__namespace.default.forwardRef(
+var CardBase = React68__namespace.default.forwardRef(
   ({ className, intensity, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -10207,7 +10212,7 @@ var CardBase = React67__namespace.default.forwardRef(
   }
 );
 CardBase.displayName = "CardBase";
-var CardHeader = React67__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardHeader = React68__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -10220,7 +10225,7 @@ var CardHeader = React67__namespace.default.forwardRef(({ className, children, .
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React67__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardTitle = React68__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "h3",
   {
     ref,
@@ -10233,7 +10238,7 @@ var CardTitle = React67__namespace.default.forwardRef(({ className, children, ..
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React67__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardDescription = React68__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "p",
   {
     ref,
@@ -10242,7 +10247,7 @@ var CardDescription = React67__namespace.default.forwardRef(({ className, childr
     children
   }
 ));
-var CardContent = React67__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardContent = React68__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -10252,9 +10257,9 @@ var CardContent = React67__namespace.default.forwardRef(({ className, children,
   }
 ));
 CardContent.displayName = "CardContent";
-var CardFooter = React67__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className, ...props, children }));
+var CardFooter = React68__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className, ...props, children }));
 CardFooter.displayName = "CardFooter";
-var Card = React67.forwardRef(
+var Card = React68.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: [
@@ -10267,7 +10272,7 @@ var Card = React67.forwardRef(
 Card.displayName = "Card";
 var HoverCardRoot = HoverCardPrimitive__namespace.Root;
 var HoverCardTrigger = HoverCardPrimitive__namespace.Trigger;
-var HoverCardContent = React67__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var HoverCardContent = React68__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   HoverCardPrimitive__namespace.Content,
   {
     ref,
@@ -10421,7 +10426,7 @@ var sliderVariants = tv({
     }
   }
 });
-var BaseSlider = React67__namespace.forwardRef((oriProps, ref) => {
+var BaseSlider = React68__namespace.forwardRef((oriProps, ref) => {
   const {
     className,
     color,
@@ -10437,8 +10442,8 @@ var BaseSlider = React67__namespace.forwardRef((oriProps, ref) => {
   const { track, range, thumb, root, trackInner, mark, tips } = sliderVariants({
     color
   });
-  const [innerValue, setInvalue] = React67__namespace.useState(__propsValue);
-  React67__namespace.useEffect(() => {
+  const [innerValue, setInvalue] = React68__namespace.useState(__propsValue);
+  React68__namespace.useEffect(() => {
     setInvalue((prev) => {
       if (!prev) {
         return __propsValue;
@@ -10449,7 +10454,7 @@ var BaseSlider = React67__namespace.forwardRef((oriProps, ref) => {
       return prev;
     });
   }, [__propsValue]);
-  const innerMasks = React67.useMemo(() => {
+  const innerMasks = React68.useMemo(() => {
     if (Array.isArray(marks) && marks.length > 0) {
       return marks;
     }
@@ -10545,14 +10550,14 @@ var Marks = (props) => {
     className,
     color = "primary"
   } = props;
-  const _value = React67.useMemo(() => value?.[0] ?? 0, [value]);
-  const selIndex = React67.useMemo(() => {
+  const _value = React68.useMemo(() => value?.[0] ?? 0, [value]);
+  const selIndex = React68.useMemo(() => {
     if (typeof props.step === "undefined") {
       return void 0;
     }
     return Math.floor(_value / props.step);
   }, [_value, props.step]);
-  const colorCls = React67.useMemo(() => {
+  const colorCls = React68.useMemo(() => {
     switch (color) {
       case "primary":
         return "oui-border-primary oui-bg-primary";
@@ -10564,7 +10569,7 @@ var Marks = (props) => {
         return "oui-border-primary-light oui-bg-primary-light";
     }
   }, [color]);
-  const textCls = React67.useMemo(() => {
+  const textCls = React68.useMemo(() => {
     switch (color) {
       case "primary":
         return "oui-text-primary";
@@ -10586,7 +10591,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(React67.Fragment, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(React68.Fragment, { children: [
       (!isInnerMask ? mark.label : true) && /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
@@ -10616,8 +10621,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 = React67__namespace.forwardRef((props, ref) => {
-  const _value = React67.useMemo(() => [props.value], [props.value]);
+var SingleSlider = React68__namespace.forwardRef((props, ref) => {
+  const _value = React68.useMemo(() => [props.value], [props.value]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseSlider,
     {
@@ -10636,7 +10641,7 @@ var SingleSlider = React67__namespace.forwardRef((props, ref) => {
 SingleSlider.displayName = "SingleSlider";
 var Slider = BaseSlider;
 Slider.single = SingleSlider;
-var ToastErrorIcon = React67__namespace.default.forwardRef(
+var ToastErrorIcon = React68__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(
@@ -10649,7 +10654,7 @@ var ToastErrorIcon = React67__namespace.default.forwardRef(
     ) });
   }
 );
-var ToastSuccessIcon = React67__namespace.default.forwardRef(
+var ToastSuccessIcon = React68__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(
@@ -10663,7 +10668,7 @@ var ToastSuccessIcon = React67__namespace.default.forwardRef(
     ) });
   }
 );
-var ToastLoadingIcon = React67__namespace.default.forwardRef(
+var ToastLoadingIcon = React68__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(
@@ -10818,10 +10823,10 @@ var ToastTile = (props) => {
   );
 };
 function useEndReached(sentinelRef, onEndReached) {
-  const observer = React67.useRef();
-  const cb = React67.useRef(onEndReached);
+  const observer = React68.useRef();
+  const cb = React68.useRef(onEndReached);
   cb.current = onEndReached;
-  React67.useEffect(() => {
+  React68.useEffect(() => {
     const options = {
       root: null,
       rootMargin: "0px",
@@ -10839,22 +10844,22 @@ function useEndReached(sentinelRef, onEndReached) {
       observer.current?.disconnect();
     };
   }, []);
-  React67.useEffect(() => {
+  React68.useEffect(() => {
     observer.current?.observe(sentinelRef.current);
   }, []);
 }
 var ListViewInner = (props, ref) => {
-  const sentinelRef = React67.useRef(null);
-  const containerRef = React67.useRef(null);
+  const sentinelRef = React68.useRef(null);
+  const containerRef = React68.useRef(null);
   useEndReached(sentinelRef, () => {
     if (!props.isLoading) {
       props.loadMore?.();
     }
   });
-  const emptyDataSouce = React67.useMemo(() => {
+  const emptyDataSouce = React68.useMemo(() => {
     return Array.isArray(props.dataSource) && props.dataSource.length <= 0;
   }, [props.dataSource]);
-  const listViewElement = React67.useMemo(() => {
+  const listViewElement = React68.useMemo(() => {
     if (!props.dataSource) {
       return null;
     }
@@ -10871,9 +10876,9 @@ var ListViewInner = (props, ref) => {
         }
       );
     }
-    return props.dataSource.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(React67__namespace.default.Fragment, { children: props.renderItem(item, index, props.extraData) }, index));
+    return props.dataSource.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(React68__namespace.default.Fragment, { children: props.renderItem(item, index, props.extraData) }, index));
   }, [emptyDataSouce, props.dataSource, props.extraData, props.emptyView]);
-  const loadingViewElement = React67.useMemo(() => {
+  const loadingViewElement = React68.useMemo(() => {
     if ((props.dataSource?.length || 0) === 0)
       return null;
     if (!props.isLoading) {
@@ -10881,7 +10886,7 @@ var ListViewInner = (props, ref) => {
     }
     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]);
-  React67.useImperativeHandle(ref, () => {
+  React68.useImperativeHandle(ref, () => {
     return {
       scroll: (direction) => {
         containerRef.current?.scroll({
@@ -10927,7 +10932,7 @@ var ListViewInner = (props, ref) => {
     }
   );
 };
-var ListView = React67.forwardRef(ListViewInner);
+var ListView = React68.forwardRef(ListViewInner);
 var Collapsible = CollapsiblePrimitive__namespace.Root;
 var CollapsibleTrigger2 = CollapsiblePrimitive__namespace.CollapsibleTrigger;
 var CollapsibleContent2 = (props) => {
@@ -10942,16 +10947,16 @@ var CollapsibleContent2 = (props) => {
     }
   );
 };
-var CollapseContext = React67.createContext(
+var CollapseContext = React68.createContext(
   {}
 );
 var useCollapseContext = () => {
-  return React67.useContext(CollapseContext);
+  return React68.useContext(CollapseContext);
 };
 var Panel = (props) => {
   const { activeKey, setActiveKey } = useCollapseContext();
   const { header, headerClassName, itemKey, disabled } = props;
-  const headerNode = React67.useMemo(() => {
+  const headerNode = React68.useMemo(() => {
     if (typeof header === "string") {
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
@@ -10996,8 +11001,8 @@ var Panel = (props) => {
 };
 var CollapseRoot = (props) => {
   const { activeKey = "", children } = props;
-  const [internalActiveKey, setInternalActiveKey] = React67.useState(activeKey);
-  const memoizedValue = React67.useMemo(() => {
+  const [internalActiveKey, setInternalActiveKey] = React68.useState(activeKey);
+  const memoizedValue = React68.useMemo(() => {
     return {
       activeKey: internalActiveKey,
       setActiveKey: setInternalActiveKey
@@ -11017,11 +11022,11 @@ var Marquee = (props) => {
     className,
     setApi
   } = props;
-  const isHorizontal = React67.useMemo(
+  const isHorizontal = React68.useMemo(
     () => carouselOptions.axis !== "y",
     [carouselOptions.axis]
   );
-  const emblaOptions = React67.useMemo(() => {
+  const emblaOptions = React68.useMemo(() => {
     return {
       loop: true,
       align: "start",
@@ -11031,7 +11036,7 @@ var Marquee = (props) => {
       ...carouselOptions
     };
   }, [carouselOptions]);
-  const autoScrollPluginOptions = React67.useMemo(() => {
+  const autoScrollPluginOptions = React68.useMemo(() => {
     return {
       speed: 1,
       direction: "forward",
@@ -11045,12 +11050,12 @@ var Marquee = (props) => {
   const [emblaRef, emblaApi] = useEmblaCarousel__default.default(emblaOptions, [
     AutoScroll__default.default(autoScrollPluginOptions)
   ]);
-  React67__namespace.default.useEffect(() => {
+  React68__namespace.default.useEffect(() => {
     if (emblaApi && setApi) {
       setApi(emblaApi);
     }
   }, [emblaApi, setApi]);
-  const renderSlides = React67.useMemo(() => {
+  const renderSlides = React68.useMemo(() => {
     if (!Array.isArray(data) || data.length === 0) {
       return null;
     }
@@ -11197,7 +11202,7 @@ var dropdownMenuVariants = tailwindVariants.tv({
     size: "lg"
   }
 });
-var DropdownMenuContent = React67__namespace.forwardRef(({ className, sideOffset = 4, size, ...props }, ref) => {
+var DropdownMenuContent = React68__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,
@@ -11210,7 +11215,7 @@ var DropdownMenuContent = React67__namespace.forwardRef(({ className, sideOffset
   ) });
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive__namespace.Content.displayName;
-var DropdownMenuItem = React67__namespace.forwardRef(({ className, inset, size, ...props }, ref) => {
+var DropdownMenuItem = React68__namespace.forwardRef(({ className, inset, size, ...props }, ref) => {
   const { item } = dropdownMenuVariants({ size });
   return /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuPrimitive__namespace.Item,
@@ -11222,7 +11227,7 @@ var DropdownMenuItem = React67__namespace.forwardRef(({ className, inset, size,
   );
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive__namespace.Item.displayName;
-var DropdownMenuLabel = React67__namespace.forwardRef(({ className, inset, ...props }, ref) => {
+var DropdownMenuLabel = React68__namespace.forwardRef(({ className, inset, ...props }, ref) => {
   const { label } = dropdownMenuVariants({
     inset
   });
@@ -11236,7 +11241,7 @@ var DropdownMenuLabel = React67__namespace.forwardRef(({ className, inset, ...pr
   );
 });
 DropdownMenuLabel.displayName = DropdownMenuPrimitive__namespace.Label.displayName;
-var DropdownMenuSeparator = React67__namespace.forwardRef(({ className, ...props }, ref) => {
+var DropdownMenuSeparator = React68__namespace.forwardRef(({ className, ...props }, ref) => {
   const { separator } = dropdownMenuVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuPrimitive__namespace.Separator,
@@ -11258,7 +11263,7 @@ var DropdownMenuShortcut = ({
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 var SimpleDropdownMenu = (props) => {
   const { currentValue, menu, render, size, children, ...contentProps } = props;
-  const items = React67.useMemo(() => {
+  const items = React68.useMemo(() => {
     if (typeof props.render === "function") {
       return props.menu.map((item, index) => {
         return props.render?.(item, index);
@@ -11297,7 +11302,7 @@ var SimpleDropdownMenu = (props) => {
   ] });
 };
 var ComponentsProvider = (props) => {
-  React67.useEffect(() => {
+  React68.useEffect(() => {
     if (props.components && Object.keys(props.components).length) {
       for (const position in props.components) {
         const Element = props.components[position];
@@ -11315,20 +11320,20 @@ var ComponentsProvider = (props) => {
 };
 var OrderlyThemeProvider = (props) => {
   const { components, overrides, children } = props;
-  const resolveComponentTheme = React67.useCallback(
+  const resolveComponentTheme = React68.useCallback(
     (component, defaultValue) => {
       return overrides?.[component] || defaultValue;
     },
     [overrides]
   );
-  const memoizedValue = React67.useMemo(() => {
+  const memoizedValue = React68.useMemo(() => {
     return { getComponentTheme: resolveComponentTheme };
   }, [resolveComponentTheme]);
   return /* @__PURE__ */ jsxRuntime.jsx(OrderlyThemeContext.Provider, { value: memoizedValue, children: /* @__PURE__ */ jsxRuntime.jsx(ComponentsProvider, { components, children }) });
 };
-var Either = React67.memo((props) => {
+var Either = React68.memo((props) => {
   const { value, children, left } = props;
-  const inputValue = React67.useMemo(
+  const inputValue = React68.useMemo(
     () => Boolean(typeof value === "function" ? value() : value),
     [value]
   );