@codecademy/gamut-styles 17.12.0-alpha.9527f6.0 → 17.12.0-alpha.9e53d2.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 (6) hide show
  1. package/dist/ColorMode.d.ts +116 -23
  2. package/dist/variance/config.d.ts +76 -14
  3. package/dist/variance/config.js +38 -7
  4. package/dist/variance/props.d.ts +152 -28
  5. package/dist/variance/utils.d.ts +3 -3
  6. package/package.json +4 -4
package/dist/ColorMode.d.ts CHANGED
@@ -67,36 +67,67 @@ export declare const providerProps: import("@codecademy/variance/dist/types/conf
67
67
  };
68
68
  readonly dimensions: {
69
69
  readonly property: "width";
70
- readonly properties: readonly ["width", "height"];
70
+ readonly properties: {
71
+ readonly physical: readonly ["width", "height"];
72
+ readonly logical: readonly ["inlineSize", "blockSize"];
73
+ };
74
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
71
75
  readonly transform: (value: string | number) => string | 0;
72
76
  };
73
77
  readonly width: {
74
- readonly property: "width";
78
+ readonly property: {
79
+ readonly physical: "width";
80
+ readonly logical: "inlineSize";
81
+ };
82
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
75
83
  readonly transform: (value: string | number) => string | 0;
76
84
  };
77
85
  readonly minWidth: {
78
- readonly property: "minWidth";
86
+ readonly property: {
87
+ readonly physical: "minWidth";
88
+ readonly logical: "minInlineSize";
89
+ };
90
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
79
91
  readonly transform: (value: string | number) => string | 0;
80
92
  };
81
93
  readonly maxWidth: {
82
- readonly property: "maxWidth";
94
+ readonly property: {
95
+ readonly physical: "maxWidth";
96
+ readonly logical: "maxInlineSize";
97
+ };
98
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
83
99
  readonly transform: (value: string | number) => string | 0;
84
100
  };
85
101
  readonly height: {
86
- readonly property: "height";
102
+ readonly property: {
103
+ readonly physical: "height";
104
+ readonly logical: "blockSize";
105
+ };
106
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
87
107
  readonly transform: (value: string | number) => string | 0;
88
108
  };
89
109
  readonly minHeight: {
90
- readonly property: "minHeight";
110
+ readonly property: {
111
+ readonly physical: "minHeight";
112
+ readonly logical: "minBlockSize";
113
+ };
114
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
91
115
  readonly transform: (value: string | number) => string | 0;
92
116
  };
93
117
  readonly maxHeight: {
94
- readonly property: "maxHeight";
118
+ readonly property: {
119
+ readonly physical: "maxHeight";
120
+ readonly logical: "maxBlockSize";
121
+ };
122
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
95
123
  readonly transform: (value: string | number) => string | 0;
96
124
  };
97
125
  readonly verticalAlign: {
98
126
  readonly property: "verticalAlign";
99
127
  };
128
+ readonly direction: {
129
+ readonly property: "direction";
130
+ };
100
131
  }>>, import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
101
132
  readonly color: {
102
133
  readonly property: "color";
@@ -702,6 +733,9 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
702
733
  containerType?: import("@codecademy/variance/dist/types/config").Scale<{
703
734
  readonly property: "containerType";
704
735
  }>;
736
+ direction?: import("@codecademy/variance/dist/types/config").Scale<{
737
+ readonly property: "direction";
738
+ }>;
705
739
  display?: import("@codecademy/variance/dist/types/config").Scale<{
706
740
  readonly property: "display";
707
741
  }>;
@@ -751,7 +785,11 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
751
785
  readonly property: "gridTemplateRows";
752
786
  }>;
753
787
  height?: import("@codecademy/variance/dist/types/config").Scale<{
754
- readonly property: "height";
788
+ readonly property: {
789
+ readonly physical: "height";
790
+ readonly logical: "blockSize";
791
+ };
792
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
755
793
  readonly transform: (value: string | number) => string | 0;
756
794
  }>;
