@codecademy/gamut 68.1.1-alpha.613ffe.0 → 68.1.1-alpha.759cea.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 (100) hide show
  1. package/README.md +17 -0
  2. package/dist/AccordionAreaDeprecated/index.js +2 -2
  3. package/dist/Alert/elements.d.ts +14 -7
  4. package/dist/Alert/elements.js +5 -5
  5. package/dist/Anchor/index.d.ts +11 -7
  6. package/dist/Anchor/index.js +4 -3
  7. package/dist/Animation/ExpandInCollapseOut.js +1 -1
  8. package/dist/Animation/FadeInSlideOut.js +1 -1
  9. package/dist/Animation/Rotation.js +1 -1
  10. package/dist/Box/Box.d.ts +6 -4
  11. package/dist/Box/Box.js +5 -3
  12. package/dist/Box/FlexBox.d.ts +6 -4
  13. package/dist/Box/FlexBox.js +5 -3
  14. package/dist/Box/GridBox.d.ts +7 -4
  15. package/dist/Box/GridBox.js +5 -3
  16. package/dist/Box/props.d.ts +3 -3
  17. package/dist/Button/CTAButton.d.ts +8 -3
  18. package/dist/Button/FillButton.d.ts +17 -7
  19. package/dist/Button/IconButton.d.ts +17 -7
  20. package/dist/Button/StrokeButton.d.ts +17 -7
  21. package/dist/Button/TextButton.d.ts +17 -7
  22. package/dist/Button/shared/InlineIconButton.d.ts +9 -4
  23. package/dist/Button/shared/styles.d.ts +9 -4
  24. package/dist/Button/shared/types.d.ts +2 -1
  25. package/dist/ButtonBase/ButtonBase.d.ts +9 -3
  26. package/dist/ButtonBase/ButtonBase.js +2 -2
  27. package/dist/Card/elements.d.ts +119 -109
  28. package/dist/Card/styles.d.ts +8 -8
  29. package/dist/Card/types.d.ts +1 -1
  30. package/dist/Coachmark/index.d.ts +1 -1
  31. package/dist/ConnectedForm/ConnectedForm.d.ts +9 -1
  32. package/dist/ConnectedForm/ConnectedForm.js +9 -1
  33. package/dist/ConnectedForm/utils.d.ts +1 -7
  34. package/dist/ContentContainer/index.d.ts +4 -2
  35. package/dist/Disclosure/elements.d.ts +43 -22
  36. package/dist/Disclosure/index.js +1 -1
  37. package/dist/Drawer/index.js +2 -2
  38. package/dist/FeatureShimmer/index.js +2 -2
  39. package/dist/Form/SelectDropdown/SelectDropdown.js +1 -1
  40. package/dist/Form/SelectDropdown/types/internal.d.ts +1 -1
  41. package/dist/Form/elements/Form.d.ts +17 -17
  42. package/dist/Form/elements/Form.js +1 -1
  43. package/dist/Form/elements/FormError.d.ts +2 -2
  44. package/dist/Form/elements/FormError.js +1 -1
  45. package/dist/Form/elements/FormGroup.d.ts +5 -3
  46. package/dist/Form/inputs/Checkbox.d.ts +1 -1
  47. package/dist/Form/inputs/Checkbox.js +7 -7
  48. package/dist/Form/inputs/Input.d.ts +2 -1
  49. package/dist/Form/inputs/Input.js +4 -2
  50. package/dist/Form/inputs/Radio.d.ts +1 -1
  51. package/dist/Form/inputs/Radio.js +2 -2
  52. package/dist/Form/inputs/Select.d.ts +1 -1
  53. package/dist/Form/inputs/Select.js +3 -3
  54. package/dist/Form/inputs/TextArea.d.ts +5 -5
  55. package/dist/Form/inputs/TextArea.js +2 -2
  56. package/dist/GridForm/GridFormButtons/index.d.ts +17 -7
  57. package/dist/List/Header/ListHeaderCol.d.ts +3 -2
  58. package/dist/List/List.d.ts +2 -2
  59. package/dist/List/ListCol.d.ts +3 -2
  60. package/dist/List/ListProvider.d.ts +1 -1
  61. package/dist/List/ListRow.d.ts +2 -2
  62. package/dist/List/ListRow.js +3 -3
  63. package/dist/List/TableHeader.d.ts +3 -2
  64. package/dist/List/elements.d.ts +29 -932
  65. package/dist/List/elements.js +10 -8
  66. package/dist/Menu/elements.d.ts +2 -2
  67. package/dist/Modals/elements.d.ts +1 -1
  68. package/dist/Modals/types.d.ts +5 -4
  69. package/dist/Pagination/AnimatedPaginationButtons.d.ts +45 -36
  70. package/dist/Pagination/EllipsisButton.d.ts +18 -8
  71. package/dist/Pagination/PaginationButton.d.ts +25 -10
  72. package/dist/Pagination/utils.d.ts +36 -32
  73. package/dist/Pagination/utils.js +6 -10
  74. package/dist/Popover/elements.d.ts +8 -4
  75. package/dist/Popover/elements.js +6 -6
  76. package/dist/Popover/types.d.ts +2 -2
  77. package/dist/PopoverContainer/hooks.d.ts +2 -2
  78. package/dist/PopoverContainer/types.d.ts +1 -1
  79. package/dist/Tabs/TabButton.d.ts +8 -3
  80. package/dist/Tabs/TabNavLink.d.ts +9 -4
  81. package/dist/Tag/elements.d.ts +27 -22
  82. package/dist/Tip/InfoTip/InfoTipButton.d.ts +17 -7
  83. package/dist/Tip/InfoTip/styles.d.ts +4 -2
  84. package/dist/Tip/PreviewTip/elements.d.ts +12 -8
  85. package/dist/Tip/ToolTip/elements.d.ts +4 -2
  86. package/dist/Tip/__tests__/helpers.d.ts +1 -1
  87. package/dist/Tip/shared/FloatingTip.js +2 -2
  88. package/dist/Tip/shared/elements.d.ts +12 -6
  89. package/dist/Tip/shared/types.d.ts +2 -2
  90. package/dist/Toaster/index.js +1 -1
  91. package/dist/Toggle/elements.d.ts +4 -2
  92. package/dist/Typography/Text.d.ts +11 -9
  93. package/dist/Typography/Text.js +4 -2
  94. package/dist/utils/index.d.ts +1 -1
  95. package/dist/utils/index.js +1 -1
  96. package/dist/utils/react.d.ts +1 -0
  97. package/dist/utils/react.js +4 -1
  98. package/dist/utils/types.d.ts +51 -1
  99. package/dist/utils/types.js +48 -1
  100. package/package.json +12 -11
