fix(ui): various RTL issues (#774)

packages/ui/src/lib/components/CodeBlock/CodeBlock.svelte

@@ -55,7 +55,7 @@
 <Card class="relative">
   <div class="text-sm">
     {#if canCopy}
-      <span class="absolute top-2 right-2 {zIndex.CodeBlockCopyButton} cursor-pointer">
+      <span class="absolute top-2 inset-e-2 {zIndex.CodeBlockCopyButton} cursor-pointer">
         <IconButton
           icon={copied ? mdiCheckCircle : mdiContentCopy}
           size="small"

packages/ui/src/lib/components/Input/Input.svelte

@@ -31,7 +31,7 @@
     variants: {
       padding: {
         base: 'px-4',
-        icon: 'pl-4',
+        icon: 'ps-4',
       },
     },
   });

packages/ui/src/lib/components/Toast/ToastPanel.svelte

@@ -14,7 +14,7 @@
 <TooltipProvider>
   <div
     class={cleanClass(
-      isEmpty ? 'hidden' : 'absolute top-0 right-0 flex flex-col items-end justify-end gap-2 p-4',
+      isEmpty ? 'hidden' : 'absolute top-0 inset-e-0 flex flex-col items-end justify-end gap-2 p-4',
       zIndex.ToastPanel,
       className,
     )}

packages/ui/src/lib/internal/Select.svelte

@@ -104,12 +104,12 @@
         giant: 'h-12',
       },
       leadingPadding: {
-        base: 'pl-4',
-        icon: 'pl-0',
+        base: 'ps-4',
+        icon: 'ps-0',
       },
       trailingPadding: {
-        base: 'pr-4',
-        icon: 'pr-0',
+        base: 'pe-4',
+        icon: 'pe-0',
       },
       roundedSize: styleVariants.inputRoundedSize,
     },

packages/ui/src/lib/styles.ts

@@ -125,12 +125,12 @@ export const inputStyles = tv({
   variants: {
     textSize: styleVariants.textSize,
     leadingPadding: {
-      base: 'pl-4',
-      icon: 'pl-0',
+      base: 'ps-4',
+      icon: 'ps-0',
     },
     trailingPadding: {
-      base: 'pr-4',
-      icon: 'pr-0',
+      base: 'pe-4',
+      icon: 'pe-0',
     },
     roundedSize: {
       tiny: 'rounded-lg',