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

package/dist/index.js

@@ -76,7 +76,7 @@ var AdditionalInfo = (props) => {
                         htmlFor: "toggle_order_post_only",
                         className: ui.cn(
                           "oui-postOnly-label",
-                          "oui-ml-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
+                          "oui-ms-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
                           "oui-cursor-pointer oui-whitespace-nowrap oui-break-normal oui-border-b oui-border-dashed oui-border-line-12"
                         ),
                         children: t("orderEntry.orderType.postOnly")
@@ -110,7 +110,7 @@ var AdditionalInfo = (props) => {
                         htmlFor: "toggle_order_iov",
                         className: ui.cn(
                           "oui-ioc-label",
-                          "oui-ml-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
+                          "oui-ms-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
                           "oui-cursor-pointer oui-whitespace-nowrap oui-break-normal oui-border-b oui-border-dashed oui-border-line-12"
                         ),
                         children: t("orderEntry.orderType.ioc")
@@ -144,7 +144,7 @@ var AdditionalInfo = (props) => {
                         htmlFor: "toggle_order_fok",
                         className: ui.cn(
                           "oui-fok-label",
-                          "oui-ml-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
+                          "oui-ms-1 oui-text-2xs peer-data-[disabled]:oui-text-base-contrast-20",
                           "oui-cursor-pointer oui-whitespace-nowrap oui-break-normal oui-border-b oui-border-dashed oui-border-line-12"
                         ),
                         children: t("orderEntry.orderType.fok")
@@ -175,7 +175,7 @@ var AdditionalInfo = (props) => {
               "label",
               {
                 htmlFor: "toggle_order_confirm",
-                className: "oui-orderConfirm-label oui-ml-1 oui-text-2xs",
+                className: "oui-orderConfirm-label oui-ms-1 oui-text-2xs",
                 children: t("orderEntry.orderConfirm")
               }
             )
@@ -203,7 +203,7 @@ var AdditionalInfo = (props) => {
                   "label",
                   {
                     htmlFor: "toggle_order_hidden",
-                    className: "oui-orderHidden-label oui-ml-1 oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12 oui-text-2xs",
+                    className: "oui-orderHidden-label oui-ms-1 oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12 oui-text-2xs",
                     children: t("orderEntry.hidden")
                   }
                 )
@@ -229,7 +229,7 @@ var AdditionalInfo = (props) => {
               "label",
               {
                 htmlFor: "toggle_order_keep_visible",
-                className: "oui-keepVisible-label oui-ml-1 oui-text-2xs",
+                className: "oui-keepVisible-label oui-ms-1 oui-text-2xs",
                 children: t("orderEntry.keepVisible")
               }
             )
@@ -341,7 +341,7 @@ function AdvancedTPSLResult(props) {
                     /* @__PURE__ */ jsxRuntime.jsx(
                       ui.Text.numeral,
                       {
-                        suffix: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
+                        suffix: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-ms-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
                         className: "oui-text-base-contrast",
                         dp: symbolInfo.quote_dp,
                         children: formattedOrder.tp_trigger_price ?? ""
@@ -353,7 +353,7 @@ function AdvancedTPSLResult(props) {
                     formattedOrder.tp_order_type === types.OrderType.LIMIT ? /* @__PURE__ */ jsxRuntime.jsx(
                       ui.Text.numeral,
                       {
-                        suffix: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
+                        suffix: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-ms-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
                         className: "oui-text-base-contrast",
                         dp: symbolInfo.quote_dp,
                         children: formattedOrder.tp_order_price ?? ""
@@ -365,7 +365,7 @@ function AdvancedTPSLResult(props) {
                     /* @__PURE__ */ jsxRuntime.jsx(
                       ui.Text.numeral,
                       {
-                        suffix: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
+                        suffix: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-ms-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
                         coloring: true,
                         dp: 2,
                         children: Number(formattedOrder.tp_pnl)
@@ -418,7 +418,7 @@ function AdvancedTPSLResult(props) {
                   /* @__PURE__ */ jsxRuntime.jsx(
                     ui.Text.numeral,
                     {
-                      suffix: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
+                      suffix: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-ms-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
                       className: "oui-text-base-contrast",
                       dp: symbolInfo.quote_dp,
                       children: formattedOrder.sl_trigger_price ?? ""
@@ -430,7 +430,7 @@ function AdvancedTPSLResult(props) {
                   formattedOrder.sl_order_type === types.OrderType.LIMIT ? /* @__PURE__ */ jsxRuntime.jsx(
                     ui.Text.numeral,
                     {
-                      suffix: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
+                      suffix: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-ms-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
                       className: "oui-text-base-contrast",
                       dp: symbolInfo.quote_dp,
                       children: formattedOrder.sl_order_price ?? ""
@@ -443,7 +443,7 @@ function AdvancedTPSLResult(props) {
                     ui.Text.numeral,
                     {
                       coloring: true,
-                      suffix: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
+                      suffix: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-ms-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
                       dp: 2,
                       children: Number(formattedOrder.sl_pnl)
                     }
@@ -645,7 +645,7 @@ var OrderConfirmDialog = (props) => {
         unit: quote,
         rule: "price",
         className: "oui-text-base-contrast",
-        unitClassName: "oui-text-base-contrast-36 oui-ml-1",
+        unitClassName: "oui-text-base-contrast-36 oui-ms-1",
         dp: quote_dp,
         padding: false,
         children: order.order_price
@@ -675,7 +675,7 @@ var OrderConfirmDialog = (props) => {
           "oui-text-base-contrast",
           colorType === "TP" ? "oui-text-trade-profit" : "oui-text-trade-loss"
         ),
-        unitClassName: "oui-text-base-contrast-36 oui-ml-1",
+        unitClassName: "oui-text-base-contrast-36 oui-ms-1",
         dp: quote_dp,
         padding: false,
         children: price
@@ -981,7 +981,7 @@ var OrderItem = (props) => {
         dp,
         padding: false,
         className: "oui-text-base-contrast",
-        unitClassName: "oui-text-base-contrast-36 oui-ml-1",
+        unitClassName: "oui-text-base-contrast-36 oui-ms-1",
         children: value
       }
     )
@@ -1005,7 +1005,7 @@ var OrderTypeTag = (props) => {
       default:
         return "";
     }
-  }, [props.type]);
+  }, [props.type, t]);
   return /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "neutral", size: "sm", children: typeStr });
 };
 var Dialog = (props) => {
@@ -1323,7 +1323,7 @@ var ScaledOrderConfirm = (props) => {
             dp: base_dp,
             padding: false,
             intensity: 80,
-            unitClassName: "oui-text-base-contrast-36 oui-ml-1",
+            unitClassName: "oui-text-base-contrast-36 oui-ms-1",
             children: totalQuantity
           }
         )
@@ -1338,7 +1338,7 @@ var ScaledOrderConfirm = (props) => {
             dp: quote_dp,
             padding: false,
             intensity: 80,
-            unitClassName: "oui-text-base-contrast-36 oui-ml-1",
+            unitClassName: "oui-text-base-contrast-36 oui-ms-1",
             children: national
           }
         )
@@ -1566,7 +1566,7 @@ var SlippageEditor = React3.forwardRef((props, ref) => {
           item
         );
       }),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { dir: "ltr", children: /* @__PURE__ */ jsxRuntime.jsx(
         ui.Input,
         {
           suffix: "%",
@@ -1583,10 +1583,10 @@ var SlippageEditor = React3.forwardRef((props, ref) => {
               "oui-h-[40px] oui-w-[74px]"
             ),
             input: "oui-text-base-contrast",
-            additional: "oui-pl-1"
+            additional: "oui-ps-1"
           }
         }
-      )
+      ) })
     ] }),
     !!error && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { mt: 5, className: "-oui-mb-5", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", color: "danger", children: error }) })
   ] });
@@ -1660,50 +1660,84 @@ var SlippageCell = (props) => {
         )
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-orderEntry-slippage", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-slippage-label", size: "2xs", children: t("orderEntry.slippage") }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        uiConnector.AuthGuard,
-        {
-          fallback: () => /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "2xs", children: [
-            t("orderEntry.slippage.est"),
-            ": -% / ",
-            t("common.max"),
-            ": --%"
-          ] }),
-          children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, className: "oui-slippage-value-container", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Text.numeral,
-              {
-                size: "2xs",
-                rule: "percentages",
-                prefix: `${t("orderEntry.slippage.est")}: `,
-                suffix: ` / ${t("common.max")}: `,
-                children: props.estSlippage ?? 0
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                className: "oui-slippage-edit-btn oui-text-2xs",
-                onClick: () => setOpen(),
-                children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-gap-0.5", as: "span", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", className: "oui-text-primary", children: `${props.slippage || "-"}%` }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    ui.EditIcon,
-                    {
-                      className: "oui-slippage-edit-icon oui-text-primary oui-hidden md:oui-block",
-                      size: 12,
-                      opacity: 1
-                    }
-                  )
-                ] })
-              }
-            )
-          ] })
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Flex,
+      {
+        justify: "between",
+        itemAlign: "center",
+        gap: 1,
+        className: "oui-orderEntry-slippage oui-w-full",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Text,
+            {
+              className: "oui-slippage-label oui-shrink-0 oui-whitespace-nowrap",
+              size: "2xs",
+              children: t("orderEntry.slippage")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            uiConnector.AuthGuard,
+            {
+              fallback: () => /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "2xs", className: "oui-whitespace-nowrap", children: [
+                t("orderEntry.slippage.est"),
+                ": -% / ",
+                t("common.max"),
+                ": --%"
+              ] }),
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                ui.Flex,
+                {
+                  gap: 1,
+                  itemAlign: "center",
+                  justify: "end",
+                  className: "oui-slippage-value-container oui-min-w-0 oui-flex-1 oui-whitespace-nowrap",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.Text.numeral,
+                      {
+                        size: "2xs",
+                        rule: "percentages",
+                        prefix: `${t("orderEntry.slippage.est")}: `,
+                        suffix: ` / ${t("common.max")}: `,
+                        className: "oui-whitespace-nowrap",
+                        children: props.estSlippage ?? 0
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        className: "oui-slippage-edit-btn oui-shrink-0 oui-text-2xs",
+                        onClick: () => setOpen(),
+                        children: /* @__PURE__ */ jsxRuntime.jsxs(
+                          ui.Flex,
+                          {
+                            itemAlign: "center",
+                            className: "oui-gap-0.5 oui-whitespace-nowrap",
+                            as: "span",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", className: "oui-text-primary", children: `${props.slippage || "-"}%` }),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                ui.EditIcon,
+                                {
+                                  className: "oui-slippage-edit-icon oui-text-primary oui-hidden md:oui-block",
+                                  size: 12,
+                                  opacity: 1
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
   ] });
 };
 var SlippageUI = (props) => {
@@ -1762,7 +1796,7 @@ function AssetInfo(props) {
               size: "2xs",
               dp: props.dp,
               className: "oui-estLiqPrice-value oui-text-base-contrast-80",
-              unitClassName: "oui-ml-1 oui-text-base-contrast-36",
+              unitClassName: "oui-ms-1 oui-text-base-contrast-36",
               children: canTrade ? displayEstLiqPrice ?? "--" : "--"
             }
           )
@@ -1999,7 +2033,7 @@ var Available = (props) => {
               unit: quote,
               size: "2xs",
               className: "oui-available-value oui-text-base-contrast-80",
-              unitClassName: "oui-ml-1 oui-text-base-contrast-54",
+              unitClassName: "oui-ms-1 oui-text-base-contrast-54",
               dp: 2,
               padding: false,
               children: canTrade ? freeCollateral : 0
@@ -2323,7 +2357,7 @@ var QuantitySlider = React3.memo((props) => {
               {
                 className: ui.textVariants({
                   size: "2xs",
-                  className: "oui-quantitySlider-maxQty-btn oui-mr-1"
+                  className: "oui-quantitySlider-maxQty-btn oui-me-1"
                 }),
                 onClick: onMax,
                 "data-testid": "oui-testid-orderEntry-maxQty-value-button",
@@ -2639,7 +2673,7 @@ var OptionCard = (props) => {
       className: ui.cn(
         "oui-relative oui-w-full oui-rounded-md oui-p-2",
         "oui-bg-base-6",
-        "oui-text-left",
+        "oui-text-start",
         props.disabled ? "oui-cursor-not-allowed oui-opacity-50 oui-border oui-border-transparent" : props.selected ? "oui-border oui-border-[#38e2fe]" : "oui-border oui-border-transparent hover:oui-border-line-12",
         !props.disabled && "oui-cursor-pointer"
       ),
@@ -2687,7 +2721,7 @@ var OptionCard = (props) => {
           "div",
           {
             className: ui.cn(
-              "oui-absolute -oui-right-px -oui-top-px",
+              "oui-absolute -oui-end-px -oui-top-px",
               "oui-rounded-bl-md oui-rounded-tr-md",
               "oui-bg-[#38e2fe] oui-px-1 oui-py-0.5"
             ),
@@ -2894,7 +2928,7 @@ var useMarginModeSettingsScript = (options2) => {
         setIsOperationLoading(false);
       }
     },
-    [brokerLockedKeys, selectedKeys, updateMarginMode]
+    [brokerLockedKeys, selectedKeys, t, updateMarginMode]
   );
   const isLoading = isDataLoading || isMarginModesLoading || isOperationLoading || isSettingMarginMode;
   return {
@@ -3000,8 +3034,8 @@ var MarginModeSettings = (props) => {
                     props.searchKeyword.trim() ? "oui-outline-primary-light" : ""
                   )
                 },
-                prefix: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-pl-3 oui-pr-1", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(SearchGlyph, { className: "oui-text-base-contrast-54" }) }),
-                suffix: props.searchKeyword ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-pr-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+                prefix: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-ps-3 oui-pe-1", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(SearchGlyph, { className: "oui-text-base-contrast-54" }) }),
+                suffix: props.searchKeyword ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-pe-2", children: /* @__PURE__ */ jsxRuntime.jsx(
                   ui.CloseCircleFillIcon,
                   {
                     size: 14,
@@ -3355,7 +3389,7 @@ var LeverageBadge = (props) => {
                 dp: 0,
                 rm: utils.Decimal.ROUND_DOWN,
                 unit: "x",
-                unitClassName: "oui-ml-0",
+                unitClassName: "oui-ms-0",
                 children: curLeverage
               }
             )
@@ -3504,7 +3538,7 @@ var CustomInput = React3.forwardRef(
           input: ui.cn("oui-mb-1 oui-mt-5 oui-h-5", props?.classNames?.input),
           // prefix: cn(props.classNames?.prefix),
           suffix: ui.cn(
-            "oui-absolute oui-right-0 oui-top-0 oui-justify-start oui-py-2 oui-text-2xs oui-text-base-contrast-36",
+            "oui-absolute oui-end-0 oui-top-0 oui-justify-start oui-py-2 oui-text-2xs oui-text-base-contrast-36",
             props.classNames?.suffix
           )
         },
@@ -3520,7 +3554,7 @@ var InputLabel = (props) => {
     {
       htmlFor: props.id,
       className: ui.cn(
-        "oui-input-label oui-absolute oui-left-2 oui-top-[7px] oui-text-2xs oui-text-base-contrast-36",
+        "oui-input-label oui-absolute oui-start-2 oui-top-[7px] oui-text-2xs oui-text-base-contrast-36",
         props.className
       ),
       children: props.children
@@ -3548,7 +3582,7 @@ var BBOOrderTypeSelect = (props) => {
         value: types.BBOOrderType.QUEUE5
       }
     ],
-    []
+    [t]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.Select.options,
@@ -3704,7 +3738,7 @@ var PriceInput = (props) => {
           {
             className: ui.cn(
               "oui-orderEntry-bboSelect",
-              "oui-absolute oui-bottom-1 oui-left-0"
+              "oui-absolute oui-bottom-1 oui-start-0"
             ),
             children: /* @__PURE__ */ jsxRuntime.jsx(
               BBOOrderTypeSelect,
@@ -3741,7 +3775,7 @@ var QuantityInput = React3.memo((props) => {
       formatters: [ui.inputFormatter.dpFormatter(base_dp)],
       onFocus: onFocus(3 /* QUANTITY */),
       onBlur: onBlur(3 /* QUANTITY */),
-      className: "oui-orderEntry-quantityInput !oui-rounded-r",
+      className: "oui-orderEntry-quantityInput !oui-rounded-e",
       classNames: {
         suffix: "oui-justify-end"
       }
@@ -3776,7 +3810,7 @@ var TotalTypeSelect = React3.memo((props) => {
         trigger: ui.cn(
           "oui-orderEntry-totalTypeSelect-btn",
           "oui-w-auto oui-border-none oui-bg-transparent oui-shadow-none",
-          "oui-absolute oui-left-0 oui-top-[5px] oui-text-2xs oui-text-base-contrast-36"
+          "oui-absolute oui-start-0 oui-top-[5px] oui-text-2xs oui-text-base-contrast-36"
         )
       },
       onValueChange: props.onChange,
@@ -3834,7 +3868,7 @@ var TotalInput = React3.memo((props) => {
         formatters: [ui.inputFormatter.dpFormatter(2)],
         onFocus: onFocus(6 /* MARGIN */),
         onBlur: onBlur(6 /* MARGIN */),
-        className: "oui-orderEntry-marginInput !oui-rounded-l",
+        className: "oui-orderEntry-marginInput !oui-rounded-s",
         classNames: {
           suffix: "oui-justify-end"
         }
@@ -3854,7 +3888,7 @@ var TotalInput = React3.memo((props) => {
       onChange: (val) => {
         setOrderValue("total", val);
       },
-      className: "oui-orderEntry-totalInput !oui-rounded-l",
+      className: "oui-orderEntry-totalInput !oui-rounded-s",
       classNames: {
         suffix: "oui-justify-end"
       },
@@ -3866,17 +3900,10 @@ var TotalInput = React3.memo((props) => {
 });
 TotalInput.displayName = "TotalInput";
 var QtyAndTotalInput = React3.memo((props) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.Grid,
-    {
-      cols: 2,
-      className: "oui-orderEntry-qtyAndTotal oui-group oui-space-x-1",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(QuantityInput, { order_quantity: props.order_quantity }),
-        /* @__PURE__ */ jsxRuntime.jsx(TotalInput, { total: props.total })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { cols: 2, className: "oui-orderEntry-qtyAndTotal oui-group oui-gap-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(QuantityInput, { order_quantity: props.order_quantity }),
+    /* @__PURE__ */ jsxRuntime.jsx(TotalInput, { total: props.total })
+  ] });
 });
 QtyAndTotalInput.displayName = "QtyAndTotalInput";
 var QuantityDistributionInput = React3.memo((props) => {
@@ -3967,7 +3994,7 @@ var QuantityDistributionHint = (props) => {
         quantity: /* @__PURE__ */ jsxRuntime.jsx(DescendingQuantity, {})
       }
     ];
-  }, []);
+  }, [t]);
   const currentContent = React3.useMemo(() => {
     return content.find((item) => item.type === type);
   }, [content, type]);
@@ -3983,7 +4010,7 @@ var QuantityDistributionHint = (props) => {
           intensity: type === item.type ? 500 : 600,
           width: 78,
           p: 2,
-          className: "oui-cursor-pointer oui-rounded-l",
+          className: "oui-cursor-pointer oui-rounded-s",
           onClick: () => {
             setType(item.type);
           },
@@ -4001,10 +4028,10 @@ var QuantityDistributionHint = (props) => {
           intensity: 500,
           width: "100%",
           className: ui.cn(
-            "oui-rounded-r",
-            type === types.DistributionType.FLAT && "oui-rounded-bl",
-            type === types.DistributionType.ASCENDING && "oui-rounded-l",
-            type === types.DistributionType.DESCENDING && "oui-rounded-tl"
+            "oui-rounded-e",
+            type === types.DistributionType.FLAT && "oui-rounded-es",
+            type === types.DistributionType.ASCENDING && "oui-rounded-s",
+            type === types.DistributionType.DESCENDING && "oui-rounded-ss"
           ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { children: currentContent?.formula }),
@@ -4066,7 +4093,7 @@ var QuantityDistribution = (props) => {
               className: ui.cn(
                 "oui-quantityDistribution-option-label",
                 "oui-text-2xs",
-                "oui-ml-1",
+                "oui-ms-1",
                 "oui-whitespace-nowrap oui-break-normal"
               ),
               children: distributionTypeMap[type]
@@ -4400,7 +4427,7 @@ var ScaledQuantityUnit = (props) => {
       classNames: {
         trigger: ui.cn(
           "oui-orderEntry-scaledQuantityUnit-btn",
-          "oui-absolute oui-right-0 oui-top-1",
+          "oui-absolute oui-end-0 oui-top-1",
           "oui-w-full oui-justify-end",
           "oui-shadow-none"
         )
@@ -4446,7 +4473,7 @@ var ScaledQuantityInput = React3.memo((props) => {
         suffix,
         id: "order_quantity_input",
         name: "order_quantity_input",
-        className: "oui-orderEntry-scaledOrder-quantityInput !oui-rounded-r",
+        className: "oui-orderEntry-scaledOrder-quantityInput !oui-rounded-e",
         value: props.order_quantity,
         error: getErrorMsg(
           "order_quantity",
@@ -4468,7 +4495,7 @@ var ScaledQuantityInput = React3.memo((props) => {
       suffix,
       id: "order_total_input",
       name: "order_total_input",
-      className: "oui-orderEntry-scaledOrder-totalInput !oui-rounded-r",
+      className: "oui-orderEntry-scaledOrder-totalInput !oui-rounded-e",
       value: props.total,
       error: getErrorMsg("order_quantity", `${errors?.total?.value} ${quote}`),
       onChange: (val) => {
@@ -4515,7 +4542,7 @@ var TotalOrdersInput = React3.memo((props) => {
       label: t("orderEntry.totalOrders"),
       placeholder: "2-20",
       id: "order_total_orders_input",
-      className: "oui-orderEntry-scaledOrder-totalOrdersInput !oui-rounded-l",
+      className: "oui-orderEntry-scaledOrder-totalOrdersInput !oui-rounded-s",
       value: props.total_orders,
       error: getErrorMsg("total_orders"),
       onChange: (val) => {
@@ -4546,7 +4573,7 @@ var ScaledOrderInput = (props) => {
       ui.Grid,
       {
         cols: 2,
-        className: "oui-scaledOrderInput-qtyAndOrders oui-group oui-space-x-1",
+        className: "oui-scaledOrderInput-qtyAndOrders oui-group oui-gap-1",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             ScaledQuantityInput,
@@ -4684,7 +4711,7 @@ var TrailingCallbackSelect = React3.memo(
         classNames: {
           trigger: ui.cn(
             "oui-orderEntry-trailingCallbackSelect-btn",
-            "oui-absolute oui-right-0 oui-top-1",
+            "oui-absolute oui-end-0 oui-top-1",
             "oui-w-[124px] oui-justify-end",
             "oui-text-base-contrast-36"
           )
@@ -4787,7 +4814,7 @@ var TrailingCallbackInput = React3.memo(
           /* @__PURE__ */ jsxRuntime.jsx(
             CallbackRatePercentages,
             {
-              className: "oui-trailingCallback-percentages oui-absolute oui-bottom-1 oui-left-2",
+              className: "oui-trailingCallback-percentages oui-absolute oui-bottom-1 oui-start-2",
               callback_rate
             }
           )
@@ -5161,7 +5188,7 @@ var PNLInput = (props) => {
         onBlur();
       },
       suffix: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        isPercentageMode && !!value && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", color: "inherit", className: "oui-ml-[2px]", children: "%" }),
+        isPercentageMode && !!value && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", color: "inherit", className: "oui-ms-[2px]", children: "%" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           PNLMenus,
           {
@@ -5220,7 +5247,7 @@ var PnlInputProvider = (props) => {
         {
           rule: "percentages",
           className: ui.cn(
-            "oui-ml-1 oui-text-xs",
+            "oui-ms-1 oui-text-xs",
             type === "TP" ? "oui-text-trade-profit" : "oui-text-trade-loss"
           ),
           children: values.ROI
@@ -5230,14 +5257,14 @@ var PnlInputProvider = (props) => {
         {
           rule: "price",
           className: ui.cn(
-            "oui-ml-1 oui-text-xs",
+            "oui-ms-1 oui-text-xs",
             type === "TP" ? "oui-text-trade-profit" : "oui-text-trade-loss"
           ),
           children: values.PnL
         }
       )
     ] });
-  }, [mode, values.ROI, values.PnL, values.trigger_price]);
+  }, [mode, t, type, values.ROI, values.PnL, values.trigger_price]);
   const memoizedValue = React3.useMemo(() => {
     return { mode, setMode, tipsEle };
   }, [mode, setMode, tipsEle]);
@@ -5450,7 +5477,6 @@ var TPSLTriggerPriceInput = (props) => {
   const { t } = i18n.useTranslation();
   const { errorMsgVisible } = useOrderEntryContext();
   const { tipsEle } = usePnlInputContext();
-  const [prefix, setPrefix] = React3.useState(`${props.type} Price`);
   const [placeholder, setPlaceholder] = React3.useState("USDC");
   const [tipVisible, setTipVisible] = React3.useState(false);
   const [isFocused, setIsFocused] = React3.useState(false);
@@ -5475,31 +5501,17 @@ var TPSLTriggerPriceInput = (props) => {
     tipsEle,
     props.displayErrorMessage
   ]);
-  const getPrefixLabel = (trigger_price) => {
-    let _prefix = props.type === "TP" ? t("tpsl.tpPrice") : t("tpsl.slPrice");
-    if (trigger_price) {
-      _prefix = props.type === "TP" ? t("tpsl.tp") : t("tpsl.sl");
-    }
-    return _prefix;
-  };
+  const prefix = isFocused || innerValue ? props.type === "TP" ? t("tpsl.tp") : t("tpsl.sl") : props.type === "TP" ? t("tpsl.tpPrice") : t("tpsl.slPrice");
   const onValueChange = (value) => {
     setInnerValue(value);
     props.onChange(value);
   };
-  React3.useEffect(() => {
-    setPrefix(getPrefixLabel(props.values.trigger_price));
-    if (!isFocused) {
-      setInnerValue(props.values.trigger_price ?? "");
-    }
-  }, [props.type, props.values.trigger_price]);
   const onFocus = () => {
-    setPrefix(props.type === "TP" ? t("tpsl.tp") : t("tpsl.sl"));
     setPlaceholder("");
     setTipVisible(true);
     setIsFocused(true);
   };
   const onBlur = () => {
-    setPrefix(getPrefixLabel(props.values.trigger_price));
     setPlaceholder("USDC");
     setTipVisible(false);
     setIsFocused(false);
@@ -5528,10 +5540,10 @@ var TPSLTriggerPriceInput = (props) => {
         additional: "oui-text-base-contrast-54",
         root: ui.cn(
           "oui-orderEntry-tpsl-triggerPrice",
-          "oui-pr-2 md:oui-pr-3",
+          "oui-pe-2 md:oui-pe-3",
           props.classNames?.root
         ),
-        prefix: ui.cn("oui-pr-1 md:oui-pr-2", props.classNames?.prefix),
+        prefix: ui.cn("oui-pe-1 md:oui-pe-2", props.classNames?.prefix),
         input: ui.cn(
           "oui-text-2xs placeholder:oui-text-2xs",
           props.classNames?.input
@@ -6096,7 +6108,7 @@ var OrderEntry = (props) => {
                         },
                         className: ui.cn(
                           "oui-additional-pin-btn",
-                          "oui-group oui-absolute oui-right-2 oui-top-2"
+                          "oui-group oui-absolute oui-end-2 oui-top-2"
                         ),
                         "data-testid": "oui-testid-orderEntry-pinned-button"
                       }
@@ -6121,7 +6133,7 @@ var OrderEntry = (props) => {
               content: ui.cn(
                 "oui-tpslAdvanced-sheet",
                 "oui-rounded-[16px] oui-border-none !oui-p-0",
-                isMobile ? "oui-inset-y-0 oui-right-0 oui-w-[280px]" : "!oui-bottom-[40px] oui-right-3 oui-top-[44px] !oui-h-auto oui-w-[360px]"
+                isMobile ? "oui-inset-y-0 oui-end-0 oui-w-[280px]" : "!oui-bottom-[40px] oui-end-3 oui-top-[44px] !oui-h-auto oui-w-[360px]"
               )
             },
             contentProps: { side: "right", closeable: false },