@codecademy/gamut 68.0.1-alpha.4aeb6d.0 → 68.0.1-alpha.588625.0

package/dist/Pagination/AnimatedPaginationButtons.d.ts

@@ -19,11 +19,19 @@ export declare const AnimatedFadeButton: (props: {
     dir?: string | undefined;
     className?: string | undefined;
     height?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "height";
+        readonly property: {
+            readonly physical: "height";
+            readonly logical: "blockSize";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     }>;
     width?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "width";
+        readonly property: {
+            readonly physical: "width";
+            readonly logical: "inlineSize";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     }>;
     "aria-hidden"?: (boolean | "false" | "true") | undefined;
@@ -292,6 +300,9 @@ export declare const AnimatedFadeButton: (props: {
     containerType?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "containerType";
     }>;
+    direction?: import("@codecademy/variance/dist/types/config").Scale<{
+        readonly property: "direction";
+    }>;
     display?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "display";
     }>;
@@ -324,19 +335,35 @@ export declare const AnimatedFadeButton: (props: {
         readonly transform: (value: string | number) => string | 0;
     }>;
     maxHeight?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "maxHeight";
+        readonly property: {
+            readonly physical: "maxHeight";
+            readonly logical: "maxBlockSize";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     }>;
     maxWidth?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "maxWidth";
+        readonly property: {
+            readonly physical: "maxWidth";
+            readonly logical: "maxInlineSize";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     }>;
     minHeight?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "minHeight";
+        readonly property: {
+            readonly physical: "minHeight";
+            readonly logical: "minBlockSize";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     }>;
     minWidth?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "minWidth";
+        readonly property: {
+            readonly physical: "minWidth";
+            readonly logical: "minInlineSize";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     }>;
     opacity?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -369,19 +396,11 @@ export declare const AnimatedFadeButton: (props: {
         readonly property: "zIndex";
     }>;
     borderBottom?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "borderBottom";
-            readonly logical: "borderBlockEnd";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "borderBottom";
         readonly scale: "borders";
     }>;
     borderLeft?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "borderLeft";
-            readonly logical: "borderInlineStart";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "borderLeft";
         readonly scale: "borders";
     }>;
     borderRadius?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -389,22 +408,14 @@ export declare const AnimatedFadeButton: (props: {
         readonly scale: "borderRadii";
     }>;
     borderRight?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "borderRight";
-            readonly logical: "borderInlineEnd";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "borderRight";
         readonly scale: "borders";
     }>;
     borderStyle?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "borderStyle";
     }>;
     borderTop?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "borderTop";
-            readonly logical: "borderBlockStart";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "borderTop";
         readonly scale: "borders";
     }>;
     borderWidth?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -538,177 +549,89 @@ export declare const AnimatedFadeButton: (props: {
     }>;
     borderX?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "border";
-        readonly properties: {
-            readonly physical: readonly ["borderLeft", "borderRight"];
-            readonly logical: readonly ["borderInlineStart", "borderInlineEnd"];
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly properties: readonly ["borderLeft", "borderRight"];
         readonly scale: "borders";
     }>;
     borderY?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "border";
-        readonly properties: {
-            readonly physical: readonly ["borderTop", "borderBottom"];
-            readonly logical: readonly ["borderBlockStart", "borderBlockEnd"];
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly properties: readonly ["borderTop", "borderBottom"];
         readonly scale: "borders";
     }>;
     borderWidthX?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "borderWidth";
-        readonly properties: {
-            readonly physical: readonly ["borderLeftWidth", "borderRightWidth"];
-            readonly logical: readonly ["borderInlineStartWidth", "borderInlineEndWidth"];
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly properties: readonly ["borderLeftWidth", "borderRightWidth"];
     }>;
     borderWidthY?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "borderWidth";
-        readonly properties: {
-            readonly physical: readonly ["borderTopWidth", "borderBottomWidth"];
-            readonly logical: readonly ["borderBlockStartWidth", "borderBlockEndWidth"];
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly properties: readonly ["borderTopWidth", "borderBottomWidth"];
     }>;
     borderWidthLeft?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "borderLeftWidth";
-            readonly logical: "borderInlineStartWidth";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "borderLeftWidth";
     }>;
     borderWidthRight?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "borderRightWidth";
-            readonly logical: "borderInlineEndWidth";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "borderRightWidth";
     }>;
     borderWidthTop?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "borderTopWidth";
-            readonly logical: "borderBlockStartWidth";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "borderTopWidth";
     }>;
     borderWidthBottom?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "borderBottomWidth";