757
795
  justifyContent?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -768,19 +806,35 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
768
806
  readonly transform: (value: string | number) => string | 0;
769
807
  }>;
770
808
  maxHeight?: import("@codecademy/variance/dist/types/config").Scale<{
771
- readonly property: "maxHeight";
809
+ readonly property: {
810
+ readonly physical: "maxHeight";
811
+ readonly logical: "maxBlockSize";
812
+ };
813
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
772
814
  readonly transform: (value: string | number) => string | 0;
773
815
  }>;
774
816
  maxWidth?: import("@codecademy/variance/dist/types/config").Scale<{
775
- readonly property: "maxWidth";
817
+ readonly property: {
818
+ readonly physical: "maxWidth";
819
+ readonly logical: "maxInlineSize";
820
+ };
821
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
776
822
  readonly transform: (value: string | number) => string | 0;
777
823
  }>;
778
824
  minHeight?: import("@codecademy/variance/dist/types/config").Scale<{
779
- readonly property: "minHeight";
825
+ readonly property: {
826
+ readonly physical: "minHeight";
827
+ readonly logical: "minBlockSize";
828
+ };
829
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
780
830
  readonly transform: (value: string | number) => string | 0;
781
831
  }>;
782
832
  minWidth?: import("@codecademy/variance/dist/types/config").Scale<{
783
- readonly property: "minWidth";
833
+ readonly property: {
834
+ readonly physical: "minWidth";
835
+ readonly logical: "minInlineSize";
836
+ };
837
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
784
838
  readonly transform: (value: string | number) => string | 0;
785
839
  }>;
786
840
  opacity?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -814,7 +868,11 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
814
868
  readonly property: "verticalAlign";
815
869
  }>;
816
870
  width?: import("@codecademy/variance/dist/types/config").Scale<{
817
- readonly property: "width";
871
+ readonly property: {
872
+ readonly physical: "width";
873
+ readonly logical: "inlineSize";
874
+ };
875
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
818
876
  readonly transform: (value: string | number) => string | 0;
819
877
  }>;
820
878
  zIndex?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -895,7 +953,11 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
895
953
  }>;
896
954
  dimensions?: import("@codecademy/variance/dist/types/config").Scale<{
897
955
  readonly property: "width";
898
- readonly properties: readonly ["width", "height"];
956
+ readonly properties: {
957
+ readonly physical: readonly ["width", "height"];
958
+ readonly logical: readonly ["inlineSize", "blockSize"];
959
+ };
960
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
899
961
  readonly transform: (value: string | number) => string | 0;
900
962
  }>;
901
963
  textColor?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -1227,7 +1289,7 @@ export declare const VariableProvider: import("@emotion/styled").StyledComponent
1227
1289
  } & {
1228
1290
  variables?: CSSObject | undefined;
1229
1291
  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>>, {}>;
1292
+ }, 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
1293
  export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<Omit<{
1232
1294
  theme?: Theme | undefined;
1233
1295
  as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
@@ -1276,6 +1338,9 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
1276
1338
  containerType?: import("@codecademy/variance/dist/types/config").Scale<{
1277
1339
  readonly property: "containerType";
1278
1340
  }>;
1341
+ direction?: import("@codecademy/variance/dist/types/config").Scale<{
1342
+ readonly property: "direction";
1343
+ }>;
1279
1344
  display?: import("@codecademy/variance/dist/types/config").Scale<{
1280
1345
  readonly property: "display";
1281
1346
  }>;
@@ -1325,7 +1390,11 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
1325
1390
  readonly property: "gridTemplateRows";
1326
1391
  }>;
1327
1392
  height?: import("@codecademy/variance/dist/types/config").Scale<{
1328
- readonly property: "height";
1393
+ readonly property: {
1394
+ readonly physical: "height";
1395
+ readonly logical: "blockSize";
1396
+ };
1397
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1329
1398
  readonly transform: (value: string | number) => string | 0;
1330
1399
  }>;
