@opentrons/components 0.1.6-alpha.9 → 0.1.7-alpha.1

package/README.md

@@ -8,7 +8,6 @@ React components for Opentrons' applications. Visit the [Opentrons Components Li
 
 ```javascript
 import { PrimaryButton } from '@opentrons/components'
-
 export default function CowButton(props) {
   return <PrimaryButton onClick={() => console.log('🐄')} />
 }
@@ -18,7 +17,7 @@ export default function CowButton(props) {
 
 Usage requirements for dependent projects:
 
-- Node v18 and yarn
+- Node v22.11.0+ and yarn
 - The following `dependencies` (peer dependencies of `@opentrons/components`)
   - `react`: `17.0.1`,
   - `react-router-dom`: `^4.2.2`,

package/lib/alerts/AlertItem.d.ts

@@ -1,13 +1,13 @@
-import type * as React from 'react';
+import type { ReactNode } from 'react';
 import type { IconProps } from '../icons';
 export type AlertType = 'success' | 'warning' | 'error' | 'info';
 export interface AlertItemProps {
     /** name constant of the icon to display */
     type: AlertType;
     /** title/main message of colored alert bar */
-    title: React.ReactNode;
+    title: ReactNode;
     /** Alert message body contents */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /** Additional class name */
     className?: string;
     /** optional handler to show close button/clear alert  */

package/lib/assets/localization/en/index.d.ts

@@ -0,0 +1,118 @@
+export declare const en: {
+    protocol_command_text: {
+        absorbance_reader_close_lid: string;
+        absorbance_reader_initialize: string;
+        absorbance_reader_open_lid: string;
+        absorbance_reader_read: string;
+        adapter_in_mod_in_slot: string;
+        adapter_in_slot: string;
+        air_gap_in_place: string;
+        all_nozzles: string;
+        aspirate: string;
+        aspirate_in_place: string;
+        blowout: string;
+        blowout_in_place: string;
+        closing_tc_lid: string;
+        column_layout: string;
+        comment: string;
+        configure_for_volume: string;
+        configure_nozzle_layout: string;
+        confirm_and_resume: string;
+        deactivate_hs_shake: string;
+        deactivate_temperature_module: string;
+        deactivating_hs_heater: string;
+        deactivating_tc_block: string;
+        deactivating_tc_lid: string;
+        degrees_c: string;
+        detect_liquid_presence: string;
+        disengaging_magnetic_module: string;
+        dispense: string;
+        dispense_in_place: string;
+        dispense_push_out: string;
+        drop_tip: string;
+        drop_tip_in_place: string;
+        dropping_tip_in_trash: string;
+        engaging_magnetic_module: string;
+        extension_mount: string;
+        extension_z: string;
+        extension_jaw: string;
+        fixed_trash: string;
+        get_next_tip: string;
+        home_gantry: string;
+        in_location: string;
+        latching_hs_latch: string;
+        left: string;
+        left_mount: string;
+        left_plunger: string;
+        left_z: string;
+        load_labware_to_display_location: string;
+        load_liquid_class: string;
+        load_liquids_info_protocol_setup: string;
+        load_module_protocol_setup: string;
+        load_pipette_protocol_setup: string;
+        module_in_slot: string;
+        module_in_slot_plural: string;
+        move_labware: string;
+        move_labware_manually: string;
+        move_labware_on: string;
+        move_labware_using_gripper: string;
+        move_relative: string;
+        move_to_addressable_area: string;
+        move_to_addressable_area_drop_tip: string;
+        move_to_coordinates: string;
+        move_to_slot: string;
+        move_to_well: string;
+        multiple: string;
+        notes: string;
+        off_deck: string;
+        offdeck: string;
+        on_location: string;
+        opening_tc_lid: string;
+        pause: string;
+        pause_on: string;
+        partial_layout: string;
+        pickup_tip: string;
+        prepare_to_aspirate: string;
+        reloading_labware: string;
+        return_tip: string;
+        right: string;
+        right_mount: string;
+        right_plunger: string;
+        right_z: string;
+        robot_close_gripper_jaw: string;
+        robot_move_to: string;
+        robot_move_axes_relative: string;
+        robot_move_axes_to: string;
+        robot_open_gripper_jaw: string;
+        row_layout: string;
+        save_position: string;
+        set_and_await_hs_shake: string;
+        setting_hs_temp: string;
+        setting_temperature_module_temp: string;
+        setting_thermocycler_block_temp: string;
+        setting_thermocycler_lid_temp: string;
+        single: string;
+        single_nozzle_layout: string;
+        slot: string;
+        target_temperature: string;
+        tc_awaiting_for_duration: string;
+        tc_run_profile_steps: string;
+        tc_starting_extended_profile: string;
+        tc_starting_extended_profile_cycle: string;
+        tc_starting_profile: string;
+        touch_tip: string;
+        trash_bin: string;
+        trash_bin_in_slot: string;
+        turning_rail_lights_off: string;
+        turning_rail_lights_on: string;
+        unlatching_hs_latch: string;
+        wait_for_duration: string;
+        wait_for_resume: string;
+        waiting_for_hs_to_reach: string;
+        waiting_for_tc_block_to_reach: string;
+        waiting_for_tc_lid_to_reach: string;
+        waiting_to_reach_temp_module: string;
+        waste_chute: string;
+        with_reference_of: string;
+    };
+};

package/lib/assets/localization/index.d.ts

@@ -0,0 +1,202 @@
+export declare const resources: {
+    en: {
+        protocol_command_text: {
+            absorbance_reader_close_lid: string;
+            absorbance_reader_initialize: string;
+            absorbance_reader_open_lid: string;
+            absorbance_reader_read: string;
+            adapter_in_mod_in_slot: string;
+            adapter_in_slot: string;
+            air_gap_in_place: string;
+            all_nozzles: string;
+            aspirate: string;
+            aspirate_in_place: string;
+            blowout: string;
+            blowout_in_place: string;
+            closing_tc_lid: string;
+            column_layout: string;
+            comment: string;
+            configure_for_volume: string;
+            configure_nozzle_layout: string;
+            confirm_and_resume: string;
+            deactivate_hs_shake: string;
+            deactivate_temperature_module: string;
+            deactivating_hs_heater: string;
+            deactivating_tc_block: string;
+            deactivating_tc_lid: string;
+            degrees_c: string;
+            detect_liquid_presence: string;
+            disengaging_magnetic_module: string;
+            dispense: string;
+            dispense_in_place: string;
+            dispense_push_out: string;
+            drop_tip: string;
+            drop_tip_in_place: string;
+            dropping_tip_in_trash: string;
+            engaging_magnetic_module: string;
+            extension_mount: string;
+            extension_z: string;
+            extension_jaw: string;
+            fixed_trash: string;
+            get_next_tip: string;
+            home_gantry: string;
+            in_location: string;
+            latching_hs_latch: string;
+            left: string;
+            left_mount: string;
+            left_plunger: string;
+            left_z: string;
+            load_labware_to_display_location: string;
+            load_liquid_class: string;
+            load_liquids_info_protocol_setup: string;
+            load_module_protocol_setup: string;
+            load_pipette_protocol_setup: string;
+            module_in_slot: string;
+            module_in_slot_plural: string;
+            move_labware: string;
+            move_labware_manually: string;
+            move_labware_on: string;
+            move_labware_using_gripper: string;
+            move_relative: string;
+            move_to_addressable_area: string;
+            move_to_addressable_area_drop_tip: string;
+            move_to_coordinates: string;
+            move_to_slot: string;
+            move_to_well: string;
+            multiple: string;
+            notes: string;
+            off_deck: string;
+            offdeck: string;
+            on_location: string;
+            opening_tc_lid: string;
+            pause: string;
+            pause_on: string;
+            partial_layout: string;
+            pickup_tip: string;
+            prepare_to_aspirate: string;
+            reloading_labware: string;
+            return_tip: string;
+            right: string;
+            right_mount: string;
+            right_plunger: string;
+            right_z: string;
+            robot_close_gripper_jaw: string;
+            robot_move_to: string;
+            robot_move_axes_relative: string;
+            robot_move_axes_to: string;
+            robot_open_gripper_jaw: string;
+            row_layout: string;
+            save_position: string;
+            set_and_await_hs_shake: string;
+            setting_hs_temp: string;
+            setting_temperature_module_temp: string;
+            setting_thermocycler_block_temp: string;
+            setting_thermocycler_lid_temp: string;
+            single: string;
+            single_nozzle_layout: string;
+            slot: string;
+            target_temperature: string;
+            tc_awaiting_for_duration: string;
+            tc_run_profile_steps: string;
+            tc_starting_extended_profile: string;
+            tc_starting_extended_profile_cycle: string;
+            tc_starting_profile: string;
+            touch_tip: string;
+            trash_bin: string;
+            trash_bin_in_slot: string;
+            turning_rail_lights_off: string;
+            turning_rail_lights_on: string;
+            unlatching_hs_latch: string;
+            wait_for_duration: string;
+            wait_for_resume: string;
+            waiting_for_hs_to_reach: string;
+            waiting_for_tc_block_to_reach: string;
+            waiting_for_tc_lid_to_reach: string;
+            waiting_to_reach_temp_module: string;
+            waste_chute: string;
+            with_reference_of: string;
+        };
+    };
+    zh: {
+        protocol_command_text: {
+            adapter_in_mod_in_slot: string;
+            adapter_in_slot: string;
+            aspirate: string;
+            aspirate_in_place: string;
+            blowout: string;
+            blowout_in_place: string;
+            closing_tc_lid: string;
+            comment: string;
+            configure_for_volume: string;
+            configure_nozzle_layout: string;
+            confirm_and_resume: string;
+            deactivate_hs_shake: string;
+            deactivate_temperature_module: string;
+            deactivating_hs_heater: string;
+            deactivating_tc_block: string;
+            deactivating_tc_lid: string;
+            degrees_c: string;
+            detect_liquid_presence: string;
+            disengaging_magnetic_module: string;
+            dispense_push_out: string;
+            dispense: string;
+            dispense_in_place: string;
+            drop_tip: string;
+            drop_tip_in_place: string;
+            engaging_magnetic_module: string;
+            fixed_trash: string;
+            home_gantry: string;
+            latching_hs_latch: string;
+            left: string;
+            load_liquids_info_protocol_setup: string;
+            load_module_protocol_setup: string;
+            load_pipette_protocol_setup: string;
+            module_in_slot_plural: string;
+            module_in_slot: string;
+            move_labware_manually: string;
+            move_labware_on: string;
+            move_labware_using_gripper: string;
+            move_labware: string;
+            move_relative: string;
+            move_to_coordinates: string;
+            move_to_slot: string;
+            move_to_well: string;
+            move_to_addressable_area: string;
+            move_to_addressable_area_drop_tip: string;
+            notes: string;
+            off_deck: string;
+            offdeck: string;
+            opening_tc_lid: string;
+            pause_on: string;
+            pause: string;
+            pickup_tip: string;
+            prepare_to_aspirate: string;
+            reloading_labware: string;
+            return_tip: string;
+            right: string;
+            save_position: string;
+            set_and_await_hs_shake: string;
+            setting_hs_temp: string;
+            setting_temperature_module_temp: string;
+            setting_thermocycler_block_temp: string;
+            setting_thermocycler_lid_temp: string;
+            slot: string;
+            target_temperature: string;
+            tc_awaiting_for_duration: string;
+            tc_run_profile_steps: string;
+            tc_starting_profile: string;
+            trash_bin_in_slot: string;
+            touch_tip: string;
+            turning_rail_lights_off: string;
+            turning_rail_lights_on: string;
+            unlatching_hs_latch: string;
+            wait_for_duration: string;
+            wait_for_resume: string;
+            waiting_for_hs_to_reach: string;
+            waiting_for_tc_block_to_reach: string;
+            waiting_for_tc_lid_to_reach: string;
+            waiting_to_reach_temp_module: string;
+            waste_chute: string;
+        };
+    };
+};

package/lib/assets/localization/zh/index.d.ts

@@ -0,0 +1,82 @@
+export declare const zh: {
+    protocol_command_text: {
+        adapter_in_mod_in_slot: string;
+        adapter_in_slot: string;
+        aspirate: string;
+        aspirate_in_place: string;
+        blowout: string;
+        blowout_in_place: string;
+        closing_tc_lid: string;
+        comment: string;
+        configure_for_volume: string;
+        configure_nozzle_layout: string;
+        confirm_and_resume: string;
+        deactivate_hs_shake: string;
+        deactivate_temperature_module: string;
+        deactivating_hs_heater: string;
+        deactivating_tc_block: string;
+        deactivating_tc_lid: string;
+        degrees_c: string;
+        detect_liquid_presence: string;
+        disengaging_magnetic_module: string;
+        dispense_push_out: string;
+        dispense: string;
+        dispense_in_place: string;
+        drop_tip: string;
+        drop_tip_in_place: string;
+        engaging_magnetic_module: string;
+        fixed_trash: string;
+        home_gantry: string;
+        latching_hs_latch: string;
+        left: string;
+        load_liquids_info_protocol_setup: string;
+        load_module_protocol_setup: string;
+        load_pipette_protocol_setup: string;
+        module_in_slot_plural: string;
+        module_in_slot: string;
+        move_labware_manually: string;
+        move_labware_on: string;
+        move_labware_using_gripper: string;
+        move_labware: string;
+        move_relative: string;
+        move_to_coordinates: string;
+        move_to_slot: string;
+        move_to_well: string;
+        move_to_addressable_area: string;
+        move_to_addressable_area_drop_tip: string;
+        notes: string;
+        off_deck: string;
+        offdeck: string;
+        opening_tc_lid: string;
+        pause_on: string;
+        pause: string;
+        pickup_tip: string;
+        prepare_to_aspirate: string;
+        reloading_labware: string;
+        return_tip: string;
+        right: string;
+        save_position: string;
+        set_and_await_hs_shake: string;
+        setting_hs_temp: string;
+        setting_temperature_module_temp: string;
+        setting_thermocycler_block_temp: string;
+        setting_thermocycler_lid_temp: string;
+        slot: string;
+        target_temperature: string;
+        tc_awaiting_for_duration: string;
+        tc_run_profile_steps: string;
+        tc_starting_profile: string;
+        trash_bin_in_slot: string;
+        touch_tip: string;
+        turning_rail_lights_off: string;
+        turning_rail_lights_on: string;
+        unlatching_hs_latch: string;
+        wait_for_duration: string;
+        wait_for_resume: string;
+        waiting_for_hs_to_reach: string;
+        waiting_for_tc_block_to_reach: string;
+        waiting_for_tc_lid_to_reach: string;
+        waiting_to_reach_temp_module: string;
+        waste_chute: string;
+    };
+};

package/lib/atoms/Checkbox/index.d.ts

@@ -1,11 +1,11 @@
-import type * as React from 'react';
+import type { MouseEventHandler } from 'react';
 export interface CheckboxProps {
     /** checkbox is checked if value is true */
     isChecked: boolean;
     /** label text that describes the option */
     labelText: string;
     /** callback click/tap handler */
-    onClick: React.MouseEventHandler;
+    onClick: MouseEventHandler;
     /** html tabindex property */
     tabIndex?: number;
     /** if disabled is true, mouse events will not trigger onClick callback */
@@ -19,6 +19,7 @@ export declare function Checkbox(props: CheckboxProps): JSX.Element;
 interface CheckProps {
     isChecked: boolean;
     color?: string;
+    disabled?: boolean;
 }
 export declare function Check(props: CheckProps): JSX.Element;
 export {};

package/lib/atoms/CheckboxField/index.d.ts

@@ -1,19 +1,19 @@
-import type * as React from 'react';
+import type { ChangeEventHandler, ComponentProps, ReactNode } from 'react';
 export interface CheckboxFieldProps {
     /** change handler */
-    onChange: React.ChangeEventHandler;
+    onChange: ChangeEventHandler;
     /** checkbox is checked if value is true */
     value?: boolean;
     /** name of field in form */
     name?: string;
     /** label text for checkbox */
-    label?: React.ReactNode;
+    label?: ReactNode;
     /** checkbox is disabled if value is true */
     disabled?: boolean;
     /** html tabindex property */
     tabIndex?: number;
     /** props passed into label div. TODO IMMEDIATELY what is the Flow type? */
-    labelProps?: React.ComponentProps<'div'>;
+    labelProps?: ComponentProps<'div'>;
     /** if true, render indeterminate icon */
     isIndeterminate?: boolean;
 }

package/lib/atoms/Chip/index.d.ts

@@ -15,6 +15,8 @@ interface ChipProps extends StyleProps {
     hasIcon?: boolean;
     /** Chip size medium is the default size */
     chipSize?: ChipSize;
+    /** icon should pulse */
+    pulseIcon?: boolean;
 }
 export declare function Chip(props: ChipProps): JSX.Element;
 export {};

package/lib/atoms/Divider/index.d.ts

@@ -1,5 +1,5 @@
-import type * as React from 'react';
 import { Box } from '../..';
-type Props = React.ComponentProps<typeof Box>;
+import type { ComponentProps } from 'react';
+type Props = ComponentProps<typeof Box>;
 export declare function Divider(props: Props): JSX.Element;
 export {};

package/lib/atoms/InlineNotification/index.d.ts

@@ -0,0 +1,18 @@
+import type { MouseEventHandler } from 'react';
+import type { StyleProps } from '../../primitives';
+type InlineNotificationType = 'alert' | 'error' | 'neutral' | 'success';
+export interface InlineNotificationProps extends StyleProps {
+    /** name constant of the icon to display */
+    type: InlineNotificationType;
+    /** InlineNotification contents */
+    heading: string;
+    message?: string;
+    /** Optional dynamic width based on contents */
+    hug?: boolean;
+    /** optional handler to show close button/clear alert  */
+    onCloseClick?: (() => void) | MouseEventHandler<HTMLButtonElement>;
+    linkText?: string;
+    onLinkClick?: (() => void) | MouseEventHandler<HTMLButtonElement>;
+}
+export declare function InlineNotification(props: InlineNotificationProps): JSX.Element;
+export {};

package/lib/atoms/InputField/index.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { TYPOGRAPHY } from '../../ui-style-constants';
+import type { ChangeEventHandler, FocusEvent, MouseEvent, MutableRefObject, ReactNode } from 'react';
 import type { IconName } from '../../icons';
 export declare const INPUT_TYPE_NUMBER: "number";
 export declare const LEGACY_INPUT_TYPE_TEXT: "text";
@@ -8,7 +8,7 @@ export interface InputFieldProps {
     /** field is disabled if value is true */
     disabled?: boolean;
     /** change handler */
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
     /** name of field in form */
     name?: string;
     /** optional ID of <input> element */
@@ -16,7 +16,7 @@ export interface InputFieldProps {
     /** placeholder text */
     placeholder?: string;
     /** optional suffix component, appears to the right of input text */
-    units?: React.ReactNode;
+    units?: ReactNode;
     /** current value of text in box, defaults to '' */
     value?: string | number | null;
     /** if included, InputField will use error style and display error instead of caption */
@@ -30,11 +30,11 @@ export interface InputFieldProps {
     /** optional input type (default "text") */
     type?: typeof LEGACY_INPUT_TYPE_TEXT | typeof LEGACY_INPUT_TYPE_PASSWORD | typeof INPUT_TYPE_NUMBER;
     /** mouse click handler */
-    onClick?: (event: React.MouseEvent<HTMLInputElement>) => unknown;
+    onClick?: (event: MouseEvent<HTMLInputElement>) => unknown;
     /** focus handler */
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => unknown;
     /** blur handler */
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => unknown;
     /** makes input field read-only */
     readOnly?: boolean;
     /** html tabindex property */
@@ -44,14 +44,14 @@ export interface InputFieldProps {
     /** if true, clear out value and add '-' placeholder */
     isIndeterminate?: boolean;
     /** if input type is number, these are the min and max values */
-    max?: number;
-    min?: number;
+    max?: number | string;
+    min?: number | string;
     /** horizontal text alignment for title, input, and (sub)captions */
     textAlign?: typeof TYPOGRAPHY.textAlignLeft | typeof TYPOGRAPHY.textAlignCenter;
     /** small or medium input field height, relevant only */
     size?: 'medium' | 'small';
     /** react useRef to control input field instead of react event */
-    ref?: React.MutableRefObject<HTMLInputElement | null>;
+    ref?: MutableRefObject<HTMLInputElement | null>;
     /** optional IconName to display icon aligned to left of input field */
     leftIcon?: IconName;
     /** if true, show delete icon aligned to right of input field */
@@ -65,4 +65,4 @@ export interface InputFieldProps {
     /** optional prop to override input field padding */
     padding?: string;
 }
-export declare const InputField: React.ForwardRefExoticComponent<Omit<InputFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const InputField: import("react").ForwardRefExoticComponent<Omit<InputFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/lib/atoms/ListButton/ListButtonChildren/ListButtonAccordion.d.ts

@@ -1,6 +1,6 @@
-import type * as React from 'react';
+import type { ReactNode } from 'react';
 interface ListButtonAccordionProps {
-    children: React.ReactNode;
+    children: ReactNode;
     isExpanded?: boolean;
     isNested?: boolean;
     mainHeadline?: string;

package/lib/atoms/ListButton/ListButtonChildren/ListButtonAccordionContainer.d.ts

@@ -1,6 +1,6 @@
-import type * as React from 'react';
+import type { ReactNode } from 'react';
 interface ListButtonAccordionContainerProps {
-    children: React.ReactNode;
+    children: ReactNode;
     id: string;
 }
 export declare function ListButtonAccordionContainer(props: ListButtonAccordionContainerProps): JSX.Element;

package/lib/atoms/ListButton/index.d.ts

@@ -1,11 +1,17 @@
-import type * as React from 'react';
+import type { ReactNode } from 'react';
 import type { StyleProps } from '../../primitives';
 export * from './ListButtonChildren/index';
-export type ListButtonType = 'noActive' | 'connected' | 'notConnected';
+type ListButtonType = 'noActive' | 'connected' | 'notConnected' | 'onColor';
 interface ListButtonProps extends StyleProps {
+    /** ListButton type */
     type: ListButtonType;
-    children: React.ReactNode;
+    /** ListButton content */
+    children: ReactNode;
+    /** ListButton disabled state */
     disabled?: boolean;
+    /** ListButton onClick event */
     onClick?: () => void;
+    /** optional data-testid value for Cypress testing */
+    testId?: string;
 }
 export declare function ListButton(props: ListButtonProps): JSX.Element;

package/lib/atoms/ListItem/ListItemChildren/ListItemCustomize.d.ts

@@ -8,8 +8,8 @@ interface ListItemCustomizeProps {
     label?: string;
     dropdown?: DropdownMenuProps;
     tag?: TagProps;
-    /** temporary prop for dropdown menu  */
-    forceDirection?: boolean;
+    /** optional placement of the menu */
+    menuPlacement?: 'auto' | 'top' | 'bottom';
 }
 export declare function ListItemCustomize(props: ListItemCustomizeProps): JSX.Element;
 export {};

package/lib/atoms/ListItem/ListItemChildren/ListItemDescriptor.d.ts

@@ -1,7 +1,12 @@
 interface ListItemDescriptorProps {
+    /** ListItemDescriptor size type */
     type: 'default' | 'large';
+    /** ListItemDescriptor description */
     description: JSX.Element;
+    /** ListItemDescriptor content */
     content: JSX.Element;
+    /** ListItemDescriptor flex direction */
+    changeFlexDirection?: boolean;
 }
 export declare const ListItemDescriptor: (props: ListItemDescriptorProps) => JSX.Element;
 export {};

package/lib/atoms/ListItem/index.d.ts

@@ -1,12 +1,12 @@
-import type * as React from 'react';
+import type { ReactNode } from 'react';
 import type { StyleProps } from '../../primitives';
 export * from './ListItemChildren';
-export type ListItemType = 'error' | 'noActive' | 'success' | 'warning';
+export type ListItemType = 'error' | 'default' | 'success' | 'warning' | 'unavailable' | 'defaultOnColor' | 'successOnColor' | 'warningOnColor' | 'errorOnColor';
 interface ListItemProps extends StyleProps {
     /** ListItem state type */
     type: ListItemType;
     /** ListItem contents */
-    children: React.ReactNode;
+    children: ReactNode;
     onClick?: () => void;
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;