@khanacademy/perseus 25.1.1 → 26.0.0

package/dist/util/react-render.d.ts

@@ -1,2 +1,10 @@
 import * as React from "react";
-export default function render<ElementType extends React.ElementType>(element: React.ReactNode, container: HTMLElement, callback?: () => void): React.ElementRef<ElementType>;
+/**
+ * Renders the given ReactNode inside the given container.
+ * @param element The JSX to render
+ * @param container The HTML elemetn to render into
+ *
+ * @deprecated this function is legacy and exists to support ancient code
+ * paths. Do not use in new code.
+ */
+export default function render(element: React.ReactNode, container: HTMLElement): void;

package/dist/widgets/deprecated-standin/index.d.ts

@@ -13,7 +13,7 @@ declare class DeprecatedStandin extends React.Component<Props> {
     static validate(userInput: UserInput, rubric: Rubric): PerseusScore;
     getUserInput: () => UserInput;
     simpleValidate: (arg1: Rubric) => PerseusScore;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 declare const _default: Readonly<{
     name: string;

package/dist/widgets/expression.d.ts

@@ -257,11 +257,11 @@ declare const _default: Readonly<{
         onFocus: (blurPath: import("../types").FocusPath) => void;
         times: boolean;
         value: string;
-    }, "onChange" | "analytics" | "buttonsVisible" | "static" | "containerSizeClass" | "widgetId" | "problemNum" | "questionCompleted" | "findWidgets" | "trackInteraction" | "keypadElement" | "keypadConfiguration" | "alignment" | "reviewModeRubric" | "isLastUsedWidget"> & {
+    }, "analytics" | "onChange" | "buttonsVisible" | "static" | "containerSizeClass" | "widgetId" | "problemNum" | "questionCompleted" | "findWidgets" | "trackInteraction" | "keypadElement" | "keypadConfiguration" | "alignment" | "reviewModeRubric" | "isLastUsedWidget"> & {
         value?: string | undefined;
+        buttonSets?: import("../perseus-types").LegacyButtonSets | undefined;
         onFocus?: ((blurPath: import("../types").FocusPath) => void) | undefined;
         onBlur?: ((blurPath: import("../types").FocusPath) => void) | undefined;
-        buttonSets?: import("../perseus-types").LegacyButtonSets | undefined;
         apiOptions?: Readonly<Readonly<{
             isArticle?: boolean | undefined;
             onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
@@ -497,11 +497,11 @@ declare const _default: Readonly<{
         onFocus: (blurPath: import("../types").FocusPath) => void;
         times: boolean;
         value: string;
-    }, "onChange" | "analytics" | "buttonsVisible" | "static" | "containerSizeClass" | "widgetId" | "problemNum" | "questionCompleted" | "findWidgets" | "trackInteraction" | "keypadElement" | "keypadConfiguration" | "alignment" | "reviewModeRubric" | "isLastUsedWidget"> & {
+    }, "analytics" | "onChange" | "buttonsVisible" | "static" | "containerSizeClass" | "widgetId" | "problemNum" | "questionCompleted" | "findWidgets" | "trackInteraction" | "keypadElement" | "keypadConfiguration" | "alignment" | "reviewModeRubric" | "isLastUsedWidget"> & {
         value?: string | undefined;
+        buttonSets?: import("../perseus-types").LegacyButtonSets | undefined;
         onFocus?: ((blurPath: import("../types").FocusPath) => void) | undefined;
         onBlur?: ((blurPath: import("../types").FocusPath) => void) | undefined;
-        buttonSets?: import("../perseus-types").LegacyButtonSets | undefined;
         apiOptions?: Readonly<Readonly<{
             isArticle?: boolean | undefined;
             onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;

package/dist/widgets/interactive-graph.d.ts

@@ -115,7 +115,7 @@ declare class InteractiveGraph extends React.Component<Props, State> {
     static defaultProps: DefaultProps;
     getUserInput: Widget["getUserInput"];
     simpleValidate(rubric: Rubric): PerseusScore;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     static getQuadraticCoefficients(coords: ReadonlyArray<Coord>): QuadraticCoefficient;
     static getSinusoidCoefficients(coords: ReadonlyArray<Coord>): SineCoefficient;
     /**

package/dist/widgets/interactive-graphs/backgrounds/axis-arrows.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export default function AxisArrows(): JSX.Element;
+import React from "react";
+export default function AxisArrows(): React.JSX.Element;

package/dist/widgets/interactive-graphs/backgrounds/axis-labels.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export default function AxisLabels(): JSX.Element;
+import React from "react";
+export default function AxisLabels(): React.JSX.Element;

package/dist/widgets/interactive-graphs/backgrounds/axis-tick-labels.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 type ShowTickLabelProps = {
     gridStep: number;
     tickStep: number;
@@ -7,7 +7,7 @@ type ShowTickLabelProps = {
     position: number;
     axisOutOfBounds: boolean;
 };
-export declare const AxisTickLabels: () => JSX.Element;
+export declare const AxisTickLabels: () => React.JSX.Element;
 export declare const showTickLabel: ({ gridStep, tickStep, label, graphEdge, position, axisOutOfBounds, }: ShowTickLabelProps) => boolean;
 export declare function generateTickLocations(tickStep: number, min: number, max: number): number[];
 export {};

package/dist/widgets/interactive-graphs/backgrounds/axis-ticks.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from "react";
 export declare function generateTickLocations(tickStep: number, min: number, max: number): number[];
-export declare const AxisTicks: () => JSX.Element;
+export declare const AxisTicks: () => React.JSX.Element;

package/dist/widgets/interactive-graphs/backgrounds/grid.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { GraphRange } from "../../../perseus-types";
 import type { SizeClass } from "../../../util/sizing-utils";
 import type { vec } from "mafs";
@@ -18,5 +18,5 @@ interface GridProps {
  * @param {vec.Vector2} range the min/max range on the axis
  */
 export declare const lineLabelText: (n: number, tickStep: number, range: vec.Vector2) => string;
-export declare const Grid: (props: GridProps) => JSX.Element | null;
+export declare const Grid: (props: GridProps) => React.JSX.Element | null;
 export {};

package/dist/widgets/interactive-graphs/backgrounds/legacy-grid.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { PerseusImageBackground } from "../../../perseus-types";
 interface Props {
     box: [number, number];
@@ -8,5 +8,5 @@ interface Props {
  * If a graphie URL is provided in `backgroundImage`, will return the rendered graphie background.
  * Otherwise, returns `null`.
  */
-export declare const LegacyGrid: ({ box, backgroundImage }: Props) => JSX.Element | null;
+export declare const LegacyGrid: ({ box, backgroundImage }: Props) => React.JSX.Element | null;
 export {};

package/dist/widgets/interactive-graphs/graph-locked-layer.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { LockedFigure } from "../../perseus-types";
 import type { Interval } from "mafs";
 type Props = {
     lockedFigures: ReadonlyArray<LockedFigure>;
     range: [x: Interval, y: Interval];
 };
-declare const GraphLockedLayer: (props: Props) => JSX.Element;
+declare const GraphLockedLayer: (props: Props) => React.JSX.Element;
 export default GraphLockedLayer;

package/dist/widgets/interactive-graphs/graphs/angle.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { AngleGraphState, MafsGraphProps } from "../types";
 type AngleGraphProps = MafsGraphProps<AngleGraphState>;
-export declare function AngleGraph(props: AngleGraphProps): JSX.Element;
+export declare function AngleGraph(props: AngleGraphProps): React.JSX.Element;
 export {};

package/dist/widgets/interactive-graphs/graphs/circle.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { CircleGraphState, MafsGraphProps } from "../types";
 type CircleGraphProps = MafsGraphProps<CircleGraphState>;
-export declare function CircleGraph(props: CircleGraphProps): JSX.Element;
+export declare function CircleGraph(props: CircleGraphProps): React.JSX.Element;
 export {};

package/dist/widgets/interactive-graphs/graphs/components/angle-indicators.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { vec } from "mafs";
+import * as React from "react";
 import type { CollinearTuple } from "../../../../perseus-types";
 import type { Interval } from "mafs";
 interface PolygonAngleProps {
@@ -11,7 +11,7 @@ interface PolygonAngleProps {
     showAngles: boolean;
     snapTo: "grid" | "angles" | "sides";
 }
-export declare const PolygonAngle: ({ centerPoint, endPoints, range, polygonLines, showAngles, snapTo, }: PolygonAngleProps) => JSX.Element | null;
+export declare const PolygonAngle: ({ centerPoint, endPoints, range, polygonLines, showAngles, snapTo, }: PolygonAngleProps) => React.JSX.Element | null;
 interface AngleProps {
     vertex: vec.Vector2;
     coords: [vec.Vector2, vec.Vector2];
@@ -21,7 +21,7 @@ interface AngleProps {
     snapDegrees: number;
     range: [Interval, Interval];
 }
-export declare const Angle: ({ vertex, coords, showAngles, allowReflexAngles, range, }: AngleProps) => JSX.Element;
+export declare const Angle: ({ vertex, coords, showAngles, allowReflexAngles, range, }: AngleProps) => React.JSX.Element;
 /**
  * Determines if an angle is an inside (false) or outside (true) angle.
  * They way, we know to flip the `largeArc` and `sweepArc` flags.

package/dist/widgets/interactive-graphs/graphs/components/arrowhead.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
 import { type vec } from "mafs";
+import * as React from "react";
 type Props = {
     tip: vec.Vector2;
     angle: number;
     color?: string;
 };
-export declare function Arrowhead(props: Props): JSX.Element;
+export declare function Arrowhead(props: Props): React.JSX.Element;
 export {};

package/dist/widgets/interactive-graphs/graphs/components/css-transform-wrapper.d.ts

@@ -4,4 +4,4 @@ import * as React from "react";
  * Scales and translates the SVG element to match the Mafs view.
  * Use if you do not need/want to use the hook in `use-transform.ts`.
  */
-export declare const MafsCssTransformWrapper: ({ children, }: React.PropsWithChildren<unknown>) => JSX.Element;
+export declare const MafsCssTransformWrapper: ({ children, }: React.PropsWithChildren<unknown>) => React.JSX.Element;

package/dist/widgets/interactive-graphs/graphs/components/movable-line.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { vec } from "mafs";
+import * as React from "react";
 import type { Interval } from "mafs";
 type Props = {
     points: Readonly<[vec.Vector2, vec.Vector2]>;
@@ -11,7 +11,7 @@ type Props = {
         end: boolean;
     };
 };
-export declare const MovableLine: (props: Props) => JSX.Element;
+export declare const MovableLine: (props: Props) => React.JSX.Element;
 type LineProps = {
     start: vec.Vector2;
     end: vec.Vector2;
@@ -22,6 +22,6 @@ type LineProps = {
         end: boolean;
     };
 };
-export declare const Line: (props: LineProps) => JSX.Element;
+export declare const Line: (props: LineProps) => React.JSX.Element;
 export declare function trimRange(range: [Interval, Interval], graphDimensionsInPixels: vec.Vector2): [Interval, Interval];
 export {};

package/dist/widgets/interactive-graphs/graphs/components/movable-point.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { CSSCursor } from "./css-cursor";
 import type { vec } from "mafs";
 type Props = {
@@ -8,5 +8,5 @@ type Props = {
     cursor?: CSSCursor | undefined;
     snapTo?: "grid" | "angles" | "sides";
 };
-export declare const StyledMovablePoint: (props: Props) => JSX.Element;
+export declare const StyledMovablePoint: (props: Props) => React.JSX.Element;
 export {};

package/dist/widgets/interactive-graphs/graphs/components/svg-line.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import type { vec } from "mafs";
 import type { SVGProps } from "react";
 export type Props = {
@@ -7,4 +8,4 @@ export type Props = {
     className?: string;
     testId?: string;
 };
-export declare function SVGLine(props: Props): JSX.Element;
+export declare function SVGLine(props: Props): React.JSX.Element;

package/dist/widgets/interactive-graphs/graphs/components/text-label.d.ts

@@ -1,6 +1,7 @@
+import React from "react";
 import type { TextProps } from "mafs";
 import type { PropsWithChildren } from "react";
 type Props = PropsWithChildren<Pick<TextProps, "x" | "y" | "attach" | "attachDistance" | "color">>;
-export declare const TextLabel: ({ children, ...rest }: Props) => JSX.Element;
-export declare const SvgDefs: () => JSX.Element;
+export declare const TextLabel: ({ children, ...rest }: Props) => React.JSX.Element;
+export declare const SvgDefs: () => React.JSX.Element;
 export {};

package/dist/widgets/interactive-graphs/graphs/components/vector.d.ts

@@ -6,5 +6,5 @@ type Props = {
     color: string;
     style?: React.SVGProps<SVGLineElement>["style"];
 };
-export declare function Vector(props: Props): JSX.Element;
+export declare function Vector(props: Props): React.JSX.Element;
 export {};

package/dist/widgets/interactive-graphs/graphs/linear-system.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { MafsGraphProps, LinearSystemGraphState } from "../types";
 type LinearSystemGraphProps = MafsGraphProps<LinearSystemGraphState>;
-export declare const LinearSystemGraph: (props: LinearSystemGraphProps) => JSX.Element;
+export declare const LinearSystemGraph: (props: LinearSystemGraphProps) => React.JSX.Element;
 export {};

package/dist/widgets/interactive-graphs/graphs/linear.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { MafsGraphProps, LinearGraphState } from "../types";
 type LinearGraphProps = MafsGraphProps<LinearGraphState>;
-export declare const LinearGraph: (props: LinearGraphProps, key: number) => JSX.Element;
+export declare const LinearGraph: (props: LinearGraphProps, key: number) => React.JSX.Element;
 export {};

package/dist/widgets/interactive-graphs/graphs/point.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { PointGraphState, MafsGraphProps } from "../types";
 type PointGraphProps = MafsGraphProps<PointGraphState>;
-export declare function PointGraph(props: PointGraphProps): JSX.Element;
+export declare function PointGraph(props: PointGraphProps): React.JSX.Element;
 export {};

package/dist/widgets/interactive-graphs/graphs/polygon.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { MafsGraphProps, PolygonGraphState } from "../types";
 type Props = MafsGraphProps<PolygonGraphState>;
-export declare const PolygonGraph: (props: Props) => JSX.Element;
+export declare const PolygonGraph: (props: Props) => React.JSX.Element;
 export {};

package/dist/widgets/interactive-graphs/graphs/quadratic.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { QuadraticGraphState, MafsGraphProps } from "../types";
 type QuadraticGraphProps = MafsGraphProps<QuadraticGraphState>;
 type QuadraticCoefficient = [number, number, number];
 export type QuadraticCoords = QuadraticGraphState["coords"];
-export declare function QuadraticGraph(props: QuadraticGraphProps): JSX.Element;
+export declare function QuadraticGraph(props: QuadraticGraphProps): React.JSX.Element;
 export declare const getQuadraticCoefficients: (coords: [import("../../..").Coord, import("../../..").Coord, import("../../..").Coord]) => QuadraticCoefficient | undefined;
 export {};

package/dist/widgets/interactive-graphs/graphs/ray.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { MafsGraphProps, RayGraphState } from "../types";
 type Props = MafsGraphProps<RayGraphState>;
-export declare const RayGraph: (props: Props) => JSX.Element;
+export declare const RayGraph: (props: Props) => React.JSX.Element;
 export {};

package/dist/widgets/interactive-graphs/graphs/segment.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { MafsGraphProps, SegmentGraphState } from "../types";
 type SegmentProps = MafsGraphProps<SegmentGraphState>;
-export declare const SegmentGraph: (props: SegmentProps) => JSX.Element;
+export declare const SegmentGraph: (props: SegmentProps) => React.JSX.Element;
 export {};

package/dist/widgets/interactive-graphs/graphs/sinusoid.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { Coord } from "../../../interactive2/types";
 import type { SinusoidGraphState, MafsGraphProps } from "../types";
 type SinusoidGraphProps = MafsGraphProps<SinusoidGraphState>;
@@ -8,7 +8,7 @@ export type SineCoefficient = {
     phase: number;
     verticalOffset: number;
 };
-export declare function SinusoidGraph(props: SinusoidGraphProps): JSX.Element;
+export declare function SinusoidGraph(props: SinusoidGraphProps): React.JSX.Element;
 export declare const computeSine: (x: number, sinusoidCoefficients: SineCoefficient) => number;
 export declare const getSinusoidCoefficients: (coords: ReadonlyArray<Coord>) => SineCoefficient | undefined;
 export {};

package/dist/widgets/interactive-graphs/locked-figures/locked-ellipse.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import { type LockedEllipseType } from "../../../perseus-types";
-declare const LockedEllipse: (props: LockedEllipseType) => JSX.Element;
+declare const LockedEllipse: (props: LockedEllipseType) => React.JSX.Element;
 export default LockedEllipse;

package/dist/widgets/interactive-graphs/locked-figures/locked-function.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { LockedFunctionType } from "../../../perseus-types";
-declare const LockedFunction: (props: LockedFunctionType) => JSX.Element;
+declare const LockedFunction: (props: LockedFunctionType) => React.JSX.Element;
 export default LockedFunction;

package/dist/widgets/interactive-graphs/locked-figures/locked-line.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { LockedLineType } from "../../../perseus-types";
 import type { Interval } from "mafs";
 type Props = LockedLineType & {
     range: [Interval, Interval];
 };
-declare const LockedLine: (props: Props) => JSX.Element;
+declare const LockedLine: (props: Props) => React.JSX.Element;
 export default LockedLine;

package/dist/widgets/interactive-graphs/locked-figures/locked-point.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import { type LockedPointType } from "../../../perseus-types";
-declare const LockedPoint: (props: LockedPointType) => JSX.Element;
+declare const LockedPoint: (props: LockedPointType) => React.JSX.Element;
 export default LockedPoint;

package/dist/widgets/interactive-graphs/locked-figures/locked-polygon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { LockedPolygonType } from "../../../perseus-types";
-declare const LockedPolygon: (props: LockedPolygonType) => JSX.Element;
+declare const LockedPolygon: (props: LockedPolygonType) => React.JSX.Element;
 export default LockedPolygon;

package/dist/widgets/interactive-graphs/locked-figures/locked-vector.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { LockedVectorType } from "../../../perseus-types";
-declare const LockedVector: (props: LockedVectorType) => JSX.Element;
+declare const LockedVector: (props: LockedVectorType) => React.JSX.Element;
 export default LockedVector;

package/dist/widgets/interactive-graphs/mafs-graph.d.ts

@@ -17,4 +17,4 @@ export type MafsGraphProps = {
     state: InteractiveGraphState;
     dispatch: React.Dispatch<InteractiveGraphAction>;
 };
-export declare const MafsGraph: (props: MafsGraphProps) => JSX.Element;
+export declare const MafsGraph: (props: MafsGraphProps) => React.JSX.Element;

package/dist/widgets/interactive-graphs/protractor.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { vec } from "mafs";
+import * as React from "react";
 import "./protractor.css";
 export declare const centerToRotationHandle: vec.Vector2;
-export declare function Protractor(): JSX.Element;
+export declare function Protractor(): React.JSX.Element;

package/dist/widgets/label-image/answer-choices.d.ts

@@ -1,8 +1,8 @@
 /**
  * Enables single or multiple answers selection using WonderBlocks dropdowns.
  */
-/// <reference types="react" />
 import { SingleSelect } from "@khanacademy/wonder-blocks-dropdown";
+import * as React from "react";
 export type AnswerType = {
     content: string;
     checked: boolean;
@@ -15,5 +15,5 @@ type AnswerChoicesProps = {
     onToggle: (opened: boolean) => unknown;
     disabled: boolean;
 };
-declare const AnswerChoices: (props: AnswerChoicesProps) => JSX.Element;
+declare const AnswerChoices: (props: AnswerChoicesProps) => React.JSX.Element;
 export default AnswerChoices;

package/dist/widgets/label-image/answer-pill.d.ts

@@ -1,6 +1,6 @@
 /// <reference path="../../../types/aphrodite.d.ts" />
-/// <reference types="react" />
 import { type CSSProperties } from "aphrodite";
+import * as React from "react";
 export declare const AnswerPill: (props: {
     selectedAnswers: readonly string[];
     showCorrectness?: "correct" | "incorrect";
@@ -10,4 +10,4 @@ export declare const AnswerPill: (props: {
     hovered?: boolean;
     focused?: boolean;
     onClick?: () => void;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/dist/widgets/label-image/hide-answers-toggle.d.ts

@@ -3,4 +3,4 @@ import * as React from "react";
 export declare const HideAnswersToggle: (props: {
     areAnswersHidden: boolean;
     onChange: React.ComponentPropsWithoutRef<typeof Switch>["onChange"];
-}) => JSX.Element;
+}) => React.JSX.Element;

package/dist/widgets/label-image/marker.d.ts

@@ -31,7 +31,7 @@ export default class Marker extends React.Component<Props> {
     static defaultProps: {
         selected: ReadonlyArray<any>;
     };
-    renderIcon(): JSX.Element;
+    renderIcon(): React.JSX.Element;
     render(): React.ReactNode;
 }
 export {};

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "25.1.1",
+    "version": "26.0.0",
     "publishConfig": {
         "access": "public"
     },
@@ -41,11 +41,11 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.10",
         "@khanacademy/kmath": "^0.1.13",
-        "@khanacademy/math-input": "^19.2.1",
+        "@khanacademy/math-input": "^20.0.0",
         "@khanacademy/perseus-core": "1.5.0",
         "@khanacademy/perseus-linter": "^1.0.0",
-        "@khanacademy/pure-markdown": "^0.3.6",
-        "@khanacademy/simple-markdown": "^0.12.1",
+        "@khanacademy/pure-markdown": "^0.3.7",
+        "@khanacademy/simple-markdown": "^0.13.0",
         "@use-gesture/react": "^10.2.27",
         "mafs": "0.18.7"
     },
@@ -79,8 +79,8 @@
         "lodash.debounce": "^4.0.8",
         "perseus-build-settings": "^0.4.1",
         "prop-types": "15.6.1",
-        "react": "16.14.0",
-        "react-dom": "16.14.0",
+        "react": ">= 18",
+        "react-dom": ">= 18",
         "react-popper": "^2.2.5",
         "underscore": "^1.4.4"
     },
@@ -112,8 +112,8 @@
         "jquery": "^2.1.1",
         "lodash.debounce": "^4.0.8",
         "prop-types": "15.6.1",
-        "react": "16.14.0",
-        "react-dom": "16.14.0",
+        "react": ">= 18",
+        "react-dom": ">= 18",
         "react-popper": "^2.2.5",
         "underscore": "^1.4.4"
     },