@khanacademy/perseus 4.0.1 → 5.0.0

package/dist/multi-items/multi-renderer.d.ts

@@ -27,7 +27,7 @@ type RendererData = ContentRendererData | HintRendererData;
 type RendererDataTree = Tree<ContentRendererData, HintRendererData, null>;
 /**
  * TODO(somewhatabstract, JIRA-XXXX):
- * Some usage of this type somewhere is causing Flow to believe that these
+ * Some usage of this type somewhere is causing TypeScript to believe that these
  * elements should be components. Don't know where that is, to fix it up
  * properly. In reality, these types are just too hard to use and aren't
  * really helping us out as I now have to suppress this rather than

package/dist/multi-items/multi-renderer.js.flow

@@ -39,7 +39,7 @@ declare type RendererDataTree = Tree<
 >;
 /**
  * TODO(somewhatabstract, JIRA-XXXX):
- * Some usage of this type somewhere is causing Flow to believe that these
+ * Some usage of this type somewhere is causing TypeScript to believe that these
  * elements should be components. Don't know where that is, to fix it up
  * properly. In reality, these types are just too hard to use and aren't
  * really helping us out as I now have to suppress this rather than

package/dist/multi-items/prop-type-builders.d.ts

@@ -2,7 +2,7 @@
  * Utility functions to build React PropTypes for multi-items and shapes.
  *
  * If you're writing new components, though, consider using the Item and Shape
- * Flow types instead.
+ * types instead.
  */
 import type { Shape } from "./shape-types";
 /**

package/dist/multi-items/shape-types.d.ts

@@ -11,7 +11,7 @@
  * Shapes also enable us to traverse a multi-item-shaped tree with confidence,
  * even when we can't infer the shape from the tree alone.
  *
- * We *could* go all-in on a more general library to make certain Flow types
+ * We *could* go all-in on a more general library to make certain types
  * runtime-inspectable, in order to DRY some things up, but that's probably a
  * big ol' infrastructural magic mess, and the narrower scope of Shapes makes
  * it easier to be confident that we've covered all cases rather than having to

package/dist/multi-items/shape-types.js.flow

@@ -17,7 +17,7 @@
  * Shapes also enable us to traverse a multi-item-shaped tree with confidence,
  * even when we can't infer the shape from the tree alone.
  *
- * We *could* go all-in on a more general library to make certain Flow types
+ * We *could* go all-in on a more general library to make certain types
  * runtime-inspectable, in order to DRY some things up, but that's probably a
  * big ol' infrastructural magic mess, and the narrower scope of Shapes makes
  * it easier to be confident that we've covered all cases rather than having to

package/dist/multi-items/tree-types.d.ts

@@ -28,7 +28,7 @@ export type ObjectNode<C, H, T> = {
  * TODO(somewhatabstract, JIRA-XXXX):
  * We should ditch this type or create some helpers for working with it.
  * As it stands, consumers have to check each node's type before using it
- * in order to ensure that flow can track its refinement and appropriate use.
+ * in order to ensure that TypeScript can track its refinement and appropriate use.
  * It's messy.
  */
 export type Tree<C, H, T> = C | H | T | ArrayNode<C, H, T> | ObjectNode<C, H, T>;

package/dist/multi-items/tree-types.js.flow

