@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,10 +97,20 @@
   position,
   beak,
   variant
 }) => {
-  const beakAlignment = position === 'center' ? align : beak;
-  return `${position}-${beakAlignment}${variant === 'secondary' ? '-sml' : ''}`;
+  const suffix = variant === 'secondary' ? '-sml' : '';
+  let beakAlignment;
+  if (position === 'center') {
+    beakAlignment = align ?? 'left';
+  } else if (beak === 'center') {
+    beakAlignment = 'center';
+  } else if (beak === 'left' || beak === 'right') {
+    beakAlignment = beak;
+  } else {
+    beakAlignment = align === 'left' ? 'left' : 'right';
+  }
+  return `${position}-${beakAlignment}${suffix}`;
 };
 export const createBeakVariantFromAlignment = alignment => {
   let styleObject = {};
   const isSml = alignment.includes('sml');