1331
1400
  justifyContent?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -1342,19 +1411,35 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
1342
1411
  readonly transform: (value: string | number) => string | 0;
1343
1412
  }>;
1344
1413
  maxHeight?: import("@codecademy/variance/dist/types/config").Scale<{
1345
- readonly property: "maxHeight";
1414
+ readonly property: {
1415
+ readonly physical: "maxHeight";
1416
+ readonly logical: "maxBlockSize";
1417
+ };
1418
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1346
1419
  readonly transform: (value: string | number) => string | 0;
1347
1420
  }>;
1348
1421
  maxWidth?: import("@codecademy/variance/dist/types/config").Scale<{
1349
- readonly property: "maxWidth";
1422
+ readonly property: {
1423
+ readonly physical: "maxWidth";
1424
+ readonly logical: "maxInlineSize";
1425
+ };
1426
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1350
1427
  readonly transform: (value: string | number) => string | 0;
1351
1428
  }>;
1352
1429
  minHeight?: import("@codecademy/variance/dist/types/config").Scale<{
1353
- readonly property: "minHeight";
1430
+ readonly property: {
1431
+ readonly physical: "minHeight";
1432
+ readonly logical: "minBlockSize";
1433
+ };
1434
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1354
1435
  readonly transform: (value: string | number) => string | 0;
1355
1436
  }>;
1356
1437
  minWidth?: import("@codecademy/variance/dist/types/config").Scale<{
1357
- readonly property: "minWidth";
1438
+ readonly property: {
1439
+ readonly physical: "minWidth";
1440
+ readonly logical: "minInlineSize";
1441
+ };
1442
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1358
1443
  readonly transform: (value: string | number) => string | 0;
1359
1444
  }>;
1360
1445
  opacity?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -1388,7 +1473,11 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
1388
1473
  readonly property: "verticalAlign";
1389
1474
  }>;
1390
1475
  width?: import("@codecademy/variance/dist/types/config").Scale<{
1391
- readonly property: "width";
1476
+ readonly property: {
1477
+ readonly physical: "width";
1478
+ readonly logical: "inlineSize";
1479
+ };
1480
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1392
1481
  readonly transform: (value: string | number) => string | 0;
1393
1482
  }>;
1394
1483
  zIndex?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -1469,7 +1558,11 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
1469
1558
  }>;
1470
1559
  dimensions?: import("@codecademy/variance/dist/types/config").Scale<{
1471
1560
  readonly property: "width";
1472
- readonly properties: readonly ["width", "height"];
1561
+ readonly properties: {
1562
+ readonly physical: readonly ["width", "height"];
1563
+ readonly logical: readonly ["inlineSize", "blockSize"];
1564
+ };
1565
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1473
1566
  readonly transform: (value: string | number) => string | 0;
1474
1567
  }>;
1475
1568
  textColor?: import("@codecademy/variance/dist/types/config").Scale<{
@@ -1801,4 +1894,4 @@ export declare const ColorMode: import("react").ForwardRefExoticComponent<Omit<O
1801
1894
  } & {
1802
1895
  variables?: CSSObject | undefined;
1803
1896
  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>>;
1897
+ } & 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/variance/config.d.ts CHANGED
@@ -505,36 +505,67 @@ export declare const layout: {
505
505
  };
506
506
  readonly dimensions: {
507
507
  readonly property: "width";
508
- readonly properties: readonly ["width", "height"];
508
+ readonly properties: {
509
+ readonly physical: readonly ["width", "height"];
510
+ readonly logical: readonly ["inlineSize", "blockSize"];
511
+ };
512
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
509
513
  readonly transform: (value: string | number) => string | 0;
510
514
  };
