@orderly.network/ui 2.10.2 → 3.0.0-beta.0

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React70 = require('react');
+var React71 = require('react');
 var tailwindVariants = require('tailwind-variants');
 var reactSlot = require('@radix-ui/react-slot');
 var jsxRuntime = require('react/jsx-runtime');
@@ -16,7 +16,7 @@ var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var SwitchPrimitives = require('@radix-ui/react-switch');
 var reactTable = require('@tanstack/react-table');
 var locale = require('date-fns/locale');
-var reactErrorBoundary = require('react-error-boundary');
+var pluginCore = require('@orderly.network/plugin-core');
 var reactDayPicker = require('react-day-picker');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var TabsPrimitive = require('@radix-ui/react-tabs');
@@ -49,7 +49,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React70__namespace = /*#__PURE__*/_interopNamespace(React70);
+var React71__namespace = /*#__PURE__*/_interopNamespace(React71);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 var makeBlockie__default = /*#__PURE__*/_interopDefault(makeBlockie);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
@@ -557,7 +557,7 @@ var boxVariants = tv({
     __size: false
   }
 });
-var Box = React70__namespace.default.forwardRef((props, forwardedRef) => {
+var Box = React71__namespace.default.forwardRef((props, forwardedRef) => {
   const {
     asChild = false,
     as: TAG = "div",
@@ -692,7 +692,7 @@ var flexVariant = tv(
     responsiveVariants: true
   }
 );
-var Flex = React70.forwardRef((props, ref) => {
+var Flex = React71.forwardRef((props, ref) => {
   const {
     className,
     display,
@@ -791,7 +791,7 @@ var Spinner = (props) => {
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-sr-only", children: "Loading..." })
   ] });
 };
-var BaseButton = React70__namespace.default.forwardRef(
+var BaseButton = React71__namespace.default.forwardRef(
   (props, forwardedRef) => {
     const {
       asChild = false,
@@ -806,14 +806,14 @@ var BaseButton = React70__namespace.default.forwardRef(
     } = props;
     const Comp = asChild ? reactSlot.Slot : "button";
     const isDisabled = typeof disabled !== "undefined" ? disabled : loading;
-    const iconElement = React70.useMemo(() => {
-      return icon ? React70__namespace.default.cloneElement(icon, {
+    const iconElement = React71.useMemo(() => {
+      return icon ? React71__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 = React70.useMemo(() => {
+    const content = React71.useMemo(() => {
       if (!leading && !trailing && !iconElement) return children;
       return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", itemAlign: "center", className: "oui-space-x-1", children: [
         leading,
@@ -822,7 +822,7 @@ var BaseButton = React70__namespace.default.forwardRef(
         trailing
       ] });
     }, [children, leading, trailing, iconElement]);
-    const spinnerSize = React70.useMemo(() => {
+    const spinnerSize = React71.useMemo(() => {
       switch (size) {
         case "xl":
           return "md";
@@ -1057,7 +1057,7 @@ var buttonVariants = tailwindVariants.tv(
     responsiveVariants: ["md", "lg"]
   }
 );
-var Button = React70__namespace.default.forwardRef(
+var Button = React71__namespace.default.forwardRef(
   ({
     className,
     variant,
@@ -1090,9 +1090,9 @@ var Button = React70__namespace.default.forwardRef(
   }
 );
 Button.displayName = "Button";
-var ThrottledButton = React70__namespace.default.forwardRef(({ onClick, throttleDuration = 700, ...props }, ref) => {
-  const lastCall = React70.useRef(0);
-  const throttle = React70.useCallback(
+var ThrottledButton = React71__namespace.default.forwardRef(({ onClick, throttleDuration = 700, ...props }, ref) => {
+  const lastCall = React71.useRef(0);
+  const throttle = React71.useCallback(
     (delay, fn) => {
       return function(...args) {
         const now = Date.now();
@@ -1107,6 +1107,89 @@ var ThrottledButton = React70__namespace.default.forwardRef(({ onClick, throttle
   const debouncedClick = throttle(throttleDuration, onClick);
   return /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: debouncedClick, ref, ...props });
 });
+var iconButtonVariants = tailwindVariants.tv({
+  base: [
+    "oui-button",
+    "oui-inline-flex",
+    "oui-items-center",
+    "oui-justify-center",
+    "oui-transition-colors",
+    "disabled:oui-cursor-not-allowed",
+    "disabled:oui-opacity-36"
+  ],
+  variants: {
+    color: {
+      primary: [
+        "oui-text-primary-darken",
+        "hover:oui-text-primary-darken/80",
+        "active:oui-text-primary-darken/70"
+      ],
+      secondary: [
+        "oui-text-base-contrast-54",
+        "hover:oui-text-base-contrast-80",
+        "active:oui-text-base-contrast-70"
+      ],
+      success: [
+        "oui-text-success",
+        "hover:oui-text-success/80",
+        "active:oui-text-success/70"
+      ],
+      buy: [
+        "oui-text-success",
+        "hover:oui-text-success/80",
+        "active:oui-text-success/70"
+      ],
+      danger: [
+        "oui-text-danger",
+        "hover:oui-text-danger/80",
+        "active:oui-text-danger/70"
+      ],
+      sell: [
+        "oui-text-danger",
+        "hover:oui-text-danger/80",
+        "active:oui-text-danger/70"
+      ],
+      warning: [
+        "oui-text-warning-darken",
+        "hover:oui-text-warning-darken/80",
+        "active:oui-text-warning-darken/70"
+      ],
+      gray: [
+        "oui-text-base",
+        "hover:oui-text-base/80",
+        "active:oui-text-base/70"
+      ],
+      light: [
+        "oui-text-white",
+        "hover:oui-text-white/80",
+        "active:oui-text-white/70"
+      ]
+    }
+  },
+  defaultVariants: {
+    color: "secondary"
+  }
+});
+var IconButton = React71__namespace.default.forwardRef(
+  ({ className, color, angle, style, children, ...props }, ref) => {
+    const angleStyle = parseAngleProps({ angle });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      BaseButton,
+      {
+        className: iconButtonVariants({
+          color,
+          className
+        }),
+        size: "md",
+        ref,
+        style: { ...style, ...angleStyle },
+        ...props,
+        children
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
 var gridVariants = tv({
   extend: gapVariants,
   base: ["oui-grid"],
@@ -1177,7 +1260,7 @@ var gridVariants = tv({
     // autoFlow: "row",
   }
 });
-var Grid = React70__namespace.default.forwardRef((props, ref) => {
+var Grid = React71__namespace.default.forwardRef((props, ref) => {
   const { className, cols, rows, gap, gapX, gapY, autoFlow, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Box,
@@ -1227,8 +1310,8 @@ var gridSpanVariants = tv({
 });
 var Span = (props) => {
   const { colSpan, rowSpan, className, ...rest } = props;
-  const ref = React70.useRef(null);
-  React70.useEffect(() => {
+  const ref = React71.useRef(null);
+  React71.useEffect(() => {
     if (ref.current) {
       const parent = ref.current.parentElement;
       if (!parent || !parent.classList.contains("oui-grid")) ;
@@ -1271,7 +1354,7 @@ var iconVariants = tailwindVariants.tv({
     color: "black"
   }
 });
-var BaseIcon = React70__namespace.default.forwardRef(
+var BaseIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const {
       size = 24,
@@ -1333,7 +1416,7 @@ var avatarVariants = tv({
     size: "sm"
   }
 });
-var AvatarBase = React70__namespace.forwardRef(({ className, size, ...props }, ref) => {
+var AvatarBase = React71__namespace.forwardRef(({ className, size, ...props }, ref) => {
   const { root } = avatarVariants({ size });
   return /* @__PURE__ */ jsxRuntime.jsx(
     AvatarPrimitive__namespace.Root,
@@ -1345,7 +1428,7 @@ var AvatarBase = React70__namespace.forwardRef(({ className, size, ...props }, r
   );
 });
 AvatarBase.displayName = AvatarPrimitive__namespace.Root.displayName;
-var AvatarImage = React70__namespace.forwardRef(({ className, ...props }, ref) => {
+var AvatarImage = React71__namespace.forwardRef(({ className, ...props }, ref) => {
   const { image } = avatarVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     AvatarPrimitive__namespace.Image,
@@ -1357,12 +1440,12 @@ var AvatarImage = React70__namespace.forwardRef(({ className, ...props }, ref) =
   );
 });
 AvatarImage.displayName = AvatarPrimitive__namespace.Image.displayName;
-var AvatarFallback = React70__namespace.forwardRef(({ className, ...props }, ref) => {
+var AvatarFallback = React71__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 = React70__namespace.forwardRef((props, ref) => {
+var Avatar = React71__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(
@@ -1376,13 +1459,13 @@ var Avatar = React70__namespace.forwardRef((props, ref) => {
     typeof fallback !== "undefined" && /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { delayMs, children: fallback })
   ] });
 });
-var EVMAvatar = React70__namespace.forwardRef((props, ref) => {
+var EVMAvatar = React71__namespace.forwardRef((props, ref) => {
   const { address, ...rest } = props;
-  const src = React70.useMemo(() => makeBlockie__default.default(address), [props.address]);
+  const src = React71.useMemo(() => makeBlockie__default.default(address), [props.address]);
   return /* @__PURE__ */ jsxRuntime.jsx(Avatar, { ...rest, src });
 });
 var ChainIcon = (props) => {
-  const url = React70.useMemo(() => {
+  const url = React71.useMemo(() => {
     return `https://oss.orderly.network/static/network_logo/${props.chainId}.png`;
   }, [props.chainId]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1396,7 +1479,7 @@ var ChainIcon = (props) => {
   );
 };
 var TokenIcon = (props) => {
-  const url = React70.useMemo(() => {
+  const url = React71.useMemo(() => {
     if (props.url) {
       return props.url;
     }
@@ -1419,7 +1502,7 @@ var TokenIcon = (props) => {
 };
 var CombineIcon = (props) => {
   const { secondary } = props;
-  const subElement = React70.useMemo(() => {
+  const subElement = React71.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 });
@@ -1446,7 +1529,7 @@ var CombineIcon = (props) => {
     subElement
   ] });
 };
-var CloseIcon = React70__namespace.default.forwardRef(
+var CloseIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1460,7 +1543,7 @@ var CloseIcon = React70__namespace.default.forwardRef(
   }
 );
 CloseIcon.displayName = "CloseIcon";
-var BaseIconWithPath = React70__namespace.default.forwardRef((props, ref) => {
+var BaseIconWithPath = React71__namespace.default.forwardRef((props, ref) => {
   const { opacity = 0.54, d, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -1473,7 +1556,7 @@ var BaseIconWithPath = React70__namespace.default.forwardRef((props, ref) => {
     }
   ) });
 });
-var CheckIcon = React70__namespace.default.forwardRef(
+var CheckIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1487,7 +1570,7 @@ var CheckIcon = React70__namespace.default.forwardRef(
   }
 );
 CheckIcon.displayName = "CheckIcon";
-var ChevronDownIcon = React70__namespace.default.forwardRef(
+var ChevronDownIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1501,7 +1584,7 @@ var ChevronDownIcon = React70__namespace.default.forwardRef(
   }
 );
 ChevronDownIcon.displayName = "ChevronDownIcon";
-var ChevronUpIcon = React70__namespace.default.forwardRef(
+var ChevronUpIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1515,7 +1598,7 @@ var ChevronUpIcon = React70__namespace.default.forwardRef(
   }
 );
 ChevronUpIcon.displayName = "ChevronUpIcon";
-var CaretUpIcon = React70__namespace.default.forwardRef(
+var CaretUpIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1529,7 +1612,7 @@ var CaretUpIcon = React70__namespace.default.forwardRef(
   }
 );
 CaretUpIcon.displayName = "CaretUpIcon";
-var CaretDownIcon = React70__namespace.default.forwardRef(
+var CaretDownIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -1542,7 +1625,7 @@ var CaretDownIcon = React70__namespace.default.forwardRef(
   }
 );
 CaretDownIcon.displayName = "CaretDownIcon";
-var CaretLeftIcon = React70__namespace.default.forwardRef(
+var CaretLeftIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1556,7 +1639,7 @@ var CaretLeftIcon = React70__namespace.default.forwardRef(
   }
 );
 CaretLeftIcon.displayName = "CaretLeftIcon";
-var CaretRightIcon = React70__namespace.default.forwardRef(
+var CaretRightIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1570,7 +1653,7 @@ var CaretRightIcon = React70__namespace.default.forwardRef(
   }
 );
 CaretRightIcon.displayName = "CaretRightIcon";
-var ChevronLeftIcon = React70__namespace.default.forwardRef(
+var ChevronLeftIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -1583,7 +1666,7 @@ var ChevronLeftIcon = React70__namespace.default.forwardRef(
   }
 );
 ChevronLeftIcon.displayName = "ChevronLeftIcon";
-var ChevronRightIcon = React70__namespace.default.forwardRef(
+var ChevronRightIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1597,7 +1680,7 @@ var ChevronRightIcon = React70__namespace.default.forwardRef(
   }
 );
 ChevronRightIcon.displayName = "ChevronRightIcon";
-var CalendarMinusIcon = React70__namespace.default.forwardRef(
+var CalendarMinusIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -1610,7 +1693,7 @@ var CalendarMinusIcon = React70__namespace.default.forwardRef(
   }
 );
 CalendarMinusIcon.displayName = "CalendarMinusIcon";
-var SettingIcon = React70__namespace.default.forwardRef(
+var SettingIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1624,7 +1707,7 @@ var SettingIcon = React70__namespace.default.forwardRef(
   }
 );
 SettingIcon.displayName = "SettingIcon";
-var CloseSquareFillIcon = React70__namespace.default.forwardRef((props, ref) => {
+var CloseSquareFillIcon = React71__namespace.default.forwardRef((props, ref) => {
   const { opacity = 0.54, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -1636,7 +1719,7 @@ var CloseSquareFillIcon = React70__namespace.default.forwardRef((props, ref) =>
   ) });
 });
 CloseSquareFillIcon.displayName = "CloseSquareFillIcon";
-var CloseCircleFillIcon = React70__namespace.default.forwardRef((props, ref) => {
+var CloseCircleFillIcon = React71__namespace.default.forwardRef((props, ref) => {
   const { opacity = 0.54, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -1648,7 +1731,7 @@ var CloseCircleFillIcon = React70__namespace.default.forwardRef((props, ref) =>
   ) });
 });
 CloseCircleFillIcon.displayName = "CloseCircleFillIcon";
-var CheckedCircleFillIcon = React70__namespace.default.forwardRef((props, ref) => {
+var CheckedCircleFillIcon = React71__namespace.default.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseIconWithPath,
     {
@@ -1659,7 +1742,7 @@ var CheckedCircleFillIcon = React70__namespace.default.forwardRef((props, ref) =
   );
 });
 CheckedCircleFillIcon.displayName = "CheckedCircleFillIcon";
-var CheckedSquareFillIcon = React70__namespace.default.forwardRef((props, ref) => {
+var CheckedSquareFillIcon = React71__namespace.default.forwardRef((props, ref) => {
   const { opacity = 0.54, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -1673,7 +1756,7 @@ var CheckedSquareFillIcon = React70__namespace.default.forwardRef((props, ref) =
   ) });
 });
 CheckedSquareFillIcon.displayName = "CheckSquareFillIcon";
-var CheckSquareEmptyIcon = React70__namespace.default.forwardRef(
+var CheckSquareEmptyIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1689,7 +1772,7 @@ var CheckSquareEmptyIcon = React70__namespace.default.forwardRef(
   }
 );
 CheckSquareEmptyIcon.displayName = "CheckSquareEmptyIcon";
-var PlusIcon = React70__namespace.default.forwardRef(
+var PlusIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1703,7 +1786,7 @@ var PlusIcon = React70__namespace.default.forwardRef(
   }
 );
 PlusIcon.displayName = "PlusIcon";
-var ReduceIcon = React70__namespace.default.forwardRef(
+var ReduceIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1721,7 +1804,7 @@ var ReduceIcon = React70__namespace.default.forwardRef(
   }
 );
 ReduceIcon.displayName = "ReduceIcon";
-var CircleOutlinedIcon = React70__namespace.default.forwardRef((props, ref) => {
+var CircleOutlinedIcon = React71__namespace.default.forwardRef((props, ref) => {
   const { opacity = 0.54, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -1733,7 +1816,7 @@ var CircleOutlinedIcon = React70__namespace.default.forwardRef((props, ref) => {
   ) });
 });
 CircleOutlinedIcon.displayName = "CircleOutlinedIcon";
-var SquareOutlinedIcon = React70__namespace.default.forwardRef((props, ref) => {
+var SquareOutlinedIcon = React71__namespace.default.forwardRef((props, ref) => {
   const { opacity = 0.54, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -1745,7 +1828,7 @@ var SquareOutlinedIcon = React70__namespace.default.forwardRef((props, ref) => {
   ) });
 });
 SquareOutlinedIcon.displayName = "SquareOutlinedIcon";
-var ExclamationFillIcon = React70__namespace.default.forwardRef((props, ref) => {
+var ExclamationFillIcon = React71__namespace.default.forwardRef((props, ref) => {
   const { ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -1756,7 +1839,7 @@ var ExclamationFillIcon = React70__namespace.default.forwardRef((props, ref) =>
   ) });
 });
 ExclamationFillIcon.displayName = "ExclamationFillIcon";
-var QuestionFillIcon = React70__namespace.default.forwardRef(
+var QuestionFillIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1770,7 +1853,7 @@ var QuestionFillIcon = React70__namespace.default.forwardRef(
   }
 );
 QuestionFillIcon.displayName = "ExclamationFillIcon";
-var ArrowLeftRightIcon = React70__namespace.default.forwardRef((props, ref) => {
+var ArrowLeftRightIcon = React71__namespace.default.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseIconWithPath,
     {
@@ -1781,7 +1864,7 @@ var ArrowLeftRightIcon = React70__namespace.default.forwardRef((props, ref) => {
   );
 });
 ArrowLeftRightIcon.displayName = "ArrowLeftRightIcon";
-var ArrowDownUpIcon = React70__namespace.default.forwardRef(
+var ArrowDownUpIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -1794,7 +1877,7 @@ var ArrowDownUpIcon = React70__namespace.default.forwardRef(
   }
 );
 ArrowDownUpIcon.displayName = "ArrowDownUpIconIcon";
-var ArrowUpSquareFillIcon = React70__namespace.default.forwardRef((props, ref) => {
+var ArrowUpSquareFillIcon = React71__namespace.default.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseIconWithPath,
     {
@@ -1805,7 +1888,7 @@ var ArrowUpSquareFillIcon = React70__namespace.default.forwardRef((props, ref) =
   );
 });
 ArrowUpSquareFillIcon.displayName = "ArrowUpSquareFillIconIcon";
-var ArrowDownSquareFillIcon = React70__namespace.default.forwardRef((props, ref) => {
+var ArrowDownSquareFillIcon = React71__namespace.default.forwardRef((props, ref) => {
   const { opacity = 0.54, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -1817,7 +1900,7 @@ var ArrowDownSquareFillIcon = React70__namespace.default.forwardRef((props, ref)
   ) });
 });
 ArrowDownSquareFillIcon.displayName = "ArrowDownSquareFillIconIcon";
-var ArrowLeftRightSquareFill = React70__namespace.default.forwardRef((props, ref) => {
+var ArrowLeftRightSquareFill = React71__namespace.default.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
@@ -1843,7 +1926,7 @@ var ArrowLeftRightSquareFill = React70__namespace.default.forwardRef((props, ref
 if (process.env.NODE_ENV !== "production") {
   ArrowLeftRightSquareFill.displayName = "ArrowLeftRightSquareFill";
 }
-var ArrowRightUpSquareFillIcon = React70__namespace.default.forwardRef((props, ref) => {
+var ArrowRightUpSquareFillIcon = React71__namespace.default.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseIconWithPath,
     {
@@ -2012,7 +2095,7 @@ var BattleSolidInactiveIcon = (props) => {
     }
   ) });
 };
-var FeeTierIcon = React70__namespace.default.forwardRef(
+var FeeTierIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -2078,7 +2161,7 @@ var EarnInactiveIcon = (props) => {
     )
   ] }) });
 };
-var EditIcon = React70__namespace.default.forwardRef(
+var EditIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2092,7 +2175,7 @@ var EditIcon = React70__namespace.default.forwardRef(
   }
 );
 EditIcon.displayName = "EditIcon";
-var EyeIcon = React70__namespace.default.forwardRef(
+var EyeIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2106,7 +2189,7 @@ var EyeIcon = React70__namespace.default.forwardRef(
   }
 );
 EyeIcon.displayName = "EyeIcon";
-var ShareIcon = React70__namespace.default.forwardRef(
+var ShareIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2120,7 +2203,7 @@ var ShareIcon = React70__namespace.default.forwardRef(
   }
 );
 ShareIcon.displayName = "ShareIcon";
-var EyeCloseIcon = React70__namespace.default.forwardRef(
+var EyeCloseIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2134,7 +2217,7 @@ var EyeCloseIcon = React70__namespace.default.forwardRef(
   }
 );
 EyeCloseIcon.displayName = "EyeCloseIcon";
-var RefreshIcon = React70__namespace.default.forwardRef(
+var RefreshIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2306,7 +2389,7 @@ var EsOrderlyIcon = (props) => {
     }
   );
 };
-var InfoCircleIcon = React70__namespace.default.forwardRef(
+var InfoCircleIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { className, opacity = 0.36, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2333,14 +2416,14 @@ var InfoCircleIcon = React70__namespace.default.forwardRef(
   }
 );
 var WalletIcon = (props) => {
-  const url = React70.useMemo(() => {
+  const url = React71.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 = React70__namespace.default.forwardRef(
+var CalendarIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -2353,7 +2436,7 @@ var CalendarIcon = React70__namespace.default.forwardRef(
   }
 );
 CalendarIcon.displayName = "CaretLeftIcon";
-var CopyIcon = React70__namespace.default.forwardRef(
+var CopyIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -2366,7 +2449,7 @@ var CopyIcon = React70__namespace.default.forwardRef(
   }
 );
 CopyIcon.displayName = "CopyIcon";
-var ServerFillIcon = React70__namespace.default.forwardRef(
+var ServerFillIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -2379,7 +2462,7 @@ var ServerFillIcon = React70__namespace.default.forwardRef(
   }
 );
 ServerFillIcon.displayName = "ServerFillIcon";
-var SortingAscIcon = React70__namespace.default.forwardRef(
+var SortingAscIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(BaseIcon, { ref, ...rest, children: [
@@ -2403,7 +2486,7 @@ var SortingAscIcon = React70__namespace.default.forwardRef(
   }
 );
 SortingAscIcon.displayName = "SortingAscIcon";
-var SortingDescIcon = React70__namespace.default.forwardRef(
+var SortingDescIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(BaseIcon, { ref, ...rest, children: [
@@ -2427,7 +2510,7 @@ var SortingDescIcon = React70__namespace.default.forwardRef(
   }
 );
 SortingDescIcon.displayName = "SortingDescIcon";
-var ArrowUpShortIcon = React70__namespace.default.forwardRef(
+var ArrowUpShortIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -2439,7 +2522,7 @@ var ArrowUpShortIcon = React70__namespace.default.forwardRef(
     );
   }
 );
-var ArrowDownShortIcon = React70__namespace.default.forwardRef(
+var ArrowDownShortIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -2451,7 +2534,7 @@ var ArrowDownShortIcon = React70__namespace.default.forwardRef(
     );
   }
 );
-var ArrowLeftShortIcon = React70__namespace.default.forwardRef(
+var ArrowLeftShortIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -2463,7 +2546,7 @@ var ArrowLeftShortIcon = React70__namespace.default.forwardRef(
     );
   }
 );
-var ArrowRightShortIcon = React70__namespace.default.forwardRef(
+var ArrowRightShortIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -2479,7 +2562,7 @@ ArrowUpShortIcon.displayName = "ArrowUpShortIcon";
 ArrowDownShortIcon.displayName = "ArrowDownShortIcon";
 ArrowLeftShortIcon.displayName = "ArrowLeftShortIcon";
 ArrowRightShortIcon.displayName = "ArrowRightShortIcon";
-var SortingIcon = React70__namespace.default.forwardRef(
+var SortingIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3509,7 +3592,7 @@ var StarChildChatInactiveIcon = (props) => {
     )
   ] });
 };
-var CloseRoundFillIcon = React70__namespace.default.forwardRef((props, ref) => {
+var CloseRoundFillIcon = React71__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",
@@ -3792,7 +3875,7 @@ function EmptyStateIcon() {
   );
 }
 var emptyData_default = EmptyStateIcon;
-var VectorIcon = React70__namespace.default.forwardRef(
+var VectorIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
@@ -3886,7 +3969,7 @@ var PersonIcon = () => {
     }
   );
 };
-var SettingFillIcon = React70__namespace.default.forwardRef(
+var SettingFillIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3921,7 +4004,7 @@ var TradingLeftNavIcon = (props) => {
     }
   );
 };
-var VaultsIcon = React70__namespace.default.forwardRef(
+var VaultsIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "svg",
@@ -3946,7 +4029,7 @@ var VaultsIcon = React70__namespace.default.forwardRef(
 if (process.env.NODE_ENV !== "production") {
   VaultsIcon.displayName = "VaultsIcon";
 }
-var LeftNavVaultsIcon = React70.forwardRef(
+var LeftNavVaultsIcon = React71.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "svg",
@@ -3986,7 +4069,7 @@ var LeftNavVaultsIcon = React70.forwardRef(
     );
   }
 );
-var NewsFillIcon = React70__namespace.default.forwardRef(
+var NewsFillIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 1, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -4000,7 +4083,7 @@ var NewsFillIcon = React70__namespace.default.forwardRef(
   }
 );
 NewsFillIcon.displayName = "NewsFillIcon";
-var BellIcon = React70__namespace.default.forwardRef(
+var BellIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseIconWithPath,
@@ -4074,7 +4157,7 @@ var ReferralSolidIcon = (props) => {
     }
   ) });
 };
-var AddCircleIcon = React70__namespace.default.forwardRef(
+var AddCircleIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { className, opacity = 0.54, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4110,7 +4193,7 @@ var AddCircleIcon = React70__namespace.default.forwardRef(
   }
 );
 AddCircleIcon.displayName = "AddCircleIcon";
-var WarningIcon = React70__namespace.default.forwardRef(
+var WarningIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
@@ -4127,7 +4210,7 @@ var WarningIcon = React70__namespace.default.forwardRef(
     );
   }
 );
-var RwaIcon = React70__namespace.default.forwardRef(
+var RwaIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 1, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ref, ...rest, viewBox: "0 0 12 12", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -4198,7 +4281,7 @@ var textVariants = tv({
     }
   }
 });
-var Text = React70__namespace.default.forwardRef((props, forwardedRef) => {
+var Text = React71__namespace.default.forwardRef((props, forwardedRef) => {
   const {
     children,
     className,
@@ -4287,7 +4370,7 @@ var isTextRule = (rule) => {
 };
 var DEFAULT_SYMBOL_FORMAT = "base-quote";
 var DEFAULT_DATE_FORMAT = "yyyy-MM-dd HH:mm:ss";
-var FormattedText = React70__namespace.default.forwardRef(
+var FormattedText = React71__namespace.default.forwardRef(
   (props, ref) => {
     const {
       rule,
@@ -4312,13 +4395,13 @@ var FormattedText = React70__namespace.default.forwardRef(
       isIcon,
       ...rest
     } = props;
-    const prefixElement = React70.useMemo(() => {
+    const prefixElement = React71.useMemo(() => {
       if (rule === "symbol" && showIcon) {
         return /* @__PURE__ */ jsxRuntime.jsx(TokenIcon, { symbol: children, size: iconSize });
       }
       return prefix;
     }, [prefix, showIcon, rule, iconSize, children]);
-    const suffix = React70.useMemo(() => {
+    const suffix = React71.useMemo(() => {
       if (typeof props.suffix !== "undefined") {
         return props.suffix;
       }
@@ -4337,7 +4420,7 @@ var FormattedText = React70__namespace.default.forwardRef(
         );
       }
     }, [props.suffix, copyable, children]);
-    const content = React70.useMemo(() => {
+    const content = React71.useMemo(() => {
       if (typeof children === "undefined") {
         return "--";
       }
@@ -4367,9 +4450,12 @@ var FormattedText = React70__namespace.default.forwardRef(
         const quote = arr[2];
         return (formatString ?? DEFAULT_SYMBOL_FORMAT).replace("type", type).replace("base", base).replace("quote", quote);
       }
+      if (capitalize && typeof children === "string") {
+        return children.charAt(0).toUpperCase() + children.slice(1);
+      }
       return children;
-    }, [children, rule, formatString, range, symbolElement]);
-    const contentWithFix = React70.useMemo(() => {
+    }, [children, rule, formatString, range, symbolElement, capitalize]);
+    const contentWithFix = React71.useMemo(() => {
       if (typeof suffix === "undefined" && typeof prefixElement === "undefined") {
         return content;
       }
@@ -4399,7 +4485,7 @@ var gradientTextVariants = tv({
     }
   }
 });
-var GradientText = React70__namespace.default.forwardRef((props, ref) => {
+var GradientText = React71__namespace.default.forwardRef((props, ref) => {
   const { color, className, angle, ...rest } = props;
   const style = parseAngleProps({ angle });
   return (
@@ -4442,7 +4528,7 @@ var Numeral = (props) => {
     ...rest
   } = props;
   const num = Number(props.children);
-  const child = React70.useMemo(() => {
+  const child = React71.useMemo(() => {
     if (props.children === "-") return props.children;
     if (isNaN(num)) return placeholder ?? "--";
     if (typeof visible !== "undefined" && !visible) return masking ?? "*****";
@@ -4462,7 +4548,7 @@ var Numeral = (props) => {
     });
   }, [num, visible, tick, dp]);
   const defaultColor = rest.color || "inherit";
-  const colorName = React70.useMemo(() => {
+  const colorName = React71.useMemo(() => {
     if (!coloring) return defaultColor;
     if (typeof visible !== "undefined" && !visible) return defaultColor;
     if (Number.isNaN(num)) {
@@ -4472,7 +4558,7 @@ var Numeral = (props) => {
     if (num < 0) return "lose";
     return "profit";
   }, [coloring, num, rest.color, props.visible]);
-  const identifier = React70.useMemo(() => {
+  const identifier = React71.useMemo(() => {
     if (!showIdentifier || Number.isNaN(num) || num === 0) return null;
     if (typeof visible !== "undefined" && !visible) return null;
     if (num < 0) {
@@ -4482,7 +4568,7 @@ var Numeral = (props) => {
     if (identifiers?.profit) return identifiers.profit;
     return /* @__PURE__ */ jsxRuntime.jsx("span", { children: "+" });
   }, [num, props.visible, showIdentifier]);
-  const childWithUnit = React70.useMemo(() => {
+  const childWithUnit = React71.useMemo(() => {
     if (typeof suffix === "undefined" && typeof prefix === "undefined" && typeof unit === "undefined" && typeof currency === "undefined" && !showIdentifier) {
       return child;
     }
@@ -4567,7 +4653,7 @@ var statisticVariants = tv({
     // color: "default",
   }
 });
-var StatisticLabel = React70__namespace.default.forwardRef(
+var StatisticLabel = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { label: labelClassName } = statisticVariants({});
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4583,10 +4669,10 @@ var StatisticLabel = React70__namespace.default.forwardRef(
   }
 );
 StatisticLabel.displayName = "StatisticLabel";
-var Statistic = React70__namespace.default.forwardRef((props, ref) => {
+var Statistic = React71__namespace.default.forwardRef((props, ref) => {
   const { label, valueProps, align, className, classNames, children, ...rest } = props;
   const { root, value: valueClassName } = statisticVariants({ align });
-  const value = React70.useMemo(() => {
+  const value = React71.useMemo(() => {
     if (typeof children === "string" || typeof children === "number") {
       const { className: valueClass, as, ...restValueProps } = valueProps ?? {};
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4630,7 +4716,7 @@ Text2.pnl = NumTypePnl;
 Text2.notional = NumTypeNotional;
 Text2.assetValue = NumTypeAssetValue;
 Text2.collateral = NumTypeCollateral;
-var BaseInput = React70.forwardRef(
+var BaseInput = React71.forwardRef(
   (props, ref) => {
     const {
       clearable,
@@ -4647,14 +4733,14 @@ var BaseInput = React70.forwardRef(
       value,
       ...inputProps
     } = props;
-    const [cursor, setCursor] = React70.useState(null);
-    const innerInputRef = React70.useRef(null);
-    const prevInputValue = React70.useRef(null);
-    const isFocused = React70.useRef(false);
-    const innerFormatters = React70.useMemo(() => {
+    const [cursor, setCursor] = React71.useState(null);
+    const innerInputRef = React71.useRef(null);
+    const prevInputValue = React71.useRef(null);
+    const isFocused = React71.useRef(false);
+    const innerFormatters = React71.useMemo(() => {
       return formatters ?? [];
     }, [formatters]);
-    React70.useEffect(() => {
+    React71.useEffect(() => {
       if (!ref) return;
       if (typeof ref === "function") {
         ref(innerInputRef.current);
@@ -4662,7 +4748,7 @@ var BaseInput = React70.forwardRef(
         ref.current = innerInputRef.current;
       }
     }, [innerInputRef, ref]);
-    const formatToRender = React70.useCallback(
+    const formatToRender = React71.useCallback(
       (value2) => {
         if (!Array.isArray(innerFormatters) || innerFormatters.length === 0)
           return value2;
@@ -4678,7 +4764,7 @@ var BaseInput = React70.forwardRef(
       },
       [innerFormatters]
     );
-    const formatToChange = React70.useCallback(
+    const formatToChange = React71.useCallback(
       (value2, originValue) => {
         if (!Array.isArray(innerFormatters) || innerFormatters.length === 0)
           return value2;
@@ -4695,11 +4781,11 @@ var BaseInput = React70.forwardRef(
       },
       [innerFormatters]
     );
-    const formattedValue = React70.useMemo(() => {
+    const formattedValue = React71.useMemo(() => {
       if (typeof value === "undefined" || value === null) return "";
       return formatToRender(value);
     }, [value, formatToRender]);
-    React70.useEffect(() => {
+    React71.useEffect(() => {
       if (document.activeElement !== innerInputRef.current) return;
       const nextValueLen = `${formattedValue}`.length;
       const prevValueLen = prevInputValue.current?.length || 0;
@@ -4924,7 +5010,7 @@ var inputVariants = tv(
     responsiveVariants: ["md", "lg"]
   }
 );
-var Input = React70__namespace.default.forwardRef((props, ref) => {
+var Input = React71__namespace.default.forwardRef((props, ref) => {
   const {
     size,
     disabled,
@@ -4951,7 +5037,7 @@ var Input = React70__namespace.default.forwardRef((props, ref) => {
     pl: typeof prefix === "undefined" || pl,
     pr: typeof suffix === "undefined" || pr
   });
-  const cid = React70.useId();
+  const cid = React71.useId();
   const suffixElement = typeof onClear !== "undefined" ? /* @__PURE__ */ jsxRuntime.jsx(
     ClearButton,
     {
@@ -5003,7 +5089,7 @@ var Input = React70__namespace.default.forwardRef((props, ref) => {
     )
   ] });
 });
-var ClearButton = React70__namespace.default.forwardRef((props, ref) => {
+var ClearButton = React71__namespace.default.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -5059,7 +5145,7 @@ var popoverVariants = tv({
 var PopoverRoot = PopoverPrimitive__namespace.Root;
 var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
 var PopoverAnchor = PopoverPrimitive__namespace.Anchor;
-var PopoverContent = React70__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+var PopoverContent = React71__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
   PopoverPrimitive__namespace.Content,
   {
     ref,
@@ -5110,7 +5196,7 @@ var scrollAreaVariants = tv({
     }
   }
 });
-var ScrollArea = React70__namespace.default.forwardRef((oriProps, ref) => {
+var ScrollArea = React71__namespace.default.forwardRef((oriProps, ref) => {
   const {
     className,
     classNames,
@@ -5140,7 +5226,7 @@ var ScrollArea = React70__namespace.default.forwardRef((oriProps, ref) => {
   );
 });
 ScrollArea.displayName = ScrollAreaPrimitive__namespace.Root.displayName;
-var ScrollBar = React70__namespace.default.forwardRef((oriProps, ref) => {
+var ScrollBar = React71__namespace.default.forwardRef((oriProps, ref) => {
   const { className, orientation = "vertical", ...props } = oriProps;
   const { bar, tumb } = scrollAreaVariants({ className, orientation });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -5313,7 +5399,7 @@ var selectVariants = tv(
 var SelectRoot = SelectPrimitive__namespace.Root;
 var SelectGroup = SelectPrimitive__namespace.Group;
 var SelectValue = SelectPrimitive__namespace.Value;
-var SelectTrigger = React70__namespace.forwardRef(
+var SelectTrigger = React71__namespace.forwardRef(
   ({
     className,
     children,
@@ -5367,7 +5453,7 @@ var SelectTrigger = React70__namespace.forwardRef(
   }
 );
 SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
-var SelectScrollUpButton = React70__namespace.forwardRef(({ className, ...props }, ref) => {
+var SelectScrollUpButton = React71__namespace.forwardRef(({ className, ...props }, ref) => {
   const { scrollUpButton } = selectVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.ScrollUpButton,
@@ -5380,7 +5466,7 @@ var SelectScrollUpButton = React70__namespace.forwardRef(({ className, ...props
   );
 });
 SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
-var SelectScrollDownButton = React70__namespace.forwardRef(({ className, ...props }, ref) => {
+var SelectScrollDownButton = React71__namespace.forwardRef(({ className, ...props }, ref) => {
   const { scrollDownButton } = selectVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.ScrollDownButton,
@@ -5393,7 +5479,7 @@ var SelectScrollDownButton = React70__namespace.forwardRef(({ className, ...prop
   );
 });
 SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
-var SelectContent = React70__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => {
+var SelectContent = React71__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,
@@ -5407,7 +5493,7 @@ var SelectContent = React70__namespace.forwardRef(({ className, children, positi
   ) });
 });
 SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
-var SelectLabel = React70__namespace.forwardRef(({ className, ...props }, ref) => {
+var SelectLabel = React71__namespace.forwardRef(({ className, ...props }, ref) => {
   const { label } = selectVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.Label,
@@ -5419,12 +5505,12 @@ var SelectLabel = React70__namespace.forwardRef(({ className, ...props }, ref) =
   );
 });
 SelectLabel.displayName = SelectPrimitive__namespace.Label.displayName;
-var SelectItem = React70__namespace.forwardRef(({ className, children, size, ...props }, ref) => {
+var SelectItem = React71__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 = React70__namespace.forwardRef(({ className, ...props }, ref) => {
+var SelectSeparator = React71__namespace.forwardRef(({ className, ...props }, ref) => {
   const { separator } = selectVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.Separator,
@@ -5438,17 +5524,17 @@ var SelectSeparator = React70__namespace.forwardRef(({ className, ...props }, re
 SelectSeparator.displayName = SelectPrimitive__namespace.Separator.displayName;
 var CombineSelect = (props) => {
   const { options, variant, valueFormatter, ...rest } = props;
-  const [keyword, setKeyword] = React70.useState("");
-  const [value, setValue] = React70.useState(props.value ?? "");
+  const [keyword, setKeyword] = React71.useState("");
+  const [value, setValue] = React71.useState(props.value ?? "");
   const { trigger } = selectVariants({
     size: props.size,
     variant
   });
-  const [selectedIndex, setSelectedIndex] = React70.useState(
+  const [selectedIndex, setSelectedIndex] = React71.useState(
     () => typeof props.value === "undefined" ? -1 : options.findIndex((option) => option.value === props.value)
   );
-  const [focused, setFocused] = React70.useState(false);
-  const inputRef = React70.useRef(null);
+  const [focused, setFocused] = React71.useState(false);
+  const inputRef = React71.useRef(null);
   const onFocus = () => {
     setFocused(true);
   };
@@ -5618,7 +5704,7 @@ var SelectWithOptions = (props) => {
     ...rest
   } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(Select, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(SelectGroup, { children: options.map((option, index) => {
-    return React70__namespace.default.cloneElement(optionRenderer(option, currentValue), {
+    return React71__namespace.default.cloneElement(optionRenderer(option, currentValue), {
       size: props.size,
       key: index,
       index
@@ -5628,7 +5714,7 @@ var SelectWithOptions = (props) => {
 var TokenSelect = (props) => {
   const { tokens, showIcon = true, iconSize, showCaret, ...rest } = props;
   const { icon } = selectVariants();
-  const options = React70.useMemo(() => {
+  const options = React71.useMemo(() => {
     return tokens.map((token) => {
       return {
         ...token,
@@ -5706,16 +5792,16 @@ var Select2 = Select;
 Select2.options = SelectWithOptions;
 Select2.combine = CombineSelect;
 Select2.tokens = TokenSelect;
-var QuantityInput = React70.forwardRef(
+var QuantityInput = React71.forwardRef(
   (props, ref) => {
     const { tokens, ...rest } = props;
-    const [token, setToken] = React70.useState(tokens[0]);
-    const tokenOptions = React70.useMemo(() => {
+    const [token, setToken] = React71.useState(tokens[0]);
+    const tokenOptions = React71.useMemo(() => {
       return props.tokens.map((token2) => ({
         name: token2
       }));
     }, [props.tokens]);
-    const inputRef = React70.useRef(null);
+    const inputRef = React71.useRef(null);
     return /* @__PURE__ */ jsxRuntime.jsx(
       Input,
       {
@@ -5781,7 +5867,7 @@ var tooltipVariants = tv({
     "data-[side=top]:oui-slide-in-from-bottom-2"
   ]
 });
-var TooltipContent = React70__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
+var TooltipContent = React71__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     TooltipPrimitive__namespace.Content,
     {
@@ -5812,7 +5898,7 @@ var TooltipArrow = (props) => {
     }
   );
 };
-var Tooltip = React70__namespace.forwardRef((originalProps, ref) => {
+var Tooltip = React71__namespace.forwardRef((originalProps, ref) => {
   const {
     children,
     content,
@@ -5844,10 +5930,10 @@ var Tooltip = React70__namespace.forwardRef((originalProps, ref) => {
   );
 });
 Tooltip.displayName = "Tooltip";
-var InputWithTooltip = React70.forwardRef((props, ref) => {
+var InputWithTooltip = React71.forwardRef((props, ref) => {
   const { tooltip, tooltipProps, triggerClassName, ...inputProps } = props;
-  const [open, setOpen] = React70.useState(false);
-  React70.useEffect(() => {
+  const [open, setOpen] = React71.useState(false);
+  React71.useEffect(() => {
     if (typeof tooltip !== "undefined" && tooltip !== "" && tooltip !== null) {
       setOpen(true);
     } else {
@@ -6044,7 +6130,7 @@ var inputHelpTextVariants = tailwindVariants.tv({
     }
   }
 });
-var InputHelpText = React70__namespace.default.forwardRef(
+var InputHelpText = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { className, asChild, color, ...rest } = props;
     const Comp = asChild ? reactSlot.Slot : "div";
@@ -6082,7 +6168,7 @@ var textFieldVariants = tv({
     direction: "column"
   }
 });
-var TextField = React70__namespace.default.forwardRef((props, ref) => {
+var TextField = React71__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: [
@@ -6100,7 +6186,7 @@ var TextField = React70__namespace.default.forwardRef((props, ref) => {
   ] });
 });
 TextField.displayName = "TextField";
-var InputLabel = React70__namespace.default.forwardRef(
+var InputLabel = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { asChild = false, className, ...rest } = props;
     const Comp = asChild ? reactSlot.Slot : "label";
@@ -6152,7 +6238,7 @@ var checkboxVariants = tailwindVariants.tv({
     // style: "checkBox",
   }
 });
-var Checkbox = React70__namespace.forwardRef(({ className, color = "white", variant = "checkBox", ...props }, ref) => {
+var Checkbox = React71__namespace.forwardRef(({ className, color = "white", variant = "checkBox", ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     CheckboxPrimitive__namespace.Root,
     {
@@ -6282,7 +6368,7 @@ var switchVariants = tailwindVariants.tv({
     color: "primary"
   }
 });
-var Switch = React70__namespace.default.forwardRef(({ className, color, ...props }, ref) => {
+var Switch = React71__namespace.default.forwardRef(({ className, color, ...props }, ref) => {
   const { root, thumb } = switchVariants({
     className,
     color
@@ -6403,7 +6489,7 @@ function Badge({ className, variant, color, size, ...props }) {
     }
   );
 }
-var Logo = React70__namespace.default.forwardRef(({ src, alt, href }, ref) => {
+var Logo = React71__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",
     {
@@ -6416,8 +6502,8 @@ var Logo = React70__namespace.default.forwardRef(({ src, alt, href }, ref) => {
 Logo.displayName = "LogoElement";
 function useInit(params) {
   const { dataSource, loading, ignoreLoadingCheck } = params;
-  const [initialized, setInitialized] = React70.useState(false);
-  React70.useEffect(() => {
+  const [initialized, setInitialized] = React71.useState(false);
+  React71.useEffect(() => {
     if (initialized) return;
     if (ignoreLoadingCheck || loading || Array.isArray(dataSource)) {
       setInitialized(true);
@@ -6426,10 +6512,10 @@ function useInit(params) {
   return initialized;
 }
 function useScroll(deps) {
-  const scrollRef = React70.useRef(null);
-  const [showLeftShadow, setShowLeftShadow] = React70.useState(false);
-  const [showRightShadow, setShowRightShadow] = React70.useState(false);
-  React70.useEffect(() => {
+  const scrollRef = React71.useRef(null);
+  const [showLeftShadow, setShowLeftShadow] = React71.useState(false);
+  const [showRightShadow, setShowRightShadow] = React71.useState(false);
+  React71.useEffect(() => {
     if (!scrollRef.current) {
       return;
     }
@@ -6438,7 +6524,7 @@ function useScroll(deps) {
       setShowRightShadow(!isScrolledToRight(scrollRef.current));
     });
   }, [scrollRef]);
-  React70.useEffect(() => {
+  React71.useEffect(() => {
     if (!scrollRef.current) {
       return;
     }
@@ -6460,14 +6546,14 @@ function hasHorizontalScroll(element) {
 }
 function useShowHeader(params) {
   const { dataSource, loading } = params;
-  const initShowHeader = React70.useRef(false);
-  const showHeader = React70.useMemo(() => {
+  const initShowHeader = React71.useRef(false);
+  const showHeader = React71.useMemo(() => {
     if (loading && !dataSource?.length) {
       return initShowHeader.current;
     }
     return !!dataSource?.length;
   }, [loading, dataSource]);
-  React70.useEffect(() => {
+  React71.useEffect(() => {
     if (showHeader) {
       initShowHeader.current = true;
     }
@@ -6476,8 +6562,8 @@ function useShowHeader(params) {
 }
 function useShowPagination(params) {
   const { loading, dataSource, pagination, rows } = params;
-  const initShowPagination = React70.useRef(false);
-  const showPagination = React70.useMemo(() => {
+  const initShowPagination = React71.useRef(false);
+  const showPagination = React71.useMemo(() => {
     if (loading && !dataSource?.length) {
       return initShowPagination.current;
     }
@@ -6486,7 +6572,7 @@ function useShowPagination(params) {
     }
     return false;
   }, [loading, pagination, dataSource, rows]);
-  React70.useEffect(() => {
+  React71.useEffect(() => {
     if (showPagination) {
       initShowPagination.current = true;
     }
@@ -6495,7 +6581,7 @@ function useShowPagination(params) {
 }
 function useSort(props) {
   const { onSort, initialSort } = props;
-  const [sorting, setSorting] = React70.useState(
+  const [sorting, setSorting] = React71.useState(
     initialSort ? [
       {
         id: initialSort.sortKey,
@@ -6503,7 +6589,7 @@ function useSort(props) {
       }
     ] : []
   );
-  React70.useEffect(() => {
+  React71.useEffect(() => {
     const { id, desc } = sorting[0] || {};
     onSort?.(id ? { sortKey: id, sort: desc ? "desc" : "asc" } : void 0);
   }, [sorting, onSort]);
@@ -6516,11 +6602,11 @@ function useMediaQuery(query) {
     }
     return false;
   };
-  const [matches, setMatches] = React70.useState(getMatches(query));
+  const [matches, setMatches] = React71.useState(getMatches(query));
   function handleChange() {
     setMatches(getMatches(query));
   }
-  React70.useEffect(() => {
+  React71.useEffect(() => {
     const matchMedia = window?.matchMedia(query);
     handleChange();
     if (matchMedia?.addListener) {
@@ -6548,7 +6634,7 @@ function useScreen() {
   };
 }
 function useObserverElement(element, callback) {
-  React70.useEffect(() => {
+  React71.useEffect(() => {
     if (!element) {
       return;
     }
@@ -6564,11 +6650,11 @@ function useObserverElement(element, callback) {
   }, [element]);
 }
 function useLongPress(callback, longPressTime = 600) {
-  const timeoutRef = React70.useRef(null);
-  const targetRef = React70.useRef(null);
-  const startPositionRef = React70.useRef(null);
-  const isLongPressTriggeredRef = React70.useRef(false);
-  const clearLongPress = React70.useCallback(() => {
+  const timeoutRef = React71.useRef(null);
+  const targetRef = React71.useRef(null);
+  const startPositionRef = React71.useRef(null);
+  const isLongPressTriggeredRef = React71.useRef(false);
+  const clearLongPress = React71.useCallback(() => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
@@ -6577,7 +6663,7 @@ function useLongPress(callback, longPressTime = 600) {
     startPositionRef.current = null;
     isLongPressTriggeredRef.current = false;
   }, []);
-  const startLongPress = React70.useCallback(
+  const startLongPress = React71.useCallback(
     (e) => {
       clearLongPress();
       if ("touches" in e) {
@@ -6598,17 +6684,17 @@ function useLongPress(callback, longPressTime = 600) {
     },
     [callback, longPressTime, clearLongPress]
   );
-  const handleMouseDown = React70.useCallback(
+  const handleMouseDown = React71.useCallback(
     (e) => {
       if (e.button !== 0) return;
       startLongPress(e);
     },
     [startLongPress]
   );
-  const handleMouseUp = React70.useCallback(() => {
+  const handleMouseUp = React71.useCallback(() => {
     clearLongPress();
   }, [clearLongPress]);
-  const handleMouseMove = React70.useCallback(
+  const handleMouseMove = React71.useCallback(
     (e) => {
       if (isLongPressTriggeredRef.current) return;
       if (startPositionRef.current) {
@@ -6622,25 +6708,25 @@ function useLongPress(callback, longPressTime = 600) {
     },
     [clearLongPress]
   );
-  const handleMouseLeave = React70.useCallback(() => {
+  const handleMouseLeave = React71.useCallback(() => {
     clearLongPress();
   }, [clearLongPress]);
-  const handleContextMenu = React70.useCallback((e) => {
+  const handleContextMenu = React71.useCallback((e) => {
     if (timeoutRef.current || isLongPressTriggeredRef.current) {
       e.preventDefault();
       e.stopPropagation();
     }
   }, []);
-  const handleTouchStart = React70.useCallback(
+  const handleTouchStart = React71.useCallback(
     (e) => {
       startLongPress(e);
     },
     [startLongPress]
   );
-  const handleTouchEnd = React70.useCallback(() => {
+  const handleTouchEnd = React71.useCallback(() => {
     clearLongPress();
   }, [clearLongPress]);
-  const handleTouchMove = React70.useCallback(
+  const handleTouchMove = React71.useCallback(
     (e) => {
       if (timeoutRef.current) {
         e.preventDefault();
@@ -6661,7 +6747,7 @@ function useLongPress(callback, longPressTime = 600) {
     },
     [clearLongPress]
   );
-  const handleTouchCancel = React70.useCallback(() => {
+  const handleTouchCancel = React71.useCallback(() => {
     clearLongPress();
   }, [clearLongPress]);
   return {
@@ -6677,8 +6763,8 @@ function useLongPress(callback, longPressTime = 600) {
   };
 }
 var useThemeAttribute = () => {
-  const [themeAttribute, setThemeAttribute] = React70.useState("");
-  React70.useEffect(() => {
+  const [themeAttribute, setThemeAttribute] = React71.useState("");
+  React71.useEffect(() => {
     setThemeAttribute(
       document.documentElement.getAttribute("data-oui-theme") ?? ""
     );
@@ -6703,9 +6789,9 @@ var useThemeAttribute = () => {
 
 // src/table/hooks/useWrap.ts
 function useWrap(deps) {
-  const wrapRef = React70.useRef(null);
+  const wrapRef = React71.useRef(null);
   const themeAttribute = useThemeAttribute();
-  React70.useEffect(() => {
+  React71.useEffect(() => {
     if (!wrapRef.current) return;
     const bgColor = window.getComputedStyle(wrapRef.current).backgroundColor;
     wrapRef.current.style.setProperty("--oui-table-background-color", bgColor);
@@ -6798,7 +6884,7 @@ var TableBody = (props) => {
             children: props.expandRowRender?.(row, row.index)
           }
         ) });
-        const rowView = /* @__PURE__ */ jsxRuntime.jsxs(React70.Fragment, { children: [
+        const rowView = /* @__PURE__ */ jsxRuntime.jsxs(React71.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "tr",
             {
@@ -6859,7 +6945,7 @@ var TableBody = (props) => {
           expandView
         ] }, row.id);
         if (typeof props.renderRowContainer === "function") {
-          return /* @__PURE__ */ jsxRuntime.jsx(React70.Fragment, { children: props.renderRowContainer(row.original, row.index, rowView, row) }, row.id);
+          return /* @__PURE__ */ jsxRuntime.jsx(React71.Fragment, { children: props.renderRowContainer(row.original, row.index, rowView, row) }, row.id);
         }
         return rowView;
       })
@@ -6941,7 +7027,7 @@ var DescendingIcon = () => {
 };
 function useMultiSort(props) {
   const { onSort, currentSorting } = props;
-  const handleFieldSort = React70.useCallback(
+  const handleFieldSort = React71.useCallback(
     (fieldKey) => {
       const isCurrentField = currentSorting?.sortKey === fieldKey;
       let newOrder;
@@ -6956,7 +7042,7 @@ function useMultiSort(props) {
     },
     [currentSorting, onSort]
   );
-  const getFieldSort = React70.useCallback(
+  const getFieldSort = React71.useCallback(
     (fieldKey) => {
       if (currentSorting?.sortKey === fieldKey) {
         return { sortKey: fieldKey, sort: currentSorting.sort };
@@ -7112,9 +7198,9 @@ var SortIndicator2 = ({ isSorted }) => {
     desc: /* @__PURE__ */ jsxRuntime.jsx(DescendingIcon, {})
   }[isSorted] || /* @__PURE__ */ jsxRuntime.jsx(SortingIcon2, {});
 };
-var LocaleContext = React70.createContext(void 0);
+var LocaleContext = React71.createContext(void 0);
 var LocaleProvider = (props) => {
-  const value = React70.useMemo(
+  const value = React71.useMemo(
     () => ({ ...props.locale, exist: true }),
     [props.locale]
   );
@@ -7145,8 +7231,8 @@ var localeValues = {
 
 // src/locale/useLocale.ts
 var useLocale = (componentName, defaultLocale) => {
-  const fullLocale = React70.useContext(LocaleContext);
-  const getLocale = React70.useMemo(() => {
+  const fullLocale = React71.useContext(LocaleContext);
+  const getLocale = React71.useMemo(() => {
     const locale = defaultLocale || localeValues[componentName];
     const localeFromContext = fullLocale?.[componentName] || {};
     return {
@@ -7154,7 +7240,7 @@ var useLocale = (componentName, defaultLocale) => {
       ...localeFromContext
     };
   }, [componentName, defaultLocale, fullLocale]);
-  const getLocaleCode = React70.useMemo(() => {
+  const getLocaleCode = React71.useMemo(() => {
     const localeCode = fullLocale?.locale;
     const defaultLocaleCode = localeValues.locale;
     return localeCode || defaultLocaleCode;
@@ -7174,7 +7260,7 @@ var Pagination = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   }
 );
 Pagination.displayName = "Pagination";
-var PaginationContent = React70__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var PaginationContent = React71__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "ul",
   {
     ref,
@@ -7186,7 +7272,7 @@ var PaginationContent = React70__namespace.default.forwardRef(({ className, ...p
   }
 ));
 PaginationContent.displayName = "PaginationContent";
-var PaginationItem = React70__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("li", { ref, className: tailwindVariants.cnBase("oui-leading-[0px]", className), ...props }));
+var PaginationItem = React71__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,
@@ -7318,7 +7404,7 @@ var PaginationItems = (props) => {
   if (totalPages <= 1) {
     return null;
   }
-  const pageNumbers = React70.useMemo(() => {
+  const pageNumbers = React71.useMemo(() => {
     if (typeof props.generatePageNumbers === "function") {
       return props.generatePageNumbers(currentPage, totalPages);
     }
@@ -7378,139 +7464,26 @@ var TablePagination = (props) => {
     }
   ) });
 };
-var OrderlyExtensionRegistry = class _OrderlyExtensionRegistry {
-  // private static _instance: OrderlyExtensionRegistry;
-  static getInstance() {
-    const globalObject = utils.getGlobalObject();
-    if (!globalObject.__ORDERLY_EXTENSION_REGISTRY__) {
-      globalObject.__ORDERLY_EXTENSION_REGISTRY__ = new _OrderlyExtensionRegistry();
-    }
-    return globalObject.__ORDERLY_EXTENSION_REGISTRY__;
-  }
-  extensionMap = /* @__PURE__ */ new Map();
-  // private formatterMap: Map<string, Function> = new Map();
-  register(plugin3) {
-    if (!plugin3.builder) ;
-    for (let index = 0; index < plugin3.positions.length; index++) {
-      if (typeof plugin3.builder !== "function") {
-        const builder = this.extensionMap.get(plugin3.positions[index])?.builder;
-        plugin3.builder = typeof builder === "undefined" ? (
-          // ? DEFAULT_BUILDER
-          void 0
-        ) : builder;
-      }
-      const pos = plugin3.positions[index];
-      this.registerToPosition(pos, plugin3);
-    }
-  }
-  registerToPosition(position, plugin3) {
-    if (this.extensionMap.has(position)) {
-      const existingPlugin = this.extensionMap.get(position);
-      if (!existingPlugin?.__isInternal) {
-        if (!existingPlugin?.builder && plugin3.__isInternal) {
-          this.setBuilder(position, plugin3.builder);
-        }
-        return;
-      }
-      if (!plugin3.builder) {
-        plugin3.builder = existingPlugin.builder;
-      }
-    }
-    this.extensionMap.set(position, plugin3);
-  }
-  setBuilder(position, builder) {
-    const plugin3 = this.extensionMap.get(position);
-    if (plugin3) {
-      plugin3.builder = builder;
-    }
-  }
-  unregister(plugin3) {
-    for (let index = 0; index < plugin3.positions.length; index++) {
-      const pos = plugin3.positions[index];
-      this.unregisterFromPosition(pos);
-    }
-  }
-  unregisterFromPosition(position) {
-    this.extensionMap.delete(position);
-  }
-  getPluginsByPosition(position) {
-    return this.extensionMap.get(position);
-  }
-  /**
-   * get the registered formatter by position
-   * @param position
-   */
-  getFormatterByPosition(position) {
-    return this.extensionMap.get(position);
-  }
-};
-
-// src/plugin/install.tsx
-var installExtension = (options) => {
-  return (component) => {
-    const registry = OrderlyExtensionRegistry.getInstance();
-    registry.register({
-      name: options.name,
-      positions: options.positions,
-      __isInternal: !!options.__isInternal,
-      builder: options.builder,
-      render: component
-    });
-  };
-};
-var setExtensionBuilder = (position, builder) => {
-  const registry = OrderlyExtensionRegistry.getInstance();
-  registry.setBuilder(position, builder);
-};
-var NotFound = (props) => {
-  const { position } = props;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-danger", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: `[${position}] ` }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Not found!" })
-  ] });
-};
-
-// src/plugin/useBuilder.ts
-var useBuilder = (position, props) => {
-  const registry = OrderlyExtensionRegistry.getInstance();
-  const plugin3 = registry.getPluginsByPosition(position);
-  return () => {
-    return plugin3?.builder?.(props) || props;
-  };
-};
-
-// src/plugin/useExtensionBuilder.ts
-var useExtensionBuilder = (position, props) => {
-  const builder = useBuilder(position, props);
-  return builder();
-};
-var ExtensionSlot = (props) => {
-  const { position, scope, defaultWidget: defaultValue, ...rest } = props;
-  const elementProps = useExtensionBuilder(position, rest);
-  const Ele = React70.useMemo(() => {
-    const registry = OrderlyExtensionRegistry.getInstance();
-    const plugin3 = registry.getPluginsByPosition(position);
-    return plugin3?.render ?? defaultValue ?? NotFound;
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactErrorBoundary.ErrorBoundary,
+var EmptyDataState = (props) => {
+  const [locale] = useLocale("empty");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Flex,
     {
-      fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { children: `Component: [${position}] went wrong` }),
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { ...elementProps, position, children: /* @__PURE__ */ jsxRuntime.jsx(Ele, {}) })
+      itemAlign: "center",
+      direction: "column",
+      gapY: 4,
+      className: props.className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Box, { children: /* @__PURE__ */ jsxRuntime.jsx(emptyData_default, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Text2, { as: "div", intensity: 36, size: "2xs", children: props.title ?? locale.description })
+      ]
     }
   );
 };
-
-// src/plugin/types.ts
-var ExtensionPositionEnum = /* @__PURE__ */ ((ExtensionPositionEnum2) => {
-  ExtensionPositionEnum2["DepositForm"] = "depositForm";
-  ExtensionPositionEnum2["WithdrawForm"] = "withdrawForm";
-  ExtensionPositionEnum2["AccountMenu"] = "accountMenu";
-  ExtensionPositionEnum2["MobileAccountMenu"] = "mobileAccountMenu";
-  ExtensionPositionEnum2["MainMenus"] = "mainMenus";
-  ExtensionPositionEnum2["EmptyDataIdentifier"] = "emptyDataIdentifier";
-  return ExtensionPositionEnum2;
-})(ExtensionPositionEnum || {});
+var InjectableEmptyDataState = pluginCore.injectable(
+  EmptyDataState,
+  "Table.EmptyDataIdentifier"
+);
 var TablePlaceholder = (props) => {
   const { visible, loading, emptyView, className } = props;
   if (!visible) {
@@ -7528,7 +7501,7 @@ var TablePlaceholder = (props) => {
         "oui-flex oui-items-center oui-justify-center",
         className
       ),
-      children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) : emptyView || /* @__PURE__ */ jsxRuntime.jsx(ExtensionSlot, { position: "emptyDataIdentifier" /* EmptyDataIdentifier */ })
+      children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) : emptyView || /* @__PURE__ */ jsxRuntime.jsx(InjectableEmptyDataState, {})
     }
   );
 };
@@ -7728,10 +7701,10 @@ function DataTable(props) {
     onSort,
     initialSort
   });
-  const hasMultiSortColumns = React70.useMemo(() => {
+  const hasMultiSortColumns = React71.useMemo(() => {
     return columns.some((col) => col.multiSort && !col.multiSort.onSort);
   }, [columns]);
-  const effectiveManualSorting = React70.useMemo(() => {
+  const effectiveManualSorting = React71.useMemo(() => {
     if (!hasMultiSortColumns) {
       return manualSorting;
     }
@@ -7745,27 +7718,27 @@ function DataTable(props) {
     }
     return false;
   }, [hasMultiSortColumns, manualSorting, sorting, columns]);
-  const dataSource = React70.useMemo(() => {
+  const dataSource = React71.useMemo(() => {
     return Transform.dataSource(props.dataSource || [], columns, sorting);
   }, [props.dataSource, columns, sorting]);
-  const formatColumns = React70.useMemo(
+  const formatColumns = React71.useMemo(
     () => Transform.columns(columns, sorting, setSorting),
     [columns, sorting, setSorting]
   );
-  const columnPinning = React70.useMemo(
+  const columnPinning = React71.useMemo(
     () => Transform.columnPinning(columns),
     [columns]
   );
-  const rowSelection = React70.useMemo(
+  const rowSelection = React71.useMemo(
     () => props.rowSelection || {},
     [props.rowSelection]
   );
-  const { state: paginationState, config: paginationConfig } = React70.useMemo(
+  const { state: paginationState, config: paginationConfig } = React71.useMemo(
     () => Transform.pagination(pagination),
     [pagination]
   );
   const initialized = useInit({ dataSource, loading, ignoreLoadingCheck });
-  const columnFilters = React70.useMemo(() => {
+  const columnFilters = React71.useMemo(() => {
     return Array.isArray(props.columnFilters) ? props.columnFilters : props.columnFilters ? [props.columnFilters] : [];
   }, [props.columnFilters]);
   const table = reactTable.useReactTable({
@@ -7801,7 +7774,7 @@ function DataTable(props) {
     ...paginationConfig
     // ...sortConfig,
   });
-  React70.useEffect(() => {
+  React71.useEffect(() => {
     props.getTableInstance?.(table);
   }, [table]);
   const wrapRef = useWrap([className, classNames?.root]);
@@ -7992,15 +7965,15 @@ var DateRangePicker = (props) => {
     ...calendarProps
   } = props;
   const [locale] = useLocale("picker");
-  const [open, setOpen] = React70.useState(false);
-  const [dateRange, setDateRange] = React70.useState(
+  const [open, setOpen] = React71.useState(false);
+  const [dateRange, setDateRange] = React71.useState(
     value || initialValue || null
   );
-  const [isMobileView, setIsMobileView] = React70.useState(false);
+  const [isMobileView, setIsMobileView] = React71.useState(false);
   const update = useDebouncedCallback((width) => {
     setIsMobileView(width <= 768);
   }, 100);
-  React70.useEffect(() => {
+  React71.useEffect(() => {
     const handleResize = () => {
       update(window.innerWidth);
     };
@@ -8010,12 +7983,12 @@ var DateRangePicker = (props) => {
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  React70.useEffect(() => {
+  React71.useEffect(() => {
     if (value?.from && value?.to && dateRange?.from && dateRange?.to && !areDatesEqual(value, dateRange))
       setDateRange(value);
   }, [value]);
   const { trigger } = selectVariants({ size, className });
-  const formattedValue = React70.useMemo(() => {
+  const formattedValue = React71.useMemo(() => {
     if (!dateRange || !dateRange.from || !dateRange.to) {
       return placeholder ?? locale.selectDate;
     }
@@ -8089,8 +8062,8 @@ var DateRangePicker = (props) => {
 };
 DateRangePicker.displayName = "DateRangePicker";
 function useDebouncedCallback(callback, delay) {
-  const timeoutRef = React70.useRef(null);
-  const debouncedCallback = React70.useCallback(
+  const timeoutRef = React71.useRef(null);
+  const debouncedCallback = React71.useCallback(
     (args) => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
@@ -8128,8 +8101,8 @@ var DatePicker = (props) => {
   } = props;
   const [locale] = useLocale("picker");
   const { trigger } = selectVariants({ size });
-  const [open, setOpen] = React70.useState(false);
-  const formattedValue = React70.useMemo(() => {
+  const [open, setOpen] = React71.useState(false);
+  const formattedValue = React71.useMemo(() => {
     if (typeof value === "undefined") {
       return placeholder ?? locale.selectDate;
     }
@@ -8196,7 +8169,7 @@ var Sheet = DialogPrimitive__namespace.Root;
 var SheetTrigger = DialogPrimitive__namespace.Trigger;
 var SheetClose = DialogPrimitive__namespace.Close;
 var SheetPortal = DialogPrimitive__namespace.Portal;
-var SheetOverlay = React70__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SheetOverlay = React71__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Overlay,
   {
     className: tailwindVariants.cnBase(
@@ -8222,7 +8195,7 @@ var sheetVariants = tailwindVariants.tv({
     side: "bottom"
   }
 });
-var SheetContent = React70__namespace.forwardRef(
+var SheetContent = React71__namespace.forwardRef(
   ({
     side = "bottom",
     closeable = true,
@@ -8318,7 +8291,7 @@ var SheetFooter = ({
   }
 );
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React70__namespace.forwardRef(({ className, leading, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var SheetTitle = React71__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",
@@ -8339,7 +8312,7 @@ var SheetTitle = React70__namespace.forwardRef(({ className, leading, ...props }
   }
 ));
 SheetTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var SheetDescription = React70__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SheetDescription = React71__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Description,
   {
     ref,
@@ -8364,8 +8337,8 @@ var getModalId = (modal2) => {
   return modal2[symModalId];
 };
 function useModal(modal2, args) {
-  const modals = React70.useContext(ModalContext);
-  const modalIdFromContext = React70.useContext(ModalIdContext);
+  const modals = React71.useContext(ModalContext);
+  const modalIdFromContext = React71.useContext(ModalIdContext);
   let modalId;
   let isComponent = modal2 && typeof modal2 !== "string";
   if (!modal2) {
@@ -8377,19 +8350,19 @@ function useModal(modal2, args) {
     throw new Error("modalId is required");
   }
   const id = modalId;
-  React70.useEffect(() => {
+  React71.useEffect(() => {
     if (isComponent) {
       register(id, modal2, args);
     }
   }, [isComponent, modalId, modal2, args]);
   const modalInfo = modals[id];
-  const show2 = React70.useCallback(
+  const show2 = React71.useCallback(
     (args2) => modalActions.show(id, args2),
     [id]
   );
-  const hide2 = React70.useCallback(() => modalActions.hide(id), [id]);
-  const remove2 = React70.useCallback(() => modalActions.remove(id), [id]);
-  const onOpenChange = React70.useCallback(
+  const hide2 = React71.useCallback(() => modalActions.hide(id), [id]);
+  const remove2 = React71.useCallback(() => modalActions.remove(id), [id]);
+  const onOpenChange = React71.useCallback(
     (isOpen) => {
       if (!isOpen) {
         reject("cancel");
@@ -8398,33 +8371,33 @@ function useModal(modal2, args) {
     },
     [id]
   );
-  const setStates2 = React70.useCallback(
+  const setStates2 = React71.useCallback(
     (states) => {
       modalActions.setStates(id, states);
     },
     [id]
   );
-  const updateArgs2 = React70.useCallback(
+  const updateArgs2 = React71.useCallback(
     (args2) => {
       modalActions.updateArgs(id, args2);
     },
     [id]
   );
-  const resolve = React70.useCallback(
+  const resolve = React71.useCallback(
     (args2) => {
       modalCallbacks[id]?.resolve(args2);
       delete modalCallbacks[id];
     },
     [id]
   );
-  const reject = React70.useCallback(
+  const reject = React71.useCallback(
     (args2) => {
       modalCallbacks[id]?.reject(args2);
       delete modalCallbacks[id];
     },
     [id]
   );
-  const resolveHide = React70.useCallback((args2) => {
+  const resolveHide = React71.useCallback((args2) => {
     hideModalCallbacks[id]?.resolve(args2);
     delete hideModalCallbacks[id];
   }, []);
@@ -8458,9 +8431,9 @@ var MODAL_REGISTRY = /* @__PURE__ */ new Map();
 var create = (Comp) => {
   return ({ id, defaultVisible, keepMounted, ...props }) => {
     const { args, show: show2 } = useModal(id);
-    const modals = React70.useContext(ModalContext);
+    const modals = React71.useContext(ModalContext);
     const shouldMount = !!modals[id];
-    React70.useEffect(() => {
+    React71.useEffect(() => {
       if (defaultVisible) {
         show2();
       }
@@ -8471,11 +8444,11 @@ var create = (Comp) => {
         }
       };
     }, [id, show2, defaultVisible]);
-    React70.useEffect(() => {
+    React71.useEffect(() => {
       if (keepMounted) modalActions.setStates(id, { keepMounted: true });
     }, [id, keepMounted]);
     const delayVisible = modals[id]?.delayVisible;
-    React70.useEffect(() => {
+    React71.useEffect(() => {
       if (delayVisible) {
         show2(args);
       }
@@ -8496,8 +8469,8 @@ var unregister = (id) => {
 };
 var initialState = {};
 var ALREADY_MOUNTED = {};
-var ModalContext = React70.createContext(initialState);
-var ModalIdContext = React70.createContext(null);
+var ModalContext = React71.createContext(initialState);
+var ModalIdContext = React71.createContext(null);
 var modalCallbacks = {};
 var hideModalCallbacks = {};
 var dispatch = () => {
@@ -8606,7 +8579,7 @@ var reducer = (state, action) => {
   }
 };
 var ModalContainer = () => {
-  const modals = React70.useContext(ModalContext);
+  const modals = React71.useContext(ModalContext);
   const visibleModalIds = Object.keys(modals).filter((id) => !!modals[id]);
   visibleModalIds.forEach((id) => {
     if (!MODAL_REGISTRY.has(id) && !ALREADY_MOUNTED[id]) {
@@ -8625,7 +8598,7 @@ var ModalContainer = () => {
   }) });
 };
 var ModalProvider = (props) => {
-  const [state, dispatchOrigin] = React70.useReducer(reducer, initialState);
+  const [state, dispatchOrigin] = React71.useReducer(reducer, initialState);
   dispatch = dispatchOrigin;
   return /* @__PURE__ */ jsxRuntime.jsxs(ModalContext.Provider, { value: state, children: [
     props.children,
@@ -8729,7 +8702,7 @@ var dividerVariants = tv({
     intensity: 4
   }
 });
-var Divider = React70__namespace.default.forwardRef((props, ref) => {
+var Divider = React71__namespace.default.forwardRef((props, ref) => {
   const { className, intensity, direction, lineStyle, mx, my, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -8937,7 +8910,7 @@ var Dialog = DialogPrimitive__namespace.Root;
 var DialogTrigger = DialogPrimitive__namespace.Trigger;
 var DialogPortal = DialogPrimitive__namespace.Portal;
 var DialogClose = DialogPrimitive__namespace.Close;
-var DialogOverlay = React70__namespace.forwardRef(({ className, ...props }, ref) => {
+var DialogOverlay = React71__namespace.forwardRef(({ className, ...props }, ref) => {
   const { overlay } = dialogVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Overlay,
@@ -8949,7 +8922,7 @@ var DialogOverlay = React70__namespace.forwardRef(({ className, ...props }, ref)
   );
 });
 DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
-var DialogContent = React70__namespace.forwardRef(
+var DialogContent = React71__namespace.forwardRef(
   ({
     overlyClassName,
     className,
@@ -9011,7 +8984,7 @@ var DialogFooter = ({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: footer({ className }), ...props });
 };
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React70__namespace.forwardRef(({ className, ...props }, ref) => {
+var DialogTitle = React71__namespace.forwardRef(({ className, ...props }, ref) => {
   const { title } = dialogVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Title,
@@ -9023,7 +8996,7 @@ var DialogTitle = React70__namespace.forwardRef(({ className, ...props }, ref) =
   );
 });
 DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var DialogDescription = React70__namespace.forwardRef(({ className, ...props }, ref) => {
+var DialogDescription = React71__namespace.forwardRef(({ className, ...props }, ref) => {
   const { desc } = dialogVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Description,
@@ -9037,10 +9010,10 @@ var DialogDescription = React70__namespace.forwardRef(({ className, ...props },
 DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
 var SimpleDialogFooter = (props) => {
   const { actions } = props;
-  const [primaryLoading, setPrimaryLoading] = React70.useState(
+  const [primaryLoading, setPrimaryLoading] = React71.useState(
     actions?.primary?.loading ?? false
   );
-  React70.useEffect(() => {
+  React71.useEffect(() => {
     if (actions?.primary?.loading) {
       setPrimaryLoading(actions?.primary?.loading);
     }
@@ -9049,7 +9022,7 @@ var SimpleDialogFooter = (props) => {
     };
   }, [actions?.primary?.loading]);
   if (!actions) return null;
-  const buttons = React70.useMemo(() => {
+  const buttons = React71.useMemo(() => {
     const buttons2 = [];
     if (actions.secondary && typeof actions.secondary.onClick === "function") {
       const {
@@ -9156,7 +9129,7 @@ var AlertDialog = (props) => {
     classNames
   } = props;
   const { isMobile } = useScreen();
-  const actions = React70.useMemo(() => {
+  const actions = React71.useMemo(() => {
     if (typeof onOk !== "function" && typeof onCancel !== "function")
       return void 0;
     const actions2 = {};
@@ -9209,7 +9182,7 @@ var AlertDialog = (props) => {
 var CreatedAlertDialog = create((props) => {
   const { onOk } = props;
   const { visible, hide: hide2, resolve, reject, onOpenChange } = useModal();
-  const onOkHandler = React70.useCallback(() => {
+  const onOkHandler = React71.useCallback(() => {
     return Promise.resolve().then(onOk).then(hide2);
   }, [onOk]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -9426,14 +9399,14 @@ function registerSimpleSheet(id, comp, props) {
 }
 var ActionItem = (props) => {
   const { action } = props;
-  const onItemClick = React70.useCallback(() => {
+  const onItemClick = React71.useCallback(() => {
     if (typeof action.onClick === "function") {
       action.onClick(action);
     } else {
       props.onClick?.({ ...action, index: props.index });
     }
   }, [action]);
-  const child = React70.useMemo(() => {
+  const child = React71.useMemo(() => {
     return action.label;
   }, [action.label]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -9456,7 +9429,7 @@ var ActionSheetContent = (props) => {
     if (action.type === "division") {
       return /* @__PURE__ */ jsxRuntime.jsx(ActionDivision, {}, index);
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs(React70.Fragment, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(React71.Fragment, { children: [
       action.value === "cancel" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-h-2 oui-bg-base-10" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         ActionItem,
@@ -9483,7 +9456,7 @@ var ActionSheetContent = (props) => {
 };
 var ActionSheet = (props) => {
   const [locale] = useLocale("modal");
-  const items = React70.useMemo(() => {
+  const items = React71.useMemo(() => {
     const items2 = [];
     if (Array.isArray(props.actionSheets)) {
       for (const action of props.actionSheets) {
@@ -9563,7 +9536,7 @@ var pickerVariants = tv({
     color: "base"
   }
 });
-var Picker = React70.forwardRef(
+var Picker = React71.forwardRef(
   (originalProps, ref) => {
     const {
       size,
@@ -9578,8 +9551,8 @@ var Picker = React70.forwardRef(
       valueRenderer,
       ...props
     } = originalProps;
-    const [open, setOpen] = React70.useState(false);
-    const selectedItem = React70.useMemo(() => {
+    const [open, setOpen] = React71.useState(false);
+    const selectedItem = React71.useMemo(() => {
       if (value && !!value.value) {
         return value;
       }
@@ -9590,13 +9563,13 @@ var Picker = React70.forwardRef(
         }
       }
     }, [value, options]);
-    const text = React70.useMemo(() => {
+    const text = React71.useMemo(() => {
       if (selectedItem) {
         return selectedItem.label;
       }
       return placeholder || label || "";
     }, [selectedItem, label, placeholder]);
-    const actions = React70.useMemo(() => {
+    const actions = React71.useMemo(() => {
       return [...options, "---", "Cancel"];
     }, [options]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -9727,10 +9700,10 @@ var DataFilter = (props) => {
   );
 };
 var usePagination = (initial) => {
-  const dataTotal = React70.useRef(0);
-  const [page, setPage] = React70.useState(initial?.page ?? 1);
-  const [pageSize, _setPageSize] = React70.useState(initial?.pageSize ?? 10);
-  const setPageSize = React70.useCallback(
+  const dataTotal = React71.useRef(0);
+  const [page, setPage] = React71.useState(initial?.page ?? 1);
+  const [pageSize, _setPageSize] = React71.useState(initial?.pageSize ?? 10);
+  const setPageSize = React71.useCallback(
     (size) => {
       _setPageSize(size);
       if (dataTotal.current > 0) {
@@ -9755,7 +9728,7 @@ var usePagination = (initial) => {
       pageTotal
     };
   };
-  const parsePagination = React70.useCallback(
+  const parsePagination = React71.useCallback(
     (meta) => {
       return {
         ...parseMeta(meta),
@@ -9765,7 +9738,7 @@ var usePagination = (initial) => {
     },
     [page, pageSize]
   );
-  const pagination = React70.useMemo(
+  const pagination = React71.useMemo(
     () => ({
       page,
       pageSize,
@@ -9774,7 +9747,7 @@ var usePagination = (initial) => {
     }),
     [parsePagination]
   );
-  React70.useEffect(() => {
+  React71.useEffect(() => {
     if (initial?.resetPageWhenPageSizeChange !== false) {
       setPage(1);
     }
@@ -9789,26 +9762,6 @@ var usePagination = (initial) => {
     parsePagination
   };
 };
-var EmptyDataState = (props) => {
-  const [locale] = useLocale("empty");
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Flex,
-    {
-      itemAlign: "center",
-      direction: "column",
-      gapY: 4,
-      className: props.className,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Box, { children: /* @__PURE__ */ jsxRuntime.jsx(emptyData_default, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Text2, { as: "div", intensity: 36, size: "2xs", children: props.title ?? locale.description })
-      ]
-    }
-  );
-};
-installExtension({
-  name: "emptyDataIdentifier",
-  positions: ["emptyDataIdentifier" /* EmptyDataIdentifier */]
-})(EmptyDataState);
 
 // src/table/features/index.ts
 var features_exports = {};
@@ -10020,13 +9973,13 @@ var tabsVariants = tv({
   }
 });
 var TabsBase = TabsPrimitive__namespace.Root;
-var TabsList = React70__namespace.forwardRef((originProps, ref) => {
+var TabsList = React71__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 = React70__namespace.forwardRef((originProps, ref) => {
+var TabsTrigger = React71__namespace.forwardRef((originProps, ref) => {
   const { className, size, children, icon, variant, ...props } = originProps;
   const { trigger, icon: iconClassName } = tabsVariants({ size, variant });
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -10036,14 +9989,14 @@ var TabsTrigger = React70__namespace.forwardRef((originProps, ref) => {
       className: trigger({ className }),
       ...props,
       children: [
-        typeof icon !== "undefined" ? React70__namespace.cloneElement(icon, { className: iconClassName(), opacity: 1 }) : null,
+        typeof icon !== "undefined" ? React71__namespace.cloneElement(icon, { className: iconClassName(), opacity: 1 }) : null,
         /* @__PURE__ */ jsxRuntime.jsx("span", { children })
       ]
     }
   );
 });
 TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
-var TabsContent = React70__namespace.forwardRef((oriProps, ref) => {
+var TabsContent = React71__namespace.forwardRef((oriProps, ref) => {
   const { className, size, children, ...props } = oriProps;
   const { content } = tabsVariants({ size });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10057,16 +10010,16 @@ var TabsContent = React70__namespace.forwardRef((oriProps, ref) => {
   );
 });
 TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
-var OrderlyThemeContext = React70.createContext(
+var OrderlyThemeContext = React71.createContext(
   {}
 );
 var useOrderlyTheme = () => {
-  return React70.useContext(OrderlyThemeContext);
+  return React71.useContext(OrderlyThemeContext);
 };
 function useDrag(containerRef) {
-  const [isDragging, setIsDragging] = React70.useState(false);
-  const [startX, setStartX] = React70.useState(0);
-  const [scrollLeft, setScrollLeft] = React70.useState(0);
+  const [isDragging, setIsDragging] = React71.useState(false);
+  const [startX, setStartX] = React71.useState(0);
+  const [scrollLeft, setScrollLeft] = React71.useState(0);
   const handleMouseDown = (e) => {
     if (!containerRef.current) return;
     setIsDragging(true);
@@ -10091,10 +10044,10 @@ function useDrag(containerRef) {
   };
 }
 function useScroll2() {
-  const [leadingVisible, setLeadingVisible] = React70.useState(false);
-  const [tailingVisible, setTailingVisible] = React70.useState(false);
-  const containerRef = React70.useRef(null);
-  React70.useEffect(() => {
+  const [leadingVisible, setLeadingVisible] = React71.useState(false);
+  const [tailingVisible, setTailingVisible] = React71.useState(false);
+  const containerRef = React71.useRef(null);
+  React71.useEffect(() => {
     if (!containerRef.current) return;
     const handleScroll = () => {
       const container2 = containerRef.current;
@@ -10119,7 +10072,7 @@ function useScroll2() {
       intersectionObserver.disconnect();
     };
   }, []);
-  React70.useEffect(() => {
+  React71.useEffect(() => {
     if (!containerRef.current) return;
     const intersectionObserver = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {
@@ -10236,7 +10189,7 @@ var ScrollIndicator = (props) => {
     }
   );
 };
-var TabsContext = React70.createContext({});
+var TabsContext = React71.createContext({});
 var Tabs = (props) => {
   const { getComponentTheme } = useOrderlyTheme();
   const {
@@ -10251,20 +10204,20 @@ var Tabs = (props) => {
     variant: variant ?? "contained"
   });
   const tabsVariant = tabsOverrides.variant;
-  const [tabList, setTabList] = React70.useState({});
-  const registerTab = React70.useCallback((config) => {
+  const [tabList, setTabList] = React71.useState({});
+  const registerTab = React71.useCallback((config) => {
     setTabList((prev) => {
       return { ...prev, [config.value]: config };
     });
   }, []);
-  const unregisterTab = React70.useCallback((config) => {
+  const unregisterTab = React71.useCallback((config) => {
     setTabList((prev) => {
       const newTabList = { ...prev };
       delete newTabList[config.value];
       return newTabList;
     });
   }, []);
-  const memoizedValue = React70.useMemo(
+  const memoizedValue = React71.useMemo(
     () => ({ registerTab, unregisterTab }),
     [registerTab, unregisterTab]
   );
@@ -10337,8 +10290,8 @@ var Tabs = (props) => {
 Tabs.displayName = "Tabs";
 var TabPanel = (props) => {
   const { title, value, icon, style, testid, children, className, classNames } = props;
-  const { registerTab, unregisterTab } = React70.useContext(TabsContext);
-  React70.useEffect(() => {
+  const { registerTab, unregisterTab } = React71.useContext(TabsContext);
+  React71.useEffect(() => {
     const tabConfig = {
       title,
       value,
@@ -10375,7 +10328,7 @@ var cardVariants = tv({
     intensity: 900
   }
 });
-var CardBase = React70__namespace.default.forwardRef(
+var CardBase = React71__namespace.default.forwardRef(
   ({ className, intensity, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -10389,7 +10342,7 @@ var CardBase = React70__namespace.default.forwardRef(
   }
 );
 CardBase.displayName = "CardBase";
-var CardHeader = React70__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardHeader = React71__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -10402,7 +10355,7 @@ var CardHeader = React70__namespace.default.forwardRef(({ className, children, .
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React70__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardTitle = React71__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "h3",
   {
     ref,
@@ -10415,7 +10368,7 @@ var CardTitle = React70__namespace.default.forwardRef(({ className, children, ..
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React70__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardDescription = React71__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "p",
   {
     ref,
@@ -10424,7 +10377,7 @@ var CardDescription = React70__namespace.default.forwardRef(({ className, childr
     children
   }
 ));
-var CardContent = React70__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardContent = React71__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -10434,9 +10387,9 @@ var CardContent = React70__namespace.default.forwardRef(({ className, children,
   }
 ));
 CardContent.displayName = "CardContent";
-var CardFooter = React70__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className, ...props, children }));
+var CardFooter = React71__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className, ...props, children }));
 CardFooter.displayName = "CardFooter";
-var Card = React70.forwardRef(
+var Card = React71.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: [
@@ -10449,7 +10402,7 @@ var Card = React70.forwardRef(
 Card.displayName = "Card";
 var HoverCardRoot = HoverCardPrimitive__namespace.Root;
 var HoverCardTrigger = HoverCardPrimitive__namespace.Trigger;
-var HoverCardContent = React70__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var HoverCardContent = React71__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   HoverCardPrimitive__namespace.Content,
   {
     ref,
@@ -10603,7 +10556,7 @@ var sliderVariants = tv({
     }
   }
 });
-var BaseSlider = React70__namespace.forwardRef((oriProps, ref) => {
+var BaseSlider = React71__namespace.forwardRef((oriProps, ref) => {
   const {
     className,
     color,
@@ -10619,8 +10572,8 @@ var BaseSlider = React70__namespace.forwardRef((oriProps, ref) => {
   const { track, range, thumb, root, trackInner, mark, tips } = sliderVariants({
     color
   });
-  const [innerValue, setInvalue] = React70__namespace.useState(__propsValue);
-  React70__namespace.useEffect(() => {
+  const [innerValue, setInvalue] = React71__namespace.useState(__propsValue);
+  React71__namespace.useEffect(() => {
     setInvalue((prev) => {
       if (!prev) {
         return __propsValue;
@@ -10631,7 +10584,7 @@ var BaseSlider = React70__namespace.forwardRef((oriProps, ref) => {
       return prev;
     });
   }, [__propsValue]);
-  const innerMasks = React70.useMemo(() => {
+  const innerMasks = React71.useMemo(() => {
     if (Array.isArray(marks) && marks.length > 0) {
       return marks;
     }
@@ -10727,14 +10680,14 @@ var Marks = (props) => {
     className,
     color = "primary"
   } = props;
-  const _value = React70.useMemo(() => value?.[0] ?? 0, [value]);
-  const selIndex = React70.useMemo(() => {
+  const _value = React71.useMemo(() => value?.[0] ?? 0, [value]);
+  const selIndex = React71.useMemo(() => {
     if (typeof props.step === "undefined") {
       return void 0;
     }
     return Math.floor(_value / props.step);
   }, [_value, props.step]);
-  const colorCls = React70.useMemo(() => {
+  const colorCls = React71.useMemo(() => {
     switch (color) {
       case "primary":
         return "oui-border-primary oui-bg-primary";
@@ -10746,7 +10699,7 @@ var Marks = (props) => {
         return "oui-border-primary-light oui-bg-primary-light";
     }
   }, [color]);
-  const textCls = React70.useMemo(() => {
+  const textCls = React71.useMemo(() => {
     switch (color) {
       case "primary":
         return "oui-text-primary";
@@ -10768,7 +10721,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(React70.Fragment, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(React71.Fragment, { children: [
       (!isInnerMask ? mark.label : true) && /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
@@ -10798,8 +10751,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 = React70__namespace.forwardRef((props, ref) => {
-  const _value = React70.useMemo(() => [props.value], [props.value]);
+var SingleSlider = React71__namespace.forwardRef((props, ref) => {
+  const _value = React71.useMemo(() => [props.value], [props.value]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseSlider,
     {
@@ -10818,7 +10771,7 @@ var SingleSlider = React70__namespace.forwardRef((props, ref) => {
 SingleSlider.displayName = "SingleSlider";
 var Slider = BaseSlider;
 Slider.single = SingleSlider;
-var ToastErrorIcon = React70__namespace.default.forwardRef(
+var ToastErrorIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 1, viewBox = "0 0 20 20", className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10840,7 +10793,7 @@ var ToastErrorIcon = React70__namespace.default.forwardRef(
     );
   }
 );
-var ToastSuccessIcon = React70__namespace.default.forwardRef(
+var ToastSuccessIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 1, viewBox = "0 0 20 20", className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -10863,7 +10816,7 @@ var ToastSuccessIcon = React70__namespace.default.forwardRef(
     );
   }
 );
-var ToastLoadingIcon = React70__namespace.default.forwardRef(
+var ToastLoadingIcon = React71__namespace.default.forwardRef(
   (props, ref) => {
     const { opacity = 1, viewBox = "0 0 20 20", className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -11024,10 +10977,10 @@ var ToastTile = (props) => {
   );
 };
 function useEndReached(sentinelRef, onEndReached) {
-  const observer = React70.useRef();
-  const cb = React70.useRef(onEndReached);
+  const observer = React71.useRef();
+  const cb = React71.useRef(onEndReached);
   cb.current = onEndReached;
-  React70.useEffect(() => {
+  React71.useEffect(() => {
     const options = {
       root: null,
       rootMargin: "0px",
@@ -11045,22 +10998,22 @@ function useEndReached(sentinelRef, onEndReached) {
       observer.current?.disconnect();
     };
   }, []);
-  React70.useEffect(() => {
+  React71.useEffect(() => {
     observer.current?.observe(sentinelRef.current);
   }, []);
 }
 var ListViewInner = (props, ref) => {
-  const sentinelRef = React70.useRef(null);
-  const containerRef = React70.useRef(null);
+  const sentinelRef = React71.useRef(null);
+  const containerRef = React71.useRef(null);
   useEndReached(sentinelRef, () => {
     if (!props.isLoading) {
       props.loadMore?.();
     }
   });
-  const emptyDataSouce = React70.useMemo(() => {
+  const emptyDataSouce = React71.useMemo(() => {
     return Array.isArray(props.dataSource) && props.dataSource.length <= 0;
   }, [props.dataSource]);
-  const listViewElement = React70.useMemo(() => {
+  const listViewElement = React71.useMemo(() => {
     if (!props.dataSource) {
       return null;
     }
@@ -11077,16 +11030,16 @@ var ListViewInner = (props, ref) => {
         }
       );
     }
-    return props.dataSource.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(React70__namespace.default.Fragment, { children: props.renderItem(item, index, props.extraData) }, index));
+    return props.dataSource.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(React71__namespace.default.Fragment, { children: props.renderItem(item, index, props.extraData) }, index));
   }, [emptyDataSouce, props.dataSource, props.extraData, props.emptyView]);
-  const loadingViewElement = React70.useMemo(() => {
+  const loadingViewElement = React71.useMemo(() => {
     if ((props.dataSource?.length || 0) === 0) return null;
     if (!props.isLoading) {
       return null;
     }
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-flex oui-py-2 oui-justify-center oui-items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) });
   }, [props.isLoading, props.dataSource]);
-  React70.useImperativeHandle(ref, () => {
+  React71.useImperativeHandle(ref, () => {
     return {
       scroll: (direction) => {
         containerRef.current?.scroll({
@@ -11114,7 +11067,7 @@ var ListViewInner = (props, ref) => {
           {
             className: tailwindVariants.cn(
               "oui-space-y-3 oui-h-full oui-w-full",
-              emptyDataSouce && "oui-absolute oui-left-0 oui-right-0 oui-top-0 oui-bottom-0",
+              emptyDataSouce && "oui-absolute oui-bottom-0 oui-left-0 oui-right-0 oui-top-0",
               props.contentClassName
             )({ twMerge: true }),
             children: listViewElement
@@ -11132,7 +11085,7 @@ var ListViewInner = (props, ref) => {
     }
   );
 };
-var ListView = React70.forwardRef(ListViewInner);
+var ListView = React71.forwardRef(ListViewInner);
 var Collapsible = CollapsiblePrimitive__namespace.Root;
 var CollapsibleTrigger2 = CollapsiblePrimitive__namespace.CollapsibleTrigger;
 var CollapsibleContent2 = (props) => {
@@ -11147,16 +11100,16 @@ var CollapsibleContent2 = (props) => {
     }
   );
 };
-var CollapseContext = React70.createContext(
+var CollapseContext = React71.createContext(
   {}
 );
 var useCollapseContext = () => {
-  return React70.useContext(CollapseContext);
+  return React71.useContext(CollapseContext);
 };
 var Panel = (props) => {
   const { activeKey, setActiveKey } = useCollapseContext();
   const { header, headerClassName, itemKey, disabled } = props;
-  const headerNode = React70.useMemo(() => {
+  const headerNode = React71.useMemo(() => {
     if (typeof header === "string") {
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
@@ -11201,8 +11154,8 @@ var Panel = (props) => {
 };
 var CollapseRoot = (props) => {
   const { activeKey = "", children } = props;
-  const [internalActiveKey, setInternalActiveKey] = React70.useState(activeKey);
-  const memoizedValue = React70.useMemo(() => {
+  const [internalActiveKey, setInternalActiveKey] = React71.useState(activeKey);
+  const memoizedValue = React71.useMemo(() => {
     return {
       activeKey: internalActiveKey,
       setActiveKey: setInternalActiveKey
@@ -11222,11 +11175,11 @@ var Marquee = (props) => {
     className,
     setApi
   } = props;
-  const isHorizontal = React70.useMemo(
+  const isHorizontal = React71.useMemo(
     () => carouselOptions.axis !== "y",
     [carouselOptions.axis]
   );
-  const emblaOptions = React70.useMemo(() => {
+  const emblaOptions = React71.useMemo(() => {
     return {
       loop: true,
       align: "start",
@@ -11236,7 +11189,7 @@ var Marquee = (props) => {
       ...carouselOptions
     };
   }, [carouselOptions]);
-  const autoScrollPluginOptions = React70.useMemo(() => {
+  const autoScrollPluginOptions = React71.useMemo(() => {
     return {
       speed: 1,
       direction: "forward",
@@ -11250,12 +11203,12 @@ var Marquee = (props) => {
   const [emblaRef, emblaApi] = useEmblaCarousel__default.default(emblaOptions, [
     AutoScroll__default.default(autoScrollPluginOptions)
   ]);
-  React70__namespace.default.useEffect(() => {
+  React71__namespace.default.useEffect(() => {
     if (emblaApi && setApi) {
       setApi(emblaApi);
     }
   }, [emblaApi, setApi]);
-  const renderSlides = React70.useMemo(() => {
+  const renderSlides = React71.useMemo(() => {
     if (!Array.isArray(data) || data.length === 0) {
       return null;
     }
@@ -11404,7 +11357,7 @@ var dropdownMenuVariants = tailwindVariants.tv({
     size: "lg"
   }
 });
-var DropdownMenuContent = React70__namespace.forwardRef(({ className, sideOffset = 4, size, ...props }, ref) => {
+var DropdownMenuContent = React71__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,
@@ -11417,7 +11370,7 @@ var DropdownMenuContent = React70__namespace.forwardRef(({ className, sideOffset
   ) });
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive__namespace.Content.displayName;
-var DropdownMenuItem = React70__namespace.forwardRef(({ className, inset, size, ...props }, ref) => {
+var DropdownMenuItem = React71__namespace.forwardRef(({ className, inset, size, ...props }, ref) => {
   const { item } = dropdownMenuVariants({ size });
   return /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuPrimitive__namespace.Item,
@@ -11429,7 +11382,7 @@ var DropdownMenuItem = React70__namespace.forwardRef(({ className, inset, size,
   );
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive__namespace.Item.displayName;
-var DropdownMenuLabel = React70__namespace.forwardRef(({ className, inset, ...props }, ref) => {
+var DropdownMenuLabel = React71__namespace.forwardRef(({ className, inset, ...props }, ref) => {
   const { label } = dropdownMenuVariants({
     inset
   });
@@ -11443,7 +11396,7 @@ var DropdownMenuLabel = React70__namespace.forwardRef(({ className, inset, ...pr
   );
 });
 DropdownMenuLabel.displayName = DropdownMenuPrimitive__namespace.Label.displayName;
-var DropdownMenuSeparator = React70__namespace.forwardRef(({ className, ...props }, ref) => {
+var DropdownMenuSeparator = React71__namespace.forwardRef(({ className, ...props }, ref) => {
   const { separator } = dropdownMenuVariants();
   return /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuPrimitive__namespace.Separator,
@@ -11465,7 +11418,7 @@ var DropdownMenuShortcut = ({
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 var SimpleDropdownMenu = (props) => {
   const { currentValue, menu, render, size, children, ...contentProps } = props;
-  const items = React70.useMemo(() => {
+  const items = React71.useMemo(() => {
     if (typeof props.render === "function") {
       return props.menu.map((item, index) => {
         return props.render?.(item, index);
@@ -11503,19 +11456,23 @@ var SimpleDropdownMenu = (props) => {
     ) })
   ] });
 };
+
+// src/provider/componentProvider.tsx
+var COMPONENTS_PLUGIN_ID = "orderly-components-provider-overrides";
 var ComponentsProvider = (props) => {
-  React70.useEffect(() => {
+  React71.useEffect(() => {
     if (props.components && Object.keys(props.components).length) {
-      for (const position in props.components) {
-        const Element = props.components[position];
-        installExtension({
-          name: Element.displayName ?? `custom-component-${position}`,
-          positions: [position],
-          __isInternal: false
-        })((props2) => {
-          return /* @__PURE__ */ jsxRuntime.jsx(Element, { ...props2 });
-        });
-      }
+      const interceptors = Object.entries(props.components).map(
+        ([position, Element]) => ({
+          target: pluginCore.positionToPath(position),
+          component: (_Original, slotProps) => React71.createElement(Element, slotProps)
+        })
+      );
+      pluginCore.OrderlyPluginRegistry.register({
+        id: COMPONENTS_PLUGIN_ID,
+        name: "ComponentsProvider",
+        interceptors
+      });
     }
   }, [props.components]);
   return props.children;
@@ -11530,13 +11487,13 @@ var OrderlyThemeProvider = (props) => {
     setCurrentThemeId,
     children
   } = props;
-  const resolveComponentTheme = React70.useCallback(
+  const resolveComponentTheme = React71.useCallback(
     (component, defaultValue) => {
       return overrides?.[component] || defaultValue;
     },
     [overrides]
   );
-  const memoizedValue = React70.useMemo(() => {
+  const memoizedValue = React71.useMemo(() => {
     return {
       getComponentTheme: resolveComponentTheme,
       themes: themes ?? [],
@@ -11553,9 +11510,9 @@ var OrderlyThemeProvider = (props) => {
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(OrderlyThemeContext.Provider, { value: memoizedValue, children: /* @__PURE__ */ jsxRuntime.jsx(ComponentsProvider, { components, children }) });
 };
-var Either = React70.memo((props) => {
+var Either = React71.memo((props) => {
   const { value, children, left } = props;
-  const inputValue = React70.useMemo(
+  const inputValue = React71.useMemo(
     () => Boolean(typeof value === "function" ? value() : value),
     [value]
   );
@@ -11877,6 +11834,82 @@ Object.defineProperty(exports, "cn", {
   enumerable: true,
   get: function () { return tailwindVariants.cnBase; }
 });
+Object.defineProperty(exports, "ExtensionPositionEnum", {
+  enumerable: true,
+  get: function () { return pluginCore.ExtensionPositionEnum; }
+});
+Object.defineProperty(exports, "ExtensionProvider", {
+  enumerable: true,
+  get: function () { return pluginCore.ExtensionProvider; }
+});
+Object.defineProperty(exports, "ExtensionSlot", {
+  enumerable: true,
+  get: function () { return pluginCore.ExtensionSlot; }
+});
+Object.defineProperty(exports, "OrderlyExtensionRegistry", {
+  enumerable: true,
+  get: function () { return pluginCore.OrderlyExtensionRegistry; }
+});
+Object.defineProperty(exports, "OrderlyPluginProvider", {
+  enumerable: true,
+  get: function () { return pluginCore.OrderlyPluginProvider; }
+});
+Object.defineProperty(exports, "OrderlyPluginRegistry", {
+  enumerable: true,
+  get: function () { return pluginCore.OrderlyPluginRegistry; }
+});
+Object.defineProperty(exports, "PluginErrorBoundary", {
+  enumerable: true,
+  get: function () { return pluginCore.PluginErrorBoundary; }
+});
+Object.defineProperty(exports, "PluginScopeContext", {
+  enumerable: true,
+  get: function () { return pluginCore.PluginScopeContext; }
+});
+Object.defineProperty(exports, "PluginScopeProvider", {
+  enumerable: true,
+  get: function () { return pluginCore.PluginScopeProvider; }
+});
+Object.defineProperty(exports, "createInterceptor", {
+  enumerable: true,
+  get: function () { return pluginCore.createInterceptor; }
+});
+Object.defineProperty(exports, "createOrderlySDK", {
+  enumerable: true,
+  get: function () { return pluginCore.createOrderlySDK; }
+});
+Object.defineProperty(exports, "injectable", {
+  enumerable: true,
+  get: function () { return pluginCore.injectable; }
+});
+Object.defineProperty(exports, "installExtension", {
+  enumerable: true,
+  get: function () { return pluginCore.installExtension; }
+});
+Object.defineProperty(exports, "positionToPath", {
+  enumerable: true,
+  get: function () { return pluginCore.positionToPath; }
+});
+Object.defineProperty(exports, "setExtensionBuilder", {
+  enumerable: true,
+  get: function () { return pluginCore.setExtensionBuilder; }
+});
+Object.defineProperty(exports, "useExtensionContext", {
+  enumerable: true,
+  get: function () { return pluginCore.useExtensionContext; }
+});
+Object.defineProperty(exports, "useInjectedComponent", {
+  enumerable: true,
+  get: function () { return pluginCore.useInjectedComponent; }
+});
+Object.defineProperty(exports, "useOrderlyPluginContext", {
+  enumerable: true,
+  get: function () { return pluginCore.useOrderlyPluginContext; }
+});
+Object.defineProperty(exports, "usePluginScope", {
+  enumerable: true,
+  get: function () { return pluginCore.usePluginScope; }
+});
 Object.defineProperty(exports, "toast", {
   enumerable: true,
   get: function () { return reactHotToast__default.default; }
@@ -11992,8 +12025,6 @@ exports.EmptyDataState = EmptyDataState;
 exports.EmptyStateIcon = EmptyStateIcon;
 exports.EsOrderlyIcon = EsOrderlyIcon;
 exports.ExclamationFillIcon = ExclamationFillIcon;
-exports.ExtensionPositionEnum = ExtensionPositionEnum;
-exports.ExtensionSlot = ExtensionSlot;
 exports.EyeCloseIcon = EyeCloseIcon;
 exports.EyeIcon = EyeIcon;
 exports.FeeTierIcon = FeeTierIcon;
@@ -12005,7 +12036,9 @@ exports.HoverCardContent = HoverCardContent;
 exports.HoverCardRoot = HoverCardRoot;
 exports.HoverCardTrigger = HoverCardTrigger;
 exports.Icon = Icon;
+exports.IconButton = IconButton;
 exports.InfoCircleIcon = InfoCircleIcon;
+exports.InjectableEmptyDataState = InjectableEmptyDataState;
 exports.Input = Input2;
 exports.InputAdditional = InputAdditional;
 exports.LIGHT_THEME_CSS_VARS = LIGHT_THEME_CSS_VARS;
@@ -12123,14 +12156,13 @@ exports.convertValueToPercentage = convertValueToPercentage;
 exports.dotStatusVariants = dotStatusVariants;
 exports.formatAddress = formatAddress;
 exports.gradientTextVariants = gradientTextVariants;
+exports.iconButtonVariants = iconButtonVariants;
 exports.inputFormatter = formatter_exports;
-exports.installExtension = installExtension;
 exports.modal = modal;
 exports.parseNumber = parseNumber;
 exports.registerSimpleDialog = registerSimpleDialog;
 exports.registerSimpleSheet = registerSimpleSheet;
 exports.scrollAreaVariants = scrollAreaVariants;
-exports.setExtensionBuilder = setExtensionBuilder;
 exports.startViewTransition = startViewTransition;
 exports.statisticVariants = statisticVariants;
 exports.textVariants = textVariants;