@codecademy/gamut-styles 17.12.0-alpha.70191a.0 → 17.12.0-alpha.7091af.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 (8) hide show
  1. package/dist/ColorMode.d.ts +221 -44
  2. package/dist/GamutProvider.d.ts +5 -0
  3. package/dist/GamutProvider.js +29 -13
  4. package/dist/variance/config.d.ts +146 -28
  5. package/dist/variance/config.js +73 -14
  6. package/dist/variance/props.d.ts +292 -56
  7. package/dist/variance/utils.d.ts +3 -3
  8. package/package.json +6 -4
package/dist/ColorMode.d.ts CHANGED
@@ -60,43 +60,82 @@ export declare const providerProps: import("@codecademy/variance/dist/types/conf
60
60
  readonly property: "overflow";
61
61
  };
62
62
  readonly overflowX: {
63
- readonly property: "overflowX";
63
+ readonly property: {
64
+ readonly physical: "overflowX";
65
+ readonly logical: "overflowInline";
66
+ };
67
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
64
68
  };
65
69
  readonly overflowY: {
66
- readonly property: "overflowY";
70
+ readonly property: {
71
+ readonly physical: "overflowY";
72
+ readonly logical: "overflowBlock";
73
+ };
74
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
67
75
  };
68
76
  readonly dimensions: {
69
77
  readonly property: "width";
70
- 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;
71
83
  readonly transform: (value: string | number) => string | 0;
72
84
  };
73
85
  readonly width: {
74
- 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;
75
91
  readonly transform: (value: string | number) => string | 0;
76
92
  };
77
93
  readonly minWidth: {
78
- 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;
79
99
  readonly transform: (value: string | number) => string | 0;
80
100
  };
81
101
  readonly maxWidth: {
82
- 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;
83
107
  readonly transform: (value: string | number) => string | 0;
84
108
  };
85
109
  readonly height: {
86
- 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;
87
115
  readonly transform: (value: string | number) => string | 0;
88
116
  };
89
117
  readonly minHeight: {
90
- 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;
91
123
  readonly transform: (value: string | number) => string | 0;
92
124
  };
93
125
  readonly maxHeight: {
94
- 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;
95
131
  readonly transform: (value: string | number) => string | 0;
96
132
  };
97
133
  readonly verticalAlign: {
98
134
  readonly property: "verticalAlign";
99
135
  };
136
+ readonly direction: {
137
+ readonly property: "direction";
138
+ };
100
139
  }>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
101
140
  readonly color: {
102
141
  readonly property: "color";
@@ -271,23 +310,43 @@ export declare const providerProps: import("@codecademy/variance/dist/types/conf
271
310
  };
272
311
  readonly inset: {
273
312
  readonly property: "inset";
274
- readonly properties: readonly ["top", "right", "bottom", "left"];
313
+ readonly properties: {
314
+ readonly physical: readonly ["top", "right", "bottom", "left"];
315
+ readonly logical: readonly ["insetBlockStart", "insetInlineEnd", "insetBlockEnd", "insetInlineStart"];
316
+ };
317
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
275
318
  readonly transform: (value: string | number) => string | 0;
276
319
  };
277
320
  readonly top: {
278
- readonly property: "top";
321
+ readonly property: {
322
+ readonly physical: "top";
323
+ readonly logical: "insetBlockStart";
324
+ };
325
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
279
326
  readonly transform: (value: string | number) => string | 0;
280
327
  };
281
328
  readonly right: {
282
- readonly property: "right";
329
+ readonly property: {
330
+ readonly physical: "right";
331
+ readonly logical: "insetInlineEnd";
332
+ };
333
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
283
334
  readonly transform: (value: string | number) => string | 0;
284
335
  };
285
336
  readonly bottom: {
286
- readonly property: "bottom";
337
+ readonly property: {
338
+ readonly physical: "bottom";
339
+ readonly logical: "insetBlockEnd";
340
+ };
341
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
287
342
  readonly transform: (value: string | number) => string | 0;
288
343
  };
289
344
  readonly left: {
290
- readonly property: "left";
345
+ readonly property: {
346
+ readonly physical: "left";
347
+ readonly logical: "insetInlineStart";
348
+ };
349
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
291
350
  readonly transform: (value: string | number) => string | 0;
292
351
  };
293
352
  readonly zIndex: {
@@ -692,7 +751,11 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
692
751
  readonly property: "backgroundSize";
693
752
  }>;
694
753
  bottom?: import("@codecademy/variance/dist/types/config").Scale<{
695
- readonly property: "bottom";
754
+ readonly property: {
755
+ readonly physical: "bottom";
756
+ readonly logical: "insetBlockEnd";
757
+ };
758
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
696
759
  readonly transform: (value: string | number) => string | 0;
697
760
  }>;
698
761
  columnGap?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -702,6 +765,9 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
702
765
  containerType?: import("@codecademy/variance/dist/types/config").Scale<{
703
766
  readonly property: "containerType";
704
767
  }>;
768
+ direction?: import("@codecademy/variance/dist/types/config").Scale<{
769
+ readonly property: "direction";
770
+ }>;
705
771
  display?: import("@codecademy/variance/dist/types/config").Scale<{
706
772
  readonly property: "display";
707
773
  }>;
@@ -751,7 +817,11 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
751
817
  readonly property: "gridTemplateRows";
752
818
  }>;
