@codecademy/gamut-styles 17.12.0-alpha.f9ca97.0 → 17.12.1-alpha.27bc7c.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/Background.d.ts +10 -1
  2. package/dist/Background.js +9 -1
  3. package/dist/ColorMode.d.ts +116 -23
  4. package/dist/GamutProvider.d.ts +5 -0
  5. package/dist/GamutProvider.js +30 -14
  6. package/dist/variance/config.d.ts +76 -14
  7. package/dist/variance/config.js +38 -7
  8. package/dist/variance/props.d.ts +152 -28
  9. package/dist/variance/utils.d.ts +3 -3
  10. package/package.json +6 -4
package/dist/Background.d.ts CHANGED
@@ -1,6 +1,15 @@
1
1
  import { ComponentProps } from 'react';
2
- import { ColorMode, Colors } from './ColorMode';
2
+ import { ColorMode, ColorModeShape, Colors } from './ColorMode';
3
3
  export interface BackgroundProps extends Omit<ComponentProps<typeof ColorMode>, 'mode' | 'alwaysSetVariables' | 'bg'> {
4
4
  bg: Colors;
5
5
  }
6
+ /**
7
+ * Type guard that checks whether a color is a semantic alias in the given mode
8
+ * (e.g. "text", "primary") rather than a raw theme color key.
9
+ *
10
+ * @param mode - The color mode shape to check against
11
+ * @param color - The color key to test
12
+ * @returns True if `color` is a key in `mode` (i.e. a ColorAlias)
13
+ */
14
+ export declare const isColorAlias: (mode: ColorModeShape, color: Colors) => color is "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-accent" | "text-disabled" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "shadow-secondary" | "shadow-primary" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary";
6
15
  export declare const Background: import("react").ForwardRefExoticComponent<Omit<BackgroundProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
package/dist/Background.js CHANGED
@@ -2,7 +2,15 @@ import { getContrast } from 'polished';
2
2
  import { forwardRef, useCallback, useMemo } from 'react';
3
3
  import { ColorMode, useColorModes } from './ColorMode';
4
4
  import { jsx as _jsx } from "react/jsx-runtime";
