@khanacademy/perseus-editor 33.0.0 → 33.0.2

package/dist/testing/feature-flags-util.d.ts

@@ -4,6 +4,7 @@ declare const DEFAULT_FEATURE_FLAGS: {
     "interactive-graph-vector": boolean;
     "interactive-graph-not-scored": boolean;
     "input-number-to-numeric-input": boolean;
+    "grapher-to-interactive-graph": boolean;
 };
 /** Utility to get feature flags with optional overrides for testing.
  *  sample usage:
@@ -15,5 +16,6 @@ export declare function getFeatureFlags(overrides?: Partial<typeof DEFAULT_FEATU
     "interactive-graph-vector": boolean;
     "interactive-graph-not-scored": boolean;
     "input-number-to-numeric-input": boolean;
+    "grapher-to-interactive-graph": boolean;
 };
 export {};

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

@@ -7,9 +7,9 @@ type Props = {
     onChange: (newValues: Partial<PerseusExpressionWidgetOptions>) => void;
 } & Omit<PerseusExpressionWidgetOptions, "buttonsVisible">;
 type AnswerForm = PerseusExpressionWidgetOptions["answerForms"][number];
-type State = {
+interface State {
     functionsInternal: string;
-};
+}
 /**
  * An editor for adding an expression widget that allows users to enter mathematical expressions.
  */

package/dist/widgets/interactive-graph-editor/components/graph-type-selector.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
-type GraphTypeSelectorProps = {
+interface GraphTypeSelectorProps {
     graphType: string;
     onChange: (newGraphType: string) => void;
-};
+}
 declare const GraphTypeSelector: (props: GraphTypeSelectorProps) => React.JSX.Element;
 export default GraphTypeSelector;

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

@@ -1,9 +1,9 @@
 import * as React from "react";
 import type { Props as EditorProps } from "../interactive-graph-editor";
-type Props = {
+interface Props {
     ariaLabelValue: string;
     ariaDescriptionValue: string;
     onChange: (graphProps: Partial<EditorProps>) => void;
-};
+}
 export default function InteractiveGraphDescription(props: Props): React.JSX.Element;
 export {};

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

@@ -7,7 +7,7 @@ import type { APIOptionsWithDefaults } from "@khanacademy/perseus";
 import type { AxisLabelLocation, ShowAxisArrows, ShowAxisTicks, MarkingsType, PerseusImageBackground } from "@khanacademy/perseus-core";
 type ChangeFn = typeof Changeable.change;
 type Range = [min: number, max: number];