511
515
  readonly width: {
512
- readonly property: "width";
516
+ readonly property: {
517
+ readonly physical: "width";
518
+ readonly logical: "inlineSize";
519
+ };
520
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
513
521
  readonly transform: (value: string | number) => string | 0;
514
522
  };
515
523
  readonly minWidth: {
516
- readonly property: "minWidth";
524
+ readonly property: {
525
+ readonly physical: "minWidth";
526
+ readonly logical: "minInlineSize";
527
+ };
528
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
517
529
  readonly transform: (value: string | number) => string | 0;
518
530
  };
519
531
  readonly maxWidth: {
520
- readonly property: "maxWidth";
532
+ readonly property: {
533
+ readonly physical: "maxWidth";
534
+ readonly logical: "maxInlineSize";
535
+ };
536
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
521
537
  readonly transform: (value: string | number) => string | 0;
522
538
  };
523
539
  readonly height: {
524
- readonly property: "height";
540
+ readonly property: {
541
+ readonly physical: "height";
542
+ readonly logical: "blockSize";
543
+ };
544
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
525
545
  readonly transform: (value: string | number) => string | 0;
526
546
  };
527
547
  readonly minHeight: {
528
- readonly property: "minHeight";
548
+ readonly property: {
549
+ readonly physical: "minHeight";
550
+ readonly logical: "minBlockSize";
551
+ };
552
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
529
553
  readonly transform: (value: string | number) => string | 0;
530
554
  };
531
555
  readonly maxHeight: {
532
- readonly property: "maxHeight";
556
+ readonly property: {
557
+ readonly physical: "maxHeight";
558
+ readonly logical: "maxBlockSize";
559
+ };
560
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
533
561
  readonly transform: (value: string | number) => string | 0;
534
562
  };
535
563
  readonly verticalAlign: {
536
564
  readonly property: "verticalAlign";
537
565
  };
566
+ readonly direction: {
567
+ readonly property: "direction";
568
+ };
538
569
  };
