@orderly.network/ui 3.0.4 → 3.1.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import * as React73 from 'react';
-import React73__default, { forwardRef, useMemo, useRef, useCallback, useState, useEffect, useId, createContext, Fragment as Fragment$1, memo, useImperativeHandle, useContext, useReducer, createElement } from 'react';
+import React73__default, { forwardRef, useMemo, useRef, useCallback, useState, useEffect, useId, createContext, Fragment as Fragment$1, memo, useSyncExternalStore, useImperativeHandle, useContext, useReducer, createElement } from 'react';
 import { createTV, tv as tv$1, cnBase, cn } from 'tailwind-variants';
 export { cnBase as cn } from 'tailwind-variants';
 import { Slot } from '@radix-ui/react-slot';
@@ -783,7 +783,7 @@ var BaseButton = React73__default.forwardRef(
     }, [size, icon]);
     const content = useMemo(() => {
       if (!leading && !trailing && !iconElement) return children;
-      return /* @__PURE__ */ jsxs(Flex, { as: "span", itemAlign: "center", className: "oui-space-x-1", children: [
+      return /* @__PURE__ */ jsxs(Flex, { as: "span", itemAlign: "center", className: "oui-gap-x-1", children: [
         leading,
         iconElement,
         /* @__PURE__ */ jsx("span", { children }),
@@ -1496,7 +1496,7 @@ var TokenIcon = (props) => {
 var CombineIcon = (props) => {
   const { secondary } = props;
   const subElement = 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";
+    const className = "oui-bg-base-6 oui-absolute oui-bottom-0 oui-end-0 oui-outline oui-outline-2 oui-outline-base-1 oui-z-10";
     if (secondary.component) {
       return /* @__PURE__ */ jsx("div", { className: cnBase(className, secondary?.className), children: secondary.component });
     }
@@ -4586,6 +4586,7 @@ var Numeral = (props) => {
     {
       ...rest,
       color: colorName,
+      dir: "ltr",
       className: cnBase("oui-tabular-nums", className),
       children: childWithUnit
     }
@@ -4928,6 +4929,31 @@ var useThemeAttribute = () => {
   }, []);
   return themeAttribute;
 };
+function subscribeDocumentDir(listener) {
+  if (typeof document === "undefined") {
+    return () => {
+    };
+  }
+  const observer = new MutationObserver(listener);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["dir"]
+  });
+  return () => observer.disconnect();
+}
+function getDocumentDirection() {
+  if (typeof document === "undefined") {
+    return "ltr";
+  }
+  return document.documentElement.dir === "rtl" ? "rtl" : "ltr";
+}
+function useDocumentDirection() {
+  return useSyncExternalStore(
+    subscribeDocumentDir,
+    getDocumentDirection,
+    () => "ltr"
+  );
+}
 var popoverVariants = tv({
   base: [
     "oui-popover-content",
@@ -5121,7 +5147,7 @@ var SymbolBadge = (props) => {
   const { badge, fullName } = props;
   const { isMobile } = useScreen();
   if (!badge) return null;
-  const badgeEl = /* @__PURE__ */ jsx(Badge, { color: "neutral", size: "xs", className: "oui-ml-1", children: badge });
+  const badgeEl = /* @__PURE__ */ jsx(Badge, { color: "neutral", size: "xs", className: "oui-ms-1", children: badge });
   if (!fullName) return badgeEl;
   const isTruncated = badge.endsWith("...");
   if (isMobile) {
@@ -5476,6 +5502,9 @@ var inputVariants = tv(
           box: ["oui-bg-base-5"]
         }
       },
+      // RTL-EXCLUDE: Keep `pl` / `pr` variants mapped to physical padding.
+      // These variant names are part of the Input API and callers use them to
+      // reserve explicit left/right space for prefix/suffix layouts.
       pl: {
         true: {
           box: "oui-pl-3"
@@ -5502,10 +5531,10 @@ var inputVariants = tv(
           input: "oui-text-center"
         },
         left: {
-          input: "oui-text-left"
+          input: "oui-text-start"
         },
         right: {
-          input: "oui-text-right"
+          input: "oui-text-end"
         }
       }
     },
@@ -5639,7 +5668,7 @@ var scrollAreaVariants = tv({
   variants: {
     orientation: {
       vertical: {
-        bar: "oui-h-full oui-w-2 oui-border-l oui-border-l-transparent oui-p-[1px]"
+        bar: "oui-h-full oui-w-2 oui-border-s oui-border-s-transparent oui-p-[1px]"
       },
       horizontal: {
         bar: "oui-h-2 oui-flex-col oui-border-t oui-border-t-transparent oui-p-[1px]"
@@ -5705,7 +5734,7 @@ var selectVariants = tv(
         "oui-rounded-md",
         "oui-px-2",
         // "oui-py-2",
-        "oui-space-x-1",
+        "oui-gap-x-1",
         // "oui-text-sm",
         "oui-shadow-sm",
         // "oui-ring-offset-background",
@@ -5756,8 +5785,8 @@ var selectVariants = tv(
         "oui-items-center",
         "oui-rounded-sm",
         "oui-py-1",
-        "oui-pl-2",
-        "oui-pr-8",
+        "oui-ps-2",
+        "oui-pe-8",
         "oui-text-sm",
         "oui-text-base-contrast-54",
         "oui-outline-none",
@@ -6138,7 +6167,7 @@ var defaultOptionRenderer = (option, currentValue) => {
             height: 4,
             gradient: "brand",
             r: "full",
-            className: "oui-absolute oui-right-2 oui-top-1/2 -oui-translate-y-1/2"
+            className: "oui-absolute oui-end-2 oui-top-1/2 -oui-translate-y-1/2"
           }
         )
       ]
@@ -6220,7 +6249,7 @@ var Option = (props) => {
       value,
       className: item({
         size,
-        className: "oui-space-x-1 oui-flex oui-flex-row oui-items-center"
+        className: "oui-gap-x-1 oui-flex oui-flex-row oui-items-center"
       }),
       children: [
         /* @__PURE__ */ jsx(
@@ -6522,7 +6551,7 @@ var textFieldVariants = tv({
         root: "oui-flex-col oui-space-y-1"
       },
       row: {
-        root: "oui-flex-row oui-space-x-3 "
+        root: "oui-flex-row oui-gap-x-3 "
       }
     }
   },
@@ -6735,7 +6764,16 @@ var Switch = React73__default.forwardRef(({ className, color, ...props }, ref) =
     className,
     color
   });
-  return /* @__PURE__ */ jsx(SwitchPrimitives.Root, { className: root({ className }), ...props, ref, children: /* @__PURE__ */ jsx(SwitchPrimitives.Thumb, { className: thumb() }) });
+  return /* @__PURE__ */ jsx(
+    SwitchPrimitives.Root,
+    {
+      className: root({ className }),
+      ...props,
+      ref,
+      dir: "ltr",
+      children: /* @__PURE__ */ jsx(SwitchPrimitives.Thumb, { className: thumb() })
+    }
+  );
 });
 Switch.displayName = SwitchPrimitives.Root.displayName;
 var Logo = React73__default.forwardRef(({ src, alt, href }, ref) => {
@@ -6760,38 +6798,115 @@ function useInit(params) {
   }, [loading, ignoreLoadingCheck, dataSource, initialized]);
   return initialized;
 }
+var SCROLL_EPSILON = 1;
+var cachedRTLScrollType = null;
 function useScroll(deps) {
   const scrollRef = useRef(null);
   const [showLeftShadow, setShowLeftShadow] = useState(false);
   const [showRightShadow, setShowRightShadow] = useState(false);
+  const [isRTL, setIsRTL] = useState(false);
   useEffect(() => {
     if (!scrollRef.current) {
       return;
     }
-    scrollRef.current.addEventListener("scroll", function(e) {
-      setShowLeftShadow(scrollRef.current.scrollLeft > 0);
-      setShowRightShadow(!isScrolledToRight(scrollRef.current));
+    const target = scrollRef.current;
+    const updateState = () => {
+      const direction = window.getComputedStyle(target).direction;
+      const rtl = direction === "rtl";
+      setIsRTL(rtl);
+      const scrollAble = hasHorizontalScroll(target);
+      const { fromStart, fromEnd } = getHorizontalScrollOffset(target);
+      setShowLeftShadow(scrollAble && fromStart > SCROLL_EPSILON);
+      setShowRightShadow(scrollAble && fromEnd > SCROLL_EPSILON);
+    };
+    updateState();
+    target.addEventListener("scroll", updateState);
+    const nearestDirElement = target.closest("[dir]");
+    const dirObserveTarget = nearestDirElement || document.documentElement;
+    const mutationObserver = new MutationObserver(updateState);
+    mutationObserver.observe(dirObserveTarget, {
+      attributes: true,
+      attributeFilter: ["dir"]
     });
-  }, [scrollRef]);
-  useEffect(() => {
-    if (!scrollRef.current) {
-      return;
+    let resizeObserver;
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(updateState);
+      resizeObserver.observe(target);
     }
-    const scrollAble = hasHorizontalScroll(scrollRef.current);
-    const scrollEnd = isScrolledToRight(scrollRef.current);
-    setShowRightShadow(scrollAble && !scrollEnd);
+    return () => {
+      target.removeEventListener("scroll", updateState);
+      mutationObserver.disconnect();
+      resizeObserver?.disconnect();
+    };
   }, [scrollRef, ...deps]);
   return {
     scrollRef,
     showLeftShadow,
-    showRightShadow
+    showRightShadow,
+    isRTL
   };
 }
-function isScrolledToRight(element) {
-  return element.scrollLeft + element.clientWidth >= element.scrollWidth;
-}
 function hasHorizontalScroll(element) {
-  return element.scrollWidth > element.clientWidth;
+  return element.scrollWidth - element.clientWidth > SCROLL_EPSILON;
+}
+function getHorizontalScrollOffset(element) {
+  const max = element.scrollWidth - element.clientWidth;
+  if (max <= 0) {
+    return { fromStart: 0, fromEnd: 0 };
+  }
+  const direction = window.getComputedStyle(element).direction;
+  if (direction !== "rtl") {
+    return {
+      fromStart: Math.max(0, element.scrollLeft),
+      fromEnd: Math.max(0, max - element.scrollLeft)
+    };
+  }
+  const scrollType = getRTLScrollType();
+  const scrollLeft = element.scrollLeft;
+  let fromStart = 0;
+  if (scrollType === "negative") {
+    fromStart = -scrollLeft;
+  } else if (scrollType === "reverse") {
+    fromStart = scrollLeft;
+  } else {
+    fromStart = max - scrollLeft;
+  }
+  return {
+    fromStart: Math.max(0, fromStart),
+    fromEnd: Math.max(0, max - fromStart)
+  };
+}
+function getRTLScrollType() {
+  if (cachedRTLScrollType) {
+    return cachedRTLScrollType;
+  }
+  if (typeof document === "undefined" || !document.body) {
+    cachedRTLScrollType = "negative";
+    return cachedRTLScrollType;
+  }
+  const outer = document.createElement("div");
+  const inner = document.createElement("div");
+  outer.style.width = "4px";
+  outer.style.height = "1px";
+  outer.style.overflow = "scroll";
+  outer.style.visibility = "hidden";
+  outer.style.position = "absolute";
+  outer.style.top = "-9999px";
+  outer.dir = "rtl";
+  inner.style.width = "8px";
+  inner.style.height = "1px";
+  outer.appendChild(inner);
+  document.body.appendChild(outer);
+  let type;
+  if (outer.scrollLeft > 0) {
+    type = "default";
+  } else {
+    outer.scrollLeft = 1;
+    type = outer.scrollLeft === 0 ? "negative" : "reverse";
+  }
+  document.body.removeChild(outer);
+  cachedRTLScrollType = type;
+  return type;
 }
 function useShowHeader(params) {
   const { dataSource, loading } = params;
@@ -6857,9 +6972,11 @@ function useWrap(deps) {
 var alignVariants = tv$1({
   variants: {
     align: {
-      left: "oui-text-left",
+      left: "oui-text-start",
+      start: "oui-text-start",
       center: "oui-text-center",
-      right: "oui-text-right"
+      right: "oui-text-end",
+      end: "oui-text-end"
     }
   },
   defaultVariants: {
@@ -6889,13 +7006,16 @@ var TableCell = (props) => {
   }
   return flexRender(cell.column.columnDef.cell, cell.getContext());
 };
-function getColumnPinningProps(column, isHeader) {
+function getColumnPinningProps(column, isRTL) {
   const isPinned = column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
   const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
   const style = {
-    left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
-    right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
+    // Keep logical inset here. TanStack pinning still reports left/right
+    // groups, but sticky offsets must follow the scroll container direction;
+    // physical left/right breaks fixed columns in RTL tables.
+    insetInlineStart: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
+    insetInlineEnd: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
     width: column.getSize()
   };
   const contentCls = cnBase(
@@ -6909,8 +7029,18 @@ function getColumnPinningProps(column, isHeader) {
     "before:oui-top-0 before:oui-z-[-1]",
     "before:oui-bg-[linear-gradient(90deg,rgba(var(--oui-color-base-10)_/_0.80)_0%,rgba(var(--oui-color-base-10)_/_0.36)_65%,rgba(var(--oui-color-base-10)_/_0.00)_100%)]"
   );
-  const leftShadow = isLastLeftPinnedColumn && cnBase(shadowCls, "before:oui-right-[-32px]");
-  const rightShadow = isFirstRightPinnedColumn && cnBase(shadowCls, "before:oui-left-[-32px] before:oui-rotate-180");
+  const leftShadow = isLastLeftPinnedColumn && cnBase(
+    shadowCls,
+    // The shadow sits on the logical outer edge of the pinned group.
+    "before:oui-end-[-32px]",
+    isRTL && "before:oui-rotate-180"
+  );
+  const rightShadow = isFirstRightPinnedColumn && cnBase(
+    shadowCls,
+    // Do not replace with physical left/right; this mirrors with RTL pinning.
+    "before:oui-start-[-32px]",
+    !isRTL && "before:oui-rotate-180"
+  );
   return {
     style,
     classNames: {
@@ -6932,7 +7062,7 @@ var TableBody = (props) => {
       "data-testid": props.testId,
       children: props.rows.map((row) => {
         const { className, onClick, ...rest } = typeof props.onRow === "function" ? props.onRow(row.original, row.index, row) || {} : {};
-        const expandView = row.getIsExpanded() && /* @__PURE__ */ jsx("tr", { className: "oui-table-expand-tr oui-z-0 [&>td:first-child]:oui-pl-3 [&>td:last-child]:oui-pr-3", children: /* @__PURE__ */ jsx(
+        const expandView = row.getIsExpanded() && /* @__PURE__ */ jsx("tr", { className: "oui-table-expand-tr oui-z-0 [&>td:first-child]:oui-ps-3 [&>td:last-child]:oui-pe-3", children: /* @__PURE__ */ jsx(
           "td",
           {
             className: "oui-table-expand-td",
@@ -6946,7 +7076,7 @@ var TableBody = (props) => {
             {
               className: cnBase(
                 "oui-table-tbody-tr oui-group oui-h-10",
-                "[&>td:first-child]:oui-pl-3 [&>td:last-child]:oui-pr-3",
+                "[&>td:first-child]:oui-ps-3 [&>td:last-child]:oui-pe-3",
                 typeof onClick === "function" && "oui-cursor-pointer",
                 props.bordered && "oui-border-b oui-border-b-line-4",
                 className
@@ -6955,7 +7085,7 @@ var TableBody = (props) => {
               ...rest,
               children: row.getVisibleCells().map((cell) => {
                 const column = cell.column;
-                const { style: pinStyle, classNames: pinClassNames } = getColumnPinningProps(column);
+                const { style: pinStyle, classNames: pinClassNames } = getColumnPinningProps(column, !!props.isRTL);
                 const { align, className: rowClassName } = column.columnDef.meta || {};
                 const {
                   style: cellStyle,
@@ -7013,7 +7143,7 @@ var CellHover = ({ selected, isFirst, isLast }) => {
     "div",
     {
       className: cnBase(
-        "oui-absolute oui-left-0 oui-top-0 oui-z-[-1]",
+        "oui-absolute oui-start-0 oui-top-0 oui-z-[-1]",
         "oui-size-full",
         "group-hover:oui-bg-line-4",
         selected && "oui-bg-line-6 group-hover:oui-bg-line-6",
@@ -7188,7 +7318,7 @@ var TableHeader = (props) => {
           className: cnBase(
             "oui-table-thead-tr",
             "oui-h-10",
-            "[&>th:first-child]:oui-pl-3 [&>th:last-child]:oui-pr-3",
+            "[&>th:first-child]:oui-ps-3 [&>th:last-child]:oui-pe-3",
             props.className
           ),
           children: headerGroup.headers.map((header) => {
@@ -7198,7 +7328,7 @@ var TableHeader = (props) => {
               className: rowClassName,
               title
             } = column.columnDef.meta || {};
-            const { style: pinStyle, classNames: pinClassNames } = getColumnPinningProps(column);
+            const { style: pinStyle, classNames: pinClassNames } = getColumnPinningProps(column, !!props.isRTL);
             const canSort = column.getCanSort();
             const isSorted = column.getIsSorted();
             return /* @__PURE__ */ jsx(
@@ -7209,7 +7339,7 @@ var TableHeader = (props) => {
                   "oui-table-thead-th",
                   "oui-whitespace-nowrap",
                   "oui-px-1",
-                  props.bordered && "after:oui-absolute after:oui-left-0 after:oui-top-0 after:oui-z-[-1] after:oui-block after:oui-size-full after:oui-border-b after:oui-border-line",
+                  props.bordered && "after:oui-absolute after:oui-start-0 after:oui-top-0 after:oui-z-[-1] after:oui-block after:oui-size-full after:oui-border-b after:oui-border-line",
                   // use border-b will show bottom element content
                   // props.bordered && "oui-border-b oui-border-line"
                   alignVariants({ align }),
@@ -7358,9 +7488,9 @@ var PaginationPrevious = ({
   PaginationLink,
   {
     "aria-label": "Go to previous page",
-    className: cnBase("oui-gap-1 oui-pl-2.5", className),
+    className: cnBase("oui-gap-1 oui-ps-2.5", className),
     ...props,
-    children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "oui-h-4 oui-w-4", color: "white" })
+    children: /* @__PURE__ */ jsx(PaginationPreviousIcon, {})
   }
 );
 PaginationPrevious.displayName = "PaginationPrevious";
@@ -7371,12 +7501,22 @@ var PaginationNext = ({
   PaginationLink,
   {
     "aria-label": "Go to next page",
-    className: cnBase("oui-gap-1 oui-pr-2.5", className),
+    className: cnBase("oui-gap-1 oui-pe-2.5", className),
     ...props,
-    children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "oui-h-4 oui-w-4", color: "white" })
+    children: /* @__PURE__ */ jsx(PaginationNextIcon, {})
   }
 );
 PaginationNext.displayName = "PaginationNext";
+var PaginationPreviousIcon = () => {
+  const dir = useDocumentDirection();
+  const Icon4 = dir === "rtl" ? ChevronRightIcon : ChevronLeftIcon;
+  return /* @__PURE__ */ jsx(Icon4, { className: "oui-h-4 oui-w-4", color: "white" });
+};
+var PaginationNextIcon = () => {
+  const dir = useDocumentDirection();
+  const Icon4 = dir === "rtl" ? ChevronLeftIcon : ChevronRightIcon;
+  return /* @__PURE__ */ jsx(Icon4, { className: "oui-h-4 oui-w-4", color: "white" });
+};
 var Paginations = (props) => {
   const {
     classNames,
@@ -7387,14 +7527,14 @@ var Paginations = (props) => {
   } = props;
   const [locale] = useLocale("pagination");
   return /* @__PURE__ */ jsxs(Pagination, { className: cnBase(classNames?.pagination, className), children: [
-    !hideRowsPerPage ? /* @__PURE__ */ jsxs(Flex, { mr: 4, children: [
+    !hideRowsPerPage ? /* @__PURE__ */ jsxs(Flex, { className: "oui-me-4", children: [
       /* @__PURE__ */ jsx(
         Text,
         {
           as: "div",
           size: "2xs",
           intensity: 54,
-          className: "oui-text-nowrap oui-mr-2",
+          className: "oui-text-nowrap oui-me-2",
           children: locale.rowsPerPage
         }
       ),
@@ -7561,6 +7701,18 @@ var TablePlaceholder = (props) => {
     }
   );
 };
+function resolveFixedDirection(fixed, isRTL) {
+  if (!fixed) {
+    return null;
+  }
+  if (fixed === "left" || fixed === "right") {
+    return fixed;
+  }
+  if (fixed === "start") {
+    return isRTL ? "right" : "left";
+  }
+  return isRTL ? "left" : "right";
+}
 var compareValues = (aValue, bValue) => {
   if (aValue == null && bValue == null) return 0;
   if (aValue == null) return 1;
@@ -7680,13 +7832,14 @@ var Transform = {
     );
     return sortedData;
   },
-  columnPinning: (columns) => {
+  columnPinning: (columns, isRTL = false) => {
     const left = [];
     const right = [];
     columns?.map((column) => {
-      if (column.fixed === "left") {
+      const fixed = resolveFixedDirection(column.fixed, isRTL);
+      if (fixed === "left") {
         left.push(column.dataIndex);
-      } else if (column.fixed === "right") {
+      } else if (fixed === "right") {
         right.push(column.dataIndex);
       }
     });
@@ -7781,9 +7934,14 @@ function DataTable(props) {
     () => Transform.columns(columns, sorting, setSorting),
     [columns, sorting, setSorting]
   );
+  const wrapRef = useWrap([className, classNames?.root]);
+  const { scrollRef, showLeftShadow, showRightShadow, isRTL } = useScroll([
+    dataSource?.length,
+    columns?.length
+  ]);
   const columnPinning = useMemo(
-    () => Transform.columnPinning(columns),
-    [columns]
+    () => Transform.columnPinning(columns, isRTL),
+    [columns, isRTL]
   );
   const rowSelection = useMemo(
     () => props.rowSelection || {},
@@ -7833,10 +7991,6 @@ function DataTable(props) {
   useEffect(() => {
     props.getTableInstance?.(table);
   }, [table]);
-  const wrapRef = useWrap([className, classNames?.root]);
-  const { scrollRef, showLeftShadow, showRightShadow } = useScroll([
-    dataSource?.length
-  ]);
   const rows = table.getRowModel().rows;
   const showPlaceholder = initialized && (rows.length === 0 || loading);
   const showHeader = useShowHeader({
@@ -7894,6 +8048,7 @@ function DataTable(props) {
                         bordered: props.bordered,
                         showLeftShadow,
                         showRightShadow,
+                        isRTL,
                         sorting
                       }
                     ),
@@ -7909,6 +8064,7 @@ function DataTable(props) {
                         onCell: props.onCell,
                         showLeftShadow,
                         showRightShadow,
+                        isRTL,
                         testId: props.testIds?.body
                       }
                     )
@@ -7959,23 +8115,23 @@ function Calendar({
       showOutsideDays,
       className: cnBase("oui-p-3 oui-bg-base-7 oui-rounded", className),
       classNames: {
-        months: "oui-flex oui-flex-col sm:oui-flex-row oui-space-y-4 sm:oui-space-x-4 sm:oui-space-y-0",
+        months: "oui-flex oui-flex-col sm:oui-flex-row oui-space-y-4 sm:oui-gap-x-4 sm:oui-space-y-0",
         month: "oui-space-y-4",
         caption: "oui-flex oui-justify-center oui-pt-1 oui-relative oui-items-center",
         caption_label: "oui-text-sm oui-font-medium ",
-        nav: "oui-space-x-1 oui-flex oui-items-center",
+        nav: "oui-gap-x-1 oui-flex oui-items-center",
         nav_button: cnBase(
           "oui-h-7 oui-w-7 oui-bg-transparent oui-p-0 oui-opacity-50 hover:oui-opacity-100"
         ),
-        nav_button_previous: "oui-absolute oui-left-1",
-        nav_button_next: "oui-absolute oui-right-1",
+        nav_button_previous: "oui-absolute oui-start-1",
+        nav_button_next: "oui-absolute oui-end-1",
         table: "oui-w-full oui-border-collapse oui-space-y-1",
         head_row: "oui-flex",
         head_cell: "oui-text-base-contrast-80 oui-rounded-md oui-w-7 oui-font-normal oui-text-[0.8rem] oui-opacity-30",
         row: "oui-flex oui-w-full oui-mt-2",
         cell: cnBase(
-          "oui-relative oui-day-cell oui-p-0 oui-text-center oui-text-2xs focus-within:oui-relative focus-within:oui-z-20 [&:has([aria-selected])]:oui-bg-base-4 [&:has([aria-selected].day-outside)]:oui-bg-base-4/50 [&:has([aria-selected].day-range-end)]:oui-rounded-r-md",
-          props.mode === "range" ? "[&:has(>.oui-day-range-end)]:oui-rounded-r-md [&:has(>.oui-day-range-start)]:oui-rounded-l-md first:[&:has([aria-selected])]:oui-rounded-l-md last:[&:has([aria-selected])]:oui-rounded-r-md" : "[&:has([aria-selected])]:oui-rounded-md"
+          "oui-relative oui-day-cell oui-p-0 oui-text-center oui-text-2xs focus-within:oui-relative focus-within:oui-z-20 [&:has([aria-selected])]:oui-bg-base-4 [&:has([aria-selected].day-outside)]:oui-bg-base-4/50 [&:has([aria-selected].day-range-end)]:oui-rounded-e-md",
+          props.mode === "range" ? "[&:has(>.oui-day-range-end)]:oui-rounded-e-md [&:has(>.oui-day-range-start)]:oui-rounded-s-md first:[&:has([aria-selected])]:oui-rounded-s-md last:[&:has([aria-selected])]:oui-rounded-e-md" : "[&:has([aria-selected])]:oui-rounded-md"
         ),
         day: cnBase(
           //   buttonVariants({ variant: "ghost" }),
@@ -8243,14 +8399,26 @@ var sheetVariants = tv$1({
     side: {
       top: "oui-inset-x-0 oui-top-0 oui-border-b data-[state=closed]:oui-slide-out-to-top data-[state=open]:oui-slide-in-from-top",
       bottom: "oui-inset-x-0 oui-bottom-0 oui-rounded-t-2xl data-[state=closed]:oui-slide-out-to-bottom data-[state=open]:oui-slide-in-from-bottom",
-      left: "oui-inset-y-0 oui-left-0 oui-h-full oui-w-3/4 data-[state=closed]:oui-slide-out-to-left data-[state=open]:oui-slide-in-from-left sm:oui-max-w-sm",
-      right: "oui-inset-y-0 oui-right-0 oui-h-full oui-w-3/4 oui-border-l data-[state=closed]:oui-slide-out-to-right data-[state=open]:oui-slide-in-from-right sm:oui-max-w-sm"
+      // Keep left/right sides on logical start/end. In RTL, callers expect
+      // side="left" to attach to the visual start side; physical left/right
+      // places drawers on the opposite side from their trigger.
+      left: "oui-inset-y-0 oui-start-0 oui-h-full oui-w-3/4 sm:oui-max-w-sm",
+      right: "oui-inset-y-0 oui-end-0 oui-h-full oui-w-3/4 oui-border-s sm:oui-max-w-sm"
     }
   },
   defaultVariants: {
     side: "bottom"
   }
 });
+function getLogicalSideAnimationClass(side, direction) {
+  if (side === "left") {
+    return direction === "rtl" ? "data-[state=closed]:oui-slide-out-to-right data-[state=open]:oui-slide-in-from-right" : "data-[state=closed]:oui-slide-out-to-left data-[state=open]:oui-slide-in-from-left";
+  }
+  if (side === "right") {
+    return direction === "rtl" ? "data-[state=closed]:oui-slide-out-to-left data-[state=open]:oui-slide-in-from-left" : "data-[state=closed]:oui-slide-out-to-right data-[state=open]:oui-slide-in-from-right";
+  }
+  return void 0;
+}
 var SheetContent = React73.forwardRef(
   ({
     side = "bottom",
@@ -8261,43 +8429,54 @@ var SheetContent = React73.forwardRef(
     overlayClassName,
     children,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [
-    /* @__PURE__ */ jsx(SheetOverlay, { className: overlayClassName }),
-    /* @__PURE__ */ jsxs(
-      SheetPrimitive.Content,
-      {
-        ref,
-        className: cnBase(sheetVariants({ side }), className),
-        onOpenAutoFocus: (e) => e.preventDefault(),
-        onCloseAutoFocus: (e) => e.preventDefault(),
-        ...props,
-        children: [
-          closeable && /* @__PURE__ */ jsxs(
-            SheetPrimitive.Close,
-            {
-              className: cnBase(
-                "oui-sheet-close-btn oui-ring-offset-base-700 focus:oui-ring-ring oui-absolute oui-right-4 oui-top-4 oui-z-10 oui-rounded-sm oui-transition-opacity focus:oui-outline-none focus:oui-ring-2 focus:oui-ring-offset-2 active:oui-outline-none focus:orderly-outline-none disabled:oui-pointer-events-none data-[state=open]:oui-bg-secondary",
-                props?.closeClassName
-              ),
-              children: [
-                /* @__PURE__ */ jsx(
-                  CloseIcon,
-                  {
-                    size: closeableSize,
-                    color: "white",
-                    opacity: closeOpacity,
-                    onClick: props?.onClose
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { className: "oui-sr-only", children: "Close" })
-              ]
-            }
+  }, ref) => {
+    const direction = useDocumentDirection();
+    const sideAnimationClassName = getLogicalSideAnimationClass(
+      side,
+      direction
+    );
+    return /* @__PURE__ */ jsxs(SheetPortal, { children: [
+      /* @__PURE__ */ jsx(SheetOverlay, { className: overlayClassName }),
+      /* @__PURE__ */ jsxs(
+        SheetPrimitive.Content,
+        {
+          ref,
+          className: cnBase(
+            sheetVariants({ side }),
+            sideAnimationClassName,
+            className
           ),
-          children
-        ]
-      }
-    )
-  ] })
+          onOpenAutoFocus: (e) => e.preventDefault(),
+          onCloseAutoFocus: (e) => e.preventDefault(),
+          ...props,
+          children: [
+            closeable && /* @__PURE__ */ jsxs(
+              SheetPrimitive.Close,
+              {
+                className: cnBase(
+                  "oui-sheet-close-btn oui-ring-offset-base-700 focus:oui-ring-ring oui-absolute oui-end-4 oui-top-4 oui-z-10 oui-rounded-sm oui-transition-opacity focus:oui-outline-none focus:oui-ring-2 focus:oui-ring-offset-2 active:oui-outline-none focus:orderly-outline-none disabled:oui-pointer-events-none data-[state=open]:oui-bg-secondary",
+                  props?.closeClassName
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    CloseIcon,
+                    {
+                      size: closeableSize,
+                      color: "white",
+                      opacity: closeOpacity,
+                      onClick: props?.onClose
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "oui-sr-only", children: "Close" })
+                ]
+              }
+            ),
+            children
+          ]
+        }
+      )
+    ] });
+  }
 );
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 var SheetHeader = ({
@@ -8340,7 +8519,7 @@ var SheetFooter = ({
   "div",
   {
     className: cnBase(
-      "oui-sheet-footer oui-flex oui-flex-col-reverse sm:oui-flex-row sm:oui-justify-end sm:oui-space-x-2",
+      "oui-sheet-footer oui-flex oui-flex-col-reverse sm:oui-flex-row sm:oui-justify-end sm:oui-gap-x-2",
       className
     ),
     ...props
@@ -8726,7 +8905,7 @@ var dividerVariants = tv({
     },
     direction: {
       horizontal: ["oui-border-b"],
-      vertical: ["oui-border-l"]
+      vertical: ["oui-border-s"]
     },
     lineStyle: {
       // solid: "oui-border-solid",
@@ -8823,6 +9002,9 @@ var dialogVariants = tv$1({
     content: [
       "oui-dialog-content",
       "oui-fixed",
+      // RTL-EXCLUDE: Do not replace with `start-[50%]`.
+      // Keep physical left centering here: start maps to right in RTL, which
+      // breaks centering with translate-x-[-50%].
       "oui-left-[50%]",
       "oui-top-[50%]",
       "oui-z-50",
@@ -8853,7 +9035,7 @@ var dialogVariants = tv$1({
     close: [
       "oui-dialog-close-btn",
       "oui-absolute",
-      "oui-right-4",
+      "oui-end-4",
       "oui-top-4",
       // "oui-opacity-70",
       "oui-ring-offset-background",
@@ -8874,7 +9056,8 @@ var dialogVariants = tv$1({
       "oui-flex",
       "oui-flex-row",
       "oui-justify-end",
-      "oui-space-x-2",
+      // Use gap instead of space-x so spacing works in both LTR and RTL.
+      "oui-gap-2",
       "oui-pb-5",
       "oui-pt-2 lg:oui-pt-3"
       // "has-[&>*:nth-child(1)]:oui-bg-red-400",
@@ -9640,7 +9823,7 @@ var Picker = forwardRef(
           "div",
           {
             className: cnBase(
-              "oui-space-x-1",
+              "oui-gap-x-1",
               "oui-text-base-contrast-54",
               "oui-rounded-md",
               "oui-bg-base-8",
@@ -9895,7 +10078,8 @@ var tabsVariants = tv({
       "oui-text-base-contrast-36 hover:oui-text-base-contrast-54",
       "oui-ring-offset-background",
       "oui-transition-all",
-      "oui-space-x-1",
+      /** `gap-x` mirrors correctly in RTL; `space-x` uses asymmetric margins that can overlap pill corners. */
+      "oui-gap-x-1",
       "focus-visible:oui-outline-none",
       "focus-visible:oui-ring-2",
       "focus-visible:oui-ring-ring",
@@ -9908,12 +10092,7 @@ var tabsVariants = tv({
   variants: {
     variant: {
       text: {
-        list: [
-          "oui-space-x-6",
-          "oui-border-b",
-          "oui-border-line-6",
-          "oui-px-1"
-        ],
+        list: ["oui-gap-x-6", "oui-border-b", "oui-border-line-6", "oui-px-1"],
         trigger: [
           "oui-group",
           "oui-pb-2",
@@ -9926,15 +10105,16 @@ var tabsVariants = tv({
           "data-[state=active]:after:oui-absolute",
           "data-[state=active]:after:oui-rounded-full",
           "data-[state=active]:after:-oui-bottom-0",
-          "data-[state=active]:after:oui-left-0",
-          "data-[state=active]:after:oui-right-0"
+          "data-[state=active]:after:oui-start-0",
+          "data-[state=active]:after:oui-end-0"
         ]
       },
       contained: {
-        list: ["oui-space-x-[6px]"],
+        list: ["oui-gap-x-[6px]"],
         trigger: [
           "oui-group",
-          "oui-rounded",
+          /** `!rounded` defeats host/segment overrides that strip one physical corner under `[dir="rtl"]` + `:first-child`. */
+          "!oui-rounded",
           "oui-px-3",
           "oui-bg-base-7 hover:oui-bg-base-5",
           "oui-text-base-contrast-36",
@@ -9988,7 +10168,7 @@ var tabsVariants = tv({
       size: "sm",
       variant: "contained",
       className: {
-        list: ["oui-space-x-1"],
+        list: ["oui-gap-x-1"],
         trigger: ["oui-text-2xs", "oui-h-6"],
         icon: ["oui-w-[10px]", "oui-h-[10px]"]
       }
@@ -10006,7 +10186,7 @@ var tabsVariants = tv({
       size: "lg",
       variant: "contained",
       className: {
-        trigger: ["oui-text-sm", "oui-h-8", "oui-rounded-md"],
+        trigger: ["oui-text-sm", "oui-h-8", "!oui-rounded-md"],
         icon: ["oui-w-[14px]", "oui-h-[14px]"]
       }
     },
@@ -10014,7 +10194,7 @@ var tabsVariants = tv({
       size: "xl",
       variant: "contained",
       className: {
-        trigger: ["oui-text-base", "oui-h-9", "oui-rounded-md"],
+        trigger: ["oui-text-base", "oui-h-9", "!oui-rounded-md"],
         icon: ["oui-w-4", "oui-h-4"]
       }
     }
@@ -10068,22 +10248,138 @@ var OrderlyThemeContext = createContext(
 var useOrderlyTheme = () => {
   return useContext(OrderlyThemeContext);
 };
+var cachedRtlScrollType;
+function getRtlScrollType() {
+  if (cachedRtlScrollType) {
+    return cachedRtlScrollType;
+  }
+  if (typeof document === "undefined") {
+    cachedRtlScrollType = "negative";
+    return cachedRtlScrollType;
+  }
+  const outer = document.createElement("div");
+  const inner = document.createElement("div");
+  outer.dir = "rtl";
+  outer.style.width = "4px";
+  outer.style.height = "1px";
+  outer.style.overflow = "scroll";
+  outer.style.position = "absolute";
+  outer.style.top = "-1000px";
+  inner.style.width = "8px";
+  inner.style.height = "1px";
+  outer.appendChild(inner);
+  document.body.appendChild(outer);
+  if (outer.scrollLeft > 0) {
+    cachedRtlScrollType = "default";
+  } else {
+    outer.scrollLeft = 1;
+    cachedRtlScrollType = outer.scrollLeft === 0 ? "negative" : "reverse";
+  }
+  document.body.removeChild(outer);
+  return cachedRtlScrollType;
+}
+function getMaxScrollLeft(container) {
+  return Math.max(container.scrollWidth - container.clientWidth, 0);
+}
+function getScrollOffsetFromStart(container) {
+  const maxScrollLeft = getMaxScrollLeft(container);
+  if (getComputedStyle(container).direction !== "rtl") {
+    return container.scrollLeft;
+  }
+  switch (getRtlScrollType()) {
+    case "negative":
+      return -container.scrollLeft;
+    case "default":
+      return maxScrollLeft - container.scrollLeft;
+    case "reverse":
+      return container.scrollLeft;
+  }
+}
+function getScrollLeftForOffsetFromStart(container, offsetFromStart) {
+  const maxScrollLeft = getMaxScrollLeft(container);
+  const nextOffset = Math.min(Math.max(offsetFromStart, 0), maxScrollLeft);
+  if (getComputedStyle(container).direction !== "rtl") {
+    return nextOffset;
+  }
+  switch (getRtlScrollType()) {
+    case "negative":
+      return -nextOffset;
+    case "default":
+      return maxScrollLeft - nextOffset;
+    case "reverse":
+      return nextOffset;
+  }
+}
+function useScroll2() {
+  const [leadingVisible, setLeadingVisible] = useState(false);
+  const [tailingVisible, setTailingVisible] = useState(false);
+  const [isRTL, setIsRTL] = useState(false);
+  const containerRef = useRef(null);
+  const updateScrollVisibility = useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const maxScrollLeft = getMaxScrollLeft(container);
+    const offsetFromStart = getScrollOffsetFromStart(container);
+    const nextIsRTL = getComputedStyle(container).direction === "rtl";
+    setIsRTL(nextIsRTL);
+    setLeadingVisible(offsetFromStart > 1);
+    setTailingVisible(offsetFromStart < maxScrollLeft - 1);
+  }, []);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    container.addEventListener("scroll", updateScrollVisibility);
+    const intersectionObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          updateScrollVisibility();
+        }
+      });
+    });
+    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(updateScrollVisibility) : void 0;
+    intersectionObserver.observe(container);
+    resizeObserver?.observe(container);
+    updateScrollVisibility();
+    return () => {
+      container.removeEventListener("scroll", updateScrollVisibility);
+      intersectionObserver.disconnect();
+      resizeObserver?.disconnect();
+    };
+  }, [updateScrollVisibility]);
+  const onScoll = (direction) => {
+    const container = containerRef.current;
+    if (!container) return;
+    const currentOffset = getScrollOffsetFromStart(container);
+    const delta = direction === "leading" ? -100 : 100;
+    const left = getScrollLeftForOffsetFromStart(
+      container,
+      currentOffset + delta
+    );
+    container.scrollTo({ left, behavior: "smooth" });
+  };
+  return { containerRef, leadingVisible, tailingVisible, isRTL, onScoll };
+}
+
+// src/scrollIndicator/hooks/useDrag.ts
 function useDrag(containerRef) {
   const [isDragging, setIsDragging] = useState(false);
   const [startX, setStartX] = useState(0);
-  const [scrollLeft, setScrollLeft] = useState(0);
+  const [scrollOffsetFromStart, setScrollOffsetFromStart] = useState(0);
   const handleMouseDown = (e) => {
     if (!containerRef.current) return;
     setIsDragging(true);
     setStartX(e.pageX - containerRef.current.offsetLeft);
-    setScrollLeft(containerRef.current.scrollLeft);
+    setScrollOffsetFromStart(getScrollOffsetFromStart(containerRef.current));
   };
   const handleMouseMove = (e) => {
     if (!isDragging || !containerRef.current) return;
     e.preventDefault();
     const x = e.pageX - containerRef.current.offsetLeft;
     const walk = x - startX;
-    containerRef.current.scrollLeft = scrollLeft - walk;
+    containerRef.current.scrollLeft = getScrollLeftForOffsetFromStart(
+      containerRef.current,
+      scrollOffsetFromStart - walk
+    );
   };
   const handleMouseUp = () => {
     setIsDragging(false);
@@ -10095,58 +10391,9 @@ function useDrag(containerRef) {
     isDragging
   };
 }
-function useScroll2() {
-  const [leadingVisible, setLeadingVisible] = useState(false);
-  const [tailingVisible, setTailingVisible] = useState(false);
-  const containerRef = useRef(null);
-  useEffect(() => {
-    if (!containerRef.current) return;
-    const handleScroll = () => {
-      const container2 = containerRef.current;
-      if (!container2) return;
-      setLeadingVisible(container2.scrollLeft > 0);
-      setTailingVisible(
-        container2.scrollLeft + container2.clientWidth < container2.scrollWidth
-      );
-    };
-    const intersectionObserver = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          handleScroll();
-        }
-      });
-    });
-    const container = containerRef.current;
-    container.addEventListener("scroll", handleScroll);
-    intersectionObserver.observe(container);
-    return () => {
-      container.removeEventListener("scroll", handleScroll);
-      intersectionObserver.disconnect();
-    };
-  }, []);
-  useEffect(() => {
-    if (!containerRef.current) return;
-    const intersectionObserver = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) ;
-      });
-    });
-    intersectionObserver.observe(containerRef.current);
-    return () => {
-      intersectionObserver.disconnect();
-    };
-  }, []);
-  const onScoll = (direction) => {
-    if (direction === "left") {
-      containerRef.current?.scrollBy({ left: -100, behavior: "smooth" });
-    } else {
-      containerRef.current?.scrollBy({ left: 100, behavior: "smooth" });
-    }
-  };
-  return { containerRef, leadingVisible, tailingVisible, onScoll };
-}
 var ScrolButton = (props) => {
-  const { visible, leading, tailing, onClick } = props;
+  const { visible, leading, tailing, isRTL, onClick } = props;
+  const isLeftEdge = isRTL ? tailing : leading;
   if (!visible) {
     return null;
   }
@@ -10154,14 +10401,18 @@ var ScrolButton = (props) => {
     "button",
     {
       onClick: () => {
-        onClick?.(leading ? "left" : "right");
+        onClick?.(leading ? "leading" : "tailing");
+      },
+      style: {
+        direction: "ltr",
+        left: isLeftEdge ? 0 : void 0,
+        right: isLeftEdge ? void 0 : 0
       },
       className: cnBase(
         leading ? "oui-scroll-indicator-leading" : "oui-scroll-indicator-tailing",
         "oui-group oui-flex",
         "oui-absolute oui-top-0 oui-bottom-0",
-        leading && "oui-left-0 oui-flex-row-reverse",
-        tailing && "oui-right-0"
+        isLeftEdge && "oui-flex-row-reverse"
       ),
       children: [
         /* @__PURE__ */ jsx(
@@ -10170,7 +10421,7 @@ var ScrolButton = (props) => {
             className: cnBase(
               "oui-w-6 oui-h-full",
               "oui-bg-[linear-gradient(90deg,rgba(var(--oui-color-base-9)_/_0)_0%,rgba(var(--oui-color-base-9)_/_1)_100%)]",
-              leading && "oui-rotate-180"
+              isLeftEdge && "oui-rotate-180"
             )
           }
         ),
@@ -10186,7 +10437,7 @@ var ScrolButton = (props) => {
               {
                 className: cnBase(
                   "oui-text-base-contrast-54 group-hover:oui-text-base-contrast",
-                  leading && "oui-rotate-180"
+                  isLeftEdge && "oui-rotate-180"
                 )
               }
             )
@@ -10209,14 +10460,14 @@ var ArrowRightIcon = (props) => /* @__PURE__ */ jsx(
   }
 );
 var ScrollIndicator = (props) => {
-  const { containerRef, leadingVisible, tailingVisible, onScoll } = useScroll2();
+  const { containerRef, leadingVisible, tailingVisible, isRTL, onScoll } = useScroll2();
   const { handleMouseDown, handleMouseMove, handleMouseUp, isDragging } = useDrag(containerRef);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cnBase(
         "oui-scroll-indicator",
-        "oui-relative oui-select-none oui-overflow-hidden",
+        "oui-relative oui-min-w-0 oui-flex-1 oui-select-none oui-overflow-hidden",
         props.className
       ),
       children: [
@@ -10235,13 +10486,33 @@ var ScrollIndicator = (props) => {
             children: props.children
           }
         ),
-        /* @__PURE__ */ jsx(ScrolButton, { leading: true, onClick: onScoll, visible: leadingVisible }),
-        /* @__PURE__ */ jsx(ScrolButton, { tailing: true, onClick: onScoll, visible: tailingVisible })
+        /* @__PURE__ */ jsx(
+          ScrolButton,
+          {
+            leading: true,
+            isRTL,
+            onClick: onScoll,
+            visible: leadingVisible
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ScrolButton,
+          {
+            tailing: true,
+            isRTL,
+            onClick: onScoll,
+            visible: tailingVisible
+          }
+        )
       ]
     }
   );
 };
 var TabsContext = createContext({});
+function useResolvedTabsDir(propDir) {
+  const fromDocument = useDocumentDirection();
+  return propDir ?? fromDocument;
+}
 var Tabs = (props) => {
   const { getComponentTheme } = useOrderlyTheme();
   const {
@@ -10250,8 +10521,10 @@ var Tabs = (props) => {
     variant,
     showScrollIndicator,
     value,
+    dir: dirProp,
     ...rest
   } = props;
+  const dir = useResolvedTabsDir(dirProp);
   const tabsOverrides = getComponentTheme("tabs", {
     variant: variant ?? "contained"
   });
@@ -10305,7 +10578,7 @@ var Tabs = (props) => {
   };
   return /* @__PURE__ */ jsxs(TabsContext.Provider, { value: memoizedValue, children: [
     props.children,
-    /* @__PURE__ */ jsxs(TabsBase, { value, ...rest, children: [
+    /* @__PURE__ */ jsxs(TabsBase, { value, ...rest, dir, children: [
       /* @__PURE__ */ jsxs(
         Flex,
         {
@@ -10553,7 +10826,7 @@ var sliderVariants = tv({
       "data-[disabled]:oui-hidden"
     ],
     track: "oui-relative oui-h-[8px] oui-w-full oui-grow oui-overflow-hidden oui-rounded-full",
-    trackInner: "oui-absolute oui-left-0 oui-right-0 oui-h-[2px] oui-top-[3px]  oui-pointer-events-none oui-bg-base-2",
+    trackInner: "oui-absolute oui-start-0 oui-end-0 oui-h-[2px] oui-top-[3px]  oui-pointer-events-none oui-bg-base-2",
     range: "oui-absolute oui-h-[2px] oui-top-[3px] oui-bg-primary data-[disabled]:oui-bg-base-2",
     mark: "oui-absolute oui-top-[1px] oui-w-[6px] oui-h-[6px] oui-rounded oui-border oui-border-base-2 oui-bg-base-6 oui-pointer-events-none oui-translate-x-[-50%]",
     tips: [
@@ -11119,7 +11392,7 @@ var ListViewInner = (props, ref) => {
           {
             className: cn(
               "oui-space-y-3 oui-h-full oui-w-full",
-              emptyDataSouce && "oui-absolute oui-bottom-0 oui-left-0 oui-right-0 oui-top-0",
+              emptyDataSouce && "oui-absolute oui-bottom-0 oui-start-0 oui-end-0 oui-top-0",
               props.contentClassName
             )({ twMerge: true }),
             children: listViewElement
@@ -11354,7 +11627,7 @@ var dropdownMenuVariants = tv$1({
     ],
     label: "oui-px-2 oui-py-1.5 oui-text-sm oui-font-semibold",
     separator: "-oui-mx-1 oui-my-1 oui-h-px oui-bg-muted",
-    shortcut: "oui-ml-auto oui-text-xs oui-tracking-widest oui-opacity-60"
+    shortcut: "oui-ms-auto oui-text-xs oui-tracking-widest oui-opacity-60"
   },
   variants: {
     size: {
@@ -11399,8 +11672,8 @@ var dropdownMenuVariants = tv$1({
     },
     inset: {
       true: {
-        item: ["oui-pl-8"],
-        label: ["oui-pl-8"]
+        item: ["oui-ps-8"],
+        label: ["oui-ps-8"]
       }
     }
   },
@@ -11882,6 +12155,6 @@ var LIGHT_THEME_CSS_VARS = {
   "--oui-spacing-xl": "33.75rem"
 };
 
-export { ActionSheet, AddCircleIcon, AffiliateIcon, AlertDialog, ArrowDownShortIcon, ArrowDownSquareFillIcon, ArrowDownUpIcon, ArrowLeftRightIcon, ArrowLeftRightSquareFill, ArrowLeftShortIcon, ArrowRightShortIcon, ArrowRightUpSquareFillIcon, ArrowUpShortIcon, ArrowUpSquareFillIcon, AssetIcon, Avatar, Badge, BarChartIcon, BattleActiveIcon, BattleIcon, BattleInactiveIcon, BattleSolidActiveIcon, BattleSolidInactiveIcon, BellIcon, Box, Button, Calendar, CalendarIcon, CalendarMinusIcon, Card, CardBase, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CaretDownIcon, CaretLeftIcon, CaretRightIcon, CaretUpIcon, ChainIcon, CheckIcon, CheckSquareEmptyIcon, Checkbox, CheckedCircleFillIcon, CheckedSquareFillIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleOutlinedIcon, CloseCircleFillIcon, CloseIcon, CloseRoundFillIcon, CloseSquareFillIcon, collapse_default as Collapse, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ConfirmDialog, CopyIcon, DARK_THEME_CSS_VARS, DataFilter, DataTable, DatePicker2 as DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DotStatus, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuTrigger, EVMAvatar, EarnActiveIcon, EarnIcon, EarnInactiveIcon, EditIcon, Either, EmptyDataState, EmptyStateIcon, EsOrderlyIcon, ExclamationFillIcon, EyeCloseIcon, EyeIcon, FeeTierIcon, Flex, GradientText, Grid2 as Grid, HoverCard, HoverCardContent, HoverCardRoot, HoverCardTrigger, Icon, IconButton, InfoCircleIcon, InjectableEmptyDataState, Input2 as Input, InputAdditional, LIGHT_THEME_CSS_VARS, LeaderboardActiveIcon, LeaderboardInactiveIcon, LeftNavVaultsIcon, ListView, LocaleContext, LocaleProvider, Logo, MarketsActiveIcon, MarketsInactiveIcon, Marquee, ModalContext, ModalIdContext, ModalProvider, MultiSortHeader, NewsFillIcon, tailwind_exports as OUITailwind, OrderlyIcon, OrderlyThemeProvider, PaginationItems, PeopleIcon, PerpsIcon, PersonIcon, Picker, PlusIcon, Popover, PopoverAnchor, PopoverContent, PopoverRoot, PopoverTrigger, PopupUnionIcon, PortfolioActiveIcon, PortfolioInactiveIcon, QuestionFillIcon, ReduceIcon, ReferralSolidIcon, RefreshIcon, RwaIcon, ScrollArea, ScrollBar, ScrollIndicator, Select2 as Select, SelectItem, SelectedChoicesFillIcon, ServerFillIcon, SettingFillIcon, SettingIcon, ShareIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SimpleDialog, SimpleDialogFooter, SimpleDropdownMenu, SimpleSheet, Slider, SortingAscIcon, SortingDescIcon, SortingIcon, Spinner, SpotIcon, SquareOutlinedIcon, StarChildChatActiveIcon, StarChildChatInactiveIcon, Statistic, StatisticLabel, SwapHorizIcon, Switch, SymbolBadge, TabPanel, features_exports as TableFeatures, Tabs, TabsBase, TabsContent, TabsList, TabsTrigger, Text2 as Text, TextField, ThrottledButton, Tips, ToastTile, Toaster, TokenIcon, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, TraderMobileIcon, TradingActiveIcon, TradingIcon, TradingInactiveIcon, TradingLeftNavIcon, TradingRewardsIcon, TriggerDialog, VaultsIcon, VectorIcon, WalletIcon, WarningIcon, WoofiStakeIcon, boxVariants, buttonVariants, capitalizeFirstLetter, convertValueToPercentage, dotStatusVariants, formatAddress, gradientTextVariants, iconButtonVariants, formatter_exports as inputFormatter, modal, parseNumber, registerSimpleDialog, registerSimpleSheet, scrollAreaVariants, startViewTransition, statisticVariants, textVariants, tv, useLocale, useLongPress, useMediaQuery, useModal, useMultiSort, useObserverElement, useOrderlyTheme, usePagination, useScreen, useThemeAttribute };
+export { ActionSheet, AddCircleIcon, AffiliateIcon, AlertDialog, ArrowDownShortIcon, ArrowDownSquareFillIcon, ArrowDownUpIcon, ArrowLeftRightIcon, ArrowLeftRightSquareFill, ArrowLeftShortIcon, ArrowRightShortIcon, ArrowRightUpSquareFillIcon, ArrowUpShortIcon, ArrowUpSquareFillIcon, AssetIcon, Avatar, Badge, BarChartIcon, BattleActiveIcon, BattleIcon, BattleInactiveIcon, BattleSolidActiveIcon, BattleSolidInactiveIcon, BellIcon, Box, Button, Calendar, CalendarIcon, CalendarMinusIcon, Card, CardBase, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CaretDownIcon, CaretLeftIcon, CaretRightIcon, CaretUpIcon, ChainIcon, CheckIcon, CheckSquareEmptyIcon, Checkbox, CheckedCircleFillIcon, CheckedSquareFillIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleOutlinedIcon, CloseCircleFillIcon, CloseIcon, CloseRoundFillIcon, CloseSquareFillIcon, collapse_default as Collapse, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ConfirmDialog, CopyIcon, DARK_THEME_CSS_VARS, DataFilter, DataTable, DatePicker2 as DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DotStatus, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuTrigger, EVMAvatar, EarnActiveIcon, EarnIcon, EarnInactiveIcon, EditIcon, Either, EmptyDataState, EmptyStateIcon, EsOrderlyIcon, ExclamationFillIcon, EyeCloseIcon, EyeIcon, FeeTierIcon, Flex, GradientText, Grid2 as Grid, HoverCard, HoverCardContent, HoverCardRoot, HoverCardTrigger, Icon, IconButton, InfoCircleIcon, InjectableEmptyDataState, Input2 as Input, InputAdditional, LIGHT_THEME_CSS_VARS, LeaderboardActiveIcon, LeaderboardInactiveIcon, LeftNavVaultsIcon, ListView, LocaleContext, LocaleProvider, Logo, MarketsActiveIcon, MarketsInactiveIcon, Marquee, ModalContext, ModalIdContext, ModalProvider, MultiSortHeader, NewsFillIcon, tailwind_exports as OUITailwind, OrderlyIcon, OrderlyThemeProvider, PaginationItems, PeopleIcon, PerpsIcon, PersonIcon, Picker, PlusIcon, Popover, PopoverAnchor, PopoverContent, PopoverRoot, PopoverTrigger, PopupUnionIcon, PortfolioActiveIcon, PortfolioInactiveIcon, QuestionFillIcon, ReduceIcon, ReferralSolidIcon, RefreshIcon, RwaIcon, ScrollArea, ScrollBar, ScrollIndicator, Select2 as Select, SelectItem, SelectedChoicesFillIcon, ServerFillIcon, SettingFillIcon, SettingIcon, ShareIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SimpleDialog, SimpleDialogFooter, SimpleDropdownMenu, SimpleSheet, Slider, SortingAscIcon, SortingDescIcon, SortingIcon, Spinner, SpotIcon, SquareOutlinedIcon, StarChildChatActiveIcon, StarChildChatInactiveIcon, Statistic, StatisticLabel, SwapHorizIcon, Switch, SymbolBadge, TabPanel, features_exports as TableFeatures, Tabs, TabsBase, TabsContent, TabsList, TabsTrigger, Text2 as Text, TextField, ThrottledButton, Tips, ToastTile, Toaster, TokenIcon, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, TraderMobileIcon, TradingActiveIcon, TradingIcon, TradingInactiveIcon, TradingLeftNavIcon, TradingRewardsIcon, TriggerDialog, VaultsIcon, VectorIcon, WalletIcon, WarningIcon, WoofiStakeIcon, boxVariants, buttonVariants, capitalizeFirstLetter, convertValueToPercentage, dotStatusVariants, formatAddress, gradientTextVariants, iconButtonVariants, formatter_exports as inputFormatter, modal, parseNumber, registerSimpleDialog, registerSimpleSheet, scrollAreaVariants, startViewTransition, statisticVariants, textVariants, tv, useDocumentDirection, useLocale, useLongPress, useMediaQuery, useModal, useMultiSort, useObserverElement, useOrderlyTheme, usePagination, useScreen, useThemeAttribute };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map