From 1cf863f85d9c0d63237b52e2b61c1d6db105c552 Mon Sep 17 00:00:00 2001
From: Alexandr Shostyr <sashashostyr@gmail.com>
Date: Fri, 11 Oct 2024 11:32:34 +0300
Subject: [PATCH] fix: rtl issues

---
 system/core/src/components/InputWithIcons.ts     | 14 ++++++++++++--
 system/core/src/components/InputWithPrefix.ts    | 14 ++++++++++++--
 system/core/src/components/TextAreaWithIcons.ts  | 14 ++++++++++++--
 system/core/src/components/TextAreaWithPrefix.ts | 14 ++++++++++++--
 system/stories/src/DatePicker/storyStyles.ts     |  7 ++++++-
 5 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/system/core/src/components/InputWithIcons.ts b/system/core/src/components/InputWithIcons.ts
index 6ddf558c0..4a2001664 100644
--- a/system/core/src/components/InputWithIcons.ts
+++ b/system/core/src/components/InputWithIcons.ts
@@ -82,9 +82,19 @@ export const fullStyles = css`
         var(--tk-input-icon-end-padding)
     );
     --tk-icon-button-padding: 8px !important;
-    margin: 0 -9px 0 -6px;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-inline-start: -6px;
+    -webkit-margin-start: -6px;
+    margin-inline-end: -9px;
+    -webkit-margin-end: -9px;
   }
   &[data-size='small'] > [data-mode='input-append'] {
-    margin: 0 -9px 0 -3px;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-inline-start: -3px;
+    -webkit-margin-start: -3px;
+    margin-inline-end: -9px;
+    -webkit-margin-end: -9px;
   }
 `;
diff --git a/system/core/src/components/InputWithPrefix.ts b/system/core/src/components/InputWithPrefix.ts
index fe3047ccf..96230f56c 100644
--- a/system/core/src/components/InputWithPrefix.ts
+++ b/system/core/src/components/InputWithPrefix.ts
@@ -90,9 +90,19 @@ export const fullStyles = css`
         var(--tk-input-icon-end-padding)
     );
     --tk-icon-button-padding: 8px !important;
-    margin: 0 -11px 0 -7px;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-inline-start: -7px;
+    -webkit-margin-start: -7px;
+    margin-inline-end: -11px;
+    -webkit-margin-end: -11px;
   }
   &[data-size='small'] > [data-mode='input-append'] {
-    margin: 0 -11px 0 -3px;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-inline-start: -3px;
+    -webkit-margin-start: -3px;
+    margin-inline-end: -11px;
+    -webkit-margin-end: -11px;
   }
 `;
diff --git a/system/core/src/components/TextAreaWithIcons.ts b/system/core/src/components/TextAreaWithIcons.ts
index 6e35910c1..0a0515dbe 100644
--- a/system/core/src/components/TextAreaWithIcons.ts
+++ b/system/core/src/components/TextAreaWithIcons.ts
@@ -101,9 +101,19 @@ export const fullStyles = css`
         var(--tk-input-icon-end-padding)
     );
     --tk-icon-button-padding: 8px !important;
-    margin: 0 -9px 0 -6px;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-inline-start: -6px;
+    -webkit-margin-start: -6px;
+    margin-inline-end: -9px;
+    -webkit-margin-end: -9px;
   }
   &[data-size='small'] > [data-mode='input-append'] {
-    margin: 0 -9px 0 -3px;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-inline-start: -3px;
+    -webkit-margin-start: -3px;
+    margin-inline-end: -9px;
+    -webkit-margin-end: -9px;
   }
 `;
diff --git a/system/core/src/components/TextAreaWithPrefix.ts b/system/core/src/components/TextAreaWithPrefix.ts
index a4cd1692a..b67239761 100644
--- a/system/core/src/components/TextAreaWithPrefix.ts
+++ b/system/core/src/components/TextAreaWithPrefix.ts
@@ -106,9 +106,19 @@ export const fullStyles = css`
         var(--tk-input-icon-end-padding)
     );
     --tk-icon-button-padding: 8px !important;
-    margin: 0 -11px 0 -8px;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-inline-start: -8px;
+    -webkit-margin-start: -8px;
+    margin-inline-end: -11px;
+    -webkit-margin-end: -11px;
   }
   &[data-size='small'] > [data-mode='input-append'] {
-    margin: 0 -11px 0 -3px;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-inline-start: -3px;
+    -webkit-margin-start: -3px;
+    margin-inline-end: -11px;
+    -webkit-margin-end: -11px;
   }
 `;
diff --git a/system/stories/src/DatePicker/storyStyles.ts b/system/stories/src/DatePicker/storyStyles.ts
index be3d3bbae..da8ff8f2d 100644
--- a/system/stories/src/DatePicker/storyStyles.ts
+++ b/system/stories/src/DatePicker/storyStyles.ts
@@ -41,7 +41,12 @@ export const Table = styled.table`
     border-bottom: 1px solid var(--border);
   }
   td {
-    padding: var(--spacing-l2) var(--spacing-l4) var(--spacing-l2) 0px;
+    padding-top: var(--spacing-l2);
+    padding-bottom: var(--spacing-l2);
+    padding-inline-start: 0;
+    -webkit-padding-start: 0;
+    padding-inline-end: var(--spacing-l4);
+    -webkit-padding-end: var(--spacing-l4);
     line-height: 1.5;
   }
 `;