@khanacademy/perseus 67.0.0 → 67.1.1

package/dist/widget-ai-utils/image/image-ai-utils.d.ts

@@ -1,4 +1,4 @@
-import type image from "../../widgets/image/image";
+import type image from "../../widgets/image/image.class";
 import type React from "react";
 export type ImagePromptJSON = {
     type: "image";

package/dist/widget-ai-utils/radio/radio-ai-utils.d.ts

@@ -10,7 +10,7 @@ export type RadioPromptJSON = {
     hasNoneOfTheAbove: boolean;
     options: BasicOption[];
     userInput: {
-        selectedOptions: ReadonlyArray<boolean>;
+        selectedOptions: ReadonlyArray<string>;
     };
 };
 export declare const getPromptJSON: (renderProps: RecursiveReadonly<React.ComponentProps<typeof radio.widget>>, userInput: RecursiveReadonly<PerseusRadioUserInput>) => RadioPromptJSON;

package/dist/widgets/image/image.class.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { PerseusI18nContext } from "../../components/i18n-context";
+import type { WidgetProps, Widget } from "../../types";
+import type { ImagePromptJSON } from "../../widget-ai-utils/image/image-ai-utils";
+import type { PerseusImageWidgetOptions } from "@khanacademy/perseus-core";
+type ExternalProps = WidgetProps<PerseusImageWidgetOptions>;
+export interface Props extends ExternalProps {
+    alignment: NonNullable<ExternalProps["alignment"]>;
+    title: NonNullable<ExternalProps["title"]>;
+    range: NonNullable<ExternalProps["range"]>;
+    box: NonNullable<ExternalProps["box"]>;
+    backgroundImage: NonNullable<ExternalProps["backgroundImage"]>;
+    labels: NonNullable<ExternalProps["labels"]>;
+    alt: NonNullable<ExternalProps["alt"]>;
+    caption: NonNullable<ExternalProps["caption"]>;
+    linterContext: NonNullable<ExternalProps["linterContext"]>;
+}
+interface DefaultProps extends Partial<Props> {
+    alignment: Props["alignment"];
+    title: Props["title"];
+    range: Props["range"];
+    box: Props["box"];
+    backgroundImage: Props["backgroundImage"];
+    labels: Props["labels"];
+    alt: Props["alt"];
+    caption: Props["caption"];
+    linterContext: Props["linterContext"];
+}
+declare class ImageWidget extends React.Component<Props> implements Widget {
+    static contextType: React.Context<import("../../components/i18n-context").I18nContextType>;
+    context: React.ContextType<typeof PerseusI18nContext>;
+    static defaultProps: DefaultProps;
+    isWidget: true;
+    getPromptJSON(): ImagePromptJSON;
+    render(): React.ReactNode;
+}
+declare const _default: {
+    name: string;
+    displayName: string;
+    widget: typeof ImageWidget;
+    isLintable: true;
+};
+export default _default;

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

@@ -1,43 +1,3 @@
 import * as React from "react";
-import { PerseusI18nContext } from "../../components/i18n-context";
-import type { WidgetProps, Widget } from "../../types";
-import type { ImagePromptJSON } from "../../widget-ai-utils/image/image-ai-utils";
-import type { PerseusImageWidgetOptions } from "@khanacademy/perseus-core";
-type ExternalProps = WidgetProps<PerseusImageWidgetOptions>;
-type Props = ExternalProps & {
-    alignment: NonNullable<ExternalProps["alignment"]>;
-    title: NonNullable<ExternalProps["title"]>;
-    range: NonNullable<ExternalProps["range"]>;
-    box: NonNullable<ExternalProps["box"]>;
-    backgroundImage: NonNullable<ExternalProps["backgroundImage"]>;
-    labels: NonNullable<ExternalProps["labels"]>;
-    alt: NonNullable<ExternalProps["alt"]>;
-    caption: NonNullable<ExternalProps["caption"]>;
-    linterContext: NonNullable<ExternalProps["linterContext"]>;
-};
-type DefaultProps = {
-    alignment: Props["alignment"];
-    title: Props["title"];
-    range: Props["range"];
-    box: Props["box"];
-    backgroundImage: Props["backgroundImage"];
-    labels: Props["labels"];
-    alt: Props["alt"];
-    caption: Props["caption"];
-    linterContext: Props["linterContext"];
-};
-declare class ImageWidget extends React.Component<Props> implements Widget {
-    static contextType: React.Context<import("../../components/i18n-context").I18nContextType>;
-    context: React.ContextType<typeof PerseusI18nContext>;
-    static defaultProps: DefaultProps;
-    isWidget: true;
-    getPromptJSON(): ImagePromptJSON;
-    render(): React.ReactNode;
-}
-declare const _default: {
-    name: string;
-    displayName: string;
-    widget: typeof ImageWidget;
-    isLintable: true;
-};
-export default _default;
+import type { Props } from "./image.class";
+export declare const ImageComponent: ({ apiOptions, alt, backgroundImage, box, caption, linterContext, labels, range, title, trackInteraction, }: Props) => React.JSX.Element;

package/dist/widgets/image/index.d.ts

@@ -1 +1 @@
-export { default } from "./image";
+export { default } from "./image.class";

package/dist/widgets/number-line/number-line.d.ts

@@ -1,9 +1,8 @@
 import * as React from "react";
 import { PerseusI18nContext } from "../../components/i18n-context";
-import type { FocusPath, Widget, WidgetProps, UniversalWidgetProps } from "../../types";
+import type { FocusPath, Widget, WidgetProps } from "../../types";
 import type { NumberLinePromptJSON } from "../../widget-ai-utils/number-line/number-line-ai-utils";
 import type { PerseusNumberLineUserInput, PerseusNumberLineWidgetOptions, NumberLinePublicWidgetOptions } from "@khanacademy/perseus-core";
-import type { PropsFor } from "@khanacademy/wonder-blocks-core";
 /**
  * The type of `this.props` inside the NumberLine widget.
  */
@@ -33,10 +32,6 @@ type DefaultProps = {
     showTooltips: Props["showTooltips"];
     apiOptions: Props["apiOptions"];
 };
-/**
- * The props returned by the `transform` and `staticTransform` functions.
- */
-type RenderProps = Omit<PropsFor<typeof NumberLine>, keyof UniversalWidgetProps>;
 type State = {
     numDivisionsEmpty: boolean;
 };
@@ -45,6 +40,18 @@ declare class NumberLine extends React.Component<Props, State> implements Widget
     context: React.ContextType<typeof PerseusI18nContext>;
     static defaultProps: DefaultProps;
     state: any;
+    /**
+     * isTickCtrl seems like it can be null
+     * but default props only work with undefined,
+     * so this handles both null/undefined
+     */
+    getIsTickCtrl(): boolean;
+    /**
+     * snapDivisions seems like it can be null
+     * but default props only work with undefined,
+     * so this handles both null/undefined
+     */
+    getSnapDivisions(): number;
     isValid: () => boolean;
     onNumDivisionsChange: (arg1: number, arg2: any) => void;
     _handleTickCtrlFocus: () => void;
@@ -69,88 +76,23 @@ declare class NumberLine extends React.Component<Props, State> implements Widget
      * [LEMS-3185] do not trust serializedState/restoreSerializedState
      */
     getSerializedState(): {
-        numDivisions: number;
-        numLinePosition: number;
-        rel: string;
+        alignment: string | null | undefined;
+        static: boolean | null | undefined;
         range: number[];
-        labelRange: Array<number | null>;
+        labelRange: (number | null)[];
         labelStyle: string;
         labelTicks: boolean;
         divisionRange: number[];
         snapDivisions: number;
-        isTickCtrl: boolean;
         isInequality: boolean;
-        showTooltips?: boolean;
-        reviewModeRubric?: Empty | null | undefined;
-        trackInteraction: (extraData?: Empty | undefined) => void;
-        widgetId: string;
-        alignment: string | null | undefined;
-        static: boolean | null | undefined;
-        problemNum: number | null | undefined;
-        apiOptions: Readonly<Readonly<{
-            isArticle?: boolean;
-            onFocusChange?: (newFocusPath: FocusPath, oldFocusPath: FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
-            GroupMetadataEditor?: React.ComponentType<any>;
-            showAlignmentOptions?: boolean;
-            readOnly?: boolean;
-            answerableCallback?: (arg1: boolean) => unknown;
-            getAnotherHint?: () => unknown;
-            interactionCallback?: (widgetData: {
-                [widgetId: string]: any;
-            }) => void;
-            groupAnnotator?: (groupNumber: number, widgetId: string) => React.ReactNode;
-            imagePlaceholder?: React.ReactNode;
-            widgetPlaceholder?: React.ReactNode;
-            baseElements?: {
-                Link: React.ComponentType<any>;
-            };
-            imagePreloader?: (dimensions: import("../../types").Dimensions) => React.ReactNode;
-            trackInteraction?: (args: {
-                type: string;
-                id: string;
-                correct?: boolean;
-            } & Partial<import("../../types").TrackingGradedGroupExtraArguments> & Partial<{
-                visible: number;
-            }>) => void;
-            customKeypad?: boolean;
-            nativeKeypadProxy?: (blur: () => void) => import("@khanacademy/math-input").KeypadAPI;
-            isMobile?: boolean;
-            isMobileApp?: boolean;
-            setDrawingAreaAvailable?: (arg1: boolean) => unknown;
-            hintProgressColor?: string;
-            canScrollPage?: boolean;
-            editorChangeDelay?: number;
-            flags?: Record<"new-radio-widget", boolean>;
-        }> & {
-            baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
-            canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;
-            editorChangeDelay: NonNullable<import("../..").APIOptions["editorChangeDelay"]>;
-            groupAnnotator: NonNullable<import("../..").APIOptions["groupAnnotator"]>;
-            isArticle: NonNullable<import("../..").APIOptions["isArticle"]>;
-            isMobile: NonNullable<import("../..").APIOptions["isMobile"]>;
-            isMobileApp: NonNullable<import("../..").APIOptions["isMobileApp"]>;
-            onFocusChange: NonNullable<import("../..").APIOptions["onFocusChange"]>;
-            readOnly: NonNullable<import("../..").APIOptions["readOnly"]>;
-            setDrawingAreaAvailable: NonNullable<import("../..").APIOptions["setDrawingAreaAvailable"]>;
-            showAlignmentOptions: NonNullable<import("../..").APIOptions["showAlignmentOptions"]>;
-        }>;
-        keypadElement?: any;
-        questionCompleted?: boolean;
-        onFocus: (blurPath: FocusPath) => void;
-        onBlur: (blurPath: FocusPath) => void;
-        findWidgets: (criterion: import("../../types").FilterCriterion) => ReadonlyArray<Widget>;
-        reviewMode: boolean;
-        showSolutions?: import("@khanacademy/perseus-core").ShowSolutions;
-        onChange: import("../..").ChangeHandler;
-        handleUserInput: (newUserInput: PerseusNumberLineUserInput, cb?: () => void, silent?: boolean) => void;
-        isLastUsedWidget: boolean;
-        linterContext: import("@khanacademy/perseus-linter").LinterContextProps;
-        containerSizeClass: import("../../util/sizing-utils").SizeClass;
+        showTooltips: boolean | undefined;
+        isTickCtrl: boolean;
+        numDivisions: number;
+        numLinePosition: number;
+        rel: string;
     };
     render(): React.ReactNode;
 }
-declare function transform(editorProps: NumberLinePublicWidgetOptions): RenderProps;
-declare function staticTransform(editorProps: PerseusNumberLineWidgetOptions): RenderProps;
 /**
  * @deprecated and likely a very broken API
  * [LEMS-3185] do not trust serializedState/restoreSerializedState
@@ -162,8 +104,6 @@ declare const _default: {
     name: string;
     displayName: string;
     widget: typeof NumberLine;
-    transform: typeof transform;
-    staticTransform: typeof staticTransform;
     getCorrectUserInput: typeof getCorrectUserInput;
     getStartUserInput: typeof getStartUserInput;
     getUserInputFromSerializedState: typeof getUserInputFromSerializedState;

package/dist/widgets/radio/base-radio.d.ts

@@ -28,9 +28,7 @@ type Props = {
     multipleSelect?: boolean;
     reviewModeRubric?: PerseusRadioWidgetOptions | null;
     reviewMode: boolean;
-    onChange: (newValues: {
-        checked: ReadonlyArray<boolean>;
-    }) => void;
+    onChange: (checkedChoiceIds: ReadonlyArray<string>) => void;
     registerFocusFunction?: (arg1: FocusFunction) => void;
     isLastUsedWidget?: boolean;
 };

package/dist/widgets/radio/multiple-choice-component.new.d.ts

@@ -8,7 +8,7 @@ export interface MultipleChoiceComponentProps {
     countChoices: boolean | null | undefined;
     multipleSelect?: boolean;
     numCorrect: number;
-    onChoiceChange: (choiceIndex: number, newCheckedState: boolean) => void;
+    onChoiceChange: (choiceId: string, newCheckedState: boolean) => void;
     reviewMode: boolean;
 }
 /**

package/dist/widgets/radio/multiple-choice-widget.new.d.ts

@@ -1,7 +1,6 @@
 import * as React from "react";
 import type { PerseusStrings } from "../../strings";
-import type { WidgetProps, ChoiceState, Widget } from "../../types";
-import type { RadioPromptJSON } from "../../widget-ai-utils/radio/radio-ai-utils";
+import type { ChoiceState, Widget } from "../../types";
 import type { PerseusRadioChoice, PerseusRadioRubric, PerseusRadioUserInput } from "@khanacademy/perseus-core";
 /**
  * Represents a single choice in the MultipleChoiceComponent
@@ -41,81 +40,5 @@ export interface RadioChoiceWithMetadata extends PerseusRadioChoice {
     originalIndex: number;
     correct?: boolean;
 }
-type Props = WidgetProps<RenderProps, PerseusRadioUserInput, PerseusRadioRubric>;
-type DefaultProps = Required<Pick<Props, "choices" | "multipleSelect" | "countChoices" | "deselectEnabled" | "linterContext" | "showSolutions">>;
-/**
- * MultipleChoiceWidget implements the Widget interface for multiple choice questions.
- *
- * It handles Perseus-specific logic and state management while delegating
- * UI rendering to the MultipleChoiceComponent.
- *
- * This class is exported as "Radio" for backwards compatibility with existing content,
- * though it supports both radio-button (single select) and checkbox (multiple select) modes.
- * Eventually, when Content Backfills are set up, we will officially rename the Radio Widget to MultipleChoiceWidget.
- *
- * Created as part of the Radio Revitalization Project (LEMS-2933).
- */
-declare class MultipleChoiceWidget extends React.Component<Props> implements Widget {
-    static defaultProps: DefaultProps;
-    /**
-     * Gets the JSON representation of the User Input for AI assistance.
-     *
-     * This method is used to provide structured data about the widget's state
-     * to AI systems that can help users with answering questions.
-     *
-     * @returns A structured JSON object representing the widget's prompt
-     */
-    getPromptJSON(): RadioPromptJSON;
-    /**
-     * Renders content that may contain nested widgets (currently only passage-refs).
-     * Parses the content, extracts any widgets, and returns a Renderer component
-     * configured with the appropriate context.
-     *
-     * @param content - The content to render (defaults to empty string)
-     * @returns A React element with the rendered content
-     */
-    renderContent: (content?: string) => React.ReactNode;
-    /**
-     * Handles a user's selection of a choice.
-     *
-     * Updates choice states based on the selection, handles single/multiple
-     * selection logic, and notifies Perseus of the interaction.
-     *
-     * @param choiceIndex - The index of the choice that changed
-     * @param newCheckedState - Whether the choice is now selected
-     */
-    handleChoiceChange: (choiceIndex: number, newCheckedState: boolean) => void;
-    /**
-     * Transforms choice states into component-ready props for the MultipleChoiceComponent.
-     *
-     * This method:
-     * 1. Processes each choice's content
-     * 2. Maps state properties (selected, rationaleShown, etc.) to component props
-     * 3. Renders content and rationales with nested widget support
-     * 4. Determines correctness display based on choice data or review rubric
-     *
-     * @param choiceStates - The current state of each choice
-     * @returns An array of formatted choice props ready for the MultipleChoiceComponent
-     */
-    buildChoiceProps: (choiceStates: ReadonlyArray<ChoiceState>) => ReadonlyArray<ChoiceType>;
-    /**
-     * Prepares the choice props for rendering in the MultipleChoiceComponent.
-     *
-     * This method:
-     * 1. Uses getChoiceStates() to determine the appropriate state for each choice
-     *    based on widget mode (review/static) and user selections
-     * 2. Transforms these states into component props via buildChoiceProps(),
-     *    including rendered content, correctness indicators, and rationales
-     *
-     * @returns An array of choice props ready for the component
-     */
-    prepareChoicesProps: () => readonly ChoiceType[];
-    /**
-     * Renders the MultipleChoiceComponent with the current props.
-     *
-     * @returns The rendered React component
-     */
-    render(): React.ReactNode;
-}
-declare const Radio: typeof MultipleChoiceWidget;
+declare const Radio: React.ForwardRefExoticComponent<RenderProps & import("../../types").UniversalWidgetProps<PerseusRadioRubric, PerseusRadioUserInput, Empty> & React.RefAttributes<Widget>>;
 export default Radio;

package/dist/widgets/radio/radio-component.d.ts

@@ -30,9 +30,7 @@ declare class Radio extends React.Component<Props> implements Widget {
     _renderRenderer: (content?: string) => React.ReactElement;
     focus(choiceIndex?: number | null): boolean;
     registerFocusFunction(fun: FocusFunction): void;
-    updateChoices: (newValueLists: Readonly<{
-        checked: ReadonlyArray<boolean>;
-    }>) => void;
+    updateChoices: (checkedChoiceIds: ReadonlyArray<string>) => void;
     getPromptJSON(): RadioPromptJSON;
     render(): React.ReactNode;
 }

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

@@ -1,8 +1,8 @@
 import Radio from "./radio.ff";
 import type { RenderProps } from "./radio-component";
 import type { PerseusStrings } from "../../strings";
-import type { PerseusRadioUserInput, PerseusRadioWidgetOptions, RadioPublicWidgetOptions } from "@khanacademy/perseus-core";
-declare function getStartUserInput(options: RadioPublicWidgetOptions): PerseusRadioUserInput;
+import type { PerseusRadioUserInput, PerseusRadioWidgetOptions } from "@khanacademy/perseus-core";
+declare function getStartUserInput(): PerseusRadioUserInput;
 declare function getCorrectUserInput(options: PerseusRadioWidgetOptions): PerseusRadioUserInput;
 declare const _default: {
     name: string;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core Perseus API (includes renderers and widgets)",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "67.0.0",
+  "version": "67.1.1",
   "publishConfig": {
     "access": "public"
   },
@@ -42,36 +42,36 @@
     "tiny-invariant": "1.3.1",
     "uuid": "^10.0.0",
     "@khanacademy/kas": "2.1.0",
-    "@khanacademy/keypad-context": "3.1.5",
-    "@khanacademy/kmath": "2.1.5",
-    "@khanacademy/math-input": "26.1.6",
-    "@khanacademy/perseus-core": "18.8.0",
-    "@khanacademy/perseus-linter": "4.2.5",
-    "@khanacademy/perseus-score": "7.6.2",
+    "@khanacademy/keypad-context": "3.2.1",
+    "@khanacademy/kmath": "2.2.1",
+    "@khanacademy/math-input": "26.2.1",
+    "@khanacademy/perseus-core": "18.9.1",
+    "@khanacademy/perseus-linter": "4.3.1",
+    "@khanacademy/perseus-score": "7.7.1",
     "@khanacademy/perseus-utils": "2.1.0",
-    "@khanacademy/simple-markdown": "2.1.0",
-    "@khanacademy/pure-markdown": "2.2.0"
+    "@khanacademy/pure-markdown": "2.2.0",
+    "@khanacademy/simple-markdown": "2.1.0"
   },
   "devDependencies": {
-    "@khanacademy/wonder-blocks-banner": "4.2.14",
-    "@khanacademy/wonder-blocks-button": "11.0.0",
-    "@khanacademy/wonder-blocks-clickable": "7.1.20",
-    "@khanacademy/wonder-blocks-core": "12.3.0",
-    "@khanacademy/wonder-blocks-data": "14.1.4",
-    "@khanacademy/wonder-blocks-dropdown": "10.3.2",
-    "@khanacademy/wonder-blocks-form": "7.3.2",
-    "@khanacademy/wonder-blocks-icon-button": "10.3.15",
-    "@khanacademy/wonder-blocks-icon": "5.2.14",
-    "@khanacademy/wonder-blocks-labeled-field": "4.0.0",
-    "@khanacademy/wonder-blocks-layout": "3.1.31",
-    "@khanacademy/wonder-blocks-link": "9.1.20",
-    "@khanacademy/wonder-blocks-pill": "3.1.35",
-    "@khanacademy/wonder-blocks-popover": "6.1.24",
-    "@khanacademy/wonder-blocks-progress-spinner": "3.1.31",
-    "@khanacademy/wonder-blocks-switch": "3.3.13",
-    "@khanacademy/wonder-blocks-tokens": "12.0.2",
-    "@khanacademy/wonder-blocks-tooltip": "4.1.38",
-    "@khanacademy/wonder-blocks-typography": "4.2.16",
+    "@khanacademy/wonder-blocks-banner": "4.3.3",
+    "@khanacademy/wonder-blocks-button": "11.0.4",
+    "@khanacademy/wonder-blocks-clickable": "7.1.24",
+    "@khanacademy/wonder-blocks-core": "12.4.0",
+    "@khanacademy/wonder-blocks-data": "14.1.5",
+    "@khanacademy/wonder-blocks-dropdown": "10.3.8",
+    "@khanacademy/wonder-blocks-form": "7.3.6",
+    "@khanacademy/wonder-blocks-icon-button": "10.4.1",
+    "@khanacademy/wonder-blocks-icon": "5.2.18",
+    "@khanacademy/wonder-blocks-labeled-field": "4.0.4",
+    "@khanacademy/wonder-blocks-layout": "3.1.35",
+    "@khanacademy/wonder-blocks-link": "9.2.2",
+    "@khanacademy/wonder-blocks-pill": "3.1.39",
+    "@khanacademy/wonder-blocks-popover": "6.1.29",
+    "@khanacademy/wonder-blocks-progress-spinner": "3.1.35",
+    "@khanacademy/wonder-blocks-switch": "3.3.17",
+    "@khanacademy/wonder-blocks-tokens": "12.2.1",
+    "@khanacademy/wonder-blocks-tooltip": "4.1.43",
+    "@khanacademy/wonder-blocks-typography": "4.2.20",
     "@khanacademy/wonder-stuff-core": "1.5.5",
     "@phosphor-icons/core": "2.0.2",
     "@popperjs/core": "2.10.2",
@@ -90,25 +90,25 @@
     "raphael": "1.5.4"
   },
   "peerDependencies": {
-    "@khanacademy/wonder-blocks-banner": "^4.2.14",
-    "@khanacademy/wonder-blocks-button": "^11.0.0",
-    "@khanacademy/wonder-blocks-clickable": "^7.1.20",
-    "@khanacademy/wonder-blocks-core": "^12.3.0",
-    "@khanacademy/wonder-blocks-data": "^14.1.4",
-    "@khanacademy/wonder-blocks-dropdown": "^10.3.2",
-    "@khanacademy/wonder-blocks-form": "^7.3.2",
-    "@khanacademy/wonder-blocks-icon": "^5.2.14",
-    "@khanacademy/wonder-blocks-icon-button": "^10.3.15",
-    "@khanacademy/wonder-blocks-labeled-field": "^4.0.0",
-    "@khanacademy/wonder-blocks-layout": "^3.1.31",
-    "@khanacademy/wonder-blocks-link": "^9.1.20",
-    "@khanacademy/wonder-blocks-pill": "^3.1.35",
-    "@khanacademy/wonder-blocks-popover": "^6.1.24",
-    "@khanacademy/wonder-blocks-progress-spinner": "^3.1.31",
-    "@khanacademy/wonder-blocks-switch": "^3.3.13",
-    "@khanacademy/wonder-blocks-tokens": "^12.0.2",
-    "@khanacademy/wonder-blocks-tooltip": "^4.1.38",
-    "@khanacademy/wonder-blocks-typography": "^4.2.16",
+    "@khanacademy/wonder-blocks-banner": "^4.3.3",
+    "@khanacademy/wonder-blocks-button": "^11.0.4",
+    "@khanacademy/wonder-blocks-clickable": "^7.1.24",
+    "@khanacademy/wonder-blocks-core": "^12.4.0",
+    "@khanacademy/wonder-blocks-data": "^14.1.5",
+    "@khanacademy/wonder-blocks-dropdown": "^10.3.8",
+    "@khanacademy/wonder-blocks-form": "^7.3.6",
+    "@khanacademy/wonder-blocks-icon": "^5.2.18",
+    "@khanacademy/wonder-blocks-icon-button": "^10.4.1",
+    "@khanacademy/wonder-blocks-labeled-field": "^4.0.4",
+    "@khanacademy/wonder-blocks-layout": "^3.1.35",
+    "@khanacademy/wonder-blocks-link": "^9.2.2",
+    "@khanacademy/wonder-blocks-pill": "^3.1.39",
+    "@khanacademy/wonder-blocks-popover": "^6.1.29",
+    "@khanacademy/wonder-blocks-progress-spinner": "^3.1.35",
+    "@khanacademy/wonder-blocks-switch": "^3.3.17",
+    "@khanacademy/wonder-blocks-tokens": "^12.2.1",
+    "@khanacademy/wonder-blocks-tooltip": "^4.1.43",
+    "@khanacademy/wonder-blocks-typography": "^4.2.20",
     "@khanacademy/wonder-stuff-core": "^1.5.5",
     "@phosphor-icons/core": "^2.0.2",
     "@popperjs/core": "^2.10.2",