Web: Components: Adapt RadioButton component to RTL interface

packages/components/radio-button/styled-radio-button.js

@@ -19,7 +19,14 @@ const Label = styled(ClearLabel)`
   cursor: ${(props) => !props.isDisabled && "pointer"};
 
   .radio-button {
-    margin-right: ${(props) => props.theme.radioButton.marginRight};
+    ${(props) =>
+      props.theme.interfaceDirection === "rtl"
+        ? css`
+            margin-left: ${props.theme.radioButton.marginBeforeLabel};
+          `
+        : css`
+            margin-right: ${props.theme.radioButton.marginBeforeLabel};
+          `}
 
     path {
       fill: ${(props) =>
@@ -69,9 +76,13 @@ const Label = styled(ClearLabel)`
   &:not(:first-child) {
     ${(props) =>
       props.orientation === "horizontal" &&
-      css`
-        margin-left: ${props.spacing};
-      `};
+      (props.theme.interfaceDirection === "rtl"
+        ? css`
+            margin-right: ${props.spacing};
+          `
+        : css`
+            margin-left: ${props.spacing};
+          `)};
   }
 
   &:not(:last-child) {

packages/components/themes/base.js

@@ -496,7 +496,7 @@ const Base = {
     textColor: black,
     textDisableColor: gray,
 
-    marginRight: "8px",
+    marginBeforeLabel: "8px",
 
     background: white,
     disableBackground: grayLight,

packages/components/themes/dark.js

@@ -491,7 +491,7 @@ const Dark = {
     testColor: grayMaxLight,
     textDisableColor: "#5c5c5c",
 
-    marginRight: "8px",
+    marginBeforeLabel: "8px",
 
     background: "#292929",
     disableBackground: "#545454",