753
819
  height?: import("@codecademy/variance/dist/types/config").Scale<{
754
- 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;
755
825
  readonly transform: (value: string | number) => string | 0;
756
826
  }>;
757
827
  justifyContent?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -764,23 +834,43 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
764
834
  readonly property: "justifySelf";
765
835
  }>;
766
836
  left?: import("@codecademy/variance/dist/types/config").Scale<{
767
- readonly property: "left";
837
+ readonly property: {
838
+ readonly physical: "left";
839
+ readonly logical: "insetInlineStart";
840
+ };
841
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
768
842
  readonly transform: (value: string | number) => string | 0;
769
843
  }>;
770
844
  maxHeight?: import("@codecademy/variance/dist/types/config").Scale<{
771
- 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;
772
850
  readonly transform: (value: string | number) => string | 0;
773
851
  }>;
774
852
  maxWidth?: import("@codecademy/variance/dist/types/config").Scale<{
775
- 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;
776
858
  readonly transform: (value: string | number) => string | 0;
777
859
  }>;
778
860
  minHeight?: import("@codecademy/variance/dist/types/config").Scale<{
779
- 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;
780
866
  readonly transform: (value: string | number) => string | 0;
781
867
  }>;
782
868
  minWidth?: import("@codecademy/variance/dist/types/config").Scale<{
783
- 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;
784
874
  readonly transform: (value: string | number) => string | 0;
785
875
  }>;
786
876
  opacity?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -790,16 +880,28 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
790
880
  readonly property: "order";
791
881
  }>;
792
882
  overflowX?: import("@codecademy/variance/dist/types/config").Scale<{
793
- readonly property: "overflowX";
883
+ readonly property: {
884
+ readonly physical: "overflowX";
885
+ readonly logical: "overflowInline";
886
+ };
887
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
794
888
  }>;
795
889
  overflowY?: import("@codecademy/variance/dist/types/config").Scale<{
796
- readonly property: "overflowY";
890
+ readonly property: {
891
+ readonly physical: "overflowY";
892
+ readonly logical: "overflowBlock";
893
+ };
894
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
797
895
  }>;
798
896
  position?: import("@codecademy/variance/dist/types/config").Scale<{
799
897
  readonly property: "position";
800
898
  }>;
801
899
  right?: import("@codecademy/variance/dist/types/config").Scale<{
802
- readonly property: "right";
900
+ readonly property: {
901
+ readonly physical: "right";
902
+ readonly logical: "insetInlineEnd";
903
+ };
904
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
803
905
  readonly transform: (value: string | number) => string | 0;
804
906
  }>;
805
907
  rowGap?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -807,14 +909,22 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
807
909
  readonly scale: "spacing";
808
910
  }>;
