web component feild fix icon

packages/components/field-container/styled-field-container.js

@@ -29,6 +29,13 @@ function getHorizontalCss(labelWidth) {
         props.theme.fieldContainer.horizontal.iconButton.marginTop};
       margin-left: ${(props) =>
         props.theme.fieldContainer.horizontal.iconButton.marginLeft};
+      ${(props) =>
+        props.theme.interfaceDirection === "rtl" &&
+        css`
+          margin-left: 0;
+          margin-right: ${(props) =>
+            props.theme.fieldContainer.horizontal.iconButton.marginLeft};
+        `}
     }
   `;
 }
@@ -61,9 +68,9 @@ function getVerticalCss() {
         props.theme.fieldContainer.vertical.iconButton.margin};
       padding: ${(props) =>
         props.theme.fieldContainer.vertical.iconButton.padding};
-      width: ${(props) => props.theme.fieldContainer.vertical.iconButton.width};
-      height: ${(props) =>
-        props.theme.fieldContainer.vertical.iconButton.height};
+      display: flex;
+      align-items: center;
+      height: 100%;
     }
   `;
 }

packages/components/selector/sub-components/SelectAll/index.js

@@ -11,7 +11,6 @@ const StyledSelectAll = styled.div`
   max-height: 61px;
   height: 61px;
   min-height: 61px;
-  direction: rtl !important;
   display: flex;
   align-items: center;
 

packages/components/toast/styled-toast.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { ToastContainer } from "react-toastify";
 import { tablet } from "../utils/device";
 import Base from "../themes/base";
@@ -13,6 +13,12 @@ const StyledToastContainer = styled(ToastContainer)`
   color: ${(props) => props.theme.toast.color};
   top: ${(props) => parseInt(props.theme.toast.top) + props.$topOffset + "px"};
   right: ${(props) => props.theme.toast.right};
+  ${(props) =>
+    props.theme.interfaceDirection === "rtl" &&
+    css`
+      left: ${(props) => props.theme.toast.right};
+      right: auto;
+    `}
   margin-top: ${(props) => props.theme.toast.marginTop};
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
@@ -48,6 +54,11 @@ const StyledToastContainer = styled(ToastContainer)`
   @keyframes SlideIn {
     from {
       transform: translate3d(150%, 0, 0);
+      ${(props) =>
+        props.theme.interfaceDirection === "rtl" &&
+        css`
+          transform: translate3d(-150%, 0, 0);
+        `}
     }
 
     50% {
@@ -139,6 +150,7 @@ const StyledToastContainer = styled(ToastContainer)`
     font: normal 12px "Open Sans", sans-serif;
     width: ${(props) => props.theme.toast.main.width};
     right: ${(props) => props.theme.toast.main.right};
+
     transition: ${(props) => props.theme.toast.main.transition};
 
     @media ${tablet} {
@@ -167,6 +179,12 @@ const StyledToastContainer = styled(ToastContainer)`
 
   @media ${tablet} {
     right: 16px;
+    ${(props) =>
+      props.theme.interfaceDirection === "rtl" &&
+      css`
+        left: 16px;
+        right: auto;
+      `}
   }
 
   @media only screen and (max-width: 480px) {