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

package/dist/index.mjs

@@ -70,7 +70,7 @@ var AdditionalInfo = (props) => {
                         htmlFor: "toggle_order_post_only",
                         className: 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")
@@ -104,7 +104,7 @@ var AdditionalInfo = (props) => {
                         htmlFor: "toggle_order_iov",
                         className: 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")
@@ -138,7 +138,7 @@ var AdditionalInfo = (props) => {
                         htmlFor: "toggle_order_fok",
                         className: 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")
@@ -169,7 +169,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")
               }
             )
@@ -197,7 +197,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")
                   }
                 )
@@ -223,7 +223,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")
               }
             )
@@ -335,7 +335,7 @@ function AdvancedTPSLResult(props) {
                     /* @__PURE__ */ jsx(
                       Text.numeral,
                       {
-                        suffix: /* @__PURE__ */ jsx(Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
+                        suffix: /* @__PURE__ */ jsx(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 ?? ""
@@ -347,7 +347,7 @@ function AdvancedTPSLResult(props) {
                     formattedOrder.tp_order_type === OrderType.LIMIT ? /* @__PURE__ */ jsx(
                       Text.numeral,
                       {
-                        suffix: /* @__PURE__ */ jsx(Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
+                        suffix: /* @__PURE__ */ jsx(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 ?? ""
@@ -359,7 +359,7 @@ function AdvancedTPSLResult(props) {
                     /* @__PURE__ */ jsx(
                       Text.numeral,
                       {
-                        suffix: /* @__PURE__ */ jsx(Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
+                        suffix: /* @__PURE__ */ jsx(Text, { className: "oui-ms-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
                         coloring: true,
                         dp: 2,
                         children: Number(formattedOrder.tp_pnl)
@@ -412,7 +412,7 @@ function AdvancedTPSLResult(props) {
                   /* @__PURE__ */ jsx(
                     Text.numeral,
                     {
-                      suffix: /* @__PURE__ */ jsx(Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
+                      suffix: /* @__PURE__ */ jsx(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 ?? ""
@@ -424,7 +424,7 @@ function AdvancedTPSLResult(props) {
                   formattedOrder.sl_order_type === OrderType.LIMIT ? /* @__PURE__ */ jsx(
                     Text.numeral,
                     {
-                      suffix: /* @__PURE__ */ jsx(Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
+                      suffix: /* @__PURE__ */ jsx(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 ?? ""
@@ -437,7 +437,7 @@ function AdvancedTPSLResult(props) {
                     Text.numeral,
                     {
                       coloring: true,
-                      suffix: /* @__PURE__ */ jsx(Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
+                      suffix: /* @__PURE__ */ jsx(Text, { className: "oui-ms-1 oui-text-base-contrast-36", children: symbolInfo.quote }),
                       dp: 2,
                       children: Number(formattedOrder.sl_pnl)
                     }
@@ -639,7 +639,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
@@ -669,7 +669,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
@@ -975,7 +975,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
       }
     )
@@ -999,7 +999,7 @@ var OrderTypeTag = (props) => {
       default:
         return "";
     }
-  }, [props.type]);
+  }, [props.type, t]);
   return /* @__PURE__ */ jsx(Badge, { color: "neutral", size: "sm", children: typeStr });
 };
 var Dialog = (props) => {
@@ -1317,7 +1317,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
           }
         )
@@ -1332,7 +1332,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
           }
         )
@@ -1560,7 +1560,7 @@ var SlippageEditor = forwardRef((props, ref) => {
           item
         );
       }),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { dir: "ltr", children: /* @__PURE__ */ jsx(
         Input,
         {
           suffix: "%",
@@ -1577,10 +1577,10 @@ var SlippageEditor = forwardRef((props, ref) => {
               "oui-h-[40px] oui-w-[74px]"
             ),
             input: "oui-text-base-contrast",
-            additional: "oui-pl-1"
+            additional: "oui-ps-1"
           }
         }
-      )
+      ) })
     ] }),
     !!error && /* @__PURE__ */ jsx(Box, { mt: 5, className: "-oui-mb-5", children: /* @__PURE__ */ jsx(Text, { size: "2xs", color: "danger", children: error }) })
   ] });
@@ -1654,50 +1654,84 @@ var SlippageCell = (props) => {
         )
       }
     ),
-    /* @__PURE__ */ jsxs(Flex, { justify: "between", className: "oui-orderEntry-slippage", children: [
-      /* @__PURE__ */ jsx(Text, { className: "oui-slippage-label", size: "2xs", children: t("orderEntry.slippage") }),
-      /* @__PURE__ */ jsx(
-        AuthGuard,
-        {
-          fallback: () => /* @__PURE__ */ jsxs(Text, { size: "2xs", children: [
-            t("orderEntry.slippage.est"),
-            ": -% / ",
-            t("common.max"),
-            ": --%"
-          ] }),
-          children: /* @__PURE__ */ jsxs(Flex, { gap: 1, className: "oui-slippage-value-container", children: [
-            /* @__PURE__ */ jsx(
-              Text.numeral,
-              {
-                size: "2xs",
-                rule: "percentages",
-                prefix: `${t("orderEntry.slippage.est")}: `,
-                suffix: ` / ${t("common.max")}: `,
-                children: props.estSlippage ?? 0
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                className: "oui-slippage-edit-btn oui-text-2xs",
-                onClick: () => setOpen(),
-                children: /* @__PURE__ */ jsxs(Flex, { className: "oui-gap-0.5", as: "span", children: [
-                  /* @__PURE__ */ jsx(Text, { size: "2xs", className: "oui-text-primary", children: `${props.slippage || "-"}%` }),
-                  /* @__PURE__ */ jsx(
-                    EditIcon$1,
-                    {
-                      className: "oui-slippage-edit-icon oui-text-primary oui-hidden md:oui-block",
-                      size: 12,
-                      opacity: 1
-                    }
-                  )
-                ] })
-              }
-            )
-          ] })
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        justify: "between",
+        itemAlign: "center",
+        gap: 1,
+        className: "oui-orderEntry-slippage oui-w-full",
+        children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: "oui-slippage-label oui-shrink-0 oui-whitespace-nowrap",
+              size: "2xs",
+              children: t("orderEntry.slippage")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AuthGuard,
+            {
+              fallback: () => /* @__PURE__ */ jsxs(Text, { size: "2xs", className: "oui-whitespace-nowrap", children: [
+                t("orderEntry.slippage.est"),
+                ": -% / ",
+                t("common.max"),
+                ": --%"
+              ] }),
+              children: /* @__PURE__ */ jsxs(
+                Flex,
+                {
+                  gap: 1,
+                  itemAlign: "center",
+                  justify: "end",
+                  className: "oui-slippage-value-container oui-min-w-0 oui-flex-1 oui-whitespace-nowrap",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Text.numeral,
+                      {
+                        size: "2xs",
+                        rule: "percentages",
+                        prefix: `${t("orderEntry.slippage.est")}: `,
+                        suffix: ` / ${t("common.max")}: `,
+                        className: "oui-whitespace-nowrap",
+                        children: props.estSlippage ?? 0
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        className: "oui-slippage-edit-btn oui-shrink-0 oui-text-2xs",
+                        onClick: () => setOpen(),
+                        children: /* @__PURE__ */ jsxs(
+                          Flex,
+                          {
+                            itemAlign: "center",
+                            className: "oui-gap-0.5 oui-whitespace-nowrap",
+                            as: "span",
+                            children: [
+                              /* @__PURE__ */ jsx(Text, { size: "2xs", className: "oui-text-primary", children: `${props.slippage || "-"}%` }),
+                              /* @__PURE__ */ jsx(
+                                EditIcon$1,
+                                {
+                                  className: "oui-slippage-edit-icon oui-text-primary oui-hidden md:oui-block",
+                                  size: 12,
+                                  opacity: 1
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
   ] });
 };
 var SlippageUI = (props) => {
@@ -1756,7 +1790,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 ?? "--" : "--"
             }
           )
@@ -1993,7 +2027,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
@@ -2317,7 +2351,7 @@ var QuantitySlider = memo((props) => {
               {
                 className: 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",
@@ -2633,7 +2667,7 @@ var OptionCard = (props) => {
       className: 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"
       ),
@@ -2681,7 +2715,7 @@ var OptionCard = (props) => {
           "div",
           {
             className: 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"
             ),
@@ -2888,7 +2922,7 @@ var useMarginModeSettingsScript = (options2) => {
         setIsOperationLoading(false);
       }
     },
-    [brokerLockedKeys, selectedKeys, updateMarginMode]
+    [brokerLockedKeys, selectedKeys, t, updateMarginMode]
   );
   const isLoading = isDataLoading || isMarginModesLoading || isOperationLoading || isSettingMarginMode;
   return {
@@ -2994,8 +3028,8 @@ var MarginModeSettings = (props) => {
                     props.searchKeyword.trim() ? "oui-outline-primary-light" : ""
                   )
                 },
-                prefix: /* @__PURE__ */ jsx("div", { className: "oui-pl-3 oui-pr-1", "aria-hidden": "true", children: /* @__PURE__ */ jsx(SearchGlyph, { className: "oui-text-base-contrast-54" }) }),
-                suffix: props.searchKeyword ? /* @__PURE__ */ jsx("div", { className: "oui-pr-2", children: /* @__PURE__ */ jsx(
+                prefix: /* @__PURE__ */ jsx("div", { className: "oui-ps-3 oui-pe-1", "aria-hidden": "true", children: /* @__PURE__ */ jsx(SearchGlyph, { className: "oui-text-base-contrast-54" }) }),
+                suffix: props.searchKeyword ? /* @__PURE__ */ jsx("div", { className: "oui-pe-2", children: /* @__PURE__ */ jsx(
                   CloseCircleFillIcon,
                   {
                     size: 14,
@@ -3349,7 +3383,7 @@ var LeverageBadge = (props) => {
                 dp: 0,
                 rm: Decimal.ROUND_DOWN,
                 unit: "x",
-                unitClassName: "oui-ml-0",
+                unitClassName: "oui-ms-0",
                 children: curLeverage
               }
             )
@@ -3498,7 +3532,7 @@ var CustomInput = forwardRef(
           input: cn("oui-mb-1 oui-mt-5 oui-h-5", props?.classNames?.input),
           // prefix: cn(props.classNames?.prefix),
           suffix: 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
           )
         },
@@ -3514,7 +3548,7 @@ var InputLabel = (props) => {
     {
       htmlFor: props.id,
       className: 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
@@ -3542,7 +3576,7 @@ var BBOOrderTypeSelect = (props) => {
         value: BBOOrderType.QUEUE5
       }
     ],
-    []
+    [t]
   );
   return /* @__PURE__ */ jsx(
     Select.options,
@@ -3698,7 +3732,7 @@ var PriceInput = (props) => {
           {
             className: cn(
               "oui-orderEntry-bboSelect",
-              "oui-absolute oui-bottom-1 oui-left-0"
+              "oui-absolute oui-bottom-1 oui-start-0"
             ),
             children: /* @__PURE__ */ jsx(
               BBOOrderTypeSelect,
@@ -3735,7 +3769,7 @@ var QuantityInput = memo((props) => {
       formatters: [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"
       }
@@ -3770,7 +3804,7 @@ var TotalTypeSelect = memo((props) => {
         trigger: 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,
@@ -3828,7 +3862,7 @@ var TotalInput = memo((props) => {
         formatters: [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"
         }
@@ -3848,7 +3882,7 @@ var TotalInput = 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"
       },
@@ -3860,17 +3894,10 @@ var TotalInput = memo((props) => {
 });
 TotalInput.displayName = "TotalInput";
 var QtyAndTotalInput = memo((props) => {
-  return /* @__PURE__ */ jsxs(
-    Grid,
-    {
-      cols: 2,
-      className: "oui-orderEntry-qtyAndTotal oui-group oui-space-x-1",
-      children: [
-        /* @__PURE__ */ jsx(QuantityInput, { order_quantity: props.order_quantity }),
-        /* @__PURE__ */ jsx(TotalInput, { total: props.total })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(Grid, { cols: 2, className: "oui-orderEntry-qtyAndTotal oui-group oui-gap-1", children: [
+    /* @__PURE__ */ jsx(QuantityInput, { order_quantity: props.order_quantity }),
+    /* @__PURE__ */ jsx(TotalInput, { total: props.total })
+  ] });
 });
 QtyAndTotalInput.displayName = "QtyAndTotalInput";
 var QuantityDistributionInput = memo((props) => {
@@ -3961,7 +3988,7 @@ var QuantityDistributionHint = (props) => {
         quantity: /* @__PURE__ */ jsx(DescendingQuantity, {})
       }
     ];
-  }, []);
+  }, [t]);
   const currentContent = useMemo(() => {
     return content.find((item) => item.type === type);
   }, [content, type]);
@@ -3977,7 +4004,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);
           },
@@ -3995,10 +4022,10 @@ var QuantityDistributionHint = (props) => {
           intensity: 500,
           width: "100%",
           className: cn(
-            "oui-rounded-r",
-            type === DistributionType.FLAT && "oui-rounded-bl",
-            type === DistributionType.ASCENDING && "oui-rounded-l",
-            type === DistributionType.DESCENDING && "oui-rounded-tl"
+            "oui-rounded-e",
+            type === DistributionType.FLAT && "oui-rounded-es",
+            type === DistributionType.ASCENDING && "oui-rounded-s",
+            type === DistributionType.DESCENDING && "oui-rounded-ss"
           ),
           children: [
             /* @__PURE__ */ jsx("div", { children: currentContent?.formula }),
@@ -4060,7 +4087,7 @@ var QuantityDistribution = (props) => {
               className: cn(
                 "oui-quantityDistribution-option-label",
                 "oui-text-2xs",
-                "oui-ml-1",
+                "oui-ms-1",
                 "oui-whitespace-nowrap oui-break-normal"
               ),
               children: distributionTypeMap[type]
@@ -4394,7 +4421,7 @@ var ScaledQuantityUnit = (props) => {
       classNames: {
         trigger: 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"
         )
@@ -4440,7 +4467,7 @@ var ScaledQuantityInput = 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",
@@ -4462,7 +4489,7 @@ var ScaledQuantityInput = 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) => {
@@ -4509,7 +4536,7 @@ var TotalOrdersInput = 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) => {
@@ -4540,7 +4567,7 @@ var ScaledOrderInput = (props) => {
       Grid,
       {
         cols: 2,
-        className: "oui-scaledOrderInput-qtyAndOrders oui-group oui-space-x-1",
+        className: "oui-scaledOrderInput-qtyAndOrders oui-group oui-gap-1",
         children: [
           /* @__PURE__ */ jsx(
             ScaledQuantityInput,
@@ -4678,7 +4705,7 @@ var TrailingCallbackSelect = memo(
         classNames: {
           trigger: 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"
           )
@@ -4781,7 +4808,7 @@ var TrailingCallbackInput = memo(
           /* @__PURE__ */ 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
             }
           )
@@ -5155,7 +5182,7 @@ var PNLInput = (props) => {
         onBlur();
       },
       suffix: /* @__PURE__ */ jsxs(Fragment, { children: [
-        isPercentageMode && !!value && /* @__PURE__ */ jsx(Text, { size: "2xs", color: "inherit", className: "oui-ml-[2px]", children: "%" }),
+        isPercentageMode && !!value && /* @__PURE__ */ jsx(Text, { size: "2xs", color: "inherit", className: "oui-ms-[2px]", children: "%" }),
         /* @__PURE__ */ jsx(
           PNLMenus,
           {
@@ -5214,7 +5241,7 @@ var PnlInputProvider = (props) => {
         {
           rule: "percentages",
           className: 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
@@ -5224,14 +5251,14 @@ var PnlInputProvider = (props) => {
         {
           rule: "price",
           className: 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 = useMemo(() => {
     return { mode, setMode, tipsEle };
   }, [mode, setMode, tipsEle]);
@@ -5444,7 +5471,6 @@ var TPSLTriggerPriceInput = (props) => {
   const { t } = useTranslation();
   const { errorMsgVisible } = useOrderEntryContext();
   const { tipsEle } = usePnlInputContext();
-  const [prefix, setPrefix] = useState(`${props.type} Price`);
   const [placeholder, setPlaceholder] = useState("USDC");
   const [tipVisible, setTipVisible] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
@@ -5469,31 +5495,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);
   };
-  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);
@@ -5522,10 +5534,10 @@ var TPSLTriggerPriceInput = (props) => {
         additional: "oui-text-base-contrast-54",
         root: cn(
           "oui-orderEntry-tpsl-triggerPrice",
-          "oui-pr-2 md:oui-pr-3",
+          "oui-pe-2 md:oui-pe-3",
           props.classNames?.root
         ),
-        prefix: cn("oui-pr-1 md:oui-pr-2", props.classNames?.prefix),
+        prefix: cn("oui-pe-1 md:oui-pe-2", props.classNames?.prefix),
         input: cn(
           "oui-text-2xs placeholder:oui-text-2xs",
           props.classNames?.input
@@ -6090,7 +6102,7 @@ var OrderEntry = (props) => {
                         },
                         className: 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"
                       }
@@ -6115,7 +6127,7 @@ var OrderEntry = (props) => {
               content: 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 },