@codecademy/gamut-styles 17.12.0-alpha.9e53d2.0 → 17.12.0-alpha.b1330b.0

package/dist/ColorMode.d.ts

@@ -60,10 +60,18 @@ export declare const providerProps: import("@codecademy/variance/dist/types/conf
         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";
@@ -302,23 +310,43 @@ export declare const providerProps: import("@codecademy/variance/dist/types/conf
     };
     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: {
@@ -723,7 +751,11 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
         readonly property: "backgroundSize";
     }>;
     bottom?: import("@codecademy/variance/dist/types/config").Scale<{
-        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;
     }>;
     columnGap?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -802,7 +834,11 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
         readonly property: "justifySelf";
     }>;
     left?: import("@codecademy/variance/dist/types/config").Scale<{
-        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;
     }>;
     maxHeight?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -844,16 +880,28 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
         readonly property: "order";
     }>;
     overflowX?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "overflowX";
+        readonly property: {
+            readonly physical: "overflowX";
+            readonly logical: "overflowInline";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     }>;
     overflowY?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "overflowY";
+        readonly property: {
+            readonly physical: "overflowY";
+            readonly logical: "overflowBlock";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     }>;
     position?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "position";
     }>;
     right?: import("@codecademy/variance/dist/types/config").Scale<{
-        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;
     }>;
     rowGap?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -861,7 +909,11 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
         readonly scale: "spacing";
     }>;
     top?: import("@codecademy/variance/dist/types/config").Scale<{
-        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;
     }>;
     verticalAlign?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -945,7 +997,11 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
     }>;
     inset?: import("@codecademy/variance/dist/types/config").Scale<{
         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;
     }>;
     overflow?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -1328,7 +1384,11 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
         readonly property: "backgroundSize";
     }>;
     bottom?: import("@codecademy/variance/dist/types/config").Scale<{
-        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;
     }>;
     columnGap?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -1407,7 +1467,11 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
         readonly property: "justifySelf";
     }>;
     left?: import("@codecademy/variance/dist/types/config").Scale<{
-        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;
     }>;
     maxHeight?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -1449,16 +1513,28 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
         readonly property: "order";
     }>;
     overflowX?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "overflowX";
