@khanacademy/wonder-blocks-form 4.2.2 → 4.3.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @khanacademy/wonder-blocks-form
 
+## 4.3.0
+
+### Minor Changes
+
+-   b05c5344: Forward refs in RadioGroup
+-   f84dfb23: Foward refs in CheckboxGroup
+-   13f9de9c: Forward refs in Checkbox
+-   a5116f0b: Forwards refs in Choice, Radio, and RadioCore
+
+### Patch Changes
+
+-   Updated dependencies [0423a440]
+-   Updated dependencies [c37b99aa]
+-   Updated dependencies [afd5a801]
+-   Updated dependencies [13c48aa0]
+-   Updated dependencies [cade62f3]
+-   Updated dependencies [c4cef3e6]
+-   Updated dependencies [4c900085]
+    -   @khanacademy/wonder-blocks-typography@2.1.0
+    -   @khanacademy/wonder-blocks-core@5.3.0
+    -   @khanacademy/wonder-blocks-clickable@3.1.1
+    -   @khanacademy/wonder-blocks-icon@2.0.14
+    -   @khanacademy/wonder-blocks-layout@2.0.14
+
+## 4.2.3
+
+### Patch Changes
+
+-   Updated dependencies [ad8beb23]
+    -   @khanacademy/wonder-blocks-clickable@3.1.0
+
 ## 4.2.2
 
 ### Patch Changes

package/dist/components/checkbox-core.d.ts

@@ -1,12 +1,17 @@
 import * as React from "react";
-import type { ChoiceCoreProps } from "../util/types";
+import type { Checked } from "../util/types";
 /**
  * The internal stateless ☑️ Checkbox
  */
-export default class CheckboxCore extends React.Component<ChoiceCoreProps> {
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: Readonly<ChoiceCoreProps>): void;
-    inputRef: React.RefObject<HTMLInputElement>;
-    handleChange: () => void;
-    render(): React.ReactNode;
-}
+declare const CheckboxCore: React.ForwardRefExoticComponent<Readonly<import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes> & Readonly<{
+    role?: import("../../../wonder-blocks-core/src/util/aria-types").AriaRole | undefined;
+}> & {
+    checked: Checked;
+    disabled: boolean;
+    error: boolean;
+    groupName?: string | undefined;
+    id?: string | undefined;
+    testId?: string | undefined;
+    onClick: () => void;
+} & React.RefAttributes<HTMLInputElement>>;
+export default CheckboxCore;

package/dist/components/checkbox-core.js.flow

@@ -4,18 +4,27 @@
  * Flowgen v1.21.0
  * @flow
  */
+import * as $Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types from "../../../wonder-blocks-core/src/util/aria-types";
 import * as React from "react";
-import type { ChoiceCoreProps } from "../util/types";
+import type { Checked } from "../util/types";
 
 /**
  * The internal stateless ☑️ Checkbox
  */
-declare export default class CheckboxCore
-  extends React.Component<ChoiceCoreProps>
-{
-  componentDidMount(): void;
-  componentDidUpdate(prevProps: $ReadOnly<ChoiceCoreProps>): void;
-  inputRef: React.RefObject<HTMLInputElement>;
-  handleChange: () => void;
-  render(): React.Node;
-}
+declare var CheckboxCore: React.ForwardRefExoticComponent<{|
+  ...$ReadOnly<$Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types.AriaAttributes>,
+  ...$ReadOnly<{|
+    role?: $Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types.AriaRole | void,
+  |}>,
+  ...{|
+    checked: Checked,
+    disabled: boolean,
+    error: boolean,
+    groupName?: string | void,
+    id?: string | void,
+    testId?: string | void,
+    onClick: () => void,
+  |},
+  ...React.RefAttributes<HTMLInputElement>,
+|}>;
+declare export default typeof CheckboxCore;

package/dist/components/checkbox-group.d.ts