539
570
  export declare const list: {
540
571
  readonly listStyle: {
@@ -1196,36 +1227,67 @@ export declare const all: {
1196
1227
  };
1197
1228
  dimensions: {
1198
1229
  readonly property: "width";
1199
- readonly properties: readonly ["width", "height"];
1230
+ readonly properties: {
1231
+ readonly physical: readonly ["width", "height"];
1232
+ readonly logical: readonly ["inlineSize", "blockSize"];
1233
+ };
1234
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1200
1235
  readonly transform: (value: string | number) => string | 0;
1201
1236
  };
1202
1237
  width: {
1203
- readonly property: "width";
1238
+ readonly property: {
1239
+ readonly physical: "width";
1240
+ readonly logical: "inlineSize";
1241
+ };
1242
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1204
1243
  readonly transform: (value: string | number) => string | 0;
1205
1244
  };
1206
1245
  minWidth: {
1207
- readonly property: "minWidth";
1246
+ readonly property: {
1247
+ readonly physical: "minWidth";
1248
+ readonly logical: "minInlineSize";
1249
+ };
1250
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1208
1251
  readonly transform: (value: string | number) => string | 0;
1209
1252
  };
1210
1253
  maxWidth: {
1211
- readonly property: "maxWidth";
1254
+ readonly property: {
1255
+ readonly physical: "maxWidth";
1256
+ readonly logical: "maxInlineSize";
1257
+ };
1258
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1212
1259
  readonly transform: (value: string | number) => string | 0;
1213
1260
  };
1214
1261
  height: {
1215
- readonly property: "height";
1262
+ readonly property: {
1263
+ readonly physical: "height";
1264
+ readonly logical: "blockSize";
1265
+ };
1266
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1216
1267
  readonly transform: (value: string | number) => string | 0;
1217
1268
  };
1218
1269
  minHeight: {
1219
- readonly property: "minHeight";
1270
+ readonly property: {
1271
+ readonly physical: "minHeight";
1272
+ readonly logical: "minBlockSize";
1273
+ };
1274
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1220
1275
  readonly transform: (value: string | number) => string | 0;
1221
1276
  };
1222
1277
  maxHeight: {
1223
- readonly property: "maxHeight";
1278
+ readonly property: {
1279
+ readonly physical: "maxHeight";
1280
+ readonly logical: "maxBlockSize";
1281
+ };
1282
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1224
1283
  readonly transform: (value: string | number) => string | 0;
1225
1284
  };
1226
1285
  verticalAlign: {
1227
1286
  readonly property: "verticalAlign";
1228
1287
  };
1288
+ direction: {
1289
+ readonly property: "direction";
1290
+ };
1229
1291
  justifyContent: {
1230
1292
  readonly property: "justifyContent";
1231
1293
  };
package/dist/variance/config.js CHANGED
@@ -463,36 +463,67 @@ export const layout = {
463
463
  },
464
464
  dimensions: {
465
465
  property: 'width',
466
- properties: ['width', 'height'],
466
+ properties: {
467
+ physical: ['width', 'height'],
468
+ logical: ['inlineSize', 'blockSize']
469
+ },
470
+ resolveProperty: getPropertyMode,
467
471
  transform: transformSize
468
472
  },
469
473
  width: {
470
- property: 'width',
474
+ property: {
475
+ physical: 'width',
476
+ logical: 'inlineSize'
477
+ },
478
+ resolveProperty: getPropertyMode,
471
479
  transform: transformSize
472
480
  },
473
481
  minWidth: {
474
- property: 'minWidth',
482
+ property: {
483
+ physical: 'minWidth',
484
+ logical: 'minInlineSize'
485
+ },
486
+ resolveProperty: getPropertyMode,
475
487
  transform: transformSize
476
488
  },
477
489
  maxWidth: {
478
- property: 'maxWidth',
490
+ property: {
491
+ physical: 'maxWidth',
492
+ logical: 'maxInlineSize'
493
+ },
494
+ resolveProperty: getPropertyMode,
479
495
  transform: transformSize
480
496
  },
481
497
  height: {
482
- property: 'height',
498
+ property: {
499
+ physical: 'height',
500
+ logical: 'blockSize'
501
+ },
502
+ resolveProperty: getPropertyMode,
483
503
  transform: transformSize
484
504
  },
485
505
  minHeight: {
486
- property: 'minHeight',
506
+ property: {
507
+ physical: 'minHeight',
508
+ logical: 'minBlockSize'
509
+ },
510
+ resolveProperty: getPropertyMode,
487
511
  transform: transformSize
488
512
  },
489
513
  maxHeight: {
490
- property: 'maxHeight',
514
+ property: {
515
+ physical: 'maxHeight',
516
+ logical: 'maxBlockSize'
517
+ },
518
+ resolveProperty: getPropertyMode,
491
519
  transform: transformSize
492
520
  },
493
521
  verticalAlign: {
494
522
  property: 'verticalAlign'
495
523
  },
524
+ direction: {
525
+ property: 'direction'
526
+ },
496
527
  ...selfAlignments,
497
528
  ...gridItems,
498
529
  ...flexItems
package/dist/variance/props.d.ts CHANGED
@@ -207,36 +207,67 @@ export declare const layout: import("@codecademy/variance/dist/types/config").Pa
207
207
  };
208
208
  readonly dimensions: {
209
209
  readonly property: "width";
210
- readonly properties: readonly ["width", "height"];
210
+ readonly properties: {
211
+ readonly physical: readonly ["width", "height"];
212
+ readonly logical: readonly ["inlineSize", "blockSize"];
213
+ };
214
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
211
215
  readonly transform: (value: string | number) => string | 0;
212
216
  };
213
217
  readonly width: {
214
- readonly property: "width";
218
+ readonly property: {
219
+ readonly physical: "width";
220
+ readonly logical: "inlineSize";
221
+ };
222
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
215
223
  readonly transform: (value: string | number) => string | 0;
216
224
  };
217
225
  readonly minWidth: {
218
- readonly property: "minWidth";
226
+ readonly property: {
227
+ readonly physical: "minWidth";
228
+ readonly logical: "minInlineSize";
229
+ };
230
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
219
231
  readonly transform: (value: string | number) => string | 0;
220
232
  };
221
233
  readonly maxWidth: {
222
- readonly property: "maxWidth";
234
+ readonly property: {
235
+ readonly physical: "maxWidth";
236
+ readonly logical: "maxInlineSize";
237
+ };
238
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
223
239
  readonly transform: (value: string | number) => string | 0;
224
240
  };
225
241
  readonly height: {
226
- readonly property: "height";
242
+ readonly property: {
243
+ readonly physical: "height";
244
+ readonly logical: "blockSize";
245
+ };
246
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
227
247
  readonly transform: (value: string | number) => string | 0;
228
248
  };
229
249
  readonly minHeight: {
230
- readonly property: "minHeight";
250
+ readonly property: {
251
+ readonly physical: "minHeight";
252
+ readonly logical: "minBlockSize";
253
+ };
254
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
231
255
  readonly transform: (value: string | number) => string | 0;
232
256
  };
233
257
  readonly maxHeight: {
234
- readonly property: "maxHeight";
258
+ readonly property: {
259
+ readonly physical: "maxHeight";
260
+ readonly logical: "maxBlockSize";
261
+ };
262
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
235
263
  readonly transform: (value: string | number) => string | 0;
236
264
  };
237
265
  readonly verticalAlign: {
238
266
  readonly property: "verticalAlign";
239
267
  };
268
+ readonly direction: {
269
+ readonly property: "direction";
270
+ };
240
271
  }>>;