5
- const isColorAlias = (mode, color) => {
5
+ /**
6
+ * Type guard that checks whether a color is a semantic alias in the given mode
7
+ * (e.g. "text", "primary") rather than a raw theme color key.
8
+ *
9
+ * @param mode - The color mode shape to check against
10
+ * @param color - The color key to test
11
+ * @returns True if `color` is a key in `mode` (i.e. a ColorAlias)
12
+ */
13
+ export const isColorAlias = (mode, color) => {
6
14
  return Object.keys(mode).includes(color);
7
15
  };
8
16
  export const Background = /*#__PURE__*/forwardRef(({
package/dist/ColorMode.d.ts CHANGED
@@ -75,36 +75,67 @@ export declare const providerProps: import("@codecademy/variance/dist/types/conf
75
75
  };
76
76
  readonly dimensions: {
77
77
  readonly property: "width";
78
- readonly properties: readonly ["width", "height"];
78
+ readonly properties: {
79
+ readonly physical: readonly ["width", "height"];
80
+ readonly logical: readonly ["inlineSize", "blockSize"];
81
+ };
82
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
79
83
  readonly transform: (value: string | number) => string | 0;
80
84
  };
81
85
  readonly width: {
82
- readonly property: "width";
86
+ readonly property: {
87
+ readonly physical: "width";
88
+ readonly logical: "inlineSize";
89
+ };
90
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
83
91
  readonly transform: (value: string | number) => string | 0;
84
92
  };
85
93
  readonly minWidth: {
86
- readonly property: "minWidth";
94
+ readonly property: {
95
+ readonly physical: "minWidth";
96
+ readonly logical: "minInlineSize";
97
+ };
98
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
87
99
  readonly transform: (value: string | number) => string | 0;
88
100
  };
89
101
  readonly maxWidth: {
90
- readonly property: "maxWidth";
102
+ readonly property: {
103
+ readonly physical: "maxWidth";
104
+ readonly logical: "maxInlineSize";
105
+ };
106
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
91
107
  readonly transform: (value: string | number) => string | 0;
92
108
  };
93
109
  readonly height: {
94
- readonly property: "height";
110
+ readonly property: {
111
+ readonly physical: "height";
112
+ readonly logical: "blockSize";
113
+ };
114
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
95
115
  readonly transform: (value: string | number) => string | 0;
96
116
  };
97
117
  readonly minHeight: {
98
- readonly property: "minHeight";
118
+ readonly property: {
119
+ readonly physical: "minHeight";
120
+ readonly logical: "minBlockSize";
121
+ };
122
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
99
123
  readonly transform: (value: string | number) => string | 0;
100
124
  };
101
125
  readonly maxHeight: {
102
- readonly property: "maxHeight";
126
+ readonly property: {
127
+ readonly physical: "maxHeight";
128
+ readonly logical: "maxBlockSize";
129
+ };
130
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
103
131
  readonly transform: (value: string | number) => string | 0;
104
132
  };
105
133
  readonly verticalAlign: {
106
134
  readonly property: "verticalAlign";
107
135
  };
136
+ readonly direction: {
137
+ readonly property: "direction";
138
+ };
108
139
  }>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
109
140
  readonly color: {
110
141
  readonly property: "color";
@@ -734,6 +765,9 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
734
765
  containerType?: import("@codecademy/variance/dist/types/config").Scale<{
735
766
  readonly property: "containerType";
736
767
  }>;
768
+ direction?: import("@codecademy/variance/dist/types/config").Scale<{
769
+ readonly property: "direction";
770
+ }>;
737
771
  display?: import("@codecademy/variance/dist/types/config").Scale<{
738
772
  readonly property: "display";
739
773
  }>;
@@ -783,7 +817,11 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
783
817
  readonly property: "gridTemplateRows";
784
818
  }>;
785
819
  height?: import("@codecademy/variance/dist/types/config").Scale<{
786
- readonly property: "height";
820
+ readonly property: {
821
+ readonly physical: "height";
822
+ readonly logical: "blockSize";
823
+ };
824
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
787
825
  readonly transform: (value: string | number) => string | 0;
788
826
  }>;
789
827
  justifyContent?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -804,19 +842,35 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
804
842
  readonly transform: (value: string | number) => string | 0;
805
843
  }>;
806
844
  maxHeight?: import("@codecademy/variance/dist/types/config").Scale<{
807
- readonly property: "maxHeight";
845
+ readonly property: {
846
+ readonly physical: "maxHeight";
847
+ readonly logical: "maxBlockSize";
848
+ };
849
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
808
850
  readonly transform: (value: string | number) => string | 0;
809
851
  }>;
810
852
  maxWidth?: import("@codecademy/variance/dist/types/config").Scale<{
811
- readonly property: "maxWidth";
853
+ readonly property: {
854
+ readonly physical: "maxWidth";
855
+ readonly logical: "maxInlineSize";
856
+ };
857
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
812
858
  readonly transform: (value: string | number) => string | 0;
813
859
  }>;
814
860
  minHeight?: import("@codecademy/variance/dist/types/config").Scale<{
815
- readonly property: "minHeight";
861
+ readonly property: {
862
+ readonly physical: "minHeight";
863
+ readonly logical: "minBlockSize";
864
+ };
865
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
816
866
  readonly transform: (value: string | number) => string | 0;
817
867
  }>;
818
868
  minWidth?: import("@codecademy/variance/dist/types/config").Scale<{
819
- readonly property: "minWidth";
869
+ readonly property: {
870
+ readonly physical: "minWidth";
871
+ readonly logical: "minInlineSize";
872
+ };
873
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
820
874
  readonly transform: (value: string | number) => string | 0;
821
875
  }>;
822
876
  opacity?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -866,7 +920,11 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
866
920
  readonly property: "verticalAlign";
867
921
  }>;
868
922
  width?: import("@codecademy/variance/dist/types/config").Scale<{
869
- readonly property: "width";
923
+ readonly property: {
924
+ readonly physical: "width";
925
+ readonly logical: "inlineSize";
926
+ };
927
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
870
928
  readonly transform: (value: string | number) => string | 0;
871
929
  }>;
872
930
  zIndex?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -951,7 +1009,11 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
951
1009
  }>;
952
1010
  dimensions?: import("@codecademy/variance/dist/types/config").Scale<{
953
1011
  readonly property: "width";
954
- readonly properties: readonly ["width", "height"];
1012
+ readonly properties: {
1013
+ readonly physical: readonly ["width", "height"];
1014
+ readonly logical: readonly ["inlineSize", "blockSize"];
1015
+ };
1016
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
955
1017
  readonly transform: (value: string | number) => string | 0;
956
1018
  }>;
957
1019
  textColor?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -1283,7 +1345,7 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
1283
1345
  } & {
1284
1346
  variables?: CSSObject | undefined;
1285
1347
  alwaysSetVariables?: boolean | undefined;
1286
- }, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "property" | "rel" | "slot" | "title" | "rev" | "id" | "nonce" | "content" | "translate" | "children" | "className" | "prefix" | "role" | "suppressHydrationWarning" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | keyof import("react").ClassAttributes<HTMLDivElement>>, {}>;
1348
+ }, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "property" | "rel" | "slot" | "title" | "rev" | "id" | "nonce" | "content" | "translate" | "children" | "className" | "part" | "prefix" | "role" | "suppressHydrationWarning" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | keyof import("react").ClassAttributes<HTMLDivElement>>, {}>;
1287
1349
  export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<Omit<{
1288
1350
  theme?: Theme | undefined;
1289
1351
  as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
@@ -1336,6 +1398,9 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
1336
1398
  containerType?: import("@codecademy/variance/dist/types/config").Scale<{
1337
1399
  readonly property: "containerType";
1338
1400
  }>;
1401
+ direction?: import("@codecademy/variance/dist/types/config").Scale<{
1402
+ readonly property: "direction";
1403
+ }>;
1339
1404
  display?: import("@codecademy/variance/dist/types/config").Scale<{
1340
1405
  readonly property: "display";
1341
1406
  }>;
@@ -1385,7 +1450,11 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
1385
1450
  readonly property: "gridTemplateRows";
1386
1451
  }>;
