@orderly.network/ui-scaffold 3.0.4 → 3.1.0-alpha.0

package/dist/index.js

@@ -544,7 +544,7 @@ var init_tradingMenu_ui = __esm({
               icon,
               /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", intensity: 80, weight: "semibold", children: label })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { className: "oui-ml-auto", children: selected ? /* @__PURE__ */ jsxRuntime.jsx(ui.SelectedChoicesFillIcon, { size: 14 }) : null })
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { className: "oui-ms-auto", children: selected ? /* @__PURE__ */ jsxRuntime.jsx(ui.SelectedChoicesFillIcon, { size: 14 }) : null })
           ]
         }
       );
@@ -601,13 +601,13 @@ var init_tradingMenu_ui = __esm({
                 ui.PopupUnionIcon,
                 {
                   size: 78,
-                  className: "oui-text-base-8 oui-absolute oui-left-1/2 oui-top-1/2 -oui-translate-x-1/2 -oui-translate-y-1/2"
+                  className: "oui-text-base-8 oui-absolute oui-start-1/2 oui-top-1/2 -oui-translate-x-1/2 -oui-translate-y-1/2"
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 ui.Flex,
                 {
-                  className: "oui-absolute oui-left-1/2 oui-top-1/2 -oui-translate-x-1/2 -oui-translate-y-1/2",
+                  className: "oui-absolute oui-start-1/2 oui-top-1/2 -oui-translate-x-1/2 -oui-translate-y-1/2",
                   itemAlign: "center",
                   justify: "center",
                   children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseRoundFillIcon, { size: 28 })
@@ -1097,7 +1097,7 @@ var ChainMenu = (props) => {
             height: "10",
             viewBox: "0 0 10 10",
             xmlns: "http://www.w3.org/2000/svg",
-            className: "oui-absolute oui-right-0 oui-bottom-0",
+            className: "oui-absolute oui-end-0 oui-bottom-0",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
                 "linearGradient",
@@ -1135,7 +1135,7 @@ var ChainMenu = (props) => {
         onCloseAutoFocus: (e) => e.preventDefault(),
         onClick: (e) => e.stopPropagation(),
         sideOffset: 4,
-        collisionPadding: { right: 16 },
+        collisionPadding: { left: 16, right: 16 },
         className: ui.cn(
           "oui-bg-base-8 oui-w-[456px] oui-p-4 oui-rounded-xl",
           "oui-border oui-border-line-6",
@@ -1182,7 +1182,7 @@ var ChainMenuUiMobile = (props) => {
             className: "oui-h-[18px] oui-w-[18px]"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-absolute oui-right-0 oui-bottom-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-absolute oui-end-0 oui-bottom-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
           "svg",
           {
             width: "9",
@@ -1365,7 +1365,7 @@ var LanguageSwitcher = (props) => {
         className: ui.cn(
           //40 * 8 + 4 * 7 = 348px, more than 8 will show scrollbars
           "oui-custom-scrollbar oui-max-h-[348px] oui-overflow-y-auto",
-          "oui-grid oui-gap-1 oui-pr-[6px]"
+          "oui-grid oui-gap-1 oui-pe-[6px]"
         ),
         children: languageList
       }
@@ -1379,7 +1379,7 @@ var LanguageSwitcher = (props) => {
           onClick: (e) => e.stopPropagation(),
           sideOffset: 10,
           align: "start",
-          collisionPadding: { right: 16 },
+          collisionPadding: { left: 16, right: 16 },
           className: ui.cn(
             "oui-w-[320px] lg:oui-w-[360px]",
             "oui-rounded-xl oui-bg-base-8 oui-p-5",
@@ -1558,7 +1558,7 @@ var Footer = (props) => {
             ui.Divider,
             {
               direction: "vertical",
-              className: "oui-h-[18px] oui-px-1 oui-ml-2 oui-border-line-12"
+              className: "oui-h-[18px] oui-px-1 oui-ms-2 oui-border-line-12"
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 2, children: [
@@ -1695,7 +1695,7 @@ var NotificationUI = (props) => {
       ref: notificationRef,
       "data-state": showAnnouncement ? "open" : "closed",
       className: ui.cn(
-        "oui-fixed oui-bottom-[calc(env(safe-area-inset-bottom)+8px)] oui-left-2 oui-z-50 oui-w-[calc(100%_-_16px)] oui-translate-y-[120%] oui-rounded-lg oui-border oui-border-line-6 oui-bg-base-8 md:oui-bottom-10 md:oui-left-auto md:oui-right-3 md:oui-w-[420px]",
+        "oui-fixed oui-bottom-[calc(env(safe-area-inset-bottom)+8px)] oui-start-2 oui-z-50 oui-w-[calc(100%_-_16px)] oui-translate-y-[120%] oui-rounded-lg oui-border oui-border-line-6 oui-bg-base-8 md:oui-bottom-10 md:oui-start-auto md:oui-end-3 md:oui-w-[420px]",
         "oui-transition-all oui-duration-300 oui-ease-in-out",
         showAnnouncement ? "oui-visible" : "oui-invisible"
       ),
@@ -1732,7 +1732,7 @@ var menuItemVariants = ui.tv({
       "oui-py-2",
       "oui-rounded-md",
       "oui-w-full",
-      "oui-text-left",
+      "oui-text-start",
       "oui-text-base",
       "oui-text-base-contrast-36",
       // "oui-flex",
@@ -2182,7 +2182,7 @@ var SubAccountScript = () => {
         ui.toast.success(t("subAccount.modal.switch.success.description"));
       });
     },
-    [switchAccount]
+    [switchAccount, t]
   );
   const accountsWithValues = React7.useMemo(() => {
     const mainAccountUnsettlePnl = accountValue[mainAccountId] ?? 0;
@@ -2428,9 +2428,9 @@ var AccountItem = (props) => {
           "div",
           {
             className: ui.cn(
-              "oui-absolute -oui-right-[1px] -oui-top-[1px] oui-leading-3",
+              "oui-absolute -oui-end-[1px] -oui-top-[1px] oui-leading-3",
               "oui-text-[10px] oui-font-semibold oui-text-base-10",
-              "oui-rounded-[6px] oui-rounded-br-none oui-rounded-tl-none oui-bg-[rgb(var(--oui-gradient-brand-start))] oui-py-0.5 oui-pl-1 oui-pr-[5px]"
+              "oui-rounded-[6px] oui-rounded-ee-none oui-rounded-ss-none oui-bg-[rgb(var(--oui-gradient-brand-start))] oui-py-0.5 oui-ps-1 oui-pe-[5px]"
             ),
             children: t("subAccount.modal.current")
           }
@@ -2568,7 +2568,7 @@ var CreateSubAccount = (props) => {
         }
       }
     );
-  }, [subAccountCount, maxSubAccountCount]);
+  }, [subAccountCount, maxSubAccountCount, t]);
   const header = /* @__PURE__ */ jsxRuntime.jsxs(
     ui.Flex,
     {
@@ -2896,7 +2896,7 @@ function SubAccountUI(props) {
         align: "start",
         side: "bottom",
         sideOffset: 16,
-        collisionPadding: { right: 16 },
+        collisionPadding: { left: 16, right: 16 },
         onMouseEnter,
         onMouseLeave: () => {
           props.onOpenChange(false);
@@ -3018,7 +3018,7 @@ var LeftNavSheet = (props) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(ui.SwapHorizIcon, {}) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-ms-auto", children: /* @__PURE__ */ jsxRuntime.jsx(ui.SwapHorizIcon, {}) })
     ] });
   }, [state, t]);
   const openExternalLink = (url) => {
@@ -3337,10 +3337,10 @@ var ScanQRCodeContent = (props) => {
       /* @__PURE__ */ jsxRuntime.jsx(QRCodeScanner, { onSuccess: props.onScanSuccess }),
       /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(LineGradient, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(RadiusGradient, { className: "oui-absolute oui-left-[-1.5px] oui-top-[-1.5px]" }),
-        /* @__PURE__ */ jsxRuntime.jsx(RadiusGradient, { className: "oui-absolute oui-right-[-1.5px] oui-top-[-1.5px] oui-rotate-90" }),
-        /* @__PURE__ */ jsxRuntime.jsx(RadiusGradient, { className: "oui-absolute oui-bottom-[-1.5px] oui-left-[-1.5px] -oui-rotate-90" }),
-        /* @__PURE__ */ jsxRuntime.jsx(RadiusGradient, { className: "oui-absolute oui-bottom-[-1.5px] oui-right-[-1.5px] -oui-rotate-180" })
+        /* @__PURE__ */ jsxRuntime.jsx(RadiusGradient, { className: "oui-absolute oui-start-[-1.5px] oui-top-[-1.5px]" }),
+        /* @__PURE__ */ jsxRuntime.jsx(RadiusGradient, { className: "oui-absolute oui-end-[-1.5px] oui-top-[-1.5px] oui-rotate-90" }),
+        /* @__PURE__ */ jsxRuntime.jsx(RadiusGradient, { className: "oui-absolute oui-bottom-[-1.5px] oui-start-[-1.5px] -oui-rotate-90" }),
+        /* @__PURE__ */ jsxRuntime.jsx(RadiusGradient, { className: "oui-absolute oui-bottom-[-1.5px] oui-end-[-1.5px] -oui-rotate-180" })
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", intensity: 98, weight: "semibold", children: t("linkDevice.scanQRCode") }),
@@ -3412,7 +3412,7 @@ var LineGradient = () => {
     "div",
     {
       className: ui.cn(
-        "oui-absolute oui-left-[30px] oui-top-0",
+        "oui-absolute oui-start-[30px] oui-top-0",
         "oui-h-[2px] oui-w-[calc(100%-60px)] oui-rounded-full",
         "oui-bg-[linear-gradient(270deg,rgb(var(--oui-gradient-brand-end))_0%,rgb(var(--oui-gradient-brand-start))_100%)]",
         "oui-shadow-[0_0_8px_4px_rgba(var(--oui-gradient-brand-start)/0.12)]",
@@ -4097,7 +4097,7 @@ var MainNavMobile = (props) => {
           /* @__PURE__ */ jsxRuntime.jsx(
             ui.ChevronLeftIcon,
             {
-              className: "oui-absolute oui-left-6 oui-text-base-contrast-54",
+              className: "oui-absolute oui-start-6 oui-text-base-contrast-54",
               onClick: onBack
             }
           ),
@@ -4577,7 +4577,7 @@ var TotalValue = (props) => {
             intensity: 98,
             visible: props.visible,
             unit: "USDC",
-            unitClassName: "oui-text-base-contrast-20 oui-ml-1",
+            unitClassName: "oui-text-base-contrast-20 oui-ms-1",
             as: "div",
             children: totalValue ?? "-"
           }
@@ -4625,7 +4625,7 @@ var FreeCollateral = (props) => {
           {
             intensity: 98,
             unit: "USDC",
-            unitClassName: "oui-text-base-contrast-20 oui-ml-1",
+            unitClassName: "oui-text-base-contrast-20 oui-ms-1",
             visible,
             as: "div",
             children: freeCollateral ?? "-"
@@ -4727,7 +4727,7 @@ var AccountInfoPopover = (props) => {
               visible: props.visible,
               unit: "USDC",
               className: "oui-transition-transform group-hover:-oui-translate-x-5",
-              unitClassName: "oui-text-base-contrast-36 oui-ml-1",
+              unitClassName: "oui-text-base-contrast-36 oui-ms-1",
               children: totalValue ?? "-"
             }
           )
@@ -4751,7 +4751,7 @@ var AccountInfoPopover = (props) => {
               unit: "USDC",
               visible: props.visible,
               className: "oui-transition-transform group-hover:-oui-translate-x-5",
-              unitClassName: "oui-text-base-contrast-36 oui-ml-1",
+              unitClassName: "oui-text-base-contrast-36 oui-ms-1",
               children: props.freeCollateral ?? "-"
             }
           )
@@ -4833,7 +4833,7 @@ var DropdownMenu = (props) => {
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
-        className: "oui-absolute oui-right-1 oui-top-1",
+        className: "oui-absolute oui-end-1 oui-top-1",
         onClick: props.onSetTop,
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           "svg",
@@ -5146,7 +5146,7 @@ var MessageCenter = (props) => {
                 className: "hover:oui-opacity-100"
               }
             ),
-            messageSize > 0 && showAnnouncement && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-absolute -oui-right-[6px] -oui-top-[6px] oui-flex oui-size-4 oui-items-center oui-justify-center oui-rounded-full oui-bg-primary-darken oui-text-[10px] oui-leading-none oui-text-primary-contrast", children: messageSize })
+            messageSize > 0 && showAnnouncement && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-absolute -oui-end-[6px] -oui-top-[6px] oui-flex oui-size-4 oui-items-center oui-justify-center oui-rounded-full oui-bg-primary-darken oui-text-[10px] oui-leading-none oui-text-primary-contrast", children: messageSize })
           ] }) })
         }
       ),
@@ -5274,7 +5274,7 @@ var NavItem2 = (props) => {
                 children: item.label ?? item.name
               }
             ),
-            hasSubMenu && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-ml-1 group-data-[open=true]:oui-rotate-180", children: isActive ? /* @__PURE__ */ jsxRuntime.jsx(ActiveIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(ui.ChevronDownIcon, { size: 12, color: "white" }) })
+            hasSubMenu && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-ms-1 group-data-[open=true]:oui-rotate-180", children: isActive ? /* @__PURE__ */ jsxRuntime.jsx(ActiveIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(ui.ChevronDownIcon, { size: 12, color: "white" }) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             ui.Box,
@@ -5464,7 +5464,7 @@ var Tag = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: "oui-ml-1 oui-inline-flex oui-rounded oui-bg-gradient-to-r oui-from-[rgb(var(--oui-gradient-brand-start)_/_0.12)] oui-to-[rgb(var(--oui-gradient-brand-end)_/_0.12)] oui-px-2 oui-py-1",
+      className: "oui-ms-1 oui-inline-flex oui-rounded oui-bg-gradient-to-r oui-from-[rgb(var(--oui-gradient-brand-start)_/_0.12)] oui-to-[rgb(var(--oui-gradient-brand-end)_/_0.12)] oui-px-2 oui-py-1",
       children: /* @__PURE__ */ jsxRuntime.jsx(
         ui.Text.gradient,
         {
@@ -5477,14 +5477,14 @@ var Tag = (props) => {
     }
   );
 };
-var ICON_CLASSNAME = "oui-flex oui-border oui-border-line oui-w-6 oui-h-6 oui-rounded-md oui-justify-center oui-items-center oui-absolute oui-left-0 oui-top-0";
+var ICON_CLASSNAME = "oui-flex oui-border oui-border-line oui-w-6 oui-h-6 oui-rounded-md oui-justify-center oui-items-center oui-absolute oui-start-0 oui-top-0";
 var ItemIcon = (props) => {
   const { isActive } = props;
   if (!props.item.icon) {
     return null;
   }
   if (typeof props.item.icon === "string") {
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-mr-1 oui-size-[20px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-me-1 oui-size-[20px]", children: /* @__PURE__ */ jsxRuntime.jsx(
       "img",
       {
         src: isActive ? props.item.activeIcon || props.item.icon : props.item.icon,
@@ -5522,7 +5522,7 @@ var CampaignButton = (props) => {
       item: props.item,
       onClick: props.onItemClick,
       classNames: {
-        navItem: ui.cn("oui-text-base-contrast-54 -oui-ml-2", props.className)
+        navItem: ui.cn("oui-text-base-contrast-54 -oui-ms-2", props.className)
       }
     }
   ) });
@@ -5696,7 +5696,7 @@ var MaintenanceTipsUI = (props) => {
     {
       className: ui.cn(
         "oui-bg-warning-darken/10 oui-text-warning-darken oui-text-2xs md:oui-text-sm oui-relative oui-gap-1",
-        "oui-mx-1 md:oui-mx-0 md:oui-w-full  oui-pl-2 md:oui-pl-4 oui-pr-9 md:oui-pr-[60px] oui-py-2 md:oui-py-3",
+        "oui-mx-1 md:oui-mx-0 md:oui-w-full oui-ps-2 md:oui-ps-4 oui-pe-9 md:oui-pe-[60px] oui-py-2 md:oui-py-3",
         "oui-leading-4",
         "oui-rounded-xl md:oui-rounded-none",
         "oui-min-h-[48px]",
@@ -5718,7 +5718,7 @@ var MaintenanceTipsUI = (props) => {
           CloseIcon,
           {
             size: 16,
-            className: "oui-absolute oui-right-2 md:oui-right-4 oui-text-secondary/[0.36] hover:oui-text-secondary/80 oui-cursor-pointer -oui-translate-y-2/4 oui-top-2/4",
+            className: "oui-absolute oui-end-2 md:oui-end-4 oui-text-secondary/[0.36] hover:oui-text-secondary/80 oui-cursor-pointer -oui-translate-y-2/4 oui-top-2/4",
             onClick: closeTips
           }
         )