241
272
  export declare const positioning: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
242
273
  readonly position: {
@@ -1199,36 +1230,67 @@ export declare const css: import("@codecademy/variance/dist/types/config").CSS<i
1199
1230
  };
1200
1231
  dimensions: {
1201
1232
  readonly property: "width";
1202
- readonly properties: readonly ["width", "height"];
1233
+ readonly properties: {
1234
+ readonly physical: readonly ["width", "height"];
1235
+ readonly logical: readonly ["inlineSize", "blockSize"];
1236
+ };
1237
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1203
1238
  readonly transform: (value: string | number) => string | 0;
1204
1239
  };
1205
1240
  width: {
1206
- readonly property: "width";
1241
+ readonly property: {
1242
+ readonly physical: "width";
1243
+ readonly logical: "inlineSize";
1244
+ };
1245
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1207
1246
  readonly transform: (value: string | number) => string | 0;
1208
1247
  };
1209
1248
  minWidth: {
1210
- readonly property: "minWidth";
1249
+ readonly property: {
1250
+ readonly physical: "minWidth";
1251
+ readonly logical: "minInlineSize";
1252
+ };
1253
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1211
1254
  readonly transform: (value: string | number) => string | 0;
1212
1255
  };
1213
1256
  maxWidth: {
1214
- readonly property: "maxWidth";
1257
+ readonly property: {
1258
+ readonly physical: "maxWidth";
1259
+ readonly logical: "maxInlineSize";
1260
+ };
1261
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1215
1262
  readonly transform: (value: string | number) => string | 0;
1216
1263
  };
1217
1264
  height: {
1218
- readonly property: "height";
1265
+ readonly property: {
1266
+ readonly physical: "height";
1267
+ readonly logical: "blockSize";
1268
+ };
1269
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1219
1270
  readonly transform: (value: string | number) => string | 0;
1220
1271
  };
1221
1272
  minHeight: {
1222
- readonly property: "minHeight";
1273
+ readonly property: {
1274
+ readonly physical: "minHeight";
1275
+ readonly logical: "minBlockSize";
1276
+ };
1277
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1223
1278
  readonly transform: (value: string | number) => string | 0;
1224
1279
  };
