@khanacademy/perseus 13.0.0 → 13.2.0

package/dist/renderer.d.ts

@@ -33,7 +33,7 @@ export type Widget = {
     blurInputPath?: (path: FocusPath) => null;
     focusInputPath?: (path: FocusPath) => null;
     getInputPaths?: () => ReadonlyArray<FocusPath>;
-    setInputValue?: (path: FocusPath, newValue: string, focus: () => unknown) => void;
+    setInputValue?: (path: FocusPath, newValue: string, focus?: () => unknown) => void;
     getUserInput?: () => WidgetUserInput | null | undefined;
     simpleValidate?: (options?: any, onOutputError?: (widgetId: any, value: string, message?: string | null | undefined) => unknown | null | undefined) => PerseusScore;
     showRationalesForCurrentlySelectedChoices?: (options?: any) => void;
@@ -210,7 +210,7 @@ declare class Renderer extends React.Component<Props, State> {
     serialize: () => Record<any, any>;
     emptyWidgets: () => any;
     _setWidgetProps: SetWidgetPropsFn;
-    setInputValue: (path: FocusPath, newValue: string, focus: () => unknown) => void;
+    setInputValue: (path: FocusPath, newValue: string, focus?: () => unknown) => void;
     /**
      * Returns an array of the widget `.getUserInput()` results
      */

package/dist/widgets/matcher.d.ts

@@ -6,7 +6,7 @@ type State = {
     rightHeight: number;
     texRendererLoaded: boolean;
 };
-declare class Matcher extends React.Component<any, any> {
+export declare class Matcher extends React.Component<any, any> {
     static propTypes: {
         apiOptions: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
             isArticle: PropTypes.Validator<boolean>;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "13.0.0",
+    "version": "13.2.0",
     "publishConfig": {
         "access": "public"
     },
@@ -24,29 +24,29 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.5",
         "@khanacademy/kmath": "^0.1.6",
-        "@khanacademy/math-input": "^15.0.0",
+        "@khanacademy/math-input": "^15.1.0",
         "@khanacademy/perseus-core": "1.3.0",
         "@khanacademy/perseus-linter": "^0.3.8",
-        "@khanacademy/pure-markdown": "^0.2.10",
-        "@khanacademy/simple-markdown": "^0.10.4"
+        "@khanacademy/pure-markdown": "^0.2.11",
+        "@khanacademy/simple-markdown": "^0.11.0"
     },
     "devDependencies": {
-        "@khanacademy/wonder-blocks-button": "^4.1.3",
-        "@khanacademy/wonder-blocks-clickable": "^4.0.0",
-        "@khanacademy/wonder-blocks-color": "^2.0.1",
-        "@khanacademy/wonder-blocks-core": "^6.0.0",
-        "@khanacademy/wonder-blocks-data": "^12.0.0",
-        "@khanacademy/wonder-blocks-dropdown": "^3.0.21",
-        "@khanacademy/wonder-blocks-form": "^4.3.3",
+        "@khanacademy/wonder-blocks-button": "^6.2.2",
+        "@khanacademy/wonder-blocks-clickable": "^4.0.11",
+        "@khanacademy/wonder-blocks-color": "^3.0.0",
+        "@khanacademy/wonder-blocks-core": "^6.3.0",
+        "@khanacademy/wonder-blocks-data": "^13.0.5",
+        "@khanacademy/wonder-blocks-dropdown": "^3.1.8",
+        "@khanacademy/wonder-blocks-form": "^4.3.16",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
-        "@khanacademy/wonder-blocks-layout": "^2.0.17",
-        "@khanacademy/wonder-blocks-link": "^5.0.0",
-        "@khanacademy/wonder-blocks-modal": "^4.0.19",
-        "@khanacademy/wonder-blocks-popover": "^3.0.0",
-        "@khanacademy/wonder-blocks-progress-spinner": "^2.0.17",
-        "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-        "@khanacademy/wonder-blocks-tooltip": "^2.1.2",
-        "@khanacademy/wonder-blocks-typography": "^2.1.3",
+        "@khanacademy/wonder-blocks-layout": "^2.0.24",
+        "@khanacademy/wonder-blocks-link": "^6.0.2",
+        "@khanacademy/wonder-blocks-modal": "^4.0.35",
+        "@khanacademy/wonder-blocks-popover": "^3.0.16",
+        "@khanacademy/wonder-blocks-progress-spinner": "^2.0.24",
+        "@khanacademy/wonder-blocks-spacing": "^4.0.1",
+        "@khanacademy/wonder-blocks-tooltip": "^2.1.18",
+        "@khanacademy/wonder-blocks-typography": "^2.1.9",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
         "@phosphor-icons/core": "^2.0.2",
         "aphrodite": "^1.2.5",
@@ -59,29 +59,29 @@
         "katex": "^0.11.1",
         "lodash.debounce": "^4.0.8",
         "mathquill": "git+https://git@github.com/Khan/mathquill.git#48410e80d760bbd5105544d4a4ab459a28dc2cbc",
-        "perseus-build-settings": "^0.2.1",
+        "perseus-build-settings": "^0.3.0",
         "prop-types": "^15.6.1",
         "react": "16.14.0",
         "react-dom": "16.14.0",
         "underscore": "^1.4.4"
     },
     "peerDependencies": {
-        "@khanacademy/wonder-blocks-button": "^4.1.3",
-        "@khanacademy/wonder-blocks-clickable": "^4.0.0",
-        "@khanacademy/wonder-blocks-color": "^2.0.1",
-        "@khanacademy/wonder-blocks-core": "^6.0.0",
-        "@khanacademy/wonder-blocks-data": "^12.0.0",
-        "@khanacademy/wonder-blocks-dropdown": "^3.0.21",
-        "@khanacademy/wonder-blocks-form": "^4.3.3",
+        "@khanacademy/wonder-blocks-button": "^6.2.2",
+        "@khanacademy/wonder-blocks-clickable": "^4.0.11",
+        "@khanacademy/wonder-blocks-color": "^3.0.0",
+        "@khanacademy/wonder-blocks-core": "^6.3.0",
+        "@khanacademy/wonder-blocks-data": "^13.0.5",
+        "@khanacademy/wonder-blocks-dropdown": "^3.1.8",
+        "@khanacademy/wonder-blocks-form": "^4.3.16",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
-        "@khanacademy/wonder-blocks-layout": "^2.0.17",
-        "@khanacademy/wonder-blocks-link": "^5.0.0",
-        "@khanacademy/wonder-blocks-modal": "^4.0.19",
-        "@khanacademy/wonder-blocks-popover": "^3.0.0",
-        "@khanacademy/wonder-blocks-progress-spinner": "^2.0.17",
-        "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-        "@khanacademy/wonder-blocks-tooltip": "^2.1.2",
-        "@khanacademy/wonder-blocks-typography": "^2.1.3",
+        "@khanacademy/wonder-blocks-layout": "^2.0.24",
+        "@khanacademy/wonder-blocks-link": "^6.0.2",
+        "@khanacademy/wonder-blocks-modal": "^4.0.35",
+        "@khanacademy/wonder-blocks-popover": "^3.0.16",
+        "@khanacademy/wonder-blocks-progress-spinner": "^2.0.24",
+        "@khanacademy/wonder-blocks-spacing": "^4.0.1",
+        "@khanacademy/wonder-blocks-tooltip": "^2.1.18",
+        "@khanacademy/wonder-blocks-typography": "^2.1.9",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
         "@phosphor-icons/core": "^2.0.2",
         "aphrodite": "^1.2.5",

package/src/__stories__/hints-renderer.stories.tsx

@@ -3,56 +3,53 @@ import React from "react";
 
 import HintsRenderer from "../hints-renderer";
 
-type StoryArgs = {
-    hints: ReadonlyArray<any>;
-    hintsVisible: number;
-};
-
-type Story = {
-    title: string;
-    argTypes: any;
-};
+import type {Meta, StoryObj} from "@storybook/react";
 
-export default {
+const meta: Meta<typeof HintsRenderer> = {
     title: "Perseus/Renderers/Hints Renderer",
-    argTypes: {
-        hints: {
-            control: "object",
-            defaultValue: [
-                {
-                    content: "this is hint 1",
-                    images: {},
-                    replace: false,
-                    widgets: {},
-                },
-                {
-                    content: "this is hint 2",
-                    images: {},
-                    replace: false,
-                    widgets: {},
-                },
-                {
-                    content: "this is hint 3",
-                    images: {},
-                    replace: false,
-                    widgets: {},
-                },
-            ],
+    component: HintsRenderer,
+    decorators: [
+        (Story) => {
+            return (
+                <View style={{left: 80}}>
+                    <Story />
+                </View>
+            );
         },
+    ],
+    argTypes: {
         hintsVisible: {
-            control: {type: "number", min: 0},
+            control: {min: 0},
             defaultValue: 3,
         },
     },
-} as Story;
+};
+
+export default meta;
 
-export const Interactive = (args: StoryArgs): any => {
-    return (
-        // Sorry for the hacks! The HintRenderer uses absolute positioning
-        // for the "1 / 3" label that is rendered left of the hint. So we shift
-        // everything over so we can see it.
-        <View style={{left: 80}}>
-            <HintsRenderer {...args} />
-        </View>
-    );
+type Story = StoryObj<typeof HintsRenderer>;
+
+export const Interactive: Story = {
+    args: {
+        hints: [
+            {
+                content: "this is hint 1",
+                images: {},
+                replace: false,
+                widgets: {},
+            },
+            {
+                content: "this is hint 2",
+                images: {},
+                replace: false,
+                widgets: {},
+            },
+            {
+                content: "this is hint 3",
+                images: {},
+                replace: false,
+                widgets: {},
+            },
+        ],
+    },
 };

package/src/__tests__/__snapshots__/renderer.test.tsx.snap

@@ -367,18 +367,10 @@ exports[`renderer snapshots correct answer: correct answer 1`] = `
                 >
                   less than or equal to
                 </span>
-                <svg
+                <span
                   aria-hidden="true"
-                  class="svg_aeiopc-o_O-caret_ntkmq"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z"
-                    fill="rgba(33,36,44,0.64)"
-                  />
-                </svg>
+                  class="svg_aeiopc-o_O-caret_ntkmq-o_O-inlineStyles_13xtep5"
+                />
               </button>
             </div>
           </div>
@@ -440,18 +432,10 @@ exports[`renderer snapshots incorrect answer: incorrect answer 1`] = `
                 >
                   greater than or equal to
                 </span>
-                <svg
+                <span
                   aria-hidden="true"
-                  class="svg_aeiopc-o_O-caret_ntkmq"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z"
-                    fill="rgba(33,36,44,0.64)"
-                  />
-                </svg>
+                  class="svg_aeiopc-o_O-caret_ntkmq-o_O-inlineStyles_13xtep5"
+                />
               </button>
             </div>
           </div>
@@ -513,18 +497,10 @@ exports[`renderer snapshots initial render: initial render 1`] = `
                 >
                   greater/less than or equal to
                 </span>
-                <svg
+                <span
                   aria-hidden="true"
-                  class="svg_aeiopc-o_O-caret_ntkmq"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z"
-                    fill="rgba(33,36,44,0.64)"
-                  />
-                </svg>
+                  class="svg_aeiopc-o_O-caret_ntkmq-o_O-inlineStyles_13xtep5"
+                />
               </button>
             </div>
           </div>

package/src/__tests__/renderer-api.test.tsx

@@ -1,26 +1,22 @@
 import {describe, beforeEach, it} from "@jest/globals";
-import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
-import {mount} from "enzyme"; // eslint-disable-line no-restricted-imports
 import $ from "jquery";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import TestUtils from "react-dom/test-utils";
 import _ from "underscore";
-import "jest-enzyme";
 
 import {testDependencies} from "../../../../testing/test-dependencies";
 import * as Dependencies from "../dependencies";
 import {ClassNames} from "../perseus-api";
 import Renderer from "../renderer";
 import {registerAllWidgetsForTesting} from "../util/register-all-widgets-for-testing";
+import {renderQuestion} from "../widgets/__tests__/renderQuestion";
 
 import imageItem from "./test-items/image-item";
 import inputNumber1Item from "./test-items/input-number-1-item";
 import inputNumber2Item from "./test-items/input-number-2-item";
 import tableItem from "./test-items/table-item";
 
-import type {APIOptions} from "../types";
-
 const itemWidget = inputNumber1Item;
 
 // Returns a promise that will resolve shortly after the end of this
@@ -33,26 +29,6 @@ const delayedPromise = (value: undefined) => {
     return deferred.promise();
 };
 
-const renderQuestionArea = function (item, apiOptions?: APIOptions): any {
-    const wrapper = mount(
-        <RenderStateRoot>
-            <Dependencies.DependenciesContext.Provider
-                value={{analytics: {onAnalyticsEvent: async () => undefined}}}
-            >
-                <Renderer
-                    content={item.question.content}
-                    images={item.question.images}
-                    widgets={item.question.widgets}
-                    problemNum={0}
-                    apiOptions={apiOptions}
-                />
-            </Dependencies.DependenciesContext.Provider>
-        </RenderStateRoot>,
-        {includeDefaultTestHarness: false},
-    );
-    return wrapper.childAt(0).instance();
-};
-
 describe("Perseus API", function () {
     beforeEach(() => {
         jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
@@ -63,34 +39,40 @@ describe("Perseus API", function () {
 
     describe("setInputValue", function () {
         it("should be able to produce a correctly graded value", function () {
-            const renderer = renderQuestionArea(inputNumber1Item);
-            renderer.setInputValue(["input-number 1"], "5");
-            const score = renderer.guessAndScore()[1];
-            expect(score.type).toBe("points");
-            expect(score.earned).toBe(score.total);
+            // Arrange
+            const {renderer} = renderQuestion(inputNumber1Item.question);
+
+            // Act
+            renderer.setInputValue(["input-number 1"], "5", () => undefined);
+
+            // Assert
+            expect(renderer).toHaveBeenAnsweredCorrectly();
         });
 
         it("should be able to produce a wrong value", function () {
-            const renderer = renderQuestionArea(inputNumber1Item);
-            renderer.setInputValue(["input-number 1"], "3", () => {});
-            const score = renderer.guessAndScore()[1];
-            expect(score.type).toBe("points");
-            expect(score.earned).toBe(0);
+            // Arrange
+            const {renderer} = renderQuestion(inputNumber1Item.question);
+
+            // Act
+            renderer.setInputValue(["input-number 1"], "3");
+
+            // Assert
+            expect(renderer).toHaveBeenAnsweredIncorrectly();
         });
 
         it("should be able to produce an empty score", function () {
-            const renderer = renderQuestionArea(inputNumber1Item);
+            // Arrange
+            const {renderer} = renderQuestion(inputNumber1Item.question);
+
             renderer.setInputValue(["input-number 1"], "3");
-            let score = renderer.guessAndScore()[1];
-            expect(score.type).toBe("points");
-            expect(score.earned).toBe(0);
+            expect(renderer).toHaveBeenAnsweredIncorrectly();
+
             renderer.setInputValue(["input-number 1"], "");
-            score = renderer.guessAndScore()[1];
-            expect(score.type).toBe("invalid");
+            expect(renderer).toHaveInvalidInput();
         });
 
         it("should be able to accept a callback", function (done) {
-            const renderer = renderQuestionArea(inputNumber1Item);
+            const {renderer} = renderQuestion(inputNumber1Item.question);
             renderer.setInputValue(["input-number 1"], "3", function () {
                 const guess = renderer.getUserInput()[0];
                 expect(guess.currentValue).toBe("3");
@@ -102,13 +84,13 @@ describe("Perseus API", function () {
 
     describe("getInputPaths", function () {
         it("should be able to find all the input widgets", function () {
-            const renderer = renderQuestionArea(inputNumber2Item);
+            const {renderer} = renderQuestion(inputNumber2Item.question);
             const numPaths = renderer.getInputPaths().length;
             expect(numPaths).toBe(2);
         });
 
         it("should be able to find all inputs within widgets", function () {
-            const renderer = renderQuestionArea(tableItem);
+            const {renderer} = renderQuestion(tableItem.question);
             const numPaths = renderer.getInputPaths().length;
             expect(numPaths).toBe(8);
         });
@@ -116,7 +98,7 @@ describe("Perseus API", function () {
 
     describe("getDOMNodeForPath", function () {
         it("should find one DOM node per <input>", function () {
-            const renderer = renderQuestionArea(inputNumber2Item);
+            const {renderer} = renderQuestion(inputNumber2Item.question);
             const inputPaths = renderer.getInputPaths();
             const allInputs = TestUtils.scryRenderedDOMComponentsWithTag(
                 renderer,
@@ -126,13 +108,14 @@ describe("Perseus API", function () {
         });
 
         it("should find the right DOM nodes for the <input>s", function () {
-            const renderer = renderQuestionArea(inputNumber2Item);
+            const {renderer} = renderQuestion(inputNumber2Item.question);
             const inputPaths = renderer.getInputPaths();
             const allInputs = TestUtils.scryRenderedDOMComponentsWithTag(
                 renderer,
                 "input",
             );
             _.each(inputPaths, (inputPath, i) => {
+                // @ts-expect-error - TS2769 - No overload matches this call.
                 const $node = $(renderer.getDOMNodeForPath(inputPath));
                 // @ts-expect-error - TS2769 - No overload matches this call.
                 const $input = $(ReactDOM.findDOMNode(allInputs[i]));
@@ -145,13 +128,13 @@ describe("Perseus API", function () {
     describe("onInputError", function () {
         it("should call a callback when grading an empty input-number", function () {
             let wasCalled;
-            const renderer = renderQuestionArea(inputNumber1Item, {
+            const {renderer} = renderQuestion(inputNumber1Item.question, {
                 onInputError: function (widgetId) {
                     wasCalled = true;
                 },
             });
-            const score = renderer.guessAndScore()[1];
-            expect(score.type).toBe("invalid");
+
+            expect(renderer).toHaveInvalidInput();
             expect(wasCalled).toBe(true);
         });
     });
@@ -164,7 +147,7 @@ describe("Perseus API", function () {
                 // version
                 expect(ClassNames.FOCUSED).toBe("perseus-focused");
 
-                const renderer = renderQuestionArea(inputNumber1Item);
+                const {renderer} = renderQuestion(inputNumber1Item.question);
 
                 const input =
                     // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'querySelector' does not exist on type 'Element | Text'.
@@ -191,7 +174,7 @@ describe("Perseus API", function () {
             let callCount = 0;
             let newFocusResult;
             let oldFocusResult;
-            const renderer = renderQuestionArea(inputNumber1Item, {
+            const {renderer} = renderQuestion(inputNumber1Item.question, {
                 onFocusChange: function (newFocus, oldFocus) {
                     callCount++;
                     newFocusResult = newFocus;
@@ -235,7 +218,7 @@ describe("Perseus API", function () {
             let callCount = 0;
             let newFocusResult;
             let oldFocusResult;
-            const renderer = renderQuestionArea(inputNumber2Item, {
+            const {renderer} = renderQuestion(inputNumber2Item.question, {
                 onFocusChange: function (newFocus, oldFocus) {
                     callCount++;
                     newFocusResult = newFocus;

package/src/renderer.tsx

@@ -132,7 +132,7 @@ export type Widget = {
         path: FocusPath,
         newValue: string,
         // TODO(jeremy): I think this is actually a callback
-        focus: () => unknown,
+        focus?: () => unknown,
     ) => void;
     getUserInput?: () => WidgetUserInput | null | undefined;
     simpleValidate?: (
@@ -1701,7 +1701,7 @@ class Renderer extends React.Component<Props, State> {
     setInputValue: (
         path: FocusPath,
         newValue: string,
-        focus: () => unknown,
+        focus?: () => unknown,
     ) => void = (path, newValue, focus) => {
         // @ts-expect-error - TS2345 - Argument of type 'FocusPath' is not assignable to parameter of type 'List<any>'.
         const widgetId = _.first(path);

package/src/styles/khan-exercise.css

@@ -130,8 +130,6 @@ div.definition {
 
 #problemarea {
     font-size: 14px;
-    width: 70%;
-    min-height: 378px;
     position: relative;
     float: left;
     padding-bottom: 38px;

package/src/styles/perseus-renderer.less

@@ -96,13 +96,6 @@
 }
 
 .framework-perseus {
-    #problemarea {
-        input,
-        button {
-            .perseus-interactive;
-        }
-    }
-
     div.paragraph {
         font-family: "Lato", sans-serif;
         font-weight: 400;

package/src/widgets/__stories__/video.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
-import {question1} from "../__testdata__/video.testdata";
+import {question1, question2, question3} from "../__testdata__/video.testdata";
 
 export default {
     title: "Perseus/Widgets/Video",
@@ -12,3 +12,11 @@ type StoryArgs = Record<any, any>;
 export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };
+
+export const Question2 = (args: StoryArgs): React.ReactElement => {
+    return <RendererWithDebugUI question={question2} />;
+};
+
+export const Question3 = (args: StoryArgs): React.ReactElement => {
+    return <RendererWithDebugUI question={question3} />;
+};

package/src/widgets/__testdata__/video.testdata.ts

@@ -19,3 +19,43 @@ export const question1: PerseusRenderer = {
     },
     replace: false,
 };
+
+export const question2: PerseusRenderer = {
+    content:
+        "Watch the WMF at Angkor Wat video to find the answer.\n\n[[\u2603 video 1]]\n\n",
+    images: {},
+    widgets: {
+        "video 1": {
+            graded: true,
+            version: {major: 0, minor: 0},
+            static: false,
+            type: "video",
+            options: {
+                static: false,
+                location: "https://player.vimeo.com/video/4754041",
+            },
+            alignment: "block",
+        },
+    },
+    replace: false,
+};
+
+export const question3: PerseusRenderer = {
+    content:
+        "Watch the WMF at Angkor Wat video to find the answer.\n\n[[\u2603 video 1]]\n\n",
+    images: {},
+    widgets: {
+        "video 1": {
+            graded: true,
+            version: {major: 0, minor: 0},
+            static: false,
+            type: "video",
+            options: {
+                static: false,
+                location: "https://player.vimeo.com/video/4754041?h=64fbc32a6e",
+            },
+            alignment: "block",
+        },
+    },
+    replace: false,
+};

package/src/widgets/__tests__/__snapshots__/dropdown.test.ts.snap

@@ -40,18 +40,10 @@ exports[`Dropdown widget should snapshot when opened: dropdown open 1`] = `
                 >
                   greater/less than or equal to
                 </span>
-                <svg
+                <span
                   aria-hidden="true"
-                  class="svg_aeiopc-o_O-caret_ntkmq"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z"
-                    fill="rgba(33,36,44,0.64)"
-                  />
-                </svg>
+                  class="svg_aeiopc-o_O-caret_ntkmq-o_O-inlineStyles_13xtep5"
+                />
               </button>
             </div>
           </div>
@@ -113,18 +105,10 @@ exports[`Dropdown widget should snapshot: initial render 1`] = `
                 >
                   greater/less than or equal to
                 </span>
-                <svg
+                <span
                   aria-hidden="true"
-                  class="svg_aeiopc-o_O-caret_ntkmq"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z"
-                    fill="rgba(33,36,44,0.64)"
-                  />
-                </svg>
+                  class="svg_aeiopc-o_O-caret_ntkmq-o_O-inlineStyles_13xtep5"
+                />
               </button>
             </div>
           </div>