-            readonly logical: "borderBlockEndWidth";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "borderBottomWidth";
     }>;
     borderRadiusLeft?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "borderRadius";
-        readonly properties: {
-            readonly physical: readonly ["borderTopLeftRadius", "borderBottomLeftRadius"];
-            readonly logical: readonly ["borderStartStartRadius", "borderEndStartRadius"];
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly properties: readonly ["borderTopLeftRadius", "borderBottomLeftRadius"];
         readonly scale: "borderRadii";
     }>;
     borderRadiusTop?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "borderRadius";
-        readonly properties: {
-            readonly physical: readonly ["borderTopLeftRadius", "borderTopRightRadius"];
-            readonly logical: readonly ["borderStartStartRadius", "borderStartEndRadius"];
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly properties: readonly ["borderTopLeftRadius", "borderTopRightRadius"];
         readonly scale: "borderRadii";
     }>;
     borderRadiusBottom?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "borderRadius";
-        readonly properties: {
-            readonly physical: readonly ["borderBottomLeftRadius", "borderBottomRightRadius"];
-            readonly logical: readonly ["borderEndStartRadius", "borderEndEndRadius"];
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly properties: readonly ["borderBottomLeftRadius", "borderBottomRightRadius"];
         readonly scale: "borderRadii";
     }>;
     borderRadiusRight?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "borderRadius";
-        readonly properties: {
-            readonly physical: readonly ["borderTopRightRadius", "borderBottomRightRadius"];
-            readonly logical: readonly ["borderStartEndRadius", "borderEndEndRadius"];
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly properties: readonly ["borderTopRightRadius", "borderBottomRightRadius"];
         readonly scale: "borderRadii";
     }>;
     borderRadiusTopLeft?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "borderTopLeftRadius";
-            readonly logical: "borderStartStartRadius";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "borderTopLeftRadius";
         readonly scale: "borderRadii";
     }>;
     borderRadiusTopRight?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "borderTopRightRadius";
-            readonly logical: "borderStartEndRadius";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "borderTopRightRadius";
         readonly scale: "borderRadii";
     }>;
     borderRadiusBottomRight?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "borderBottomRightRadius";
-            readonly logical: "borderEndEndRadius";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "borderBottomRightRadius";
         readonly scale: "borderRadii";
     }>;
     borderRadiusBottomLeft?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "borderBottomLeftRadius";
-            readonly logical: "borderEndStartRadius";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "borderBottomLeftRadius";
         readonly scale: "borderRadii";
     }>;
     borderStyleX?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "borderStyle";
-        readonly properties: {
-            readonly physical: readonly ["borderLeftStyle", "borderRightStyle"];
-            readonly logical: readonly ["borderInlineStartStyle", "borderInlineEndStyle"];
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly properties: readonly ["borderLeftStyle", "borderRightStyle"];
     }>;
     borderStyleY?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "borderStyle";
-        readonly properties: {
-            readonly physical: readonly ["borderTopStyle", "borderBottomStyle"];
-            readonly logical: readonly ["borderBlockStartStyle", "borderBlockEndStyle"];
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly properties: readonly ["borderTopStyle", "borderBottomStyle"];
     }>;
     borderStyleLeft?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "borderLeftStyle";
-            readonly logical: "borderInlineStartStyle";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "borderLeftStyle";
     }>;
     borderStyleRight?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "borderRightStyle";
-            readonly logical: "borderInlineEndStyle";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "borderRightStyle";
     }>;
     borderStyleTop?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "borderTopStyle";
-            readonly logical: "borderBlockStartStyle";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "borderTopStyle";
     }>;
     borderStyleBottom?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: {
-            readonly physical: "borderBottomStyle";
-            readonly logical: "borderBlockEndStyle";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "borderBottomStyle";
     }>;
     dimensions?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "width";