@@ -1,5 +1,6 @@
1
- /// <reference types="react" />
2
1
  import { StyleProps } from '@codecademy/variance';
2
+ import React, { ComponentProps } from 'react';
3
+ import { OptionalScrollProps, WithOptionalScrollProps } from '../utils';
3
4
  declare const displayVariants: (props: import("@codecademy/variance/dist/types/config").VariantProps<"variant", false | "title-xxl" | "title-xl" | "title-lg" | "title-md" | "title-sm" | "title-xs" | "p-base" | "p-small" | "p-large"> & {
4
5
  theme?: import("@emotion/react").Theme | undefined;
5
6
  }) => import("@codecademy/variance").CSSObject;
@@ -9,7 +10,7 @@ declare const elementVariants: (props: import("@codecademy/variance/dist/types/c
9
10
  declare const truncateVariants: (props: import("@codecademy/variance/dist/types/config").VariantProps<"truncate", false | "ellipsis" | "fade"> & {
10
11
  theme?: import("@emotion/react").Theme | undefined;
11
12
  }) => import("@codecademy/variance").CSSObject;
12
- declare const textStates: (props: Partial<Record<"center" | "block" | "smooth" | "highlight" | "screenreader", boolean>> & {
13
+ declare const textStates: (props: Partial<Record<"center" | "block" | "highlight" | "screenreader" | "smooth", boolean>> & {
13
14
  theme?: import("@emotion/react").Theme | undefined;
14
15
  }) => import("@codecademy/variance").CSSObject;
15
16
  declare const textProps: import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").Compose<[import("@codecademy/variance/dist/types/config").Parser<import("@codecademy/variance/dist/types/config").TransformerMap<{
@@ -366,7 +367,7 @@ declare const textProps: import("@codecademy/variance/dist/types/config").Parser
366
367
  };
367
368
  };
368
369
  }>>]>>;