809
911
  top?: import("@codecademy/variance/dist/types/config").Scale<{
810
- readonly property: "top";
912
+ readonly property: {
913
+ readonly physical: "top";
914
+ readonly logical: "insetBlockStart";
915
+ };
916
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
811
917
  readonly transform: (value: string | number) => string | 0;
812
918
  }>;
813
919
  verticalAlign?: import("@codecademy/variance/dist/types/config").Scale<{
814
920
  readonly property: "verticalAlign";
815
921
  }>;
816
922
  width?: import("@codecademy/variance/dist/types/config").Scale<{
817
- 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;
818
928
  readonly transform: (value: string | number) => string | 0;
819
929
  }>;
820
930
  zIndex?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -887,7 +997,11 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
887
997
  }>;
888
998
  inset?: import("@codecademy/variance/dist/types/config").Scale<{
889
999
  readonly property: "inset";
890
- readonly properties: readonly ["top", "right", "bottom", "left"];
1000
+ readonly properties: {
1001
+ readonly physical: readonly ["top", "right", "bottom", "left"];
1002
+ readonly logical: readonly ["insetBlockStart", "insetInlineEnd", "insetBlockEnd", "insetInlineStart"];
1003
+ };
1004
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
891
1005
  readonly transform: (value: string | number) => string | 0;
892
1006
  }>;
893
1007
  overflow?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -895,7 +1009,11 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
895
1009
  }>;
896
1010
  dimensions?: import("@codecademy/variance/dist/types/config").Scale<{
897
1011
  readonly property: "width";
898
- 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;
899
1017
  readonly transform: (value: string | number) => string | 0;
900
1018
  }>;
901
1019
  textColor?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -1227,7 +1345,7 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
1227
1345
  } & {
1228
1346
  variables?: CSSObject | undefined;
1229
1347
  alwaysSetVariables?: boolean | undefined;
1230
- }, 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>>, {}>;
1231
1349
  export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<Omit<{
1232
1350
  theme?: Theme | undefined;
1233
1351
  as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
@@ -1266,7 +1384,11 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
1266
1384
  readonly property: "backgroundSize";
1267
1385
  }>;
1268
1386
  bottom?: import("@codecademy/variance/dist/types/config").Scale<{
1269
- readonly property: "bottom";
1387
+ readonly property: {
1388
+ readonly physical: "bottom";
1389
+ readonly logical: "insetBlockEnd";
1390
+ };
1391
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1270
1392
  readonly transform: (value: string | number) => string | 0;
1271
1393
  }>;
1272
1394
  columnGap?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -1276,6 +1398,9 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
1276
1398
  containerType?: import("@codecademy/variance/dist/types/config").Scale<{
1277
1399
  readonly property: "containerType";
1278
1400
  }>;
1401
+ direction?: import("@codecademy/variance/dist/types/config").Scale<{
1402
+ readonly property: "direction";
1403
+ }>;
1279
1404
  display?: import("@codecademy/variance/dist/types/config").Scale<{
1280
1405
  readonly property: "display";
1281
1406
  }>;
@@ -1325,7 +1450,11 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
1325
1450
  readonly property: "gridTemplateRows";
1326
1451
  }>;
1327
1452
  height?: import("@codecademy/variance/dist/types/config").Scale<{
1328
- 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;
1329
1458
  readonly transform: (value: string | number) => string | 0;
1330
1459
  }>;
1331
1460
  justifyContent?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -1338,23 +1467,43 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
1338
1467
  readonly property: "justifySelf";
1339
1468
  }>;
1340
1469
  left?: import("@codecademy/variance/dist/types/config").Scale<{
1341
- readonly property: "left";
1470
+ readonly property: {
1471
+ readonly physical: "left";
1472
+ readonly logical: "insetInlineStart";
1473
+ };
1474
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1342
1475
  readonly transform: (value: string | number) => string | 0;
1343
1476
  }>;
1344
1477
  maxHeight?: import("@codecademy/variance/dist/types/config").Scale<{
1345
- 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;
1346
1483
  readonly transform: (value: string | number) => string | 0;
1347
1484
  }>;
