@codecademy/gamut

Index: package/dist/Popover/Popover.js
===================================================================
--- package/dist/Popover/Popover.js
+++ package/dist/Popover/Popover.js
@@ -1,5 +1,6 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useElementDir, useLogicalProperties } from '@codecademy/gamut-styles';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useWindowScroll, useWindowSize } from 'react-use';
 import { FocusTrap } from '../FocusTrap';
 import { useResizingParentEffect, useScrollingParentsEffect } from '../PopoverContainer/hooks';
 import { Beak, BeakBox, PatternContainer, PopoverContainer, PopoverPortal, RaisedDiv } from './elements';
@@ -46,8 +47,15 @@
     x,
     y
   } = useWindowScroll();
   const popoverRef = useRef(null);
+  const isRtl = useElementDir(targetRef) === 'rtl';
+  const logicalPropsEnabled = useLogicalProperties();
+  const resolvedAlign = useMemo(() => {
+    if (align !== 'left' && align !== 'right') return align;
+    if (!logicalPropsEnabled) return align;
+    return isRtl ? align === 'left' ? 'right' : 'left' : align;
+  }, [align, isRtl, logicalPropsEnabled]);
   const updatePopoverDimensions = useCallback(() => {
     if (popoverRef.current) {
       const {
         height,
@@ -95,11 +103,11 @@
       center: Math.round(targetRect.left + targetRect.width / 2 - popoverWidth / 2 + horizontalOffset)
     };
     return {
       top: positions[position],
-      left: alignments[align]
+      left: alignments[resolvedAlign]
     };
-  }, [align, horizontalOffset, popoverHeight, popoverWidth, position, targetRect, verticalOffset]);
+  }, [horizontalOffset, popoverHeight, popoverWidth, position, resolvedAlign, targetRect, verticalOffset]);
   useEffect(() => {
     setTargetRect(targetRef?.current?.getBoundingClientRect());
   }, [targetRef, isOpen, width, height, x, y]);
   const updateTargetPosition = useCallback(rect => {
@@ -131,9 +139,9 @@
   }, [onRequestClose, targetRef]);
   if ((!isOpen || !targetRef) && !animation) return null;
   const alignment = (variant === 'primary' || beak) && beak !== 'center' ? 'aligned' : 'centered';
   const contents = /*#__PURE__*/_jsxs(PopoverContainer, {
-    align: align,
+    align: resolvedAlign,
     className: className,
     "data-floating": "popover",
     "data-testid": "popover-content-container",
     position: position,
@@ -154,9 +162,9 @@
       children: [beak && /*#__PURE__*/_jsx(BeakBox, {
         variant: position,
         children: /*#__PURE__*/_jsx(Beak, {
           beak: getBeakVariant({
-            align,
+            align: resolvedAlign,
             position,
             beak,
             variant
           }),
@@ -165,9 +173,9 @@
           size: variant === 'secondary' ? 'sml' : 'lrg'
         })
       }), children]
     }), Pattern && /*#__PURE__*/_jsx(PatternContainer, {
-      variant: `${position}-${align}`,
+      variant: `${position}-${resolvedAlign}`,
       children: /*#__PURE__*/_jsx(Pattern, {
         "data-testid": "popover-pattern"
       })
     })]