369
- export interface BaseTextProps extends StyleProps<typeof textProps>, StyleProps<typeof textStates>, StyleProps<typeof elementVariants>, StyleProps<typeof truncateVariants>, StyleProps<typeof displayVariants> {
370
+ export interface BaseTextProps extends StyleProps<typeof textProps>, StyleProps<typeof textStates>, StyleProps<typeof elementVariants>, StyleProps<typeof truncateVariants>, StyleProps<typeof displayVariants>, OptionalScrollProps {
370
371
  }
371
372
  export interface TextTruncateProps extends BaseTextProps {
372
373
  truncateLines: Exclude<BaseTextProps['truncateLines'], undefined>;
@@ -377,11 +378,12 @@ export interface TextNoTruncateProps extends BaseTextProps {
377
378
  truncate?: never;
378
379
  }
379
380
  export type TextProps = TextTruncateProps | TextNoTruncateProps;
380
- export declare const Text: import("react").ForwardRefExoticComponent<(Omit<{
381
+ declare const StyledText: import("@emotion/styled").StyledComponent<{
381
382
  theme?: import("@emotion/react").Theme | undefined;
382
- as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
383
- } & TextTruncateProps & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "slot" | "style" | "title" | "dir" | "children" | "className" | "aria-hidden" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "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-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" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "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" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof import("react").ClassAttributes<HTMLSpanElement>>, "ref"> | Omit<{
384
- theme?: import("@emotion/react").Theme | undefined;
385
- as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
386
- } & TextNoTruncateProps & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "slot" | "style" | "title" | "dir" | "children" | "className" | "aria-hidden" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "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-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" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "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" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof import("react").ClassAttributes<HTMLSpanElement>>, "ref">) & import("react").RefAttributes<HTMLSpanElement>>;
383
+ as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
384
+ } & TextProps, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "slot" | "style" | "title" | "dir" | "children" | "className" | "aria-hidden" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "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-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" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "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" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof React.ClassAttributes<HTMLSpanElement>>, {}>;
385
+ export type TextPropsWithRef = Omit<WithOptionalScrollProps<ComponentProps<typeof StyledText>>, 'ref'> & {
386
+ ref?: React.Ref<HTMLElement | null>;
387
+ };
388
+ export declare const Text: React.ForwardRefExoticComponent<Omit<TextPropsWithRef, "ref"> & React.RefAttributes<HTMLElement | null>>;
387
389
  export {};
@@ -2,7 +2,7 @@ import _styled from "@emotion/styled/base";
2
2
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
3
3
  import { states, styledOptions, system, variant } from '@codecademy/gamut-styles';
4
4
  import { variance } from '@codecademy/variance';
5
- import { forwardRef } from 'react';
5
+ import React, { forwardRef } from 'react';
6
6
  import { typographyElementVariants, typographyStyleVariants } from './variants';
7
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
8
  const displayVariants = variant({
@@ -105,12 +105,14 @@ const textStates = states({
105
105
  });
106
106
  const textProps = variance.compose(system.layout, system.typography, system.color, system.space, truncateLinesProps);
107
107
 
108
+ // CASSIE, come back to this
109
+
108
110
  // if you're going to truncate, you need to provide both of these props or neither
109
111
 
110
112
  const StyledText = /*#__PURE__*/_styled('span', _extends({}, {
111
113
  target: "e8i0p5k0",
112
114
  label: "StyledText"
113
- }, styledOptions()))(elementVariants, truncateVariants, displayVariants, textStates, textProps, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9UeXBvZ3JhcGh5L1RleHQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZJbUIiLCJmaWxlIjoiLi4vLi4vc3JjL1R5cG9ncmFwaHkvVGV4dC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBzdGF0ZXMsXG4gIHN0eWxlZE9wdGlvbnMsXG4gIHN5c3RlbSxcbiAgdmFyaWFudCxcbn0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCB7IFN0eWxlUHJvcHMsIHZhcmlhbmNlIH0gZnJvbSAnQGNvZGVjYWRlbXkvdmFyaWFuY2UnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgQ29tcG9uZW50UHJvcHMsIGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IHR5cG9ncmFwaHlFbGVtZW50VmFyaWFudHMsIHR5cG9ncmFwaHlTdHlsZVZhcmlhbnRzIH0gZnJvbSAnLi92YXJpYW50cyc7XG5cbmNvbnN0IGRpc3BsYXlWYXJpYW50cyA9IHZhcmlhbnQoe1xuICB2YXJpYW50czogdHlwb2dyYXBoeVN0eWxlVmFyaWFudHMsXG59KTtcblxuY29uc3QgZWxlbWVudFZhcmlhbnRzID0gdmFyaWFudCh7XG4gIHByb3A6ICdhcycsXG4gIHZhcmlhbnRzOiB0eXBvZ3JhcGh5RWxlbWVudFZhcmlhbnRzLFxufSk7XG5cbmNvbnN0IHRydW5jYXRlVmFyaWFudHMgPSB2YXJpYW50KHtcbiAgcHJvcDogJ3RydW5jYXRlJyxcbiAgdmFyaWFudHM6IHtcbiAgICBlbGxpcHNpczoge1xuICAgICAgdGV4dE92ZXJmbG93OiAnZWxsaXBzaXMnLFxuICAgIH0sXG4gICAgZmFkZToge1xuICAgICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgICB0ZXh0T3ZlcmZsb3c6ICdjbGlwJyxcbiAgICAgICcmOmFmdGVyJzoge1xuICAgICAgICBjb250ZW50OiAnXCJcIicsXG4gICAgICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgICAgICB0ZXh0Q29sb3I6ICdiYWNrZ3JvdW5kLWN1cnJlbnQnLFxuICAgICAgICBpbnNldDogMCxcbiAgICAgICAgbGVmdDogMC42NSxcbiAgICAgICAgYmFja2dyb3VuZDpcbiAgICAgICAgICAnbGluZWFyLWdyYWRpZW50KHRvIHJpZ2h0LCByZ2JhKDAsIDAsIDAsIDApLCBjdXJyZW50Q29sb3IgNzUlKScsXG4gICAgICB9LFxuICAgIH0sXG4gIH0sXG59KTtcblxuY29uc3QgdHJ1bmNhdGVMaW5lc1NjYWxlID0geyAxOiAxLCAyOiAyLCAzOiAzLCA0OiA0LCA1OiA1IH07XG5cbmNvbnN0IHRydW5jYXRlTGluZXNQcm9wcyA9IHZhcmlhbmNlLmNyZWF0ZSh7XG4gIHRydW5jYXRlTGluZXM6IHtcbiAgICBzY2FsZTogdHJ1bmNhdGVMaW5lc1NjYWxlLFxuICAgIHByb3BlcnR5OiAnYWxsJyxcbiAgICB0cmFuc2Zvcm06ICh0cnVuY2F0ZUxpbmVzOiBudW1iZXIpID0+XG4gICAgICB0cnVuY2F0ZUxpbmVzID09PSAxXG4gICAgICAgID8ge1xuICAgICAgICAgICAgb3ZlcmZsb3c6ICdoaWRkZW4nLFxuICAgICAgICAgICAgd2hpdGVTcGFjZTogJ25vd3JhcCcsXG4gICAgICAgICAgfVxuICAgICAgICA6IHtcbiAgICAgICAgICAgIG92ZXJmbG93OiAnaGlkZGVuJyxcbiAgICAgICAgICAgIGRpc3BsYXk6ICctd2Via2l0LWJveCcsXG4gICAgICAgICAgICBXZWJraXRCb3hPcmllbnQ6ICd2ZXJ0aWNhbCcsXG4gICAgICAgICAgICBXZWJraXRMaW5lQ2xhbXA6IHRydW5jYXRlTGluZXMsXG4gICAgICAgICAgICAnJjphZnRlcic6IHtcbiAgICAgICAgICAgICAgdG9wOiBgJHsxMDAgLSAxMDAgLyB0cnVuY2F0ZUxpbmVzfSVgLFxuICAgICAgICAgICAgfSxcbiAgICAgICAgICB9LFxuICB9LFxufSk7XG5cbmNvbnN0IHRleHRTdGF0ZXMgPSBzdGF0ZXMoe1xuICBjZW50ZXI6IHtcbiAgICB0ZXh0QWxpZ246ICdjZW50ZXInLFxuICB9LFxuICBibG9jazoge1xuICAgIGRpc3BsYXk6ICdibG9jaycsXG4gIH0sXG4gIGhpZ2hsaWdodDoge1xuICAgIGZvbnRXZWlnaHQ6ICdib2xkJyxcbiAgICBtaW5XaWR0aDogJzAuNHJlbScsXG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgekluZGV4OiAxLFxuICAgIC8vIHRoZSB0ZXh0IGlzIG1vcmUgbGVnaWJsZSBhZ2FpbnN0IHRoZSBiYWNrZ3JvdW5kIGNvbG9yIHdpdGggdGV4dCBzbW9vdGhpbmdcbiAgICBNb3pPc3hGb250U21vb3RoaW5nOiAnZ3JheXNjYWxlJyxcbiAgICBXZWJraXRGb250U21vb3RoaW5nOiAnYW50aWFsaWFzZWQnLFxuICAgICcmOmFmdGVyJzoge1xuICAgICAgYmc6ICdwcmltYXJ5LWludmVyc2UnLFxuICAgICAgY29udGVudDogJ1wiXCInLFxuICAgICAgZGlzcGxheTogJ2Jsb2NrJyxcbiAgICAgIGhlaWdodDogJzMyLjUlJyxcbiAgICAgIGxlZnQ6ICcwJyxcbiAgICAgIG1sOiAnLTAuMnJlbScgYXMgYW55LFxuICAgICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgICB0b3A6ICc1MCUnLFxuICAgICAgd2lkdGg6ICdjYWxjKDEwMCUgKyAwLjRyZW0pJyxcbiAgICAgIHpJbmRleDogLTEsXG4gICAgfSxcbiAgfSxcbiAgc2NyZWVucmVhZGVyOiB7XG4gICAgZGlzcGxheTogJ2lubGluZS1ibG9jaycsXG4gICAgaGVpZ2h0OiAnMXB4JyxcbiAgICB3aWR0aDogJzFweCcsXG4gICAgd2hpdGVTcGFjZTogJ25vd3JhcCcsXG4gICAgb3ZlcmZsb3c6ICdoaWRkZW4nLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIGNvbG9yOiAndHJhbnNwYXJlbnQnLFxuICAgIGxlZnQ6IC05OTk5LFxuICAgIHA6IDAsXG4gICAgbTogMCxcbiAgICBib3JkZXI6ICdub25lJyxcbiAgfSxcbiAgc21vb3RoOiB7XG4gICAgV2Via2l0Rm9udFNtb290aGluZzogJ2FudGlhbGlhc2VkJyxcbiAgICBNb3pPc3hGb250U21vb3RoaW5nOiAnZ3JheXNjYWxlJyxcbiAgfSxcbn0pO1xuXG5jb25zdCB0ZXh0UHJvcHMgPSB2YXJpYW5jZS5jb21wb3NlKFxuICBzeXN0ZW0ubGF5b3V0LFxuICBzeXN0ZW0udHlwb2dyYXBoeSxcbiAgc3lzdGVtLmNvbG9yLFxuICBzeXN0ZW0uc3BhY2UsXG4gIHRydW5jYXRlTGluZXNQcm9wc1xuKTtcblxuZXhwb3J0IGludGVyZmFjZSBCYXNlVGV4dFByb3BzXG4gIGV4dGVuZHMgU3R5bGVQcm9wczx0eXBlb2YgdGV4dFByb3BzPixcbiAgICBTdHlsZVByb3BzPHR5cGVvZiB0ZXh0U3RhdGVzPixcbiAgICBTdHlsZVByb3BzPHR5cGVvZiBlbGVtZW50VmFyaWFudHM+LFxuICAgIFN0eWxlUHJvcHM8dHlwZW9mIHRydW5jYXRlVmFyaWFudHM+LFxuICAgIFN0eWxlUHJvcHM8dHlwZW9mIGRpc3BsYXlWYXJpYW50cz4ge31cblxuLy8gaWYgeW91J3JlIGdvaW5nIHRvIHRydW5jYXRlLCB5b3UgbmVlZCB0byBwcm92aWRlIGJvdGggb2YgdGhlc2UgcHJvcHMgb3IgbmVpdGhlclxuZXhwb3J0IGludGVyZmFjZSBUZXh0VHJ1bmNhdGVQcm9wcyBleHRlbmRzIEJhc2VUZXh0UHJvcHMge1xuICB0cnVuY2F0ZUxpbmVzOiBFeGNsdWRlPEJhc2VUZXh0UHJvcHNbJ3RydW5jYXRlTGluZXMnXSwgdW5kZWZpbmVkPjtcbiAgdHJ1bmNhdGU6IEV4Y2x1ZGU8QmFzZVRleHRQcm9wc1sndHJ1bmNhdGUnXSwgZmFsc2UgfCB1bmRlZmluZWQ+O1xufVxuZXhwb3J0IGludGVyZmFjZSBUZXh0Tm9UcnVuY2F0ZVByb3BzIGV4dGVuZHMgQmFzZVRleHRQcm9wcyB7XG4gIHRydW5jYXRlTGluZXM/OiBuZXZlcjtcbiAgdHJ1bmNhdGU/OiBuZXZlcjtcbn1cblxuZXhwb3J0IHR5cGUgVGV4dFByb3BzID0gVGV4dFRydW5jYXRlUHJvcHMgfCBUZXh0Tm9UcnVuY2F0ZVByb3BzO1xuXG5jb25zdCBTdHlsZWRUZXh0ID0gc3R5bGVkKCdzcGFuJywgc3R5bGVkT3B0aW9uczwnc3Bhbic+KCkpPFRleHRQcm9wcz4oXG4gIGVsZW1lbnRWYXJpYW50cyxcbiAgdHJ1bmNhdGVWYXJpYW50cyxcbiAgZGlzcGxheVZhcmlhbnRzLFxuICB0ZXh0U3RhdGVzLFxuICB0ZXh0UHJvcHNcbik7XG5cbmV4cG9ydCBjb25zdCBUZXh0ID0gZm9yd2FyZFJlZjxcbiAgSFRNTFNwYW5FbGVtZW50LFxuICBDb21wb25lbnRQcm9wczx0eXBlb2YgU3R5bGVkVGV4dD5cbj4oKHsgYXMgPSAnc3BhbicsIG0gPSAwLCAuLi5yZXN0IH0sIHJlZikgPT4gKFxuICA8U3R5bGVkVGV4dCBhcz17YXN9IG09e219IHJlZj17cmVmfSB7Li4ucmVzdH0gLz5cbikpO1xuIl19 */");
115
+ }, styledOptions()))(elementVariants, truncateVariants, displayVariants, textStates, textProps, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9UeXBvZ3JhcGh5L1RleHQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdKbUIiLCJmaWxlIjoiLi4vLi4vc3JjL1R5cG9ncmFwaHkvVGV4dC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBzdGF0ZXMsXG4gIHN0eWxlZE9wdGlvbnMsXG4gIHN5c3RlbSxcbiAgdmFyaWFudCxcbn0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCB7IFN0eWxlUHJvcHMsIHZhcmlhbmNlIH0gZnJvbSAnQGNvZGVjYWRlbXkvdmFyaWFuY2UnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFJlYWN0LCB7IENvbXBvbmVudFByb3BzLCBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBPcHRpb25hbFNjcm9sbFByb3BzLCBXaXRoT3B0aW9uYWxTY3JvbGxQcm9wcyB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB7IHR5cG9ncmFwaHlFbGVtZW50VmFyaWFudHMsIHR5cG9ncmFwaHlTdHlsZVZhcmlhbnRzIH0gZnJvbSAnLi92YXJpYW50cyc7XG5cbmNvbnN0IGRpc3BsYXlWYXJpYW50cyA9IHZhcmlhbnQoe1xuICB2YXJpYW50czogdHlwb2dyYXBoeVN0eWxlVmFyaWFudHMsXG59KTtcblxuY29uc3QgZWxlbWVudFZhcmlhbnRzID0gdmFyaWFudCh7XG4gIHByb3A6ICdhcycsXG4gIHZhcmlhbnRzOiB0eXBvZ3JhcGh5RWxlbWVudFZhcmlhbnRzLFxufSk7XG5cbmNvbnN0IHRydW5jYXRlVmFyaWFudHMgPSB2YXJpYW50KHtcbiAgcHJvcDogJ3RydW5jYXRlJyxcbiAgdmFyaWFudHM6IHtcbiAgICBlbGxpcHNpczoge1xuICAgICAgdGV4dE92ZXJmbG93OiAnZWxsaXBzaXMnLFxuICAgIH0sXG4gICAgZmFkZToge1xuICAgICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgICB0ZXh0T3ZlcmZsb3c6ICdjbGlwJyxcbiAgICAgICcmOmFmdGVyJzoge1xuICAgICAgICBjb250ZW50OiAnXCJcIicsXG4gICAgICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgICAgICB0ZXh0Q29sb3I6ICdiYWNrZ3JvdW5kLWN1cnJlbnQnLFxuICAgICAgICBpbnNldDogMCxcbiAgICAgICAgbGVmdDogMC42NSxcbiAgICAgICAgYmFja2dyb3VuZDpcbiAgICAgICAgICAnbGluZWFyLWdyYWRpZW50KHRvIHJpZ2h0LCByZ2JhKDAsIDAsIDAsIDApLCBjdXJyZW50Q29sb3IgNzUlKScsXG4gICAgICB9LFxuICAgIH0sXG4gIH0sXG59KTtcblxuY29uc3QgdHJ1bmNhdGVMaW5lc1NjYWxlID0geyAxOiAxLCAyOiAyLCAzOiAzLCA0OiA0LCA1OiA1IH07XG5cbmNvbnN0IHRydW5jYXRlTGluZXNQcm9wcyA9IHZhcmlhbmNlLmNyZWF0ZSh7XG4gIHRydW5jYXRlTGluZXM6IHtcbiAgICBzY2FsZTogdHJ1bmNhdGVMaW5lc1NjYWxlLFxuICAgIHByb3BlcnR5OiAnYWxsJyxcbiAgICB0cmFuc2Zvcm06ICh0cnVuY2F0ZUxpbmVzOiBudW1iZXIpID0+XG4gICAgICB0cnVuY2F0ZUxpbmVzID09PSAxXG4gICAgICAgID8ge1xuICAgICAgICAgICAgb3ZlcmZsb3c6ICdoaWRkZW4nLFxuICAgICAgICAgICAgd2hpdGVTcGFjZTogJ25vd3JhcCcsXG4gICAgICAgICAgfVxuICAgICAgICA6IHtcbiAgICAgICAgICAgIG92ZXJmbG93OiAnaGlkZGVuJyxcbiAgICAgICAgICAgIGRpc3BsYXk6ICctd2Via2l0LWJveCcsXG4gICAgICAgICAgICBXZWJraXRCb3hPcmllbnQ6ICd2ZXJ0aWNhbCcsXG4gICAgICAgICAgICBXZWJraXRMaW5lQ2xhbXA6IHRydW5jYXRlTGluZXMsXG4gICAgICAgICAgICAnJjphZnRlcic6IHtcbiAgICAgICAgICAgICAgdG9wOiBgJHsxMDAgLSAxMDAgLyB0cnVuY2F0ZUxpbmVzfSVgLFxuICAgICAgICAgICAgfSxcbiAgICAgICAgICB9LFxuICB9LFxufSk7XG5cbmNvbnN0IHRleHRTdGF0ZXMgPSBzdGF0ZXMoe1xuICBjZW50ZXI6IHtcbiAgICB0ZXh0QWxpZ246ICdjZW50ZXInLFxuICB9LFxuICBibG9jazoge1xuICAgIGRpc3BsYXk6ICdibG9jaycsXG4gIH0sXG4gIGhpZ2hsaWdodDoge1xuICAgIGZvbnRXZWlnaHQ6ICdib2xkJyxcbiAgICBtaW5XaWR0aDogJzAuNHJlbScsXG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgekluZGV4OiAxLFxuICAgIC8vIHRoZSB0ZXh0IGlzIG1vcmUgbGVnaWJsZSBhZ2FpbnN0IHRoZSBiYWNrZ3JvdW5kIGNvbG9yIHdpdGggdGV4dCBzbW9vdGhpbmdcbiAgICBNb3pPc3hGb250U21vb3RoaW5nOiAnZ3JheXNjYWxlJyxcbiAgICBXZWJraXRGb250U21vb3RoaW5nOiAnYW50aWFsaWFzZWQnLFxuICAgICcmOmFmdGVyJzoge1xuICAgICAgYmc6ICdwcmltYXJ5LWludmVyc2UnLFxuICAgICAgY29udGVudDogJ1wiXCInLFxuICAgICAgZGlzcGxheTogJ2Jsb2NrJyxcbiAgICAgIGhlaWdodDogJzMyLjUlJyxcbiAgICAgIGxlZnQ6ICcwJyxcbiAgICAgIG1sOiAnLTAuMnJlbScgYXMgYW55LFxuICAgICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgICB0b3A6ICc1MCUnLFxuICAgICAgd2lkdGg6ICdjYWxjKDEwMCUgKyAwLjRyZW0pJyxcbiAgICAgIHpJbmRleDogLTEsXG4gICAgfSxcbiAgfSxcbiAgc2NyZWVucmVhZGVyOiB7XG4gICAgZGlzcGxheTogJ2lubGluZS1ibG9jaycsXG4gICAgaGVpZ2h0OiAnMXB4JyxcbiAgICB3aWR0aDogJzFweCcsXG4gICAgd2hpdGVTcGFjZTogJ25vd3JhcCcsXG4gICAgb3ZlcmZsb3c6ICdoaWRkZW4nLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIGNvbG9yOiAndHJhbnNwYXJlbnQnLFxuICAgIGxlZnQ6IC05OTk5LFxuICAgIHA6IDAsXG4gICAgbTogMCxcbiAgICBib3JkZXI6ICdub25lJyxcbiAgfSxcbiAgc21vb3RoOiB7XG4gICAgV2Via2l0Rm9udFNtb290aGluZzogJ2FudGlhbGlhc2VkJyxcbiAgICBNb3pPc3hGb250U21vb3RoaW5nOiAnZ3JheXNjYWxlJyxcbiAgfSxcbn0pO1xuXG5jb25zdCB0ZXh0UHJvcHMgPSB2YXJpYW5jZS5jb21wb3NlKFxuICBzeXN0ZW0ubGF5b3V0LFxuICBzeXN0ZW0udHlwb2dyYXBoeSxcbiAgc3lzdGVtLmNvbG9yLFxuICBzeXN0ZW0uc3BhY2UsXG4gIHRydW5jYXRlTGluZXNQcm9wc1xuKTtcblxuLy8gQ0FTU0lFLCBjb21lIGJhY2sgdG8gdGhpc1xuZXhwb3J0IGludGVyZmFjZSBCYXNlVGV4dFByb3BzXG4gIGV4dGVuZHMgU3R5bGVQcm9wczx0eXBlb2YgdGV4dFByb3BzPixcbiAgICBTdHlsZVByb3BzPHR5cGVvZiB0ZXh0U3RhdGVzPixcbiAgICBTdHlsZVByb3BzPHR5cGVvZiBlbGVtZW50VmFyaWFudHM+LFxuICAgIFN0eWxlUHJvcHM8dHlwZW9mIHRydW5jYXRlVmFyaWFudHM+LFxuICAgIFN0eWxlUHJvcHM8dHlwZW9mIGRpc3BsYXlWYXJpYW50cz4sXG4gICAgT3B0aW9uYWxTY3JvbGxQcm9wcyB7fVxuXG4vLyBpZiB5b3UncmUgZ29pbmcgdG8gdHJ1bmNhdGUsIHlvdSBuZWVkIHRvIHByb3ZpZGUgYm90aCBvZiB0aGVzZSBwcm9wcyBvciBuZWl0aGVyXG5leHBvcnQgaW50ZXJmYWNlIFRleHRUcnVuY2F0ZVByb3BzIGV4dGVuZHMgQmFzZVRleHRQcm9wcyB7XG4gIHRydW5jYXRlTGluZXM6IEV4Y2x1ZGU8QmFzZVRleHRQcm9wc1sndHJ1bmNhdGVMaW5lcyddLCB1bmRlZmluZWQ+O1xuICB0cnVuY2F0ZTogRXhjbHVkZTxCYXNlVGV4dFByb3BzWyd0cnVuY2F0ZSddLCBmYWxzZSB8IHVuZGVmaW5lZD47XG59XG5leHBvcnQgaW50ZXJmYWNlIFRleHROb1RydW5jYXRlUHJvcHMgZXh0ZW5kcyBCYXNlVGV4dFByb3BzIHtcbiAgdHJ1bmNhdGVMaW5lcz86IG5ldmVyO1xuICB0cnVuY2F0ZT86IG5ldmVyO1xufVxuXG5leHBvcnQgdHlwZSBUZXh0UHJvcHMgPSBUZXh0VHJ1bmNhdGVQcm9wcyB8IFRleHROb1RydW5jYXRlUHJvcHM7XG5cbmNvbnN0IFN0eWxlZFRleHQgPSBzdHlsZWQoJ3NwYW4nLCBzdHlsZWRPcHRpb25zPCdzcGFuJz4oKSk8VGV4dFByb3BzPihcbiAgZWxlbWVudFZhcmlhbnRzLFxuICB0cnVuY2F0ZVZhcmlhbnRzLFxuICBkaXNwbGF5VmFyaWFudHMsXG4gIHRleHRTdGF0ZXMsXG4gIHRleHRQcm9wc1xuKTtcblxuZXhwb3J0IHR5cGUgVGV4dFByb3BzV2l0aFJlZiA9IE9taXQ8XG4gIFdpdGhPcHRpb25hbFNjcm9sbFByb3BzPENvbXBvbmVudFByb3BzPHR5cGVvZiBTdHlsZWRUZXh0Pj4sXG4gICdyZWYnXG4+ICYgeyByZWY/OiBSZWFjdC5SZWY8SFRNTEVsZW1lbnQgfCBudWxsPiB9O1xuXG5leHBvcnQgY29uc3QgVGV4dCA9IGZvcndhcmRSZWY8SFRNTEVsZW1lbnQgfCBudWxsLCBUZXh0UHJvcHNXaXRoUmVmPihcbiAgKHsgYXMgPSAnc3BhbicsIG0gPSAwLCAuLi5yZXN0IH0sIHJlZikgPT4gKFxuICAgIDxTdHlsZWRUZXh0XG4gICAgICBhcz17YXN9XG4gICAgICBtPXttfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICB7Li4uKHJlc3QgYXMgQ29tcG9uZW50UHJvcHM8dHlwZW9mIFN0eWxlZFRleHQ+KX1cbiAgICAvPlxuICApXG4pO1xuIl19 */");
114
116
  export const Text = /*#__PURE__*/forwardRef(({
115
117
  as = 'span',
116
118
  m = 0,
@@ -3,4 +3,4 @@ export * from './focus';
3
3
  export * from './generateResponsiveClassnames';
4
4
  export * from './omitProps';
5
5
  export * from './useIsMounted';
6
- export * from './types';
6
+ export { CompatibleComponentProps, IconComponentType, OptionalScrollProps, WithChildrenProp, WithOptionalScrollProps, } from './types';
@@ -3,4 +3,4 @@ export * from './focus';
3
3
  export * from './generateResponsiveClassnames';
4
4
  export * from './omitProps';
5
5
  export * from './useIsMounted';
6
- export * from './types';
6
+ export { CompatibleComponentProps, IconComponentType, OptionalScrollProps, WithChildrenProp, WithOptionalScrollProps } from './types';
@@ -1,3 +1,4 @@
1
+ import type React from 'react';
1
2
  /**
2
3
  * Recursively extracts plain text content from React children.
3
4
  *
@@ -33,7 +33,10 @@ export const extractTextContent = children => {
33
33
  return '';
34
34
  }
35
35
  if (/*#__PURE__*/isValidElement(child)) {
36
- const textContent = child.props.children ?? child.props.text ?? '';
36
+ const {
37
+ props
38
+ } = child;
39
+ const textContent = props.children ?? props.text ?? '';
37
40
  return extractTextContent(textContent);
38
41
  }
39
42
  return '';
@@ -1,8 +1,58 @@
1
- /// <reference types="react" />
2
1
  import { GamutIconProps } from '@codecademy/gamut-icons';
2
+ import type { ComponentProps, ElementType } from 'react';
3
3
  export interface WithChildrenProp {
4
4
  children?: React.ReactNode | React.ReactNode[];
5
5
  }
6
6
  export type IconComponentType = {
7
7
  icon: React.ComponentType<GamutIconProps>;
8
8
  };
9
+ /**
10
+ * Optional scroll event handlers (React 19+).
11
+ * Explicitly optional so consumers on React 18 don't get type errors
12
+ * when Gamut is built with React 19 types.
13
+ */
14
+ export interface OptionalScrollProps {
15
+ onScrollEnd?: (event: React.UIEvent<HTMLElement>) => void;
16
+ onScrollEndCapture?: (event: React.UIEvent<HTMLElement>) => void;
17
+ }
18
+ /** Makes onScrollEnd/onScrollEndCapture optional when merging with React 19 DOM types. */
19
+ export type WithOptionalScrollProps<T> = Omit<T, 'onScrollEnd' | 'onScrollEndCapture'> & OptionalScrollProps;
20
+ /**
21
+ * Component props compatible with React 18 consumers when Gamut is built with React 19 types.
22
+ * Use instead of ComponentProps for DOM-based components so onScrollEnd/onScrollEndCapture
23
+ * stay optional. Downstream types that extend or reference these props get the same compatibility.
24
+ */
25
+ export type CompatibleComponentProps<T extends ElementType> = WithOptionalScrollProps<ComponentProps<T>>;
26
+ /**
27
+ * Ref type for component ref props. Accepts React's LegacyRef so consumers can pass
28
+ * refs without type errors (useRef, callback refs, or legacy string refs). Typed with
29
+ * T | null so RefObject<T | null> from useRef<HTMLElement>(null) is assignable (React 18 & 19).
30
+ */
31
+ export type CompatibleRef<T> = React.LegacyRef<T | null> | null;
32
+ /**
33
+ * RefAttributes with ref typed as CompatibleRef so React 18 consumers can pass
34
+ * useRef<Element | null>(null) without type errors. Use with ForwardRefExoticComponent.
35
+ */
36
+ export type CompatibleRefAttributes<R> = Omit<React.RefAttributes<R>, 'ref'> & {
37
+ ref?: CompatibleRef<R>;
38
+ };
39
+ /**
40
+ * Props type for a styled layout/DOM component with React 18–compatible scroll and ref.
41
+ * Use with asCompatibleForwardRefComponent so call sites don’t need casts.
42
+ */
43
+ export type CompatibleStyledComponentProps<C extends React.ComponentType<unknown>, R extends HTMLElement> = WithOptionalScrollProps<React.ComponentProps<C>> & CompatibleRefAttributes<R>;
44
+ /**
45
+ * Treats a styled component (Emotion StyledComponent) as a ForwardRefExoticComponent
46
+ * with compatible props. Emotion’s type doesn’t extend React’s ForwardRefExoticComponent,
47
+ * so this centralizes the type assertion instead of repeating it in each file.
48
+ * Parameter accepts ComponentType<unknown> so Emotion's StyledComponent (ref: LegacyRef) is accepted.
49
+ */
50
+ export declare function asCompatibleForwardRefComponent<P extends CompatibleRefAttributes<HTMLElement>>(component: React.ComponentType<P> | React.ComponentType<unknown>): React.ForwardRefExoticComponent<P>;
51
+ /**
52
+ * Like asCompatibleForwardRefComponent but also preserves the Emotion StyledComponent
53
+ * `withComponent` method on the return type so consumers can use Box.withComponent('span').
54
+ * C is inferred from the component argument so only P is passed at the call site.
55
+ */
56
+ export declare function asCompatibleForwardRefComponentWithStyled<P extends CompatibleRefAttributes<HTMLElement>, C extends React.ComponentType<unknown> & {
57
+ withComponent?: unknown;
58
+ }>(component: C): React.ForwardRefExoticComponent<P> & Pick<C, 'withComponent'>;
@@ -1 +1,48 @@
1
- export {};
1
+ /**
2
+ * Optional scroll event handlers (React 19+).
3
+ * Explicitly optional so consumers on React 18 don't get type errors
4
+ * when Gamut is built with React 19 types.
5
+ */
6
+
7
+ /** Makes onScrollEnd/onScrollEndCapture optional when merging with React 19 DOM types. */
8
+
9
+ /**
10
+ * Component props compatible with React 18 consumers when Gamut is built with React 19 types.
11
+ * Use instead of ComponentProps for DOM-based components so onScrollEnd/onScrollEndCapture
12
+ * stay optional. Downstream types that extend or reference these props get the same compatibility.
13
+ */
14
+
15
+ /**
16
+ * Ref type for component ref props. Accepts React's LegacyRef so consumers can pass
17
+ * refs without type errors (useRef, callback refs, or legacy string refs). Typed with
18
+ * T | null so RefObject<T | null> from useRef<HTMLElement>(null) is assignable (React 18 & 19).
19
+ */
20
+
21
+ /**
22
+ * RefAttributes with ref typed as CompatibleRef so React 18 consumers can pass
23
+ * useRef<Element | null>(null) without type errors. Use with ForwardRefExoticComponent.
24
+ */
25
+
26
+ /**
27
+ * Props type for a styled layout/DOM component with React 18–compatible scroll and ref.
28
+ * Use with asCompatibleForwardRefComponent so call sites don’t need casts.
29
+ */
30
+
31
+ /**
32
+ * Treats a styled component (Emotion StyledComponent) as a ForwardRefExoticComponent
33
+ * with compatible props. Emotion’s type doesn’t extend React’s ForwardRefExoticComponent,
34
+ * so this centralizes the type assertion instead of repeating it in each file.
35
+ * Parameter accepts ComponentType<unknown> so Emotion's StyledComponent (ref: LegacyRef) is accepted.
36
+ */
37
+ export function asCompatibleForwardRefComponent(component) {
38
+ return component;
39
+ }
40
+
41
+ /**
42
+ * Like asCompatibleForwardRefComponent but also preserves the Emotion StyledComponent
43
+ * `withComponent` method on the return type so consumers can use Box.withComponent('span').
44
+ * C is inferred from the component argument so only P is passed at the call site.
45
+ */
46
+ export function asCompatibleForwardRefComponentWithStyled(component) {
47
+ return component;
48
+ }
package/package.json CHANGED
@@ -1,23 +1,23 @@
1
1
  {
2
2
  "name": "@codecademy/gamut",
3
3
  "description": "Styleguide & Component library for Codecademy",
4
- "version": "68.1.1-alpha.613ffe.0",
4
+ "version": "68.1.1-alpha.759cea.0",
5
5
  "author": "Codecademy Engineering <dev@codecademy.com>",
6
6
  "dependencies": {
7
- "@codecademy/gamut-icons": "9.56.4-alpha.613ffe.0",
8
- "@codecademy/gamut-illustrations": "0.58.7-alpha.613ffe.0",
9
- "@codecademy/gamut-patterns": "0.10.26-alpha.613ffe.0",
10
- "@codecademy/gamut-styles": "17.12.1-alpha.613ffe.0",
11
- "@codecademy/variance": "0.26.0",
7
+ "@codecademy/gamut-icons": "9.56.4-alpha.759cea.0",
8
+ "@codecademy/gamut-illustrations": "0.58.7-alpha.759cea.0",
9
+ "@codecademy/gamut-patterns": "0.10.26-alpha.759cea.0",
10
+ "@codecademy/gamut-styles": "17.12.1-alpha.759cea.0",
11
+ "@codecademy/variance": "0.26.1-alpha.759cea.0",
12
12
  "@react-aria/interactions": "3.25.0",
13
13
  "@types/marked": "^4.0.8",
14
14
  "@vidstack/react": "^1.12.12",
15
15
  "classnames": "^2.2.5",
16
- "framer-motion": "^11.18.0",
17
16
  "html-to-react": "^1.6.0",
18
17
  "invariant": "^2.2.4",
19
18
  "lodash": "^4.17.23",
20
19
  "marked": "^4.3.0",
20
+ "motion": "^12.0.0",
21
21
  "polished": "^4.1.2",
22
22
  "react-aria-components": "1.7.1",
23
23
  "react-focus-on": "3.10.0",
@@ -40,8 +40,8 @@
40
40
  "peerDependencies": {
41
41
  "@emotion/react": "^11.4.0",
42
42
  "@emotion/styled": "^11.3.0",
43
- "react": "^17.0.2 || ^18.3.0",
44
- "react-dom": "^17.0.2 || ^18.3.0"
43
+ "react": "^18.3.0 || ^19.0.0",
44
+ "react-dom": "^18.3.0 || ^19.0.0"
45
45
  },
46
46
  "publishConfig": {
47
47
  "access": "public"
@@ -51,7 +51,8 @@
51
51
  "build": "nx build @codecademy/gamut",
52
52
  "build:watch": "yarn build && onchange ./src -- yarn build",
53
53
  "compile": "babel ./src --out-dir ./dist --extensions \".ts,.tsx\"",
54
- "verify": "tsc --noEmit"
54
+ "verify": "tsc --noEmit",
55
+ "verify:react19": "tsc --noEmit"
55
56
  },
56
57
  "sideEffects": [
57
58
  "**/*.css",
@@ -59,5 +60,5 @@
59
60
  "dist/**/[A-Z]**/[A-Z]*.js",
60
61
  "dist/**/[A-Z]**/index.js"
61
62
  ],
62
- "gitHead": "72611dc2db9f1f927d4b4f8419edbc4339db4a70"
63
+ "gitHead": "0994a2faa6e35e5b6074fb48ffeb1863da2fdc99"
63
64
  }