@khanacademy/perseus-editor 13.0.1 → 14.0.0

package/dist/widgets/expression-editor.d.ts

@@ -19,7 +19,6 @@ declare class ExpressionEditor extends React.Component<Props, State> {
     static defaultProps: DefaultProps;
     constructor(props: any);
     change(...args: any[]): any;
-    render(): React.ReactNode;
     serialize: () => any;
     getSaveWarnings: () => any;
     _newEmptyAnswerForm: () => any;
@@ -31,5 +30,6 @@ declare class ExpressionEditor extends React.Component<Props, State> {
     handleToggleDiv: () => void;
     handleTexInsert: (arg1: string) => void;
     handleFunctions: (value: string) => void;
+    render(): React.ReactNode;
 }
 export default ExpressionEditor;

package/dist/widgets/graded-group-editor.d.ts

@@ -44,11 +44,11 @@ declare class GradedGroupEditor extends React.Component<Props> {
     change: (arg1: any, arg2: any, arg3: any) => any;
     handleAddHint: () => void;
     handleRemoveHint: (arg1: React.MouseEvent) => void;
-    render(): React.ReactNode;
     getSaveWarnings: () => any;
     serialize: () => {
         title: string;
         hint: any | null | undefined;
     };
+    render(): React.ReactNode;
 }
 export default GradedGroupEditor;

package/dist/widgets/grapher-editor.d.ts

@@ -7,8 +7,8 @@ declare class GrapherEditor extends React.Component<Props> {
     static widgetName: "grapher";
     static defaultProps: Props;
     change: (arg1: any, arg2: any, arg3: any) => any;
-    render(): React.ReactNode;
     handleAvailableTypesChange: (newAvailableTypes: Array<any>) => void;
     serialize: () => any;
+    render(): React.ReactNode;
 }
 export default GrapherEditor;

package/dist/widgets/group-editor.d.ts

@@ -40,10 +40,10 @@ declare class GroupEditor extends React.Component<Props> {
     static widgetName: "group";
     static defaultProps: Props;
     editor: React.RefObject<Editor>;
-    render(): React.ReactNode;
     _renderMetadataEditor: () => React.ReactElement;
     change: (arg1: any, arg2: any, arg3: any) => any;
     getSaveWarnings: () => ReadonlyArray<any>;
     serialize: () => any;
+    render(): React.ReactNode;
 }
 export default GroupEditor;

package/dist/widgets/iframe-editor.d.ts

@@ -11,8 +11,8 @@ declare class IframeEditor extends React.Component<IframeEditorProps> {
     static widgetName: "iframe";
     static defaultProps: IframeEditorProps;
     change: (arg1: any, arg2: any, arg3: any) => any;
-    render(): React.ReactNode;
     handleSettingsChange: (arg1: any) => void;
     serialize: () => any;
+    render(): React.ReactNode;
 }
 export default IframeEditor;

package/dist/widgets/image-editor.d.ts

@@ -24,14 +24,13 @@ type State = {
     backgroundImageError?: string;
 };
 declare class ImageEditor extends React.Component<Props> {
-    _isMounted: boolean;
     static displayName: string;
     static widgetName: string;
+    _isMounted: boolean;
     static defaultProps: DefaultProps;
     state: State;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    render(): React.JSX.Element;
     _renderRowForLabel(label: any, i: any): React.JSX.Element;
     change(...args: any[]): any;
     removeLabel(labelIndex: any, e: any): void;
@@ -42,5 +41,6 @@ declare class ImageEditor extends React.Component<Props> {
     onUrlChange(url: string | undefined | null, silent: boolean): Promise<void>;
     onRangeChange(type: any, newRange: any): void;
     serialize(): any;
+    render(): React.JSX.Element;
 }
 export default ImageEditor;

package/dist/widgets/input-number-editor.d.ts

@@ -40,7 +40,6 @@ declare class InputNumberEditor extends React.Component<Props> {
     static defaultProps: DefaultProps;
     input: React.RefObject<BlurInput>;
     handleAnswerChange: (arg1: string) => void;
-    render(): React.ReactNode;
     focus: () => boolean;
     serialize: () => {
         value: Props["value"];
@@ -51,5 +50,6 @@ declare class InputNumberEditor extends React.Component<Props> {
         answerType: Props["answerType"];
         rightAlign: Props["rightAlign"];
     };
+    render(): React.ReactNode;
 }
 export default InputNumberEditor;

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

@@ -3,97 +3,7 @@ import * as React from "react";
 import type { PerseusImageBackground, PerseusInteractiveGraphWidgetOptions, APIOptionsWithDefaults, LockedFigure } from "@khanacademy/perseus";
 import type { PropsFor } from "@khanacademy/wonder-blocks-core";
 declare const InteractiveGraph: {
-    new (props: (PerseusInteractiveGraphWidgetOptions & {
-        widgetId: string;
-        alignment: string | null | undefined;
-        static: boolean | null | undefined;
-        problemNum: number | null | undefined;
-        apiOptions: Readonly<Readonly<{
-            isArticle?: boolean | undefined;
-            onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
-            onFocusChange?: ((newFocusPath: import("@khanacademy/perseus").FocusPath, oldFocusPath: import("@khanacademy/perseus").FocusPath, keypadHeight?: number | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
-            GroupMetadataEditor?: React.ComponentType<any> | undefined;
-            showAlignmentOptions?: boolean | undefined;
-            readOnly?: boolean | undefined;
-            answerableCallback?: ((arg1: boolean) => unknown) | undefined;
-            getAnotherHint?: (() => unknown) | undefined;
-            interactionCallback?: ((widgetData: {
-                [widgetId: string]: any;
-            }) => void) | undefined;
-            groupAnnotator?: ((groupNumber: number, widgetId: string) => React.ReactNode) | undefined;
-            imagePlaceholder?: React.ReactNode;
-            widgetPlaceholder?: React.ReactNode;
-            baseElements?: {
-                Link: React.ComponentType<any>;
-            } | undefined;
-            imagePreloader?: ((dimensions: import("../../../perseus/src/types").Dimensions) => React.ReactNode) | undefined;
-            trackInteraction?: ((args: {
-                type: string;
-                id: string;
-                correct?: boolean | undefined;
-            } & Partial<import("../../../perseus/src/types").TrackingGradedGroupExtraArguments> & Partial<import("../../../perseus/src/types").TrackingSequenceExtraArguments>) => void) | undefined;
-            customKeypad?: boolean | undefined;
-            nativeKeypadProxy?: ((blur: () => void) => import("@khanacademy/math-input").KeypadAPI) | undefined;
-            isMobile?: boolean | undefined;
-            setDrawingAreaAvailable?: ((arg1: boolean) => unknown) | undefined;
-            hintProgressColor?: string | undefined;
-            canScrollPage?: boolean | undefined;
-            crossOutEnabled?: boolean | undefined;
-            editorChangeDelay?: number | undefined;
-            flags?: {
-                mafs?: false | ({
-                    circle?: boolean | undefined;
-                    polygon?: boolean | undefined;
-                    linear?: boolean | undefined;
-                    quadratic?: boolean | undefined;
-                    sinusoid?: boolean | undefined;
-                    point?: boolean | undefined;
-                    ray?: boolean | undefined;
-                    segment?: boolean | undefined;
-                    angle?: boolean | undefined;
-                    "linear-system"?: boolean | undefined;
-                    "unlimited-point"?: boolean | undefined;
-                } & {
-                    "interactive-graph-locked-features-m2b"?: boolean | undefined;
-                    "interactive-graph-locked-features-labels"?: boolean | undefined;
-                } & {
-                    "start-coords-ui-phase-1"?: boolean | undefined;
-                    "start-coords-ui-phase-2"?: boolean | undefined;
-                    "start-coords-ui-point"?: boolean | undefined;
-                    "start-coords-ui-polygon"?: boolean | undefined;
-                    "start-coords-ui-angle"?: boolean | undefined;
-                }) | undefined;
-            } | undefined;
-            onWidgetStartProps?: ((widgets: import("@khanacademy/perseus").PerseusWidgetsMap) => void) | undefined;
-        }> & {
-            GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
-            baseElements: {
-                Link: React.ComponentType<any>;
-            };
-            canScrollPage: NonNullable<boolean | undefined>;
-            crossOutEnabled: NonNullable<boolean | undefined>;
-            editorChangeDelay: number;
-            groupAnnotator: (groupNumber: number, widgetId: string) => React.ReactNode;
-            isArticle: NonNullable<boolean | undefined>;
-            isMobile: NonNullable<boolean | undefined>;
-            onFocusChange: (newFocusPath: import("@khanacademy/perseus").FocusPath, oldFocusPath: import("@khanacademy/perseus").FocusPath, keypadHeight?: number | undefined, focusedElement?: HTMLElement | undefined) => unknown;
-            onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
-            readOnly: NonNullable<boolean | undefined>;
-            setDrawingAreaAvailable: (arg1: boolean) => unknown;
-            showAlignmentOptions: NonNullable<boolean | undefined>;
-        }>;
-        keypadElement?: any;
-        questionCompleted?: boolean | undefined;
-        onFocus: (blurPath: import("@khanacademy/perseus").FocusPath) => void;
-        onBlur: (blurPath: import("@khanacademy/perseus").FocusPath) => void;
-        findWidgets: (arg1: import("../../../perseus/src/types").FilterCriterion) => readonly any[];
-        reviewModeRubric: import("../../../perseus/src/widgets/interactive-graph").Rubric;
-        onChange: import("@khanacademy/perseus").ChangeHandler;
-        trackInteraction: (extraData?: Empty | undefined) => void;
-        isLastUsedWidget: boolean;
-        linterContext: import("@khanacademy/perseus-linter").LinterContextProps;
-        containerSizeClass: SizingUtils.SizeClass;
-    }) | Readonly<PerseusInteractiveGraphWidgetOptions & {
+    new (props: PerseusInteractiveGraphWidgetOptions & {
         widgetId: string;
         alignment: string | null | undefined;
         static: boolean | null | undefined;
@@ -183,7 +93,7 @@ declare const InteractiveGraph: {
         isLastUsedWidget: boolean;
         linterContext: import("@khanacademy/perseus-linter").LinterContextProps;
         containerSizeClass: SizingUtils.SizeClass;
-    }>): {
+    }): {
         legacyGraphRef: React.RefObject<{
             context: {
                 strings: import("../../../perseus/src/strings").PerseusStrings;
@@ -583,10 +493,7 @@ declare const InteractiveGraph: {
             areAngleGraphsEqual(prevGraph: import("../../../perseus/src/perseus-types").PerseusGraphTypeAngle, currentGraph: import("../../../perseus/src/perseus-types").PerseusGraphTypeAngle): boolean;
             arePointGraphsEqual(prevGraph: import("../../../perseus/src/perseus-types").PerseusGraphTypePoint, currentGraph: import("../../../perseus/src/perseus-types").PerseusGraphTypePoint): boolean;
             arePolygonGraphsEqual(prevGraph: import("../../../perseus/src/perseus-types").PerseusGraphTypePolygon, currentGraph: import("../../../perseus/src/perseus-types").PerseusGraphTypePolygon): boolean;
-            areSegmentGraphsEqual(prevGraph: import("../../../perseus/src/perseus-types").PerseusGraphTypeSegment, currentGraph: import("../../../perseus/src/perseus-types").PerseusGraphTypeSegment): boolean; /**
-             * An error message to display in the graph area, or true if the
-             * graph is valid.
-             */
+            areSegmentGraphsEqual(prevGraph: import("../../../perseus/src/perseus-types").PerseusGraphTypeSegment, currentGraph: import("../../../perseus/src/perseus-types").PerseusGraphTypeSegment): boolean;
             _lineStroke: () => {
                 "stroke-width"?: number | undefined;
             };
@@ -595,12 +502,7 @@ declare const InteractiveGraph: {
             addLinearControls: () => void;
             removeLinearControls: () => void;
             addQuadraticControls: () => void;
-            updateQuadratic: () => void; /**
-             * The type of markings to display on the graph.
-             * - graph: shows the axes and the grid lines
-             * - grid: shows only the grid lines
-             * - none: shows no markings
-             */
+            updateQuadratic: () => void;
             removeQuadraticControls: () => void;
             addSinusoidControls: () => void;
             updateSinusoid: () => void;
@@ -2422,10 +2324,7 @@ declare const InteractiveGraph: {
             areAngleGraphsEqual(prevGraph: import("../../../perseus/src/perseus-types").PerseusGraphTypeAngle, currentGraph: import("../../../perseus/src/perseus-types").PerseusGraphTypeAngle): boolean;
             arePointGraphsEqual(prevGraph: import("../../../perseus/src/perseus-types").PerseusGraphTypePoint, currentGraph: import("../../../perseus/src/perseus-types").PerseusGraphTypePoint): boolean;
             arePolygonGraphsEqual(prevGraph: import("../../../perseus/src/perseus-types").PerseusGraphTypePolygon, currentGraph: import("../../../perseus/src/perseus-types").PerseusGraphTypePolygon): boolean;
-            areSegmentGraphsEqual(prevGraph: import("../../../perseus/src/perseus-types").PerseusGraphTypeSegment, currentGraph: import("../../../perseus/src/perseus-types").PerseusGraphTypeSegment): boolean; /**
-             * An error message to display in the graph area, or true if the
-             * graph is valid.
-             */
+            areSegmentGraphsEqual(prevGraph: import("../../../perseus/src/perseus-types").PerseusGraphTypeSegment, currentGraph: import("../../../perseus/src/perseus-types").PerseusGraphTypeSegment): boolean;
             _lineStroke: () => {
                 "stroke-width"?: number | undefined;
             };
@@ -2434,12 +2333,7 @@ declare const InteractiveGraph: {
             addLinearControls: () => void;
             removeLinearControls: () => void;
             addQuadraticControls: () => void;
-            updateQuadratic: () => void; /**
-             * The type of markings to display on the graph.
-             * - graph: shows the axes and the grid lines
-             * - grid: shows only the grid lines
-             * - none: shows no markings
-             */
+            updateQuadratic: () => void;
             removeQuadraticControls: () => void;
             addSinusoidControls: () => void;
             updateSinusoid: () => void;
@@ -5974,9 +5868,9 @@ type DefaultProps = {
  * Used in the exercise editor.
  */
 declare class InteractiveGraphEditor extends React.Component<Props> {
+    static widgetName: string;
     displayName: string;
     className: string;
-    static widgetName: string;
     static defaultProps: DefaultProps;
     deprecatedProps: {
         readonly showGraph: (props: any) => {
@@ -5984,10 +5878,10 @@ declare class InteractiveGraphEditor extends React.Component<Props> {
         };
     };
     UNSAFE_componentWillMount(): void;
-    render(): React.JSX.Element;
     changeMatchType: (newValue: any) => void;
     changeStartCoords: (coords: any) => void;
     serialize(): PerseusInteractiveGraphWidgetOptions;
     getSaveWarnings: () => any[];
+    render(): React.JSX.Element;
 }
 export default InteractiveGraphEditor;

package/dist/widgets/matcher-editor.d.ts

@@ -11,9 +11,9 @@ declare class MatcherEditor extends React.Component<Props> {
     };
     static widgetName: "matcher";
     static defaultProps: Props;
-    render(): React.ReactNode;
     onLabelChange: (arg1: number, arg2: React.ChangeEvent<HTMLInputElement>) => void;
     getSaveWarnings: () => ReadonlyArray<string>;
     serialize: any;
+    render(): React.ReactNode;
 }
 export default MatcherEditor;

package/dist/widgets/matrix-editor.d.ts

@@ -12,9 +12,9 @@ declare class MatrixEditor extends React.Component<Props> {
     };
     static widgetName: "matrix";
     static defaultProps: Props;
-    render(): React.ReactNode;
     change: (arg1: any, arg2: any, arg3: any) => any;
     onMatrixBoardSizeChange: (arg1: [number, number]) => void;
     serialize: () => any;
+    render(): React.ReactNode;
 }
 export default MatrixEditor;

package/dist/widgets/measurer-editor.d.ts

@@ -20,7 +20,6 @@ declare class MeasurerEditor extends React.Component<Props> {
     };
     static defaultProps: Props;
     className: string;
-    render(): React.ReactNode;
     change: (arg1: any, arg2: any, arg3: any) => any;
     _changeUrl: (arg1: React.ChangeEvent<HTMLInputElement>) => void;
     _changeTop: (arg1: any) => void;
@@ -28,5 +27,6 @@ declare class MeasurerEditor extends React.Component<Props> {
     _changeImage: (arg1: string, arg2: any) => void;
     renderLabelChoices: (arg1: ReadonlyArray<[string, string]>) => ReadonlyArray<React.ReactElement<React.ComponentProps<"option">>>;
     serialize: () => any;
+    render(): React.ReactNode;
 }
 export default MeasurerEditor;

package/dist/widgets/numeric-input-editor.d.ts

@@ -56,7 +56,6 @@ declare class NumericInputEditor extends React.Component<Props, State> {
         rightAlign: boolean;
     };
     constructor(props: Props);
-    render(): React.JSX.Element;
     change: (...args: any[]) => any;
     onToggleOptions: (choiceIndex: any) => void;
     onTrashAnswer: (choiceIndex: any) => void;
@@ -66,5 +65,6 @@ declare class NumericInputEditor extends React.Component<Props, State> {
     addAnswer: () => void;
     getSaveWarnings: () => never[];
     serialize: () => any;
+    render(): React.JSX.Element;
 }
 export default NumericInputEditor;

package/dist/widgets/orderer-editor.d.ts

@@ -11,10 +11,10 @@ declare class OrdererEditor extends React.Component<Props> {
     };
     static widgetName: "orderer";
     static defaultProps: Props;
-    render(): React.ReactNode;
     onOptionsChange: (arg1: "correctOptions" | "otherOptions", arg2: any, arg3: any) => any;
     onLayoutChange: (arg1: React.ChangeEvent<HTMLInputElement>) => void;
     onHeightChange: (arg1: React.ChangeEvent<HTMLInputElement>) => void;
     serialize: () => any;
+    render(): React.ReactNode;
 }
 export default OrdererEditor;

package/dist/widgets/phet-simulation-editor.d.ts

@@ -13,7 +13,8 @@ type Props = DefaultProps & {
 declare class PhetSimulationEditor extends React.Component<Props> {
     static defaultProps: DefaultProps;
     static widgetName: "phet-simulation";
-    render(): React.ReactNode;
     serialize(): PerseusPhetSimulationWidgetOptions;
+    getSaveWarnings: () => ReadonlyArray<string>;
+    render(): React.ReactNode;
 }
 export default PhetSimulationEditor;

package/dist/widgets/radio/editor.d.ts

@@ -45,7 +45,6 @@ declare class RadioEditor extends React.Component<any> {
     };
     static widgetName: "radio";
     static defaultProps: any;
-    render(): React.ReactNode;
     change: (...args: ReadonlyArray<unknown>) => any;
     onMultipleSelectChange: (arg1: any) => any;
     onCountChoicesChange: (arg1: any) => void;
@@ -58,5 +57,6 @@ declare class RadioEditor extends React.Component<any> {
     focus: () => boolean;
     getSaveWarnings: () => ReadonlyArray<string>;
     serialize: () => any;
+    render(): React.ReactNode;
 }
 export default RadioEditor;

package/dist/widgets/table-editor.d.ts

@@ -13,8 +13,8 @@ declare class TableEditor extends React.Component<Props> {
     static defaultProps: Props;
     numberOfColumns: React.RefObject<components.NumberInput>;
     focus: () => void;
-    render(): React.ReactNode;
     onSizeInput: (arg1: number, arg2: number) => void;
     serialize: () => any;
+    render(): React.ReactNode;
 }
 export default TableEditor;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Perseus editors",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "13.0.1",
+    "version": "14.0.0",
     "publishConfig": {
         "access": "public"
     },
@@ -35,26 +35,27 @@
     },
     "dependencies": {
         "@khanacademy/kas": "^0.3.12",
+        "@khanacademy/keypad-context": "^1.0.1",
         "@khanacademy/kmath": "^0.1.13",
-        "@khanacademy/math-input": "^21.0.1",
-        "@khanacademy/perseus": "^31.0.1",
+        "@khanacademy/math-input": "^21.0.2",
+        "@khanacademy/perseus": "^32.0.0",
         "@khanacademy/perseus-core": "1.5.0"
     },
     "devDependencies": {
-        "@khanacademy/wonder-blocks-accordion": "1.3.1",
-        "@khanacademy/wonder-blocks-banner": "3.0.42",
-        "@khanacademy/wonder-blocks-button": "6.3.1",
-        "@khanacademy/wonder-blocks-clickable": "4.2.1",
-        "@khanacademy/wonder-blocks-core": "6.4.0",
-        "@khanacademy/wonder-blocks-dropdown": "5.3.0",
-        "@khanacademy/wonder-blocks-form": "^4.7.1",
-        "@khanacademy/wonder-blocks-icon": "4.1.0",
-        "@khanacademy/wonder-blocks-icon-button": "5.2.1",
-        "@khanacademy/wonder-blocks-switch": "1.1.16",
-        "@khanacademy/wonder-blocks-timing": "5.0.0",
-        "@khanacademy/wonder-blocks-tokens": "1.3.0",
-        "@khanacademy/wonder-blocks-tooltip": "2.3.1",
-        "@khanacademy/wonder-blocks-typography": "2.1.11",
+        "@khanacademy/wonder-blocks-accordion": "1.3.6",
+        "@khanacademy/wonder-blocks-banner": "3.1.7",
+        "@khanacademy/wonder-blocks-button": "6.3.8",
+        "@khanacademy/wonder-blocks-clickable": "4.2.6",
+        "@khanacademy/wonder-blocks-core": "6.4.3",
+        "@khanacademy/wonder-blocks-dropdown": "5.4.5",
+        "@khanacademy/wonder-blocks-form": "4.9.0",
+        "@khanacademy/wonder-blocks-icon": "4.1.3",
+        "@khanacademy/wonder-blocks-icon-button": "5.3.4",
+        "@khanacademy/wonder-blocks-switch": "1.1.20",
+        "@khanacademy/wonder-blocks-timing": "5.0.1",
+        "@khanacademy/wonder-blocks-tokens": "2.0.0",
+        "@khanacademy/wonder-blocks-tooltip": "2.4.0",
+        "@khanacademy/wonder-blocks-typography": "2.1.14",
         "@khanacademy/wonder-stuff-core": "1.5.2",
         "@phosphor-icons/core": "^2.0.2",
         "aphrodite": "^1.2.5",
@@ -64,25 +65,25 @@
         "katex": "0.11.1",
         "perseus-build-settings": "^0.4.1",
         "prop-types": "15.6.1",
-        "react": ">= 18",
-        "react-dom": ">= 18",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "underscore": "^1.4.4"
     },
     "peerDependencies": {
-        "@khanacademy/wonder-blocks-accordion": "1.3.1",
-        "@khanacademy/wonder-blocks-banner": "3.0.42",
-        "@khanacademy/wonder-blocks-button": "6.3.1",
-        "@khanacademy/wonder-blocks-clickable": "4.2.1",
-        "@khanacademy/wonder-blocks-core": "6.4.0",
-        "@khanacademy/wonder-blocks-dropdown": "5.3.0",
-        "@khanacademy/wonder-blocks-form": "^4.7.1",
-        "@khanacademy/wonder-blocks-icon": "4.1.0",
-        "@khanacademy/wonder-blocks-icon-button": "5.2.1",
-        "@khanacademy/wonder-blocks-switch": "1.1.16",
-        "@khanacademy/wonder-blocks-timing": "5.0.0",
-        "@khanacademy/wonder-blocks-tokens": "1.3.0",
-        "@khanacademy/wonder-blocks-tooltip": "2.3.1",
-        "@khanacademy/wonder-blocks-typography": "2.1.11",
+        "@khanacademy/wonder-blocks-accordion": "1.3.6",
+        "@khanacademy/wonder-blocks-banner": "3.1.7",
+        "@khanacademy/wonder-blocks-button": "6.3.8",
+        "@khanacademy/wonder-blocks-clickable": "4.2.6",
+        "@khanacademy/wonder-blocks-core": "6.4.3",
+        "@khanacademy/wonder-blocks-dropdown": "5.4.5",
+        "@khanacademy/wonder-blocks-form": "4.9.0",
+        "@khanacademy/wonder-blocks-icon": "4.1.3",
+        "@khanacademy/wonder-blocks-icon-button": "5.3.4",
+        "@khanacademy/wonder-blocks-switch": "1.1.20",
+        "@khanacademy/wonder-blocks-timing": "5.0.1",
+        "@khanacademy/wonder-blocks-tokens": "2.0.0",
+        "@khanacademy/wonder-blocks-tooltip": "2.4.0",
+        "@khanacademy/wonder-blocks-typography": "2.1.14",
         "@khanacademy/wonder-stuff-core": "1.5.2",
         "@phosphor-icons/core": "^2.0.2",
         "aphrodite": "^1.2.5",
@@ -90,8 +91,8 @@
         "create-react-class": "15.6.3",
         "jquery": "^2.1.1",
         "prop-types": "15.6.1",
-        "react": ">= 18",
-        "react-dom": ">= 18",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "underscore": "^1.4.4"
     },
     "keywords": []

package/dist/all-widgets.d.ts

@@ -1,22 +0,0 @@
-/// <reference types="react" />
-declare const _default: readonly Readonly<{
-    name: string;
-    displayName: string;
-    getWidget?: (() => import("react").ComponentType<any>) | undefined;
-    widget: import("react").ComponentType<any>;
-    accessible?: boolean | ((props: any) => boolean) | undefined;
-    hidden?: boolean | undefined;
-    version?: import("@khanacademy/perseus").Version | undefined;
-    supportedAlignments?: readonly import("@khanacademy/perseus").Alignment[] | undefined;
-    defaultAlignment?: import("@khanacademy/perseus").Alignment | undefined;
-    getDefaultAlignment?: (() => import("@khanacademy/perseus").Alignment) | undefined;
-    isLintable?: boolean | undefined;
-    tracking?: import("../../perseus/src/types").Tracking | undefined;
-    traverseChildWidgets?: any;
-    transform?: import("../../perseus/src/types").WidgetTransform | undefined;
-    staticTransform?: import("../../perseus/src/types").WidgetTransform | undefined;
-    propUpgrades?: {
-        [key: string]: (arg1: any) => any;
-    } | undefined;
-}>[];
-export default _default;

package/dist/testing-widgets.d.ts

@@ -1,22 +0,0 @@
-/// <reference types="react" />
-declare const _default: readonly Readonly<{
-    name: string;
-    displayName: string;
-    getWidget?: (() => import("react").ComponentType<any>) | undefined;
-    widget: import("react").ComponentType<any>;
-    accessible?: boolean | ((props: any) => boolean) | undefined;
-    hidden?: boolean | undefined;
-    version?: import("@khanacademy/perseus").Version | undefined;
-    supportedAlignments?: readonly import("@khanacademy/perseus").Alignment[] | undefined;
-    defaultAlignment?: import("@khanacademy/perseus").Alignment | undefined;
-    getDefaultAlignment?: (() => import("@khanacademy/perseus").Alignment) | undefined;
-    isLintable?: boolean | undefined;
-    tracking?: import("../../perseus/src/types").Tracking | undefined;
-    traverseChildWidgets?: any;
-    transform?: import("../../perseus/src/types").WidgetTransform | undefined;
-    staticTransform?: import("../../perseus/src/types").WidgetTransform | undefined;
-    propUpgrades?: {
-        [key: string]: (arg1: any) => any;
-    } | undefined;
-}>[];
-export default _default;

package/dist/widgets/example-graphie-widget-editor.d.ts

@@ -1,18 +0,0 @@
-import * as React from "react";
-type Props = any;
-/**
- * This is the widget's editor. This is what shows up on the left side
- * of the screen in the demo page. Only the question writer sees this.
- */
-declare class ExampleGraphieWidgetEditor extends React.Component<Props> {
-    static propTypes: {
-        onChange: import("prop-types").Validator<(...args: any[]) => any>;
-    };
-    static widgetName: "example-graphie-widget";
-    static defaultProps: Props;
-    change: (arg1: any, arg2: any, arg3: any) => any;
-    handleChange: (arg1: any) => void;
-    serialize: () => any;
-    render(): React.ReactNode;
-}
-export default ExampleGraphieWidgetEditor;

package/dist/widgets/example-graphie-widget.d.ts

@@ -1,61 +0,0 @@
-/**
- * This is an example graphie-using widget
- *
- * TODO(jack): Add more comments
- */
-import { Changeable } from "@khanacademy/perseus";
-import * as React from "react";
-import type { Coord, PerseusExampleGraphieWidgetOptions, APIOptionsWithDefaults } from "@khanacademy/perseus";
-type Props = Changeable.ChangeableProps & {
-    apiOptions: APIOptionsWithDefaults;
-    graph: PerseusExampleGraphieWidgetOptions["graph"];
-    coord: PerseusExampleGraphieWidgetOptions["coord"];
-};
-type DefaultProps = {
-    graph: Props["graph"];
-    coord: Props["coord"];
-};
-/**
- * This is the widget's renderer. It shows up in the right column
- * in the demo, and is what is visible to users, and where
- * users enter their answers.
- */
-declare class ExampleGraphieWidget extends React.Component<Props> {
-    static defaultProps: DefaultProps;
-    /**
-     * This is the widget's grading function
-     */
-    static validate(state: any, rubric: any): any;
-    getUserInput: () => any;
-    render(): React.ReactNode;
-    change: (arg1: any, arg2: any, arg3: any) => any;
-    movePoint: (arg1: Coord) => void;
-    _getGridConfig: (arg1: any) => any;
-    setupGraphie: (arg1: any, arg2: any) => any;
-    simpleValidate: (arg1: any) => any;
-}
-/**
- * For this widget to work, we must export it.
- * We also must import this file in src/all-widgets.js
- */
-declare const _default: Readonly<{
-    name: string;
-    displayName: string;
-    getWidget?: (() => typeof ExampleGraphieWidget) | undefined;
-    widget: typeof ExampleGraphieWidget;
-    accessible?: boolean | ((props: any) => boolean) | undefined;
-    hidden?: boolean | undefined;
-    version?: import("@khanacademy/perseus").Version | undefined;
-    supportedAlignments?: readonly import("@khanacademy/perseus").Alignment[] | undefined;
-    defaultAlignment?: import("@khanacademy/perseus").Alignment | undefined;
-    getDefaultAlignment?: (() => import("@khanacademy/perseus").Alignment) | undefined;
-    isLintable?: boolean | undefined;
-    tracking?: import("../../../perseus/src/types").Tracking | undefined;
-    traverseChildWidgets?: any;
-    transform?: import("../../../perseus/src/types").WidgetTransform | undefined;
-    staticTransform?: import("../../../perseus/src/types").WidgetTransform | undefined;
-    propUpgrades?: {
-        [key: string]: (arg1: any) => any;
-    } | undefined;
-}>;
-export default _default;

package/dist/widgets/example-widget-editor.d.ts

@@ -1,20 +0,0 @@
-import * as React from "react";
-type Props = any;
-/**
- * This is the widget's editor. This is what shows up on the left side
- * of the screen in the demo. Only the question writer sees this.
- */
-declare class ExampleWidgetEditor extends React.Component<Props> {
-    static propTypes: {
-        onChange: import("prop-types").Validator<(...args: any[]) => any>;
-    };
-    static widgetName: "example-widget";
-    static defaultProps: Props;
-    input: React.RefObject<HTMLInputElement>;
-    handleAnswerChange: (arg1: React.ChangeEvent<HTMLInputElement>) => void;
-    render(): React.ReactNode;
-    change: (arg1: any, arg2: any, arg3: any) => any;
-    focus: () => boolean;
-    serialize: () => any;
-}
-export default ExampleWidgetEditor;