@orderly.network/ui-scaffold 3.0.4 → 3.1.0

package/dist/index.mjs

@@ -537,7 +537,7 @@ var init_tradingMenu_ui = __esm({
               icon,
               /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 80, weight: "semibold", children: label })
             ] }),
-            /* @__PURE__ */ jsx(Flex, { className: "oui-ml-auto", children: selected ? /* @__PURE__ */ jsx(SelectedChoicesFillIcon, { size: 14 }) : null })
+            /* @__PURE__ */ jsx(Flex, { className: "oui-ms-auto", children: selected ? /* @__PURE__ */ jsx(SelectedChoicesFillIcon, { size: 14 }) : null })
           ]
         }
       );
@@ -594,13 +594,13 @@ var init_tradingMenu_ui = __esm({
                 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__ */ jsx(
                 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__ */ jsx(CloseRoundFillIcon, { size: 28 })
@@ -1090,7 +1090,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__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
                 "linearGradient",
@@ -1128,7 +1128,7 @@ var ChainMenu = (props) => {
         onCloseAutoFocus: (e) => e.preventDefault(),
         onClick: (e) => e.stopPropagation(),
         sideOffset: 4,
-        collisionPadding: { right: 16 },
+        collisionPadding: { left: 16, right: 16 },
         className: cn(
           "oui-bg-base-8 oui-w-[456px] oui-p-4 oui-rounded-xl",
           "oui-border oui-border-line-6",
@@ -1175,7 +1175,7 @@ var ChainMenuUiMobile = (props) => {
             className: "oui-h-[18px] oui-w-[18px]"
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "oui-absolute oui-right-0 oui-bottom-0", children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: "oui-absolute oui-end-0 oui-bottom-0", children: /* @__PURE__ */ jsxs(
           "svg",
           {
             width: "9",
@@ -1358,7 +1358,7 @@ var LanguageSwitcher = (props) => {
         className: 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
       }
@@ -1372,7 +1372,7 @@ var LanguageSwitcher = (props) => {
           onClick: (e) => e.stopPropagation(),
           sideOffset: 10,
           align: "start",
-          collisionPadding: { right: 16 },
+          collisionPadding: { left: 16, right: 16 },
           className: cn(
             "oui-w-[320px] lg:oui-w-[360px]",
             "oui-rounded-xl oui-bg-base-8 oui-p-5",
@@ -1551,7 +1551,7 @@ var Footer = (props) => {
             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__ */ jsxs(Flex, { gap: 2, children: [
@@ -1688,7 +1688,7 @@ var NotificationUI = (props) => {
       ref: notificationRef,
       "data-state": showAnnouncement ? "open" : "closed",
       className: 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"
       ),
@@ -1725,7 +1725,7 @@ var menuItemVariants = 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",
@@ -2175,7 +2175,7 @@ var SubAccountScript = () => {
         toast.success(t("subAccount.modal.switch.success.description"));
       });
     },
-    [switchAccount]
+    [switchAccount, t]
   );
   const accountsWithValues = useMemo(() => {
     const mainAccountUnsettlePnl = accountValue[mainAccountId] ?? 0;
@@ -2421,9 +2421,9 @@ var AccountItem = (props) => {
           "div",
           {
             className: 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")
           }
@@ -2561,7 +2561,7 @@ var CreateSubAccount = (props) => {
         }
       }
     );
-  }, [subAccountCount, maxSubAccountCount]);
+  }, [subAccountCount, maxSubAccountCount, t]);
   const header = /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -2889,7 +2889,7 @@ function SubAccountUI(props) {
         align: "start",
         side: "bottom",
         sideOffset: 16,
-        collisionPadding: { right: 16 },
+        collisionPadding: { left: 16, right: 16 },
         onMouseEnter,
         onMouseLeave: () => {
           props.onOpenChange(false);
@@ -3011,7 +3011,7 @@ var LeftNavSheet = (props) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "oui-ml-auto", children: /* @__PURE__ */ jsx(SwapHorizIcon, {}) })
+      /* @__PURE__ */ jsx("div", { className: "oui-ms-auto", children: /* @__PURE__ */ jsx(SwapHorizIcon, {}) })
     ] });
   }, [state, t]);
   const openExternalLink = (url) => {
@@ -3330,10 +3330,10 @@ var ScanQRCodeContent = (props) => {
       /* @__PURE__ */ jsx(QRCodeScanner, { onSuccess: props.onScanSuccess }),
       /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(LineGradient, {}),
-        /* @__PURE__ */ jsx(RadiusGradient, { className: "oui-absolute oui-left-[-1.5px] oui-top-[-1.5px]" }),
-        /* @__PURE__ */ jsx(RadiusGradient, { className: "oui-absolute oui-right-[-1.5px] oui-top-[-1.5px] oui-rotate-90" }),
-        /* @__PURE__ */ jsx(RadiusGradient, { className: "oui-absolute oui-bottom-[-1.5px] oui-left-[-1.5px] -oui-rotate-90" }),
-        /* @__PURE__ */ jsx(RadiusGradient, { className: "oui-absolute oui-bottom-[-1.5px] oui-right-[-1.5px] -oui-rotate-180" })
+        /* @__PURE__ */ jsx(RadiusGradient, { className: "oui-absolute oui-start-[-1.5px] oui-top-[-1.5px]" }),
+        /* @__PURE__ */ jsx(RadiusGradient, { className: "oui-absolute oui-end-[-1.5px] oui-top-[-1.5px] oui-rotate-90" }),
+        /* @__PURE__ */ jsx(RadiusGradient, { className: "oui-absolute oui-bottom-[-1.5px] oui-start-[-1.5px] -oui-rotate-90" }),
+        /* @__PURE__ */ jsx(RadiusGradient, { className: "oui-absolute oui-bottom-[-1.5px] oui-end-[-1.5px] -oui-rotate-180" })
       ] })
     ] }),
     /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 98, weight: "semibold", children: t("linkDevice.scanQRCode") }),