1387
1452
  height?: import("@codecademy/variance/dist/types/config").Scale<{
1388
- readonly property: "height";
1453
+ readonly property: {
1454
+ readonly physical: "height";
1455
+ readonly logical: "blockSize";
1456
+ };
1457
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1389
1458
  readonly transform: (value: string | number) => string | 0;
1390
1459
  }>;
1391
1460
  justifyContent?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -1406,19 +1475,35 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
1406
1475
  readonly transform: (value: string | number) => string | 0;
1407
1476
  }>;
1408
1477
  maxHeight?: import("@codecademy/variance/dist/types/config").Scale<{
1409
- readonly property: "maxHeight";
1478
+ readonly property: {
1479
+ readonly physical: "maxHeight";
1480
+ readonly logical: "maxBlockSize";
1481
+ };
1482
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1410
1483
  readonly transform: (value: string | number) => string | 0;
1411
1484
  }>;
1412
1485
  maxWidth?: import("@codecademy/variance/dist/types/config").Scale<{
1413
- readonly property: "maxWidth";
1486
+ readonly property: {
1487
+ readonly physical: "maxWidth";
1488
+ readonly logical: "maxInlineSize";
1489
+ };
1490
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1414
1491
  readonly transform: (value: string | number) => string | 0;
1415
1492
  }>;
1416
1493
  minHeight?: import("@codecademy/variance/dist/types/config").Scale<{
1417
- readonly property: "minHeight";
1494
+ readonly property: {
1495
+ readonly physical: "minHeight";
1496
+ readonly logical: "minBlockSize";
1497
+ };
1498
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1418
1499
  readonly transform: (value: string | number) => string | 0;
1419
1500
  }>;
1420
1501
  minWidth?: import("@codecademy/variance/dist/types/config").Scale<{
1421
- readonly property: "minWidth";
1502
+ readonly property: {
1503
+ readonly physical: "minWidth";
1504
+ readonly logical: "minInlineSize";
1505
+ };
1506
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1422
1507
  readonly transform: (value: string | number) => string | 0;
1423
1508
  }>;
1424
1509
  opacity?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -1468,7 +1553,11 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
1468
1553
  readonly property: "verticalAlign";
1469
1554
  }>;
1470
1555
  width?: import("@codecademy/variance/dist/types/config").Scale<{
1471
- readonly property: "width";
1556
+ readonly property: {
1557
+ readonly physical: "width";
1558
+ readonly logical: "inlineSize";
1559
+ };
1560
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1472
1561
  readonly transform: (value: string | number) => string | 0;
1473
1562
  }>;
1474
1563
  zIndex?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -1553,7 +1642,11 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
1553
1642
  }>;
1554
1643
  dimensions?: import("@codecademy/variance/dist/types/config").Scale<{
1555
1644
  readonly property: "width";
1556
- readonly properties: readonly ["width", "height"];
1645
+ readonly properties: {
1646
+ readonly physical: readonly ["width", "height"];
1647
+ readonly logical: readonly ["inlineSize", "blockSize"];
1648
+ };
1649
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1557
1650
  readonly transform: (value: string | number) => string | 0;
1558
1651
  }>;
1559
1652
  textColor?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -1885,4 +1978,4 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