@@ -34,7 +34,7 @@ export type ObjectNode<C, H, T> = {
  * TODO(somewhatabstract, JIRA-XXXX):
  * We should ditch this type or create some helpers for working with it.
  * As it stands, consumers have to check each node's type before using it
- * in order to ensure that flow can track its refinement and appropriate use.
+ * in order to ensure that TypeScript can track its refinement and appropriate use.
  * It's messy.
  */
 export type Tree<C, H, T> =

package/dist/perseus-types.d.ts

@@ -361,7 +361,6 @@ export type PerseusNumericInputWidgetOptions = {
     labelText: string;
     size: string;
     coefficient: boolean;
-    multipleNumberInput?: boolean;
     rightAlign?: boolean;
     static: boolean;
     answerForms?: ReadonlyArray<PerseusNumericInputAnswerForm>;

package/dist/perseus-types.js.flow

@@ -532,7 +532,6 @@ export type PerseusNumericInputWidgetOptions = {|
   labelText: string,
   size: string,
   coefficient: boolean,
-  multipleNumberInput?: boolean,
   rightAlign?: boolean,
   static: boolean,
   answerForms?: $ReadOnlyArray<PerseusNumericInputAnswerForm>,

package/dist/widgets/__stories__/test-keypad-context-wrapper.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+type Props = {
+    children: React.ReactElement;
+};
+declare const TestKeypadContextWrapper: (props: Props) => React.ReactElement;
+export default TestKeypadContextWrapper;

package/dist/widgets/__stories__/test-keypad-context-wrapper.js.flow

@@ -0,0 +1,12 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+declare type Props = {|
+  children: React.Element<any>,
+|};
+declare var TestKeypadContextWrapper: (props: Props) => React.Element<any>;
+declare export default typeof TestKeypadContextWrapper;

package/dist/widgets/expression.d.ts

@@ -30,6 +30,8 @@ type DefaultProps = {
 };
 type OnInputErrorFunctionType = (arg1?: any, arg2?: any, arg3?: any) => boolean | null | undefined;
 export declare class Expression extends React.Component<Props, ExpressionState> {
+    _isMounted: boolean;
+    errorTimeout: null | number;
     static validate(userInput: string, rubric: Rubric, onInputError?: OnInputErrorFunctionType): PerseusScore;
     static getUserInputFromProps(props: Props): string;
     static getOneCorrectAnswerFromRubric(rubric: Rubric): string | null | undefined;
@@ -39,8 +41,6 @@ export declare class Expression extends React.Component<Props, ExpressionState>
     componentDidMount: () => void;
     componentDidUpdate: (prevProps: Props) => void;
     componentWillUnmount: () => void;
-    _isMounted: boolean;
-    errorTimeout: null | number;
     simpleValidate: (rubric: Rubric, onInputError: OnInputErrorFunctionType) => PerseusScore;
     getUserInput: () => string;
     change: (...args: any) => any | undefined;

package/dist/widgets/expression.js.flow

@@ -46,6 +46,8 @@ declare type OnInputErrorFunctionType = (
 declare export class Expression
   extends React.Component<Props, ExpressionState>
 {
+  _isMounted: boolean;
+  errorTimeout: null | number;
   static validate(
     userInput: string,
     rubric: Rubric,
@@ -59,8 +61,6 @@ declare export class Expression
   componentDidMount: () => void;
   componentDidUpdate: (prevProps: Props) => void;
   componentWillUnmount: () => void;
-  _isMounted: boolean;
-  errorTimeout: null | number;
   simpleValidate: (
     rubric: Rubric,
     onInputError: OnInputErrorFunctionType

package/dist/widgets/interaction/element-container.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-type ElementContainerProps = {
+type Props = {
     children: React.ReactElement<any> | ReadonlyArray<React.ReactElement<any>>;
     initiallyVisible: boolean;
     onDelete?: () => void | null | undefined;
@@ -7,14 +7,15 @@ type ElementContainerProps = {
     onUp?: () => void | null | undefined;
     title: string | React.ReactElement<any>;
 };
-declare class ElementContainer extends React.Component<ElementContainerProps, {
+type State = {
     show: boolean;
-}> {
+};
+declare class ElementContainer extends React.Component<Props, State> {
     static defaultProps: {
         initiallyVisible: boolean;
         title: string;
     };
-    constructor(props: ElementContainerProps);
+    constructor(props: Props);
     toggle: (e: React.SyntheticEvent) => void;
     render(): React.ReactNode;
 }

package/dist/widgets/interaction/element-container.js.flow

@@ -5,7 +5,7 @@
  * @flow
  */
 import * as React from "react";
-declare type ElementContainerProps = {|
+declare type Props = {|
   children: React.Element<any> | $ReadOnlyArray<React.Element<any>>,
   initiallyVisible: boolean,
   onDelete?: () => void | null | void,
@@ -13,20 +13,15 @@ declare type ElementContainerProps = {|
   onUp?: () => void | null | void,
   title: string | React.Element<any>,
 |};
-declare class ElementContainer
-  extends
-    React.Component<
-      ElementContainerProps,
-      {|
-        show: boolean,
-      |}
-    >
-{
+declare type State = {|
+  show: boolean,
+|};
+declare class ElementContainer extends React.Component<Props, State> {
   static defaultProps: {|
     initiallyVisible: boolean,
     title: string,
   |};
-  constructor(props: ElementContainerProps): this;
+  constructor(props: Props): this;
   toggle: (e: SyntheticEvent<>) => void;
   render(): React.Node;
 }

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

@@ -5,21 +5,21 @@
  */
 import * as React from "react";
 import type { InteractiveMarkerType } from "./types";
-type MarkerProps = InteractiveMarkerType & {
+type Props = InteractiveMarkerType & {
     showSelected: boolean;
     showPulsate: boolean;
     onClick: (e: MouseEvent) => void;
     onKeyDown: (e: KeyboardEvent) => void;
 };
-type MarkerState = {
+type State = {
     isFocused: boolean;
 };
-export default class Marker extends React.Component<MarkerProps, MarkerState> {
+export default class Marker extends React.Component<Props, State> {
     _icon: HTMLElement | null | undefined;
     static defaultProps: {
         selected: ReadonlyArray<any>;
     };
-    state: MarkerState;
+    state: State;
     handleFocus(): void;
     handleBlur(): void;
     renderIcon(): React.ReactElement<React.ComponentProps<"div">>;

package/dist/widgets/label-image/marker.js.flow

@@ -6,7 +6,7 @@
  */
 import * as React from "react";
 import type { InteractiveMarkerType } from "./types";
-declare type MarkerProps = {|
+declare type Props = {|
   ...InteractiveMarkerType,
   ...{|
     showSelected: boolean,
@@ -15,17 +15,15 @@ declare type MarkerProps = {|
     onKeyDown: (e: KeyboardEvent) => void,
   |},
 |};
-declare type MarkerState = {|
+declare type State = {|
   isFocused: boolean,
 |};
-declare export default class Marker
-  extends React.Component<MarkerProps, MarkerState>
-{
+declare export default class Marker extends React.Component<Props, State> {
   _icon: HTMLElement | null | void;
   static defaultProps: {|
     selected: $ReadOnlyArray<any>,
   |};
-  state: MarkerState;
+  state: State;
   handleFocus(): void;
   handleBlur(): void;
   renderIcon(): React.Element<"div">;

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

@@ -16,7 +16,6 @@ type Props = ExternalProps & {
     answerForms: NonNullable<ExternalProps["answerForms"]>;
     labelText: NonNullable<ExternalProps["labelText"]>;
     linterContext: NonNullable<ExternalProps["linterContext"]>;
-    multipleNumberInput: NonNullable<ExternalProps["multipleNumberInput"]>;
     currentValue: string;
 };
 type DefaultProps = {
@@ -28,7 +27,6 @@ type DefaultProps = {
     answerForms: Props["answerForms"];
     labelText: Props["labelText"];
     linterContext: Props["linterContext"];
-    multipleNumberInput: Props["multipleNumberInput"];
 };
 type State = {
     previousValues: ReadonlyArray<string>;

package/dist/widgets/numeric-input.js.flow

@@ -31,9 +31,6 @@ declare type Props = {|
     answerForms: $NonMaybeType<$PropertyType<ExternalProps, "answerForms">>,
     labelText: $NonMaybeType<$PropertyType<ExternalProps, "labelText">>,
     linterContext: $NonMaybeType<$PropertyType<ExternalProps, "linterContext">>,
-    multipleNumberInput: $NonMaybeType<
-      $PropertyType<ExternalProps, "multipleNumberInput">
-    >,
     currentValue: string,
   |},
 |};
@@ -46,7 +43,6 @@ declare type DefaultProps = {|
   answerForms: $PropertyType<Props, "answerForms">,
   labelText: $PropertyType<Props, "labelText">,
   linterContext: $PropertyType<Props, "linterContext">,
-  multipleNumberInput: $PropertyType<Props, "multipleNumberInput">,
 |};
 declare type State = {|
   previousValues: $ReadOnlyArray<string>,

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

@@ -34,5 +34,11 @@ type Props = {
     registerFocusFunction?: (arg1: FocusFunction) => void;
     isLastUsedWidget?: boolean;
 };
-declare const BaseRadio: React.FC<Props>;
+declare const BaseRadio: {
+    (props: Props): React.ReactElement;
+    defaultProps: {
+        editMode: boolean;
+        multipleSelect: boolean;
+    };
+};
 export default BaseRadio;

package/dist/widgets/radio/base-radio.js.flow

@@ -40,5 +40,11 @@ declare type Props = {|
   registerFocusFunction?: (arg1: FocusFunction) => void,
   isLastUsedWidget?: boolean,
 |};
-declare var BaseRadio: React.StatelessFunctionalComponent<Props>;
+declare var BaseRadio: {|
+  (props: Props): React.Element<any>,
+  defaultProps: {|
+    editMode: boolean,
+    multipleSelect: boolean,
+  |},
+|};
 declare export default typeof BaseRadio;

package/dist/widgets/radio/choice-icon/choice-icon.d.ts

@@ -12,5 +12,5 @@ type ChoiceIconProps = {
     reviewMode: boolean;
     previouslyAnswered: boolean;
 };
-declare const ChoiceIcon: React.FC<ChoiceIconProps>;
+declare const ChoiceIcon: (props: ChoiceIconProps) => React.ReactElement;
 export default ChoiceIcon;

package/dist/widgets/radio/choice-icon/choice-icon.js.flow

@@ -18,5 +18,5 @@ declare type ChoiceIconProps = {|
   reviewMode: boolean,
   previouslyAnswered: boolean,
 |};
-declare var ChoiceIcon: React.StatelessFunctionalComponent<ChoiceIconProps>;
+declare var ChoiceIcon: (props: ChoiceIconProps) => React.Element<any>;
 declare export default typeof ChoiceIcon;

package/dist/widgets/radio/choice-icon/cross-out-line.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
  * The "cross-out line" that appears over the icon when the choice has been
  * `crossedOut`.
  */
-declare const CrossOutLine: React.FC<{
+declare const CrossOutLine: (props: {
     color: string;
-}>;
+}) => React.ReactElement;
 export default CrossOutLine;

package/dist/widgets/radio/choice-icon/cross-out-line.js.flow

@@ -10,7 +10,7 @@ import * as React from "react";
  * The "cross-out line" that appears over the icon when the choice has been
  * `crossedOut`.
  */
-declare var CrossOutLine: React.StatelessFunctionalComponent<{|
+declare var CrossOutLine: (props: {|
   color: string,
-|}>;
+|}) => React.Element<any>;
 declare export default typeof CrossOutLine;

package/dist/widgets/radio/focus-ring.d.ts

@@ -8,5 +8,12 @@ type Props = {
     color: string;
     multipleSelect: boolean;
 };
-declare const FocusRing: React.FC<Props>;
+declare const FocusRing: {
+    (props: Props): React.ReactElement;
+    defaultProps: {
+        visible: boolean;
+        color: string;
+        multipleSelect: boolean;
+    };
+};
 export default FocusRing;

package/dist/widgets/radio/focus-ring.js.flow

@@ -11,5 +11,12 @@ declare type Props = {|
   color: string,
   multipleSelect: boolean,
 |};
-declare var FocusRing: React.StatelessFunctionalComponent<Props>;
+declare var FocusRing: {|
+  (props: Props): React.Element<any>,
+  defaultProps: {|
+    visible: boolean,
+    color: string,
+    multipleSelect: boolean,
+  |},
+|};
 declare export default typeof FocusRing;

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

@@ -6,12 +6,12 @@
  * between the states more immediately clear to users.
  */
 import * as React from "react";
-type OptionStatusProps = {
+type Props = {
     correct: boolean;
     checked: boolean;
     crossedOut: boolean;
     previouslyAnswered: boolean;
     reviewMode: boolean;
 };
-declare const OptionStatus: React.FC<OptionStatusProps>;
+declare const OptionStatus: (props: Props) => React.ReactElement;
 export default OptionStatus;

package/dist/widgets/radio/option-status.js.flow

@@ -5,12 +5,12 @@
  * @flow
  */
 import * as React from "react";
-declare type OptionStatusProps = {|
+declare type Props = {|
   correct: boolean,
   checked: boolean,
   crossedOut: boolean,
   previouslyAnswered: boolean,
   reviewMode: boolean,
 |};
-declare var OptionStatus: React.StatelessFunctionalComponent<OptionStatusProps>;
+declare var OptionStatus: (props: Props) => React.Element<any>;
 declare export default typeof OptionStatus;

package/dist/widgets/video-transcript-link.d.ts

@@ -8,5 +8,5 @@ type Props = {
 /**
  * Video Transcript Link Component.
  */
-declare const VideoTranscriptLink: React.FC<Props>;
+declare const VideoTranscriptLink: (props: Props) => React.ReactElement;
 export default VideoTranscriptLink;

package/dist/widgets/video-transcript-link.js.flow

@@ -11,5 +11,5 @@ declare type Props = {|
 /**
  * Video Transcript Link Component.
  */
-declare var VideoTranscriptLink: React.StatelessFunctionalComponent<Props>;
+declare var VideoTranscriptLink: (props: Props) => React.Element<any>;
 declare export default typeof VideoTranscriptLink;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "4.0.1",
+    "version": "5.0.0",
     "publishConfig": {
         "access": "public"
     },
@@ -23,10 +23,10 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.1",
         "@khanacademy/kmath": "^0.1.1",
-        "@khanacademy/math-input": "^0.7.1",
+        "@khanacademy/math-input": "^1.0.0",
         "@khanacademy/perseus-linter": "^0.3.1",
-        "@khanacademy/pure-markdown": "^0.2.1",
-        "@khanacademy/simple-markdown": "^0.9.1",
+        "@khanacademy/pure-markdown": "^0.2.3",
+        "@khanacademy/simple-markdown": "^0.9.3",
         "mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992"
     },
     "devDependencies": {

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

@@ -16,14 +16,10 @@ export default {
     title: "Perseus/Renderers/Item Renderer",
 } as Story;
 
-export const InputNumberItem: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const InputNumberItem = (args: StoryArgs): React.ReactElement => {
     return <ItemRendererWithDebugUI item={itemWithInput} />;
 };
 
-export const LabelImageItem: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const LabelImageItem = (args: StoryArgs): React.ReactElement => {
     return <ItemRendererWithDebugUI item={labelImageItem} />;
 };

package/src/__stories__/server-item-renderer.stories.tsx

@@ -16,14 +16,10 @@ export default {
     title: "Perseus/Renderers/Server Item Renderer",
 } as Story;
 
-export const InputNumberItem: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const InputNumberItem = (args: StoryArgs): React.ReactElement => {
     return <ServerItemRendererWithDebugUI item={itemWithInput} />;
 };
 
-export const LabelImageItem: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const LabelImageItem = (args: StoryArgs): React.ReactElement => {
     return <ServerItemRendererWithDebugUI item={labelImageItem} />;
 };

package/src/__testdata__/item-renderer.testdata.ts

@@ -111,7 +111,7 @@ export const labelImageItem: PerseusItem = {
 export const mockedItem: PerseusItem = {
     // The mock widget type is not part of the PerseusWidget type union (and
     // we don't want to make it such to avoid polluting our production types
-    // for test purposes) so we force Flow to accept it here.
+    // for test purposes) so we force TypeScript to accept it here.
     // @ts-expect-error [FEI-5003] - TS2352 - Conversion of type '{ content: string; images: {}; widgets: { "mock-widget 1": { graded: true; version: { major: number; minor: number; }; static: false; type: "mock-widget"; options: { static: false; smiling: boolean; }; alignment: string; }; "mock-widget 2": { ...; }; "mock-widget 3": { ...; }; "mock-widget 4": { ...; }; }; }' to type 'PerseusRenderer' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
     question: {
         content:

package/src/__testdata__/renderer.testdata.ts

@@ -89,7 +89,7 @@ export const question2: PerseusRenderer = {
 export const mockedItem: PerseusRenderer = {
     // The mock widget type is not part of the PerseusWidget type union (and
     // we don't want to make it such to avoid polluting our production types
-    // for test purposes) so we force Flow to accept it here.
+    // for test purposes) so we force TypeScript to accept it here.
     content:
         "Mock widgets ==> [[\u2603 mock-widget 1]] [[\u2603 mock-widget 2]] [[\u2603 mock-widget 3]]",
     images: {},

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

@@ -93,7 +93,7 @@ export const renderQuestion = (
 };
 
 // Finds a widget in the given renderer by ID. The return type is non-optional
-// (ie. it assumes the widget will exist) to make Flow happier in the tests
+// (ie. it assumes the widget will exist) to make TypeScript happier in the tests
 // that use this function.
 const getWidgetById = (
     renderer: ItemRenderer,
@@ -111,7 +111,6 @@ const makeHint = (content: string): PerseusRenderer => ({
     content:
         "Maybe if you try using a calculator? See: [[\u2603 mock-hint-widget 1]]",
     widgets: {
-        // $FlowFixMe[incompatible-return]
         "mock-hint-widget 1": {
             graded: true,
             version: {major: 0, minor: 0},

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

@@ -33,7 +33,6 @@ const delayedPromise = (value: undefined) => {
 const renderQuestionArea = function (item, apiOptions): any {
     const wrapper = mount(
         <RenderStateRoot>
-            {/* $FlowFixMe[prop-missing] */}
             <Renderer
                 content={item.question.content}
                 images={item.question.images}
@@ -171,9 +170,8 @@ describe("Perseus API", function () {
                         renderer.setInputValue(widgetId, "5");
                     },
                 });
+
                 const input =
-                    // $FlowFixMe[incompatible-use]
-                    // $FlowFixMe[prop-missing]
                     // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2339 - Property 'querySelector' does not exist on type 'Element | Text'.
                     ReactDOM.findDOMNode(renderer).querySelector("input");
 
@@ -251,8 +249,6 @@ describe("Perseus API", function () {
             });
 
             const inputs =
-                // $FlowFixMe[incompatible-use]
-                // $FlowFixMe[prop-missing]
                 // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2339 - Property 'querySelectorAll' does not exist on type 'Element | Text'.
                 ReactDOM.findDOMNode(renderer).querySelectorAll("input");
             const input1 = inputs[0];

package/src/__tests__/renderer.test.tsx

@@ -184,7 +184,7 @@ describe("renderer", () => {
 
         it("should derive type widget ID if type missing", () => {
             // Arrange
-            // Note that the Flow types disallow this, but our Renderer handles the
+            // Note that the types disallow this, but our Renderer handles the
             // case so for now, I'm adding this test. We can remove the test
             // if/when we clean up the code for it in _getAllWidgetsInfo().
             const question = {

package/src/components/__stories__/button-group.stories.tsx

@@ -30,9 +30,7 @@ const HarnassedButtonGroup = (
     );
 };
 
-export const ButtonsWithNoTitles: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ButtonsWithNoTitles = (args: StoryArgs): React.ReactElement => {
     return (
         <HarnassedButtonGroup
             buttons={[
@@ -44,9 +42,7 @@ export const ButtonsWithNoTitles: React.FC<StoryArgs> = (
     );
 };
 
-export const ButtonsWithTitles: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ButtonsWithTitles = (args: StoryArgs): React.ReactElement => {
     return (
         <HarnassedButtonGroup
             buttons={[