@@ -3405,7 +3405,7 @@ var LineGradient = () => {
     "div",
     {
       className: 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)]",
@@ -4090,7 +4090,7 @@ var MainNavMobile = (props) => {
           /* @__PURE__ */ jsx(
             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
             }
           ),
@@ -4570,7 +4570,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 ?? "-"
           }
@@ -4618,7 +4618,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 ?? "-"
@@ -4720,7 +4720,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 ?? "-"
             }
           )
@@ -4744,7 +4744,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 ?? "-"
             }
           )
@@ -4826,7 +4826,7 @@ var DropdownMenu = (props) => {
     /* @__PURE__ */ 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__ */ jsxs(
           "svg",
@@ -5139,7 +5139,7 @@ var MessageCenter = (props) => {
                 className: "hover:oui-opacity-100"
               }
             ),
-            messageSize > 0 && showAnnouncement && /* @__PURE__ */ 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__ */ 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 })
           ] }) })
         }
       ),
@@ -5267,7 +5267,7 @@ var NavItem2 = (props) => {
                 children: item.label ?? item.name
               }
             ),
-            hasSubMenu && /* @__PURE__ */ jsx("span", { className: "oui-ml-1 group-data-[open=true]:oui-rotate-180", children: isActive ? /* @__PURE__ */ jsx(ActiveIcon, {}) : /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, color: "white" }) })
+            hasSubMenu && /* @__PURE__ */ jsx("span", { className: "oui-ms-1 group-data-[open=true]:oui-rotate-180", children: isActive ? /* @__PURE__ */ jsx(ActiveIcon, {}) : /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, color: "white" }) })
           ] }),
           /* @__PURE__ */ jsx(
             Box,
@@ -5457,7 +5457,7 @@ var Tag = (props) => {
   return /* @__PURE__ */ 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__ */ jsx(
         Text.gradient,
         {
@@ -5470,14 +5470,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__ */ jsx("span", { className: "oui-mr-1 oui-size-[20px]", children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("span", { className: "oui-me-1 oui-size-[20px]", children: /* @__PURE__ */ jsx(
       "img",
       {
         src: isActive ? props.item.activeIcon || props.item.icon : props.item.icon,
@@ -5515,7 +5515,7 @@ var CampaignButton = (props) => {
       item: props.item,
       onClick: props.onItemClick,
       classNames: {
-        navItem: cn("oui-text-base-contrast-54 -oui-ml-2", props.className)
+        navItem: cn("oui-text-base-contrast-54 -oui-ms-2", props.className)
       }
     }
   ) });
@@ -5689,7 +5689,7 @@ var MaintenanceTipsUI = (props) => {
     {
       className: 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]",
@@ -5711,7 +5711,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
           }
         )