@@ -742,7 +665,7 @@ export declare const AnimatedSlideButton: (props: (Omit<Omit<{
     href?: string | undefined;
 } & {
     'aria-label': string;
-    direction: "back" | "forward";
+    buttonDirection: "back" | "forward";
 }, "ref"> | Omit<Omit<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
@@ -758,5 +681,5 @@ export declare const AnimatedSlideButton: (props: (Omit<Omit<{
     href?: string | undefined;
 } & {
     'aria-label': string;
-    direction: "back" | "forward";
+    buttonDirection: "back" | "forward";
 }, "ref">) & import("react").RefAttributes<import("..").ButtonBaseElements>) => import("react/jsx-runtime").JSX.Element;

package/dist/Pagination/EllipsisButton.d.ts

@@ -3,7 +3,7 @@ import { ButtonBaseElements } from '../ButtonBase/ButtonBase';
 import { PaginationButtonProps } from './PaginationButton';
 export type EllipsisButtonProps = PaginationButtonProps & {
     'aria-label': string;
-    direction: 'back' | 'forward';
+    buttonDirection: 'back' | 'forward';
 };
 export declare const BaseEllipsisButton: import("react").ForwardRefExoticComponent<(Omit<Omit<{
     theme?: import("@emotion/react").Theme | undefined;
@@ -20,7 +20,7 @@ export declare const BaseEllipsisButton: import("react").ForwardRefExoticCompone
     href?: string | undefined;
 } & {
     'aria-label': string;
-    direction: 'back' | 'forward';
+    buttonDirection: 'back' | 'forward';
 }, "ref"> | Omit<Omit<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
@@ -36,7 +36,7 @@ export declare const BaseEllipsisButton: import("react").ForwardRefExoticCompone
     href?: string | undefined;
 } & {
     'aria-label': string;
-    direction: 'back' | 'forward';
+    buttonDirection: 'back' | 'forward';
 }, "ref">) & import("react").RefAttributes<ButtonBaseElements>>;
 export declare const EllipsisButton: (props: (Omit<Omit<{
     theme?: import("@emotion/react").Theme | undefined;
@@ -53,7 +53,7 @@ export declare const EllipsisButton: (props: (Omit<Omit<{
     href?: string | undefined;
 } & {
     'aria-label': string;
-    direction: 'back' | 'forward';
+    buttonDirection: 'back' | 'forward';
 }, "ref"> | Omit<Omit<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
@@ -69,5 +69,5 @@ export declare const EllipsisButton: (props: (Omit<Omit<{
     href?: string | undefined;
 } & {
     'aria-label': string;
-    direction: 'back' | 'forward';
+    buttonDirection: 'back' | 'forward';
 }, "ref">) & import("react").RefAttributes<ButtonBaseElements>) => import("react/jsx-runtime").JSX.Element;

package/dist/Pagination/EllipsisButton.js

@@ -8,14 +8,14 @@ const ellipsisButtonContents = {
   forward: '»'
 };
 export const BaseEllipsisButton = /*#__PURE__*/forwardRef(({
-  direction,
+  buttonDirection,
   showButton,
   ...props
 }, ref) => {
   const [contents, setContents] = useState(ellipsisButtonContents.ellipsis);
   return /*#__PURE__*/_jsx(PaginationButton, {
     ellipsis: true,
-    onMouseEnter: () => setContents(ellipsisButtonContents[direction]),
+    onMouseEnter: () => setContents(ellipsisButtonContents[buttonDirection]),
     onMouseLeave: () => setContents(ellipsisButtonContents.ellipsis),
     ...props,
     ref: ref,

package/dist/Pagination/index.js

@@ -80,8 +80,8 @@ export const Pagination = ({
     }), showSkipToButtons && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(AnimatedSlideButton, {
         "aria-label": "Jump back to page 1",
+        buttonDirection: "back",
         buttonType: variant,
-        direction: "back",
         display: hideOnMobile,
         href: navigation,
         showButton: shownPageArray[0] === 1 ? 'hidden' : 'shown',
@@ -89,8 +89,8 @@ export const Pagination = ({
         children: "1"
       }), /*#__PURE__*/_jsx(EllipsisButton, {
         "aria-label": `Jump back to page ${backPageNumber}`,
+        buttonDirection: "back",
         buttonType: variant,
-        direction: "back",
         display: hideOnMobile,
         href: navigation,
         showButton: shownPageArray[0] === 1 ? 'hidden' : 'shown',
@@ -107,8 +107,8 @@ export const Pagination = ({
     }, page)), showSkipToButtons && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(EllipsisButton, {
         "aria-label": `Jump forward to page ${forwardPageNumber}`,
+        buttonDirection: "forward",
         buttonType: variant,
-        direction: "forward",
         display: hideOnMobile,
         href: navigation,
         showButton: shownPageArray[chapterSize - 1] === totalPages ? 'hidden' : 'shown',
@@ -117,8 +117,8 @@ export const Pagination = ({
         }
       }), /*#__PURE__*/_jsx(AnimatedSlideButton, {
         "aria-label": `Jump forward to last page, page ${totalPages}`,
+        buttonDirection: "forward",
         buttonType: variant,
-        direction: "forward",
         display: hideOnMobile,
         href: navigation,
         showButton: shownPageArray[chapterSize - 1] === totalPages ? 'hidden' : 'shown',