1225
1280
  maxHeight: {
1226
- readonly property: "maxHeight";
1281
+ readonly property: {
1282
+ readonly physical: "maxHeight";
1283
+ readonly logical: "maxBlockSize";
1284
+ };
1285
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1227
1286
  readonly transform: (value: string | number) => string | 0;
1228
1287
  };
1229
1288
  verticalAlign: {
1230
1289
  readonly property: "verticalAlign";
1231
1290
  };
1291
+ direction: {
1292
+ readonly property: "direction";
1293
+ };
1232
1294
  justifyContent: {
1233
1295
  readonly property: "justifyContent";
1234
1296
  };
@@ -1817,36 +1879,67 @@ export declare const variant: import("@codecademy/variance/dist/types/config").V
1817
1879
  };
1818
1880
  dimensions: {
1819
1881
  readonly property: "width";
1820
- readonly properties: readonly ["width", "height"];
1882
+ readonly properties: {
1883
+ readonly physical: readonly ["width", "height"];
1884
+ readonly logical: readonly ["inlineSize", "blockSize"];
1885
+ };
1886
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1821
1887
  readonly transform: (value: string | number) => string | 0;
1822
1888
  };
1823
1889
  width: {
1824
- readonly property: "width";
1890
+ readonly property: {
1891
+ readonly physical: "width";
1892
+ readonly logical: "inlineSize";
1893
+ };
1894
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1825
1895
  readonly transform: (value: string | number) => string | 0;
1826
1896
  };
1827
1897
  minWidth: {
1828
- readonly property: "minWidth";
1898
+ readonly property: {
1899
+ readonly physical: "minWidth";
1900
+ readonly logical: "minInlineSize";
1901
+ };
1902
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1829
1903
  readonly transform: (value: string | number) => string | 0;
1830
1904
  };
1831
1905
  maxWidth: {
1832
- readonly property: "maxWidth";
1906
+ readonly property: {
1907
+ readonly physical: "maxWidth";
1908
+ readonly logical: "maxInlineSize";
1909
+ };
1910
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1833
1911
  readonly transform: (value: string | number) => string | 0;
1834
1912
  };
1835
1913
  height: {
1836
- readonly property: "height";
1914
+ readonly property: {
1915
+ readonly physical: "height";
1916
+ readonly logical: "blockSize";
1917
+ };
1918
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1837
1919
  readonly transform: (value: string | number) => string | 0;
1838
1920
  };
1839
1921
  minHeight: {
1840
- readonly property: "minHeight";
1922
+ readonly property: {
1923
+ readonly physical: "minHeight";
1924
+ readonly logical: "minBlockSize";
1925
+ };
1926
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1841
1927
  readonly transform: (value: string | number) => string | 0;
1842
1928
  };
1843
1929
  maxHeight: {
1844
- readonly property: "maxHeight";
1930
+ readonly property: {
1931
+ readonly physical: "maxHeight";
1932
+ readonly logical: "maxBlockSize";
1933
+ };
1934
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
1845
1935
  readonly transform: (value: string | number) => string | 0;
1846
1936
  };
1847
1937
  verticalAlign: {
1848
1938
  readonly property: "verticalAlign";
1849
1939
  };
1940
+ direction: {
1941
+ readonly property: "direction";
1942
+ };
1850
1943
  justifyContent: {
1851
1944
  readonly property: "justifyContent";
1852
1945
  };
@@ -2435,36 +2528,67 @@ export declare const states: import("@codecademy/variance/dist/types/config").St
2435
2528
  };
2436
2529
  dimensions: {
2437
2530
  readonly property: "width";
2438
- readonly properties: readonly ["width", "height"];
2531
+ readonly properties: {
2532
+ readonly physical: readonly ["width", "height"];
2533
+ readonly logical: readonly ["inlineSize", "blockSize"];
2534
+ };
2535
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
2439
2536
  readonly transform: (value: string | number) => string | 0;
2440
2537
  };