1348
1485
  maxWidth?: import("@codecademy/variance/dist/types/config").Scale<{
1349
- 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;
1350
1491
  readonly transform: (value: string | number) => string | 0;
1351
1492
  }>;
1352
1493
  minHeight?: import("@codecademy/variance/dist/types/config").Scale<{
1353
- 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;
1354
1499
  readonly transform: (value: string | number) => string | 0;
1355
1500
  }>;
1356
1501
  minWidth?: import("@codecademy/variance/dist/types/config").Scale<{
1357
- 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;
1358
1507
  readonly transform: (value: string | number) => string | 0;
1359
1508
  }>;
1360
1509
  opacity?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -1364,16 +1513,28 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
1364
1513
  readonly property: "order";
1365
1514
  }>;
1366
1515
  overflowX?: import("@codecademy/variance/dist/types/config").Scale<{
1367
- readonly property: "overflowX";
1516
+ readonly property: {
1517
+ readonly physical: "overflowX";
1518
+ readonly logical: "overflowInline";
1519
+ };
1520
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1368
1521
  }>;
1369
1522
  overflowY?: import("@codecademy/variance/dist/types/config").Scale<{
1370
- readonly property: "overflowY";
1523
+ readonly property: {
1524
+ readonly physical: "overflowY";
1525
+ readonly logical: "overflowBlock";
1526
+ };
1527
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1371
1528
  }>;
1372
1529
  position?: import("@codecademy/variance/dist/types/config").Scale<{
1373
1530
  readonly property: "position";
1374
1531
  }>;
1375
1532
  right?: import("@codecademy/variance/dist/types/config").Scale<{
1376
- readonly property: "right";
1533
+ readonly property: {
1534
+ readonly physical: "right";
1535
+ readonly logical: "insetInlineEnd";
1536
+ };
1537
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1377
1538
  readonly transform: (value: string | number) => string | 0;
1378
1539
  }>;
1379
1540
  rowGap?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -1381,14 +1542,22 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
1381
1542
  readonly scale: "spacing";
1382
1543
  }>;
1383
1544
  top?: import("@codecademy/variance/dist/types/config").Scale<{
1384
- readonly property: "top";
1545
+ readonly property: {
1546
+ readonly physical: "top";
1547
+ readonly logical: "insetBlockStart";
1548
+ };
1549
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1385
1550
  readonly transform: (value: string | number) => string | 0;
1386
1551
  }>;
1387
1552
  verticalAlign?: import("@codecademy/variance/dist/types/config").Scale<{
1388
1553
  readonly property: "verticalAlign";
1389
1554
  }>;
1390
1555
  width?: import("@codecademy/variance/dist/types/config").Scale<{
1391
- 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;
1392
1561
  readonly transform: (value: string | number) => string | 0;
1393
1562
  }>;
1394
1563
  zIndex?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -1461,7 +1630,11 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
1461
1630
  }>;
1462
1631
  inset?: import("@codecademy/variance/dist/types/config").Scale<{
1463
1632
  readonly property: "inset";
1464
- readonly properties: readonly ["top", "right", "bottom", "left"];
1633
+ readonly properties: {
1634
+ readonly physical: readonly ["top", "right", "bottom", "left"];
1635
+ readonly logical: readonly ["insetBlockStart", "insetInlineEnd", "insetBlockEnd", "insetInlineStart"];
1636
+ };
1637
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1465
1638
  readonly transform: (value: string | number) => string | 0;
1466
1639
  }>;
1467
1640
  overflow?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -1469,7 +1642,11 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
1469
1642
  }>;
1470
1643
  dimensions?: import("@codecademy/variance/dist/types/config").Scale<{
1471
1644
  readonly property: "width";
1472
- 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;
1473
1650
  readonly transform: (value: string | number) => string | 0;
1474
1651
  }>;
1475
1652
  textColor?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -1801,4 +1978,4 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
1801
1978
  } & {
1802
1979
  variables?: CSSObject | undefined;
1803
1980
  alwaysSetVariables?: boolean | undefined;
1804
- } & 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,
@@ -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
  };