@codecademy/gamut

Index: package/dist/Popover/styles/beak.js
===================================================================
--- package/dist/Popover/styles/beak.js
+++ package/dist/Popover/styles/beak.js
@@ -1,6 +1,8 @@
-import { beakBottomStyles, beakLeftCenterStyles, beakRightCenterStyles, beakStylesBase, beakTopStyles, getBeakBgAndRotation, tooltipBgColor } from '../../Tip/shared/styles/styles';
+import { beakBottomStyles, beakLeftCenterStyles, beakRightCenterStyles, beakStylesBase, beakTopStyles, getBeakBgAndRotation, horizontalCenterBeakRtlPopover, tooltipBgColor } from '../../Tip/shared/styles/styles';
 import { popoverPrimaryBgColor } from './base';
+const rtlBeakBoxRight = horizontalCenterBeakRtlPopover('right');
+const rtlBeakBoxLeft = horizontalCenterBeakRtlPopover('left');
 const positionAbove = {
   top: 'calc(100% - 10px)',
   ...beakStylesBase,
   ...getBeakBgAndRotation({
@@ -51,28 +53,32 @@
   top: 'calc(50% - 8px)'
 };
 const beakRightCenterStylesSml = {
   ...beakRightCenterStyles,
+  ...rtlBeakBoxRight,
   left: -8
 };
 export const beakRightCenterStylesLrg = {
   ...beakStylesBase,
   ...getBeakBgAndRotation({
     alignment: 'right',
     color: popoverPrimaryBgColor
   }),
+  ...rtlBeakBoxRight,
   left: -10
 };
 const beakLeftCenterStylesSml = {
   ...beakLeftCenterStyles,
+  ...rtlBeakBoxLeft,
   right: -8
 };
 const beakLeftCenterStylesLrg = {
   ...beakStylesBase,
   ...getBeakBgAndRotation({
     alignment: 'left',
     color: popoverPrimaryBgColor
   }),
+  ...rtlBeakBoxLeft,
   right: -10
 };
 export const beakBoxX = {
   alignItems: 'flex-end',
@@ -91,9 +97,9 @@
   position,
   beak,
   variant
 }) => {
-  const beakAlignment = position === 'center' ? align : beak;
+  const beakAlignment = position === 'center' ? align : beak === 'center' ? 'center' : align ?? 'left';
   return `${position}-${beakAlignment}${variant === 'secondary' ? '-sml' : ''}`;
 };
 export const createBeakVariantFromAlignment = alignment => {
   let styleObject = {};