@codecademy/gamut

Index: package/dist/Tip/shared/styles/styles.d.ts
===================================================================
--- package/dist/Tip/shared/styles/styles.d.ts
+++ package/dist/Tip/shared/styles/styles.d.ts
@@ -25,45 +25,63 @@
     readonly bottom: "0";
     readonly my: "auto";
 };
 declare const beakBackgroundRotation: {
-    above: string;
-    below: string;
-    right: string;
-    left: string;
+    readonly above: "rotate(45deg)";
+    readonly below: "rotate(-135deg)";
+    readonly right: "rotate(135deg)";
+    readonly left: "rotate(-45deg)";
 };
+type SideCenterBeakSide = 'left' | '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 declare const horizontalCenterBeakRtlInline: (side: SideCenterBeakSide) => {
+    '&:dir(rtl)': {
+        '&::after': {
+            transform: "rotate(135deg)" | "rotate(-45deg)";
+        };
+    };
+};
+/** Popover beak is a real node; `:dir(rtl)` applies on that element (not under `&::after`). */
+export declare const horizontalCenterBeakRtlPopover: (side: SideCenterBeakSide) => {
+    '&:dir(rtl)': {
+        transform: "rotate(135deg)" | "rotate(-45deg)";
+    };
+};
 type GetBeakBackgroundType = {
     alignment: keyof typeof beakBackgroundRotation;
     color: typeof tooltipBgColor | typeof popoverPrimaryBgColor;
 };
 export declare const getBeakBgAndRotation: ({ alignment, color, }: GetBeakBackgroundType) => {
-    transform: string;
+    transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
     backgroundImage: string;
 };
 export declare const beakStylesBase: {
     borderColor: string;
     borderWidth: string;
 };
 export declare const beakTopStyles: {
-    transform: string;
+    transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
     backgroundImage: string;
     borderColor: string;
     borderWidth: string;
 };
 export declare const beakBottomStyles: {
-    transform: string;
+    transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
     backgroundImage: string;
     borderColor: string;
     borderWidth: string;
 };
 export declare const beakRightCenterStyles: {
-    transform: string;
+    transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
     backgroundImage: string;
     borderColor: string;
     borderWidth: string;
 };
 export declare const beakLeftCenterStyles: {
-    transform: string;
+    transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
     backgroundImage: string;
     borderColor: string;
     borderWidth: string;
 };
@@ -72,9 +90,9 @@
     readonly pb: 12;
 };
 export declare const topStylesAfter: {
     readonly bottom: "0.25rem";
-    readonly transform: string;
+    readonly transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
     readonly backgroundImage: string;
     readonly borderColor: string;
     readonly borderWidth: string;
 };
@@ -102,16 +120,21 @@
     width: string;
 };
 export declare const bottomStylesAfter: {
     readonly top: "0.25rem";
-    readonly transform: string;
+    readonly transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
     readonly backgroundImage: string;
     readonly borderColor: string;
     readonly borderWidth: string;
 };
 export declare const rightAlignStyles: {
-    readonly pl: 12;
-    readonly left: "100%";
+    '&:dir(rtl)': {
+        '&::after': {
+            transform: "rotate(135deg)" | "rotate(-45deg)";
+        };
+    };
+    pl: number;
+    left: string;
 };
 export declare const horizontalCenterStyles: {
     readonly maxWidth: number;
     readonly top: "0";
@@ -120,10 +143,15 @@
     readonly height: "fit-content";
     readonly minWidth: 4;
 };
 export declare const leftAlignStyles: {
-    readonly pr: 12;
-    readonly right: "100%";
+    '&:dir(rtl)': {
+        '&::after': {
+            transform: "rotate(135deg)" | "rotate(-45deg)";
+        };
+    };
+    pr: number;
+    right: string;
 };
 export declare const verticalCenterStyles: {
     readonly left: "calc(50% - 4rem)";
     readonly width: "70vw";
@@ -146,16 +174,16 @@
 export declare const rightVertStylesAfter: {
     readonly left: "1.5rem";
 };
 export declare const rightAlignStylesAfter: {
-    readonly transform: string;
+    readonly transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
     readonly backgroundImage: string;
     readonly borderColor: string;
     readonly borderWidth: string;
     readonly left: "4px";
 };
 export declare const leftAlignStylesAfter: {
-    readonly transform: string;
+    readonly transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
     readonly backgroundImage: string;
     readonly borderColor: string;
     readonly borderWidth: string;
     readonly right: "4px";