@codecademy/gamut-styles 17.12.0-alpha.2d3aae.0 → 17.12.0-alpha.2f9b47.0

package/dist/variance/props.d.ts

@@ -200,10 +200,18 @@ export declare const layout: import("@codecademy/variance/dist/types/config").Pa
         readonly property: "overflow";
     };
     readonly overflowX: {
-        readonly property: "overflowX";
+        readonly property: {
+            readonly physical: "overflowX";
+            readonly logical: "overflowInline";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     readonly overflowY: {
-        readonly property: "overflowY";
+        readonly property: {
+            readonly physical: "overflowY";
+            readonly logical: "overflowBlock";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     readonly dimensions: {
         readonly property: "width";
@@ -211,59 +219,32 @@ export declare const layout: import("@codecademy/variance/dist/types/config").Pa
         readonly transform: (value: string | number) => string | 0;
     };
     readonly width: {
-        readonly property: {
-            readonly physical: "width";
-            readonly logical: "inlineSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "width";
         readonly transform: (value: string | number) => string | 0;
     };
     readonly minWidth: {
-        readonly property: {
-            readonly physical: "minWidth";
-            readonly logical: "minInlineSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "minWidth";
         readonly transform: (value: string | number) => string | 0;
     };
     readonly maxWidth: {
-        readonly property: {
-            readonly physical: "maxWidth";
-            readonly logical: "maxInlineSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "maxWidth";
         readonly transform: (value: string | number) => string | 0;
     };
     readonly height: {
-        readonly property: {
-            readonly physical: "height";
-            readonly logical: "blockSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "height";
         readonly transform: (value: string | number) => string | 0;
     };
     readonly minHeight: {
-        readonly property: {
-            readonly physical: "minHeight";
-            readonly logical: "minBlockSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "minHeight";
         readonly transform: (value: string | number) => string | 0;
     };
     readonly maxHeight: {
-        readonly property: {
-            readonly physical: "maxHeight";
-            readonly logical: "maxBlockSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "maxHeight";
         readonly transform: (value: string | number) => string | 0;
     };
     readonly verticalAlign: {
         readonly property: "verticalAlign";
     };
-    readonly direction: {
-        readonly property: "direction";
-    };
 }>>;
 export declare const positioning: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
     readonly position: {
@@ -271,23 +252,43 @@ export declare const positioning: import("@codecademy/variance/dist/types/config
     };
     readonly inset: {
         readonly property: "inset";
-        readonly properties: readonly ["top", "right", "bottom", "left"];
+        readonly properties: {
+            readonly physical: readonly ["top", "right", "bottom", "left"];
+            readonly logical: readonly ["insetBlockStart", "insetInlineEnd", "insetBlockEnd", "insetInlineStart"];
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     readonly top: {
-        readonly property: "top";
+        readonly property: {
+            readonly physical: "top";
+            readonly logical: "insetBlockStart";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     readonly right: {
-        readonly property: "right";
+        readonly property: {
+            readonly physical: "right";
+            readonly logical: "insetInlineEnd";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     readonly bottom: {
-        readonly property: "bottom";
+        readonly property: {
+            readonly physical: "bottom";
+            readonly logical: "insetBlockEnd";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     readonly left: {
-        readonly property: "left";
+        readonly property: {
+            readonly physical: "left";
+            readonly logical: "insetInlineStart";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     readonly zIndex: {
@@ -1145,23 +1146,43 @@ export declare const css: import("@codecademy/variance/dist/types/config").CSS<i
     };
     inset: {
         readonly property: "inset";
-        readonly properties: readonly ["top", "right", "bottom", "left"];
+        readonly properties: {
+            readonly physical: readonly ["top", "right", "bottom", "left"];
+            readonly logical: readonly ["insetBlockStart", "insetInlineEnd", "insetBlockEnd", "insetInlineStart"];
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     top: {
-        readonly property: "top";
+        readonly property: {
+            readonly physical: "top";
+            readonly logical: "insetBlockStart";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     right: {
-        readonly property: "right";
+        readonly property: {
+            readonly physical: "right";
+            readonly logical: "insetInlineEnd";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     bottom: {
-        readonly property: "bottom";
+        readonly property: {
+            readonly physical: "bottom";
+            readonly logical: "insetBlockEnd";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     left: {
-        readonly property: "left";
+        readonly property: {
+            readonly physical: "left";
+            readonly logical: "insetInlineStart";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     zIndex: {
@@ -1219,10 +1240,18 @@ export declare const css: import("@codecademy/variance/dist/types/config").CSS<i
         readonly property: "overflow";
     };
     overflowX: {
-        readonly property: "overflowX";
+        readonly property: {
+            readonly physical: "overflowX";
+            readonly logical: "overflowInline";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     overflowY: {
-        readonly property: "overflowY";
+        readonly property: {
+            readonly physical: "overflowY";
+            readonly logical: "overflowBlock";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     dimensions: {
         readonly property: "width";
@@ -1230,59 +1259,32 @@ export declare const css: import("@codecademy/variance/dist/types/config").CSS<i
         readonly transform: (value: string | number) => string | 0;
     };
     width: {
-        readonly property: {
-            readonly physical: "width";
-            readonly logical: "inlineSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "width";
         readonly transform: (value: string | number) => string | 0;
     };
     minWidth: {
-        readonly property: {
-            readonly physical: "minWidth";
-            readonly logical: "minInlineSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "minWidth";
         readonly transform: (value: string | number) => string | 0;
     };
     maxWidth: {
-        readonly property: {
-            readonly physical: "maxWidth";
-            readonly logical: "maxInlineSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "maxWidth";
         readonly transform: (value: string | number) => string | 0;
     };
     height: {
-        readonly property: {
-            readonly physical: "height";
-            readonly logical: "blockSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "height";
         readonly transform: (value: string | number) => string | 0;
     };
     minHeight: {
-        readonly property: {
-            readonly physical: "minHeight";
-            readonly logical: "minBlockSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "minHeight";
         readonly transform: (value: string | number) => string | 0;
     };
     maxHeight: {
-        readonly property: {
-            readonly physical: "maxHeight";
-            readonly logical: "maxBlockSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "maxHeight";
         readonly transform: (value: string | number) => string | 0;
     };
     verticalAlign: {
         readonly property: "verticalAlign";
     };
-    direction: {
-        readonly property: "direction";
-    };
     justifyContent: {
         readonly property: "justifyContent";
     };
@@ -1790,23 +1792,43 @@ export declare const variant: import("@codecademy/variance/dist/types/config").V
     };
     inset: {
         readonly property: "inset";
-        readonly properties: readonly ["top", "right", "bottom", "left"];
+        readonly properties: {
+            readonly physical: readonly ["top", "right", "bottom", "left"];
+            readonly logical: readonly ["insetBlockStart", "insetInlineEnd", "insetBlockEnd", "insetInlineStart"];
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     top: {
-        readonly property: "top";
+        readonly property: {
+            readonly physical: "top";
+            readonly logical: "insetBlockStart";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     right: {
-        readonly property: "right";
+        readonly property: {
+            readonly physical: "right";
+            readonly logical: "insetInlineEnd";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     bottom: {
-        readonly property: "bottom";
+        readonly property: {
+            readonly physical: "bottom";
+            readonly logical: "insetBlockEnd";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     left: {
-        readonly property: "left";
+        readonly property: {
+            readonly physical: "left";
+            readonly logical: "insetInlineStart";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     zIndex: {
@@ -1864,10 +1886,18 @@ export declare const variant: import("@codecademy/variance/dist/types/config").V
         readonly property: "overflow";
     };
     overflowX: {
-        readonly property: "overflowX";
+        readonly property: {
+            readonly physical: "overflowX";
+            readonly logical: "overflowInline";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     overflowY: {
-        readonly property: "overflowY";
+        readonly property: {
+            readonly physical: "overflowY";
+            readonly logical: "overflowBlock";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     dimensions: {
         readonly property: "width";
@@ -1875,59 +1905,32 @@ export declare const variant: import("@codecademy/variance/dist/types/config").V
         readonly transform: (value: string | number) => string | 0;
     };
     width: {
-        readonly property: {
-            readonly physical: "width";
-            readonly logical: "inlineSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "width";
         readonly transform: (value: string | number) => string | 0;
     };
     minWidth: {
-        readonly property: {
-            readonly physical: "minWidth";
-            readonly logical: "minInlineSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "minWidth";
         readonly transform: (value: string | number) => string | 0;
     };
     maxWidth: {
-        readonly property: {
-            readonly physical: "maxWidth";
-            readonly logical: "maxInlineSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "maxWidth";
         readonly transform: (value: string | number) => string | 0;
     };
     height: {
-        readonly property: {
-            readonly physical: "height";
-            readonly logical: "blockSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "height";
         readonly transform: (value: string | number) => string | 0;
     };
     minHeight: {
-        readonly property: {
-            readonly physical: "minHeight";
-            readonly logical: "minBlockSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "minHeight";
         readonly transform: (value: string | number) => string | 0;
     };
     maxHeight: {
-        readonly property: {
-            readonly physical: "maxHeight";
-            readonly logical: "maxBlockSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "maxHeight";
         readonly transform: (value: string | number) => string | 0;
     };
     verticalAlign: {
         readonly property: "verticalAlign";
     };
-    direction: {
-        readonly property: "direction";
-    };
     justifyContent: {
         readonly property: "justifyContent";
     };
@@ -2435,23 +2438,43 @@ export declare const states: import("@codecademy/variance/dist/types/config").St
     };
     inset: {
         readonly property: "inset";
-        readonly properties: readonly ["top", "right", "bottom", "left"];
+        readonly properties: {
+            readonly physical: readonly ["top", "right", "bottom", "left"];
+            readonly logical: readonly ["insetBlockStart", "insetInlineEnd", "insetBlockEnd", "insetInlineStart"];
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     top: {
-        readonly property: "top";
+        readonly property: {
+            readonly physical: "top";
+            readonly logical: "insetBlockStart";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     right: {
-        readonly property: "right";
+        readonly property: {
+            readonly physical: "right";
+            readonly logical: "insetInlineEnd";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     bottom: {
-        readonly property: "bottom";
+        readonly property: {
+            readonly physical: "bottom";
+            readonly logical: "insetBlockEnd";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     left: {
-        readonly property: "left";
+        readonly property: {
+            readonly physical: "left";
+            readonly logical: "insetInlineStart";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
         readonly transform: (value: string | number) => string | 0;
     };
     zIndex: {
@@ -2509,10 +2532,18 @@ export declare const states: import("@codecademy/variance/dist/types/config").St
         readonly property: "overflow";
     };
     overflowX: {
-        readonly property: "overflowX";
+        readonly property: {
+            readonly physical: "overflowX";
+            readonly logical: "overflowInline";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     overflowY: {
-        readonly property: "overflowY";
+        readonly property: {
+            readonly physical: "overflowY";
+            readonly logical: "overflowBlock";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     };
     dimensions: {
         readonly property: "width";
@@ -2520,59 +2551,32 @@ export declare const states: import("@codecademy/variance/dist/types/config").St
         readonly transform: (value: string | number) => string | 0;
     };
     width: {
-        readonly property: {
-            readonly physical: "width";
-            readonly logical: "inlineSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "width";
         readonly transform: (value: string | number) => string | 0;
     };
     minWidth: {
-        readonly property: {
-            readonly physical: "minWidth";
-            readonly logical: "minInlineSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "minWidth";
         readonly transform: (value: string | number) => string | 0;
     };
     maxWidth: {
-        readonly property: {
-            readonly physical: "maxWidth";
-            readonly logical: "maxInlineSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "maxWidth";
         readonly transform: (value: string | number) => string | 0;
     };
     height: {
-        readonly property: {
-            readonly physical: "height";
-            readonly logical: "blockSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "height";
         readonly transform: (value: string | number) => string | 0;
     };
     minHeight: {
-        readonly property: {
-            readonly physical: "minHeight";
-            readonly logical: "minBlockSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "minHeight";
         readonly transform: (value: string | number) => string | 0;
     };
     maxHeight: {
-        readonly property: {
-            readonly physical: "maxHeight";
-            readonly logical: "maxBlockSize";
-        };
-        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
+        readonly property: "maxHeight";
         readonly transform: (value: string | number) => string | 0;
     };
     verticalAlign: {
         readonly property: "verticalAlign";
     };
-    direction: {
-        readonly property: "direction";
-    };
     justifyContent: {
         readonly property: "justifyContent";
     };

package/dist/variance/utils.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import { ThemeProps } from '@codecademy/variance';
-declare const allPropnames: ["mode", "variant", "fontStyle" | "fontWeight" | "fontSize" | "fontFamily" | "lineHeight" | "color" | "background" | "border" | "p" | "alignContent" | "alignItems" | "alignSelf" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "bottom" | "boxShadow" | "columnGap" | "containerType" | "direction" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "listStyleImage" | "listStylePosition" | "listStyleType" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "position" | "right" | "rowGap" | "textAlign" | "textShadow" | "textTransform" | "top" | "verticalAlign" | "whiteSpace" | "width" | "zIndex" | "backgroundPosition" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "inset" | "listStyle" | "overflow" | "textDecoration" | "dimensions" | "textColor" | "bg" | "borderColorX" | "borderColorY" | "borderColorLeft" | "borderColorRight" | "borderColorTop" | "borderColorBottom" | "px" | "py" | "pt" | "pb" | "pr" | "pl" | "m" | "mx" | "my" | "mt" | "mb" | "mr" | "ml" | "borderX" | "borderY" | "borderWidthX" | "borderWidthY" | "borderWidthLeft" | "borderWidthRight" | "borderWidthTop" | "borderWidthBottom" | "borderRadiusLeft" | "borderRadiusTop" | "borderRadiusBottom" | "borderRadiusRight" | "borderRadiusTopLeft" | "borderRadiusTopRight" | "borderRadiusBottomRight" | "borderRadiusBottomLeft" | "borderStyleX" | "borderStyleY" | "borderStyleLeft" | "borderStyleRight" | "borderStyleTop" | "borderStyleBottom"];
+declare const allPropnames: ["mode", "variant", "fontStyle" | "fontWeight" | "fontSize" | "fontFamily" | "lineHeight" | "color" | "background" | "border" | "p" | "alignContent" | "alignItems" | "alignSelf" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "bottom" | "boxShadow" | "columnGap" | "containerType" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "listStyleImage" | "listStylePosition" | "listStyleType" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "position" | "right" | "rowGap" | "textAlign" | "textShadow" | "textTransform" | "top" | "verticalAlign" | "whiteSpace" | "width" | "zIndex" | "backgroundPosition" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "inset" | "listStyle" | "overflow" | "textDecoration" | "dimensions" | "textColor" | "bg" | "borderColorX" | "borderColorY" | "borderColorLeft" | "borderColorRight" | "borderColorTop" | "borderColorBottom" | "px" | "py" | "pt" | "pb" | "pr" | "pl" | "m" | "mx" | "my" | "mt" | "mb" | "mr" | "ml" | "borderX" | "borderY" | "borderWidthX" | "borderWidthY" | "borderWidthLeft" | "borderWidthRight" | "borderWidthTop" | "borderWidthBottom" | "borderRadiusLeft" | "borderRadiusTop" | "borderRadiusBottom" | "borderRadiusRight" | "borderRadiusTopLeft" | "borderRadiusTopRight" | "borderRadiusBottomRight" | "borderRadiusBottomLeft" | "borderStyleX" | "borderStyleY" | "borderStyleLeft" | "borderStyleRight" | "borderStyleTop" | "borderStyleBottom"];
 export type SystemPropNames = (typeof allPropnames)[number];
 export type ElementOrProps = keyof JSX.IntrinsicElements | ThemeProps;
 export type ForwardableProps<El extends ElementOrProps, Additional> = Exclude<El extends keyof JSX.IntrinsicElements ? keyof JSX.IntrinsicElements[El] : keyof Element, Additional | SystemPropNames>;
 export declare function createStyledOptions<El extends ElementOrProps = 'div', Additional extends string = never>(additional?: readonly Additional[]): {
-    shouldForwardProp: (prop: PropertyKey) => prop is Exclude<El extends keyof JSX.IntrinsicElements ? keyof JSX.IntrinsicElements[El] : keyof Element, "fontStyle" | "fontWeight" | "fontSize" | "fontFamily" | "lineHeight" | "color" | "background" | "border" | "mode" | "p" | "alignContent" | "alignItems" | "alignSelf" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "bottom" | "boxShadow" | "columnGap" | "containerType" | "direction" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "listStyleImage" | "listStylePosition" | "listStyleType" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "position" | "right" | "rowGap" | "textAlign" | "textShadow" | "textTransform" | "top" | "verticalAlign" | "whiteSpace" | "width" | "zIndex" | "backgroundPosition" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "inset" | "listStyle" | "overflow" | "textDecoration" | "dimensions" | "textColor" | "bg" | "borderColorX" | "borderColorY" | "borderColorLeft" | "borderColorRight" | "borderColorTop" | "borderColorBottom" | "px" | "py" | "pt" | "pb" | "pr" | "pl" | "m" | "mx" | "my" | "mt" | "mb" | "mr" | "ml" | "borderX" | "borderY" | "borderWidthX" | "borderWidthY" | "borderWidthLeft" | "borderWidthRight" | "borderWidthTop" | "borderWidthBottom" | "borderRadiusLeft" | "borderRadiusTop" | "borderRadiusBottom" | "borderRadiusRight" | "borderRadiusTopLeft" | "borderRadiusTopRight" | "borderRadiusBottomRight" | "borderRadiusBottomLeft" | "borderStyleX" | "borderStyleY" | "borderStyleLeft" | "borderStyleRight" | "borderStyleTop" | "borderStyleBottom" | "variant" | Additional>;
+    shouldForwardProp: (prop: PropertyKey) => prop is Exclude<El extends keyof JSX.IntrinsicElements ? keyof JSX.IntrinsicElements[El] : keyof Element, "fontStyle" | "fontWeight" | "fontSize" | "fontFamily" | "lineHeight" | "color" | "background" | "border" | "mode" | "p" | "alignContent" | "alignItems" | "alignSelf" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "bottom" | "boxShadow" | "columnGap" | "containerType" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "listStyleImage" | "listStylePosition" | "listStyleType" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "position" | "right" | "rowGap" | "textAlign" | "textShadow" | "textTransform" | "top" | "verticalAlign" | "whiteSpace" | "width" | "zIndex" | "backgroundPosition" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "inset" | "listStyle" | "overflow" | "textDecoration" | "dimensions" | "textColor" | "bg" | "borderColorX" | "borderColorY" | "borderColorLeft" | "borderColorRight" | "borderColorTop" | "borderColorBottom" | "px" | "py" | "pt" | "pb" | "pr" | "pl" | "m" | "mx" | "my" | "mt" | "mb" | "mr" | "ml" | "borderX" | "borderY" | "borderWidthX" | "borderWidthY" | "borderWidthLeft" | "borderWidthRight" | "borderWidthTop" | "borderWidthBottom" | "borderRadiusLeft" | "borderRadiusTop" | "borderRadiusBottom" | "borderRadiusRight" | "borderRadiusTopLeft" | "borderRadiusTopRight" | "borderRadiusBottomRight" | "borderRadiusBottomLeft" | "borderStyleX" | "borderStyleY" | "borderStyleLeft" | "borderStyleRight" | "borderStyleTop" | "borderStyleBottom" | "variant" | Additional>;
 };
 /**
  * @description

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "17.12.0-alpha.2d3aae.0",
+  "version": "17.12.0-alpha.2f9b47.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "dependencies": {
-    "@codecademy/variance": "0.25.3-alpha.2d3aae.0",
+    "@codecademy/variance": "0.26.0-alpha.2f9b47.0",
     "@emotion/is-prop-valid": "^1.1.0",
     "polished": "^4.1.2"
   },
@@ -34,5 +34,5 @@
   "scripts": {
     "build": "nx build @codecademy/gamut-styles"
   },
-  "gitHead": "bf1034f5df41d892ef8fd8c5ea2da396a9d2b5ae"
+  "gitHead": "4577f2565a67fc116b56c55ecca9c3e849a90be1"
 }