@codecademy/gamut

Index: package/dist/Tip/shared/styles/styles.js
===================================================================
--- package/dist/Tip/shared/styles/styles.js
+++ package/dist/Tip/shared/styles/styles.js
@@ -57,8 +57,28 @@
   below: 'rotate(-135deg)',
   right: 'rotate(135deg)',
   left: 'rotate(-45deg)'
 };
+const sideCenterMirroredTransform = side => side === 'right' ? beakBackgroundRotation.left : beakBackgroundRotation.right;
+
+/**
+ * Inline ToolTip / InfoTip: RTL beak rotation on the container that owns `::after`
+ * (avoids invalid `::after:dir(rtl)` when the same beak object is merged under `&::after`).
+ */
+export const horizontalCenterBeakRtlInline = side => ({
+  '&:dir(rtl)': {
+    '&::after': {
+      transform: sideCenterMirroredTransform(side)
+    }
+  }
+});
+
+/** Popover beak is a real node; `:dir(rtl)` applies on that element (not under `&::after`). */
+export const horizontalCenterBeakRtlPopover = side => ({
+  '&:dir(rtl)': {
+    transform: sideCenterMirroredTransform(side)
+  }
+});
 export const getBeakBgAndRotation = ({
   alignment,
   color
 }) => {
@@ -136,9 +156,10 @@
   top: '0.25rem'
 };
 export const rightAlignStyles = {
   pl: containerOffsetVertical,
-  left: '100%'
+  left: '100%',
+  ...horizontalCenterBeakRtlInline('right')
 };
 export const horizontalCenterStyles = {
   ...horizontalCenterWidths,
   ...centerHorizontal,
@@ -149,9 +170,10 @@
   maxWidth: 124 + tooltipArrowHeightPx
 };
 export const leftAlignStyles = {
   pr: containerOffsetVertical,
-  right: '100%'
+  right: '100%',
+  ...horizontalCenterBeakRtlInline('left')
 };
 export const verticalCenterStyles = {
   ...verticalCenterWidths,
   left: 'calc(50% - 4rem)',