@codecademy/gamut

68.2.268.2.3-alpha.d44ad5.0
dist/Tip/shared/styles/styles.d.ts
~dist/Tip/shared/styles/styles.d.tsModified
+26−19
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,52 @@
     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';
+/** 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 +79,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 +109,16 @@
     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%";
+    paddingInlineStart: number;
+    insetInlineStart: string;
 };
 export declare const horizontalCenterStyles: {
     readonly maxWidth: number;
     readonly top: "0";
@@ -120,10 +127,10 @@
     readonly height: "fit-content";
     readonly minWidth: 4;
 };
 export declare const leftAlignStyles: {
-    readonly pr: 12;
-    readonly right: "100%";
+    paddingInlineEnd: number;
+    insetInlineEnd: string;
 };
 export declare const verticalCenterStyles: {
     readonly left: "calc(50% - 4rem)";
     readonly width: "70vw";
@@ -146,20 +153,20 @@
 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";
+    readonly insetInlineStart: "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";
+    readonly insetInlineEnd: "4px";
 };
 export declare const tooltipVariantStyles: {
     [k: string]: {};
 };