@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,16 @@
   below: 'rotate(-135deg)',
   right: 'rotate(135deg)',
   left: 'rotate(-45deg)'
 };
+const sideCenterMirroredTransform = side => side === 'right' ? beakBackgroundRotation.left : beakBackgroundRotation.right;
+
+/** 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
 }) => {
@@ -135,10 +143,10 @@
   ...beakBottomStyles,
   top: '0.25rem'
 };
 export const rightAlignStyles = {
-  pl: containerOffsetVertical,
-  left: '100%'
+  paddingInlineStart: containerOffsetVertical,
+  insetInlineStart: '100%'
 };
 export const horizontalCenterStyles = {
   ...horizontalCenterWidths,
   ...centerHorizontal,
@@ -148,10 +156,10 @@
    */
   maxWidth: 124 + tooltipArrowHeightPx
 };
 export const leftAlignStyles = {
-  pr: containerOffsetVertical,
-  right: '100%'
+  paddingInlineEnd: containerOffsetVertical,
+  insetInlineEnd: '100%'
 };
 export const verticalCenterStyles = {
   ...verticalCenterWidths,
   left: 'calc(50% - 4rem)',
@@ -173,13 +181,13 @@
 export const rightVertStylesAfter = {
   left: '1.5rem'
 };
 export const rightAlignStylesAfter = {
-  left: '4px',
+  insetInlineStart: '4px',
   ...beakRightCenterStyles
 };
 export const leftAlignStylesAfter = {
-  right: '4px',
+  insetInlineEnd: '4px',
   ...beakLeftCenterStyles
 };
 export const tooltipVariantStyles = createVariantsFromAlignments(tipAlignmentArray, createToolTipVariantFromAlignment);
 export const tooltipCenteredPadding = 4;