2441
2538
  width: {
2442
- readonly property: "width";
2539
+ readonly property: {
2540
+ readonly physical: "width";
2541
+ readonly logical: "inlineSize";
2542
+ };
2543
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
2443
2544
  readonly transform: (value: string | number) => string | 0;
2444
2545
  };
2445
2546
  minWidth: {
2446
- readonly property: "minWidth";
2547
+ readonly property: {
2548
+ readonly physical: "minWidth";
2549
+ readonly logical: "minInlineSize";
2550
+ };
2551
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
2447
2552
  readonly transform: (value: string | number) => string | 0;
2448
2553
  };
2449
2554
  maxWidth: {
2450
- readonly property: "maxWidth";
2555
+ readonly property: {
2556
+ readonly physical: "maxWidth";
2557
+ readonly logical: "maxInlineSize";
2558
+ };
2559
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
2451
2560
  readonly transform: (value: string | number) => string | 0;
2452
2561
  };
2453
2562
  height: {
2454
- readonly property: "height";
2563
+ readonly property: {
2564
+ readonly physical: "height";
2565
+ readonly logical: "blockSize";
2566
+ };
2567
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
2455
2568
  readonly transform: (value: string | number) => string | 0;
2456
2569
  };
2457
2570
  minHeight: {
2458
- readonly property: "minHeight";
2571
+ readonly property: {
2572
+ readonly physical: "minHeight";
2573
+ readonly logical: "minBlockSize";
2574
+ };
2575
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
2459
2576
  readonly transform: (value: string | number) => string | 0;
2460
2577
  };
2461
2578
  maxHeight: {
2462
- readonly property: "maxHeight";
2579
+ readonly property: {
2580
+ readonly physical: "maxHeight";
2581
+ readonly logical: "maxBlockSize";
2582
+ };
2583
+ readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
2463
2584
  readonly transform: (value: string | number) => string | 0;
2464
2585
  };
2465
2586
  verticalAlign: {
2466
2587
  readonly property: "verticalAlign";
2467
2588
  };
2589
+ direction: {
2590
+ readonly property: "direction";
2591
+ };
2468
2592
  justifyContent: {
2469
2593
  readonly property: "justifyContent";
2470
2594
  };
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,10 +1,10 @@
1
1
  {
2
2
  "name": "@codecademy/gamut-styles",
3
3
  "description": "Styleguide & Component library for codecademy.com",
4
- "version": "17.12.0-alpha.9527f6.0",
4
+ "version": "17.12.0-alpha.9e53d2.0",
5
5
  "author": "Jake Hiller <jake@codecademy.com>",
6
6
  "dependencies": {
7
- "@codecademy/variance": "0.26.0-alpha.9527f6.0",
7
+ "@codecademy/variance": "0.26.0-alpha.9e53d2.0",
8
8
  "@emotion/is-prop-valid": "^1.1.0",
9
9
  "polished": "^4.1.2"
10
10
  },
@@ -24,7 +24,7 @@
24
24
  "@emotion/react": "^11.4.0",
25
25
  "@emotion/styled": "^11.3.0",
26
26
  "lodash": "^4.17.23",
27
- "react": "^17.0.2 || ^18.2.0",
27
+ "react": "^17.0.2 || ^18.3.0",
28
28
  "stylis": "^4.0.7"
29
29
  },
30
30
  "publishConfig": {
@@ -34,5 +34,5 @@
34
34
  "scripts": {
35
35
  "build": "nx build @codecademy/gamut-styles"
36
36
  },
37
- "gitHead": "5f730939192e4a2372c6d41fb95dca1aeffe9af9"
37
+ "gitHead": "cb848b578a24ad4b3657640f469ca68e179c95b7"
38
38
  }