-type Props = {
+interface Props {
     /**
      * The size of the graph area in pixels.
      */
@@ -75,8 +75,8 @@ type Props = {
     showTooltips: boolean;
     onChange: (arg1: Partial<Props>) => void;
     apiOptions: APIOptionsWithDefaults;
-};
-type State = {
+}
+interface State {
     isExpanded: boolean;
     labelsTextbox: ReadonlyArray<string>;
     labelLocation: AxisLabelLocation;
@@ -87,7 +87,7 @@ type State = {
     showAxisArrowsSwitches: ShowAxisArrows;
     showAxisTicksSwitches: ShowAxisTicks;
     backgroundImage: PerseusImageBackground;
-};
+}
 declare class InteractiveGraphSettings extends React.Component<Props, State> {
     _isMounted: boolean;
     bgUrlRef: React.RefObject<HTMLInputElement>;

package/dist/widgets/interactive-graph-editor/components/interactive-graph-sr-tree.d.ts

@@ -1,13 +1,13 @@
 import * as React from "react";
-type Attribute = {
+interface Attribute {
     name: string;
     value: string;
-};
-type AttributeMap = {
+}
+interface AttributeMap {
     roleOrTag: string;
     className: string;
     attributes: Array<Attribute>;
-};
+}
 export declare function getAccessibilityAttributes(graphId: string): AttributeMap[];
 declare function InteractiveGraphSRTree({ graphId, correct, fullGraphAriaLabel, fullGraphAriaDescription, lockedFigures, }: {
     graphId: any;

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

@@ -63,7 +63,7 @@ declare const InteractiveGraph: {
                 isMobile?: boolean;
                 isMobileApp?: boolean;
                 hintProgressColor?: string;
-                flags?: Record<"input-number-to-numeric-input", boolean>;
+                flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
             }> & {
                 baseElements: NonNullable<Readonly<{
                     isArticle?: boolean;
@@ -92,7 +92,7 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"input-number-to-numeric-input", boolean>;
+                    flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
                 }>["baseElements"]>;
                 isArticle: NonNullable<Readonly<{
                     isArticle?: boolean;
@@ -121,7 +121,7 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"input-number-to-numeric-input", boolean>;
+                    flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
                 }>["isArticle"]>;
                 isMobile: NonNullable<Readonly<{
                     isArticle?: boolean;
@@ -150,7 +150,7 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"input-number-to-numeric-input", boolean>;
+                    flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
                 }>["isMobile"]>;
                 isMobileApp: NonNullable<Readonly<{
                     isArticle?: boolean;
@@ -179,7 +179,7 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"input-number-to-numeric-input", boolean>;
+                    flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
                 }>["isMobileApp"]>;
                 editingDisabled: NonNullable<Readonly<{
                     isArticle?: boolean;
@@ -208,7 +208,7 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"input-number-to-numeric-input", boolean>;
+                    flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
                 }>["editingDisabled"]>;
                 onFocusChange: NonNullable<Readonly<{
                     isArticle?: boolean;
@@ -237,7 +237,7 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"input-number-to-numeric-input", boolean>;
+                    flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
                 }>["onFocusChange"]>;
                 readOnly: NonNullable<Readonly<{
                     isArticle?: boolean;
@@ -266,7 +266,7 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"input-number-to-numeric-input", boolean>;
+                    flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
                 }>["readOnly"]>;
                 showAlignmentOptions: NonNullable<Readonly<{
                     isArticle?: boolean;
@@ -295,7 +295,7 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"input-number-to-numeric-input", boolean>;
+                    flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
                 }>["showAlignmentOptions"]>;
             }>;
             keypadElement?: any;
@@ -389,7 +389,7 @@ declare const InteractiveGraph: {
                 isMobile?: boolean;
                 isMobileApp?: boolean;
                 hintProgressColor?: string;
-                flags?: Record<"input-number-to-numeric-input", boolean>;
+                flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
             }> & {
                 baseElements: NonNullable<Readonly<{
                     isArticle?: boolean;
@@ -418,7 +418,7 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"input-number-to-numeric-input", boolean>;
+                    flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
                 }>["baseElements"]>;
                 isArticle: NonNullable<Readonly<{
                     isArticle?: boolean;
@@ -447,7 +447,7 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"input-number-to-numeric-input", boolean>;
+                    flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
                 }>["isArticle"]>;
                 isMobile: NonNullable<Readonly<{
                     isArticle?: boolean;
@@ -476,7 +476,7 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"input-number-to-numeric-input", boolean>;
+                    flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
                 }>["isMobile"]>;
                 isMobileApp: NonNullable<Readonly<{
                     isArticle?: boolean;
@@ -505,7 +505,7 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"input-number-to-numeric-input", boolean>;
+                    flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
                 }>["isMobileApp"]>;
                 editingDisabled: NonNullable<Readonly<{
                     isArticle?: boolean;
@@ -534,7 +534,7 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"input-number-to-numeric-input", boolean>;
+                    flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
                 }>["editingDisabled"]>;
                 onFocusChange: NonNullable<Readonly<{
                     isArticle?: boolean;
@@ -563,7 +563,7 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"input-number-to-numeric-input", boolean>;
+                    flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
                 }>["onFocusChange"]>;
                 readOnly: NonNullable<Readonly<{
                     isArticle?: boolean;
@@ -592,7 +592,7 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"input-number-to-numeric-input", boolean>;
+                    flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
                 }>["readOnly"]>;
                 showAlignmentOptions: NonNullable<Readonly<{
                     isArticle?: boolean;
@@ -621,7 +621,7 @@ declare const InteractiveGraph: {
                     isMobile?: boolean;
                     isMobileApp?: boolean;
                     hintProgressColor?: string;
-                    flags?: Record<"input-number-to-numeric-input", boolean>;
+                    flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
                 }>["showAlignmentOptions"]>;
             }>;
             keypadElement?: any;

package/dist/widgets/interactive-graph-editor/locked-figures/color-select.d.ts

@@ -1,10 +1,10 @@
 import * as React from "react";
 import type { LockedFigureColor } from "@khanacademy/perseus-core";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
-type Props = {
+interface Props {
     selectedValue: LockedFigureColor;
     style?: StyleType;
     onChange: (newColor: LockedFigureColor) => void;
-};
+}
 declare const ColorSelect: (props: Props) => React.JSX.Element;
 export default ColorSelect;

package/dist/widgets/interactive-graph-editor/locked-figures/line-stroke-select.d.ts

@@ -1,10 +1,10 @@
 import * as React from "react";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 type StyleOptions = "solid" | "dashed";
-type Props = {
+interface Props {
     selectedValue: StyleOptions;
     onChange: (newValue: StyleOptions) => void;
     containerStyle?: StyleType;
-};
+}
 declare const LineStrokeSelect: (props: Props) => React.JSX.Element;
 export default LineStrokeSelect;

package/dist/widgets/interactive-graph-editor/locked-figures/line-weight-select.d.ts

@@ -1,10 +1,10 @@
 import * as React from "react";
 import type { StrokeWeight } from "@khanacademy/perseus-core";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
-type Props = {
+interface Props {
     selectedValue: StrokeWeight;
     onChange: (newValue: StrokeWeight) => void;
     containerStyle?: StyleType;
-};
+}
 declare const LineWeightSelect: (props: Props) => React.JSX.Element;
 export default LineWeightSelect;

package/dist/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-type Props = {
+interface Props {
     ariaLabel: string | undefined;
     /**
      * The async function that generates the prepopulated aria label
@@ -9,6 +9,6 @@ type Props = {
     onChangeProps: (props: {
         ariaLabel?: string | undefined;
     }) => void;
-};
+}
 declare function LockedFigureAria(props: Props): React.JSX.Element;
 export default LockedFigureAria;

package/dist/widgets/interactive-graph-editor/locked-figures/locked-figure-select.d.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
 import type { LockedFigureType } from "@khanacademy/perseus-core";
-type Props = {
+interface Props {
     id: string;
     onChange: (value: LockedFigureType) => void;
-};
+}
 declare const LockedFigureSelect: (props: Props) => React.JSX.Element;
 export default LockedFigureSelect;

package/dist/widgets/interactive-graph-editor/locked-figures/locked-figure-settings-actions.d.ts

@@ -1,10 +1,10 @@
 import * as React from "react";
 import type { LockedFigureType } from "@khanacademy/perseus-core";
 export type LockedFigureSettingsMovementType = "back" | "backward" | "forward" | "front";
-type Props = {
+interface Props {
     figureType: LockedFigureType;
     onMove?: (movement: LockedFigureSettingsMovementType) => void;
     onRemove: () => void;
-};
+}
 declare const LockedFigureSettingsActions: (props: Props) => React.JSX.Element;
 export default LockedFigureSettingsActions;

package/dist/widgets/interactive-graph-editor/locked-figures/locked-figure-settings.d.ts

@@ -13,7 +13,7 @@ import type { Props as LockedLineProps } from "./locked-line-settings";
 import type { Props as LockedPointProps } from "./locked-point-settings";
 import type { Props as LockedPolygonProps } from "./locked-polygon-settings";
 import type { Props as LockedVectorProps } from "./locked-vector-settings";
-export type LockedFigureSettingsCommonProps = {
+export interface LockedFigureSettingsCommonProps {
     /**
      * Called when a movement button (top, up, down, bottom) is pressed.
      */
@@ -30,7 +30,7 @@ export type LockedFigureSettingsCommonProps = {
      * Called when the accordion is expanded or collapsed.
      */
     onToggle?: (expanded: boolean) => void;
-};
+}
 type Props = LockedFigureSettingsCommonProps & (LockedPointProps | LockedLineProps | LockedEllipseProps | LockedVectorProps | LockedPolygonProps | LockedFunctionProps | LockedLabelProps);
 declare const LockedFigureSettings: (props: Props) => React.JSX.Element;
 export default LockedFigureSettings;

package/dist/widgets/interactive-graph-editor/locked-figures/locked-figures-section.d.ts

@@ -2,10 +2,10 @@ import * as React from "react";
 import type { Props as InteractiveGraphEditorProps } from "../interactive-graph-editor";
 import type { APIOptionsWithDefaults } from "@khanacademy/perseus";
 import type { LockedFigure } from "@khanacademy/perseus-core";
-type Props = {
+interface Props {
     figures?: Array<LockedFigure>;
     onChange: (props: Partial<InteractiveGraphEditorProps>) => void;
     apiOptions: APIOptionsWithDefaults;
-};
+}
 declare const LockedFiguresSection: (props: Props) => React.JSX.Element;
 export default LockedFiguresSection;

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

@@ -2,11 +2,11 @@
  * Controlled list of answer choices, handles adding and removing answers.
  */
 import * as React from "react";
-export type AnswerChoicesProps = {
+export interface AnswerChoicesProps {
     choices: ReadonlyArray<string>;
     onChange: (choices: ReadonlyArray<string>) => void;
     editingDisabled: boolean;
-};
+}
 /**
  * The list of choices, handles adding, removing and reording of answers.
  */

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

@@ -2,7 +2,7 @@ import * as React from "react";
 import type { PreferredPopoverDirection } from "./behavior";
 import type { APIOptions } from "@khanacademy/perseus";
 import type { PerseusLabelImageWidgetOptions, LabelImageDefaultWidgetOptions } from "@khanacademy/perseus-core";
-type Props = {
+interface Props {
     apiOptions: APIOptions;
     choices: string[];
     imageAlt: string;
@@ -14,7 +14,7 @@ type Props = {
     hideChoicesFromInstructions: boolean;
     onChange: (options: any) => void;
     preferredPopoverDirection: PreferredPopoverDirection;
-};
+}
 /**
  * Direct image labeling widget editor.
  *

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

@@ -2,9 +2,9 @@
  * Controlled component for selecting the question image, for answer labeling.
  */
 import * as React from "react";
-export type SelectImageProps = {
+export interface SelectImageProps {
     onChange: (url: string) => void;
     url: string;
-};
+}
 declare const SelectImage: ({ onChange, url }: SelectImageProps) => React.ReactElement;
 export default SelectImage;

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

@@ -7,12 +7,12 @@ type Props = Omit<PerseusNumericInputWidgetOptions, "static"> & {
     onChange: (results: any) => any;
     apiOptions?: APIOptionsWithDefaults;
 };
-type State = {
+interface State {
     lastStatus: string;
     showAnswerDetails: boolean[];
     showSettings: boolean;
     showAnswers: boolean;
-};
+}
 /**
  * An editor for adding a numeric input widget that allows users to enter
  * numerical values with specific validation rules.

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

@@ -1,13 +1,9 @@
 import * as React from "react";
 interface RadioImageEditorProps {
-    initialImageUrl: string;
-    initialImageAltText: string;
-    initialImageWidth?: number;
-    initialImageHeight?: number;
-    containerClassName?: string;
-    onSave: (imageUrl: string, imageAltText: string, width?: number, height?: number) => void;
-    onClose?: () => void;
-    onDelete?: () => void;
+    imageUrl: string;
+    imageAltText: string;
+    onSave: (imageUrl: string, imageAltText: string) => void;
+    onDelete: () => void;
 }
-export default function RadioImageEditor({ initialImageUrl, initialImageAltText, initialImageWidth, initialImageHeight, containerClassName, onSave, onClose, onDelete, }: RadioImageEditorProps): React.ReactElement;
+export default function RadioImageEditor({ imageUrl, imageAltText, onSave, onDelete, }: RadioImageEditorProps): React.ReactElement;
 export {};

package/dist/widgets/radio/radio-option-content-and-image-editor.d.ts

@@ -1,12 +1,12 @@
 import * as React from "react";
-type Props = {
+interface Props {
     isNoneOfTheAbove: boolean;
     content: string;
     choiceIndex: number;
     onContentChange: (choiceIndex: number, content: string) => void;
-};
-export type RadioOptionContentAndImageEditorHandle = {
+}
+export interface RadioOptionContentAndImageEditorHandle {
     focus: () => void;
-};
+}
 export declare const RadioOptionContentAndImageEditor: React.ForwardRefExoticComponent<Props & React.RefAttributes<RadioOptionContentAndImageEditorHandle>>;
 export {};

package/dist/widgets/radio/radio-status-pill.d.ts

@@ -3,7 +3,11 @@ interface RadioStatusPillProps {
     index: number;
     correct?: boolean;
     multipleSelect: boolean;
-    onClick: () => void;
 }
-export declare function RadioStatusPill({ index, correct, multipleSelect, onClick, }: RadioStatusPillProps): React.JSX.Element;
+/**
+ * * A read-only status indicator showing whether a choice is correct or incorrect,
+ * labeled with the choice letter (A, B, C...). Status is changed via the
+ * adjacent segmented control.
+ */
+export declare function RadioStatusPill({ index, correct, multipleSelect, }: RadioStatusPillProps): React.JSX.Element;
 export {};

package/package.json

@@ -3,7 +3,7 @@
   "description": "Perseus editors",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "33.0.0",
+  "version": "33.0.2",
   "publishConfig": {
     "access": "public"
   },
@@ -36,35 +36,36 @@
     "mafs": "^0.19.0",
     "tiny-invariant": "1.3.1",
     "@khanacademy/kas": "2.2.3",
-    "@khanacademy/keypad-context": "3.2.62",
-    "@khanacademy/kmath": "2.4.20",
-    "@khanacademy/math-input": "26.4.34",
-    "@khanacademy/perseus": "78.0.0",
-    "@khanacademy/perseus-core": "28.0.0",
-    "@khanacademy/perseus-linter": "5.1.1",
-    "@khanacademy/perseus-score": "8.11.4",
+    "@khanacademy/keypad-context": "3.2.64",
+    "@khanacademy/kmath": "2.4.22",
+    "@khanacademy/math-input": "26.4.36",
+    "@khanacademy/perseus": "78.1.0",
+    "@khanacademy/perseus-core": "28.1.0",
+    "@khanacademy/perseus-linter": "5.1.3",
+    "@khanacademy/perseus-score": "8.11.6",
     "@khanacademy/perseus-utils": "2.1.5"
   },
   "devDependencies": {
     "@khanacademy/mathjax-renderer": "3.0.0",
-    "@khanacademy/wonder-blocks-accordion": "3.1.61",
-    "@khanacademy/wonder-blocks-banner": "5.1.2",
-    "@khanacademy/wonder-blocks-button": "11.6.2",
-    "@khanacademy/wonder-blocks-clickable": "8.2.1",
+    "@khanacademy/wonder-blocks-accordion": "3.1.63",
+    "@khanacademy/wonder-blocks-badge": "1.1.15",
+    "@khanacademy/wonder-blocks-banner": "5.1.4",
+    "@khanacademy/wonder-blocks-button": "11.7.1",
+    "@khanacademy/wonder-blocks-clickable": "8.2.3",
     "@khanacademy/wonder-blocks-core": "12.4.4",
-    "@khanacademy/wonder-blocks-dropdown": "10.9.2",
-    "@khanacademy/wonder-blocks-form": "7.6.2",
-    "@khanacademy/wonder-blocks-icon": "5.3.16",
-    "@khanacademy/wonder-blocks-icon-button": "11.3.2",
-    "@khanacademy/wonder-blocks-labeled-field": "4.1.2",
-    "@khanacademy/wonder-blocks-layout": "3.1.53",
-    "@khanacademy/wonder-blocks-link": "10.3.1",
-    "@khanacademy/wonder-blocks-pill": "3.1.65",
-    "@khanacademy/wonder-blocks-switch": "3.4.2",
+    "@khanacademy/wonder-blocks-dropdown": "10.11.0",
+    "@khanacademy/wonder-blocks-form": "7.6.4",
+    "@khanacademy/wonder-blocks-icon": "5.3.17",
+    "@khanacademy/wonder-blocks-icon-button": "11.3.4",
+    "@khanacademy/wonder-blocks-labeled-field": "4.1.3",
+    "@khanacademy/wonder-blocks-layout": "3.1.54",
+    "@khanacademy/wonder-blocks-link": "10.3.3",
+    "@khanacademy/wonder-blocks-pill": "3.1.67",
+    "@khanacademy/wonder-blocks-switch": "3.4.3",
     "@khanacademy/wonder-blocks-timing": "7.1.0",
-    "@khanacademy/wonder-blocks-tokens": "16.6.0",
-    "@khanacademy/wonder-blocks-tooltip": "4.1.77",
-    "@khanacademy/wonder-blocks-typography": "4.3.6",
+    "@khanacademy/wonder-blocks-tokens": "16.7.0",
+    "@khanacademy/wonder-blocks-tooltip": "4.1.79",
+    "@khanacademy/wonder-blocks-typography": "4.3.7",
     "@khanacademy/wonder-stuff-core": "3.0.0",
     "@phosphor-icons/core": "2.0.2",
     "aphrodite": "1.2.5",
@@ -79,24 +80,25 @@
   },
   "peerDependencies": {
     "@khanacademy/mathjax-renderer": "^3.0.0",
-    "@khanacademy/wonder-blocks-accordion": "^3.1.61",
-    "@khanacademy/wonder-blocks-banner": "^5.1.2",
-    "@khanacademy/wonder-blocks-button": "^11.6.2",
-    "@khanacademy/wonder-blocks-clickable": "^8.2.1",
+    "@khanacademy/wonder-blocks-accordion": "^3.1.63",
+    "@khanacademy/wonder-blocks-badge": "^1.1.15",
+    "@khanacademy/wonder-blocks-banner": "^5.1.4",
+    "@khanacademy/wonder-blocks-button": "^11.7.1",
+    "@khanacademy/wonder-blocks-clickable": "^8.2.3",
     "@khanacademy/wonder-blocks-core": "^12.4.4",
-    "@khanacademy/wonder-blocks-dropdown": "^10.9.2",
-    "@khanacademy/wonder-blocks-form": "^7.6.2",
-    "@khanacademy/wonder-blocks-icon": "^5.3.16",
-    "@khanacademy/wonder-blocks-icon-button": "^11.3.2",
-    "@khanacademy/wonder-blocks-labeled-field": "^4.1.2",
-    "@khanacademy/wonder-blocks-layout": "^3.1.53",
-    "@khanacademy/wonder-blocks-link": "^10.3.1",
-    "@khanacademy/wonder-blocks-pill": "^3.1.65",
-    "@khanacademy/wonder-blocks-switch": "^3.4.2",
+    "@khanacademy/wonder-blocks-dropdown": "^10.11.0",
+    "@khanacademy/wonder-blocks-form": "^7.6.4",
+    "@khanacademy/wonder-blocks-icon": "^5.3.17",
+    "@khanacademy/wonder-blocks-icon-button": "^11.3.4",
+    "@khanacademy/wonder-blocks-labeled-field": "^4.1.3",
+    "@khanacademy/wonder-blocks-layout": "^3.1.54",
+    "@khanacademy/wonder-blocks-link": "^10.3.3",
+    "@khanacademy/wonder-blocks-pill": "^3.1.67",
+    "@khanacademy/wonder-blocks-switch": "^3.4.3",
     "@khanacademy/wonder-blocks-timing": "^7.1.0",
-    "@khanacademy/wonder-blocks-tokens": "^16.6.0",
-    "@khanacademy/wonder-blocks-tooltip": "^4.1.77",
-    "@khanacademy/wonder-blocks-typography": "^4.3.6",
+    "@khanacademy/wonder-blocks-tokens": "^16.7.0",
+    "@khanacademy/wonder-blocks-tooltip": "^4.1.79",
+    "@khanacademy/wonder-blocks-typography": "^4.3.7",
     "@khanacademy/wonder-stuff-core": "^3.0.0",
     "@phosphor-icons/core": "^2.0.2",
     "aphrodite": "^1.2.5",
@@ -109,7 +111,7 @@
   },
   "keywords": [],
   "khan": {
-    "catalogHash": "8d63a26474e3cbb4"
+    "catalogHash": "6cc1eef6c5c59c5b"
   },
   "scripts": {}
 }