@@ -77,8 +77,5 @@ type CheckboxGroupProps = {
  * </CheckboxGroup>
  * ```
  */
-export default class CheckboxGroup extends React.Component<CheckboxGroupProps> {
-    handleChange(changedValue: string, originalCheckedState: boolean): void;
-    render(): React.ReactNode;
-}
-export {};
+declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLFieldSetElement>>;
+export default CheckboxGroup;

package/dist/components/checkbox-group.js.flow

@@ -93,9 +93,8 @@ declare type CheckboxGroupProps = {|
  * </CheckboxGroup>
  * ```
  */
-declare export default class CheckboxGroup
-  extends React.Component<CheckboxGroupProps>
-{
-  handleChange(changedValue: string, originalCheckedState: boolean): void;
-  render(): React.Node;
-}
+declare var CheckboxGroup: React.AbstractComponent<
+  CheckboxGroupProps,
+  HTMLFieldSetElement
+>;
+declare export default typeof CheckboxGroup;

package/dist/components/checkbox.d.ts

@@ -1,7 +1,30 @@
 import * as React from "react";
-import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
 import type { Checked } from "../util/types";
-type ChoiceComponentProps = AriaProps & {
+/**
+ * ☑️ A nicely styled checkbox for all your checking needs. Can optionally take
+ * label and description props.
+ *
+ * If used by itself, a checkbox provides two options - checked and unchecked.
+ * A group of checkboxes can be used to allow a user to select multiple values
+ * from a list of options.
+ *
+ * If you want a whole group of Checkbox[es] that are related, see the Choice
+ * and CheckboxGroup components.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * import {Checkbox} from "@khanacademy/wonder-blocks-form";
+ *
+ * const [checked, setChecked] = React.useState(false);
+ *
+ * <Checkbox checked={checked} onChange={setChecked} />
+ * ```
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<Readonly<import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes> & Readonly<{
+    role?: import("../../../wonder-blocks-core/src/util/aria-types").AriaRole | undefined;
+}> & {
     /**
      * Whether this component is checked or indeterminate
      */
@@ -9,11 +32,11 @@ type ChoiceComponentProps = AriaProps & {
     /**
      * Whether this component is disabled
      */
-    disabled: boolean;
+    disabled?: boolean | undefined;
     /**
      * Whether this component should show an error state
      */
-    error: boolean;
+    error?: boolean | undefined;
     /**
      * Callback when this component is selected. The newCheckedState is the
      * new checked state of the component.
@@ -32,7 +55,7 @@ type ChoiceComponentProps = AriaProps & {
      * guarantee that the ID is unique within everything rendered on a page.
      * Used to match `<label>` with `<input>` elements for screenreaders.
      */
-    id?: string;
+    id?: string | undefined;
     /**
      * Optional styling for the container. Does not style the component.
      */
@@ -40,45 +63,16 @@ type ChoiceComponentProps = AriaProps & {
     /**
      * Adds CSS classes to the Checkbox.
      */
-    className?: string;
+    className?: string | undefined;
     /**
      * Optional test ID for e2e testing
      */
-    testId?: string;
+    testId?: string | undefined;
     /**
      * Name for the checkbox or radio button group. Only applicable for group
      * contexts, auto-populated by group components via Choice.
      * @ignore
      */
-    groupName?: string;
-};
-type DefaultProps = {
-    disabled: ChoiceComponentProps["disabled"];
-    error: ChoiceComponentProps["error"];
-};
-/**
- * ☑️ A nicely styled checkbox for all your checking needs. Can optionally take
- * label and description props.
- *
- * If used by itself, a checkbox provides two options - checked and unchecked.
- * A group of checkboxes can be used to allow a user to select multiple values
- * from a list of options.
- *
- * If you want a whole group of Checkbox[es] that are related, see the Choice
- * and CheckboxGroup components.
- *
- * ### Usage
- *
- * ```jsx
- * import {Checkbox} from "@khanacademy/wonder-blocks-form";
- *
- * const [checked, setChecked] = React.useState(false);
- *
- * <Checkbox checked={checked} onChange={setChecked} />
- * ```
- */
-export default class Checkbox extends React.Component<ChoiceComponentProps> {
-    static defaultProps: DefaultProps;
-    render(): React.ReactNode;
-}
-export {};
+    groupName?: string | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default Checkbox;

package/dist/components/checkbox.js.flow

@@ -4,11 +4,37 @@
  * Flowgen v1.21.0
  * @flow
  */
+import * as $Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types from "../../../wonder-blocks-core/src/util/aria-types";
 import * as React from "react";
-import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
 import type { Checked } from "../util/types";
-declare type ChoiceComponentProps = {|
-  ...AriaProps,
+
+/**
+ * ☑️ A nicely styled checkbox for all your checking needs. Can optionally take
+ * label and description props.
+ *
+ * If used by itself, a checkbox provides two options - checked and unchecked.
+ * A group of checkboxes can be used to allow a user to select multiple values
+ * from a list of options.
+ *
+ * If you want a whole group of Checkbox[es] that are related, see the Choice
+ * and CheckboxGroup components.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * import {Checkbox} from "@khanacademy/wonder-blocks-form";
+ *
+ * const [checked, setChecked] = React.useState(false);
+ *
+ * <Checkbox checked={checked} onChange={setChecked} />
+ * ```
+ */
+declare var Checkbox: React.ForwardRefExoticComponent<{|
+  ...$ReadOnly<$Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types.AriaAttributes>,
+  ...$ReadOnly<{|
+    role?: $Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types.AriaRole | void,
+  |}>,
   ...{|
     /**
      * Whether this component is checked or indeterminate
@@ -18,12 +44,12 @@ declare type ChoiceComponentProps = {|
     /**
      * Whether this component is disabled
      */
-    disabled: boolean,
+    disabled?: boolean | void,
 
     /**
      * Whether this component should show an error state
      */
-    error: boolean,
+    error?: boolean | void,
 
     /**
      * Callback when this component is selected. The newCheckedState is the
@@ -46,7 +72,7 @@ declare type ChoiceComponentProps = {|
      * guarantee that the ID is unique within everything rendered on a page.
      * Used to match `<label>` with `<input>` elements for screenreaders.
      */
-    id?: string,
+    id?: string | void,
 
     /**
      * Optional styling for the container. Does not style the component.
@@ -56,49 +82,20 @@ declare type ChoiceComponentProps = {|
     /**
      * Adds CSS classes to the Checkbox.
      */
-    className?: string,
+    className?: string | void,
 
     /**
      * Optional test ID for e2e testing
      */
-    testId?: string,
+    testId?: string | void,
 
     /**
      * Name for the checkbox or radio button group. Only applicable for group
      * contexts, auto-populated by group components via Choice.
      * @ignore
      */
-    groupName?: string,
+    groupName?: string | void,
   |},
-|};
-declare type DefaultProps = {|
-  disabled: $PropertyType<ChoiceComponentProps, "disabled">,
-  error: $PropertyType<ChoiceComponentProps, "error">,
-|};
-/**
- * ☑️ A nicely styled checkbox for all your checking needs. Can optionally take
- * label and description props.
- *
- * If used by itself, a checkbox provides two options - checked and unchecked.
- * A group of checkboxes can be used to allow a user to select multiple values
- * from a list of options.
- *
- * If you want a whole group of Checkbox[es] that are related, see the Choice
- * and CheckboxGroup components.
- *
- * ### Usage
- *
- * ```jsx
- * import {Checkbox} from "@khanacademy/wonder-blocks-form";
- *
- * const [checked, setChecked] = React.useState(false);
- *
- * <Checkbox checked={checked} onChange={setChecked} />
- * ```
- */
-declare export default class Checkbox
-  extends React.Component<ChoiceComponentProps>
-{
-  static defaultProps: DefaultProps;
-  render(): React.Node;
-}
+  ...React.RefAttributes<HTMLInputElement>,
+|}>;
+declare export default typeof Checkbox;

package/dist/components/choice-internal.d.ts

@@ -1,21 +1,28 @@
 import * as React from "react";
-import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
-import CheckboxCore from "./checkbox-core";
-import RadioCore from "./radio-core";
-type Props = AriaProps & {
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+/**
+ * This is a potentially labeled 🔘 or ☑️ item. This is an internal component
+ * that's wrapped by Checkbox and Radio. Choice is a wrapper for Checkbox and
+ * Radio with many of its props auto-populated, to be used with CheckboxGroup
+ * and RadioGroup. This design allows for more explicit prop typing. For
+ * example, we can make onChange a required prop on Checkbox but not on Choice
+ * (because for Choice, that prop would be auto-populated by CheckboxGroup).
+ */ declare const ChoiceInternal: React.ForwardRefExoticComponent<Readonly<import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes> & Readonly<{
+    role?: import("../../../wonder-blocks-core/src/util/aria-types").AriaRole | undefined;
+}> & {
     /** Whether this choice is checked. */
     checked: boolean | null | undefined;
     /** Whether this choice option is disabled. */
-    disabled: boolean;
+    disabled?: boolean | undefined;
     /** Whether this choice is in error mode. */
-    error: boolean;
+    error?: boolean | undefined;
     /** Returns the new checked state of the component. */
     onChange: (newCheckedState: boolean) => unknown;
     /**
      * Used for accessibility purposes, where the label id should match the
      * input id.
      */
-    id?: string;
+    id?: string | undefined;
     /**
      * Optional additional styling.
      */
@@ -23,11 +30,11 @@ type Props = AriaProps & {
     /**
      * Adds CSS classes to the Button.
      */
-    className?: string;
+    className?: string | undefined;
     /**
      * Optional id for testing purposes.
      */
-    testId?: string;
+    testId?: string | undefined;
     /**
      * Label for the field.
      */
@@ -35,27 +42,8 @@ type Props = AriaProps & {
     /** Optional description for the field. */
     description?: React.ReactNode;
     /** Auto-populated by parent's groupName prop if in a group. */
-    groupName?: string;
+    groupName?: string | undefined;
     /** Takes either "radio" or "checkbox" value. */
     variant: "radio" | "checkbox";
-};
-type DefaultProps = {
-    disabled: Props["disabled"];
-    error: Props["error"];
-};
-/**
- * This is a potentially labeled 🔘 or ☑️ item. This is an internal component
- * that's wrapped by Checkbox and Radio. Choice is a wrapper for Checkbox and
- * Radio with many of its props auto-populated, to be used with CheckboxGroup
- * and RadioGroup. This design allows for more explicit prop typing. For
- * example, we can make onChange a required prop on Checkbox but not on Choice
- * (because for Choice, that prop would be auto-populated by CheckboxGroup).
- */ export default class ChoiceInternal extends React.Component<Props> {
-    static defaultProps: DefaultProps;
-    handleClick: () => void;
-    getChoiceCoreComponent(): typeof RadioCore | typeof CheckboxCore;
-    getLabel(id: string): React.ReactNode;
-    getDescription(id?: string): React.ReactNode;
-    render(): React.ReactNode;
-}
-export {};
+} & React.RefAttributes<HTMLInputElement>>;
+export default ChoiceInternal;

package/dist/components/choice-internal.js.flow

@@ -4,12 +4,23 @@
  * Flowgen v1.21.0
  * @flow
  */
+import * as $Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types from "../../../wonder-blocks-core/src/util/aria-types";
 import * as React from "react";
-import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
-import CheckboxCore from "./checkbox-core";
-import RadioCore from "./radio-core";
-declare type Props = {|
-  ...AriaProps,
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+
+/**
+ * This is a potentially labeled 🔘 or ☑️ item. This is an internal component
+ * that's wrapped by Checkbox and Radio. Choice is a wrapper for Checkbox and
+ * Radio with many of its props auto-populated, to be used with CheckboxGroup
+ * and RadioGroup. This design allows for more explicit prop typing. For
+ * example, we can make onChange a required prop on Checkbox but not on Choice
+ * (because for Choice, that prop would be auto-populated by CheckboxGroup).
+ */
+declare var ChoiceInternal: React.ForwardRefExoticComponent<{|
+  ...$ReadOnly<$Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types.AriaAttributes>,
+  ...$ReadOnly<{|
+    role?: $Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types.AriaRole | void,
+  |}>,
   ...{|
     /**
      * Whether this choice is checked.
@@ -19,12 +30,12 @@ declare type Props = {|
     /**
      * Whether this choice option is disabled.
      */
-    disabled: boolean,
+    disabled?: boolean | void,
 
     /**
      * Whether this choice is in error mode.
      */
-    error: boolean,
+    error?: boolean | void,
 
     /**
      * Returns the new checked state of the component.
@@ -35,7 +46,7 @@ declare type Props = {|
      * Used for accessibility purposes, where the label id should match the
      * input id.
      */
-    id?: string,
+    id?: string | void,
 
     /**
      * Optional additional styling.
@@ -45,12 +56,12 @@ declare type Props = {|
     /**
      * Adds CSS classes to the Button.
      */
-    className?: string,
+    className?: string | void,
 
     /**
      * Optional id for testing purposes.
      */
-    testId?: string,
+    testId?: string | void,
 
     /**
      * Label for the field.
@@ -65,31 +76,13 @@ declare type Props = {|
     /**
      * Auto-populated by parent's groupName prop if in a group.
      */
-    groupName?: string,
+    groupName?: string | void,
 
     /**
      * Takes either "radio" or "checkbox" value.
      */
     variant: "radio" | "checkbox",
   |},
-|};
-declare type DefaultProps = {|
-  disabled: $PropertyType<Props, "disabled">,
-  error: $PropertyType<Props, "error">,
-|};
-/**
- * This is a potentially labeled 🔘 or ☑️ item. This is an internal component
- * that's wrapped by Checkbox and Radio. Choice is a wrapper for Checkbox and
- * Radio with many of its props auto-populated, to be used with CheckboxGroup
- * and RadioGroup. This design allows for more explicit prop typing. For
- * example, we can make onChange a required prop on Checkbox but not on Choice
- * (because for Choice, that prop would be auto-populated by CheckboxGroup).
- */
-declare export default class ChoiceInternal extends React.Component<Props> {
-  static defaultProps: DefaultProps;
-  handleClick: () => void;
-  getChoiceCoreComponent(): typeof RadioCore | typeof CheckboxCore;
-  getLabel(id: string): React.Node;
-  getDescription(id?: string): React.Node;
-  render(): React.Node;
-}
+  ...React.RefAttributes<HTMLInputElement>,
+|}>;
+declare export default typeof ChoiceInternal;

package/dist/components/choice.d.ts

@@ -1,58 +1,5 @@
 import * as React from "react";
-import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
-import Checkbox from "./checkbox";
-import Radio from "./radio";
-type Props = AriaProps & {
-    /** User-defined. Label for the field. */
-    label: React.ReactNode;
-    /** User-defined. Optional description for the field. */
-    description?: React.ReactNode;
-    /** User-defined. Should be distinct for each item in the group. */
-    value: string;
-    /** User-defined. Whether this choice option is disabled. Default false. */
-    disabled: boolean;
-    /** User-defined. Optional id for testing purposes. */
-    testId?: string;
-    /** User-defined. Optional additional styling. */
-    style?: StyleType;
-    /**
-     * Auto-populated by parent. Whether this choice is checked.
-     * @ignore
-     */
-    checked: boolean;
-    /**
-     * Auto-populated by parent. Whether this choice is in error mode (everything
-     * in a choice group would be in error mode at the same time).
-     * @ignore
-     */
-    error?: boolean;
-    /**
-     * Auto-populated by parent. Used for accessibility purposes, where the label
-     * id should match the input id.
-     * @ignore
-     */
-    id?: string;
-    /**
-     * Auto-populated by parent's groupName prop.
-     * @ignore
-     */
-    groupName?: string;
-    /**
-     * Auto-populated by parent. Returns the new checked state of the component.
-     * @ignore
-     */
-    onChange: (newCheckedState: boolean) => unknown;
-    /**
-     * Auto-populated by parent.
-     * @ignore
-     */
-    variant?: "radio" | "checkbox";
-};
-type DefaultProps = {
-    checked: Props["checked"];
-    disabled: Props["disabled"];
-    onChange: Props["onChange"];
-};
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
 /**
  * This is a labeled 🔘 or ☑️ item. Choice is meant to be used as children of
  * CheckboxGroup and RadioGroup because many of its props are auto-populated
@@ -119,9 +66,52 @@ type DefaultProps = {
  * </RadioGroup>
  * ```
  */
-export default class Choice extends React.Component<Props> {
-    static defaultProps: DefaultProps;
-    getChoiceComponent(variant?: string | null): typeof Radio | typeof Checkbox;
-    render(): React.ReactNode;
-}
-export {};
+declare const Choice: React.ForwardRefExoticComponent<Readonly<import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes> & Readonly<{
+    role?: import("../../../wonder-blocks-core/src/util/aria-types").AriaRole | undefined;
+}> & {
+    /** User-defined. Label for the field. */
+    label: React.ReactNode;
+    /** User-defined. Optional description for the field. */
+    description?: React.ReactNode;
+    /** User-defined. Should be distinct for each item in the group. */
+    value: string;
+    /** User-defined. Whether this choice option is disabled. Default false. */
+    disabled?: boolean | undefined;
+    /** User-defined. Optional id for testing purposes. */
+    testId?: string | undefined;
+    /** User-defined. Optional additional styling. */
+    style?: StyleType;
+    /**
+     * Auto-populated by parent. Whether this choice is checked.
+     * @ignore
+     */
+    checked?: boolean | undefined;
+    /**
+     * Auto-populated by parent. Whether this choice is in error mode (everything
+     * in a choice group would be in error mode at the same time).
+     * @ignore
+     */
+    error?: boolean | undefined;
+    /**
+     * Auto-populated by parent. Used for accessibility purposes, where the label
+     * id should match the input id.
+     * @ignore
+     */
+    id?: string | undefined;
+    /**
+     * Auto-populated by parent's groupName prop.
+     * @ignore
+     */
+    groupName?: string | undefined;
+    /**
+     * Auto-populated by parent. Returns the new checked state of the component.
+     * @ignore
+     */
+    onChange?: ((newCheckedState: boolean) => unknown) | undefined;
+    /**
+     * Auto-populated by parent.
+     * @ignore
+     */
+    variant?: "checkbox" | "radio" | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default Choice;