1885
1978
  } & {
1886
1979
  variables?: CSSObject | undefined;
1887
1980
  alwaysSetVariables?: boolean | undefined;
1888
- } & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "property" | "rel" | "slot" | "title" | "rev" | "id" | "nonce" | "content" | "translate" | "children" | "className" | "prefix" | "role" | "suppressHydrationWarning" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | keyof import("react").ClassAttributes<HTMLDivElement>>, "bg"> & ColorModeProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
1981
+ } & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "property" | "rel" | "slot" | "title" | "rev" | "id" | "nonce" | "content" | "translate" | "children" | "className" | "part" | "prefix" | "role" | "suppressHydrationWarning" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | keyof import("react").ClassAttributes<HTMLDivElement>>, "bg"> & ColorModeProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
package/dist/GamutProvider.d.ts CHANGED
@@ -23,5 +23,10 @@ export interface GamutProviderProps {
23
23
  export declare const GamutContext: React.Context<{
24
24
  hasGlobals?: boolean | undefined;
25
25
  hasCache?: boolean | undefined;
26
+ nonce?: string | undefined;
26
27
  }>;
28
+ /**
29
+ * Returns the CSP nonce passed to GamutProvider, if any.
30
+ */
31
+ export declare const useNonce: () => string | undefined;
27
32
  export declare const GamutProvider: React.FC<GamutProviderProps>;
package/dist/GamutProvider.js CHANGED
@@ -1,5 +1,7 @@
1
1
  import { CacheProvider, ThemeProvider } from '@emotion/react';
2
- import { useContext, useRef } from 'react';
2
+ import { MotionConfig } from 'framer-motion';
3
+ import { setNonce } from 'get-nonce';
4
+ import { useContext, useEffect, useMemo, useRef } from 'react';
3
5
  import * as React from 'react';
4
6
  import { createEmotionCache } from './cache';
5
7
  import { Reboot, Typography } from './globals';
@@ -11,6 +13,11 @@ export const GamutContext = /*#__PURE__*/React.createContext({
11
13
  hasCache: false
12
14
  });
13
15
  GamutContext.displayName = 'GamutContext';
16
+
17
+ /**
18
+ * Returns the CSP nonce passed to GamutProvider, if any.
19
+ */
20
+ export const useNonce = () => useContext(GamutContext).nonce;
14
21
  export const GamutProvider = ({
15
22
  children,
16
23
  cache,
@@ -19,7 +26,7 @@ export const GamutProvider = ({
19
26
  useGlobals = true,
20
27
  useCache = true,
21
28
  nonce,
22
- useLogicalProperties = true
29
+ useLogicalProperties = false
23
30
  }) => {
24
31
  const {
25
32
  hasGlobals,
@@ -28,6 +35,13 @@ export const GamutProvider = ({
28
35
  const shouldCreateCache = useCache && !hasCache;
29
36
  const shouldInsertGlobals = useGlobals && !hasGlobals;
30
37
 
38
+ // 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
39
+ useEffect(() => {
40
+ if (nonce) {
41
+ setNonce(nonce);
42
+ }
43
+ }, [nonce]);
44
+
31
45
  // Do not initialize a new cache if one has been provided as props
32
46
  const activeCache = useRef(shouldCreateCache && (cache ?? createEmotionCache(nonce ? {
33
47
  nonce
@@ -35,7 +49,8 @@ export const GamutProvider = ({
35
49
  const contextValue = {
36
50
  hasGlobals: shouldInsertGlobals,
37
51
  hasCache: shouldCreateCache,
38
- useLogicalProperties
52
+ useLogicalProperties,
53
+ nonce
39
54
  };
40
55
  const globals = shouldInsertGlobals && /*#__PURE__*/_jsxs(_Fragment, {
41
56
  children: [/*#__PURE__*/_jsx(Typography, {
@@ -49,28 +64,29 @@ export const GamutProvider = ({
49
64
  })]
50
65
  });
51
66
 
52
- // Merge useLogicalProperties into theme so variance can access it via props.theme
53
- const themeWithLogicalProperties = {
67
+ // Merge useLogicalProperties into theme so variance can access it via props.theme.
68
+ const themeWithLogicalProperties = useMemo(() => ({
54
69
  ...theme,
55
70
  useLogicalProperties
56
- };
71
+ }), [theme, useLogicalProperties]);
72
+ const content = useMemo(() => /*#__PURE__*/_jsx(ThemeProvider, {
73
+ theme: themeWithLogicalProperties,
74
+ children: nonce ? /*#__PURE__*/_jsx(MotionConfig, {
75
+ nonce: nonce,
76
+ children: children
77
+ }) : children
78
+ }), [themeWithLogicalProperties, nonce, children]);
57
79
  if (activeCache.current) {
58
80
  return /*#__PURE__*/_jsx(GamutContext.Provider, {
59
81
  value: contextValue,
60
82
  children: /*#__PURE__*/_jsxs(CacheProvider, {
61
83
  value: activeCache.current,
62
- children: [globals, /*#__PURE__*/_jsx(ThemeProvider, {
63
- theme: themeWithLogicalProperties,
64
- children: children
65
- })]
84
+ children: [globals, content]
66
85
  })
67
86
  });
68
87
  }
69
88
  return /*#__PURE__*/_jsxs(GamutContext.Provider, {
70
89
  value: contextValue,
71
- children: [globals, /*#__PURE__*/_jsx(ThemeProvider, {
72
- theme: themeWithLogicalProperties,
73
- children: children
74
- })]
90
+ children: [globals, content]
75
91
  });
76
92
  };
package/dist/variance/config.d.ts CHANGED
@@ -533,36 +533,67 @@ export declare const layout: {
533
533
  };
534
534
  readonly dimensions: {
535
535
  readonly property: "width";
536
- readonly properties: readonly ["width", "height"];
536
+ readonly properties: {
537
+ readonly physical: readonly ["width", "height"];
538
+ readonly logical: readonly ["inlineSize", "blockSize"];
539
+ };
540
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
537
541
  readonly transform: (value: string | number) => string | 0;
538
542
  };
539
543
  readonly width: {
540
- readonly property: "width";
544
+ readonly property: {
545
+ readonly physical: "width";
546
+ readonly logical: "inlineSize";
547
+ };
548
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
541
549
  readonly transform: (value: string | number) => string | 0;
542
550
  };
543
551
  readonly minWidth: {
544
- readonly property: "minWidth";
552
+ readonly property: {
553
+ readonly physical: "minWidth";
554
+ readonly logical: "minInlineSize";
555
+ };
556
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
545
557
  readonly transform: (value: string | number) => string | 0;
546
558
  };
547
559
  readonly maxWidth: {
548
- readonly property: "maxWidth";
560
+ readonly property: {
561
+ readonly physical: "maxWidth";
562
+ readonly logical: "maxInlineSize";
563
+ };
564
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
549
565
  readonly transform: (value: string | number) => string | 0;
550
566
  };
551
567
  readonly height: {
552
- readonly property: "height";
568
+ readonly property: {
569
+ readonly physical: "height";
570
+ readonly logical: "blockSize";
571
+ };
572
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
553
573
  readonly transform: (value: string | number) => string | 0;
554
574
  };
555
575
  readonly minHeight: {
556
- readonly property: "minHeight";
576
+ readonly property: {
577
+ readonly physical: "minHeight";
578
+ readonly logical: "minBlockSize";
579
+ };
580
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
557
581
  readonly transform: (value: string | number) => string | 0;
558
582
  };
559
583
  readonly maxHeight: {
560
- readonly property: "maxHeight";
584
+ readonly property: {
585
+ readonly physical: "maxHeight";
586
+ readonly logical: "maxBlockSize";
587
+ };
588
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
561
589
  readonly transform: (value: string | number) => string | 0;
562
590
  };
563
591
  readonly verticalAlign: {
564
592
  readonly property: "verticalAlign";
565
593
  };
594
+ readonly direction: {
595
+ readonly property: "direction";
596
+ };
566
597
  };
567
598
  export declare const list: {
568
599
  readonly listStyle: {
@@ -1252,36 +1283,67 @@ export declare const all: {
1252
1283
  };
1253
1284
  dimensions: {
1254
1285
  readonly property: "width";
1255
- readonly properties: readonly ["width", "height"];
1286
+ readonly properties: {
1287
+ readonly physical: readonly ["width", "height"];
1288
+ readonly logical: readonly ["inlineSize", "blockSize"];
1289
+ };
1290
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1256
1291
  readonly transform: (value: string | number) => string | 0;
1257
1292
  };
1258
1293
  width: {
1259
- readonly property: "width";
1294
+ readonly property: {
1295
+ readonly physical: "width";
1296
+ readonly logical: "inlineSize";
1297
+ };
1298
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1260
1299
  readonly transform: (value: string | number) => string | 0;
1261
1300
  };
1262
1301
  minWidth: {
1263
- readonly property: "minWidth";
1302
+ readonly property: {
1303
+ readonly physical: "minWidth";
1304
+ readonly logical: "minInlineSize";
1305
+ };
1306
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1264
1307
  readonly transform: (value: string | number) => string | 0;
1265
1308
  };
1266
1309
  maxWidth: {
1267
- readonly property: "maxWidth";
1310
+ readonly property: {
1311
+ readonly physical: "maxWidth";
1312
+ readonly logical: "maxInlineSize";
1313
+ };
1314
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1268
1315
  readonly transform: (value: string | number) => string | 0;
1269
1316
  };
1270
1317
  height: {
1271
- readonly property: "height";
1318
+ readonly property: {
1319
+ readonly physical: "height";
1320
+ readonly logical: "blockSize";
1321
+ };
1322
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1272
1323
  readonly transform: (value: string | number) => string | 0;
1273
1324
  };
1274
1325
  minHeight: {
1275
- readonly property: "minHeight";
1326
+ readonly property: {
1327
+ readonly physical: "minHeight";
1328
+ readonly logical: "minBlockSize";
1329
+ };
1330
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1276
1331
  readonly transform: (value: string | number) => string | 0;
1277
1332
  };
1278
1333
  maxHeight: {
1279
- readonly property: "maxHeight";
1334
+ readonly property: {
1335
+ readonly physical: "maxHeight";
1336
+ readonly logical: "maxBlockSize";
1337
+ };
1338
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1280
1339
  readonly transform: (value: string | number) => string | 0;
1281
1340
  };
1282
1341
  verticalAlign: {
1283
1342
  readonly property: "verticalAlign";
1284
1343
  };
1344
+ direction: {
1345
+ readonly property: "direction";
1346
+ };
1285
1347
  justifyContent: {
1286
1348
  readonly property: "justifyContent";
1287
1349
  };
package/dist/variance/config.js CHANGED
@@ -491,36 +491,67 @@ export const layout = {
491
491
  },
492
492
  dimensions: {
493
493
  property: 'width',
494
- properties: ['width', 'height'],
494
+ properties: {
495
+ physical: ['width', 'height'],
496
+ logical: ['inlineSize', 'blockSize']
497
+ },
498
+ resolveProperty: getPropertyMode,
495
499
  transform: transformSize
496
500
  },
497
501
  width: {
498
- property: 'width',
502
+ property: {
503
+ physical: 'width',
504
+ logical: 'inlineSize'
505
+ },
506
+ resolveProperty: getPropertyMode,
499
507
  transform: transformSize
500
508
  },
501
509
  minWidth: {
502
- property: 'minWidth',
510
+ property: {
511
+ physical: 'minWidth',
512
+ logical: 'minInlineSize'
513
+ },
514
+ resolveProperty: getPropertyMode,
503
515
  transform: transformSize
504
516
  },
505
517
  maxWidth: {
506
- property: 'maxWidth',
518
+ property: {
519
+ physical: 'maxWidth',
520
+ logical: 'maxInlineSize'
521
+ },
522
+ resolveProperty: getPropertyMode,
507
523
  transform: transformSize
508
524
  },
509
525
  height: {
510
- property: 'height',
526
+ property: {
527
+ physical: 'height',
528
+ logical: 'blockSize'
529
+ },
530
+ resolveProperty: getPropertyMode,
511
531
  transform: transformSize
512
532
  },
513
533
  minHeight: {
514
- property: 'minHeight',
534
+ property: {
535
+ physical: 'minHeight',
536
+ logical: 'minBlockSize'
537
+ },
538
+ resolveProperty: getPropertyMode,
515
539
  transform: transformSize
516
540
  },
517
541
  maxHeight: {
518
- property: 'maxHeight',
542
+ property: {
543
+ physical: 'maxHeight',
544
+ logical: 'maxBlockSize'
545
+ },
546
+ resolveProperty: getPropertyMode,
519
547
  transform: transformSize
520
548
  },
521
549
  verticalAlign: {
522
550
  property: 'verticalAlign'
523
551
  },
552
+ direction: {
553
+ property: 'direction'
554
+ },
524
555
  ...selfAlignments,
525
556
  ...gridItems,
526
557
  ...flexItems
package/dist/variance/props.d.ts CHANGED
@@ -215,36 +215,67 @@ export declare const layout: import("@codecademy/variance/dist/types/config").Pa
215
215
  };
216
216
  readonly dimensions: {
217
217
  readonly property: "width";
218
- readonly properties: readonly ["width", "height"];
218
+ readonly properties: {
219
+ readonly physical: readonly ["width", "height"];
220
+ readonly logical: readonly ["inlineSize", "blockSize"];
221
+ };
222
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
219
223
  readonly transform: (value: string | number) => string | 0;
220
224
  };
221
225
  readonly width: {
222
- readonly property: "width";
226
+ readonly property: {
227
+ readonly physical: "width";
228
+ readonly logical: "inlineSize";
229
+ };
230
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
223
231
  readonly transform: (value: string | number) => string | 0;
224
232
  };
225
233
  readonly minWidth: {
226
- readonly property: "minWidth";
234
+ readonly property: {
235
+ readonly physical: "minWidth";
236
+ readonly logical: "minInlineSize";
237
+ };
238
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
227
239
  readonly transform: (value: string | number) => string | 0;
228
240
  };
229
241
  readonly maxWidth: {
230
- readonly property: "maxWidth";
242
+ readonly property: {
243
+ readonly physical: "maxWidth";
244
+ readonly logical: "maxInlineSize";
245
+ };
246
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
231
247
  readonly transform: (value: string | number) => string | 0;
232
248
  };
233
249
  readonly height: {
234
- readonly property: "height";
250
+ readonly property: {
251
+ readonly physical: "height";
252
+ readonly logical: "blockSize";
253
+ };
254
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
235
255
  readonly transform: (value: string | number) => string | 0;
236
256
  };
237
257
  readonly minHeight: {
238
- readonly property: "minHeight";
258
+ readonly property: {
259
+ readonly physical: "minHeight";
260
+ readonly logical: "minBlockSize";
261
+ };
262
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
239
263
  readonly transform: (value: string | number) => string | 0;
240
264
  };
241
265
  readonly maxHeight: {
242
- readonly property: "maxHeight";
266
+ readonly property: {
267
+ readonly physical: "maxHeight";
268
+ readonly logical: "maxBlockSize";
269
+ };
270
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
243
271
  readonly transform: (value: string | number) => string | 0;
244
272
  };
245
273
  readonly verticalAlign: {
246
274
  readonly property: "verticalAlign";
247
275
  };
276
+ readonly direction: {
277
+ readonly property: "direction";
278
+ };
248
279
  }>>;
249
280
  export declare const positioning: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
250
281
  readonly position: {
@@ -1255,36 +1286,67 @@ export declare const css: import("@codecademy/variance/dist/types/config").CSS<i
1255
1286
  };
1256
1287
  dimensions: {
1257
1288
  readonly property: "width";
1258
- readonly properties: readonly ["width", "height"];
1289
+ readonly properties: {
1290
+ readonly physical: readonly ["width", "height"];
1291
+ readonly logical: readonly ["inlineSize", "blockSize"];
1292
+ };
1293
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1259
1294
  readonly transform: (value: string | number) => string | 0;
1260
1295
  };
1261
1296
  width: {
1262
- readonly property: "width";
1297
+ readonly property: {
1298
+ readonly physical: "width";
1299
+ readonly logical: "inlineSize";
1300
+ };
1301
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1263
1302
  readonly transform: (value: string | number) => string | 0;
1264
1303
  };
1265
1304
  minWidth: {
1266
- readonly property: "minWidth";
1305
+ readonly property: {
1306
+ readonly physical: "minWidth";
1307
+ readonly logical: "minInlineSize";
1308
+ };
1309
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1267
1310
  readonly transform: (value: string | number) => string | 0;
1268
1311
  };
1269
1312
  maxWidth: {
1270
- readonly property: "maxWidth";
1313
+ readonly property: {
1314
+ readonly physical: "maxWidth";
1315
+ readonly logical: "maxInlineSize";
1316
+ };
1317
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1271
1318
  readonly transform: (value: string | number) => string | 0;
1272
1319
  };
1273
1320
  height: {
1274
- readonly property: "height";
1321
+ readonly property: {
1322
+ readonly physical: "height";
1323
+ readonly logical: "blockSize";
1324
+ };
1325
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1275
1326
  readonly transform: (value: string | number) => string | 0;
1276
1327
  };
1277
1328
  minHeight: {
1278
- readonly property: "minHeight";
1329
+ readonly property: {
1330
+ readonly physical: "minHeight";
1331
+ readonly logical: "minBlockSize";
1332
+ };
1333
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1279
1334
  readonly transform: (value: string | number) => string | 0;
1280
1335
  };
1281
1336
  maxHeight: {
1282
- readonly property: "maxHeight";
1337
+ readonly property: {
1338
+ readonly physical: "maxHeight";
1339
+ readonly logical: "maxBlockSize";
1340
+ };
1341
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1283
1342
  readonly transform: (value: string | number) => string | 0;
1284
1343
  };
1285
1344
  verticalAlign: {
1286
1345
  readonly property: "verticalAlign";
1287
1346
  };
1347
+ direction: {
1348
+ readonly property: "direction";
1349
+ };
1288
1350
  justifyContent: {
1289
1351
  readonly property: "justifyContent";
1290
1352
  };
@@ -1901,36 +1963,67 @@ export declare const variant: import("@codecademy/variance/dist/types/config").V
1901
1963
  };
1902
1964
  dimensions: {
1903
1965
  readonly property: "width";
1904
- readonly properties: readonly ["width", "height"];
1966
+ readonly properties: {
1967
+ readonly physical: readonly ["width", "height"];
1968
+ readonly logical: readonly ["inlineSize", "blockSize"];
1969
+ };
1970
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1905
1971
  readonly transform: (value: string | number) => string | 0;
1906
1972
  };
1907
1973
  width: {
1908
- readonly property: "width";
1974
+ readonly property: {
1975
+ readonly physical: "width";
1976
+ readonly logical: "inlineSize";
1977
+ };
1978
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1909
1979
  readonly transform: (value: string | number) => string | 0;
1910
1980
  };
1911
1981
  minWidth: {
1912
- readonly property: "minWidth";
1982
+ readonly property: {
1983
+ readonly physical: "minWidth";
1984
+ readonly logical: "minInlineSize";
1985
+ };
1986
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1913
1987
  readonly transform: (value: string | number) => string | 0;
1914
1988
  };
1915
1989
  maxWidth: {
1916
- readonly property: "maxWidth";
1990
+ readonly property: {
1991
+ readonly physical: "maxWidth";
1992
+ readonly logical: "maxInlineSize";
1993
+ };
1994
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1917
1995
  readonly transform: (value: string | number) => string | 0;
1918
1996
  };
1919
1997
  height: {
1920
- readonly property: "height";
1998
+ readonly property: {
1999
+ readonly physical: "height";
2000
+ readonly logical: "blockSize";
2001
+ };
2002
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1921
2003
  readonly transform: (value: string | number) => string | 0;
1922
2004
  };
1923
2005
  minHeight: {
1924
- readonly property: "minHeight";
2006
+ readonly property: {
2007
+ readonly physical: "minHeight";
2008
+ readonly logical: "minBlockSize";
2009
+ };
2010
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1925
2011
  readonly transform: (value: string | number) => string | 0;
1926
2012
  };
1927
2013
  maxHeight: {
1928
- readonly property: "maxHeight";
2014
+ readonly property: {
2015
+ readonly physical: "maxHeight";
2016
+ readonly logical: "maxBlockSize";
2017
+ };
2018
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1929
2019
  readonly transform: (value: string | number) => string | 0;
1930
2020
  };
1931
2021
  verticalAlign: {
1932
2022
  readonly property: "verticalAlign";
1933
2023
  };
2024
+ direction: {
2025
+ readonly property: "direction";
2026
+ };
1934
2027
  justifyContent: {
1935
2028
  readonly property: "justifyContent";
1936
2029
  };
@@ -2547,36 +2640,67 @@ export declare const states: import("@codecademy/variance/dist/types/config").St
2547
2640
  };
2548
2641
  dimensions: {
2549
2642
  readonly property: "width";
2550
- readonly properties: readonly ["width", "height"];
2643
+ readonly properties: {
2644
+ readonly physical: readonly ["width", "height"];
2645
+ readonly logical: readonly ["inlineSize", "blockSize"];
2646
+ };
2647
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
2551
2648
  readonly transform: (value: string | number) => string | 0;
2552
2649
  };
2553
2650
  width: {
2554
- readonly property: "width";
2651
+ readonly property: {
2652
+ readonly physical: "width";
2653
+ readonly logical: "inlineSize";
2654
+ };
2655
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
2555
2656
  readonly transform: (value: string | number) => string | 0;
2556
2657
  };
2557
2658
  minWidth: {
2558
- readonly property: "minWidth";
2659
+ readonly property: {
2660
+ readonly physical: "minWidth";
2661
+ readonly logical: "minInlineSize";
2662
+ };
2663
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
2559
2664
  readonly transform: (value: string | number) => string | 0;
2560
2665
  };
2561
2666
  maxWidth: {
2562
- readonly property: "maxWidth";
2667
+ readonly property: {
2668
+ readonly physical: "maxWidth";
2669
+ readonly logical: "maxInlineSize";
2670
+ };
2671
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
2563
2672
  readonly transform: (value: string | number) => string | 0;
2564
2673
  };
2565
2674
  height: {
2566
- readonly property: "height";
2675
+ readonly property: {
2676
+ readonly physical: "height";
2677
+ readonly logical: "blockSize";
2678
+ };
2679
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
2567
2680
  readonly transform: (value: string | number) => string | 0;
2568
2681
  };
2569
2682
  minHeight: {
2570
- readonly property: "minHeight";
2683
+ readonly property: {
2684
+ readonly physical: "minHeight";
2685
+ readonly logical: "minBlockSize";
2686
+ };
2687
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
2571
2688
  readonly transform: (value: string | number) => string | 0;
2572
2689
  };
2573
2690
  maxHeight: {
2574
- readonly property: "maxHeight";
2691
+ readonly property: {
2692
+ readonly physical: "maxHeight";
2693
+ readonly logical: "maxBlockSize";
2694
+ };
2695
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
2575
2696
  readonly transform: (value: string | number) => string | 0;
2576
2697
  };
2577
2698
  verticalAlign: {
2578
2699
  readonly property: "verticalAlign";
2579
2700
  };
2701
+ direction: {
2702
+ readonly property: "direction";
2703
+ };
2580
2704
  justifyContent: {
2581
2705
  readonly property: "justifyContent";
2582
2706
  };
package/dist/variance/utils.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  /// <reference types="react" />
2
2
  import { ThemeProps } from '@codecademy/variance';
3
- 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"];
3
+ 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"];
4
4
  export type SystemPropNames = (typeof allPropnames)[number];
5
5
  export type ElementOrProps = keyof JSX.IntrinsicElements | ThemeProps;
6
6
  export type ForwardableProps<El extends ElementOrProps, Additional> = Exclude<El extends keyof JSX.IntrinsicElements ? keyof JSX.IntrinsicElements[El] : keyof Element, Additional | SystemPropNames>;
7
7
  export declare function createStyledOptions<El extends ElementOrProps = 'div', Additional extends string = never>(additional?: readonly Additional[]): {
8
- 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>;
8
+ 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>;
9
9
  };
10
10
  /**
11
11
  * @description
@@ -24,6 +24,6 @@ export declare function createStyledOptions<El extends ElementOrProps = 'div', A
24
24
  *
25
25
  */
26
26
  export declare const styledOptions: typeof createStyledOptions & {
27
- shouldForwardProp: (prop: PropertyKey) => prop is "style" | "property" | "rel" | "slot" | "title" | "rev" | "id" | "nonce" | "content" | "translate" | "children" | "className" | "prefix" | "role" | "suppressHydrationWarning" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | keyof import("react").ClassAttributes<HTMLDivElement>;
27
+ shouldForwardProp: (prop: PropertyKey) => prop is "style" | "property" | "rel" | "slot" | "title" | "rev" | "id" | "nonce" | "content" | "translate" | "children" | "className" | "part" | "prefix" | "role" | "suppressHydrationWarning" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | keyof import("react").ClassAttributes<HTMLDivElement>;
28
28
  };
29
29
  export {};
package/package.json CHANGED
@@ -1,11 +1,13 @@
1
1
  {
2
2
  "name": "@codecademy/gamut-styles",
3
3
  "description": "Styleguide & Component library for codecademy.com",
4
- "version": "17.12.0-alpha.f9ca97.0",
4
+ "version": "17.12.1-alpha.27bc7c.0",
5
5
  "author": "Jake Hiller <jake@codecademy.com>",
6
6
  "dependencies": {
7
- "@codecademy/variance": "0.26.0-alpha.f9ca97.0",
7
+ "@codecademy/variance": "0.26.0",
8
8
  "@emotion/is-prop-valid": "^1.1.0",
9
+ "framer-motion": "^11.18.0",
10
+ "get-nonce": "^1.0.0",
9
11
  "polished": "^4.1.2"
10
12
  },
11
13
  "files": [
@@ -24,7 +26,7 @@
24
26
  "@emotion/react": "^11.4.0",
25
27
  "@emotion/styled": "^11.3.0",
26
28
  "lodash": "^4.17.23",
27
- "react": "^17.0.2 || ^18.2.0",
29
+ "react": "^17.0.2 || ^18.3.0",
28
30
  "stylis": "^4.0.7"
29
31
  },
30
32
  "publishConfig": {
@@ -34,5 +36,5 @@
34
36
  "scripts": {
35
37
  "build": "nx build @codecademy/gamut-styles"
36
38
  },
37
- "gitHead": "d73668577cae898037fa05bed7b91cc4c7312a9d"
39
+ "gitHead": "9f247f1b69283a57fba7a376b0caa2ca335c6043"
38
40
  }