+        readonly property: {
+            readonly physical: "overflowX";
+            readonly logical: "overflowInline";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     }>;
     overflowY?: import("@codecademy/variance/dist/types/config").Scale<{
-        readonly property: "overflowY";
+        readonly property: {
+            readonly physical: "overflowY";
+            readonly logical: "overflowBlock";
+        };
+        readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
     }>;
     position?: import("@codecademy/variance/dist/types/config").Scale<{
         readonly property: "position";
     }>;
     right?: import("@codecademy/variance/dist/types/config").Scale<{
-        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;
     }>;
     rowGap?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -1466,7 +1542,11 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
         readonly scale: "spacing";
     }>;
     top?: import("@codecademy/variance/dist/types/config").Scale<{
-        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;
     }>;
     verticalAlign?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -1550,7 +1630,11 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
     }>;
     inset?: import("@codecademy/variance/dist/types/config").Scale<{
         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;
     }>;
     overflow?: import("@codecademy/variance/dist/types/config").Scale<{

package/dist/GamutProvider.d.ts

@@ -23,5 +23,10 @@ export interface GamutProviderProps {
 export declare const GamutContext: React.Context<{
     hasGlobals?: boolean | undefined;
     hasCache?: boolean | undefined;
+    nonce?: string | undefined;
 }>;
+/**
+ * Returns the CSP nonce passed to GamutProvider, if any.
+ */
+export declare const useNonce: () => string | undefined;
 export declare const GamutProvider: React.FC<GamutProviderProps>;

package/dist/GamutProvider.js

@@ -1,5 +1,7 @@
 import { CacheProvider, ThemeProvider } from '@emotion/react';
-import { useContext, useRef } from 'react';
+import { MotionConfig } from 'framer-motion';
+import { setNonce } from 'get-nonce';
+import { useContext, useEffect, useMemo, useRef } from 'react';
 import * as React from 'react';
 import { createEmotionCache } from './cache';
 import { Reboot, Typography } from './globals';
@@ -11,6 +13,11 @@ export const GamutContext = /*#__PURE__*/React.createContext({
   hasCache: false
 });
 GamutContext.displayName = 'GamutContext';
+
+/**
+ * Returns the CSP nonce passed to GamutProvider, if any.
+ */
+export const useNonce = () => useContext(GamutContext).nonce;
 export const GamutProvider = ({
   children,
   cache,
@@ -19,7 +26,7 @@ export const GamutProvider = ({
   useGlobals = true,
   useCache = true,
   nonce,
-  useLogicalProperties = true
+  useLogicalProperties = false
 }) => {
   const {
     hasGlobals,
@@ -28,6 +35,13 @@ export const GamutProvider = ({
   const shouldCreateCache = useCache && !hasCache;
   const shouldInsertGlobals = useGlobals && !hasGlobals;
 
+  // Feed nonce to get-nonce singleton so react-style-singleton (e.g. via react-aria-components) can set it on injected style tags for CSP
+  useEffect(() => {
+    if (nonce) {
+      setNonce(nonce);
+    }
+  }, [nonce]);
+
   // Do not initialize a new cache if one has been provided as props
   const activeCache = useRef(shouldCreateCache && (cache ?? createEmotionCache(nonce ? {
     nonce
@@ -35,7 +49,8 @@ export const GamutProvider = ({
   const contextValue = {
     hasGlobals: shouldInsertGlobals,
     hasCache: shouldCreateCache,
-    useLogicalProperties
+    useLogicalProperties,
+    nonce
   };
   const globals = shouldInsertGlobals && /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Typography, {
@@ -49,28 +64,29 @@ export const GamutProvider = ({
     })]
   });
 
-  // Merge useLogicalProperties into theme so variance can access it via props.theme
-  const themeWithLogicalProperties = {
+  // Merge useLogicalProperties into theme so variance can access it via props.theme.
+  const themeWithLogicalProperties = useMemo(() => ({
     ...theme,
     useLogicalProperties
-  };
+  }), [theme, useLogicalProperties]);
+  const content = useMemo(() => /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: themeWithLogicalProperties,
+    children: nonce ? /*#__PURE__*/_jsx(MotionConfig, {
+      nonce: nonce,
+      children: children
+    }) : children
+  }), [themeWithLogicalProperties, nonce, children]);
   if (activeCache.current) {
     return /*#__PURE__*/_jsx(GamutContext.Provider, {
       value: contextValue,
       children: /*#__PURE__*/_jsxs(CacheProvider, {
         value: activeCache.current,
-        children: [globals, /*#__PURE__*/_jsx(ThemeProvider, {
-          theme: themeWithLogicalProperties,
-          children: children
-        })]
+        children: [globals, content]
       })
     });
   }
   return /*#__PURE__*/_jsxs(GamutContext.Provider, {
     value: contextValue,
-    children: [globals, /*#__PURE__*/_jsx(ThemeProvider, {
-      theme: themeWithLogicalProperties,
-      children: children
-    })]
+    children: [globals, content]
   });
 };

package/dist/variance/config.d.ts

@@ -414,23 +414,43 @@ export declare const positioning: {
     };
     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: {
@@ -498,10 +518,18 @@ export declare const layout: {
         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";
@@ -1146,23 +1174,43 @@ export declare const all: {
     };
     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: {
@@ -1220,10 +1268,18 @@ export declare const all: {
         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";

package/dist/variance/config.js

@@ -411,23 +411,43 @@ export const positioning = {
   },
   inset: {
     property: 'inset',
-    properties: ['top', 'right', 'bottom', 'left'],
+    properties: {
+      physical: ['top', 'right', 'bottom', 'left'],
+      logical: ['insetBlockStart', 'insetInlineEnd', 'insetBlockEnd', 'insetInlineStart']
+    },
+    resolveProperty: getPropertyMode,
     transform: transformSize
   },
   top: {
-    property: 'top',
+    property: {
+      physical: 'top',
+      logical: 'insetBlockStart'
+    },
+    resolveProperty: getPropertyMode,
     transform: transformSize
   },
   right: {
-    property: 'right',
+    property: {
+      physical: 'right',
+      logical: 'insetInlineEnd'
+    },
+    resolveProperty: getPropertyMode,
     transform: transformSize
   },
   bottom: {
-    property: 'bottom',
+    property: {
+      physical: 'bottom',
+      logical: 'insetBlockEnd'
+    },
+    resolveProperty: getPropertyMode,
     transform: transformSize
   },
   left: {
-    property: 'left',
+    property: {
+      physical: 'left',
+      logical: 'insetInlineStart'
+    },
+    resolveProperty: getPropertyMode,
     transform: transformSize
   },
   zIndex: {
@@ -456,10 +476,18 @@ export const layout = {
     property: 'overflow'
   },
   overflowX: {
-    property: 'overflowX'
+    property: {
+      physical: 'overflowX',
+      logical: 'overflowInline'
+    },
+    resolveProperty: getPropertyMode
   },
   overflowY: {
-    property: 'overflowY'
+    property: {
+      physical: 'overflowY',
+      logical: 'overflowBlock'
+    },
+    resolveProperty: getPropertyMode
   },
   dimensions: {
     property: 'width',

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";
@@ -275,23 +283,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: {
@@ -1149,23 +1177,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: {
@@ -1223,10 +1271,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";
@@ -1798,23 +1854,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: {
@@ -1872,10 +1948,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";
@@ -2447,23 +2531,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: {
@@ -2521,10 +2625,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";

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "17.12.0-alpha.9e53d2.0",
+  "version": "17.12.0-alpha.b1330b.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "dependencies": {
-    "@codecademy/variance": "0.26.0-alpha.9e53d2.0",
+    "@codecademy/variance": "0.26.0-alpha.b1330b.0",
     "@emotion/is-prop-valid": "^1.1.0",
+    "framer-motion": "^11.18.0",
+    "get-nonce": "^1.0.0",
     "polished": "^4.1.2"
   },
   "files": [
@@ -34,5 +36,5 @@
   "scripts": {
     "build": "nx build @codecademy/gamut-styles"
   },
-  "gitHead": "cb848b578a24ad4b3657640f469ca68e179c95b7"
+  "gitHead": "b012e40f2554976dd9ec77add1d64d60a9f5ca62"
 }